身為用戶體驗設計師，無時無刻不被世界上的新事物沖刷著認知——互聯網紅利下降帶來變化莫測的商業動向、循著摩爾定律野蠻生長日新月異的新技術、各類亞文化群體催生出多元復雜的圈層文化、腦洞口味越來越獨特的年輕人，甚至眼下席卷全球的黑天鵝事件……
任何一個新事物的悄悄冒頭，都有可能在未知的將來影響著用戶體驗設計師。我們能做的是，在起初感受到微微震幅時，便沿著震感逐步尋找源頭，并思考未來的發展走向。趕在變化降臨前先擁抱變化。
本文通過研究近一兩年科技、社會文化以及自身用戶體驗領域的變化，從用戶體驗領域關鍵的用戶、媒介(設備與應用）、交互行為、信息與場景的五個角度出發，探索用戶體驗設計未來的趨勢，希望能帶來啟發。
隨著人工時代到來，過去機械的單向交互方式逐漸被打破，機器漸漸演化成了會主動「觀察」真實場景，「感受」用戶情感，預判用戶意圖并自動完成任務的貼心小棉襖。機器如何為人們提供更智能便捷的服務，未來還有非常大的想象空間。
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英寸是手機的黃金尺寸，但作為人們日常內容消費與娛樂的窗口，手機屏幕毫無疑問地變得越來越大，甚至超出傳統物理限制。人們對大屏享受的追求與設備攜帶便捷性之間的矛盾由來已久，硬件形態的變化對舊有的用戶體驗設計思路帶來的新的挑戰。
屏幕橫縱比越來越大，而人類的手部具有先天限制，曾經慣用的界面布局方式在高橫縱比的屏幕上可能無法被大拇指無障礙全覆蓋，使得越來越多的設計更加重視利用移動屏幕下半部分。
操作與信息進一步下移：
高德地圖、蘋果地圖的搜索框下移，方便單手操作用戶快速激活輸入框；
影視資訊平臺IMDB強化底部標簽欄功能，雙擊「搜索」tab即可激活輸入框，無須艱難地觸摸頂部。
即時戰斗類手游皇室戰爭的說明卡片主要展示在下半部分，方便用戶進行卡片上的相關操作。
底部導航被賦予更多能力：
Pocket的底部標簽欄現在兼任漢堡菜單功能，在激活狀態下再次點擊主頁icon可選擇主頁上須展示的內容。
利用下滑手勢代替點擊：
Snapchat的許多表示前后進退關系的頁面都不是」返回「按鈕，而是向下箭頭，用戶可下滑退出當前頁面。
為了解決設備形態和人類手部先天限制之間的矛盾，折疊屏誕生瀏覽并顛覆舊有的界面設計方式。
更靈活的信息布局
過去在單屏設計下，考慮到用戶注意力由上到下縱向衰減，因此信息布局更多是按照優先級從上往下排序。而折疊屏中，屏幕展開后便可以開辟出更大的可利用空間，將次級頁面或者較為重要的內容曝光在第二屏，對信息的布局將帶來全新的變化。設計師為保證大小屏下順暢的閱讀體驗，需要對信息模塊在不同空間布局下的流動性有更強的把控能力。
更便捷的多任務操作
在過去的單屏體驗中，用戶只能將注意力完全集中在當前的界面中，一次只做一件事。但在實際生活中，用戶面臨的情景往往是主線任務和支線任務的頻繁交錯，并且根據會任務不同的性質自由調動自己的注意力重心，如邊看視頻邊聊天、邊看直播邊逛街等等。在折疊屏中，設計師可以探索更多主線和支線交錯進行的場景，利用折疊屏帶來的更大的屏幕空間，可以讓用戶在不離開主線場景的基礎上進行支線任務的處理，大大節約了在不同App上來回切換的操作成本。
更直觀的拖拽交互
此外，隨著多任務處理越來越廣泛使用，拖拽交互將成為重要的交互模式之一。文本、表情包、圖片、視頻等交互對象，不再需要經過復雜的分享轉發流程才能在不同App中流轉，通過拖拽的方式可以更直觀地進行交互。
雙面屏互動玩法
外折疊屏在折疊狀態下可轉為雙面屏，等于是給用戶增加多一個觀看視角。例如華為 Mate X 的鏡像拍攝可以讓被拍攝者即時獲知自己的鏡頭影像是否滿意，這一拍女友神器有望成為直男拍攝終結者。在未來更多的多人觀看和互動玩法將被開拓出來。
△ 華為Mate X 的鏡像拍攝
未來隨著5G通訊技術的成長，越來越多的設備可以同時加入物聯網，人們的生活將被各種智能設備圍繞，設計師需要參與更多屏幕外的設計，讓不同設備串聯在一起協同合作，讓用戶能更加自在地享受科技的便利。
席卷全球的新冠疫情讓數十億用戶乖乖待在家里。過去需要花費大量精力去教育的用戶使用習慣因為疫情紛紛轉變。云購物、云蹦迪、云賞櫻、云監工……人們足不出戶便可還原許多線下場景。隨著用戶線上和線下生活的界限進一步模糊，用戶對于應用的效率和情感訴求也發生了變化。
疫情讓遠程辦公學習需求劇增，多人協作場景越來越頻繁，許多企業隨之升級了電話、視頻會議、文檔制作等多人協作效率軟件。過去僅僅考慮少人場景協作的方式不適用，設計師需要比以往更多地考慮多人協作場景下，如何對海量密集的信息進行分析處理和展示。
在學習方式上，由于線下學習轉移至線上，學生群體對于娛樂向軟件也有了效率訴求。為了順應用戶訴求變化，2020年5月QQ推出學習模式，屏蔽娛樂性的內容推送，讓學生更專注在學習上。
除了效率訴求急劇提升以外，隨著長時間的線上學習與辦公所產生社交疏離感和缺失感，人們對于線上學習工作的情感化訴求也進一步增強。
2020年推出的plagi遠程辦公軟件支持設置每個人的avartar形象，讓大家在遠程辦公時依舊能時刻感受到彼此的存在。在完成任務時還可以放鞭炮慶祝，讓員工能感受到親密無間的線上辦公體驗。
設計師需要更加關注如何讓線上生活進一步與現實生活圈和時間線接軌，通過拓展真實社交下的更多伴生行為讓線上也能還原線下的真實場景細節和互動體驗，以彌補用戶對真實社交的缺失感。
疫情的發生加速了人與信息之間的連接。人們越來越習慣將自身的身體資料、心情狀態等信息沉淀在智能設備上。
為了做好廣大市民群眾的健康監測服務，輔助疫情防控工作，微信和支付寶在2020年年初都上線了健康碼服務，不同顏色的健康碼代表人們不同的健康情況，市民出入特定場所都需初始健康碼。
隨著人的數據化越來越深入，個人身份信息的線上化在各平臺上將成為更加通用的能力。設計師需要考慮如何更自然更低成本地將線下動態變化的資料信息線上化，更有效地對用戶信息進行加工處理，以及記憶用戶的使用習慣和行為，以便幫助用戶更地完成任務。
疫情的出現加速了線下生活線上化，短短時間內我們看到日常習以為常的應用為響應疫情下的特殊需求紛紛出現改造，釘釘、QQ群被改造成上網課、批改作業的地方，醫療衛生公眾號開辟了實時疫情播報與辟謠通道，無接觸設計和服務需求異常突出……這也啟發了設計師需要保持對突發事件的敏感力以及應急能力，在日常生活中留心思考，為日后突發事件提供充足的場景支撐。
在洶涌的資本語境下，互聯網設計師裹挾在商業驅動的結果導向中狂奔，對設計的倫理和責任鮮有發聲，但伴隨著互聯網紅利退潮，發展放緩，狂奔之下的人本問題也逐漸浮出水面。在大趨勢下，UX設計師需要培養自身設計對倫理和責任的敏感度，在滿足商業目的外，重拾節操，為多群體，為大社會設計，更加注重「以人為本」。
包容性設計師指在做設計產品的時候，考慮到各類用戶的訴求，輸出具有包容性的設計方案。包容性設計依舊是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插畫：愛彼迎在插畫系統中，也為不同膚色，不同職業，不同性別，以及身障人士進行了人物的繪制。
2019是互聯網科技隱私問題沉浮的一年，國外有Facebook因泄露隱私收到史上最大罰單，國內則打響了「人臉識別第一案」?；\罩在隱私信任危機下，個人信息和數據立法突飛猛進，美國推動《加州消費者隱私法案》，國內也將在2020年出臺《個人信息保護法》和《數據安全法》。
MIUI12推出隱匿面具功能
Android開放生態導致的權限隱私問題一直被用戶所詬病，某些APP存在用戶不授權就無法使用情況，針對這一情況，MIUI12推出了隱匿面具功能。當用戶在開啟某些APP要求授權權限時，可以選擇空白通行證進行授權，從而保護用戶真實信息。
在MIUI12的更新中，還推出了照明彈、攔截網兩項隱私保護功能
iOS 14剪貼板提醒
在iOS 14的更新中，保護用戶隱私方面進一步升級。
其中剪貼板提醒設計很貼心，當用戶打開應用，如果該應用讀取了你剪貼板的內容，會在系統頂部彈出提示，用戶能在第一時間意識到剪貼板內容被讀取，幫助用戶更好的保護自己的隱私內容。
科技的發展是一把雙刃劍，互聯網產品的發展給用戶帶來便捷和沉浸體驗的同時，也使得用戶沉溺于科技所帶來的惰性和投食之下，逐漸喪失了對真實生活的把控權，被科技綁架。
數字福祉（digital wellbeing）近年被頻頻提起，指科技產品需要權衡好數碼產品和真實生活之間的平衡，防止數碼產品過渡分散用戶的注意力而影響生活質量。
Android Q 專注模式 Google Android Q Focus Mode
Android Q的更新加入了專注模式，用戶在專注模式下，可以在系統層面快捷地關閉使你分心的應用，讓你聚焦于更重要的事情。
防沉迷系統升級
推薦技術的進步，產品體驗的升級，給用戶帶來了更合胃口的菜式和沉浸體驗，但同時也被冠上了「電子海洛因」的稱號。游戲或者內容產品的防沉迷系統依舊會是數字福祉下不可避免的趨勢。
王者榮耀在2020年升級防沉迷系統，對青少年的娛樂時間和點券充值的限制進行了進一步升級。承接話。B站在2019年推出青少年模式，在該模式下，使用時長和內容推薦等做了定制化處理。
2020年的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
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
蘋果WWDC 2020在6月23日通過線上形式召開，本次開發者大會沒有發布太多硬件產品。不過macOS的新版本macOS big Sur依舊引來了大波關注，坦誠的講這次版本更新屬實是很震驚，這可能是近10年蘋果第二次顛覆性的改變，上次還是2013年的iOS 7開始全面扁平化，從而引發了設計圈「扁平擬物大戰」。
從系統連續性上看AirPods可以在不同設備上無縫切換，不同設備直接可以復制粘貼等等，顯而易見的一件事是，蘋果啟動了macOS的「 iOS化」，所以回歸到設計上，這次的升級對設計語言上的影響概括來說有以下幾個方面：
逐步 iOS 化的 macOS
不知道大家有沒有這種感覺：以前從諾基亞（或Android手機）切換到iPhone，動機是cool～，漂亮的外觀讓人第一面就愛上了，恨不得馬上就拿起來把玩?，F在給你個選擇切換回Android手機，不管那款手機有多漂亮多美好看，心里第一句話很有可能是：「XXX手機很棒，但我已經離不開蘋果的生態了哦！」（我就是這種德行，嘗試了N次還是回來了哈哈哈哈哈。）
這大概就是蘋果在系統打通的層面下的功夫，更加注重生態的維護，在不同的設備間尋找更多場景產生更多聯系。從設計的層面來看，iOS化的macOS對iPhone用戶更加友好，有相同的操作習慣，不必在mac和iOS上來回的切換。其實在Material Design推行的過程中就有相似的做法，Chrome的全面MD化，讓整個設計語言貫穿在移動設備和個人電腦中。
1. 完全繼承iOS基因的控制中心/通知中心和dock
全新的control center，可以看的出繼承了iOS/iPad OS的語言，UI和交互幾乎是沒有任何變化，整合系統一致性的初衷是甚好，在當下這個情況，不得不說亮度和聲音的調節我更依賴于物理鍵盤（或touchBar），不太清楚硬整合在一起的理由（難不成是過度解讀了，也許人家就想繼承繼承）。
從蘋果對產品的終局目標來看，也許會在硬件上取消物理控制按鍵或者更加優化 touchBar 去操控必要的屬性（也有傳聞說這是在為觸控版本的 macOS 做準備）。
同樣iOS化的通知中心（講真，用戶實際的桌面未必這么干凈，真是擔心本身在電腦側使用頻率就不是那么高的通知中心被混亂的文件夾淹沒）
2. 進一步強調的沉浸式氛圍
全局設計中最令我欣喜的是menu Bar的更進一步的優化！我在sketch里模擬了下效果（非嚴謹模擬哦），大概得出的結論是加高了背景模糊值，減少了本身的填充透明度，達到了現在的效果。
感官上來看的話是一個微小的改動，但從層級整合的角度這是蘋果設計的一大提升，通過光影等自然世界的隱喻抽象設計來減少硬性層級劃分，也符合Alan Dye（蘋果用戶界面設計副總裁）提出的「深度，陰影和半透明性用于創建層次結構」。
除了壁紙以外，圖標是最引人矚目的變化啦！iOS化的圖標規格的約束不用多說了，還有就是「新擬態」的第一次亮相。新擬態出現一定意義上是對這個時代獲取信息時枯燥感的厭煩與反抗，舉個例子：就像當你日復一日的穿基本款T恤的時候一定向往印花T恤，不管你是多么的成熟有型哈哈哈哈哈。
△ 左圖為新擬態，右圖為MD
icon的設計植入了新的設計理念，更突出去表現現實環境下的真實狀態，注重光影和厚度的變化，尤其是光影。細看每一個icon，嚴格遵循同一個光源（正頂光）去設計。
但話說回來，很難講這套icon是否成功，有幾個明顯的弊端也暴露出來了：
1. 可用性與美感的平衡
新擬態更重注光感的細膩程度，但對信息的有效呈現打了一定的折扣，這塊蘋果權衡決策下放棄了些許的美感，增強了有效的信息傳遞。
△ 圖片來源dribbble
2. 統一性
對一個生態來講，最最理想的是每一個生活在內的成員要和諧的相處，新的擬態風格相比扁平時代的圖標顯然給第三方開發者增加了難度，這種難度極有可能對沒有太多設計資源但又想好好開發應用的創業團隊造成一定的打擊（換句話說催生了設計外包的工作也不錯哈哈哈哈哈）。
總的來說，優勢和弊端同時存在吧，啥事都沒有完美的不是么～下圖是這次改版里我相對還比較喜歡的幾組icon了。
布局結構的簡化處理
從官方的HIG介紹中，sidebar被重點提到了。透過去看，其實是布局的底層邏輯發生了變化，10.15的時候上下兩段左右分欄的方式會存在一定的誤區：全局action控制當前試圖的交互？？？
從層級關系上也可以勉勉強強講得通，但實在是太牽強了，特別是前進后退按鈕存在所有文件之上這個蜜汁布局居然維持了這么久。層級清晰的梳理后帶來的一大優勢就是視覺的復雜性被降低了，借助現在這種列表視圖，很大程度上前進后退都用不到了。
另外要提及的是設計師可以思考的問題，下一代模糊效果-漸進模糊。這種模擬現實生活的真實模糊包括陰影/反光/相互透出，同時要考慮光源/角度/環境等等，不再單純的只是黑色/透明度（有興趣的話可以在sketch里模擬下或者留言討論討論～）。
人腦是需要一個提示來識別物體，我們稱之為反饋設計，這是人機交互中非常重要的一個環節，這也是為什么許多按鈕仍帶有陰影的原因。但是，這版本的macOS工具欄圖標丟失了形狀以消除視覺復雜性，所以重塑后的反饋會鼓勵用戶去操作。
對于設計師來講，不要害怕不強調所有選項，并非每個按鈕都需要具有形狀。只要設計足夠的反饋一樣可以起到被點擊的效果，例如當用戶將鼠標懸停在其表面上時，可能會出現更多的色彩更有趣的動畫，并盡可能消除視覺上的復雜性。
這次升級除了設計上的優化外，safari的變化也足夠令人欣喜，可以快速通過 tab 知道當前網頁的內容的功能真是令人欣喜（雖然我記得之前Yandex瀏覽器就是這么做的哈哈哈哈）。
可以預知時間地點的apple map：
悄悄的說，感覺蘋果越來越像騰訊了，有些小微企業的創新功能一受用戶喜歡不是買過來就是抄過來，有一種壟斷的感覺，想想悲催的Alfred和workflow都是這種命運。
macOS big Sur 的升級可以說是蘋果對未來的進一步探索，站在設計師的角度，有幾個值得學習的點：
文章來源：優設 作者：Nana的設計錦囊
近年來暗黑模式的設計趨勢開始一點點明顯，Ant Design 在這次 4.0 的升級中也對這類暗黑場景化的設計開始進行初步的探索，接下來就讓我們一起來看下 Ant Design 這一針對企業級的設計體系是如何設計暗黑模式的。
暗黑模式是指把所有 UI 換成黑色或者深色的一個模式。
需要說明的是，暗黑模式不只夜間模式：
暗黑模式更多的目的是希望使用者更加專注自己的操作任務，所以對于信息內容的表達會更注重視覺性；
而夜間模式則更多是出于在夜間或暗光環境使用下的健康角度考慮，避免在黑暗環境中長時間注視高亮光源帶來的視覺刺激，所以在保證可讀性的前提下，會采用更弱的對比來減少屏幕光對眼睛的刺激。
同時，從使用場景上來說，暗黑模式既可以在黑暗環境，也可以在亮光環境下使用，可以理解為是對淺色主題的一種場景化補充，而夜間模式只建議在黑暗環境下使用，在亮光環境使用時很可能并不保證信息可讀性。
1. 更加專注內容
試想一下，我們在電影院看電影時，為什么要全場關燈？甚至有些 APP，在影片的下方也會又一個模擬關燈效果的操作，來讓整個手機屏幕變黑，只剩下視屏畫面的部分，這都幫助我們可以更專注、更沉浸在當前的內容下。
色彩具有層級關系，深色會在視覺感官上自動后退，淺色部分則會向前延展，這樣對比強烈的層次關系可以讓用戶更注重被凸顯出來的內容和交互操作；尤其在信息負責界面內層級關系的合理拉開對操作效率都有明顯的促進作用。
2. 在暗光環境下更加適用
如今社會我們身處黑夜使用手機、電腦、iPad等設備的次數越來越多，環境光與屏幕亮度的明暗差距在夜間會被放大 ，亮度對比帶來視覺刺激也更加明顯，使用暗色模式可以縮小屏幕顯示內容與環境光強度的差距，同時也可以為設備的續航帶來積極影響，可以保證使用者在暗光環境下使用 OLED 設備的舒適度。
3. 大眾喜愛
黑色一直以來就可以給人以高級、神秘的語義象征，相比于淺色模式，暗色模式藏著更多可能性。
在這次暗黑模式的設計中主要遵循以下兩大設計原則：
1. 內容的舒適性
不論是顏色還是文字或是組件本身，在暗色環境下的使用感受應當是舒適的，而不是十分費力的，如果一個顏色在淺色下使用正常，在暗色下卻亮的刺眼或根本看不見，那必然不夠舒適也不可讀；所以在顏色的處理上不建議直接使用，這樣會讓界面變得到處都是「亮點」，讓眼睛不適的同時，也會帶來許多誤操作。
2. 信息的一致性
暗黑模式下的信息內容需要和淺色模式保持一致性，不應該打破原有的層級關系。舉個例子，在淺色模式下越深的顏色，與界面背景色對比度越大，也就越容易被人注意，視覺層級越高，比如 tooltip；在暗黑模式下我們同樣需要遵循這一規律，所以對應所使用的顏色也就越淺，反之則會越深。
在大量的企業級產品界面中，我們通常用只用一個白色背景結合分割線就可以搞定所有界面的板塊層級，因為在淺色模式下有投影可以借助，然而暗黑模式中投影將不足以起到如此功效，我們需要通過顏色來區分層級關系。
在經過對螞蟻企業級頁面的典型布局結構評估后，我們在中性色中增加了三個梯度，將中性色擴展至 13 個
并定義出通用情況下頁面中的框架層次，主要分為三大塊：
在目前的暗黑體系下，我們分別為這三大塊從淺到深定義了#1F1F1F、#141414、#000000 三個顏色，在實際應用中，你也可以根據自身業務的需求，從中性色板中直接選用或是依據透明度的思路自定義出合適的中性色彩。當定義出較為明確的框架層次和顏色后，也對后續系統中組件的顏色配置有著重要的指導意義。我們需要考慮組件出現在不同顏色背景下的可能性及其表現，盡量保持一致性。
眾所周知，暗黑模式與淺色模式最大的不同就在色彩的處理上，在暗黑模式中，我們并不想打破淺色模式下基礎色板的配置規律及色值，當一個應用或站點深淺模式并存時，希望在色彩上有一定延續和關聯，而不是毫不相關的兩套色板，這樣一是避免開發及后續的維護成本，二是實際切換和使用時，可以保證一致性，這意味著需要借助一定規則。
這里分享一下我們的處理思路：
基于 Ant Design 自然的設計價值觀，我們先從自然界中尋找靈感，如果說淺色模式如同初升時的朝陽，那暗黑模式就是落日下的晚霞，各有各的韻味，同一片天，唯一不同的是，受光線亮度的影響，晚霞整體會暗一些。
所以我們大體的設計思路也是基于淺色的基礎色板，通過結合透明度的轉換，去得到一套暗黑模式下的色彩。這樣的好處是，深淺模式下的色彩根基是同一個，在這樣的基礎上經過透明度的變換得到的結果也會相對和諧，同時也符合我們一致性的原則。
這里我們借助下面這兩個概念對透明度進行轉換：
對比度極性
對比度極性分為正極性和負極性。
這里可以給大家分享對比度查閱的一個工具：WebAIM，只要輸入色值就可以看到具體的值，十分方便。
正負極性差值
顧名思義便是正負兩者的差值，這里取的是絕對值。
根據一致性原則，我們嘗試通過對比一套顏色的正負極性變化趨勢來找到轉換規律。
首先可以看下，如果一個顏色在不做任何修改的前提下直接使用，它的正負極性趨勢以及差值趨勢的走勢和關系是怎么樣的，我們嘗試描繪出這樣的曲線，他們的變化規律也將作為我們規則轉換的參考標準。
經過對比，可以發現一些變化規律：
首先來說下「差值趨勢」，橫向對比可以發現，不同顏色的正負極性走勢是很不一樣的，可以看到在黃綠色段差值曲線達到一個變化峰值，這是由于黃綠色本身由于明度、飽和度值相比其他顏色偏高，所以總是有種刺眼的感覺，生活中也會用它來作為警示、提醒的作用，所以在深淺背景下的對比度有一個比較大的差異，可以說這個變化是正常的。
這點也可以從「正負對比度極性趨勢」兩者間的相對關系反應出來，從紅色到洋紅，綠線一開始從逐漸在藍線的上方一點，開始逐漸上移，最后在峰值處開始慢慢下移，在「極客藍」這個色相中接近重疊，在洋紅處又慢慢下移，說明淺色下越深的顏色，在深色中越亮，反之則越暗。
縱向比對單個色板，可以發現，其斜率變化主要受顏色的明度、飽和度影響，可以反應一個顏色的不同梯度在黑白背景下的變化規律。
有了這個大的變化規律，我們便可做到心中有數。首先以 Ant Design 的品牌色「破曉藍」為例，經過在多個業務、場景中不斷嘗試與調整，我們得到一個透明度轉換規則：
并將這個規則應用在其他 11 套色板中，驗證其可用性。這個過程確實沒有什么快捷通道，唯一的辦法就是不斷嘗試。
最后，我們將經過規則轉換的實色與常規顏色的變化趨勢做對比：
可以看到在大趨勢走向上左右兩側圖基本一致，這代表兩個色板在變化規律接近一致，基本可以證明規則的合理性。區別在于，對比度負極性和差值相對于右側未經處理的值明顯有所下降。這是由于透明度的處理讓暗色下的顏色在明度、飽和度上有所下降導致。
再仔細觀察可以發現，在左側的常規顏色中，從破曉藍-洋紅這段偏冷色系幾個顏色中，差值趨勢變化最平緩的是「極客藍」這顏色，這說明該顏色在深淺背景下的表現較為穩定，起伏不大，當基于一個統一的透明度規則前提下，會讓它在暗色下的對比度減弱，所以反而會導致差值趨勢變大，所以我們會發現差值趨勢變化較小的顏色轉移到了「破曉藍」、「洋紅」中，也是一個正?，F象。
最后可以看到顏色在調整過后實際應用的效果
在官網中點擊「切換」即可預覽：
如果上述 12 個色板不滿足你的業務需求，你也可以在官網上自己選擇顏色，我們會根據規則幫你生成一個暗色色板。
另外，如果在實際應用過程中，你選了色相在 225～325 間的深冷色系作為主色或強調色使用，建議適當提高透明度的值，避免在暗色界面上引起閱讀障礙。
暗黑模式中，文字的使用與淺色模式基本一致，依舊從 85%-65%-45%，唯一不同的地方在 disable 的狀態，其透明度值提升為 30%，避免顏色過淡真的「不可見」。另外，對于 #FFFFFF 的純白色文字，盡量避免大面積使用，尤其對于表格、列表這類偏閱讀瀏覽的場景，如有需要，做小范圍強調即可。
暗黑模式中的陰影規則與淺色模式基本保持一致，但由于本身的界面背景較深，在陰影色值上也有所加深，幫助層次更好的體現，整體將色值擴大到原先的 4 倍，但在陰影的位移、擴展上均保持不變。
分割線在暗黑模式中建議根據界面中常用的背景色，通過透明度換算成實色使用，Ant Design 中分割線主要有 #434343 和 #303030 兩種顏色，分別對應淺色模式下的 #D9D9D 和 #F0F0F0，這樣做的目的主要是為了避免帶來額外的交錯疊加，尤其對于表格類以及很多帶有 border 屬性的組件，實色會更為穩妥便于記憶。
適應性方面，Ant Design 的暗黑模式可以與海兔及可視化資產進行無縫銜接，使用時可以任意組合拖拽，你可以下載 Kitchen 插件，獲取海量資產。
暗黑模式最近越來越受到人們的關注，與某一特定產品的暗黑設計不同，Ant Design 的暗黑模式更多以設計體系的角度考慮企業級這個大場景下的內容，在易用性、擴展度、復用度等方面還有許多需要完善和繼續研究探索的地方，我們會在未來的迭代中逐步進行，先完成再完善。希望上述內容能對大家在暗黑模式的設計上有所幫助。
文章來源：優設 作者：AlibabaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
新擬物化——Neumorphism ，這么說可能不容易理解，但如果說「新擬物風格」，想必 UI 界的設計師們就知道這股「風頭」，在2020年刮的多么兇猛了。
烏克蘭設計師亞歷山大·普盧托 （Alexander Plyuto） 在 Dribble 平臺發布了一張 UI 作品《Skeuomorph Mobile Banking》，由于該作品使用了擬物化的設計風格，令人耳目一新，導致了作品的熱度持續飆升，并登上了平臺 Popular 榜首。Dribble 的評論區直接炸開了鍋，大家紛紛討論。
△ 普盧托的《Skeuomorph Mobile Banking》，獲得了3000多次喜歡
隨后一位評論者杰森·凱利（Jason Kelley）在評論中將 New Skeuomorphism 「新擬物化」組合得到的 Neuomorphism 稱為「新擬物」 ，并決定去掉「 o 」，于是新設計詞匯「 Neumorphism 」便產生了。之后大家便用此做 Tag ，為自己的新擬物化設計作品打標簽上傳。
此風格的出現也給一直流行的扁平化設計添加了新的展現形式。今年2月初，三星召開 Galaxy Unpacked 活動，為宣傳新設備而發出的邀請函，便應用了新擬物化。
△ 凸出的部分，用來比喻新機型的賣點
想要了解新擬物的由來，就必須知道擬物的概念。擬物又被稱為擬物化，或是現實主義（Realism），概括的說其主要目標是使用戶界面更有代入感，降低人們使用的學習成本，產生熟悉親和的情感聯系。
A skeuomorph, or skeuomorphism is a design element of a product that imitates design elements functionally necessary in the original product design, but which have become ornamental in the new design. Skeuomorphs may be deliberately employed to make the new look comfortablyold and familiar.
via：en.wikipedia.org/wiki/Skeuomorph維基百科上關于擬物化的釋義
Apple 蘋果公司最早提出了擬物化的設計概念，通過模擬現實物體的紋理、材質來進行界面設計，當時的 UI 設計師們都為擬物化設計「癡狂」。蘋果創始人喬布斯也非常推崇擬物化，他認為：「通過擬物化，用這種更加自然的認知體驗方式，可以減少用戶對電腦操作產生的恐懼感」。不妨來回憶下曾經擬物化的 IOS 界面：
△ IOS 5系統中的相機展開狀態（擬物化的鏡頭）
△ 擬物化的精美 ICON
△ IOS 6系統中，被精細刻畫的錄音機（底部指針也很惟妙惟肖）
而新擬物則是擬物的變體，在擬物的基礎上改變了圖形的樣式，讓設計元素看起來更有真實感，不再是精細的模擬，更像是從界面中「生長」出來。設計師 Michal Malewicz 以卡片的形式，將新擬物和質感設計（Material Design）對比，闡述了二者在實現時的差別。
新擬物卡片給人呈現的是一種無縫隙的「閉合」感，由界面中凸起；而質感設計卡片，則是漂浮狀，陰影向四周發散，沒有邊界限制；二者的光影效果也非常明顯，新擬物偏柔和，質感設計則相反，非常凸顯物體本體。
Michal Malewicz 還標注了新擬物卡片的背景、陰影和高光的色值，整體色調比較接近。
擬物化風格的結構由背景色+高光色+陰影組成，掌握了基本規律，就可以通過改變按鈕、卡片的參數進行調整變換。
△ 形狀、陰影參數的不同，實際效果也有區別
新擬物也經常被拿來與扁平化比較，因為擬物和扁平化是兩個相對的概念。其實在蘋果創造的設計系統的早期界面其實是非常擬物風的，但系統從 IOS 7開始，才轉向扁平的設計風格。
隨著 AR、VR 技術的進步，其實對于真實物理環境，或者說對顯示效率的提升之后，我們對接近物理環境的設計更熱衷了。比較有代表性的就是 Google 推出的 Material Design System，它基于人們去模擬真實的物理世界的樣子，進而在數字世界里展現我們對于真實世界的一個反饋后，這樣的設計流程和邏輯，也讓我們的設計更真實，更具有感染力。當然也不止 Google 一家發布了這樣偏擬物化的設計風格。
從美學角度來看，其實新擬物化拋棄了之前很多擬物化里不必要的冗余，比如一些陰影、細節的繁瑣設計，更偏近現在先進科技發展的設計風格。比如 Windows 推出的 Fluent Design System ，正迎合了未來的 AR、VR 技術廣泛普及后的設計環境，希望打造一個先趨的設計系統。
在 Fluent Design System 提到的特點有：Lignt、Depth、Motion、Material、Scale。
1. Lignt
光照，它指的是點擊或 Hover 的動作上面加入光照的效果，或是像柔和的光源灑落在空間中，可以去反應物體本身的反光質感，它和 Material Design 強調的光影的擴散的光影效果是不同的概念。
2. Depth
深度，其實它的概念從 Material Design 開始就已經被強調了，但是 Fluent Design System 希望是用更多的方式去呈現，比如井深的模糊效果，視差滾動的動態效果，物件彼此的大小與位置等等。
3. Motion
動效，其實它想強調的動態效果更接近真實的世界，更強調細膩的變化，比如李安的電影「比利·林恩的中場戰事」，這個電影拍攝的幀數與以往傳統電影不一樣，看起來的感覺會更加的流暢自然，你體驗過之后會很難回去之后那種電影呈現效果了。而 Windows 強調的 Motion 也是一樣的，比起這種單調的動作，它也會去強調每個設計對象彼此之間的動態效果的時間差，看起來會更加的流暢自然。而且與真實空間中前景后景的物理概念一樣，不同的時間差會更容易凸顯出想要凸顯的主題效果，也會更加的聚焦。
4. Material
材質，其實在 Windows 提出的 Fluent Design System 里面，它會出現大量的模糊，透明的背景。也就是模擬毛玻璃的材質感。通常也會代入一些微光源的效果。除了能夠吸睛，吸引你的視覺之外呢，其實在 AR、VR 的界面上面感知空間中的物件是很重要的，所以模糊的背景的利用可以在不影響觀看內容情況下，還能起到背景暗示的作用。其實毛玻璃效果在 Windows 系統中已經被運用到了，但是由于當時的效能以及干擾視線的問題僅僅運用在了一些小區域，而這次 Fluent Design System 的就成為了最強烈的視覺焦點，其實同樣的 iOS 和 Mac iOS 系統里面在最近的更新也大量使用了模糊效果。
6. Scale
縮放，在視覺上眼前的物體大，后面的物體小，所以縮放也是來營造空間感、縱深感，尺度感的這樣一個設計特性。
常應用于圖標、卡片或按鈕元素設計上，背景板多為干凈的純色；界面平滑，沒有明顯的顆粒感；
△ HYPE4《 Neumorphic Bank Redesign in Dark and Light mode 》
△ Filip Legierski 《 Banking App 》
按鈕的外邊框均設置了陰影、漸變效果，突出立體感；
△ Samson Vowles《 Neumorphic dark ui kit components 》
在視覺處理上，凸出的按鈕為可點擊的狀態，凹進去則代表已選中。
△ Emy Lascan《 Freebie Neumorphic UX UI Elements 》
層次結構弱
Whale Lab 觀察發現，新擬物弱化顏色區分而強調近遠景陰影布局，所以整體色彩都相近，除了在個別的位置加入其它顏色點綴，用戶識別起來也會迷茫；而卡片、按鈕都使用了陰影，高光效果，層次結構不明確，也很難帶來流暢的體驗；
△ 新擬物風格，Filip Legierski《 Neumorphism UI Elements 》
對比度和視覺限制
明顯的對比是界面設計的重要原則。由于新擬物風格具有各種陰影色調和角度，可單擊的內容與不可單擊的內容區域在哪里不是很好區分。根據產品的功能和要求，每個應用神經同構的產品都可以具有自己的UI階段規則；但是由于陰影，角度和浮動水平的不同，由于缺乏一致性，迷失方向的可操作項，「神經變形」會給用戶帶來混亂，最終為殘疾用戶造成使用障礙。
如同下面這個例子，按鈕狀態已點擊和未點擊的一個效果，由于受壓狀態的反差太小，則看起來的效果也沒有什么不同。
增加開發難度
更為嚴重的是，不少設計者在使用 Neumorphism 進行界面開發過程中，也遭遇到了不少局限。要實現這個風格，主要有兩個方式：
卡片、按鈕切圖，每個狀態（Normal、Hover、Pressed）都要裁切，導致資源庫圖片量過載；
代碼實現，這個風格的實現效果是對元素增加兩個不同方向的投影，但需要開發對每個元素添加投影，樣式代碼增多，工作量浩大。
網站neumorphism.io，可以快速生成 Neumorphism UI 。設置按鈕的參數值，就能看到多樣的新擬物化效果，非常神奇！
新技術、事物、趨勢的出現，起初都會給人們帶來焦慮甚至是恐慌。不管是擬物還是扁平，Whale Lab 覺得若是絕對化的去推崇某一種，都是錯誤的，盡管蘋果放棄了擬物進入扁平化，也不一定代表扁平就是最好，畢竟二者始終相輔相成。不敢否認，新擬物風格在今后是否變得「真香」，但對于設計師來說，從用戶體驗、產品出發的優秀設計，都值得被認可與尊敬。
文章來源：優設 作者：UX辭典
國潮品牌不斷在社交網絡中刷屏，大白兔、旺旺、RIO、六神、馬應龍、老干媽等品牌通過頻繁地跨界營銷，一躍成為國產“網紅”。對于年輕消費者來說，文化自信、獵奇心理和顏值經濟這3個消費者心理是導致他們更愿意購買國潮品牌的重要原因。
如果追溯本源，“國潮”一詞一開始更加側重是“潮”本身，是大約2000年起，由中國本土設計師或者創立的主理品牌，以獨特、自我為文化內核又融入時尚個性的設計，呈現出以街頭文化為主的穿著打扮和生活方式，為一小撮年輕人所追捧，在小眾圈子里受到追捧。但這時的國潮更像是一小部分年輕人的自娛自樂，還未代入大眾的視野。
后來隨著社會經濟的發展，迎來了國潮文化的轉折點。從2017年開始，伴隨著各種嘻哈節目和街舞節目的走紅，“潮”文化開始反向引爆主流媒體和大眾市場，越來越多的品牌看到了這一片尚未開墾的商業新大陸，越來越多的中國文化愛好者發現了這一片繼續文化核心注入的土地。
“國潮”一詞開始由“國”傾斜。一系列國潮品牌在這個突然開啟的風口被明星和網紅帶了貨，以相對親民的價格和獨特的文化核心走進了大眾市場，也吸引了更多國貨大品牌的加入。
引爆大眾市場的應該是許多中國老字號的“卷土重來”，如2018年李寧攜“悟道”系列登上了2018紐約時裝走秀，融入中國元素的新品引來了國內外主流媒體的報道，也帶來了社交網絡的刷屏，人們開始意識到“國潮”力量。
又如中國奶糖行業老字號品牌大白兔與國內原創品牌氣味圖書館聯名推出的大白兔奶糖沐浴露、香水，還有與“美加凈”聯名的大白兔潤唇膏，驚艷到大眾的視野。還有許許多多的國產品牌回力、哇哈哈、老干媽、百雀羚等都緊抓國潮趨勢，迎合年輕消費者需求不斷創新。
除去這些國產老字號品牌融合潮流外，國潮的發展還包括了文化與創意設計打造的新內容。比如故宮文創，一篇名為《雍正:感覺自己萌萌噠》的文章出現,帶來了超高的閱讀量。
故宮文創產品專賣店、快閃店、以及故宮文化創意產品國際綜合展的開幕讓越來越多的國人與外國人了解并愛上了故宮文創。還有故宮口紅，國家地理眼影等等產品也潮出了街?？傊?，一直莊嚴無比的故宮也跟上了時代的腳步玩起了潮流，成為名副其實的國潮。
那么，為什么一直處于小眾市場的國潮風一下子刮到了大眾視野，被人所追捧？以下將從三個消費者心理的角度進行探究。
首先，要想弄清楚消費者心理，必須先弄清我們面臨的是哪些消費者。早在2018年時，尼爾森發布了《2018年第四季度中國消費趨勢指數報告》，報告顯示，90后（1990年-1999年出生）消費意愿為63點，高于80后（60點）、70后（54點）、60后（54點）等年齡段，成為互聯網時代的消費主力軍。
因此，我國目前的消費者群體逐漸年輕化。在報告發布當天，由大學生參與評選的 2018年大學生喜愛的品牌——金塔獎舉行了頒獎儀式，最終，OPPO、聯想、淘寶等9個品類37個品牌獲得年度大學生最喜愛的品牌。
評選結果顯示，國產品牌占了九成，這也意味著，國貨在年輕人消費里占比越來越高。因此，對于年輕消費者來說，究竟是什么心理導致他們更愿意購買國產品牌？
從前的消費主體是70后、80后，他們成長的時代是“洋品牌”的時代，對國外品牌崇拜，而對國內品牌充滿著不信任的心理，導致這一心理很大一部分原因是國產品牌創新意識淡薄，產品質量差。
然而隨著中國經濟的不斷發展， 我國產品質量國家監督抽查合格率已連續4年保持在90%以上，“中國制造”正向“中國質造”方向努力轉變，更多國人對國貨品牌重拾自信。
因此，當代年輕消費者成長的時代實質上是國貨產品崛起的時代，年輕消費者對不斷創新的國貨產品有了一定的信任，不再崇洋媚外。加上中華傳統上下五千年文化一直是中華人民民族自豪感的來源。中華人民對傳統文化一直有著深深的認同感。
因此，“國潮”將傳統文化與時下潮流相融合，既符合年輕消費者對時尚的認知，又能夠吸引他們對中國文化的關注，展現他們對文化價值的認可，同時還能引發年輕群體的情感共鳴，滿足他們的情感寄托。
所以，國潮興起是基于國家對傳承和弘揚傳統文化的大力支持以及新時代下消費者強烈的本土意識和文化認同，而消費者對國家文化的自信是國潮爆火的主導原因之一。
年輕消費者的好奇心比較重, 在進行消費的過程中會受到獵奇心的影響, 年輕消費者對新事物常常會產生較大的興趣, 并且勇于去嘗試, 這也是年輕消費者的消費對象常常帶有個性化風格的主要原因。
因此對于年輕消費者來說，那些銘刻在童年記憶的品牌再次以光鮮亮麗又不失特色的新鮮事物重新進入消費者市場，必定會讓他們眼前一亮甚至感到欣喜。特別是這種新鮮事物深深地迎合了他們內心對本土文化的認同感，獵奇心理便會在年輕消費者的購物中起主導作用。
我們常常說，這是一個“看臉”的時代，顏值即正義，而這一理念，不僅僅是人，更是生活中每一個事物。對于品牌來說，更是要注重顏值經濟，對產品進行“高顏值”包裝是吸引消費者的第一步。
顏值經濟為什么會盛行？信息碎片化已經成為當今的一個時代特征，海量信息不斷分散著人們的注意力，在這樣一個大環境下，高顏值自然成為吸引人們注意的一種方式。同時，消費觀念的轉變讓大家對消費從產品本身轉變為消費符號、社會認同甚至自我個性表達，產品甚至成為年輕人的一種社交“貨幣”。
為什么會在國潮談到顏值經濟？
因為實質上，那些被冠以“國潮”之名的，都有著一個特性，那就是產品本身有著高顏值的外表。
比如，新茶飲領域的頭部品牌喜茶，聯合了眾多新老國貨，以“靈感之茶，中國制造”為口號，無論是主題紙袋、杯套還是雪糕筒、貼紙，都給人一種酷斃了的感覺；比如，美妝領域的網紅品牌完美日記，從單線眼影、九色眼影盤到十二色、十六色眼影盤，既玩轉了經典色的實用性，也擁有了高階色的豐富度。
也就是說，無論對于新手玩家還是專業彩妝師，都能夠被其絢爛的顏值所折服。再有，無論是鐘薛高這樣的網紅雪糕品牌，還是李子柒淘寶店里五彩繽紛的中國傳統美食，無一不是頂著高顏值的外表。在這些高顏值外表下，國潮才能被年輕消費者們認可。
[1] 周暉. 論行為經濟學視角下年輕消費者的消費行為.[J]. 中國商論 2018,(04),54-55
[2] 本刊綜合.百草味：深諳“顏值經濟” 玩轉“色彩營銷”.[J]. 中國合作經濟 2020,(05),33-37
[3] 陳美汐. 試論國潮文化的發展.[J]. 大眾文藝 2020,(06),273-274
[4] 黃夢嵐,莊宇錚,翁文靜,許安心. 中國文化自信對國貨品牌消費的影響.[J]. 商業經濟 2020,(05),68-69
[5] 搜狐新聞 “國潮”IP爆紅背后的4個底層邏輯！. 2020-02-10 . https://www.sohu.com/a/371808278_286549
文章來源：人人都是產品經理 作者：葉艷紅
iOS 14 桌面小組件是這次更新當中的重要功能之一。桌面小組件賦予了 APP 全新的入口，更豐富的交互層級，更多樣的操作模式。
這個在 Android 上存在了十幾年的功能，時至今日，給人的感覺和認知依然不夠強烈——時鐘、天氣、播放控制、快捷開關、待辦事項可能是用得大家最多的幾個小組件，而絕大多數用戶不會主動想到去用小組件功能。
但是簡單地用「抄襲」二字來描述 iOS 14 上的這一特性又欠缺妥當——畢竟早在 2005 年，Mac OS X 10.4 Tiger 中的 Dashboard 就已經把屏幕小組件給玩兒出花來了。
2005年 Macworld 喬布斯演示Dashboard 小組件
Maemo 開發者大會上探討小組件背后的心理學機制
在移動端設備上，單具備觸摸屏功能的系統當中，無論是更早的塞班、Maemo，還是同時期的 webOS、Windows Phone 其實都有各自的 Widgets （WP叫動態磁貼，APP 和組件的融合設計）。其中， Maemo 的設計團隊甚至曾經聘請過心理學和行為學家來專門研究小組件的用戶交互背后的心理學原理。
Windows Phone 中的 APP 快捷方式和小組件是一體化的，多尺寸可選
webOS 中同樣也有屏幕小組件
所以，在今天，更值得我們關注的問題在于：作為目前最主流的 iOS 系統，它的桌面小組件在設計上有哪些講究，而它和 Android 上的桌面小組件有哪些不同？
答案就在 iOS 14 悄悄更新之后的設計規范當中，咱們一起來看看吧。
說明：以下的內容為蘋果官方設計指南（HIG）的翻譯。
小組件能夠提煉 APP 中的關鍵信息，呈現在 iPhone、iPad 和 Mac 當中最為醒目的位置。小組件以一種令人愉悅的視覺和交互形態，幫助用戶個性化地呈現屏幕內容，優化主屏幕的體驗。
小組件在 iOS 14 和 macOS 11 及更高的版本上才可用，而相關的開發人員文檔可以戳這里閱讀：
小組件通常有小、中、大三種不同的大小尺寸，在iPhone、iPad 和 Mac 系統當中，用戶可以在小組件庫當中找到小組件，并且選取合適的尺寸。選擇了小組件之后，用戶可以進入界面編輯模式，在這個模式下，用戶可以移動小組件到想要的位置，并且可以根據需求進行進一步的設置和調整。比如可以在同一屏上放置多個小尺寸的天氣小組件，并且通過設置，讓每個小組件顯示不同位置的天氣。用戶可以將組件放置到主屏幕上，也可以放到 iPhone 的 「今日」頁面上（也就是所謂的最左側的負一屏），iPad 的 「今日」 頁面上，以及 macOS 的通知中心。
在 iPhone 和 iPad 上，小組件還預制了「智能堆?！构δ?，也就是說多個小組件可以在同一區域堆疊，同樣的，用戶可以將它放置在iPhone 的主屏幕以及 iPhone 和 iPad 的 「今日」 頁面上?！钢悄芏褩！怪邪幌盗心J小組件，它涵蓋了用戶經常會打開的各種小組件，并且隨著時間的變化，Siri 會幫用戶篩選出最符合當前環境和語境下的小組件內容，突出顯示。如果用戶打開了「自動旋轉」的選項，Siri 同樣可以高亮顯示自定義的小組件堆棧中的相關小組件。
注意：曾經為 iOS 13 以及更早系統版本所設計的小組件，在新版的系統的主屏幕上是不可用的，但是仍然可以在 「今日」 視圖和 macOS 的通知中心使用。
盡管用戶可以點擊小組件進入APP，然后進行更多的操作，但是小組件的核心功能，始終是顯示少量但是即時的、有用且高度相關的信息，讓用戶無需進入 APP 就可以獲取信息。明確每個小組件的核心目標，并且梳理整合需要展現的信息，是整個設計過程中至關重要的一步。
在多數情況下，你需要將你的設計目標梳理得非常明確。比如天氣 APP 的小組件，需要顯示的特定某個位置的天氣信息，而一個卡路里跟蹤的 APP 的小組件需要顯示的，可能是當天消耗的卡路里，而新聞 APP 的小組件可能展現的是熱門資訊。通常，小組件可以很專注地呈現程序的一部分內容，就像游戲當中角色所處的狀態一樣。
在較大的小組件中，你可以顯示更多的數據，或者更詳細的可視化的效果，當然，不管多大，它始終應該專注于做一件事情。例如在較小尺寸的小組件中，可以僅僅顯示當前當地的天氣信息，一天中的最高溫度，而在中等尺寸的小組件中，同樣的數據也被列舉出來，但是額外增加了 6 個小時的天氣預報。在大尺寸的小組件當中，可以在6小時預報的基礎上，還額外展現未來 5 天的天氣預報。
小尺寸小組件
中尺寸小組件
大尺寸小組件
人們真正喜歡小組件的地方，是它能夠提供有意義的信息內容，而不是提供另外一個程序快捷方式。
通常，設計師需要避免簡單地擴大小組件的尺寸而不針對性地修改內容，創建的小組件尺寸變化的同時，它的內容也應該進行相應的優化和改變。
如果小組件的內容沒有變化，那么用戶可能不會將它置于醒目的位置。盡管小組件不太可能每分鐘都有所更新內容，但是盡量保持更新的內容，可以更多地吸引用戶的目光，這一點很重要。
比如日歷的屏幕小組件，可以針對特定的時間和事件進行獨特的視覺處理，比如在生日的展現方式就不一樣。
在許多情況下，用戶需要提供特定的信息之后，屏幕小組件才能顯示有效的內容。比如，用戶在使用天氣APP的小組件的時候，需要先選擇特定的地點；使用股票APP的小組件的時候，需要選擇特定的一支股票。不過也有例外的情況，比如 Podcasts（博客） 的小組件默認顯示最近內容，因此用戶無需預先進行配置就可以直接使用。
這些在使用前要進行的配置選項，不應當要求用戶進行過多的設置才可使用，應當足夠便捷。同時，用戶也無需針對小組件的 UI 進行配置，因為桌面小組件的 UI 界面對于用戶而言，是已經配置好的。相關的開發文檔可以戳這里查看：
當用戶點擊小組件的時候，它可以打開 APP 當中對應的頁面和位置。比如，當用戶點擊股票APP 對應的小組件的時候，由于小組件顯示的是特定的股票的信息，所以點擊小組件之后打開 APP ，APP 應該顯示的是這款股票所在的頁面和完整的信息。
通常最小尺寸的小組件可以提供一個可點擊的元素，而在中大尺寸的小組件當中，可以提供多個可點擊元素，比如中尺寸的筆記 APP 小組件當中，可以添加多個筆記條目，點擊其中任意一個可以顯示對應的筆記內容。
盡管有多個可點擊元素對于 APP 而言非常有意義，但是提供過多的可點擊元素，可能會讓用戶迷惑且無法正確點擊對的目標。
在有的 APP 當中，用戶登錄之后可以獲取更多的功能和服務，可以在小組件中讓用戶知道這一點。比如，對于一款預訂類的 APP，可以在小組件中包含「登錄以查看預訂」這樣的提示。
為了保持小組件內的信息的相關性和有效性，小組件應該定期刷新以更新內容。小組件不支持連續的實時更新，并且系統會基于種種因素，來調整和限制其內容的更新頻率。為了讓小組件找到對的更新頻率，你需要知道你的 APP 的內容更新頻率，并且預估用戶會多久查看一次新的數據。舉個例子，潮汐變化雖然是實時的，但是用戶追蹤海灘潮汐信息變化也通常是以小時來計算的。如果你注意到用戶查看小組件的內容頻率變化，超過了它的信息更新頻率，那么你可以考慮在小組件中顯示上次更新的時間節點，以便用戶知曉它的更新頻率。相關的開發人員文檔看這里：
小組件本身的更新頻率是受限的，你可以讓系統來直接更新其中的時間和日期，將注意力集中到開發它的其他功能上。
如果你確定了數據的更新頻率，就沒有必要將舊有的信息作為占位符來使用。
在 iOS 14 以及更高的版本當中，小組件可以使用豐富且大膽的配色，使用令人回味的配圖以及清晰的文本，所有的這些優質的設計素材可以讓小組件中的信息和功能一目了然。獨特、精美的小組件不僅提供有效的信息，而且還能讓整個屏幕內容個性十足。
如果你需要在小組件中呈現品牌LOGO、文字名稱、應用圖標，那么盡量以無干擾的模式來將內容集成到其中。在某些情況下，比如當你使用屏幕編輯模式來調整布局的時候，系統會在小組件的下方顯示對應的 APP 的名稱和信息，因此你無需在小組件中再做強調，盡量以色彩、版式等視覺設計來凸顯它的特征。
如果小組件中信息過于稀疏，那么它看起來不太具有存在的必要；如果信息量太過于密集，則可能讓整個小組件顯得臃腫密集且難于使用。你需要尋求合理整合內容的方法，確保人們能夠立刻掌握信息，尤其是基本的信息，并且可以在此基礎上花費更多的時間來查看細節。你可能在更大尺寸的小組件上，用信息圖來替代簡單的文本，這樣也不會讓信息過載，但是呈現形式上的改變，會讓體驗變得更好。
豐富漂亮的色彩是非常吸引人的，但是色彩決不能影響用戶吸收和了解基本的信息。色彩應該可以作為提升整個小組件視覺屬性的一種重要手段，但是它一定不能喧賓奪主，影響內容本身。在 iOS 14 的設計素材中，內置了一系列的系統推薦用色。
小組件應該在深色和淺色模式下都看起來非常棒才行。通常，盡量避免在深色模式下，使用淺色的小組件背景并搭配深色的文本，或者在淺色模式下，使用淺色文本搭配深色背景。當你根據使用 iOS 系統內置的語義配色系統來配置背景和文本配色的時候，色彩可以根據你當前的環境，自動匹配。
當然你還可以借助現成的設計素材來手工配置和選擇。詳細的使用說明可以參考下面的鏈接：
使用系統字體能夠能夠讓你的小組件看起來非常原生，并且不論是什么樣的文本字重、樣式，都非常的美觀。如果你使用其他的第三方字體，可能很難做到這一點。當然，如果僅僅是在小組件的標題中使用自定義的第三方字體，而正文和其他的文本字體使用 SF Pro，效果也可以做到很棒。具體可以參考下面的規范：
確保小組件中文本正確調用字體，而不是被柵格化之后的視覺元素，這樣可以讓系統內置的 VoiceOver 讀取其中的內容。
SF Symbols 能夠幫助你讓符號圖標以及 SF Pro 的文本可以正確對齊和縮放。相關的內容可以參考下列規范：
當小組件在加載相應的數據之后，就可以顯示占位符的內容了，但是這些占位符信息應該足夠逼真才能幫助用戶認識它。將 UI 中靜態的框架和視覺化的占位符結合起來就可以創建出可供識別的預覽模式。比如使用半透明的條狀矩形來作為文本占位符，使用圓環或者正方形來替代圖像和符號。
小組件的描述能夠幫助用戶更清晰地了解它的功能。巧妙地使用引導性動詞能夠更好地幫助用戶了解它的功能。比如，「查看當前天氣狀況和位置」以及「跟蹤即將開始的活動和會議」。避免不必要的短語，盡量使用平易近人的表達方式。
屏幕小組件可以縮放以適應不同的屏幕尺寸，除了使用 SF Pro 和 SF Symbols 之外，你還需要控制好小組件的尺寸，確保在每個不同的設備屏幕上看起來都很舒適。
為了確保你的圖片素材在最大的小組件上看起來都是不錯的，可以盡量按使其按比例縮放來匹配較小尺寸小組件的顯示。下面是尺寸規范：
為了確保你的設計和小組件完美的匹配起來，請注意匹配兩者的角半徑，在 SwiftUI 容器內設置正確的角半徑。相關的開發文檔看這里：
標準的邊距為 16pt，如果你的小組件當中包含有文本、圖形等元素，請使用標準邊距以避免邊緣擁擠導致體驗不佳。如果使用圖形背景來創建分組，或者有按鈕元素，那么你可能需要使用窄邊距（8pt）。
iOS 和 Android 是目前最主流的兩大移動端操作系統，其中 Android 平臺的小組件出現得相對更早。但是相比于更加統一的 iOS 平臺，百花齊放的 Android 第三方定制化的系統，加上相對寬松的開發機制，使得 Android 平臺上的小組件設計極度缺乏統一性。
在 Google Design 頁面當中，Material Design 的設計規范在很大程度上已經比 iOS 更加豐富，但是在小組件設計這一章節的內容，可以用簡單粗陋來形容。
設計規范中，相對簡單地展示了 Android 小組件的4個常見類別，以及4種常見交互。下面是對 Android 這套寬松簡單的設計規范的快速歸納：
信息展現型小組件是將對于用戶重要的信息，隨著時間推移來呈現，比如時間、天氣、運動狀況，點擊即可帶用戶跳轉到 APP 當中。
信息集合型小組件會顯示更多的信息，它專注于兩個交互：瀏覽收藏和打開詳細信息。
控制型小組件的功能是在不打開 APP 的前提下，直接觸發某些 APP 的功能，比如音樂控制。
混合型小組件可以將多種功用混合到一個小組件當中。
Android 小組件通常支持4種交互，一種是滾動瀏覽，一種是尺寸調整縮放，還有就是導航操作，比如跳轉到特定APP當中，最后一種是進行配置調整，比如對組件中的元素進行調整。
單從信息量上來說，Android 系統的小組件設計指南僅僅只是做了最基礎的指引，考慮到生態的開放性，這種「放任」是很自然的一件事情。
從 iOS 14 開始，蘋果在 iOS、iPadOS、macOS、watchOS 乃至于 tvOS 上的聯動與融合，已經變得非常深入了。而 iOS 系統的復雜性開始顯露，小組件就是其中的一環。
和蘋果一貫以來的UI設計類似，它有著開放的一面，但是它的另一面是約束，這種約束很巧妙，比如說深色模式，你使用官方的設計和開發素材，調用官方的組件，能很快實現頗為不錯的效果，但是與此同時，你的設計和開發空間也受到了相應的約束。
在 Android 上，小組件可以更為自由地調整尺寸，但是誰都無法準確預知它在某一款手機上，整體的體驗是什么樣的。這個小組件的邊緣會和哪個圖標對齊，風格是不是一致的？這種問題在 iOS 14 上很大程度上是不存在的，單尺寸問題就已經進行了極為詳盡的約束——它一定會對齊，在體驗上幾乎不太可能跑偏。
從小組件開始，我們迎來一個更加豐富、復雜的 iOS 系統。
文章來源：優設 作者：陳子木
設計美觀、和可用的UI界面需要花費很長的時間，還需要來回多次的設計修改。
經過不斷地調整，最終才能產出令客戶、用戶和自己真正滿意的產品。
在這里，我們總結了一些實用的小技巧，這些技巧可以幫助設計師很輕松地改善設計，并為以后的設計實踐提供有用的指導。
當涉及長篇內容時，大面積的深色粗體字會給人一種沉重感，而且很跳躍。
通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個問題，使文字更容易被識別。
當字體變小時，增大行高可以獲得更好的可讀性和易讀性。
這里介紹兩個容易被混淆的概念——行高和行間距：
設計時不必總是用多種顏色來填充設計。
如果項目允許，只需使用固定的色板，通過選擇基礎色，然后調整色調和顏色深淺，利用這種簡單的方式為設計增加一致性。
通過結合使用字體大小、權重和顏色，可以輕松突出UI中最重要的元素。進行簡單的調整即可使用戶體驗更好。
在設計UI圖標時，要保持一致。確保它們具有相同的視覺樣式，相同的比重、填充或輪廓。
圖標通過視覺手段為用戶提供必要的信息，所以保證功能相同的圖標元素一致，外觀視覺一致。
通過使用顏色對比、尺寸和標簽，確保「行為召喚」盡可能突出。
如果可以的話，不要總依賴圖標，也可以使用文本標簽，以便用戶能更好地理解。
行為召喚：透過設計讓用戶想到要做某種行為，例如提示用戶去觸發按鈕、文本或圖片。
填寫任何形式的表單時，在用戶剛進行的操作旁邊及時出現一條錯誤反饋，是一個簡單但有用的額外視覺輔助。
設計要在產品內部使用的菜單時，請確保在屏幕上突出顯示最常用的操作(如上傳圖像、添加文件等)。
文章來源：優設 作者：Clip設計夾
共情圖、客戶旅程圖、體驗地圖和服務藍圖雖然分別描述了不同的流程，并帶有不同的目標，但它們都是一個組織內部建立共識的重要方法。
設計和研發一款產品通常需要組建一支人員復雜的團隊，成員有著不同的背景和經驗，他們必須在項目目標，用戶需求和行為，甚至是開發組件流程上有著共同的認知。這種共識一般是建立在可視化（通常指的是各種地圖）基礎之上的。 可視化地圖（mapping）可以有效地描述與產品相關各方面的特點和流程。
本文概述了4種常見的地圖，它們的特征定義以及應用場景：共情圖；客戶旅程圖；體驗地圖；服務藍圖
此外，本文將介紹簡單的「3步決策法」框架，說明創建這些地圖前需要做出哪些關鍵決策。
共情圖用來幫助團隊成員理解用戶的心智。
定義：
共情圖是一種用來明確表達我們對某一特定類型用戶認知/理解的工具。它將用戶知識具像化，以便于建立共識；輔助決策。
特點：
為什么用：
什么時候用：
客戶旅程圖關注特定客戶/顧客與產品/服務的交互。
定義：
客戶旅程圖是將一個人為了完成與特定業務或產品相關的目標所經歷的流程可視化。它用于理解和解決客戶需求和痛點。
在客戶旅程圖最基本的形式中，它首先把一系列的用戶目標和用戶行為放到以時間軸為主線的框架中去。接下來，以用戶的想法和情感來充實框架，從而構建一個完整的敘述。最后，將敘述凝練成可視化的形式，用來在設計過程中交流觀點。
特點：
為什么用：
什么時候用：
在設計過程中的任何時候，作為整個產品設計周期中團隊的參考點
體驗地圖涵蓋了跨用戶類型和產品的客戶旅程圖。
定義：
體驗地圖是對「一般人」為了完成一個目標經歷的整個端到端的體驗可視化呈現。這種體驗與特定的業務和產品無關。它用于理解一般人的行為（這與客戶旅程圖不同，客戶旅程圖更具體，更加關注與特定業務相關的內容）。
特點：
為什么用：
什么時候用：
與客戶旅程圖相似，但服務藍圖會以員工為中心。
定義：
特點：
為什么用：
什么時候用：
在繪制地圖之前（無論上面哪一種），必須做出如下3個關鍵決策：
決策1：現狀 vs 未來
第1個決策涉及到可視化地圖中「行為」和「狀態」的描述：它們反映的是當前狀態還是理想狀態？
現狀地圖（Current mappings）是基于真實的「當下」狀態制作的地圖。如果目標是識別和記錄現有問題和痛點時，這種方法比較理想。用現狀地圖有助于分析研究結果，亦或是圍繞數據驗證問題在團隊內達成共識。
未來地圖（Future mappings）是基于用戶類型、體驗、或者未來的服務架構的一種「理想」狀態制作的地圖。未來地圖有助于重塑或構想一個用戶或者體驗在未來的感受。未來地圖可以為你理想中的產品或者服務設定一個基準或者目標。
決策2：假設 vs 研究
該決定取決于將用于構建地圖的輸入類型。
假設型地圖（Hypothesis mappings）是基于團隊或組織機構中對現狀理解的累積。這種方法很好，可以合并多個已知的團隊視角，并建立一個研究計劃（基于假設地圖中出現的差異），進而成為邁向更具高保真度的和研究型地圖的基礎。
研究型地圖（Research mapping ）是基于數據導向的，這些數據是為構建地圖而專門搜集的。如果有充裕的時間和資源用于制定研究計劃，那這種方法是最好的。雖然這是建立地圖的最佳方式，但是它需要大量時間和的投入。不管從哪里開始，你的地圖都應該是可以迭代的，并不斷把新的發現更新進去。
決策3：低保真 vs 高保真
這個決策關系到最終可視化地圖呈現的質量。
低保真地圖（Low-fidelity maps）往往未經打磨，通常以靈活、粗糙的便簽制作。低保真地圖在流程的初始階段是最好用的。低保真地圖意味著很少的投入或創造工作，并且使人們能夠根據需要進行協作、修訂和更新。你可以使用便簽（直接貼在墻上或者像Mural.co這種數字化的工具）或者協作的excel表格進行制作。
高保真地圖（High-fidelity maps）是經過細致打磨的，通過數字化創建并看起來更像是成品。高保真地圖最適合創建需要在團隊多人之間分享的地圖。高保真地圖很容易理解，但是因為看起來是「成品版」，所以不夠靈活。這種地圖一般是數字化的格式，便于傳播。
所有的用戶體驗類地圖都有2個好處。首先，創建地圖的流程促進了溝通交流，并建立一致的心智模型。其次，由地圖產生的共享內容，可以在你的團隊、織機構或者合作伙伴之間使用，以傳達你對用戶或服務的理解。地圖也可以隨著團隊的成長，為決策提供依據。
選擇A地圖而不用B，并不會導致項目失敗或者保證項目成功。理想的狀況下，你應該根據需要，在項目的不同階段使用這4種地圖的不同組合，以便深入了解你的用戶和組織。
文章來源：優設 作者：UXRen
線是平面構成的三大要素之一，在各類設計中都有著廣泛的應用，而其中的斜線更是設計師非常喜歡的元素，相比水平和垂直的線，斜線更特別、更具動感，下面我們來看看斜線有哪些主流且強大的用法。
區隔信息是斜線最常見的用法，通常用來區隔左右、左上和右下兩部分的信息，用斜線區隔的內容不需要對齊排列，這樣看起來更靈活一點。
在海報設計中就經常用斜線來區隔年月日等日期信息。
很多簡單的元素完整呈現出來時會顯得很普通，這時依據斜線將其切割可以增加設計感，即切除元素的局部，只保留元素剩余的部分以及斜線，元素被切割后的不完整性會增加元素的獨特性和神秘感，所以更容易讓人眼前一亮。
PS：切割的時候要注意保留元素的美觀性和識別性。
由于斜線具有一定的動感，通過重復排列后又具有節奏感，且線本身占面積比較小，不會對畫面造成太大干擾，所以很適合用作裝飾元素，斜線主要是從以下幾方面來起到裝飾作用的。
1. 增加動感
一些以文字為主且文字是水平或垂直排列的設計，可能會因為太過常規或缺少對比而缺乏動感，這時在文字周圍增加一些平行的斜線，使其與主體形成方向對比，就可以大大提升該設計的動感。
2. 增加氛圍
比如在一些促銷設計中，如果畫面中缺少裝飾元素的點綴，那么促銷的氛圍也可能會有所欠缺，這種情況下，我們也可以通過增加斜線來改善，這里使用的斜線可以有粗細和顏色的變化。
PS：斜線的方向要統一。
3. 增加細節
比如很多畫面的背景太單調，我們就可以把重復排列的斜線放進背景里做底紋，這樣的背景感覺更豐富，而且用斜線做底紋不會對主體造成太大干擾。
PS：把斜線排成一個圓，具有不錯的裝飾效果。
在排版時可能會遇到這樣的情況，比如我們想采用某種形式排版，但由于缺少內容或圖片輪廓有限制，所以這么排會引起版面的失衡，這時可以用斜線來填充空白，以達到版面平衡的效果。
由于設計的版面通常都是矩形的，以至于斜線天生就顯得比較特別，所以在設計中合理的使用斜線可以增加其設計感。
例如下面這張海報作品，如果沒有中間的斜線它也會是一件不錯的版式作品，但是有點常規，所以設計師用一根斜線穿過整個畫面，打破了這種常規，給這件作品帶來一種不一樣的感覺。
PS：貫穿畫面的斜線不能影響文字的識別性，且不能從人物的臉部穿過。
最后總結一下，斜線的主要功能有：區隔信息；分割元素；裝飾；平衡；創造形式。光說不練假把式，大家在排版時記得多嘗試一下斜線。
文章來源：優設 作者：蔥爺
在這里，我們將研究設計中最簡單、因而常常被低估的活動之一，即線框圖的設計。了解什么是線框圖，為什么需要設計它們以及如何充分利用線框圖。
線框圖，也稱為頁面示意圖或屏幕藍圖，是展示網站或產品框架的視覺指南：
線框圖的主要目標是向團隊和利益相關者展示產品將包含的頁面和組件，以及這些元素之間的相互作用。
1. 幫助團隊評估和完善工作范圍
線框圖允許設計師快速創建產品的視覺表現，方便后期修改；
幫助設計師向團隊展示應用程序具有的頁面元素和控件，以及所有元素如何進行交互。
2. 讓團隊所有成員參與產品設計
線框圖的使用允許設計師和開發人員在早期階段共同參與討論設計，在開始進行視覺設計之前就提供反饋和更改建議。
這樣有助于使設計過程快速迭代，避免不必要的浪費。
3. 方便快速演示
從客戶和利益相關者那里獲得快速反饋是設計過程的重要組成部分。
設計過程中，經常會遇到需求的來回變化。有了線框圖，可以使這個過程更有效，修改原型比修改線框圖需要更多的時間和精力。
4. 進行用戶測試
線框圖可以幫助設計師從潛在用戶那里獲得有用價值的反饋。同時瀏覽線框比讀取規范要快得多，還有助于減小與預期效果的差異。
為了獲得最好的結果，為下一步的 UI 打下堅實的基礎，需要遵循幾個簡單的規則：
1. 顏色的使用
如果在線框圖中使用豐富的配色，可能會分散觀者的注意力，并使更新變得更困難。
但在某些情況下，使用顏色突出顯示特定組件是合理的。例如，可以將紅色用于錯誤狀態，將藍色用于注釋等。
2. 使用簡單的組件
線框圖并不包含全面設計和詳細說明的組件。相反它們應該設計的相對簡單，讓團隊成員更容易識別。
為組件添加細致的陰影、粗細描邊將花費大量的時間和精力，卻不是很實用。
3. 保持一致性
在所有線框圖中，類似的組件必須看起來相同。如果相同的組件看起來不同，開發人員可能會質疑它們的功能是否相同，甚至會因為設計不同而增加估算時間。
在處理線框圖時，記住一個簡單的規則：保持一致，避免造成混淆。
4. 使用真實內容
我們會?？吹経I/UX設計師沒有在線框圖上添加真正的內容，而是重復使用同一些文本。這是很少有設計師意識到的普遍錯誤。
內容真實與否會影響接下來的設計。如果使用不真實的內容，UI設計中文本的數量多少和排布方式都要再調整。
真實內容能給線框圖增加價值，更好地解釋上下文。
5. 使用注釋
設計中可能會遇到某些解決方案無法直觀地加以說明的情況，例如某些控件背后的邏輯，因此開發人員可能會對它們有疑問。
在這種情況下，可以提供注釋來解釋其背后的邏輯。這樣，你的團隊就會理解你的解決方案，你就不需要花時間再討論它們。
6. 線框圖程度
線框圖應該選擇低保真還是高保真，沒有嚴格的規定，取決于項目的具體要求。
硅谷知名作家埃里克·萊斯認為，如果不能帶來價值就不需要做額外的工作，從基礎做起，然后根據需要添加細節。
7. 將線框圖延伸到交互原型中
在使用不同產品時，有一些簡單而通用的交互，也有一些交互相當復雜。
在線框圖不足以說明復雜性的情況下，可以將線框圖擴展到交互原型中，而不必寫冗長的注釋并花大量時間進行解釋。
將線框圖結合到設計過程中，為我們所用：
文章來源：優設 作者：Clip設計夾
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn