【每周一譯_w5】拇指區(qū):為手機用戶而設計

原文標題:The Thumb Zone: Designing For Mobile Users

作者:Samantha Ingram

原文鏈接:https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/


譯文正文:

如果有能經受住時間考驗的一件事情,那就是移動設備上放置拇指毫目。這就使得一個Steven Hoober創(chuàng)造的詞語“拇指區(qū)(thumb zone)”棘利,成為一個在設計和開發(fā)移動界面時要考慮到的重要因素淋肾。

你是否遇到過在使用移動端網站和app的時候媒抠,很難用你的拇指去舒服的操作?或許你不得不努力伸展手指才能按到一個重要的菜單洒敏,或者滑動操作的時候變成一場與多種可滑動元素的戰(zhàn)爭龄恋。【這里可以意譯為誤操作】

在本文,我將會分享我得到的關于拇指區(qū)和如何把拇指區(qū)原則應用到導航凶伙、卡片模式和滑動手勢中去的知識郭毕。

【接下來作者從以下3方面作了分享】

1. 向大牛學習

2. 拇指和觸屏

3. 總結

【我把文章中比較關鍵的知識點概括翻譯到下面,點擊“閱讀原文”可以查看英文全文】

* 我們能擁有對生拇指(opposable thumbs函荣,適合抓握物體的手指)真是很棒跋匝骸!【這里通過查閱wikipedia擴展學習到的另外一些小知識點:”finger“含有兩層意思傻挂,可以是五根手指中的任意一個乘碑,也可以是除拇指外的四根手指的一個(first finger/食指)。敢動某人毫毛(lay a finger on sb.);打響指(snap one`s finger)】

* 75%的互動操作是拇指驅動的金拒,在這個意義下兽肤,把適用于大多數智能手機的拇指區(qū)定義為:易觸區(qū)、難觸區(qū)和中間區(qū)(如題圖)绪抛。這樣就有了一個做出更好設計決策资铡、創(chuàng)造友好使用體驗的框架:在拇指區(qū)原則下做設計。

* 注意導航問題:app有很長的列表鏈接嗎幢码?需要使用混合型菜單笤休?這樣做網站會適應嗎?問這些問題有助于我們決定哪里放置觸發(fā)錨點蛤育。長列表的鏈接適合用全屏菜單(full-screen overlay menu)宛官。反之,最好用粘性菜單(sticky menu)瓦糕。如果你有大型網站底洗,混合型菜單(mixing menus)比較有效,因為它能變復雜咕娄,有助于根據在app中這些鏈接的重要性來排列優(yōu)先級亥揖。

sticky menu
overlay menu

*?手勢:點擊,雙擊,滑動费变,拖動摧扇,捏住和按住≈科纾考慮到手勢應該在哪里發(fā)生是很重要的扛稽。拿滑動手勢舉例,如圖:

左右手操控區(qū)

【看完這篇文章很有意思的是評論部分滑负,作者在文中引用的幾個觀點的原作者現(xiàn)身了在张,說了一些不同的看法,比如:文章的觀點是在人們都用他們的拇指導航這個假設下的矮慕,但很多人用大屏的時候并不這樣帮匾,為固定尺寸屏幕做設計并不是好的響應式設計。甚至還有人說她抄襲的......】

作者列出的一些有用的鏈接:

https://abookapart.com/products/designing-for-touch(Designing for Touch, Josh Clark)

http://shop.oreilly.com/product/0636920013716.do(Designing Mobile Interfaces 痴鳄,Steven Hoober)

http://www.lukew.com/ff/entry.asp?1927(Designing for Large Screen Smartphones, Luke Wroblewski)

(譯文完)


做這個周譯的系列目的是為了把英語學習和設計專業(yè)兩者結合起來——“學是為了更好地用”瘟斜。翻譯水平很有限,很多地方讀起來硌眼睛痪寻,還請大家多多留言提建議~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末螺句,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子槽华,更是在濱河造成了極大的恐慌壹蔓,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件猫态,死亡現(xiàn)場離奇詭異佣蓉,居然都是意外死亡,警方通過查閱死者的電腦和手機亲雪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進店門勇凭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人义辕,你說我怎么就攤上這事虾标。” “怎么了灌砖?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵璧函,是天一觀的道長。 經常有香客問我基显,道長蘸吓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任撩幽,我火速辦了婚禮库继,結果婚禮上箩艺,老公的妹妹穿的比我還像新娘。我一直安慰自己宪萄,他們只是感情好艺谆,可當我...
    茶點故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著拜英,像睡著了一般静汤。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上聊记,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天撒妈,我揣著相機與錄音恢暖,去河邊找鬼排监。 笑死,一個胖子當著我的面吹牛杰捂,可吹牛的內容都是我干的舆床。 我是一名探鬼主播,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼嫁佳,長吁一口氣:“原來是場噩夢啊……” “哼挨队!你這毒婦竟也來了?” 一聲冷哼從身側響起蒿往,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤盛垦,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后瓤漏,有當地人在樹林里發(fā)現(xiàn)了一具尸體腾夯,經...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年蔬充,在試婚紗的時候發(fā)現(xiàn)自己被綠了蝶俱。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,764評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡饥漫,死狀恐怖榨呆,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情庸队,我是刑警寧澤积蜻,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站彻消,受9級特大地震影響竿拆,放射性物質發(fā)生泄漏。R本人自食惡果不足惜证膨,卻給世界環(huán)境...
    茶點故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一如输、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦不见、人聲如沸澳化。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽缎谷。三九已至,卻和暖如春灶似,著一層夾襖步出監(jiān)牢的瞬間列林,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工酪惭, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留希痴,地道東北人。 一個月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓春感,卻偏偏與公主長得像砌创,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子鲫懒,可洞房花燭夜當晚...
    茶點故事閱讀 44,665評論 2 354

推薦閱讀更多精彩內容