Be For Web - 草图 https://www.beforweb.c7210.info/taxonomy/term/69 en 关于设计保真度的难题 https://www.beforweb.c7210.info/node/964 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-n-logo-comment-mistake-error-user-experience-design-ui-interface-product.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div class="entry-intro"> <p>编者按:偷看了一眼上次的更新,约莫还是在两周前;中间忙一些事务,读一些书,又去宝岛休假了一周,差不多就是这样了;出行期间略有感触,接下来找一期单聊吧。之前有朋友问到博主你平时的状态是怎样的怎么能如此飘逸,我觉得还是要看主观意识真正希望将生活状态拉向何方了,客观未必绝对。</p> <p>这次呈上Beforweb合作作者SL的译文,&ldquo;The Design Fidelity Conundrum&rdquo;,原文来自IBM的设计师,探讨如何选择设计产出的保真度;我就不在编者按里多废话了,回头再聊。 - C7210</p> </div> <p>关于设计保真度的难题 - 在寻求用户反馈时,怎样的设计保真度最合适?</p> <!--break--><p><img alt="" src="/sites/default/files/images/201805-1/01.png" style="width: 600px; height: 249px;" /></p> <p class="figure-caption">一个 Dashboard 部件的低保真、中保真、高保真界面设计稿。</p> <p>没有任何一个产品的设计和完善是一步到位的。这样的事就是不会发生。达成一项绝佳的设计,通常是一个想法经过不断地尝试、测试、改进并随时间迭代的结果。这就是为什么在 IBM 设计中心我们将&ldquo;Loop&rdquo;作为我们的核心原则之一:</p> <p><img alt="" src="/sites/default/files/images/201805-1/02.png" style="width: 600px; height: 360px;" /></p> <p class="figure-caption">IBM 设计思维&ldquo;Loop&rdquo; - 这一视觉形象充分体现了优秀的设计作品是非线性的。</p> <p>我们尝试将这种思维运用到我们所做的所有设计之中。因此,无论是项目研讨会活动、团队会议还是一个新的设计工作,我们都会:</p> <ul> <li> <strong>观察</strong>(了解所涉及的人群:他们的背景、目标、习惯等,并检验我们的想法)</li> <li> <strong>反思</strong>(建立理解并形成意图)</li> <li> <strong>创造</strong>(探索想法和原型的可能性)</li> </ul> <p>然后循环往复。</p> <p>我们的设计师被鼓励&ldquo;在开放的环境中工作&rdquo;&mdash;&mdash;也就是说,要尽早、尽可能频繁地寻求反馈,并且把任何产出都视作原型。本质上,我们希望甚至期待人们快速失败,并从收到的反馈中学到东西,然后迭代他们的想法,直到越来越多的设计决策得到验证。</p> <p>因此,我们非常清楚,当评价设计优劣和获取用户反馈时,快速且尽可能早地获得反馈远胜过缓慢或拖延。毕竟,我们寻求反馈的原因,是可以利用获得的信息,进一步改进我们的设计。(如果你一直等到一个东西被基本设计和建造好之后才去寻求反馈,那么在很大几率上,针对这些反馈进行的修改或是为时已晚,或是必须付出高昂的代价。)</p> <p><img alt="" src="/sites/default/files/images/201805-1/03.png" style="width: 600px; height: 230px;" /></p> <p class="figure-caption">一些非常前期的低保真线框图,探索一种可能的任务流程。这种前期的低保真设计输出有助于获得快速而真实的反馈。</p> <p>在寻求用户反馈时使用低保真设计稿的另一个好处是:受访者可以看到你仍然处于早期的想法阶段,便倾向于更自由地提供他们真实的想法和感受。相比之下,如果你给受访者展示高保真设计稿,他们很可能认为已经有很多的细节已经在之前的设计中被充分考虑,因此,他们很可能不愿意分享任何批评意见以免冒犯你。类似地,他们也可能会认为大的设计方向已经确凿无疑,进而只会狭隘地针对一些特定的方面进行反馈,比如文字、颜色、图标等等。</p> <p>因此,使用低保真设计稿可以成为一种获取早期、快速而真实用户反馈的好方法。</p> <p>到目前为止看起来还不错。</p> <p><img alt="" src="/sites/default/files/images/201805-1/04.png" style="width: 600px; height: 450px;" /></p> <p class="figure-caption">IBM 的视觉设计师 @NatalieCaudell 的早期手绘设计探索。</p> <p>然而,你也可能听到有人告诉你说:如果想测试某人在一个特定场景中的反应,&ldquo;测试&rdquo;或&ldquo;模型&rdquo;越接近它所模拟的真实情况,就越能确信他们在测试场景中的行为将真正代表他们在真实场景中的反应。</p> <p>所以,设计师该怎么做?</p> <p>尽管低保真设计稿与最终产品还相差甚远,我们是否应该尽早向用户展示低保真的设计构想?还是应该一直等到我们能展示更多的高保真设计或原型?</p> <p><strong>我的观点是:</strong></p> <p><strong>无论是使用低保真的构想探索,还是高保真原型,或是介于两者之间的任何形式,都应该去积极寻求用户反馈。</strong></p> <p>简而言之,这不是二选一的情况。几乎所有的案例中,在项目生命周期的多个阶段积极寻求设计反馈是有意义的。随着你从第一版设计到第二版、第三版、第九版、直到第十五版,越来越多的部分将被测试、精炼和完善。</p> <h3> 一个范例</h3> <p>IBM Cloud Event Management 是 IBM Cloud 上的一项相对较新的服务,它帮助 DevOps 团队监控事件,识别冲突,并为操作员的&ldquo;操作手册&rdquo;收集知识和经测试后的步骤指导,以便能够更快地避免或解决将来的冲突。</p> <p>下图片展示了 Cloud Event Management 团队在探索操作守则创建页面时所绘制的不同保真度的设计稿。在每个阶段,用户和利益相关者都参与了评审,这为设计团队提供了宝贵的反馈意见,用于指导他们的下一轮设计优化。</p> <p><img alt="" src="/sites/default/files/images/201805-1/05.png" style="width: 600px; height: 201px;" /></p> <p class="figure-caption">来自 IBM Cloud Event Management 设计团队的设计稿,图片展示了它们是如何运用不同级别的保真度来推进设计的。</p> <ul> <li> <strong>第一张图片</strong>:设计团队的早期手绘草图之一,探讨了操作守则编辑器的一些关键概念。</li> <li> <strong>第二张图片</strong>:一个中保真的线框稿,主要集中在编辑器本身。这里团队开始探索使用不同的颜色来表示参数、命令和跳转链接。</li> <li> <strong>第三张图片</strong>:最终的高保真设计,它不仅包括核心编辑器(每一个步骤在视觉上区分开),还包括标记、参数、命令等与特定操作守则相关的独立区域。</li> </ul> <h3> 选择与你所寻求的反馈类型最匹配的设计保真度</h3> <p>每个项目都是不同的,但是作为一个大致的指南,下列每一个阶段都可以提供一个很好的机会来接收有用的用户反馈:</p> <ul> <li> 初始用户和市场研究。</li> <li> 验证项目核心想法、概念、隐喻等(例如,甚至在动笔写之前,通过口头上与他人讨论、剖析和改善它们,你就可以开始&ldquo;测试&rdquo;你的想法了)。</li> <li> 早期的低保真度设计(例如显示主要用户界面的纸面草图)。</li> <li> 中保真度设计(例如展示大致页面布局、更有意义的文本和实际界面控件等的线框图,用来测试设想的单用户任务流程)。</li> <li> 高保真度设计(包括色彩、标识、精确的布局等等)。</li> <li> 用户可以与之交互的原型(请注意,原型本身可以是低、中、高保真度的设计稿)。</li> <li> 产品某些部分的代码原型(例如显示用户界面中的关键功能或微交互等等)。</li> <li> 早期演示版本(不需要等到所有预期功能都完成)。</li> <li> 测试版产品。</li> <li> 正式发布版产品。</li> </ul> <p><img alt="" src="/sites/default/files/images/201805-1/06.png" style="width: 600px; height: 464px;" /></p> <p class="figure-caption">如何在产品生命周期的不同阶段使用不同保真度的设计。(本图最初由Tracy Lepore发表于这篇文章中,用于解释&ldquo;Design Continuum&rdquo; 的草图。)</p> <p>关键在于要仔细考虑你需要验证的设计工作具体是哪些方面,然后确保你分享的设计或原型具有与之匹配的保真度。例如,如果你想要验证站点导航结构,使用显示不同导航结构的非常低保真的界面模型可能就足够了,但是如果您想验证一个特定工作流的用户体验,一个中到高保真且可点击的原型可能是最合适的。</p> <h3> 总结</h3> <p>当要选择一个合适的保真度来测试你的设计时,没有一刀切的&ldquo;正确&rdquo;答案;它将始终取决于具体场景。仔细考虑你想要测试的内容,然后选择最合适的保真度。</p> <p>并且铭记以下几点:</p> <ul> <li> 进行一些用户研究总是比不研究要好。</li> <li> 在你之前原型基础上,根据收到的反馈来评审和改进。记住:设计体现在在细节之中!</li> <li> 然而,最好不要完全依赖于用户测试低保真的设计,因为它们 不可避免地包含着各种&ldquo;偏差&rdquo;,低保真设计实际上只是基于当时所知的最终产品的大概样子。</li> <li> 但是同样的,不要等到你有了一个完整编写好的原型之后才寻求反馈,因为此时基于收到的反馈做出更改将比之前付出更多的代价。</li> <li> 记住,高保真度并不总是意味着大量的付出。你可以使用 Marvel 这样的工具快速创建可点击的交互原型,而无需编写任何代码。</li> <li> 说到代码,想要获得特定界面组件的一些初始用户反馈,有时一个快速的 CodePen 演示可能就是所需的全部内容。</li> <li> 有关使用不同类型的原型(静态的还是交互式的等)和不同保真度的更多信息,请参阅 Nielsen Norman Group 的这篇文章。</li> <li> 最后,如果你认为所有这些用户测试似乎费时且昂贵,请牢记:</li> </ul> <p><strong>不管你的产品是什么,你设计的每个部分终究会被测试到(仔细想想看)。真正的问题是:你希望这些测试发生在何时,是在你有时间整合反馈意见之前还是之后呢?</strong></p> <p><span style="color:#a9a9a9;">英文原文:https://medium.com/design-ibm/the-design-fidelity-conundrum-63769bbc3e40,作者:Arin Bhowmick,译者:SL</span></p> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 450px; height: 116px;" /></p> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/64" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原型</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/69" typeof="skos:Concept" property="rdfs:label skos:prefLabel">草图</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Tue, 08 May 2018 13:34:42 +0000 C7210 964 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/964#comments 我的一些草图 https://www.beforweb.c7210.info/node/949 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-s-ux-sketching-pencil-wireframe-prototype-user-experience-ll.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>刚刚看到公司天台的草坪里那一大堆上周末遗留下来的积雪已经消融殆尽,就想起可以发些草图上来。说是水贴也不尽然,与之前的<a href="http://beforweb.com/node/945" target="_blank">工作笔记 - 关于用户成熟度与产品设计策略</a>类似,都是自己在DPUX的设计工作产出。这类内容慢慢习惯性地做下去的话,搞不好要上直播了。</p> <p>草图就是这样一种东西,首先够草,其次是图。草,重在高效与易迭代,图,意在可视化传达信息。草图与绘画无关,当然绘画技巧通常有助于草图的表现力;我不会绘画,换个角度来看,却也有效地避免了在草图阶段陷入视觉表现的细节当中。</p> <p>随便贴些有的没的;相关产品上线了才敢做这件事。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201802-1/IMG_1196.jpg" style="width: 600px;" /></p> <p class="figure-caption">短视频编辑相关功能探索;即便是草图也可以通过粗细与深浅构建层次</p> <p><img alt="" src="/sites/default/files/images/201802-1/IMG_1197.jpg" style="width: 600px; height: 800px;" /></p> <p class="figure-caption">有个家伙虽然眼睛很大但看上去不太开心</p> <p><img alt="" src="/sites/default/files/images/201802-1/IMG_1207.jpg" style="width: 600px; height: 800px;" /></p> <p class="figure-caption">即便还没有足够清晰的思路来完成整体框架,但将相关组件可视化地陈列出来,也会有助于进一步思考</p> <p><img alt="" src="/sites/default/files/images/201802-1/IMG_1200.jpg" style="width: 600px;" /></p> <p class="figure-caption">必要的信息也可以通过随意的文字形式来记录,全部取决于自己</p> <p><img alt="" src="/sites/default/files/images/201802-1/IMG_1201.jpg" style="width: 600px; height: 450px;" /></p> <p class="figure-caption">通过横幅草图构建流程,留下足够的空间用于各种形式的补充说明</p> <p><img alt="" src="/sites/default/files/images/201802-1/IMG_1202.jpg" style="width: 600px; height: 800px;" /></p> <p class="figure-caption">细节里随便画点有的没的,给自己找点乐子</p> <p><img alt="" src="/sites/default/files/images/201802-1/IMG_1203.jpg" style="width: 600px; height: 450px;" /></p> <p class="figure-caption">逻辑,流程,架构,相关说明,疑点记录</p> <p><img alt="" src="/sites/default/files/images/201802-1/IMG_1206.jpg" style="width: 600px; height: 800px;" /></p> <p class="figure-caption">似乎在镜头前手舞足蹈着,那么开心</p> <p>朴树在耳边唱到:&ldquo;有些故事还没讲完那就算了吧,有些心情在岁月中已经难辨真假。&rdquo;</p> <p>一篇没头没尾的即时更新到此结束,继续回到工作,下期见。</p> <p class="rtecenter"><img alt="" src="/sites/default/files/images/s/QR-C.png" style="width: 600px; height: 600px;" /></p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/200" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/69" typeof="skos:Concept" property="rdfs:label skos:prefLabel">草图</a></li></ul> Sun, 11 Feb 2018 08:27:59 +0000 C7210 949 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/949#comments 临摹,理解,启发,提升 https://www.beforweb.c7210.info/node/673 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-mobile-app-ux-design-usability-test.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>很快要过年了倒是真的。却也完全感受不到。大约明天上班看到回家的同学留下的空座位时才会有那样的感觉吧;突然想起去年春节之前坐2号线下班时一车的人都安然出站而只有我被警察叔叔拦下搜包的段子,那所谓的警犬白白的真的很萌,搞不好是兼职小狗。</p> <p>楼外突然开始放炮;厌恶至极。</p> <p>这周末虽然只有一天休息,不过更新要做掉两篇。都很短,一篇关于日常积累,一篇关于<a href="http://www.beforweb.com/node/675" target="_blank">对设计潮流的反思</a>。其实说起来两篇当中的某些点看上去甚至互有矛盾;抓住核心就好,例如本篇作者平时是怎样关注产品并取其精华为我所用的。之前在一篇关于草图的文章当中我也提到自己喜欢对着随便什么应用用纸币临摹界面,差不多的样子 - 实际动手临摹,会比&ldquo;看&rdquo;更加投入。下面进入译文。</p> <p>我(英文原文作者)每年都会设计不少应用,方法和技巧还是有一些的;其中之一,就是每天花很多时间去寻找和汲取灵感。</p> <p>我会去看那些设计模式收集站点还有设计师的个人作品集,会去读UI设计相关的新闻,会去下载排名靠前的应用并仔细把玩。</p> <!--break--><p>当然,我所做的不仅是&ldquo;看&rdquo;。每每发现喜欢的设计,我会把界面保存到自己的设计参考库当中(其实就是我Evernote里的一个笔记本)。尤其是那些能激发自己想法的界面,我会立刻在Keynote里将它们临摹出来。慢慢的,这些Keynote文件就成为我的原型素材库了。</p> <p><img alt="" src="/sites/default/files/images/201502-1/01-mobile-app-ui-ux-inspiration-keynote-prototype.png" style="height: 329px; width: 600px;" /></p> <p>这套素材库当中已经有超过100个随时准备听用的界面了,分为若干类;我在需要的时候可以将这些模式直接拖拽到新的方案当中,并根据需求迅速进行订制处理。这样,我就可以将更多的时间留给那些较为独特的、需要专门打造解决方案的需求上面了。</p> <p>这个习惯能帮我节省了大量的时间,启发我的创意状态并使我保持在其中。</p> <p>目前我的这套Keynote文件大致是这样的:</p> <p><img alt="02-mobile-app-ui-ux-inspiration-keynote-prototype.png" src="/sites/default/files/images/201502-1/02-mobile-app-ui-ux-inspiration-keynote-prototype.png" style="width: 600px; height: 330px;" /></p> <p>如果你希望在界面设计和原型制作方面变得更加优秀,我个人建议你培养以下这些习惯:</p> <ul> <li> 时常去下载那些排名还不错的应用,使用它们,留意有哪些元素使它们即吸引人又易用。保存界面截图,添加到自己的参考库当中(例如在线笔记本或本地,形式随你喜好)。</li> <li> 到<a href="https://dribbble.com/tags/ui">Dribble</a>、<a href="http://www.pttrns.com/">Pttrns</a>、<a href="http://patterntap.com/">PatternTap</a>、<a href="http://capptivate.co/">Captivate</a>一类的地方转转,同样将能启发自己的设计保存下来。</li> <li> 每天花一个小时(或是对你来说更加合理的时间)用纸笔或工具软件临摹优秀的界面设计,保持至少一个月。</li> </ul> <p>你会发现,临摹的越多,理解的就越深,自己也会变得越强。</p> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/69" typeof="skos:Concept" property="rdfs:label skos:prefLabel">草图</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/64" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原型</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/68" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计模式</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 14 Feb 2015 09:25:49 +0000 C7210 673 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/673#comments 我每天都画草图,你也该试试看 https://www.beforweb.c7210.info/node/643 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-s-ux-sketching-pencil-wireframe-prototype-user-experience-ll.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>我从不敢放眼将来长远的看过去若干年,也许正是这个原因才让自己对很多事情不那么在意。其实我是个很安心于能让自己安心的事物的人,只是这样的事物随着时间的推移而越来越少;自己所有看上去还算是努力的努力大体都是缘于对这些的追逐。</p> <p>例如现在这样坐在昏黄的小台灯下,听着Neil Young和Pearl Jam合作的专辑《Mirror Ball》,有的没的在博客里念叨着,便是如此的安心。在如今的生活里,这样的片刻时光几乎少到无从珍惜,转瞬即逝。</p> <p>话说今天这篇小文,我自己很喜欢;更确切的说是共鸣。不,我不敢称自己为每天草图本不离手的设计师,但在2014年年初的几个月也确是每天掏出本子随随便便画些东西,哪怕没什么想法可以画,也会随便找个什么App临摹界面,为的就是那种专注进去的感觉;再后来,生活发生变化,每天几乎连这样的片刻也难以抓住,慢慢作罢。看过这篇文章之后,那种欲望似乎又起死复生。</p> <p>说起来也巧,最近也正想着每天抄起琴随便记录些什么段子;曾经,总是希望能有大段的时间真正产出些什么,录些歌出来那样;如今越发觉得通过日常的一些小小的积累来保持状态、启发创意才是一种最适合如今生活的内容创造方式。好吧,念叨的多了几乎要收不住。进入译文吧。</p> <p>我(英文原文作者)每天都画草图,这是个让我引以为傲的习惯。如果某天发现自己当天没什么产出,我会促使自己完成这件事。在每天的&ldquo;草图时间&rdquo;里,我可以不受打扰的把某个问题想透彻,并动手将解决方案以可视化的方式呈现创造出来。学会以一种有意义的方式来画草图,这对我个人来说并不轻松,但我发现这绝对是事半功倍的。</p> <!--break--><p>我在33岁的时候重新回到校园读书。在此之前,我几乎不画草图。我从前的工作主要集中在动画和交互设计方面,但在多数时间里我是用电脑做事的,几乎不碰纸和笔。而如今,无论工作还是学习,但凡涉及对问题进行探索,我都不愿在没有纸笔去画草图的情况下进行。</p> <p>为什么会这样?简单来说,画草图可以帮我看得、想得、交流得更清楚;可以促进我与自己及他人的沟通;可以作为记录与备忘;可以为我的记忆增添情感和情境要素,扩展想象空间。画草图可以让我在放慢节奏的同时提升效率,使我成为一名更优秀的设计师,使我的生活变得更加丰富。</p> <h3> 在放慢节奏的同时提升效率</h3> <p>速度与效率是画草图最大的好处之一。讽刺的是,手绘草图这件事却使得我必须放慢节奏 - 至少一开始是这样。我在画那些直线和曲线时,需要集中注意力确保画的足够准确,这使我更加留意、相应的也更加了解界面元素之间的关联。画草图的过程中,过于凌乱和歪斜的线条、形状以及难以阅读的文字都会让我很不舒服;从某个界面元素,到整个布局,我都会非常在意。所有这些都要花费时间,同时也需要付诸思考。</p> <p>而另一方面,我在画草图时,其他的思绪都会逐渐消逝,好像整个世界只剩下我和草图上的线条与标注 - 我仿佛在和它们交谈着。这种高度聚焦、不断迭代的对话模式可以使我的各种想法在质量和数量上同时得到提升。</p> <p>此外,&ldquo;速度&rdquo;也只是个相对概念 - 哪怕是最慢的草图,也比在电脑上最快的mockup快很多。</p> <h3> 更优秀的设计师</h3> <p>提升绘画草图的能力,培养视觉思维习惯,这些都是循序渐进的过程。在我开始练习之前,没人认为我能在这方面做好。我决定通过练习画草图来成为一名更优秀的设计师。我需要一种方式来提升自己理解复杂事物、创建解决方案及有效沟通的能力。我不是因为自己会画草图而把自己称作设计师。我是设计师,因为我每天都会学习、思考并输出想法;而这些都可以通过画草图来达成。</p> <p>举个实际些的例子。在我练习画草图之前,我很难有效的与他人沟通自己头脑中的想法,很难向别人说明某种特定的设计方案是怎样构思出来的。如果无法快速而有效的向他人传递这些情境信息,对方也无法得到你想要表达的东西。而草图能够在最短的时间里将我的思考过程可视化的展示出来,他人也可以进行及时进行反馈。这些都使我成为一名更有效率的沟通者。</p> <p><img alt="01-sketch-ui-ux-designer.jpg" src="/sites/default/files/images/201501-1/01-sketch-ui-ux-designer.jpg" style="width: 441px; height: 799px;" /></p> <h3> 使生活更加丰富</h3> <p>我们在多数时候的思维状态并不是井井有条的。记忆与想法并非孤立存在 - 它们时常与情绪、信念甚至是一时间挥之不去的某首歌的旋律交织混杂在一起。将关于特定主题的想法从头脑中提取出来(哪怕只提取出一部分),牢靠的记录在草图本上进行汇总和梳理,这可以使我们的思维负荷得以降低,让我们的心智更轻松更富有创意 - 不仅因为我们通过草图将一些想法从混乱的思维状态里得以解放,更重要的是,草图是需要我们亲自动手将想法进行采集和可视化的途径,这能使我们进入一种更有参与感、更加专注的心智状态当中。画草图可以让我们捕捉到思维过程当中那些不可见的情境与感觉,只需花费很少的时间,我们就能看到并向他人展示一些实实在在的有意义的东西,而且这种内容形式本身也便于创建和修改。</p> <p>我在画草图时,总是习惯多花些时间画一些不同的备选方案。这很好,因为当我试着在生活中以这种方式来记录或思考的时候,我发现生活当中自己习以为常的很多事物其实都有很多侧面,你可以通过从前不曾想过的方式去进行很多事情。</p> <p><img alt="02-sketch-ui-ux-designer.jpg" src="/sites/default/files/images/201501-1/02-sketch-ui-ux-designer.jpg" style="width: 440px; height: 521px;" /></p> <h3> 你也该试试看</h3> <p>如果你已经有画草图的习惯,这很棒;努力保持,并鼓励其他人也这样做。</p> <p>如果不是,那么现在开始就试试看吧,这真的很有意思!你还可以找到很多相关的资源资讯帮你起步。将来某一天你会很开心自己开始做这件事的。</p> <p><strong>P.S.&nbsp;</strong>下面这些书带给我不少灵感,推荐给你读;此外,我也建议你每天都保持练习,并找到恰当的方式来评估自己的进展。</p> <ol> <li> <a href="http://www.amazon.cn/%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E8%8D%89%E5%9B%BE%E8%AE%BE%E8%AE%A1-%E6%AD%A3%E7%A1%AE%E5%9C%B0%E8%AE%BE%E8%AE%A1-%E8%AE%BE%E8%AE%A1%E5%BE%97%E6%AD%A3%E7%A1%AE-%E5%B7%B4%E5%85%8B%E6%96%AF%E9%A1%BF/dp/B007QMXYEE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">用户体验草图设计:正确地设计,设计得正确</a> + <a href="http://www.amazon.cn/%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E8%8D%89%E5%9B%BE%E8%AE%BE%E8%AE%A1%E5%B7%A5%E5%85%B7%E6%89%8B%E5%86%8C-%E6%AF%94%E5%B0%94%C2%B7%E5%B7%B4%E5%85%8B%E6%96%AF%E9%A1%BF/dp/B00K67SPX6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1420961476&amp;s=books&amp;sr=1-1&amp;tag=c7210-23">工具手册</a> (Sketching User Experiences: Getting the Design Right and the Right Design)</li> <li> <a href="http://www.amazon.cn/%E6%B6%82%E9%B8%A6%E7%AC%94%E8%AE%B0-%E8%BF%88%E5%85%8B%C2%B7%E7%BD%97%E7%AC%9B/dp/B00PS2KXAC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1420961668&amp;s=books&amp;sr=1-1&amp;tag=c7210-23">涂鸦笔记</a>(The Sketchnote Handbook: The Illustrated Guide to Visual Note Taking)</li> <li> <a href="http://www.amazon.cn/%E4%BA%A7%E5%93%81%E8%AE%BE%E8%AE%A1%E6%89%8B%E7%BB%98-%E6%84%9F%E7%9F%A5%C3%97%E6%9E%84%E6%80%9D%C3%97%E5%91%88%E7%8E%B0-%E4%BA%A8%E5%88%A9/dp/B00F07T3DI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1420961830&amp;s=books&amp;sr=1-1&amp;tag=c7210-23">产品设计手绘</a>(Drawing for Product Designers)</li> <li> <a href="http://www.amazon.com/Drawing-Ideas-Hand-Drawn-Approach-Better/dp/0385344627">Drawing Ideas: A Hand-Drawn Approach for Better Design</a></li> <li> <a href="http://www.amazon.com/Understanding-Comics-The-Invisible-Art/dp/006097625X">Understanding Comics: The Invisible Art</a></li> <li> <a href="http://www.amazon.com/Rapid-Viz-Method-Visualitzation-Ideas/dp/159863268X">Rapid Viz: A New Method for the Rapid Visualization of Ideas</a></li> </ol> <div class="embed"><article id="node-293" class="node node-related-books" about="/node/293" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/用户体验草图设计-正确地设计-设计得正确-巴克斯顿/dp/B007QMXYEE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="用户体验草图设计:正确地设计,设计得正确" src="http://beforweb.com/sites/default/files/images/products/38.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/用户体验草图设计-正确地设计-设计得正确-巴克斯顿/dp/B007QMXYEE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">用户体验草图设计:正确地设计,设计得正确</a></h4> <p><a href="http://www.amazon.cn/用户体验草图设计-正确地设计-设计得正确-巴克斯顿/dp/B007QMXYEE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书着重强调设计过程前后两端的均衡,前端重点做好草图和设计创意,后端则保证可用性和工程两方面。目标是构建一种设计理念:将新技术转化成一种既可以服务社会,又可以体现价值的产品形式...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/69" typeof="skos:Concept" property="rdfs:label skos:prefLabel">草图</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 11 Jan 2015 12:58:24 +0000 C7210 643 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/643#comments 聚焦目标,取舍有道 - 关于设计中的权衡与决策 https://www.beforweb.c7210.info/node/404 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-fitts-law-mobile-app-ux-interaction-user-interface-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>明明是周六,但是怎么都觉得是周日啊,因为明天要上班...眼下看着宰相刘罗锅...上次看还是初一的时候,1996年;故意暴露年龄了噜。</p> <p>短暂的周末上个新都觉得捉襟见肘,一篇小文,作者讲述了自己在设计一款天气应用的过程中关于灵感、目标、取舍方面的感悟,从产品层面的原则到界面设计层面的思路,一并分享给大家。</p> <p>这里进入译文。我们最近上架了一款天气应用,<a href="http://logicpretzel.com/skyline/">Skyline Weather</a>。我是在睡觉的时候想出设计概念的。</p> <p>很多东西的想法都是从梦里产生的。据说保罗&middot;麦卡特尼就在梦中写出的Yesterday这首歌。又据说他接下来花了几周时间到处跟人打听他们有谁听过这首歌,直到足够多的人都说没有,他才确定这确实是他自己的原创的、从潜意识当中飘忽而来的歌曲。</p> <p>再据说,伊莱亚斯&middot;豪也是在梦中完成了他的缝纫机发明。他梦见自己被捉到了一个原始部落,原始人把他绑起来准备烤着吃,而他敏锐的注意到原始人使用的长矛在末端都有一个小洞。正是这个细节启发了他,进而搞定了缝纫机的设计方案。</p> <p>而我自己,则是因为流感而卧床&hellip;当时我想看看接下来的天气情况,于是浑浑噩噩的拿出手机,却发现自己难以透过惺忪迷离的双眼在任何一个天气应用当中快速而轻松的获取天气信息,特别是接下来几个小时内的天气变化。我感觉这事儿里面一定有优化和简化的工作可以做。</p> <!--break--><p>然后我就睡了。再然后我就醒了,脑子里浮现出两个基本概念:</p> <ul> <li> 通过以小时为单位的时间轴来呈现天气信息,以可视化的方式展现温度的起伏。</li> <li> 聚焦于未来几小时内天气将会产生怎样的变化,而不只是当前的情况。</li> </ul> <p>我很快就把草图画了出来,然后回到床上继续生病。</p> <p>作为设计师,我的工作离不开草图。每次重新审视自己之前画的草图时,我都能发现当时想法中的一些缺陷;一个在半夜里看上去不错的想法到了白天很可能就不是那么回事了。然而,当我再次打开我的天气应用草图时,它看上去还是很不错!&hellip;</p> <p><img alt="01-iphone-ios-weather-app-ux-ui-product-design.jpg" src="/sites/default/files/images/201401-5/01-iphone-ios-weather-app-ux-ui-product-design.jpg" style="width: 396px; height: 567px;" /></p> <p>这个概念可以让天气信息通过高度可视化的方式呈现给用户;信息看上去更像是便于识别的图片,而不是人们必须投入注意力去阅读的文本。我所见过的多数天气应用当中都充斥着微小的文本信息片段、精细的天气符号和数字,这些都需要用户花费力气去辨识与理解。</p> <div class="embed"><article id="node-293" class="node node-related-books" about="/node/293" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/用户体验草图设计-正确地设计-设计得正确-巴克斯顿/dp/B007QMXYEE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="用户体验草图设计:正确地设计,设计得正确" src="http://beforweb.com/sites/default/files/images/products/38.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/用户体验草图设计-正确地设计-设计得正确-巴克斯顿/dp/B007QMXYEE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">用户体验草图设计:正确地设计,设计得正确</a></h4> <p><a href="http://www.amazon.cn/用户体验草图设计-正确地设计-设计得正确-巴克斯顿/dp/B007QMXYEE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书着重强调设计过程前后两端的均衡,前端重点做好草图和设计创意,后端则保证可用性和工程两方面。目标是构建一种设计理念:将新技术转化成一种既可以服务社会,又可以体现价值的产品形式...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 文本 vs. 图形</h3> <p>阅读文本时,人们会一个词一个词的读,然后在头脑中将整段文字的含义拼合起来。文本可以帮助人们沟通较为复杂的信息,但同时会降低消化信息的速率。而恰当的图形元素可以让你立刻对其大致的概念有所了解,然后在最短的时间内获取细节信息。</p> <p>Skyline Weather的设计目标就是让用户简单一瞥便能获取核心信息,好像看图片那样。</p> <p><img alt="02-iphone-ios-weather-app-ux-ui-product-design.png" src="/sites/default/files/images/201401-5/02-iphone-ios-weather-app-ux-ui-product-design.png" style="width: 320px; height: 568px;" /></p> <p>当然,如果你需要,仍可以挖掘出更多的天气信息,只需点击一下屏幕便可以。为了达到&ldquo;快速&rdquo;的设计目标,我们必须隐藏或是舍弃一些数据,以降低信息的密集度。</p> <p><img alt="03-iphone-ios-weather-app-ux-ui-product-design.png" src="/sites/default/files/images/201401-5/03-iphone-ios-weather-app-ux-ui-product-design.png" style="width: 320px; height: 568px;" /></p> <h3> 你没法取悦所有人</h3> <p>然则我们找来的一些早期测试用户很明确的希望能看到更多更密的信息。他们当中有些人生活在雨水丰沛的地区,于是就特别想要降水概率的数据;而另外一些时常冲浪的人(是的,哪怕是在蒙特利尔这个压根没有海的地方)则想了解更多更全面的原始气象数据。</p> <p>但同样有一些测试者理解我们的设计理念,并且非常认同&ldquo;清晰&rdquo;和&ldquo;简洁&rdquo;的整体风格。很显然,我们没法同时满足两类目标用户,我们必须做出选择,哪怕这意味着我们需要对一部分潜在用户说&ldquo;不&rdquo;。小而美,或大而全,这两条路线虽然彼此矛盾,但你不能说其中任何一个是对的或是错的,我们只是要根据自己产品所要解决的问题来选择最合适的。</p> <blockquote><p>设计是一种关系...它应该体现出一个问题当中各个方面之间的关系&hellip; - 保罗&middot;兰德</p> </blockquote> <p>保罗&middot;兰德,著名平面设计师(IBM、UPS、NeXT等公司logo的设计者),基本不用计算机。计算机在平面设计当中的实际价值并不大,当然我们指的是保罗&middot;兰德职业生涯那几十年的情况(上世纪30年代到90年代)。计算机开始在设计领域体现出价值之后,保罗就让他的下属们去做那些需要依靠计算机来完成的事情。即便如此,他对于设计本质的理解同样可以被运用到如今的软件界面设计当中。</p> <h3> 权衡的艺术</h3> <p>设计在于权衡&mdash;&mdash;本质上讲,设计在于识别你的目标用户是谁,他们遇到了哪些问题,他们需要怎样的解决方案。目标用户群体越小,设计的针对性就越强,但这通常也意味着某些用户的排斥。</p> <p>正如<a href="http://daringfireball.net/linked/2013/07/19/weather-apps">Daring Fireball的John Gruber所讲</a>,天气应用就是用来把玩各种设计想法的UI游乐场。这是一个非常有趣非常值得探索的空间,因为其内容变化多样,而且不同类型的人群对于这类应用的需求也有所不同。</p> <h3> 同类产品</h3> <p>Skyline Weather发布上架的几周之后,我们便看到了同类设计理念在现实当中交汇于一点的奇妙景象 。打开Weather Line,你会看到由Ryan Jones和他的团队设计的漂亮而简洁的界面。在他们的网站中,Jones表达了和我一样的对于当下多数天气应用在视觉复杂度方面的不满:&ldquo;如今的天气应用,多数是通过表格或列表来展示信息的,你需要自己进行解读,然后才能在头脑中形成一套不可见的气象预报信息。&rdquo;</p> <p><img alt="04-iphone-ios-weather-app-ux-ui-product-design.jpg" src="/sites/default/files/images/201401-5/04-iphone-ios-weather-app-ux-ui-product-design.jpg" style="width: 320px; height: 568px;" /></p> <p>大体上说呢,我们两家的产品看上去真是相似。这也不奇怪,因为我们的设计理念几乎是一致的。我们有着同样的目标,以同样的方式解决着其他天气应用当中存在的问题:</p> <ul> <li> 两家应用都聚焦在随时间变化的天气趋势上。</li> <li> 每个时间点上都有图标符号来表示时间天气状态。</li> <li> 天气符号在纵向上的位置变化代表温度的升降,天气变化趋势一目了然。</li> <li> 点击任何一个时间段都可以查看更多详情。</li> <li> 同样使用来自forecast.io的数据。</li> </ul> <p>话说连应用名称也很相似呢,我家的叫Skyline Weather,他家的叫Weather Line。我们从来没和Jones或是他的团队进行过联系,但我们在设计方案的决策上几乎是一致的,包括各种需要折中考虑的细节。我们都致力于解决相同的问题,我们都知道自己的产品无法取悦所有人。</p> <blockquote><p>世上没有完美的设计,因为你最终能做的就是在各种关系之间取得平衡。在适当的秩序下,增加任何一个元素都会打破平衡。 - 保罗&middot;兰德</p> </blockquote> <p>当谈论某种设计的优点时,一定要看到其中的各种折中决策。&ldquo;坏设计&rdquo;确实是有的,但更多时候,所谓的&ldquo;缺点&rdquo;其实可以被解释为某种&ldquo;失衡&rdquo;。</p> <p>正如人类不能宣称自己比小强进化的更好,号称拥有更好设计的产品未必比廉价产品设计的更好。出自知名设计师之手的昂贵茶壶也许在外观和手感上比沃尔玛的大宗货更好,它可能使用了更好的材料,更符合人体工学,但这不意味着廉价的大宗货没有达到它自己的设计目标。它们有着各自的目标市场,且无法适用于所有的使用情境。</p> <p>从最初的概念草图,到花费数月的精心打磨,我们在Skyline Weather的各个方面都下了很大的功夫。即便如此,我们也明白,它无法成为能够同时满足成千上万iPhone用户需求的产品。没有什么设计可以在所有的情况下对所有的用户都完美适用,我们有时需要在不同的用户群体之间进行艰难的选择,并认清自己的产品究竟要解决什么问题。如果我们试图满足所有人,那么最终只能有一个委曲求全的结局&mdash;&mdash;产品在任何一个方面都无法做到最好,最多只能达到&ldquo;不坏&rdquo;的程度。只有聚焦于自己特定的目标用户群,聚焦于怎样更好的服务于他们,设计师们才能找到真正即美观又实用的解决之道<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-262" class="node node-related-books" about="/node/262" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="触动人心:设计优秀的iPhone应用" src="http://beforweb.com/sites/default/files/images/products/06.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">触动人心:设计优秀的iPhone应用</a></h4> <p><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书会告诉你如何从iPhone的角度来思考和理解应用设计,使你明白怎样去综合思考设计、心理、文化、人体工程和可用性问题。在书中,你会看到大量的真实应用的设计实例和思考过程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/69" typeof="skos:Concept" property="rdfs:label skos:prefLabel">草图</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 25 Jan 2014 07:00:03 +0000 C7210 404 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/404#comments 凌乱中的艺术 - 草图原型实战技巧 https://www.beforweb.c7210.info/node/33 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-ux-sketching-pencil-wireframe-prototype-user-experience-ll.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>五年时间转瞬即逝,在自己小窝的最后一个周末;眼看着家当和心情都被打包的差不多了,整个人却终于感冒发烧腹泻垮了下来,这是闹哪样呢。所幸本周前面几天可以抽出些时间做掉这篇译文,今天发掉先。接下来的两个月,大概要集中业余零散精力放在一本iOS书的翻译上了;希望还能有些时间分给这边。杂七杂八就到这里,我们直接进入正文&mdash;&mdash;草图原型实战技巧,没有务虚的大道理,每个内容要点都很实用。走着。</p> <p>在如今的用户体验及产品圈子里,越来越多的人开始了解到草图及相关的原型工作对于整个设计流程的重要意义;不过在实际工作中,真正会拿起纸和笔的人貌似不是很多。作为一名用户体验设计师,我(英文原文作者)每天都会画草图,我还霸着办公室的一整面墙,在上面铺满草图,标注着各种上下文情景脚本。</p> <p>确实,使用电脑中的原型设计软件代替纸和笔,在很多时候是一种省时省力的做法,不过从可视化与实体化的角度来看,这并不是最好的解决方案。当你正在构思网站页面或是移动应用的布局,琢磨着功能流程及上下文情景脚本的时候,拿起笔画画草图才是更加直接有效的方式&mdash;&mdash;它可以帮助你集中精力解决眼前的问题,尽情的勾勒各种想法,而不必为工具软件的使用方法或功能限制等方面的因素分散注意力。</p> <p>很多文章都会告诉你草图这东西有多给力,但是基本不会从实战的角度进行深入而细致的讲解;本文则不然,我会实打实的从具体执行的角度,向大家介绍一些常用技巧及其背后的道理,这些都是我和其他很多用户体验设计师在每天的工作中所要用到的<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><p><img alt="web-mobile-ux-user-experience-sketching-prototype-desktop" src="/sites/default/files/images/201112/web-mobile-ux-user-experience-sketching-prototype-desktop.jpg" style="width: 500px; height: 350px; " /></p> <h3> 草图 &ne; 绘画</h3> <p>从视觉角度上讲,即使最完美的草图作品,与真正意义上的&ldquo;绘画&rdquo;相比也是相距甚远的。如同你的思维与灵感,草图应该处于一种持续变化的状态,随时可以根据需求进行调整。你确实不必掌握那些真正的绘画技能,不过有相关经验的话自然更好。</p> <p>那么草图的本质到底是什么呢?简单来说:</p> <ul> <li> 草图是思维的表达方式,用来解决问题。</li> <li> 草图是一种可视化的、更加清晰有效的沟通方式。</li> <li> 画草图是一种技能,实践的越多,能力越强。</li> </ul> <p>不要太在意草图在&ldquo;绘画&rdquo;方面的视觉效果,试着把它当作海报来审视&mdash;&mdash;你第一眼看到的是什么?细节信息在什么地方?记住,人的目光总会被细节与强烈的对比所吸引。</p> <p>就像语言表达能力可以决定人与人之间互相了解的程度,草图的表现力也会直接影响到产品设计流程中的信息沟通。好在,我们有一些不错的方法可以学习和运用,在实践中逐渐提高自己的草图表达技能。</p> <h3 id="e-layers"> 分层作业</h3> <h4> 技巧</h4> <p>初期,使用浅灰色的马克笔(大约20%到30%的灰度)勾画轮廓和布局结构;在进入界面元素的细节部分之后,逐渐使用颜色更深的马克笔或钢笔。</p> <h4> 解释</h4> <p>从浅色开始初步的框架工作,会让事情变的容易些;在这个阶段,犯些错误也无妨,你可以逐步评估和调整想法。把线画的凌乱些也没太大所谓,在接下来的阶段,使用颜色更深的线条逐步完善草图之后,没人会注意到这些早期的浅色轮廓。</p> <p>随着灵感落实成为确定的想法,并不断的跃然纸上,我们使用的颜色也可以逐步加深了,必要的时候可以使用钢笔来勾勒细节。通过灰度的差异来体现界面的逻辑,整个草图的层次感会非常鲜明。</p> <p>分层的做法还可以帮助我们在初期将注意力放在内容结构与视图继承等方面,不至于一开始就被各种细节问题和想法纠缠。如果你知道眼下的界面中需要一个列表,但不清楚列表项中的具体内容,那么就使用浅色笔随便画些曲线来代替文案;在之后的细节阶段,再回过头来用深色笔添加一些具体的范例内容。</p> <p><img alt="web-mobile-ux-user-experience-sketching-prototype-layers" src="/sites/default/files/images/201112/web-mobile-ux-user-experience-sketching-prototype-layers.jpg" style="width: 500px; height: 279px; " /></p> <h4> 注意</h4> <p>如果你更习惯于使用圆珠笔起草,并且打算接下来用马克笔做辅助的话,记得将圆珠笔的墨迹晾干先,否则会被马克笔中的酒精成分污浊掉。</p> <p>经过越来越多的实践,你也许开始变的更有把握,而逐渐忽视浅色底层绘制;最终结果也许不会很坏,但我个人仍然建议保留这一步骤,因为你可以在这个阶段里做很多实验性的摸索,一点点评估和落实头脑中的想法。</p> <h3> 放松肢体</h3> <h4> 技巧</h4> <p>在画长线条的时候,试着让自己的手与胳膊跟随着肩膀移动,而不是通过腕子或手肘来用力;只有当你需要快速的画短线条,或是处理一些局部细节的时候,手肘的驱动才更加有效。</p> <h4> 解释</h4> <p>肩膀的旋转驱动,可以帮助你画出更长更直的线条。如果只借助手腕的力量,你会发现画出的直线通常是弯的...另外,还可以在画长线之前,先在起点和终点的位置各做一个标记,以增强目标感。</p> <h3> 绘制多边形</h3> <h4> 技巧</h4> <p>对于那些由长线条组成的、用来表示页面或设备轮廓的矩形和其他多边形,可以通过旋转纸面的方法依次画出边框线,而自己的姿势与落笔的角度可以保持不变。</p> <h4> 解释</h4> <p>要在每个方向上都画出很漂亮的直线,确实不是容易的事情。只会画横线不会画竖线?把纸面旋转90度好了&mdash;&mdash;这样无论什么角度的直线,对我们来说其实都是一个方向的,我们自己最习惯的姿势和落笔的角度就可以保持不变了;简单又实用。</p> <h4> 注意</h4> <p>如果你正在使用白板,这种技巧显然不适用;还是多练习竖线的画法吧。</p> <h3> 对交互方式的体现</h3> <h4> 技巧</h4> <p>以普通草图为基础,将便签贴纸附着在图纸的相关位置上,用来表示那些具有交互性质的界面元素,比如提示气泡、弹出层、模态窗口(modal windows)等。</p> <ul> <li> 我们可以在一张草图上使用便签贴纸同时定义多个交互元素,然后按照具体的交互规则,取下一些,再对包含剩余交互元素的草图进行扫描和复印,最终就可以得到一套完整的交互示意草图。</li> <li> 使用不同颜色的贴纸来表示不同类型的交互元素。</li> <li> 一张贴纸的尺寸难以完整的表示模态窗口?在旁边拼一张好了。</li> <li> 一张贴纸的尺寸对于提示气泡来说太大了?裁掉一部分也无妨。</li> </ul> <h4> 解释</h4> <p>这种方法可以帮助我们在不修改草图框架的情况下快速的定义页面元素的交互方式。便签贴纸的位置可以很方便的被调整,我们还可以在上面勾画该界面元素中的细节内容。</p> <p><img alt="web-mobile-ux-user-experience-sketching-prototype-interaction" src="/sites/default/files/images/201112/web-mobile-ux-user-experience-sketching-prototype-interaction.jpg" style="width: 500px; height: 350px; " /></p> <p><img alt="web-mobile-ux-user-experience-sketching-prototype-interaction" src="/sites/default/files/images/201112/web-mobile-ux-user-experience-sketching-prototype-interaction-2.jpg" style="width: 500px; height: 350px; " /></p> <h3 id="e-copy"> 复印与模板化</h3> <p>有时,对于某些UI元素,你也许要重画并调整很多次。这不能算是坏事,你可以把这样的需求看作重新构思并快速迭代的机会。这种情况下,扫描仪或复印机可以帮助我们提升一些效率。</p> <h4> 技巧</h4> <p>使用扫描仪或复印机,将稳定版本的草图复制多张作为框架模板,在其中绘制那些变动需求比较多的UI元素。另外:</p> <ul> <li> 界面中的某个部分画败了吗?用一片白纸覆盖住,复印一下,使用影印稿继续。</li> <li> 如果你需要在草图中使用浏览器窗口或是移动设备作为背景,那么可以找来一些现成的图片素材,复印多张为我所用。<a href="http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/">Smashing Magazine的这篇文章</a>中提供了很多典型的背景框架,包括浏览器、手机等。</li> <li> 如果你需要改变某些已完成草图中的侧边栏,可以用一张白纸画一个新的,复印几张,直接粘贴到这些需要被修改的草图中,覆盖掉旧版的。</li> </ul> <h4> 解释</h4> <p>复印机就是传统版的&ldquo;Ctrl+C&rdquo;和&ldquo;Ctrl+V&rdquo;,它能帮我们快速生成模板;这种方式不仅能提升效率,而且可以减少我们在实验和摸索过程中的顾虑&mdash;&mdash;如果把某些UI元素搞乱套了,换一张模板重新来过就是了。</p> <p>另外,如果你需要使用其他色彩的马克笔来标注重要内容或是绘制特定的界面元素,那么我建议你画在影印稿上,这样可以有效避免不同种类墨水之间的污浊作用。</p> <p><img alt="web-mobile-ux-user-experience-sketching-prototype-template-1" src="/sites/default/files/images/201112/web-mobile-ux-user-experience-sketching-prototype-template-1.jpg" style="width: 500px; height: 350px; " /></p> <p><img alt="web-mobile-ux-user-experience-sketching-prototype-template-2" src="/sites/default/files/images/201112/web-mobile-ux-user-experience-sketching-prototype-template-2.jpg" style="width: 500px; height: 350px; " /></p> <h3> 勾画细节</h3> <p>在细节方面,可以使用直尺作为辅助工具。特别是印有刻度的透明直尺,可以让我们清楚的观察到正在画的直线与周围元素的相对位置关系。</p> <h4> 技巧1</h4> <p>使用直尺和浅灰色马克笔绘制辅助线。</p> <h4> 解释</h4> <p>这种方式特别适用于规划那些需要等距分隔的细节元素,包括列表项、图表、按钮等;我们可以基于这些辅助线进一步绘制这些元素,在细处体现优雅与严谨。</p> <p><img alt="web-mobile-ux-user-experience-sketching-prototype-ruler" src="/sites/default/files/images/201112/web-mobile-ux-user-experience-sketching-prototype-ruler.jpg" style="width: 500px; height: 350px; " /></p> <h4> 技巧2</h4> <p>在前文&ldquo;<a href="http://beforweb.com/node/33#e-layers">分层作业</a>&rdquo;的部分,我们提到了首先使用浅灰色的马克笔绘制界面轮廓及布局结构;而进入细节部分之后,可以使用颜色更深的马克笔或是圆珠笔、钢笔,配合直尺来勾画。</p> <h4> 解释</h4> <p>在&ldquo;分层作业&rdquo;的最后阶段,我们会希望最终成型的界面整体以及其中的UI组件能够清晰的突显出来,而不要融汇在各种辅助线等干扰元素当中。使用深色笔和直尺,我们可以画出长而笔直的浓重线条,有效的突出重要部分的边界。</p> <p>与&ldquo;绘画&rdquo;不同,我们完全不用回避对直尺的使用;重要的是,要知道怎样正确的运用这个工具&mdash;&mdash;不要在草图工作的一开始就使用直尺,它应该在细节部分与最终突出呈现的阶段发挥价值。</p> <p><img alt="web-mobile-ux-user-experience-sketching-prototype-ruler-2" src="/sites/default/files/images/201112/web-mobile-ux-user-experience-sketching-prototype-ruler-2.jpg" style="width: 500px; height: 350px; " /></p> <h4> 技巧3</h4> <p>我们还可以使用直尺来快速整齐的裁纸,例如将便签贴纸裁成更加贴近其所要模拟的UI元素的形状。</p> <h4> 解释</h4> <p>这比从工具箱里再拿一把剪刀出来要省事儿些,因为尺子已经在我们手边了...而且过机场安检时也不会惹什么麻烦...</p> <p><img alt="web-mobile-ux-user-experience-sketching-prototype-ruler-3" src="/sites/default/files/images/201112/web-mobile-ux-user-experience-sketching-prototype-ruler-3.jpg" style="width: 500px; height: 350px; " /></p> <h3> 把故事讲的更加完整</h3> <h4> 技巧</h4> <p>试着在上下文环境中构思和绘制草图,展示出当前界面的应用场景和使用方法,或者干脆直接画在设备的速写图中。</p> <h4> 解释</h4> <p>这样做可以迫使我们认真思考应用的使用环境,从草图阶段开始就站在用户心智的角度思考设计方案,并且能够尽早发现应用功能设计中的潜在问题。</p> <p>确实,没人愿意每做一张草图之前都要首先画个硬件设备出来。我并不是说必须要这样做,但是对设备及应用环境进行粗略的勾勒,是一件具有长远价值的事,尤其对于移动应用来说,对上下文环境的描绘越详实越好。我个人来说,通常会把移动设备简单而完整的画出来,然后在&ldquo;屏幕&rdquo;中按照实际比例绘制应用界面的草图&mdash;&mdash;这样做可以让我时刻留意设备屏幕的规格尺寸及比例约束。另外,我们还可以大致的描绘出用户的操作手型,以此来粗略的评估应用界面中的元素交互方式是否合理。</p> <h4> 注意</h4> <p>想要做到这一点,显然需要具备一定的速写能力;实在觉得难搞的话也没关系,就使用我们在&ldquo;<a href="http://beforweb.com/node/33#e-copy">复印与模板化</a>&rdquo;中提到的方式好了,直接用设备的图片做底板,没问题。</p> <p><img alt="web-mobile-ux-user-experience-sketching-prototype-device" src="/sites/default/files/images/201112/web-mobile-ux-user-experience-sketching-prototype-device.jpg" style="width: 500px; height: 350px; " /></p> <h3> 扔掉草图本</h3> <h4> 技巧</h4> <p>改用普通A4或8.5*11英寸的复印纸。</p> <h4> 解释</h4> <p>草图的目的是沟通与分享信息。普通复印纸可以很容易的被贴到墙上,方便项目相关成员围观讨论。另外,如果需要制作模板或是备份存档,自然是复印纸更加便于复印或是扫描,而不像草稿本那样需要很费力的折叠起来先<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="web-mobile-ux-user-experience-sketching-prototype-wall" src="/sites/default/files/images/201112/web-mobile-ux-user-experience-sketching-prototype-wall.jpg" style="width: 500px; height: 350px; " /></p> <h3> 你还在等什么?</h3> <p>草图不只是设计师的玩具。开发者、产品经理、业务分析人员等同样可以在工作中充分使用起来。草图是团队之间分享、沟通、探索想法的最直观高效的工具。另外我发现,比起打印稿或是页面截图一类的形式,草图可以更有效的激发项目参与者的参与意识,大家的反馈会更加积极主动。</p> <p>始终记住一点,绘制草图是一个梳理与表达想法的过程,而非创作美术作品。完成草图后,不妨评估一下&mdash;&mdash;这样问自己:&ldquo;这些草图能否帮我更好的就各种想法进行沟通?&rdquo; &nbsp;而不是&ldquo;画的够不够炫?&rdquo;</p> <p>是时候去实践了,千万别让自己在工作中被工具和技术困住手脚;这些其实就像玩泥巴一样有趣。</p> <div class="embed"><article id="node-293" class="node node-related-books" about="/node/293" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/用户体验草图设计-正确地设计-设计得正确-巴克斯顿/dp/B007QMXYEE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="用户体验草图设计:正确地设计,设计得正确" src="http://beforweb.com/sites/default/files/images/products/38.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/用户体验草图设计-正确地设计-设计得正确-巴克斯顿/dp/B007QMXYEE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">用户体验草图设计:正确地设计,设计得正确</a></h4> <p><a href="http://www.amazon.cn/用户体验草图设计-正确地设计-设计得正确-巴克斯顿/dp/B007QMXYEE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书着重强调设计过程前后两端的均衡,前端重点做好草图和设计创意,后端则保证可用性和工程两方面。目标是构建一种设计理念:将新技术转化成一种既可以服务社会,又可以体现价值的产品形式...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/69" typeof="skos:Concept" property="rdfs:label skos:prefLabel">草图</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/64" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原型</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Fri, 23 Dec 2011 13:10:35 +0000 C7210 33 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/33#comments