設(shè)計(jì)一款適配多平臺(tái)的移動(dòng)應(yīng)用極具挑戰(zhàn)。怎么知道何時(shí)采用系統(tǒng)原生控件、自定義，或是混合使用？在iOS和Android版StumbleUpon的改版中，用戶(hù)體驗(yàn)團(tuán)隊(duì)采取了混合的方式，調(diào)整了原生的設(shè)計(jì)模式，創(chuàng)造獨(dú)特、簡(jiǎn)潔的界面。最終打造了更快捷、更直觀的體驗(yàn)，促進(jìn)了用戶(hù)的參與。

每個(gè)產(chǎn)品的設(shè)計(jì)流程都該如此，一切源于共鳴。

理解用戶(hù)

要理解用戶(hù)所想所做，什么能刺Ji他們，痛點(diǎn)在哪里，你得從他們的角度考慮。這使你與用戶(hù)的渴望和需求協(xié)調(diào)一致，運(yùn)用你所了解的，來(lái)充實(shí)每一項(xiàng)設(shè)計(jì)決策。向真實(shí)用戶(hù)學(xué)習(xí)有助于磨練直覺(jué)，Ji發(fā)共鳴。

對(duì)于每個(gè)新功能，我們都從收集靈感開(kāi)始，然后畫(huà)出各處關(guān)鍵交互，直到方向正確。我們不僅依靠?jī)?nèi)在本能和設(shè)計(jì)知識(shí)：還通過(guò)用戶(hù)調(diào)研和當(dāng)前數(shù)據(jù)來(lái)豐富并修正我們的決策。

這個(gè)app體系重在無(wú)窮無(wú)盡的娛樂(lè)信息。于是我們不斷自我挑戰(zhàn)，尋找一種能讓我們突顯于眾多競(jìng)品的設(shè)計(jì)方式。StumbleUpon的妙處在于，它揭示了互聯(lián)網(wǎng)最棒的一面，給用戶(hù)帶來(lái)高質(zhì)量?jī)?nèi)容，他們甚至都不知道這就是自己要找的。我們?cè)噲D運(yùn)用設(shè)計(jì)來(lái)詮釋這種意外的發(fā)現(xiàn)。

向真實(shí)用戶(hù)學(xué)習(xí)有助于磨練直覺(jué)，Ji發(fā)共鳴。

定下設(shè)計(jì)目標(biāo)

在iOS和Android的改版中，我們給自己定下幾個(gè)目標(biāo)：

1. 建立跨平臺(tái)的統(tǒng)一性
2. 滿(mǎn)足當(dāng)前的用戶(hù)群
3. 提升整體體驗(yàn)，保持用戶(hù)活躍

2014年，我們進(jìn)行改版設(shè)計(jì)的過(guò)程中，Google提出了material design風(fēng)格。我們?cè)O(shè)計(jì)新版iOS StumbleUpon時(shí)，仔細(xì)研究了material，考慮了一些能在兩個(gè)平臺(tái)通用的方式。設(shè)計(jì)Android版時(shí)，我們也吸收了material的美學(xué)與交互，打造更加優(yōu)雅精良的體驗(yàn)。

我們?cè)诙鄠�(gè)界面中整合了Google的卡片式設(shè)計(jì)，同時(shí)也保持了許多iOS的原生圖標(biāo)和界面樣式。我們決定在兩個(gè)app中使用相似的圖標(biāo)設(shè)計(jì)，但是根據(jù)各自的平臺(tái)調(diào)整了風(fēng)格。在iOS上堅(jiān)持使用輪廓式、中空的圖標(biāo)，在Android上給圖標(biāo)加粗。

當(dāng)我們開(kāi)始改版Android版時(shí)，我們進(jìn)行了一次視覺(jué)評(píng)審，詳細(xì)列舉了手機(jī)和平板的體驗(yàn)，用以理解大方向。全局縱覽一套生態(tài)系統(tǒng)，有助于找出有待提升的部分，突出了平臺(tái)間的差異，讓我們專(zhuān)注于設(shè)計(jì)。

然后，我們開(kāi)始將UI模式標(biāo)準(zhǔn)化，來(lái)配合Google的material標(biāo)準(zhǔn)。App局部已經(jīng)向material標(biāo)準(zhǔn)看齊了，其他還需要調(diào)整。我們還發(fā)現(xiàn)幾個(gè)案例，證明動(dòng)效可以展現(xiàn)細(xì)節(jié)交互和過(guò)渡效果。

關(guān)注這些問(wèn)題，使我們提升了StumbleUpon的核心體驗(yàn)。我們迎合material界面元素，丟棄了擬物的裝飾。更粗的字體和全屏圖片，幫助我們豐富了環(huán)境信息和數(shù)據(jù)，提升了Stumbling的預(yù)覽體驗(yàn)。引入懸浮按鈕，突出了從前易忽略的關(guān)鍵操作項(xiàng)。在整個(gè)app中融入懸浮卡片，不僅簡(jiǎn)化了界面，也為Android用戶(hù)創(chuàng)造了熟悉的環(huán)境。

除了在iOS和Android上都使用了卡片風(fēng)格，我們還通過(guò)相同的配色、品牌元素和Stumbling核心功能創(chuàng)造一致性。在整個(gè)設(shè)計(jì)過(guò)程中，從靜態(tài)圖片到交互原型，再到最終成品，我們都牢記界面元素之間的相互作用、位置和過(guò)渡效果。

在app的特有風(fēng)格和兩大平臺(tái)的核心規(guī)范中尋求平衡，使app的視覺(jué)與功能結(jié)構(gòu)更加協(xié)調(diào)。同時(shí)接受material和Apple的設(shè)計(jì)規(guī)范，讓我們打造了有親和力的體驗(yàn)，實(shí)用、愉悅、有意義。

兩者的改版都暗藏著風(fēng)險(xiǎn)。一方面，只用平臺(tái)特有的控件，可以創(chuàng)造出順暢的體驗(yàn)。但過(guò)于依賴(lài)一個(gè)平臺(tái)的設(shè)計(jì)規(guī)范——比如用iOS標(biāo)準(zhǔn)來(lái)設(shè)計(jì)Android平板app——就使其他平臺(tái)上的體驗(yàn)產(chǎn)生割裂感。我們最不希望的事情，就是在界面上創(chuàng)作過(guò)頭，疏遠(yuǎn)了現(xiàn)有用戶(hù)，讓app既難學(xué)又難用。運(yùn)用設(shè)計(jì)思維來(lái)規(guī)避這些潛在問(wèn)題，對(duì)我們的設(shè)計(jì)流程至關(guān)重要。

StumbleUpon用戶(hù)體驗(yàn)團(tuán)隊(duì)成員：Asher Blumberg, Amy Luo, Michael Spiegel, Jennifer Fleming 和 Matthew Spangenberg

樂(lè)于持續(xù)優(yōu)化創(chuàng)意，能使優(yōu)秀的產(chǎn)品走向偉大。

驗(yàn)證我們的設(shè)計(jì)哲學(xué)

在StumbleUpon，我們有靈活的工作流程——通過(guò)快速迭代的設(shè)計(jì)與原型來(lái)驗(yàn)證我們的方案。對(duì)不同方案進(jìn)行A/B測(cè)試，看哪個(gè)效果最佳。所以我們會(huì)持續(xù)優(yōu)化設(shè)計(jì)，即使在第一版完成之后。

我們不僅制作可點(diǎn)擊的效果圖，也為它們?cè)鎏韯?dòng)畫(huà)效果，來(lái)展示界面之間的過(guò)渡，為交互增加節(jié)奏和動(dòng)感。通過(guò)視覺(jué)化展現(xiàn)這些自定義過(guò)渡效果，我們從開(kāi)發(fā)人員那邊得到了重要反饋，因?yàn)橛行﹦?dòng)畫(huà)的實(shí)現(xiàn)太耗時(shí)，會(huì)拖慢我們?yōu)槠?周的設(shè)計(jì)沖刺。

盡早從工程師、設(shè)計(jì)同僚、產(chǎn)品經(jīng)理和利益相關(guān)者那里得到反饋，有助于建立和提升創(chuàng)意的水準(zhǔn)，推動(dòng)產(chǎn)品前進(jìn)。樂(lè)于持續(xù)優(yōu)化創(chuàng)意，能使優(yōu)秀的產(chǎn)品走向偉大。

原文鏈接

作者信息：
Asher Blumberg, UX Mobile Designer at StumbleUpon
Asher is a multidisciplinary designer obsessed with creating compelling and functional experiences across mobile and web.