设计语言概述

我们的设计语言是我们后续一切设计的世界观表达,我们向用户描绘的世界的构成和环境、以何种方式呈现给用户、
最终以何种规则输出呈现给用户,都是设计语言所涉及的范畴。



拆解

我们将“由具象到抽象,由现实向虚拟”的界面设计呈现的过程拆解为这两层:

物理环境层: 更趋近现实,模拟线下环境,设计语言主要把控线下环境在怎样的环境中呈现。
抽象表达层: 将物理层构建的世界以一致的规则呈现给用户。



分层

物理环境层

大家都知道我们目前的线上体验都是从线下真实场景中物化抽象而生,因此物理层是最趋近用户线下环境的。我们alibaba.com是一个B类电商平台,又通过服务好买家从而给卖家带来商机和收益,因此我们的物理层更多可能模拟的是B类买家的采购环境。当然场景和内容都是由我们商业策略决定,我们设计语言所需要考虑的是我们alibaba.com的物理世界环境是什么样的:更趋近高端的品牌店,还是接地气的地摊杂货,是窗明几净的明朗环境,还是灯红酒绿的黑暗环境?

在物理环境层中设计语言将定义我们Alibaba平台所处环境的:光源(冷暖、明暗、色彩)、秩序(信息密度、排列方式)、质感(内容的品质保证、精致感、一致性)。




抽象表达层

前面我们了解到物理层是一个三维世界,在抽象表达层我们同样强调Z轴的概念存在。但我们当然不是直接把物理层的3D世界照搬过来,而是以层的概念抽象。

原因: 受用户对于互联网的认知、我们的业务现状、品牌和设计框架影响。
手法: 所有的元素抽象以层的概念输出,以对用户的优先级高低来决定其前后顺序。

原则
1. 以交互层的优先级为先,单个层的内容表达不可跨层呈现
2. Z轴方向上离用户越接近优先级越高
3. 同一水平线上的内容优先级一致
4. 层为隐性概念





规则

物理层环境规则:光源、秩序、质感

光源
线光源决定我们平台基调,是后续所有设计元素明度、饱和度等等的前提
所以我们会从角度、色彩、亮度这几个角度去细化定义。



秩序
秩序决定的是我们的平台传递的是诸如一个杂货市场、中档商铺还是高端精品店的用户感受,它规定了我们平台整体的信息密度&排布方式。



质感
质感更多的是在场景搭建中保障内容的品质感、精致感、一致性,在材质表达上可以是木质、塑料、大理石、纸质,使用时可以根据场景的实际情况合理选择。



抽象表达层输出规则:位置、大小、距离、色彩


位置
元素在X/Y/Z轴的空间位置会导致设计呈现方式有不同的表达,如Z轴空间位置关系将导致设计呈现上的物体遮挡,突出卡片或画面之外的设计形式产生。



大小
大小直接受到元素所属位置与用户的距离的影响,遵循近大远小的原则,我们会发现,距离用户越近的元素越大,
这直接影响我们的设计形式将从从前的卡片内模块变成更具冲击力的元素透出方式。



距离
距离人近的物体清晰,距离人远的物体模糊,基于这一原理,我们设计上可以通过加大背景模糊营造空间感,也可通过加入色彩遮罩,降低图片透明度达到同样的效果。

色彩

饱和度反差: 前景的物体饱和度高,后景的物体饱和度低。两个颜色之间饱和度或明度数值相差越大,反差也就越大,反之亦然,看看具体的实例:如以下导航图,当前的人物图像明度较高,和低明度黑色背景形成高反差而容易先被注视。

色相反差: 下图中主色调为蓝色,蓝色行动点和整体颜色一致,层级相对较弱,而绿色行动点和蓝色在色相上的反差使得层级变高。

下一篇: 方法 & 过程