隨著人機(jī)交互和AI技術(shù)的快速發(fā)展,設(shè)計(jì)師需要從基于屏幕的圖形用戶界面設(shè)計(jì)思維,轉(zhuǎn)變?yōu)榭臻g交互及智能交互的設(shè)計(jì)思維。 本書從設(shè)計(jì)師要懂技術(shù)的原因講起,引導(dǎo)設(shè)計(jì)師結(jié)合技術(shù)去思考設(shè)計(jì),并針對跨設(shè)備交互設(shè)計(jì)、基于AI的設(shè)計(jì)及各種傳感技術(shù)(姿態(tài)和手勢識別、人臉識別和追蹤、眼動(dòng)追蹤等)進(jìn)行解讀與案例分析,幫助設(shè)計(jì)師更好地應(yīng)對未來的工作挑戰(zhàn)。
大家好,我是《AI改變設(shè)計(jì)》和《前瞻交互》的作者薛志榮,這次帶來的是我的第三本書《寫給設(shè)計(jì)師的技術(shù)書》。寫這本書的初衷是我在工作初期有一個(gè)較大的困惑:為什么身邊的設(shè)計(jì)師在做方案時(shí)不考慮技術(shù)是否支持自己的設(shè)計(jì)?
很多產(chǎn)品經(jīng)理和設(shè)計(jì)師給到的回復(fù)是:先不用管技術(shù)能不能做到,優(yōu)先把最佳方案設(shè)計(jì)出來,再推動(dòng)工程師實(shí)現(xiàn)這個(gè)方案就行。當(dāng)時(shí),擁有計(jì)算機(jī)背景的我對這個(gè)回復(fù)是持懷疑態(tài)度的,既然我知道這個(gè)設(shè)計(jì)方案技術(shù)難度大或者實(shí)現(xiàn)成本高,工程師沒時(shí)間也不太愿意做出來,那我為什么要堅(jiān)持這個(gè)設(shè)計(jì)方案?
在后續(xù)的工作經(jīng)歷里我?guī)缀趺刻於荚诤蜕舷掠未蚪坏,隨著時(shí)間的推移,我發(fā)現(xiàn)在做設(shè)計(jì)方案時(shí)考慮技術(shù)實(shí)現(xiàn)方案和成本,讓我的設(shè)計(jì)稿能比其他設(shè)計(jì)師更順利地通過評審,原因在于開發(fā)人員不會在評審階段告知我做不了(當(dāng)然前提是我的設(shè)計(jì)方案得到了產(chǎn)品經(jīng)理和設(shè)計(jì)師的認(rèn)可),這有效提升了我的工作效率,可以不再花大量時(shí)間改稿和溝通。因此,設(shè)計(jì)師懂技術(shù)還真的挺好的。
在20202022年,我去了一家企業(yè)的人機(jī)交互實(shí)驗(yàn)室做設(shè)計(jì)與研究,這才發(fā)現(xiàn)如果實(shí)驗(yàn)室里的設(shè)計(jì)師不懂技術(shù),那基本做不出什么東西來。為什么?因?yàn)楦鞣N設(shè)計(jì)創(chuàng)新的背后都需要有技術(shù)的支撐,而且在日常工作中我們都需要經(jīng)常和技術(shù)人員進(jìn)行交流。如果不懂技術(shù)盲目做設(shè)計(jì)方案,結(jié)果大概率只有兩個(gè):無從下手和自娛自樂。所以,設(shè)計(jì)師懂技術(shù)真的很重要。
因此,寫這本書的第一個(gè)目的是幫助設(shè)計(jì)師更好地理解技術(shù),讓設(shè)計(jì)師在做方案時(shí)更有理有據(jù);第二個(gè)目的是告訴設(shè)計(jì)師其實(shí)技術(shù)并不可怕,并不是懂代碼才算懂技術(shù);第三個(gè)目的是希望有更多設(shè)計(jì)師能發(fā)現(xiàn)技術(shù)帶來的樂趣,這說不定能激發(fā)出更多的靈感。
接下來我介紹一下這本書的大概內(nèi)容:本書前兩章介紹了設(shè)計(jì)師為什么要懂技術(shù),以及最需要掌握的計(jì)算思維是什么;第3、4章重點(diǎn)介紹軟件開發(fā)以及跨設(shè)備交互設(shè)計(jì)中有哪些技術(shù)細(xì)節(jié)需要設(shè)計(jì)師關(guān)注;第5~9章重點(diǎn)介紹智能設(shè)計(jì)中各種算法和傳感器的技術(shù)基礎(chǔ)和設(shè)計(jì)注意事項(xiàng);第10章列舉了智能座艙、虛擬現(xiàn)實(shí)、數(shù)字人等領(lǐng)域未解決的技術(shù)難題,這些問題在未來數(shù)年里都會影響設(shè)計(jì)和體驗(yàn)。
我認(rèn)為,2023年對于設(shè)計(jì)師來說是開啟新篇章的一年,無論是AICG、Web 3還是XR都將為設(shè)計(jì)師帶來新的機(jī)會點(diǎn),只是看我們有沒有能力抓住這些機(jī)會點(diǎn)。尤其是XR方向,2022年11月1日工業(yè)和信息化部、教育、文化和旅游部、國家廣播電視總局、國家體育總局聯(lián)合發(fā)布了《虛擬現(xiàn)實(shí)與行業(yè)應(yīng)用融合發(fā)展行動(dòng)計(jì)劃(20222026年)》,這大大增強(qiáng)了XR從業(yè)人員對未來的信心。報(bào)告指出感知交互技術(shù)對于關(guān)鍵技術(shù)融合創(chuàng)新工程的重要性,而感知交互技術(shù)中涉及的全身動(dòng)捕、手勢追蹤、表情追蹤和眼動(dòng)追蹤技術(shù)會在第6~8章介紹,希望這些內(nèi)容能對讀者有所啟發(fā)和幫助。
薛志榮
2022年12月8日
第 1 章 設(shè)計(jì)師為什么要懂技術(shù)
1.1 原因一:行業(yè)的改變和進(jìn)步 2
1.1.1 海外懂技術(shù)的設(shè)計(jì)師好像有點(diǎn)多 2
1.1.2 我們期待你是全鏈路設(shè)計(jì)師 2
1.1.3 互聯(lián)網(wǎng)泡沫、新一代設(shè)計(jì)師和人工智能同時(shí)帶來的挑戰(zhàn) 3
1.1.4 AR/VR、車聯(lián)網(wǎng)、智能硬件等新賽道的出現(xiàn) 4
1.1.5 政策對于設(shè)計(jì)師的影響 5
1.2 原因二:技術(shù)和設(shè)計(jì)之間有著密切的關(guān)系 5
1.2.1 技術(shù)、設(shè)計(jì)和創(chuàng)新之間的關(guān)系 6
1.2.2 技術(shù)、設(shè)計(jì)和用戶之間的關(guān)系 8
1.2.3 自然無感交互的背后都是技術(shù)和設(shè)計(jì)的融合 10
1.3 原因三:設(shè)計(jì)過程中需要考慮技術(shù) 11
1.3.1 前期調(diào)研 11
1.3.2 方案設(shè)計(jì) 12
1.3.3 設(shè)計(jì)評審和開發(fā)跟進(jìn)
第 2 章 必須掌握的計(jì)算思維
2.1 計(jì)算思維是什么 16
2.1.1 抽象 17
2.1.2 分解 18
2.1.3 模式識別 20
2.1.4 算法 21
2.2 設(shè)計(jì)過程中如何運(yùn)用計(jì)算思維 23
2.2.1 同理心 24
2.2.2 定義問題 24
2.2.3 創(chuàng)意構(gòu)思 25
2.2.4 原型制作 26
2.2.5 測試 26
2.3 計(jì)算思維對于設(shè)計(jì)師的重要性 28
第 3 章 學(xué)會從架構(gòu)的角度理解技術(shù)
3.1 利用 MVC 架構(gòu)模式思考界面的設(shè)計(jì) 32
3.1.1 應(yīng)用的軀殼視圖 33
3.1.2 應(yīng)用的核心模型 34
3.1.3 交互的決策控制器 36
3.2 如何結(jié)合技術(shù)提升應(yīng)用的用戶體驗(yàn) 38
3.2.1 從接口的角度構(gòu)建用戶體驗(yàn) 38
3.2.2 從控件的角度設(shè)計(jì)用戶體驗(yàn) 41
3.2.3 從設(shè)計(jì)的角度解決性能問題 43
3.2.4 如何看待應(yīng)用的啟動(dòng)和狀態(tài)恢復(fù) 50
第 4 章 如何為跨設(shè)備交互進(jìn)行設(shè)計(jì)
4.1 設(shè)計(jì)界面布局時(shí)的注意事項(xiàng) 54
4.1.1 應(yīng)用設(shè)計(jì)需要考慮的平臺和狀態(tài) 54
4.1.2 看不見的邊界 62
4.1.3 動(dòng)態(tài)布局的設(shè)計(jì)要點(diǎn) 64
4.2 如何針對不同平臺的特點(diǎn)進(jìn)行設(shè)計(jì) 69
4.2.1 基于不同平臺的特點(diǎn)和規(guī)范去設(shè)計(jì) 69
4.2.2 構(gòu)建靈活的動(dòng)態(tài)布局框架 72
4.2.3 動(dòng)態(tài)布局中的界面層級變化 75
4.2.4 以平板電腦為橋梁打通移動(dòng)端和桌面端的設(shè)計(jì) 83
4.2.5 兼容不同平臺、設(shè)備的差異和特點(diǎn) 88
4.3 動(dòng)態(tài)布局中的交互方式 90
4.3.1 關(guān)注不同的交互方式 90
4.3.2 數(shù)據(jù)互通的重要性 96
4.3.3 淺談跨設(shè)備和跨應(yīng)用之間交互的基礎(chǔ)體驗(yàn)要求 97
第 5 章 基于人工智能的設(shè)計(jì)
5.1 人工智能基礎(chǔ)知識 101
5.1.1 人工智能模型,有多少人工就有多少智能 101
5.1.2 基于預(yù)測的人工智能 103
5.1.3 人工智能模型的注意事項(xiàng) 106
5.2 人工智能如何影響界面設(shè)計(jì) 110
5.2.1 搜索、制作素材和內(nèi)容 110
5.2.2 人工智能對界面的影響 113
5.3 基于意圖的交互設(shè)計(jì) 117
5.3.1 蘋果對于智能交互的理解 117
5.3.2 蘋果的 Intelligence 和 Donate 121
5.3.3 蘋果的其他計(jì)劃 123
5.4 基于人工智能的設(shè)計(jì)事項(xiàng) 124
5.4.1 合理地收集數(shù)據(jù)和優(yōu)化模型 124
5.4.2 基于可解釋性構(gòu)建合理的人機(jī)信任 125
5.4.3 交互過程的注意事項(xiàng) 126
5.5 智能設(shè)計(jì):基于準(zhǔn)確率和兜底的設(shè)計(jì) 129
第 6 章 姿態(tài)和手勢識別
6.1 計(jì)算機(jī)視覺 135
6.1.1 計(jì)算機(jī)視覺的重要性 135
6.1.2 簡單了解計(jì)算機(jī)視覺背后的技術(shù)細(xì)節(jié) 136
6.2 姿態(tài)和手勢識別在不同領(lǐng)域的作用 138
6.2.1 體感游戲和健身 138
6.2.2 控制智能設(shè)備 139
6.2.3 智能座艙 140
6.3 實(shí)現(xiàn)姿態(tài)識別的不同技術(shù) 140
6.3.1 攝像頭 140
6.3.2 慣性傳感器 144
6.4 實(shí)現(xiàn)手勢識別的不同技術(shù) 146
6.4.1 攝像頭 146
6.4.2 數(shù)據(jù)手套 147
6.4.3 肌電傳感器 148
6.4.4 毫米波雷達(dá)、超聲波和其他 149
6.5 實(shí)現(xiàn)姿態(tài)和手勢識別的設(shè)計(jì)注意事項(xiàng) 152
6.5.1 為什么選擇手勢識別和姿態(tài)識別 152
6.5.2 隱私是否為第一考慮對象 152
6.5.3 算力是否足夠 153
6.5.4 檢測距離和安裝位置 153
6.5.5 場景對模型的挑戰(zhàn) 154
6.5.6 關(guān)鍵點(diǎn)的缺失和抖動(dòng) 154
6.5.7 基于人體工程學(xué)進(jìn)行設(shè)計(jì) 155
6.5.8 姿態(tài)識別需要考慮不同人群身體細(xì)節(jié)的不同 155
6.5.9 部分手勢的初始態(tài)很重要 156
6.5.10 反復(fù)運(yùn)動(dòng)帶來的問題 156
6.5.11 考慮文化的差異 157
6.6 設(shè)計(jì)拆解:AI 健身的實(shí)現(xiàn)和優(yōu)化 157
6.7 姿態(tài)和手勢識別的設(shè)計(jì)工具箱 163
第 7 章 人臉識別和追蹤
7.1 人臉識別的不同作用 166
7.1.1 身份識別 166
7.1.2 臉部復(fù)刻 166
7.1.3 表情識別和交互 168
7.1.4 其他作用 168
7.2 人臉追蹤和識別的技術(shù)細(xì)節(jié) 169
7.2.1 人臉追蹤 169
7.2.2 人臉識別 173
7.3 實(shí)時(shí)人臉識別的設(shè)計(jì)注意事項(xiàng) 175
7.3.1 環(huán)境等因素的影響 175
7.3.2 表情互動(dòng)存在的問題 177
7.4 設(shè)計(jì)拆解:人臉識別閘機(jī)的設(shè)計(jì) 178
7.5 設(shè)計(jì)拆解:表情設(shè)計(jì)和互動(dòng) 180
7.6 人臉識別和追蹤的設(shè)計(jì)工具箱 184
第 8 章 眼動(dòng)追蹤
8.1 眼動(dòng)追蹤在不同領(lǐng)域的作用 188
8.1.1 用戶研究 188
8.1.2 智能座艙 189
8.1.3 虛擬現(xiàn)實(shí)和增強(qiáng)現(xiàn)實(shí) 190
8.1.4 信息無障礙 191
8.2 眼動(dòng)追蹤的技術(shù)原理和區(qū)別 191
8.3 眼動(dòng)追蹤的設(shè)計(jì)注意事項(xiàng) 195
8.3.1 攝像頭擺放位置和用戶穿著打扮的影響 195
8.3.2 使用前需要校準(zhǔn) 195
8.3.3 頭部運(yùn)動(dòng)的影響 197
8.3.4 眼動(dòng)追蹤誤差帶來的影響 197
8.3.5 視線運(yùn)動(dòng)不代表用戶想要的 198
8.4 設(shè)計(jì)拆解:Tobii 眼動(dòng)儀和 GUI 的配合 199
8.5 眼動(dòng)追蹤的設(shè)計(jì)工具箱 203
第 9 章 感知、互聯(lián)和追蹤
9.1 不同的技術(shù)方案和案例 208
9.1.1 RFID 和 NFC 208
9.1.2 Wi-Fi 和藍(lán)牙 211
9.1.3 UWB 213
9.1.4 紅外線和 ZigBee 214
9.1.5 SLAM 215
9.2 設(shè)備感知、互聯(lián)和追蹤的設(shè)計(jì)注意事項(xiàng) 216
9.2.1 硬件的約束條件 216
9.2.2 如何綁定新設(shè)備 218
9.2.3 信號強(qiáng)弱和精度 219
9.2.4 基于場景的觸發(fā) 220
9.3 設(shè)計(jì)拆解:蘋果的設(shè)備互聯(lián)是如何實(shí)現(xiàn)的 223
9.4 設(shè)備感知、互聯(lián)和追蹤的總結(jié) 227
第 10 章 未來設(shè)計(jì)方向存在的挑戰(zhàn)
10.1 智能座艙 229
10.1.1 算力是體驗(yàn)的最大瓶頸 229
10.1.2 難以遍歷完整的駕駛?cè)蝿?wù) 230
10.1.3 人因工程學(xué)的幫助和挑戰(zhàn) 233
10.2 虛擬現(xiàn)實(shí) 237
10.2.1 20 毫秒的制約 237
10.2.2 錯(cuò)誤的細(xì)節(jié)都會引起不適 239
10.3 基于頭戴設(shè)備的增強(qiáng)現(xiàn)實(shí) 240
10.3.1 配準(zhǔn)誤差難以完全控制 240
10.3.2 深度知覺帶來的影響 241
10.4 數(shù)字人 243
10.4.1 建模和渲染之間的平衡 243
10.4.2 如何驅(qū)動(dòng)數(shù)字人是關(guān)鍵 245
10.5 空間交互 248
10.5.1 攝像頭、傳感器的精度是否支撐設(shè)備的交互行為 248
10.5.2 隱私問題帶來的影響 249
10.5.3 場景的復(fù)雜度 250
10.5.4 普適計(jì)算幾時(shí)能到來 253
10.6 結(jié)語:實(shí)現(xiàn)元宇宙的難度有多大 254