习惯性的去应用一些所谓的最好的设计模式，可能会让你觉得Google，Facebook，Instagram或者说其他的一些你最喜欢的APP总是做的非常棒，你会觉得，他们的设计目标和你自己的设计目标并没啥差别，但是，人家成功了，而你的作品却失败了。所以，这里推荐一些被公认为是(至少曾经被公认为)最好的设计模式，可能在你第一次看来，这些设计模式也就那样。
1、隐藏导航
关于汉堡图标，已经有不下于50万的文章来争论它了。如果你一篇都未曾读过，试着去读一两篇吧。其实，简单说来，这些文章讨论的主题更主要的是这个图标里所隐含的那些导航，而不是这个图标自身。
上面图片这样的设计对于设计师来说其实是很有吸引力的，而且简直太方便了。根本不用担心屏幕大小的限制，只需要这样一个图标，然后，把所有的导航全部塞进这个可以上下滚动的东西里，然后，让他默认隐藏。就这样，就这么简单。
但是，实验证明，与完全隐藏导航相比，适当的展示出一些导航能够更多的增加用户的依赖度和满意程度，甚至为你带来更多的收入。所以说，现在的好多大公司的播放器都抛弃了以前的汉堡图标，将最常用的一些导航一直显示给了用户。
如果说你的导航比较复杂，那么，请在考虑优先级的基础上适当地隐藏导航。
2、图标，随处可见的图标
由于移动端的屏幕大小限制，许多无脑的设计师为了节省空间，在任何只要能够使用图标替换的文本域，都使用了图标。大家都这样想，象形文字或者图标占的空间又少，不需要额外的转换，而且，人们都很熟悉这些图标，难道不是这样吗？所以，每一个APP都这样做了。
设计师们将上面的那种假设放在脑海里，于是，有的时候，他们将实用性的功能蕴含在了图标里面，但事实上，那个图标是难以识别的。比如，你能猜到在下图的Instagram里的这个图标点击之后能够发送什么信息吗？
或者说，假如你从来没用过谷歌翻译，那么，你会期待下图的这个图标实现什么样的功能呢？
你总是假设你的用户们非常熟悉那些抽象的图标，或者说，你总以为用户们会花大量的时间去研究和学习你的这个图标的含义。这是一个很普遍性的错误，很多设计师都会犯这个错误。
Bloom.fm上让人觉得迷糊的标签栏
如果说你曾经设计过一个需要一个弹出框来解释从而提高可用性的图标，那么，即使你的用户们会不管怎么样都能了解它，你的这个做法也是错误的。
当然，并不是说你在设计中就一点都不使用图标。你的用户们熟悉大量的图标，这些图标中，有很大一部分都是能够代表普通的功能的，比如搜索，播放视频，邮件，设置等等。(但是，用户们可能不会很确定当他们点击一个心形图标的时候，会发生什么。)
一些能够被大多数用户所识别的图标并且被认为是通用的
对于复杂的和抽象的图标，在显示的时候，应该总是在旁边加上一个文本来进行说明。这样，你的图标才是真正有用的。同时，还能够提高菜单的可发现性，也能够为你的APP添加漂亮的触感和个性。
Pixelmator的导航
对于基本的功能，可以使用图标来展现；但是，对于复杂的功能，就需要使用文本来说明了。(如果你要使用图标的话，要时常性的做可用性测试)
3、基于手势的导航操作
当苹果公司在2007年发布了iPhone的时候，多指触控技术就成为了人们关注的主流技术，用户们发现他们不仅可以在屏幕上进行点击，还可以进行放大，缩小和左右轻扫。
手势在设计们的圈子中流行了起来，许多的APP都围绕着手势操作来进行设计。
Clear里的手势操作
就像隐藏的导航栏和使用图标代替文本一样，手势看起来似乎能够为设计师节约一些屏幕空间。(“屏幕上不应该有删除按钮的存在，人们只需要向左或者向右轻扫就可以进行删除了。我们会决定怎么操作的。”)
关于手势，你首先需要知道的是，手势是不可见的。人们需要记住它们，就像汉堡菜单的例子一样。如果你隐藏了一个选项，那么，用到那个选项的人就会越少。
另外，手势存在着与图标相同的问题：众所周知的手势有点击，放大，上下滚动，同时，每个APP也有那些需要慢慢发现和学习的手势。
不幸的是，触屏界面的设计仍然是一个新的领域，在各个APP中，大多数手势还不标准和统一。一个很简单的手势，比如左右轻扫，在各种各样的邮件APP中可能都会大相径庭。
在Apple的Mail APP中，向右轻扫，显示出了“标记为未读”的选项
同样的手势，在Mail Box中，就表示将邮件存档
或者说，想一想，摇晃你的手机，在两个APP中，也会有两种不同的含义。在iOS中表示撤销，在Google Maps中表示发送反馈信息。
永远都要记住，手势是隐藏的操作，人们不得不去记住它们。对于你的用户，这需要大量的努力。如果你是一个发起人，也许你可以让全世界的向右轻扫的含义都一样——但是，只有当它是你APP的概念设计里必不可少的一个部分的时候。
4、新手引导
新手引导，最近很火的一个话题，适用于用户第一次与APP打交道的时候。在很多情况下，这个简单的方式能够在一个透明的覆盖层上为用户展示一些标记来解释界面元素。
dcovery APP里的新手引导
为什么说这是一个很烂的解决方案呢？因为许多用户都会跳过你的介绍，他们想做的就是赶紧使用这个APP。即使他们注意到了你的这些标记，当他们把这个关掉的时候，这些所谓的教程也被他们忘得一干二净了(尤其是当屏幕上挤满了信息的时候)。最后说一句重要的，在你的屏幕上添加这些引导的标记，并不会提高APP的易用性，记住下面这句话：
原图翻译：用户界面就和讲笑话一样，如果这个笑话还需要解释才能明白的话，那么，这也不是一个好笑话。
对于你的用户来说，新手引导也许可以使用其他的方式来设计的更加有用。比如Slack这个APP，使用第一屏来创建一个用户场景。简单的介绍一下他们自己，着重于利益而不是屏幕上的功能。
留住你的第一批用户的一个更有效的方法就是逐步的引导。比如Duolingo，他没有向用户们解释这个APP是如何工作的，而是促使人们做一个指定语言的快速测试(甚至不需要登录)，因为用户们可以在做测试的过程中了解到这个APP是如何使用的。同时，这也是展示这个APP的价值的一个更有影响力的方法。
记得住左右轻扫的手势在Apple的Mail APP里和在MailBox里的不同吗？看看他们的逐步引导是如何做的：用户们在开始使用APP之前，必须在APP所提供的一个练习场景里尝试使用这个APP里的每一个手势。
在你准备在一个半透明的覆盖层上设计你的引导标记的时候，停下来好好想想第一次使用你的APP的用户会有写什么样的经历。关注一下使用环境，通常情况下，有更好的方法来欢迎你的用户们。
5、充满了创造力，但是并不直观的空白状态
很多没有经验的设计师很容易忽略APP的空白状态。但是，从一个APP的整体用户体验上来说，这是一个很重要的方面。
有的时候，设计师们把错误信息和空白状态的界面当作一块展示他们创造力的画布。
比如下面这张Google Photo的空白状态界面：
第一眼看去，简直太棒了不是吗？一个漂亮的矢量图加上完全符合设计规范的布局。
但是，再看一下，就会觉得有写奇怪的东西了：
・这块屏幕里什么收藏也没有，但为什么这里会有一个那么显眼的搜索按钮呢？难道是想让用户在什么都没有的界面里搜索什么？
・第二个很显眼的元素就是这个矢量图，很明显不可以点击(虽说会有很多人去尝试点击)。
・屏幕上的提示说，我应该找到在顶部的那个超级不起眼的“＋”标志。为什么这个提示自己不包含一个添加按钮呢？就像是在说“点击继续按钮来继续”
总而言之，上面这个空白屏幕没有能够帮助用户理解用户所在的这个环境：
・什么是收藏？他们为什么有用呢？
・为什么我什么都没有呢？
・我可以做些什么吗？(我应该做什么？)
当需要创造力时，越少有时会越有用。下面这个空白状态屏在可用性上就做的十分完美。(先让我们忽略那个“现在就点击下面这歌按钮吧”的引导提示)
在Lootsy里的空白状态屏
记住，空白状态(类似于网页里的404页面)并不只是美感和品牌特色。在可用性上，他们更为重要。要让空白状态更为直观。
多问多想
不要说我是错的：设计模式和最佳的实践仍然是你的好伙伴。但是要知道，APP和用户是不一样的：在一个APP里能够适用的方案，在你自己的APP里，也许就一点不适用。这不是一个通用方案就能解决的事情。另外，你永远不可能知道为什么一个APP会以某种方式来设计。
自己要多想想，多设计，多研究。
文章来源：站酷 作者：郑小小壮
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、
cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
从今起，读书便记录，记录便整理。希读书能够带来知识，强壮你我。那，先从《交互设计指南》开始。
网上关于信息架构的知识内容参差不齐,在学习与探究的过程中查阅了很多资料，反复修改多次，尽量用直白的语言结合实例来阐述信息架构。目录如下：
这篇文章的起源，来源于最近看到的话题“B端设计师会被组件库取代吗？”。从表面上看，在组件库越来越完善的时代，很多页面设计依靠组件库就能够快速搭建。
那么在这种情况下，B端设计师存在的意义和价值到底体现在哪里呢？其实B端设计的重点并不在页面的视觉上，视觉只是作为设计师最终输出成果的一小部分。个人认为B端设计师工作重心体现在做「正确的设计」，比如以下几个方面：
1.这个设计能否完成对应的商业目标和产品目标；
2.我们的信息呈现是否合理以及能否解决当前需求；
3.用户能否在页面上快速找到想要的信息；
而想要弄清楚并解决上述这些问题，在众多的话题阐述之下，我发现其论述本质上都逃离不了「信息架构」这个概念。因此我认为设计师都需要对这个概念有充分的认知，这能够帮助我们做出正确且出色的设计。
关于信息架构的概念，在百科上面的定义大部分都比较晦涩难懂，比如维基百科和百度百科的解释：
相信大部分人都很难明白其中描述的意思。在这里换种思路，将信息架构拆分为信息与架构去理解。
信息指的是内容的载体，常见的文字、图像等都是信息；架构的含义则形容对应的组织和结构。那么信息架构就是将信息通过一定的形式组织起来，然后呈现出来。其本质就是研究信息的表达与传递。
通俗点讲，信息架构就是让用户可以更容易的理解我们的产品，让用户在使用我们的产品时可以更顺利、更自然。因此信息架构没有一个具体的呈现形式，它更多的是体现在产品设计的各方面。具体主要表现为组织系统、标签系统、导航系统和搜索系统。
为什么需要信息架构？我们都知道B端产品设计的核心是「降本提效」，在设计这一侧的可以将其理解为降低认知成本，提升使用效率。
降低认知成本需要我们更好的表达信息，让用户能看明白我们的产品能够做什么，如何用；提升使用效率需要提升信息的传递效率，让用户能够很容易的找到需要的功能；
而信息架构从本质上来讲也正是研究信息的表达和传递。因此我们需要通过它来帮助我们更好的完成B端产品设计。如果没有信息架构来作底层支撑，那么我们在页面上看到的可能就只有功能的堆叠，让产品陷入难以上手或者不知道怎么用的尴尬境地。
一个强大信息架构是产品质量的保证，是作为设计支撑点的骨架，它会减少可用性问题，提升整体导航行，创造对用户友好的体验。比如举一个工具层面的例子：
PS的工具栏堆叠在界面各个部分，而Figma的工具栏则集中在右侧且只出现当前需要的功能。很明显Figma在信息架构中的信息组织部分做得更为友好，PS则会显得逊色一些。这也是我们在学习PS的时候会显得比较吃力的原因之一。
可以说良好的信息架构是高效用户体验的基础。视觉元素，功能，交互和导航都是在信息架构的基础上构建的。因此想要做出体验好且合理的页面设计，我们就需要参与到信息架构这个过程中来，和产品一起完成对应架构的梳理。而不是只完成从原型到页面这个部分。
如果想要搭建一个好的建筑，我们需要知道其建造的目的，是按照什么样的结构搭建，内部有哪些系统，以及最后呈现的模样。
那么信息架构也同理，我们首先需要知道信息是为了什么目标服务，然后我们通过怎样的结构来组织这些信息，以及过程中会用到的信息元素，最后如何呈现它们。这都是我们在搭建信息架构中需要进行的必要步骤。如果某些环节没有做好或者没有了解透彻，那么在输出信息架构时往往会出现方向或者策略上的问题。接下来我们看看这些步骤是如何具体呈现的。
B端行业对于业务理解的要求是比较高的，只有在理解业务的基础上，将业务需求转化为对应的设计目标，我们才能够输出合理的信息架构方案。
个人认为理解业务的基础，就是能够用一句话讲清楚当前设计的产品。这句话可以描述为：谁在什么地方想要完成什么目标。比如「用户想要不出门就能够吃到东西」，这就是外卖软件提供的产品服务。
虽然看上去这句话很简单，但其中包括了三个要素：用户、场景和目标。因此我们在分析和梳理业务的过程中首先要弄清楚的就是这三个要素。
用户永远是排在第一位的，也是我们首先需要弄清楚的。在B端设计中，本质上可以分为两类角色：客户和用户。比如我们常用的钉钉或企业微信，购买客户是企业，实际用户是员工。
对于企业：「我想要有一款软件可以更好的管理员工」
对于员工：「我想要这款软件能够更好地提高工作效率」
客户决定了我们产品的购买（部分情况下也兼顾使用），而用户则决定了后续产品的复购率。因此在业务理解中，我们需要弄清楚当前产品所处的服务阶段，比如初期为了打开市场肯定更倾向于客户，而中后期为了提高产品的使用体验又会偏向于用户。
因此我们首先需要弄清楚的就是当前产品是为哪些「目标用户」服务，这也就决定了我们在设计信息架构时对应的不同侧重点。
场景是指需求产生的某种条件，这个条件包括但不限于环境、时间、地点、空间等，只有上述条件满足，这个需求才能成立。这里可以把场景理解为产生该问题的原因。
比如当用户提出「她需要一件衣服」，那么我们就需要弄清楚用户为什么需要添加衣服，是她感冒了自身觉得冷还是因为外界环境冷。这两种场景涉及到的解决方案是完全不一样的。
在平日的工作中我们可以通过以下两种方式来更好的了解业务场景：
1.通过业务方文档进行业务背景的初步理解。业务文档中一般都会包括需求背景，我们可以通过文档进行初步了解。
2.通过业务沟通进一步加深业务背景的理解。由于很多B端业务离设计师本身的生活比较远。因此对于需求背景中不理解或者比较模糊的部分，我们可以通过与业务方或产品多次沟通来挖掘最底层的背景。
毕竟需求背景是理解业务的重要步骤，我们只有知道需求产生的原因，才能够针对性的给出解决方案。
目标决定了我们的产品最终的方向。我们首先接触到的一般都是业务目标，而我们要做的就是将业务目标转化为我们此次的设计目标。
A.业务目标
业务目标就是此次业务想要解决的实际问题，它通常是一个宏观上的描述。比如打车软件的业务目标简单概括来讲就是让用户能够更快速地打到车，减少等待焦虑。我们一般通过文档或者沟通来了解该目标。
B.设计目标
设计目标是我们基于业务目标而给出的设计策略，是一种更具体的实现方式。比如我们要让用户快速的打到车，那么这个时候我们的设计目标就是通过将用户位置和司机位置进行快速匹配，并通过超时补贴红包的方案来降低用户焦虑。从而实现业务目标。而这一过程涉及到的信息点就有：司机位置、乘客位置、等车时间、补贴金额等元素，并需要思考它们之间的关系和呈现方式。
可以发现从业务目标转化到设计目标这个过程，实际上就是在确定功能和信息点的过程。这样才能让我们更好地设计信息架构。
从前文可以看出我们会在整体设计过程中出现很多的信息元素。如果不经过对应的组织和处理，直接堆叠在一起，那么信息含义会比较乱且难以调用。比如下方：
而右侧图片信息的组织过程可以理解为通过将零散的数据信息进行分类，再以某种结构化的形式将它们重新组合排布的过程，直白一点就是先分类，再结构化呈现。我用一张图来表明这个过程：
那么这个过程中「信息组织」和「结构呈现」到底应该怎么做，也就是接下来要讲的组织方式和结构类型。
组织方式可以分为精确分类和模糊分类。精确分类就是我们会利用物体本身物理属性来进行分类，比如位置、字母表、时间、类别、层级等方式进行组织。一些工具类应用例如滴答清单内容信息都是按照时间来进行组织的：
而模糊分类则是按照更为主观的逻辑对信息进行分类, 如主题、任务、用户、隐喻等来进行归类，比如我们常用的APP商城是按照不同的主题类别来进行区分的。
但在很多时候，产品倾向于将两种组织方式结合起来形成复合型组织方式，从而能够使我们的整体组织形式更符合用户的使用习惯。比如蓝湖的信息组织，其中既包含了模糊分类（按使用类型等分类），也包含了精确分类（按上传文件时间等）。
其实在大部分B端产品中，大都按照模糊分类来进行处理，比如按照任务、流程等方式。而精确分类更多用于在页面内的局部信息模块，比如创建时间和文件大小等。
归根结底，我们分类方式的选择需要结合我们前面提到的用户、场景和目标，这样才能让我们的分类更具说服力。
当信息按照分类维度组织后，我们接下来就是把整体信息进行结构化，这样才可以将信息整体连接起来并呈现出来。一般分为以下四种组织方式：
A.层级结构（最重要的结构）
这是信息架构中最为常见的结构，也是比较符合用户认知的结构。有时也称为「树状结构」。以子父节点的形式一层一层延展。
层级结构的优势就在于可以承载复杂的多层级内容，通过层级递进的方式将复杂的多层级拆解得更简洁。
但我们需要把控好内容的广度和深度，广度指的是在层级结构中每一层的数目，最好控制在7个以内。如果广度太宽意味着每个页面会给用户展示太多的信息，增加寻找内容的负担。深度为纵向结构，建议一般3层，最多不超过5层。过深的层级会让用户点击很多次，且不容易被用户发现。比如飞书的基本信息架构也是主要以层级结构来进行的。
B.矩阵结构（多维度结构）
矩阵结构是各个节点都相互连接的一种信息架构方式，通俗来讲就是用户既可以通过多个维度去触达同一信息，也可以从单个维度连接多种信息。
这种结构其实就更类似于我们在做相关功能时：比如当你进入电影全屏时想要退出时，既可以通过点击按钮退出，还可以通过键盘的Esc返回到，通过多点触达同一操作。
又比如我们的联系人功能，我们既可以通过输入数字拨打电话，也可以查找联系人进行拨打，还可以查询电话记录进行回拨。
矩阵结构最重要的意义在于给用户提供多种路径，使用户能够在不同路径中寻找各自想要的东西。
C.自然结构（随机性）
自然结构不遵循任何一致的模式，节点都是被逐一连接起来的。
自然结构一般都具有随机性和不确定性。这种更倾向于泛娱乐化的C端应用。比如我们常见视频网站的在推荐流都是应用的自然结构。比如打开B站等视频平台，你很难猜到刚进入看到的是什么。
但一般自然结构不会单独存在，比如B站在自然结构中也绑定了层级结构来进行层级上的划分。
D.线性结构（单一性）
线性结构是非常单一的一个结构，整体是一层一层向下递进。比较强调先后顺序的一种结构。
这种结构通常用于我们常见的软件安装程序等，也可以用于部分功能结构，比如网站的视频发布，一般都是经过上传-编辑-发布这三个步骤来依次进行。
大家可以发现在进行信息架构时，我们在很多情况下可能会运用多种组织结构方式，我们需要根据对应的用户决策场景来考虑让最适合的几种方式相结合。但最终目的都是为了让用户能够更快速的获取信息。
在信息的组织过程中，我们需要注意用户的心智模型。比如当我们看到红点就知道有新信息通知，看到下拉箭头就知道可以展开。这是互联网产品在无形中给用户建立的底层习惯认知。用户目前对于普遍产品的一些基础布局、功能名称和交互逻辑都形成了一定的习惯，这都属于用户的心智模型的内容。
因此我们在组织信息时尽可能不要去打破用户常见的心智模型，否则必然会导致用户的不习惯。我们常见的「扫一扫」功能，微信、支付宝和QQ会隐藏在「+」号里面。而微博和抖音却分别放置在了「我的」和「搜索」里面。
这样会导致用户难以发现该功能。因为用户接触新的信息时，会以最初接触的局部信息为依据展开并形成初步认知，而用户认知中的信息组织逻辑和实际信息的吻合度越高, 他在进一步查看或寻找信息的过程中体验会更顺畅, 反之, 若一开始形成的认知与实际信息的差异过大, 在后期的信息搜寻过程中则容易遇到困难。而这个吻合程度其实就是用户心智模型。
虽然建议在一定程度上遵循用户心智，但并不是说绝对遵循。对于用户不熟知的场景或者某些专业术语，我们需要通过灵活有效的提示（比如标记注释等）来引导用户就可以了。比如我们刚才提出的抖音扫一扫，它的应用场景其实是用于抖音官网后台登录，且在后台登录时已经给出了对应提示，那么这样的设计也是合理的。
当经过上面的信息组织，其实我们已经能够归纳出一个大体的信息架构框架。但在信息组织之外，我们还需要关注以下三点：标签、导航和搜索。这对于信息架构的完整性也有非常重要的意义。
标签系统，通俗来讲就是要我们对当前整个系统信息节点的命名，从而让信息的呈现更容易识别。拿个最简单的例子来进行说明：
可以看到左侧和右侧关于卫生间的信息标示，可能左边你能一眼区分，右边可能就需要反应半天才能猜出到底代表什么含义了。
这其实就是关于我们的信息命名是否能够被大多数用户所接受的场景，也就是我们标签作用所起的作用。标签可以分为图片和文字标签，都需要考虑用户对该信息命名的认知程度，也就是前面提到的心智模型。那么如何能够更好的去定义标签名称呢，这里需要注意2个方面：
A.优先选用被行业广泛接受的词或图标
在进行标签定义的时候，尽量选择已经被用户所熟知的词语，比如「工作台」「通讯录」等已经被运用得非常熟练，对于类似功能就直接以该形式命名，比如我们的设计软件中，很多图标和功能名称都是通用的：
这样做能够很大程度减少用户的学习成本。因此在B端设计中我们也需要注意到我们所在的行业，哪些名词已经达成了共识，就无需再造新名词。
B.不确定的词语可以参考竞品或调研来决策
当某类功能或场景的标签难以确定时，我们就可以尝试去找一下竞品是否有类似功能，或者找该行业的领头羊（比如聊天工具的巨头微信），那么在进行标签定义的时候，可以参考它的命名体系。因为它已经替我们教育了一部分用户，会间接降低学习成本。
如果某些标签在上述过程中还是无法确定，那么我们结合自己经验或者与咨询业务相关人员来进行讨论，在必要时候可以在标签旁边添加注释来进一步说明。
导航系统其实应该是大家比较熟知的一个系统了。就像使用导航系统来规划行程一样，导航系统都会存在于每个网站中。比如我们常见的侧边导航、顶部导航等。
因为网上关于导航系统已经有很多资料的讲解了，在这里阐述下四类导航的含义：
1.全局导航：位于页面最上层的导航，用户几乎在页面的每个地方都可以看见，是最高层级的导航系统；
2.局部导航：位于最高导航的下级子类导航，子类导航并不是必须的导航，根据场景进行取舍；
3.情景式导航：通过点击文字链接进行跳转的导航，比如在个人资料里面植入其它网站的链接地址；
4.辅助导航：这里包括网站地图，网站索引，网站指南等辅助类型的导航。
辅助导航的网站指南包括新手引导和演示教程等。现阶段更巧妙的功能引导，是当用户在进行某些功能的操作时及时进行提示，这样不仅达到了为用户引导的效果，还减少了一连串的新手引导对于用户的打扰。比如figma在进行组件更新后，只有当你调用组件功能时，才会及时进行提醒。
搜索，是我们平日最常用的查找信息的功能，它能够帮助我们快速进行信息的检索。虽然搜索功能非常重要，但并不是每个系统每个页面都需要搜索。我们决策是否添加搜索时需要考虑下列三点：
1:内容复杂度：当前页面承载的内容复杂度如果较少，对于简单内容页面往往不需要搜索；
2:内容性质：当前页面的性质是偏向于用户浏览还是查找，根据用户行为来决定是否需要搜索；
3.搜索场景：如果搜索场景很简单，考虑是否只用筛选或分类就能够解决问题；反之如果搜索内容很复杂，我们还可以搜索结合筛选来更好的查找信息；
上述3点决定了我们是否需要考虑搜索功能。而关于搜索的其他细节点，比如搜索规则和搜索结果等，在这里不做进一步的阐述。在这篇文章中更重要的是弄清楚我们何时需要搜索功能。
我们通过上述方法已经知道如何梳理信息架构了，那么我们应该如何呈现它呢。这部分其实也是很多资料中比较模糊的点。
在学习的过程中，发现部分资料认为信息架构就是单纯的指思维导图，但实际上信息架构并不能单纯只用思维导图就能够完全表示。
因为信息架构包含了很多部分的内容。只能说思维导图可以是信息架构的一种表现形式，其可以帮助我们在思考阶段梳理整体产品的信息构成。
这里抛出一个很有意思的观点，那就是「功能结构图」和「信息架构图」到底什么关系，这里用两张图示例：
可以看到，功能结构图更多体现的形式是功能阐述，一般形式为名词+动词，比如头像设置；而信息架构图重点呈现的应该都为信息元素，一般为名词，比如头像图片。
但在大多数时候我们看到的产品架构图，其实更偏向于功能结构图和信息架构图的结合。因为在很多时候阐述信息构成时需要依赖功能进行辅助说明。
因此这篇文章讲述的信息架构更偏向于基于产品的整体架构。其实信息架构对于呈现形式并没有特别的限制，只要能够帮助你清晰表达产品整体结构就行。《信息架构：超越web设计》第4版中其实也并没有对表现形式这一块进行严苛的定义，其用「显示信息元素间的关系——站点地图」的说法概括了信息架构的呈现形式，其表达如下：
可以看到其表达形式包括思维导图和流程图等形式：思维导图的优势是能够总览全局信息，查看信息的深度和广度，而流程图的优势则更能够表达整体的逻辑关系。
因此信息架构的呈现需要根据你的产品场景选择合适的视觉框架表达。不必让形式限制了我们的发挥，而是应该形式追随于我们的架构表达。其只是一个信息梳理结构的说明结果（类似于中间态），我们需要借助它来更好的阐述思路与沟通想法。
在输出信息架构之后，其实这里想聊一聊页面的呈现。因为当梳理好大的框架后，剩余的页面细节其实都需要通过原型图来进行体现。这个过程是从框架到页面的阶段，其实对于设计师来说也是很重要的部分。在这里根据自己的理解列出了以下几方面的注意点：
A.页面能够让用户看懂
这其实就是涉及到我们的信息组织和标签系统。如果当我们的某个页面不能让用户第一时间获取到该页面表达的信息，反思一下是在哪个方面做得不好。是标签系统含义模糊呢，还是信息的组织分类方式不对。从页面呈现倒推信息架构。
综合来说就是设计时的排列要考虑用户的心智模型（比如网页的常规排版和通用名词定义等），对于某些难以理解的地方给予用户帮助和解释。虽然B端产品想要完全避免学习成本是不可能的，但我们可以尽量减少其学习成本。
B.考虑用户的视觉动线
当我们在进行信息排列时，这时需要思考的就是用户的视觉动线，也就是我们常说的视觉浏览「F模型」和「Z模型」。对于不同的信息流来说，采用不同的动线模型能够让用户更好地查找信息。
F模型和Z模型的使用区分其实就是在使用场景上，对于内容页面来说F模型会更为合适（比如文章或者搜索结果），适合文本类的内容。但对于非文本的页面，则更适合用Z模型，Z型模式的设计跟踪了人眼扫描页面时的路线——从左到右，从上到下，能够更好引导用户的视线。
C.掌控好适度的信息层级
B端由于在视觉的发挥空间不多，那么相对来说保持良好的信息层级能够让整体的体验变得更为良好。
不管是原型图还是视觉，整体的视觉层级要体现得更为清晰。按理说最好的视觉层级控制在三级左右。如果发现视觉层级过多，需要考虑是不是因为信息架构设计时纵向层级过深，通过调整架构的形式来更好的呈现信息。以及对同页面的信息进行重要程度分级。
当我们做完或者听别人阐述对应的信息架构时，该如何评判呢，到底怎样的信息架构才算优秀呢。个人认为可以从3方面去进行判断：
业务层：
1.设计目标合理：能平衡商业目标和用户的目标，保证客户和用户都有较为良好的体验；
2.核心任务目标：能够让用户顺利完成产品的核心任务，需要通过用户测试来进行验证
结构层：
1.平衡广度和深度：在进行功能使用时不会隐藏的太深而找不到，是否有冗余步骤
2.保证拓展性：当前信息架构在面对未来新增或者删减信息时能够稳定拓展
体验层：
1.保证易读性：用户不经过介绍，通过页面信息呈现能够看懂该产品是用来做什么的
2.保证易查找性：用户在需要某个功能时能否快捷的找到，是否有多种查找方法（比如搜索或筛选）
合理的信息架构需要具备以上条件，我们需要在做设计呈现时也尽量保证以上条件。但在很多情况下其实并不能完全满足，这个时候我们需要根据业务目标的重要性来选择某些点进行满足。
梳理一下整体文章的架构，其实是按照「是什么-为什么-怎么做」的形式来进行拆分的：
这篇文章想要表达的观点，不是让设计师独立去梳理整体信息架构，而是让设计师拥有信息架构意识，了解其是如何进行并产生的。这样你在看到整体架构时，有足够的理论支撑去判断它的好坏，并通过自己的理论认知去理解和改进不好的地方。
当我们对信息架构有足够的认知时，我们在设计页面时才能有合理的思考方向，做出「正确的设计」，避免成为无情的作图机器。信息架构作为产品交互视觉最底层的支撑，只有骨架搭好，对于用户的使用体验才能够有本质上的提升。
注：文章中不可避免会存在不足之处，如果对文章中内容有更好建议，欢迎随时交流。
参考资料：
《web信息架构》第四版
《信息焦虑》
《用户体验要素》
《信息架构设计》
「从设计前/设计中阶段，了解信息架构知识点」
「互联网产品如何搭建信息架构」
文章来源：进击的M(站酷)
转载请注明：交互深耕-B端设计师要懂的信息架构
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作者：进击的M
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
目前为止，我发现大部分市面上的文章都在告诉大家，竞品分析怎么做、场景分析怎么做、体验地图怎么做、访谈怎么做、度量模型怎么做，但唯独少了最后落地方案怎么做。
我曾经试着利用迪士尼和环球影城的两个案例来优化他们的产品，但是很多人开始无脑喷，因为没有业务做背景，别人想怎么说怎么说，都是“我觉得”。正因为这样，市面上你几乎看不到有什么文章教大家实际的交互解决方案，因为怕被喷子喷，反正没有业务背景你也无法论证自己方案的合理性，靠经验？别人不认同，你也没有数据来说服别人，所以这事大家都不敢去做。
但是没有业务背景的交互方案就不能做了吗？当然不是，有了业务背景你可以更针对性的选择你自己知识库里的方案和页面结构来解决业务和用户的问题，那么前提是你的知识库里有那么多案例才行，否则有再多再清晰的业务背景，你掏不出来，没有用。
所以从今天开始，我会陆续提供一些咱们小伙伴在做练习时候遇到的一些交互问题，大家一起来探讨一下。业务背景会适当的提到，但是还是以交互方案的多样性为主去讨论，再强调一遍，不要揪着业务去框住自己的思维。
学习交互也好，学习UI也罢，如果你完全不懂理论是行不通的，所以很多刚入行的小伙伴基础不够扎实，觉得理论没用，这是不对的，理论有用但是也配合实践，利用更多的实际案例去加深理论的印象，做到举一反三，这样的效果比较好。所以在做案例之前大家务必也要多去了解一下交互的设计理论和基础指南。
其实以前有文章聊到过，但是大家都有不同的声音，那么我们就继续来探讨一下有哪些不同的方案。既然业务背景不确定，那么我们的交互方案就不存在最优解。
下文描述以图片顺序做记号，例如第一张界面即为p1。
产品功能为什么这么布局、为什么用这个控件、为什么用这个交互形式，取决于业务目标和设计目标，还有用户的心智模型，以及该单元本身的属性。那么首先来看案例1-p1，该练习的背景没有描述业务特征，所以这个布局说明，该产品是一个平台型的产品，有各种球馆的列表，除了细节不完整以外没啥大的问题。
再看p2和p3这两个页面是这个练习的核心页面，我们总说产品形态取决于产品本身的定位，平台型产品的球馆详情大致是可以这样的，如果产品是自我品牌的产品，那么形态就会发生很大的变化。例如你可以在美团上点星巴克，你也可以在星巴克小程序上下单，但是这两个应用中的星巴克，是不一样的内容呈现。
我们从p2依次往下看，从业务和用户两个角度来看这个方案，首先从业务的角度看，有问题的点在于场地说明，平台型的产品一般都会给商家做管理后台和营销工具，但是场地说明这个板块就有点鸡肋了，
原因1: 大部分球馆的标准都是统一的，不可能一块木地板一块pvc这样错开，很难看，也不可能。如果有区别那么只有尺寸规格的区别。
原因2：场地类型展示并不是核心用户需求，只是一种辅助决策，并且是“一次性”决策，该流程的核心任务还是要让用户可以去预定场地，但是目前整个页面只有底部一个预定的按钮（等会说这个按钮）
原因3: 页面顶部有场馆的图片及环境介绍了，所以场地图片展示可以集中在顶部的图片区域展示，例如大众点评，点开后会有更多分类的图片和视频标签。
所以中间这块区域可以展示快捷预定的入口，比单纯展示场地类型性价比高的多。
那么底部是否需要有一个立即预定的按钮呢？如果这个产品是一个专门用来给篮球馆做推广的平台，我觉得可以放。但如果是类似大众点评这样的平台的话，就要继续思考了。
而我们看到大众点评为什么底部不做成一个大按钮的形式，岂不是会更加强化这个任务的核心目标吗？平台类型的产品对接商家的种类非常多，同时类似这样的平台产品核心的产品定位是给帮助用户去找到好吃、好玩、好看的地方，侧重的是真实用户反馈，所以说到真实用户反馈这里再举个小例子，大众点评在评价的时候当点击第五颗星的时候是显示4.5星，而不会直接显示5星，要再次点击后才会变成5星。
产品认为为了快速点击5星好评的行为并不是真实反馈，当真实想要给5星的时候才会再操作一步（题外话）。
回正题，平台型的产品定位是为了把所有商家和用户进行高效的匹配（花钱匹配度、曝光更高），而不是为某一个商家去做转化。并且使用该产品的用户场景和需求比较丰富，大部分用户都只是来看看这些场所的评分、口碑和详情。
所以底部就不会只放一个预定/买单的大按钮，而改成了用户反馈的相关功能。为了帮助商家做销售，营销管理工具做的还是很成熟的，什么拼团啦、套餐啦、代金券的工具啦等等。
有同学会问，那不就是大众点评嘛，有什么区别。首先不要为了不同而不同，为了创新而创新，如果有更优秀的解决方案当然是最好了，但在当下的环境中，没有什么必要。如果一定要做差异化，一定是业务诉求出现了。比如这个产品变成了自有品牌做的一个app/小程序，而不再是靠平台帮我去宣传篮球场地，那么会变成什么样呢？
那我们可以想到的时候在预约入口的地方就会发生了变化（同星巴克），平台通过列表进入，而自有产品则是在产品首页中放一个入口，形态也完全改变，首页不仅仅有场地预定，还会有私教培训、课程套餐、活动组织等等，围绕着这个场地衍生出很多的业务。并且像用户评价这个东西，在自有产品中也变得不那么透明，表现形式肯定也会更加弱化。
所以在本身是平台的属性下，这个页面正常就是这样，p2缺少了用户侧的一些支线场景和功能的补充，例如咨询入口、举报入口等支线的功能。
再看p3，点击预约入口后开始进行选择场地的交互，选择场地需要几个关键要素：1.日期 2.时间 3.场地号 4.场地规格 5.价格，那么这里又涉及到业务背景了，场地号是什么？场地规格又是什么？商家如果要让别人预定场地，是按照全场预定还是可以半场预定，场地的类型是否有多样，都会影响到我们这整个预约的交互流程。
p3的这个方案的问题在于：
1.信息关联度没做好，这里的日期和时间要更紧密，和买电影票不一样。
2.时间的交互效率低，并且没有展示全，可扩展性不好，如果场馆早上8点开门怎么办？商家要求最低2小时起订或者1小时起订怎么办？
3.半场和全场的选择不够简单，全场其实等于两个半场，而现在的展示形式变成了一个切换按钮，虽然加了一个箭头，但是这样的交互形式和控件的用法是不符合常规的，并且指向性很差，当切换到3/4号场地的时候箭头就指向了半场，这样就会产生歧义，所以是不可行的。
所以我们这里就会发现这些信息是需要联动的，联动表单最常见的就是横纵联合。一般最初级的做法就是一个行为管一个信息，就比如这样：把选项放入picker中
这种交互方式一般不单独用，因为其实算是一种树状结构，这种结构一般运用在添加收货地址等完全独立的信息填写或者一些多行表单中。
而这里的选择日期、时间、类型、编号并不完全独立，而且需要实时查看。
所以这样也不够直观，picker挡住了价格，无法实时查看。更何况在这个页面中所有内容都收起来版面利用率大幅下降，交互层级更深了。
再看一些其他的方案，难道就一定要选场地吗？我只需要时间、日期行不行。不行，为什么？
那我们再来看下面这个方案：
这个方案中，同学把图片加入进来，希望帮助用户去辅助决策，其实没必要，之前也说过，图片属于认知信息的一部分，在外面认知完了解过就可以了，里面就不需要再展示一遍了，可能也是为了不让页面这么空，因为底部用了一个卡片的块选择日期时间。但是少了场地类型的选择（半/全）长，为什么说半全场和场地号一定要选呢？因为有很多场景缺失了，比如你要帮朋友订另一个场地怎么办？我要订两个半场打全场怎么办？每次预定只定了时间，老板还要手动标记哪些场地在哪些时间没有预定，非常的麻烦。所以不选择场地是不行的。
再来看一个方案：
这个方案的选项和操作过于分散，而一般也不会将需要交互的选项放在左侧，有个原则就是内容在上/左，操作在下/右，虽然不能一概而论但大部分情况都要遵循。参考古腾堡图标原则，左侧的日期不经意看以为是一个标题。大部分第一次做交互原型的同学可能都会这样，一些按钮和控件的用法和该放、可以放的位置不太清楚，在做交互的时候还有一件事要清楚，就是谁控制谁，控制器怎么触发。
而这个方案和p3也是一样，触点顺序乱了：选择日期-选择场地类型-选择场地号-选择时间。因为预约场地的场景是，今天小王想约朋友去打球，他问了一下朋友哪天有空，朋友说下周六都可以，最好是下午，于是小王打开应用软件，选择了下周六的日期和下午的时间，看看还有哪些场地可以预约。
同样也是顺序乱了：场地编号-日期-时间。为什么顺序很重要，这就和我们买电影票的习惯一样，大部分情况是我们想要看某一本电影，然后再考虑自己的时间和去哪个电影院，有人说，我就不一样，我会先选择电影院，比如我逛街途中突然想看电影了，再看看电影院最近有什么电影。我只能说，满足大部分、大概率的用户需求和场景才是正事，产品是无法满足全部用户的。
抛开日期和时间的关联性，这个方案还有一个问题就是如果要预定多个场地就会比较复杂，例如只有1号场地和9号场地的某一个时间段可以预约，那么就需要用户在几个场地中展开收起进行操作，非常繁琐。
再来看一个案例
这位同学将步骤分为了先通过picker选择日期和时间，确定后再选择场地。这个流程问题就在于：
1.picker用的不对，picker虽然叫做选择器，但往往不会作为一个中间任务承载的模块去用，而是对于一个页面中需要选择一些选项的时候才会用到，选择完后依然停留在该页面。否则进入下一个页面后，再返回，就看不到picker了，还要再选择一次。
2.场地可能会出现被人预定的情况，所以当选择日期和时间后再选择场地，如果被预定了，那么用户就会比较抓狂。
所以在这个页面中我们会选择将其全部展开，怎么展开呢，有人觉的日期时间可以不动，把场地和类型展开。有人觉得全部展开才更直观，那我们来看这两个方案
如果日期和时间不展开，会有一个问题，那就是无法选择多个时间段的场地，只能选择某个时间段的多个场地，无法满足这部分用户需求，并且在信息展示上也会比较拥挤。那么我再看看全部展开，全部展开之后将时间和日期也做一个横纵形式，然后将半/全场和编号进行结合，默认选择一个块即为半场，但是在场地命名上还是需要做一个小心思，那就是如果有人要包全场，如果我们单纯给场地编号1、2、3、4….就会让用户不知道哪个半场和哪个半场是一体的，所以命名就可以改成1号场A、1号场B…...
当然如果不要编号问题也不大，主要是场地还有些特殊情况，比如不同场地的通风、灯光的区别，所以会有场地编号。
在之前的留言中，也有小伙伴会问，即便是自有产品，用户在选择场地的时候到底是否需要再看场地的图片，直接从入口进来不显示图片就让用户去定场地合理吗？这里主要就是分针对老用户还是新用户，只要去过一次的用户基本上也就不需要再看场地图片了，新用户的话就需要，他们还需要知道场馆的地址、联系方式等等，所以这些内容会聚合在选择场馆的上一步，也就是首页，具体首页可以怎么放这些内容留给大家思考。
我们讲到这里，还有一些抬杠冠军又要说了，一个页面这么多信息太复杂了，我选择第一个方案，多简单，就两个选项。如果我们知道复杂性守恒定律，那么不管怎么压缩信息复杂度是不变的，把那么多场地选择压缩在一个picker中会更加复杂和难操作。
其实当大家看到这些原型的时候，都明白问题出在哪里，真实情况是，如果让你们从0开始，一下子就懵逼了。比如预定篮球场地的这个流程，从无到有，如果让你自己来设计一遍，你可以完整的做下来吗？每一个细节是否到位。大家产生了一种幻觉，看懂了，等于自己会做。一定一定要脚踏实地去做一遍才知道自己哪里搞懂哪里没有搞懂。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
什么是设计？简而言之，就是用逻辑和美来解决人们的问题，满足他们的愿望。在本文中，我们将讨论美在用户体验设计中的作用：让我们看看它如何让用户和企业都感到高兴。
为什么美对设计很重要
网站或移动应用程序应该有效、轻松、直观地解决他们的问题。但是接下来会发生什么，当产品不再是唯一的，不再是独家的东西，自然竞争开始发挥作用时？人们开始看得更深，争取更多。他们将审美愉悦和情感吸引力添加到他们的愿望清单中。而在两款功能同样出色的产品之间，绝大多数情况下，用户会选择美观的一款。
基于需求层次，人们获得的越多，他们的选择就越复杂。教育和收入水平让他们思考超越功能：除此之外，用户追求和谐与美感。所以，美的作用越来越高。
以下是美在用户体验设计中以这种方式起作用的一系列原因：
1) 它使设计充满情感，也就是人性化
2) 它使数字事物与现实世界保持联系
3) 它支持可用性
4) 满足审美需求
5) 它将不同的事物与一种风格结合在一起
6) 它让产品在竞争中脱颖而出。
美与美学是连接设计的过去、现在和未来的坚实桥梁。今天，新的布局和图形基于数百年来收集的丰富的世界文化遗产。现代设计师和艺术家通过一些趋势和创新对其进行改造：建立一个新的文化历史圈，他们保留了历代最优秀艺术家的作品。这就是艺术和美学吸引力在设计中发挥作用的时候。我们不是在重新发明——我们是让它变得现代化，让它解决人们的问题。
审美-可用性效应
用户体验设计大师尼尔森诺曼集团将其描述为审美可用性效应现象。它指的是用户倾向于认为有吸引力的产品更有用。人们倾向于相信看起来更好的东西会更好地工作——即使它们实际上并没有更有效率。这种效果是为什么良好的用户体验不能只是功能性UI的一个重要原因——设计一个既有吸引力又实用的界面是值得付出努力的。
基于此，让我们考虑一下美感对UX 目标的影响。UX设计有 4 个基本方面，外观视觉和谐呈现出赋予所有要点的因素。
可用性意味着产品可以工作并且用户了解如何工作。
可访问性则允许界面适用于具有不同能力和跨各种设备的不同人。
实用性意味着它可以解决问题。
可取性意味着它是令人愉快的，并使用户感到高兴。
业务目标
但是，启动新产品或改进知名产品的公司也必须从另一个角度思考。它通过各种财务因素、转换、销售和所有其他业务来运作。
银幕上的美会影响他们的商业目标吗？确实会。色彩理论和心理学、屏幕上的和谐、可读的文本内容和有吸引力的图像不仅是让用户开心的关键。
用户体验美学元素
不同的元素可以让美融入用户界面并构建其美学，其中包括：
a) 排版
b) 布局
c) 照片
d) 插图
e) 3D图形
f) 动画片
g) 视频
h) 人物
所有这些元素构成了交互的美感，并直接影响积极的用户体验。
一致性
从美学可用性效应考虑的另一个核心点在于用户体验和业务的十字路口——一致性。正如雅各布尼尔森所说，“一致性是最强大的可用性原则之一：当事情总是表现相同时，用户不必担心会发生什么。”
事实上，它比交互更进一步。它还有助于建立强大的品牌。标志和品牌商品、网站、应用程序、电子邮件和社交网络——产品与其用户的每个接触点都应遵循一个总体理念和一组价值观，并以一致和完整的风格包装。
最后
在全球范围内，所有的设计解决方案都应该回答一个问题——Why？我们做出的所有决定都应该从“Why”开始，这将形成如何与用户交谈，无论沟通的来源是什么。无论与品牌的连接点是什么，您都应该确定与您交流的是什么。这会建立信任感并使品牌更强大，而这正是美有助于使用户体验更加稳固和有用的地方。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现，关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的，这是出于怎样的考虑呢？今天我们就来聊一聊，如何在产品设计中把握“时间”显示的诀窍，让其在页面中发挥最大的作用。
按照“时间”元素在页面中的出现场景和所起到的作用，可以大致归为以下几类：
时间作为描述整个事件的重要组成部分，缺失后会对原本所要传达的内容产生严重的影响，进而影响用户的使用预期和结果，比方说用户可能不能以一个较低的价格完成商品购买，或错过了产品发布会的时间。
指用户本人作为行为主体或行为的接收对象，在某一动作发生后为其所打上的时间标记，比方说“我”购买商品下单的时间或收到一封邮件的时间。
用户在使用产品进行内容消费时，时间作为该条内容的附属信息，起到补充说明的作用，比方说一条短视频或新闻的发布时间。
在上面的案例中，我们会发现“时间”在对应场景里所发挥的作用不同，用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时，要根据具体场景和用户诉求判断“时间”元素的重要性和优先级，通常情况下：时间作为事件的关键构成要素＞行为的时间标记＞内容的附属信息，之后再思考用什么样的设计形式去展示来达到我们的目标。
“时间”的呈现方式和运用技巧
在讨论“时间”元素的设计之前，我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度，类似我们高中物理时学过的“时刻”和”时间间隔“的概念。
拿开会举例子：“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点，而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段；但是，我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。
通过上面的例子我们可以发下，同样是描述一件事情，运用不同的时间点、时间段的方式去表达，意思一样但却传递出不一样的情感，并且两者存在如下的“换算”关系：
1）时间段加上定语会变成时间点（但同样是时间点，“下午 6:00”是绝对时间，而“1.5 小时后”是相对时间，刚好对应到我们设计时两种时间戳类型）；
2）两个时间点之间则表示时间段。
所以，我们在平时表达或设计时，要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点？还是想描述其所持续的时间过程？之后我们再针对不同语境去选取合适的文案和呈现方式。
时间的呈现方式离不开：时间戳类型、时间显示格式、时间颗粒度。其中，时间颗粒度指的是描述时间的最小单位，往往颗粒度越细，给用户传达的确定感越强（如转账时间是 12 日 15:15:20），对用户的激励作用越明显（如距抢购结束仅剩 00 时 01 分 23.6 秒）。
1. 绝对时间戳
绝对时间可理解为事物发生时的确切时间，由具体日期（年、月、日）和时间（时、分、秒）组成。使用绝对时间戳的优势是信息传达精准，显得正式，给人确定感和安全感，同时排布规整，便于形成认知习惯；但缺点是内容显示过长不利于阅读，并且占用空间较大。
在时间显示格式的选择上，为了避免混淆，推荐使用文字格式或“-”分隔符来分隔日期，而“/”分隔符在不同国家有不同的展示顺序习惯，容易造成误解，尽量少用。
时间颗粒度的选择依情况而定，一般场景总结如下：
2. 相对时间戳
相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时，距当前时间点的时间差值，多用于 push 通知、信息流产品，侧重强调内容的时效性；而“倒计时”也算相对时间的一种，侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是不够精确、正式，并很难衡量两个时间点的临近性。
在使用相对时间时，要注意格式友好。时间单位可随着时间的推移自动改变；数字不要过多，尽量取整；并且可设置其与绝对时间转换的临界点。
在设计界面中的“时间”元素时，要遵循场景贴合、便于阅读理解的总体原则；之后根据场景和目标，再选取合适的“时间”呈现方式（包括时间戳类型、时间显示格式、时间颗粒度）。
当时间作为“A.事件的关键构成要素”时
一般情况下使用绝对时间，并且要看是为了强调某一关键时间节点，还是侧重表达整个持续过程。此外，选用关联场景的文案或者运用倒计时（相对时间）的形式，可一定程度上促进用户更加集中注意力，提升对信息的关注度，并达到特殊的激励作用和转化效果。
当时间作为“B.行为的时间标记”时
该场景通常是为了追求确定感，通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点（段）去查找、回顾相应内容，因此大多数采用绝对时间，时间颗粒度依具体情况而定。
当时间作为“C.内容的附属信息”时
如果所设计的产品供给内容的更新速度快，用户活跃度高，并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性，那么通常会使用相对时间。部分信息流产品（比如新闻资讯类、社区类）会在列表页使用相对时间，在详情页使用绝对时间，时间颗粒度也是依情况而定；并且会随着时间推移，在某一时间节点前把相对时间转换为绝对时间。
文章来源：优设 作者：VMIC UED
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
我们在周围的世界中看到了许多熟悉的设计模式。例如，大多数道路用实线或条纹线分隔车道。还有交通灯和道路标志可以帮助您在道路上行驶。如果每个国家/地区使用不同的系统，司机将不得不为他们想要驾车经过的每个国家/地区学习新的驾驶模式——但这不切实际！
UX 设计模式的工作原理类似。它们使用户无需学习新系统即可熟悉浏览数字产品或网页。
什么是用户体验设计模式？
UX 设计模式是用于构建用户界面的常见构建块。设计师使用 UX 设计模式作为可重用组件来解决常见的可用性问题。
例如，我们经常看到的一种设计模式是面包屑。面包屑向用户显示他们所在的页面以及返回主页的路径。
UX 设计模式如何改善用户体验
设计模式为设计人员提供了构建块以更快地创建用户界面，但它们也增强了用户体验。
UX 设计模式通常遵循用户熟悉的通用设计标准，从而减少学习和浏览新产品或网站所需的时间和认知负担。
在《我们如何决定》一书中，作者乔纳·莱勒 (Jonah Lehrer) 写道，识别熟悉的模式会释放出多巴胺——一种与动机、奖励、记忆和注意力有关的化学物质。当用户体验模式按预期工作时，多巴胺命中会增加。
使用有效的UX 设计心理学技术的设计师，例如熟悉的 UI 设计模式，可以增强用户体验并使产品交互更加愉快。
UX 和 UI 模式之间的差异
大多数设计师交替使用UX 模式和UI 模式这两个术语，因为区别很小，有很多重叠，并且可能会引起混淆！
UX 模式：用户流和导航的可重用模式——在社交媒体平台或网站上无限或连续滚动。用户认识到他们可以向下滚动以刷新页面。
UI 模式：用于视觉和交互设计的可重用模式——一个汉堡图标。用户知道汉堡包图标将打开导航。
何时以及如何应用设计模式
知道何时使用设计模式对于产品设计和用户体验至关重要。设计人员必须仅在有明确的可用性原因时才使用设计模式。
以下是识别用户需求和应用设计模式的四步、以问题为中心的方法：
查明问题——您可以通过分析和可用性测试的组合来识别问题。例如，您注意到在获取客户详细信息时，您的产品注册流程有很高的流失率。通过可用性测试，您了解到一个常见的痛点是注册过程耗时太长——您的注册表单要求填写全名、电子邮件、年龄、性别、城市和手机号码（其中许多细节与使用产品无关） 。
通过市场和竞争对手研究找到解决方案——寻找竞争对手和流行的设计库，以找到常见的 UI 模式来解决您的问题。回到我们上面的例子，您会发现竞争对手通常只在注册时询问用户的全名和电子邮件地址。它们还允许用户使用社交媒体帐户进行注册和登录，从而简化注册流程。
自定义设计模式——您必须自定义新的设计模式以匹配您的品牌和现有设计系统。对于我们的用户注册示例，此自定义可能包括调整输入、社交媒体按钮和提交按钮的圆角半径。占位符文本、输入标签和错误/成功消息将使用您的样式指南中的颜色。
测试您的设计模式——最后，您必须始终测试新的设计模式实现，以确保它们满足可用性和品牌要求。
上面的例子展示了可用性测试的重要性——识别和应用用户界面设计模式以测试开始和结束。
不要因为竞争对手有一个设计模式或者你认为这是正确的做法就添加一个设计模式。例如，您的网页设计是否需要面包屑导航？对于电子商务，可能有必要让用户返回到产品类别或知道他们在结账序列中的位置。但是，对于大多数其他网站，它只是添加了额外的数据点供用户处理。
UX 设计模式的常见示例
设计模式分为六大类：
A. 数据输入输出
B. 内容结构
C. 导航
D. 社交媒体和分享
E. 激励
F. 等级制度
数据输入和输出
数据输入和输出是最常见的用户/产品交互之一。用户输入信息，系统返回数据或完成一个动作。
一个很好的例子是许多网站和应用程序使用的日期选择器。尽管它们看起来略有不同，但大多数日期选择器显示类似的布局和功能——标题中的月/年、星期几和日期。
当用户单击一个日期时，它会突出显示以选择。最后，有一个 CTA（有时是一个取消按钮），用户可以在完成并准备继续时单击。
数据输入和输出的其他示例包括：
a) 表单提交
b) 成功/失败消息
c) 应用通知
d) 进度条/步骤
内容结构
你有没有注意到大多数界面使用类似的块布局和图像缩略图？或者，管理界面的左侧导航面板和右侧的内容如何？
使用这些熟悉的内容结构和 UI 模式可以帮助用户快速浏览新的数字产品或网站。目标是最大限度地减少摩擦（例如学习新界面），以获得无缝和愉快的用户体验。
导航
熟悉的 UI 模式可以帮助用户轻松浏览网站或数字产品。桌面和移动界面有不同的导航模式。
例如，主导航位于桌面网站或应用程序的标题中或左侧。在移动应用程序中，主导航栏位于页脚中，只需用拇指触碰即可。
无限或连续滚动是 Instagram 和 Pinterest 使用的典型导航设计模式。当用户滚动时，系统会刷新以显示更多内容。这种设计模式很熟悉并增强了用户体验，因为用户不需要单击下一步按钮或分页来查看更多内容。
社交媒体与分享
设计师可以使用多种社交媒体和共享设计模式，包括：
a) 链接的品牌社交媒体图标
b) 共享图标 - 向右弯曲的箭头或三个点的共享图标
c) 引言——用引号引用此人的姓名和形象
这些熟悉的设计模式可帮助用户找到社会认同，以建立对您的产品和品牌的信任。
这些设计模式利用心理学，鼓励用户执行所需的操作。这里的目标是在用户和产品之间建立联系。
激励
激励 UX 模式利用设计心理学来鼓励用户执行任务和操作，从而创建用户/产品关系。
设计师鼓励使用设计模式通过积极的反馈、认知、游戏化等来吸引用户。
例如，游戏化模式鼓励用户邀请朋友来获得奖励。UI 模式将通过 CTA 向用户显示他们当前的积分，以邀请更多朋友赚取更多。
等级制度
层次结构模式类似于内容结构，因为它们为用户创造了即时的视觉熟悉度，以便快速浏览界面并知道如何完成所需的操作。
博客的两种常见层次结构模式包括标题和目录。用户可以滚动页面以快速找到他们想要的内容或使用目录跳转到特定部分。
面包屑是电子商务网站用来帮助用户浏览产品页面和结账流程的另一种层次结构模式。
总结
UX设计模式是用户体验的重要组成部分，因为它们最大限度地减少了产品的学习曲线和人类认知负担。设计师必须知道何时使用这些 UX 设计模式，而不仅仅是出于习惯或模仿竞争对手而实施它们。
分析和可用性研究可帮助设计人员确定界面中缺少哪些 UX 模式，然后测试他们是否实施了正确的模式。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
对用户而言，要判断网站的用户体验是否足够优秀是很容易的事情，因为主观感受是很难被欺骗的。但作为网站设计师而言，需要花费大量的时间和精力去面对和体验各种复杂问题，才能完善整个网站用户体验的闭环。
随着企业数字化转型，B 端产品越来越受到人们的重视，B 端产品也越来越丰富，越来越多的 C 端设计师转行到 B 端产品的设计上来。
但是，如何区别 C 端产品与 B 端产品，如何将 C 端产品的设计经验应用到 B 端产品上？这是一个需要思考与研究的问题。
从各个纬度来讲，C 端产品与 B 端产品具有一些明显的差别。接下来，我们就从区别 B 端与 C 端产品的 26 条上，来对比一下二者的差异。
Let’s gooooooo……
1. 定义
B 端产品：为企业客户提供商业价值的产品及服务。
C 端产品：满足个体用户需求的产品与服务。
2. 获取途径
B 端产品：公司领导层决策，普通员工使用，需要销售推广，通常将线下“大型会议、峰会、行业展会”作为主要场地，让客户近距离了解产品，树立专业的行业形象与行业口碑，进而吸引企业客户的兴趣（如作者之前所在的安防企业，就会频繁的参加展会，展示自己的专业能力）。
C 端产品：个人主观意愿下载使用，需要利用拉新、促活等营销方式，实现不断的新增、日活来加持自身体量。
3. 产品形态
B 端产品：SaaS 平台、客户端，多为 PC 端产品。
C 端产品：APP、小程序多为 Mobile 端产品。
3. 功能聚焦
B 端产品：具有多功能模块及多角色之间的协作。
C 端产品：以核心功能点为主，以及围绕核心功能点，完善用户体验及增值服务。
4. 所属类型
B 端产品：产业互联网。
产业互联网是基于互联网技术和生态，对各个垂直产业的产业链和内部的价值链进行重塑和改造，从而形成的互联网生态和形态。(百度百科）
C 端产品：消费互联网。
消费互联网是以个人为用户，以日常生活为应用场景的应用形式，满足消费者在互联网中的消费需求而生的互联网类型。(百度百科)
5. 生态属性
B 端产品：相伴共生，产业互联网每一个行业的结构、模式各不相同，必须通过整个产业链上的企业产生降本效应、提高效率，形成资源优化配置，产生 1+1>2 的效益。
C 端产品：赢家通吃，比如通过烧钱取得规模优势、利用人性的心理弱点去进行各种产品、用户数据的采集，没有底线、互联网杀熟等行为。
1. 产品本质
B 端产品：本质是“进”，是帮用户(客户)，节约时间，降低成本，增加收益。
C 端产品：本质是“出”，需要用户消费时间与金钱，满足个人的情感和生理需求。
2. 商业模式
B 端产品：企业按需定制付费较多、个人付费较少。
C 端产品：用户流量和资源的变现实现营收，例如：广告、导流、增值服务。
3. 开发周期
B 端产品：由于产品更新迭代有较大的成本，因此，开发周期相对长，按月或年，大版本迭代。
C 端产品：周期相对短，按周或月，小版本快速迭代。
4. 生命周期
B 端产品：由产业链以及商业模式决定，生命周期往往较长。
C 端产品：一般产品的保鲜期比较短，生命周期较短。
5. 产品关注点
B 端产品：专注业务及行业化的解决方案。
C 端产品：专注对人性的满足。
6. 产品需求来源
B 端产品：来源公司战略或业务线调整，甚至客户预期。
C 端产品：产品经理的市场洞察力和敏锐度，主动发现。
7. 产品思维
B 端产品：往往以工具化思维服务行业客户，更理性。
C 端产品：往往以游戏化思维增强用户的体验，满足用户，更感性。
8. 行业壁垒
B 端产品：由于业务、场景属性，容易建立行业壁垒，客户的切换成本比较大。
C 端产品：行业壁垒比较难以建立，往往以体量优势及价格优势挤压对手，同时，同时用户的切换成本较低。
1. 用户类型
B 端产品：用户通常是一个团体或组织，用户的社会属性比较明显。
C 端产品：目标用户通常是具有某些特质的人群，具有明显的自然属性，且没有组织架构。
2. 用户体量
B 端产品：作为工具属性的产品，用户体量比较小，甚至有些定制化产品的用户只有几人。
C 端产品：相对而言，用户体量较大或非常大，才可以形成规模效应，进行流量变现。
3. 使用时机
B 端产品：往往仅工作日工作时间使用，用户在节假日，非必要不使用。
C 端产品：用户会在任意时间。
4. 使用时长
B 端产品：相对固定，且希望越短越好。
C 端产品：弹性较大，且希望越长越好。
5. 使用意愿
B 端产品：根据公司决策进行采购，用户被动使用，且没有太大的决定权。
C 端产品：根据自己的需求主动选择使用。
6. 使用场景
B 端产品：场景固定，多为办公室。
C 端产品：场景不定，用户可以在办公室、卧室、厕所、地铁上等多种场所使用，姿势可能是坐着、躺着、蹲着、斜靠着等等。
7. 用户粘性图片
B 端产品：由于用户的被动使用限制，用户对产品的可选性不高。因此，为了工作需要，用户粘性相对高。
C 端产品：用户可以根据自己的喜好，随时随地改变自己的选择，用户粘性相对低。
8. 用户容忍度
B 端产品：用户容忍度大，不好用也要用。
C 端产品：用户容忍度小，不爽就换。
1. 设计侧重
B 端产品：关注业务功能和使用场景。
C 端产品：关注用户体验及感受。
2. 视觉风格
B 端产品：界面简洁、布局清晰，追求信息的有效表达和操作的便捷性。
C 端产品：风格多变，强调产品的视觉冲击力。
3. 情感体验
B 端产品：强调免打扰、高效，多关注业务解决方案本身的顺畅。
C 端产品：强调产品的趣味性，处处考虑用户的情感体验。
明确 B 端产品与 C 端产品的区别，有利于设计师在设计过程中的设计经验转换。在设计过程中，做到有的放矢，而不是一味的生搬硬套，用解决 C 端产品的方法与思路，去解决 B 端产品的问题，从而让 B 端产品的解决方案更加贴近业务与场景。
文章来源：优设 作者：弘毅
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作为设计师，日常工作中我们经常要思考如何吸引用户转化。如果仅把“界面设计美观”作为设计的发力点，很难形成完整的判断链条，完成预期的商业目标。因此，在交互行为层面尝试“破解”用户行为发生的背后原因，通过科学的方法“设计用户行为”就变得更加重要。
行为设计领域有三个非常重要的模型：福格行为模型，成瘾性模型以及峰终效应。其中福格模型在辅助我们做行为预判的过程中扮演了重要角色。
福格模型是以耶鲁大学教师 Fogg，2009 年发表的一篇论文为中心，阐述了任何一个行为的发生，都需要满足以下三个要素：
任何一个行为的发生，都离不开3要素：动机、能力和触发器。因此在设计时需要考虑：
人们是否有产生行为的动机、发生行为的能力，以及一个合适的触发点。
高动机高能力
这类用户有付费动机且熟悉产品使用流程，属于高价值用户，是产品的真爱粉。在后续设计过程中，我们可以收集用户反馈，并针对问题改善体验就行。
高动机低能力
这类用户需要降低门槛，必要时可以提供帮助和引导。提高操作能力，优化用户体验。例如一些应用为低能力群体设计“专属版”，如针对老年人，推出适老版应用，精简用户操作步骤，突出核心功能，便于这部分用户完成产品主流程操作。
低动机高能力
这类用户需要提高动机，可以结合马斯洛需求层次理论找出用户不同阶段的需求。分析用户需求，挖掘用户痛点，寻找用户动机。例如“分享领取大额优惠券”、“每日签到送积分”、“走路得能量”等，我们可以同过激励来增强用户动机。
低动机低能力
这类用户需要适当放弃，投入产出比较低，不属于我们的目标用户。
本次将以 “为家人购买保险” 的优化过程为例，分享运用福格模型把行为设计和商业场景联系在一起。通过设计引导用户行为进而助力产品转化。
背景：
用户在为自己成功投保“医疗险”后，会为本人再推荐一份其他险种的产品，打造“完善双重保障”的概念。但某年龄段岁下的用户因保费过低，在收入来源中属于ROI较低的群体。
产品目标：
希望该年龄群体在为自己购买完保险后，优先推荐为“家人购买”，因其所获得的商业价值效益更大。预期通过为家人购买保险，拉动这部分用户的整体ROI。
设计目标：
引导用户为“家人购买”一份“医疗险”
用户已经为自己购买过一单保险的情况下。大部分用户具有健康保障需求，其本身也有购买保险的动机。在模型中偏向于“高动机”人群，
本次设计的发力点：强化这部分用户“为家人购买”的动机，降低购买保险的行为成本，同时在适当场景给予用户触发提醒。
我们一般通过两种途径增强用户的行为动机：心理刺激和物质刺激。
1.营造稀缺性：通过限时限量等方式营造稀缺性。
2.强化“家庭健康保障”需求。安全需求是人的基本型需求。通过“父母有保障，我更安心”等文案迎合用户对安全生活的向往。
3.显示社会认同信息。寻求社会认同是更好一层的心理需求。通过标签外露承保公司名称，寻求社会认同，并侧面透传出专业性，建立用户信任感。
“物超所值”，便会促进行动。在顶部向用户宣传为家人买的“产品优势”，增强付费动机
我们可以通过降低用户门槛，来提高用户完成这件事的能力。
1.降低门槛—降低用户成本（金钱）
1元为父母升级,降低用户参与成本。
2.降低门槛-降低操作成本—简化选择（时间）
根据业务目标，指定最优推荐策略。如本次流程最优推荐策略是为父母购买，去掉可能影响用户决策的其他选择项，改为仅显示最优推荐策略下的唯一指定模块。
3.降低门槛-降低认知成本—结合图像（精力）
“ 产品适用群体图片+文字”的表达，在当前情景下可快速传递信息。便于用户快速理解当前流程是在“为谁购买保险”，从而降低以往用户将“家人身份信息填写错误”的情况发生。这样设计减轻了用户的认知成本，提⾼了信息传递的效率。
1.触发器“醒目”
胶囊形状的「提交订单」按钮在“方形卡片”上十分醒目，是触发用户行动的视觉提醒。
简洁按钮文案设计，如“限时升级”，将有助于加速用户的决策，从而促进转化。
在日常工作中，可以借助福格行为模型解决商业目标中的引导、转化、留存等问题。在做设计时，我们首先也需要思考设计目标 ： “我们想要用户发生什么行为？”
我们可以通过福格模型从“动机、能力、触发因素”等角度进行设计思考，更加深入的理解用户行为背后发生的原因和影响用户决策的因素，帮助我们更好的完成产品优化和体验升级，最终达到商业目标。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com