颜色革命（下）
多谢网友提醒，将上篇链接也加上《颜色革命（上）》
1 颜色战略实践
1.1 App Logo形象设计
上篇说到，对于移动端产品的设计，主要集中在品牌主色的运用以及品牌Logo形象的运用。
对于Logo形象的使用，首先是APP Logo图标的设计，因为这里是为用户建立移动产品形象的入口，也是强化用户对公司品牌形象认知的最直观、最快速的手段。
APP Logo形象一般可以直接沿用公司品牌的Logo形象，然后进行一定程度的扁平化处理，去除复杂图样细节，保留核心形象与主色即可。
目前业界主要分为两种设计风格——线条型设计与色块型设计，这里就借用一下两个中国传统雕刻工艺的两个术语来予以表述——雕花与镂刻，其实也就是“虚”与“实”两大艺术设计方向的具体运用。
色块型设计，其实就是镂刻工艺在移动产品上的运用，图片一般采用主色打底，图样空心的形式，以色块的“实”来极力突出主题颜色与品牌形象，形成用户视觉的“地毯式轰炸”。这种设计，要求Logo形象务必简单大略，便于用户一眼识别；同时背景色必须同时是APP内部的主题颜色，以免让用户产生视觉差异。应用图标既是品牌形象的展示窗口，也是APP内部内容的缩景，只有内外足够一致，才是真正的品牌价值延伸与传递。
简单从手机上截了几个典型图标，无一例外，都能做到表里如一（当然也还没有做到更高层次的完全得如一），第一个就是我们的产品CMF。
线条型设计，其实就是雕花工艺在移动产品中的扁平化运用，体现的是设计的另一极——虚，这一类图形设计力求简洁干净、清新自然，多以白色打底，图样实心化，用颜色实体图形突出图像效果，一般情况下，图样主色也即APP内部主题色调。
这两大设计风格各具特色、各有优劣，选择时就看品牌Logo的先天色调属性以及产品设计人员自身的产品品位抉择，但是都应该遵循一个统一的设计原则——要点突出、元素简练、决不拖泥带水。
1.2 品牌主色运用
1.2.1 简述
其实，App内部主题色调的运用，严格来说，也可以依据上述分类分为两大类别，但是由于IOS系统本身走的也是简约路线、重色调的视觉冲击效果太强，而且各APP也为了让UI体验与操作系统本身风格保持一致，因此目前主流移动产品多采用线条型简约设计风格。
简约设计风格，追求的是“万丈雪原一点红”的境界，因此对于主题色的使用不宜太重，讲究恰到好处的使用。
比较通用的设计规则笔者归纳了以下几点（欢迎补充）：
1、图标、按钮尽量线条化，线条颜色尽量靠近主题色；
2、图标、按钮以空心图标为主，只在适当的场景下使用实心图标，实心色也应当尽量靠近主题色，目的也只是为了不让页面显得太过空洞；
3、导航条与状态栏选色问题：如果正文内容没有大色块提色，可以考虑用主题色填充；但是如果正文内容已有大色块提色，则保持默认背景色即可，一般也就是白色；
4、操作边界问题：在文字类按钮中，尽量以线条边沿的形式明确按钮的操作边界，让用户有操作安全边际；
5、其他支线颜色选择，大的选色原则是——尽量选择能烘托主题色的“绿叶型”颜色，而千万不要选择比主题色更亮眼的颜色，这样会分散用户注意力，不容易让用户聚焦内容，而且这样“喧宾夺主”，容易形成错误的品牌形象暗示。
接下来就CMF APP实际页面为例，具体细说一下各条规则的运用。
1.2.2 页面风格设计
在确定了APP总体风格样式之后，对于单页面风格的设计相对会简单很多，但是也需要根据具体功能场景来做区别性设计，不能总是千篇一律。
在CMF中，对于基金详情页，大部分页面都统一采用“大色块提色，小元素清新”原则来做设计，强调大色调的视觉冲击感，让用户一进来就被“色诱”，并且将品牌主色深深地印入脑海里，实例下图所示。
另外，对于个人信息类页面，信息以列表显示为主，所以保持了与主流APP相关功能页的相识设计，只是将图标用主题色铺色。
1.2.3 导航条样式设计建议
随着IOS系统风格的演进（特别是搜索条内置、状态栏同色之后），APP中导航条的设计也开始出现分化，目前而言主要分为两个流派：
一类以京东、天猫、墨迹天气、随手记等为代表的“去导航条”派，智能手机终究是一个小屏终端，对于电商类应用而言，屏幕上是寸土寸金，因此在有限的屏幕上“塞”尽可能多的内容是一个必然趋势。而且随着IOS系统风格演化，导航条与状态栏逐渐融为一体，搜索条也已经内置进导航条，因此消除导航条与正文内容的区别、形成整页效果的“激进型”设计也足够值得肯定。
既然笔者称上面是激进派，自然就有“保守派”，这一类APP追求与操作系统体验一致，同时也是因为导航条统一实现，开发难度与兼容风险更小，因此这一类“传统”app从目前数量上来看更多。
在我们CMF设计中，依然走的是稳妥传统路线，虽然从详情页面色块布局的考虑，也有去导航条的潜力，但是笔者一直的观点还是——不论页面要塞多少内容，都要适当留白，给眼睛呼吸的空间。移动产品设计，最怕的是受中国传统网站设计思想的影响（例如各大PC新闻网站），把首页设计的拥挤不堪、又臭又长。虽然手机的上下滑操作的时间代价比PC鼠标滚轮要小，但是也不能因此而浪费用户时间、消磨用户耐心，APP的终极设计目标依然得是——让用户用最小学习成本、在最短时间内、经过最少操作步骤完成其目标工作。
1.2.4 分割线样式设计建议
分割线的设计其实是移动设计中最难把握的部分，在我们CMF中，虽然笔者强调过多次，但依然难称满意，因此，此部分的示例就从我推崇的“IOS系统设置”应用说起。
分割线样式的作用在于将不同内容做分类、分块处理，而如果一个页面存在不同级别区块时，分割线的设计就要非常有讲究，总的原则是——根据内容类别由大到小，线条颜色由深到浅，线条长度由长到短，区块颜色也基于同类相同、异类区别的原则。通过这些手段来实现内容聚焦、内容差异化显示。下面就以“IOS系统设置”应用首页来做详细讲解：
以上截图想必任何一个iPhone用户都很熟悉，粗略来看，这个页面采用的颜色元素很简单，只有灰白两种颜色，单元格内容也很单调——只有单行标题文字与右侧箭头图标。但是任何用户进入此界面，都不会觉得此页面单调，反而层次分明，要点突出，甚至有一种浮雕式的页面突出感！
这才是移动产品设计的至高境界——大道至简却也玄妙无穷。
先从着色说起，虽然页面只有灰白两色，但是层次分明，背景色用灰色填充，使页面间隔有一种向后凹的视觉陷入感，内容部分用白色填充，重点鲜明自然，同时也使内容有一种向前凸出的设计感，两者一搭配比对，页面的层次感就跃然屏上了。
再说本节重点——间隔线，页面中不同内容大都以间隔线区分，而遵从用户自上而下的浏览习惯，导航条与页面正文是首先需要分隔的。而且这一层分隔是最高层次的内容分隔，即便正文内容差异化再明显，其分隔效果也不能比此分隔线更明显，因此设计者用上了全页面最深的深灰色，涵盖长度也是全屏宽跨度。其目的也直接明了——裂土而治、泾渭分明，上面是标题，下面是正文。
而在此间隔线之下，设计者并没有急于将正文内容填上，而是加入了一条44px（这是一个神奇的数字，设计者应该多加运用）的浅灰色分隔条，由于导航条与内容单元格的背景色均是白色，因此区分效果也足够明显。这种浅灰色也是非常有讲究的，是很浅很浅的浅灰色，因为取色太深的话，与白色对比，色差会太明显而导致间隔效果太突兀，使用户目光的焦点由单元格内容转移到间隔条上来，这显然是设计者不愿意看到的。
而在第一根间隔条与单元格之间的分割线，采用了与上面分割线宽度、长度均相同，但颜色稍浅的设计，目的自然就是既要分隔内容、又不能本末倒置、超过上面间隔线的间隔效果，因此这根线条着色虽然也是深灰色，但与第一根相比，取色稍微浅了一些。
接下来说说第三根间隔线（即单元格间的间隔线），这根间隔线其实跟第二根间隔线很类似，唯一的区别就是左侧短了大约20px，但右侧依然顶格填充。目的非常简单，既要分隔单元格内容，但分隔效果又要弱于外层分割线——只是内部分隔，而且遵从用户从左往右浏览的阅读习惯，区分效果需要从左边开始。
同时我们也注意到，三类风格线颜色再浅，但都会比单元格内部的右侧箭头取色要深，其实依然遵循的是视觉效果从强到弱、区分作用从大到小的原则。
基于以上细腻的设计，一个简单单调的页面，也能达到简约高效、层次分明、重点突出的设计效果，Apple的设计功力当真是首屈一指的！
而从这些设计中，我们也可以总结出一些用于我们做页面设计的实用原则：
1、分隔效果务必遵从内容区分要求，从大类到小类，效果从强到弱；
2、合理利用留白，留白高度与内容高度尽量能成比例设计，一般1：1或者1：2为佳；
3、分隔条、单元格等控件的高度，多多利用44这一神奇的数字，尽量成比例设计，因为导航条就是44px高度的，视觉效果更协调；
4、分隔线效果主要通过取色深浅、左侧留空的方式来实现，而线条宽度尽量保持一致；
5、内容为王，满足分割效果的线条与留白既要达到分隔清晰的要求，又都要做视觉上的“弱化”处理，不能分散用户注意力，抢了内容的“风头”，反而应该多引导用户去聚焦核心内容。
1.2.5 Banner广告设计建议
Banner图的设计其实是APP中最耗心力、也最见设计功底的，也是CMF首版开发过程中PK次数最多、争议最多的地方。
对于Banner图，笔者认可的设计原则依然是——围绕主题风格、做适度颜色扩展、左右内容分配繁简协调、内容精致亮化。
背景色选择对于CMF这一类寻求极简页面风格设计的APP尤其要审慎。以我们CMF首页为例，最初设计了两个色调的banner图，整体效果对比如下：
不用我说，大家也能识别出来，第二张的蓝色太过抢镜，以至于会让用户误认为我们APP的主题风格是淡蓝色，而不是橙色，这就是“喧宾夺主”了。
对于白色打底的APP而言，因为白色本身是弱视觉吸引力颜色，而且具有视觉反衬作用，因此任何一种颜色放上去，都足以抢占用户第一视觉焦点。基于此，主题色一旦确定，banner颜色的发挥空间其实就已经很小了，只能从其他方面下功夫，例如图样设计，这一方面招行app、南方基金都做得不错（如下不是本文重点，也非笔者所长，只能是点到为止）。
Banner一般是宽图，占据页面正文上半部分最显著位置，多采用图形+文描的形式来展示。
对于图形的选择有全图与半图两种，全图是指用整张图片做背景，在图片相对空白处附上文描，靠图说话。对于半图，基本是与文描各占半壁江山，以文说话。不论哪种，都必须遵循一个原则——必须与APP整体设计风格保持一致。
这个“一致”既包括上文的颜色风格协调，也包括图样细节的设计。对于CMF这类精细化设计的APP，就尽量不要采用色块拼接型图样设计，而要以实图图样为主，而且必要时要增加亮化效果。相反，对于以色块型风格为主的APP，则可以减少实物图样风格的设计，继续保持色块风格更协调。
1.2.6 按钮样式设计建议
App中按钮分为高亮、常态、按下、不可用四种状态，从完整体验出发，这四种状态都应该对应有不同图标，以示区别，在CMF中，因为橙黄色是我们的主题色，因此我们将高亮状态设计为实心橙黄色按钮，常态按钮设计为空心橙黄线条按钮，按下状态设计为在高亮状态图标上加上一层半透明蒙层，而不可用状态则是惯用的淡灰色设计。
其主要思想也是遵循IOS的交互设计理念，对于重点内容突出显示，引起用户聚集，对于可忽略内容，淡化处理，尽量不分散用户注意力。
高亮状态：
常规状态：
按下状态：
不可用状态：
1.2.7 图标样式设计建议
图标在CMF中，其实主要是指可操作按钮型图标，因此也大致遵循了按钮的状态设计规范，主要分为高亮、常态（即非选中）两类。
对于高亮图标，依然以实心、橙黄主题色做填充，为页面整体效果添彩。
对于常态图标，依然遵循简洁清晰的风格，统一采用空心、深灰色线条样式，以期界面有足够留白、清爽自然，而不污染用户视觉。
不过也有例外，基于页面整体效果考虑，在页面内容相对单调简单的情况下，对于常态图标，我们也有以主题色为线条着色的设计，例如个人信息模块，由于内容以简单单元格为主，缺少内容点缀，为避免页面过于“素净”、“晦涩”，特意将单元格左侧图标做了彩色处理。
高亮图标与常态图标示例：
彩色常态图标示例：
1.2.8 支线颜色选择建议
除了主题颜色的运用，APP中也需要有其他辅助类颜色来满足不同的呈现需求，这些颜色的选择，就如其名字，一切以辅助、烘托主题风格效果的基准出发，最终形成整体视觉协调、局部多彩缤纷的视觉效果。
在CMF的选色过程中，对于数值内容的显示，最开始只有三种颜色——橙黄色、黑色、白色。这样虽然页面颜色效果足够统一，但也不免单调死板。为了增加页面的“活泼度”，结合CMF金融APP的领域特性，后续又增加了淡绿、桃红、淡蓝、浅黄等辅助色。对于负数值，统一采用淡绿色——绿油油的负收益，炒股的朋友应该不会陌生；正数值统一采用浅桃红色——寓意红彤彤的大涨长红；而对于操作按钮，实心按钮统一采用浅黄色，空心按钮根据具体页面功能需要采用淡蓝、浅黄或黑色作为前景色；对于“基金风险”标签，结合日常风险标识的生活常识，将高中低三级分别用浅桃红色、橙色、淡绿色区分显示。
这些考量，总的目的，也是力求使页面视觉效果能既突出品牌主题、商务严谨，又活泼清新。
2 总结
纵观当今移动世界，虽然有IOS这么优秀体验的操作系统为App体验保驾护航，但是由于体量巨大，终究还是鱼目混珠、龙蛇混杂。著此一文，一愿为日益浑浊的移动互联网界注入一股清流，涤荡些许PC时代遗留下来的业余的浮沫；二愿在卓越产品之路上跃马飞花、寻求有共同产品品位志趣的同道之人——思想总是要交流，才能碰撞出灵魂的火花。
最后的彩蛋——赋诗一首，献给多年来一直在背后坚忍支持我的父亲——《甲午年腊月，江中山人赠诗汶溪茶翁》
一品千秋雪，
二钱万古茶；
三山忙盈翠，
四世话闲情。
