本文就UI界面中常見的指示性設計元素做了一些整理，希望可以幫助到各位設計師。
什么是指示性設計元素？
眾所周知，道路上的指示標志是用來指示車輛和行人該如何通行。同理，在UI界面中，指示性設計元素就是用來告知、引導、指示用戶的設計元素，因此，只要是在視覺上可以提示特定的交互或內容，從而讓用戶更快、更輕松地注意到，比如CTA按鈕，文本提示等，都屬于指示性設計元素。
指示性設計元素是如何影響用戶體驗的？
大多數情況下，往往只需要幾秒鐘時間，用戶就已經決定了要不要使用你的產品。因此，頁面的邏輯是否清晰，結構是否明確，重點是否突出，指示性元素的引導是否合理就顯得非常重要。
指示性設計元素是我們今天討論的重點，它對用戶體驗的影響是多方面的，使用正確的指示性設計元素可以：
- 方便用戶快速瀏覽頁面
- 加強頁面視覺層次感
- 提供更便利的導航
- 提高頁面轉化率
關于指示性元素和用戶體驗之間的問題，CXL Lnsitute曾經做過一個很有名的實驗。這個研究小組做了很多個不同版本的落地頁面來進行測試，根據用戶行為收集了大量的用戶交互數據，并進行了準確分析，發現不同的設計對用戶行為、用戶在頁面的停留時間以及頁面轉化率都大有影響。
CXL Lnsitute用于測試的落地頁面如下：
1）界面中人物視線偏移表單：
2）界面中人物視線聚焦在表單:
3）界面中有箭頭指向表單：
4）界面中沒有任何指示性設計元素：
5）界面中通過深色背景突出表單：
6）界面中有一個三角指向表單：
測試結果顯示，落地頁的熱點圖差距非常巨大。
首先，帶有手繪箭頭的頁面熱點圖如下：
該頁面用戶的停留時間最長，并且表單的點擊次數最多。
其次，人物視線偏離表單的頁面熱點圖如下：
該頁面，用戶的注意力也完全脫離了表單。
可見，指示性設計元素對用戶行為和頁面的轉化率有著非常重大的影響。
常見的指示性設計元素
一、箭頭（Arrows）
箭頭是最受歡迎的指示設計元素之一，它通用、明顯、易懂。不同年齡、不同文化、不同教育程度以及不同技術涵養的人都可以理解。前面提到的CXL Lnsitute的測試也驗證了這一點。
- 家居裝飾電子商務網站
使用箭頭作為交互元素的視覺提示：
- 外賣網站
左右各有一個箭頭，提示用戶可以選擇更多：
- Dance Academy著陸頁
使用箭頭提示用戶頁面在水平方向上存在交互:
- Tubik Studio團隊設計的網站
底部箭頭提示用戶可以滾動鼠標瀏覽頁面：
二、手型（Pointers）
如果你不想用箭頭這類具有強指示性的元素，可以考慮使用手型提示。回想一下，如果有人想讓你看某樣東西的時候，他是不是會用手直接指向該物體？在web或app界面中也一樣，想要引起用戶注意，也可以用“手”直接指出來。這樣，不僅可以把指示性元素和整體的視覺效果融為一體，還非常巧妙地提供了優雅的視覺提示。
- 某招聘藝術家平臺的著陸頁
使用了插畫元素，不僅提升了界面的美觀度，插畫人物的視線和手勢也正好指向了關鍵信息和CTA。
- 某郵件服務登錄頁面
該頁面的指示性設計元素實在很巧妙，不易發覺，卻又能把全部的注意力都集中到一點上——FREE SIGN UP。如果你仔細觀察，每個元素，無論是紙飛機的朝向，還是花朵延伸的方向，全部都指向了CTA。
- 行李托運網站登陸頁面
使用了插圖，人物和飛機都指向了頂部最右側的CTA，也就是BOOK YOUR TRANSFER這個按鈕。
- 郵件管理系統登錄頁面
該頁面的人物手勢和其他構圖元素，都把重點指向了首頁大標語。
三、視線（Eye line）
視線是建立在人類自然反應之上的一種強大的指向方式。當看到別人的目光集中在某個點或某個物體上時，我們會自然而然地產生好奇心，他們在看什么？人類的這個心理反應經常被用在視覺內容設計中，包括攝影、插圖等，最后在UI界面也被廣泛使用。
- 美發美容公司網站主頁
使用了首頁大圖，該模特的視線向下方看，視線的焦點停留在CTA上。
- 約會應用程序的登錄頁面
使用了帶有文本的插圖，人物的視線正在看向文本內容。
- 銷售發飾的電子商務網站
使用了精美的插圖，界面中人物的視線集中在首頁標語上。
四、視覺提示
箭頭可以提示用戶進行某種交互，很多其他元素也可以用于提示用戶，比如，表示交互類型的圖標或插圖。此外，鼠標還可以提示用戶滾動頁面，手勢動畫可以提示用戶滑動，總之，他們都可以幫助用戶順利地了解和探索你的頁面。
- 某建筑設計工作室的網站
底部有一個鼠標形狀的圖標，告知用可以嘗試向下滾動：
五、呈現部分內容
交互過程中可能出現這樣的問題，當頁面布局看起來很完整并且滾動鼠標時無法加載更多內容時，用戶會以為他們已經看到了全部內容。
對于這種情況，有一個很棒的解決辦法，可以在屏幕上可見區域的最下方顯示的一部分內容，這樣，用戶就不會遺漏任何重要信息了。
- 時裝模特網站
網頁的底部區域展示了部分照片，提示用戶可以滾動查看更多：
- 外賣網站
在頁面底部顯示菜品的一部分，提示用戶可以滾動查看更多；此外，使用箭頭作為方向提示，告知用戶水平方向上也會看到更多信息：
總結
以上就是本次分享的一些指示性設計元素，其實這類的設計元素還在不斷的創新中，如果你有更多的想法，歡迎和我們交流。總之，盡管指示性設計元素的表現方式多種多樣，但它們最終的目的都是引導用戶，為用戶提供更好的用戶體驗。設計師在設計過程中，自始至終都要銘記這一點。
原文地址：tubik blog
譯文地址：摹客
作者：Marina Yalanska
譯者：摹客
按鈕交互的設計由來
為了設計合適的交互方式，我們需要回顧實體按鈕的發展歷史，作為UI組件之一的按鈕來源于實體按鈕，現在廣泛用于互聯網產品中。按鈕非常神奇，只需手指觸摸，就可以打開一個APP、啟動汽車或者一個系統，即使用戶不懂背后的原理。在《Power Button》這本書里，Rachel Plotnick研究了今天按鈕操作的文化起源，描述了按鈕成為互聯網產品的命令方式，可以實現毫不費力控制。
“你只需按快門，其余的我們來做。”—柯達相機用抓人眼球的口號來吸引潛在的顧客。
這正是迄今為止，按鈕吸引用戶的地方，只需簡單的觸摸，就能獲得處理事件的滿足感。即使很多新家電和其他設備都進化為了觸屏操作，實體按鈕卻并沒有完全消失，其塑造的行為習慣仍然影響按鈕設計的直觀性和易用性。
按鈕與鏈接的區別
按鈕傳達了用戶可以執行的操作，它們通常在UI界面中，比如：對話框、表單、工具欄等。區分按鈕和鏈接特別重要：
鏈接：用于導航到另一個位置，比如：“查看全部”頁面、跳轉另一個位置等。
按鈕：用于實現一個操作，比如：提交、合并、新建和上傳等。
按鈕的多種狀態
設計正確的交互和樣式，對按鈕設計十分重要。按鈕每個狀態必須可識別，要顯著區別于其他狀態和周圍的布局，但是也不能完全改變組件或者制造視覺混亂。
普通狀態：可交互和可用的狀態。
焦點狀態：用戶使用鍵盤或其他輸入方法來突出顯示一個元素。
懸停狀態：用戶把光標置于可交互元素上的狀態。
觸發狀態：用戶已點擊按鈕后的狀態。
加載狀態：當操作沒有立即實現時，表示正在進行的狀態。
禁用狀態：按鈕目前不可交互，但以后可以使用。
按鈕的多種樣式
最常見的是圓角按鈕，可以輕易識別，并且在輸入字段旁邊看起來不錯。為按鈕選擇正確的樣式，取決于目的、平臺和規范。以下是一些最流行的樣式：
不同樣式的優先級
樣式最初是用來區分操作的優秀級。明確操作的優先級，可以在眾多的選擇前，引導用戶。通常，要有一個突出的按鈕（主按鈕），幾個二級按鈕，還有三級按鈕。
有時不需要默認按鈕
通常，把最常用的按鈕設置為“默認”（使用主樣式）和選中的狀態。這樣可以幫助大多數用戶，更快完成他們的任務，引導正確的方向。
此外，當選擇同等重要時，或者操作存在危險，在這些情況中，需要用戶明確按鈕的選擇而不是意外選擇。
別讓用戶思考
Don’t make me think（別讓用戶思考）是可用性工程師Steve Krug所著的書的名字（中文《點石成金：訪客至上的網頁設計秘笈》）。其中指出，觸屏是為了讓界面更明顯，而不是讓用戶產生困惑。基于多年使用不同的設備和其他產品，用戶養成了對按鈕外觀和功能的特定期待。如果和“標準”按鈕的樣式差別太大，就會讓用戶遲疑和困惑。
不要對可交互和不可交互的元素，使用相同的色彩。如果可交互和不可交互的元素，使用相同的色彩，會讓用戶不知道點擊哪里。
一致性提高效率和準確性
“一致性是最有力的可用性原則之一：當元素一直都是統一的樣式，用戶就不必擔心突發事件。” — Jakob Nielsen
一致性提高速度和準確性，避免錯誤。創建可預測性可以幫助用戶獲得掌控感，在產品中實現他們的目標。在創建主要、二級和三級樣式時，嘗試找到一些共同的元素，比如：色彩、形狀等。嘗試不僅對設計的系統保持一致性，對平臺也要保持一致性。
按鈕的交互熱區尺寸
按鍵應該是一個簡單的任務，如果用戶點擊按鈕失敗，或者誤點到了旁邊的元素，會導致不好的體驗和浪費時間。
對于大多數平臺，觸屏的區域至少為48x48dp。交互熱區的尺寸應該是至少9mm，不論屏幕的大小。推薦的觸屏元素的尺寸，至少為7-10mm。
對于icon按鈕，確認交互熱區大于元素的視覺邊緣。這點不僅適用于手機或平板，同樣的推薦尺寸也適用于對于網頁的點擊設備，比如鼠標。
按鈕的可用性
所有組件都應該注意設計的可用性。交互熱區是影響可用性的一個因素，其他因素還有字體大小、色彩和對比。許多工具可以幫助你輕松檢查組件設計的實現效果。
設計師應該和開發團隊緊密合作，以確保按鈕的正常使用。按鈕作為一個可點擊的元素，在用戶觸發時，給予反饋。用戶通過按鈕這個元素，可以實現交互控制。
按鈕的交互手勢
通過手勢操作，用戶可以和APP進行交互。觸摸作為實現操作的另一種方式，可以節省時間，獲得觸覺的掌控感。雖然一些手勢，比如滑動引出相關的操作、雙擊點贊或長按，現在越來越廣泛地使用，但對于普通用戶，這些手勢不太明顯。建議使用手勢作為替代的方案，供高級用戶使用。
按鈕的文案
按鈕文案和樣式一樣重要。使用錯誤的文案，會讓用戶困惑，浪費時間，也會誤操作。
一個好的按鈕文案，可以引導用戶操作。最好使用動詞，告訴用戶在做什么。就像這個按鈕在詢問用戶，“你想收藏嗎？”或者“你想確認命令嗎？”
避免使用“是”或“不”，或者太通用的，比如提交。
按鈕的位置
確認和取消的按鈕，哪個放在右邊，設計師們因此而爭論不休。
- 確認按鈕放在左邊，符合正常的閱讀順序。如果我們知道用戶最可能的選擇，可以幫助用戶節省時間。Windows系統將確認的按鈕放在左邊。
- 確認按鈕放在右邊，優化流程。將確認按鈕放在右邊，可以幫助用戶在操作前，評估所有的選擇，避免錯誤和沖動決策。蘋果系統將確認按鈕放在右邊。
兩個選擇都有理由，并且也不會造成使用困難。我個人傾向于放在右邊，在活動列表或者對話框，可能因為我常用Mac系統。
按鈕的禁用設計
每個人都遇到過禁用按鈕，被困在當前頁面幾秒鐘或幾分鐘，嘗試弄清楚為什么禁用按鈕妨礙了當前進程，然后要怎樣重新開始。禁用狀態提示組件當前不可交互，但是以后可以。為什么使用禁用按鈕呢？因為如果從原來的位置上移除按鈕，或者在上層用內容覆蓋掉按鈕，會給用戶帶來困惑。
我建議，避免使用禁用按鈕。最好讓按鈕永遠可以使用，如果用戶沒有提供必要的信息，只需高亮強調空白的輸入區域，或者提醒用戶。
ps：material design中懸浮按鈕、拖拽狀態，可以了解一下
原文鏈接 | https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
來源 | 彩云譯設計 （id:caiyunyisheji）
本文原作者 | Taras Bakusevych
本文譯者 | Bravert
]]>身為用戶體驗設計師，無時無刻不被世界上的新事物沖刷著認知——互聯網紅利下降帶來變化莫測的商業動向、循著摩爾定律野蠻生長日新月異的新技術、各類亞文化群體催生出多元復雜的圈層文化、腦洞口味越來越獨特的年輕人，甚至眼下席卷全球的黑天鵝事件……
任何一個新事物的悄悄冒頭，都有可能在未知的將來影響著用戶體驗設計師。我們能做的是，在起初感受到微微震幅時，便沿著震感逐步尋找源頭，并思考未來的發展走向。趕在變化降臨前先擁抱變化。
本文通過研究近一兩年科技、社會文化以及自身用戶體驗領域的變化，從用戶體驗領域關鍵的用戶、媒介(設備與應用）、交互行為、信息與場景的五個角度出發，探索用戶體驗設計未來的趨勢，希望能帶來啟發。
更智能的服務提供方式
隨著人工時代到來，過去機械的單向交互方式逐漸被打破，機器漸漸演化成了會主動「觀察」真實場景，「感受」用戶情感，預判用戶意圖并自動完成任務的貼心小棉襖。機器如何為人們提供更智能便捷的服務，未來還有非常大的想象空間。
1. 基于真實場景推理用戶意圖
隨著AI技術的發展，智能設備可以越來越無縫地將數字世界和物理世界嫁接起來，主動感知用戶所處情境并智能提供相應服務。
在2019的 Google I/O 大會上，Google Lens 展示的AR點菜功能可以智能識別用戶掃描的菜單并將美食網站上的相關推薦直接呈現在屏幕上。
當用 Google Lens 識別到小票信息時，可快速提取小票上的金額，且可自動彈起計算器快速幫助用戶計算人均消費，節省人工計算的時間成本。
隨著信息入口從數字空間延伸到周圍的物理空間中，未來萬物皆可為用戶體驗的媒介，設計師未來在設計的時候需要注意：
尋找適合的打通真實世界的切入點：在陌生語言、信息復雜或者難以處理等苛刻的環境下，充分發揮智能設備對信息智能讀取、批量識別與翻譯等強大能力，幫助用戶高效完成任務；
將用戶旅程的上下游串聯：根據生活常識和經驗預判用戶行為目的，前置推薦服務；
更加系統細心地考量干擾因素：真實場景是動態變化的，需要更全方位考慮光線的強弱、多源的噪音、實體的可視性、人員和事件的打斷等因素。
2. 任務自動化，簡化用戶旅程
為了完成一項任務，用戶往往需要借助多個應用來回切換配合，使用起來瑣碎麻煩。如今應用越做越強大也越復雜，過去僅僅解決單一場景的解決方案不再適應于用戶對于高效完成任務的訴求。
Google Assistant 的新能力 Duplex on the web 可以通過自動跨應用任務處理來簡化用戶旅程。只需要用戶發出語音指令「預定一輛去某地的車」，助手便可自動跨郵件、日歷、付款等應用調取信息、自動根據使用習慣做選擇，并自動填寫信息，而用戶全程需要的只是在關鍵節點輕敲「確認」即可。
2019年隨著 iOS 13 的更新，「快捷指令」推出了「自動化」能力，用戶通過「if…then…」語法便可為自己的App設計一套程序，實現如：「當我回到公司時提醒我打卡」、「每天早上10點給我的女朋友發送一條表白短信」等能力，將不相關的場景動作串聯字一起自動化執行，大大節省人工操作成本。
提升使用效率是用戶體驗設計孜孜不倦努力的方向之一。在利用新技術進一步簡化用戶旅程時，設計師可以充分利用以下因素：
借助語音輸入：比起界面觸控操作，語音交互的直達性可以「穿透」復雜界面，讓設備第一時間明確用戶目標；
基于用戶行為形成習慣記憶：對用戶長期重復的行為做分析處理，構建用戶習慣模型并主動提供服務；
適當考慮專家級用戶：隨著部分用戶的智能設備使用水平越來越高，可以考慮為專家用戶提供自定義操作腳本，滿足其自身的獨特需求。
3. 基于情感感知，主動理解用戶需求
隨著人臉識別、表情識別、肢體跟蹤等技術的提升，機器逐漸學會感性語言，主動感知用戶內在情感和心理需求。
2019年1月的CES展上起亞亮相的互動式「情感駕駛空間」技術，可通過傳感器讀取用戶的面部表情、心率等反應，調整駕駛空間內的燈光、影片類型、音樂風格等，舒緩艙內乘客心情，由此提供更人性化的出行體驗。
用戶總是會期待更貼心的服務，設計師未來對同理心的情感嗅覺更加敏銳：
利用感性線索定位用戶情緒：需要通過面部表情、特殊時間節點或者識別到的關鍵詞，對用戶情緒進行理解和定位，判斷用戶情感理解用戶內心訴求是自由探索、趣味娛樂、或者靜謐修行并提供符合用戶當下心境的服務。
綜合使用感性元素進行設計：通過使用線條、色彩、聲音和動作等傳達并喚起相對應的情感，提供更加人性化的體驗。
4. 小結
更智能的服務提供方式會讓人們生活擁有更多可能性，但一旦火候把握不得當，可能就會造成對人們生活的野蠻入侵。關于如何讓科技更好造福于人們，早在上個世紀，施樂帕克研究中心提出了寧靜技術（Calm Technology）的愿景，認為影響最深遠的技術應該是隱匿不見的，它們如纖維般融入日常生活，絲絲入扣，直至不可分辨。
隨著科技的發展，設計師對新技術不應是不加克制地應用，而應該潤物細無聲般地提供服務，幫助人們從繁雜喧囂的數字世界中解脫出來，將寶貴的注意力資源投放在讓生活更美好的事物上。
更自然豐富的交互方式
回顧人類和機器的交流語言，從命令行界面、圖形用戶界面到自然用戶界面，人機交互方式越來越貼合人與人之間更自然的交流方式，其背后是心智模型與實現模型的高度擬合的趨勢。
在自然用戶界面中，為滿足新形態智能硬件對新接口的需求，以及人們對更豐富強大的交互方式的自然訴求，越來越多的自然用戶界面被開發出來。語音交互和隔空手勢交互便是近幾年迅速發展并落地的兩種交互方式。
1. 隔空手勢交互：更自由、更靈動
為了讓機器更好地讀懂用戶的身體語言，能夠感知深度信息的攝像頭走進了日常手機。2019年國內外手機廠商的發布大會上，LG 手機 G8 ThinQ 以及華為發布 Mate 30 系列推出的隔空手勢，可實現一些簡單的諸如滑動、切歌、截屏等效果。
除此以外，隔空手勢支持更加細微的手勢，如旋轉、揉搓等，可以更直觀、更靈活的方式操控界面，讓用戶獲得一種像魔術師用意念控制事物運作的快感。
對于隔空手勢操作網上的言論褒貶不一，其中爭議性最大的就是隔空手勢宛如「殺雞用牛刀」，明明可以用更加精準的手勢觸控，為什么還要用看似很酷炫其實精準度更低的隔空手勢操作？
隔空手勢并不是要替代觸控手勢成為主流的人機交互方式，更多是對情境式障礙場景的補充。在某些場景下，用戶使用設備的條件可能是充滿干擾的。想想看當你邊看手機食譜邊炒菜的時候、邊煲劇邊剝小龍蝦的時候、疫情期間出門佩戴橡膠手套無法正常觸控手機屏幕時…..隔空手勢是不是特別好用？
每個人在特殊的場景下都有可能面臨感官障礙，未來的設計也應該更多地考慮情境式障礙的場景，讓用戶無論身處何時何地依舊能一如既往無障礙地使用設備。
2. 語音交互：更精準、更好玩
語音交互作為更趨近于人與人之間最自然的交流方式，近些年有許多發展的突破點。
在發展主線上，語音交互趨向更自然、更人性化、更個性化。過去反人類的一些溝通方式慢慢被「調教」。此外，多人會話場景下的技術方案日漸增多。
2019的 Google I/O 大會展示了一個視頻片段，視頻中的兩位嘉賓相繼吐槽，經常出現針鋒相對難以聽清的時候，這時用戶可以調節音源音量選擇性增強自己關注的人物聲音，讓另一個人「靜音」。
△ 滑動選擇音源
此外，語音交互除了在智能音箱領域廣泛應用以外，也逐漸應用在廣告等更多的傳播媒介中，刷新人們日常使用體驗。2020年2月索尼提交了一項廣告播放新專利。當用戶在觀看電視節目時，如果出現廣告，只要站起來大喊廣告中對應品牌的名字，便可直接跳過這個廣告。
設計師在語音交互場景下，需要留意以下幾個比較容易被忽視的因素：
用戶語音交互習慣培養：如今還處于培養用戶語音交互使用習慣階段，設計師需要更多地考慮應用的語音交互規則如何才能更趨近于人們日常的溝通習慣，并進一步為人們的社會習俗所接納。
真實場景下的多人音源：在現實情境中， 在多人對話場景下將面臨音源不清、穿插停頓、噪音過多等影響體驗的情況，由于計算機聽覺分析能力開始從單人音源拓寬到了多人音源，多人對話解決方案上還有很大想象空間。
改變傳統的視聽體驗：在使用場景上，語音交互接口也將逐漸運用到更多的媒介上，更全面地刷新用戶體驗。
3. 小結
人類擁有雙手、眼睛、耳朵和發聲的嘴巴，但是并不總是在每個使用場景下都能自如地使用：在安靜的自習室下聲音收到限制，在駕駛場景下注意力受到限制，在雙手拎著東西場景下雙手受到限制……但目前許多產品設計都建立在用戶能完整使用感官功能這一理想化的基礎上。
未來的發展趨勢傾向于將視、聽、觸、嗅等多通道信息完美整合起來，綜合使用多種輸入通道和輸出通道，根據用戶使用場景用最恰當的方式傳遞服務，滿足用戶多方位的需求。
硬件形態帶來新的挑戰
盡管喬布斯曾斷言3.5英寸是手機的黃金尺寸，但作為人們日常內容消費與娛樂的窗口，手機屏幕毫無疑問地變得越來越大，甚至超出傳統物理限制。人們對大屏享受的追求與設備攜帶便捷性之間的矛盾由來已久，硬件形態的變化對舊有的用戶體驗設計思路帶來的新的挑戰。
1. 大屏幕：單手持握新挑戰
屏幕橫縱比越來越大，而人類的手部具有先天限制，曾經慣用的界面布局方式在高橫縱比的屏幕上可能無法被大拇指無障礙全覆蓋，使得越來越多的設計更加重視利用移動屏幕下半部分。
操作與信息進一步下移：
高德地圖、蘋果地圖的搜索框下移，方便單手操作用戶快速激活輸入框；
影視資訊平臺IMDB強化底部標簽欄功能，雙擊「搜索」tab即可激活輸入框，無須艱難地觸摸頂部。
即時戰斗類手游皇室戰爭的說明卡片主要展示在下半部分，方便用戶進行卡片上的相關操作。
底部導航被賦予更多能力：
Pocket的底部標簽欄現在兼任漢堡菜單功能，在激活狀態下再次點擊主頁icon可選擇主頁上須展示的內容。
利用下滑手勢代替點擊：
Snapchat的許多表示前后進退關系的頁面都不是」返回「按鈕，而是向下箭頭，用戶可下滑退出當前頁面。
2. 折疊屏：新形態的交互方式
為了解決設備形態和人類手部先天限制之間的矛盾，折疊屏誕生瀏覽并顛覆舊有的界面設計方式。
更靈活的信息布局
過去在單屏設計下，考慮到用戶注意力由上到下縱向衰減，因此信息布局更多是按照優先級從上往下排序。而折疊屏中，屏幕展開后便可以開辟出更大的可利用空間，將次級頁面或者較為重要的內容曝光在第二屏，對信息的布局將帶來全新的變化。設計師為保證大小屏下順暢的閱讀體驗，需要對信息模塊在不同空間布局下的流動性有更強的把控能力。
更便捷的多任務操作
在過去的單屏體驗中，用戶只能將注意力完全集中在當前的界面中，一次只做一件事。但在實際生活中，用戶面臨的情景往往是主線任務和支線任務的頻繁交錯，并且根據會任務不同的性質自由調動自己的注意力重心，如邊看視頻邊聊天、邊看直播邊逛街等等。在折疊屏中，設計師可以探索更多主線和支線交錯進行的場景，利用折疊屏帶來的更大的屏幕空間，可以讓用戶在不離開主線場景的基礎上進行支線任務的處理，大大節約了在不同App上來回切換的操作成本。
更直觀的拖拽交互
此外，隨著多任務處理越來越廣泛使用，拖拽交互將成為重要的交互模式之一。文本、表情包、圖片、視頻等交互對象，不再需要經過復雜的分享轉發流程才能在不同App中流轉，通過拖拽的方式可以更直觀地進行交互。
雙面屏互動玩法
外折疊屏在折疊狀態下可轉為雙面屏，等于是給用戶增加多一個觀看視角。例如華為 Mate X 的鏡像拍攝可以讓被拍攝者即時獲知自己的鏡頭影像是否滿意，這一拍女友神器有望成為直男拍攝終結者。在未來更多的多人觀看和互動玩法將被開拓出來。
△ 華為Mate X 的鏡像拍攝
未來隨著5G通訊技術的成長，越來越多的設備可以同時加入物聯網，人們的生活將被各種智能設備圍繞，設計師需要參與更多屏幕外的設計，讓不同設備串聯在一起協同合作，讓用戶能更加自在地享受科技的便利。
疫情催生新的線上體驗
席卷全球的新冠疫情讓數十億用戶乖乖待在家里。過去需要花費大量精力去教育的用戶使用習慣因為疫情紛紛轉變。云購物、云蹦迪、云賞櫻、云監工……人們足不出戶便可還原許多線下場景。隨著用戶線上和線下生活的界限進一步模糊，用戶對于應用的效率和情感訴求也發生了變化。
1. 更關注效率導向
疫情讓遠程辦公學習需求劇增，多人協作場景越來越頻繁，許多企業隨之升級了電話、視頻會議、文檔制作等多人協作效率軟件。過去僅僅考慮少人場景協作的方式不適用，設計師需要比以往更多地考慮多人協作場景下，如何對海量密集的信息進行分析處理和展示。
在學習方式上，由于線下學習轉移至線上，學生群體對于娛樂向軟件也有了效率訴求。為了順應用戶訴求變化，2020年5月QQ推出學習模式，屏蔽娛樂性的內容推送，讓學生更專注在學習上。
2. 更注重緩解社交疏離感
除了效率訴求急劇提升以外，隨著長時間的線上學習與辦公所產生社交疏離感和缺失感，人們對于線上學習工作的情感化訴求也進一步增強。
2020年推出的plagi遠程辦公軟件支持設置每個人的avartar形象，讓大家在遠程辦公時依舊能時刻感受到彼此的存在。在完成任務時還可以放鞭炮慶祝，讓員工能感受到親密無間的線上辦公體驗。
設計師需要更加關注如何讓線上生活進一步與現實生活圈和時間線接軌，通過拓展真實社交下的更多伴生行為讓線上也能還原線下的真實場景細節和互動體驗，以彌補用戶對真實社交的缺失感。
3. 加速人和信息的強連接
疫情的發生加速了人與信息之間的連接。人們越來越習慣將自身的身體資料、心情狀態等信息沉淀在智能設備上。
為了做好廣大市民群眾的健康監測服務，輔助疫情防控工作，微信和支付寶在2020年年初都上線了健康碼服務，不同顏色的健康碼代表人們不同的健康情況，市民出入特定場所都需初始健康碼。
隨著人的數據化越來越深入，個人身份信息的線上化在各平臺上將成為更加通用的能力。設計師需要考慮如何更自然更低成本地將線下動態變化的資料信息線上化，更有效地對用戶信息進行加工處理，以及記憶用戶的使用習慣和行為，以便幫助用戶更高效地完成任務。
疫情的出現加速了線下生活線上化，短短時間內我們看到日常習以為常的應用為響應疫情下的特殊需求紛紛出現改造，釘釘、QQ群被改造成上網課、批改作業的地方，醫療衛生公眾號開辟了實時疫情播報與辟謠通道，無接觸設計和服務需求異常突出……這也啟發了設計師需要保持對突發事件的敏感力以及應急能力，在日常生活中留心思考，為日后突發事件提供充足的場景支撐。
關注以人為本
在洶涌的資本語境下，互聯網設計師裹挾在商業驅動的結果導向中狂奔，對設計的倫理和責任鮮有發聲，但伴隨著互聯網紅利退潮，發展放緩，狂奔之下的人本問題也逐漸浮出水面。在大趨勢下，UX設計師需要培養自身設計對倫理和責任的敏感度，在滿足商業目的外，重拾節操，為多群體，為大社會設計，更加注重「以人為本」。
1. 更包容性的設計
包容性設計師指在做設計產品的時候，考慮到各類用戶的訴求，輸出具有包容性的設計方案。包容性設計依舊是2020年設計主題之一，伴隨著互聯網產品全球化，在通用性和包容性上也提出了新的要求。
為身障人士設計
三星在2019年針對東南亞市場推出了一款讓聾盲人士和健全人實時交流的app：Good Vibes，盲聾人輕擊屏幕輸入摩斯電碼，預先連線好的另一臺手機就會顯示從盲聾人發來的短信。健全人用普通的文字輸入回復，在盲聾人這一端就會翻譯成摩斯電碼、以手機振動的方式讀出短信內容。
GOOD VIBES宣傳視頻：https://v.qq.com/x/page/g3108sr8qc9.html
餓了么：在餓了么送貨騎手中，約8%受色盲色弱的困擾（全國男性群體中紅綠色盲色弱占比達8%-9%，餓了么騎手男性占比90%），為此餓了么設計團隊在2019年對app的進行了重新設計，包括使用WCAG無障礙色彩對比度，以及無障礙色盤，以及調整字階，使用輔助圖形等設計手段來解決部分騎手在送貨途中使用APP的痛點問題。
△ 餓了么UED：《為騎士創造平等 — 配送 App 的包容性設計》
跨年齡段設計
谷歌助手禮貌功能 ( Google Pretty Please ) ：開啟谷歌助手禮貌功能后，如果使用者在下達指令的語句中包括「Please」，谷歌助手會對禮貌的請求表示感謝，以此培養孩子的禮貌言行。
Google Pretty Please功能宣傳：https://v.qq.com/x/page/e3108ue3e2t.html
Swift Playground：當10后小學生VITA君的編程課被「可敬的發量」刷滿彈幕時，Swift playgrounds功不可沒，這款為兒童新手學習編程的軟件，用趣味的游戲方式為4歲以上低齡用戶提供了一個學習編程的低門檻平臺。
為性別平等而設計
蘋果emoji：回看歷年蘋果emoji的更新，從膚色平等，到性別、性向平等，再到為殘疾人設計，2020年再為跨性別者增加新表情，性別平等依舊是包容性設計中重要一環。
Airbnb插畫：愛彼迎在插畫系統中，也為不同膚色，不同職業，不同性別，以及身障人士進行了人物的繪制。
2. 關注用戶隱私
2019是互聯網科技隱私問題沉浮的一年，國外有Facebook因泄露隱私收到史上最大罰單，國內則打響了「人臉識別第一案」。籠罩在隱私信任危機下，個人信息和數據立法突飛猛進，美國推動《加州消費者隱私法案》，國內也將在2020年出臺《個人信息保護法》和《數據安全法》。
MIUI12推出隱匿面具功能
Android開放生態導致的權限隱私問題一直被用戶所詬病，某些APP存在用戶不授權就無法使用情況，針對這一情況，MIUI12推出了隱匿面具功能。當用戶在開啟某些APP要求授權權限時，可以選擇空白通行證進行授權，從而保護用戶真實信息。
在MIUI12的更新中，還推出了照明彈、攔截網兩項隱私保護功能
iOS 14剪貼板提醒
在iOS 14的更新中，保護用戶隱私方面進一步升級。
其中剪貼板提醒設計很貼心，當用戶打開應用，如果該應用讀取了你剪貼板的內容，會在系統頂部彈出提示，用戶能在第一時間意識到剪貼板內容被讀取，幫助用戶更好的保護自己的隱私內容。
3. 健康的數碼生活方式
科技的發展是一把雙刃劍，互聯網產品的發展給用戶帶來便捷和沉浸體驗的同時，也使得用戶沉溺于科技所帶來的惰性和投食之下，逐漸喪失了對真實生活的把控權，被科技綁架。
數字福祉（digital wellbeing）近年被頻頻提起，指科技產品需要權衡好數碼產品和真實生活之間的平衡，防止數碼產品過渡分散用戶的注意力而影響生活質量。
Android Q 專注模式 Google Android Q Focus Mode
Android Q的更新加入了專注模式，用戶在專注模式下，可以在系統層面快捷地關閉使你分心的應用，讓你聚焦于更重要的事情。
防沉迷系統升級
推薦技術的進步，產品體驗的升級，給用戶帶來了更合胃口的菜式和沉浸體驗，但同時也被冠上了「電子海洛因」的稱號。游戲或者內容產品的防沉迷系統依舊會是數字福祉下不可避免的趨勢。
王者榮耀在2020年升級防沉迷系統，對青少年的娛樂時間和點券充值的限制進行了進一步升級。承接話。B站在2019年推出青少年模式，在該模式下，使用時長和內容推薦等做了定制化處理。
2020年的UI設計趨勢，一方面是對往年風格的衍變和細化，另一方面，在扁平克制的界面風格盛行后，設計師們向往更自由、更突破的視覺表達。
UI的繼承和創新
1. 深色模式
2019年iOS 13深色模式姍姍來遲，緊接著大廠APP相繼推出此功能。在2020年，深色模式會繼續普及外，也會在可視性和實現成本方面有更多細節打磨和研究。
2. 新擬態
設計趨勢的發展是螺旋式上升的，在扁平化設計流行之后，對物體的擬真再一次回歸設計圈，新擬態以一種對舊擬物風格的再創新，重新流行起來。
新擬物風格（Neumorphism）緣起于設計師Alexander Plyuto發布在dribbble的一組作品，以投影重新對扁平界面進行了塑造，模仿出類似浮雕的視覺效果，感受耳目一新，引起大量設計師相盡模仿。
新擬態的實用性和可落地性有待商榷，但是作為一種新的風格受到設計師擁躉，也不失為下一波風潮到來前的靈感繆斯。
WWDC2020對mac OS的更新也重新定義了新擬態設計語言，在mac OS新系統Big Sur中，圖標的設計增添了輕微的漸變、投影、高光，以此來營造圖標內元素之間的縱深關系。
3. 多彩配色
在扁平簡潔UI風格盛行之后，豐富的色彩依舊是設計趨勢之一，大面積色塊，碰撞配色，帶來更具沖擊感的視覺體驗。
4. 字體裝飾化
UI界面逐漸扁平，色塊圖標弱化，為突出頁面重心和內容，iOS 11在界面標題上使用更大的字號，更粗的字重。近年在大標題的風格衍變下，文字在傳達信息外，也開始有了裝飾性作用，采用超大字體，成為頁面排版美化的一部分。
5. 更大圓角
大圓角的風格會繼續延續，相較以往，卡片的處理圓角會更大，隨之帶來的是多的留白處理，結合大字號，帶來更透氣通透的視覺感受。
Mac OS Big Sur的界面相對舊版本采用了更大的圓角；系統圖標的設計統一成圓角矩形。
6. 更豐富的插圖
UI插圖的豐富體現在樣式和內容上，樣式上開始3D化，內容上更注重插圖敘事的表達。
7. 3D插圖
3D圖形往年更多運用在動態影像或運營類設計中，隨著3D的普及運用，UI插圖也會迎來3D化，給用戶帶來更立體，更新鮮的視覺感受。
8. 講求敘事表意
相較于往年追求形式的UI插圖，新趨勢下的插圖更講求功能性，每一副插圖都承載一定的作用——傳達功能信息或透傳品牌情感；同時插圖更講求畫面表意和情節，給用戶敘事性的視覺體驗，增進用戶和產品之間的情感聯系。
9. 插圖組件化
插畫的流行，隨之而來的是成本的水漲船高——一套系列插圖為保持風格統一，往往由唯一設計師繪制，同時為兼容各類場景，設計師往往要繪制多張。
為解決插圖的成本和效率，插圖開始以組件化的方式進行繪制——插圖設計師將插畫進行拆分繪制——不同人物，不同場景，不同物件等，再通過組件化的拼接合成，使用組件的設計師可以根據需求場景自由組合，也避免了風格不統一問題。
設計師Pablo Stanley將日常繪制的插畫制成一套矢量插圖組件庫，將人物分為：半身、全身和坐姿3大類。通過不同表情、發型和服裝可自由搭配出近60萬種組合。
Pablo Stanley人物插畫系統：https://v.qq.com/x/page/s3108yeyhmt.html
10. 多維度動畫表現
新趨勢下，動畫一方面回溯復古線描手繪風格，另一方面追求更三維的體驗，同時幀率進一步提升，追求更流暢的視覺感受。
11. 手繪動畫
手繪插圖是往年的熱門，其隨性自然的筆觸，能給用戶帶來親切的感受，在新的趨勢下，動畫的加入賦予手繪插圖一份靈性和趣味。
12. 3D運動
Google Material Design通過卡片投影層級和二維動畫規律，賦予扁平界面Z軸的縱深感。隨著3D的普及流行，新趨勢下的界面，界面的運動從二維走向三維，表現出3D場景下透視感。
13. 高幀率動畫
高幀率影視從線下電影院移步到線上流媒體，手機高幀率屏幕從90Hz到120Hz逐步升級，用戶對畫面流暢的定義一再刷新，UI動畫的幀率升級也會是新的一輪趨勢。
Telegram的表情采用了高幀率動畫，給用戶更流暢的視覺感受。
更高效的涉及協作方式
體驗的持續升級，產品的高速迭代，對UX設計師的設計師效率提出了更高的要求。高效的設計方式是一個永恒的趨勢。
1. 從本地文件到云端協作
傳統的文件交接方式效率低下，導致設計師之間信息不對稱，最終影響產品的一致性體驗。近些年在線設計協同工具發展迅速，從UI設計、 設計交付以及組件協同等環節上給設計師提供更加高效實時的協作體驗，獲得大量UX設計師的簇擁。在2019 uxtool的設計工具調研中，在線設計協同工具佼佼者figma以其協作和性能優勢，大有追趕sketch之勢。
隨著團隊對設計效率要求的提高，設計文檔從本地走向云端協作是不可逆趨勢。不過設計工具的迭代是需要成本的，尤其在大型設計團隊，設計工具需要渡過陣痛期來完成迭代，進而提升設計效率和體驗一致性。
2. 科學有效的設計系統
UX的發展，從早期的靜態規范到當下的動態設計系統，是為解決產品迭代增速后帶來的設計效率和產品體驗問題。商業驅動下的產品迭代速度有增無減，設計系統依舊會是未來幾年的設計趨勢之一。
這里說的設計系統不是廣義上的設計系統，而是在互聯網設計的發展中，對組件化設計逐步迭代升華的一套設計協作方法：
「設計系統（Design systems）是一組為了共同目標而服務的內在相互聯系的設計模式和多人協同執行的方法。」（引自《Design systems》，Alla Kholmatova，C7210翻譯）。
3. 設計系統歷程衍變
組件化的發展歷經規范文檔到UI組件，再到設計系統，形態從最初對設計一致性的指導規范，到對產品研發流程的規范，以及產品設計價值觀的輸出，當下的設計系統以集大成者形式影響整個產品的設計形態。
設計系統的結構見下圖：
4. 設計系統的求同存異
設計系統并非一成不變的，他是一個動態進化的系統，會根據團隊性質、產品特性在內容上有所區分——比如大團隊更應該大而全，小團隊更傾向小而精；成熟產品的設計系統更傾向于打造完整閉環的合作流程機制，新產品的設計系統應該以小為始，快速迭代……
隨著產品的垂直化，細分化，設計系統的趨勢會是在趨勢大同之下找到適合產品和團隊自身的形態和節奏。
Material Design是一個包含了指導規范、組件，以及設計開發工具的自適應性設計系統。
它作為平臺型性設計系統，更為大而全的規范了整個生態系統的設計風格，以及提供工具讓研發者能快速產出符合規范的產品。
△ Google生態龐大繁雜，Material Design更為全面
Ant Design作為一個為to B產品提供解決方案的平臺，更多從設計可用性和完整性考慮設計系統的搭建。
△ Ant Design通過模塊化解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗
QQ作為一款面向95后的2C社交產品，其設計系統Q語言從風格調性上對設計進行規范，同時給予設計師一定的自由度；也考慮到QQ內兼顧多個產品，以及界面主題樣式，對基礎組件的使用場景和代碼進行了規范，方便設計和開發敏捷開發。
Q語言，給予產品的自由調性之外，也針對主題和基礎組件進行了規范。
每個產品和團隊都有自身的特征，設計系統的建設也應該有的放矢，沒有可照搬的標準答案，在大方向下找到適合自身的解決方案才是的可行之道，將效率最大化。
5. 科學有效的優化迭代
組件是設計系統中的重要組成部分，但是以往靜態的、孤立的協作方式使得組件的更新迭代滯后和阻塞。隨著設計系統的發展，設計師組件化思維的普及，組件的更新需要更科學高效的方式進行管理。
Figma在2019年推出的Design System Analytics功能，組件設計師可以借此查看組件的使用情況，包括引用次數，解組次數等，并可以生成組件使用情況的曲線趨勢圖，以數據的形式，科學高效地推動組件的優化迭代。
選擇分析的時間段；組件使用的次數曲線圖；團隊使用情況；所有組件使用情況
后記
未來的用戶體驗會出現什么新趨勢？人工智能等算法的發展、5G技術普及、新的智能設備形態、新的信息處理技術、新一代用戶的喜好和口味……這些往后或將影響用戶體驗發展的走向。未來用戶對體驗的要求只會越來越高。
用戶體驗設計師需要了解更多的技術動向，但安身立命之本還是讓用戶真正受益：立足于用戶真實使用場景，在理性價值層面上，打造可用、易用、高效的設計；在感性需求層上賦予情感上的愉悅性，在反思層面賦予意義價值。
來源：騰訊ISUX
]]>同時，微信也是互聯網界的一個異類，張小龍曾在微信公開課上回應到：“我們只是守住了做一個好產品的底線，居然就與眾不同了“。
好產品自然是體驗和價值至上。下面，我就為大家解讀微信的用戶體驗設計。
01. 二次確認的微創新
先從最簡單的二次確認講起。
微信針對首頁消息和收藏列表的刪除操作，做了二次確認的微創新。像同類 IM 聊天工具，如 iOS 短信、Facebook Messenger、飛聊等等，二次確認都是采用底部系統彈窗。這樣做，從程序架構的角度來看兼容和通用性更強。
而從體驗設計的角度來看，則剛好相反，因為從第一次刪除操作，到第二次確認系統彈窗。之間的目標距離太長，耗時也就變長了。根據菲茨定律（Fitts' Law），獲取目標的時間取決于目標的距離和大小。這意味著提升交互的效率，不僅需要減少距離，同時要增加目標大小。
收藏列表
回過頭看來微信，就是這樣設計的。二次確認是在第一次的基礎上延展，距離幾乎為0，同時，目標按鈕的寬度也增加了幾倍，大大的提升了交互效率。
02. 互動體驗廣告
其實，商業和用戶體驗往往是有沖突的。而微信廣告很好的平衡了這一點。
通過豐富有趣的互動體驗式創意，或畫圓、或畫方、或畫愛心，吸引大家主動參與互動。
– 開放首條評論
另外，首條評論功能讓品牌像朋友一樣與大家的對話，利用明星效應，從而帶動更多人參與評論，有效提升評論區活躍度和廣告點擊率。
朋友圈劉雯廣告
以劉雯發布的朋友圈廣告為例，大表姐把最新款的vivo X30系列手機交到你手中，并在首條評論中邀請你幫她拍照。數十萬用戶積極回復劉雯，評論率高于歷史均值40倍+，“你這么漂亮怎么拍都好看”、“天天給你拍”，大表姐的魅力折服了眾多用戶，有效提升了品牌的親和力與好感度。
– 打開儀式 · 最強震動級別
在交互方面，如果你是 iPhone 用戶，可以體驗到 Taptic Engine 線性震動馬達，通常力度由輕到重分別是 Light、Medium、Heavy。在打開廣告的那一刻，它給你的是最強震動級別，滿滿的儀式感！整個微信應該找不到第二個這樣級別的震動了。
03. 提供反饋信息
再舉一個震動的例子，當你的好友拍攝了時刻視頻后，可以看到 TA 的頭像右上角多了一個藍色的小圈圈，雙擊它就能看到好友的時刻視頻了。
當然，你雙擊沒有拍攝時刻視頻的好友，TA 的頭像會左右晃動，并且會有 Failure 的震動反饋，動畫和震動節奏完美匹配，這個體驗就像你解鎖 iPhone 輸錯密碼時的震動是一樣的。
沒有時刻視頻時的反饋
我們做產品設計時也一樣，對于用戶的操作，應當給予清晰明了的反饋，幫助用戶更好的理解信息。
04. 跨平臺能力
微信的起步階段是基于手機來做 App，不基于 PC 來做，PC 端只是輔助，而現在，它的跨平臺能力也逐漸增強。
一周前，微信 PC 版「微信測試版 for Windows」發布了 2.9.0 的內測，同步了移動端的新功能，主要有兩點：
1. 支持打開小程序，也可以玩「貪吃蛇」「跳一跳」等小游戲了。
Windows 微信客戶端
2. 另外，此前的微信 PC 端只支持引用文字消息，也沒有達到手機上引用消息的視覺效果。此次更新中，還新增了很多支持的引用類型，包括但不限于圖片/視頻、表情包、公眾號鏈接、小程序、文件等。
如此看來，Mac 端的更新也不遠了，可以期待一下。
05. 語音實時翻譯
最近的微信更新了，除了引入深色模式之外。值得一提的是，語音消息的交互體驗得到了優化，上滑轉文字更方便了。
此前的方式是按住說話，滑到轉文字按鈕，說完松開手指后，才把語音解析成文字。
現在交互則少了一步操作，達到了實時邊說邊轉文字的功能。別小看這一步界面上的優化，它背后代表的是微信語音識別能力上的技術突破。
語音實時轉文字
06. 錨點定位
微信有很多隱性和顯性的錨點，隱性錨點就比如你打開的這篇文章，關閉后，再重新點進來，還是顯示上次閱讀的位置。
訂閱號列表
顯性的錨點就比如上面這個：當你刷公眾號列表時候，如果有新文章更新，標題欄會出現一個錨點按鈕，點擊它讓你快速回到頂部，方便查看最新文章。
朋友圈「跳到還沒看的位置」
基于此，在新版微信朋友圈中，增加了一個「跳到還沒看的位置」。很多信息流產品是往下刷內容，直到給你一個分界線提示：下面內容已經看過了。而微信這是一個逆向操作，我認為這個功能還是很有必要的，因為經常會有刷朋友圈刷到一半聊天退出去，當回來查看朋友圈時，需要重新拉到底部，費時費力。
07. 自然的語音聽筒播放
《在你身邊，為你設計》一書中有提到語音聽筒播放的優化。大家都知道，手機帶有距離感應器，在感應到耳邊貼近時，屏幕會關閉以節省電力，并且避免由于耳朵與屏幕的觸碰導致的誤操作。
微信在聊天界面中，也啟用了距離感應，以實現手機貼近耳邊時，自動將語音從揚聲器切換到聽筒進行播放，這樣你可以用最自然的姿勢來聽語音，這是一個很好的體驗。
但要完美地實現這個體驗，就需要解決距離感應器的時延問題。播放語音時，如果你非常迅速地將手機移至耳邊，這時候距離感應器并不會同樣迅速地對這個動作產生反饋。大約在延遲了300毫秒后，感應器發出信號，微信將iPhone的屏幕關閉。而在這個時間內，你的耳廓極有可能已經觸碰到了iPhone的屏幕上。觸碰的位置大部分時候是左上角的返回按鈕區域。于是很容易出現手機移至耳邊，語音戛然而止。
延時響應判斷流程圖
為了解決這個問題，微信設計了一個解決辦法：在響應返回操作時，先等待500毫秒，這時候如果偵聽到距離感應器有發出信號，則認為是貼耳的動作，此情況下不執行返回操作，如上圖所示。而500毫秒的延時大部分時候你是不會感知到的。這一解決辦法極大降低了貼耳時候的誤操作。
總結
在微信的產品設計中，我們看到了交互的細微迭代和背后的技術突破，我們看到了商業創意與用戶體驗的平衡。給用戶帶來希望，讓創造者體現價值，這就是微信的設計之道。
原文地址：洋爺（公眾號）
作者：洋爺
什么是插圖？
基本上，插圖是對特定概念，文本或過程的視覺解釋。這是一個旨在支持、澄清甚至擴展人們從其他信息來源獲得的想法的圖像，通常以文本的形式給出。這個詞本身就意味著“為某些事物投光”，因此它的主要目的是幫助用戶理解或想象更好的東西。
多年來，插圖已被整合到各種印刷品中，如書籍，雜志，報紙，海報，傳單，教育材料。后來，動畫和視頻制作為插畫帶來了新的氣息。最近，新的技術和工具推動了數字插畫時代的發展。
隨著網站和移動應用程序的不斷增長，插畫的需求和應用也不斷飆升。由于其美觀性和創造性，插畫也是作為提高可用性、情感和視覺吸引力的界面之一。但是在UI設計中有哪些功能是可以通過插圖來說明的呢？
界面設計中使用插圖的方法
和其他界面元素一樣，插畫的功能性多于裝飾性，可以使信息或交互變得更清晰明了，也更加時尚。所以，何樂而不為？以下是我總結的可以使用插圖的地方：
•主頁橫幅
•主題圖片
•吉祥物和人物
•博客文章圖片
•引導流程和工具提示
•獎勵和其他游戲化圖形
•通知和系統消息
•貼紙（特別適用于Messenger應用程序）
•講故事
•信息圖表
•營銷材料和廣告橫幅
•內容類別的可視標記
•支持網站或應用的社交網絡頁面。
以下是插圖在界面設計中深受歡迎的十大理由 – 也許你可以考慮在下一個設計項目中使用它們。
界面設計中使用插圖的十大理由
1. 自定義插圖為原創性和藝術和諧奠定了堅實的基礎
圖形為界面、印刷品或品牌相關的東西增添了一絲風格和創意。在競爭激烈的世界中，脫穎而出至關重要。否則，人們甚至可能不會嘗試你的產品，更不用說了解它的好處了。
順便說一下，這就是為什么許多公司將插圖用作博客文章、評論和登陸頁面的主頁橫幅的原因。在這種情況下，設計師可以根據目標受眾偏好對作品進行微調，并將其與特定項目或主題背后的業務目標或想法進行平衡。這樣可以找到充滿趣味的隱喻、配色方案、角色和環境，從而有效地吸引特定的讀者群或觀眾。
看看這副關于UI動畫的文章的隱喻標題插圖。智能手機扮演幕墻或屏幕的角色，就像在木偶劇院中使用的那種，設計師充當演員，每個演員都展示了特定的動作表現模型。
2. 插圖充當可視觸發器，可快速傳輸必要的消息
絕大多數人對圖像的感知能力超過文字。這是一個無關好壞的事實，只是設計師可以利用這一點來增加網頁或移動布局的視覺效果。一般來說，人們具有非常廣泛的能力來感知視覺標記，識別和處理數據，甚至轉換為高級抽象的圖像。
事實例證：
•心理學家聲稱人們需要大約1/10秒來獲得視覺場景或元素的一般感知（文本項目的速度確實不可能）
•視覺效果能更快地傳遞到大腦。重要的信息通常被大腦固定為視覺圖像，即使它們是通過文本感知獲得的
•與背景和周圍元素相結合，圖像不易受到影響，而文本則高度依賴于可讀性
•圖像有助于保留長期記憶。這意味著處理界面的用戶不需要處理和記住比實際需要更多的數據，因此交互變得更快
•當來自不同國家/地區的人使用應用或網站時，界面中的視覺效果可以使其更加通用
•圖片突出了具有文本識別自然問題的用戶的感知極限，例如閱讀障礙或非閱讀學齡前兒童。
所有上述內容構成了與插圖建立強大而快速視覺聯想的堅實理由：字符、顏色、構圖、可識別的細節將快速通知用戶并支持文本形式中給出的消息。
這是一個數字代理商的登陸頁面，通過一個由籃球運動員代表的主頁橫幅形象迅速傳遞其準備迎接最高的商業挑戰和目標的信息。
還有一個例子是為LunnScape創建的主題插圖。LunnScape是一家專門從事景觀設計和植物護理的公司。這些藝術品旨在用于營銷活動，社交網絡和網站。經過一系列的實驗，設計師想出了柔和色彩和筆觸輕盈的圖形。其中一個插圖的特點是人們忙于園藝，而第二個插圖反映了公共空間的風景與景觀設計。你看，通過這樣的設計，插圖立即與景觀主題建立了寶貴的聯系。
3.圖形為Web或移動界面中應用的副本提供有效支持
正如之前提到的，在許多情況下，圖片可以作為一種比復制更通用的通信工具。但是，也有一些陷阱需要仔細考慮。感知的速度并不是我們唯一需要的東西：人們可以超快地感知插圖，但如果他們傳輸的信息不清晰或者可以被雙重閱讀，速度將無法帶來積極的用戶體驗。
快速捕獲導致錯誤理解的圖形不能被定義為識別，它只是被快速注意到。識別不僅意味著速度，還意味著應該給你用戶指示正確的動作或傳達正確的視覺元素信息。因此，請立即清除視覺隱喻以免造成誤解或錯誤關聯。
這里是一個金融服務網站的例證，幫助養老金領取者有效地管理他們的錢并增加他們的儲蓄。藝術作品會立即傳送信息，使其與標語保持一致。 這樣，當布局中的所有元素協同工作時，網頁看起來就很吸引人。
4. 插圖是一個很好的創造性故事的檢驗工具
簡而言之，講故事是將不同信息塊合并為一個故事的方法，使它們更讓人印象審核，并在各部分之間建立牢固的聯系。 這種方法在營銷和用戶體驗設計方面表現得非常有效。
這是為我們最近的佛羅倫薩項目設計的插圖集。它是一個可以讓自由護士在線尋找工作的平臺。設計師創造了原始角色，展示故事，設置氛圍，發送信息或以與平臺的情緒、語氣和聲音相對應的方式呈現優勢。
5. 插圖在設定情感訴求方面具有重要的力量
毫無疑問，我們都是情感動物。談到情感設計，AarronWalter說：“許多網站和應用程序正在創造更好的體驗。他們重新劃分需求的層次結構，包括一個帶有快樂和愉悅色彩的新頂層。如果界面可以幫助你完成一項關鍵任務并讓你感到非常愉悅，那是不是很棒？是的，的確是這樣！這將是你向朋友推薦的一種體驗; 這將是一個值得傳播的想法。”
這就是你可以利用插圖實現的一些有效的事情。你投入其中的一切 – 線條、形狀、顏色、面部表情、曲線動態 – 都會對點燃情緒產生重大影響。通過研究用戶行為和影響情感吸引力的因素，設計師可以將插圖作為一種強大的工具，將經驗與用戶情感從最初的互動相互連接。
Kiddy的這個登錄頁面的設計概念讓保姆雇傭變得非常簡單。可愛正面的元素在充滿趣味性的插圖中扮演關鍵角色，為用戶傳遞信息和情緒。在用戶開始閱讀服務之前創造所需的氛圍，并為所有頁面提供獨特的外觀。
6. 定制圖形設計為美學滿意度奠定了基礎，從而增加了項目的可取性
通過數百次關于“功能優先”主題的討論和論證，人們對美麗和喜悅的自然渴望依然存在。當然，實用性和可用性是任何界面的基礎。可取性是通過美觀可愛的外觀讓人們注意到你的產品，感受使用它的樂趣，并希望再次使用它。插圖則是一種經過精心檢查的方式來實現這一目標，因為它們可以添加美感，風格，優雅或任何您想要添加到界面中的內容。
這是一個網頁設計概念，為旅客提供簡單明亮的預訂服務。它在頁面左側使用大幅的3D插圖，而右側部分則突出搜索住宿的形式。
7. 插圖令人難忘且引人入勝。因此它們在提高品牌知名度和可識別性方面有不錯的表現
與文本相比，圖像在長期記憶中具有更好的粘性。當圖像提供信息時，影響將會增長，與目標受眾的期望一致的設計、布局使得有插圖的UI設計可以非常有效的增加網站或移動應用程序的品牌性。這就是插圖被廣泛用于引導流程的原因之一。
這些是Perfect Recipes應用程序的流程引導圖。在交互開始時，用戶設定他們想要實現的目標，例如減輕或增加體重，保持健康的飲食等。此外，用戶可能會標記他們不喜歡的成分，以便應用程序不會顯示包含它們的食譜。插圖以明亮和原始的方式可視化目標。
這是另一個使用流程引導的例子。有趣的人物和插圖成為app游戲化的關鍵元素。集成到UI中的原始吉祥物成為通信和交互的核心元素，在不同的狀態下，它向用戶傳遞不同的消息，使交互更加用戶友好和擬人化。
8. 數字插圖可有效創建動畫短片和互動元素，使交互生動優雅
越來越多的網站和應用程序在用戶界面中應用動畫。通過這種方式，不僅可以增強可用性，還可以增強情感吸引力和UI外觀的優雅。這也是為什么我們經常看到動畫徽標，圖標甚至復雜的動畫插圖。動畫能為創意、消息和情緒帶來更多表現力。更重要的是，應用動畫視頻也是熱門且有效的趨勢之，插圖可以獲得更高水平的開發和與用戶的溝通。
這是Whizzly動畫徽標的示例。Whizzly是年輕人展示人才和分享創意項目的社交網絡。應用于徽標及其動畫版本的藝術手段使其看起來令人愉悅，令人難忘和情緒化。
9. 基于有趣視覺隱喻的插圖使設計獨特且引人入勝
與藝術一樣，在設計中，隱喻是吸引用戶并使他們考慮所提供的想法的有效方式。插圖使設計師能夠處理與特定目標和用戶相對應的獨特隱喻。
這是一個約會應用程序的登陸頁面的概念，讓人們找到他們完美的一對。插圖展示了主題制作明亮的視覺觸發器，并有效地結合了人們聯合設備的形象。
平面設計師面臨的一個關鍵挑戰是尋找原始風格 – 而這正是激發這件藝術品隱喻的原因。在平面插圖的文章中，平面設計師分享了如何抓住這條金魚的實用技巧，并在標題插圖中應用了相同的比喻。
10. 人們快速注意并解碼圖像，因此明智地使用插圖可以使交互更簡單，更快捷
圖標和插圖等自定義圖形可以成為界面清晰直觀導航的重大改進。在許多情況下，用戶界面中的基本交互通常會花費幾秒鐘，這點非常重要，并且這也是將具有視覺標記的的內容轉換為圖形的基本原因。但是，請記住：如果圖像可能被錯誤地解碼或根本沒有解碼，他們則需要額外的復制內容支持。而用戶測試將有助于找出哪些元素絕對清晰，哪些元素需要用文本解釋。
以下是為移動照片編輯器創建的原始圖標Cuteen：支持文本提示的優雅插圖可幫助用戶快速輕松地處理內容。
要考慮的要點
當然，現有的認知方案不可能滿足用戶的任何要求，但在圖形設計方面有一些必須考慮的要點：
•目標受眾（身體能力，年齡，文化背景，總體發展和教育水平）
•典型的產品使用環境
•全球或本地產品差價水平
•所選圖形和隱喻的識別水平
•圖形提供的分心/集中程度
所有提到的要點都涉及人類認知能力并影響視覺數據感知的質量。對于設計師來說，重要的是要記住：僅僅讓用戶看到布局的元素是不夠的，讓他們認識到這些圖形的意義并快速理解它們所傳遞的信息是至關重要的。
原文地址：Mockplus
作者：Grace
]]>截止到目前為止，越來越多的設計師將動畫作為一種功能元素融入其中，以增強用戶體驗。動畫不再只是為了娛樂；它是完成交互的最重要工具之一。
然而，動畫在設計中只有用在合適的時間和地點的時候，才能夠增強用戶體驗。好的用戶界面動畫是有目的的；它們有意義，而且功能性強。在本文中，我們將討論功能動畫在UX設計中的作用，并了解何時將動畫運用到設計中。
什么是功能動畫？
功能動畫是嵌入在UI設計中的一個微妙元素，它是該設計功能的一部分。并且它強化了設計，具有非常明確和合乎邏輯的目的，包括：
1、減少認知負擔
2、防止變化迷失
3、在空間關系中建立更好的聯系
動畫使用戶界面栩栩如生。在以用戶為中心的設計方法中，用戶是主要焦點，用戶界面需要直觀、快速響應和人性化。功能動畫就可以幫助你實現這些目標。
功能動畫在用戶界面設計中的作用
經過深思熟慮和經過測試的功能動畫有可能實現多種功能。
用戶操作的可視反饋
良好的交互設計提供反饋。這種反饋會讓你覺得你正在與屏幕上的元素進行交互，并演示這種交互的結果（不管它是否成功）。
用戶界面元素，如按鈕和控件，即使它們位于一層玻璃的后面，也應該是可感知的。
按鈕和其他活動控件應通過視覺反饋響應用戶操作。（圖片來源：Behance）
當您需要告訴用戶操作結果時，視覺反饋也很很重要。在操作未成功完成的情況下，功能動畫以快速、簡單的方式提供有關問題的信息。例如，當輸入錯誤的密碼時，可以使用震動動畫。這樣很容易理解，因為晃動是一個普遍表達“不”的含義，就像搖頭是人們相互反饋的方式。
用戶看到此動畫并立即了解問題。圖片來源：thekineticui
目的
確認系統已收到用戶的操作。
確認（或拒絕）用戶的操作。
系統狀態的可見性
作為尼爾森的可用性的10大法則之一，系統狀態的可見性仍然是用戶界面設計中最重要的原則之一。用戶希望在任何給定時間知道他們在系統中的當前位置，并且應用程序不應該讓他們猜測，系統應該通過適當的視覺反饋告訴用戶發生了什么。
數據上傳和下載得到過程是使用功能動畫的最好時機。例如，下載進度條，給用戶實時反饋和心理預期。
有趣的動畫也會分散用戶的注意力，并使他們等待更長時間。
功能動畫還可以用于吸引用戶注意應用程序中的重要狀態變化，例如來電：
或收件箱中的新電子郵件。
目的：
提供系統狀態的實時通知，并使用戶能夠快速了解正在發生的事情。
視覺提示
用戶在第一次使用某個應用程序時，通常需要一些幫助來理解如何使用該應用程序。特別是含有不熟悉或者獨特交互方式的界面（如手勢操作的界面），這一點尤為重要。如果沒有幫助，用戶可能會對如何與應用程序交互感到困惑。
當涉及到教用戶如何使用你的UI界面時，你應該提供一組視覺提示，來傳達哪些是可能存在的交互。這種功能性動畫驅使用戶注意到可能存在的交互。
視覺提示可以讓用戶了解將要發生的事情。例如，可以在iOS相機應用程序（iOS 7之前）中找到功能動畫，它為用戶拍攝照片做準備。
==相機應用程序中的快門圖像===
或者，通過演示設計中的某些功能是如何工作的，這種方式可以讓用戶采取進一步的步驟。同時，視覺提示也可以提高產品的可用性。
用途：
告訴用戶即將發生什么給用戶足夠的心理預期 幫助用戶定位自己在界面中的位置 告訴用戶他們怎樣做才能與屏幕上的元素進行交互
導航過渡
導航過渡是應用程序中狀態之間的轉換，例如，從主屏幕到細節屏幕。通常默認情況下的狀態變化是界面之間很僵硬的切換，這樣很難區分界面之間的層級關系。功能動畫可以幫助用戶更好的理解；它可以在導航上下文之間平滑轉換，并通過狀態的轉換創建可視連接來解釋屏幕上的變化。
導航過渡可以是分層轉換（親子過渡）或同行過渡（兄弟過渡）。當用戶探索應用程序的更深層次的時候，將使用分層轉換，這些應用程序是當前（父屏幕）的子級。運動突出顯示從父母到子女（子元素）的移動，同時加強父屏幕和子屏幕之間的關系。
同行過渡發生在層次結構的同一級別的元素之間。例如，當用戶瀏覽選項卡時使用此動畫。
每個標簽的內容和表面保持在同一級別，動畫只是引導視圖之間的焦點。
在這兩種情況下，功能動畫都可以幫助眼睛看到新對象在其顯示的位置以及隱藏對象的位置（并且可以再次找到）。它提供了視覺提示，使交互更容易被發現并強調已發生的事情。
用途：
定義屏幕和元素之間的空間關系 通過幫助用戶理解頁面布局中剛剛發生的變化，避免出現意外的過渡
品牌塑造
通常情況下，有幾十個應用程序具有相同的功能并完成相同的任務。他們可能都有很好的用戶體驗，但是人們喜歡的東西不僅僅是提供一個良好的用戶體驗。用戶更希望與他們建立情感聯系。
品牌動畫負責參與品牌塑造。它可以作為營銷工具-支持公司的品牌價值或突出產品的優勢-同時使用戶體驗變得令人愉快和難忘。這種方法可能不是以用戶為中心的設計，但它有一個功能性的目的。為了成功，品牌動畫應該支持體驗的連續性。
用途：
娛樂用戶，為設計帶來同理心和樂趣 創建產品的標簽; 幫助用戶與產品建立關聯，增加品牌認知度
如何找到平衡
有用和炫酷的動畫之間的平衡在哪里？花時間仔細考慮動畫何時恰當的何時是不恰當的非常重要的。
動畫的目的
動畫應該是有目的性的，不要為了動而動。當一個動畫不適合某個功能性的目的時，它可能會讓人感到厭煩，尤其是當它減慢了一個沒有任何動畫的過程的時候。
請記住，用戶出于某種目的訪問網站或啟動應用程序 – 我們需要在短時間內向他們展示他們所希望看到的內容。因此，當決定在應用程序中使用動畫時，只有當動畫有意義并且不會干擾用戶成功完成他們想要做的事情時，才加入動畫。
時刻牢記
即使是好的動畫，如果使用過度也會很煩人。在設計動畫時，問你自己一個問題：“動畫在第100次使用時會很煩人嗎，或者它是普遍清晰和不引人注目的嗎？
原型和測試動畫
在將UI動畫添加到你自己的工作中時，與實際用戶進行迭代原型設計和測試是非常正確的。原型設計是能夠表達你打算如何在設計中使用動畫的最佳方式。如果你使用交互原型，你將得到一個清晰的設計描述，關于怎樣工作和應用程序的缺陷隱藏在哪里。通常，這會導致頻繁的返工，因為動畫的外觀與感覺不同。因此，經常迭代和快速迭代！在最微小的細節上多次嘗試和重復都會使你的動畫很棒。
結論
如果你要在設計中運用動畫，那么應該好好的創造關聯，并且只有當動畫是設計過程的自然組成部分時，這才是可能的。
作者：Coldrain1
個人主頁：https://i.ui.cn/ucenter/310170.html
在本文中，我們將分享ISUX設計趨勢報告的最后一部分“用戶體驗趨勢”。用戶體驗是產品、人與環境共同作用下，用戶使用產品的感受。隨著科技不斷進步，新的產品和服務層出不窮，消費者的行為和心理也在不斷變化。我們從技術、硬件、環境和人四個維度，來分析和總結用戶體驗趨勢，在這個多變的行業中，大家進行新的設計和改進設計時，加以對趨勢的了解，為即將到來的未來做準備。
為了更好的了解趨勢出現的原因，我們從影響趨勢的客觀條件中歸納了一些信號：
2019年是5G元年
思科最新研究表明，2022年，全球近12%的移動數據流量來自5G連接。5G超高速率讓內容推薦更加個性化和精準化，萬物互聯會帶來更多的智能終端和更多細分場景，AR將會有更多應用場景。
2019年00后進入20歲
00后的特點更加多樣化，千人千面時代到來。他們喜歡多社交和多互動，內容是激發他們互動的工具，會對自己感興趣的領域投入更多時間和金錢。
人工智能技術加速落地和擴大應用
近年來，人工智能技術在移動互聯網廣泛應用，人工智能手機研究報告指出，消費者最常用的AI功能有語音助手、人臉解鎖、智能識圖、智能拍攝和美顏，圍繞語音和視覺的核心應用場景技術將會持續升級。
智能手機的差異化
全面屏的出現，讓Face ID逐漸取代了Touch ID；各大手機廠商也試圖在產品形態上創新，推出了折疊屏手機。
01. 個性化體驗
互聯網的產品從大眾化轉向個性化，越來越多的產品通過定位細分找到了新的機會。設計從同質化的體驗轉向追求個性化和創新。設計師必須了解與自己完全不同的目標人群，進行用戶細分研究，通過良好的用戶體驗留住用戶，提升產品價值。
01-1. 個性化內容推薦
在大數據背景下，個體興趣多樣，隨著機器學習和人工智能的技術的發展，產品越來越注重個性化推薦。
“更懂你”的信息流推送讓用戶不需要從一堆歌單中去尋找你喜歡聽的歌曲，豆瓣的音樂地圖和Google的For you讓你的偏好一目了然。
01-2. 個性化應景設計
用戶經常在不同地方使用手機，場景化生活特征被互聯網設備所感知。設計師需要感知用戶當前場景，理解當前場景的需求來進行精準的應景設計，提升用戶的驚喜感和愉悅感。
Snapchat能識別聚會拍照的地點，在app里在線預定打車到那個位置。
麥當勞個性化推薦技術，讓餐廳根據天氣、時間和顧客的點餐記錄來調整菜單。
在電影院選座位能感受到座位的真實觀影角度，快到電影院時會推送電影票二維碼。
02. 語音交互
AI語音技術的快速普及，幫助人們改變使用習慣和觀念，用戶越來越多的使用語音交互。據ComScore的報告稱，預計在2020年，用戶使用搜索功能時，50%會用語音搜索；72%擁有智能語音助手的用戶表示這已成為他們生活的一部分。各大科技公司出了自己的智能音箱，AI智能設備改變了與界面的交互方式，從GUI到VUI，不依賴觸摸屏的輸入，出現無導航、無按鈕、無菜單界面。就目前而言，國內的AI音箱還是比較初級的人工智能，經常被用戶病垢為人工智障般的語音系統。
02-1. 語音更趨近自然
隨著人工智能和機器學習的不斷發展，Google的智能語音助手快速進化，從去年I/O發布的Continued Conversation（連續對話），用戶不用每下一個指令都要說一聲‘hi google’，到今年已經不需要說喚醒詞，拿起手機就可以讓它幫助你。
去年發布的Google Duplex，可以打電話給飯店或理發店等商家，幫你預約，到今年可以幫你租車、回復消息、找照片分享給好友、寫郵件等一系列跨app的任務。
技術進步必然帶來效率的提升，AI越來越能全面理解用戶提出的高度個性化需求，語音交互可以像人與人互動一樣自然且同時快速處理跨app的多任務，降低用戶操作成本，縮短操作鏈路，成為用戶的日常“助手”。
02-2. 語音交互的泛娛樂
對用戶來說，語音的使用不僅僅是它的便利性，娛樂性也是重要因素之一。短視頻在聲音交互和語音識別上進行了補位。Snapchat推出聲音濾鏡，不僅能根據聲音音量做出反應，還能識別語音指令，觸發對應的動畫。
Google的Live Caption的語音識別技術，可將視頻語音內容轉化成文本字幕顯示在聊天界面，還可識別關鍵詞，形成文本鏈接，用戶可直接點擊跳轉。
聲控游戲和聲音社交不斷興起，語音讓體驗更加多元化。騰訊NEXT新作《疑案追聲》，以聲音表現故事，聽聲音進行推理破案，用聲音來打造沉浸式體驗。
03. 秒驗身份認證
登錄app身份認證從以前五花八門的“用戶名 密碼”的模式優化到獲取手機動態驗證碼，這種身份校驗的方式在使用體驗上談不上好用。驗證碼的收取、輸入都需要用戶花費一定的時間和精力。全面屏手機的出現使Face ID取代了Touch ID，當全屏設備越來越普及時，越來越多的app將加入面部識別認證，實現更實時更精準的一鍵登錄。
04. 手機新形態帶來新體驗
各大手機廠商為了調動消費者的換機熱情，從全面屏、升降攝像頭、雙面屏到最近的折疊屏，手機新形態的出現會帶來不一樣的操作體驗。
折疊屏折疊時能讓手機背面成為一個附加的交互空間，方便用戶同時使用兩塊屏幕進行不同app操作，例如打游戲的同時，不用切換退出游戲，直接翻過屏幕處理社交消息。
折疊屏展開能使空間更大，在小屏中運行的app，會自動調整大小匹配大的布局，并展示更多的功能。還可以進行多窗口操作，避免多個應用之間來回切換。
全屏手機的出現，讓手勢操作取代物理按鍵。折疊屏的出現，雙屏幕的操作會增加更多手勢操作，需要在設備中模擬人的自然的、習慣的手勢。
05. AR 融入到生活每個角落
AR技術會隨著5G發揮更大價值，創造更多的新場景。人們借助AR，能讓原本虛構的數字世界融入到現實的物理世界。2018年Gartner調查顯示，2020年，約有46%的零售商計劃將AR/VR技術融入到顧客的購物體驗中。
Snapchat可以使用相機掃描物理對象，會展示Amazon的購買鏈接，還可以掃描歌曲或者數學題。
通過Nike App的“掃一掃”，對雙腳進行全面掃描和評估，會有左右腳長寬顯示，根據選擇的運動鞋款，會推薦該鞋款最適合的鞋碼。
AR讓數字世界的物體更具象。當你搜索到想買的一副畫，可通過AR把畫放入現實場景中，用一種全新的方式看看該物體的大小、顏色和自己家搭不搭。
Google地圖推出了AR實景導航。屏幕上面部分會展示實景內容，底部顯示數字地圖，屏幕中會有大大的3D引導箭頭引導。AR的交互行為模擬真實世界中的用戶行為，讓用戶能很快明白怎么使用。因此需要通過最簡單的模擬真實環境的呈現方式，來傳遞核心信息，3D元素的設計能聚焦視覺引導用戶操作，加上符合物理性的動效，對現實生活中的重力、慣性模擬，使3D元素看上去更真實自然。
Google首款支持多人AR交互的Just a Line，通過相機拍攝，點擊屏幕進行繪畫，畫出你想表達的畫面。
06. 產品表現向 3D 發展
除游戲外，有許多以3D為展示形態的產品進入了我們的視線，如使用3D Avatar為用戶定制形象的“ZEPETO”、“IMVU”；使用3D的角色作為界面設計元素的“BOO!”，“ZENLY”在界面卡片使用陀螺儀效果讓卡片擁有立體的效果變化。3D的手法已經在產品設計中的使用的更加頻繁。
除了更新鮮的視覺感受外，3D的手法也可以更好地服務于“商品”的展示，讓用戶對產品有更直觀的了解。我們可以看到更多真實環境或產品的展示使用三維的方法表現。
設計師也可利用三維空間的表現力，將產品頁面打造成一個更加立體與真實的空間。在用戶操作屏幕的過程中，帶來更流暢與真實的體驗感受。
07. 為內容設計
“知夜晚而不睡”的人群越來越多，他們擁有更多碎片化和大段閑暇時間來消費內容，app的設計需要更有沉浸感。
07-1. 舒適便捷的使用體驗
屏幕尺寸越來越大影響著用戶日常操作的方便性。界面的設計如何能提升大屏手機的操作效率和使用體驗？三星的One UI讓手機屏幕分成兩個區域，上面的區域用于查看內容，下面的區域用于交互操作。
為了方便頁面層級切換，增加了下滑退出的手勢。
屏幕上的操作和內容根據用戶操作發生變化，讓用戶更容易注意到已完成的操作，并提示下一步的操作。信息在用戶需要的時候呈現，減少用戶的認知負荷。
更靈活與有連續性的頁面轉換效果也可以幫助用戶在頁面跳轉間更好的記住產品路線，同時帶來更舒適的使用感受。頁面之間的轉換不再只有簡單的四個方向的進入或拉起，而更是與內容形態相關的靈活的轉換過程。用戶通過手勢對頁面進行有方向的操作時，將得到連貫的操作體驗。
07-2. 沉浸式的全屏表現
為了更好地服務于內容，我們看到許多的產品去掉了頂部的“色塊”的設計。需要帶給用戶更沉浸的體驗，所有“生硬”的分割形式也將不再流行。而在這其中，白色與黑色的全屏幕底色可以更加凸顯產品內容本身的差異化，而不是頁面表現的差異。
在4月底Facebook推出了新的更簡單、更沉浸式的“FB5”設計風格，除開去掉厚重的頂部藍色塊的設計外，新加入的“黑暗模式”將先出現在視頻觀看的模塊中，這將更好地服務于視頻內容的觀看。
“黑暗模式”將出現在更多APP在設計中。在滿足用戶在瀏覽內容時的“沉浸感”的同時，APP可以在夜間幫助用戶開啟“黑暗模式”，服務于用戶在夜間暗環境下的使用，減輕屏幕過亮的視覺疲憊。
07-3. 用戶深度參與內容
00后喜歡多互動強體驗，內容 互動賦予了內容新的可能性。互動視頻讓用戶增加代入感、獲得個性化的游戲體驗，也讓內容更具有娛樂性和新鮮感。
電影、游戲、網劇都推出了互動作品，用戶從第三視角轉向第一視角進行主動參與選擇，成為高度個人化的內容。互動視頻不僅要保證故事內容的優質，還要保證互動體驗，對內容的交互必須是有意義的、影響劇情發展的，這樣的互動才有效、才能更加觸動用戶的情感。
07-4. 內容從吸睛到吸金
00后不看電視，主要用智能手機獲取感興趣的商品和服務。移動支付改變了用戶的付費習慣，用戶愿意為自己感興趣的內容付費。
以內容為載體的電商給用戶帶來更加信息豐富化和娛樂化的體驗方式，用戶消費內容的同時可以隨手進行購物。
08. 感性審美的提升
年輕的互聯網用戶們，在高速發展的科技與文化環境下成長。也自然地造就了這些用戶對產品審美上更高的追求。近幾年，擁有自我個性的“小而美”的設計也更容易打動用戶。
08-1. 符號化的圖標設計
從Office365的新圖標設計中，我們可以看到更抽象與符號化的圖標表現。降低圖標上的具象（文字區域）占比，使用更多的抽象形狀表達圖標所具備的含義。圖標向更簡潔與幾何的方向發展，同時使用豐富的色彩和質感變化滿足圖標的辨識度。
此外，圖標的設計也更講究適配效率。Office使用了svg格式的資源以適應于不同平臺的應用擴展。
08-2. 貼近自然感的操作響應
隨著表現手法的進步，如3D元素的使用；以及動畫實現技術的進步，在響應動畫表現上也將更加細膩。而模仿自然的運動規律也將更為流行，“弧線運動”“光感”“粒子表現”“三維空間”等等也將提升產品的設計表現。
對界面中的控件而言，控件的設計將越發貼近真實的物理規則。設計師們可以通過對控件在動畫上的表現賦予它們更真實的觸感。
有趣的響應動畫也可以帶給用戶更愉快和親切的感受，而在動畫中體現更多的“人情味”便是帶來愉悅體驗的關鍵。我們可以感受到圖標所傳達出來的情緒與性格。
08-3. 風格化的插畫表現
審美的提升帶來最為直觀的感受即是對圖形本身追求的進步。所以在界面插畫中，視覺藝術性的追求也更加重要。用戶們早已厭倦了千篇一律的幾何小人或是簡單的線性圖標，更具有個性的角色表現及繪畫手法將更受年輕人的歡迎。
08-4. 彩蛋
越來越多的電影流行彩蛋，一個小小的彩蛋能帶給用戶驚喜感和儀式感。我們在滿足用戶需求和打造用戶體驗的同時，可以給用戶設計一些觸動人心的設計。
Google搜索在《復聯4》熱映時，加入了滅霸的彩蛋。點擊無限手套，搜索結果就會隨機“消失”一半。
Google地圖在愚人節發起了貪吃蛇游戲，可以在不同的地圖上，讓蛇（地鐵或巴士）吃掉目標不斷變長。
Google 為 Chrome 的生日埋了個小彩蛋，在 Dino Game 中加入了派對元素：當小恐龍吃蛋糕后即可戴上生日帽。
總結
2019年我們可以看到科技對設計、體驗產生的巨大影響。《創新者的窘境》一書中描述：“每個技術由慢到快到發展至瓶頸時，另一個顛覆式的技術會悄悄萌芽，并替代上一個技術”。因此有些設計趨勢會由于技術驅動突然爆發，也有可能會因為技術的顛覆而消失。作為設計師，要學會識別設計趨勢中的變與不變，來進行創新和設計改良。
科技和產品最終都是回歸到以人為本，設計師要洞察人性底層的需求，除了關注屏幕內的設計，還需關注屏幕外的設計，改善人們使用產品或服務的設計就是未來的趨勢。
相關文章：
1、《2019-2020 設計趨勢：圖形篇》
2、《2019 – 2020 設計趨勢：IP形象篇》
3、《2019-2020 設計趨勢：Avatar角色篇》
4、《2019-2020 設計趨勢 · 用戶體驗篇》
文章來自公眾號：騰訊ISUX
(https://isux.tencent.com/articles/isux-designreport-2019-part4）
吸引老年人作為用戶群體的一部分，這曾經被認為是互聯網世界中最后需要考慮的事情。但是，這種罕見的情況正在成為現實，我們見證了老年用戶群體持續不斷的增長，他們經常登錄、注冊和訂閱。Statista的記錄顯示，光是在美國境內，2016年就有64%的老年人在線，這個數字在2013年的時候只有4%。
盡管數量在增長，老年用戶群體在人口統計學中，仍然屬于用戶體驗的不毛之地。如果用戶體驗從業者不將老年用戶納入考慮，就會疏遠這個整個群體，把他們從在線體驗中排除出去：這情況可不樂觀。
通過加大UI元素、使用顏色強調重要內容、進行適當的用戶測試，遵循這些最佳實踐，可以做到為老年用戶定制網頁設計。
保證界面適合閱讀
文字：越大越好
首先要考慮文字和屏幕本身的尺寸，確保用戶界面清晰可辨。不像我們UX設計師，并非每個用戶都有高分辨率的顯示器，未必對眼睛友好。對于60歲以上的用戶，小號文字真的會讓人抓狂。如果你想要定位老年用戶群體，界面正文字號不要小于12磅。
有時候用戶會選擇調節瀏覽器本身的字號。但是多數時候，這樣只是放大了整個頁面，這就會產生功能和顯示問題。要避免讓用戶去手動設置字號。
而且，要把信息分解為更小的部分，通過留白分隔，就不會在局促的空間里塞進大量文字，使用戶感到眼花繚亂。
調節顏色和對比度達到最佳可見性
當設計師忽略顏色規范時，用戶體驗就會崩塌。界面中的顏色和對比度幫助用戶確定哪些元素對應哪些任務，掌握自己當前處在網站的什么位置，并且知道哪個詞語可以通向特定的頁面。比如說，不帶鏈接的文字就要避免使用藍色——深藍色是網頁鏈接約定俗成的標準用色。
而且，如果未訪問和已訪問的鏈接在顏色上沒有區別，他們可能很難回到之前去過的地方。這對所有用戶都有影響。不過，老年用戶更難記住自己訪問過網站的哪些部分，可能會浪費時間反復操作，然后又回到原點。
使用用戶熟悉的語言
Nielsen Norman Group的Jakob Nielsen指出，不是所有設計師都會閱讀自己設計出來的網頁，因此就不會去思考人們閱讀它所需的努力。
為老年用戶設計網頁時，要考慮展現信息的方式，他們聽力不佳或者視覺損傷。WCAG提醒我們，內容必須可被感知，具有特殊障礙的用戶仍然要能獲取到這些信息。如果視頻或音頻的內容對于試聽障礙者的體驗至關重要，就要額外提供副標題或字幕。提供朗讀功能，對于需要別人把文字讀出來的用戶至關重要。你可以嘗試使用一個文字轉語音（TTS）程序軟件，比如說Ivona（它很快會成為Amazon Polly）。
還有，要知道語音學、俚語和雙關語對于特定年齡的群體是一項挑戰。俚語會破壞用戶體驗，所以得確保文案迎合受眾。避免使用那些會讓用戶迷惑的行話，堅持使用能夠準確表達含義的語言。同理心地圖可以幫助你寫出對特定目標群體有效的內容。
易于點擊
55-65歲的年齡段，手眼協調和運動機能開始衰退，這就使得操作用戶界面變得更加困難。對于運動機能逐漸衰退的用戶，鼠標是一個特別的問題，因為點擊界面目標、在界面元素間移動、響應屏幕上的某個目標，都十分困難。
按Smashing Magazine的Ollie Campbell所說的，要應對這種障礙，就要確保可點擊的UI元素足夠大（對角線長度至少11mm），并且與其他元素之間距離要足夠大（至少2mm）。你也可以盡量減少鼠標點擊，如有必要，可以只留一個可點擊的元素。
對于運動機能損傷的用戶，滾動條同樣會導致可用性問題。按住細長的滾動條并執行滾動操作非常困難。而且，對于有閱讀障礙的用戶，滾動會影響他們的體驗，因為在界面移動之后，他們要持續不斷地重新找回之前閱讀文字的位置。
簡化滾動條——無論是外觀還是感受。給用戶多一些選擇（點擊滾動條箭頭、點擊頁面自身的可拖動區域、拖動滑塊、使用鼠標滾輪、或者使用鍵盤的上下鍵）。不過總而言之，還是盡可能避免產生滾動吧。
所幸的是，電腦鍵盤和移動觸摸屏能幫助老年用戶跟上時代。因為手指點按的機能退化得比其他機能要晚，許多老年用戶更擅長使用電腦鍵盤和觸摸屏。
使UI模式易于記憶，幫助認知
對于任何想要通過UI來完成任務的用戶，他們都需要盡可能快和簡單地從A點（入口）到達B點（任務完成）。所以清晰的UI導航如此重要。
但對于老年人，UI導航系統還需要更直接地為用戶流程提供方便。為什么？雖然我們的長期程序性記憶（記住如何做某件事）能力不容易隨年齡增長改變，但我們的注意力在衰退，短期的情景記憶會受損。這就意味著，我們學習新概念的能力會有極限，比方說學習操作一套為年輕人設計的新界面。
應該嘗試使用標準的圖標和導航模式，例如頂部通欄，能夠一眼看到所有選項，或者面包屑導航來引導用戶通過幾次點擊前往特定的位置。這有助于用戶習慣各功能所在位置，還有如何在網站上找到它們。
不要隱藏重要信息。保留面包屑導航來引導用戶前往網站的相關區域。
還有，要避免出現非必要的鏈接。這么做可以增加用戶的信任，鼓勵他們點擊鏈接，前往網站或應用中的重要位置。
了解你的用戶基礎
要使用戶體驗更愉快，應該要有一套捕捉目標用戶需求的框架。但是，不同的用戶成長在不同的科技年代，設計師們永遠無法取悅所有年齡層的用戶。
怎么解決？做用戶測試。
即使設計師們遵循這些為老年用戶設計的準則，但真正了解某人如何操作網站的唯一方法，就是做測試。對于老年用戶，考慮使用邊想邊說的方法做定性分析，通過測試，你能看到受試者屏幕上發生的一切。這有助于增進你對于用戶認知過程和物理限制的理解，并且確定UI系統的哪些部分需要再調整。
老年用戶最大的一個痛點是難以看清和閱讀屏幕內容。視覺或聽覺障礙，意味著某些老年人要非常費勁地解讀網站和移動設備上的內容。通過對你的界面設計進行真人測試，發現真實問題，你就會更準確的知道解決方案效果如何。
考慮使用原型工具來進行用戶測試，例如Justinmind，可以實時演示你的設計。這能讓你獲得即時反饋，知道為何和如何解決設計上的問題——這是定性用戶測試背后的原則。
而且，為什不再更進一步呢：把老年人受試者加入到設計過程中，讓老年用戶掌控自己的在線體驗。
總結
老年用戶群仍然有巨大的增長潛力。但就像其他任何用戶群體一樣，老年用戶需要我們設計出符合他們需求的體驗。隨年齡而產生的局限意味著，數字科技中一些常規的吸引用戶手段對老年用戶不管用。
識別出老年用戶的這些糟糕體驗，可以避免設計師在設計中犯這些錯誤。用戶測試是很安全的方式，確保你的用戶得到他們所需的東西。把老年用戶納入到界面設計過程中，用戶體驗絕不會差。
作者信息：Emily Grace Adiseshiah
原文鏈接：http://usabilitygeek.com/ux-design-thinking-senior-citizen-user/
]]>圖中可以看出5.5英寸以上屏幕可以稱Phablet，7英寸以上就是Tablet。這次案例以Tablet設備為主，Phablet設備為輔進行體驗設計。
在我們的社交平臺上，用戶消息在多個終端設備傳遞中，產品功能只是在原有基礎上簡單粗暴放大而已，那么大屏手機/平板電腦存在的價值化為烏有。
案例分析：這種結構化消息是目前國內主流的一種設計形態。
1.以消息為主的結構化設計:
不論是資訊分享、音樂分享、視頻分享不以內容區分而設計，都在一種載體內呈現，這種結構雖普適性強，可以兼容多元化的場景。但因設計形態統一，導致在內容辨識度上也有所下降，內容設計上沒有各自特點，用戶在瀏覽過程中容易忽略內容本質。
2.信息內容碎片化:
用戶可以獲取到更多信息，但因內容平均分布，所以畫面不夠聚焦。我們可以把這些內容信息看成點的組合，點的基本屬性是矚目性，能形成視覺的中心.當畫面中有3個以上的相同大小點時，畫面就會顯的凌亂。當畫面有不同面積的點時，較大點會引起人們的注意 ，依次會關注較小的點。
3.以標題文字為主進行快速瀏覽：
在瀏覽過程中用戶通常以抓取關鍵詞為主,快速吸引到下一級信息。而圖片在大部分情況下會有被縮小，裁剪，因圖片尺寸較小，從圖中獲取不到更多的信息。
在原圖中可以清晰的看到電視劇領銜主演的演員，這也是吸引用戶的關鍵因素之一。但被縮小裁剪后，必須借助文字才能獲取到關鍵信息。
這種以消息為主的結構化設計在iPhone7Plus設備顯示，相同信息可顯示約4-4.5條左右,有效提升屏幕利用率。但如果直接放大或拉伸到大屏幕中，這種設計體驗顯的蒼白無力，沒有充分體現大屏幕沉浸感、聚焦、畫面感的優勢。
1.以內容為主進行設計：
用戶會更加關注內容本身，不同的內容采用不同圖片的尺寸和排版，有利于用戶快速區分和記憶。
2.以圖片為主進行快速瀏覽：
首先圖片消費已成為閱讀消費中的一個大類，比文字而言，圖片更直觀，更具有視覺沖擊力，也更能適應現代社會的快節奏。圖片對于文字的詮釋作用幫助個人加深文字理解和形象記憶，提高閱讀的有效性和趣味性。一張圖片勝千言萬語，可以有效傳達情緒，迅速和用戶建立起共鳴。
3.比例結構：
從布局結構上盡量保證原始的攝影圖片和視頻比例不被過度裁剪。Flickr的一組數據顯示，隨著iPhone很大程度上替代單反成為主流拍照設備，4:3和16:9的圖片數量占比追上了傳統攝影的3:2。而16:9更接近美學比例，黃金分割。
4.突顯內容，降低信息密度：
使用負空間讓重要內容吸引用戶的注意力。很多人都說設計師這樣會浪費屏幕的空間，但是留白本身就是設計的基本元素之一。這樣更專注內容展現，通過放大內容，降低頁面信息密度，內容讀取更加舒適。
方案場景應用：
用戶可以快速辨識出內容類型，畫面有了聚焦元素，而不是滿屏的文字，界面賦予了感染力和活力。但如果用戶快速轉發了很多內容時，在兼容小屏設備時，屏幕利用率會有所下降。在iPhone7Plus設備上，同樣大小的信息在一屏內展示2-2.5條。用戶需要在縱向滑動多次才能抵達下一個信息類別。所以針對提高屏幕利用率上進行了方案2橫滑設計。
方案場景應用，引入橫滑設計
打破屏幕界限，減少跳轉，便于用戶獲得更多信息，在這個系統的基礎之上，構建跨平臺和超越設備尺寸的統一體驗。
總而言之不去追求那些奇異的事物，而是從人們所“共有的特征”來提取價值，用最自然最合適的方法來重新審視，重新設計。
Via: ISUX
]]>