Be For Web - iOS http://beforweb.c7210.info/taxonomy/term/48 en 基于机器学习的产品体验设计 (4) 输入的设计 http://beforweb.c7210.info/node/1087 <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://beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-machine-learning-core-ml-l.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>了解过界面输出的一系列设计要素与原则,接下来我们要探讨关于&ldquo;输入&rdquo;的设计。</p> <p>人们会与界面输出进行互动,期间系统所接收到的反馈信息即为&ldquo;输入&rdquo;。我们可以有意识地通过这些反馈来优化模型并提升功能体验。</p> </div> <!--break--><p><img alt="" src="/sites/default/files/images/202001-ML/coreml-og.png" style="width: 620px; height: 326px; border: none;" /></p> <h3> ​第四部分:输入的设计</h3> <p>了解过界面输出的一系列设计要素与原则,接下来我们要探讨关于&ldquo;输入&rdquo;的设计。</p> <p>人们会与界面输出进行互动,期间系统所接收到的反馈信息即为&ldquo;输入&rdquo;。我们可以有意识地通过这些反馈来优化模型并提升功能体验。</p> <h4> 输入(Inputs)</h4> <p>我们将要探讨四种类型的输入:</p> <ul> <li> <strong>校准设置</strong>:获取基本设置信息,使功能进入运作状态。</li> <li> <strong>隐性反馈</strong>:潜移默化地从人们的行为当中获取反馈信息。</li> <li> <strong>显性反馈</strong>:允许人们直接对输出进行反馈。</li> <li> <strong>手动修正</strong>:允许人们自主更正模型产生的错误输出。</li> </ul> <p><img alt="" src="/sites/default/files/images/202001-ML/00077-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h5> 校准设置</h5> <p>通过校准设置,系统可以获取到用于开启功能的基本信息,譬如生物识别或环境信息等等。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00078-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>我们以 HomeCourt 为例。这款 app 可以辅助人们提升投篮水平。它通过机器学习来分析摄像头捕捉到的图像,进而为你提供一系列相关的统计数据,例如命中率等等。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00079-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>为了实现这些功能,app 首先需要进行校准设置,从而正确地识别到人、篮筐和球场。其实现方式非常简单易行,你只需要将前置摄像头对准篮筐的方向,app 即可自动标定位置。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00080-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>接下来,它会提示你投一次篮,然后所有的校准工作就完成了。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00081-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/202001-ML/00082-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>这里的体验亮点在于整个校准过程的简单与自然。你不需要手动画线帮助系统进行识别,不需要确认识别结果是否正确,不需要在不同的位置反复投篮来提升识别率。</p> <p><strong>设计原则:确保校准过程的简单快捷,仅让用户提供最为必要的信息。</strong></p> <p>再来看 Face ID。其校准设置只需要通过两次扫描来收集最基本的信息;接下来无论人们戴上眼镜或是改变发型,都无需再次校准。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00083-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p><strong>设计原则:尽可能通过技术手段避免在使用过程中进行多次校准设置。</strong></p> <p>在设置 Face ID 的过程中,我们也会进行持续的提示和引导。首先,我们会清楚地告诉人们为什么需要扫描面部,让人们知道 Face ID 的工作机制及便捷之处。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00084-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>在整个过程中,我们会以可视化的方式让人们始终对进度保持感知。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00085-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>如果扫描停滞了,我们会提供必要的指引,帮助人们进入正确的操作状态。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00086-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>最后,我们会明确地反馈成功结果。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00087-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p><strong>设计原则:在校准设置的过程中,要始终为人们提供介绍、指引、状态反馈与确认。</strong></p> <p>当然,Face ID 所收集的信息对于人们来说非常敏感。为了尊重人们的隐私,我们还会在&ldquo;设置&rdquo;当中提供修改或删除相关信息的方式。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00088-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p><strong>设计原则:为人们提供更新信息的方式。</strong></p> <p>正如前面所说,完成初始的校准设置后,无论人们改变发型,还是戴上眼镜、帽子、围巾,甚至是随着年龄增长而发生相貌的变化,Face ID 都可以持续运行,而无需多次设置。这对于我们来说其实是非常大的挑战。</p> <p>人们自然不会愿意被反复要求进行校准设置。Face ID 所采用的策略,是在人们每一次使用 Face ID 时潜移默化地获取和更新面部信息。这就是我们接下来要聊的第二类输入类型。</p> <h5> 隐性反馈</h5> <p>隐性反馈会在人们使用功能的过程中获取相关信息,用以对功能进行优化和更新。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00089-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>隐性反馈最常用于功能的个性化处理。譬如 Siri 会根据人们使用设备的习惯对搜索状态进行定制。你在首屏展开搜索栏后,Siri 便会直接呈现一些你最有可能需要用到的 app。</p> <p>这里具体会呈现哪些 app 将取决于 Siri 所接收到的一系列隐性反馈,包括你最常用到哪些,你刚刚用过哪些,以及你在每天的这个时段通常会用哪些,等等。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00090-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>如上图所示,在行车时,我通常会打开&ldquo;地图&rdquo;导航,或是打开&ldquo;音乐&rdquo;、&ldquo;播客&rdquo;听点东西。</p> <p>而在工作时间,我通常会用到&ldquo;备忘录&rdquo;和&ldquo;提醒事项&rdquo;等等。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00091-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>在家里,我通常会用到&ldquo;信息&rdquo;和朋友们交流,或是查看&ldquo;健身记录&rdquo;和&ldquo;新闻&rdquo;等等。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00092-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>取决于我如何使用我的手机,Siri 会试着判断我在特定场景下的意图,并将我最可能用到的那些主动呈现给我。</p> <p><strong>设计原则:通过观察人们如何与功能进行互动,来判断他们的习惯与需求意图,进而主动提供相应的个性化体验。</strong></p> <p>随着时间的推移,Siri 会越来越精准地理解我的意图。除了提供 app 建议,它还会开始尝试为我的各种高频操作提供快捷方式。</p> <p>譬如在车上时,Siri 会根据我常去的地方或是接下来的会议场所提供导航建议。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00093-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>在工作时,它会为我提供工作相关备忘录或提醒事项的快捷方式。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00094-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>回到家后,快捷方式则变为家居控制或&ldquo;信息&rdquo;、&ldquo;Facetime&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00095-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>这些快捷方式会在你开始使用新手机或新系统的几天或几周后开始提供。由于 Siri 需要基于隐性反馈来学习你的习惯与意图,因此要达到足够的精确度,势必要花上一定的时间。这不成问题,付出时间成本来提升精确度,比立刻提供不靠谱的建议要好很多。</p> <p><strong>设计原则:隐性反馈不会带来立竿见影的效果,体验的精确性会随着时间而逐渐提升。</strong></p> <p>这些个性化建议会在锁屏上出现,其中有可能包含比较敏感的信息。为了尊重隐私,我们会为每个 app 提供相应的设置,允许人们决定是否将相关信息呈现在搜索建议当中。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00096-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p><strong>设计原则:在运用隐性反馈时,要始终考虑到人们的隐私与安全性问题。</strong></p> <p>除了个性化以外,隐性反馈还可以用于细微之处的体验提升。我们以 iOS 的键盘为例。键盘的每个按键都有其各自的实际点击区域。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00097-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>通过机器学习,系统可以动态优化这些点击区域,譬如根据你正在输入的单词或是手指的位置来调节点击区域的实际尺寸。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00098-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>请注意,按键的可视尺寸从不会真正发生变化;但人们会随着时间的推移而感知到键盘正变得越来越精准和个性化。</p> <p><strong>设计原则:可以通过隐性反馈来逐渐提升交互操作的精准度与舒适度。</strong></p> <p>再来看 Siri 建议在 Safari 中的运用。Safari 会通过机器学习从信息、邮件、阅读列表、iCloud 标签页等地方收集网页链接,目的是从你的关系链或个人浏览行为当中提取更多你可能感兴趣的网页内容。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00099-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>不过偶尔你也会觉得某些建议并不是你想要看到的,譬如一篇你不感兴趣的文章,或是你不够信任的内容出处。如果这些建议都不具备推荐价值,人们就会逐渐对搜索建议甚至是 Safari 失去信任。这是我们必须避免的状况。</p> <p>之前我们谈到过如何通过释义信息来解释为什么会推荐特定的内容,但除此之外,我们仍然希望为人们提供手动控制的方式,来标定他们不希望看到的内容。这就是我们接下来要聊的第三类输入类型。</p> <h5> 显性反馈</h5> <p>显性反馈是指允许用户直接对输出结果进行明确的反馈。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00100-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>在刚刚 Safari 的例子中,我们可以提供这样的功能,允许用户标定他们不想看到的内容,这样模型便可以从中学习,避免在将来呈现类似的内容。</p> <p>应该如何设计这样的反馈机制呢?我们时常会见到这样两个操作,&ldquo;喜欢&rdquo;和&ldquo;不喜欢&rdquo;:</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00101-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>不过即便搭配文字标签,它们会带来的结果依然有些不明。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00102-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>譬如我想对某篇推荐内容进行反馈,于是唤起菜单,看到有个选项叫做&ldquo;喜欢&rdquo;。这时我会想,我是不是要对每一篇我喜欢的文章都执行一次这样的操作呢?</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00103-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>正向的显性反馈会带来额外的交互和认知成本。人们势必会猜测是否需要逐一&ldquo;喜欢&rdquo;才能提升推荐的精准度。其实用户对于内容的正向反馈可以更明确地体现在其他行为当中,例如阅读、收藏或分享。</p> <p><strong>设计原则:尽可能只提供负面反馈方式作为显性反馈。</strong></p> <p>然而,即便只提供&ldquo;不喜欢&rdquo;这一个选项,依然会带来认知上的不明。我不喜欢的是这篇文章,还是作者,还是来源出处,或是分享给我这篇文章的人或 app 呢?我依然会困惑于点击按钮可能造成的结果。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00104-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>而&ldquo;减少此类内容的推荐&rdquo;或&ldquo;隐藏这条推荐&rdquo;则更加易于人们对操作结果产生预期。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00105-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>要想给人们更多的控制权,我们还可以允许他们进行更具体的选择,例如减少特定来源或来自某人的内容推荐。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00106-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p><strong>设计原则:在显性反馈中,清晰地描述出操作的含义及结果,并尽可能提供更具体的选项来帮助用户理解和选择。</strong></p> <p>当然,在我选择了某个负面选项之后,界面应该立刻对我的操作进行响应,移除相应的内容且不再进行推荐。</p> <p><strong>设计原则:对人们的显性反馈即刻进行响应,并持续保持作用。</strong></p> <p>显性反馈可以帮助模型减少错误的或是不恰当的输出结果。但对于某些功能来说,显性反馈的方式可能并不适合,甚至是难以实现的。</p> <p>譬如我在和朋友讨论狗狗安吉时想要输入&ldquo;Angie&rdquo;,但在输入&ldquo;angie&rdquo;后系统却想将其修正成&ldquo;angle&rdquo;。这显然是不合适的。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00107-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>假设我们通过显性反馈的方式为人们提供一个选项菜单。这不仅让人感觉非常异样,而且根本无助于我实现想要的输入。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00108-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>实际上,我可以选中被系统修正的单词,手动输入正确的&ldquo;Angie&rdquo;。系统会学习我的手动修正,并且不会再将我接下来输入的&ldquo;Angie&rdquo;更改为其他单词。这就是我们接下来要聊的第四类输入类型。</p> <h5> 手动修正</h5> <p>手动修正允许人们通过正常的操作方式来自主更正那些错误的输出结果。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00110-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>何为&ldquo;正常的操作方式&rdquo;?在刚刚键盘输入的例子中,我们使用标准的、人人皆知的文本操作方法来重新输入单词,从而更正了系统的错误;期间不涉及任何额外的界面元素,譬如选项菜单等等。这就是&ldquo;正常的操作方式&rdquo;。</p> <p>手动修正可以在不带来额外交互逻辑的情况下对输出结果进行优化。</p> <p>以&ldquo;照片&rdquo;为例。它可以通过机器学习来自动优化照片,例如找到最佳旋转角度和裁切方式。</p> <p>&ldquo;照片&rdquo;提供优化建议的方式非常微妙。你进入照片的编辑模式,选择旋转或裁切工具,照片便会自动进行细微地调整。但它实际上并没有真正进行修改,仅是作为一个简单的操作起点供你选择。如果你觉得自动调整符合心意,直接点击&ldquo;完成&rdquo;即可。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00111-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>如果你不喜欢它的建议,也可以直接通过相关的控件进行手动调整,修正系统的优化方案;系统也会自动退出自动优化模式。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00112-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p><strong>设计原则</strong>:</p> <ul> <li> 允许人们通过常规操作修正输出结果。</li> <li> 在人们进行修正之后,模型的行为方式即刻发生变化,例如当人们修改单词之后,键盘不再对其进行修正建议。</li> <li> 将手动修正作为显性反馈的一种形式,来优化机器学习的输出结果。</li> </ul> <h4> 结语</h4> <p>这些就是我们希望与各位分享的关于机器学习界面设计的相关模式及设计原则。如你所见,其中覆盖到了很多我们长久以来非常熟悉的那些界面元素。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00114-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>设计方法并非完全新颖,改变了的只是新的技术与使用场景。无论选择怎样的设计模式,都必须确保对人们的尊重。无论释义信息还是显性反馈,都会需要人们付出额外的认知与操作成本,甚至干扰人们的注意力。因此选择设计方法时,必须做到以人为本。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00115-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>基于机器学习的产品体验设计,需要考虑的远不止界面输出层面。数据,指标,输入,输出,这四个方面的要素共同决定了产品能否为人们提供易于理解、符合直觉的体验。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00116-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>正如我们在此次分享开头时所说,我们正在或将要打造的产品及体验都无法脱离机器学习而存在。我们看到了诸多案例,包括如何借助机器学习来帮助人们保持注意力,如何提供更优质的推荐内容,如何在恰当的时间呈现最符合场景的信息,如何自动完成常规任务。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00117-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>机器学习所能做到的远不止这些,我们可以借助它的力量来提升生存的质量,例如通过追踪运动行为来督促我们保持健康,通过计算机视觉及语音控制的运用来帮助盲人&ldquo;听&rdquo;到景象,通过侦测心率来判断健康问题等等。当你将技术与你们所秉承的价值结合到一起时,你就可以创造出能够提升人类生存质量的产品体验。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00118-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/202001-ML/00119-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/202001-ML/00120-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/202001-ML/00121-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>希望本次分享能给各位带来启迪,帮助大家设计出更加优质的机器学习产品体验。谢谢。</p> <ul> <li> <span style="font-size:12px;">视频链接:</span><a href="https://developer.apple.com/videos/play/wwdc2019/803/">Designing Great ML Experiences</a></li> </ul> <p><img alt="" src="/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="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/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/316" typeof="skos:Concept" property="rdfs:label skos:prefLabel">ML</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/317" typeof="skos:Concept" property="rdfs:label skos:prefLabel">机器学习</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/36" 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> Wed, 15 Jan 2020 07:17:19 +0000 C7210 1087 at http://beforweb.c7210.info http://beforweb.c7210.info/node/1087#comments 基于机器学习的产品体验设计 (3) 输出的设计 http://beforweb.c7210.info/node/1085 <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://beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-machine-learning-core-ml-l.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>聊过了机器学习的基本原理及模型层面的设计要素,即&ldquo;数据&rdquo;和&ldquo;指标&rdquo;,接下来我们将探讨界面层面的设计。</p> <p>优秀的机器学习体验一方面取决于底层模型的质量,另一方面取决于界面能否帮助人们以符合直觉的方式与信息互动。</p> <p>模型的处理结果会经由界面转化为易于人们认知和互动的信息,即&ldquo;输出&rdquo;;模型从人机互动过程中接收到的,可以被用于模型优化的反馈信息,即&ldquo;输入&rdquo;。</p> </div> <!--break--><p><img alt="" src="/sites/default/files/images/202001-ML/coreml-og.png" style="width: 620px; height: 326px; border: none;" /></p> <h3> 第三部分:输出的设计</h3> <p>聊过了机器学习的基本原理及模型层面的设计要素,即&ldquo;数据&rdquo;和&ldquo;指标&rdquo;,接下来我们将探讨界面层面的设计。</p> <p>优秀的机器学习体验一方面取决于底层模型的质量,另一方面也取决于界面能否帮助人们以符合直觉的方式与信息进行互动。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00048-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>模型的处理结果会经由界面转化为易于人们认知和互动的信息,即&ldquo;输出&rdquo;。</p> <p>模型从人机互动过程中接收到的,可以被用于模型优化的反馈信息,即&ldquo;输入&rdquo;。</p> <p>我们已经在 HIG (人机界面设计指南)文档中创建了一系列关于&ldquo;输出&rdquo;与&ldquo;输入&rdquo;的设计模式说明;今天,我们将从中选择一部分进行深入讨论,帮助你更好地理解如何将相关设计原则应用到实际产品的体验设计当中。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00049-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h4> 输出(Outputs)</h4> <p>你可以将&ldquo;输出&rdquo;理解为一种设计媒介,通过它来为人们提供更加情境化的无缝体验。</p> <p>接下来我们将从四个方面来了解关于&ldquo;输出&rdquo;的设计原则,包括:</p> <ul> <li> 多重选项:如何同时呈现多个相关的输出值。</li> <li> 释义:诠释输出机制,避免带来困惑。</li> <li> 可信度:以恰当的方式体现输出的可靠程度。</li> <li> 局限性:如何解决功能与预期之间的冲突。</li> </ul> <p><img alt="" src="/sites/default/files/images/202001-ML/00050-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h5> 多重选项</h5> <p>多重选项使人们可以从模型输出的一系列相关结果当中进行选择。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00051-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>在实际当中,模型针对特定问题所输出的结果可能不止一个。然而设计者往往倾向于只为人们提供一个&ldquo;最优选项&rdquo;;在真实场景中,这未必能带来最优体验。</p> <p>来看个现实中的例子。上周末,我想来一次从旧金山到纳帕谷的短途旅行,于是我向同事们打听最优路线是哪条。</p> <p>取决于我所询问的对象及时间,他们的回答各有不同。路线预测是一件复杂的任务,当中涉及到很多变量,且始终在发生变化,譬如拥堵、施工、交通意外等等。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00052-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>在&ldquo;地图&rdquo;中,我们同样基于这些变量信息来预测最佳路线。通常情况下,单一的输出结果是不够的,因为我们无法了解特定用户的关注点,他们有可能喜欢风景秀丽的路线,有可能倾向于收费较少的路线,或是希望避开高速公路,等等。</p> <p>如何弥补多种多样的需求喜好与模型输出局限性之间的鸿沟?答案就是同时提供多个输出选项供人选择。譬如&ldquo;地图&rdquo;会为我提供三条不同的路线,使我可以根据具体情况来切实掌控自己的行程。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00053-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>在可能的情况下,尽量提供多个相关的输出结果,帮助人们更好地根据个人需求或喜好来进行选择。</p> <p>进入实际行程之后,人们同样需要用到地图;对于那些看上去非常相似的路线选项,人们可能很难迅速理解其中的差异并进行选择。</p> <p>我们可以进一步帮助人们了解不同选项之间的具体差异,譬如通过辅助信息告诉人们哪条路线需要收费,哪条路线会经过高速;甚至可以高亮突出那些滨水景观路线。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00054-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>这些信息有助于人们快速了解多个选项之间的差异,从而更易于在行动场景当中进行选择。</p> <p>或许地图的例子有些过于显而易见,因为我知道自己在哪,要到哪里去,输入和输出都很明确。而对于那些需求和场景都比较模糊的情况,多重选项依然非常有用。我们以 Apple Watch 为例。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00055-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>一日之计在于晨。每天早上,我都需要了解当天的天气状况,查看我的当日安排与待办事项等等。Watch 的&ldquo;Siri&rdquo;表盘可以为我提供多达 19 个来自于不同 app 的信息。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00056-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>要在这块小屏幕上浏览 19 个 app 的信息并不轻松。还好 Siri 会根据当前的时间、地点和我的最近操作来优先选择其中的某些信息,呈现在最顶端的几张卡片当中。这使得我每天早上的惯例任务变得非常轻松。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00057-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>而对于系统来说,人们进行的每一个选择都是一次&ldquo;隐性输入&rdquo;。对于这些选项保持长久的学习,模型在模糊场景下优先提供的若干选项将会变得越发符合人们的实际需求。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00058-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h5> 释义</h5> <p>释义信息用于向人们解释 app 做出特定决策的具体原因。譬如 App Store 会通过释义信息告诉人们为什么会向他推荐特定的 app,这样也可以帮助人们了解相关数据的用途,使他们更加放心。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00059-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>来看一些具体的设计原则。假设 App Store 因为我曾经下载过烹饪类 app 而为我做了一系列相关推荐。实际上,我下载过相关 app 并不意味着我一定是要下厨,也不意味着我真的喜欢那个 app;因此,在通过辅助信息解释推荐原因时,一定要反映出客观的关联条件,而不要自作聪明地替用户做任何主观假设。</p> <p>App Store 的做法是简明地陈述出&ldquo;因为你下载过 NYT 烹饪&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00061-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>我们无法完整客观地了解某个人的口味和喜好,这些会随着每一天的生活而发生变化;而且人们也很有可能在和家人分享账号。任何关于用户的主观假设都有可能令他们感到困惑。不要在释义信息当中对用户的喜好或情绪进行任何看似聪明的理解和判断。</p> <p>释义元素还可以用于描述输出结果的权威性。我是一个天文爱好者,我有时候需要了解当晚的天空中有哪些星体是可见的。譬如我会问 Siri:&ldquo;什么时候可以看到木星?&rdquo; 我所得到的答案当中会包含该信息的来源,譬如著名的知识引擎 Wolfram Alpha,使我了解到信息具备足够的可靠性。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00062-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>特别是在涉及科学或政治一类的场景时,相关的数据来源信息对于人们的进一步决策是非常必要的。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00063-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h5> 可信度</h5> <p>有时候,我们还需要通过一些信息来描述输出结果的可信度。</p> <p>仍以 App Store 为例。其实我们可以更具体地告诉人们,那些推荐 app 与他有 85% 的匹配度,但这样的表达方式非常难于理解,因此我们会使用上文当中提到的释义方式。</p> <p>但是 85% 这个数字本身是可信程度的一种量化体现,意味着模型的输出结果可能被人们所喜欢的几率。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00065-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>有时候,我们需要将可信度以更加易于理解的方式提供给人们进行判断;而有时,我们又需要直接将可信度的数字呈现出来。</p> <p>譬如&ldquo;天气&rdquo;中的&ldquo;降雨概率&rdquo;,人们如何根据&ldquo;30%&rdquo;这个数字来判断是否需要带伞?确实不太容易。但是一方面,这是约定俗成的表述方式,另一方面,人们也会随着时间而逐渐掌握概率数字与天气情况的对应关系。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00066-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>对于具有统计学意义的信息,譬如天气、体育赛事或大选一类的预测结果,直接使用数字是符合人们认知的方式。而另一些则不然。</p> <p>以廉价机票订购服务 Hopper 为例。他们也需要通过可信度来呈现价格上涨或下跌的可能性。对于这个需求场景,人们很难通过百分比来决定下一步的行动。如果当前价格继续下跌的可能性是 65%,那么是否该下单呢?在这里 65% 和 70% 之间又存在着这样的区别呢?</p> <p>因此 Hopper 会直接提供行动建议,譬如继续等待或立刻购买。同时他们还会进一步提供额外的信息,包括继续等待可能帮你节省下的最高金额,以及等待不要超过的最晚日期。这些信息综合起来就可以帮助人们更加有据可依地进行决策。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00067-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>然而在某些情况下,仅提供可信度仍然无法帮助人们有效地评估风险。例如我询问&ldquo;现在从这里出发去到旧金山需要多长时间&rdquo;,得到的答案是&ldquo;一点三十分到达那里的可能性是 72%&rdquo;,这会让人无从判断。</p> <p>这种情况下,提供区间范围是更好的做法。譬如 Lyft 在呈现车辆选项时,会让人们知道这辆车到达当前位置所需要的时长区间,以及到达目的地时的具体时间区间。这可以为我提供更加真实有效的判断依据。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00068-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/202001-ML/00069-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h5> 局限性</h5> <p>以上关于可信度的&ldquo;好例子&rdquo;都不难理解。然而如果信息的可信度过低,即模型难以提供足够有效的输出,我们应该如何处理呢?</p> <p>很多时候,我们还需要请用户参与进来,帮忙解决技术局限性所造成的问题。</p> <p>例如&ldquo;照片&rdquo;可以自动识别图像中的人物,但当可信度较低时,它还会邀请人们对相关照片进行额外的确认。我帮助 app 标注了这些照片,之后它便能更准确的对我进行自动识别。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00070-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>所谓局限性,即是指系统功能的执行结果与人们的预期之间存在错位。在我的预期当中,&ldquo;照片&rdquo;应该始终能够识别出我,即便客观来讲照片可能拍得太糊或是亮度过低。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00071-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>出于设计、硬件能力或环境等各方面因素,任何功能都会存在局限性。要增强人们的信任感,设计者必须让人们对这些局限性保持知情,并告诉人们如何进行相应的处理。</p> <p>我个人非常喜欢 Memoji,但这个功能在某些情况下是无法正常工作的,例如人脸不在取景范围当中,或是摄像头被遮盖,或是环境较暗,等等。每当这些状况发生时,系统都会立刻进行提示,引导人们进入正确的使用状态。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00072-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>如果缺乏对于局限性的告知和引导,人们就会对功能失去信任感。你必须管理人们对于功能的预期,通过各种方法引导人们解决问题。</p> <p>帮助人们在异常状态下继续完成任务的另一种方式,就是提供备选方案。这需要你对人们使用产品时的实际目标有着清楚的认知。</p> <p>例如人们有可能会在 Mac 上试图让 Siri 开启计时器,然而 macOS 并没有提供这项功能。这种情况下,Siri 不会简单的回复&ldquo;无法执行&rdquo;,毕竟那样会带来负面体验;取而代之地,它会提供创建提醒事项的建议。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00073-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>这个建议是符合场景的,因为人们的实际目标很可能是为了在特定的时间收到提醒,而&ldquo;提醒事项&rdquo;同样可以帮助人们完成这个目标。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00074-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h5> 小结</h5> <p>希望上述四个方面的设计原则可以帮助你更好地为模型的输出进行设计。</p> <p>请始终记住,&ldquo;输出&rdquo;是一种设计媒介,我们可以根据实际的设计目标去选择最适合自己产品的输出模式。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00075-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>我们要确保输出信息能够被人们在实际场景当中快速地理解;有时还需要将模型的输出转化成为更有利于人们进行决策的形式;在必要的情况下还要引导人们处理问题,实现目标。</p> <p>&ldquo;输出&rdquo;并不是一成不变的,它会根据人们的输入而始终发生变化。接下来,我们将探讨如何面向交互输入进行设计。</p> <ul> <li> <span style="font-size:12px;">次回预告:(4) 输入的设计</span></li> <li> <span style="font-size:12px;">视频链接:</span><a href="https://developer.apple.com/videos/play/wwdc2019/803/">Designing Great ML Experiences</a></li> </ul> <p><img alt="" src="/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="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/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/316" typeof="skos:Concept" property="rdfs:label skos:prefLabel">ML</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/317" typeof="skos:Concept" property="rdfs:label skos:prefLabel">机器学习</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/36" 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> Mon, 13 Jan 2020 11:20:59 +0000 C7210 1085 at http://beforweb.c7210.info http://beforweb.c7210.info/node/1085#comments 基于机器学习的产品体验设计 (2) 数据与指标 http://beforweb.c7210.info/node/1084 <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://beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-machine-learning-core-ml-l.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>说起来也是不得了,还有两周就要过年了;期盼着春节间回去北方看看老同学老朋友。上周被雪景刷屏时艳羡的心情依然未退。</p> <p>今天是&ldquo;机器学习&rdquo;的第二篇,进入&ldquo;模型&rdquo;层面的讨论,内容相比于之前一篇&ldquo;基本原理与设计要素&rdquo;来说抽象了很多。接下来进入&ldquo;界面&rdquo;层面的话题后会更易于理解。</p> <p>希望在下周结束前,这个系列可以完结掉。之后大约会暂时停更一段日子;届时详细说。各位周末愉快~</p> <!--break--><p><img alt="" src="/sites/default/files/images/202001-ML/coreml-og.png" style="width: 620px; height: 326px; border: none;" /></p> <h3> 第二部分:数据与指标</h3> <p>首先,我们来了解&ldquo;模型&rdquo;层面的一系列设计原则,涉及&ldquo;数据&rdquo;与&ldquo;指标&rdquo;两个方面。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00025-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>为了让 app 能够识别狗狗的照片,我们首先要通过一系列范例内容帮助机器训练相关的模型。这些范例就是我们所说的&ldquo;数据&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00026-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h4> 数据(Data)</h4> <p>要实现优秀的照片搜索体验,我们需要大量的、种类繁多的数据。要确保人们在搜索&ldquo;dog&rdquo;时能够得到狗狗的照片而非其他相似的小动物,我们需要同时提供狗狗和其他动物的照片来训练模型进行识别。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00027-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>进一步来说,真正的搜索体验应该支持人们日常可能搜索的成千上万种对象类型。对于其中的每一类,我们都需要提供数据;要新增一个类型或是改善现有类型的搜索,我们同样需要提供数据。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00028-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>如何选择有效的训练数据,这是打造搜索体验的关键。数据决定了模型的行为方式。</p> <h5> 数据与设计目标相匹配</h5> <p>如果你的数据无法捕捉到特定场景,那么训练出的模型也很难在那个场景中良好地运作。由于数据决定着模型的行为,而后者又直接决定着产品的功能体验,因此数据的选择也必须能够反映出目标用户的实际需求与利益。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00029-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>听起来有些抽象,我们实际看个例子。在&ldquo;相机&rdquo;的人像模式中,机器学习被用于探测人脸,并将身体与背景分离开来。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00031-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>从技术发展的历史角度看,人脸识别对于有色人种并不十分友好;然而对于 Apple 而言,我们必须确保产品体验具有足够的包容性。因此,我们的团队从不同的人种、文化与场景当中收集了大量的数据;只有这样,训练出的模型才能提供具备高度包容性的体验。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00032-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>简而言之,我们的数据规模与我们期望打造的产品体验是相匹配的;我们会根据产品设计目标有针对性地收集数据用以训练模型。</p> <p>对你而言也是同理。在训练模型之前确认一些问题,例如由谁来收集数据,具体应该收集哪些数据,如何收集,如何确保数据的客观性?</p> <p>如果你的设计目标是塑造丰富有趣的产品体验,那么数据也要反映出这一目标;如果你的产品主要用于户外活动,那么数据也应该来自于相关的场景。数据必须意图明确。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00033-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>开发者们很容易忽略产品体验的实际场景而盲目制定数据收集策略。必须首先充分理解你们的产品设计目标,进而确定需要为机器提供怎样的数据来训练出最为有效的模型。</p> <p>在前期花些时间思考如何收集正确的数据,往往可以为后期节省大量的时间和金钱。</p> <p>随着产品的迭代,以及你们对于用户及市场的理解的加深,你可能还需要不断更新数据,使模型始终适应于不断变化的设计目标。</p> <p>另外还需要留意所谓的&ldquo;标准化数据集&rdquo;。由学术界或行业制定的标准化数据或许可以帮你更好地了解机器学习的原理,从而易于起步,或是加速开发流程;但这些数据并非面向真实场景与体验而设计,更无法代表你们的产品设计目标。因此如果必须使用这类数据,首先考虑清楚它们的覆盖范围,在必要的时候进行补充,使其更符合你们的特定需求。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00034-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h4> 指标(Metrics)</h4> <p>数据用于训练模型;接下来要聊的&ldquo;指标&rdquo;则用于评估模型。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00035-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>我们需要通过测试来评估模型的有效性。仍以照片搜索为例。完成训练后,我们会为模型提供一系列包含各种小动物的照片,观察其判断的结果,对比其中正确与错误的数量。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00036-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>在这个例子当中,模型的正确率是 75%。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00037-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>这就是一个指标。诸如此类的指标可以帮助我们判断模型的训练是否成功,是否达到了产品应用的标准,或是需要继续训练。</p> <p>我们可以从很多不同的维度对模型进行测试,譬如观察它的运行速度,或是能够支持的对象类型数量等等。你需要充分权衡,从众多维度当中选择出最能代表你们设计目标的那些,作为判断模型成功与否的指标。</p> <h5> 指标与设计目标相匹配</h5> <p>指标可以衡量模型的质量,而模型的质量决定了产品体验能否达到设计标准,因此你所选择的指标必须能够代表你对于优质体验的定义。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00038-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>指标同样体现着产品的关键价值所在。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00039-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>我们来看个例子。Face ID 正是基于机器学习来探测你的面孔并实现设备解锁的。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00040-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>其整个机制背后蕴藏着一系列明确的体验目标与设计意图,而其中最为首要的就是安全性,因为用户信任我们,他们会将重要的个人数据交托于我们所提供的设备。</p> <p>安全问题涉及到方方面面,我们必须通过多种不同的指标来判断模型是否足够可靠;其中非常关键的一个指标就是&ldquo;任意一个人拿到你的手机之后能成功刷脸解锁的几率&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00041-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>我们一直追踪着这个指标,下了很大功夫去进行优化。在 Face ID 发布时,这一几率已经下降到了百万分之一。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00042-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>由于 Face ID 在当时还是新事物,我们需要让人们知道这项技术是足够可信的,因此我们也会通过这个指标与人们进行沟通,让人们了解 Face ID 的安全性。</p> <h5> 关于技术局限</h5> <p>但无论如何,&ldquo;百万分之一&rdquo;并非绝对完美。模型有可能产生的任何一次失误,都会在一个真实的使用场景里影响到一个真实的人;产品设计者必须考虑到这一点。</p> <p>如果另一个时空当中的我突然出现在了我的身边,我显然不希望他能通过 Face ID 来解锁我的手机,因此我还会设置密码进行额外的保护。在现实当中,这类问题对于双胞胎亲属来说是真实存在的;这也是新技术当中所存在的局限,设计者无法回避。因此我们也会和消费者就这一点进行沟通,并建议他们进行额外的安全设置。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00043-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>出错,这对于机器学习来说是难以避免的。很少有模型可以达到 100% 的正确率,作为设计者,你必须了解到这一局限。但这是可以接受的,因为产品设计本就是一个迭代的过程,模型同样可以不断进化。</p> <p>模型自身所存在的出错概率并不意味着你无法为人们提供优秀的产品体验。分析出错的原因,改善模型,或是清晰直白地让人们知道技术自身所存在的局限性。</p> <h5> 指标不是全部</h5> <p>另外不要忘记,指标,永远只是产品设计目标的一系列量化表现形式;不要仅着眼于统计数字的优化而无法自拔,却忽略了在真实场景中可能产生的实际体验问题;必要的时候,你可能需要结合其他方式来塑造更完整的体验。</p> <p>通过机器学习,App Store 会根据你已经安装的 app 来为你推荐更多类似的产品。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00044-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>用户在某个 app 中的停留时长确实是个不错的指标,毕竟人们在一件事情上所花费的时间越多,越代表他们喜欢这件事。但是,如果 App Store 完全以这个指标及相关模型作为驱动,那么人们最终只能看到一个又一个和自己当前使用的 app 非常相似的推荐。对我而言,这就意味着我将看到越来越多的游戏推荐。我固然喜欢游戏,但我不止需要游戏。</p> <p>需求、兴趣及场景是多种多样的;人们在一个 app 当中花费的时间未必真的代表他的实际需求。为了补足推荐模型的固有局限性,实现更加完整的体验,App Store 同时提供了人工参与编辑的推荐内容,帮助人们探索更多类型的优秀产品。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00045-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h5> 模型的进化</h5> <p>上线后,你会越来越多地了解到产品的实际表现,进而也会对用户需求产生更加深入的理解。设计目标会因此而逐渐进化,模型与相应的指标也是如此。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00046-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>譬如你可以通过实际的统计来评估人们对于多样化内容的需求,进而创建相关的模型,在推荐内容的&ldquo;多样性&rdquo;与&ldquo;喜好相关性&rdquo;之间找到最佳平衡点。</p> <p>无论如何变化发展,你都要确保通过正确的指标来持续追踪模型在进化过程中的表现,进而对设计目标的实现程度保持了解。</p> <p>如何确保指标能够始终体现出不断进化的产品设计目标呢?</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00047-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <ul> <li> <strong>理解错误</strong>:对模型出错的状况进行分析,将失败案例按照不同的类型与场景归类,并考虑不同的处理方式:是否需要通过非机器学习的方式进行处理,譬如改善界面层面的设计?还是需要一个更好的模型?</li> <li> <strong>针对失败场景的设计</strong>:在设计的过程中有针对性地考虑到失败场景,考虑到人们在实际使用时可能经历的各种情况,提供必要的额外保障措施,而不只是面向一切运作正常的情况而设计。</li> <li> <strong>评估实际体验</strong>:指标可以给到我们关于模型质量的客观数字;模型的表现决定了体验,但不等同于体验。作为设计师,仍然需要对体验本身进行持续评估。进行必要的用研,通过原型进行体验评估,与用户交流并获取反馈。如果评估结论是体验欠佳,但指标显示一切良好,那么你的指标本身很可能存在问题。</li> <li> <strong>持续优化指标</strong>:始终对指标的有效性保持质疑和评估。你越需要依赖某件事物,就越需要评估它的正确性。以不断进化的产品设计目标为核心,持续追踪和思考当前模型指标的合理性。</li> </ul> <p>&ldquo;数据&rdquo;与&ldquo;指标&rdquo;代表着模型层面的设计要素。接下来,我们将进入界面设计的层面,了解基于机器学习的产品在界面输出与输入方面的一系列设计原则。</p> <ul> <li> <span style="font-size:12px;">次回预告:(3) 输出的设计</span></li> <li> <span style="font-size:12px;">视频链接:</span><a href="https://developer.apple.com/videos/play/wwdc2019/803/">Designing Great ML Experiences</a></li> </ul> <p><img alt="" src="/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="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/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/316" typeof="skos:Concept" property="rdfs:label skos:prefLabel">ML</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/317" typeof="skos:Concept" property="rdfs:label skos:prefLabel">机器学习</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/36" 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> Fri, 10 Jan 2020 11:03:58 +0000 C7210 1084 at http://beforweb.c7210.info http://beforweb.c7210.info/node/1084#comments 基于机器学习的产品体验设计 (1) 基本原理与设计要素 http://beforweb.c7210.info/node/1083 <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://beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-machine-learning-core-ml-l.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>从什么时候起&ldquo;正常&rdquo;变得如此奢侈。适应异常,将非比寻常视为理所应当,这样的能力也越发珍贵而必要。只是想不通长此以往又该如何定义&ldquo;正常&rdquo;与&ldquo;反常&rdquo;。你总该给到它们足够清晰与符合逻辑的定义不是么。</p> <p>新年必须学些新东西,不然年复一年总是一门心思在那堆破事儿里转圈圈,还要不要进步了嘛你说?WWDC 19,Session 803,机器学习与体验设计相关话题,包括基本原理,设计要素,数据,指标,界面设计原则。</p> <!--break--><p><img alt="" src="/sites/default/files/images/202001-ML/coreml-og.png" style="width: 620px; height: 326px; border: none;" /></p> <h3> 第一部分:基本原理与设计要素</h3> <p>说起机器学习,我们总会想到一系列相关话题,例如语音识别、计算机视觉、深度神经网络、个性化处理等等。在 Apple,我们非常关注于如何面向机器学习进行体验设计,因为我们正在提供或将要打造的产品都不可能脱离于这项技术而存在。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00000-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>例如 AirPods 可以帮助我们唤起 Siri,进而使我们能够在脱离屏幕和双手参与的情况下,仅通过语音来控制设备;离开了 Siri 与机器学习,这样的体验就无从谈起。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00001-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>同样以机器学习为基础的 Face ID 则可以帮助我们进行便捷的安全认证。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00002-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>机器学习还会被运用到很多人们几乎察觉不到的地方,于无形之中提升着设备体验。譬如我们会通过机器学习来了解人们的打字习惯,进而动态地增大或减小键盘按键的实际点击区域,使其更符合人们的使用规律。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00003-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>机器学习的应用形式是多种多样的,而非局限于语音助手、内容推荐算法或是自动驾驶一类;它既能被用于现有产品的优化,也能融入新产品来实现更加丰富多彩的体验。</p> <p>我们接下来以&ldquo;照片&rdquo;为例,了解一下机器学习与 app 设计之间的关系。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00004-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>在&ldquo;照片&rdquo;中,机器学习可以帮助人们创建相册,编辑照片,搜索记忆。我近来正好需要搜索安吉的照片并分享给朋友们。安吉是我家的狗狗,这张照片拍摄于很多年前。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00005-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>其实就在不久之前,要找到这样一张特定的照片都是非常困难的事,你需要在手机里成千上万张照片当中花上很多时间寻找一番,期间还必须回想着那张照片可能是在何时何处拍摄的。我往往会半途而废;寻找照片这件事成了我发起人际交流的屏障。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00006-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>从 iOS 10 开始,我们在&ldquo;照片&rdquo;中引入了搜索功能。经过持续的迭代优化,如今照片搜索的体验模式大致是这样的:我点击搜索框,输入&ldquo;dog&rdquo;,然后得到一个包含所有狗狗照片的列表;我选择要找的那张,然后分享给我的朋友。就这么简单。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00007-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/202001-ML/00008-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>基于图像中的内容来搜索照片,这一技术改变了我们与图像信息的互动方式,如今我们已经习以为常。而如此简单便捷的体验其实是经过精心设计的,其中自然涵盖一系列界面层面的设计工作,例如分类搜索建议、自动补全关键词、将搜索结果与&ldquo;时刻&rdquo;进行关联等等。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00010-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>然而如果只关注界面设计,我们就很容易忽视掉整个智能化体验当中最为重要的部分,即内容本身的输出逻辑,包括搜索结果类别及匹配度的制定等等 - 设计不止存在于界面层面。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00011-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>对于以机器学习为核心的功能或产品,在塑造其体验时,设计师需要考虑的远不止界面样式和交互层面的设计;除了流程、操作体验、外观美学等等,我们同样需要对机器学习的运用方式及输出逻辑进行设计。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00012-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h4> 基本原理</h4> <p>那么让我们来了解一下机器学习在照片搜索功能当中的基本运作机制。</p> <p>将最核心的逻辑提炼出来,我们可以简单地理解为:app 能够对图像的内容进行扫描,并判断其中是否包含着系统已知的对象类型。</p> <p>对于我们的案例来说,app 可以判断安吉的照片中存在&ldquo;狗&rdquo;这种类型。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00013-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>在传统的编程方式下,我们必须编写代码告诉计算机具体做些什么;我们需要在代码中预先定义不同的品种、场景,包括不同类型的图片分辨率,因为用户各有不同,他们的爱犬同样多种多样。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00014-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>我们还需要通过代码将狗狗与其他类似的动物加以区分,例如这只鬣狗。它虽然长得像狗,但你不会想让它做你的宠物。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00015-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>所有这些变量组合起来,其结果是无穷无尽的,我们完全没可能通过编写代码来预先进行完整的定义。</p> <p>而&ldquo;狗&rdquo;只是我们可能需要识别的成千上万的对象类型当中的一种而已;有太多的实际需求令我们无法预先告诉计算机具体要做些什么。这种情况下,我们就可以通过机器学习技术来&ldquo;教&rdquo;计算机该怎样做。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00016-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>具体如何来&ldquo;教&rdquo;?我们需要为计算机提供大量的&ldquo;范例&rdquo;进行训练。</p> <p>例如我们希望计算机学会将包含狗的照片与不包含狗的照片区分开来,我们就要预先提供这两种类型的照片,供它学习其中的特征;计算机会逐渐培养出判断能力,而这个能力即可被用到我们的 app 当中,用以构建照片搜索。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00018-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>我们将这个判断能力称作&ldquo;模型&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00019-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>完成训练之后,模型便可以分析它此前从未见过的照片,从中识别出不同种类的狗狗,并能将狗狗与其他动物或物体区分开来。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00020-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>模型是机器学习的核心。任何基于机器学习所构建的功能都离不开相应的模型。Siri 拥有将人声转化为文字的模型。键盘拥有判断用户输入意图的模型。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00021-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>对于以机器学习为核心的功能或产品,其体验设计必须同时考虑到&ldquo;界面&rdquo;与&ldquo;模型&rdquo;这两个层面;我们本次的主题将涵盖到这两大方面。</p> <p><img alt="" src="/sites/default/files/images/202001-ML/00022-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h4> 设计要素</h4> <p>模型的训练是一件复杂的事,你可能需要在算法、参数、框架等方面进行大量的决策;这些决策会影响到模型的能力,并最终决定着产品体验的优劣。</p> <p>所有相关决策在本质上都是产品设计决策。但对于设计师而言,其中的某些方面是需要特别关注的,包括:</p> <h5> 模型层面</h5> <ul> <li> 通过怎样的范例训练模型,即&ldquo;<strong>数据</strong>&rdquo;。</li> <li> 如何判断模型是否有效,即&ldquo;<strong>指标</strong>&rdquo;。</li> </ul> <p><img alt="" src="/sites/default/files/images/202001-ML/00023-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <h5> 界面层面</h5> <ul> <li> 如何将处理结果呈现给用户,即&ldquo;<strong>输出</strong>&rdquo;。</li> <li> 用户如何与模型进行互动,如何通过互动来改进模型,即&ldquo;<strong>输入</strong>&rdquo;。</li> </ul> <p><img alt="" src="/sites/default/files/images/202001-ML/00024-machine-learning-design.png" style="width: 620px; height: 362px; border: none;" /></p> <p>接下来,我们将从这四个方面出发,对基于机器学习的产品体验设计进行深入讨论。</p> <ul> <li> <span style="font-size:12px;">次回预告:(2) 数据与指标</span></li> <li> <span style="font-size:12px;">视频链接:</span><a href="https://developer.apple.com/videos/play/wwdc2019/803/">Designing Great ML Experiences</a></li> </ul> <p><img alt="" src="/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="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/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/316" typeof="skos:Concept" property="rdfs:label skos:prefLabel">ML</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/317" typeof="skos:Concept" property="rdfs:label skos:prefLabel">机器学习</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/36" 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> Mon, 06 Jan 2020 08:07:27 +0000 C7210 1083 at http://beforweb.c7210.info http://beforweb.c7210.info/node/1083#comments Apple 设计大奖的设计之道 (4) 包容性与细节 http://beforweb.c7210.info/node/1082 <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://beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-wwdc-2019-apple-s.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>新年快乐喽,今天过去之后就是这个世纪的二十年代了,有趣,咱们还在一周一周地琢磨互联网啊手机啊这些介质的产品设计呢,十多年如一日。不知道下一个主流范式会是什么,又会在何时到来。可别信那些标题党。</p> <p>继续&ldquo;设计大奖&rdquo;系列,今天完结掉。在<a href="http://beforweb.com/node/1081" target="_blank">上一篇</a>中,来自布道者团队的两位主持人以三款游戏和一款 app 作为案例探讨了&ldquo;美观性&rdquo;在产品中的作用,错过的朋友不妨回看。今天来聊最后两个话题:&ldquo;包容性&rdquo;和&ldquo;细节&rdquo;。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/Apple_Design-Awards_Cube.jpg" style="width: 620px; height: 326px; border: none;" /></p> <h3> 设计大奖的设计之道 (4)</h3> <p>我们接下来要聊的话题是产品设计中的&ldquo;包容性&rdquo;,这是所有优秀的 app 和游戏都应该具备的设计特质。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00096-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <h4> 包容性(Inclusion)</h4> <p>所谓&ldquo;包容性设计&rdquo;(inclusive design),即是指界面可以被所有的人群访问和使用。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00097-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>来看一个小例子。我们暂时回到之前介绍过的 Pixelmator Photo,看看他们是如何运用 iOS 平台提供的原生控件来确保界面能够被尽可能多的人所使用。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00098-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>我们在这里聚焦于一个小小的元素,即开关控件(switch)。在 Pixelmator Photo 当中,这个控件用于开启或关闭侧边栏里的某一组编辑参数选项。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00099-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>聊起这个细节时,他们的团队告诉我,他们原本想要使用的是其 macOS 版本当中用到的传统复选按钮(checkbox)。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00100-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>虽然看上去差不多,但通过测试,他们发现复选框在这里不如开关控件那样突出和易懂。开关控件是 iOS 原生控件,会令目标用户群体更加熟悉,同时它也具有更高的可访问性。在 iOS 的&ldquo;设置&rdquo;当中,用户还可以为开关控件设置标签样式,进一步增强其可访问性。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00101-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>使用平台提供的标准化控件,你可以更方便地实现界面的全局一致性,使交互体验更易预知,更具可访问性。</p> <p>接下来,我们再次以之前介绍过的 Ordia 为例。在 Ordia 的世界中,每一种生物都有着特定的颜色,玩家可以快速识别出其敌友关系。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00102-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>Ordia 的开发者们不希望将任何玩家拒之门外,因此他们还在游戏中提供了色盲模式。为了实现这一点,他们在静态界面上使用滤镜来模拟各种类型的色盲效果,并持续调整游戏元素的配色,实现最佳的区分度。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00103-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>他们甚至会在完全单色的效果下测试游戏,确保全色盲患者同样可以辨识的游戏元素。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00104-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>对于全球范围内超过三亿的各类色盲患者来说,Ordia 的包容性设计可以带来非常友好的产品体验。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00105-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>与此同时,Apple 也在一直提升着各个平台的开发框架及标准化控件的可访问性;你在设计开发过程中使用的原生模式越多,产品天然具备的包容性就会越强。</p> <h4> 关注细节(Attention to detail)</h4> <p>最后,我们来聊一聊细节。关注细节,这是 Apple 的核心价值之一,它贯穿于我们所做的每一件事情当中。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00106-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>一丝不苟、细致入微的设计来自于创作者们的勤奋工作,来自于他们对于完美的追求,来自于他们对于体验中每个细节的高度关注。</p> <p>我们以 Moleskine 出品的 Flow 为例。这是一款绘图 app,提供了无限宽度的画布,以及一系列高度定制化的绘图工具。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00107-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>Flow 团队的目标,就是让人们可以畅快安心地保持在创作状态当中。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00108-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>我们今天将聚焦在一个功能元素上,来看看他们对于设计细节的极致关注。</p> <p>Flow 的绘图工具选择器及其颜色切换方式是我们所见过的最全面且最为易用的。你可以感受到开发者们对于其中的每一个方面所注入的心血。他们提供了海量的颜色选项,而调整色调、明度、饱和度的交互方式可以即刻为用户提供清晰易懂的视觉反馈。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00109-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>为了实现这样的体验,开发者们投入了大量的时间用于制作原型并进行验证。下面是他们在早期用于验证基本交互模式的低保真原型;为了更好地聚焦在交互层面,避免被视觉样式问题牵扯注意力,他们在这个阶段只使用了最基本的文字按钮。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00110-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00112-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>确定了交互层面的体验足够优秀之后,他们才开始视觉样式方面的工作,对每一个绘图工具进行细致入微地持续打磨。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00113-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00114-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00115-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>最后,他们通过优雅的动效将所有设计元素整合在了一起。在现实生活中,事物的运动方式都是平滑而连贯的,这一点也完美地体现在了 Flow 的动效运用当中。</p> <p>优秀的动效设计可以帮助人们快速了解界面的使用方式,可以吸引人们的注意力,并为操作行为提供清晰的反馈。动效设计绝非只是界面转场那么简单。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00117-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>此外,他们还为超过 1400 种颜色选项进行了各自独立且有章可循的命名。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00118-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这样一套操作体验细致入微的工具与颜色选择器为创意表达提供了开阔的空间,人们可以更好地聚焦于创作本身,开发者们的设计目标也得以实现。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00119-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>对于细节的关注可以令你的 app 或游戏从众多产品当中脱颖而出,但这势必需要你将大量的时间投入到节奏分明的设计流程当中。首先解决最基础性的问题,正如 Flow 团队从低保真原型开始确定界面框架与交互模式,进而深入雕琢视觉样式与动效表现。</p> <p>最终,人们在体验产品时,也一定会从中感受到开发者们所付出的心血和汗水。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00120-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <h4> 结语(Ending)</h4> <p>通过一系列 Apple 设计大奖得主的案例分析,我们依次探讨了如下设计要素,包括:</p> <ul> <li> 创新</li> <li> 信任感</li> <li> 精益求精</li> <li> 美观性</li> <li> 包容性</li> <li> 关注细节</li> </ul> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00121-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>实际上,所有这些要素在我们聊到的每一个 app 和游戏当中都有着良好的体现。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00122-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这些开发者们对于细节都有着高度的关注,从而能够创造出令人印象深刻的体验。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00123-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>他们都有着明确的设计愿景,并大胆尝试着那些未曾有人实践过的想法。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00124-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这些产品都有着高度的原创性,而非简单地复制粘贴现有的产品设计。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00125-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>他们的对于包容性的关注使其产品能够令世界各地的大量用户所受益。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00126-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>在这里,我们也要感谢这些开发者愿意分享他们的故事与经验;能够了解到这些大奖得主幕后的设计开发历程,我们感到非常荣幸。</p> <p>谢谢各位。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00127-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <ul> <li> <span style="font-size:12px;">视频链接:<a href="https://developer.apple.com/videos/play/wwdc2019/802/">Designing Award Winning Apps and Games</a></span></li> </ul> <p><img alt="" src="/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="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/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/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/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Tue, 31 Dec 2019 04:05:00 +0000 C7210 1082 at http://beforweb.c7210.info http://beforweb.c7210.info/node/1082#comments Apple 设计大奖的设计之道 (3) 美观性 http://beforweb.c7210.info/node/1081 <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://beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-wwdc-2019-apple-s.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;似乎还是 2016 年了?真是即无聊又让人觉得有趣的很。</p> <p>发掉公众号之后去吃个汉堡吧。蛮希望在 2020 年来到之前把这套&ldquo;设计大奖&rdquo;结束掉的,不留小尾巴到新年才好;接下来或许会做机器学习方面的话题。想必又会是吃力不讨好的内容类型了。捂嘴笑。不过我什么时候在乎过用内容讨好谁了。微笑。</p> <p>那么继续,<a href="http://beforweb.com/node/1079" target="_blank">上一篇</a>中,来自布道者团队的两位主持人通过一款 app 和一款游戏的案例阐述了&ldquo;精益求精&rdquo;的重要性,错过的朋友不妨回看。今天是关于外观美学的话题。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/Apple_Design-Awards_Cube.jpg" style="width: 620px; height: 326px; border: none;" /></p> <h3> 设计大奖的设计之道 (3)</h3> <p>接下来我们聊一聊关于外观的话题。设计中的美观性是指那些你能够立刻从视觉层面感知到的东西,包括态度、观点等等。我们将通过三个游戏的设计案例来进行诠释。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00067-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <h4> 美观性(Aesthetics)</h4> <p>无论对于 app 还是游戏,界面设计中的视觉风格、实用性、沉浸感和内聚力都是美观性的重要组成要素。因此,即便你是 app 开发者,也同样能从中学到重要的东西。</p> <p>我们进入正题,首先来看 Thumper。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00068-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这款游戏从传统的弹珠台当中汲取灵感,并通过现代游戏机制使玩家充分沉浸在复古风格的游戏世界当中。在接下来的介绍中,各位可以特别关注于它极简的 UI 风格,因为整个游戏的沉浸化设计美学正是源自于此。</p> <p>初次加载后,经典的街机风格游戏标题就会映入眼帘,怀古气息扑面而来。过去街机游戏的标题设计旨在快速抓住并维系玩家的注意力,使其不会被旁边的其他游戏所吸引。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00069-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>正如 Thumper 的开发者们所说:&ldquo;最好的标题设计应该是简单而强有力的,同时能够为接下来的整个体验设定下最为准确的基调。&rdquo;</p> <p>进入游戏后,我们的眼前只有美妙迷人的游戏世界,而没有任何额外的元素能与之相争。屏幕右上角的暂停按钮在游戏过程中会逐渐淡出,并化为斜划线的样式。这样即能为用户揭示出交互元素的触发方式,同时也能在视觉上完美地融入游戏环境。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00070-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00071-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>没有繁琐的教学过程,玩家可以立刻上手,在游戏过程中学习必要的操作方式。游戏提供的第一个教学信息是&ldquo;上划跳跃&rdquo;,而且会通过&ldquo;3,2,1&rdquo;倒计时来告诉你最恰当的起跳时间;在需要执行上划手势的时刻,还会出现一个向上的箭头来进一步增强引导效果。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00072-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00073-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>所有这些信息表现形式,连同优异的音效一起,塑造了有效的、非唐突的、沉浸式的游戏上手体验。</p> <p>为了保持游戏的深度参与体验,得分和等级一类的信息只会在玩家触达关卡检查点时进行呈现。无论游戏还是 app,如果你希望营造更具沉浸感的产品体验,那么要尽可能避免在界面上持续显示过多的文字内容或是功能控件,帮助人们更专注地聚焦于当前场景。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00074-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>另一个值得关注的 UI 简化策略是其生命值的呈现方式。在 Thumper 中,生命值并非以传统信息元素的形式显示在界面当中 - 玩家操作的甲虫本身就代表着这个指标,例如翅膀完全展开的形态意味着生命值全满,失去翅膀的形态代表只剩下一半的生命,完全破碎的身体则意味着结束。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00075-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这样一方面可以带来更强的情感代入感,一方面也可以确保玩家始终将注意力聚焦在游戏角色上面。</p> <p>Thumper 简约的游戏界面所塑造的沉浸感可以令你无需过多关注于操作方式;它独特的美学表现形式可以持久地抓住玩家的注意力,使人沉迷于绚丽的视听与互动体验当中。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00076-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>的确,美观性的合理运用可以提升人们的关注度,营造具有沉浸感的产品体验。除此之外,它还能为我们带来更多更实际的好处。接下来我们以 ELOH 为例。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00078-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这是一款休闲类的益智游戏,视觉风格非常独特,外观和手感的完成度都极高。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00079-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>他们的设计历程是怎样的呢?下面让我来进行简要的介绍。这是 alpha 版本的 ELOH:</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00080-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>你可以看到类似的解密元素及游戏机制,障碍物上也有着拟人化的面部样式。显然,早期的外观样式与与后期相比有着很大的差距,但游戏机制基本类似。</p> <p>那么他们是如何达到最终上线 App Store 的美观标准的呢?首先,他们雇了一位插画师。这位插画师探索了一系列图形风格与配色体系;我们很容易就能发现,在他所尝试的不同基调与风格的搭配下,游戏的主题外观会产生多么大的变化。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00081-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00082-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>确实,即便外观样式没有那么漂亮,你的 app 或游戏也可以正常工作;但 ELOH 的设计师为这款游戏带来的美观性,其作用却远不止&ldquo;漂亮&rdquo;。它提升了可互动元素的可视性与生命感,游戏的可玩性也因此而增加。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00083-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这款游戏当中的可互动元素种类并不是很多;对于每一类,他们都进行了认真的打磨,譬如这个按钮:</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00084-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>细节当中的视觉效果令游戏角色栩栩如生。例如当你拖拽这些障碍物,或是当弹球撞到它们时,它们的反应是如此的充满个性,你能感受到设计者们在其中注入的心血。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00085-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>ELOH 在美观性上的投入度使整个游戏的体验得到了深化,相比于 alpha 版本,之后的美学风格与游戏意图本身更好地结合在了一起,细节中的个性元素也能够在情感层面与玩家建立起关联。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00086-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>美观性可以体现在产品的任何组成要素当中,这里也包括 app 图标。我们以之前介绍过的 HomeCourt 为例。除了 app 本身,他们的团队同样在 app 图标上下了一番功夫。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00087-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>其中的图形显然是从篮球场的元素当中汲取了灵感。两个首字母&ldquo;H&rdquo;和&ldquo;C&rdquo;共同构成了球场的边线与三分线,而背景橙色也是取自于篮球的颜色。你可以很容易地在一满屏的图标当中发现这个图标,而且它的样式也能让人理解这个 app 本身的功能所在。这就是非常优秀的 app 图标设计范例。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00088-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>我们继续回到游戏的话题,来看看如何通过一套清晰、一致的视觉语言来提升产品的内聚力与品质感。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00089-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>Ordia 这款游戏描述了原始生物的求生故事。有机滴状物的形象支撑起了整个游戏的视觉体验,无论是游戏内容和角色本身,还是选项菜单等 UI 元素,都可以自然的衔接在一起。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00090-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>Ordia 的设计语言同样是具有功能性的,可以有效地传达出元素的交互特性以及不同角色的敌我属性。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00091-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>正如他们的开发者所说,他们希望玩家能够始终感觉到自己正处于一个完整而一致的游戏环境当中。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00092-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>完整而一致的环境感,这一点对于 app 和游戏来说都很重要。内聚力与一致性需要体现在设计的每一个方面。</p> <p>同时,无论是视觉还是行为层面,你的 app 或游戏也必须和所在的系统平台保持高度的关联与一致性。譬如仅通过&ldquo;分享&rdquo;图标,你就可以判断 Ordia 是面向 iOS 而设计的。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00093-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>虽然看起来并不起眼,但正是这些点滴当中的设计决策可以令用户在整体上感知到产品与平台之间的高度一致性。</p> <p>高度的内聚力可以显著提升产品的品质感,但要做到这一点确实并不简单,你需要创建一套完整一致的设计语言。试着将每一屏界面排列在一处,从整体上观察其是否和谐一致。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00094-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>最后简单归纳一下我们对于&ldquo;美观性&rdquo;的探讨:</p> <ul> <li> 在 Thumper 中,美学要素塑造了令人持久关注并沉浸其中的游戏体验。</li> <li> ELOH 向我们演示了如何通过外观的创作与打磨来提升游戏的可玩性及情感关联。</li> <li> Ordia 与 HomeCourt 的案例让我们了解到美观性需要融入产品的每一个元素当中,进而从整体上实现具有内聚力和一致性的体验。</li> </ul> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00095-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <ul> <li> <span style="font-size:12px;">次回预告:设计大奖的设计之道 (4) 包容性与细节</span></li> <li> <span style="font-size:12px;">视频链接:<a href="https://developer.apple.com/videos/play/wwdc2019/802/">Designing Award Winning Apps and Games</a></span></li> </ul> <p><img alt="" src="/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="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/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/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/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Mon, 30 Dec 2019 08:13:43 +0000 C7210 1081 at http://beforweb.c7210.info http://beforweb.c7210.info/node/1081#comments Apple 设计大奖的设计之道 (2) 精益求精 http://beforweb.c7210.info/node/1079 <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://beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-wwdc-2019-apple-s.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;这件事本身有了最为朴素的期待和追求。</p> <p>&ldquo;都会好的,总会有的,关于未来,就请你坦然。&rdquo;</p> <p>看到圣诞树啊鹿啊球球啊什么的会觉得还蛮温暖红火的,这样的日子越多越好嘛,管它什么节日不节日的。</p> <p>继续 WWDC 设计分会之&ldquo;设计大奖的设计之道&rdquo;。<a href="http://beforweb.com/node/1078" target="_blank">上一篇</a>中,来自布道者团队的两位主持人介绍了两款 app 和一款游戏的案例,错过的朋友不妨回看。今天是关于迭代的话题。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/Apple_Design-Awards_Cube.jpg" style="width: 620px; height: 326px; border: none;" /></p> <h3> 设计大奖的设计之道 (2)</h3> <p>我们已经通过三个大奖得主的设计案例讨论了&ldquo;创新&rdquo;与&ldquo;信任感&rdquo;的重要性,接下来要聊的话题是&ldquo;精益求精&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00037-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <h4> 精益求精(Refinement)</h4> <p>精益求精意味着不断地优化打磨,使设计越发精细和优异,而非仅停留在&ldquo;解决问题&rdquo;的阶段。我们首先以 The Gardens Between(&ldquo;花园之间&rdquo;)为例。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00038-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这款游戏有着梦境一般的关卡设计,流畅的艺术风格,以及暖心的故事情节;玩家拥有改变时间前进方向的能力,由此来控制两个游戏角色解决谜题。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00039-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这款游戏体现出的艺术性与奇思妙想让我感到惊叹。我非常好奇于他们的开发者是怎样创造出这样独特的设计概念的,因此与他们进行了交流,希望他们愿意与我分享一些创作过程中的产出。</p> <p>我原本以为会看到一些类似于最终游戏本身的概念稿,但出乎意料的是,他们最初的设计风格,包括两个角色的设定,与我们在游戏中所看到的都有着非常大的差异;很明显,连关卡中的解密要素甚至是游戏控制方式都经历过非常多的迭代。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00041-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00042-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00043-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00044-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00045-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>翻看着他们尝试过的各种风格基调与概念方向,我意识到这样的探索历程在某种程度上同样适用于 app 的设计。</p> <p>精益求精的力量是巨大的。要得到这样的力量,你需要真的投入时间去探索,去反复揣摩想法,直至提炼出最为本质的东西。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00046-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>在这里,我想引用 Carlton Cuse 说过的一段话:&ldquo;创作过程实则并非像被闪电击中那样在瞬间有所得到...那是一个过程,你需要为想法提供空间,让它们能够充分扎根,踏实生长,最终得以灿烂盛放。&rdquo;</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00047-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>在探索和思考的过程中,你很有可能产生更多新的想法;通过反复打磨来比较和验证,最终呈现在人们面前的设计势必更具深度感,人们也会感知到其中的深思熟虑。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00048-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00049-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>但是发散探索与精益求精的过程注定非常耗时,操之过急毫无意义。</p> <p>我很感激他们的开发者愿意和我分享这些,我能感受到他们为了打磨体验而付出的时间与心血,而最终的成果也正是我们在游戏当中所充分体验到的。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00050-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>获得了设计大奖的 app 和游戏在其产品初期往往都不是我们最后所见到的那样,它们都经过大量的迭代与验证;更多更好的想法也会在期间催生而出。因此,试着慢下来一点,花些时间与不同方向的想法共处,通过迭代和精炼对它们进行判断,你会发现自己距离一直以来的设计目标正在变得越来越近。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00051-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>接下来要聊的大奖得主是 Butterfly iQ。实际上这是一套极具创新性的便携式超声波系统,由一部手持扫描仪与配套的 app 组成。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00052-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00053-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>我们都知道传统的超声波设备非常巨大,连同机架一起安装在推车上,上面是各种按钮或旋钮一类的控件。而超便携的 Butterfly iQ 则为医生们创造出了更多的可能性。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00054-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>他们的团队是如何将初期想法持续优化成为真正有用易用的产品的呢?</p> <p>我们首先来了解一下实际场景。医生在使用超声波系统时,注意力是割裂的:他们需要一边握着扫描仪对病人进行检查,一边操作屏幕查看影像;这两个任务都需要单手独立操作。对于 Butterfly iQ 这样的便携式系统而言,医生必须能够单手调整手机屏幕上的影像,并通过相关功能进行测量和标注。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00055-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>Butterfly iQ 早期 demo 的界面基本是在模仿传统设备上的设计方式,因为他们认为这样会使医生们感到熟悉,从而降低学习成本。譬如左侧两个数值分别代表影像的深度和对比度,医生需要操作滚轮控件来调整这两个值,就像他们在真实设备上拨动旋钮那样。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00056-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00057-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>从 UI 设计的角度,这也就是我们所熟悉的&ldquo;隐喻&rdquo;,即通过视觉与交互层面的拟真,来帮助用户快速理解界面的使用方式。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00058-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>&ldquo;隐喻&rdquo;在 UI 设计中十分常见,例如大家所熟悉的&ldquo;计算器&rdquo;,其使用方法是不言自明的,因为我们都有过真实计算器的使用经验。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00059-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>然而 demo 的测试结果并不理想,医生们完全不觉得这些滚轮好用,而且他们认为信息与控件占据了屏幕当中的太多空间,影响到了影像本身的浏览。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00060-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>于是团队开始针对这一反馈进行迭代,试图提升影像浏览与操作方面的体验平衡性。他们开始更多地思考人们在手机屏幕上通常会期待以怎样的方式进行操作,并参考了一系列相关产品,最终决定采用类似 iOS &ldquo;相机&rdquo;的交互,包括如何通过手势来唤出功能,如何通过动效来呈现或隐藏控件,等等。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00061-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>于是他们移除了原本固定可见的信息及滚轮控件,全部改为手势操作:在影像区域左右横划可以调整对比度,上下手势则用来控制影像深度;调整深度时,右侧的参考标尺还会根据深度的变化而自动调整比例。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00062-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00063-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>将现实世界中的设计模式映射到 app 当中,这的确会使界面看起来更加令人熟悉和信任;但在很多时候,用户更加需要的是较大的浏览空间,而非碍手碍脚的界面控件。因此,在试图通过隐喻来建立认知关联时,我们也必须考虑到设备独有的交互特性,而非一成不变地照搬现实中的模式。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00064-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>以上故事只是长期迭代过程的一个缩影。对于产品设计来说,精益求精是永无止境的,你会反复经历测试、反馈、迭代的循环。有时你可能还需要大胆地放弃一些看上去合情合理的决策,使设计更加符合人们对于数字化产品及界面的体验预期。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00066-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <ul> <li> <span style="font-size:12px;">次回预告:设计大奖的设计之道 (3) 美观性</span></li> <li> <span style="font-size:12px;">视频链接:<a href="https://developer.apple.com/videos/play/wwdc2019/802/">Designing Award Winning Apps and Games</a></span></li> </ul> <p><img alt="" src="/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="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/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/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/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Wed, 25 Dec 2019 09:35:31 +0000 C7210 1079 at http://beforweb.c7210.info http://beforweb.c7210.info/node/1079#comments Apple 设计大奖的设计之道 (1) 创新与信任感 http://beforweb.c7210.info/node/1078 <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://beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-wwdc-2019-apple-s.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>​不大相信 2019 年还有十几天就要结束,分明前几天才刚刚念叨过&ldquo;元旦假期过得如何啊&rdquo;一类。总的来说大体就是个符合生活本质规律的年份吧。屏幕对面的各位又如何呢?</p> <p>这一年的末了竟然开始写一些看起来像是回忆录的东西,这是没有想到的。是的 <a href="http://beforweb.com/node/1077" target="_blank">About a Designer </a>的第一章完结之后,我又回来继续做&ldquo;图文版 WWDC 设计分会&rdquo;系列的第四个主题了。</p> <p>类似以往,2019年的 WWDC 宣布了一系列&ldquo;Apple 设计大奖&rdquo;得主,app 与游戏都有涵盖;设计布道者团队也通过一场单独的设计分会为世界各地的开发者们讲述了大奖得主在设计方面的优异之处。这就是我们接下来的话题,今天开始第一部分。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/Apple_Design-Awards_Cube.jpg" style="width: 620px; height: 326px; border: none;" /></p> <h3> 设计大奖的设计之道 (1)</h3> <p>与以往一样,今年的 Apple 设计大奖得主,包括一系列 app 与游戏,都给我们带来了惊喜与启发,而我们也几乎要把今天这场设计分会叫做&ldquo;如何赢得 Apple 设计大奖&rdquo;了,因为有太多人在问我们这个问题。这也很正常,大家自然会关心我们是如何进行评选的。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00000-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这里面是否存在具体的衡量标准呢?当然,不过这不是今天的重点;我们接下来会探讨一些更有意思的、对各位更有实际帮助的话题。</p> <p>每一个获得了 Apple 设计大奖的 app 和游戏都体现着一些重要的设计要素,今天就让我们来逐一进行挖掘。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00002-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>同时,我们还为各位带来了每一款产品背后关于设计过程与方法的小故事,同样希望能帮助你有所心得。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00003-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <h4> 创新(Innovation)</h4> <p>让我们从&ldquo;创新&rdquo;开始说起。今年的大奖得主们在创新性上都有着不凡的表现,无论 app 还是游戏,各有各的创新维度。我们以 Asphalt 9(&ldquo;狂野飙车 9&rdquo;)以及 HomeCourt 为例。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00005-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>不同于其他的赛车游戏,Asphalt 9 带来了极具创新特色的操作机制。玩家无需关注车辆的加速和制动,只需将注意力放在两个最主要的操作上,即通过横划手势来控制路线,通过点按来控制氮气喷射。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00007-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这套被称为&ldquo;TouchDrive&rdquo;的机制颠覆了我们对于竞速类游戏控制方式的认知。加速、刹车、转向 - 这些操作一直都以来被认为是竞速类游戏所必需的,而 Asphalt 9 的开发者们则对这种最基本的假设提出了质疑。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00009-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>他们抛开束缚从零开始,寻找更加简化、更适合 iOS 的操作方式,最终大胆地抛弃了&ldquo;加速&rdquo;与&ldquo;刹车&rdquo;这两个传统的主操作,取而代之的则是氮气喷射与漂移,使玩家很快就能从操作当中获得乐趣。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00011-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>同时,他们也深知赛车游戏当中传统的转向操作很容易带来失误,影响游戏的爽快体验。经过一系列的测试与反馈,他们确定了通过手势选择路线实现自动转向的操作方式。这使得玩家可以聚焦于复杂的赛道及竞速策略本身,而非反复受挫于困难的操作。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00012-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>&ldquo;TouchDrive&rdquo;被设定为 Asphalt 9 的默认控制模式,但传统模式依然可选,以满足不同玩家对于真实感和准确性的追求。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00013-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>对于 Asphalt 9 的开发者们,我个人最为欣赏的就是他们基于理性认知的冒险精神。经过大量的迭代、测试与反馈,设计方案逐渐脱离于传统的交互模式,形成了全新的操作体验,最终成就了极具创新性的&ldquo;TouchDrive&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00014-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>无论你的产品是 app 还是游戏,试着在设计流程初期就对一些基本假设提出质疑,多问问&ldquo;为什么一定要这样做&rdquo;,是否只是出于&ldquo;传统&rdquo;和&ldquo;习惯&rdquo;?同时试着将人们习以为常的痛点转化为新的想法,正如 Asphalt 9 对于赛车转向的实现方式。所有这些都有可能引领你实现前所未有的创新设计。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00015-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>接下来我们聊一聊 HomeCourt。</p> <p>配合运用 iPhone 的后置摄像头与机器学习能力,HomeCourt 可以有效地帮助用户提升篮球技艺,而且使用起来非常轻松自然。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00016-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>HomeCourt 可以统计你的投篮表现,并生成图表。在此之前,要获取这类信息实属不易,你要么专门请人来手工记录并分析,要么搭建完整的监测系统,无论怎样,成本都很高。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00017-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>那么如何仅依靠 iPhone 就能获取到这些复杂的信息呢?我在实际体验了 HomeCourt 魔法一般的功能之后,与其开发者们进行了交流。</p> <p>&ldquo;起初的版本毫无智能和便捷而言&rdquo;,那时,整个使用流程涉及到很多步骤,而且你还必须把手机支在三角架上,调整到特定的高度和位置。我猜各位去打球时一般不会在运动包里揣一个三角架。此外还存在着很多其他的技术障碍,譬如你必须通过手动设置帮 app 定位篮筐和三分线;而且 app 对光照条件的要求很苛刻,只有在极端晴朗的户外才能正常使用。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00018-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>于是他们尝试通过摄像头与机器学习的协同运用来尽可能解决自动化方面的障碍与问题,譬如对篮板、三分线以及投篮位置的探测,等等。这样便省去了很多手动设置的麻烦。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00019-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>接下来,他们实现了腿部探测,降低了 app 对于光照条件的依赖;而后,他们又实现了全身重要运动关节的探测,以便更精确地判断人们在投篮时所处的位置。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00022-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>他们一直在保持进步,通过对机器学习的运用来解决一个个障碍,直到最终干掉了必须依赖三角架的问题。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00024-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>现在,你只需把手机放在地上,靠住你的饮水瓶,然后尽情去投篮好了;无需任何额外的设备,无需任何手动设置。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00025-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这背后有大量的工作涉及到机器学习,但是用户不会感知到这些,他们只会觉得设备和软件就像自身的自然延展,可以很好地融入到投篮练习当中。</p> <p>HomeCourt 体现出的创新性是显而易见的:通过新技术,让 app 一步步简化到足够契合人们的实际需求,并尽可能自然融入到人们的日常生活场景当中,在不带来额外干扰的情况下,为人们提供最大化的价值。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00027-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>以上两个产品都在突破着设计与技术上的传统边界。他们的创新性可以使产品体验得到切实提升,同时又能让用户自然地接纳和掌握。</p> <h4> 信任感(Trust)</h4> <p>下面来聊聊如何通过设计来塑造可信赖的产品体验。我们以 Pixelmator Photo 为例。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00028-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>这是一款专门为 iPad 打造的照片编辑 app,并且同样运用到了机器学习技术。它的模型经过上千万张专业级照片的训练,可以帮助用户轻松地编辑出非常漂亮的照片。</p> <p>确实,如今越来越多的产品都开始使用机器学习技术了;但必须承认,由该技术输出的体验在很多时候给人的感觉就像&ldquo;黑盒&rdquo;一样。特别是对于会产生推荐内容,或是内容进行智能化处理的产品,我们时常会好奇&ldquo;为什么我正在看这些内容?背后的机制是什么?&rdquo; 如魔法一样的功能反而容易让人感到难以捉摸。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00029-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>如果产品令人感到费解和难以预知,人们就很难对其产生信任感。</p> <p>我们来看看 Pixelmator Photo 是如何解决这一问题的。其 UI 就是大家所熟悉的标准化风格:导航栏当中提供了一些功能按钮,底栏里包含了一系列预设效果,而所有的核心编辑能力都位于侧边的检查器面板当中。这些被摄影高手和专家所熟知的功能,在普通用户看来确实有些吓人。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00031-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>然而只需点击一下&ldquo;智能美化&rdquo;按钮,经过两千万张专业级照片训练过的模型就会在瞬间对你的照片进行美化调整。按钮中的图标是我们很熟悉的&ldquo;魔术棒&rdquo;,它传达出的含义通常是&ldquo;不用担心,一切交给我,你就瞧好吧&rdquo;。但从用户的角度,你无法了解究竟发生了什么。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00034-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>他们的开发者同样认为,仅仅使用一个&ldquo;魔术棒&rdquo;按钮来体现功能会让人感觉有些含糊,甚至会对操作结果感到疑虑。</p> <p>为了让用户对智能调整机制产生感知,进而形成信任,开发者们希望相关逻辑可以一目了然地呈现在 UI 当中。即,智能处理过程中涉及的所有参数变化,都可以显而易见地改变检查器面板中相应控件的状态;而控件的状态变化又是通过动效来呈现的,用户可以轻松地发现参数变化,必要时还可以进行手动调整。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00035-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>你可以单独关掉某组设置,譬如&ldquo;光照&rdquo;;当再次打开时,之前做过的调整依然有效。</p> <p>这些交互细节听上去没什么大不了,但却能让人们在使用过程中感受到安心和可信;你很清楚智能化的功能对照片做了哪些处理,同时也可以放心大胆地进行定制化调整。</p> <p>在 UX 设计当中,有一个词专门用来描述这种模式:&ldquo;归因&rdquo;(attribution),即让用户明确感知到操作的&ldquo;因&rdquo;与&ldquo;果&rdquo;。在我们的例子当中,就是让用户在&ldquo;点击魔术棒&rdquo;与&ldquo;造成一系列参数变化&rdquo;之间发现可视化的关联。</p> <p><img alt="" src="/sites/default/files/images/201912-WWDC-AW/00036-award-winning.png" style="width: 620px; height: 362px; border:none;" /></p> <p>高度透明、易于认知的机制可以令人产生信赖。如果能可视化地让用户感知到产品的工作状态,用户就会更加放心,并在必要时试着参与到输出结果的调整当中。</p> <ul> <li> <span style="font-size:12px;">次回预告:设计大奖的设计之道 (2) 精益求精</span></li> <li> <span style="font-size:12px;">视频链接:<a href="https://developer.apple.com/videos/play/wwdc2019/802/">Designing Award Winning Apps and Games</a></span></li> </ul> <p><img alt="" src="/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="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/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/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/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Fri, 20 Dec 2019 05:23:23 +0000 C7210 1078 at http://beforweb.c7210.info http://beforweb.c7210.info/node/1078#comments 图文版 WWDC 设计分会:iOS 13 设计新特性(2) http://beforweb.c7210.info/node/1048 <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://beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-wwdc-2019-apple-s.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>上周开始尝试通过全场译文及对应关键帧截屏的方式对 WWDC 期间一些重要的设计分会进行记录和解析。我个人还蛮喜欢这种形式,可以充分挖掘官方设计团队提供的重要信息,又可以图文并茂。</p> <p>在<a href="http://beforweb.com/node/1047" target="_blank">第一期</a>当中,我们跟随主持人 Mike Stern 了解了 iOS 13 深色模式的相关要点,包括语义化颜色、材质、控件新样式、SF Symbols 等,错过的同学不妨稍作回顾。今天继续,来了解新的卡片风格面板与情境化菜单。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201907/1-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <h3> 卡片风格模态面板</h3> <p>模态视图通常被称作&ldquo;面板&rdquo;,因为它们向上滑出并覆盖屏幕的呈现方式会给人们带来这样的感知。这样的转场动效可以帮助人们理解当前状态切换的过程。</p> <p>iOS 13 带来了新的卡片风格模态面板。作为新的默认模态面板样式,卡片将被运用到整个 iOS 系统当中。</p> <p><img alt="" src="/sites/default/files/images/201907/64-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>卡片风格的好处在于,你可以瞥见面板下方的界面环境,这样你便可以意识到原本的任务流程或模式仍然在进行当中;而过去的全屏模态视图很容易使人们忘记之前的任务进程。</p> <p><img alt="" src="/sites/default/files/images/201907/65-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>要关闭卡片面板,你可以在卡片上的任意位置向下轻扫。该手势通常会比点击导航栏中的关闭按钮更加轻松;与右滑回退类似,下拉手势在大屏设备当中也很易于通过单手实现。</p> <p><img alt="" src="/sites/default/files/images/201907/66-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>说到这,或许你会有所疑问:&ldquo;对于本身已经包含滚屏内容的面板来说,这个手势操作该如何实现呢?&rdquo; 在这种情况下,向下轻扫首先会使内容回滚到顶部,然后继续下拉则会关闭整个卡片面板。</p> <p><img alt="" src="/sites/default/files/images/201907/68-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>此外,在任何时候,你都可以从卡片顶部下拉来直接关闭面板,无论其中是否有滚屏内容。</p> <p><img alt="" src="/sites/default/files/images/201907/69-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>然而,如果面板中包含需要通过纵向轻扫进行操作的控件,或是包含必须进行操作决策的逻辑,那么任何下拉关闭的操作都将被禁用,面板会自动弹回到默认的位置,譬如当我们必须通过点击&ldquo;取消&rdquo;或&ldquo;添加&rdquo;按钮来结束当前逻辑状态的时候。</p> <p><img alt="" src="/sites/default/files/images/201907/70-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>此外,对于必须在结束模态之前完成操作决策的情况,你还可以通过呈现行动面板(action sheet)来禁止卡片的关闭,同时与用户进行操作确认;一举两得,非常方便。</p> <p><img alt="" src="/sites/default/files/images/201907/71-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>然而,便捷的手势操作并不意味着我们不再需要为模态面板提供按钮。可视化的按钮可以一目了然地帮助人们意识到面板可以被关闭,同时对于可访问性(accessibility)设计原则来说也是必需的。此外,人们可能一时还无法习惯于通过手势来关闭面板,或是根本不想进行手势操作。对于包含滚屏内容的面板来说,直接点击按钮进行关闭确实会更加便捷;同时,明示着&ldquo;确认&rdquo;和&ldquo;取消&rdquo;逻辑的可视化按钮还可以帮助人们快速理解有哪些选项可供执行。</p> <p><img alt="" src="/sites/default/files/images/201907/72-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>我们认为新的卡片面板很棒,因此会将其设置为 iOS 默认的模态视图形式。然而这并不意味着卡片面板在任何情况下都适用。例如,对于图片编辑或截屏标注一类的任务来说,你可能希望利用更多的屏幕空间进行显示,同时使视觉干扰降至最低。这种情况下,你仍然可以采用传统的全屏模态面板。</p> <p><img alt="" src="/sites/default/files/images/201907/73-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>关于模态面板,还有一点需要强调:模态的用途是切换任务状态,不要仅因为喜欢它的样式和动效而使用。</p> <p><img alt="" src="/sites/default/files/images/201907/74-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>譬如日历 app 当中有两种主要模式:在列表或日历网格中浏览日程,以及创建或编辑日程。你在日历中浏览所有的日程事项,选择其中的某一个来浏览详情;这是一个完整的&rdquo;浏览&ldquo;模式,父级视图用于呈现列表,子视图用于显示特定日程的详细信息。</p> <p><img alt="" src="/sites/default/files/images/201907/76-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>当需要创建和编辑日程事项时,人们就会进入到另一个模式当中;因此我们需要用到模态面板,以便帮助人们意识到任务流程的变更。</p> <p><img alt="" src="/sites/default/files/images/201907/77-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <h3> 情境菜单</h3> <p>几年前,随着 3D Touch 的引进,我们同时推出了预览弹出功能(Peek and Pop),该功能的主要目标在于对内容进行快速预览。同时,如果 app 进行了相应的支持,你还可以通过向上轻扫预览视图来唤出相关的操作选项。</p> <p><img alt="" src="/sites/default/files/images/201907/79-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201907/80-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>而全新的情境菜单则重点关注于&ldquo;行动&rdquo;,相关操作菜单会即刻呈现,无需进一步操作。</p> <p><img alt="" src="/sites/default/files/images/201907/81-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>情境菜单支持所有的 iOS 设备,而预览弹出功能仅支持 3D Touch,因此无法在一部分 iPad 和 iPhone 当中实现。长按或 3D Touch 均可唤出情境菜单,但 3D Touch 的速度会更快。</p> <p><img alt="" src="/sites/default/files/images/201907/82-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>情境菜单由两个部分组成:针对目标内容的一组功能菜单,以及针对目标内容的预览视图;其中预览视图是可选项,可以提醒人们当前的一系列操作选项所针对的内容是什么。</p> <p><img alt="" src="/sites/default/files/images/201907/83-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201907/84-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>情境菜单的外观会随着设备尺寸及屏幕方向的变化而动态调整。在 iPhone 的竖屏模式下,预览视图与功能菜单会纵向排列;在 iPad 当中,选项数量不超过三个的功能菜单也会与预览视图纵向排列;在其他状态下,预览视图与功能菜单将会横向并排呈现。通常,情境菜单会在目标内容上方或尽可能近的地方呈现。</p> <p><img alt="" src="/sites/default/files/images/201907/85-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>与 macOS 中的情境菜单相仿,你可以为菜单当中的选项进行排序。尽可能将最为重要或是高频的菜单项置于顶端,以便用户快速发现和操作。此外,你还可以通过分隔线为选项进行分组,例如将&ldquo;剪切&rdquo;、&ldquo;复制&rdquo;、&ldquo;粘贴&rdquo;等高度相关的操作分为一组。</p> <p><img alt="" src="/sites/default/files/images/201907/86-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>iOS 中的情境菜单同样具有层级属性,这意味着你可以为其中的某些选项提供二级菜单。</p> <p><img alt="" src="/sites/default/files/images/201907/88-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>情境菜单当中还可以包含图标,以帮助用户更直观地理解选项。</p> <p><img alt="" src="/sites/default/files/images/201907/89-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>同时,对于可能产生破坏性的操作项,你还可以使用红色进行警示强化。</p> <p><img alt="" src="/sites/default/files/images/201907/90-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>建议你为 app 当中所有可能产生相关操作的内容对象添加情境菜单功能。在 macOS 中,用户会期望所有的内容对象都能提供情境菜单,这样既便于操作,同时也利于发现所有可以执行的功能。同理,支持情境菜单的 iOS app 越多,用户越会期望在所有的 app 当中都能使用到该功能,这里显然也包括你的 app。</p> <p><img alt="" src="/sites/default/files/images/201907/91-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>最后再强调一点:情境菜单当中提供的功能也应该能够在界面当中的其他地方被访问到。情境菜单既强大又便捷,但我们不能假设人们始终会想到去用。</p> <p>我个人非常期望看到各位接下来能够将深色模式、卡片风格面板及情境菜单有效地运用到自己的 app 当中。</p> <p><img alt="" src="/sites/default/files/images/201907/93-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>要获取与今天的主题相关的设计资源,你可以访问 <a href="https://developer.apple.com/design/">developer.apple.com/design</a>,你会找到更新过的 SF 字体,新的 SF Symbols app,以及升级过的 iOS Design Resources Sketch 文件;后续我们还会带来 Adobe Photoshop 和 XD 版本的相关资源。</p> <p><img alt="" src="/sites/default/files/images/201907/94-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p><img alt="" src="/sites/default/files/images/201907/95-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>此外,建议深入阅读<a href="https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/"> Apple Human Interface Guidelines</a>,从而了解更多关于本次主题相关的详细设计准则。</p> <p><img alt="" src="/sites/default/files/images/201907/96-whats-new-in-ios-design.png" style="width: 619px; height: 362px; border: none;" /></p> <p>感谢各位的时间。</p> <p>视频出处:<a href="https://developer.apple.com/videos/play/wwdc2019/808/">WWDC 2019 &ldquo;What&#39;s New in iOS Design&rdquo;</a>,主持人:Mike Stern。</p> <h4> 相关阅读</h4> <ul> <li> <a href="http://beforweb.com/node/1047" target="_blank">图文版 WWDC 设计分会 - iOS 13 深色模式</a></li> <li> <a href="http://beforweb.com/node/1046" target="_blank">iOS HIG 设计指南 - 深色模式篇(中文)</a></li> </ul> </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/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/291" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS 13</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/294" typeof="skos:Concept" property="rdfs:label skos:prefLabel">情境菜单</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/295" typeof="skos:Concept" property="rdfs:label skos:prefLabel">卡片面板</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Wed, 24 Jul 2019 04:51:58 +0000 C7210 1048 at http://beforweb.c7210.info http://beforweb.c7210.info/node/1048#comments 图文版 WWDC 设计分会:iOS 13 设计新特性(1) http://beforweb.c7210.info/node/1047 <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://beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-wwdc-2019-apple-s.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 各位,好久不见。近一个多月来个人事务繁多,更新较慢还请见谅。<br /> ​<br /> 话说今年 WWDC 期间看到一些设计方面的分会视频,便萌生想法要做这样的中文图文版本。其实过去每年的 DC 分会都有几场不错的设计主题演讲,印象里包括 2017 年的基础设计原则专题,以及 2014 年的快速原型专题等等,都非常值得学习。</p> <p>或许是因为 WWDC 分会视频的获取成本较高,且多是缺乏字幕的英文原声,所以一直以来没见到太多同学在关注,也蛮遗憾的。现在我来推一下好了,就从今年的&ldquo;<a href="https://developer.apple.com/videos/play/wwdc2019/808/">What&#39;s New in iOS Design</a>&rdquo;开始。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201907/1-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>其实近来也看到有朋友在做关于这场分会的内容,不过更像是要点提炼;演讲者在内容的骨骼之间填充了很多有价值的细节信息,不仅关于&ldquo;how&rdquo;,更在于&ldquo;why&rdquo;;我会把所有这些内容都涵盖进来,尽可能还原完整的现场。</p> <p>本场演讲人是 Apple Design Evangelist 团队的 Mike Stern,话题涉及&ldquo;深色模式&rdquo;、&ldquo;卡片视图&rdquo;和&ldquo;情境菜单&rdquo;三大方面。由于整体篇幅较长,我们在本期首先聚焦于&ldquo;深色模式&rdquo;。Mike 从设计体系、颜色、材质、系统控件、SF Symbols 等若干方面的新变化入手,对&ldquo;深色模式&rdquo;相关主题进行了从内到外的详细诠释。下面我们进入正题。</p> <h3> iOS 13 设计新特性 - 暗黑模式</h3> <p>随着 iOS 13 的到来,我们设计和开发 app 的方式将会发生细微而又重大的变化。</p> <p>深色模式将改变我们对颜色、图标图形及文字内容的处理方式。</p> <p><img alt="" src="/sites/default/files/images/201907/2-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>新的卡片风格面板将会改变模态视图的默认呈现方式及操作方法。</p> <p><img alt="" src="/sites/default/files/images/201907/3-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>新的情境菜单可以帮助用户快速访问与当前内容相关的情境化功能选项。</p> <p><img alt="" src="/sites/default/files/images/201907/4-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>接下来,我们将围绕这三个主题进行详细的探索。首先来看深色模式。</p> <h4> 深色模式</h4> <p>去年,我们为 macOS 带来了深色模式,受到了人们的欢迎。其实多年以来,影像视频类产品通常都在使用深色界面,以帮助用户更清晰地聚焦于内容本身。</p> <p><img alt="" src="/sites/default/files/images/201907/6-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>深色界面非常适合于光线条件较暗的环境,因为我们的眼睛能够更加轻松地在界面与周围的环境之间进行切换。此外,出于个人喜好,很多用户也更加倾向于使用深色界面。</p> <p><img alt="" src="/sites/default/files/images/201907/7-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>iOS 中的深色模式使用纯黑色作为背景色,为文字内容及其他前景元素提供最高对比度。此外,纯黑背景色在视觉效果上可以和设备框体无缝融合,使整个界面看起来更加开阔,仿佛与硬件融为一体。</p> <p><img alt="" src="/sites/default/files/images/201907/8-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>一般而言,所有 app 都应该支持深色模式。当人们将系统切换为深色模式之后,自然会期望每一个 app 的外观都随之进行改变。</p> <h5> 关于 iOS Design System</h5> <p>深色模式的设计适配涉及到整个 iOS 设计体系的进化。目前,iOS 设计体系已经面向 iOS 13 进行了全面的翻新。这里简单诠释一下,所谓&ldquo;设计体系&rdquo;,大体是指以符合特定逻辑及一致性的方式整合在一起的一系列界面组成元素,包括颜色、字体、图形等等。一套合理、一致的设计体系将有助于你构建出更加易学易用的 app;基于 iOS 设计体系构建的 app 自然能使 iOS 用户感到熟悉易懂。</p> <p><img alt="" src="/sites/default/files/images/201907/9-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>在进入正题之前,我还想和各位分享我们的设计团队在 iOS 设计体系翻新过程中的一些主要设计目标。</p> <p><img alt="" src="/sites/default/files/images/201907/10-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>首先,也是最首要的,我们希望 iOS 依然能够保持人们所熟悉的样子,并符合长久以来的操作直觉。</p> <p>我们希望 iOS 具备更好的内部一致性。所有的内置 app 都已进行重设计,以保持彼此之间的统一;期间所运用到的新设计特性也正是我们在接下来的正题当中将要进行了解的。</p> <p>我们希望新的设计体系能够提供一系列的颜色选项,以便构建更加清晰的信息层级,使最重要的元素得以突显,而次要元素则适度弱化。</p> <p>我们还将可访问性(accessibility)放在了和其他设计目标同等重要的位置,新系统将全面支持&ldquo;辅助功能&rdquo;设置中的&ldquo;粗体文本&rdquo;与&ldquo;增强对比度&rdquo;模式。</p> <p>最后,我们希望新的设计体系足够简单直白,易于实施。</p> <p>下面进入正题,让我们一起对深色模式进行深入的了解。</p> <h5> 1. 颜色</h5> <p>每个 app 都有背景视图,同时绝大多数 app 会提供文字内容与图标。很多 app 还会通过分隔线与分组容器来组织内容。</p> <p><img alt="" src="/sites/default/files/images/201907/11-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>我们会很自然地通过色值对这些元素的颜色进行定义,例如字色是纯黑,背景是纯白等等。随着界面复杂度的提升,色盘也会相应地进行扩展,但通常不会出现什么大问题。</p> <p><img alt="" src="/sites/default/files/images/201907/12-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>然而,要同时适配深、浅两种外观模式,你就必须管理两套完整的颜色方案,并确保它们之间始终保持同步。这种情况下,我们需要以更加抽象的方式来思考和管理颜色体系。为此,我们引入了&ldquo;语义化颜色&rdquo;的概念。</p> <p>语义化颜色通过&ldquo;用途&rdquo;对颜色进行定义描述,而非通过具体色值。&ldquo;用途&rdquo;的概念具有动态性,可以脱离于具体的表现样式而独立存在。譬如,一个&ldquo;背景色&rdquo;,在深色模式当中可以指代黑色,而在浅色模式当中可以指代白色。</p> <p><img alt="" src="/sites/default/files/images/201907/15-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>因此,相比于自己维护两套独立的配色,你现在完全可以使用系统内置的语义化颜色方案来确保你的界面可以自动适配深、浅两种外观模式,这会非常方便。</p> <p><img alt="" src="/sites/default/files/images/201907/16-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>iOS 13 内置了一整套语义化颜色供你使用,其中多数颜色都拥有&ldquo;一级&rdquo;至&ldquo;四级&rdquo;梯度。这些变量主要用于构建信息层级,例如&ldquo;文本色&rdquo;(LabelColor)是一级字色,可以提供最高的对比度,主要用于最为重要的内容元素,例如内容的主标题;而&ldquo;二级文本色&rdquo;(SecondaryLabelColor)可以用于副标题,&ldquo;三级文本色&rdquo;(TertiaryLabelColor)用于输入框占位符文本,&ldquo;四级文本色&rdquo;(QuaternaryLabelColor)用于禁用状态的文本。</p> <p><img alt="" src="/sites/default/files/images/201907/17-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>对于背景色来说也是同理。&ldquo;系统背景色&rdquo;(SystemBackground)是一级背景色,在浅色模式当中指代白色,在深色模式当中则指代黑色。&ldquo;二级系统背景色&rdquo;和&ldquo;三级系统背景色&rdquo;则用于构建更丰富的背景层级。</p> <p><img alt="" src="/sites/default/files/images/201907/19-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>此外还有一组背景色专门用于列表视图(SystemGroupedBackground)。仔细观察下图,你会发现,深、浅两种模式当中的列表视图在背景色的使用上并非简单的反色。在两种模式中,列表行的背景色都比界面底色更加明亮,因为我们希望在确保对比度的同时,也能使两种模式下的界面在感知上更加统一。在设计深色界面时,试着设想光源变暗之后的效应,而非简单地将所有颜色进行反转。</p> <p><img alt="" src="/sites/default/files/images/201907/20-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>此外,系统内置的语义化颜色还包括填充色(FillColor),以及分隔线色(SeparatorColor)。其中,所有的填充色和一种分隔线色采用了半透明效果,以便与各类背景色形成良好的对比度。</p> <p><img alt="" src="/sites/default/files/images/201907/21-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>系统同时提供了六种完全不透明的灰色供你使用(SystemGrey)。</p> <p><img alt="" src="/sites/default/files/images/201907/22-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>在那些使用半透明色可能带来问题的地方,这些灰色将尤其适用。例如在绘制交叉网格时,半透明色会产生重叠效果,干扰人们的视线;如果元素需要叠加放置,那么只有使用实色才能表现出正常样式。</p> <p><img alt="" src="/sites/default/files/images/201907/23-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201907/24-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>这些语义化颜色已经被用于新系统中的方方面面,因此我们也鼓励你在自己的 app 中使用这些颜色。你可以在 Apple Design Resources 与 Human Interface Guidelines 当中查看完整的颜色定义,以便更好地起步。</p> <p><img alt="" src="/sites/default/files/images/201907/26-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>此外,我们还会继续提供一系列着色颜色供你使用。这些着色同样是动态的,能够针对深、浅模式进行自动调整。</p> <p><img alt="" src="/sites/default/files/images/201907/27-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>同时,每个着色还拥有高对比度变体,当&ldquo;辅助功能&rdquo;设置中的&ldquo;增强对比度&rdquo;被开启后,这组变体将被调用,着色在深色模式中会变得更亮,在浅色模式中会变得更暗。</p> <p><img alt="" src="/sites/default/files/images/201907/28-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201907/29-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p><img alt="" src="/sites/default/files/images/201907/30-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>如果你需要使用定制化的着色,那么同样要确保它们可以适配于深、浅两种外观模式;在浅色模式当中表现良好的颜色,到了深色模式当中可能会产生对比度不足的问题,反之亦然。因此,最好可以通过线上的对比度计算工具来进行精准确认。</p> <p><img alt="" src="/sites/default/files/images/201907/31-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>由于着色同样具有动态特性,因此你可以为深、浅两种模式选择相似但不同的着色,使各自的对比度达到标准,即 4.5:1 或更高。良好的对比度可以提升界面的可访问性及可用性。</p> <p><img alt="" src="/sites/default/files/images/201907/32-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>此外,你可能还会用到更多的定制化颜色,例如可以由用户自主选择的字色,或是定制化的状态指示符等等。与着色相仿,这些定制化颜色同样可以拥有动态特性,因此你仍然可以针对深、浅模式进行细微调整,确保所有颜色在不同模式下都可以提供足够的对比度。</p> <p><img alt="" src="/sites/default/files/images/201907/33-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>我们前面一直在讲&ldquo;深色&rdquo;与&ldquo;浅色&rdquo;,然而这只是一种比较简化的说法。实际上,深色模式的背景色体系还分为&ldquo;base&rdquo;和&ldquo;elevated&rdquo;两组,用于构建图层的层级关系。</p> <p><img alt="" src="/sites/default/files/images/201907/34-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>当两个浅色图层产生叠加时,我们通过投影效果就可以将它们区分开来;然而在深色模式下,这种方式几乎是无效的。因此,在深色模式当中,同样使用&ldquo;SystemBackground&rdquo;作为背景色的图层,在视觉上位于&ldquo;后方&rdquo;的会采用&ldquo;base&rdquo;色值,颜色较深;而位于&ldquo;前方&rdquo;的会采用&ldquo;elevated&rdquo;色值,颜色较浅。</p> <p><img alt="" src="/sites/default/files/images/201907/35-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>以联系人界面为例。在独立的&ldquo;联系人&rdquo;app当中,其背景色采用&ldquo;base&rdquo;色组,即纯黑;然而当同样的界面以模态视图的形式出现在&ldquo;电话&rdquo;当中时,其背景则会采用&ldquo;elevated&rdquo;色组。</p> <p><img alt="" src="/sites/default/files/images/201907/36-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>我们再来看一个稍复杂些的例子。iPad 当中的&ldquo;邮件&rdquo;在独立状态下会采用&ldquo;base&rdquo;色组作为背景色。当我们唤出&ldquo;联系人&rdquo;作为悬浮窗口时,其背景色会采用&ldquo;elevated&rdquo;色组,以便在视觉上表现出悬浮于&ldquo;邮件&rdquo;之上的效果。</p> <p><img alt="" src="/sites/default/files/images/201907/37-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>然而,当&ldquo;联系人&rdquo;与&ldquo;邮件&rdquo;多任务并列展示时,它们都会采用&ldquo;elevated&rdquo;色组作为背景,以确保窗口之间的分隔空间以及分隔指示符足够明显可见。</p> <p><img alt="" src="/sites/default/files/images/201907/38-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>创建新邮件时的模态视图同样采用了&ldquo;elevated&rdquo;色组作为背景,但此时,后面的&ldquo;邮件&rdquo;主界面的背景色会稍许变深,因为模态视图会为后面的图层添加一层覆盖效果,使其变暗。</p> <p><img alt="" src="/sites/default/files/images/201907/39-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>因此,你在为深色模式进行设计时,也要考虑到背景色可能随着层级升降而产生的明暗变化,并进一步考量前景元素的颜色对比度是否恰当。同时我们还要再次强调半透明填充色和分隔线色的重要性,因为它们可以灵活适应于&ldquo;base&rdquo;与&ldquo;elevated&rdquo;两组背景色。</p> <p><img alt="" src="/sites/default/files/images/201907/40-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <h5> 2. 材质</h5> <p>下面来看材质(materials)。</p> <p>iOS 13 的材质体系发生了很大变化。现在,你可以从&ldquo;thick&rdquo;、&ldquo;regular&rdquo;、&ldquo;thin&rdquo;和&ldquo;ultra-thin&rdquo;这四种透明度不同的材质当中进行自由选择,它们都能良好适配于不同的背景环境。</p> <p><img alt="" src="/sites/default/files/images/201907/41-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>同时,它们的外观还会随着深、浅模式的切换而自动调整。</p> <p><img alt="" src="/sites/default/files/images/201907/42-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>你可以根据自己的实际设计需求而选择使用哪种厚度的材质。其中,&ldquo;regular&rdquo;是系统默认的材质,适用于绝大多数的界面环境。</p> <p><img alt="" src="/sites/default/files/images/201907/43-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>如果需要为内容提供更高的对比度,你也可以选择更厚的材质。</p> <p><img alt="" src="/sites/default/files/images/201907/44-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>如需承载轻量级的操作,或是较为简单的内容,那么&ldquo;thin&rdquo;或&ldquo;ultra-thin&rdquo;更加适合。材质的选择取决于其所承载的内容的特质。</p> <p><img alt="" src="/sites/default/files/images/201907/45-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>说到内容,深、浅两种模式下的每一种材质都为其可能承载的内容提供了恰当的虚化透明效果(vibrancy)。这是一种在 iOS 及 Apple 其他平台当中被广泛采用的视觉效果。</p> <p><img alt="" src="/sites/default/files/images/201907/46-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>相比于实色元素来说,具有虚化透明效果的内容更加适用于系统提供的材质。当材质背后的背景色发生变化,实色内容很可能与材质产生混溶,因而带来严重的可读性问题;而具有虚化效果的内容则能始终保持恰当的对比度。</p> <p><img alt="" src="/sites/default/files/images/201907/47-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <h5> 3. 系统控件</h5> <p>新的 iOS 设计体系同样涉及到系统控件的翻新,包括形状与颜色的变化,从而达到更高的内部一致性。</p> <p><img alt="" src="/sites/default/files/images/201907/48-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>经过语义化颜色重绘的系统控件可以良好地适配于深、浅两种模式。因此,使用系统提供的 UIKit,你无需付出任何开发成本便能实现深色模式的自动适配。重新创建控件来代替系统控件,这不仅需要花费大量的时间,同时也难以具备自动适配等一系列优点。</p> <p><img alt="" src="/sites/default/files/images/201907/49-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>当然,在很多时候,定制化的控件也是必需的;UIKit 毕竟难以满足所有的设计需求。譬如,UIKit 并没有提供星级打分控件;当你自行设计时,应该使用系统提供的颜色方案,这样就无需针对深、浅模式单独进行管理了。</p> <p><img alt="" src="/sites/default/files/images/201907/50-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>导航栏也进行了升级。默认状态下的大标题导航栏不再有背景色和投影效果,因而标题能够与内容区域无缝衔接。当内容在导航栏底部进行滚动时,导航栏的背景色与投影效果则会淡入呈现。</p> <p><img alt="" src="/sites/default/files/images/201907/51-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>这种处理逻辑同样可以用于默认的小导航栏。例如在 iPad 的&ldquo;设置&ldquo;当中,主导航栏与右侧标准导航栏都使用了无背景、无投影的样式。</p> <p><img alt="" src="/sites/default/files/images/201907/52-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>无缝衔接的导航栏看上去不错,但也并非在任何时候都适用。由于其背景是全透明的,任何位于下方的内容都会直接呈现出来。此外,如果界面当中的控件元素较多,信息密度较大,那么你应该在导航栏底部保留原本的投影效果,从而形成明确的区隔感。</p> <h5> 4. SF Symbols</h5> <p>一直以来,iOS 都会提供一系列图标符号,用于列表行或底部工具栏等处。然而在深色模式当中,过去的图标表现得有些差强人意,因为它们看上去太过纤细了。</p> <p><img alt="" src="/sites/default/files/images/201907/54-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>于是,我们的设计团队重新设计了所有的图标。更酷的是,我们将它们制成了 SF Symbols 供各位使用。</p> <p><img alt="" src="/sites/default/files/images/201907/55-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>SF Symbols 当中包含了超过 1500 个图标。这不仅是一套全新的图标集,同时更代表了设计和使用图标的全新思路。顾名思义,SF Symbols 正是为了配合 San Francisco 字体的视觉特性所设计的。</p> <p><img alt="" src="/sites/default/files/images/201907/56-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>这些图标可以像文本字符一样被输入,因此能够与文字同时呈现在一行当中。它们拥有内嵌基线,以确保与文字保持恰当的纵向对齐。</p> <p><img alt="" src="/sites/default/files/images/201907/57-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>每一个 SF Symbol 都针对当前字号提供了小(small)、中(medium)、大(large)三种缩放变体,以适应不同的界面环境。</p> <p><img alt="" src="/sites/default/files/images/201907/58-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>同时,与 San Francisco 相对应,每一个 SF Symbol 都提供了九种不同的字重。</p> <p><img alt="" src="/sites/default/files/images/201907/59-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>SF Symbols 的矢量特性可以确保其能够配合动态字体功能(dynamic type)实现自由缩放。</p> <p><img alt="" src="/sites/default/files/images/201907/60-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>同时,由于提供了多种字重,当&ldquo;辅助功能&rdquo;设置中的&ldquo;粗体文本&rdquo;被开启后,SF Symbols 也会自动呈现粗体样式。</p> <p><img alt="" src="/sites/default/files/images/201907/61-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>在设计界面时,你可以通过新的 SF Symbols app 找到所需要的图标,直接复制,然后粘贴到设计稿里的文本图层当中即可。</p> <p><img alt="" src="/sites/default/files/images/201907/62-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>更新过的 iOS Apple Design Resources Sketch 文件已经全面支持 SF Symbols。譬如,要想更换 tab bar 中的图标,你只需选中 tab bar,将 SF Symbol 粘贴到右侧检查器面板的特定字段当中,即可实现覆写。这项功能我个人已经使用了几个月,这真的会改变我们一直以来的设计方式。</p> <p><img alt="" src="/sites/default/files/images/201907/63-whats-new-in-ios-design.png" style="width: 620px; height: 362px;border:none;" /></p> <p>如果这 1500 多个图标仍然难以满足你的全部需求,你还可以将某个 SF Symbol 导出成 SVG 格式,然后到 Illustrator 或 Sketch 当中进行定制化修改;保存后的 Symbol 同样具备上述的一切功能特性。</p> <p>次回预告:iOS 13 设计新特性 - 卡片视图与情境菜单</p> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 600px; height: 154px;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/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/291" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS 13</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/290" typeof="skos:Concept" property="rdfs:label skos:prefLabel">深色模式</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Tue, 16 Jul 2019 10:25:06 +0000 C7210 1047 at http://beforweb.c7210.info http://beforweb.c7210.info/node/1047#comments