如何設(shè)計(jì)一款符合安卓機(jī)交互的app一直是個(gè)令人頭疼的問(wèn)題。去年底Google推出的Material Design似乎令這個(gè)問(wèn)題有所改善

設(shè)計(jì)一個(gè)能適應(yīng)不同平臺(tái)的移動(dòng)應(yīng)用是一項(xiàng)極具挑戰(zhàn)性的任務(wù)。在選擇設(shè)計(jì)風(fēng)格的問(wèn)題上，是選擇保留操作系統(tǒng)原生的控件？還是創(chuàng)造一個(gè)新的模式？抑或采取一個(gè)混合的方式？你會(huì)如何抉擇？StumbleUpon在iOS和Android版應(yīng)用的重設(shè)計(jì)中，采取了一個(gè)混合的方式：采納操作系統(tǒng)原生的設(shè)計(jì)范例來(lái)創(chuàng)造一個(gè)獨(dú)一無(wú)二但卻不乏簡(jiǎn)潔的界面。最終成果使我們產(chǎn)品的體驗(yàn)大大提高了，從而讓用戶(hù)擁有更高的參與度。

就像所有產(chǎn)品設(shè)計(jì)過(guò)程中都需要做的那樣，這一切都是從用戶(hù)認(rèn)知的層面上開(kāi)始的。

理解你的用戶(hù)

想要了解用戶(hù)的想法、行為、動(dòng)機(jī)和痛點(diǎn)，你需要從他們的角度出發(fā)去思考。這能讓你與用戶(hù)的需求和渴望達(dá)成一致，然后用這個(gè)認(rèn)知去衡量你的每一個(gè)設(shè)計(jì)方案。了解現(xiàn)實(shí)中的的用戶(hù)不僅磨礪了你的設(shè)計(jì)直覺(jué)還會(huì)讓你與用戶(hù)產(chǎn)生共鳴。

每一項(xiàng)新功能的誕生，都得經(jīng)歷“先收集靈感，再勾勒各種主要交互方案的草圖直至找到最優(yōu)解”這樣的一個(gè)過(guò)程。盡管如此我們?cè)谠O(shè)計(jì)過(guò)程中并不全部依賴(lài)于簡(jiǎn)單的直覺(jué)和設(shè)計(jì)準(zhǔn)則，我們通過(guò)用戶(hù)調(diào)研的結(jié)果和當(dāng)前使用數(shù)據(jù)來(lái)給我們的設(shè)計(jì)方案增加豐富性和神韻。

整個(gè)應(yīng)用生態(tài)圈擁有無(wú)窮無(wú)盡的娛樂(lè)資源，所以我們必須時(shí)刻挑戰(zhàn)自己，讓我們以保持高競(jìng)爭(zhēng)力的目的去設(shè)計(jì)。StumbleUpon的魅力在于它能發(fā)現(xiàn)互聯(lián)網(wǎng)上最好的事物，給用戶(hù)帶來(lái)一些高質(zhì)量且一眼鐘情的內(nèi)容。所以我們?cè)噲D用我們的設(shè)計(jì)來(lái)試圖闡明這種能帶來(lái)“意外發(fā)現(xiàn)”的用戶(hù)體驗(yàn)。

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

我們?yōu)槲覀僫OS和Android應(yīng)用的重設(shè)計(jì)制定了一下幾個(gè)設(shè)計(jì)目標(biāo)：

1. 建立跨操作平臺(tái)應(yīng)用的一致性；
2. 滿(mǎn)足我們目前用戶(hù)的基本需求；
3. 提高整體的用戶(hù)體驗(yàn)來(lái)喚回我們的用戶(hù)。

在我們進(jìn)行重設(shè)計(jì)的2014年，Google推出了他們Material design的設(shè)計(jì)風(fēng)格。我們?cè)谶M(jìn)行iOS版StumbleUpon應(yīng)用設(shè)計(jì)的同時(shí)，還時(shí)刻關(guān)注著這一新生的設(shè)計(jì)準(zhǔn)則，盤(pán)算著將這一設(shè)計(jì)準(zhǔn)則運(yùn)用到我們兩個(gè)平臺(tái)的應(yīng)用設(shè)計(jì)當(dāng)中。在Android應(yīng)用的設(shè)計(jì)中還加入了Material design的美學(xué)和交互原則來(lái)建立一個(gè)更加有特色和認(rèn)知度的用戶(hù)體驗(yàn)。

我們將Google的卡片式設(shè)計(jì)融入到了許多界面當(dāng)中，但同時(shí)也保留了許多iOS風(fēng)格的icons和界面樣式。在icon的設(shè)計(jì)上兩個(gè)操作平臺(tái)的應(yīng)用都采用同一套icon，但是根據(jù)平臺(tái)的特性進(jìn)行了一些微調(diào)，比如iOS系統(tǒng)中細(xì)描邊的中空icon到了Android平臺(tái)就被調(diào)整成了更粗的描邊。

當(dāng)我們重新設(shè)計(jì)我們的Android應(yīng)用時(shí)，我們進(jìn)行了視覺(jué)審核，并對(duì)手機(jī)和平板設(shè)備對(duì)大圖片的感受體驗(yàn)進(jìn)行了記錄。對(duì)這些平臺(tái)生態(tài)系統(tǒng)的一覽，能幫助我們?nèi)シ直婺男┑胤叫枰倪M(jìn)；決定兩個(gè)平臺(tái)之間有哪些不同的地方需要強(qiáng)調(diào)出來(lái)；讓我們得以更加集中設(shè)計(jì)的精力。

然后著手去規(guī)范我們的UI模板來(lái)吻合Google的Material設(shè)計(jì)準(zhǔn)則。我們應(yīng)用的部分設(shè)計(jì)已經(jīng)與Material相匹配，同時(shí)剩余的仍需要繼續(xù)推進(jìn)。我們也從許多案例中辨別到動(dòng)畫(huà)能傳遞一些細(xì)微的交互和轉(zhuǎn)場(chǎng)。

專(zhuān)注于這些問(wèn)題提高了StumbleUpon的用戶(hù)體驗(yàn)。為了支持material界面元素，我們舍棄了擬物化的裝飾（原文是skeuomorphic?embellishments）。在StumbleUpon的體驗(yàn)預(yù)覽時(shí)，更厚實(shí)的文字風(fēng)格和滿(mǎn)屏的圖片使我們的的文字信息和數(shù)據(jù)信息呈現(xiàn)更加豐富。我們還引進(jìn)了懸浮按鈕來(lái)強(qiáng)調(diào)主要觸控點(diǎn)，解決了之前某些操作可能被用戶(hù)忽略的問(wèn)題。融入懸浮卡片的設(shè)計(jì)到我們的應(yīng)用當(dāng)中不僅簡(jiǎn)化了界面，還建立了一種Android用戶(hù)熟悉的操作環(huán)境。

另外，我們?cè)趇OS和Android都采取了統(tǒng)一的卡片風(fēng)格，使用相同的色板和品牌元素以及核心的Stumbling功能，以此來(lái)建立這兩個(gè)平臺(tái)上應(yīng)用的統(tǒng)一性。從靜態(tài)圖稿到原型到最終版本，我們一直堅(jiān)持使用不同界面元素間的內(nèi)部演示，替換和轉(zhuǎn)換來(lái)支持我們?cè)O(shè)計(jì)進(jìn)程中至始至終的想法。

使我們的應(yīng)用在兩個(gè)主流的移動(dòng)平臺(tái)上的特點(diǎn)和核心框架達(dá)到平衡，能讓?xiě)?yīng)用的視覺(jué)和功能結(jié)構(gòu)更加和諧。通過(guò)迎合Material和apple design的設(shè)計(jì)規(guī)范，我們建立了高粘性的用戶(hù)體驗(yàn)，使我們的產(chǎn)品注入了實(shí)用、愉悅、有意義的血液。

這兩個(gè)平臺(tái)上的重設(shè)計(jì)都包含了一些風(fēng)險(xiǎn)。一方面來(lái)講，采用單平臺(tái)特色的操控設(shè)計(jì)能創(chuàng)造一個(gè)流水式的用戶(hù)體驗(yàn)。但是太過(guò)于依賴(lài)單個(gè)平臺(tái)的設(shè)計(jì)框架（比如在Android平板應(yīng)用的設(shè)計(jì)中采用iOS的設(shè)計(jì)框架）會(huì)讓另外一個(gè)平臺(tái)的用戶(hù)體驗(yàn)處于零碎狀態(tài)。我們還有最后一件事情想要完成，那就是通過(guò)全面的界面重設(shè)計(jì)來(lái)分離我們目前用戶(hù)在不同平臺(tái)上的用戶(hù)體驗(yàn)，減低學(xué)習(xí)和探索成本。運(yùn)用設(shè)計(jì)的思維來(lái)規(guī)避那些對(duì)我們發(fā)展進(jìn)程存在潛在的危機(jī)問(wèn)題。

測(cè)試我們的設(shè)計(jì)原理

在StumbleUpon，我們有一套敏捷開(kāi)發(fā)流程——用快速迭代的設(shè)計(jì)和原型來(lái)測(cè)試我們的解決方案。我們采取A/B test（貌似是一種比對(duì)改變?cè)O(shè)計(jì)前和改變?cè)O(shè)計(jì)后的反饋的分析測(cè)試）來(lái)驗(yàn)證哪一個(gè)場(chǎng)景下能產(chǎn)品更好的發(fā)揮其功能。所以我們會(huì)經(jīng)常保持設(shè)計(jì)優(yōu)化，哪怕初稿已經(jīng)完成。

我們除了建立了可點(diǎn)擊的原型，還賦予了他們一些動(dòng)畫(huà)效果來(lái)展現(xiàn)不同頁(yè)面之間的轉(zhuǎn)場(chǎng)效果，增加了交互的動(dòng)勢(shì)和節(jié)奏。這可以讓我們慣例的轉(zhuǎn)場(chǎng)可視化，然后以此從開(kāi)發(fā)者那里獲得重要的反饋，作為設(shè)計(jì)可行性的參考。因?yàn)閯?dòng)效的開(kāi)發(fā)通常需要花比較長(zhǎng)的時(shí)間來(lái)實(shí)現(xiàn)，往往會(huì)放慢將近兩周的設(shè)計(jì)進(jìn)展。

早早地獲得來(lái)自工程師、設(shè)計(jì)師同事、產(chǎn)品經(jīng)理和商務(wù)利益相關(guān)者的需求能幫助我們進(jìn)行創(chuàng)作，提升創(chuàng)意的廣度以及推動(dòng)產(chǎn)品流程順利進(jìn)行。時(shí)刻提煉創(chuàng)意，能讓一個(gè)好產(chǎn)品成為一個(gè)偉大的產(chǎn)品。

作者：Hult

來(lái)源：UI中國(guó)

原文地址：http://www.ui.cn/detail/51351.html