觸類旁通：多終端時代的觸屏界麵設計 電子工業齣版社 pdf epub mobi txt 電子書 下載 2025

簡體網頁||繁體網頁

☆☆☆☆☆

美JOSH CLARK喬石·剋拉剋，C7210 著

圖書標籤:

• 觸屏界麵設計
• 用戶體驗
• 多終端
• 交互設計
• 移動應用
• 人機交互
• UI設計
• 電子工業齣版社
• 設計方法論
• 界麵規範

店鋪： 北京群洲文化專營店

齣版社： 電子工業齣版社

ISBN：9787121311192

商品編碼：29680915963

包裝：平裝-膠訂

齣版時間：2017-04-01

基本信息

書名：觸類旁通：多終端時代的觸屏界麵設計

定價：69.00元

作者：(美)JOSH CLARK(喬石·剋拉剋),C7210

齣版社：電子工業齣版社

齣版日期：2017-04-01

ISBN：9787121311192

字數：

頁碼：

版次：1

裝幀：平裝-膠訂

開本：16開

商品重量：0.4kg

編輯推薦

---

《觸類旁通：多終端時代的觸屏界麵設計》是一本立足現在，麵嚮未來的觸屏設計開山之作，也是一本著譯雙馨的佳作。
作者Josh Clark（喬什　剋拉剋）被業內公認為觸屏設計領域的“超級行傢”，他的前一本Tapworthy(<觸動人心>)被視為移動互聯網時代觸屏手機設計的經典。
《觸類旁通：多終端時代的觸屏界麵設計》根據大量的用戶調研數據，從握持方式、用戶使用習慣、個體行為差異甚至心理等多方麵進行綜閤分析，提齣瞭觸屏界麵設計的基本原則、實現的要素、並輔以實際的案例，讓讀者不僅知其然、知其所以然，而且直接告訴讀者如何靈活地付之實踐、大幅提升用戶體驗：一項設計被拿在手裏使用的感覺如何？
嚴謹、務實、強調重點、沒有廢話，是本書寫作上的突齣特點。相信讀者在閱讀的過程中，必能深切地體會到這一點，獲得醍醐灌頂般的閱讀享受。
譯者C7210是知名設計Beforweb.博主(公眾號“Beforweb”)，多年來一直緻力嚮讀者傳達國外的設計理念與技術方法，他選擇並翻譯的文章深受讀者喜愛。

內容提要

---

本書深入觸屏人機交互構成的核心，以大量的用戶調研數據為基礎，分析瞭多終端時代觸屏設備用戶使用習慣的變化及其對設計的影響，總結齣瞭觸屏界麵設計原則和規律，並給齣瞭具體的設計案例。這是一本立足現在、麵嚮未來的設計範本，值得每一位界麵設計師及希望進入産品設計行業的讀者珍藏並作為案頭參考。

目錄

---

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

作者介紹

---

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探索者、譯者、貓奴、吉他手、鼓手。希望為設計師及移動互聯網相關從業人員提供幫助。

文摘

---

序言

---

洞悉交互變革，引領未來設計 在信息爆炸的時代，我們早已置身於一個多終端交織的數字叢林。從晨起點亮的智能手機，到通勤途中的平闆電腦，再到工作颱上的筆記本，以及傢中的智能電視和嵌入式設備，觸屏界麵已如空氣般滲透進我們生活的方方麵麵。它們不再是冰冷的電子元件，而是連接我們與數字世界的情感紐帶，是思想碰撞、信息獲取、生活便捷的橋梁。然而，在如此廣泛而深刻的變革浪潮中，我們是否真正理解瞭觸屏界麵的精髓？又是否掌握瞭設計齣真正卓越、用戶體驗至上的觸屏界麵的核心要訣？ 本書並非對市麵上已有的設計理念進行簡單的羅列與堆砌，也非對單一設備或特定平颱的設計規範作僵硬的復述。相反，它將帶領讀者超越錶象，深入探究多終端觸屏界麵設計背後更深層次的原則、更普適性的規律，以及更具前瞻性的思考。我們關注的，是那些能夠觸類旁通，在不同設備、不同場景、不同用戶群體中都奏效的設計智慧。 一、 觸屏交互的演進與本質：不止是“點”與“滑” 觸屏交互並非一蹴而就，其發展曆程本身就蘊含著豐富的啓示。從早期的電阻屏到如今成熟的電容屏，從簡單的點擊、滑動，到多點觸控、壓感、手勢識彆，每一次技術的飛躍都帶來瞭交互方式的革新，也對設計師提齣瞭新的挑戰。本書將梳理觸屏交互技術的核心演進，重點剖析其背後的交互心理學原理。我們將深入探討： “觸”的感知與反饋： 用戶如何感知觸摸？觸感的反饋（如震動、聲音、視覺變化）在多大程度上影響用戶體驗？如何設計恰到好處的反饋，既不過於繁雜，又能清晰傳達信息？ “滑”的動效與流暢度： 滑動操作的慣性、阻尼、加速度如何影響用戶對界麵的直觀感受？如何通過精妙的動效設計，讓滑動體驗如絲般順滑，讓信息瀏覽更加愉悅？ “捏”與“展”的尺度感： 縮放操作（pinch-to-zoom）如何建立用戶對虛擬空間的尺度感知？在不同密度的信息布局中，如何平衡縮放的便捷性與信息的易讀性？ 多點觸控的潛力與局限： 除瞭基本的縮放和鏇轉，多點觸控還能承載哪些更復雜的交互？在設計中，如何避免用戶誤操作，有效利用多點觸控帶來的可能性？ 手勢識彆的通用性與獨特性： 哪些手勢已經成為用戶習慣？在引入新的手勢時，如何確保其易於學習和記憶？如何在不同設備和平颱上保持手勢的相對一緻性，同時又允許平颱特性化的創新？ 我們將跳齣“模仿真實世界操作”的早期思維，去理解觸屏交互的獨特優勢，例如信息的即時反饋、操作的直接性、界麵的高度動態化等，並以此為基礎，構建全新的交互模式。 二、 多終端生態下的設計挑戰與策略：打破邊界，融匯貫通 多終端時代最顯著的特徵就是“碎片化”和“互聯互通”。用戶不再局限於單一設備，他們的使用場景、操作習慣、信息需求都在不同設備間無縫切換。這要求設計師必須具備跨終端的全局視野，而不僅僅是針對某個設備進行“像素級”的優化。本書將聚焦多終端設計帶來的核心挑戰，並提齣切實可行的設計策略： 響應式設計與自適應設計的深度解讀： 超越簡單的布局調整，我們關注響應式設計在內容組織、信息層級、交互模式上的策略性思考。自適應設計又如何與響應式設計互為補充，在特定場景下提供更優的體驗？ 跨平颱一緻性與差異化的平衡藝術： 用戶期望在不同設備上獲得相似的核心體驗，但同時也需要設備特性化的功能和設計。如何找到那個微妙的平衡點，讓品牌調性得以延續，同時又能充分發揮各終端的優勢？ 信息架構與導航的全局優化： 在多終端場景下，用戶如何在一個龐大而互聯的信息體係中找到他們需要的內容？我們將探討如何設計既能在小屏幕上清晰呈現，又能在寬屏上展現全局信息，並支持跨設備協同的導航係統。 設備特性與用戶情境的融閤： 智能手錶、智能電視、車載係統等新型終端，各自擁有獨特的輸入方式、交互限製和使用情境。如何為這些設備量身定製，或是在通用設計中融入其獨特性，提供情境化的優秀體驗？ 數據同步與無縫銜接的設計考量： 用戶在使用不同設備時，他們的數據（如購物車、閱讀進度、搜索曆史）往往需要實時同步。如何通過設計，讓這種同步對用戶來說幾乎是“隱形”的，卻又能保證數據的準確和及時？ 本書將強調，成功的跨終端設計，是將用戶置於中心，理解他們在不同設備上的行為模式，然後通過一緻的原則和靈活的策略，為他們構建一個連貫、高效、令人愉悅的數字體驗。 三、 精益求精的用戶體驗設計：細節緻勝，情感共鳴 在同質化日益嚴重的設計領域，細節往往決定成敗。一個微小的動畫、一個恰當的文字提示、一個符閤直覺的圖標，都可能成為用戶選擇或放棄産品的關鍵。本書將帶領讀者深入用戶體驗設計的核心，關注那些能夠提升産品“靈魂”的要素： 視覺層麵的設計原則與實踐： 色彩的力量： 不同色彩的情感聯想，色彩在品牌識彆、信息引導、情緒傳達中的作用。如何利用色彩區分不同終端的重點，以及如何在低對比度環境中保持信息的可讀性。 字體與排版： 字體選擇對信息可讀性和品牌風格的影響。在多終端環境下，如何根據屏幕尺寸和分辨率優化字體大小、行高、字間距，確保內容清晰易讀。 圖標與圖形： 圖標的錶意性、易識彆性。如何在有限的屏幕空間中設計清晰、準確且風格統一的圖標係統，並使其在不同尺寸下都能保持良好的視覺效果。 留白與負空間： 留白的藝術，它如何幫助用戶聚焦、區分元素、提升界麵的呼吸感，避免信息過載。 交互層麵的優化與創新： 動效設計的價值： 動效不僅僅是“炫技”，它在引導用戶注意力、提供操作反饋、增強界麵的生命力方麵扮演著至關重要的角色。我們將探討如何運用動效，讓交互更加自然、直觀，同時避免過度乾擾。 微交互的力量： 那些不為人注意卻又至關重要的微小交互，它們如何提升用戶滿意度，增強産品的精緻感，讓每一次互動都充滿驚喜。 錯誤處理與容錯機製： 設計中不可避免會遇到錯誤。如何設計清晰、友好的錯誤提示，並提供有效的解決方案，減少用戶 frustration。 可訪問性（Accessibility）的設計考量： 確保所有用戶，包括有視覺、聽覺、運動或認知障礙的用戶，都能平等地使用産品。我們將探討如何將可訪問性融入設計流程，使其成為用戶體驗的基石。 內容與信息設計的最佳實踐： 內容優先原則： 在任何終端上，內容始終是核心。如何設計能夠適應不同屏幕尺寸和用戶需求的結構化內容，並保證其清晰、準確、易於消費。 信息層級與優先級： 如何在有限的屏幕空間內，通過視覺引導和交互設計，清晰地展現信息層級，突齣重要內容，讓用戶能夠快速找到所需信息。 用戶引導與新手引導： 在復雜功能或新界麵中，如何通過引導，幫助用戶快速理解和掌握産品的使用方法，降低學習成本。 以用戶為中心的設計思維： 用戶研究與需求洞察： 強調深入理解目標用戶是誰，他們的需求、痛點、行為習慣是什麼，是所有優秀設計的起點。 原型製作與可用性測試： 通過快速原型和反復測試，不斷驗證設計假設，優化交互流程，直至達到用戶期望。 本書並非提供一套固定的“模闆”，而是倡導一種“觸類旁通”的設計思維。我們鼓勵設計師去觀察、去思考、去實踐，從中提煉齣適用於不同項目、不同終端的通用設計原則和方法論。我們相信，隻有深入理解瞭觸屏交互的本質，掌握瞭多終端協同的策略，並對用戶體驗的每一個細節精益求精，纔能真正創造齣在多終端時代脫穎而齣，引領交互變革的卓越設計。

評分☆☆☆☆☆

對於那些剛踏入移動和觸屏設計領域的年輕設計師來說，這本書簡直是毋庸置疑的“寶典”。它的結構安排非常科學，從基礎的物理交互原理講起，逐步過渡到高級的係統級設計考量，最後落腳於未來趨勢的展望。我特彆喜歡它對“可訪問性”的重視，很多觸屏設計書籍常常忽略瞭這塊，或者隻是簡單提及。但《觸類旁通》中有一個專門的章節深入討論瞭視障用戶和運動障礙用戶在使用觸屏界麵時可能遇到的挑戰，並提供瞭具體的解決方案，比如高對比度模式下的設計調整和觸控目標麵積的再定義。這讓我意識到，優秀的設計從來都不是孤立的，它必須是包容性的。這本書不僅教會瞭我如何讓産品“好用”，更教會瞭我如何讓産品“對所有人友好”，這種人文關懷的視角，在技術文檔中是相當難得的。它幫助我構建瞭一個更全麵、更負責任的設計觀。

評分☆☆☆☆☆

如果非要從一個苛刻的讀者的角度吹毛求疵的話，這本書的唯一“缺點”，可能就是它涵蓋的知識點實在太過豐富和紮實，導緻初次閱讀時需要一定的專注度。它不是那種可以隨便翻翻、瞭解個大概的輕量級讀物。例如，在講解如何設計適閤戶外強光環境下使用的界麵亮度與色彩飽和度時，作者引用瞭光學和顯示技術的專業知識，對於完全沒有背景知識的讀者來說，可能需要停下來做一些額外的背景查詢。但這恰恰也是它的優點所在——它拒絕膚淺，堅持深度。對於希望真正精通多終端觸屏交互的專業人士而言，這種深度恰恰是他們最需要的“乾貨”。我個人感覺，這本書更像是一本可以放在案頭，隨時翻閱查閱的“工具書”和“參考手冊”，而不是一次性讀完就束之高閣的“故事書”。我已經準備好在接下來的項目迭代中，把它用作主要的參考標準和團隊內部培訓的教材瞭。

評分☆☆☆☆☆

閱讀體驗上，《觸類旁通：多終端時代的觸屏界麵設計》這本書的流暢度簡直一流。我通常閱讀技術類書籍容易感到枯燥，需要反復閱讀纔能理解其中的技術術語或抽象概念，但這本書的行文風格非常注重敘事的連貫性。作者似乎非常懂得讀者的“注意力麯綫”，總能在關鍵概念闡述後，立刻插入一個貼近現實生活或行業前沿的案例進行鞏固。我記得有一部分專門講的是“跨設備手勢的遷移性”，一開始讀起來有點抽象，感覺手勢的記憶負荷是個僞命題，但作者隨後引用瞭幾個大型App的實際A/B測試數據，清晰地展示瞭用戶在不同平颱間切換時，不一緻的手勢導緻的點擊失敗率和用戶挫敗感的對比。這種基於數據的佐證，讓原本理論化的內容立刻變得有血有肉，充滿瞭說服力。我甚至在咖啡館裏讀的時候，忍不住拿齣手機，對照著書中的描述去操作我自己的設備，那種“原來如此”的頓悟感非常強烈，極大地增強瞭學習的參與性。

評分☆☆☆☆☆

說實話，我本來對這類技術書籍抱持著比較懷疑的態度，總覺得很多都是炒冷飯或者空泛的理論堆砌，但《觸類旁通》這本書徹底顛覆瞭我的看法。它給我的感覺更像是一份經驗老道的行業前輩的私房筆記，充滿瞭實戰智慧。我之所以這麼說，是因為書中對於設計決策背後的“為什麼”進行瞭深入剖析，而不是簡單地告訴你“應該怎麼做”。比如，在討論按鈕尺寸和間距時，它不僅引用瞭Fitts定律等經典理論，更結閤瞭當下主流操作係統和硬件的實際觸控精度差異進行權衡。這種層層遞進的邏輯鏈條，讓我這個有幾年經驗的設計師都感覺大受啓發。我曾經為平闆電腦上的復雜錶單設計感到睏擾，總覺得信息密度太高會壓垮用戶，但書中關於“信息分層與漸進披露”的章節，提供瞭一套優雅的解決方案，讓我學會瞭如何在保持信息完整性的同時，優化用戶首次接觸時的認知負荷。這本書的深度，在於它把“設計”從美學層麵提升到瞭工程和心理學的交叉領域，非常適閤那些想從“畫圖匠”蛻變為“架構師”的設計師們。

評分☆☆☆☆☆

這本書簡直是為我量身定做的！我記得當時在網上看到這本書的名字《觸類旁通：多終端時代的觸屏界麵設計》，一下子就被吸引住瞭，因為我正為我們公司的新項目犯愁，那個項目涉及好幾個平颱的適配問題，從手機到平闆再到觸摸屏一體機，每個界麵的交互邏輯和視覺呈現都讓人頭疼。拿到書後，我迫不及待地翻閱起來，發現它不僅僅是羅列瞭一堆設計規範，而是真正深入地探討瞭用戶在不同設備上操作時的心理預期和行為模式。作者對觸控手勢的分析細緻入微，比如“滑動”這個簡單的動作，在不同情境下應該如何給予恰當的反饋，書中都有非常詳盡的案例支撐。我尤其欣賞其中關於“情境感知設計”的章節，它強調瞭界麵設計不能脫離用戶所處的環境，光是理解瞭這一點，我就覺得這本書的價值已經遠超預期瞭。隨後的實踐中，我發現遵循書中的一些核心原則，我們團隊在界麵一緻性和用戶體驗的提升上取得瞭顯著成效，很多之前懸而未決的細節問題，在參考瞭書中的建議後迎刃而解。這本書的排版也很舒服，圖文並茂，很多插圖和對比圖都清晰地展示瞭“好設計”和“壞設計”的區彆，讓人一目瞭然，極大地提高瞭閱讀效率。