移动设备的界面设计尺寸刚开始接触UI的时候,碰到的最多的就是尺寸问题,什么画布要建多大、文字 该用多大才合适、我要做几套界面才可以?什么七七八八的也着实让人有些头疼iPhone 界面尺寸:320x480、640x960、640x1136iPad 界面尺寸:1024x768、2048x1536(以上单位都是像素哦至于分辨率一般网页UI和移动UI基本上都只要72 ppi)当然,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的尺寸来设 计,比较方便预览效果,一般用640x960或者640x1136的尺寸设计画的,这样更方便P.S.作图的时候确保都是用形状工具(快捷键:U)后期的切图或尺寸变更~2、界面基本组成元素iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单 栏以及中间的内容区域这里取用640x960的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸:状态栏:就是我们经常说的信号、运营商、电量等显示状态的区域,其高 度为:40 px导航栏:显示当前界面的名称,包含相应的功能或者页面间跳转的按钮,其高度为:88 px主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98 px内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁的,其高度为:734 px(等等,为了说明我不是瞎掰的:960-40-88-98=734)iinaUJTJ KL1J眼1 吨 L_B■M覺〜丄一聲丑多纟割屈迴郵删凶ZSO!皿輕¥国±M'撕區早躍玄豳昼4A' '裡一工丑吕誣昔业誨mk'丑马申亲翠#乃罢SI層J畀肛艺□畜去'出劲凶申ZSO!申母窖丑Sdxd 016 : [ID诲偉厚愆因晶ME眶、I出哥鼎运茸’4A図9ETTTX0V9 M ss/gauoqd!図改景艺四莊壬吏sgauoqdl/DS^uoqdl/S^uoqd!Jfdge5-£ euo^dl/^S^^OMdl/S bliolij!諂9口 |3字体大小iPhone上的字体英文为:HelveticaNeue至于中文,Mac下用的是黑体- 简,Win下则为华文黑体。
下图是百度用户体验做过的一个小调查,可以看出用户可接受的文字大小,像 素为单位,也就是大家在PS里的文字像素大小siwfejai用户认为怕小)(用户认为审胖站)10$.26px30 px32px-34pjc垢文本3>0pX24px20pXP.S.多留心下一些大公司的数据研究,你会发现很多你根本没考虑到的问题哦其实还有个更简单的方法就是找你觉得好的APP应用,截图后放进PS自 己对比调节字体大小咯~我的青乐Muxx01:15 -咖』邓盘撇我的音乐一34 px我的、淘歌、发现——30 pxMukx 34 px本地音乐 30 px泡沫、邓紫棋一24 px〔原谅我又拿我:之前的界面说零了…)QOO总之,方法是自己找的,想办法解决问题,自己实践,比别人告诉你印象更深 刻不是么~ ?Android 篇1尺寸及分辨率Android 界面尺寸:480x800、720x1280、1080x1920...(单位:像素)Android比iPhone的尺寸多了很多套,建议取用720x1280这个尺寸,这 个尺寸720x1280中显示完美,在1080x1920中看起来也比较清晰;切图后 的图片文件大小也适中,应用的内存消耗也不会过高。
2、界面基本组成元素Android的APP界面和iPhone的基本相同:状态栏,导航栏、导航栏、 主菜单栏以及中间的内容区域Android中我们取用720x1280的尺寸设计,那我们就说说在这个尺寸下这 些元素的尺寸:状态栏高度为:50 px导航栏高度为:96 px主菜单栏高度为:96 px内容区域高度为:1038 px ( 1280-50-96-96=1038 )Android最近出的都几乎去掉了实体键,把功能键移到了屏幕中,当然高 度也是和菜单栏一样的:96 pxP.S.写之前我翻了好多关于Android的界面尺寸教程,都没找到像iOS —样 具体的规范,或许因为在安卓中这些控件的高度都能用程序自定义~都没有提到 具体的尺寸数值,所以就自己找了 Android的设计规范,尺寸都是自己在PS 中量白勺—Android为了在界面上区别于iOS , Android 4.0开始提出一套HOLO的 UI风格,一些APP的最新版都采用了这一风格这一风格最明显的变化就是将下方的主菜单移动到了导航栏下面,这样的方式 解决了现在很多去除实体按键后在屏幕中显示而出现的双底栏的尴尬情景3字体大小Android上的字体为:Droid sans fallback,是谷歌自己的字体,与微软雅黑很像。
同样,百度用户体验的调查中,可以看出用户可接受的文字相应问题 品魁倚臨和1(480"BOO)辰文本21px24呼27 px2Lpx2