Back

用草图来规划网站

[国外设计第20期]

Planning Your Web Design with Sketches
Planning Your Web Design with Sketches

设计院校中有大量的基本课程。大企业与创业公司都在采取回归本源的设计方式,这一点也不稀奇。

无论你是个终身的涂鸦艺术家,还是一位严肃的商标设计师,通过纸张探索灵感都是一项重要的设计技能。

别怕!铅笔这类工具的力量不会消亡。在这个专注设备的时代,简单、久经考验的设计方式仍然大有可为。

实际上,我已经听到一种日渐强烈的声音,反对将工时浪费在高保真photoshop效果图上。手绘稿让你以一种灵活巧妙的方式,创作迭代式的渐进设计,不必为了高保真设计图和电子稿而超支时间。

不论你是大公司还是自由设计师,通过快速手绘与客户交流想法,是一项相当重要的手段。

为什么手绘?

手绘稿在某些方面对线框图甚至电子稿有所优势。它便携、亲切、富有创造力,并且久经考验。再没什么比纸和铅笔(或者钢笔)更简单的了。

我也发现,手绘稿对客户而言足够通俗,使他们能够提出意见并且做出修改。高保真效果图看起来就像是“成品”或者即将完成,那会束缚客户提出改进建议的意愿(我在这里真的忍不住要插一句,这完全不符合国情啊,不科学啊!)。手绘稿相对散漫、友好、非正式……你可以擦掉进行修改。

Wireframes tend to be very text-heavy and rarely communicate art direction and tone. Especially for photography and visual assets. When
Wireframes tend to be very text-heavy and rarely communicate art direction and tone. Especially for photography and visual assets. When

线框图总是充斥大量文字,极少反映出美术趋向和设计基调。特别是对于照片和视觉元素。你可曾见过一个大叉叉传达出了照片内容?

通过手绘稿,你可以快速、近乎思维练习式地迅速记录下你的创意。它能飞快见效,让你在屏幕前花更少工时,从而拥有更多时间来产生创意。卷起袖管然后寻找答案吧。

Another Wireframe
Another Wireframe

This eventually turned into a Photoshop comp for the client. You can see how it resembles the traditional wireframe but more closely mirrors the art direction of the comp.
This eventually turned into a Photoshop comp for the client. You can see how it resembles the traditional wireframe but more closely mirrors the art direction of the comp.

它最终会转化为photoshop的视觉稿给客户。你会发现它与传统线框图相近,却能更接近地反映出设计稿的美术趋向。

通过手绘,能够消灭那些仅仅为了占位的图片。要知道,你放在原型图和效果图中的一个大叉叉,代表着这里将放入一张真实的图片。你就会省着用你那些昂贵的版权图片了。

This is the comp for the website. Do you see the progression from sketch and wireframe to final comp?
This is the comp for the website. Do you see the progression from sketch and wireframe to final comp?

这就是网站的效果图。你能看出草图到线框图再到效果图的变化吗?

从哪入手

有一点可以肯定,多加练习才能精通。随身携带笔记本来涂鸦、迭代、速写,保持这项技能处在最佳状态。

我发现,练习的最好办法,就是在任何排队的时候拿出来画一画——比如买咖啡、杂货店购物、等待火车……只要是等待时间,都可以用来手绘。

画下你的所见,这个技巧会对以后有帮助,当你需要向客户展示的时候。画下每个给你带来灵感的东西,随身携带笔记本就意味着你可以随时记录灵感,留待以后使用。

随着手绘量的增加,你会开始学着精炼你的手绘稿,并将它们转化为更加正式的插图或绘画。

为网页设计而手绘

规划一个网站时,手绘可以成为非常重要的一环。你可以把它用于设计、用户体验测试、界面元素,甚至尝试字体设计方面的创意。

我曾经在多个网站中用它来想象一些创意元素,比如照片和图标。我也在关键界面问题上使用过这个办法,例如怎样使一个按钮或图标更加直观友好。

交流设计元素的推演变化时,手绘也是最好的方法。客户喜欢这个有创造性的环节。他们会深陷于此,并也喜欢上手绘。

我有个客户说过:“哇,好像我想什么你就能马上画出来。太不可思议了!”这就是和客户面谈时,飞快手绘的魔力。

注意!多加练习

Doodlers Anonymous
Doodlers Anonymous

Doodlers Anonymous是个不错的地方,可以作为学习的起点,看看别人如何手绘、涂鸦并思考他们的创意。它也是一个很棒的分享社区和同行交流场所。

注意,现实是残酷的。钻研手绘会很艰苦。如果你不够老练,或者没有将你的绘图稿打磨好……那么找些工作之外的时间专门来画。

可以在Worldwide Sketchcrawl,Doodlers AnonymousUrban Sketchers这样的网站找到灵感。

订阅一些手绘博客,钻研那些日志和手绘稿。然后问问自己,准备好在客户面前绘画了吗?

Urban Sketchers
Urban Sketchers

Urban Sketchers是一个致力于观察研究手绘的国际非营利组织。他们在Flickr和Facebook上有着完善的社区。他们博客的重要组成,是一个由手绘选稿记者构成的核心小组,他们在全世界范围内收集别人分享的作品。在他们的网站和Flickr、Facebook社区里,你可以找到很多颇具启发性的方式来素描你身边的世界。

记住,简笔画没法给人留下什么印象。具备手绘的能力是非常重要的开端。在投入到客户的项目中之前,你可能得花些时间“练习”和理解如何用手绘来表达想法。

Early digital sketch
Early digital sketch

这是一件早期的电子手绘作品。当时我在实验混合型的电子线框图,用Wacom数位板草草画成的。从这些早期手绘作品中,我学到了对客户而言,简笔画是远远不够的。

手绘时应该提出的问题

首先问问自己,是否了解所设计页面中的所有元素?如果是个改版项目,我会检查现有内容,思考用户希望看到什么。

如果是个新站点,我会浏览同行网站,做一些竞争分析,然后看看那些最“典型”的用户需要什么,将这些内容加入列表中。

接下来,我会询问客户是否有某些设计偏好。很多情况下,客户都有他们自己喜欢和推崇的网站。了解这些,并领会他们偏好的设计语言是非常有帮助的。配色方案、字体、语言/文案风格、视觉元素,还有那些会影响到市场专员的设计趋势。Pinterest、氛围图片库和“寻宝游戏”,有助于掌握一个客户的个人喜好。

手绘表达设计

private school web design
private school web design

以此为例,这是我给一所私立学校设计网站时画的。目的就是避免花大量时间在高保真photoshop效果图上,也能把主页的线框图具象化。

首先,我用便签条或者写一份文档,来收集这个页面的最关键信息。当然,最开始都是在纸上写字,但文字是具有代表性的灵感源头,而且能为我整理出一份所需的导航、内容、支持信息的综合列表。

然后,我会将文字项的列表转化为缩略图。画出导航、内容区块、广告、栏目、支持信息区块、页头、页尾等等。如果纸张不够用,就在下方再粘一张。

接着,我会选出最终优胜的创意,用于最后的手绘稿。一旦我形成一系列有用的创意,就决定朝着它的方向继续进行。在这个阶段我总能从客户和设计师同行那里获得大量的反馈。手绘看起来非常通俗,客户在选出最佳创意时也感觉更轻松,此时,距离正式的PSD效果图还早。

典型的项目流程

Photoshop comp fully-rendered
Photoshop comp fully-rendered

这是从手绘线框图演化来的高保真Photoshop视觉稿。能从中看出手绘对于照片的美术趋向产生的帮助。

在大多数项目中,我从简单的矩形入手,画出一系列缩略图。这个过程相当简单,但它能帮助我产生一系列确定的方案,供客户、项目经理、和设计师同行选择。

当我们谈及缩略图和其背后的创意时,我会根据选定的缩略图进一步画出草图。这些粗糙的草图主要为了确定内容优先级,推动页面布局的定稿。我也会画出照片和创意元素,比如该布局中的按钮或其他图标图形元素。

在草图阶段,我希望回答诸如“用户要的是什么”和“如何体现内容优先级”这类问题。这个阶段非常需要合作讨论。我会将草图与客户、经理、项目同僚和其他设计师分享。如果有必要,我们会暂停一会儿,画出一两个草图摆到用户面前以供测试。然后重复这一阶段,对草图进行精炼、迭代和推演。

一旦草图的方向明确了,我会画出正式的手绘稿。像传统线框图一样,手绘线框图的页面上有确定内容……文字、图标和照片。于是,我对于照片的美术趋向在手绘稿中得到了检验和探讨。我也通过手绘线框图来将最终的UI元素具象化,确保它们有用。我们通常会对这些进行测试,甚至对于某些非常复杂的界面,还要画出那些用户会遇到的过渡界面的线框图。

很多次,进行到正式陈述的阶段时,我会用墨水代替石墨来画图。墨水能为手绘稿增加一点正式感,如果再加入颜色,我就不必担心遗漏页面上某些实际UI元素。

最终,你总会形成自己的流程。手绘最神奇的地方在于,它能达到完全的自由。你能在任何时候捕捉灵感。

画好会议手绘稿所需的“插件”

Finding useful tools
Finding useful tools

找到合适的工具来为客户手绘很重要。我是Uni-Bal Vision的忠实粉丝,它是防水的。一支顺手的笔刷,可以很好地大面积填充深色墨水。

所以,总而言之,下面介绍一些画好互动手绘稿所需的“会议”用品。

钢笔——我爱用钢笔绘图。当然,用墨水挥洒创意需要一定的自信,不过你可以随时重画那些线条。客户也喜欢墨水的清晰。我最爱的钢笔是Uni-Ball Vision。它是防水的,可以放心用水彩笔画上颜色。

“便携式”白板——找一块旧白板,将它切成更小更易携带的“移动”白板。移动白板可以跟着你穿梭于办公室之间,还能通过Evernote来记录迭代修改和手绘稿。

大素描本——别在客户项目中用小素描本,不要怕,找些14英寸宽的东西来用。尽可能在大的东西上呈现创意。

活动挂图——它和便携白板类似……是件不可思议的工具,能让你的客户紧密围绕某个创意或概念。而有粘性的那种能粘在墙上,用来应对长时间设计会议和整个下午的团队工作。

结论

作为一名设计师,最贵重的财产就是你的头脑。快速即兴表达视觉信息的能力,让你区别于网页开发流程中的其他角色。而手绘能将你从鼠标和显示器中解放出来,现场展现客户所需的答案。

具备了可靠的手绘技巧,设计师可以即兴表达创意,将交谈转化为实实在在的创新。手绘可以很通俗闲散,能让整个项目保持亲切。

那么,拿起一只钢笔或铅笔、一本素描本,然后将你的涂鸦转化雇主和客户的销售额吧。

原文链接