写给大家看的Web设计(四)——交互&视觉设计

摘要:制定满足可用性要求的视觉设计规范,创建独一无二的品牌定位。

交互设计

交互设计和信息设计是不一样的。这是一个非常容易引起混淆的概念。信息设计面对的问题是网站的全局性架构,如何以最好的方式组织内容,而“交互设计(Interaction Design)”考虑的则是实际的用户操作流,用户如何完成一个类似注册成为会员的任务,或者是如何从一个页面被引导到另一个页面,抑或是购买了许多产品后如何完成付款的过程。

作为一名设计师,你需要完整地考虑用户在完成某个任务过程中所有肯恩那个经历的步骤。在这个过程的每一个步骤中,他们都会提出各种各样的疑问和关切,你需要对此有心理准备,同时深入思考如何能够促使他们圆满地完成整个操作过程。如果步骤过于复杂,或者是界面表达不够清晰,用户可能会觉得烦躁进而放弃下一步操作。此外,正确地使用页面组件,例如复选框、菜单、链接、图表以及按钮,他们的视觉外观以及摆放位置都可能会增强或减弱用户成功完成一次操作流的可能性。例如,如果你把“提交按钮”放置在表单的左上角,那就会是一种非常罕见的摆放方式。用户已经非常习惯在填写完一份表单“之后”去表单下方寻找提交按钮。或者,你可能将提交按钮设计成一个文字链接,这样导致的结果是用户可能会认不出来那是提交按钮——他们一定会想要寻找一个“看起来”像按钮的东西。

视觉设计

完成一个流程的交互设计一方面要遵循常识,一方面也要考虑逻辑,尤其是落实到如何选择控件以及在操作流中应用这些控件等细节时。剩下的就是视觉设计了。各部分的排版、归类、相对位置,以及交互元素的设计是科学地组织工作流、规避可能出现的错误的前提。

我们通常可以通过使用一些设计组织方式和视觉策略来提升交互设计的易用性:

提供悬停反馈

显示一个元素的可交互性有很多方式,例如更改它的外观,或是当鼠标移上去的时候能够触发某些动作。当鼠标移到屏幕上的某个元素上时,我们称之为“悬停”。当鼠标滑过一个交互组件的时候,可以触发很多动作,如:改变组件的外观、让元素放大或动起来。

设计外观可交互的按钮

如果你仅仅是依赖悬停反馈,那只能促使你的客户不停地用鼠标扫过屏幕寻找可交互的元素而已。所以,将可交互元素设计得“看上去”可以点击,才能够成为操作流良好的开端。

从日常生活中获取线索

你对交互组件的视觉设计和纹理能够在某种程度上帮助用户了解如果使用这个组件。有些物品时你每天都能够接触到的,例如按钮、抽屉、拨号盘等,这些物品都能够为你设计网页上的交互元素提供很好的灵感来源。人们对于这些物品的使用机制已经非常熟练了——每个人都知道应该如何按下按钮、拉动抽屉把手,或者是转动拨号盘。

元素的聚合与嵌套

和任何视觉特性相类似,交互组件的相对位置和分类对于他们功能的暗示同样起着很重要的作用。

(1) 聚集暗示着可交互。一系列文字或图形元素聚焦在一起能够创造出一个吸引人注意的视觉单元。即使这些元素集合没有边框,但是只要它们的位置排布在一起,并且有着相似的视觉风格,它们就会被看作是一组可交互元素。

(2) 聚焦暗示着相似的功能。视觉上将一系列链接聚焦在一起,给人的感觉是这些链接的功能应该十分相似,并且在整个网站范围内的相对优先级基本差不多。

提供“你在这里”的反馈

当用户浏览一个网站是,他们会想要有一个告诉他们身在何方的机制,以及,如果他们正处在某个人物流程当中,他们会希望知道这个流程还需要多久才能够结束。为了回答这些问题,你的界面可以通过以下几种方式提供“你在这里”的反馈。

(1) 高亮选中的导航项。当用户选择了一个导航项,即便是下拉菜单中的某一项,最好能够保持被选择的那个区域高亮,让用户知道他们正处于哪个区域。

(2) 展示进度。如果某人正在完成一个复杂的工作流,最好能有一个进度条能够让他们知道现在处于哪一个步骤,以及还需要多少操作才能完成这个操作流。

被高估的颜色编码

“颜色编码(Color-coding)”是指在你的网站中每一个板块中都是用一种不同的颜色模式。颜色编码唯一一个能够起作用的环境是,你的网站只有数量不多的几个区域,而你想非常鲜明地将这几个区域分开。当只有3个板块时,用户还能比较好地将颜色及其对应的领域结合起来,这是,“颜色”本身被赋予了很清晰的含义。相反地,如果网站的模块很多,颜色编码就很容易出问题了——整个网站会变得很花哨,人们容易忽略颜色的差异。

一致性就是一切

当用户第一次来到你的网站,他们会四处看看,寻找目标。理想状况下,他们很快就会被网站的视觉设计和导航模式所吸引,开始顺着正确的路径寻找他们想要的内容。当用户第一次花了时间了解你提供的界面和交互之后,他们就不会在想花时间去更改这一认知了——交互对于他们来说应该是“透明”的。

让页面子在用户眼中变得熟悉和透明的最好方法是保持一致性。一旦你建立好了可点击元素和不可点击元素的视觉语言、决定了各个可交互元素在页面上送出的位置之后,在网站的任何地方都要遵守这一点——无论是首页还是隐藏最深的子页面。

空间最大化

虽然网页的空间非常非常有限,但你还是可以利用各种技术手段尽可能最大化地利用这些空间。如:

(1) 手风琴式导航。如果,允许不同的内容共享同一个空间。一般而言,它的标签栏——不管是水平的还是竖直的——就像百叶窗一样,每一页都可以展开,显示这个标签所代表的内容。

(2) 在悬停时显示新的内容。另一个惯常做法是通过鼠标悬停在元素上时显示一个更大的图片、更多的信息以及进一步的操作,一次来扩展导航组件。

(3) 轮转。轮转式交互能够将若干个选项放置在一个固定的区域里。如果,通过水平或者竖直地在固定区域中循环滚动选项,用户能够看到所有的选项。

(4) 增强型下拉菜单。大部分人认为,所谓的下拉菜单就只是在主导航组件下方展开的要给文字链接列表。在下拉菜单中,你大可不必局限于文字列表,甚至可以在其中加入图片等。

作者:麦秆创智  |  2015-08-08