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

在這篇文章，我將分享一些我了解到的拇指區(qū)域的知識(shí)和如何將這些知識(shí)用到導(dǎo)航，卡片和滑動(dòng)手勢(shì)中。

如果有一件事可以經(jīng)得住時(shí)間的考驗(yàn)，那便是在移動(dòng)端關(guān)于拇指的位置設(shè)計(jì)了?！蹦粗竻^(qū)域“在Stevenhoober研究中作為一個(gè)術(shù)語(yǔ)被我們認(rèn)識(shí)，它是移動(dòng)界面的設(shè)計(jì)和開(kāi)發(fā)中的一個(gè)重要因素。

試問(wèn)你曾經(jīng)使用過(guò)一個(gè)簡(jiǎn)單到不需要使用拇指就能操作的手機(jī)網(wǎng)站或者手機(jī)應(yīng)用嗎？可能你曾經(jīng)非常艱難的去點(diǎn)擊到一個(gè)重要的菜單，像這樣的情況顯然是因?yàn)楹苌倏紤]拇指區(qū)域。

正像之前提到的，steven hoober在《手機(jī)界面設(shè)計(jì)》中研究指出了拇指區(qū)。這是我第一次遇見(jiàn)在開(kāi)發(fā)中的一個(gè)需要著重考慮的拇指的概念。沿著steven hoober的研究，Josh Clark 在他的《為了觸摸設(shè)計(jì)》一書(shū)中記錄了關(guān)于人們?nèi)绾问褂盟麄兊脑O(shè)備的更深入的研究。使用steven hoober和Josh Clark 的拇指如何在設(shè)備上交互的研究，我使用元素在不同位置的線框圖做了用戶測(cè)試。測(cè)試了導(dǎo)航在屏幕的底部和頂部，不同位置的按鈕的卡片和在拇指區(qū)以內(nèi)或者之外的手勢(shì)區(qū)。測(cè)試結(jié)果驗(yàn)證了steven hoober和Josh Clark 的研究，并且提供了在設(shè)計(jì)中什么是有效的什么是無(wú)效的真實(shí)依據(jù)。我也將分享關(guān)于我們測(cè)試的關(guān)于設(shè)計(jì)元素的一些發(fā)現(xiàn)。讓我們開(kāi)始吧。

拇指VS觸屏

擁有相對(duì)獨(dú)立的拇指是美妙的！除了使得我們比水母更酷以外，拇指也是我們?nèi)绾瓮謾C(jī)設(shè)備觸屏進(jìn)行交互的關(guān)鍵。steven hoober的研究指出超過(guò)49%的人們用一只手使用它們的智能手機(jī)，并且依靠大拇指來(lái)承擔(dān)這個(gè)重任。Josh Clark更進(jìn)一步斷定75%的交互是拇指驅(qū)動(dòng)的。用這種對(duì)手的位置的理解，我們可以推斷出拇指活動(dòng)的特殊區(qū)域在支持大多數(shù)智能手機(jī)。我們定義這些區(qū)域?yàn)橐子谟|及的，難以觸及的和介于兩者之間的三個(gè)部分。

我們?yōu)樽笫钟沂值挠脩衾L制了拇指區(qū)圖，重疊區(qū)域展示了大多數(shù)用戶最好觸及的區(qū)域。

關(guān)鍵是為用戶拇指區(qū)域去設(shè)計(jì)，這里為更好地做出設(shè)計(jì)決策，創(chuàng)造人性化的體驗(yàn)和更少陷入困惑提供了一個(gè)框架。通過(guò)用戶測(cè)試和實(shí)驗(yàn)，我發(fā)現(xiàn)了一些工作中每天都使用這些知識(shí)的方法。

導(dǎo)航的問(wèn)題

我們都記得這一幕，手機(jī)導(dǎo)航是一個(gè)底部tab切換菜單，這不是好看的但他可以很好完成任務(wù)。今天，我們看到了無(wú)數(shù)導(dǎo)航設(shè)計(jì)的例子，什么是最適合拇指區(qū)使用的的呢？然而我了解到的用戶自然反應(yīng)是首先陷入思考。問(wèn)問(wèn)題；“我使用的應(yīng)用有一個(gè)很長(zhǎng)的鏈接列表嗎？”我是否需要混合菜單？ 什么和我的網(wǎng)頁(yè)設(shè)計(jì)比較搭呢？去問(wèn)這些問(wèn)題將會(huì)幫助你決定什么位置放導(dǎo)航觸發(fā)器什么位置放選擇工具。

如果你的應(yīng)用有一個(gè)很長(zhǎng)的鏈接列表，你很可能會(huì)用覆蓋全屏的菜單.這種類型的菜單為您提供足夠的空間組織列表,社交按鈕和其他有用的內(nèi)容。他可以在臺(tái)式電腦和移動(dòng)設(shè)備上自由適配，同時(shí)這種菜單提供了一個(gè)在拇指區(qū)內(nèi)排列點(diǎn)擊的選項(xiàng)。

huge在移動(dòng)端使用覆蓋全屏的菜單：

huge使用覆蓋全屏的菜單

相反，如果你的app沒(méi)有長(zhǎng)的鏈接列表，一個(gè)標(biāo)簽菜單會(huì)更適合。這種樣式的菜單根據(jù)設(shè)計(jì)可以放在屏幕的頂部或者底部，并且可以提供重要的預(yù)定，消息和清單信息。

airbnb手機(jī)APP使用標(biāo)簽導(dǎo)航，放在了屏幕底部，更容易接受預(yù)定，消息，列表的重要信息。

airbnb的手機(jī)APP有一個(gè)固定的導(dǎo)航

如果你有一個(gè)大型的網(wǎng)站，混合菜單將會(huì)更有效果。因?yàn)榛旌喜藛螌?huì)變得更復(fù)雜，所以基于APP內(nèi)容的重要性去設(shè)計(jì)菜單鏈接的順序是有效的方法。

標(biāo)簽（直譯為粘合）菜單很適合普通的訪問(wèn)鏈接，而全屏菜單和抽屜菜單更適合重要的鏈接而不是頻繁使用的鏈接。

看下facebook的APP：

如上圖，F(xiàn)acebook的手機(jī)APP結(jié)合了大量的修改后的菜單和抽屜。

Facebook的混合菜單是基于內(nèi)容大小的。在屏幕的中間部分，我們可以看到有兩個(gè)標(biāo)簽菜單，各自都包含了對(duì)于用戶有價(jià)值的鏈接。頂部的標(biāo)簽菜單在伸展區(qū)域，在頁(yè)面中很淺顯看起來(lái)很舒服。底部的標(biāo)簽菜單被設(shè)計(jì)成更易于點(diǎn)擊的熱門(mén)鏈接。通過(guò)手機(jī)用戶數(shù)據(jù)，利用拇指區(qū)域嘗試做好的設(shè)計(jì),Facebook正在使用標(biāo)簽菜單。下次當(dāng)你正在使用你朋友的郵箱時(shí)，記得這些決策，這會(huì)幫助你設(shè)計(jì)更好的使用體驗(yàn)。記住除去在拇指區(qū)域使用重要的導(dǎo)航，被放在拇指區(qū)域以外的鏈接也是可以讓用戶接收的。通常我們會(huì)將經(jīng)常使用的鏈接放在拇指區(qū)域，不是經(jīng)常使用的鏈接放在難以觸及的區(qū)域。

保持友好的卡片

下面，我們一起探討：一個(gè)好的卡片設(shè)計(jì)怎么為你的app使用？

卡片模式一直被廣泛使用。卡片是快速的，簡(jiǎn)單的，可被預(yù)知的。他們將大量的信息分解成小信息，使得他們?nèi)菀自诤线m的時(shí)間出現(xiàn)合適的內(nèi)容。我們經(jīng)常使用卡片去：發(fā)送，保存，完成，關(guān)閉等等操作。

ponch 天氣預(yù)報(bào)的卡片設(shè)計(jì)

我們經(jīng)在這個(gè)例子里我們看到這個(gè)ponch,天氣預(yù)報(bào)的APP。這一個(gè)很好的使用卡片放置一個(gè)可點(diǎn)擊的鏈接：天氣預(yù)報(bào)不需要拇指點(diǎn)擊，因此他被設(shè)計(jì)在了不易點(diǎn)擊的區(qū)域。而主要的任務(wù)項(xiàng)-分享按鈕-被放在了易于點(diǎn)擊區(qū)域。一方面，ponch 將搜索位置和使用當(dāng)前位置的鏈接放在難以點(diǎn)擊的區(qū)域。這是可以接受的：用戶不會(huì)經(jīng)常使用這些功能，因?yàn)锳PP會(huì)記住你最近一次打開(kāi)時(shí)候的位置。另一方面，很多時(shí)候卡片模式不會(huì)被使用在拇指區(qū)域。一個(gè)最直接的例子是esty這個(gè)APP，在結(jié)帳,etsy為用戶提供一個(gè)表單彈窗用以填入送貨信息:

乍一看，這種卡片的用法看似合理和專業(yè)的。深入的研究后,我們看到的缺點(diǎn)。第一個(gè)問(wèn)題是取消按鈕在左上角。這個(gè)取消按鈕是用來(lái)關(guān)閉彈窗卡片的還是取消結(jié)賬的呢？（如果我感到困惑，那么我確信其他人會(huì)和我一樣困惑）,關(guān)閉X鍵在拇指區(qū)域的邊緣，使得用戶很難點(diǎn)擊到它。

這是一個(gè)兩難的選擇：增加一個(gè)關(guān)閉按鈕在卡片的頂部拐角是一個(gè)普遍的設(shè)計(jì)思路，但他會(huì)影響到拇指區(qū)域的標(biāo)題。如果你去打破拇指區(qū)域去滿足用戶期望，尋找一種替代性的解決方案。我會(huì)建議你增加一個(gè)關(guān)閉按鈕在卡片底部，由于在傳播簡(jiǎn)短語(yǔ)句時(shí)卡片是最好的，我們可以限制在卡片上的內(nèi)容的長(zhǎng)度?？ㄆO(shè)計(jì)一直被沿用，通過(guò)拇指區(qū)域去進(jìn)行設(shè)計(jì)來(lái)確保更多的元素是簡(jiǎn)單易用的，而不是讓人困惑的是一個(gè)好方法。為了避免跟風(fēng)，相反要把以用戶為中心的設(shè)計(jì)原則貫穿在整個(gè)APP的設(shè)計(jì)和開(kāi)發(fā)中。

手勢(shì)和動(dòng)作

手勢(shì)：點(diǎn)擊，雙擊，滑動(dòng)，拖拽，捏合，按。這些都是智能手機(jī)最表象的東西。手勢(shì)使得我們可以通過(guò)觸覺(jué)去使用產(chǎn)品。你可能會(huì)猜到我們將在拇指區(qū)域使用手勢(shì)。然而最重要的是，要讓用戶自然地使用手勢(shì)。這似乎是顯而易見(jiàn)的,但要真正實(shí)現(xiàn)一個(gè)舒適的體驗(yàn),重要的是要預(yù)測(cè)手勢(shì)應(yīng)該發(fā)生的位置。

我們專注在滑動(dòng)的交互。通過(guò)使用滑動(dòng)軌跡的插件，我發(fā)現(xiàn)了一些有趣的手勢(shì)滑動(dòng)數(shù)據(jù)。

在上面這個(gè)圖中，圓圈代表點(diǎn)擊，箭頭代表滑動(dòng)。測(cè)試的數(shù)據(jù)顯示用戶經(jīng)常滑動(dòng)某個(gè)地方從邊緣到中間的位置，并且是斜著的。同時(shí)我也發(fā)現(xiàn)用戶通常會(huì)在拇指區(qū)域的舒適區(qū)滑動(dòng)。最初，在這個(gè)需要在拇指區(qū)滑動(dòng)手勢(shì)的測(cè)試前，我誤認(rèn)為用戶會(huì)水平滑動(dòng)，那是因?yàn)槲业脑O(shè)計(jì)規(guī)范中沒(méi)有提供足夠的空間去滑動(dòng)。后來(lái)像大多數(shù)手機(jī)端的設(shè)計(jì)，我考慮滑動(dòng)時(shí)拇指需要的空間。發(fā)現(xiàn)合適的滑動(dòng)區(qū)域的尺寸是長(zhǎng)寬至少要45個(gè)像素。

通過(guò)以上描述，我們可以總結(jié)出，當(dāng)有足夠的空間防止誤觸時(shí)，在易于點(diǎn)擊的區(qū)域去設(shè)計(jì)手勢(shì)操作是很好的。

• 一個(gè)最好的滑動(dòng)手勢(shì)的例子是谷歌的inbox APP
• 一個(gè)google的inbox app 在合適的位置使用了滑動(dòng)手勢(shì)，同時(shí)也有合適的空間

這里有這些明智的決策：

1. 保證滑動(dòng)手勢(shì)在難以觸及的區(qū)域之外
2. 給出足夠的點(diǎn)擊區(qū)域，
3. 允許每一個(gè)郵件區(qū)域的元素中從任何地方都可以滑動(dòng)

有了這些，手勢(shì)操作會(huì)是自然舒適的，也使得電子郵箱的管理更加的快速簡(jiǎn)單。

堅(jiān)持到底 Google！

總結(jié)

我們能學(xué)到什么呢？希望你可以理解為什么拇指區(qū)域是很重要的。記住這些點(diǎn)：

1. 移動(dòng)設(shè)備和語(yǔ)言會(huì)改變，但是只要有觸摸屏，拇指區(qū)域就仍是設(shè)計(jì)的關(guān)鍵部分；
2. 當(dāng)重要的鏈接被放在易于點(diǎn)擊的區(qū)域，而不重要的鏈接被放在難以觸及的區(qū)域時(shí)，導(dǎo)航設(shè)計(jì)是適合拇指使用的；
3. 當(dāng)內(nèi)容和動(dòng)作很適合拇指區(qū)域，卡片設(shè)計(jì)有著很好的優(yōu)勢(shì)；
4. 當(dāng)我們?cè)诳紤]一個(gè)人如何在玻璃屏幕上滑動(dòng)時(shí)，決定使用滑動(dòng)手勢(shì)區(qū)域?qū)?huì)更簡(jiǎn)單易用。

我是小北，廣美交互專業(yè)的童鞋，今天分享的是我翻國(guó)外設(shè)計(jì)師的一篇文章，希望我們可以一起學(xué)習(xí)前人經(jīng)驗(yàn)，一起進(jìn)步。當(dāng)然，后面我也會(huì)分享一些我個(gè)人的設(shè)計(jì)案例給大家，希望對(duì)大家有所幫助！

翻譯：史亮，校對(duì)：郜蕾

來(lái)源：http://www.jianshu.com/p/78f9202e00fe

本文由 @我是小北?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。