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

《创业公司设计师怎样从0到1设计一款APP（四）——Hi-fi输出（下篇）.doc》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、创业公司设计师怎样从0到1设计一款APP（四）——Hi-fi输出（下篇）　　上篇文章提到，在Hi-fi阶段大概可以分为前期、中期和后期三个阶段。这篇文章就是对Hi-fi阶段的详细解说。　　　　前期　　前期的主要任务是hero创业公司设计师怎样从0到1设计一款APP（四）——Hi-fi输出（下篇）　　上篇文章提到，在Hi-fi阶段大概可以分为前期、中期和后期三个阶段。这篇文章就是对Hi-fi阶段的详细解说。　　　　前期　　前期的主要任务是heroscreen（主功能页面）的尝试设计，通过它进行视觉风格上的确定。　　APP进入视觉风格确定的时期，主要确定的内容包括颜色、字体、图标三大块。

2、　　1.颜色　　确定的过程先做好心理准备，很大程度上会来回折腾，改来改去。着手点可以从产品点位出发，结合企业视觉系统进行统一形象设计。　　如果企业有自己的logo和产品线，那视觉出发点可以在保持现有产品线的基础上，进行APP个性定位。通俗点说，就是保持统一的前提下，有所区别。打个比方，Nike+系列的产品，有Nike+RunClub、Nike+Move、Nike+Training、Nike+，从整体上来看，他们都用统一的带有运动感的荧光绿作为主色调，然后用黑白灰进行搭配。三者又有一定的区别，比如说Nike+RunClub的header是绿色，Nike+Training的header是

3、黑色，前者更有活力运动感，户外使用阅读更方便，后者对室内体验更友好。　　如果没有企业视觉系统，一切从0开始的话，建议从竞品分析开始，市面上做得比较成功的产品进行分析，以及从自身产品特性和行业特性进行出发。比方说餐饮行业代表色是橙色，运动行业蓝色，高科技领域不同色值的篮等等，也可以另辟蹊径做出个性化的尝试，比如keep的绿色与棕色的搭配方案。　　在颜色这个领域分为代表色、辅助色、搭配方案这三方面的内容。一般配色方案是，一种彩色作为重要信息的突出色彩，配上不同深浅的黑白灰或者蓝、棕色等无色彩或者色彩感比较弱的搭配方案。这样的搭配方案，在信息呈现方面会比较清晰。　　而在做设计方案中，还需要

4、考虑的是，设计出不同底色的搭配方案，方便在不同场景的方案进行统一。如果说得更多的话，可以整理出一套APP的设计规范了，楼主以后再细说。　　2.字体　　字体可以分为标题、阅读文字、注释三大方面。这方面可以参考一下iOS的规范。但在实际工作中（非跨国大型企业），我们似乎没有那么多的需求，主要分为HeaderTitle、ButtonText、Large、Regular、Small、Micro，分出这几个种类出来，基本就够用了。每种可以有4pt的差距。　　同一个APP的字体种类不要太多，两到三种是最合适的，一般突出的数字和字体会需要特别的字体去显示，其他阅读性的字体会用粗细不同的同一种字体进

5、行统一。这样，在设计方案上更加简洁明了。（使用字体时，注意版权问题）　　3.图标　　图标在风格上分为色块和线性两种，同样遵循统一原则，同一个APP图标使用同一种风格。在大小上同字体一样，做出几个层级的规划，保持icon尺寸也是固定的几种。设计师在设计方案时没有一种标准所在，程序员在实现页面时也会觉得页面很凌乱。当然这种统一工作放在最后做视觉规范整理的时候也可以做，提前做会减少后面的工作程序。　　4.附加　　在做Hi-fi的过程中，我们的目的是为了尽量做出用户将来会接触到的，真实的APP的页面，所以，在APP里面的图片同样起着还原场景的作用。虽然从花瓣网、Pinterest、500px

6、等网站可以找到大量的优质的图片，让设计稿看起来逼格更高。但这种做法对APP本身设计来说，弊大于利，影响设计师对视觉本身的判断。所以，支持在网上搜索现实生活中原场景图。　　中期　　中期在确定好了的风格上进行完善APP其他页面。这一个阶段又可以分为辅助功能的完善和单个页面的完善。　　1.辅助功能　　　　一般APP的辅助功能会有注册/登录、个人简介（Profile）、搜索查找等等的功能，可能搜索查找会放在稍微靠前一点的时间进行考虑。这些都是固定的模块，相对复杂程度没有那么高。如果企业有现成的也可以使用现成的，没有也可以进行简单的设计，这一块楼主有专门的文章介绍过，可以翻阅楼主的历史文章。　

7、　2.单个页面　　单个页面分为正常情况和异常情况的考虑。　　正常情况主要包括页面的跳转逻辑和各种CornerCase（极端情况）。CornerCase主要有数据的展示0/1/n、字符的限制（最大/最小）、网络（Wi-Fi/数据流量）。　　异常情况即以上操作被打断时的问题处理，无网络（或者网络信号弱）、中间流程断掉（比如APP被直接杀掉）、字符超过/小于最低限制/字符不输入等情况下，APP的处理情况或者说给用户的反馈。这些是QA（测试工程师）特别会注意到的问