交互设计师,你要懂视觉
2013-05-08 09:06
211 查看
交互设计师之所以要懂得视觉语言,主要体现在原型制作的工作部分,
因为输出的虽然是低保真原型,但低保真原型的设计过程其实也是一个视觉化过程。
废话少说,直接解释吧(大致按照动手的时间顺序,以数字媒体界面为例)。
1 设计界面框架要懂视觉
在定好功能,搭好信息架构之后,一般进行单独界面的框架设计(鬼扯,真实的操作顺序谁知道!)
框架设计是元素在界面上的大致布局,界面分几块区域,哪一块区域放什么内容之类的。
这里需要交互设计师确定这么几件跟视觉有关的事情:
a.界面尺寸
界面默认的宽高是多少(如果是软件)?最大化的宽高是多少?
这也许需要通盘考虑每个界面大致的内容类型,需要考虑用户的阅读舒适度(翻屏幕爽吗?水平扫描爽吗?)。
b.模块尺寸
每个区域模块的大小比例大致怎样?
这跟内容的类型有关,
比如一篇文章详情的宽度究竟要多少,用户阅读起来才不会在目光换行的时候不会迷失?
![](http://img.blog.csdn.net/20130508090500187)
(如果正文整个显示屏那么宽,好读吗?)
这也跟内容之间的权重有关,
交互设计师知道内容的轻重,尺寸就是表达权重的一种手段。
c.模块位置
模块的相对位置如何?整个产品的界面如何瓜分成一个固定连续的阅读习惯(如果需要的话)?
如果是一个网页,为什么最重要的内容也许需要放在界面左上角,你要知道这是用户的视觉落脚点。
当然框架只是粗略布局,尺寸不需要精准,但如果能接近精准,不是更好吗?
2 元素细节布局需要排版功力
如果你知道阅读节奏,能排成这样:
![](http://img.blog.csdn.net/20130508090530310)
如果你知道视觉区分逻辑,能拍成这样:
![](http://img.blog.csdn.net/20130508090546232)
3 权重表达需要视觉手段
交互设计师有责任把内容的轻重缓急通知视觉设计师,
除了文字、口头沟通外,直接在原型上表达也是重要的。
如果知道基本的规划视觉层次的原理,就能事半功倍。
![](http://img.blog.csdn.net/20130508090558810)
(标签比对应的内容不重要)
4 动画效果了然于胸
动画在交互过程中,起着强化界面暗示或反馈的作用,
配合用户的操作,丰富的视觉效果让产品有趣,也让用户更理解他的操作。
既然跟操作有关,交互设计师怎么可以不懂得动画设计。
虽然不需要让动画变现,但心中有动画的构成原理,看到一个效果,能知道各个元素是怎么分别到位的,
绝对有助于行为的设计。
5 用视觉设计师的语言沟通
在完成交互设计,开始向视觉设计师传达设计方案的时候,
如果能用视觉设计师的语言跟他们沟通,甚至让他们觉得,你其实已经在默默照顾他们,
因为你知道他们拿到这个交互原型时,心里是怎么想的,
就能更快达成一致。
6 验收时知道高保真是否传达出行为了
视觉设计的其中一个最大功能就是传达产品行为,也就是表达好交互设计。
当视觉稿输出时,你不仅只是看看demo好不好看,更重要的是,你的交互意图有没有被表达出来。
比如还是权重的问题,视觉设计师是否用合适的形式传达出来了,
或者一些视觉反馈是否给到用户足够的暗示效果。
以上就是为什么交互设计师要懂视觉的理由。
因为输出的虽然是低保真原型,但低保真原型的设计过程其实也是一个视觉化过程。
废话少说,直接解释吧(大致按照动手的时间顺序,以数字媒体界面为例)。
1 设计界面框架要懂视觉
在定好功能,搭好信息架构之后,一般进行单独界面的框架设计(鬼扯,真实的操作顺序谁知道!)
框架设计是元素在界面上的大致布局,界面分几块区域,哪一块区域放什么内容之类的。
这里需要交互设计师确定这么几件跟视觉有关的事情:
a.界面尺寸
界面默认的宽高是多少(如果是软件)?最大化的宽高是多少?
这也许需要通盘考虑每个界面大致的内容类型,需要考虑用户的阅读舒适度(翻屏幕爽吗?水平扫描爽吗?)。
b.模块尺寸
每个区域模块的大小比例大致怎样?
这跟内容的类型有关,
比如一篇文章详情的宽度究竟要多少,用户阅读起来才不会在目光换行的时候不会迷失?
(如果正文整个显示屏那么宽,好读吗?)
这也跟内容之间的权重有关,
交互设计师知道内容的轻重,尺寸就是表达权重的一种手段。
c.模块位置
模块的相对位置如何?整个产品的界面如何瓜分成一个固定连续的阅读习惯(如果需要的话)?
如果是一个网页,为什么最重要的内容也许需要放在界面左上角,你要知道这是用户的视觉落脚点。
当然框架只是粗略布局,尺寸不需要精准,但如果能接近精准,不是更好吗?
2 元素细节布局需要排版功力
如果你知道阅读节奏,能排成这样:
如果你知道视觉区分逻辑,能拍成这样:
3 权重表达需要视觉手段
交互设计师有责任把内容的轻重缓急通知视觉设计师,
除了文字、口头沟通外,直接在原型上表达也是重要的。
如果知道基本的规划视觉层次的原理,就能事半功倍。
(标签比对应的内容不重要)
4 动画效果了然于胸
动画在交互过程中,起着强化界面暗示或反馈的作用,
配合用户的操作,丰富的视觉效果让产品有趣,也让用户更理解他的操作。
既然跟操作有关,交互设计师怎么可以不懂得动画设计。
虽然不需要让动画变现,但心中有动画的构成原理,看到一个效果,能知道各个元素是怎么分别到位的,
绝对有助于行为的设计。
5 用视觉设计师的语言沟通
在完成交互设计,开始向视觉设计师传达设计方案的时候,
如果能用视觉设计师的语言跟他们沟通,甚至让他们觉得,你其实已经在默默照顾他们,
因为你知道他们拿到这个交互原型时,心里是怎么想的,
就能更快达成一致。
6 验收时知道高保真是否传达出行为了
视觉设计的其中一个最大功能就是传达产品行为,也就是表达好交互设计。
当视觉稿输出时,你不仅只是看看demo好不好看,更重要的是,你的交互意图有没有被表达出来。
比如还是权重的问题,视觉设计师是否用合适的形式传达出来了,
或者一些视觉反馈是否给到用户足够的暗示效果。
以上就是为什么交互设计师要懂视觉的理由。
相关文章推荐
- 知乎:设计师如何评价 Apple Watch 的交互与视觉设计?
- 收集android上开源的酷炫的交互动画和视觉效果:Interactive-animation
- Web视觉设计师培训视频教程
- 交互设计师需要具备什么样的专业能力
- android开源的酷炫的交互动画和视觉效果:Interactive-animation
- Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计
- 做交互应该知道的视觉几件事
- 游戏感:虚拟感觉的游戏设计师指南——第三章 游戏感交互模型
- 交互设计、信息图、信息可视化、数据可视化技术资源汇总——设计师的领域,设计师说了算
- Android开发技巧——实现设计师给出的视觉居中的布局
- 收集android上开源的酷炫的交互动画和视觉效果:Interactive-animation
- 交互设计师和产品经理必读,推荐《QQ阅读 设计之路》讲述了QQ阅读的前世、今生、来世。面对这么多业界的阅读器,QQ阅读如何脱颖而出,占据市场,一起看看QQ阅读的发展过程。
- Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计
- 收集android上开源的酷炫的交互动画和视觉效果:Interactive-animation
- 百度手机输入法2.0升级交互视觉设计分享
- iOS 12 人机交互指南(五):视觉设计(Visual Design)
- 如何引导自已成为一名网页视觉设计师
- Android开发,美到超乎你想象的android开源交互动画和视觉效果,外部库
- [转]收集android上开源的酷炫的交互动画和视觉效果:Interactive-animation
- 交互设计师:讨论几种处理问题的方法