轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.cqzjtgb.com  )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、  cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 來源： http://beforweb.com/node/49

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，            請(qǐng)點(diǎn)這里  

于移動(dòng)設(shè)備的操作系統(tǒng)及應(yīng)用來說，判斷其用戶界面設(shè)計(jì)方案是否優(yōu)秀的一個(gè)重要衡量標(biāo)準(zhǔn)，就是看它對(duì)于手指觸控操作的友好程度。相比于桌面計(jì)算設(shè)備及相關(guān)的軟件環(huán)境，觸屏移動(dòng)設(shè)備所具有的交互特性幾乎將用戶體驗(yàn)設(shè)計(jì)師們帶入了工業(yè)設(shè)計(jì)的領(lǐng)域；設(shè)計(jì)方案更多是在體現(xiàn)著人機(jī)工學(xué)方面的原理，而不再是僅僅用來規(guī)劃內(nèi)容與功能的視覺呈現(xiàn)方式。

拇指熱區(qū)與底部原則

首先，我們需要了解人們通常會(huì)以怎樣的方式將手指?？吭谠O(shè)備上。拿手機(jī)來說，普通青年們多數(shù)會(huì)使用拇指來進(jìn)行觸控操作，所以觸屏手機(jī)的界面交互方案基本是圍繞著拇指來進(jìn)行打造的。

拇指是很不可思議的，據(jù)說它是將我們與動(dòng)物區(qū)分開來的重要標(biāo)志之一...拇指的功能具有相當(dāng)?shù)膹椥裕瑫r(shí)也受到一定的局限。對(duì)于常規(guī)的觸屏手機(jī)來說，我們可以使用拇指掃過屏幕當(dāng)中的大部分區(qū)域，但其中大約只有三分之一屬于真正有效的觸控區(qū)域。所以在設(shè)計(jì)當(dāng)中，要盡量將最重要的界面交互元素放置在這個(gè)范圍當(dāng)中。在右手持機(jī)的狀況下，有效觸控區(qū)域位于屏幕的左下方：

這也正是移動(dòng)系統(tǒng)或應(yīng)用中一些重要的工具欄或?qū)Ш浇Y(jié)構(gòu)通常被放置在界面底部的原因。與此相反的是，在傳統(tǒng)的桌面設(shè)備系統(tǒng)環(huán)境中，導(dǎo)航菜單一類的界面元素通常被放在界面頂部，無論是本地軟件還是網(wǎng)頁基本都是如此。對(duì)于我們有限的拇指作用范圍來說，這種傳統(tǒng)布局方式顯然不能在移動(dòng)設(shè)備的用戶界面當(dāng)中很好的適用。

相比之下，左下角還是右下角的問題略顯次要。我們?cè)趯?shí)際當(dāng)中經(jīng)常會(huì)更改左右手持機(jī)方式，想想看是不是這樣，譬如對(duì)于右撇子來說，當(dāng)他們正在寫字或是需要同時(shí)使用鼠標(biāo)操作桌面設(shè)備時(shí)，通常會(huì)將手機(jī)交于左手操作；而左撇子們則正相反。不過在多數(shù)時(shí)間內(nèi)，使用右手持機(jī)的用戶還是要相對(duì)較多一些。

底部原則可以幫助我們對(duì)界面當(dāng)中的可觸控元素進(jìn)行更好的組織。最常用的功能按鍵應(yīng)該被放在拇指最容易觸摸到的熱點(diǎn)區(qū)域當(dāng)中，而其它相對(duì)次要或是比較敏感的控制元素則應(yīng)該盡量避開這個(gè)區(qū)域。以iOS中的“編輯”按鈕來說，它通常被置于界面右上方，這個(gè)位置即可以保證它清晰可見，同時(shí)又不會(huì)被很容易的觸碰到，以免發(fā)生誤操作。

另外，底部原則不僅與拇指的作用范圍有關(guān)。當(dāng)我們使用拇指在屏幕上進(jìn)行操作的時(shí)候，手指下方的內(nèi)容部分將會(huì)被遮擋住；只有將交互控制元素放在內(nèi)容區(qū)域的下方，才能讓這種負(fù)面效應(yīng)降至。其實(shí)這是一條具有廣泛適用性的設(shè)計(jì)原則，我們可以在很多其他類型的設(shè)備中看到這種原理的體現(xiàn)，例如iPod、計(jì)算器、帶有實(shí)體鍵盤的普通手機(jī)、電子秤等，無不是內(nèi)容在上，控制在下。

我，機(jī)器人(Android)

在Android設(shè)備中，底部原則這檔子事被機(jī)身下方的實(shí)體硬按鍵搞的復(fù)雜了些許，尤其是冰淇淋三明治之前的平臺(tái)。這些硬件級(jí)的控制按鍵占據(jù)著底部區(qū)域，在某種程度上會(huì)與應(yīng)用內(nèi)的底部交互元素形成視覺上的競(jìng)爭(zhēng)。彼此層疊在一起的軟硬件工具欄會(huì)使用戶在快速操作的過程中產(chǎn)生迷惑，增大誤操作的幾率；對(duì)于在兩個(gè)維度上共存于拇指熱區(qū)當(dāng)中的軟硬件按鈕，它們之間的沖突幾乎是不可避免的。

固化的硬按鍵是無法被移除的，避免控制元素之間產(chǎn)生沖突的最直接的辦法就是讓虛擬與實(shí)體的工具欄在視覺上彼此分離，而這就意味著需要將Android應(yīng)用中的相關(guān)控制元素和導(dǎo)航結(jié)構(gòu)放置在用戶界面的頂部。這自然不是最理想的解決辦法，因?yàn)榻缑骓敳侩x拇指熱區(qū)遠(yuǎn)著呢，你要觸摸其中的某個(gè)按鍵時(shí)，幾乎會(huì)將半個(gè)手掌都覆蓋在屏幕上。不過比起與硬件工具欄層疊在一起的方式來說，這種解決方案仍是利大于弊的。

這種將重要的控制及導(dǎo)航元素放在頂部的做法與iOS設(shè)備的方式正相反。雖然iPhone的Home按鍵同樣在機(jī)身底部，但它的表現(xiàn)形式與Android設(shè)備的硬按鍵有很大區(qū)別，它不會(huì)對(duì)應(yīng)用界面底部的相關(guān)操作元素帶來視覺上的干擾。下面的截圖展示了Foursqure應(yīng)用在這兩個(gè)平臺(tái)中的界面設(shè)計(jì)方案對(duì)比：

移動(dòng)版本的網(wǎng)站

毫無疑問，當(dāng)我們?cè)谝苿?dòng)設(shè)備中瀏覽網(wǎng)站頁面時(shí)，類似的問題也會(huì)出現(xiàn)。我們可以將網(wǎng)頁理解為應(yīng)用中的應(yīng)用，因?yàn)樗枰ㄟ^瀏覽器這個(gè)應(yīng)用程序進(jìn)行輸出呈現(xiàn)。移動(dòng)平臺(tái)當(dāng)中的很多瀏覽器都會(huì)將一些常規(guī)的控制元素放在底部工具欄里，這在某種程度上又有可能與頁面當(dāng)中交互元素產(chǎn)生視覺上的沖突。所以，對(duì)于移動(dòng)版本的站點(diǎn)來說，一個(gè)最基本的設(shè)計(jì)原則就是不要將重要的控制元素或?qū)Ш浇Y(jié)構(gòu)通過CSS的position:fixed定位方式固定在用戶界面底部。

不過，與Android應(yīng)用中的解決方案有所不同，對(duì)于Web頁面來說，將控制元素與導(dǎo)航結(jié)構(gòu)放在界面頂部的做法同樣會(huì)產(chǎn)生很大問題。畢竟當(dāng)前絕大多數(shù)的主流觸屏手機(jī)仍屬于小屏幕設(shè)備，而傳統(tǒng)Web頁面的橫向全局導(dǎo)航結(jié)構(gòu)通常由若干包含著一到兩個(gè)詞語的導(dǎo)航項(xiàng)組成，這對(duì)于手機(jī)屏幕來說顯得太擁擠了，我們必須另想辦法來解決導(dǎo)航欄布局的問題。

Luke Wroblewski在Mobile First一書中提到：“在很多移動(dòng)版本的站點(diǎn)中，用戶首先會(huì)看到一大坨導(dǎo)航結(jié)構(gòu)，而不是內(nèi)容。在移動(dòng)應(yīng)用的上下文環(huán)境當(dāng)中，時(shí)間永遠(yuǎn)是寶貴的，流量搞不好是要花錢的有木有，你必須盡最大努力讓用戶在首屏中得到他們最想獲取的信息。”

確實(shí)是這么回事。移動(dòng)版本的站點(diǎn)，在布局方面，應(yīng)該使主要內(nèi)容盡量多的占據(jù)著首屏當(dāng)中的空間，而導(dǎo)航結(jié)構(gòu)則應(yīng)該以某種縮略的形式出現(xiàn)在相對(duì)次要的位置。Wroblewski通過一個(gè)實(shí)例來倡導(dǎo)這個(gè)設(shè)計(jì)模式，也就是Ad Age的移動(dòng)版站點(diǎn) 。其首屏當(dāng)中，除了網(wǎng)站標(biāo)題及內(nèi)容列表之外，右上角的菜單按鈕是界面當(dāng)中唯一一個(gè)交互控制元素。當(dāng)用戶點(diǎn)擊這個(gè)按鈕時(shí)，導(dǎo)航列表才會(huì)出現(xiàn)在屏幕當(dāng)中?？瓷先ィ麄€(gè)導(dǎo)航列表好像是另外一個(gè)界面，但它實(shí)際上是被放置在頁面最下方的，而菜單按鈕只是個(gè)錨點(diǎn)而已。

Wroblewski繼續(xù)發(fā)言：“這個(gè)設(shè)計(jì)方案在首屏當(dāng)中使用了最小化的導(dǎo)航機(jī)制(只有一個(gè)按鈕鏈接)，用戶可以集中精力去閱讀每個(gè)分類當(dāng)中的文章。當(dāng)他們?yōu)g覽至當(dāng)前頁面的底部時(shí)，還可以直接通過導(dǎo)航列表來探索更多的內(nèi)容。最棒的是，頂部的菜單按鈕只是一個(gè)錨點(diǎn)，整個(gè)導(dǎo)航機(jī)制不涉及到任何會(huì)導(dǎo)致交互流程復(fù)雜化的元素，例如JavaScript、覆蓋層或是獨(dú)立的導(dǎo)航頁面等。”

“內(nèi)容在上，控制在下”的規(guī)則看上去蠻簡(jiǎn)單的，不過一旦涉及到實(shí)際的上下文環(huán)境，例如操作系統(tǒng)或?yàn)g覽器的用戶界面特性，設(shè)計(jì)師們要考慮到的情況就變的復(fù)雜了。截至目前，我們可以將討論過的話題歸納為幾點(diǎn)設(shè)計(jì)原則：

• 對(duì)于iPhone中的客戶端應(yīng)用，盡量將重要的交互對(duì)象及導(dǎo)航結(jié)構(gòu)放在界面底部。
• 對(duì)于Android中的客戶端應(yīng)用，盡量將重要的交互對(duì)象及導(dǎo)航結(jié)構(gòu)放在界面頂部。
• 對(duì)于移動(dòng)版本的網(wǎng)站頁面，盡量將導(dǎo)航結(jié)構(gòu)放在頁面底部(注意，不是當(dāng)前用戶界面的底部)

這些設(shè)計(jì)原則僅限于手機(jī)的上下文環(huán)境當(dāng)中，而對(duì)于屏幕規(guī)格較大的觸屏設(shè)備，例如iPad來說，規(guī)則就要發(fā)生變化了。

平板電腦

拇指熱區(qū)的相關(guān)規(guī)則同樣適用于平板電腦，不過，由于持機(jī)方式不同，熱區(qū)的位置也有所變化。iPad的拿法在很大程度上取決于整個(gè)人的姿態(tài)。我們?cè)谡局臅r(shí)候，需要一手持機(jī)一手操作；坐在桌前的時(shí)，我們往往會(huì)用一只手像支架一樣從側(cè)面架住iPad，而另外一只手用來戳戳點(diǎn)點(diǎn)；坐在椅子上的時(shí)候，我們通常會(huì)將它放在膝上進(jìn)行操作；而躺著或是半臥著的時(shí)候，又會(huì)將它立在腹部，一手支撐，一手操作。

每一種持機(jī)方式幾乎都對(duì)應(yīng)著一種特定的熱區(qū)規(guī)則，而且在每一種姿態(tài)當(dāng)中，設(shè)備與我們身體的距離也有所不同。例如，站著的時(shí)候，我們會(huì)把iPad端的比較近，而躺下的時(shí)候就相對(duì)較遠(yuǎn)了。

雖然聽上去有些復(fù)雜，不過在這些上下文情景當(dāng)中的交互行為還是存有一些共同特征的。首先，用來持機(jī)的那只手通常會(huì)握住機(jī)身的上半部分，因?yàn)檫@樣最符合杠桿原理；相應(yīng)的，拇指熱區(qū)基本會(huì)位于屏幕的前三分之一部分，偏向左上角或右上角。其次，iPad的屏幕相對(duì)較大，用戶很難像使用iPhone那樣瞄上一眼就能看到界面當(dāng)中的幾乎全部內(nèi)容。正像對(duì)待普通的印刷品或是Web頁面那樣，用戶通常會(huì)首先將目光聚焦于iPad界面的頂部區(qū)域，所以我們的設(shè)計(jì)方案也要相應(yīng)的在這一點(diǎn)上符合用戶習(xí)慣。換句話說，在操作iPad的過程中，無論是目光還是手指，它們的主要活動(dòng)區(qū)域都是設(shè)備的上半部分。而機(jī)身的下半部分不僅會(huì)在很多時(shí)候被用戶視而不見，而且在某些特定的環(huán)境中它真的是不可見的，例如當(dāng)我們躺在床上的時(shí)候，這部分很可能被衣物或被子遮擋住，實(shí)在是悲催。

所以，與手機(jī)界面不同，在iPad及同類平板設(shè)備的應(yīng)用當(dāng)中，主要的交互控制對(duì)象應(yīng)該被放置在界面的左上角或右上角，以便拇指可以很容易的觸摸到。Instapaper和Twitter在這方面做的都不錯(cuò)：

需要注意的是，應(yīng)該盡量避免將交互元素放在屏幕頂端正中間的位置，否則用戶在進(jìn)行操作的時(shí)候，手掌會(huì)將很大一部分內(nèi)容遮住。實(shí)際上，任何會(huì)對(duì)下方內(nèi)容產(chǎn)生直接控制作用的交互元素都不應(yīng)該被放在這個(gè)位置。在The Daily的iPad應(yīng)用 當(dāng)中，內(nèi)容正上方有一個(gè)滑塊，用戶可以通過拖動(dòng)它來前后切換文章頁面。意圖不錯(cuò)，不過當(dāng)你執(zhí)行這個(gè)操作的時(shí)候就會(huì)發(fā)現(xiàn)，自己的手掌會(huì)遮擋住文章內(nèi)容，而手指則會(huì)擋住縮略圖，體驗(yàn)弱爆了。單憑這一個(gè)地方的疏忽，這個(gè)設(shè)計(jì)方案就足夠作為反例登場(chǎng)了。

又一個(gè)底部原則

我們可以從The Daily的失策當(dāng)中了解到，對(duì)于iPad應(yīng)用來說，在某些特定的情況下，控制元素還是避開頂端微妙。你可以將它們放在底部甚至側(cè)面，只要控制元素本身及其所需的交互行為不會(huì)對(duì)內(nèi)容的可讀性造成影響。我們來看看Sydney Morning Herald's的iPad應(yīng)用 是怎樣做的。如下圖所示，在該應(yīng)用的界面底部有一個(gè)頁碼指示器，當(dāng)用戶對(duì)其進(jìn)行拖動(dòng)操作的時(shí)候，對(duì)應(yīng)頁面中的文章標(biāo)題就會(huì)以列表的形式出現(xiàn)在指示器的上方，使用戶不用翻頁就能大致了解其他頁面當(dāng)中的內(nèi)容。雖然文章標(biāo)題列表會(huì)將頁面中的內(nèi)容遮擋住，但在這個(gè)交互情景當(dāng)中，用戶最為關(guān)注的是列表中的文章標(biāo)題，而不再是原來的主要內(nèi)容區(qū)。

對(duì)于在不同的情況下究竟應(yīng)該將控制元素放在頂部還是底部的問題，我們不妨在這里弱弱的歸納一下：

• 對(duì)于那些起到界面導(dǎo)航作用的交互元素(例如“菜單”、“返回”、“關(guān)閉”等)，以及用來完成分享、收藏、編輯、刪除等功能的按鈕，通?？梢詫⑺鼈兎胖迷诮缑骓敳?。
• 對(duì)于那些用于瀏覽或預(yù)覽內(nèi)容的控制元素來說，界面底部是最佳位置。

所以，我們可以在很多書籍或雜志應(yīng)用當(dāng)中看到，頁面縮略圖列表通常會(huì)被放在界面底部。(可以參考之前iPad應(yīng)用的十大用戶體驗(yàn)設(shè)計(jì)準(zhǔn)則 一文當(dāng)中展示的Martha Stewart Living雜志以及Pulse的設(shè)計(jì)方案)假設(shè)你正在設(shè)計(jì)一款與地圖相關(guān)的應(yīng)用，界面當(dāng)中有一個(gè)地標(biāo)托盤，用戶可以將地標(biāo)從這個(gè)托盤當(dāng)中拖拽出來，并“按”在地圖上的某個(gè)地方。在這個(gè)例子當(dāng)中，托盤同樣應(yīng)該被放在界面底部，這樣可以保證當(dāng)用戶從托盤里將地標(biāo)拖拽出來的時(shí)候，地圖不至于被手遮擋住。

交互對(duì)象的尺寸

如果說交互對(duì)象的布局位置取決于平臺(tái)類型及持機(jī)方式，那么它們的尺寸則在很大程度上由手指的大小來決定。我們必須將這些交互元素設(shè)計(jì)的足夠大，才能保證用戶可以進(jìn)行準(zhǔn)確的辨識(shí)和觸擊。

不過，要做的多大才算夠呢？不妨抬起手看看自己的指尖。很多系統(tǒng)平臺(tái)的設(shè)計(jì)規(guī)范都在這方面進(jìn)行了描述，不過我個(gè)人覺得蘋果做的仍是最棒的：理論上，可觸擊元素的最小尺寸應(yīng)該為44像素(約1/4英寸或7毫米)見方。

The comfortable minimum size of tappable UI elements is 44 x 44 points.

請(qǐng)注意point與pixel的換算關(guān)系在Retina屏與普通屏幕之間區(qū)別。

在移動(dòng)應(yīng)用的上下文環(huán)境中，足夠大的按鈕不僅便于操作，而且可以讓用戶維持必要的注意力，避免被周圍的環(huán)境所干擾。

44像素見方的最小規(guī)格只是一種理想狀態(tài)下的情況，在實(shí)際當(dāng)中，合理的折中方案通常是必需的。即使是iPhone用戶界面中的很多原生控件也避開了這個(gè)規(guī)則的限制。最典型的一個(gè)例子就是系統(tǒng)自帶的鍵盤，其中每一個(gè)鍵位的高度是44像素，但寬度只有30像素；而橫屏狀態(tài)下，其寬度是44像素，高度則變?yōu)?8像素。不過這也是蘋果的無奈之舉，因?yàn)樵鯓佣急仨殞⑼暾腝WERTY鍵盤搞到界面當(dāng)中，所以必須在設(shè)計(jì)方案當(dāng)中有所取舍。

參考蘋果的做法，當(dāng)空間的局限使得我們確實(shí)無法實(shí)現(xiàn)44像素見方的設(shè)計(jì)方案時(shí)，應(yīng)該盡量保證其44×30的最小規(guī)格。

元素的尺寸與空間布局

上個(gè)世紀(jì)，不少人都被卡西歐的計(jì)算器手表浪費(fèi)了大量的青春年華。問題不僅僅在于那些微小的按鍵會(huì)讓戴著它的人看上去很二，最不靠譜的是，這些按鍵的排布實(shí)在是太緊密了。你想按5，但通常會(huì)按到8或是2；與其說是計(jì)算器，還不如叫它幸運(yùn)轉(zhuǎn)盤更合適些。尺寸過小的按鍵以及毫無間隔空間的布局，是產(chǎn)生這種結(jié)果的兩個(gè)最直接的原因。

為小屏幕設(shè)備進(jìn)行界面設(shè)計(jì)的時(shí)候，這類挑戰(zhàn)確實(shí)是我們經(jīng)常需要面對(duì)的，而造成問題的根本原因卻通常不是產(chǎn)品需求本身。無論是在計(jì)算器手表的全盛期，還是如今，我們時(shí)常會(huì)聽到產(chǎn)品需求方翻來覆去的念叨著：“咱就把這些東西再挪近一些吧...我只想在這個(gè)工具欄里再加一個(gè)按鈕...” 加你妹啊！

如果我們必須在設(shè)計(jì)方案當(dāng)中將交互元素排布的非常緊密，那么至少要把它們各自的尺寸盡量做大。想想iPhone原生的撥號(hào)鍵盤界面，或是Skype等應(yīng)用。界面當(dāng)中的撥號(hào)按鍵之間的間隔通常都很小，甚至沒有間距；而每個(gè)按鍵的尺寸幾乎可以用巨大來形容，因?yàn)檫@樣可以有效的降低誤操作的幾率。

其實(shí)，無論是iPhone原生的撥號(hào)界面，還是上圖所示的Skype中的同類界面，它們都在底部導(dǎo)航工具欄的上方放置了一些控制按鍵。如果以我們?cè)谇拔漠?dāng)中提到的一些原則標(biāo)準(zhǔn)來衡量的話，這種做法其實(shí)不算得當(dāng)；但是在這幾個(gè)具體的情景當(dāng)中，這些控制按鍵的大尺寸特質(zhì)卻可以有效的降低它們與底部導(dǎo)航工具欄之間的視覺沖突。

所以，要在有限的小屏幕可視區(qū)域當(dāng)中打造出成功的用戶界面設(shè)計(jì)方案，我們必須結(jié)合實(shí)際的產(chǎn)品需求，在交互元素的尺寸和空間布局等方面做好充分的權(quán)衡與判斷。