图标通过隐喻或映射建立起屏幕内与现实世界的沟通桥梁,帮助用户更快地理解操作,是人机交互的重要组成部分。京东零售图标体系从设计价值观出发,提炼具有品牌辨识度的视觉元素,建立起一套现代、统一、严谨、有辨识度的图标体系。
根好的图标应该是跨越语言,清晰易懂的,让用户更加快速地进行操作、查找、指示等行为。图标亦是京东零售品牌在屏幕内的传播触点。
我们基于设计价值观延展出图标设计的三大原则:
选择表意准确的图标,不对用户的认知造成困扰。
选保持图形的简洁,不做过多的修饰。
图形不仅仅是冰冷的功能表意,更应体现人文趣味与温度。
图标在直角、硬边转折等结构使用更大圆角,呼应 JOY 轮廓的圆润自然曲线,减少距离感,传达京东零售品牌亲和与活力的调性。
图标应基于圆、方、三角等基础几何形构成,避免图标线条构成过于自由,维持理性秩序与生动活力间的平衡点。
图标的首要目标是快速准确传达概念。
用户对图标的理解往往基于用户心中的普遍共识。在考虑图标形象时,要尊从用户的普遍认知,便于被快速的感知。
当图标需要表示用户并不熟悉的含义(新功能、特有 logo、特有概念等)或复杂抽象含义时,图标需配合文字使用,用以减少用户困惑、培养用户认知。
线性图标及面性图标为两种最常见的图标类型。
图标选择线性或是面性,需要根据图标使用场景及产品调性综合考量。
线性图标造型轻量化、可塑性强,能够赋予图标更多细节,适合营造轻松、活泼、精致的品牌调性,往往适用于底部标签栏的未选中态、导航栏、二级页面的功能型入口等。
对于强内容的产品(如读书、feed
流、视频直播类),图标在视觉上需要更加轻量不干扰,宜采用线性风格。
面性图标造型饱满,更吸引用户眼球,具备更高的辨识度,适合营造稳重、可靠、亲和的品牌调性,一般用于分割层次以及区分信息的重要程度,往往适用于底部标签栏的选中态和未选中态、一级页面的业务导流入口等。
当底部导航多为业务入口,图标需承载更多引流任务,宜采用面性风格。
图标设计应遵从高效优先,保持图形的简洁优雅。冗余的装饰和繁琐的细节会影响图标的识别性。
图标设计的简洁应建立在保留图形识别特征的基础上,避免过于简化抽象影响识别度。
设计风格及细节上的统一能够增加用户对产品的信赖。
在设计过程中,数值上的对齐统一有时并不代表视觉上的对齐统一。
图标设计过程中我们需以视觉对图标进行调整,以达到视觉上的统一,这称为视觉矫正。
在进行图标设计的时候,我们会使用栅格辅助线来帮助我们更加严格谨慎,但一定不要被辅助线困住,学会灵活运用,保持视觉上的大小统一。
人眼对于形状的高度比宽度更敏感,这造成横向的线条比竖直的线条看起来更宽。设计中可适当减少横线的宽度。
同理,倾斜的线条比竖直的线条看起来细,设计中可适当增加斜线的宽度。
数值中心往往不等于视觉中心。图标对齐应以视觉中心为基准对齐。
常见图形的视觉中心可近似等同于包裹图形最小圆的圆心。
图标统一使用正视图绘制。
保证整体图标复杂性一致,可适当增减图标细节,保持图标的灰度一致。