认识达内从这里开始

对于在山西太原学习ui技术的学员来说，不同的培训机构提供的学习内容都是不一样的，要知道，我们除了需要学习基本的技能知识和系统的逻辑架构系统以外，我们还需要学习先进的设计思维理念，只有这样，我们才能在模仿别人的基础上获得更大的进步和提升。

今天，我们就来了解一下，为什么有些企业网站愿意制作一些简洁大气的网站布局。

1.多余的动作

用户所进行的每一个步骤都会增加到他们的认知负荷中。过多不必要的动作会破坏用户的思路，甚至有可能激怒他们。因为他们的工作记忆都集中在完成特定的目标上，多余的动作会迫使他们投入更多的精力，这就会增加工作记忆的负担。最终就会耗尽用户的耐性，掀桌子走人。

为了使认知负荷最小化，速度和步骤是需要注意的基本事项。用户希望在一种轻快活泼且有目的性的节奏中完成他们的任务，所以撇开一切拖后腿的废物吧!

用户希望知道在他们提交邮箱地址之前他们要进入的是什么网站，但Touch of Modern不告诉用户任何信息却要求他们在第一时间进行注册!这个强制且多余的动作将会吓跑许多潜在用户。

解决方案：

这里有个找出多余步骤的方法：列出用户必须要完成的每一步任务。举个发邮件的栗子吧：

点击“邮件”图标

点击到“发送给”的输入框

填写邮箱地址

点击“主题”输入框

等等吧啦吧啦吧…….

点击“邮件”图标 点击到“发送给”的输入框 填写邮箱地址 点击“主题”输入框 等等吧啦吧啦吧…….现在，我们回头来看这些步骤并找出多余的动作。第二步完全可以删除，因为你可以让光标自动停在“发送给”这一栏而不用让用户自己动手点击。

这会为他们减去不必要的麻烦，虽然看起来微不足道，但你所删减的每一步都是胜利。(这和最近非常流行的微交互设计概念有些不谋而合，微小而不引人注意，并为用户提供平滑、自然的感觉。)

让我们来看看谷歌的首页。光标一开始就出现在搜索栏里面，所以用户们需要做的就是打字。这些细小的交互行为可以为整体的体验加分，所以不要忘记它们。

2.过度的刺激

凌乱冗杂的界面会分散用户注意力，增加工作记忆的负荷从而会妨碍他们去实现目标。就像当很多人同时跟你讲话时一样，你会很难集中精力，当网页上充斥着许多照片，动画，图标，广告，字体和刺眼的亮色时，你同样也很难集中注意力。每一种多余的元素，特别是视觉上的抢眼，都会分散用户的注意力。

要记住的是：在用户实现目标之前，工作记忆都需要将额外的刺激进行归类处理，注意力的每一次分散，都会占用用户的一份工作记忆。

LINGsCARS就是个极端的例子，你可以看到对比强烈的颜色和动效冲击着人们的感官。在电脑屏幕上，即便处于两个不同位置但却同时进行的动效依旧会对用户造成过度刺激，产生威胁。

解决方案：

首先，避免一切不必要的元素。我们仅需保留通常情况下必要的元素，来减少加载时间并简化交互体验。一项关于“美学是如何影响用户对网站第一印象”的研究发现，比起视觉复杂的网站，用户更倾向于视觉简易的网站。

同样，你也可以进行内容区分从而达到平衡的效果。过多的同质化内容(只有照片或只有文本)会让用户感到烦躁。所以，将视觉信息加以综合——图片，视频，信息图表综合到一起从而达到页面的和谐，使它便于用户理解。

影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版，但它反而运用同量的文字内容来平衡网站页面。

当你总结出一个页面的必要元素，将这些元素以便于用户快速理解的方式组织起来。运用对称式或非对称式布局来展示信息以便于用户更快速的理解，也就是说，让大脑少费劲儿。对称式布局或有趣的非对称布局不仅能带来视觉享受，而且它们的结构可以使界面易于交互。

下面来看看Groupon是如何将它的垂直菜单(中间偏左)和描述冻酸奶的文字(中间偏右)进行布局的吧。大图居中被文字包围着，这样就打造了一个舒适自然的沙漏形状。

对称式并不仅仅是将相同的布局放在两侧，它是用来平衡视觉重量和视觉方向。从这点来讲，非对称性布局依旧可以表现的具有组织性，就像OTHR所做的那样。

减少页面多余的元素仅仅只胜利了一半，革命尚未成功，大家不要忘了，还要将这些元素以简洁明了的布局方式呈现出来。

3.过多的选择

自相矛盾的是：用户希望拥有更多的选择，但往往过多的选择会给他们的大脑带来负荷。

席克定律(选择困难症)为我们揭示出了一种现象：用户所拥有的选择越多，他需要作出选择的时间则会越长。从设计的角度来看：人机交互中界面中选项越多，意味着用户做出决定的时间越长。席克定律多应用于软件/网站界面的菜单及子菜单的设计中，在移动设备中也比较适用。

即便是知名网站，比如说乐天，也会犯类似的错误。因为他们没有很好的理解这个设计准则。给用户需要的而不是给他们认为他们需要的。

解决方案：

你可以将多项选项方进一个集合里面。在很多购物网站里你都可以看到类似的组合方式。完全没必要一次性展示出多种选项。如果可以将他们放在隐藏菜单中，那么就比较理想了。这些隐藏的大型菜单依旧会给用户很多选择，同时这样也不会给他们带来负担。

然而，隐藏式的导航栏不利于发现，所以电子商务和新闻领域的设计师应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)或者你可以归纳导航菜单的类别，将它们精简为单行导航(就像苹果和CNN那样)。

许多与席克定律有关的问题可以通过信息架构的管理来控制，这也是我们接下来要讨论的部分“不易找到的页面和产品”。

4.过多的内容和产品

和过度的刺激与过多的选择问题一样，内容过多会让用户的工作记忆分散到不同的岔道。很明显，你希望展现的仅仅是重要的内容，但对于一些放荡不羁爱自由的网站来说，所有内容都很重要。如果你的网站也有非常多的内容，为了避免对用户造成困扰，你必须学会怎么去合理的组织他们。

Arngren的问题并不是它展现了很多的产品，而是同一时间内展示出了很多产品。在组织架构上的调整将会给网站带来好的观感。

解决方法：

George Miller的解决策略是“组块”，它将需要展示的大量内容以可管理的方式组合起来，这是非常有效的。这也是数字组合的记忆方法。一组电话可以分为国家编号，地区编号等将它们组合成一组三个数字和两组四个数字便于记忆，而一连串的11个数字会很难被记住。

你想将许多产品的图片都放在主页上么?比起将它们全部罗列出来，不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。

说完了图片组块还有文本组块，文本的组块包括简短的自然段，恰当的运用标题和副标题以及足够的留白。

长的信息填写表单是非常吓人的，有时甚至会被用户所遗弃，那么试试一种多步骤的表单吧。你可以将表单的信息分在不同的页面里。记得一定要有一个进度标记来让用户知道还剩下多少页。

买机票通常需要填写大量的信息，通常没有一项信息是多余的。Virgin Atlantic将原本乏味的信息填写项目分配在单独的页面上：选择航班，填写旅客信息，进入付款详情等等。将所有的信息放在一个页面上会对用户造成负担，因而很有可能被他们放弃。

5.模棱两可的界面

认知过载的最大敌人是混淆不清的用户界面。用户从来都不该花费大量的时间来弄清楚如何来完成他们的动作，也不应该浪费脑力去破译一个图标。

并非所有的用户都是技术咖从而能够理解SpeedCrunch这种含义模糊的图标。即使他们能够识别上面的代表Windows系统和Mac OS X系统的符号，那么位于右下角的那两个图标即使是图灵他老人家来了也且得看一会儿呢。

解决方案：

不要费力不讨好：你可以用那些已被用户从其他网站上所了解的视觉提示。用户通常会用他所熟悉的符号来进行操作。如果觉着这样做没有新意，你可以将品牌特质巧妙的转化为用户所熟识的形式。Home Depot虽然运用了较为普遍的图标，但同时也赋予了他们品牌独有的橙色。

比起非传统标签例如“姓名”和“去”,像“联系人”和“提交”这类标准的标签更容易被识别出来。能被普遍识别的标记可以增强用户的浏览体验，而非普遍的标识会让用户停下来去想这个按钮是用来做什么的。不要为了个性来牺牲简明。

另外，如果真的需要放个以前从未见过的标识该怎么办?如果那样，运用真实的生活场景展示来让其进行自我解释。这叫做：借壳。它是连接现实和虚拟的桥梁。比方说，早起的互联网奠基人选择信封来代表邮件就是因为信封是邮政系统的象征。

同时，要避免含义模糊的符号，特别是它们可能还会被误认为其他东西的代表。就像下列Issuu的图标，有些是为人所知的，但另外一些却不是。如果用户必须通过点击这个图标来发现它的功能，这就会中断他们的操作进程。

任何一个不能清晰表意的图标都应附带说明来告诉用户它是如何工作的。新的并且不常见的用户界面，需要手把手的教程。比方说，Slack就给出了一个全套的视频指导来说明界面的操作流程。

6.不易寻找到的页面

即便用户已经拥有了他们所需要的一切东西，他们可能依旧不知道如何去寻找它们。结果是他们会费尽脑力去寻找他们所需要的。作为每个用户体验都不可或缺的元素，导航条应该放在显眼的地方，从而给用户信心去任意浏览网站而不用去担心会迷路。这时就需要信息架构发挥作用了。

如果你认为汉堡图标非常糟糕的话，Mojo Yogurt则会让你见识见识什么是山外有山，你需要将鼠标滑过左上角的图标来显示出导航菜单。虽然围绕着Logo有个小的动效，但就整个屏幕的颜色和动效来说，它并不够明显。

解决方法：

根据用户的喜好来理清你的信息架构。你的目标用户群可能并不认可你的做法，所以要从他们那里学习如何来组织网站。卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。

1.索引卡片上的内容 2.预先设定的分类 3.将索引卡片放置在相应的分类中。

要了解信息架构更多的知识，阅读Dan Brown的“信息架构八准则”。在这仅有的五页里，他概要阐述了每个设计师都应该知道的八项信息架构准则。比如说多项划分的准则(例：运用一些不同的分类方法来适应不同用户的思维模式)。

除了有效的信息架构外，如果你还想通过组合页面和菜单项来避免冗余该怎么办?设计工作室Waaark通过把工作室的简介，团队成员和联系信息这三个页面合并到一个页面来简化他们的导航。

如果确实有比其他功能重要的功能时，运用视觉技术来吸引他们的注意力。比如增加尺寸，添加动效或运用亮色以及对比色来吸引用户眼球。

比起新客户来讲，Paypal更关注老用户，并通过将登陆键设置在最吸引眼球的白色背景上。

或者可以用小说式架构(下图解释什么是小说式架构)来展示信息，特别是用一个相应的图形，但前提是，所有的这些元素都是易于理解的。

(右上图即为小说式架构，它就像是在给用户讲故事而不是干巴巴的列出各个项目)

7.内部的不连贯性

假如一个网站的首页用蓝色文本+下划线代表链接，而其他的页面仅仅只用蓝色文本却并没有加下划线。当用户浏览其他页面时就会停下来去想，“它没有下划线，这还是个链接么?”他们甚至可能不会再去关心链接，而会被其他页的不统一性分散注意力从而影响整体的用户体验。

排版错误和语法错误是一样的。请你记住，最棒的用户体验就是不被用户所注意到，而像上面的错误通常都会被注意到。一个元素是否与网站其他元素具有内在连贯性，是否与其他网站元素具有连贯性(比方说图标)都是至关重要的。在这些例子中，用户都必须花费一些时间来进行思考和处理，因而它们占用了用户的工作记忆。

SIPhawaii到处都是大写，包括字体大小和数字价格。你甚至都想不到去点击汉堡图标，因为它和其他网站上的汉堡图标都不一样。(鹿：加了矩形和阴影跟少先队三道杠一样)

解决方案：

保持统一的一种风格来贯穿整个网站，但说来容易做来难，因为这种错误往往是无意的。一个风格指南将会大有用处。它收集了全球所有的设计决策，当设计师需要它们的时候，就能被轻松的找到。因为类似于背景色、图片尺寸和标题排版这种细节容易被忽略，所以参考现成的会对设计有所帮助。

在视觉和功能上都具有一致性的一个极好的例子就是Pinterest。不论你想要什么风格的照片，它们的格式都是一致的。标题、描述、作者、网站、收集和活动都使用了相同的字体和排版并且在每张卡片的同一个位置所展示出来。错落有致的排版给了用户更多的视觉吸引力。如果你理解其中的一张卡片，那么你就能明白他们所有的卡片。

达内时代科技集团致力于培养面向电信和金融领域Java、C++、C#/.Net、3G/Android、3G/IOS、PHP、嵌入式、软件测试、UID、网络营销、网络工程、会计、UED、web、Unity3D、大数据、童程童美等17大方向中高端软件人才课程与少儿教育课程。选择太原ui设计培训，不再孤军奋战，轻轻松松做IT高薪白领。太原达内培训带领有明确目标的学子迈向成功之路!想找工作的求职者可以加QQ：3373924515（太原达内就业服务部）咨询了解。