移動界面隱喻設(shè)計
2011-08-26 文章來源: 深達(dá)設(shè)計
Tags:
移動,界面,隱喻,設(shè)計
界面是什么？
是的，有些時候，我就在想這個簡單的問題，而那時我的答案還是：界面是對軟件應(yīng)用解決方案的顯性，使用圖形化符號，向使用者解釋它的功能與任務(wù)。
但最近一些認(rèn)知卻讓我對這個問題有了新的回答：界面就是軟件應(yīng)用它本身。它不是一份對軟件應(yīng)用功能的圖形化說明書，不是對軟件應(yīng)用功能與任務(wù)的圖形化翻譯，它就是軟件應(yīng)用本身，并且與之渾然天成。
一個簡單的問題，僅僅從展開的iPad文件夾時界面的呈現(xiàn)，你覺得，有多少種方法，可以收縮起這個文件夾？
方法其實(shí)有三種：點(diǎn)擊（Tap）文件夾圖標(biāo)或者點(diǎn)擊其他區(qū)域；向上拖動（Flick）界面；雙指在兩側(cè)向內(nèi)滑動（pin close）。
第一種也許你早就知道，但后面兩種，你也許會將信將疑地去嘗試，相信我的說法。
所以，從我的角度上而言，這也許是人家常說iOS操作簡單易懂的原因。在你點(diǎn)擊文件夾后，文件夾展開的的這個動畫，以及最終他的視覺樣式，已經(jīng)告訴你了，他應(yīng)該怎么去關(guān)閉，你會不由自主的，就學(xué)會這些操作。
而這就是隱喻?！?a title="iOS Human Interface Guidelines-Human Interface Principles-Metaphors" >iOS Human Interface Guidelines》里面是這樣解釋隱喻對體驗(yàn)的影響的：當(dāng)你應(yīng)用中的可視化對象和操作按照現(xiàn)實(shí)世界中的對象與操作仿造，用戶就能快速領(lǐng)會如何使用它。（When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app.）
對我而言，iOS的文件夾更多的像一個抽屜的隱喻，并且，它的頂部還是玻璃材質(zhì)的。從拉開的動畫當(dāng)中，他建立了一個類似抽屜的空間，你一看就明白了。
界面與界面之間，并不是簡單的線性關(guān)系
我們不得不否認(rèn)的一點(diǎn)是，界面與界面之間其實(shí)是應(yīng)該純在聯(lián)系的，我指的這種聯(lián)系是說，空間感。存在相互之間的層級和邏輯關(guān)系的，而且這種關(guān)系，越符合現(xiàn)實(shí)的，越好。越容易讓別人理解，越來越不用讓別人學(xué)習(xí)。
這就是我們需要做隱喻，我們需要通過它，去表現(xiàn)界面之間的關(guān)系。
隱喻給人以可預(yù)測性，用戶能夠輕易的理解你設(shè)計的軟件應(yīng)用。這是一種掌握的感覺，是一種控制的感覺。當(dāng)用戶操作時，他們知道下一步即將出現(xiàn)什么、怎么回去——即使是在第一次操作。
為什么需要在移動界面中注意隱喻設(shè)計？
1.導(dǎo)航缺失
一個觸摸屏手機(jī)的物理尺寸在3.7寸左右，與一張信用卡相當(dāng)。在這么狹窄的空間內(nèi)，我們則不能秉著PC客戶端“在一個主界面內(nèi)完成大部分的任務(wù)”的思想，去設(shè)計移動客戶端。我們必須把界面分拆。
與之而來的問題是，分拆后的界面是有邏輯的，但我們并不能照搬PC客戶端中的方法：使用任務(wù)欄，層疊的模態(tài)對話框去表現(xiàn)這種邏輯。
因?yàn)槲覀兏揪蜎]有空間，所以我們得另辟蹊徑。
所以，我們把界面拆分得更多獨(dú)立化，讓界面變成卡片式，一個界面只完成一項(xiàng)任務(wù)，保證界面之間聯(lián)系的單一化，避免界面之間邏輯，或者跳轉(zhuǎn)的混亂。
2.缺乏物理力學(xué)反饋
傳統(tǒng)的手機(jī)上，用戶使用鍵盤，去操作屏幕上的視覺對象，鍵盤在這個階段中，扮演的其實(shí)是用戶操作行為的翻譯器。而iPhone的出現(xiàn)砍掉了這種操作行為的翻譯，變成直接觸摸，這是一項(xiàng)偉大的進(jìn)步。
iPhone雖然縮短了操作行為的執(zhí)行階段，但卻給操作行為的反饋階段帶來了麻煩：只有視覺反饋，手指觸摸的物理力學(xué)反饋消失了。
你的手指不再能夠感受到鍵盤按下的物理力學(xué)壓力，甚至，假設(shè)你手指粗壯一點(diǎn)，你就幾乎沒法看見按鈕是否被按下。而在輸入時，這種情況尤甚，鍵盤手機(jī)上有著悠久歷史的高效的“盲打”輸入方式只能進(jìn)入歷史的存檔中。
因此，我們更多的需要利用用戶的視覺和聽覺，去提供反饋。
隱喻設(shè)計內(nèi)容
對于一個產(chǎn)品來說，隱喻設(shè)計不僅僅是動畫，各種即時狀態(tài)細(xì)節(jié)的設(shè)計，更多情況下，我們需要按步驟的去完成整個隱喻的系統(tǒng)性與結(jié)構(gòu)化設(shè)計。他包含以下幾項(xiàng)內(nèi)容：
1.擬物化視覺外觀與聽覺反饋
隱喻設(shè)計的第一步，從應(yīng)用的外觀著手，如果可以的話，你應(yīng)該考慮應(yīng)用的外觀表現(xiàn)出真實(shí)物理的肌理材質(zhì)，以及合理的光影效果，并且，得正確的顯示界面的元素的相互之間的空間層次感。
另外我們不能忽視的一種擬物化設(shè)計：音效。它不僅是對缺乏物理力學(xué)反饋的一種彌補(bǔ)的手段，在某些情況下，也是一種有效的反饋機(jī)制，如當(dāng)屏幕處于關(guān)閉狀態(tài)下時（這是經(jīng)常的事情），擬物化的音效更能讓用戶了解當(dāng)前用戶的狀態(tài)。iOS解鎖屏幕的聲音你還記得嗎？還有敲擊鍵盤的聲音，以及照片拍攝的聲音。這都很好的擬物化音效。
擬物化的外觀很大程度上降低了用戶的認(rèn)知成本，無需閱讀額外的文字，用戶只要看到軟件的樣子，就知道它的用途。
2.即時反饋
假設(shè)，你在觸摸屏的設(shè)備上，使用手勢執(zhí)行某項(xiàng)操作，但界面上沒有任何的反饋。你就不得不去猜測一下，你遇到的是下面的那種情況：
- 你的操作手勢有誤，軟件無法響應(yīng)
- 程序當(dāng)機(jī)了，暫時沒有響應(yīng)
對于情況二，很抱歉，我們也許實(shí)在無能為力。但是對于情況一，我們得有必要討論一下，如果反饋用戶操作手勢有誤，并指引或者幫助用戶到正確的操作中了。
由此看來，傳統(tǒng)網(wǎng)頁上使用的反饋方式，移植到觸摸屏設(shè)備上，實(shí)在是水土不服。移動設(shè)備最好的錯誤反饋，應(yīng)該是即時跟隨用戶的手勢操作的。
如上圖示意，這才是一個觸摸屏上，應(yīng)該具備的一種反饋，它即時響應(yīng)了用戶的手勢動作(即使可能是錯誤的)，而當(dāng)用戶釋放操作時，又自動回歸到正確的操作結(jié)果中來。
對于任何一個軟件應(yīng)用來說，他都是有學(xué)習(xí)成本的。有的成本高到離譜，比如Office，Photoshop之類的生產(chǎn)力軟件，但也有低成本的，如計算器，記事本等。當(dāng)軟件應(yīng)用而行擬物化設(shè)計之后，其實(shí)這已經(jīng)降低了一些學(xué)習(xí)的成本。但如何繼續(xù)降低學(xué)習(xí)成本？讓用戶犯錯，并從錯誤中學(xué)習(xí)。
即時反饋縮減了操作與反饋之間的距離，有效降低了用戶糾正錯誤的修復(fù)成本，也提高了用戶學(xué)習(xí)的效率。
3.流動式動畫
傳統(tǒng)的軟件界面之間的切換表現(xiàn)得較為粗暴，大部分情況下，他只顯示命令執(zhí)行前和執(zhí)行后兩個界面，而忽略了他們之間的那段過程。而在真實(shí)世界中，倘若沒有這個過程，你甚至很難理解過程兩端的界面，是如何聯(lián)系起來的。
動畫有一種無法比擬的表現(xiàn)力，它是與用戶的最有效的溝通方式，一個精致，微細(xì)的動畫，能夠友好的銜接兩個界面之間的切換，同時他還有以下的作用：
- 表現(xiàn)軟件當(dāng)前狀態(tài)
- 提供對用戶有用的反饋信息
- 加強(qiáng)用戶直接操作的控制感
- 通過視覺表現(xiàn)用戶的操作的結(jié)果
流動式的動畫貫穿在整個iPhone操作系統(tǒng)中，也包括在非沉浸式應(yīng)用程序中。但作為隱喻設(shè)計的一種手段，我們需要留意的是：動畫只是常用于提高用戶體驗(yàn)，它本身并不是用戶體驗(yàn)的焦點(diǎn)。
隱喻設(shè)計的評判標(biāo)準(zhǔn)
1.符合現(xiàn)實(shí)邏輯的界面空間
流動式的動畫成為隱喻設(shè)計的最后一塊拼圖，但是我們僅僅把拼圖拼起來是不夠的，我們還需要檢驗(yàn)，這樣的拼圖是否符合真實(shí)世界的邏輯。
Flipboard始終如一地采用翻頁的動畫效果，無論是從首頁進(jìn)入，抑或是從某個訂閱源中返回。他甚至還精細(xì)的制作了三種翻頁動畫效果：只翻動一頁，翻動兩頁，翻動三頁和以上；他給以用戶這樣一種感覺：
· 我訂閱的所有內(nèi)容，是一本雜志
· 任何頁面都沒有互相從屬的關(guān)系，只有先后秩序的關(guān)系
· 在首頁上的方塊型的東西，等于雜志的目錄
而國內(nèi)的同類產(chǎn)品雜客，他所呈現(xiàn)的界面空間卻稍有不同，整體上，他像是一個時刻變換封面的雜志柜。
但個人感覺，從雜志柜進(jìn)入雜志的過程動畫，有點(diǎn)粗暴且難以在現(xiàn)實(shí)生活中找到相關(guān)性。個人觀點(diǎn)，若此過程動畫能與iBooks打開書籍的動畫類似或相同。也許更加符合現(xiàn)實(shí)邏輯。
|
2.自圓其說
簡單來說，你的界面是如何進(jìn)入用戶的視眼，也應(yīng)該以相反的方式，從界面中消失，并且，這個過程，是能夠自圓其說的，且符合真實(shí)生活的隱喻的。
  3.響應(yīng)用戶的直覺手勢
移動設(shè)備最大的特點(diǎn)是：直接操作。如果你設(shè)置了你的界面是從下方推入，那用戶可能會直覺性的認(rèn)為，我把新界面向下拉，這個界面即可消失。
  從圖可以看到騰訊愛看成功的照顧到了用戶從隱喻設(shè)計中所得到的直覺性手勢，只需向下拉，用戶就可以關(guān)閉此界面。
從外觀上看，評論界面都處于主界面之下，而動畫效果都屬于主界面向下拉伸，評論界面向上推至界面頂部。但是雜客的同樣響應(yīng)了用戶的直覺性手勢，只需在正文界面中，向下拖動，即可激活評論界面，這不得不算是在twitter客戶端上的一種進(jìn)步和超越。
總結(jié)
其實(shí)理解移動界面的隱喻設(shè)計，并不是一件非常困難的事情，因?yàn)檫@是一個化繁為簡過程后的結(jié)果。而困難的是：設(shè)計師應(yīng)該跳出傳統(tǒng)的按鈕，點(diǎn)擊等交互操作的局限中來，更多了考慮到和現(xiàn)實(shí)生活的邏輯結(jié)合和用戶的直覺手勢的響應(yīng)。
對于移動的軟件應(yīng)用來說，隱喻設(shè)計的初衷是為了解決導(dǎo)航缺失和物理力學(xué)反饋缺失的問題，但同樣，這也是移動產(chǎn)品的競爭力的核心體現(xiàn)。如何幫助用戶更快的理解你的軟件應(yīng)用，如何幫助用戶更順暢的使用你的軟件應(yīng)用。這是我們每個設(shè)計師，都應(yīng)該去真實(shí)生活中去尋找的答案。
|
深圳網(wǎng)站建設(shè)設(shè)計公司－深達(dá)設(shè)計(m.ttlfr.cn)，擁有專業(yè)設(shè)計團(tuán)隊(duì)為企業(yè)提供網(wǎng)站建設(shè),網(wǎng)站設(shè)計,網(wǎng)站制作,FLASH網(wǎng)站建設(shè)設(shè)計,Flash互動設(shè)計,網(wǎng)頁制作,品牌設(shè)計.
