前言
互联网产品首页是与用户进行交流的第一步，首页设计不仅代表着一家企业的形象，还会直接影响公司的业务营收和口碑。
本文将深度解析“小米商城”APP的首页设计，分析B2C模式下的自营电商是如何通过设计打造品牌感，增加用户参与感，从而促进产品的销售转化。
了解一款APP产品首先要了解它的产品定位，从小米商城的slogan“让每个人都能享受科技的乐趣”不难看出小米的产品定位是性价比高的科技类产品。
另一方面，从商业模式来看，小米商城是B2C自营电商，与其他B2C自营电商平台不同的是，小米主打高性价比，以好口碑深入大众，撬动市场，以互联网思维卖产品，把硬件产品当互联网软件产品卖。
由此可见，科技、高性价比是小米商城产品定位的两大关键词。
目标用户
目标用户是产品模式和功能制定的重要考虑因素，小米商城的目标用户可以分为三类人群：
1、米粉用户
这类用户是小米的忠实粉丝，也或许是雷总的粉丝，他们认同小米文化，喜爱小米产品，热衷购买和传播小米产品，是小米商城最有价值的用户群体。
2、科技发烧友
这类用户本身就是科技爱好者，喜爱探索新鲜前沿的科技产品，热衷购买科技类创新性的产品，对于深度发烧友还会专研参数配置，并会在论坛探讨分享。
3、追求小资用户
这类用户追求品质，喜爱有设计感的产品，如果了解到小米有什么产品好看又好用，他们会为了保证品质和服务，选择从官方购物平台购买。
全品类商城与自营商城设计差异
虽然了解了小米商城的定位与目标用户，但还需要从产品的商业模式上去推导设计，比如淘宝与小米商城的首页设计大有不同，原因就是因为商业模式不同，致使产品的设计存在差异。
1、全品类与自营首页设计区别
自营类商品其实是全品类商城的一个分支，全品类商城首页衍生了很多独立平台，所以全品类商城首页设计形式上更注重流量分发，而自营类是垂直领域，所以会更突出商品，并且创造商品卖点，打造爆款。
2、自营类商城设计上注重品牌
自营类商城运营的是品牌，能发展壮大的自营电商都成功塑造了品牌形象，所以在产品设计上突出品牌，会与用户建立信任感，提高转化，同时也能做到与其他电商的差异化设计。
下图所示，小米商城、小米有品、网易严选三款产品，为了能快速与用户建立品牌认知，导航栏都放了自家的logo。
另外，还可以从色调，板式，服务等等各个纬度突出品牌形象，总之在产品设计上要与品牌形象贴合，让用户处处能感知到品牌。
导航栏设计注重品牌
了解产品定位和目标用户以及平台的商业模式，对我们分析一个产品非常重要，这样更容易从正确的方向理解产品的设计，下面我们带着对产品定位和目标用户的理解，开始对小米商城APP首页设计的全面解析。
小米商城-首页解析
接下里我们从品牌DNA、布局体验设计、金刚区设计、登录前后设计、参与感设计等方面对小米商城首页进行解析。
1、品牌DNA
当前小米公司有着非常强大的品牌势能，给人们留下了性价比高、高端、简约、科技、坚持的好印象，这些都可以看作是小米的品牌DNA，因此在设计小米商城APP时，设计需要贴合小米品牌DNA，让用户使用产品时能感受到小米的品牌力。
打开小米商城APP，处处能感受到小米的品牌元素，橘色的品牌色、小米的产品图标等，都在传递着小米的符号，整体UI的设计秉承了小米硬件产品的一贯风格，如简约的风格、高质感元素等，细节上体现品质。
2、布局体验设计
用户浏览电商产品首页，第一屏流量最高，随着往下走第二屏、第三屏...跳失率会越来越高，根据数据统计通常产品第三屏之后流量会大打折扣。
上图的数据并不能代表所有产品的数据，好的设计形式可以影响数据的变化。
如何减少跳失率，要从用户在当前位置的所思所想出发，做好第二屏到第三屏的功能制定和引导设计非常重要。
小米商城首屏最后的位置可以看到第二屏的内容标题，能够起到引导性作用，并且放的是最有吸引力“小米秒杀”和“新品发布”双十一期间增加了运营模块，虽然这两块在第二屏，但看到的同样是最有吸引力的双11促销信息。
引导用户查看内容
另外在不增加运营板块时会发现，小米商城重要板块不会放到第三屏，在第二屏下面已经开始出现精选（猜你喜欢）闲逛区，因为是太多板块用户会感觉首页很乱，不容易对各板块功能形成认知，其次就是随着跳失率的增加，重要板块也会失去好的转化效果。
打造沉浸式体验
多数用户在第三屏时会失去再向下探索的动力，这时系统通过算法给用户推荐用户喜欢的内容，会再次吸引到用户，重塑用户向下探索的好奇心。
用户在“猜你喜欢”版块心态是无目的的闲逛，当用户不想再向下探索时，随时可以侧滑屏幕切换到其他品类，这样也大大减少了用户首页闲逛的跳失率，营造出了一种沉浸式的交互体验。
闲逛区（猜你喜欢）沉浸式体验
同时因为用户在此版块是“逛”的心态，所以设计上采用瀑布流，也可以称为Feed流，这样的设计形式重点突出的是图片，也就是商品本身，参数配置会弱化或不出现，因为用户闲逛时是没有目的的，当一个商品对他吸引后，用户才会主动点击查看详情。
如果用户是有目的搜索某个或某个品类商品时，此时列表流更为合适，因为用户是有目的性的查找商品，他是认识这款或这类产品的，所以必定会开始关注产品的参数配置等，列表流的左右结构，能非常合理的呈现出参数配置等信息。
总结：当用户无目的“逛”时会关注产品本身，所以这时需要重点突出产品图，使用瀑布流更合适；当用户有目的查找商品时，因为已对商品有一定的认识，所以不仅希望看到图片，同时也希望能够直观看到产品的参数配置，这点对科技类产品的展示尤其重要。
3、金刚区设计
小米商城-金刚区
金刚区的图标设计直接用产品来代替，真实的手机、电脑、笔记本等，这样不仅能与众多电商平台的金刚区有差异化，更加能够把入口功能表现的有识别性、直观性，能够使用产品模型作为图标元素，这本身形成了一种优势。
“触碰想象，感受真实”金刚区的图标设计符合小米的设计理念，设计师从图标的设计营造出了贴合目标用户认知的氛围，让用户感受到了归属感。
金刚区图标的布局设计与产品定位和用户特征非常吻合，第一个图标是“小米新品”，对于米粉来说，这应该是最关注的功能入口，关注新品的用户也是最容易购买新品的人群，从产品的角度来讲，新品也是需要大力推广宣传的，所以新品入口放置首位无可厚非。
第二个是“小米众筹”，此功能入口对于追求性价比的用户是最有吸引力的，因为众筹价低于零售价，符合性价比属性，此模式是先付钱再生产，解决了库存、物流成本等。
第一排剩下的是三个手机图标，其中位于中间位置的“至尊新品”是动效展示，也是因为要强调和推广新款手机。
“小米秒杀”放在第二排第一个，是因为此模块也非常重要，是一大流量入口，秒杀功能板块是利用时间的紧迫感来刺激用户转化，走量能力极强，正因如此，在页面的下方有专门的“小米秒杀”板块。剩下的四个图标是小米生态链中四个类别的产品入口，代表了大多数产品。
4、登录前后设计
新人首次打开产品，促进第一单购买
小米商城新用户第一次打开产品时，会直接弹出“新人专享福利”弹窗，点击查看都是性价比极高，且生活中常用的物件，性价比高是为了促进与新用户的第一笔交易，推荐常用物品是为了让用户在生活中看到用到这些常用物品时，可以想到物品的购买渠道，从而提高复购。
新人登录前，首页内容促进第一单购买
如果用户不小心关闭了弹窗，没关系在首页最重要的位置也会看到“新人福利”板块，如果享受新人福利，那在购买前一定要做的是要注册登录的，所以新人福利，不仅可以促成与新人的第一笔订单，而且也有助于引导新人成为注册用户。
新人登录后，继续促进第一单购买
从下载小米商城到登录后，会有三次提示有新人福利，上面介绍了前两次，第三次是当登录后会直接跳转到“新人专享福利”，目的还是促成一单有性价比的交易，给用户留下第一次好的购物体验，最终变成有价值的用户。
据调查电商购物，用户最大的痛点就是不包邮，同样一件商品，99元包邮比90元+8元快递费组合更容易让人接受。
上图小米商城的新人福利，都在强调包邮，消除用户痛点，让用户的首次购物真正的感受到小米商品的性价比。
个人中心登录前后有意思的设计
小米商城登录前后在个人中心有个地方的设计非常有意思，看下图未登录前的5个图标设计，相信身为设计师的你一眼就能看出“钱包”的图标偏小，这是为什么呢？
登录后才发现，较大的四个图标都会换成数字，数字的大小正好与钱包图标的大小视觉上一致，设计师似乎很淘气。
登录后数字与图标大小视觉上一致
5、参与感设计
在小米商城的首页用户可以打开红包雨游戏功能、答题领红包功能、智取盲盒机功能等，这些虽然都是营销策略，但因为趣味性、游戏化的设计也大大提高了用户参与感，从而增加了销售机会。
最后
以上讲的是UI设计前的探索工作，也是非常有必要的工作，产品设计者只有真正了解了产品的底层架构，才能精准的把控设计，在各方面掌握好平衡。
文章来源：站酷 作者：吴星辰
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前些天对用户习惯进行了总结，这两天重新优化了一遍。我们在互联网产品的设计过程中，有时会听到一个词：用户习惯。设计师希望尝试更多新颖的交互方式、视觉效果，却常常容易被其他人挑刺指出不符合用户习惯，建立在用户习惯上的创新才是好的体验。
尽管设计师经常将用户习惯挂在嘴边，但是却很难有人说出用户习惯究竟是什么？我们如何判断所做的设计是否符合用户习惯？用户习惯是否始终不能打破？道理我都懂，就是不会做，实际上确实是这样，因为很大程度上取决于设计师对用户习惯的理解深度。
用户习惯本身很难被量化，但是不代表就是一个模糊的概念，你仍然能从用户反馈、操作行为数据对比等分析中一窥究竟，用户习惯是可以随着设计师的学习、经验、眼界等的提升而提升的。
心理学上认为，习惯是人在一定情境下自动化地去进行某种动作的需要或倾向。或者说，习惯是人在一定情境中所形成的相对稳定的、自动化的一种行为方式。 习惯形成是学习的结果、是条件反射的建立、巩固并臻至自动化的结果。
所以，习惯有两大特点：
需要注意的是，“长期”本身是是没有明确时间界限的，更强调多次的重复。这里的习惯，侧重于描述“习得性”，即人们通过经历、学习、刻意练习等方式形成的，所以这种习惯理论上是可以被改变的。
此外，习惯还有一种潜藏特性，区别于上面描述的“习得性”，是天生的、物种特有的行为模式。比如人空腹状态下，闻到香的食物会产生强烈食欲。这种特性习惯是刻在基因里的，几乎无法被改变。
试想，我们在使用 App 时，是否遇到过因为习惯的问题而感觉到不适应的场景？
举个最常见的例子，Windows 与 Mac 系统的软件关闭方式。使用 Windows 的电脑时，我们形成了关闭操作在右上角的自然习惯。后来开始使用 Mac 电脑，关闭方式都在左上角，在一段时间内，每次关闭时都感觉到格外不习惯。而 Mac 的关闭方式没有比 Windows 产生显而易见体验升级，改变操作习惯成本高，部分用户可能会认为 Mac 的关闭操作不好用。
当然，假如最开始接触的是 Mac 电脑，再使用 Windows 电脑，也会自然认为 Windows 不好用，这是先入为主的观念，一旦产生习惯，改变习惯将产生一定的学习成本。
设计师需要思考用户行为的本质，而尽量减少主观判断。产品是给人使用的，所以了解人们的行为特征很重要，而只要涉及到对人本身的了解，就是极其复杂的，人类对自身的行为特征了解远远不足，但这不妨碍我们以现有知识去做一些分析和判断。
用户行为习惯的产生，与记忆的特点有很大关联，我们可以把记忆划分为外显记忆和内隐记忆。
外显记忆大家比较习惯和容易感知到，比如我们在学校学习时背诵的课文、公式法则等，可以用语言、文字等显性方式描述出来的记忆。
内隐记忆也叫非陈述性记忆，我们无法用行为描述而又确实存在，比如骑单车，学会之后很难会遗忘。刚开始学习时，会需要意识的介入，经过多次练习，行为会逐渐“自动化”，比如学习开车时，我们会注意力很集中，而习惯开车后，可以一边开车一边聊天。
我们平时说的肌肉记忆、条件反射也和内隐记忆息息相关，而且一旦形成，不太容易改变。需要注意的是，肌肉记忆只是一种简单描述，负责此记忆的是小脑，其实肌肉没有记忆。
所以有时候，我们感觉体验某个 App 时，会习惯性在某页面寻找某功能，或者觉得体验和其他 App 有区别，都可能是内隐记忆的用户习惯引起的。举个例子，某天你刚使用一个没用过的 App ,这时你想要找设置功能，那你大概率会不自觉的点击 App 的最后一个主 Tab (如“我的”），因为大部分 App 的设置功能都在这个场景，用户自然也就形成了习惯。
这里我且采用由心理学家基思·斯坦诺维奇（Keith Stanovich）和理查德·韦斯特（Richard West）率先提出的术语，用以说明大脑中的两套系统，即系统 1 和系统 2。
·系统1的运行是无意识且快速的，不怎么费脑力，没有感觉，完全处于自主控制状态，也叫快系统。
·系统2将注意力转移到需要费脑力的大脑活动上来，例如复杂的运算。系统2的运行通常与行为、选择和专注等主观体验相关联，也叫慢系统。
而这两个系统，是可以互相转化的，慢系统通过刻意练习，把新的习惯注入快系统，而这时快系统就是习惯的表现，这样快系统可以在日常生活中完成大部分工作，这就是我们常听说的熟能生巧，习惯经常能帮我们节省思考的精力，这又让慢系统进一步通过刻意练习，向快系统不断注入更多好习惯。
举个例子，你刚用一个 App 时，可能需要先体验一下你要的功能在 App 的哪个位置，但你用久之后，就会不假思索地找到它。就像你用微信，最常用的功能可能是回复信息、看朋友圈，所以一定会形成习惯。但是假如有人让你找一下微信里面“生活服务”的入口，你可能会先想一下可能出现在什么入口，这就是因为平时比较少用导致的。假如你常用这些入口，也会形成习惯，下次要使用这些功能的时候，就能够快速找到。
既然说到用户习惯的特点是“长期养成”且“不易改变”，那么挑战用户习惯一定会造成不适，甚至引起强烈反感。几年前 Ins 的 logo 改版，将 logo 由拟物化改成了扁平化，颜色也发生了变化。暂且抛开视觉效果不说，从用户视觉记忆上，已经习惯了下图左侧的效果，而右侧新版效果很难与左侧产生记忆上的关联。
许多用户反馈桌面上找不到这个应用、许多用户吐槽很丑甚至不想再使用。所以我们比较容易理解，为什么有时候 App 改版容易反而引起用户的反感，这很大程度上是用户习惯的影响。
了解产品的用户是谁、用户的行为特点是什么。不同产品由于定位不同，所以用户群体也不相同，用户群体的不同自然代表用户行为特点的不同。如果设计师知道用户群体，但是不清楚具体行为习惯特征，可以尝试让你身边的用户帮你体验。
举个例子，B 站的整体用户画像相对而言更偏年轻化，所以产品设计上，无论是代表形象、UI 风格、交互体验都更显年轻化。而“小年糕”小程序的用户群体主要为中老年人，所以设计上不会显得很年轻，而是以操作明确、字号偏大、去除多余信息为主。
关注主流产品的用户体验很重要，这些竞品的操作往往代表用户的习惯操作（或被培养出来的习惯操作）。大多数情况下，你需要了解竞品能做到什么程度，用户容易将习惯从一个场景带到另外一个相似场景。
比如点外卖，有的用户可能会下载美团和饿了么，尽管平台不同，但是在用户习惯中，操作模式是相似的，所以如果你要让用户的体验不突兀，那就往往遵循相似的操作逻辑。当然这些不是为了让一个产品去抄另外一个产品，而是要追寻更好的使用体验，你的产品比竞品体验更优，就更能吸引用户的青睐。
每个人本身都会具有相对稳定的行为、操作、信息阅读习惯，我们能见到的体验好的产品，都是符合用户的基本行为习惯、信息阅读习惯的，要想了解这些习惯，需要了解深层次的交互行为特征。
从操作而言，需要了解用户与界面交互的行为习惯，比如用户的操作（手势操作、信息布局如何才能便于操作），比如尼尔森可用性原则等。
从信息阅读角度而言，需要考虑人们眼睛观察事物的规律，比如格式塔原理：接近性原则、相似性原则、连续性原则、闭合性原则、主体/背景原则、简单对称性原则、共同命运原则。
就移动互联网产品的领域而言，大家都是与手机互动，目前手机系统的两大平台：iOS 和 Android 也都各自有提供关于人机界面设计有清晰的指导，尤其是 Android 的 Material Design ，对于设计师快速了解设计规范、设计原则有很大作用。
iOS 与 Android 的人机界面规范链接：
iOS：https://developer.apple.com/
Android：https://material.io/
我们提到挑战用户习惯会有风险，但用户习惯并非是永远不可改变的，有时我们需要培养新的用户习惯，也就是大家常说的“教育用户”，否则世界可能一直很难进步。
移动互联网兴起之前，大家都是线下打车，但是滴滴打车颠覆了传统线下打车的用户习惯；以前大家都是现金支付，但是微信支付颠覆了现金支付的用户习惯。
《设计心理学》里面有这么一段话：“如果用新的方式做一件事只比原来好一点，那么最好与以前保持一致。如果必须做出改变，那么每个人都得改变。新旧混杂的系统会让每个人困惑。当新的做事方式明显优于旧的方式，那么因改变而带来的价值会超越改变本身所带来的困难。不能因为某样东西与众不同就认为它不好。如果我们故步自封，我们将永远不会进步。”
这里的价值包括但不限于用户价值、商业价值（短期价值、长期价值）等，当新习惯会需要用户改变旧习惯时，这个设计带来的价值有多大，值不值得让老用户付出学习成本。有时候，明知改变会引起用户的强烈抵触，仍然改变用户习惯，可能因为改变的价值大于改变的困难。
刚才提到的 ins 的例子中，有的人不知道 ins 为什么要改版，创新咨询公司 IDEO 的沟通设计主管 Remy Jauffret 说：“当品牌、组织超越了最初的商业意图，或扩展业务提供不同的产品，或领导希望吸引新的客户，这些情况都可能需要新的品牌视觉。变化总是大家不舒服，然后又平息，我认为时间才是检验真理的唯一标准。”
我们在设计中，有时候会遇到自己的产品某个功能体验比较差，但是延续了很久，而市面上其他同类产品在相同功能的体验上已经做的很好，我们可以往主流交互体验上改版吗？这时需要权衡改变之后是否能带来明显的体验升级，还是说对于用户来说是不痛不痒的变化，可改可不改？
以安卓为例，在几年前，安卓手机的底部有 3 个实体键，后面手机更新迭代，变成了虚拟三键设计，因此底部存在3个不同功能的热区。而在 Android 4.0 设计规范中，为了避免底部标签栏与已经存在的底部虚拟键产生交互上的冲突，安卓明确说明了不要使用底部标签栏。
但这种规则，在使用体验上、开发者的适配上都发生了问题，用户更接受 iOS 的体验，后面谷歌在 Material Design 中，允许了底部标签栏的存在。这相当于和原来的用户习惯不一致，但却带来了更好的用户体验。
这里结合上瘾模型的触发、行为、多变的酬赏、投入进行阐述，这四个步骤是一个循环，当用户越沉迷于这个循环，说明你的产品对用户的吸引力越强，用户习惯也就越强，这里会侧重于从培养用户习惯的角度进行拆解。
外部触发说白了就是加强产品曝光，让用户一下子就能想起你。举个例子，“充电五分钟”下一句是什么？你大概率会想到“通话两小时”，这种经过外部的长期触发，最终已经转变成了内部的习惯，会让你记忆深刻。
外部触发的类型主要有4类，通过将信息渗透进用户生活，吸引他们采取下一步行动：
付费型触发：做广告、搜索引擎推广都是付费型触发，争取新用户；
回馈型触发：公关和媒体等领域的触发，比如对产品做正面报道、推荐等；
人际型触发：熟人之间的口碑传播是一种极其有效的外部触发，可以为产品带来“病毒式增长”；
自主型触发：以驱动用户重复某种行为作为重点，让用户形成习惯，比如新闻订阅、每天早晨的闹钟等。
内部触发是用户心理产生的使用动机，内在情绪驱动自己去使用一款产品。
当某个产品与你的思想、情感或者是原本已有的常规活动发生密切关联的时候，那一定是内部触发在起作用。对于习惯刷朋友圈的人来说，拿起手机就不会自觉打开微信；对于习惯刷微博的人来说，拿起手机就会刷起微博，甚至自己都没有意识到。一再重复这种场景，会用户就会对此形成一种稳定的联系，进而形成习惯。
斯坦福大学福格博士曾提出“福格公式”，福格行为模型可以用公式来呈现，即 B = MAT。B 代表行为，M 代表动机，A 代表能力，T 代表触发。只有动机、能力 、触发三者皆备，才能跨过“行动线”。
触发：即上面所提到的外部触发与内部触发。
动机：动机决定你是否愿意采取行动。福格博士认为，驱使我们采取行动的核心动机主要是三种：追求快乐，逃避痛苦；追求希望，逃避恐惧；追求认同，逃避排斥。
能力：这里要详述的是能力，所谓习惯，是指人们在几乎无意识的情况下做出的举动。一种行为的复杂程度越低，无论是体力上的还是脑力上的，被人们重复的可能性就越大。越简单的操作成本，记忆成本越低，越容易形成用户习惯。
举个例子，刷抖音就是用户行为成本极低的场景，你在刷抖音时，不需要多余的交互行为，切换视频甚至不需要点击，只需要向上滑动。除开抖音算法的精准推荐不说，从交互层面而言，也是足够简单并且形成习惯了。
如果改变会打破认知习惯，要让用户能快速了解新设计的使用方式。最好的方式是能够让用户快速与已其他竞品的操作习惯产生关联。比如采用其他主流应用成熟的交互方式。
如果改版会很大程度上改变用户行为，也可以考虑尝试以下的方式。
· 改版操作指引：这种方式较为常见，但是仍应注意避免繁琐的操作指引，切勿把操作指引当作体验差时的解决方案。
· 兼容多种用户习惯：这种方式可以让不同用户选择适合自己的交互方式，最大程度考虑到所有用户，但同时也可能造成了功能冗杂的情况。比如安卓底部三大金刚键，后面手机全面屏时代，新增了全面屏手势。考虑到安卓老用户的使用习惯，三大金刚键（底部虚拟按键）始终被保留下来；
· 允许切换新旧版本：这种方式一般是改版变化过大，用户一时间不容易接受新的体验方式，常见于网站，如站酷早期的大改版，但是仅适用于过渡期。
当然，除上述方式外，肯定还有一些其他让改变行为习惯更舒服的方式，这里不一一列举。
多变酬赏主要表现为：社交酬赏，猎物酬赏，自我酬赏。这几种酬赏会加强用户对产品的使用习惯。
社交酬赏：人们从产品中通过与他人的互动而获取的人际奖励，比如被认同、重视、喜爱等。比如人们喜欢发朋友圈、微博等，期望得到回馈，某种程度上都是为了获得社交酬赏。
猎物酬赏：人们从产品中获得的具体资源或信息。比如浏览信息流，丰富的信息流内容为用户提供了资讯，比如刷抖音，人们追求视频的新鲜感、追求内容的丰富性都是属于猎物酬赏。
自我酬赏：人们从产品中体验到的操控感、成就感和终结感。在目标驱动下，我们会去克服障碍，即便仅仅是因为这个过程能带来满足感。就像你玩游戏，希望赢过对面，或者期待将游戏玩通关，本质上属于自我酬赏。
如果希望继续培养用户习惯，与产品产生更紧密的联系，就需要鼓励用户进行一些投入，以增加他们使用产品的可能性。行动只是用户使用的第一步，促使用户对产品的投入，才会真正增强用户与产品之间的联系，形成更强的用户习惯。但是如果用户自身没有投入，即替换成本低，那么随时都可能有被其他产品取代。
举个例子，移动互联网时期，微信早早入局，人们的关系链都在微信里面沉淀，即人们越使用微信，关系链沉淀越多，就越难以更换其他产品，所以两年前想要挑战微信的多闪、马桶 MT 和聊天宝这三款社交 App 不可避免的失败了。
用户越愿意投入，就证明用户粘性越高，在此过程中，用户习惯也会不断加强。
现阶段，人人大谈用户习惯，但是用户习惯不以自身为标准，而是需要考虑产品用户的行为特征，以及人们在使用产品时更加深层的、甚至用户本身都没有发现的习惯，这就需要设计师对习惯的产生、习惯的判断、习惯的培养有深入的认识。
一般情况下，产品不适合贸然改变用户习惯，但是在有特殊需要的情况下，还是不可避免的改变产品的用户使用习惯，当然我们需要如何让用户更加容易接受。大多数产品，都希望用户能够形成对自己产品的习惯，所以需要了解用户如何对产品产生习惯、加强习惯，使产品拥有更强的吸引力，但是良好、正向的用户习惯一定是基于用户体验的。
文章来源：站酷 作者：热风_
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
逐帧分析方法是一种针对动态的、短暂的过程对象进行对比分析的方法。该方法可帮助设计师以微观视角完成差异分析并得出相应结论。与传统的静态截图、动态录屏方法相比，其优势是可以看到过程的全貌，对动态细节一览无余，具有较高的分析可控性。
逐帧分析方法的产生源于一次针对加载场景的体验调研项目。百度百科对于加载的定义是：所有软件要运行必须加载到内存，加载就是把需要的文件及信息读取到内存里。简单说来，所有从服务器读取信息并显示在手机屏幕上的过程都属于加载。以百度APP举例，加载的典型场景有：启动、打开FEED落地页、打开搜索落地页等。这些场景都有一个共同的特点是：动态的过程，且过程较为短暂。
基于以上特点，运用对比分析里最常见的静态截图或动态录屏方法，是无法完成分析的。原因是，静态截图对于一个动态过程来说，无法看到过程的全貌，可对比点较少，分析要素不可控（一张静态截图中，无法做到涵盖所有分析元素）。而采用动态录屏的方法进行分析时，问题也同样明显：过程太快，无法看清细节；不同视频节奏不同，对比起来比较困难。因此针对加载这种特殊的场景，就需要采用一种全新的方法既能看到过程全貌，又可以对细节一览无余。
小时候我们都玩过跑马灯的游戏，即一系列静态图片通过快速轮转，由于视觉滞留效应，便可看到一段动态影像。如果把产生动画的过程翻转过来，也就是说如果可以把一段动态影像拆成一系列序列帧，那么是否可以更好的完成影像观察？
以百度APP打开小视频落地页的加载场景为例，当我尝试将这段300ms的过程录屏拆分为18张序列帧后发现，除了可以清楚的看到过程全貌外，对于过程中的所有细节也可以一览无余。同时，序列帧可以进行任意拆分，以便完成多角度观察。
到此为止，逐帧分析方法的雏形已经产生。在之后的章节，我将为大家具体介绍如何完成序列帧分析以及如何导出序列帧。
面对一系列序列帧，我们可以通过“序列帧三要素”来导出关键数据及结论。
要素1：序列帧全流程
首先，我们进行序列帧观察的时候，需要明确定义目标对象的起点与终点。由于逐帧对比方法适用的观察对象均为短暂的动态过程，明确定义全流程的起点与终点是为了让观察过程和结论更加精准。
以百度APP打开搜索落地页为例，起点与终点分别是：点击搜索结果手指松开的第一帧与搜索落地页首屏内容全部加载完成的最后一帧（可以通过观察前后帧是否有变化得出结论）。这一要素中，可以采集到的关键数据为时长，时长可以帮助我们观察加载性能的好坏，甚至在进行竞品对比的时候，快速找出与竞品在时长方面的差异从而得出优化建议。结论输出时，需要将帧数转换成为时间单位（如何将帧数转化成时间会在后续文章中为大家讲解）。
要素2：序列帧子流程
在前文中提到，逐帧分析法的一个优势是，逐帧序列可以进行任意拆分，以便完成多角度分析。在分析的第2要素中，我们可以最大限度拆分子流程，同时需要明确每一个子流程的起点与终点。这一要素的分析中，可以采集到的关键数据为子流程时长，缺失或多出的子流程，以及子流程内部的差异。
例如在百度APP Android端热启动过程中，全流程被拆分为：启动至全屏、持续白屏态、内容加载3个子流程。通过换算，可以看到每个子流程的时长。并且在和竞品的对比中发现，百度APP缺失了持续白屏态这个子流程。而在启动至全屏的子流程中，百度APP因为没有添加过渡动画，与多数竞品是有差异的。
要素3：用户体验节点
用户体验节点的对比是逐帧分析法的第三要素，这一要素进一步深入到过程的微观视角，使得分析结论更为全面。而用户体验节点是逐帧分析法所提出的一个全新概念，其定义是：产品界面上任何一次用户可感知的变化，都叫做用户体验节点。以百度APP Android打开搜索结果页为例，整个过程的用户体验结点有5个。通过用户体验节点可以采集到的关键数据有：用户体验节点的数量以及用户体验节点的顺序。
我们以Android打开搜索落地页为例为大家进一步讲解如何完成用户体验节点数量的分析。通过对比发现，百度APP在整个加载过程中的用户体验节点数量多于竞品，多出的节点为：白屏节点、文字加载节点。虽然百度APP加载时长与竞品相差无几，但是由于节点数量较多，导致用户在等待过程中经历了过多的页面状态变化，形成了较强的视觉闪跳感，从而引发用户感知层面的错觉，认为百度的加载时长较长。因此我们可以通过减少非必要的用户体验节点，从而提升加载场景的流畅感。但是，用户体验节点的数量并非越少越好，这还要根据实际业务与优化方向来输出具体结论。
用户体验节点顺序的分析，可以参考百度APP iOS FEED打开图文落地页的示例。在这一示例中，百度APP图文落地页内容加载节点位于框架转场节点之后。但是对比竞品发现，多数竞品在这个过程中，内容加载是先于框架转场的，而这种节点顺序的优势是，转场完成后，用户即可开始浏览内容，整体感知较为流畅。这种导致阅读流畅感体验差异的原因很难通过肉眼或常规竞品对比法观察得出，由此可见逐帧分析方法针对特殊场景的分析优势非常明显。
在此，我们回顾一下逐帧分析方法的“序列帧三要素”。
要素1：序列帧全流程，可采集的关键数据有：全流程时长。
要素2：序列帧子流程，可采集的关键数据有：子流程时长、子流程是否缺失、子流程内部的差异。
要素3：用户体验节点，可采集的关键数据有：用户体验节点的数量与顺序。
工欲善其事，必先利其器。进行逐帧分析前，我们首先要将录制好的视频转化成序列帧。以下章节将为大家讲解如何导出逐帧序列。
整个过程可分为：录制、创建合成、输出3个环节。
由于系统特性，iOS和Android手机双端建议采用不同的录制手段。iOS手机可直接通过数据线连接到电脑，并使用电脑的QuickTime进行录制。这样的好处是保证了录屏的帧数基本稳定在60FPS（每秒传输帧数）；Android手机建议采用机内功能或其他录屏应用完成录制，但是安卓中低端手机很容易出现掉帧的现象，因此就需要我们在合成和输出阶段制定一个合理的输出帧数，让分析的结果更加接近真实。另外，建议录制的起始点适当延长，这样便于素材在合成阶段精准切割。
这里要为大家讲解一下如何将帧数换算成时长。以iOS的输出帧数为例，换算公式为：iOS时长= N（帧数） x 16.6ms。例如：在iOS打开图文落地页的加载过程中，百度APP总时长为：73（帧数）x16.6ms= 1217ms（约等于）。
创建合成阶段所使用的工具是AE。AE的好处是：
1.方便查看原视频帧速率，对不稳定的帧速率进行统一处理；
2.可以将视频转换为图片序列，便于后续的逐帧分析；
3.AE也可以将多个视频进行同步播放来进行对比验证。
第一步：打开AE>合成>新建合成。
这一步的目的是通过合成设置，统一帧速率。通过一系列实验，我在新建合成时，将iOS录屏的帧速率设置为60帧/秒，Android录屏的帧速率设置为30帧/秒，这样可以保证最大化的减少空白帧，使分析结果更加准确。
第二步：导入录屏
第三步：截取起止点关键帧。
在进行素材处理的时候，需要精确到每一帧，由于逐帧分析所针对场景的时长极为短暂，很可能由于一帧的差距，导致分析结果相差甚远。
以百度APP iOS端热启动过程为例，我们将录屏中手指抬起的前一帧（即icon显示出点击态）做为起点，将APP启动后填满手机屏幕的第一帧（可通过观察法，在AE中查看前后帧是否有变化）做为终点完成素材处理。
输出的路径为：菜单栏 文件>导出>添加到渲染队列，在渲染队列中找到待渲染视频，再在 输出模块>格式选择JPEG或PNG以序列导出。这一步的目的是，将一段视频文件拆分成可提取对比的逐帧画面。
最终导出的序列帧如下：
在完成分析对象序列帧导出工作后，便可开始进行逐帧分析了。
逐帧分析法是在实际项目中总结并提炼出的一种全新的分析方法。该方法对于短暂的、动态的过程非常适用，可以帮助我们从微观视角发现问题、验证问题、得出优化结论，极大的提升了分析效率和精准度。逐帧分析法也在后续的多个项目中也得到了推广和验证，希望可以帮助到大家。
文章来源：站酷 作者：MEUX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Meet more beautiful colors.
“色彩是我们感知世界的重要媒介，对于信息传达有着重要的作用，能使人们能够更有效的感知设计的意图和内涵，使传达更高效。且人对色彩的视觉感知与想象能力，能够指导人做出预测、理解和决策。”
-- lyft kevyn arnott
——————————
随着世界的数字化转型进程大爆发，科技把每一张有形的办公桌移到了云端，用户沉浸在数字构建的世界中。腾讯文档作为先进的生产力工具，产品生态越来越多元丰富，多品类多终端的复杂环境展现在我们面前，开始真正的朝复杂庞大的大规模设计迈进。我们希望能以更加专业、高效的设计姿态迎接腾讯文档的未来挑战。
色彩是体现品牌与基因的关键因素，构建科学高效的色彩系统，建立产品的品牌形象，对产品设计极具指导意义。
腾讯文档在色彩上也进行了一些深入的挖掘和沉淀，一方面希望带给用户全新的品牌印象和认知，另一方面构建科学有效的色彩系统，为产品的发展提供优质高效的设计系统基础。本文将聚焦于色彩系统的构建。
腾讯文档代表着效率协作的先进生产力，从云端创作到云端协作，打破了办公空间的实体界限。我们希望，新的品牌色，能够为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和认知。
我们将标准色由平静的天蓝色，升级为更加生动、进取、科技、可靠的明亮清澈的钴蓝色。这种蓝色具有更多的电子意味，蕴含了更多的活力和想象力，承载了腾讯文档对未来数字世界新挑战的态度和形象的进化。
同时我们认为灰色在腾讯文档的色彩系统中起着至关重要的作用，为产品界面创造结构、表达边界、建立信息层次。我们将灰色赋予了统一的品牌认知感受，将蓝色加入到中性灰色里，生成了腾讯文档特有的蓝灰色。
至此，腾讯文档标准色进化升级，它体现了腾讯文档对可靠稳定的技术、产品体验的追求，以及对未来智能的数字世界的不断创新和进取，蕴藏着无限的可能性。
在一个科学有效的色彩系统里，往往包含至少两种色彩：主色+辅助色，两者互相搭配组合成产品体系的整体色彩感受，减少用户在产品体验中对反复出现的主色的视觉疲劳。
腾讯文档的产品生态愈来愈丰富多元。我们拥有多品类的产品，为用户提供了丰富的产品功能，其中云端协作、文档资产的沉淀管理是腾讯文档的非常重要的能力，在线文档、在线表格、在线幻灯片、在线收集表、在线思维导图、在线流程图以及文件夹等的品类图标，又是用户在对文档进行协作分享及沉淀时，识别不同类型文件的关键因素。基于此，腾讯文档相较于其他产品需要更多的辅助色。
于是，如何有效的选择既符合品牌调性又有区别度的辅助色是构建腾讯文档色彩系统的关键。在辅助色选择上，我们以邻近色、互补色、对比色为主要方法构建了辅助色彩体系。
我们以腾讯文档标准色#1E6FFF（H 218 S 88 B 100) 为起始点，S（饱和度）、B（明度）保持不变，H（色相）以218°为起点，以15°为增量或减量标准，生成24色色板。这个色板是我们选取辅助色的重要依据。
● 邻近色 在色相环中，相差15°的颜色为邻近色，凡在60°范围内的颜色都属于邻近色的范围。邻近色之间往往是我中有你，你中有我，色彩之间比较和谐。
● 对比色 在色相环中，角度相差120°-180°之间的色彩，文档使用了120°为角度来选择对比色。
● 互补色 在色相环中成180°角的两种颜色，互为补色，当这两种颜色彼此相邻放置时，它们会为这两种特定颜色创造最强烈的对比度。
为了保持腾讯文档的基础品牌调性，并保证其具有极清晰的识别度，我们以品牌蓝色为起点，选择了相对较多的邻近色，以保证在色温上保持腾讯文档整体色调的清爽感。并利用对比色及互补色，选择更加丰富多元的色相，以保证能够满足各种使用场景下对色彩的需求。
总的原则是利用邻近色构建有质感、品牌感的色彩家族，利用对比色及互补色扩展色相，以制造更强烈的色彩对比，满足一些冲突性场景。
虽然我们保持相同的饱和度和明度，使用科学的方法得到了较为合适的色相，但由于色彩本身自带感官明度属性，导致在视觉感受上的感官体验并不同频。
黄色、绿色的明度即发光度较高，蓝色就稍微偏暗一些，导致色板看起来不一致。为了让不同色相看起来更加协调，需要调整色板的明度和饱和度，以保证视觉感官体验同频且更加和谐舒适。
校正原则：
● 色相必须保持是 同类色（色相环中15°夹角内的颜色）
● 保持感官明度同频
● 保证视障群体的识别度
校正后我们得到了清澈明亮、清晰易分辨的腾讯文档的主色+辅助色。并且针对视障群体进行了色彩测试。
灰色是产品体验设计中至关重要的一节，工具型产品大部分是由各种各样的容器、面板、列表组成。灰色为产品界面创造结构、表达边界、建立信息层次，保持舒适的对比度是提高可读性和吸引用户注意力的关键。
前面我们已经定义了腾讯文档的蓝灰色，在界面的设计中，我们将其与中性的灰色结合，共同构建灰色的色彩体系 。
● 扩展蓝灰色相，应用于图标、容器，构建有层次、舒适清爽的产品界面 。
● 用带透明度的黑色，应用于字体等。
为构建一个高效易用的灰色调色板，我们将蓝灰色彩作为Y轴，有透明度的中性灰色作为X轴，两者透明度保持一致，建立起腾讯文档有梯度的、丰富的灰色调色板。
对比度是否合理是阅读体验是否舒适的重要评价维度，过高或者过低的对比度都会影响阅读体验及识别度。下图是对比度的钟型曲线图，随着对比度的增加，舒适度和识别度都在上升，但一旦超过一个界点，对比度越增加，识别度和友好度亦会逐步下降。
为保证视障用户的使用，保证足够的对比度，遵守 WCAG 2.0 的标准，我们对调色板灰色的对比度进行了可用性测试，以指导腾讯文档体验设计中灰色调色板的使用。
是：对比度在AA标准以上，符合W3C标准，可以使用。
中：仅可用于disable状态。
否：对比度在AA标准以下，不符合W3C标准，不可使用。
定义好文档的主色、辅助色以及中性色后，我们需建立完整的调色板来满足不同场景下颜色的使用。以传达品牌精神，建立色彩层级，或传达信息，或强化界面层级。
在色彩系统中，很多产品使用 Tints and shades 系统，通过在颜色上面增加白色，或者增加黑色，来改变它的明度和饱和度，形成同色系的调色板。但这种方法得到的调色板往往比较刻板僵硬，故腾讯文档采用了另一种方式，将已生成的灰色色板与色相叠加，在符合无障标准的区域，选择不同明度饱和度的色彩，形成有梯度、有层级的彩色调色板。
Tencentdocs_blue：
生成主色-蓝色色阶：
用同样的方法将辅助色生成色阶：
现在，我们有一个梯度丰富，能够支持腾讯文档设计系统的调色板了～
实际案例
实践才是硬道理，我们尝试以这个调色板为指导来调整优化腾讯文档链接色的优化调整。
为保证用户阅读体验的舒适度，链接之类的彩色文本，要求颜色在背景下可以达到4.5:1对比度以上，以使它能够清晰的从灰色文本、背景中脱颖而出。于是，我们放弃了品牌蓝_1E6FFF，选择了品牌蓝70_175CEB 作为链接色。
以后，选择颜色，so easy～
这个长长的制作调色板的故事就要结束了，我在这项工作中，重新审视过去设计中的设计决策方法，在其中学到了很多东西，希望本文对您也有所帮助。
我们经常快速的动手，依靠主观情感去选择颜色，在刚开始可能没遇到什么特别的问题，但随着产品的壮大和发展，往往会越来越凌乱。抽丝剥茧的搭建色彩系统，真正让色彩为设计服务，简化团队的工作，相信您会有更愉快的工作体验～
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为什么那么多人觉得应该先学UI设计再学交互设计，因为UI门槛低所以入手快。其实交互比UI更早出现，从需求理论可以看出人们在追逐主观体验的感受，在基础需求未被满足前是不会出现更高层次的需求的。所以UI设计让更多用户感受到了舒适和更好的体验。殊不知，如果底层的交互和产品的可用性未被满足，那么UI做的再好也是徒劳。
市面上大量出现同质化产品、设计，就是因为大家都在按照现有的，常用的模版在设计，现在其实比早两年会好很多，很多设计师已经开始从美化工作逐渐深挖到区分甚至自我驱动或者价值探寻的工作。
例如下面的案例，这是一个电瓶车电池租赁的一个产品。
从美观角度，左侧的界面更加简洁信息也有规律，有美观的banner和看起来让人有点击欲望的大按钮以及“令人觉得很热门”的热门租赁板块。当我不放出右侧的对比图时，大家在第一反应中，有多少人可以重启自己的视角，还是说已经被这个页面所拉入到不可自拔的漩涡中去了呢？
如果让你盯着第一个界面进行改版，我相信还是会有很多小伙伴可能只是会把底下的信息流挪上来，或者新增一些“我们觉得”有用的板块。但其实这整个形态就是错的，即便将错误路径3改成了路径2，你以然还是在错误的路径上，本质没变。所以为什么我们说要做正确的事而不是正确的做事。
交互不仅仅能够让产品好用的，也要让产品走对方向。
另外，UI也是交互的一部分，属于看的懂。好用可以分为看得懂，学的快，用的会，交互体现在人们日常所接触到的大部分媒介，并且与之产生联系。例如一把水壶，水壶的设计形式首先通过视觉让你感知这是一个水壶，如果把水壶的外形做成一个马桶，你觉得它还是一个水壶吗，这叫看的懂。学的快指的是当我看懂了之后我马上就可以对这个产品进行基础操作，例如装水、倒水。而用的会就是这个水壶更多的附加功能，例如烧水、定时、调温等等。
交互的媒介是不可缺少的，大家是否去研究过为什么古代人们撰写文字是从上至下，从右往左而现代人的习惯是从左右的？古代受限于工具、媒介，竹简是主流的记录文字信息的媒介， 有人会说竹简可以从做往右写不是非要从上往下啊，但是大家可以看到人们是如何打开进行阅读的，如果是横着阅读但是打开是上下展开就会非常不自然了。
所以在当时人们为了适应非常有限的工具资源，改变了自然的操作方式。但现代社会如果说你的产品不为用户的使用和场景去考虑，那基本也就凉凉了。
从2g到5g时代的发展，除了生活方式发生翻天覆地的变化外，我们所接触到的媒介也发生了变化，从2g时代以文字为主的信息到5g时代视频、游戏、影音等为主的信息化进步，让人们对信息的获取更加方便快捷。除了内容，外对于像移动手机这样的设备用户对其操作方式和习惯也有了更多的变化，从当初的搬砖按键手机到支持ar等新技术的超智能化手机，改变了我们的认知也改变了我们的生活方式。
平台迁移的交互成本，很多同学可能都玩过moba类游戏-dota，这是一款在电脑端战术竞技类游戏。在dota中我们经常使用的交互形式主要分为键盘和鼠标的控制，键盘用来控制技能的释放和其他快捷物品的使用，都是通过按按键的形式进行释放。通过鼠标右键来控制人物的移动和左键选择技能和物品释放的目标，这是端游中基本的交互行为与操作。
在现在非常火热并且模式和dota相似度很高的王者荣耀手游中，我们看到了，如何从端游到手游的交互迁移。从鼠标控制移动到左手拇指来控制移动，右手拇指来控制技能的释放，在这里大家要注意，在端游中技能的释放是可以非常精准的，并且可以指向性释放在某一个角色中，但手游不行。鼠标拥有移动、视角、释放技能、使用物品多个功能，但是在手游中我们无法做到选中某一个技能再点击到某一个角色上，所以手游中只能进行非指向性的预判技能释放。
同样在端游和手游的吃鸡游戏中，端游键盘控制人物移动，鼠标控制射击与视角，但是在手游中控制射击与视角就需要2个手指来完成非常不方便，也很影响射击的精度，但是如果做成吸附式准星那么也就失去了很多的乐趣。所以很多的厂商为了解决的这个用户痛点开发出了吃鸡专用的辅助设备，专门用来给多余的手指进行射击操作。
另外，大家如果做b端的同学应该也深有感触，平台迁移的成本非常高。想要把集成非常复杂的业务后台切换到移动端是一件很麻烦的事，因为在网页端我们有大量的空间和更自由的控件形式去承载信息，比如联动的左侧标签导航和顶部联动的标签导航，在增删改查的操作中显得清晰高效。但是到移动端上虽然可以到做联动导航，但是页面显示实在有限，很多的信息完全无法在一个界面中呈现，所以要么将页面进行左右滑动，要么拆分进行多步操作。但本身拥有复杂业务功能的后台系统就不适宜迁移到移动端上。
web端的工具和网页通常都会有撤销操作，按CMD（ctrl）+Z大部分都可进行撤销上一步操作，但是在移动端我们无法通过特定、或者统一的手势进行撤销，所以很多时候在表单输入的时候会有一键删除图标，却无法进行撤销。所以我在想是不是可以在用户一键删除信息后，删除按钮变为撤销按钮，有待考量。
到底什么是交互设计，这个问题其实是比较复杂的，也是我一直在思考的问题。所以也翻阅了很多文献，尝试做更多的案例来解释。交互设计的概念真的挺多的，光网上能够找到的定义就不下5种，这些对交互设计的定义中，比较频繁出现的是行为、场景、用户等词汇，交互设计到底设计的是用户的行为，还是设计用户正在交互的媒介或者是用户正在使用媒介这件事情，我觉得可能还是没有能够解释清楚交互设计的本质。
中国历史文字的演变，它并不是一个模仿的过程，而是一个从底层对文化、自由、精神、环境、人的深刻理解而发生的一种进化过程。但现在其实很多的交互形式都是来源于一些大流量产品的模仿，更多的是担心用户成本过高而妥协为满足用户预期。
事实上，为什么我们讲不清楚什么是交互设计，其实UI设计也一样，她绝不可能单纯的指代用工具绘制出用户界面，其实是因为信息不对成、词不达意或者叫做你说的比人听不懂。我可以举例的是我们的汉语
例如“你可以意思一下”，单就这句话，我们大概知道最关键的是“意思”二字，包含了特别多的含义，含义需要通过语境、使用场景来区分，说者的“意思”是想告诉听者什么呢？没人知道，是一口气干完一瓶酒，还是喝一口？还是送一点礼还是？应付一下？
当然这句话中的“可以”也很有讲究，加上“可以”说明你也能选择不“意思”，是不是觉得这7个字让我们整一句话都活了起来，说者与听者如果不在一个境中，听着就压根不知道说者的具体表达含义。
同样的，在设计领域，很多设计师喜欢用大气、高级、逼格、有呼吸感描述的自己的感受。 说出来自己都要笑出声，还有什么五彩斑斓的黑等等。就比如呼吸感这样的词，这个词听起来比较抽象，让听者都有点不太好意思追问什么是呼吸感，其实你问了，说者也不知道怎么描述。可能说者觉得现在信息太密集让人无法呼吸，但设计者觉得现在刚好，所以本身就没有一个标准，更多的就是主观的感受，让你不得不接受这个建议的原因是因为两者的身份。
我们用我们能够讲述的语言去描绘我们不懂的事物，再例如设计师和开发还原只会说往左移动10px，而不会说给这个view加上padding left 10px。还有你和开发为什么沟通起来那么累就是因为你俩完全无法站在对方的角度对这件事达成共识，设计师通常喜欢描述从左到右或者从上到下，但是在开发的语音认知理，他需要知道的是空间坐标，并且具体的移动单位。所以为什么我们那么鼓励广大设计师去学习一些开发知识，开发也尽可能的去补充设计背景。
在这里，交互设计师产出的交互说明文档就是能够帮助设计师与开发有一个更好的沟通，所以能力较强的交互设计或者视觉设计都能够把自己想表达的信息表达的很清楚。
再举个例子，不知道大家有没有编辑过问卷或者做过用户访谈，很多时候是不是觉得收集到的信息无效、无用，其实很多的原因是因为我们和用户对于这些问题压根不在一个频道，比如：你的问卷问的是，您喝酒的频率是多少，选项有：从不、偶尔、经常，在用户的眼里偶尔可能是1年喝一次，而我们觉得差不多1个月喝一次算偶尔，再比如访谈的时候问用户这个问题：您觉得您喜欢下面哪个页面的风格？用户：“什么是风格？”
所以交互设计师有一个能力久显得很重要了：让万物都可与之对话的能力，对话需要什么，是语言。
我们都知道，语言是我们沟通的根本，语言是由词汇按照一定的语法结构在不同的语境中所组成的复杂系统。不同的种族有不同的语言，不同的专业有不同的语言例如在围棋中有长、立、并、空、顶等等，例如在模型手办中有分线、渗线、勾线、补土等，这也都是在特顶专业领域中的一些术语，但这些并不是语言，只是在某个领域中大家总结出来便于沟通的文字符号。
所以我们再回到上方看一下定义，首先语言是由词汇所组成，词汇是由符号做组成，大家可能都听说过比如乐高啊、原子理论这样的组件搭建方法，但这些都仅仅只是规范，而并不是语言。语言拥有更强的普适性和通用性。
那么我所认为的语言他首先包含了能够组成词汇的符号，这些符号大概就是指：点、线、面、体、色彩由这些点线面体可以组成的词汇有：按钮、文字、图标、图片等。但是光有词汇不行，在汉语中有12种词类：名词、动词、形容词，在由句子组成的词汇中包含了不同的成分：主、谓、宾、定、状、补...这里不过多叙述。
语言很重要的一点它具有语境，语言的运用包含了看听读写4个方面，看和听指的是输入，读和写指的是输出，那么交互设计语言中，也包含输入和输出两种属性，例如输入指的是由不同“词汇”组成的“句子”，比如由标题、箭头、色块组成的一个itme，是一个可被理解、看懂的输入属性的控件。输出指的是该控件可被出发并且进行状态的变化和所进行的任务跳转。
这里的控件虽然有两个属性，但是还需要语境来帮助我们理解，一个是它本身所能够输出的默认状态的，比如点击之后的跳转页面，另外他也可以具备产品赋予的自定义属性，例如底部滑出picker。
还有，在汉语中“去买两个桃子吧”，这里的“两”肯能是虚数也可能是实数，但是在交互设计中，我们如何表示点击1下和两下或者是多次呢，一般单击的属性通常可以有一些特性的符号属性所表示出来，例如加下划线的文字、一个带箭头的item、一个图标、一个带有主色的文案等等，那么双击的话可以用双箭头来表示吗，当然不可以，双击在移动端的手势中具有放大、点赞、返回顶部、定位消息、定位光标等功能。
那我们发现如果把交互设计能够做成类似于语言的系统是非常有意思，并且有用的。这会让更多信息不对称的情况消失，不仅仅是设计师，在产品团队中大家都能够有一套共性的交互语言系统，无疑是一件非常提高效率的事。但是目前的很多交互规范的文档中，大多都是多种元素的拼合，给出常用的、可复用的控件、组件，但是大家依然还是无法从语言角度去创新，这就导致了很难会有新的、有用的交互形式的出现，比如很多搜索控件都是承载在顶部导航栏中，那么在做规范的时候也只能在这个组件上去微调，殊不知搜索这个控件的“语境”并不单单只能在页面顶部，例如高德地图做的就很好。这样一来，这个组件的常规规范形式就能和很多产品区分开来了，当然要视产品形态不同。
市面上有许多的新零售电商产品，页面中的信息流也是大同小异，但是无论是交互还是产品在做设计师必须要考虑的就是产品定位与当前状态。例如目前我们看到的都是以下的信息流样式，但是我们要知道，30000个sku和3000个sku的展示策略肯定是不同的根据算法的瀑布流在30000个sku中可以随意展示，但是3000个就不行了，很可能在算法的过程中用户会频繁看到重复的商品。所以使用双列布局的方法并不合适。
所以这样的产品首屏策略就显得非常关键。我们可以看到常规的电商产品中，首屏基本上都是呈现这样的策略，从顶部的搜索、分类、banner、分流入口、cta、营销瓷片区这样的布局，从基本上能够满足一个大量sku电商产品的所有需求，但是如果用户定位和产品本身的基础无法支撑起这样的场景又该如何去做首屏策略呢？
从交互角度入手，那么既然我们无法做到大而全，那么我们至少可以做到精准、限时，让用户上瘾的策略，上瘾模型这边不再赘述。所以类似云集在首屏的策略可以概括为整合搜索与banner、分流入口、cta、营销瓷片以及以时间为纬度展示的大图信息流。重点在于可随意控制的营销工具，以及时间轴的商品推荐，让有限的资源呈现更多的形式变化以及让用户有时间概念，每天固定时间来进行活跃。
通过交互手段我们也可以给运营工具更加灵活化打基础。例如我们经常看到的营销瓷片可以划分为非常多样式与可能性，并且在后台工具中灵活控制，同时除了日常的营销目的之外，在大促或者活动需求下更可以将整一个首屏切换为极具氛围的信息呈现。
最后总结一下，我认为交互设计也包含了视觉，所以我们在决定用什么样的设计形式之前需要考虑更多，入业务、用户价值等等，从而用更加有价值的交互策略提出问题、解决问题会比单纯的用规范去搭建界面更加有效。
不管是做UI设计还是画插画，有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够，其实不然。一个可能是大家总结的太少，从来都是凭感觉和运气去配色，但其实都是有讲究的。本文不会给大家重复讲解什么是rgb，什么是hsb，什么是cmyk或者什么三原色，这些大家都可以从某度中直接搜到。我今天要给大家分享的是人们是如何认识色彩，并且在产品设计中使用的。
大家都知道，对于不同的颜色，我们对其的感知是不同的，有人觉得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那这是什么原因呢？首先我们要知道我们眼睛内存在两种感光细胞：视锥细胞和视杆细胞，视杆细胞能够感知光线强弱但无法感知颜色，而视锥细胞却相反，视锥细胞内还有3种对不同频率光敏感的细胞。我们经常会用到视锥细胞，而视杆细胞却用的少，更多的是在黑暗的环境中使用的多。
视锥细胞的三种类型分别是低频、中频和高频视锥细胞，分别对红、绿、蓝三种颜色的光敏感。而且这三个视锥细胞分别也有重合的部分。低频视锥细胞对整个可见光频谱都敏感，它的范围包含的比较广，特别是对于频谱中段的黄色到红色部分更加敏感。但是像高频的紫色几乎只有蓝视锥细胞可以感知。
大家在平时生活中都能看到，在马路上、机动车道上以及一些警示牌都会采用黄色、橙色等标识，因为这些非常醒目。更容易被红视锥细胞感知到，但如果你的标识用的是冷色调那这个交通事故可能要发生的频繁的多。
我们来做个实验，如下图，大家觉得在中间的灰色块是纯色还是渐变色，可能很多同学看上去都会觉得是个渐变色，但其实它就是一个纯色，不信的同学可以自己在工具中尝试一下。
但如果你把这个色块拿出来后，不在这个环境中直接进行边缘对比，那就不会出现渐变的情况了。那光说原理，我们也来看一下在产品设计中需要注意的地方，因为在UI界面设计中我们通常需要把一些图片、卡片叠加放置，这样就会造成边缘视觉的对比，本来不明显的两个元素重叠之后变的很明显。所以例如一些标签的背景色和页面整体的背景色。
如果你想要让两个颜色接近的元素具有识别度，那么最好将这两个元素进行重叠摆放而不是分开摆放。另外，如果是卡片样式的设计，背景色一定不要过于灰暗也不要过于浅白，过于深的话会让卡片轮廓过于明显而导致整体看上去显脏以及很明显的对比，显得不自然和舒适。如果过于浅的话也会导致信息的不聚焦。
还有，为什么被框起来的文字会看上去更加有点击的欲望其实也是这个道理，因为文字和背景叠加产生的轮廓只是文字的轮廓，在我们的第一印象中只是一种符号，当它被赋予颜色之后我们才会意识到它需要我们去注意或者可被点击，但依然还是不够明显，所以为了强化可点击这个感觉，我们才用了线框、背景色、箭头等方式。
一般来说，产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中，所以例如闲鱼、马蜂窝等，主色都采用了黄色，黄色具有非常活泼、有趣、好玩的特性，无论是线上还是线下都使用了这个品牌黄色，从每一个线上元素的主色，到线下包装的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的话，可能不太适合线上的产品进行通用。例如之前的严选、云集、711便利店、宜家等产品的主色都是偏深和暗的，所以在线上的界面用起来会非常不和谐，和整体偏浅色、轻的风格对比起来太强烈，引起不适。
而且线上觉得还OK的颜色，由于印刷的原理，实物也会更加偏低饱和和偏暗。
我们在上一篇十万个为什么文章里提到了人们如何阅读信息，提到了一个视觉凹的概念。所以在界面中，什么样的地方使用色彩是有讲究的。所以在这里通常会需要使用颜色的地方在于希望引导用户和吸引用户注意的地方才会使用色彩。例如下方产品，使用了高亮色来引导用户视觉。
当然色彩的运用也会讲整个页面的层级凸显出来，而不单纯的用中性色来区分层级。
同样是上两张图，大家可以清晰的看到，美团中的附近热卖好点、满减标签、价格，其实都只具备信息的呈现，但不具备交互的特征和状态。但淘票票中的“4.7万”和“展开”却不一样，“展开”使用了辅助蓝色，这里的展开就具备这个文案所描述的这个控件具备的交互特性-点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上，当然也会有其他的色彩来表示可点击。
所以不是所有的元素都要赋予颜色，这样会使整个页面非常混乱
另外，UI设计中主色除了引导用户的作用外，也可以表示当前正被激活的信息状态。例如爱奇艺app中播放详情页面，当前板块标签和正在播放剧集的激活状态。
色彩除了上方所述的字段中的不同使用，在图片和整体氛围营造中也起了很大的作用，目前很多2c的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标，或者在首页营销板块的瓷片区域都会用品牌色在活动时段内进行氛围打造
在色彩的心理学上，大家都知道每个颜色具有一定的性格特征和表达。而且都会有正反两面，可以看下方多种色彩的描述。
然而其实很多的产品使用的色彩和我们所认知的会有一些差别，比如咖啡品牌的主色选择，在我们常规人之中，咖啡应该是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其实都用了和咖啡本质没什么关系的颜色
在瑞幸刚出来的时候，很多人其实不太习惯把这个蓝色和咖啡结合起来，但是为了塑造品牌差异化，瑞幸一直将“蓝色”作为品牌的主基调，“小蓝杯”这一称呼不但让消费者感到亲切，也在众多的咖啡中有了属于自己的记忆点。在这支广告片中，主基调同样是使用蓝色，不但符合了当下消费者的视觉偏好，也在为用户留下记忆点之后，也让用户在看到蓝色时自然而然的想到瑞幸咖啡。
但凡各位使用了这样的配色，保证各位过不了试用期，相信我。所以大家千万要避开。
会让人产生“幻觉”！让人产生视觉疲劳，例如我将饿了么这个界面的色调调整一下大家看一下，不亮瞎算我输。
为什么很多时候我们总觉得界面脏兮兮的。是因为我们在界面或者配色中使用了过多的低饱和度、灰度较多的配色。所以这个也是要避免的
让界面或者插画看起来非常混乱。一般来说颜色的使用也需要有侧重点，所以我们常用的方法是6、3、1的色彩配比。
荧光色绝对不可以使用在UI界面中，尤其是主色。会让你瞬间失明！
在很多dribbble的飞机稿中，经常能看到这样的配色和练习。无论是在练习中还是实际项目中，这样的界面也完全无法让用户看到想看的信息，没有重点且轻飘飘的感觉。
说真的，这样的风格确实耳目一新，但个人觉得可能不会成为主流。因为它就和第五种一样：信息可识别性很差。就不说色弱的人群，就正常的用户来说大面积的白色+饱和度低的元素结合感觉就是得了“白内障”。另外我们常说的一点就是所有元素都强调就等于什么都没有强调，这样的风格在每一个元素都具有阴影的情况下都在争先恐后让用户感知，原则是轻量化却又需要那么多阴影，这样就有点自相矛盾的感觉。
为了营造这样的“新拟物”的轻量氛围，还不得不在整个界面中简化大部分元素，能不加文字就不能加文字，说的好听叫做使用了奥卡姆剃刀原则，有一句话一直非常影响我做设计：“设计是需要被简化的，但是简化的过程一定不简单”。所以不是单纯的简化所有元素为了达到这个风格的目的。
例如下方，两种对抗色重叠后会引起视觉闪烁的感觉。是不是觉得我有点帅的晃眼
首先我们必须要说，色彩肯定是需要结合产品和用户的定位去指定和提炼的，所以前期会需要去做一些研究例如用户画像，品牌冲刺或者是情绪板等方法。得到几类“真实的虚拟用户”，从而确定一些主色的方案。然后我们在主色的选择中需要避开上面体到的坑，并且对市面上的app进行总结，我们发现大部分的产品色，简单来讲在我们HSB模式中去色都在一个固定的范围，就像这样。
在上文中也说到用色比例的631法则，所以在选取辅助色的时候我们需要定义好辅助色可以用在什么地方。例如知乎，其实辅助色没有非常明显的1种或者两种，都是多色的辅助色方案，都在一个配色的系统中选取颜色即可。大部分产品目前都是这样的策略，一个主色搭配多个辅色，如果有其他独立的板块可能需要重新定义专属的配色策略。
其次再定义中性色，比如字体和线条以及背景色。字体是为了让信息有对比，显示层级，那么通常给2-3种层级即可，至少2种，至多3种。在选择3个层次的中性色文字是，给大家一个建议：标题/正文文字颜色HSB的B值不要大于20.备注和次要文字b值不要大于50，默认文字不要大于80，大家可以去尝试一下，且中性色不得使用纯黑。
文章来源：站酷 作者：应骏
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在工作中常常被问到如何表达讲述自己的设计，为了让自己的设计有理可依，对接上下游汇报工作的时候，总结以下一些方法和观点，帮助不知从何讲述自己设计的人一些语言技巧。
以下仅是个人观点，用作探讨交流，文中所有举例均为本人工作设计输出。
设计师能做出好的设计，却缺乏系统化的语言包装，“如何讲设计”不该让它成为难题，做一个有产品思维的设计师，让你的设计以理服人，我们要不止停留在视觉表层，更要从多纬度看待产品设计，本文将从以下三点简述：01.产品设计的五个层面，02.讲述设计的流程，03.关于本次总结
做好产品设计的第一步，是了解产品， 要对于产品的需求如何确定、产品定位如何决定有一个基本的认识，在产品常识里面最重要也最常用的就是产品设计的五个层面，也简称用户体验五要素——
作为UI设计师，所处的视觉设计是表现层，是确定产品的最终形态，因此也处于产品设计的顶层（能被看到），是一个具象画的呈现；其次，往里推框架层，是确定产品外观，将界面信息和导航设计有序归类，让用户使用或者理解；结构层是为用户设计一个结构化的体验，将零散的元素转化为有序立体的空间；范围层确定产品的功能和需求；最后战略层是确定产品目标和用户需求；底层逻辑结构决定上层意识形态表现，因此在设计前我们要知道产品是属于洞察阶段，设计中是属于产品设计解决方案阶段，整体的产品设计是一个概念通过无数个层面的努力，经过时间，转化为具象表现的过程，所以我们在完成一项设计时，应该讲述一个完整的设计思路 ，不要让自己的设计思路仅停留在表面。
整个产品的设计产出是一个抽象到具象化的过程，设计的前期属于产品洞察阶段，这个时候一般由团队的老板领导结合当下市场需要，有用户的需求就有商机，想出产品大致的方向（战略层）然后通过产品经理整合梳理高层的意见确定产品大致的功能和内容输出原型（范围层），交给交互设计师优化产品细节逻辑和信息具体框架，经过研发评估能够技术实现产出交互稿（结构、框架层），这里已经过渡到设计解决问题执行阶段，最后是给到界面设计师美化视觉产出高保真（表现层）。
也就是到我们自己设计输出之前要经历这么多，如果能在讲述自己设计的时候，提前去了解这些，那么设计内容就不愁没法儿讲，光是阐述自己的设计思路就可以讲出一个故事，这也是为什么现在很多品牌卖货都开始营销产品背后的故事由来。我们设计能做好，也要会用语言推销自己的设计成果。
设计是对于某件事精心准备的过程。好的设计作品，应该拥有完整的设计流程，因此我们在讲述自己设计作品的时候，有一套完整系统化的方式是非常有效的。完整的设计流程包含以下4个步骤：
第一是我们需要去了解设计的需求背景，知道大概的方向——
来源（简单理解就是谁提出的问题）需求有可能是你的老板、你的产品经理、或者交互设计、或者视觉上的问题···
背景（笼统一点，就是这个需求是新需求还是原来有然后进行改版优化）需求的基层性质是什么，原本调性是什么，我们要做什么样的产品···
目标（目标一般都是需要解决什么问题）搞清楚为什么做这个需求，能解决什么痛点，不做无用功。
谁提出的问题，是新的需求还是旧的问题，或者我们要解决什么？围绕这几个方向将你的设计概述出来，会让非专业的人也能听懂你做了什么，举个简单的例子，我们公司后台一个很小的产品bug需求，往往这种需求就是产品经理的一个截图和他标注的两句话——
然后你完成了这个需求单，在传达给非产品经理以外的人的时候，你有可能是以下转述方式——
毫无疑问，你就是将需求者的意思一字不落的转达了，但是对于其他的听者来说，你的转述平平无奇、毫无意义，甚至都没有印象你做了什么，所以你应该讲清楚这个需求的背景——
设计需求来源是谁，原本属于产品哪个模块（来源），他原来功能是怎么样的，界面上展示的结构哪里有问题（背景），视觉用了什么样的方式改成什么样，解决了什么痛点（目标）
讲清楚谁给的需求，需要解决什么问题，是在原来的基础上不变动逻辑的情况下增加了什么达到了什么目的，才让你的叙述更完整，听起来更有逻辑。如果是一项新的需求，没有背景，那还得从设计分析说起，设计分析就是让你更专业的去做事，设计分析分为——用户分析，设计目标，和设计手段三个要点：
首先用户分析就是，分析你做的东西给谁看，而用户又分为群体用户和独立用户，在c端常见的就是独立用户，他们通常不定性，且有很多特征；在b端，目标用户一般是群体，他们大多数是有场景特性和行业特性，针对独立用户和群体用户，我们得出的用户特征、基本信息、需求结论也是不一致的，所以我们应该结合产品的调性分析一下我们做出来的设计究竟给谁看给谁用。常见的用户分析方法有：用户画像、用户访谈、问卷调查、焦点小组、眼动测试、用户反馈以及大数据分析，这些方法中最简单的是用户画像，就是举实际的例子列出真实用户的特征信息及使用场景。B端用户分析方法常用大数据分析和用户反馈，这两种方式通过对接需求的上下游就可以得知。
通过用户分析得出需求结论，满足需求就能达成设计目标——
设计目标结合卡诺模型来分析，卡诺模型—反应产品性能和解决用户需求的满意度的一种非线性关系，具体想了解的可以自行百度，站在巨人的肩膀上我们看得更远。 卡诺模型具备4种属性 ：1.必备属性：满足这个需求，用户满意度不会上升，但不满足这个需求，用户不满意会大幅度降低 ；2.期望属性：提供个性化需求，用户满意度会上升，不提供此需求，用户满意度会降低； 3.魅力属性：用户意想不到的效果，提供此属性，用户满意度大幅提升，不提供也不会降低 ；4.无差异：无论提不提供，用户满意度都不会改变，根本不在意；因此在做需求的时候我们应该尽力满足基本需求和期望需求，而可有可无的需求尽量不去做，降低效率。幸福需求是不容易达到的，如果能满足是非常棒的～这里就像是满足了设计心理学的三个层次——本能、行为、反思。
接下来是大家都熟知的设计手段，适当的讲一些述专业的设计技法，用不同的手段去实现的主画面，最后达到完成设计目标这样的结果，会让你显得更专业。设计的手段有很多种，这里主要讲述常用的三种，构图排版（采用什么构图方式，为什么这样构图是因为什么设计原则）、色彩运用（为什么使用这个颜色，因为这个颜色给人的心里感知是什么样的）、设计风格（采用什么风格最贴近产品调性，为什么用这个风格），但是讲设计时一定要记住产品的调性，不能偏离产品本身，不要盲目套用绚丽的技法，否则是不合适的。
很多时候面对非专业需求方收稿时，可能看到如下话语————
（心里是不是xxxx····“万马奔腾”，用个文明点的词）
非专业人士无法理解这二者的区别，他们认为他们的设计手段能达成设计目标，而作为专业设计师的我们就应该引导对方说出设计目标，再用我们专业的手段去满足对方的目标，去实现减少改稿次数，而不是让非专业人士去指导专业人士修改设计手段。分清这两者的区别，我们就可以在设计引导中更加主动。用设计分析的方法来讲述设计，举个例子——
会议管理——会议预约移动端优化，因为这是我们原有产品EKP里面的模块，PC端和移动端都有，因此用户可能是群体也可能是个人。所以针对独立用户和群体用户都做一个用户画像，得出他们的一些需求结论，然后目前幸福需求是没有的，纯属个人建议，日后如果有此功能，想必用户的满意程度也会大大提升。
概括一下已完成的整体主要页面，分析设计目标：
头部属于流量量较高的区域，采用卡片式设计，将会议内容置于此处，作为页面信息关键层，采用左对齐方式排版，突出会议标题和时间提醒用户。
通过不同的颜色标签，区分参会人员状态——
待进行未有操作反馈，选用橙色，属于可以持续进行并有明显提醒作用
已做反馈属于成功操作，选用已有用户认知心理的绿色
已知信息拒绝参与，是不太重要的，属于不再进行的阶段，选用灰色
接下来是设计作品的产出过程，一般情况下不可见的过程，为什么要去讲， 因为一个东西从无到有是很不容易的一件事，如果能讲述过程，就可以引燃情绪共鸣，让别人记住，让自己的设计作品也能有始有终——
设计过程一般分为四个阶段：初期阶段、中期阶段、最终定稿；具体的关键词和描述可以通过以下方式提炼出来，这里就不做详细说明了。
拿运营宣传来举个例子，我们公司中秋节月饼礼盒包装主视觉设计——
整个过程应该是有一个系统化的说明的，省略为写字的地方是我们可以插入的具体图片和过程，步骤差不多就是上述这些，可以有最初阶段的头脑风暴-提取关键词-清晰定位到中期阶段的团队合作—风格拟定-精选方案-细节刻画以及和物料方沟通对接的打样确定工艺等等过程…再到最后定稿的体验还原-问题优化…主画面的诞生是不容易的，强化这种过程参与，让不被看见的事也能展现。如果实在不好记录，你可以从一开始就截图你绘制的过程——
上图是用PS截图，再用时间轴将每一帧动态循坏播放，导出GIF然后截一张不变的底图合成就可以了。
最后是数据验证阶段，这个是设计落地的直观证实，包含主观认可和客观数据，具体内容就是通过用户或者专业的人士反馈给你设计落地的好坏，来判定你做的是否优秀成功。通常这一块的数据决定你验证你前面所有的过程，只要按照该流程认真做了，最后效果通常不会太差，如果出现很大的偏差也往往是意料之外的，因该寻求团队一起解决，不是某一个人的问题。
根据以上最后我们总结，好的设计就是满足以下4个方面：好看，好用，好记，能实现。设计师要考虑的维度不仅仅在视觉层面，什么是有产品思维的设计师，就是在执行时候要考虑上下游不同职能的工作内容，如果你的设计不能实现，再好看也是白费功夫的～从产品交互视觉多层面谈设计，会让你的设计包装显得不那么单调，系统化的方法总结到此，不足之处多多包含～谢谢你的阅读！
文章来源：站酷 作者：YiVi_eleven
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
尽管在工作中对于设计方案提出建设性和针对性的评价确实是非常难的，但不得不说，这一项技能对于每一位设计师，乃至每一位与设计师配合的职场人，都是非常重要的。
「只要我们付出了百分百的努力，最终结果一定会比第一版的设计要好。工作中，以专业的手段直接面对要解决的问题，切莫把过多的个人情绪带到工作中去，就像马东老师的米未传媒贴在墙上的标语：“有话直说是一种能力，也是一种责任。」
从业这么多年，合作过的产品、运营、市场、研发、测试形形色色，但是对于设计师专业度的评价，每个人都不一样，进行综合分析，我认为，最核心就是一下3点：
「但这里我要说的是，你自己必须做到足够专业，以下的这些是基于你给出的设计方案确实是经过认真思考后的，否则被业务方怼了也是活该。」
PART 01
在进行设计评价时，不要单纯的只是描述”我觉得…“、”我喜欢…“或者”我不喜欢…“，这无法真正解决问题，相信很多设计师也比较反感这样的评价。
我们需要深挖的是：
1、你对业务目标了解吗？该业务是用什么样的策略给目标用户带来什么价值，以及是如何实现盈利的？
2、你对设计目标清晰吗？设计师是通过何种设计策略来给用户带来价值从何实现业务目标的？
3、你有全局观吗？就是这样的设计方案是否是在现有的技术限制、用户认知约束、时间周期等等诸多条件下得到的结果？
如果没有以上，非设计师的朋友们直接指点界面颜色不好看，排版不合理，不够高大上等诸多评论，其实是很不负责任的。希望大家不要做坐在设计师背后指点江山的神。
PART 02
提问有助于设计师和业务方更好的沟通和信息传递，但在提问中不要夹杂感性的评价，而多用理性的思考。比如不要指着某个东西说”这个按钮太大了“，而要问”你为什么选择这个尺寸的按钮？“通过这种方式，你可以得到更多的背景和每个设计细节背后的原因，并感受到设计师是专业的，而不是一拍脑门的。
说服心理学中有一条铁的定律就是：”没有人喜欢被改变“。当你对我的设计指指点点的时候就证明我可能错了，为了捍卫我的设计我会非理性的做出防御性的对抗，感性的情绪表达只会让双方彼此矛盾升级，理性的表达和提问会让人更愿意交流。
所以，学会提问，比提出问题更重要。
PART 03
评价者的品味对于设计方案来说并不重要，也不应该成为讨论的重点，就像我上面说的”我觉得…“，此时你可以发出黄晓明的动图：”我不要你觉得，我要我觉得…“
不要发表“我只是个人不喜欢，最终还是看你们设计师的”这样的评论，说实话我每次听到这样的话都很火大，你都没想清楚这样不合适的理由，你跟我说什么？难道只是为了反对而反对吗？
下次如果遇到讲废话的需求方，可以直接回复：如果你不能推荐一种更好或不同的设计方案，那就别说了，不要浪费彼此的时间。
另外就是，建议必须清晰明确且可行，如果让设计师误解了你的意思，那可能比你什么都不说更严重，因为事态可能会朝着完全相反的方向发展，因此详细的阐明论点，也是一种职场沟通的能力。
PART 04
收到反馈后，首先，我们要分清哪些反馈对我们有用，哪些其实只是表达者的主观感受，把有用的吸纳进来，并做好笔记，先自我情绪冷静下来，不要急于去修改调整设计方案，多多思考流程和链路的问题。
很多设计师可能是出于多年的工作习惯，喜欢将别人的评论（尤其是有经验的设计或者领导）视为行动指南，在没有经过仔细思考的情况下采取和实施他们的想法，这很容易把自己变成一个提线木偶，久而久之彻底失去了设计师原本该有的创造力和反思能力。
设计是在美学与功能、解决用户问题与业务之间平衡的探索，设计师的方案也是在用户、公司也利益之间寻求平衡，没有一个永远正确的决定。每个人都会犯错误，每个人可能都有其背后的一番道理，无非是看问题的角度不一样而已，不要纠结于某一个细节，也不要执着于某一种特定的方案。
提升自己思考问题的视野和维度，知道如何拒绝毫无意义的反馈和评价，当你从界面细节跳脱出来看问题时，离一名真正的专业设计师就不远了。
文章来源：站酷 作者：设计情报局
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“作为用户体验设计师，我们的使命之一就是如何以最正确，最有效的方式将产品意图传递给用户。”这也是行业中大家的共识，关于设计原则也有很多，今天想给大家介绍的是 Don Norman 在《日常事物的设计》中提到的七项基本设计原则，我们将套理论付诸实践，然后通过测试，验证和迭代来提升设计体验。
PART 01
诺曼（Norman）的七项基本设计原则可以帮助确定一系列问题的答案，这些问题从目标开始，然后通过将结果与预期进行比较后结束。这七项基本原则是：发现、反馈、概念模型、示能、意符、图示、约束条件。接下来我们将从一个实际问题出发，来谈谈以下设计原则改如何运用。
我们的第一个问题是目标—我们实现目标的动力。举个例子来说：
「目标：“我们需要找到一双新的，合脚的，确定颜色和尺寸的跑鞋。」
下一阶段是计划如何通过发现和评估我们的选择来实现我们的目标。
假设我们选择了耐克网站作为首选购物平台。当我们初次进入网站，我们会看到很多不同的选项。
「发现模块」提升了选项的可见性。清晰的导航，突出的焦点和自然的视觉层次使其更容易发现和理解。
清晰的导航有助于我们轻松找到并了解网站的主要产品。但是，移动端的体验实际体验效果并不佳，因为汉堡导航很容易将信息遮盖。
耐克网站的产品详细信息页面通过清晰的导航，突出的焦点和自然的视觉层次结构选项更容易被识别。不过，您可能会争辩说，这些复杂的信息干扰到 “添加到购物袋”的这一关键行为。
焦点是吸引人视觉的主要区域，其中包括引人入胜的图像和视频，描述性标题以及清晰的号召性用语，例如“了解更多”和“添加到购物袋”。
以上所有组件均作为视觉层次结构的一部分进行排列，以帮助我们按照接收到的重要信息的顺序进行浏览。它们的位置也符合最佳的阅读模式——例如，导航栏，过滤器控件和跑鞋结果分别组织在类别页面的顶部，左侧和右侧。
其他设计原则（包括概念模型，示能，意符，映射和约束）也可以帮助我们弄清楚如何使用该网站。
许多网站功能中都存在概念模型，尤其是用于对结果进行排序和过滤的导航和控件。这些熟悉的设计模式告诉我们它是如何使用的。例如，我们知道通过过滤器将有助于优化筛选结果。
功能可供性应用于各种网站组件，例如按钮，选择框和手风琴导航，使我们可以了解如何控制和使用它们。但是，某些能力依赖于意符来阐明预期的操作。
意符被广泛用于传达应在何处执行操作，尤其是示能较弱的扁平化按钮。一个简单的描述（例如“查看更多”或“添加到购物袋”）足以告诉我们预期的操作。
映射向我们显示了对象之间存在关系的位置，例如产品详细信息页面上，当我们选择适合的款式和颜色的选项时，我们会看到可用的尺寸和价格会与之对应产生变化。
约束限制了可以使用信息的位置，地点和时间，以减少杂乱并降低认知负担。例如，导航最初仅向我们一级导航。
购买工具为我们提供了可能选择的选项序列的概念模型。禁用状态还用于将我们的操作限制在只能选择有库存的商品的范围内。
了解了如何使用网站后，现在我们可以指定要执行的一系列操作。让我们在网站上继续进行以下活动：
「行动：购买时需选择产品规格，包括合身性，颜色，尺寸，然后将其添加至购物篮。」
概念模型、可发现性、映射、约束、示能和意符可以帮助我们确定操作顺序：选择合适的→选择颜色→选择尺寸→选择添加到购物袋。
在某些情况下，某些选项（例如大小和颜色）可能缺货。如果产品不可用，则禁用按钮状表达了操作行为的限制，只能选择有库存的商品，这是非常必要的。
不同的控件交流其功能，用法以及如何向我们展示其效果
现在，我们需要实际执行我们选择的一系列动作。示能，意符和映射将帮助我们执行操作。例如，按钮的感知外观使我们想要按下按钮，标签告诉我们控件的功能，而映射使我们能够看到刚刚操作的效果。
一个简单的确认消息会通知用户发生了什么，并提供一些其他选项的可见性
一旦执行了选择的一系列动作，我们就需要收到有关请求的信息，这就是反馈。
购物车确认消息为我们提供了有关所选跑鞋的有用反馈信息，包括名称，颜色，尺寸，价格和数量。同样还提供了成功的信息和一些其他选项。
看到这些变化之后，我们现在需要将其转化为有意义的东西。反馈对于再一次为我们提供足够的信息来确定我们的行动结果至关重要。成功信息——“已添加到购物袋”和绿色的勾号图标说明发生了什么，其他选项表示我们现在已选择购买这双跑步鞋。
每个粉丝都希望看到的确认消息–真是令人高兴的时刻！
最后一个问题询问了结果是否符合我们的期望。我们可以将结果与目标进行比较。
到目前为止，我们已经使用了所有七个设计原则来确定问题的答案。现在，反馈将能够确认我们的行为是否带来了成功的结果。如果结果不是我们期望的，那么我们至少需要了解发生了什么以及下一步该怎么做。
反馈可以诱发积极和消极的情绪。如果结果不是我们所期望的（例如错误），则它们可能会引起混乱甚至愤怒的感觉。但是，当我们实际执行的动作可以实现我们的目标时，我们将感到非常喜悦！
例如，在耐克移动应用程序 SNEAKRS 中，客户可以参加抽奖来购买限量版鞋。紧张的 30 分钟倒计时结束后，获胜者会收到一条特别的消息，确认他们的抽奖结果，这为他们的经历增添了很多乐趣。
「结果：看到此消息给我带来了真正令人满意的体验——幸运的赢家。」
PART 02
应用设计原则进行 UX 设计是非常表层的。当人们在使用该产品时，我们需要了解他们的想法，感受和看法。他们可以使用吗？他们觉得有用吗？他们会再次使用它吗？
比设计原则更重要的是与真实用户进行测试，以了解他们对设计的行为和态度。然后，可以利用丰富的用户见解来改进产品。
我们若能够越早且越频繁的测试我们的想法，就能够越早的迭代产品，以更快的速度满足用户需求以及帮助实现业务目标。以下是一些流行的研究方法的概述：
远程用户测试是非常快速与灵活的，并且非常适合于早期经常需要设计验证的情况。参与者使用屏幕录制软件收集有关设计的反馈。远程用户测试为获得更多的洞见提供了便利。
面对面用户测试，就是我们常说的线下用户访谈，这种测试要适量，通常会有一个主持人。在研究期间，主持人可能会根据问题提出任务或新的活动。这种类型的研究比较花费精力和时间，但与大多数方法相比，它可以为您提供更有价值的见解。
游击队测试是指调研团队无拘无束地采访随机人群。您可以选择某些地点来确定适合您所测试设计的受众特征。迄今为止，这种研究方法是比较节省成本的，尽管您可能需要考虑向参与者提供少量奖励，以感谢他们的时间和努力。
定量测试涉及对大量用户进行研究。典型的测试包括卡片排序，树形测试，点击测试和超时测试。这些研究可能无法为您提供用户做出某些决定的原因的答案，但是它们可以帮助确定点击次数，思维模型和完成任务比率的时间。
PART 03
一旦用户测试有了结果，就可以对结果进行了。这可能需要一个漫长的过程，即整合意见，将见解归类并提出新的改进建议。
研究建议可以帮助确定要解决的可用性问题和要关注的痛点，以及增强整体用户体验的机会。这就是 UX 流程的迭代。使用相同的原理进行设计优化，然后进行测试，直到产品满足用户需求为止。
诺曼的原则可以帮助我们加深对用户交互的理解，包括人们提出的问题类型、他们的认知过程以及情感水平。如耐克网站的案例研究所示，这七个基本设计原则可以帮助我们确定问题的答案，并找到影响积极情绪（如愉悦感）的方法。
但是，设计原则实际上只是UX过程的开始。为了确定产品的体验质量，我们需要与真实的用户一起测试设计，然后使用洞察力进行必要的迭代。
以上内容源于 Don Norman 的畅销书《日常事物的设计》。它是 30 多年前编写的，但至今仍然对设计行业有着深远的影响。当然，还有更多的原则可以采用，但是 Norman 的设计哲学可以作为我们在设计工作中遵循的 UX 基础。
文章来源：站酷 作者：设计情报局
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前言
在企业工作中，每一个问卷调研都始于一个商业问题，问卷的质量也决定了最终结果是否能对业务起到帮助。本文将从定义问题-问卷设计-数据清洗与分析-报告撰写这四个基本步骤相对完整地阐述企业问卷调研，希望可以给大家提供一些研究方法上的思路。
定义问题：情境分析法（SCQA）
在商业问题解决的过程中，既有公司内部的因素，也有外部行业的因素，影响因素错综复杂；周围的环境也比较容易发生变化，具有很大的不确定性；同时又要保证解决方法的可落地性，产生实际的价值。相对来说，会比较复杂。在进行问卷设计之前，更有必要的是将问题梳理清楚，再决定是否采用问卷这种方式。
1.1 结构化思考：使用SCQA描述项目
SCQA是将不确定性考虑在内，一种结构化的问题分析方法，可以比较好地系统思考、查漏补缺。它包含四个环节：
情境（Situation）：由大家都熟悉的现状或事实作为起点，包含对象、所处阶段等
冲突（Complication）：实际情况往往和我们的目标有冲突，颠覆了稳定的状态。说出行动的原因，包含威胁、机会和等着我们去克服的困难点
问题（Question）：基于冲突提出问题，要怎么解决这个困难点
回答（Answer）：我们的解决方案是什么，定位出需求点
1.2 如何洞悉情境和冲突：搞清楚为什么做调研
假设我们拿到上述案例作为调研项目，可以有两种方式去进行洞悉情境和冲突：
一是思考为什么要做这个研究；二是跟相关利益者访谈尽可能多地获取信息。
1）思考为什么要做这个研究：
- 需要回答什么问题？
- 为什么回答这些问题很重要？
- 打算如何使用最终的调研结果？
2）跟相关利益者访谈：
- 核心业务方是谁？其他业务方是？
- 每个业务方的关注点是什么？难点是什么？
- 各个相关方的目标之间是否冲突，是什么冲突？
根据上述方法，可以得到对应的情境和冲突：
情境：目前有三种产品方案A/B/C，分别对应的价格为100元/1000元/10000元。通过上述思考和信息了解，会知道这个事情和谁有关，在这个事件中承担什么角色。
冲突：B的销量不佳，跟其他方案差异不明显，瞄准客群很有可能有重叠，未成交客户难转化，希望可以方案B进行调整。在用户层，可能其他方案中的功能能满足需求，不需要购买方案B；在公司层，整体收入结构可以更优化、健康；在业务层，系统和流程可能不太合理，有些可能需要重构。
1.3 问题拆解其实是建立一个假说/逻辑树的过程
我们可以将问题进行拆解，拆解应遵循MECE原则（相互独立且完全穷尽），这么做的好处是可以把问题进行逐层分解，逐级分析，最大可能保证需要考虑的因素全面不遗漏。
案例中的问题，可以从用户方面、竞品方面、成本/利润方面进行拆解，针对每一个层面的问题又可以进行拆分。
对问题进行细致拆分之后，针对每个问题有不同的解决方案，有一些问题可以用问卷来解决，有一些问题需要使用其他方式进行解答。
问卷并不能解答所有问题～～
问卷设计
2.1 问卷的用途：定量为主
一般通过问卷来进行大样本的数据收集，主要以用户的基础数据、行为数据和态度数据为主，既可以作为独立的调研项目，可以跟其他方式进行结合，比如说结合访谈、结合企业内部的数据，本文比较推荐的方式是多种方式结合进行交叉验证，提升调研结果的可靠性。
2.2 问卷设计的原则
基于第一部分的定义问题阶段，已经对问题进行了分析，在此基础之上，我们需要确定哪些问题可以由问卷进行解答，并明确问卷的研究目标与参与对象。特别地：利益相关方（项目组成员间）在项目前期应该达成统一，避免后续产生分歧，付出额外的沟通成本不说，还有可能相互甩锅。
2.3 问卷的基本结构
一份问卷的基本结构包含标题、招募语、甄别题、主问卷、用户基本特征、结束语。
2.4有逻辑的设计问题
一份有效的问卷需要从如何提问、如何措辞、如何设置答题逻辑、如何设置题目选项这些方面去考虑，设置有效的问题。以下是问卷设计中的一些基本原则：
2.5 提升回复率的tips
个性化：在说明信件/邮件或邮件开头注明回复者的名字、研究活动的目的、所需时间。向回复者强调他们反馈信息的重要性。需要注意的是，这里出现信息错误，会降低回复率。
控制篇幅：问卷完成时间不要超过10分钟，注意控制问题数量，避免出现需要大量思考、较难回复的题型。
用户激励：奖励参与者油卡/现金红包/优惠券等，昂贵的激励物没有特别显著提高回复率，所以小的激励就可以。
数据清洗与分析
3.1 数据清洗原则
剔除有效范围外的数据：排除异常作答时间值（比如作答时间为10秒），判断为作答不认真。可以根据题项来确定，一般10道题设置筛选出60秒之内的问卷。
剔除连续重复值：在时间范围内，再核查问卷是否出现连续重复值，出现的问卷予以删除。如果问卷数量较大，可以使用STATA软件编码或Excel条件函数判断进行处理。
剔除违背逻辑一致性的数据：在时间范围内，核查问卷是否存在前后逻辑不一致的题，比如总体满意度打分为非常满意，但后续题目都选择了非常不满意。
剔除有缺失值的数据：严格来说应该将有缺失值的用户予以删除，但有时候回收样本量没有那么大，则可保留。
3.2 数据分析方法
数据分析方法有非常多，要在众多的分析方法中选择一种也是比较难的事，无论选择什么样高大上的方法都是其次，最重要的是选择的分析方法能说明问题，能体现数据的价值。
比较分析是一个简单的、比较通用的、易于理解的数据分析方法，可以分成趋势分析、特征重要性、分组分析三种。
报告撰写
最后，条理清晰地展现数据信息，表达你的观点。报告写作的过程是一个相对费劲的过程，特别是数据量多的情况下，总是觉得还有一些数据价值没有被挖掘出来，但此时不要拘泥细节，细节可以回头再补，会大大提升效率。
4.1 问卷的报告框架
报告主要发现：将总结放在最前面，阅读者可以通过简短的总结大致了解报告观点，方便他们决定是否需要继续了解详细内容
目录和分目录：报告包含的内容组成部分，让阅读者对报告内容有初步概览
调研背景和目的：陈述整个报告的背景和目的，对调研的范围进行必要说明
单页-详细内容描述：有逻辑的描述项目的发现，总结数据表现，挖掘价值
单页-详细内容描述示例：
问卷调研不止是问卷本身，还包括前期项目组沟通、项目成员分工与配合、后续结果推广、结果推动落地等，前期做好项目组沟通、明确项目分工，建立一个清晰的运行机制，有利于项目组成员对结果的认同，后续也有清晰的路径去分工解决问题。所以，每一个环节都体现工作的价值，都同样重要。希望大家在关注研究方法提升的同时，也可以更多关注更多工作方法提升。
文章来源：站酷 作者：酷家乐UED
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当公司的发展规模到一定程度时，考虑到信息安全、持续采购成本与相关风险，企业会采取自研的方式来实现部分协同工作软件的自产与自用，本文将以内部目标管理系统为例，阐述我们是如何系统化的做企业系统设计改版？
什么是OKR？
OKR，是Objectives 和Key Results 的缩写,即目标和关键结果，它是企业进行目标制定和过程管理的重要手段。酷家乐同样采取OKR的管理方法，将公司目标层层分解到团队，部门再到个人，在各个层面贯穿和统一起来，以帮助实现目标达成。
理清业务目标，制定设计策略，是系统性改版产品的前提，在实际工作中设计师很容易被产品的原型、对产品的描述蒙蔽，只有非常清楚的理清业务的目标，才能制定系统性、合理的设计策略来支撑业务，通过专业的设计方法来助力业务结果的达成，在这个项目中我们是如何做的呢？
OKR系统的改版项目最开始是高层的诉求，提的业务要求很简单“ 让大家用起来，目标管理起来”，那么如何让大家用起来、利用系统将目标管理起来是当前需要解决的的问题。
以一个普通员工【小何】为例，在OKR系统中进行OKR制定时，通常需要与多个角色产生关联：
③结束回顾，包含查看、追溯、复盘
（1） 清晰的页面结构：
让用户能明确的感知到系统的整体结构是有规律的，可以简单被理解的，即左边全局控制，右边内容展示
我们把消息类型通过两个维度定义消息的优先级：“重要性”和“紧急度”，通过四象限法则，我们拆出来了：
通过此模型和产品确定了每一个消息类型的所在位置，且清晰表达的了每个消息应当的位置
在设计的过程中，为了进一步的验证设计合理性和易用性，针对角色代表进行了8组可用性测试，最终普遍反馈新版的操作体验更好。
蓝蓝设计的小编 http://www.lanlanwork.com