设计一款适配多平台的响应式网站设计极具挑衅。怎么晓得何时采取体系原生控件、自定义，或是混杂应用？在iOS跟 Android版StumbleUpon的改版中，用户体验团队采用了混杂的方法，调剂了原生的设计模式，发明奇特、简练的界面。终极打造了更快捷、更直观的体验，增进了用户的参加。

每个产品的设计流程都该如此，所有源于共识。

理解用户

要理解用户所想所做，什么能刺激他们，痛点在哪里，你得从他们的角度斟酌。这使你与用户的盼望跟 需要和谐一致，应用你所了解的，来空虚每一项设计决议。向实在用户学习有助于磨难直觉，激发共识。

对每个新功能，咱们都从收集灵感开端，而后画出各处关键交互，直到方向准确。咱们不仅依附内在本能跟 设计常识：还通过用户调研跟 当前数据来丰盛并修改咱们的决议。

这个响应式网站设计系统重在无限无尽的娱乐信息。于是咱们一直自我挑衅，寻找一种能让咱们突显于众多竞品的设计方法。StumbleUpon的妙处在于，它揭示了互联网最棒的一面，给用户带来高品质内容，他们甚至都不晓得这就是本人要找的。咱们试图应用设计来诠释这种意外的发明。

向实在用户学习有助于磨难直觉，激发共识。

定下设计目的

在iOS跟 Android的改版中，咱们给本人定下多少个目的：

1、树立跨平台的同一性

2、满意当前的用户群

3、晋升整体体验，坚持用户活泼

2014年，咱们进行网站改版设计的进程中，Google提出了material design作风。咱们设计新版i响应式网站设计时，细心研讨了material，斟酌了一些能在两个平台通用的方法。设计响应式网站设计时，咱们也接收了material的美学与交互，打造更加优雅优良的体验。

咱们在多个界面中整合了Google的卡片式设计，同时也坚持了很多iOS的原生图标跟 界面款式。咱们决议在两个app中应用类似的图标设计，然而依据各自的平台调剂了作风。在iOS上保持应用轮廓式、中空的图标，在响应式网站设计上给图标加粗。

当咱们开端改版响应式网站设计版时，咱们进行了一次视觉评审，具体列举了手机跟 平板的体验，用以理解慷慨向。全局纵览一套生态体系，有助于找出有待晋升的局部，凸起了平台间的差别，让咱们专一于设计。

而后，咱们开端将UI模式尺度化，来配合Google的material尺度。响应式网站设计部分已经向material尺度看齐了，其余还须要调剂。咱们还发明多少个案例，证实动效能够展示细节交互跟 过渡后果。

关注这些问题，使咱们晋升了响应式网站设计的中心体验。咱们逢迎material界面元素，抛弃了拟物的装潢。更粗的字体跟 全屏图片，辅助咱们丰盛了环境信息跟 数据，晋升了Stumbling的预览体验。引入悬浮按钮，凸起了从前易疏忽的关键操作项。在全部app中融入悬浮卡片，不仅简化了界面，也为Android用户发明了熟习的环境。

除了在响应式网站设计都应用了卡片作风，咱们还通过雷同的配色、品牌元素跟 Stumbling中心功能发明一致性。在全部设计进程中，从静态图片到交互原型，再到终极成品，咱们都牢记界面元素之间的彼此作用、地位跟 过渡后果。

在响应式网站设计的特有作风跟 两大平台的中心标准中追求均衡，使响应式网站设计的视觉与功能构造更加和谐。同时接收material跟 Apple的设计标准，让咱们打造了有亲跟 力的体验，适用、愉悦、有意思。

两者的改版都隐藏着危险。一方面，只用平台特有的控件，能够发明出顺畅的体验。但过于依附一个平台的设计标准——比方用iOS尺度来设计Android平板app——就使其余平台上的体验发生割裂感。咱们最不盼望的事件，就是在界面上创作过火，疏远了现有用户，让app既难学又难用。应用设计思维来躲避这些潜在问题，对咱们的设计流程至关主要。

验证咱们的设计哲学

在响应式网站设计，咱们有机动的工作流程——通过疾速迭代的设计与原型来验证咱们的计划。对不同计划进行A/B测试，看哪个后果最佳。所以咱们会连续优化设计，即便在初版实现之后。

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

尽早从工程师、设计同寅、产品经理跟 好处相干者那里得到反馈，有助于树立跟 晋升创意的水准，推进产品前进。乐于连续优化创意，能使优良的产品走向巨大。