一款app设计的设计规范，ios精华篇

qazx6300
等待验证会员

帖子 3

新博币 0

提现

提现 0 元

发表于 2017-12-22 10:37:39 6258 37 | 显示全部楼层 |正序浏览

^#

本帖最后由 qazx6300 于 2017-12-22 13:24 编辑

1、关于设计工具

俗话说：工欲善其事必先利其器，好的工具可以让我们的工作效率更高，做界面设计我们用的最多的就是PS和AI了，如果你是Mac用户，可以尝试一下sketch，软件的版本当然是推荐高版本，因为功能更强大，作图的速度也就更快。
我个人刚接触ps是从8.0开始，8.0 – CS4 – CS 5 – CS 6 – CC – CC 2014 – CC 2015，一直到现在的最新的CC 2017，深刻体会，新的版本更好用。也可以根据个人习惯，选择自己顺手的工具就好。
2、设计稿尺寸
在看设计稿尺寸之前，我们先来了解一下APP界面设计构成
界面构成由：布局层、图文排版层和图标层。
在iPhone 6还没出的时候，都是用640×1136 px来做设计稿的，自从6的发布，所有的设计稿尺寸以750×1334 px来做设计稿尺寸
以750x1334px作为设计稿标准尺寸的原由：
从中间尺寸向上和向下适配的时候界面调整的幅度最小，最方便适配。
大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角。
设计安卓版本时只需做最小的设计调整，提升设计效率。

所以做设计稿事请以750x1334px来做设计稿

3、图标设计规范

4、关于设计字体
      iOS 10：英文字体为San Francisco
      iOS 10：中文字体为苹方
      关于字体大小的问题：

      顶部操作栏文字大小：34-38px
      标题文字大小：28-34px
      正文文字大小：26-30px
      辅助性文字大小：0-24px
      Tab bar文字大小：20px

      文字大小只是一个范围，这要根据设计的视觉效果来决定，不要死记硬背，但是切记，字体大小要用偶数。

手机型号分辨率

5、如何让效果图高还原度落地？
（1）规范的视觉界面设计必须按照各平台的UI设计规范去规范的设计界面，用设计规范去知道开发，才是提高视觉还原的的基本前提
（2）视觉UI控件的规范输出在绝大多数的情况下，为了赶项目进度，都是界面先行，设计规范后出，所以要竟可能的保持界面设计和规范是同步进行。
（3）规范的切图与精确的标注我们的切图和标注，是否规范和精确，直接影响视觉效果的还原度，所以切图和标注一定要做的细致，这样更加有利于提升还原度
（4）多和开发沟通交流我一直说的一句话：沟通是解决问题的最有效方法，所以多和开发哥哥接触沟通交流，如果有条件允许的话，请与开发坐一起；遇到问题及时面对面协商解决、达成共识、修改、敲定、解决。

不同手机设计尺寸