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