交互设计师，你要懂视觉
广州/设计爱好者/13年前/13005浏览
版权
交互设计师，你要懂视觉
交互设计师，你要懂视觉
交互设计师之所以要懂得视觉语言，主要体现在原型制作的工作部分，
因为输出的虽然是低保真原型，但低保真原型的设计过程其实也是一个视觉化过程。
废话少说，直接解释吧（大致按照动手的时间顺序，以数字媒体界面为例）。
1 设计界面框架要懂视觉
在定好功能，搭好信息架构之后，一般进行单独界面的框架设计（鬼扯，真实的操作顺序谁知道！）
框架设计是元素在界面上的大致布局，界面分几块区域，哪一块区域放什么内容之类的。
这里需要交互设计师确定这么几件跟视觉有关的事情：
a.界面尺寸
界面默认的宽高是多少（如果是软件）？最大化的宽高是多少？
这也许需要通盘考虑每个界面大致的内容类型，需要考虑用户的阅读舒适度（翻屏幕爽吗？水平扫描爽吗？）。
b.模块尺寸
每个区域模块的大小比例大致怎样？
这跟内容的类型有关，
比如一篇文章详情的宽度究竟要多少，用户阅读起来才不会在目光换行的时候不会迷失？
(如果正文整个显示屏那么宽，好读吗？）
这也跟内容之间的权重有关，
交互设计师知道内容的轻重，尺寸就是表达权重的一种手段。
c.模块位置
模块的相对位置如何？整个产品的界面如何瓜分成一个固定连续的阅读习惯（如果需要的话）？
如果是一个网页，为什么最重要的内容也许需要放在界面左上角，你要知道这是用户的视觉落脚点。
当然框架只是粗略布局，尺寸不需要精准，但如果能接近精准，不是更好吗？
2 元素细节布局需要排版功力
如果你知道阅读节奏，能排成这样：
如果你知道视觉区分逻辑，能拍成这样：
3 权重表达需要视觉手段
交互设计师有责任把内容的轻重缓急通知视觉设计师，
除了文字、口头沟通外，直接在原型上表达也是重要的。
如果知道基本的规划视觉层次的原理，就能事半功倍。
（标签比对应的内容不重要）
4 动画效果了然于胸
动画在交互过程中，起着强化界面暗示或反馈的作用，
配合用户的操作，丰富的视觉效果让产品有趣，也让用户更理解他的操作。
既然跟操作有关，交互设计师怎么可以不懂得动画设计。
虽然不需要让动画变现，但心中有动画的构成原理，看到一个效果，能知道各个元素是怎么分别到位的，
绝对有助于行为的设计。
5 用视觉设计师的语言沟通
在完成交互设计，开始向视觉设计师传达设计方案的时候，
如果能用视觉设计师的语言跟他们沟通，甚至让他们觉得，你其实已经在默默照顾他们，
因为你知道他们拿到这个交互原型时，心里是怎么想的，
就能更快达成一致。
6 验收时知道高保真是否传达出行为了
视觉设计的其中一个最大功能就是传达产品行为，也就是表达好交互设计。
当视觉稿输出时，你不仅只是看看demo好不好看，更重要的是，你的交互意图有没有被表达出来。
比如还是权重的问题，视觉设计师是否用合适的形式传达出来了，
或者一些视觉反馈是否给到用户足够的暗示效果。
以上就是为什么交互设计师要懂视觉的理由。
18
举报
声明
165
分享
相关推荐
![[ Danis说体验设计 5 ] UCD，概念设计](https://img.zcool.cn/community/03277dd56c677876ac7252ce66b28ad.jpg?k=ed317819cd4a9de36176d6a7ff62f5c1&t=6a678080&x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80)
![[ Danis说体验设计 4 ] UCD，论需求和功能](https://img.zcool.cn/community/0326f655694b41c6ac725af235ff4f6.jpg?k=7ab5d9cd8c794aa7c85f0fe831f4056e&t=6a678080&x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80)
![[ Danis的体验设计 3 ] UCD，以用户为中心的设计](https://img.zcool.cn/community/03228575670dcfa6ac725ad900af378.jpg?k=c51395e54de0d5446f1d1fe13f2a0674&t=6a678080&x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80)
![[Danis说体验设计2]继续认识用户体验](https://img.zcool.cn/community/032407e564a8b6332f87512f6cf177f.jpg?k=eebfeca60dd34a03b1f82ff9ae014f44&t=6a678080&x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80)
![[Danis说体验设计1]认识用户体验](https://img.zcool.cn/community/0322ae75640905532f87512f6066899.jpg?k=f4e1cf897bf348791f17ca3852ae1958&t=6a678080&x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80)
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
你可能喜欢
相关收藏夹
登录注册
18登录即可同步推荐记录哦
99+登录即可加入我的收藏
评论登录即可评论想法
分享分享