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