【译者注】Shopify是一家位于加拿大渥太华的电商软件开发公司,专门为中小零售商提供建立网店的Saas服务,能对接主流ERP系统,为客户提供打单、发货、运单号自动回传、订单业绩汇总、利润计算、仓储、采购及供货管理等一体化管理流程,按月收取咨询服务费用。阿里巴巴也有自己的零售通业务,我们UED团队会探索各种方式通过体验为业务赋能,其中就有一些产品页面插画设计的使用场景与本文描述内容有关。本文作者对产品插画中“如何利用比喻来找准信息传达的关键,提供有价值的无形体验”有自己独特的见解,在视觉设计角度对大家应该有一些启示。无线U递组以往更多选择产品设计与交互设计方面文章翻译,之后也会适当触及视觉设计领域的优质内容。

在产品插画中合理使用比喻既不是在插画中使用比喻的修辞方式,也不是在把比喻内容用插画表现出来这么简单。

最近我被问到蛮多的一个问题是:在招聘插画师时你主要考核什么方面?

既不是拥有独特的个人特质,也不是深谙多种风格,更不是曾服务过的知名客户列表或者作品出展过的地方,当然拥有这些资质也挺不错的。我的答案是:设计师对比喻的使用程度。为团队招聘插画师的时候,我最想了解候选人是否理解如何通过愉悦轻松易懂的方式,借助比喻来传递复杂的想法。

对使用比喻的能力如此看重使得我的学生及同事们都很惊讶,那么我还是解释一下在Shopify插画团队里我们如何使用和理解比喻

除了铅笔、手写笔或者咖啡,比喻叙词表(更实在点说,我们电脑里保留了一份比喻使用的参照文档)也是是插画师经常使用的工具。冒着“插画师有一定的创作套路”被外人熟知的风险,我们在辅助设计师进行插画设计关键创意时也使用这种方法。插画设计的确有一种捷径。尽管立场坚定的站在设计阵营,顶着设计师的尊敬称呼,我也得承认:插画本身就是一种内容表达。正如作家撰写的故事里,产品是如何无缝融入我们生活的,插画师使用比喻这类文学工具将复杂的想法与背后相关体验连接起来,努力挖掘深层原因,使得用户被产品的无形利益吸引。

在产品设计中熟练有效的使用比喻,首先得找到需要传递的核心信息。常见的错误包括:在图形中传递了多重目标或信息;允许一个图标包含两个物体而不是一个;允许一个背景物品吸引了场景中大量的注意力(因为大部分设计师偏爱这样)。从16像素的图标设计到精致入微的场景设计,比喻都可以作为一个优秀工具。但无论如何都要通过比喻赋予图形具体意义,以帮助用户更方便的进行产品导航。随着插画复杂度的增加,我们需要定义视觉层级,其中每个层级的元素为插画传递核心信息的整体故事服务。当你为插画添加元素时,必须反问自己“这个元素对整个画面表达的故事有帮助么?”“这部分有益于核心信息传递么?”,如果答案为否,请准备好删掉它们。

产品设计比喻的类型

好吧,在没有理解什么是比喻之前,我不确定大家能读懂后文。在未说明定义之前就谈论分类听起来很怪,以防万一我还是解释一下。比喻(隐喻或明喻)是文学中以非字面意思连接两个想法的修辞方式,而不是单纯的夸大想法本身或者夸大表现互动方式。

一、标准比喻

这个元素与那个元素在某刻具备相似性。如下图所示,它不需要展示实际产品就能让用户理解。图中并不是真正在讨论冰激凌,而是通过插画以比喻的方式传递了“正如用户能够按口味喜好用配料调制成个人专属的冰激凌一样,你也能根据自己的需要为利用我们提供的服务(App)来打造你的专属店铺”的理念。

这招在产品设计中特别管用,尤其是那种无形、复杂的数字产品。 1

二、融合比喻

这个元素与那个元素融合,就能表达我们想要传递的内容。可能这类比喻使用起来需要更老道的经验,但在产品插画里的确更受重视,或者说一般设计都会考虑它,因为它是让用户获知你的产品或功能卖点的捷径。如下图所示,没错,你知道我们提供了“购买”的按钮,但瞧瞧旁边摆放的画笔,基于对画笔的了解,你就会明白你能定制“购买”按钮的颜色。将刷子的功能与按钮的功能混合起来,刷子可以自定义颜色,因此我们的按钮也可以。与品牌和营销设计一样,这种比喻在图标设计中也时常出现。 2

三、相似类比

这个元素在线上和线下有相似之处。尽管我不认为它是一类比喻,但在产品设计中我还是将它单独拿出来说。比喻常用来展现触动人心的部分,那是一件事情或者一个行动产生的积极感觉。不过,对于内容传递给用户的方式,团队更倾向于中立精确的写实表达。不必告诉用户我们的感受如何,只需简洁传达信息。用插画的专业术语来表达则是:我们只愿意通过绘制写实状态下的物品,来帮助用户理解线上的内容。当然,谈到产品时,我们大多是在电脑上作画,比如,你可以绘制20多个互相连接的空状态页面,来表达重复性。这也是我们在为用户传达内容时增加的一种类比方式。比如下图的例子,线上电子商务可以让用户通过优惠码输入实现折扣,那么线下实体销售折扣该如何表达呢?可能是一堆贴纸和带着折扣价格的红色标记。我们能借助全新怀旧风格的插画为用户带来愉悦,同时还能保持中立,只是简单清晰的表达信息。 3 提醒:使用陈旧或过时的物品做相似类比时,信息会有误传风险。

在产品设计中使用比喻

当有了新想法,试图找到合适的切入点来讲个好故事时,我们通常问自己“为什么商家在乎?”,接着就是“这种无形的体验究竟是什么?”“如何把故事讲好?”这些问题。

【案例:用插画表达用户能够购买自定义域名的功能】

备注:这些想法来自我们极具才华的插画实习生Erin,他现在负责通过插画宣传自定义域名的功能。早上我们有过交流,我认为与其绞尽脑汁编一个,还不如直接用身边这个触动我的完美案例。

Q:为什么商家在乎?

他们在乎该功能因为他们不再愿意告诉用户他们的冗长域名breadpoetsociety.myshopify.com。像他们承诺提供稞麦粉出售、松脆饼打包、甜甜圈贩卖服务一样,商家希望购买自定义域名也能被认真对待。

Q:这种无形的体验究竟是什么?

插画要能体现用户以下感受:他们已经为“打造面包诗人公社”的目标做好一切准备,这不再是周末萌发的天真想法,而是一个成熟的业务,包括随之而来的激情与期待。

Q:如何把故事讲好?从哪里切入?

1、标准比喻。

首先绘制一个小屋或店面,因为线上与线下类似。一个设计概念能以多种方式传达,取决于你打算聚焦于哪些元素,以及你如何从宏观和微观角度表达它们。

例如,对整个店面,经纪人标识,店铺里的装修的视觉表达。

2、融合比喻。

将“家/店铺”与“域名/线上”的概念以任何穷举组合的方式融合起来。

例如,将家与路由器、店铺与一系列结点、符号与网络的特点进行融合。

3、相似类比。

可以从名片切入,模拟现实里将承诺的个性化名称与有形物品的结合实现。无论是线下打印出来还是线上展示,尝试用插画去捕捉和表达“客户看到定制的业务名字被写出来,初次被当做自己的生意提及时的那种激动感受”。

用户通过我们的产品,基于数据对定价策略、销售渠道和潜在买家行为进行有形决策。而我们则使用插画来表达那份无形的体验:用户掌控日程的自由,打造专属物品的满足,初次销售后发自内心的喜悦。这些无形的体验或许不会成为用户界面的一部分,也不会成为对老板汇报的内容,更不容易以实打实的可见产品价值论证自身的设计价值,但它们不仅是产品设计的重要内容,也是我们所倡导的设计方式。产品插画中的比喻逐渐成为这部分从未尝试过的触动人心体验的代表,超越了那些使得用户爱上产品的有形功能内核,升华了整个故事。

原文地址:

https://medium.com/shopify-ux/effectively-using-metaphor-in-product-illustration-62bdccbe14e4#.ljarg9a16

译者:

阿里巴巴/1688UED/无线交互/舒舟

  • 【译者注】产品设计流程中,有必要对设计进行评审是大家的共识。在我每周的工作内容中,参加各类大大小小的设计评审是必不可少的一环。既有脑力激荡的评审让设计方案脱胎换骨的,也有针锋相对的评审让设计方案摇摆不定的。怎样进行一场高质量的设计评审?设计师应该如何应对设计评审,更好的表达设计意图,并收集意见改进方案?怎样避免设计评审变成竞稿或PK?如何确保设计评审这样的流程能带来更大价值?带着这些问题,我们一起看看原文作者Jason的观点。*

批评从来都是很容易的事情,似乎人人都能拥有自己的观点。但正如作者Harlan Ellison指出“你无法把控(他人)对你自身的意见,但你能把控(他人)对你观点的意见。” 观点的形成需要探索,而设计评审正是产品探索的重要环节。

创意者与团队或客户讨论并解释其创意时的设计评审,并非缠着设计师要求解释验证每一项设计决策,那仅仅是批评。优秀的设计评审是探索整个设计过程,找到亮点并发掘改进机会。理想状况下,设计评审让团队中每个人都有被倾听的感觉,允许客户给出有价值的反馈。

设计评审中提出建设性意见往往是个挑战,尤其在团队缺乏设计评审的经验时。在敏捷开发团队中,程序员、项目经理、产品经理及其他相关人员坐在一起反馈,你得明白如何应对他们,并且把事情迅速往你的期望方向引导。

UI设计评审的原则

根据我的经验,针对UI的设计评审应当在整个产品设计与研发过程中开展,或者至少以定期的方式,每周甚至每日开展。这么做可以让产品设计可控,尤其在设计需要进行多次迭代的敏捷或者精益产品流程中。开展UI设计评审是一项挑战,不仅需要解释决策,还得耐心听取其它建议。

在每次设计评审前建立清晰的原则-而不是“规矩”-至关重要。与规矩不同,原则不是教条式和限制式的,而是帮助每个人对焦期望,并允许进行自由形式的讨论。

这些期望中的重点是让每个人对你提及的点评细节达成共识。Jason Ulaszek推荐道:

在你点评的设计细节上开始询问背后的原因及意图。为什么我们需要这条信息?对于允许索取这条信息我们设置了哪些期望?我们会用它做什么?如果我们能回答它们,再进入讨论解释各种元素的优劣以及与之对应的不同意见会比较好。

critique-500-opt 图1. 准备好演示

为了更好的遵循这个方针,无论是否包含UI设计,我建议遵守适用于任何设计评审的标准原则:

1、表示尊重

听起来很老套,但如果每个人都是在批评而不是尊重台面上的意见和他人的技能,那评审会迅速形成敌意。

2、指定角色

开始之前就澄清在设计评审中每个人的角色,最好在逐个点评时也把角色都重申,避免有人感到被遗忘。理想状况是以下三类角色是不同人(往往不大现实)。

-演示者

负责进行设计提案并解释背后思路的人,他需要回答所有的问题,或找出能够回答评审提问的人。

-主持人

最好由不是直接负责设计的人来担任,比如项目经理或产品经理。主持人确保每个人聚焦在主题上,并且每个人的意见都能被听到。

-记录者

此人侧重于记录讨论内容,尤其是确保会议相关结论(另外一条原则,后续会说明)在评审后能够清楚传递。会议记录者不应该被排除在讨论范围之外,尽管他们的职能倾向于让他人更清晰的表达观点。

3、针对当前评审描述项目目标

快速提醒每个人项目目标以及评审涉及的范围。确保整个评审集中在手头任务上,而不是东扯西扯,偏离话题。

4、回顾目标用户

强调参加评审的人都不是产品目标用户,提醒谁才是目标用户。

5、避免给出答案

参与者将会带有强烈的解决问题欲望,而且会在评审中提出解决方案。然而,最佳方案往往不会在评审时产生。评审的关键是探索问题及讨论潜在的多个方案,帮助设计师拓宽思路并最终决策。

6、对结论形成共识

记录者需要回顾每个参与评审人员提到问题的结论,以便在下次评审中大家形成共识。

不幸的是,UI设计评审经常在视觉细节上死磕,而忽视交互层面的更影响设计的内容。因此,对UI设计评审,我们增加了几条原则:

7、澄清设计媒介

在跟听众讲解设计时,记得提及产品界面展示的平台及相关技术。这是个iPhone应用?一个网站?是否使用AngularJS技术或者C#开发?确保这些都充分考虑,否则你的设计方案可能完全无效。

8、勾勒流程

你得了解路线图。对于UI设计来说,应该是用户体验的流程。或许是故事板、用户旅程图或者其它描述流程的方式,每个参会者都应该在点评界面之前充分了解整个流程。

9、演示产品,而不只是描述

我得再次强调:伟大的用户体验应该更多的展示出来,而不是口头描述出来。用户在不必解释的情况下就应该明白产品如何工作。你的演示需要尽可能少的语言解释,就好比老话说的:好的UI就像笑话一样,如果需要解释,那么肯定很糟糕。

10、提出正确的问题

设计评审中的大量提问与评述跟协作精神有较大冲突。我推荐一些在探索设计时的开放对话中可以用到的问题,比起导致激烈PK更容易促成协作,你可以推荐给你们团队试试。

questions-500-opt 图2. 关键是提出正确的问题

“这个方案你是如何想出来的?”

在任何评审或者交流中比较适合的切入问题,询问设计师如何做出某个方案,而不是为什么做某个方案?询问为什么立马会让设计师进入防备心态,而询问如何进行的会让设计师在不需要澄清理由的情况下去表达自己设计理念的初衷。

solution-500-opt
图3. 找到答案不难,问对问题很难

“为什么”相关的问题让我们急于证明某件事情的真实性,而不是解释它作为一种可能性。根据Aaron Morton的观点:

“为什么”引出一个故事,解释某件事情的真实性。如果你问为什么,一切都无法奏效,你更想要创造一个故事,无论真实与否。这是让你感到糟糕的危险领域。 与询问“为什么”不同的是,考虑询问“如何”能够引出一个创造流程的故事,不必为它的存在辩护。然后你可以问设计师之前考虑过的各种可能,认真倾听设计师在提供方案之前做过的尝试。他们也许过于看重某些东西,不过没必要深究。

“你想要这样做的想法来自何处?”

爱迪生说过一句著名的话“天才是1%的灵感+99%的汗水”,但他那最重要的1%来自Nikola Tesla。毕加索也说过“优秀的艺术家借鉴,伟大的艺术家偷窃”。

皮克斯动画总裁 Ed Catmull的《创造力》一书的中心思想就是,一个伟大的团队远胜于一个伟大的想法:让合适的人产生合适的化学反应比得到正确的想法更重要。

我们极少在隔绝情况下形成想法,看看想法来自何处能推动我们自己的创意。更妙的是,在团队中把灵感汇集很容易产生新的创意。

一个忠告:避免指责或者居高临下,比如暗示他们的想法是偷来的。尽管你希望在不影响创新的情况下,设计师推动对于自己创意驱动的理解和创意来源。

“这应该在什么时候发生?”

如同喜剧一般,合适的时机意味着设计的一切,所有的事件应当在适当时间点以适当的秩序发生。尽管我们设计时,元素的秩序不易察觉,除非我们耐心解释。

伟大的UI就像一个好故事,你得小心编排。开启表单填写时需要展示多少信息恰到好处?是否展示了对应上下文的信息方便用户理解?是否已经到了揭露结论的正确时刻?

Jason Kunesh是Public Good的公司CEO,这是一家专门帮助非盈利组织通过新闻来做连接的创业公司。他告诉我:

优秀的适时交互是让产品(服务)吸引或失去客户的关键区别。将间歇性的互动变为持久关联的秘诀在于一系列精彩微交互,以及当用户需要时恰好出现的信息内容。 在设计评审流程中,应当询问每一个行动、每一次询问或者每一次数据展示是否出现在正确的时机,以确保界面在切换时传递信息时顺畅。

“我们是否可以运用动效来添加视觉线索?”

这个问题可能会让不少已习惯于静态设计多年的设计师们感到意外。不过,动效、动画与转场过渡将成为体验设计的标准。动效将在设计中成为颜色一样的重要元素。

ezgif-2411885155-500-opt
图4. 在现代UI设计中,动效与颜色一样重要

UI动画设计专家Rachel Neighbors说过:

随着扁平化设计与用户体验趋势的摇摆变化,我们能预感到页面部件缺少视觉线索的风险,因此动画能减少这种风险。 这种动效可能是颜色、透明度的变化,也可能是用猴子的手臂延伸页面这种细节,或者用户完成任务后展示太阳升起的效果。询问在UI设计中加入逐步动效的可能将极大的推动设计师改善设计,使得设计师思考时间维度的设计细节,而不只是局限在空间维度。

“我们如何使它更简单?”

要做到简单很难,增加东西比移除东西更容易,因此许多界面得了“暴雪中的雪花”综合症,当然这里的每个雪花都是独一无二的,只是在暴雪中容易被忽略罢了。在UI设计中,我们常看到界面上充斥着链接、按钮、控件和图片,客户往往认为需要将用户可能用到的东西都放出来,这样一来用户根本无法找到实际需要的东西。

simple-500-opt
图5. 降低噪音与干扰

当我把简化设计的问题抛给《Don’t Make Me Think》的作者Steve Krug时,他回答道:

这是一个很好的问题,我认为它是每个人都应该吸收的教训,尽管并非如此。我总喜欢提到:对用户的真实目标来说,页面或屏幕上的任何元素都不是解决方案的一部分,而是噪音和干扰。 在设计的每一步中,我们都需要自问:我们如何能够创造更小思考成本下能发挥同样作用的产品?在设计评审中,这是要求把方案简化的最佳表达。在设计中保持界面清晰很重要,使用尽可能少的点击、文案和输入框来达成目标更好。踏踏实实的把用户需要完成工作的消耗降到最低,用户会感激不尽。

“接下来会发生什么?”

优秀的设计评审与优秀的采访类似:他们都是一种探索。一名优秀的采访者Studs Terkel说过:

采访不是审讯,而是一种探索,对过去发生事情的探索。因此我认为最绅士的问题就是最好的问题,“请问接下来如何呢?”

将它应用到UI设计上,我们通常问设计师接下来发生什么。这个问题帮助他们进一步思考后续考虑事项。因为每一步行动后用户终归得有一个地方可去。

任何UI设想的最大挑战之一就是考虑所有可能的用户路径,而不仅仅是我们希望用户去走的“happy path”。用户点击按钮后发生什么?如果出现错误怎么办?用户提交表单后会发生什么?一直询问接下来发生什么,直到你们考虑到每一个可能的场景,否则就可能存在让用户无所适从的风险,这是一种糟糕的体验。

不要只是提问,还要回答它们

对与此有关的任何人提问时,不要只是简单的问一些你想听到的答案。当某人向你提问但又不听你的解释或者理解你的思路,只愿意听到它们想要的答案时,这会让人反感。

notes-500-opt
图6. 随时准备倾听和记录

如果你曾经这样,马上改掉。问完问题后洗耳恭听,接下来基于听到的回答,而不是那部分你想听到的内容,来构建你的回复。

优秀的设计评审有什么特征

评审的质量取决于参与者技能、目标和责任。不过一个优秀的设计评审通常都聚焦在产品某个具体细节,并针对当前的方案进行透彻的探索。

UI设计评审不只是在关注到视觉方面,而应该在交互和用户需求满足上聚焦。参与者经常会问为什么事情没有按照他们预期的方式进行,而不是考虑用户的需求。来自UX for Good公司的Jason Ulaszek告诉我他的观点:

在讨论中保持客观,考虑该设计使用用户的心智模型,这是我们探讨方案的关键。

时刻记住,像逐帧动画一样,最终成品的1秒影响需要数周甚至数月的努力。尽管我们可能在界面的某个小细节上就需要花费很多精力,可能它在用户的使用体验中也只是很小的一部分。

looks-500-opt
图7. 团队得有共同的目标

Steve Krug对此的看法是:

我们认为,很棒的产品描述(比如产品手册)对用户来说就跟“坐在60码时速的车上看到的广告牌一样”,UI设计师们比较难理解用户是如何忽略这些产品界面细节的,尽管设计师为此付出诸多努力。 优秀的设计评审放慢节奏,考虑每个元素,但是能认识到这些设计细节可能不会被用户注意到。如果参加评审的人员在颜色、字体及体验设计方面没有专业知识,他们可以考虑以下重要因素:

1)一致性

在产品中的设计是否保持一致,包括颜色、字体、控件、图像及任何使用超过一次的界面设计元素(静态、动态)。

2)上下文

你是否统一考虑了用户使用产品时的上下文?不断去询问这个问题是关键,因为在设计或测试中很可能你只是在模拟,而不是在上下文环境下共情。

3)调性

品牌和设计是否有清晰一致并且可辨识的调性。

4)转场过渡

界面上重要变化状态之间的过渡是否使用了转场效果?现代设计不仅仅是视觉方面的因素,考虑所有的界面元素在用户交互时是如何移动和变化的。

5)简单

对于完成任务,设计是否足够简单?

避免敌对批判

评审时常充斥着PK,团队成员不管出于何种原因,总习惯忽略创造过程中的思考而进行批判。他们带着自身偏见看待设计,而不是从用户出发,有时候只是为了显得自己牛逼。

你一定能想起出现过激争论的评审:设计师开始对设计决策进行辩护,而不是解释如何得到的方案并且讨论其它替代可能。避免变成争论的关键在于设定清晰的原则并且提出开放的建设性意见。记住,评审时用来加强设计协同共建,而不是竞稿。

评审变成PK的话毫无意义并且会伤害团队。对抗性的批判会强迫设计师进入一种防卫姿态,只想护卫完成的工作,而不是拓展和改善它们。设计本身就是大部分依赖直觉,并不容易量化评估。

不过,这并非意味着评审只是讨论对设计师的看法,应该讨论对设计师通过经验形成的方案的看法。来自Agentic的网页制作人Phillip Djwa感觉其中的关键在于:

经验告诉我,不要试图一概而论。例如我会问“我不确定开放的banner是否足以传达品牌?”,而不是问“哇,用户根本不会理解我们的品牌价值。”

结语:设计评审不是可用性测试

我们很容易认为自己是站在用户角度共情,或者通过使用用户角色,或者自身带有偏见。无论使用多少用户角色,经历多少轮评审,你仍然不是你的用户。Steve Krug告诉我:

这就是为什么我认为每个设计师应该花时间观察用户并且使用自己的产品(又称可用性测试)。

tools-500-opt
图8. 设计评审只是体验工具箱中的一个工具

如同激光测量精度跟肉眼估算测量精度对比一样,可用性测试比设计评审更加精确,也更加费时费力。常规设计评审对于项目实现目标没有直接价值贡献,也无法取代真实用户现场测试。如果只进行评审而不去做可用性测试,得到的结论就是自high。

原文地址:

https://www.smashingmagazine.com/2016/08/running-a-ui-design-critique/

译者:

阿里巴巴\1688事业部\无线交互\舒舟

【译者注】增强现实、虚拟现实、混合现实、人工智能、3D打印、物联网、商业模式、商业价值、设计创新、黑客增长…这是设计师最好的时代,我们能接触到前所未有的新技术新概念新模式。在它们的冲击之下,各种设计可能浮出水面,体验设计被提及被重视被拔高。面对变化,设计师同样面临诸多挑战,用户商业平衡、大数据挖掘、新技术探寻、行业知识积累、多渠道沟通技巧、多元化说服能力、价值变现能力、创新瓶颈…这也可能是设计师最坏的时代,靠一门手艺打遍天下的局面将不复存在。本文出自99u.com的两名专栏作者Matt McCue与Kiana St.Louis对几名设计大牛的访谈整理,在日新变化的设计领域中,对苦思职业生涯发展道路的设计师有着一定引导方向的意味。

在试图憧憬未来设计工作时,我们感到有些迷惘。

科技正在飞速发展,五年内,移动平台已经从公司战略的新兴力量变成未来焦点,谁又能预料虚拟现实(VR)和自动化(Automation)何时成为下一个爆点呢?快速演变的工具和不断变幻的发力领域使得预测未来有些吃力,因为那些推动我们生活在10年里快速前进的科技可能尚未面世。此外,职业道路的发散使得过去在某家公司以单一渠道晋升度过余生的方式发生了巨大变化,正如设计与编程一样,这两项我们原以为互斥的技能在新的职场环境中竟成为实用的混合技能出现,使得未来职场诉求更看重全新出现的混合岗位。

因此,我们找到一些设计界的先驱与专家,向他们了解未来10年内,哪些领域将不再强调纯粹的设计师定义,而是从团队协作与组织构建的角度,反思企业职能的变化。

面对这样的一个充满奇妙可能(全身虚拟现实技术能够营造真实生活感受)和崭新职业机会的黄金时代,你感到担忧吗?大可不必,因为我们已经向这些设计先驱了解到我们如何为未来设计做好准备的诀窍。

设计的定义将更广泛

“回顾过去,人们通过学习图形设计、工业设计或者交互设计进行有限数量的设计产出。现在看来,设计和创新能带来无穷可能的输出。一方面关于组织设计,从组织内的设计文化角度看待组织是如何从结构和职能角度被设计的;另一方面关于商业设计,从商业模式到风险投资的角度看待设计带来的创新视野。”

“创新”将成为令人垂涎的企业领导特质

“我们看到来自不同学科的人在项目全程中共同协作,如何最大化创新潜能?关键在于解锁团队之间的协作能力。”

非线性的职业道路成为常态

“我意识到越来越多的人不再遵循传统的职业轨迹,招聘时我特别留意了候选人的职业道路轨迹:什么原因让他们做出职业选择?他们发现自己走在怎样的职业道路上吗?我不再关心他们是否科班出身的设计师,而是关注他们的职业生涯过程中是否进行有意识的成长和相关的经验累积。”

-Duane Bray, IDEO全球人才主管&合作伙伴

设计与商业的界限越来越模糊

“一名设计师越了解业务,他就越能给业务带来更多价值。理解公司价值主张与使命的设计师能够帮助公司生存与成长,他们只需了解公司的运营之道。当设计师能够精确描述他能够带来的价值时,管理层就会意识到他们不仅招聘到一名设计师,更是找到了一个卓越的策略伙伴!”

有创业精神的设计师更吃香

“由于公司高管开始注重设计的价值,我可以展望越来越多的设计师被纳入产品和服务的前期沟通过程中,他们也因此得到更高的薪资和咨询费用。成功的三个关键是伟大的创意、伟大的执行和伟大的设计。当设计师能清楚解释设计给公司利润带来的贡献时,管理层会对设计和设计师群体更加重视。”

-Shana Dressler,30 Weeks执行总监

3D打印将带来更多的一次性设计挑战与机遇

“我认为未来的产品会更加动态化。如果在零售店有3D打印机,客户可以按需订制任何尺寸的产品,比如一个超大尺寸的版本。与固定几个尺寸不同的是,多种形态的专属产品设计成为可能。”

体验设计越来越重要

“零售购物不再局限于交易体验了,它还包括进入一家商店感受到的品牌氛围与能够带走的生活方式。如今这已成为一种城市的高端体验,我们怎样以一种更易普及的方式来设计?为此我们考察了香港的K11商场,了解他们是如何整合多样化的体验。从蘑菇在农场生长到纳入餐点最后变成儿童节目,全程拥有无处不在的艺术气息。这些过程经过精心策划,形成可供不断的展示与传播的节目。”

-Georgianna Stout,2×4创新总监与合伙人

数据与设计使生活更美好

“过去设计师是那些能够看到、触摸到并且把玩的产品的典型能手,如今随着虚拟时代的来临,设计具体的表现更多是无法看到的东西,比如个性化数据设计能够分辨我们的身份。设计师更多应该思考人机交互模式,举个例子,智能家居的传感器发现家里的大门未锁,辨识到正在进入的人物身份之后,是不是应该基于数据了解他的喜好并为他点亮一盏小灯?而不是每次到家之后你还需要决定让智能家居系统来开灯还是亲自动手。你是否拥有一个能够基于决策交互的智能家居系统呢?我的意思是,不应该有灯光开关或者可触控的系统界面,这些应该由人工智能基于个人喜好数据搞定。这就是新的设计问题。”

-Mark Rolston,argodesign首席创意官&创始人

跨学科团队更吃香

“在NBBJ(一家美国设计公司)有很多医生和护士跟我们一起协作,对设计工作产生了极大的影响。我喜欢在这种氛围下工作,一个房间里有技术架构师、护士及设计师,大家一起致力于解决相关项目的城市设计问题。比起三个人拥有同样的背景,这样混合背景的人才合作将带来更有趣的结果。这种情形下会催生各种疯狂想法,项目可能以罕见的差异化方式更快更容易的完成。”

-Sam Stubblefield,NBBJ首席设计师

数码艺术将与实物艺术同辉

“3D打印雕刻跟50年前的人工雕刻相比是否有同等价值?人们常弱化数码产品的艺术价值:噢,那是电脑创作的,不是纯手工的!然后认为数码艺术应该更廉价。我同样担心人们会认为3D艺术应该更比实物更便宜。但当人们可以将艺术家的杰作打印出来并据为己有时,他们会改变想法的。我敢肯定的是,如果米开朗基罗拥有一台电脑,他会毫不犹豫的使用它。”

3D打印变得越来越重要

“创意者的职责是将3D打印引入创意工作中。一旦你能够将工作具象化,它也获得了更多的可能。我希望3D打印能帮助人们全面定制他们的生活。某一天如果我们需要一双鞋或者银器,只需要在家里自己打印出来即可,我认为这将变得非常普遍。我们的世界会变得更有创意,因为过去工业化生产完成的事情现在任何人都可以用3D打印完成。”

-Daniel Aristizabal,哥伦比亚插画师

无处不在的讲故事

“围绕虚拟现实(VR)与增强现实(AR)的投资金额将是创意专业人士的下一个巨大挑战,并且意识到自我遍历式的讲故事并不是创意学科的一部分。我们通常习惯讲述线性故事,我认为最艰巨的挑战在于如何使用创意对用户自我讲述的故事机制进行设计。”

创意工作的价值量化越来越难

“定义传统创意工作的价值比较容易,但定义从未被定义过的创意工作的价值非常困难。我认为应该逐步进行,定义每一小步的增长价值。”

视觉VR仅仅只是开始

“在VR中进行表达有太多机会和手段。例如,Axon公司的VR正在开发全身虚拟现实,包括软件和硬件。这台装置让人印象深刻,当增加了视觉、听觉和触觉之后,第一人称体验美妙至极。视觉体验已经发展的比较成熟,当你把VR技术的各种可能交给一个创意家,我越来越深信各种完整而梦幻的体验会接踵而来。”

-Paul Matthaeus,Digital Kitchen创始人&主席

技能拓宽无法避免

“设计师能做出优秀设计,但要是无法传递背后的故事,这将会成为伟大设计师的失败。学习如何在公众环境中发声以获取关注并说明你的创意这样的软技能很重要。设计师应该在议价时掌握读懂溢价空间和接受价格的技巧,还要通过反思‘我做这件事的目的是什么?为什么做这件事很重要?我需要带来怎样的影响?’这样的问题来了解商业前期心理。在设计之前充分理解这些内容非常关键,对设计师来说,拥有商业和设计的心智极其重要。”

设计作为品牌应该进行更深入的思考

“如果你是用户体验从业者,希望设计更多的产品。做个自由职业者可以帮助你赚到很多钱并获得你想要的东西。一旦你开始思考成立团队或形成文化,这时可以考虑创业了。这时你必须要从具体设计工作中抽离出来,投入到商业相关的活动(运营、招聘)中去,为某个向你们品牌设计付费的客户组建团队。此时你的心智应该从‘我是设计师,这里的人为我工作’变为‘我是一个品牌创建者,我为此招聘人才并创造独特的高质量服务’,你的工作是打造相关的环境和系统。”

-Mona Patel,Motivate Design CEO&创始人

专业化+沟通=职业成功

“与其处处播种,初级设计师应该专注在某个具体的设计学科上,通信设计、产品设计、室内设计、时装设计或数字媒体设计。学习设计的同学应该了解设计与科技和商业各自的规律法则是什么,他们应该与其它设计学科的同学一起工作,尤其是工程和商业领域的同学。这是对初级设计师沟通技巧的最好培训。”

公共部门需要更多问题解决者,这是设计师的机会

“未来的5到10年,设计师将接管公共服务设计。这是相对较新的领域,随着公共部门出现越来越多的问题,比如老龄化、污染、交通拥堵等,设计师能够在不同场景下发力。这些问题需要诸多创新技能和设计专业能力。”

-Cees de Bont,香港理工大学设计学院院长

注:原文采访内容比较分散,本文已经过合并翻译处理。

原文地址:
http://99u.com/articles/54058/the-future-of-design-and-how-to-prepare-for-it

译者:
阿里巴巴/1688事业部/无线交互/舒舟

【译者注】Julie Zhuo,原上海人,在5岁时举家移民美国德州,家人本希望她成为一名医生或者律师,但因为对视觉艺术的热爱,她选择成为一名设计师。她是Facebook的第一名实习生,2006年5月加入时刚满22岁,那时的社交网络还局限于电子邮箱往来。在10年的职业生涯中,她充分展示了对产品设计的深入理解和卓越管理能力,成为了Facebook的设计总监,在Medium等媒体发表自己对产品设计的见解和观点,篇篇饱含真知灼见,又不失个人特色洞察,逐渐被设计同行熟知。如今,这个32岁的华人姑娘已成为硅谷最伟大公司之一Facebook的设计副总裁,她分享了自己数年来形成的产品设计观,相信你们读了之后会找到很多启发与共鸣。

近期我在参加TNW Europe的谈话节目中,提到一个帮助我们在Facebook聚焦于产品研发流程的框架。这次谈话使我想起了多年来在打造伟大产品道路上经历的经验和教训。

这份清单的内容可能不完整,要是有一份手把手的教程(第一步,寻找灵感;第二步,变戏法;第三步,盈利!),那我肯定乖乖掏钱,然后看着一款令人激动的伟大产品像变戏法一样出现。

整个打造伟大产品的旅程才完成1%,我们边走边学吧。

定义框架
1、产品成功的原因在于帮助人们解决问题。这点世人皆知,但却是打造伟大产品最重要的认知。
2、打造新产品的第一步就是弄明白要解决的问题是什么,目标用户是谁。这是在开始思考任何解决方案之前最应该弄清楚想透彻的。
3、你应该问的第二个问题是“为什么这种特殊问题值得(我们)解决?”
4、如果产品定义的目标用户范围很窄(你自己也属于这类特别用户之一),那你或许可以依赖直觉来指导产品决策。如果不是,你就应该依赖研究和数据来进行决策。
5、如果你是初创公司的创始人,针对狭义用户去解决痛点会帮助你有一个良好的开端,当有了初步的成果后,再扩展到更大范围的用户群体。
6、你打算解决的问题应该能用一两句话描述清楚,并与你的目标用户产生共鸣。如果没有,考虑放弃或改变吧。

执行落地
1、优秀的执行力即在最短时间内找出可信结论。
2、糟糕的执行力在遇到挫折时会出现以下两种情形:
a)你无法从失败经历中汲取教训,避免将来的项目重蹈覆辙(因为你不明白为何失败)。
b)你花了一年来得到一个原本三个月就能吸收到的经验。
3、成功团队与失败团队最大的区别不是他们是否遭遇过挫折(肯定会遇到),而是他们是否能够始终如一的保证执行。
4、针对具体问题发散方案时,在深究细节之前铺开思路。在挑选最优方案之前,脑暴10个、20个甚至50个方案。最初的5个方案是显而易见的,而创新发生在你绞尽脑汁的思考第11个、第20个或第50个方案的时候。
5、当你进行产品规划陈述时,有人问你“为何不考虑使用xx代替?”,要是你仅能回答“不行”,这意味着你的产品探索过程还不够严谨。
6、使用经验证据来帮助你在脑暴发散方案中缩小选择范围。(例如,选择团队最中意的几个方案,通过高保真设计或原型展示给真实用户并获取反馈)
7、一旦你确认了打算执行的最终方案,以假设来进行思辨“如果这个产品问世,你认为会发生什么改变?”(例如,我们要解决的问题是帮助城市居民了解每个周末当地发生了那些新闻。那么我们的假设即通过电子邮件摘要能帮助我们触达x%的居民用户。)
8、你应该不断寻求缩短验证假设周期的方式。是否能通过街头的用户试验来判断可行性?是否可以针对目标用户进行问卷调查并且收集是否有足够多的人对你的点子感冒?即使不如完整愿景中的产品那样完善,是否可以快速构建一个版本有助于帮助你得到清晰的结论?
9、一旦有积极信号表明假设可能靠谱,先别以为就得马上发布已通过测试的产品(或许你能找到获取该类积极信号的捷径)。相反,思考该产品需要打磨或增加新功能时,对何时应该全面发布做独立充分的决策。从验收测试到验收发布都应该有明确的标准。
10、如果你着手于一个多变的项目,尝试能否可以将变化划分成更小的能够独立检验的里程碑。避免掉入这类陷阱:在有5处变化的环节中不知道哪处变化是导致糟糕结果的根本原因。
11、无论成功或失败,对每个项目做团队复盘。学习到哪些产品经验?团队共同的成长是什么?下次再遇到这个项目你会如何改进?然后,与整个公司分享这些经验。

成功指标
1、如何衡量成功对于团队的长期结果来说至关重要,因为它是团队成员凝聚的根本原因。确保在合适的时机让团队对此达成共识(你可能会思考的更进一步“我们应该如何去做呢?”)
2、在产品项目启动之前定义成功的指标是什么。否则,在项目启动后再试图解释结果,确认性偏见会造成主观解读。
3、对每个成功指标,找出一个让你自己信服的定量指标,而不是简单的追求片面指标的提升(例如,一个常见的衡量生产力提升的定量指标也能很好的衡量每件产品的质量提高)
4、假如一项重要的指标发生意料之外的变化,无论这变化是积极的还是消极的,你的第一反应是询问“为什么?”。在充分了解原因之前不要试图通过制定策略来提升/抵消变化。
5、使用“水晶球占卜术”帮助你选择合适的成功度量指标。询问自己“在世界上如果我可以知道任何有关人们是如何使用我们产品的信息,那么我应该知道哪些信息来告诉我:我们的产品是否成功”?(典型回答不是“点击某个神奇按钮”而是更抽象的比如“多少使用我们产品的用户受益于它的价值?”)从该问题的回答中,回溯你渴求的最贴近的衡量指标。
6、产品目标应该与手头上的信息匹配。如果在设定产品目标后发现新出现的信息改变了你的产品观,那么可以考虑根据新信息调整产品目标。
7、如果你在一个不明白如何衡量成功的团队中工作,立即将如何衡量成功的问题提出。与其事后强调它对提升效率和优秀执行力是如何必不可少,还不如及早暴露问题。
8、如果打算弄清楚你的产品是否符合市场需求(与试图优化或扩张产品比较),最好能将目标锁定在留存率(多少人使用你的产品并愿意返回继续使用?)上,而非用户参与度。

团队协同
1、思考你的角色定位(对设计师的期望是什么?对工程师的期望呢?)将有助于发挥能力展示影响力。更进一步,思考“我该做什么来帮助我们的团队成功?”
2、热衷于问题本身的团队比热衷于具体方案的团队更容易成功。因为探究一个值得解决的问题会驱动团队前进,即使团队在第一、第二…第N次尝试中还未找到合适的方案。
3、始终保持积极乐观,我指的是在每天工作结束后,每个人都需要对焦共识-打造伟大产品。或许偶尔你会犯错,但你始终走在正轨上。
4、明白自己擅长什么,团队的同伴擅长什么。然后根据大家的优势进行团队分工。
5、健康团队的关键在于良好的沟通。每个团队成员应该在表达个人观点时感到自在,即使有人持反对意见。多样化的观点容易产生最佳结果。所以不要害怕表述自己的观点,在不确定大家是否充分理解你的情况下也不要害怕强调自己的想法,同时努力为“让别人都能进行充分表达”着想。

原文地址:
https://medium.com/the-year-of-the-looking-glass/building-products-91aa93bea4bb#.1g200kw87

译者:
阿里巴巴 | 1688事业部 | 无线交互 | 舒舟

【译者注】为企业产品做设计,设计师经历的最大困难往往会是应对产品的复杂性。译者读过的诸多解决复杂设计问题的文章中,要么是从设计专业角度去解构分解问题,再剥离难点逐个击破,要么是从源头分析,对设计需求做简化和平衡去控制复杂度的影响范围。本文则从管理人员和意见、产品设计本身两个方面去应对复杂性的难题,特别适合以拥有“复杂业务逻辑构成的中后台产品”和“复杂成员身份组成的多元化团队”为标志的1688,也推荐给各位toB产品的设计师看看。

我写过一篇文章:《数据驱动的界面设计》,在大家对它展现出前所未有的热情和兴趣后,我觉得应该聊聊与此类似的重要话题:管理复杂性。

项目进行过半后,当设计师做设计概念提案时,如果没得到任何微笑、点头确认等形式的反馈, 各位一定明白那种令人不安的感觉。它有时会带给我一种被吓尿的感受,因为你知道还有很多复杂问题没有浮出水面,待基本问题解决后才会出现。假使你无法搞定它们,你的产出会受到影响,甚至会导致产品被扼杀在摇篮之中。

产品设计中的复杂性以两种方式呈现:1)管理人员和意见的复杂性。2)产品设计本身的复杂性。它在产品设计中并非像功能、用户和涉众那样显眼,因而让我吃过一些亏。在此我愿意分享一些见解,帮助大家学习如何在大型设计项目中应对这些复杂性。

改变对话方式

我们从改变对话方式开始,因为这是一个面向管理设计项目的主题。作为设计师,我们经常从其他设计师那里接过项目或者需求,并接受它们的现状。刚开始我们在只掌握了很少信息的情况下,都会试图把设计做好,但往往会因为应对不断变动的各种限制,被迫在设计上妥协,最后结果只能是令人失望的。

产品设计困难的一部分在于高风险的环境中,会夹杂许多人的意见。可悲的是,设计的发声还不属于这些意见之中。许多设计师很自然的就开始抱怨公司的业务,其实应该责怪的是设计师本人。

“作为设计师的责任之一就是改变对话方式,我们需要教育客户、老板和团队如何制定成功的设计流程。”

这并非易事,有时候我会觉得设计理念的宣讲是对牛弹琴,但它确实没有捷径可走,我可以分享一些技巧看看是否对大家有帮助。

预先引导

项目启动时,我会给相关涉众快速介绍设计流程,展示关键阶段和期待的设计交付。然后在项目的不同阶段,我会提醒各位目前项目进展以及接下来的目标是什么。

1
图1、流程案例与交付时间线

为了更好的解释流程,我认为说明“何种反馈是我期望得到并且何时得到”非常重要。有时候我甚至会解释反馈为何是必须的。如此一来,各方对如何帮助设计成功就建立起了共同的责任。

向上交流

无论何时启动一个设计项目,我都会要求跟老板见面。通常是CEO或者我能够触及的最高级别负责人。我希望从他们那里直接了解愿景及期望结果。

我会对此进行详细的记录,并视图捕捉与愿景和期望有关的情绪与声音,在宣讲设计决策时可以派的上用场。这点很有效,因为没人愿意与老板争辩。

当事情变得像往常一样混乱时,我试着将我在与老板的沟通会议中听到的内容重新强调。作为设计实践者,我们的工作就是以优雅的解决方案实现公司的愿景,没有比“来自管理层的声音”更好的方式来跟大家沟通全局形势了。

共情理解

在需求挖掘阶段,我们习惯将执行者与关键涉众召集在一个房间里,让他们描述对客户的理解。此时的目标是让涉众卸下防御,回头从共情的角度来思考产品。

我们使用了一种名为“共情地图”的设计方法来方便展开讨论。前提很简单,询问你的涉众“不同角色的客户在想什么、做什么、说什么、听什么以及感受到什么”。我们经常在产品的某个具体场景或者交互细节里为2-3名关键人物角色去使用共情地图。

2
图2、来自团队各方对共情地图一知半解的描绘

在一系列项目中使用这项技巧之后,我们得到了惊人的一致反馈:“这是大家第一次跟所有高管在一个房间里谈论我们的客户,确实很有见地”。因此我们沿用了这种方法,正如上图所示。

初看起来有些做作,但跟系统真实用户任务及洞见挖掘联系起来时,这种方法就很有效了。在许多情况下,那些我合作过的从未参加如此严格设计流程的涉众们,恰好从此开始以良性的方式帮助我们建立了设计权威。

知悉频度

如果你正在对现有产品进行整顿,经常会发现一大堆功能有必要在重设计时进行调整。大型软件研发的常见问题是,往往使用一套设计方案去适配所有情况。换句话说,用固有的产品形态应对不同的用户及场景。这类产品如有标签的话一定会是#复杂的#。对接这样的项目是很有挑战的,只有熟悉用户的使用频度才能成功。

了解一个功能、页面、标签或者输入框究竟有怎样的使用频度,能帮助你很好的处理优先级。这样可以非常有效的找出客户每天使用及划掉从来不用或者使用很少的功能,来帮客户梳理已有页面和元素。这就是我们常说的80/20法则(选出80%时间使用的功能并划掉其它功能)。

3
图3、要求客户勾出频繁使用的内容,划掉几乎不用的内容

上图是某个项目中我们为具体用户角色抽取关键因子的产出。目标是了解人们经常使用的功能以便在重设计流程中做好优先级排序。


找准始末

多数情形下产品意味着终结,产品的需求通常来自某处,对应某处进行产品的输出。

人们很容易陷入像素级别设计的细节流程之中,而忽略产品的开始和终结。用户不大可能在未受干扰的情况下,在适配的视网膜屏幕上紧盯你的产品细节。你应该更多的问自己“信息从何处来?”以及“信息接下来要去哪里?”

这些问题的答案对理解你app的上下文有关键作用。你产品所处生态系统的复杂性对设计的影响巨大。你可能获悉你的产品与超过30个的其它窗口在桌面并存,你的产品主要用于户外的平板电脑上或者其它意想不到的用途。

4
图4、走访中了解到人们使用截然不同的方式来使用产品

上图即该思路的实战案例。在现场采访中,我们将用户实际使用产品的情况与从涉众处听到的情况进行了对比,令人惊讶的是,每一个参与用户使用产品的方式完全与想像不同。

弄清楚用户集中使用什么功能,对其它产品和任务的关注度如何,决定了我们自身产品的重设计策略。

平衡可发现性及易学性

在手机上下载新app时,在应用商店只有一小块区域供其展现关键价值,如果无法引起人们的兴趣,那么这个app可以说已经挂了。这就是提升可发现性的原因,作为一个消费者你可以选择使用该产品,也有可能是你忽略了它而别人在使用它。

这类可发现性的不足甚至在企业级软件中也经常体现。我们已经听到客户有关“对用户无法找到某项功能的担忧”的批评,因此我们得让这些功能更加突出或者更容易被发现。如果经常这么做会怎样?没错,事情变得更加复杂更加糟糕。

这就是我们经常为易学性发生争论的地方,并非每个功能都需要大张旗鼓的宣传,用户能轻松学会有些交互,好的交互能让用户使用一次就学会。

这就是关键问题,复杂系统需要在可发现性的代价上对功能做优先级排序。我们的任务是揭示用户的主要用例并且让它们尽量符合直觉。用户绝非需要去“发现”这些常用功能,正如他们不应该在使用产品的时候依赖文档。

清爽度与清晰性

企业级产品的一个极大挑战是如何管理信息密度。页面上出现太多信息会将用户置于太过直观的繁杂中,太少信息则不容易形成有意义的见地。那么,它们如何平衡呢?

1、清爽度

有时你得在狭小空间容纳许多信息,而不是将其全部展示。此时,我们一般建议使用渐进式揭露策略来梳理界面,这是一种用户兴趣驱动的信息保真度的原则。

5
图5、渐进式揭露-兴趣驱动的进阶信息展现

上图即这种思路的案例。界面上的结构式信息中仅有核心元素是可见的,更多细节信息在用户需要时再作立即呈现。当然这样造成洞察速度受到一定影响,但你能得到一个更清爽更简洁的用户界面。

2、清晰性

另一方面,有的产品需要主干信息具备一定可见性以便顺利完成任务。金融、医疗保健和电商等行业的产品具备众所周知的复杂度。

当不得不保持一定的数据密度时,尽量做到在清晰性上的精细展示。使密集的用户界面更容易辨识的做法是利用超一致清晰的视觉语言。

6
图6、系统性的使用颜色、字体和标签来确保界面干净和简洁

这种一致性意味着实行极具约束性的规则:

字体变形

按钮样式

简单导航系统

与系统有关的:

颜色选择

标签

微文案

以上都形成了一个优雅的方案。这个话题当然需要更全面更深入的描述,我们暂且聊到这里为止。

标志性的动画交互

过去我们曾花费无数时光专注在设计各类线框图及与之相连的各种线条、方框与箭头。更糟糕的是,这样的交付物无法让客户更好的理解并导致错误的假设,引发令人费解的讨论。

我们在展示动效概念时无数次观察到观众兴奋的表情,因此我们开始在标志性的交互环节使用基本动效来传递设计意图。

7
图7、早期进行导航概念动画设计有助于改变静态设计沟通困难的现状

即时是使用基本的灰色线框,这些动画也能消除沟通的歧义。它并非完整线框图的替代品,但确是一个能帮助人们在同一个设计上化繁为简的利器。

满足需求并超出期望

亨利.福特最著名的格言很精准了描述了它“如果我问人们他们想要什么,他们会回答更快的马。”

客户经常需要“更快的马”,甚至可能对它的外观和工作方式有一定想法。是否相信它时常引发不必要的复杂性。正如大多数设计师一样,我们经常被要求设计一些无法使人兴奋的功能。然而,完成需求很重要,但完成正确的工作更重要。

这可能被看作对创新概念的呈现有所忌讳,尤其是这些概念都并非需求范围。当对如何改进和简化有了一定想法时,我们尝试创建一个极点视图并让涉众以全新的视角来思考问题。

8
图8、展示超出期望的想法或许能引发创新思考

我们的目标是通过基于依据和数据的理性执行,建立与客户之间的信任。我们不断挑战假设,将周到的想法摆上台面沟通,客户通常尊重并且普遍接受这些事实。

结论

设备、app访问数据的变化导致设计以令人激动的方式进化着。不到两年之前,为笔记本、手机和手表而设计的思想还比较罕见,如今却成为设计必备基础。交互设计的格局不断壮大,对复杂性的管理能力也要求更高。

过去的日子里为诸多客户打造伟大产品的经历如此有趣,如果有幸与你类似,希望这些想法能为你的下一个设计项目带来启发。

原文地址:

https://medium.com/truth-labs/designing-complex-products-8f9289ab26c9#.ijjaoq7po

译者:
阿里巴巴1688事业部/无线UED/舒舟

【译者注】Adobe近日发布Adobe Experience Design CC(原Adobe Project Comet)公测版,新兴的原型工具Silver被InVision收购,业界类似事件的发生再次掀起了原型工具讨论的热潮。尽管当前阿里集团各团队的研发流程不尽相同,各有千秋,但原型对团队的帮助却越来越明显。 译者上家公司的Scrum团队就是在Sprint中以交流、草图和原型为主,文档输出逐渐弱化,可惜5年前的设计工具还没有发展到这么成熟的阶段,很多创意只能依靠静态的paper prototype沟通。这是设计师最好的时代,原型设计再次成为设计师必备技能,那么应该以何种心态和思维方式来对待原型设计呢?相信这篇文章可以给部分设计师带来启发。

本文内容经过即将出版的新书《Sprint:搞定难题验证想法5日秘诀》授权和许可改编在medium发表。

很荣幸能够在第一时间收到我的三位Google风投合作伙伴Jake Knapp, John Zeratsky和Braden Kowitz编写的新书《Sprint:搞定难题验证想法5日秘诀》。几年之前,Jake就引入了敏捷开发中Sprint的概念,它是通过设计、原型制作和同客户验证创意来快速回答关键问题的流程。从某种程度来说,它是业务策略、创新、行为科学、设计思维等内容的合集,是一种能够适用于任何团队实战检验的流程。它被广泛运用到他们在GV所投资公司的工作流程中,例如Slack,Blue Bottle Coffee和Foundation Medicine。如今,这些方法被编写成一本书,这样团队可以在任何地方开始尝试自己的Sprint。

一个Sprint发生在短短的五天内。周一,分解需要解决的问题。周二,在纸上用草图描绘有竞争力的解决方案。周三,决定如何将创意转化为可检验的假设。周四,推敲出一个原型。周五,与真实用户进行测试检验。

Jake邀请我从书中选择一个章节发布简要摘录,我选择了自己最喜欢的一章内容:原型设计。Sprint提供了良好机会,在你正式开始打造MVP(敏捷开发概念,最小价值产品,被广泛用到精益设计流程中)之前,就能从这些时刻与原型保持互动的客户身上学习。现在你就可以随处预订本书,来了解相关内容。

0*VmBiscec4cJRiteZ

原型设计思维

一个长着方下巴的西部牛仔站在酒吧门外,他调整帽子后瞥了一眼满是尘土的街道,发现五个黑西装的男人骑在马上,手中紧拽着散弹枪。远处的街上,商店周围有村民在交谈。尘土飞扬如旋风,无人说话,但大家都清楚:镇上有麻烦了。

如果看过一部老的西部电影,你可能非常熟悉这一幕。大量的情景剧中,好人戴白色帽子,坏人则是黑色。小镇看起来是影片中最真实的部分:隔板建筑物、木板通道与大门随风摇曳的酒吧。

当然,这些复古西式电影场景从来不是走完全写实的路线。有时候,导演找到一个看起来不错的拍摄地,比如废弃的鬼城或者风景如画的意大利村庄。但大多数电影都在好莱坞的某套外景中拍摄。牛仔身后的酒吧?仅仅是一个虚幻场景而已,外墙之后什么都没有。

这对观众来说没有什么区别。当看到小镇的一段时间里,我们完全沉迷在故事之中。无论是虚幻场景或者鬼城,沉浸的想象力发挥了作用,让一切看起来似乎那么真实。

在一个Sprint中,周四即虚幻场景。当你对一个正在跟进的问题获得灵感或解决方案时,不需要花费成年累月来构建它。你能够在一天之内就做出原型,让一切显得那么真实,正如复古西部电影中的虚幻场景。到了周五,你的客户就像电影观众一样,会忘记周遭一切虚拟的场景而专注于体验产品。

虚幻场景比你想象中更容易搭造。比如你正在进行一个需要100天完成的项目,能做到90%的程度已经足够逼真,从而方便进行测试。简答的数学判断是,你需要花费90天来达到90%的程度,这样你得在3个月左右之后才可以测试。不过,要是仅仅做一个虚幻场景,便能在一天之后就达到90%的程度。

“哇,伙计!”你可能认为这有点扯。正如周四早晨时,除了白板上的涂鸦与纸上的草图你还未做任何事情,我们能指望在一天内制作出真实的原型吗?这是否不可能呢?确实不可能,除非你已经在Sprint前三天中完成了最困难部分的工作。使用一个故事板来移除所有产品功能范围的猜测,画出解决方案的草图,配上文字和细节说明。这时候你已经准备就绪,能够利用合适的技能来打造原型了。

没错,制作一个更完美的原型需要更长时间,但这样做的话只对学习进度有所延缓。如果产品设计方向无误,这些都无所谓。但面对的现实往往是并非每个创意都是对的,无论你是冒险尝试一个大胆想法,或者仅仅在无法确信时寄望于及早弄清方向。在错误的事情上浪费时间无疑最让人心烦,也许最大的问题是,你越花费精力投入的东西,不论是原型或真实产品,你越无法承受测试后的糟糕结果。仅一天的投入,你还能接受反馈及时调整。要是三个月的投入,或许你在发现错误后已经觉得回头太难。

0*TDee7qOeG9q7wkcH

0*a6GJO9VXfxT7EVTd

0*U-6d1QR3c3HEfarv

起初,你处在以上图表的甜蜜点,仍未确信你的想法是否靠谱,万一测试结果不理想,你会很容易调整或者抛弃想法。如果你相信虚幻场景的力量,很容易像图中的弧线一样在短时间内达到90%程度的效果。不需要管道,也没有布线,也没有结构工程,只要搭建一个虚幻场景即可。

或许做一个虚幻场景让你和团队都感觉心里没底,为了及早测试想法,你需要在观念上做临时改变:从完美到恰好为止,从长期品质到暂时模拟。我们称之为原型设计思维,它由四个简单原则组成。

1、万物皆可原型

这么说听起来有点老套,但确实如此,请务必相信。如果在进入周四时怀着乐观的心态,保持总有方法制作原型并测试产品的信念,你就能搞定。在下一章节中,我们会聊聊制作硬件、软件和设备原型的具体方法,它们可能对你有帮助,可能需要你充分利用各类资源来自己搞定。只要保持乐观并且秉承原型设计思维,几乎总有办法。

2、原型阅后即焚

不要试图制作任何不愿意抛弃的原型。切记:这个点子可能不靠谱。所以不要让自己容易沉溺在花费数日准备原型的想法中,减少对原型上额外工作回报的期待。与此同时,迷恋上可能会被证明失败的方案,你会更加失落。

3、原型点到即止

原型存在的意义即验证假设,所以请保持它聚焦在目标上。我们不需要一个完整功能的产品原型,只需要被测试的与用户互动的部分看起来像真的一样。

4、原型必须真实

为了获得周五检验结果的准确性,不能要求客户凭想象去完成测试。你得展示真实的原型,如果这样,客户的反应将是真实的。

怎样才算真实?周五测试原型时,你希望客户的反应是自然真实的。要是仅仅出示虚幻的原型,比如手绘的纸上原型或者简单的线框设计,是没法奏效的。

一旦客户无法完全沉浸在真实场景中,他们就会自动切换到反馈模式。这种模式下的客户会努力表现的更有帮助并绞尽脑汁的提供建议。在周五测试时,客户的本能反应更具价值,而反馈的意义就要大打折扣。

反应和反馈的区别很重要。人们往往希望通过原型来验证客户的本能反应,在一天的日程之内越真实越好。我的合作伙伴Daniel Burka说过,理想原型应该拥有“金发女孩的品质”。要是原型质量太低,人们不会相信这是真实产品。要是原型质量太高,会耗费太多精力以致于无法按时完工。原型需要“金发女孩的品质”,不要太高,也不算太低,恰到好处即可。

0*S055Tip5b7H2ra9X

诚然,“金发女孩品质”对不同的产品要求也不同。该书中收录了5个团队的详细案例,从iPad应用到医学诊所的原型都有。当你阅读他们的故事时,你将了解每个团队如何确保原型达到“金发女孩的品质”,并且学习到他们是如何将原型设计思维融入独特的挑战之中。

原文地址:
https://medium.com/galleys/the-prototype-mindset-396c979a356f#.2puoc7uep

译者:

阿里巴巴1688事业部/无线交互/舒舟

【译者注】在移动设备上进行可用性测试是大多用户体验设计团队既关注又头疼的部分,市面上的各种专业测试工具各有利弊,如何抉择是一道难题。性能好、对用户干扰少、录制质量高、能记录用户面部表情和手部操作、价格便宜等要素成为大家在选择工具与方法时重点关心的内容。本文作者Colman Walsh提供了一种讨巧的方式,能较好的解决测试中大部分问题。尽管不完美(无法记录用户与移动设备屏幕互动),依旧值得一试,有精力的同学可以结合Lookback(https://lookback.io/),或许能捣鼓出一套更完善的解决方案来。

移动端令人难以置信的增长趋势和移动设备的全面普及,让用户体验设计师的工作更具挑战性与趣味性。这意味着移动应用与移动站点的用户测试成为用户体验工具中的重要一环。

与桌面环境有所区别的是,移动端可用性测试缺少像Silverback或Camtasia这样开箱即用的软件记录工具。

即使不开发一款移动应用,你的网站大部分流量也可能来自于移动设备。执行常规的移动可用性测试,便成为衡量该渠道是否正常工作的唯一途径。

此时需要一定的动手能力,经过多年实验,我们认为已经找到了最理想的手段。如果你想简单测试iPhone或Android的体验,这套方法不仅简单,性价比高,而且效果出色。

旧法:线缆加胶带

过去我们使用“雪橇”将智能手机与摄像头固定在某个位置,从而方便我们记录用户在屏幕上的行为。(要制作一个雪橇,我们在五金店买了一些丙烯酸通过烤面包机将其弯曲成型,非常有趣)

我们将摄像头用胶带粘贴在雪橇上,并且把手机用胶带和尼龙搭扣装好。回头看来,这种做法还是很简陋的。用户不得不经常用两只手托稳手机以保持雪橇稳定,当然也谈不上自然体验。

Mobile-testing-old-way-500-opt
图1. 用户正在使用绑着摄像头与雪橇的手机

从技术上说它是不可靠的。由于使用了一台笔记本的双摄像头(雪橇上的摄像头和笔记本内置摄像头),我们不得不同时开启两个摄像应用,这导致了一定性能问题。要么在设置中造成内存紧张,要么在测试中摄像头熄灭,往往两者兼而有之。

还有其它一系列问题,比如屏幕炫光和摄像头失焦。总得说来,设置测试环境非常耗时,而且性能不可靠,测试环境并非最优。尤其是客户在身边时,压力尤其大,但这也是那时我们能做到最好的情况。

新招(当然更好):无线

理想情况下,用户应该无法看到测试环境与软件。我们希望创造尽可能自然的测试环境,只有用户与智能手机,没有线缆、雪橇、摄像头或胶带等干扰。

对于用户体验团队来说,在用户测试中不断学习和洞察才是关键。我们不希望一直为设置测试环境或者摄像头熄灭而费心。

我希望通过介绍一个简单的设置来达成这些目标,它帮助用户体验团队专注于真正重要的事情,让用户专注于他们的手机。因为它非常可靠,所以我们经常在培训课程中面对客户使用。

接下来重点谈智能手机的可用性测试,我们使用一台MacBook作为记录设备。当然,这种方法也适用于Windows PC。

Mobile-testing-wireless-500-opt
图2. 无线测试的方式更加自然

【第一步:安装软件】

产生神奇效果的关键在于Apple的AirPlay无线技术,该软件能让你把流媒体(音乐、视频)通过无线的方式传送到Apple TV上。

因此,首先你需要购买并安装一个叫做Reflector(大概15刀)的软件,它能将笔记本变成一个AirPlay信号接收器,像Apple TV一样。这样一来,我们能够把用户智能手机屏幕以镜像的方式投射到笔记本电脑上,用户屏幕上的内容将在笔记本屏幕上同步出现。

现在我们可以不需要额外摄像头来录制用户屏幕了,只需要在笔记本电脑上通过屏幕录制软件进行录制即可。强烈推荐ScreenFlow(大概99刀),不但可靠性高,并且在测试环节中能通过笔记本电脑摄像头捕获用户面部内容,这是任何可用性测试的重要组成部分。

【第二步:设置显示器】

这一步是可选的。因为我倾向于使用外接显示器,使主持人和记录员不必同时瞥过用户肩膀来观察行为。这样也能将用户干扰降至最低,用户不会看见面前笔记本电脑屏幕上的巨大手机屏幕投射,它会出现在外接显示器上。

所以,为你的MacBook连上外部显示器,如果外接显示器与笔记本屏幕显示一致内容,意味着这不是我们希望设置的镜像模式。打开“系统偏好-显示”,将“镜像显示”去掉勾选。

Mac-system-preferences-500-opt
图3. Mac的正确显示设置

【第三步:设置Reflector】

要将智能手机内容发送到笔记本电脑屏幕上,只需打开Reflector,在笔记本电脑屏幕左上角的工具栏上可以看到它的图标。

Mac-reflector-toolbar-500-opt
图4. Reflector打开后你将看到的图标

【第四步:对智能手机进行镜像】

现在就是见证奇迹的时刻!如果你使用的是iPhone,从屏幕底部上划,启动AirPlay。然后从列表中选择你的MacBook,再打开镜像按钮。

iOS-mirroring-setup-500-opt
图5. 在你的iPhone上打开镜像

你的iPhone应该出现在外接显示器的中间,是不是很神奇!(要是iPhone出现在MacBook屏幕中,只要把它拖拽到外接显示器上即可)

使用Android 4.4.2或更高版本设备的,从屏幕顶部向下划动进入设置,选择“投射屏幕”选项,然后选择你的MacBook。

注意:你的智能手机和MacBook必须保持在同一Wi-Fi网络中,要是出现问题,这是故障排除首先进行的事情。

【第五步:设置ScreenFlow】

开始录制前,打开ScreenFlow。初始设置对话框弹出,你需要做如下设置:

ScreenFlow-recording-setup-500-opt
图6. 设置ScreenFlow

1、“录制桌面来源”

选中并确保从下拉菜单中选择你的外接显示器。(参照示例中的2270W)

2、“录制视频来源”

选中并确保选择默认选项“FaceTime高清摄像头(内置)”。

3、“录制音频来源”

选中并选择“内置麦克风”。

【第六步】开始录制测试内容

让用户处于MacBook正前方,这样你能在ScreenFlow的预览中看到他们的面部。然后按下红色录制按钮,搞定,现在已经开始录制了。

当你与记录员在外接显示器上观察用户行为时,用户正端坐在空白的笔记本电脑前,像往常一样使用手机,没有线缆、胶带、摄像头或者其它干扰。

在以下截图中,我在iPhone上把玩Spotify。你能看到,在录制手机屏幕的同时,ScreenFlow提供了画中画窗口来显示用户面部表情,完美的可用性测试。

screenshot-of-recording-500-opt
图7. ScreenFlow输出录制内容的截图

当然,这种方式依旧不能展示用户的手指与设备互动的过程。但总体说来,它的优点还是很多(见结论中的列表),算是一个无可非议的好方法。

【设置总览】

需要明确的是,让我们回顾下设置的全貌。用户应该坐在MacBook面前,使用自己的手机,主持人和记录员应该坐在附近,通过外部显示器观察用户行为。

user-testing-overview-setup-500-opt
图8. 测试中房间与屏幕等设施的安放方式

使外接显示器正面远离用户视线,否则大屏幕上的手机屏幕影像会干扰用户的注意力。


结论

我们介绍的这种方法有诸多优点值得一试:

1、简单

首次将所有环节调试完毕之后,接下来每次只需要花费5分钟左右来设置。

2、可靠

它并不完美,但软件崩溃和设置问题出现的几率很低。然而,雪橇+摄像头的方案出现问题则是意料之中的事。

3、性价比高

假如你使用MacBook,整个解决方案只需花费不到200刀。(与之对应,专业高端的可用性测试软件Morae售价2000刀)

4、专业

高质量并专业的输出,看上去不像是黑客技术。我们把录制的内容与参与的客户、高管们分享,效果很好。

5、灵活

这种方案适用于主流平台:PC、Mac、Android和iOS。

6、方便

因为不需要任何胶带或者尼龙搭扣,测试者还能使用自己的手机,这让你的测试更加自然有效。

原文地址:
https://www.smashingmagazine.com/2015/12/simple-and-painless-mobile-user-testing/

译者:

阿里巴巴1688事业部/无线交互/舒舟

【译者注】Mobile First(移动优先)大概是移动设计师听到最多的设计理念之一,2011年Luke Wroblewski大神提出它时,打破了原来“先完成web设计再移植移动设计”的常规方式,为移动设计注入了一针强心剂,一时各大企业和团队纷纷投入,推动了移动设计的快速发展。时过境迁,移动优先的理念虽然没错,但如今部分企业表现的有些矫枉过正,盲目投入移动端而忽视了用户使用最频繁的大屏终端,实则割裂了原本流畅的体验流程。本文作者提出了“最重要的是屏幕,而不是设备”的观点,表达了对移动优先设计理念的看法及忧虑,或许能给大家带来不同的思路。

数年来,人们被“移动优先”和“只做移动”的理念安利了一次又一次。在iPhone颠覆行业之前,我们已经开始以“移动优先”而不是“web优先”的理念来研发软件了。与“移动优先”相关的书籍、课程和会议大行其道。既然说移动化是未来的趋势,那为何几乎所有移动端驱动的企业都在更大的屏幕上开发web应用?专门为大屏打造web应用的案例有:

1*j_lSZYo5otXmNSAKB2qWDQ

2

3

4

即使聊天类应用也有适合大屏的web版本,例如Facebook Messenger与WhatsApp。

屏幕而非设备

无论何种情境应该适合何种尺寸的屏幕,如今变化的节奏依旧很快。不久之前,人们还站在手机派和平板派那边,嘲笑大屏手机派。时至今日,新设备的最流行款变成了大屏手机(尽管如今我们不再这样称呼),而平板的销量则停滞不前。最佳屏幕尺寸为多少依然是一个变数,更何况手腕上的小屏幕尺寸可能会在12-24个月内再度发生变化。

该怎样看待它?我们一直都使用错误的参考框架来提及“移动”。多年来我始终主张移动的不是设备,而是消费与生成信息的渠道。对我来说,迷恋特定设备不是一个好办法,因为设备变化太频繁;迷恋iOS和Android操作系统也不是一个好办法,因为它们都非常重要(而不得不重视);迷恋手机和平板依旧不是一个好办法,因为它们已经融和成为一个具备更大屏幕的便携式移动设备分类,并且一直在发展。信息藉由屏幕展示,而与设备无关,这才是关键。

颇具讽刺意味的是产品研发时,我们却只能依赖尺寸最大的屏幕尺寸。多数人一天工作的大部分时候都面对着一块巨大的显示设备,或者说无论是笔记本电脑还是桌面显示器,一块大屏幕主导工作的习惯不大可能改变。

因此,如果你正好从事软件设计工作(这些软件包括企业软件到日历及时间管理应用,出售给雇员或者企业使用),最好大屏和小屏同时考虑,而不仅仅想到移动优先。

实际上,如果你负责设计的应用有任何超过140字符或者1张照片的内容创建,那么它在大屏上效果更佳。这篇文章我不是用手机或者平板写的,因为那会异常痛苦。我只需要一个大屏,而不是其它方式,因为大屏能更好的支持诸多类型的输入。

“只做移动”是一类新型的商机么?

对于许多消费者服务,能够明确的是,使用移动设备的频率远高于桌面设备,但无法确定这种状况有多么普及。对许多人来说,能够明确的是,移动设备的屏幕是他们大多情况下的主要屏幕,但无法确定这是他们唯一的屏幕。能够明确的是我们的生活被各类屏幕充满,但无法确定所有的屏幕都是手机屏幕。

因此,假如屏幕比设备更关键的话,“只做移动”的思路可能是消费者业务领域的一个小商机。随着这些颠覆性移动业务的成熟,企业认识到除了小屏幕之外,他们还需要为用户的大屏体验服务,这种需求远比设想的频繁。移动端屏幕依旧是他们最重要和最主要的渠道,但已经不是唯一的渠道了。

我们也能畅想其它诸如电视一样的大屏将会不断发展而变得成熟,从而更好的运行基于web的软件。

想对此更加熟悉的话,假想一下大多数人是如何度过一天的,他们的主要触及的屏幕有:

5

想通这一点的关键在于,我们大部分时间都花在一块大屏前完成工作任务:

6

移动化对商业软件是次要的吗?

许多被建议全盘移动化的企业应该仔细考虑下人们在工作中使用手机的频率。记得观察他们的工作电脑,对于新闻、运动、社交、聊天和私人邮件,大屏幕更靠谱。

现在,想象一下你为人们打造一款工作专用的软件。这可能是一款生产工具,例如Google Docs,Intercom,Slack,Basecamp,Trello等。对于它们来说,大屏很可能是最重要的场景,大屏上使用的应用比移动应用更重要。相对于大屏应用,移动应用扮演了不同的角色,而大多情况下是辅助型角色。

“移动”服务企业也许前景不妙

标榜“只做移动”甚至“移动优先”(比如移动营销服务,移动广告服务)的服务企业似乎偏好定位于短期成功(正如企业寻求移动专家帮助他们快速成长),而从长期来看则一片坎坷。为了提供完善的服务,他们需要追踪用户和屏幕之间的行为。 只打算在手机上做广告很罕见,它仅存在于那类“只做移动”的产品的临时状态里。认真想想,为何在Intercom会平等对待web、iOS和Android平台。我们追踪人们的行为,当他们在屏幕之间转移时,给他们数字行为一个完整的画面。只给出某人在移动设备上的行为是不完整的,这会导致信息传递和广告的目标偏差。

聚焦在任务,然后屏幕,而不是设备上

如果“移动优先”不再成为你的教条,那会如何?在Intercom我们信奉“把事情搞定”的框架。聚焦在你的用户需要搞定的任务上,然后通过在最合适场景下提供最好体验来提供最佳服务:或许只需瞥一眼手表即可,或许40寸显示仪表盘的屏幕才是最好。没人会把iMac搬到海滩,也没人会在甲板上用手机写文章,想想最适合输入的屏幕,最适合输出的屏幕,提供能充分利用情境上下文的服务方式吧。

原文地址:

https://medium.com/intercom-inside/why-mobile-first-is-outdated-f10a3dc357bd#.yaeayz9t6

作者Paul Adams,Intercom的产品副总裁,本文来自于Intercom内部博客。

Intercom是一个提供个性化和定制化服务的平台,旨在方便web或移动企业与客户更好的沟通。

译者:阿里巴巴1688事业部/无线交互/舒舟

【译者注】作为一款设计工具,Sketch只用了1年多时间,就迅速风靡于移动设计师之间,无论是我所在的团队和公司,还是国内外各大设计组织,都对其推崇不已,“设计流是否支持Sketch”也成为移动原型工具的重要竞争力。本文是Silver移动原型工具作者在Medium上的SWLH(Startups,Wanderlust, and Life Hacking)话题下写的一篇介绍文章,从各个方面介绍了这款原型工具的优势和特色,相信对各位移动设计师有一定的吸引力。

Silver是一款便捷进行移动设计流程的工具,它包含:一个iOS应用、一个Mac应用和一个Sketch插件,三者之间无缝衔接,完美配合。

背景

2015年初,为了找到完美的原型工具,我将Silver作为一个兼职项目进行研究,研究中发现了一些很棒的工具,包括:Framer, Pixate, Form, Origami, Invision, Flinto, Marvel, Proto.io和 UXPin。每一项工具都独具特色,同时也为我的设计流程添加了不少麻烦。这些工具部分适合微交互设计,部分适合流程类原型设计。当然,在完全没有整合它们之前,在设计流程中的每一步进行工具的切换非常痛苦。

可以说,我无法找到一款完全满足所有需求的工具。

我的需求其实不麻烦:

-开始设计移动应用之前,先进行用户流原型设计。尽管每次只能设计一个页面,但完整的故事需要一个页面流,我不想对设计失去全局控制。

-能在移动设备上实时预览、感受和体验自己设计的应用,而不是导出图片、同步文件或者绘制热点。原型的制作越简单越好,否则我会立即放弃使用。

-先进行低保真设计并进行测试,从测试结果中不断迭代优化设计,在不切换工具的情况下逐步增加原型的保真度。 -能展现应用开发时面临的真实技术限制,避免设计出无法落地实现的应用。 -作为目前界面设计的最佳工具,我希望可以在Sketch中完成设计,该原型工具能与Sketch深度整合并支持其相关插件。 -一旦完整流程确定后,我可以基于页面制作微交互。Framer是我个人最喜欢的页面级别交互的原型工具,因此该工具最好能够与Framer兼容。

-最关键的地方在于减少设计流程中不需要的琐事,这样我才能将精力花在与客户沟通、进行深度研究或是设计多套方案供测试等方面。

与其抱怨缺少这么一款能满足我所有需求的杀手级原型工具,还不如自己动手。我具备Sketch插件的制作经验,对其内部原理也有所了解,因此立即选定了基于插件的解决方案。我立马召集了自己心中最牛的插件开发者Andrey跟我一起进行尝试。

以下是我俩搞定的Silver基本功能,以及它们如何帮你提升设计效率的建议:

与Sketch深度整合

将Silver应用安装到Mac上之后,你还需要安装一个Sketch插件,用来在后台与之配合。Silver应用出现在菜单栏上,用作与移动设备连接,其它所有功能都融合在Sketch及插件之中。

1*uu0hx3PVRYRsMtQ-TfK6uw Silver菜单栏应用,连接与断开状态。

Silver的内置逻辑能帮你把设计转换为Sketch文档中的原型,我们的目标是消除导入、导出、同步以及切换工具等设计流程中的琐事。

通过WiFi或者USB连接设备

如果你正在设计移动应用,务必注意,必须在移动设备上去预览界面的最终效果!

借助iOS设备安装的Silver预览应用,你不仅可以实时关注Sketch中艺术板(Artboard)的微小修改,而且可以预览使用Silver Sketch插件创建的设计流程。

通过WiFi连接的设备能够让你随意在办公室展示你的原型,除此之外,Silver还可以通过USB连接的方式做到这点,而且镜像展示更迅速,它能够根据设备是否插上自动判定使用USB或者WiFi。

设计工作流而不只是页面

Silver有一项颇受喜爱的特性,它支持Sketch内通过连接艺术板上的图层形成工作流。选择一个图层并敲击键盘上的C就能创造一个连接,同时这样也生成了一个Interface-Builder(Mac OS X下用于设计和测试UI界面的应用)风格的端点连接器,它可以通过拖拽连接到目标艺术板,选择触发转场及具体转场类型的手势。

当你用Silver创建了一个工作流并且在iOS应用上进行预览,你能体验到一个拥有真实转场的iOS页面集合。这不仅让你的原型更加真实,而且帮助你更好的利用iOS导航结构进行组织。

Silver支持三种类型的转场顺序:

1、推移转场

【视频】创建推移转场

https://vimeo.com/145123175

你能使用推移转场来导航到应用内容的下一层级。比如说,聊天应用里从对话列表到对话详情。屏幕左侧边缘右划能够回到上一个界面,也能通过建立一个负责回退行为的图层来实现。

2、模态转场

【视频】合并推移与模态转场

https://vimeo.com/145229320

模态转场用于启动一个独立的要么完成要么明确放弃的任务。撰写新邮件、Instagram上发一张照片、印象笔记里创建一条新笔记,都属于必须在一步或多步必须完成(或者取消)的独立任务。取消一个模态任务,你必须创建一个包含Dismiss Modal行为的图层。

模态转场提供了目标艺术板出入的灵活动画形式,你可以创建一个使用划动手势来进行交互的模态转场。

【视频】使用模态转场创建滑出导航

https://vimeo.com/145230740

3、无转场

假如你偏爱频繁的切换到其它艺术板,可以通过将转场模式设为None来实现。它将即刻以你连接的艺术板取代当前的艺术板。你不但可以用这种方法来展示当前艺术板的不同状态,也可以用来创建一个基于底部标签栏的应用原型,切换标签时不需要任何转场过渡,如下所示:

【视频】使用无转场的艺术板连接创建底部标签应用

https://vimeo.com/145241088

触发核心iOS功能

除了创建设计流,Silver还能创建连接图层来触发:启动摄像头、浏览照片、启动系统邮件、编辑短信、拨打电话或者在默认浏览器中打开一个外部URL地址等核心iOS功能。你不必再通过仿制静态屏幕在原型中来模拟这些功能。

下面我们举个例子,看看如何创建连接来允许用户在他们的iOS设备上浏览照片。将选中的照片填充到一个图层,命名为_Photo。

【视频】创建连接用以浏览照片并显示选中照片

https://vimeo.com/145242395

固定的页眉和页脚

【视频】用Silver创建页眉与页脚

https://vimeo.com/144324822

Silver支持通过键盘快捷键创建固定的页眉和页脚,选中要固定的图层,点击Ctrl+Shift+H来固定页眉,点击Ctrl+Shift+F来固定页脚,就这么简单。与该图层的尺寸和位置的有关变化,都会在预览中自动更新。

实时输入框

【视频】用Silver创建输入框

https://vimeo.com/144331683

有时我们要制作一个需要用户输入信息的原型,比如说简单包含用户名和密码输入的登录页面,或是包含诸多信息输入框的个人资料编辑页面。按照以往的做法,大家可能会制作一个伪造的原型,因为再原型中模拟真实输入框的过程太麻烦。

Silver出手,原型我有。只需要简单设置一下,你可以在Silver中轻松创建常规的文本图层以便在原型中真实模拟文字输入框。实时输入框引入了UITextField对象的一些功能,比如设置占位符、在输入框中显示清除按钮、选择输入键盘类型等,凡是设计需要考虑的状态都应有尽有。

嵌入WebView

【视频】嵌入网页内容及Framer原型

https://vimeo.com/145226520

Silver还能将矩形图层转换成实时WebView,这对于使用HTML构建的应用功能迟早有用,而且在已有内容里添加新设计会更方便。

WebView还支持连接到本地Framer原型,这样你能够将页面级别的交互引入到Framer中,它们与应用的其它内容融合的更棒。Framer中的一个组件依旧可以正常工作,能够直接从Framer代码中调用Silver对应的具体功能。

关于公测

以上都是Silver内测版的功能,仅展示了一些皮毛,年底我们会为最终版提供更强大的功能。

几周之后,我们将限量邀请部分设计师/开发者加入公测,如果你有兴趣,请到silverflows.com注册登记。

有问题或建议,或者想援助我们,请在我们的Twitter账号@silver_flows留言。

想在自己的设计流中用上Silver,记得给我们点赞。

原文地址: https://medium.com/swlh/introducing-silver-lightweight-mobile-prototyping-in-sketch-3-cee46d267f1f#.6ba30fxta

译者:

阿里巴巴/1688事业部/无线交互 舒舟

【译者注】本文是移动原型工具Proto.io的设计团队8月份在自家博客上发表的一篇“软文”,通过与移动设计界大牛们的对话,帮助大家了解在进行移动设计时应该特别注意的禁忌,顺便推了一下Proto这个工具。大家可以回顾一下自己团队的应用正在触犯哪些禁忌,想必会有点意思。读完本文,相信你能找到优化自家移动应用设计的方向。

规则就是用来打破的?这完全取决于规则本身。在移动应用界面设计(后续简称:移动设计)的世界里,大家对美学、手势和动效的看法略有不同。有时一个简单的功能性应用比华丽的应用带来的效果更好,而有时候却恰恰相反。

不过,有些基本规则是人们不愿意去打破的。如果你的移动设计使得用户无法顺利触达关键功能,这显然是行不通的。假使你的文字字号过小导致没人能顺利完成阅读,那么你得回炉重做。浅色背景搭配白色文字?重来吧。

我们试图了解优秀的设计师们心目当中移动设计的7宗罪是什么。经过垂询三组设计专家,我们得到了三个略有区别的结果,看看你是否能从其中找到一致的地方呢。

来自AKTA的意见
Alyssa Burke与Macy Nguyen是AKTA(一个数字体验咨询公司)的设计师,俩人都曾为财富500强的公司以及迅速增长的创业公司效力,参与过原生移动设计项目,为某些机构的顶级项目贡献设计输出。以下是他们认为无法接受的移动设计7宗罪:

1、忽略上下文情境。
目标用户的个人档案(年龄、生活习惯、技术潜能等)与他们的物理环境(室内室外,在线离线,早晨晚上等)会影响许多设计决策。移动设计师应该在迭代流程中充分考虑上下文因素,以降低可用性不足的风险。即使拥有平滑的过渡转场、光滑的按钮和美丽的字体,一些应用也会因为整体界面设计不符合特定用户场景(深色界面用于户外场景:糟糕的移动设计)而失去成名机会。

2、闭门造车。
设计和开发数字产品是一项需要团队协作的工作。即使有项目成员(开发、新人、极客、狂热者、朋友、陌生人、你的哥们儿和设计师潮人)对具体项目内容完全不了解,将设计工作及早并及时推广到整个项目周期中的不同角色之间也是非常关键的。我们需要让他们了解到必要的上下文信息,并持续保持相关信息互通。与其在发布后修复问题,不如在项目进程早期预留调整空间。

3、怠慢开发人员
程序员和工程师(以及偶尔酗酒的码农)不仅是你的同伴,而且是技术先导。他们除了知道哪些能够在现实中奏效之外,还能够如你设想的那般确保你的想法得到完美落地。有些移动设计在技术上行不通,有些或许可行,但这些都需要很多努力或时间在项目中验证。如果不问你或许永远无法确定能否做到。在项目交付时,开发人员会把你的设计成果实现出来,此刻,他们可能很欣赏你,也可能很讨厌你。

4、低估动效设计
随着物联网逐步成熟,数字界面在人们与周围真实世界的互动中扮演了更重要的角色,界面设计的这一部分需要被设计师更加慎重的对待。人类拥有与生而来的本能,从所处环境的变化中得到不同的感知与反应。使用合理的界面动效是一种呈现优先级和重要内容的有效方式。在某些情形下的恰当运用,甚至能够引发用户的愉悦。有兴趣的读者可以了解下迪斯尼动画的12项基本法则。

5、字号太小
比起纸质内容,人们在手机屏幕上进行阅读的精确度和深入度略有不足。正如移动设计拇指触控规则所定义,数字界面的字号最少应该两倍于印刷字号。不同情形适用不同的字体和设置,尤其当用户试图在移动设备上完成多类任务时。为了避免字号太小,还需要优先考虑按钮形状、图片及交互等界面元素对整体体验有何影响。

6、忽略触控目标
许多移动设计师仍然对用户手指大小不同的现状缺乏重视。一旦涉及行动或者任务导向的触控目标,尽可能的使它简单而且容易点击。为老人设计时要考虑触控时的抖动因素,同样为儿童设计时需要考虑点击的不准确性。建议为图形资源周围增加留白区域,以便本质上提升触控面积,帮助提升完成任务的速度。

7、死抠平台规范
在Android和iOS平台上统一一套设计方案有一定局限性,也容易对全局体验目标带来副作用。两个平台上有各自用户熟悉的设计模式,设计师不应该只熟悉规范,而应该探索在两个平台上流行的应用。

来自Moblico Solutions的意见
我们同Moblico Solutions(一家提供移动关系管理方案的企业,其目标是协助品牌“打造更多有意义的移动瞬间”)的一些员工进行了交流,他们不仅为诸多行业客户提供了“如何让他们的移动应用体验更棒”的建议,而且掌握移动设计方面的窍门。以下是他们认为移动设计的7大禁忌:

1、在用户设备上占用过多容量只为了体现存在感
当用户收到“磁盘空间不够”的提示时,会马上遍历手机上已经安装的应用并开始选择删除的对象。如果一个移动应用体积很大,占用了过多的容量却并未提供等同的价值会怎么样?后会有期,用户肯定拿你开刀。记得保持应用在体积上足够轻量,这样至少用户不会轻易把你删掉。

2、在应用启动时及要求允许权限控制(推送、地理位置、摄像头等)
回想下,有多少次我们兴冲冲的下载一个应用并准备开始使用时,一个对话框立马跳出来扫了兴?我不关心这个对话框描述什么内容,只想马上关掉它并继续使用应用功能。它是啥?好吧,菜鸟应用!

3、下载后在使用前就要求登录、注册甚至收费
实际上,这条或许应该排为第一禁忌,很难让人忍受。你能对用户所做最糟糕的事情就是:在他们下载你的应用后告诉他们必须付费才能使用。烂,烂,烂,重要的事情说三遍,赶紧删之。

4、设计的移动应用界面看起来像网页
如果这样,还需要移动应用干嘛呢?要说有一件事情可以毁掉一个移动开发者,那就是把网页的体验缩小到移动端并且称之为移动应用。移动应用应该有其具体优势,只提供缩水的网页体验远不能满足用户期望。

5、粗暴投放广告,或者只提供极难点击的广告关闭按钮
当你在滚动浏览移动站点时,只是手指不小心长按了某张图片就触发了浏览器广告,这难道不是让人烦躁的事情?偏偏还提供极小的关闭按钮,谁能点得到?想要点击简直跟赌博一样。尝试点击关闭的时候还总是因为手指触控面积较大误触了广告,真是要了命!

6、消息推送过载
没错,现在你的应用出现在数百万人的手机屏幕上,它有巨大的影响力。不过,在推送之前请三思,扪心自问:推送是否与用户相关?用户是否真的需要它?当然,你可以在你的移动店铺每次上新时都推送一下,但真的至于么?影响力越大,责任也越大,慎重使用消息推送吧。

7、移动账号缺乏单点登录支持
当移动开发者认同并尊重用户不愿意重复劳动的想法时,最好的体验才可能产生。没人愿意为你的应用重新登录一次。我们得接受单点登录的现行趋势,Facebook在这点上非常成功,继续加油吧。

来自Ideaware的意见
Andres Max是数字创新机构Ideaware(致力于帮助创业团队和财富500强的公司打造有竞争力的移动应用)的创始人。在创建Ideaware之前,Max是Mashable设计团队的 负责人。经历过为众多行业巨头设计移动产品之后,Max对移动设计7宗罪有自己深刻的见解:

1、用户点击后无反馈
看在上帝的份上,当用户在你的应用中进行点击后请给予及时的反馈吧,否则用户会以为你的应用挂了,并且马上退出。

2、无休止的引导
如果使用自己的手机,我只想快速完成相关任务。别问我各种问题或者让我填写乱七八糟的内容。

3、触控热区尺寸不对
请停止把按钮和输入框做的太小,这不是网页。我的手指需要轻松触及行动按钮,而不是要进行精确到像素级的点击。

4、使用古怪的导航模式
想让用户可以快速熟悉你的应用?那就不要以自己独特的方式来组织导航。Apple的人机交互规范和Google的设计指南就是最好的参照标准。导航设计方面别引入争议,从而给潜在用户一个卸载应用的理由。

5、选取糟糕的配色色系
给眼睛一些休息的空间,你不必采用黄黑色文本那样的出挑配色。

6、留白
移动应用需要很多留白空间,把各种视觉元素进行区分,按钮得加大处理,所有一切都依靠留白来提供视觉缓冲。移动端首屏的概念没有网页那么夸张,所以切忌把所有东西都塞到首屏当中。

7、无休止的推送
为了上帝,请不要每天推送20条消息给用户了。用户在收到几条推送后,就会深深的感觉到想要卸载应用的那股冲动。


你心目中的移动设计7宗罪是什么呢?

尽管不同设计师心目中的7宗罪不尽相同,我们依然可以看到不少相似点和共识。最重要的两条是:1、除非确有必要,避免推送消息;2、通过使用符合习惯与直觉的导航,以及提供其当尺寸的视觉元素,让你的移动设计具备可用性。

我们还能想到的一条是:忽略数字原型。在原型设计阶段能够发现很多移动设计问题,以及让它们更具可用性更加出色的宝贵反馈。这也是Proto.io为什么坚持提供强大又易用的原型解决方案的原因。

在移动设计7宗罪清单中,你愿意添加哪些不同内容呢?请在Twitter上联系我们@Protoio。

原文地址:
https://medium.com/@protoio/7-deadly-mobile-app-ui-sins-designers-should-never-commit-c4e1534a90a7#.kajs67p5w

译者:
1688事业部/无线交互/舒舟

【译者注】结对设计并非新概念,结对编程、开发配测试、“男女搭配,干活不累”等观念早已经在软件公司与互联网企业深入人心。去年在荷兰阿姆斯特丹举行的Interaction14大会上,Cooper公司的资深设计师Christopher Noessel就在工作坊中详细介绍了结对设计的好处,并极力推崇“Get out of your own head! Design in pairs”。本文作者Mariya是一家旧金山设计与策略企业Xanadu的创意总监,最近在筹备一本关于设计领导力与创新管理的书籍,她归纳了结对设计的三种常见模式,对使用结对设计方法的团队给出了自己的见解和指导。

结对编程是一种敏捷软件开发技术,两名开发人员在同一台电脑上工作,其中一名主导者负责编写代码,协助者则核对每行代码是否有疏漏,两人的角色根据策略和技术偏好不断轮换。研究表明,当工程师花费15%的额外时间来结对编写软件时,他们能将缺陷数量减少15%以上。

尽管设计与开发有所区别,结对编程的优点依旧能直接体现在结对设计上。两人组成的设计小组聚焦在对方的细节上避免了注意力分散带来的疏忽。每个设计师必须实时解释设计决策,他的伙伴则负责不断验证结果,而不是回顾之前的问题。与他人紧密协作同样提升团队士气,拓宽了产品的知识领域,鼓励主人翁精神并且有利于团队和谐。

鉴于工作的开放性质,设计师通常习惯在跨职能团队中开展工作,最典型的情况即召集一帮人展开头脑风暴,进行设计批判或用户研究。然而,一些设计领导者能通过不同方式(例如线框出稿或者前端开发)来进行有目的的结对设计,以传统的集体行为来解决通常由设计师单干处理的问题,这样可以简化协作,增强创作力并改善输出设计过程。

模式1:主导者与协同者

Alan Cooper在1997年首次提出了结对设计的概念,引入了主导者与协同者的角色。主导者负责最大化的创造尽可能多的点子,协同者则需要分析这些点子,发起重要问题,考虑边际条件,将方案与更宏观的用户或者业务上下文绑定分析。Cooper基于应聘者的性格特征和优缺点,在面试流程的初始阶段就有意识的招聘主导者或者协同者。但实际上设计师经常在两类角色之间切换,这样每人都有机会创造足够多的点子。

当主导者与协同者在整个设计流程之中充分协作时,在项目前期集思广益阶段两者的区别极其明显。举个例子,一对主导者&协同者的组合时常使用一支笔在白板上开始交流,主导者不断写写画画来表达各类概念,协同者则在一边说出顾虑和优化点。比起各自为政或者竞争式发散,仅用一支笔即可推动聚焦和共创。

模式2:领导者与支持者

Adaptive Path公司也让设计师结对负责客户的项目,但两人不是主导者与协同者的角色,而是交替成为领导者和支持者。一名设计师负责领导一个客户项目,同时在别的项目中可能只负责支持工作。这种模式的好处是鼓励每个设计师锻炼自身的领导力和沟通风格,并且在互相学习中拓宽职业软技能。

领导者与支持者结对的模式与初级设计师与高级设计师配对的师徒场景无异,但任何级别的设计师都能从角色切换中获益。Adaptive Path的创始人Jesse James Garrett坚信,“作为支持者时也能不断成长和通过实践成熟。许多设计师认为一旦他们不涉足项目的愿景规划或者承担项目领导者角色,自己就会在职业生涯中停滞不前,其实完全不是这样。”在一个客户的特别项目中,Jesse负责支持他的同事Brandon Schauer,从而有机会观察Brandon是如何在一个略显混乱的团队之中开展产品愿景工作坊的。原来团队的问题在于,外籍程序员无法顺畅的使用英语交流而显得孤僻与沉默,最终结果是会议被一些强势的声音统治了。

通过这段经历,Brandon展示了不寻常的能力来捏合所有的交流会话,压低强势的声音,鼓励沉默者发言,自始至终驾驭话题方向并推动会话结束。此外,为了约束讨论范围和引起广泛参与,他还引入了结构化练习-每位与会者利用四张即时贴写出三个奏效的工作方式和一个不奏效的工作方式。“如果我是领导者,或许我只会使用自己的方式。Brandon认识到了不同工具的优劣并用自己的方式解决了问题,给我上了一课。”

模式3:跨职能交叉结对

尽管之前两种模式通常涉及交互设计师或用户体验设计师的结对,成功的配对也能在任何设计流程的跨职能团队中形成。跨职能设计通常发生在不同类型的设计专家之间,例如视觉设计师、交互设计师、用户研究员或信息架构师。然而,结对设计也能成为设计师和非设计师之间合作的成功策略。

例如,当一家公司试图理解潜在用户时,产品负责人或高管利益涉众可以与用户研究员在研究阶段结对工作。用户研究员引导用户走访,询问有效的开放性问题并鼓励用户讲述自己真实故事,另外一方面,产品负责人观察并作好记录。这种方式的优点在于两种角色都观察了相同的行为并基于此对用户和领域达成一致共识。当重要的利益涉众没有深入介入研究阶段时,由于缺乏足够了解,他们会与设计师基于用户理解进行的设计决策产生脱节。

同样,设计师和开发人员面对高精度原型或者前端代码时,也在结对设计中获益。当他们以动态软件而非静态原型进行共同设计时,即时不是技术人员,设计师也可以借助丰富的实时交互来表达观点,开发人员也可以立即指出各个方案的可行性和相对开发成本,不断引导形成可以实现的设计方案,减少时间浪费和沟通成本。

结对设计并不适用于所有创新挑战项目,但如果合理的使用能极大的改进产品团队的创意输出质量与设计效率。正确的委派主导者与协同者能够使他们更快更有效的产生并评估创意,这种方式比起个人英雄主义式的单干,或者允许每个设计师轮流按照自己风格和方法来领导的混乱小组,显得效率更高。引入跨职能交叉结对提升了其它角色的同理心,让每个人可以接触到不同的技能,并且产生对产品更深入更全面的理解。

原文地址:

https://medium.com/@thinkmariya/three-models-of-pair-design-f75e3b29a51a?ref=uxhandy

译者:

阿里巴巴1688事业部\无线交互\舒舟

【译者注】人们普遍认为,流程和工具不重要,重要的是想法和思路。话虽如此,不过我认为流程和工具也能反映一个设计师的设计态度以及个人思维方式。那些愿意折腾愿意改变的设计师,在接受新的设计思想和趋势时往往更容易适应。本文作者Benjamin Berger是一名来自法国的交互设计师,文中他介绍了常用的设计工具并找出了这些工具协同时的弊端,提出了自己基于原子设计思维之上的进一步想法,你愿意和他一起探讨吗?

要是我们把2015年叫做设计工具井喷之年,应该不会有多大异议吧。

数据证明,目前大约34.7%(超过三分之一)的Medium文章与设计工具有关。但人们仍然习惯使用静态图形工具来制作界面。当依旧使用本地存储照片,每次设计都重新制作每个组件时,我无法理解程序员只写下三行代码然后不断使用真实数据衍生出其它模式的行为…

以下是我常用的设计工具:

Sketch:常用来制作线框、界面,偶尔绘制图形。 Illustrator & Photoshop:用作图标设计、图形绘制、照片编辑等,但凡不适合用Sketch处理的都会考虑它俩。 Invision:用来制作简单的线框原型。 Principle & After Effect:用来制作交互复杂的原型。(Principle仍在内测,公开后你会得到更多关于这个工具的信息) Zeplin:用以辅助设计师和前端开发的协同配合。

我认为Sketch与Zeplin之间依然有很大的空隙等待填补。

从创意到产品开发会经历数个阶段,一旦概念设计和线框完成之后,就需要考虑视觉定义了。主要页面的布局与视觉风格需要反复尝试才能找出最适合目标用户,并且能从竞品中脱颖而出的一套。

我将之称为创意阶段。Sketch的故事板特别好用,你能快速的设计稿之间进行迭代,尝试不同的图形、按钮、字体,放在一起依次查看。

直到进入下一步:产出阶段。

之所以叫做产出阶段是因为此时已完成了视觉定义,确定了字体、颜色、布局、形状等元素,接下来就是产出数页高精度视觉稿,即大家熟知的首页、设置、好友列表、个人资料、关注、启动页等等。我习惯戴上耳机听着音乐来搞定它们。

那么问题来了

从单一页面开始完成所有的页面设计,不仅花费了很多时间,而且极易消耗脑细胞。设计师青睐的Sketch对于这类批量产出类的工作无能为力。

更糟糕的是,有时即使尚未定义视觉语言,依旧需要设计这些页面,在已有项目上设计新的功能,或是将当前项目交接给后续的设计师。

2015年,我依旧尝试不同的工具组合并将其规则记录下来。

编程思维

当被问到是否会写代码时,我回答:“不会,但略懂一些代码原理。”

对我来说,弄明白我的设计如何以技术方式实现特别重要,因为它不仅让我设计出比较可行的产品,也能提升创意能力。

我学会了Javascript的基础和PHP/Mysql的逻辑,还会一点儿HTML/CSS。

我习惯频繁的与开发团队沟通,从而理解他们的工作内容。我知道iPhone的应用是由很多不同视图组成,数据如何迁徙转移,我该如何图形化的表达它们。

这些让我从图形元素的结构视角去看待一个产品,不是以代码编辑器的模糊印象去揣摩实现方式,而是像一个超大谜题一样抽丝剥茧的理解它们是如何构建和相互影响的。

原子设计思维

一旦你以编程思维开始思考设计时,你开始剖析产品的每个图形要素,这就是被称作原子设计的思维。

简单说,像字体、图片、图标或者按钮等每一个物体都称作原子。 1 然后原子们可以组成分子,正如细胞(列表条目)一般。 2 一堆细胞变成一个组织,即列表。 3 如此反复。

在我们公司,前端开发通常制定一套全景规范用以描述产品的各个设计原子,分子和组织。

我喜欢以乐高积木的方式来畅想设计(我朋友形容设计学校就像幼儿园一样,无非是讲设计原子按照积木一样拼来拼去…)。

但是我需要将该流程直接适配到一个视觉设计工具中去,用来为我的设计工作增强一致性和效率。

假如能够在一个面板或者在故事板中设计所有的设计原子,不用操心对齐、字体、颜色等,它们会自动处理好。

想象如果能够不断的将原子设计规范传到下游设计公司那该多美。

Matej Hrescak开发了一个Sketch插件能够快速进行组件设计,对我来说仅仅起了个好头,我希望将其继续升级。

工作原理

一旦视觉语言确认,你可以据此制作一个单独文档来搞定规范,并且移除软件其它的无用信息。

第一步,设定颜色、主字体、图形、边距、留白。 4 第二步,开始设定更精细的原子:标题、文本字体、按钮和输入框。 5 最后,在故事板中制作基本的文本和图层: 6 然后通过右键给它们赋予预设的样式。 7 8 矩形会自动嵌套预设的风格样式,正如你手动编辑过该标签一样。通过设置边距,按钮会根据标签文本的长度自动适应,通过留白设置可以将故事板内部元素自动对齐。

我们还可以设置更复杂的组织(例如导航栏)来保持各处的一致性。 9 10 在此基础上可以添加更多功能,使得通过设置每个元素来自动生成页面、列表、卡片成为可能。改动设计设定会自动应用到所有元素上。这样能够很方便的测试不同的颜色、字体风格等等的效果。

制作界面模板套件将不费吹灰之力,通过预设原生组件就能实现。

从事移动设计3年之后,我依然能够清晰的记得导航栏的精确高度是多少。

当然,设定部分元素时,我们也可以为颜色、字体对比、快速制作响应式元素、调色板等及时的提供一些可用性提示,而不用担心过多细节。

目前Sketch已经能够通过文字样式和制作符号(symbol),Photoshop通过智能对象来完成这些工作,但还远远不够,你们觉得呢?

你们的想法是什么?

原文地址: https://medium.com/@benjamin_berger/designer-desperately-looking-for-scalability-design-tools-f04478a12d42

译者: 阿里巴巴1688事业部/无线交互/舒舟

【译者注】

自计算机诞生开始,人类就一直希望能够以数字方式来模拟真实世界。虚拟现实的概念早在19世纪60年代就已经出现,电影制片人Mort Heilig开发了第一套真正的VR系统Sensorama,只是受限于当时的技术条件,除了简单的3D显示、震动座椅和味觉模拟之外,无法更近一步描绘虚拟体验的终极愿景。译者在近年来的E3、Games Com等专业游戏展会消息中经常接触到虚拟现实技术,对Project Morpheus和Oculus VR等设备在游戏上的应用印象深刻。除了科学与游戏应用之外,虚拟现实也成为交互体验中一种全新的互动媒介,理应在教育、医疗、建筑等传统行业得到更大的发展。

本文作者Matt Sundstrom热衷前瞻研究、绘画和用户体验,就职于美国俄勒冈州波特兰市一家独立的数字创新机构Instrument,该公司专注于多屏间的品牌、产品、活动和交互体验。通过这篇他对虚拟现实设计的经验总结,希望能帮助小伙伴们更加了解这个极富科幻特质和未来魅力的领域。

【正文】
1*CARCqJX-mfkhRnO_ACCn0A

1995年,任天堂公司的“Virtual Boy”游戏机在美国发售,可惜好景不长,1年后即宣布退出市场,当时在我家乡游戏界引起了轩然大波。我弟弟在一次旧货拍卖中用其整个暑假打工的收入换来了一台Virtual Boy,只为投身未来世界的游戏体验。可惜的是,它不仅引起了剧烈的头痛,在使用过后还会给玩家带来长期的红色残影。
1*Z5hgUjKwcwk2A7B2YtgbNA

摘自任天堂Wikia
“两个1X224的线性阵列能够产生3D效果,每个阵列对准一只眼睛,通过振荡镜像让Virtual Boy以混杂图像形式呈现给玩家。3D效果可能导致眼睛受损(实际上,由于它对眼睛存在潜在危害,任天堂呼吁家长们不要让7岁以下的儿童接触Virtual Boy),因此任天堂在Virtual Boy的游戏中都设置了可以每隔15或30分钟让游戏暂停的选项。”

1*wOFJPp3EAgDTcBsIL9A6UA

最终它无法带来身临其境的沉浸体验,只能通过视差形成伪3D效果,2D游戏增强的玩法让所谓的“虚拟现实”一词徒有虚名。

15年后,虚拟现实技术随着Oculus,Samsung Gear VR,Project Morpheus,Google Cardboard,HTC Vibe,OSVR等设备的出现宣告回归。
1*mGWz9YBY5Y2DcWI2wgcAsw
(图)尽管虚拟现实技术已经有了长足进步,但是对虚拟现实体验的思考却刚刚开始

为扁平屏幕设计和为沉浸环境设计,是截然不同的两类挑战。以下是我在Instrument公司进行了一些虚拟现实实验后的收获:
1*hcpzLmpkZZoIdVMgXpYSlA

像人一样思考

人类进化后的20000年里,地球上发生了天翻地覆的变化。
1*2iN1d5KDFFzvG1yZn41r_g

我们从凶险与回报并存的野外,到依赖信号传递的城市中…最终使用了基于图形界面沟通的电脑。
1*08yYyTYjBaLwg2XOzNLeJw

以上都可以看做是自身的一种交互模式:
1*P72hrig0H-cD4q2xUrDXrA
(图)萨凡纳草原

最古老的交互模式是,我们所看到和接触到的一切内容都服从于空间。当前目标近在咫尺,未来摆在我们面前,历史在后方延续。
1*Dok2F1wnRojUzJvZIj9gMw
(图)商店

正如savannah的商店一样,它营造了一种人们能够以更高维密度形式在其中移动的空间,所有物品被限制在空间内的墙上或货架上。
1*8ao0Xi5FhlSIKAvKkkcSgw
(图)抽象

过去的40年,人类见证了数字景象的崛起,它将真实世界概念(如书写、使用日历、在文件夹中储存文档)以用户界面元素的形式纳入抽象的二维平面之中。这种方式允许更高维的信息密度和多任务处理,不足的是这种全新的交互模式需要通过学习掌握,同时在行动决策达成之前面临着更多的认知负荷。

我认为过往这种本能性的认知模式更容易掌握。例如,在虚拟景象中,一侧是深坑,另外一侧是马路,即使没有真正的风险,人们也会自然的选择马路。我们确信大部分人不愿意花时间阅读过多内容,假如我们放置的是一个深坑和一条马路的符号,人们需要时间来阅读和理解这些符号(认知负荷),最终结果是大约一半的掉进坑里,其余的选择马路。
1*XTRa5JYnGlBX0_veqRvLuQ

利用视角

设计师使用尺寸、对比和颜色来表达层级。在虚拟现实中,这些方法依然适用,但略有区别。尺寸取决于用户与内容的距离。
1*yVgXKtvzlI6Su2NDJgaKdg

内容可以被认为是平视显示,反映了距观看者的一组距离。
1*5vkHHsfV9K5q7k7e_0jDVQ

内容也能与环境关联起来,用户看到的内容视角随着他们在环境中移动而变化。
1*OuHAdPXXPa45Z2ALyy1xtw

内容还能悬浮于虚拟世界之中。
1*0WNbD7eGjrknO3bqW5GO0w

若提及环顾周围,设计师习惯在平面视图中观察,而普通人则习惯于转动头部或身体进行观察。

“尽管如此,设计师依旧试图将2D平面的解决方案应用到3D空间中,正如Virtual Boy一样。”

其诸多可知的原因之一为:锥形焦点。

在Cardboard或者Gear VR这样的虚拟现实装置中,单屏被一分为二,分辨率也因此被变为两个区域。人眼集中在这块区域中心时,锥形焦点会快速落下,驶向模糊中心,从而产生一个相当小并且相当低分辨率的区域。
1*mtWG5W_Jsg8JrjqWS3XA4w

有多种办法来克服锥形焦点,使用常见的瓷片菜单时有以下几类方式:
1*-GMbKwQN2A9OUvqw9TLRIA

1、平面式:常见方案 对3D空间来说,界面是平的。无法适用于具备透视效果的文字或图像阅读,因为没有任何空间概念,仅仅像一面墙一样。

2、曲面式:边缘效果更加的方案 内容以曲面呈现的形式围绕用户,瓷片总能对准用户,使得阅读文字或图像更容易。

3、简化内容式:更优方案 内容偏少更佳,即使需要移动来阅读它。

4、环绕式:最佳方案 层次结构能通过与锥形焦点的距离来暗示,次级内容即便不在中心视图上,依旧可以访问。

或许为不同设备采用单独的复杂交互产生的效果更佳。例如,Google Cardboard的屏幕密度相当低,与其试图将复杂和高维的界面引入虚拟现实环境,还不如利用手机先将你带到目的地,然后再进入虚拟现实环境探索。
1*2P-8qLaSgAFQHy2V4n8yqQ

不断演进

技术始终在不断进化,头戴装置会更轻,屏幕密度会更高,我们会拥有更多与虚拟环境互动的方式。如今这些输入方式受限较多,甚至依赖不同平台,但我们可以为它们创造一致的可及性。

可及性(Affordance)是用户体验行业比较常见的一个术语,它指: 物体的感官特征能够直觉性的暗示其功用的情形。(定义来自usabilityfirst.com) 1*r2F7F9q62O-gU1sw9g6eMA

网上能找到可及性定义的简单版本。鼠标掠过文字链接时,箭头光标应该变为手指光标暗示可点击。无论使用鼠标、触控板还是手写笔,掠过一个链接时不会改变可及性,它依旧是手指光标的形式。因为不论何种输入方式,我们都期望表现相同的行为。
1*1UaRjr97fGePBtuMFkbqpw

虚拟现实需要可及性来表明哪些地方可以交互和什么时候会发生交互。这些可及性的感官显示应该随着科技的发展而进化,正如屏幕的可及性一样。如今以视线追踪来辨识用户行为,将来无论通过手势追踪、微手势或者心灵感应等哪种方式,都应该达到同样的目的。

聚焦体验

虚拟现实是沉浸式的体验,设计应该增强用户在虚拟环境中的存在感。

a.避免快速移动,因为它可能造成用户不适。

b.如果有水平(参考)线,确保它处于稳定状态。在虚拟现实中让水平(参考)线出现起伏波动,好比在波浪翻滚的船上,它容易使人眩晕。

c.避免快速或突兀的空间过渡,这样的引导效果较差。

d.避免要求用户过多的移动头部或身体,否则不仅承接效果差,还会让用户使用这类头戴装置时感觉身处无法转身的境地,好比在飞机上一样。

e.谨慎处理2D界面与3D环境的混合,这种变化可能不够自然。

f.保持屏幕上的物体和信息密度处于较低的状况,远低于传统屏幕界面设计,并非所有东西都需要引入视图中。

g.需要时借助真实世界的暗示。

h.明亮的场景容易引起视觉疲劳。

i.不确定时反复测试。

结语

我们体验世界的方式一直处于变化之中,并且会更颠覆的持续变化下去。回顾20年前,现实增强和虚拟现实技术的出现,被认为是与互联网等20世纪的主要范式一样极具影响力。

目前体验设计进入了令人兴奋的阶段,因为它跳出了传统的交互模式,现在所遇到的问题都是全新的挑战。或许我们终将失败,一旦成功,却足以改变我们体验世界的模式。

虚拟现实体验推荐:
Jaunt: Cinematic VR
Oculus Story Studio
Alien Isolation
Doom 2 on the Rift!
Samsung Milk VR

延伸阅读: Landscape and Memory by Simon Schama
The Sword of Damocles
The Rise and Fall and Rise of VR
Rainbows End by Vernor Vinge

原文地址: https://medium.com/backchannel/immersive-design-76499204d5f6

译者: 阿里巴巴1688事业部/无线交互/舒舟

看到这个标题你内心里或许会充满疑惑,我在写这篇文章之前,也曾经有很多疑问。你去问任何一个人,他们都不会推荐使用轮播这种模式。但是轮播本身并不是那么一无是处。 本文将基于真实的数据,针对近期业界对轮播组件的各种争论做个回应,看看大家对它的评论是不是名副其实。我会针对各个观点进行剖析,看看我们的数据与预期是否一致。通过这些内容,我会详细阐述我们的研究发现和研究方法,并给大家一些建议,希望对大家未来在判断何时以及如何使用轮播组件有价值。 之前有很多人不看好轮播这种模式。从NNG的一篇文章开始;真正的转折点是Erik Runyon发表的关于圣母大学网站的一篇详细分析轮播模式的文章“轮播组件用法详解”;在Jared Smith的文章“是否应该使用轮播”中,他建议大家放弃使用轮播组件;Brad Frost也在他的文章“轮播组件”中呼应了这种对轮播的负面评价;紧接着Luke Wroblewski加入了反对派的阵营,他说从目前的数据来看,建议不要使用轮播,他的文章详情见“ 以后绝对不再使用轮播”,(他后来又补充数据说对他的结论有怀疑)。
在Mobify(提供移动建站服务的网站),我们开发用于移动设备的大型电子商务网站。很多情况下,这些网站都有一个轮播组件。我们这样做错了吗?是不是伤害了我们的用户?如果我们停止使用轮播组件,我们的网站是否就会变得更好?这些问题是我和这篇文章的共同作者Peter Maclachlan在审查我们开发的网站时反复问自己的。我和Peter决定做我们自己的研究,而不是盲目追随网上这些反对轮播组件的声音。
自此,我们开始研究那些我们能获取的数据。刚开始,我们充满好奇,我们的数据说明了什么呢?我们的发现令人非常惊喜,并且鼓舞着我们不断深入研究。我们在为期11个月的时间里审查了几个中型到大型的网站。我说的中型到大型网站,是指在过去一年里交易额不少于两千万美金的网站。在这11个月的时间里,我们研究了近750万次轮播组件的交互事件。这篇文章的结论都是基于这些数据所做的分析。

我们为什么要使用轮播组件

轮播组件存在的意义绝对不仅仅是为了在首页显示更多的市场营销信息。因为我们是专注于做无线端设计的,我们最大的顾虑就是要确保在有限的屏幕尺寸和信息的密度之间做好平衡。这意味着,我们总是要在有限的面积里做好水平和垂直方向上的空间利用。我们使用轮播组件可以增强信息的密度,并且不需要用户在查看时滚动页面。 使用情景也是理解轮播组件的一部分。我们的设计团队只是在规避使用轮播组件,而没有向用户提供具体的使用情景。大部分情况下,我们只是在一中情境中使用轮播组件:在商品详情页中展示更多的图片。在商品详情页中,用户知道左右滑动一个轮播组件可以查看更多的商品图片。在一个网站首页的市场营销轮播组件中,用户是没有办法知道下一张图片是什么内容的,也不清楚这里面的信息是否需要去关注。
反对轮播组件的理由
目前反对使用轮播组件的理由主要有以下几个方面:

    1、用户不会点击轮播组件中的内容;
    2、如果用户要点击轮播组件中的内容,他们只会点第一个;
    3、轮播组件不易理解;
    4、自动轮播对用户不友好;

针对前两条,我们将用我们自己的数据和Erik Runyon文中的数据作比较。最后两点更多的是定性的结论,我会针对性的剖析。

猜想一、用户不会使用轮播组件
大家的争议
这个猜想基于Erik Runyon文章中展现的圣母大学网站数据。只有1.07%的访问者点击了网站的Banner轮播图。只是查看Banner无法作为交互行为被记录,只有产生点击行为的用户才算数。为了反驳这一猜想,需要有数据能够显示实际上发生交互行为的人数高于1.07%才行。
我们的结论
用户对产品图片轮播产生交互行为的比例:72%的用户至少切换轮播图一次;23%的用户会放大图片。如果你看我们的研究结果,具体的以放大操作为例,你会发现23%的用户直接进行图片的放大以获得更多的信息。如果你更关心哪些用户有切换轮播图的行为,数据显示高达72%的用户直接产生了操作行为。下文中将会展示我们的数据是如果获取的,请留意“发现”部分。
猜想二、用户只对第一张轮播图感兴趣
大家的争议
Erik提到的点击了轮播图的1.07%的用户中,有89.1%的人点击了第一张轮播图。并且,我们猜测如果这个轮播组件是有效的,那么随着轮播图数量的不断增加,点击分布将会有一个合理的下降趋势。Erik的数据显示,在第二个位置的轮播图只有整个点击数据的3.1%。更客观地来看,圣母大学网站中3,755,297位访客中只有1,234人点击了第二个位置上的轮播图。第二个位置之后的轮播图的点击数据也符合我们预期的落差。我们如果要反驳这个猜想,那么就要有数据显示,对第二个位置上的轮播图有交互行为的用户比例高于3.1%。
我们的结论 我们的数据显示,和第二个位置上的产品图片轮播有交互行为的用户占比为15.7%。至少64%的用户从第二个位置的产品图切换到了第三个位置的产品图。用户切换轮播图有一个线性的变化规律。不同的轮播图切换方式会导致不同的数据结果。所有的数据都表明用户从当前的轮播图切换到其他轮播图的比例较高。和第一个位置上的轮播图有交互的用户中,有64%的人和第二个位置上的轮播图也产生了交互。 圣母大学的数据只是包含了用户的点击,而不是全部交互行为。为了确保我们的数据更有说服力,我们也会看产生直接交互行为的数据。对于我们的产品图轮播组件来说,那就是用户的放大操作。数据显示,有23%的用户产生了放大产品图的行为,其中54.1%的人放大的是第一个位置的产品图。所有的放大行为中,有15.7%发生在第二个位置的产品图。 这个图和Erik的数据很相似:第一个位置的轮播图占据了绝大多数交互行为。然而,我们的数据中随着轮播图位置而产生的数据衰减趋势更为合理;45.9%的直接交互行为发生在第一个位置之外的轮播图上。这就意味着,接近一半的直接交互行为产生在第一个位置的轮播图之外。 提示:关于这个数据的来源,详情请查看下文中“发现”部分。
猜想三、轮播组件不属于无障碍设计
接下来的问题是不好的,但是易于解释。这个争议整体上没有否定轮播组件,只是对于当前用法的质疑。轮播组件本身并没有所谓的无障碍问题。当然,我们在应用轮播组件的时候,可能存在设计上对无障碍的考虑。 这一点,我不认为是轮播组件本身的问题,但是当你决定要用轮播组件的时候,你必须要考虑。下一个版本中,我们一定会让我们的轮播组件变成一个无障碍的插件。这不是关于轮播组件有效性争议的一部分,所以这里我们就不做更多论述了。轮播组件本身不算是无障碍的,但是这并不能说明我们将来在应用的时候做不到无障碍。
猜想四、轮播组件的自动轮播对用户不友好
这个争议是说能自动轮播的轮播组件,想要去点击的用户会有障碍。我们完全同意这种观点。如果你想要用轮播组件,一定要避免使用自动轮播。如果你需要更多的理由,请看这篇Brad Frost的文章。 关于这个问题的可以阅读Jakob Nielsen的文章”用户不喜欢自动轮播的轮播组件以及手风琴组件”,没有那个轮播组件我们设计成自动轮播的。 如果你不得不使用自动轮播,那么在用户准备要产生交互行为的时候,请停止自动轮播。 当用户想要点击一个轮播图的时候,因为自动轮播到下一张,导致用户点击错误,这种体验非常糟糕。在PC端,这意味着当用户的光标Hover到轮播图的时候,停止自动轮播。在移动端,这意味着当用户准备触摸的时就停止自动轮播。自动轮播不友好。如果你要使用轮播组件,请不要让它自动轮播。
发现
提醒:这一部分主要是揭秘我们是如何做上述研究,数据是如何获取的。如果你对此感兴趣,请继续往下读,如果不感兴趣,请跳过这一部分。
研究方法及情景 这些数据来源于对几个中型到大型电子商务网站长达11个月的分析。在此期间,我们抽样了大约750万个轮播组件的交互事件。我们遵循隐私保护协议,没有保留任何个人信息。
为了针对上述的前两个猜想,我们的数据主要着眼于以下两点:
1、用户与轮播组件产生交互的频率;
2、用户与轮播组件中第一个位置之外的图片产生交互的频率;
定义交互方式
在研究中,我们跟踪了轮播图组件中的四种交互方式: 1、智能手机中,用左右滑动的手势切换轮播图; 2、单击轮播图组件中的箭头,每次切换一张图; 3、单击轮播图组件底部的缩略图切换; 4、单击轮播图中当前的图片,放大至全屏查看;

为了和圣母大学的数据相对应,我们选择了第四种交互方式,单击放大,这个操作和点击比较类似。两种情况下,用户都是对当前的轮播图比较感兴趣,并且希望了解更多内容。补充另外一点,我们关注的交互方式是指那些最核心的交互,不包含那些无法触发交互事件的操作。没有导致轮播图切换的意外滑动也不算是能触发交互事件的交互。

结论

1.各种交互方式的使用占比 我们首先研究的是用户使用手机中轮播图组件的频率,我们是通过独立的交互事件来看这一现象。这里所说的独立交互事件,是指用户通过上述的交互方式和轮播图组件的首次交互行为。如果一个用户点击了5个轮播图的缩略图,那么我们计算的时候还是只算一个独立的交互事件。下文中我们将更详尽的阐述独立交互事件。数据显示,一个页面中大约72%的用户以各种方式对轮播图进行了操作。缩略图是最清晰地,能够提前预知内容的交互方式:55%的用户至少点击一个缩略图。

1a.各种交互方式的占比 我们的数据表明,缩略图是最受用户欢迎的交互方式。事实上,缩略图的使用率是其他类型的轮播图切换方式的两倍,受欢迎程度比箭头和左右滑动加起来还要高。 放大操作是用户进行的操作中频次仅次于点击缩略图的操作。放大和左右滑动的共性是,可以出发操作的区域都比较大,几乎是点击轮播图的任何位置都可以触发。我们猜想用户的放大操作中又不部分可能是误操作。话虽这么说,放大操作仍然是用户目的性比较强的一个操作,所以产生意外操作的概率不高。大约23%的访客进行了放大操作。左右滑动是用户使用率最低的操作。这一点强有力的说明,给用户提供一个清晰的控制系统有利于引导用户进行操作。箭头和左右滑动操作都是为了切换到下一张轮播图。如果我们把这两种交互方式整合在一起,他们的使用率和缩略图比较接近。

2.所有类型的操作 总体上看,每个轮播图平均有2.4次交互事件。这表明与轮播图产生交互的72%的访客中,产生多次交互行为是很正常的。

2a.各种类型的交互方式操作次数占比(非独立) 点击缩略图的用户中更倾向于使用缩略图而不是其他交互方式,平均在一个轮播图中点击6张缩略图。 左右滑动和点击箭头进行操作的用户有近似的操作频率:平均数分别是3.5和3.9次。放大操作的交互次数较少,这表明用户只有在对某张产品图非常感兴趣的情况下才会放大。 操作缩略图的用户拥有最高的点击次数,这说明略缩图的交互方式比箭头和左右滑动有更高的用户参与度。探索这一层次的参与度所导致的额外转化,比如“加入购物车”将会是件有趣的事情。如果结合箭头和左右滑动两种交互方式来看,数据和我们分析的独立交互方式比较接近,前后移动(滑动或箭头操作)是轮播图中最普遍的交互方式。

3.交互频次衰减率

从我们统计到的数据,可以画出用户每次操作时之后再次操作的概率曲线。在轮播图切换的案例中,这就是说在用户从第一张轮播图切换到第二张轮播图之后,再从第二张轮播图切换到第三张轮播图。 在直接交互的案例中,这就是说点击放大第一张轮播图之后再去点击放大其他的轮播图。我们画出了各种不同交互方式下的曲线:缩略图、箭头、滑动、放大。

3a.缩略图

每一张被点击过的缩略图,用户有大约69%的可能性会继续点击其他缩略图。从下图中的指数衰减曲线可以更精确的看出这一变化趋势。尽管用户点击缩略图可以有很多可能的顺序,但是大部分的缩略图用户还是按照轮播图中默认给定顺序查看。

3b.箭头

对于每个被点击的箭头,我们发现用一个接近线性的衰减曲线来描述是比较准确的。在这种线性衰减中,用户有大约76%的可能性会会再次点击这个箭头来查看下一张轮播图。

3c.左右滑动

左右滑动的衰减也是线性的,用户有64%的可能性会再次滑动。下图是一个更精准的指数变化趋势图。 3d.放大 放大操作的规律遵循幂定律,线性的变化不能准确描述这一趋势,下图的函数能够比较真实的反映其趋势。

一些思考

营销类轮播图 VS 图片轮播

这是我们在用我们的数据和Erik统计的圣母大学的数据作比较时发现的问题。我们用的轮播图类型不同。我认为这个问题并不影响我们的研究结论。这两种轮播图或许在视觉样式上不相同,但是我们的研究说明他们的基本模式是成功的。我们这项研究的目的是为了验证这种水平滚动的多页轮播图是不是有缺陷。从数据来看,并没有明显的缺陷。圣母大学轮播图的问题可能不在轮播图组件本身,而是设计问题。

用户对营销Banner的认知本身就比较疑惑。这类轮播Banner可能根本就不能给用户提供有效信息。有很多的原因会导致轮播Banner的无效,以至于大家认为这个UI模式本身就有问题。我们的网站有时也会使用营销类轮播Banner。接下来我们将会用我们的数据和圣母大学网站的数据作一个很有意思的比较。

Luke Wroblewski在Google的一次演讲中提到Amazon UX经理PJ McCormick的数据。PJ展示了Amazon使用营销Banner轮播图组件的一些积极乐观的数据。Luke认为目前的营销轮播组件最大的设计问题是控制轮播的部分不够明确。下图中,Amazon的轮播图组件设计明确的将控制轮播的部分单独出来,这样做就很好地回避了控制部分不够明确的问题。

手机端交互 VS PC端交互

我们的轮播组件只在手机端有。圣母大学的网站只在PC端有轮播组件。用户在手机端的交互要比PC端频繁。这有可能是因为手机端有滑动操作,也可能是因为PC端用鼠标操作小控件比较难。还有可能是由于轮播组件原本就是更适合手机上实用的一种模式。

轮播组件成功应用的标准 我们这里说的轮播组件成功应用的标准和Erik的标准不同。Erik的更在意用户是否通过轮播图点击到了里面的内容,重点看这个转化率。我们的标准是看用户是否有查看更多的意图,是否看了所有产品图片。前者的标准显然更高,要求用户点击打开新的页面。这就是为什么圣母大学网站中的轮播组件数据相对于我们的数据更低。

大学的网站VS电子商务网站 我们拿圣母大学的网站和我们的网站作比较,有一个局限性,那就是圣母大学的网站用户和我们的网站用户使用情景不同,两个网站或许没有可比性。电子商务网站用户的目标是发现更多关于产品的信息以便于做出购买决策。大学网站的用户是为了学习或者找到关于大学的一个具体信息。

对未来的一些思考

这一次的数据分析使我明白了,对于轮播组件,我们还有很多研究工作要做。下面的这些内容使我希望自己将来可以进一步研究,也希望看到其他同行可以针对此进行一些研究: 1、针对不同类型的轮播组件做对比研究。这将有助于研究我们的营销类轮播组件和 Erik Runyon的数据有何不同。 2、衡量交互方式是如何影响用户的操作行为趋势。如果他们操作的是一个产品图片集合,他们是更愿意还是更不意愿使用加入购物车呢? 3、我希望知道是否有办法衡量手机端、PAD端、PC端用户在轮播组件的交互方式的差异。不幸的是,我们不做PC端的站点,所以我们缺乏PC端的数据。我们期望做直接的对比,而不仅仅是从已知数据去做推测。 4、数据显示,在手机端,滑动是最低频的操作。我认为滑动操作在手机上被其他交互方式弱化了,或许也是因为在PC端,用户对滑动操作还没有什么认知。通过提供额外的控件,用户可以很明确的获得操作轮播组件的交互方式,因此,他们更愿意选择这样的交互方式。假如移除了轮播组件中其他的可操作控件,那么滑动的交互方式是否会增加?

结论

这篇文章是在彻底调查Mobify为什么以及如何使用我们提供的轮播组件,构建自己的网站。不同类型的轮播组件之间差别很大。给用户提供了额外的上下文情景之后,不用迫使用户做滚动操作,他们就很乐意使用轮播了。 目前关于轮播组件的数据都是关于市场营销Banner的。这些数据都说明了一点,用户对轮播组件中的内容很少产生交互。同时也说明了,用户切换轮播组件中的内容,翻到下一张轮播图的概率非常低。当然,这些数据也证明了一些普适性的观点:轮播组件不易于理解,自动轮播不友好。 我们的数据和Erik Runyon提供的关于圣母大学的数据共性比较少。用户在我们的网站上交互行为更多。相对于圣母大学网站的用户数据,我们的用户对当前轮播图之外的内容有更高的交互行为比率。产生这些差异是是有很多原因的,这也是我们想在总结的环节去探讨的。不同的的轮播组件形式适用于不同的产品目标。 对我而言,这就是本文最大的结论。 轮播组件有很多的形状和尺寸。有一些很有效,有一些效果并不好。在盲目的批判之前,我们应该针对不同的情况收集更为丰富的数据,来充分了解真实的状况。Erik的研究结果认为,首页的市场营销轮播效果不好也是事实。用户不知道能从轮播组件的内容中获取到什么信息,因此,他们也不想去操作。如果你能够很清晰的告诉用户你将会获得什么信息,这些信息对你有什么用,那么,用户肯定也乐意去做更多的操作。

那么,你到底会不会用轮播组件呢?

不要仅仅是为了在有限的屏幕空间展示更多内容而去用轮播组件。轮播组件主要是用于为用户提供特定情境下更多的内容。在手机端,当横向的屏幕空间有限,内容彼此有关联性,并且这个内容对用户有意义的时候通常会用轮播组件。 当内容根本就无趣或对用户无意义时不要用轮播组件。第一张展示给用户的轮播图一定要能传达出其他剩余轮播图将要给用户传递的内容。用户从当前轮播图切换到其他轮播图的时候必然是因为这样可以获得更多有用的信息。轮播的内容要有吸引力,这样才能保障轮播的有效性。如果用户对你的轮播不感兴趣,这不一定是是轮播组件本身的问题。 不要为了让用户看到你要展示的全部的容而使用轮播。即使你的轮播是有效的,用户也不会查看所有的内容。第一个展示的轮播内容应该是最重要的,所有的轮播图应该按照重要性的顺序展示。如果查看多个内容很重要,但是这不是必要的操作,那么我推荐使用缩略图轮播的方式。 这个问题并没有唯一的答案。在某些情况下,与市场营销Banner轮播一样,答案是NO。在其他情况下,与产品轮播图一样,答案是YES。在各种不同的设计模式下,如果你要问“我是不是应该用轮播组件”,这的确有一个正确的回答:如果这适合你的用户就是对的。

原文地址:[http://www.smashingmagazine.com/2015/02/09/carousel-usage-exploration-on-mobile-e-commerce-websites] 原文作者:Kyle Peatt

【译者注】本文是设计师Golden Krishna新书《The Best Interface is No Interface》中的部分节选,探讨了“屏幕外的用户体验”相关内容。清楚记得2013年UXPA上,Josh Clark的演讲《Design out of the Screen》也是类似主题,移动设计并非只与线框图、布局、切图、设备适配等内容相关,借助设备的传感器进行屏幕外的设计更加重要,精彩的观点和无数生动案例让我印象颇深。如今的移动用户体验设计师们,包括我自己,痴迷在数字信息框架、界面设计模式及丰富流畅的动效之中,这篇文章的及时出现,为定义移动用户体验点亮了新方向。作为用户体验的缔造者,设计师应该避免局限于屏幕中埋头创作数字输出物,而是从对用户痛点的切实理解出发,结合工业设计、产品设计与界面设计等设计方法的优缺点,充分利用现有技术的革新,跳出固有思维框架,才能更好的打造用户真正喜爱的体验。让我们随正文开始逐步学习Golden Krishna的观点跟思路吧。

设想在不考虑触控系统且不涉及屏幕的前提下,利用典型流程,设计一些不必从兜里掏出手机就能发挥作用的移动应用会是怎样的情形呢?

“Charles意识到自己的生命中充斥着各种移动应用,他厌倦了打开它们做着平淡无奇的事情。如果能跟朋友面对面的畅谈,而不是做低头族玩着各自的手机,那肯定很棒。他希望借助最新的技术帮助自己摆脱移动设备的束缚,也想知道如今强大的手机能力是否可以让生活更轻松,而不是疲于应付屏幕上的各种应用。”

多么熟悉而美妙的开场。正如定性和定量研究、历史典故与主题采访,它能帮助体验设计师们挖掘一组既定目标客户的独特问题。然后,以屏幕上的一张草图作为完成以下目标的常规出发点:

1、设计尽可能优雅的方案; 2、打造独一无二的数字产品; 3、定期有效。

screen_goldenkrishna 图1.移动应用设计师的典型思路

这绝非易事。大多设计师往往拘泥于屏幕进行各种折腾,而忽略了对用户典型路径的思考。

受限于像素的困扰

从屏幕画布中创造别具风格的优秀体验不难,但给出基于屏幕的方案面临着先天的挑战。从口袋或钱包里掏出手机,解锁屏幕,找到并启动应用,输入账户,打开菜单,寻找目标,以及应付移动操作系统中的其它设置…这样无法被称为一个优雅的体验吧。

使用汉堡菜单、无衬线体视觉风、视差滚动、顺应流行设计趋势、添加极尽绚丽的动效,尽管很多应用被包装的很现代,但除了依葫芦画瓢之外,缺乏让人为之振奋的地方,还是没有脱颖而出的体验。

buns_goldenkrishna 图2.使用性感圆角矩形组成的汉堡菜单,包含了你需要的所有内容

这些应用大多带来了无休止的消息推送和震动提示,令人懊恼。KPCB调查发现,人们平均每天要检查手机150次左右。在《时代》杂志发起的一项投票中,四分之一的用户每30分钟查看一次手机,五分之一的用户每10分钟查看一次。更何况“幻想震动症候群&铃声幻听(在手机并未有消息和震动时误认为有)”已经影响超过90%的大学生。

另一种观点

考虑另外一种限制:手机揣兜里时。

Moves

上图意味着以不掏出手机为目标的截然不同解决方案。让应用在兜里工作的方式是重图形界面时代后期相对比较容易实现的。这是被弃用的Moves应用图标,但却通过拟物化的方式揭示了下一代移动应用的方向:在兜里就可以完美工作。

想象不需要消息推送和震动提示的应用,其主体体验已不局限在基于屏幕的数字界面了。在用户最看重的朋友、家庭和时间等美好事物面前,它能够悄悄的取悦并服务用户。它利用用户口袋里强大的计算优势,而不是三十年以来基于“窗口、图标、菜单和光标”的图形用户界面,允许手机内置的传感器和无线电技术帮助我们实现目标。

一旦掌握了这种独特的思路,未来拥有了更多的可能。

一家从事无钥匙启动技术名的公司叫Lockitron,它拥有一个从既定旧思维转型成功的团队。华尔街日报曾报道说,英国保险公司的调查发现,英国成年人平均每天有9次找不着物品,其中最令人沮丧的就是找不到公寓大门钥匙。Lockitron正是瞄准解决此类问题,他们宣称可以做到“使用手机打开房门”。

听起来令人销魂,然而却需要更换特殊的插销。初始的解决方案局限在手机屏幕上,要求用户每天进行繁琐的操作,基于屏幕的思路并不比传统的门锁搭配钥匙方便。用户需要按以下步骤完成目标:

  1. 走到公寓门前;
  2. 拿出智能手机;
  3. 点击电源唤醒手机;
  4. 滑动解锁;
  5. 输入密码;
  6. 退出上次使用的应用;
  7. 退出上次打开的应用文件夹;
  8. 在几个屏幕的应用堆中挑选目标应用;
  9. 点击启动应用;
  10. 等待应用加载;
  11. 点击应用里的“开门”按钮;
  12. 打开公寓大门。

screenbased_goldenkrishna

一年之后,Lockitron团队将整个方案以全新的体验方式进行了重设计。

首要的变化就是他们去掉了定制的插销,而是在客户已有的门锁上添加一个锁套。

更让人钦佩的是,他们考虑了客户屏幕之外的所处环境,并不需要用户掏出手机。该应用依然需要在智能手机上下载和安装,不过一旦设置完毕,就不必再次掏出手机使用了。

借助蓝牙技术,第二代Lockitron应用帮助手机直接与插销进行感应,无需外部数字交互过程。所以当客户站在公寓门前时,Lockitron很方便的将他们领入家中,而不再像之前那样,需要进行无数不够顺畅的点击操作。他们的应用通过简化开锁流程更好的满足了客户的需求,如下所示:

  1. 走到公寓门前;
  2. 打开公寓大门。

screenless_goldenkrishna

结果第二代的Lockitron在众筹网站Kickstarter上,从潜在客户中募集到了220万美元,对一家门锁公司来说太赞了,不是吗?

comparison_goldenkrishna

后续方向

考虑屏幕外的设计并非适合任何问题,但是一旦找到机会,它就能以无法预见的方式愉悦用户。在设计你的下一款应用时考虑一下4条tip吧,它们的原则都是“基于典型流程而非屏幕”:

  1. 从理解用户的典型流程开始。 在用户可能进行任务或遭遇问题的真实环境下观察他们的行为,这能帮助我们基于典型用户流程设计系统,以真实世界的设定作为设计限制(而不是虚拟像素空间)。

  2. 寻找我们可以解决问题的触发器。 正如站在公寓门前就可以开锁的案例,通过了解用户典型流程,我们或许能发现一些更简单的方案来解决问题。在提供更复杂的解决方案时,需要对触发器进行组合,才能确保系统执行必要的动作。比方说,只有对用户所处情境的当前时间、星期几、位置及手机是否激活等信息进行合理识别,手机或许才可以大胆的认为用户正在休息,并自动设置在此之后8小时的闹铃。

  3. 设计前更多的熟悉智能手机技术,而不只是屏幕像素与尺寸。 智能手机技术发展迅速,作为设计师,我们必须了解最新手机端的传感器技术,无线电和其它机器输入手段。大家可以参考这份文档

  4. 适应物理体验的可用性模式。 Apple,Google和Microsoft等公司都在普及低耗能数字模式,例如自动移门、自动扶梯和电梯,它们均以取自真实物理世界的可及性见长,在缺少数字界面的情况下帮助人们很自然的学会使用。开始留意并收集优秀工业设计的精彩案例吧。

学习另辟蹊径的思维方式、异类方法,以及了解如何设计科技方案的新思路,可以阅读我的《The Best Interface is No Interface》

译者: 1688事业部/无线交互/舒舟

原文地址: http://www.uxbooth.com/articles/back-pocket-apps-lets-reconsider-wireframe/

作者介绍: Golden Krishna,出道于旧金山著名交互设计咨询机构Cooper公司,著有《The Best Interface is No Interface》,曾就职于三星、Zappos的创新实验室,专注于未来科技创新。

【译者注】作为一个移动界面设计师,如果你已经细细读过Material Design的设计指引,那么这篇文章是一篇很好的设计案例。如果你还没有读过,那这篇文章一定是个最容易最生动的起点,以小窥大得帮助你进入Material Design的世界。

大家知道,google最近发布了Android的Lollipop系统,系统的一个重大改动是引入了一种新的视觉语言:Material Design。随着新系统的发布,安卓也发布了一个跨平台的视觉、动效、交互设计的全面指引。10月7日,Google的Material Design体验团队组织了一个workshop,跟第三方app团队分享了一些设计见解和小技巧,来指导他们在Android平台的设计。

在我看来,Android的这次改进,是在对的方向上又迈进了实实在在的一步。这个新系统目前已经拥有足够的一致性和灵活性,足以兼容任何新app的设计。所以呢,我在回来之后也重新回到我feedly的设计稿,尝试将feedly的界面根据Material Design的设计指引,做一次重新设计的尝试。

这次尝试,我的主要目的是创造一个完全根据Google的Material Design原则优化的全新版本。这个版本可以指引设计团队的未来设计。同时,我们还可以选用其中的一些设计点,立即落地并发布在以后的版本中。这次尝试的第二个目的,是为feedly获得一些用户反馈。所以如果你有任何建议,请留下些评论。

这篇文章里,不仅有这次重新设计的结果,也讲述了过程中的设计思考。

好了,进入正题,让我们马上开始Material Design的探索。

总览

在这次重新设计中,我着重设计feedly的几个主要界面。下图是设计前(上排)和设计后(下排)的对比图。

material design_01

Material Design的设计指引要是全面描述的话,会太繁杂。所以在这里我提取出四个核心设计要点,这四个核心要点也是我用来重新设计的主要依据。

一、有形的界面(Tangible Interfaces)

Material Design 设计原则

“在material design中,app里的每个像素都被呈现在一张纸(a sheet of paper)上。这张纸有单一的背景颜色,并且根据不同的环境可以被随意缩放。一个典型的界面排版,可能由好几张不同大小的纸张的重叠构成。”

设计原则在feedly的运用

Feedly原有的界面已经在运用类似的纸张隐喻,我们的主要设计元素是一叠叠的卡片,每个卡片上都有文章列表或文章。上滑卡片,下一张卡片就会被显示出来。这种隐喻正好和Material Design可以完美契合。

Feedly的导航位于左侧的面板上,面板可以被滑出,盖在那叠卡片上。Feedly的“发现”界面也是同样逻辑,只是位于右侧。

material design_02

material design_03

二、让设计更像印刷品

Material Design 设计原则

“印刷品设计的基本元素包括字体排印、网格、间隙、尺寸、颜色和图像的运用方式。这些元素的意义远不仅仅是好看而已,他们一起能创造层次、制造意义及带来视觉焦点。”

设计原则在feedly的运用

8点网格

Google提供了一些很好的资源,来帮助设计师在设计app的时候,能以一种保有一致性的方式来缩放和安排视觉元素。但是你仍然需要了解这背后的总体网格系统。虽然这是一个8点的网格系统,Android常常将边距设置为16点。除了在各个界面贯彻网格系统,我还将我们的杂志视图页面边距设置成了16点(2×8)宽,将缩略图设置为96点(12×8)宽。

material design_04

颜色和图像

Google推荐在工具栏和状态栏使用app的主色(主色一般是品牌的主色调)。但因为feedly是一个阅读应用,如果在这些区域运用我们的亮绿色,会对视线造成强烈的干扰,打扰用户对实际内容的阅读。因此,我选择在这些区域运用浅灰色,减少对内容的打扰。

在左边栏中,我设计了一个运用亮绿主色的顶栏,顶栏用来突出显示当日的热点话题。这种方式即强调了关键信息,又变现了品牌色,我对这种方式还比较满意。

图像也是设计中非常重要的元素。在杂志视图中,我用了全出血尺寸的图像来呈现需要深度阅读的文章。在发现界面中选中某话题时,也运用了全出血的图片作为界面头部。

material design_05

三、有意义的转场

Material Design 设计原则

“有时候,用户会搞不清楚需要关注界面的哪部分,或在一个元素从A位置变换到B位置的时候感到迷惑。通过经过精心编排的动效设计,可以在app使用过程中有效地引导用户的注意力和视觉焦点,避免当布局变化或元素重新排布时引起的迷惑,同时提升整体的体验美感。动效设计应该满足功能性的目标,不仅仅是炫技。”

设计原则在feedly的运用

打开文章和关闭文章,是feedly中最重要的转场。在这个过程中,用户在文章的列表和整篇文章内容中切换。制作这个转场动效时,我参考了Material Design设计原则中推荐的3个主要设计指引。

表面的反馈

当用户点击文章预览时,我运用了点击波纹效果来提供即时反馈。波纹效果会扩大充满整个文章预览元素。同样,当用户关闭文章时,点击波纹效果也会在顶栏中出现。

视觉连续

在杂志视图中的预览图片,会在界面转换到文章视图的过程中放大,并移动到相应的位置。通过这样的转场,用户能完美感知到他所点击的元素和最终界面元素之间的关系。但这其中有一个挑战:有时在预览视图中的图片并不出现在文章的首屏,而是好几屏之后才会看到。这时,我们不得不在转场时将文章内容渐显,而将缩略图渐隐来过渡。

有形的表面

这很可能是Material Design中最重要的要素。根据设计指引,我们需要将内容处理为像打印在有形表面上一般。当用户点击了列表中的文章预览区域时,这个模块会向上升起,创造出属于这篇文章的一个新的平面。同时考虑到视觉的连续,这个新平面会放大,使其成为界面中最主要的一个面。在这个过程中,文章的内容也渐显出现。

综合这些设计指引,我们得到的最终动效是:

material-design_06_new

根据相同的方式,我还设计了在发现面板中选中某个话题的动效:

material-design_07_new

四、自适应设计

Material Design 设计原则

“Material Design的最后一个核心理念,是创造出一个自适应的设计,他能适用在从小手表到大电视的任何尺寸的平台上。一个自适应的设计,实际上是在同一个底层结构的体系中,演变出适应于不同尺寸界面的设计。在每一种设计中,尺寸和交互方式用最适合这个尺寸界面的方式展现;但在颜色、图标语言、层级和空间关系上却保持不变。Material Design通过提供灵活的元素和样式,帮助你搭建可自适应的界面。”

设计原则在feedly的运用

从第一版开始,feedly就已经是一个可自适应的应用。自适应时,最主要需要考虑的元素就是用来呈现文章的卡片。考虑如何将这些卡片排布在杂志视图中,是一件很有意思也很有挑战的事情。正如你在下图看到的,不同尺寸的屏幕采用了不同的、但都很有趣的布局。

material design_08

最后,希望你在跟随我进行Material Design探索的时候能乐在其中。如果你有任何的反馈或想法,能让feedly更好地兼容这些设计原则,请不要犹豫留下你的评论。

翻译:1688事业部/资深交互设计师/郭楠

原文地址:https://medium.com/feedly-behind-the-curtain/an-exploration-in-material-design-by-feedly-8c1a1cbdfdcd

原文作者:Arthur Bodolec,feedly联合创始人,设计师