網(wǎng)站設(shè)計(jì)之跨平臺(tái)UI適配方法

我們都知道，iOS和Android之間的戰(zhàn)爭(zhēng)沒有贏家。如果一個(gè)產(chǎn)品在一個(gè)平臺(tái)上成功，那么它毫無疑問的會(huì)被移植到另一個(gè)平臺(tái)。有時(shí)候開發(fā)人員甚至不用等待，同時(shí)在兩個(gè)平臺(tái)上發(fā)布應(yīng)用。對(duì)于設(shè)計(jì)師而言，這只意味著一件事情——應(yīng)用的UI和UX需要適配到另一個(gè)平臺(tái)，以確保產(chǎn)品設(shè)計(jì)語言的一致性。

跨平臺(tái)UI適配有三種不同的情景：

1.保持品牌的一致性；

2.符合平臺(tái)特性；

3.尋求兩者之間的平衡。這篇文章通過最熱門的app分析這三種方法，讓你了解什么方法最適合你。

一、品牌導(dǎo)向法

堅(jiān)持品牌，和忽視“父級(jí)規(guī)則”是最快、最簡(jiǎn)單、追劇成益的方法，但是只是設(shè)計(jì)到設(shè)計(jì)UI，而沒有涵蓋軟件工程。自定義的用戶界面是相當(dāng)復(fù)雜的，相對(duì)于用標(biāo)準(zhǔn)空間，開發(fā)工作要付出更多代價(jià)。

此外，選擇品牌作為UI設(shè)計(jì)的優(yōu)先選項(xiàng)是一個(gè)相當(dāng)危險(xiǎn)的方法。我們把這種應(yīng)用叫做“teenagers”（青少年），因?yàn)樗麄儾蛔袷匾?guī)則，有時(shí)候相當(dāng)煩人。他們認(rèn)為自己是與眾不同的，但是實(shí)際上他們和其他在那個(gè)年齡的人一樣。但是也有例外。

首先在app store發(fā)布，然后才在安卓平臺(tái)可用。嚴(yán)格根據(jù)iOS規(guī)范設(shè)計(jì)的iOS版本經(jīng)歷了巨大的成功；在這種情況下，為蘋果的支持者設(shè)計(jì)的典型UI變成了instagram與眾不同的特色。這就解釋了為什么instagram的開發(fā)者沒有花很多的時(shí)間為安卓平臺(tái)打造一套獨(dú)特的UI。即使應(yīng)用程序的整體美學(xué)不符合安卓用戶的期待，instagram在谷歌商店獲得了超過一天百萬的下載量。用戶在第一次打開app尋找導(dǎo)航時(shí)需要一些猜測(cè)。但是另一方面，wire使用了大量微互動(dòng)，讓用戶體驗(yàn)更多樂趣和吸引力。簡(jiǎn)化的聯(lián)系人搜索，好看的色調(diào)，自主選擇背景圖和背景顏色，都有助于構(gòu)建wire的獨(dú)特的世界，而區(qū)別于其他在線溝通應(yīng)用所建立的準(zhǔn)則，例如telegram，whatsapp，viber，和其他典型的溝通應(yīng)用程序。

如果你的應(yīng)用是款平臺(tái)的，并且屬于這種類型，你可能會(huì)在使用品牌導(dǎo)向方法之前三思。例如，F(xiàn)acebook在跨平臺(tái)UI適配設(shè)計(jì)時(shí)使用混合的方案。原因是，facebook的用戶傾向于只使用一種平臺(tái)（iOS或安卓），而不是兩種平臺(tái)都適用。

自定義用戶界面提供了直觀的用戶交互，并在同一時(shí)間吸引人的眼球。

有研究表明，直觀的交互有四個(gè)部分組成：直覺、可語言性、不費(fèi)力、神奇的體驗(yàn)。這些部分的組成，使設(shè)計(jì)師創(chuàng)造無縫的用戶體驗(yàn)，不管他們是否遵循平臺(tái)的規(guī)則指南。畢竟一些自定義組件可以提供更優(yōu)秀的表象或互動(dòng)體驗(yàn)。

同樣值得一提的是，平臺(tái)之間的差異可能是為什么app在一個(gè)平臺(tái)上讓人覺得方便在另一個(gè)平臺(tái)上卻不方便的原因。約會(huì)應(yīng)用HowAboutWe的開發(fā)者認(rèn)為，只有適用自定義的UI，才能真正確保應(yīng)用的風(fēng)格和布局在不同安卓系統(tǒng)版本，制造商，屏幕大小分辨率上的一致。原生的用戶界面組件有一定的局限性，當(dāng)你可以不斷創(chuàng)新，來改善產(chǎn)品的用戶體驗(yàn)。

例如，一個(gè)預(yù)算管理的安卓應(yīng)用，Receipt。有不同尋常的下拉動(dòng)畫，忽略了所有平臺(tái)的規(guī)則指南，但這個(gè)下拉動(dòng)畫確實(shí)吸引了用戶。

“我對(duì)平臺(tái)的規(guī)范感到不滿意，而且我覺得我提出更好的解決方案。一般來說，只有當(dāng)我覺得按我的做法會(huì)有明顯的好處的時(shí)候，我才會(huì)忽略平臺(tái)的規(guī)范，例如向用戶提供坑好的反饋，刪除不必要的步驟，或者防止流程被打斷。大部分是用相關(guān)元素替換彈窗活著不必要的屏幕跳轉(zhuǎn)。”

獨(dú)特又好看的UI，他們會(huì)給用戶留下很好的第一印象。用戶覺得“My Day”這個(gè)倒數(shù)應(yīng)用吸引人的原因之一就是其獨(dú)特的用戶界面，這在兩個(gè)平臺(tái)上都是相同的。

當(dāng)把UI適配到另一個(gè)平臺(tái)，你應(yīng)該把自己放進(jìn)用戶的角色里，不管你使用什么方法。能夠穿件無摩擦的用戶體驗(yàn)同時(shí)保持品牌的一致性是一個(gè)杰出設(shè)計(jì)師的美德。

二、平臺(tái)導(dǎo)向法

與以品牌導(dǎo)向相反，根據(jù)平臺(tái)的特性標(biāo)準(zhǔn)要求要求更多的時(shí)間和金錢（在這里我們只討論UI設(shè)計(jì)）。當(dāng)導(dǎo)入設(shè)計(jì)去另一個(gè)平臺(tái)時(shí)，很多UX和UI元素需要根據(jù)目標(biāo)平臺(tái)規(guī)范重建。

在這種情況下，焦點(diǎn)從品牌認(rèn)同轉(zhuǎn)向了用戶熟悉的平臺(tái)體驗(yàn)，因?yàn)橛脩粢呀?jīng)習(xí)慣平臺(tái)的規(guī)則。在慣用的平臺(tái)上，他們對(duì)設(shè)計(jì)規(guī)則的有直觀把握，你可以把這個(gè)作為你的優(yōu)勢(shì)——Telegram和WhatsApp在這點(diǎn)上都做的很好。

安卓版是按照谷歌material design設(shè)計(jì)規(guī)范來設(shè)計(jì)的。在導(dǎo)航欄有一個(gè)漢堡包菜單圖標(biāo)，里面有app的各個(gè)部分的導(dǎo)航鏈接，在導(dǎo)航欄的右邊有一個(gè)簡(jiǎn)單的搜索按鈕，在屏幕的底部有一個(gè)懸浮按鈕——material design的核心

現(xiàn)在，通過這些示范性的app，討論一下什么情況下堅(jiān)持以平臺(tái)規(guī)范為準(zhǔn)則進(jìn)行設(shè)計(jì)最合理。

什么情況下，我們應(yīng)該遵循平臺(tái)導(dǎo)向法？

高度競(jìng)爭(zhēng)的市場(chǎng)環(huán)境促使你快速迭代用戶快速增長(zhǎng)。

即使你需要時(shí)間重新設(shè)計(jì)應(yīng)用程序的概念，平臺(tái)導(dǎo)向的方式可以使你的開發(fā)人員更快速的實(shí)現(xiàn)你的想法。。一旦一個(gè)程序被啟動(dòng)，用戶會(huì)找到一個(gè)熟悉的交互方式。不僅如此，你不需要等待靈感來臨去設(shè)計(jì)一些特別的東西。你所要做的就是遵守設(shè)計(jì)指南。

蘋果和谷歌推出的一些設(shè)計(jì)趨勢(shì)在用戶中被證明是成功的。

一個(gè)聰明的品牌進(jìn)入谷歌市場(chǎng)，即使你的app是從iOS版本上移植的，也必要改成符合material design規(guī)范以示誠(chéng)意。但是這種流行趨勢(shì)也吸引了蘋果用戶的目光。因此，我們可以看到也有一些iOS上的app體現(xiàn)了material design的一些元素和風(fēng)格。我提這件事只是為了強(qiáng)調(diào)一款app遵循設(shè)計(jì)規(guī)范是十分重要的，即使這意味著偶爾忽視平臺(tái)的具體細(xì)節(jié)。

你的應(yīng)用具有復(fù)雜的功能和用戶界面。

任何移動(dòng)應(yīng)用都應(yīng)該盡可能簡(jiǎn)單容易使用，即使它負(fù)載很多功能。使用平臺(tái)導(dǎo)向法使有很多功能內(nèi)容的app看起來井井有條。舉個(gè)例子，例如Accent Kit，英國(guó)的口音和方言訓(xùn)練設(shè)計(jì)的app，包含多重功能：音頻播放、錄

acebook移動(dòng)應(yīng)用的前生是用html5做，但是這是一個(gè)很大的錯(cuò)誤，作為公司的創(chuàng)始人 Mark Zuckerberg也承認(rèn)。最終，facebook決定致力于提升在iOS、安卓、以及其他平臺(tái)的體驗(yàn)。

一方面，facebook的品牌具有巨大的影響力。另一方面，這是一個(gè)用戶數(shù)量龐大的跨平臺(tái)網(wǎng)絡(luò)。這則是為什么混合法能最和諧的結(jié)合品牌認(rèn)證和多種平臺(tái)。

iOS版和安卓版app看起來差不多，但是也都讓人感覺非常像所屬平臺(tái)的原生應(yīng)用。facebook為了用戶，遵循蘋果和谷歌的設(shè)計(jì)規(guī)范。由于內(nèi)容是facebook app的重要特征，設(shè)計(jì)者決定用簡(jiǎn)約的設(shè)計(jì)風(fēng)格，給內(nèi)容留下更多的空間。

“我們希望我們的app讓我們的用戶感到熟悉，這也意味著要找到他們習(xí)慣于使用它們的通性。我們也想要讓他們感到是在體驗(yàn)同一個(gè)airbnb。

平臺(tái)之間的連貫性——手機(jī)，網(wǎng)絡(luò)，郵件等等——對(duì)我們建立的自信和信任很重要，因此我們決定不僅僅被各平臺(tái)的規(guī)范所驅(qū)動(dòng)。貫穿的、連續(xù)的、同一的體驗(yàn)造就了品牌?！薄狵atie Dill，airbnb的首席體驗(yàn)設(shè)計(jì)師。

第一眼看過去，airbnb的iOS版和安卓版的主要區(qū)別是導(dǎo)航欄的位置：iOS在底部，安卓版在頂部。

什么時(shí)候應(yīng)該使用混合法？

當(dāng)在根據(jù)反饋和評(píng)價(jià)逐漸發(fā)展和完善產(chǎn)品設(shè)計(jì)的時(shí)候。

三、混合法

有了一點(diǎn)獨(dú)特性，我們就能足夠?qū)?yīng)平臺(tái)的細(xì)節(jié)，并且保持品牌價(jià)值?；旌戏▉磉m應(yīng)多種平臺(tái)，是在以上兩種方法之間尋找一個(gè)平衡點(diǎn)，它也是最復(fù)雜的一個(gè)。

在這種情況下，你應(yīng)該考慮兩種用戶：一種是熟悉你的產(chǎn)品的人，另一種是從沒用過產(chǎn)品的人。前者追隨品牌，而后者習(xí)慣了其他平臺(tái)的特性。選擇混合法的設(shè)計(jì)師像外交官一樣，代表了品牌的利益，同時(shí)也旨在促使和用戶的友好關(guān)系。他們需要找出哪些用戶界面元素能使產(chǎn)品脫穎而出，并找到不會(huì)傷害品牌的跨平臺(tái)的具體解決方案。

混合法意味著用戶體驗(yàn)在各個(gè)平臺(tái)上連續(xù)作用，這是一個(gè)基礎(chǔ)的設(shè)計(jì)迭代方法。這意味著你應(yīng)該分析指標(biāo)去了解用戶是如何與你的產(chǎn)品進(jìn)行互動(dòng)的，定期更新改進(jìn)，并保持增長(zhǎng)率。迭代設(shè)計(jì)代表了一個(gè)循環(huán)過程：原型設(shè)計(jì)、測(cè)試、分析和提煉產(chǎn)品每一個(gè)版本。

混合法是在一個(gè)奇特的情況下，讓體驗(yàn)稱為品牌的代言。這是我認(rèn)為的最好的方法去進(jìn)行跨平臺(tái)的完美適配。他能讓你找到平臺(tái)、品牌和用戶的真相。此外，使用這種方法可以改變品牌和平臺(tái)設(shè)計(jì)指南之間的平衡，作為結(jié)果，得到一個(gè)偉大的產(chǎn)品。

混合法的唯一缺點(diǎn)是，不太可能在初創(chuàng)的小團(tuán)隊(duì)中實(shí)施。因?yàn)樾⌒统鮿?chuàng)團(tuán)隊(duì)通常承擔(dān)不起大量的時(shí)間和金錢來提升應(yīng)用的設(shè)計(jì)。此外，我猜在一個(gè)app的第一個(gè)版本，不測(cè)試用戶對(duì)UI特征也可能是一種幸運(yùn)。

四、哪一種設(shè)計(jì)方法更好？

盡管混合法看起來像是最好的方法，我想說的是，文章中提到的方法沒有一個(gè)是完美的。

有時(shí)選擇品牌識(shí)別會(huì)導(dǎo)致特定的用戶體驗(yàn)問題，無論你的app看起來多么美麗。畢竟，用戶決定了一個(gè)菜單是否應(yīng)該滑進(jìn)，刷哪里會(huì)進(jìn)入特定的功能，以及如何返回個(gè)人主頁。

app使用平臺(tái)向?qū)У臅?huì)導(dǎo)致app看起來過于程式化，對(duì)品牌識(shí)別沒有幫助。當(dāng)從另一方面來說，使用平臺(tái)向?qū)гO(shè)計(jì)法最有可能獲得成功，特別是你的app有很多功能，并且以獲得大量用戶為目標(biāo)。

我用來說明混合設(shè)計(jì)法的例子是成功的適配跨平臺(tái)應(yīng)用實(shí)例。這種情況其實(shí)很少見。但是，這不意味著你不應(yīng)該嘗試去獲得相同的結(jié)果。

當(dāng)我們?cè)O(shè)計(jì)app時(shí)，我們應(yīng)該總是記得，我們?yōu)榱爽F(xiàn)實(shí)世界中真實(shí)的人真實(shí)的設(shè)備而做的。事實(shí)上，這并不是說品牌，平臺(tái)，或是你的創(chuàng)意，很重要。唯一重要的用戶。他們并不關(guān)心你用了什么方法去適配UI設(shè)計(jì)。不管我們喜歡與否，所有用戶只是對(duì)整個(gè)公司的體驗(yàn)感興趣——當(dāng)它是積極的時(shí)候，說明這個(gè)公司成功了。

分享標(biāo)題：網(wǎng)站設(shè)計(jì)之跨平臺(tái)UI適配方法
當(dāng)前網(wǎng)址：http://www.muchs.cn/news35/294585.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、云服務(wù)器、自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)