帮你从零开始掌握交互设计的学习笔记

最近两个月给公司的伙伴们做交互设计的分享,这是第一期分享的内容。在这次分享中,我认真梳理了交互设计师掌握和精通这门技艺的方法。我认为,如果想成为拔尖的设计师,只有这条路可走。

什么是交互设计

用户界面有两部分的设计:交互设计和视觉设计。在下图中,左边和右边分别是微信的交互设计和视觉设计。

帮你从零开始掌握交互设计的学习笔记

交互设计 vs. 视觉设计

交互设计的产出物是可交互的低保真原型,设计内容包括:

  • 信息架构;
  • 页面布局;
  • 流程跳转。

1. 信息架构

信息架构,是为了让用户在使用APP、软件、网页的时候,能够快速找到自己需要的信息、资料、功能,并且在使用的过程不会迷路。它有层级、有逻辑顺序、要能反映信息(功能)的重要程度和关系。

信息架构的组成部分:
1.组织系统:关注如何组织信息。比如小说,按篇幅,可以分为短篇、中篇、长篇;按年代,可以分为:古代、近代、现代、当代;按题材,可以分为武侠、推理、历史、言情等等……从哪个角度来组织、到底多少层合适,需要设计者的判断和权衡。比如当当网的商品组织方式:

帮你从零开始掌握交互设计的学习笔记

组织系统

2.导航系统:协助用户了解他在哪个位置,以及可以到何处去。比如微信的功能导航:

帮你从零开始掌握交互设计的学习笔记

微信功能导航

豆瓣的功能导航:

帮你从零开始掌握交互设计的学习笔记

豆瓣功能导航

3.搜索系统:关注用户如何搜索信息。比如淘宝的搜索:

帮你从零开始掌握交互设计的学习笔记

搜索系统

4.标签系统:关注如何表示信息。我们可以把标签系统理解为如何为信息和它的组织方式命名。比如我们刚才提到的小说按题材,可以分为武侠、推理、历史、言情等等,其中的武侠、推理这些就是信息的标签。

一些大型网站,比如淘宝、当当、京东等,设有专门的信息架构师角色。而大部分的APP、应用软件中,信息架构由交互设计师设计。[1]

2. 页面布局

页面布局的工作,就是确定每个页面有哪些元素,它们位置、顺序、分组,要突出什么元素,弱化或隐藏什么元素。

帮你从零开始掌握交互设计的学习笔记

页面布局

在设计布局时,有一个要特别注意的事情,就是尽可能减少父页(所有布局抽象出来的模板)。比如说360安全路由的APP,它的父页如下,所有页面布局,都是由这四个模板变化而来。这样的软件,用户在使用时,会感觉统一、易学。

帮你从零开始掌握交互设计的学习笔记

360安全路由

3. 流程跳转

设计页面之间的跳转逻辑。通过链接、按钮还是手势;单击还是双击;上划还是下划……我们在做可交互的原型时,要尽可能贴近软件的最终效果。

帮你从零开始掌握交互设计的学习笔记

流程跳转

交互和视觉的分工

交互设计师在设计页面布局时,为了突出主次,会设计字体大小、间距、颜色等内容,但这不是最终效果。最终的字体、颜色、图片、图标、大小、间距等,由视觉设计师确定。

交互设计师在设计流程跳转时,会设计过场动画,但这同样不是最终效果。最终效果由视觉设计师(或动画设计师)确定。

区分交互和视觉有一种快速判断法,那就是web工程师平时写的css里的属性和参数,都属于视觉设计的范畴。所以很多公司会多招几个UI设计师,他们不仅仅负责视觉设计,还负责输出css样式表。

交互和视觉对人的要求

交互设计和视觉设计对人的要求不同,并且往往越往深入做,这两者所需的性格、背景和思维方式差别越大。可以简单地理解,交互设计是靠理性和逻辑驱动,而视觉设计是靠感性驱动。这也是为什么目前的交互设计师中理工科院的学生占了很大比例。[2]业界也有很多开发工程师转做交互设计的成功案例。所以做开发,学交互设计有优势。

交互和视觉高度交叉

我上面说,交互设计和视觉设计的分工,也说它们对人的要求不同。这可能会让大家误以为,这两个角色的工作比较独立,各自负责各自的内容。交互不用管视觉,视觉不用管交互。

但这是不对的。交互和视觉,是高度交叉的两个领域,无法简单的分隔。

首先,交互设计师一定要有很好的视觉设计的感觉,因为一个页面布局的好坏,会直接影响视觉的发挥。如果交互设计师导入一个没主次,结构很糟糕的设计给视觉设计师,他只有两个选择,一、降低自己的水平,随便做一个;二、自己动手,重新设计一个。

其次,交互设计会影响视觉设计,视觉设计也有可能反过来,让交互设计做修改。举个例子,我们最近正在做的一个功能。

帮你从零开始掌握交互设计的学习笔记

案例

最早的交互设计里没有列表选择功能。后来在视觉设计过程中发现,我们的窗口大小,如果要保证视频旁边不出现黑边,可能会留很大得空隙,如果布局满了,又会导致视频出现黑边。一种方式,是把底下的点赞、分享、评论移上来,放到右边,但这样的排版怎么也不会满意。况且我们这个页面最核心的目的,是让用户看视频。后来我们想了一下,增加了选集的功能,虽然这样增加了开发工作量,但是对用户来说,在这页面可以直接导航到其它视频,使用体验更好,也解决了我们看视频黑边的问题。

说这些想要表达的是,我们要时刻注意,自己是在同视觉设计师配合完成一个作品。我们设计的好坏,会影响他的工作。所以在介入真实项目前,我们要通过大量的学习+练习,达到准设计师水平。

如何学习交互设计

1. 看

交互设计师需要有好的视觉设计的感觉,需要有基本的审美能力。如何提升审美能力?只有一种方法,看。

我们要看大量优秀的设计作品。现在有很多平台可以很容易的找到世界上顶尖的设计师们设计的东西。比如behancepinterestFWAdribbble等等……如果嫌国外的访问太慢,也可以选择国内的,比如花瓣

不要只看软件界面,也看看其它领域的设计作品,好的产品、好的建筑、好的电影海报、好的摄影作品、好的艺术作品。看到喜欢的,把它们收集起来。

看了后,该怎么判断自己的审美能力有提升呢?

隔几个月去看看自己前几个月喜欢的东西,当时觉得不错,现在是不是觉得丑的掉渣?如果是的话,审美水平就在进步。[3]

还有一种办法,把自己平时喜欢的、会分享的设计,同设计领域的人沟通,听听他们的意见。一个专业的设计师,不会只说,这个好,那个不好,他们说为什么好,为什么不好,比如「这个界面主次不够突出,重点元素没有强调出来」、「没有引导用户的视线」等等等等……

2. 用

我们在dribble、在花瓣,看的都是单个页面。交互设计不只是设计一个个页面,它还得把页面串起来。所以看单个页面还不行,我们要用、要体验实际的产品,看看别人是怎么把一个个页面组合成产品,页面和页面间的过场是怎样的。

怎么用呢?很简单,我们每个人都有手机或pad。去下载优秀的APP,每个APP花20分钟,把所有页面、所有功能跑一遍。优秀的APP来源,可以是应用市场每个分类下的Top20,也可以来自一些优秀的组织、用户推荐,如最美应用、如知乎上的APP推荐等。

我还有一个很诚恳的建议。如果有条件的话,最好买个MAC。为什么设计师喜欢用MAC?我们看几张对比图。

PC和MAC上的QQ。

帮你从零开始掌握交互设计的学习笔记

vs.1

PC和MAC上的应用市场。

帮你从零开始掌握交互设计的学习笔记

vs.2

PC上的「精美」PPT模板,和MAC上的keynote模板。

帮你从零开始掌握交互设计的学习笔记

vs.3

MAC的软件比PC的软件优雅太多,完全不在一个level。如果我们每天看的、用的都是最好的产品,我们的审美能力自然会提升,对什么是好设计,什么是坏设计会更敏锐,更有感觉。

3. 想

认知科学研究发现:

世界上最好的象棋选手之间的差距,其实并不是他们思考能力的差异,或者是否能走出一招妙棋,而是他们熟悉的棋谱的多寡。[4]

做交互设计也是这样,决定交互设计师的设计水平,是在做设计时,设计师能够想起多少个相似的的设计,并借鉴、组合、改进它们,成为自己的设计。

我们看了那么多优秀的设计,我们用了那么多优秀的产品,怎么样才能在需要的时候记起它们呢?认知科学给出的答案很简单,去想,去思考。

一样东西进入我们的大脑,如果我们没有思考过,大脑会认为这个东西没用,就丢掉它,不存下来。但如果我们仔细思考过它,大脑就会自己做个判断,认为以后有可能要再度想起它,就把它存下来。

所以不只要看,要用,还要想。

比如我们看到这个页面,要想:
1.信息架构是怎样的?有没有层级,有没有逻辑顺序?能不能反映它们的重要程度和关系?
2.页面布局是怎样的?它们位置、顺序是怎样的?它是怎么分块的?它是怎么突出主要任务的?
3.有没有其它设计亮点,比如好的隐喻,比如视觉怎么营造氛围。

帮你从零开始掌握交互设计的学习笔记

360安全卫士

把所有思考结果记录下来。记得多了,形成自己的观点后写成文章,同其他人分享。

4. 做

一开始模仿,在这个过程中,学习工具的使用,把它用熟。[5]

为什么要先把工具用熟呢?道理很简单,如果工具还不熟悉,大脑会把主要精力都耗费在工具的使用上,根本腾不出空间来思考设计的事。

当工具使用没有任何问题后,做真实的产品设计。

我们可以直接在项目中实践,但大部分人应该没这个条件,那怎么做?

重新设计现有的产品。比如我们可以重新设计微信,重新设计简书;我们觉得某个软件设计的不够好,重新设计它。通过这种训练方式,提升设计技能,达到准设计师的水平。

那么,一个产品(或功能)的设计流程,是怎样的呢?

1.明确使用场景

我们经常看到一个被分解后的功能指标项如下:

我要一个远程控制的功能。老师可以控制某个学生的电脑。

如果按照这个需求做的话,在产品首页加一个远程控制的按钮,点一下,老师可以选择某个学生进行控制,这个功能就设计好了。

但是实际上老师是怎么用的呢?我们和产品经理(或用户)沟通,会发现老师使用这个功能的场景是:

1.老师查看屏幕预览图,觉得某个学生可能做的不错,双击查看学生完整的屏幕。发现学生做的很好,就转播给其他学生看,在这个过程中会协助学生微调作业。

2.学生有问题时,举手请求老师协助,老师在讲台上协助解决问题,(并将这个协助过程广播给其它同学)。

这就是使用场景。场景非常非常重要。它决定了功能入口放在哪里比较合适,应该突出它,还是弱化它。它的前一步是什么,下一步是什么。

只有明确了真实的使用场景,才能设计出用户可用的产品。

2.收集素材
去前面提到的设计网站,或是平时用的软件商找同类设计来对比和分析,看看其他人是怎么设计的。比如远程协助,可以看看QQ是怎么设计的。把它的整个流程跑几遍,并且把每个过程截图下来。借鉴它设计好的地方。

帮你从零开始掌握交互设计的学习笔记

QQ远程协助

3.画草图
有了想法以后,在纸上画草图。
草图里面,主要是把每个页面都有哪些功能、元素,摆放顺序定清楚。这个就是梳理我们设计思路的过程。

这个过程一定要有。千万不要一上来就做原型,那会花很多时间在对齐、排版等等琐碎的事情上,我们也没办法一下子看到全貌,把每个页面都想清楚了,页面流程怎么跳转都想好了,再搬到Axure上。

4.画低保真原型
把草图搬到Axure上。这个过程还会调整,修改。

5.可用性测试,调整设计
做完动态的、可交互的原型后,找三个用户试用下(不一定要真实的最终用户,另外,不用太多用户,三个用户就已经能够发现70%关键问题),观察他们在使用的时候会碰到什么问题,找出最关键的问题,进行调整。

这个阶段完成后,就可以提交开发了。

6.补充细节设计
有一些很细节的流程,我们没办法在一个交互稿里面完全体现,比如页面内容为空时,怎么办;数据加载出错时,怎么办。这个时候用文档来补充这些分支流程。我们就像写开发文档一样,把整个软件的所有分支流程、异常流程都过一遍,记下来,然后提交开发。文档形式不重要,只要能传递思考结果就行。

以上只是一个大概的流程,在实际操做的时候,还会碰到很多问题。有一些东西我会在后面分享的时候再细讲,还有一些东西,可能就需要大家实际动手,自己去摸索和沉淀。

总结

看、用、想、做。

帮你从零开始掌握交互设计的学习笔记

方法总结

End.

最后,我想说的是,我们掌握一个东西,要下很大的功夫,没有捷径可走。那些想要走捷径的人,往往到最后会发现,绕了一大圈,却什么也没得到。只有那些脚踏实地一步步前行的人,才有机会走到自己想要到达的地方。


[1]: 这部分写的很吃力,我对信息架构并无系统的了解。后续会再深入学习这部分内容。

[2]: 本文有很多观点,包括对人的要求这部分,来源于马力老师的《产品设计师技能书》

[3]: 学习的一些方法,来源于罗子雄老师的分享《如何成为一名优秀的设计师》

[4]: 原文见《为什么学生不喜欢上学》

[5]: 工具入门见《交互设计入门指南》

文章来自:四四四毛

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/9223/

(0)
iouedioued
上一篇 2015-09-08
下一篇 2015-09-09

相关推荐

  • Axure RP 8 入门手册 – 第6章(二)

    第5节检视功能-元件命名千语:楼叔,我才问一个问题,你就给我讲了这么多!好感动哦!小楼:嘿嘿,因为这个群里你最大嘛!千语:切!反正你也有空,顺便把元件的设置也给我讲讲吧!我看不管是元件的样式还是属性,都很复杂呢。小楼:您好!因为网络原因,您发送的消息是乱码。千语:还想等你给我讲完,发张我昨天泡温泉的照片给你呢!小楼:你看,其实这个元件设置也非常简单,你看在点中一个元件后,检视面板中就会呈现与该元件相关的设置……从上至下,首先看到的是元件...

    2018-04-22
  • 三种方法,使用鲜艳的配色来制作WEB/APP界面

    无论是Web还是APP,鲜艳的配色已开始逐渐具有人气。为了将人们的注意力集中于要素之上,让设计能给用户带来深刻的印象,就让我们来使用鲜艳的配色吧。

    2017-05-09
  • 同一页面放两个相同的链接:这样的重复是有益还是有害?

    尽可能消除网页重复性元素,减轻用户认知负担。每一个多余的链接会影响网站的易用性。

    2017-05-25
  • 抽丝剥茧做设计:结构化思维初体验

    我们面对熟悉的问题能迎刃而解,陌生的问题却无从下手。原因是什么?其实是大脑对熟悉问题有已存在的解决结构,而对陌生问题,需要抽丝剥茧重新建立。结构化思维带你快刀斩乱麻,只需四步,建立清晰结构,完美解决未知问题。结构化思维是指一个人在面对工作任务或者难题时能从多个侧面进行思考,深刻分析导致问题出现的原因,系统制定行动方案,并采取恰当的手段使工作高效地开展,取得高绩效。(引自百度百科)

    2017-04-28
  • 面对大型项目的设计需求,设计师的定位与协作方式应该是这样的……

    工作需求每天都有,但总有一些冥冥之中会被更多人关注,如实事热点、周年庆典、大版本发布、热门合作等,那这些被更多关注的项目是否就是传说中的大型项目呢?视觉设计师在这样的项目中,又该如何发挥自己最大的作用,找到自己的最佳定位,保证高质量高效率的完成项目呢?Ps:养成良好的分类习惯,在需要时它也可以是你的加速度。ps:作为视觉设计师,要不忘设计的态度,时刻提醒自己,除了眼前的这个方案一定还存在一个更好的方案,时间允许的前提下不妨再对自己狠一点,过程虽然痛苦,但结果往往会带来惊喜!

    2017-05-10
  • 生鲜电商优化用户体验 “钱景”可观

    追求美食的消费者,味蕾已探寻至万里之外。智利进口车厘子、厄瓜多尔白虾、波士顿大龙虾……指尖轻轻一点,尽享全球美味。伴随着餐桌上的消费升级,人们愈加关注品质和健康。生鲜消费进入品质时代,快速发展的生鲜电商,正好满足了人们的需求。艾瑞咨询数据显示,我国生鲜电商市场平均每年保持50%以上的增长率。面对广阔的市场需求,我省近年来涌现出景徽菜篮子、菜递、购食汇、满篮鲜等众多各具特色的生鲜电商。在线上线下零售融合的趋势下,生鲜电商现状如何?未来如何...

    2018-03-16
  • 面试被问Axure水平?菜鸟这样学,快速做出能拿去面试的原型

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。面试者如果带一份好的标准的产品原型作品,会加分不少。那么一份能拿去面试的原型,长什么样呢?(以下是6周axure实战班同学作品)1、原型里,会梳理产品的功能流程2、标准的低保真原型3、清晰、明确、可读性强的原型注释如果你也想做出能拿去面试的原型图想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?没人监督指导,自学还没...

    2018-04-20
  • 小白学Axure,这样学更高效,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第6期开启报名!从第1期到现在,1400多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)先来看看学习效果全程实操,学完高效制作原型,做出高保真认真学完,原型效率提升,更...

    2018-03-04
  • 语音交互中的“等待体验”研究

    文 | 叨叨来自雷锋网(leiphone-sz)的报道雷锋网按:本文来自百度人工智能交互设计院,通过实验的方式,研究了语音交互中用户对于智能音箱的“等待体验”。雷锋网编辑在不改变原意的基础上做了精编。回顾人机交互发展史,人类先后经历了基于命令行的CLI 时代,基于鼠标键盘的GUI时代,基于触摸的初级NUI时代。后面每一个阶段比前一个阶段更自然,学习成本更低,综合效率更高。进入AI时代,人工智能给机器带来三种能力:感知能力、认知能力、自然...

    2018-01-30
  • 【用户体验.春节特辑】客从何处来(总第266期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第266期我的家族,还算是一个比较大的家族。从我记事起,关于我的家族,关于那些已经逝去的,离我远去的那些家人的故事与人生经历,都是经由一个姑姑讲述给我听的。每逢节假日,尤其是寒暑假那些漫长的假期里,尚还年幼的我,都会安静地坐在她的身旁,在她的娓娓道来中,去遥想那些过往,那过往中我的那些平凡也却有些不凡的家人。我的祖辈的...

    2018-02-16