自2016年尚在上班至今日，我自学外加改改的指引下，总共设计完成版iOS平台的App4个。 就设计这4个App的体验而言，诚然是一次比一次更得心应手，但与专业的设计师差距依旧很大，更不敢贸然称自己是UI设计师。前路漫漫，得一点点积累。第一篇，对我前一段时间学并用的iOS平台的UI设计做一个小结与反思。

一、UI设计流程

（一）讨论（Discuss）

因为我们就是两人开发App，所以每次都是我们共同商讨来决定所开发的App具有的所有功能，一并理顺功能在界面的展示方式，然后纸笔勾勒出UI草图。我个人感觉，这是设计App之前核心的一个步骤。如果没有达成一致就开始设计页面，最终可能就是事倍功半，甚至是徒劳无功。通过讨论达成共识，虽在后期开发和设计中会有调整，但绝大部分都是小改动，核心功能和界面都是不会变的。

（二）线框图（Wireframe）

我理解的线框图就是用最简单的元素将整个App的界面样式以静态的形式展示出来，通常会用占位符来代表界面中的某些复杂元素。我在网上了解了一些画线框图的软件，如Axure、Uxpin。我试用了Uxpin，确实很方便，它有很多的设计模板可供选择，不过我从接触UI设计开始就是用的Sketch这个软件，目前还在考虑下一个产品是否用Uxpin来作线框图。

（三）原型图（Prototype）

我理解的原型图是一种中保真的设计图，强调了页面之间的简单交互。目前为止，我还没有接触动画的制作，所以我选择的是Xcode软件来展示页面之前的交互。作者静电出版的《双剑合璧》这本书就是详解了Sketch和Xcode完美搭配。另外，以我个人的经验来说，这个阶段就是针对流程一中所说的设计调整进行实施的最好时机。这是因为在作页面交互时，很容易发现设计逻辑和用户体验上的一些问题。而我们在这一阶段要尽量地完善我们的设计图，要把线框图上的占位符全部更替为图标、文本等App界面中实际的元素。

（四）视觉原型图（Mockup）

很显然，这就是最终呈现在用户面前的界面效果图，所以说是高保真的设计图。它需要完成Icon、Text等各个元素的颜色、大小，以及它们之间的间距等等设计要点。同时，它可能不仅需要静态的展示效果，还需要动态的展示效果（当然例如游戏类的App是必须动态效果的）。因为我目前做的是工具类App，还没有涉略动效的制作，所以我只做静态的Mockup。我使用的是Sketch的Mirror软件，只要开启手机端Mirror就可以实时同步。

当然，在实际工作中，我们这种Mini版的开发组合，很多时候都没有严格按照流程来，所以设计出稿的效率有点低。下一阶段，我准备好好践行这个流程。

二、UI设计规范

说实话，在我做完4个产品之后，我才开始认真阅读苹果公司发布的iOS平台上的UI设计指南。然而，因为是全英文版的，读起来又比较吃力，所以我在准备写这篇总结之前，花费了大量的时间细读iOS Human Interface Guidelines。前期只是一个点一个点的去了解iOS的设计要求，这次算是对iOS的UI设计概况有了一个大致的了解。

（一）App的界面

一个完整的产品包括代表产品品牌的图标（Icon）、启动App程序时的启动页面（Launch Screen）和用户可以操作的多项页面。另外，需要用户登录的App还要有登录页面，一般登录页面在Launch页面之前。

这其中App Icon 和 Launch是需要直接导出成图片给开发者使用的。App Icon 和 Launch的尺寸根据不同设备有所不一样，如下图所示。

（二）界面中元素的尺寸

1、图标（Icons）。iOS设计规范中明确规定了不同设备、不同界面下所适用的图标大小不同。当然，要记住所有的尺寸，脑容量有点有限。那么，我着重记住了在作图时常用到的尺寸：（1）Apple设备中的iOS Icon大小。我通常是在画布上画180px*180px大小的Icon，随后用插件来完成Apple设备中所有iOS Icon的尺寸，包括Spotlight、Settings、Notification and Widget Icons。我下载了用于Sketch中的插件AEIconizer，它可以导出适配于iOS平台的各种尺寸的Icon，极为方便。信息化时代，最便捷的就是资源共享，不同的设计软件都会有适配它的各种插件。（2）App中自定义的图标尺寸。iOS Human Interface Guidelines 中给出了参考数据。

一般情况下，我都会根据实际情况选择一个介于Recommended和Maximum中间的尺寸。

2、文字（Text）。目前，在UI设计中，我都是使用的Apple建议使用的字体：San Francisco fonts。通常，导航栏（Navigation）中的标题（Title）字号，我会采用默认字号：17号。页面中其他出现文本地方的文字大小根据具体情况而定。对于文本编辑，在我做过的几个App中所占分量着实很轻，所以没有投入心思去研究，了解也甚少。

3、栏（Bars）。UI界面中的栏包括状态栏（Status bar）、导航栏（Navigation bar）、搜索栏（Search bar）工具栏（Toolbar）和标签栏（Tab bar）。一般情况下，在375pt*667pt的画布上作图，状态栏的高度是20pt，导航栏的高度是44pt，搜索栏的高度是43pt，工具栏的高度是44pt，标签栏的高度是49pt，宽度都是375pt。

4、按钮（Button）。UI界面上可点击的按钮高度和宽度至少有一项不小于22pt（375*667的画布）。

三、设计工具Sketch的使用

Sketch对于我这样设计零基础的人来说真的是一大福音，它不是Photoshop那种无所不能的全能手，它就如它的官方用户指南里描述的那样——Sketch是为图标设计和界面设计而生的。它是一个有着出色 UI 的一站式应用，所有你需要的工具都触手可及。我用Sketch做了4个产品，从摸索到熟悉，从试用到购买，有一些使用心得，也有一些困惑。

（一）画布画板的管理

一个Skecth项目下可以创建多个画布，而Sketch 的画布尺寸是无限的，可以向任意方向无限延伸那么在一个画布上可以创建多个画板（Artboard）。所以，我们在作图时，就需要对画布和画板有一个规划和管理。这样便于后期我们查找和使用某一个项目。通常，我会把一个产品的UI设计稿当做一个项目来管理，把图标和页面分别用两个画布来管理，而App的每一个页面都是一个独立的画板。后期，我尝试把Wireframe、Prototype 和 Mockup三种有差异的UI设计稿分别在三个画布上呈现。总的来说，还是看个人习惯，找出效率最高和自己最适用的一种方式来管理林林总总的设计稿。

（二）工具的使用

Sketch页面的最上面一行就是工具栏，可以把自己常用的工具添加在这里。Sketch中的工具强大好用，熟悉这些工具可以达到事半功倍的效果。在Sketch用户手册里面有详细的说明，我不赘述于此。我针对自己目前使用起来有点障碍、不太熟悉的两个工具进行一个梳理：

1、路径结合工具。它就是我们常说的布尔运算。在Sketch的用户手册中画图说明了四种运算的逻辑，如下图。

其实，使用布尔运算创作的要点在于将复杂的图形拆分成多个基本图形（矩形、圆形、三角形等基本图形）。我比较困惑的点也在于此。很多图形，我不知从何下手去做拆分。

2、符号工具（Symbol）。符号本身是一种特殊的组，在图层列表中也是以组的形式出现，但是不同于普通的组的蓝色图标，符号会有一个紫色的文件夹图标。它让你方便的在多个页面和画板中重复运用某组内容，在Symbol中修改样式，其他页面也会同时被修改。但他们保存在某一文件中，并不能在不同文件中共享。

在前期设计稿中，我有多处使用symbol，但我的symbol页面着实杂乱无章。有时候，运用这个工具，还是会让我觉得效率低下，还得按照传统方式那样粘贴复制，在不同页面手动改同一个元素。我对此感到非常费解，于是大量的找寻有关symbol的详细说明，附上的这个链接里面的内容对我很受用——www.yixieshi.com/83126.html。接下来就是在下一个App的UI设计中践行symbol的用法。

（三）插件（Plugins）

Sketch官网中有推荐很多第三方的插件，有很多设计师也推荐了一些比较实用的插件，这些插件让设计工程更加便捷高效。现阶段，我常用的插件有三个：

1、AEIconizer，上文中有提到这个插件是用来导出不同尺寸的App Icon。使用过程中发现，插件应该是很久没有更新了，会有一些bug，需要自己动手把代码稍作修改。新发现一个同样功能的插件——App Asset Export （https://github.com/work4blue/sketch-app-asset-export），后期试试看。

2、Zeplin，这是一款在线的Spec标注软件。用这款软件跟工程师沟通是极为便捷的，堪称神器，尽管它的表现不够稳定，会有一些bug。不过，因为是在线的原因，可能存在泄密的风险，那么还有一款插件——Marketch，就解决了这个问题。它不通过网络，直接将标注好的文件生成本地的HTML网页。对于我们这样的二人小团队，Zepin还是首选。

3、 Magic Mirror，它可以让你在iphone、ipad上实时预览UI设计图，模拟真实效果。通常，在最后呈现视觉效果图时，使用Mirror就可以更加直观的展现App界面。

（四）快捷键

Sketch有很多的快捷键，并且一般菜单栏中的操作都会注明该操作的快捷键。我把我常用的快捷键制作成了如下表格：