专栏｜电商视觉升级之风格探索
今天给大家分享一篇《医药电商视觉升级》，历经长达两个月的风格探索，有很多成长和收获。
大纲分为四部分：析-分析、探-探索、落-落地、拓-拓展。
析：第一部分主要阐述为什么要改版的背景、我们提出的设计主张，以及设计目标是如何推导。
探：第二部分是探索，阐述作为设计师在设计过程中如何找到适合健康风格调性的视觉表现。
落：第三部分主要是落地，展示关键核心页面效果。
拓：第四部分的话就是拓展，包含体系化建设、情感化关怀话术。
01. 析
解析升级背景
大药房背景现状
首先我们对于线上的一自营的页面进行全盘的梳理和分析，可发现问题主要有三点：
风格不统一、缺乏整体品牌调性：线上的界面风格不统一，比如自营店、海外店两个阵地，5个频道等页面存在5种基调、8种风格； 频道差异不明显：频道页没有形成明显的心智差异，缺少服务心智；
链路前后不一致：从体验链路上分析我们的视觉风格，以会员权益为例，可发现在链路里商品的会员权益透出心智符号不一致，导致在消费链路里会员权益的不明显。其他场景例如限时抢购、健康卡等也存在同样问题；
聚焦主张
为了解决问题，前期在结构上、规范上、视觉表现上尝试了多个提案。但是此体验优化只能做到一些品质和体验的提升。我们后续希望能够做到全链路的角度出发，站在更高的视角去找到我们更高价值的设计方向及主张，最后我们确定做有「品牌温度」与「价值」为核心作为设计。
设计目标推导·建立从内核到应用于一体的UI设计体系结构化
设计体系的核心是通过满足品牌、行业及用户诉求，来作为我们的视觉推导的依据。在做方案探索的过程中，寻找适合我们的设计方式和抓手。一方面是满足KO规划，另一方面在「形、色、质、构」上做了一些品牌基因的扩展。最后，我们结合探索的设计视觉语言元素，逐渐应用到业务场景中并落地实现。
02. 探
设计风格探索
差异化定位·设计调性核心要素
如何进行调性探索，首先要明确差异化的定位，结合品牌的诉求、行业属性、用户诉求三个维度进行拆解，将他们的关键词应用到我们的设计系统中。
对品牌来说，源自自营大药房的品牌logo，它是通过这个放心、正品实惠及对勾心智来满足我们设计向上和普惠的设计理念。 对行业来说，平台是属于一个互联互联网医疗服务平台，需要给用户提供一些专业、品质的医疗服务。 对用户来说，他们内心是向往美好、健康美好生活的。汲取“健康体盲文”设计理念中的「用户关怀」的关键词，来作为我们的设计的要素之一。
综合这三个维度，从而推导出设计感知的关键词：专业、品质和温暖。
设计方向与抓手
如何打造“具有专业、品质、温暖”的购买体验，发散衍生关键词，通过脑暴和图片收集，从中提炼出更为具象的色彩、排版、字体等设计方向。
形，在圆角上体现是圆润亲和。 色彩，清透明快，体现轻量化。 质感，我们需要通过质感的打造，加强层级关系清晰逻辑关系。 构，主要指的是页面构成，可以给人带来一种高品质的体验。
形·圆润亲和
形的部分圆润亲和是怎么去做尝试，首先采用「健康体」的字体气质，发现健康体字体是圆润和饱满的、对称几何化的。在做形状时，把这个圆润饱满的特征融入到圆角，将圆角应用到控件、素材、模块中，并把它体系化到扩展到其他的页面，从而实现我们整体的简单高效和轻量化的功效。
圆角以6的倍数来为基准，分别对标签、按钮、卡片的圆角做了一个体系化的规范处理，通过圆角体系来建设，能让我们的整体的界面是圆润饱满亲和力的。
色·轻透明快
在颜色方面，是如何去体现清透明快的特性，达到轻量化且温暖的效果。首先在选取品牌色方面，因为已有的品牌绿色是偏暖的倾向，为了扩展品牌色的运用空间，在品牌绿基础上增加了医疗属性的冷调，以达到冷暖平衡，便于在场景中更合理即透气的运用。
色彩搭配
关于色彩搭配的探索，基于品牌色，通过互补色、对比色、邻近色等设计方法扩展其他色相。其中绿色相关的颜色可应用到我们的产品的功能、新品等场景，它是具有医疗健康的属性的；像限时抢购、红包促销等场景，我们可以用这种红色、黄色这些色调去做调适；蓝色作为海外店的心智色彩扩展，体现它的高端品质以及它的信任品质感。通过这样的颜色搭配，我们从原来没有明确体系，杂乱无章的颜色体系，变成了一个具有明确的颜色划分体系。
色卡扩展
基于这个颜色搭配扩展一些其他的色彩渐变，应用到我们的产品界面的视觉语言中。
质·层级清晰
质感定位
质的方面如何体现层级清晰，我们做了具有质感的统一风格。选取了「流体质感」、「透明度」、「低饱和轻量」的色彩来作为质感的基调，传递温馨、深度和空间。
质感·图标分层
图标体系是有强弱程度之分的，纵向来看，从上往下是呈现强到弱的程度。其中最强的层级，是用这种轻拟物的风格去做一个强化的一个表达。第二层级，是用几何化的一个渐变的面性图标来做一个过渡。下一个层级，是用线面结合这样的图标去做扩展。最弱的层级例如系统图标采用线性的风格。通过图标分层和质感的处理，很好把整体的界面图标进行层级的结构化，并应用到其他场景。
质感·应用头部氛围
质感，我们在氛围上做了扩展，尝试采用流体质感，增加页面的深度和广度。让整个界面里面传递一种缓慢、轻柔、宁静、治愈的氛围，把他们应用到产品头部、频道、直播按钮等。
构·品质体验
构，主要是「构成」的构而非「结构」的构。所以我们尝试如何在构成上增加品牌基因和品质体验。
构·超级符号
如何通过构成提升品质体验，通过超级符号来构建我们品牌模型。把大药房的logo心智融入到我们的界面里。通过观察logo的特征提取，提炼丰富多样的形状。包括角度、基础形状，均可作为品牌模型的元素。
主要图形，我们以品牌标志为核心的元素去扩展，可以适用于全页面的活动页、频道页等，去加强我们的品牌的心智，例如健康卡、新品频道等。 辅助的符形，主要是包括一些品牌的容器和品牌基础特征元素。
构·构建品牌模型
第一个，主要图形将logo形体作为心智符号载体，并加强品牌宣传。 第二个，我们从logo里面的交接处提取了形状特征，来作为会员等级的标签的容器，或者是选中图形tab的形状作为特征。 第三个，我们选取圆形和药丸作为图标的背景元素，例如在金刚位图标中融入了药丸的形体特征作为背景装饰。
构·图标构成
金刚位是首屏中很重要的药品分类入口，我们汲取了品牌logo药丸的结构，作为图标的背景基底，且在图标上做结构化规范，应用到其他图标。
金刚位至今经历了2次迭代，第1次基于数据观察得出结论：识别度提升有利于点击率的提升。所以二期迭代用更加直观的方式结合品牌商业化的运作，采用模仿真实药盒的轻拟物化图标方案，数据验证有效提升了明显的点击率。
构·营销元素构成
采用logo符号做风格化尝试和商品的结合，不断的丰富我们的频道的心智。因此在频道页的方案探索，采用流光氛围、商品的构成来规范化模版。
03. 落
核心页面展示
核心页面（功能方向）
接下来展示核心页面，第一个核心页面主要是页面逻辑划分，规划是把一级页和二级页通过深浅层次来划分，像功能、一级页都是用浅色头部，像频道页进行作为二级的页面用深色头部。通过这样的一个深浅的一个搭配，实现页面的呼吸、节奏。
第二个方案是浅色方案，无论是一级还是二级页面，它的整体的页面氛围都采用浅色头部做统一，以传递一种轻量化的这样的感觉，区分度没有第一个方案那么大，但是氛围会更加统一、治愈。
核心页面（营销方向）
接着看关于营销工具的页面调性方向，比如新品频道是需要强推商品的氛围，因此做营销页调性扩展的方案中，采用流光氛围、商品的构成规范化方向的模版，通过这种方式来不断的去丰富我们的频道的心智。
核心页面（权益）
第三个核心页面是关于链路的体验优化。基于前面说的会员和健康卡链路心智不一致问题，我们从链路上用统一的性质符号去贯穿。在首页里面，会员是用的一个钻石金币的心智符号，健康卡是用绿金搭配。颜色跟分别落地对应的这个落地页面页面的心智是一致的，从而加强心智符号。我们通过这样一致性的符号表达，以及流程引导，去优化链路上的一些体验问题。
页面总览
最后输出整体界面效果图，基于对专业、品质、温暖的关键词的定位，在整个过程中通过不断打磨、优化最后输出一套比较轻量化、体系化、品质感的设计风格。
04. 拓
规范体系拓展
体系化建设
视觉体系化建设在项目中是可团队中横向提升设计效能的方式，在做项目的过程中积累并沉淀一套包括图标、色彩、动效等规范体系。一方面可以提升我们的设计的协同效率，另一方面也可以保证我们的全渠道体验一致性，后续广泛应用到其他场景。
情感化关怀之设计话术
情感化关怀的设计话术扩展，我们参考了IP形象小鹿的性格特征去做文案表达。小鹿，它具有乐观幽默的性格，所以话术尽量避免冰冷的语气，增加一些憨厚、情感化语气词，并把这种性格融入到话术中。
思考及未来规划
前期的问题剖析，中期自营大药房的设计风格探索，最后完成风格落地方案结果及向上汇报，并对齐整体多业务品牌统一性。在这个项目中有很多收获和学习反思，概括为两点：（1）整体品牌一致性调整（2）思考设计整体环境。
反思点1：整体品牌一致性调整
设计统一性需要站在整体的产品维度去思考，包括营销、产品、规范的规范一致性放到同一个框架上，去调整统一性，这样确保用户在链路上的心智加强，设计师也需要有意识去做品牌宣传。
反思点2：思考设计整体环境（用户同理心/用户视角看问题）
设计的页面需要在整体的环境来看待，我理解“环境”是指的用户在整体的电商里如何看待我们做的产品的，需要站在用户的视角来看待设计，也就是需要挖掘用户诉求是推导设计目标的重要环节，通过视觉手段帮助业务和用户来完成目标。
- END -