美感是外在，交互是内在，内外兼修方成气候。今天十萬個為什麽总结了交互设计中的5个视觉原则，帮同学们掌握视觉与交互的协调方法。

我不想贬低文字的重要性，但也不想忽视视觉。两者是同等重要的交互设计元素。文字就是交互，但那些视觉元素(比如图标、菜单、图像等)才是用户实际上操作的东西。虽然有些可用性专家会提及Craigslist甚至Amazon，作为丑陋但可用(而且受欢迎)的网站案例。但毫无疑问，美感总会有所帮助。

情感是用户体验的关键：视觉设计优秀的网站能使用户放松，提升可信度和易用性。考虑到多数用户注意力短暂，认知往往成为事实：如果视觉做得很糟糕，用户不会费神去深入研究你的交互设计。

让我们来细说视觉的重要性，因为它关系到交互，保证了清晰的方向指引和一致性。

一、尊重视觉的主导地位

我们从案例展示开始。看看下面的文字：

很显然，我们都知道“黄色”一词所指的颜色。但当多数人看到它时，他们理解到的可能只有红色。文字的外观取代了它的真正含义。

信息图专家David McCandless表明，我们大部分的脑力资源都花在了视觉上。

作为人类，视觉是我们的主要感观。但是其他动物更多依赖听觉与嗅觉，我们是视觉主导的生物。正如数据记者兼信息图专家David McCandless在一场引人入胜的TED演讲中提到的，我们会调动全部感观，但多数的脑力都花在了视觉上——虽然我们很难察觉。他用计算机进行了类比……

“视觉是感观中最迅速的。它和计算机网络的速度相同。之后是触觉，相当于一个U盘的速度。然后才是听觉与嗅觉，约等于硬盘的速度。

“后面才是可怜的味觉，运算速度几乎近似便携式计算器。角落里那个小方块，百分之0.7，那就是我们实际了解的量。所以你的很多感观——绝大多数感观都是视觉上的，它蜂拥而来——你却浑然不觉。”

视觉影响行为，也影响体验，Stephen P. Anderson说。

但是对于交互设计这意味着什么?它意味着你对产品做出的每一项视觉上的决策，都对交互有极大的影响，即使是在不知不觉间。

产品设计顾问Stephen P. Anderson指出，视觉影响的不只是体验，也会影响用户的行为。

这就是说好的视觉设计可以提升销量，提高注册量和转化率，激发某些特定的用户行为。看看下面这两个表单：

表单A

表单B

记住，交互设计的目标之一就是让用户尽可能少地思考。你认为哪个更有利于销售?哪个视觉上看更舒服?

第一例中，那密集恐惧症般的间距和过量的文字，让用户望而却步。第二例则色彩丰富、优美，看起来更简洁(尽管用户都得输入这些信息)。

由于交互设计就是要创造人们想用的东西，有吸引力的事物更激发人的渴求，因此更能发挥作用。

图片和导航在这个在线香料商店中相互协调。

不过除了吸引人的交互，优美的设计也提供了一层额外的理解。看看上面这个Old Town Spice Shop案例，你会发现这个网站的橱柜式布局立刻暗示了这家公司的意图和香料产品。

尽管你可能会质疑，用户先看到橱柜还是“Spices”和“Extracts”这些文字。毫无疑问的是，两者相互协调。

二、提供清晰的方向与指引

用户不会漫无目的浏览网站。人们通常都有个大体概念他们要去哪，但还需要一些指引和线索。他们会在脑海中创建地图，既然我们刚刚提到人是视觉生物，那么就需要一些视觉路标来指路。

某种程度而言，你的导航要像GPS那样。用户需要了解他们当前位置，哪些路线是可行的，下一步该怎么做。

面包屑导航是满足上述3项需求的最直接的方式。就像下面的Newegg这种常见的UI模式，这种方式给用户留下了清晰的视觉踪迹，来追踪他们的访问过程。

但面包屑导航应该作为备选方式，因为对于页面间的点击跳转，它们在视觉上并不直观。它们多用于层级复杂的网站，比如电商网站，简单的网站不需要它。如果对此持疑，回顾你的网站地图，看看加入面包屑导航能不能提升易用性，或者只是添乱。

面包屑导航、链接——还有菜单、搜索框和可点击的图标——都是基于视觉的手段，让你建立方向和指引。谈到主导航时，你需要让它给人留下强烈的视觉印象。

三、确保视觉统一

一致性在交互设计的所有方面都非常重要，不只是视觉。无论如何，视觉上的不一致是非常醒目的(看看世上最糟糕的网站)，见证一下设计的地狱。

前方高能预警!!

Theworldsworstwebsiteever

有些事是不该做的。

一致性展现了网站在设计和排列方面的逻辑，创造更加令人愉悦的体验(我们都知道，开心的用户是会回头的)。

我们之前提过，人们更喜欢统一是因为它增加了可预知性(降低学习成本)。如果你的界面容易学习，它也会更容易使用。人们不喜欢令人不快的惊喜，正如惊讶最小化原则中所说：

不一致引发的问题，是它增加了“认知负荷”。Nielson Norman Group的用户体验专家，Kathryn Whitenton，在热议博文中解释过，认知负荷是用户在使用产品时需要思考的量。

一致性展现了网站在设计和排列方面的逻辑。

每项不一致都迫使用户停下脚步，来处理此处不同所表达的含义，它为何不同，又是如何影响他们的行为。因此，不一致的地方越少，交互越顺畅，体验越好。

例如，单选按钮在界面某部分只允许单选，那么它在其他部分就不应该多选。文案也该如此，既然在某个部分用了“保存”作为名称，在其他部分里就不该称作“储存”。如果某张图片触发了一个弹窗，那它在别处就不该打开新窗口。时刻要问自己，“我希望用户如何操作?”

四、将UI设计模式作为基准

UI设计模式，可以理解为特定情况的最佳设计实践。既然用户已经熟悉各种设计模式，使用它们降低了界面的学习曲线。常见的UI模式包括旋转木马、相关链接、幻灯片……还有更多(可以从这个网站看到，它致力于给它们分门别类)。

Netflix用了相关内容模式，来帮你找到其他可能感兴趣的节目。

比如，Netflix使用了“相关内容”UI模式，帮助用户找到其他可能感兴趣的电影或节目。由于内容是智能生成的，用户交互感觉更像是有人在推荐有用的内容。这并不是一项开创性的设计，但它是个快速有效的解决方案，让你的界面鲜活起来。

当然，UI模式并非即插即用的模块，你还是得基于网站的外观与感觉为它们特殊定制。

要为产品寻找正确的模式，你可以查看各种模式库，通过它们的分类来浏览各种模式，比如“导航”或“输入框”。

五、通过风格指南创建一致性

虽然UI模式有助于提升熟悉感，风格指南才能确保全站统一。

风格指南是一部手册，列出了产品的特殊偏好，这些部分很难记忆——比如全站内容的尺寸和字体、主导航的主色与辅助色的颜色梯度、按钮点击状态的表现，等等。

来这里www.yelp.co.uk/styleguide看看Yelp的风格指南。

在UXPin，更新网站时我们会创建风格指南。这能帮助我们估计出额外的工作量，因为我们可以把带有技术细节的截图添加到公司内部wiki中。正如我们在从风格指南到效果图中描述的，这种“拼拼凑凑”的方法对于简易的风格指南非常有效，可以分享给整个公司。

我们在网页UI设计最佳实践中充分讨论了风格指南，包括如何制定、需要包含什么。要了解关于风格指南的更多案例，请看以下几项绝佳资源：

要深入学习交互设计中的一致性，请看这篇全领域创建用户体验一致性，还有这篇系统、平台和现实世界的统一。

五、精华总结

人们上网时，他们说自己在“看”网站，而不是与它“互动”，尽管后者更准确。我们严重依赖视觉，视觉引导我们建立观念、解决问题，我们所相信的会引导我们的行为。由于交互设计如此贴近用户体验，通过视觉打造最佳的用户体验，虽然间接，但确信无疑促成了更好的交互。

要深入学习，可以下载这本电子书Interaction Design Best Practices: Words, Visuals, Space。视觉案例研究包含了30多家公司，其中有Google、AirBnB、Facebook、Yahoo。还有一些专家的建议，比如Stephen P. Anderson、Jared Spool等等。

1：网站色调的调配和谐

色调在页面里能够起到好多种效果，利用强烈的对照可以凸显页面的核心，或是利用色调的调配，能够让网页达到十分好的效果。通常情况下，页面下方的色调都是比较浓重的，由于这样可以压制住页面上方的色调。倘若不使用这种方法，整个网页会显得头重脚轻，页面底部的文字和图片会有种飘出去的感觉。因此要让整个页面显得比较均衡，必需有可以镇得住其他颜色的色调。

分析网站制作中常见的问题及解决方案中也说过，一种比较显眼的色调，倘若随便安放在页面中很容易显得突兀，这样对于凸显核心或是Logo图标都会带来负面影响。因此应该在相称的位置上添加和该色调同属色系的颜色，这样能够弱化突兀感，减少视觉冲击。

2：字体配置样式不必过多

做网站时字体配置不要有过多的样式，在进行企业站点策划格调上的操作时，总是觉得过多的字体能够让企业官网总体看起来不是特别的死板，其实并不是这样。企业网站策划将就的是策划，而不是颜色的堆集和款式的堆集，要讲究各种字体款式和颜色的运用，这样才能够看出来网站策划人员的技术实力和策划功底，真正让客户领会到官网策划的美感。

一般来说，企业站点策划中运用到的字体不要高出是三种款式，这样才不会看起来乱乱的。基本上客户一打眼，就可以看到自己想要知道的讯息，而不是刚刷新出来便是浓妆艳抹的，一点核心都没有。

3：做好网站总体分块

在进行企业网站策划时，策划师应该依照企业网站内容、网站格调对页面总体进行分块。分块其实是一项很重要又难以掌握的职责。页面分块不同于杂志分块，杂志的分块是有边界的，杂志的策划师可以经过边界来形成立体感，但页面分块弱化了边界，由于电脑屏幕可以上下左右随便移动。

因此页面分块更加重要，可以经过不同的颜色、框、线来进行分块，但分块的素材不该该过于夺目，不要影响客户对内容的正常浏览。

4：网站务必使用高清图片

任何官网都会使用图片，倘若图片够高清、够高质的话，就会让人觉得你的企业站点很有质感，很有层次，不过，高清大图多了的话，就要降低其他要素的使用，避免影响打开速度。同时，展示的图片内容要与企业官网主题相符，因而要花足够的时间和脑力在图片材料的收集分析上下功夫，才能使得网站有特色，能够迎合客户口味，得到客户的点赞。

二. 网站建设中的seo设置

1：常用设置。

很多基本的seo设置也是必要的，典型的有301重定向，404错误页面，robots协议，网站地图，图片alt，基本的TKD设置。还有现在百度所推崇的mip改造，https改造等。

2：其他设置。

较为重要的点在于url的提前规划，面包屑设置。

3：百度分享

百度推荐阅读，百度站内搜索等百度官方组件的设置使用。

三. 网站上线后的seo运营阶段

1：内容的组织，内容为王的观点永不过时，为搜索引擎提供大量的即时性，权威性内容是根基；内容更新频率不宜过小；ugc方式产生内容更为妥当。

2：百度站长平台链接提交工具的使用，将网站产生的内容第一时间提交给搜索引擎；注意屏蔽不需要让搜索引擎收录的内容。

3：链接建设。关于链接建设，应不局限于外链，还应考虑到友情链接以及内部链接。

类似于一个链条，网站建设与seo优化都是不可或缺的，还有一些点不能做，诸如典型的蜘蛛池等黑帽SEO，站内关键词叠加作弊。也有一些点应该做，诸如网站数据分析，IIS日志分析，不断借鉴优质网站的优质原始，不断对网站进行优化，创新。

不断用心，让网站满足细分用户的搜索查询需求，让网站满足搜索引擎收录，排序，展现的维度，就是一个成功的网站。

网站关键词：网站建设  网站设计  网站制作  上海网站建设  上海网站设计  上海网站制作  上海网络公司  网站建设上海  上海做网站  上海建设网站  上海做网站公司  上海建网站公司  上海高端网站建设  上海手机网站建设  怎么建设网站  如何建设网站  营销网站建设  品牌网站建设  网站建设方案  响应式网站建设  外贸网站建设  公司网站建设  建设网站  网站建设服务  高端网站建设  网站优化服务  上海网站公司  企业网站设计  官网制作  官网建设  官网设计  网站建设公司  网站设计公司  网站制作公司