|
iOS APP體驗(yàn)設(shè)計(jì)不像互聯(lián)網(wǎng)的體驗(yàn)設(shè)計(jì)那樣，有一堆的方法論和可以“借鑒”的案例。 目前除了蘋果的<Human Interface Guidelines>和前Palm的<Zen of Palm>外，沒(méi)有找到更好的設(shè)計(jì)哲學(xué)和方法論。
事實(shí)上，即便認(rèn)真地研讀了HIG和Zen of Palm，甚至是Oolon Colluphid的哲學(xué)巨作你也無(wú)法嚴(yán)格按照Guideline設(shè)計(jì)出一款出色的APP。其原因，我得從程序猿和設(shè)計(jì)濕說(shuō)起。
程序猿 vs 設(shè)計(jì)濕
最被思想處于上世紀(jì)初的人理解的軟件設(shè)計(jì)開發(fā)是由 1. 美工 2. 程序員 3. 項(xiàng)目經(jīng)理 構(gòu)成。我這里講的設(shè)計(jì)濕不是美工！這是前提。因?yàn)槊拦ぶ魂P(guān)心好不好看，他們幾乎不關(guān)心（或者不懂）產(chǎn)品的易用性。
如何鑒別程序員和設(shè)計(jì)師呢？ 你無(wú)法用會(huì)不會(huì)寫代碼來(lái)區(qū)分他們（畢竟很多設(shè)計(jì)師是會(huì)寫編程的，例如彩程設(shè)計(jì)的設(shè)計(jì)師們，反之亦然），但是你卻可以用通過(guò)他們平時(shí)思考方式來(lái)區(qū)分他們。
程序員： “哇！這個(gè)功能好！我們能不能在我們的APP中加上呀？” 這種場(chǎng)景常發(fā)生在他們看到了一個(gè)很 “COOL” 很 “絢麗”的APP后常發(fā)出的感嘆（或者心里的感嘆）。
設(shè)計(jì)師答：“我們憑什么要加這個(gè)功能呢？”
程序員更傾向于關(guān)注功能本身，希望把所有好的東西都加到自己的作品中。例如，好的設(shè)計(jì)模式，高效的算法，看似絢麗的特效。一般程序員的作品有兩類，第一類是功能比北京的車子還要多，你需要一本牛津字典一樣厚的說(shuō)明書才能搞懂如何使用。另一類有十分絢麗的特效，界面飛來(lái)飛去，一走神就以為自己在耍雜技了。
設(shè)計(jì)師更傾向于關(guān)注產(chǎn)品整體，他們通常都有產(chǎn)品的功能潔癖。他們通常會(huì)從攝影中找到共鳴： 一張好的照片有三個(gè)要素 1.有一個(gè)鮮明的主題。 2. 畫面中的元素可以快速地把觀眾的注意力轉(zhuǎn)向這個(gè)主題。3. 只有一個(gè)主題，所有有主題不相關(guān)的重點(diǎn)通通砍掉。
不幸的是，很多iOS的開發(fā)者是從程序猿跳出來(lái)做的。 淚流滿面地用咆哮體高喊 “我們程序猿也終于可以賺錢了�。�！有木有！��！有木有�。�！” ， 于是他們做出來(lái)的東西可以用下圖簡(jiǎn)要地說(shuō)明：
沒(méi)錯(cuò)！問(wèn)題不在于功能是不是足夠的多，而是體驗(yàn)是否足夠的好，是否能解決問(wèn)題。而尤其在做iOS的APP設(shè)計(jì)的時(shí)候，由于設(shè)備的本身特點(diǎn)直接決定了設(shè)計(jì)完全不同于網(wǎng)站的體驗(yàn)設(shè)計(jì)。
我們認(rèn)為，主要區(qū)別有以下三點(diǎn)：
1. 視覺焦點(diǎn)&操作焦點(diǎn)
所謂視覺焦點(diǎn)和操作焦點(diǎn)的問(wèn)題，我們可以從傳統(tǒng)的電腦使用說(shuō)起。 我們控制電腦通常是通過(guò)鼠標(biāo)， 手用鼠標(biāo)控制屏幕的指針， 移動(dòng)到某個(gè)位置， 點(diǎn)擊、雙擊、拖動(dòng)等完成操作。 我們看到的是屏幕，操作的是鼠標(biāo)。我們的視覺焦點(diǎn)是屏幕，操作焦點(diǎn)是鼠標(biāo)。屬于視覺焦點(diǎn)和操作焦點(diǎn)不同的類型。
而有觸摸屏的設(shè)備和電腦最大的一個(gè)區(qū)別就是它們的視覺焦點(diǎn)和操作焦點(diǎn)是同一個(gè)點(diǎn)。 因此，我們想打開一張圖，只需要用手點(diǎn)一下圖。
視覺焦點(diǎn)和操作焦點(diǎn)同一的最大好處就是十分容易學(xué)習(xí)使用這類設(shè)備。但是正是因?yàn)閮牲c(diǎn)同一，當(dāng)我們?cè)诓僮鞯臅r(shí)候同時(shí)也會(huì)擋住焦點(diǎn)。
這一特性會(huì)影響到很多UI設(shè)計(jì)，例如：拿出你的iPhone，把手放在iPhone上，你會(huì)發(fā)現(xiàn)你的iPhone最大寬度也就4個(gè)手指的寬度。
我們用圓圈代表被擋住的區(qū)域，其中綠色區(qū)域是安全區(qū)域，代表我們心理上認(rèn)為一定可以準(zhǔn)確地點(diǎn)到的區(qū)域；而黃色區(qū)域代表我們心理上會(huì)有點(diǎn)忐忑，不能確定是否能點(diǎn)中的區(qū)域。例如某拍照軟件的設(shè)計(jì)：
沒(méi)錯(cuò)，問(wèn)題不言而喻。 從UI的設(shè)計(jì)上來(lái)看，如果是個(gè)網(wǎng)頁(yè)的話，視覺的確沒(méi)什么問(wèn)題（當(dāng)然，刪除按鈕放在修改的旁邊本來(lái)就是愚蠢的做法，這一點(diǎn)就先不說(shuō)了）。但是由于視覺焦點(diǎn)和操作焦點(diǎn)同一的原因，點(diǎn)擊修改就變得十分困難與緊張，何況旁邊還是一個(gè)刪除按鈕。
2. 空間感知
傳統(tǒng)的互聯(lián)網(wǎng)網(wǎng)頁(yè)間的跳轉(zhuǎn)，我們都熟知的是利用鏈接。鏈接可以在整個(gè)網(wǎng)站甚至是網(wǎng)站間任意跳轉(zhuǎn)，點(diǎn)了鏈接后就進(jìn)入了一個(gè)全新的空間。空間感知為網(wǎng)狀的，沒(méi)有頭沒(méi)有尾，在任意一個(gè)點(diǎn)通過(guò)網(wǎng)址都可以進(jìn)入。
在移動(dòng)設(shè)備的應(yīng)用程序設(shè)計(jì)中，進(jìn)入APP通常都是一個(gè)固定的點(diǎn)，每個(gè)操作就帶入另一個(gè)空間，如果失去了空間感知，就像失去了地圖，用戶會(huì)很容易有迷失的感覺。
而由于屏幕的大小等因素，APP不能直接告訴用戶空間是什么樣的，但是可以通過(guò)各種手段來(lái)給用戶以暗示。例如：
Camera+中，兩個(gè)主要的場(chǎng)景，一個(gè)是拍照，一個(gè)是照片管理。兩者之間空間是上下的關(guān)系，當(dāng)用戶在拍照?qǐng)鼍跋曼c(diǎn)擊相冊(cè)時(shí)，界面會(huì)向上推動(dòng)顯示照片管理的場(chǎng)景。反之亦然。此時(shí)向用戶暗示的場(chǎng)景如圖所示：
更復(fù)雜一些的空間暗示，如Reeder iPhone版�？臻g中的每個(gè)位置十分清晰，并且用動(dòng)畫的方式流暢地向用戶暗示這種空間感。不僅如此，Reeder iPhone版的加星去星的空間感知不是上下左右，而是前后的關(guān)系。請(qǐng)自行購(gòu)買后體驗(yàn)。
除此之外，Reeder iPad版本和Our Choice的空間感知也做得十分的棒。以O(shè)ur Choice和Reeder iPad為例（視頻）。Our Choice在選章節(jié)的場(chǎng)景進(jìn)入章節(jié)內(nèi)文時(shí)，選章節(jié)的場(chǎng)景會(huì)縮小，通過(guò)“近大遠(yuǎn)小”的常識(shí)在一個(gè)平面內(nèi)暗示兩個(gè)場(chǎng)景間的空間關(guān)系。 Reeder 也采用了類似的方式。
3. 體位化設(shè)計(jì)
以iPad為例子，通常我們使用iPad的時(shí)候有兩種體位，第一種是把iPad放在桌面上進(jìn)行操作，這種體位使用APP，無(wú)論按鈕在哪里，點(diǎn)擊都需要用一只手完成，兩個(gè)步驟間的按鈕距離遠(yuǎn)近也不會(huì)成為負(fù)擔(dān)。 而當(dāng)手握著iPad的時(shí)，這種特殊體位，問(wèn)題就出現(xiàn)了。
（如果你有手機(jī)，請(qǐng)現(xiàn)在拿在你的手上）倘若你只希望用一只手完成操作，你會(huì)發(fā)現(xiàn)，你用大拇指點(diǎn)擊屏幕中所有點(diǎn)，卻只有綠色區(qū)域是很易點(diǎn)擊的。如下圖所示，iPad的易操作區(qū)域也是分布在弧形區(qū)域內(nèi)。
接下來(lái)用一個(gè)視頻還說(shuō)明壞的體位化設(shè)計(jì)和好的體位化設(shè)計(jì)的區(qū)別。
前半部分壞的體位化設(shè)計(jì)，是因?yàn)樵O(shè)計(jì)沒(méi)有考慮到操作姿勢(shì)，以至于左邊一排不常用的功能占據(jù)了最重要的黃金區(qū)域，而常操作的區(qū)域卻遠(yuǎn)離易操作的區(qū)域。 操作起來(lái)就比吃掉一只死蒼蠅還難受。 而后者，好的體位化設(shè)計(jì)，所有的常用功能，一只手，不需要太多移動(dòng)就可以全部完成： 上篇文章，下篇文章，標(biāo)記未讀，標(biāo)記加星。
當(dāng)然，如果你是我們《牛壹周》的忠實(shí)讀者，那你一定記得我們的風(fēng)火輪（詳見牛壹周1.2之無(wú)敵風(fēng)火輪）和一陽(yáng)指(牛壹周1.1更新手記)？ 沒(méi)錯(cuò)，我們堅(jiān)決地去掉了一陽(yáng)指，因?yàn)檫@是一個(gè)漂亮卻難用的設(shè)計(jì)（至少不是一個(gè)好的體位化設(shè)計(jì)）。 我們?cè)诩軜?gòu)上保留了風(fēng)火輪（當(dāng)然，只是在程序中保留，但并未啟用），因?yàn)檫@是一個(gè)很好的體位化設(shè)計(jì)案例。 例如，在閱讀雜志的時(shí)候，我們常要翻下一篇文章，傳統(tǒng)的操作是先進(jìn)目錄，然后再找到要看的文章，再跳轉(zhuǎn)。 而使用風(fēng)火輪，如視頻所示，你的手完全不用離開屏幕，無(wú)論你的手有多大多少，無(wú)論你是左撇子還是右撇子。
在即將發(fā)布的iOS5中，iPad的鍵盤設(shè)計(jì)也很好地體現(xiàn)了所謂體位化設(shè)計(jì)的精髓：
結(jié)束語(yǔ)
iOS設(shè)備，甚至是包括Android在內(nèi)的所有移動(dòng)設(shè)備，他們都因?yàn)楠?dú)特的使用場(chǎng)景，似的設(shè)計(jì)不同于網(wǎng)頁(yè)設(shè)計(jì)。 很多“美工”，甚至程序員從網(wǎng)頁(yè)設(shè)計(jì)轉(zhuǎn)變角色來(lái)設(shè)計(jì)移動(dòng)設(shè)備APP時(shí)常忽視這些隱形的因素，最終導(dǎo)致產(chǎn)品設(shè)計(jì)水平難以提高。如果說(shuō)近年來(lái)交互設(shè)計(jì)師在網(wǎng)站設(shè)計(jì)中的地位越來(lái)越高，那在移動(dòng)設(shè)備的設(shè)計(jì)中，他們的地位會(huì)更為重要。視覺焦點(diǎn)/操作焦點(diǎn)、空間感知和體位化設(shè)計(jì)這三個(gè)iOS設(shè)備的特點(diǎn)事實(shí)可以類比到Android甚至更多的設(shè)備中，當(dāng)然也不局限這三個(gè)特點(diǎn)。
當(dāng)然，也正是因?yàn)檫@些原因，當(dāng)我們聽到別人興奮地告訴我們：“哇！HTML5可以做到所有設(shè)備自適應(yīng)ye~”的時(shí)候，我們通常是不屑，心里默想“程序員！”。 當(dāng)然，這里并非貶低之意。只是，有一點(diǎn)不得不承認(rèn)，不同尺寸的設(shè)備，不同的分辨率，若想獲得最好的體驗(yàn)，“自適應(yīng)”讓機(jī)器適應(yīng)了卻讓人難以適應(yīng)。例如一個(gè)按鈕本來(lái)有1厘米高寬的，一個(gè)自適應(yīng)，在iPhone上就只有原來(lái)的1/3時(shí)，你叫人怎么點(diǎn)擊？ 當(dāng)然這樣的例子很多。 大多數(shù)這種不花功夫還大賺的宣傳，就猶如電線桿貼滿的小廣告，通常都是缺少優(yōu)質(zhì)應(yīng)用的病入膏肓的硬件廠商為了快速解決痛楚而買腎的做法。當(dāng)然，對(duì)技術(shù)敏感的工程師就不自覺地幫著一起吆喝罷了～
原文：http://blog.mycolorway.com/2011/06/16/ued-for-ios/
本文鏈接：http://m.95time.cn/design/doc/2011/8492.asp 
出處：
責(zé)任編輯：bluehearts
|
