用户体验

移动应用程序的跨平台连续性设计

0
登录或者登记去做吧。

设计一个适应多种平台的移动应用程序可能是一个挑战。 比如怎么知道何时使用操作系统的本机控件,创建新的模式,或使用混合方法? 为iOS和Android手机重新设计时, 在StumbleUpon的用户体验团队采取的是混合方法,既适应本身设计范例,又创造独特的、简单的接口。 最终是提供了一中更快、更直观的用户体验,提高用户粘性。

每个产品设计过程都应始于同理心。

一、理解用户

了解你的用户是如何进行思考和行动,是什么激励着他们,及用户的痛点,你需要从他们的角度去考虑问题。 这将获得用户的需求,并以此得出每一个设计决策。从真实的用户进行学习,磨练你的直觉并激发你的同情心。

对于每一个新特性,我们首先收集灵感,然后画各种各样的关键交互方法,直到满意为止。 但我们不只是依靠直觉和设计知识:用户研究成果和当前使用数据为我们的决策添加丰富性和细微差别。

应用生态系统功能有着无尽的娱乐来源,所以我们不断挑战自己设计的方式,从而使我们从激烈的竞争中脱颖而出。 StumbleUpon的优点在于它揭示了最好的互联网,为用户带来高质量的内容。我们试图将我们的设计描述为意外的惊喜。

二、制定设计目标

在重新设计我们的iOS和Android应用程序,我们设置一些目标:

  1. 建立跨平台的一致性
  2. 满足我们当前的用户基础
  3. 提高整体用户体验来留住用户

回顾下2014年的设计过程,谷歌推出了全新的设计语言Material Design。我们在设计新StumbleUpon iOS应用程序时仔细考虑Material Design,因为我们想要跨两个平台分享。 我们还从全新规范中把审美和交互提示提取出,从而在重新设计我们的Android应用程序创建一个更加优美和雅致的经验。

appdesignkuapingtai01

我们在几个屏幕上集成谷歌卡模式接口,同时保留许多本地iOS图标和接口模式。 我们决定使用类似的图标设计,但保留各自平台的风格,如在iOS上使用窄的、空心图标,在Android系统则使用较宽的图标。

当我们开始重新设计我们的Android应用程序,我们进行一个可视审计和手机、平板电脑的用户体验来把握大局。 得到一个完整的生态系统的观点可帮助我们确定改进领域,并强调了平台之间的区别,最终让我们能集中我们的设计工作。

appdesignkuapingtai02

然后我们开始规范与调整我们的UI模式,使之与谷歌的新出的设计标准相匹配。其中部分的应用程序已经符合新标准,而另一些则需要调整。我们还发现了几个实例,如动画可以传达微交互和转换。

appdesignkuapingtai03

关注这些问题使我们改善StumbleUpon的核心用户体验。我们放弃了skeuomorphic装饰的用户界面元素。利用粗字体和全屏图像来帮助我们丰富界面的上下文信息和之前的元数据预览。引入浮动操作按钮,高亮显示关键接触点,这些可能以前都被忽视了。在整个应用程序整合浮动卡不仅简化了接口,也为Android用户创建了一个熟悉的环境。

appdesignkuapingtai04

除了使用iOS和Android卡片样式,我们还创建了应用程序的一致性颜色,品牌元素,和核心功能。在我们的思想在整个设计过程中,从静态模拟原型到最终的规格,我们一直保留着相互间的影响、位置和界面元素之间的转换。

我们在应用程序的独特特点与两大移动平台对于应用程序的视觉和功能结构的设置的标准之间进行平衡。通过使用设计标准和苹果设计指南,我们创建了具有凝聚力的经历,也充满了实用主义,喜悦和意义。

重新设计涉及一些风险。 一方面,仅使用特定的平台控制可以创建一个可打折扣的经验。 但过度依赖一个平台的设计将会在其他平台上生成碎片化的经验,比如创建一个Android平板电脑应用程序,使用iOS的设计标准。最不想要的结果是通过过度的界面设计,减少应用的易用性和可发现性来疏远了用户。运用设计思维来规避这些潜在的问题是我们的关键过程。

appdesignkuapingtai05

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

三、测试设计理念

在StumbleUpon,我们使用一个敏捷工作流程——快速迭代设计和原型设计来测试我们的解决方案。我们的A / B组测试不同的场景,看看哪个效果最好,所以我们会经常不断优化设计,即使第一个实现已经完成。

不要只是创建可点击模型,也通过动画显示屏幕之间转换,添加节奏和交互动作。 这使我们能够可视化定制转换,并从开发人员获得至关重要的反馈,因为一些动画可能需要太长时间来实施,推迟2周设计周期。

越早的从工程师、设计师、产品经理、甚至是其他业务涉众中获得反馈,就越早可以帮助我们创建能够提高设计思想、并推动产品的口径。

作者简介: 

Asher Blumberg,StumbleUpon用户体验移动设计师

Asher是一个致力于在手机和网络上创造引人注目的和功能体验的多学科设计师。

我是ue网原创翻译,英文地址:http://blog.invisionapp.com/designing-mobile-apps-for-cross-platform-continuity/

将After Effects整合到用户体验工作流程里去。
『UI设计尺寸标准汇总』iPhone界面尺寸标准|Android界面尺寸标准|网页界面尺寸标准