水槽定位法（0.618）

间距排版的应用方法，开发者的box，镶嵌原则，统一数值反复利用。

eg:间距1: 30px 间距2: 30x0.618 px

一维分析——对产品

通过韵律排版的视觉层级降低对布局的理解，控制阅读节奏，测试图三维转一维（沉浸式=不花时间在布局上+花时间在内容上）

背景＜文字＜图片

三维转一维图

网站——Eicodesign

十字交叉分析（双维度）kano模型——对交互

席克定律——功能数目越多，选择时间越长。——要帮助用户做选择——合理定位功能，优先级排序确定主副层级（功能型界面——功能使用频次，业务等级，盈利能力）

kano模型——对公司而言的盈利能力，对用户而言的重要度。流量*转化率进行数值比较排序优先级

用户五种需求：

1、必要因素 2、期望因素 3、魅力因素 4、无差异因素 5、反向因素

情绪板

六大基础色——蓝红橙紫黄绿

四色原则——红绿蓝黄，功能维度相近用邻近色

色环30°以内——用于图标渐变调整H色相的数值 HSB（色相，饱和度，明度）

色环60°~90°——邻近色，用于业务维度靠近的图标

色环＞120°——对比色，瓷片区（撞色背景，主图）

色环180°——互补色，用于重点突出强烈对比

banner配色秒杀公式——色环中三色成直角三角形

强光测试工具——WebAIM，前景色与背景色数值＞4.5:1

图标盒子，呼吸感0.618

情绪板应用步骤：

1、确定原生关键词，以抽象为主。 eg：安全——近义词：保障，保险，无忧

2、确定衍生关键词，具象为主。eg：安全头盔，保险箱，锁，警察

3、图片搜索，建立图库。思考：xx颜色给xx特点，xx细节给xx特点

4、搜集用户

5、情绪板分析

用户画像

帮助产品制定需求

用户群，科学分析结果导向——理想用户＞典型用户＞小资用户＞流失/潜在用户

1、原生关键词（抽象词） 2、衍生关键词（具象词）

用户画像拆分：

1、用户社会特征：年龄，性别，收入，居住城市，婚姻，子女，其他（情绪板确定视觉偏好，品牌色-情绪板，辅助色-行业报告（知网给xx），最后审核-色彩情绪）

2、消费行为特征：（1）经济价值——频次，消费金额（2）购买行为——消费品类广度（根据购买时间的偏好设置推送时间），消费品类偏好（根据席克定律考虑支付方式的偏好，帮用户做默认选择），消费看重因素（竞品使用偏好），享受优惠情况（3）平台行为——UGC行为，注册时间，登录频率，停留时间，频道关联

3、线下行为偏好：兴趣爱好，生活方式（社交习惯），出行方式（外环延伸业务），视觉偏好（情绪板）

用户体验地图

在系列场景中使用，找准用户失落点，完善产品整体体验。

1、明确目标用户，用户画像：年龄+性别+兴趣特征

2、绘制用户情绪走势图

3、完善成 $\bullet$ 聚类分析（抽象用户，动机，过程，计划，痛点）

5WH产品需求分析法

what 产品背景 1、行业梳理（艾瑞研究，猎豹大数据） 2、产品内外环结构（内：核心功能，没了不行外：盈利/粘性功能，没了也行） 3、主副功能

who 目标人群 (参考情绪板) （艾瑞研究，易观智库）人群年龄，性别分布，兴趣特征

why 预期目标

where 使用场景用户在使用场景中心态及目的

when 需求节点了解产品优先级，搭配kano模型，十字交叉分析

how 如何验证从数据角度量化改版效果

4W场景分析

单点场景使用——差异化创新，便捷&交互减步长（eg：功能模块搭配4W场景分析推测用户下一步or可能有的操作，便于搭建——智能场景/便捷功能，实现更快的流量分发）搭配任务测试，检查交互效果

如何快速完成操作——明确功能、明确布局强弱、提高图标辨识度（突显型，趣味性，预见性）

who（什么人） when（什么时间） where（什么地点） what（什么事情）

数据分析支持

猎豹大数据、艾瑞研究

如何参考大数据找竞品：1、周活跃渗透率高 2、渗透率低，但打开次数多（分析造成的原因）

数据观察——1、页面停留时间 2、屏幕使用效率

行文逻辑页面排序行为转化

建立认知（配色，图片）——行为转化（列表流，瓷片区）——流量分发（金刚区，筛选器，瓷片区）

建立认知——增加信任——促销导购

触发情绪——建立吸引——崇拜效应——制造稀缺

界面设计思考

1、布局思路：（1）整理类目，着手布局（2）罗列模板化界面问题（3）结合行业功能特点（4）如何判别（5）根据行业特点设计

2、行业设计特点

3、设计细节拆分

4、功能导向——把流量

行业细分：1、促销型（电子商务，美食外卖，旅游出行，女性亲子，健康医疗） 2、工具型（电子阅读，便捷生活，旅游出行） 3、内容型（金融理财，学习教育，综合资讯，社交网络，音乐视频）

$\bullet$ 个人中心 设计细节拆解：

1、层次性

2、顶部插图（插画，抽象点缀）顶部背景（微渐变，抽象图形，场景图形）

3、从左至右层次递减，破局效果，徽章微拟物，列表流重点提示

$\bullet$ 详情页

逻辑：建立认知——增加信任——促销导购

布局：导航栏——图片——促销条（提炼卖点）——基础信息——评价——详情介绍

走查图

eg：个人中心——功能完成效率，视觉重点统计首页——定位明确，流量分发（有限屏高，更多内容）详情页——实现转化

设计规范

规范作用——01 统一输出 02 查阅便捷（搭建Origami可交互） 03 指引细节（切割块/线，图标，瓷片区）

基础规范——文字规范（栅格化系统运用、UI字体包推荐），颜色规范（配色统一度、风格配色方案）

控件规范——按钮规范（间距控制、按钮状态），选项卡（布局与功能突显）

组件规范——导航栏&Tab栏（案例实操、图标断点样式），输入框（案例实操、两种状态），列表（视觉强弱、灰色线性图标创意、卖点标签提炼）

图标——1、内外环 2、底板 3、图形（规范指引：（1）细节拆分（2）业务带来的色彩情绪（3）功能维度）

瓷片区——1、背景点缀 2、文字设计 3、商品配图（贴近生活的空间模拟-前后景空间关系：（1）微渐变（2）近大远小（3）近实远虚）

栅格系统

（m+a）* n-a=750-2b

m——栅格宽（48px） a——槽宽（8px） b——留白宽（40 or 32px） n——栅格个数（12）

栅格系统梳理

其他

设计前：用户访谈、用户测试、问卷、数据分析、文档、

设计中：C端界面、B端界面、提示类界面、icon设计、图片处理、界面动效、rich button、banner、大促、普通运营、模板运营、物料宣传、

设计后：测试时间、设计文档沉淀

设计汇报公式——【项目等级(S,A,B,C)-Xpd（person day 每人每天）】项目名称-功能模块-进度-查看

eg：【S-2pd】腾讯视频-频道页改版-50%-查看

标注命名——页面-组件-描述-状态@倍数（common-tab-homepage-selected@2x）

文字

文字细节（5个）：大小，粗细，颜色，呼吸感，字体包

常用字体：

瓷片区——苹方，Roboto，方正兰亭大黑，方正兰亭黑，思源黑体

标签——苹方中黑体，方正兰亭准黑，方正兰亭中粗黑

数字——din，lato，dosis

正文——深蓝色（只偏蓝一些，更有质感 #24282e正文 #707d90副文）

优秀字体——方正兰亭纤黑，方正颜宋简体（古风，女性），方正正中黑，造字工房版黑

文字间距总结：

1、相同板块 a px 2、不同板块 2a px 3、文字列高90px(2@x)

图片

1、图片尺寸

1:1 ——视觉重新集中在中心

4:3 ——图片占比大，图片重于内容，适用广泛，图片流排版

3:2 ——比4:3高度矮些，放置于内容型列表流，一屏可展示更多内容

16:9——视频类封面，banner图片

2、图文混排——背景板（微渐变）+配图（抠图干净）+美化（色彩平衡，色彩偏向，色调统一）+投影（高斯模糊）+文案（粗细结合卖点标签提炼）

彩色背景+形状点缀/中性植物点缀

按钮

吸底按钮：在功能分区时采用栅格化进行快速定位，并注意黄金分割比0.618。按钮长220px（参考值）控件左侧的多个图标一般有一个突显图标

顶部黑色底悬浮按钮：尺寸——64px 不透明度——50%

悬浮按钮

图标大小——120*120px 内图标——80*80px 文字——24px 加粗

细节添加：（1）微渐变（2）弥散投影

按钮交付的四态

默认状态——主题色/行为/情绪（警示用红色）

点击状态——默认状态+黑色遮罩（#000 30%）

禁用状态——默认状态+背景虚化（#ddd）

忙碌状态——默认状态+忙碌图标

金刚区/图标

1、内外环 2、底板 3、图形

面性（造型+挖空，饱和度一致）＞线面（双色系，填充比例：30%，50%，80%，100%）＞线性（统一性，设计点：断点（右下角or形状连接处），颜色：品牌单色/品牌双色系）

图标设计流程步骤——1、选取图片 2、绘制轮廓 3、简笔画并优化结构 4、继续简化 5、分析 6、线转面

常规面性图标细节拆解——白色面性微渐变，挖空造型，投影，渐变背景（可叠加几何图形or散点元素点缀），背景投影

折纸错层阴影图标——前层，后层（拉为渐变阴影），挖空造型，图标投影，渐变背景，背景投影

保证线性图标的统一性——1、图标盒子的应用（方形适用圆形盒子中，圆形适用方形盒子中） 2、共同基础图形组合

单色系图标适用场景——1、个人中心 2、二级页面（并非纯单色，可以有透明度的不同，可添加对比色点缀＜20%~30%）

双色系——1、黑色+主题色 2、主题色+点缀色 3、透明度变化

多色系——1、联系业务，确定颜色方向 2、调整统一饱和度 3、思考频道关联性（情绪板）

破局图标——金刚区搭配高辨识度图片+破局（也不要超过0.618的圆环）

双重文字+图标——eg：美团外卖，饿了么

图标科学度验证：

1、突显性——帮用户做选择

2、预见性——所见即所得

3、色彩情绪——唤起正确情绪

4、色彩链接——符合业务属性

5、任务测试——科学有理有据

背景：1、形状——圆角方形，圆形，膨胀（40）圆角方形，膨胀圆角三角，多层叠加（不透明度调整） 2、大小——单个体积不超过90px 3、点缀——背景纹理，背景渐变，活动标签

流

$\bullet$ 列表流

排版顺序（结合十字交叉分析）

排版简单，理解成本低。适用于金融，工具，社交类产品（网格化排版界面——排版规整，但有理解成本，适用于电商，平台类产品）

图标视觉重点：从左至右，从上至下

灰色图标的样式可以更加有新意——不同部分的灰度值不同，采用两种灰

1、极简+粗线条

2、色块填充（浅灰色填充）

3、断点

4、内外元素灰度不同，内浅外深

设计参数：

背景颜色——#f4f4f4

内分隔线——#e5e5e5（一般在白色内容模块中，两边留有间距）

外分割线——#d8d8d8（一般在白色内容和背景层中间）（为减少分割感，可去掉外分割线）

ios11开始流行大标题+内容。以大间距的形式区别模块，而底则为纯白（这种看着干净整洁，更有质感，分割感弱，但却不能突出某些重要的模块或控件）搭配悬浮投影突出重点，极简去线，大留白（40px）

大标题风格特点：1、提升文字层级（大标题——48px） 2、增强对比效果（大留白——40~60px 弥散卡片大圆角——10~20px 基础圆角——8~12px） 3、更注重信息本身，适合内容型应用

多模块组合防止单调，较多搭配X轴横向交互（多一级页面使用啊，二级页面之后不用，可能和部分APP的返回上级的快捷操作相同，与用户习惯冲突）

$\bullet$ Feed流

新闻资讯类的产品较多

排版有区分左文右图，左图右文。eg：社交类，外卖类重头像工具类轻头像

卡片化——重点板块角标——重点功能标签——重点列表流

尺寸大小：小圆点——12*12px 文字标签——文字22~24px 周围留白4~6px 左右＞上下

feed流文字强弱层级：

标签——强度：1 样式：彩色框字号：26px 字重：常规

标题——强度：2 样式：加强字号：28px 字重：中等

内容——强度：3 样式：常规字号：26px 字重：常规

辅助字——强度：4 样式：弱化字号：24px 字重：常规

如何保证可读性——1、信息的的呼吸感（8px——8倍原则） 2、样式的复用（sketch中可创建symbol组件，大symbol套小symbol）

feed流和图片流一样，都是追求一种不断下拉的操作。页面的作用——1、让用户有沉浸式的阅读体验（eg：抖音） 2、引导视觉焦点（通过韵律排版的视觉层级降低对布局的理解，控制阅读节奏，测试图三维转一维）

$\bullet$ 图片流

变的——图片高度不同

不变的——图片下方主要信息区域布局固定

高度固定的——排版整齐，方便对比。不需要花时间理解页面布局排版

高度不固定的——展示完整，布局灵活，重内容（eg：花瓣）

头像大小——52px 间距采用五分原则

数据量化——滚屏率

$\bullet$ 卡片流

可结合十字交叉分析，从销量，价格等权重组合，高价带动低价，用常买及销量上推荐

卡片流的使用场景不太适合出现在一级页面中

图片流的高度可以不统一，但卡片流高度统一

文字卡片设计注意：卡片内容区域高度固定，主要信息区域布局固定

卡片流要考虑要没有网络或第一次加载来为加载出来的时候应有兜底加载（以灰色块表情各区域的位置）

兜底加载的好处：让用户有一定的心理预期，即使在网络不好的时候用户也能更有耐心的停留，减少用户的焦虑

卡片流的作用：卡片是用户了解更多细节信息的信息的入口，把信息以固定的排版布局模式展示出来

卡片流的目的——帮用户快速找到想要的功能

如何体现——提炼卖点（通过聚类分析 分析用户产生此行为的目的及痛点，结合文案，标签，图片体现）

品牌设计

品牌设计带来价值溢价和用户信任感

eg：美团专送的服务+保障体系——（1）超时赔付（2）配送可追踪（3）服务保障

给用户感触——快+安全

品牌设计出现的场景：logo提取法 ——tab栏，刷新IP形象动图，侧边栏智能场景图标（eg：盒马生鲜——盒马厨师形象，增强品牌感知+连接业务）（eg：闲鱼金刚区——描边型，趣味性强，强品牌色体现 eg：大众点评金刚区——年轻化撞色，色彩多样 eg：京东金融——粗描边，棱角分明 eg：饿了么——侧轴视角）

品牌感内容 有：

1、品牌色——品牌色基因 ：闪屏页（logo型），金刚区，tab栏，图标颜色，卡片区，运营区

2、形象物——下拉/加载loading，智能机器人，弹窗，缺省页

3、特色图标——启动图标，金刚区，tab栏，会员卡

4、特色文字——导航栏，闪屏，占位图（兜底加载）

字体设计（田字格参考图）

1、字体基础变形状（控制字形方正或高版，规律横竖笔划，注意笔划连接，注意笔划间的呼吸感，小规模规律添加特征点把控字体性格（字体性格可根据用户画像分析））

2、图形造字法

3、字体重心控制

4、字体表现（eg：错层阴影设计，一个字融入3~4个点即可 eg：噪点阴影效果 eg：金属棱角效果）

字体设计可结合文案所描绘的主题，在海洛创意搜图，提炼特征元素，融入字体细节中

产品角度的思考：品牌感的塑造到底好不好？每个产品有产品的属性极特点，当品牌感与特征属性相悖时，考虑产品的风格差异，应准确思考品牌的方向，舍弃盲目的高大上“品牌感”（eg：拼多多——实惠经济，营造促销感。而不是错误的将拼多多设计的巨有品牌感，反而给用户一种高品质昂贵的感觉 eg：网易严选——品质生活，着重介绍产品特性及评论，采用统一化的配图抠图，强“严”选风）

品牌的色彩情绪：粉色——甜美淡雅——小资黑金——金融贵气淡绿+白——健康卫生色彩鲜亮——生鲜亮橙色——青春活力

插画

照片——随机性强，表达不准确，氛围感不够，找图片受到的约束太多，费时。

插画——专门定制，表达精准，传递情感

应用——主运营的banner，瓷片区

作用——更加好的促销引流，情感内容展示（eg：音乐类，美食类，天气类）

插画发展史

1、15年，法国设计师MBE——MBE插画，少用色彩过于鲜明，高饱和，强点缀，搭配表情，比较适合儿童

特征——结构简单，线性断点，Q萌可爱，较低龄化

2、16年，卡通折纸风——印尼设计师Ghani Pradita

3、17年，出现在苹果WWDC大会的扁平插画（人物类型点缀）——来自Barfutura工作室Geoff MeFettridge

特征——结构简单，微渐变，纯面性，Q萌可爱，情绪表达

4、17年，一二线公司开始大面积使用扁平插画（主趋势）

特征——结构简单，微渐变，纯面性，情绪表达明确，普适性强（添加构图角度，厚度，微渐变，微投影）

5、17年，为扁平插画带来肌理感（增加质感）更具艺术性——中国插画师罗画舒

特征——快速易上手，肌理加持，质感更强，更有艺术感，应用广泛（暗面应用噪点肌理）

6、18年流行趋势，植物点缀——植物素材包的收集，芭蕉叶，ins风绿植

插画的构图方式 ——环形，对称，S形，特殊视角

环形——没有一些模特图和商品，以文案为主特点——形式感强，视觉焦点集中，围绕视觉焦点发散/聚拢

对称——强调人物图形特征——强形式感，视觉平衡

S/Z形构图——多为左右摆放图文特点——形式灵活多变，营造控件丰富层次，增强画面的节奏感

特殊视角——平行视角，垂直视角，低视角仰视，高视角俯视 2.5D——俯视视角仰视视角——多人物动作突显

正常绘画中的人物比例

男性——8头身女性——7头身儿童——5.5头身青年——6.5头身

扁平人物插画比例

头身比例偏轻，6个线条

6头身比例关系，头：上身：臀：下身 = 1：2：1：2（成年人）

插画儿童比例（3头身），头：上身：下身 = 1：1：1

实操：1、绘制骨骼图，确定人体形态，确定整体比例，1：2：1：2还是1：1：1

2、运用关节法，快速确定人体动态（胳膊 A，腿2A，头3A，身体4A）

3、运用椭圆切成法确定头身面积

4、绘制细节，增加修饰（双图库之：现实图库）

5、擦去辅助线（骨骼图及头身椭圆）得到基础轮廓（双图库：设计图库）

6、拍照上传，钢笔勾勒轮廓，部位与部位之间注意分层

颜色填充——人物饱和度高，画笔设置不透明度涂抹，渐变颜色——加深减淡工具（比画笔更加柔和）

噪点应用——噪点笔刷大小适中40~60，突显噪点质感，但噪点不能太抢眼，一个界面的噪点大小基本一致

插画其他技巧——人物头发夸张表现，增强趣味；形状衔接，前后错叠，颜色前浅后深

形状点缀

1、不规则形状——椭圆，波浪

2、规则形状——圆形，矩形（进阶——（1）多波浪，透明度变化（2）圆形——球体）

层级感叠加——将圆形和波浪效果再次做一个加强（抽象图形具象化——球体：卫星，圆形：月亮/太阳，矩形：山脉/城市建筑，波浪：云朵，投影增加层次感）

素材投影：复制，缩小，斜切，压扁，填色，动感模糊，高斯模糊

注意：植物类型的点缀不要一味做成绿色系，注意颜色和背景的关联关系，冷色调为主，常使用绿色系，紫色，蓝色系丰富配色

点缀类型小元素常用位置总结（点缀元素复用，构成插画组件库）：

1、形状+波浪——上下，波浪视觉面积≤30%

2、植物点缀——左右角（两端），倾斜填充页面，环绕插画人物

Banner

1、版式（文案版式）

（1）左右排版的差异性：左文有图——配图示意模糊时用，左图右文——配图吸引视觉，示意明确辨识度高

（2）版式试错：左右排版，居中布局，倾斜，三角构图，前后错层

2、字体

（1）字体情绪：衬线字体——古典经典，无衬线字体——现代简约，粗体字——厚重强壮，细体字——柔美，粗细结合——刚劲力，促销感，倾斜体——速度，促销感

（2）字体百分比：高度占整图比50%，大小层级差异10px

（3）字体处理技巧：1、字体覆盖（部分遮挡）一般选择覆盖英文或数字 2、微倾斜（文案倾斜素材向四周散发） 3、微倾斜创造空间感（微墙角） 4、错层阴影：整体适用字体略少的，局部每个字的错层地方3~4个 5、字体重构：1° 确定字体明确粗细规律（内部等距） 2° 调整字体重心 3° 微调笔划，注重呼吸感，改变字体性格 4° 设计笔划特点，小规模规律添加 5° 考虑笔划衔接处是否添加断开，增添细节

（4）banner呼吸感：居中排版（图文前后错层居中）——面积占比70~80% ，左文右图/左图右文/居中——占比50% ，放射状排版——面积占比40~60%

3、配图

配图样式：（1）花朵型（2）发散型（3）模糊分布（近实远虚）

图文位置（模特图）参考黄金分割比6:4开，或裴波那契数来快速定位

组合商品配图：多点吸引——总有一款适合你，带动价格——高价带动低价

营造复杂空间感（瓷片区同样适用）：（1）展台三大面——受光面，侧光面，背光面（2）商品图片处理——高光，投影（3）多商品组合——商品前后空间关系

3-1插画（矢量插画）——同看下面插画板块

根据文案绘制矢量插画，处理角度：（1）调研需求——调研风格，颜色（2）提炼关键词——去形容词，；留动名词，具象到人姿及物品（3）寻找参考——双图库（真实，设计）（4）确定方向——抄现实，三角形上色法

颜色填充时注意前后景色明暗关系，人物饱和度高，背景饱和度低，点缀比背景深（填色时同色色相不要做改变）默认光源在左上方，暗面物体右下角

先将配色条制作出来，上色时刻完全复制配色条色彩样式（渐变，描边等），使上色便捷统一

噪点笔刷——一般运用在物体的暗面

噪点笔刷设置：以三角形为轮廓在3个点的位置上点3个点，然后保存噪点笔刷，打开画笔设置工具，1° 形状动态——大小抖动，最小直径，角度抖动，圆度抖动，最小圆度 2° 散布

3-2插画（2.5D插画）

优势—空间感强

非全部2.5D，分板块，场景——2.5D，人物-矢量（非2.5D，为更好融入2.5D场景，通过阴影，投影的控制及形状图形的明暗渐变）

2.5D关键点——明暗面的确认（5大面）：（1）受光面/白面（2）侧光面/灰面（3）背光面/黑面（4）投影（5）反光

2.5D场景工具——（1）2.5D网络参考线（2）AI的3D凸出与斜面工具（绘制一些曲面效果使用）

AI中2.5D场景网格的绘制——（1）绘制六边形（2）各顶点连线（注：打开视图-智能参考线）（3）旋转90° （4）按Alt移动复制，Ctrl+D重复上一步（注：移动复制，不要有间隔）（5）充满画布，Ctrl+5转为参考线，Ctrl+2锁定参考线，便可以绘制场景了

4、点缀

常见点缀：椭圆点缀，双椭圆融合，长圆角矩形，圆形

抽象图形点缀：年轻/活泼——水波纹/小山角，发散/纹理细节——网格化/比背景深/适当隐去

其他点缀：标签点缀（卖点提炼点缀），微质感+短线，粗细结合的形状，logo容器

运营banner

风格：

马卡龙风格——适用年轻女性

马卡龙风格

孟菲斯风格——高明度，高饱和度，几何结构，波形曲线，描边。适用比马卡龙的年龄伟大一些的人群，男女皆可

高菲斯风格

蒸汽波镭射虹彩渐变——荧光，流体，梦幻感，镭射材质，Windows背景。三段式上色渐变。 17,18年天猫电商类开始流行的banner风格

蒸汽波镭射虹彩渐变

波普风格——夸张的，视觉感强的，写实主义，强烈夸张的颜色处理，具有游戏色彩，饱和度比孟菲斯更强

波普风格

瓷片区

排版方式——左右，对角，上下居中，多种方式可搭配使用（2种）

瓷片区图片细节要点：1、图片色调明亮，饱和度高，色调色温一致 2、配图简洁，呼吸感强，抠图干净 3、统一图片高度与视图面积

瓷片区表现样式——1、配图类瓷片区 2、插图类瓷片区 3、空间感瓷片区

展台两大面+商品图+微渐变背景及文案 = 基础空间感（1、寻找参考图片确定光源 2、绘制图形，并体现明暗关系 3、根据商品色填色，色相不变，饱和度明度微调；结合色彩情绪）

复杂空间感瓷片区：1、展台三大面——受光面，侧光面，背光面 2、商品图片处理——高光，投影 3、多商品组合——商品前后空间关系（近大远小，近实远虚）

卡片

工具型产品，多以卡片化呈现

选项卡/筛选器——1、点选型+滑动型 2、滑动型 3、点选型

卡片外观——1、底色：白色 2、投影：12%黑模糊8px 3、圆角：2~4px

选项卡

高度——78px 选中字——30~32px 加粗未选中——28px 常规

选中条可做一些细节变形设计（不同功能滑过去会变色）

导航栏

一级导航：搜索文字——28px 图标文字——18px

二级导航：标题文字——36px 操作注释文字——32px(字号差4px)

导航栏图标：设计尺寸——40~44px 图标粗细——3px 搜索框内图标尺寸——32px 导出尺寸——48px

Tab栏

设计尺寸——44px 导出尺寸——48px 文字大小——18~22px

断点样式绘制

1、一般断点在右下角

2、若图标有交接，一般在右边的交接处断点

输入框

标注不同状态的交互

过渡方式的进阶

1、弧度：向下弧，倒弧（更常用，有限空间展示更多内容）

2、边角的方式：下面白底，两边圆角化+弥散阴影（深色的背景色，透明度降低）

突显设计技巧

1、异形——弧度过渡

2、背景点缀（样式多总结）

3、弥散投影卡片

4、嵌入式（倒圆角）——为后续交互埋伏笔

5、文字层次——大小、粗细、颜色、呼吸感、特殊字体包 banner类主副文字倍数1.5~2

6、标签的多种样式（注意呼吸感）字号24px，上下4px，左右6~8px 数字字体：DIN，lato，dosis

ios风格

ios11——大标题风（比较浪费空间，不必盲目跟风）

ios7——扁平风

主流设计趋势及项目交付适配

iOS 平台规范

1、清晰——尺寸清晰，表意清晰，交互清晰

2、顺从——形式服从功能，减少视觉点缀，确保内容突出

3、深度——动效传达深度，层次顺序展示

iOS 设计趋势（大而简，简而精）

大——产品+规范（大小，颜色，粗细，呼吸感，特殊字体包）（用色考虑色盲弱——蓝红橙绿，色彩联系）

简——视觉重点

精——交互操作角度更加便捷（eg：交互减步长——智能场景，收听类APP——保留暂停播放或未放完的音乐，文章，视频APP个人中心页——离线缓存,观看历史,首页——猜你在追，课程直播APP——小窗提示马上开始的直播课程）

布局文字图标交互层点击强化

布局

1、布局精简，减少分裂，减少思考（01-大留白替代（整合相同的模块） 02-弧度过渡 03-少于3的灰色分割）

不必盲目使用大留白的流行趋势，除非产品架构单一

弧度过渡——用于有色板块与白色板块，趣味化，不重复

2、一维分析法（找到，把控界面节奏感，减少用户对布局的理解成本，而着重理解内容）规范排版，沉浸体验

应用于趋势中的简（视觉重点），精（交互便捷）

一维分析可以用在内容型的——feed流，图片流，卡片流，流体

3、卡片弥散（层次拔高，突出重点），界面使用投影时，注意全局投影样式的统一

4、XY轴，十字交叉

在有限的屏幕中展示更多内容（在首页的一级页面中可采用横向滑屏的交互）

口诀：精一十影（布局精简，一维分析，一级界面采用十字交叉分析，通过投影在视觉上层次拔高）

文字

十字交叉分析——1、文字层级（大小，颜色，粗细，呼吸感，特殊字体包） 2、间距留白（5分原则，等分原则） 3、图形元素（按钮增加图标，添加情感化及辨识度）

图标

1、图标的三种层次：辨识度，统一度，突显度

01视觉大小统一（图标盒子）

02设计统一（相同设计组件基础，视觉构成，描边粗细，圆角大小，挖空比例30）

03突显性（线转面（选中当前），线性描边角标突显）

2、新处理手法；缩减法（新功能，新页面，没有参考案例的——实物抽象化特征）

3、全面性时代（理性看待图标统一性，注重特殊图标的突显）

交互层

1、交互减步长——提前展开用户的可能操作（eg：要下载的APP直接获取，不必进入二级页面；KTV歌曲智能排序，十字交叉分析——01-点歌频次 02-结合KTV门店所在城市位置的群众偏好）

2、减弱衔接冲突

兜底加载（banner，icon，瓷片，列表配图，详情页头图，评价配图...）

点击强化

1、减少思考，明确出口。在强化产品出入口时，多融入一些品牌色或深蓝黑的文字，或弱面性/描边风格按钮

MD（Material Design）

谷歌推出的跨平台设计语言（app，web，平板，适用于Android）

特点——实体感隐喻，鲜明/形象/深思熟虑，有意义动画效果

但国内很少用到，原因：1、在交互的应用角度并不是很好 2、屏幕尺寸特别碎，难适配 3、国内追求敏捷设计（先上，慢慢调整）常常统一采用苹果@2x一稿适配

工具——Material Design Colors ， 500——导航栏，700——状态栏

Android 的Tab栏一般不置底，不然双置底效果，通常将Tab栏调整到页面顶部

适配

1、iOS 调整到 Android（750px——720px），缩小间距，两边不动中间自适应；图片比例保持不变，缩减尺寸

2、Android——时间栏 48px , 操作栏112px（左右） , 一共160px

IOS——时间栏48px , 操作栏88px（左中右） , 一共128px

IOS界面到Android的界面部件调整——标签栏不改动，Tab栏调整成操作栏，放于最上方，而个人中心放在左上角

3、控件调整——开关类，单选，弹窗，控件由开发自动更换

设计可用性

设计师完整的认知架构——设计前（了解市场，前期分析），设计中（设计细节），设计后（设计验证，动效体系）

设计验证：1、主动验证——视觉可用性 2、客观验证（被动验证）——等待数据反馈后的验证

改版

对改版的版面做可用性分析，增加改版对比的说服力

设计前的分析点——1、品牌色定位（情绪版） 2、布局层次平淡（十字交叉分析） 3、视觉风格老旧（平面设计画板积累参考，寻找灵感）

UI提升的本质路径

设计前期分析——用户画像，5WH产品分析，场景走查

设计中期精细度提升——一维分析法，十字交叉分析，能够指引设计细节的规范体系

设计后期设计验证——人物测试，视觉可用性，数据

布局可用性

十字交叉分析——偏原型

界面浏览测试——偏视觉（1、测试层次性，强弱关系——这个页面什么地方最吸引人？ 2、功能目的——页面的作用是什么？ 3、验证产品优点是否传递清楚，验证产品是否有差异化——当使用这个页面，是否会使用它提供的功能）

图标可用性

1、理解性——实体物体的简笔画，频次的区分（主副层级区分，帮助用户理解）

2、预测性——70%的通过率

3、连接业务——色彩情绪，联系与区分

金刚区图标配色采用四色原则（根据业务属性分类）
蓝——电子类（男性居多）（电子科技感，男性色）：数码手机，家具电器

红——生活类（女性居多）（女性色）：母婴玩具

黄——综合类（促销感，主题色）：卖闲置，清仓，同城

绿——其他（年轻，白领，学生群体）（中性色）：书籍资料，租房，逛同城

颜色可用性

无障碍色系+色彩情绪+色彩连接

以数据导向的设计法——GSM数据驱动设计，4大主流设计数据解析

数据——发现问题+解决问题

UI/视觉，需要哪些数据？——点击率（CTR——click through rato），留存率，转化率

CTR点击率 = 实际点击次数（click） / 展示量（show content）

设计的本质是服务——1、服务用户（提高界面的可用性，美观性，智能服务场景，交互减步长）

2、服务产品（功能性，凸显产品调性，优化核心转化流程）

数据 ——转化率，用户体验，测试指标，UV（独立访问人数（去重））

提高UV的手段——位置靠前，微动效AE，层次性（改变样式）

用户体验衡量指标——差评+用户来电/总订单量

GSM数据驱动设计

G（goal）目标——识别目标

S（signal）信号——推导表现

M（metric）度量规范——验证数据

GSM演变到国内合理转化为：数据目标，目标用户分析（4W场景分析了解目标用户行为需求及行为特征），具体问题描述，用户表现，产品设计策略，衡量指标

eg：应用商店用户的留存率提升——以游戏为例，老用户写攻略得礼包，新用户看攻略。解决用完即走的现象

衡量指标——礼包换取数量

UI-设计方法总结