接上篇《让你全方位学习成为一名交互设计师-上篇》
5.交互设计常见案例分析
交互设计日常需要注意积累案例,并从案例中学习总结,只有案例积累得越多,才能形成质变。本章只是简单示意一下交互可以从哪些案例入手。
5.1导航
导航包括:左侧导航、顶部导航、面包屑导航、电梯导航、搜索等。





5.2流程
常见一个完整功能流程


5.3表单
表单包括表单的展示、输入以及数据校验。




5.4反馈
有反馈的才是交互,什么时候用轻反馈,什么时候用重反馈?

5.5场景
离开场景来谈交互,都是耍流氓。


6.交互设计规范及趋势
6.1栅格规范
首先,我们要明确一个观念:交互设计师和视觉设计师是密切配合的,所以交互设计师也需要学习一些视觉设计的知识,以免双方沟通出现问题。栅格化就是视觉设计中的比较基本有用的知识,至少可以规范交互设计师画的原型,没有超过视觉设计师所能承受的“界限”。
我们在设计中常用的是:网页栅格系统,百度百科 给出的解释是“以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。”
栅格系统详细的应用,可以看这篇文章腾讯高手教你靠谱的布局设定方法,介绍得十分详细,本文不再累述。
这里只简单总结一下学习栅格规范对交互设计的意义:
(1)和视觉设计师一起,达成页面宽度的共识,而不是超出视觉设计的“边界”;
(2)在交互设计时,用栅格化规范模块的布局,整齐的分为N栏,让原型变得更美观;
(3)合理利用栅格,产出“黄金比例”的效果图,例如制作简历或者作品集。

6.2平台设计规范
交互设计师必须掌握的知识点,也是面试必考题:平台设计规范。因为,我们所有的设计,几乎都是基于这些平台来进行设计。
但要注意,不要过度在意平台的设计规范,有一些规范也有自相矛盾的地方,举例摘自:崇书庆发表于妖鹿山设计屯的《【交互小零食】- Ser.02》在iOS9规范中,“关于弹窗中的“推荐选项”应该放在左边还是右边,分了两种情况:如果推荐选项有破坏性,那么应该放在左边。如果没有破坏性,则应该放在右边。但到了iOS10的时候,却变成了推荐选项都应该放在右边。”
以下是一些交互设计师常见需要掌握的规范举例,详细规范需要自行去了解。
(1)IOS10设计规范
为IOS设备设计时必备,可参考站酷文章《设计资讯/资料:iOS10 GUI (附源文件下载)(翻译理论)》
(2)Material Design
喜欢Andriod和Material Design风格的,不容错过,可参考站酷文章《设计资讯/资料:Material Design 设计规范(翻译理论)》
(3)Window10 UWP
来自微软的UWP设计规范,参考官网《设计和UI》
(4)微信小程序
新的热点,了解大平台是怎样做设计规范的。参考微信小程序官网给的规范《微信小程序设计指南》

6.3设计趋势
作为一名优秀的交互设计师,当前的时尚流行元素,以及设计趋势,也是需要了解的,不要让自己的设计跟不上时代。
建议交互设计师了解两方面的设计趋势:交互设计趋势,以及视觉设计趋势。在年初或者年末的时候搜索最新的看即可。
2017年设计趋势文章推荐:
(1)交互设计趋势
人人都是产品经理,《2017年度交互设计趋势》
(2)视觉设计趋势
优设网,《趋势丨8个你需要知道的2017年UI设计流行趋势》
7.交互设计师进阶之路
7.1突破瓶颈
每个交互设计师通过努力都能成为高级交互设计师的水平,要想成为优秀的资深交互设计师或者业内有影响力的设计师还需要突破一个瓶颈。那么所谓的瓶颈期是指?这里可以参考《腾讯高级交互设计师:什么是优秀的设计思维与方法?》一文即可。
按照惯例,总结了一下需要突破瓶颈的3大必要条件:
(1)知识的积累达到一定的程度,一般是由量变转为质变
(2)有个人的设计方法体系
(3)长时间的经验积累,至少需要5年以上

7.2进修
交互设计师职位发展的时间不长,大多数的交互设计师都是基本靠自学成才,那么对于入门或者想要更近一步的交互设计师,有什么样的进修渠道推荐呢?
不建议报读培训班,不建议报读培训班,不建议报读培训班。重要的事情说3遍,报培训班不如自学。
推荐渠道一:进培训体系完善的公司,接收培训。
最直接最节省成本的方法,有老司机带领。前提是,我们要上一辆好的车。1-2年学成出师,比自己自学效率要快N倍,少走的弯路能绕地球一圈。

推荐渠道二:报读设计类学校。
刷资历首选,进入知名企业必备敲门砖头,系统的知识体系和方法论学习。缺点是学习周期长,成本高,同时,院校的可选择范围也很小。推荐院校:清华美院、江南大学、中山大学、广州美院。

7.3作品集
人靠衣装,交互设计师靠的是作品,好的交互设计师同样需要好的作品衬托。作品集也是交互设计师总结沉淀、自我提升的重要方法。
把自己的项目包装成一个个作品集,展示出来吧,在作品集里面回答如下问题(面试必考题):
(1)这个作品的亮点在哪里?解决了什么样的问题?
(2)这个作品存在什么样的不足?可以怎么改进?
(3)这个作品遇到了什么难点?最终是如何克服的?
(4)这个作品的设计过程是怎么样的?
(5)这个作品的最终成果如何?
大神们作品集推荐
Mike-https://www.behance.net/ creativemints
Melanie Daveid-http://melaniedaveid.com
Jenny-http://www.jennyjohannesson.com
Qinsman-http://qinsman.com
Dine-http://dinehq.com
8.参考文献
8.1图书类
《交互设计沉思录》-Jon Kolko-机械工业出版社
《简约至上 : 交互式设计四策略》-Giles Colborne-人民邮电出版社
《设计师要懂心理学》-Susan Weinschenk-人民邮电出版社
《用户体验的要素 : 以用户为中心的Web设计》-Jesse James Garrett-机械工业出版社
《心理学与生活》-Richard J.Gerrig、Philip G.Zimbardo-人民邮电出版社
《社会心理学》-戴维·迈尔斯-人民邮电出版社
8.2网站类
人人都是产品经理
优设网
站酷网
英国设计协会
IDEO
知乎
36kr
|