前言
在這艱難又魔幻的2020年的尾聲，有必要系統(tǒng)匯總下關(guān)于UI/UX的設(shè)計(jì)發(fā)展方向，為接下來的2021的開篇帶個(gè)好頭。本文在了解這些趨勢的同時(shí)，分析特點(diǎn)并舉例落地實(shí)例，來幫助大家啟發(fā)創(chuàng)意設(shè)計(jì)工作的思考切入點(diǎn)。
流行趨勢跟人們所處的環(huán)境密切相關(guān)，從最初的方塊馬賽克——>追求極度寫實(shí)——>扁平風(fēng)——>到現(xiàn)在的質(zhì)感擬物，扁平設(shè)計(jì)霸屏的這幾年，設(shè)計(jì)風(fēng)又向更立體、豐富、更有層次感的方向發(fā)展，所以說趨勢就是一個(gè)輪回。設(shè)計(jì)風(fēng)格沒有絕對的好壞，在審美達(dá)到一定疲勞時(shí)，就會(huì)開始出現(xiàn)新的設(shè)計(jì)風(fēng)格。每一個(gè)新風(fēng)格都值得設(shè)計(jì)師去拆解、思考，本質(zhì)都是為了提升更好的交互體驗(yàn)。
而在進(jìn)入下一個(gè)十年的過程中，我們對數(shù)字產(chǎn)品和體驗(yàn)的依賴將日益增長，預(yù)測真正勝出的將會(huì)是3D動(dòng)畫和用戶界面/用戶體驗(yàn)設(shè)計(jì)的結(jié)合設(shè)計(jì)，5G技術(shù)的發(fā)展，它將重塑了我們以前無法想象的交互方式，這將是一段充滿創(chuàng)意、鼓舞人心的發(fā)展階段。在這里讓我們來看看未來那些不可忽視的設(shè)計(jì)趨勢吧。
（注:圖片來自網(wǎng)絡(luò)，均標(biāo)明出處及作者，若有侵權(quán)請告知?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)域的大勢。
圈中也出現(xiàn)了很多免費(fèi)或付費(fèi)的3D預(yù)設(shè)元素及場景組件，幫助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人物場景
▲2020-總結(jié)陳詞H5
▲總結(jié)報(bào)告Banner的動(dòng)效
其中IP立體化最多的當(dāng)屬K12教育領(lǐng)域，除了制作IP周邊外，3D效果能適應(yīng)豐富的運(yùn)營場景，高度還原現(xiàn)實(shí)世界，給小朋友帶來最真實(shí)的學(xué)習(xí)互動(dòng)體驗(yàn)。
▲洪恩識(shí)字（3D學(xué)習(xí)場景）、騰訊開心鼠英語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ì)趨勢。
2、軟漸變（Soft gradients）
過于強(qiáng)烈的漸變不再是趨勢，大多數(shù)設(shè)計(jì)師都開始喜歡使用非常簡單和微妙的漸變，如果產(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í)尚簡潔。蘋果設(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)用在界面中對關(guān)鍵信息起到強(qiáng)調(diào)作用，用戶可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像物理空間中真實(shí)的玻璃一樣。
特點(diǎ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í)分。之前用了很長時(shí)間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見到太陽光般刺眼，果然暗黑模式用久了還是比較舒服的。
暗黑模式和之前經(jīng)常提到的夜間模式是有區(qū)別的，簡單來說暗黑模式可以在任何場景下使用，并沒有降低對比亮度；夜間模式則專為夜間場景設(shè)計(jì)，重在降低對比度，以降低在暗光環(huán)境下屏幕對人眼的刺激。
特點(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、多彩高對比度界面
受Material Design調(diào)色板的影響，2020年用戶界面趨勢的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡約的界面中明亮大膽且對比鮮明的色彩一直都處于增長趨勢。熒光色一直是90后喜歡的風(fēng)格，我個(gè)人就非常喜歡熒光色，現(xiàn)在要是談到該風(fēng)格的受眾主力軍可是90后啊。
顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一，對比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力，這種風(fēng)格已經(jīng)成為清新、酷炫、數(shù)字時(shí)代的代名詞，而在2021一趨勢還將會(huì)繼續(xù)影響UI、平面、廣告、插畫等領(lǐng)域。
特點(diǎn)：
? 活潑大膽
? 對比鮮明
? 潮流科技
▲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)成中的簡單幾何形狀就已經(jīng)用于視覺藝術(shù)中，多用于主背景主題或色彩細(xì)節(jié)，使用鋼筆工具編輯最簡單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設(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)用：
最近看到的一組原色視覺剛好融合了高對比度+幾何這兩種風(fēng)格，那就是SHINee的正規(guī)六輯合輯《‘The Story of Light’》，采用紅黃藍(lán)三色加上圓形、正方形、三角形的大塊面積來打造畫面空間及變化，帶來極具視覺沖擊的音樂色彩與魅力。
▲專輯的主視覺
當(dāng)然，幾何形狀不止用于色彩圖案細(xì)節(jié)，在UI界面布局中經(jīng)常使用大塊面圖形，這種設(shè)計(jì)方法受到越來越多的關(guān)注。
7、極簡風(fēng)
極簡設(shè)計(jì)的前身是2010年代中期精巧又花哨的設(shè)計(jì)，這種設(shè)計(jì)已經(jīng)存在很長一段時(shí)間了，但在2020年，人們每天需要消化的信息量越來越多，所以現(xiàn)在用戶想要盡可能避免“視覺垃圾”，這也是為什么我們會(huì)選擇更簡潔專一的界面。
特點(diǎn)
? 專注信息
? 清晰易用
? 簡單操作
▲RonDesignLab
▲Quan
▲BAOLIN
▲Gregory Loshakov
談到極簡主義，就不可避免會(huì)涉及到無鍵趨勢，因?yàn)榘存I越少就意味著設(shè)計(jì)越簡潔，而這種簡化過的設(shè)計(jì)將讓手勢操作和語音交互更為流行。
▲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)域中最熱的趨勢之一。插畫的視覺能很好的幫助用戶理解產(chǎn)品背后的故事，為了把故事講好，我們可以創(chuàng)造出一個(gè)品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產(chǎn)品問題。這是在產(chǎn)品設(shè)計(jì)中講好故事的基礎(chǔ)，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。
在2018年的蜘蛛俠平行宇宙中我們就已經(jīng)看到了3D與插畫的結(jié)合，藝術(shù)家保留了人物在美式漫畫中的的線條筆觸，把“手繪”的細(xì)節(jié)和質(zhì)感都放大到了熒幕上，在劇中還采用對比強(qiáng)烈的大色塊擴(kuò)大了視覺張力，分分鐘把漫畫書甩到面前，讓人忍不住驚呼，索尼的藝術(shù)家們是怎么把片子做得這么酷！
▲3D人物的畫筆觸感
▲畫面光源處由波普圓點(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)方面扮演著非常重要的角色。它們在 UI 設(shè)計(jì)中決定了一個(gè) App 或網(wǎng)站是普通還是優(yōu)秀，從點(diǎn)擊反饋、加載等待、導(dǎo)航交互等等，為用戶界面設(shè)計(jì)增加了動(dòng)態(tài)性，交互性和直觀性。
動(dòng)效起到的作用：
? 引起人們對應(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)場動(dòng)效
結(jié)尾：
2020的趨勢在滿足用戶的美學(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ù)，每個(gè)設(shè)計(jì)人員都可以找到自己喜歡的方向，不管哪種趨勢，最重要的是如何學(xué)習(xí)并合理地運(yùn)用到產(chǎn)品中，以產(chǎn)生最大的設(shè)計(jì)商業(yè)價(jià)值。
文章來源：UI中國 作者：_阿丹a_
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ā)到您的郵箱中， 請點(diǎn)這里
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ā)到您的郵箱中， 請點(diǎn)這里
Loading動(dòng)畫，在現(xiàn)在的設(shè)計(jì)中已經(jīng)是一個(gè)必須要考慮的系統(tǒng)元素，它能減緩用戶等待焦慮的心態(tài)，也能用來作為品牌透傳，增加曝光。
那關(guān)于loading動(dòng)畫相關(guān)知識(shí)，我覺得對于設(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è)用戶評價(jià)的應(yīng)用，第一個(gè)版本并不完美，loading延遲在2-3秒。
你猜怎么著？
很多人認(rèn)為這3秒是一個(gè)故障。在實(shí)際開發(fā)中，你可能要面對龜速的網(wǎng)絡(luò)，沒有優(yōu)化的代碼，操作時(shí)間長或數(shù)據(jù)處理太多等問題。因此，App的運(yùn)行速度可能沒有用戶預(yù)期中的那么快。雖然早期用戶可能會(huì)給你的產(chǎn)品第二次機(jī)會(huì)，但絕大多數(shù)人會(huì)立即退出它。
除非你的產(chǎn)品界面對用戶的行為提供了明確的即時(shí)反饋。剛才發(fā)生了什么？是操作錯(cuò)誤還是在等待服務(wù)器的請求？用戶需要等待多長時(shí)間才能正常使用這個(gè)工具或網(wǎng)站？用戶為什么要等待呢?
讓我們一起深入了解Loading動(dòng)畫：
對于這種類型的反饋，設(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ù)反饋。【Myers 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ì)師們開始不滿足于簡單的進(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ì)趨勢和方法已經(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問題。
它可以是一條簡單的文本信息，告知大致的等待時(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)用目前正在處理截圖資源，這清晰的表明，我們的工具沒有崩潰，它只是正在處理請求：
好的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)為Loading只是一個(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í)也稱為百分比指示符。他們可以簡單直接，也可以很有創(chuàng)意，需要對你的用戶業(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)多長時(shí)間以及目前所處的狀態(tài)。根據(jù)UI需求的不同，進(jìn)度條也可以是線性的，沒有百分比的形式。
想想Gmail，它沒有顯示進(jìn)度百分比，但是用戶同樣可以感覺到加載的進(jìn)度。下面是兩個(gè)簡單而又創(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ā)聲。請思考下那些應(yīng)用會(huì)使用這種loading動(dòng)畫？
LittlePin Spinner by Daniel Sofinet
無限循環(huán)動(dòng)畫要求用戶在上傳或執(zhí)行某些操作時(shí)等待，但不要求具體需要多久時(shí)間，它們可能會(huì)非常簡單或非常有創(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í)間，簡單的Loading被大眾所推崇，因?yàn)樗麄儗τ谛阅艿挠绊懽钚。ㄓ绕涫菍τ趙eb）。使用默認(rèn)的或開源的loading要容易的多，不需要設(shè)計(jì)師和開發(fā)花心思來設(shè)計(jì)和實(shí)現(xiàn)它。
如果你正在開發(fā)MVP或者項(xiàng)目的第一個(gè)版本，那么使用簡單的或者開源的loading動(dòng)畫更符合邏輯。在這個(gè)階段，即使把loading動(dòng)畫做的再怎么有創(chuàng)意，也并不會(huì)對你的產(chǎ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.bouu.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ā)到您的郵箱中， 請點(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ì)師還需要掌握更多的能力，才能讓自己成長提升，并且擁有他人無法取代的價(jià)值。我通過自己的經(jīng)歷和整理收集，發(fā)現(xiàn)目前如今不同階段的設(shè)計(jì)師對待同一個(gè)問題不同的角度以及特征，如下圖所示：
不難發(fā)現(xiàn)，當(dāng)大家還是初級設(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í)行角色無休止加班成為了初級設(shè)計(jì)師最大的痛點(diǎn)。
而經(jīng)過一段時(shí)間的學(xué)習(xí)和工作后，逐漸轉(zhuǎn)型成為中級設(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è)人影響力，成為了中級設(shè)計(jì)師這階段的痛點(diǎn)。
通過三年五年的沉淀，成為高級設(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)的能力占比逐漸變少，更多的是其他的能力增長，所以設(shè)計(jì)師除了設(shè)計(jì)以外其他能力的重要程度顯而易見，那么我們來看看除了設(shè)計(jì)以外，設(shè)計(jì)師應(yīng)該掌握其他什么能力。
思考能力作為首要的能力，不僅僅是設(shè)計(jì)師，其他職業(yè)一樣需要這個(gè)能力，這里所涵蓋的面太廣泛了也說不了，這里主要針對三點(diǎn)來講：核心競爭力、批判思維和分析能力。思考分為兩個(gè)層面：自我層面的和業(yè)務(wù)層面的思考；自我層面的思考就是要通過深度剖析自我，發(fā)掘自己處于哪個(gè)階段，有什么長處和不足，自己想要什么，需要往怎樣的方向發(fā)展；而業(yè)務(wù)層面的則是要需要思考業(yè)務(wù)產(chǎn)品的結(jié)構(gòu)框架、用戶體驗(yàn)、商業(yè)價(jià)值等等等等，前者更加關(guān)注自身的成長，后者更加關(guān)注業(yè)務(wù)的成長。
· 核心競爭力
核心競爭力就是有與別人不一樣的競爭力，想要做到別人無法替代你的地步，就要有自己個(gè)人核心的競爭力。如果你會(huì)做一張 Banner，我也會(huì)做一張 Banner，你會(huì)搞一個(gè)頁面，我也會(huì)搞一個(gè)頁面，那么你這個(gè)人就成為了可有可無的螺絲釘，唯一的優(yōu)勢就是年輕能拼能熬，等你熬銹了老了，隨時(shí)可以換一顆新的螺絲釘來取代你的位置。所以不管什么階段，我們要深度剖析自己，認(rèn)清自己的優(yōu)勢劣勢，并采取相應(yīng)的措施。
剖析自己的核心競爭力給大家一個(gè)大致思路，從異樣性和共通性入手。自己周圍或多或少有團(tuán)隊(duì)，條件不足的話現(xiàn)在網(wǎng)絡(luò)各大平臺(tái)都很發(fā)達(dá)，也能融入一些設(shè)計(jì)圈子中，和不同的人對比尋找自己的核心競爭力。異樣性是當(dāng)前的優(yōu)勢，找出其中的優(yōu)點(diǎn)，不斷地放大深造，變成你的核心競爭力，而和別人不一樣的缺點(diǎn)找出來摒棄改正；共通性就是和大家一樣的地方，可以看作是偽劣勢，因?yàn)橹T多共通性中總有你最喜歡最擅長的一個(gè)，將它單獨(dú)拿出來不斷擴(kuò)大，逐漸就拉開了差異性，慢慢就轉(zhuǎn)化成你的核心競爭力了，而大家都有的缺點(diǎn)，你把它糾正了，就成為你的核心競爭力了。
來舉一個(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)勢；2.品牌 VI 相關(guān)經(jīng)驗(yàn)
那么小王可以保持自己學(xué)歷優(yōu)勢下，可以繼續(xù)深造品牌 VI 相關(guān)，逐漸轉(zhuǎn)型成為高學(xué)歷的品牌 VI 設(shè)計(jì)師，那么學(xué)歷和很多品牌 VI 的經(jīng)驗(yàn)就是小王的核心競爭力；也可以通過熱愛去學(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)升級成個(gè)人影響力，那么綜合下來更加優(yōu)秀的視覺表現(xiàn)力、豐富的工作經(jīng)驗(yàn)和個(gè)人影響力也會(huì)逐漸變成小王的核心競爭力。
只有通過不同維度深度地剖析自己，找到自己的共通和異樣點(diǎn)，清晰自己的價(jià)值定位，然后制定出適合自己成長目標(biāo)和方案，不斷放大增加自己的核心競爭力，成為不可取代的那個(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é)果是最好的解決方案。這也印證了波克定理：只有在爭辯中，才可能誕生最好的主意和最好的決定。所以當(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)也得到了沉淀，下次遇到相同的場景就可以拿出來復(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ǎn)品的布局結(jié)構(gòu)或者用戶體驗(yàn)，這些都需要有一定的分析能力。通過拆解改版/競品/參照產(chǎn)品等，明確產(chǎn)品的最終目的、商業(yè)價(jià)值等等，有了這些準(zhǔn)備后才能對自己的產(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)品，通過不斷的積累提升自己對產(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)對的是我們工作中處理業(yè)務(wù)所需要具備的能力，而職業(yè)生涯規(guī)劃應(yīng)對的是我們整個(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à)值低的需求則是相對不怎么需要思考和分析的需求，比如根據(jù)已有的規(guī)范改個(gè)顏色之類的。在時(shí)間的優(yōu)先級前，價(jià)值高的需求大于價(jià)值低的，最后剩下的就是價(jià)值不高且不緊急的。因?yàn)槲覀儫o法拒絕需求，需求來了肯定要是做的，工作不是愛好可以有多種選擇性，但我們要學(xué)會(huì)將需求分解成不同類型的，對自己有成長沉淀的需求那可以作為最高優(yōu)先級去處理，留夠充裕的時(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è)，給自己制定的長遠(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ì)師在初級至中級階段的時(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í)候，腦海中對當(dāng)前場景會(huì)有一定的印象，再根據(jù)印象去尋找采集到的作品，能很大程度上節(jié)省自己腦爆的時(shí)間，哪怕沒有采集或者文件丟失，自己的腦中大致也會(huì)有一個(gè)雛形方向。而帶有目的性地看是指針對某一個(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é)合對商業(yè)需求的判斷形成設(shè)計(jì)策略，才能從容應(yīng)對不同的產(chǎn)品需求，哪怕你今天做金融相關(guān)的產(chǎn)品，還是明天做電商的產(chǎn)品，后天又改做工具類產(chǎn)品，一旦形成了自己不同的應(yīng)對策略，才能做到真正意義上的游刃有余。
很多時(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í)行能力外第二重要的能力，小到平日里的溝通對接，大到述職晉升面試，都離不開表達(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á)能力在職場中的重要性。
· 業(yè)務(wù)表達(dá)
業(yè)務(wù)表達(dá)是指在自己工作的過程當(dāng)中，對自己的設(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)秀的作品/競品是這樣做的，我也就這樣做了；那么結(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ù)，掌握相對應(yīng)的設(shè)計(jì)理論，先說服自己再去說服別人。比如：“通過色彩心理學(xué)得知，紅色能帶給人興奮、激動(dòng)、熱情等積極情緒，而我們產(chǎn)品所需要透出的氛圍是熱情的、積極向上的，相對應(yīng)地激發(fā)出用戶的正向情緒，所以我這里使用紅色?！?、“根據(jù)近半年數(shù)據(jù)研究得出，產(chǎn)品聊天信息模塊使用過程當(dāng)中女性用戶占總用戶數(shù)的85.9%，而小氣泡樣式相對比其他樣式更能迎合女性用戶群體的喜好，通過 A/B 測試結(jié)果得出，使用小氣泡樣式后數(shù)據(jù)上漲了15%左右，所以聊天信息模塊整體改版成小氣泡的樣式?！?
通過自己前期的準(zhǔn)備（設(shè)計(jì)理論知識(shí)補(bǔ)充、用戶調(diào)研、數(shù)據(jù)測試等），將自己的設(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è)性也得到了對應(yīng)的認(rèn)可。
· 書面表達(dá)
我本人是強(qiáng)烈建議在能力達(dá)到一定程度的時(shí)候，通過寫作來檢視自己成果的。因?yàn)橥芏鄸|西自己是明白的，但是寫出來讓其他人看懂是另外一種能力了。自己一段時(shí)間的職業(yè)經(jīng)驗(yàn)總結(jié)、對設(shè)計(jì)的見解看法、自己獨(dú)特的設(shè)計(jì)思維、一本書的讀后感等等都可以通過書面表達(dá)出來，某個(gè)知識(shí)理論難的不是學(xué)習(xí)，而是將它教授出去，因?yàn)橹挥心阆胍涯臣抡f明白，闡述得其他人都能看懂，那么首先你要對這件事理解得很透徹，然后通過自己的經(jīng)驗(yàn)和見解，轉(zhuǎn)化成通俗的語言說給別人聽。最好的狀態(tài)就是與你同樣級別的人你能與他用專業(yè)術(shù)語對話，級別比你低的人你能把理論轉(zhuǎn)換成他能聽懂的語言進(jìn)行交流，這樣才算是對理論概念理解透徹到位。
大家也明白，學(xué)習(xí)最有效的方法不是輸入而是輸出，設(shè)計(jì)也是一樣的。在學(xué)習(xí)某種理論方法后，通過書面表達(dá)出自己的見解和想法，并代入到相應(yīng)的例子當(dāng)中，做到舉一反三才能算是真正的學(xué)到了這個(gè)知識(shí)點(diǎn)。
· 述職
述職一般出現(xiàn)在晉升報(bào)告或者面試當(dāng)中，“諸侯朝于天子曰述職，述職者，述所職也?！笔雎毧梢哉f是工作報(bào)告中的總結(jié)性報(bào)告。向自己的老板述職是為了升職加薪，向面試官述職是為了獲取更好的工作機(jī)會(huì)；工作成果有了，但是述職做不好的話，在老板/面試官眼里你就做了無成效的工作，述職沒有想象的那么簡單，但是也沒有那么難，很多人都會(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ū)相對來說更高端一些，述職的時(shí)候有的人常常會(huì)像邀功一樣：“我今年通過改版了 XXX 模塊，導(dǎo)致用戶量從50%上漲到了80%”、“通過調(diào)查研究改版了 XXX 模塊，最后通過 A/B 測試發(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á)以及述職任何場景當(dāng)中；S是指場景(Situation)，C是指沖突(Complication),Q是指問題(Question)，A是指解決方案(Answer)。
無論你是在向業(yè)務(wù)方/老板闡述方案做工作匯報(bào)，還是自己寫作梳理都可以用到這個(gè)模型；S場景陳述的通常是大家都熟悉的事、普遍認(rèn)同的事、事情發(fā)生的背景。由此切入既不突兀交代了事情背景又容易讓大家產(chǎn)生共鳴，產(chǎn)生代入感，然后引出沖突C。Q是其中發(fā)現(xiàn)的問題，最后A給出相對應(yīng)的解決方案，是對Q的回答也是接下來我們要闡述的內(nèi)容。整個(gè)結(jié)構(gòu)其實(shí)是形成良好的溝通氛圍，然后帶出沖突和疑問，最后提供可行的解決方案。
我們熟知的廣告詞經(jīng)常使用這個(gè)套路：
得了灰指甲——描述場景【S】
一個(gè)傳染兩——發(fā)生了沖突【C】
問我怎么辦？——提出問題【Q】
馬上用亮甲！——給出解決方案【A】
這個(gè)模型無論作為演講的開場白，作為向業(yè)務(wù)方/老板闡述設(shè)計(jì)方案的開場，還是作為一篇文章的序言都是屢試不爽的。S場景需要讓對方產(chǎn)生共鳴，必須讓對方產(chǎn)生一種：“是的，你說的好有道理”的反應(yīng)，只有場景被認(rèn)同了才能繼續(xù)故事的發(fā)展，這時(shí)候打破你給對方營造的安全感，制造C沖突，相繼提出Q問題，共同確認(rèn)面臨的一個(gè)問題，然后你給出你的A解決方案，而這個(gè)解決方案就是你整個(gè)敘述的核心和中心思想。
比如你要向業(yè)務(wù)方/老板闡述你的設(shè)計(jì)方案，就可以這樣來描述：“在 XXv2.0 版本上線后（交代場景），收集了近半年以來的數(shù)據(jù)發(fā)現(xiàn)，女性用戶相對減少了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ì)面臨述職、面試以及寫文章等情況（交代場景），但是往往很多設(shè)計(jì)師不知道如何去表達(dá)，思路也不是很清晰，導(dǎo)致述職無效、面試失敗等情況（發(fā)生沖突），要如何避免這種情況發(fā)生？如何鍛煉自己的表達(dá)能力？（提出疑問），那就要多通過 SCQA 模型在生活工作中去練習(xí)表達(dá)（給出解決方案）。
最后是生活能力，設(shè)計(jì)不是工作的全部，工作不是生活的全部，我們應(yīng)該過好自己的生活，產(chǎn)品設(shè)計(jì)都是從生活中獲得靈感和啟發(fā)的，我們?nèi)绾螌Υ约旱纳?，我們就?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)，意思就是我們對于自己所擁有東西的價(jià)值往往會(huì)看得更重。這就是為什么小時(shí)候玩的玩具、收集的畫冊、穿的衣服都已經(jīng)沒什么用了，我們還要留著當(dāng)紀(jì)念的原因。因?yàn)槲覀兊娜诵詫τ趽碛懈蟹浅?zhí)著，對于自己得到的東西非常迷戀，當(dāng)我們覺得要失去它的時(shí)候，會(huì)有一種損失感，覺得很不舍，會(huì)覺得心里很難受，這就是稟賦效應(yīng)在我們身上發(fā)生了最明顯的效果。
而這樣的營銷策略被用到產(chǎn)品設(shè)計(jì)當(dāng)中，例如前段時(shí)間很火的軟件 Zepeto，每個(gè)人都不一樣的生成圖片洗刷著我們的朋友圈；例如每年年末的賬單、網(wǎng)易云音樂總結(jié)等等，賬單它只是一份賬單，根據(jù)不同用戶生成不同的賬單，也就賦予了不同的意義；又例如各種 H5 性格測試生成的分享卡等等，這些都是產(chǎn)品設(shè)計(jì)中從生活中營銷案例中汲取經(jīng)驗(yàn)的體現(xiàn)。
· 線下導(dǎo)購轉(zhuǎn)線上
每當(dāng)我們?nèi)サ缴虉鼍€下商店的時(shí)候，導(dǎo)購員和我們素未謀面，但是卻可以通過我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產(chǎn)品，然后向我們推銷對應(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é)合相對應(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ì)做得好嘛？所以在這請求大家合理安排好工作時(shí)間，勞逸結(jié)合，多鍛煉身體，多花些時(shí)間陪伴父母、家人，這樣才能帶著健康的身心去工作，從而取得更好的工作成果，形成一個(gè)良性的循環(huán)。你怎樣對待生活，生活就會(huì)怎樣對待你。
以上是我總結(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.bouu.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ā)到您的郵箱中， 請點(diǎn)這里
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ā)到您的郵箱中， 請點(diǎn)這里
藍(lán)設(shè)計(jì)( www.bouu.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ā)到您的郵箱中， 請點(diǎn)這里
藍(lán)設(shè)計(jì)( www.bouu.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ā)到您的郵箱中， 請點(diǎn)這里
UI走查表有什么用？
一套成熟的UI走查表能更科學(xué)更地改稿；減少設(shè)計(jì)中的反復(fù)試錯(cuò)、評審交付時(shí)更言之有物；不僅僅停留于“看上去順眼”、“我覺得挺好”、“先這樣”的視覺表層。更深一層來說，走查表有助于培養(yǎng)設(shè)計(jì)師的結(jié)構(gòu)化思維，形成一個(gè)完整的設(shè)計(jì)體系。
01.頁面要表達(dá)的意思是否正確
在設(shè)計(jì)頁面的時(shí)候，需要注意頁面要傳達(dá)給用戶的信息重點(diǎn)，例如本次案例的產(chǎn)品需求中，該頁面的功能是促使用戶快速下單，信息上則要側(cè)重于價(jià)格與優(yōu)惠信息。
首屏信息是給用戶的第一印象，在用戶打開頁面，盡可能展現(xiàn)出更多用戶感興趣的內(nèi)容， 而此次頁面需要突出促銷優(yōu)惠信息，次要信息則放在后面。
02.頁面視覺重點(diǎn)
相信大家平時(shí)經(jīng)常聽說0.618的黃金比例（斐波那契數(shù)列），屏幕方寸間合理運(yùn)用黃金比例可以讓界面視覺重心更加平穩(wěn)，視覺更加舒適。同時(shí)有助界面區(qū)域分割，集中視覺焦點(diǎn)，承載更重要的信息，讓整個(gè)界面布局更加合理。
淘寶、京東到家等成熟的一線產(chǎn)品黃金比例運(yùn)用，o在視覺焦點(diǎn)區(qū)域都向用戶展示了關(guān)鍵信息。
02.元素間距符合各層級的關(guān)系
為什么頁面會(huì)雜亂無章？主要是信息一味地堆砌，分布沒有區(qū)別，但只要遵從以下方法，頁面就會(huì)清晰很多，有節(jié)奏的呼吸感也出來了。
同類的板塊不應(yīng)被混亂的間距區(qū)隔開來，他們應(yīng)該更集中，并且整體與別的板塊區(qū)別開來，同理，不僅僅是板塊，元素與元素之間也是如此，這樣用戶可以更加快速地看到自己想要的東西。
那么，如何更好地讓信息按照相似屬性分布合理呢？這就要利用5分、等分原則來讓分布變得更合理，假設(shè)相同板塊的間距值為a px，則不同板塊為2apx。這樣不僅在視覺可以將信息分布開來，還能讓整體的布局更加規(guī)整，不會(huì)凌亂，盡可能使用同一或者同倍數(shù)的間距，更便于開發(fā)。
案例中，相近元素的間距為16px（a px），則不同類別的元素則為32px（2a px）。
01.字體種類的控制
一個(gè)產(chǎn)品如果字體種類過多，會(huì)導(dǎo)致界面的不統(tǒng)一與混亂。通常字體控制盡量在3種以內(nèi)，中文字體、英文字體以及特殊數(shù)字字體。如下圖：
02.字號(hào)與粗細(xì)控制
字號(hào)過多使信息失去重點(diǎn)，基礎(chǔ)字號(hào)控制在3種以內(nèi)，目的在于清晰區(qū)分信息的層級。正文字號(hào)建議為28px，副文案為24px，大標(biāo)題、價(jià)格等重要信息需按實(shí)際情況加大，令信息的層級區(qū)分更明顯。
加粗字體往往是整個(gè)界面的視覺焦點(diǎn)，重點(diǎn)的文本（如標(biāo)題、價(jià)格）需要加粗處理，注意控制字體加粗的使用，以免造成信息層級的混亂。 下圖為調(diào)整字號(hào)及粗細(xì)的前后對比：
03.行距控制
行距太小不便于用戶閱讀，太大會(huì)顯得松散，所以控制在1.2-1.5倍的范圍是較為舒適的范圍。下圖為調(diào)整行距的前后對比：
04.字體顏色
字體主要以黑白灰為主：#333333?#666666?#999999；字體顏色深淺有序能讓信息層級主次分明，產(chǎn)品應(yīng)該根據(jù)不同模塊以及同一模塊的層級需要調(diào)整不同的灰度值，并在產(chǎn)品中反復(fù)使用，統(tǒng)一規(guī)范輸出。
信息越重要，字體顏色越深。除此之外我們還需要注意到什么呢？也是很多剛?cè)胄械脑O(shè)計(jì)小伙伴很容易忽略的細(xì)節(jié)，產(chǎn)品的實(shí)際使用環(huán)境。比如，我們此次改版的產(chǎn)品詳情界面就是線上下單，線下提貨的運(yùn)營模式，不僅需要考慮室內(nèi)使用環(huán)境，還需要考慮到特殊的室外強(qiáng)光環(huán)境。結(jié)合下圖感受一下。
如何在強(qiáng)光環(huán)境下保證產(chǎn)品良好的視覺體驗(yàn)?zāi)?？這也是UI走查表需要注意到的細(xì)節(jié)點(diǎn)：強(qiáng)光測試(大于4.5:1)。
4.5：1經(jīng)驗(yàn)數(shù)值參考前輩行業(yè)經(jīng)驗(yàn)總結(jié)：
https://www.sitepoint.com/making-bootstrap-accessible/
我們先觀察一組顏色對比，如下圖：
我們會(huì)發(fā)現(xiàn)字體顏色層級依然是深黑色、中黑色、淺黑色，相信很多設(shè)計(jì)師朋友已經(jīng)注意到我們使用的顏色更深了，為什么呢？為了保證好在強(qiáng)光環(huán)境下的信息閱讀可閱讀性，如下圖：字體信息最淺層級，淺黑色的色彩數(shù)值對比數(shù)值都大于4.5:1。
強(qiáng)光測試鏈接：https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF
有細(xì)心的設(shè)計(jì)師朋友或許已經(jīng)注意到色彩值并沒#333/#666/#999那么便于記憶了，為什么呢？
為了提升更好的視覺感受與界面的品質(zhì)感，我們在字體顏色中采用了偏藍(lán)灰，至于為什么，大家不防給我一起觀察下圖，上圖灰色看上去略微有一些臟臟的感覺，下圖視覺更耐看、更有質(zhì)感。
騰訊新聞、金色財(cái)經(jīng)App中的也應(yīng)用到了偏藍(lán)灰，帶來種撲面而來的清爽。
除了常用字體層級的顏色對比，在界面中針對關(guān)鍵的賣點(diǎn)信息還用到強(qiáng)調(diào)色，即品牌色
品牌色也會(huì)經(jīng)常運(yùn)用到特殊字體、提示文字、鏈接等等。
改版前，促銷信息缺少提示入口；改版后，以品牌色作為入口字體顏色，引起用戶注意。
01.視覺比例
由于圖標(biāo)通常都是成群結(jié)對的出現(xiàn)，彼此之際的統(tǒng)一性顯得非常重要，但是常常容易被忽略，可以制定如下圖的圖標(biāo)盒子來規(guī)范尺寸。
02.圖標(biāo)設(shè)計(jì)要點(diǎn)
設(shè)計(jì)圖標(biāo)時(shí)應(yīng)注意基礎(chǔ)形狀復(fù)用，保持整體識(shí)別性。如下圖重復(fù)使用矩形、圓形、橢圓形等基礎(chǔ)形狀進(jìn)行設(shè)計(jì)，既能統(tǒng)一大小又有整體感。
面性圖標(biāo)
設(shè)計(jì)時(shí)需要注意挖空比例的一致性，保持圖標(biāo)的整體性。如價(jià)格走勢、降價(jià)通知這一排圖標(biāo)，挖空比例控制在20%
線性圖標(biāo)
設(shè)計(jì)時(shí)應(yīng)注意保持良好的線條粗細(xì)的統(tǒng)一，案例中使用2px的粗細(xì)線條重復(fù)使用，所有圖標(biāo)的粗細(xì)與文字粗細(xì)一致，和諧統(tǒng)一
03.圖標(biāo)尺寸
在app中，功能圖標(biāo)大致可分成兩種：可以點(diǎn)擊的按鈕；不可點(diǎn)擊的展示圖標(biāo)。
可以點(diǎn)擊的按鈕常用于導(dǎo)航欄、tab欄、操作欄（吸底按鈕圖示）常用尺寸為：48x48px 64x64px。如下如的導(dǎo)航和吸底按鈕都用了48x48px的大小。
不可點(diǎn)擊的展示圖標(biāo)常用于信息展示位置（價(jià)格走勢/規(guī)格/評論等圖示）常用尺寸為：24x24px 32x32px，如下圖，評論模塊中的展示圖標(biāo)使用24x24px，價(jià)格走勢則使用了32x32px的尺寸。
04.標(biāo)簽的走查規(guī)范
從商業(yè)的角度，標(biāo)簽是為了凸顯產(chǎn)品賣點(diǎn)，比如你在商場時(shí)常能看到“全場低至2.9折”這類的促銷信息，其實(shí)在界面中同樣也會(huì)有，目的就是為了抓住用戶貪小便宜的消費(fèi)心理，對比沒有標(biāo)簽的同類商品，用戶會(huì)更佳傾向與有有標(biāo)簽的商品。
常用標(biāo)簽樣式有三種表現(xiàn)樣式，面性：填充一整個(gè)色塊；線面結(jié)合：低飽和度的色塊結(jié)合高飽和度的描邊；線性描邊：1px粗細(xì)描邊；
如上圖：為展示清楚，在原來基礎(chǔ)上放大了1倍，運(yùn)用規(guī)則與之前提到的圖標(biāo)一樣，根據(jù)模塊功能的重要性去搭配，按照重要到次要的排序是：面性>線面>線性
標(biāo)簽呼吸感規(guī)律：
很多初級設(shè)計(jì)師都在疑惑到底標(biāo)簽文字定多大合適呢？標(biāo)簽字號(hào)一般為：18-22px
以"自營"標(biāo)簽為例
如上圖：外框邊距橫縱向成2倍的倍數(shù)關(guān)系，所以以后在畫標(biāo)簽，只要先定好字號(hào)大小，剩下的邊框邊距就按照2倍的關(guān)系去拓展
為了確保我們做視覺稿的時(shí)候易于文本的閱讀我們通常會(huì)用到一些配圖，而這些配圖通常也影響著我們整個(gè)界面的美觀度，一個(gè)優(yōu)秀的設(shè)計(jì)師在設(shè)計(jì)作品時(shí)都會(huì)特別的注重圖形與圖象的比例，圖片的選取當(dāng)然也是重中之重，那么我們在項(xiàng)目中應(yīng)該如何選取圖片并且正確的使用圖片的比例呢？
01.圖片使用的規(guī)范
第一點(diǎn)：首先就是要做到讓圖片的背景保持統(tǒng)一并且做到干凈整潔
第二點(diǎn)：圖片主體的比例大小跟其他圖片保持統(tǒng)一避免出現(xiàn)有些圖片展示局部有些圖片展示整體
02.圖片模塊的常用使用比例
UI設(shè)計(jì)中圖片的比例會(huì)比較的多常用的有下列幾種
1：1，這種比例比較適用于電商，它可以讓商品圖片展示最大化。也是目前電商最主流的圖片使用尺寸。如下圖：
16：9，這種比例比較適用于視頻，這是標(biāo)準(zhǔn)的人體工程學(xué)比例，根據(jù)人體工程學(xué)家的研究發(fā)現(xiàn)人的兩只眼睛的視野范圍并不是方的，而是一個(gè)長寬比例為16：9的長方形，所以我們看到的視頻比例通常會(huì)采用16：9。如下圖：
4：3，這種比例應(yīng)用于新聞?lì)怉PP比較的多，它源自于一些微小型相機(jī)最原始的尺寸比例，不需要進(jìn)行過多比例的裁剪，應(yīng)用起來比較方便，對于需要展示大量的圖片信息類的產(chǎn)品來說特別的適用。如下圖：
如果你還是不知道如何去使用尺寸，那么你可以直接查找相關(guān)競品進(jìn)行設(shè)計(jì)。
壓軸給大家?guī)硪粋€(gè)小驚喜，我們整理了一個(gè)較為完整的設(shè)計(jì)走查表，希望在實(shí)踐中能夠幫到大家。
藍(lán)設(shè)計(jì)( www.bouu.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ā)到您的郵箱中， 請點(diǎn)這里
點(diǎn)贊設(shè)計(jì)的分享！
藍(lán)設(shè)計(jì)( www.bouu.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.bouu.cn