锐客网

  1. 首页 > 睿知 > >

iOS手机APP设计规范，设计APP平面时图片的分辨率是多少

经验分享睿知

1，设计APP平面时图片的分辨率是多少屏幕分辨率：屏幕上显示的像素个数，单位尺寸内像素点越多，显示的图像就越清楚 。单位是px，1px=1个像素点 。分辨率720*1280表示手机水平方向的像素为720，垂直方向为1280.市场上主流分辨率有：480*800、 720*1280、 1080*1920（其他的早该淘汰了 ， 忽略不计） 。特别注意：这里的分辨率和我们ps里面设置的分辨率不是同一个分辨率 。一般设计的时候我们设置ps的分辨率为：72 像素/英寸又不印刷什么 用来显示72dpi够了1、苹果iOS版本的iphone APP UI设计尺寸规范：2、Andriod 版本的APP UI设计尺寸规范主流的手机设计尺寸：460*800 px 1280*720 px 设计版本是：1280*720 px视觉设计师通常在480x800px下进行设觉设计，然后进行适配HVGA(320×480)等 。我们设计稿的尺寸是选最大的 1280*720来设计 。然后按照常用的分辨率来切几个版网页的一般都是300的分辨率，72是出喷绘用的我最近发现的一个网站：方酷，专做app设计的 ， 你可以去看看 ， 里面有不少优秀的app设计作品，你可以参考一下 。
2，iOS设计规范状态栏：40px导航栏：88px 标签栏：98px状态栏：40px导航栏：88px 标签栏：98px状态栏：60px导航栏：132px 标签栏：147px状态栏：132px导航栏：132px 标签栏：147px状态栏：88px导航栏：88px 标签栏：98px全局边距： 32px、30px、24px、20px（建议最小20px，边距数字选择偶数）卡片间距： 20px、24px、30px、40px（通常上下间距最小不低于16px，过小的间距会造成用户的紧张情绪）最常用的两种布局方式，列表式和卡片式「信息」页面通常采用列表式布局 。注：列表舒适体验的最小高度是80px，最大高度视内容而定 。例： 微信高度：136px QQ高度：132px自如高度110px唯品会高度：106px 。每张卡片的内容和形式都是相互独立的互不干扰 。卡片本身一般是白色，而卡片之间的间距颜色一般是浅色 ， 不同产品风格颜色可能不同 。双栏卡片布局形式，常见于图片信息为主导，每一屏显示至少4张卡片 。常见图片尺寸比例：16:9、4:3、1:1、1:0.618(黄金比例)等对齐、对称、分组文字是APP中最核心的元素，是产品传达给用户的主要内容 。在APP中字号范围一般在20-36之间（@2x） 。iOS 11中出现了大标题的设计，字号还是要根据产品属性酌情设定 。36px： 用在少数标题 。例：导航标题、分类名称等 。32px： 用在少数标题 。例：店铺标题等 。30px： 用在较为重要的文字或操作按钮 。例：列表性标题分类名称等 。28px： 用于段落文字 。例：列表性商品标题等 。26px： 用于段落文字 。例：小标题模块描述等 。24px： 用于辅助性文字 。例：次要的标语等 。22px： 用于辅助性文字 。例：次要的备注信息等 。iOS 主流设备的分辨率分别是：640x1136px：【（@2x）iPhone SE】750 x1134px：【（@2x）iPhone6s/7/8】1242x2208px：【（@3x）iPhone 6s/7/8 Plus】1125x2436px：【（@3x）iPhone X 】750x1624px：【（@2x）iPhone X 】注： 基准设计尺寸：750px x 1334px 。【iOS手机APP设计规范，设计APP平面时图片的分辨率是多少】
3 ， iOS和安卓的设计规范有何不同是一种基于Linux的自由及开放源代码的操作系统 。主要使用于移动设备 ， 如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发 。iOS是苹果公司的移动操作系统 。iOS是由苹果公司开发的移动操作系统，苹果公司最早于2007年1月9日的Macworld大会上公布这个系统，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad以及Apple TV等产品上 。iOS和安卓的ui区别二：UI设计规范不一样 。具体的UI设计规范详解请点击阅读：iOS、Android、WindowsPhone官方设计规范汇总比如现在通常设计的尺寸对比如下：iOS： 750*1334 或者 1242*2208android 720*1280 或者 1080*1920iOS和安卓的ui区别三：导航方式不一样iOS的Tab放在页面底部，不能通过滑动来切换，只能点击 。也有放在上面的 ， 也不能滑动，但有些Tab本身可以滑动，比如天猫的 。还有新闻类的应用 。Android一般放在页面顶端，可以通过滑动页面来切换Tab，当然Tab可以点击切换，Tab多的话，Tab本身也可以滑动 。比如豌豆荚，百度贴吧 ， QQ 。总之，Android啥都可以有 。iOS和安卓的UI区别四：单条item的操作iOS单条item的操作有两种，点击和滑动，点击一般进入一个新的页面 ， 滑动会出现对这条item的一些常用操作，如微信里滑动一条对话，会出现标记未读和删除 。Android中 ， 单条item的操作也有两种，点击和长按，点击一般进入一个新的页面 。长按进入一个编辑模式，可以在里面进行批量和其他一个操作，比如删除，顶置等等 。比如小米的短信页面；长按也可以弹出情境操作栏dialog，进行操作，比如Android版的微信 。OS和安卓的UI区别五：实体键iOS只有一个实体键（音量，电源不算哈） ， home键，这个键有这么几个功能：1、按一次，回到桌面 。2 、双击 ， 出现多任务界面3、iOS8里面，轻触两下Home键，调出单手模式4 、指纹解锁Android有四个实体键（现在很多被屏幕上的虚拟键代替 ， 但功效是一样的）4.4一下的分别是back键，home键，menu键 ， 和搜索键 。4.4及以上，是back键，home键，多任务键 。安卓原生是这样，经过优化的Android就不一定了，比如魅族的smart bar，根据当前页面情景变化，不过蛮好用 。Android的back键，在大部分情况下，和页面上的返回功效一样 。不过，Android的back键可以在应用件切换 ， 还可以返回主屏幕 。这个iOS里面的键不能在应用间直接切换 。iOS和安卓的UI区别六：浮窗设计元素不一样安卓里可以看到各种浮窗，流量 ， 清理内存等等 。iOS暂时还不支持这样的浮窗 。越狱的貌似可以 。iOS和安卓的UI区别七：图标尺寸和命名规范不一样1、iOS和安卓手机的APP图标尺寸规范和图标命名规范2、对比PC、iOS、Android等终端APP的交互设计的差异化iOS设计规范围绕一个核心，就是“模态”安卓设计规范如果总结成一句话，就是“任何地方均可点击”区别iOS和安卓设计的10个check points1. 如何全局导航：iOS导航tab bar放在底部（顶部手短摸不着）安卓导航tab个数少用固定tab ， 个数多用滚动tab，都在顶部（安卓的硬按键在底部，防止误操作）（如果种类太多 ， 都可以使用左侧抽屉设计）2. 二级页页头导航条是什么顺序：iOS导航1 向上箭头+上级页面标题2 当下页面标题（居中 ， 可以没有）3 操作（一般就一个）iOS不需要给出logo安卓导航1 向上箭头+logo+当下页面标题2 Spinner（optional）3 重要操作（可能多个）4 更多操作 （省略号竖向）安卓不需要指出上一级页面标题3. 搜索框设计安卓搜索点击放大镜进入搜索搜索框=非模态窗口+左箭头+LOGO+输入框（占位符）iOS7搜索下拉滑出搜索框进入搜索搜索框=模态窗口 ， 没有左箭头，没有搜索按钮4. 管理列表条目iOS左滑能删掉条目安卓长按操作条目（展现contextual menu或者contextual action bar）ps：安卓4.0已经逐步接受手势操作，不那么严格5. 批量管理条目iOS右上角有编辑按钮，点击进入批量管理安卓长按条目进入批量管理模态5. 视觉iOS主要内容白色，背景淡色，内容与背景衬线分割安卓不使用背景，一切区域皆可点6. 选择分类iOS使用scope bar或者左上角抽屉设计（汉堡包）安卓使用下拉菜单spinner（但是很少设计师喜欢）7. 操作工具栏iOS一律放在底部，叫split action bar安卓一律放在顶部右端，叫contextual action bar8. 产品LOGOiOS不在导航中显示logo安卓每一个页面左侧顶部都应该显示logo9. 列表样式iOS在条目上提供右箭头 ， 提醒更多内容（optional）安卓不放右箭头，一切区域皆可点击，不需要额外提醒10. 按钮安卓使用扁平方型按钮设计iOS7建议borderless按钮设计两者圆角尺寸也不同以上是想到的10处不同 ， 大家可以拿着它去看安卓和iOS上哪些app是符合规范的，哪些app又完全不懂规范？
4，IOS界面设计尺寸标准规范很多IOS APP UI设计稿都是以iphone6为基准的，方便向上适配iphone7的尺寸，也方便向下适配iphone5的尺寸 。所以我给大家分享iPhone6的界面设计尺寸有哪些规范 。IOS界面设计尺寸规范（以iPhone6为例）一、界面尺寸规范1、界面尺寸大小是：750x1334px 。2、状态栏(status bar)：就是电量条，其高度为：40px;3、导航栏(navigation)：就是顶部条，其高度为：88px;4、主菜单栏(submenu，tab)：就是标签栏 ， 底部条，其高度为：98px;5、内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px二、图标尺寸规范1、导航栏和工具栏尺寸大小44x44px；2、标签栏尺寸大小75x75px3、导航栏的文字大小最大值是34-36px，标签栏的图标下方的文字大小为20px 。4、内容区域的文字大小是：20px 24px，26px，28px，30px ， 32px，34px 。三、设置界面的图标高度和开关滑动按钮的高度：58px四、可点击高度规范在iPhone6的原型图上 ， 统一成88px 。在iPhone6设计稿中，88px是一个常用的设计尺寸 。五、搜索栏高度规范搜索栏的高度，在iPhone6的原型图上，统一成58px 。六、界面元素之间的距离规范在iPhone6设计稿中 ， 界面元素之间的常用距离，亲密距离：20px；疏远距离：30p x 。A、疏远距离：比如 ， 所有元素距离手机屏幕最左边的距离 。B、亲密距离：比如，左边图标与右边文字之间的距离 。七、原型设计中，需要考虑不同屏幕尺寸的苹果手机，在@1x的情况下的适配情况 。1、iPhone5在@2x屏幕尺寸是，640x1136px;对应的@1x，屏幕尺寸就是320x568px;2、iPhone6在@2x屏幕尺寸是：750x1334px;对应的@1x，屏幕尺寸就是375x667px;3、iPhone6Plus在@3x屏幕尺寸是：750x1334px;对应的@1x ， 屏幕尺寸就414x736px;八、iPhone6Plus的@3x，iPhone6的@2x, iPhone5的@2x的介绍1、iPhone6Plus是5.5英寸屏幕，1242x2208px-@3x的像素分辨率，逻辑分辨率是414x981px-@1x 。物理尺寸是1080x1920px 。这个物理尺寸 ， 也是安卓机目前最流行的大屏设计稿尺寸 。2、iPhone6是4.7英寸屏幕，750x1334px-@2x的像素分辨率，逻辑分辨率是375x889px-@1x 。3、iPhone5是4英寸屏幕，640x1135px-@2x的像素分辨率，逻辑分辨率是320x757px-@1x 。总结：iPhone6的原型规范如下：1、界面尺寸布局：满屏尺寸750x1334px；2、高度电量条高度40px，导航栏高度88px，标签栏高度98px；3、各区域图标大小导航栏图标44px ， 标签栏图标50px；4、各区域文字大小电量条文字22px，导航栏-文字32px，标签栏字20px；5、常用的文字大?。?2px，30px，28px ， 26px，24px，22px ， 20px；6、常用的颜色：背景浅灰色#f2f2f2,文字深黑色#323232，边框色深灰#CCCCCC；7、常用可点击区域的高度：88px；8、单行文字的背景框的高度：88px，双行则为：176px，三行则为：264px；9、常用间距：亲密距离：20px;疏远距离：30px ， 其它距离：10px，44px等；10、按钮和文本框，原型图做成直角的，圆角半径是多少，由Ui来设计；11、这种情况，需要修改原型 。单个页面的逻辑流程图或用户学习使用时间 ， 超过其它页面平均数的3倍以上

    推荐阅读


    上一篇：安卓开机壁纸,开机自动设置安卓壁纸方便又安全

    下一篇：爱普生4169固件