移动端 on Victor42

移动应用弹窗设计指南

hi@victor42.work (Victor42) — Sun, 06 Aug 2017 00:04:33 +0000

[国外设计第180期]

弹窗、对话框，随你怎么称呼，这些小窗口出现在屏幕上从来都不是理所当然。虽然它们是你应用中一些相对较“小”的元素，却扮演着影响用户体验的重要角色。

一方面，它们可以帮助用户度过应用内的旅程。另一方面，处理不当时，它们也会使用户感到挫败。

有幸的是，弹窗比较成熟，容易实现。用适当的手段和规范可以轻易改善它们。我们这篇文章要讨论的就是这个。

由于并非所有弹窗形式都相同，我们把它分解为5种常见类型，并且总结了每一种的优化“准则”。遵循这些指南，你一定可以使你的弹窗更好地达成目标。

“推荐给朋友”和“为应用打分”弹窗

你当然希望用户量增长、提升好评率、增加病毒式传播的可能。谁不想呢？但是你要了解，多数用户不会向朋友推荐你的应用，或者给它打分，除非他们觉得这么做会得到有价值的回报。

Uber的奖励弹窗

“但是，推荐给朋友是如此简单轻松的任务啊！为什么用户不会大发慈悲，帮助一款小软件成长呢？”很不幸，现实没有这么简单。

注意我们刚才用的词是“任务”。这就是多数用户看待“推荐给朋友”和“为应用打分”的方式——看成任务。互换原则就在此时发挥作用。大概来说，就是你得给予用户某些东西，然后才能向他们索取。可以是通勤应用中的免费出行，或者是某种总体价值和乐趣。最好对这些弹窗使用A/B测试，让它们以不同时机出现在用户旅程的不同位置。这能让你更好地获得重要的统计数据，了解最终应该在何时何地放置弹窗。

同时也一定要确保，从你的应用中转到App store、社交媒体频道、或消息平台的过程尽可能流畅。获得一个推荐链接对于用户真的是“简单”的事情吗？在Wi-Fi和移动网络环境下，整个流程的运转有何差别？有许多重要因素需要考虑。花时间分析和优化这两种弹窗，你肯定能收获更高满意度、活跃度和更多新用户。

记住，“[聪明地]索取，你才会有回报。”

“推送通知”弹窗

推送通知是一个超有价值的手段，能使用户保持投入、反复使用。对许多用户来说，推送通知已经成为了他操作一款应用的主要媒介。不必再打开应用，用户通过推送通知满足他们大部分需求。于是，获取和保持向用户发送通知的权利，应该是用户粘性与留存策略中的一个重要方面。

在Android系统中，方式很直接：推送权限请求会作为AndroidManifest.xml的一部分，用户在安装前会看到所有需要获取的权限。

在iOS上就是另一回事了。iOS的权限弹窗必须由应用内的代码触发，会向你的用户展示一个这样的弹窗：

图片来源：Xtremepush.com

如果用户点按了“不允许”选项，对你来说就相当于玩完儿了。除非用户手动进入权限设置，否则拒绝权限是不可逆转的。所以让你的用户按下“允许”权限至关重要。

我们推荐两种方式，来尽可能保有最多的通知推送许可：

尝试创造一个你自己的、应用自带的权限弹窗，让你评估用户接受推送通通知的意愿。这会让你更加理解用户的行为和偏好，把权限获取留到某个用户真的愿意点“允许”的时机。
仅仅在在你认为最相关和最有说服力的时候请求权限。在此时此地，真的有需要获取通知权限吗？在权限请求提示中，借助当前环境清晰地向用户作出解释。

数据权限弹窗

推送通知权限和数据获取对话框一脉相承。同样，对于这些特殊弹窗的用户体验，我们都是在讨论iOS应用。数据权限弹窗包含对位置、日历、联系人信息、提醒事项和相册的请求。移动开发者必须小心翼翼，因为请求数据权限不是一系列勾选框那么简单。

来源：Developer.apple.com

苹果在他们的权限请求指南中提到：“虽然人们赞赏移动应用获取个人信息所带来的便捷，但他们也希望能掌控自己的私密数据。例如，人们喜欢自动给照片标记上地理位置，或者找到附近的朋友，但他们也想要一个能关闭此功能的选项。”

要使这类弹窗保持相关、显而易见。别设计一个请求用户地理位置的计算器——别这么做。

使用苹果在弹窗中提供的文字位置，描述你的应用为何需要这些信息，即使你自己认为原因显而易见。在某些特定的、相关的用户操作之后，再请求适合的权限，也是一个好方法。比如说，用户使用你的应用创建了一段视频，并且想要分享给朋友。只要用户点了“在Facebook上分享视频”按钮，这就是弹窗请求用户社交媒体账号权限的绝佳时机。用户更容易接受权限，因为它提供了清楚的解释，“要想达成A，必须先完成B”。

想要深入研究，请看我们的一篇文章，讨论如何使数据权限不那么令用户望而生畏。

“错误”弹窗

除了向用户索取权限，弹窗也是开发者向用户表达信息的一种重要手段。尤其是关系到应用内的错误。

世事无常，总有错误出现。错误中的错误是最不该发生的。这么说是什么意思？就是说你的弹窗不能让用户感到迷惑，使得已经发生错误雪上加霜。

我们来举个例子，比如用户的收货地址写得不合逻辑，所以当他们在支付时就会发生“错误”。如果你的弹窗里写着：“发生了错误：支付无法完成”，用户就不得不试图猜测错误的原因。相反，你应当利用这个时刻告诉用户为什么错误会发生，收货地址中具体哪一项需要更正。必须要了解，用户任何的猜测和挫败，可能被一个弹窗放大，最终影响潜在的转化。

而且，对于那些需要用户操作的错误，我们不仅仅告诉用户错误发生、该做什么，还需要引导他们前往相关的操作界面。坚持使用清晰的措辞来准确表明操作（抹掉、撤销、前往的我个人信息界面），而不是使用模糊的文案，例如“是”或“否”。

如果应用中发生了技术性错误，你可以利用弹窗来触达用户，告诉他们你正在努力解决问题。这给你的应用增加了一丝人性，同时向用户表明你在乎他们的个人体验。

想了解“反馈”类弹窗的更多秘诀，我们建议你读Nick Babich的这篇文章，讨论对话框设计的5条重要原则。

挥洒你的才华

我们不是要粉饰任何事情。最终有些用户仍然会看到这样的弹窗：

图片来源：OSXdaily.com

**但也并非人人如此。**你有能力轻松改善弹窗，让使用与转化增长。首先，要确保你拥有一个移动应用数据分析平台，例如这个，Appsee，能使你监控它们的表现和用户体验效果。这些洞见可以让你自信满满地迭代、测试和验证。弹窗可能名声不怎么样，但利用深思熟虑的策略，它们会给你的移动应用带来重大转机。

作者信息：Hannah Levenson

原文链接：http://usabilitygeek.com/mobile-app-pop-up-guidelines/

出色的移动端用户验证

hi@victor42.work (Victor42) — Sun, 05 Mar 2017 13:55:02 +0000

[国外设计第165期]

减少注册和登录的痛苦

处理用户验证通常是事后诸葛亮，我们总指望它有用，但很少深入思考它。它应该足够简单，但事实是，无论对于用户还是运营产品的公司，都像是在自找麻烦。登录失败、忘记密码和冗长的交互。

登录界面是你的应用中最常展示的界面之一。客观地说，75%的人都在登录时重置过密码，废弃了之前的密码（来源）。在企业内网登录中，忘记密码是帮助台每天处理的头号问题（来源）。通过清晰的表述和设计良好的流程，能极大的减少这些问题的数量。

要提升用户验证的体验，降低服务成本，增加转化率，有几件事情要好好考虑。

清晰说明规则

亚马逊和阿里速卖通的例子

避免使用模糊的规则，表述清楚。不要等到错误验证来警告用户，密码至少要6位。强调密码的最短限制是有意义的，但也不要太复杂。有实际意义的密码，比随机组合的字符更有用。

显示密码

亚马逊的例子

可以考虑让密码可见。这对用户登录和注册有帮助。不用再次输入确认，用密码输入框来切换显示隐藏，帮助用户确认首次输入是否正确。显示和隐藏的功能可以用一个小图标、一行文字标签、或者勾选框来表示。亚马逊对此做了些小变化，把隐藏字符保留在输入框里，在下方显示完整密码。增强了用户的信心，减少焦虑，表达出密码被妥善处理的事实。

忘记密码的处理

Slack和Trello的例子

没人愿意重置密码，除非登录失败或者账号被盗。这么看来，如何帮助用户在不重置密码的情况下登录进去呢？发送一个短链接，允许用户不重置密码而直接登录。提示：利用好细微文案，但要和整体的语调保持一致。

无密码登录

Medium和App Store的例子

密码总是很麻烦，所以还有个办法是根本不用密码。要么使用外部验证手段，例如社交媒体账号登录，或者利用指纹识别。比如说，在App Store里购买一直都是用指纹的。

两步验证

有时候你希望增加一层安全措施。不过要确保用户在一段时间内不会再被打扰到。把它作为一种额外手段，不要为了用户的利益这样打扰他们。提示：如果想要用户启用两步验证，可以给予某种奖励——Mailchimp对于启用此功能的账号，给予了10%的优惠。

移动端登录

Mailchimp和Instagram的例子

虽然以上原则可以用在各种设备中，但移动设备还有一些特殊的用法。如果能确定用户正在使用手机，可以发送短信或者推送消息，这招非常神奇，能够迅速带用户前往目的地——应用内的某个地方。

PIN码和数字密码

iOS锁屏界面的例子

如果不需要完整密码，可以采用数字密码。通过数字键盘来输入。

其他验证方式

Android锁屏界面的例子

还有其他的用户验证方式。连接网格中的点阵画出图形，或者点击屏幕中的特定该区域。

必要时才让用户输入用户名

如果要依赖账号体系，请考虑使用有邮箱地址。不要光为了验证而索要用户名。即使是社区网站，用户也会使用Twitter或Facebook账号登录。

无论采用哪种方式，都要考虑使用场景。只耗费最少的精力，不要把事情搞复杂，尽可能让用户感到没有障碍。

原文链接：https://uxplanet.org/nailing-the-ux-of-authentication-on-mobile-2b69ceab26df#.msjlacij2

作者信息：Levi Kovacs The missing UI controls for your next mobile project https://mobiscroll.com

如何表达App的隐藏手势操作

hi@victor42.work (Victor42) — Sun, 22 Jan 2017 22:03:37 +0000

[国外设计第161期]

手势操作，是通过手指轻微移动来让用户操作应用。触屏界面提供了许多自然的手势，比如点按、滑动、双指缩放。但这些交互方式不像UI控件，通常对于用户是不可见的。除非用户事先了解手势存在，否则他们并不会尝试使用。

如何加入隐藏手势呢？好在有许多视觉层面的交互设计技巧，可以让用户了解这些手势。

首次打开时的教程和引导页

在手势为主的应用中，教程和引导页相当常见。许多情况下，在应用中加入教程意味着向用户说明、解释界面。但是，UI教程并不是阐述应用核心功能的最简洁方式。这种方式存在两个问题：

如果你要给产品准备说明书，就说明与用户的沟通还不到位，因为他们可不希望使用前还要读说明书。
另一个问题在于，用户不得不记住所有这些新的用法。

举个例子，Clear应用一开始会展示7页教程，用户得耐心阅读所有信息，尝试记在脑海中。这个设计很糟糕，因为它需要用户在真正开始使用之前就付出精力。

Clear的教程

避免使用强制性的多步引导，要试图在操作所处环境中教育用户（这时候用户真正需要相应功能）。几经迭代后，教程可以变成更加平缓的暗示。

关注单个操作，而不是试图在界面中解释每一个操作。

以Android版YouTube的手势操作指引为例：

Android版Youtube

这个应用有用到手势操作，但并不是通过教程的方式教育用户。它反而是在新用户首次触发时进行了暗示，每次只介绍一处，而且只在用户进入相关功能时才触发。

如何在情境中教育用户

在情境中教育的技巧，能帮助用户以一种从未尝试过的方式操作某个元素或界面。这种技巧通常包含轻微的视觉提示和微妙的动画。

纯文本指令

这个技巧主要依靠纯文本指令，促使用户执行某个手势操作，并且简明地描述这个操作的结果。

**注意：**说明文字要非常简短——文字越短，用户越可能会阅读，然后才能遵照它的指引。

图片来源：Material Design

提示动效

提示动效（或者动画暗示）表现了执行操作时具体手势的效果预览。例如，Pudding Monsters游戏的诀窍就是完全依靠手势操作，但是用户不必过多猜测就能掌握基本玩法。动画传达了功能方面的信息——用动画来展现一个具体场景，用户立马明白该怎么做。

提示动效展现了如何操作一个元素。来源：Pudding Monsters

内容的暗示

内容暗示是一种微妙的视觉线索，表明了操作的可能。下面这个例子展示了卡片的内容暗示——当前卡片的下方还有其他卡片，这显然表明它是可以滑动的。

展现出导航功能。来源：Barthelemy Chalvet

结论

总之，在移动或网页应用中展现手势操作方式，并没有万能的方案。不过在教育用户操作界面时，我比较推崇通过内容暗示、渐进式提示和微妙的动画，在具体情景中教育用户。教程和引导页应该只作为最后手段。

感谢阅读！

原文链接：http://babich.biz/how-to-communicate-hidden-gestures-in-mobile-app/

作者信息：Nick Babich

移动用户体验设计：错误状态

hi@victor42.work (Victor42) — Sun, 18 Dec 2016 10:38:15 +0000

[国外设计第157期]

*“错误”时有发生。*在App与生活中都会发生。有时是因为我们犯了错误，有时是系统错误。无论错误原因是什么，它们——还有解决方式——对用户体验影响深远。但它往往不被重视，草草处理错误、组织混乱的错误信息会使用户沮丧，最终抛弃你的应用。相反，处理得当的错误提示，能把失败变为惊喜。

本文中，我们会讨论如何优化app的设计，来尽力防止用户错误，并建立良好的错误信息。

错误是什么？

错误（或者说错误状态）发生在app未能完成某个预期操作时，例如：

app不理解用户的输入
app出错了
用户试图同时进行两个矛盾的操作

无论是谁引起的，每一种错误对于用户而言，都会成为一种阻碍。好在，设计良好的错误处理能减少这种阻碍。

预防用户错误

设计过app的同学，应该很熟悉各种限制条件。例如网络状况差的情况下，很难填写表单，而且几乎没法同步数据。要考虑到这些限制，设计更易使用的app，将错误减到最少。换句话说，应该提供建议、加上限制、保持灵活，第一时间预防用户犯错。

Twitter因推文的字数限制而出名，他们会在用户达到字数上限之前提出警示。

让错误信息统一有效

10条可用性启迪中建议，要清晰优雅地表达出错误信息。有效的错误提示应该提供如下信息：

明确表达发生了什么
描述用户应该如何应对
尽可能多地保留用户输入的信息

用户输入错误

用户输入信息验证的意义在于与用户交流，并引导他们克服困难，应对不确定。

输入验证的首要原则是：“出现错误时告知他们！”简单说，优秀的表单验证由3个重要元素组成：

在适当时机和位置告知错误
为错误信息选择合适的颜色
用简明的语言描述错误

所有这些都有一个主要目标——避免困惑。

适当的时机和位置（行内验证）

用户并不喜欢填完一个长表单并提交之后，才发现哪里填错了。告知输入信息正确与否的恰当时机，正是在输入之后。实时验证就该出场了。

实时行内验证会立刻对用户输入作出提醒。如果使用行内表单验证，就会清晰标明有错误的输入项，发生错误时，提交按钮也会置灰。用户不必等到点击提交按钮才看到错误，他们能更早改正错误。

图片来源：Google

下面是几个行内表单验证的案例：

不匹配的内容 提交之前检测出的错误。图片来源：Material Design
超过或不满规定字数 带有字数统计的输入框与错误提示。图片来源：Material Design

合适的颜色（直观的设计）

*颜色是设计验证信息的最佳手段。*因为它能引发本能作用，红色的错误信息和黄色的警告信息非常有效。错误文字应当易于阅读，与背景有足够的反差，让人能注意到。但要确保界面中的颜色适用于所有用户，这是优秀视觉设计的重要因素。

让人注意到提示信息。图片来源：Material Design

简明的信息（发生了什么）

确保错误信息是写给人看的。要实现这一点，就得用用户的语言来说话，避免使用技术术语，用用户的词汇来表达一切。验证信息要清晰陈述以下内容：

什么出错了，为什么。
用户接下来该做什么来解决错误。

【图注：左图中的错误提示为，“输入日期错误”；右图中的错误提示为，“这是个过去的日期”。】

典型的错误会直接说“信息不正确”，没有告诉用户它为什么错了（是数据类型错误？还是已经被占用了？）。确保信息清晰明确。图片来源：Material Design

应用的错误

应用也会发生错误，它不受用户输入影响。这种情况下，用户会遭遇意料之外的状态。显示错误时，要解释一下用户为什么一无所获，如何摆脱当前处境。

同步错误/加载错误

当同步或链接断开，或者内容加载失败时，应该告知用户。要预先告诉他们。由于没有数据，可以使用空状态填补空隙。可悲事实是，许多空状态看起来……真的是空的。下面的例子中，错误界面只说“发生了错误”，没有提供一点有用的信息。

这个空状态界面是个死胡同。图片来源：Spotify

把错误提示想象成与用户的一场对话。在遭遇失败时，用友好且有意义的空状态来沟通。提供基本所需的信息来帮助用户，鼓励他们解决问题。

走丢了，失去连接，就像置身于荒岛？可以跟随建议，保持冷静，点起篝火，持续刷新。图片来源：Azendoo

在适当时机，提供链接或按钮帮助用户完成任务。但要提供你所能做到的操作。如果明知道会失败，就不要放出“再试一次”这样的选项。

不要展示原始错误信息

下面这个例子中的消息非常晦涩吓人。

【图注：操作无法完成。(WDGeneralNetworkError error 500.)】

这种错误信息，是由开发者写给另一名开发者看的。

不要假设人们知道提示信息的来龙去脉，或者指望他们是技术专家，要用简单的语言告诉人们哪里出错了。如何用人话来解释这些错误？把它写下来，那就是你的错误提示文案。

不匹配的状态错误

用户试图执行冲突操作时，会引发不匹配的状态错误，例如在飞行模式下拨电话，或者离线状态播放在线视频。应该清晰表明他们所处状态，避免他们陷入这般境地。简单说，就是不要让用户执行无法完成的任务。

清晰表明错误的原因和出处。图片来源：Material Design

结论

*从不出现的错误信息才是最好的。*最佳方式是引导用户向正确方向前进，第一时间预防错误发生。但当错误确实发生时，设计精良的错误处理，不仅能教育用户按你预期的方式使用app，还能防止用户感到茫然。

感谢阅读！

原文链接：https://uxplanet.org/mobile-ux-design-user-errors-1ad1f5d664f9#.fzcsdis0n

作者信息：Nick Babich I’m a software developer, tech enthusiast and UI/UX lover. http://babich.biz

移动端用户体验：底部导航

hi@victor42.work (Victor42) — Sun, 30 Oct 2016 16:12:56 +0000

[国外设计第151期]

图片来源：Behance

设计师都知道，设计不只是为了好看。设计也决定用户如何融入一个产品，无论是网站还是app。这是一种交谈。*导航就是一种交谈。*因为如果用户不明白使用方式，你的网站或app再漂亮都没用。

为什么底部导航如此重要？

Steven Hoober在他的关于移动设备使用状况的研究中发现，49%的人依靠一根手指完成手机上的操作。在下图中，手机屏幕上的画面表示大致的触摸范围，不同颜色表示用户能用拇指在屏幕上触及的区域。绿色表示轻易触及；黄色表示需要伸长手指；红色表示需要用户改变持握方式。

图片表示单手操作智能手机的舒适程度。图片来源：uxmatters

**把最重要最常用的操作放在屏幕底部非常重要，**因为它们能用一只手指轻松触及。

标签栏

许多应用遵循这一规律，将底部导航（又称作标签栏）作为最重要的app功能。Facebook的核心功能一触即达，能够在不同功能中迅速切换。

Facebook的iOS底部标签栏。

底部导航设计的3个关键

导航通常是搭载用户的交通工具。底部导航应该承载重要性等同的顶级目的地。这些目的地需要在app的任何地方留有直接的入口。

优秀的底部导航设计遵循以下3条定律：

1. 只显示最重要的目的地

在底部导航中使用3到5个顶级目的地。如果少于3个，请考虑使用标签代替。

底部导航避免使用5个以上，因为点击目标相互会过于接近。在标签栏放置过多的项目，让人们难以点中他们的目标。每多展示一个标签，app的复杂性就增加一分。

如果顶级目的地确实有5个以上，不要用底部导航来承载这些入口，请考虑放在其他位置。

避免内容滚动

小屏幕上显而易见的解决方式，就是部分隐藏式的导航——不必担心屏幕空间的局限，把标签项放入滚动的标签栏即可。但是滚动的内容效率低下，因为你得滑动一下才能看到想要的选项。

iOS版Rookie Cam app中就存在“看不见就想不到”的问题。

2. 表达出当前位置

没有表达当前位置，可能是app菜单中最普遍的错误。“我在哪里？”是用户需要回答的基本问题之一，这是顺利操作的前提。

用户应该在没有任何外部引导的情况下，一眼就看出如何从A前往B。应该提供适当的视觉线索（图标、标签和颜色），操作就不需要任何说明了。

图标

正因为底部导航操作以图标方式展现，它们所表达的内容应该要适合通过图标来表达。有些用户熟知的通用图标，通常这些都表示搜索、邮件、打印等功能。不幸的是，“通用”图标很少。app的设计师常常用图标来代表一些非常难以分辨的功能。

老版本的Bloom.fm应用Android版。真是相当难理解用户当前所处位置。

我在这篇文章《图标是优秀用户体验的一部分》中强调了这个问题。

颜色

避免在底部标签栏使用不同颜色的图标和文字标签。应当使用app的主色来表示视觉焦点。

左图：不同颜色的图标让app看起来像是圣诞树。右图：应该只用主色。

遵循一条简单的法则——用app的主色来提亮当前的底部导航项（包括图标和文字标签）。

iOS版Twitter的底部菜单栏。Messages是当前选中项。

如果底部导航栏有背景色，就要用黑白的图标和文字标签。

左图：避免使用彩色图标和彩色背景的组合。右图：使用黑白图形。

文字标签

文字标签要为导航图标提供简短有意义的描述。不要用太长的标签，因为它们不能截断或换行。

避免换行、截断和缩小文字标签。

菜单元素要易于浏览。用户要能理解他点击某个元素时会发生什么。

点击尺寸

目标区域足够大，才易于点击。将界面宽度按操作项的数量等分，计算每个底部导航操作项的宽度。或者，把所有底部导航项的宽度设为最宽。

Android规范建议按照下图的尺寸设计移动端的底部导航栏。

移动端的固定导航栏。单位是逻辑像素（dp）。来源：Material Design。

标签栏的小红点

可以在标签栏显示小红点，表示有相关的新信息。

可以用低调的方式给标签栏图标加上小红点。

3. 让导航不言自明

优秀的导航应该感觉像一只隐形的手，在操作途中指引用户。毕竟，如果用户都无法找到，那最酷的功能和最有吸引人的内容都没用。

表现

每个底部导航图标都要通向某个目的地。而不能是打开菜单或其他弹出窗口。点按底部导航图标应该直接通向相应界面，或者刷新当前激活的界面。

不要用标签栏提供控制项，用来操作当前界面或app模式中的元素。如果需要提供操作项，请改用工具栏。

iOS的工具栏

保持统一

尽可能在每种情况下都显示标签栏。这样能给用户一种视觉上可靠的感觉。

不要因为功能不可用就移除某个标签。如果你在某些情况下移除一个标签，其他情况确保留，就会让你的app界面感觉不可靠、难以预料。最佳解决方案是保证所有标签都是可用的，然后解释为什么某个标签没有内容。例如，如果用户没有离线文件，Dropbox里的Offline标签会显示一个界面，教你如何添加。这个功能就是空状态。

Dropbox应用的空状态界面。

隐藏标签栏

如果界面里是滚动的信息流，标签栏可以在滚动查看更多内容时隐藏，向下滑动尝试回顶部时再显示。

底部导航栏可以根据滚动，动态显示和隐藏。

视觉愉悦

避免使用横向滑动的动效来切换界面。激活和未激活的界面，切换过渡效果应该使用叠加渐隐效果。

叠加渐隐动画。来源：Material Design

总结

底部导航应该：

可见且结构合理（使用3到5个顶级目的地，并且避免可滚动内容）
清晰（导航栏元素要易于浏览，点击区域要足够大，方便操作）
简单（保证每个导航图标都通向合适的目的地，而且通过底部导航要能够触达所有元素）

原文链接：https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f#.3z87f9p1s

作者信息：Nick Babich I’m a software developer, tech enthusiast and UI/UX lover. http://babich.biz

移动端用户体验：获取用户权限的正确方式

hi@victor42.work (Victor42) — Sun, 05 Jun 2016 00:26:06 +0000

[国外设计第135期]

你知道吗？平均每个应用在安装3天内就会流失80%的活跃用户。多数人下载一个应用，打开一次，然后就卸载了。这是因为用户尝试许多应用，在接下来几天内决定要卸载其中哪些。

是应用品质低劣导致用户这样的行为吗？不尽然，但一款应用的首次交互，在树立整体印象方面扮演重要角色（无论印象好与坏）。用户打开一款新应用时，最不想看到的，就是一大串弹框请求获取权限。

应用想要获取您的位置
应用想要获取您的联系人
应用想要获取您的相机权限

这种操作在用户体验上会造成极其负面的影响，往往导致应用被抛弃。应用要在索要权限之前与用户沟通，这样才能使用户保持投入。本文可以帮助你避开索取权限时的常见陷阱，让你步入正轨。

建立一套策略

说到请求权限，最糟糕的就是在没有任何通知与解释的情况下，用权限请求对用户狂轰滥炸。过早或者一次获取太多权限是常见的错误。然而，许多应用仍然如此——成为了用户打开应用首先看到的东西。例如，Gmail的Inbox甚至在引导页之前就开始索取权限，没有任何信息和上下文说明。

图片来源：Gmail的Inbox

发送权限请求时，你当然希望所有用户都接受。要达成这个目的，就应当建立一套权限策略。权限策略取决于你所请求的权限类型的明确与重要程度。非常重要的权限应当预先请求，次要权限可以在情景中再请求。

权限请求模式。图片来源：Material Design

何时向用户索要

确定用户是否接受请求的最关键因素，是它们何时需要用到。

简单的原则：除非需要，否则不要请求获取权限。

只有重要权限需要预先获取

对许多应用而言，获取不到数据权限会改变整个用户体验。例如，如果应用需要依赖短信服务，拒绝这项权限就导致这款应用无法使用。所幸，用户会希望消息类应用获取短信权限，所以把它前置是有意义的。

图片来源：Google环聊

如果某个功能的运转需要获取多个权限，只请求相应权限，不要过头。

**总结：**确保用户清晰理解应用是做什么的（基于应用的描述或之前的熟悉经历），只预先请求用户希望应用获取的权限。

在情境中请求权限

通常情况下，如果新用户一上来就体验到一连串权限请求，你就错失了一个吸引用户的重要机会。应用要在情景中请求权限，并且告知用户这项权限能提供什么。因为只要用户被吸引，他们就更容易接受请求。

图片来源：thinkwithgoogle

**总结：**在进行相关任务时请求获取权限，用户更容易接受。

如何索要权限

应用应该清晰阐明为何需要每项权限，要提供功能的名称或详细解释。记住，如果想要用户同意，就要礼貌地请求。

简单的原则：清晰无疑说明用户将会获得什么，以此换取他们的允许。

解释权限的益处

对于不太明确的权限，需要教导用户这项权限包含什么。如果你的应用有引导页，可以用它来解释应用的功能，还有为何会出现意料之外的权限请求。

图片来源：Material Design

在情境中对权限做出解释，也是个很好的例子——它有助于增长用户兴趣，加深用户对于此权限的理解。向用户解释允许这项权限会带来的好处。

图片来源：Google地图

请求之前的教程

可以在请求之前提供一张背景图，对权限请求做出解释。Foursquare就用了一张背景图来解释为何应用需要这项特殊权限。

图片来源：Foursquare

在真正的请求之前“预先”请求

iOS的默认请求，每个功能只能触发一次。最坏的情况就是用户拒绝了系统权限，因为在iOS中要找回那个权限非常复杂。多数情况下，最好是“预先”请求用户允许，然后在放出真实的iOS权限获取提示。

Cluster就是个预先请求的例子。Cluster的流程中包含了一个情景创建界面、一个预先请求、然后才是最终的权限请求。使用预先请求对话框，几乎彻底解决了Cluster的“不允许”问题。

“预先请求”是一种预先的教育型权限对话框。图片来源：Cluster

在操作情景中请求权限

用户触发的对话框甚至比情景创建界面更有效，因为用户盼着请求出现，更愿意允许权限获取，他们想要使用这个功能。等到需要某个功能时再请求权限。例如当用户点按Cluster中的相机时，才会触发相机的权限。

在用户尝试使用这项功能时，才提醒用户允许权限。图片来源：Cluster

如何处理被拒绝的权限

由于拒绝权限可能会导致某个功能无法按照预期使用，当权限被拒绝时，应当向用户做出解释。

简单的原则：当权限被拒绝时应当提供反馈。

关键权限

如果由于关键权限被拒绝，导致应用无法运行，要解释这项权限为何需要，提供一个链接打开设置界面，然用户开启它。

下面的例子是Google环聊界面，解释了应用正常运转所需的权限。

图片来源：Google环聊

结论

显然，每个应用各不相同，但你应该思考用户何时需要获取手机各部分的数据，并且确保他们希望得到征询。用户体验的改善是不间断的。不要错失用户允许权限的良机！测试每种情况，验证哪种最适合你。

非常感谢！

原文链接：http://babich.biz/mobile-ux-design-the-right-ways-to-ask-users-for-permissions/

作者信息： Nick Babich

毁掉移动应用设计的6个想当然

hi@victor42.work (Victor42) — Sun, 31 Jan 2016 13:06:00 +0000

[国外设计第121期]

过去几年来，用户交互进化如此迅速，设计师们都快跟不上了——导致在创建移动应用时，从其他媒介（甚至陈旧的应用设计）中照搬交互设计技巧。

其实重要的是要记住：交互模式和设计要随着媒介的改变而变化。

这种思想的第一阶段，可见于鼠标键盘的台式电脑过渡到触摸屏的过程中（Apple新推出的3D Touch就是个更加精细的例子）。从全新的交互模式，到微小的交互细节和趋势，每种新的设备、环境、模式和手势，都带来了机遇和陷阱。

照片来源：Apple

光是了解它们就要费一番功夫——更别说为它们设计了——下面是一些设计移动应用时应当避免的想当然。

1. 用户总是需要创建账号

他们不需要，许多时候他们不想、也没有必要。

作为开发者，除非将用户固化到数据库中，否则很容易把他们拒之门外。但从用户的角度看，这不是光彩之举。

凭什么要先注册，才能知道里面有什么？这个过程劳神费力，必须得物有所值。

相反，用户数据可以离线储存，当用户最终决定创建账号时转移到账户中。或者，可以考虑使用“访客”或“试用”模式，开放核心功能（比如下面的Wunderlist），展现应用的功能，但是功能有限，或者带有水印。

照片来源：Wunderlist

一旦证明了你的应用有价值，用户毫无疑问会决定注册。在那之前，就有点过分要求了。

2. 用户需要一套教程，告诉他们你的应用有多棒

让用户使用，借此展现你的应用有多棒。解释它有多好是非常无力的。而且，用户通常都会跳过并忘记引导页。

浏览了所有说明的用户，并不太理解整个引导页设计。

如果你一定需要用户使用全部注意力，一步一步浏览引导（有些应用确实如此），那就要尽可能短，并且凭借帮助菜单来呈现。这就有意义多了，即使在用户用了一段时间以后。

照片来源：UXCam

3. 不要假设某种方式能适应所有应用

即使是常见的交互模式，也应该根据你应用的特定环境来评估。

有个常见的例子，地址输入框里的“省份”下拉选项。由于省份名可以写作几种不同形式，标准的预定义内容下拉菜单有它的合理意义。在这桌面端或许是可接受的（尽管这尚存争议），但对于移动端可用性而言，下拉菜单是最糟糕的选择。

应用的交互也是强调品牌的绝好机会。如今的应用中，有些非常难忘的品牌“瞬间”，例如从启动图进入信息流时的Twitter小鸟，Snapchat的个人资料图片动画，还有Hopper的加载图片（详见第5条）。

关键是我们不该迷信久经考验的方法，那不是使我们应用出彩的唯一方式。

Hopper应用的加载界面。

4. 应用设计和响应式网页设计是一回事

虽然响应式设计近似于移动应用设计，但为任何设备设计，与为独立应用设计，有天壤之别。

用户在移动应用中期望特定的交互模式和界面元素。

例如，在iOS应用左上角通常有个“返回”按钮，用来返回前一个界面。在网页浏览器中，网站本身就不需要返回按钮了；它通常都被省略掉，因为那和浏览器本身太像了。

虽然这是很基本且显而易见的例子，从菜单和表单，到“弹窗”和字体大小，一切都有细微差别。我们在网页中的设计，在移动应用中往往显得有点尴尬或粗糙——并非必定是哪里错了，而是它本就不同。

图片来源：TD Bank iOS应用的登录和LinkedIn iOS应用的登录

比较一下TD Bank iOS版和LinkedIn iOS版的登录界面。

在TD Bank iOS应用中，你会发现他们主要的UI元素做成了应用的样子，左上角有返回按钮，底部还能看到一栏菜单（与iOS的模式一致）。却没有像应用那样，为登录框本身（和其他页面内容）设计样式。输入框上有默认的iOS圆角和阴影，勾选框非常小，链接带有下划线，UI中甚至还带有版权公告。缺乏应用独有的感觉。

相反，LinkedIn iOS应用的确感觉像是个应用，尽管不是因为哪个特定的设计或界面元素。而是因为他们没有把网页打包成应用。他们为应用而设计，而非移动端网页——我们能看出区别。

5. “加载小转盘”是表达加载中和思考中的正确方式

默认的加载图标（例如iOS的小转盘，从中心点发散出的灰色线条）似乎有负面的暗示。

它们不仅出现的不是时候，也作为移动操作系统的一种功能，指示一切事物的状态。从设备开机，到连接wifi出现问题，或是应用加载缓慢。

正因如此，人们讨厌看到孤零零的一个转盘，没有任何指示信息或时间进度。

相反，应该尝试让加载感觉更自然——甚至将它隐藏。一种方式是通过占位元素来暗示内容，Facebook就这样呈现时间轴的加载状态。你还可以利用这个机会，在加载指示器和信息上发挥创意，例如在界面上加入一些奇思妙想，或者强调品牌。

照片来源：Facebook iOS app

6. 用户首次使用时，会盲目地允许通知

绝不能依赖操作系统默认的“允许通知”对话框。这个无脑设计会绊倒无数移动端设计师。首先，它并没有说得足够清楚为什么应用需要获取权限，让它能随时随地侵犯用户隐私。

相反，应该在应用中设计一个自定义的“允许通知”界面。

永远都要告诉用户你的通知有多么重要（尽可能给他们展示例子），并且向他们保证不会有不必要的垃圾信息轰炸。

一旦用户理解了应用通知的价值，谨慎提供原生的、基于系统的弹窗——他们会立刻看见，不会把事情搞得一团糟。

照片来源：http://peach.cool/

一款广泛宣传的新近应用Peach就做得很完美。

它第一个“允许通知”对话框看起来很像真正iOS系统对话框（但并不是），他们解释了“为什么”需要通知，消除了疑虑。用户点击“允许”之后，就会看到真正的iOS系统对话框（相比之下，这个没用多了）。

照片来源：http://peach.cool/

7（还有更多）

人们对应用界面的期望更多了，标准正在水涨船高。

对于基于应用的公司，不当地忽视细节会损害应用的接受度——甚至会破坏你与用户的关系。

以上6个想当然还只是开始。如果想要继续深入，要学着留心和避免日常的假定。小心不要想当然以为自己知道什么界面最适合——始终都要努力寻找最佳方案。

想要学习更多关于用户体验设计的最佳实践，请看《2016决定性的用户体验设计电子书集合》。这个集合里包含了350多页和超过300个移动端设计、用户体验设计、网页设计的案例。

原文链接：https://studio.uxpin.com/blog/6-assumptions-that-kill-your-mobile-app-design/

作者信息： Drew Thomas Drew Thomas is the chief creative officer and a co-founder of Brolik, a Philadelphia digital design agency. While Brolik is his focus, he also considers himself a “maker” and tinkers with all kinds of side projects, both digital and physical.

移动端设计模式的误用

hi@victor42.work (Victor42) — Sun, 15 Nov 2015 08:49:00 +0000

[国外设计第110期]

如果你是一名经验丰富的设计师，你一定会认同一点，受他人启发并不是在抄袭UI设计。这是一种最佳的研究实践。它也要运用各种设计模式，也要遵循设计规范，也需要确保选择用户熟悉的模式来建立可用的界面。

有些人可能会说，死守规范和模仿他人会扼杀创造力，终将有一天，所有应用都长一个样。但从用户体验的角度我注意到另一个问题。习惯于最佳实例可能会让你盲从Google/Facebook/Instagram/还有你最喜欢的应用，误以为他们的设计目标与你的相同，你却未对此产生质疑。下面是一些被认为（或是曾经被认为）是最佳实例的模式，但未必如你初见时所认为的那么好。

1. 隐藏式导航

至少有五十万篇关于汉堡菜单的文章，多数都是设计师写的，为此展开激烈争辩。如果你对此一无所知，可以读读这篇或者这篇。但简而言之，讨论点并不是这个图标本身，而是将导航隐藏在一个图标中。

侧滑菜单非常灵活，使用也方便。

这个解决方案对于设计师很有诱惑力，方便快捷：你不用操心有限的屏幕空间，把整个导航塞进默认隐藏的滚动层里就可以了。

但是，实验显示，用一种更加可见的方式展示菜单项，能够提升活跃度、用户满意度、甚至收入。这就是为何所有大公司都在舍弃汉堡菜单，让最重要的导航项持续可见。

YouTube导航的变革，Luke Wroblewski注

如果你的导航很复杂，将其隐藏并不是友好的移动端做法。为它排个主次才是。

2. 图标，到处都是图标

由于屏幕空间有限，另一个看似无需动脑的节省空间的方法，就是把文字尽可能都换成图标。象形图标占用更少空间，也不需要翻译，毕竟人们对这些都很熟悉，对吧？而且其他应用都在这么做。

脑中带着这样的假定，应用的设计师有时就会把功能藏在一些难以辨识的图标里面。例如这个，在Instagram中你可以通过这个图标直接发送消息，你能猜到吗？

或者假设你从没用过Google Translate，点下面这个图标你觉得会是什么功能？

有个常见的错误，就是假定用户都熟悉这些象形图，或者愿意花时间探索和学习它们的含义。

Bloom.fm难以理解的标签栏。

如果你认为在图标上加上悬浮气泡会让它更易用，那你就错了。即使你是Foursquare，用户无论如何都需要学习使用。

Swarm中的图标提示。

这不是说根本不应该用图标。有许多人们相当熟悉的图标，其中多数都表现一些常用功能，例如搜索、播放视频、邮件、设置等等。（但用户仍然会感到不确定，例如，点击心型图标时究竟会发生什么。）

有些图标多数用户都认识，这些可以作为通用图标。

但是，复杂且抽象的功能总是应该带有适当的文字标签。在这种情况下，图标仍然有用，因为它们提升了菜单项的显著性，也为应用增加了一丝亲切与个性。

Pixelmator的导航

基础功能用图标可以很有效地展现，但对于复杂的功能，应该带上文字标签。（如果要用图标，一定要做可用性测试。）

3. 基于手势的导航

苹果在2007年推出iPhone时，多点触控技术成为主流焦点，用户了解到他们不仅能够在界面上点击，还可以放大、捏合和滑动。

手势在设计师群体中盛行起来，有许多应用都带有实验性的手势控制。

Clear应用中的手势导航。

就像把导航藏在图标中替代文字标签，手势有时候对于需要节省屏幕空间的设计师而言也极具诱惑力。（“不应该有删除按钮，人们左滑就行了。或者右滑也行，这个我们来决定。”）

关于手势要知道的第一件事情，就是它们总是隐藏的。人们需要记住它们。就像汉堡菜单那样：如果将某个选项隐藏起来，使用它的人就会减少。

而且，手势与图标有同样的问题：有些通用手势大家都掌握了，例如点按、缩放、滚动。还有一些手势每个应用都不同，需要探索和学习。

但不幸的是，多数手势在不同应用中，都是非标准且不统一的——这仍然是触屏界面设计相当新的一个领域。甚至简单如滑动手势，在不同邮件应用中也不一样。

在苹果的邮件应用中右滑，会显示出标为未读选项。

同样的手势在Mailbox里却是归档邮件。

还有，想一想，摇晃手机可能既是撤销（iOS）又是发送反馈（Google Maps)。

不要忘了手势是隐藏式的控制，你的用户需要付出大量的精力才能记住。除非你是Tinder，那你或许可以为全世界定义右滑的意义——但也仅限于你应用中至关重要的某个概念。

4. 首次使用的教学引导

首次使用，最近一个火热的用户体验议题，指的是用户与应用的第一次接触。在许多例子中，这就是指显示一些教学引导层，向用户说明应用界面：

dcovery中的教学引导。

为什么这是个糟糕的方案？因为多数用户会跳过你的介绍；他们只想立刻上手。即使他们注意到你的教程，通常也转瞬即忘。（尤其当界面信息太多时。）最后这点也很重要：加入教学引导并不会使界面更直观。牢记这一条：

用户界面就像一则笑话，如果你非要解释它，就不好笑了。来源：Startup Vitamins

首次使用的流程还可以用许多其他方式来设计，或许对用户更加有用。例如Slack，用了主界面来营造环境氛围。他们做了自我介绍，重点阐述了它的好处，而非界面与功能。

有一种更加有互动性的方式欢迎新用户，渐进式。Duolingo没有解释应用的功能：它鼓励用户打开，在选定的语言中做一套快速测试（甚至都不用注册），因为人们在实际操作中学习最快。而且它也是一种更吸引人的方式来展现应用的价值。

还记得滑动手势在Mailbox中与Apple Mail里不同么？这就是它如何渐进式引导的：用户会看到一系列引导页，在实际使用应用之前，他们要在其中试着操作每一个手势。

在设计半透明层上的教学引导之前，停一停，思考一下用户首次打开的体验会是怎样。要重视环境。多数情况下，总有更好的方式来欢迎用户。

5. 有创意但不直观的空状态

空状态非常容易被经验不足的设计师忽略，但是，它是应用整体用户体验的重要因素。

有时候设计师把错误信息和空状态当作挥洒创意的画布。

例如Google Photos的这个空状态界面：

Google Photos中的空状态。

第一眼看觉得很棒，对吧？遵循规范，层次分明，还有漂亮的插画。

但再看一眼，有一些奇怪的东西：

如果都没有相片集，为什么还要一个如此突出的搜索按钮？为什么要在空无一物中搜索？
第二明显的元素——插画，却显然是不可点击的（尽管许多人会试着去点）。
提示说我应该寻找顶部的“+”按钮，这太尴尬了。为什么提示本身不带有添加按钮？这就像是在说“点击继续按钮继续”。

上面的这个空状态并没有帮助用户理解环境：

相片集是什么？它们有什么用？
为什么我没有相片集？
我该怎么办（我该做点什么吗）？

说到创造力，有时候少即是多。下面的空状态在实用性方面表现就非常好。（我们暂且忽略“现在点击下方按钮”的说明。）

Lootsy的空状态。

别忘了空状态（类似于网页的404页面）不仅仅关乎视觉美学与品牌个性。它们在可用性方面还扮演着更重要的角色。要让它们直观易懂。

质疑一切

不要误会我的意思：设计模式与最佳实例仍然是你的良师益友。但要牢记应用和用户是不同的，某种解决方案可能在一个应用中大放异彩，在你的应用中却一败涂地。这不是普适规律。而且，你永远都不会知道一个应用为什么要这样设计。

独立思考。独立设计。独立研究。

权衡、测试、验证——别怕违背规范，只要那样做更有意义。

原文链接：https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570

作者信息： Zoltan Kollin Thinking about experiences as UX director at Ustream, co-organizer of Amuse UX Conference and co-author of http://uxmyths.com/

全新的导航形式：全屏菜单

hi@victor42.work (Victor42) — Sun, 28 Jun 2015 12:51:00 +0000

[国外设计第92期]

与其他用户界面细节一样，菜单的设计也在随着当今的潮流改变。一些变化能带来积极的效果，改善用户体验，还有一些却会破坏有利的形象。追随潮流是件棘手的事，尤其是在菜单上。

比如，隐藏式菜单和极简式导航栏最近正处于风口浪尖。但是，它们并不适用于所有网站。相比之下，全屏菜单多数时候几乎都适用于所有项目。后者正在汇聚人气，因为它灵活易变，能够提升而非破坏用户体验。它在不经意间呈现了很多数据，整洁地排布文字与多媒体内容。当然，这使得主页又多了一层点击，但有时为了更好的用户体验，应该做这样的牺牲。

今天我们进行一场头脑风暴，来看20个新颖绝妙的全屏导航网页设计案例。

全屏菜单案例

Maecia

Maecia采用了讨人喜爱的蒸汽朋克外观，增添了一分独特的精细和机械感。基于图片的导航占据整个屏幕，与动态主页和主题高度吻合。

Olcese

Olcese有好几个菜单，便于用户更彻底地探索这个网站，同时也强化了品牌识别。基于图片的网格式全屏导航中，充满了有趣的照片、漂亮的图表和令人愉快的效果。这些元素的结合扮演着至关重要的角色。

Moeko ABE

摄影师的在线作品集还能是什么样？以照片为核心的主页明亮耀眼，导航运用了多媒体，为这位艺术家高调代言。菜单在整个页面投下柔和的阴影，呈现出美丽的照片链接。

Conference Awwwards

颇具开创性的主页，一流的HTML/CSS/JS动画立刻引人注目，让人印象深刻。简单的导航占据了整个屏幕，视觉聚焦于导航链接。这是非常合理的方案。

Drygital

Drygital的主菜单流露出欢乐积极的情感。华丽鲜艳的渐变背景，非常有利于展现亮白色的导航。一如往常，菜单覆盖了整个主页。不过得益于半透明的背景，用户可以在着陆页欣赏一段视频。

Aleman’s Design

Aleman’s Design有着无缝式的导航，与整个场景搭配良好，对美感有重大贡献。这个团队采用了非同寻常的方案，利用动画背景来强调菜单项。

Mas Industries

Mas Industries的特点是基于图片的全屏导航菜单，它从“汉堡”菜单中优美地展开。对金属部件的完美渲染散逸着冰冷严肃的氛围。虽然前景与背景的反差很弱，但另一方面，这种方案对系列设计有强调作用。

Danne Olsson

壮观的照片背景，映入Danne Olsson的用户的眼帘，充满自然意象。为了弱化如此吸引眼球的核心元素，将视线引向更简单朴实的导航，他采用了很直接的解决方法，将全屏菜单与纯色背景相结合。

Impossible Bureau

在这里，主导航将首页划分为4列，让网站的主要部分充满全屏。为了使外观鲜活明亮，不至于让主页看起来黑暗阴沉，每个链接都带有美丽的渐变背景，还有绝佳的字体和配图。

Voisins

Voisins的主页是个庞大的导航体系，有两个菜单组成。其中之一如我们所料，迎合了当今网页设计趋势，通过“汉堡”菜单触发。另一个则占据全屏，可以更高效地处理视频链接。

Fornace Studio

Fornace Studio采用了一种非常规方案，主菜单由小小的导航图标触发显示。它从一个特别的角度滑入，模糊并覆盖整个主页，立刻吸引了用户的注意力。

Webgriffe

Webgriffe的设计很精细，文案、极细的雅致字体、幽灵按钮、强烈而现代的图形和趣的背景，共同构成了视觉焦点。菜单与主题的配合非常好。

Moma

全屏导航让用户很自然地点击首页的图片，进入主菜单中的其他功能。这个方案相当整洁优雅，完全适用。

Giaco Morelli

和上一例类似，这个全屏菜单带有轻微的半透明背景。厚实圆润的字体转移了访客的注意力，从迷人的交互式主页，转向网站更重要的部分。

Gianluca Bocchi

虽然极简式设计缺乏丰富的装饰，但这家画廊的官网散发着典雅、精美的艺术气息。在这里，第一印象尤为重要，庄严的菜单巧妙含蓄地将着陆页分成3部分。

Elliot Lepers

Elliot Lepers有着全屏式轮播，一列列呈现信息。尽管这并非菜单的传统形式，但它是纯正的导航，使其得以充分运用。

Fahrenheit

Fahrenheit的菜单由4个基本的链接构成，这适用于多数小型在线作品集。尽管如此，这个团队仍然在其中倾注心血，将整个页面让给导航列表，证明了它的重要性。

N3RD

首页就是个导航页面。最棒的一点是，这个团队应该不会担心平板和移动端的变化，因为这个方案全平台适用。简单而优雅，尽管相当原始。

ivxvixviii

ivxvixviii有着相当精致的几何体，壮丽的图片和微妙的效果丰富了造型。精巧独特的导航足以激发兴趣，迫使用户深入其中。

The Colors of Motion

这个网站的特色是奇异的无字导航，一眼看去使人迷惑。设计师采用了打破常规的方案。在这种方式中，菜单与名称相结合，支撑着整个主题。

结论

受趋势影响，导航可以采用不同形式。全屏菜单是种双赢的做法，可以解决很多网页设计的问题。

原文链接

作者信息： Nataly Birch I’m an internet entrepreneur and an amateur web designer and developer from Sevastopol. In my spare time I read books, play board games and volleyball.

移动端尺寸基础知识

hi@victor42.work (Victor42) — Sun, 19 Apr 2015 19:55:00 +0000

初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。

现象

首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。

不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。

像素密度

要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。

所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。

Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

倍率与逻辑像素

再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。

在现实中，这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。

在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。

由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。

如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：

ldpi [0.75倍]
mdpi [1倍]
hdpi [1.5倍]
xhdpi [2倍]
xxhdpi [3倍]
xxxhdpi [4倍]

各型号iPhone的倍率比较简单，我们后面会讲到。那么Android手机那么多，具体怎么分？哪些手机是几倍的倍率呢？我们先看一张表，这是友盟2014年10月到2015年03月的数据：

就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义：

ldpi 如今已绝迹，不用考虑
mdpi [320x480]（市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小）
hdpi [480x800、480x854、540x960]（早年的低端机，屏幕在3.5英寸档位；如今的低端机，屏幕在4.7-5.0英寸档位）
xhdpi [720x1280]（早年的中端机，屏幕在4.7-5.0英寸档位；如今的中低端机，屏幕在5.0-5.5英寸档位）
xxhdpi [1080x1920]（早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上）
xxxhdpi [1440x2560]（极少数2K屏手机，比如Google Nexus 6）

自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。

不过需要注意的是，Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480x800和1080x1920，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320x533和360x640。很显然，后者更宽更高，能显示更多内容。所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。

单位

不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。

单位之间的换算关系随倍率变化：

1倍：1pt=1dp=1px（mdpi、iPhone 3gs）
1.5倍：1pt=1dp=1.5px（hdpi）
2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）
3倍：1pt=1dp=3px（xxhdpi、iPhone 6 plus）
4倍：1pt=1dp=4px（xxxhdpi）

单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080x1920，有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。

无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。

Web怎么办

移动端页面的绝对单位仍然是px，至少代码里这么写，但它的道理也和app一样。由于像素密度是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器。前端技术可以善加利用设备的像素密度，只需一行代码，浏览器便会使用app的显示方式来渲染页面。根据像素密度，按相应倍率缩放。

可以通过这个测试页面 http://greenzorro.github.io/demo/basic/响应式断点.html 来看看你的移动设备屏幕宽度，这是逻辑像素宽度。

以iPhone 5s为例，屏幕的分辨率是640x1136，倍率是2。浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。

实际应用

大家最关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。

之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面，把尺寸和文字单位都改成点（Point）。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各平台单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。

要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。为什么是这两个数字？

首先说300，这和人眼的分辨能力有关。由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是DPI。DPI达到300以上，其细腻程度就会给人真实感，像真实世界中的物件。相反，DPI只有10的话，在你一个食指指节大小的长度内只有10个像素，这明显就是马赛克了。所以印刷品要设成300，才能保证清晰。

再说72，这有一定的历史原因。最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。

现在回到正题，我们怎么通过DPI来调节倍率？既然屏幕本身的分辨率是72，DPI设成72刚好是1倍尺寸，那设成72的两倍就是倍率为2的屏幕了，就这么简单。

下面来看看3个平台各自的画布设置：

iPhone

iPhone的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone，就要选择逻辑像素折中的机型。

从市场占有率数据来看，目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上升势头最猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。

按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone 4s，大一点的6 plus也不会过于空旷。

不过在切图的时候要注意，由于iPhone 6 plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。

Android

都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360x640，就看你设成几倍了。想以xhdpi为准，就把DPI设成72x2=144。想以xxhdpi为准，就把DPI设成72x3=216。

对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，显示内容会更少。稍微留意一下，重要内容尽量保持在界面中上部分。

当然，这些机型不出一年就会被边缘化，基本淘汰。现在能运转的也是当作功能机在用，软件多了必卡无疑，用户体验无从谈起。不作考虑也是OK的。

Web

手机端网页就没有统一标准了，比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320x568。

这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。

如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸，倍率3，逻辑像素414x736。

总结

移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。

平板手机对移动端用户体验的影响

hi@victor42.work (Victor42) — Sun, 22 Mar 2015 11:55:00 +0000

[国外设计第79期]

还记得那些小手机大行其道的日子吗？

已经一去不复返了。

大屏智能手机已经存在了很长时间，毫无衰退的趋势。如今正是时候，回顾一下我们为移动端设计的方式，思考新一代移动设备，尤其是平板手机，给用户交互带来的变化。

平板手机是什么？

这个词（Phablet）顾名思义：手机（phone）+平板（tablet）=平板手机（phablet）。

这些手机的尺寸超出我们的习惯认知，但又不足以被称为平板。准确的说，这些设备的屏幕尺寸通常介于5英寸和6.9英寸之间（127到180毫米）。作为对照，想一想iPhone 5s屏幕对角线是4英寸。

平板手机与普通智能机的区别就是屏幕尺寸。其他方面与普通智能机和平板是一样的。

平板手机并不新奇，虽然直到最新的iPhone 6 Plus发布前，很多人都忽视它们的存在。不过事实是，Samsung早在2011年就发布了5.3英寸的Galaxy Note，“开辟了”平板手机市场。

为什么？

研究显示，人们在移动设备上比从前消费了更多的视觉内容。手机的主要功能，通话，使用率有所下降。记住这点，就不会太惊讶于平板手机份额在2018年以前都会以36%的速度上涨，同时其他智能手机每年只上涨4%，数据来自Statista。

平板手机的交互

平板手机非常酷，多数消费者都愿意为这些设备丢弃原有智能机。但这些消费者甚至都不完全确定，平板手机用起来是否比普通智能机舒服。因为屏幕在变大，我们的手和手指却没有变化。所以我们要调整平板手机的交互方式。

可能你已经很熟悉这张拇指热区图，它描绘了人们持握智能手机的方式，将屏幕上难以触及的区域视觉化了。

Steven Hoober在他2011年的《Designing Mobile Interfaces》一书中首次使用术语“拇指热区”，将它描述为“单手使用时最舒适的触摸区域”。这项陈述是基于1333款智能手机的使用观察分析，它显示了49%的用户使用单手持握手机，这么做就要依赖大拇指来操作。这也出自这项研究。

36%的用户用支架支撑手机，用拇指或其他手指触摸屏幕。
15%的用户双手持握手机，其中90%竖屏持握，只有10%横屏持握。

但是在平板手机上会有怎样的变化呢？用户会试着伸长手指，越过屏幕点击，还是改变握法？

根据Steven Hoober最近发起的研究，“人们会用上另一只手，而且会频繁换手，也频繁更换握手机的姿势。”这指的是各种智能手机，包括平板手机。

不过，我们看看不同屏幕尺寸上拇指热区的自然变化，很明显用户不会单手持握试图触达屏幕每个角落，这是自我折磨。假定他们只会改变和调整持握姿势。记住这点，我们就知道用户不会困扰于大的屏幕尺寸，他们会改变姿势来持握，并舒服地与平板手机进行交互。

这似乎是巨大的解脱，但是要考虑到很多用户使用平板手机时在进行多项任务，单手持握仍然是必要的。理想情况下，应该明智地把移动界面设计成主操作项位于拇指热区中。这样用户甚至不必切换持握姿势。

不过在现实中，这招并非时刻奏效。

如何为平板手机而设计

Samsung Galaxy Note多少算是平板手机市场的开山鼻祖，但它对改善交互的唯一帮助就是触屏笔。它能起到一定作用，不过触屏笔只能作为补充工具，不是每个人都喜欢。

在这个意义上，Apple似乎为用户的舒适度多考虑了一些。iPhone 6 Plus一发布，它们同时发布了操作系统级的“可达性”功能：轻触两下home键，iOS会把屏幕顶部下拉至用户拇指热区。这个功能当然不自然，它增加了完成任务的时间，也增加了操作步骤。但它仍然是一个其他平板手机用户所没有的选项。

Luke Wroblewski提供了另一个解决方案，将最重要的操作项置于屏幕底部。根据重要性，按从下到上的顺序排列这些操作项。我觉得这对于iOS开发者是个好办法，但对于很多Google Nexus 6这种底部有操作条的Android平板手机，可能不合适，操作条可能会与应用级的操作项起冲突。

结尾的思考

平板手机绝对重塑了我们消费数字内容的方式，影响了移动端的设计。我们需要更多确切的使用数据与相关研究，来为用户体验设计决策打基础，让大屏交互和小屏一样舒服。对于用户体验专员，真正的挑战是通过最自然、最少痛苦的交互方式，突显平板手机的长处。

原文链接

作者信息： Armen Ghazarian I am a UX consultant from Armenia with a big passion for sleek and usable digital products. You can always get in touch with me @armen_ghazaryan and Google+ and Website.

跨平台移动应用的延续性

hi@victor42.work (Victor42) — Sun, 15 Mar 2015 19:52:00 +0000

[国外设计第78期]

设计一款适配多平台的移动应用极具挑战。怎么知道何时采用系统原生控件、自定义，或是混合使用？在iOS和Android版StumbleUpon的改版中，用户体验团队采取了混合的方式，调整了原生的设计模式，创造独特、简洁的界面。最终打造了更快捷、更直观的体验，促进了用户的参与。

每个产品的设计流程都该如此，一切源于共鸣。

理解用户

要理解用户所想所做，什么能刺激他们，痛点在哪里，你得从他们的角度考虑。这使你与用户的渴望和需求协调一致，运用你所了解的，来充实每一项设计决策。向真实用户学习有助于磨练直觉，激发共鸣。

对于每个新功能，我们都从收集灵感开始，然后画出各处关键交互，直到方向正确。我们不仅依靠内在本能和设计知识：还通过用户调研和当前数据来丰富并修正我们的决策。

这个app体系重在无穷无尽的娱乐信息。于是我们不断自我挑战，寻找一种能让我们突显于众多竞品的设计方式。StumbleUpon的妙处在于，它揭示了互联网最棒的一面，给用户带来高质量内容，他们甚至都不知道这就是自己要找的。我们试图运用设计来诠释这种意外的发现。

向真实用户学习有助于磨练直觉，激发共鸣。

定下设计目标

在iOS和Android的改版中，我们给自己定下几个目标：

建立跨平台的统一性
满足当前的用户群
提升整体体验，保持用户活跃

2014年，我们进行改版设计的过程中，Google提出了material design风格。我们设计新版iOS StumbleUpon时，仔细研究了material，考虑了一些能在两个平台通用的方式。设计Android版时，我们也吸收了material的美学与交互，打造更加优雅精良的体验。

我们在多个界面中整合了Google的卡片式设计，同时也保持了许多iOS的原生图标和界面样式。我们决定在两个app中使用相似的图标设计，但是根据各自的平台调整了风格。在iOS上坚持使用轮廓式、中空的图标，在Android上给图标加粗。

当我们开始改版Android版时，我们进行了一次视觉评审，详细列举了手机和平板的体验，用以理解大方向。全局纵览一套生态系统，有助于找出有待提升的部分，突出了平台间的差异，让我们专注于设计。

然后，我们开始将UI模式标准化，来配合Google的material标准。App局部已经向material标准看齐了，其他还需要调整。我们还发现几个案例，证明动效可以展现细节交互和过渡效果。

关注这些问题，使我们提升了StumbleUpon的核心体验。我们迎合material界面元素，丢弃了拟物的装饰。更粗的字体和全屏图片，帮助我们丰富了环境信息和数据，提升了Stumbling的预览体验。引入悬浮按钮，突出了从前易忽略的关键操作项。在整个app中融入悬浮卡片，不仅简化了界面，也为Android用户创造了熟悉的环境。

除了在iOS和Android上都使用了卡片风格，我们还通过相同的配色、品牌元素和Stumbling核心功能创造一致性。在整个设计过程中，从静态图片到交互原型，再到最终成品，我们都牢记界面元素之间的相互作用、位置和过渡效果。

在app的特有风格和两大平台的核心规范中寻求平衡，使app的视觉与功能结构更加协调。同时接受material和Apple的设计规范，让我们打造了有亲和力的体验，实用、愉悦、有意义。

两者的改版都暗藏着风险。一方面，只用平台特有的控件，可以创造出顺畅的体验。但过于依赖一个平台的设计规范——比如用iOS标准来设计Android平板app——就使其他平台上的体验产生割裂感。我们最不希望的事情，就是在界面上创作过头，疏远了现有用户，让app既难学又难用。运用设计思维来规避这些潜在问题，对我们的设计流程至关重要。

StumbleUpon用户体验团队成员：Asher Blumberg, Amy Luo, Michael Spiegel, Jennifer Fleming 和 Matthew Spangenberg

乐于持续优化创意，能使优秀的产品走向伟大。

验证我们的设计哲学

在StumbleUpon，我们有灵活的工作流程——通过快速迭代的设计与原型来验证我们的方案。对不同方案进行A/B测试，看哪个效果最佳。所以我们会持续优化设计，即使在第一版完成之后。

我们不仅制作可点击的效果图，也为它们增添动画效果，来展示界面之间的过渡，为交互增加节奏和动感。通过视觉化展现这些自定义过渡效果，我们从开发人员那边得到了重要反馈，因为有些动画的实现太耗时，会拖慢我们为期2周的设计冲刺。

尽早从工程师、设计同僚、产品经理和利益相关者那里得到反馈，有助于建立和提升创意的水准，推动产品前进。乐于持续优化创意，能使优秀的产品走向伟大。

原文链接

作者信息： Asher Blumberg, UX Mobile Designer at StumbleUpon Asher is a multidisciplinary designer obsessed with creating compelling and functional experiences across mobile and web.

移动端字体7准则

hi@victor42.work (Victor42) — Sun, 08 Feb 2015 00:13:00 +0000

[国外设计第75期]

可能你听过这说法，好的字体是隐形的，不过更准确来说，应该是好的字体让阅读行为毫不费力。

当视线掠过一行文字时，它是跳跃前进的，我们称之为扫视。你读的不是字母，甚至不是词语，而是文字某部分的影像，大脑会补上它预期的内容。如果超出大脑预料，它会促使眼睛回去核实假设十分正确。通过在字里行间创造平顺的视觉流动，好的字体极度减轻了眼睛的负担。

对任何字体工作者而言，在移动设备上要面临与生俱来的挑战：空间有限，环境光通常比较微弱。不过将已经用于web端的技巧稍加调整，我们就可以提升移动设备的易读性。

1. 留足空间

与普遍观点恰好相反，字体并非屏幕上弯弯曲曲的线条排列；它主要在于周围和相互间的空间。

字母本身对字体的影响，与构成它的空间相比，要小得多。

要理解这一点，了解字体从何而来很有帮助：字母o（还有b、c、p等等）中间的圆孔被称作“凹槽”。在最原始的印刷机上，铅字由金属雕刻而成，这些凹槽来自雕刻成型、排列在盘中的金属活字。第一个字体设计师所处理的模具，实际上并不能用于印刷。字母本身对字体的影响，与构成它的空间相比，要小得多。

谈到层次时，我们通常指的是h1到p，有时候还会到h6。但另外还有一种层次在影响着行或段落的视觉流，这是特殊的层次：字母间距小于字间距，字间距小于行间距，以此类推。

要在移动端创造最佳易读性，尤其要注意这些特殊层次，这些格式塔式的词语、行、段落的文字组合，在自然光环境下同样至关重要。

2. 行宽

行宽是一行文字的长度。或者确切的说，是一行文字的理想长度，因为很难让每一行都精确吻合。

众所周知，舒适阅读的理想行宽是65个字符左右。行宽产生的物理长度，取决于字体的设计、字间距（见下文）和你使用的具体文字。本文开篇的65个字符（译者注：此处请参见英文原文），用PT Serif字体是26.875em宽，用Open Sans是28.4375em宽，用Ubuntu字体是27.3125em宽。如果再加入斜体、大小写和一大堆其他字体细节，还会有更大的差异。

在桌面端浏览器中，65个字符很难触及边缘，但在移动设备上，65个字符（如果至少大到看得清）会超出浏览器的边界。所以，在移动设备上，你必须得缩减行宽。

移动端并没有普遍认可的行宽标准。不过传统上，报纸或杂志上每一个窄列都会趋向于39个字符。鉴于这个理想行宽已经经历了数个世纪的考验，它在移动端字体上也运转良好。

3. 宽松行距、紧凑行距

行距是行之间的空间，行距太紧凑，会让视线难以从行尾扫视到下一行首。行距太宽松，字间距会开始形成队列，产生了我们通常意义上的河流，阻断了行的视觉流。

从左至右：理想行距、太紧凑、太宽松。

行距的标准通常是1.4em，但以我的经验，这对于屏幕来说太紧凑了：在屏幕上表现良好的字体都有一个关键特征——大的凹槽，大凹槽需要更大一些的行距来保持空间层次。

反过来，更短的行宽需要更小的行距。所以你可能需要将桌面端的行距设得宽松点，同时记得将移动端的设置得紧凑些。

4. 找到最佳状态

所有字体至少都有一种最佳状态，在屏幕上展现最佳的尺寸，还有在浏览器中最能保持字形的抗锯齿选项。

最佳状态下，多数笔画通常都能排列在像素网格中——像素字体，如果你还记得的话，那些字体仅仅在字号调整到最佳状态下才有效。

将字体设为最佳状态能形成更强烈的对比。为移动端设计时，对比尤其重要，因为户外的强光可能分散注意。

你会发现，微调行距会使每行脱离完美像素匹配。我觉得，在移动设备屏幕上，对比的重要性胜过行距。所以如果你不得不在行距上妥协，来保持每行契合像素网格，那就这么做吧。

通常设计师通过基线网格来排列文字。但在移动设备上，我们需要使用x高度来代替（x高度顾名思义，就是小写字母x的高度）。从易读性研究中，我们知道大脑识别的是文字顶部，而不是底部。所以要成就更加平顺的视觉流，我们要确保字符顶部最契合像素网格。

5. 不要忽视起伏边

起伏边是一段文字的边缘。你读的多数内容是居左对齐的（至少对于拉丁语系而言），导致右边沿参差不齐。

当视线从行尾跳至下一行首时，大脑最好要能判断出下一次跳跃的角度和距离。把每次跳跃都想象成跑过跳板，如果间距保持一致，就会快很多。因此，文字左侧边缘应该是平的，每行从同一个地方开始（对于从右至左的语言，恰好相反）。

因此你绝不应该将两三行以上的文字居中对齐。

通常文字会设置成两端对齐，这意味着每行文字所占空间相等，所以两侧都不会有起伏边。我怀疑两端对齐的流行和响应式设计有关，它教设计师们以块状形态思考。两端对齐的文字产生的留白不统一。最糟的情况会导致一行中只有几个字，相当不协调。更窄的行宽会加重两端对齐的问题，所以两端对齐的文字在移动端是难以阅读的。

从左至右：左对齐、居中对其、两端对齐。

如果整洁真的非常重要，那么使用连字符号来让起伏边更平滑，绝不能在移动端使用两端对齐。

文字右侧是起伏边在移动端还有一项额外好处：人们通常在易分心的场合阅读文字，读者视线频繁地从文字上移开——查看站名，或是接电话。起伏边创造了一个随机形状，让右撇子的视线可以通过重读最少的文字，回到刚才的位置。

6. 减少反差

增强文字与背景对比的同时，我们也要减少不同层次文字间的反差。

在移动端，实际可见的文字更少，所以反差被放大了。

其原因是我们的大脑基于环境来判断重要性。在桌面端，标题可能是正文字号的两倍甚至三倍，因为屏幕上有更多文字，所以这是有效的。在移动端，实际可见的文字更少，所以反差被放大了。

多数设计师使用斐波那契数列式的字号组合。在移动端，应该缩小比率来减少字号间的反差。比如，如果你使用黄金比例1.618与字号相乘。在移动端，应该用更小的比例1.382来替代。

桌面端屏幕比移动端容许更夸张的字号缩放。

7. 按比例调整字间距

为移动端调整字号时，我们要意识到字间距发生了必要的变化。

（先说一句，不应该调整固有字距。固有字距是两个字母相互组合时的距离，使它们的间距与其他字母间距在视觉上统一。创作字体时，就纳入了固有字距的考量，这个过程可能要花上数月。如果你选用了一款专业的字体，它的固有字距就是合适的，如果你觉得不对，请换一个字体。）

字间距并不是固有字距。字间距是字体中应用在所有字符上的间距。通常你也不应该调整字间距。

大字号是个例外，拿标题和小号文字（比如脚注）举例。大号文字需要减少字间距，小号文字需要增加字间距。前者是考虑到分组，后者则是为了增强对比。如果你在调整标题，或是用了通常字间距紧密的艺术字体，缩小时可能就需要把字间距放开一点。

总结

字体是一门工艺，设计师终其一生都在精心打磨。的确如此，因为每个文字、每种字体和每项技术都带来了新的挑战。没有一成不变的普适规律。

假如你追求易读性，要牢记三条原则：行内的视觉流要平顺，空间层级要清晰，要有足够的对比。这尤其适用于移动端页面。

没有不可撼动的规则，全凭你双眼决断。不过本文的指南可以作为理想的出发点，让你在移动设备上优美地排列文字。

原文链接

5项启迪性的移动端设计趋势

hi@victor42.work (Victor42) — Sun, 04 Jan 2015 10:23:00 +0000

[国外设计第70期]

App Store和Google Play里的app多如牛毛。很难说未来的趋势是什么，不过显然我们可以轻易选出当下的5种趋势并加以分析。

看看时下的app中的颜色、创意和简单朴素，我们能从中学到一些设计移动app的技巧。

##App中的色彩

**公认的，色彩始终是设计的一部分。**不过，近来很多app将色彩当作设计的基础使用，而不只是点缀。色彩可以营造氛围，极大地影响了app的整体体验。当你把一个色彩缤纷的app和一个几乎纯白的app进行比较，就能清晰体会到这一点。通常，颜色用来树立app的个性，比如友好、有趣或优雅。

看看Rubie、Sky、Rise或Peek这样的app。设计中充斥着华丽的色调，因为色彩是设计中最显著的部分。Rubie和Peek诠释了暗色设计不一定要使用黑色和深灰色。不要自我束缚，尝试使用深紫色或深红色来创造优雅而友好的暗色调设计。

另外，还有像Sky和Rise这样的app，它们信奉的是由鲜活色调构成的渐变。看到如此强烈的色彩在app设计中突出运用，真富有启迪性。两者看起来都如此华美壮观。难道不是吗？这一切都要归功于将色彩作为主要设计元素的运用。

##UI的简单朴素

很多app信奉简洁清晰的设计；这么想真是令人欣慰。常年来，设计师都在为更简洁更干净的设计而奋斗，尤其是极简主义，近来的趋势显示它依然如此。

2012年，Google做了一些研究，证明了简单的网站更好。点击此处深入阅读。总而言之，这个观点很直接。简单的网站更容易消化理解。复杂的网站需要访客付出更多认知上的努力，提供相对逊色的体验。因此，网站视觉上越简洁越好。移动app也一样。Conversion XL基于Google的研究写了一篇文章，关于简洁的网站为何有明显优势。

比如Product Hunt或AirBNB。两者都提供了简洁干净的界面，慎重且适当地展现内容。Product Hunt在一个列表中展现了许多不同内容，但滚动浏览相当简单。理解内容毫无障碍。AirBNB也一样，虽然它提供的信息更多。在任何一个界面，即使是列表或消息界面，呈现给你的信息永远不会将你淹没。

##优雅而精致的氛围

有意思的是，有些app试图通过设计营造一种精致优雅的气氛。这在网站中也不常见，在移动app中明显更加罕见。这个概念适用于酒店、酒吧或餐馆类的业务，他们想通过app创造亲密无间的感觉，就像他们的线下服务一样。不能说这种设计更好或是更糟；不过看到app尝试非典型的设计，总是不错的。

Hotel Tonight和Litely是这类设计的两个例子。两者都有着暗色的设计，展现出优雅、精致和亲切的感觉。这是种截然不同的设计风格，也正是它在支撑着这类非典型设计的app。Hotel Tonight提供的是眼下急需的酒店预订，但它把这件事处理得很时髦。谁说预订酒店一定要在枯燥的白色和浅色中完成。此外，Litely则使你忙于编辑照片，它的深色界面非常时尚。

##App创意

认真想一想，你用过多少称得上独特或创新的app？总体来看，我们常用的app中，没有一款打破常规。或许某项服务或产品曾经很新颖、富有创意，但用了一段时间后，我们习以为常，它就一点也不新颖了，成为一种平常的存在。有些杰出而巧妙的app打破常规，应该受到赞美，它们成就了与众不同的app。

我们很难发觉，有时智能手机在妨碍我们。Kimd就是个简单得不可思议的app，但它的创意想到聪明。作者Julie Chabin饱受明亮屏幕的干扰，比如观看演唱会的时候，于是她打造了一款暗淡的照片视频拍摄app。这个创意如此简单，甚至有点傻气，但它非常有效！整个现代社会都在无休止地使用智能手机，人们总是容易忘记，在某些特定场合使用智能手机是非常奇怪的举动。

另一个精彩案例是DRAWNIMAL。这是个儿童app，帮助他们画画、学习字母表。同样的，这并不是第一个以此为目的的app，却是第一个如此挥洒创意的app。这个app延伸了智能手机的学习体验，它让孩子用真实的纸笔画动物，并将智能手机作为绘画体验的一部分。它为app增加了一个维度，而且并不强迫使用数码设备来学习。这个app的使用方式很特别，也正是这点成就了它的创新。

##无处不在的照片

有一点，我敢肯定你注意到了，那就是各类app对照片的广泛运用。它们被当作内容和设计元素来使用。数码照片正在成为我们生活中不可思议的一份子；这的确是一项非常好的趋势，因为经常接触和用到自己的照片，真是件优雅的事情。在app中使用照片是一件强有力的工具。

VSCO和Steller两款app就是基于照片，相当惊艳。它们都尝试利用你的摄影才能，并激励你分享。以VSCO为例，兼具照片编辑与展示/分享功能。这意味着你可以随心所欲编辑图片，并上传到自己个人资料页面。这是个严格的社区，致力于分享高质量照片。Steller则允许用户创建图片故事。长短任意，可以填充文字、视频，当然还有照片。这个小小的社区有海量图片故事供你浏览，各不相同，比如DIY教程和游记。

###你的观点？

当今移动app带来的5项启迪，就是如此。你觉得app中会掀起怎样的热潮？你觉得设计与app创意，会趋于稳健，还是更加颠覆呢？

原文链接

入门:移动APP中的各种导航

hi@victor42.work (Victor42) — Sun, 11 May 2014 13:25:16 +0000

[国外设计第39期]

即使是移动应用界面的原型设计，导航的形式也可以多种多样。尽管尺寸小，又必须紧凑排列大量数据，它们似乎受到了紧密的约束，但依然有着形形色色的选择。

人们曾经一度只会考虑一种形式——流行且广泛使用的垂直导航，即侧边栏。尽管如此，还有其他可以提升用户体验的形式，会让用户浏览你的APP变成小菜一碟。

列表型菜单

让我们从一种基于列表的标准型导航开始论述，它在移动APP作者中得到广泛使用。这种解决方式建议逐一展示链接，让用户遵循从上到下的常规流程。

Sergey Valiukh的GIF动画设计只是一件概念设计，却完美地反映出列表型导航的实用性。结合了多种色彩和精细的线形图标，还有稍显粗重的字体，让用户轻松浏览APP，并且不会感到屏幕局限导致的不适。

Fueled的Elevatr是一个时尚的APP，帮助企业家管理和跟进商业会议。主屏的特点是彩虹色的菜单，清晰地逐行展现出控制面板的各个项目。背景图受到坐标纸的启发，与这种菜单完美搭配。

Kutan URAL 的HabitClock App是个简洁且有视觉感染力的APP，帮助你管理早晨的闹钟。尽管屏幕上的重点是顶部和底部的控制面板，但列表型导航（同时也是非常棒的通知工具）才是吸引注意力的核心。

横条状的布局方式，用来展现简易侧滑菜单上的一系列链接，这是多数设计师的人气选择，也是Davis Yeung设计的iOS版Instagrab主要组成。通常每一项都配有一枚易懂的小图标，很好地区分每个链接。

矩阵或网格型菜单

占据全屏的网格型导航有助于强调导航，使它清晰易懂、显而易见。当你需要展示很多链接时，这种方式也很管用，一系列同样的网格，有效地将每一项与其他区分开来。

Michal Galubinskiand thoke design的Vectra，有着不容忽视的导航。设计师不仅把菜单的6个项目伸展至全屏，还利用了巨大的扁平风格图标，很明显是为了大部分在线用户考虑。

Marco La Mantia & Simone Lippolis的移动APP设计，Arrivo，巧妙地在严格的方形网格中组织大量数据。每个格子都扮演着功能性的作用；因为它不仅仅是显示数据，也让你通过底部滑出的一个小型控制面板调整它。颜色选择也非常明智，因为热烈的背景色调有助于有效地分配内容和区分网格。

Abracadabra，这个APP肯定是依照Sergey Valiukh心中的复古风格来设计的，让这个APP有种明显的年代感。在此，设计师干练地将屏幕划分成6个相等的网格，非常易于浏览。扁平风格图标结合粗重的非正式字体，有助于提升易用性。

手绘风贯穿了Willis设计的T R A V E R S E的每一个界面。这个APP基于明亮的单色背景和线形图标，因此主菜单看不到任何分隔线，却做到了井然有序，使得用户相当轻松顺手地浏览这款APP。

底部菜单

底部菜单主要是作为导航的辅助，用来区分内部的功能区块或独立组件。

Jakub Antalík的Badoo概念设计有着位于屏幕底部的导航。它也包含了一组扩展菜单，每一项都有它自己的控制面板。

Virgil Pana设计的动态滑动标签，为重度信息展示型应用提出了一个完美的解决方法，能够包含大量统计数据，或者通过图表展现数据，并仍然保持简洁。常规大小的菜单从屏幕底部滑出，显示出一个小型控制中心。

顶部菜单

既然我们习惯于从上到下浏览手机屏幕，放在屏幕顶部自然有一定优势。标签页和每个控制中心独有的图标，是这种布局最重要的代表。

Cüneyt ŞEN的Horner包含了可隐藏菜单，不过它能很妙地从顶部出现。由于明亮的颜色和有关联性的巨大图标，它与整个界面内容形成了鲜明对比。

Enes Danış设计的Discovery Channel将所有的基本导航和二级导航放在顶部，通过固定的位置来打消用户的困惑。

HAMZAQUE Designs为Bettertec设计的气流计算APP，巧妙地运用了占据顶部的标签页。此外，它们被设计成黑白对比的色调，和屏幕中其余部分相同。

MING Labs&Pierrick Calvez的Shario APP，透露着简洁的矢量风格概念。整个导航通过顶部的几个按钮运转起来。

展开式菜单

对于处理大信息量APP和喜欢创作简洁紧凑界面的设计师而言，展开式菜单确实是一项至宝。这种方案允许你把菜单图标放在任何地方，不过它通常是在左上角。

Al Powerd的MuSeek是个音乐APP，需要为用户提供大量可视化信息：专辑封面、描述、歌曲名称、曲目列表等等，所以没有空间来放置全屏菜单。在这个例子中，左上角的小图标就是一根救命稻草，平滑地展现出一列相当巨大的菜单。

Mohammed Alyousfi & Àlex Casabò的Univit UI设计，这是一款优雅的扁平风格APP，使用了一个标准的滑出菜单，通过简单的滑动操作触发。菜单采用了易懂且时尚的轮廓型图标，比各自的标题都大许多。这种方式使得菜单可以很自然地在设计中发挥作用，同时也提供更好的用户体验。

Alexandre Efimov设计的SVOY APP基于一套艳丽的配色方案，与深色的背景有效搭配。设计师让菜单从左侧展开。吸引眼球且逼真的折叠动画，也给设计增添了一些趣味。

Attila Szabó的Időkép又是展开式菜单的一个变种设计，利用几乎占据满屏的梦幻般“拉窗帘”效果来显示菜单本身。

结论

每种方案都有自己的优势与劣势，这就是为什么每个项目都提倡它独有的导航类型，可以有效地应对任务，并对用户体验有帮助。

原文链接

8个优秀的移动APP字体运用案例

hi@victor42.work (Victor42) — Sun, 09 Mar 2014 16:35:38 +0000

[国外设计第31期]

我有个小小的心得可以分享给你——好的字体等于成熟的设计。直至几年前，网页设计师们都还没有对字体表现出足够的关注。如今这个领域已日趋成熟——字体繁荣发展，成为一股巨大的设计潮流。

好的字体在文本的易读性上起了决定作用，却不止于此，它也传递出设计师分享的意图。它是整个用户体验的重要部分。从另一方面讲，缺乏好的字体，是整个产品不专业的表现。文字是主要界面的基础元素——如果它设计得很糟，为何还要深入下去？

本地应用第一年在iOS和Android平台上的发展，简直惨不忍睹。似乎大多设计师和开发者根本没有考虑过字体问题。它不受重视，显得很突兀。所用的那些令人生厌的字体毫无品味。真是一场设计的噩梦。

如今，移动端设计已经远远超越早期的水平，这个领域成熟的迹象已经显露。字体是它最形象的例子。主流应用中的大多字体可以用“得体”来形容。无论是Facebook、Mailbox或是Twitter——文字清晰，字体看上去至少还不错。更有趣的是——2013年，我们看到越来越多移动应用在字体的使用上，表现出了震撼的效果。Ultravisual、WillCall、Hotel tonight就是几个很棒的案例。

可以肯定的是，在2014年，这股趋势将会形成更加强大的力量。

不能再忽视APP中的字体了。移动端的设计已经成熟。

Citroen Lifestyle, iOS

Fancred, iOS

Fifa, iOS, Android

Foodie Recipes, iOS

Hotel Tonight, iOS, Android

National Geographic City Guide, iOS

Ultravisual, iOS

Willcall, iOS, Android

原文链接

活力四射的APP日历组件设计

hi@victor42.work (Victor42) — Sun, 15 Dec 2013 09:51:17 +0000

[国外设计第22期]

日历不仅仅是很多应用的一部分，也可作为占据主屏的独立组件。有一连串APP以精心绘制的历程表著称。尽管日历只是一个小小的单向功能，却起着处理日常事务的重大作用。

今天我们来谈谈设计在这方面的作为。尽管安装一个日历组件之后，得到的似乎只有一张特定的表格，包含了一组中性颜色装饰的数值，不过你还是会惊异于这些现代日历的时尚、精致与优美，有效地将自身完美呈现，并能与其他先进组件相媲美。

下面列举了一系列清新独特的日历组件设计。

移动APP中的日历设计

Crab的日历设计外观干净整洁。设计师同时利用了扁平与拟物风格，增加了几分多样性、层次感，当然也有写实主义。

Kenny Sing的移动APP Slider设计。这位设计师也诉诸于三维效果，适当的阴影和光照使得底部看起来非常写实。木纹的标题栏、精细抛光的背景，是这个创意的有力支撑。

Ethan Leon的预约日历：Month着重强调了扁平化风格，促进了设计元素的整体统一。这个APP一行行地展示数据，每行都被独特鲜活的颜色点亮。这些颜色用来给不同事件标注提醒。

Handsome依据iOS7风格设计的Date & Time Picker。日历组件看上去绝对梦幻、精致和优雅。最先映入眼帘的，是深色模糊背景、整洁的非正式字体和雪白常规图标，它们之间形成了恰到好处的平衡和强烈的对比。

Marcos Paulo Pagano的日历设计。黑白红打造了一种有力度的组合，设计师以扁平风格将三者混合效果更甚。因而这个日历拥有了讨喜的商业化外观，传达了强烈的情感。

Chris Rowe设计的日程规划APP特点是其端庄的葡萄酒色主题，界面独特令人难忘。巨大的图标和小字体，配上柔和的绿色和红色，完美地吻合主题风格。

Day View——Veera Watchara设计的一款日历。这又是一款基于时尚模糊背景的现代风格日历组件。背景艳丽的粉色令人着迷，与前景的白色元素形成了非常理想的互补。使得半透明的区块和圆形部件看上去简单而惊艳。

Vimal Patel设计的iOS Hotel Check-In APP。它基于明亮的配色，简洁干净。洁白背景与灰色边框、常规字体很好地互补。蓝色与绿色有效地建立起视觉焦点。

Jakub Antalík设计的日历APP。与之前几个不同，设计师基于深色配色方案创作了一款精致整齐的日历组件。并通过扁平风格来强调主题。

Maxim Sorokin设计的Calendar Matches Hc Kuban又是一件精彩的作品，利用巧夺天工的渐变和模糊效果，来令作品独树一帜。照惯例，白色被选作辅助色来创造清晰的对比，对于强调和突出内容有不可替代的作用。

NIMIUS设计的Your trip APP。设计师很成功的运用了深色系，令日历界面看起来迷人而抢眼。其中，黑和红扮演着主要角色，相反，白色用于突出强调。

Roman Nurik设计的日历组件。处理得当的半透明层是这件设计的关键，给日历营造了一流的外观。尽管日历占据了几乎整个屏幕，设计师仍然给用户保留了额外的空间。

Mani Baskar的日历设计。这件设计作品灵感来源于iOS7本身浓艳的色彩。设计师运用了不同的蓝色明暗变化来增加界面的复杂度。霓虹灯式的粉色与绿色在背景中非常突出。

Brian MIller设计的简单日历APP，令人立刻感到极简主义气息。界面看起来干净、空旷、宽敞。屏幕中央的巨大数字瞬间就吸引了注意了。

Michael Sambora的Date Select APP还是件半成品。蓝与黑完美地相互作用。厚实的黑色背景让界面显得严肃，蓝色元素（尤其是带透明背景和边框的那个）营造了一种精致的感觉。

Kyle Craven对iOS7的日历APP进行了再设计。简单、舒适和绝对干净几个词，很适合用来描述这件整洁的日历UI作品。柔和的红色支撑着明亮的界面，不经意间将视线吸引至选中区域。

Samuel Nudds的日历设计。打造惊人优雅设计的另一个方法，就是使用最少的颜色，它能友好地展示出日历的特征。两种色调构成的界面，有效地激活了内容，不会使用户分神。

Bobby Ghoshal 设计的Stealth医疗保健APP有着圆润的外观。柔滑的线条和明亮的辅助色是这件设计的标志性特征。

Sergey Skidan设计的My Day。这件UI作品证明了metro风格如何能轻松点亮设计。轻微失焦的背景，为亮色的方形与圆形元素树立了可靠的基础。

这件是Aaron Buckley对Zipcar APP的再设计。这款概念设计看起来有机而和谐。没有复杂的装饰和混合渐变，只有单色的扁平背景，极大地突出了内容，增加了可读性。

Tobias Negele设计的CalendarApp。这个界面采用了通用的详细页面布局，这是日历组件与生俱来的样式。巧克力色调与其余的颜色搭配良好，使界面看起来温和而文雅。

反思

这些我们习以为常的日历组件，常常受到表格结构的束缚，有时辅以水平线条，这样的布局似乎难以令我们感到惊奇。所幸，我们错了。现代设计师们，轻易就将这些平淡无奇的日期序列，转化为精致和时尚的作品。

原文链接

活力四射的状态指示器:移动APP界面的加载动画与进度条

hi@victor42.work (Victor42) — Sun, 14 Jul 2013 20:42:18 +0000

[国外设计第1期]

调查显示，人们总是希望看到进度条的，尤其是在各种数据化APP中。充分理解当前状态或进度，对用户来说至关重要。另外，在需要耐心等待的时候，进度条是极为强大的工具。活力四射、有趣且漂亮令人愉快的进度条，绝对会让我们短短数秒的等待时间兴致盎然。

而且，进度条是各种多媒体播放器的基本组成，提供了退后和前进的功能。让用户不只是跟随播放，更能控制它。进度状态的图形表达对于增加用户好感起着至关重要的作用，同时也建立了优秀的人机交互界面。

带有载入动画与进度条的移动界面

妙的背景。轻微半透明的部件、白色风格和淡粉色的注入，为APP增添几分暖意和女性化意味

Miguel Pires 的dB-METER在中央绘制了一个明亮的仪表盘，巧妙地打破了深色硬朗背景的单调。微妙的凹槽和精准的绘制使得界面看起来非常精致

Corey Lui 的充电动画设计看上去优雅醒目，有着令人喜爱的现实主义感染力。用绿意盎然的动画表达充电过程，吸引了所有的注意力

Muhammad Farhan 的iOS7设计练习利用扁平的图形、柔和的色彩和纤细字体，清晰无疑表达了扁平风格的哲学。巨大的环形进度条占据整个界面的主要部分，使得数据看起来跃然纸上。

Breezy 的TICKER通过明快乐观的色系创造出温暖亲切的感觉。纯白色背景和扁平元素相互协调，为APP打造干净轻快的形象。

Andrew Fuller 的音乐APP使用带噪点的灰色背景、明亮的控制按钮，橙色作为主色起强调作用，都使之区别于通常音乐播放器。精细的阴影和渐变使按钮微微凸起。

Leigh Taylor 的Lift概念图基于深色系设计，配上炫目耀眼的亮色点缀。环形进度条很优雅，使用了间断和点状的线条来表达状态。

Miguel Pires 的AudioRec界面设计是拟物派的一款清新之作。两侧设计有冷光指示器，漂亮的光点给音量旋钮增添了几分趣味。

Maximilian 的音乐播放APP概念图有着相当扁平的风格。中央的巨大的环状进度条，同时也是唱片封面图的边框。

MVBen 的计时器。作者设计了一款非常棒的现实主义风格作品，中间的控制按钮与现实中的几乎无差。精致的渐变蓝进度条，在深色背景上非常醒目。

Karol Ortyl 的Statistics Screen用了仿仪表盘的进度条设计，还有附加文字来表示状态。干净的浅灰色背景与扁平图形巧妙地融合。

Patrick N. Lewis 的Dash iOS App。全屏背景图、非正式字体和普通的白色装饰，作者很好地处理了它们之间的平衡。半透明部件构成的环形加载动画，看起来优雅简练。

Corey Lui 的另一款iPhone APP主要采用双色设计（浅灰色与鲜艳的绿色），令界面外观干净且井然有序。

Dario, Morning设计。作者很巧妙地处理了黑色调、微妙的渐变和精细纹理之间的平衡。有光泽、极大的绿色环形进度条被放置在屏幕中心，用户一眼就能看见所需信息。

Ryan Littrell 设计的CLOCKWORK Timer App有很不错的metro格调。干净纯白的巨大矩形、浅蓝色的运用、细字体和整齐排布的数据，都给它创造一种井井有条的形象。

Kiran 的iPhone音乐播放器APP概念图的界面风格以深色、重纹理为主。深色的音量滑块、金属质感按钮和控制按钮的霓虹灯背景光，给界面增添一点粗犷的感觉。

这张播放器界面概念图有着让人惊叹的音乐氛围。紫色与蓝色，和深至纯黑的图形与背景完美结合。柔滑高光和微妙渐变使得按钮看起来非常漂亮。

Lucas Ramos 的Recife FM是个充满正能量的设计。明亮的橙色帆布质地、清晰明确的网格和圆形音乐控制中心，给界面创造了欢乐愉快的氛围。

App Vital Watcher作为一款整洁美观的监控软件，它采用了高识别度的图标与形象符号，所用的绿色明亮鲜活。

Suhaila Baheyeldin 的Study Timer设计表现了时尚和精致的扁平风格。主体采用灰色调，搭配珊瑚色和大号窄字体，使APP界面工整朴素。

BLASTAROCKS 创作的 MeloMe音乐播放软件看起来轻快、干净、非常令人愉悦。浅色背景、浅色按钮、浅灰色字体为界面创造了一种独特的优美。平顺光滑的进度条很容易抓住眼球。

Nikita Abramenkov 的减肥APP设计强调功能与设计上干净协调地结合。粉色与白色优美地互补，深色字体使得内容容易辨认且易于阅读。

Jeff Rauch 的睡眠APP的扁平风格统计数据十分讨喜，还有优雅的粗圆弧，向用户展示他的睡眠质量信息。

Artua 设计的Gym Genius APP界面有着很重的风格，大量使用光泽与渐变。圆形进度条能瞬间吸引注意力。

Oktafian Angga Nugraha 的短跑计时 App有着精妙的传统金属质感界面，运用了大量有光泽的控制按钮和深蓝色元素。电子样式的字体，很好辨认，也使界面元素浑然一体

Martin Oberhäuser 的公交指引APP Nextr中设计了一个封闭的环形搜索图标，采用鲜活的渐变样式和动画效果

Zahir Ramos 的Laundry Master iOS版采用非常规设计来表现进度条。结合了现实主义和动画效果，使它看起来像洗衣机的一部分

反思

作为一种完美的方式来表达正在发生的事情，进度条与载入动画是大量APP中最重要且不可或缺的部件。在界面看起来没什么变化时，它可以鼓励用户继续等待，也能展现更多额外功能。

阅读原文