設(shè)計(jì)師的知識(shí)管理體系怎么建立？只需4個(gè)步驟，實(shí)現(xiàn)能力價(jià)值提升 

在生活中，不管是瀏覽網(wǎng)頁(yè)還是使用APP，我們都能看到色彩是其中重要的設(shè)計(jì)元素。每一年我們都能看到很多“流行趨勢(shì)預(yù)測(cè)”之類的文章，而這些流行趨勢(shì)里無(wú)一不包含色彩。

隨著時(shí)間的推移，設(shè)計(jì)師們?cè)谏实氖褂蒙细哟竽?，更加有策略。有時(shí)，色彩用來(lái)突出某個(gè)元素，有時(shí)用來(lái)講好一個(gè)故事，有時(shí)用來(lái)強(qiáng)化品牌的輸出。今天我們就來(lái)舉幾個(gè)例子。

幾年前有一個(gè)很流行的趨勢(shì)是采用大膽的背景，現(xiàn)在還是能看到很多例子。在一個(gè)好的設(shè)計(jì)里，豐富多彩的背景能夠讓某一區(qū)域成功吸引注意力。不管你認(rèn)為流行趨勢(shì)是什么，不可否認(rèn)的是，好的背景色能讓一個(gè)部分脫穎而出。

下面這個(gè)設(shè)計(jì)來(lái)自Root工作室，使用黃色背景來(lái)突出切斯特動(dòng)物園的案例研究。黃色背景設(shè)定了這個(gè)案例研究的基調(diào)。當(dāng)然了，并不是所有的案例都使用像切斯特動(dòng)物園黃色這樣鮮艷的顏色，因?yàn)檫@個(gè)案例的設(shè)計(jì)是極簡(jiǎn)風(fēng)格，并沒(méi)有需要特別突出的內(nèi)容，所以鮮艷背景恰到好處。

接下來(lái)這個(gè)例子是Mambo Mambo，它使用色彩來(lái)突出組合的不同部分。有些部分是霓虹黃色，有些是深藍(lán)，有些甚至是黑色。在截圖中，我們可以看到，霓虹黃色與綠色搭配，藍(lán)色和膚色搭配，看起來(lái)非常和諧。

在整個(gè)頁(yè)面中，正是這些背景色的使用使不同部分都變得獨(dú)特而有趣。同時(shí)呢，也起到了品牌宣傳的效果。

顏色運(yùn)用得當(dāng)可以更好地突出想要突出的部分。讓我們從優(yōu)步手語(yǔ)登錄頁(yè)面開(kāi)始，橙色的漸變背景肯定會(huì)吸引用戶的注意力。這是一個(gè)很棒的設(shè)計(jì)策略，因?yàn)檫@個(gè)頁(yè)面的目的就是教人們基本的手語(yǔ)，很大程度上是依賴視覺(jué)線索實(shí)現(xiàn)的。

接下來(lái)是Kickpush 設(shè)計(jì)工作室的頁(yè)面。看圖上的文字我們就知道，Kickpush希望展示自己與眾不同的個(gè)性。這個(gè)配色方案的選擇就很有目的性，將Kickpush的個(gè)性快速直觀地表達(dá)出來(lái)了。

色彩有助于講好一個(gè)故事，Bloom的主頁(yè)就是個(gè)很好的例子。在整個(gè)設(shè)計(jì)中，他們使用的是同樣的電子藍(lán)。相同的配色與其他視覺(jué)元素一起，幫助用戶從頁(yè)眉滾動(dòng)到頁(yè)腳。如果所有不同的部分都有不同的主色，那么故事的完整性就會(huì)被打破了。

對(duì)于Adobe的營(yíng)銷云登錄頁(yè)面，效果也是差不多的。整個(gè)設(shè)計(jì)是一個(gè)很大的版面，每個(gè)部分都有自己的配色方案，從最頂部的淺藍(lán)色一直到最底部的深紫色。我們可以看到，整個(gè)配色不僅僅是純的UI顏色，照片選用的色調(diào)也與每一種背景色相配。

因?yàn)檫@個(gè)設(shè)計(jì)是一個(gè)很長(zhǎng)的頁(yè)面，顏色有助于講述每個(gè)部分的故事。

有時(shí)，顏色是專門(mén)用來(lái)給設(shè)計(jì)增添趣味性的。為了更有效的使用色彩，有時(shí)大膽的顏色并不一定要在設(shè)計(jì)的前面和中心。

例如，Designmodo自己的Qards著陸頁(yè)面使用了各種各樣的小色塊，從而使得登陸頁(yè)看起來(lái)更令人愉快。

強(qiáng)化品牌，我認(rèn)為這是色彩最有力的作用了，當(dāng)然了，我不是指上文中Kickpush 或是Bloom那種使用大塊背景色的方式，而是批判性的、策略性的使用顏色。

我們很多人都見(jiàn)證了Asana的改版，在新版本中加入了不少顏色。在網(wǎng)站的某些部分，顏色被大量地使用，而在其他部分則不是那么多，這是為了在總體上實(shí)現(xiàn)平衡。Asana選用的顏色多變而充滿活力，搭配的也非常好。現(xiàn)在，Asana的品牌色彩由亮粉色，橙色和紫色組成，充滿活力。可以說(shuō)，顏色策略似乎是Asana品牌定位的關(guān)鍵。

Stripe公司的策略也差不多，使用相鄰顏色之間的漸變，比如藍(lán)色和綠色，這可能是這種顏色使用的一個(gè)大趨勢(shì)。品牌整體上是藍(lán)色，同時(shí)也包含綠色、粉色、紫色和橙色。這么多顏色共同配合，增強(qiáng)了Stripe公司的品牌影響力。

最后一個(gè)例子是Goulburn山谷的網(wǎng)站。他們的品牌使用了一些不同尋常的顏色，不過(guò)整個(gè)設(shè)計(jì)看起來(lái)不錯(cuò)。

登錄頁(yè)面中使用的顏色和照片中的截圖是一樣的：綠色略帶橙色。由于照片中色彩的協(xié)調(diào)，整個(gè)著陸頁(yè)都很流暢。

總結(jié)

無(wú)論是Asana，用顏色創(chuàng)造更好的品牌；還是Kickpush，使用明亮的紅色背景突出內(nèi)容，讓用戶意識(shí)到它的與眾不同，我們看到了顏色在網(wǎng)站中的戰(zhàn)略性意義。

最重要的是，顏色有助于塑造個(gè)性，尤其是品牌形象。當(dāng)網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)發(fā)生變化時(shí)，網(wǎng)頁(yè)設(shè)計(jì)中色彩的使用只會(huì)變得越來(lái)越好。

作為一名專業(yè)的UI設(shè)計(jì)，其實(shí)工作職責(zé)無(wú)外乎包括界面設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、動(dòng)效設(shè)計(jì)、切片與標(biāo)注等。

話說(shuō)回來(lái)，所謂「認(rèn)真分析」，也是有法可依、有據(jù)可循的。今天就給大家復(fù)盤(pán)下，身為產(chǎn)品經(jīng)理，最需要掌握的四大分析法，都如何來(lái)做。 

一、市場(chǎng)分析

• 從行業(yè)角度，要看行業(yè)有沒(méi)有發(fā)展，市場(chǎng)規(guī)模大不大，政策好不好；
• 從用戶角度，要看市場(chǎng)中的用戶習(xí)慣、用戶構(gòu)成、用戶期望；
• 從自身角度，要認(rèn)清在市場(chǎng)中自己的優(yōu)勢(shì)劣勢(shì)，遇到的挑戰(zhàn)等。

• 搜集相關(guān)資料，包括宏觀經(jīng)濟(jì)、行業(yè)競(jìng)爭(zhēng)、技術(shù)趨勢(shì)、市場(chǎng)階段、市場(chǎng)規(guī)模等；
• 分析市場(chǎng)用戶基本情況；
• 分析自身基本情況。

二、競(jìng)品分析

三、用戶分析

• 避免出現(xiàn)誘導(dǎo)用戶選擇的選項(xiàng)，比如：如果給你提供一個(gè)XX功能，你會(huì)不會(huì)用。
• 避免出現(xiàn)無(wú)法理解的專業(yè)術(shù)語(yǔ)，比如：你是否希望我們的產(chǎn)品采用個(gè)性化推薦算法分發(fā)內(nèi)容。
• 避免出現(xiàn)容易引起歧義的模糊詞語(yǔ)，比如：你使用社交電商產(chǎn)品頻率是多少。
• 避免出現(xiàn)需要讓用戶思考的問(wèn)題，比如：你每周共花多少錢(qián)買(mǎi)我們的產(chǎn)品。
• 避免直接出現(xiàn)產(chǎn)品名稱，比如：你覺(jué)得像喜馬拉雅、得到這樣的知識(shí)付費(fèi)產(chǎn)品能解決你的問(wèn)題么。

四、需求分析

什么人，在什么場(chǎng)景下，為了達(dá)到什么目的，在遇到什么問(wèn)題的情況下，希望采用什么方法來(lái)解決。

通過(guò)貼近業(yè)務(wù)和產(chǎn)品運(yùn)營(yíng)團(tuán)隊(duì)深入的交流，有助于我們盡快融入一個(gè)不熟悉的領(lǐng)域，同時(shí)可以閱讀一些專業(yè)行業(yè)網(wǎng)站上關(guān)于進(jìn)口業(yè)務(wù)的文章，了解大盤(pán)的背景。在進(jìn)口業(yè)務(wù)中通過(guò)背景的挖掘，我們發(fā)現(xiàn)在商品和供應(yīng)鏈層面上，進(jìn)口有一些特有的特征與其他業(yè)務(wù)不同，差異的地方其實(shí)往往就是用戶的痛點(diǎn)和后面我們發(fā)力的機(jī)會(huì)點(diǎn)。

將會(huì)員全鏈路場(chǎng)景中的服務(wù)觸點(diǎn)進(jìn)行統(tǒng)一的感知設(shè)計(jì)，并在服務(wù)中為用戶傳遞一致的體感，此所謂通感。 將升級(jí)帶來(lái)的行為變化用數(shù)據(jù)反映出來(lái)，結(jié)合數(shù)據(jù)去調(diào)整設(shè)計(jì)表現(xiàn)，通過(guò)設(shè)計(jì)迭代再次影響用戶的行為，最終與用戶在認(rèn)知方面達(dá)成共識(shí)。此乃通識(shí)。

相信很多體驗(yàn)設(shè)計(jì)師在與產(chǎn)品需求方進(jìn)行設(shè)計(jì)提案的時(shí)候會(huì)遇到這樣的情景：

• 你闡述自己的設(shè)計(jì)推導(dǎo)過(guò)程，從產(chǎn)品目標(biāo)分析、問(wèn)題定位、設(shè)計(jì)目標(biāo)分析、設(shè)計(jì)思路闡述這樣的推導(dǎo)下來(lái)，在場(chǎng)的產(chǎn)品經(jīng)理們都點(diǎn)頭，表達(dá)認(rèn)可。
• 但是！當(dāng)?shù)搅嗽O(shè)計(jì)方案環(huán)節(jié)，你把方案放出來(lái)，各位就七嘴八舌挑戰(zhàn)了：￥#@%&*&*
• 這時(shí)候經(jīng)常會(huì)聽(tīng)到這樣一句話：“有沒(méi)有其他更好的方案?。俊?
• 這時(shí)候你是不是會(huì)想，我前面的推導(dǎo)和演繹過(guò)程那么完美那么富含邏輯，推導(dǎo)的肯定是最好的方案啦！

但是哦，這個(gè)時(shí)候，你還是會(huì)感覺(jué)沒(méi)底氣說(shuō)出這句話來(lái)。

于是你最后說(shuō)出一句妥協(xié)的話“好的好的，我回去改一下?！保ǜ魑焕习逦叶悸?tīng)你們的，你們說(shuō)啥就是啥）

專業(yè)度呢？設(shè)計(jì)價(jià)值呢？你的玻璃心要碎了：死了產(chǎn)品經(jīng)理們會(huì)不會(huì)覺(jué)得自己很水很不專業(yè)。

怎么辦？這就是今天想聊聊的主題：“思維框架”理論，讓我們更好地決策和解決問(wèn)題。

不知道大家有沒(méi)有這樣的情況發(fā)生，自己設(shè)計(jì)的作品，“乍一看不怎么樣，仔細(xì)一看，還不如乍一看”！

其實(shí)不耐看，或者不敢放大看的原因都是細(xì)節(jié)做的不到位。

最近在做手機(jī)OS的主題圖標(biāo)，對(duì)細(xì)節(jié)的感觸很大，今天結(jié)合主題圖標(biāo)來(lái)和大家聊聊，我們可以從哪些方面注意自己的設(shè)計(jì)細(xì)節(jié)，大綱如下：

• 給造型加點(diǎn)細(xì)節(jié)
• 多加點(diǎn)質(zhì)感的細(xì)節(jié)
• 不要讓圖標(biāo)看著灰灰的
• 風(fēng)格特點(diǎn)的運(yùn)用

1. 給造型加點(diǎn)細(xì)節(jié)

造型是所有設(shè)計(jì)執(zhí)行的第一步，造型做不好，說(shuō)別的都沒(méi)用。

那如何能給造型加點(diǎn)細(xì)節(jié)呢？

打個(gè)比方，我們要畫(huà)一個(gè)圓角矩形：

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

很多設(shè)計(jì)中，我們付出20%的精力就可以應(yīng)付80%的 Normal Case，而剩下20%的 Special Case 卻會(huì)花費(fèi)我們80%的精力。換言之，普通情況誰(shuí)都會(huì)處理，而為了應(yīng)對(duì)一些少數(shù)派，我們將要付出更多。

Loading 失敗時(shí)的錯(cuò)誤提醒、搜索無(wú)少結(jié)果時(shí)的空白頁(yè)面、打了車卻沒(méi)車接單……除了這正常流程下的失敗反饋以外，最耗時(shí)間的是那些特殊流程或所有情況同時(shí)在一個(gè)頁(yè)面堆砌出現(xiàn)的情況。

在設(shè)計(jì)前期，我們就應(yīng)該盡可能地羅列特殊情況，即便它們出現(xiàn)的概率很低，也應(yīng)留足設(shè)計(jì)時(shí)間。而應(yīng)對(duì)非常規(guī) Case 時(shí)，有一條原則幫了我很多次：

確保多數(shù)人體驗(yàn)的前提下，才去解決少數(shù)人的問(wèn)題。

這不是說(shuō)要為了多數(shù)人放棄少數(shù)人，還是造例子來(lái)說(shuō)吧。

案例一：重復(fù)利用的物流單號(hào)

如果你在天貓有過(guò)退貨經(jīng)驗(yàn)就會(huì)知道，申請(qǐng)退貨并得到商家確認(rèn)后，需要填寫(xiě)退貨的物流單號(hào)，當(dāng)商家收貨后才會(huì)把錢(qián)退給你。這里有個(gè)奇妙的問(wèn)題，設(shè)計(jì)上是否允許多個(gè)用戶填寫(xiě)同一個(gè)退貨單號(hào)？

先來(lái)看看如果允許，會(huì)出現(xiàn)什么非常規(guī)情況：消費(fèi)者AB兩人各自在同一個(gè)商家C處購(gòu)買(mǎi)了兩臺(tái) iPhone，并且商量好分別發(fā)起七天無(wú)理由退貨流程，商家C均同意。然后，消費(fèi)者A先將手機(jī)按要求寄出，獲取物流單號(hào)一個(gè)后填寫(xiě)到退貨系統(tǒng)；同時(shí)，消費(fèi)者B直接使用消費(fèi)者A的退貨單號(hào)填入系統(tǒng)，但不寄送自己的手機(jī)。

極端情況體現(xiàn)在，許多商家的店鋪與倉(cāng)儲(chǔ)是分開(kāi)的，當(dāng)倉(cāng)庫(kù)收到A寄來(lái)的手機(jī)并確認(rèn)收貨后，店鋪工作人員收到系統(tǒng)通知兩個(gè)退貨流程都已收貨（其實(shí)是同一個(gè)單號(hào)），若不進(jìn)行額外確認(rèn)，就會(huì)把錢(qián)都退回去了。

再來(lái)看不允許重復(fù)填寫(xiě)同一個(gè)物流單號(hào)的情況：很簡(jiǎn)單，AB兩個(gè)消費(fèi)者是好人，但希望節(jié)省快遞費(fèi)，就商量好把兩個(gè)手機(jī)放在一個(gè)包裹里寄回。此時(shí)若規(guī)則只允許一個(gè)單號(hào)只能填寫(xiě)一次，這種做法就無(wú)法實(shí)現(xiàn)。

錯(cuò)誤的設(shè)計(jì)方法是這樣的：用戶填寫(xiě)退貨單號(hào)時(shí)，新增一個(gè)流程詢問(wèn)用戶該單號(hào)是否只關(guān)聯(lián)了一個(gè)訂單，訂單號(hào)是多少；或者在原有基礎(chǔ)上新增一個(gè)聯(lián)合退貨的功能，讓多個(gè)用戶合伙拼單退貨。

正確的設(shè)計(jì)方法是這樣的：消費(fèi)者端流程全部不變，允許重復(fù)填寫(xiě)物流單號(hào)，但必須在后臺(tái)記錄一條單號(hào)被使用的次數(shù)。對(duì)于被多次填寫(xiě)的單號(hào)，在商家端告知商家須額外注意，一定與倉(cāng)庫(kù)確認(rèn)好包裹內(nèi)物品再進(jìn)行退款操作。

錯(cuò)誤方法的錯(cuò)誤原因很簡(jiǎn)單，我們不能為了一些極端情況就去修改主流程，也不能為了少數(shù)人的需求就影響所有正常用戶。

案例二：互相沖突的 Toast 提醒

天貓客戶端的商品詳情頁(yè)中，當(dāng)點(diǎn)擊“收藏”按鈕會(huì)有一個(gè) Toast 告訴用戶“收藏成功”，同樣當(dāng)點(diǎn)擊“加入購(gòu)物車”后，也會(huì)有 Toast 告訴用戶“加入成功”。這樣看好像沒(méi)什么問(wèn)題，但若用戶點(diǎn)完“收藏”后馬上點(diǎn)擊“加入購(gòu)物車”，就會(huì)出現(xiàn)兩個(gè) Toast 相互沖突的情況——視覺(jué)上互相重疊，或后一個(gè) Toast 無(wú)法出現(xiàn)。再極端一點(diǎn)，如果出現(xiàn)了一個(gè)腦殘用戶，為了測(cè)試反復(fù)快速點(diǎn)擊兩個(gè)按鈕，甚至?xí)?dǎo)致代碼錯(cuò)誤。

為了追求設(shè)計(jì)和代碼邏輯的嚴(yán)密，我和開(kāi)發(fā)同學(xué)花費(fèi)了不少時(shí)間討論對(duì)于這種極端情況，要如何設(shè)置 Toast 的出現(xiàn)和沖突機(jī)制。甚至為了應(yīng)對(duì)極端情況，還需要調(diào)整 Toast 出現(xiàn)消失的動(dòng)畫(huà)過(guò)程與邏輯。但最后，我只設(shè)置了2個(gè) Toast 在極短時(shí)間內(nèi)前后觸發(fā)的交互，也就是新的 Toast 慢慢把舊的推上去，并各自做淡入淡出動(dòng)畫(huà)——畢竟兩次短促的操作是比較可能會(huì)發(fā)生的。

什么？你問(wèn)我那個(gè)腦殘用戶怎么辦？不好意思，為了滿足所有正常用戶的訴求，腦殘用戶的體驗(yàn)就只好先放一放了……

案例三：神出鬼沒(méi)的 Loading

我們?cè)诳蛻舳松献隽艘粋€(gè)比較酷的動(dòng)畫(huà)，對(duì)一個(gè)模塊長(zhǎng)按后可以彈出一張卡片，并在卡片中閱讀一些詳情（有點(diǎn)像 3D Touch）。問(wèn)題在于，彈出卡片中的信息是觸發(fā)卡片后才向服務(wù)器請(qǐng)求數(shù)據(jù)并加載的，正常情況下沒(méi)有問(wèn)題，但是弱網(wǎng)條件下，數(shù)據(jù)加載可能會(huì)花費(fèi)不少時(shí)間。為此，第一版我們?yōu)檫@個(gè)數(shù)據(jù)請(qǐng)求設(shè)計(jì)了一個(gè) Loading 的小動(dòng)畫(huà)（好吧，你就當(dāng)是轉(zhuǎn)菊花）。

這樣做的結(jié)果是，對(duì)于網(wǎng)絡(luò)非常流暢的用戶，他們喚起這張卡片時(shí)，會(huì)看到一個(gè)菊花飛快地閃過(guò)，然后才看到數(shù)據(jù)加載——再流暢的網(wǎng)絡(luò)下，數(shù)據(jù)也需要加載時(shí)間，哪怕是1ms，都會(huì)讓菊花快速閃爍。

當(dāng)然，不要 Loading 也明顯不合理。弱網(wǎng)條件下，必須避免用戶盯著空白的卡片發(fā)呆而不知道系統(tǒng)正在干什么。

所以，合理的做法是，為 Loading 動(dòng)畫(huà)的出現(xiàn)時(shí)間設(shè)置一個(gè)延遲：在卡片彈出的200ms內(nèi)（卡片不可能突然閃爍出現(xiàn)在用戶面前，必須有一個(gè)進(jìn)場(chǎng)過(guò)程），如果數(shù)據(jù)加載完畢，則不顯示 Loading 動(dòng)畫(huà)，直接顯示數(shù)據(jù)。如果卡片進(jìn)場(chǎng)完畢（200ms后）數(shù)據(jù)還沒(méi)回來(lái)，則開(kāi)始顯示 Loading 動(dòng)畫(huà)。

這樣，我們保證了正常用戶的正常體驗(yàn)，避免他們每一次操作都為弱網(wǎng)這一極端情況買(mǎi)單。同時(shí)，也保障了弱網(wǎng)用戶的體驗(yàn)。

最后，再總結(jié)一下我們的設(shè)計(jì)原則：確保多數(shù)人體驗(yàn)的前提下，才去解決少數(shù)人的問(wèn)題。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)