1、中性色色值为什么要使用透明度？ 

有细心的用户发现，在 Ant Design 的设计规范里，中性色色值可以按照透明度来设置，见下图中性色色值表（百分数代表不透明度）：

平时大家似乎更喜欢使用 #333333、#666666 这种色值，那使用透明色有什么优势呢？

我们知道，中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑白色背景以及有色背景的差异，同时结合 WCAG 2.0 标准。

现在  Ant Design 的色板中，透明色模式和实色模式都是有的。透明度模式可以做到背景色兼容。

如下图示例，我们以颜色 gray-6 为例，这个颜色在实色模式的色值是 #BFBFBF，透明色模式的色值是 000000-25%。两者在白色背景上的颜色完全相同，但是在灰色或其他颜色的背景上，却有明显差别：

因此在透明色模式下，以中性色为主的前景色，会与背景色有一个更明显的色彩对比，对背景的兼容性也会更好，保证内容的可读性。

Ant Design 提供了透明色和实色两种颜色模式供用户选择，也会使组件更具通用性。

2、组件和设计师之间的关系是？ 

当下很多常见的、优秀的组件库，都为设计和开发的工作提供了便利。

那么使用组件库可以替代设计师么？组件和设计师之间的关系又是什么呢？我个人观点如下：

1 . 组件是「效率」工具

组件是工具，用来为设计师和开发提升工作效率。所有组件库的初衷都不是要替代设计师，而是要提高整个团队的工作效率。使用组件可以从两个方面提效：

（1）工作内容上：可以将不必要的、重复性劳动的时间节省出来

（2）工作流程上：便于设计师与前端开发做交接和协作，节省沟通成本

2 . 组件是「质量」保障

使用组件做设计稿，可以在一定程度上保证工作质量。组件规范了前端和设计师的工作方法，建立相对底层的系统，设定了设计和开发的质量底线。

基于组件规范设计和开发的产品更容易具备：

（1）一致性：具备相对一致的表现样式，设计风格和交互体验上均可保持统一

（2）可用性：对于用户操作，可以保证最基本的可理解性和可操作性

（3）审美性：符合基本审美标准，虽不会很亮眼，但也不会很难看

3 . 设计师要「沉淀」业务组件

设计师可以尝试沉淀有针对性的业务组件。很多业务领域有其独特性，比如金融类组件和政务类的产品页面列表内容就有很大区别。单一的元素组件在应用的过程中可以被再次组合和沉淀。

举个例子，我之前在做业务需求设计时，相比于 AntD，其实更常用的是 TechUI —— 它是建立在 AntD 基础上的、由我们蚂蚁的设计师通过对业务需求的提炼、组合和封装，做成的一套属于蚂蚁自己的【业务组件】。

再总结下二者的区别：

– Ant Design：是所有人的，是通用的，是单一的原子级别的（比如一个输入框）组件。

– TechUI：是蚂蚁自己的，是私有的，是组合的区块级别的（比如一整个表单）组件，更具备蚂蚁集团自己的业务属性。

针对你公司不同业务类型，沉淀出不同种类的区块级别的组件，这类组件使用起来也会更加得心应手、加倍提效。这也是 B 端设计师可以去学习和精进的一点。

4 . 设计师要「洞察」业务诉求

使用组件可以让设计师把节约出来的时间和精力放到更多有价值的工作上去。作为 Ant Design 的设计师之一，坦白的说，即使你的设计稿全部使用了 Ant Design 的组件搭建，最终的页面效果也仍不完善，在用户体验上始终可以更进一步。

设计师应该更多去关注对用户需求和业务逻辑的深入挖掘，不仅仅是在界面细节的表现手法上下功夫，还要学会站在全局，用系统性思维看待每一个项目，为整个产品的系统流程做优化，做更全面的产品体验升级。

原文链接：长弓小子（公众号）

作者：元尧

转载请注明：学UI网》工作经验｜ B 端产品组件设计细节及经验分享（一）

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

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

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

上图来源：Monday

不要给用户选择

有些产品还挺重视新手指引的，准备了好几个课程。

由于内容太多，所以拆分出来展示给用户，甚至让用户自己选择。

上图来源：Zendesk

例如上面的案例，虽然并没有强制用户手动选择，光是新手指引的内容列出来给用户这件事情，已经让人压力山大了。

其实用户刚进来时，只想要利用新手指引快速上手，并不想要看到关于新手指引的介绍，更无法决定选择什么新手指引。

如果真的不同人群的使用功能相差很大，那么直接根据对方情况提供相应内容即可。

这让我想起了第一次在牛肉火锅店点菜的情景，我这种牛肉小白用户根本看不懂菜单，能不能给先上一份普通牛肉？

指引气泡不需要标题

Windows 系统给界面设计带来一个奇怪的习惯，那就是不管什么面板，都必须有一行标题。

如果实在想不到用什么标题了，就把描述文字第一行拆出来做标题，甚至哪怕是用系统 logo 占位，也必须要有标题！

这让很多新手指引的气泡，也习惯性地配一个标题。

如果标题就能直达主题也还好，但如果是为了占位了凑出来的，那可就太浪费用户时间了。

不要强调跳过按钮

科技产品改变了人们的生活习性，其中之一就是让我们形成了条件反射：看到任何突然出现的弹窗和气泡，快速点击主按钮并让其消失。

后来因为移动端广告弹窗的泛滥，现在已经进化到了，看到弹窗先找 ❌ 了。

上图来源：不要这样用弹窗，真的很烦

很多新手指引的气泡都会提供跳过按钮，这样做挺好的，因为有的用户可能真赶时间。

但是如果跳过按钮做得太强，就会激发用户的条件反射，想都不想直接点跳过：

这个我尝试过了，大脑真的控制不了自己，手速已经跟膝跳反射一个级别了！

所以，这个跳过按钮一定要做小一点，尽量不要激发用户的条件反射：

只要不是单击，就得有图示

前面提到，千万不要小看条件反射这个东西，这个是生物本能。

用户最习惯的操作就是单击，如果你指一个箭头给他们，十有八九立即就上去点一下。

点一下不行，就多点几下，实在不行就双击。

如果双击还不行，就直接放弃了。

大半人根本不会看到，旁边赫然写着「点击鼠标右键」几个字。

以上就是我多年做用户测试的常见场景，总结就是：只要不是双击，就要有图示，写字根本没什么用。

如果是右键，可以把鼠标画出来：

如果是双击，可以给个动效：

如果是拖拽，除了操作对象之外，还要把目标位置高亮，并给一个指示箭头：

没错，一定做要扫一眼就能懂的程度。

遮罩别太深

有些产品，为了让更多用户走完新手指引，会给操作对象和气泡之外的部分加遮罩。

这样没什么不好，看起来还挺清晰的。

但是我发现有的新手指引遮罩太强，反而起不到学习的作用。因为用户看不清界面整体的样貌，还是记不住操作路径，引导完后全忘了。

新手指引的遮罩，一定不要按照弹窗的遮罩标准去看。

因为有弹窗时，页面的其他部分确实不用看了；但是新手指引只需强调重点，界面其它部分最好还是能看到。

总结

把上面的几点都集合在一张图，对比一下：

这些问题，如果放在产品的一般功能上，也许不算什么。就算第一次出错，下次也总能习惯。

但是新手指引不一样，这是产品给用户的第一印象，而且通常只出现一次，错过就没有第二次机会了。

这个步骤，也能直接影响到用户的转化意愿。

所以，新手指引真的要避免任何小问题，把体验的标准往上高一点。

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》测试了新手指引方案，总结下失败经验

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

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

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

再酷炫一点的，甚至可以让3d动起来：

这样的效果如果做成封面，是不是老帅了！

如果你不会动效也不会3d，没关系，今天给大家介绍一个神奇，上面的3d动态效果非常多：

咔咔就是一顿选择! 还有各种属性各种调整：

调整出自己满意的效果之后，文字往上面咔咔一放：

尤其是后面的元素是动态的：

为什么要 C 端化？

其实 B 端产品 C 端化，并不是因为传统的 B 端产品没 C 端好用（不是这么比的）。

其实关键还是获客模式的转变。

传统的 B 端产品是销售驱动，销售人员通过电话、上门拜访等形式促使客户下单。

一旦成功卖出，只要后续的服务不太差，客户就没必要更换迁移。

现在 B 端市场越来越大、行业信息越来越透明、客户的判断能力越来越强，传统销售模式开始变为互联网营销。

B 端产品在网上发布信息并投放广告，吸引客户自己前来试用并购买，只需提供少量客服人员即可。

这与以往的 B 端业务模式有很大不同，所以就需要变革。

所谓「B 端产品 C 端化」，表面上是学习 C 端的用户体验，背后的真正意图是要学习人家 C 端的互联网获客能力。

怎样才是好的 C 端化？

我发现 B 端产品的 C 端化程度，和他们的互联网广告投放力度成正相关。

例如我在油管上经常受到 Monday、GoDaddy 这两款 B 端产品的轮番轰炸。

先不说好不好用（毕竟我也不是目标客户），我发现他们用起来真的很有「C 端感」，和传统的 B 端产品果真不一样。

倒不是什么“轻量化、趣味性和人文关怀”，而是因为他们在我打开网站的那一刻，就开始不断吸引我探索使用。

我拿 GitLab 和 Monday 的官网首页对比一下，也许你就能感受到了：

前者像是一板一眼的「老实人」，后者则像是对你笑眯眯的「绿茶妹」，高下立判。

“轻量化、趣味性和人文关怀”这些东西，并不足以打动用户试用和购买，顶多只能算是「低段位」手段。

只有「高段位」手段，才能让用户不自主地地被吸引，心甘情愿地掏钱。

可是要做到「高段位」真的很不容易，我今天就总结几个技巧吧～

1. 直接坦诚

遇到两个陌生人：一个打官腔又遮遮掩掩的；另一个说话友善接地气又诚实，你会更喜欢哪个？

可能大多数人跟我一样会喜欢第二个。

C 端化做得好的 B 端产品，会把自己的产品预览图直接放到首页供人观看，而不是搞一张概念图外加一堆高大上的广告词。

前面放过的那张案例，这里也可能拿来用：

GitLab 的官网画了一些很抽象的概念图，写了一些很抽象的描述，给人感觉很模糊。

Monday 的官网明确把自己的业务类型列了出来供用户选择，还把每种业务对应的图标和展示方式画了出来，感觉很明确清晰。

2. 有效互动

遇到两个健身房销售：一个上来就说一个劲地介绍服务；另一个则先确认你平时的健身习惯，再根据你的情况介绍服务，你会更愿意听谁说话？

我肯定更喜欢第二个。

C 端化做得好的 B 端产品，不是简单地展示信息，而是先了解用户，再根据用户的需求提供不同的信息甚至服务。

Zendesk 的网站，会把自己的功能列出来给用户，给的图像和描述又很抽象，毫无互动感。

而 Asana 会让用户选择自己需要的功能，并直接给出具体案例的界面展示图。

3. 降低门槛

遇到商场逛街时遇到两个陌生餐馆，一家在二楼；另一家在一楼，你会愿意尝试哪家？

肯定是第二个。

很多 C 端化做的好的 B 端产品，会把表单用弹窗的样式放在产品上面，让用户感觉只要填写完就能立即使用了

比起 Trello， Smartsheet 只是在表单展示了一下产品内部，就让用户感觉门槛低了好多。

即便 Smartsheet 的新用户后面发现背后那张图真的这是一张图而已，要填的一点不少，但这时都已经快填完了……

4. 循序渐进

两家陌生的两家餐厅都把菜单摆出来了，一家的菜单写得密密麻麻；另一家的菜单虽然菜品不多，但是推荐菜品和菜式分类很清晰，你会更愿意尝试哪家？

我相信很多人都会更愿意尝试后者。

C 端化做得好的 B 端产品，不会太在意自己的产品是不是看起来功能齐全，而是更在意用户是否能够很好的理解产品，不要造成心理负担。

上图来源：Figma这些交互细节，B端设计也值得借鉴

Sketch 和 Figma 的属性面板在功能上其实没有很大的差异，但是后者看起来却清晰简洁许多，对新用户更加友好。

总结

B 端产品 C 端化这个理念其实很好，但如果被误以为只是向 C 端学习用户体验那就可惜了。

用户体验只是手段，关键目的是在没有销售人员参与的情况下，如何从互联网获客。

这次的经验的提醒我，以后如果再看到一些很火概念，不要简单的从表面理解，而是要站在决策者的角度，多思考背后的真实意图。

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》B端产品C端化，抱歉我想的太简单！

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

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

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

I. 发现

客户访谈

由于这位甲方的合作态度良好，所以设计师有机会与 SESA 的创始人和产品经理进行了 2-3 次会议。

借此了解了业务目标、用户需求和技术限制等关键问题：

主要问题：

• 低转化率：杂乱的界面使用户很难浏览商品。
• 手机端体验不友好：几乎 90% 的用户是通过手机访问网站，但手机版的设计不够理想。
• 手机端糟糕的界面和体验：目前他们使用的是现有的网站模板，根据目标用户的反馈，缺乏优化而且加载速度很慢。

客户需求

• 一键式购物
• 轻松的界面和体验
• 无缝的商品搜索
• 折扣和优惠更容易被看到
• 使用网站时能感觉熟悉而简便

成功指标

• 增加客单价
• 增强人们的对品牌的认知感
• 增加用户和订单数量
• 无缝的体验
• 让健康的生活方式更加受欢迎、评价、容易取得，更加有趣而美好
• 提供并教育用户健康的生活方式，并转化为愉快美好的生活

目标人群

根据产品团队提供的数据，整理出了目标人群的特征：

II. 构思

人物角色

根据以上信息，整理出了两个完全不同的人物角色：

故事版

没有区分人物角色的故事版：

目标用户的故事版：

体验地图

思考分析用户旅程的五个阶段（探索网站、比较商品、确认下单、完成购买和接收配送）和用户感知的三个方面（行为、思考和感知），制作了体验地图：

将当中的关键信息挑选出来：

竞品分析

设计师找到了三家主要竞品，先大概了解他们的特色和优势：

然后从 Google Play 的评论中寻找竞品的问题，这样就可以思考如何战胜他们：

III. 设计

信息导航

先把大致的用户流程确定下来，这样对整个产品就有了一个整体构思：

线框图

然后用手画出线框图，定下页面的整体布局：

低保真

将线框图手稿用绘图软件细化，制作成低保真方案，用来向客户展示和做用户测试：

IV. 完成

可用性测试

找用户做测试时，用的是低保真可交互原型。

根据测试发现的问题，设计师直接将优化方案运用到了高保真方案上，所以下面整理的问题都用高保真方案来配图展示：

• 1. 自动定位：测试之前用户必须手动搜索位置。
• 2. 属性选择：由于客户想要一键式购物，所以当用户点击熟悉（通常是重量）右侧的箭头时，可以反转卡片进行详细选择。

• 3. 促销展示：原本设计了三个促销区，但是测试中发现用户面对大量的信息无法充分理解，所以移除了一部分，只保留了头图和分类优惠。

• 4. 商品导航：为了避免用户迷路，将商品分类导航放在了所有页面顶部，并且悬停时展示子分类和相关文章。

高保真

响应式

这个网站需要具备很高的响应式能力，不论在 PC 端还是手机端，都能轻松使用。

但由于 PC 端和手机端的尺寸相差太大了，所以不得不使用断点（Breakpoint）来判断用户当前处在哪个端，并展示相应的界面。

这个断点的概念在栅格系统很常用到，指的是当界面尺寸缩小或增大到某个（或几个）零界点时，间距大小或其它界面元素发生突变。

上图来源：三种最主流的响应式栅格

这个方案的对于移动端的特殊处理包括：

• 确保商品分类的位置，方便用户记忆
• 使用汉堡菜单
• 提供模仿原生 APP 的吸底导航

Before&After

最后对比一下优化前后的方案：

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》重新设计东南亚头部在线超市的真实案例

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

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

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

1、什么是原子设计？

原子设计是创建设计系统的理论方法，分为原子、分子、组织、模板、页面五个层次。从最基础的原子开始，原子构成分子，分子组成组织，相互协作以创造出更有效的页面。

原子设计借鉴了化学中看待事物的方式，并将其应用在数字产品中。例如我们看的界面是由一些基本的元素组成，文字，颜色和图标等都是一个个原子。

原子设计是一种思维模式，并不特指某一种设计风格或框架。通过原子设计理论，将产品和页面联系为一个有机的整体，其中的每个小元素都发挥着至关重要的作用。

2、原子设计方法论: 从原子到产品

原子设计有特定的框架，方便帮助设计师组织思路并在设计过程中作为指导。

原子

原子指化学反应不可再分的基本微粒，虽然基础但会对分子和个体的形成产生很大的影响。

同理在设计中，原子是构成设计的最基础的元素，可以是一个icon、一种字体…本身不具备特有的功能但这些基础元素同样值得重视。

分子

分子由原子构成，以一定的次序和排列方式结合成分子。回到设计中，多个设计元素组合在一起，也会创造出一种新东西——具有明确功能性的组件。

原子设计强大的地方在于，可以为分子(组件)的创造分配时间，以确保组件具有明确的意义和功能。

组织

不同的分子组合形成组织，在设计中各种不同的组件组合在一起，形成一个完整的功能模块，例如在首页轮播图模块，有图像、文字等元素，还有按钮、导航箭头等组件。

利用组织这个概念能帮助设计师建立模块化意识，对页面结构有更深入的理解。

模板

通过元素、组件和功能模块的相互关联，从而得到产品的模板即产品框架，也可以理解为产品的低保真线框图。

在这个阶段，产品的信息架构和可视化的层次结构变得非常重要。产品页面、搜索结果页、主页等都有各自的模板，会显示内容的结构和基本的原型，方便后期使用。

页面

在模板基础上，继续添加需要的细节，最终会形成完整的页面，即产品的高保真原型。

这个阶段中需要注意的是，页面中所有的占位符尽可能提供真实的内容——真实的图像、真实的文案。

对于完成的页面，我们可以利用原子设计的灵活性来调整和优化页面设计。

比如当有某些地方的设计没有达到预期，可以灵活调整页面中的某个分子或组织模块来实现想要的效果。

3、原子设计的优势

灵活性和适应性

原子设计是在设计过程中构建事物的方式，但它并不限制对环境变化做出反应的自由。

通过为产品中的每种类型的内容创建组件和模式，获得一个灵活的系统。模板为产品的一致性提供了一定的支撑，后期既可以按这些模板原型快速设计，也可以根据需求灵活调整。

原子设计相当于将设计内容纳入到一个模式里，组成的页面不仅拥有准确的内容，并能以最好的样式展现出来。

系统模式

原子设计鼓励设计师投入时间和精力来创建整个系统，以便在产品设计的最后阶段，能够以一种高效的方式灵活地完成设计工作。

更少的组件，更高效的开发

利用原子设计可以确保在项目过程中组件的数量会受到一定的控制，避免团队重复设计同一个组件的多个版本或提供样式差不多的副本。

最后

原子设计成为一种用户体验设计方法，以全新的方式带领大家设计每一个元素、组件以及页面，通过这样的方法论有助于设计师构建一个完整的设计系统。

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》原子设计方法论！值得一学的设计思维模式

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

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

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

上图就是这个神器制作出来的一些效果，之前看Dribble上面有很多类似的设计，现在终于知道它们大部分来源于这个神器。

下面我也找了一些案例，大家一起来看看。

这样看，效果还是真的不错，它支持颜色修改、样式修改，目前一共有11种几何样式。

好了，现在下面正式介绍这个传说中的神器，我相信大家一定会喜欢上的。

比如我可以选择8X12列和行的几何布局。

对颜色、列和行、开启阴影调整，得到如上效果。

最终可以导出一张高清大图（3240X4860），尺寸是完全够用的。

随便调整下又是一张不错的几何背景，还可以作为作品集封面。好了，关键时刻来了，神器的网址已经打包好，大家可以拿去使用。

领取方式如下：添加小编微信，备注：神器699，小编会将下载地址发给你（小编不是机器人，回复会慢一些，大家稍等）。

 

原文地址： 功夫UX（公众号）

作者： 功夫UX

转载请注明：学UI网》2021 必备的超赞神器，用上它，效率都要提升三倍！！

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

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

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

Chapter One .
理清小业务的业务目标

相对于大业务（例如网站改版），小业务因为简单，其业务目标界定常容易被忽略。在日常设计中常会遇见设计师在不知道业务目标是什么、目标模糊、目标不正确的情况，直接从梳理小业务具备哪些功能入手，分析下现状问题后开始制定设计策略，这往往会导致设计出现解决不了关键问题、出现偏差情况。产品功能本身只是满足用户需求和实现业务目标的服务载体，只是策略的表象。理清小业务所承担的业务目标是前提，那么如何理清呢？

理清业务目标

小业务目标来自大业务目标，对大业务的业务目标进行一级级向下拆解后，即可获得小业务对应的目标。目标拆解需要遵循MECE原则，拆解方法包含：二分法、过程法、要素法、公式法、矩阵法。（tips：目标的拆解有一定难度）

Dapp设计详情为例，在酷家乐大增长业务背景下，用户活跃和用户留存为核心的目标，设计详情处于设计路径的一个节点，拆解得到设计详情的5个主要业务目标：

• 设计详情-用户周活跃
• 设计详情-新用户留存
• 设计详情-老用户留存
• 设计详情-内容投稿数
• 设计详情-内容分享数

业务目标可分为2个类别：

• 第一类别：符合用户意愿，如活跃、留存，在满足用户需求的情况下可以自然达成；
• 第二类别：不符合用户意愿，如内容投稿、内容分享，用户不太会主动去完成，需要去创造动机，激励用户进行。

Chapter Two .
挖掘小业务关联的用户需求场景

有小业务的业务目标后，第二步就需要给用户提供价值满足用户需求，以此来实现业务目标的达成。梳理清楚小业务服务了哪些用户需求是提供价值的前提，那如何获取用户需求场景呢？

用户访谈——获取相关用户需求场景

用户需求场景可以帮我们清晰了解到用户使用产品的原因。用户需求场景可以一句话进行界定，包含四个关键要素，其中需求本身最为核心，需要挖掘出当前诉求和其背后的潜在需求。

“在【某环境下】，【某用户】做了【某事】来满足【某需求】”

用户访谈为了挖掘到更为深入用户需求场景的要素信息。以设计师入行年限分组（1-3年、3-5年、5年以上），每次分组访谈2-3个设计师。梳理出设计详情相关的8个需求场景：

访谈信息整合如下

规整用户需求场景

在业务访谈中获取的场景往往都是碎片化的，碎片化场景对设计指导容易出现偏差，需要把场景结构化，为后续的方案设计提供依据。我把获得的场景按照设计师设计流程进行规整，按设计前、设计中、设计后三个阶段进行划分。

以上梳理了设计详情相关的用户需求场景，再来看原设计详情只基础满足了资料管理和方案展示的2个单一场景，在设计师的整个设计流程中只占了一部分。从设计层面来看，该2个场景局限在方案设计大场景中，设计更多做的是对其方案设计操作的体验优化，在原有较好操作体验的现状下，其对给用户创造价值上没有很大增量。再从以上业务目标来看，2个单一场景很难去促使用户对内容进行分享和投稿。

Chapter Three .
梳理产品功能矩阵

在理清小业务的业务目标和需求场景后，下一步就是按照场景去梳理产品能力。

小业务功能现状分析

老版app设计详情的功能进行初步的现状分析，设计详情包含渲染、图文编辑、图片管理、投稿、分享5个主要功能。从需求场景来看，多个场景无法实现，如营销、谈单；从业务目标来看，通过当前功能有较大的优化空间，如当前投稿很难让用户知道投稿有什么价值。

产品能力梳理

分析现状发现功能不足以支撑用户需求场景，有获取功能2个方向：

1. 挖掘现有能力：可以扩大梳理范围，从小业务所在的上一级业务到整个平台，一级级往上梳理场景对应的现有功能。
2. 打造新能力：围绕场景，打造出新的功能

挖掘平台上现有能力，可对业务的能力价值最大化利用，与其他业务形成互通，实现1+1大于2的业务价值。亦可围绕场景打造新能力，可反推产品去发倔新功能。

以下是设计详情涉及所有场景的产品功能矩阵，从平台获取到了很多全新的能力，以及对原有的能力进行了能力拓展。

Chapter Four .
拆解每个场景的设计目标和策略

在梳理出产品能力后，需要通过设计策略把产品能力有效组织起来，让用户快速感知快速上手使用。设计策略推导自设计目标，那如何得到设计目标？

基于用户需求场景将行为事件拆分，提炼行为事件再推导出设计目标，再基于设计目标给出设计策略。

Dapp设计详情受制于移动端能力，只涉及设计详情中5个相关场景，其设计目标和设计策略的拆解结果如下

拆解出设计目标后，基于目标分析产品现状得到存在的设计问题。为什么要基于目标分析现状？首先需要明确什么是问题，问题是导致目标和现状不一致的原因。只有明确了目标才可以理性分析与现状存在多少问题。在日常中时常看到设计师会直接得到问题，很多情况是默认假设了一个预设目标，但这目标得到不严谨、不全面，容易导致得到的问题本身也出现偏差。设计策略基于设计目标或问题得出，其最终都来自设计目标。

对老版Dapp设计详情现状进行了分析，得到了问题：

Chapter Five .
设计策略落地

在上一步得到设计策略后，围绕着设计策略是设计方案。本段将不全部展开说明，只选3个关键点讲述设计方案的思考

设计详情框架的设计

Dapp设计详情涉及5个场景的承载及产品功能繁多，设计三步思考：

第一步：简化功能认知，对功能结构化，以场景的维度重组织功能，并以场景打造功能集合的认知，建立场景能力区；

第二步：梳理场景共同涉及的内容，作为联系的载体承载场景的放置，设计详情中展示态的方案涉及到了5个场景中的4个场景；

第三步：提取场景中即时性和高优先级功能，打造快捷功能区

框架如下：

建立框架后，填充具体的能力和内容。如场景入口放置于底部，并根据场景优先级做了主次的区分。

设计详情框架建立后，打造细分场景中的设计。

营销获客场景设计

营销场景的设计，将营销组成拆分为可营销内容、营销的渠道、渠道内容展现三大类，就可以清晰去梳理出现有的功能，以及可从内容、渠道各自去拓展挖掘。内容和渠道清晰后，再传达各渠道提供的价值激励用户去触发行为。

谈单场景设计

谈单场景关键在方案详情上，谈单面对不同情况，存在多种内容形式去展示方案。在上面内容梳理中最主要是3个内容：图文方案、全屋漫游、渲染图册。在方案详情中，头部承载了全屋漫游、图册，如图文方案过于繁琐可直接点击全屋漫游图进行讲解，亦可点击封面进入图册直接图片说明。图文详情加上了房间切换的导航，可快速切换到需要讲解的地方。

Chapter Six .
上线验证

上线后数据平稳后观测，设计详情的周活提升了89%，每个场景下的功能数据都得到显著的提升（tips：有部分数据因技术原因没有采集到）。除了改版了Dapp侧的设计详情，后续对PCweb侧的设计详情进行迭代，同样起到不错的结果。数据的结果验证了方法的可行，并起到了积极的效果。

Chapter Seven .
思考小结

以上是我应用这套设计方法去做了块小业务优化，反向推动进入产品迭代，上线后取得了不错的成绩。在本次赋能后，对小业务中多了一些感悟

• 小业务是大业务的缩影，可以作为去赋能大业务前沿验证的实验田，大概率可以快速验证自己的想法，即使方向错了因为小业务改动影响面也小
• 因知识广度和深度的限制，不是所有设计师都可以一开始就可以把控大业务，小业务可作为打磨设计深度专业度，一些小业务的复杂度并不低于大业务
• 该设计方法同样适用于大业务，但方法是死的，不是所有情况都套用，得需要把握重点灵活应用
• 不要总想着搞个大新闻，在能力未被业务方认可时，小业务的赋能可以成为一个很好的发声口
• 不要轻视小业务，有可能是你根本还不了解

以上内容，感谢阅读！

原文链接：酷家乐用户体验设计（公众号）

作者：小波

转载请注明：学UI网》需求太碎？设计师如何在小业务中提炼价值

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

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

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

I. 发现

客户访谈

由于这位甲方的合作态度良好，所以设计师有机会与 SESA 的创始人和产品经理进行了 2-3 次会议。

借此了解了业务目标、用户需求和技术限制等关键问题：

主要问题：

• 低转化率：杂乱的界面使用户很难浏览商品。
• 手机端体验不友好：几乎 90% 的用户是通过手机访问网站，但手机版的设计不够理想。
• 手机端糟糕的界面和体验：目前他们使用的是现有的网站模板，根据目标用户的反馈，缺乏优化而且加载速度很慢。

客户需求

• 一键式购物
• 轻松的界面和体验
• 无缝的商品搜索
• 折扣和优惠更容易被看到
• 使用网站时能感觉熟悉而简便

成功指标

• 增加客单价
• 增强人们的对品牌的认知感
• 增加用户和订单数量
• 无缝的体验
• 让健康的生活方式更加受欢迎、评价、容易取得，更加有趣而美好
• 提供并教育用户健康的生活方式，并转化为愉快美好的生活

目标人群

根据产品团队提供的数据，整理出了目标人群的特征：

II. 构思

人物角色

根据以上信息，整理出了两个完全不同的人物角色：

故事版

没有区分人物角色的故事版：

目标用户的故事版：

体验地图

思考分析用户旅程的五个阶段（探索网站、比较商品、确认下单、完成购买和接收配送）和用户感知的三个方面（行为、思考和感知），制作了体验地图：

将当中的关键信息挑选出来：

竞品分析

设计师找到了三家主要竞品，先大概了解他们的特色和优势：

然后从 Google Play 的评论中寻找竞品的问题，这样就可以思考如何战胜他们：

III. 设计

信息导航

先把大致的用户流程确定下来，这样对整个产品就有了一个整体构思：

线框图

然后用手画出线框图，定下页面的整体布局：

低保真

将线框图手稿用绘图软件细化，制作成低保真方案，用来向客户展示和做用户测试：

IV. 完成

可用性测试

找用户做测试时，用的是低保真可交互原型。

根据测试发现的问题，设计师直接将优化方案运用到了高保真方案上，所以下面整理的问题都用高保真方案来配图展示：

• 1. 自动定位：测试之前用户必须手动搜索位置。
• 2. 属性选择：由于客户想要一键式购物，所以当用户点击熟悉（通常是重量）右侧的箭头时，可以反转卡片进行详细选择。

• 3. 促销展示：原本设计了三个促销区，但是测试中发现用户面对大量的信息无法充分理解，所以移除了一部分，只保留了头图和分类优惠。

• 4. 商品导航：为了避免用户迷路，将商品分类导航放在了所有页面顶部，并且悬停时展示子分类和相关文章。

高保真

响应式

这个网站需要具备很高的响应式能力，不论在 PC 端还是手机端，都能轻松使用。

但由于 PC 端和手机端的尺寸相差太大了，所以不得不使用断点（Breakpoint）来判断用户当前处在哪个端，并展示相应的界面。

这个断点的概念在栅格系统很常用到，指的是当界面尺寸缩小或增大到某个（或几个）零界点时，间距大小或其它界面元素发生突变。

上图来源：三种最主流的响应式栅格

这个方案的对于移动端的特殊处理包括：

• 确保商品分类的位置，方便用户记忆
• 使用汉堡菜单
• 提供模仿原生 APP 的吸底导航

Before&After

最后对比一下优化前后的方案：

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》重新设计东南亚头部在线超市的真实案例

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

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

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

因为「米勒法则」研究的是人类大脑的短期记忆量，而导航菜单、金刚区这些场景，是侧重用户识别，而不是侧重用户记忆。试想你作为用户的时候，你会去记导航菜单的名称吗，哪怕是短暂地记下来（就像我们记短信中的验证码，然后到另一个应用中输入的场景一样，短暂地记住）？我想大部分的人在这些场景中，应该都是所见所得、过眼云烟的吧。

并且“导航菜单的设计旨在用户识别而不是用户记忆”这个观点，在UX研究咨询公司 Nielsen Norman Group（NN/g 尼尔森诺曼集团）的“web可用性”一文中也有指出。

所以以上导航菜单、金刚区的案例，产品可能确实也是有在控制菜单项目的数量，但更多应该是出于对「希克定律」的考量，而不是「米勒法则」（我之前也有在《交互四策略实现希克定律》一文中说过：用户的决策能力会跟随选项数量的增长而降低，给用户非常多的选择，约等于没给用户选择）。

这些案例完全是强行反推，给套了个「米勒法则」的结论…实属不妥…那我就来谈谈，我对「米勒法则」的理解以及它在产品设计中的用途。

01、「米勒定律」在研究什么

米勒在1956年《心理学评论》刊中的《神奇的数字7±2：我们处理信息能力的一些限制（The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information）》一文中，首次提出「米勒定律」。但该文只算是一篇阐述学术观点的文章，不算严格意义上的论文。

米勒在文中引用了实验者记忆变化音调的实验，发现人们在短时间内可以很好地记忆并复述5~6位的信息，随着收到的信息位数增多，记忆出错的概率也在不断增加。但因为实验者存在个体差异，最终的信息记忆量基本都能在该基础上再浮动2~3位。所以得出了“人的大脑在短期记忆中最多可以记住大约7±2个信息团”的结论。

但因为该实验与文章不属于正式的科研研究和论文，所以后来的科研学者又对“人类短期记忆上限”进行了更多的实验研究，最后形成了很多种学说。有坚持7±2的守旧派；有认为最佳短期记忆信息团为4±1的创新派；也有认为“人类的最佳短期记忆不应该被束缚于一个固定数值区间”的不站队派（确实 NN/g 尼尔森诺曼集团也说过，用户的短期记忆能力存在较大的个体差异，前25%的人群比尾部25%的人群会好大约2.4倍）。

但不论怎么说，这些实验都明确表明了：人的短期记忆存在上限，只是对具体能记住的信息团数量存在分歧。

基于这个结论，我们在设计产品时，该如何加以运用呢？

02、在人机交互中的运用

NN/g 尼尔森诺曼集团基于「米勒法则」，提出了以下几则设计指南参考：

• · 响应时间必须足够快，以便用户在等待下一页加载时不会忘记他们正在做什么；（体验侧）
• · 更改访问链接的颜色，以便用户不会忘记他们已经单击过哪里；（UI+交互侧）
• · 不要让用户去记优惠券代码，而是该将优惠信息置入短信或邮件中的链接，通过链接自动将优惠券转移到用户的购物车中。这样可以让计算机承担记住晦涩代码的负担；（交互侧）
• · 在用户可能需要帮助的场景显示“用户帮助”功能，这样他们就不必前往单独的帮助功能区去记步骤，然后再回来解决手头的问题。（交互侧）

你会发现，实际上专业团队对「米勒法则」的理解，基本都在于如何解决“人的短期记忆上限”问题，并没有去纠结，到底是7±2，还是4±1…

并且我在 NN/g 团队每一条设计指南的后面都标注了该条指南作用的侧重向，发现大多都体现在交互侧。因为「米勒法则」研究的是人的短期记忆极限，在视觉表现层其实很少会运用到。视觉更多强调的是“从识别到操作”，这并不是「米勒法则」的研究内容。

举一些切实的例子吧，基于「米勒法则」而诞生的产品交互中，我们最常接触到的就是移动设备自动获取短信验证码，方便用户一键填充；通过图像识别用户的银行卡号，减轻用户记忆负担。

这一类有关用户短时记忆的场景，为减轻用户记忆负担而诞生的交互形式，才是真正的基于「米勒法则」。

现在你明白了吗？因为「米勒法则」中提到了短时记忆极限量为7±2个信息团，让许多人都去关注数字了，而忽略了「米勒法则」到底在研究什么。然而这个数值，迄今为止，在科研领域依然还存在着分歧。

03、关于「米勒定律」的拓展与延伸

3.1 拆解与再组合  

米勒在他发表的文章中也提到了：虽然短时记忆存在上限，但是人们的大脑也总是在努力寻找其他方式拓宽这个极限，例如拆解与再组合。

在前面米勒让实验者记忆变化音调的实验中，就有人通过自主拆解、再组合信息形成信息团的形式，来增加自己最终记住的单位信息数。

基于此，前面图像识别用户的银行卡号的示例，如果因为技术受限而无法实现，我们也可以通过拆解卡号为“4位一个信息团”的方式，来方便用户记忆、输入与校验。这样在体验方面也是一种弥补。

3.2 让用户放弃记忆  

要将用户的记忆负担减轻到极限，那就干脆让用户放弃记忆。

例如苹果基于自己的云管理与密钥技术，在识别到用户在创建密码时，会自动填充强密码，强密码复杂混乱到很难被人脑记忆。

一方面加强了密码的安全性；另一方面，搭载其他技术手段来减轻用户的记忆负担，不再纠结于用户究竟能记住多少个、多少位的密码，直接将用户需要记忆的内容减轻至0，这也许才是真正基于「米勒定律」而创造出来的产品设计吧。

04、写在最后

其实这篇文章我认为更多是写给交互和体验设计师看的，如果你着手的功能有涉及到用户记忆的场景，不防可以参考一下这些减轻用户记忆负担的案例，还有NN/g的设计指南。

但好像现在「米勒定律」被很多UI设计师用成套路了…然而你发现了吗，文中「米勒定律」的案例，与视觉、与“7±2”很少存在关联。

如果文章开头导航菜单、金刚区的例子，你硬要说是参考了神奇数字7±2，我认为勉强也算行吧（嗯…勉强算）。

因为虽然我认为其设计理论更多是建立于「希克定律」之上的，但「希克定律」告诉我们要减少展示给用户的选项数量，却并没有给出一个建议值。如果你希望在某些场合给你的设计一些立足点（大家懂的），你如果说结合了「希克定律」与神奇数字7±2，我认为比直接说基于「米勒定律」要更内行一些。

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

作者：Howiet

转载请注明：学UI网》UI&UE实用方法论 | 一直被错用的米勒法则（7±2）

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

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

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