企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

网站设计的设计师要画草图

发布时间:2017-04-21 08:57:07

TAGS:网站设计

blob.pngQuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

我对用户体验草图绘制的体会,我们的导师,草图绘制大师Kate Rutter教会了我们如何通过草图将自己的创意呈现于纸上。下面是为大家分享一些能够用于快速、有效绘制草图的实体或抽象工具。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

为什么要绘制草图?QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

作为用户体验设计师,我们应当能够自如的与不同的职能团队协作打造复杂、有效的产品。为了确保未来的成功,在产品创造的早期阶段形成多样的创意是必不可少的,因为好的创意往往出现于创造过程。通过收集有关创意的反馈信息,可以让我们在开始进一步工作之前达到去伪存真的效果。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

就我个人而言,马克笔和纸就像钥匙一样能够开启我脑中充满童年色彩的创意、探索空间,这一空间也是打造创意的理想境界。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

你的设计需要哪种类型的反馈?QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

作品的详实程度,与我们预期得到的反馈情况之间有着直接的联系。如果我们呈现出一个彩色、详尽的PSD模拟图,那么可能会听到如下的反馈:QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

“你为什么要选这个字体”(也就是说,反馈面会比较窄)QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

但是,如果你呈现出一个手绘的UI草图,可能会得到如下的反馈:QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

“用户应该怎么从这添加好友”(亦即:反馈面比较广)QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在设计早期,我们需要尽可能宽泛(概括性)的反馈。不要让对方的注意力被吸引到设计的表象上去。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

另外,如果详实程度过高,就会过早的把我们框入到既定的创意范围内并刺激我们在完美程度上钻牛角尖。但是通过纸和笔,就可以避免很多这一类陷阱。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

从心理学角度讲,看非正式的草图,会比看精心修饰过的内容更加容易激发观看者提出建设性的意见。即便是黑白的矢量UI草图也能抑制对方提出太有针对性的反馈。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

不一定要很漂亮,但一定要简单。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

很多同行不会自诩为大艺术家,好在我们干的活也并非艺术,而是信息传达。但即便你不认为自己是个艺术家,学习一些基本的技术技巧也能够帮助你通过草图绘制表达自己。不当艺术家实际上反而能让你把精力集中到创意,而非草图是否美观上,百利而无一害。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

而对于自诩为艺术家的人,其所面临的难点就在于如何在短期批量出产草图时放下对完美的追求。这对于热衷打造精美图形和线条的设计师来说,恐怕会很难。使用Time boxing这套工具则可以帮助设计师克服这一困难,实现快速创意。要记住,我们的目标是创造出快速的信息传达媒介。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

来看看这套工具:QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

你需要使用下列工具:QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

1.宽记号笔——要突出表现对象时使用QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2.细记号笔——用于绘制主要图形QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

3.超细记号笔——用于绘制较小的细节QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

4.30%或40%灰色马克笔——用于添加阴影以及让特点区域深入背景中QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

5.黄色荧光笔——用于绘制关键点,例如交互区域QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

6.一沓绘图纸QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

7.便利贴QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

8.小贴纸QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

9.计时器QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

技巧QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

热身练习:在Tradecraft的课堂上,用户体验设计师会学习如何在计时器的帮助下绘制草图。一般我们首先会看一套网站的截图,然后用5秒钟时间绘制出自己所关注到的5个元素。其效果大致如下:QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这项练习能够强迫我们的大脑进行详实度思考并跳出完美主义的局限。我们会首先思考贴近度、层次关系和主次关系等基本视觉概念,并会注意到吸引注意力的内容及其原因。经常进行这项练习能够锻炼自己的思维能力。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

创意形成:我们开始对产品或功能进行创意绘制。在此过程中,我们需要快速完成下列各阶段,每个阶段限时5到10分钟:QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

1. 有哪些问题?描绘出目标用户及其所面临的问题:QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2. 你的创意对解决这个问题有何帮助?画出你的用户用你的产品解决问题的情景。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

3. 产品如何使用——画出6种用户与产品/功能交互或使用产品/功能解决问题的情景:QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

提示:每个方框的大小相当于一个便利贴QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

4.票选创意QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如果你们是团队合作,可以用贴纸投票选出有趣或重要的一个设计范围进行深入(蓝色是你队友的投票,红色是你自己的投票。)如果你是一个人,那票数多的人估计就是你自己了。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

5.做出5套快速UI草图QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设想你的设计在UI中向用户呈现的方式。你不需要画出界面的所有细节,只需要画出与你当前所探索范围相关的内容。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

然后选出你中意的一套UI草图。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

6.详细UI草图QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在这一步,你可以开始拓展自己的UI创意,并思考如何对其进行进一步深入。使用注解说明可能存在疑问的地方。这次的草图需要让人一眼能够看明白。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

提示:草图中加入用户元素能够强调出你选择当前设计的理由。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

7. 画出前后流程QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

下面,你可以开始考虑与当前界面前后联系的屏幕界面,进而初步思索交互方式。这一步需要用黄色的荧光笔和灰色马克笔来凸显出重要的部分以及交互内容。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联


QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

总结QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

上述的全部过程时长约45分钟。这一神奇的流程能够帮助你快速获得创意。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

养成快速绘制草图呈现创意的习惯。不要管草图漂不漂亮,将精力集中到如何清楚传达创意讯息上。要记住:QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

“UBU(丑但是有用)远比(漂亮但是没意义)有效”——Kate RutterQuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

创意草图绘制有许多技巧,对于哪些方法有效也存在着各种不同的理论。你可以多多练习,自己探索适合自己的方法。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

衷心希望各位设计师和非设计师朋友提供有关创意草图绘制的意见。QuZ北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,7226,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号