颜色视界(下)

多谢网友提醒,将上篇链接也加上《颜色视界(上)》


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时代遗留下来的业余的浮沫;二愿在卓越产品之路上跃马飞花、寻求有共同产品品位志趣的同道之人——思想总是要交流,才能碰撞出灵魂的火花。

        最后的彩蛋——赋诗一首,献给多年来一直在背后坚忍支持我的父亲——《甲午年腊月,江中山人赠汶溪茶翁》

                一品千秋雪,

                二钱万古茶;

                三山忙盈翠,

                四世话闲情。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容