交互设计师必看:怎样让你的线框图发挥出真正价值?

初级设计师的设计进程

以上这则小插图是从大神Julie Zhou的文章,Junior Designers vs. Senior Designer(初级设计师与高级设计的对比)中拿来的。

这张图很好了阐述了新人们在画线框的时候普遍都存在的一个现象:当一个想法出来之后我们都知道先用线框画下来,但是画着画着,总觉得不对劲,总觉得加上视觉元素之后才能真正看出效果来。在线框图阶段,这个“看出效果来”不知道浪费了多少设计小新的时间。

初级设计师总是无意之中就把注意力过多的集中到视觉层面之上,而忽视了功能上面的设计。功能上的设计却真正是线框图阶段最紧要的事情。视觉层次,最先也最易被感受和判断,所以大家容易被吸引过去,想是不是符合最先的潮流啦,能不能在追波上得到很多赞啦,够不够扁平啦,够不够渐变啦,能不能发票圈炫耀一下啦,能不能放到简历里面啦blabla。初级设计师容易陷入这种让视觉满足过分占据我们大脑的错误状态之中。

高级设计师的设计流程

在设计界摸爬滚打多年之后,哥领略到了,搞清楚一个东西的运作方式,远远比它看起来怎么样更加重要。高级设计师会更少地花时间在外观上面,他们反而会在选择一个正确的发展方向上面更舍得花心思。看看上面那幅图,高级设计师解决问题的方法和初级小鲜肉截然不同。

一辆小破车,无论你喷多贵的车漆,也不会让它内在变更好。

所以,我们怎么才能够避免在不成熟的idea上面花去了过多的时间精力?怎么才能在避免浪费过多时间的前提下拿出尽量多的问题解决方案?怎么对方案之间的优劣作出正确的判断?

做有用的线框图

下面我会跟大家分享我在线框图阶段的工作流程,流程本身不重要,重要的是里面的思路。

一般我会在线框图阶段探索解决问题的办法。本文中的线框图指的是纸质线框图,纸质线框图的好处大家都知道,真正的快,真正的好,真正的简单,每个人都能画,修改起来也不会心疼。(详见译者的另外一篇文章《先别急着画高保真原型》)。使用纸质线框图能够避免你把“漂亮的线框图”跟“好的idea”混淆。

第一步

开始吧。我会拿起一本好点的笔记本,先画上大概20个矩形框作为我们的屏幕,请按照你们所要设计的对象设备屏幕的比例来画。

第二步

拿起笔,先把最先出现在你脑海中的东西画出来,然后继续思考,尽量在每个矩形里面都画上你的idea。

在这个过程中,你基本不可能画出20个你都很满意的方案来,然而这就是重点,让你从舒适区中跳出来,强迫自己想一些自己不知道的东西。当然,并不是让你像完任务一样毫无道理地画满20个矩形,当你感到画无可画、想无可想的时候,试着让自己做一些以前都没做过的东西,比如:只留下图片怎么样?没图片会怎样?苹果有案例看看吗?谷歌会怎么做呢?如果不用列表会怎样呢?能不能把重要的东西放在靠近用户拇指那一侧呢?对于我来说,当画到第十个idea左右,有趣的东西就差不多来了。也请记得暂时忽略视觉设计思维,暂时看起来是很丑,但是线框图阶段我们设计的是功能结构。

如果没有把20个都填满,那么勉强一下自己,想多一些,直到自己真的想不出任何方案来了。要舍得在产品的功能性上面运营更多的时间,即便画出的来的东西可能看起来非常怪异。

第三步

理想状态下,当上述的步骤得出了结果,那么接下来就应该转入视觉层面上的工作了对吗?但是这种情况实际上很少见,我建议先别急着打开电脑。让你的想法在纸上多呆一阵子,让这种一切还能改变的状态多留久一些。

将脱颖而出的方案拿出来,在新的纸上画出更大的矩形框,将方案画成保真度更高的线框图。这个阶段我们主要的任务就是验证这些方案能否承载得起更多的细节。

当这些工作做完之后你就能够拿去跟同事领导进行探讨了,看看有没什么改进的地方。由于我们之前的工作一直是在纸上进行的,已经节省了好多时间,而且目前我们的方案还停留在纸上,这时候一定要摆好心态,不要怕改,继续发挥线框图的作用。

下一阶段

仅花去了相对较少的时间,你可能就得到了一个或数个拿得出手的方案。因为前面你已经做出了你想得到的和不那么容易想得到的假设,又得到了数次反馈,对方案的细节也有了一定的探索了。(拿着线框图就做线框图的事情,在收集反馈意见的时候也请尽量引导大家往基本框架和功能的层面去讨论。)

线框图阶段的工作大致完成之后要去做什么在这里我们就不讨论了,但是我可以简单的分析一下自己接下来的工作流程。我推荐大家去读读《Searching for Conflicts(查找冲突)》这篇文章,它里面的概念对我判断idea之间的异同和设计工作的推进有一些启发性的帮助。通常我不会那么快就结束掉线框阶段的工作,我会将关键屏的线框图放到流程里面的再考虑一番,看看前后衔接上面会不会出现问题,当这一步走查工作完成之后我才会制作电子格式的原型,然后在真实设备上体验。

理想条件之下,通过这个方法,你能够得到数个不同的想法,最后对比之下选出一个你认为最佳的方案。这样你就能够最大程度之上避免了过早的拿出了并不那么成熟的方案了。我想这就是作线框图的真正价值。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2017-05-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏喔家ArchiSelf

令人激动的语音UI背后

亚马逊Echo和Echo Dot智能音箱获得了成功,它已经使语音命令(通常称为语音UI或语音UI)出现在了新技术产品中。在每一部智能手机和平板电脑上,大多数新型...

3204
来自专栏AI科技评论

学界 | Facebook 最新研究:自主学习一个会和世界互动的智能体

AI 科技评论按:本文由来自 Facebook 人工智能研究院的研究员 Dhruv Batra 和 Devi Parikh 共同撰写,文中介绍了 Faceboo...

1222
来自专栏ATYUN订阅号

MIT研究团队致力于用AI革新日常用品

机器学习是实践中人工智能的一个例子。智能系统和设备已经普及到我们日常生活的结构中。电脑和手机使用脸部识别来解锁;系统感知并调整我们家中的温度;设备回答问题或按需...

812
来自专栏PPV课数据科学社区

【学习】关于数据挖掘算法的反思

 写这篇文章,缘自于前几天部门内部成员们进行了一次部门内部现有涉及的一些算法的review以及整理。不过比较囧的就是,由于boss不在,我们讨论讨论着就成了吐槽...

3535
来自专栏新智元

【神经拟态计算】 有新灵魂的机器——模拟大脑的计算机

人们喜欢变着花样来形容大脑。以前,大脑被时髦地比作 17 世纪贵族花园中赏心悦目的喷泉背后的水力供应系统。随着技术的发展,大脑先后被形容为电报通信网和电话交换系...

3706
来自专栏机器之心

专栏 | 视觉导向应用中的可扩展解决方案:全可编程SoC

赛灵思专栏 作者:前赛灵思机器视觉市场战略总监Aaron Behman 在这篇文章中,前赛灵思机器视觉市场战略总监Aaron Behman 针对嵌入式视觉方面的...

2794
来自专栏大数据挖掘DT机器学习

数据挖掘这些年,这些算法,这些反思

写这篇文章,缘自于前几天部门内部成员们进行了一次部门内部现有涉及的一些算法的review以及整理。不过比较囧的就是,由于boss不在,我们讨论讨论着就...

3186
来自专栏机器之心

阿里量子实验室推出量子电路模拟器「太章」:成功模拟81比特40层量子电路

2187
来自专栏IT 指南者专栏

究竟什么才是学习?

我一直以为,学习就应该是拿着学习的资料,花大块的时间在图书馆里面按照计划一字一句、从头到尾的进行研习。但慢慢的我发现,我对学习的理解太狭隘,我一直在错误的进行学...

2698
来自专栏新智元

【Nature】机器学习实时读取大脑信息,超级计算绘制“思维地图”

【新智元导读】普林斯顿和英特尔合作,开发了一款脑成像分析套件(BrainIAK)的软件工具包,能通过互联网公开提供给任何想要处理fMRI数据的研究人员。他们的最...

36511

扫码关注云+社区

领取腾讯云代金券