完美设计之前请学会良好的沟通

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

了解對方的思考方式

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

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

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

用雏形沟通

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

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

善用工具制作雏形

最简单的雏形制作方法就是纸面原型的方式制作雏形，可以考虑使华人之光POP: Prototyping on Paper来快速制作能互动的雏形。另外，Infragistics也是一个很棒的原型工具可以制作出神奇的效果。

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

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

================关于优设网================
“优设网uisdc.com”是一个分享网页设计、无线端设计以及PS教程的干货网站。

特色推荐：
设计讲座：定期邀请国内互联网公司的设计前辈及行业总监在群内及YY语音（YY频道：15335158）分享实战经验。
设计微博：我们拥有粉丝量26万的人气微博@优秀网页设计 ，欢迎大家关注及时获取设计资源。
设计导航：史上最赞最全面的设计师必备网址导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以扫描下方二维码快速添加：