设计中的沟通 用铅笔来绘制“粗糙”的草图

  在Web UI 模型出现之前,经过了很长一段的时间,设计师们都会选择使用缩略图(Thumbnail Sketching)来展现自己的创意,表达自己的思路。这种技巧就像是设计师专门用于沟通的一种艺术,而这种艺术现在却渐渐淡出大家的视线。

  而通过本文,就让大家重新审视品味一下这种艺术。

  对于设计师而言,对线框图的期望其实是一种能够在繁重设计工作中整理自己思路的方式。而绘制缩略图更多的是就是为自己累计更多的创意,从中找到自己思维中的闪光点。

  草图是绘制线框图的地基


  线框图(Wireframing)是我们熟知的设计基础。按照大家现在的认知,大部分的设计师都会将线框图当作设计的第一个基础步骤。

  实际上,缩略图是一种更久远并且使用起来更成熟的技术,可惜现在大家基本不会在这个技术上投入什么精力进行讨论。缩略图并不像从前那样受到重视,我们无需回避这个话题,因为现在,线框图的使用可以让设计师能够更专注在最基础的页面架构上,使得设计过程中可以不受设计风格的考量干扰。

  但缩略图的确比线框图更加基础,在设计中通过对缩略图的绘制,所表达出的设计更加具现化。但更重要的是,设计师是否愿意理解并使用缩略图。

  缩略图的意义是什么

  缩略图听上去是一种结构简单的简笔画,听到这个名字给人的第一个感觉就是很有趣。

  不过,缩略图的意义更多的是在很短的时间内,将大量自己的所想到的创意在纸面上绘制出来,直接的说就是一种在视觉上进行的头脑风暴。而在这一点上,缩略图与线框图的功能一致,只是缩略图的结构更小,制作的速度更快速。

  当完全摆脱了各种干扰,在同样时间内,缩略图所能记录下来的创意远超过线框图。在这个过程中,设计者可以绘制出大量的缩略图草稿,而在这些草稿的基础上就能进一步进行线框图的绘制。


  如何去做

  在创作缩略图的过程中,我们需要先画几个简单的浏览器模板、页面边框,这可以是任何你所需要的设计模板。这里有一些现成模板,或许可以给你的设计带来一些帮助。


  当你完成这些准备工作,你就能开始进行你的绘制。在绘制的过程中,你不需要优秀的画功或其它的任何技巧。正好相反,你可以完全投入到创意的思考中,随手画出自己的想法,哪怕这让你在过于仓促的绘制过程中,只能画出幼儿涂鸦的作品。

  在这一点上,缩略图可以说是一种追求速度、甚至可以说是一种偷懒的行为。把所有会浪费你时间的多余修饰统统抛弃,只需要最简单的图形,可以把你想到的最基本的框架勾勒出来,就能进行下一个设计。

  这能给你带来什么?

  我们能从这些看上去很简陋的小图图上得到什么?

  现在的情况是,我们已经能够轻易的得到太多

  通过电脑绘制,我们的创意往往在刚刚生成的时候就能够快速制作成最接近现实的图纸。

  但这就带来一个问题:尽管这个过程已经非常短,但是时间上仍然只够我们展现其中一项或者两项设计。虽然我们希望这些设计最终能被实现,但是我们最初的设计往往就未必是我们最好的设计。

  将一个设计过早的具现化未必是一件好事。


  当一个创意已经被绘制成相对成型的线框图甚至是原型、视觉稿的时候,我们可能已经很难对整个设计进行改良,甚至从新开始一个设计。哪怕在一个设计上你没有面临需要改进的情境,你也浪费了一次进行大量创作的机会。

  通过各种设备、软件我们可以很轻易的做出一个设计的图样,但是通过绘制缩略图我们可以在很短的时间内记录大量的创意,而我们从这些被记录下来的设计中,可能会找到我们自己创作过程中的闪光点。

  节省自己的时间

  在设计中,对时间的管理总是被大家放在交付环节的首位,每每规划时间,都为自己的交付结果设定了严格的最后期限(抛开原文,译者很自豪有一定程度的拖延症)。

  但在实际情况中,设计并不需要把所有的时间都用在交付结果上,生成创意的时间完全取决于个人。而通过绘制缩略图,这个步骤所花费的时间几乎就是创意生成的全部。并且这个步骤可以让你在一定程度上对自己的成果进行评估和审视。因为你所考虑的情况已经足够的多,所以在后续的过程中你可以更快的应付突发的状况,包括布局的更改以及功能的转换。

  缩略图不仅仅是用于布局


  当我们在阐述缩略图的这个概念时,我们不仅仅是针对布局,缩略图在任何类型的设计上发挥左右。事实上,大家在绘制LOGO时,就是从绘制缩略图开始的。

  在设计LOGO时,大家普遍会从绘制缩略图开始,那么在其它领域我们可以进行相关的尝试。

  标题设计、网页开发、宣传册、名片、App界面、角色设计

  绘制缩略图的技巧

  现在对缩略图我们达成了统一的概念,那么无论你将其用于哪个领域,我们首先都需要找到一些绘制它的原则技巧。


  就是一幅幅小小的涂鸦

  同样从事设计工作,可能我们中间的确有人无法用铅笔绘制出一幅足以表达自己创意的草图。

  但在绘制缩略图这一点上,如果你是一个绘画苦手,那很好,你更加适合创作缩略图。因为对于习惯用铅笔绘图的人,他们的习惯制约了他们绘制缩略图。一条直线,一个圆角都会成为他们这些细节控的绊脚石。

  我们需要达成一个共识,这个技术需要的是量而并非是质。我们不反对完美的绘图,事实上,作者(译者也是)非常欣赏(译者是羡慕)可以绘制完美草图的艺术天才。


  上图是出色草图中的其中一个案例,绘制技巧在文章《设计中的沟通,绘制表达自己创意的草图》中但在缩略图中,我们只需要把我们创意通过纸笔进行概述。我们不需要在图纸上绘制出裸视3D的效果。

  保持推进的步伐

  我们不需要在绘制的过程中过多的琢磨其中一个创意,当一个创意被画出来后并不讨我们的喜欢,我们不需要它的基础上进行改良,更不需要把它擦掉后推翻从来。你所需要的就是把目光从这个图上移开,并开始进行下一个创意的绘制。这是因为,在几小时后你回头一看,或许会发现这个创意没有你想象的那么遭。

  多多益善,千万别少

  既然是绘制创意,当然是越多越好、来者不拒。绘制缩略图时,完成5、6个根本不足以表达脑海中的创意。当你落实绘制缩略图时,你就应该肯定了自己脑海中有绘之不尽的创意。在设计专业方面的教授会在授业的过程中要求自己的学生一次性提出25个以上的创意,这个方式可以激发创意的思考。

  不要画出50幅同样的图

  最初进行大量的缩略图绘制时,我们可能会产生一个错觉,就是每一个创意看上去差别都不大。这种情况并不少见,我们所需要的就是发挥自己的想法,如果没有清晰的概念,那就从不同的方向和领域上去思考。谨记这里所做的一切不过是一次头脑风暴,这里面所有的创意并不是每个都是最好的,仅仅是自己与自己的一次“激烈讨论”。

  保留好自己“每一个”创意

  尽可能的把自己绘制的草稿都保留下来,现在被你淘汰的这些作品或许日后会成为重要的参考(或者成为生后被别人肯定的参考,译者想到了苹果近年把乔帮主的生前推翻的创意从新翻出来并实现了,设计者一定很惊喜)。

  当一个设计师踏入了一个全新的领域时,我们往往会遇到瓶颈。回头看看自己曾经灵光一闪的设计,或许其中正好就是现在的自己需要的想法。


  笔者所使用的方法就是通过压感笔在iPad上利用Adobe Ideas以及iDraw等软件进行草图创作。通过数字产品进行草图创作更觉有帮助,通过这些设备可以导入Illustrator或者Photoshop中进行处理。

  如果你也使用了缩略图进行创作,希望你能留下你的链接,和大家一起分享。

  推荐工具:实时协作网络制作图表制作Cacoo工具,Cacoo是一个简单易用的网络画图工具,运用它可以制作多种图表,例如:site maps, wire frames, UML 和网络图表等。

  Via:DesignShack

时间: 2024-09-30 05:38:14

设计中的沟通 用铅笔来绘制“粗糙”的草图的相关文章

产品设计中先熟练使用铅笔 不要依赖Axure

在互联网产品领域,Axure已成为产品经理.产品设计师以及交互设计师的必备工具,从某种程度讲,Axure帮助我们建立低保真模型,便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解我们的产品;但从另一方面讲,Axure绑架了我们的思维,让很多产品经理和设计师养成了"无Axure不设计"的恶习,忽略了用户故事.功能规格和信息架构,甚至走入"为了用 Axure而用的误区",导致了资源的大量浪费和产品的硬伤.因此,提醒为Axure着迷的产品经理:在熟练

网页设计技巧:手绘涂鸦元素在网页设计中的运用

文章描述:谈谈网页中涂鸦手绘元素的魅力. 涂鸦是上课的时候给历史书的古人加两撇胡子;涂鸦是在一面空白的墙上刷出斑斓的花纹;涂鸦是将线稿扫描进电脑然后用手绘板在PS里润色--涂鸦早已走进我们每个人的生活,从服装到装潢到海报广告,到处都有那些温暖可爱的线条. 手绘是应用于各个行业手工绘制图案的技术手法,设计类手绘,主要是前期构思设计方案的研究型手绘和设计成果部分的表现型手绘,前期部分被称为草图,成果部分被称为表现图或者效果图.手绘内容很广阔,所以言语无法尽善表达. 曾经,手绘的应用局限于前期的构图,

设计中的细节与思考:百度统计流量研究院细细品味

文章描述:可视化的快乐 – 百度统计流量研究院设计小结. 百度统计流量研究院为了将数据更好的传达给用户,我们采用了动态数据可视化的方式(Interactive Infographic).希望我们的设计能将用户带入到新鲜.愉悦的氛围之中.当然,我们在设计的过程中也体会到了可视化的快乐,并且希望与大家一同分享. 好的流程是成功的一半 预估难度.多部门协作:好的沟通流程是成功的一半.在设计最初,首先应当评估的就是项目开发难度.若开发难度较大,或者说开发人员对于可视化产品的制作经验较少,则最好引入多部门

从零开始教你打造网页设计中的极简风格

  什么是极简设计 极简设计,严格上讲不能算作一种视觉风格,而是一种设计哲学.它在保持了基本的骨架内容的基础上,剔除掉多余的元素.装饰.色彩和纹理,是通过不断思考而进行化繁为简的设计过程.这样做的结果是突显了主题内容.所以,它是扎根于设计思想根部的概念. 极简主义起源于苏格兰,当时在各个文化领域都掀起了极简的风潮:平面设计.建筑.音乐.文学.绘画等.直到现在,也开始在网页设计中盛行. 尽管极简设计风格在十年间并未得以足够的关注度,早先的互联网领域中根本看不到它的影子,样式复杂的LOGO和广告,艳

产品人性化:情感化设计中的手绘应用表现

这篇分享是我最近读<情感化设计>的一点小感悟及关注的那些事儿.在这里与大家分享下.欢迎大家多多指教和交流. 如今是数字化时代的天下,我们逐渐习惯并享受由数字营造的现代生活.计算机技术在人们生活与工作中得到广泛的应用.特别是在设计领域,有些设计师变得很依赖于计算机软件所带来的视觉效果,也从中发现了许多前所未见的视觉形象和制作技巧,极大地丰富拓展了想象空间和创作手段.同时它对传统设计手段和思维创意过程的冲击也是巨大的. 我们知道,视觉设计的历史发展由来已久,最早的视觉设计表现为图腾.宗教符号和皇室

AXURE在原型设计中的应用

前言 什么是原型呢? 产品原型简单的说就是产品设计成形之前的一个简单框架,对网站来讲,就是将页面模块.元素进行粗放式的排版和布局,深入一些,还会加入一些交互性的元素,使其更加具体.形象和生动.就我个人而言,目前使用频率最多,最高效,交互效果最好的原型工具是axure.今天给大家介绍一些我在工作中使用axure的经验.主要从交互设计中涉及的三个主要步骤进行说明: 一.主要页面原型 在进行主要页面原型设计之前,交互设计师需要: 一份主要的任务流程图(或是用例,一般由产品经理提供)一份主要功能列表(一

网站BANNER设计中 中英文字体的结构分析

本来想写"Advertisemen中的字体结构分析",后来发现这个标题写得有点大,偏离了在目前工作中的针对性,因此缩小到banner的范围,以下内容仅个人在目前工作中对banner设计上的一点浅见,仅起抛砖引玉的作用. Banner的传达方式 [TOPIC] 针对网站中的banner Banner的本身形状:形状决定了其固定的构成方式,一般为矩形,横幅,左右结构和居中; Banner的文字特点:主题式,一般分为主标题和副标题,文字较多;设计的时候还需要考虑应用到网站各种尺寸推广图的可读

交互设计中响应式Web设计的优势和设计流程

在设计中经常遇到这几个问题: 1.想要网站兼容手机.平板电脑.pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好? 有没有办法能有效解决这些问题呢? 响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸.屏幕定向.系统平台等)以及用户行为(改变窗口大小等)进行相应的响应

交互设计在产品设计中的工作流程小议

当产品的用户体验要求越来越高时,交互设计师的职责也越来越明晰了.交互设计师除了自身的基本功外,还需要有一个规范的流程,才能够使工作完整有序. 图1 交互设计在产品设计中的流程图 一.版本计划 版本计划是指在产品或项目立项时,对产品的一个总的规划,通常包括产品的需求与目标,比如能够实现哪些功能,性能上如何.这一过程,交互很少直接参与,或者列席一下发版立项,对计划情况有所知晓.交互可以纵观一下历史版本,对比行业内外的相关产品,以及满怀未来产品的一种期待:实用.方便.美观-- 二.需求分析 在版本计划