一名交互设计师必备的知识架构

「爱情、让人受尽委屈。」 2021-09-23 04:16 370阅读 0赞

如果你也是一枚刚入门的交互设计师，是不是常有这样一种感觉：不知从何下手，闷头读了一大堆书、学了一大堆软件、画了一大堆图之后还是感觉心里不踏实，总害怕自己还缺点什么，恨不得要有本《交互设计学习大纲》就好了。出现这个问题有两个原因，一是交互设计师没有可视性强的产物，交互设计师的产物一般是线框图、流程图、信息架构图、说明文档等等，但这些东西既不如视觉设计稿华丽精美，也不如程序代码高贵冷艳，在外行人看来初级交互设计师和高级交互设计师画的好像都差不多，轻易看不出你修炼到了几层功力；第二个原因是交互设计是跨学科的专业，需要学的太多太杂，今天这位大神说要学好PS，明天那位大神又说要学程序，后天又有大神说要学心理学，blablabla…信息量太大、太乱就会导致这种不知所措的局面。

今天，我制作了一份“交互设计师的知识架构图”，如下图所示，该图对交互设计师所需的知识储备进行了梳理，并按照交互设计的一般流程进行排列，从需求分析开始，到信息架构、流程设计，到原型设计，再到可用性测试。以这样的逻辑为大家介绍每一个环节涉及到的知识，化整为零，这样，童鞋们也就可以采取逐个击破的方法一步一个脚印学习交互设计，接下来我也会为大家推荐相应环节涉及到的文章或者书籍，等你全部掌握之后，相信就不会再有不踏实的感觉了。

[![交互设计师的知识架构图][100958n8gjpngp8y8cjunf.png]][100958n8gjpngp8y8cjunf.png]

交互设计师的知识架构图

好，开始为大家解读这张图。

### 需求分析 ###

一般来说，交互设计的第一个环节就是需求分析，需求分析主要指用户研究、场景剧本、角色创建以及需求提炼。

首先，用户研究的方法包括用户访谈、调查问卷、观察、焦点访谈等。

其次，创建人物角色和场景剧本将有利于设计团队始终围绕用户目标进行设计，保证你的设计以用户为中心，当然，人物角色和场景剧本不是凭空想象的，而是基于充分的用户研究提炼出来的。

以上两块知识在[《About Face 3:交互设计精髓》][About Face 3]这本书里都有详细的介绍，大家一定要把这本书看完看懂。

最后，需求提炼这块，我个人比较喜欢从“人、系统、环境”三个角度进行分析提炼，但是需要注意的是，这三个角度可以看成是一个公式，要学会灵活运用，针对不同的任务、对象，会用不同的名词，比如针对一个实物产品，这个公式就变成“人、物、场景”，针对一个任务则是“人、目标、场景”等等。需求提炼这块大家可以参考[《产品学堂：万能的产品策划公式》][Link 1],网上也有各种各样的需求分析的方法，只要精通掌握一种就够了，最重要的是要有自己的一套原则与流程，然后不断地拿自己总结的方法去实践。

### 信息架构和流程设计 ###

这一块需要掌握的知识有：流程图和信息架构图的绘制、心理学、逻辑学。

流程图和信息架构图都是为了表达交互设计的整体逻辑路径的工具，一张好的流程图或信息架构图对于团队沟通和开拓思维都是很有帮助的。网上有很多相关的学习资料，但网上的文章通常会不够系统、严谨，所以我再给大家推荐两本书：[《高效沟通设计之道》][Link 2]、[《交互设计指南》][Link 3]。

层次任务分析法是流程设计中的一个重要方法，简单来说，层次任务分析就是将一个任务进行结构化的分解，将用户完成任务的过程所需要的每一种情况和每一个动作进行细化整理。这样分析的好处是你可以进一步理解用户是如何使用产品、如何与产品和环境进行交互的，保证设计的逻辑严谨性，最终使你的交互流程更加高效和人性化。层次任务分析法可以从这篇文章里学习个大概：[《层次任务分析》][Link 4] 不过我并不觉得这篇文章非常严谨详细，将来有机会我可能会用一篇文章来单独为大家介绍这个方法。

心理学和逻辑学可以说是交互设计师最重要的内功，看起来比较高大上，可能会无从下手，但千万不要逃避和盲目乱学，要进行系统的、循循渐进的学习。比如心理学你可以依次学习色彩心理学、设计心理学、认知心理学、行为心理学，交互设计师是以人为中心的，琢磨人的认知、记忆心理对于提高你的设计质量至关重要，推荐的书籍有唐纳德诺曼的[《设计心理学》][Link 5]，埃森克的[《认知心理学》][Link 6]，此外，同学们还可以看一下我之前的一篇文章：[《交互设计与心理学》][Link 7]；逻辑学似乎就更加虚幻了，甚至会觉得这货就像智商一样无力回天，其实不是，一个人的逻辑思维是通过后天锻炼的，逻辑思维的提高可以参考知乎上大神的回答：[知乎：如何提高逻辑思维能力？][Link 8]书籍的话，可以参考这里：[提高逻辑思维能力，有哪些书或者资料可以推荐的么？][Link 9]

### 原型设计 ###

原型设计是交互设计师最主要的工作之一，也是交互设计师的最佳练兵场，因此，需要在这一块储备大量的知识，比如交互范式、设计原则、平台规范、排版和草图绘画。

交互范式指交互方式（参考下图）、交互元素（比如操作、窗口、控件、菜单、对话框）等。这些都是基本功，很多同学自信学有所成了，但面试的时候一问控件的种类和区别就胡乱回答一通，这是没有系统学习的后果。

[![交互方式][101001dmg5z16t75znmvmv.png]][101001dmg5z16t75znmvmv.png]

交互方式

设计原则，这里指的是交互设计原则。这个就多了，可以说数不胜数，而且每个人都有不同的版本，如果你是初学者，没有特别好的办法，推荐你先把《About Face 3：交互设计精髓》吃透，还是那句话，网上的知识是碎片化的，一味地看大神写的千把个字的文章容易消耗你的耐心、增加你的记忆负荷，而且到头来还是不够全面，所以先把权威的书籍吃透再说。  
平台规范。从终端上看，平台分为PC、手机、平板电脑等，从系统上看又分为Windows,Mac,IOS,Windows Phone,Android等，每一个平台都有相应的设计规范，想做交互设计师就得先把他们掌握了，另外，这些规范通常都是英文，而中文的最新翻译一般都比较难找，并且网友的翻译有参差不齐的风险，所以亲们一定要学好英语，这点也很重要！

排版和草图绘画。受过专业的排版训练的交互设计师会有很大的优势，因为排版不仅需要一定的审美感觉，也需要扎实的视觉理论基础和逻辑思维甚至心理学理论，排版其实也是一种交互设计，是读者与作品在视觉上的交互。另外草图绘画是一个加分项，画的一手漂亮的草图会让团队沟通更加高效，不过，这里的草图不是素描草图，不是对某一个物品进行精雕细琢，而是简笔画。下图是著名交互设计师比尔·维普兰克画的，他对图形和手绘草图有一种惊人的表现能力，他可以在谈话的同时，随时用手绘的方法勾勒出草图来说明其观点。这是我在看《交互设计概论》时看到的，当时我简直被迷晕了，这技能太牛了！于是我也去学简笔画，不过学的断断续续，至今还是菜的一逼。

[![比尔·维普兰克画的草图][101008py9f7dkoazz2frau.png]][101008py9f7dkoazz2frau.png 1]

比尔·维普兰克画的草图

可用性测试。这一块推荐大家先把[《可用性工程》][Link 10]这本书看完，不过这本书可能由于翻译的原因，看起来会有一点吃力，大家可以先看网易UEDC的这篇文章了解一下:[《简单快速的可用性测试》][Link 11]。

当然，理论终究是不够的，学习理论之后，要进行大量的实践来巩固，再总结出自己的一套流程与方法。

### 视觉设计与程序设计 ###

基础加分项，既是加分项，也是基本功。不是说必须学好视觉和代码，但多少会一点对你有很大的好处，比如有利于与团队的其他人员沟通，有利于选择更合理更现实的交互方案。我建议大家学一下PS、AI、Axure、PPT和AE等软件，有时间的话再学一学C语音/Java，HTML+CSS+Javascript.

### 最后也是最重要的 ###

这篇文章仅仅是在知识架构上给大家做一个整理和归纳，虽然也推荐了不少适合新手入门的书籍和文章给大家，但仅仅看这些书籍和文章肯定是不够的，还需要进行大量的实践和体验，交互设计不像学习一个软件可以短期大幅度提高，更需要的是长期积累，平时应该经常去看别人的优秀设计，去体验各种app，网站，平台，要积累大量的素材，要不断地总结经验，并且将经验运用于实战中。若这篇文章能为你提供一丁点的帮助，我也十分欣慰。

[100958n8gjpngp8y8cjunf.png]: http://www.yuanxingku.com/data/attachment/portal/201412/08/100958n8gjpngp8y8cjunf.png
[About Face 3]: http://book.douban.com/subject/3279105/
[Link 1]: http://www.yixieshi.com/pd/17152.html
[Link 2]: http://book.douban.com/subject/6872932/
[Link 3]: http://book.douban.com/subject/4881989/
[Link 4]: http://cdc.tencent.com/?p=3441
[Link 5]: http://book.douban.com/subject_search?search_text=%E8%AE%BE%E8%AE%A1%E5%BF%83%E7%90%86%E5%AD%A6&cat=1001
[Link 6]: http://book.douban.com/subject/3854718/
[Link 7]: http://jeffreyblog.com/archives/116
[Link 8]: http://www.zhihu.com/question/19599216
[Link 9]: http://www.zhihu.com/question/19602470
[101001dmg5z16t75znmvmv.png]: http://www.yuanxingku.com/data/attachment/portal/201412/08/101001dmg5z16t75znmvmv.png
[101008py9f7dkoazz2frau.png]: http://www.yuanxingku.com/data/attachment/portal/201412/08/101008py9f7dkoazz2frau.png
[101008py9f7dkoazz2frau.png 1]: http://jeffreyblog.com/wp-content/uploads/2014/05/IMG_0951.png
[Link 10]: http://book.douban.com/subject/1185932/
[Link 11]: http://uedc.163.com/4151.html