設計和而不同的跨平臺App

釋懷發表於2015-05-25

設計一個能適應不同平臺的移動應用是一項極具挑戰性的任務。在選擇設計風格的問題上,是選擇保留作業系統原生的控制元件?還是創造一個新的模式?抑或採取一個混合的方式?你會如何抉擇?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介面元素,我們捨棄了擬物化的裝飾(原文是skeuomorphic embellishments)。在StumbleUpon的體驗預覽時,更厚實的文字風格和滿屏的圖片使我們的的文字資訊和資料資訊呈現更加豐富。我們還引進了懸浮按鈕來強調主要觸控點,解決了之前某些操作可能被使用者忽略的問題。融入懸浮卡片的設計到我們的應用當中不僅簡化了介面,還建立了一種Android使用者熟悉的操作環境。



另外,我們在iOS和Android都採取了統一的卡片風格,使用相同的色板和品牌元素以及核心的Stumbling功能,以此來建立這兩個平臺上應用的統一性。從靜態圖稿到原型到最終版本,我們一直堅持使用不同介面元素間的內部演示,替換和轉換來支援我們設計程式中至始至終的想法。

使我們的應用在兩個主流的移動平臺上的特點和核心框架達到平衡,能讓應用的視覺和功能結構更加和諧。通過迎合Material和apple design的設計規範,我們建立了高粘性的使用者體驗,使我們的產品注入了實用、愉悅、有意義的血液。

這兩個平臺上的重設計都包含了一些風險。一方面來講,採用單平臺特色的操控設計能創造一個流水式的使用者體驗。但是太過於依賴單個平臺的設計框架(比如在Android平板應用的設計中採用iOS的設計框架)會讓另外一個平臺的使用者體驗處於零碎狀態。我們還有最後一件事情想要完成,那就是通過全面的介面重設計來分離我們目前使用者在不同平臺上的使用者體驗,減低學習和探索成本。運用設計的思維來規避那些對我們發展程式存在潛在的危機問題。

測試我們的設計原理

在StumbleUpon,我們有一套敏捷開發流程——用快速迭代的設計和原型來測試我們的解決方案。我們採取A/B test(貌似是一種比對改變設計前和改變設計後的反饋的分析測試)來驗證哪一個場景下能產品更好的發揮其功能。所以我們會經常保持設計優化,哪怕初稿已經完成。

我們除了建立了可點選的原型,還賦予了他們一些動畫效果來展現不同頁面之間的轉場效果,增加了互動的動勢和節奏。這可以讓我們慣例的轉場視覺化,然後以此從開發者那裡獲得重要的反饋,作為設計可行性的參考。因為動效的開發通常需要花比較長的時間來實現,往往會放慢將近兩週的設計進展。

早早地獲得來自工程師、設計師同事、產品經理和商務利益相關者的需求能幫助我們進行創作,提升創意的廣度以及推動產品流程順利進行。時刻提煉創意,能讓一個好產品成為一個偉大的產品。
評論(1)

相關文章