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

人人都是产品经理 • 7年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

上篇文章提到，在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本身设计来说，弊大于利，影响设计师对视觉本身的判断。所以，支持在网上搜索现实生活中原场景图。