凌乱中艺术 #8211; 草图原型实战技巧.pdf

凌乱中的艺术 – 草图原型实战技巧 五年时间转瞬即逝 ，在自己小窝的最后一 周末 ；眼看着家当和心情都被打包的差不多了 ，整 人 却终于感冒发烧腹泻垮了下来 ，这是闹哪样呢。所幸本周前面几天可以抽出些时间做掉这篇译文 ， 今天发掉先。接下来的两 月 ，大概要集中业余零散精力放在一本iO S书的翻译上了 ；希望还能有 些时间分给这边。杂七杂八就到这里 ，我们直接进入正文——草图原型实战技巧 ，没有务虚的大 道理 ，每 内容要点都很实用。走着。 在如今的用户体验及产品圈子里 ，越来越多的人开始了解到草图及相关的原型工作对于整 设计流 程的重要意义 ；不过在实际工作中 ，真正会拿起纸和笔的人貌似不是很多。作为一名用户体验设 计师 ，我(英文原文作者)每天都会画草图 ，我还霸着办公室的一整面墙 ，在上面铺满草图 ，标注着 各种上下文情景脚本。 确实 ，使用电脑中的原型设计软件代替纸和笔 ，在很多时候是一种省时省力的做法 ，不过从可视化 与实体化的角度来看 ，这并不是最好的解决方案。当你正在构思网站页面或是移动应用的布局 ，琢 磨着功能流程及上下文情景脚本的时候 ，拿起笔画画草图才是更加直接有效的方式——它可以帮助 你集中精力解决眼前的问题 ，尽情的勾勒各种想法 ，而不必为工具软件的使用方法或功能限制等方 面的因素分散注意力。 很多文章都会告诉你草图这东西有多给力 ，但是基本不会从实战的角度进行深入而细致的讲解 ；本 文则不然 ，我会实打实的从具体执行的角度 ，向大家介绍一些常用技巧及其背后的道理 ，这些都是 我和其他很多用户体验设计师在每天的工作中所要用到的。 草图 ≠ 绘画 从视觉角度上讲 ，即使最完美的草图作品 ，与真正意义上的“绘画”相比也是相距甚远的。如同你的 思维与灵感 ，草图应该处于一种持续变化的状态 ，随时可以根据需求进行调整。你确实不必掌握那 些真正的绘画技能 ，不过有相关经验的话自然更好。 那么草图的本质到底是什么呢 ？简单来说 ： 草图是思维的表达方式 ，用来解决问题。 草图是一种可视化的、更加清晰有效的沟通方式。 画草图是一种技能 ，实践的越多 ，能力越强。 不要太在意草图在“绘画”方面的视觉效果 ，试着把它当作海报来审视——你第一眼看到的是什么 ？ 细节信息在什么地方 ？记住 ，人的目光总会被细节与强烈的对比所吸引。 就像语言表达能力可以决定人与人之间互相了解的程度 ，草图的表现力也会直接影响到产品设计流 程中的信息沟通。好在 ，我们有一些不错的方法可以学习和运用 ，在实践中逐渐提高自己的草图表 达技能。 分层作业 技巧 初期 ，使用浅灰色的马克笔(大约20%到30%的灰度)勾画轮廓和布局结构 ；在进入界面元素的细节部 分之后 ，逐渐使用颜色更深的马克笔或钢笔。 解释 从浅色开始初步的框架工作 ，会让事情变的容易些 ；在这 阶段 ，犯些错误也无妨 ，你可以逐步评 估和调整想法。把线画的凌乱些也没太大所谓 ，在接下来的阶段 ，使用颜色更深的线条逐步完善草 图之后 ，没人会注意到这些早期的浅色轮廓。 随着灵感落实成为确定的想法 ，并不断的跃然纸上 ，我们使用的颜色也可以逐步加深了 ，必要的时 候可以使用钢笔来勾勒细节。通过灰度的差异来体现界面的逻辑 ，整 草图的层次感会非常鲜明。 分层的做法还可以帮助我们在初期将注意力放在内容结构与视图继承等方面 ，不至于一开始就被各 种细节问题和想法纠缠。如果你知道眼下的界面中需要一 列表 ，但不清楚列表项中的具体内容 ， 那么就使用浅色笔随便画些曲线来代替文案 ；在之后的细节阶段 ，再回过头来用深色笔添加一些具 体的范例内容。 注意 如果你更习惯于使用圆珠笔起草 ，并且打算接下来用马克笔做辅助的话 ，记得将圆珠笔的墨迹晾 干先 ，否则会被马克笔中的酒精成分污浊掉。 经过越来越多的实践 ，你也许开始变的更有把握 ，而逐渐忽视浅色底层绘制 ；最终结果也许不会 很坏 ，但我 人仍然建议保留这一步骤 ，因为你可以在这 阶段里做很多实验性的摸索 ，一点点评 估和落实头脑中的想法。 放松肢体 技巧 在画长线条的时候 ，试着让自己的手与胳膊跟随着肩膀移动 ，而不是通过腕子或手肘来用力 ；只有 当你需要快速的画短线条 ，或是处理一些局部细节的时候 ，手肘的驱动才更加有效。 解释 肩膀的旋转驱动 ，可以帮助你画出更长更直的线条。如果只借助手腕的力量 ，你会发现画出的直线 通常是弯的…另外 ，还可以在画长线之前 ，先在起点和终点的位置各做一 标记 ，以增强目标感。 绘制多边形 技巧 对于那些由长线条组成的、用来表示页面或设备轮廓的矩形和其他多边形 ，可