小談品牌識別與多終端產(chǎn)品的統(tǒng)一及差異性
開篇~ 小談品牌識別與多終端產(chǎn)品的統(tǒng)一及差異性,拋磚,求玉~
最近在多個平臺試用了好些apps,從華麗麗的Mac到質(zhì)樸的Windows,從靈動的iOS到多樣的Android,各有各無法取代的特性。糾結(jié)且令人抓狂不已的思考是:設(shè)計一個產(chǎn)品的多終端時,應(yīng)該如何統(tǒng)一?
多終端統(tǒng)一性,從視覺說起
對于多終端的產(chǎn)品而言,好的UI設(shè)計,不僅需要給與用戶最基本的視覺舒適感,更應(yīng)讓界面在不同的平臺,承擔(dān)品牌形象識別的作用。
我們先看個例子,MIT media lab的視覺識別,被譽為flexibility和innovation的識別系統(tǒng)。
詳情請點擊查看?http://www.thegreeneyl.com/node/294&i=9
麻省理工學(xué)院媒體實驗室一直以來給我們的獨特感,在logo的設(shè)計上同樣也體現(xiàn)了出來。logo由三個不同的形狀和色塊組成,每個logo代表一個人的貢獻,由此產(chǎn)生的形狀代表了一個對于今天而言,什么是媒體和技術(shù)的不斷重新定義。
在MIT media lab里,每個教職工和學(xué)生都有一個屬于自己的logo. 個人專屬的logo,有了這三個猶如DNA基因的基本元素,無論怎樣拼接排放,視覺上都歸屬于同一個系列。既協(xié)調(diào)統(tǒng)一,又不失個體的差異性。
品牌識別應(yīng)用在名片上時是品牌logo+品牌字體+個人信息,在文件上是品牌logo+品牌字體+文件標準樣式+小色塊裝飾,在室內(nèi)使用則是logo顏色+logo的空間延伸感。整個品牌識別系統(tǒng)的應(yīng)用,是保持核心內(nèi)容一致,各司其職,而又互相補充的關(guān)系。
好啦,關(guān)于MIT media lab品牌識別系統(tǒng)的內(nèi)容已簡單描述完畢,那么,這個品牌識別跟多終端app,又有什么關(guān)系呢?繼續(xù)繼續(xù)往下看吧。
多終端app的品牌延續(xù)
小至名片,大至建筑,在不同的媒介上使用品牌識別元素,一是保證讓用戶產(chǎn)生明確的視覺延續(xù)和統(tǒng)一的識別效應(yīng);二是在相應(yīng)媒介上使用時,要符合該媒介的特性,并根據(jù)特性定設(shè)計內(nèi)容。
那~~app的界面元素,在不同的終端上,是不是也應(yīng)該有著與品牌識別相同的效應(yīng)呢?app的交互方式,在不同的終端上,是不是需要根據(jù)終端特性定交互呢?很明顯,答案是肯定的。
請看以下案例。
Facebook
Facebook在iPhone和Android平臺上的界面設(shè)計。有著相同的品牌元素,且符合各自平臺的用戶操作體驗。詳細看圖中標紅的部分。其中展示了在兩個平臺上,用戶是如何返回主界面,如何刷新,如何發(fā)起信息的富操作任務(wù)的。顯然,F(xiàn)acebook在設(shè)計不同平臺上的app時,并沒有簡單粗暴的把iPhone上的體驗照搬到Android上,而是進行了平臺針對性設(shè)計。
詳情請點擊查看?http://johnnyholland.org/2010/09/android-iphone-app-design-is-it-twice-the-work/
Spotify
繼續(xù)看看另一個案例,Spotify,一款免費的在線音樂播放軟件,看看spotify在多終端上是如何設(shè)計的。
從上面Spotify多移動終端的縮略圖中可以看出,spotify有著屬于自己的app品牌元素。
iPhone??????????? Android??????? Symbian(觸摸屏)? Symbian(非觸摸屏)??? Windows Phone 7
詳情點擊查看?http://www.spotify.com/
從上面Spotify在四大移動終端的圖中可以看出,spotify在設(shè)計中尊重原生系統(tǒng)的交互、運用系統(tǒng)本身的設(shè)計語言、滿足用戶的使用習(xí)慣。對iOS, Android和Symbian的觸摸屏手機,保持上方為title,中間為列表形式,下方放內(nèi)容模塊tab的結(jié)構(gòu);對Symbian的非觸摸屏手機,由于用戶主要是通過上下左右和確定等物理鍵來操作app的,整個內(nèi)容模塊是設(shè)計成列表模式而非tab結(jié)構(gòu),以適應(yīng)用戶的操作;在Windows Phone這種具有獨特的Metro設(shè)計風(fēng)格和操作習(xí)慣的平臺,spotify選擇融入WP7的設(shè)計語言,滿足用戶體驗的做法。
這點,跟品牌識別的協(xié)調(diào)統(tǒng)一且不失個體的差異的特性相同。
在保持統(tǒng)一的同時,我們需要最大限度地融入設(shè)備的原生用戶體驗,讓用戶感受到我們的app是為他們的設(shè)備而設(shè)計的,而不是簡單的去適應(yīng)設(shè)備的屏幕或粗暴的統(tǒng)一各平臺,讓用戶來適應(yīng)我們的app。
在此,舉個反例。
Mac系統(tǒng)下app主窗口關(guān)閉后,默認后臺掛起,點擊dock中的icon可重新打開該app的主窗口,點擊dock中icon右鍵菜單里的退出或menu bar上的退出項可退出程序。但某某咪咕音樂for mac版本,雖然試圖往Mac系統(tǒng)的操作習(xí)慣上靠攏,如把關(guān)閉和最小化等按鈕放在了窗口的左上側(cè),但把Windows下點擊關(guān)閉按鈕,詢問用戶需要最小化還是退出程序的提示放到Mac下,顯然與Mac的體驗不相符,讓用戶不知所措,破壞了用戶習(xí)以為常的認知和操作,使app變得不倫不類。
內(nèi)容需要適應(yīng)使用場景
講完界面UI和系統(tǒng)原生態(tài)操作的體驗問題,我們再討論下,如何在不同終端定義內(nèi)容結(jié)構(gòu)。
我們先看下,一天中,用戶是怎么使用各種設(shè)備的。
詳情點擊查看http://uxmag.com/articles/framework-for-designing-for-multiple-devices
簡單描述上圖,早晨,用戶從起床開始就通過智能手機或電腦快速瀏覽信息;在去公司和回家的路途中,會使用到智能手機和平板電腦,其使用取決于出行的方式和方便程度;在工作中主要使用電腦,偶爾會使用手機;下班到家后,處于相對放松的狀態(tài),會同時使用臺式電腦、平板電腦和智能手機。簡而言之,用戶的一天中,會接觸到多種終端設(shè)備,包括電腦和移動設(shè)備。
了解用戶使用設(shè)備的場景很重要,這有助于我們設(shè)計除符合用戶使用場景的內(nèi)容。對于設(shè)計師而言,我們要根據(jù)用戶的使用場景和設(shè)備,在適當?shù)臅r候給出恰當?shù)膬?nèi)容。
我們看個案例。
Evernote
Evernote是一個用于記錄筆記的產(chǎn)品,在移動設(shè)備上,適用于iOS, Android, Blackberry, Windows Phone 7和WebOS via AppCatalog;在電腦上,適用于Mac OS X, Windows, Safari, Chrome和Firefox。
詳情點擊查看https://www.evernote.com/
我們來看看,在不同的平臺上,Evernote的內(nèi)容結(jié)構(gòu)有什么不同。
Evernote在PC和Tablet上,屬于精細化編輯和內(nèi)容型消費的app. 在智能手機上時,對app內(nèi)容進行了優(yōu)化,一是抓住用戶在移動場景下使用evernote的核心功能--創(chuàng)建新筆記和查看舊筆記;二是根據(jù)智能手機的特點和移動設(shè)備上文字輸入不便等情況,增加了拍照、音頻輸入和標記地理位置的功能;三是根據(jù)屏幕尺寸優(yōu)化信息展示的層級結(jié)構(gòu),保持evernote一貫以來的簡單易用,如下圖,展示方式從大界面的并排結(jié)構(gòu)到小界面層級遞進。
多終端app承擔(dān)紐帶及互補關(guān)系
回到MIT media lab的品牌識別,我們可以看出,在不同的媒介上,品牌識別的核心不變,但具體展示的方式和內(nèi)容會有所不同,是各司其職,互相補充的關(guān)系。
同樣,一個產(chǎn)品,在不同的終端,核心功能不變,但展示方式和架構(gòu)會有差異。我們需要了解每種設(shè)備的優(yōu)勢和弱勢。如,使用性能和便攜性等。不是所有的功能都會適用于所有的設(shè)備。臺式電腦用戶和移動設(shè)備用戶對同一個產(chǎn)品的期望會有不同。
舉個例子,思考一個關(guān)于正在上映電影的影院網(wǎng)站。在臺式電腦中使用,用戶會期待一種身臨其境的感覺,包括可以看到預(yù)告片和影片相關(guān)的細節(jié)描述等。在移動端,用戶更關(guān)注的是影片列表,離自己最近的影院地址和放映時間等。
從用戶對多終端產(chǎn)品交疊使用的情況看,我們可以認為,同一個產(chǎn)品的多終端app之間,應(yīng)該是互相補充和完善的關(guān)系。
集眾家之智慧,小結(jié)多終端設(shè)計方法
1. 如果有可能,從移動端開始設(shè)計,因為在移動的場景下有諸多屏幕和功能的約束。這意味著,移動設(shè)備上的功能是最核心的。
2. 確保在每種獨立的設(shè)備上(包括智能手機,平板電腦和臺式電腦)都能支持到用戶的目標。用戶的首要和次要的目標取決于使用每一種設(shè)備的場景,因此用戶的使用目標需要根據(jù)每種不同的設(shè)備來定義。在這里,提供一份nielsen所做的關(guān)于多終端產(chǎn)品使用情況的調(diào)研數(shù)據(jù)http://blog.nielsen.com/nielsenwire/?p=27702
3. 在一篇講解跨平臺設(shè)計的文章中描述了一種交互設(shè)計方法。簡而言之,就是,一、先根據(jù)原生態(tài)系統(tǒng)的交互,設(shè)計簡單的線框圖;二、用縮放到適應(yīng)每種屏幕大小的視覺元素,以及所對應(yīng)平臺本身的常用基本元素控件等去設(shè)計精細的線框界面。這樣有助于在設(shè)計的早期,創(chuàng)建跨平臺的統(tǒng)一。而不是設(shè)計完交互后,坐等著視覺設(shè)計師去定界面元素和風(fēng)格。
4. 創(chuàng)建和歸檔設(shè)計風(fēng)格規(guī)范以及模版,以便在出現(xiàn)設(shè)計不統(tǒng)一時,給出設(shè)計樣式的詳細說明。
5. 以上設(shè)計方法來自于平時的收集和累積,把方法運用到實戰(zhàn)項目中,是個艱巨而漫長的過程,D3多媒體的設(shè)計師們努力進行中。
文章小結(jié):
1. 多終端產(chǎn)品,猶如品牌識別,需要協(xié)調(diào)統(tǒng)一又不失差異;
2. 多終端apps之間的關(guān)系是各司其職,互相補充。
(本文出自騰訊CDC博客:?http://cdc.tencent.com/?p=5491)
- 目前還沒評論,等你發(fā)揮!