小談品牌識別與多終端產品的統一及差異性

　　開篇~ 小談品牌識別與多終端產品的統一及差異性，拋磚，求玉~

　　最近在多個平台試用了好些apps，從華麗麗的Mac到質樸的Windows，從靈動的iOS到多樣的Android，各有各無法取代的特性。糾結且令人抓狂不已的思考是：設計一個產品的多終端時，應該如何統一?

　　多終端統一性，從視覺說起

　　對於多終端的產品而言，好的UI設計，不僅需要給與用戶最基本的視覺舒適感，更應讓界面在不同的平台，承擔品牌形象識別的作用。

　　我們先看個例子，MIT media lab的視覺識別，被譽為flexibility和innovation的識別系統。

　　詳情請點擊查看 http://www.thegreeneyl.com/node/294&i=9

　　麻省理工學院媒體實驗室一直以來給我們的獨特感，在logo的設計上同樣也體現了出來。logo由三個不同的形狀和色塊組成，每個logo代表一個人的貢獻，由此產生的形狀代表了一個對於今天而言，什麼是媒體和技術的不斷重新定義。

　　在MIT media lab裡，每個教職工和學生都有一個屬於自己的logo. 個人專屬的logo，有了這三個猶如DNA基因的基本元素，無論怎樣拼接排放，視覺上都歸屬於同一個系列。既協調統一，又不失個體的差異性。

　　品牌識別應用在名片上時是品牌logo+品牌字體+個人信息，在文件上是品牌logo+品牌字體+文件標准樣式+小色塊裝飾，在室內使用則是logo顏色+logo的空間延伸感。整個品牌識別系統的應用，是保持核心內容一致，各司其職，而又互相補充的關系。

　　好啦，關於MIT media lab品牌識別系統的內容已簡單描述完畢，那麼，這個品牌識別跟多終端app，又有什麼關系呢?繼續繼續往下看吧。

　　多終端app的品牌延續

　　小至名片，大至建築，在不同的媒介上使用品牌識別元素，一是保證讓用戶產生明確的視覺延續和統一的識別效應;二是在相應媒介上使用時，要符合該媒介的特性，並根據特性定設計內容。

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

　　請看以下案例。

　　Facebook

　　Facebook在iPhone和Android平台上的界面設計。有著相同的品牌元素，且符合各自平台的用戶操作體驗。詳細看圖中標紅的部分。其中展示了在兩個平台上，用戶是如何返回主界面，如何刷新，如何發起信息的富操作任務的。顯然，Facebook在設計不同平台上的app時，並沒有簡單粗暴的把iPhone上的體驗照搬到Android上，而是進行了平台針對性設計。

　　詳情請點擊查看 http://johnnyholland.org/2010/09/android-iphone-app-design-is-it-twice-the-work/

　　Spotify

　　繼續看看另一個案例，Spotify，一款免費的在線音樂播放軟件，看看spotify在多終端上是如何設計的。

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

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

　　詳情點擊查看 http://www.spotify.com/

　　從上面Spotify在四大移動終端的圖中可以看出，spotify在設計中尊重原生系統的交互、運用系統本身的設計語言、滿足用戶的使用習慣。對 iOS， Android和Symbian的觸摸屏手機，保持上方為title，中間為列表形式，下方放內容模塊tab的結構;對Symbian的非觸摸屏手機，由於用戶主要是通過上下左右和確定等物理鍵來操作app的，整個內容模塊是設計成列表模式而非tab結構，以適應用戶的操作;在Windows Phone這種具有獨特的Metro設計風格和操作習慣的平台，spotify選擇融入WP7的設計語言，滿足用戶體驗的做法。

　　這點，跟品牌識別的協調統一且不失個體的差異的特性相同。

　　在保持統一的同時，我們需要最大限度地融入設備的原生用戶體驗，讓用戶感受到我們的app是為他們的設備而設計的，而不是簡單的去適應設備的屏幕或粗暴的統一各平台，讓用戶來適應我們的app。

　　在此，舉個反例。

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

　　內容需要適應使用場景

　　講完界面UI和系統原生態操作的體驗問題，我們再討論下，如何在不同終端定義內容結構。

　　我們先看下，一天中，用戶是怎麼使用各種設備的。

　　詳情點擊查看http://uxmag.com/articles/framework-for-designing-for-multiple-devices

　　簡單描述上圖，早晨，用戶從起床開始就通過智能手機或電腦快速浏覽信息;在去公司和回家的路途中，會使用到智能手機和平板電腦，其使用取決於出行的方式和方便程度;在工作中主要使用電腦，偶爾會使用手機;下班到家後，處於相對放松的狀態，會同時使用台式電腦、平板電腦和智能手機。簡而言之，用戶的一天中，會接觸到多種終端設備，包括電腦和移動設備。

　　了解用戶使用設備的場景很重要，這有助於我們設計除符合用戶使用場景的內容。對於設計師而言，我們要根據用戶的使用場景和設備，在適當的時候給出恰當的內容。

　　我們看個案例。

　　Evernote

　　Evernote是一個用於記錄筆記的產品，在移動設備上，適用於iOS， Android， Blackberry， Windows Phone 7和WebOS via AppCatalog;在電腦上，適用於Mac OS X， Windows， Safari， Chrome和Firefox。

　　詳情點擊查看https://www.evernote.com/

　　我們來看看，在不同的平台上，Evernote的內容結構有什麼不同。

　　Evernote在PC和Tablet上，屬於精細化編輯和內容型消費的app. 在智能手機上時，對app內容進行了優化，一是抓住用戶在移動場景下使用evernote的核心功能--創建新筆記和查看舊筆記;二是根據智能手機的特點和移動設備上文字輸入不便等情況，增加了拍照、音頻輸入和標記地理位置的功能;三是根據屏幕尺寸優化信息展示的層級結構，保持evernote一貫以來的簡單易用，如下圖，展示方