Be For Web - 线框原型 http://www.beforweb.com/taxonomy/term/38 en 全新 Sketch 组件库“Ecommerce”上架 http://www.beforweb.com/node/1076 <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="http://www.beforweb.com/sites/default/files/article-thumbs/logo-icon-sketch-wireframekit-beforweb.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>​Hello 大家,WireframeKit for Sketch 系列的第四款组件库&ldquo;Ecommerce&rdquo;正式发布上架。</p> <p>不同于系统原生风格的&ldquo;iOS 13&rdquo;库,以及社交产品风格的&ldquo;Social&rdquo;库,&ldquo;Ecommerce&rdquo;聚焦于电商类界面设计模式。基于一系列国内主流的电商 app,&ldquo;Ecommerce&rdquo;提炼了超过360个界面组件,90余个常用图标,22个典型页面范例及详细的组件替换清单,以期快速满足实战需求,减免改造负担,并提升参考学习价值。</p> <!--break--><p>&ldquo;Ecommerce&rdquo;库同时附赠《设计体系》C7210版全书译文及 Sketch 常用中文数据源。一如既往,&ldquo;Ecommerce&rdquo;库也会长期提供免费更新。WireframeKit 系列的老用户还可以享受额外优惠。</p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/%E6%88%AA%E5%B1%8F2019-12-0914_56_57.png" style="width: 620px; height: 357px; border: none;" /></p> <p>在本文中,你将了解:</p> <ul> <li> &ldquo;Ecommerce&rdquo;库简介。</li> <li> 具体获取方式,包括单品与超值套装。</li> <li> WireframeKit 系列简介。</li> <li> 赠品简介。</li> </ul> <h3> 关于&ldquo;Ecommerce&rdquo;库</h3> <p>WireframeKit for Sketch - Ecommerce,C7210自制线框风格 Sketch 组件库,聚焦于电商类产品的设计需求,为提升线框原型的质效与保真度而精心打造。</p> <p>&ldquo;Ecommerce&rdquo;库共提供12种颜色定义,53种样式定义,504种文字风格定义,30类共超过360个界面组件,94个常用图标,22个典型电商类界面范例与组件替换指南。</p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/%E6%88%AA%E5%B1%8F2019-12-0915_09_59.png" style="width: 620px; height: 377px; border: none;" /></p> <p class="figure-caption">颜色、样式与文字风格定义</p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/%E6%88%AA%E5%B1%8F2019-12-0915_11_04.png" style="width: 620px; height: 377px; border: none;" /></p> <p class="figure-caption">丰富的界面组件定义</p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/%E6%88%AA%E5%B1%8F2019-12-0915_12_39.png" style="width: 620px; height: 377px; border: none;" /></p> <p class="figure-caption">典型的电商类产品界面范例</p> <p>所有元素即拖即用,适于快速创建中/高保真线框原型。组件的可配置项丰富,具备良好的灵活性和扩展性,可与 Sketch 的 Smart Layout、Override、Library Styles、Data 等功能完美配合,快速定制内容与样式,并能自适应各类常见的设备规格。</p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/%E6%88%AA%E5%B1%8F2019-12-0915_15_55.png" style="width: 620px; height: 377px; border: none;" /></p> <p class="figure-caption">商品列表细节设置</p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/%E6%88%AA%E5%B1%8F2019-12-0915_16_59.png" style="width: 620px; height: 377px; border: none;" /></p> <p class="figure-caption">卡片视图细节设置</p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/%E6%88%AA%E5%B1%8F2019-12-0915_19_01.png" style="width: 620px; height: 377px; border: none;" /></p> <p class="figure-caption">商品详情页细节设置</p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/%E6%88%AA%E5%B1%8F2019-12-0915_17_59.png" style="width: 620px; height: 377px; border: none;" /></p> <p class="figure-caption">订单列表细节设置</p> <p>&ldquo;Ecommerce&rdquo;库针对典型界面范例提供了详细的组件替换指南,使你对可选组件的特征与路径一目了然。</p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/%E6%88%AA%E5%B1%8F2019-12-0915_12_50.png" style="width: 620px; height: 377px; border: none;" /></p> <p>结合&ldquo;Social&rdquo;库提供的社交类界面组件,你将能快捷构建完整的大电商类产品线框原型。</p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/%E6%88%AA%E5%B1%8F2019-12-0915_23_26.png" style="width: 620px; height: 376px; border: none;" /></p> <p class="figure-caption">WireframeKit for Sketch - Social</p> <p>&ldquo;Ecommerce&rdquo;库基于&ldquo;iOS 13&rdquo;库打造;两者的颜色、样式及文字风格定义完全通用,组件命名各自独立,搭配使用可以满足更加丰富多样的设计需求。</p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/%E6%88%AA%E5%B1%8F2019-12-0915_26_01.png" style="width: 620px; height: 376px; border: none;" /></p> <p class="figure-caption">WireframeKit for Sketch - iOS 13</p> <h3> 获取方式</h3> <p>WireframeKit for Sketch 是付费组件库系列,目前仅在 Beforweb 微店提供:</p> <ul> <li> <strong>Ecommerce:149元,附赠</strong>:</p> <ul> <li> C7210版《设计体系》全书译文(PDF)</li> <li> Sketch 常用中文数据源</li> </ul> </li> <li> <strong>Social:129元,附赠</strong>:</p> <ul> <li> C7210版《设计体系》全书译文(PDF)</li> <li> Sketch 常用中文数据源</li> </ul> </li> <li> <strong>iOS 13:99元</strong></li> <li> <strong>Impart:79元</strong></li> </ul> <p>购买超值套装享受更大优惠:</p> <ul> <li> <strong>Ecommerce+Social 套装:仅249元</strong></li> <li> <strong>Ecommerce+iOS 13 套装:仅219元</strong></li> <li> <strong>Ecommerce+Social+iOS 13:仅309元</strong></li> <li> <strong>Social+iOS 13 套装:仅199元</strong></li> </ul> <p>WireframeKit 系列的老用户购买 Ecommerce 单品或套装再减10元。</p> <p>一如既往,所有库提供长期免费更新。</p> <p>请通过以下小程序码访问微店获取。付费后,你将得到下载链接及密码。老用户在拍下后请提供曾经的订单号,以便修改价格。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201808/WechatIMG57.jpeg" style="height: 300px; width: 300px; border: none;" /></p> <h3> WireframeKit 系列简介</h3> <p><img alt="" src="http://beforweb.com/sites/default/files/images/banners/Intro.png" style="width: 620px; height: 349px; border: none;" /></p> <p>WireframeKit for Sketch,C7210自制自用的线框稿风格 Sketch 组件库,面向移动端产品交互设计工作而精心打造。</p> <p>所有组件即拖即用,适于快速创建中/高保真线框原型。元件模板配置项丰富,具备良好的灵活性与扩展性,便于根据特定的需求进行改造复用,并能自适应各类常见的设备规格。</p> <h4> WireframeKit for Sketch - Social</h4> <p>聚焦于主流的社交类设计模式,共提供12种颜色定义,53种样式定义,504种文字风格定义,33类共计183个界面组件,112个常用图标,13个典型社交界面范例与组件替换指南。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201910-WK/0-9.jpeg" style="width: 620px; height: 376px; border:none;" /></p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201910-WK/0-10.jpeg" style="width: 620px; height: 376px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/IMG_0255.PNG" style="width: 620px; height: 377px; border:none;" /></p> <p>&ldquo;Social&rdquo;基于 WireframeKit &ldquo;iOS&rdquo;打造,两者的颜色、样式及文字风格定义完全通用,组件命名各自独立,搭配使用可以满足更加丰富多样的设计需求。<a href="http://beforweb.com/node/1003" target="_blank">了解更多详情&rsaquo;</a></p> <h4> WireframeKit for Sketch - iOS</h4> <p>基于 iOS 13 原生风格打造,共提供12种颜色定义,52种样式定义,504种文字风格定义,23类共计132个典型元件模板,103个常用图标,针对两款设备规格共计16个完整界面范例。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201910-WK/0-5.jpeg" style="width: 620px; height: 376px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-Ecommerce/%E6%88%AA%E5%B1%8F2019-12-0915_26_01.png" style="width: 620px; height: 376px; border:none;" /></p> <h4> WireframeKit for Sketch - Impart</h4> <p>基于 WireframeKit for Sketch &ldquo;iOS&rdquo;打造,卡片风格,适用于内容/社交/电商等领域的产品线框原型制作。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201910-WK/0-12.jpeg" style="width: 620px; height: 376px; border: none;" /></p> <h3> 赠品简介</h3> <p>去年翻译了 Design Systems 一书,并在公众号连载10余期,期间得到很多朋友的支持;我自己同样学到很多,特别是在关键任务分析和设计模式清查等方面,诸多方法都运用到了组件库的制作当中。全书译文整理成 PDF 文件后,作为组件库赠品附于&ldquo;Ecommerce&rdquo;库与&ldquo;Social&rdquo;库当中,希望可以为各位朋友带来参考价值。</p> <p>大致这样;再次感谢各位新老朋友的支持。一如既往,希望 WireframeKit 能为你的线框原型设计工作带来质量与效能的强劲助推~</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201808/WechatIMG57.jpeg" style="height: 300px; width: 300px; border: none;" /></p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 500px; height: 128px; border: none;" /></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="/news" 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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/226" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WireframeKit</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/227" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch组件库</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/164" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch</a></li></ul> Mon, 09 Dec 2019 11:17:52 +0000 C7210 1076 at http://www.beforweb.com http://www.beforweb.com/node/1076#comments WireframeKit 组件库免费升级至 iOS 13 http://www.beforweb.com/node/1061 <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="http://www.beforweb.com/sites/default/files/article-thumbs/logo-icon-sketch-wireframekit-beforweb.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>Hello 各位安,C 我自制的 WireframeKit for Sketch (iOS) 组件库已升级至 iOS 13。</p> <p>一如既往,老用户们仍然免费升级,直接使用购买时收到的下载链接与密码即可获取最新文件。还没有使用过 WireframeKit 的朋友可以在后文的简介当中稍作了解先。</p> <p>此次更新的主要内容包括:</p> <!--break--><ul> <li> 新增了 1 种模态导航栏。</li> <li> 新增了 4 种卡片风格导航栏。</li> <li> 新增了 9 种搜索导航栏。</li> <li> 新增了 5 种情境菜单。</li> <li> 更新了分段控件的样式。</li> <li> 更新了步进控件的样式。</li> <li> 更新了带有分段控件的导航栏样式。</li> <li> 更新了相关的范例页面。</li> <li> 移除了 Activity View。</li> </ul> <p><img alt="" src="/sites/default/files/images/201910-WK/0-5.jpeg" style="width: 620px; height: 376px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201910-WK/0-4.jpeg" style="width: 620px; height: 376px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201910-WK/0-3.jpeg" style="width: 620px; height: 376px; border: none;" /></p> <p>对于 iOS 13 相关设计要点还不大了解的朋友们,不妨阅读我们之前的&ldquo;图文版 WWDC:iOS 13 设计新特性&rdquo;系列,包括:</p> <ul> <li> <a href="http://beforweb.com/node/1047" target="_blank">深色模式、材质、系统控件、SF Symbols</a></li> <li> <a href="http://beforweb.com/node/1048" target="_blank">卡片风格面板、情境菜单</a></li> </ul> <h3> 关于 WireframeKit</h3> <p>还没有使用过 WireframeKit 组件库的朋友们不妨来稍作了解:</p> <p><img alt="" src="/sites/default/files/images/banners/Intro.png" style="width: 600px; height: 338px;" /></p> <p>WireframeKit for Sketch,C7210自制自用的线框稿风格 Sketch 组件库,面向移动端产品交互设计工作而精心打造。</p> <p>所有组件即拖即用,适于快速创建中/高保真线框原型。元件模板配置项丰富,具备良好的灵活性与扩展性,便于根据特定的需求进行改造复用,并能自适应各类常见的设备规格。</p> <h4> WireframeKit for Sketch - Social</h4> <p>聚焦于主流的社交类设计模式,共提供12种颜色定义,53种样式定义,504种文字风格定义,33类共计183个界面组件,112个常用图标,13个典型社交界面范例与组件替换指南。</p> <p><img alt="" src="/sites/default/files/images/201910-WK/0-9.jpeg" style="width: 620px; height: 376px;border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201910-WK/0-10.jpeg" style="width: 620px; height: 376px;border:none;" /></p> <p>&ldquo;Social&rdquo;基于 WireframeKit &ldquo;iOS&rdquo;打造,两者的颜色、样式及文字风格定义完全通用,组件命名各自独立,搭配使用可以满足更加丰富多样的设计需求。<a href="http://beforweb.com/node/1003" target="_blank">了解更多详情&rsaquo;</a></p> <h4> WireframeKit for Sketch - iOS</h4> <p>基于 iOS 原生风格打造,共提供12种颜色定义,52种样式定义,504种文字风格定义,23类共计132个典型元件模板,103个常用图标,针对两款设备规格共计16个完整界面范例。</p> <p><img alt="" src="/sites/default/files/images/201910-WK/0-11.jpeg" style="width: 620px; height: 376px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201910-WK/0-1.jpeg" style="width: 620px;border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201910-WK/0-2.jpeg" style="height: 377px; width: 620px;border:none;" /></p> <h4> WireframeKit for Sketch - Impart</h4> <p>基于 WireframeKit for Sketch &ldquo;iOS&rdquo;打造,卡片风格,适用于内容/社交/电商等领域的产品线框原型制作。</p> <p><img alt="" src="/sites/default/files/images/201910-WK/0-12.jpeg" style="width: 620px; height: 376px;border:none;" /></p> <h3> 价格与获取方式</h3> <ul> <li> <strong>Social</strong>:129元,附赠:</p> <p>&nbsp;</p> <ul> <li> C7210版《设计体系》全书译文(PDF)</li> <li> Sketch 常用中文数据源</li> </ul> </li> <li> <strong>iOS 13</strong>:99元</li> <li> <strong>Impart</strong>:79元</li> <li> <strong>Social + iOS 13 超值套装</strong>:仅199元</li> <li> <strong>Impart + iOS 13 超值套装</strong>:仅159元</li> </ul> <p>一如既往,所有库提供长期免费更新。</p> <p>请通过以下小程序码访问微店获取。付费后,你将得到下载链接及密码。</p> <p><img alt="" src="/sites/default/files/images/201808/WechatIMG57.jpeg" style="height: 300px; width: 300px;" /></p> <p>大致这样;再次感谢各位新老朋友的支持。一如既往,希望 WireframeKit 能为你的线框原型设计工作带来质量与效能的强劲助推~</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="/news" 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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/226" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WireframeKit</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/227" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch组件库</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/164" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch</a></li></ul> Tue, 08 Oct 2019 11:30:56 +0000 C7210 1061 at http://www.beforweb.com http://www.beforweb.com/node/1061#comments WireframeKit for Sketch 免费更新 http://www.beforweb.com/node/1049 <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="http://www.beforweb.com/sites/default/files/article-thumbs/logo-icon-sketch-wireframekit-beforweb.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>​Hello 各位,WireframeKit for Sketch 更新喽,Social、iOS 12、Impart 都有涉及,老朋友们可以关注一下;一如既往,更新全部免费。还不了解 WireframeKit 组件库的朋友可以参考后文的简介。</p> <p>这次更新主要针对的是 Sketch 在大版本 53 当中提供的一项重要功能,即 Symbols 覆写管理功能(Manage Overrides)。</p> <!--break--><p>简而言之,从前每一个组件 Symbol 在实际调用时,都会将内部所有的文本、样式属性或内嵌 Symbol 暴露在右侧的&ldquo;Overrides&rdquo;面板当中用来进行定制化处理;对于稍复杂的 Symbol 而言,通常会有较多不会产生定制需求的选项同样被暴露出来,严重干扰有效信息的辨识度。如下图所示,Social 库当中的某个用户信息组件,可定制项多达 15 个:</p> <p><img alt="" src="/sites/default/files/images/201907/wk-update-before.png" style="width: 600px; height: 664px;" /></p> <p>而面向&ldquo;覆写管理功能&rdquo;进行优化之后,我们可以选择只将那些会产生定制需求的元素暴露出来,如下图所示,相同的组件,定制项减少到了 6 个,极大提升了易用性:</p> <p><img alt="" src="/sites/default/files/images/201907/wk-update-after.png" style="width: 600px; height: 385px;" /></p> <p>Social、iOS 12 和 Impart 三个组件库均已针对该功能进行更新,每一个组件都经过精心设置,确保你在使用当中轻松掌控定制操作。当然,如果你需要变更某些组件所暴露出来的定制项,也可以直接到&ldquo;Symbols&rdquo;页当中进行修改;只要选中该组件,右侧便会出现&ldquo;Manage Overrides&rdquo;控制项,勾选的元素会暴露在外部的&ldquo;Overrides&rdquo;面板当中:</p> <p><img alt="" src="/sites/default/files/images/201907/wk-update-control.png" style="width: 600px; height: 624px;" /></p> <p>完整的更新细则如下:</p> <ul> <li> <strong>Social 库</strong>:</p> <ul> <li> 面向&ldquo;覆写管理功能&rdquo;全面进行优化。</li> <li> 新增一种样式定义,用于未读消息的徽标样式。</li> </ul> </li> <li> <strong>iOS 12 库</strong>:</p> <ul> <li> 面向&ldquo;覆写管理功能&rdquo;全面进行优化。</li> <li> 重构并统一所有图标的图层组成方式。</li> <li> 新增&ldquo;Library Preview&rdquo;封面。</li> </ul> </li> <li> <strong>Impart 库</strong>:</p> <ul> <li> 面向&ldquo;覆写管理功能&rdquo;全面进行优化。</li> <li> 新增&ldquo;Library Preview&rdquo;封面。</li> </ul> </li> </ul> <h3> 更新方式</h3> <p>老用户依然免费更新,直接使用购买时收到的下载链接与密码即可获取最新文件。</p> <h3> 关于 WireframeKit</h3> <p>还没有使用过 WireframeKit 组件库的朋友们不妨来稍作了解:</p> <p><img alt="" src="/sites/default/files/images/201907/WK-Intro.png" style="width: 600px; height: 338px;" /></p> <p>WireframeKit for Sketch,C7210自制自用的线框稿风格 Sketch 组件库,面向移动端产品交互设计工作而精心打造。</p> <p>所有组件即拖即用,适于快速创建中/高保真线框原型。元件模板配置项丰富,具备良好的灵活性与扩展性,便于根据特定的需求进行改造复用,并能自适应各类常见的设备规格。</p> <h4> WireframeKit for Sketch - Social</h4> <p>聚焦于主流的社交类设计模式,共提供12种颜色定义,53种样式定义,504种文字风格定义,33类共计183个界面组件,112个常用图标,13个典型社交界面范例与组件替换指南。</p> <p><img alt="" src="/sites/default/files/images/201907/wk-update-0-3.jpeg" style="width: 620px; height: 376px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201907/wk-update-0-4.jpeg" style="width: 620px; height: 376px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201907/wk-update-0-5-b.jpg" style="width: 620px; height: 377px; border:none;" /></p> <p>&ldquo;Social&rdquo;基于 WireframeKit &ldquo;iOS&rdquo;打造,两者的颜色、样式及文字风格定义完全通用,组件命名各自独立,搭配使用可以满足更加丰富多样的设计需求。了解更多详情&rsaquo;</p> <h4> WireframeKit for Sketch - iOS</h4> <p>基于 iOS 原生风格打造,共提供12种颜色定义,52种样式定义,504种文字风格定义,22类共计114个典型元件模板,103个常用图标,针对两款设备规格共计16个完整界面范例。</p> <p><img alt="" src="/sites/default/files/images/201907/wk-update-0-2.jpeg" style="width: 620px; height: 376px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201907/wk-update-0.jpeg" style="width: 620px; height: 376px; border:none;" /></p> <h4> WireframeKit for Sketch - Impart</h4> <p>基于 WireframeKit for Sketch &ldquo;iOS&rdquo;打造,卡片风格,适用于内容/社交/电商等领域的产品线框原型制作。</p> <p><img alt="" src="/sites/default/files/images/201907/wk-update-0-1.jpeg" style="width: 620px; height: 376px; border:none;" /></p> <h3> 价格与获取方式</h3> <ul> <li> <strong>Social</strong>:129元,附赠:</p> <ul> <li> C7210版《设计体系》全书译文(PDF)</li> <li> Sketch 常用中文数据源</li> </ul> </li> <li> <strong>iOS 12</strong>:99元</li> <li> <strong>Impart</strong>:79元</li> <li> <strong>Social + iOS 12 超值套装</strong>:仅199元</li> <li> <strong>Impart + iOS 12 超值套装</strong>:仅159元</li> </ul> <p>一如既往,所有库提供长期免费更新。</p> <p>请通过以下小程序码访问微店获取。付费后,你将得到下载链接及密码。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201808/WechatIMG57.jpeg" style="width: 300px; height: 300px;border:none;" /></p> <p>大致这样;再次感谢各位新老朋友的支持。一如既往,希望 WireframeKit 能为你的线框原型设计工作带来质量与效能的强劲助推~</p> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 450px; height: 116px;border:none;" /></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="/news" 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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/226" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WireframeKit</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/164" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/227" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch组件库</a></li></ul> Tue, 30 Jul 2019 11:16:14 +0000 C7210 1049 at http://www.beforweb.com http://www.beforweb.com/node/1049#comments 组件库物语 - Sketch Hack 之浮动居中 http://www.beforweb.com/node/1006 <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="http://www.beforweb.com/sites/default/files/article-thumbs/logo-icon-sketch-wireframekit-beforweb.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>我说吧,2018真的就剩下这么几天了;近来看到有朋友认真地写了年度总结,突然发现自己竟然完全没有心情做复盘,很是惭愧。超戏剧性的一年,有坑有雷,也有着近在咫尺可期许的理想;有丰盛的产出,也有空洞的日夜;岂能不做总结呢。看心情吧。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201812/IMG_1135.jpg" style="width: 450px; height: 450px;" /></p> <p class="figure-caption">漫咖啡也喜气洋洋了起来</p> <p>说正事儿呢。继续组件库物语,对之前<a href="http://beforweb.com/node/1003" target="_blank">新上架的社交类 Sketch 组件库&ldquo;Social&rdquo;</a>进行复盘。在之前的两篇当中,我们聊到了:</p> <ul> <li> <a href="http://beforweb.com/node/1004" target="_blank">定义目标,以小为始</a>:关于早期规划、目标分析,以及&ldquo;自下而上&rdquo;的起步技巧。</li> <li> <a href="http://beforweb.com/node/1005" target="_blank">通用性与易用性的权衡</a>:如何在组件的复杂度与易用性之间寻求平衡。</li> </ul> <p>今天聊一点有意思的细节实现技巧吧。这个小 hack 我个人常会用到,最初获取于 Medium 上的一些相关讨论(近两年来也在随着 Sketch 的升级而迭代,最新的链接附于文末)。</p> <h3> 关于浮动居中</h3> <p>我们都知道,将多个元素排列成单行,打包 Symbol 之后,位于文本右侧的元素会随着文本实际长度的变化而自动移位(实测元素间距在20px之内时,此机制有效),如下图所示:</p> <p><img alt="" src="/sites/default/files/images/201812/text.png" style="width: 600px; height: 185px;" /></p> <p>这是很有用的机制,可以有效提升 Symbol 的灵活性。而在实际当中,我们时常要解决另一类需求,即&ldquo;图形在左,文本在右,整体自动居中&rdquo;,例如包含图标与文本的按钮,或是包含头像与用户名的导航栏等等。以 WireframeKit &ldquo;Social&rdquo;当中的元素为例:</p> <p><img alt="" src="/sites/default/files/images/201812/button.png" style="width: 200px; height: 40px;" /></p> <p class="figure-caption">&ldquo;关注&rdquo;按钮</p> <p><img alt="" src="/sites/default/files/images/201812/navbar.png" style="width: 375px; height: 88px;" /></p> <p class="figure-caption">用户信息导航栏</p> <p>对于这类文本元素位于右侧的情况,Sketch 原本的浮动机制无法直接实现图形元素随着文本长度的变化自动移位。这时,我们需要在原本机制的基础之上运用一点 hack,才能确保内容整体在文本变化之后仍能自动保持浮动居中:</p> <p><img alt="" src="/sites/default/files/images/201812/buttonL.png" style="width: 200px; height: 40px;" /></p> <p><img alt="" src="/sites/default/files/images/201812/navbarL.png" style="width: 375px; height: 88px;" /></p> <p>Hack 的本质,是对于工具原生能力的运用技巧,而无需借助任何第三方插件。</p> <h3> 如何实现</h3> <p>我们以按钮为例进行演示。</p> <p><strong>1. </strong>创建按钮,包括背景形状、文本及图标。此时先将图标置于文本右侧:</p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_22_52.png" style="width: 230px; height: 79px;" /></p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_26_46.png" /></p> <p>确保将文本元素的对齐模式(Alignment)设置为&ldquo;Auto&rdquo;和&ldquo;Centered&rdquo;:</p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_31_43.png" style="width: 543px; height: 146px;" /></p> <p><strong>2. </strong>将图标与文本结组(Group),并在右侧面板中将该组整体的旋转角度设置为180&deg;:</p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_28_57.png" style="width: 342px; height: 90px;" /></p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_33_25.png" style="width: 541px; height: 134px;" /></p> <p class="figure-caption">倒过来了哦</p> <p>3. 再分别将图标与文本的旋转角度各自设置为180&deg;;此时外观已经符合我们的需求:</p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_34_24.png" style="width: 545px; height: 130px;" /></p> <p>4. 按照下列规则,分别对内容组、文本及图标的 Resizing 模式进行设置:</p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_38_10.png" style="width: 524px; height: 99px;" /></p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_39_47.png" style="width: 530px; height: 168px;" /></p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_40_43.png" style="width: 537px; height: 170px;" /></p> <p><strong>5. </strong>将内容组(&ldquo;Label With Icon&rdquo;)打包为 Symbol,将其横向拉伸至与按钮同宽,并将其 Resizing 模式按照下图所示进行设置:</p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_44_05.png" style="width: 342px; height: 90px;" /></p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_47_18.png" style="width: 600px; height: 146px;" /></p> <p><strong>6. </strong>将按钮整体打包为 Symbol:</p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_48_30.png" style="width: 463px; height: 162px;" /></p> <p>搞定。尝试不同的文本长度看看:</p> <p><img alt="" src="/sites/default/files/images/201812/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-12-20%20%E4%B8%8B%E5%8D%8811_50_00.png" style="width: 469px; height: 406px;" /></p> <p>大致这样,希望可以在实战中帮到你。用途很多,譬如按钮、标签、用户信息、文本框占位符等等都可能用到。</p> <p>Medium 参考:<a href="https://medium.com/sketch-app-sources/sketch-hacks-make-a-resizable-button-with-icon-label-totally-native-edition-6a1ff5b48e0e">Sketch hacks: Make a Resizable button with Icon &amp; Label, totally native edition</a></p> <p>还没有使用过 WireframeKit &ldquo;Social&rdquo;的朋友不妨稍作了解:</p> <h4> WireframeKit 获取方式</h4> <p>WireframeKit for Sketch 是付费组件库系列,目前仅在 Beforweb 微店提供:</p> <ul> <li> <strong>Social</strong>:129元 ,附赠:</p> <p>&nbsp;</p> <p>&nbsp;</p> <ul> <li> C7210版《设计体系》全书译文(PDF)。</li> <li> Sketch 常用中文数据源。</li> </ul> </li> <li> <strong>iOS 12</strong>:99元</li> <li> <strong>Social + iOS 12 超值套装</strong>:仅需199元</li> </ul> <p>请通过以下小程序码访问微店获取(系统通常随机附送1至88元不等的红包)。付费后,你将得到下载链接及密码。</p> <p><img alt="" src="/sites/default/files/images/201808/WechatIMG57.jpeg" style="width: 300px; height: 300px;border:none;" /></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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/164" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/227" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch组件库</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/226" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WireframeKit</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/234" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计体系</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/235" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Design System</a></li></ul> Fri, 21 Dec 2018 12:29:06 +0000 C7210 1006 at http://www.beforweb.com http://www.beforweb.com/node/1006#comments 组件库物语 - 通用性与易用性的权衡 http://www.beforweb.com/node/1005 <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="http://www.beforweb.com/sites/default/files/article-thumbs/logo-icon-sketch-wireframekit-beforweb.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>周日晚间,&ldquo;猎户星座&rdquo;,全家便利店的美式咖啡,酝酿着困倦与新一周的未知,初冬的天气却毫不冷静。&ldquo;有时你乘起风,有时你沉没,有时午夜有彩虹&rdquo;。</p> <p>一周前上架了新的 Sketch 组件库,也就是聚焦于社交类产品设计需求的 WireframeKit &ldquo;Social&rdquo;,同时也开始以这样的形式进行总结,包括思路、原则、工作方法、细节技巧等等;复盘于己,分享于人。</p> <!--break--><p><a href="http://beforweb.com/node/1003" target="_blank"><img alt="" src="/sites/default/files/images/201811/%E5%85%AC%E4%BC%97%E5%8F%B7%E4%B8%8E%E5%A4%B4%E6%9D%A1.png" style="width: 600px; height: 338px;" /></a></p> <p class="figure-caption">&ldquo;Social&rdquo;库附赠《设计体系》全书译文,<a href="http://beforweb.com/node/1003" target="_blank">了解详情</a> &rsaquo;</p> <p>在上一篇&ldquo;<a href="http://beforweb.com/node/1004" target="_blank">组件库物语 - 定义目标,以小为始</a>&rdquo;当中,我简单介绍了&ldquo;Social&rdquo;库的项目启动过程,包括早期规划、目标分析,以及&ldquo;自下而上&rdquo;的起步技巧等等;今天来聊一些细节实现当中的权衡问题。我个人在每一次的库相关项目中总会遇到类似的问题,相信对各位来说也不会太陌生。</p> <h3> 通用性与易用性的权衡</h3> <p>先对这两个概念进行定义,避免含义宽泛造成误解。在本文范围中:</p> <ul> <li> <strong>通用性</strong>:指组件库提供的元素(图标、按钮、组件、模块等)对于设计需求的适应能力,即能否以较少的元素实现较为多样的产出形式。</li> <li> <strong>易用性</strong>:指组件库对于使用者的友好程度,即能否帮助设计师以较少的认知与操作成本来调用和定制组件。</li> </ul> <p>具体到 Sketch 的实践层面,我们通常会将若干元素打包为 Symbol,构成一个可供复用的组件。其中,&ldquo;通用性&rdquo;与&ldquo;易用性&rdquo;体现在:</p> <ul> <li> Symbol 内部元素的可控性越低,其用途就越单一,对于使用者来说也更易于认知和记忆。但要满足复杂的设计需求,所需 Symbols 的数量就更大,整体架构的复杂度更高,库的制作和维护成本也更高。</li> <li> Symbol 内部元素的可控性越高,其用途就越广泛,需要配合&ldquo;Overrides&rdquo;面板控制的嵌套及样式关系就越为复杂,因此使用者对其用途的理解与记忆成本就越高,每次根据特定需求进行调整定制的复杂度也越高。而相应的,由于 Symbols 的高度整合,库的整体规模会相对较低,架构相对简单。</li> </ul> <p>以上两种状况,<strong>任何一个极端都不利于构建高效实用的组件库</strong>,制作者需要针对每一个图标、按钮、组件、模块,考虑如何实现通用性和易用性的平衡。</p> <p>以&ldquo;Social&rdquo;库当中的一些实现方式为例,来简单描述下这种平衡。</p> <h4> 图标</h4> <p>如下图所示,&ldquo;Social&rdquo;库提供了40个常用的功能性图标,并以此为基础扩展出了不同形状样式的共计48个&ldquo;Category&rdquo;类图标(用于金刚位或消息列表等等):</p> <p><img alt="" src="/sites/default/files/images/201812/Icons.png" style="width: 450px; height: 682px;border: none;" /></p> <p>从实现方法上,后两类图标显然无需定义 24x2 共计48个 Symbol;将基础图标 Symbol 与背景样式 Symbol 进行嵌套,打包成一个 Symbol 即可解决问题。这个 Symbol 具有高度的通用性,使用者可以通过&ldquo;Overrides&rdquo;控制其图标样式与背景种类。但从使用角度,这种方式不利于一目了然地识别和记忆,不利于使用者在第一时间了解有哪些同类元素可供调用,需要依靠猜测及&ldquo;Overrides&rdquo;进行复杂的控制。分别定义成48个图标之后,<strong>无论使用者打开源文件进行参考,还是直接作为 Library 调用,都可以清晰地看到全部可用元素</strong>。</p> <p>同时,这48个图标并不代表所有的可能性,你仍然可以通过 Sketch 52 提供的Symbols 样式定制功能实现更多的规格。</p> <h4> 按钮</h4> <p>&ldquo;Social&rdquo;库提供的行动类按钮包括以下3类,5种风格共计15个:</p> <p><img alt="" src="/sites/default/files/images/201812/Buttons.png" style="width: 450px; height: 394px;border:none;" /></p> <p>除了左侧带有图标的按钮之外(这类按钮的自适应性需要用到一些有意思的 hack 来实现,单独找一篇聊),其他几种风格,包括圆角矩形或胶囊状,以及实色、Ghost 样式等等,从技术角度同样可以藉由一个 Symbol 实现,并通过&ldquo;Overrides&rdquo;控制实际风格。但同样,<strong>作为组件库,相比于技术逻辑是否极致,易于发现、识别并快速调用才是最为优先的</strong>。</p> <h4> Feed Header</h4> <p>&ldquo;Social&rdquo;库提供了8个 Feed Header 组件,用于构建信息流卡片当中的用户信息。</p> <p><img alt="" src="/sites/default/files/images/201812/Header.png" style="width: 450px; height: 715px;border:none;" /></p> <p>如果加以整合,这8个 Symbols 完全可以压缩成两个,甚至是一个;在调用时通过&ldquo;Overrides&rdquo;控制内部元素的呈现或隐藏。然而在那样的情况下,从&ldquo;需要调用&rdquo;到&ldquo;完成调用&rdquo;这个过程已然需要使用者付出大量的认知成本,需要反复调整元素的布局与呈现关系,才能调试出可能符合自己需求的组件。</p> <h4> 结语</h4> <p>综上所述,对于&ldquo;Social&rdquo;库来说,我更希望使用者在调用其元素时,<strong>可以一目了然地发现所有选项,并能快速完成选择和调用</strong>;而非提供一系列极致整合的&ldquo;通用&rdquo;组件,使你不得不预先进行猜测、判断,并通过大量的定制工作才能达到目标。</p> <p>当然,这种平衡性原则也和库本身的性质有关。如上一篇物语所说,&ldquo;Social&rdquo;库的目标本就包含&ldquo;减轻甚至免除受众改造组件的成本,实现更快的使用速度&rdquo;,因此会使天平更倾向于&ldquo;易用性&rdquo;的一侧,而非高度整合的&ldquo;通用性&rdquo;。如果你需要制作的库更在于体量的控制或是需要体现前端开发方面的实现逻辑,那么对天平倾向性进行相应地调整也是有必要的。</p> <h4> WireframeKit 获取方式</h4> <p>WireframeKit for Sketch 是付费组件库系列,目前仅在 Beforweb 微店提供:</p> <ul> <li> <strong>Social</strong>:129元 ,附赠:</p> <p>&nbsp;</p> <p>&nbsp;</p> <ul> <li> C7210版《设计体系》全书译文(PDF)。</li> <li> Sketch 常用中文数据源。</li> </ul> </li> <li> <strong>iOS 12</strong>:99元</li> <li> <strong>Social + iOS 12 超值套装</strong>:仅需199元</li> </ul> <p>请通过以下小程序码访问微店获取(系统通常随机附送1至88元不等的红包)。付费后,你将得到下载链接及密码。</p> <p><img alt="" src="/sites/default/files/images/201808/WechatIMG57.jpeg" style="width: 300px; height: 300px;border:none;" /></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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/164" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/227" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch组件库</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/226" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WireframeKit</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/234" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计体系</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/235" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Design System</a></li></ul> Tue, 04 Dec 2018 09:35:44 +0000 C7210 1005 at http://www.beforweb.com http://www.beforweb.com/node/1005#comments 组件库物语 - 定义目标,以小为始 http://www.beforweb.com/node/1004 <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="http://www.beforweb.com/sites/default/files/article-thumbs/logo-icon-sketch-wireframekit-beforweb.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>Hello 各位周五好,一周又要过去了;眼看着一年也只剩下最后一个月了。</p> <p>本周上架了 WireframeKit for Sketch 系列的第三款组件库,&ldquo;Social&rdquo;。库如其名,聚焦于主流的社交类设计模式;和之前的系统库或概念库不同,这次完全基于市面上的真实产品,提炼了大量典型元素打造而成。</p> <!--break--><p><a href="http://beforweb.com/node/1003" target="_blank"><img alt="" src="/sites/default/files/images/201811/%E5%85%AC%E4%BC%97%E5%8F%B7%E4%B8%8E%E5%A4%B4%E6%9D%A1.png" style="width: 600px; height: 338px;" /></a></p> <p class="figure-caption">&ldquo;Social&rdquo;库附赠《设计体系》全书译文,<a href="http://beforweb.com/node/1003" target="_blank">了解详情</a> &rsaquo;</p> <p>很开心&ldquo;Social&rdquo;得到了新老朋友们的欢迎,验证了这个方向的库确实有真实需求,毕竟相比于 iOS 库来说,封装性和实用性高了很多,&ldquo;拿来就用&rdquo;才是最好。</p> <h3> 关于&ldquo;组件库物语&rdquo;</h3> <p>在制作&ldquo;Social&rdquo;库的过程中,我个人也收获到很多经验和感想;期间零零散散做着记录,包括思路、原则、工作方法、细节技巧等等,留到现在稍作归纳,一点点分享给各位。</p> <p>希望每次的内容能尽量简短精要,写起来不会有太多负担,读起来也可以有快速收获。</p> <p>这便是&ldquo;组件库物语&rdquo;。怪怪的名字,想不到更好的了,随它去。</p> <h3> 定义目标,以小为始</h3> <p>其实在很久之前就有了关于制作&ldquo;Social&rdquo;库的想法。在 iOS 库上架后不久,便开始进行非正式的规划工作,只是工作和个人要务一件接一件,期间又试验性地制作了一款&ldquo;Impart&rdquo;库,翻译了 Design Systems 全书,等等;直到近一两个月才开始着手。</p> <p>最初那些&ldquo;非正式的规划工作&rdquo;目标并不清晰,方向比较泛泛,一会想复制一个 Facebook 出来,一会觉得 Ins 可能会更好,或是聚焦在聊天工具上也不坏?往复许久也没想清这个库<strong>究竟用来做什么</strong>;相比于之前的 iOS 库,又该实现怎样的<strong>特定价值</strong>。</p> <p><img alt="" src="/sites/default/files/images/201811/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-11-30%20%E4%B8%8B%E5%8D%883_41_05.png" style="width: 600px; height: 363px;border:none;" /></p> <p class="figure-caption">聚焦于系统框架的 <a href="http://beforweb.com/node/994" target="_blank">iOS 库</a></p> <p>这种不清晰带来的副作用,就是在我自己的头脑中形成了&ldquo;这个库非常庞大非常难做&rdquo;的预判,进而潜移默化地造成了行动上的抵触 - 每有愿望开启这个项目时,便不由自主地找到另一件&ldquo;更优先更紧急&rdquo;的事项来逃避开。</p> <p>想想看,无论工作还是生活中,如此的心理状态和行为模式恐怕并不少见。</p> <p>今年秋天,在公众号完成了《设计体系》的全书译文之后,一方面希望借着翻译工作的余热,将期间学到的一些思路方法运用到实际当中,做些什么出来;另一方面,WireframeKit 系列也确实该上新了。综合这两方面原因,终于决定正式开动&ldquo;Social&rdquo;库。</p> <h4> 目标与范围</h4> <p>在缺失目标的状态下无法实际推动项目;既然决定正式启动,第一步还是要将目标定义清晰。WireframeKit 系列的受众是包括我个人在内的产品/交互设计师,用户价值体现在能否<strong>帮助受众快速实现中/高保真线框原型</strong>。&ldquo;快速&rdquo;的概念本身又包含多个层次:过去的 iOS 库提供了全面、灵活的系统级组件框架,便于快速根据实际需求进行改造和复用;而诸如&ldquo;Social&rdquo;这样聚焦于特定产品领域的库,则应该<strong>通过对典型模式的封装,进一步减轻甚至免除改造组件的成本</strong>,实现更快的使用速度。</p> <p>而对于我们这些设计师来说,日常相关项目中最为需要的,仍是我们身边的市场当中那些<strong>最为主流的、久经验证的社交类产品所提供的典型设计模式</strong>。因此,基于这些我们所熟知的真实产品进行提炼就成为必然。</p> <p>省略掉繁琐的细节分析,大致的目标梳理思路便是如此。</p> <p><img alt="" src="/sites/default/files/images/201811/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-11-30%20%E4%B8%8B%E5%8D%883_46_23.png" style="width: 600px; height: 363px;border:none;" /></p> <p class="figure-caption">&ldquo;Social&rdquo;库提供的社交类界面范例</p> <h4> 以小为始,进入巡航</h4> <p>厘清目标和项目范围,对于行动的认知便不像之前那样宽泛和沉重了。两点关键行动:</p> <ol> <li> <strong>收集、分析相关产品,提炼设计模式</strong>。也就是通常所说的&ldquo;清查&rdquo;工作;相关思路和方法在《设计体系》一书中也有比较详细的介绍。</li> <li> <strong>组件库的实际制作</strong>。最为漫长的过程,需要在每一次的执行过程中保持细心和聚焦的心智状态,并且考验毅力。</li> </ol> <p>在清查工作期间,我每一次只给自己设定一个&ldquo;小目标&rdquo;,譬如今天完成对微博所有关键页面的截图和汇总,然后休息,并给自己一个大大的赞;明天完成知乎,同样的工作量和自我正向回馈;如此往复。<strong>当你把一件在认知当中较为庞大的事项这样细分到便于执行的颗粒度,事情就会变得非常容易推进</strong>。</p> <p><img alt="" src="/sites/default/files/images/201811/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-11-30%20%E4%B8%8B%E5%8D%883_42_33.png" style="width: 600px; height: 363px;border:none;" /></p> <p class="figure-caption">界面清查</p> <p>这里为各位介绍一个非常好用的移动端截屏工具,Picsew。自动拼接及相关的自动化功能都非常有效和易用。</p> <p>同理,对于最为关键的实际制作过程,依然要进行充分地拆解。先不花太多时间考虑框架整体层面的架构,而是从最容易入手的方面做起,譬如今天完成几个图标,明天完成一两个导航栏,接下来是信息流当中用户信息组件的制作,等等。有心力时便多做几个小物件,累了就放下。<strong>首先让自己动起来,从&ldquo;抵触&rdquo;进入&ldquo;开动&rdquo;,保持较小的、较容易完成的工作量,直到自己开始上瘾,如此逐渐进入巡航状态,整个项目会自然而然地进入正轨</strong>。</p> <p>当然,在进入巡航状态之后,怎样依靠正确的方法及毅力进行维系和修正则成为了关键;这又是另外的话题了。</p> <h4> 结语</h4> <p>关于定义目标和以小为始,大体便是如此;无论是组件库的规划和制作,还是实际产品,无不是同样的道理。有时我们需要自上而下进行规划和执行,有时则需要自下而上地首先找到节奏,进入状态,再进行修正及全局把控。</p> <p>或许更像是随笔,而非细节指南。随它去,最重要的部分都在这里了。</p> <p>下次物语聊些什么呢。再从之前的记录当中选选看好了。希望这样的内容可以为各位的相关工作带来一些参考。</p> <h4> WireframeKit 获取方式</h4> <p>WireframeKit for Sketch 是付费组件库系列,目前仅在 Beforweb 微店提供:</p> <ul> <li> <strong>Social</strong>:129元 ,附赠:</p> <p>&nbsp;</p> <p>&nbsp;</p> <ul> <li> C7210版《设计体系》全书译文(PDF)。</li> <li> Sketch 常用中文数据源。</li> </ul> </li> <li> <strong>iOS 12</strong>:99元</li> <li> <strong>Social + iOS 12 超值套装</strong>:仅需199元</li> </ul> <p>请通过以下小程序码访问微店获取(系统通常随机附送1至88元不等的红包)。付费后,你将得到下载链接及密码。</p> <p><img alt="" src="/sites/default/files/images/201808/WechatIMG57.jpeg" style="width: 300px; height: 300px;border:none;" /></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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/226" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WireframeKit</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/227" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch组件库</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/164" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/234" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计体系</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/235" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Design System</a></li></ul> Fri, 30 Nov 2018 12:01:00 +0000 C7210 1004 at http://www.beforweb.com http://www.beforweb.com/node/1004#comments 全新“Social”组件库上架,附赠《设计体系》全书译文 http://www.beforweb.com/node/1003 <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="http://www.beforweb.com/sites/default/files/article-thumbs/logo-icon-sketch-wireframekit-beforweb.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>Hello 大家,WireframeKit for Sketch 系列的第三款组件库&ldquo;Social&rdquo;正式发布上架。</p> <p>不同于系统原生风格的&ldquo;iOS&rdquo;库,以及概念设计风格的&ldquo;Impart&rdquo;库,这次的&ldquo;Social&rdquo;完全基于真实产品打造,聚焦于主流的社交类设计模式,提炼了超过180种界面组件,110余个常用图标,13个典型页面范例及详细的组件替换清单,以期快速满足实战需求,减免改造的负担,并提升参考学习价值。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201811/%E7%BA%B5%E8%A7%88.png" style="width: 600px; height: 363px;border:none;" /></p> <p>&ldquo;Social&rdquo;库同时还包含两款超值赠品:</p> <ul> <li> <strong>《设计体系》C7210版全书译文(PDF)</strong>。今年夏天翻译了 Design Systems 一书,并在公众号连载10余期,期间得到很多朋友的支持;我自己同样学到很多,特别是在关键任务分析和设计模式清查等方面,诸多方法都运用到了&ldquo;Social&rdquo;库的制作当中。</li> <li> <strong>自制 Sketch 常用中文数据源</strong>。Sketch 52 带来了 Data 数据源功能,便于随机生成范例内容;我自制了一些常用中文数据,包括中国主要省份/城市名,中文段落内容等等;&ldquo;Social&rdquo;库中的段落演示基本都来自于这些文件,你可以很方便地通过 Data 功能进行自动替换。</li> </ul> <p>新库的制作过程对我而言也收获颇丰,架构设计及细节中的实现方法相比之前两个库也有较大优化;得益于 Sketch 近几次大更新带来的实用功能,譬如 Symbols 样式定制、Data 等等,新库的制作与使用方式都更加灵活便利;计划接下来做几篇相关的总结分享。</p> <p>此外,一如既往:</p> <ul> <li> 组件库可能会进行不定期的更新;除非另行通知,否则更新无需另付费。</li> <li> 同时提供&ldquo;Social&rdquo;与&ldquo;iOS&rdquo;库的超值套装供你选择;搭配使用更灵活。</li> </ul> <p>事情大体这样;接下来是关于&ldquo;Social&rdquo;库的更多图文介绍,以及具体的获取方式。</p> <h3> 关于&ldquo;Social&rdquo;库</h3> <p><img alt="" src="/sites/default/files/images/201811/%E5%85%AC%E4%BC%97%E5%8F%B7%E4%B8%8E%E5%A4%B4%E6%9D%A1.png" style="width: 600px; height: 338px;" /></p> <p>WireframeKit for Sketch - Social,C7210自制线框风格 Sketch 组件库,聚焦于社交类产品/模块的设计需求,为提升线框原型的质效与保真度而精心打造。</p> <p>&ldquo;Social&rdquo;库共提供12种颜色定义,52种样式定义,504种文字风格定义,33类共计183个界面组件,112个常用图标,13个典型社交界面范例与组件替换指南。</p> <p><img alt="" src="/sites/default/files/images/201811/%E6%A0%B7%E5%BC%8F.png" style="width: 600px; height: 344px;" /></p> <p class="figure-caption">颜色、样式与文字风格定义</p> <p><img alt="" src="/sites/default/files/images/201811/%E7%BB%84%E4%BB%B6%E7%BA%B5%E8%A7%88.png" style="width: 600px; height: 344px;" /></p> <p class="figure-caption">组件定义</p> <p><img alt="" src="/sites/default/files/images/201811/%E8%8C%83%E4%BE%8B%E7%BA%B5%E8%A7%88.png" style="width: 600px; height: 345px;" /></p> <p class="figure-caption">典型界面范例</p> <p>所有元素即拖即用,适于快速创建中/高保真线框原型。组件的可配置项丰富,具备良好的灵活性和扩展性,可与 Data 等新功能完美配合,快速定制内容与样式,并能自适应各类常见的设备规格。</p> <p><img alt="" src="/sites/default/files/images/201811/%E9%85%8D%E7%BD%AE-1.png" style="width: 600px; height: 344px;" /></p> <p class="figure-caption">Feed 细节设置</p> <p><img alt="" src="/sites/default/files/images/201811/%E9%85%8D%E7%BD%AE-2.png" style="width: 600px; height: 344px;" /></p> <p class="figure-caption">列表细节设置</p> <p><img alt="" src="/sites/default/files/images/201811/%E7%BB%84%E4%BB%B6%E7%BB%86%E8%8A%82-1.png" style="width: 600px; height: 344px;" /></p> <p class="figure-caption">更多组件细节</p> <p><img alt="" src="/sites/default/files/images/201811/%E7%BB%84%E4%BB%B6%E7%BB%86%E8%8A%82-2.png" style="width: 600px; height: 344px;" /></p> <p class="figure-caption">更多组件细节</p> <p>&ldquo;Social&rdquo;库针对典型界面范例提供了详细的组件替换指南,使你对可选组件的特征与调用路径一目了然。</p> <p><img alt="" src="/sites/default/files/images/201811/Doc.png" style="width: 600px; height: 345px;" /></p> <p>&ldquo;Social&rdquo;基于 <a href="http://beforweb.com/node/994" target="_blank">WireframeKit &ldquo;iOS 12&rdquo;</a>打造,两者的颜色、样式及文字风格定义完全通用,组件命名各自独立,搭配使用可以满足更加丰富多样的设计需求。</p> <h3> 获取方式</h3> <p>WireframeKit for Sketch 是付费组件库系列,目前仅在 Beforweb 微店提供:</p> <ul> <li> <strong>Social</strong>:129元 ,附赠:</p> <ul> <li> C7210版《设计体系》全书译文(PDF)。</li> <li> Sketch 常用中文数据源。</li> </ul> </li> <li> <strong>iOS 12</strong>:99元</li> <li> <strong>Social + iOS 12 超值套装</strong>:仅需199元</li> </ul> <p>请通过以下小程序码访问微店获取(系统通常随机附送1至88元不等的红包)。付费后,你将得到下载链接及密码。</p> <p><img alt="" src="/sites/default/files/images/201808/WechatIMG57.jpeg" style="width: 300px; height: 300px;border:none;" /></p> <p>再次感谢各位新老朋友的支持。一如既往,希望 WireframeKit 能为你的线框原型设计工作带来质量与效能的强劲助推~</p> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 450px; height: 116px;border: none;" /></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="/news" 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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/226" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WireframeKit</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/227" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch组件库</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/164" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sketch</a></li></ul> Mon, 26 Nov 2018 10:00:00 +0000 C7210 1003 at http://www.beforweb.com http://www.beforweb.com/node/1003#comments 关于设计保真度的难题 http://www.beforweb.com/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="http://www.beforweb.com/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 http://www.beforweb.com http://www.beforweb.com/node/964#comments 十佳应用的故事(1) - 想法、产品定义与交互设计 http://www.beforweb.com/node/243 <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="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-app-store-iphone-ios-application-idea-design-development-marketing-success.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>眼看着进入8月下旬,天气相比前面几周有所凉爽;所谓凉爽,也只是高温从40来度降到36、7度的样子。</p> <p>刚刚过去的几天怕是要成为人生回忆当中的经典之一了。依次看掉Metallica和Korn的现场,回想起来,有好多像梦一样不那么真实的情景在里面:夏季的夜晚、暴躁的吉他音墙、灯光、嘶喊、摇摆、泪水、满眼的黑T恤和金属礼、散场后打不到车而坐在路灯下抽烟到半夜...然而,如果要我判断,是现在这样安静的坐在屋里吹着空调做博客更像真实的存在,还是那些回忆里的东西更像,我真的难以回答。</p> <p>想吃曼妥思了。说正经的。本周及接下来一周的话题,原文来自Jeremy Olson,北卡罗来纳州大学生一枚,<a href="https://itunes.apple.com/us/app/languages/id565108517?mt=8">Languages</a>的作者。关于产品是如何从想法概念开始最终走向市场,他所谈到的一些经验和实践方法,值得借鉴。</p> <p>这里进入译文。之所以写这篇文章,是因为我相信,相比于失败,我们能从成功当中学到更多。爱迪生在发明电灯泡的过程中经历了数千次的失败,如果我们仍然要基于各种试验和错误来重新发明灯泡,那简直是愚蠢的。怎样从成功的产品中汲取经验?如今我们有了完整的实践模型。</p> <p>移动应用产业当中有非常多的闪光点。虽然我很想说我的成功源于自己的才能,但事实并非如此。经过对那些在App Store当中获得成功的独立开发者的反复学习,我掌握了一些用来获取成功的基本原则和实践方法;我也希望这篇文章可以帮助各位读者学到同样的东西。</p> <!--break--><h3> 大想法</h3> <p>我的第一个应用,Grades,非常成功。媒体喜欢它,用户喜欢它,苹果也喜欢它。只是有一个问题:它不能帮我赚钱。当然,它还是可以带来些收入的,但不管怎么说,Grades还是太小众了,它所面向的就是那些需要在全学年当中跟踪自己学分的大学生。</p> <p><img alt="01-grades-top-10-ios-app-idea-design.jpg" src="/sites/default/files/images/201308-2/01-grades-top-10-ios-app-idea-design.jpg" /></p> <p>如果想要继续制作售价低廉的应用,那么我们的下一个产品必须足够&ldquo;大&rdquo;,<strong>它需要对几乎所有人都具有吸引力</strong>。</p> <p>当Sonico Mobile的创始人Alex Marktl来找我们合作一款离线翻译应用时,我们的机会来了。这是一个经过检验的市场,Sonico的iTranslate应用拥有超过3千万的用户,而且这个市场当中有一个巨大的缺口,那就是缺少一款价格合理、不需要网络连接的翻译应用。</p> <p>我们了解了一些用户对于iTranslate的反馈,研究了同类产品的竞争状况,然后我们非常确信,这块市场当中的机遇是相当巨大的。此外,我的四人团队对于教育和语言方面的产品真的很有热情。市场、机遇、热情都在眼前,简直是完美的状况。</p> <p>我们通过Skype聊了几轮,讨论了具体的合作协议,然后准备开工。</p> <p>(捣乱分子:关于产品的想法是至关重要的。新的Languages应用与之前的Grades相比,虽然吸引到的媒体报道的规模是相似的,但Languages在一天当中带来的收入抵得上Grades两年的水平!)</p> <h3> 对产品进行定义</h3> <p>虽然我很想直接开始画线框图,不过我们还是以研究作为起点,首先对新产品需要解决的问题进行定义。</p> <h4> 竞品纵览</h4> <p><a href="/sites/default/files/images/201308-2/02-competitors-large-top-10-ios-app-idea-design.png" rel="lightbox"><img alt="02-competitors-large-top-10-ios-app-idea-design.png" src="/sites/default/files/images/201308-2/02-competitors-large-top-10-ios-app-idea-design.png" style="height: 330px; width: 500px;" /></a></p> <p class="figure-caption">点击查看大图</p> <p>App Store非常伟大的一点在于,它是世界上少数几个能让你轻松找到潜在竞争对手相关信息的应用市场之一。简单的搜索一下,看看竞品的功能、排名、用户评价及推广方式,看看有多少用户愿意付费,这些都是帮你深入了解目标市场的绝佳方法。诸如<a href="http://www.appannie.com/">App Annie</a>这样的网站甚至可以帮你分析竞品的排名状况。</p> <p>我们选取了一打最棒的竞品,分析它们的优势和不足,以及我们可以怎样击败它们。我们了解到,虽然市面上确实有一些离线翻译应用,但它们要么设计的很差劲,要么售价太贵。我们知道自己可以做的更好。</p> <div class="embed"><article id="node-286" class="node node-related-books" about="/node/286" 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/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23"><img alt="放飞App:移动产品经理实战指南" src="http://beforweb.com/sites/default/files/images/products/31.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">放飞App:移动产品经理实战指南</a></h4> <p><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">本书讲述如何构建出能在Apple Store中引人注目的iPhone和iPad应用。从全局介绍这一构建过程中的每一步,包括预算成本、挑选开发人员并组织最佳团队、搭建工作流程、推销和改进自己的应用产品...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> 用户体验测绘</h4> <p>对产品进行定义的时候,我们聚焦于思考怎样帮助人们解决生活当中遇到的一些实际问题,而不是凭空列出一堆很酷的功能。我们将这个过程叫做&ldquo;用户体验测绘&rdquo;。测绘工作通常需要花上1到3天来进行,期间,我们会:</p> <ul> <li> 分析用户在不使用移动应用的情况下的日常行为经验,发现他们在实际生活中遇到的问题。</li> <li> 进行头脑风暴,设想出一种能够帮助人们解决这些问题的最理想化的应用软件。</li> <li> 选择需要聚焦的核心问题,确定哪些功能在实际产品的第一版当中是可行的。</li> </ul> <h5> 第1步:定义用户角色</h5> <p>作为设计师,我们需要具有充分的同理心,去尽可能地了解用户当前的感受以及他们的思维进程(推荐阅读:<a href="http://beforweb.com/node/181">八个小方法,帮你成为更具同理心的设计师</a>)。走出门去,与人们进行交谈,这可以帮你增长不少见解;不过在眼前的项目当中,由于我们对于翻译类产品已经非常熟悉了,所以在这个阶段里我们并没有花时间和潜在用户进行直接对话。</p> <p><a href="/sites/default/files/images/201308-2/03-l-users-top-10-ios-app-idea-design.png" rel="lightbox"><img alt="03-l-users-top-10-ios-app-idea-design.png" src="/sites/default/files/images/201308-2/03-l-users-top-10-ios-app-idea-design.png" style="width: 500px;" /></a></p> <p class="figure-caption">点击查看大图</p> <p>取而代之的,我们直接开始就潜在用户的人格特征进行头脑风暴。</p> <p>接下来,我们选择了那些我们最需要关注的目标用户特征,并将它们写入用户角色当中。</p> <p><a href="/sites/default/files/images/201308-2/04-l-personas-top-10-ios-app-idea-design.png" rel="lightbox"><img alt="04-l-personas-top-10-ios-app-idea-design.png" src="/sites/default/files/images/201308-2/04-l-personas-top-10-ios-app-idea-design.png" style="width: 500px;" /></a></p> <p class="figure-caption">点击查看大图</p> <p>用户角色是一种包含了目标用户群人格特征的虚构人物。虽然其本身是虚构的,但用户角色应该基于真人,并且应该准确的抽象出真实用户的特质。没有人物进行参考对照,用户体验测绘工作将很难进行。</p> <p>在我们的用户角色中,Emily是一名21岁的大学生,在埃默里大学(Emory University)学习法语。她在语言方面没什么特殊的天分,但很喜欢法语,希望自己能试着读懂法文著作,而且盼望着到法国留学。</p> <p>我们一共创建了3个用户角色,他们涵盖了目标用户群当中大部分的关键人格特征:Emily,学生;Johann,欧洲商旅人士(后来的事实证明了我们的推测:应用销售额的70%都来自美国本土以外的用户);Paul,搞IT的,爱好学习新语言。</p> <h5> 第2步:描绘用户在没有移动应用帮助下的行为与体验</h5> <p><a href="/sites/default/files/images/201308-2/05-personas2-top-10-ios-app-idea-design.png" rel="lightbox"><img alt="05-personas2-top-10-ios-app-idea-design.png" src="/sites/default/files/images/201308-2/05-personas2-top-10-ios-app-idea-design.png" style="height: 322px; width: 500px;" /></a></p> <p class="figure-caption">点击查看大图</p> <p>为了描绘出用户的现状,我们挑选出了与&ldquo;翻译&rdquo;相关的三个最关键的体验模式&mdash;&mdash;个人翻译、社会化翻译和行程当中的翻译。</p> <p>接下来,我们对用户角色在这些体验当中的行为及可能遇到的问题进行了头脑风暴。举个例子,对于第一类,个人翻译,Johann会通过不同的语言向他的客户们发邮件,期间遇到不确定的单词时,他需要拿出词典查找。</p> <h5> 第3步:讨论最理想的辅助方式</h5> <p>我们描绘出了目标用户在没有应用辅助的情况下是怎样完成任务的,接下来就需要对我们的应用可以怎样辅助他们完成这些任务进行头脑风暴了。这个过程中我们不会去考虑盈利、预算、时间节点等方面的因素,焦点完全集中在那些帮用户解决实际问题的创意设想上面。</p> <h5> 第4步:做减法</h5> <p><img alt="06-finally-top-10-ios-app-idea-design.jpg" src="/sites/default/files/images/201308-2/06-finally-top-10-ios-app-idea-design.jpg" /></p> <p>这个环节是非常残酷的。我们之前已经得到了一大堆很酷的功能设想,而现在则需要砍掉当中的绝大一部分。好的设计,更多的是来自于减法,而非加法。你要找到那些有待解决的最核心的问题,在产品的第一版当中,将全部功能和设计都聚焦在这类问题上,而将不相关的、非本质的、拍脑袋想出来的东西全部移除。</p> <p>&ldquo;抛光&rdquo;一款应用需要花费大量的时间。所以,如果一上来的功能范围过于宽泛,你的应用就很难聚焦,而你几乎没办法使当中的任何一个功能达到完美的体验状态。</p> <p><a href="/sites/default/files/images/201308-2/07-contexts-top-10-ios-app-idea-design.png" rel="lightbox"><img alt="07-contexts-top-10-ios-app-idea-design.png" src="/sites/default/files/images/201308-2/07-contexts-top-10-ios-app-idea-design.png" style="height: 324px; width: 500px;" /></a></p> <p class="figure-caption">点击查看大图</p> <p>到这里,我们就得到了具有一定试验性的1.0版本的定义。现在我们知道这个应用究竟是关于什么的了。你可以到我们的博客当中了解更多关<a href="http://tapity.com/iphone-app-design/user-experience-mapping-strategic-design-part-3/">于用户体验测绘方面的信息</a>。</p> <div class="embed"><article id="node-264" class="node node-related-books" about="/node/264" 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/B0052HZC54/?_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/08.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_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/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书简述了iPhone硬件和应用风格,逐步介绍了如何进行前期的用户研究和竞争性分析,以及提升iPhone应用用户界面和视觉设计的最佳实践。全书通过13个案例分析展示了知名设计师的实践过程,为读者了解应用背后的设计过程提供了第一手资料...</a></p> </div> </div> <p>&nbsp;</p> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> 产品定义</h4> <p>经过了用户体验测绘阶段的工作,现在我们可以给出关于产品本质的定义声明了:</p> <blockquote><p>一个可以帮助用户迅速查找单词及其定义的多语种离线字典,售价99美分。</p> </blockquote> <p>这份声明让我们在接下来的设计开发工作当中能够保持良好的聚焦。它就像试纸一样,帮助我们对接下来有可能产生的任何新想法进行评判;如果新设想新功能有悖于这份定义声明,那么它至少不会出现在1.0版本当中。</p> <h3> 草图和交互原型</h3> <p>到了将我们抽象的想法塑造成具体蓝图的时候了。</p> <p>我们首先会把若干界面之间的流程关系大致梳理出来。如今,在类似的阶段当中,我会以草图的形式为主,并通过<a href="http://popapp.in/">POP</a>这样的工具将草图分享给不在本地的团队成员或客户;不过在当时,我们主要是通过<a href="http://www.omnigroup.com/products/omnigraffle/">OmniGraffle</a>来创建粗交互原型的。</p> <h4> 别让我思考</h4> <p>在这个阶段,我们的目标是通过符合直觉、操作简便的界面来帮助用户解决问题。本质上讲,我们的工作就是避免用户思考界面,让他们将注意力集中在内容上面。</p> <p>这可是个大话题,Steve Krug曾经写过一本经典的书,<a href="http://www.sensible.com/dmmt.html">Don&#39;t Make Me Think</a>,如果你还没读过的话,现在是时候了;很棒的一本书。</p> <h4> 别让我做事</h4> <p><img alt="08-mockup-top-10-ios-app-idea-design.jpg" src="/sites/default/files/images/201308-2/08-mockup-top-10-ios-app-idea-design.jpg" /></p> <p>人们不喜欢做事,所以我们总是尽最大可能避免他们进行不必要的操作,或是被不相关的信息所干扰。上图当中的线框图展示了我们是怎样完成这个目标的。我们希望用户查找单词的过程尽量简短,所以在用户输入单词关键字时,与其他多数应用提供搜索建议的做法有所不同,我们会直接将对应这些搜索建议的单词翻译展示出来。我们还找到了一种解决语言切换问题的方法,也就是允许用户输入任何一种语言的单词,然后在界面左侧显示某种语言的翻译结果,在右侧显示另外一种语言的结果。</p> <h4> 像人类一样思考</h4> <p><img alt="09-dictionary-shelf-top-10-ios-app-idea-design.png" src="/sites/default/files/images/201308-2/09-dictionary-shelf-top-10-ios-app-idea-design.png" /></p> <p class="figure-caption">我们希望我们的词典外观能给用户带来真实的感觉</p> <p>因为这是一款离线翻译应用,所以我们希望能给用户带来一种强烈的印象,就是这些词典是真实存在于他们手机当中的。我们希望词典给用户的感觉并不是云端数据库当中的一堆数据,而是像真实的词典那样可以让他们随时随处打开使用。我们使用了摆满词典的书架形象作为隐喻,与用户进行快速直接的沟通。</p> <p>随着触控界面的不断成熟,用户其实不再那么需要拟物化的界面来了解外观与功能之间的关联了。不过有时,仿真效果的隐喻确实可以提升用户的期望,带来一些纯数码界面所无法产生的使用体验。</p> <h4> 持续探索</h4> <p>线框图在外观上有些丑陋,因为这个阶段不需要任何视觉设计方面的因素介入。我们不会直接打开Photoshop创建界面,因为相对丑陋的草图或线框图可以让我们聚焦在交互方面的问题上,使我们可以更快速的探索大量的想法。</p> <p>随手将想法画出来只需要几秒钟,我们对这个阶段的工作甚至乐此不疲了。想法越多越好,我们要把每块石头都翻过来,寻找任何一个值得仔细推敲的想法。</p> <p>有时你会发现,折腾来折腾去,最早的想法却是最好的,但要发现和证明这一点,你必须尝试过其他的方式才可以。我和一些设计师进行过相关的交流&mdash;&mdash;他们做出的应用都是我相当喜欢的&mdash;&mdash;大家有一点共识:通往成功设计方案的秘诀,不是&ldquo;天才&rdquo;,而是持续不断的探索。他们在找到一个不错的解决方案之后不会驻足不前,他们会一直前行,直到尝试过能够想到的全部方案<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-277" class="node node-related-books" about="/node/277" 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/B00AX1MC3Y/?_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/21.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/原型设计-实践者指南-沃菲尔/dp/B00AX1MC3Y/?_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/B00AX1MC3Y/?_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> <p>待续:<a href="http://beforweb.com/node/248">十佳应用的故事(2) - 视觉设计与开发</a></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></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/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/54" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户研究</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/88" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户角色</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/76" typeof="skos:Concept" property="rdfs:label skos:prefLabel">App Store</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 18 Aug 2013 08:16:31 +0000 C7210 243 at http://www.beforweb.com http://www.beforweb.com/node/243#comments UX基础 - OmniGraffle新手指南 http://www.beforweb.com/node/202 <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="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-omnigraffle-wireframe-design-prototype-document-tool-beginner-guide.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>我发现一事儿,就是最近这些年,每到入职一个新公司的时候,听得东西往往会比多数时候听得更重更金属些,此时以Slipknot和大敌为代表,所爱的东西也会更黑一些,激烈而凶猛的黑,并非Grunge所带来的那类绝望而压抑的黑。</p> <p>话说这是一个难得的不用把工作带回来做的周末,加之昨天又过了个酒精+尼古丁+Rock N&#39; Roll的周五放纵之夜,今天整个人有点倦怠;天气也阴晦着,毫无违和感。最近也许会做几篇与OmniGraffle相关的话题,希望能给用的着的朋友们带来些参考;今天是一篇很基础的入门小文。走起吧。</p> <p>这里进入译文。OmniGraffle是一款相当全面的工具,用途很广泛,不过今天我们主要侧重在了解怎样使用它来制作线框图。我(英文原文作者)个人在这方面尝试过很多软件,坦诚的说,没有一款是真正完美的,包括OmniGraffle,但它在综合能力及效率方面的表现确实是最让我满意的。</p> <p>不过首先,我还是想提及OmniGraffle的两点不足。一是它并不擅长于生成完美的可交互原型,当然,你还是能够制作可点击的界面原型的,譬如在某些情况下显示或隐藏某些图层,或是切换界面等等;另外一点就是这款软件只能运行在Mac当中。</p> <!--break--><p>还是那句话,没有哪个工具是真正完美的,忽略这两点缺陷(严格的说第二点不能算作缺陷),OmniGraffle真的是一款很棒的线框图工具。接下来,我将和各位一起对OmniGraffle的强大功能进行一下纵览,了解怎样通过它制作一流的线框图。</p> <h3> 知识点</h3> <p>我们将在本文中对以下这些界面元素进行了解:</p> <ul> <li> 画布与图层侧边栏(Canvas and Layers sidebar)</li> <li> 模板窗口(Stencils Window)</li> <li> 检查器(The Inspector)</p> <p>&nbsp;</p> <p>&nbsp;</p> <ul> <li> 样式编辑器(Style Editors)</p> <p>&nbsp;</p> <p>&nbsp;</p> <ul> <li> 填充(Fill)</li> <li> 线条(Outline)</li> <li> 阴影(Shadow)</li> <li> 图片(Image)</li> <li> 文字(Text)</li> </ul> </li> <li> 对齐/属性(Alignment/Properties)</li> <li> 交互(Interactivity)</li> </ul> </li> </ul> <h3> 画布与图层(Canvases and Layers)</h3> <p>画布与图层侧边栏用来呈现文档及其内容的组织结构。我们可以在这里查看每个画布当中的内容缩略,还有它们之间的层级结构,这使得我们能够更加轻松的管理和组织文档。</p> <p><img alt="01-Canvas-Layers-Sidebars-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/01-Canvas-Layers-Sidebars-beginner-omnigraffle-wireframe.png" /></p> <p>我们可以在画布中创建线框图,画布能够承载我们所需的任何类型的内容。我通常会先创建一个&ldquo;封面&rdquo;页、一些流程图,还有一些关于用户的信息或是我需要解决的问题。这之后才进入实际的线框图制作阶段。</p> <p><img alt="02-Canvas-Layers-Sidebars-beginner-omnigraffle-wireframe.jpg" src="/sites/default/files/images/201305-2/02-Canvas-Layers-Sidebars-beginner-omnigraffle-wireframe.jpg" /></p> <p>而图层则用于在画布当中组织内容。如果你熟悉Photoshop或Illustrator,那么对图层的概念应该很了解了。在图层中,你可以移动和组织各类元素;而调整不同图层的顺序则能够帮助你按照自己所需要的方式组织页面结构,就像我们在Photoshop当中所做的那样。</p> <p><img alt="03-Canvas-Layers-Sidebars-beginner-omnigraffle-wireframe.jpg" src="/sites/default/files/images/201305-2/03-Canvas-Layers-Sidebars-beginner-omnigraffle-wireframe.jpg" /></p> <p>我们所创建的多数界面中都会包含例如导航栏、页脚、背景这类不会随界面而发生变化的元素。这时我们就需要使用&ldquo;共享图层(shared layer)&rdquo;了,这种图层可以帮助我们轻松的创建出能够复用于多个画布的元素;将来任何针对共享图层所进行的修改也会直接作用于那些使用了该图层的画布之上。</p> <p>有一点需要注意,共享图层中的元素在任何画布当中都会保持在固定的位置上,譬如导航栏永远会在导航栏的位置。如果你需要的是更加灵活的可复用元素,那么后文中将会介绍到的&ldquo;共享对象(shared object)&rdquo;才是更合适的选择。</p> <p><img alt="04-Canvas-Layers-Sidebars-beginner-omnigraffle-wireframe.jpg" src="/sites/default/files/images/201305-2/04-Canvas-Layers-Sidebars-beginner-omnigraffle-wireframe.jpg" /></p> <h3> 形状与文字(Shapes and Text)</h3> <h4> 形状</h4> <p>在创建线框图的过程中,各种形状是我们最常用到的工具。我通常会用到的都是那些最基本的形状,例如矩形、圆形和三角形。相比繁琐复杂的视觉表现形式,使用这些基本的形状来创建的页面布局通常可以更直观有效的展示出交互设计阶段所需表达的重点。</p> <p><img alt="05-shape-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/05-shape-beginner-omnigraffle-wireframe.png" /></p> <p>我们可以根据实际需要来调整形状的各种属性。</p> <h5> 填充色</h5> <p><img alt="06-shape-fill-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/06-shape-fill-beginner-omnigraffle-wireframe.png" /></p> <h5> 形状和轮廓线条(包括线条的颜色、尺寸等等)</h5> <p><img alt="07-shape-outline-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/07-shape-outline-beginner-omnigraffle-wireframe.png" /></p> <h5> 阴影</h5> <p><img alt="08-shape-shadow-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/08-shape-shadow-beginner-omnigraffle-wireframe.png" /></p> <h5> 几何属性</h5> <p><img alt="09-Shape-Properties-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/09-Shape-Properties-beginner-omnigraffle-wireframe.png" /></p> <p>你还可以将常用的形状包括它的各种订制化属性打包添加到偏好当中,以便反复使用。要添加新的偏好形状,你需要在页面中选中某个形状,然后选择形状(Shape)菜单中的&ldquo;将当前选项添加至喜爱的样式(Add Current Selection to Favorite Styles)&rdquo;。</p> <p><img alt="10-favorate-Shape-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/10-favorate-Shape-beginner-omnigraffle-wireframe.png" /></p> <h4> 文字</h4> <p>你可以在形状内部添加文字,并以某种方式和形状本身保持对齐。添加之后,文字就会成为形状自身的一部分,跟随形状一起联动。</p> <p><img alt="11-Text-Within-Shape-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/11-Text-Within-Shape-beginner-omnigraffle-wireframe.png" /></p> <p>对于形状内部的文字,OmniGraffle提供了大量的工具,用于调整行间距、字间距、对齐模式、内边距等属性。</p> <p><img alt="13-Text-edit-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/13-Text-edit-beginner-omnigraffle-wireframe.png" /></p> <p>你同样可以添加独立的文字,无论其在视觉形式上处于形状范围之内或之外。</p> <p><img alt="12-Text-outside-Shape-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/12-Text-outside-Shape-beginner-omnigraffle-wireframe.png" /></p> <h3> 模板与主题(Stencils and Templates)</h3> <p>&ldquo;模板&rdquo;与&ldquo;主题&rdquo;是创建和使用可复用元素的极佳工具。主题可以帮你建立起一套已经包含了各种相关预设的文档,例如集体研讨、组织图表、空间计划等。我在日常的工作中有自己的一套专用主题,你也可以创建属于自己的主题。</p> <p>模板则是一系列有着预置样式的界面元素,例如按钮、文字、图标等等。</p> <p><img alt="14-Template-Chooser-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/14-Template-Chooser-beginner-omnigraffle-wireframe.png" /></p> <p>你同样可以修改已有的模板和主题。在右侧的模板面板中选中一套模板,然后点击模板面板上的齿轮按钮,在菜单中选择&ldquo;编辑模板&rdquo;,即可调出模板编辑界面,你可以在里面像处理其他OmniGraffle文档一样来编辑模板中的元素。对于主题来说也是同理。</p> <p><a class="lightbox" href="/sites/default/files/images/201305-2/15-Stencil-Edit-beginner-omnigraffle-wireframe.png" rel="lightbox"><img alt="15-Stencil-Edit-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/15-Stencil-Edit-beginner-omnigraffle-wireframe.png" style="height: 436px; width: 600px;" /></a></p> <p>网上有很多模板资源供你下载,我常用到的一些都来自于Graffletopia.com,例如移动设备界面元素模板等。推荐你看看这些模板:</p> <ul> <li> <a href="http://konigi.com/tools/omnigraffle-wireframe-stencils">Konigi</a></li> <li> <a href="https://github.com/talltroym/Twitter-Bootstrap-Omnigraffle-Stencil">Twitter Bootstrap</a></li> <li> <a href="http://www.zurb.com/playground/foundation-stencil-sets">Foundation</a></li> </ul> <p>通过这些模板,你可以快速创建出很漂亮的线框原型。</p> <p><img alt="16-Stencils-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/16-Stencils-beginner-omnigraffle-wireframe.png" /></p> <h3> 共享对象(Shared Objects)</h3> <p>正如前面提到的,在多数时候,共享图层是足够满足需求的,但有时你确实需要一些属性相同但在布局位置上有所区别的界面元素。曾经有一度,我以为OmniGraffle并没有提供类似共享元素这样的功能,但事情不是这样的,只是创建共享元素的方法有些隐蔽。</p> <p>在文档中选中你要创建为共享对象的界面元素,在顶部的编辑菜单中找到&ldquo;拷贝为&rdquo;一项,选择其中的PDF。然后删除之前所选中的界面元素,再执行粘贴操作,这时被粘贴回来的PDF形式的元素就是我们所说的&ldquo;共享对象&rdquo;了。</p> <p>要编辑共享对象,只需在对象上双击,这时会出现一个独立的OmniGraffle文档,你可以在里面对共享对象进行编辑。保存之后,你会发现所有用到这份拷贝的元素都已经发生了相应的变化。</p> <h3> 对齐和文档属性(Alignment/Properties)</h3> <p>另外一些版面方面的功能,譬如对齐、空间调整、画布属性等等,也是我们必须了解的。这类功能都集中在右侧的检查器面板当中。</p> <p>对齐界面元素的功能是非常重要的。选中你要对齐的元素之后,在对齐面板中选择需要对齐的基准点(侧边、边角或中心),然后点击所需的对齐类型,包括横向和纵向。</p> <p>界面元素之间的相对空间调整也是常用的功能。你可以使若干元素在某个方向上等距分布,还可以进一步为它们设定彼此之间的距离。</p> <p><img alt="18-Alignment-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/18-Alignment-beginner-omnigraffle-wireframe.png" /></p> <p>在这些与版面相关的面板中,你可以看到默认的长度单位是以&ldquo;英寸&rdquo;为主的,建议你在实际工作中切换到更符合数字产品规则的像素。对于切换长度单位这类操作来说,最有效率的方式是在主题当中进行。</p> <p><img alt="19-Canvas-Properties-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/19-Canvas-Properties-beginner-omnigraffle-wireframe.png" /></p> <h3> 交互(Interactivity)</h3> <p>如果你需要为线框原型添加一些基本的交互,那么OmniGraffle也是可以提供相关支持的。你需要做的就是选中界面中的交互元素,然后打开检查器中的动作(Action)面板进行设置。OmniGraffle可以为点击动作添加如下几类交互动作:</p> <ul> <li> 打开一个URL</li> <li> 打开文件</li> <li> 运行脚本</li> <li> 跳到别处</li> <li> 显示或隐藏图层</li> </ul> <p>我个人最常用的是&ldquo;打开一个URL&rdquo;和&ldquo;跳到别处(Jumps Elsewhere)&rdquo;,特别是后者,可以用来实现画布之间的切换,通常在线框原型中用来展示界面间的跳转。</p> <p><img alt="20-Actions-beginner-omnigraffle-wireframe.png" src="/sites/default/files/images/201305-2/20-Actions-beginner-omnigraffle-wireframe.png" /></p> <h3> 总结</h3> <p>关于OmniGraffle的新手指南就到这里了。对于UXer们,这是一款日常工作中的基础型工具;上手并深入探索之后,你会发现它可以帮助你快速的创建各类图形文档,特别是线框原型。此外,网上也有很多关于OmniGraffle的优秀资源等待你去发现和使用<a class="eLink" href="http://beforweb.com">。</a>好运叭!</p> <div class="embed"><article id="node-277" class="node node-related-books" about="/node/277" 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/B00AX1MC3Y/?_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/21.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/原型设计-实践者指南-沃菲尔/dp/B00AX1MC3Y/?_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/B00AX1MC3Y/?_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></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/138" typeof="skos:Concept" property="rdfs:label skos:prefLabel">OmniGraffle</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/64" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原型</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/139" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Stencil</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/140" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX基础</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> Sat, 18 May 2013 09:14:48 +0000 C7210 202 at http://www.beforweb.com http://www.beforweb.com/node/202#comments