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

隨著時間的推移，設計師們在色彩的使用上更加大膽，更加有策略。有時，色彩用來突出某個元素，有時用來講好一個故事，有時用來強化品牌的輸出。今天我們就來舉幾個例子。

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

下面這個設計來自Root工作室，使用黃色背景來突出切斯特動物園的案例研究。黃色背景設定了這個案例研究的基調。當然了，并不是所有的案例都使用像切斯特動物園黃色這樣鮮艷的顏色，因為這個案例的設計是極簡風格，并沒有需要特別突出的內容，所以鮮艷背景恰到好處。

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

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

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

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

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

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

因為這個設計是一個很長的頁面，顏色有助于講述每個部分的故事。

有時，顏色是專門用來給設計增添趣味性的。為了更有效的使用色彩，有時大膽的顏色并不一定要在設計的前面和中心。

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

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

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

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

最后一個例子是Goulburn山谷的網站。他們的品牌使用了一些不同尋常的顏色，不過整個設計看起來不錯。

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

總結

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

最重要的是，顏色有助于塑造個性，尤其是品牌形象。當網頁設計趨勢發(fā)生變化時，網頁設計中色彩的使用只會變得越來越好。

作為一名專業(yè)的UI設計，其實工作職責無外乎包括界面設計、圖標設計、動效設計、切片與標注等。

話說回來，所謂「認真分析」，也是有法可依、有據可循的。今天就給大家復盤下，身為產品經理，最需要掌握的四大分析法，都如何來做。 

一、市場分析

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

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

二、競品分析

三、用戶分析

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

四、需求分析

什么人，在什么場景下，為了達到什么目的，在遇到什么問題的情況下，希望采用什么方法來解決。

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

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

相信很多體驗設計師在與產品需求方進行設計提案的時候會遇到這樣的情景：

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

但是哦，這個時候，你還是會感覺沒底氣說出這句話來。

于是你最后說出一句妥協(xié)的話“好的好的，我回去改一下。”（各位老板我都聽你們的，你們說啥就是啥）

專業(yè)度呢？設計價值呢？你的玻璃心要碎了：死了產品經理們會不會覺得自己很水很不專業(yè)。

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

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

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

最近在做手機OS的主題圖標，對細節(jié)的感觸很大，今天結合主題圖標來和大家聊聊，我們可以從哪些方面注意自己的設計細節(jié)，大綱如下：

• 給造型加點細節(jié)
• 多加點質感的細節(jié)
• 不要讓圖標看著灰灰的
• 風格特點的運用

1. 給造型加點細節(jié)

造型是所有設計執(zhí)行的第一步，造型做不好，說別的都沒用。

那如何能給造型加點細節(jié)呢？

打個比方，我們要畫一個圓角矩形：

如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

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

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

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

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

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

案例一：重復利用的物流單號

如果你在天貓有過退貨經驗就會知道，申請退貨并得到商家確認后，需要填寫退貨的物流單號，當商家收貨后才會把錢退給你。這里有個奇妙的問題，設計上是否允許多個用戶填寫同一個退貨單號？

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

極端情況體現(xiàn)在，許多商家的店鋪與倉儲是分開的，當倉庫收到A寄來的手機并確認收貨后，店鋪工作人員收到系統(tǒng)通知兩個退貨流程都已收貨（其實是同一個單號），若不進行額外確認，就會把錢都退回去了。

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

錯誤的設計方法是這樣的：用戶填寫退貨單號時，新增一個流程詢問用戶該單號是否只關聯(lián)了一個訂單，訂單號是多少；或者在原有基礎上新增一個聯(lián)合退貨的功能，讓多個用戶合伙拼單退貨。

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

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

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

天貓客戶端的商品詳情頁中，當點擊“收藏”按鈕會有一個 Toast 告訴用戶“收藏成功”，同樣當點擊“加入購物車”后，也會有 Toast 告訴用戶“加入成功”。這樣看好像沒什么問題，但若用戶點完“收藏”后馬上點擊“加入購物車”，就會出現(xiàn)兩個 Toast 相互沖突的情況——視覺上互相重疊，或后一個 Toast 無法出現(xiàn)。再極端一點，如果出現(xiàn)了一個腦殘用戶，為了測試反復快速點擊兩個按鈕，甚至會導致代碼錯誤。

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

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

案例三：神出鬼沒的 Loading

我們在客戶端上做了一個比較酷的動畫，對一個模塊長按后可以彈出一張卡片，并在卡片中閱讀一些詳情（有點像 3D Touch）。問題在于，彈出卡片中的信息是觸發(fā)卡片后才向服務器請求數(shù)據并加載的，正常情況下沒有問題，但是弱網條件下，數(shù)據加載可能會花費不少時間。為此，第一版我們?yōu)檫@個數(shù)據請求設計了一個 Loading 的小動畫（好吧，你就當是轉菊花）。

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

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

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

這樣，我們保證了正常用戶的正常體驗，避免他們每一次操作都為弱網這一極端情況買單。同時，也保障了弱網用戶的體驗。

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

藍藍設計( m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

Facebook 設計副總裁有個問答欄目，今天的問題是：對于設計師來說，什么才代表著成功？在這篇譯文里，她分享了自己的觀點。