如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在這個看臉的時代，無論是真實社交，還是網絡社交，甚至虛擬形象社交，都是「顏值即正義」。長得好看是一大優勢，或者至少要滿足彼此的審美才有進一步發展的可能。當然要想真正地完成社交目的，還是要看個人的社交能力。在進行網絡社交時（興趣社交除外），可謂「無頭像，不社交」，畢竟跟陌生人搭訕的篩選成本太高，看頭像照片是最直接快速的方式。據說，有好事者在三里屯注冊了某一款陌生人社交軟件，并將頭像設置成了一個在盧浮宮的露背少女照片，在短短時間內，居然收到了 10000 多次點贊，頭像的魔力可見一斑。

頭像設置流程

頭像設置流程一般包括頭像選擇、上傳、裁剪、預覽四個步驟，在用戶界面展現時，部分步驟可合并或跳過，但至少要包括裁剪和預覽。

1. 選擇圖片源

頭像圖片的來源包括本地圖片、系統推薦頭像、用戶個人線上相冊、即時拍攝等。同一產品在不同端可以支持不同的上傳渠道，比如 PC 端攝像頭拍攝質量不佳，而且臺式機不一定配備，一般可以不做支持。

2. 上傳條件限制

上傳本地圖片作為頭像時，圖片的格式、尺寸、文件大小規則應盡量放開限制，至少要支持 JPG、GIF、PNG、JPEG、BMP 等格式。隨著手機拍攝照片的尺寸和大小越來越大，所以 5~6M 是一個比較合適的上限。關于服務器圖片存儲，應保留一張高清大圖和多套不同尺寸的縮略圖。

3. 裁剪處理

圖片裁剪包括系統自動裁剪和用戶手動裁剪。如果不支持手動裁剪，最好把系統自動裁剪和截取做了。京東商城 web 端就沒有截取圖片中央區域，而是直接擠壓或拉伸圖片，導致圖片變形效果很差。手動裁剪時，一般要輔助縮放、旋轉、鏡像等功能。縮放時需注意極限值，否則會導致背景空白（如QQ空間），要做相應的填充處理。裁剪框最好加入輔助線（如九宮格、方圓）和遮罩，方便實時預覽方形和圓形頭像的效果。有時也會加入濾鏡、貼紙等功能。

4. 效果預覽

「所見即所得」是打造優良用戶體驗的訣竅之一，所以提供實時反饋和預覽是必不可少的。比如裁剪得到的各種形狀和尺寸的預覽，濾鏡效果實時渲染等。當然，實時性也和系統性能有關。

頭像的常見展示形狀包括方和圓，有時也有異形頭像。關于頭像形狀的「方圓」論證可以參考微信和 QQ 設計師的官方回復。

同樣作為騰訊的產品，為什么 QQ 的頭像是圓的？而微信的頭像是方的呢？

騰訊的回應如下：

相比方形，人的頭像更接近圓形。圓形 QQ 頭像能更突出頭像弱化背景，也更鼓勵用戶使用真實自拍作為 QQ 頭像。

QQ 作為平臺會接入游戲和第三方應用內容，圓形 QQ 頭像在這些方形、異形圖標環境中提高辨識度，降低用戶的認知門檻。

QQ 希望給用戶傳遞樂在溝通，展現年輕個性的態度，圓形 QQ 頭像更具靈動和活力，與之無縫銜接的頭像掛件也為用戶帶來更個性化的搭配和豐富的自我展示。

因為照片本來是方的，方頭像更符合用戶習慣。

《為什么微信頭像是方的？QQ頭像是圓的？｜你問鵝答》

還有百度小程序關于頭像的規范可供參考：頭像應保證清晰，頭像的主體元素在方形或圓形參考線內，不遮擋關鍵信息，確保前端展現時能在圓形輪廓中展現完全。

設置頭像的12種方式

1. 默認頭像

為縮短注冊流程，減少潛在用戶流失，用戶注冊過程中一般不會強制用戶設置頭像。所以，為防止用戶不去設置頭像以及頁面中頭像加載不出來，系統會提供默認頭像以便在相關位置展示?？梢圆捎没疑^像，也可以采用基于企業吉祥物卡通形象設計的彩色頭像（例如蝦米、轉轉）。二者各有好處，灰色頭像可以時常提醒用戶去設置頭像，彩色頭像則可以豐富畫面、增加趣味性。不過唯一的遺憾是一旦設置了新頭像，改不回默認頭像了，畢竟有的默認頭像還是挺好看的。有的社區允許游客用戶進行點贊、評論等操作，這時便會用到游客默認頭像。當然，同一系統內，默認頭像也可以不唯一，比如，根據用戶性別、星座匹配頭像，根據用戶身份角色匹配頭像（司機/乘客，招聘者/求職者），或者制作頭像庫為用戶隨機分配頭像。

2. 系統推薦頭像

讓用戶自己拍攝或找到一張自己滿意的圖片做頭像，對有些用戶而言其實是一件成本比較高的事情。如果用戶群體足夠大，圖片質量難以保證，甚至內容監管又會帶來新的問題，所以推薦一些優質頭像供用戶挑選，就成了一個很不錯的輔助解決方案。QQ 很早就推出了類似功能，甚至成了會員服務的一部分。平安金管家 APP 也有類似功能，提供了四個商務風格的卡通頭像供用戶選擇。

最近比較火的匿名社交APP Soul 也同樣支持使用系統推薦頭像，而且是只能使用系統頭像，如下圖所示，用戶可以根據自己所設置的性別，頭像風格選擇心儀的頭像。Soul 不允許用戶上傳其他照片作為頭像，也是希望用戶能拋開顏值，找到真正的靈魂伴侶。這些頭像本身也體現了用戶個體的審美情趣、價值觀等。最近 Soul 新上線了「超萌捏臉功能」，下文會著重詳細分析，不過捏臉而成的頭像依然可以算是系統推薦頭像，只是把頭像拆解成了頭發、臉、眉毛、眼睛、鼻子、嘴巴、衣服配飾等元素，然后再由用戶自己排列組合。

3. 隨機選擇頭像

前文也提到了隨機頭像，即系統會在用戶注冊成功后為其隨機匹配頭像，避免單一默認頭像的沉悶，記憶中以前 GitHub 就是采用這種做法。另一種隨機頭像是指用戶主動選擇隨機頭像，獲得相應的驚喜，比如嗶哩嗶哩就采用了這種做法。不過實在難以琢磨出這種類似「變臉」的玩法背后的設計邏輯。

4. 使用歷史頭像

在用戶使用過一段產品之后，可能會積累大量的歷史頭像（主要是用戶自主上傳的，使用過的系統頭像不記錄在內）。QQ 就把用戶的這些頭像收集起來展示給用戶，以便用戶查看或重新選擇，雖然用戶重新使用的幾率并不大，但不失為一種增進用戶情感、提高用戶粘性的做法，畢竟這里面滿滿都是青春的回憶，很容易給用戶帶來觸動。

微信也有類似的做法，不過只能查看上一張頭像。微信的設計哲學是不去刻意討好用戶，所以這里更多的是防止用戶反悔，方便用戶在最近使用的兩張頭像之間切換對比。馬蜂窩的做法與 QQ 類似，不過增加了刪除歷史頭像的功能（當前頭像不可刪除）。聊天寶（原子彈短信）有很多錘子的設計基因，錘子的設計師們推崇工匠精神，愛為用戶創造小驚喜，所以聊天寶不能查看自己的歷史頭像，但卻能查看好友的歷史頭像。不妨推測下背后的設計動機：現代人分分鐘互相加個好友，但可能來不及備注，而人們對圖像的記憶更準確、持久，所以看到頭像可能就會很快地回憶起好友姓名、相識的場景等信息。

5. 文本頭像

文本頭像在商務類應用中比較常見，例如 OA。由于辦公社交的社交屬性并不是很強，更多在于及時通訊，所以圖片頭像并不是特別重要，并且文本頭像中的字號更大，更容易辨識。要注意文本顏色和背景顏色的對比度，另外同一個應用中，文本和背景可以多做幾個配色方案隨機展示，以豐富視覺效果。此外還要注意文本的取值顯示規則，下圖是釘釘的部分頁面截圖，可以從中推測：

• 漢字類：單個或兩個漢字展示全部漢字，三個及以上漢字僅展示后兩個漢字；
• 英文類：一個單詞時取前兩個字母，兩個及以上單詞取前兩個單詞的首字母；
• 數字類：單個或兩個數字展示全部數字，三個及以上數字僅展示后兩個數字。

6. 角色頭像/匿名頭像

相信很多人都玩過 QQ 的匿名聊天功能，然后就被管理員禁止了，它更像是一種娛樂性玩法。其實還有類似的做法，在游戲中較為常見，在角色確定前顯示的是用戶頭像，角色確定后就顯示角色頭像。比如斗地主，地主身份確定前顯示用戶本身頭像，確定后則顯示角色頭像，而且還會根據角色性別顯示相應頭像。

7. 動態視頻頭像

動態視頻頭像可以讓用戶跨越時間維度從多角度展示自己。依然以 QQ 為例，動態頭像分兩種，一種是 QQ 會員才可使用的動態頭像，由系統推薦，用戶自主選擇；另一種是讓用戶自己拍攝錄制。具體流程如下圖，用戶先錄制視頻，然后選擇一幀作為靜態頭像，以便能在不支持展示動態頭像的地方展示。這也是目前的一大趨勢，不過如果好友列表的頭像都在動也還挺嚇人的。

8. 輪播頭像

針對陌生人社交場景，如探探，頭像更顯得重要，左滑還是右滑就在剎那之間，點進去主頁也根本不會下滑屏幕細看具體的興趣、資料，所以就要盡量在首屏展示更多更大更清晰的照片，輪播圖就是一種很好的形式。探探最多可設置 6 張圖片或 6 段視頻作為輪播頭像。其實，輪播頭像類似 QQ 照片墻的概念，不過自我展示意味更濃。

采用類似輪播頭像做法的還有音遇 APP，雖說主張以歌會友，但誰都喜歡唱歌好聽的小哥哥小姐姐還有高顏值。如下圖，個人主頁背景圖即頭像輪播。還有一些社交軟件可以將個人系列頭像設為私密，然后定向開放展示給需要的人。

9. 捏臉頭像

ZEPETO（中文名：崽崽）的火爆刮起了一陣虛擬形象社交的風潮，雖然是三維形象的玩法，但和之前紅極一時的臉萌并沒有本質的區別，要想實現從工具到社交的轉變，獲取關系鏈才是王道。多閃和 Soul 動作也很快，已經上線了捏臉功能，雖然目前是二維的，但相信巨頭們早已開始布局三維虛擬形象社交了。目前 ZEPETO 可編輯臉型，甚至可以進行簡單的化妝。服裝配飾則包括衣服、頭飾、首飾等，且支持按上架時間、價格等排序。室內裝飾則涵蓋了地板、家具、擺件、樂器等等。手勢主要是一些肢體動作庫，動作效果十分連貫?？梢哉f ZEPETO 集成了用戶對場景搭建+服飾搭配+顏值定義+炫酷動作的完美幻想，同時也擴充了人們對虛擬形象社交乃至電商新形態的想象空間。

目前市面上，尤其是游戲領域，不管畫風是 Q萌，還是 3D，時尚亦或仙俠，人物建模及捏臉系統已經比較完善，且得到廣泛應用。這里推薦一款叫做 IMVU 的 APP，它的人物畫風、服飾質感比 ZEPETO 更加寫實，更偏成人化，視角轉換也更加流暢，支持俯視/仰視。不過，臉萌早已涼涼，美圖的圖片社交之路似乎完全和 ins 對不上標，所以 3D 虛擬形象社交的未來之路也未可知。

10. 頭像掛件

頭像掛件、等級徽章、認證標志也屬于頭像的一部分，不過需要結合付費會員、用戶成長體系、認證規則進行討論才有意義。

11. 使用第三方頭像

使用第三方社交賬號快速登錄已經成為登錄注冊頁面的標配，畢竟一個授權就解決了賬號注冊、頭像及昵稱設置等問題。這兩天，吃瓜群眾們又一次見證了「頭騰大戰」。多閃使用了用戶的微信頭像和昵稱，可是并沒有得到相應授權，因為之前的授權是給抖音的，當然現在也停止授權了。不管是不是抖音碰瓷，但微信/QQ 賬戶上的頭像、昵稱的權益歸屬確實是個問題。個人上傳的頭像還好說，如果用的是系統推薦頭像，這些圖片的版權是不是歸屬騰訊呢？用戶使用第三方登錄后，最好還是引導用戶盡快綁定手機并設置完善其他資料。

12. 群組頭像

這里以 QQ、微信和釘釘為例進行分析。微信群聊頭像由群成員頭像組合生成，在方框內嵌套群成員的方形頭像，根據群成員的數量多少（1-9）進行相應排布，多于 9 人時顯示前 9 人頭像。另外，微信暫不支持設置圖片為群頭像。釘釘群與微信類似，不過外觀上是圓形外框嵌套群成員的方形頭像，顯示數量也有所限制（最多顯示前4個），但可以選擇其他圖片作為群組頭像。QQ 群比較復雜些，可分為討論組和群，雖然現在統稱「群聊」，根據創建方式區分如下：選人創建（對應的是討論組）和按分類創建（對應的是群）。討論組也是不能設置頭像的，是在圓形內嵌套群成員的圓形頭像，最多可顯示前 5 個成員的頭像。而群頭像由管理員設置，且可以查看歷史頭像、使用系統推薦頭像等。另外還有 TIM，定位是對抗釘釘的辦公軟件，比 QQ 更輕量化，視覺風格也大不相同， TIM 中討論組頭像的展示就采用了類似釘釘的做法──圓形外邊框+方形頭像。

延伸一下，有人說微信重新定義了群的設計形態，更貼近用戶自然使用方式：無需群ID，無需刻意創建群，隨時拉人開聊，無需命名，默認不保存到通訊錄，搜索群時可通過直接搜人實現等。

結語

本文列舉分析了頭像設置的相關設計思路和案例，對社交產品的頭像設計大有裨益。在設計時，尋求相關設計參考是獲取靈感和解決方案的有效方法，認真發現生活中的好設計，及時積累并總結，才能在關鍵時刻有高質量的輸出。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

△ 文中配圖均來自美團官方和產品截圖，僅作為設計交流使用

這是在設計群看見的一個啟動頁視頻，第一感覺就是品牌色由「青綠色」變成了「黃色」，采用 C4D 渲染出各種使用場景和產品的各種服務品類，表明產品內部依然囊括了吃喝玩樂等一系列服務。風格比較年輕化，第一感覺還是蠻不錯的，所以我立馬去 App Store 升級了產品，發現 APP 啟動圖標也變了。

△ APP圖標目前是第二個，猜測是想給用戶一個過渡期

為什么美團突然要進行品牌升級？

官方給的說法是：為了「將所有線上線下曝光進行視覺化統一，流量到品牌的一體化」。同時希望以統一品牌色為起點，未來實現從線上到線下，從流量到品牌的四者一體。

確實是這樣，就是為了品牌的統一，這就是這次升級的核心意義。這是典型的由公司經營戰略為導向而進行的一次產品升級，這樣做也是為了搶占用戶心智，為了以后讓人一看到黃色，就只會想到美團，而不是其他品牌，畢竟現在的產品太多元化了，每家大廠都應該有自己的一個獨有的品牌色，這樣品牌就不會過于分散。比如微信的綠色、淘寶的橘黃色、天貓的紅色……如何讓用戶第一時間就想到你的產品，對于競爭異常激烈的今天這真是太重要了。

說到用戶心智，前兩天看見一篇關于品牌的文章，里面提到：早期的品牌戰略是「定位理論」，它告訴了我們：品牌的競爭，是關于潛在用戶心智的競爭，如今這一理論也一樣適用。

為什么品牌升級，只升級品牌色？

因為品牌顏色的變化是用戶最直接、最容易感知出的變化，品牌色是最容易吸引用戶，占領用戶心智的方式。

為什么是黃色，而不是青綠色？

為什么是黃色，而不是將所有色系都變為青綠色？

我們都知道，美團升級前是「青綠色」、美團外賣是「黃色」、大眾點評是「橘黃色」，是各自不同的色系。

美團的四大業務支柱是：外賣、到店、酒店&旅游、出行。其中外賣的流量最大，每天外賣的訂單有數百萬計，這是一個巨大的流量，所以變身外賣「黃」也是為了流量和品牌更好地綁定。并且大街上奔忙的穿黃色衣服的外賣小哥，你一眼就知道是美團外賣，這些都是無形中的廣告，也早已扎根于你的心智之中。相信很多人心中的美團 = 美團外賣，所以變成「黃色」是最合適的。

但是「美團黃」和美團外賣的「黃色」還有所區別，只能算是一個色系，美團外賣的黃色更顯年輕一點。而「美團黃」官方的解釋是：黃色代表著熱情、溫暖，象征著美團始終堅守「幫大家吃得更好，生活更好」的使命，致力于為用戶提供更優質、有溫度的一站式生活服務，幫助人們向美好生活靠近。

下面再來對比一下產品頁面 UI 的變化：

△ 升級前主頁面UI

△ 升級后主頁面UI

單從頁面對比來看，整體布局結構沒有什么變化，不出所料，主要的區別就是將新的品牌色「美團黃」進行了視覺上的強化。

這種大塊的品牌色比較突出的設計似乎和當下流行的簡潔優雅的設計風格背道而馳，似乎只有在電商產品中比較常見，但我認為，這樣的設計應該只是暫時的，相信在經過一段時間占據了用戶心智之后，美團勢必會順應當下的流行趨勢，在此期待一下。

去年被收購的摩拜一直虧損嚴重，繼改名為「美團單車」之后，掃碼騎車入口也整合進了美團 APP，如今為了讓線下場景都統一成一個色系，單車也要變成黃色了：

對此，網上有人喊話美團：順便把小黃車也收購了吧，畢竟黃色的單車給我們的第一印象就是 OFO，這樣線下黃色的單車就全都是你家的了，我們的押金也就有著落了……

另外，還有一些其他線下場景品牌色運用：

這次美團的升級，不管你喜歡與否，它已經發生，就像年前的微信升級一樣。一開始勢必會有很多人不習慣，這其實也是受用戶心智的影響，我們都會帶有一種現狀偏見來看待事物的新舊變化，這是很正常的心理狀態，但是過了一段時間以后，都會淡忘，直到習慣，都逃不過「真香」理論。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

2012年，Random International 的作品《雨屋》正式開啟了大眾對沉浸式體驗的認識，近年隨著 teamLab、Punchdrunk 等互動體驗展演的火爆，沉浸式新媒體設計不僅成為了炙手可熱的包裝概念，同時也透露出人們對于新型互動的好奇心與強需求。提起新媒體作品，我們通常會自動聯想到黑科技和腦洞，卻容易忽視這些作品除了具有前衛的藝術性表征，同時也暗含著嚴謹而延展的設計內核。

2019 年初夏，Mindpark 邀請了兩位數字媒體界的先鋒代表：Moment Factory與Studio Swine，和我們共同探討了沉浸式設計在商業性實踐與實驗性探索上的思路與價值。

透過數字篝火，人們重聚在一起

總部位于蒙特利爾的 Moment Factory 是一家專業打造沉浸式互動體驗設計的多媒體公司，以跨界和合作著稱的他們擁有一個超 350 人的龐大團隊。自千禧年成立以來，MF 已經成功打造了近 400 個場景設計商業項目，客戶包括微軟、索尼、NFL、麥當娜等，形式從立體光雕、數據互動到空間展覽、演唱會工程都樣樣精通，幾乎每個作品在面世時都顛覆了人們對驚艷的定義。

△ Demo Reel ©?Moment Factory

Moment Factory 的業務主要分為三大模塊：內容、互動與場景。植根于公眾場域創作的他們，善于根據場地的特點策劃和開發因地制宜的故事內容，繼而在聲光電的效果設計上加強環境與人之間的聯結，最后兩者結合形成互動閉環以構造出全局的沉浸式體驗。

△ ©?Moment Factory

Moment Factory 的工作流也基于這三大模塊多線程并行。與傳統行業不同的是，客戶對于 MF 而言并不是甲方爸爸，而是項目的共創者。他們會邀請客戶參與并確認每一個設計環節，一來可以增加客戶對項目的認知與信任度，二是考慮到多媒體物料制作成本較高，也預防階段性推翻對項目進程造成影響。

△ ©?Moment Factory

因地制宜的創造性內容

「Aura」是 Moment Factory 耗時超過一年，動用超過 100 人團隊制作的夢幻級沉浸式光雕作品。它集合了極其的視效投影技術及獨立打造的交響樂聲效，為蒙特利爾圣母大教堂打造了 40 分鐘震撼而靈動的超感官體驗。

△ AURA ©?Moment Factory

基于天主教堂自身「誕生-受難-升天-審判」的故事脈絡，AURA 的設計概念以 the Path of Light（光明之路）為主線，并根據建筑動線分為 the Birth of Light（光的誕生）， the Obstacles（苦路），the Open Sky（升天）三個章節。

△ ©?Moment Factory

在確定故事線與情緒板同時，考慮到教堂內部結構的復雜性及壁畫的還原準確性，團隊使用 3D 掃描重塑建筑模型，并進行了大量的動效推演及真實光影測試，最終利用自研的工業投影體系，讓建筑實體與投影內容的結合達到型與神的高度統一。

△ Behind the Scenes ©?Moment Factory

在細節的雕刻上，作品對主殿圣像的層級結構進行分解，營造出空間錯位的效果。另外也對苦路長廊的畫像進行精準投影，以光的擴散作為線索，一步一步引導觀眾的視線，展開故事敘述。

△ Behind the Scenes©?Moment Factory

無論是故事設定還是效果設計，Aura 都根據教堂題材順勢而為，在不破壞建筑原有氣質的前提下，放大環境硬件中的可用元素，從而達到「概念-動線-效果」的全方位合一。視覺互動的起承轉合不但將觀眾的沉浸式體驗最大化，同時也升華了圣母大教堂的神性與歷史精神。

環境與人的聯結

LAX 項目是 Moment Factory 在 2013 年為洛杉磯機場打造，以時間旅行為主題的商業項目。它既是全美最大的機場多媒體環境設計項目，也是品牌體驗拓展的空間實驗。

雖然洛杉磯機場整體以「時間旅行」作為品牌主題，但出發者和到達者的動線終歸不同：除了機場主體以外，旅客的體驗還涉及到另外兩個環境——旅行目的地和洛杉磯。因此，本項目根據不同的觸點（登機口與到達大廳）針對性地設計了不同互動內容，讓出發者與到達者都能找到與環境的聯結和延伸，使整個機場體驗形成通路。

Moment Factory 為登機口都設計了實時更新的互動墻，不但能捕捉行人的動態并融入畫面，更能實時切換目的地的本土特色內容作為動畫元素，使準備出發的游客身未動而心先遠。

△ THE PORTALS ©?Moment Factory

與登機口不同的是，到達大廳的巨幕內容則根據機場的建筑結構設計，以跳水、跳躍等蒙太奇片段營造出洛杉磯愜意、清爽、驚喜的城市品牌形象；系列影片也同時在長廊和行李大廳中展映，以保持品牌語意的一致性與連續性。

△ WELCOME WALL©?Moment Factory

在機場中央，MF 團隊還打造了一個呼應主題的重點裝置——時間鐘樓。除了播放實時更新的故事短片外，設計師考慮到屏幕過于虛擬和冷感，故以機械咕咕鐘為靈感，讓鐘樓和環繞屏幕在準點切換真人報時舞蹈，既達到提醒旅客時間的作用，也讓他們在候機的空隙獲得環抱式的娛樂化體驗。

△ TIME TOWER ©?Moment Factory

從手稿到成型，LAX 項目歷時 16 個月，在三個大洲拍攝了超過 4 小時的視頻內容。而且因為機場常年不能關閉，也極大增加了項目的施工與調試難度。

△ ©?Moment Factory

《通用設計法則》中曾提到，「沉浸」即是讓人專注于當前環境，并在設計者提供的目標情境中進行互動而獲得愉悅，從而忘記真實環境的存在。Moment Factory 十分善于提取及串聯實體環境與觀眾之間的觸點，利用不同的互動技術對每一個觸點進行感官的復合強化，并以完整的敘事結構對品牌進行包裝，才屢屢在 Lumina、Kontinuum 等系列作品中打造出連貫又有趣的體驗心流。

對互聯網產品設計而言，我們能調用的觸點也許僅有區區一屏，但用戶在獲取虛擬體驗時的沉浸式感知卻和實境式體驗是相似的，因此設計師也可以參考以下幾點：

• 利用五感塑造場景：不僅從視覺層雕琢，更要調動觸覺（設備震動、阻尼感）、聽覺（聲效、音樂、聲場）等感官以模擬真實世界中的物理反應，打破虛擬環境和實境的時差和次元壁。
• 減少環境干擾項：收起不必要操作，最大化界面視野，讓用戶盡可能全程聚焦在目標場景。
• 強化敘事性引導：利用開屏動畫、轉場動效、角色故事等元素增加場景代入感并進行自然過渡。
• 即時性反饋：給予用戶簡單而反饋感強的任務，以延續他們對互動的把控感和積極性，從而增加用戶在環境中逗留的時間和意愿。

We do it in the public. We bring people together.

過去，由于娛樂產品的復制成本較高，人們大都以群體形式到電影院或劇院里進行活動，因此促進了社交互動與環境共融。但隨著媒介的升級，娛樂不僅從大眾走向個人，同時也將個人和群體進行隔離，使個人和社群、環境之間的互通性越來越弱。Moment Factory 堅持在公共場域中探索新型的體驗形式，正是因為他們堅信娛樂活動雖然可以由個人進行，但沉浸式的情感體驗仍舊需要透過真實環境下的社交互動來完成。利用數字篝火為體驗設計融合升溫，才能讓人們真正地共聚與共享真實的情感和生活。

用轉瞬即逝創造世界

如果說 Moment Factory 利用新媒體在環境創意、娛樂性與商業價值之中找到了發展的平衡，Studio Swine 則是利用新媒體設計的實驗性為人們開辟了觀察世界的全新角度。

Studio Swine 中的「SWINE」全稱是 Super Wide Interdisciplinary New Explorers，意味著無限跨界與探索主義。它由新派英國藝術家 Alexander Groves 及日本建筑師 Azusa Murakami 于 2011年創立，作品領域涵蓋思辨設計、裝置藝術、電影、雕塑等。他們的創作以獨特的世界觀、空間感及美學體系征服了世界各大頂尖藝術展覽，倫敦V&A博物館、巴黎蓬皮杜藝術中心與威尼斯雙年展等都曾邀請他們展出。

△ ©?Studio Swine

在西方，越來越多像 Studio Swine 這種設計師團隊選擇以跨界的形式進行研究及創作，他們也不再拘泥于設計與藝術之間的所謂界限，逐漸衍生出了新的設計流派與理論。傳統行業的設計焦點往往會落在商業策略與 Design Thinking 上，而新形態的設計則更多地向批判性與未來性上傾斜。

△ An Unresolved Mapping of Speculative Design ©?Elliott P Montgomery | EPMID.COM

2013 年前后，英國設計師 Anthony Dunne 和 Fiona Raby 提出了 Speculative Design（思辨性設計）來概括此類在藝術與設計之間的交疊學科。對比起傳統設計基于現有場景來解決現有問題，思辨性設計旨在擴充場景的可能性，以引導人們想象和思考未來社會生活、生產的狀態或矛盾。Speculative Design 以設計作為跨領域的思維實驗及方法，不僅突破了媒介、工藝的疆域，選題上也常常挑戰甚至跳脫社會倫理、文化定式、現世哲學的桎梏，而這種敢為人先的創作理念也是此類作品爭議性的源頭。

△ Redrawn from Speculative Design Practice ©? Ivica Mitrovi? | Speculative.hr

NEW SPRING

New Spring 是 Studio Swine 與 COS 合作的裝置互動項目，作品以意大利建筑的拱廊結構及櫻花樹在四季中的形態為意象設計，并將氣泡比喻花的綻放與凋亡，旨在討論時間與物質的瞬息性。在創作伊始，設計師提出了一個假設場景：在未來，物質將越來越多，而空間越來越少，植物與園林可能朝著機械化、人工化的方向發展，那么我們要怎么去模擬四季變化下生物從生到滅的過程呢？

△ COS x NEW SPRING ©?Studio Swine

為了全感官地營造未來園林的場景感與沉浸感，除了櫻花樹的意境外，Studio Swine 更與化學家合作，研制出帶有混合香味且不會立即爆破的氣泡，為互動者帶來意料之外的觸感體驗。在聽覺上，編曲家 Gavin Singleton 也特意為展覽場景打造了專屬的音樂EP。

△ ©?Studio Swine

2018年，Swine Swine 再度利用氣泡作為原型，以世界上最小且最古老的生物之一——藍細菌的光合供氧為主題，制作了高達 9 米的大型環境裝置 Infinity Blue 來模擬地球大氣層的歷史，禮贊藍細菌賜予了地球第一口呼吸。雕塑中內嵌 32 個旋渦氣孔不斷噴發出圈裝煙霧，用以比喻光合作用生產氧氣的過程。

△ Infinity Blue ©?Studio Swine

HAIR HIGHWAY

和場景設計不同，影片同樣也是另一種常見的沉浸式表現手法。近幾年越來越多的新媒體作品采用紀錄電影、開放式互動短劇、VR 短片等形式對作品進行呈現：一是影片能突破作品篇幅，更全貌地介紹項目背后的概念與調研故事；二來基于自媒體環境的蓬勃，作品能以較低的復制成本獲得更高的傳播度；三則是影片天然的敘事結構能快速激活觀眾的代入感。

Hair Highway（絲綢之路）是以紀錄片與家具設計復合呈現的極富爭議性的新媒體實驗。Studio Swine 意識到在自然資源逐漸減少的情況下，人類毛發作為一種代謝物質，也許可以成為新型的可再生資源?；谶@個洞察，他們嘗試以頭發作為原料去創造一種近似木料的全新媒材，以挑戰現有的美學標準和詮釋物質的可能性。

△ Hair Highway ©?Studio Swine

亞洲人頭發的生長速度是熱帶硬木的 16 倍，而中國作為熱帶硬木最大的進口國也是人類毛發最大的出口國，因此也被他們選為了項目的起源地。兩人在創作過程中不僅探訪了 9 個位于山東的假發工廠，更拍攝大量假發制作的工序與買賣流程作為紀錄片的生態調研資料。

△ ©?Studio Swine

Hair Highway 以絲綢為概念，用樹脂封印毛發制作出一種模擬琥珀、玳瑁紋理的板材，并糅合清代及上海 20 年代裝飾主義的紋理設計與西方抽象幾何的輪廓特征，創造出了一套極具古典神韻的系列家飾。

△ ©?Studio Swine

不破不立，Studio Swine 的作品始終緊扣著三個思辨性的特征：探索時間性、想象未來社會的形態、創造新型的物質組合，以新銳的角度挑動人們的思維的底線，而量產和商業化卻從不是他們眼中的第一要義?；蛟S怪誕，或許不安，但設計在他們的哲學里只是一條探索世界的未竟之路，而不是一個實用主義誕下的結果。

新媒體的特點之一，就是他基于時間的藝術形式。新媒體的表現很多都是時間累積的縮影，每一幀，每一個圖層，每一個數據庫的建立，以及觀眾在與之互動的時候也同時在進行一個時間的旅行。我希望互動是更加內隱和內省的，而不是僅僅基于科技的娛樂程度。——著名新媒體策展人 Richard Castelli

從對娛樂效果喜聞樂見，對創作理念心悅誠服，再到如今被作品激活出新的靈感、批判或討論，受眾與作品之間的互動升維或許才是創作者最樂意觀望的局面。沉浸式新媒體設計為人們提供了孵化情感和思想的超感官空間，而互動場域中的人才是成就作品的最終環節。

真正的沉浸是思維的沉浸，環境的營造只是想象力的引路人。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

這篇文章我們來談談移動端和PC端交互設計上的區別。

經常遇到一些設計師，他們之前負責的都是pc端產品，突然改做移動端，會不自覺的把pc端的一些設計理念“移植”到移動端，出現了水土不服。有經驗的設計師一看你設計的移動端頁面就知道你之前做的都是pc端，這是一件非常尷尬的事情。就好像你說了一句“nice to meet you”，別人就知道你老家是哪里一樣。那么移動端和pc端交互設計上的區別究竟在哪呢？

大屏到小屏

開門見山，移動端和pc端最根本的區別就是屏幕的大小。屏幕的大小直接決定了界面信息量，pc端一個頁面可以展示完全的信息可能需要移動端好幾個頁面來承載。

可能有的設計師覺得，屏幕尺寸不一樣做自適應不就行了，移動端頁面做長一點，讓用戶滑動就可以了。這是一個非常簡單的處理方案，但是忽略了一個重要前提：用戶愿不愿意滑動？根據埋點數據顯示，多數移動端頁面超過一屏的內容的曝光與點擊量會急劇下滑，說明用戶很少主動滑動去查看一屏以外的內容。對于移動端產品來說，一些重要的內容必須保證用戶在一屏內可以看到。

1）信息架構重構

因此，如果你要為一個pc端網站做一個移動端app，首先要做的就是信息架構的重構。pc端有足夠的空間可以把所有的功能直接展示給用戶，而移動端只能展示一些主要的功能，一些次要的功能需要放在下一層級。

例如，appstore中用戶是可以評價這條評論對自己是否有幫助的。PC端的處理方式很簡單，直接展示給用戶。而移動端是需要用戶長按這條評論才可以彈出評價列表的，可能很多用戶今天看了這篇文章才發現原來還有這個功能。沒關系，之前雖然不知道，但是并沒有影響你正常使用啊。對次要功能進行適當的降低信息層級是移動端設計師必須要考慮的。

2）一個頁面，一個任務

對于上面信息架構重構的觀點可能會有人存在異議，對于一些表單類頁面來說，例如用戶要借錢、轉賬，有些信息是用戶必須要填的。在這些場景中，我們不擔心用戶不滑動，因為用戶不滑動就無法完成操作。那么在這種情況下，是否可以繼續延續pc端的布局樣式？

以上面的轉賬流程為例，pc端是直接在一個頁面展示，而移動端是分成了兩個頁面。為什么這樣？把備注/付款說明也放在第一個頁面不行嗎？

因為移動端用戶使用環境更加的復雜多變，更容易受到干擾，所以必須保證界面信息的簡單直觀。如果在一個頁面中展示過多的信息量，容易讓用戶混亂。這里所說信息量并不是指絕對信息量，更準確的說法應該是用戶主觀感受上的信息量。同樣的幾個輸入框，可能在pc端只占了頁面的1/4，而移動端占了一整個頁面，給用戶的感觀是完全不一樣的。頁面塞的滿滿當當，容易讓用戶焦慮。

一個頁面可以完成的任務現在要跳轉好幾個頁面，增加了操作步驟。用戶害怕“內容多”，難道不害怕“步驟多”嗎？不害怕，因為頁面內容量是用戶一眼就可以看出來的，用戶無法立刻感知這個任務有多少步驟。因為無知，所以無畏。等到用戶知道這個任務步驟數的時候，整個任務都已經完成了。

借唄的這次改版，用戶要借錢必須先輸入借款金額，其余的借款期限、還款方式和利息等信息才會展示給用戶。這些信息都是跟用戶借款金額相關的，用戶沒有輸入借款金額，這些信息展示給用戶意義也不大，不如隱藏，讓用戶的注意力聚焦于完成輸入借款金額。

沒有一個放之四海而皆準的設計原則，所有的設計理論都不能罔顧實際的應用場景而機械的套用。如果前后步驟關聯性比較強，我建議不要分頁展示。例如，目前很多的短信驗證碼都選擇把“輸入手機號”和“輸入短信驗證碼”放到兩個頁面，我個人對此持保留意見。設想一個場景，如果用戶遲遲沒有收到短信驗證碼，那么他需要確定是手機號輸錯了、網絡故障還是其他什么原因。用戶需要返回到上一個頁面查看，如果手機號和短信驗證碼放在同一個頁面就簡單多了。

3）突出重要信息

前面我們提到的主要是控制移動端頁面的信息量。頁面信息量少就可以了？當然不是，我們來看一下火車換乘的場景，如果你要從南京去新疆阿克蘇，沒有直達的車次，只能從西安換乘。我們來看看下面兩款產品的處理方式，左邊是12306，右邊是飛豬。12306還是一股pc端風格迎面撲來，問題出現在哪？12306跟飛豬展示信息量差不多，唯一的區別在于12306展示了兩趟車次各自的起止時間，而飛豬只告訴用戶整趟旅程的起止時間。

顯然問題不是出現在信息量上，而是對信息的展示形式上。用戶更關注的信息，應該讓用戶更容易發現。對于一趟車次來說，用戶更加關注出發/到達站、出發/到達時間和票價。對飛豬界面進行高斯模糊處理，發現用戶的視覺焦點正好落在這些重點信息上。

12306所有的信息都屬于同一層級，讓人抓不到主次。而且界面中出現了過多的配色，更增加用戶的信息獲取成本。

鼠標到手指

pc端用戶與界面進行交互靠的是鼠標，移動端用戶靠的是手指。鼠標的操作更加精準，因此移動端界面中元素的尺寸和間距比pc端的大。以下圖為例，左邊是pc端，右邊是移動端。移動端的輸入框沿用的還是pc端樣式，而且關于利率和手續費的詳情icon過小，用戶的手指點擊的時候容易誤操作。

給你的界面做減法

前面我們主要強調了移動端產品要盡量減少界面中信息量?？刹豢梢栽诓桓淖儺a品信息架構的前提下，通過交互設計上的改動來完成目標呢？我給大家介紹兩個方法：場景化和關聯化。

1）場景化

在一個頁面中，雖然內容很多，但是用戶真正感興趣并且會與之交互的內容很少。如果我們可以獲知用戶在特定的場景下對于某個內容訴求很高，那么我們突出展示；反之如果訴求很低的話，我們可以隱藏。

舉一個之前說過的例子，知乎中，用戶在搜索結果頁滑動大概3屏后，會出現“向知友提問”按鈕。因為用戶滑動了3屏，說明用戶可能對當前的搜索結果不滿意，這時引導用戶去提問，用戶的意愿更高。如果我們全程展示這個去提問按鈕，反而會減少用戶的實際瀏覽區域，造成干擾。

上面主要提到了，同一個流程，需要根據用戶不同的使用場景提供不同的功能。其實即使是同一個功能，我們也要根據用戶不同的使用場景選擇不同的展示形式。

還是知乎，為了方便用戶可以快速的查看下一個回答，給用戶提供了一個浮動按鈕。但是這個浮動按鈕，當用戶開始滑動頁面時候就會改變樣式。這個很容易理解，當用戶剛進入這個頁面，為了降低用戶的學習成本，我們需要直接告訴用戶這個按鈕是干什么的。當用戶開始滑動進入閱讀答案的狀態，縮小按鈕的形態避免對界面信息造成遮擋。

2）關聯化

我們需要梳理信息之間的關聯性，將相互關聯的信息整合在一起，進而減少頁面中信息量。支付寶賬單的月份篩選功能，對入口進行了修改。之前用戶需要點擊日歷圖標，現在用戶直接點擊月份就可以了。用戶要篩選的就是月份，那么直接把月份作為入口更加合適。

總結

以上就是我對移動端和pc端交互設計上區別的簡單分析和總結，如果你有不同的建議和看法歡迎留言討論。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

來源：UI中國

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

項目概述

QQ 20周年，是互聯網產品長青的一個傳說，就在 20 周年的時間節點，QQ 向用戶提供一份關于他自己的、真誠熱切的 QQ 數據總結。通過數字，匯集出每個人自己的 QQ 時光歷程，從而牽引出每個人對于成長、青春、溝通、時代流動的感知與回憶，引發 2019 年一場集體的情感共鳴。

△ QQ 20年來的一路變遷

項目流程

項目歷時兩個月，從項目初期，視覺和產品密集溝通，了解需求，進行頭腦風暴，輸出多個視覺方案縱向對比，最后確定視覺風格，分配視覺工作（插畫，動畫，3D）。項目后期，包括開發還原，數據調配等眾多環節，環環相扣，缺一不可，一路過關斬將，整個 H5 需要不同崗位的高度配合和各專業的高度默契。

△ H5的項目流程圖

項目難點

1. 異地合作

本次 H5 聯動了動效，3D，插畫設計師的共同合作，由于支持 3D 的設計師在韓辦公，所以大部分都是在線上全英溝通，包括前期的項目進度同步，還有后期的模型調整等環節都能及時反饋，快速反應，最后如期打磨出五款 spaceQQ。算是一次順利的異地合作。

△ 五款3D spaceQQ最終效果

2. 3D spaceQQ視覺還原

3D 鵝從設計軟件轉化為 H5 展示過程中，存在模型文件過大、材質缺失等問題，直接影響用戶體驗。在開發的過程中同學通過模型減面、重新選擇材質，還有模型拆分等解決方法，在視覺觀感和性能中建立了平衡的杠桿，最終實現了 15 個 SPACE QQ 的視覺還原。

△ 五款3D spaceQQ最終視覺還原效果

3. 視覺工作的同步進行

由于項目時間比較緊迫，而且 H5 加入了 3D 模型，還有需要大量的動效，所以需要在同一時間線上，同步進行，視覺稿輸出，動畫制作和 3D 模型打磨?？简炘O計師的溝通和執行能力。與此同時，需要隨時和開發同步動畫 demo 以確保動畫可實現。和產品密集溝通，及時根據文案調整畫面。

設計理念

因為 QQ 是陪伴了大多數用戶的一個產品，見證了整個互聯網社交的演變過程，容易引起用戶的情感共鳴。設計的初期，圍繞「個人軌跡」的主題發散了不同方向的視覺概念，在引起客戶共鳴感的復古元素和傳遞不斷「探索」未來的概念間尋找平衡點。最后沿用了 20 周年的太空概念貼合「探索」的主題，結合有年代特征的代表性視覺符號來引起「個人軌跡」的這一概念的用戶情感共鳴。另外，H5 運用了 3D 打造了 15 只太空鵝，打造「個人軌跡」的專屬感，既聯動用戶溫暖的回憶之余，也增添了一些小驚喜。

概念設計

1. H5整體視覺風格

QQ，是陪伴了大多數人成長的一個互聯網產品，其本身帶有很多高辨識度的視覺元素，例如對話框，提醒上線的音效等。因為 H5 本身是一個大數據總結，專屬感非常強的一個產物，所以希望是喚醒用戶一些封塵已久的記憶，就像打開時間膠囊般的期待和感動。同時也象征著 QQ 一直陪伴在身邊，從而引起用戶的共鳴。

設計方面，除了通過一些標志性的視覺元素喚醒用戶的回憶之外，也加入 QQ 20周年的太空「探索」主題的元素，響應 20 周年的主題之余，也寓意 QQ 不斷地對外探索，從多個維度來看世界，尋找有趣的內容。

對話框，是承載數據的視覺符號，也是貫穿整個 H5 的重要視覺符號之一。寓意著 QQ 一直致力于「溝通」，而且不同時代的 QQ 對話框都各有特點，也是見證 QQ 時代變遷的重要元素，所以提取了三個階段代表性的對話框樣式來承載數據，并且加入有時代特征的視覺元素（如bb機，像素化的小箭頭等）作為輔助，增加 H5 的氛圍感，也算是視覺上的「小彩蛋」。

△ QQ原始對話框

H5 加入一些趣味感的元素，如笑臉，愛心等元素，背景輔以流動的彩色不規則圖案，來增加對話框的玩味。也寓意 QQ 20年來給用戶帶來源源不斷的樂趣，留下了不可取代的時代印記。

△ 重繪對話框

H5 中也加入了很多好玩的元素，不同時代所用的移動設備，融合貼近太空「探索」主題的背景；利用帶手套的手和不同的元素進行互動；增加重繪經典頭像的互動動畫，加入 QQ 空間的植物等懷舊元素，增加 H5 的可玩性和驚喜感。

△ 經典頭像的重繪

△ 經典頭像穿插在H5中的小彩蛋

△ 帶手套的手和有時代標簽的元素互動

動畫設計

1. 視覺動態化方案

在動畫制作前期會出一份詳細的動態化分頁策劃，以及一份盡可能表達完整的動畫 demo，能便于設計與開發能準確的估算出制作周期。在開發完成預研測試后，基于動畫 demo 共同制定一個大致的動態化方案──對話框等大面積使用代碼實現，其他裝飾性小元素全部使用序列幀。在觀眾每滑一頁即可觸發當前頁的動畫，且能保證大體動畫的流暢度。

2. 動畫制作

為了盡可能減少 H5 的運算體積，又保證畫面動態的流暢程度，導出的序列必須滿足以下所有條件：

• 全部元素可循環
• 盡可能少的幀數
• 可重復使用的素材

△ 設計了4個不同的色塊流動loop，方便開發安插在每頁合適的位置

3. 導出與同步

在配合開發導出的階段，為了能明確序列的標記，所有序列文件命名為 xx-in/xx-loop/xx-out。使用同步工具以實現 AE 動畫序列導出和開發提取素材能同步進行，并保持實時更新和迭代。

△ 第6頁動畫導出序列

太空QQ形象設定

創建了四款全新的 spaceQQ，根據用戶的 QQ 年齡而設計。根據用戶的 QQ 年齡，分了四個款式的鵝：奢華，智能，閃亮和神秘四個概念，一個遞進的尊貴程度，刺激用戶分享欲。包括基礎款的 QQ 在內，共創造了 5 個類型的 spaceQQ。每個設計都基于基本 spaceQQ 的形式，但是套裝的顏色和細節根據各自的概念各有特色。

△ spaceQQ總覽圖

配色方案

用戶可以根據自己的喜好更改這 5 款 spaceQQ 的裝扮顏色。

關于運營

1. 專屬感

整個 H5 始終緊扣 QQ 20周年的太空「探索」主題，整個 H5，除了用數據喚醒用戶和 QQ 多年的點點滴滴之外，5 個 spaceQQ 概念設定，既能增加用戶的新鮮感，又能刺激用戶的分享欲，C4D 建立的 3D 形象豐富了整個 H5 的視覺層次，深化了 QQ 品牌的影響力，寓意鵝廠一直與時俱進，緊貼潮流。

2. 情緒調動

對于當下的運營活動來說，趣味性是引爆轉發量的重要元素，H5 結合 QQ 用戶創作的背景音樂和能夠調動用戶情感的設計語言來釋放用戶的情緒，比如驚喜感（用戶結合 QQ 的標志性音效創作的背景音樂），榮譽感（不同 Q 齡獲取相應的 spaceQQ）等，讓用戶產生持續的驚喜感，在懷舊和新鮮感中得到滿足，提升用戶活躍性。

總結

QQ 20周年 H5 設計，嘗試結合了 3D，動畫，插畫等設計形態，為每一位用戶打造專屬的「個人軌跡」，通過數字，拼湊出和 QQ 的過往朝夕，引起用戶共鳴。鵝廠不斷創新探索的同時，也為用戶溫存屬于用戶自己的專屬回憶，深化 QQ 的品牌價值。

福利

考慮到部分同學想更仔細地查看、保存或收藏高清大圖的需求，我們設置了關鍵詞，微信公眾號后臺以「spaceQQ+序號」的方式回復，例如「spaceQQ1」，即可逐一獲取對應的高清頭像和壁紙。

掃碼領取專屬「個人軌跡」：

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

開發：這里已經完全對齊了。

視覺：看起來還沒完全對齊，我的圖也沒有切錯吧？

開發：字體大小和間距都是按照視覺稿來的。

視覺：這里間距偏差這么大，為什么不按照視覺稿？

開發：視覺樣式好多，每個設計師的間距好像都不一樣。

視覺：……

我們經常會聽到身邊的設計師與開發小哥的一些對話，關于對齊、大小、間距等設計還原問題經常會討論很久，有時甚至會覺得，幾個像素的間距是不是沒有必要這么糾結。以我較常接觸的云產品官網為例，云產品官網體量龐大，單個頁面或信息模塊的樣式復用可高達上百個子產品頁面，此時第一個模塊設計的規范性、擴展性、復用性則變得尤為重要，所以為了讓設計方案更加合理，為了讓合作更加，這里總結一些設計經驗，與大家一起探討。

本文將從以下三個方面，思考作為視覺設計師，應當如何讓設計更加合理有效：

• 視覺處理（設計）
• 設計邏輯（方法）
• 交付走查（合作）

視覺處理

1. 字體結構

網頁設計中，我們總避免不了與字體打交道，字體也是我們在設計中經常容易忽視的部分，而經常出錯的原因往往是因為我們對文字的理解不夠清晰。相比西文字體，中文字體結構復雜，字庫龐大，網頁的渲染效果會比西文字體艱難很多。

但無論是中文還是西文，我們經常需要用到的無非是字體大小、字重、字色，還有就是經常被我們忽視的行高和行寬，我們從西文字體提取三個最主要的因素，即字高、行高、行寬?；谖魑淖煮w的結構轉換為中文，我們可以理解為，字高指的就是我們肉眼所能看到的字體的實際高度，而行高指的是字高+上邊距＋下邊距，反過來說，行高減去字高除以 2 就能得到我們的上下邊距，行寬指的就是整個文本的寬度。

舉一個圖文模塊的例子，圖（1）中我們肉眼所看到間距，在我們做標注時，看到的其實是圖（2）中的三個色塊，我們實際給到開發的標注，是色塊的尺寸和色塊之間的間距，以及詳細的文本屬性。

2. 文字行寬

關于行寬，以設計 banner 的標題及描述文字為例，定義行寬是為了讓文本在極限寬度的時候進行換行，再固定好配圖的尺寸，從而得到文本與配圖之間的間距，定義行寬、行數、字數，能夠更好地為運營人員規范輸出的文案，避免因字數過多或過少所造成的視覺不平衡。

當我們處理無序列表時，四個短句文本，長短不一，同樣我們需要限制一行文本寬度，定義一行能承載的最多字數，以及跟產品確認可能出現的最多字數的情況，確認模塊設計的可行性，保證后續運營人員在替換文案的時候不會出錯。

以上兩個例子都是我們設計文字經常出錯的地方，正確的定義規范，無論是交付開發或者其他下游，都能保證模塊設計的可擴展性及規范化，保證最終上線質量。

3. 圖標視錯覺

關于圖標，這里提到一個幾何學錯覺的概念，視覺上的大小、長度、面積、方向、角度等幾何構成，和實際上測得的數字有明顯差別的錯覺，稱為幾何學錯覺。人眼所接受的視覺平衡，往往不是設計軟件上精準的對齊，我們總是會通過調整間距、大小或角度來補齊一些負空間，讓畫面保持視覺平衡。

以客戶案例的卡片樣式為例，客戶案例在 to B 產品中是必不可少的模塊，我們的客戶 logo 有的圓形，有的長方形，有的純文字，尺寸差距比較懸殊，這種情況下我們需要給他限制一個高度，在這個高度以內，再根據 logo 本身的體量來調整圖形的大小，處理好 logo 的視覺平衡，最后紅色區域是 logo 的實際尺寸，藍色區域則是我們實際給到開發的尺寸，從開發的角度來看其實就是占位符，而規范的作圖則是把占位符的透明度調整為 0，以占位符為實際有效作圖區。

UI 設計中通常以「向右箭頭」來表示當前鏈接可跳轉，使用箭頭作圖時，當我們把箭頭和文字右對齊，箭頭其實會更加的往外突出，這時候我們會人為的往里邊推 1 至 2 像素，最后實際給到開發的也應該是紅框的尺寸，也就是 16×16 的占位圖尺寸。

「按鈕」也是 UI 設計中常用的組件，當我們在按鈕里使用圖標加文字時，由于文字的體量更大，整體重心會往右偏，所以我們通常會認為讓圖標和文字整體往左偏移，使整體的視覺更加平衡，實際給到開發的，也是兩個不同等的邊距。

設計邏輯

1. 理性的設計

在 iOS 和 Android 的設計規范中，都有提到過使用「8點柵格」的概念，即建議使用 8×8 的網格系統進行設計，我們都知道 0.5px 的渲染在屏幕上會變模糊，之所以使用 8 的倍數是因為市場上主流的屏幕都能被 8 整除，使用 8 點柵格能夠的讓我們所設計的內容樣式在屏幕上保持高清顯示，而在日常的網頁設計中，我其實更加傾向使用 4 點柵格系統。

我們以下圖 4 組數列為例，大家可能都曾使用過上面三組藍色數列中的數值應用到設計中，或以 5 為倍數，或以 10 為倍數、或以偶數為設計邏輯，而實際上以 5 為倍數則會包含奇數，奇數會導致控件文字對不齊，當 5 的倍數和偶數同時使用時，則會出現類似 14、15、16 這種相差為 1 的相鄰數，這樣會導致我們的尺寸規范不好定義規則，難以形成邏輯，而使用 4 的倍數，他們的公差為 4，不會出現奇數，也不會出現相鄰數。

我們再看看一些通用的尺寸定義，例如常見的 icon 設計尺寸都是以 4 為倍數。

常見的網頁柵格及其所均分的卡片和間距，也都是 4 的倍數，如果我們的控件尺寸，圖標尺寸和間距都使用 4 的倍數來定義，那所有的信息模塊自然都能更好的相互適應，層層遞進的邏輯關系也會更加明顯。

我們把 4 點柵格的設計邏輯套用到卡片設計上，第一眼我們可能比較難去評判兩者的好壞，但仔細看，我們就會發現第一個卡片的按鈕沒有水平對齊，相互之間的間距尺寸也是沒什么邏輯性。假如今天調整一個 8px 的間距，明天調一個 10px 的間距，設計師走查起來也很難發現有問題，對接的開發也難以有一個可以參考的規范標準。而相對的，以 4 為倍數，我們會發現所有的信息都會完美對齊，而且倍數為 4 的每個數值之間公差為 4，即使設計稿微調了 1px 我們都能很快發現，開發在還原設計稿時也會有一個衡量標準。

網格設計在報紙、雜志、海報等平面設計領域中也是十分常見的設計手法，通過建立網格，考究每一個信息模塊在頁面中的擺放位置，大小占比，顏色占比，從而使得頁面信息保持秩序、均衡。

使用 4 點柵格系統，通過理性、秩序、邏輯的設計方式賦予畫面秩序感以及閱讀體驗，而以 4 為倍數，每個數字之間都相差為 4，不會太大，也不會太小，同時保持著秩序，讓設計更加理性。對于團隊合作，設計師與開發也將更有默契，不必再為不清不楚的間距浪費時間。

交付走查

1. 有效切圖

關于切圖，切圖之前應跟開發確定好輸出的格式和尺寸，確定應該用 SVG，一倍圖或是兩倍圖。SVG 體量小渲染質量好，單色使用時還能替換顏色，PNG 則通常用在實景圖，一倍圖和二倍圖則根據實際需要進行輸出。

如果要做分層動畫，那我們就需要分層切圖，如果桌面端和手機端樣式差別較大，那我們需要和開發溝通好如何實現，是否需要特殊切圖，所有的特殊切圖和特殊樣式，我們都應該提前跟開發溝通好。

2. 交互細節

如果某個控件或信息模塊交互樣式較多，那我們可以有一個空白畫板來清晰地標注這些狀態和樣式，很多開發在還原過程中都是一手視覺稿一手交互稿，但視覺設計師作為展示產品最終形態的執行層，很多情況下，視覺階段依然會有很多需要跟交互和產品溝通修改的地方，所以為了避免遺漏修改點，視覺稿應該呈現最完整的設計細節，這樣也會很大程度上節省開發的時間，減少出錯的幾率。

當頁面內容有一定的更新頻率，我們則需要標明視覺樣式規范，以及后續的運營規則，完整的收尾，可以避免產品經常過來尋求上線素材和規范。有些需要隔三個月或半年才上線的需求，清晰的標注也能幫助我們快速回憶起需求背景，讓我們在日常工作中保持頭腦清晰，有條不紊，這其實也是在給我們自己節省時間。

3. 重構稿走查

走查還原的時候，在 Chrome 瀏覽器的空白處右鍵點擊檢查，找到里面的 Computed 窗口，我們可以找到具體的文字、間距、投影等屬性，有時候一些比較細微的調整，我們可以雙擊具體的數值進行調整，調整到自己滿意之后再把具體的數值給到開發，這樣就不用在我們搖擺不定的情況下，造成雙方的困擾。

最后，在預發布的時候，我們可以利用 SwitchHosts 的客戶端來配置開發環境進行體驗，保證最終上線的效果。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

重回高端專業領域的 Mac Pro 不僅僅是性能怪獸，在專業度、設計感甚至細節的模塊化的設計上，體現出了蘋果這一頂尖大廠應有的底蘊，說實話，考驗民間硬件評測玩家們的資金實力和評測能力的時候到了。在發布Mac Pro 這一系列產品的環節，空耳幾乎完全聽不懂說的是啥，不過可以全程感知到每一個單詞都是牛X的，蘋果官方頁面的介紹現在肯定是最有說服力的，因為最近的評測起碼是要等到今年年底。

屬于 iOS 13 的 Dark Mode 正正好好滿足了所有人的想象，但是和簡單直接的 Android Dark Mode 相比，又多出一絲優雅，非常蘋果。擁有 App Store 和一連串新功能的 watchOS 終于成為了一個更加獨立、功能強大的硬件設備了，而 tvOS …… 不是重點。

重點是，在 iOS 和 macOS 之間，硬生生多出了一個 iPadOS，這才是整個發布會上，最亮眼的星。

1、下沉：為更細分應用場景所設計的 iPadOS

屏幕尺寸介于 iPhone 和 Mac 之間的 iPad ，一直沿用著交互機制相對比較簡約的 iOS 。也正是因此，絕大多數的用戶的重度需求，被電腦尤其是Mac 所分走了，而高頻輕量的需求則被 iPhone 給分走了，iPad 系列產品在很多時候都是作為家庭娛樂設備而存在，你聽到更多關于它的功能應用場景，是看視頻追劇。

Apple Pencil 是這個系列的轉折點。書寫，創作，搭配鍵盤輸入，屏幕尺寸從9.7 一路上探到 12.9，iPad 開始在觸摸為王的時代，開始切入更多的使用場景。在學校里面越來越多的學生開始使用一臺iPad 來作為 All in one 學習/娛樂設備，藝術家和音樂者開始使用 iPad 替代手繪板和合成器，AR和娛樂的結合也越來越緊密，從創作到專業領域，iPad 成為了越來越多輕應用場景的核心。

吃灰的 iPad 擁有了更多的可能性，而 iOS 的功能限制反倒成為了 iPad 短板，這大概也是 iPadOS 在整個生態中獨立出來的最重要原因之一吧。

使用單一屏幕作為輸入核心，圍繞觸摸來交互，以原有 iOS 作為開發核心，深入到更多的細分應用場景，連通 macOS 和 iOS ，iPadOS 的定位看似曖昧，實則在這個多元和高度垂直的時代，幫蘋果趟出了第三條路。

2、分屏：向著桌面端進發的多任務交互

iPadOS 的新布局看起來終于不那么 iPhone了，原有最左一屏的小組件匯集到主屏幕之后，看起來越來越有桌面的意思的。

……專為多點觸摸的顯示屏而設計，通過直觀的手勢實現多任務……它現在被稱為iPadOS。

這是蘋果給 iPadOS 所寫的出道宣言。

比起 iOS 12 時代更強的分屏模式，發布會現場演示的時候，展示了使用托拽在多個應用之間快托拽內容和元素的操作，多屏互通效率極高。

而多任務不僅僅體現在多個應用之間的互動，同一個應用同樣可以多屏存在——也就是我們常說的多任務。比如打開兩個「提醒事項」應用，在兩個筆記之間，來回編輯內容。點擊Dock 中的特定應用圖標，你就能看到它到底開了多少個頁面。

仔細想想，這是不是和桌面端的系統的邏輯越來越接近了？

3、編輯：無需鍵鼠一樣精細化處理內容

想成為了一個獨立的設備，iPad 在用戶輸入端的短板需要補足，而為了解決這一問題，蘋果為 iPadOS 精心定制化了一套組合拳：編輯手勢，輸入提速，外設支持。

快速輸入是 iPad 的短板之一。不借助鍵盤而能快速輸入的方法之一，就是單手快速輸入。蘋果在iPadOS 上使用了一個全局的小鍵盤，使用雙指捏合快速呼出，全局浮動，使用QuichPath 滑動手勢輸入法，減少輸入的難度。這就是使用輸入法和鍵盤輸入提速的方法之一。

長段落或者是其他內容，又要怎么編輯呢？蘋果巧妙地將 Macbook 系列觸控板的三指手勢微調了一下，給遷移過來了：三指捏合是復制，三指散開是粘貼，而三指滑動是撤銷。

而輔助快速編輯手勢的， 是智能選取功能，光標定位比以往更加智能和精準，把編輯輸入的最后一個短板也給補上了。

iPad 的多點觸摸屏幕本就支持大量不同的手勢，功能支持不是難點，難點在于用盡可能少、且認知度足夠高的常見手勢，以的認知負荷，讓用戶更快上手，更舒適地做到各種各樣的事情。

以觸摸為核心的交互，以及的指針的交互，在iPadOS 上交匯了。這種交互模式無疑是實驗性的，但是這也是未來所有的移動端和數字產品的設計者都要考慮的問題，而iPadOS 就是最重要的試驗田。

當然，外置鍵盤輸入也并不是難事。iPad 本身的配套鍵盤套和第三方藍牙鍵盤，多數有輸入需求的用戶都已經購置了，為此，蘋果給iPadOS 搭配了豐富的快捷鍵，來輔助輸入：

當然，輸入這件事情上，Apple Pencil 也是非常重要的組成部分。蘋果將系統自帶的備忘錄應用進行了重設計，其中很大一部分原因，就是為 Apple Pencil 提供更為強大的繪圖功能：

這樣一來，即使你沒有購買第三方的繪圖工具，同樣可以用它畫出足夠漂亮的插畫作品。除了特定APP中的手寫輸入和繪圖這樣的使用場景之外，Apple Pencil 還作為日常截圖批注的主力，方便日常作筆記：

更好的輸入，最終的目的，始終是為了更好地輸出內容。

4、輸出：屏幕輸出，手繪板，還有應用

iPadOS 的野心很大。作為一塊10英寸上下的屏幕之內的操作系統，它作為內容承載的硬件，是一個很合理的想象，不然也不會有那么多開發者一直在開發將iPad 作為外接屏幕的應用，而現在，用戶只需要連上Wifi ，它就能作為 Mac的外接屏幕。

打通了這一個環節之后，后面的事情就自然而然了：Apple Pencil 可以在屏幕上畫畫，這樣一來，它很自然而然就成了手繪板。發布會上，蘋果官方所放出的圖片當中，涵蓋了多數設計師都在使用的設計軟件，其中不乏 AI、AE、Pr、Sketch、C4D、Zbrush 這些大熱設計工具。

更重要的一點在于，Apple Pencil 原本 20ms 的反應延遲，在這次的更新之后，將會達到9ms，反應速度提升了一倍以上！它已經是一個稱職的手繪板了。

有意思的地方在于，并沒有 PS。為什么？答案很簡單啊，iPadOS平臺上的原生 PS 馬上就要來了??！連上Adobe 的創意云，兩個平臺又呼應上了……

畢竟，想要打通細分的應用場景，iPadOS 是需要自身具備強大生產力的，這意味著大量的獨立功能、服務和應用支撐。

5、獨立：一切都是為了讓 iPad 獨立生存

想要 iPadOS 能夠獨立完成視覺創造的工作，對于多種字體的支持是肯定需要的。在iPad 上獨立運行 Photoshop 也同樣是需要這樣的功能支撐的，所以，干脆官方提供支持了：

而值得注意的是，作為一個設計公司，蘋果的想象力并不止于此。這次更新的功能當中，有一個非常引人矚目的功能是 SF Symbols。

蘋果將1000多個常見的 iOS 和 macOS 的圖標和蘋果官方的舊金山字體融為一體，這些圖標和符號支持 iOS 13、iPadOS以及的 watchOS 6 和 tvOS 13，而且你還可以在官方的文檔支持之下，自己創造！

具體可以戳這里了解：SF-symbols 使用文檔

完全獨立的 iPadOS 將會需要好好管理本地和云端的文件系統，官方將文件管理器進行了升級，確保它無需借助另外一臺電腦來完成操作。

核心應用沒有問題，和外接內容進入口也要一并升級。功能強大的 TypeC接口能夠直接讀取U盤和存儲卡：

而作為主要的瀏覽器，Safari 瀏覽器也向著桌面端瀏覽器的方向進了優化和調整，比如支持下載：

此外，圖片、照片和視頻的本地管理和剪輯功能，也一并進行了升級，這也是為了讓iPad 能夠成為一個更加獨立的產品而存在。

而真正改變游戲玩法的東西，在開發和設計上。

6、融合：徹底打通平臺的應用開發模式

多年以前，蘋果為了統一全平臺的應用開發，開發語言從原本的 Obj-C 遷移到自家的 Swift 語言。隨著移動端應用量的快速增長，移動端的應用數量其實早已超過 macOS 平臺的開發數量和頻度，這種變化也催生了 Project Catalyst。

圖片來自 engatget

這個名為「催化劑」的項目的目標是希望開發者可以更加便捷地將 iOS 應用遷移到 macOS 上，比如說 Twitter 的開發者只花了幾天時間，就將現有的 iOS APP 遷移到 macOS 上。緊隨其后，成千上萬的移動端應用將都可以逐步地反哺到 macOS 上。

但是 Project Catalyst 只是權宜之計，真正治根又治本的東西，則是這次的新的UI框架，SwiftUI。SwiftUI 是一個典型的原生應用框架，是蘋果在磨合了上十年的經驗之后，所創造出一個的UI開發框架，開發者僅僅只需要極少量的代碼和交互式的設計，就能夠調用這一框架。這一改變對于 iOS 平臺的設計和開發都會有直接的影響。

在現場演示的時候，原本復雜無比的開發代碼，在換用 SwiftUI 之后僅需幾行代碼聲明就可以搞定：

新的 Xcode 11 當中，開發者可以使用托拽的方式來增刪組件，而右側的實時預覽則能夠呈現每一點改變。而基于 SwiftUI 的代碼開發模式，可以快速復用遷移到整個蘋果的產品平臺上，比以往任何時候都要快：

關于SwiftUI 的相關文檔：https://developer.apple.com/documentation/swiftui/

官方教程：https://developer.apple.com/tutorials/swiftui/

在新的 iPadOS 和 iOS13 中，系統的整體速度和性能得到了進一步的提升，解鎖速度提升了30%，啟動速度是以往的2倍，而應用的容量也比以往要小。

7、沉浸：深色模式無處不在

對，深色模式也是蘋果這次 iOS 產品更新的最核心特點，甚至整個WWDC19 主題演講環節的整體視覺設計也是完全沿用這種沉浸感極強的深色模式視覺來進行構建的。目前蘋果的 HIG 當中 iOS 的章節中新增了 Dark mode 的章節，而 iPadOS 相關的系統的設計設計指南還未更新。

「在 iOS 13 及以上的版本當中，用戶可以選擇深色模式為默認的外觀風格。在深色模式下，系統界面、視圖、菜單和控件都會使用較暗的配色方案，并且讓前景元素更加鮮艷，確保突出。用戶可以選擇選擇深色模式作為默認的視覺風格，也可以通過設置，讓它在光線較暗的時候，自動切換過去。需要注意的是，深色模式可以讓人更加專注。在設計的時候，需要在淺色模式和深色模式中都進行測試，因為有些元素和配色在一種模式下可用，在另一種模式下并不一定適用。」

蘋果目前在設計規范中所提供的設計要求相對比較簡略，感興趣的同學可以借助翻譯工具看一下：Dark Mode

如果你對于深色模式感興趣，我們還有文章提供給你：

• 《千呼萬喚！這就是你們要的谷歌深色主題設計規范》
• 《WWDC 大會開幕，我們準備了一份「深色模式」設計要點》

由于目前蘋果官方暫時沒有更多的內容，我們可以把深色模式更多的內容留到今后來聊。

8、安全：更私密的網絡，更安全的生活

覺得社交網絡帳號登錄不夠安全？Google 和 Facebook 兩大巨頭在發布會上成了反面案例，蘋果適時地推出了自家的帳號登錄服務。

蘋果將產品和用戶之間的邊界劃分得非常清晰，包括借助 Homekit 為用戶提供基于本地存儲的安全服務，在網上登錄的時候使用經過加密的郵箱帳號，等等。

而被蘋果點名的兩家著名科技企業，Google 和 Facebook 也是在之前的 Google I/O 大會以及F8 大會上，相繼針對隱私策略、安全服務進行了提升。

如果你對于這些大會感興趣可以看看之前的文章：

• 《Facebook 重大改版背后，揭曉了2019年的4個關鍵設計趨勢》
• 《Android Q 推出重磅新功能，設計師的工作量叒多了！》

結語

和每年9月的新品發布相比，WWDC 的信息量一點都不小。尤其今年還有超贊的 Mac Pro，單開2篇文章都不一定聊得完。但是在我看來，和設計關系最緊密的產品，應該就是 iPadOS了。這個獨特操作系統，巧妙地卡在一個獨特的需求點上，它本身的設計和定位、用戶體驗的考量、服務用戶的思路、牽涉到的功能和服務乃至于它對于設計的影響，都是巨大的。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

近年，一個量產車中出現了最令人感興趣的技術叫做抬頭顯示（Head-up Displays）。

雖然汽車 HUD 的出現讓人無比著迷，但它的交互設計和視覺設計卻與之相反。

為了解決這個問題，來自德國 Fachhochschule Potsdam 學院用戶界面設計專業的 25 名學生和老師經過多輪討論，最終總結出一系列新的觀點和想法，并將它們制作成高保真原型。

在這次設計作業中，25 名學生分別為寶馬、雪鐵龍、雷克薩斯、Mini、梅賽德斯奔馳、Smart、特斯拉和大眾等 8 個汽車廠商設計了接近未來概念的「HUD高保真原型」。

盡管不同的汽車廠商風格迥異且目標群體不盡相同，但駕駛者行車時的需求并沒有太大的變化。因此，一些內容會反復地在不同廠商的高保真原型中出現。

可視化>數字

當使用圖形而不是數字來展示速度和速度限制時，駕駛者更容易識別和理解。

△ Smart —— 速度與當前的限速標準有關，且可視化。

△ 雪鐵龍 —— 地圖外側的圓圈是速度可視化的效果。當兩個進度條在頂部重合時，代表達到限速標準。©Marie Claire Leidinger、Jonathan Jonas、David Brandau

△ 大眾 —— 抽象的圖形代表速度和限速標準之間的關系。©Dominic R?del、Laurids Düllmann、Phillip Steinacher

△ 雷克薩斯 —— 速度被可視化，成為一條直線，限速標準在直線的中間，當車速超過車速限制時，直線變為黃色且車速線變粗。©Christian Franke、Sebastian Prein、Lennart Ziburski

冗余信息的不同展現方式

HUD 可以容納儀表盤內容以外的其他信息，但這些信息應該用不同的圖形展現，且設計時需注意充分利用車窗顯示空間。

△ 特斯拉 —— 特斯拉的 HUD 展示儀表盤時速部分的簡化版。©Constantin Eichstaedt、Steffen Gabel

△ BMW —— HUD 不僅顯示車速，還顯示混合動力汽車狀態和活動。©Patricia Dobrindt、Simon Martin、Jakob Flemming

不展示無意義的內容

在不同場景下，車窗顯示中的內容可能不同，但都必須是非常重要的信息。顯然，大量的信息和裝飾物會將重要的信息掩埋，導致重要的信息不能被快速、有效地識別。

△ Smart —— 導航提示僅在轉向時出現，一些需要長時間顯示的信息，例如「預計到達時間」沒有被設計在 HUD 視覺界面中。©Cécile Zahorka、Fabian Archner、Sebastian Kaim

模糊狀態下仍有辨識度

HUD 的視覺設計必須保證具有最大的對比度和清晰度，理想的 HUD 即使模糊不清，但仍然具有可讀性。

△ 梅賽德斯奔馳（左）、大眾（右）—— 盡管 UI 已經模糊不清，但重要信息，比如車速過快仍然可以識別。©left：David Rehman、Michael Dietz、Thomas Petrach；©right：Dominic R?del、Laurids Düllmann、Phillip Steinacher

HUD是投影而非顯示

與電影院昏暗的環境和純色幕布不同，HUD 投影的幕布是車窗，而車窗后的世界是復雜多變的，有時甚至有強烈的陽光直射車窗，這也使得 HUD 設計充滿諸多限制。

△ Mini —— 這一概念設計方案挑戰如何在多變的復雜車窗環境中設計常顯的菜單，菜單中包括導航、電話和音樂。©Kien Nguyen Canh、Moritz Kronberger

警告信息的出現需要有過渡

我們的研究報告顯示，許多駕駛者對一些我們以為對他有幫助的行為感到不滿，比如為了強調車速限制或其他交通規則而突然出現的警告信息。

的確，在駕駛者沒有建立「速度上升會導致某些問題」這一預期時，突然彈出警告信息是很突兀甚至冒昧的做法。

因此在 HUD 設計中提供一個過渡順暢的動畫也許是一個解決方案，比如隨著車速的上升，提示信息從相對緩和的提醒慢慢過渡到嚴重的警告會更加友好。

△ 梅賽德斯奔馳 —— 駕駛者超速越多，出現在車速圓環外部的紅色圓環越多。©David Rehman、Michael Dietz、Thomas Petrach

圖標需要文字說明

汽車儀表盤上，晦澀難懂的 icon 有著悠久的歷史，「紅色的三角形代表什么」。

這是因為以前的儀表盤是斷碼屏，文字的顯示較難，但最近幾年，液晶顯示屏在汽車上被廣泛應用，設計儀表盤的 UI 時，文字位置不再是一個問題。

另外，增加清晰的文字說明可以有效地降低用戶的學習成本。

△ 如果沒有文字說明，駕駛者很難明白大眾 HUD 中 Steinschlag（碎石塌方）的圖標代表什么。特斯拉 HUD 中低電量 icon 加上文字說明后也更容易被人理解。©left：Dominic R?del、Laurids Düllmann、Phillip Steinacher；right：Constantin Eichstaedt、Steffen Gabel

總結

最近在研究汽車 HUD 設計，偶然間發現這篇文章中的一些細節，對自己正在著手進行的 HUD 設計很有參考價值，所以著手將它翻譯下來，分享給大家，希望也能給大家帶來一些幫助。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。