原文標題: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)先級亥揖。
*?手勢:點擊,雙擊,滑動费变,拖動摧扇,捏住和按住≈科纾考慮到手勢應該在哪里發(fā)生是很重要的扛稽。拿滑動手勢舉例,如圖:
【看完這篇文章很有意思的是評論部分滑负,作者在文中引用的幾個觀點的原作者現(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è)兩者結合起來——“學是為了更好地用”瘟斜。翻譯水平很有限,很多地方讀起來硌眼睛痪寻,還請大家多多留言提建議~