为什么我坚持手绘原型图?

译者按:原文作者Dustin Senos是Medium的前设计主管。他发现手绘的原型图才真正有助于我们的思考,而用Axure或sketch画出来后,一是容易造成思维定势,二是后期改起来非常麻烦。在数字化的今天,笔和纸在很多时候其实仍然有不可取代的价值。

11年前,我加入了一家设计外包公司。当时我才20岁,刚刚入行。头几年,我比较着眼于视觉设计,整天想着如何让这个质地更加逼真?调整一下光影,网站会不会更好看?怎么样让按钮更加有光泽?经常是客户提出一个点子,我问几个问题,然后就是打开Photoshop开干了。几天后,我就给他看一两个版本的视觉稿,然后根据反馈进行调整,接着就进入开发阶段。当时我觉得吧,最牛逼的设计师就是能设计出最漂亮的网页的人。

随着经验渐长,我意识到在开始视觉设计前把给客户看一下原型图可以节省双方的时间。但是画原型图感觉总是怪怪的。原型图的目的是在客户和我决定好方向并且正式动工前留出快速修改的空间。原型画起来应该是很快的,改起来也应该是方便的。但是总觉得在纸上画出来的原型太low,不好展示给客户看,于是我就花不少时间用软件画原型。然而这种数字原型图很少激发有实质意义的讨论,说实话,一旦画好原型,我们就很少改动了。

现在回想起来,我没有体会到原型图的价值,是因为我根本就用错了。它只被我们用来当做证据,防止客户在后期随意改动需求。而我没有意识的是,原型图可以打破设计的思维局限,让你更清楚地找到正确的方向,防止你在错误的道路上走到黑。

新手经常是看重视觉效果胜于功能设计,因为视觉稿很容易传播并且评判:这个页面是不是符合目前的潮流?在Dribbble上是不是拿了很多赞?是否足够扁平化?新手看重视觉的另一个原因,就是漂亮的设计做起来总是相对容易的,放简历里也好看。

初级设计师很难跳出第一个想法,总觉得把这个方案做得光鲜漂亮,就一定会成功 。图片来自Julie Zhou的文章《初级设计师 vs. 资深设计师》
资深设计师的思维

干了10年设计后,我明白了搞清楚事情运作的规律以及背后的原因比好看的设计要重要得多。资深设计师会花更多的时间来思考方向是什么,而不是怎么好看怎么来。正如上面两张图显示的一样,他们的解决思路是完全不一样的。

那么,如何避免陷入第一个想法?如何在短时间内提出多种方案呢?如何确定这个思路优于上一个,或胜过下一个?

什么是有效的原型图

在进入视觉设计前,我是如何强迫自己去探索各种可能性并且确定靠谱的方向的呢?接下来,我就跟大家分享一个简单的技巧-拿起纸和笔来画。手绘原型图画起来很快,并且觉得不行的话,可以立刻丢掉,不会觉得可惜。团队其他人有什么想法,都可以随时拿起笔在上面画出来。

开始

拿一本方格笔记本,画至少20个方框。如果你是做移动端设计的,最好把长宽比跟手机屏幕保持一致。如果是做PC端或网页的,就用电脑显示屏的比例。

过程

想想解决问题都有哪些思路,然后动笔画出来。先画出第一个想法,然后第二个,直到把20个方框都填满。

你会发现很难填满每个方框,这就对了。如果你发现自己思路枯竭的,就给自己加上更苛刻的限制条件:如果菜单是环形会怎么样?如果只有图片呢?如果没有图片呢?苹果会怎么设计?谷歌会怎么处理?如果没有列表的话呢?有多少方法可以把重要的界面元素放在靠近拇指的地方?就我个人而言,一般画到第10个方框的时候,思路才会真正打开。

如果你想的是如何布局,可以画得非常简单,用T指代标题,V指代视频,RV指代相关视频,Sub指代次级导航,这样你就可以专注于布局,而不是UI细节。

或者电灯泡指代文件链接,折线图指代分析内容。

如果你要关注UI布局和元素,那么可以画出如下图的高保真原型图。

到了这个阶段,20个方框都画完了,你脑子也应该非常疲倦。如果方框还没有填完,逼着你自己继续。如果还有余力的话,翻到背面,看看还能不能画出其他的方案。继续深挖,直到尽头。即使画出来的东西有点怪异,也不要紧。

现在所有的方框都满了,仔细看一下,然后挑出几个看起来可行的方案。拿着这几个跟其他人讨论,问问他们是怎么想的。很有意思的是,当你逼着自己把思路说出来时,你会有意外的收获。

重复上述过程

不要以为已经万事大吉,可以动工做视觉稿了。还是要审视原型图,因为是手绘的,还没定下来,随时都可以修改,什么都可能会改动。

现在选出最有效的几个方案,画出高保真的手绘稿。建议用更大的方框,我一般是一张A4纸里分成4个方框。这个时候,我们就要看看加入更多细节之后,这几个方法还能不能hold得住。

搞定之后,把高保真手绘稿给其他人看看,收集反馈。可以用手机拍下来,发给客户看。因为你画这种原型图用不了多少时间,所以你潜意识里会更加乐意接受意见,反正改起来也很快。

下一步

就这样,在很短的时间,你在纸上已经画满了解决问题的各种方案。你逼着自己打开了思路,还想出一些不是那么显而易见的点子。你也已经收获了好几轮的反馈,在理想的情况下,某些方案是可行的,你就可以朝着该方向进行更深入的思考。你还没受到颜色,字体,光泽,或者其他任何视觉因素的干扰。你收到的反馈都是比较高层次的,概念上的,而不是美学上或细枝末节的。

接下来做什么就取决于你自己了。Google有一个概念,叫做“寻找矛盾”,那就是看看不同方案之间的区别是什么,然后选择最好的方式向前推进。通常呢,我会把确定的几个页面串联在一起,在操作流程中看看这个页面的上一个页面是什么?下一个页面是什么?然后用软件做出动态原型图,来感受一下在设备上是如何操作的。

希望这个技巧能帮助你迅速地找到多个有效方案。

文末福利:这个技巧不仅仅适用于设计哦

当我还在Medium的时候,负责Medium推特账号的Nick Fisher告诉我,他在发布之前,经常会草拟十个版本。他在确定最终的版本前,会逼着自己用不同的方式写出来。所以,多尝试多探索。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容