你是否有在听别人说某某原理法则时一脸懵B的时候？明明知道这个原理却说不出它的名字？不要紧，本文就来介绍与人机交互设计相关的15个常见的设计心理学原理，约13000字，帮助你了解产品的定位，需求目的和交互逻辑，洞悉用户的各种行为，也为自己的设计予以理论支撑。
1956年美国科学家米勒对人类短时间记忆能力进行了研究，他注意到年轻人的记忆广度为5-9个单位，就是7±2法则。与席克定律类似，神奇数字 7±2 法则也经常被应用在移动应用交互设计上。
因为人脑处理信息的能力有限，所以它通过把信息分成块和单元来处理复杂问题。7±2法则应用很广泛，例如iPhone通讯录中的手机号码被分割成”xxx-xxxx-xxxx“的形式，还有银行卡号、身份证号，我们总是喜欢把一长串数字拆分开来读写，目的就是降低记忆成本，提高信息的易读性，从而达到视觉防错的作用。
Web导航栏选项卡数量不超过9个
在设计网页导航时，如果希望用户记住导航区域的内容或者一个路径的顺序，那么数量应该控制在7个左右（不超过9个），如苹果、Dribbble、behance等网站的导航分类。
Web导航栏选项卡数量过多时
如果导航或选项卡内容很多，可以用一个树状层级结构来展示各级别关系，但要注意其广度和深度的平衡。例如人人都是产品经理和Dribbble，把更多子类别收在二级目录里。
移动端选项卡导航
在移动端应用设计中，常见的电商app例如奈雪和乐凯撒分类模块，两个产品的商品分类布局形式很相似，都是用了选项卡的方式来分类商品，层级明确，相应的提升了用户找寻单品的效率。
Tabbar区标签最多不超过5个
在移动应用设计中，底部Tabbar最少3个，最多为5个（几乎没几个超过5个），这样做除了减轻用户记忆负担，超过5个会降低视觉和操作上的体验。事实上就算只有4个，我们也经常想不起微信底部的4个Tab分别是啥。
顶部导航栏页签
我们看到的大部分app顶部导航栏的页签数量都严格遵循了7±2法则，虽然在横轴可无限滑动，
但在显示区域只保持7±2法则的显示数量，例如马蜂窝、飞猪旅行等。
金刚区图标不超过8个
我们常说的“八大金刚”就是一屏显示8个图标，超过的则放在第二屏。如果两行10个，往往第十个是“更多”入口，总的来说也没超过9个。
banner文案不超过9个字
产品运营banner主文案字数通常控制在9个字以内，在设计时也通常把长标题一分为二排两行，便于用户快速阅读，提升点击率。
在交互设计中，7±2法则是减少用户认知负荷，提升用户体验的重要环节。同时还强调了在设计过程中对产品的预见性，避免在不断为产品添加功能时，破坏原有的视觉基础。
0无需说明书
乔布斯曾说过：“苹果应该创造所有人都可以使用的产品，即使没有用户指南”。
1 一看就会
简单易懂，看一眼就明白你想说什么，不用教学就知道怎么用。
2秒法则
所谓“2秒法则”，是指用户在使用某类系统时的等待时长不超过2秒。在极短的时间内展示重要信息，给用户留下深刻的第一印象。这里的2秒只是一个象征意义上的表达，也许有一点随意，但是这却是一个合理的数量级。我们熟知的“F”浏览模式其实就是间接缩短用户看到重要信息的时长，达到快速浏览的目的。
进入App的首页加载时间如果过长就会导致用户产生厌烦情绪，很容易退出甚至卸载App的行为。因此我们看到许多应用将首页加载时的空白页进行占位图设计。
下拉刷新也是一个设计点，为避免刷新时间过长，设计师通常会在加载动画上做文章。充满趣味性的动效能安抚用户焦躁不安的心情，无形中降低了用户对等待时间的感知。
APP里面的banner设计要有视觉冲击力，如果两秒之内没有抓住用户的眼球，可能就被用户忽略了。
因此，在设计互联网产品的页面时，用户等待的时间越短，用户体验越佳。反之，就会让用户产生焦虑的情绪。
3次点击法则
用户在3次点击之内如果还没有找到他们想要的信息或了解网站特色，他们就会离开该网站。这条原则突出了清晰的导航，符合逻辑的结构和易于理解的网站层级的重要性。(来自《众妙之门》P133)
其实在交互体验中，点击的次数往往是无关紧要的。只要每次点击都是无需思考的，毫不费力地顺势进行，那么用户的挫败感就会大大降低。如果你的网站能够让用户知道他在哪里，从哪里来，要到哪里去，并且能够让用户了解如何完成目标，这样的点击即使有10次也是没有问题的。例如，在京东购买一件商品需要经过“立即购买>确定>提交订单>选择支付方式”4次点击才能到订单支付页面完成购买，这过程中可能还穿插其他的点击行为（比如选择地址、优惠券），用户并没有感受到不方便，使用过程流畅而自然。
在可用性测试领域，“三次点击”定律一直是一个很具争议内容。体现在以下几点：
·研究表明，用户在超过3次点击还没到达想去的页面时，往往并没有退出网站，而是会继续多点几次；
·当把一个3次点击就能到达的流程改为4次点击的时候，用户发现目标页面的能力反而提升了600%；
·合理的导航系统比点击次数更重要；
·比起“3次点击”，有人提出了“1次点击”定律，即用户的每一次点击都应该让他们更接近目标，同时尽量减少能干扰实现这一目标的因素；
·用户抱怨要花很长时间才能找到某个产品，实际上他们是在抱怨无法找到想要的东西，如果用户找到了想要的东西，他们就不会抱怨点击的次数了；
英国心理学家William Edmund Hick认为，在简单的判断场景中：一个人所面临的选择越多，做出决定所花的时间就越长。有时候在选择中花费太长时间从而导致决策失败。
生活中我们也经常会面临选择困难症，比如早上起床就纠结今天穿什么？中午去食堂就会纠结吃什么？造成我们如此纠结的原因就是因为选择太多了（远古人就没这些烦恼，寻找食物时逮着什么就吃什么）。
在设计中的应用
应用到界面设计中也是如此，选项越多，意味着用户做出决策的时间越长。
例如APP Store首页，改版前的首页把众多app平铺出来，对目的不明确的用户来说选择有点多。改版后的首页大幅减少了App的数量，卡片的设计方式简洁且目标清晰。
不得不面对较多选项时， 对主要和次要的选项做视觉权重区分，做好设计上的归类，提升用户做决定的效率。例如美团外卖金刚区第一行5个入口的图标在尺寸和表现手法上都比下面的入口图标要大更醒目。“我的”页面把一些低频率功能或不太重要的功能收纳到“设置”里，此外还可以通过置灰、锁定等方法间接减少选项，降低干扰。
对于多流程的任务进行分步操作，让用户专注眼前任务。 例如Clubhouse注册时，把需要用户选择的选项分步引导完成，让用户能专注当前行为。
对于多种类别的选项应当做二次分类的区分，我们都知道电商平台的品类繁多，仅通过单一分类是不够的，比如数码频道下面还分相机、影音娱乐、数码配件、智能设备、电子教育等大的分类。商品详情页的筛选功能也是贴合使用场景来设计的，所以分类不怕多，就怕混乱。
适用边界
虽然选择越少，用户做决策的时间越短，但这并不是提高用户体验的唯一标准，过度的减少选项，可能导致负面效果。
如上图右，如果在删除App的弹窗中只有一个“删除”选项，没有明显的取消之类的途径，那么用户会觉得特别难受，感觉被强迫去删除。如果当下有急需使用手机处理一些事情，那么这样会把这种负面情绪给无限放大，让用户抓狂。
希克定律主要受影响于选项的多少，但是它不适用于需要高难度阅读的任务。例如考试试题每道题只给你A、B两个选项（学渣窃喜），那也太容易蒙了，这就是希克定律在答案试题中的局限性。
希克定律是一个可以适用于设计的指南，记住要尽量减少用户在一次决策中要做的选项，因为决策效率是一个产品导致用户流失的重要原因之一。引导用户在明确的选项之间进行选择，以便快速将他们送到某个地方（例如账单支付），这将大大提升用户体验并达到你的目标。
费茨定律由心理学家Paul Fitts提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。举例来说，你伸手去拿桌子上的咖啡杯，开始你的手臂迅速地往杯子位置移动，接着你会放慢速度直至找到杯子把手，这个杯子把手的大小与你“抓住”它有着一定的关系。
如上图所示，如果光标现在在任易地点想要去点击目标target，最短路径一定是D，最短路径上容错的最长路径是D+W，只要水平上移动超过了D+W你就点不到了，而这个点击动作所耗的时间是一个常数加上一个以D为正比W为反比的函数的和。
详细解释如下，图中红色方块代表点击目标，虚线代表移动路径，此时因为红色方块目标较大，所以用户从任何一处点击都很容易（可以用鼠标在屏幕任意点移至红色方块试试）。
相反，红色方块目标变小，快速点击就会困难很多，很难一次到位。
但如果红色方块目标很小距离很近的话，因为移动范围小，也能准确的点击到。
按钮越大越容易点击
在页面中，大而近的目标区域意味着用户不需要做太精细的调整就可以轻易的触达目标。比如页面中的大按钮。
将按钮放置在离开始点较近的地方
夸克浏览器的搜索栏就放在离手最近的屏幕底部区域，相比常见顶部搜索栏更方便操作，效率更高。
相关按钮之间距离近点更易于点击
注册登录界面，通常将「注册」和「登录」放到一起，不仅可以在视觉上增强用户对他们相关性的认知，还可以减少在他们之间的距离 。
适用边界
费茨定律鼓励减少距离，增加目标大小以提升用户效率，但反过来亦适用。比如iPhone关机按钮，没有使用点击关闭，而采用滑动操作，还把按钮放在屏幕顶部，这样明显增加了操作难度，进而避免了用户误操作。
App弹窗经常把“关闭”按钮放在卡片的右上角离手远的地方，希望用户先完成弹窗提示的任务。还有启动页广告，喜欢把“跳过”按钮放在难以点击的右上角（恰饭重要），以提高用户的误触机率提高转化。
思考小结
按钮越大越容易点击，因此在程序开发中，会增加按钮点击的热区范围，减轻用户精准点击的压力。但也不能过分的大，容易引起误触；
让相关联的内容更靠近彼此，用视觉手法增强用户对它们相关性的认知。距离产生美，注意不要靠的太近，会出事；
将按钮放置在离出发点较近的地方，比如页面主按钮一般会放在屏幕底部易操作区域；
屏幕的边角很适合放置像菜单栏和按钮这样的元素，因为在屏幕边缘和角落位置有“无限可选中”的属性，可以大胆操作而无需“微调”，参见macOS底部dock栏；
定律的反向使用可以适用一些特殊场景，比如想达到某种目的而降低按钮被点击的可能；
“任何事物都具有其固有的复杂性，无法简化”。
泰斯勒定律（Tesler’s Law）由Larry Tesler于1984年提出，也称「复杂度守恒定律」。
该定律认为：每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。
生活中很多我们习以为常，感觉便捷方便的生活方式，是无数卓越的数学家、工程师、设计师等无数的时间投入，才实现的某个小功能，是他们把这些复杂性转移到自己身上替我们简化了。
说回移动端，每个应用中都有其无法简化的复杂度，也不能按照我们个人意愿去除这些功能。这就是为什么飞机稿都简洁好看，而一搬到线上就面目全非。常见的复杂性转移有：“查看更多”、“查看全部”、“查看详情”、“展开和收起”之类的文字做转移跳转，比如：顶部导航栏的更多图标，就是将常用的功能整合并隐藏在首页设计的更多功能模块中，把用户的操作范围转移到另一个地方。
除此之外，还有一些降低操作复杂度的方法：
删除、组织、隐藏
视觉层面的“降噪”方法，删除会干扰用户操作的选项；功能分类明确，围绕用户行为组织信息内容；隐藏那些不常用而又不能少的功能，延迟及阶段性展示。总的来说就是将复杂的信息收起来，展示重要且简洁的界面。
简化交互设计
可以用代码节省用户操作时间的地方，是互联网人一致的追求。例如，B站的一键三连，用户长按点赞按钮，会同时触发点赞、投币和收藏，省时省力。
算法解放“生产力”
个性化算法就是通过技术手段，将用户复杂度降低，而转移到开发者身上。抖音为什么会让人上瘾？是算法知道了你的喜好，专推给你喜欢的内容而不用自己去找，谁都喜欢私人定制。这对用户来说是一件好事，但就像鲁迅说的：“你觉得好，一定是有人在负重前行”，这里的简化复杂的难度就转移到设计和开发身上了，还逼得机器去学习。例如抖音、淘宝、知乎首页推荐的内容都是基于你的喜好定制化推荐给你的。
我们常说以用户为中心去设计，就需要从用户角度出发，在交互设计中尽量简化操作的复杂度，降低学习成本。但如“复制粘贴之父” Larry Tesler (1945-2020) 所说：“任何事物都具有其固有的复杂性，无法简化”。因此，如何取得复杂度的“平衡点”就是重要的部分，是让工程师及设计师花费大量时间去降低产品的使用难度，还是在设计中保留一定的复杂度是我们需要思考的事。
该原理是由麦肯锡国际管理咨询公司顾问Barbara Minto提出的理论，她强调结论先行，论点自上而下。
你是否遇到过这样的场景，部门开会时有人口若悬河的讲了半天，到最后你都不知道他想说什么。所以如果开会时你会走神，这不怪你，只怪讲演者说话没有逻辑，没有重点。
金字塔原理指示结构化表达遵循结论先行的原则，即任何问题都能归纳出一个中心点，让受众能够第一时间清楚你想谈论的主题。然后由数个论据作支撑，而这些一级论据可以继续由数个二级论据支撑，如此延伸，状如金字塔。自上而下，上层影响下层。
应用到交互设计上，即将信息展示的重点与交互行为的主任务优先展示，再根据用户在这个界面上所愿意停留时间逐级给予更多细节补充。以京东的商品详情页为例，首先金字塔的最上层是用户目标明确直接进行“立即购买”的底部全局按钮，其次是商品的头图和用户评价这些，让用户了解更多信息，进一步促成购买，最后一层是提供商品相关的全部信息、参数、评分等，确保交易的最终完成。在这个过程中，用户在每一层花的时间也在逐级增加，呈金字塔状。
映射到设计师身上也是如此，从设计新人到设计总监，中间差的就是一个完整的设计技能金字塔。就像升级打怪，每完成一项任务获得相应的经验值，累积的经验值帮助我们更快的升到下一级。当把工作中的需要攻克的难题一一解决之后，你的设计水平会在不知不觉中更加精进，形成一套自己的设计风格，成为一名优秀的设计师。
有趣的是，把金字塔模型倒过来就成了“用户漏斗模型”。自上而下，激励用户成长。它告诉我们：
用户的需求是永远满足不完的，所以什么值得做，什么是可分阶段去实现的是决策人需要明白的。如乔布斯所说：“消费者并不知道自己需要什么，直到我们拿出自己的产品，他们就发现，这是我要的东西”；
不断完善主要功能，以满足金字塔顶的核心用户群。决策者常常添加一些自己想要的而不是用户想要的需求，比如在信息流中添加一个广告位；
如何优化完善产品架构，检验产品策略的合理性和完整性；
防错原则由世界著名的品质管理专家新乡重夫提出，即在过程失误发生之前加以防止，是一种在作业过程中采用自动作用、报警、标识等手段。使操作人员不用特别注意也不会失误的方法。
防错原则认为大部分的意外都是由于设计的疏忽，而不是人为操作失误，可以通过优化设计把过失降到最低。该原则最初用于工业管理，后来应用于界面交互设计中，当使用条件没有满足时，常常通过功能失效来表示。
自动检测提示
bilibili在登录时输入框没有内容或没有输密码时，登录按钮处于禁用的置灰状态，只有两者都满足了才可以正常点击。此外登录功能就可能会有用户名错误、密码错误、网络超时、邮箱错误等不同的错误。通常必须账号和密码同时满足且匹配才能成功。
Twitter发帖时只允许用户输入140个字，为了提醒用户，其解决办法是在键盘上方的工具栏上显示还能输入几个字符，超过会以负数警示。知乎发布文章标题过长时也会提示错误预警。
消除可能的失误
防错法则认为大部分的出错都是产品设计的不够优秀，而不该责怪用户操作疏忽，通过设计手法可以把出错率降到最低。防错法则的核心观点是，如何有效的在用户出错之前就尽量避免错误的发生。比如，美团外卖在接受短信验证码时，系统会自动提取验证码在键盘上方显示，用户点一下就可以自动填写，省去了跳出应用——打开短信——记住验证码——再输入的繁琐过程，有效预防了出错的机率。还有微信在绑定银行卡时也是通过扫描银行卡自动提取账号，避免手动输入的出错率。
将失误降至最低
二次确认，在一些比较重要的场景让用户二次确认，通常以弹窗的形式告知用户再次让用户考虑自己的行为结果，进一步降低出错率。例如，最近大家都在用的报税App，会在提交信息前再次确认。
视觉暗示
可在视觉（置灰或隐藏）上屏蔽那些不能选的选项，避免用户点击后才报错或点击没反应。
其次，一些不可恢复的操作，视觉上通常会给强标识。例如，删除短信时的文字颜色“变红”。
为用户犯的错买单
当用户输入错误信息时，比如打错字，系统应该给予用户想要的信息，而不是无动于衷，冷漠视之。
范围限制
其实限制用户的选择并不是一个好主意，但是如果有明确的规则来定义可接受的选项，那么限制用户可以输入的类型是一个很好的策略。例如，Airbnb订房可选日期和设置闹钟时的时间范围。
研究得出，使用产品时有77.7%的错误都是人为的，防错法则可以帮助设计师站在用户体验的角度考虑设计方案，做到操作前、中、后都有及时的反馈，预测到他们有可能发生的误操作状态，让用户更快完成目标，帮助用户减少出错率。
每次拿起U盘插入电脑时，我就呆住了，到底朝那个方向才是对的？
防呆（Fool-proofing）是一种预防矫正的行为约束手段，运用避免产生错误的限制方法，使出错的机会降至最低，进而达到“第一次就把工作做对”之境界。
设计师应谨记：不要认为用户是专家。比如，我们都知道“汉堡”图标就是菜单，点击这个按钮就会调出某些功能。但是设计师忘记了普通用户可能并不理解什么是汉堡包图标、什么是面包屑、什么是抽屉式导航、什么是3Dtouch、怎样双指滑动。更何况普通用户并不会研究App，在他们眼中产品只是众多工具中的一个。因此，一定要把交互和设计做的简单，通用的图标、功能和交互方式最好保持用户熟悉的样子，减轻用户重复学习的负担。每个页面应强调一个重要的功能而不应该让用户做选择题，这些都是有效防呆的好方法。
△页面的中主按钮更突出
防呆设计是预防错误发生的方法，让非专业、无经验的用户可以高效完成正确操作，不要让用户去思考，而是我们时时为用户思考。
又被称作“简单有效原理”：“如无必要，勿增实体。”
通俗点去理解“如无必要，勿增实体”可以理解为“不要浪费较多东西去做用较少的东西同样可以做好的事情。”或者表述为“在其他条件相同的情况下，要求得越少的那个就越好，越有价值”。
应用到设计学领域，该法则认为做产品时功能上不可过于繁琐，应该保证简洁和工具化。例如，产品中为用户提供了收藏功能是否就不再需要喜欢？提供了喜欢是不是不再需要收藏？一定要保证功能上的克制。不必要的设计元素会导致使用效率降低，还会增加不可预知的后果。建议在不损及功能的前提下，干掉多余的元素，当两个设计方案都能达到设计目的时，选择较为简单的那一个有利于更好地传达内容更好地用户体验。
总的来说，我们可以结合《简约至上》一书中提到的删除、组织、隐藏、转移四个策略来将复杂的设计和体验变得更加简单。
删除：关注核心，让用户注意力集中在自己要完成的目标上，删除不必要的功能、流程和造成视觉混乱的元素等；
组织：繁琐的功能通过分块，被组织成清晰的层次结构。还记得我们前面说到的“7±2法则”吗，把项组织到7加减2个块中；分块越少，选择越少，用户负担约轻；
隐藏：隐藏那些主流用户很少使用，但自身更新需要但功能。通过渐进展示和适时出现的方法减少干扰；
转移：把合适的功能转移到合适的设备上去。让用户感觉简单的一个重要前提，就是先搞清楚把什么工作交给计算机，把什么工作留给用户。
小测试，下列饮料中哪一种给你印象最深刻呢？文末揭晓。
可口可乐、雪碧、芬达、崂山可乐、7喜、美年达
雷斯托夫效应又称隔离效应（isolation effect），以及新奇效应（novelty effect），前苏联心理学家冯·雷斯托夫认为，某个元素越是违反常理，就越引人注意，收到更多的关注。
一样东西与以往经历明显不同就产生了经历差异。比如人生中的很多第一次，第一次高考、大学的第一天、初恋、第一份工作等等。该差异也会出现在新奇面孔、电话号码记忆中。奇特的面孔和特殊的电话号码更能被人记住。
该理论以多种不同的方式应用到设计中，最明显的就是如果想要突出某个重点内容，就要使它特殊化，通过色彩、尺寸、留白、字体粗细等设计手段。利用对比来凸显想要表达的重要信息。例如金刚区、tab栏的运营活动广告，特殊化的设计让它们在背景中脱颖而出。
个人中心的会员卡为了吸引用户注意，增加开通率，都成了重点设计对象。
与以往不同的界面设计可以更加的吸引用户，加深用户的记忆，同时扩大了活动对用户的影响力。例如每年淘宝的双11首页设计都与往常不同。
Google doodle 会在一些比较特殊的日子改变 logo 的设计，把logo设计成与这个日子相关的插画或涂鸦，与平时的 logo 形成差异化，帮助人们更好地记住这个日子。
因此我们在界面设计中，若想让用户对哪个模块或者是元素引起注意或点击，就可以打破常规对该元素进行强调设计，使他在背景中脱颖而出。但是不要任何元素都强调，因为什么都强调就等于什么都没强调，就没有重点，所以要谨慎使用这个方法。
回到开篇的题目，答案是「崂山可乐」。相比其他饮料，崂山可乐遇到的少，反而成了最特别的一个了。你的答案是什么？欢迎在下方留言探讨。
食之无味，弃之可惜
损失厌恶是指人们面对同样数量的收益和损失时，认为损失更加令他们难以忍受。 同量的损失带来的负效用为同量收益的正效用的2.5倍。比如，丢100块钱的痛苦感要远高于你捡到100块钱带来的幸福感，也就是说要至少捡到300块才能平复之前的心情。
生活中类似的栗子还有很多，比如旅游时，虽然这个景点很烂，人们依然觉得来都来了，还是要看完再走才“不亏”；吃自助餐时，明明吃不下那么多，可想到花了那么多钱，就要尽可能的多吃才算“回本”，真是应了那句话：“食之无味，弃之可惜”；花了50块买了张电影票，过了10分钟发现是部烂片，就算在电影院睡觉也不愿提前走，觉得这50块钱不能白花...
那么，该如何将“损失厌恶”赋能给产品设计呢？
最典型的莫过于电商App中的各类券满天飞，比如：买二送一、3件7折、倒计时xx小时后恢复原价等等。商家就是为了营造现在不买就会错过的套路，用户也会觉得失之可惜。一年一度的天猫双11，京东618，还有情人节、中秋节等各种有的没的节日都是商家利用“损失厌恶”心理为基础刺激消费。
我们App的用户粘性不太理想，增加一个“签到”功能吧，产品经理如是说。如是我们看到各种签到得礼品，赢红包等活动。中间还不能中断，要连续签到多少天才能得到奖励，用户也担心中断的损失。
某网盘下载文件时，会给你一个10秒VIP高速下载的体验，计时过后又恢复到龟速，让你恨的牙痒痒。虽然这招有点损，但用户体验到了VIP的快感，很多人还是会乖乖成为付费会员。
产品运营中会经常发一些优惠券，虽然知道自己不会用，也要先领了再说。这些券也都有时间限制，快过期的提醒也会加快用户决策。还有0元开通会员，套路是第一个月免费，次月开始按正常价自动续费，典型的“骗”进来养肥了再“杀”。
人天生会对危险的，不好的东西避而远之。如是我们就看到保险行业，他们会用一些负面信息（空难、车祸）刺激你，用户就会产生焦虑，自然就想规避掉这些概率小的风险。例如购买机票时的意外险，QQ退出登录时的提示。
还有就是有用户自己的内容的东西，一般不会轻易舍去。拿我个人来说，飞书一直是我的写作工具，后来看到几个更好用的软件，但要想到把原来的这么多东西全部转移过去也是件很心累的事，太麻烦，还是继续用飞书好了。QQ这个“古老”的软件，估计很多人好久都没打开过了吧，但是让你删了它，你还是不愿意的，因为那上面有很多青春的回忆。
用户会将大部分时间花在其它网站上，因此他们会希望你的网站也能像他们已经掌握的其它网站一样，拥有相同的使用模式和习惯。
Jakob定律是由Jakob Nielsen提出的，他认为用户在其他网站所积累的经验教会了他们如何使用网站，所以他们会希望你的网站可以与那些熟悉的网站一样，相似的使用方式，在使用你的产品、服务、内容和信息的时候，他们不会感到恐慌，而是轻车熟路。该原则鼓励设计师遵循常见的设计模式，以避免混淆用户或导致更高的认知成本。
例如YouTube2017年改版前后的对比，在新版中，网站框架和功能上几乎没动，只是在UI上做了顺应新的设计准则，比如调整字体大小、颜色、栏目间距等。整体上和旧版没太大区别，而且还给用户提供了旧版的选择。
在移动端App中也应如此，在具有相同功能的页面，尽量保持一致。大到页面底层框架（比如电商应用中的购物流程），小到UI设计中的一个按钮，一个图标，甚至一句微文案。
在设计产品时，要先延续大众早已习惯的概念模型。然后再从自己的产品出发，对其进行改善。而不是从零开始制定自以为是的流程。
日常使用的各类修图软件，版式都高度相似，中间是图片，各种滤镜、贴纸、调整等功能都放在底部操作区域，很多相同功能的名称都一样。这是用户最熟悉的布局，可降低用户在同类软件使用的学习成本提升使用效率。
也许你会质疑当所有产品都遵循相同都设计模式，会让产品同质化严重，答案是必然的。此时需要深入了解用户的目标和心智模型（用户访谈、用户画像、用户体验地图等），并将其应用到我们的产品设计中去，缩小我们与用户心智模型之间的差距，从而获得良好的用户体验。上文YouTube例子中，就是通过简单的用户授权（新旧版本选择），避免了心智模型的不一致会带来的问题，当用户准备好随时可以切换到新的版本。相反的案例Snapchat在18年设计改版时，因为新的布局未能确保改版前后用户心智模型的一致性，导致大量用户流向竞争对手Instagram那里了。
但是也要注意设备之间的差异，比如在移动端“汉堡包”式菜单是个不错的方案，可是放到桌面端可能并不太友好，因为大屏幕可视范围更大，小小的汉堡包图标很容易被忽略，这时候平铺出来可能会更好。
思考总结
1、用户会把在其他产品使用中已熟悉的操作习惯转移到另一个看起来相似的产品上；
2、利用现有的思维模型，使用户可以专注于自己的目标上，而不是学习新的操作方式；
3、在进行必要的改版时，请给用户过渡到新版本的机会，即可以选择短时间内继续使用旧版本；
看名称挺拗口，另一种翻译叫做“对角线平衡的和谐状态”。它告诉我们浏览页面是由左上至右下的视线流，左上角是视觉第一落点区，右下角是视觉最终落点区，因此右上角和左下角都是一个强烈的视觉盲点区，大多数时容易被忽略。
在进行信息排布时，将最重要的信息放在左上角，右上角和左下角添加辅助元素，右下角作为整个视觉落点可以展示重要操作。运用视觉元素来创建一条虚拟的“线”，让用户的视线跟随左上到右下这条对角线移动，符合用户习惯性的眼动规律。
古腾堡图表应用最典型的例子就是商品详情页，在界面的顶部展示商品图片、名称、价格、快递和优惠等用户主要关心的信息；右上和左下通常是分享、客服和收藏等次要信息；右下角则放置最终促成用户交易的购买按钮。
我们都知道一般页面按钮都在界面底部是因为离手近，方便操作，但不仅仅如此。还因为浏览是用户的第一行为，他们的视线会根据页面元素进行移动，最终停留在底部结尾的地方。
看各种社交产品评论、点赞的位置，就知道产品希望用户先干什么的想法。
弹窗的按钮摆放一般都是左「取消」右「确认」，目的是让用户最快地看到主要操作内容。
余额宝的「转出」在左，「转入」在右，毕竟谁也不想财往外流是吧。
既然如此，为什么“发布”页面的按钮都在右上角呢？因为发布页是属于“编辑页面”，需要用户谨慎操作，这里关注的核心应该是可编辑内容区域，而不是按钮本身。
类似的例子还有很多，设计中与此视觉流与节奏规律相似的还有F型布局和Z型布局，合理运用这些节奏模式，使用者会跟随你“设计”的视觉流和运动规律来浏览页面，有效提高用户阅读的节奏和理解能力。
美国心理学家亚伯拉罕·马斯洛（Maslow.A.H.）从人类动机的角度提出需求层次理论，该理论强调人的动机是由人的需求决定的。他将人类需求分成生理需求、安全需求、社交需求、尊重需求和自我实现需求，依此由低层次到高层次的过程。马斯洛需求层次理论最大意义就在于，它告诉了我们，人在满足了基本的需求之后，就要去实现更高的需求和目标。
马斯洛需求层次理论有两个基本出发点，一是人人都有需求，某层需求满足后，另一层需求才出现；二是在上层需求未获满足前，首先满足迫切需求，该需求满足后，后面的需要才显示出其激励作用。例如，在能感受到爱之前，他们的生理和安全需求一定要得到满足。
回归到产品，一款产品，最核心的是解决用户的需求。马斯洛需求层次理论，为产品的需求分析指明了方向。
生理需求：满足人的最基本需求，如衣、食、住、行、生理方面的需求。诸如美团外卖、淘宝、马蜂窝等为日常生活提供方便的应用；
安全需求：人生安全、财产保险，也是强需求。如是各类投资理财软件层出不穷。
社交需求：包括友情、亲情、爱情多个层次，满足人类社会关系，让每个人不再是孤单的个体。如是微信、微博、Soul、探探、陌陌等不同类型的社交软件多如牛毛；
尊重需求：每个人都有被尊重的需求，都希望展现自己，获得人们认可。此需求可以深度结合在社交需求中。
自我实现：最高层级的需求，完成与自己的能力相称的一切事情，实现自己理想的需要。结合到产品可以理解为能满足自己外在展示（炫耀）的需求，如各类美颜软件，美化后的照片晒到朋友圈，给人看到最好的一面。
由此规律可以看出，越靠近底层需求越是刚需，越往上，就变得越来越不必要，如自我实现，变得可有可无，不再是所有人的刚需。一个优秀的产品，深谙人性满足用户核心需求，才能形成持续稳定高用户粘性的产品。
序列效应法则又叫系列位置效应，是指一种记忆现象： 在列举项目时,排在最前面与最后面的元素，要比排在中间的更容易让人记住。
因为人们对排在头、尾的项目，要比排在中间的更容易记起来。比如我们都知道第一位登上月球的宇航员是阿姆斯特朗，却很少人知道第二位奥尔德林；班级里我们一般都知道成绩最好的第一名和倒数第一名，至于排在中间的很难记住。因此对排在开头的项目产生加强的回想效果，称为“首位效应”( primacy effect)。对排在结尾的项目产生加强的回想效果，称为“近因效应”( recency effect )。
分类页签中，我们通常都会记得“精选”、“热门”这类标签，是希望给用户进入App后看到的主要内容。这就是“首位效应”，把重要性高的内容放在首要位置。
我们都知道界面中“返回”按钮放在左上角，除了操作习惯和防误触外，还因为它出现在页面左上角最开始的地方，更长久地储存在长期记忆之中，需要“返回”时能够快速回忆出来。
tabbar数量不管是3个还是5个，用户通常都会记得第一个“首页”和最后一个“我的”，对排在中间的都会选择性的忽略掉。
有时候新上一个功能，产品想提高它的位置引起用户注意，会和“我的”互换位置。例如网易云音乐，新版本中把“我的”放在第三个tab，为了提升“云村”重要性，把它放置最后一个tab，正是利用了“近因效应”。
近因效应常用于及时进行反馈的设计界面中，比如点赞、评论、分享等功能置于底部不仅可加深印象，同时用户在看到有趣的内容，想要评论或分享时，不用等到文章看完即可操作。从而增强内容粘性，提高互动率。
用户的记忆具有系列位置效应，而且人的短期记忆非常有限，通过序列效应法则的应用，我们可以帮助用户减轻记忆负担。在排列项目时，把重要的放在首位或末尾，以达到最好的记忆效果。
文章来源：站酷 作者：Fyin印迹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：产业互联网是一种新的经济形态，利用信息技术与互联网平台，充分发挥互联网在生产要素配置中的优化和集成作用，实现互联网与传统产业深度融合。要想实现真正意义上的去互联网化，就要抛弃传统、原始的发展模式，用全新的视角来看待产业互联网。
以撮合和对接为代表的互联网平台模式红利的见顶，让越来越多的人开始寻找新的发展突破口，产业互联网的概念便是在这样一种大背景下诞生的。同经典的互联网模式不同，产业互联网时代的互联网模式更加深入，更加多元。
对于经典互联网模式的执念，最终让产业互联网或多或少地陷入到了流量的怪圈当中。因此，早期的互联网玩家基本上都在将获取流量看成是发展的终极目标，无论是以赋能还是以改造为出发点的模式，几乎都是以获取B端流量为终极追求的。
或许，这便是产业互联网的概念当中有“互联网”的字眼的根本原因。然而，如果产业互联网仅仅只是局限于此，那么，等到B端流量被瓜分殆尽，看似光鲜的产业互联网或许又将陷入沉寂，一切都将从头开始。
产业互联网正在遭遇到的困局，为我们生动地诠释了这一点。可见，流量始终都不是产业互联网的关键，除此之外，产业互联网应当有更加丰富的内涵和意义。
于是，我们不禁会问，产业互联网的本质是什么？什么才是产业互联网的关键？笔者始终认为，尽管产业互联网本身有“互联网”的字眼。
但是，从本质上来看，它已经与互联网不再有太多的联系，无论是从商业模式上，还是从内在的驱动力上，产业互联网都是一个完全不一样的崭新存在。站在新角度，而不是互联网的角度来看待产业互联网，并且寻找产业互联网的正确发展模式，或许才是产业互联网真正步入正轨的关键所在。
伴随着产业互联网概念诞生的是S2B的商业模式，很显然，这种商业模式与互联网时代经典的B2B模式是有着一定的联系的。可以说，S2B模式是在B2B模式的基础上衍生而来的。
尽管产业互联网的拥趸者们一直都在试图给S2B模式赋予新的内涵和意义，但是，如果无法厘清互联网在其中扮演的角色和作用，纵然是给S2B模式加上再多的标签，或许都将无济于事。
尽管产业互联网的概念当中有“互联网”的字眼，但是，它却是一个去互联网化的过程。
换句话说，产业互联网，其实是一场互联网玩家的自我革命。如果一味地绑定产业互联网与互联网之间的联系，而不是厘清其与互联网之间的联系，那么，所谓的产业互联网的概念或许仅仅只是一个概念而已。
从本质上来看，所谓的产业互联网是一个去互联网化的过程。它不仅要改变经典意义上的互联网商业模式，而且还要改变互联网技术的主导地位。
所谓的改变互联网的商业模式，其实就是要改变传统意义上的平台和中心为主导的商业模式，通过去平台化和去中心化的方式以达成行业运行效率的提升，我们现在看到的以互联网公司为主导的数字化工厂的出现就是在这样一种脉络下建立起来的。
商业模式的重塑仅仅只是一个方面，产业互联网对于新技术的探索和实践则是另外一个方面。同PC时代向移动互联网时代的转移仅仅只是建构在互联网技术之上不同，从消费互联网时代向产业互联网时代的转变更多地是在以新技术作为基础设施，从而去建构一个全新的时代。
我们现在所看到的大数据、云计算、区块链和人工智能等新技术都是产业互联网的底层技术，尽管这些技术诞生于互联网的襁褓之中，但是，很多技术恰恰是为了修正互联网的问题才出现的。
比如，以大数据为代表的智能推荐，以区块链为代表的去中心化的商业模式，基本上都是在这种逻辑下衍生而来的。因此，所谓的产业互联网其实是一个去互联网化的过程。
不可否认的是，互联网时代的来临的确在一定程度上提升了行业运行效率，但是，我们同样应当看到的是互联网所带来的这种效率的提升是建立在强大的规模优势之上的。
换句话说，互联网时代的来临带来的是实体经济的式微，形成的是互联网经济与实体经济的分野。如何修复和弥合互联网经济与实体经济的鸿沟，让两者实现统一，才是产业互联网真正应该思考的重要课题。
然而，当产业互联网的概念被提出，我们看到的是玩家们试图在用它进一步巩固互联网的主导地位，让实体经济进一步成为附庸。很显然，这种做法是彻底地将产业互联网看成了一种概念和工具，而没有真正理解产业互联网的内涵和意义。
因此，我们需要用一种全新的方式来看待产业互联网。抛弃将产业互联网看成是一种工具的观点，真正将产业互联网看成是一个“产业”与“互联网”深度融合的过程。这里的“产业”就是实体经济，而“互联网”就是互联网经济。
从这个角度来看，产业互联网并不是互联网的一种，而是一个实体经济与虚拟经济深度融合的过程。
经过了产业互联网时代的修复和弥合之后，在消费互联网时代形成的互联网行业与传统行业之间对立、此消彼长的发展状态将会得到修复，从而真正将行业的发展带入到一个深度融合的新阶段。
可以预见的是，经过了产业互联网时代之后，经典意义上的互联网模式和经典意义上的互联网企业都将不复存在，而是将会与实体经济一道汇聚到数字化的长河里。
流量思维的长期存在，最终导致的是平台思维的延续以及第三方的产生。
如果一直都存在第三方，那么，行业运行过程当中始终必然要遵循一种供应方——平台——需求方的运行逻辑。在信息不对称的大背景下，我们是需要平台的撮合和对接的。这便是互联网平台存在的意义。
然而，随着信息的逐步公开和透明，特别是随着大数据、云计算为代表的新技术的成熟，信息不对称的现象得到了最大程度上的消解，纵然是不需要第三方平台，我们依然可以实现供应方与需求方的对接。这就是产业互联网的概念出现的内在原因。
在产业互联网时代，并不存在严格意义上的平台和中心，每一个部分都是参与者，每一个部分都是组成行业运行不可或缺的条件。
如果我们依然还在用流量的思维来看待产业互联网，那么，最终所导致的必然是一个又一个平台的诞生，行业的运行依然没有摆脱互联网式的逻辑。欲要让产业互联网跳出这样一种发展魔咒，首先要做的就是要进行去流量的操作。
当我们不再以流量的思维来看待产业上下游的时候，我们便不再用平台和中心的逻辑来看待和定位自己，我们所做的一切也不再是为了维持自身的市场地位而进行的操作。
这才是真正意义上的产业互联网，当流量不再是产业互联网的主导，所谓的产业互联网才能真正跳出互联网模式的束缚，真正进入到一个全新的时代，从这个逻辑上来看，所谓的产业互联网同样是一个去互联网化的过程。
之所以会说产业互联网是一种去互联网化的存在，还有一个主要原因在于它是一种中间状态，而不是一个终极状态。所谓的中间状态，其实就是一个过渡阶段。
当这个阶段完成之后，产业的发展必然还将会以另外一种全新状态来呈现。在我看来，产业互联网的终极状态是数字化以及数字化基础上的智能化。当产业互联网时代的终极状态来临，互联网将会以新的状态存在，而不再是现在这样一种形式存在。
这是产业互联网经历了数年的发展之后，越来越多地玩家开始将关注的焦点聚焦在数字化和智能化身上的根本原因所在。
透过这些玩家的实践，我们可以看出现在这个阶段的产业互联网当中“互联网”占据的比重越来越少，而数字化在其中所占据的比重越来越大。需要明确的是，对于互联网的越来越少的提及，并不说明互联网已经不复存在，而是说互联网开始以一种全新的形式存在。
比如，现在很多的互联网平台就成为了一个数据的集散中心和处理中心，通过这种方式可以继续给自身的发展带来新的动能。如果我们将产业互联网看成是一种终极状态，而不是中间状态的时候，目前这种状态便不会出现，产业互联网的发展又回到了那个以撮合和中介为主导的怪圈当中。
真正将产业互联网看成是一个中间状态，依然是一个去互联网化的过程。
当我们把产业互联网看成了中间状态之后，我们才能抛弃互联网的商业模式，通过不断试水新模式、新技术来寻找发展的突破口，产业互联网行业的发展才能真正进入到一个全新的时代。由此可见，产业互联网同样必然是一个去互联网化的过程。
一味地将产业互联网与互联网深度绑定，最终让产业互联网蜕变成了互联网的附庸。很显然，这种方式是无法让产业互联网的作用发挥到最大的。
实现真正意义上的去互联网化，抛弃传统、原始的发展模式，以全新的视角来看待产业互联网，产业互联网才能有新的内涵和意义，才能有更多新的想象空间。
文章来源：人人都是产品经理 作者：孟永辉
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
语言交流是人类的本能，近几年语音交互的迅速崛起让产品更加人性化了。然而即使不考虑技术限制，人与机器的互动也不是只有听或说单一模态的，因为这不符合我们的自然交流。目前，在居家场景中，用户与电视的交互依然是对众多信息-图像、语音、触感-的同时处理，它们分别对应着观看、听说和必要的遥控器操作。对UX设计师而言，如何让电视端同时承载这样多的感知设计是值得思考的。
语音体验设计是一个很大的系统，从用研、功能、内容到交互、技术实现等等，而GUI的展示只是一种辅助模态。今天我想探讨的是如何结合GUI与VUI展开界面设计。
文章分两个部分：电视端VUI的搭建和一次改版迭代。
1. VUI的构成
2. 改版需求
3. 界面改版
4. 设计验证
“Voice User Interface (or VUI) is an interaction model where a human interacts with a machine and performs a set of tasks at least in part by using voice.”
<Voice User Interface Design>
VUI：是一种交互模态，让人能够或多或少通过语音交互与机器共同完成一系列任务；
领域：是将用户想要完成的任务分为一些大的类型，比如视频领域、音乐领域、百科领域等；
意图：指某领域下的具体任务，比如视频领域下的“我想看某部电影”，即为影视搜索意图。
小明：“给我推荐点美剧”；
电视：“看看这些有没有你喜欢的”，并推送一些热门美剧；
小明：考虑了一会儿....说“风骚律师吧”；
电视：起播《风骚律师》。
在这个故事中，除了众所周知的VUI应具备的基础功能-听和说-以外，我们还需要定义更完整的体验流程：
1. 小明如何开启与电视的对话？因为电视机不能一直处于聆听状态，那样很可能会识别用户无意图的语言，从而误响应。
2. 电视端应该以什么方式推荐美剧？如果只一个个播报片名，小明会记不住。
3. 推荐几部合适？隔空喊话的情况下（远场语音，下图解释），最好不需要再用遥控器翻页。
4. 如果小明问的是其他领域问题，比如天气、歌曲、球赛等，对应的媒体资源会涉及到多样化的信息类型，如图形、音频等。不仅要统一设计风格，还要为未来可能支持的新领域/新意图预留承载框架。
5. 如果小明的询问得到了错误答复，或者一直未被答复，除了技术上提高识别率和语义理解程度，该怎么缓解用户的茫然和愤怒情绪？
6. 当小明问了一个问题，不被理解，但换个问法却成功理解。如何教会小明尽可能一次就做出能被识别的表达？
7. 我们能支持几十个领域、几百种意图，怎样能让小明知道一共有哪些？
8. 如何结束对话，以免电视一直聆听造成误识别？
9. ......
为了回答以上问题，我们经过大量的模拟对话、竞品分析和demo体验，从而定义了电视端VUI的交互流程和组成模块：
唤起、聆听、思考、反馈、退出：
电视端的语音有三种对话状态：
1. 单轮对话：每说一句话都需要唤起一次语音；
2. 多轮对话：一次唤起，多轮对话，但轮数受限于领域范围；
3. 全双工模式：一次唤起，多轮对话，轮数不限。
图源网络
这是本文重点描述的部分，电视端的GUI包括：
1. 状态指示动画：告知用户当前状态；
2. 提示词条：提示用户有哪些说法；
3. 用户指令：用户说法的文字识别结果，它让人知道自己说的话是否被正确识别，若出了错，用户就知道原来是错在这一环节；
4. 电视答复：文字+音频；
5. 内容展示：所有媒资内容的呈现，如果没有，则不展示。比如，天气需要展示图像，而交通限行用一句话回答即可。
旧版设计方案概览：
语音GUI分为两块：语音基础界面（必须）和内容展示区（可选），基础界面包括上图中的1234内容。
上图效果是从17年逐渐搭建起来的框架，随着需求增多、不同设计师的参与，设计越来越碎片。从易用性、视觉、开发维护难度和新功能兼容上，都存在很多问题：
1. 布局调整
由于电视用户使用最多、最重要的功能是观看影视，所以优先考虑视频领域。因此布局调整的优先顺序是：基础界面>视频领域>其他领域。
2. 建立视觉规范
建立原子化设计规范：配色方案、文字、间距、圆角、图标，以及可复用和拓展的组件、模版。
3. 统一状态动效
将上文的5种基础状态结合全双工状态统一设计，并为未来可能开发的主动提示等状态，预留一席之地。
经过竞品分析，穷举了7种可能的布局方式：
这么多的优缺点该如何取舍？我们将痛点归类，并根据通用的交互原则排列了优先级：
最后决定用B1-底部长矩形，但设计UI时需要借鉴B2那样增加一点渐变过渡。而针对B1的痛点，需要重新设计小面积状态指示动画，并定义好低栏左侧的识别文字与右侧的提示词条之间间距，从技术上，我们能做到跟进用户说话和播报内容，说一句、展示一句。
电视端就像是一块自由发挥的大画布。视频海报的摆放，得从几个方面考虑：
1. 背景占比：半屏、全屏、半屏至全屏；
2. 导航方式：宫格（我们的海报尺寸是可以统一的，所以不考虑瀑布流，此阶段也没有专题分类，无需考虑tab栏和泳道栏）；
3. 海报方向：横幅、竖幅；
4. 展示数量：是否超过一页、海报尺寸。
市面上的竞品就有这几种方案：
行为数据显示，我们用户的视频意图分两种：明确自己想看什么－“播放陈情令”，和不明确目标、向电视寻求推荐－“推荐点古装剧”。我们分别称为普通推荐和个性化推荐。由于前者在大多数情况下内容较少，所以用半屏，后者则用全屏。由于视频会单独设计一个APP，故最后定的普推和个推的坑位都是十张：
上面确定了视频领域，而其他几十个领域的信息，同所有平面设计的信息一样，都是文字、图片、图标的排列组合，可以把它们按照原子化设计系统，从分子到模版逐步搭建：
这样的结构，能确保20多个带内容的领域都能从中找到对应的排列方式，模版如下表。这里看起来可能比较抽象，可以先看后面的UI效果图再回来看这里。
实际界面中，内容可能会以前面的任何一种排列形式出现，给较少的内容使用大背景是浪费，反过来则拥挤杂乱，故不同内容需要不同的背景。依然还是穷举了5种背景待选择：
1. 卡片
2. 悬空半透明容器
3. 半屏羽化背景
4. 半屏实心背景
5. 全屏背景
按照痛点的优先级打分：
可见方案d-半屏实心背景最佳，但它最适合内容量级为中等的情况。所以我们考虑了是否也采用卡片和全屏来适应内容过少和过多的情况。最后结论是：只采用方案d和e，舍弃a，因为d的背景高度可以随内容的多寡而变化。这样以来，设计就不会很碎片化了。
到这里，已经确定了语音基础界面（低栏）、各领域信息排列方式和背景。接下来就像搭积木把它们组合起来，这一步重点考虑的是内容是否上焦点和翻页，这需要根据具体领域的资源参数和使用场景甄别。
正好在做这个项目时，我们电视端的视觉规范也在完善中，所以焦点色、文字、栅格等规范是直接从规范库搬过来的。
实际效果：（抱歉GIF原图太大了，只好展示一小截。手机拍摄有一点色差，实际的色彩还原度是很高的。）
我们找来40名用户体验新旧版本语音，进行了偏好测试和用户反馈收集，部分反馈如下：
40名用户中，有80%认为新版更好，分别有12.5%和7.5%的人认为两者差不多和旧版更好。这次的改版中，UI&交互、动效、颜色&背景三者，体验感分别提升了12%、2%和7%。
当时大家对新版评价最高的是：简洁易看、空间利用率高、布局更好。
吐槽最多的问题是：背景色太深、配色单一，动画不够好看、不够明显。我们随即对背景色做了优化，上图看到的是优化后的效果。
后续兼容性验证：新版结构能较好适应节假日换肤、半屏小程序、第三方App适配等多种需求。
文章复盘了电视端语音的基础界面、视频领域、其他领域和背景的重构过程。主要用到的方法有原子化设计理论、竞品分析、痛点云图（表格形式）和用户偏好测试。对界面布局有较好的优化效果。最大的收获是掌握了从最底层元素展开剖析的方法，这种细致的方法用来搭建界面设计会很稳固、全面，并且拓展性强。
经验和不足：
1. 大屏经常强调沉浸式体验，因而电视端叠加功能很多，但必须要注意分个主次。一是叠加内容不能太多，要么就不叠加、全屏展示。二是一定要考虑背景播的不确定因素，避免花乱；
2. 上面只是分析了二维平面，还有次级页面、时序等三、四维的规则还未深入学习研究。这样的研究会对所有App设计都有更好的指引。
3. 我们虽然已有了简单的导航、栅格等布局规范，但内容展示区依然是毫无章法的自定义排列，智能电视产品还没有像手机、PC一样较成熟的设计框架，我觉得苹果的tvOS模版规范做的比较稳定，我们也应该借鉴，形成自己的风格。
文章来源：优设 作者：lady珠珠
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每一个在公司勤勤恳恳埋头耕耘的设计师小朋友，都常常会在脑海中不禁闪过各种问号：
但是苦于只有极少的团队会匹配用研资源，这些疑问往往是石沉大海。更有甚者，等到用户流失才心急火燎的改版。
在日常工作中，由于 UI 设计师在业务的中上游，很难直面用户，不能获得直观的第一手资料，很难获得用户体验的话语权，经常被产品和运营牵着鼻子走。长此以往，设计部门的存在感也也会大打折扣。
那么我们怎样在势单力薄的情况下在用户体验上做一些工作呢？笔者结合这些年的摸索经历，谈谈怎么一步一步从小到大的探索用户体验的调研。
在初创业务或公司中，人手和资金往往都比较紧张，很难系统的对用户进行调研。这就需要设计师本人用最小的成本推动用户调研和用户体验的提升。这个阶段调研的内容应主要集中在产品的可用性方面，以定性调研为主，输出的结果也不求高大全。
我们可以通过以下几个手段进行初期信息积累：
1. 后台用户投诉或反馈
用户常常是懒惰的，当用户在系统中投诉时，一般都是遇见一些令他无法忍受的严重问题。设计师可以把后台的反馈内容都搜集起来，内容加以分类甄别。一般会有可用性问题、业务问题、情绪表达等内容。这些不是我们都能处理的，我们应优先从可用性问题下入手，解决一些功能上的阻碍，这就足以解决许多关键环节的体验问题。而情绪表达类的留言也要留心总结，里面能够折射出用户的消费心理和需求的痛点痒点，为未来的设计提供指引。
2. 粉丝用户群
运营和客服同学都会组建一些深度用户为主的粉丝群，在这里你能看到各式各样的吐槽。设计师同学潜伏其中，不但能聆听用户心声，也可以发出问题，主动收集反馈。这里的粉丝也很乐于沟通，并接受轻松的访谈。但是粉丝一般是中高级用户，所以初级问题容易被忽略，这需要更加广泛的调研来补充。
3. 内部招募体验
这是一种非常直观且有意义的调研，在项目初期阶段就可以检验出产品中存在的问题。
方法如下：邀请公司内部的同学现场使用产品，在操作时汇报自己的所观所想。设计同学可以在一旁观察和引导，并在用户进行不下去的时候给予必要的帮助。招募 3-8 个初中级用户，往往就足以发现产品操作流程中存在的绝大多数的问题。在此情境下的用户一般都更加有耐心，所以足以使它们停顿、困惑甚至放弃操作的问题对外部用户影响更甚。最好全程录像，更有利于事后分析对比。
4. 内部专家访问
在一线的客服、运营、销售等同学往往对用户都有着更加深刻的认知。由于他们的工作目标不一样，所以他们的精力不全在改善用户体验上。但对于用户的痛点他们有更强认知，也有自己的调研积累，这是我们极佳的信息来源。与他们进行访谈会听到很多真知灼见，他们也很愿意配合一些调研活动，如投放问卷、联络访谈用户等，这是我们不可或缺的助力。
5. 数据挖掘
技术同学对于用户信息会有一套基础的统计，通过他们的帮助，我们能了解用户的使用机型、使用时间、活跃时长、分布城市等，从而确定主要的使用场景和人群。用户是否有跨平台的操作习惯也能在这里展现。埋点和 A/B 测也是后期极为重要的工具。
△多渠道搜集用户反馈
当业务有一定规模时，设计的目标就不仅仅限于可用性问题的研究了，我们需要对用户和业务有更深入的了解。用户群体不同，需求也会有差异。我们调研时，如果不清晰的划分用户群体，就会造成数据失真。这样的调研结果，对设计的指引将大打折扣。比如相机这种通用功能，也会为高级用户做出个性化设置。它没有假定色温调节是多数人都需要的，而给它一个外露的位置。但也没有主观臆断此功能无人使用，而把它删去。
这时就需要我们去系统调研用户了。
1. 划分目标用户
系统调研的第一步就是划分调研的目标用户。
很多时候设计师都希望输出一份全面的用户画像，显得高大上而富有意义。但是精准的用户画像成本很高，往往在建立后又不知道如何使用。其实建立用户画像是个细分后并不断修正的过程。
用户一般可以分为以下几类：
业务足够成熟的时候，他们会成为非常重要的增长点，具体的划分方法可以根据业务类型和产品需求来定。
2. 梳理调研维度
在确定目标用户后就要关注调研的维度了。销售和产品往往也有自己用户画像，我们可以有所借鉴，但它和设计师所追求的并不完全一致。
设计师的用户画像可以分以下几个维度。
不同的业务类型，用户调研的侧重会有不同。
例如企业级产品往往与使用者消费习惯无关，但和认知能力关系较大，使用者与付费者也分离。而 K12 类产品的消费周期、使用习惯与电商类也有很大区别。
△ 用户画像维度划分
只有充分的前期准备，才能使我们顺利的展开深入调研。系统的调研方法笔者将在后续文章中阐述，在这段时间，设计师们赶紧挥舞起勤劳的小手吧，期待下次我们相会。
文章来源：站酷 作者：58UXD
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
B 端的一些业务场景中常会使用地图元素来展示信息，但是 B 端的页面情况较为复杂多变，与 C 端的百度地图等使用场景以及业务具有一定的差异性。在工作中，我们对于地图页面的布局、交互统一性上的研究还是较少，所以我进行了业务场景下的列表与地图的关系的设计沉淀。
地图作为一种将地理信息以二维的手段展示的图像。日常纸质地图常常会分为两个模块：地图信息、列表信息。对于现 web 端的产品，地图也保留两者的信息区域并进行不同的布局排布，如百度地图等。针对 web 端的产品，因为有交互形式的出现，所以在地图上会存在更多的信息展示。
地图信息：
列表信息：
针对现在工作、学习过程中遇到过的具有地图元素的业务，我进行了整理并总结出了一些不同场景下存在情况以及现业务阶段存在的问题。
首先我总结了列表的信息与地图信息的关系，一共为三种不同的情况。
随后，我针对打点详情信息的复杂度进行了三种程度的区分：简单；复杂；极复杂（较少）
最后，我走查线上业务版本发现了一些现地图元素的一些问题。
1. 排版不统一
针对地图的两种布局，使用较为随意，并没有规定其合适的场景使用不同的排版形式。
2. 功能入口的交互不统一
针对于地图上的列表，常有功能有定位、查看详情，以及一些特殊场景下的特殊功能入口。然而，这些功能其入口常常不统一，点击列表，有时承载的是查看详情，有时是地图定位、甚者点击卡片不承载任何功能入口。
3. 地图打点与列表的对应混乱
有时地图上会存在多个列表的情况下，从而导致列表信息与地图上打点信息对应的混乱，这样会让用户感到信息的不明确。
根据以上存在的问题以及情况，我们总结了两点设计原则，针对地图模块进行了修改与推进。
地图中常包含了四类元素：列表：主要信息、地图、地图打点、打点的详情信息。
针对以上问题，我们从三个点进行了整理分析：列表的交互形式、地图与列表的整体布局、地图打点的详情信息。
列表交互：针对地图列表，点击列表的主要交互操作分为三种
地图布局：为了清晰整体的地图层级，我们将列表与地图分为了两种不同的形式
并且，根据整体的布局结构，我们将这两种布局形式中包含的隐形的逻辑从而进行了区分，将地图与列表进行了主从关系的分配。针对于第一种形式，地图为底，列表作为具有阴影的第二层结构，其包含了隐形的地图为主、列表为从的逻辑形式；
而针对列表与地图的左右排布结构而言，因为两者处于同其级别的元素，更具左右、上下的阅读习惯，其包含了列表为主、地图为从的逻辑形式。
而后，根据整体布局的逻辑形式，我们将上文总结的三种不同业务场景进行了分配，并提出了使用建议。
针对于地图（主）/列表（从）的布局情况：
针对列表（主）/地图（从）的布局情况：
打点的详情信息：上文我们根据打点的详情信息分成了三类：
针对这三种情况，我们提出了三种情况下使用的交互形式。
对于简单的信息来说，可以推荐使用气泡弹窗的形式；针对复杂的信息展示尝试用右侧抽屉的形式以及替换当前列表；针对极复杂的场景如需要展示画布或者列表的话可以考虑底部抽屉的展示形式。
针对气泡弹窗以及右侧抽屉，我们也提出简单的使用建议。
气泡弹窗：
右侧抽屉：
最后，根据上述总结的内容，我绘制了一张表格简单的流程图供大家快速的参考。以上结论，仅仅是一个初步的总结，对于更加的细节的点还需要继续进行研究迭代，例如简单于复杂的界限等。
文章来源：优设 作者：土拨鼠
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
定义：
1.同一页面内不同模块描述
文章来源：站酷 作者：体验为王UX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
去年大家看到更多的设计和文章都在围绕“新拟物化”展开行动，随着各种硬件的提升，代码的优化，更多的风格和效果一一出现在我们的生活中，而今天呢，我们一起探索一下生活中最常见的，你可能没有注意到的设计风格——“玻璃拟物化”风格，英文“Glassmorphism”，这也可能会成为新的设计趋势。
在生活中的摄影，通过玻璃的层次感，给人以朦胧的美感，那什么是玻璃拟物化呢？
油管一管主Malewicz 小哥对于这种风格特征归结为4点：
透明：使用带有模糊磨砂质感背景的透明效果
悬浮：带有明显悬浮感的多个层级
鲜明：使用鲜艳色彩作为强调色并且从半透明层中透出
微妙：使用轻薄微妙的边框来强化物理质感
通过玻璃透明，加周围颜色环境的烘托，页面的层次能更容易的呈现出来。
你在哪，从哪里来，玻璃拟物化就很明白的告诉你了。通过透明的玻璃材质，能告诉你所覆盖的层级。
苹果的合计将玻璃拟物化的风格运用的惟妙惟肖，无论是mac，iPhone还是iPad，设计风格都保持着相对一致的玻璃拟物化风格。
首先：我们打开sketch，建立一个画板，随便找张图片作为背景，画一个白色矩形
接下来：调整矩形的属性，再填充色中设置透明度为50%，边框可以吸取一个30%透明的白色，2px，再添加一个环境色的10%阴影，做出层次感，最后就是调整玻璃模糊的效果了，玻璃拟物的关键就在于sketch自带的背景模糊功能，我们常常以为这里只有一个高斯模糊，但却忽略隐藏在里面的其他模糊效果。设置背景模糊值为10%，不用太大，太大的话模糊效果就没有那么真实了，具体调整还是要看效果。我们看效果：
单层的效果不是很明显，我们复制两个调好的玻璃效果，调整他们的透明度，底部的透明度为70%、中间的为50%，最上层的为30%，看效果：
在界面设计中，就可以通过不同层级，调整对应的参数，达到更好的层级效果。
我们以这个照片的图标为例来拆解分析，通过运用刚才绘制的玻璃面的方法，与图标色块组合起来，在组合的时候，调整好层级，一个轻巧且富有玻璃质感的图标就绘制出来了，很简单、很容易上手对不对？一起来快来试试吧
透明：使用带有模糊磨砂质感背景的透明效果
悬浮：带有明显悬浮感的多个层级
鲜明：使用鲜艳色彩作为强调色并且从半透明层中透出
微妙：使用轻薄微妙的边框来强化物理质感
随着科技的进步和互联网的发展，过去机械的单向交互方式逐渐被打破，用户使用移动端的场景越来越丰富，设计师也开始需要通过主动的观察用户所处的不同场景，感受用户情感，预判用户意图，来为用户提供更智能更便捷更贴心更高效的服务，场景化设计已经融入互联网设计的方方面面，下面的文章当中，我将从三个方向去阐述和列举场景化设计。
随着移动端的不断发展，从固定电话到移动电话，移动端的设计渐渐的融入在用户的身边，深度的跟随着用户，陪伴着用户，慢慢的，开始观察用户，感受用户，在这个过程背后当中，场景设计逐渐产生，设计师通过针对用户所在的实际场景来设计，建立用户与场景之间的联系，给用户带来更贴心，更高效的体验设计。
如今各大产品都在上线了“青少年模式”，越来越多的产品关注到了成人与儿童这两个不同的用户群体，腾讯视频在青少年模式中推出的播放器护眼模式，通过摄像头来获取用户当前距离手机屏幕的距离，当用户离屏幕太近会有提醒并停止播放，当用户位置在正常距离以后，提醒消失。帮助青少年养成合理观看手机，爱护视力的好习惯。
滴滴打车新增了“关怀模式”，在关怀模式下，整体的页面字号放大，在功能上，更极简的打车模式，将复杂的任务拆分为拆分为目标清晰的子任务，并提供清晰的反馈，来方便用户的使用，关怀模式更有利于老年用户以及视障用户使用产品。
产品在体验上的提升不应该仅仅是针对主要群体，跟多的是考虑到特殊群里的体验，以上两个案例，根据不同的年龄人群“青少年和老年”，适应了不同的产品体验模式，让更多的用户群体都能够得到更好的产品体验。
当用户在腾讯地图设置中开启左手操作功能，首页地图上的侧方操作控件会移动到屏幕的左侧，方便左手用户点击和操作，人性化的设计容纳了拥有不同使用习惯的用户。
在地图软件当中，我们通常都会用红色表示路段拥堵，绿色表示通畅，在色盲色弱人群当中，红绿色盲也是比较常见的色盲类型，所以在高德地图中，为色盲色弱用户做了专属的路况配色，贴心的考虑到了特殊人群的体验。
优酷视频在更多模式选择中，为用户提供了“色弱模式”，并有不同色弱人群的细分“红色弱”“绿色弱”“蓝黄色弱”
在饿了么送货骑手中，约8%受色盲色弱的困扰（全国男性群体中红绿色盲色弱占比达8%-9%，饿了么骑手男性占比90%），为此饿了么设计团队在2019年对app的进行了重新设计，包括使用WCAG无障碍色彩对比度，以及无障碍色盘，以及调整字阶，使用辅助图形等设计手段来解决部分骑手在送货途中使用APP的痛点问题。
外卖行业本身就具有一定的时间属性细分，用户早中晚点餐上肯定会有不同的诉求，美团外卖在不同的时间顺应用户的不同诉求来推荐不同的内容，帮助用户挑选在该时间段内的用餐。
美团在一些周末和特殊节日上，用户在不同时间的诉求不同的，相关推荐也会有所不同。
QQ音乐会根据不同的时间，给用户推荐不同的个性化push通知，早上是“每天起床气一句”“最气不过起床气” 冬日是“冬夜需要”。结合用户当前时间段下推荐相关的push，不仅增加了用户的点击欲望，也拉近了和用户的距离，让用户时而暖心，时而感到有趣，这么可爱的push通知，也是辛苦QQ音乐的运营小编了～
在iOS12系统当中，新增了地点勿扰模式，长按勿扰模式的按钮，可以选择“直至我离开此位置”，用户在看电影，会议或一些特定的地点可以灵活的使用该功能。
在使用大众点评时，当我的地理位置在我的常驻地北京时和将地理位置切换到“重庆”时，首页展示的信息和内容框架都发生了变化，产品根据我的地理位置推断出我现在搜索的目标地不是我的常驻地，预判到我可能存在即将出游到当前定位的城市，会直接给我推荐一些攻略，和一些“怎么玩”“”订住宿“”游景点“的旅游攻略向内容。
iPhone在用户接电话的场景下，根据用户所处环境不同，适配了不同的方案。不同的当iPhone处于息屏状态接电话时滑动接听，防止误触；当iPhone在使用时接听电话为按键接听。减少用户操作成本。
在支付宝的收款码扫一扫功能中，用户向他人展示收款码时，手机向下倾斜后，扫码的提示文字和用户的头像会发生旋转，其他功能会相应弱化或者直接消失，以便方便付款人阅读，充分考虑到了现实中的操作环境，保证了双方的使用体验。
支付宝等金融类的产品，在用户开启后台后，会对页面进行高斯模糊处理，避免了后台场景下用户无意中泄漏自己的信息，也防止了被偷窥。（支付宝在页面底端还添加了温馨提示：支付宝全力保护你的信息安全）
在输入车牌省份时，会直接弹出各省/直辖市的缩写专用键盘，并且可以直接进行大写字母与城市简称的切换，降低了用户的输入成本，提高了整个功能的使用效率。
百度键盘在游戏模式下，会接入游戏快捷回复语并自动开启和谐模式，增加趣味性的同时方便了我们在游戏进程中的快捷输入，将九宫格按键进行等比缩小展示，方便用户点击。
Pad OS键盘在使用中，可双指捏合可以快速缩小键盘，然后将它移到合适的位置，即能单手打字，又能给你的app留出更多的空间，并且增加了快速输入的功能，只需要在键盘之前轻扫，即可打字。
情景预判的交互设计是建立在整个产品的框架上和对用户深刻理解上的细节迭代。预判设计主要有两类目的：一是在用户初次体验某种功能时引导用户，避免用户陷入困惑；二是提前判断用户行为，缩短行为路径。新功能引导更倾向于产品功能本身的逻辑和价值，这次我们主要主要讲第二点，提前判断用户行为。
预判设计强调主动性和智能性,是决定产品是否体贴、聪明的重要因素，是走向人工智能的基础，对微交互中的预判设计进行分类研究有助于加深对其了解和认识,进而在实践中应用以提升用户体验。预判设计可以很好的在用户的操作过程当中进行简单高效的引导和预判，帮助用户更流畅舒适的使用产品。
在互联网发展中，产品功能的流程越长，操作步骤越多，越要求用户的理解能力和学习成本更大，耗时也会相应增加。因此体验设计师在理解用户行为的交互设计的基础上能够做到减少冗余步骤，简化操作流程。顺应用户行为的预判设计也可总结为四个字：以简驭繁。抛开繁杂的操作过程，运用更少的任务和行为来达成用户目标。简约不仅仅是视觉的形容词，同样适合行为。
聊天页转账：在支付宝聊天页，很多时候我们想给对方转账，会习惯性的在输入框中输入相应的数字，但在操作错误之后，支付宝会在输入框上方弹出相应数字的转账，点击之后会直接进入转账页面进行操作。对我来说，这个功能已经不是简单的帮助用户纠错，现在更像是一个快捷键一样方便着我们的操作。
手机号转账：当我们复制手机号后打开支付宝转账功能，会弹出该号码的转账气泡引导，提前判断了用户通过手机号去转账的路径。用户可以点击气泡一键跳转到转账页面。
消息页 - 找人转账：在消息页面，当用户开始上滑操作时，会出现「找人转账」的气泡提示，点击进入用户列表的简约页面，去掉了一些生活号服务号企业号等无用的对话框，提高了用户寻找的效率。
一个转账的功能，在不同的页面不同的场景下，支付宝在体验上把用户情景预判设计做到了极致，事实上，用户的行为中渗透了意识。从用户的行为推断用户意图，将用户的意图结果化，结合用户的使用场景，顺应用户的行为，缩短用户的路径，才能给用户带来最流畅的交互体验。
正如《一目了然》中所说，“当一个软件设计得很糟的时候，我们往往能立刻指出哪里做的很差；但一个优秀的软件，你却往往难以解释优秀从何而来”，因为沉浸式的流畅体验为你减轻了很多思考的路径与时间。
在新建收货地址的场景下，填写复杂的地址信息的过程往往都是繁琐而费时的，而设计师在此场景下考虑到用户需要地址的多样性，以及用户行为背后的含义，当用户复制了一段收货地址，打开新建地址页面时，App将主动提示弹窗“是否粘贴刚复制的信息”点击“确认粘贴”即可粘贴收货地址到对应列表项，这种预判设计对于用户来说是自然且让人愉悦的。我们不仅顺应了用户的操作行为，还在其中大大的帮助用户减少了很多操作。
预判设计的主体是用户行为，从用户的视角出发，分析用户行为，是设计师建立在整个产品的交互里路程和功能框架上，对用户的行为深刻洞察后进行细节的改进。
当我们使用电脑时，总会发现找不到鼠标位置的情况，iMac设计师在识别到用户开始连续晃动鼠标时，分析到用户当前的状态可能是在寻找鼠标的位置，会对鼠标做一个放大的效果，帮助用户快速定位到鼠标的位置。
在抖音我们刷到一些连载视频后，我们都会去进入作者的个人页去寻找上下集，在作者个人页作品很多的情况下，可能要寻找好久，抖音在个人页的作品卡片上添加“刚刚看过”的提示，方便了用户在浏览中能够更快速的定位到刚才的视频。方便继续衔接观看。虽然一个小小的功能提示，我们从用户行为，预判到用户的需求，带给用户更方便更快捷的体验。
在美团外卖中用户可以在订单页面直接点击「再来一单」按钮选择和上次一模一样的商品加入购物车，如果一家店没有营业的话那么则会显示一个「相似商家」按钮。
结合实际我们操作的场景，外卖产品，我们重复下单的频率会比较高，当我们来到这个订单页面，「再来一单」的按钮可以更方便更快速的帮助我们下单，但当商家休息的时候，这个时候继续展示「再来一单」按钮对用户来说也是无效的，我们往往会回到首页去搜索相关类似的相关产品，然后再重新下单，而这时候「相似商家」按钮直接帮助用户一键定位到后续的一系列操作，真正的做到在分析用户行为中，预判用户操作。
设计师做需求时，往往需要考虑在特定情景下，用户行为背后的思考与需求。因此符合情景的预判，我们也可称其为“符合用户感知的预判”。思考用户使用产品的情景，及时而高效的迎合用户对于当前场景的需求。
墨迹天气的降水雷达走势图，进入之后，放大、缩小屏幕就可以查看全中国的云图了，墨迹天气的云图可以查看到降水情况、闪电、积雪（冬天才有的功能），并且伴有文字提示，在未来两个小时的天气情况，方便了有出门需要的同学实时查看天气。
在微信聊天功能中，我们可以对两分钟以内的消息进行撤回，但相信大家都有跟我一样的尴尬经历，发了错误的内容想要撤回，却一不小心点了删除，再也没有机会撤回了。
微信在这个功能上做了很好的改进，当我们的发出的消息小于两分钟时，该消息只能撤回，去掉了删除功能，在该消息超过两分钟后，则撤回按钮消失，只能进行删除操作，两个功能进行了互斥处理，很好的避免了这个场景下用户会误触。
当我们选择好评的时候，会自动勾选到“公开状态”，当我们勾选差评时，系统会自动取消”公开“状态勾选，默认匿名发送该评价，很好的保障了差评用户的人身安全问题和个人隐私问题。
当我们在淘宝搜索电脑包时，展示的内容下方会自动展示商品的容量标签“可放14寸电脑”，帮助用户在列表页面就能筛选到更合适自己的商品，当搜索玩具时，也会展示当前商品适用的年龄段。产品根据用户搜索的内容，自动匹配能够帮助用户进行筛选的标签。
预判设计当中我们从三个层面进行了分析，从顺应用户行为的预判设计，到分析用户行为的预判设计和符合用户行为的预判设计。一个好的产品，往往会更多的使用用户语言，通俗易懂地让用户可以对整体的使用方式一目了然，而不是产生一系列的问题，迫使用户停下来，进行不必要的思考。用户的每一次停顿对我们来说可能都是一次用户流失。而预判设计要做的，是根据用户的行为/用户所在的场景，让功能主动找到用户，并让用户与之产生自然的交互。
场景化设计中，以情感化为目标的设计同样需要具体场景具体分析，通过细节上的改变使得产品在当前场景下能够与用户产生更多共鸣，主要从细节出发满足用户在当前场景下的情感需求，让用户感动，给用户惊喜。
其实用户在使用产品的过程中，同样渴望在使用产品时能够得到情感上的互动，这反映在设计上即是产品情感化设计。情感化把握得好的产品往往更能抓住用户的心。
躺平是一款阿里旗下的生活方式APP可爱的小人和拟人的语气，设计师让每一个空白枯燥的空页面瞬间变得可爱和有趣起来。
快手在每一个特殊的节日都会给用户送来精美的开屏祝福，让用户在节日当天打开app就能接受感受到产品满满的心意和祝福。
在用户生日的这个特定时间和特定场景下，很多产品都给予了用户不同的生日祝福，B站是一张有关于星座的动漫海报，快手给用户定制了专属生日开屏，网易云音乐的每日推荐为用户献上生日快乐歌，不同的产品结合自身不同的产品属性，给一位用户都带来了不同的生日祝福。
想必大家都有熬夜刷剧的经历，在腾讯视频中，在全屏模式下点击退出清屏模式下，页面上方的时间旁边会显示夜深了，只是简简单单的三个字，这深夜在这个场景下，感觉内心也有一瞬间被人关心的触动，体验了一个产品的人文关怀和对用户的体贴。
QQ音乐的绿钻到期挽留弹窗真的是别出心裁，推荐了4首歌曲，连起来就是VIP我们舍不得重要的你，用歌曲的的名字来表达对用户的诉求，趣味化的设计让这个小小的挽留弹窗不仅没有感觉到打扰，还感觉很有趣。
当有特殊天气时，我们打开美团外卖的配送页面时，页面会在页面中做当前天气的拟实物效果，下雨天整个页面也是下着大雨，下雪天整个页面飘着雪花，甚至雾霾天气整个页面是是伴着黄黄沉沉的云，设计师预判到用户打开该页面是想看外卖到了哪里，看到外面的天气如此糟糕，大家都不忍心催促外卖小哥了，大大减少了特殊天气下配送不及时的投诉率。
在B站输入密码的时候，页面上方的小人会遮住眼睛，潜台词：我不看，你放心输入吧。在输入密码的情景下，设计师用趣味生动的卡通形象给用户带来了更信任更安全的感知。
黄油相机的加载动画，是一个可爱的切黄油的小人，并且加载当中的文案，会告诉用户当去前正在加载的内容是什么，能够让用户对于加载的时间有预期，让等待加载的过程不会枯燥。
苹果新增 13 个与残障人士相关的 emoji，包括导盲犬、轮椅、义肢、戴着助听器的耳朵等。有意思的是，苹果不仅按照以往的做法为涉及人物的 emoji 按照性别和肤色提供多个版本，而且在表示辅助器具的 emoji 中还做了细节上的区分，比如轮椅有手动和自动之分，不同导盲犬的导盲鞍样式也有所不同。
回看历年苹果emoji的更新，从肤色平等，到性别、性向平等，再到为残疾人设计，这让我想起了苹果为残章人士做的广告 - 科技属于任何人
最近，快手B站豆瓣等都陆续上线了“纪念账号”，产品的意义不仅仅是留住生者的精彩瞬间，更多的也是留住逝者的人生印记，对已故用户的账号进行保护，豆瓣在已故账号上做了悼念用户的活动“在他/她的头边放一束山茶花”的方式来纪念已故的用户。
腾讯公益的404页面，这个项目的灵感源于欧洲失踪儿童联合会主导的，名为“NotFound Project”的网络公益工程。就是利用404页面展示那些被拐卖儿童、失踪儿童的信息，帮助那些孩子重新找到家人。
丁香园404页面界面展现了因恶性医患遇害的医生同道，文案是“你所访问的页面就如那些遇害的同道，已离我们远去。”下面还会有这些白衣天使的照片和名字。以这样的方式悼念亡者，也侧面展现了丁香园的社会价值。
在页面走失的这种特殊场景下，404页面视作可被利用的空间，来呈现公益信息，这种方法暂时减弱了用户对产品页面走失的愤怒，将注意力转向对弱势群体或社会问题的关心，侧面感受产品的社会价值，这种方法适用于社会公益性质或相关业务的产品。以上的腾讯公益和丁香园对于这块的设计都是很好的案例参考。
在快手搜索一些负面的情绪词汇时，会提示用户“别怕，我们都在”。并附有24消失免费心理危机咨询热线，从推荐位banner点击后会进入一个群聊，里面都是其他用户留下的暖心话语，这些情感化的设计让那些正在经历困难，或者想要终止生命的人传递以温暖。我们可以帮助你，你并不是孤单一人。微信/知乎等搜索引擎下都有不同的对于该情况的情感化设计。
在京东搜索穿山甲，会直接挑战到保护濒危动物页面，传递出了一个企业对动物的保护意识。页面中的穿山甲≠治病，向全民科普濒危动物的现状和对于人们对于野生动物的错误认知。淘宝更是对野生动物保护启动了绿网计划，搜索穿山甲/象牙等都会进入到该活动页面。
情感化离不开场景化设计，上面四个案例分别是两个404页面以及两个搜索引擎的不同设计，不同的产品赋予了不同的含义。不同的场景下设计师也需要有不同的思考，陪伴产品一同进步。
情感化设计更多的是带给用户瞬间感动，很难形成长期的用户激励或用户增长，因此情感化设计主要目的是通过情感累加，提升产品品牌形象；产品不仅是所有功能的集合，他们真正的价值可以是满足人们的情感需求，而其中最重要的需求就是建立自我形象与社会地位。 反思层是包含并超越前两个层次，我们要经常思考，为什么同类型的产品，我们要选择它，为什么它给我留下了很深刻的印象，这都是反思水平的设计需要做的。
文章来源：站酷 作者：刘狗蛋
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
对第一回还有印象的朋友应该知道，平面设计的定义简单说来就是：“以某种法则，将文字、图案、摄影图片在平面空间中进行编排设计，以达成信息传达或者行为引导等目的的活动”。
△ 图文结合的平面设计作品
这个定义大致在 1970 年代才成熟，但相信随着科技进一步发展，这个定义还会修正变化，但当前可以肯定的是，平面设计中有三个核心元素，分别是文字、图案跟摄影图片。
文字跟图案都已经历史悠久，其中图案最早，文字次之，而摄影则到了 19 世纪中期才被发明，发明之前有着漫长的酝酿演变过程。
△ 图文结合的平面设计作品
我们本次一起来了解一下摄影术的诞生过程，还有其对平面设计发展产生的一些影响。摄影术的发展其实主要分为几个阶段，史太浓把他们总结为三段，分别是：
根据历史记录看来，欧洲在古希腊时期就有人尝试捕捉真实世界的影像，这个人很知名，就是大哲学家亚里士多德（Aristotle）。
亚里士多德发现的其实就是“小孔成像”原理，物理课大家有学过，因为光是成直线射入的，当人站在小孔前，头部挡住上面的光，成影在下边，脚挡住下面的光，成影在上边，所以成像是倒立的。
△ 小孔成像原理
神奇的是，跟亚里士多德接近同期的中国思想家墨子也同时发现了这个情况，并且比亚里士多德还早一些做了这个实验，记录在「墨子·经说下」书中，这种文明发展不约而同的状态非常多，很难解释，似乎冥冥之中自有主宰。
△ 墨子关于小孔成像原理的研究
随后有艺术家基于这个原理制作一种叫“暗箱”的东西来辅助自己进行绘画创作，这样可以高效的画出相当准确的图形来，好比我们设计师有时候也会使用“透写台”辅助临摹一样。
△ 画家制作的暗箱装置
时间一直去到 19 世纪初，有人基于这个“小孔成像”原理完成突破性探索，他就是来自法国的约瑟夫·尼伯斯（Joseph Niepce）。这个突破性发展跟一些现代材料的发展密切相关，就是他尝试将一些感光材料涂在暗箱的平面上，通过曝光的化学变化尝试将影像捕捉下来。
△ 尼伯斯的摄影探索试验
这种方式被认为是最早有记载的摄影技术，尼伯斯将这种方法命名为“阳光腐蚀法”（sun engraving），通过这个方式尼伯斯在 1822 年制作出世界上最早的人物摄影作品，名为《红衣主教》。（Cardinald Ambroise）
1826 年他再如法炮制，完成世界上第一张风景摄影，拍摄的就是其房间窗外的街道，图像朦胧不清，但是完成了历史的突破。
尼伯斯本身是一名印刷家，他这方面的探索动机其实是为了寻求一种替代手工插图的方法，以提升印刷效率，因为手工插图不但时间长，成本也很高，比如要邀请技术精湛的艺术家创作。
不幸的是，尼伯斯的探索还没去到实用性阶段本人就因为心肌梗塞在 1833 年去世了，幸好此时他已经有了一位合伙人，可以继续他的研究，那就是画家出身同为法国人的路易斯·达贵尔（Louis Jacques Daguerre）。
△ 路易斯·达贵尔
达贵尔基于尼伯斯的探索基础进一步深化，首先改善感光材料，比方使用银金属成分的感光版，同时优化制作过程，对感光后的银版再做工艺处理，出来的摄影效果让精确度大幅提高。
1839 年时候，达贵尔采用自己打磨了 7 年的技术对巴黎街景进行拍摄，出来的效果可以说非常好，清晰度很高，让他非常振奋。
获得这样的成果后，在一些经商朋友的建议下，他果断向法国科学院呈报自己与尼伯斯的摄影研究成果，科学院的院士看到作品后大为震惊，一致表示肯定，而且迅速向全世界自豪的宣布法国人发明了摄影术。
与此同时，达贵尔也马上开始努力的推动摄影术商业化，首当其冲的自然就是生产“摄影机“进行销售，因为有法国科学院支持，过程很顺利，第二年就生产并卖出 50 万台，让达贵尔一下子名成利就。
△ 达贵尔相机
△ 达贵尔相机拍摄的作品
这事情让一位叫塔波特（WilliamHenry fox talbot）的英国人气得吐血，因为他早在 1833 年也开始探索摄影技术，并且在 1835 年就设计出一种小型摄影机，可以拍摄到很小的物体。
其原理连暗箱都不需要，属于一种化学反应的直接曝光，产生的图像是黑白负片，但是很精确，他获得这些成就后居然不认为有商业价值，所以丢在一旁好几年。
△ 塔波特相机拍摄的作品
当通过媒介听闻达贵尔的事迹时候，他匆匆将自己的技术向英国皇家学院汇报，英国人也赶忙向世界宣布发明了摄影术，但也只能成为发明者之一，而并非世界第一了。
△ 很不开心的塔波特
但塔波特痛定思痛，发力追赶，1840 年时候更新了感光材料，居然可以将感光之后的底片取出来在暗房冲洗，也发明出负片变成片的方法，虽然多了一道程序，但是得到的效果完胜达贵尔相机，正负片这样的摄影方式一直到 20 世纪 90 年代都还存在着。
△ 塔波特相机完成的作品
正负片的核心竞争力在于可以无限复制，而达贵人尔的银版摄影只有一张图片，所以塔波特相机的商业价值也完胜达贵尔，真正做到后来居上，可见事在人为啊。
上一期说过，当一件事情体现出商业价值，就会吸引到一大堆能人参与，让事情的发展速度快速提升，摄影的发展也不例外。1880 年时候有人发明出干底片，因为之前的感光材料都是湿涂的，很不方便，再后来就是大家感觉相机体积太大，一起去研究怎么变小。1888 年世界第一台小型照相机出现，发明者叫乔治·伊士曼（George Eastman），后来他成立了一间公司，就是大名鼎鼎的“柯达公司“（EastmanKodak Company）。
△ 乔治·伊士曼
△ 柯达公司 EastmanKodak Company
柯达公司同时也主力生产后来风行世界的胶卷，记得小时候我还能在家里找到很多这样的小圆筒包装的胶卷，很后悔没有好好保存一些下来，现今的还能零星找到的卡带在不久的将来也会消失，建议大家可以收藏。
首先将摄影与平面设计结合的是美国人约翰·莫斯（John Calvin Moss），他在 1871 年时候首先尝试将有影像的底片投射到有敏感感光材料的金属版上，通过腐蚀获得正片样式的画面，这个金属板就可以直接用于印刷，从而获得插图。
这种方式比金属雕刻与木刻插图都快很多倍，而且成本低，制作出来的插图非常真实，还有一种特殊的类似钢笔画一般的艺术效果，广受社会大众的欢迎。
△ 莫斯结合摄影技术制作的印刷品
当摄影技术走向成熟的时候，有一些艺术家也开始尝试基于底片为蓝本，将其再创作为版画，这样就获得了准确与艺术化的平衡，而且效率也很高。
世界上现存最早以摄影底片为蓝本创作的木刻版画作品叫《里什蒙运河边的自由人》（Freemen on the Canal Bankat Richmond）,创作时间是 1865 年，主题是一个黑人家庭合照，大家可以看到有很好的艺术韵味。
△ 《里什蒙运河边的自由人》
而大部分印刷厂也在探索怎么直接将摄影图片印刷在纸张上的方法，据闻这种方法其实约翰·莫斯已经掌握，但一直高度保密，没有释放到商业应用中。到了 1880 年时候，美国的《纽约每日图画报》第一次以摄影直接制版方法刊载了一个城镇风景照片，因为地位特殊，这张印刷照片也历史留名，叫《尚地镇的风景》（A scenenin shanty town）。
△ 《尚地镇的风景》
我们从图片细节看来会发现图像好像由一个个小点构成，如果这样就对了，因为这种印刷照片的方法就是大名鼎鼎的“丝网制版”。这种方式是把摄影底片通过丝网照射形成很多细小的格子，格子黑白明暗程度不同，在感光底版上通过曝光就形成金属印刷版，继而就可以将照片印刷出来。
这种方式慢慢被不断优化，越来越多印刷厂都广泛采用。
△ 丝网制版与印刷
当摄影可以顺利变成印刷品后，其媒介地位日益提升，因为采用照片方式做插图有很多好处，其一是节省成本，其二是真实，其三则是效率很高。
所以摄影作品就跟之前任何一种媒介形式的发展路径一样，从追求有到追求好，再由追求好变成追求个性，大家都在努力探索一些新鲜的摄影方法，如今单纯摄影的学问绝对不比平面设计低，而且两者之间的关系非常密切，很多法则也可以相互引用。
世界上第一位探索人造光源摄影的人是来自法国的纳达（F.T.Nadar），他在 1886 年做了世界上第一次摄影采访，对象就是我们在「风格列传」新印象派篇谈到过的化学家谢弗勒尔（Michel Eugene Chevreul）。
△ 纳达采访谢弗勒尔
过程中完成了 21 张由人造灯光配合的现场照片，最后配以文字发表在法国刊物《插图杂志》上，让那一期的刊物销量大增，因为读者可以配合生动的照片更好了解内容，当时而言显得非常有趣。
从此之后，照片与平面设计的关系变得越来越重要，越来越多平面设计师也开始进一步探索照片与排版之间的法则。
前人早已总结了让动画生动的技巧，早在1981年由两位迪士尼动画师所撰写的《The illusion of life:Disney Animation》一书就提到了动画的12项基本法则，该法则也是受用至今。法则虽是针对传统动画而制定，但对于我们日常需求中所接触的动效/动画需求也同样受用。
1）动画原则介绍
2）结合案例应用原则
3）流程方法论沉淀
4）结语
挤压与伸展是我们最常用的运动技巧。使用挤压与拉伸来强调物体的质感、重量、速度。挤压和拉伸会给予物体运动时具备质量感和体积感的错觉。例如当一个皮球正在进行下落运动，在运动过程中让皮球体积产生一定拉伸来表现它的速度感，皮球落地后则因力的作用产生挤压变形。
挤压与伸展的幅度影响着物体的质感、重量。设计师们可根据物体的质感去决定挤压伸展的幅度。动画虽存在夸张性，但对于物体挤压拉伸的体积尽可能保持视觉统一，避免较大的体积误差导致运动的突兀。
预期动作可告知观者物体运动即将发生，增强观者的场景代入感，使运动更加生动真实。如果我们去除前期的预备过程物体所呈现的运动感知像是突然被前方磁铁所吸引。
预期动作可对观者视线进行引导，设计师可以根据预期动作所引导的方向来衔接镜头/场景的转场。反之预期动作也可以用来欺骗观众，当用户预期与画面不符时也可增加动画舞台的趣味性。
每个角色/运动元素在运动过程中都会流露出独特的态度和气质。针对不同的角色/元素的运动特性运用不同的运镜、表演技巧、时间节奏以及舞台的编排技巧，传递贴合角色/元素气质的动态感知。
在现今动画工作流程中，考虑到流程效率及技巧利弊，我们可以使用两者相互结合的方式。关键动作描述的是设计师们熟知的关键帧动画的方式（类似AE）。在动画设计前进行基本运动的关键动作提炼，再进行细化，一层层的递进。底层的关键运动越完善，在后续添加细节时才不会耗费大量时间调整。而对于持续动作（逐帧动画）的技巧，我们可以利用它处理一些复杂效果例如（涉及到运动空间的变化、形状上的灵动变化等）。
逐帧动画。
优点：自由且流畅的动态。
缺点：难以把控时间长短、体积大小。
关键帧动画。
优点：清晰、可靠、规范。
缺点：修改成本略高。
跟随动作指的是元素运动结束后不会立刻停止，会因为质量、惯性等因素，元素会慢慢进行振动减幅的过程。重叠动作则指的是运动不会同一时间发生，主体与附属部分的运动会因质感、外力等因素产生不同的速率。
当一个人跳跃的时候，自身的衣帽等附属物也会随之摆动。跟随&重叠动作反应着运动的力量感和速度感，利用好跟随与重叠动作，可以更好地表现角色/元素主要动作/运动。当主要动作/运动力量大、速度快的时候，跟随与重叠的物体运动幅度大，反之则运动幅度小。
真实世界的运动遵循着缓动运动的规律，而并非匀速运动。根据物体运动情况、动态质感去编排元素合适的运动速率。关于运动的速率编排相关内容，可以看看过往的文章-《动效的质感》。
仔细观察可发现自然界中的运动多为弧形运动的组合，而匀速运动只存在于机械运动中。
在人物运动过程中使用弧形运动增添角色动画表现力。比如当人物抬头或转头时，通过弧度的变化映射人物的情感，是充满好奇心的还是沮丧的。
在交互动效中，弧形运动路径会给予观者运动表现力较年轻活泼的感知隐喻。设计师可根据品牌调性及产品属性去选择运动路径类型。
当主体在运动时，设计师可通过附属物运动来辅助表达主体运动气质。比如人物敲门时，捏紧拳头的敲（代表生气）与翘起兰花指敲的（代表精致）区别。
在上篇文章其实我们有提到影响动效质感的原因之一就是时间，控制好物体的运动时间也是表现良好动画节奏感的关键。
使用「时间偏差」的技巧，可以让你的动画更加生动。因为受力、质感等因素影响，主体运动时附属部分的运动不会同时发生。比如当人物正在打哈欠时，首先是从嘴巴发力，再扩散至五官眉毛。
为保持动效的连续性以及营造自然流畅的交互体验，适当的使用时间偏差，可避免动效元素变化过程出现空档期，提升信息传递效率减少认知负荷。
通过夸张手法增添动画表现张力，加强运动元素的吸引力令动画更有代入感和戏剧性。
动画设计时可通过营造镜头透视感、景深感模拟真实的空间感打破二维扁平视觉效果，提升画面表现力。
一部好的动画作品一定会有令人吸引的人事物，比如动态气质或视觉风格等它们都能很好的吸引观众。除此之外，如何讲好一个故事，通过趣味幽默的故事表达手法也可以增添动画的吸引力。
通过对十二大基本原则的学习，我将技巧分为以下两大类：设计技巧和表演技巧。
设计技巧：动画设计的技法，增添动画细节令动画表现更生动自然。
表演技巧：舞台表演的技巧，提升动画舞台全局的表现力。
接下来我们结合上述所提及的动画原则，根据实际案例进行结合应用。一起来探讨下当接到动效设计需求时，我们需要思考哪些点？才能使我们的动效表现力更上一层楼。
假设在项目中我们需要对设计元素（猪猪存钱罐）添加动效以提示用户已省钱成功的情感氛围。设计前我们先来分析下元素以什么动态/动作表现会更贴合元素性格。考虑到猪猪的可爱属性，采用了跳跃的运动方式。并拟定了跳跃后天上落下金币的动画脚本。
将脚本确定后，我们在脑海里已经有大概的运动画面。但在进入动效设计前，还需要明确在动画中使用哪些动画原则来提升动画生动性。
在添加动画细节前，我分享下在项目中经常用到的两个技巧。
实现挤压与伸展的方式有很多种，最常见的是直接改变物体的缩放比例或形状路径来实现。但在设计项目中我们往往会遇到非矢量的设计元素，利用xxx可实现图层的弯曲扭曲等变形效果。
质地坚硬的物体受外力的影响较小，质地柔软的物体受外力的影响较大。而像猪猪这类柔软的物体在恢复静止吋肉肉会有一个跟随&重叠动作（抖动）。在处理这类抖动的效果除了使用常规的弹性表达式外还可配合使用AE的 CC bend it 效果增加形变细节令物体运动更为生动自然。
当我们去除这些动画原则后，再去作对比明显的感知差异就出来了。
根据过往项目经验，我总结了动效/动画设计的流程思路。从业务目标的分析到动画脚本的确定，层层递进。前期的目标和框架确定后，之后进行动画原则的梳理及最后的动效输出。设计师们不妨在项目中尝试上述的流程思路及原则技巧，将自身动画的表现力提升一个档次。
随着动画/动效的落地方式愈来愈完善，像Lottie、svga等新型的动画落地形式所带来的高品质画面呈现。设计师们不能满足于动画仅仅只是动那么简单，如何去塑造生动的动画形象还有不少我们需要考虑的细节。恰好前人总结了相应的原则技巧，帮助我们站在巨人的肩膀上看得更远。除《The illusion of life:Disney Animation》外，近期也在阅览《动画师的生存手册》里面涵盖了不少关于角色动画的运动技巧及细节。其中部分技巧并不局限于角色动画的设计中，下期文章我将分享关于角色动画的知识沉淀内容。
文章来源：站酷 作者：Fiasc1
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com