良好的沟通达成完美的设计

界面设计不只是一个学门,而且是一门结合设计、工程以及人因工程的艺术。大部分的界面设计都需要至少两个人的合作:一个界面设计师、一个界面工程师(如果是设计网站可能叫做前端工程师、软件则可能就是软件设计师),这两个人必须不停的彼此沟通,才能够将彼此的构想几乎无缝的互相交换,才能设计出完美的界面作品。

5431725059_7822fd9571_z

了解对方的思考方式

对网站界面设计师而言,HTML5 与 CSS3 的出现已经可以取代许多以前只能由绘图软件才能画出的效果,厉害一点的设计师会开始学习把 HTML5 当画布、CSS3 当画笔来绘制界面,让这些界面本身就是以 Markup 语言为基础。有时候互相理解对方所使用的工具就是最好的沟通方法,同样的一行 HTML Code,在设计师眼中和在工程师眼中可能是完全不同的东西。

举例来说:设计师们已经很熟悉 Photoshop 那种图层似的概念(或是 Illustrator 那种物件式的),当他们看到 HTML Code 的时候,几乎都会把它们转换成画布上的图层,设计师非常善用图像化的方法来在脑海中想象自己将做出来的东西。而同样的一段程序码,对于注重逻辑以及资料关连性的工程师来说,可能看起来比较象是物件模型中的节点与资料的关系。

130424-0005130424-0007两种思考方式都有各自的优点以及能够灵活运用的地方,重点是能够体会对方是怎么思考的,尤其是在一起讨论界面如何设计实作的时候,有时候也将对方的思考方式纳入考虑,会更清楚的知道要如何沟通,甚至用对方的语言描述出自己想要达成的构想,不要害怕彼此的专业领域,会是设计更成功的关键。

用雏形沟通

在整个设计的过程中,最大的困难就是沟通了。最基础的沟通会从架构与整体互动就开始,透过 Paper Prototype 的方式,让所有参与设计与实作的人都能了解整个界面的操作流程是什么。制作雏形可以快速的收敛大家的构想,即使有不同的思考方式,但也可以得到相同的洞察与了解。

许多设计师在设计阶段所提供的草图是 Photoshop 或 Illustrator 档案,但是这两种档案几乎都是静态的,或者是几个不同状态的截图。举例来说,如果设计的是一个多层次的下拉式选单,设计师可能提供四张图分别是:选单关闭、打开选单、打开次选单和鼠标移到选单上的画面。也就是说当草图交到工程师手上的时候,他们必须自行想象选单关闭到打开中间需要什么样的动画,淡出(Fade In)吗?还是往下滑出(Slide Down)呢?弹跳效果(Bounce)?还是设计师根本只是想要他突然出现?这些都需要更仔细的对话才能解释清楚,或者干脆引入更具有互动效果的设计工具。

6574039345_73803b81b5

善用工具制作雏形

最简单的雏形制作方法就是 Storyboard,设计师就像拍电影一样,帮每个场景画下细节,然后在每个故事格子旁边写笔记,用绘图或是任何一种方式表达出过场动画需要的效果,再「面对面」的对工程师解释他们想要的效果。如果是采用 Paper Prototype 的方式制作雏形,可以考虑使用华人之光 POP: Prototyping on Paper 来快速制作能互动的雏形。另外,Infragistics 也是一个很棒的 Prototyping 工具可以制作出神奇的效果。

制作网站的时候,许多设计师可以透过简单的 HTML, CSS 以及 Javascript 来表现他们的想法,但是制作 App 的时候难度就提高了许多。无论如何,因为我们设计的就是整个互动的效果,偶尔还会加上一些物理性的特效(弹簧、伸缩、渐变等等),采用这些静态的方法表示动态的图像,代表着沟通总是会有落差。设计师们也许可以学习一些工具,象是前一阵子因为 Facebook Home 火红的 Quantz Composer 就是个很容易就可以让设计师做出互动效果的工具,或者其实采用 Flash 做一点简单的效果,有个简单的渐变动画让工程师能理解那中间的过程(不是把 Flash 当做最后的作品,而是当成一种 Prototyping 与沟通的工具)。

130424-0009

设计界面总是很有趣,尤其是当许多人一起完成一项作品的时候,那更是会让人感到兴奋。千万不要害怕沟通,或是总觉得对方听不懂你在说什么。尝试用对方的语言沟通,让他了解你的想法,制作雏形记录每一个沟通的过程,都可以让设计加分许多。

文章来源



属性标签: ,

欢迎留言

页面生成消耗的时间 0.357 秒,此页面一共查询了 108 次数据库!缓存时间:2019-12-12 05:36:15你的IP为:18.205.60.226