产品设计

凌乱中的艺术 – 草图原型实战技巧

分层作业

技巧

初期,使用浅灰色的马克笔(大约20%到30%的灰度)勾画轮廓和布局结构;在进入界面元素的细节部分之后,逐渐使用颜色更深的马克笔或钢笔。

解释

从浅色开始初步的框架工作,会让事情变的容易些;在这个阶段,犯些错误也无妨,你可以逐步评估和调整想法。把线画的凌乱些也没太大所谓,在接下来的阶段,使用颜色更深的线条逐步完善草图之后,没人会注意到这些早期的浅色轮廓。

随着灵感落实成为确定的想法,并不断的跃然纸上,我们使用的颜色也可以逐步加深了,必要的时候可以使用钢笔来勾勒细节。通过灰度的差异来体现界面的逻辑,整个草图的层次感会非常鲜明。

分层的做法还可以帮助我们在初期将注意力放在内容结构与视图继承等方面,不至于一开始就被各种细节问题和想法纠缠。如果你知道眼下的界面中需要一个列表,但不清楚列表项中的具体内容,那么就使用浅色笔随便画些曲线来代替文案;在之后的细节阶段,再回过头来用深色笔添加一些具体的范例内容。

web-mobile-ux-user-experience-sketching-prototype-layers

注意

如果你更习惯于使用圆珠笔起草,并且打算接下来用马克笔做辅助的话,记得将圆珠笔的墨迹晾干先,否则会被马克笔中的酒精成分污浊掉。

经过越来越多的实践,你也许开始变的更有把握,而逐渐忽视浅色底层绘制;最终结果也许不会很坏,但我个人仍然建议保留这一步骤,因为你可以在这个阶段里做很多实验性的摸索,一点点评估和落实头脑中的想法。

放松肢体

技巧

在画长线条的时候,试着让自己的手与胳膊跟随着肩膀移动,而不是通过腕子或手肘来用力;只有当你需要快速的画短线条,或是处理一些局部细节的时候,手肘的驱动才更加有效。

解释

肩膀的旋转驱动,可以帮助你画出更长更直的线条。如果只借助手腕的力量,你会发现画出的直线通常是弯的…另外,还可以在画长线之前,先在起点和终点的位置各做一个标记,以增强目标感。

绘制多边形

技巧

对于那些由长线条组成的、用来表示页面或设备轮廓的矩形和其他多边形,可以通过旋转纸面的方法依次画出边框线,而自己的姿势与落笔的角度可以保持不变。

解释

要在每个方向上都画出很漂亮的直线,确实不是容易的事情。只会画横线不会画竖线?把纸面旋转90度好了——这样无论什么角度的直线,对我们来说其实都是一个方向的,我们自己最习惯的姿势和落笔的角度就可以保持不变了;简单又实用。

注意

如果你正在使用白板,这种技巧显然不适用;还是多练习竖线的画法吧。

对交互方式的体现

技巧

以普通草图为基础,将便签贴纸附着在图纸的相关位置上,用来表示那些具有交互性质的界面元素,比如提示气泡、弹出层、模态窗口(modal windows)等。

  • 我们可以在一张草图上使用便签贴纸同时定义多个交互元素,然后按照具体的交互规则,取下一些,再对包含剩余交互元素的草图进行扫描和复印,最终就可以得到一套完整的交互示意草图。
  • 使用不同颜色的贴纸来表示不同类型的交互元素。
  • 一张贴纸的尺寸难以完整的表示模态窗口?在旁边拼一张好了。
  • 一张贴纸的尺寸对于提示气泡来说太大了?裁掉一部分也无妨。

解释

这种方法可以帮助我们在不修改草图框架的情况下快速的定义页面元素的交互方式。便签贴纸的位置可以很方便的被调整,我们还可以在上面勾画该界面元素中的细节内容。

web-mobile-ux-user-experience-sketching-prototype-interaction

web-mobile-ux-user-experience-sketching-prototype-interaction

复印与模板化

有时,对于某些UI元素,你也许要重画并调整很多次。这不能算是坏事,你可以把这样的需求看作重新构思并快速迭代的机会。这种情况下,扫描仪或复印机可以帮助我们提升一些效率。

技巧

使用扫描仪或复印机,将稳定版本的草图复制多张作为框架模板,在其中绘制那些变动需求比较多的UI元素。另外:

  • 界面中的某个部分画败了吗?用一片白纸覆盖住,复印一下,使用影印稿继续。
  • 如果你需要在草图中使用浏览器窗口或是移动设备作为背景,那么可以找来一些现成的图片素材,复印多张为我所用。Smashing Magazine的这篇文章中提供了很多典型的背景框架,包括浏览器、手机等。
  • 如果你需要改变某些已完成草图中的侧边栏,可以用一张白纸画一个新的,复印几张,直接粘贴到这些需要被修改的草图中,覆盖掉旧版的。

解释

复印机就是传统版的“Ctrl+C”和“Ctrl+V”,它能帮我们快速生成模板;这种方式不仅能提升效率,而且可以减少我们在实验和摸索过程中的顾虑——如果把某些UI元素搞乱套了,换一张模板重新来过就是了。

另外,如果你需要使用其他色彩的马克笔来标注重要内容或是绘制特定的界面元素,那么我建议你画在影印稿上,这样可以有效避免不同种类墨水之间的污浊作用。

希望看到您的想法,请您发表评论x