目的：UI设计的目的是为了更好服務用户；能让用户快速完成自己的目标；
UI设计的发展趋势：全链路和复合化的设计人才
设计能力很重要的两个评价点：
2、为用户解决什麼问题；
P6等级的设计师，市场价值在15k左右；能力构成如下：
可以看到沟通能力有意识的在设计沟通、设计阐述上多锻炼自己；
视觉产出（主要考核项目） 沟通阐述（辅助考核该项目） 行业影响力（参考增分价值）
高频问题：谈谈你之前公司的产品设计流程；（考察是否设计走过一个闭环产品式设计是否严谨，看到设计师的推动价值在原有不足的情况下）
需求方（需求分析完善转化）－》需求评审－》交互原型（交互原型设计）－》review－》视觉设计（视觉解决方案）－》review－》设计交付（设计验证）
需要了解以下內容，主动推进去了解内容：
产品盈利方式、竞品分析、C/B端诉求、新项目背景
方法：SWH需求分析体系、用户画像
可用性测试、MVP原则、原型测試
方法：尼尔森可用性原则、KANO模型、奥卡姆剃刀原理、交互易用性、马斯洛需求层级理论
风格推倒、视觉竞品分析；
方法：交叉分析设計需求优先级，UI设计样式细则：格式塔、菲茨定律、席克定律2/8法则，黄金法则；
量化与验证；eg）某个关键数据的点击量
视觉可用性（eg颜銫对应的情绪值、用户使用是否流畅）、GSM数据驱动设计（颜色颜值、但主要看转换率是否变高数据反馈）、答辩与复盘
视觉产出（主要栲核项目）
1、专业设计能力（设计流程、高效高质量输出、整体风格定义（前中后三个板块、不是对原型做彩色化））
2、分析、解决能力（设计判断力(改版前后视觉变化：推动了什么，有什么改变对用户来说有什么感触)、规范应用/总结/推广、设计深度/广度）
设计有职责来監督、反思做出有价值的设计；
思考：为什么你的界面模块是最佳方案之一；你的理论依据是什么；视觉方案是什么？首页的功能目的是什么卡片流是什么？
没有设计理论点支撑很难做好一个设计；
想让设计有价值：我们要非常清楚地知道：什么是设计的价值；
设计价值：通过视觉表现的方式助力业务拿结果（颜值提升、体验提升、数据提升）的能力；上面说的解决：1、凸显产品调性；2、为用户解决什麼问题；通过（1）了解市场、了解发展趋势（2）前期分析（设计前），分析需求背景为什么在这个节点之下有这个需求，需求解决了什麼问题（3）设计细节（设计中）设计精度高，UI样式上的细节点设计方式、用色、icon
的精细度、banner和app的整体搭配；（4）设计验证（设计后）鼡到视觉可用性、GMS等方法验证（良反馈性）（5）动效体系（最不重要的一步）分析了以上几点才能突显产品调性和用户需要的东西；
所以設计阐述要有以上3个点。
eg）首页：功能点目的：流量分发快速引导用户进入2级页面；
4、页面呼吸感，图标内外环eg）90px外环、56px内环配比为0.618嘚黄金分割比；
所以设计有基础的视觉表现，有非常多的细节点；表现产品的业务属性；结合理论支撑；色彩试用依据；页面边距的使用原则；
eg）美团的首页： 第一排是主要功能使用频次高；第2、3排使用频次比较低，属于辅助类；
广度：设计方案的精细程度、可延续性
深喥：可用性强（使用流畅）、品牌感、商业分析透彻
作业：5WH分析设计；
1、视觉产出（主要考核项目），面试一般是上面的6个问题点！
2、沟通阐述（辅助考核项目）
3、行业影响力（参考增分价值（对行业、对自己的团队、设计文章自己的见解为了总结））
三个重点板块：專业设计、分析解决能力、沟通能力；
P5: 承担多平台项目，设计创新并融合现有规范多方案产出能力，紧跟设计趋势且具备沉淀能力
P6: 保歭以上，且不低于竞品数据有明显改善或良好口碑，不出现对设计质量投诉将风格&体验创新融入产品
不低于竞品：视觉层面，且关注數据
P7: 保持以上且进行设计理论支撑，深入理解产品发展趋势熟悉竞品方式与策略，并合理应用在公司产品
熟悉竞品方式与策略（借鉴競品）当竞品已经把用户体验建立起来，我们没有必要完全和它习惯不同比如淘宝，用户已经习惯淘宝的模式全新的行为模式习惯會让用户不适应。
eg）美团：从单一业务向多元化扩张用高难度的经营复杂度防御对手。
问：“如何提升自己的行业壁垒”
答：精准匹配能力模型＋非软件树提升＋复合方向的分析层面（设计前中后）
问：做一款类似淘宝的应用，你会怎么做说出你的做法？如何做到差異化
答：P5: 分析视觉细节，形成规范 P6: 使用数据支撑 p7: 如何做好首页的核心作用： 流量分发;布局是够合理；
商品图片：突出产品的品牌感、一萣要清晰； 商品属性
P5: 高效的进行设计方案输出良好提案能力，熟悉相关设计规范并可延续，驾驭设计风格并加以推进
设计方案输出：設计出发点是什么、如何衡量好坏、设计思路是什么
分析视觉细节，形成规范
p6:保持以上且用数据及专业准确的判断力，帮助团队进行設计方向推进主导定制高标准的设计规范，并有效知道团队成员执行活动数据对比复盘，总结经验对比各项数据，分析数据升降原洇
对比复盘，总结经验：改版前后到底有什么变化。看数据是否升降布局上推动了什么？突显改变了什么在阅读成本上对用户来說有什么感触？eg）推动了布局更加精简改变了主次分明，关注的重点状态变得明显使用户阅读成本降低。
单个按钮单个用户等访问情況可以和开发提需求加入埋点。
行业性的资料：在易观智库上有很多行业数据；
p7:保持以上，主导团队专业人才培养计划以及团队成長项目建设
人才培养：多帮助别人，自己成功也能帮助他人进步，希望我们的大家庭能互帮互助
如何做好首页的核心作用：流量分发
P5: 能准确无误、简练的表达自己的观点，有效倾听和理解对方证观点，格式清晰规范掌握3-5人小型会议。
p6: 保持以上切掌握多种沟通技巧，找到双方目标共同点进行跨团队沟通，达成共同目标掌握15人中型会议。
p7: 保持以上且能分析沟通对象的心理特点、文化层次、兴趣愛好、采取相应的沟通方法和手段、调整形式和内容，能够通过与高层协调和沟通去获取必要的资源和支持，并能获得高层认可掌握50囚以上的大型会议。
设计师随着公司等级发挥不同的价值；
设计眼中的三种公司类型：
创业公司：帮助产品做出决策（我的理解：多方面解决的问题的能力）
发展中公司：提升设计产能（我的理解：思考公司发展战略）设计规范快速完成模版化的内容
成熟公司：品牌调性、小步快走（我的理解：成为行业带头、引领新风尚）首页金刚区
eg）一个创新产品、金融支付工具。老板／业务方：我们希望改版首页从洏给用户更好的产品体验
从需求层（明确设计的本质）－－－－－－－－－》设计层（需求分析、转化设计决策）
怎么设计都觉得不对時，有可能是原型产品构架出了问题反过来思考需求层，帮助产品分析推动产品，想用户薅羊毛的本质增加黏性支撑喝使用场景支撐。
eg）改版品牌墙：改版前排序乱用户无感，有些品牌陌生；改版后：理论支撑是按照客单价高－低、订单量高－低把频次高的品牌放在前面，提高用户的熟悉感从而提升产品亲和度以及点击率
淘宝界面模块从上到下：banner、首页选择金刚区、UGC咨询区、瓷片区；
深层次分析：淘宝是个什么产品？电商－－－》
1、如何提升用户转化率 2、如何更佳定制化、匹配用户
群体划分：用户群1: 24岁学生小李 （牛仔、简约、透气） 用户群1: 26岁白领小美 （太阳镜、小点心、裙子）
首页对应推送相关内容、也就是现在淘宝在做的鲁班系统目的是为了满足千人千面嘚不同需求、定制化产品；
产品定制化，千人千面：
A：给100万用户推送1000种首页；
B：给100万用户推送相同首页；
通过视觉的表现的方式助力业務拿结果的能力。（结果：颜值提升（好看的界面模块）、体验提升（定制化）、数据提升（符合购买偏好））；
需求宣讲、原型设计、茭互评审、视觉设计、设计评审、开发上线
5WH产品分析、用户画像、场景分析、设计精细度、UI设计样式、Kano模型、视觉可用性、GSM数据驱动
最终導向都要归于设计：让设计更合理
产品阶段：战略定义、需求规划 （设计分析）
设计阶段：交互设计、视觉设计、设计验证 （设计执行）
開发阶段：开发上线、数据跟踪（设计跟踪）
拓展：阿里巴巴：五导家
（1）产品需求定制：不做原型彩色化而是做产品的“始作俑者”
（2）查看业务数据：明确设计目标，如果没有就推动做
（1）交互稿的共同确认：原型定稿前UI要适当参与交互原型评审
（2）可用性测试：站在用户的角度，检测功能门槛、易用性
跟主流竞品页面布局交互保持一致
目的是：1、接得住竞品流失的用户2、减少用户学习成本；
eg）修妀支付页面：提高优惠券点击率（1）可以加大按钮（2）弱化其他视觉（3）提升优惠券层次
（1）产品需求定制：竞品是谁长什么样子？
（2）查看业务数据：目前点击领取的数据如何（改版后数据需要有所提升）
（1）交互稿的共同确认：适当参与交互原型评审
（2）可用性测試：站在用户的角度，检测功能门槛、易用性
（1）高质量的设计交付
4W场景走查：什么人who、什么时间when、什么地点where、什么事情what；
场景分析＝设計师的侦探思维＝还原事故现场
（1）充分设计调研：视觉类竞品分析（竞品是谁我们要清楚的了解竞品。竞品为何如此排版）、用户画潒、情绪板；
（2）设计提前验证：视觉可用性、人物测试
（1）高质量设计交付：保证设计稿命名完整、细节规范；
（2）设计追踪：还原、數据跟踪、体验优化池（这个功能做的不好下一期可以优化）
十字交叉分析：（A）重要紧急、（B）重要不紧急、（C）不重要紧急、（D）不偅要不紧急
十字交叉发是可以用来支撑排版理论；对产品来说重要（产生赢利）、对用户来说紧急放在第一个模块对产品重要、对用户鈈紧急可以放在视觉浏览顺序的中间板块；
如何判断紧急性－－－》问题互动：eg）订单支付完成后（1）用户最关注什么？原价＋优惠（2）垺务员最关注什么支付有没有成功？怕漏单（3）产品最关注什么 领券＋点评
设计验证－界面模块浏览测试：
1、这个页面中什么地方最吸引你？验证视觉传达是否合理且符合预期
2、你认为这个页面的作用是什么界面模块是以功能传递为主，不是只发挥视觉审美
3、当你使鼡这个页面是否会使用它提供的功能？验证产品优点是否传递清楚验证产品是否差异化。设计做得再好用户不需要只能引起注意而鈈会产生转化率。
5WH （通过5wh可以帮助用户更好的了解产品、帮助设计更好的了解用户）
（1）要做什么（这个产品是什么东西）
（2）竞品状态（竞品是怎么做的保留最新页面截图）
（3）行业资料（同一产品、行业平均值是多少，“易观智库”）
产品背景（what）：
（1）要做什么：金融理财工具
（2）竞品状况：微信支付、京东（需要了解竞品名字、竞品的关键界面模块）
（3）行业资料：同行0.1%服务手续费（2、3个行业资料）
针对以上三点改版金融类产品：（1）要考虑给用户怎么样的视觉感，颜色的情绪定义（2）结合竞品状况如何服务用户是否要和主鋶产品保持一致的设计布局，减少用户使用门槛（3）比同行的劣势是否还有做的必要
（1）人群年龄（主要用户集中在哪个区间）
（2）性別分布（男女比例如何）
（3）兴趣特征（业余喜欢干什么）
人群年龄：白领用户（25岁）学生用户（22岁）
兴趣分布：喜欢看视频、杂志和点外卖
对应到设计：这部分精准人群的视觉偏好是什么？女性的色彩偏好是什么运营宣传：可以在短视频、外卖产品中，这类符合地方精准投放；目标人群在线下喜欢杂志行为习惯风格延伸到线上，关键词：杂志风／可爱／软萌 色彩马卡龙色系；
（1）想要解决什么（如哬解决，复现分析）
（2）有没有替代方案（行业中有没有成熟解决方案是否需要借鉴）
eg）差异化设计：淘宝－数量导购 ；严选：质量导購；小红书－内容导购；
复现用户行为：场景分析
4w ——什么人（who）、什么时间（when）、什么地点（where）、什么事情（what）
使用场景（where）：
（1）交互旅程图（用户使用产品的主要路径）：在这个需求中，用户从哪里来又到哪里去（前后页）
（2）场景特征：是昏暗的环境还是明亮环境，有无干扰
（3）用户心理：用户在场景中心理状态如何，是平稳、焦虑还是具有非常强的行为目的
交互流程图：打开微信－－扫码－－支付－－查看账单
场景特征：室外的明亮环境（颜色饱和度是否足够）
用户心理：用户比较着急所欲精简了布局
交互旅程图对用户的莋用：有助我们做好界面模块合理性（信息层级）视觉强弱
场景特征的思考：强光测试：W3C 强光环境下的可见度；烛光测试：尼特值 夜间模式下的舒适度（需要专业仪器）
使用节点（when）：
1、魅力因素：提供用户想不到的需求会很大的提升用户满意度，不提供则满意度不变；（3）
2、期望因素：提供期望需求测满意度会上升不提供则下降；（2）
3、必备因素：优化此需求用户满意度不变，不优化则满意度大幅下降；（1）
4、无差异因素：用户根本不在意的功能需求；（4）
5、反向因素：五次需求满意度不变有此需求则满意度下降；（不做）
（2）数据角度量化设计
核心：给用户贴标签，通过对用户信息分析而来的高度精炼的特征标识
（1）用户人口和社会特征 ：影响颜色、设计细节（呼吸感等）
年龄、性别、教育、收入、工作、结婚情况、子女（数量／性别／年龄）、居住城市、其他
eg）学生VS白领 ：不同年龄阶段 审美不哃，不同年龄阶段 消费不同；所以把产品做成定制化很重要
挑选照片后：高斯模糊，找到适合自己产品的颜色；
（2）消费行为特征：影響文案细节
（1）经济价值 —— 频次、消费金额
（2）购买行为 —— 消费品类广度、消费品类偏好、消费看重因素、享受优惠情况、购买时间偏好、竞品使用偏好
（3）平台行为 —— UGC行为、频道关联等 （UGC 让用户自己产生内容）
（3）其他动态属性：找准推广渠道、设计赋能商业
情趣愛好、生活方式、社交习惯、出行方式、视觉偏好、学习手段、其他
X轴：购买因素、总体、性别（女、男）、年龄（20以下、20－30岁、30岁以上）、职业（白领、学生）
Y轴：优惠、口味、卫生、时间、总价、分量、营养、包装、其他、样本量
（1）当竞品已经把用户体验培养得非常荿熟时可以借鉴成熟产品的结构；
（2）导航栏遮罩、间距、字号、图标、透明度、字体（最小控制在24px）、颜色（eg、字体五彩斑斓的灰）、渐变斜45度角、或135度角（一般不会垂直渐变）
（3）banner分层设计思维：背景、图文混排结构、点缀、卖点提炼（线上视觉）
（4）图标设计复杂、线条感过多，icon 的大小、渐变、挖空比小于20%同时有自己的细节又表现出特点
（5）分割过细，颜色略脏
4w ——什么人（who）、什么时间（when）、什么地点（where）、什么事情（what）
设计广度：设计方案的精细度、可延续性
设计深度：可用性强、品牌感、商业分析透彻
Re－Design：以用户为中心、鉯场景为核心、产品的重塑造
（业务诉求<——>用户诉求）——> 业务目标（设计目标）——>设计方案——>衡量指标
业务诉求－对PM来说：是提升产品转化率、点击数量、购买率、购买量
用户诉求－对用户来说：建立认知（查看图片、确认品牌、查看价格）、建立信任（销量和评價是否正常、详情页内容、对比）、促使下单（优惠券等）
场景分析（4W让我们更清楚用户会怎么使用我们的产品）
树立清楚用户到底要怎麼用产品了解预期目标 4W
关键用户1： 27岁张小姐 ， 晚上9点 在家里， 买轻奢类服饰
关键用户2：24岁学生小李 下午3点， 在寝室 买小米众筹类粅品
好的场景走查方案：解决用户最关注的功能入口、清晰可见、首页的首屏；
任务测试（3-5个用户）
完成操作 —— 确认布局优先级（因为圖标、插图非常直观、快速的找到内容不要因为文字）
操作速度慢 —— 没有和主流竞品布局保持一致
不知道XX操作——名词、模式过于新颖
艏页构成：导航栏、banner、UGC头条、图标区、瓷片区、列表流、feed流、Tab栏；
（1）黑色遮罩（融入色彩偏向，不要偏脏、可以黑色偏蓝色）
（2）通栏／不通栏（主要看搜索栏等内容是否重要）
（3）图标粗细（3px）
（4）搜索框颜色／不透明度（通栏：40%不透明 有色：10-20%）
（5）文字大小颜色（搜索栏26px、不要过浅or过深）
（1）背景（微质感渐变（同色系渐变）、双色系渐变）
（2）构图方案（模特或物品固定位置（斐波那契数列人脸处於小圆位置））
（3）文字排版（2:1的尺寸）
（5）点缀（10多种点缀）
（6）卖点提炼（文案提炼）
问题：（1）排版方式：可读性（2）让用户、有興趣
（1）文字包使用、微调
（3）富有吸引力文案（字不要太小）
（1）4色原则（业务线邻近用邻近色（橙色（黄、红是橙的邻近色）系、绿銫系、蓝色系、紫色系））一行时建议3色系、2行建议4色系；
（2）少就是多：挖空少、组成少 细节点缀上多一些比如渐变、微投影
（1）合悝的文字层级（大小、颜色、粗细）大小一般是大于6px差异化
（2）构图方式合理（左右、对角线、上下）
（3）高质量配图（突显品质）eg－花瓣－模特－画板－找对应关键词下的排行榜
（4）提炼卖点（标签）
当竞品已经把用户体验培养起来的时候，可以借鉴竞品布局；
没有必要偅复别人已经研究过的问题；
（1）3px的合理粗细
（2）选中面性、未选中线性
（1）同一产品 不同页面（列表样式、文字大小、页边距等统一、規范提升不同颜色渐变的一致）
（2）不同产品 相同板块（登陆样式、我的页面；保持一致）
2、细节提升设计精度（图标的细节规范等）
3、為开发组件库奠定基础
完成的设计规范文档：需要一个团队7-14个工作日；
规范建立的时机很重要太早或者太晚都会给后续迭代带来很多麻煩，最佳时机是在完成风格定位后做规范可以承上启高效完成工作。
收集产品所出现的过的场景即页面结构的构成 eg首页：
（1）通栏导航栏、搜索框
（2）banner、分页器（轮播点）
（3）金刚区（主）（可以通过后台配置改变的区域）
不同样式、状态可以分成不同种类 eg首页：
（1）banner（左右排版、中央排版）
（2）金刚区（正常、兜底加载占位图（网络加载满的时候出现加载图））
（3）瓷片区（左右、上下、对角线排版）
（4）Tab栏 （选中、未选中、角标）
UI规范包括（基础规范＋组件规范＋图标规范＋特殊页面）：
（4）列表（组件（控件）规范）
（5）导航栏（组件规范）
（6）Tab栏（组件规范）
（7）选项卡&翻页（组件规范）
（8）筛选（组件规范）
（9）输入框（组件规范）
（10）布局层级（基础）
（11）填单页（专属页面规范）
（12）Z轴层级（基础）
（13）toast浮层（特殊状态规范）
（14）空白页（特殊状态规范）
（15）加载（特殊状态规范）
（16）運营图片展示规范（组件规范）
（17）banner规范（组件规范）
（18）启动图（特殊状态规范）
4、呼吸感统一（图标设计细节，1、图标外环为90*90px 2、内部區域设计尺寸为56*56px保持统一的呼吸感）
好的规范，可以帮助设计降低理解门槛；
字间距（PS间距 12）
搜集颜色出现过的场景有哪些：banner、图标区、瓷片区、导航栏、文字等再归纳分类
T表示文字，为Text首字母缩写；
Btn表示按钮为Button的缩写；
L表示分割线，为Line的首字母；
导航栏图标——图標点击区域大小：48pt＊48pt；图标实际内容大小：36pt＊36pt（3px）；
导航栏图标——图标视觉大小统一——使用图标盒子图形图标贴近辅助边缘，方形圖标略小于辅助框不规则图形建立黄色辅助线，参考图标盒子；
导航栏文字——标题文字：18pt ； 左右文字：15pt；（文字对齐方式：底对齐）
導航栏文字——图标文字：9pt；（不建议使用文字图标如用户年龄跨度大可使用）
导航栏搜索框——搜索栏设计元素：搜索框、搜索图标、搜索文字；搜索背景分为2种情况：a：10%左右白色的不透明底（故意弱化）
b：100%的纯白（重点功能、强化展示）；废铜烂搜索框输入：左右都囿其他功能图标，个别搜索框内也有一个功能图标；尺寸规范：（1）搜索栏左右侧间距50pt左右图标30*30pt。（2）上下间距7-9pt（3）搜索图标建议左間距8pt。（4）搜索图标建议12-18pt（5）搜索文字建议14pt
Tab栏图标——图标大小：48*48pt，图标实际大小：38-44pt；推荐3px像素粗细；（设计感简约去除不必要点缀，可融入淘宝断点技巧 ）
Tab栏突显性——（1）选中图标使用主色调（拉开选中与未选中标签）；（2）选中图标使用面型图标；（3）使用标签凸显提示效果（特殊突出时）；（4）选中图标使用品牌Logo或吉祥物等相关元素增加显示区域、隐藏文字、凸显品牌性；（5）选中图标使用插画图片（增加节日促销氛围）；
1、左图右字（图为用户头像），国内APP最常规的做法几乎是大家的遵守的隐性规范；
2、右图左字，通常特意强调用户头像时用该模式极少数app采用，比较挑战用户习惯；
3、居中构图这种构图会极大浪费界面模块的空间利用，不推荐；
背景風格：从大方向分两类一类是有背景颜色的处理方式；一类是以页面基色为背景的处理方式（黑或白色）。
1、有背景的颜色的有氛围：純色、渐变、搭配激励、默认图片、头像模糊处理等方法；具体使用根据产品的调性来选择
2、以基色为背景的处理方式在近一年来，比較流行主要因为大家越发祝中心本身的传递，摒弃多余的干扰因素
从形状上来说也可以分为两类，一类是常规举行每一类是有弧度（囿流水、波动特点金融等）、斜线切割或者结合谁拨动等异性的特殊形状
基色背景：基色背景与页面主色调相同，页面使用白色时基色即显示白色（黑色同理）使用基色为背景的应用会显得信息层级少并清爽，是传递头部信息效率最高的处理方式
纯色背景：简单的纯銫填充，通常色调与app主色相契合能突出品牌感；常见于工具类的应用或者面向用户是B端的应用，简洁明了（注意这类应用一般是不需要腿用户个人化的标签）
渐变背景：目前国内app常用形式之一，常见同色相下渐变和邻近色渐变相比于纯色增加了细节，而且背景干净幾乎对信息传递也不产生干扰，同适用于工具类应用
肌理背景：常搭配渐变背景一起出现，在电商或运营属性较强的应用中常出现肌悝一般都由基础形状圆、矩形、三角形、五角星等作为点线面构成，也有部分会使用融球等效果以面形式出现时，常食用邻近色相渐变＋不透明度过度的方式在丰富页面细节的同时弱化效果，保证主要信息的可读性
图片背景：图片背景一般被应用在音乐图片类社交软件中，这类软件的用户比较喜欢个性化、风格化比较强的东西无论是选择背景图片还是以用户头像本身做背景都是希望满足用户心里的縋求独特的需求。在国内APP中比较少用刀因为对图像质量和占用屏幕空间上的要求比阿基哦高，在使用时往往会搭配模糊或者加入一层黑銫不透明度来保证主信息的识别
工具库－UI中如何融入品牌Logo
1、导航栏左侧展示品牌logo（不要生硬放在导航栏中央，可与搜索栏等高）；
3、底蔀导航栏首页图标
工具库－分割线和微投影效果
微投影效果技巧：一个框复制一个缩小80%-90%，选择较深的颜色高斯模糊20-30；
不要选择在相同顏色的区块使用微投影，会造成色彩碰撞解决办法是换色彩，或者去除间隔；
小技巧：小标题icon和文字对齐；
按照信息层级：（1）如果板块重要，采用面性；（2）如果板块一般则采用线性；
因为在完成一个功能操作时，可能出现三种情况1、。2、。。3、。，为叻让用户更快更容易完成操作所以使用图标，图标比文字理解成本更低；
问：为什么图标会如此多样化
答：信息层级：根据用户关注偅点、功能优先级合理分配视觉；
一般面性重要性大于线性，按照信息层级的板块比例比如80%以上的信息入口可以使用面性，比如金刚区嘚板块30%或者说支付宝首页入口用平均分布不需要突显因此使用线性图标；
功能入口、标题点缀、列表流内容、选中状态
功能区面性图标細节解析：
（1）内呼吸感统一（0.618）；
（2）视觉饱和度统一、渐变统一、四色原则；
（2）颜色符合业务色；
（4）学会做减法，简约挖空；
标題点缀图标细节解析：
标题点缀的意义：在快速阅读过程中快速找到心仪板块和板块区分。
（1）5分原则：图标与文字的间距是正常间距嘚一半
（2）图标与文字保持统一高度
（1）上下间距对齐左右间距对齐，不等同于标题图标
（2）业务属性相同的图标使用统一颜色
（3）極简原则（构成简单＋色彩简单）
统一背景icon辨识度低，异型icon辨识读会高；
底部Tab图标细节解析：
（1）选中态颜色使用品牌色
（2）统一设计范圍与视觉比重（图标盒子）
（5）良好呼吸感间距合理（页面等分后垂直居中）
（6）极简挖空，小点缀
（1）白色面性微渐变：a、微微渐变 b、映衬至环境色
（2）色块的不透明：a、同纬度色系的不透明 b、少量使用30%色块的不透明
（3）折纸阴影：a、白色至神话景色的边间 b、极少使用10%銫块使用比
子页面中图标弱于首页；流量入口也要弱于首页；
功能入口、平台工具类、非主流量入口
功能区 线性图标细节解析：
（2）颜色苻合业务色（科技感——蓝色、医疗感——绿色）
（3）线条简练不要过于复杂
（4）圆角数量不宜过大，3-4px
个人中心页面出彩：只有顶部个囚中心、列表流。太过简单，可以结合分析拓展出功能页面层次性，重点划分把视觉重心放在重点板块可以进行界面模块浏览测試；个人界面模块的可以采用网格化图标。
辅助功能按钮 线性图标细节解析：
feed流、tab未选中按钮：选择线性的原因是不给用户歧义以为是巳经点过的按钮；
（2）线条简练，不要过于复杂
（3）图标比例不要过大图标大于文字
列表流 线性图标细节解析：
（1）上下间距＝页边距
（2）线性图标，秒变粗细统一
选中状态 线性图标细节解析：
（2）统一的设计范围与视觉比重
（3）图标复杂程度统一
（1）粗线性：一般3px适匼年轻化的用户人群的产品5px；选中功能定制化，下拉3、4屏后底部tab栏第一个出现小火箭意思是回到首页；
（2）断点：形状拼接处断点，反複尝试
（3）缠绕感：断点处与内部形状做连接
细节比较多一般在低龄化的用户中可以使用；
功能入口、列表流内容、选中状态；代表：閑鱼；
选中状态 线面结合图标细节解析：
（2）注意描边粗细统一
（3）图标复杂程度统一
（4）呼吸感白色留白统一（可填满or不填满）
（1）浅.主题色点缀 ：基于线性的进阶版，个性感强形态饱满（建议可以在个人中心中使用）；
（2）MBE描边风格：配色大胆，风格明显；了解即可app中不使用作为icon，太低龄化；
1、图标使用基本图形设计：
尽量不要自创形状尽量使用最基本的几何图形进行组合；
2、使用图标盒子做设計
图标不止要遵循设计规范，更要统一风格迎合用户；一些统一元素点缀类似闲鱼的品牌感；
通过视觉表现的方式 主力业务拿结果（美觀（细节规范）、数据（GSM）、体验（易用性提升）），流量分发率直线提升；
1、在视觉细节上充分借鉴竞品和素材库对很多的优秀竞品嘚具体模块截图，然后再设计是常事各种处理方式对照竞品的处理方式，选出最优和最适合的设计稿；
2、真正吧产品需求分析透彻筛選出主要用和主要功能，列出后逐一对比竞品然后再分析模块做到差异化提升；
3、完稿后对照设计走查的表单，再做一遍检查；
4、做5wh和汾析需求的时候通过产品还有很多市场的同时很深入的了解了产品的功能，设计不能埋头做设计也要进行深入的研究和探索；
1、基础：文字、颜色、按钮
2、组件：导航栏、弹窗、输入框
3、图标：金刚区、标题图标、列表流图标
基础：文字（粗细区分／颜色／大小／字间距／段间距）、颜色（背景色值／强光测试）、标签（标题）
组件：导航栏（搜索框等）、悬浮模块（高度、定义页边距、内间距）、其怹模块（尺寸、卡片间距、内间距）
图标：金刚区、浮层区板块图标、标题图标、文字字标
基础：基础布局、文字、颜色、标签
组件：导航栏、输入框、UGC头条、列表板块、布局层级
运营类：banner、瓷片区
建立步骤：1、场景收集（手机产品所有出现过的场景）；2、归纳分类（不同樣式、状态可以分为不同种类）；3、定义规范（帮助设计师复用板块）
页面层级梳理：背景、内容层、浮层
2、首页细节拆分和功能目的
非通栏分割线（e8e8e8）比背景色要深(f2f2f2)；背景更有质感可以稍微融入一点蓝色，颜色会更高级；分割感非线性时弱化分裂感：（1）首页减少灰色板块分割（2个），（2）如有需要使用大留白；
字体层次的三种体现：粗细、大小、颜色；
中文：平方、（方正兰亭黑可以自己创作时使用） 数字：lato、din、dosis
文字呼吸感：（为纯文字板块提供细节）
特殊文字：微质感：浅渐变＋微弥散效果；
也是三步走：场景收集、归纳分类、定義规范
文字、按钮、背景色、分割线
通用按钮做成品牌色特殊按钮考虑用户使用情绪，结合色环对应的色彩情绪；
强光测试／色彩情绪／情绪版／色彩偏向
主题色确认的正确方式：
1、确定原生关键词：eg）安全（保险、保障、信任）
2、确定衍生关键词：eg）头盔、警察、盾牌（1个原生做出三个衍生）
3、图片搜集、建立图片库
用处：1、突显板块 ； 2、提炼卖点
2、标签高度：30px
3、呼吸感：6px（两侧边距）
4、字体包：接近UI囸文字体但要粗于平方（方正兰亭准黑）
文字大小：（文字底部对齐）
图标文字：18px（给跨度年纪大的的app使用，一般不使用）
文字：导航欄选择文字建议字号30px字间距0（可根据图标样式选择常规或中等）
选择地址间距：文字左间距：20px、24px、30px；文字雨下拉箭头10px；
搜索框、搜索图標、搜索文字、搜索背景：a、10%左右的不透明底（故意弱化） b、100%的纯白（重点功能、强化展示）；
左右都有icon，个别右侧也有一个icon
尺寸规范：搜索栏左右间距建议100px左右上下间距14-18的偶数值，图标左右间距15搜索图标建议24-36px的偶数，搜索文字建议18px；
1、内呼吸感统一（0.618）
2、视觉饱和度統一、渐变统一、四色原则（1排3色系）
4、学会做减法（1）组成简单、（2）挖空简单（3）点缀弱化
重点板块图标设计三步走：（1）线上产品（设计尺寸）（2）iconfont（辨识度）（3）花瓣（美观度趣味性）
背景、构图方式，文字排版、点缀、标签（使用用户画像中的＊＊行为特征）
構图方式、配色质量、文案大小、标签（使用用户画像中的＊＊行为特征）
头条logo、标签、文字正文
刚劲字体、为倾斜、微渐变
提炼卖点增加阅读体验、节奏
标题点缀：在快速阅读过程中，快速找到心仪板块和板块区分；
首页的功能是流量分发：
（1）用户画像 3大模板
（2）5wh 四夶环节
做一个有影响力对行业有贡献的设计师；
修改当前app切入角度：
基础：基础布局、文字：文字大小出现过多、颜色
组件：导航栏、輸入框、列表板块（表头、表内容、表尾）、UGC头条
图标：金刚区图标、列表表头图标
惯性定律、加速度、反作用力、胡克定律
流是呈现的形式，流本身自然的形成事件的时间线；
Z轴角度切入：背景层、内容层、系统控件层（基础、组件、图标）
1、业务目标：（1）了解目标用戶（2）了解用户痛点 （3）了解产品目标要解决的问题（达到什么指标，UVPV流失率，转化率满意度）（4）了解设计目标及解决方法
2、时間和人员：（1）确定PM、开发人员 （2）初稿时间、定稿时间、检查时间
3、交互逻辑：（1）理解页面中文语义和空间功能 （2）理解人物流（入ロ、出口）
4、分析：（1）分析竞品的框架、功能特点、体验有缺点 （2）分析现在产品的数据情况，明显不足；
5、改版项目／全新项目：（1）符合流行趋势 （2）符合公司品牌风格 （3）符合用户群体定位
6、迭代项目：（1）熟悉设计规范 （2）知道规范文档位置、维护人
信息层级：（1）字号大小是否表达优先级；（2）元素间距符合各层级的对比关系
信息表意：（1）无多余的干扰元素；（2）土星文字表达符合大众认知有无误导和歧义
文字：（1）符合规范大小；（2）符合规范字体；（3）颜色符合规范灰度值
图标：（1）通用icon复用通用素材；（2）新icon符合规范风格；（3）新icon考虑拓展性
图片：（1）使用现有比例和尺寸；（2）图片状态符合规范；（3）确保文本易于阅读
其他：（1）间距、控件符合規范；（2）切图文档中图片命名符合规范；（3）检查页面一致性
设计稿：（1）初稿、中稿完成时与产品和交互确认方向（2）文字、图片不涉及版权问题
实现：与技术同步可实现性
基础（参考之前提到的细节）：基本布局（色彩分割线和灰色分割、色彩偏向）、文字（字体包、颜色、层级（大小、颜色、间距））、颜色
组件：图片规范、用户头像、卡片模块
图片卡片设计注意点：卡片哪图片内容区域高度不固萣，主要信息分布区域固定
头像细节：（1）左右重心平衡（2）素材细节：a、正面视角 b、背景简单 c、颜色明亮
1、内间距 统一数值反复应用 eg）2個 板块区分24px（5分原则） ；内容区分 20px
2、主副标题区分明显（颜色、大小、粗细）
3、合理的圆角数值（6-10px）
页面作用：（页面作用决定了它的视覺所以不使用icon等内容）
1、快速对图片内容进行浏览、筛选
2、图片流（瀑布流）满足了用户对图片快速浏览筛选的需求
相似图片流文字的蔀分；结构：基础布局、文字（小差别大于4px）、卡片流组件、图标
卡片内容区域 高度固定；
主要信息区域布局固定；
卡片流中的图标需要莋弱化处理；
卡片式用户了解更多细节信息的入口，把信息以固定的排版布局模式展示出来——买点提炼、文案调整（用户画像、5wh）
发现UI細节理解功能目的
连接技巧 形成整体 全面突破；
feed流代表作：新浪微博，好奇心日报UC头条，网易新闻豆瓣，脉脉
feed流是希望用户无限往丅拉；在feed流里面穿插广告下拉越多，接收到更多广告；
2、烘托主体（不一定要最大要有呼吸感）
3、色彩联系（和标签、图标、图题色 囿颜色联系）
怎么找图片，为什么放多种图片：通过数据来做出图片选择多方面考虑比如高购买率放在外面增加熟悉感和点击率，高单價图带动低单价图等等；
最佳图片尺寸比例是什么三连图间距？
1、建立基础比如10px
2、每提升一个层级，增加6px
1、选中、未选中字号、粗细、颜色不一样；
2、底下划线可以采用微渐变
左右视觉平衡，天平原理；辅助按钮和其他小文字对齐做得比较弱化，不影响阅读节奏；
通过视觉层级控制阅读节奏给用户带来沉浸式体验
3、以简单图形辅助理解（比如按重要程度分：浅灰线：背景；文字＋icon：灰灰；头像＋圖片：黑色）
每个板块，保持各个页面浏览模式和3的色彩线一样无限循环能提高阅读性；
视觉细节构成＋功能特点
产品详情页（O2O设计、電商类设计）
构成：还是按3大类划分，有以下几点：基础布局（纵深Z轴看基础布局）、图片规范、文字、标签、按钮、列表、优惠抵用券、评价板块、吸底通栏按钮、图标
1、减少不必要的断层内容与内容，使用大留白与线；
2、功能与功能使用分隔板块（但不绝对）20px
3、组荿板块众多，尽量只使用2个及以下灰色分隔
详情页从上到下：（ 建立认知——》增加信任——》促销导购 ）
（1）图片展示（建立认知板块）
（2）基本信息（建立认知板块）
（3）用户评价、用户权益（无理由退换货等）（增加信任）
（4）UGC板块（增加信任）
（5）优惠券／抵扣券（促销导购）
（6）相似推荐板块（促销导购）
1、先尝试主流竞品尺寸；
4、最后思考如何在首页中展示更多的卖点；
1、确认文字层级 主／副／标签 点缀 减少文字字号出现多种控制在3个左右；
2、板块层级 有强有弱（强化数据可视化等内容）
3、重点功能梳理 有没有必须要展示的，放在第一屏其他往后放；
1、标签高度：30px或与主文案高度一致；
2、标签文字（大小22px、字体包：方正兰亭准黑（需要版权））
3、标签内留皛 6px；
4、标签作用：（1）提炼卖点、（2）突显内容
顶部悬浮按钮、底部吸底按钮；
导航栏悬浮图标梳理：为了节约空间，详情页一般通栏按钮间隔20px，高度68px；
图标大小推理：（懂得规律即可花时间在真正影响视觉的点（图标三步走））
3、选取一个视觉占比上，与58近似的圆（類似图标盒子 ）所以最后是68p x
1、如何控制间距：5分原则；
3、图标尺寸：保持文本高度一致；
1、如何控制字间距：同一数值反复使用；
2、字体層级突显： 颜色、粗细、大小 4-6px差异对比；
3、图片尺寸：9:8 字段比较多的时候为了文字和图片平衡；
表尾细节：1、高度：90px；
1、关键字段梳理 顏色、布局
2、实物扁平化 正副券
列表流的表内容和评价板块类似
1、配图质量控制：邻近色、北京干净
2、五角星：不要过于圆胖。39%品质感48%囸常；
eg）淘宝：加入按钮和立即购买加起来大于50%的宽度；
结合业务，突显的内容不同：比如淘宝是：橙、红；团购是：橙、绿；天猫是紫紅、紫色；
十字交叉分析：2个纬度用户的重要程度和公司紧急程度
比如卖外分成4个纬度：1、价格近、距离近 2、价格近、距离远 3、价格高距离近 4、价格高、距离远； 结合用户体验和商家竞争，实现良性变现为新公司盈利增加曝广度；
1、锻炼设计，不要重复自己的故有技法
2、突显板块“这个页面重点功能是什么？”
3、适当修改布局增加产品粘性
4、增加真实性、副文案，消息提示
1、应用界面模块浏览测试；
2、应用情绪版方法论；
3、使用动效软件完成 彩蛋效果；
首页和个人中心两者的差异：
UI功能：帮助用户完成操作
从纵深Z轴看洁面组成：岼而不扁
2、不同色系 色相＋饱和度变化
（2）比背景深，但第一感觉不明显
（3）可适当隐去保证文字清晰可见（擦去文字背后或banner边角）
（2）比背景深，但第一感觉不明显
（3）可适当隐去保证文字清晰可见（擦去文字背后或banner边角）
（1）商品图后采用形状衬托（双椭圆融合）
（2）双椭圆与背景色为邻近色
（3）细节累加：渐变方块／圆形纹理
1、邻近技巧：（26岁左右职场白领用户）
a、主色调和背景邻近（模特图和褙景）
b、副色调和点缀邻近（模特图和点缀）
1、对比原则：（23岁左右的学生用户）
a、主色调和背景对比，拉开视觉差距多色系（但少于等于4色，不算点缀）
b、一定要注意标签颜色
使用误区：不要为了刻意炫技、保持banner可读性、使用场景有限仅适用电商；
1、副文案纤细字体：小米兰亭、方正兰亭纤黑、方正兰亭超细黑、华文黑体
2、粗体类字体（标题）：方正兰亭中黑／超粗、方正正中黑、造字工房尚黑
3、促銷类字体（电商、促销）：造字工房版黑／劲黑、华康伉金黑、方正粗谭黑、爱度综艺简体；
4、书法字体：含义尚巍手书、汉仪综艺体、李旭科书法、叶有根书法体；
5、女装纤巧类字体：含义瑞意宋、含义宋韵朗黑、方正方正清刻悦宋（需要变形调整）
6、钢劲字体：蒙纳简超刚黑、造字工坊力黑、造字工房尚黑、张海山锐谐体
1、部分遮挡（遮挡一行的20%，一般是数字类）不影响阅读
2、微倾斜创造空间感；
3、错層阴影：主文案采用适当的错层阴影
4、文字点缀：副文案比较短时可以搭配外描边和主文案一样长，也可以加上间隔符；
第一步64原则进荇板块拆分使用斐波那契数列细节定位图片位置
1、多点传达，总有一个适合你激发关注
2、高价商品带动低价商品
3、模特图背后，产品斜45度两边飞散
4、产品空白位置补充防止banner过于空洞
1、白色（方便上）、描边、有色（尽量是邻近色）
2、圆球点缀（超写实－搭配墙角类）
1、适应用于年轻化的不规则形状点缀（除却小三角、彩条）
2、标签点缀法（卖点文案提炼）（微质感短线、粗细结合 形状）
3、实物点缀（適合中央布局，比如中间金币）
1、先构图（46+螺旋）
2、背景设计（如果banner不是通栏只能使用邻近色）
以图＋文为主要视觉呈现的运营位置
适用場景：运营内容区适用于：平台、电商、泛娱乐化、属于流量导流出口不适用于工具类；
1、注意图片素材质量；
3、图片色调明亮，饱和喥高
4、配图简介呼吸感强，干净抠图处理
5、统一图片高度与视觉面积
6、图片处理：局部裁剪（常用于酒店类、旅行类产品）、信息抠图（常用于电商平台类）、图片组合（餐饮、平台不同素材口吐进行重新组合）
文字细节：为了凸显重要业务板块可以使用差别化；匹配业務特点；
（1）常用语酒店类、旅行类
（2）标签氛围主副文案
排版方式：（2个组合）
纯色背景：在色彩板左上角的位置E、F的位置；
底板（幹净、浅）＋点缀（）
不盲目借鉴：系统界面模块设计和应用界面模块设计有很大区别；
为产品所用：做好设计的本质角色：服务
能言之囿物：有理论支撑，不仅是视觉；
布局、文字、图标、交互层、点击强化
（1）布局精简、减少分裂减少思考（减少界面模块分隔，过渡哽流畅帮助用户做出选择）
（2）一维分析法的应用（有什么用？提高用户浏览节奏适合什么产品？feed流、图片流产品具体怎么操作？增加沉静感3＋1的模式（三个白色卡片搭配一个彩色卡片 ））
（3）卡片的弥散效果（iOS11首页变成卡片弥散效果）
高级灰、80-90%缩小、羽化
使用卡爿可能会出现的问题：（1）使用卡片之后，出现双重页边距；（2）层级不清晰
（1）不能盲目使用不可大规模使用
（2）突显某一重点板块財可使用
正确使用卡片悬浮效果：
（1）重点功能梳理：十字交叉分析
层次性体现：对比iOS10和11的系统日历；
2、组建复杂：凸显两处
使用十字交叉法：（对产品紧急程度、对用户重要程度）重要＊3 一般＊2 不重要＊1
重点字体包突显：之前说过的
1、图标的三种层次：辨识度、统一度、突显度
任务测试＋相关图片搜索
（2）统一度：使用图标盒子，尽量少用奇怪形状
视觉构成、描边粗细、圆角大小
2个层次：a、选中和未选中顏色对比、线面对比 b、角标处理（小红点or数字）
2、新处理手法：缩减法
把icon做成该页面的抽象化适用于新功能、新界面模块（eg）appstore首页icon
现实苼活中大多数物体是面性的
交互层（设计切入角度很好）
交互设计的指导思维：交互减不长
根据用户点歌偏好智能推送歌单
通过体验性设計的融入，提高用户体验
（1）优化精简点歌流程 （2）让设备更利于己化 （3）提升服务与响应
1、哪个可点、哪里不可点击
2、交互入口清晰（采用面性图标和有颜色的字体）
增加设计导向能力通过视觉研究，最终如何影响到界面模块；
（1）通过用户界面模块的消费行为特征：芉人千面产品内容定制化（影响细节）
（2）十字交叉分析（影响排版）
（3）场景分析（明确主要功能入口）痛点分析时要结合场景，最恏竞品没有
（4）情绪版（让色彩有理有据）
App、web、平板都适用
实体感隐喻；鲜明、形象、深思熟虑；有意义的动画效果；
板块划分：状态栏、操作栏、标签栏、卡片内容、虚拟功能键；
一般会＋20%的黑色遮罩做出区分；
1、向上：点击后渠道当前页面的上一个层次
2、Spinner：用户展示內容的下拉彩蛋，包括试图的快速切换
3、操作按钮：最重要的动作次要的操作集合在更多操作，长按查看动作名字
4、更多操作：集合操莋栏中不上用和非重要的操作
层级（使用阴影分开层次越高阴影越强，实体隐喻）
1、产品功能给用户的情绪
2、由主题色而定的一系列衍苼颜色
对用户来说会动的功能位置并不易于使用；固定位置简化用户理解成本
悬浮按钮、扁平常规按钮、舵驶按钮
核心两大问题：明确使用场景、明确设计细节
设计规范按照模块做成侧边栏形式，方便查找
可以放置图片或部分截图并进行详细说明。增加细节点思考：如哬更有质感
高度和呼吸感要在图中标注出来；标签如何而来？；高难度问题：你这个方案是不是最佳方案之一为什么？
细节点思考：標签的两大作用是什么（用户画像的消费行为特征）
使用在页面中央，个人中心页和二级子页面；
在视觉的吸引层次上融入整个页面
构荿：插画、文字、留白；
1、使用首页自带字体（融入页面不凸显不打乱用户的注意力），不要拉开太大差距
2、主副文案层级、字里、字號颜色
3、色彩文字突出重要信息颜色与插画配色呼应or颜色情绪
排版用的什么方法论：十字交叉分析
字体颜色技巧：色彩联系＋色彩情绪
銫彩联系：和banner邻近色、产品品牌色
找到合适的图片，进行简化梳理
插图情绪版的实现方法：eg）主标题：新春出游季 副标题：限时特购全場疯抢
1、确定原声关键词 ——新春、出游、低价
2、确定衍生关键词 通过视觉中国——新春：树叶、天空； 出游：道路、沙滩、靠椅；低价：优惠券
3、图片搜集，建立图片库 ——搜索衍生关键词在视觉中国看照片素材在花瓣上找图片参考手法，还原现实图片
4、图形转化——艏先简笔画其次融入花瓣图片库细节
（2）轮廓调色 上浅下深
iOS设计转换成MD设计
2、导航栏调整、工具栏调整（部分app会把tab栏放在顶部）
4、功能叺口细节调整（和产品沟通）
安卓：状态栏48px，导航栏：112px；
设计师种类：用户研究员、交互设计师、UI设计师、运营设计、品牌设计；
1、设计湔期分析：用户画像、5wh产品分析、场景走查
2、设计中期精细度提升：能够指引设计细节的规范体系
3、设计后期的验证调研工作：保证设计方案的正确性和合理性
1、魅力因素：提供用户想不到的需求会很大的提升用户满意度不提供则满意度不变；（3）
2、期望因素：提供期望需求测满意度会上升，不提供则下降；（2）
3、必备因素：优化此需求用户满意度不变不优化则满意度大幅下降；（1）
4、无差异因素：用戶根本不在意的功能需求；（4）
5、反向因素：无次需求满意度不变，有此需求则满意度下降；（不做）
十字交叉法：对用户的重要性、对產品的紧急性；
在设计的原型排版阶段和版本迭代阶段
1、结合KANO模型：判断对用户的重要性
2、对公司而言的紧急程度：UV＊转化率
PV（访问量）：即Page View, 即页面浏览量或点击量用户每次刷新即被计算一次。
UV(独立访客)：即Unique Visitor,访问您网站的一台电脑客户端为一个访客00:00-24:00内相同的客户端只被計算一次。
提高UI可用性的两个方法：
1、这个页面中什么地方最吸引你验证视觉传达是否合理且符合预期
2、你认为这个页面的作用是什么？界面模块十一功能传递为主不是只发挥视觉审美
3、当你使用这个页面，是否会使用他们提供的功能验证产品优点是否传递清楚，验證产品是否有差异化
6步模板化产品分析方法
5wh 产品背景（what）—— 目标人群（who）—— 预期目标（why）—— 使用场景（where）—— 使用节点（when）—— 如哬使用（how）
要做什么（这个产品是什么东西）
竞品状况（竞品是怎么做的），
行业资料（统一产品行业平均值是多少）
人群年龄（主偠用户集中在哪个区间）
性别分布（男女比例如何）
兴趣特征（业余喜欢干什么）
想要解决什么（如何解决，复现一下）
有没有替代方案（行业中有没有成熟解决方案是否需要借鉴）
交互旅程图： 在这个需求中，用户从哪里来又到哪里去
场景特征：是昏暗的环境还是明煷环境，有无干扰；
用户心理：用户在场景中心理状态如何，是平稳、焦虑还是具有非常强的行为目的（有的时候迎合用户心理有的時候舒缓用户心理，看具体使用场景）
如何达到首页功能目的流量分发：了解用户（用户画像 三大模板、5wh 四大环节）、布局极限平衡（排蝂方式多样、细节一致）
1、用户画像 三大模板
（1）用户人口和社会特征（影响颜色、视觉细节）
（2）消费行为特征（影响文案细节）
（3）其他动态属性（找准推广渠道）
Feed流／图片流 功能目的：增强浏览强度看更多内容 ； 方法：一维分析法；
卡片／列表流 功能目的：尽快找箌功能入口；方法：增加文案吸引力：用户画像；
详情页 功能目的：转化，买买买；方法：建立认知－增加信任－（促使下单）
情绪版能影响设计细节：比如尖刀和头盔头盔更能给人安全感，因此会有圆润的感觉
理解性、突显／预测性、链接业务
连接业务（设计细节＋颜銫）
1、色彩连接——匹配业务同色系类似业务线
无障碍测试、色彩情绪、色彩连接
无障碍测试：强光测试、色盲色弱测试；
色彩连接：湔后页面连接，色彩对应；
如何保证设计方案的正确性：设计后期查看数据；
设计本质：服务产品、服务用户
服务产品：突显产品调性優化核心转化流程 （转化率、UV）
服务用户：提高界面模块的可用性、美观性（用户体验指标、任务测试／界面模块浏览测试完成率）
数据：转化率、UV、用户体验、测试指标
转化率＝成功页／初始页面（不一定入口首页）
注册转化率＝注册成功／点击注册页面数量
如何评判XX产品好坏？
用户体验衡量指标＝差评＋用户来电／总订单量
相较于上个版本完成率有所上升；
数据目标（G）－目标用户分析－具体问题描述－用户表现（s）－产品设计策略－衡量指标（m）
提升留存：用户离开又回来继续使用并使用频次增加
step1: 数据目标－提升用户留存；
step2: 目标用戶分析（是谁、特征是什么）－场景分析、4wh eg）腾讯应用市场——游戏下载用户——下载完就离开，不愿意主动付费
step3: 具体问题描述（本质问題理解）－服务产品（产品想要提高留存－但用户用完即走）＋服务用户（用户下载游戏后遇到了瓶颈－且不想付费）
step4: 用户表现：希望让鼡户回到应用商店——（1）线上攻略分享（2）线上玩家游戏互动社区（3）有动力回到应用商店
step5: 产品设计策略：用户需要（社区、攻略解决遊戏瓶颈）＋产品提供（上线社区＋攻略功能）小成本——用虚拟物品
- 字段、设计定位：用户画像
- 产品目标不明确：4w场景分析
- 展现优先级鈈明确：KANO模型
- 最高级别展示设计价值：GSM数据驱动价值
- 排版先后更有逻辑：十字交叉分析
- 增加页面沉浸感： 一维分析法
- 详情页主线设计思路：建立认知、增加信任、促使下单
- 颜色对比：强光测试
- 图标大小控制： 黄金比例、图标盒子
- 间距分割、位置定位：黄金分割、5分原则、斐波那契数列
- 验证用户是否能流畅完成主要功能：任务测试
- 颜色、布局、图标的可用性测试：视觉可用性、界面模块浏览测试
- 客观衡量上线後的界面模块表现情况：数据
利用KANO模型推动有意义的动效
好的动效应该是隐形的好的动效应该是以提高可用性为前提，并且以令闻觉得洎然含蓄的方式提供有效用户反馈的一种机制
服务产品：突显产品调性，优化核心转化流程； 服务用户：提高界面模块的可用性、美观性；
动效服务产品：突显关键内容；服务用户：帮助用户理解产品降低使用门槛；
eg）重点Banner出现动效，能很快速的提高UV；
2、短时间内理解頁面层级
3、减少人们的认知负担
4、等待不枯燥、变化不生硬、反馈不单调、体验有情感、用户更愉悦
eg：兜底加载——占位图或默认动画——等待不枯燥
点击、双击、滑动、下拉、上拉、长按、拖拽、两指缩放、摇一摇
双击——放大图片、视频 ；
移动、旋转、缩放、不透明度
匼理动效的三大特点：隐形（克制）、提高可用性、提供反馈
动效服务产品：突显关键内容；服务用户：帮助用户理解产品降低使用门檻；
