編輯推薦
日本移動設備UI設計專著
國內UI設計先驅的領先感悟
+精密闡述UI設計思維
+移動設備UI設計全案展示
+GUI設計技能火速提高
+從需求到産品全案揭祕
DVD光盤
+UI設計大師的操作視頻
+《UI進化論:移動設備人機交互界麵設計》實例素材和最終文件
+更多UI設計師必備資源
內容簡介
《UI進化論:移動設備人機交互界麵設計》內容涵蓋交互設計與界麵設計的基本概念、設計規範和工作流程。由於這是一本以實際工作案例和工作經驗為主的書,一開始著力介紹目前最新發展的交互手段和使用場所,當然是以移動手持設備為主。作為設計師,一定要關心如何將這些創意産品化。接下來介紹如何正確地將一個設計想法變成産品。産品化的過程中,用戶體驗設計是相當重要的,由於UCD設計思想的廣泛使用,《UI進化論:移動設備人機交互界麵設計》重點研究並分析用戶體驗設計的可行性和方法。視覺設計是普通大眾直接接觸産品設計核心的介質,《UI進化論:移動設備人機交互界麵設計》將使用初級→高級→復閤型的綜閤設計案例介紹如何設計齣讓人喜愛的視覺作品。最後,還說明瞭一些産品的完整設計案例,展示一個移動手持設備交互和界麵設計的全過程。
《UI進化論:移動設備人機交互界麵設計》不但有大量的文字內容,也有配套的DVD光盤,其中包含瞭作者錄製的設計視頻教學和《UI進化論:移動設備人機交互界麵設計》操作實例素材及最終文件。
《UI進化論:移動設備人機交互界麵設計》適閤移動UI設計師迅速進入職場角色,也可供平麵設計人員、交互設計人員和對UI設計感興趣的讀者閱讀和參考。
作者簡介
周陟,中國數字藝術奬全國巡展受邀,數字圖形設計參展上海“齣街”國際藝術設計展;受邀平麵招貼 參展新西蘭GOUW設計師平颱推薦WEB設計師;E-motional design, k10k, 美國Visualizer藝術平颱作品收錄推薦。曾擔任中域網美術指導,有著豐富的互聯網産品設計開發經驗,曾參與策劃設計國內大型手機電子商務平颱中域網,同時作為中國設計聯盟的資深閤作夥伴,編寫瞭《數字圖形設計風雲:雙人構想》、《設想》等暢銷書籍。
內頁插圖
精彩書評
在各種變化的環境中單手使用一個小屏幕設備,是件極其痛苦的事情。要降低這種痛苦,隻有做齣更完美的交互界麵。這本書在給我們介紹一種降低人們痛苦的方法,值得所有緻力於降低用戶痛苦的設計師們認真品讀。
——白鴉 支付寶首席産品體驗師
在我的印象中,Lytous是一個十分優秀的視覺設計師。最近幾年的接觸,發現他原來還是一個高産作傢。這還是其次,最重要的是他寫的每一本書都很暢銷。讓我們感謝他對中國設計界做齣的貢獻!讓我們為中國設計!
——JunChen 途牛網産品總監
縱觀國內目前齣版的一些Web可用性書籍,東拼西湊類、偷梁換柱類和濫竽充數類比比皆是,針對移動設備交互和界麵設計類的圖書更是為數不多,周陟同學的這本書從移動設備的交互到項目實施,再到一些實操過程中的一些問題的解決方法,都做瞭係統和流程化的闡述。我對這本書的評價:全麵,係統,實用。是您手頭不可或缺的一本移動交互界麵設計案例教材書。
——壞人
目錄
PART 1 設計産品化
第1章 交互概念設計與圖形界麵設計 3
1.1 交互概念設計 4
1.1.1 交互設計從概念齣發 4
1.1.2 交互設計的發展 6
1.1.3 交互設計的應用展示 8
1.2 圖形界麵設計12
1.2.1 圖形界麵的發展曆程 12
1.2.2 用戶使用係統就是使用界麵 15
1.2.3 用戶界麵不是繪畫綉花 15
1.2.4 UCD的設計思想 16
1.2.5 使用圖形軟件之前的準備 16
1.2.6 必備的軟件分析 16
1.3 交互概念設計與圖形界麵的聯係 18
1.3.1 理解用戶的需求和分析需求 18
1.3.2 設計一些候選方案和概念 19
1.3.3 進行原型設計 19
1.3.4 用戶測試與評估 19
1.3.5 兩者的關係和應用 19
第2章 交互概念與圖形界麵設計新趨勢 21
2.1 手持移動設備的産品特點22
2.1.1 不同的感知和感覺 22
2.1.2 不同的使用環境 24
2.2 手持移動設備的概念設計要素 32
2.3 手持移動設備的界麵設計風格 33
2.4 手持移動設備的基礎知識35
2.4.1 承載平颱的介紹和分析35
2.4.2 顯示介質的介紹和分析37
2.4.3 作者的經驗39
第3章 手持移動設備設計的産品化 45
3.1 産品設計的目的46
3.1.1 産品設計的目的是為使用産品的用戶 46
3.1.2 交互設計和界麵設計不是萬能的47
3.1.3 我應該使用什麼樣的産品 48
3.2 設計是如何産品化的 51
3.2.1 如何決定將一個設計産品化的 市場調查和分析 51
3.2.2 設計的産品化檢驗過程57
3.3 産品化過程中的問題 60
3.3.1 天使客戶還是魔鬼客戶 60
3.3.2 為什麼用戶選擇瞭他62
3.3.3 産品經理的太極拳 64
3.3.4 開發人員說:“我討厭交互設計”67
3.3.5 交互設計師說:“我不需要圖形”67
3.3.6 設計師的一廂情願 68
PART 2 産品化交互設計過程
第4章 産品策劃定義 73
4.1 競爭分析 74
4.1.1 如何分析競爭對手和産品 74
4.1.2 設計總監的角色 75
4.2 相關負責人會議77
4.2.1 會議的前期準備 77
4.2.2 團隊成員的確定 81
4.2.3 齣現的一些波動因素83
第5章 用戶分析與研究 87
5.1 用戶參與研究法88
5.1.1 為何用戶要參與研究88
5.1.2 一個典型案例 88
5.1.3 創意從何而來90
5.2 觀察法93
5.2.1 觀察的方法93
5.2.2 觀察的目的和分析手段93
5.3 用戶訪談 95
5.3.1 用戶訪談的原則 95
5.3.2 用戶訪談的記錄方式95
5.4 焦點小組法 96
5.5 卡片分類法 98
5.6 頭腦風暴法 99
5.6.1 頭腦風暴法成功的要點99
5.6.2 “正規”手持設備的GUI界麵 99
5.7 任務分析法 102
5.8 情景設定法 103
5.9 社會性研究法 103
第6章 概念原型設計 109
6.1 紙上原型 110
6.1.1 紙上原型的設計要點 110
6.1.2 一些案例 110
6.2 設計原則 112
6.2.1 需要做些什麼 112
6.2.2 視覺與功能平衡 112
6.3 交互原型設計 115
6.3.1 低保真原型設計 115
6.3.2 高保真原型設計 116
第7章 設計驗證測試 119
7.1 可用性測試 120
7.1.1 可用性測試對設計有什麼幫助 120
7.1.2 可用性測試的場地和費用 120
7.1.3 什麼時候進行?多少人參與?如何準備 121
7.2 啓發式評估 123
7.2.1 如何決定將一個設計産品化 123
7.2.2 設計的産品化檢驗過程 124
7.3 問捲錶格 126
7.3.1 問捲調查法 126
7.3.2 如何設計一份標準的問捲錶格 126
第8章 設計規範 131
8.1 設計規範 132
8.1.1 設計規範的必要性 132
8.1.2 關於設計規範的談話 133
8.2 設計的執行 136
8.2.1 設計執行說明書 136
8.2.2 編寫要點 138
8.3 輸齣標準化 142
8.3.1 設計說明 142
8.3.2 菜單樹結構 142
8.3.3 文件打包 144
PART 3 GUI視覺設計
第9章 一切從圖標開始 147
9.1 圖標的故事 148
9.1.1 圖標設計的意義 148
9.1.2 好的圖標設計有什麼特點 152
9.2 手持設備的圖標設計 159
9.2.1 手持設備的圖標設計有何不同 159
9.2.2 設計一個手持設備的圖標 160
第10章 手持設備的圖形界麵 167
10.1 圖形界麵設計的創意 168
10.1.1 優秀圖形界麵賞析 168
10.1.2 開始設計手持設備的圖形界麵 176
10.2 【案例】手機MP3播放器的界麵設計 183
10.2.1 産品定義 184
10.2.2 交互設計 184
10.2.3 界麵原型 185
10.2.4 視覺設計 185
10.3 【案例】移動設備主題界麵設計 186
第11章 圖形界麵的創意升級 193
11.1 圖形界麵不隻是畫圖 194
11.1.1 讓手持設備變得人性化 194
11.1.2 情感化因素不可忽視 194
11.1.3 交互特效的引入 195
11.1.4 産品=體驗=品牌 196
11.1.5 臨場的體驗決定購買意願 197
11.2 用戶體驗 197
PART 4 項目實踐
第12章 手機交互界麵設計始末 205
12.1 製定設計流程 206
12.1.1 一個優秀的圖形界麵設計還需要什麼 206
12.1.2 麵嚮整個産品過程的設計流程 212
12.2 第一次項目會議 214
12.3 圖標設計 220
12.3.1 圖標設計的思考方式 220
12.3.2 【教程】圖標設計 224
12.4 評審篩選會議 231
12.5 設計方嚮 233
12.6 交互設計效果 237
12.7 界麵設計 239
12.7.1 【教程】main menu(主菜單)設計 242
12.7.2 【教程】world time(世界時間)設計 245
12.8 界麵設計提案 249
12.9 製作Flash演示 253
12.9.1 製作平麵演示框架 253
12.9.2 製作Flash演示 254
12.10 提案會議 257
12.10.1 準備演示的資料 257
12.10.2 確定必要的參會人員 259
第十三章 樣闆工程設計——UI決策産品 263
13.1 産品策劃 264
13.1.1 PPT演示文檔的作用 264
13.1.2 《用戶體驗淺析》培訓課程試捲 269
13.1.3 《用戶體驗淺析》部門培訓試捲反饋分析 271
13.2 項目會議 274
13.3 概念設計 281
13.3.1 “影視手機”概念機型定義 281
13.3.2 測試LCD 284
13.3.3 界麵概念設計 285
13.4 界麵設計 286
13.5 交互實現 293
13.6 音效整閤 300
13.6.1 音源芯片測試 300
13.6.2 鈴音製作示例 301
13.7 製作開關機動畫 304
精彩書摘
這是Shneiderman首先提齣的概念,用戶最終關心的是他想操作的對象,他隻用關心任務語義,而不用過多地為計算機語義和句法分心。
比如Wind0Ws的桌麵係統,模擬瞭物理環境中的桌麵方式,文件夾的分類讓用戶瞭解隻要操作文件夾便可找到需要的資料,而不用關心文件夾與係統直接的信息處理過程。多媒體用戶界麵
多媒體技術引入瞭動畫、音頻、視頻等交互媒體手段,特彆是引入瞭音/視頻媒體,極大地豐富瞭計算機錶現信息的形式,提高瞭用戶接受信息的效率。
在你的手機上,你能夠在發送短消息的同時,聽到發送成功的提示音,這樣你能夠在不觀察屏幕的情況下,瞭解係統目前的任務完成情況,這使得你能從單次操作中解放齣更多時間。
多通道用戶界麵
多通道用戶界麵的引入是為瞭消除當前WOMP/GUI以及多媒體用戶界麵通信帶寬不平衡的瓶頸,綜閤采用視綫、語音、手勢等新的交互通道、設備和交互技術,使用戶利用多個通道以自然、並行、協作的方式進行人機對話,通過整閤來自多個通道的精確的和不精確的輸入來捕捉用戶的交互意圖,提高人機交互的自然性和高效性。
國外行業中的研究涉及鍵盤、鼠標器之外的輸入通道主要是語音和自然語言、手勢、書寫和眼動方麵,並以具體係統研究為主。上麵我們提到的marro係統正是這種交互手段的應用。
虛擬現實技術
在虛擬現實中,人是主動參與者,復雜係統中可能有許多參與者共同在以計算機網絡係統為基礎的虛擬環境中協同工作,虛擬現實係統的應用十分廣泛,幾乎可用於支持任何人類活動和任何應用領域。
虛擬現實技術比以前任何人機交互形式都有希望徹底實現和諧的、“以人為中心”的人機界麵。
前言/序言
建議讀者在閱讀本書前可以先看看這個部分,很多本書的重要說明與信息都將在此呈現。本書有配套的DVD光盤,其中包含瞭作者錄製的設計視頻教學以及本書實例的素材和最終文件。(它們來自於著名視頻分享網站youtube和相關産品的終端廠商官方網頁)
在此感謝手持設備設計行業中從事交互界麵設計的前輩與領袖,他們的專業知識和經驗讓作者能更好地闡述本書中的設計思想。
感謝所有在互聯網上無私展示優秀作品的設計師,他們的部分作品讓本書的讀者更貼切地瞭解到何謂優秀的交互界麵設計。
特彆感謝CKTelecomUI部全體工作同仁,由於他們的優秀作品纔使得本書的第四部分顯得更為飽滿。
寫作目的
對於行業
人機交互設計和界麵設計從來沒有今天這般興盛,行業內各個大型協會與小型組織的交流互動,使得這個行業的上、中、下遊組成部分更加瞭解這個學科和它能夠帶來的價值,而他們積極投身其中的行動和廣大愛好者的激情,正是本書的創作初衷。
本書的作者同樣是該行業的實踐者,然而行業體係龐大,組成復雜,因此,作者隻能挑選自己熟知,並在當下極具市場價值的某個環節進行闡述,以便將自己的一些經驗和收獲與讀者分享。
選擇手持設備這個領域作為本書的重點,並非偶然,首先本書作者就是該領域的資深設計師;其次,手持設備的日益發展與功能聚閤,使得它在信息化的今天,成為極重要的工作、生活和娛樂設備。
本書中,作者也展示瞭當今行業前沿的發展動態與技術的更新交替,以行業的視角關注設計本身,使得書中的案例與流程具有更實際的意義。
對於企業
本書作者不僅擁有國內知名IT公司與通信設備公司的設計工作經驗,也與很多中、小型企業有過深入的設計閤作,其中的工作經驗與技巧對本土企業中的工作同仁具有實際的參考價值。
中國企業本身對於交互設計與界麵設計的特殊理解,團隊的階梯式發展,其中的人文因素和技術問題,作者都親身經曆,相信這些知識的分享會盡量保持客觀。
在書中,作者展示瞭大量的實際工作操作經驗,有些甚至是教訓(齣於隱私考慮,書中不會公布公司的名稱和項目的詳細情況),但我相信這些經驗具有普遍性意義。
本書的分析、指導和教學,都將以實際工作為主,理論研究和晦澀難懂的專業用詞盡量避免,讓本書成為讀者工作中的一本參考書籍或實用手冊。
對於個人
交互設計和界麵設計是針對人的設計(其實有哪種設計不是如此?),是研究用戶和觀眾的設計,是大量運用心理學、市場營銷學、信息處理技術、社會工程學等綜閤知識的設計手段。
用戶如此重要,以至於我同樣希望普通受眾和非從事該領域工作的用戶也能看懂這本書,瞭解一個産品的核心設計過程,提高分辨優秀産品和庸俗産品的能力,請不要害怕本書中的軟件和專業詞匯,書中提供瞭一些利於理解的案例和實際在你身邊發生的故事,你會發現“交互與界麵無處不在”。
正因作者不是沉醉於理論研究的“知識狂人”,也不是迷戀産品更新版本的“技術先鋒”,書中提齣的建議和設計邏輯,將告訴你——應該使用什麼樣的産品?為什麼生活如此枯燥和復雜?高科技和油鹽醬醋有什麼關係?等等。
《UI進化論:移動設備人機交互界麵設計》是一本深入探討移動設備人機交互界麵(UI)演變曆程、核心設計原則及其未來發展趨勢的著作。本書並非簡單羅列設計技巧,而是以一種曆史的視角,追溯移動設備UI從最初的功能性指令集,到如今豐富、直觀、個性化的交互體驗的完整蛻變過程。 內容概述: 本書主體內容可分為三個主要部分:曆史迴顧與演進分析、核心設計理念與實踐,以及未來趨勢與前沿探索。 第一部分:曆史迴顧與演進分析 這一部分將帶領讀者穿越移動設備UI發展的曆史長河。我們將從早期功能機時代簡陋的按鍵式交互講起,那時UI設計的主要目標是盡可能高效地完成有限的功能。隨後,我們將聚焦於智能手機的崛起,探討觸屏技術的齣現如何顛覆瞭傳統的交互模式,以及由此帶來的UI設計範式的根本性轉變。 早期移動設備UI的特點: 功能導嚮: 設計圍繞核心功能展開,簡潔直接。 指令式交互: 用戶通過預設的按鍵組閤或菜單層級進行操作。 有限的視覺錶現: 黑白或低分辨率彩屏,字體、圖標等視覺元素較為樸素。 典型案例分析: 如功能機的菜單結構、短信界麵、簡單遊戲UI等。 智能手機時代的UI革命: 觸屏交互的興起: 從電阻屏到電容屏,多點觸控技術的齣現如何改變瞭交互的可能性。 圖形用戶界麵(GUI)的普及: 圖標、窗口、菜單等可視化元素的引入,使得操作更加直觀。 操作係統的影響: iOS和Android兩大操作係統的齣現,各自形成瞭獨特的UI設計語言和交互範式。 “擬物化”設計(Skeuomorphism)的盛行與衰落: 探討擬物化設計如何模擬現實世界的物體,提供熟悉感,以及其局限性。 “扁平化”設計(Flat Design)的崛起: 分析扁平化設計的興起原因,如提升加載速度、適應不同屏幕尺寸等,及其帶來的視覺風格變化。 設計原則的演變: 從注重功能到兼顧美學,再到用戶體驗的全麵提升。 跨越平颱的UI協同: 響應式設計(Responsive Design): 探討如何在不同屏幕尺寸和設備上提供一緻且優化的用戶體驗。 跨設備一緻性: 分析不同設備(手機、平闆、智能手錶等)之間UI設計語言的協同與差異。 第二部分:核心設計理念與實踐 在深入瞭解UI的演變曆程後,本書將聚焦於構成現代移動設備UI設計的核心理念和實踐方法。這一部分旨在為讀者提供一套係統化的設計思維框架,幫助他們理解“好”的UI設計究竟包含哪些要素,以及如何將其付諸實踐。 用戶體驗(UX)為中心的設計: 理解用戶: 用戶研究方法(用戶畫像、用戶旅程圖、場景分析等)如何指導UI設計。 可用性原則: 經典可用性原則(如尼爾森十大可用性原則)在移動UI設計中的應用。 用戶流程設計: 如何設計清晰、高效的用戶流程,減少用戶認知負荷。 情感化設計(Emotional Design): 如何通過UI設計引發用戶的情感共鳴,提升用戶滿意度。 視覺設計原則與實踐: 色彩理論與應用: 如何運用色彩來傳達信息、引導用戶注意、建立品牌形象。 排版設計: 字體選擇、字號、行距、對齊等如何影響可讀性和視覺層次。 圖標設計: 圖標的識彆性、一緻性、含義傳達以及在不同尺寸下的錶現。 布局與網格係統: 如何構建穩定、清晰、易於掃描的界麵布局。 動效設計(Motion Design): 動畫在UI中的作用,如提供反饋、引導過渡、增強沉浸感。 留白(Whitespace)的藝術: 留白如何提升界麵的呼吸感、聚焦內容、引導視綫。 交互設計模式與技巧: 導航模式: 抽屜導航、底部標簽導航、頂部標簽導航等常見導航模式的優缺點及適用場景。 控件設計: 按鈕、輸入框、開關、滑塊等交互控件的設計規範與最佳實踐。 信息架構: 如何組織和呈現內容,使其易於用戶查找和理解。 反饋機製: 如何及時、清晰地嚮用戶提供操作反饋,讓他們瞭解係統狀態。 手勢交互: 滑動、捏閤、長按等手勢在移動UI中的廣泛應用及其設計考量。 無障礙設計(Accessibility): 如何設計能夠被所有用戶(包括殘障人士)使用的UI。 設計流程與工具: 設計思維流程: 從概念提齣、原型設計到用戶測試的迭代過程。 綫框圖(Wireframing)與原型製作: 使用專業工具(如Sketch, Figma, Adobe XD等)進行低保真和高保真原型設計。 用戶測試與迭代: 如何通過用戶測試發現設計問題並進行改進。 第三部分:未來趨勢與前沿探索 在對現有UI設計原理和實踐進行深入剖析後,本書將目光投嚮移動設備UI設計的未來。我們將探討新興技術、設計理念的演變,以及這些變化將如何塑造我們未來與移動設備交互的方式。 人工智能(AI)在UI設計中的角色: 個性化推薦與自適應UI: AI如何根據用戶行為和偏好動態調整界麵。 智能語音助手與自然語言交互: 語音界麵(VUI)的發展及其與圖形界麵的融閤。 AI驅動的設計工具: AI在設計流程自動化、內容生成等方麵的應用。 增強現實(AR)與虛擬現實(VR)的UI挑戰: 三維空間交互: 如何在三維環境中設計直觀、易用的UI。 沉浸式體驗的設計: AR/VR UI如何與現實世界或虛擬世界融閤。 新的交互範式: 空間錨點、手部追蹤等新興交互方式的設計考量。 微交互(Microinteractions)的精進: 微交互的定義與價值: 如何通過細微的交互設計提升用戶體驗的愉悅度和效率。 數據驅動的設計迭代: 如何利用用戶數據來優化微交互。 可穿戴設備與物聯網(IoT)的UI設計: 小屏幕與多設備協同: 為智能手錶、智能傢居等設備設計簡潔高效的UI。 場景化交互: 如何根據用戶所處情境提供定製化的交互體驗。 新興設計趨勢與哲學: “暗黑模式”(Dark Mode)的普及與考量: 節能、護眼、視覺美學等方麵的優勢。 “超現實設計”(Neumorphism)等視覺風格的探索。 可持續設計(Sustainable Design)在UI領域的體現。 設計師的未來: 技能的演進: 從純粹的視覺設計師到具備更多技術理解和跨領域協作能力的設計師。 倫理與責任: 在設計中考慮隱私、信息繭房、技術濫用等問題。 附錄:DVD-ROM光盤內容(暗示性描述,不直接列齣光盤內容) 隨書附贈的DVD-ROM光盤,收錄瞭本書理論的實踐案例,可能包含: 精選項目案例分析: 深入剖析一些成功或具有代錶性的移動App UI設計,展示設計思路、過程和最終效果。 設計模式庫: 提供常用UI組件和交互模式的參考示例。 實用資源鏈接: 推薦設計師常用的設計工具、素材網站、學習資源等。 動態演示: 可能包含一些UI動效的演示視頻,直觀展示動效設計在實際中的應用。 總結: 《UI進化論:移動設備人機交互界麵設計》旨在為設計師、産品經理、開發者以及所有對移動設備交互設計感興趣的讀者提供一個全麵、深入的知識體係。本書強調設計的曆史脈絡、理論基礎,並積極展望未來的發展方嚮,幫助讀者構建紮實的設計功底,培養前瞻性的設計思維,以應對日益復雜和充滿挑戰的移動設備UI設計領域。通過對本書的學習,讀者將能夠更好地理解用戶需求,設計齣既美觀又實用的移動設備交互界麵,從而為用戶創造更加卓越的數字體驗。