由iPhone的UI設(shè)計(jì)看移動(dòng)設(shè)備如何“突破”平臺(tái)
以前51CTO曾獨(dú)家譯文《移動(dòng)設(shè)備UI設(shè)計(jì)的未來(lái)將是什么樣？》各種移動(dòng)終端設(shè)備交互設(shè)計(jì)有一致也有不同，由于平臺(tái)本身的特性，不能照搬其他平臺(tái)的UI設(shè)計(jì)，讓用戶感覺(jué)是在真正的使用一個(gè)Android軟件或者iPhone軟件。
I think everything here is very relevant, and let’s keep them in mind.
“突破”平臺(tái)UI膜拜——由iPhone想到的
我想到了我們的設(shè)計(jì)創(chuàng)新，設(shè)計(jì)師的設(shè)計(jì)意識(shí)形態(tài)來(lái)源，遵循平臺(tái)的一些UI特性，但“突破”更在平臺(tái)之外。
以上兩圖顯示的是進(jìn)行TAB排序的不同方法，雖然YouTube這種設(shè)計(jì)方式很優(yōu)秀，但YELP也不錯(cuò)，這兩種不同的具體設(shè)計(jì)方式（我想可以稱之為設(shè)計(jì)等價(jià)式）同樣達(dá)到了功能需求，而YELP這種設(shè)計(jì)方式更在平臺(tái)UI之外，即使我們?cè)趙eb頁(yè)面，甚至在Android平臺(tái)看到這樣的方式也不足為奇，更談不上誰(shuí)抄襲誰(shuí)，誰(shuí)照搬誰(shuí)，只要是好的設(shè)計(jì)方式和設(shè)計(jì)特性，我們都可以去粗取精，合理應(yīng)用。
使用過(guò)大量的iPhone平臺(tái)客戶端，再回頭看看iPhone官方出的 iPhoneHuman Interface Guidelines關(guān)于iPhone設(shè)計(jì)組件的介紹，似乎這個(gè)百來(lái)頁(yè)的文檔更容易讓設(shè)計(jì)師縮手縮腳，以為這樣就是iPhone，遵循這樣的諸如picker，slidebar，web view 等設(shè)計(jì)方式才是真正的iPhone。
在具體的設(shè)計(jì)過(guò)程中，每當(dāng)提出一些設(shè)計(jì)方案，來(lái)自其他設(shè)計(jì)師或開發(fā)人員的質(zhì)疑竟然都是：有沒(méi)有這樣的設(shè)計(jì)，我想iPhone這樣做不太符合固有的一些規(guī)范…
我想完全錯(cuò)了，它只是一個(gè)基本的不能再基本的規(guī)范，數(shù)以十萬(wàn)級(jí)的iPhone客戶端各出奇招，將iPhone本來(lái)的基本設(shè)計(jì)規(guī)范演繹的精彩紛呈就是最好的證明（雖然這些客戶端中有些設(shè)計(jì)的不怎么樣，還有相當(dāng)多的客戶端將UI演繹到了極致）。
Central是一個(gè)非典型的單窗口應(yīng)用程序（alian cooper about face 一書中有關(guān)于單窗口，多窗口應(yīng)用程序的分析，雖然是針對(duì)web應(yīng)用，但對(duì)手機(jī)是同樣的道理），幾乎所有的操作都圍繞地圖進(jìn)行，在展示地圖層級(jí)的方式上，central沒(méi)有使用Picker（實(shí)際上也不合適使用，具體可參看iPhoneHuman Interface Guidelines中的介紹）或者Table views，而是獨(dú)辟蹊徑彈出一列行為（圖標(biāo)）進(jìn)行選擇，不同的行為（圖標(biāo)）產(chǎn)成不同的結(jié)果在地圖頁(yè)面展示，幾乎不需要任何的用戶短時(shí)記憶便可順利完成。
Central搜索功能，Location功能更是讓人眼前一亮，如果我們死扣所謂的“UI Guideline”，恐怕我們根本沒(méi)有辦法將如此豐富的功能恰當(dāng)?shù)陌才旁?20*480的舞臺(tái)上，這些功能松緊有度而又先后有序，誰(shuí)能說(shuō)這種優(yōu)良設(shè)計(jì)是iPhone平臺(tái)的專利？
直到現(xiàn)在從事iPhone或Android 設(shè)計(jì)，更多的人（甚至包括一些設(shè)計(jì)師）更愿意看到已經(jīng)存在的“設(shè)計(jì)樣本”才會(huì)結(jié)束原本“創(chuàng)意設(shè)計(jì)”的爭(zhēng)論，真是設(shè)計(jì)“突破”的大敵。
點(diǎn)擊頭像顯示的更多操作，MSN的處理方式相當(dāng)?shù)那擅?，操作的前后承接給用戶的引導(dǎo)恰到好處，whrrl的notification機(jī)制并沒(méi)有使用傳統(tǒng)的badge，而是在首頁(yè)以弧形截面標(biāo)識(shí)出來(lái)，當(dāng)有信息進(jìn)來(lái)的時(shí)候，弧形截面就顯示為橘黃色以來(lái)提醒。
基于SNS的網(wǎng)站以及最近成為潮兒的微博，都有一個(gè)很重要的模塊：好友或關(guān)注的人的動(dòng)態(tài)表單，因?yàn)檫@個(gè)動(dòng)態(tài)的更新速度非常的快，不可能保存在本地讓用戶逐一閱讀（實(shí)際上這些動(dòng)態(tài)不見得都是用戶需要的），有一個(gè)非常好的設(shè)計(jì)策略就是顯示最新的幾十條，如果查看舊的動(dòng)態(tài)（相對(duì)新的而言），就點(diǎn)擊更多，當(dāng)然可能當(dāng)前查看的過(guò)程中，又有許多新的動(dòng)態(tài)，但是沒(méi)有加載到當(dāng)前列表中，就需要刷新，上圖呈現(xiàn)的微博（新浪，騰訊）根據(jù) iPhone固有的UI特性（滑動(dòng)到列表的底部開始緩沖，這個(gè)和一些顯示的物理現(xiàn)象非常貼切）以及從上到下的自然順序（習(xí)慣性的認(rèn)為上面是最新的，下面是最舊的，這是習(xí)慣用戶，可參考Do not make me think一書 關(guān)于習(xí)慣用法章節(jié)），產(chǎn)生的聰明設(shè)計(jì)“下拉刷新”，對(duì)于寸土寸金的iPhone屏幕，合理顯示且平易近人。
這種聰明設(shè)計(jì)并不是iPhone的設(shè)計(jì)專利，在具有同樣使用習(xí)慣的Android平臺(tái)上也一樣可以使用，只是使用方式有所差異（Android平臺(tái)并沒(méi)有滑動(dòng)列表到底部緩沖的習(xí)慣，所以刷新按鈕和顯示更多按鈕需要顯性的出現(xiàn)在列表的起點(diǎn)和終點(diǎn)而不是像iPhone通過(guò)下拉操作完成刷新，所以可以藏起來(lái)）
Page indicator是多個(gè)頁(yè)面進(jìn)行滑動(dòng)切換的標(biāo)識(shí)，是iPhone平臺(tái)的一個(gè)聰明設(shè)計(jì)組件。
上圖顯示的appstore對(duì)某個(gè)產(chǎn)品進(jìn)行介紹，產(chǎn)品圖片的瀏覽模式，恰當(dāng)?shù)氖褂胮age indicator，一方面防止過(guò)多的圖片累加導(dǎo)致頁(yè)面過(guò)長(zhǎng)，另一方面在初期獲取數(shù)據(jù)的時(shí)候也適當(dāng)?shù)木徑饬朔?wù)器的壓力。
右圖是手機(jī)QQ瀏覽器1.2的首頁(yè)面，將快速鏈接以page indicator的形式來(lái)組織，恰當(dāng)利用了iPhone用戶的使用習(xí)慣，應(yīng)用非常的巧妙。
而whrrl將page indicator干脆放在了導(dǎo)航欄作為標(biāo)題的一部分，我不假思索就非常清楚左右滑動(dòng)可以輕松切換至其他頁(yè)面。
本文來(lái)自：http://www.ucd-grow01.com/?p=207
【編輯推薦】
