如何设计一款符合安卓机交互的app一直是个令人头疼的问题。去年底Google推出的Material Design似乎令这个问题有所改善 设计一个能适应不同平台的移动应用是一项极具挑战性的任务。在选择设计风格的问题上,是选择保留操作系统原生的控件?还是创造一个新的模式?抑或采取一个混合的方式?你会如何抉择?StumbleUpon在iOS和Android版应用的重设计中,采取了一个混合的方式:采纳操作系统原生的设计范例来创造一个独一无二但却不乏简洁的界面。最终成果使我们产品的体验大大提高了,从而让用户拥有更高的参与度。 就像所有产品设计过程中都需要做的那样,这一切都是从用户认知的层面上开始的。 理解你的用户 想要了解用户的想法、行为、动机和痛点,你需要从他们的角度出发去思考。这能让你与用户的需求和渴望达成一致,然后用这个认知去衡量你的每一个设计方案。了解现实中的的用户不仅磨砺了你的设计直觉还会让你与用户产生共鸣。 每一项新功能的诞生,都得经历"先收集灵感,再勾勒各种主要交互方案的草图直至找到最优解"这样的一个过程。尽管如此我们在设计过程中并不全部依赖于简单的直觉和设计准则,我们通过用户调研的结果和当前使用数据来给我们的设计方案增加丰富性和神韵。 整个应用生态圈拥有无穷无尽的娱乐资源,所以我们必须时刻挑战自己,让我们以保持高竞争力的目的去设计。StumbleUpon的魅力在于它能发现互联网上最好的事物,给用户带来一些高质量且一眼钟情的内容。所以我们试图用我们的设计来试图阐明这种能带来"意外发现"的用户体验。 设定设计目标 我们为我们iOS和Android应用的重设计制定了一下几个设计目标: 建立跨操作平台应用的一致性; 满足我们目前用户的基本需求; 提高整体的用户体验来唤回我们的用户。 在我们进行重设计的2014年,Google推出了他们Material design的设计风格。我们在进行iOS版StumbleUpon应用设计的同时,还时刻关注着这一新生的设计准则,盘算着将这一设计准则运用到我们两个平台的应用设计当中。在Android应用的设计中还加入了Material design的美学和交互原则来建立一个更加有特色和认知度的用户体验。 我们将Google的卡片式设计融入到了许多界面当中,但同时也保留了许多iOS风格的icons和界面样式。在icon的设计上两个操作平台的应用都采用同一套icon,但是根据平台的特性进行了一些微调,比如iOS系统中细描边的中空icon到了Android平台就被调整成了更粗的描边。 当我们重新设计我们的Android应用时,我们进行了视觉审核,并对手机和平板设备对大图片的感受体验进行了记录。对这些平台生态系统的一览,能帮助我们去分辨哪些地方需要改进;决定两个平台之间有哪些不同的地方需要强调出来;让我们得以更加集中设计的精力。 然后着手去规范我们的UI模板来吻合Google的Material设计准则。我们应用的部分设计已经与Material相匹配,同时剩余的仍需要继续推进。我们也从许多案例中辨别到动画能传递一些细微的交互和转场。 专注于这些问题提高了StumbleUpon的用户体验。为了支持material界面元素,我们舍弃了拟物化的装饰(原文是skeuomorphicembellishments)。在StumbleUpon的体验预览时,更厚实的文字风格和满屏的图片使我们的的文字信息和数据信息呈现更加丰富。我们还引进了悬浮按钮来强调主要触控点,解决了之前某些操作可能被用户忽略的问题。融入悬浮卡片的设计到我们的应用当中不仅简化了界面,还建立了一种Android用户熟悉的操作环境。 另外,我们在iOS和Android都采取了统一的卡片风格,使用相同的色板和品牌元素以及核心的Stumbling功能,以此来建立这两个平台上应用的统一性。从静态图稿到原型到最终版本,我们一直坚持使用不同界面元素间的内部演示,替换和转换来支持我们设计进程中至始至终的想法。 使我们的应用在两个主流的移动平台上的特点和核心框架达到平衡,能让应用的视觉和功能结构更加和谐。通过迎合Material和apple design的设计规范,我们建立了高粘性的用户体验,使我们的产品注入了实用、愉悦、有意义的血液。 这两个平台上的重设计都包含了一些风险。一方面来讲,采用单平台特色的操控设计能创造一个流水式的用户体验。但是太过于依赖单个平台的设计框架(比如在Android平板应用的设计中采用iOS的设计框架)会让另外一个平台的用户体验处于零碎状态。我们还有最后一件事情想要完成,那就是通过全面的界面重设计来分离我们目前用户在不同平台上的用户体验,减低学习和探索成本。运用设计的思维来规避那些对我们发展进程存在潜在的危机问题。 测试我们的设计原理 在StumbleUpon,我们有一套敏捷开发流程——用快速迭代的设计和原型来测试我们的解决方案。我们采取A/B test(貌似是一种比对改变设计前和改变设计后的反馈的分析测试)来验证哪一个场景下能产品更好的发挥其功能。所以我们会经常保持设计优化,哪怕初稿已经完成。 我们除了建立了可点击的原型,还赋予了他们一些动画效果来展现不同页面之间的转场效果,增加了交互的动势和节奏。这可以让我们惯例的转场可视化,然后以此从开发者那里获得重要的反馈,作为设计可行性的参考。因为动效的开发通常需要花比较长的时间来实现,往往会放慢将近两周的设计进展。 早早地获得来自工程师、设计师同事、产品经理和商务利益相关者的需求能帮助我们进行创作,提升创意的广度以及推动产品流程顺利进行。时刻提炼创意,能让一个好产品成为一个伟大的产品。