今天想要和大家分享的是一個 Ant Design 的設計資產「列表」。它是企業級產品頁面中重要的組成部分，幾乎所有的產品都會用到它。
隨著企業級產品復雜業務場景的增量，Ant Design 的列表覆蓋度也受到了很大的挑戰，很多設計師說現有的組件和交互模式無法滿足他們的業務場景，導致他們需要重新設計列表，帶來了額外的設計和開發成本，同時對于全域產品的體驗一致性也帶來了挑戰。因此，我們決定一探究竟，去看看列表的底層基因到底是什么樣子，我們應該如何提高通用性和覆蓋度。
表格、列表、卡片列表的區別
在研究列表之前，我們首先將表格、列表、卡片列表這三個資產，從用戶的交互行為、使用場景、資產結構三個維度進行了分析，并嘗試做了明確的定義和區分，避免后期在使用過程中的概念混淆。
（1）表格的定義
表格通常是以矩陣式布局呈現，強調信息的瀏覽性，趨向于展示多而復雜的數據。數據按照矩陣布局對齊，方便橫縱瀏覽以及研究數據之間的關系。
（2）列表的定義
列表通常以線性結構呈現，能交互式地展示眾多數據結構相同的條目，且擴展性強。通過列表，用戶更容易縱向掃讀來獲取宏觀信息，橫向瀏覽來了解單個條目的細節信息并進行相關操作。
（3）卡片式列表的定義
卡片列表通常以網格布局呈現，用于承載數據間相互獨立的信息，擴展性大且個性化強。通過卡片列表，用戶會更聚焦于單個卡片的概覽內容，且很少會進行卡片間的數據對比，而是對單個卡片的數據信息進行查閱，并決定是否進行操作。
列表的構成
在清楚的定義了什么是列表之后，我們開始去思考一個列表的底層結構到底會是什么樣？經過幾輪的討論和試錯，我們得到了如上圖所示三層結構，它們分別是容器層、容器功能層、內容層。
容器層：容器層像一個盒子，它的大小、形狀決定了這個容器承載內容的體量，因此我們將列表的容器層默認值定義為一個寬1184px，高為44px的矩形。用戶可以根據業務需求調整其高度和寬度。
容器功能層：容器功能層象一個盒子的手提帶，用戶只要提起這個帶子，整個盒子就會被拎起來。也就是說，這個容器功能層是整個列表的全局操作。
內容層：內容層像放入盒子里的各種物件，用戶可以根據自己的需求在這個盒子里填滿各種東西，并在盒子外面貼上一些標簽，來告知盒子里都有些什么，當用戶需要查看具體的東西時，就可以打開這個盒子。
通過三個層次的劃分，我們可以清晰的定義每個層次的內容及具體的職能是什么，這有利于我們后期面對復雜業務場景和海量信息內容時，可以更好的去歸納和組織信息的呈現，于此同時高度結構化的組織形式也是保持資產內在一致性的關鍵要素。
模式化設計方法 — 元素窮舉
在列表的構成中，我們清晰的定義了列表的底層結構以及其對應的職能，到目前為止，你可以把它想象成是一個空盒子。當然，僅有這樣一個空盒子是遠遠不夠的，接下來，我們要在這個有邊界的空盒子里合理的規劃物件的收納，以及思考對這個盒子，用戶會有哪些操作訴求。因此，我們有了許多新的疑問，例如：
企業級產品通常都會在這個列表中放些什么內容呢？
這些內容是否可以能被抽離出一些共同的特征和展示形式呢？
我們應該如何更好的組織這些內容，提升用戶的閱讀和操作體驗的同時更好的解決通用性和覆蓋率的問題呢？
為了解決這些疑惑，我們嘗試了很多種方法，最終總結了一個新方法：Ant Design 模式化設計 — 元素窮舉。（關于 Ant Design 模式化設計方法詳情，請查看此處。）
如上圖所示，在元素窮舉之前，首先我們嘗試思考了一個問題：當用戶看到一個列表時，它的瀏覽順序和閱讀習慣會時什么樣子的。通過分析發現，在信息瀏覽的場景中，通常人們會以從左到右，從上至下的順序進行信息的瀏覽。于此同時，人們在獲取信息時，更習慣于先了解信息概要，再查看細節，最后作出判斷或決策。那么，基于以上兩個維度的分析，我們嘗試將單個列表條目的內容層進行區塊的劃分，得到了如下圖所示的三個區域：主題區、關鍵信息區、操作區。
主題區：主要呈現的是一些信息概覽，包括標題、時間、備注等信息，用戶看到這里就可以快速的對當前列表產生信息的認知。
關鍵信息區：該區是對列表中詳情數據的高度提煉，主要呈現一些關鍵信息，幫助用戶對列表內容進行知悉，輔助其更好的進行下一步的決策與操作。
操作區：基于業務的需求，放置相關的操作按鈕，從而達到產品的運作和流轉。
在完成區塊的劃分和具體的職能之后，我們開始思考，每個區域應該要有什么樣的元素才能夠更好更直接的展示列表信息，在此期間，我們例遍了上百個列表頁面，并開展了一次腦爆會，對每個區域的內容進行了元素的窮舉。
如上圖所示，我們在上百個頁面中梳理并抽取了每個區域可能出現的元素，并整理出一些通用性強，覆蓋率高的元素進行組件化。保證后期設計師在結合不同場景使用時的拼裝和靈活替換。此外，三個區的元素都有各自明顯的特征性，例如在主題區中的元素更加簡練、概括和基礎。而在關鍵信息區，展示的元素相對更加豐富，如我們會通過 Mini Chart 來向用戶展示一些數據信息，通過進度條來向用戶展示數據處理進度，通過標簽來向用戶呈現數據的分類或重要程度等。在操作區，我們也設定了一些展示規則，例如純字段的展示、圖標的展示以及弱化操作的展示方式等等。
梳理完內容層的信息之后，我們也對容器功能層結合業務場景，進行了窮舉，賦予了四個常用功能，分別是：排序、勾選、展開和置頂。如上圖所示，我們將對條目容器全局性的操作放在了條目的最前面，這有利于對多個條目進行批量操作，于此同時也和尾部的業務操作做一個顯著的區分。
基于元素窮舉的方法，我們系統全面的梳理了列表在內容層和容器功能層的底層元素，通過這些元素的自由搭配組合，就可以生長出基于業務場景下的不同列表。他們有著相同的底層邏輯和規則，卻有著不同的外在視覺和功能。
列表的布局及交互規則
（1）內容層的布局規則
通過元素窮舉的方法，我們更清晰的梳理了不同區塊可能出現的視覺元素和信息內容，更合理的排布了整體的信息展示順序。到此為止，我們可以很好的解決內容層的覆蓋度問題。但是，我們發現，除了內容層的樣式以外，還有很多細節問題有待解決。例如：并不是所有的業務都需要將單個條目分為3個區域?；谶@個問題，我們制定了一系列的排布規則，詳細的說明內容層三個區域搭配的具體規則，如下圖所示。
動態演繹
（2）容器功能層的布局規則
為了保證這四個功能的擺放不影響主題區的信息展示，我們制定了一系列的間距規則，保證在四個功能都存在的場景下，有一個較優的展示方案。具體內容如下動態演示圖。
列表的視覺案例
根據以上的交互規則和相關的組件元素，設計師可以根據自己的業務需求進行拼裝優化。如下圖所示，動態演繹中展示了單行條目的一些規則變化。你可以添加圖標、添加Tag；在關鍵信息區你可以增加進度條等。
當你需要展示的信息較多時，可以對容器層的高度進行擴展，變成雙行甚至是多行。如下圖所示，動態演繹圖中展示了兩行的列表是如何展示數據的。
單行列表的展示樣式，如下圖所示。
總結
以上就是本次分享的全部內容，相信大家看完之后可以理解“表里不一”的概念了。所謂的“表”是指在UI層面的視覺元素表現，我們通過元素窮舉的方式，來抽離通用性強、覆蓋率高的元素，將這些元素設計成一個個的UI組件，設計師可以根據自己的業務場景自由拼裝組合，得到一個幻化萬千的的外表。
所謂的“里”指的是資產的內在結構和交互規則，我們可以將其定義為是一個設計公式，其包括了對列表的區塊劃分、間距規則、響應式規則等。大家可以通過這個公式來制定自己的資產規則，從而保證產品的內在體驗一致性，交互一致性，減少用戶的學習成本和試錯成本。目前整套規則和資產已經在螞蟻內部的企業級產品開始推行使用了半年，整理來看，設計師通過以上的規則以及相關組件的自由搭配組合，業務場景的覆蓋率能夠達到80%以上，大大提升了設計的效率，于此同時，結構化的交互邏輯和標準化的組件與開發形成了精準的同步，提升了研發效能，從而促進整個產品研發效率的提升。
最后，感謝你的花費寶貴的時間閱讀這篇文章，希望可以給你帶來一些啟發。我們非常期待設計師體驗和使用Ant Design 4.0 的設計資產，同時也能全面了解這些資產背后我們的思考和一些小經驗。當你發現我們的設計資產無法滿足你的業務場景時，也可以通過這些方法和步驟，創造屬于你們團隊自己的設計資產。
文章來源：站酷 作者：Ant_Design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
引人注目的UX設計背后的心理學
每天，您都會在線訪問多個網站。他們中的一些給人留下了積極的印象，而另一些則使您在數毫秒內按下了后退按鈕。您最終從一個網站購買了產品，而不是從競爭對手那里獲得了產品。是什么引導這種行為？您為什么對某些網站感到滿意卻卻避開其他網站？
這樣做的主要理由之一是在用戶體驗設計中實施心理學。您喜歡的網站聘用的UX專家知道如何在與網站交互的每個階段觸發心理反應。在線心理學的使用是成功的，因為我們在人類生存的幾個世紀中獲得的某些進化特征在我們每天與世界各地的互動中仍然發揮著重要作用。
本文介紹了一些常見的UX元素以及它們背后的心理思維。
有關服務或產品的建議
例如，當您在機票預訂網站上時，會在預訂完成之前或之后獲得有關酒店，餐廳或旅游選項的建議。在許多情況下，如果價格足夠誘人，人們就會繼續預訂酒店或在餐廳預訂。當您搜索抵押貸款時，同樣適用，并且您還會獲得有關債務管理或退休計劃的建議。
圖片：Skyscanner
這是一種稱為“預期設計”的UX創意。目的是根據您在網站上查看的內容來建議您最可能需要的其他內容。這個設計思想是基于當我們在互動中感到被理解時更快樂的心理原理。這在所有領先的電子商務門戶網站上也可以看到。
圖片：Flipkart
這種UX設計的一種變體是在許多網站上延遲顯示彈出框以進行加價銷售或潛在客戶。這也是可以預見的，因為它基于這樣一個事實，即許多用戶直到從站點上花費的時間中獲得了一定的滿意，才會對彈出框的內容不感興趣。
顯著性原則是另一個鼓勵用戶體驗設計決定的心理原則。它說人們將注意力集中在當時與他們最相關的事物上。因此，正在尋找飛往夏威夷的廉價航班的度假者將很高興看到提供經濟實惠的住宿，甚至為他們的旅行提供融資選擇。僅登陸頁面以讀取癥狀的用戶將僅關注頁面的內容，而不關注訂閱彈出窗口。
限制用戶選項
您選擇的網站比強迫您跳過五個菜單來查找相同內容的網站更容易找到。這是因為我們發現很難做出決定時，有太多的選擇。這是基于希克定律的心理原理：選擇的負擔。
圖片：Apple
最好的UX設計人員了解這一點，并確保用戶可以找到所需的信息，產品或服務而不會感到不知所措。
搶眼設計
圖片：例如葡萄酒
如果網站或應用程序的設計精美（根據用戶的描述），則立即導致對品牌的有利傾向。這是一種心理原理，稱為審美可用性效應。如果您的網站漂亮，那么普通用戶就會相信它比同一個利基網站的其他功能更實用，更值得信賴。關于吸引力的這種偏見也可以在離線狀態下看到，因為研究表明，更具吸引力的人被認為比其他人更有能力和更友好。
此外，引人注目的設計可能使人們忽略網站或應用程序上的其他缺點。頂尖的UX設計人員花費必要的時間來獲得任何項目的最佳美學效果也就不足為奇了。
醒目的顏色口音
圖片：Paypal
諸如Trustly，PayPal，FreshBooks之類的品牌，以及您日常遇到的許多其他品牌都使用顏色強調點，以使您的眼睛指向CTA按鈕，注冊表格等。網站上的主要顏色為藍色時，它們使用綠色，紅色或黃色來表示突出這些區域，它會起作用！這些網站的任何訪問者都可能會錯過頁面上的其他內容，但會看到這些部分以獨特的口音仔細突出顯示。
這是基于赫德維格·馮·雷斯托夫（Hedwig von Restorff）的心理對比原理，即人類更容易記住那些與其周圍環境脫穎而出的東西。有趣的是，沒有顏色被認為是最有影響力的。UX設計人員只需確定主導的顏色主題，并使用不會混入背景的另一種顏色作為重點選擇。
產品差異化價格計劃
這也稱為“金發姑娘”定價技術。企業使用這種技術來銷售“中檔”產品。當您四處尋找虛擬主機計劃時，您可能會看到更多。提供商通常列出三到五個訂閱計劃，并將中間計劃突出顯示為“受歡迎”或“熱門”。
圖片：Acowebs
許多人立即分析出最昂貴的計劃和最便宜的計劃，最終選擇了所謂的中端計劃。這是因為他們將其視為最高價值計劃和入門級計劃之間的完美中間地帶。有趣的是，這些中端計劃的價格沒有像其他任何人一樣受到嚴格審查，這使得它們成為提供這些品牌的品牌中最賺錢的。
這種定價技術之所以有效，是因為它基于取景的心理原理，該原理強調了人們在做出購買等決策時如何避免極端情況。它還顯示了選擇的呈現方式如何影響決策過程。
其他領域的更多用戶體驗設計師正在采用這一原理。現在，各種電子商務商店都提供多層定價結構或提供價格不同的相似產品。大型科技品牌也不例外。他們可能是這一原則的最大受益者之一。因此，下一次您發現自己忽略了中端選項規格，規格稍高但仍低于最貴機型的三星Galaxy設備時，您就知道了！
這是另一個例子。
圖片：SEObirth
限時優惠
電子商務網站已經完善了使用限時報價創造產品需求的技巧。一些品牌會聲明要約/產品“僅在接下來的X天內可用”，而其他品牌如亞馬遜將顯示詳細信息，例如“僅剩5個庫存”。無論哪種樣式，兩種策略都旨在引起您的相同反應：緊迫感，因為該產品很快將不再可用。
圖片：亞馬遜
這是基于稀缺性的心理學原理，該原理指出，與到處都有的物品相比，我們傾向于更加重視稀缺或不可用的物品。一個1975年的研究證實了這一原則。研究人員將相同類型的曲奇放在兩個罐子中，但是第一個罐子有10個曲奇，而第二個罐子只有兩個曲奇。研究參與者對第二個罐子的評價高于第一個罐子。
研究還發現，人們對以前豐富但現在稀缺的產品的評價要比總是稀缺的產品更有價值。經濟學專業的學生不會對此感到驚訝，因為可用性的下降總是會觸發需求的增長。
除電子商務網站外，其他具有在線形象的品牌也采用稀缺性原則。出售在線課程的企業家強調諸如“僅適用于前10名學生”，“一周內結束”之類的術語。其他人則為采取特定行動的人們提供獨家利益，例如提交電子郵件地址，支付服務費用等。 。
當品牌試圖銷售“限量版”產品時，該原則也可以在離線營銷中看到。
UX設計師之所以采用這種技術，是因為他們知道，即使產品或服務沒有迫切需求，人們在產品或服務稀缺的情況下也會注意。
推薦書的戰略定位
圖片：ElegantReports
有沒有想過為什么許多產品或服務網站的主頁上都有推薦？為什么在做出購買決定之前總是要尋找推薦？這是因為社會證明的心理學原理。
當我們對任何事情都持懷疑態度時，我們會尋求同行的指導。這就是為什么您會發現人們在選擇公司之前先在社交媒體上要求評論特定品牌的原因。在1969年社會科學實驗強調了這一先天行為。研究表明，如果已經有足夠的人參與，人們至少可以說服人們注意某些事情。
除了推薦之外，UX設計師還通過炫耀可信賴的從屬關系（例如SEO專家從事的業務或以作家為特色的博客）來結合社會證明原則，訂戶數量，帖子中的股份數量以及產品的等級或服務，甚至獲得的獎勵數量。
圖片：Acodez
電子商務商店通過顯示名為“客戶也已購買的商品”的部分來使它更進一步，以突出顯示可能會使用戶感興趣的流行產品。
突出贈品
圖片：皮特和佩德羅
如果您免費提供某些商品，在線用戶現在或將來更有可能從您的品牌購買商品。這是基于互惠的心理原理。這就是為什么許多UX設計師強調任何交易的原因。
如果您要購買新鞋，則更有可能選擇在其網站上提供“免費送貨”的品牌。同樣，您也可以在提供免費指南或免費咨詢的登錄頁面上提交聯系方式。
UX設計師結合對比和互惠的心理原理來創建高度轉換的頁面。
結論
達到既定目標的引人注目的UX設計并非偶然。最好的設計師知道，在線成功的關鍵是要吸引一般用戶群的基本本質，他們會運用心理原理來實現這一目標。人類的在線行為是可以預測的。結合心理學和用戶體驗設計，您的品牌可以產生更好的結果。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前言
在這艱難又魔幻的2020年的尾聲，有必要系統匯總下關于UI/UX的設計發展方向，為接下來的2021的開篇帶個好頭。本文在了解這些趨勢的同時，分析特點并舉例落地實例，來幫助大家啟發創意設計工作的思考切入點。
流行趨勢跟人們所處的環境密切相關，從最初的方塊馬賽克——>追求極度寫實——>扁平風——>到現在的質感擬物，扁平設計霸屏的這幾年，設計風又向更立體、豐富、更有層次感的方向發展，所以說趨勢就是一個輪回。設計風格沒有絕對的好壞，在審美達到一定疲勞時，就會開始出現新的設計風格。每一個新風格都值得設計師去拆解、思考，本質都是為了提升更好的交互體驗。
而在進入下一個十年的過程中，我們對數字產品和體驗的依賴將日益增長，預測真正勝出的將會是3D動畫和用戶界面/用戶體驗設計的結合設計，5G技術的發展，它將重塑了我們以前無法想象的交互方式，這將是一段充滿創意、鼓舞人心的發展階段。在這里讓我們來看看未來那些不可忽視的設計趨勢吧。
（注:圖片來自網絡，均標明出處及作者，若有侵權請告知刪除）
1、3D與UI結合
隨著且易用的3d軟件工具的出現，3D 元素已經開始變得越來越受歡迎，而在這之前，UI界面一直被平面設計所主導。與 2D 不同，它提供了更為逼真的立體效果，從插畫、動效、電商到平面視覺，在所有的設計類型中都能找到它，3D現實主義已是各個領域的大勢。
圈中也出現了很多免費或付費的3D預設元素及場景組件，幫助3D小白更快地搭建出具有沖擊力的視覺組合。
特點：
? 直觀感受；
? 立體真實；
? 形態豐富；
▲Izmahsa
▲Mike
▲Tran Mau Tri Tam ?
▲Vikiiing
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
實例應用：
各大廠都開始紛紛嘗試在產品中加入3D元素，將自家IP立體化，植入到各個品牌靜態頁面，加深品牌印象滲入。3D技術雖然已經出現有一段時間了，但是為了保證速度和性能表現，較少應用到產品中，隨著軟件技術的提升，立體渲染產品將開始慢慢運用到更多的界面交互、H5活動中。
▲閑魚、QQ、花椒直播的3D啟動頁
▲得物（毒）的3D空間動效
網易云音樂每年的音樂總結報告都追隨著的設計潮流，今年還可以自由選擇人物形象，增強了用戶的主觀代入感，以下是每年的設計風格變化：
▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場景
▲2020-總結陳詞H5
▲總結報告Banner的動效
其中IP立體化最多的當屬K12教育領域，除了制作IP周邊外，3D效果能適應豐富的運營場景，高度還原現實世界，給小朋友帶來最真實的學習互動體驗。
▲洪恩識字（3D學習場景）、騰訊開心鼠英語ABCmouse
▲IP在播放兒歌時的互動
值得一提的是今年蘋果發布的macOS Big Sur除了玻璃擬態的變化，圖標還加入了3D維度的擬物視覺層次。
蘋果的 mac OS 的人機交互指南中也明確指出：“圖標不僅是裝飾性的，而且在與用戶交流中起著至關重要的作用，它應該傳達應用程序的主要目的并暗示用戶體驗?！边@次扁平化和擬物化的結合，將又要引領一波設計趨勢。
2、軟漸變（Soft gradients）
過于強烈的漸變不再是趨勢，大多數設計師都開始喜歡使用非常簡單和微妙的漸變，如果產品的目標用戶人群需要輕松溫和的視覺環境，那么此風格再適合不過。
軟漸變包括背景、陰影、反光，常與線條平面圖形結合，應用于界面、網站、圖標、icon等設計中。
特點：
? 低調溫和
? 微妙漸變
? 清新愉悅
2.1、柔和背景
在設計網站中我們已經看到了許多非常精致，明亮柔和配色方案，混合兩種以上的顏色來創造多彩的模糊背景。它使設計看起來非?，F代、不打擾、清新而令人愉悅，其中畫面內容是主要視覺焦點。
▲Vladimir Gruev
▲Sajon
▲Anton Mikhaltsov
▲Ghani Pradita
實例應用：
▲咔咔、美柚
2.2、柔和陰影
柔和的彩色陰影使UI有了更微妙的深度變化，在圖標設計中經常需要漸變或陰影來塑造物體，柔陰影使設計元素更豐富立體，并且它們有助于區分內容之間的層次結構。
▲Ghani Pradita
▲Sèrgi Mi
▲Taro Huang
實例應用：
▲有道數學（已下架）
▲Uki
3、玻璃擬態（Glassmorphism）
去年新擬態掀起了一陣狂熱，但這種模擬受到擠壓的塑料效果（凹/凸層次感），在用戶的閱讀性上可能會出現問題，新擬態更適合用在局部的少量元素點綴，無法完整地使用在整套應用程序中。
▲Alexander Plyut
伴隨著今年蘋果發布的 MacOS Big Sur 操作系統的發布，新的擬物風格正式回歸大眾視野，整體風格應用了新擬態（Neumorphism）的設計思路，利用大量的毛玻璃質感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來的生硬不立體感。而Big Sur的圖標也加入了 3D 質感設計，設計語言更為時尚簡潔。蘋果設計師 Alan Dye 在發布會上也提到了設計風格轉變的原因，主要是希望「降低視覺的復雜度，讓用戶能夠將注意力集中在內容上」。
而的玻璃擬態則更加注重垂直空間 z 軸的使用，背景多鮮艷色彩，在上空使用隔一層高斯模糊的毛玻璃質感，模糊的邊界有細微的淺色邊框，整體效果就是讓元素之間有虛實結合的特殊空間。毛玻璃運用在界面中對關鍵信息起到強調作用，用戶可以看到物體間的層次關系，哪一層在哪一層之上，就像物理空間中真實的玻璃一樣。
特點：
? 透氣磨砂
? 層級空間
? 簡潔擬物
▲引領新擬態風格的Alexander的作品也朝著玻璃擬態變化
▲Kostia Varhatiuk
▲Ghani Pradita
▲Ibrahim emran
▲Queble
實例運用：
▲毛玻璃視覺可追溯到2007年發售的Windows Vista，而當時的 OS X Yosemite 也大量使用了這種設計語言
▲的MacOS Big Sur操作系統
▲圖標的變化
4、暗黑模式
暗黑模式是白色界面的相反版本，適用于午夜時分。之前用了很長時間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見到太陽光般刺眼，果然暗黑模式用久了還是比較舒服的。
暗黑模式和之前經常提到的夜間模式是有區別的，簡單來說暗黑模式可以在任何場景下使用，并沒有降低對比亮度；夜間模式則專為夜間場景設計，重在降低對比度，以降低在暗光環境下屏幕對人眼的刺激。
特點：
? 突出內容
? 減輕干擾
? 沉浸體驗
▲Tom Koszyk
▲Victa Wille
▲Golo
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
▲Tran Mau Tri Tam ?
實例應用：
▲有道詞典
▲愛范兒（ifanr）
最常使用暗黑模式的車載系統：
▲小度車載
暗黑模式的靈感最早引起大家注意的應該是抖音，在這之前大部分的應用都是白色為主，抖音整體黑色界面帶來的沉浸以及輕打擾體驗還是很棒的，在這之后也相繼出現了以黑色為主的APP設計：
▲MOO音樂(可手動切換顏色模式)
▲Space FM
5、多彩高對比度界面
受Material Design調色板的影響，2020年用戶界面趨勢的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡約的界面中明亮大膽且對比鮮明的色彩一直都處于增長趨勢。熒光色一直是90后喜歡的風格，我個人就非常喜歡熒光色，現在要是談到該風格的受眾主力軍可是90后啊。
顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一，對比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力，這種風格已經成為清新、酷炫、數字時代的代名詞，而在2021一趨勢還將會繼續影響UI、平面、廣告、插畫等領域。
特點：
? 活潑大膽
? 對比鮮明
? 潮流科技
▲Amy Martino
▲Halo Mobile
▲Anastasia
▲Paolo Spazzini
在網站設計中的應用：
▲https://www.theartcenter.nyc/
▲https://www.squadeasy.com/en/
實例應用：
▲GoFun出行
▲開言英語
6、抽象幾何元素
從上世紀初開始，抽象構成中的簡單幾何形狀就已經用于視覺藝術中，多用于主背景主題或色彩細節，使用鋼筆工具編輯最簡單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設計看起來既規則又有趣。
幾何圖形可以運用到UI設計中 ，將它們混合在一起以創建馬賽克的效果，形成具有品牌意向符號的記憶點。
特點：
? 規則組合
? 品牌印象
? 重復記憶
▲Johnny Nova
▲Vladimir Gruev
實例應用：
最近看到的一組原色視覺剛好融合了高對比度+幾何這兩種風格，那就是SHINee的正規六輯合輯《‘The Story of Light’》，采用紅黃藍三色加上圓形、正方形、三角形的大塊面積來打造畫面空間及變化，帶來極具視覺沖擊的音樂色彩與魅力。
▲專輯的主視覺
當然，幾何形狀不止用于色彩圖案細節，在UI界面布局中經常使用大塊面圖形，這種設計方法受到越來越多的關注。
7、極簡風
極簡設計的前身是2010年代中期精巧又花哨的設計，這種設計已經存在很長一段時間了，但在2020年，人們每天需要消化的信息量越來越多，所以現在用戶想要盡可能避免“視覺垃圾”，這也是為什么我們會選擇更簡潔專一的界面。
特點
? 專注信息
? 清晰易用
? 簡單操作
▲RonDesignLab
▲Quan
▲BAOLIN
▲Gregory Loshakov
談到極簡主義，就不可避免會涉及到無鍵趨勢，因為按鍵越少就意味著設計越簡潔，而這種簡化過的設計將讓手勢操作和語音交互更為流行。
▲Taras Migulko
▲Gleb Kuznetsov?
實例應用：
▲夸克瀏覽器的夸克寶寶
8、將視頻應用到UI中
在 2020 年，信息的觸達的速度將會變得更快，而視頻是很好的載體，各個年齡段的用戶都喜歡觀看引人入勝的動畫，無論是選擇通過短視頻還是電影的方式來推廣產品，都很好地灌輸品牌理念，建立與受眾群體的關系，加強用戶忠誠信任感。
特點：
? 營造氛圍
? 類型多樣
? 品牌調性
▲Fireart Studio
▲Ehsan Rahimi
實例應用：
▲moo音樂登錄頁
▲蝦米音樂歡迎頁
9、插畫與3D的界線越來越模糊
藝術插圖從2017年開始到現在仍然很流行，幾乎適用于任何類型的設計行業，是設計領域中最熱的趨勢之一。插畫的視覺能很好的幫助用戶理解產品背后的故事，為了把故事講好，我們可以創造出一個品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產品問題。這是在產品設計中講好故事的基礎，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。
在2018年的蜘蛛俠平行宇宙中我們就已經看到了3D與插畫的結合，藝術家保留了人物在美式漫畫中的的線條筆觸，把“手繪”的細節和質感都放大到了熒幕上，在劇中還采用對比強烈的大色塊擴大了視覺張力，分分鐘把漫畫書甩到面前，讓人忍不住驚呼，索尼的藝術家們是怎么把片子做得這么酷！
▲3D人物的畫筆觸感
▲畫面光源處由波普圓點組成的背景
▲紙本漫畫書中的“聲音詞”
▲漫畫經典線條
▲Entei Ryu在3D建模使用插畫質感
▲Minh Pham ?在ui界面中的嘗試
實例應用：
騰訊旗下音樂平臺JOOX最近的概念宣傳片，從MG、三維、定格、插畫多個風格之間來回切換，給我們帶來了一個多元的音樂世界。各大視頻網站還搜不到，不能直接鏈接視頻地址，喜歡的朋友可以關注微信視頻號“UoU_Studio”觀看完整視頻。
在3D開始迅速發展的階段，二維與三維之間的界限變得越來越模糊，插畫作品也可以具備強互動性，而3D插畫與動效的結合提供了一種奇妙的新方法，希望能夠看到未來插畫更多的可能性。
10、更多的微交互動效
最后一點，還是要強調動效在UI中的的作用，微交互最早出現在 2018 年，讓用戶更好地理解系統如何工作，并在引導其獲得更好的體驗方面扮演著非常重要的角色。它們在 UI 設計中決定了一個 App 或網站是普通還是優秀，從點擊反饋、加載等待、導航交互等等，為用戶界面設計增加了動態性，交互性和直觀性。
動效起到的作用：
? 引起人們對應該做什么或接下來將要發生的事情的關注；
? 創造流暢和視覺愉悅的過渡；
? 帶給使用者美觀的享受；
? 指導我們進行復雜的操作；
? 確認用戶使用旅程中的操作。
▲Jakub Antalik
▲Forever D.
▲Kingyo
▲Eugene Paryhin
▲Leo Natsume
▲Taras Migulko
實例應用：
▲GoFun選擇車輛后的頁面轉場動效
結尾：
2020的趨勢在滿足用戶的美學要求上，側重內容和感情表達，還會根據不同設備載體、新的技術而變化，為用戶提供的豐富體驗。
借用Adobe設計副總裁 Jamie Myrold 的一句話：如今設計師要思考的，絕不僅僅是設計一款App、網站或設計工具。我們要思考的是人類的需求、用戶的需求，打造真正人性化、多元化與包容性的設計。
設計趨勢還在快速增長變化，有些趨勢總能長期霸屏，未來還將迎來更多新技術，每個設計人員都可以找到自己喜歡的方向，不管哪種趨勢，最重要的是如何學習并合理地運用到產品中，以產生最大的設計商業價值。
文章來源：UI中國 作者：_阿丹a_
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Loading動畫，在現在的設計中已經是一個必須要考慮的系統元素，它能減緩用戶等待焦慮的心態，也能用來作為品牌透傳，增加曝光。
那關于loading動畫相關知識，我覺得對于設計師來說是有必要去了解的，所以我找到了這篇優秀文章，讓大家能夠深入了解loading動畫，透過現象看本質，學以致用。
圖片來源：Domaso
在用戶心目中，優秀的應用、工具、網站都應該是制作精良且能快速響應他們需求的產品。
舉一個真實的例子：最近我們新發布了一個用戶評價的應用，第一個版本并不完美，loading延遲在2-3秒。
你猜怎么著？
很多人認為這3秒是一個故障。在實際開發中，你可能要面對龜速的網絡，沒有優化的代碼，操作時間長或數據處理太多等問題。因此，App的運行速度可能沒有用戶預期中的那么快。雖然早期用戶可能會給你的產品第二次機會，但絕大多數人會立即退出它。
除非你的產品界面對用戶的行為提供了明確的即時反饋。剛才發生了什么？是操作錯誤還是在等待服務器的請求？用戶需要等待多長時間才能正常使用這個工具或網站？用戶為什么要等待呢?
讓我們一起深入了解Loading動畫：
對于這種類型的反饋，設計師會使用進度條、loading示意圖、預loading、或旋轉器。它們向用戶解釋什么時間發生了什么或正在loading的過程，以減少用戶的心理焦慮。
你覺得設計師是從什么時候開始考慮加上這種反饋的？
我很驚訝的看到關于Nielsen Norman的一篇文章，提到響應時間和loading動畫是在1993年（參考1985年的資料）：
如果計算機無法提供快速響應，則應該以百分比的形式向用戶提供持續反饋?！綧yers 1985 論文，“計算機-人機界面百分比進度指標的重要性”】
顯示進度的三個主要優點：向用戶保證系統沒有崩潰且正在處理他們的問題；告訴用戶還需要等待多久時間，讓用戶能騰出時間來做其他的事而不只是干等；甚至可以向用戶提供一些可以閱讀和查看的內容，減少等待的焦慮?！?Jakob Nielsen, on January 1, 1993
自從Web 1.0以來，幾乎每個網站都有loading狀態，用戶可以注意到當頁面內容正在loading時，這些Loading動畫活躍的身影。
在2007年的時候，網站的Loading形式大概是下面這張圖上的樣子：
2007年時的Loading
在那個年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）這樣的工具來做這些 loading動畫。
到了2010年，隨著CSS3的迅猛發展，出現了很多教程教大家如何做CSS3動畫，也能找到大量的loading 動畫預設包。設計師也可以在Ps cs5中做這種loading動畫，這個在10年前是非常流行的。
在那時，Loading動畫更像是web的專屬問題，因為頁面loading確實是一個問題。在2010年的時候，很多Flash網頁都做了一些很有創意的loading動畫：
30個創意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）
漸漸地，設計師們開始不滿足于簡單的進度條和旋轉Loading，到2014年-2016年的時候，變得更加關注這塊的設計。所以，你能發現更多關于loading教程，免費的Loading設計資源，插件和開源項目。
2016年出現的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)
設計趨勢和方法已經發生了變化，但向用戶提供有效反饋的原則依然需要遵循。
優秀loading動畫所具備的特征
在一個完美的世界里，loading動畫應該：
如果你的工具或網站工作的足夠快，那就是非常完美的。或者至少要使得它們的速度符合用戶的預期，顯示好看的loading動畫只是一個緩兵之計，等待太久了一樣會惹惱用戶。所以，首先應該是解決內容的loading問題。
它可以是一條簡單的文本信息，告知大致的等待時間，也可以是可視化的圖形來表示?？偣采蟼髁硕嗌傥募扛滦枰嗌俜昼?？已經進行到了什么階段？這些體驗上的設計細節都可以給用戶預期并減少焦慮。
宇航員數據loadingby Cream M.
一些應用的loading過程，通常讓用戶不大容易理解。一個好的Loading動畫，應該要告知用戶等待的原因以及等待的背后軟件正在做什么：
文件獲取動畫 by Vinoth
讓我們說回我的案例，那個反饋工具軟件。當我們的等待時間超過1秒時，我們決定給這段等待時間增加一段解釋。動畫說明應用目前正在處理截圖資源，這清晰的表明，我們的工具沒有崩潰，它只是正在處理請求：
好的loading動畫
可以放一個有趣的動畫來吸引人，讓用戶的眼睛始終保持忙碌。
動畫來源：Alex Kunchevsky
這與上面提到的一點非常相關，如果你在等待的過程中發現了一些能夠吸引用戶注意力的東西，那么感覺上時間就會過得更快。它可以是一個引人注目的色彩搭配，有趣的想法，或者是一個什么特別的東西。
蛋糕loading by Pierre Kleinhouse
如果用戶在用你的應用或者網站時會有一段等待時間，為什么不機智的利用好這段時間呢？我不建議僅僅只是為了做loading而做一個loading動畫或者去在動畫里使用一些心理學技巧。我覺得最好是將品牌的聲音融入整個Loading動畫中，讓它成為一個非常重要的設計細節：
BCG的車票應用動畫 by Antonin
細節可以做出精彩
雖然有些人可能會認為Loading只是一個很小的UI細節，但它其實也有許多類型和變化。一般來說，我把loading動畫分為幾類，進度條，無限循環的loading圖和骨架圖。
當可以明確loading時間時使用，進度條可以通過數字或視覺化的形式來表現。
有數字進度的，有時也稱為百分比指示符。他們可以簡單直接，也可以很有創意，需要對你的用戶業務表達更有效：
一個app loading頁 by Nguyen Tran
你也可以找到有趣的進度條和循環動畫結合的loading圖。
Loading動畫by Dragonlady
進度條背后的主要思想是顯示一個操作將花費多長時間以及目前所處的狀態。根據UI需求的不同，進度條也可以是線性的，沒有百分比的形式。
想想Gmail，它沒有顯示進度百分比，但是用戶同樣可以感覺到加載的進度。下面是兩個簡單而又創意的例子：
Gamil loading和一個創意loading動畫 by Allen Zhang
當loading的時間是未知的時候來使用，它可以是默認的旋轉圖，也可以是一些創意動畫，顯示應用正在做一些事情。
計算loading圖標 by Hoang Nguyen
創意性loading動畫一樣可以與業務緊密相關，并幫助支持品牌發聲。請思考下那些應用會使用這種loading動畫？
LittlePin Spinner by Daniel Sofinet
無限循環動畫要求用戶在上傳或執行某些操作時等待，但不要求具體需要多久時間，它們可能會非常簡單或非常有創意。
Loading cat by domaso. So cute!
Infinity by Eszter Balogh. 看起來非常有趣，但是你并不想他們永遠不停下來。
如你所見，如今的loading動畫不僅僅只是一個系統狀態的UI元素。
骨架動畫展示了loading頁面的變化過程，你可以把它理解為開始是一些頁面占位圖，逐步加載上一些可見的圖片，文本和其他內容。
這個詞最早出現在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設計師的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應用。
舉個栗子，如果你使用的是網頁設計工具Figma，你會在頁面頂部看到一個進度條，同時還在逐步loadingUI：首先你會看到占位符，然后才是可用數據：
Figma UI
除了這篇文章中所展示的一些優秀案例和Dribbble上的設計概念，在目前大多數應用中，你可能能看到還是一個默認的Loading。
有一段時間，簡單的Loading被大眾所推崇，因為他們對于性能的影響最?。ㄓ绕涫菍τ趙eb）。使用默認的或開源的loading要容易的多，不需要設計師和開發花心思來設計和實現它。
如果你正在開發MVP或者項目的第一個版本，那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段，即使把loading動畫做的再怎么有創意，也并不會對你的產品有多么大的幫助，如果它不能解決真正的需求。
一些簡單的loading動畫案例
有趣的是，在2016-2019年，我們可以看到非常多精心的loading動畫。注重細節，日益成熟的設計公司，更好的科技環境，更方便的設計工具，這些都使得loading動畫變得更加富有創造性。如果你瀏覽Dribbble，能找到非常多超贊的Loading動畫，所以這也成了展現自己設計能力的一種方式。
即使在我們只有5人的初創公司里，我們也會考慮更好的用戶體驗，讓我們用戶等待的體驗更愉快。否則，我們做的反饋工具可能會失去用戶，沒有人希望失去用戶。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們已經或多或少看過一些優秀作品，也知道了一些設計方法和技巧，了解到了一些相關的理論知識，自己也做過一些項目或者是練習，總體來說都掌握了一定的設計能力；但是設計師想要擁有更多的資源（指薪資、工作機會等等）或者是想職業進階，除了一定的設計能力之外是遠遠不夠的。
設計師還需要掌握更多的能力，才能讓自己成長提升，并且擁有他人無法取代的價值。我通過自己的經歷和整理收集，發現目前如今不同階段的設計師對待同一個問題不同的角度以及特征，如下圖所示：
不難發現，當大家還是初級設計師的時候，剛剛接觸設計行業，我們更多的是去觀察、學習、臨摹一些“好看”的作品，熟練地使用設計軟件和提升設計技法，最后的是自己做出來的產品是否漂亮美觀，最重要的是客戶/老板是否會買單，而自己無法清晰地定義自己設計的產品價值，也不能很好表達出自己的想法和觀點。所以產品走向會根據老板/客戶的水準來定義，輪到自己表達只是支支吾吾，最后只是做為執行無休止地改改改。一切由老板/客戶說的算，無法清晰地了解自己產品的定位，缺乏表達觀點的能力，缺乏一定的審美，作為執行角色無休止加班成為了初級設計師最大的痛點。
而經過一段時間的學習和工作后，逐漸轉型成為中級設計師后，有了一定的設計技法和軟件使用熟練度，有了一定的審美和視覺表現能力，平臺規模合作團隊也逐漸變大，基本能滿足老板/客戶/業務方提出的需求。開始學習一些設計相關理論，開始拆解自己或別人產品的交互架構，更多地開始關注用戶體驗起來，也會融入品牌元素到自己的產品當中，為自己的產品做情感化設計和制定設計規范，會組織一些專業語言和業務溝通以及陳述自己的產品。但是如何從眾多的設計方案中找到最優的方案來解決問題，如何更多地體現產品的價值，產品利益鏈如何形成商業閉環，如何在團隊/設計圈體現自己個人的價值，如何提升自己的個人影響力，成為了中級設計師這階段的痛點。
通過三年五年的沉淀，成為高級設計師后，形成了自己獨有的一套方法論和設計思維，能熟練地拆解每款產品和定義產品，視覺表現層已經完全能駕馭，能清晰地闡述自己的設計思路和結論，產品用戶體驗層也有了一定的經驗和方法，在團隊中或者設計圈有自己一定的個人影響力，更多地會在工作中思考產品帶來的社會價值和商業價值，會用不同的思維去思考產品的各個維度，找到最優的方法解決問題，會把固有的利益鏈轉換成商業閉環，提升用戶轉化率等等。而這階段的設計師的主要痛點就是面臨著團隊管理和溝通，朝著資深設計師和設計專家轉型，以及如何為平臺帶來的利益價值考核等等問題。
資深設計師或者設計專家這里不談，因為這階段所思考的問題大都和設計無關了。通過上述不難發現，每個階段的設計師都有各自的特征和痛點，雖然其中都包含著設計相關的能力，但是隨著階段的進階設計相關的能力占比逐漸變少，更多的是其他的能力增長，所以設計師除了設計以外其他能力的重要程度顯而易見，那么我們來看看除了設計以外，設計師應該掌握其他什么能力。
思考能力作為首要的能力，不僅僅是設計師，其他職業一樣需要這個能力，這里所涵蓋的面太廣泛了也說不了，這里主要針對三點來講：核心競爭力、批判思維和分析能力。思考分為兩個層面：自我層面的和業務層面的思考；自我層面的思考就是要通過深度剖析自我，發掘自己處于哪個階段，有什么長處和不足，自己想要什么，需要往怎樣的方向發展；而業務層面的則是要需要思考業務產品的結構框架、用戶體驗、商業價值等等等等，前者更加關注自身的成長，后者更加關注業務的成長。
· 核心競爭力
核心競爭力就是有與別人不一樣的競爭力，想要做到別人無法替代你的地步，就要有自己個人核心的競爭力。如果你會做一張 Banner，我也會做一張 Banner，你會搞一個頁面，我也會搞一個頁面，那么你這個人就成為了可有可無的螺絲釘，唯一的優勢就是年輕能拼能熬，等你熬銹了老了，隨時可以換一顆新的螺絲釘來取代你的位置。所以不管什么階段，我們要深度剖析自己，認清自己的優勢劣勢，并采取相應的措施。
剖析自己的核心競爭力給大家一個大致思路，從異樣性和共通性入手。自己周圍或多或少有團隊，條件不足的話現在網絡各大平臺都很發達，也能融入一些設計圈子中，和不同的人對比尋找自己的核心競爭力。異樣性是當前的優勢，找出其中的優點，不斷地放大深造，變成你的核心競爭力，而和別人不一樣的缺點找出來摒棄改正；共通性就是和大家一樣的地方，可以看作是偽劣勢，因為諸多共通性中總有你最喜歡最擅長的一個，將它單獨拿出來不斷擴大，逐漸就拉開了差異性，慢慢就轉化成你的核心競爭力了，而大家都有的缺點，你把它糾正了，就成為你的核心競爭力了。
來舉一個栗子：小王是一名工作了3年的設計師，研究生畢業，由于公司的原因平時工作最多接觸的就是一些運營圖 banner，也有過很多品牌 VI 的經驗，逐漸自己在視覺表現上有自己一定的見解和想法，也更加感興趣做視覺表現的東西。
那么他的共通性就有：1.工作3年之久；2.研究生畢業；3.視覺表現能力強也更感興趣；4.做過品牌 VI 的經驗；5.有自己的見解和想法。
由此推斷出小王的共通性是：1.工作經驗豐富；2.視覺表現力強；3.有想法和見解；
異樣性是：1.學歷優勢；2.品牌 VI 相關經驗
那么小王可以保持自己學歷優勢下，可以繼續深造品牌 VI 相關，逐漸轉型成為高學歷的品牌 VI 設計師，那么學歷和很多品牌 VI 的經驗就是小王的核心競爭力；也可以通過熱愛去學習 C4D 動效等軟件繼續增強自己視覺表現力，配合自己豐富的工作經驗逐漸轉型成高學歷的創意藝術設計師，然后通過將自己的想法見解通過分享會、文章等模式產出，將這一點升級成個人影響力，那么綜合下來更加優秀的視覺表現力、豐富的工作經驗和個人影響力也會逐漸變成小王的核心競爭力。
只有通過不同維度深度地剖析自己，找到自己的共通和異樣點，清晰自己的價值定位，然后制定出適合自己成長目標和方案，不斷放大增加自己的核心競爭力，成為不可取代的那個人。
· 批判思維
批判思維是一名設計師必須具備的思維能力，我們不僅僅要學會批判別人的作品，還要學會自我批判。這里不是指無腦的批判（之前遇到過一個實習生剛進到公司里，就把之前所有人做的東西全部批判了一遍，重點是只說產品好看與否，完全不顧及平臺一致性商業價值用戶體驗等等，最后只批判卻沒有任何實質性的建議，頗有一種指點江山的感覺，然后后面再也沒見到過他了），這里是指在自己通過批判別人或自我的方案，不斷地優化糾正，最后產出最優質的方案，這是批判思維的出發點。
不同的人有不同的經歷，看待問題的維度是多種多樣的，所以一個方案產出后，通過不同的人思考后的結果是最好的解決方案。這也印證了波克定理：只有在爭辯中，才可能誕生最好的主意和最好的決定。所以當設計師接到產品交互給到的原型圖后，不要上手就做圖，要通過自己經驗和想法去看待原型圖，然后提出更加優質的方案進行討論，如果你的方案更加優質，那么不僅是產品的質量得到了優化，你個人的經驗也得到了沉淀，下次遇到相同的場景就可以拿出來復用，直到遇到更好的方案。
唯一注意的事項就是注意溝通的方法，這里后文會提到，比你資歷高的人提出的觀點更加具有建設性，在毫無頭緒沒有創新的情況下就聽比你更有經驗的人的；遇到比你資歷低的人提出的觀點也不要嗤之以鼻，抓取其中有用的點，沒準是一個新的思維方向；總之，有數據說數據，沒數據舉案例，沒案例講觀點，如果連觀點都沒有的話，照著大佬說的話做就是了。
· 分析能力
分析能力也是設計師必須掌握的能力之一，無論你是創意藝術設計師，還是用戶體驗設計師，譬如一張 Banner 氛圍傳遞或者文案排版，譬如插畫的配色或者場景搭建，譬如產品的布局結構或者用戶體驗，這些都需要有一定的分析能力。通過拆解改版/競品/參照產品等，明確產品的最終目的、商業價值等等，有了這些準備后才能對自己的產品進行設計或者改版。而分析產品可以以用戶體驗五要素的角度來分析，分別是：戰略層、范圍層、結構層、框架層和表現層，具體相關的文章站酷、PM 社區、36氪等等都搜的到，這里不再細說；之前在分析產品的時候發現有些產品強行套用這五個要素進去不適用，因為有些產品的頁面它不存在戰略層或者范圍層的東西，所以我總結歸納了三個角度來分析產品。
案例就用淘搶購 v4.1 頁面（已上線）來講，三個角度主要是：表現層、用戶體驗層和價值層。表現層主要就是產品頁面的配色、布局結構之類的；用戶體驗層就是產品的心智透出、交互流程之類的；價值層就是產品深度的價值體現了，比如商業價值、社會價值和用戶留存率之類的；大致可以套用這個公式去思考：為什么這里會用這種表現形式，它想要表達怎樣的效果，它要達到怎樣的最終目的，如果是自己去設計會怎樣做。舉例：因為淘寶規范為卡片式設計，在視覺表現上要統一，所以淘搶購 v4.1 的業務目的是統一視覺樣式，并且它需要給用戶產生一種“商品很便宜快去搶購再不搶購就沒了”的心智認知，它的最終目的是引導用戶去商品 Detail 頁面購買商品和提高商品的點擊率，這樣通過協調關系形成平臺、商家和用戶之間的利益鏈商業閉環。
想要提升自己的分析能力除了項目和時間的沉淀外，更多的時候需要自己平時的積累，站酷等平臺有很多優秀的作品，作者會把自己設計的分析和思路寫出來，我們可以看看別人的想法是否值得借鑒，然后再去分析一下，最后思考如果是自己的話會怎么去做；其次做設計的時候帶著同理心去做，把自己當作用戶去看待自己的產品，通過不斷的積累提升自己對產品的敏銳度，將一些產品的隱性問題挖掘出來；另外可以多看一些好的設計分析書，比如《U一點料1、2》、《以匠心 致設計》等等，將學到的分析方法代入自己的產品或作品中，逐漸分析能力就增強了。
規劃能力是日常工作生活中所需要掌握的能力，主要講業務規劃和職業生涯規劃，業務規劃能力應對的是我們工作中處理業務所需要具備的能力，而職業生涯規劃應對的是我們整個人生職業生涯規劃的能力。掌握這個能力后前者會給我們帶來業務處理效率上的提升，后者給我們帶來整個人生有益的好處，所以這個能力非常重要。
· 業務規劃
很多時候我們還在有條不紊地處理某個需求，心想著下班去吃個飯買水果回家洗澡睡覺的時候，突然來了一個緊急的需求，就把我們整天的計劃給打亂了，火急火燎地處理完這個需求，然后又把之前的需求做了，最后加班改改改導致整個計劃泡湯了。工作中遇到這樣的情況很多很多，處理方法有很多種，最經典的就是四象限法則，把事情的緊急重要程度分為：重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個象限。
很多時候都是道理我們都懂，可是一遇到情況依舊手忙腳亂，根本原因是沒有認真地把它代入自己的工作生活當中。畫一個象限表，把自己今天所要處理的事務陳列出來五分鐘都不需要，一開始可能因為事情不多就沒堅持下去，一旦養成習慣后，將來遇到多種緊急情況突發的時候就能認識到這個習慣給你帶來的好處了，所謂養兵千日，用兵一時就是這個道理。
在做業務需求的時候，可能會碰到有些需求價值高，有些需求價值低但又很緊急，不知道怎么處理之間的關系，我們依舊可以套用四象限法則來制定一個四象限表：價值高且緊急、緊急但價值低、價值高不緊急和價值低不緊急。什么是價值高的需求呢，就是能讓你有充分思考和分析的需求，比如某個頁面的改版；價值低的需求則是相對不怎么需要思考和分析的需求，比如根據已有的規范改個顏色之類的。在時間的優先級前，價值高的需求大于價值低的，最后剩下的就是價值不高且不緊急的。因為我們無法拒絕需求，需求來了肯定要是做的，工作不是愛好可以有多種選擇性，但我們要學會將需求分解成不同類型的，對自己有成長沉淀的需求那可以作為最高優先級去處理，留夠充裕的時間去思考分析，然后沉淀經驗穩定提升。
· 職業生涯規劃
這個在大學期間就學過相關的課程，只不過當時并沒有太深的感觸，而是等工作以后才知道這項能力的重要性，它相當于關系著你每個階段的里程碑，當成游戲中的成就任務也不為過，還是自己設定的成就任務。某個階段想要達成什么樣的目標，想要獲得怎樣的成就，都是要自己一步一步慢慢規劃并且完成出來的。
因為我遇到過幾個非常努力的人，努力到讓人心悸的地步，每天除去吃飯睡覺工作時間就是在努力學習，到最后還是很迷茫，不知道做什么，不知道如何體現自己的價值。這類沒有目的的努力的人是很可怕的，他們努力得沒有錯，但是這樣下去沒有成效的努力會讓他們覺得努力并沒什么用，然后逐漸開始產生抱怨、泄氣和放棄等負面情緒。
舉個例子來說明：如果你剛畢業，給自己制定的長遠的職業生涯規劃是在工作3～5年后進到大廠工作提升自己，那么所拆分下來就需要一些項目工作經驗和優秀的作品，再拆分下來就是如何做出優秀的作品，細分到最后就是作品當中的元素，比如圖標排版布局之類的，那么就制定一段時間內的練習就按照各類元素去做，比如圖標畫兩個星期，APP 設計排版布局練習兩個星期，插畫練習畫兩個星期，這樣堅持下來就組成一個完整的項目作品了，以此類推。有了規劃目標并且在自我驅動的推動下，逐漸實現自己的職業目標。
執行能力是指自我在工作&學習中執行的能力，執行能力為一個設計師最主要的核心技能，一切的能力都凌駕于這個基礎之上；哪怕你再能說會道，能賦予你的設計各種價值，能給予你的設計各種環境，但這些都是第二步，第一步就是你的設計表現達到期望值，如若第一步稿子都不好看，那么沒人愿意會聽你敘述的。前文已經提及到了，設計師在初級至中級階段的時候大多數注重的就是表現手法，如同學說話一樣，表現手法可以看作是漢語拼音，然后才是組成一個個字，最后組成一句完整的話語。
· 自我執行力
提升自我執行的能力我大致分為兩個步驟：看和做。
首先先來說看，看其實是提高自己審美的一個過程，通過看一些平臺網站的優秀設計作品，久而久之自己的審美能力才會提高，然而看分下來一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或學習時間，通過瀏覽設計網站采集學習一些你覺得好看的作品；采集是一個很好的習慣，我覺得是每個設計師必須養成的習慣，把自己平時覺得好的表現形式收集起來，等到某一天需要用到的時候，腦海中對當前場景會有一定的印象，再根據印象去尋找采集到的作品，能很大程度上節省自己腦爆的時間，哪怕沒有采集或者文件丟失，自己的腦中大致也會有一個雛形方向。而帶有目的性地看是指針對某一個模塊去搜集整理，比如今天我需要做一個關于內容的模塊，那么我就會去尋找一些做內容的產品設計，搜集到的各類關于內容的表現手法，然后結合自己的經驗和分析，找出最適合自己產品的一種。
僅僅看是不夠的，在看過之后我們需要動手嘗試才能算真正地沉淀自己所看到、學到的東西。做設計最忌諱的就是“眼高手低或者眼低手高”這種狀態，有了審美但表現手法跟不上，或者說表現手法有但是審美跟不上。一定要在自己吸收了一定的審美后，通過自己的嘗試去做出來，才能真正的沉淀到自己的大腦當中，變成自己的表現手法之一。最后通過大量的積累，結合對商業需求的判斷形成設計策略，才能從容應對不同的產品需求，哪怕你今天做金融相關的產品，還是明天做電商的產品，后天又改做工具類產品，一旦形成了自己不同的應對策略，才能做到真正意義上的游刃有余。
很多時候我們只關注到魚的大小、魚的肉質是否鮮美那20%層面的東西，往往忽視了80%最重要的捕魚技巧和方法；看到的只是產品是否好看，交互是否流暢，體驗是否良好，沒有往更深層次地去想這個產品的商業背景是什么，設計師為什么要這樣設計，如果換做自己的話會去怎么做；畢竟我們所做的一切訓練、思考都是為了更好地為工作服務，就如同脫離了商業背景以后，有些設計就只是單純的炫技，并沒有解決問題的價值，而設計師的工作核心就是解決問題，所以我們要結合作品的背景、價值等因素，去看、去做、去學相應的表現手法才是自我執行的核心所在。
表達能力是設計師除去執行能力外第二重要的能力，小到平日里的溝通對接，大到述職晉升面試，都離不開表達能力的支持。有些設計師經常面試怎么都過不了關，我本以為是作品集的問題，可是看完之后作品方面完全沒有什么問題，具體了解后才知道是在面試過程當中不知如何闡述自己的作品和思路或者在闡述過程中由于緊張等因素導致表達斷斷續續不順暢，面試官就會覺得這個人不靠譜然后 PASS，明明做圖很優秀卻輸在了表達上，這種情況就很憋屈。在廣告公司中，一個 LOGO 或者廣告視頻往往只是贈品，出售的卻是這個品牌VI的故事；如果一個設計師不懂得怎么闡述自己的業務，不懂得怎么推銷自己的方案，不懂得拓寬自己的個人影響力，就單純的只會執行作圖的話，那么這名設計師是不合格的。網傳有一個段子“一個公司的工資排名規律：用 Word 的不如用 Excel 的，用 Excel 的不如用 PPT 的，用 PPT 的不如講 PPT 的，講 PPT 的不如聽 PPT 的，聽 PPT 的不如聽匯報的，聽匯報的不如決定的，決定的不如簽字的”，由此可見表達能力在職場中的重要性。
· 業務表達
業務表達是指在自己工作的過程當中，對自己的設計方案進行闡述。大部分設計師會遇到一個困擾，當設計稿做完以后就不知道怎么去表達自己的設計理念，被業務方/面試官/老板提出質疑時，比如：“你這產品的設計為什么要用紅色？”、“聊天信息這塊兒為什么要用小氣泡的樣式？”，往往不知道怎么去說，有一種當時就覺得好看所以這樣做了，也沒有去想那么多的感覺，或者其他優秀的作品/競品是這樣做的，我也就這樣做了；那么結果往往就是自己的專業性遭到質疑，然后轉變成業務方/老板進行設計主導，形成“改來改去還是第一版好”這樣類似的惡性循環中。
那么如何提升自己的業務表達能力呢？首先設計師要提升在設計領域的專業度，通過學習吸納設計相關的知識，然后代入自己的設計當中去試著闡述設計稿，準備工作先做到位，收集相關的數據，掌握相對應的設計理論，先說服自己再去說服別人。比如：“通過色彩心理學得知，紅色能帶給人興奮、激動、熱情等積極情緒，而我們產品所需要透出的氛圍是熱情的、積極向上的，相對應地激發出用戶的正向情緒，所以我這里使用紅色?！?、“根據近半年數據研究得出，產品聊天信息模塊使用過程當中女性用戶占總用戶數的85.9%，而小氣泡樣式相對比其他樣式更能迎合女性用戶群體的喜好，通過 A/B 測試結果得出，使用小氣泡樣式后數據上漲了15%左右，所以聊天信息模塊整體改版成小氣泡的樣式。”
通過自己前期的準備（設計理論知識補充、用戶調研、數據測試等），將自己的設計理念表達出來，主導整個設計的方向，必要時可以理性地堅持自己的設計方案，畢竟無論是老板還是業務方，出發點都是希望自己的產品能做到最好最完善，只要你給出數據支撐和專業性的建議，他們一定都會采納接受的，而最后你的能力和專業性也得到了對應的認可。
· 書面表達
我本人是強烈建議在能力達到一定程度的時候，通過寫作來檢視自己成果的。因為往往很多東西自己是明白的，但是寫出來讓其他人看懂是另外一種能力了。自己一段時間的職業經驗總結、對設計的見解看法、自己獨特的設計思維、一本書的讀后感等等都可以通過書面表達出來，某個知識理論難的不是學習，而是將它教授出去，因為只有你想要把某件事說明白，闡述得其他人都能看懂，那么首先你要對這件事理解得很透徹，然后通過自己的經驗和見解，轉化成通俗的語言說給別人聽。最好的狀態就是與你同樣級別的人你能與他用專業術語對話，級別比你低的人你能把理論轉換成他能聽懂的語言進行交流，這樣才算是對理論概念理解透徹到位。
大家也明白，學習最有效的方法不是輸入而是輸出，設計也是一樣的。在學習某種理論方法后，通過書面表達出自己的見解和想法，并代入到相應的例子當中，做到舉一反三才能算是真正的學到了這個知識點。
· 述職
述職一般出現在晉升報告或者面試當中，“諸侯朝于天子曰述職，述職者，述所職也?！笔雎毧梢哉f是工作報告中的總結性報告。向自己的老板述職是為了升職加薪，向面試官述職是為了獲取更好的工作機會；工作成果有了，但是述職做不好的話，在老板/面試官眼里你就做了無成效的工作，述職沒有想象的那么簡單，但是也沒有那么難，很多人都會經歷兩個述職的誤區，這些誤區我經歷過也看到過，所以總結出來警醒大家。
一、把述職當作流水賬
把述職當作流水賬是很多新人容易犯的錯誤，當述職的時候，有的人就會陳列出自己今年做了多少多少工作：“我今年改版了 XXX 模塊”、“我設計了 XXX 的首頁”、“我通過調查研究自主推導改版了 XXX 模塊并落地成功”等等，這時候你的老板/面試官會心里會想：“所以呢？”“然后呢？”，工作結果固然重要，但是決定你能否晉升/錄用的，不僅僅是把你做的工作進行流水賬般的描述就夠了的。
二、把述職當作邀功大會
這個誤區相對來說更高端一些，述職的時候有的人常常會像邀功一樣：“我今年通過改版了 XXX 模塊，導致用戶量從50%上漲到了80%”、“通過調查研究改版了 XXX 模塊，最后通過 A/B 測試發現數據上漲了5%，最后落地全部實施新的設計方案”，這些看似闡述了產品的背景、自己做了什么以及結果，但是往往來說還是不夠的，以上統統可以歸為無效述職。
你做了什么重要嗎？沒那么重要，重要的是你帶了什么樣的價值。述職所需要你做的，老板/面試官所想要了解的就是：分析為什么產品之前數據會那么低？你是通過那些方法得出解決方案的？為什么那么多種解決方案里你要選擇這一種？你這樣的方法能否沉淀成體系？如果換一個人來按照你的方法做是否可以得到同樣的效果？有效述職也就是決定你能向上一步的，是把你在工作中的感性認知上升到理性規律的歸納總結的能力體現。
· SCQA 模型
SCQA 模型是一個“結構化表達”工具，是麥肯錫咨詢顧問芭芭拉·明托在《金字塔原理》中提出的，而這個模型可以套用在業務表達、書面表達以及述職任何場景當中；S是指場景(Situation)，C是指沖突(Complication),Q是指問題(Question)，A是指解決方案(Answer)。
無論你是在向業務方/老板闡述方案做工作匯報，還是自己寫作梳理都可以用到這個模型；S場景陳述的通常是大家都熟悉的事、普遍認同的事、事情發生的背景。由此切入既不突兀交代了事情背景又容易讓大家產生共鳴，產生代入感，然后引出沖突C。Q是其中發現的問題，最后A給出相對應的解決方案，是對Q的回答也是接下來我們要闡述的內容。整個結構其實是形成良好的溝通氛圍，然后帶出沖突和疑問，最后提供可行的解決方案。
我們熟知的廣告詞經常使用這個套路：
得了灰指甲——描述場景【S】
一個傳染兩——發生了沖突【C】
問我怎么辦？——提出問題【Q】
馬上用亮甲！——給出解決方案【A】
這個模型無論作為演講的開場白，作為向業務方/老板闡述設計方案的開場，還是作為一篇文章的序言都是屢試不爽的。S場景需要讓對方產生共鳴，必須讓對方產生一種：“是的，你說的好有道理”的反應，只有場景被認同了才能繼續故事的發展，這時候打破你給對方營造的安全感，制造C沖突，相繼提出Q問題，共同確認面臨的一個問題，然后你給出你的A解決方案，而這個解決方案就是你整個敘述的核心和中心思想。
比如你要向業務方/老板闡述你的設計方案，就可以這樣來描述：“在 XXv2.0 版本上線后（交代場景），收集了近半年以來的數據發現，女性用戶相對減少了20%（發生沖突），為什么會減少20%的女性用戶（提出疑問），根據我的調查研究發現原因是改版后整個產品色調偏男性化，由于我們產品的受眾群體大多是女性用戶，男女比例為1:3，所以在 v.2.1 的改版中我將整個產品色調改為偏女性化的方向（給出解決方案）”。
同樣，我寫這個章節的思路就可以這樣理解：設計師們工作中通常會面臨述職、面試以及寫文章等情況（交代場景），但是往往很多設計師不知道如何去表達，思路也不是很清晰，導致述職無效、面試失敗等情況（發生沖突），要如何避免這種情況發生？如何鍛煉自己的表達能力？（提出疑問），那就要多通過 SCQA 模型在生活工作中去練習表達（給出解決方案）。
最后是生活能力，設計不是工作的全部，工作不是生活的全部，我們應該過好自己的生活，產品設計都是從生活中獲得靈感和啟發的，我們如何對待自己的生活，我們就會得到怎樣的反饋。多陪伴下自己的家人、培養一個興趣愛好、保持學習新鮮事物的動力等等，成為一個有趣的靈魂。往往設計師能從多樣化的生活中發現靈感和啟發，也能從生活中找到不同用戶的痛點和感知；如何做一名好的設計師，就是帶著同理心去做設計，如何帶著同理心做設計，就是將自己當作用戶，而用戶是融入到生活中的。下面我就來例舉兩個通過生活中的啟發改變產品設計的例子。
· 用戶擁有感
在購買星巴克的時候，為什么服務員要把顧客的名字寫在杯子上呢？難道僅僅是為了分辨嘛？像其他奶茶店一樣貼一張打印好的便簽不就好了么？去宜家購置家具的時候，為什么要讓顧客自己親手組裝家具？可口可樂為什么可以定制自己城市的易拉罐？因為這一切都是要給用戶塑造擁有感，人是一種很不理性的生物，只要先拿到一個東西，就會覺得自己擁有這個東西，就不想放掉它了，這就是擁有感最根本的示范。從心理學的角度來說這被稱為稟賦效應，意思就是我們對于自己所擁有東西的價值往往會看得更重。這就是為什么小時候玩的玩具、收集的畫冊、穿的衣服都已經沒什么用了，我們還要留著當紀念的原因。因為我們的人性對于擁有感非常執著，對于自己得到的東西非常迷戀，當我們覺得要失去它的時候，會有一種損失感，覺得很不舍，會覺得心里很難受，這就是稟賦效應在我們身上發生了最明顯的效果。
而這樣的營銷策略被用到產品設計當中，例如前段時間很火的軟件 Zepeto，每個人都不一樣的生成圖片洗刷著我們的朋友圈；例如每年年末的賬單、網易云音樂總結等等，賬單它只是一份賬單，根據不同用戶生成不同的賬單，也就賦予了不同的意義；又例如各種 H5 性格測試生成的分享卡等等，這些都是產品設計中從生活中營銷案例中汲取經驗的體現。
· 線下導購轉線上
每當我們去到商場線下商店的時候，導購員和我們素未謀面，但是卻可以通過我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產品，然后向我們推銷對應的產品，如若剛好觸動我們的需求，于是我們就會發生購買這個行為。生活中線下導購的方式也被運用到線上導購的產品中，同樣平臺和用戶素未謀面，可是可以通過掌握大數據，分析用戶近半年、近一個月的購買和瀏覽商品的數據，結合相對應季節等因素推送給用戶所需要的產品。比如我平時經常瀏覽一些潮牌個性的衣物，現在正值冬季，想買一件冬季穿的棉衣，那么當我打開淘寶的時候，系統會推送一些潮牌大衣等冬季衣物在首頁，我正好有這個需求又符合我的口味愛好，自然而然就會點進去購買了。
有一條創業準則是這樣說的：“如果有點兒閑錢，還有點時間，但又找不到商機，最好的辦法就是去鬧市、電梯、小區人流量最高的那個大門口，端杯茶，靜靜的聽人們抱怨?！保雀?、蘋果公司的設計思維首當其沖的就是帶著同理心去設計、去制定設計策略，同理心來源于生活，而這一切只有設計師把自己的生活經營好，才能從當中獲得啟發和感悟，然后代入自己的設計理念當中，設計出真正能根本解決問題的產品。
其次偶爾會從網上看到或者聽說 XX 設計師猝死，XX 設計師檢驗出 XX 疾病等等，每每看到此類消息都會感到痛心，工作不是生活的全部，如果連自己的工作和生活都處理不好的話，那么說明這個人生活能力真的很糟糕。如果一個人整天筋疲力盡打不起精神，那么他的工作會做得好嘛？所以在這請求大家合理安排好工作時間，勞逸結合，多鍛煉身體，多花些時間陪伴父母、家人，這樣才能帶著健康的身心去工作，從而取得更好的工作成果，形成一個良性的循環。你怎樣對待生活，生活就會怎樣對待你。
以上是我總結的除設計之外設計師需要掌握的技能，如果將這些比喻成大樹的話，設計能力是大樹的根部，是設計師立足的根本；而執行能力則是這根樹的枝干，是支撐設計師全部的基礎；表達能力是樹枝，撐起設計師的整個世界；思考能力則是樹葉花果，是設計師綜合的產物；大地就是生活能力，當設計師的產物（物質、地位等）“落地”時，滋養著大地，大地越“肥沃”，越能催生出茂盛的枝葉；而規劃能力就是一位辛勤的園丁，什么時候需要澆水，什么時候需要修剪枝葉，都是由園丁來承擔。
想要跑贏別人，首先得跑過那個跑得最快的自己。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
藍藍設計的小編 http://www.syprn.cn
