開篇~ 小談品牌識(shí)別與多終端產(chǎn)品的統(tǒng)一及差異性，拋磚，求玉~

最近在多個(gè)平臺(tái)試用了好些apps，從華麗麗的Mac到質(zhì)樸的Windows，從靈動(dòng)的iOS到多樣的Android，各有各無法取代的特性。糾結(jié)且令人抓狂不已的思考是：設(shè)計(jì)一個(gè)產(chǎn)品的多終端時(shí)，應(yīng)該如何統(tǒng)一？

多終端統(tǒng)一性，從視覺說起
對(duì)于多終端的產(chǎn)品而言，好的UI設(shè)計(jì)，不僅需要給與用戶最基本的視覺舒適感，更應(yīng)讓界面在不同的平臺(tái)，承擔(dān)品牌形象識(shí)別的作用。

我們先看個(gè)例子，MIT media lab的視覺識(shí)別，被譽(yù)為flexibility和innovation的識(shí)別系統(tǒng)。

詳情請(qǐng)點(diǎn)擊查看?http://www.thegreeneyl.com/node/294&i=9

麻省理工學(xué)院媒體實(shí)驗(yàn)室一直以來給我們的獨(dú)特感，在logo的設(shè)計(jì)上同樣也體現(xiàn)了出來。logo由三個(gè)不同的形狀和色塊組成，每個(gè)logo代表一個(gè)人的貢獻(xiàn)，由此產(chǎn)生的形狀代表了一個(gè)對(duì)于今天而言，什么是媒體和技術(shù)的不斷重新定義。

在MIT media lab里，每個(gè)教職工和學(xué)生都有一個(gè)屬于自己的logo. 個(gè)人專屬的logo，有了這三個(gè)猶如DNA基因的基本元素，無論怎樣拼接排放，視覺上都?xì)w屬于同一個(gè)系列。既協(xié)調(diào)統(tǒng)一，又不失個(gè)體的差異性。

品牌識(shí)別應(yīng)用在名片上時(shí)是品牌logo+品牌字體+個(gè)人信息，在文件上是品牌logo+品牌字體+文件標(biāo)準(zhǔn)樣式+小色塊裝飾，在室內(nèi)使用則是logo顏色+logo的空間延伸感。整個(gè)品牌識(shí)別系統(tǒng)的應(yīng)用，是保持核心內(nèi)容一致，各司其職，而又互相補(bǔ)充的關(guān)系。

好啦，關(guān)于MIT media lab品牌識(shí)別系統(tǒng)的內(nèi)容已簡(jiǎn)單描述完畢，那么，這個(gè)品牌識(shí)別跟多終端app，又有什么關(guān)系呢？繼續(xù)繼續(xù)往下看吧。

多終端app的品牌延續(xù)

小至名片，大至建筑，在不同的媒介上使用品牌識(shí)別元素，一是保證讓用戶產(chǎn)生明確的視覺延續(xù)和統(tǒng)一的識(shí)別效應(yīng)；二是在相應(yīng)媒介上使用時(shí)，要符合該媒介的特性，并根據(jù)特性定設(shè)計(jì)內(nèi)容。

那～～app的界面元素，在不同的終端上，是不是也應(yīng)該有著與品牌識(shí)別相同的效應(yīng)呢？app的交互方式，在不同的終端上，是不是需要根據(jù)終端特性定交互呢？很明顯，答案是肯定的。

請(qǐng)看以下案例。

Facebook
Facebook在iPhone和Android平臺(tái)上的界面設(shè)計(jì)。有著相同的品牌元素，且符合各自平臺(tái)的用戶操作體驗(yàn)。詳細(xì)看圖中標(biāo)紅的部分。其中展示了在兩個(gè)平臺(tái)上，用戶是如何返回主界面，如何刷新，如何發(fā)起信息的富操作任務(wù)的。顯然，F(xiàn)acebook在設(shè)計(jì)不同平臺(tái)上的app時(shí)，并沒有簡(jiǎn)單粗暴的把iPhone上的體驗(yàn)照搬到Android上，而是進(jìn)行了平臺(tái)針對(duì)性設(shè)計(jì)。

詳情請(qǐng)點(diǎn)擊查看?http://johnnyholland.org/2010/09/android-iphone-app-design-is-it-twice-the-work/

Spotify
繼續(xù)看看另一個(gè)案例，Spotify，一款免費(fèi)的在線音樂播放軟件，看看spotify在多終端上是如何設(shè)計(jì)的。

從上面Spotify多移動(dòng)終端的縮略圖中可以看出，spotify有著屬于自己的app品牌元素。

iPhone??????????? Android??????? Symbian(觸摸屏)? Symbian(非觸摸屏)??? Windows Phone 7

詳情點(diǎn)擊查看?http://www.spotify.com/

從上面Spotify在四大移動(dòng)終端的圖中可以看出，spotify在設(shè)計(jì)中尊重原生系統(tǒng)的交互、運(yùn)用系統(tǒng)本身的設(shè)計(jì)語言、滿足用戶的使用習(xí)慣。對(duì)iOS, Android和Symbian的觸摸屏手機(jī)，保持上方為title，中間為列表形式，下方放內(nèi)容模塊tab的結(jié)構(gòu)；對(duì)Symbian的非觸摸屏手機(jī)，由于用戶主要是通過上下左右和確定等物理鍵來操作app的，整個(gè)內(nèi)容模塊是設(shè)計(jì)成列表模式而非tab結(jié)構(gòu)，以適應(yīng)用戶的操作；在Windows Phone這種具有獨(dú)特的Metro設(shè)計(jì)風(fēng)格和操作習(xí)慣的平臺(tái)，spotify選擇融入WP7的設(shè)計(jì)語言，滿足用戶體驗(yàn)的做法。

這點(diǎn)，跟品牌識(shí)別的協(xié)調(diào)統(tǒng)一且不失個(gè)體的差異的特性相同。

在保持統(tǒng)一的同時(shí)，我們需要最大限度地融入設(shè)備的原生用戶體驗(yàn)，讓用戶感受到我們的app是為他們的設(shè)備而設(shè)計(jì)的，而不是簡(jiǎn)單的去適應(yīng)設(shè)備的屏幕或粗暴的統(tǒng)一各平臺(tái)，讓用戶來適應(yīng)我們的app。

在此，舉個(gè)反例。

Mac系統(tǒng)下app主窗口關(guān)閉后，默認(rèn)后臺(tái)掛起，點(diǎn)擊dock中的icon可重新打開該app的主窗口，點(diǎn)擊dock中icon右鍵菜單里的退出或menu bar上的退出項(xiàng)可退出程序。但某某咪咕音樂for mac版本，雖然試圖往Mac系統(tǒng)的操作習(xí)慣上靠攏，如把關(guān)閉和最小化等按鈕放在了窗口的左上側(cè)，但把Windows下點(diǎn)擊關(guān)閉按鈕，詢問用戶需要最小化還是退出程序的提示放到Mac下，顯然與Mac的體驗(yàn)不相符，讓用戶不知所措，破壞了用戶習(xí)以為常的認(rèn)知和操作，使app變得不倫不類。

內(nèi)容需要適應(yīng)使用場(chǎng)景

講完界面UI和系統(tǒng)原生態(tài)操作的體驗(yàn)問題，我們?cè)儆懻撓?，如何在不同終端定義內(nèi)容結(jié)構(gòu)。

我們先看下，一天中，用戶是怎么使用各種設(shè)備的。

詳情點(diǎn)擊查看http://uxmag.com/articles/framework-for-designing-for-multiple-devices

簡(jiǎn)單描述上圖，早晨，用戶從起床開始就通過智能手機(jī)或電腦快速瀏覽信息；在去公司和回家的路途中，會(huì)使用到智能手機(jī)和平板電腦，其使用取決于出行的方式和方便程度；在工作中主要使用電腦，偶爾會(huì)使用手機(jī)；下班到家后，處于相對(duì)放松的狀態(tài)，會(huì)同時(shí)使用臺(tái)式電腦、平板電腦和智能手機(jī)。簡(jiǎn)而言之，用戶的一天中，會(huì)接觸到多種終端設(shè)備，包括電腦和移動(dòng)設(shè)備。

了解用戶使用設(shè)備的場(chǎng)景很重要，這有助于我們?cè)O(shè)計(jì)除符合用戶使用場(chǎng)景的內(nèi)容。對(duì)于設(shè)計(jì)師而言，我們要根據(jù)用戶的使用場(chǎng)景和設(shè)備，在適當(dāng)?shù)臅r(shí)候給出恰當(dāng)?shù)膬?nèi)容。

我們看個(gè)案例。

Evernote
Evernote是一個(gè)用于記錄筆記的產(chǎn)品，在移動(dòng)設(shè)備上，適用于iOS, Android, Blackberry, Windows Phone 7和WebOS via AppCatalog；在電腦上，適用于Mac OS X, Windows, Safari, Chrome和Firefox。

詳情點(diǎn)擊查看https://www.evernote.com/

我們來看看，在不同的平臺(tái)上，Evernote的內(nèi)容結(jié)構(gòu)有什么不同。

Evernote在PC和Tablet上，屬于精細(xì)化編輯和內(nèi)容型消費(fèi)的app. 在智能手機(jī)上時(shí)，對(duì)app內(nèi)容進(jìn)行了優(yōu)化，一是抓住用戶在移動(dòng)場(chǎng)景下使用evernote的核心功能－－創(chuàng)建新筆記和查看舊筆記；二是根據(jù)智能手機(jī)的特點(diǎn)和移動(dòng)設(shè)備上文字輸入不便等情況，增加了拍照、音頻輸入和標(biāo)記地理位置的功能；三是根據(jù)屏幕尺寸優(yōu)化信息展示的層級(jí)結(jié)構(gòu)，保持evernote一貫以來的簡(jiǎn)單易用，如下圖，展示方式從大界面的并排結(jié)構(gòu)到小界面層級(jí)遞進(jìn)。

多終端app承擔(dān)紐帶及互補(bǔ)關(guān)系

回到MIT media lab的品牌識(shí)別，我們可以看出，在不同的媒介上，品牌識(shí)別的核心不變，但具體展示的方式和內(nèi)容會(huì)有所不同，是各司其職，互相補(bǔ)充的關(guān)系。

同樣，一個(gè)產(chǎn)品，在不同的終端，核心功能不變，但展示方式和架構(gòu)會(huì)有差異。我們需要了解每種設(shè)備的優(yōu)勢(shì)和弱勢(shì)。如，使用性能和便攜性等。不是所有的功能都會(huì)適用于所有的設(shè)備。臺(tái)式電腦用戶和移動(dòng)設(shè)備用戶對(duì)同一個(gè)產(chǎn)品的期望會(huì)有不同。

舉個(gè)例子，思考一個(gè)關(guān)于正在上映電影的影院網(wǎng)站。在臺(tái)式電腦中使用，用戶會(huì)期待一種身臨其境的感覺，包括可以看到預(yù)告片和影片相關(guān)的細(xì)節(jié)描述等。在移動(dòng)端，用戶更關(guān)注的是影片列表，離自己最近的影院地址和放映時(shí)間等。

從用戶對(duì)多終端產(chǎn)品交疊使用的情況看，我們可以認(rèn)為，同一個(gè)產(chǎn)品的多終端app之間，應(yīng)該是互相補(bǔ)充和完善的關(guān)系。

集眾家之智慧，小結(jié)多終端設(shè)計(jì)方法

1. 如果有可能，從移動(dòng)端開始設(shè)計(jì)，因?yàn)樵谝苿?dòng)的場(chǎng)景下有諸多屏幕和功能的約束。這意味著，移動(dòng)設(shè)備上的功能是最核心的。

2. 確保在每種獨(dú)立的設(shè)備上（包括智能手機(jī)，平板電腦和臺(tái)式電腦）都能支持到用戶的目標(biāo)。用戶的首要和次要的目標(biāo)取決于使用每一種設(shè)備的場(chǎng)景，因此用戶的使用目標(biāo)需要根據(jù)每種不同的設(shè)備來定義。在這里，提供一份nielsen所做的關(guān)于多終端產(chǎn)品使用情況的調(diào)研數(shù)據(jù)http://blog.nielsen.com/nielsenwire/?p=27702

3. 在一篇講解跨平臺(tái)設(shè)計(jì)的文章中描述了一種交互設(shè)計(jì)方法。簡(jiǎn)而言之，就是，一、先根據(jù)原生態(tài)系統(tǒng)的交互，設(shè)計(jì)簡(jiǎn)單的線框圖；二、用縮放到適應(yīng)每種屏幕大小的視覺元素，以及所對(duì)應(yīng)平臺(tái)本身的常用基本元素控件等去設(shè)計(jì)精細(xì)的線框界面。這樣有助于在設(shè)計(jì)的早期，創(chuàng)建跨平臺(tái)的統(tǒng)一。而不是設(shè)計(jì)完交互后，坐等著視覺設(shè)計(jì)師去定界面元素和風(fēng)格。

4. 創(chuàng)建和歸檔設(shè)計(jì)風(fēng)格規(guī)范以及模版，以便在出現(xiàn)設(shè)計(jì)不統(tǒng)一時(shí)，給出設(shè)計(jì)樣式的詳細(xì)說明。

5. 以上設(shè)計(jì)方法來自于平時(shí)的收集和累積，把方法運(yùn)用到實(shí)戰(zhàn)項(xiàng)目中，是個(gè)艱巨而漫長(zhǎng)的過程，D3多媒體的設(shè)計(jì)師們努力進(jìn)行中。

文章小結(jié)：

1. 多終端產(chǎn)品，猶如品牌識(shí)別，需要協(xié)調(diào)統(tǒng)一又不失差異；

2. 多終端apps之間的關(guān)系是各司其職，互相補(bǔ)充。

(本文出自騰訊CDC博客:?http://cdc.tencent.com/?p=5491)