2013-1-3 藍藍設(shè)計的小編
轉(zhuǎn)載藍藍設(shè)計( www.alimai.net )是一家專注而深入的設(shè)計機構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
來源： http://beforweb.com/node/49
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
于移動設(shè)備的操作系統(tǒng)及應(yīng)用來說，判斷其用戶界面設(shè)計方案是否優(yōu)秀的一個重要衡量標(biāo)準(zhǔn)，就是看它對于手指觸控操作的友好程度。相比于桌面計算設(shè)備及相關(guān)的軟件環(huán)境，觸屏移動設(shè)備所具有的交互特性幾乎將用戶體驗設(shè)計師們帶入了工業(yè)設(shè)計的領(lǐng)域；設(shè)計方案更多是在體現(xiàn)著人機工學(xué)方面的原理，而不再是僅僅用來規(guī)劃內(nèi)容與功能的視覺呈現(xiàn)方式。
首先，我們需要了解人們通常會以怎樣的方式將手指?？吭谠O(shè)備上。拿手機來說，普通青年們多數(shù)會使用拇指來進行觸控操作，所以觸屏手機的界面交互方案基本是圍繞著拇指來進行打造的。
拇指是很不可思議的，據(jù)說它是將我們與動物區(qū)分開來的重要標(biāo)志之一...拇指的功能具有相當(dāng)?shù)膹椥裕瑫r也受到一定的局限。對于常規(guī)的觸屏手機來說，我們可以使用拇指掃過屏幕當(dāng)中的大部分區(qū)域，但其中大約只有三分之一屬于真正有效的觸控區(qū)域。所以在設(shè)計當(dāng)中，要盡量將最重要的界面交互元素放置在這個范圍當(dāng)中。在右手持機的狀況下，有效觸控區(qū)域位于屏幕的左下方：
這也正是移動系統(tǒng)或應(yīng)用中一些重要的工具欄或?qū)Ш浇Y(jié)構(gòu)通常被放置在界面底部的原因。與此相反的是，在傳統(tǒng)的桌面設(shè)備系統(tǒng)環(huán)境中，導(dǎo)航菜單一類的界面元素通常被放在界面頂部，無論是本地軟件還是網(wǎng)頁基本都是如此。對于我們有限的拇指作用范圍來說，這種傳統(tǒng)布局方式顯然不能在移動設(shè)備的用戶界面當(dāng)中很好的適用。
相比之下，左下角還是右下角的問題略顯次要。我們在實際當(dāng)中經(jīng)常會更改左右手持機方式，想想看是不是這樣，譬如對于右撇子來說，當(dāng)他們正在寫字或是需要同時使用鼠標(biāo)操作桌面設(shè)備時，通常會將手機交于左手操作；而左撇子們則正相反。不過在多數(shù)時間內(nèi)，使用右手持機的用戶還是要相對較多一些。
底部原則可以幫助我們對界面當(dāng)中的可觸控元素進行更好的組織。最常用的功能按鍵應(yīng)該被放在拇指最容易觸摸到的熱點區(qū)域當(dāng)中，而其它相對次要或是比較敏感的控制元素則應(yīng)該盡量避開這個區(qū)域。以iOS中的“編輯”按鈕來說，它通常被置于界面右上方，這個位置即可以保證它清晰可見，同時又不會被很容易的觸碰到，以免發(fā)生誤操作。
另外，底部原則不僅與拇指的作用范圍有關(guān)。當(dāng)我們使用拇指在屏幕上進行操作的時候，手指下方的內(nèi)容部分將會被遮擋??；只有將交互控制元素放在內(nèi)容區(qū)域的下方，才能讓這種負面效應(yīng)降至。其實這是一條具有廣泛適用性的設(shè)計原則，我們可以在很多其他類型的設(shè)備中看到這種原理的體現(xiàn)，例如iPod、計算器、帶有實體鍵盤的普通手機、電子秤等，無不是內(nèi)容在上，控制在下。
在Android設(shè)備中，底部原則這檔子事被機身下方的實體硬按鍵搞的復(fù)雜了些許，尤其是冰淇淋三明治之前的平臺。這些硬件級的控制按鍵占據(jù)著底部區(qū)域，在某種程度上會與應(yīng)用內(nèi)的底部交互元素形成視覺上的競爭。彼此層疊在一起的軟硬件工具欄會使用戶在快速操作的過程中產(chǎn)生迷惑，增大誤操作的幾率；對于在兩個維度上共存于拇指熱區(qū)當(dāng)中的軟硬件按鈕，它們之間的沖突幾乎是不可避免的。
固化的硬按鍵是無法被移除的，避免控制元素之間產(chǎn)生沖突的最直接的辦法就是讓虛擬與實體的工具欄在視覺上彼此分離，而這就意味著需要將Android應(yīng)用中的相關(guān)控制元素和導(dǎo)航結(jié)構(gòu)放置在用戶界面的頂部。這自然不是最理想的解決辦法，因為界面頂部離拇指熱區(qū)遠著呢，你要觸摸其中的某個按鍵時，幾乎會將半個手掌都覆蓋在屏幕上。不過比起與硬件工具欄層疊在一起的方式來說，這種解決方案仍是利大于弊的。
這種將重要的控制及導(dǎo)航元素放在頂部的做法與iOS設(shè)備的方式正相反。雖然iPhone的Home按鍵同樣在機身底部，但它的表現(xiàn)形式與Android設(shè)備的硬按鍵有很大區(qū)別，它不會對應(yīng)用界面底部的相關(guān)操作元素帶來視覺上的干擾。下面的截圖展示了Foursqure應(yīng)用在這兩個平臺中的界面設(shè)計方案對比：
毫無疑問，當(dāng)我們在移動設(shè)備中瀏覽網(wǎng)站頁面時，類似的問題也會出現(xiàn)。我們可以將網(wǎng)頁理解為應(yīng)用中的應(yīng)用，因為它需要通過瀏覽器這個應(yīng)用程序進行輸出呈現(xiàn)。移動平臺當(dāng)中的很多瀏覽器都會將一些常規(guī)的控制元素放在底部工具欄里，這在某種程度上又有可能與頁面當(dāng)中交互元素產(chǎn)生視覺上的沖突。所以，對于移動版本的站點來說，一個最基本的設(shè)計原則就是不要將重要的控制元素或?qū)Ш浇Y(jié)構(gòu)通過CSS的position:fixed定位方式固定在用戶界面底部。
不過，與Android應(yīng)用中的解決方案有所不同，對于Web頁面來說，將控制元素與導(dǎo)航結(jié)構(gòu)放在界面頂部的做法同樣會產(chǎn)生很大問題。畢竟當(dāng)前絕大多數(shù)的主流觸屏手機仍屬于小屏幕設(shè)備，而傳統(tǒng)Web頁面的橫向全局導(dǎo)航結(jié)構(gòu)通常由若干包含著一到兩個詞語的導(dǎo)航項組成，這對于手機屏幕來說顯得太擁擠了，我們必須另想辦法來解決導(dǎo)航欄布局的問題。
Luke Wroblewski在Mobile First一書中提到：“在很多移動版本的站點中，用戶首先會看到一大坨導(dǎo)航結(jié)構(gòu)，而不是內(nèi)容。在移動應(yīng)用的上下文環(huán)境當(dāng)中，時間永遠是寶貴的，流量搞不好是要花錢的有木有，你必須盡最大努力讓用戶在首屏中得到他們最想獲取的信息。”
確實是這么回事。移動版本的站點，在布局方面，應(yīng)該使主要內(nèi)容盡量多的占據(jù)著首屏當(dāng)中的空間，而導(dǎo)航結(jié)構(gòu)則應(yīng)該以某種縮略的形式出現(xiàn)在相對次要的位置。Wroblewski通過一個實例來倡導(dǎo)這個設(shè)計模式，也就是Ad Age的移動版站點 。其首屏當(dāng)中，除了網(wǎng)站標(biāo)題及內(nèi)容列表之外，右上角的菜單按鈕是界面當(dāng)中唯一一個交互控制元素。當(dāng)用戶點擊這個按鈕時，導(dǎo)航列表才會出現(xiàn)在屏幕當(dāng)中?？瓷先?，整個導(dǎo)航列表好像是另外一個界面，但它實際上是被放置在頁面最下方的，而菜單按鈕只是個錨點而已。
Wroblewski繼續(xù)發(fā)言：“這個設(shè)計方案在首屏當(dāng)中使用了最小化的導(dǎo)航機制(只有一個按鈕鏈接)，用戶可以集中精力去閱讀每個分類當(dāng)中的文章。當(dāng)他們?yōu)g覽至當(dāng)前頁面的底部時，還可以直接通過導(dǎo)航列表來探索更多的內(nèi)容。最棒的是，頂部的菜單按鈕只是一個錨點，整個導(dǎo)航機制不涉及到任何會導(dǎo)致交互流程復(fù)雜化的元素，例如JavaScript、覆蓋層或是獨立的導(dǎo)航頁面等。”
“內(nèi)容在上，控制在下”的規(guī)則看上去蠻簡單的，不過一旦涉及到實際的上下文環(huán)境，例如操作系統(tǒng)或瀏覽器的用戶界面特性，設(shè)計師們要考慮到的情況就變的復(fù)雜了。截至目前，我們可以將討論過的話題歸納為幾點設(shè)計原則：
這些設(shè)計原則僅限于手機的上下文環(huán)境當(dāng)中，而對于屏幕規(guī)格較大的觸屏設(shè)備，例如iPad來說，規(guī)則就要發(fā)生變化了。
拇指熱區(qū)的相關(guān)規(guī)則同樣適用于平板電腦，不過，由于持機方式不同，熱區(qū)的位置也有所變化。iPad的拿法在很大程度上取決于整個人的姿態(tài)。我們在站著的時候，需要一手持機一手操作；坐在桌前的時，我們往往會用一只手像支架一樣從側(cè)面架住iPad，而另外一只手用來戳戳點點；坐在椅子上的時候，我們通常會將它放在膝上進行操作；而躺著或是半臥著的時候，又會將它立在腹部，一手支撐，一手操作。
每一種持機方式幾乎都對應(yīng)著一種特定的熱區(qū)規(guī)則，而且在每一種姿態(tài)當(dāng)中，設(shè)備與我們身體的距離也有所不同。例如，站著的時候，我們會把iPad端的比較近，而躺下的時候就相對較遠了。
雖然聽上去有些復(fù)雜，不過在這些上下文情景當(dāng)中的交互行為還是存有一些共同特征的。首先，用來持機的那只手通常會握住機身的上半部分，因為這樣最符合杠桿原理；相應(yīng)的，拇指熱區(qū)基本會位于屏幕的前三分之一部分，偏向左上角或右上角。其次，iPad的屏幕相對較大，用戶很難像使用iPhone那樣瞄上一眼就能看到界面當(dāng)中的幾乎全部內(nèi)容。正像對待普通的印刷品或是Web頁面那樣，用戶通常會首先將目光聚焦于iPad界面的頂部區(qū)域，所以我們的設(shè)計方案也要相應(yīng)的在這一點上符合用戶習(xí)慣。換句話說，在操作iPad的過程中，無論是目光還是手指，它們的主要活動區(qū)域都是設(shè)備的上半部分。而機身的下半部分不僅會在很多時候被用戶視而不見，而且在某些特定的環(huán)境中它真的是不可見的，例如當(dāng)我們躺在床上的時候，這部分很可能被衣物或被子遮擋住，實在是悲催。
所以，與手機界面不同，在iPad及同類平板設(shè)備的應(yīng)用當(dāng)中，主要的交互控制對象應(yīng)該被放置在界面的左上角或右上角，以便拇指可以很容易的觸摸到。Instapaper和Twitter在這方面做的都不錯：
需要注意的是，應(yīng)該盡量避免將交互元素放在屏幕頂端正中間的位置，否則用戶在進行操作的時候，手掌會將很大一部分內(nèi)容遮住。實際上，任何會對下方內(nèi)容產(chǎn)生直接控制作用的交互元素都不應(yīng)該被放在這個位置。在The Daily的iPad應(yīng)用 當(dāng)中，內(nèi)容正上方有一個滑塊，用戶可以通過拖動它來前后切換文章頁面。意圖不錯，不過當(dāng)你執(zhí)行這個操作的時候就會發(fā)現(xiàn)，自己的手掌會遮擋住文章內(nèi)容，而手指則會擋住縮略圖，體驗弱爆了。單憑這一個地方的疏忽，這個設(shè)計方案就足夠作為反例登場了。
我們可以從The Daily的失策當(dāng)中了解到，對于iPad應(yīng)用來說，在某些特定的情況下，控制元素還是避開頂端微妙。你可以將它們放在底部甚至側(cè)面，只要控制元素本身及其所需的交互行為不會對內(nèi)容的可讀性造成影響。我們來看看Sydney Morning Herald's的iPad應(yīng)用 是怎樣做的。如下圖所示，在該應(yīng)用的界面底部有一個頁碼指示器，當(dāng)用戶對其進行拖動操作的時候，對應(yīng)頁面中的文章標(biāo)題就會以列表的形式出現(xiàn)在指示器的上方，使用戶不用翻頁就能大致了解其他頁面當(dāng)中的內(nèi)容。雖然文章標(biāo)題列表會將頁面中的內(nèi)容遮擋住，但在這個交互情景當(dāng)中，用戶最為關(guān)注的是列表中的文章標(biāo)題，而不再是原來的主要內(nèi)容區(qū)。
對于在不同的情況下究竟應(yīng)該將控制元素放在頂部還是底部的問題，我們不妨在這里弱弱的歸納一下：
所以，我們可以在很多書籍或雜志應(yīng)用當(dāng)中看到，頁面縮略圖列表通常會被放在界面底部。(可以參考之前iPad應(yīng)用的十大用戶體驗設(shè)計準(zhǔn)則 一文當(dāng)中展示的Martha Stewart Living雜志以及Pulse的設(shè)計方案)假設(shè)你正在設(shè)計一款與地圖相關(guān)的應(yīng)用，界面當(dāng)中有一個地標(biāo)托盤，用戶可以將地標(biāo)從這個托盤當(dāng)中拖拽出來，并“按”在地圖上的某個地方。在這個例子當(dāng)中，托盤同樣應(yīng)該被放在界面底部，這樣可以保證當(dāng)用戶從托盤里將地標(biāo)拖拽出來的時候，地圖不至于被手遮擋住。
如果說交互對象的布局位置取決于平臺類型及持機方式，那么它們的尺寸則在很大程度上由手指的大小來決定。我們必須將這些交互元素設(shè)計的足夠大，才能保證用戶可以進行準(zhǔn)確的辨識和觸擊。
不過，要做的多大才算夠呢？不妨抬起手看看自己的指尖。很多系統(tǒng)平臺的設(shè)計規(guī)范都在這方面進行了描述，不過我個人覺得蘋果做的仍是最棒的：理論上，可觸擊元素的最小尺寸應(yīng)該為44像素(約1/4英寸或7毫米)見方。
The comfortable minimum size of tappable UI elements is 44 x 44 points.
請注意point與pixel的換算關(guān)系在Retina屏與普通屏幕之間區(qū)別。
在移動應(yīng)用的上下文環(huán)境中，足夠大的按鈕不僅便于操作，而且可以讓用戶維持必要的注意力，避免被周圍的環(huán)境所干擾。
44像素見方的最小規(guī)格只是一種理想狀態(tài)下的情況，在實際當(dāng)中，合理的折中方案通常是必需的。即使是iPhone用戶界面中的很多原生控件也避開了這個規(guī)則的限制。最典型的一個例子就是系統(tǒng)自帶的鍵盤，其中每一個鍵位的高度是44像素，但寬度只有30像素；而橫屏狀態(tài)下，其寬度是44像素，高度則變?yōu)?8像素。不過這也是蘋果的無奈之舉，因為怎樣都必須將完整的QWERTY鍵盤搞到界面當(dāng)中，所以必須在設(shè)計方案當(dāng)中有所取舍。
參考蘋果的做法，當(dāng)空間的局限使得我們確實無法實現(xiàn)44像素見方的設(shè)計方案時，應(yīng)該盡量保證其44×30的最小規(guī)格。
上個世紀，不少人都被卡西歐的計算器手表浪費了大量的青春年華。問題不僅僅在于那些微小的按鍵會讓戴著它的人看上去很二，最不靠譜的是，這些按鍵的排布實在是太緊密了。你想按5，但通常會按到8或是2；與其說是計算器，還不如叫它幸運轉(zhuǎn)盤更合適些。尺寸過小的按鍵以及毫無間隔空間的布局，是產(chǎn)生這種結(jié)果的兩個最直接的原因。
為小屏幕設(shè)備進行界面設(shè)計的時候，這類挑戰(zhàn)確實是我們經(jīng)常需要面對的，而造成問題的根本原因卻通常不是產(chǎn)品需求本身。無論是在計算器手表的全盛期，還是如今，我們時常會聽到產(chǎn)品需求方翻來覆去的念叨著：“咱就把這些東西再挪近一些吧...我只想在這個工具欄里再加一個按鈕...” 加你妹啊！
如果我們必須在設(shè)計方案當(dāng)中將交互元素排布的非常緊密，那么至少要把它們各自的尺寸盡量做大。想想iPhone原生的撥號鍵盤界面，或是Skype等應(yīng)用。界面當(dāng)中的撥號按鍵之間的間隔通常都很小，甚至沒有間距；而每個按鍵的尺寸幾乎可以用巨大來形容，因為這樣可以有效的降低誤操作的幾率。
其實，無論是iPhone原生的撥號界面，還是上圖所示的Skype中的同類界面，它們都在底部導(dǎo)航工具欄的上方放置了一些控制按鍵。如果以我們在前文當(dāng)中提到的一些原則標(biāo)準(zhǔn)來衡量的話，這種做法其實不算得當(dāng)；但是在這幾個具體的情景當(dāng)中，這些控制按鍵的大尺寸特質(zhì)卻可以有效的降低它們與底部導(dǎo)航工具欄之間的視覺沖突。
所以，要在有限的小屏幕可視區(qū)域當(dāng)中打造出成功的用戶界面設(shè)計方案，我們必須結(jié)合實際的產(chǎn)品需求，在交互元素的尺寸和空間布局等方面做好充分的權(quán)衡與判斷。
藍藍設(shè)計的小編 http://www.alimai.net