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