中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

你有沒有遇到過一款A(yù)PP讓你用的很不舒服？你的拇指必須要伸得老遠(yuǎn)才能夠得到菜單，或者頁面里元素太多導(dǎo)致你經(jīng)常誤操作。這些都是因?yàn)榻换ピO(shè)計師在設(shè)計的時候沒有考慮拇指的感受，或者更學(xué)術(shù)化點(diǎn)說，沒有考慮到“拇指法則”。

“拇指法則”是資深交互設(shè)計大神Steven Hoober在2013年對1300名手機(jī)用戶的調(diào)查研究后提出來一個新名詞。他通過研究發(fā)現(xiàn)，49%的用戶都是單手拿著手機(jī)，使用拇指進(jìn)行操作。甚至某些大屏手機(jī)使我們不得不進(jìn)行雙手持握的時候，多數(shù)人也還是傾向于使用自己的拇指。Josh Clark在另一項(xiàng)研究中也得出了類似的結(jié)論，他指出：75%的手機(jī)交互都是由拇指完成的。因此我們也可以說，對觸摸屏手機(jī)進(jìn)行交互設(shè)計，主要針對的就是拇指。

人類的拇指遠(yuǎn)比猿類靈活有力，使人類擁有了準(zhǔn)確的抓握能力，最終發(fā)展出使用工具的能力 。然而在手機(jī)操作中，拇指的可操作區(qū)域是有限的。如果我們竭盡全力，拇指可以在整個手機(jī)屏幕上進(jìn)行操作（大屏手機(jī)除外），但是這也會影響用戶使用的舒適度。

上圖就是手指在手機(jī)的活動范圍熱圖，我們通過到拇指距離將其分為Natural區(qū)（容易操作），Stretching區(qū)（拇指需要伸直才能操作）和Hard區(qū)（拇指比較難操作）。這個手指活動熱圖可以在我們產(chǎn)品原型圖設(shè)計時提供很多幫助，比如將一些用戶經(jīng)常用到的功能放到Natural區(qū)或Stretching區(qū)，一些用戶不怎么使用的模塊可以放到Hard區(qū)。

導(dǎo)航菜單

我們都記得曾經(jīng)有一段時間手機(jī)的導(dǎo)航功能是通過下拉列表來實(shí)現(xiàn)的，用戶通過點(diǎn)擊列表里的相應(yīng)的鏈接進(jìn)入特定的頁面。這種設(shè)計雖然不好看，但是卻很實(shí)用。最起碼它實(shí)現(xiàn)了導(dǎo)航的基本功能：告訴用戶“他們在哪兒？”以及“他們能去哪兒？”。現(xiàn)如今新的設(shè)計理念不斷涌入到導(dǎo)航設(shè)計中，那么哪種導(dǎo)航模式最適合我們的拇指呢？

如果使用一個長的鏈接列表來做導(dǎo)航菜單的話，那么全屏菜單這個模式可能會更加適合一些。因?yàn)樗械牧斜眄?xiàng)都處于拇指容易操作的區(qū)域，而且元素都足夠大也不會發(fā)生誤操作的情況。

當(dāng)然，我們也可以將導(dǎo)航菜單欄放在頂部或者底部，這種設(shè)計模式也可以提供多條鏈接。比如新浪微博，將用戶主要使用的功能都放在底部欄中，用戶可以很容易的進(jìn)行操作。

如果你的網(wǎng)站內(nèi)容比較多，混合模式的導(dǎo)航菜單可能會更加適合。網(wǎng)易云采用的就是混合模式的菜單布局，我們可以看到底部和頂部各有一個菜單欄，頂部菜單欄處于Stretching區(qū)，拇指可以相對容易的進(jìn)行操作。而“發(fā)現(xiàn)音樂”，“我的音樂”，“朋友”和“帳號”這四個用戶使用頻率更高的功能被放在Natural區(qū)，拇指可以很方便的進(jìn)行操作。

友好式卡片設(shè)計

卡片式設(shè)計現(xiàn)在大行其道，被廣泛應(yīng)用?？ㄆ皆O(shè)計可以快速直接的將信息展示出來，比如新消息，天氣，日程等信息直接在卡片上呈現(xiàn)。接下來我們將通過兩個例子來看“拇指法則”在卡片設(shè)計中應(yīng)用。

在上面這款天氣類APP中，我們可以看到“城市搜索”和“使用當(dāng)前位置”被放在頁面最頂部的Hard區(qū)，這是因?yàn)橄到y(tǒng)會記住你上次打開應(yīng)用時的位置。而我們一般只關(guān)注自身所在地的天氣情況，所有以上的兩個功能我們很少會用到。那么一款天氣類APP肯定希望可以得到推廣以贏得更多的用戶，所有將“分享”按鈕放在Natural區(qū)來誘導(dǎo)客戶將其分享到朋友圈。

看完好的例子，接下來再看一個反面典型，這是一個電商APP的購買流程頁面，點(diǎn)擊“添加新的收貨地”會彈出一個表單。這個頁面乍一看沒什么問題，但是仔細(xì)一觀察就會發(fā)現(xiàn)問題。首先，頁面左上方的“取消”鏈接會給人帶來誤解，如果我點(diǎn)擊它那么是整個購買流程被取消還是“添加新的收獲地”這個操作被取消？還有表單右上方的關(guān)閉按鈕位于Hard區(qū)的邊緣，拇指很難進(jìn)行直接有效的操作。這時最好的方法就是縮減表單內(nèi)容，讓關(guān)閉按鈕可以下降到Natural區(qū)。我們要知道卡片式設(shè)計最吸引人之處就是其可以在很小屏幕區(qū)域內(nèi)展示盡量多的內(nèi)容，卡片的本身也對信息進(jìn)行了歸類整理的作用，使用戶看的一目了然。如果我們一味著追求設(shè)計感而使卡片內(nèi)容過于臃腫這無異丟掉了卡片固有短小精悍的精髓。

手勢

在上圖中，圓圈代表點(diǎn)擊，剪頭代表滑動。研究數(shù)據(jù)表明，用戶習(xí)慣于由邊緣向中間滑動和由上向下滑動。而且大部分滑動操作都是在Natural區(qū)完成。

我以前誤以為滑動的時候是完全水平方向的，這讓我在設(shè)計過程中給單個元素的滑動高度過小，因?yàn)槲覜]有考慮用戶向下滑動的距離。這樣就導(dǎo)致了用戶在滑動過程中會觸碰到下面的其他元素。最后我經(jīng)過多次的實(shí)驗(yàn)發(fā)現(xiàn)一個的滑動手勢的完成最少是45*45像素。

谷歌的Inbox就是一個很好的例子。

總結(jié)

1、移動端設(shè)備不斷在變化，新的技術(shù)也不斷涌現(xiàn)。但是只要是觸摸屏這種交互模式還在，那么拇指就是設(shè)計環(huán)節(jié)中必須要考慮的一個因素。

2、友好式卡片設(shè)計意味著重要的功能（或者你希望用戶操作）要位于拇指容易操作的區(qū)域，不重要的功能可以放在拇指不容易操作的區(qū)域。

3、讓滑動手勢盡量遠(yuǎn)離拇指難以觸碰的范圍，?提供足夠大的點(diǎn)擊區(qū)域，避免誤操作。

本文由 @王M爭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。