编辑导语：你有没有设计过结构复杂、内容繁多的表单？在设计时有没有什么技巧可以化繁为简、提升填写者的体验感呢？本文作者为我们罗列出了表单设计中可能遇到的一些问题，并且提供了解决方案，让我们一起来学习吧。

距离上次发文已经快半年多了，实在是惭愧，好久没有输出内容了，看着每周增加的零星关注人数，内心更加焦灼难安。

这半年来我换了工作，也适应了新的环境，同时也在思考新的方向，估计和大多数的设计师一样，迷茫时常伴随着我。前段时间写了几周的产品体验日记，但觉得缺乏深度就没发上来，后续我将会继续写产品体验日记，完善后分享给大家。

2020所剩无多了，我也会将积攒下的一些内容陆陆续续发上来与大家分享，感谢关注，感谢阅读。哈哈哈哈

一、导语

你平时填写过的最复杂的表单是什么？调查问卷还是文档信息录入？如果一个表单字段内容巨多、结构多变、填写耗时耗力，那你将如何设计你的表单使之体验更佳？

面临的问题:

1. 业务复杂，功能较多

不知道大家是否看过法律合同之类的文件，多则好几箩筐，少也有厚厚一叠；类似的文档如果进行线上结构化，势必要同样要花费巨大的人力去填写表单，完成基础信息的录入工作。

同时，由于录入的时间不确定，流程不明确等问题，也制约着表单的填写。

2. 流程较长，操作繁琐

多个不同表单之间的互有关联又相互区别，填写的时候需要来回查看以确认信息，查阅和填写相互并行，操作繁琐。

3. 字段较多，关联项较多

几乎每一个字段都有对应的关联项，每个单选字段的不同项决定不同的内容。同时，由于字段数量，层级划分不明确，会使填写的人失去定位，产生迷惑。

二、解决方案

1. 内容分组，分步填写

根据业务内容分级，合理运用颜色、间距、字体大小、卡片层级等进行信息分级。

2. 实时保存，避免数据丢失，提供草稿功能，避免任务中断

3.字段分组，示意结构，联动项隐喻

4. 信息自动带入，节省时间

一般表单是与某项功能挂钩的，信息会在多个入口录入。因此在填写长表单的时候，如果能从系统中自动获取到数据，就可以自动为其填充，可根据业务场景，判断是否让其修改和更新。

5. 提供二次编辑功能，防止信息输入有误

一般的长表单在涉及非审批流的时候，可以让其无限二次编辑；如果是处于审批流，则需要根据业务场景限制其编辑次数或者限定其编辑规则（草稿可编辑，一旦提交则不可编辑）。

6.提供多人协作编辑功能

如果一个长表单，需要多个不同的业务域的人来填写，那么需要协同编辑，并实时显示编辑的人员信息。

同时，为了避免信息丢失和编辑错乱，在同一个表单下，同一时间应该限制只允许一个人进行编辑，等其提交完后，可允许其他人进行编辑。

7. 实时检验

前端实时校验字段输入规则，后端统一校验信息交换规则。

比如对于数字输入框的校验、电话号码的校验、身份证号的校验，应该在前端实时完成。

在鼠标离开焦点区域或定位到下一个字段的时候，提示其填写有误；这样做的目的是减少后续修改的次数，在长表单下，统一提示其填写错误会是一场灾难。

在点击保存并填写下一步或点击提交信息的时候，就需要跟后端交换数据，验证录入的信息；如果不匹配，则提示错误，并从上至下定位至相应的错误字段。

8.做好填写引导功能

要通过多种方式，引导表单的填写。

1）在开始填写之前，简要说明该表单的业务目标，大概需要花费的时间等；

2）开始填写后，关于每个字段的特殊说明，都需要标注出来。重要的要显示在页面上，不重要的就收起在注释符号中；

3）填写的过程中，切记不要到最后才告诉用户哪里出错了，重要的信息一定要提示到位，否则一旦出错，前功尽弃；

4）填写完成后，引导其下一步的操作，或者返回至列表。

9. 详情页也需要注意信息分级

表单填写完毕后的产出物就是详情页，详情页是需要浏览的。因此在设计详情页的时候，应该本着让用户浏览方便的原则去设计，需要注意以下几个点：

1）结构清晰

结构清晰是指不要讲内容一股脑的全堆在页面上，要做好信息的分类；同时，注意规划页面的层级。

2）设置快捷导航

如果一个表单是长且复杂的，那么其对应的详情页也会变得复杂和冗长，因此在页面的右侧或者顶部设置合理的快捷导航是很有必要的。

三、小细节，大体验

1. 提供快速返回顶部的按钮

快速返回顶部按钮的使用要注意场景，如果你的页面比较长，且没有分组浏览的导航，那就需要设置快速返回顶部的按钮。

但是在存在分组浏览导航和顶部悬浮标签的情况下，不建议使用快速返回顶部的按钮，因为在填写表单的时候，使用快速置顶的场景比较少。

2. 提供分组模块收起展开功能

当一个模块混杂着各种信息的时候，单纯的模块分组已经无法处理它的复杂度了，因此需要收起高频且信息量大的模块，可以合理的减少页面的复杂度。

3. 步骤提供信息填写完成度提示

步骤条可以单纯的作为步骤指示器使用，也可以作为一个表单完成度的提示区域。

4. 重要说明性文字尽量显示而非收起

在填写大量字段的表单时，阅读表单内容和填写表单同样耗时耗力。

如果我们将所有的提示信息隐藏在提示符中，一般情况下用户不会去查看；但是如果去挨个查看提示信息，则会多花费一个步骤去点击或者悬停来查看提示信息，浪费了大量的时间。

因此如果涉及到重要的提示信息，请直接展示在字段的后面，不要隐藏起来。

5. 产品内组件应该规范统一

在后台产品上，关于组件的规范统一，想必是人尽皆知的设计原则。

无论是各类平台型设计组件，还是各个公司自造的设计组件，保持统一和规范对产品设计有着重要的作用，在这里不赘述组件应该怎样规范统一。

因为无论是Ant Design还是其他设计语言，都有详尽的关于组件的定义方法，我在这里讲述一个产品设计更高层面或者更深层面的原因：

组件的规范统一并不仅仅是为了省时省力，而是为了使用户在使用的过程中达到认知上的统一和行为上的统一，在进行高频次的操作后，界面的流程或者组件样式已大致在用户脑海中形成固定印象。

因此在操作相同类的流程时，用户会有更多的掌控感，试想一下：如果你在操作人事相关的流程后，去填写绩效部分的内容时，发现一个迥异的界面或者弹窗，你肯定觉得这是不是哪里出错了，甚至会怀疑这是否是同一个系统。

目前大多数公司的管理系统经过多次缝缝补补，内部的跳转逻辑已经异常感人，界面风格也大放异彩，但是使用起来却无从下手，深感迷茫。

因此大到界面样式，小到间距大小，产品设计的规范和统一应该是最基础又不可缺少的原则。

6.庞大的信息录入，表单内部要分步填写，外部可拆分成不同的表单分别填写

对付复杂的表单，你需要解决的主要问题并不是填写方式或者页面设计，而是信息分级和结构拆分。解决了这个问题，基本上就解决了业务问题，其余部分就跟我们常用的表单一致。

将复杂度降低并不意味着减少页面的信息，而是通过设计师合理的信息划分，降低视觉上的复杂度和流程上的复杂度，这样才会达到当前场景下的“最佳解决方案”。

四、结语

随着互联网信息化的深入发展，复杂是避免不了的。

我知道大家都推崇简洁的设计，但那只是对视觉和样式的定义，而非对信息的定义。

我们所处的世界是复杂的，行业更是复杂的。信息的复杂度与日俱增，想要处理复杂的信息，就需要从复杂中寻求规律，这规律与业务息息相关。

B端360行，行行深如海，小伙伴们，我们一起慢慢修炼吧~

文章来源：人人都是产品经理           作者：米兰小铁匠

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

翻译：Grace Gogh  审校：冠男Ben |   UXRen翻译组 #343译文
作者： cary-anne olsen-landis（前IBM Power Systems的经验研究主管）
原文标题：《Kano Model — Ways to use it and NOT use it》

设计团队为产品提出了一系列用户需求。
开发（工程师）团队带着的不一样的功能包来到会议桌前。
管理团队只想留下那些能使公司盈利的功能。
运维团队认为需要优化的功能则完全不同。
产品团队如何知道该朝哪个方向推动项目？

作为设计研究人员，我们借助用户的所言所行来深入阅读并洞察他们的需求。但是，我们中的许多人都在努力寻找新方法来实现需求的可视化管理，以便和上述的跨职能团队达成一致（拉齐认知）。用户当然可以对功能进行投票并对其进行排名，这可以提供很好的方向，但这并不能给到更深层次的需求定义，即哪些功能是必须有的，而哪些功能是在期望之中的。

现在开始认识卡诺模型。

1. 卡诺模型（Kano Model）是什么？

图1：狩野纪昭（来源： Mind the Product）

Kano模型是由Noriaki Kano教授在20世纪80年代提出的产品研发和客户满意度理论，将用户偏好分为五类。它通过评估每种功能的2套衡量标准：满意度和情感度，来提供帮助我们了解客户对产品功能的看法。这2种衡量标准的组合形成五类属性：魅力属性、期望属性（线性属性）、无差异属性（次要属性）、必备属性和反向属性。

2. 如何使用卡诺模型？

设计一个调查问卷，并独立列出每个功能。最好在可能的情况下通过原型或交互式线框稿来演示每个功能。你不必花太多时间进行原型设计，这只是传递想法的原型。有些人甚至只展示原型的某处细节，可能是因为他们喜欢这个点子，但并不喜欢它的实现方式。

图2：功能用图片展示的例子

如果无法使用demo来展现功能，说明性文字也可以很好地发挥作用。

图3：功能用说明性文字表示的例子

专家提示：与其他IBM研究人员讨论时，比较成功的研究人员测试了15–20个功能。那些不太成功的则测试了30-40个功能。 测试20多种功能对于客户和研究人员来说都已经足够多的啦（不建议超过20多个）。

看到每个功能后，用户可以对卡诺问卷的进行选择回答：

• 如果您拥有（功能），您的感觉如何？
• 如果您没有（功能），您的感觉如何？

（Daniel Zacarias对于如何清楚地编写这些问题提供了一系列优秀的建议）

针对上述两个问题的标准Kano问卷答复为：

• 我喜欢它（ I like it）
• 本来就应该有它（ I expect it）
• 无所谓/保持中立（ I’m neutral）
• 我可以忍受它（I can tolerate it）
• 我不喜欢它（I dislike it）

Daniel Zacarias还为答案集提供了其他一些选择。基本上，如果您要尝试使用卡诺模型，请阅读他的整篇文章。太奇妙了。

Jan Moorman还建议添加第3个问题：此功能有多重要？

她建议使用“一点也不重要”至“超级重要”的9级李克特量表。但是，当尝试在李克特量表上阐明重要性的9个点时，这有点棘手。似乎7点的李克特量表阐明起来比较容易。

图4：李克特量表的7级重要性

当你找到答案，Daniel Zacarias会介绍详细的分析过程。 我强烈建议您仔细阅读。

IBM的研究人员发现一个问题：得到这些数据很棒，但是数字本身并没有告诉任何人背后的原因，这是研究人员无法避免会被管理团队挑战的关键症结。 一个团队使用卡诺模型进行了大约15次定性访谈。另一个团队在从40个人中获得问卷样本后，又进行了5次定性访谈。两个团队都强烈建议在此过程中添加定性访谈，因为它有助于补充上下文的定性数据支持。

3. 如何“不使用”卡诺模型？

IBM的某个团队不愿再使用Kano模型。该团队之前会使用场景描述（Scenarios）来代替功能（features）进行调研问卷的设定，但是，在测试进展中他们明显发现设定的场景并没有真实反映客户实际使用产品的行为，最终导致测试失败。

使用场景来展示功能的想法很好，但是当我们在讨论该方法时必须事先验证。经过确定现状的生成研究后，卡诺+场景组合（kano+Scenarios）将会非常有力。

另一条建议是减少正在测试的功能数量。承担了30-40个功能清单的测试团队表示，如此多的功能测试太密集了。这会导致在测试结束之前，用户不知所措，且疲惫不堪。

4. 卡诺模型的优势

卡诺模型非常擅长对功能进行优先级排序。卡诺模型的基础理论是Daniel Zacarias提出的“喜悦的自然衰减”。创新的想法和产品总会从令人兴奋的新颖功能（在Kano图表的顶部：魅力）转变成预期的功能（在底部：最好的必备，被贬损的，最糟糕的）。

利用卡诺模型获得最佳结果（来源：UX Booth和Jan Moorman）

以无线互联网为例*（灵感来源于参考文献中Jared Spool的示例）。

假设时间回到了2001年，你此刻正出差在外，带着一台具有以太网端口和WiFi的笔记本电脑。当你来到了酒店，发现有以太网端口可上网。尽管房费中未包含无线上网，但可以在商务中心使用WiFi。你此刻会很高兴！感觉太奇妙了！这是很棒的选择！

快进到2017年。你正在出差，并携带配备WiFi的基本笔记本电脑。当在酒店中，发现有以太网端口供连接Internet。房费中未包含无线上网，但是可以在商务中心使用WiFi。你真的会生气！这家酒店是什么鬼，需要额外付费才能上网？！还有谁依然在使用以太网端口连接到Internet？

经过了16年的发展，有些功能从最初的一种吸引人的功能（比如房间中的以太网端口，商务中心中的WiFi），变成了不受欢迎的功能。

如果团队不了解客户的需求，他们可能会专注于自己期望的功能，而不是极具吸引力的功能。使用卡诺模型的某IBM研究人员，在自己的团队中指出了这一点：“团队对某些功能感到非常兴奋，然后意识到这些都是桌面上的赌注。”

5. 卡诺模型隐藏的潜力

在讨论卡诺模型时，我们认为该模型还具有其他一些潜力：

• 测量痛点的深度
• 在产品生命周期中建立功能基准，以评估随时间推移喜悦的自然衰减

痛点深度（Depth of pain points）

该模型有助于揭示现有痛点的糟糕程度。卡诺问卷很容易用于研究，以深入了解为什么痛点如此糟糕，以及为什么这些功能对客户如此重要。它可能会揭示一些以前无法确定的需求，并推动进一步的创新。

基准功能（Baselining features）

我们讨论了使用卡诺模型作为功能的定期评估项目，以观察哪些功能降为较低类别。这种具有足够大用户基础的纵向测试可协助分析市场趋势和期望，并有助于随着时间的推移持续证明研究价值。它还可以帮助团队了解他们的产品何时开始趋于平稳，何时需要创新的想法来回到引领潮流的状态。

6. 开放性问题

有时，IBM的设计团队会担任某些项目的咨询顾问。IBM的一些设计团队被要求参与到某些项目中，以“梳理可用性”并在产品发布前渗入神奇的用户体验的“灰尘”。其他设计团队则暂时参与到边界更广泛的产品团队中。

在讨论结束前，我们还有一个悬而未决的问题：如果无法影响产品决策，卡诺模型还有用吗？你无法影响产品可能是因为该产品已经在开发中，或是由于管理层的压力，亦或是设计团队只是该产品团队的临时成员等等。使用卡诺模型的努力真的值得吗？

或者，即使不能影响产品，卡诺模型仍然可能有用吗？

你有什么想法吗？

在奥斯汀的IBM，一组设计研究人员会在每个月的某些时间共进午餐以讨论感兴趣的研究主题。之后，在IBM Power Systems的研究人员会收集并记录对话的重点。以上来自IBM Power Systems研究人员的午餐系列文章之一。

参考资料

• 出色的Daniel Zacarias对如何完全实施和使用卡诺模型进行了完整的解释，他不仅给出了惊人的概述，而且还提供了制表工具
• Jan Moorman在projekt202上讨论了她对卡诺模型的体验

• Jared Spool详细讨论了卡诺模型

文章来源：UX Ren    作者：宝珠

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

编辑导读：想要做好一个设计师，就要多研究优秀人士的作品，取长补短。现在互联网的发达，很容易就能在网上找到相关的学习资料。本文以史蒂夫·克鲁格的名著作为引入，分享20句关于界面可用性设计的名言，希望对你有帮助。

设计，以及许多其他领域，都是建立在优秀专业人士的作品和发现之上的，每个想要成为某个领域专家的人经常寻求指导来学习如何把事情做好。专业导师的各种书籍和文章现在都可以在互联网上免费阅读，让努力学习知识的人很方便的找到。

我们经常会分享来自数字设计领域最优秀专家的名言和睿智的想法。你会在迈克·蒙泰罗（Mike Monteiro）所著《设计是一项工作（Design Is a Job）》里找到有关设计的短暂洞察，奥伦·沃特尔（Aarron Walter）的《为情感而设计》（Design for Emotion）以及排版大师埃里克·斯皮克尔曼（Erik Spiekermann）的一系列智慧思想也是如此。

下面我们要分享的是史蒂夫·克鲁格（Steve Krug）的名著《不要让我思考（Don’t Make Me Think）》中的一组引言。

2000 年初版，14 年后再版，《Don’t Make Me Think》在今天仍然切合时代发展，符合实际需要。史蒂夫·克鲁格为界面可用性设定了一些基本原则，并与该领域的专业人士分享，这使得本书成为 UX 设计师推荐的最重要的资源之一。

可用性第一定律——“不要让我思考”描述了关于网站可用性的要点、案例和见解。创造不需要用户过多思考的界面设计，不仅可以解决问题，而且易于使用。这里有 20 句名言，反映了“不要让我思考”的一些关键点。

1、如果某件事需要大量的时间投入——或者看起来会这样——它就不太可能被使用。

2、让每一页或每一个屏幕都不言自明，就像商店里都有良好的照明：它会让所有的商品看起来更好。访问一个不需要我们思考的网站会让人感觉毫不费劲，相反，为不相关的事情多花心思会浪费我们的精力、热情、还有时间。

3、无用的客套话（“happy talk”）都是一种沾沾自喜的宣传，你可以在蹩脚的小册子里找到。与好的宣传文案不同的是，它没有传达任何有用的信息，它一个劲的说我们有多棒，而不是描述是什么让我们这样棒的。指示说明必须被消灭。

4、可访问性（Accessibility）非常重要，它不仅仅是正确的做法，而且是非常正确的做法。关于无障碍访问，如果没有引起足够的重视，你就无法意识到，它能显著的改善一些人的生活。仅仅通过把工作做得更好就能显著改善人们的生活，这难道还不够厉害吗？

5、另一个让人困惑的来源是那些看起来不太明显的链接或者按钮。作为一个用户，我永远不应该花哪怕一毫秒的时间来考虑这些东西是否可以点击。

6、最近几年里，让产品更加易用成为几乎所有人的责任。现在，视觉设计人员和开发人员常常要做交互设计（决定用户单击、按下或滑动时下一步会发生什么）和信息体系结构（确定应该如何组织所有内容）之类的事情。

7、可用性（Usability）就是确保让一个能力和经验一般（甚至低于平均水平）的人，能够想出如何使用并完成任务，而不必费事。相信我：事情就是这么简单。

8、可用性是有关人们如何理解和使用事物，而与技术无关。

9、关于指示说明，你只需要知道一点就够了：除非“蒙混过关”多次尝试失败，没有人会去读它们。

10、你越仔细观察用户，并倾听他们明确表达他们的意图、动机和思考过程，你就越会意识到，他们对网页的个人反应是基于许多变量的。试图用一维的“喜欢”或”不喜欢”来描述用户是徒劳的，而且会适得其反。另一方面，好的设计会考虑到这种复杂性。

11、那些设计网站的人并不在乎让事情变的明显和容易，这会削弱我们对网站及其背后公司组织的信心。

12、然而在现实中，大多数时候我们不会选择最佳选项，而是选择了遇到的第一个合理的选项，即所谓的“满意”（satisficing）策略。

13、大部分的网页设计问题（至少是对重要的那些问题来说）都没有一个简单的“正确”答案。有效的答案是那些运作良好的、满足需求的综合设计，它们往往经过了仔细思考，良好的执行和测试。

14、删掉每页上一半的文字，然后把剩下的再删掉一半。

15、设计师喜欢微妙的线索，因为微妙是复杂设计的特征之一。但网络用户通常都很匆忙，经常会错过这些线索。

16、如果你在设计了很多不同的网站之后只发现一件事，那应该是：几乎所有的设计理念——无论一开始多么糟糕——都可以通过足够的努力，在合适的环境下变得可用。

17、你的主要职责应该是分享你所知道的，而不是告诉人们应该怎么做。

18、你的目标应该是完全删除说明文字，让每项内容不言自明，或者尽可能做到这一点。当说明文字绝对必要时，把它们减少到最少。

19、和遵循惯例去设计相比，设计师们面临很大的诱惑去重新发明轮子。很大程度上是因为他们觉得自己被雇来是要做一些新的、不同的事情，而不是做原有的旧事情。更不用说，来自同事的赞扬、奖励和高级职位很少是基于“最好地利用惯例”这样的标准。虽然少数时候，在重新发明轮子上花的时间足以制造出新的革命性滚动设备，但通常情况下，这只是浪费时间而已。

20、如果你想要一个很棒的网站，一定要测试。因为你在这个网站上工作了好几周，已经失去了新鲜感。你了解的太多了。要想知道它是否真的有效，唯一的方法就是测试它。

文章来源：人人都是产品经理           作者：Alina Arhipova

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

编辑导读：对于老一辈人来说，他们没有赶上互联网兴起的时候，等到想要主动“触网”时，才发现很多操作根本搞不清楚。尽管产品设计师已经极可能考虑到了老人群体的用户体验，但在实际操作中，老人家还是一头雾水。这时，操作越是简单的产品，越能够赢得他们的喜爱。本文作者从自身经验出发，对这类现象进行分析，与你分享。

上周某天吃完晚饭，我妈递过她的华为手机怯怯地问我：你有空吗？我想叫你帮我跟那个商家说换一个快递，我们家这边的百世快递的站撤了，叫他们不要用这个快递。

我脑海中闪过一个念头：嗯？最近我没有帮她付款啊。但随即也是接过她的手机打开了淘宝。我妈立刻阻止我：不是淘宝，是拼多多。随即自己打开了她微信里的拼多多小程序，演示给我她找不到商家客服。我跟她说，这个功能要用APP才行，于是帮她下载了拼多多APP并很快解决了问题。

弄完之后，我们又展开了这样的对话：

我妈：哎呀，这个拼多多真是太好了，物美价廉，超方便！你怎么不早教我用！

我：我自己都不怎么用拼多多啊！

我妈：这个是我的舞友上周教我的！我打开一看，哇，好多有用的东西，又便宜！第一天我就买了几百块的！

我：但是拼多多很多假货啊！

我妈：我又不像你们追求什么名牌！有什么假货可言？一条裙子30块！

我：……

我妈：而且！以前我在淘宝总要你帮我付款，现在我用拼多多自己用微信就可以支付了。

我：我早就叫你开个支付宝账号，你自己又不开！

我妈：那么麻烦，我不会，你又不教我！而且又要绑定银行卡，万一哪天我的钱被人家骗走，那些什么黑客……

我：哪有黑客黑你，你又不是马云……

我妈：还有，拼多多退货很方便！以前我在淘宝的时候，退货要你帮我搞，还要在家等快递上门，很不自由，现在我自己去菜鸟驿站退就得了。

我：好吧。

我妈：以后我就用拼多多，我那些舞友都在用！

我：你开心就好。

我回头想了想，这是一个以用户定位和产品特征为优势抢夺用户的典型场景。

首先看看以我妈为原型的粗略用户画像：

• 年龄特征：60岁左右
• 工作与生活特征：退休在家，时间较多
• 消费能力：退休金4000元左右
• 家庭情况：已有孙辈
• 人际关系：以广场舞舞友、同学、工友、插友为主的人际关系圈，集聚在微信上
• 消费态度：不追求牌子，追求低价
• 网购习惯：淘宝的老用户，但没有支付宝账号；网购品类主要为衣物及家居用品
• 触媒习惯：微信（微信群、朋友圈）、今日头条

为什么我说拼多多是从用户定位和产品特征这两个维度抢夺走了我妈这样的淘宝用户的呢？

首先，我用的是“抢夺”这个词。

我并没有用挤占、分流这样的词。因为，在跟我妈的交谈里，我已经感受到她心里估计“从此淘宝一生黑”了。也确实，一个月以来我妈没有再叫我在淘宝付款过。所以，我想我妈大概率未来不会再用淘宝了，也就是说，淘宝直接流失掉了我妈这个用户。

其次，来看看用户定位。

根据上面我列出的以我妈为原型的用户，多吗？我简单查了一下。

根据国家统计局官网上发布的《中华人民共和国2019年国民经济和社会发展统计公报》，60周岁以上的人口约有2.5亿人，60-65周岁的人口约有83250000人，分别占人口总数的18.1%和6%；根据中国互联网信息中心官网发布的《第46次<中国互联网络发展状况统计报告>》，截止2020年6月，我国手机网民用户规模达9.4亿。

那么，根据这个比例可以推算，这样的用户大约在5千万—1亿的规模。

这么大的一个用户群体，实际上是淘宝自己放弃掉的。自从前几年淘宝打假货的行动和品牌化（力推天猫）的战略执行以来，实际上大量的县城以下、60岁以上的用户都被淘宝放弃掉了。

以我妈为原型的这批用户，他们大多数没有支付宝账号，但在微信上有钱，但除了平时发发红包，菜市场便利店买点东西，基本上还是没有用出去。于是，这批用户沉淀在微信钱包里的海量的钱，很难直接转化到淘宝上。

另外一个关键的地方在于，他们对淘宝是有怨言的，但在拼多多出来之前，没有替代物。某种程度上来说，对用户而言，忠诚度是很虚无的。真正对品牌有感情而产生“忠诚”的用户极少极少，品牌还是得需要不断优化产品，满足用户的需求。

品牌也好，产品也好，本质上是为用户提供价值，而不是要跟用户“谈恋爱”。

这是很多品牌的一个误区。没有在自身的产品上下功夫，去了解用户瞬息万变的需求，而去打“情怀”，讲“文化”。所以，我们可以看到当某些品牌醉心于自己的“情怀和文化”之时，其竞争对手在了解用户需求和优化产品而推出竞品后，瞬间打垮行业老大哥的案例。

最后来讲讲产品特征。

我妈使用淘宝的流程是怎么样的呢？

挑选商品——下订单——点击“找人付款”——发送需支付的订单到我的淘宝账号——退出淘宝——打开微信——告诉我发了一个订单——发红包给我——我看到微信或淘宝信息——点击需支付的订单——支付——退出淘宝——打开微信收红包。

而她使用拼多多呢？

挑选商品——下订单——支付。

当我列出这两个产品使用流程之后，我猜如果你是我妈，你也会用拼多多了。

在我妈跟我的对话里，还突出强调了“退货难”这个点。实际上是淘宝的物流服务不好吗？并不是。我一直觉得淘宝的物流虽然不如京东，但并不差，而且也不断在优化升级。但为什么我妈还是觉得不好呢？这一点不能单纯地从物流本身来看，而得回到淘宝的产品来看。

在淘宝上，推出了一个功能，叫“找人付款”。当时我觉得这个功能很好，解决了我帮我妈买单时，她要跳出淘宝从微信给我发链接的麻烦。但最终却带来了一个重要的弊端：当要退换货时，我这边无法执行，她那边又不知道如何操作。

而当我从PC端登上我妈的淘宝账号之后，PC端的退换货服务非常麻烦和繁琐，让我都研究了差不多一个小时才解决。而最后，我妈那边又无法支付退货费用，我在PC端也支付不了，也不能“找人付款”。总之，整个过程极其麻烦。虽然淘宝也意识到了产品上的缺陷，但目前的情况而言，这样的产品还是对于我妈这样的用户非常不友好。

而拼多多呢？它基于微信这个社交生态圈。加上没有什么太多余的功能，我妈很快就能上手了，自己操作还是比别人代操作方便多了。

谈到这里，我还意识到一个重要的问题。

从产品对人际关系的影响而言，淘宝是负向的，而拼多多是正向的。从某种程度上而言，60岁以上的这代人，是被互联网抛弃了，所以当他们想搭上这波潮流时，不得不面对自己的儿女，需要向他们请教，怎么用怎么学。这一点首先就会让不少子女心烦，不少父母自卑。

再进一步，如果每次父母网购都得“捆绑”上子女时，对人际关系是正向的吗？而在拼多多上购物时，他们不仅可以大大优化自己的产品使用流程，还能跟自己的老朋友们一起拼单，互惠互利，这对人际关系的影响有很大的正向作用。

你有什么被别的产品抢走的故事吗？

一点个人小想法，想到哪写到哪。

如果你有不同的意见和想法，欢迎评论或留言。

文章来源：人人都是产品经理           作者：@源记物语

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

Apple 致力于让每件产品都赏心悦目，与其说官网是产品展示平台，倒不如说它是苹果产品分支的延续。从 Apple.com 找设计灵感是每一位设计师都做过的事，那它到底有何魅力？文章对Apple的网页设计展开了梳理分析，与大家分享。

一、沉浸与交互式体验

每当有新产品发布时，我们都会被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段时间发布的 iPad Pro 也一样。

这背后是 Apple 基于 webGL 技术，创造的一种沉浸与交互式产品体验。

1. 连续性

我们在产品介绍页可以看到，苹果使用了大量的滚动 scroll 来体现连续性。

一方面，滚动作为大多数 Web 用户最自然的操作，学习成本极低。

另一方面，在冗长的页面下，滚动能让产品特性保持更自然的转场衔接。

iPad Pro 的连续性

2. 趣味性

另外，采用了大量的动画式转换（animated transition），即操作时展示的动态效果，以此来增加趣味性。

伴随着丰富的、若隐显现的章节文案，就像电影的旁白一样，娓娓道来。

通过滚动的方式增加交互性，这是明智之举。试想一下，如果只放置已渲染的演示视频，那么用户的操作会受到限制，只能在视频中前进或后退，毫无乐趣可言。

AirPods的趣味性

二、言之有序

1. 秩序感

说到言之有序，我们看 iPad 的页面介绍。四款产品，分别是：iPad Pro、iPad Air、iPad、iPad mini。

拍摄角度的秩序感，可谓妙不可言。

iPad的秩序感

• iPad Pro 的拍摄角度接近于正侧面。
• iPad Air 是四分之三侧面。
• iPad 是正面。
• iPad mini 是俯视。

如此一来，即显得有序，也不会导致视觉疲劳。

2. 设计语言

其次，官网与 iOS 保持协同的设计语言，给用户呈现了一致的感官体验。

从 iOS 11 开始，苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular + Light 的组合，转向的 Medium + Bold ，以此增强信息传播中的识别力。

HomePod

另外，高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的风格。我们可以很清晰的看到 Web 设计的同步转变。

三、层次

1. 视差

第三是视差带来的层次感。

苹果奉行包豪斯的无装饰和极简的理念。当然，它不是那种附庸的美观及外表的光鲜，而是将复杂难懂的技术以简洁的形式传达给用户。

Mac Pro 视差滚动

在信息层次方面，Apple 的编排设计由浅入深，犹如抽丝剥茧。很好的利用了视差滚动，传达图片与文字之间「层」的概念。这种深度感可以增加用户的理解和乐趣。

2. 视觉张力

不仅如此，样式上富有视觉张力。或扩张、或收缩、或吸引、或排斥之感觉，呈现刺激与震撼。举两个例子：

A13芯片的扩张力

扩张力：整个画面以 A13芯片 为视觉中心点，元素和布局围绕这个视觉中心点向外扩张。采用发散式的视觉引导，视觉张力就出现了，让人感觉巍峨壮观。

Pro级摄像头的排斥力

排斥力：通过元素的大小对比，可以形成一定强度的视觉排斥力。Pro级摄像头 辅以大特写，传达空间意识。视觉上被其构图、美感触动。

四、高级感

再聊聊苹果的高级感是怎么来的？

1. 视觉降噪

我们都知道，高饱和度的色彩，会影响人的情绪波动。相反，低饱和度的配色，对人眼的刺激较弱，会有一种冷静且克制的高级感。

iMac Pro 高级感

回过头来看苹果官网的大部分页面，除了产品界面色彩 和 按钮蓝 之外，其他的文字、背景、控件一律采用黑白灰色系，以此营造高级感。

甚至是 iPhone 11 Pro 新出的暗夜绿，也是高级灰中加了一点点绿而已。

换言之，减少使用颜色的数量，降低色彩的饱和度都能削减色彩对人的情绪，起到提升产品高级感的效果。

iPad 留白

除此之外，恰当的留白可以更加突出产品内容，让重要的信息更准确的传达。并且能营造出广阔的空间感，让画面得到延伸，呈现一种意境美。

所以我们做设计时应当多做减法，避免无意义的视觉元素堆砌，反而能让你的设计更有高级的气质。

这又印证了现代主义建筑大师密斯·凡德罗的那句话：Less Is More。

2. 配图

当然，只有留白是不够的。既然是做宣传，那么一份高分辨率、精致的配图就显得尤为重要。

苹果官网大部分的产品都是采用实拍+后期修图，而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果，这一点能看到苹果对于品质的追求。

Designed by Apple in California

不仅如此，苹果产品圣经《Designed by Apple in California》，以及壁纸同样是由摄影师拍摄完成。有兴趣的同学可以看下面这个幕后制作视频，相当硬核。

3. 苹果式文案

做过英文 Web 的设计师都知道，英文往往比中文更好设计，相同的布局英文出来的效果也更好看。

这不是崇洋媚外，心理学有个词叫做「母语羞涩」。简单来说就是，中文对于我们来说，太常见了会让人产生一种廉价感（实际上是羞涩感）的心理感受。

老外也一样，你可以看到美国企业：苹果、麦当劳、星巴克都是使用图形 Logo，而日本企业不用母语，而是用英文，比如 SONY、TOYOTA、Canon。

你的下一台电脑，何必是电脑。

回到苹果官网，我们看到一部分文案是英文产品名称，这个不会感觉羞涩。

那中文部分怎么办呢？比较有意思的是，Apple 的本土化团队用了完全不对仗但押韵、奇怪的排比、双关、重复等修辞手法。虽然语感很差，但基本上能明白字面意思。

其实这样做的目的就是为了创造一种陌生感、一种独特的语言风格，来凸品牌气质。举几个例子：

• 重复：比如说 iPad Pro「你的下一台电脑，何必是电脑。」
• 双关：比如说 AppleWatch 的「它会时时关心你的心。」
• 排比：比如说 iMac的「从极速，到神速，任你提速。」
• 押韵：比如说 配件 的「可重复充电，又可圈可点。」
• 对比：比如说 iPad mini 的「身量小，能量大。」

4. 仪式感

最后一点。生活要有仪式感，苹果官网也有仪式感。

国际妇女节专题

在一些特殊的日子里，例如三八节当天，友商选择打广告促销。而苹果推出了国际妇女节专题，致敬女性的伟大，这一做法颇具人文情怀。

不过话又说回来，感动归感动，还是参与友商的打折活动香。

#相关阅读#

Apple 的设计哲学：交互篇

Apple 的设计哲学：UI 篇

Apple 的设计哲学：声音篇

文章来源：人人都是产品经理           作者：阿洋

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

今天为大家带来的文章是「地图标签」设计。很多App会内嵌地图功能，这些地图的功能相对简单，更多是起到查看和引导的作用，但在产品中又不可或缺～

除了常见的地图类App，还有其他很多产品会根据使用需求嵌入地图功能，通过在地图页中添加引导性的交互标签，让用户了解所处的位置或者导航路线。

如何保持地图页面与产品风格统一，同时又方便用户使用呢？通过系统化的方法可以快速实现地图组件的选择和归类。

地图组件的四种类型

1. 图标

地图上只标记图标，这种呈现方式能地显示地图上的信息，减少内容遮挡，也是在设计中首先要考虑的类型。

2. 文本

如果地图上标记的内容没有合适的图标能展示出来，可以直接利用文本来描述。

3. 图标和文本

随着地图的放大缩小，气泡信息的详细程度也会发生变化。地图放大时将图标和文本相结合可以显示更多的信息，而缩小时只显示图标。

4. 图标、文本和注释

图标，文本和注释相结合的形式虽然能显示更多的信息但是需要谨慎使用，因为气泡的尺寸太大会遮挡地图的内容，反而影响使用。

只有当气泡内容能显著提升用户体验时，才使用这种类型。

地图组件的视觉样式

大多数场景中，地图组件的底部会有一个突出的箭头，用来标记确切的信息或地址。

考虑到后期开发的难度，箭头的位置应始终位于组件的中间。另外如果一个页面中有多个地图组件，可以将箭头调整到顶部，防止发生重叠。

1. 颜色

组件的颜色比较灵活，默认情况下是白色，但可以通过改变背景色来匹配品牌色。

颜色通常出现在图标后面用来强调信息，如果没有图标可以把整个气泡组件都填充上颜色。

根据背景色的不同，文本和图标尽可能使用黑色或白色，减少对内容的干扰。

2. 状态

地图气泡尺寸的大小根据点击需求确定。白色轮廓加上胶囊形状让用户能够快速识别出可点击的对象，选定后气泡颜色会反转。

3. 内容缩放

组件基于地图缩放级别和缩放速度展示不一样的动画效果。

组件可用性指南

如何判断设计出来的组件是否适合用户使用？组件需要怎样设计才能适用于不同的使用场景中，有没有统一的规范？

1. 组件状态

面对不同场景中的组件，提供多种状态：重叠、可见、收缩、聚类、分离。

2. 密度

地图中至少要保持40%的内容是始终可见的，这样用户可以明确位置信息，防止产生误操作行为。

利用聚类功能将相邻的气泡组件合并在一起，通过数字显示包含的内容，这种形式利于用户理解和操作。

3. 易读性

易读性在地图中很重要，例如用户手持使用手机时组件中的字体为15pt，当用户驾驶导航时组件的字体会变为24pt。

另外还要考虑语言的选择对组件的影响，最好避免在气泡组件中使用长串字符，以防止地图中的信息被遮挡。

如果必须要显示长串字符，需要把气泡组件的尺寸水平拉长至地图尺寸的75%，然后换行且最多只能显示两行文本。

总结：点击即导航

在开始设计地图UI界面之前，有必要花费时间了解地图组件的样式、类型和可用性指南。

通过这些信息可以帮助设计师更快地确定方向，从而设计出清晰美观的地图界面。

文章来源：优设    作者：Clip设计夹

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

Part 1. 地图的发展

地图作为记录地形传递路线信息的载体，在人类文明中一直扮演着重要的角色。其承载形式一直紧跟着时代技术的发展而变化，从石板、动物皮革，到丝绸、纸张。当互联网走进千家万户，地图也步入电子化时代。

相较于纸质地图，电子地图优势显著：更新速度快、获取信息效率高、更清晰、可交互等。电子地图（后文简称地图）的出现也影响着人们的出行方式，尤其当智能手机普及，我们可以随时查询地点、发起导航，再也不需要提前记下高速出口和转向路口了。

Part 2. 地图在滴滴的重要性

滴滴拥有网约车、代驾、骑行、公交、自驾导航等众多业务，是一站式出行平台。而地图作为承载出行服务的重要载体，横向支撑着各业务线的发展。以网约车业务为例，调研结果显示绝大部分乘客都会关注并使用地图。

随着各业务线对体验的要求不断提升，单一的地图模式已经不能满足业务诉求及用户需求，需要进一步细分场景、精细刻画地图样式，于是地图的设计也变得愈发重要。

Part 3. 解构地图

地图承载的信息种类复杂、数量巨大，初期可能会找不到设计切入点。我们可以先了解下它的定义和实现方式，或许就能从中找到答案。

定义：地图是依据一定的数学法则，采用地图语言，经过制图综合来表示地球表面的图形。

实现流程：

• 采集真实世界的地点信息，经过编译转化成数据
• 数据信息中包含了地点的坐标、分类、名称等
• 数据经过渲染形成可视化雏形地图
• 雏形地图经过设计最终变成策略完整、视觉美观的电子地图。

结合“从雏形到完整地图”这一步流程的实现方式，进而可将地图拆分为基础层、策略层和感官层。帮助各职能角色找到对应切入点。

• 基础层，指的是地图的数据和能力。数据大家已经有所了解了，能力指的是引擎渲染能力、定位能力、图像识别能力等。有了数据及各类能力作为基础，才能设计出信息精准、交互明确的地图。
• 策略层，则指的是如何使用这些基础数据和能力。地图数据量非常庞大，无法全部展示，需要结合不同的场景及用户需求，有重点的呈现。
• 感官层，便是我们给数据穿上的衣服，会根据品牌调性、对应场景诉求等去设计最终的配色、图标等。

解构地图后，我们不难看出，感官层是设计侧需要关注的重点层级。

Part 4. 地图设计原则

1. 元素分类

面对如此复杂的地图信息，为了梳理出清晰的思路，我们会对地图元素进行分类：根据数据的类别和呈现状态，可拆分为点、线、面三类元素。

• 点元素：地名、POI*等。数量庞大，是城市规模的体现，尤其POI信息，它是地图中颗粒度最细的位置信息。
• 线元素：道路、地铁线、水系线、铁路线、航线、边界线等。线元素呈现了道路的走向、区域的划分等，描绘出了城市的样貌。
• 面元素：陆地、草地、湖泊海洋、AOI*。面元素以色块形式出现，很大程度上决定了一张地图的色调。

名词解释：POI, Point of Information的缩写，即“信息点”。一个POI可以是一栋房子、一个商铺。

名词解释：AOI, Area of Interest的缩写，即“信息面”。指的是区域状的地理实体，如医院、小区等。

2. 核心设计原则

从定义可以看出，地图是一种特殊的图形语言，是以上所有元素的集合体。相比我们所了解的UI设计、运营设计，地图有属于自己的设计原则。以下为大家总结了一些核心的原则：

符合制图学和公众认知

地图发展到现在已经成为了一门学科，我们会发现即使语言不通，拿到一张地图时也能看懂，这是因为有制图学和公众认知在规范着地图设计。如地图默认北向上、草地水系基本遵循物理世界的颜色、省界线是实线、停车场图标大多用P来代表等等。符合制图学和公众认知，大大降低了用户的学习成本和记忆负担，使地图可以作为一种世界通用语言流通起来。

保证识别度

地图属于信息类工具，其上出现的元素均需清晰可识别，保证可读性是最基本的设计原则。所以在设计时会限制颜色对比度、最小字号等，而具体规则会根据场景确定。

清晰有层次

地图的层次清晰包含了两个方面：信息主次清晰，视觉具有整体性。

信息主次清晰，地图信息庞杂，没有主次关系会影响用户的读图效率。在设计时需要考虑元素本身的特点、重要性，可通过颜色、icon/文字大小、线形宽窄等表达。做到同类元素有关联性，不同元素有差异性。同时，信息主次也会根据比例尺的变化有所调整。

视觉具有整体性，在滴滴的业务场景中，地图通常作为最底层组件出现，上层还会有很多业务组件。因此在设计时需克制用色，既要保证地图中各元素之间的区隔度，又要保证地图整体与其他业务组件拉开视觉层级。这样才能更好的突出当前业务模块的重点，提升整体的使用效率和体验。

细分地图模式

地图在各业务模块中应用广泛，用户需求也不尽相同，设计时需要根据使用场景区分不同模式。以网约车场景为例，业务信息始终处于上层，地图用来帮助用户定位、快速发单。因此，网约车场景的地图整体性强、色调偏冷、视觉层级后退，能更好的搭配网约车模块的整体设计，保证用户的操作效率。

具有品牌特性

品牌调性一直是滴滴设计层面非常关注的原则，品牌基因贯穿了所有产品，始终具有独特的视觉风格。遵循品牌的视觉语言，使地图可以更好的融合到产品中，保证了设计的统一性。

文章来源：优设    作者：CDX创意设计中心

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

一、导航的定义

牛津词典上有对Navigation一词在互联网领域的解释：

the way that you move around a website or the Internet when you are looking for information

翻译为：你在浏览网页时四处移动寻找信息的方式

也就是说用户看到的，影响其寻找信息的因素都可视为导航。

二、为什么需要导航

交互上：

用户在使用传统方式阅读时，所处的空间是单向的，只能向前或向后翻页；

而在网页领域，所有的内容都存放在各自的URL里，信息在多维度多空间里相互交错，各有联系，可跳跃的阅读方式让用户很容易失去位置感。

试想一下我们在大型商场里晕头转向的场景，会常常抱怨其导视系统的糟糕，网站有过之而无不及。

业务上：

从潜在用户想要了解某个产品时，导航就开始起作用了

影响点击量：网站排名高低，搜索带来的点击量

影响转化：网站的易用性，访问者转化为潜在客户和客户的概率

设计者创造易用的表单，展示有用的信息，建立流畅的交互，这些都要靠导航来引导用户达到。

三、从信息构建模式给导航分类

1.内容

内容涉及到的东西很多，内容之间的相互关系也不确定，因此不同内容导航需要不同的导航模式

1）种类

不同行业，不同业务重点对内容的分类方式不同

种类可以是符合大众认知，具有并列关系的信息，

也可以是按照设计者的意图创造出的种类，并区分其优先级

种类导航的出现无形中建立了用户心中对某类产品的预期信息架构，使其在浏览信息时更有方向性，例如在浏览一家服装店铺时，用户在进入导航列表前就对种类有了预期，诸如男士上装，男士下装，女士上装、女士下装、配饰，包袋等。

2）字母

以字母顺序排列信息。适用于信息量超大，且不存在主次、重要级关系的内容。常见于联系人列表，地区导航，介绍人名，合作伙伴等场景。

3）自然属性

以时间，地理位置等属性组织信息架构。

时间：展示在一段时间内发生的事情，以时间为导航可以直观地感受到信息的变迁，立体感更强。例如一个企业的发展历史

地理位置：展示在不同地理位置的事件信息，空间感更强

2.层级

也叫做结构导航，根据信息的上下级关系、主体信息架构等因素将信息有序排列。分为全局导航和局部导航。

全局导航往往指页眉和页脚，存在于网站的大部分页面，便于用户随时跳转。 

页眉：用户进入网站关注到的点，将网站进行功能分类后，将导航文字放置在页眉上

页脚：此空间是为隐私和法律链接保留的，还会加上联系方式，也有许多内容繁重的网站会把站点地图放置在页脚。

雅各布·尼尔森把全局导航在网站中的作用形象地比喻为机舱座位下的救生衣 ，你只要知道它哪 ，而不必时时关注它，需要时立即找到穿上即可。

局部导航是是更深层级的导航，不作用于全局，存在于特定的功能区，可分布在页面各部分。

3.功能

业务上必要的一些功能入口，通常贯穿全局，例如很多网站的个人信息，用户需要在大部分时刻都可直接接触到该功能。根据用户的心理模型，这类功能会存在于页面的右上角。

4.搜索

用户使用较多，也是最重要的导航方式之一。当带有明确的目的性或无法通过内容，层级导航找到想要的信息时，用户会在搜索框内尝试输入一些信息。

而让用户主动搜索会出现下面的情况：用户无法清晰表达或错误地表达其想要搜索的内容，导致系统无法匹配上对应的信息，

为了让搜索导航更有效地发挥其作用，出现了自动填充，模糊搜索，推荐搜索，搜索历史，搜索纠正等一系列导航功能，这些功能都是为了想办法将用户引导到他可能需要的页面上。

5.网站地图

以类似地图的样式来展示网站页面之间的层级关系，并提供相应的链接。可视性强，便于用户找到想要的信息。

四、导航的常见样式

1.文字与图标

考虑到排版布局，样式美观，除了用文字本身的含义用作导航外，图标也经常被用作导航，分为纯图标导航和文字+图标导航，这里图标的风格会很大程度上影响这个页面的视觉效果

2.横向导航

将导航文字横向有序地排列，独立性强，占用空间较少，可放置的导航条目有限，但这个局限性也可以成为优点，它要求设计师创造出简短，易于理解，且满足业务需求的标题。

当内容过多时会选择在单个导航下放置下拉显示二级导航，下拉显示的二级导航可以很长或采用滚动显示的方式，这种临时的模态导航可以最大限度地利用到屏幕空间。

很多网页的横向页眉导航会保持滑动时固定的样式，便于用户时时找到主页面的入口。

3.竖向导航

占用空间较多，通常放置在页面左边位置，用不同的底色或分割线将其与主内容分开，内容文字一般采用左对齐，便于阅读，导航层级过多时会采用点击展开的样式，上下滚动的常用交互也让竖向导航容纳的内容更多。

部分竖向导航是可隐藏或收缩的

4.混合导航

在拥有复杂信息的网页中，会将横向导航，竖向导航等其他样式混合使用，

5.面包屑

面包屑导航是位于页面顶部或底部的一行内部链接，在不同层级的链接之间用“>”分隔，可让访问者快速返回上一版块或根网页。许多面包屑导航都将内容最宽泛的页面（通常为根网页）设置为最左边的首个链接，并在右侧列出更具体的部分。

占用很少的空间并提供主导航实现不了的深层次定位功能。

面包屑的使用让网站的结构更加清晰，强化用户的心理层级模型，并实现跨层级跳跃

6.分页与无限滚动

分页显示的内容数量固定，有时用户可自定义内容数量，此外页面上通常有当前页，任意页，上一页，下一页，首页，末页的链接。具有定位性，当用户需要回到之前浏览过的某个位置时，可采用分页的形式

无限滚动希望用户只注意当前页的内容且不能快速到达页面的底部，适用于无法预测用户何时能够找到需要的信息的情况。在一些图片展示，内容推送的网站上设计者不知道用户想要的内容，同时也要展现网站内容丰富，资源库深不见底的特质会采用交互上更简单的无限滚动模式。

7.突出的版式

一些设计者想要用户优先注意到的内容，会采用突出的版面设计，通过改变文字图形的大小，颜色等与其他一般性内容形成对比或使用海报，弹窗等形式试图引导用户行为。

五、导航设计的建议

根据上面第三和第四点，分别从信息层和表现层给出导航设计的建议

信息层

1.信息结构尽可能扁平

多花一些时间去考虑信息体系结构，可根据首页规划全局的导航，首页是用户在网站中导航的起点，考虑如何让用户尽可能方便地从网站上的宽泛内容（首页）转到他们所需的更加具体的内容。

2.重视导航的顺序

当同一级别的导航数量很多时，顺序变的更加重要。根据用户的认知习惯，开头和结尾作为关注度（看到的）和保留度最高（刚刚发生的）的地方，其内容更加突出。

3.SEO优化

良好的网站导航结构可以帮助搜索引擎了解哪些是网站站长认为重要的内容，尽量用一些具体的描述词语而非大而宽泛的词汇，例如“产品”，“服务”。虽然搜索引擎的搜索结果是在页面级别提供的，但它也希望了解页面在网站这个更大层面上的角色。导航中关键词的使用会影响其在搜索引擎中被搜到的质量。

4.创建网站地图

用于显示网站结构的一个简单页面，通常包含网站页面的分层列表。如果在网站上查找页面时遇到问题，用户可能会访问此页面。此外搜索引擎也会访问此页面，以便使抓取范围尽量覆盖网站的全部页面。

表现层

1.一致性

同一类型导航的视觉表现与交互操作在整个网站页面中要保持一致，清晰一致的导航可以让用户预见每一步操作的结果。

2.清晰性

颜色与大小：文字颜色与背景颜色的对比，标题与内容的字号大小，这些最基本的元素直接影响导航的清晰度

留白与装饰：与平面设计中原理一样，留白让网站页面布局平衡，张弛有度；装饰与留白相结合，让导航表现得更精美，也有助于视觉分割

强调与弱化：有些导航起引导作用需要突出，有些起辅助作用需要弱化，强弱对比结合丰富了视觉层次，并让导航起到它该起的作用

3.凸显超链接

将可点击的超链接文本与常规文字在样式和交互上进行区分，常见做法有下划线，文字颜色，加粗，鼠标悬浮变色。

4.在常规位置放置导航

网页发展的几十年让用户对网页产生了一些常识性认识，例如用户会在进入一个网站时去页眉或侧边栏寻找主导航，尽量遵循这些常规用法。

5.导航数量不宜过多

无论是全局或局部导航，数目越多用户处理和记住信息的难度越大，可以通过分组分层来提高信息浏览效率

6.侧边栏

侧边栏导航会占据一部分的屏幕空间，将其与主内容部分进行分割有助于用户，例如用反差较大的背景色形成导航区与内容区

加入导航收缩功能，以便更好地利用屏幕空间，特别是在一些小尺寸屏幕上。

六、导航设计审查：

在做完网页设计后可以根据浏览网页的一般习惯，通过以下几个方面对导航设计进行简单审查

问自己以及团队其他成员以下几个问题

1.这是什么网站

2.网站有哪些主要内容

3.导航看上去是否像是导航，可点击的

4.导航的名称是否会引起歧义

5.现在处在网站的哪个层级

6.如何进退

7.具体的功能是否会在预想的地方出现

8.怎么进行内容搜索

借助工具

9.使用Google Analytics对网站的访问情况进行回顾并进行一些评估

例如一些页面的浏览量极低于预期或相较于同类页面浏览差距过大，就要考虑是否是指向该页面的导航出现了问题。

总结

导航的最终目的是简化获取信息的过程，具体以何种方式表达还需要取决于业务内容，但总体上要以用户易接受的方式呈现。用户若是能在获取信息的过程中按照设计者所想的方式前进并感受到畅通无阻的快感，导航便是成功的。

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