隨著移動浪潮的風起云涌,我們在過去十多年間所熟悉的面向桌面設備的界面設計思維模式越來越不適用于移動時代。各系統平臺的本地app設計師們逐漸摸索出越來越具實踐性和跨設備適應能力的設計模式,而web設計師們也慢慢掌握了響應式設計這一有力武,怎樣使界面在不同類型的設備當中都能帶來上乘的交互體驗特別是觸控體驗,則是我們必須面對的更大的挑戰。設計方案不僅要看上去美觀合理,更要使用戶用起來得心應手,無論他們正在使用怎樣的設備。本書圍繞著“觸控”這一當前最主流的交互行為展開,重點分析了當前主流觸屏設備在觸控方面的交互特性,并解析了怎樣才能更好的為不同類型的設備打造好用的app或web界面。
適讀人群 :界面設計師及希望進入產品設計行業的讀者。
《觸類旁通:多終端時代的觸屏界面設計》是一本立足現在,面向未來的觸屏設計開山之作,也是一本著譯雙馨的佳作。
作者Josh Clark(喬什 克拉克)被業內公認為觸屏設計領域的“超級行家”,他的前一本Tapworthy(<觸動人心>)被視為移動互聯網時代觸屏手機設計的經典。
《觸類旁通:多終端時代的觸屏界面設計》根據大量的用戶調研數據,從握持方式、用戶使用習慣、個體行為差異甚至心理等多方面進行綜合分析,提出了觸屏界面設計的基本原則、實現的要素、并輔以實際的案例,讓讀者不僅知其然、知其所以然,而且直接告訴讀者如何靈活地付之實踐、大幅提升用戶體驗:一項設計被拿在手里使用的感覺如何?
嚴謹、務實、強調重點、沒有廢話,是本書寫作上的突出特點。相信讀者在閱讀的過程中,必能深切地體會到這一點,獲得醍醐灌頂般的閱讀享受。
譯者C7210是知名設計博客Beforweb.com博主(公眾號“Beforweb”),多年來一直致力向國內讀者傳達國外優秀的設計理念與技術方法,他選擇并翻譯的文章深受讀者喜愛。
譯者序
翻譯本書,于我個人而言,更像是一種致敬。
置身互聯網與移動產品設計行業,至今已十余載,說起來時間著實不短。然而,由于缺乏設計科班背景,加之當年信息獲取渠道相對匱乏,太多的時間被用在了摸索與試探當中。從網頁設計師,到UI設計師,再到前端,一番豐盈的體驗之后,似乎終于階段性地完成了向內和向外的探索,最終專心、安心地走上交互設計之路,直到如今。
回想轉向交互設計的那段日子,終日高能,新一輪壓榨式、爆發式的探索和自學讓我欲罷不能,當然其中也不乏盲目與膚淺。最終得以迷戀并聚焦于移動端設計,則正是由于在JoshClark的上一本經典著作Tapworthy中找到了某種依托感。
令我感到慶幸的是,這樣的依托感直到如今依然清晰于心,并越發穩健地擴展到一個又一個新領域當中。這是一份遠超職業范疇的、值得感恩的贈禮。而當電子工業出版社的劉皎老師向我提起Josh的這本新書時,我似乎看到了報答與回饋的機會——既為當年的引路人,也為我們共同熱愛并甘于投身其中的這一事業。
“與時俱進”對數字化產品設計師而言是一個永恒的原則,作為觸屏移動設計先行者的JoshClark自然深諳于此。在上一本書中,Josh以主流移動平臺界面設計規范為線索,深入挖掘其中的每一個要點,有針對性地在知識體系中填充了大大小小極為豐富的實際產品設計案例,將移動設計思維模式及實戰要則完整、清晰地呈現在我們面前。而如今,縱使新技術、新領域層出不窮,移動設備及產品發展的大潮卻依舊澎湃。經過幾年的洗禮,作為設計師,我們變得越發成熟、老練;而相比于那個年代,如今的設備生態體系卻也更加復雜化、立體化,我們面對著一個又一個新的挑戰。在這樣的時代背景下,Josh對他在過去幾年當中所積累的觸屏交互設計理念與經驗進行了新一輪的沉淀,結合更加多元化的思考方式
Josh Clark是設計咨詢公司Big Medium的創始人,專注于互聯網設計領域,曾與TechCrunch、TimeInc等多家知名媒體品牌合作打造世界一流的移動互聯體驗。Josh曾著有四部書籍,其中包括移動設計領域*為著名的《觸動人心:設計優秀的iPhone應用》(Tapworthy: Designing Great iPhone Apps,O’Reilly,2010)。此外,Josh還在世界各地進行講演,主題涉及數字化界面設計的方方面面。Josh曾于1996年發明Couch-to-5K(C25K)跑步日程表,幫助數百萬人進行了有效的運動和練習。無論是對健身,還是對用戶體驗設計,Josh都有相同的座右銘:“No Pain, No Pain”(輕松高效,大家開心)。
鄒正,筆名C7210 ,交互設計師、UX設計熱愛者、VR探索者、譯者、貓奴、吉他手、鼓手。希望為設計師及移動互聯網相關從業人員提供幫助。
1 實體化界面 /1
數字與工業設計的融合 /3
人們怎樣使用手機 /4
人們怎樣使用平板手機 /7
平板電腦:屏幕更大,變數更多 /11
混合型設備:帶有鍵盤的觸屏 /13
觸屏設備界面布局設計 /17
手機的界面布局 /20
平板手機的界面布局 /30
平板電腦的界面布局 /38
混合型設備的界面布局 /41
2 靠不住的屏幕 /45
靠屏幕尺寸判斷輸入方式?沒那么簡單 /46
假設所有設備都有觸屏 /49
同時面向觸屏和鼠標進行設計 /50
7毫米=足夠大 /56
位置,位置,位置:目標元素尺寸與布局的關系 /57
交互元素的最小尺寸:44(像素、點、dp) /58
關于em /60
避免擁擠 /61
像素與視口 /62
3 高效的觸屏界面 /67
即時呈現 /68
控制內容的高度 /73
被濫用的輪播 /75
精簡表單 /81
真的需要鍵盤嗎 /85
選擇正確的鍵盤類型 /87
<select>下拉列表 /89
手勢vs. 確認對話框 /93
解放雙手 /95
4 手勢 /99
基礎手勢 /100
麻煩的按鈕 /104
以現實世界為指引 /115
將手勢作為快捷方式 /121
混亂與疏導 /124
在網頁中實現手勢操作的復雜性 /130
聚焦click事件 /132
在相冊和輪播中通過CSS實現滑動瀏覽 /133
瀏覽器中的觸控事件 /137
300毫秒的延遲問題 /141
指針事件帶來的希望與困擾 /143
怎樣發現手勢 /146
5 手勢的可發現性 /149
與實際行動脫節的前置教學 /149
擬物化設計:“我知道該怎樣使用它” /151
界面被拍平之后 /154
不要過于擬真 /156
多玩些游戲 /158
路漫漫其修遠 /169
鳴謝 /171