你是否有在听别人说某某原理法则时一脸懵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，正是利用了“近因效应”。
近因效应常用于及时进行反馈的设计界面中，比如点赞、评论、分享等功能置于底部不仅可加深印象，同时用户在看到有趣的内容，想要评论或分享时，不用等到文章看完即可操作。从而增强内容粘性，提高互动率。
用户的记忆具有系列位置效应，而且人的短期记忆非常有限，通过序列效应法则的应用，我们可以帮助用户减轻记忆负担。在排列项目时，把重要的放在首位或末尾，以达到最好的记忆效果。
作者： 印迹_ 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在笔者刚学习动效那会儿，因为执着于钻研软件技法，而忽略了动效的基本原理，导致作出了很多生硬的动效设计。和很多事情一样，动效设计如果违背了自然规律，必定会损害产品的可用性。
在用户界面中，动效不仅仅是一种视觉装饰，而是一种强大的力量，它可增强产品参与度并扩展设计交流的范围。
本文给大家介绍了十二项最基本的动效设计原理，这些都适合用于UX/UI设计项目中，是非常有用的运动原理，建议收藏反复食用。
缓动效果模拟了现实世界中对象随时间加速或减速的方式，它适用于所有运动的元素。自然界中没有东西是从一点呈线性地移动到另一点。现实中，物体在移动时往往会加速或减速。我们的大脑习惯于期待这种运动，因此在做动画时，应利用此规律。自然的运动会让用户对你的应用感觉更舒适，从而产生更好的总体体验。
线性动画
没有任何速度上的变化的的动画称为线性动画，如坐标图所示，运动的曲线成直线状态。这种动画效果往往显得很僵硬，不自然，让用户觉得不协调。一般来说，应避免线性运动。
缓出动画
运动的开头速度很快，结尾处逐渐减速的动画称为缓出动画。运动曲线呈抛物线状态，缓出动画最适合界面里面的动效，快速的入场给人反应很快的感觉。
缓入动画
和缓出相反，缓入动画是开头慢结尾快，这就像自然落下的球体一样，速度越来越快。但是，从交互的角度来看，缓入可能让人感觉有点不自然，因为结尾很突然；在现实中移动的物体往往是减速，而不是突然停止。缓入还有让人感觉行动迟缓的不利效果，这会对网站或应用的响应速度给人的感觉产生负面影响。
缓入缓出动画
把缓入和缓出曲线连接在一起，就是完整的缓入缓出动画，它的运动过程可以想象一辆汽车从起步到停车的动作，可以实现比单纯缓出更生动的效果。由于开头慢、中间快和结尾慢，动画将有更强的对比，会让用户感到愉悦。
因此，缓动原理实际上是使动画不再那么尖锐或生硬的过程。
变形是由一个形态变成另一个形态，这种形变是动画里最引人注目的。通过元素形态的转变，告知用户元素的状态或作用发生了改变。
例如这个下载动画，下载完成后变形为按钮，其实是符合用户预期的。这种无缝转换，可以提高用户的认知度，提
升了动画的连贯性。
在动效中，利用挤压变形原则能够唤起用户的主观记忆。是刚性的还是柔软的，通过物体运动的变形状态就能很好的体现出来。
当元素被克隆时，可表达出元素与元素之间的某种连续性。在此原理中，如何让物体的出现和离开具有连续性、关系和过渡，是信息准确传递的关键。
例如这个发布按钮，点击它会创建多个新对象，引导注意力，非常清晰的表达了他们之间的关系。
还有这个运动健康页面，在添加练习项目时，从主按钮克隆生成一系列练习项目，选择完成后原路返回。
利用覆盖原理能让原本有限的空间得以延伸，用以显示额外的可见元素，补偿了用户体验中的单一统一视野或“客观视图”。覆盖原理在UI设计中常用于列表横滑，通过覆盖，隐藏相关操作，以减少视觉上的干扰。
在某种程度上，作为设计师，“层”的概念是显而易见的，不言而喻。我们用层来设计，层的概念被深深地内化了。但是，我们必须小心区分“制作”和“使用”的过程。
作为不断参与“制作”过程的设计师，我们要非常熟悉我们正在设计的物体的所有部分（包括隐藏部分）。然而，作为用户，那些不可见的部分是根据定义和实践，在视觉和认知上隐藏的。
偏移和延迟原理是表明元素之间的层级与关系，在新元素入场时利用偏移和延迟让信息或界面元素按照秩序进退场，定义对象关系和层次结构。
在上面的示例中，浮动操作按钮 (FAB) 转换为头部背景。数据图表在时间的延迟下依次出现，暗示用户这里的信息与其他元素之间的区别，吸引用户注意力。
遮罩是决定元素变化的结果是什么，通过暂时使对象显示和隐藏，以连续无缝的方式转换，保持了叙事流程的效果。虽然对象本身保持不变，但因为它有了边界和位置，这两个因素决定了对象是什么。
例如这个转动的咖啡杯，借助遮罩，通过改变logo的位置和吸管的朝向，造成杯子在自转的假象。
在上面的例子中，音乐封面改变了边界形状和位置，但没有改变内容。转换发生在用户执行操作后激活，是相当巧妙的技巧。
父子关系是将界面元素关联起来的重要原则，创建出空间和时间层次关系。它最适合作为“实时”互动，例如拖动列表顺序时，其他信息会同步跟上。
回想一下，很多元素属性都可以创造这种联动的继承关系，例如不透明度、位置、旋转、缩放、形状、颜色等。
文本和数字的变化是如此普遍，以至于我们忽略了它们，而我们却没有给它们带来区别和严谨来评估它们在支持可用性方面的作用。
数字和值表示现实中正在发生的事情，既可以发生在实时活动中，也可以发生在非实时活动中。它可能是时间、收入、速度、游戏得分等。当我们使用动态的数值变化时，它激活了一种“神经反馈”，用户会觉得自己与这些数值有关联的。如果这些值是静态的，就感觉与现实的联系会减少。
数值的变化在各类金融理财和日历APP中经常出现，数据的动态表达和交流可能会对数据的价值产生影响；如上图中的数值的动态变化，让用户感知到自己可能有能力影响到数据，提升了参与活动的意愿。
蒙层与原理四的覆盖类似，只不过蒙层带有透明属性，它挡住了后面的信息，但又没有全挡住。iOS中常见的毛玻璃效果就是如此，它让用户意识到正在操作的对象，还有另一个世界。拓展了Z轴的层次结构，补偿用户体验中的单一视野。
当用户滚动时，在视觉平面中创建空间层次结构。其目的是为了建立各元素的层级关系，移动速度更快的交互式元。对用户来说显得更接近，较慢的非交互式元素，会退回到背景显得更远，从而更好把内容和环境区分开来 。
设计师可以利用时间本身来创建这些关系，告诉用户界面中的哪些对象具有更高的优先级。用户不仅认为界面对象现在具有超出视觉设计中确定的层次结构，而且现在可以利用这种层次结构，让用户意识到设计之前掌握用户体验内容。
维度是将界面的元素多维化，使元素看起来像可翻转的，可折叠的，浮动的。可以使不同的UI元素实现无缝的过渡衔接，它通常以折纸维度、浮动维度和对象维度这三种方式来呈现。
此外，维度原理克服了视觉平面中的分层悖论，其中缺乏深度的物体存在于同一平面上，但出现在其他物体的“前面”或“后面”。
折纸维度可以被认为是“折叠”或“铰链”的三维界面对象，它由多个元素组合成“折纸”结构，隐藏的物体在空间上仍然可以说是“存在”的，即使它们不可见。
浮动维度为界面对象提供了空间起源和离开，使交互模型直观且具有高度叙事性。常见的“3D”卡片就是通过这一维度来实现的。
对象维度会产生具有真实深度和形式的维度对象，可以看到，虽然在2D层，元素却可以3D视角呈现真实的维度。
平移与缩放是电影概念，指的是与相机有关的对象的运动，以及画面中图像本身的大小从远景平滑变化到特写镜头（反之亦然）。
在某些情况下，无法判断对象是否正在缩放。可能是在在 3D 空间中向着相机移动，也许是相机在向对象移动，又或者是对象自身在放大缩小。以下三个示例说明了可能的情况。
镜头平移：被拍摄物保持静止而镜头移动或镜头保持静止，而被摄物体进行远离或接近镜头的前后移动。
镜头缩放：镜头与被摄物体在位置上保持静止，而被摄物自身进行缩放。
缩放：是指视角和对象都没有在空间上移动，而是物体本身在缩放（或者我们的视野正在缩小，从而导致图像放大），这向观看者传达了附加界面对象在其他对象或场景“内部”的信息。
移动还可以结合维度原则，从而产生更多空间和深度体验，并向用户传达当前视图“前面”或“后面”的其他区域或内容。缩放允许无缝转换 - 实时和非实时 - 支持可用性。在创建空间心智模型时，Dolly & Zoom Principle 中采用的这种无缝性非常强大。
作者： 印迹_ 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
创建美观、可用和高效的UI界面需要花费时间进行设计细节的打磨，本文从视觉和情感化设计两个方面来说说如何提升UI设计的高级感。
在互联网产品日趋成熟的今天，你会发现所有的App越来越像，似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重，使得设计不精致，产品没有气质和品牌感。一个App设计是否精致，是否富有设计感，在于它的细节，这就意味着我们在进行设计的时候，要从细微之处着手，从多方面去钻研如何创造出打动人心的UI设计。本节总结了12个简单直观的提升设计感的小细节，一起来学习。
1.1 使用颜色深浅构建层次结构
在对UI 文本进行样式控制的时候，最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比，所营造的对比并不够，尝试结合色彩和字重来营造更好的对比效果。
每种颜色都有一个视觉权重，这有助于在内容中建立层次结构。通过使用颜色的深浅，为元素赋予不同的重要性。如果可以的话，你甚至可以采用两到三种颜色：
主要内容使用深灰色（诸如标题，但是不要用纯黑）
次要内容使用灰色（比如商品介绍）
辅助性内容采用浅灰色（比如发布日期）
类似的，在UI设计的时候，通常两种不同的字重足以营造出优秀的层次感：
大多数的文本采用正常的字重（400到500，具体取决于字体）
对于需要强调的文字采用较重的字重（600到700，具体取决于字体）
▲主标题字重为600，其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于400，因为这一部分字体本身尺寸已经较小，低于400会使得可读性不佳。如果你依然需要降低字重，那么不妨让字体色彩更浅一点，或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理
不要在有色背景上使用灰色的文本，在白色背景下，将黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不错的淡化其视觉效果的做法。
但是在彩色背景下，想要降低和背景色之间的对比，通常有两种方法：
一是降低白色文本的不透明度；二是让文本逐步接近背景色，而不是改为灰色。
▲左图设计师职位信息为白色文字降低不透明度，右图为和背景同色相高明度的颜色
其次当涉及长篇内容时，大面积的深色粗体字会给人一种沉重感，而且很跳跃。通过选择类似深灰色（#4F4F4F）这样的颜色可以很容易地解决这个问题，使文字更容易被识别。
1.2 统一色调
选择一种基础色，再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许，只需使用固定的色板，通过调整基础色的饱和度和明度，利用这种简单的方式为设计增加一致性。
1.3 干净的阴影
阴影是UI设计中最常见的视觉表现手法，它可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意力，同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。
这种轻柔的阴影呈现出的干净，增加了画面的精致。如果阴影的范围太小或颜色太深，位置也没有偏移，而是聚集在元素的四周，就会让画面更加扁平，让视觉变得厚重，呈现出不精致的画面感。
阴影不一定是黑色的，还有一种扩算阴影是模拟元素本身的颜色投射在背景上，由于阴影与元素的色调一致，因此呈现出十分融洽的画面感。在UI设计中，这种手法不宜过多使用，否则呈现出的各种色彩搭配会让人眼花缭乱。
1.4 个性的图标设计
合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致，圆角一致，线宽一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？例如下面这组图标设计，无论是在图形上的创新，还是颜色搭配上都呈现出无与伦比的创意。
标签栏作为一个App的全局导航起着至关重要的作用，它的设计影响着整个产品的视觉风格。通常，大多数App都是使用iOS规范的设计样式（默认灰色，选中填充品牌色），这样的设计太普通，太常见了。要想让标签栏图标设计精致和富有个性，可以丰富每一个选中态图标的视觉表现，例如给图标加上背景和表情，即显得生动有趣，又增加了用户的好感，给人留下深刻的印象。
3D立体图标设计是近几年来的流行趋势，看上去十分精致、华丽，但是看久了会让人产生轻微的视觉疲劳，同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。
1.5 Tab的设计感
Tab是App设计中最常见的控件之一，它源自Material Design的设计规范。现在很多iOS产品当中也开始使用这种导航栏样式来进行设计，而原本属于iOS规范当中的分段选择器变得不那么常见了。
在视觉表现形式上，Tab和标签栏同样也分为选中态和未选态，它的设计较为简单，通常是使用一组文字标签，通过颜色或在标签下加上小长条来区分两者的状态。因为它简单，却越难设计出彩，要发挥极大的设计想象力，跳脱出设计规范的限制，才能找到完美的方案。例如虾米音乐的Tab选中态是一段音频波线，再配合文字的大小对比，一个富有设计感又符合产品特征的Tabs就被创造出来了。
我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条，这样就建立起视觉上的联系，让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上，既让界面视觉独一无二，又进一步强化了用户对品牌形象的认知。
1.6 无框设计 去繁从简
在UI设计中，有许多的装饰元素，如卡片的边框、列表的分割线等，虽然边框，分割线是分隔两个元素的好办法，但是它不是唯一的方法，使用过多会让整个布局的设计感降低，或多或少都会干扰用户浏览的视线，让信息内容失去注意力，因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次，让画面变得干净，整齐：
使用阴影
阴影同样可以营造出边界感，而且相比边框分割线更加微妙，并不会显得突兀，不会分散用户的注意力，让内容更聚焦。
使用不同的背景色来区分
通常，相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以，你所需要做的就是在不同的区块采用不同的背景色，并且尝试删除分割线，因为你根本不需要它。
增加额外的留白
创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。
1.7 统一设计元素
在App中的每一个界面都有许多元素，那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观，如椭圆矩形，也可以作为视觉符号的一种，延续到其他界面中，成为图形或按钮的外观。这样，整个界面就被统一的设计元素联系起来了，给用户始终如一的一致感。
1.8 符合产品气质的字体
选择符合产品气质的字体，可以与产品的定位相吻合，传递给用户正确的情感意识。虽然默认字体可以满足大多数App 的设计需求。但会出现一个问题就是，系统字体的普适性并没有什么特色，在一些特定的情境下就显得收效甚微。例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉，换成系统字体后，整体感觉在气势上就变弱了很多。
1.9 第三方图标风格统一
大多数App都支持三方登陆，他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口，这也是设计师最常忽略的内容，往往是直接将第三方图标调整一致大小和摆放整齐位置，没有针对它们再设计。一个设计精致的App不应漏过任何的细节，我们可以以自家App的图标风格为依据，对第三方图标进行优化设计。
1.10 图片中寻找色彩
App中优美的图文设计，能带给用户如沐春风的视觉享受，它非常重要。我们经常看到文字叠加在图片背景上的设计样式，为了减少复杂图片背景对文字的干扰，通常的做法是叠加半透明度的黑色蒙版，让白色文字清晰可见，但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色，这样就使文字、色块和图片融入到一起了，画面变得高级和富有设计感。
1.11 提高图片质量
图片的质量影响着整个App的格调和用户的情绪，高品质的图片给人愉悦的视觉享受，产生美好的联想。而低品质的图片会瞬间拉低App的质感。在App设计中，一张漂亮的图片从收集到上线，需要经过裁剪，调色等过程才能被使用。即使是普通的商品图片，我们将它抠图后调整成统一大小，再加上干净的背景，就能立刻提升商品的美感，界面视觉也会变得美观、整洁。
1.12 卡片式设计
现在的UI界面设计中，卡片式设计已经是一种非常常见的设计形式，它有利于信息分层和整合，划分出更加清晰的组织结构，实现复杂内容的简化处理，提高空间利用率。同时卡片式设计通常很依赖视觉元素，很强的视觉元素正是卡片式设计的一种优势，也是提升设计品质感的良方。
心理学认为，情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时，使他产生情感的变化，那么产品便不再冷冰冰，他透过眼前的东西，看到的是设计师为了他的使用体验，对每一个魔鬼细节的用心琢磨，人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈，有时候仅仅一句文案、一幅插图、一个动画就能打动人心，使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面，这些简单而美好的设计细节充满了积极情绪，它是满足产品的功能性和易用性之后，追求更高层次的目标。
2.1 提示性文字
语言是情感化设计最直接的利器，拟人化的对白相比冰冷的话语更能获得用户的好感，赋予产品的新的生命力。例如App那些push推送通知，因为用户每天收到的PUSH实在是太多了，早已心如止水！这个时候，你就需要一条成本低、效率高的PUSH文案，去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣，让人看到会心一笑。
2.2 下拉刷新
下拉刷新是用户在App使用中经常进行的操作，常见的下拉刷新设计是图标加文字的形式，这种设计简单、直观，但毫无设计感，不能引发用户任何的情绪。
下拉刷新是一种临时状态，丰富它的设计细节不会造成与产品界面的格格不入，相反，一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如uc头条在下拉刷新时会蹦出一只奔跑的小鹿，暗示正在快马加鞭的加载新内容，小鹿形象延续了品牌logo。作为资讯类产品，内容更新速度至关重要，奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感，瞬间就让下拉刷新变得生动有趣。
2.3 头像设计
个人中心页与用户信息密切相关，用户的虚拟形象在这里得以展现，常见的设计是一个用户头像加登陆文字的形式，这种默认的头像设计无法得到用户的认同感。
现在很多的产品已经放弃了死板的默认头像，给用户更多的选择。赋予产品一些人格魅力，可以让产品富有生命力，消除人机界面的冰冷交互，帮助用户和产品建立友好的联系。例如美团外卖和躺平，它们各自的身份都代表了产品的气质和用户的属性，让用户产生一种身份的认同感。
2.4 缺省页化解负面情绪
通常状态是，当前页面没有内容或无网络状态下出现的页面。常见的设计是图标加提示文字的形式，这种简陋的设计会给用户心理造成很大的落差，陷入负面情绪中。情感化设计在此时就可发挥巨大的作用，它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。 设计师可发挥的空间很大，根据产品属性和品牌延展图形，结合动效或插画等情感化设计，可以很好的丰富页面内容。例如躺平的空白页呈现出一种贱萌的场景，让用户会心一笑，使产品充满了趣味性。
2.5 标签栏微动效
情感化设计变得越来越丰富，图标设计上升至可以展示动画效果。通过动效的使用，标签栏切换变得不再死板。用户在频繁切换页面时，不再觉得单调。精心设计的动态效果，能够缓解用户等待时焦躁的心情，从心理上缩短用户等待时长，让品牌更加深入人心。
2.6 模拟用户行为
如果一个产品可以模拟用户的行为，将用户代入真实的情境中，用户就会对产品产生深刻的认同感。例如「潮汐」会根据时间场景和季节变化，播放不同的背景音乐来营造氛围。雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。
情感化设计可以拉近用户与产品之间的距离，在更深的层面体现出对人性的关怀，为人们带去情感上的愉悦和感动。洞悉用户的行为，换位思考去满足用户的需求，情感交流就产生了。例如当你截屏了一张图片，打开微信对话框时就会自动显示这张图片，提前预知了你发截图的需求。
再例如很多观众都习惯了在电影结尾等彩蛋的习惯，因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。在「淘票票」上购买电影票时，你会发现影片详情页会有彩蛋提醒，告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置。有了这个提示信息，就不必再为了不确定的彩蛋期待浪费时间啦。
2.7 有趣的细节设计
俗话说：有趣的灵魂万里挑一，可见有趣是可以引发交流进而让人们产生积极的情绪。 在UI设计中，有些有趣的设计是隐形的，需要用户自己去发现，当用户找到这颗彩蛋时，就会获得一份喜悦和乐趣，增强用户对产品的探知欲。例如在电脑端打开B站的鬼畜区长按这个返回图标10秒左右，你会打开鬼畜区的新世界(⊙o⊙)（友情提示：记得戴上耳机或调小音量）其实长按「返回」10秒后网页下方会出现一条黑框提示「尝试输入字母，发现鬼畜秘密」。按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕！
有些有趣的设计又是显性的，目的是让用户与产品引发交流从而产生积极的情绪。例如成为优酷视频会员，不仅可以尊享丰富的影视资源，还能让自己的ID在发弹幕时使用剧集相关角色的头像。带角色扮演头像的弹幕，让发言更有剧集代入感。这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性，一方面也丰富了弹幕区的多样化，可谓一举两得了。
总的来说：UI设计的“高级感”意味着在视觉层面要从细微之处着手，创造出精致富有设计感的画面；另一方面要从情感化设计出发，使用户与产品产生情感上的共鸣，获得更高层次的使用体验。
作者： 印迹_ 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
设想一下这样的画面，如果在你的Feeds列表里面推荐的是一些机械键盘和游戏装备，那作为用户，会心想“晕，这些东西又不能让我变瘦变美，跟我啥关系？往下翻翻再看看有没有什么可买的东西”。
2. 商户信息：品牌标签（比方说品牌、优质商家等）。商户信息的透出，对追求品牌的用户来说是个有利的促进因素。如下图中商户的“品牌”标签。
光有这样的利益点也还不够，设计师需要做的就是将这些信息进行表达，怎样表达？设计方案将卡片进行结构化和组件化。什么是结构化和组件化？如之前的图（某平台的商品卡片结构）
三、兴趣点的试探
作者：Sophia的玲珑阁 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
考拉海购，前2屏表达内容，2屏之后全是feeds；
小红书更不用说了，第一屏就直接开始种草了；
②巧用折叠与展开，进行非重点内容的隐藏；
③内容区域进行多层信息叠加，比方说Instagram的发布
④利用转移的手法，将复杂的内容用新页面进行承载，如下图豆瓣
3.利用好导航结构，同样的屏幕可以表达相同等级的多种内容；
4.做模式区分，在任务模式下隐藏不必要的信息。如美团外卖在滑动过程中会隐藏购物车。因为用户当前聚焦的是浏览内容
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：Sophia的玲珑阁 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在B端产品做设计的时候，第一件事是决定界面的结构布局，导航放在哪成为一件亟需要考虑的事情。典型的，有横向导航与纵向导航之分，拿ant design来举例，如下面2张图所示；
两者看起来都行，但选择哪个，心理会有第一眼的直觉，但光有直觉不行，还得罗列个123出来，这样展示方案的时候，才能服己服人。
横向导航
优点：
通常使用比较少的菜单，简单，容易记忆；
位于页面顶部，不占用横向空间；
由于位于顶部，在视觉上更突出，更容易识别；
菜单选项之间视觉权重的区分更明显，左边最强右边最弱；
缺点：
扩展性有限，不能很好的承载大量和多层级菜单；
占用屏幕高度，特备是当固定于屏幕顶部时；
来回切换菜单选项时，横向移动鼠标的距离更长，操作效率更低；
纵向导航
优点：
能够承载的菜单项数量和层级更多，扩展性强；
不占用屏幕高度且可以收起，为内容提供更多空间；
在菜单间切换时鼠标移动距离短；
能够更好地适应屏幕宽度较小的设备；
缺点：
菜单数量多层级复杂时，不容易记忆；
菜单选项文字不宜过长，可能会截断；
各菜单选项之间的视觉权重差别不明显。
他们都可以在已有的方向上进行扩展，如下图
横向导航扩展
但总体来说，单独的横向导航方式层级不能超过3层，多于3级就不利于用户的阅读和选择。
纵向导航扩展
相对于横向纵向的拓展性强，不管多少级都可以一致往下加，但层级高过于3层，用户对导航的分辨和记忆会明显下降。
当然，有时候单独只有横向或者纵向一种导航不能完全满足我们的需求，他们有那么，根据以上特点，我们也可以有如下组合的形式。
组合导航
很明显，这样的组合导航，适用于一级导航不太多（做好少于5个）且内容权重差别很明显，一级导航之后的导航内容和层级比较多且内容复杂。
另外，如果嫌纵向导航占空间，则可以考虑将纵向导航做成可折叠收起的模式，适用于贴着浏览器的纵向导航。
可折叠的纵向导航
总结一下：
横向导航易记忆、易看，各导航权重区分明显，越靠左越重要，但切换效率慢； 2.纵向导航扩展性强，可折叠，各导航权重区分不明显，切换效率更高；3.如果两者都不能单独满足，可尝试组合的形式。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：Sophia的玲珑阁 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
头像，作为我们在虚拟世界展现给别人的形象，无疑拥有强烈的社交属性，还记得当年刚刚拥有QQ的我，隔一周就会换上自己喜欢的图片，通过头像还添加了好些拥有同样爱好的人。
但是随着年龄的增长，我们开始不太爱去设置自己的头像(有些APP甚至会将设置头像作为领取奖励的任务，可见大家越来越不爱设置头像)，一些不经常使用的APP都是习惯性的使用默认头像。
这时候设计合适产品的默认头像能够使产品整体更加和谐。接下来我们就来看看默认头像的7种设计方式。
单个无性别头像是最常见的默认头像设计方式，以无性别灰色或单色系半身人像为主，有些会使用宇航员的形象（也看不出性别），且一般只有一个。如下图：
特点：无性别头像具有更广的包容性，设计简单快捷适合比较赶的项目；但设计单一，单个无性别头像的社交属性不够强烈。
性别头像以男女性别划分，根据用户男女比例的不同有以下三种情况。
产品定位以男性居多，无论用户男女都仅有男性默认头像。
特点：只设计一个男性头像，比较快捷，但对女性用户不太友好
产品定位以女性居多，无论用户男女都仅有女性默认头像。
特点：只设计一个女性头像，比较快捷，但对男性用户不太友好
产品定位没有明显的性别偏向，分别设计男性和女性头像，需要注意的是该方式常常需要用户设置性别。
特点：分别设计男性与女性头像，能满足大部分用户，需要开发判定用户的性别。
吉祥物头像也是使用很频繁的，一般拥有吉祥物的APP都会采用该方式设计默认头像，设计1个或是多个。
常见吉祥物多以动物为主，也有以人物、拟人物为主的吉祥物，比如B站的看板娘萌妹子和黄油相机的一坨黄油。
特点：吉祥物头像更具辨识度，随时随刻加深用户对吉祥物的印象，便于制作延伸设计。
这里的logo头像是除去以吉祥物为logo的APP后，其他的logo头像。使用这种默认头像的APP比较少见，目前我看到的有悦动圈和开眼，如下图：
特点：logo头像能加深品牌的印象，但缺失了头像应有的社交属性。
头像中以文字为主，一般仅有两个字。以钉钉为列，它的默认头像使用用户姓名后两位作为中心，我认为其实钉钉的默认头像已经可以很好地帮助用户找到公司对应的同事，反而比起某些图片类自定义头像来的直接。
还有一种文字头像是以APP名称为主，比如叮当快药，它的默认头像取了”叮当“二字，和logo头像类似，同样能加深品牌印象。
特点：以文字为主，多为两个字。OA办公系统可借鉴钉钉以员工姓名为主。也可将APP名称置入头像中，能迅速设计出来，适合时间紧的项目。
多主题默认头像，常用在拥有强烈社交属性的产品中，APP给了用户更加丰富的默认头像选择，有了这些丰富的默认头像即便用户不自定义头像也不会对界面的层次感造成影响。
soul设置头像时可以选择多种画风的不同人物，男女分别有36个默认头像供用户选择，并且还可以改变背景色，使得默认头像变化丰富，具有一定的趣味性。
类似的还有B站的随机头像，共有11个以B站看板娘为形象的默认头像，可以帮助用户减轻因选择困难症不知用何头像的焦虑。
特点：为用户提供了丰富的默认头像，能减轻用户不知使用什么头像的选择困难，并且具有一定的趣味性，但设计花费时间较多，不适合时间紧的项目。
最后介绍的捏脸头像，追溯起来应该是从iOS12发布的Memoji延伸而来，这种可以像捏泥人一样任意改变的头像具有非常强烈的趣味性，甚至形成了一夜爆红专门捏脸的APP-ZEPETO。
捏脸头像的有趣不仅在于可以捏脸，它就像是我们在虚拟世界中的形象，可以给她打扮、布置房间等，更像是延伸出来的装扮游戏。比如淘宝点击个人中心的头像就会进入淘宝人生。
soul则将捏脸头像真正应用到了头像的制作中，在个人中心点击头像即可进行超级捏脸，捏好后就可以直接应用了。
特点：具有强烈的趣味性，可以延伸为单独的互动游戏，实现难度较大，不适合广泛的应用。
本文着重介绍了7种默认头像的设计方式，分别是单个无性别头像、性别头像、吉祥物头像、logo头像、文字头像、多主题头像、捏脸头像，我们在设计时可以根据项目时间、产品的定位、趣味性等选择合适的默认头像。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：人類君 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
数据可视化的表现形式现在也2D和3D（这里的2D和3D只是通俗的叫法，不具备行业普遍性，只是作为文章中的分析，进行表达），在网上还是有很多关于2D数据文章和教程，我觉得还比较具备行业的普遍性，所以今天我们就来聊聊3D数据可视化。
现状：3D可视化目前来说还是属于一个比较小众的设计群体，而且因为主要面对的客户大多是ToG或者ToB的项目，项目保密工作做的很好，对外发声较少，因此也会显得特别神秘，行业门槛也相对较高。但是由于政府和企业对于这类项目的需求大，再加上城市智慧建设、军事电子沙盘、智慧交通，项目多且广泛，也就导致了这类设计师较为稀缺。
通常所表达的就是通过3D的游戏引擎（例如：Unity3D）制作出来的数据可视化项目，他能够更直观的还原出所要展示数据可视化的真实场景，并且能够实时接入数据，使得整个项目更具立体、更具有科技感。使得项目在面对复杂操作时能灵活应对。
在我看来，虽然也是UI设计师，但是他和大众认知中的UI设计师又有很多不同，比如承载设计的屏幕可能大到16m*9m、小到只有iPad的尺寸，因此很考验设计师对不同尺寸屏幕下的设计方法。而3D数据可视化更多是向空间、建模形式的表达，因此对于三位的理解、空间的交互转变都尤为重要，我在下面来一一拆解需要哪些能力～
视觉能力：在设计当中，视觉也是最基本的能力，其主要满足这个数据可视化当中对于场景、物体的视觉能力、数据图表的视觉效果，对于地图、建筑、数据的视觉表达。通常风格以科技感的风格为主，因此考验的更多是我们设计师的想象力、对于科技产品的表达能力，因此对于FUI比较重视，如果平时能够多看科幻电影能够对这方面能力也会有所提升～
数据可视化能力：首先你需要具备很强的数据表达能力，即将用户想的数据现象通过你的数据化设计进行表现出来。同时需要去理解每个数据之间的真正含义，然后再去设计，因此对于图表的理解必须更加深刻。再次因为是通过3D的手法实现，你所更需要了解是我设计的这个图表，2D和3D之间到底存在什么差异，既然我用了3D，在图表层面上怎么和2D图表拉开差距、有所区别，这是我们需要去认真思考的。
三维交互能力：三维软件的交互和二维不同，虽然在移动端大家都提出了Z轴的概念，但是和现如今所需要的可视化的项目不同。
建模能力：因为在实际工作当中，很多建筑物不能够靠你的三维想象来进行设计稿的制作，因此通常我们也会使用c4d这一类的三维建模软件，这样能够保证快速出设计稿的同时，对于物体的表现又能非常到位。
对于接触数据可视化的UI设计师来说，最关心的莫过于这个项目你们是怎么落地。因为每个公司要求不同，我说的只是我们自己的做法，只是想说出来和大家分享分享～
一般我们产出的会几个东西：设计静帧图（包含静帧图、标注、切图）、视频demo、交互流程（看项目）
基本流程：这个是必须要的，首先项目会根据我们所出的设计静帧图进行和需求方进行对接，确定他们想要的效果和设计静帧稿上是否一直。如果双方理解存在差异，就会按照要求进行修改。修改完成后会将设计静帧稿交到建模师手中，3D建模会根据你这个静帧图进行建模。当然，我们设计师是不需要制作模型的，如果会，当然也是更好，能够方便建模师进行快速建模。但是因为每个项目的要求不同，对于我们这种设计师来说时间相对很紧。对于我们来说需要进行快速的出图，从而能够和需求方进行方案的确定。
设计静帧图：他最大的作用是和需求方进行沟通，以及和建模师进行效果确定。还有后续验收时会根据静帧图进行效果评定～
标注：字体、字号、颜色、位置、基本数据参数，标注和之前大家熟悉的思路基本一致。
切图：icon、图片，开发不能通过代码进行实现的
视频demo：会根据项目的难以程度进行制作，通常在较大项目中，会有时间进行视频demo的制作，同时demo也会给需求方、开发进行很好的演示，使得整个项目在开发当中能够更加明确。
交互流程：但是我们需要考虑到的是设计后整个效果是如何，以及设计后整个点击过后的交互，因此在基本方案确定后，静帧图会和交互方案
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：CE青年 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
筛选可以说是我使用比较频繁的一种交互形式，比如我点外卖，会选择满减优惠力度大，同时我也可以选择在哪一个价格区间内的产品，这就会用到筛选，而到了B端产品上来，一个CRM系统当中，筛选的逻辑也会比移动端的复杂，伴随着：且关系、或关系、大于、小于等等这样复杂的逻辑，也为设计本身增加了很多难度。因此，今天我们就来讨论讨论筛选控件
筛选存在的对于整个表单来说是非常重要的，它可以帮助用户，在表单茫茫多的数据当中进行快速的定位；可以对表单进行快速划分，缩短用户对于数据的寻找时间；能够满足用户在工作中，实际业务场景的筛选。
对于实际B端场景来说，筛选是日常数据分类的一个重要途径，我们先来看看实际场景到底有哪些？
比如今天作为一个电话销售人员，想要联系最近注册的用户时，通常会通过筛选来选出最近几天注册过，同时又没有销售更进的客户，进行一个优先级的排布；
再比如说，在销售周报当中，销售主管可以通过筛选得到每个人这周完成的状态，也可以通过筛选得出每个人对于线索的更进情况和对客户的流失状态等等，这些都可以通过各种各样的筛选形式来满足用户对于特定情况下的使用
筛选可以通过多个筛选条件进行多维度的寻找，而导航、搜索只能通过单一条件进行指定筛选。
虽然在现在很多搜索都可以支持多维度用空格去进行多字段的关键词搜索，但本质上区别不大
所以在B端项目当中，如果你有表单，那你就需要筛选
我们将筛选分为基础筛选和高级筛选两种，两种筛选会根据业务场景不同，在不同的页面去使用
基础筛选一般为系统预设好的筛选字段，具有很强的业务和场景的需求。基础筛选一般分为四个部分：
筛选条件：是指用户可以筛选的范围
筛选项：是指用户可以选择的筛选项目
已选项：是指用户已经选中的筛选项
备选项：是指用户还没有选择的筛选选项
基础筛选更多作为用户快捷筛选的一种方式，因为一般使用场景当中用户几个筛选逻辑为“且”
同时筛选的逻辑也为简单筛选，所以在使用场景上只适合在对筛选要求不高的场景下使用。
高级筛选一般为筛选中含有运算符，同时筛选当中包含条件关系，比如且关系或者否关系。一般高级筛选包含以下几类关键词
筛选关系：是指几个筛选条件之间的关系，一般为 且、或关系，即 且 关系为几个条件之间的交集；或 关系为几个条件之间的联集（并集）
筛选字段：是指在筛选当中，所要的筛选项，一般为表单当中的所有可筛选的字段
筛选操作：是指筛选字段和筛选值之间的关系，常见的筛选操作有：大于、小于、是、否、包含、不包含、为空、不为空等等。
筛选值：你所需要筛选的数值
高级筛选一般满足更多的用户场景，为用户多条件多字段、多个筛选关系、多个筛选操作 提供有利保障。
当在筛选器条件少于5个的情况下，最常使用的就是上下布局，这样筛选能与网站保持统一的情况下，上下布局也更方便用户进行阅读
当筛选器过多的情况下（一般在5-15个之间），筛选器过多，需要滚屏才能看到筛选结果，用户使用起来会很别扭。所以在5-15个的情况下，一般会将筛选项进行收折，这样保证筛选整体面积不会太大，同时将用户常用的筛选放在前面，可以满足用户基本的业务需求和使用场景
左右布局在PC端一般是以字段选择进行筛选，通俗来讲就是将用户可以筛选的所有字段全部罗列出来，然后通过勾选选，择出你需要筛选的字段，进行筛选器的使用
左右布局的好处是能够将筛选的所有条件都直接的展示出来，可以适应很多场景，在筛选器用15个以上时。通过左右布局的方式，能够让筛选条件进行滚动，在最大限度保持用户使用体验
在日常的B端产品中，筛选的形式有哪些？筛选到底应该怎么设计？接下来为大家总结梳理一些在 B端产品 中的筛选玩法，希望为你开启新大陆。
平铺型一般为用户搜索结果数据量过大，使用户搜索出来的结果与其预期差距过大，用户然后可以通过筛选对数据的再一次分类，使用户能够精准寻找其想要的结果。
平铺型一般为筛选条件少于6个，这样能够通过1行或者2行去展示筛选项的结果
多用于信息量大的产品，比如电商、视频网站等等。常见的淘宝、京东、腾讯视频PC端 都采取用这样的方式，将所有的筛选条件列出来。
平铺型的好处是将筛选项的结果全部或者部分放出，能够帮助用户快速理解筛选项以及快读找到自己想要的结果。
缺点也是很明显，平铺型的控件占比大，需要占据大量面积展示平铺出的筛选结果。
比如淘宝PC端，搜索一个产品后花去40%的面积去展示所有的筛选条件，其实就是想引导用户，淘宝搜索过后spu的数量仍然过大，想通过进一步的筛选，让用户明确自己对想要东西。同时因为面积占比大，通常平铺型都是以收折的状态，只有在搜索触发后才会完全展开
收折型筛选是一种简单直接的筛选形式，将用户常用的筛选形式通过下拉框的形式进行筛选。每一个筛选条件就是一个下拉框，这种形式看上去很简单，但是在B端场景中，下拉框对于用户来说认知成本低，操作性也较强，同时在用户重度使用时，又能给用户很好的使用体验的一种方式
用户可以直接对其常用的字段筛选进行一步操作，并且没有复杂的筛选关系，全部都是“且”的筛选逻辑，能够保证用户进行快速的筛选选择
将所有信息全部平铺展开，信息量过于冗杂繁多，同时在做通用性产品时，这种方式很难做到通用性
单侧筛选是一种更通用的筛选形式，通过对于你想筛选的字段进行勾选，勾选完成后就会出现筛选条件，然后选择筛选字段、筛选操作、筛选值，一般选择完成所有筛选后，还需要点击查询，筛选操作才算完成。
整个单侧筛选，大量的筛选条件可以放置在表单的左侧或者右侧，通过表单纵向空间，去承载大量筛选条件。
节省空间、通用性强。因为在很多Saas系统、Paas系统当中，无法针对每一个客户进行设计，就要考虑到系统通用型高，做一些大而全的功能。在每个表单也所需要定制化修改的地方很少，同时能容纳的信息量可以很大。
就是在后台系统当中只有这一种筛选形式会面临在我常用的几种筛选的字段中，要通过不断寻找，来满足我的筛选需求，操作麻烦。
我们产品在某一次改版就将筛选由收折式修改为单侧式，因为我们用户使用筛选的场景非常的多，用户每次筛选都要多进行2、3步操作，导致用户进行了大量的吐槽，后来进行修改，将筛选顺序支持手动调整顺序，用户吐槽的次数才慢慢减少。
表头筛选是一种复杂筛选的形式，其最开始是来源于Excel的筛选形式。点击表单的筛选按钮，可以将表头的筛选字段直接带入，方便用户。之后在后台产品的发展中，得以借鉴过来。
可以通过表头的点击，使用户更快捷进入到自己的筛选条件，在通常情况下，在表单越左的数据显然是越重要的，也是使用筛选去筛频率最高的，因此高频的筛选场景基本还是得到满足。
用户第一次进入系统很难理解这种交互形式，且在每个表头都会有一个icon，影响用户对于表头的识别。
通过点击筛选按钮，展现出筛选弹窗，进行筛选。这种筛选适合在筛选功能在系统中不是很重要的层级。最常见的就是Tapd，在其中筛选不是很强的一个功能，同时也是系统中十分有必要的。
是能够在节省面积的情况下，可以进行很复杂的筛选，同时可以支持复杂情况下的筛选
弹窗会遮挡一部分表单数据，会影响筛选人的判断，其次筛选条件的添加也相对更加繁琐。
在我们一系列筛选的调整过后，我们团队也总结了对于我们来说更重要的条件和形式，来和大家分享探讨一下。
我们认为影响筛选控件最重要的是用户的使用频率，因为用户的使用频率和使用方式，直接影响到我们筛选是用普通筛选or高级筛选，也会影响到筛选的形式。
筛选功能的做法，取决于我们产品未来是想往哪一个方向发展，如果想把功能做的强大，就得考虑到筛选的后续扩展性。因此满足实际业务也是十分重要。
在B端系统当中，最可能遇见的就是你给用户设计的路径但是其实用户根本没有往你想的方向去操作。我们系统最开始给用户设计好了很多功能点，但是用户对于这个点的认知成本实在过低，也导致了后面系统功能点很多都被埋没。因为在你设计好了一个功能点后，要适当引导用户，解释这个功能的使用场景才不会让你设计的功能被淹没。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：CE青年 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
提起用户激励体系你会想到什么？积分体系？签到体系？或者是简单粗暴的现金优惠？
以上都不是，今天我想和大家分享的是任务成就体系中的勋章设计。
一、什么是勋章
我们先来看看勋章的定义： 勋章，是指授给有功者的荣誉证章或者标志。 古代欧洲为了区别在战场上的骑士，一个名为勋章的标志制度得以发展。每一个贵族都会设计出一个独特的标志，制作在他的盾牌、外衣、旗帜和印章上。（摘自百度百科）
上面这段话有三个词语是重点，有功者、荣誉、独特标志。有功者反应了勋章不是每个人都能获得的，而荣誉则反应了勋章是荣誉的象征，能带给获得者精神上的满足。独特标志则区分了获得者与其他人。
小到小时候得到的小红花，大到奥运会国家赢得奖牌，这些都算是勋章（不同产品的叫法可能不同，有勋章、徽章、奖章等）。
二、勋章的作用
上面我们说了勋章能带给获得者精神上的满足，那么延伸到互联网中，勋章设计的完善则能一定程度上起到满足用户的成就感，激励用户不断使用产品的作用，常用在内容类产品中，如视频类、知识付费类、阅读类产品中。
但是把勋章设计运用的最好的当属游戏类产品了，比如王者荣耀的勋章成就体系，借助获得难易程度不同的勋章，能使用户自主的不断使用产品，获得高等级勋章后还会被膜拜为大神，充分满足了用户的虚荣心。
三、勋章页的构成
勋章页大致由六部分构成。包括勋章页入口、勋章墙、勋章详情说明、进度展示、勋章图标。
1.勋章页入口
勋章入口一般有两个位置，一是放置在个人中心页中，还有一种则是放置在个人主页中。个人中心页只需点击底部tab切换即可看见入口，而个人主页还需用户再点击一次才可看见。
放置在个人中心
放置在个人中心的勋章入口大致也有两种样式，一种是以图标的形式跟随在昵称旁边，另一种则是放入个人中心列表功能入口中。如下图：
二者的选择主要是看个人中心的主要导航方式，一般宫格导航为主的个人中心页会采用勋章入口跟随昵称旁边，列表导航为主的则会将入口放入列表中。
当然，具体选择还是看勋章功能的重要程度，比如波洞的个人中心以列表导航为主，但勋章入口却是放置在顶部宫格中，我的理解是波洞的勋章功能层级较高，因此放在了更显眼的位置。
放置在个人主页
勋章入口多以图标形式跟随昵称放置在个人主页中，此类产品往往拥有较强的社交属性，用户拥有自己的动态主页，因此既能查看自己的，也能查看他人的勋章。
上图知乎的勋章入口还将用户拥有的勋章展示了出来，比起单个图标入口更能吸引用户点击进入
2.勋章墙
点击勋章入口进入的页面就是勋章墙了，勋章墙主要包括用户已获得的勋章信息以及产品包含的所有类别的勋章展示。
勋章墙展示几乎都是采用的宫格式布局，一般一行分布2~5个勋章，多以3个为主。
勋章墙中的已获得勋章信息包括用户总获得的以及不同类别勋章的单类获得数，显示总获得数的勋章墙会在顶部加入用户的获得信息，帮助用户一眼识别。
在勋章墙的设计中，注意要做好获取与未获取勋章的区别样式，重点是保证用户能一眼识别出获得与未获得的勋章，多是将未获得的勋章置灰处理。反面例子如下：
上图KEPP中，已获得勋章是将其正常颜色展示，而未获得勋章采用的浅紫灰色，我一眼看过去时真的没有反应过来哪些是未获得的。
3.勋章详情说明
勋章详情说明是在勋章墙展示中，点击勋章后以弹窗的形式展示出来的，包括全屏弹窗与非全屏弹窗两种展现形式。
全屏弹窗详情说明
勋章详情说明采用全屏弹窗能承载更多的信息，除了可以包括获取说明外，还可以承载奖励说明、获取进度以及获得后的分享炫耀按钮等。
上图中得到与咕咚的该勋章都属于升级类勋章，勋章本身有级别的划分，左右切换可查看不同级别的勋章，像这样有等级划分的勋章采用全屏弹窗会更加直观
非全屏弹窗详情说明
承载的信息较少，一般只包括简短的说明信息，更加简洁轻量。如下图：
知乎与开眼都采用的非全屏图片弹窗，视觉效果更加轻量。知乎虽然也有等级划分类的勋章，但由于采用的非全屏弹窗，等级切换采用的是点击切换，说明文字也更加简洁。而开眼则直接在文字中说明下一等级勋章，并不能直接切换查看。
4.进度展示
需要累积获得的以及等级划分的勋章还需要加入获取进度。我汇总了3种勋章进度展示的样式，包括进度条、数字进度、文字说明。
进度条
以一个横向进度条展示在勋章详情说明中，能够直观看出当前进度占比，对升级进度有一个大致的判断，占屏比较大，适合放入全屏弹窗详情说明中。
上图中咕咚进度条只展示了进度百分比，而波洞的进度条同时配上文字说明，升级进度更加精确。
数字进度
左边为当前达到数字，中间斜杠隔开，右边为该勋章获取总达到数字。升级进度精确，占屏比小，即可放入全屏弹窗详情说明也可放入非全屏弹窗详情说明。
文字说明
文字说明进度直接告诉用户还差多少具体的进度，没有总进度展示，进度也很精确，占比小，注意需要对文字进行字数限制。
5.勋章图标
勋章图标作为勋章设计中最重要的一环，需要UI设计师花费很多的心思。勋章图标目前多为图形图标，我只看到开眼是采用的图片类勋章。
在设计图形勋章时以现实生活中的勋章为灵感，多采用统一的勋章背景模板，保证整体勋章墙的视觉统一，便于多次复用。常用的形状有六边形、圆形、盾牌形状等。
切忌在设计图形勋章时采用复杂的背景模板，以免降低了勋章内部主体的层级。
四、划重点
本文主要为大家浅析了勋章设计的定义、作用以及勋章页的构成。
勋章的定义：勋章是指授给有功者的荣誉证章或者标志；
勋章的作用：勋章能带给获得者精神上的满足，一定程度上激励用户不断使用产品；
勋章页的构成：包括勋章页入口、勋章墙、勋章详情说明、进度展示以及勋章图标。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：人類君 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com