『交互指南』即便你已经是一个交互设计师,这篇文章也值得一读,交互设计入门完全指南。

1417679217439824

准备好涉足交互设计了吗?在这篇文章中,作者对交互设计的各个方面做了简单介绍:包括历史、原则、知名设计师,以及他们的设计方法等等。即便你已经是一个交互设计师,这篇文章也值得一读。

相较于网页设计波澜不惊的开端,交互设计的成长之路漫长而曲折。最初,“网络设计师”(web designer)这个术语更像是描述一个平面设计师(graphic designer):一个关注于文字和图面编排的设计师。但是现在,大多数网站和在线应用程序都是互动的。因而,现代的网页设计师不再像以前传统的平面设计师一样,而是需要做出完全不同的考虑。为了弥补这种差距,交互设计学科应运而生。

一、什么是交互设计

仅在数十年前,第一个互动系统首次亮相,交互设计也就由此产生。新的界面带来了新的挑战,涌现出一批新的设计师来接受这个挑战。随后,一系列书籍纷纷出版,以阐释这个未知领域的方方面面。

交互设计协会(The Interaction Design Association (IxDA))解释如下:

交互设计师以创造有用且实用的产品及服务为宗旨。以用户为中心作为设计的基本原理,交互设计的实际操作必须建立在对实际用户的了解之上:包括他们的目标、任务、体验、需求等等。以用户为中心的角度出发,同时努力平衡用户需求、商业发展目标和科技发展水平之间的关系,交互设计师为复杂的设计挑战提供解决方法,同时定义和发展新的交互产品和服务。

交互设计,就像用户体验设计(user experience design),为促进人和环境的互动不断发展。但不像用户体验设计包含了所有面向用户的软件和系统,交互设计师仅考虑用户和电脑之间的互动。这样的定位被称为人机交互。

因为在我看来,最快速和最令人兴奋的工业增长是在网上发生的。本文将重点放在交互设计,因为它涉及到网站和应用程序。

二、哪些理念引领交互设计

有很多基本理念推动着交互设计的实践。这里对一些重要理念进行简单的概述:目标驱动设计、“神奇的界面”、实用性、启示性以及学习性。

2.1 目标驱动设计

虽然交互设计师并不严格要求进行用户研究,但全面的用户研究结果是最佳导向设计必不可少的。在每一个设计学科领域,艺术家必须首先承认他们的缺陷,然后设计一个解决方案。在交互设计中,用户本身往往制约着界面的发展。通常,用户使用网络的目的不同,他们可能是想在网上赚点零花钱。如果是这样,你的应用程序就要把这件事情做好。将用户研究增加到这个方程式中,设定清晰的用户目标,以使形式和功能完美结合。

2.2 “神奇的界面”

为了方便起见,我将一系列交互设计的最佳实践浓缩到这个从Alan Cooper(About Face 3: the Essentials of Interaction Design一书的作者)借鉴来的术语中。Alan指出,理想状态下界面不应该在用户的脑海中出现—他们应该简单地“看”到界面作为底层系统的扩展。为此,最佳交互设计并不存在:它们不会花很长时间来加载或回应;它们不会让用户去思考;他们不会给用户增加烦恼。就像Jason Fried,37 Signal的CEO说的:“少就是少。”只给用户他们需要的,然后走下一步。

2.3 实用性

实用性是指人们用一个工具来完成一个特定目标的难易程度。交互设计师必须考虑他们设计的界面的实用性。界面使底层系统易于被理解和使用。

2.4 启示性

剪刀的设计让不熟悉剪刀的人马上就明白哪里是手持的,哪里是剪切的。交互设计不是也应该是这样吗?最佳的工业、交互设计是不言自明的;就像那句老话讲的,形式服从功能。换句话说,链接就应该像是链接,按钮就应该像是按钮,搜索框就应该……你懂得。

这里的基本原则就叫启示性。启示性代表了参与者和他们周围环境之间的可能性行为。因为启示性充分表达了网站和服务的基本功能,所以对于设计师而言,在设计中自始至终贯彻这个概念是至关重要的。Bill Scott 和Theresa Neil列举了一个类似概念(叫做“提供邀请”),作为他们的六个交互设计原则之一。

2.5 可学习性

大量用来组织用户界面的都是熟悉的组件。如果用户习惯按按钮提交表格,在这种情况下,他们就会去寻找按钮。这就是界面使用习惯或者模式其中的一个例子。当面临相似的设计挑战时,优秀的交互设计师不会每一次都去重新发明一些东西。相反,他们会利用已有的设计。网上很多交互设计都记录在Yahoo!的设计库中。

总而言之,如果手上的设计问题确实需要特殊处理,交互设计师应该花大力气让这个界面易于掌握,或者易于学习。这一点需要对当下的设计惯例、启示性及网络整体的实用性都非常熟悉。

1417679379398677

三、交互设计师做什么

交互设计师在整个开发过程中扮演着关键角色。作为一个项目团队的一部分,他们通常会进行以下活动:

3.1 组织、宣传设计策略

尽管这里的界限是模糊的,但有一点是肯定的:一个交互设计师需要知道她/他为谁设计,以及他们的目标是什么。通常,这些由信息架构师和用户研究人员提供。反过来,一个交互设计师将评估设计目标,展开设计策略。他们或单独工作,或与其他设计师合作。设计策略帮助团队成员在什么样的交互能帮助用户实现目标方面达成共识。

3.2 确定和构建交互框架

当交互设计师有一个刺激他/她设计的好的想法时,他/她可以开始构思这个界面,如何用它来辅助必要的交互活动。在这里细节是魔鬼。有些专业人员会在便签本或者是写字板上绘制这些互动设计;而另一些则选择用软件应用程序来帮助他们;有些人会选择团队合作,有些人则独立工作。这些都基于交互设计师本身以及他们的工作流程。

3.3 交互雏形

根据不同项目,交互设计师下一个步会开始创建雏形。一个团队创建交互雏形的方式有很多,在这里就不一一详细描述。其中包括:xhtml/css雏形创建模式,纸面雏形创建模式,甚至protocasting.

3.4 随时关注

对于一个已入行的交互设计师而言,最大的挑战之一是这个行业的发展速度。每天,新的设计师给这个行业带来新的活力。因此,用户期待这些新的交互会出现在你的网站上。聪明的交互设计师会经常性地在网络上搜索寻找新的交互模式,利用新技术(比如CSS3或者HTML5)来适应这种变化,然后推动媒体不断向前发展。

四、知名交互设计师

Cennydd Bowles

致力于使网络变得更好,他在电子商务、政府和社区网络设计方面有数年的经验。作为一个Clearleft用户体验师,他非常努力地思考、记录和实践信息架构、交互设计和注重实用性,好像没有明天一样。Cennydd在他的博客中写了关于用户体验和交互设计的相关内容。

1417679636674183

Nathan Curtis

是EightShapes的创始人和主要负责人,EightShapes是一个位于华盛顿的用户体验咨询公司。Nathan从1996年开始从事包括用户体验在内的不同工作。他感兴趣的领域包括信息架构,交互设计,可用性研究和前端开发。他从2006年开始创建EightShapes,自此他帮助改善了华盛顿及全美国的客户的用户体验。

1417679433218824

Tim Van Damme

是一个24岁的界面设计师,他在比利时长大和工作。当他不再为他的公司Made by Elepant工作时,他会四处旅行或出席会议。Tim的个人博客在。

1417679463958113

Uday Gajendar

是一个交互设计师,在美国硅谷有近十年的工作经验。他的作品包括企业软件,消费类网站,和在Oracle,Adobe,Cisco,Netflix公司,以及像frog和Involution这样的机构的VOIP应用程序。他取得了密歇根大学的工业设计学位以及卡内基梅隆大学的交互设计学位。Uday在美学、领导力和策略方面不断拓展他的专业领域。他也在San Jose State University教授交互设计。Uday经常在他的博客Ghost in the Pixel中揣摩交互设计特殊的一面。

1417679498466526

Theresa Neil

是一个在德克萨斯州奥斯汀市的用户体验顾问。从2001年起,她领导设计了超过80个实时网络、桌面和移动应用程序。她最近的客户包括Zenoss, Innography, PayPal, Pervasive,和OneSpot。

1417679515260820

Bill Scott

是在加州Los Gatos的Netflix公司的用户界面设计主管。他把界面设计和设计手法结合在一起。Scott之前是Yahoo! Ajax的传播者以及Yahoo!图库的管理员。他对设计实用型产品技术上和创意上独到的见解为IT界写下了一段迷人的历史。欢迎关注BillScott的博客Looks Good Works Well。

1417679532971260

五、交互设计工具

交互设计师用一系列不同的工具来完成他们的工作。无论他们是在一张餐巾纸上画一个交互草图还是给客户介绍一个模拟雏形,他们的目的是相同的:通过交谈来沟通。最重要的是,交互设计师需要良好的沟通。以下列出一小部分用于帮助沟通的工具。请记住当网页界面最终创建好时,需要用诸如CSS、HTML、Flash等面向用户的(前端)技术来完成。

  • BALSAMIQ MOCKUPS是一个非常棒的Adobe Air应用程序,使构建交互变得非常容易。Balsamiq团队做得非常出色,为用户提供了大量实用的应用设计的交互设计模板。此外,用户可以很快地跟客户分享构建框架,建立起框架与更多方面间的联系。
  • Omnigraffle是一款适用于Mac OS X系统的出色的绘图软件。交互设计师可以利用像Omnigraffle这样的绘图软件创造出温和的美感。Omnigraffle加载了一系列值得称道的功能,包括:点击即可显示功能(例如,你可以展示一个模式如何运作),绘制bezier曲线等。
  • 尽管最早InDesign是一个页面布局的应用程序,主要是平面设计师在使用它,但它在交互设计中的实用性不容忽视,特别是它引入了EightShapes Unifyframework(见下文)。它是Adobe creativeSuite中的一员,InDesign可能是将工作流程简单化的一个理想工具,它使你的团队工作起来更加容易。
  • 最后但也是相当重要的,我们不要忘了永远忠诚的Moleskine笔记本。用铅笔和纸来绘制给架构过程增加了一点人文因素,这是其他软件工具所不能比拟的。再者,所有人都可以参与。即便是最差的设计师都能画“方框和箭头”。记得花钱买一些这样的笔记本,然后在跟客户第一次见面的时候带上他们,特别是当白板不是那么方便的时候。

5.1 相关资源

  • 用Balsamiq Mockups建立的Mockups To Go,是一个由用户提供,可以马上使用的交互设计组件和设计模式的合集。如果你发现自己在做一些现在已有的东西,你应该立刻去查看这个设计库;他们或许有和你的设计非常接近的模板。
  • OmniGraffle version 5.x.Konigi公司免费提供了一系列制作线框(低保真网页设计图)的图形。它包含了大多数你需要用来创建用户界面的基本元素。
  • Unify使你的用户体验设计更统一。简介如下:EightShapesUnify是一个模板、图库和其他组件的合集,它使用户体验设计师的设计更统一,有效和快速。这个系统使用了AdobeCreative Suite,最主要的一点,InDesign是其中至关重要的一个制作工具。
  • 总之,EightShapes尝试规范交互(和用户体验)设计师的工作流程。我还没有尝试使用这个系统,但它的信息非常全面,同时有教学视频,你可以马上开始自学。

5.2 把你的草图都放在一起,让所有人都参与进来。

  • IxEdit允许在网页里创建雏形。用这个加载在浏览器中的工具,可以将交互设计师创建的一些初级的xhtml/css/javascript的交互雏形可视化,从而加快设计的流程。IxEdit是一个被称为“基于JavaScript的网页交互设计工具。通过IxEdit,设计师可以进行DOM-scripting的实践操作而无需写代码来改变、增加、移动或者变换他们网页上的动态元素”。

六、交互设计协会

用他们的话来讲,IxDA提供了一个讨论交互设计以及帮助其他热衷于交互设计的人收集和增长学科知识的网络平台。

尽管AIGA(AmericanInstitute of Graphic Arts)最初为平面设计师而成立,该组织自身意识到,平面设计师更频繁地给新媒体设计组件,在交互设计中起着重要的作用。在美国各地都有当地的AIGA组织。在我熟悉的组织里他们主办过很多活动,如Photoshop Layer Tennis,或艺术展览等。AIGA很值得参加。

七、有关交互设计的书单

可以排好几个网页。在这里只列了其中最具代表性的5本。

  1. Designing WebInterfaces:Principles and Patterns for Rich Interactions
  2. The Principles of Beautiful Web Design
  3. Designing the Obvious:A Common Sense Approach to Web Application Design
  4. About Face 3: The Essentials of Interaction Design
  5. Sketching User Experiences:Getting the Design Right and the Right Design (InteractiveTechnologies)

来源:Davey8149的微博

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/3523/

(0)
Smiler李想Smiler李想
上一篇 2015-01-27 13:35
下一篇 2015-01-28

相关推荐

  • 新用户首次体验有多重要?又该如何提升?

    一款优秀的移动产品应当有一套可靠的新手体验设计策略。不要把自己限制在产品里面,从核心价值入手准备——抓住每一次可以向用户传达价值的机会。不管是应用的广告或者一个引导页,抓住任何机会去诠释产品的价值与功能吧。

    2017-05-06
  • 设计中的交互设计——什么是交互设计

    上一篇我们探讨了设计的本质,结论是设计的本质是解决问题,满足人们的需要。有的朋友可能会问:工程学也是解决问题,比如造一座桥,就解决了一条河两岸的交通问题。那么设计和工程学有什么区别呢?这里我想补充一点:设计是漂亮得解决问题,即设计除了需要考虑如何为人们服务,还需要考虑以一种美观的、令人赏心悦目的方式来服务。因此,“漂亮”这个因素,也很必要。既然交互设计是设计学科里的一个分类,那么交互设计一定首先满足设计的本质:漂亮得解决问题。下面我们来...

    2018-03-13
  • 美国交互设计“综合类&艺术类”院校申请差异对比?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-30
  • 一种强大的交互模式:应用内的手势

    手势是一种强大的交互模式吗?是的,移动设备已经从一块砖头发展成由手指驱动的复杂计算机了。触摸和手势交互具有很大的潜力,使得移动体验更加的轻松和有趣。

    2017-05-09
  • 用户体验地图(User Experience Map)制作过程中的一些误区

    作为一种新的产品设计以及用户体验设计工具,User Experience Map(用户体验地图)已经被越来越多的产品经理以及设计师们所接受;确实,在产品策略、功能设计、用户服务等一系列产品发展过程中,用户体验地图的建立可以直观的呈现用户在每一个目标任务下的行为、情感、思考过程,有效的为产品工作者提供各方面的信息。然而作为一种新的工具,铺天盖地的方法论将产品工作者淹没在前进的路上。大家都热衷于建立一个这样庞大而系统的“图片”,都不约而同的将注意力放在如何产出这个Map上,甚至是依葫芦画瓢根据国外的产出物反推这个东西是怎么制作出来的。基于这种现状大多产出的Map都会“徒劳无功”,着急产出的同时你已经忽略了很多原则性的东西。下面我们就从以下几个方面来聊一聊这个过程中容易进入的误区;

    2017-05-26
  • 演示|一个交互设计师从接收需求到产出的过程

    从接收需求到产出?这过程中到底经历了什么?不妨来阅读本文作者的文字,一起来了解了解吧~【需求概述】
    商品,增加商品类型,分为普通、赠品两种。赠品可下单购买,也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别,设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品,配赠条件满足时,在支付订单前提供选择赠品操作,代理可选择配赠金额范围内的任意赠品,也可不选择;选择赠品,并支付成功后,对应订单增加配赠商品信息。
    注:配赠金额=订单面价金额×对应等级配赠率。目标用户:某护肤品牌微商代理
    年龄:18-40占绝大多数
    性别:女性占98%
    职业:微商
    设备:iphone及以上
    场景描述:某天,代理a在清点仓库库存的时候,发现最近热销的某品牌商品库存都不多了,想着,到时候缺货会影响自己的销售及客户的满意度,暗想着,要再进些货才行,于是她对库存不足的商品进行了一下盘点,盘点完毕后,她拿出手机,将需要订货的商品一一加入购物车,加入完毕后,她核对了一下商品的金额,正准备点“支付“按钮进行付款,忽然看到付款按钮上方有一条提示,说”还差500元就可获得免费赠品“,她心一动,反正要买,只要加500块钱,就能免费获得赠品,有何不可?于是她当即便在某一商品下面增加了数量,满额后,提示文字就变成了”可获得免费赠品“,确认金额后,她立即点了支付按钮,来到确认订单的页面,快速浏览了一下自己的收获地址及信息,便赶紧看获得什么样的赠品,果然,在支付的上方又看到了配赠说明的提示,提示我”选择赠品“(这里说明一下,之所以将提示语都放在同一位置,是为了让前面界面的视觉路径在同一水平点上,使页面结构更整洁),点击进入”选择赠品“界面,参照页面给出的赠品金额提示,选择了想要的赠品,由于选择的赠品太多,从上下拉到下浏览起来效率太低,于是她又点击了按钮”已选赠品“进行复核了一遍,确定完毕后,回到确认下单的页面,便满意的点击了”支付“按钮,发现金额与未选赠品前的金额一致,便放心的提交了订单,订单支付完毕后,引导代理来到了订单列表页面,上面还特意标明了”含赠品“字样提示,a点击进去再次看了一下所购的商品及赠品,准确无误会,抱着愉悦的心情关闭了应用与手机。
    ”1、商品列表及商品详情,赠品类型的商品须显示对应图标;
    2、赠品类型商品同普通商品一样可正常下单购买;
    3、购物车,根据代理当前所选商品的总面价金额及当前代理对应配赠率,如果配赠金额不为0,则显示相应配赠金额及提示信息(若当前配赠金额暂不足以购买系统当前上架的任意赠品,则显示提示信息:“还差××就可获得免费赠品”;若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则显示提示信息“可获得免费赠品”);如果配赠金额为0,则不显示相应配赠金额及提示信息。
    4、确认订单界面,若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则提供选择赠品操作项。未选择赠品时,操作项显示配赠金额、及“选择赠品”文案。已选择赠品时,若配赠金额-已选择赠品的总面价>0,操作项显示“已选择××元赠品,还可选择××元”;若配赠金额-已选择赠品的总面价=0,操作项显示“已选择赠品”。点击操作项进入选择赠品列表。
    若当前配赠金额暂不足以购买系统当前上架的任意赠品,则不提供选择赠品操作项;
    5、选择赠品列表,列表显示当前配赠金额可购买的所有已上架的且库存不为0的赠品类型商品,用户可点击选择,也可取消选择,当前选择的赠品总面价金额=配赠金额时,不可再继续选择更多(若再点击选择赠品,则提示“不能再选择更多了”);提供显示选择提示信息“还可选择××元赠品”(××为配赠金额-已选配赠商品总面价)、“查看已选赠品”操作、“确认”操作。
    点击“查看已选赠品操作”,可弹出浮框列表显示当前已选择的赠品信息。浮框提供关闭按钮,可点击关闭浮框;
    点击“确认”操作,确认当前已选择的赠品信息,返回确认订单界面。
    6、个人中心,增加显示当前代理的配赠率信息。
    7、订单列表,若对应订单含有配赠商品信息(注:如果只是正常下单购买的赠品类型的商品,则同普通商品订单。此处指的是确认订单时根据配赠金额范围免费选择的配赠商品),则显示“含免费赠品”标签;
    8、订单详情,若对应订单还有配赠商品信息(同7),则列表显示用户选择的免费获赠的商品信息(注:正常下单购买的赠品类型商品,显示在同普通商品位置。这里只显示确认订单时选择的免费配赠商品),并显示总的免费配赠金额信息。

    2017-05-07
  • 分屏式设计正在逐渐流行,常见的玩法有哪些?

    不论如何,内容为王,而形式服从于内容,谨慎选择。

    2017-05-06
  • 登录表单的那些事儿

     雅婵总结并供稿于我是UE网,转载请注明来自我是UE网。

    2015-06-12
  • 交互设计案例-闲鱼产品分析

    闲鱼·产品分析 Completion Date    Completer    闲鱼Versions       Phone Type March 11,2015     niu hang      V_2.1.3_Android     MEIZU MX4 Pro 1.战略层 用户需求:闲置物品的买卖(包括且不限制于二手物…

    2015-05-07
  • The Benefits of Mobile Interaction Design

    Mobile interaction design is the process of creating user interfaces for mobile devices. It involves creating a user experience that is tailored to the device’s size, capabilities, and context. Mobil…

    交互设计 2023-04-03