隨著車內(nèi)屏幕越來越多，越來越大，駕駛者在開車過程中因操作屏幕而分心機率逐漸升高。眾多汽車制造商均希望探索出一種降低或避免「駕駛員分心」的安全性技術。

手勢，是指人手、手和手臂結(jié)合產(chǎn)生的動作，作為解決「駕駛者分神」這個痛點的解決方案之一，正在全世界的汽車制造商中掀起「熱浪」。

你只需要隨意的揮一揮手，就能掛斷電話；將手指向順時針或者逆時針方向移動，就能調(diào)整音量大小。

互聯(lián)網(wǎng)基因：屏內(nèi)手勢交互

汽車手勢的出現(xiàn)，源于對車內(nèi)屏幕的操作。而這些操作均來自于移動端的設計標準，比如蘋果IOS設計規(guī)范中的標準手勢或者谷歌Mertiral Design中的標準手勢。

△ 移動端常見交互手勢

常見的手勢如上圖，分別為

• 點擊：激活控件或選擇一個項目
• 滑動：上下滑動，或者左右滑動來連續(xù)移動需要查看的內(nèi)容
• 按住并拖動：在屏幕上左右或者上下移動某個元素
• 雙擊：放大或縮小內(nèi)容或圖像，并使之居中
• 捏：外捏時放大，內(nèi)捏時縮小
• 長按：進入文本或內(nèi)容編輯狀態(tài)

為了滿足手機屏幕外觀改變，屏內(nèi)顯示內(nèi)容越來越多元化的需求，設計師們也在探索屏內(nèi)手勢的新玩法。

△ android底部導航欄按鍵從左至右分別為：返回上一級、返回主頁、多任務

2017年iPhoneX的發(fā)布，正式開啟了全面屏時代。為了替代Home鍵及android底部導航欄，各大手機廠商相繼開始擁抱「全面屏手勢交互」。

在車機系統(tǒng)中，部分汽車制造商也在積極迎接變化，比如理想one采用「三指下滑」的手勢交互替代「返回主頁」的圖標按鍵。

△ 「 三指下滑」表示返回主頁

2019年的Google I/O大會上，新版本Android Q選擇與IOS采用一樣的手勢操作邏輯，即在屏幕下方提供一個指示條，用戶在左側(cè)頁面邊緣右滑代表「返回上一級」、提示條區(qū)域上滑代表「返回主頁」、提示條區(qū)域上滑并懸停代表「多任務」。

△ android系統(tǒng)中的三種全面屏手勢

隨著全面屏手勢在手機端的操作交互上達成一致，相信在不久的將來，也將越來越頻繁的在車機端看到全面屏手勢的「身影」。

車機新玩法：多屏聯(lián)動交互

當汽車與數(shù)字屏幕相遇，如何讓屏幕與內(nèi)飾結(jié)合的更加完美，又能突顯品牌特性，似乎給內(nèi)飾設計師帶來了許多挑戰(zhàn)與機遇，「一字屏」、「T字屏」、「7字屏」、「旋轉(zhuǎn)屏」應運而生。

△ 拜騰M-Byte 一字屏

△ 理想one的T字屏

△ 合創(chuàng)007的7字屏

△ 比亞迪王朝系列的旋轉(zhuǎn)屏

與此同時，因為成本及技術的限制，汽車制造商的量產(chǎn)車型不得不在屏幕上做出妥協(xié)。理想one的妥協(xié)方案是利用3塊屏幕組合，在視覺上形成「大長屏」的既視感。

要讓3塊屏幕「變」成一塊屏幕，僅僅在視覺上做足功夫顯然還不夠，多屏聯(lián)動手勢交互也不能「缺席」。

事實上，多屏聯(lián)動手勢交互依舊來源于IOS及android系統(tǒng)中的標準手勢，它將不同的手勢進行組合，并與頁面聯(lián)動顯示，形成了多屏聯(lián)動手勢。

理想one在停車模式下，用戶長按并向左滑動，即可將副駕娛樂屏上的信息「甩動」至中控屏。

天際ME7不僅有3塊屏幕組合而成的前排「一字屏」，還有2塊后排乘客娛樂屏，5屏聯(lián)動的手勢交互，天際采用「手勢+屏幕顯示」來解決。

在中控屏、副駕娛樂屏和后排娛樂屏上采用五指抓取手勢進入多屏互動頁面，比如想把中控屏上的內(nèi)容分享給副駕娛樂屏，第一步是單擊選中副駕娛樂屏，第二步按住并拖動中控屏至副駕娛樂屏位置，第三步在副駕娛樂屏中點擊確認。

視頻版交互演示：https://v.qq.com/x/page/w08791lhqus.html

未來已來：隔空手勢交互

通過隔空手勢接聽或者掛斷電話，這似乎是科幻電影中才有的情節(jié)。但正如開篇所說，車內(nèi)屏幕數(shù)量增多，尺寸加大的同時「駕駛者分心」的機率也增加了，盲操手勢與隔空手勢的出現(xiàn)，是解決這個痛點的一種嘗試。

目前量產(chǎn)的汽車中，盲操手勢主要是通過標準手勢與聲音反饋的組合來實現(xiàn)。

比如在理想one中，用戶在空調(diào)屏上左右滑動可以調(diào)節(jié)風量，上下滑動調(diào)節(jié)溫度，且系統(tǒng)通過聲音反饋告知用戶操作成功與否。

與盲操手勢相比，隔空手勢似乎科技感十足，備受汽車制造商的青睞，我們不僅可以在各種概念車上窺見它的蹤影，在君馬SEEK上，也可以實際操作一番。

君馬SEEK提供8種隔空手勢。

△ 左圖：接聽電話 右圖：掛斷電話

△ 左圖：上一曲 右圖：下一曲

△ 左圖：音量升高 右圖：音量降低

△ 左圖：音樂播放/暫停 右圖：玫瑰花

與君馬SEEK相同，寶馬提供「向左」手勢代表上一曲、「向右」手勢代表下一曲，「yeah」手勢代表播放或暫停。

但在許多其他操作上，寶馬與君馬的手勢操作則各有特色。

君馬SEEK使用手掌的正面與反面來區(qū)分不同的操作，正面表示接聽電話·/音量增加，反面表示拒聽/音量降低。

寶馬則選擇向屏幕方向點擊代表接聽電話，手掌向右揮動代表拒聽電話，手指順時針畫圈代表音量增加，手指逆時針畫圈代表音量降低。

在倒車影像中，手指向右揮動代表調(diào)整視角。

△ 圖片來源于「汽車界的扛把子」的短視頻《寶馬手勢控制詳細演示》

在手勢交互上，拜騰也交出了自己的「成績單」。

拜騰的手勢識別共五種，手掌向下激活手勢識別，手掌向上啟動主頁面，手指移動代表移動光標，ok手勢代表確定，五指捏合可拖拽內(nèi)容。

△ 圖片來源于太平洋汽車網(wǎng)《拜騰Concept手勢感應系統(tǒng)操作演示》

這些高大上的技術看起來令人興奮，但在實際使用的過程中，依舊存在識別范圍有限、識別精度不靈敏、識別后的響應速度慢等等問題，而各個廠家的手勢識別沒有形成統(tǒng)一的標準，且沒有大規(guī)模在在用戶中進行推廣，必然會增加用戶的學習成本。

手勢識別對用戶來說是「真香」還是「雞肋」，相信時間會給出答案。

參考文獻：

• IOS Human Interface Guidelines[EB/OL]. https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons/，2020.
• Material Design. https://material.io/design/interaction/gestures.html#principles，2020.
• 《用一篇好文，帶你回顧 2007-2019 的手勢交互簡史》.https://www.uisdc.com/gesture-interaction-history,2019.

寫在最后

汽車內(nèi)手勢的交互設計，是一個有趣又好玩的課題，但如何讓這個課題在好玩但同時易用、好用，恐怕只有設計師不斷思考，并不斷采用一些用戶測試的方法進行驗證才能獲得答案。

文章來源：優(yōu)設    作者：點滴DESIGN

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

前言

身為用戶體驗設計師，無時無刻不被世界上的新事物沖刷著認知——互聯(lián)網(wǎng)紅利下降帶來變化莫測的商業(yè)動向、循著摩爾定律野蠻生長日新月異的新技術、各類亞文化群體催生出多元復雜的圈層文化、腦洞口味越來越獨特的年輕人，甚至眼下席卷全球的黑天鵝事件……

任何一個新事物的悄悄冒頭，都有可能在未知的將來影響著用戶體驗設計師。我們能做的是，在起初感受到微微震幅時，便沿著震感逐步尋找源頭，并思考未來的發(fā)展走向。趕在變化降臨前先擁抱變化。

本文通過研究近一兩年科技、社會文化以及自身用戶體驗領域的變化，從用戶體驗領域關鍵的用戶、媒介(設備與應用）、交互行為、信息與場景的五個角度出發(fā)，探索用戶體驗設計未來的趨勢，希望能帶來啟發(fā)。

更智能的服務提供方式

隨著人工時代到來，過去機械的單向交互方式逐漸被打破，機器漸漸演化成了會主動「觀察」真實場景，「感受」用戶情感，預判用戶意圖并自動完成任務的貼心小棉襖。機器如何為人們提供更智能便捷的服務，未來還有非常大的想象空間。

1. 基于真實場景推理用戶意圖

隨著AI技術的發(fā)展，智能設備可以越來越無縫地將數(shù)字世界和物理世界嫁接起來，主動感知用戶所處情境并智能提供相應服務。

在2019的 Google I/O 大會上，Google Lens 展示的AR點菜功能可以智能識別用戶掃描的菜單并將美食網(wǎng)站上的相關推薦直接呈現(xiàn)在屏幕上。

當用 Google Lens 識別到小票信息時，可快速提取小票上的金額，且可自動彈起計算器快速幫助用戶計算人均消費，節(jié)省人工計算的時間成本。

隨著信息入口從數(shù)字空間延伸到周圍的物理空間中，未來萬物皆可為用戶體驗的媒介，設計師未來在設計的時候需要注意：

尋找適合的打通真實世界的切入點：在陌生語言、信息復雜或者難以處理等苛刻的環(huán)境下，充分發(fā)揮智能設備對信息智能讀取、批量識別與翻譯等強大能力，幫助用戶完成任務；

將用戶旅程的上下游串聯(lián)：根據(jù)生活常識和經(jīng)驗預判用戶行為目的，前置推薦服務；

更加系統(tǒng)細心地考量干擾因素：真實場景是動態(tài)變化的，需要更全方位考慮光線的強弱、多源的噪音、實體的可視性、人員和事件的打斷等因素。

2. 任務自動化，簡化用戶旅程

為了完成一項任務，用戶往往需要借助多個應用來回切換配合，使用起來瑣碎麻煩。如今應用越做越強大也越復雜，過去僅僅解決單一場景的解決方案不再適應于用戶對于完成任務的訴求。

Google Assistant 的新能力 Duplex on the web 可以通過自動跨應用任務處理來簡化用戶旅程。只需要用戶發(fā)出語音指令「預定一輛去某地的車」，助手便可自動跨郵件、日歷、付款等應用調(diào)取信息、自動根據(jù)使用習慣做選擇，并自動填寫信息，而用戶全程需要的只是在關鍵節(jié)點輕敲「確認」即可。

2019年隨著 iOS 13 的更新，「快捷指令」推出了「自動化」能力，用戶通過「if…then…」語法便可為自己的App設計一套程序，實現(xiàn)如：「當我回到公司時提醒我打卡」、「每天早上10點給我的女朋友發(fā)送一條表白短信」等能力，將不相關的場景動作串聯(lián)字一起自動化執(zhí)行，大大節(jié)省人工操作成本。

提升使用效率是用戶體驗設計孜孜不倦努力的方向之一。在利用新技術進一步簡化用戶旅程時，設計師可以充分利用以下因素：

借助語音輸入：比起界面觸控操作，語音交互的直達性可以「穿透」復雜界面，讓設備第一時間明確用戶目標；

基于用戶行為形成習慣記憶：對用戶長期重復的行為做分析處理，構(gòu)建用戶習慣模型并主動提供服務；

適當考慮專家級用戶：隨著部分用戶的智能設備使用水平越來越高，可以考慮為專家用戶提供自定義操作腳本，滿足其自身的獨特需求。

3. 基于情感感知，主動理解用戶需求

隨著人臉識別、表情識別、肢體跟蹤等技術的提升，機器逐漸學會感性語言，主動感知用戶內(nèi)在情感和心理需求。

2019年1月的CES展上起亞亮相的互動式「情感駕駛空間」技術，可通過傳感器讀取用戶的面部表情、心率等反應，調(diào)整駕駛空間內(nèi)的燈光、影片類型、音樂風格等，舒緩艙內(nèi)乘客心情，由此提供更人性化的出行體驗。

用戶總是會期待更貼心的服務，設計師未來對同理心的情感嗅覺更加敏銳：

利用感性線索定位用戶情緒：需要通過面部表情、特殊時間節(jié)點或者識別到的關鍵詞，對用戶情緒進行理解和定位，判斷用戶情感理解用戶內(nèi)心訴求是自由探索、趣味娛樂、或者靜謐修行并提供符合用戶當下心境的服務。

綜合使用感性元素進行設計：通過使用線條、色彩、聲音和動作等傳達并喚起相對應的情感，提供更加人性化的體驗。

4. 小結(jié)

更智能的服務提供方式會讓人們生活擁有更多可能性，但一旦火候把握不得當，可能就會造成對人們生活的野蠻入侵。關于如何讓科技更好造福于人們，早在上個世紀，施樂帕克研究中心提出了寧靜技術（Calm Technology）的愿景，認為影響最深遠的技術應該是隱匿不見的，它們?nèi)缋w維般融入日常生活，絲絲入扣，直至不可分辨。

隨著科技的發(fā)展，設計師對新技術不應是不加克制地應用，而應該潤物細無聲般地提供服務，幫助人們從繁雜喧囂的數(shù)字世界中解脫出來，將寶貴的注意力資源投放在讓生活更美好的事物上。

更自然豐富的交互方式

回顧人類和機器的交流語言，從命令行界面、圖形用戶界面到自然用戶界面，人機交互方式越來越貼合人與人之間更自然的交流方式，其背后是心智模型與實現(xiàn)模型的高度擬合的趨勢。

在自然用戶界面中，為滿足新形態(tài)智能硬件對新接口的需求，以及人們對更豐富強大的交互方式的自然訴求，越來越多的自然用戶界面被開發(fā)出來。語音交互和隔空手勢交互便是近幾年迅速發(fā)展并落地的兩種交互方式。

1. 隔空手勢交互：更自由、更靈動

為了讓機器更好地讀懂用戶的身體語言，能夠感知深度信息的攝像頭走進了日常手機。2019年國內(nèi)外手機廠商的發(fā)布大會上，LG 手機 G8 ThinQ 以及華為發(fā)布 Mate 30 系列推出的隔空手勢，可實現(xiàn)一些簡單的諸如滑動、切歌、截屏等效果。

除此以外，隔空手勢支持更加細微的手勢，如旋轉(zhuǎn)、揉搓等，可以更直觀、更靈活的方式操控界面，讓用戶獲得一種像魔術師用意念控制事物運作的快感。

對于隔空手勢操作網(wǎng)上的言論褒貶不一，其中爭議性最大的就是隔空手勢宛如「殺雞用牛刀」，明明可以用更加精準的手勢觸控，為什么還要用看似很酷炫其實精準度更低的隔空手勢操作？

隔空手勢并不是要替代觸控手勢成為主流的人機交互方式，更多是對情境式障礙場景的補充。在某些場景下，用戶使用設備的條件可能是充滿干擾的。想想看當你邊看手機食譜邊炒菜的時候、邊煲劇邊剝小龍蝦的時候、疫情期間出門佩戴橡膠手套無法正常觸控手機屏幕時…..隔空手勢是不是特別好用？

每個人在特殊的場景下都有可能面臨感官障礙，未來的設計也應該更多地考慮情境式障礙的場景，讓用戶無論身處何時何地依舊能一如既往無障礙地使用設備。

2. 語音交互：更精準、更好玩

語音交互作為更趨近于人與人之間最自然的交流方式，近些年有許多發(fā)展的突破點。

在發(fā)展主線上，語音交互趨向更自然、更人性化、更個性化。過去反人類的一些溝通方式慢慢被「調(diào)教」。此外，多人會話場景下的技術方案日漸增多。

2019的 Google I/O 大會展示了一個視頻片段，視頻中的兩位嘉賓相繼吐槽，經(jīng)常出現(xiàn)針鋒相對難以聽清的時候，這時用戶可以調(diào)節(jié)音源音量選擇性增強自己關注的人物聲音，讓另一個人「靜音」。

△ 滑動選擇音源

此外，語音交互除了在智能音箱領域廣泛應用以外，也逐漸應用在廣告等更多的傳播媒介中，刷新人們?nèi)粘Ｊ褂皿w驗。2020年2月索尼提交了一項廣告播放新專利。當用戶在觀看電視節(jié)目時，如果出現(xiàn)廣告，只要站起來大喊廣告中對應品牌的名字，便可直接跳過這個廣告。

設計師在語音交互場景下，需要留意以下幾個比較容易被忽視的因素：

用戶語音交互習慣培養(yǎng)：如今還處于培養(yǎng)用戶語音交互使用習慣階段，設計師需要更多地考慮應用的語音交互規(guī)則如何才能更趨近于人們?nèi)粘５臏贤晳T，并進一步為人們的社會習俗所接納。

真實場景下的多人音源：在現(xiàn)實情境中， 在多人對話場景下將面臨音源不清、穿插停頓、噪音過多等影響體驗的情況，由于計算機聽覺分析能力開始從單人音源拓寬到了多人音源，多人對話解決方案上還有很大想象空間。

改變傳統(tǒng)的視聽體驗：在使用場景上，語音交互接口也將逐漸運用到更多的媒介上，更全面地刷新用戶體驗。

3. 小結(jié)

人類擁有雙手、眼睛、耳朵和發(fā)聲的嘴巴，但是并不總是在每個使用場景下都能自如地使用：在安靜的自習室下聲音收到限制，在駕駛場景下注意力受到限制，在雙手拎著東西場景下雙手受到限制……但目前許多產(chǎn)品設計都建立在用戶能完整使用感官功能這一理想化的基礎上。

未來的發(fā)展趨勢傾向于將視、聽、觸、嗅等多通道信息完美整合起來，綜合使用多種輸入通道和輸出通道，根據(jù)用戶使用場景用最恰當?shù)姆绞絺鬟f服務，滿足用戶多方位的需求。

硬件形態(tài)帶來新的挑戰(zhàn)

盡管喬布斯曾斷言3.5英寸是手機的黃金尺寸，但作為人們?nèi)粘?nèi)容消費與娛樂的窗口，手機屏幕毫無疑問地變得越來越大，甚至超出傳統(tǒng)物理限制。人們對大屏享受的追求與設備攜帶便捷性之間的矛盾由來已久，硬件形態(tài)的變化對舊有的用戶體驗設計思路帶來的新的挑戰(zhàn)。

1. 大屏幕：單手持握新挑戰(zhàn)

屏幕橫縱比越來越大，而人類的手部具有先天限制，曾經(jīng)慣用的界面布局方式在高橫縱比的屏幕上可能無法被大拇指無障礙全覆蓋，使得越來越多的設計更加重視利用移動屏幕下半部分。

操作與信息進一步下移：

高德地圖、蘋果地圖的搜索框下移，方便單手操作用戶快速激活輸入框；

影視資訊平臺IMDB強化底部標簽欄功能，雙擊「搜索」tab即可激活輸入框，無須艱難地觸摸頂部。

即時戰(zhàn)斗類手游皇室戰(zhàn)爭的說明卡片主要展示在下半部分，方便用戶進行卡片上的相關操作。

底部導航被賦予更多能力：

Pocket的底部標簽欄現(xiàn)在兼任漢堡菜單功能，在激活狀態(tài)下再次點擊主頁icon可選擇主頁上須展示的內(nèi)容。

利用下滑手勢代替點擊：

Snapchat的許多表示前后進退關系的頁面都不是」返回「按鈕，而是向下箭頭，用戶可下滑退出當前頁面。

2. 折疊屏：新形態(tài)的交互方式

為了解決設備形態(tài)和人類手部先天限制之間的矛盾，折疊屏誕生瀏覽并顛覆舊有的界面設計方式。

更靈活的信息布局

過去在單屏設計下，考慮到用戶注意力由上到下縱向衰減，因此信息布局更多是按照優(yōu)先級從上往下排序。而折疊屏中，屏幕展開后便可以開辟出更大的可利用空間，將次級頁面或者較為重要的內(nèi)容曝光在第二屏，對信息的布局將帶來全新的變化。設計師為保證大小屏下順暢的閱讀體驗，需要對信息模塊在不同空間布局下的流動性有更強的把控能力。

更便捷的多任務操作

在過去的單屏體驗中，用戶只能將注意力完全集中在當前的界面中，一次只做一件事。但在實際生活中，用戶面臨的情景往往是主線任務和支線任務的頻繁交錯，并且根據(jù)會任務不同的性質(zhì)自由調(diào)動自己的注意力重心，如邊看視頻邊聊天、邊看直播邊逛街等等。在折疊屏中，設計師可以探索更多主線和支線交錯進行的場景，利用折疊屏帶來的更大的屏幕空間，可以讓用戶在不離開主線場景的基礎上進行支線任務的處理，大大節(jié)約了在不同App上來回切換的操作成本。

更直觀的拖拽交互

此外，隨著多任務處理越來越廣泛使用，拖拽交互將成為重要的交互模式之一。文本、表情包、圖片、視頻等交互對象，不再需要經(jīng)過復雜的分享轉(zhuǎn)發(fā)流程才能在不同App中流轉(zhuǎn)，通過拖拽的方式可以更直觀地進行交互。

雙面屏互動玩法

外折疊屏在折疊狀態(tài)下可轉(zhuǎn)為雙面屏，等于是給用戶增加多一個觀看視角。例如華為 Mate X 的鏡像拍攝可以讓被拍攝者即時獲知自己的鏡頭影像是否滿意，這一拍女友神器有望成為直男拍攝終結(jié)者。在未來更多的多人觀看和互動玩法將被開拓出來。

△ 華為Mate X 的鏡像拍攝

未來隨著5G通訊技術的成長，越來越多的設備可以同時加入物聯(lián)網(wǎng)，人們的生活將被各種智能設備圍繞，設計師需要參與更多屏幕外的設計，讓不同設備串聯(lián)在一起協(xié)同合作，讓用戶能更加自在地享受科技的便利。

疫情催生新的線上體驗

席卷全球的新冠疫情讓數(shù)十億用戶乖乖待在家里。過去需要花費大量精力去教育的用戶使用習慣因為疫情紛紛轉(zhuǎn)變。云購物、云蹦迪、云賞櫻、云監(jiān)工……人們足不出戶便可還原許多線下場景。隨著用戶線上和線下生活的界限進一步模糊，用戶對于應用的效率和情感訴求也發(fā)生了變化。

1. 更關注效率導向

疫情讓遠程辦公學習需求劇增，多人協(xié)作場景越來越頻繁，許多企業(yè)隨之升級了電話、視頻會議、文檔制作等多人協(xié)作效率軟件。過去僅僅考慮少人場景協(xié)作的方式不適用，設計師需要比以往更多地考慮多人協(xié)作場景下，如何對海量密集的信息進行分析處理和展示。

在學習方式上，由于線下學習轉(zhuǎn)移至線上，學生群體對于娛樂向軟件也有了效率訴求。為了順應用戶訴求變化，2020年5月QQ推出學習模式，屏蔽娛樂性的內(nèi)容推送，讓學生更專注在學習上。

2. 更注重緩解社交疏離感

除了效率訴求急劇提升以外，隨著長時間的線上學習與辦公所產(chǎn)生社交疏離感和缺失感，人們對于線上學習工作的情感化訴求也進一步增強。

2020年推出的plagi遠程辦公軟件支持設置每個人的avartar形象，讓大家在遠程辦公時依舊能時刻感受到彼此的存在。在完成任務時還可以放鞭炮慶祝，讓員工能感受到親密無間的線上辦公體驗。

設計師需要更加關注如何讓線上生活進一步與現(xiàn)實生活圈和時間線接軌，通過拓展真實社交下的更多伴生行為讓線上也能還原線下的真實場景細節(jié)和互動體驗，以彌補用戶對真實社交的缺失感。

3. 加速人和信息的強連接

疫情的發(fā)生加速了人與信息之間的連接。人們越來越習慣將自身的身體資料、心情狀態(tài)等信息沉淀在智能設備上。

為了做好廣大市民群眾的健康監(jiān)測服務，輔助疫情防控工作，微信和支付寶在2020年年初都上線了健康碼服務，不同顏色的健康碼代表人們不同的健康情況，市民出入特定場所都需初始健康碼。

隨著人的數(shù)據(jù)化越來越深入，個人身份信息的線上化在各平臺上將成為更加通用的能力。設計師需要考慮如何更自然更低成本地將線下動態(tài)變化的資料信息線上化，更有效地對用戶信息進行加工處理，以及記憶用戶的使用習慣和行為，以便幫助用戶更地完成任務。

疫情的出現(xiàn)加速了線下生活線上化，短短時間內(nèi)我們看到日常習以為常的應用為響應疫情下的特殊需求紛紛出現(xiàn)改造，釘釘、QQ群被改造成上網(wǎng)課、批改作業(yè)的地方，醫(yī)療衛(wèi)生公眾號開辟了實時疫情播報與辟謠通道，無接觸設計和服務需求異常突出……這也啟發(fā)了設計師需要保持對突發(fā)事件的敏感力以及應急能力，在日常生活中留心思考，為日后突發(fā)事件提供充足的場景支撐。

關注以人為本

在洶涌的資本語境下，互聯(lián)網(wǎng)設計師裹挾在商業(yè)驅(qū)動的結(jié)果導向中狂奔，對設計的倫理和責任鮮有發(fā)聲，但伴隨著互聯(lián)網(wǎng)紅利退潮，發(fā)展放緩，狂奔之下的人本問題也逐漸浮出水面。在大趨勢下，UX設計師需要培養(yǎng)自身設計對倫理和責任的敏感度，在滿足商業(yè)目的外，重拾節(jié)操，為多群體，為大社會設計，更加注重「以人為本」。

1. 更包容性的設計

包容性設計師指在做設計產(chǎn)品的時候，考慮到各類用戶的訴求，輸出具有包容性的設計方案。包容性設計依舊是2020年設計主題之一，伴隨著互聯(lián)網(wǎng)產(chǎn)品全球化，在通用性和包容性上也提出了新的要求。

為身障人士設計

三星在2019年針對東南亞市場推出了一款讓聾盲人士和健全人實時交流的app：Good Vibes，盲聾人輕擊屏幕輸入摩斯電碼，預先連線好的另一臺手機就會顯示從盲聾人發(fā)來的短信。健全人用普通的文字輸入回復，在盲聾人這一端就會翻譯成摩斯電碼、以手機振動的方式讀出短信內(nèi)容。

GOOD VIBES宣傳視頻：https://v.qq.com/x/page/g3108sr8qc9.html

餓了么：在餓了么送貨騎手中，約8%受色盲色弱的困擾（全國男性群體中紅綠色盲色弱占比達8%-9%，餓了么騎手男性占比90%），為此餓了么設計團隊在2019年對app的進行了重新設計，包括使用WCAG無障礙色彩對比度，以及無障礙色盤，以及調(diào)整字階，使用輔助圖形等設計手段來解決部分騎手在送貨途中使用APP的痛點問題。

△ 餓了么UED：《為騎士創(chuàng)造平等 — 配送 App 的包容性設計》

跨年齡段設計

谷歌助手禮貌功能 ( Google Pretty Please ) ：開啟谷歌助手禮貌功能后，如果使用者在下達指令的語句中包括「Please」，谷歌助手會對禮貌的請求表示感謝，以此培養(yǎng)孩子的禮貌言行。

Google Pretty Please功能宣傳：https://v.qq.com/x/page/e3108ue3e2t.html

Swift Playground：當10后小學生VITA君的編程課被「可敬的發(fā)量」刷滿彈幕時，Swift playgrounds功不可沒，這款為兒童新手學習編程的軟件，用趣味的游戲方式為4歲以上低齡用戶提供了一個學習編程的低門檻平臺。

為性別平等而設計

蘋果emoji：回看歷年蘋果emoji的更新，從膚色平等，到性別、性向平等，再到為殘疾人設計，2020年再為跨性別者增加新表情，性別平等依舊是包容性設計中重要一環(huán)。

Airbnb插畫：愛彼迎在插畫系統(tǒng)中，也為不同膚色，不同職業(yè)，不同性別，以及身障人士進行了人物的繪制。

2. 關注用戶隱私

2019是互聯(lián)網(wǎng)科技隱私問題沉浮的一年，國外有Facebook因泄露隱私收到史上最大罰單，國內(nèi)則打響了「人臉識別第一案」?；\罩在隱私信任危機下，個人信息和數(shù)據(jù)立法突飛猛進，美國推動《加州消費者隱私法案》，國內(nèi)也將在2020年出臺《個人信息保護法》和《數(shù)據(jù)安全法》。

MIUI12推出隱匿面具功能

Android開放生態(tài)導致的權限隱私問題一直被用戶所詬病，某些APP存在用戶不授權就無法使用情況，針對這一情況，MIUI12推出了隱匿面具功能。當用戶在開啟某些APP要求授權權限時，可以選擇空白通行證進行授權，從而保護用戶真實信息。

在MIUI12的更新中，還推出了照明彈、攔截網(wǎng)兩項隱私保護功能

iOS 14剪貼板提醒

在iOS 14的更新中，保護用戶隱私方面進一步升級。

其中剪貼板提醒設計很貼心，當用戶打開應用，如果該應用讀取了你剪貼板的內(nèi)容，會在系統(tǒng)頂部彈出提示，用戶能在第一時間意識到剪貼板內(nèi)容被讀取，幫助用戶更好的保護自己的隱私內(nèi)容。

3. 健康的數(shù)碼生活方式

科技的發(fā)展是一把雙刃劍，互聯(lián)網(wǎng)產(chǎn)品的發(fā)展給用戶帶來便捷和沉浸體驗的同時，也使得用戶沉溺于科技所帶來的惰性和投食之下，逐漸喪失了對真實生活的把控權，被科技綁架。

數(shù)字福祉（digital wellbeing）近年被頻頻提起，指科技產(chǎn)品需要權衡好數(shù)碼產(chǎn)品和真實生活之間的平衡，防止數(shù)碼產(chǎn)品過渡分散用戶的注意力而影響生活質(zhì)量。

Android Q 專注模式 Google Android Q Focus Mode

Android Q的更新加入了專注模式，用戶在專注模式下，可以在系統(tǒng)層面快捷地關閉使你分心的應用，讓你聚焦于更重要的事情。

防沉迷系統(tǒng)升級

推薦技術的進步，產(chǎn)品體驗的升級，給用戶帶來了更合胃口的菜式和沉浸體驗，但同時也被冠上了「電子海洛因」的稱號。游戲或者內(nèi)容產(chǎn)品的防沉迷系統(tǒng)依舊會是數(shù)字福祉下不可避免的趨勢。

王者榮耀在2020年升級防沉迷系統(tǒng)，對青少年的娛樂時間和點券充值的限制進行了進一步升級。承接話。B站在2019年推出青少年模式，在該模式下，使用時長和內(nèi)容推薦等做了定制化處理。

2020年的UI設計趨勢，一方面是對往年風格的衍變和細化，另一方面，在扁平克制的界面風格盛行后，設計師們向往更自由、更突破的視覺表達。

UI的繼承和創(chuàng)新

1. 深色模式

2019年iOS 13深色模式姍姍來遲，緊接著大廠APP相繼推出此功能。在2020年，深色模式會繼續(xù)普及外，也會在可視性和實現(xiàn)成本方面有更多細節(jié)打磨和研究。

2. 新擬態(tài)

設計趨勢的發(fā)展是螺旋式上升的，在扁平化設計流行之后，對物體的擬真再一次回歸設計圈，新擬態(tài)以一種對舊擬物風格的再創(chuàng)新，重新流行起來。

新擬物風格（Neumorphism）緣起于設計師Alexander Plyuto發(fā)布在dribbble的一組作品，以投影重新對扁平界面進行了塑造，模仿出類似浮雕的視覺效果，感受耳目一新，引起大量設計師相盡模仿。

新擬態(tài)的實用性和可落地性有待商榷，但是作為一種新的風格受到設計師擁躉，也不失為下一波風潮到來前的靈感繆斯。

WWDC2020對mac OS的更新也重新定義了新擬態(tài)設計語言，在mac OS新系統(tǒng)Big Sur中，圖標的設計增添了輕微的漸變、投影、高光，以此來營造圖標內(nèi)元素之間的縱深關系。

3. 多彩配色

在扁平簡潔UI風格盛行之后，豐富的色彩依舊是設計趨勢之一，大面積色塊，碰撞配色，帶來更具沖擊感的視覺體驗。

4. 字體裝飾化

UI界面逐漸扁平，色塊圖標弱化，為突出頁面重心和內(nèi)容，iOS 11在界面標題上使用更大的字號，更粗的字重。近年在大標題的風格衍變下，文字在傳達信息外，也開始有了裝飾性作用，采用超大字體，成為頁面排版美化的一部分。

5. 更大圓角

大圓角的風格會繼續(xù)延續(xù)，相較以往，卡片的處理圓角會更大，隨之帶來的是多的留白處理，結(jié)合大字號，帶來更透氣通透的視覺感受。

Mac OS Big Sur的界面相對舊版本采用了更大的圓角；系統(tǒng)圖標的設計統(tǒng)一成圓角矩形。

6. 更豐富的插圖

UI插圖的豐富體現(xiàn)在樣式和內(nèi)容上，樣式上開始3D化，內(nèi)容上更注重插圖敘事的表達。

7. 3D插圖

3D圖形往年更多運用在動態(tài)影像或運營類設計中，隨著3D的普及運用，UI插圖也會迎來3D化，給用戶帶來更立體，更新鮮的視覺感受。

8. 講求敘事表意

相較于往年追求形式的UI插圖，新趨勢下的插圖更講求功能性，每一副插圖都承載一定的作用——傳達功能信息或透傳品牌情感；同時插圖更講求畫面表意和情節(jié)，給用戶敘事性的視覺體驗，增進用戶和產(chǎn)品之間的情感聯(lián)系。

9. 插圖組件化

插畫的流行，隨之而來的是成本的水漲船高——一套系列插圖為保持風格統(tǒng)一，往往由唯一設計師繪制，同時為兼容各類場景，設計師往往要繪制多張。

為解決插圖的成本和效率，插圖開始以組件化的方式進行繪制——插圖設計師將插畫進行拆分繪制——不同人物，不同場景，不同物件等，再通過組件化的拼接合成，使用組件的設計師可以根據(jù)需求場景自由組合，也避免了風格不統(tǒng)一問題。

設計師Pablo Stanley將日常繪制的插畫制成一套矢量插圖組件庫，將人物分為：半身、全身和坐姿3大類。通過不同表情、發(fā)型和服裝可自由搭配出近60萬種組合。

Pablo Stanley人物插畫系統(tǒng)：https://v.qq.com/x/page/s3108yeyhmt.html

10. 多維度動畫表現(xiàn)

新趨勢下，動畫一方面回溯復古線描手繪風格，另一方面追求更三維的體驗，同時幀率進一步提升，追求更流暢的視覺感受。

11. 手繪動畫

手繪插圖是往年的熱門，其隨性自然的筆觸，能給用戶帶來親切的感受，在新的趨勢下，動畫的加入賦予手繪插圖一份靈性和趣味。

12. 3D運動

Google Material Design通過卡片投影層級和二維動畫規(guī)律，賦予扁平界面Z軸的縱深感。隨著3D的普及流行，新趨勢下的界面，界面的運動從二維走向三維，表現(xiàn)出3D場景下透視感。

13. 高幀率動畫

高幀率影視從線下電影院移步到線上流媒體，手機高幀率屏幕從90Hz到120Hz逐步升級，用戶對畫面流暢的定義一再刷新，UI動畫的幀率升級也會是新的一輪趨勢。

Telegram的表情采用了高幀率動畫，給用戶更流暢的視覺感受。

更的涉及協(xié)作方式

體驗的持續(xù)升級，產(chǎn)品的高速迭代，對UX設計師的設計師效率提出了更高的要求。的設計方式是一個永恒的趨勢。

1. 從本地文件到云端協(xié)作

傳統(tǒng)的文件交接方式效率低下，導致設計師之間信息不對稱，最終影響產(chǎn)品的一致性體驗。近些年在線設計協(xié)同工具發(fā)展迅速，從UI設計、 設計交付以及組件協(xié)同等環(huán)節(jié)上給設計師提供更加實時的協(xié)作體驗，獲得大量UX設計師的簇擁。在2019 uxtool的設計工具調(diào)研中，在線設計協(xié)同工具佼佼者figma以其協(xié)作和性能優(yōu)勢，大有追趕sketch之勢。

隨著團隊對設計效率要求的提高，設計文檔從本地走向云端協(xié)作是不可逆趨勢。不過設計工具的迭代是需要成本的，尤其在大型設計團隊，設計工具需要渡過陣痛期來完成迭代，進而提升設計效率和體驗一致性。

2. 科學有效的設計系統(tǒng)

UX的發(fā)展，從早期的靜態(tài)規(guī)范到當下的動態(tài)設計系統(tǒng)，是為解決產(chǎn)品迭代增速后帶來的設計效率和產(chǎn)品體驗問題。商業(yè)驅(qū)動下的產(chǎn)品迭代速度有增無減，設計系統(tǒng)依舊會是未來幾年的設計趨勢之一。

這里說的設計系統(tǒng)不是廣義上的設計系統(tǒng)，而是在互聯(lián)網(wǎng)設計的發(fā)展中，對組件化設計逐步迭代升華的一套設計協(xié)作方法：

「設計系統(tǒng)（Design systems）是一組為了共同目標而服務的內(nèi)在相互聯(lián)系的設計模式和多人協(xié)同執(zhí)行的方法。」（引自《Design systems》，Alla Kholmatova，C7210翻譯）。

3. 設計系統(tǒng)歷程衍變

組件化的發(fā)展歷經(jīng)規(guī)范文檔到UI組件，再到設計系統(tǒng)，形態(tài)從最初對設計一致性的指導規(guī)范，到對產(chǎn)品研發(fā)流程的規(guī)范，以及產(chǎn)品設計價值觀的輸出，當下的設計系統(tǒng)以集大成者形式影響整個產(chǎn)品的設計形態(tài)。

設計系統(tǒng)的結(jié)構(gòu)見下圖：

4. 設計系統(tǒng)的求同存異

設計系統(tǒng)并非一成不變的，他是一個動態(tài)進化的系統(tǒng)，會根據(jù)團隊性質(zhì)、產(chǎn)品特性在內(nèi)容上有所區(qū)分——比如大團隊更應該大而全，小團隊更傾向小而精；成熟產(chǎn)品的設計系統(tǒng)更傾向于打造完整閉環(huán)的合作流程機制，新產(chǎn)品的設計系統(tǒng)應該以小為始，快速迭代……

隨著產(chǎn)品的垂直化，細分化，設計系統(tǒng)的趨勢會是在趨勢大同之下找到適合產(chǎn)品和團隊自身的形態(tài)和節(jié)奏。

Material Design是一個包含了指導規(guī)范、組件，以及設計開發(fā)工具的自適應性設計系統(tǒng)。

它作為平臺型性設計系統(tǒng)，更為大而全的規(guī)范了整個生態(tài)系統(tǒng)的設計風格，以及提供工具讓研發(fā)者能快速產(chǎn)出符合規(guī)范的產(chǎn)品。

△ Google生態(tài)龐大繁雜，Material Design更為全面

Ant Design作為一個為to B產(chǎn)品提供解決方案的平臺，更多從設計可用性和完整性考慮設計系統(tǒng)的搭建。

△ Ant Design通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設計者專注于更好的用戶體驗

QQ作為一款面向95后的2C社交產(chǎn)品，其設計系統(tǒng)Q語言從風格調(diào)性上對設計進行規(guī)范，同時給予設計師一定的自由度；也考慮到QQ內(nèi)兼顧多個產(chǎn)品，以及界面主題樣式，對基礎組件的使用場景和代碼進行了規(guī)范，方便設計和開發(fā)敏捷開發(fā)。

Q語言，給予產(chǎn)品的自由調(diào)性之外，也針對主題和基礎組件進行了規(guī)范。

每個產(chǎn)品和團隊都有自身的特征，設計系統(tǒng)的建設也應該有的放矢，沒有可照搬的標準答案，在大方向下找到適合自身的解決方案才是的可行之道，將效率最大化。

5. 科學有效的優(yōu)化迭代

組件是設計系統(tǒng)中的重要組成部分，但是以往靜態(tài)的、孤立的協(xié)作方式使得組件的更新迭代滯后和阻塞。隨著設計系統(tǒng)的發(fā)展，設計師組件化思維的普及，組件的更新需要更科學的方式進行管理。

Figma在2019年推出的Design System Analytics功能，組件設計師可以借此查看組件的使用情況，包括引用次數(shù)，解組次數(shù)等，并可以生成組件使用情況的曲線趨勢圖，以數(shù)據(jù)的形式，科學地推動組件的優(yōu)化迭代。

選擇分析的時間段；組件使用的次數(shù)曲線圖；團隊使用情況；所有組件使用情況

后記

未來的用戶體驗會出現(xiàn)什么新趨勢？人工智能等算法的發(fā)展、5G技術普及、新的智能設備形態(tài)、新的信息處理技術、新一代用戶的喜好和口味……這些往后或?qū)⒂绊懹脩趔w驗發(fā)展的走向。未來用戶對體驗的要求只會越來越高。

用戶體驗設計師需要了解更多的技術動向，但安身立命之本還是讓用戶真正受益：立足于用戶真實使用場景，在理性價值層面上，打造可用、易用、的設計；在感性需求層上賦予情感上的愉悅性，在反思層面賦予意義價值。

文章來源：優(yōu)設    作者：騰訊ISUX

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

近年來暗黑模式的設計趨勢開始一點點明顯，Ant Design 在這次 4.0 的升級中也對這類暗黑場景化的設計開始進行初步的探索，接下來就讓我們一起來看下 Ant Design 這一針對企業(yè)級的設計體系是如何設計暗黑模式的。

什么是暗黑模式

暗黑模式是指把所有 UI 換成黑色或者深色的一個模式。

需要說明的是，暗黑模式不只夜間模式：

暗黑模式更多的目的是希望使用者更加專注自己的操作任務，所以對于信息內(nèi)容的表達會更注重視覺性；

而夜間模式則更多是出于在夜間或暗光環(huán)境使用下的健康角度考慮，避免在黑暗環(huán)境中長時間注視高亮光源帶來的視覺刺激，所以在保證可讀性的前提下，會采用更弱的對比來減少屏幕光對眼睛的刺激。

同時，從使用場景上來說，暗黑模式既可以在黑暗環(huán)境，也可以在亮光環(huán)境下使用，可以理解為是對淺色主題的一種場景化補充，而夜間模式只建議在黑暗環(huán)境下使用，在亮光環(huán)境使用時很可能并不保證信息可讀性。

為什么 Ant Design 要做暗黑模式

1. 更加專注內(nèi)容

試想一下，我們在電影院看電影時，為什么要全場關燈？甚至有些 APP，在影片的下方也會又一個模擬關燈效果的操作，來讓整個手機屏幕變黑，只剩下視屏畫面的部分，這都幫助我們可以更專注、更沉浸在當前的內(nèi)容下。

色彩具有層級關系，深色會在視覺感官上自動后退，淺色部分則會向前延展，這樣對比強烈的層次關系可以讓用戶更注重被凸顯出來的內(nèi)容和交互操作；尤其在信息負責界面內(nèi)層級關系的合理拉開對操作效率都有明顯的促進作用。

2. 在暗光環(huán)境下更加適用

如今社會我們身處黑夜使用手機、電腦、iPad等設備的次數(shù)越來越多，環(huán)境光與屏幕亮度的明暗差距在夜間會被放大 ，亮度對比帶來視覺刺激也更加明顯，使用暗色模式可以縮小屏幕顯示內(nèi)容與環(huán)境光強度的差距，同時也可以為設備的續(xù)航帶來積極影響，可以保證使用者在暗光環(huán)境下使用 OLED 設備的舒適度。

3. 大眾喜愛

黑色一直以來就可以給人以高級、神秘的語義象征，相比于淺色模式，暗色模式藏著更多可能性。

設計原則

在這次暗黑模式的設計中主要遵循以下兩大設計原則：

1. 內(nèi)容的舒適性

不論是顏色還是文字或是組件本身，在暗色環(huán)境下的使用感受應當是舒適的，而不是十分費力的，如果一個顏色在淺色下使用正常，在暗色下卻亮的刺眼或根本看不見，那必然不夠舒適也不可讀；所以在顏色的處理上不建議直接使用，這樣會讓界面變得到處都是「亮點」，讓眼睛不適的同時，也會帶來許多誤操作。

2. 信息的一致性

暗黑模式下的信息內(nèi)容需要和淺色模式保持一致性，不應該打破原有的層級關系。舉個例子，在淺色模式下越深的顏色，與界面背景色對比度越大，也就越容易被人注意，視覺層級越高，比如 tooltip；在暗黑模式下我們同樣需要遵循這一規(guī)律，所以對應所使用的顏色也就越淺，反之則會越深。

如何設計

1. 界面層級

在大量的企業(yè)級產(chǎn)品界面中，我們通常用只用一個白色背景結(jié)合分割線就可以搞定所有界面的板塊層級，因為在淺色模式下有投影可以借助，然而暗黑模式中投影將不足以起到如此功效，我們需要通過顏色來區(qū)分層級關系。

在經(jīng)過對螞蟻企業(yè)級頁面的典型布局結(jié)構(gòu)評估后，我們在中性色中增加了三個梯度，將中性色擴展至 13 個

并定義出通用情況下頁面中的框架層次，主要分為三大塊：

• 應用框架：也就是我們平時定義的導航欄，也是在大結(jié)構(gòu)中最上層的一部分
• 內(nèi)容組件：指頁面中的具體內(nèi)容，通常情況下以區(qū)塊的形式存在，作為第二層級
• 頁面容器：顧名思義，指頁面級別的容器盒子，可容納頁面中的所有內(nèi)容，可以理解為是一個背景板，也就是最末層

在目前的暗黑體系下，我們分別為這三大塊從淺到深定義了#1F1F1F、#141414、#000000 三個顏色，在實際應用中，你也可以根據(jù)自身業(yè)務的需求，從中性色板中直接選用或是依據(jù)透明度的思路自定義出合適的中性色彩。當定義出較為明確的框架層次和顏色后，也對后續(xù)系統(tǒng)中組件的顏色配置有著重要的指導意義。我們需要考慮組件出現(xiàn)在不同顏色背景下的可能性及其表現(xiàn)，盡量保持一致性。

2. 色彩

眾所周知，暗黑模式與淺色模式最大的不同就在色彩的處理上，在暗黑模式中，我們并不想打破淺色模式下基礎色板的配置規(guī)律及色值，當一個應用或站點深淺模式并存時，希望在色彩上有一定延續(xù)和關聯(lián)，而不是毫不相關的兩套色板，這樣一是避免開發(fā)及后續(xù)的維護成本，二是實際切換和使用時，可以保證一致性，這意味著需要借助一定規(guī)則。

這里分享一下我們的處理思路：

基于 Ant Design 自然的設計價值觀，我們先從自然界中尋找靈感，如果說淺色模式如同初升時的朝陽，那暗黑模式就是落日下的晚霞，各有各的韻味，同一片天，唯一不同的是，受光線亮度的影響，晚霞整體會暗一些。

所以我們大體的設計思路也是基于淺色的基礎色板，通過結(jié)合透明度的轉(zhuǎn)換，去得到一套暗黑模式下的色彩。這樣的好處是，深淺模式下的色彩根基是同一個，在這樣的基礎上經(jīng)過透明度的變換得到的結(jié)果也會相對和諧，同時也符合我們一致性的原則。

這里我們借助下面這兩個概念對透明度進行轉(zhuǎn)換：

對比度極性

對比度極性分為正極性和負極性。

• 對比度正極性：指在電子文本中文本為深色，背景色為淺色
• 對比度負極性：指在電子文本中文本為淺色，背景色為深色

這里可以給大家分享對比度查閱的一個工具：WebAIM，只要輸入色值就可以看到具體的值，十分方便。

正負極性差值

顧名思義便是正負兩者的差值，這里取的是絕對值。

根據(jù)一致性原則，我們嘗試通過對比一套顏色的正負極性變化趨勢來找到轉(zhuǎn)換規(guī)律。

首先可以看下，如果一個顏色在不做任何修改的前提下直接使用，它的正負極性趨勢以及差值趨勢的走勢和關系是怎么樣的，我們嘗試描繪出這樣的曲線，他們的變化規(guī)律也將作為我們規(guī)則轉(zhuǎn)換的參考標準。

經(jīng)過對比，可以發(fā)現(xiàn)一些變化規(guī)律：

首先來說下「差值趨勢」，橫向?qū)Ρ瓤梢园l(fā)現(xiàn)，不同顏色的正負極性走勢是很不一樣的，可以看到在黃綠色段差值曲線達到一個變化峰值，這是由于黃綠色本身由于明度、飽和度值相比其他顏色偏高，所以總是有種刺眼的感覺，生活中也會用它來作為警示、提醒的作用，所以在深淺背景下的對比度有一個比較大的差異，可以說這個變化是正常的。

這點也可以從「正負對比度極性趨勢」兩者間的相對關系反應出來，從紅色到洋紅，綠線一開始從逐漸在藍線的上方一點，開始逐漸上移，最后在峰值處開始慢慢下移，在「極客藍」這個色相中接近重疊，在洋紅處又慢慢下移，說明淺色下越深的顏色，在深色中越亮，反之則越暗。

縱向比對單個色板，可以發(fā)現(xiàn)，其斜率變化主要受顏色的明度、飽和度影響，可以反應一個顏色的不同梯度在黑白背景下的變化規(guī)律。

有了這個大的變化規(guī)律，我們便可做到心中有數(shù)。首先以 Ant Design 的品牌色「破曉藍」為例，經(jīng)過在多個業(yè)務、場景中不斷嘗試與調(diào)整，我們得到一個透明度轉(zhuǎn)換規(guī)則：

并將這個規(guī)則應用在其他 11 套色板中，驗證其可用性。這個過程確實沒有什么快捷通道，唯一的辦法就是不斷嘗試。

最后，我們將經(jīng)過規(guī)則轉(zhuǎn)換的實色與常規(guī)顏色的變化趨勢做對比：

可以看到在大趨勢走向上左右兩側(cè)圖基本一致，這代表兩個色板在變化規(guī)律接近一致，基本可以證明規(guī)則的合理性。區(qū)別在于，對比度負極性和差值相對于右側(cè)未經(jīng)處理的值明顯有所下降。這是由于透明度的處理讓暗色下的顏色在明度、飽和度上有所下降導致。

再仔細觀察可以發(fā)現(xiàn)，在左側(cè)的常規(guī)顏色中，從破曉藍-洋紅這段偏冷色系幾個顏色中，差值趨勢變化最平緩的是「極客藍」這顏色，這說明該顏色在深淺背景下的表現(xiàn)較為穩(wěn)定，起伏不大，當基于一個統(tǒng)一的透明度規(guī)則前提下，會讓它在暗色下的對比度減弱，所以反而會導致差值趨勢變大，所以我們會發(fā)現(xiàn)差值趨勢變化較小的顏色轉(zhuǎn)移到了「破曉藍」、「洋紅」中，也是一個正?，F(xiàn)象。

最后可以看到顏色在調(diào)整過后實際應用的效果

在官網(wǎng)中點擊「切換」即可預覽：

如果上述 12 個色板不滿足你的業(yè)務需求，你也可以在官網(wǎng)上自己選擇顏色，我們會根據(jù)規(guī)則幫你生成一個暗色色板。

另外，如果在實際應用過程中，你選了色相在 225～325 間的深冷色系作為主色或強調(diào)色使用，建議適當提高透明度的值，避免在暗色界面上引起閱讀障礙。

3. 文字

暗黑模式中，文字的使用與淺色模式基本一致，依舊從 85%-65%-45%，唯一不同的地方在 disable 的狀態(tài)，其透明度值提升為 30%，避免顏色過淡真的「不可見」。另外，對于 #FFFFFF 的純白色文字，盡量避免大面積使用，尤其對于表格、列表這類偏閱讀瀏覽的場景，如有需要，做小范圍強調(diào)即可。

4. 陰影

暗黑模式中的陰影規(guī)則與淺色模式基本保持一致，但由于本身的界面背景較深，在陰影色值上也有所加深，幫助層次更好的體現(xiàn)，整體將色值擴大到原先的 4 倍，但在陰影的位移、擴展上均保持不變。

5. 分割線

分割線在暗黑模式中建議根據(jù)界面中常用的背景色，通過透明度換算成實色使用，Ant Design 中分割線主要有 #434343 和 #303030 兩種顏色，分別對應淺色模式下的 #D9D9D 和 #F0F0F0，這樣做的目的主要是為了避免帶來額外的交錯疊加，尤其對于表格類以及很多帶有 border 屬性的組件，實色會更為穩(wěn)妥便于記憶。

適應性

適應性方面，Ant Design 的暗黑模式可以與海兔及可視化資產(chǎn)進行無縫銜接，使用時可以任意組合拖拽，你可以下載 Kitchen 插件，獲取海量資產(chǎn)。

結(jié)語

暗黑模式最近越來越受到人們的關注，與某一特定產(chǎn)品的暗黑設計不同，Ant Design 的暗黑模式更多以設計體系的角度考慮企業(yè)級這個大場景下的內(nèi)容，在易用性、擴展度、復用度等方面還有許多需要完善和繼續(xù)研究探索的地方，我們會在未來的迭代中逐步進行，先完成再完善。希望上述內(nèi)容能對大家在暗黑模式的設計上有所幫助。

文章來源：優(yōu)設    作者：AlibabaDesign

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

在這里，我們將研究設計中最簡單、因而常常被低估的活動之一，即線框圖的設計。了解什么是線框圖，為什么需要設計它們以及如何充分利用線框圖。

什么是線框圖？

線框圖，也稱為頁面示意圖或屏幕藍圖，是展示網(wǎng)站或產(chǎn)品框架的視覺指南：

• 設計：線框圖常用在考慮用戶需求的情況下在頁面上布置內(nèi)容和功能。
• 開發(fā)：添加視覺設計和內(nèi)容之前，在開發(fā)過程早期使用線框來建立頁面的基本結(jié)構(gòu)。

線框圖的主要目標是向團隊和利益相關者展示產(chǎn)品將包含的頁面和組件，以及這些元素之間的相互作用。

為什么需要設計線框圖？

1. 幫助團隊評估和完善工作范圍

線框圖允許設計師快速創(chuàng)建產(chǎn)品的視覺表現(xiàn)，方便后期修改；

幫助設計師向團隊展示應用程序具有的頁面元素和控件，以及所有元素如何進行交互。

2. 讓團隊所有成員參與產(chǎn)品設計

線框圖的使用允許設計師和開發(fā)人員在早期階段共同參與討論設計，在開始進行視覺設計之前就提供反饋和更改建議。

這樣有助于使設計過程快速迭代，避免不必要的浪費。

3. 方便快速演示

從客戶和利益相關者那里獲得快速反饋是設計過程的重要組成部分。

設計過程中，經(jīng)常會遇到需求的來回變化。有了線框圖，可以使這個過程更有效，修改原型比修改線框圖需要更多的時間和精力。

4. 進行用戶測試

線框圖可以幫助設計師從潛在用戶那里獲得有用價值的反饋。同時瀏覽線框比讀取規(guī)范要快得多，還有助于減小與預期效果的差異。

線框圖實際應用

為了獲得最好的結(jié)果，為下一步的 UI 打下堅實的基礎，需要遵循幾個簡單的規(guī)則：

1. 顏色的使用

如果在線框圖中使用豐富的配色，可能會分散觀者的注意力，并使更新變得更困難。

但在某些情況下，使用顏色突出顯示特定組件是合理的。例如，可以將紅色用于錯誤狀態(tài)，將藍色用于注釋等。

2. 使用簡單的組件

線框圖并不包含全面設計和詳細說明的組件。相反它們應該設計的相對簡單，讓團隊成員更容易識別。

為組件添加細致的陰影、粗細描邊將花費大量的時間和精力，卻不是很實用。

3. 保持一致性

在所有線框圖中，類似的組件必須看起來相同。如果相同的組件看起來不同，開發(fā)人員可能會質(zhì)疑它們的功能是否相同，甚至會因為設計不同而增加估算時間。

在處理線框圖時，記住一個簡單的規(guī)則：保持一致，避免造成混淆。

4. 使用真實內(nèi)容

我們會?？吹経I/UX設計師沒有在線框圖上添加真正的內(nèi)容，而是重復使用同一些文本。這是很少有設計師意識到的普遍錯誤。

內(nèi)容真實與否會影響接下來的設計。如果使用不真實的內(nèi)容，UI設計中文本的數(shù)量多少和排布方式都要再調(diào)整。

真實內(nèi)容能給線框圖增加價值，更好地解釋上下文。

5. 使用注釋

設計中可能會遇到某些解決方案無法直觀地加以說明的情況，例如某些控件背后的邏輯，因此開發(fā)人員可能會對它們有疑問。

在這種情況下，可以提供注釋來解釋其背后的邏輯。這樣，你的團隊就會理解你的解決方案，你就不需要花時間再討論它們。

6. 線框圖程度

線框圖應該選擇低保真還是高保真，沒有嚴格的規(guī)定，取決于項目的具體要求。

硅谷知名作家埃里克·萊斯認為，如果不能帶來價值就不需要做額外的工作，從基礎做起，然后根據(jù)需要添加細節(jié)。

7. 將線框圖延伸到交互原型中

在使用不同產(chǎn)品時，有一些簡單而通用的交互，也有一些交互相當復雜。

在線框圖不足以說明復雜性的情況下，可以將線框圖擴展到交互原型中，而不必寫冗長的注釋并花大量時間進行解釋。

總結(jié)

將線框圖結(jié)合到設計過程中，為我們所用：

• 幫助團隊獲得更的項目估算；
• 讓所有團隊成員參與設計流程，避免影響開發(fā)過程的錯誤；
• 提前向客戶、利益相關者進行演示，以盡快獲得反饋，節(jié)省開發(fā)不良解決方案的時間。

     文章來源：優(yōu)設    作者：Clip設計夾

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

這次我們不聊視覺，也不暢想未來，只說說當下 HMI 產(chǎn)品設計與交互體驗。

本文內(nèi)容會涉及一些專業(yè)的汽車知識名詞，因為篇幅有限，如有些知識名詞不太明白可以百度一下。

別看錯了，不是HDMI！

說到 HMI 大多數(shù)設計師應該是既熟悉又陌生，HMI 是 Human Machine Interface 的縮寫，「人機接口」，也叫人機界面，人機界面（又稱用戶界面或使用者界面）是系統(tǒng)和用戶之間進行交互和信息交換的媒介， 它實現(xiàn)信息的內(nèi)部形式與人類可以接受形式之間的轉(zhuǎn)換，凡參與人機信息交流的領域都存在著人機界面。

聽起來是不是覺得這不就是 UI 嗎？有什么區(qū)別嗎？似乎差不多，幾乎是沒有區(qū)別的，只不過是在某些場合和設備上管他叫 UI，比如移動端設備，而在另外某些場所和設備上管他就叫 HMI，比如汽車車機和數(shù)控機床。所以這個概念也不用去特別較真，HMI 就權當作是汽車上的 UI 界面吧。畢竟汽車是高科技與工業(yè)結(jié)合的完美產(chǎn)物，「HMI」念出這個詞時候就感覺是蠻專業(yè)的！很般配！

HMI前世與今生？

剛才說 HMI 最早更應用于工業(yè)上，比如常見的各種機床、制造裝備。

或者說讓時間再向前推進一點！

而這里通常意義的 HMI 則更加聚焦點，基本特指汽車車機或者車載多媒體設備。

說到這里還是要從車載儀表盤說起，從德國人卡爾·本茨發(fā)明世界第一輛汽車，距今已經(jīng) 100 多年的時間了，在那些還沒有 HMI 這個名詞的年代，那么他是以什么形態(tài)出現(xiàn)的？那就不得不提「儀表盤」了。

當然寫這篇文章并不是去評測誰家 HMI 更優(yōu)秀，而是希望通過一些假設、實驗和推斷，和大家一起來探討一下如何更有效地設計 HMI。

屏幕越大越好？車內(nèi)到底需要幾塊屏幕？

我們先從屏幕開始。

說到屏幕，設計師都是比較敏感的，因為我們最終的設計交互創(chuàng)意都是需要都是在屏幕上顯示展示出來的，HMI 當然也不例外?，F(xiàn)在在車載屏幕上你能看到最大尺寸多大？

拿特斯拉為例，Model S 和 Model X 車型都是 17英寸，Model 3 為 15 英尺。

當然他肯定不是最大的，熟悉汽車朋友你應該知道我想說誰了，沒錯就是他！擁有 48 寸可多段升降屏幕的 BYTON 新能源概念車 M-Byte！48 寸的確很夸張，難道屏幕越來越大就是未來 HMI 的方向嗎？

當然這個問題肯定是否定的，為什么？那就要從車載屏幕的作用來說起。

首先我是作為一個曾經(jīng)就職于汽車公司的設計師，并且是一名地道的汽車發(fā)燒友，憑借對汽車還算熟悉和熱愛做出一些產(chǎn)品交互分析，以下如有不妥之處還望海涵。

汽車內(nèi)屏幕的作用

按照功能場景總體可分為三類：主行駛狀態(tài)信息、附設備狀態(tài)信息、多媒體 & 外設

不可缺少還需要與使用者、場景結(jié)合，我們先來做一個大概的用戶畫像。

對應這些需求，汽車需要有儀表臺（屏）控制和顯示的區(qū)域有五個。

五個區(qū)域分別是：

• 主駕駛儀表屏
• 中控臺控制（屏）
• 后排娛樂屏
• 副駕駛信息屏
• 扶手控制臺（屏）

其中前三個是主流配置，后兩個比較少見。

關于汽車設備這塊我們不做深入展開了，畢竟這篇文章主要討論的還是設計，直接看結(jié)果！

題外音：屏幕安全性的考量

汽車是比較特殊的設備，基于安全性考慮，汽車內(nèi)屏幕尺寸不宜太大與太多。

屏幕總體為玻璃材質(zhì)，但與車窗擋風玻璃的材質(zhì)不同，當汽車遭遇碰撞的時候，車內(nèi)屏幕極易破損并形成尖銳物，極大可能會乘坐人員造成二次傷害，所以車內(nèi)屏幕不易太多，更不易太大。雖然車載屏幕變大變多已不可逆轉(zhuǎn)，而且隨著屏幕技術的提升，柔性 OLED 的應用也將會在一定范圍解決安全問題。但也需要汽車相關設計者多在安全方面進行考慮，任何產(chǎn)品體驗應該建立在安全基礎之上的，特別是交通工具。

物理實體按鈕過時了？

為什么大屏幕操控成為了當前的 HMI 主流了呢？那不得不去提一下另外一個我們熟悉的設備——手機！

同樣一個有限的區(qū)域，如果用物理按鍵那么這個區(qū)域只能是固定的功能，而屏幕就可以無限擴展。特別是在汽車中控屏上集成內(nèi)容會很多，體現(xiàn)就更加突出。

但是在汽車上的全部使用屏幕真的是最佳選擇嗎？顯然這是有待商榷的。

不可否認屏幕的確有很強的擴展性，但是缺點也是明顯的：1.觸控反饋缺乏 2.交互效率不高

對于這樣的判斷，我們可以通過兩個實驗來進行驗證。

將類似于 Surface Dial 這種智能按鈕交互裝置引入汽車的屏幕控制中，每個按鈕可以根據(jù)情景進行自定義，并且吸附到汽車屏幕的任何位置進行交互操作，相信這一定是一種全新的使用體驗。當然這一定是需要解決比如吸附力、安全性等一系列問題。

屏幕觸控反饋

雖然目前的屏幕還無法做到完美觸控反饋，但已經(jīng)出現(xiàn)了一些新的硬件技術來試圖解決這些問題，比如 Tanvas Touch，其定義為 「手指與觸摸界面之間的電子壓力控制」。簡單來說他們的產(chǎn)品就 「皮膚的磁鐵」 一樣，能夠更加精準地感應手指的動作，最后結(jié)果就是比 Apple 的 3D Touch 更加具有壓感的觸摸操作表現(xiàn)。

原理是利用手指尖觸摸顯示屏時產(chǎn)生的靜電引力來模擬觸感，通過電磁脈沖把更的反饋發(fā)送到用戶的指尖。

Tanvas 也正在與汽車制造商們合作把這項技術嵌入到汽車或屏幕上，讓人們更容易感觸受到不同物體的表面。

也許在未來我們真的會遇到他。

文章來源：優(yōu)設    作者：殘酷de樂章

掌握好常用的設計理論與心理學知識，能幫助我們對用戶的人性特征的拿捏，幫助我們較大的影響用戶底層決策，以產(chǎn)品實現(xiàn)業(yè)務目標。

一、尼爾森10大可用性原則

1、狀態(tài)可見原則

不局限于：用戶的當前狀態(tài)、知道當前任務要做什么、任務進度等。

2、環(huán)境貼切原則

設計要復合目標用戶的認知，符合用戶的心智模型，于是熟悉的事物越容易被用戶所接受。

3、撤銷重做原則

操作前可預知，操作中有反饋、操作后可撤銷。

4、一致性原則

不局限于：業(yè)內(nèi)產(chǎn)品的一致性、產(chǎn)品內(nèi)的一致性、版本迭代間的一致性

5、防錯原則

錯誤行動發(fā)生前，引導用戶向正確的方向前進；用戶觸碰到危險操作時給予提示；危險操作發(fā)生之后，提供撤回的入口。

6、易取原則

通過使用對象、動作和選項的可視化表達，最大限度地減輕用戶的記憶負擔。

記住用戶的操作記錄、一個流程對應一個操作目標、提供適量的信息、選擇而不是輸入。

7、靈活原則

好的產(chǎn)品需要同時兼顧新用戶和資深用戶的需求。對新用戶來說，需要功能明確、清晰，對于老用戶需要快捷使用高頻功能。不可迎合某一種用戶，把不必要的信息占據(jù)重要部分。

8、易掃（讀）原則

不要包含不相關或低頻次的信息/操作。頁面中的每個額外信息都會降低主要內(nèi)容的相對可見性。

產(chǎn)品設計的四大基本原則：親密性、對齊、重復、對比。

9、容錯原則

錯誤信息應該用通俗易懂的語言表達，較準確地指出問題，并且提出解決方案。避免通過代碼等用戶難以理解的形式

即：提供解決方案、幫助用戶從錯誤中恢復

10、人性化幫助

如果系統(tǒng)能讓用戶不需要閱讀文檔就會使用那是最好的，但通常情況下還是需要幫助文檔的。任何信息應該容易被搜索，且專注于用戶的目標任務，并列出具體的步驟來告知用戶。

二、費茨定律

翻譯成人話就是：

1. 按鈕做大點（W大點）更易于點擊

2. 將按鈕放置在離開始點較近的地方

3. 相關按鈕之間距離近點（D小點）更易于點擊

4. 屏幕的四角與四邊是「無限可選中」位置（非移動端）

5. 通過費茨定律的反向使用，可以降低按鈕被點擊的可能

三、米勒定律

米勒定律預測人的工作記憶能夠記住的項為7(±2)個。1956年認知心理學家喬治·米勒發(fā)表了一篇論文，他討論了短期記憶和記憶跨度的極限。

不要亂用 “神奇的7” 為設計進行不必要的限制；

將內(nèi)容整理為較小的單元，以便用戶輕松地處理、理解和記憶。

比如電話號碼的顯示方式、銀行卡的顯示方式等

四、接近法則

觀察者看到彼此鄰近（空間或時間）的物體時，會將它們視為一個整體。

在界面設計中，對信息的組織已經(jīng)離不開這個法則了，他在界面中所體現(xiàn)的就是把相關的信息塊組合在一起，不太相關的分離開，增強與區(qū)分元素之間的關聯(lián)性，所強調(diào)的是空間和位置。

接近法則產(chǎn)生于群組，它可以減少信息設計的復雜性，對引導用戶的視覺流、便于用戶對界面的解讀起到至關重要的作用。

五、席克定律

希克定律是一種心理物理學定律。用戶所面臨的選擇數(shù)量越多，做出選擇所花費的時間就越長，在人機交互的界面中選項越多，意味著用戶做出決策的時間越長。

六、泰斯勒定律（復雜性守恒定律）

泰斯勒定律又稱復雜性守恒定律，該定律認為每一個過程都有其固有的復雜性，這個復雜性存在一個臨界點，超過了這個點就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。

七、奧卡姆剃刀原理

奧卡姆剃刀原理的核心思想為：“切勿浪費較多東西去做用較少東西同樣可以做好的事——如無必要，勿增實體，即簡單有效原理”。

八、防錯原則

操作前有提示，操作中有反饋、操作后可撤銷。

九、損失厭惡

損失厭惡是指人們面對同樣數(shù)量的收益和損失時，認為損失更加令他們難以忍受。同量的損失帶來的負效用為同量收益的正效用的2.5倍。損失厭惡反映了人們的風險偏好并不是一致的，當涉及的是收益時，人們表現(xiàn)為風險厭惡；當涉及的是損失時，人們則表現(xiàn)為風險尋求。

十、安慰劑效應

“安慰劑效應”指的是，對于某種無效的療法或干預手段，僅僅是“相信它有效”，就能改善健康，并能改變認知

十一、多爾蒂門檻

研究結(jié)果表明，計算機的響應速度直接影響了使用者做出下一個決定所要花費的時間（這個時間被稱為用戶響應時間），換句話說，計算機相應的時間越長，用戶就要花費越多的時間來思考和決定下一步的操作。

合理的操作響應時長、方式有助于用戶保持專注和提率。

軟件操作的過度動畫時間不宜太短或太長，最常見于 400ms 左右。

如果無法避免操作中較長讀取、等待時間，那么就用其他更有趣的動畫、頁面來減少用戶的焦慮感。

十二、馬斯洛需求層次理論

馬斯洛需求層次理論是人本主義科學的理論之一，由美國心理學家亞伯拉罕?馬斯洛在1943年在《人類動機理論》論文中所提出。書中將人類需求像階梯一樣從低到高按層次分為五種，從低到高依次是：生理需求、安全需求、社交需求、尊重需求和自我實現(xiàn)需求。

但最終馬斯洛添加求知需求和審美需求，自此馬斯洛需求層次理論最終定型為8層。

十三、格式塔心理學

格式塔原則描述了當某些條款和條件被應用時，人類大腦如何感知視覺成分。它幫助大腦創(chuàng)造視覺的意象。因此，格式塔原則基于六個主要類別：

位置和位置；

接近；

對稱與秩序；

類似；

關閉；

連續(xù)性。

十四、自我參照效應

第一種是精細加工說：在記憶過程中，這些事物在頭腦中被進行了精細加工，與頭腦中的已有知識之間建立了更多的聯(lián)系，因此回憶時的提示線索更多，回憶效果更好。

第二種是組織加工說：于自我的知識是頭腦中存在的一種結(jié)構(gòu)良好的組織體系，它對與自己相關的事物有更好的固著作用；同時，由于自我知識常常被激活，因此與之相關的信息也更容易被相應地激活起來，這樣回憶起來也就更容易。

第三種是雙過程說：即自我參照任務能提高記憶的機制既包括精細加工因素，也有組織作用的參與

廣告商會挖空心思的建立商品和你的關聯(lián)，告知我們?nèi)绻阗徺I了我的商品，你就會獲得怎樣的好處。而自媒體人則在標題上盡量簡明扼要的說明，我要說的事情和你密切相關，不看就虧了。所以，稍微有深度的文章在快餐式的自媒體平臺中反而閱讀量不高，這是因為文章標題所涵蓋的內(nèi)容可能只和少部分人有關。

十五、上癮模型

1、觸發(fā)：提醒人們采取下一步行動

觸發(fā)分為外部觸發(fā)與內(nèi)部觸發(fā)

外部觸發(fā)又分為：

付費型觸發(fā)、回饋型觸發(fā)、人際型觸發(fā)、自主型觸發(fā)。

內(nèi)部觸發(fā)

內(nèi)部觸發(fā)通過用戶記憶存儲中的各種關聯(lián)來提醒他們采取下一步行動。

比如餓了的時候想起餓了么，想健身的時候想起keep

2、行動：人們在期待酬賞時的直接反應

福格行為模型可以用公式來呈現(xiàn)，即B=MAT。B代表行為，M代表動機，A代表能力，T代表觸發(fā)。要想使人們完成特定的行為，動機、能力、觸發(fā)這三樣缺一不可。 否則，人們將無法跨過“行動線”，也就是說，不會實施某種行為。

比如說中午十一點你餓了想到餓了么訂餐但是由于你的手機沒電了定不了餐，中午要吃飯是動機，訂餐想到叫餓了么外賣是觸發(fā)，能夠用手機訂餐是能力，但是因為手機沒有電 你就缺乏了相應的能力所以這個行為就沒法完成。（當然你也能用朋友的手機訂餐，這里只是舉個例子）

福格總結(jié)了簡潔性所包含的6個元素 ，即影響任務難易程度的6個要素，它們是：

• 時間——完成這項活動所需的時間。

• 金錢——從事這項活動所需的經(jīng)濟投入。

• 體力——完成這項活動所需消耗的體力。

• 腦力——從事這項活動所需消耗的腦力。

• 社會偏差——他人對該項活動的接受度。

• 非常規(guī)性——按照福格的定義，“該項活動與常規(guī)活動之間的匹配程度或矛盾程度”。

四種非常規(guī)的效應刺激動機：

• 稀缺效應：（限量1000件）

• 環(huán)境效應：（同一款啤酒在便利店和高檔就把價格不一，但人們愿意為價格買單）

• 錨定效應：（瑞幸咖啡定價24元的拿鐵對標星巴克的32元拿鐵）

• 贈券效應：（利益進度吸引用戶動機）

3、多變的酬賞：滿足用戶的需求，激發(fā)使用欲

多變性會使大腦中的伏隔核更加活躍，并且會提升神經(jīng)傳遞素多巴胺的含量，促使我們對酬賞產(chǎn)生迫切的渴望。 研究測試表明，當賭博者贏了錢，或是異性戀男性看到美女的圖片時，大腦伏隔核中的多巴胺含量會上升。

多變的酬賞主要表現(xiàn)為三種形式：社交酬賞、獵物酬賞、自我酬賞。那些讓我們欲罷不能的習慣養(yǎng)成類產(chǎn)品或多或少都利用了這幾類酬賞。

社交酬賞

所謂社交酬賞，是指人們從產(chǎn)品中通過與他人的互動而獲取的人際獎勵。比如微信的點贊評論、站酷的推薦，用戶能夠獲得社交的認同。

獵物酬賞

獵物酬賞，是指人們從產(chǎn)品中獲得的具體資源或信息。

自我酬賞

所謂自我酬賞，是指人們從產(chǎn)品中體驗到的操控感、成就感和終結(jié)感。

4、投入：通過用戶對產(chǎn)品的投入，培養(yǎng)忠實用戶

要想讓用戶產(chǎn)生心理聯(lián)想并自動采取行動，首先必須讓他們對產(chǎn)品有所投入。

用戶對某件產(chǎn)品或某項服務投入的時間和精力越多，對該產(chǎn)品或服務就越重視。事實上，有充分證據(jù)表明，用戶投入的多寡與其熱愛某項事物的程度成正比。

1、文飾效應心理

（1）我們總是高估自己的勞動成果。

（2）我們總是盡力和過去保持行為一致。

（3）我們總是避免認知失調(diào)。

2、點滴投入

（1）儲存價值

（2）內(nèi)容

（3）數(shù)據(jù)資料

（4）關注者

（5）信譽

（6）技能

3、加載下一個觸發(fā)

用戶投入的同時也可以通過加載下一個觸發(fā)的令自己重新開始上癮循環(huán)，從而增加了進入上癮循環(huán)的可能性。

十六、雅各布定律

雅各布定律（簡稱雅各布互聯(lián)網(wǎng)用戶體驗法則），它指出如果用戶已將大部分時間花費在某個網(wǎng)站上，那么他們會希望你的網(wǎng)站可以與那些他們已熟悉的網(wǎng)站一樣擁有相似的使用模式。

我們在與新事物互動的過程中，用戶使用的是以往的經(jīng)驗

對設計師來說，我們可以匹配用戶的心智模型來改善體驗。因此，用戶可以輕松地將已有經(jīng)驗從一種產(chǎn)品或體驗轉(zhuǎn)移到另一種上，無需額外了解新系統(tǒng)的工作原理。

當設計師與用戶的心智模型一致時，良好的用戶體驗就得以實現(xiàn)。

十七、KANO模型

KANO模型大家可以看看這個童鞋的總結(jié)很詳細

https://www.zcool.com.cn/article/ZMTAyMjQ3Mg==.html

十八、古藤堡表圖表法

人們在瀏覽頁面或布局時視線趨于從左上角移動到右下角

古騰堡圖表法說明我們觀看頁面的視線并不是鏡面對稱的，我們需要在設計中避免出現(xiàn)此類錯誤但絕不是墨守成規(guī)，將頁面的 Logo放置在左上角而主體向右下角延伸，左下和右上作為視覺的盲點可以添加輔助元素

十九、尼爾森F型視覺模型

尼爾森F型視覺模型由 Jakob Nielsen于2006年提出

他指出，我們在第一次觀看頁面時，視線會呈 F的形狀關注頁面。
1.先從頂部開始從左到右水平移動。
2.目光再下移開始從左到右觀察但是長度會相對短些。
3.以較短的長度向下掃視，形成一個 F形狀，此時我們的閱讀速度較慢，更為系統(tǒng)和條理性。

二十、序列效應

1.在列舉信息時，排在最前和最后的元素，比排在中間的更容易讓人記住。

2.對排在開頭的信息產(chǎn)生加強的回想效果，稱為：初始效應，人們有時候會把最前面的信息儲存在長期記憶中。排在結(jié)尾的信息產(chǎn)生加強的回想效果，稱為：時近效應。時近效應適用于聽覺刺激。初始效應適用于視覺刺激。

3.在列舉信息元素時，如果列舉信息屬于視覺性，那么把重要的信息放在最前面；如果是聽覺性，就放在最后面。如果是用戶必須做決定，并且是最后一項出現(xiàn)后馬上做決定，那么就將想要用戶做決定的信息放置最后，以便增加獲選概率，否則放在最前面。

4. 應用例子：比如在很多app產(chǎn)品設計時，個人賬戶與設置基本放在頁面的最前面和最后面，這體現(xiàn)著產(chǎn)品信息的序列關系，重要次序，所以在進行設計時，可以在信息排序上遵循序列效應。 當然還有一些產(chǎn)品想對用戶進行引導操作，也可以利用這個法則，將信息放置最前或最后。

轉(zhuǎn)自：站酷-YELLOW_J 

前言：

什么是產(chǎn)品的信任感？？

指：基于產(chǎn)品為用戶提供‘可靠服務、價值依賴’的一種情感體驗。

這種體驗不僅影響著用戶黏性的強弱、業(yè)務目標的實現(xiàn)，也影響著不同生命周期下給產(chǎn)品給來的價值。如圖：

而在產(chǎn)品與用戶間建立信任感的過程中，我驚奇地發(fā)現(xiàn)有3個因素貫穿始終：理念 > 內(nèi)容 > 表現(xiàn)。

‘基于什么樣的理念，向用戶傳遞什么內(nèi)容，并且怎么表現(xiàn)?！?/strong>

所以，未來3篇文章主要圍繞‘信任感的打造’，希望能系統(tǒng)性地認識它，挖掘更多工作上可實用的小技巧。

今天先分享第一篇：信任感的理念層

信任的本質(zhì)：是讓人覺得真誠、可靠、放心等。換句話說，它就是一種‘為用戶著想，建立產(chǎn)品溫度’的理念/方向，從而引導后續(xù)的內(nèi)容都圍繞該理念而進行。

那么，如何才能為用戶著想，慢慢建立起對產(chǎn)品的信任感呢？？

既然為用戶著想，那么可以試著從‘減少用戶的投入成本’切入。

Part1：減少健康投入

健康投入，指用戶使用我們的產(chǎn)品，可能會對身體上帶來直接或潛在的負擔/影響。比如視頻看久了，眼睛就會感到酸痛。

針對這些負擔與影響進行的一些關懷提示，可以用戶提前消除、減輕這些痛苦，拉進與用戶間的距離。

不同產(chǎn)品類型擁有專有的關懷點，所以比較通用的主要有5個：使用時長、使用姿勢、夜間休息、夜間護眼、音量大小。

a.使用時長提示：

除純工具類產(chǎn)品之外，大部分用戶在產(chǎn)品上都有一定的使用時長（尤其是內(nèi)容消費類產(chǎn)品），對于‘連續(xù)使用N分鐘、或者滿足特定時長’的用戶，可針對該時長進行休息提示。

如有道精品課，在用戶觀看課程滿40分鐘 時有個時長提醒：

b.夜深關懷提示：

深夜本身是一個休息的時間，但還是有大量的‘夜貓子’根本停不下來。不管是主動性的娛樂消費，還是被動性的信息/工作處理，都將手機‘進行到底’。

此時對于‘深夜忙碌’中的用戶，夜間的關懷就是一個切入點：比如企業(yè)微信，會在深夜啟動頁上展示 ‘夜深了，xxx’的文案提示。

雖然只是簡單的一句話，但還是能感受到鵝廠對員工的關懷。

而且不管是C端還是B端，只要有用戶在深夜使用產(chǎn)品的可能，都可針對性地給予關懷設計，體現(xiàn)產(chǎn)品的‘人性’。

c.夜間護眼提示：

夜晚周圍的光線會變得幽暗，部分手機屏幕會自動變亮。時間一長會嚴重刺激用戶雙眼，并造成視覺疲勞（尤其是小學生群體）。

此時對用戶進行護眼提示，不失為一個用戶關懷點。

再如有道精品課：

d.使用姿勢提示：

我們?nèi)粘６紩⑹謾C橫過來看視頻、看八卦。而且相信各位都有過這樣的經(jīng)歷：

當手機長期處于某個屏幕狀態(tài)+重力傾向時，用戶難免會出現(xiàn)手酸脖痛的情況。

此時進行使用姿勢的糾正提醒，亦能起到關心用戶的效果，從而建立良好的產(chǎn)品印象。

還是以有道精品課為例：

e.音量提示：

這個大伙都知道，過大的音量會影響耳朵聽力。一般出現(xiàn)在各種音頻、視頻的產(chǎn)品與功能中。

Part2：減少金錢投入

沒有人不會在意自己的錢包（除非你是對錢不感興趣...），金錢上的收入與支出很大程度上會影響 人們對某事物的看法。

產(chǎn)品也是如此，若能幫用戶減少金錢上的支出，或者帶來真實收入。不僅能極大提升用戶對你的信任度與黏性，還能增加產(chǎn)品的競爭力。

比如高德地圖的打車功能，能顯示所有車型的價格預覽，幫助用戶選擇所需價格的車型。

無論是商品優(yōu)惠券，還是返利。

只要能幫助用戶錢包上的‘節(jié)源’或‘開流’，都能引發(fā)用戶的信任感，從而信賴產(chǎn)品。

Part3：減少情感投入

情感投入，是指用戶基于內(nèi)心活動和情緒感受，對某事物所表現(xiàn)出來的一種想法。

這種想法制約著 用戶是否接受我們的產(chǎn)品服務。一般體現(xiàn)在：安全性、性價比、真實性 3個方面。

a.安全性 - 放不放心：

人們面對某事物 可能會帶來的傷害/損失時，都會有一種本能的“警惕感”。

就拿此次疫情來說，對于有‘出差住房’訴求的用戶來說，‘住的安全’是重中之重。因此尋找一家‘無感染、每日消毒、衛(wèi)生干凈’的安全酒店，可以減低用戶選擇我們的警惕感。

而在酒店列表中，帶有‘嚴格消毒’、‘健康守護’等安全標簽的酒店，會給人帶來一種安全、放心、信賴的心理效應，從而提升該酒店的轉(zhuǎn)化率。

b.性價比 - 值不值得

性價比是人們衡量‘付出成本與回報價值’間的一種決策依據(jù)，沒有誰會喜歡付出小于回報的事物。

而為了讓用戶降低這種決策依據(jù)，除了自我服務/實力的展示外，往往需要一種“參照物”來凸顯性價比。

如美團上的‘滿減神器’，通過不同的食物/價錢間的對比，讓用戶買到最具性價比的食物。

而“參照物” 的形式多種多樣，不管是競品數(shù)據(jù)。

老版本也屬于一種競品

還是是各種優(yōu)惠信息、額外禮物/禮包、售后服務等等。

目的都是通過該參照物，向用戶傳遞一種‘劃算’、‘值得’的心理效應。

c.真實性 - 真不真實：

光是性價比高還只是片面依據(jù)，至于內(nèi)容是否屬實，成為了我們與用戶建立信任感 中最重要的影響因素。因為沒有人喜歡被騙、喜歡虛假事物。

而真實性的建立，在‘電商領域’應該被運用得最多。如大牌背書、證書授權、專家介紹、明星代言、官方保證、銷量成績、用戶反饋...等等。

展示自己的真實、最具實力的一面即可，別過度吹噓與包裝，用戶又不傻。

Part4：減少腦力投入

人們一向不喜歡復雜的東西，除了不易理解外，更擔心因為自己的理解錯誤，會給帶來意外的損失。

幫助用戶減少記憶負荷、順暢完成操作目標，是每個產(chǎn)品必不可少的設計點。

如微信轉(zhuǎn)賬，輸入數(shù)字時會檢測對應的數(shù)額，減去用戶邊輸入 邊計算“這是多少錢”的腦力投入。

而且對比支付寶的轉(zhuǎn)賬，微信這點確實做到了‘洞察用戶需求’。

再如賬號注冊，提供‘剩余步驟’能讓用戶了解 當前處于哪一步、預測完成整個操作還需多久。

Part5：減少體力投入

除了記憶負荷，‘操作負荷’的減少也是一種‘為用戶著想‘的方式。我們身邊也存在太多這方面的例子：

如手機上，如淘寶的快鏈彈窗、支付寶的轉(zhuǎn)賬提示，都是前置用戶的目標，縮短操作流程。

如電腦上，如Mac會保存耳機音量。

下次插入耳機時，會將揚聲時的音量，自動調(diào)整至上次耳機插入時 所記錄的音量。這樣就免去了重新調(diào)整音量的操作。

以網(wǎng)易云音樂為例：注意 揚聲時和耳機插入后 的音量變化.

這些都是幫助用戶快速使用，從而減少體力操作的方式。除了前置用戶目標、保存記錄 外，常見的還有：給予默認值、自動選擇/處理、多選與批量等等。

總結(jié)：

以上就是關于理念篇的內(nèi)容，讓今后的內(nèi)容設計有了明確的方向。下面是走查表，平時設計功能、制作界面的時候可以看看，增加產(chǎn)品的溫度。領取方式：公眾號回復【信任1】

轉(zhuǎn)自：ui中國-