水槽定位法（0.618）

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

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

背景 ＜ 文字 ＜ 图片

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

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

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

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

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

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

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

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

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

图标盒子，呼吸感0.618

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

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

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

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

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

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

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

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

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

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

2、绘制用户情绪走势图

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4、功能导向——把流量

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

个人中心  设计细节拆解：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

两类：内容标签——强调  功能标签——吸引点击

标签的形态——常规微变形，融入图标融入角标，融入特殊字体

主副标签——用于促销活动中提炼賣点（1、形状变形，融入渐变高斯模糊  2、字体变形设计，注意保持笔画的统一性）

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

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

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

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

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

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

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

常规面性图标细节拆解——白色面性微渐变，挖空造型投影，渐变背景（可叠加几何图形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、点缀——背景纹理，背景渐变活动标签

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

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

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

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

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

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

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

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

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

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

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

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

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

feed流文字强弱层级：

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

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

变的——图片高度不同 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

给用户感触——快+安全

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

头身比例偏轻，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、植粅点缀——左右角（两端）倾斜填充页面，环绕插画人物

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

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

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

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

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

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

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

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

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

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

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

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

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

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

非全部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锁定参考线，便可以绘制场景了

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

十字交叉分析——偏原型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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