非设计专业的学生，如何系统的学习交互设计

作者：青溪Joanna

微信公众号：qingxizhaji（青溪札记）

作者投稿早读课发表，转载请联系作者。

曾经我也是一名非设计专业的学生，作为自动化专业的硕士希望自学做交互设计，有很长一段时间都抱有这样的疑惑“如何系统的学习、提升交互设计能力”。所以多次翻出这个问题，反复咀嚼过@王阅微、@朱晨 的回答，从中找出我缺乏的、忽略的技能去继续补足、努力。

现在从事交互设计工作已有三年时间，希望通过回答这个问题，来对以往独自摸索、自学路上的一些经验、心得做个总结。如果能给当前期待从事交互设计的新朋友些许指引，那就更圆满了。

1、理论书籍

1）《用户体验要素：以用户为中心的产品设计》

讲述了经典的五层框架：战略层（产品目标和用户需求）、范围层（功能规格和内容需求）、结构层（交互设计和信息架构）、框架层（界面设计、导航设计和信息设计）、表现层（感知设计）。可以对互联网产品经理、交互设计师、视觉设计师之间的工作流程、职责有个初步的认识，在后续学习中也大致明白重心该放在哪个环节。

2）《点石成金：访客至上的网页设计秘笈》

介绍了don’t make me think 的几个指导原则 以及可用性测试，一本小书比较容易理解。

3）《认知与设计：理解UI设计准则》

介绍了一些用户界面设计准则。对于新人来说，常常不知道哪些设计是易用的、用户容易接受的，所以了解一些设计原则可以有助于我们辩证的思考各种设计方案之间孰优孰劣。

4）《About Face 3 交互设计精髓》

经典书籍，厚厚一本很难读完。对于新人来说，可以随便翻翻，先看看目录，找那些自己感兴趣的、疑惑的章节读一读。

5）《设计师要懂心理学》

介绍人的一些习惯，如何观察、阅读、记忆、思考、集中注意力等等很多方面。了解与我们的设计方案交互操作的用户，是设计师需要持续关注的。

2、实战书籍

1）《写给大家看的设计书（第三版）》

通过大量示例介绍了4大基本设计原则——亲密性、对齐、重复、对比，这些原则在界面排版上非常实用。作为非设计专业的学生来说，学习一些基本的原则很有必要。

2）《设计之下：搜狐新闻客户端的用户体验设计》

结合搜狐新闻客户端的项目经验，总结了很多干货，对于新手可以从中了解实际的设计流程。

3）《破茧成蝶：用户体验设计师的成长之路》

一本实用性非常高的书，强烈推荐。其中需求分析、设计规划这两章刚好解决了我的一些疑惑，反反复复读了很多遍，非常有收获。感谢@刘津、@李月 的辛苦撰写、无私分享。

4）《移动应用UI设计模式》

关于设计模式的一本书，我读过之后写了几篇读书笔记，对书中的设计模式配上平时搜集的例子以加深理解，比如这篇移动应用UI设计模式——（1）导航（http://jinjuan.me/read-app-pattern-1/）

5）《触动人心：设计优秀的iPhone 应用》

如果对iPhone设计感兴趣，可以读读这本书，虽然现在看来例子有些旧，但是也不妨碍我们去理解那些优秀的设计例子。

3、设计规范指南

1）iOS 8 人机界面指南

1-[ISUX转译]iOS 8人机界面指南（一）：UI设计基础（http://isux.tencent.com/ios8-human-interface-guidelines.html）

2-[ISUX转译]iOS 8人机界面指南（二）：设计策略（http://isux.tencent.com/ios8-human-interface-guidelines-design-strategies.html）

3-[ISUX转译]iOS 8人机界面指南（三）：iOS技术（上）（http://isux.tencent.com/ios8-human-interface-guidelines-technology.html）

4-[ISUX转译]iOS 8人机界面指南（三）：iOS技术（下）（http://isux.tencent.com/ios8-human-interface-guidelines-technology.html）

2）Material design

Material design非官方中文指导手册1.0（http://www.ui.cn/detail/20948.html）

3）Apple Watch

Apple Watch界面设计规范（http://topic.ui.cn/detail?tid=35）

4、设计原则

1）易用性十大原则

《可用性工程》一书中有章节专门介绍，非常容易理解、也在设计中用的很多的十大原则。

2）移动端设计原则，文章推荐

很多前辈结合自己的项目经验，总结了一些设计原则，用于自查设计方案。也可以通过搜集一些实例，来理解设计原则是如何被应用的。

1-手机客户端交互设计原则及信息展现方式（作者：elya）（http://elya.cc/2010/05/04/手机客户端交互设计原则及信息展现方式/）

2-交互设计原则有哪些？ – 知乎（手机无线设计8原则）（http://www.zhihu.com/question/19812118）

3-需要时显示——论App中的功能可见性（作者：小伊万）（http://cdc.tencent.com/?p=6466）

4-Chrome 浏览器的哪些设计符合「Don’t Make Me Think」原则？（http://www.zhihu.com/question/20564451）

理论知识可以看做是修炼内功，实战技能则是转化为招式——即 设计方案。作为新人，最基础的是有输出交互设计方案的能力。之后更多的是积累都在于如何提出易用性高、用户满意喜欢的设计方案。

1、交互设计输出物知多少

1）流程图

谈谈页面流程图（作者：heidixie）（http://www.yixieshi.com/it/13742.html）

2）线框图

同样是来自heidi三篇文章：

1-聊聊线框图：那些必要的理论和前提（http://heidixie.blog.sohu.com/159793641.html）

2-为线框图多留点时间（http://heidixie.blog.sohu.com/151623325.html）

3-聊聊线框图：UED和PD对于线框图不同的定位（http://heidixie.blog.sohu.com/159785390.html）

3）交互说明文档

1-如何写一份交互说明文档（作者：heidixie）（http://www.yixieshi.com/ucd/10449.html）

2-如何编写交互设计详细说明文档（作者：heidixie）（http://www.yixieshi.com/ucd/11363.html）

3-如何制作实用美观的设计文档（作者：yoyo）（http://cdc.tencent.com/?p=5809）

2、体验优秀的设计

想了解优秀的设计，最靠谱的是去体验、分拆、深挖优秀的作品，包括设计模式（界面排版）、交互流程、操作反馈、特殊场景的细节设计等等。

1）总结设计模式

设计师通常如何发现灵感？（http://www.zhihu.com/question/27445815/answer/37187862）这个问题中elya推荐了很多设计模式类的网站，这是业界搜集的设计模式库。除了看他人搜集的，还推荐自己也按照类似的分类方式多搜集设计模式。

2）分任务体验优秀的产品

选择特定的任务，去体验优秀的产品是如何完成这些任务的（交互流程）。比如，注册、登录、发照片、发微博、发语音、评论/回复 等等。

3）总结设计亮点

这些设计亮点可能归结不到上面任意两个方面，但是恰恰是这些设计亮点最能体现一个设计师的水平。比如我之前写过微信发语音功能的设计亮点（http://jinjuan.me/app-weixin-1/） 。为什么要记录？对我来说是好记性不如烂笔头，放在心里琢磨总没有写出来印象深刻。

最后推荐@晓生语录 的一篇文章：交互设计师如何提高专业能力（http://daichuanqing.com/index.php/archives/2907），这也是我在入行初期读过很多遍的文章，感兴趣的朋友可以看看。

1、从子任务开始锻炼

对学生来说，作品很重要。但是对新手而言，完成一个整体的产品设计可能有些难度。推荐从子任务的设计开始锻炼，比如前面提到的注册、登录、发照片等等。真正去设计的时候，会发现有很多细节设计是平时体验他人产品过程中容易遗漏的。这个时候可以回头再留意那些细节，比较不同的产品设计，多问问自己为什么他们要这么设计，有何优缺点、有何取舍，而自己又该如何设计、为什么这样设计。

通过子任务的设计练习，对如何做交互设计已经有了一些提升之后，可以给自己布置一个完整的产品作业。比如实现某个idea解决用户的某种需求，这个时候《用户体验五要素》的知识就可以派上用场了。尝试从战略层开始、一步步完成产品的需求分析、功能分析、原型设计，甚至视觉设计，最终输出一份完整的作品。

2、设计完整的产品

这个阶段涉及到需求分析、导航设计、任务分解、界面排版、交互操作流程等等，再次推荐《破茧成蝶：用户体验设计师的成长之路》这本书，实用性非常高。

主要任务的线框图完成之后，别忘了还有很多操作反馈、特殊场景的细节设计，《设计之下：搜狐新闻客户端的用户体验设计》一书对于反馈提示总结的非常棒。

设计定稿前，别忘了自查设计方案，看是否有遗漏异常情况的设计，推荐文章如何建立交互设计自查表（作者：网易UEDC YOYO）（http://dwz.cn/SlP7D）

工具的作用是用来表达自己的设计方案，初期讨论、沟通想法时用纸币来的最快最方便。软件的好处则是利于存档、多人协作、传递。

1、Axure

虽然交互设计工具几年来层出不穷，但是实用性最强的个人觉得还是Axure ，学习成本低、简单好用、多平台通用。对于新手，前期可从排版开始练习画线框图，不用沉迷于做复杂的交互效果，因为工作中可能没有时间做非常细腻的交互动效。当然，如果是给大领导演示方案，一些点击跳转还是有必要做的。

2、Origami

制作交互动效的工具，感兴趣的童鞋可以学一学，前期的学习成本有点高。

3、Sketch

相比Photoshop，Sketch用来设计界面更轻便。

1、用户研究

可以看看《赢在用户》，市面上貌似买不到了，学校图书馆大概能借到。百度商业UED团队的用户研究工程师总结的[14种经典的用研方法] (http://ued.baidu.com/?p=3880)，推荐看看。

2、审美与视觉设计能力

我相信的一点是，当你看过足够多的、优秀的界面设计之后，审美、配色排版等能力会随之提升。虽然我自己是学自动化——与设计完全不着边的专业，但是这几年积累让我对自己的审美还比较自信，至少得到了合作的视觉设计师的认可。

为了锻炼自己的视觉设计能力，我会做一些练习。比如我的个人网站（jinjuan.me）的界面设计就是自己完成。配色从Adobe Color CC（https://color.adobe.com/zh/explore/）挑选再微调，最终的效果至少符合我的喜好。

3、对前端开发、后台开发技术有一定理解

开发人员帮助我们实现设计方案，如何与他们高效沟通非常重要。虽然不需要会写代码，但是了解一些开发术语，知道前后台、数据库之间的关系是最基础的。

我的经历是，毕业初期一年多的时间交互设计和前端开发都要做，对HTML、CSS比较熟悉，JavaScript有些了解。再加上自动化专业也有一些C编程经验，所以与开发同事沟通起来倒没啥障碍。不过每个产品的业务特点不同，仍然需要实时更新对新技术的理解。

以下几点是我个人认为非常重要的几个软实力，早一点培养早一点受益。

1、时间管理

交互设计方面需要学习的知识非常多，如何评估优先级、安排学习计划非常关键。

2、知识管理

这几年我是evernote的深度用户，非常遗憾的是没有更早使用它，所以推荐你选择一款适合你的知识管理工具。关于知识管理，我的一点心得是别让搜集的知识分散在各个角落（各个网盘、电脑硬盘、存储工具），确保知识有统一存放入口，并有个统一的输出存储点。

如果没有知识管理、没有evernote，我可能也写不出这篇文章。

3、善用搜索

你的很多疑问，前辈们可能已经给出了很多经典的回答，所以善用搜索。这里一并感谢在我入行初期，贡献、分享知识的前辈们 @elya 、@heidixie 、@雅秋、@臭鱼、@晓生语录、@00、@王阅微、@朱晨 等等，非常感谢！！！

4、多总结，形成自己的一套知识体系和工作方法

@张佳玮 说“世上万事，不过是一懒二拖三不读书”，如果要补充一条就是“四不总结” 。很多时候我们对知识的理解都是零散的存在于脑海中。如果不去总结、不记录下来，脑容量不够时可能就遗忘了。

所以多总结、形成自己的一套知识体系和工作方法，对于任何一个职业都至关重要。

这篇文章虽然是针对非设计专业的学生，但是很多方面同样是对我自己说的。我也仍然在路上，还有很多技能需要提升，愿大家共同进步~~~全篇完。

本篇同步发表在个人博客：jinjuan.me 、个人微信公众号 qingxizhaji，欢迎关注。

早读课投稿：mm@zaodula.com