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

簡體網頁||繁體網頁

☆☆☆☆☆

[美] JOSH，CLARK（喬石?剋拉剋） 著，C7210 譯

圖書標籤:

• 界麵設計
• 觸屏設計
• 多終端
• 用戶體驗
• 交互設計
• 移動端
• 設計原則
• 人機交互
• 設計模式
• 觸類旁通

齣版社： 電子工業齣版社

ISBN：9787121311192

版次：1

商品編碼：12175570

品牌：Broadview

包裝：平裝

開本：16開

齣版時間：2017-04-01

用紙：膠版紙

頁數：200

字數：190000

正文語種：中文

編輯推薦

適讀人群 ：界麵設計師及希望進入産品設計行業的讀者。

《觸類旁通：多終端時代的觸屏界麵設計》是一本立足現在，麵嚮未來的觸屏設計開山之作，也是一本著譯雙馨的佳作。

作者Josh Clark（喬什　剋拉剋）被業內公認為觸屏設計領域的“超級行傢”，他的前一本Tapworthy(<觸動人心>)被視為移動互聯網時代觸屏手機設計的經典。

《觸類旁通：多終端時代的觸屏界麵設計》根據大量的用戶調研數據，從握持方式、用戶使用習慣、個體行為差異甚至心理等多方麵進行綜閤分析，提齣瞭觸屏界麵設計的基本原則、實現的要素、並輔以實際的案例，讓讀者不僅知其然、知其所以然，而且直接告訴讀者如何靈活地付之實踐、大幅提升用戶體驗：一項設計被拿在手裏使用的感覺如何？

嚴謹、務實、強調重點、沒有廢話，是本書寫作上的突齣特點。相信讀者在閱讀的過程中，必能深切地體會到這一點，獲得醍醐灌頂般的閱讀享受。

譯者C7210是知名設計博客Beforweb.com博主(公眾號“Beforweb”)，多年來一直緻力嚮國內讀者傳達國外優秀的設計理念與技術方法，他選擇並翻譯的文章深受讀者喜愛。

內容簡介

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

作者簡介

　　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

精彩書摘

　　《觸類旁通：多終端時代的觸屏界麵設計》：
　　我所在的團隊大力推動的一個設計理念就是“場景化設計”，指的便是充分理解整個應用的生態係統，這與本書當中的一些設計理念也不謀而閤。放棄功能主義設計，我們要做的不是功能；放棄形式主義設計，我們要做的也不是花哨的設計。我們要做的是搞清楚用戶從哪裏來，到哪裏去，然後纔是怎樣展示。……
　　移動互聯網已不再是一個全新的概念，平闆、智能手錶、智能眼鏡及任何能聯網的設備，慢慢會擴展“移動”一詞所涵蓋的範圍，所以，作者已經不再局限於講述手機觸屏界麵本身的設計，而是擴展到平闆、筆記本電腦等更加多元化的觸屏設備領域。同時，任何設備都不是單獨存在的，多終端將共同服務於用戶的生活，所以跨端設計也是一項重要技能，多端都可以安裝同一款産品，彼此之間在內容上是同步的，甚至在操作行為上也是完全一緻的——這樣纔能提供無縫的體驗。當然，具體是采用原生應用，還是網頁應用，或是響應式設計，仍是需要不斷實踐並論證的話題。
　　行業的飛速發展使人們的生活狀態得到瞭極大的改變。如果你已經是這方麵的從業者，那麼你可以踏著這個浪潮，繼續創造顛覆人們生活方式的設計；如果你想踏入這個行業，那麼你可以站在巨人的肩膀上，放飛想象的翅膀，用不一樣的思考方式開創未來。這本書就是巨人的肩膀，書中大量的理論配閤案例，讓初學者可以快速瞭解移動設計行業，讓從業者能夠對移動設計形成更加體係化的認識。
　　……

前言/序言

　　譯者序
　　翻譯本書，於我個人而言，更像是一種緻敬。
　　置身互聯網與移動産品設計行業，至今已十餘載，說起來時間著實不短。然而，由於缺乏設計科班背景，加之當年信息獲取渠道相對匱乏，太多的時間被用在瞭摸索與試探當中。從網頁設計師，到UI設計師，再到前端，一番豐盈的體驗之後，似乎終於階段性地完成瞭嚮內和嚮外的探索，最終專心、安心地走上交互設計之路，直到如今。
　　迴想轉嚮交互設計的那段日子，終日高能，新一輪壓榨式、爆發式的探索和自學讓我欲罷不能，當然其中也不乏盲目與膚淺。最終得以迷戀並聚焦於移動端設計，則正是由於在JoshClark的上一本經典著作Tapworthy中找到瞭某種依托感。
　　令我感到慶幸的是，這樣的依托感直到如今依然清晰於心，並越發穩健地擴展到一個又一個新領域當中。這是一份遠超職業範疇的、值得感恩的贈禮。而當電子工業齣版社的劉皎老師嚮我提起Josh的這本新書時，我似乎看到瞭報答與迴饋的機會——既為當年的引路人，也為我們共同熱愛並甘於投身其中的這一事業。
　　“與時俱進”對數字化産品設計師而言是一個永恒的原則，作為觸屏移動設計先行者的JoshClark自然深諳於此。在上一本書中，Josh以主流移動平颱界麵設計規範為綫索，深入挖掘其中的每一個要點，有針對性地在知識體係中填充瞭大大小小極為豐富的實際産品設計案例，將移動設計思維模式及實戰要則完整、清晰地呈現在我們麵前。而如今，縱使新技術、新領域層齣不窮，移動設備及産品發展的大潮卻依舊澎湃。經過幾年的洗禮，作為設計師，我們變得越發成熟、老練；而相比於那個年代，如今的設備生態體係卻也更加復雜化、立體化，我們麵對著一個又一個新的挑戰。在這樣的時代背景下，Josh對他在過去幾年當中所積纍的觸屏交互設計理念與經驗進行瞭新一輪的沉澱，結閤更加多元化的思考方式

觸類旁通：多終端時代的觸屏界麵設計 書籍簡介 在信息爆炸、技術迭代飛快的數字時代，人機交互的邊界不斷被拓展，觸屏已然成為我們獲取信息、連接世界最直接、最普遍的橋梁。從智能手機到平闆電腦，從車載係統到智能傢居，再到新興的AR/VR設備，觸屏技術滲透到瞭我們生活的方方麵麵，並以前所未有的速度改變著我們的生活方式和消費習慣。然而，伴隨著觸屏的普及，如何設計齣既符閤用戶直覺、又兼具美學價值、更能有效傳達信息和實現功能的觸屏界麵，成為瞭擺在設計者麵前的一道核心課題。 《觸類旁通：多終端時代的觸屏界麵設計》一書，正是為瞭迴應這一時代需求而生。它不僅僅是一本關於“如何設計”的指導手冊，更是一場深入探索觸屏界麵設計精髓的旅程。本書旨在幫助讀者建立起一套係統、全麵、且具備前瞻性的觸屏界麵設計思維體係，無論您是初涉設計領域的新銳，還是經驗豐富的設計大師，都能從中汲取養分，觸類旁通，掌握在多終端環境下進行高效、創新觸屏界麵設計的核心能力。 本書內容梗概 本書的核心理念在於“觸類旁通”——即通過對觸屏界麵設計基本原理的深刻理解，觸及設計本質，從而能夠靈活運用到各種不同的終端設備和應用場景中。全書圍繞這一核心，從宏觀的理論框架到微觀的設計細節，進行瞭深入淺齣的剖析。 第一部分：觸屏交互的基石——理解用戶與觸點 在進入具體的設計實踐之前，充分理解用戶和觸屏交互的根本邏輯至關重要。本部分將帶領讀者深入挖掘以下幾個核心內容： 用戶研究的深度與廣度： 我們將探討如何進行有效的用戶研究，不僅僅是瞭解用戶的基本需求，更要捕捉用戶的行為習慣、認知模式、情感需求以及在不同使用場景下的痛點。從定性訪談、可用性測試到定量數據分析，本書將提供一套從“理解人”齣發的設計方法論。我們將強調，優秀的設計始於對用戶的深刻洞察，隻有真正瞭解用戶，纔能設計齣真正符閤他們期望和需求的界麵。 觸屏交互的生理與心理基礎： 手指的觸碰行為在生理上有其獨特的限製和優勢。本書將結閤人體工程學和認知心理學原理，分析手指的尺寸、力度、移動軌跡對界麵元素設計的影響。例如，我們將深入探討“目標尺寸”的黃金法則，以及如何在有限的屏幕空間內，平衡信息密度與操作便捷性。同時，也會審視用戶的視覺感知、注意力分配以及記憶規律，為信息層級、導航設計和交互反饋提供科學依據。 多終端下的用戶行為演變： 隨著設備的多樣化，用戶在不同終端上的交互習慣呈現齣復雜性。本書將分析用戶在手機、平闆、手錶、電腦等不同設備上的核心使用場景和習慣差異。例如，用戶在移動設備上更傾嚮於快速、碎片化的信息獲取，而在大屏幕設備上則可能進行更深入、更精細的操作。理解這些差異，是實現跨平颱一緻性與設備適配性的前提。 第二部分：觸屏界麵設計的核心原則與方法論 在建立起對用戶和觸屏交互的深刻理解後，本書將進入觸屏界麵設計的核心實踐層麵，係統闡述設計原則和方法論： 信息架構與導航設計： 如何將復雜的信息組織得清晰明瞭，並引導用戶輕鬆找到所需內容？本書將詳細講解信息架構的構建原則，包括分類、層級、關聯等。在導航設計方麵，我們將深入分析各種常見的導航模式（如底部 Tab Bar、漢堡菜單、抽屜導航、頂部導航欄等）的優缺點，以及在不同情境下的適用性。特彆是在多終端環境下，如何設計一套能夠順暢適配各種屏幕尺寸和交互方式的導航體係，將是重點探討的內容。 視覺設計與信息層級： 視覺設計不僅僅是美觀，更是傳達信息、引導用戶的重要手段。本書將闡述色彩、排版、圖標、留白等視覺元素如何共同構建界麵的信息層級和視覺流。我們將深入講解“視覺重量”的概念，以及如何通過對比、對齊、重復、接近等設計原則，有效地引導用戶的注意力，突齣關鍵信息和操作。同時，也會探討品牌一緻性在視覺設計中的重要作用。 交互設計與用戶體驗： 交互設計是連接用戶與産品的橋梁。本書將剖析各種觸屏交互模式，如點擊、滑動、縮放、拖拽、長按等，並分析它們在不同情境下的最佳實踐。我們將強調“反饋”的重要性，即用戶每次操作都應得到及時、清晰的反饋，以增強用戶的掌控感和信任感。同時，也會探討如何通過動效設計來提升界麵的生動性和易用性，以及如何處理錯誤狀態和提供幫助。 響應式與自適應設計： 在多終端時代，設計必須具備“適應性”。本書將詳細講解響應式設計（Responsive Design）和自適應設計（Adaptive Design）的理念與實踐。我們將探討如何通過流體網格、彈性圖片、媒體查詢等技術手段，實現界麵在不同屏幕尺寸上的完美展現。同時，也會討論在設計初期就應考慮跨平颱兼容性的重要性，以及如何優化不同設備上的交互體驗。 第三部分：邁嚮未來——創新觸屏界麵設計趨勢與實踐 技術總是在不斷進步，用戶需求也在持續演變。本書的第三部分將著眼於未來，探討觸屏界麵設計的最新趨勢和創新方嚮： 微交互的力量： 微交互是指那些隱藏在用戶日常操作背後的、細微而有用的互動。本書將闡述微交互如何通過細緻入微的反饋、有趣的動畫和情境化的信息，極大地提升用戶體驗的愉悅度和效率。我們將分析成功的微交互案例，並提供設計微交互的原則和方法。 動效設計在界麵中的應用： 恰當的動效能夠為界麵注入生命力，使之更加生動、直觀。本書將深入探討動效設計的原則，例如其速度、時長、緩動麯綫等如何影響用戶感知。我們將展示如何利用動效來引導用戶注意力、指示狀態變化、提供情感反饋，並避免過度使用導緻的用戶疲勞。 人工智能與個性化設計： 隨著人工智能技術的飛速發展，個性化設計將成為觸屏界麵的重要發展方嚮。本書將探討AI如何在用戶行為分析、內容推薦、智能交互等方麵賦能觸屏界麵設計，從而為用戶提供更加智能、個性化、更具價值的體驗。 AR/VR與沉浸式交互： 虛擬現實（VR）和增強現實（AR）技術正在重塑人機交互的維度。本書將初步探討AR/VR環境下的觸屏（或類觸屏）交互設計挑戰與機遇，以及如何將現有觸屏設計的理念遷移到三維空間中，為用戶創造全新的沉浸式體驗。 無障礙設計與包容性： 優秀的設計應該是普惠的。本書將強調無障礙設計的重要性，探討如何設計齣能夠被所有用戶，包括殘障人士輕鬆使用的觸屏界麵。我們將涉及視覺、聽覺、運動等方麵的障礙，並提供相應的解決方案，確保設計的包容性。 目標讀者 《觸類旁通：多終端時代的觸屏界麵設計》一書，麵嚮廣泛的讀者群體： UI/UX設計師： 無論您是初入職場的設計師，還是有多年經驗的資深人士，本書都將為您提供一套係統性的知識框架和前沿的設計理念，幫助您在多終端環境下提升設計能力。 産品經理： 瞭解觸屏界麵設計的核心原則，能夠幫助您更有效地與設計師溝通，理解設計決策，從而更好地把握産品方嚮。 前端開發者： 掌握觸屏界麵設計的理念，有助於您在技術實現時，更好地還原設計意圖，優化用戶體驗。 對人機交互和數字産品設計感興趣的任何人士： 如果您對科技如何影響我們的生活，以及如何構建更友好的數字體驗感興趣，本書都將為您提供深刻的洞見。 本書特色 理論與實踐相結閤： 本書不僅深入剖析觸屏界麵設計的理論基礎，更提供瞭大量實際案例分析和設計技巧，幫助讀者學以緻用。 體係化知識構建： 全書圍繞“觸類旁通”的核心理念，構建瞭一個由淺入深、由錶及裏的知識體係，幫助讀者建立係統性的設計思維。 前瞻性視角： 本書不僅關注當前的設計實踐，更著眼於未來的技術趨勢，為讀者提供具有前瞻性的設計指導。 語言通俗易懂： 避免使用晦澀難懂的專業術語，以清晰、簡潔、富有邏輯的語言，讓不同背景的讀者都能輕鬆理解。 強調用戶中心： 始終將用戶放在設計的核心位置，強調理解用戶、尊重用戶、服務用戶的設計理念。 在日新月異的數字浪潮中，《觸類旁通：多終端時代的觸屏界麵設計》將是您手中不可或缺的指南。它將助您撥開迷霧，洞悉觸屏界麵設計的本質，並在紛繁復雜的終端環境中，構建齣真正能夠打動用戶、引領潮流的卓越設計。翻開此書，讓我們一同探索觸屏交互的無限可能，開啓屬於您的設計新篇章。

評分☆☆☆☆☆

這本書的標題，聽起來就充滿瞭智慧和前瞻性。“觸類旁通”這個詞，讓我覺得它不僅僅是關於如何設計觸屏界麵，更是關於如何理解觸屏界麵的本質，並將其遷移到各種不同的終端上。我一直在思考，在今天這個智能手機、平闆電腦、智能穿戴設備遍地開花的環境下，用戶與數字世界的互動方式變得越來越碎片化和多元化。如何在這個“多終端時代”，讓用戶在切換設備時，不會感到陌生和不適，反而能感受到一種無縫的延續和統一的品牌體驗，這對我來說是一個巨大的挑戰。我希望這本書能夠提供一些關於跨平颱設計策略的深刻見解，而不僅僅是羅列一些UI組件的用法。比如，它是否會討論如何在不同尺寸的屏幕上，進行信息架構的優化和內容的呈現？又或者，它是否會分享一些如何利用特定設備獨特交互方式（比如壓感、陀螺儀）來增強用戶體驗的案例？我期待這本書能夠幫助我掌握一套能夠“觸類旁通”的設計方法論，讓我能夠從更宏觀的層麵去理解和解決設計問題。

評分☆☆☆☆☆

這本書名我真的太喜歡瞭，“觸類旁通”這四個字就抓住瞭核心，讓我對內容充滿瞭期待。我一直在思考，在如今這個信息爆炸、終端爆炸的時代，用戶是如何在手機、平闆、智能手錶甚至是車載屏幕上，都能獲得順暢、直觀的操作體驗的。我尤其關注的是，如何在有限的屏幕空間內，將復雜的功能以一種自然而然的方式呈現齣來，讓用戶“一看就會，一用就懂”。這本書的標題暗示著它會深入探討跨平颱設計共通的原則和方法，而不是簡單羅列各種界麵元素。我希望它能給我一些啓發，讓我能夠跳齣單一終端的思維定勢，用更宏觀的視角去理解用戶在不同設備上操作的心理模式和行為習慣。比如，一個在手機上習慣的滑動操作，如何在平闆上得到更好的延續，甚至被優化；或者一個在電腦上常用的點擊菜單，在小巧的智能手錶上又該如何巧妙轉化。這本書的齣現，就像一盞明燈，照亮瞭我對未來用戶體驗設計的探索之路。我迫不及待地想翻開它，去學習那些能夠觸類旁通的設計智慧。

評分☆☆☆☆☆

作為一名有幾年經驗的設計師，我深知觸屏界麵的演進速度之快，稍不留神就可能被時代拋下。這本書的題目“多終端時代的觸屏界麵設計”讓我眼前一亮，因為它直接點齣瞭我工作中最大的痛點之一。我常常覺得，我們不僅僅是在設計一個App的界麵，而是在構建一個貫穿用戶生活場景的數字體驗。從清晨醒來查看智能手錶上的天氣，到通勤路上刷手機獲取新聞，再到午休時用平闆瀏覽長篇文章，每一個觸點都至關重要。這本書如果能深入剖析在不同屏幕尺寸、不同交互模式下，如何保持品牌的一緻性，同時又能夠最大化地利用特定終端的優勢，那將是巨大的價值。我特彆期待它能提供一些關於“情境感知設計”的案例和方法論，比如如何根據用戶當前所處的環境（例如，是否在駕駛，是否在嘈雜的環境）來動態調整界麵元素的可見性和交互方式。而且，“觸類旁通”這個詞，也讓我覺得這本書不會是那種隻講皮毛的教程，而是希望能觸及到設計背後更深層次的邏輯和原則，幫助我舉一反三，應對各種未知的挑戰。

評分☆☆☆☆☆

“觸類旁通：多終端時代的觸屏界麵設計”，光聽這個書名，我就覺得它絕對是我想找的那種能夠啓發思維的書。我一直在睏惑，如何在五花八門的智能設備上，設計齣既能滿足各自特性，又能形成整體感的用戶界麵。我渴望這本書能幫助我打破思維定勢，看到觸屏界麵設計背後更普遍的規律。比如，它會不會深入探討如何設計能夠適應不同尺寸和比例屏幕的響應式布局？或者，它是否會提供一些關於如何利用觸屏特有的交互方式（如滑動、捏閤、長按）來創造更直觀、更符閤用戶習慣的體驗？我特彆期待它能分享一些關於“用戶心智模型”的設計理念，如何在不同設備上，都能預測並滿足用戶的潛在需求。這本書的“觸類旁通”這個詞，讓我覺得它會教我一些能夠“舉一反三”的智慧，讓我能夠應對未來更多未知的設計挑戰，而不是僅僅學習一些停留在錶麵的技巧。我希望通過閱讀這本書，能夠獲得一種更係統、更深入的設計理解。

評分☆☆☆☆☆

最近我對如何讓用戶在使用觸屏設備時感受到“順滑”和“愉悅”越來越著迷。這本書的書名，特彆是“觸類旁通”四個字，真的擊中瞭我。我一直在思考，為什麼有些App用起來就是那麼舒服，而有些卻讓人覺得彆扭？這背後一定有非常精妙的設計哲學和實踐技巧。我希望這本書能夠告訴我，如何在多樣化的觸屏設備上，實現這種“渾然天成”的交互體驗。比如，它是否會講解如何設計符閤人體工學的手勢，讓單手操作更加便捷？又或者，它是否會探討如何在不同分辨率的屏幕上，保持UI元素的清晰度和易讀性？我尤其關心的是，這本書能否提供一些關於“微交互”的寶貴見解。那些細微的動畫、反饋和提示，往往是決定用戶體驗成敗的關鍵。如果這本書能夠教會我如何通過這些細節，來引導用戶、安撫用戶、甚至給用戶帶來驚喜，那我就覺得這本書太值瞭。我渴望從中學到一些能夠“舉一反三”的普適性原則，而不是僅僅學習一些孤立的設計模式。

評分☆☆☆☆☆

正版好書，到貨迅速，活動下單，價格美麗

評分☆☆☆☆☆

還不錯有些新東西學習

評分☆☆☆☆☆

還可以仔細看看

評分☆☆☆☆☆

很一般，配圖很次竟然是設計的書?

評分☆☆☆☆☆

書的紙張有點差，又不是彩色印刷的。

評分☆☆☆☆☆

很不錯的書，值得閱讀一下。

評分☆☆☆☆☆

很不錯的書，值得閱讀一下。

評分☆☆☆☆☆

理論為主，屏幕、手勢等

評分☆☆☆☆☆

還可以仔細看看