APP设计规范

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.字体大小搭配

1. 顶部操作栏文字大小：34-38px              

2. 标题文字大小：28-34px

3. 正文文字大小：26-30px                        

4. 辅助性文字大小：0-24px

5. Tab bar文字大小：20px

6. 列表页的标题和详情文字大小一般用4和6的梯度搭配，例如：一般文字30px标题搭配26px详情，带头列表30px标题搭配24px辅助信息。

7. 详情页文章标题与正文文字大小间距为8的倍数，例如：40px、32px、24px等。

8. 行间距与字号比例为1.5倍。

2.界面图标大小

1. 需点击的图标一般大小设置为：44px、48px、50px

2. 无需操作的图标一般大小设置为：30px、34px、38px

3.其它尺寸

1. 列表行高，紧凑型：88px/90px，宽松型：100px，2行文字列表：120px

2. 搜索框高度：70px

3. 安全距离：30px

4. 按钮高度：80-120px区间

5. 弹出窗宽度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