手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

為了觸屏移動(dòng)設(shè)備而設(shè)計(jì)

2013-1-3    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.88yangsc.com  )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(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ù)

 來(lái)源: http://beforweb.com/node/49

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

于移動(dòng)設(shè)備的操作系統(tǒng)及應(yīng)用來(lái)說(shuō),判斷其用戶界面設(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é)方面的原理,而不再是僅僅用來(lái)規(guī)劃內(nèi)容與功能的視覺呈現(xiàn)方式

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

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

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

點(diǎn)擊查看原圖

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

相比之下,左下角還是右下角的問題略顯次要。我們?cè)趯?shí)際當(dāng)中經(jīng)常會(huì)更改左右手持機(jī)方式,想想看是不是這樣,譬如對(duì)于右撇子來(lái)說(shuō),當(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中的“編輯”按鈕來(lái)說(shuō),它通常被置于界面右上方,這個(gè)位置即可以保證它清晰可見,同時(shí)又不會(huì)被很容易的觸碰到,以免發(fā)生誤操作。

點(diǎn)擊查看原圖

另外,底部原則不僅與拇指的作用范圍有關(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ī)、電子秤等,無(wú)不是內(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)中的軟硬件按鈕,它們之間的沖突幾乎是不可避免的。

點(diǎn)擊查看原圖

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

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

點(diǎn)擊查看原圖

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

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

不過,與Android應(yīng)用中的解決方案有所不同,對(duì)于Web頁(yè)面來(lái)說(shuō),將控制元素與導(dǎo)航結(jié)構(gòu)放在界面頂部的做法同樣會(huì)產(chǎn)生很大問題。畢竟當(dāng)前絕大多數(shù)的主流觸屏手機(jī)仍屬于小屏幕設(shè)備,而傳統(tǒng)Web頁(yè)面的橫向全局導(dǎo)航結(jié)構(gòu)通常由若干包含著一到兩個(gè)詞語(yǔ)的導(dǎo)航項(xiàng)組成,這對(duì)于手機(jī)屏幕來(lái)說(shuō)顯得太擁擠了,我們必須另想辦法來(lái)解決導(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í)例來(lái)倡導(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í)際上是被放置在頁(yè)面最下方的,而菜單按鈕只是個(gè)錨點(diǎn)而已。

點(diǎn)擊查看原圖

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

“內(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)站頁(yè)面,盡量將導(dǎo)航結(jié)構(gòu)放在頁(yè)面底部(注意,不是當(dāng)前用戶界面的底部)

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

平板電腦

拇指熱區(qū)的相關(guān)規(guī)則同樣適用于平板電腦,不過,由于持機(jī)方式不同,熱區(qū)的位置也有所變化。iPad的拿法在很大程度上取決于整個(gè)人的姿態(tài)。我們?cè)谡局臅r(shí)候,需要一手持機(jī)一手操作;坐在桌前的時(shí),我們往往會(huì)用一只手像支架一樣從側(cè)面架住iPad,而另外一只手用來(lái)戳戳點(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)中的交互行為還是存有一些共同特征的。首先,用來(lái)持機(jī)的那只手通常會(huì)握住機(jī)身的上半部分,因?yàn)檫@樣最符合杠桿原理;相應(yīng)的,拇指熱區(qū)基本會(huì)位于屏幕的前三分之一部分,偏向左上角或右上角。其次,iPad的屏幕相對(duì)較大,用戶很難像使用iPhone那樣瞄上一眼就能看到界面當(dāng)中的幾乎全部?jī)?nèi)容。正像對(duì)待普通的印刷品或是Web頁(yè)面那樣,用戶通常會(huì)首先將目光聚焦于iPad界面的頂部區(qū)域,所以我們的設(shè)計(jì)方案也要相應(yīng)的在這一點(diǎn)上符合用戶習(xí)慣。換句話說(shuō),在操作iPad的過程中,無(wú)論是目光還是手指,它們的主要活動(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ò):

點(diǎn)擊查看原圖

點(diǎn)擊查看原圖

需要注意的是,應(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)它來(lái)前后切換文章頁(yè)面。意圖不錯(cuò),不過當(dāng)你執(zhí)行這個(gè)操作的時(shí)候就會(huì)發(fā)現(xiàn),自己的手掌會(huì)遮擋住文章內(nèi)容,而手指則會(huì)擋住縮略圖,體驗(yàn)弱爆了。單憑這一個(gè)地方的疏忽,這個(gè)設(shè)計(jì)方案就足夠作為反例登場(chǎng)了。

點(diǎn)擊查看原圖

又一個(gè)底部原則

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

點(diǎn)擊查看原圖

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

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

所以,我們可以在很多書籍或雜志應(yīng)用當(dāng)中看到,頁(yè)面縮略圖列表通常會(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)中拖拽出來(lái),并“按”在地圖上的某個(gè)地方。在這個(gè)例子當(dāng)中,托盤同樣應(yīng)該被放在界面底部,這樣可以保證當(dāng)用戶從托盤里將地標(biāo)拖拽出來(lái)的時(shí)候,地圖不至于被手遮擋住。

交互對(duì)象的尺寸

如果說(shuō)交互對(duì)象的布局位置取決于平臺(tái)類型及持機(jī)方式,那么它們的尺寸則在很大程度上由手指的大小來(lái)決定。我們必須將這些交互元素設(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像素。不過這也是蘋果的無(wú)奈之舉,因?yàn)樵鯓佣急仨殞⑼暾腝WERTY鍵盤搞到界面當(dāng)中,所以必須在設(shè)計(jì)方案當(dāng)中有所取舍。

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

元素的尺寸與空間布局

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

點(diǎn)擊查看原圖

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

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

點(diǎn)擊查看原圖

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

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

分享本文至:

日歷

鏈接

個(gè)人資料

存檔