感谢那些日子做sense的兄弟告诉我的道理。
品牌色从大的来说是VI需要优先考虑的,考虑点如下:
相对来说不同行业是有其固有的品牌色的,比如机械行业,通常给人的第一意向就是明黄;而科技、互联网企业给人的第一印象就是科技蓝(原谅我用这么俗套的词)等。在对于品牌色的决策过程中,行业属性是其重要决策部分。
通常在市场上我们会看到多个同时在满足用户同一需求,但是由于其品牌色的不同,会对用户对于app下载决策的影响。小恩爱、Between、恋爱记三款产品的核心功能都是做情侣记录、聊天等的需求。但是由于小恩爱的icon相对于其他两款app更加跳脱,因为在下载量和市场占有量上远超其他产品(当然还有产品功能和运营等多方原因,在此仅从色彩来谈)。
相对来说,用户对于不同的颜色本身会有一个第一印象的直观理解,因而我们才考虑品牌色时,需要考虑到用户认知心理,并运用此心理来传达品牌诉求。在考虑用色的时候,我们要时常提醒自己,需要传达给用户如何的品牌印象,这样的印象是否和产品策略是相符合的,这样的用色策略是否会和用户惯常认知是有差异的等等。举例来说作为计算机,IBM的蓝色给人以专业和严谨,而同样作为同时代的电脑,APPLE却给人留下了ThinkDifferent的品牌印象。
同样是做O2O外卖,饿了么选择了明度较高的蓝色,美团外卖选择了很好传达其外卖送达很快的明黄。但是百度却用了桃红,水平不够,暂时没理解。
所谓的卖情怀也好,装逼也罢,本质上是希望通过设计情感和用户的共鸣来引导用户产生设计行为。泡过论坛的人应该都知道『灌水』是论坛的一个玩法之一,而锤子论坛就直接将这个用户常见的功能应用到图标的设计当中,从而用户每当看到这个图标总会会心一笑。
通常来说,用户在决策下载行为时,对于不了解功能的app更加倾向于下载图标好看的,因为它们看起来更可能好用且界面友好。因此,在图标未能传达品牌、功能、情感的时候,只要icon足够好看也能较好的吸引用户的注意力。
一般来说,app的每个层级的icon一般来说是表达不同功能,因此形态、实际面积上其实是会有差别的。但是在一定范围内,不同icon给用户呈现的面积感应该是一样的。并不是说每个icon占据的像素要一样大,而是给用户传达的视觉感受是相同的、统一的。如下图,三个图形,为了表达出同样的面积,三角形的图标要略微大于正方形。同样在我们设计绘制icon的时候,也要考虑到不同形态对于人的视觉感受的问题。只有在统一的面积感下,才可以给用户带来规整、一致的体验感。
无论是面形icon还是线形icon,甚至于是现在一些app用的断线形式的icon,在一个app的同功能中表达icon的形式手法应该是一致的。例如下面这套icon,用红色作为点缀色,那么基本上所有icon在红色的应用的比例感觉都是类似的。
这估计是比较难把握的一个地方,在同一app中,因为功能的不同,需要传达的信息不同,有些icon相对来说比较容易画,而一些icon因为则比较复杂。这时,复杂的icon和简单的icon在表达上可能出现不一致的效果。简单的可能几笔就表达出来了,而复杂的几乎都要快写实了。这时表达起来需要高度概括。但是无论是怎样,在一个app中的icon理论上复杂程度应该是一致的。如下图这样,复杂的icon和简单icon的表达上就会显得很不一致。这时候要调整每个icon的形式,力求达到相对一致的视觉效果。
在考虑icon是选用线型icon还是面型icon的时候,一定要从功能出发开始考虑,要考虑用户在看到这个icon的时候的点击感。总体来说,图标选用的线形越来细,识别度相对越低,但同时更容易给人以精致的感觉,越粗识别度越高。
**面形图标:**总体来说,一些偏功能类产品,比如邮件,因为该类产品更多的强调的是功能的识别度和点击的效率,面型图标相比于线型图标在识别上更有优势。
相似距离相近的各部分趋于组成整体。当我们需要组织、分割信息的时候,运用格式塔心理学的方式,可以很好的梳理信息布局。在信息以列表形式重复出现时,我们可以尽量的使相同颜色、大小、形状的图形或者文字尽量以重复的形式呈现。
相近不同的元素当其距离相近的时候,用户从视觉上趋向于将其归于一个整体。
通常在中文app中一般都以一种中文字体作为默认字体,因此在此不讨论不同字体搭配对于app中视觉效果的影响。
在一定区域内,不同功能的文字大小的不同会直接影响用户浏览接受信息的程度。通常选用28px~34px之间的字体大小比较合适阅读。相对来说,文字越小,其被接收程度越低。相同大小的文字在相近区域,用户浏览更容易理解为同一功能。
明度的对比:在一个app中颜色的深浅除了受到底色的影响,同时也受到周围其他文本颜色对比的影响。当不同信息优先层级的文字用统一颜色时,浏览者在理解上容易增大其关联度,从而容易造成信息理解混乱。
色相的对比:在黑白灰的颜色区域中,如果有局部颜色相对来说都会更容易吸引用户注意。
文字和背景只有在高对比度下才能友好的被用户阅读,在应用不同颜色的文字和背景配比时,建议参考以下评估结论:
通常来说,在图片和屏幕边距之间保留一定的像素边距可以更好的引导用户竖向往下阅读。
在内容型文本中,文本行间距太窄会容易造成阅读困难。通常的经验值,行间距大约是字体间距的1.2~1.5倍之间,总体阅读会比较舒服。
提示页和空白页的不同在于其引导性更强,通常会通过阻断式弹层引导用户按照设计的行为进行操作,因而相较于空白页更需要气氛的营造。同时弹层与弹层之间的尺寸大小、风格等也需要考虑一致性的问题。
在启动页或者等待loading、刷新页面,通过动画可以有助于吸引用户注意力。减弱等待的焦虑感。
动画相较于静态图片更容易吸引用户的视觉焦点,同时动画多伴随比例、形状、颜色的变化,其变化本身就是很好的引导用户行为的方式。
通过动画可以更好的展示内容、数据等,使之从视觉角度更加丰富有趣。
通过动效使得页面的层级更清楚的反应给用户,并使其转场体验顺畅。
在功能布局的时候要充分考虑用户实际操作场景,尽量让用户的操作方便直接。将常用的按钮尽量布局在用户可以单手操作点击的地方。随着手机屏幕变得越来越大,原有iOS的【返回】按钮在大屏幕中并不容易被点击。在一些app开始考虑功能布局的友好性,将【返回】按钮移至底部。用户更便于操作。
设计最优先要考虑产品的目的和诉求,在满足产品的功能。通过设计,我们可以引导用户的行为和视觉流,以达到产品的目的。通过图形、文字的大小、形状、颜色的组织,可以将信息分优先级的呈现给用户。
同时,美是一种功能。其可以传达给用户整个产品有趣和高品质的感觉,用户有时并不一定是因为内容吸引,在内容不足的时候,设计可以作为内容的补足来保证用户足够的停留和二次开启。但同时有趣的设计,需要在保证设计风格的一致性的前提下,不然莽撞的设计容易使用户迷惑,而关闭app。