maxOS

交互设计初学者指南

产品

在最开始,网页设计师走了很长一段路。起初的“网页设计师”更像是在描述一个“平面设计师”,因为和两者都在关注文字和图像。

而在今天,大多数的网站和线上应用都需要和用户互动。其次,在很大程度上,由于各种因素,现代的网页设计师不再像传统的平面设计师那么简单。一个区别就是对交互设计的学习。

本文将作为那些对学习交互设计感兴趣的人的一个起点,为了做好这些,我们需要了解交互设计的历史,指导原则,和一些高手以及所用到的工具等。如果你是一名交互设计师,并且正好在读这篇文章,我希望你可以通过留言把自己的观点分享给大家。

什么是交互设计

几年前,当第一个交互系统出现后,交互设计才开始崭露头角。全新的界面给整个设计行业带来了新的挑战,就在这时,一个全新的职位应蕴而生,这就是交互设计师。随后一些书籍对这些迄今为止依然未知的领域进行了诠释。

交互设计师协会(IxDA)解释说:

交互设计师负责根据以用户为中心的原则来创建有用,并且可用的产品。交互设计师的训练是基于用户真实的目标,任务,体验,需求和期望。在实际操作中,以用户为中心,尽量平衡用户需求,商业目标和技术能力,交互设计师为复杂的设计提供解决方案,同时定义新的交互产品和服务。——IxDA

交互设计有点像用户体验设计,不断促进人与环境之间的交流互动。与用户体验设计不同的是,在所有的面向用户的软件和系统中,交互设计师通常只关心用户和计算机之间的交互。这个领域,被称之为人机交互

本文将主要围绕应用和网站的交互设计来讨论,因为在我看来,增长最迅速的行业莫过于互联网。

是什么在驱动着交互设计

驱动交互设计的因素有很多,这里我只做简要的概述:目标驱动设计,魔法界面,易用性,情境支持,可学性。

目标驱动设计

虽然交互设计师对用户需求的研究并不十分严谨,进行全面的用户研究则需要根据最佳的设计需求来进行。在设计学的每个学科中,设计师都必须首先承认自己所受的约束,然后再提出解决方案。而在交互设计中,用户自身的限制通产来自于基础界面。当用户在访问你的网站的时候脑子里通常会有一些既定的目标,也许他们是想要在线平衡收支状况,因此,你的后台应用必须将这一目标完美的实现。根据用户的行为,明确用户的目标,然后将功能和形式完美的结合。

魔法界面

为了简单起见,我从 Allen Cooper(About Face 3: the Essentials of Interaction Design 的作者)那里借鉴了一些经验,提取了一些交互设计的最佳实践放在这个阶段。Allen 说,理论上,用户并不会对界面形成一种心理认知,他们只简单的把界面看作是底层系统的一个扩展。因此,并不存在这样最好的交互设计:不会花很长时间来加载/响应,不让用户思考,不让用户觉得失望。37 Signal 的 CEO 说:“越少越好”,给需要给用户能够帮助他们完成任务的功能,并沿着这条路走下。

易用性

易用性是指用户可以很方便使用软件来达到他们的目的。自始自终,交互设计师都必须关心他们所设计的内部界面的易用性。界面是的系统底层的状态更易于理解和使用。

情境支持

剪刀是个非常不错的例子
Photo by Ivy Dawned.

剪刀的设计是如此的明了,即使是不熟悉见到的人也可以很清楚的知道它的使用方式。最好的(工业/交互)设计就是那些不言自明的。俗话说,形式遵循功能,意思就是链接看起来就应该像链接,按钮看起来就应该像按钮,搜索框呢……你懂得。

在我今年的早期的一篇文章中提到关于设计的基本原则是*“功能可见行”(affordances)*。功能可见性代表着用户和环境之间行动的可能性。因为“功能可见性”表达了在网站和服务之外大量的基础功能。更重要的是,设计师在他们的设计中利用了这一概念的统一性和团结性。Bill Scott & Theresa Neil 提出了类似的概念(提供邀请)作为他们六大交互设计原则之一。

可学性

多数可用的界面通常是由一些熟悉的组件构成。如果用户使用一个按钮来提交表单,那么到时候他们就会去寻找这个按钮。这是一个极好的例证。好的交互设计师从来不会重新发明轮子。相反,他们希望有一套设计的模具。许多线上设计的模具都被保存在雅虎设计模具库(Yahoo!’s design pattern library)。

如果设计需要一个非常独特的界面,那么交互设计师必须在界面的可学性和易学性上付出极大的努力。这种情况需要设计师对当前的设计理念,功能可用性以及整体网络可用性都极为了解,

交互设计师到底做什么?

交互设计师在整个开发进程中都扮演着极为重要的角色。作为项目团队的一部分,他们通常需要完成以下几项:

建立/通告设计策略

这里的界定并不是很清晰,但是有一点是可以肯定的,作为一个交互设计师,需要知道他是在为谁而设计,对方期望是什么。对方通常是信息架构师(Information Architect)和用户研究员(User Researcher),反过来,交互设计师也需要评估目标,并且给出一个设计策略。设计策略有助团队成员更好的理解何处需要交互设计,以此来促进用户达成目标。今年早些时候我写一遍文章来概述如何创建设计策略(how to create a design strategy)。

识别和线框的重要交互

当交互设计师拥有一个关于策略的好想法后,这回激励他开始设计,首先是画界面草图,以促进必要的交互。这里的区别在于细节,一些专业人士会在素描板上来构思他的交互设计,另一些人则使用计算机;有些人喜欢通过合作来设计,有些人则单独设计。这一切都取决于设计师自身和他的工作流程。

原型交互

根据项目的不同,交互设计师的下一个逻辑思考可能会需要创建原型。对于一个团队来说,有多种方式来构建一个原型,这里就不细说了。其中包括一些 XHTML/CSS 原型,纸上原型,甚至是 protocasting

跟随潮流

作为一个交互设计师最困难的是行业的变化速度,每天都会有新的设计方向出现。因此,用户希望这些新的交互设计会出现在你的网站上,明智的设计师会不断的在网络上探索新的交互来对这样的变化,利用新的技术(HTML5或者CSS3)来不断地提升自己。

著名的交互设计师

CENNYDD BOWLES

Cennydd Bowles 喜欢把一个网站做的更好,他专注于电子商务,政府和社区站点,在这方面拥有好几年的经验。作为 Clearleft 的用户体验师,他认为信息架构的写入和练习、交互设计的易用性都好像没有明天。

Cennydd Bowles 在他的博客上发布了一些关于用户体验和交互设计的文章。http://www.cennydd.co.uk/

NATHAN CURTIS

Nathan Curtis 是 EightShapes, LLC 的创始人兼负责人。这是一家用户体验咨询公司,总部位于华盛顿特区。Nathan 自 1996年 就开始研究不同学科的用户体验设计,包括信息架构,交互设计,可用性研究和前端开发。他于 2006年 开始创立 EightShapes,帮助改善用户体验,他的客户如今已遍布全美。

来看看 Nathan 的公司 EightShapes他的博客

TIM VAN DAMME

Tim 是个 24岁 的交互设计师,他在比利时长大。当他在公司(Made by Elephant)不忙于交互设计的时候,他会去旅游或者参加研讨会。

Tim 的个人博客:MaxVoltar.com.

UDAY GAJENDAR

Uday Gajendar 是一个在硅谷工作了将近十年的 UI 设计师。他的作品包括企业软件,消费者网站,以及为 Oracle,Adobe,Cisco,Netflix 的 VoIP 应用,以及一些例如青蛙和退化(frog and Involution)这样的机构。他获得了工业设计学位(密歇根大学的美术学士)和交互设计(国卡内基梅隆大学设计学硕士),Uday 在他的研究领域发表了有关美学,领导力和战略的演讲和文章,他同时还在圣何塞州立大学教授 UI设计。

Uday 经常在他的博客中猜想一些特殊的交互设计,这里是他的博客:Ghost in the Pixel

THERESA NEIL

Theresa Neil 是德克萨斯州奥斯丁的一位用户体验顾问,自 2001年以来她设计了不下80款网页,桌面和移动应用。在她的客户中包括:Zenoss, Innography, PayPal, Pervasive, and OneSpot.

她的博客中偶尔也会更新一些关于交互设计的文章。

BILL SCOTT

Bill Scott 是加利福尼亚州 Los Gatos 的 Netflix 的 UI工程师的负责人,负责界面工程的设计。Scott 是前 Yahoo! Ajax 的传教士,并且管理 Yahoo! Design Pattern Library。

他在 IT界有着很多独特的历史,因为他在设计产品可用性时对于技术和创意的独特理解。

这里是他的博客:Looks Good Works Well.

ON TWITTER

辅助工具

交互设计师通常需要不同的工具来完成工作。无论是在纸上素描,还是向客户展示一个原型,其目的都是相同的:交流。对于交互设计师来说,沟通高于一切。一下列表只是一部分有助于沟通的工具,谨记,网络界面的的设计通常是面向用户的前端技术,CSS/HTML,Flash等。

Balsamiq Mockups

Balsamiq Mockups 是一个很棒的 Adobe Air 应用,可以使画线框图更加简便。Balsamiq 团队真的很棒,他们为用户提供了很多当今流行的交互设计模型,此外,用户可以快速与客户共享线框图,以便交流等等。

了解更多……

OmniGraffle

OmniGraffle 是 Mac OS 上一款主要的做图软件,交互设计师可以利用这个毫无审美的软件来让设计师专注于交互设计,OmniGraffle 有一些很贴心的功能,单击以显示(比如展示一个模态框[Modal Box]如何工作),素描/贝塞尔曲线等。

了解更多……

Adobe InDesign

尽管 InDesign 最初被设计成为一个“排版“软件,主要被用于平面设计领域,不过它的一些特性还是值得注意的,特别是引入了 EightShapes Unify 框架(见下文)。InDesign 也许会是简单创作工作流程的理想工具,因为他是 Adeobe创意套件(Adobe creative Suite)的一部分,意味着其他创意团队的人员可以更容易的去理解曲线。

了解更多……

Moleskine

最后,当然也很重要,让我们不要忘记忠实的 Moleskine 记事本,用铅笔和纸来进行创作,在交互的过程中加入人工元素,这是任何应用都无法比拟的。而且每个人都会用,即使是最差劲的设计师也会画”箭头和方块“,一定要在闹几个这样的本子,把它带到你的客户会议上,特别是在干擦板不方面的时候。

了解更多……

相关资源

Mockups To Go

A Google Wave mockup on Mockups to Go

Mockups To Go 是由用户共享现成的 UI组件和设计模型,这些组件使用 Balsamiq Mockups 创建。你应该多去他们的设计图书馆里看看,以防自己重新创建了已经存在的东西,他们通常会有很多模版,有一些可能非常接近你所创建的。

OmniGraffle Wireframe Stencils

OmniGraffle 功能可见性模具

Konigi 为 OmniGraffle 5.x 免费提供了很多线框示意图(低保真的网页示意图)。OmniGraffle 拥有绝大多数最基本的元素,你可以很方便的创建用户界面示意图。

EightShapes Unify

Unify 为你的产品提供统一的用户体验

通常人们这样理解:EightShapes Unify 集模版,组件库和其他相关资源于一身,使得用户体验设计师的产品更加统一,同时加快交付速度。它利用 Adobe创意套件(Adobe Creative Suite),InDesign 是最关键的创作工具。

总之,EightShaps 试图将交互设计和用户体验设计师的工作流程规范化,如果你没有使用过,它会有一套入门教程来指导。

Markers, Paper Templates, etc.

将你的素描本放在一起,让每个人都参与到其中

Jason Robb 收集了一些关于素描交互工具的详细信息,从这里可以阅读他的文章:sketching user experiences

IxEdit

IxEdit allows for in-page prototyping

利用可视化交互工具的内置浏览器,可以加速交互设计师设计 XHTML/CSS 原型。IxEdit 自称是一个基于 JavaScript 的网页交互设计工具,设计师无需更改网页的任何元素就可以测试 DOM脚本。

协会

交互设计协会(IxDA)

用他们自己的话来说:

交互设计协会(IxDA)论坛提供一个供交互设计师交流的平台,同时也包含一些有助于交互设计的学科。 —— http://www.ixda.org/

了解更多……

美国平面设计学会(AIGA:American Institute of Graphic Arts)

尽管平面设计协会是为平面设计师所创建的,不过 AIGA 也认识到在新媒体的平面设计当中,交互设计扮演了重要的角色。在美国,AIGA 会时常举办一些活动,例如我所熟悉的 Photoshop Layer Tennis 或者艺术展览等,这些展览都非常值得一去。

了解更多……

书籍

你可以在网上找到很多关于交互设计的书籍,但是我在这里只推荐这 5本,如果你希望扩展阅读,可以看看我们的用户体验书籍推荐

[![](https://i1.wp.com/assets.uxbooth.com/uploads/2009/12/the_principles_of_beautiful_web_design.png?w=130)](http://www.amazon.cn/gp/product/098057689X/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=098057689X&linkCode=as2&tag=jay1803-23) [![](https://i2.wp.com/assets.uxbooth.com/uploads/2009/12/designing_the_obvious.png?w=130)](http://www.amazon.cn/gp/product/0321749855/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=0321749855&linkCode=as2&tag=jay1803-23) [![](https://i0.wp.com/uxbooth.s3.amazonaws.com/wordpress/uploads/2009/07/about-face.jpg?w=130)](http://www.amazon.cn/gp/product/B007Q2XXXG/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B007Q2XXXG&linkCode=as2&tag=jay1803-23) [![](https://i2.wp.com/assets.uxbooth.com/uploads/2009/10/web_interfaces.png?w=130)](http://www.amazon.cn/gp/product/0596516258/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=0596516258&linkCode=as2&tag=jay1803-23)
### 关于作者

fdaba74525c050cffd298cd7b959d0cc Andrew 是设计界的终身学生,他在 2008年共同发起了设计出版物 UX Booth 来分享他的经验。目前他是这里的主编,他在倡导客户应当以用户为中心的同时,也涉猎于市政设计。目前他居住在西雅图的国会山。

了解更多…

*原文的书籍链接替换成了 Amazon中国,尽量替换为中文版 虽然作者说的是五本书,但是原文中也只有这四本

作者:Andrew Maier
**翻译:**Max Cheung
原文链接:Complete Beginner’s Guide to Interaction Design