2018年有意放缓了一些节奏，对今年的期望是沉淀和有效产出，希望能一步步达成目标
最近一直在做卡券包的业务需求，活儿到手的时候只知道，使用这些卡券的逻辑复杂，所以大量的时间用在了梳理流程上。原以为流程梳理清楚了，后面的设计应该就没太大问题了，可是没想到更大的难题在等着我。券样式的设计比想象中复杂，需要在基础结构不变的情况下，对不同类型券的字段进行个性化配置，这就需要在基础样式和个性化样式设计中保持一个平衡，让两者在观感上能看着一致又有区别
在获取所有的字段和券内信息优先级之后，于是开始了我的设计
-----------------------------------------------------------
整个设计过程大概分了5个步骤：找竞品、确定元素、信息结构、卡券排版、适配要点
1.找竞品
由于以前没做过卡券，自然会找一些现有其他卡券产品来看看，于是我选取了网易系、淘宝系、京东系以及其他代表系四组作为主要参考。
从券结构来看，基本 = 满减金额数字+一些券文字描述
从劵的样式上，基本 = 色彩系 or 素色系
网易系
京东系
阿里系
其他系
结论：
在劵结构上基本都是左右或左中右结构，这与移动端横向结构相关；另外，我们见到除了左右结构的券以外，有的券会出现上下结构的情况，这种样式的下半部分主要是为券的扩展功能留出位置，一般来说券的上半部分为基础信息，下半部分为扩展信息。
在券的色彩上，基本以本身产品的调性为主，并没有固定的搭配，保守的做法一般是左券色又空白的做法；这样能让信息有效区分，又能保证券型在视觉上的表达
Tips：至于券概念的表达，也一定程度上依赖于实际生活中；由于券的概念其实只是在国内很普及，但其他国家在电商购物上，券的概念并不明晰，所以要植入此概念，需要去了解不同国家地区用户对实体券的共识，以此为基础作为设计基础，能让用户更快的认知和接受券概念
2.确定元素
在对竞品有一定了解之后，我把所有可能出现在卡券上的元素一一列出，这样能对卡券有全面的认知，能为不同的券样式在设计时预留空间
券元素分为3个部分：图片型元素、文字型元素、操作型元素
文字元素主要做说明作用，一般字段较长，有折行的可能，在宽度上占用较多
图片元素主要做提示作用，一般通过底色+单词的形式出现，通过视觉的变化，让图片型元素提示性更强
操作元素主要做行动作用，一般由按钮或带图标的文案形式出现，触发后有后续动作，能帮助用户进行下一步操作
券结构
3.信息结构
在前文参考卡券中，信息结构在大致一致的情况下，还是有细微的区别
主要有三种：左右结构、左中右结构以及上下抽屉结构
a1. 左右结构
左右结构
可以看到，这一类结构中，数字居左，操作居右；主要目的是符合视觉和操作习惯，左边的数字信息会第一时间展示在眼前，右边的操作可以实时形成操作关联，当需要用券时，能第一时间触达。
而居于中间的券信息部分，则会根据具体设计需求，选择与左边的数字信息或右边的操作信息发生强关联
a2.左中右结构
左中右结构
可以看到，左中右结构把数字、文字和操作区做了明确的区分。这样的劵结构常见于领券场景中限量劵的情况，专门留出右侧操作区是为了给特定该功能（比如进度条）。此种券的样式在存劵、用券场景较少出现。
所以有可能同种券在不同场景下，样式上有可能并不会保持一致，需要根据实际情况进行调整。
从个人角度来看，虽然样式会有所出入，但还是希望在大方向上样式能保持一致。特别在首次设计时，把这些问题考虑到，能为后期的设计扩展避免掉很多问题
a3.上下抽屉结构
上下结构
我们可以看到，当券字段较多，需要描述券详情的字段时，或券不只单纯承载一种功能的情况下，会在劵的下侧做一个样式上的扩展。这种做法一般是为了保证基础券信息的清晰性，不至于一张券上容纳过多的信息，在功能和样式上做一个较好的中和
这种有扩展样式的券，大多出现在券类型众多的情况下。扩展样式能为不同类型券保留一个可设计的出口，有一定的缓冲作用
4.卡券排版
整个卡券中，最重要的是排版，好的排版能把信息有效地传递给用户；从重要性上来说，排版样式 > 视觉样式
由于本次设计主要以非中文设计，所以更多的涉及到的是西文排版的心得
整个设计过程中，主要涉及到的排版问题有如下：
字号关系，字体大小写，字段对齐依据，分割线使用，Tag设计
a1.字号字重
对券的信息层级了解后，通过字号的大小变化是区分层级的基础方法；
但在字号种类的使用上要克制，同类信息使用一种字号，每出现一种新的字号都代表着一种新的层级，字号数量3-4个为宜
在字重的使用上，要更加克制，一定是要绝对突出或弱化的部分才加入字重，为信息层级做细节上的平衡，字重一般1-2个为宜，可以不使用
右-字重问题
a2.字体大小写
在设计时会发现，全大写的字段和大小写组合的字段，在同样字号一致的前提下，观感上前者比后者要更大。所以在设计时，如果没注意会导致对齐问题；同时要了解每个字段大小写使用情况，因为有些字段全大写可以，有的字段则不行
Tips：全大写的字段在观感上会更规整，对齐依据上会更好找，也更美观
右-字体大写
a3.对齐依据
以前做设计时，主要以一个个整体的模块作为对齐依据。但对齐的模块并全然一致，所以往往在对齐时会出现画面不平衡的情况，居中对齐时遇到这样的问题尤其多。 对于这样情况，改变对齐依据参照能较好的解决这个问题。把对齐的元素由模块降低至元素，对齐的方式可以从单一的居中对齐，扩大为顶对齐或底对齐，参照方法和对齐方式的扩展，能给画面带来更多的可能性
右-模块对齐
a4.分割线使用
在整个卡券样式中，分割线的主要作用并非装饰，而是在用适当时候用来区隔信息层级的手段。一般来说，界面上区隔层级的手法可以用留白和分割线两种；但一般在使用频率上来说，留白区隔>分割线区隔，分割线的使用克制。
右-分割线
a5.Tag设计
在卡券设计中，需要一些Tag来浓缩表达一些意思。在设计时，这些Tag最好能保持一致的设计语言，因为Tag样式太多，会导致用户的的困惑，对每次新加入的Tag样式，都要去判断是否有必要新增。另外，Tag会根据位置的不同在作用上发生变化，一般来说角标位置用来表达时间和选中状态，位于标题或描述字段的Tag是对劵属性的解释
右-Lable样式
5.适配要点
a1.字数边际
卡券描述字段字数不能确定是最常见的问题，是设计中最无法控制的因素。所以为了避免一系列的问题，在设计上要对字段字数进行控制，尽可能把文案变成标准文案或确定显示规则。这样在后期维护和版本迭代中找到依据，避免在开发中出现各种问题
a2.国际化
因为中文是方块文字，字段长度可控，西文字段长度不可控情况较多，同样的意思中文比西文要短很多。在解决办法上，除了找到贴切的当地语言表达意思外，大部分情况下，需要对部分设计样式进行调整，比如Tag样式并不适合加入过长的字段，需要照的合适的方案做替代
a3.样式调整
对于多语言的设计，理想情况是为每种语言做对应设计。但考虑到现在的情况，一套设计可能要适配各种文案字段，所以在样式上就要进行一定的调整。比如字号根据位数进行变化，折行显示，超出部分“...”，都是一些常见的手段。所以这就尤其考验对边际情况的掌握，对于较大的项目，一定要介入翻译表格机制，让对应语言的翻译有依据，有沉淀，保证设计适配的同步
网友评论