設計一款適配多平臺的響應式網站設計極具挑戰。怎么知道何時采用系統原生控件、自定義，或是混合使用？在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周的設計沖刺。

盡早從工程師、設計同僚、產品經理和利益相關者那里得到反饋，有助于建立和提升創意的水準，推動產品前進。樂于持續優化創意，能使優秀的產品走向偉大。