作为一名UI设计师我容易嘛！（附完整版设计自查表）

又到了金三银四找工作的黄金时间了，我们设计师在工作中一定要养成复盘沉淀的习惯，在每一个习惯性操作前先想想为什么？为什么这样设计，这样设计的好处是什么，有没有更好的方法？通过这样的思考方式培养自己的批判性思维。这篇文章主要从UI设计的角度出发去分析阐述安卓与iOS在设计规范上的差异性，以及在与开发同学沟通时遇到的几点小问题，希望大家可以对设计有新的思考。

安卓与iOS在设计规范上的差异性

• 视觉风格

iOS通过使用留白、简化UI、使用无边框按钮等方式使得呈现的功能更加清晰。Material design通过构建系统化的动效和空间合理化利用，给人很强的统一感和秩序感。

• 支付规则

对于iOS用户来说，支付渠道必须走苹果支付平台，并抽取30%作为服务费。而Android版不用走平台，使用支付宝、微信支付等第三方支付平台即可。

• 推送规则

iOS系统的消息推送必须依靠苹果的APNS服务器，信息与app之间的交互是通过苹果的服务器完成的。而Android的消息推送相比之下更加开源，在不选择使用GCM的情况下，app的消息推送就需要在自己或者是第三方服务器与设备之间建立一条长连接，通过长连接进行推送。

这意味着iOS端，即使关闭掉app的后台，依旧可以接收到推送。而Android端则需要保持后台在线才能收到推送消息。

• 文件选取

如果iOS版app想要发送文件时，则无法选择对应的文件夹里面的文件。但是因为有了iCloud的存在，可以通过iCloud选择文件。而安卓版则可以调取文件夹，选择对应的文件发送。如下图所示，qq给好友发送文件时，直接进入手机的文件夹中找到对应的文件。

• 手势区别

Android和iOS的手势区别比较大，对于隐藏的操作，安卓长按较多，iOS左右滑动较多。以微信为例，安卓针对列表更多操作时，采用长按手势，长按出现菜单。而iOS左右滑动出现隐藏的操作。

• 组件风格

Android组件整体呈现通过投影产生层级区分，iOS则通过简洁的视觉层级区分，单纯的分割线区分层级关系。

设计规范的优势：

设计层面：解决用户体验一致性，减少设计成本，提高设计效率。沉淀设计资产，使得设计更加持续地输出价值，减少一次性设计，同时使设计师从样式中解放出来，站在更高的层面上来思考业务与体验。

开发层面：与设计规范同步形成研发资产，避免重复造轮子，保证代码质量，降低维护和拓展的成本。

测试层面：避免重复的无意义走查。之前遇到过一个深色模式的需求，尽管只换了颜色，但是测试仍然把所有组件都测试了一遍，加上重复的设计、开发量，导致原本一个很简单的需求，居然花费了12人天的工作量。

产品层面：提高产品迭代与优化效率，降低试错成本。

协作层面：降低不同设计师之间以及设计师与开发工程师之间的沟通成本。

常见设计问题

• 阴影有几种表现形式，如何与开发进行沟通？

答：我们先拿web端和移动端来讲。

web端：一般我会设置为三种阴影样式S、M、L 与之对应的数值设置（0，2，4，0）（0，3，6，0）（0，4，8，0）

S：突出组件悬停效果，表示可供性，对于这个数据概览卡片来说，鼠标移入移出时阴影的显示与隐藏提供了一个交互可能性，表明它是可以点击交互的。

M：给下拉列表，气泡提示等使用的阴影。因为这些元素是与由底层元素展开而来的，但又不属于底层元素，所以将中等层级的阴影给了这些元素。

L：模态组件阴影。例如弹窗。当弹窗出现时，弹窗位于绝对的最顶层，所以阴影最大。

移动端：我常用的一组数值规律是 1:2 或 1:3，例如 Y 轴偏移 10px，模糊度则设定为 20 或 30px，这样成比例的数值出来的效果会较为自然。

• 在标准文本框中，几乎总是在实际文本的上方和下方都有多余的空间，该如何解决？

答：这应该是我们设计师遇到的常见问题，从开发的角度，开发同学可以设置固定行高，这样就可以把高度压缩到你想看到的大小；从设计师的角度上可以将行高与字体设成相同的数值。

但是最近我发现了一个新兴的CSS样式规范，叫做Leading-Trim。Leading-trim是CSS工作组正在引入的新CSS属性。顾名思义，它就像文本框剪刀一样工作。您只需使用两行CSS，就可以从您选择的参考点中修剪掉所有多余的空间。

h1{

text-edge: cap alphabetic;
leading-trim: both;
}

这两行CSS创建了一个贴合的文本框来包裹文本。这可以帮助你获得更准确的间距并创建更好的视觉层次。

但是该提案还处于讨论阶段，后期可能会放入 css4新特性里面吧，我们可以小小的期待一下～

• 栅格化系统该如何使用

一个完整的栅格系统包含什么元素？栅格的大小间距是固定还是可以自己设定的？

栅格是由列、水槽构成。可以做成只有列阵的网格系统，也可以做成横竖交叉的网格系统，在这里我们一般使用通用的1440px的安全区域。

版面宽度=（列宽+水槽宽）*列数

知道了列宽、列数、水槽、版面的关系，再来看看如何设定数值：我们可以根据版面的需求设定列数。比如页面中内容简洁，我们就可以把列数设置的少一些，而如果是需要展示比较多、复杂的页面细节，就可以适当增加列数。一般情况下，列数都是用2、4、6、12、24这样的偶数。

水槽的宽度也不是固定不变，同样是根据版面的需求来设定。比如说追求版面利用率的产品，水槽宽度就可以小一点，而轻量简洁的页面，水槽宽度就可以设置大一些，增强呼吸感。基本上可以设置为8、10、12、16、20、24这样的数值。正常情况下，水槽的值为24时，视觉是最舒适的。

                  

有了栅格化系统，可以做看产品的需要度来做响应式的布局，在面对多个分辨率时，仅需设计一套来适配即可，这样可以使布局更标准化，减少决策的时间，专注于内容上的设计体现。

栅格化系统在Sketch里设置非常方便，「视图」-「画布」-「布局设置」即可得到如下界面设置栅格系统。

好了，本期就是以上内容，最后附上以下这个设计自查表供大家查阅，每当设计完一个模块或是优化完一个流程，可以对照以下的表来检查设计稿有没有考虑周全，我们下期见bye~