创业公司设计师怎样从0到1设计一款APP（四）——Hi-fi输出（下篇）

上篇文章提到，在Hi-fi阶段大概可以分为前期、中期和后期三个阶段。这篇文章就是对Hi-fi阶段的详细解说。

前期

前期的主要任务是hero screen（主功能页面）的尝试设计，通过它进行视觉风格上的确定。
APP进入视觉风格确定的时期，主要确定的内容包括颜色、字体、图标三大块。

1.颜色
确定的过程先做好心理准备，很大程度上会来回折腾，改来改去。着手点可以从产品点位出发，结合企业视觉系统进行统一形象设计。

如果企业有自己的logo和产品线，那视觉出发点可以在保持现有产品线的基础上，进行APP个性定位。通俗点说，就是保持统一的前提下，有所区别。打个比方，Nike+系列的产品，有Nike+RunClub、Nike+Move、Nike+Training、Nike+，从整体上来看，他们都用统一的带有运动感的荧光绿作为主色调，然后用黑白灰进行搭配。三者又有一定的区别，比如说Nike+RunClub的header是绿色，Nike+Training的header是黑色，前者更有活力运动感，户外使用阅读更方便，后者对室内体验更友好。

如果没有企业视觉系统，一切从0开始的话，建议从竞品分析开始，市面上做得比较成功的产品进行分析，以及从自身产品特性和行业特性进行出发。比方说餐饮行业代表色是橙色，运动行业蓝色，高科技领域不同色值的篮等等，也可以另辟蹊径做出个性化的尝试，比如keep的绿色与棕色的搭配方案。

在颜色这个领域分为 代表色、辅助色、搭配方案这三方面的内容。一般配色方案是，一种彩色作为重要信息的突出色彩，配上不同深浅的黑白灰或者蓝、棕色等无色彩或者色彩感比较弱的搭配方案。这样的搭配方案，在信息呈现方面会比较清晰。

而在做设计方案中，还需要考虑的是，设计出不同底色的搭配方案，方便在不同场景的方案进行统一。如果说得更多的话，可以整理出一套APP的设计规范了，楼主以后再细说。

2.字体

字体可以分为标题、阅读文字、注释三大方面。这方面可以参考一下iOS的规范。但在实际工作中（非跨国大型企业），我们似乎没有那么多的需求，主要分为Header Title、Button Text、Large、Regular、Small、Micro，分出这几个种类出来，基本就够用了。每种可以有4pt的差距。

同一个APP的字体种类不要太多，两到三种是最合适的，一般突出的数字和字体会需要特别的字体去显示，其他阅读性的字体会用粗细不同的同一种字体进行统一。这样，在设计方案上更加简洁明了。（使用字体时，注意版权问题）

3.图标

图标在风格上分为色块和线性两种，同样遵循统一原则，同一个APP图标使用同一种风格。在大小上同字体一样，做出几个层级的规划，保持icon尺寸也是固定的几种。设计师在设计方案时没有一种标准所在，程序员在实现页面时也会觉得页面很凌乱。当然这种统一工作放在最后做视觉规范整理的时候也可以做，提前做会减少后面的工作程序。

4.附加

在做Hi-fi的过程中，我们的目的是为了尽量做出用户将来会接触到的，真实的APP的页面，所以，在APP里面的图片同样起着还原场景的作用。虽然从花瓣网、Pinterest、500px等网站可以找到大量的优质的图片，让设计稿看起来逼格更高。但这种做法对APP本身设计来说，弊大于利，影响设计师对视觉本身的判断。所以，支持在网上搜索现实生活中原场景图。

中期

中期在确定好了的风格上进行完善APP其他页面。这一个阶段又可以分为辅助功能的完善和单个页面的完善。

1.辅助功能

一般APP的辅助功能会有注册/登录、个人简介（Profile）、搜索查找等等的功能，可能搜索查找会放在稍微靠前一点的时间进行考虑。这些都是固定的模块，相对复杂程度没有那么高。如果企业有现成的也可以使用现成的，没有也可以进行简单的设计，这一块楼主有专门的文章介绍过，可以翻阅楼主的历史文章。

2.单个页面

单个页面分为正常情况和异常情况的考虑。

正常情况主要包括页面的跳转逻辑和各种Corner Case（极端情况）。Corner Case主要有数据的展示0/1/n、字符的限制（最大/最小）、网络（Wi-Fi/数据流量）。

异常情况即以上操作被打断时的问题处理，无网络（或者网络信号弱）、中间流程断掉（比如APP被直接杀掉）、字符超过/小于最低限制/字符不输入等情况下，APP的处理情况或者说给用户的反馈。这些是QA（测试工程师）特别会注意到的问题，前期考虑周到，后期会非常省事。

后期

后期继续完善，做创意性的设计，点睛之笔的设计。在实际项目中，如果时间赶，后期这样更完善性的工作基本没有时间去做，除非设计师能加班加点做出不费事又好实现的效果，团队觉得可以花小的精力又可以达到很好的效果的同时才会去做这个事情。

当然，刨除这些因素不说，这样的点睛之笔，主要可以应用的有lauch card（即APP的启动页）、下拉刷新、loading（即等待页）、404页面（即出错页面）、默认个性头像等等

总的来说，就算是在Hi-fi阶段，工作内容的顺序也还是从主功能入手进行风格确定，然后再延伸到辅助功能，接着深入到每个页面的细节设计，有精力再做创意性改善内容。思维仍然是，从整体到局部，从粗糙到细致。

文章欠缺视觉部分涉及到UI规范的整理，敬请期待这部分的更新~

Sophia的tips：
事情并不是那么简单也并不是那么难，一项项进行拆解，慢慢就会做到了~

相关文章
《创业公司设计师怎样从0到1设计一款APP（四）——Hi-fi输出（上篇）》