簡單講，新擬態是一種圖形樣式，其原理是為界面的UI元素賦予真實感。
其實他也是算擬物風格的一種，只不過表現形式不一樣，最早出現在追波上，從2020年慢慢被大家熟知，討論，重視起來。暫且不論是不是未來的必然趨勢之一，一個事物的興起多少是有些道理，我們持辯證的眼光去看到，去學習、去了解便好。
原生名詞有幾個叫法，Neumorphism / soft ui，翻譯過來叫新擬態或者是軟ui。其實按照我們國內的翻譯應該叫，新擬物風格。Neumorphism，是New +Skeuomorphism的組合詞。
地球是圓的，很多事情總是輪回的，原理是不變的，只不過是換了一種表達方式出現在我們的面前，在了解新擬物之前，先簡單說下UI整個風格的發展歷史，
說起ui設計風格不得不說起我們喬老爺子了，在2007時候年最早的iphone手機的手機界面就是擬物風格的，那時候覺得怎么會有那么好看的界面，設置圖標的齒輪，閱讀器的書架，以前的youtube圖標還是一個小小的電視，從而掀起一波擬物圖標風格流行趨勢。
說起擬物風格，不得不提一下當年的擬物大神——MIke，當時在追波掀起一波轟動，在國內也迎來一陣臨摹潮，我還記得那時候我還臨摹過下面那只鋼筆，還有那個馬卡龍蛋糕，都是滿滿的回憶。對于當時MIke大神作品，用現在話說，奈何沒文化，一句臥槽走天下... ...
到了2014年，蘋果對界面進行了“扁平化”處理，以使外觀更簡單，同時又使其用戶易于理解。一直到今天扁平化設計風格仍然是UI設計的標準。
其實最早最早將扁平化風格設計運用在產品中的公司是微軟。他在Windows 8系統使用扁平化設計語言，但是Windows 8一直飽受爭議，但是反響并沒有很好。
Window 8平面設計示例
還是從追波說起，這一切的開始是源于在2019年11月05日的在Dribbble-Alexander Plyuto發布的作品，獲得了26W+的瀏覽，4400個贊，以及1800個收藏。以后在Dribbble上便成為流行，在探索更多的可能性。
再說新擬態有什么特點之前，我們先看幾個比較典型代表的視覺作品，以便于更好的了解這一風格
我們看下上面的一些視覺作品，第一眼看到比較明顯的是，在一些可點擊區域做了一些“浮雕”效果，點擊狀態和非點擊狀態，在視覺處理上是未選中狀態是凸出來的，已經選中狀態是凹進去的，但顯然凹凸之間是有很多質感細節處理的，等下再實操組件部分會講解到。
左上角亮色投影，右下角深色投影（有且只有一個光源照射）
元素與背景對比度比較弱
常常用于按鈕組件和卡片
按鈕狀態，視覺上凸出代表未選中，凹進去表示已選中狀態
1.有且只有一個光源照射
那作者在追波上按鈕也好還是卡片處理也好，仔細觀察不難發現，它定了一個光源，是從左上向右下照射的，所以，越靠近光源的部分，越亮，遠離光源的越暗（素描的繪畫時常常用到）。因為新擬態的光源是唯一的，是從左上角照射的，所以就不難解釋，或者分析得到，左上角亮色投影，右下角深色投影。這一基礎規律，不單單適用于新擬態風格的按鈕，它還適用于所有新擬態風格表現手法的視覺組件。
可以看到下圖，卡片、轉盤、按鈕，他們的受光面都是在左上角。
這里就要講一下，另一個叫法了soft ui，即軟ui。軟，有柔和的意思。為什么這么命名呢？其實就是由于新擬態的組件與背景的對比度很弱，我把收集到的幾千張素材中，挑選一部分進行進行色值對比，可以發現無論是亮色模式下和暗色模式下對比度都是很低的。
按鈕、投影、背景之間的關系都處理的非常柔和，這是新擬態的特征之一
素材庫
基于這一點，其實我們只要建立好卡片的和按鈕的樣式組件，新擬態在設計層的表現就可以高效率的實現，可能稍微麻煩的就是，在一些質感細節上做一些優化，前面也說到，新擬態是一種無紋理的擬物風。所以想要表現卡片/按鈕的質感，在光影、厚度細節上，需要做更多的細節處理。
比如卡片的厚度感細節的處理，為了體現銀行卡的厚度感，在卡片增加了一個對角漸變描邊，從漸變色塊可以看到，漸變的規律，也是遵循“有且有個光源”定義的，靠近光源的是純白，近暗色投影端是比投影更重的一點的描邊色。
這樣做的好處不單單是為了體現卡片的厚度，因為我們前面講到，新擬態是軟ui，是對比很弱的。風格柔和帶來的另個一個不太好的就是，界面清晰度不夠，很容易把視覺處理“糊掉”。所以，增加對角漸變描邊在一定程度上也起到了，讓界面的視覺層級更加清新的作用。在實操部分，將會一一拆解各種情況的一些處理方式。
在新擬態中，視覺上凸出代表未選中，凹進去表示已選中狀態。是大部分人的處理方式，在這一小節里，先討論大部分的，在實操部分在列舉其他的處理手法。
這里可以明顯感受到，按鈕狀態的區別，凸出/懸浮的是沒有選中狀態，凹陷下去的是選中狀態。
細節觀察，新擬態風格，在按鈕上面的元素是做了內陰影處理的，看起來有一點點雕刻的感覺，
在選中狀態按鈕的處理，首先是在光源的處理上是統一的，加上光影的處理，就很容易做出來凹進去的感覺，想要是凹槽的厚度感、質感看起來更加舒服，這里的處理方式和卡片的處理方式原理一樣，添加漸變描邊就可以解決。
這里影響新擬態界面的可見性，主要有兩個因素，一個是可見性，另一個就是視覺層級關系。
識別度
前面我們說到，新擬態的的一個設計風格特點，就是低對比，弱對比。帶來界面柔和一面的同時，在視覺層上，也會很容易出現界面”糊掉“的一些情況，這樣就非常不利于信息的傳遞。試想，一個頁面從色調、按鈕、布局、交互上都很好，但是，就是看不清哪跟哪兒（識別度），那設計出來的東西是沒辦法落地的，頂多是個好看的花瓶。
所以，在設計新擬態風格的時候，需要格外的注意界面的識別度。但同時也要注意，界面的投影不能太重，如果太重，界面就很容易顯得“臟”。
那么，前面講到的，卡片厚度的塑造方法（增加漸變外描邊）可以在一定程度上提高界面的識別度，提高信息的傳遞。
因為新擬態風格的基礎原理是依托光影關系來塑造的，那在很多樣式組件界面中，就會產生很多懸浮或者下凹的投影，那么在很多時候是很難區分視覺層級關系的，用戶在看到這樣的界面的時候，第一時間會覺得頁面很“滿”，用戶就無從下手。
所以在做新擬態設計風格時候，一定要學會“視覺降噪”，需要避免整個頁面都很滿，最重要的是克制。
那前面說到可見性和視覺層級，這兩點是易用性原則里面的基礎組成部分，如果基礎組成部分都沒有得到很好的解決的話，那產品的易用性就無從談起。能用、好用的產品是前提，美感是對產品易用性的補充，能用、好用才是核心。
所以在設計新擬態風格的時候，對頁面的信息層級細分要求更高，對這個頁面的節奏處理需要更細膩，對用戶體驗的理解需要更加徹底，在商業與交互層面的持衡中，需要考慮的層面有多一個比較關鍵維度的考量——可見性
那么當我們可以處理好頁面元素之間的關系，也滿足易用性基本原則的時候，新擬態帶來的局限性將會變得不那么重要。
針對前面我們說到新擬態的一些特點，一些局限，目前比較適合以下兩個大類產品。
工具類的APP內容相對固定，不需要時時更新，這樣設計師在視覺風格方面的表達空間更大一些。在追波上，發現大部分的作品都是偏工具類的
和工具類APP一樣，這些類頁面上運營性質的東西相對較少，內容的形式相對可控。
那么，大家最關心的問題來了，新擬態到底是不是2020年即將要流行的設計風格？相信 大家最近這段時間多多少少也看過很多關于新擬態一些介紹，在趨勢文章里面或者在其他文章里面看到。
首先必須得中肯的說，像大多數設計趨勢一樣，新擬態是設計用戶界面的一種看起來視覺比較新穎的表現手法，讓產品界面看起來既柔軟又方便，但是它也存在一些局限，前面我們也提到一些，比如它實現起來還是有一點難度，也不夠靈活等等
但是我說一點不同的是，這也是我一直認為的一點，就是UI設計運營化，運營設計游戲化，這是未來的趨勢。
反觀我們APP的主要生力軍，90、00這一批人，其實他們就是互聯網的原住民，他們就是在這注重交互，注重游戲化體驗的大環境出生的，成長起來的，所以他們對這些東西是非常了解的，他們也能接受這種游戲ui，這種寫實的東西，包括現在的這種體驗。
當然，趨勢不是我們預測的，因為只要蘋果出一個新的設計風格，那個風格就會是成為新的設計趨勢，目前來看，這是必然的。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 原創：木七設設計坊
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
團隊按領域分組收集素材
我們認為影響設計趨勢的因素主要有以下三個：
新冠疫情的持續除了改變了大眾的生活習慣外，也意外地推動了各行業加速線上化轉型、提供「無接觸」服務，出行上的限制催生了游戲等線上娛樂市場的蓬勃勢態，甚至一定程度上疫情也影響了社會和經濟格局，導致了一些新政策的出臺。
新生代的崛起導致了流行風格的一系列變化：二次元等亞文化成功破圈進入主流消費市場、復古設計的重心從 90 年代向千禧年偏移。他們以更開放多元的思維方式和新視角，影響著下一個 10 年設計題材的選擇。
近年來智能設備的性能上限不斷被刷新，誕生了許多創新的設備形態，使更生動的交互體驗成為可能，另一方面，AR/VR 技術經過上一個十年的雕琢，性能和效果逐步得到驗證，具備了量產的技術沉淀，將迎來一波商用普及的浪潮。
「 酸性平面」風格融合「Y2K」美學的未來感，形成了獨特的「未來酸性金屬風」，典型特征有：
酸性漸變：一種會引起不適但足夠刺激的迷幻漸變色。這類配色打破了傳統美感的標準，追求感官刺激，給人異次元下致幻而不安的感受。
金屬感：以熔融形態在環境光下呈現出詭秘的反射，這種反常規的液態質感所帶來的違和，在傳統科技感上增添了幾分神秘。
未來酸性金屬風反差感兼具未來感的特征，決定了它在時尚、音樂、潮流以及藝術圈有很好的延展性。服裝鞋包、藝術家創作，以及傳達個性自我的品牌平面廣告，都可以看到其身影。
The Future Vision of Microsoft 365 宣傳視頻
隨著產品硬件性能的不斷升級，設計語言也開始追求真實感。相比過去，「類玻璃柔光材質」除了更注重「輕」的概念，在質感上也呈現出更加輕盈、細膩以及自然的趨勢。
類玻璃材質的表面呈現微磨砂感的半透明質感，透光而不透視，通過清晰的邊緣來強化物理質感，兩者對比呈現出一種「虛實結合」的美感。該材質多以輕薄的片狀形態懸浮于場景中，減輕重量感以帶來輕盈的視覺感受。
「類玻璃柔光材質」輕盈與通透的視覺感受，能營造出未來感十足的場景，很適合闡述科技智能的概念。因此該風格成為了一大波科技背景公司的設計首選，其中主要以硬件系統以及B端、工具類的產品為主，應用場景包括界面設計、推廣視頻等。
Louis Vuitton × League of Legends Collection
近年來，品牌跨界合作的對象不再局限于品牌之間或明星名流，眾多服裝、奢侈品、數碼產品等消費市場的強勢品牌紛紛向游戲和二次元等虛擬 IP 拋出跨次元合作的橄欖枝。這種合作方式成就了「三次元」品牌與「二次元」IP 的雙贏局勢，將在 2021 年繼續發展并造成更廣泛的影響。
游戲和二次元元素大熱，手機、化妝品、服裝等產品通過結合該類元素，以新的形式吸引年輕用戶：為像素風格的游戲設計服裝、為全息的虛擬偶像捏臉塑形、為動漫人物拍攝雜志封面、在一款電子游戲里搭建新品發布會等，相應地，跨界應用對設計師的涉獵領域和技術跨度也有了更高的要求。
一線頂尖奢侈品品牌相比以往與動漫游戲類二次元 IP 合作更頻繁，除了經典動漫，也不乏新鮮的熱度 IP。
在《Evangelion 新世紀福音戰士》25 周年，OPPO聯名這部影響一代人的動畫神作，推出了一款從快遞包裝、外盒甚至是卡針，里里外外都深度融合 EVA 元素的聯名機型。
OPPO × EVA 定制版手機 OPPO Ace2
美國說唱歌手 Travis Scott 2020 年在《堡壘之夜》（一款線上競技游戲）中辦了一場虛擬演唱會。這場演唱會共吸引了 1230 萬玩家同時在線觀看。
Travis Scott 在網絡游戲《堡壘之夜》內舉辦虛擬演唱會
Photographed by Sean Thomas, Vogue, January 2020
「親生命性設計」原為建筑和空間設計中的概念，意為「運用天然材料、自然光和植物創造令人愉悅舒適的建筑環境」。受城市化進程加劇及全球疫情的影響，人們渴望親近自然的欲望和需求變得越來越強。產品和自然元素彼此交融，從主客體關系轉為互相依賴的存在，以更為和諧與自然的交互方式與用戶進行溝通與連接。
自然元素將在不同感知維度以更貼近真實自然的方式融入各個領域的設計，比如在工業產品設計中使用更加貼近自然物體的表面肌理，在建筑設計中將人造空間作為自然空間的延伸，在數字產品設計中使用更擬真的自然音效和光照等等。
2021 時尚界不約而同地強調了自然元素的使用和對環境保護的呼吁，各大品牌都用自己的方式演繹了「自然共生」的服裝設計系列。
還原自然界中的真實材質成為了新的設計靈感，被應用到各種設計中。
Vivo OriginOs
山水 Mountains & Rivers by Particle (Gao Yang)
近年，國人的文化自信逐漸增強，國家擴大內需、擴大消費的政策導向為國內消費品品牌帶來了巨大的機會?！钢袊O計」的標簽已經成為新一代的時尚潮流，帶有中國本土個性、體現中式美學的設計受到更多品牌的青睞。
越來越多中國品牌開始注重漢字 Logo 的使用和設計，更多現代設計力求為中式美學擺脫民俗、皇家的刻板印象，木、石、竹這些蘊含中式精神內核的元素成為了工業設計、建筑設計中新的繆斯。
隨著中國的國際影響力進一步擴大，國際品牌也會提高對中國市場與文化的關注，在設計上融入更多本土元素。
各品類的國產品牌在包裝或產品設計上通過對中國元素的運用來塑造具有特色的國風產品。
可口可樂中國與漢字文化推廣機構「好字在」和方正字庫聯合推出的這款字體，反映了可口可樂對中國文化的深入理解和對本地化運營的關注度。
可口可樂聯合推出的中文字體「在乎體」
同仁堂旗下「知嘛健康」在北京開設線下體驗店，店鋪設計提煉漢字、中藥、藥房等中式元素作為靈感，用現代化的方式呈現，是極具現代感的「中式」空間設計。
同仁堂旗下「知嘛健康」線下體驗店 by 無象空間建筑
Microsoft Haptic PIVOT 微軟腕帶觸覺設備
在增強現實中，人機交互將更多發生在物理空間里，虛擬的數字信息將借助形變和震動被模擬為觸感。得益于新型傳感器的拓展應用，硬件設備實現了對溫度、形態、力量的數據監測，同時各大硬件廠商也逐步對震動馬達等硬件進行了完善升級，從而為進一步的觸覺模態設計提供了支持。
涉及領域除了現有的游戲、駕駛、健身等場景外，更有趨勢被應用于創新教育、操作培訓及有風險的試驗演練中。
任天堂在健身環 Ring-Con 內加入的力學傳感器實現了對力量（張力、拉力、壓力等）的監測，并利用 Joy-con 震動來對用戶動作的標準性進行反饋提示。
《健身環大冒險》on Switch
微軟研發部開發出了一套 Haptic PIVOT 腕戴觸感反饋方案，通過活動的機械結構，更逼真地模擬出物體的握持感。
Haptic PIVOT 使用演示
索尼推出配備了音圈馬達的 PS5 DualSense 無線手柄，扳機鍵內增加了一個由電機驅動的齒輪，通過震動模擬出槍支的后坐力、彈簧的彈力、繩索的拉力等物理效果。
PS5 DualSense 無線手柄使用演示
Flight Booking AR application by Bala GN
現實生活中，人與人、人與物接觸產生的實體服務稱為線下服務，由網絡等技術支撐的人與硬件設備交互的服務稱為線上服務。在硬件設備、網絡技術成熟的當今社會，線下服務向線上服務遷移的過程中融入了更多 AR/VR 等虛擬服務，也帶來更多新的設計行為和交互方式。
原本需要親臨現場才能完成的體驗，現在可以通過線上的方式實現，這不僅體現在因疫情催化產生的線上辦公、線上畢業展等強需求場景，也在購物、試衣、健身等更貼近生活的領域應用。
用戶在 Gucci APP 上挑選自己喜歡的手表后，將手機攝像頭對準手腕，就會顯示「試戴」效果。
Gucci APP 虛擬試表
各大院校畢業展因疫情無法在線下舉行，一些學校通過線上展廳的方式，讓學生的畢業作品可以通過網絡瀏覽。
中央美術學院 云端美院
香港理工大學 polyudesignshow
Balenciaga 2020 年用一款電子游戲代替了線下時裝發布會。在視頻游戲中，玩家能夠在五個主題場景中欣賞到 2021 秋季系列的新款服飾。
Balenciaga：《后世：明日世界》
硬件設備的創新使線上健身指導有了更合理的使用場景和更人性化的體驗，用戶通過線上內容和服務在家也可以獲得接近健身房的體驗。
Tempo Studio：家庭智能健身設備
POPMART 泡泡瑪特
「情感療愈」是一種有溫度，無攻擊性，注重細節的設計方向。這類設計旨在治愈修補心靈中的創傷，不只注重功能的完善，也更在意情感內涵的打磨。它也可以幫助人們敞開心胸，接納自己內在的所有面。
在產品設計中，一些撫慰人心的小功能、小彩蛋往往帶有著治愈人心的力量。在角色形象上，柔軟、可愛的造型在帶給人無攻擊感的同時強調著陪伴的意義。在娛樂領域，也出現不一味強迫用戶達成某個目的慢節奏「佛系」游戲。
網易云音樂來自「張開雙臂擁抱別人」動作靈感的抱一抱彩蛋，讓原本只有文字點贊的評論區更有溫度。
網易云音樂的「抱一抱」動效
Switch 游戲《動物森友會》在 2020 年異?；鸨?，歸功于其萌系治愈的風格和追求自然隨性的生活方式，也讓疫情期間的玩家們暫時逃離嚴峻緊張的現實生活。
Switch：《集合啦！動物森友會》
盲盒的精神內核是「收集、陪伴、治愈」，泡泡瑪特簽約的 IP 形象，大多以可愛、萌系為主。
泡泡瑪特的盲盒萌系 IP 形象
Disney 與 Pixar 出品的動畫電影《心靈奇旅》用輕松的方式探討生活的意義和人生的價值，電影用它獨特的美術風格和感人的故事斬獲超高的口碑和評分。
Disney · Pixar《心靈奇旅》
OceanPlastic 廢棄塑料重造
2020 年世界各地重大自然災害頻發，環境污染嚴重，刺激著人類對生活環境的審視。更多品牌開始探索材料再利用的可能性，從自然衍生產物出發，從而降低對大自然的破壞。年輕一代對于再創造產品有更高的接受度，循環材料轉化為塑料顆粒，組合成獨一無二的花紋和肌理，給人專屬限量感，再生材料成為新的流行元素。
消費者將繼續青睞和衛生健康、環境保護相關的價值品牌，越來越多的快消、包裝廠商開始研究材料回溯，組建相關部門，加入循環經濟浪潮中。
運動品牌 Adidas 與 Nike 都推出了由回收廢料制作的充滿設計感的產品，在宣傳品牌環保意識的同時也引領了再生產品的潮流。
adidas 與 Parley Ocean 合作推出由海洋回收廢料制作的聯名產品
同樣使用了廢棄材料的 adidas 球衣
Nike 將生產車間加工過程中產生的邊角料轉化為產品設計的主要材料
由 99% 廢棄奶茶杯+ 1% 廢棄原茶渣再生而成的「真垃圾·手機殼」
TRASHAUS 真垃圾再生手機殼
Freitag 的 2020 新款 F601 MALCOLM 是一款個性化背包，用一塊再生的防水油布保護，并由用空PET瓶制成的防水織物制成。
F601 MALCOLM
除消費產品外，肯德基的可回重復利用餐盤、星巴克倡導的紙質吸管、外賣行業各公司的環保舉措等也體現了餐飲外賣行業對循環經濟的重視。
結語
無論是后疫情時代世界的變化、新技術的發明應用或是國際社會環境的走向，都會影響大眾的生活習慣、行為方式和審美取向，同時也決定了未來設計的發展方向。但這其中不變的，是軟硬件發展不斷突破視覺表現的上限、設計師追求「以人為本」的核心理念以及通過設計去提出和解決問題的目標。
我們期待著上述預測性的分析能在今年的設計中被驗證。但設計本身是一個迸發新奇創意的過程，也希望上述的設計趨勢能激發設計師們更豐富的靈感、為設計領域提供更多的可能性。
新的一年，在「變化」與「希望」的新主題下，我們一同加油！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
01. 在工作中遇到的狀況
設計師常常會遇到這樣的問題，在新產品發布之前，都會做一遍線上的UI視覺校驗，在這個過程中，前端開發工程師所寫的界面總會發生圖片變形，文字字號不對，元素與元素之間不對齊的事情發生。
設計師給前端開發工程師標記了頁面中錯誤的地方，但是多數前端開發工程師一聽那么多頭都大了，在緊張的上線日期限制下更有甚者不予理睬直接上線，用戶吐槽設計不嚴謹，導致設計背鍋。
就好比下面這個例子，為什么老板會覺得不好呢？其實是產品在用戶體驗的本能層次出現的不好的體驗。
02. 好產品具備的特征
互聯網產品可以利用產品五要素把產品劃分為5個層次。全球的認知心理學家（美）諾曼在《情感化設計》這本書中講產品本能水平的設計——本能層；行為水平的設計——行為層；反思水平的設計——反思層。
互聯網產品可以用諾曼教授提出的感情感化設計的3個層次聯系起來，并把這些情感分為5個緯度進行考察，就可以得到下面這張知識網絡圖。
從上面這張圖我們可以看出用戶評判一個產品好壞的標準還是來自產品的表現層、框架層、結構層中的直觀體驗也就本能層次和行為層次的感受，如果產品的吸引度、完成度、滿意度、忠誠度、推薦度的數據很高也就證明產品很好，如果數據表現不好那可以判斷產品還是有需要提升的地方。
回到第一張圖片，老板覺得有問題的原因就在于產品在本能層次的不合格，那重點來了有什么設計方法可以避免本能層出現問題的情況嗎？答案是毋庸置疑的，那就是“設計走查?！?
03. 設計走查的意義
一名專業的B端設計師，并不是說你把設計稿做得很完美，把標注和切圖完整地交給開發小哥哥之后就完事了，其實在這個階段設計只是完成設計工作中產出效果圖的工作，并沒有進行最后驗收的環節，如果開發還原出來的產品跟設計稿差距較大的話，設計其實也是要負很大責任的。
就好比工廠的流水線中一臺電腦的生產，把電腦從工廠搬到運輸車上也算是電腦生產完畢，但是必須要送到客戶手里，客戶簽字確認，工廠才能算是電腦賣出去了，由此可見設計走查是保證用戶有高質量體驗的不可缺少的一個環節。
設計走查的意義在于3點：
1、確保產品的設計細節的還原度合格，從而保證產品的視覺效果和交互體驗能滿足用戶需求。
2、是衡量設計師是否是一個合格設計師的重要指標。
3、通過細致入微的專業設計素質贏得公司團隊內部設計話語權的提升。
既然設計走查這么重要為什么大家還會忽視呢？其實大家對設計走查的看法有一個誤區，如果你想成為一名專業的B端設計師，一定要改變以上的錯誤觀念，擺正一個正確的設計觀念。
設計師在公司代表著視覺上的最高水準，設計稿則是設計師專業能力的體現，如果一個設計師的能力是100分，設計稿的分值90分，開發實現后的產品分值為50分，在沒有進行設計校驗的情況下，這時候將產品發布出去，用戶或者老板只知道該公司的產品設計只有50分，而不會知道背后設計師最高的水準是100分。
慢慢地設計師就會在開發團隊中做設計變得很被動，越被動就會越沒有話語權，所以對一名專業的B端設計師來說，除了擁有很強大的效果圖設計能力之外，還需要有保證效果圖落地能力。
01. 設計走查的種類
設計走查是一種設計層面找尋問題的方法，多數應用在找尋產品問題或者是對項目開發過程中的測試環節。具體的方式歸類為3種：
1）體驗設計走查：是指人機交互之間的細節體驗、比如非力度測試、滿意度測試?？捎眯詼y試的調查這些方法都是體驗走查的一部分。
2）交互設計走查：是指針對產品場景與場景之間的動態交互效果進行走查。
3）視覺設計走查：是指前端開發出來的靜態頁跟設計師出的效果進行視覺細節的校對和檢查，確保開發出來的視覺和設計圖保持一致。
02. 制作走查表的三種方法
很多人會納悶了，公司要是沒有這種走查表，那怎么進行這三種設計走查呢？這里告訴大家我的一個工作辦法，總共分為3個階段“尋找·借鑒”——“思考·定制”——“優化·完善”。
a.尋找·借鑒
當大家有一個知識的概念，如果想更深入了解這個概念就需要在網上找一些關于這個概念的信息，這個過程就是尋找。如果大家沒有做過類似這種設計走查的經驗，那第一時間也是去尋找，尋找設計走差的概念，甚至是做好了的走查表。
可能還會有人問，別的公司和我們公司做的行業不同，那別人公司的走差表我們公司能用嗎？大家可以復用70%左右的，那剩下的30%就需要進入下一個步驟“思考·定制”階段了。
b.思考·定制
當我們完成第一步之后，就需要對自己所處的行業或者產品有一個認知，思考我們的用戶類型是什么，他們的使用場景是什么，他們最需要解決的需求是什么等等問題，然后再根據這些問題定制一系列體驗、交互、設計的問題，那就成為了自己產品定制的一份設計走查表了。
c.優化·完善
任何工作為了更好地適應當前的工作，都需要持續迭代。假設，在第二階段定制的問題有些微交互動效果的問題，但是這是前年用戶比較在意的，現在很多產品都有了微交互動效了，所以現在、意義就沒有那么大了，我們的設計走查表也要根據互聯網的大環境不斷地進行優化和完善。
03. 產品表現層——視覺校驗
設計走查和設計校驗并沒有大的區分，但是我理解設計走查是一個比較新型的詞，設計走查的范圍要比設計校驗的范圍大一些。
有些公司會把設計走查應用于改版之前，當作找尋產品問題的一種方法，也有一些公司會把設計走查應用于項目做完開發在測試環節做測試的一種方法。比如在啟動產品改版前可以通過“視覺設計基礎自查表”來收集產品目前的視覺體驗問題。
04. 視覺校驗需要審查哪些緯度
設計校驗驗收表可以簡單地理解為是用于審查產品表現層的形狀、色彩、字體、構成、質感、動效這六點問題的記錄的表格。其實這六點也是諾曼教授提出的感情感化設計中本能層次和行為層次審查的六點。
再講如何做之前，大家還是要先了解一下驗收流程中的步驟。
01. 視覺校驗做什么
這里描述兩點，一個是開發階段，另一個是測試階段的流程。
在公司的項目開發階段：是設計師設計完效果圖，進行標注（現在大家都是使用第三方標注軟件比如藍湖、摹客、Sketch Measure 等），在交付開發。
在項目測試階段：一般都是產品經理發起一個項目進入測試階段的通知把設計師、開發、測試、和產品經理都設置為參與者，之后由測試人員進行產品功能邏輯的測試、設計師進行視覺驗收；驗收完成后產品經理驗收測試結果，如有問題找開發進行修改；修改完畢再找測試、設計、產品進行確認，沒問題就封版了，產品經理確認發版日期，如果還有問題就再修改。
02. 視覺校驗的驗收標準
很多剛入行的設計新手，在校驗階段不知道檢驗哪些維度信息，以至于很多視覺元素都需要查看，對于c端來說界面的場景、交互比較簡單還能應付。
但是對于模塊功能復雜、交互場景眾多的B端產品來說每個場景都要查看很耗費精力工作效率也不高。
所以我總結以下幾個高頻出現問題的點供大家參考，大家可以按照以下幾個緯度進行視覺走查，提高自己在工作中的效率。
a.檢查設計稿的可行性
人無完人，再專業的設計師，也不可能100%保證自己的設計方案就是最好的設計方案，在交付設計稿前期設計師應該自我檢查自己的設計稿是否能清晰地傳遞信息，對于一些重要的模塊是否能凸顯出來，對于一些比較復雜的交互場景開發是否能夠實現，市場上眾多的屏幕尺寸，這樣的布局方式是否是最為合理的等這些緯度進行思考做設計，保證設計方案的可行性。
這里我舉一個我真實的案例，起初我接到的需求就是設計一個模塊里面信息排版，如果我采用第一個方案那肯定是不行，因為信息層級區分不夠明顯，第二個方案把數字標簽用顏色進行了區分，但是我又想如果出現文案比較多的場景，對齊方式都是左對齊，那“指標值”的信息就不可能保持左對齊，所以我又出了第四個方案，目前來看第四個方案算是最佳方案。
假設當時我就交付前端開發第一種方案，上線后出現問題，還需要調整到第四種方案，慢慢的前端開發就會質疑設計的專業能力，后續合作也會難以推進了。
b.組件調用是否正確
B端產品的業務復雜，模塊交叉設計數量多，所以在設計b端產品起初都是用原子化的思維搭建一個組件庫。前端是開發階段在樣式庫中寫一個標準的控件樣式，然后在不同的頁面場景中調用公共樣式，原理類似于我們在 Sketch 中搭建 Symbol。我們要從兩個方面看組件是否調用正確。
1）公共組件是否正確
公共組件調用正確，好處就是公共產品的整體視覺風格是一致的，比如頁面的側邊導航，搜索場景、詳情頁場景布局是否一致，在斷網或者報錯的場景中出現提醒條樣式是否一致。可進行交互的按鈕樣式、交互狀態的按鈕是否一致等等。
2）業務組件是否正確
在真實開發場景中，有一些前端開發雖然調用一個樣式，但是在設計規范中一個樣式可能會有多個尺寸，比如這個按鈕，在開發階段避免不了出現樣式雖然是對的，但是尺寸調用錯誤的情況出現，所以要查看一下組件的樣式和尺寸前端開發是否調用正確。
按照這個思路去設計最為重要的就是要檢查開發人員調用的組件庫的規格是否是我們設計稿的規格，以此類推檢查整體的布局、按鈕樣式，報錯樣式。
這里需要描述的內容相對較多，以后有機會我可以再補充一份關于《如何搭B端建組件庫》的文章，咱們詳細聊一聊。
c.空間關系是否一致
空間關系可以簡單地理解為模塊與模塊之間的“間距”關系和組件與組件之間“間距”的關系。
1）模塊與模塊之間——間距
所有模塊（卡片）之間的間距，這里具體指的頁面布局包括橫向間距和縱向間距，大家可以采用4px（或者8px）的倍數進行刪格布局，把刪格布局的基礎規范梳理出來，以這個規范當作標注來審查橫向間距和縱向間距。
2）組件與組件之間——間距
另外一點就是我們在搭建組件階段，組件與組件之間的間距關系是否一致，不要出現不對齊的情況出現。
3）為什么要用統一間距
大家了解空間關系都要看哪些緯度后，我們再來解答一下大家心中的疑惑，為什么要保持間距一致呢？主要原因有以下三點：
對于如何使用間距，我建議大家可以看一看《寫給大家看的設計書》里面關于版式設計四大原則的講解和有關格式塔原理的文章。
d.文案的顯示是否清晰
在UI設計中，我們總避免不了與字體打交道，字體也經常是我們在設計中容易忽視的部分，影響字體的清晰度無非是字體、字號，字重，段間距這幾個參數的設計。
1）字體
字體的實現其實是電腦渲染的一個過程，Mac電腦默認字體是蘋方，Wids電腦默認字體是微軟雅黑。在字體的選擇里面行業里是有標準的規范的，比如ont-family：serif、sans-serif、monospace、cursive和fantasy這五種字體，前端在編寫代碼時候會把這種多個字體名稱保存為“字體的回退機制”來定義，意思就是如果展示的設備（瀏覽器）檢索時沒有第一款字體就依次順延使用下一款字體，這個大家只需要了解就好，在字體選擇中使用頻次最多的還是對數字字體的選擇。
對于數字的字體設計要提前查看是否字體有版權。這里分享一個可以免費查詢字體的網站：
不同的網站對字體排序的方式可能不一樣，有興趣的小伙伴可以用下面的這個方法進行查看。
2）字號/行高
對字體的字號也要進行走查，因為在開發階段在不同的瀏覽器中顯示的字號會有變形的情況出現。
另外考慮各個瀏覽器的兼容問題，PC端建議使用最好的字號是12PT，因為12PT可以保證在現在市面上的瀏覽器中是可以清晰顯示的，如果有特殊場景需要用到12PT以下的字號，需要和開發說明并且標注出來。
3）字重
設計區分文案層級的場景使用頻率最高、視覺效果最好的設計方法就是給字體加粗的字體樣式了。
這里要注意的是初級設計師的眼力可能還沒有達到很高的水平，尤其是最小的字體顯示加粗或者不加粗的效果視覺在電腦那么大的屏幕上感官并不是很明顯，所以最好可以通過從代碼的層面進行核對，具體方式可以看圖：
e.顏色的選擇是否科學
顏色是給用戶呈現面積最大的一個元素，對用戶來說感官層里表現最為明顯的一個元素，所以在校驗中“顏色”是最容易造成落地頁面與設計稿視覺差異的一個因素。
1）色差
因為大家手機屏幕的技術一般是LG屏幕（屏幕的使用時間越長色彩的還原度越低）。
雖然有的時候在查看代碼時候色值設置是正確的，但是也要根據具體的場景進行分析。這里建議大家不要使用具有不透明度的色值（雖然在c端中經常會使用，有不透明度會使顏色比較透亮但是在B端產品中定位是工具，工具就要以效率在第一位，美觀在第二位，所以這個場景的顏色使用盡量以清晰展示為第一準則。）
2）顏色種類
b端產品中，柱狀圖、折線圖的樣式比較多，在設計這類圖標時候盡量避免多種顏色的出現，還是因為B端產品定位的原因，太多的顏色設計勢必會干擾用戶進行判斷。
f.圖標的尺寸是否合理
不管是在C端產品還是B端產品中圖標都是高頻出現的一個元素，圖標本身的意思就是簡化文字信息，通過圖形去高效地傳達文案信息。
對于圖標的設計走查分為兩點：
1）大小
我們在設計圖標時候，會根據不同的場景進行圖標尺寸的規范輸出，但是在真實的開發環境當中，開發在使用我們提供的插件（藍湖）進行icon下載時候，會提供3種icon的尺寸下載，前端開發在使用切圖時候往往會忽視掉圖標的尺寸問題，對于圖標的設計走查，是否圖標使用的尺寸是我們設計使用的規范，所以第一個就要看大小是否能清晰的展示。
2）SVG格式開發
因為PC電腦的屏幕尺寸、分辨率往往是高于移動端的屏幕尺寸、分辨率，圖標的切片做得太小上傳到屏幕上會出現模糊的展示效果，如果圖標不能清晰地展示圖標所呈現的圖形，那就會造成用戶一定的識別障礙，所以一定要保證圖標不要有模糊的情況出現，盡量使用SVG格式圖標切片給到開發。
設計校驗工作不能說難，有耐心有細心的設計師都可以完成的，一次視覺校驗需要1——2天的時間，相對來說比較耗費精力。
換個角度思考，如果我們從項目開發的前期就控制設計走查的工作量，那我們可能會減少了走查的工作量。接下來我們就聊一聊怎么減少設計校驗的工作量。
01. 了解需要視覺校驗的原因
前面我們一直講的是做視覺校驗需要校驗的維度，我相信更多的設計師還是希望把精力放在做設計效果圖階段，畢竟知道從哪些維度做只能單純地提高我們的校驗的效率，想要在開發過程中減少對項目的設計校驗的工作量 ，就需要我們清楚兩個答案，一個是“在開發過程中為啥需要設計走查”和“開發不愿意修改的原因”。
a.誰負責實現樣式
開篇我已經講了設計走查的意義（原因），現在我想從開發流程再聊一聊。
在一個產品開發中，設計師下游需要對接人的人員角色統稱為開發工程師。但是在這類角色中其實也是會細分為三種角色：前端工程師、后端工程師、測試工程師。因為做項目多數情況是多人協作共同完成的工作，前端工程師是實現我們效果圖樣式的主要人員，也是我們主要對接工作內容的對象。
b.前端工程師心里所想
前端工程師的工作內容需要一一查看設計師提供的標注，然后再一一去實現，所以難免不了心里會這樣想：好麻煩，不如我自己按照感覺寫。
在真實的工作中，前端開發按照規范進行項目開發這種思路是對的，但是設計師強硬地要求前端開發工程師，按照規范進行開發是過于“理想化”的一種表現。
所以我們還是要先從自身出發，循循漸進地要求前端工程師按照我們的設計規范進行開發，這就來到我們下一個話題。
02. 如何避免呢
那么接下來我們來聊一聊身為設計師我們要怎么做，才能避免進入過多的設計校驗呢。
a.了解開發實現原理
如果想成為一個高端進階的設計師，我們要給自己增加籌碼，那最為直接增加籌碼的方式就是——站在開發者的角度看待問題，了解開發思維。
國內前端寫樣式的代碼基本上是HTML+CSS，Jacascript，注意這不算是編程，只是一個寫樣式的語言，簡單地理解就是盒子模型（CSS語言）
1）盒子模型
CSS盒子模型又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：
舉一個圖文模塊的例子：圖（1）是設計師輸出的設計稿，圖（2）是開發需要的標注信息（我們實際給到開發的標注）開發需要查看的就是色塊的尺寸和色塊之間的間距。
2）用框架化思維做設計稿
了解完前端制作咱們效果圖的原理后，我們就要用這個盒子模型的概念，像是搭建房子的原理去制作效果圖，所有的組件之間都是有理有據的，那這個專業術語就叫做框架化UI。
前端開發工程師通過一個個盒子填充來將我們的組件元素放入其中，最終形成前端展示的頁面。注意：標準的框架化就像前面的盒子模型是一塊一塊制作的，考慮到開發同學開發階段組件的嵌套邏輯。
3）開發者模式
如果還是不太了解盒子模型具體是什么的同學可以在線上使用下圖的方法自己去查看。
設計師在視覺校驗時使用瀏覽器就可以看到開發寫的盒子，了解盒子也可以方便我們走查時知道問題在哪。具體操作步驟：
b.檢查自己的設計稿
在給前端開發工程師提供設計標注階段需要提前保證自己出的效果圖是有效的設計方案，符合基礎的視覺需求，都能保證模塊設計的可擴展性及規范化，避免定稿后再反復修改設計方案。
比如，當我們設計B端產品中的搜索條件模塊時候，應提前需要考慮，在一行展示3個搜索條件、一行展示4個搜索條件、一行展示6個搜索條件等場景。
我們設計完一個場景的設計稿之后，還要考慮不同屏幕尺寸下這套效果圖的布局是否能滿足產品需求，如果不滿足那設計稿需要調整成什么樣式的設計稿。
03. 做好標注文檔
除了確保設計稿的可行性之外，還要做好設計稿的標準文檔。如果項目是小版本的迭代就只需要進行簡單的描述即可，如果是組件庫升級，那就需要給前端工程師的標注文檔，盡量是詳細的、準確的。
其中包括設計稿、切圖（規范的切圖命名、壓縮好的圖片文件）標注、設計規范以及交互文檔（包含字體標注）。
a.描述到什么程度
那細致描述到什么程度呢？這里我簡單地說幾個點：
·側邊導航欄在正常模式下、縮緊模式下，導航欄的寬度是如何變化的。
·如有圖片信息的上傳的場景，考慮圖片比例是什么，是21:9、16:9、4:3還是1:1。
·如果出現文案超長的場景，不可展示的文案信息用什么樣子展示，是文案后面用省略號展示？還是鼠標滑上去有氣泡彈窗的樣式。
b.圖標命名的規范
隨著業務增多，團隊內對圖標的隨意命名的習慣也開始凸顯出弊端，這種不好的習慣會造成同一類功能的圖標會出現不同樣式尺寸，所以我們在搭建圖標規范時候，就可以把切片的命名規范好。
在圖標規范中，圖標需要有著單獨的后綴，這樣可以讓公用圖標與業務圖標更方便地進行溯源。SVG格式的圖標可以不用寫切片的尺寸，而PNG的圖標我建議寫上切片的尺寸。
有些公司習慣用icon進行英文的格式命名，左側是我整理的比較高頻使用的命名，文章末尾我會分享出來文字格式，供大家使用。
c.圖標的上傳
可以在開發前在與前端開發溝通達成共識、圖標制作完成確認后，將圖標上傳到阿里巴巴圖標庫中，更方便前端調用圖標大小和調整顏色。
如果開發需要自己去找到相關圖標，也可以給予權限讓開發從藍湖上傳圖標（前提是得整理好圖標到藍湖上）。
04. 和前端開發工程師的溝通
雖然很多時候項目在發版本時間、驗收標準，在團隊內部都是有明確的規劃和標準，但是有些問題還需要特別分析、特別對待，這里我就列舉幾點我在項目中幾個比較重要的點。
a.進行設計宣講
設計宣講最大的意義就是加深大家的印象，提前給大家一個心理預估，把一些容易忽略的問題暴露出來，把關鍵核心點和規則講清楚，后面可以減輕設計走查的工作量，開發也輕松一些。
1）用認知對齊，目標一致
如果團隊內部四個角色成員大家的認知都是一致的——提升用戶體驗是我們公共目標。
如果不一致，那就要說服其中一個角色，最好是項目負責人，說明校驗影響發版時間，如果大家都按照規范去完成自己工作內容，可提高效率。確保大家理解一致：設計師要和開發、測試確認視覺表現層的驗收內容、確保內容大家理解一致。
2）做有效的溝通
認真是前提、尊重是法寶。在部分開發團隊中，設計師也不能太過于教條地要求開發還原自己的設計稿，畢竟開發生氣、請假了，那就真的沒有人可以進行代碼的修改了。
所以在開發之前，就要和開發溝通，目前這些界面的效果在技術層面上是否能實現，針對比較復雜的界面場景，實現出來的代價有多少，權衡利弊后再確定是否按照效果圖進行開發。
針對復雜的頁面需要把標注標記得更加詳細，并且明確告知他們，我的刪格在哪里說明，布局規范在哪里說明，在這個交涉過程中設計師就需要尊重他人工作成果，明確自己的需要做的事情，把問題描述清楚就好，不可要求開發同學100%還原設計稿、過多地干預別的開發團隊的開發步驟和內容。
3）不必焦慮
前端開發工程師找我們溝通他們的疑問點時候我們要積極回應他們，并且和他們一起處理問題，比如某些復雜的頁面，避免不了實現效果圖不好的情況出現，這時候不要一口咬定就是開發的原因，先溝通具體原因，然后找出解決辦法。
開發人員在修改代碼的階段，開發人員的效率是有限的，而且大家都是身兼多條業務線，在這種開發的場景中可以在不影響正常發版日期的階段，把不太重要的視覺問題，放到下一個版本中再進行修改。
4）規劃時間節點
在工作項目中也要注意分配自己的精力，可以把重要的界面優先處理，也可以定期跟程序員溝通，跟他一起制定解決方案和時間。如果時間允許的話，也可以慢一點修改，只要改對了就可以，畢竟完成比完美更加重要。
對于設計校驗的工具有一個原則，就是提高設計師在設計走查中的工作效率。對于用什么工具并沒有限制，只要順手就好，工具的最大作用就是提升工作效率，只要你覺得能提升你工作效率，你喜歡用啥就用啥。
我把我使用的工具主要分為兩類工具，第一類是發現開發問題和效果圖的不符合的工具；第二類是針對問題高效記錄、追蹤問題的工具。
01. 四款發現問題的工具
我在工作中發現很多時候開發不愿意檢查自己代碼樣式的一個原因就是不知道以下四種工具，在很多公司里面前端開發工程師都是多條業務線并行開發的局面，沒有更多的工作時間自己做設計審查。這時候我們可以提供工具給予開發，幫助他們提高工作效率。
設計師同學也可以借助以下4款工具進行校驗：
前三款都是Google Chrome瀏覽器的具體操作步驟可以看下面的圖片，如果還有不懂的地方可以在評論區給我留言，我看到后會為大家一一解答。
至于“他山石”這款軟件大家有興趣的話可以在網上直接打名稱就會出來軟件信息，大家下載后自行體驗吧。
02. 記錄追蹤問題的工具
介紹完發現問題的工具后，咱們再聊一聊記錄追蹤問題的工具，有的人會問了，你前面講了視覺校驗都要看哪里，又推薦了視覺校驗的工具，我直接把需要修改的地方告訴前端開發工程師不就可以了嗎？為什么還要知道這個記錄追蹤問題的工具呢？
a.進為什么要使用記錄追蹤問題的工具
在一些設計團隊稍微成熟的公司里面由于項目的規模比較大，涉獵的模塊多，參與的人員相對也多。
面對這種體量的項目如果不進行問題的記錄的話，這周做項目里面的1號模塊，下周做項目里面的2號模塊，過了幾周再對項目里面的1號模塊進行修改，然后自己就會發現1號模塊當初的修改問題是什么忘記了，更有甚者都忘記一起協同工作前端開發工程師的名字了。
這時“記錄追蹤問題的工具”就顯得尤其重要了，因為這種工具的出現可以幫助我們回憶起當初具體的修改問題和修改的進度，從而降低上線安全性的風險度。
b.TO DO LIST 思維模式
to do list是一種實際走查階段使用的一種走查模式。
在設計走查階段，主要由設計師發現問題、記錄匯總遞交到前端工程師這里進行修改和跟進，主要的優勢是在于協助走查可以順利地開展，不遺漏掉任何信息。
在制作表格時候，可以關注這三點3點“1、問題需要逐條記錄。2、需要截取問題圖片及描述修改正確內容。3、相關對接人員的名稱和處理進度?！?
一個優質的項目落地是各部門協同合作的成果，視覺校驗是設計師必須掌握一項技能，我們本著“認真是前提、尊重是法寶”十字真言去校驗開發輸出的真實頁面，希望這篇1萬多字的文章可以幫助到你在校驗的工作上少走彎路。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在色彩方面，雖然UI是一個相對獨立的設計環境，但其實一直是在跟隨平面的趨勢。
年初潘通發布了2021年的色彩流行趨勢，灰黃色一時間成為了我們追逐的目標。
但是潘通流行色更多是表現了一種當下的社會情緒與遠景追求，并不是用來指導設計的。
(圖片來源：Dribbble)
在UI的色彩方面，我們都記得2020年還是流行的是高飽和色彩路線，而2021年UI色彩一下子就被沖淡了，各種低飽和度色彩的作品更加得到設計師的青睞，似乎也昭示著大家的情緒也從疫情中慢慢穩定了下來，這個世界的確需要設計來對情緒進行即時表達，在5月份Google的全新Material You設計語言中，這種低飽和色彩也被發揮的淋漓盡致。相信低飽和度色彩將在2021下半年會延續發展！
有關Material You信息可以看一下我的另一篇文章《Material You 為你而來！》
(圖片來源：Google Material You)
(圖片來源：Dribbble)
圖形方面，亮點在3D！毫無疑問3D插畫在2021上半年繼續著他的強勁勢頭，2021上半年涌現出了大量優秀的3D風格插畫，并且不止是3D卡通人物，在產品渲染和背景展現上也在醞釀新的力量。特別說明的是，設計工具的高速發展也讓3D門檻不斷降低，如果你只盯著C4D那就真的OUT了，像Blender Spline Stager 這樣的新興輕量級3D工具軟件是需要特別關注的，也許這些新工具是真的能讓你跑出與別人不一樣的賽道。
(值得關注的3款新興3D軟件)
在2D圖形方面，也有突破，除了傳統的矩形、圓角矩形、圓形之外，UI中將會引入到更多的形狀，像多邊形、三角形、不規則形都會大量的出現在UI設計中，UI設計越來越開放和放得開了！
(圖片來源：Google Material You)
隨著去年底蘋果BigSur操作系統的發布，3D圖標著實火了一段時間，出現了不少3D風格圖標。但是后來大家發現在圖標在2D層面其實還是很有創新點的，并且也更加實用，所以我們又看到了磨砂玻璃風格圖標走入了我們的視線。這種采用背板透光設計的風格圖標，看起來清新自然，一經亮相就讓設計師們喜歡起來了！
(圖片來源：Dribbble)
但無論是3D風格還是磨砂玻璃風格圖標設計，從某種意義上說，這些都是擬物化設計的一種新的回歸方式，設計就是一個圈哪！
排版設計，塊狀與字體成為了關鍵詞。先看幾個作品，你發現了什么了嗎？
(圖片來源：Dribbble)
UI設計的排版不止是為了視覺好看，更多是要做信息的分割與歸類，讓信息閱讀快速準確且優雅！從某種方面也就是我們說的用戶體驗。當下仍然是扁平化為主體UI設計語言的時代，陰影設計幾乎已經退出了當下的主流設計，所以在信息的區分上靠的就是留白與文字，所以加粗大字體，卡片留白、形狀色彩塊就在UI排版設計中起到重要的作用。再輔助通過一些微交互動畫，一切都是那么自然絲滑，主次分明！
(UI排版的三個趨勢)
最后我們說說行業趨勢方面，在2021上半年的UI設計作品中，除了常規的移動端APP UI設計之外，我們更多看到了一些針對于其他設備的UI設計，比如說電腦B端應用、車載HMI、數據可視化、交互動畫等這樣的新端趨勢，并且這些作品的數量越來越多了，所以從行業趨勢來講，UI設計師們還是要打開更多的眼界和格局，設計的競爭不止是在水平能力上，更重要的是行業賽道的選擇！關注趨勢尤為重要！
(圖片來源：Dribbble)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
認知負荷是完成一項任務所需的精神努力總量。您可以將其視為用戶與產品交互所需的處理能力。如果需要處理的信息超出了用戶的處理能力，那么認知負荷就太高了。
造成用戶認知負荷的的原因大多都是，產品在交互和視覺上過于復雜，設計的統一性不夠，導致用戶在使用時不斷進行思考無法形成習慣
例如移動端中的空狀態，目的是為了引導用戶完成任務，在設計時無論是文案展示與視覺表現都應簡單明了、層次分明、視覺統一
用戶獲得的初始信息會影響后續的判斷，用戶對某件事做出判斷時，會不自覺的將開始看到的信息作為衡量標準。
在日常生活中錨點效應非常常見，例如平常不帶帽子，偶爾帶帽子出門的你，走在大街上會發現挺多人都有帶帽子，因為心理活動是把帶帽子這件事作為起始衡量，而你刻意的在尋找與帽子產生共鳴的事
在產品設計中最典型的就是會員體系，例如某視頻平臺的會員價格默認選中的那一欄會比其他的價格低，那么用戶在使用時心理會默認這是會員的價格，相對應其他更高的價格只是作為衡量這個最低價格而存在
又稱對比效應，指人們對兩個不相上下的選項進行選擇時,因為第三個新選項(誘餌)的加入,會使某個舊選項顯得更有吸引力，通過對比誘導人購買商家想讓他購買的商品。
有一位著名的行為經濟學家他叫丹·艾瑞里教授，他曾經做過一本《經濟學人》雜志的定價策略，這里不細講感興趣的可以搜一下。誘餌效應運用最多的是在超市場景，我們經常看到超市的貨架上會有看起來很實惠的物品在，如一袋泡面可能是5元，而旁邊還有3包泡面一起出售可能也就12元，然后開心的拿走了，這就是誘餌效應，那一袋5元的就是誘餌，商家的目的就是為了讓你買走12元的
而在線上產品策略中運用最多的則是電商場景，如下圖中的圖書商品，單價610元，定價980元，三件單價488元，這里的單價和定價都是誘餌，目的是為了讓用戶同時購買三件商品，而用戶內心是欣然接受因為更劃算
在檢查所有可能的結果時，我們傾向于關注一些看起來合理且熟悉的事物，從而忽略了其他結果。
13年9月twitter公司宣布IPO，當時11月份才開始交易，但是在這兩個月時間里有一家名為twweeter的公司三天內漲了13倍，只是在名字上與推特公司極為相似，但實際業務毫無關系，機構就是利用用戶的注意偏差讓不了解實際情況的投資者只看到相關性，而另一面的不相關的結果用戶自然的忽視掉
在產品設計的客服助手中，就屬于注意偏差，我們習慣的認為向客服回復人工等關鍵字時，會自動切換人工客服，而產品則會設置一些虛擬的智能客服來節省成本，而用戶在這個過程中則忽略了細節，誤以為智能客服是人工客服
前蘇聯前蘇聯心理學家菜斯托夫提出特殊事物才易被人牢記。也就是說，有個性的人、與眾不同設計得商品、不尋常的事情，都會讓人留下更深的印象。
生活中我們很難記住某個點或某件事，但是當這件事足夠突出擁有獨特的個性我們便會深深印在腦海里，比如一串字符ezol4tpmb，我們最容易記住的是4，因為他是唯一的數字，在比如說讓你去記憶國內某些城市的特點，如西安、開封、浙江我們想到的就是秦皇陵、包青天、西湖等著名具有特征的地點，因為這些事物比較特殊更容易被記住
在品牌設計中菜斯托夫效應運用的比較廣泛，如何通過視覺的表現讓用戶對產品更加的印象深刻，對此就衍生出產品IP、品牌符號這種具有特殊意義的標識便于加強產品印象
任意一點移動到目標點的時間與該目標點的距離和大小有關，距離越遠時間越長，目標越大時間越短，公式：
T = a + b log2(D/W+1)
在交互設計中經常用到此定律，無論是正向還是逆向此定律都能夠很好的運用到交互中，如mac系統上的關閉按鈕，始終在左上角并且很小，我們的鼠標在右側，移動到左側上角時間會隨之變長，因此這一交互結構就避免了用戶誤操作關閉軟件
再例如移動端中會把重要的按鈕操作放置在屏幕右下或者居下，因為大多數人是右手使用手機，因此在使用時右手拇指距離點擊區域會更近
幸存者偏差是指把一些事的不同角度的人員篩選出來，篩選出一部分人進行采訪從而制造輿論，觀察者只能看到事物的一面，而另一面則被忽略，也被稱為以偏概全
某次春節記者采訪到一些在火車上的群眾，聊一些購票的過程以及買到票的心理感受，最后向公眾公布出今年回家的票大家都買到了，但這個過程中卻忽略了那些不在車上或者沒買到票的人們，因此就以偏概全的傳輸單方面信息，這些被采訪到的人們就是幸存者
在做產品時經常會聽到用戶畫像這個詞，用戶畫像就是利用幸存者偏差而把廣大的用戶數據通過典例呈現，當然這個幸存者的樣本必須是壓倒性的龐大，否則就掉入幸存者偏差的陷阱
彼此靠近或接近的對象往往會組合在一起，相近的元素可以建立關系，人們會不自然的把相近的元素看作一個整體。
在UI設計中，經常會用到鄰近法則進行設計，如一些組件、卡片的建立，由不同的元素組成變成一個整體，其次鄰近法則能夠有效的用戶層級的劃分，如下圖中的一些卡片、icon進行規律的排布最后組成一個整體，與上下模塊的層級有效的區分
特斯勒定律又稱復雜性守恒定律，他指出對于任何系統都存在一定的復雜度并且是無法避免的，問題是誰來處理它。
在任何產品設計中無論是功能還是流程都存在一定的復雜度，依據特斯勒定律有些復雜度是無法避免的，那么需要我們在設計中去解決這些問題，保證在用戶的角度來看它是合理的簡單的
像我們常見的話題功能，輸入#自動引導出關鍵詞供用戶填寫省去用戶輸入時間，再例如b站的一鍵三連，長按點贊的同時會把收藏、打賞功能一并完成；結構層面也會用到此定律如產品中的設置頁面，按照不同的維度進行區分如系統維度、反饋維度、功能維度幫助用戶更快的完成操作
它是由意大利經濟學家帕累托提出，它指出對于許多事件，大約80%的影響來自20%的原因
在設計中我們會發現一個產品頁面有幾十上百個，對于用戶而言能夠提供價值的可能也就那么幾個功能頁面，這幾個頁面可能占總產品的20%左右，那么我們在做優化的時候則需要去考慮如果把20%做好把它的價值放大
再往細了說，例如打車軟件在這個頁面中能夠為用戶提供核心價值的區域則是地圖區域和選擇目的地區域，那么在做優化體驗時應當著重關注此區域，而頁面中剩下的區域則受上面20%的影響
社會證明是用戶用來確定行為方式的便捷捷徑，當他們不確定目標時，他們最有可能認為并接受他人的行為是正確的，人數越多，行動似乎越合理。
最近抖音在評論區新增了一個踩一下與點贊進行互補，但是奇怪的是我們進行踩一下時并不會展示具體數量，試想一下當點贊的數量大于踩一下的時候，我們有時就會被影響認為這條評論值得點贊
再例如購物中的評論排序，像京東把好評優先展示在前面，當好評的數量大于其他維度時就會影響用戶判斷，用戶會把數量多的好評當作參考依據認定這個商品符合自己的需求
指用戶知道的內容與他們想要或需要知道的內容之間的空間，這個空間叫做差距，差距會導致痛苦，要消除痛苦，用戶需要填補知識差距。
例如在做產品設計中都會涉及到登錄注冊流程，那么對于有些產品則需要在登錄注冊階段大量收集用戶信息完成更好的推薦策略，但對于用戶而言用戶的認知是固有的流程，如填完手機號就收到驗證碼，最后完成注冊進入首頁，如果說中間的過程需要收集用戶信息，則需要對應的解決方案來彌補用戶的心理差距
即可App在收集用戶信息的階段使用了偏趣味性的一些設計表現，在用戶的這個空間差里面來緩解用戶的情緒，激起用戶填寫欲望
心智模型是對某人關于事物在現實世界中如何運作的思考過程的解釋，它是對周圍世界的表示，可能準確或不準確，用戶認為他們對您的產品的了解會改變他們使用產品的方式。
心智模型其實就是我們對未來發展的預測，內心對要發生的事情進行預判，然后采取行動，例如我們要購物想到的就是淘寶、京東，想到吃飯可能就是美團、餓了么，這些產品就打入了用戶的心智。往細了說心智模型是一個廣泛的概念，它還包括行為模型、實現模型、表現模型
像我們常用的聊天軟件，在聊天過程中撤回消息，就會有個重新編輯功能，這就是滿足用戶的心智模型，預判用戶的操作例如微信、釘釘、飛書
擬態是在頁面中模仿現實世界物品，通過它的外觀和交互模仿現實，擬物化適合用來讓用戶適應新的頁面和技術形態。
我們在做頁面時都會涉及到圖標的繪制，那么那些具有業務屬性的圖標則需要通過擬物的方式進行呈現，對于用戶能夠降低理解成本，如經典的紅包、自如的金剛區等
與群體相比，用戶對個人的關注不成比例，與大型抽象群體相比，人們更愿意同情一個單一的、可識別的人。
這個如果用逆向思維來想的話，類似于我們說的“對抗性人格”在大多數人都對一件事或事物看法一致時，出現一個不一樣的聲音，試想一下我們在刷短視頻時評論區總有那么些人與大多數人的看法不太一致，這就是奇點效應
在設計中體現最多的是等級體系和勛章體系，一方面為用戶的攀比心理，另一方面則是奇點效應，這類用戶的想法就是為什么要一樣，為什么不可以獨樹一幟。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
談到設計思維可能有很多小伙伴會問，“設計思維是設計師的事，和自己沒有關系”。其實不然，我認為設計思維不僅僅是設計師才具有的能力，關乎到各行各業不同身份的人，特別是管理層和老板更應該有的一種思維方式。設計思維無處不在，有人可能會問：“到底什么是設計思維，設計思維能帶給我們什么好處，希望通過一篇文章讓你徹底搞懂設計思維的概念和方法。
美國經濟學、認知心理學家，諾貝爾經濟學獎獲得者赫布·西蒙 (Herbert Simon)，在他的著作《人工科學》提出了設計作為一種思維方式的概念。
1987年，哈佛大學設計學院教授羅偉(Peter Rowe)出版了《設計思維》一書，書中首次使用設計思維的概念。
1991年，戴維·凱利（DavidKelley)成立了設計和創新咨詢公司IDEO，將設計思維推向商業化，成為設計思維的教育和推廣先驅。全球最大的設計咨詢機構之一。1992年，卡內基梅隆大學設計學院院長布坎南(Richard Buchanan)發表了一篇名為《設計思維中的難題》的文章，他指出：“設計思維可以擴展到社會生活的各個領域”。
2004年戴維·凱利（David Kelley)創辦了斯坦福大學設計學院（D.School）致力于提供設計思維的教育和推廣，以Design Thinking為核心教學思想，教授設計思維方法與實踐。在美國，設計學院正取代商學院成為熱門，該學院已成為斯坦福大學最受歡迎的學院。
“設計思維是以人為本的利用設計師的敏感性以及設計方法，在滿足技術可實現性和商業可行性的前提下，來滿足人的需求的設計方法。設計思維是一個可以被重復使用的解決問題的方法框架或一系列的步驟，提供解決問題的原型和一系列的工具?！?——蒂姆·布朗(Tim Brown)教授，設計思維的提出者和倡導者
首先設計思維是以用戶為中心的，從用戶的需求開始出發，針對產品看看用戶有哪些需求，能不能通過科技手段去實現，有了科技的可行性，再看看能不能不斷的實現商業變現，才能使我們的產品不斷的給用戶提供價值，所以設計思維指的是用戶的需求，科技的可行性和商業的持續性，這三者之間的交界就是設計思維帶來的創新。
設計思維其實也是一種思維方式，能幫助你打破當下的一些卡點，包括企業遇到的一些問題，設計思維能夠幫助企業創新，從而在企業發展的不同階段實現升級和轉型，甚至有些企業用了設計思維的方法實現第二增長曲線。設計思維的應用領域也非常的廣，比如：實物產品、服務設計、商業模式、軟件應用、工作流程、企業文化等。有些兒童教育機構也用設計思維開設了創造課程引導和教育孩子，斯坦福大學還運用設計思維開設了人生設計課，就是一個人的人生也可以被設計的，我也曾讀過這本人生設計課，有空給大家分享讀書筆記。一些全球領導品牌公司早已意識到設計思維對于其產品開發及公司發展的重要性，采取一系列措施加大對員工在設計思維方面的培訓，從蘋果、美國銀行、 宜家、可口可樂，星巴克、Airbnb、FOTILE方太、到GE通用電氣、寶潔、IBM、三星、3M 等，都已經把設計思維納入其經營策略，成立設計思想工作坊，并大量運用于為各種企業和社會難題提供實用和具有創造性的解決方案，下面就來談談設計思維具體步驟和方法。
設計思維的第一個方法是共情（Empathy）也叫同理心。大家可以想一下，我們在設計或者解決問題的時候，是不是站在需求人的角度去看待問題的，有的設計師可能只看到冰山模型最上面的一層，而冰山下用戶真正需求卻看不到，這就需要我們去了解用戶，了解用戶最好的方法就是共情。
觀察是共情最基礎的方法，其實就是深入洞察用戶，如何從用戶身上發現問題。你可以回想一下上大學時，是如何談戀愛的，是不是一開始先默默的觀察對方，看看有什么習慣和行為，喜歡什么東西，想辦法去靠近和了解，找到一個突破點。比如你幫她修好了電腦，解決了她的問題，就這樣自然而然交往，進入了戀愛狀態。這就是觀察，觀察是人的本能，也是建立情感最基礎的第一步。這里的觀察是帶有目標性的，并能解決實際問題的觀察。
最近看了一個節目叫秘密大改造，就是幫助用戶改造裝修老舊房的節目。欄目組安排室內設計師裝作成記者和用戶一起住一起吃，設計師發現房子特別小，空間利用很低，觀察房主人生活習慣、愛好等，通過交流了解房主的內心世界及對生活的向往等。完全和房主建立共情基礎，等了解觀察的差不多了，節目組就贊助房主和節目組一起去做公益的名義外出一個月。節目組故意不告訴房主在這一個月之內幫助房主改造房子，設計師就根據之前觀察發現的居住問題，設計改造了房子的方案，并監督工人進行裝修。等一個月房主人回來后，驚訝地發現自己的房子都認不出來了，完全超出了自己的想象，房主人太滿意了，每一個細節都考慮到用戶的需求，最終設計的方案用戶當然比較滿意了。這個欄目就是用了設計思維幫助用戶解決實際問題的。我舉這個例子希望幫助大家能更容易理解，大家有空可以看一下這個節目，看看設計思維是如何運用的，如果是自己該怎么用設計思維的方法去做。
共情的第二個方法就是沉浸式體驗，就是把自己當成用戶去體驗真實用戶的感受才能更好的發現問題。比如IDEO公司被委托設計一款兒童車，就讓工程師坐在現有的兒童車上去沉浸式體驗，推著這些成年兒童去戶外或去購物。體驗結束后這些工程師就總結了：兒童車太矮了，前面看到的都是腳，還有灰塵，最重要的看不到媽媽沒有安全感，小孩總愛哭，于是工程師就把兒童車做成可折疊并能升高，下面可以放東西，然后再轉過來面向媽媽，兒童就喜歡了。這就是通過沉浸式體驗來挖掘用戶需求。
共情最后一個方法是用戶訪談，可以通過定性或定量訪談目標用戶，可以面對面的交互式訪談，焦點小組訪談、專家訪談、也可以是問卷形式的等，網上有很多訪談模版和發放問卷的網站。上文提到的例子秘密大改造的設計師和用戶一起吃一起住，在不輕易的的交流中就知道了用戶的真實需求，這種訪談方式用戶是最不會感覺到有壓力的，也最能發現用戶真實需求的，所以最好的訪談是先和用戶做朋友，就是完全把用戶當成自己的好朋友，試問有幾個公司能做到這一點呢？
通過共情的方法我們充分理解需求，并挖掘了用戶的諸多問題和需求，那么是不是所有的需求都要滿足用戶呢，怎么找到用戶的真正痛點呢？這就需要重新定義需求，找到核心問題并進行設計。作為設計師你是否會遇到：接到需求就去設計，而反復設計的結果卻不被用戶滿意，只是做到了被領導滿意，而被陷入盲目的嘗試誤區中，這個時候應該回頭想一想需求有沒有被正確定義，有沒有明確用戶真正的問題。只有對設計需求進行有針對性的，有目標性的定義和理解，設計師才能找到最佳的落腳點，從而高效省時省力的完成任務。比如我們使用的Iphone，有沒有發現不能自定義鈴聲，喬布斯肯定發現了這個問題，但為什么到現實還沒有改進這個功能，但Iphone依然賣的很好。這就說明了自定義鈴聲不是用戶的核心需求，沒有誰會經常換鈴聲來炫耀自己的身份，這個功能有沒有都不影響最終的銷售成績，原因可能是蘋果希望用戶不要被打擾，更尊重用戶隱私。需求定義不是產品經理或老板拍腦袋定下來的，要把自己放到空杯狀態，不要相當然的拍腦袋，也不要拍胸脯說自己的想法一定是正確的、要深挖用戶需求，找到用戶真正痛點，重新界定問題，從而確保解決產品核心問題的正確方向。
設計思維的第三步生成想法，要生成想法可以利用頭腦風暴來共創更多的好主意。提到頭腦風暴可能大家都聽說過，其實就是聚集各式各樣的人一起思維發散，俗話說 “三個臭皮匠頂個諸葛亮，三人行必有我師焉” 就是這個道理。頭腦風暴的前提是正確理解用戶的真實需求和明確設計需要解決的核心問題，頭腦風暴盡量不要找領導參與，因為領導一句權勢的話會扼殺很多好意的產生。其次要注意自身思維的局限性，我們在思考問題時經常會帶有自己的經驗、習慣和思維方式，從而走進了盲區，如果有人提出一個好主意，有些人就不愿意思考了，這也說明了人的惰性。所以開展頭腦風暴還可以幫助我們打破傳統思維方式，打破盲區和惰性，從而打開多視角全方位的開放性思維，幫助產品找到創新的方法。還有要注意的是：面對別人提出的天馬行空的主意，不要評判和否定，而是說Yes,and, 在別人想法上再去想，并且鼓勵越多這樣的想法越好，這樣就會激發出更多人愿意出來分享自己的想法。最后，設計師從發散思維中收集靈感，再由靈感轉變成可實現的想法，最后把最佳想法轉變成全面、具體的實施方案。
在找到最佳的解決方案之后，需要在原型上呈現出來，這就把抽象的概念與想法變成具象的模型來驗證用戶問題，這樣能避免不合理不準確的假設。為了快速搭建原型可以采取精益創業的精神做出最小可行性產品MVP，花最少的時間和金錢來快速試錯。最簡單的原型可以利用隨手可得的材料快速制作或現場繪制草圖，達到易理解快速溝通的效果，從原型中看看有沒有準確解決用戶的問題，發現問題后，再去迭代和優化。
原型設計好之后可以進行小范圍測試，A/B測試，灰度測試等。我們要考慮在測試中要得到什么結果或驗證什么問題，然后從觀察真實用戶的使用習慣和喜好出發。抓住用戶的本能行為，重點看用戶做出了哪些操作行為，用戶真實的反應和你所預期的可能是不一樣的。當用戶提出不一樣的反饋時，不要為自己的設計而辯護，用戶說的不一定對，但用戶說的一定是個事實，用戶覺得不對，就說明哪里可能出了問題，要虛心接受批評。如果用戶說的對，就去改，收集用戶的反饋后，再進行快速迭代和優化，最后發布上線，產生商業價值可持續性。
能讀完這篇文章的你應該對設計思維有一定的概念了，你已經有了改變世界的能力，也許你在以后的面試中能更好的運用設計思維的方法來進行面試問答。最后簡短總結一下設計思維的方法過程：“首先要學會與用戶共情，幫助我們定義問題，再用頭腦風暴的方式幫助我們解決問題并產生創新的方法，把創新可行的方法轉變成原型，用原型進行測試和驗證假設，再通過原型測試去了解用戶，并重新定義問題，所以這五個步驟是不斷反復和疊加的，最終打造出用戶喜愛并能產生商業價值的產品”。
讀了這篇文章你可能會發現，其實市面上所謂的產品思維，商業思維，突破性思維，服務設計，體驗設計，其實都是來源于設計思維的核心理念和方法。設計思維幫助了很多企業，但也不要認為是萬能的，它只是幫助我們解決問題的方法和工具框架，只有在項目實戰中不斷運用和實踐，才能更好的理解和轉化成自己的理論體系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
B端產品是很容易交互設計不一致的，隨著多平臺陸續融合為一個平臺，暴露的問題就越發明顯，因此改變現狀便迫在眉睫，此時保證交互設計的一致性就是我們重點要考慮的問題。
目前有很多較火的組件平臺，例如：Ant Design 、Element等。由于公司內部一些原因，前端開發會直接使用組件庫，沒有規范的約束，隨意使用組件也是導致平臺體驗不佳的一點。
由于產品上線后，售后組、業務組經常會反映一些關于體驗相關問題，有時只是單一模塊進行迭代、改版、完善而遺漏了與它相關聯的其他模塊，便會影響全局感觀。
此時會有人產生疑問，明明平臺現存很多樣式問題，功能交互不統一，為什么首要不是先快速建立設計規范文檔？
因為在沒有設計一定量的設計稿之前，所有規范都是華麗的泡泡！前期在設計階段會遇到很多具體場景化的問題，根據不同的場景會不停的修改，還有多方評審來達到最優方案。此時的設計稿處在極不穩定的時期，自然而然也沒什么規范文檔可言，因此現階段要做的工作是找到重點模塊進行設計稿基礎搭建。
當然設計師在做設計時一定要有全鏈路的思考和拆解問題的能力，不能局限于單個需求，鉆入牛角尖。畢竟B端產品體量大，功能模塊多，系統耦合度高，交互設計文檔又是一個全局概念，這最基礎也是最重要的第一步是非?？简炘O計師的。
重點模塊功能搭建好設計稿以后，可以先讓產品穩定發展一段時間。當團隊對產品初期有了一定熟悉程度，此時就很適合創建自己的交互設計規范了。
把控視覺統一，減少重復出圖，提高效率。在公司有多個設計師協同工作時，可保證體驗、設計、交互等等的統一性。
提高設計稿的還原度，根據規范中組件使用情況建立公共組件庫，提高復用率，減少返工，極大的提高開發效率。
在畫原型圖遵循交互設計規范以及排版格式會減少開發在看原型圖和設計稿之間產生歧義，當然產品原型圖不需要精致，只需按照規定規范中的交互制定即可。
通用組件通過測試后，以后將不在花時間在測試組件交互上，避免了重復工作。
B端最重要的設計原則就是效率優先，保證效率的前提是組件一致，交互及時反饋，以及合理的使用場景。
因此設計交互規范不僅僅只是顏色、文字以及一個個組件的展示，這樣的文檔對產品、測試毫無意義。規范是由基礎容器盒子+組件庫+交互狀態+正確使用場景組成，在規范中每一項都應標注清楚。
思路：將原子【文字、顏色、控制器等】組合成分子【狀態提示、數據展示、數據錄入等】最終組合成元素【不同的容器頁面、彈窗、抽屜、卡片等】一個一個的元素互相搭配，組成完整的基礎平臺。
在設計過程中，設計師需要建立適配的概念，根據具體情況進行適配，以及考慮哪些區塊需要動態布局。中臺系統的用戶的主流分辨率為 1920*1080、1440*900 和 1366*768，一般常用畫板1440進行區塊動態適配。
柵格寬度：建議柵格系統的網格大小選定8作為柵格系統的原子單位，目前主流設計屏幕分辨率在水平以及垂直方向都可以被8整除，使用8作為最小原子足夠適配。
水槽寬度：根據業務可自定義水槽的值。比如8、16、24、32、40等，經過實踐經驗，正常情況下，水槽寬度為24時，視覺效果最佳。
非常規設計時：不需要死板的堅持傳統柵格系統，根據設計場景可自行修訂。
頂部導航欄高度計算范圍公式：48+8n。
側邊欄寬度計算范圍公式：200+8n。
界面最大可達顯示器最大值，側邊導航為定寬，右側內容隨柵格變化而變化。
為保持視覺、交互一致性，統一容器范圍。容器是用來收納原子、分子的，理論上信息不應該超出容器。
以有遮罩基本彈窗為例子進行分析，包括視覺+交互。開發可根據彈窗盒子創建基礎容器組件，像素級也可幫助測試進行校準。產品及設計可根據使用場景規范自身，在制作原型以及設計稿時正確使用組件。
按鈕用于開始一個即時操作。通常分為基礎按鈕（分為主按鈕、次按鈕）、圖標按鈕、文字按鈕、圖標+文字按鈕，在不同場景下使用不同的按鈕達到最佳交互效果。
基礎按鈕應用廣泛，較多人分析這種場景。所以下面主要分享一下圖標+文字按鈕的基礎規范以及使用場景。
錄入類由輸入框、選擇器、單選框、多選框等多種控件組成，基礎交互包括（默認、懸浮、點擊、失效四種狀態）
不同的控件相互組合成信息頁、表單頁、問卷頁等。
基礎輸入框包括（標題+輸入框）根據不同場景有多種情況，下面僅列出交互場景，具體視覺標注不再展示。
平臺中反饋機制是非常重要的設計，能及時提醒用戶當前操作是否成功，或是失敗在哪里，因此不同的場景需要特定的反饋提示。
反饋提示包括（警告提示、全局提示、通知提示、氣泡確認框提示、以及tips提示）
下面僅列出交互場景，具體視覺標注不再展示。
文字、顏色、間距、圓角相當于元素中的原子，完整的界面正是由這些原子一點一點組合而成，承載著最基礎但也是最重要的一部分，因此規范也要更詳細。
產出文檔是否能真正落地需要來自多方評審包括產品、技術、測試等，盡量從多角度、全方位來進行審核。
投入開發前，多方評審，各抒己見達到最優方案。
投入開發后，若要優化修改定稿部分，需再次拉通會議討論，結合當前實際情況將歷史問題一次性解決到位，避免遺漏再次造成不統一。
由于篇幅原因，規范只是展開個別案例進行分析。
最終需要落地實現才是最重要的一步，所以我們還有很長的路要走。也要不斷進行思考與總結，如何讓一致性設計規范更符合設計原則和業務場景～
原文地址：站酷
作者：食文貘
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在人機互動過程中，用戶與界面的每一次互動都是一次加載過程。加載設計對于使用者來說是非常影響體驗的一個方面，后臺復雜的數據計算時間、網絡狀況不好都有可能造成等待時間長而帶來焦慮，今天就讓我們好好來聊下加載，以及怎么讓加載的體驗變得更好。
加載指的是用戶在客戶端發出一個指令后，直到出現反饋結果時，中間這段時間內計算機完成的一系列執行動作，所以只要你在App中操作請求更多數據那就不可避免有加載。
根據一份調查得出，用戶能夠忍受加載的最長時間在：3到8秒。8秒是一個臨界值。但現在的高速互聯網真是把我們寵壞了，如果一個頁面的加載時間超過4秒，可能會被用戶直接退出，除非Ta一定要打開那個頁面。
這里有個很重要的數據叫跳出率，在谷歌的一項調查中就已經發現：
1-3 秒的加載時間跳出率提高了 32%。
1-5 秒的加載時間跳出率提高了 90%。
1-6 秒的加載時間跳出率提高了 106%。
為了降低用戶等待的焦慮，獲得更好的用戶體驗，我們必須讓用戶知道我們正在努力加載，同時要讓加載更有趣來分散用戶等待的注意力。
首先我們要先了解以下這些App中最常見的加載場景，也就是那些發出指令后應用需要長時間處理的加載過程。
下拉刷新（請求最新數據）+上滑加載（請求更多數據）
▲ins_下拉和上滑
當你在多個App中切換使用時，超過一定時間間隔就需加載數據。
▲系統后臺切回
當應用出現異常關閉、應用閃退等情況重新啟動app，需要進行數據加載。
▲App啟動加載
頁面加載新的數據，涉及原生跳原生或者H5頁面。
▲Moo音樂_頁面跳轉
在特定的時間內頁面自動進行數據刷新，例如每天0點更新排行，大部分用在運營或跟時間相關的場景。
▲番茄小說_排行定時更新
通訊類社交的App都采用實時推送機制，不需要用戶手動操作也能接收到最新的數據。
▲Quack社交聊天
加載器是最早被使用的方式，適用于快速加載，這也是使用率最高的一種。
▲旋轉菊花記載
然而這種加載器有個缺點就是無法告知用戶需要等多久，Nielsen Norman早在1993年就提到響應時間和loading動畫，“如果計算機無法提供快速響應，則應該以百分比的形式向用戶提供持續反饋?！薄綧yers 1985 論文，“計算機-人機界面百分比進度指標的重要性”】
所以加載器和進度條成了黃金組合，適用于長時間（10秒或更長）的加載過程，顯示一個操作將花費多長時間以及目前所處的狀態，通常有線性進度、百分比、直觀數字等。
▲Cream M.
▲Gleb Kuznetsov?
▲有道樂讀、嗶哩嗶哩漫畫
在此基礎上加載器也開始往趣味/品牌化發展，使用情感化加載動畫，可以讓等待過程變得輕松、愉悅。Tips：搭建符合目標用戶群體的生活場景，能拉近與用戶之間的距離。
▲摩拜單車
▲ARCADE STUDIO
吸引用戶的眼球，感覺時間會過得更快一點，短暫忘記等待的過程。
▲Markus Magnusson
▲DeeKay
▲RWDS
通過品牌logo或產品相關的圖形呈現在界面上，將品牌基因融入整個Loading動畫中。
▲Medium
▲有道樂讀
▲ 開言
加載器和進度條這一組合有很多變體，可以應用在不同的頁面位置：
當前頁面內容需一次性加載完成后才能顯示內容，這是頁面加載最原始的狀態。當頁面元素較多時，內容呈現的等待時間會變得很長，一旦時間太久要給予提示。
當用戶執行某個操作時，為了防止用戶繼續操作導致數據加載失敗，則用Toast的樣式來提示正在加載。在畫面中間出現提示框，有時會加上黑色透明底蓋在畫面中間，這種情況一般除了返回上一級的操作可點，其他操作將受到限制。
可以是在頂部或底部欄上，告知用戶等待的時間長度，讓用戶有一定的心理預期。
通過手勢操作，快速加載和更新當前頁面的內容。
在特定位置進行加載，功能指示更明確，避免用戶反復操作。
加載器這種方式相對比較簡單，但也會阻斷用戶的其他操作，用戶只能等待加載完成才能繼續操作。會給人的感覺時間較長，且對于加載出來的頁面沒有任何預期。
那什么時候是需要中斷用戶操作呢？主要有以下兩種情況可以作為判斷：
1-當前的操作未成功，則接下來的操作或結果也無法顯示，例如：啟動App、手機支付、渲染濾鏡等；
2-當前的操作本身不能與其他操作同步進行，需停留在當前界面保證操作完成，例如：掃描、遷移資料、實時翻譯等。
如果中斷時間較短可以使用toast加載提示，時間較長則建議用專門的單頁且有可取消的按鈕來提示加載過程，以引起用戶的重視。
· 適用性廣
· 拓展性強（趣味性及品牌宣傳）
占位符分布加載就是當界面中圖文同時存在時，如果獲取完所有信息才顯示所耗費的時間是很長的，因此為了縮短用戶等待的時間，會選擇優先加載快的元素（文字），慢的元素（圖片視頻等）則用其他的方式占位，最終等待加載全部完成。較為適合feed或瀑布流模式。
分步加載的好處是在等待加載的時間里用戶可以看到相關的文字內容，不會像空白頁加載或Toast加載，只能默默地等待加載的過程。
將圖片用灰色或灰色圖（對開發更易用）來代替，中性灰在界面中不會搶風頭，在暗黑模式中也適用。
▲灰色色值（例如#EFEFEF）或灰色圖片
▲Youtube
在灰色圖上加入品牌元素也是不錯的方式，例如logo或吉祥物IP，將品牌人格化、情感化，輔助企業向用戶傳達產品的氣質特征，在各類產品中廣泛運用。
▲Moo音樂、有道樂讀
通過程序提取面積較大的主色調，并設置幾種符合產品調性的默認色，以防取色失敗。需保證色彩庫的顏色高級耐看，飽和度不要太高，不然很刺眼反倒引起到不好的體驗。
▲Behance、Apple Music
▲Google Search
模糊圖像也稱為模糊技術，渲染圖像的一個低質量版本，然后過渡到高質量版本，初始圖像的像素和 kB 都很小。為了去除偽影，圖像會被放大和模糊。
▲Behance、Unsplash
? 良好的閱讀性；
? 準確區分已加載和尚未加載的內容
骨架加載就是先加載UI布局框架，再加載框架中的內容，細節通常按照骨架輪廓（也稱為占位UI）、文本、圖像的順序出現。通過這種方式直觀地提前讓用戶知道整個界面的架構，并營造出一種漸進的感覺，使用戶感知加載穩定且速度快，提高了產品的體驗感。
“Skeleton Screens”這個詞最早出現在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設計師的支持，LinkedIn、Instagram、Facebook 和 Google 等大公司都在使用骨架屏幕，通過將被動等待變為主動等待。
被動等待是指你只是坐在那里無所事事，看著加載器轉了一圈又一圈。積極等待是當你在等待時做一些感覺像是進步的事情。骨架加載通過在每次屏幕更新時為用戶提供新信息來鼓勵主動等待。
通過這種方式，骨架屏幕將焦點從您等待的時間量上移開，并將其放在您面前發生的實際進度證明上，從而使加載過程感覺更快。當它顯示已加載的內容和剩余的內容時，它允許用戶構建準確的UI界面期望。
▲Medium手機版
▲Medium網頁版
實現骨架屏幕時，請確保占位符 UI 大部分準確表示最終 UI 的外觀。否則，就會在期望與現實之間產生差距。
▲夸克
LinkedIn 最近開始使用 Skeleton Screens 進行加載，骨架屏幕轉移了用戶的注意力。它使人們專注于進度，而不是等待時間。
▲Linkin
骨架加載提升了加載界面的速度進度，這種速度反饋表現的更加友好并減少了不確定性，如果加載時間比預期的要長，也可以在骨架之前短暫地顯示一個加載器，這應該會為你爭取更多時間來完成加載。
? 顯示UI骨架布局
? 優先加載文字；
? 加載圖像（或主顏色）質量較低的版本；
? 再在后臺加載高質量圖像；
? 淡入高質量圖像，取代之前的低質量圖像。
? 感知更快的加載速度
? 清晰的可視化進度指示
預加載就是用戶瀏覽當前頁面時就預加載下一級所有列表的文字內容，當用戶點擊進入已加載的頁面就感受不到等待，在無網絡情況下也能進行正常的閱讀，在閱讀文字的時候再進行圖片或視頻的加載（相反地則叫懶加載，進入頁面時再加載數據）。但是這種方式會增加客戶端和服務器的負載，也會占用一定的網絡帶寬。
根據不同的網絡狀況選擇不同的數據加載方案，最常見就是用在音樂/視頻/下載更新等占用比較大流量的產品，當判斷用戶處于3G/4G或網絡卡斷的情況下，為了既讓用戶使用流暢也不浪費流量，會自動切換至低速低畫質；而處于Wi-Fi條件下，會優先選擇高清或高質量進行播放。
▲嗶哩嗶哩
也就是離線加載，通過現有Wifi資源將服務器內容緩存到本地，無網絡或是弱網環境下讀取緩存加載?？梢越鉀Q無網或弱網情況下數據獲取的問題，會占用本地的存儲空間，以及后續的緩存處理需要考慮。
加載時間過長可能會損害你的網站的整體用戶體驗。如果加載的速度很慢會導致用戶點擊多次，這時我們需給用戶一個明確的提示“網站正在發生的事情是什么，提供適當的視覺反饋”，加載失敗后最重要的是給出解決方案，讓用戶可再嘗試或尋求幫助。請記住，提供反饋是良好的交互設計和積極的用戶體驗。
▲嗶哩嗶哩漫畫、閑魚
▲Dribbble
在過去，設計良好有趣的加載器是我們所能做的最好的事情，而現在，漸進式加載成為值得考慮的替代方案，它加快了等待時間感知，還清晰地呈現了UI布局并建立用戶預期。但這并不意味著不繼續思考更好的加載方案，期待未來出現更好的交互體驗。
一個好的加載應當具備以下特征：
1 讓用戶知道應用程序正在運行，給出大致的等待時間，簡單的進度條或更數字視覺化的方式；
2 告訴用戶等待的原因，在處理什么動作表明軟件并沒有崩潰而是處理請求；
3 有趣的動畫內容來吸引注意力，讓等待變得可以忍受；
4 加入品牌，讓用戶在等待的過程中加深品牌印象，形成品牌感知；
5 盡量使用非中斷式加載，降低等待的心理感知時長。
原文地址：站酷
作者：_阿丹a_
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
iOS作為UI/UE設計的風向標，一直是行業的引領者，不管你愿不愿意承不承認，他的每一次更新變化總能帶動UI設計行業的一些大大小小的變革，并且產生更多的追隨者，比如當年的iOS7開始的扁平化設計風格，對后續設計風格的影響直到現在已經7年了。
在最近半年，iOS在UI設計風格上最大的變革莫過于DarkMode（深色模式），在DarkMode之前，我們熟悉的UI界面往往都是淺白色界面為主，而從iOS13開始正式使用了DarkMode，界面突然可以變深色了，蘋果官方說這樣設計可以讓眼睛更舒服的長時間閱讀，為革命保護視力，而且更加省電增長續航，具體結果我們不得而知，需要科學家們去驗證了，但是對于我們設計師來說帶來的挑戰就是要“黑白無?！绷?。
其實DarkMode從測試版算起已經差不多推出了有半年的時間了，一些知名的APP產品早已經有了自己的兼容方案，同時iOS原生界面也給了我們很多最佳實踐案例，按道理大家對于DarkMode的設計方式方法應該已經掌握了差不多了，但直到這幾天微信正式推出了自己的DarkMode兼容方案，才發現對DarkMode的探索還需要設計師們多多努力。謹以此文表達一下自己的觀點，不妥之處敬請海涵。
列表試圖（TableView）是iOS中最常見的界面組件，一般常見于設置與欄目列表頁面
iOS設置界面的淺色模式和深色模式看起來都非常協調。
下面我們看看微信發現頁面，這個頁面和iOS設置是很相似的。
如果單獨看微信發現頁面的淺色模式實際效果還是不錯的。
但是直接轉換到深色模式下就感覺突然差的很多了，甚至可以說是有點難看，這次微信真的做了一次黑天鵝？
到底是什么原因讓微信發現頁面在深色模式下視覺體驗如此之差呢？
我們不妨將兩個功能布局都相似的深色進行放在一起進行一下比較
在色彩這塊在這兩個頁面中微信和iOS基本保持一致，四層灰度設計能更好的保持頁面整體干凈整潔且層次分明，但是被A背景色上，微信的背景色選擇了黑色偏綠的顏色，應該是微信設計師還是想體現出產品的標志色原色。
文字的顏色也較iOS略微深一點，但是在整體上影響并不大。
看來在主要色彩上并沒有什么問題，那么為什么微信這個界面與iOS界面比起來視覺上要感覺差一些呢？
下面來看一下圖標
圖標上的差別主要在于線寬與外框，微信采用無外框統一線寬的線形圖標，iOS采用的是有外框剪影圖標。
我們我們把圖標進行互換會怎么樣呢？
觀察到了嗎？別看錯了！
是的，我把故意位置做了對調，左邊是iOS，右邊是微信。替換圖標后的微信明顯加分不少，整個界面都整齊多了，而iOS換了圖標后明顯變得不夠整齊了，潦草很多。
那么結論是微信的無框線性圖標在深色模式下兼容有問題？是的的確如此。但是等一下，還有一些細節你注意到嗎？換了圖標的微信界面和之前的iOS界面比起來明顯還是有點不夠整齊，為什么呢？
來我們回過頭來從細節再看一下iOS界面。
我們按照這個思路把剛才微信替換圖標界面再排序一下！
界面視覺體驗明顯整齊了很多是不是！
為什么細線圖標和無框圖標會在深色背景表現不夠好，而在淺色背景下就沒問題呢？
是不是所有的UI都會存在這樣的問題呢？
我們再來看一些例子：
看來結論是一樣的，線性圖標在深色背景下的表現都是差強人意，反觀帶框圖標適應性很強，淺色和深色模式下均能良好的適配，我來分析一下原因。
當年伽利略用望遠鏡往天上看，發現木星比金星大，換成肉眼看后金星則比木星大。他認為是眼睛的某種視覺特性造成了這種現象。
德國物理學家赫爾曼把這種錯覺稱為輻照錯覺，就是說在黑暗背景下，亮度越高的物體看起來面積越大。
再來看一張圖片
哪個圓圈看起來更大，顯然是黑色背景下的白色圓形，實際上這只是一種錯覺，所有圓圈是一樣大。
光亮刺激會使得神經元產生非線性放大作用，導致刺激比實物本身看起來更大，白色圓形更亮，所以看起來更大一些。
線性圖標是用線條勾畫圖案達到隱喻效果，一般線粗是2px~6px像素。
設計師在設計時候都是以最終視覺作為參考，而設計稿本身多是淺色背景，所以在淺色背景的映襯下圖標視覺會顯得稍大，視覺基本是平衡的，假如設計是4px而呈現出的效果其實是6px左右。
是不是覺得哪里有點不對了？按照這個邏輯黑色背景下白色線圖標不應該是視覺更大、更明顯嗎？
我們還需要考慮一個因素，那就是色彩，之前的幾個界面案例的線性圖標都是彩色的，特別是黑色背景下，不同色彩的圖標放在一起，會有明顯的忽大忽小的感覺，會讓界面感覺非常凌亂。
是不是感覺黃色最大，紅色的最?。康瞧鋵嵤且粯拥?，這還是相同形狀的，要是圖標形狀不同感受會更明顯
看一個實際中的例子：
由于都是單色線性圖標，在淺色和深色下表現還都不錯的，但是單色圖標略顯界面單調，并不太建議這么設計。
毫無疑問，未來的UI場景需要適配多背景色風格，圖標除了具備好看隱喻之外，更需要具備抗干擾性
帶框圖標是一個不錯的解決方法，大膽預測帶框圖標會將成為未來一段時間圖標設計主流！
1：深色模式中灰度色階在一個界面最多可分為四層。
2：為了適配深色模式，今后有框圖標將會成為圖標設計風格主流。
3：同樣為了適配深色模式，細線圖標將會被淘汰，剪影和粗線圖標會流行起來。
4：圖標除了個體設計上用心，在排列上也會極大影響到頁面的整合視覺，光譜排列法是個不錯的選擇。
原文地址：站酷
作者：殘酷de樂章
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
關于 Big Sur 的新圖標的討論很多，很多都在激烈爭論。人們對蘋果公司沒有將完全扁平設計引入 Mac 感到松了一口氣，但分歧并未停止。有些人認為這引領一種新的圖標表現方式，而有些人則認為這是丑到了天際。
但蘋果的設計就是這樣，不管你你喜不喜歡，過一段時間他總會流行起來。就像iPhone11剛面世時，背面的攝像頭組被無數人吐槽一樣，而現在這個設計已經成了高端機的標板。
大家還能想起來UI扁平化設計已經流行了多少年了嗎？
從2013年6月11日蘋果發布iOS7算起，現在已經將近8年了，這8年時間扁平化像颶風一般席卷了整個UI設計圈，一夜間幾乎所有的APP UI都被拍扁了。
其中以Instagram的換標作為扁平盛行時代的里程碑
但扁平化設計的確已經一統江湖太久了，人們似乎已經有點厭倦了。其實設計風格就是這樣，并沒有絕對的好與不好，只要審美不疲勞，就可以繼續流行下去，至于流行多久我們經常會用一個詞去形容---耐看度。
扁平化帶給我們的是畫面的輕盈和設計的高效率，但是缺點也是明顯的，場景表現過于單一的問題，設計感體現較為有限，于是很多設計師都在嘗試用新的設計風格替代或者進化現在的扁平化設計風格，今天我們就來探討一下新擬物背景下3D與平面的結合設計，能在UI中擦出什么樣的火花。
2014年我的作品-Cache
https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html
現在這樣的風格會被我們稱之為重度擬物風格，他不好看了？技術落后了嗎？當然不是！只是目前不流行了！
他的特點是強調光影對比與物理質感，色彩都會比較偏“暗”，而且伴隨設計的往往是難和慢！刻畫一個細節需要很久，在強調設計效率組件化的今天，這種費時又難學的設計方法必然不會成為主流。
當前的UI流行趨勢是強調高飽和的色彩搭配（在沒有光影細節之下也只有色彩可以玩了），這種風格明顯也不符合趨勢，被“淘汰”也就難免了。
從設計角度上解析，圖標主要是由四方面構成：構圖+光影+色彩+紋理
而擬物風格圖標在這四方面更加強調構圖、光影和紋理，而色彩則是更多去搭配紋理質感，所以你看到多數擬物風格圖標在質感上很棒，但是色彩卻沒有那么豐富。
說到新的擬物風格，這只是一個概念，也有稱之為輕擬物，輕偏平，這里并沒有通用的稱呼和預設的設計方法，一切的UI設計風格都是為產品本身服務，如果新的設計風格能讓產品整體體驗得到“提升”，哪怕這種提升只是成功獲取到了用戶的注意力，那這個設計就是有價值的。
所以當下如果你的產品中想要吸引目光就要有點與眾不同的東西，要么是獨門的功能，要么就是吸晴的設計。
顯然扁平的彩色圖標現在已經達不到這個效果了，而以前的擬物又顯得有點過時，在這種時代背景下，新的風格必然就會被碰撞出來。
于是乎我們就會看到以下的一些大廠“創新”，你不止能看到輕擬物設計，還能看到“實物”設計......
不得不說，各位設計師們還真是拼了...
“哪怕這種提升只是成功獲取到了用戶的注意力，那這個設計就是有價值的。”沒毛?。「魑患佑?！
當然蘋果BigSur帶給我們的圖標設計創新更加有趨勢意義，這種3D+平面的設計組合方法更加能給我們一些設計啟迪和思考，并且這種3D圖標與之前的擬物風格有著明顯的視覺區別
我用3D重構了一個計算器icon，以此為例來進行分解，如下：
與2D設計方法設計圖標一致，都是先勾畫圖形（建模），然后填色、加材質和燈光，但不同的是在3D環境下，這一切都比2D環境下簡單了，而且視覺效果更佳，整體畫面感更佳立體，質感更加飽滿，并且根據渲染器的參數調節和材質質感的不同，即使是在同一模型下，也能制造出很多種不同的視覺體驗。
圖標背板的選擇上，由于選擇了3D作為主體表現，3D背板過于搶視線，圖標為了突出主體而非背景，建議使用2D平面背板與3D前景圖標進行結合。
3D設計圖標的確有一些天然的優勢，特別是在質感和光感的表達準確度上，是絕對超過2D的。
但是2D圖標在一些風格的設計也是很難替代的，比如線性圖標和漸變風格圖標。
3D設計的確可以提升UI整體的視覺氛圍，并且現在在一些APP中已經可以看到小范圍3D案例了（比如支付寶），但是多是以插畫的形式出現，其實與產品UI還是有一定距離的。
未來3D設計一定會是UI中大展身手，但是目前的常見的3D設計軟件實在是太龐大了，我與許多3D行業的同行聊天的時候，大家普遍的認知是現在的3D軟件（包括C4D）的實際最佳場景依然是動畫設計，UI的中的3D屬于非常輕量級的，用現在主流的3D設計軟件做UI應用案例，有點用巡航導彈打蚊子的感覺，而且這個蚊子還是距離一米以內。這有點像當年的PS來做UI，雖然可以完成但是效率不高，學習曲線也高，于是Sketch和Figma這樣的產品順理成章的取代了PS在UI界的地位。
當然趨勢不可避免，效率也會提升，且方法總是有的，降低門檻，提升效率一直是我們的追求！
原文地址：站酷
作者：殘酷de樂章
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn