如何从0到1完成 app 设计

作为互联网行业的设计师，不仅仅需要完成用户界面（User Interface，简称 UI）的视觉设计，还应该具备产品思维，思考具体场景下的用户体验（User Experience，简称 UX）。因为某个功能点在不同位置的摆放和呈现方式都可以影响用户使用产品时的感受。在很多互联网企业里，往往会有产品经理或者交互设计师来完成 UX 方面的设想和探索，UI 更多的是完成视觉呈现的部分。但是未来 UI 和 UX 的界线将越来越模糊，以后互联网行业的设计师更多的会有一个统一叫法——产品设计师。他们将独立完成从 0 到 1 完成整个产品的设计，这会是未来的趋势。本文将介绍一种从0到1设计 app 的方法，是我本周在 YouTube 上看到的一个视频系列，该设计师描述了一个 app 从构思到完成交互稿的整个过程。

教程中举例的 app 是一个计时工具，用它来记录任何一种日常活动的时间开销，随着次数的累计，它会计算出你投入在该活动中的平均用时。

第一步：手绘完成 app 的基础 UI，并用线条将页面串起来。和很多人想象的不一样，设计师不要一上来就用绘图软件开始设计，而是应该用手绘来把所有页面先初步确定下来。手绘的好处是，快速、试错成本低，而且让你把注意力放在 app 的基础功能以及逻辑上，而不是想办法把界面做得完整规范。你可以选择在纸上画，也可以使用 iPad 上的绘图 app，比如 Linea。在纸上先画出多个适当比例的矩形来表示手机屏幕，如图1所示。

图1

然后确定 app 的整体功能架构，进而决定首页的功能点。一开始不可能面面俱到，所以不要用脑思考，要用笔头思考，先迈出步子，因为之后肯定会再做改进的。把必要的按钮先画出来，再顺着这些按钮的功能，画相应的界面。你在画的过程当中，可能会发现别的界面似乎忘了考虑某个细节，或是发现了更简单的方法，比如按下了暂停键，就得想到它其实会马上消失，变成播放键和停止键。这就是手绘草稿图的好处——让你专注于思考本身。当每一个功能按钮都有对应的界面之后，第一步就算完成了。

图2

第二步：将手绘 UI 设计成可点击的原型图。这一步就要开始运用软件来操作了。本教程涉及到 2 款界面设计的软件——Sketch 和 Flinto，分别负责是界面设计和交互动效设计。Sketch 做界面设计功能非常出色，更方便的一点是，它支持很多插件的使用，能将设计稿方便地导入 Flinto（这是近年来刚出现的制作动效以及页面切换效果的软件，操作简单且功能强大）。

给手绘图稍加润色后（比如给按钮上色以及添加一些必要的文字信息），将它们导入 Sketch 软件里，把一个个界面分别放在手机屏幕大小的画板里，如图3。

图3

再导入 Flinto，命名好各个界面，按照产品逻辑给按钮设置界面跳转，将所有界面关联。在此过程中一般会发现在第一步里遗漏的细节，可以直接在软件内补画。完成之后，要站在用户角度去使用几次，观察设计是否有不合理之处。正因为是粗糙的手绘图，就算发现缺点也可以很快进行修改。

图4

第三步：按照原型图，画出界面初级 UI。经过前两步，把 app 的所以功能流程都走通之后，这一步就要开始完善 app 的颜值了。可以直接在手绘图上加工（记得先隐藏那些链接），一步步用标准的图形、线条替代手绘草稿。这个阶段的 UI 可以想办法设计得精致，包括尺寸也可以苛求精确，不过后续也可能发现缺陷再调整和修改。效果如图5.

图5

第四步：根据产品的特点，用 Flinto 制作相应的页面内动效以及不同页面之间的过渡效果。具体的制作细节就不在此赘述，不同的设计师会有不同的想法。好的动效确实能给使用者带来愉悦和惊喜的使用体验。要不断提高 Flinto 的使用技能，掌握更多的表现手法。设计完成后，可以用软件内的预览器多次操作，之后，通过 Flinto 的手机端 app（只要和电脑连接在同一 Wi-Fi 网络中就能在手机上操作电脑中设计的界面）实际操作几次页面，查看是否合理和流畅。如图6.

图6

一个简单的 app 就这样设计完成了。