01.前言

如今，随着市场竞争日益激烈，“转化难”也变成大家特别关注的问题，其实需要提升用户转化的场景很多，每个场景都有影响用户心理的关键因素，那么设计师如何做，才能助力用户转化呢？下面结合省钱会员项目，聊聊如何抓住用户心理，从而提升用户转化。

02.背景分析

最近这段时间，我们引入了很多新的运营玩法，跳出之前单一的营销方式，将玩法串联。我们通过省钱会员卡，打造运营体系的玩法矩阵，提升用户转化；

省钱会员卡是什么呢？是对0元购、百亿补贴以及100+的生活权益进行资源整合；

用户敏感点：根据以往“免费领”运营活动的数据，了解到用户对价格很敏感；

03.目标用户分析

在做用户转化之前，我们必须找到精准的目标用户并对其进行分析，这样才能精准抓住用户心理，做到更好的转化。

下面我们可以从用户不同阶段的转化进行分析，其中用户分成三类，分别是强需求用户、潜在型用户以及弱需求用户；阶段分为三个节点，分别是激发兴趣、视觉感知和触发行为；

首先是强需求用户，用户在视觉感知信息触达阶段，需求已经满足，完成转化；其次是弱需求用户，这一部分用户，不管如何刺激，都难以满足，所以这两类用户暂时先不考虑；而目前阶段最主要考虑的是潜在型用户，这一类用户在视觉感知到触发行为的阶段，我们需要抓住用户心理，从而促成转化。因此目标用户是视觉感知到触发行为这个阶段的潜在型用户；那接下来需要怎么做呢？

04.思考模型

在设计的过程中，我们用到了设计策略模型“CST法则”，什么是CST法则？“CST法则”是以“视觉影响感知，感知影响行为”作为基础理念，以“抓住感知，强化兴趣，触发行为”作为核心内容的设计方法。下面我们将以这个模型来分析，设计过程中抓住哪些心理因素的点，来促成用户转化的。

05.影响用户心理因素

我们通过“CST法则”得到了促使用户转化的三个点：抓住感知、强化兴趣、驱动购买。我们在这三个点上设置了多个用户心理影响因素，从而促使用户完成转化。

· 抓住感知=抓住“优惠”感知

首先抓住用户的权益感知，以省钱卡核心内容的“权益优惠”作为与用户有共鸣的元素，更容易抓住用户的感知。我们在这尝试做了ab版的两种表达方式。图中对比之后发现，左图中将优惠提炼出来，更能突出权益的优惠力度，聚焦用户注意力，而右图相对来说，优惠感知更弱一些；

在会员购买页中权益模块上，也做了ab版的尝试，对比一下：清晰度上，左边的去掉多余的装饰元素，将权益信息降噪展示，调理清晰，让用户有章可循；匹配度上，用色彩来区分权益分类，让用户快速浏览的时候，更直观清晰的感知权益的构成，也与用户使用场景（娱乐、影音、餐饮出行等）多样性的预期相匹配； 

· 强化兴趣点=强化价格敏感点

我们以用户感兴趣的“价格”作为强化的视觉元素，提升用户的兴趣点；其中在会员补贴专区筛选出超值产品，价格补贴前后的对比以曲线来呈现，强化价格的变化；右图详情页中，对会员模块的价格进行单独设计，从而来强化会员价格的氛围感；

· 驱动行为=驱动购买

最后从影响用户心理的因素：心理账户和从众心理两点进行分析；

何为“心理账户”呢？

“心理账户（Mental Accounting）”是芝加哥大学行为科学教授理查德·塞勒（Richard Thaler）提出的概念。心理账户也是一种有趣的现象。简单来说，人们会把对物品分类的习惯，用于钱和资产上，在头脑中为他们建立各种各样的账户。比如说，我们会把买生活用品的钱放在生活账户，买礼物的钱归到情感开支账户，旅游的钱归到享乐休闲账户等等。那么心理账户的存在，不仅影响着投资决策，也在日常生活中的各种消费决策产生重要的影响；

比方说打扑克，以5元为赌注，然后手气爆棚的一路赢了500元，但是最后都输光了，那么在人们心理是输了多少钱？这时候在人们心理上只感觉输了5元钱，但其实应该是505元，因为人们没有把意外得来的钱归为自己财产，同时对意外得来的钱敢于去冒风险。

我们要善用“心理账户”，创造一笔新的心理账户，让用户心甘情愿的掏钱。其中在优惠购主页，用户进入页面后会有一笔补贴金弹窗，在这里补贴金弹窗就是我们说的“心理账户”。红包设计了3s自动收下的提示，给用户营造紧迫感的氛围，最后收下红包的动作上增加了小动效，让用户有清晰的红包收下的感知；

我们还要善用用户的从众心理。项目中，我们在会员购买页的主视觉区域，增加了“xx几分钟前已成为会员“的气泡提示，来引导用户操作，暗示用户产生购买的行为；最后在页面底部，增加了大家问的模块，消除用户的疑虑，那么在多次刺激后，有利于用户做最终的决策，引导用户下单，并达到用户转化；

06.结语

做转化，最重要的就是抓住用户的心理，深挖影响用户心理的关键因素，才能拥有更高的转化。

在设计过程中，我们要在不同的使用场景和节点上，通过分析目标用户以及影响用户的心理因素，将这些进行设计串联，让用户完成一系列的体验，从而最终达到设计目的。

参考内容：

理查德·塞勒（Richard Thaler），芝加哥大学行为科学教授提出的“心理账户”理念；

https://baike.baidu.com/item/%E5%BF%83%E7%90%86%E8%B4%A6%E6%88%B7/2369306?fr=aladdin

原文地址：58UXD （公众号）

作者：环铁艺术家

转载请注明：学UI网》项目总结｜你知道吗？用户转化是可以被设计的

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

在设计中，最常见的质量保证方式就是在产品验收环节进行「设计走查」。不过因为是上线前的最后验收环节之一，经常会出现因临近上线时间，且交互和UI类的问题在修改优先级中一般都是较低的，最后只能修改部分设计上的「bug」，其他只能舍弃或放入永远不会开工的下次迭代再改。设计师在各种来回扯皮之间筋疲力尽，看不到设计价值在需求中的体现，各种“这里设计不好”的锅一不小心也接了一堆。更严重的问题在于，用户得不到更优秀的体验，轻则耗费更多时间，重则放弃使用功能。不管哪种结果，对于产品整体满意度都会有不同程度的影响。

由此可见，设计质量保证仅靠最后临门一脚的设计走查远远是不够的。在需求全周期中各个环节都可以加入对设计质量的把控（Design QA）。Design QA的概念来源于研发流程中测试环节。质量保证缩写为QA（Quality Assurance），是产品交付流程中非常重要的一环，一般就是大家了解的测试工程师的岗位职责内容。在这个环节中，测试人员需要对产品功能进行仔细认证，确认是否满足了产品需求并且可以正常使用。但与测试不同，设计QA须加入到产品需求全周期的各个环节中，最终形成与产品设计并行的一个流程，才能有效保证质量。

设计QA实施步骤和方案

步骤1: 需求分级，确定是否需要设计QA

要保证设计质量，在B端设计中不是易事。我们经常会听到：

· “这个功能能用就行”：公司/团队不理解或不够认同设计价值是什么，不明白为什么体验会在每一处未还原的设计稿上慢慢丢失

· “这还原的不挺好，和你设计稿我看一样啊”：非专业的同事无法分辨设计稿与研发实现稿的细微差异

· “没时间改了，下次再说吧”：设计质量保证低于功能质量保证，或者团队必须在有限的时间交付需求

在接到需求后可以根据以往经验或与产品经理的沟通，确定本次需求设计等级：

• A：公司级和部门级重点、设计周期长内容多、设计可沉淀输出的内容多的需求
• B：正常迭代、量级一般的需求
• C：时间紧迫倒逼排期、无前端研发资源、少量调整、评估不需要设计的需求

在确认等级后，作为设计师可以有一定的心理预期。对于A类可能各个环节都需要详细的进行QA，而对于C类有可能连设计走查都没有预留时间，只能靠后续线上的直接验证了。后面的几个步骤可针对不同的等级选取全部或部分进行实施。

步骤2:交互设计中，考虑极限下的正确展示

B端交互设计中，很重要却经常制作不到位的就是极限情况。看起来都是各种表格，简单的给定一个宽度即可，但在上线后经常发现，填充了真实商家数据的表格，总有意想不到的错位折行和重要信息截断，用户的可阅读性降低。

                                             左：重要信息被截断；右：折行错位

步骤3: 设计评审与交付，交互说明与UI标注一体化

在完成制作后一定要进行评审，对功能完整性、页面流程、页面文案、组件特殊交互逻辑要求、交互可实现性与开发成本进行评估。项目相关利益人都需要参加，尤其是测试同事需要参与评审，保证后续测试用例编写质量。在交互与UI全部评审完成并通过后，交付给研发的设计稿最好可以做到交互说明文档与UI标注一体化，方便研发同事查看。避免在交互说明与UI标注中来回切换，导致交互或UI细节遗漏。这里推荐一个sketch插件：NoteBook Pro （需要付费，lite版大约¥76），方便在sketch中添加交互说明标注，在上传到可以在线查看UI标注的平台，比如Zeplin/Relay等。

交互说明+UI标注在一个页面上同时呈现

步骤4: 参加测试用例评审，确保测试用例涵盖所有交互细节

一般来说，交互稿与UI稿交付给研发同学后，设计师就要开始忙下一个需求了。直到通知设计走查前，设计师暂时不会再随时跟进需求进展，而是交接到产品或项目经理手中。而在这个从设计稿到研发实现的过程中，设计师也需要在关键节点参与其中，确保设计质量。测试用例是其中一个设计师可以参与的环节。其实有时候很多交互文档中的内容会被用作测试用例，所以需要再次和研发与测试同学对齐所有交互内容，保证交互设计内容不会在此阶段被降级甚至直接去掉。

步骤5:设计走查，输出并记录结果

此环节很重要的一点就是走查文档或记录。未完成修改的内容，建议研发给出一个解释，并以文档的方式记录下来抄送给相关利益人，标明可能带来的风险。同时尝试与产品或项目经理沟通，推动迭代优化的具体时间，避免「下次一定」的无效承诺。

总结

设计QA是贯穿整个产品需求全周期的设计流程，在以往的点状设计走查之外，需要与团队上下游通力合作沟通，才能确保优秀的产品呈现在用户面前。

参考文献：

https://blog.prototypr.io/the-qa-process-in-ux-design-7cd3ffa771ad

https://www.nngroup.com/articles/quality-assurance-ux/

https://uxdesign.cc/the-importance-of-design-qa-in-digital-product-design-c3f3d128270

https://wearebrain.com/blog/customer-ux-ui/ux-designers-and-qa-engineers-collaboration/

https://owl.tools/notebook-sketch-plugin

原文地址：京东设计中心JDC（公众号）

作者：唐朋博、李小猛

转载请注明：学UI网》B端交互设计在产品需求全周期中的质量保证

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

w

01.  先上神器 

▲ 比如我最近在一个网站，想看看一些大背景图片的灵感图，那么直接点击顶部Big Background Image这个按钮，它就自动帮我把这个风格灵感筛选出来了，是不是很方便。

▲ 最近潘通新发布的2021年配色粉彩，我也想收集一些关于粉彩的设计灵感，那么点击顶部的按钮，他会自动的帮你筛选出很多。

▲ 筛选后的灵感都是最新的，而且数量也很多，特别的方便。

▲ 比如我想找一个极简的设计，一些黑白设计，同样可以快速筛选出来，是不是很方便高效。

这个网站里有很多高质量的灵感图片，已经帮大家下载好了，需要的话可以添加叮当猫回复“图库”领取，已有叮当猫的无需重复添加。

长按扫码添加叮当猫回复：图库

w

02.  怎么使用 

▲ 这个网站用起来很简单，首页进入后，默认是最新的灵感趋势，不得不说godly这个网站主编审美非常赞，每个设计都是最新的设计方向和灵感。

▲ 包括最近流行的液态水滴效果，都是高清大图演示，你根本不需要点进去网站，直接这里就可以看见最新的设计。那么我是怎么运用这个网站的？

▍1.根据风格找图

▲ 这个是最常用的，点进去首页，下面一行标签，这里面标签就是各个设计风格关键词。当然英文不好，你可以用谷歌自带的翻译功能，翻译的明明白白。

▲ 比如我想找暗黑风格的，那么点击黑暗标签，就都是黑暗风格的页面设计。

▲ 比如点击网格，那么出来的都是非常有设计秩序的，网格感非常强的设计，随便点击一个进去看看。

▲ 模块感非常强，如果你今天想做一个杂志感，这种布局就可以参考。当然最强大的是导航里面有个More。

▍2.根据字体找图

▲ 这里是全部分类，里面有根据设计风格分类，比如大背景图、黑白、网格、粉彩等风格。同时也有按照流行字体风格分类，比如Helvetica Neue、Roboto等知名字体。同时分类还有各种数字海洋、亚马逊等，总之非常丰富。我们来试试。

▲ 我点击了Helvetica Neue这个分类，那么就看见了全部使用Helvetica Neue字体的网站，每个网站的字体运用细节、排版和版式都可以参考。

▲ 都是特别好的案例，而且你能看见这些字体都是搭配什么样的字体在使用。

▲ 点击Netlify就都是非常抽象的图形风格，总之这个网站有很多点值得我们去探索。

▍3.根据图片找图

▲ 比如最近做一个需求，想了解下孟菲斯风格，那么我找到了这张图，都是视频录制好了，非常高清。

▲ 点进去都是高清，并且带有动态演示，并且每个页面都是高清大图。

▲ 页面的缩略图非常大，因此你可以很轻松找到你喜欢的图并且更好的查看很多细节。单击一个图片就可以看见更大的尺寸，点进去可以看见这个网站的全部标签。如上图，我想看看3D风格网站怎么设计的。

▲ 点进去后，可以看见这个设计的详细大图，同时还可以看见很多标签。这个标签代表它在的分类，随便点进去一个分类，就可以看见全部类似这样的设计。因为这个灵感是3D，因此我点了3D，然后进去都是一些很酷炫的3D灵感。

▲ 质量怎么样？你们自己说了算，每个灵感都有完整的高清效果，还是动态的。

▲ 比如这个，是一个动态的3D组成的英文单词。所以这里可以基于一个图片风格找很多风格。这个网站的魅力能让我们更加专注于根据主题来看我们想要的东西。

w

转载请注明：学UI网》这应该是近几年，见过最牛逼的网站，可以按趋势风格找图了！

先来看看下面的海报，给人的感觉就是梦幻高级，满满的质感扑面而来。

深色的背景图配上发光的文字效果，有什么小伙伴会想，为什么我没有这么用过。

 

  

第一步 >

第二步 >

第三步 >

 

最后再次贴上最后的海报完成图。

作业问题

第一步

我们先将下方模块和首屏之间拉开距离，之后填充同色系的蓝色作为最下方背景的颜色，之后将图片上方饱和度提高，再把产品和模块边缘处进行抠图，做出破图的视觉效果，复制多个泡泡增加画面的氛围。

第三步

最后

 

 

链接：https://pan.baidu.com/s/12J-Q0Crq3iB5OXDWmfACrw 提取码：fagy

原文地址：三个小美工（公众号）

作者：three

转载请注明：学UI网》干货素材 | 讲真的，这些素材你真的很需要！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

w

02.背景简述

大型企业由于员工上万，所以对于人才管理的系统基本都是购买国外垂直类的顶尖系统，而拥有5w+员工的58，则是采购的国外的WORKDAY系统，但是，由于服务器在国外，所以对于好多操作请求都非常的耗时间，最重要的一点是，关于人才数据这么重要的核心内容，也在人家手里，万一哪天国际形势非常严峻了，呸，希望不会有这么一天，所以我们要像邓稼先老先生研发原子弹一样，核心数据我们要掌握在自己手中。

这里通过双钻模型来简单阐述整个项目的流程

f

03.探索阶段

如果你想做好一款B端产品，首先要了解他的业务形态，因为b端客户不像c端用户那么单一，在整个业务链条里，每个角色负责不一样的模块，所以我们面临的问题不是单一的用户痛点，而是怎么把整个链条做的更通顺便捷，然而一款强大的b端系统的复杂度远远是你不可想象的，毕竟人家国外顶尖系统有上万人在研究呢。所以我们目前的目标就是先解决58的个性化的人力资源管理。

· 深入业务

首先，我们对业务进行专家访谈，向专家了解业务，对基础认知进行了桌面调研，对用户角色进行焦点小组访谈，整理出58内的HR业务形态及分工模型。

· 竞品研究

设计师与业务一起使用竞品，由于人力资源管理系统是一款专业类的垂直软件，市场上可参考的竞品其实不多，即便是可以找到的资料，也只是寥寥的几个界面，于是我们充当客户去找资料，最后搜集了国外3款、国内2款同类可参考的软件，并通过不停的与业务碰撞，探索适合58的模式。

f

04.定义阶段

· 与业务握手

通过前期的调研，我们了解到业务中销售岗位的入职次数是最高的，所以业务痛点也是最集中的，所以我们在销售入职日探访了58北京分公司，实地观察入职的各个环节，以及每个角色的分工及权限，并在当晚与他们进行了一次深度的访谈，让我们的设计定义更加聚焦。

· 确定设计目标

通过前期的用户角色分类调研，以及对痛点的归类分析，我们得出了两个关键需求：线上化与自动化、操作模式本土化。对于如此庞大的系统，如果按功能去梳理，那是很不现实的，怎么能更快速又能更直观呢？

转变思维，从业务角度转为服务角度。我们服务的是业务，业务服务的是员工，然后系统都是围绕着员工在职场的各个环节来解决问题的，所以我们围绕着员工绘制了职业生命周期全景图。

从图中可以看出各个角色的工作及配合方式、工作效率及提升空间、各环节各角色的满意度及可优化的方向，再通过对任务节点、交棒时刻、过程体验的梳理优化，最后达到一个最终的理想状态。

w

05.设计阶段

整个功能流程梳理下来后，系统页面已经预估到了400+，而我们的排期倒推下来只有8个月的时间，如果按正常的设计流程“全部模块业务需求→系统信息架构设计/修正→各模块交互设计修正”来做的话，黄花菜都凉了，那怎么在紧张的排期内快速输出还不会出错呢？

·利用MVP思维，拆解最小业务单元

通过与业务、产品讨论，我们选用具有业务闭环属性，最具业务代表性的最小业务单元，并做快速的验证，通过不断探索，实现现实中的设计流程。

再通过对页面的解离，抽象出三大龙骨页面类型，再配合规范、控件组成系统的血肉，最后达到了27倍的产出效率，我们让不可能完成的任务提前完成了。

·情感化探索

B端系统大家统一的认知就是注重功能，不要用花里胡哨的东西来影响操作，但是从竞品分析中得知，其实随着b端c端化，b端的设计师已经在尝试加入一些插画元素，所以怎么在不影响操作的前提下，又能让员工感受到温暖呢？

服务链条上的触点探索

以我们的服务主体员工为目标，员工与企业的第一个接触点是在接收offer的时候，这是传递企业文化、情感的很好的契机，所以我们优化了在这个触点下的方式，强化接offer的神圣时刻，并通过游戏化的方式来引导员工填写资料、查看入职引导。

系统内的情感体系搭建

我们定义了系统的人物角色，让她更饱满更有故事性，并以一个专属客服的角色，落地在系统中的特殊场景下，如个性化首页、开屏引导、功能引导、空页面、及身份卡片等模块中。

w

06.实践走查阶段

为了更好的测试，我们的业务方已经驻扎在了项目组里，采用与旧系统并行的方式，也就是一套数据同时录入两个系统，来验证新系统的稳定性及合理性。与此同时，交互与设计同学也是分批次的提交走查报告，提升整体的设计还原度，终于在整个项目组的不懈努力下，新系统目前已成功上线。

w

原文地址：58UXD（公众号）

作者：环铁艺术家

转载请注明：学UI网》项目总结｜企业级管理系统实战

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

01、什么是「雅各布定律」

「雅各布定律」是由雅各布·尼尔森（ Jakob Nielsen）提出的一条关于产品可用性的定律。没错，这里的雅各布·尼尔森就是那个提出「尼尔森十大原则」的尼尔森，也是我常常在文中提到的UX研究咨询公司NN/g（尼尔森诺曼集团）的创始人之一。

1999年雅各布·尼尔森发布了一篇名为《界面标准会扼杀设计创造力吗（Do Interface Standards Stifle Design Creativity）》的文章。在文中，尼尔森讲述了他与甲方一同设计某个电商网站的经历。

在设计该电商网站商品导航方案时，方案一是 采用绝大多数用户长期在其他网站所接触的导航方式，方案二是根据甲方对自身产品线的看法构建的一套较为新颖的导航方式（具体方案形式，尼尔森在文中没有描述）。

尼尔森分别对两个方案进行了可用性测试，结果是：当用户使用方案一导航时，导航到目标商品的成功率为80%，而方案二的成功率仅为9%。

雅各布·尼尔森在文中引述这个例子，是为了阐明一则观点： 用户将大部分时间花在其他产品上（这里的“其他产品”放在当下这个时代，我认为就是 拥有巨量用户的头部产品）。因为用户花费大量的时间在这些产品上，自然会被这些产品培养出一定的用户习惯。

如果你想提升产品的可用性，你要做的事情就是与其他产品保持 一致性——这就是 「雅各布定律」。尼尔森认为 一致性是支撑产品可用性的最重要条件之一。并且他将这些应该保持的一致性称为「 设计标准规则（Rules for Design Standards）」。

那么当下的产品都遵守着哪些「设计标准规则」呢？

02、设计标准规则

实际上，遵循设计标准规则就是遵循用户的心理模型和行为模型。我依次从宏观到细节梳理一下，当下的产品设计普遍都存在哪些设计标准规则。

2.1 一致的产品模型

耍家任职于一家电商公司，我司的产品在主业务线（销售商品线）上，从精准搜索或商品分发，到商品详情、加购、生成订单、付款、返回结果，这一套基本的电商模式框架，是一定要符合大部分用户的行为模型和操作习惯的。

说白了，国内的电商巨头无非就那几家，用户每天花费大量的时间在这些产品上，早已经被培养出了非常深刻的行为习惯，如果我们在主要盈利业务上去进行创新，自然是要承受收益风险的。

这一点不仅是我司会考虑到的问题，国内大部分的电商产品，也都是遵循着这一主流电商产品模型。

而在一些自身产品特有的功能、任务流中，我们就大可以进行产品模型的创新。那是什么让用户在不一样的产品模型中，依然能够灵活自如地上手操作一些功能呢？

那就要说到交互示能了。

2.2 一致的交互示能

当用户脱离了熟悉的产品模型，却依然能够上手一些功能，是因为他们从其他产品中早已学习到了一些基本的交互示能。

例如文本中高亮带下划线的文字或悬浮有阴影的卡片也许可以点击，带有红色徽标的功能也许比较重要或需要用户查看等等。

当自身的产品交互在示能传达上和其他产品不一致时，就很容易引起用户在操作与体验上的疑惑。

2.3 一致的页面结构

还是以我比较熟悉的电商行业来举例。我们可以看到，国内大大小小的电商产品，除去自身功能与GUI的特性，详情页页面结构基本上都是这样：

因为页面结构对用户的影响比交互示能更大，一致的页面结构、功能排版可以让用户极快地熟悉并操作产品。也许你会对此嗤之以鼻？认为这是给不去创新寻找借口？

然而这么做的知名产品却不在少数。2017年 Youtube 改版，保持了绝大多数页面结构，对于无法适应的用户，允许他们切换回旧版；前不久更新的 iOS15，Safari 将地址栏移动至底部，却也允许用户自由切换地址栏位置。

保持一致的页面结构并不是要产品设计完全摒弃功能排版上的创新，而是在创新时也要 考虑到用户的学习与适应成本。

2.4 一致的图形认知  

落实到具体的UI上，保持与其他产品一致的图形认知，会更易于用户理解。但图形认知不仅仅只是告诉用户：三个圆点的icon代表着“更多”、叉代表着“关闭”…更加符合用户认知的图形，甚至可以辅助到业务目标。

墨迹天气之前做过一个A/B测试，希望通过修改分享图标样式来刺激用户分享行为。分别投入了3个试验版本和1个原始版本。

随着市场上的产品增多，视觉图形的使用场景越来越繁杂，当我们无法确定哪一些图形更加符合自身产品用户认知的时候，也可以像墨迹天气这样进行数据验证。

虽然墨迹天气并没有再进一步分析为何方案3的图标能够胜出（我猜测是否与iOS原生应用培养的用户认知有关？），但我们能够确定的是，在没有任何文字提示的前提下，有更多墨迹天气的用户能够理解到方案3中图形所传达的“分享”操作的含义。

03、如果再被问到这个问题…

如果再一次被问到「如何看待当下产品设计同质化严重」的问题，我想我应该会这么回答。

首先要分析面试官所谓的“同质化”指的是哪一个方面，是大方面的产品、功能、交互同质化，还是具体落实到UI设计师身上的视觉、风格、元素同质化。

如果面试官是询问对产品、功能同质化的看法，那大可以阐述「雅各布定律」。因为遵循其他绝大多数产品对用户培养的习惯来进行产品设计，可以显著提升产品可用性，降低用户学习成本。

并且很可能你的产品可用性与业务目标、商业价值挂钩，那更应该保持这种一致性，不应该用商业的风险来为产品的创新买单。

而落实到视觉层面，我认为遵循设计标准规则，实际并不会影响到设计师对GUI的创新。例如我们知道很多竞品的案例：MacOS 与 Windows 、 WPS 与 Microsoft Office 、 iOS 与 Android ，为了减轻用户的学习成本，它们在产品设计、交互设计上存在着许多一致性，然而这并不会干扰产品在GUI层面的表现，用户依然能够从视觉层面区分这些产品。

所以作为UI设计师，大可以向面试官表达自己在GUI层面的考虑与创新。一致性不可怕，同质化也不可怕，可怕的是脱离可用性去谈创新以及完全为了一致性而失去创新能力的两个极端。

原文地址：UCD耍家（公众号）

作者：Howiet

转载请注明：学UI网》用「雅各布定律」解答一道面试题 | UI&UE实用方法论

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

轻质感在 UI 设计场景中的运用近些年比较明显，以磨砂效果为代表的无论是在图标设计还是界面表现上面都较为常见，特别是在金刚区的图标设计上面。

喜马拉雅 App 首页金刚区图标结合磨砂效果呈现，材质感和舒适度都较为突出。实现难度也比较小，通过 Sketch 软件的背景模糊很容易实现。突出业务以微动效的形式表达，这也是较为常见的差异化设计解决方案之一。 

02.  多种模式满足用户不同喜好 

不同用户的操作习惯和感官标准各不相同，越来越多的产品为了满足用户的不同喜好，设计多种模式进行设置切换。最早的就是主题皮肤，逐步延展到更多的功能模块中，比如音乐播放页的布局设置。

MOO 音乐为用户提供了以专辑封面和背景大图来进行播放页的模式设置，用户可以根据自己的喜好进行设置。在进行 UI 设计的时候无法判断用户的唯一喜好，多种模式的自定义设置更能带给用户良好的体验。

03.  独一无二的个性化首页定制 

随着用户喜好的变化，自定义模式可以满足各自不同的需求，网易云音乐推出了独一无二的个性化首页定制设计。用户可以通过预设的默认模式、歌单模式、视频模式进行选择，为了方便用户判断定制后的效果，可以通过“功能说明”观看预设后的样式，直观的展示提高用户的判断体验。

自定义模式打破了千篇一律的设计，根据用户的喜好呈现内容，提高了用户粘性和使用体验。

04.  App Banner 呈现的裸眼 3D 效果 

突然有一天在使用自如 App 的时候发现了这个隐藏的“彩蛋”，模拟裸眼 3D 效果的呈现方式在 Banner 上面，是一次全新的尝试。通过借助移动设备上的传感器等将 2D 影像转化为景深效果，以呈现出不用 3D 眼镜就可看到的 3D 效果。

自如

05.  简单的动效不一样的场景代入感 

微动效在产品设计中的运用已经非常普及，特别是在图标中的运用，既能提高图标的关注度，也能体现图标的差异化。就像一个扫一扫的功能图标，加上简单的动效呈现，提高了场景代入感。

将现实中的扫描动作运用到图标动效的表达上面，既增加了该功能的关注度，也能让主题表达更清晰。

06.  视频引导关注度更强 

引导页是 UI 设计中较为普遍的存在，而动效的引导和视频形式的引导相较于静态图文形式来说，更能吸引用户的关注度。特别是随着 C4D 等三维软件的普及，结合立体感和动效形式形成视频引导，也是一种全新的体验。

07.  底部手势区的充分运用 

对于移动端来说，随着大屏手机的普及，手势操作舒适区的研究至关重要。底部操作范围算是手势的最佳区域之一，充分的利用好有利的位置进行更多功能的设计，提高功能的曝光度。

将一些重点功能通过悬浮层的形式设计在底部，随着交互的变化进行隐藏和显示，也是一种非常不错的设计解决方案。比如平安口袋银行将我的余额、积分兑换、签到、抽奖、领取红包等设计在底部标签栏之上，通过悬浮层的形式呈现，让这些原本隐藏的功能得到了曝光，增加了用户的关注度。

平安口袋银行

08.  首页导航位置的合理运用 

顶部导航栏通常是提示当前页面的位置，对于首页来说一般会设计搜索、品牌曝光、功能操作、当前位置提示等内容。也有一些直接展示 Banner 图，隐藏导航的存在。

一些产品想要弱化活动 Banner 的空间占比，除了缩小 Banner 高度尺寸以外，最近也发现了一种新的设计解决方案。安居客将活动主题设计到导航位置，单击和下拉刷新到一定程度都会唤起活动详情。该设计解决方案不仅充分利用了导航位置，在达到曝光度的同时也不会过度占用首页版面，合理的运用了有限的资源。

09.  背景的变化让等级区分更直观 

很多产品都会涉及到会员中心和会员等级区分，不同的等级如何在设计上面体现出差异，除了图标的区分以外，背景的差异也是一个设计方向。

自如通过不同渐变色的过度来体现会员等级的差异，在滑动预览的时候 UI 界面也会随着色彩的过度发生变化，视觉效果非常突出。色彩的变化过度自然，动效的转场伴随着内容的更换，直观的体现了会员等级的权益区分。

自如

10.  个人中心设计的场景变化 

个人中心的设计对于很多产品来说都比较常规，随着感官体验的升级，个人中心设计的差异也有待深入思考。而场景化的情感表达是提高个人中心设计差异的方向之一，结合插画和微动效的表达较为普遍。

自如的个人中心除了以场景插画的形式来提升情感化体验以外，昼夜变化采用了不同的插画场景来表现，代入感非常到位。场景插画还融合了微动效，微妙的变化提高了产品的精细化设计，增强了产品的体验感。

自如

小结 

01.  内容与手势的联动设计 

交互手势在移动端设计场景中至关重要，手势的变化和内容的联动关系，决定了是否可以获得更高的用户体验。 比如抖音的短视频播放设计中，进度条拖动过程中除了时间数字变化以外，数字的位置会随着手势的方向位移。联动效果的设计感官体验明显，内容传播的关注度更强。

抖音

02.  内容切换的场景模拟化设计 

以真实场景模拟设计表现，在 UI 设计中比较常用，带给用户更强的场景代入感。 比如千聊 App 首页的免费听直播栏目，直播预告的时间切换就像频道调频一样，切换到自己感兴趣的内容。自然流畅的动效滑动，两条点缀的红色线条，把频道切换的场景代入感体现给用户，带来新颖的感官体验。

千聊

03.  通过文字角标设计表达切换差异 

顶部内容的分类切换较为常见，特别是电商产品中。一般体现点击和默认通常有字体大小区分、颜色深浅区分、下划线区分、图形装饰区分等。 除此以外也有下划线的变异用法，通过角标线段来体现差异。通常是右下角位置，伴随着动效表达。比如京东 App 首页，联想到京东吉祥物，也有一种品牌呼应的感觉。

京东

04.  更贴近真实场景的设计引导 

通过设计还原真实场景，带给用户更强的代入感，从陌生转换到熟悉的场景触感。 高德地图通过模拟真实的道路状况，呈现出更加真实的行车引导，就像自己驾驶的车辆行走在手机屏幕上一样。真实感的路况引导增加了驾驶的代入感，降低了复杂路口选错方向的可能性，从视觉感上面也提高了感官体验。

05.  人性化的城市点亮设计 

好的产品体验，就是在无意间带给用户惊喜。在小长假期间，自驾游沿途经过不一样的城市地点时，会弹出“欢迎到来”的点亮提示，第一次看到还有种惊喜感，算是一种旅行足迹的记录。 在这个弹窗广告满天飞的互联网环境中，能把这种惊喜带给用户才能抓住用户的黏性，通过情感化的设计提升用户对于产品的认可度。

06.  被人忽略的上滑交互探索 

大家经常使用下拉刷新这个功能，而且在该功能上的设计探索已经呈现出非常多的案例，而下滑到底部之后的设计探索却被设计师所忽略。 在支付宝的首页中，下滑到底部之后进行了新的设计探索。继续上滑将会解锁一项新玩法，以游戏化的设计带给用户新的探索体验，也许这一尝试将会带来页面底部新的挖掘点。这个新的挖掘点会像下拉刷新一样，在底层功能需求的基础上被深度开发，呈现出更多营销玩法。

07.  列表式设计中的左右滑动交互 

在列表式设计中，比较隐藏式的交互就是左滑和右滑，通常左滑删除较为常见。而大部分的列表设计中都没有探索过右滑交互，除非是右滑返回或者退出等操作。 在小宇宙 App 的订阅栏目中，对于关注的内容列表左滑为删除（不喜欢），右滑则是添加到播放列表中。充分运用了左右滑动的手势交互，不仅操作便利也带给用户不一样的使用体验。

小宇宙

08.  通过展示形式增加内容的品质感 

同样的东西放在不同的环境中，通过不一样的展示形式，带来的品质感也是相差甚远。就像放进橱窗的饰品或者展品，给人的品质感就会更高。 得物（毒）在购买栏目将精选推荐、福利专区、潮流榜单、补贴专区等内容，通过类似于玻璃罩的展示模型来呈现，不仅突出了视觉焦点，也带给用户一种品质感的认知。配合动效的运用，增强了该区域的关注度，是一种展示商品或者内容的不错方式。

得物（毒）

09.  通过AR科技带你感受虚拟试穿 

网络购物存在的问题就是质量和匹配度等，得物（毒）通过AR科技带你感受虚拟试穿，模拟真实场景中的体验，打破了静态选择的弊端。技术的突破将会带给用户更便利的生活体验，打破常规的固有模式才能带给用户更好的使用体验。

10.  更直观的设计带来更人性化的体验 

想要看一场电影，在选择影片的时候为了让用户更直观的了解影片内容，做出最快捷的选择。淘票票将精彩片段作为背景层，影片展示作为前景层，点击不同的影片背景层就会播放对应的精彩片段。直观的设计带给用户更便利的选择，减少了抵达目标的操作步骤。 从视觉形式感的角度使得画面更丰富，空间感更强。相较于单调的平铺式设计，带给用户更好的感官体验和操作便利。

淘票票

小结 

从感官体验的角度体验产品，总结了在 UI设计视觉层面的解决方案，有助于提高 UI 设计师的视觉表现能力。对比相同功能的不同视觉表达，总结优秀的设计呈现方案，希望这个栏目可以带给你更多帮助！