20130508早读课:交互设计师,你要懂视觉

  • 2
  • 9,175 人看过
  • A+

推荐理由:作者@Danis2010 。交互设计师之所以要懂得视觉语言,主要体现在原型制作的工作部分,因为输出的虽然是低保真原型,但低保真原型的设计过程其实也是一个视觉化过程。

jiaohushejishijue

 

一、设计界面框架要懂视觉

在定好功能,搭好信息架构之后,一般进行单独界面的框架设计。框架设计是元素在界面上的大致布局,界面分几块区域,哪一块区域放什么内容之类的。这里需要交互设计师确定这么几件跟视觉有关的事情:

a.界面尺寸

界面默认的宽高是多少(如果是软件)?最大化的宽高是多少?

这也许需要通盘考虑每个界面大致的内容类型,需要考虑用户的阅读舒适度(翻屏幕爽吗?水平扫描爽吗?)。

b.模块尺寸

每个区域模块的大小比例大致怎样?这跟内容的类型有关,比如一篇文章详情的宽度究竟要多少,用户阅读起来才不会在目光换行的时候不会迷失?如下图,如果正文整个显示屏那么宽,好读吗?这也跟内容之间的权重有关,交互设计师知道内容的轻重,尺寸就是表达权重的一种手段。

JH01

c.模块位置

模块的相对位置如何?整个产品的界面如何瓜分成一个固定连续的阅读习惯(如果需要的话)?

如果是一个网页,为什么最重要的内容也许需要放在界面左上角,你要知道这是用户的视觉落脚点。

当然框架只是粗略布局,尺寸不需要精准,但如果能接近精准,不是更好吗?

 

二、元素细节布局需要排版功力

如果你知道阅读节奏,能排成这样:

JH02

如果你知道视觉区分逻辑,能拍成这样:

JH03

 

三、权重表达需要视觉手段

交互设计师有责任把内容的轻重缓急通知视觉设计师,除了文字、口头沟通外,直接在原型上表达也是重要的。如果知道基本的规划视觉层次的原理,就能事半功倍。

jh04
(标签比对应的内容不重要)

 

四、动画效果了然于胸

动画在交互过程中,起着强化界面暗示或反馈的作用,配合用户的操作,丰富的视觉效果让产品有趣,也让用户更理解他的操作。

既然跟操作有关,交互设计师怎么可以不懂得动画设计。虽然不需要让动画变现,但心中有动画的构成原理,看到一个效果,能知道各个元素是怎么分别到位的,绝对有助于行为的设计。

 

五、用视觉设计师的语言沟通

在完成交互设计,开始向视觉设计师传达设计方案的时候,如果能用视觉设计师的语言跟他们沟通,甚至让他们觉得,你其实已经在默默照顾他们,因为你知道他们拿到这个交互原型时,心里是怎么想的,就能更快达成一致。

 

六、验收时知道高保真是否传达出行为了

视觉设计的其中一个最大功能就是传达产品行为,也就是表达好交互设计。当视觉稿输出时,你不仅只是看看demo好不好看,更重要的是,你的交互意图有没有被表达出来。比如还是权重的问题,视觉设计师是否用合适的形式传达出来了,或者一些视觉反馈是否给到用户足够的暗示效果。

Via:作者博客

延伸阅读:20130109早读课:交互设计中边缘状况的三个“凡是”原则

如果看到这段文字,证明您已经看完这篇文章了,有什么收获有什么感想有什么不赞同,我们期待您的留言评论,并诚挚邀请您加入“互联网er早读课”QQ群,一同交流每天文章的心得并结识同行。官方2群:74447564,加群密码“职业信息+城市+姓名”,否则不予通过,入群后请修改群名片。注:官方QQ群非水群,喜欢闲聊的童鞋请勿加入。再次感谢您对早读课网站的支持。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • 大脸猫

      很多小公司的视觉设计师和交互设计师是一个人。

      • Caoliang

        是的,作为交互设计师不仅仅要懂得程序的框架设计,更需要懂得视觉的交互设计,大多数交互设计师是从程序员发展过来的,很多不具备视觉平面设计基础,这就要求交互设计师必须懂得平面设计的基础知识甚至熟练,对色彩的把握和图形的意图要了如指掌;

        作为交互设计,自己已经有12年平面设计经验,但对程序的框架设计也并不陌生,只要懂得原理就可以解决问题。只是具体编程不用自己做,有程序员编程完成,当然交互设计最重要在于感官、操控、功能上的要求,这就要求在细节上交互设计进行把控。