切图时,切px(像素)单位即可,终端自动换算成pt单位
iOS的app_icon是不需要带圆角切的,系统会自动处理。常规的app-icon全套图标尺寸一共有7套,分别有:40x40px、60x60px、58x58px、87x87px、80x80px、120x120px、180x180px、1024x1024px(圆角180,系统自动处理)。
一个图标分别切图@1x(一倍图)、@2x(二倍图)、@3x(三倍图)的3套尺寸,有时候也只需要切图@2x、@3x两个尺寸,具体切2套还是3套需要和前端工程师沟通。以分辨率750x1334px,底部导航切图大小为:44x44px为例,全套适配尺寸如下:
iOS启动页常规切图所有适配尺寸,共7套,分别有:
640x960px
640x1136px
750x1334px
1242x2208px
828x1792px
1125x2436px
1242x2688px
将iOS的设置页截图吸色以备iOS配色使用
一个大型项目会分很多模块,每个模块由不同的设计师来独立完成,还有人会专门管理公共的组件,如tabbar、navbar等等,这种情况下就会分为两种切图,一种是组件类型的切图,还有一种就是各个模块类型的切图。
组件_类别_功能_状态@2x.png
举例:tabbar_icon_home_default@2x.png(标签栏_图标_主页_默认@2x.png)
模块_类别_功能_状态@2x.png
举例:mail_icon_search_pressed@2x.png(邮件_图标_搜索_默认@2x.png)
命名原则是清晰的表达出切片的具体内容并且没有重复的名称。(要注意,命名中不能含有空格,并且最好使用全英文命名)
这样不管是开发要拿,或者你要更新,都在这个统一的地方交接就行。
当出现不同页面但相同功能的图标,使用通用文件夹,哪怕是不同的页面,开发也能在一个文件包中找,不用在每个页面包中来来回回。
像一些常用的控件,比如nav、toolbar、setting、tab等,也可以整理成一个通用的切图包。
在ios中要求的icon大多数尺寸为44px,很多都是可以再不同页面里通用的,用类目归类法。
以iPhone6,分辨率为750x1334px为例,实战测量部分界面尺寸如下图:
顶部操作栏文字大小:34-38px
标题文字大小:28-34px
正文文字大小:26-30px
辅助性文字大小:0-24px
Tabbar文字大小:20px
列表页的标题和详情文字大小一般用4和6的梯度搭配,例如:一般文字30px标题搭配26px详情,带头列表30px标题搭配24px辅助信息。
行间距与字号比例为1.5倍。
需点击的图标一般大小设置为:44px、48px、50px
无需操作的图标一般大小设置为:30px、34px、38px
列表行高,紧凑型:88px/90px,宽松型:100px,2行文字列表:120px
搜索框高度:70px
安全距离:30px
按钮高度:80-120px区间
弹出窗宽度540px,占比75%的宽度,圆角:24px
中文字体:Noto(思源黑体)
英文字体:Roboto
切图时,切px(像素)单位即可,终端自动换算成dp/sp单位
dpi=屏幕宽度(或高度)像素/屏幕宽度(或高度)英寸
dp=(宽度像素x160)/dpi
Android端每个图标分别切图mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi一共5套尺寸。以xhdpi的720x1280px,底部导航icon大小切图为:48x48px为例,5个适配尺寸分别为:
mdpi——24x24px1倍
hdpi——36x36px1.5倍
xhdpi——48x48px2倍
xxhdpi——72x72px3倍
xxxhdpi——96x96px4倍
Android启动页常规切图所有适配尺寸,共5套,分别有:
mdpi——360x640px
ndpi——540x960px
xndpi——720x1280px
xxndpi——1080x1920px
xxxndpi——1440x2560px
高频使用的是500色值和700色值
简化操作:能一步完成的交互就不要分两步。
用户习惯:大部分用户都有固化思维,我们作为设计师应该尊重思维习惯,尊重用户选择。
减少干扰:减少界面元素的不确定因素,方便用户快速找到自己想要的。
快速响应:加快用户读取的响应速度,能够避免从远程取数据的,就尽量避免。(设计师需了解,需和后台工程师沟通)
界面友好:除了根据需求提供视觉解决方案以外,在设计的过程中适当地加入一些小细节使交互界面更加友好会加分不少哦。
ui规范推荐仅供参考,不是标准答案,在一定区间内合理美观即可。