編輯導語：如今可以說是短視頻時代，各種短視頻平臺充斥著我們的娛樂生活，在如此快節奏的時代，碎片化的時間剛好可以被短視頻滿足；本文作者分享了關于短視頻【單列沉浸式】的分析，我們一起來看一下。

誰能統一短視頻領域？

抖音？快手？還是視頻號？

目前來看，這個答案是【單列沉浸式】。

準確來說，單列沉浸式不是一款產品，而是一種產品形態。

過去這一兩年，抖快兩極越發明顯，格局變化不劇烈的短視頻領域發生的一個還算比較明顯的變化是，所有的短視頻都開始在產品形態上向抖音看齊了。

包括快手、微信視頻號，甚至微博小視頻，主流的短視頻產品都已經全面擁抱單列沉浸式。

圖：抖音（左1）、快手（左2）、視頻號（左3）、微博（左4）

這是不是可以證明單列沉浸式就是短視頻消費的最佳形態？

無論是成熟的老產品快手和微博，還是初出茅廬的新產品視頻號，為什么短視頻難逃單列沉浸式的真香定律？

如果要找一個正確的角度去切入，主要包括三個維度：

• 單列沉浸式更加適合短視頻消費；
• 單列沉浸式讓用戶消費的時長增加；
• 單列沉浸式的商業化更加理想；

01

單列VS雙列，沉浸式VS非沉浸式，到底區別在哪？為什么說單列沉浸式是更加適合短視頻的消費呢？

短視頻是高度碎片化、kill time式的消費，這個消費有個非常大的特征，就是無腦，也就是用腦成本極低。

圖：系統1（左）、系統2（右）

我們在刷短視頻的時候，大部分時間是處于左邊的系統 1 狀態，是快速的、本能的、自動化、情緒化的大腦工作狀態，用腦成本低。

為什么同樣是2個小時，明明可以完整看完一部電影，很多人仍然選擇用短視頻來消費？就是因為看短視頻不需要動腦，只要被動的接受平臺投喂的多巴胺、腎上腺素和荷爾蒙，產生愉悅感就好。

長短視頻獲得的快樂自然是不一樣的，長視頻雖然也大量充斥著價值極低的內容，但普遍認為長視頻的內容價值遠遠高于短視頻；因為長視頻是比較完整、系統的去闡述，比如說長時間鋪墊后的高潮、明線暗線的多方交織、一波三折、高潮迭起的情節等；而這些更加高級的價值感都是需要大腦去思考、分攤到時間上面才有意義的。

用戶在看長視頻是相對高喚醒的狀態，在看短視頻是相對低喚醒的狀態。

單列沉浸式是更加完美的契合這種無腦狀態的，因為它的消費成本更低、體驗更好。

02

首先是單列相比較于雙列，是更加短平快的消費方式，可以減少用戶的思考、選擇和操作。

在單列中，用戶切換視頻只需要上下滑，播放完自動切換甚至無需成本；而雙列中，用戶需要返回重新選擇并點擊觀看；切換視頻的成本，雙列高于單列。

圖：單列消費路徑（左）、雙列消費路徑（右）

短視頻因為時長極短，意味著用戶在單次消費的過程中會消費非常多的內容單元，每多消費一個內容單元，雙列與單列的成本差就會進一步擴大，雙列成本相對的就越高，單列成本越低。

因為單列消費路徑短、消費成本低，在相同的時間內，單列比雙列能夠看到的視頻數就更多，效率就更高。

當然，雙列可以給用戶更多的選擇，提高系統整體的容錯率，但是這個選擇的收益本身就不大；因為短視頻價值極低，時長又極短、消費成本極低，這代表著選擇的ROI低、選錯的成本也低。

不妨將選擇的成本分攤到視頻消費時長中，長視頻因為時長很長就會比較劃算且必要性強，而短視頻因為時長極短就不劃算且必要性弱。

而且現在推薦系統越來越準，在短視頻的消費中比人的主觀選擇還要準，基本上是抹掉了選擇帶來的收益，還省了選擇的成本。

所以單列是比雙列更加適合短視頻的。

而沉浸式為什么比非沉浸式更加合適，是因為沉浸式可以使用戶更快、更好的進入視頻情境之中；而忘記真實世界的情境，因為沒有其它視頻信息的干擾，能夠讓用戶只專注于當前的視頻。

圖：可對比視頻號單列沉浸式（左）和單列非沉浸式（右）

抖音負責人張楠曾經將抖音的成功在消費端歸結為“全屏高清、音樂、個性化推薦、傳遞美好”四個因素。

全屏高清其實對應的就是沉浸式的消費體驗。

手機中的原生相機拍出來的視頻就是全屏的，如果將一模一樣的短視頻放在不同的尺寸上去看，全屏效果無論是視覺沖擊力，還是進入其中、身臨其境的感受上都是最強的。

這說明全屏高清是當時沉浸式在視頻尺寸和清晰度上體驗最好的形態，到了現在，全屏依然是最佳，清晰度卻已經變成了1080P甚至更高。

單列沉浸式的消費體驗更佳、成本更低，且非常適合短視頻這種無腦式的kill time消費，自然是最佳的消費形態。

同時，這種形態也是產品上癮的基礎之一。

03

為什么刷抖音會上癮，停不下來，一刷不知不覺就一兩個小時了？

主要的原因可以歸結為兩個，第一個是用戶持續無腦、愉悅的狀態，跟短視頻的內容有關；第二個則是因為單列沉浸式上下滑。

沉浸式的視頻構建了專注的情境，讓人忘了時間的流逝；而單列上下滑切換視頻成本極低，切換時間極為短暫，這點非常重要；因為這意味著用戶基本無縫切換視頻，無腦、愉悅的狀態不會因為切換而被打斷；上下滑簡單、不用思考，容易形成習慣，甚至是自然反應。

用戶打開抖音不知不覺就繼續看下去了，不喜歡就立即劃走，像個快樂的魔盒，沒有盡頭，自然而然就上癮了。

上癮后用戶時長也就增加了。

時長的增長可以看做是短視頻目前階段絕對的核心指標，首先是因為短視頻本來就是殺時間的利器，時長代表著一切；其次則是因為短視頻用戶數量的增長已經趨緩，只能靠爭奪時長來保持增長。

• 時長增加，代表著平臺給用戶提供的價值增加，因為幫助用戶殺的時間變多了。
• 時長增加，代表著用戶生命周期價值增加，因為可變現的時長也增加了，用戶給平臺貢獻的商業價值就變大了。
• 時長增加，也代表著打擊了競爭對手，因為時長是絕對的存量競爭，人一天24小時是固定的。

這也是為什么那些原本不是單列沉浸式的短視頻敢改版的原因，強推一個新的功能尚且要考慮用戶的舊習慣、是否接受、學習成本如何，何況這是完全另一種產品形態。

單純拿用戶體驗提高是無法有效說動的，因為沒有數據去論證用戶體驗到底提沒提高、提高了多少，大廠的產品運營都背著嚴重的KPI或OKR，但是用戶時長的增長就是最有利的支持。

04

單列沉浸式對于平臺商業化的貢獻其實可以基本從單列的角度去分析，主要有兩個層面：

NO.1 單列的變現效率遠高于雙列。

以目前最主流的信息流廣告為例。

單列比雙列消費的路徑短、成本低，同樣的時長內，單列比雙列能夠消費的視頻總數更多，也就意味著可消費的廣告更多。

更重要的是，單列的內容推薦完全由系統決定，用戶無法選擇，系統對流量可以做到100%的精準把控，決定推薦給用戶內容就內容，決定推薦給用戶廣告就是廣告；抖音可以做到讓廣告跟內容一樣100%的曝光到用戶面前，目前抖音基本上是每5個內容就插一條廣告。

雙列由于在消費路徑上，還需要用戶去選擇點擊觀看，意味著轉化路徑多了一個環節：從瀑布流的圖片封面到內容觀看的CTR轉化率。

雙列形態下，廣告的CTR是不可能達到跟內容一樣的。

據快手《2019快手創作者報告》披露，快手的內容CTR為20%，但是根據【亂翻書】對實際從業者的訪談，內容CTR和廣告CTR的差距要比想象中更大，甚至達到5-10倍的差距，也就是廣告的CTR可能只達到1%-2%。

當然，有人說雙列因為有了用戶主動選擇來表示較為明確的需求，所以理論上是可以為每個點擊收取更高的價格，類似于搜索廣告的價格遠大于展示廣告，有沒有可能正負為零，完全彌補曝光率的不足？

很大程度上是不可能。

雙列仍然是展示廣告，它跟單列的差距會在一個有限的范圍內，搜索廣告之所以點擊價高出這么多；除了明確的意圖帶來的高匹配度之外，另外一個很重要的就是搜索是比較急迫的需求，急迫的需求+高匹配度才使得搜索廣告的溢價高。

而日常我們刷抖音快手這些娛樂性質的短視頻是沒有這些急迫的需求的，是需要短視頻平臺展示的廣告來切中或者激發我們需求的；這也是為什么雙列形態下，廣告的CTR達不到跟內容一樣的原因，娛樂性的內容跟廣告的內容是不統一的，用戶的心理接受度也不會很高——用戶上來是看包袱消磨時間的，不是買買買的，而人的主觀選擇也會趨向于避免廣告。

那么單雙列展示廣告的點擊價的高低就來自于命中需求的準確程度+展示效果了，準確率由推薦系統決定，關乎算法和數據；而數據的維度是來自于非常多層面的，不僅僅只是點擊廣告的數據，所以這方面就算有差距也很難說差距多大；而展示效果的話，單列沉浸式的【大屏+視頻】的展示效果遠高過雙列下的【小屏+圖片】。

所以很可能的結果是，單列和雙列的廣告點擊價之差在一個合理的范圍內，是很難完全抵消掉內容和廣告CTR的差距的。

這樣綜合來看，單列的變現效率是高于雙列的。

單列不僅增加了用戶整體變現的時長，同時也提高了整體變現的效率，因為增加的變現時長不僅僅來自于新增的總用戶時長，也來自于搶奪了其它消費形態下的時長；比如說快手的單列會搶奪雙列的時長，而因為單列變現效率比雙列高，所以也提升了變現時長在用戶消費總時長中的比例，提高了整體的變現效率。

05

NO.2 單列雙列會造成不同的內容生態，影響到公域和私域的強弱，進而影響到平臺的整體變現效率。

單列相較會強內容、弱關系，因為單列完全是系統推薦什么看什么，容錯率低，系統往往就傾向于推薦頭部優質的內容；而雙列就弱內容、強關系，因為雙列除了系統推薦之外，還要用戶主動選擇，加強了整體的容錯率，所以系統推薦的內容就會更加多元。

相較而言，前者私域弱、公域強，后者私域強、公域弱，而公域強才有利于平臺變現。

公域強意味著平臺對于流量的掌控權，快手老員工就在內部信中提到：

雙列下kol的私域流量粘性太高太強勢，很不利于我們把用戶的arpu（每用戶平均收入）持續做高(直播電商雖然現在勢頭很好，但本質是kol的私域流量太強，所以我們公域的短視頻推小店效果不好)，那么今年流量分配也要重新調整……

私域強是有利于平臺創作者，公域強才能肥了平臺自身，淘寶、拼多多和美團等超大型交易平臺之所以收入這么高都是因為強公域，更好的掌握了流量的分發權，進而更的變現；抖音之所以成為超級印鈔機，也是因為完全掌握了流量分發，公域能力極強。

單列可以將流量的分發權更加集中在平臺的手上，提高了平臺整體的變現效率。

或許是基于單列沉浸式在商業化上的這些優點，現在連以雙列和中視頻為主的B站都坐不住了，也開始加入單列沉浸式。

圖：B站的【單列沉浸式】

B站因為文化氛圍好、私域強，無論留存還是用戶時長都很理想，但就是整體變現效率低：雙列下信息流廣告不好變現，同時也為了文化氛圍而束手束腳。

新開一個單列沉浸式可以說是創造了新的消費場景，同時也有助于提高變現效率。但中視頻在B站的單列沉浸式的視頻中占據著比較大的比例，未必會真香。

06

短視頻之所以真香，歸根到底還是跟短視頻這種載體和消費場景密不可分。

短視頻因為沖擊強（體驗好）、消費成本低，所以非常適合碎片化、kill time式的消費。

沖擊強跟視頻這種載體有關，視頻比文字、圖片的沖擊性更強；

而消費成本低則跟時長有關，因為時長極短，所以消費成本極低，同時時間彈性也極高，又因為時長短，很難承載比較有深度、有價值的內容；再加上碎片化的消費場景，所以用腦成本極低，看短視頻大多數時候都是無腦狀態。

商業的進化必然是往體驗更好、成本更低、更加的方向去進化，單列比雙列、沉浸式比非沉浸式的體驗更好、消費成本更低，更符合短視頻碎片化、kill time式的無腦消費；

但B站的中視頻已經有點脫離了這個場景，中視頻已經可以承載一些有深度、有價值的內容，很多人在B站也并非完全是單純的kill time，而是看財經、漲知識等，需要用腦思考，消費成本也比較高。

在這個場景下，雙列的多選擇、強容錯就是有必要的，因為選擇的RIO變高了，選錯的成本也高了，所以B站做單列沉浸式未必會有短視頻這么香。

當然，B站也可以學微博，單列沉浸式只展示短視頻，無異于在內部開一個抖音，創造一個完全的短視頻產品。

具體會如何，拭目以待吧；希望對你有幫助。

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

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

完美，不是因為沒有什么可以增加，而是沒有什么可以減少。

創建美觀、可用和的UI界面需要花費時間進行設計細節的打磨，本文從視覺和情感化設計兩個方面來說說如何提升UI設計的高級感。 

1、視覺元素

在互聯網產品日趨成熟的今天，你會發現所有的App越來越像，似乎是同一套模版設計出來的產品。而這種普適化的設計會導致同質化嚴重，使得設計不精致，產品沒有氣質和品牌感。一個App設計是否精致，是否富有設計感，在于它的細節，這就意味著我們在進行設計的時候，要從細微之處著手，從多方面去鉆研如何創造出打動人心的UI設計。本節總結了12個簡單直觀的提升設計感的小細節，一起來學習。

1.1 使用顏色深淺構建層次結構

在對UI 文本進行樣式控制的時候，最常見的錯誤莫過于過度依賴字體大小差異來營造對比。單純使用字體大小對比，所營造的對比并不夠，嘗試結合色彩和字重來營造更好的對比效果。

每種顏色都有一個視覺權重，這有助于在內容中建立層次結構。通過使用顏色的深淺，為元素賦予不同的重要性。如果可以的話，你甚至可以采用兩到三種顏色：

• 主要內容使用深灰色（諸如標題，但是不要用純黑）
• 次要內容使用灰色（比如商品介紹）
• 輔助性內容采用淺灰色（比如發布日期）

類似的，在UI設計的時候，通常兩種不同的字重足以營造出優秀的層次感：

• 大多數的文本采用正常的字重（400到500，具體取決于字體）
• 對于需要強調的文字采用較重的字重（600到700，具體取決于字體）

▲主標題字重為600，其他標綠點的文字字重都為400

應當盡量不要讓正文部分字重低于400，因為這一部分字體本身尺寸已經較小，低于400會使得可讀性不佳。如果你依然需要降低字重，那么不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。

灰色文字在無彩/彩色背景下要分開處理

不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯的淡化其視覺效果的做法。

但是在彩色背景下，想要降低和背景色之間的對比，通常有兩種方法：

一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。

▲左圖設計師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色

其次當涉及長篇內容時，大面積的深色粗體字會給人一種沉重感，而且很跳躍。通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個問題，使文字更容易被識別。

1.2 統一色調

選擇一種基礎色，再調整色調和顏色深淺來增加均衡。設計時避免用過多的顏色。如果項目允許，只需使用固定的色板，通過調整基礎色的飽和度和明度，利用這種簡單的方式為設計增加一致性。

1.3 干凈的陰影

陰影是UI設計中最常見的視覺表現手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時也能增強畫面的視覺層次感。相比于采用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。

這種輕柔的陰影呈現出的干凈，增加了畫面的精致。如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會讓畫面更加扁平，讓視覺變得厚重，呈現出不精致的畫面感。

還有一種擴算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調一致，因此呈現出十分融洽的畫面感。在UI設計中，這種手法不宜過多使用，否則呈現出的各種色彩搭配會讓人眼花繚亂。

1.4 個性的圖標設計

合格的設計師能夠繪制風格統一的圖標，而優秀的設計師能夠創造風格獨特的圖標。我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時，為它的視覺表現力加入更多的創意呢？例如下面這組圖標設計，無論是在圖形上的創新，還是顏色搭配上都呈現出無與倫比的創意。

標簽欄作為一個App的全局導航起著至關重要的作用，它的設計影響著整個產品的視覺風格。通常，大多數App都是使用iOS規范的設計樣式（默認灰色，選中填充品牌色），這樣的設計太普通，太常見了。要想讓標簽欄圖標設計精致和富有個性，可以豐富每一個選中態圖標的視覺表現，例如給圖標加上背景和表情，即顯得生動有趣，又增加了用戶的好感，給人留下深刻的印象。

3D立體圖標設計是近幾年來的流行趨勢，看上去十分精致、華麗，但是看久了會讓人產生輕微的視覺疲勞，同時因其復雜的結構會增加用戶的認知成本。一般在外賣美食類應用中比較常見。

1.5 Tab的設計感

Tab是App設計中最常見的控件之一，它源自Material Design的設計規范?，F在很多iOS產品當中也開始使用這種導航欄樣式來進行設計，而原本屬于iOS規范當中的分段選擇器變得不那么常見了。

在視覺表現形式上，Tab和標簽欄同樣也分為選中態和未選態，它的設計較為簡單，通常是使用一組文字標簽，通過顏色或在標簽下加上小長條來區分兩者的狀態。因為它簡單，卻越難設計出彩，要發揮極大的設計想象力，跳脫出設計規范的限制，才能找到完美的方案。例如蝦米音樂的Tab選中態是一段音頻波線，再配合文字的大小對比，一個富有設計感又符合產品特征的Tabs就被創造出來了。

我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個絕佳的來源。從品牌形象中提取具有獨特氣質的視覺富豪作為Tab選中態的小長條，這樣就建立起視覺上的聯系，讓用戶產生由內而外的一致感受。例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設計上，既讓界面視覺，又進一步強化了用戶對品牌形象的認知。

1.6 無框設計 去繁從簡

在UI設計中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個元素的好辦法，但是它不是唯一的方法，使用過多會讓整個布局的設計感降低，或多或少都會干擾用戶瀏覽的視線，讓信息內容失去注意力，因此可以減少不必要的裝飾元素。我們可以通過以下幾個方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：

使用陰影

陰影同樣可以營造出邊界感，而且相比邊框分割線更加微妙，并不會顯得突兀，不會分散用戶的注意力。

使用不同的背景色來區分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以，你所需要做的就是在不同的區塊采用不同的背景色，并且嘗試刪除分割線，因為你根本不需要它。

增加額外的留白

創建元素之間的分離效果，并不一定要通過線框來表現，只要增加留白，讓它們分隔開就行了。通過留白和間距來實現元素分組是UI設計中的常用手法。

1.7 統一設計元素

在App中的每一個界面都有許多元素，那些同類的元素應保持統一的設計樣式。通常個人中心的標簽欄圖標是一個人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續使用。如果圖形擁有獨特的外觀，如橢圓矩形，也可以作為視覺符號的一種，延續到其他界面中，成為圖形或按鈕的外觀。這樣，整個界面就被統一的設計元素聯系起來了，給用戶始終如一的一致感。

1.8 符合產品氣質的字體

選擇符合產品氣質的字體，可以與產品的定位相吻合，傳遞給用戶正確的情感意識。雖然默認字體可以滿足大多數App 的設計需求。但會出現一個問題就是，系統字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微。例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺，換成系統字體后，整體感覺在氣勢上就變弱了很多。

1.9 第三方圖標風格統一

大多數App都支持三方登陸，他可以減輕用戶注冊的時間成本。通常是在注冊登陸頁的底部展示第三方圖標入口，這也是設計師最常忽略的內容，往往是直接將第三方圖標調整一致大小和擺放整齊位置，沒有針對它們再設計。一個設計精致的App不應漏過任何的細節，我們可以以自家App的圖標風格為依據，對第三方圖標進行優化設計。

1.10 圖片中尋找色彩

App中優美的圖文設計，能帶給用戶如沐春風的視覺享受，它非常重要。我們經?？吹轿淖织B加在圖片背景上的設計樣式，為了減少復雜圖片背景對文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優的辦法。我們可以從圖片中提取主色調用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級和富有設計感。

1.11 提高圖片質量

圖片的質量影響著整個App的格調和用戶的情緒，高品質的圖片給人愉悅的視覺享受，產生美好的聯想。而低品質的圖片會瞬間拉低App的質感。在App設計中，一張漂亮的圖片從收集到上線，需要經過裁剪，調色等過程才能被使用。即使是普通的商品圖片，我們將它摳圖后調整成統一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會變得美觀、整潔。

1.12 卡片式設計

現在的UI界面設計中，卡片式設計已經是一種非常常見的設計形式，它有利于信息分層和整合，劃分出更加清晰的組織結構，實現復雜內容的簡化處理，提高空間利用率。同時卡片式設計通常很依賴視覺元素，很強的視覺元素正是卡片式設計的一種優勢，也是提升設計品質感的良方。

2、情感化設計

心理學認為，情感是人對客觀事物是否滿足自己的需求而產生的態度體驗。只有當產品觸及到用戶的內心時，使他產生情感的變化，那么產品便不再冷冰冰，他透過眼前的東西，看到的是設計師為了他的使用體驗，對每一個魔鬼細節的用心琢磨，人們會產生愉快、喜愛和幸福的情感。情感化設計并不是轟轟烈烈，有時候僅僅一句文案、一幅插圖、一個動畫就能打動人心，使用戶獲得愉悅的使用體驗。讓設計變得高級不僅僅是視覺層面，這些簡單而美好的設計細節充滿了積極情緒，它是滿足產品的功能性和易用性之后，追求更高層次的目標。

2.1 提示性文字

語言是情感化設計最直接的利器，擬人化的對白相比冰冷的話語更能獲得用戶的好感，賦予產品的新的生命力。例如App那些push推送通知，因為用戶每天收到的PUSH實在是太多了，早已心如止水！這個時候，你就需要一條成本低、效率高的PUSH文案，去撩動用戶主子們的心。將原本對用戶的打擾變成一種逗趣，讓人看到會心一笑。

2.2 下拉刷新

下拉刷新是用戶在App使用中經常進行的操作，常見的下拉刷新設計是圖標加文字的形式，這種設計簡單、直觀，但毫無設計感，不能引發用戶任何的情緒。

下拉刷新是一種臨時狀態，豐富它的設計細節不會造成與產品界面的格格不入，相反，一個富有設計感的下拉刷新設計能讓產品獲得用戶的好感。例如uc頭條在下拉刷新時會蹦出一只奔跑的小鹿，暗示正在快馬加鞭的加載新內容，小鹿形象延續了品牌logo。作為資訊類產品，內容更新速度至關重要，奔跑的小鹿正好隱喻了這一點。用戶也在這種快樂的情緒中對產品產生好感，瞬間就讓下拉刷新變得生動有趣。

2.3 頭像設計

個人中心頁與用戶信息密切相關，用戶的虛擬形象在這里得以展現，常見的設計是一個用戶頭像加登陸文字的形式，這種默認的頭像設計無法得到用戶的認同感。

現在很多的產品已經放棄了死板的默認頭像，給用戶更多的選擇。賦予產品一些人格魅力，可以讓產品富有生命力，消除人機界面的冰冷交互，幫助用戶和產品建立友好的聯系。例如美團外賣和躺平，它們各自的身份都代表了產品的氣質和用戶的屬性，讓用戶產生一種身份的認同感。

2.4 缺省頁化解負面情緒

通常狀態是，當前頁面沒有內容或無網絡狀態下出現的頁面。常見的設計是圖標加提示文字的形式，這種簡陋的設計會給用戶心理造成很大的落差，陷入負面情緒中。情感化設計在此時就可發揮巨大的作用，它通過設計手段來減輕用戶在看到一個毫無內容的界面時所產生的挫敗感。 設計師可發揮的空間很大，根據產品屬性和品牌延展圖形，結合動效或插畫等情感化設計，可以很好的豐富頁面內容。例如躺平的空白頁呈現出一種賤萌的場景，讓用戶會心一笑，使產品充滿了趣味性。

2.5 標簽欄微動效

情感化設計變得越來越豐富，圖標設計上升至可以展示動畫效果。通過動效的使用，標簽欄切換變得不再死板。用戶在頻繁切換頁面時，不再覺得單調。精心設計的動態效果，能夠緩解用戶等待時焦躁的心情，從心理上縮短用戶等待時長，讓品牌更加深入人心。

2.6 模擬用戶行為

如果一個產品可以模擬用戶的行為，將用戶代入真實的情境中，用戶就會對產品產生深刻的認同感。例如「潮汐」會根據時間場景和季節變化，播放不同的背景音樂來營造氛圍。雨聲、雷聲、風聲、潮水聲等讓人時刻感受到身臨其境的情境。

情感化設計可以拉近用戶與產品之間的距離，在更深的層面體現出對人性的關懷，為人們帶去情感上的愉悅和感動。洞悉用戶的行為，換位思考去滿足用戶的需求，情感交流就產生了。例如當你截屏了一張圖片，打開微信對話框時就會自動顯示這張圖片，提前預知了你發截圖的需求。

再例如很多觀眾都習慣了在電影結尾等彩蛋的習慣，因為很多時候坐在影院等彩蛋卻等來沒有彩蛋的結果只能白白浪費了時間。在「淘票票」上購買電影票時，你會發現影片詳情頁會有彩蛋提醒，告知你電影是否有彩蛋且彩蛋會出現在影片的什么位置。有了這個提示信息，就不必再為了不確定的彩蛋期待浪費時間啦。

2.7 有趣的細節設計

俗話說：有趣的靈魂萬里挑一，可見有趣是可以引發交流進而讓人們產生積極的情緒。 在UI設計中，有些有趣的設計是隱形的，需要用戶自己去發現，當用戶找到這顆彩蛋時，就會獲得一份喜悅和樂趣，增強用戶對產品的探知欲。例如在電腦端打開B站的鬼畜區長按這個返回圖標10秒左右，你會打開鬼畜區的新世界(⊙o⊙)（友情提示：記得戴上耳機或調小音量）其實長按「返回」10秒后網頁下方會出現一條黑框提示「嘗試輸入字母，發現鬼畜秘密」。按照提示乖乖輸入字母就會出現鬼畜明星劃過你的屏幕！

有些有趣的設計又是顯性的，目的是讓用戶與產品引發交流從而產生積極的情緒。例如成為優酷視頻會員，不僅可以尊享豐富的影視資源，還能讓自己的ID在發彈幕時使用劇集相關角色的頭像。帶角色扮演頭像的彈幕，讓發言更有劇集代入感。這個彩蛋的設置一方面強化了會員身份的尊貴感與特權性，一方面也豐富了彈幕區的多樣化，可謂一舉兩得了。

文章來源：UI中國  作者：漂浮檸檬核Fyin印跡

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

在做設計的時候，經常會遇到一個問題，就是一個按鈕，在同一頁面的不同情況下，有時可用，有時不可用，我們到底是顯示不可用時的禁用狀態呢？還是直接隱藏這個按鈕呢？

大家還是喜歡提這種通用性問題，希望有一個說法，可以概括所有情況。但我多次說過，不存在這樣的好事，一定是具體問題具體分析的。

尤其是這個問題，想要聊透徹，得用不少例子來舉證說明，不過也可以通過總結的方式長話短說了。

禁用按鈕的使用，可以從兩個維度來分析，分別是：「無效的禁用狀態」和「有效的禁用狀態」。

無效的禁用狀態

有一種情況是，在一個頁面里，一個按鈕，可能會有幾種不同的情況存在。那人要問了，既然是一個頁面，為什么會有多種狀態同時存在的情況呢？

比如，在出行場景中，普通乘客發起訂單，司機接單后是可以發送消息的（左圖）。但是從第三方渠道來的乘客，司機是無法發送站內消息的，只能通過電話聯系乘客（右圖）。

不同渠道來的用戶，司機端的頁面會呈現不同的按鈕狀態。相同的頁面，第三方渠道來的乘客，在司機端就不需要露出消息按鈕了，這樣可以減少無效信息對司機的干擾，還可以避免司機習慣性操作帶來的無效反饋，比如點擊消息，顯示「無法發送消息」?；蛘唢@示禁用，也會影響司機的操作判斷。

從這個案例中我們可以看出，當一個按鈕在某種情況下始終無法被觸發時，就會選擇讓它直接消失，而不是呈現禁用狀態。

很多人在這類設計里會給按鈕提供一個禁用狀態，以免按鈕消失而打亂頁面布局。但是要知道，在某種情況下，按鈕無用時，無意義的展示反而會產生干擾信息，就像上面說到的那樣。

所以這里有一個結論是：禁用按鈕需要可觸發的時機，如果沒有這個時機，禁用狀態就沒有存在的必要。如果存在，那它也是一個無效的狀態。

既然是無效的，最好就不要出現了。

有效的禁用狀態

在上面的例子里，有一個前提不可忽略，那就是司機是否可以理解我們不顯示的原因。當然，司機會接受相關培訓，產品中也會有渠道標識，所以司機能夠明白頁面中存在的差異。

但在其他產品中，當狀態不同，按鈕變化無法自洽的時候，又怎么去處理呢？我們就需要通過合理的解釋來消除用戶潛在的困惑。

對于這點，比較典型的案例是在線上購物時，一件商品會有多個類型供消費者選擇，比如不同的尺寸、型號等，當其中一種類型被搶光時，這個商品依然是可見的，只是無法選擇，展示出了禁用狀態。

在這種場景中，我們不能一下子把其他無法購買的類型隱藏，因為用戶需要知道我們所有的商品類別，了解商品的全部屬性，盡管當下無法購買，但有上新的可能，用戶依然可以選擇等待，并將其加入收藏，還是會有機會促成這筆交易。而且當可選類型變多的時候，只是禁用沒有庫存的類型，可以使其他可選項保持固定的位置，有利于我們二次搜索和加購。這種場景的禁用也是暫時的，直到商品下架或者上新。

但就像我以前說過的，常常我們見多了的東西，就認為是正常的，但它并不一定好的。禁用也是這種情況。

雖然我們現在還是會在各個地方看到禁用操作，但是禁用的原由始終沒有給到用戶合理的解釋，以至于許多人見到類似的操作都是一頭霧水。所以在設計過程中，尤其要謹慎對待，盡可能的避免出現無法解釋的禁用操作。

好比淘寶的商品選擇頁面，如今也將原來的商品純禁用按鈕，替換成了「缺貨」。選擇缺貨的商品之后，按鈕會變成「提醒掌柜補貨」。

從原來的用戶單方面接收無法點擊的按鈕，到現在直觀顯示缺貨，點擊后同時提醒到商家，這樣的操作從功能角度來說是一個升級。

這就是我說的，有效與無效的禁用按鈕之間的區別。禁用不該是真的禁止使用，而是告知用戶，它如何可被使用。

小結

如果一個按鈕在不同的階段有禁用和可用的狀態顯示，那么意圖是很明顯的。比如一些活動頁面，某個按鈕的禁用狀態是倒計時，就像電影的前期宣傳，為電影的上線制造話題和熱度，來鼓勵更多人的觀看一樣。

對于按鈕來說，顯示禁用則代表它在滿足一定條件后即可擁有可點擊性，讓我們明確地了解它就在這里，未來是可操作的。按鈕也有很多的設計空間來為未來的使用做好鋪墊，特別是營銷類的活動，像是「明日 8 點可搶」、「提醒商家補貨」的按鈕文案，無一不在傳達「可用性」的信息，引導用戶持續性的關注。

但是還有一類禁用狀態只是靜默地提示，多出現在表單中，當用戶沒有完成輸入的時候則無法點擊，因為看的多了，我們就以為這是正常的。但我們都知道它仍可優化，比如，在它以禁用狀態出現時，用更為友好的方式去提醒用戶應如何激活，而不是漆黑一片，且完全不知道它所存在的意圖。

我們要知道的是，禁用按鈕本身不是一個特殊的對象，只是禁用狀態在頁面中是一個特殊的存在，它是產品設計中的一種規則。為什么按鈕不可用，或者說一定場景下為什么功能不可用，當無法依靠用戶直覺理解的時候，是需要作出解釋的，也就是怎么禁的問題。

但是最開始設計時就應該去想的是，禁用狀態對用戶和產品的意義在哪里，這和我們設計方案時腦海中涌出的無數目標一樣，是一個基礎的出發點。而后，一切迎刃而解。

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

編輯導讀：產品經理在進行產品功能規劃時，會遇到來自各方的需求。這些需求有大有小，有迫在眉睫的也有無關緊要的，應該如何規劃產品功能呢？本文將從四個方面展開分析，希望對你有幫助。

產品功能如何定義？

一款產品一般會具備一定的盈利點（商業變現能力）、其獨特的使用價值，偶爾還會摻雜個人創作時的產品情懷（初心），像錘子科技入場手機行業的時候，是定位于年輕小眾的用戶群體，為他們提供個性觀感的用戶體驗，雖說后來敗北了，但也曾收獲了一批用戶的喜愛，也有因為這個領域始終存在著它的壁壘，所以不是簡單的情懷就能做成一款好的產品。

當然，如果不是創始人，創作的情懷可能會體現的沒那么深刻，但是產品早期的定位在一定程度上已經確定了基礎的業務方向和發展的基調。

很多企業可以靠一款核心產品，進而延伸到其他的產品創造，基礎產品實現了賺錢能力后，從而支撐其他的產品的試水，即使失敗，也不至于“關門大吉”。

而當產品經理切入產品設計時，一般有我們常用的兩種產品類型，一種是基于基礎核心業務延伸的從0到1的項目設計，一種是處于生命周期-成長期中從1到N的產品迭代。

而這2種規劃產品的功能的方式也是不一樣的。

01 從需求出發

不管是哪類產品，立足點都是基于需求，而需求池也分2種，一種是源源不斷的需求池，一種是寥寥無幾的需求收集；前者更為切合從1到N的產品，上線后的需求或反饋都是來自真實用戶的聲音，包括主動的從現有的產品進行回訪、用戶調研以及通過用戶的反饋和建議收集有效需求。

有了需求，那是最直觀的，對應的產品功能可以根據此展開進行規劃。

而第2需求類型，常常是因為局限于沒有經驗，不熟悉不了解所以需求的聲音很少，這時候，產品經理就需要主動的去對比競品，去分析競品，解析出產品的核心需求，并且去了解這個產品的一個市場背景、規模和場景范圍了。

當然，競品分析不是讓你全部照搬抄寫別人的產品，這是沒有靈魂的，作為一個產品人，是需要有自己的想法的。B端產品的分析，更加傾向于功能模塊及邏輯設計，而非用戶體驗或界面的細致優化。

從0到1的產品功能規劃時，要明白企業是屬于某個行業的，而行業的范圍比較廣泛，比如做教育的，器材可以屬于教育裝備的一種，教務管理系統也可以屬于教育裝備的一種。另外，書籍、校服、桌椅等面對的對象是學校的，他們也可以說自己業務涵蓋了教育領域。

所以，我們設定或規劃一種產品時，往往都是有關聯性的，而不是完全切入一個新興的領域，擼起袖子就干。

當然，有能力的并且有錢的企業是可以這么做的，但是對于門檻較高或需要積淀的領域，他們也不會貿然動手，起碼會先觀望一下，然后找一找這個領域內的老玩家，通過合作的方式獲得了經驗值再自己獨立做，但是做肯定是不會做相同的事情，老的市場被吃透了，這時候只有把新的東西注入，才能獲得一些收益，比如把自己獨特的優勢、互聯網觀念或用戶個性化體感的設計再應用到傳統的制造業中，摸清了其壁壘及門道，才能走出自己的道路。

02 定義場景

場景是功能使用的具象化，主場景作為該功能的一個核心定位。如做一款訪客產品，定位于通用性產品，你將考慮到其面對的對象，包括：

• 購買者：政府單位、企事業單位、寫字樓物業、小區物業、學校等（看重外觀、整體系統的業務流程及效率、來訪者的用戶體驗）安全需求較高的場景
• 使用者：公司前臺、門衛保安（看重產品易用性，且門衛保安等存在學歷較低、年齡較高等普遍情況）
• 受訪者類型：集團大廈管理、公司部門、物業園區、政府機關、信訪單位，政府機關、部隊、學校、住宅小區、寫字樓、會議展會

用戶群體則可以細分：

• 訪客：商務洽談、應聘者、辦理業務、長期駐場員工、后勤（物料配送、維修）、參觀、臨時出差人員、外賣/快遞配送
• 受訪者：企業高管、接待員/招聘者、業務辦理人員、后勤管理人員
• 未知人員：廣告人員/推銷、系統故障、人工登記后等遺漏登記的人員

03 思維導圖羅列大體功能

調研競品后，也分析了產品的使用對象及場景，這時候可以提煉和列舉出核心且必要的功能，分析并討論，這個時候一般是產品經理之間的相互討論及推敲，可以先個人提出自己的方案進行比對，再去重擇優，一個個將一級和二級的功能模塊確認下來（也可以是3級，視具體情況而定），將整一個產品框架定下來。

思維導圖的使用和場景使用也是相輔相成的，此類場景是基于主場景下的細化。如，對于訪客來說，他去拜訪用戶，是否需要提前預約，如果沒有提前預約，現場登記的方式和提前預約的方式有什么不一樣，這樣就可以確定下來，兩種方式：預約和現場登記。那預約又可以包括訪客H5掃碼主動登記或者企業邀約申請等等。

04 整理流程

功能模塊確定后不要急于去畫原型圖，因為更重要的一步還是整理整個產品功能之間的關聯性，即產品數據的來龍去脈。

流程可包括業務流程、限制流程、前后端交互流程圖等。以下圖進行例舉：

1. 業務流程圖

為業務模塊核心的工作流程，數據流向及基礎判斷，及業務的幾種模式都可歸屬為業務流程，涉及的模塊和功能一般是自己的模塊屬內。

2. 限制流程圖

如在增刪改查的過程中，對數據的一些限制和參數判斷后的不同流向，往往是由多個模塊之間的規則限定的，涉及到不同模塊之間的關聯性較強的說明。

3. 數據流程圖

數據傳輸的起點和終點。一般軟件包括前端和后臺服務器，后臺主控數據的管理和分析，通過后臺對前端應用進行管理，常見的為數據的上傳下發和命令的順序的判斷。此流程圖著重對數據前后端的交互及整體流程的繪制。

基于以上都整理清楚之后，就可以開始進行原型設計了，原型的布局和風格可以根據現有軟件或UI專業的建議進行設定，對于B端產品來說，布局和排版對功能影響不是很大，即使從0到1，也可參照市場常見的布局或根據公司規定的統一。而風格和產品定位盡量貼合，假如你做一款小清新的APP，就不要使用暗黑風格的調調了。

這就是今天篇文章講的，之后會分享一些關于功能規劃時的一些細節點。

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

引人注目的UX設計背后的心理學

前文的原子設計中我曾經講過，原子是構成所有元素的最小單元，沒有辦法再被細分。它通常對應著產品設計中的通用樣式及構成組件的最小顆粒。而顏色，作為整個設計系統中極為重要的原子之一，在心智模型中占據了關鍵的地位。

我們看到紅色能夠感受到熱情、興奮和危險，看到綠色時往往就感受到安全、自然和平靜?？梢哉f，顏色調動我們的情緒只需要一瞬間，而且它在我們的記憶中可以停留更久。

接下來，我結合公司目前的業務CROV Dropshipping（以下簡稱DS），來進行色彩體系的探索，以輸出一整套的色彩方案。但愿這次探索能夠給予各位一點啟發。

大綱走起：

• 業務背景
• 為什么我們需要色彩體系
• 如何創造一套色彩體系
• WCAG無障礙測試

業務背景

CROV DS是針對美國市場的線上一件代發平臺（類似阿里巴巴的一件代發業務），屬于跨境電商B2C行業。平臺幫助用戶無需任何初始成本、無需囤貨即可順利開展電商之路，時間靈活可控，讓用戶專注于銷售本身。

為什么我們需要色彩體系？

1. 對于業務

目前CROV DS業務日益繁雜，但是除了品牌色之外，輔助色的定義過于隨意。而且隨著業務場景的擴展，臨時增加的顏色很容易被遺漏在某個不知名角落的畫板中，導致一次性用色的風險。（tips：一次性即前一篇我所講到的用完即扔、未被復用的設計）

而且用色本身的隨意也導致研發還原結果的不統一，一處地方色彩各異的現象比比皆是。

因此，我們需要基于我們自身的業務特征來產出一套足夠完善的色彩體系，讓業務從用色上達成基本的一致統一。

2. 對于設計師

我們設計師在定義顏色時，更多的是直接在色板上進行取色，但這樣的取色方法存在諸多弊端。

增加決策

可能很多設計師選色時會有這種情況，一會覺得這個顏色臟了，一會又覺得那個顏色太刺眼了，有時候完美主義作祟，為了得到一個滿意的顏色甚至花上大半天。這種情況尤其在多色搭配時更為嚴重。

其實這和不用網格系統來布局是一個道理。（注：網格系統是一種能夠極大提升布局效率的方法，后面會講～）

色板中取色的范圍趨近于無窮。如果將HSB模式下的單個H、S和B作為一個最小單元格，那么我們可以選擇的格子高達數百萬個。顆粒度過細的情況（其實根本就沒有顆粒度）導致我們在取色時往往會被迫進行反復的微調和嘗試。

缺乏秩序和邏輯性

直接在色板中取色主要依賴的是”直覺“這種相對感性的存在。

比如一個按鈕的狀態可以包括normal、hover、pressed、disable等多個狀態，如果我們僅僅靠自己的直覺自由調整明度和飽和度，最后的配色方案其實缺乏內在的邏輯性和秩序性。

難以復用

對于B端這些偏后臺工具、場景復雜的業務，顏色運用得往往也比較廣泛，如果我們沒有一套完善的色彩體系，那每次一遇到新的項目及業務場景需要用到新的顏色時，之前定義的顏色難以復用，導致我們需要重新定義顏色。而且這種相對主觀的方法也缺乏說服力，難以體現專業度。

而如果設計師提前定義好一套色彩體系，一方面只需要在對應的色板中選擇即可，大大減少了設計決策。另一方面色彩體系所提供的不同色彩梯度也便于各個需求、業務場景的復用。而且色彩體系富有邏輯和秩序，因此從中挑選的顏色也同樣是這樣，顯著降低設計師依賴”直覺“所帶來的主觀和不可控。

如何創建一套色彩體系？

Alipay Design團隊提過：

以同色系配色為主導，多色搭配為輔。

同色系為統一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性；由于業務的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設定不同的任務屬性和情感表達；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運用在業務的各個場景中，具有非常好的延展性。

接下來我以DS項目為例進行色彩體系探索——

首先，所有的色彩模型統一采用HSB模型進行，正如Ant Design設計團隊說的那樣，這個模型利于調整色彩時對顏色有明確的心理預期，同時便于團隊溝通。

這里再簡單普及下HSB模型。H指的是色相（Hue），S指飽和度（Saturation），B指明度（Brightness）。S控制顏色混入白色的量，S值越高，意味著混入白色的量越少，顏色也就越“純”。B控制顏色混入黑色的量，B值越高，意味著混入黑色的量越少，顏色也就越“亮”。（通俗點說，它們分別代表了明色區域和暗色區域）

1. 品牌色

Crov Dropshipping基于其時間自由靈活、可兼職副業、成本風險低的業務特征，使得對應的用戶群越來越多的集中在年輕一代的e-tailer（線上零售商）當中。他們不同于我們常規認知里那類傳統的retailer（線下實體零售商），大部分的DSer擁有自己的事業和工作，為了賺取外快，將其當做自己的副業。因此，年輕化是這類用戶群的主要標簽。

所以，我們采用了高飽和度、偏向藍色色相的紫色，來作為crov dropshipping的品牌色。它的HSB值是 （250，80，100）。

2. 基于品牌色生成24色“彩帶”

為了覆蓋掉Crov DS本身復雜的前后臺業務場景，需要額外搭配各類型的輔助色。我們想要提取24類色相，所以直接通過360/24得出了色環中每類色相的基本角度15°。

因此，這里以品牌色色相為基礎，在HSB 360°色環中，對色相（H）正向和反向各自±15°，飽和度（S）和明度（B）保持不變，得到24色的色環彩帶。

后續我們的顏色體系就在彩帶上的24個顏色上面進行提取。

3. 品牌色同色系配色

品牌色同色系是指，根據品牌色不同的飽和度和明度變化，生成不同深淺、不同明暗的一組顏色。同色系配色不僅傳達了品牌性，多個梯度的變化也能夠適應及通用盡可能多的業務場景，也便于多信息的層級劃分。

而同色系配色的輸出則遵循了antDesign發明的tint/shade 色彩系統算法，說人話，就是在顏色中分別加入一定比例的黑色或者白色來更科學地生成色階。

sketch中可以直接將這套算法可視化處理，便于設計師直接生成所有顏色的色階。需要注意的是明色區（就是上方橫向的那塊取色區域，白色至純色時S由0過渡至100）和暗色區（右側縱向的取色區域，純色至黑色時B由100過渡至0）遵循了兩種不同的規則，具體規則見下：

當S飽和度變化時（明色區域），S值以S/5的結果值為一個增量進行遞減，B值以(100-B)/5的結果值為一個增量進行遞增。我們品牌色的S和B分別是80和100，所以這里的兩個增量分別是16和0。

品牌色在明色區的下兩個色階對應的HSB參數就是（250，64，100），（250，48，100），以此類推。

而當B明度產生變化時（暗色區域），S值以(100-S)/5的結果值為一個增量進行遞增，而B值以B/5的結果值為一個增量進行遞減。得出的兩個增量分別為4和20。

品牌色在暗色區的下兩個顏色對應的HSB參數即（250，84，80）、（250，88，60），剩下的所有顏色以此類推。

根據這兩個定義規則推導出全部不同梯度的色階，我們就可以將其作為品牌色同色系配色。

4. 定義輔助色

我們使用品牌色來傳達品牌價值，還需要輔助色來滿足多樣化業務場景的需要，對用戶進行不同的情緒引導，同時也可以緩解用戶對單一主色產生的視覺疲勞。

輔助色的定義就可以直接用到我們之前基于品牌色所衍生出的24色“彩帶”了。我們通過色環形式，來迅速得出品牌色的同類色、類似色、鄰近色、中差色、對比色和互補色。

結果見下：

首先，由于相差15°的同類色與品牌色差距過小，色相對比感微弱，傳遞的調性過于相似，所以這里直接pass。而鄰近色生成的粉色和青色在界面中基本不會作為功能色使用，這里同樣直接舍棄。

類似色

類似色即色相差在30度左右的顏色，屬于較弱對比色。我們基于品牌色的色相各自±30得出類似色。由于H280的類似色調性與品牌色類似，并且色彩體系中需要一個典型的冷色來覆蓋一些場景，所以這里使用了H220的顏色作為冷系的輔助色。

中差色

中差色即色相相差90度左右的顏色，屬于中等對比色。H340偏粉，與常規紅色相差過多，所以這里借鑒了alipay的輔助色校正原則“色相差值不能超過15”，對H340進行了色相校正，調整至H355。

對比色

對比色即色相相差120度左右的顏色，屬于強對比色。最后得出的H130調性與中差色的H160過于類似，直接舍棄。H10與H340調性類似，但是可以向橙色系發展，所以微調到同類色進行色相校正。

互補色

互補色即色相相差180度左右的顏色，屬于高強度對比色。最后得出的H70偏綠，這里同樣進行了色相校正，將其調整為H55。

最后，得出了共計5種輔助色。不過這些輔助色并不能直接使用，還需要進行感官明度的校正。

5. 感官明度校正

感官明度校正方法來自支付寶設計團隊，這是是確認輔助色的最后關鍵一環。每種顏色都有屬于自己的“感官明度”，即發光度。品牌色即輔助色的發光度不一致，就會導致視覺上會有明顯的明暗差別。所以，我們需要通過發光度來進行最終的顏色校正。

明度較高的灰色意味著高發光度，明度較低則意味著低發光度。保持品牌色發光度不變，我們對其他輔助色進行微調。

我們只需要將那些視覺明暗差距明顯的顏色進行調整。注意，并非所有的顏色都要調整到品牌色的感官明度，這些值僅僅是一個參考。最終的校正依然取決于我們的視覺！比如黃色感官明度本身很高，但是視覺緩和、不像綠色那么刺激，所以基本無需校正。

最后得到校正后的如下輔助色。藍色、綠色、黃色以及紅色在界面中可以作為功能色使用，可以分別代表常規、成功、警告和報錯狀態。而橙色則可以用作突出類的提示信息，它比bold字重要高出一個層級。

6. 輔助色的同色系配色

與品牌色一樣，使用tint/shade規則推導出全部輔助色不同梯度的色階。具體過程不再贅述～

7. 定義文本色

CROV DS的文本色并非純粹的中性色，我們通過加入一點點品牌色來讓文本呈現色彩傾向，以此提升頁面的活力及年輕感，同時也可以讓界面更加耐看，減緩B端產品長期使用時的視覺疲勞。

具體方法就是，分別在#222、#555、#888、#b3b3b3的一、二、三級中性文本色代表的色塊上，覆蓋一層10%透明度的品牌色。最后得出了四個層次的文本色。當然，中性文本色你也可以參考antDesign中通過透明度進行定義的方法，不一定需要按照某個具體色值來。

WCAG無障礙測試

我們必須要承認的現實是，設計師所定義出的色彩在mac上看上去是很出彩，但是這并不能代表所有用戶。也許在用戶中依然有一部分人群，他們的顯示器配置低和老舊。而且我們無法判斷用戶們的使用環境，有可能是在刺眼的陽光下、有可能是在昏暗的環境中。如果色彩不去做可用性測試，在很多的情況下存在體驗降低的風險。

而WCAG（Web Content Accessibility Guideline，Web內容無障礙指南）解決的正是這些障礙問題。WCAG中的POUR無障礙原則包括了：易于感知的（Perceivable）、便于操作的（Operable）、穩定理解的（Understandable）、穩定耐用的（Robust）。

而顏色則正是對應了易于感知的這一無障礙原則。網站中的文字和圖像應該具備足夠高的色彩對比度，使之更易被用戶感知識別。

WCAG顏色對比度無障礙的兩個標準分別為：「1.4.3條例：最小對比度標準」和「1.4.6條例：加強對比度標準」，分別對應著AA級和AAA級。

AA級的定義為：普通文本的視覺呈現與背景至少要有4.5：1的對比度，大文本與背景至少有3：1的對比度

AAA級的定義為：普通文本的視覺呈現與背景至少要有7：1的對比度，大文本與背景至少有4.5：1的對比度

（這里的大文本即≥18pt常規字重的文本或者≥14pt加粗字重的文本）

這兩個條例被大廠們廣泛運用到了產品的顏色標準當中。

比如MD規范中的文本移動性規范標準中的數據就是來自WCAG的1.4.3條例標準。

同樣，阿里巴巴在前不久發布的B-Design中的無障礙色acs指標和WCAG本質上也是一樣。

1. 顏色對比度驗證

那該如何驗證我們的顏色符合這倆標準呢？

easy。這里直接上個網址，https://contrast-ratio.com/#%23373247-on-%23fff

我們分別在背景及文本錄入色值，即可得到最終的對比度數據。比如我錄入了白色和一級文本色數值，最后的12.28即兩者的對比度，嗯，達到了AAA級標準。

一樣的步驟，分別測試了其他文本色的對比度（產品無暗色模式，所以此處僅驗證白色背景下的顏色對比度），分別達到了7.59、4.71和2.38。可以看出除了2.38外，其他文本色的對比度均符合可見度標準。

不過WCAG中指出，一些特殊情況下的文本無對比度的限制，其中就包含了表單字段的占位符（placeholder）。而2.38對比度對應的文本色主要用于暗提示，因此這種情況就可以無視掉了~

最后

色彩體系的初步探索到此結束了，不過篇幅原因并沒有面面俱到，比如漸變色、實際落地效果等等。另外，一些地方我自己也在摸索階段，因此很多分析也可能存在不足，文章僅作參考。

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

作為UI設計師，雖然現在做了很多項目，但是實際上每一次想要做好，過程都還是很痛苦的。尤其是前段時間，身心俱疲，時間、心情、精力都不在線。但恰恰接到的又是一個重頭的急活，產品方也不清楚自己想要什么效果，所以一開始改版的心路很渺茫。

不過也由于這次的經歷也讓我更加明白設計方法的重要性，越是短時間內，越需要理性分析。在實際工作中，產品有時候因為項目急需上線，給我們的時間會非常有限，根本沒有太多的時間去給你思考，就比如我這次，只有半天時間去思考設計。那么如此短的時間，如何提出有效的設計方案呢？

搞清楚需求來自哪里，具體是什么

以這次為例，學習圈頁面剛上線不久，當時也是設計了許多方案，都被pass了，如下：

產品方提出頁面上方的發布按鈕需要重新設計，那我就要搞清楚具體是誰提出的意見，為什么要重新設計，這樣才不會讓自己處于完全被動狀態。

由于項目剛上線，數據庫也因為某些原因還不能檢測點擊和轉化量，無法得知哪種按鈕點擊量高。產品方也不清楚想要什么效果，需求方向不明確就著急去動手設計，那對于設計師來說無疑是效的，問明白需求后再通過競品分析、產品體驗、用戶喜好等方式去突破。

所以接下來需要我們主動出擊引導產品方，得出一些需求具體的方向。那怎么去引導？反向思維法，既然需要改動的是不確定的，那么我們可以確定那些不需要改動的地方——通過排除不需要改動的，來確定需要改動。

需要排除的是：整體頁面排版布局、按鈕設計方向（扁平、立體、簡潔、卡通等方向）、動效方向、背景（顏色元素）。

通過溝通后明確的是：

• 整體布局沒有問題，所以這塊不需要有改動
• 按鈕點擊感不強，產品用戶群體是6～14歲的學生，根據用戶審美偏好，所以主要方向就是立體、卡通
• 動效不夠明顯，需要更明顯有趣一些
• 整體顏色太冷靜，所以背景顏色和元素細節需要修改

在第一版時已經對相關競品做了分析，基本是一個純色背景上加一個具象化大按鈕，發布功能使用加號、筆、照相機等元素來制作按鈕，原則：按鈕凸顯，背景元素比較少。其實按鈕如果用照相機這種結構復雜點的元素去設計會更有方向，但是我們左上角會有拍米幣的功能，用相機會更直接一些，而加號筆畫過于簡單，可延展性不強，所以改版的話最終決定還是使用鉛筆作為圖標設計元素。

關于整體顏色方向，上一版顏色設計原理是背景用產品主色（藍色）+白色按鈕，不過產品方提出太過冷靜，一開始我想用色肯定要跟整個app的主色相關呀，就跳不出藍色背景的思維，后來決定先跳出來，配色思維反過來，背景不局限在主色，按鈕及周邊裝飾元素可使用產品的主色。

時間緊急，當時想到的是常用的太空元素（有空間感、好延展、符合用戶喜好），于是背景就選了藍紫色（據研究，紫色也是小學生最喜歡的顏色，性別傾向相對偏弱，在色環上是藍色的鄰近色，協調又會有對比。）

想明白要嘗試的方向

在設計前，我先在心里大致分了兩個設計方向：

• 常規大按鈕樣式
• 非常規按鈕樣式

以下便是常規大按鈕設計稿：

非常規按鈕設計稿

在嘗試的這期間，對于有疑問的地方一定要跟需求方及時溝通，及時反饋，確保自己的設計在功能上沒有遺漏。比如我這次，是通過詢問一個產品經理，才得知，按鈕上需要加文字，才在后面加上了。

善于運用對比進行排除

大體方案出來后，通過優缺點分析對比，同產品方選出最適合的方案。

1. 常規按鈕設計稿

優點：容易被用戶所熟知，用戶的學習成本低，更容易點擊

缺點：對于小學生來說吸引力不夠，形狀上偏規矩，不夠活潑，另外上方第一個元素稍微有一點搶主角的光環

2. 非常規按鈕設計稿

優點：配合動效會更有吸引力一些

缺點：用戶的學習成本比較高

通過對比，大家一致傾向非常規按鈕，那就在氣泡與星球這兩者中選出最終方案。在APP的任務頁面也有星球的按鈕，用戶已經對星球有了一定的點擊感知，減少了學習成本，最終選擇了星球。

細節優化

優化方向：

• 顏色調整
• 細節元素調整
• 添加動效

1. 顏色調整

現在看著球跟背景區分不是很明顯，整體偏灰，需要加強對比，球的顏色需要調亮調純。我們看下色環：

90度以內的鄰近色，搭配在一起和諧又不失活潑。所以可以嘗試將球的顏色改為背景藍紫色的鄰近色：紅色或者天藍色，如圖：

紅色的球雖然跟背景拉開了對比，但是過于鮮艷，大家反應有點類似于心臟。

所以相對來說藍色的球比較適合，也跟APP的主色相呼應。

2. 細節元素調整

球的環境色過于明顯，需弱化一些；周邊增加幾個小球，四周邊緣的球太搶，也需要弱化 ；文字“寫一寫”由常規字體改為大一點的手寫字體：

3. 添加動效

鑒于上線版本的動效反饋說不明顯，按鈕點擊感偏弱，所以這次動效優化點需要凸顯星球本身。第一想到的就是呼吸效果，但是只有一個呼吸有點單一，周邊可以添加一些社交鼓勵的元素，如鮮花、笑臉、太陽，動效一開始想著是從球兩邊飛出來，但是經過對比就參考了直播送獎勵的形式，相對來說輔助性稍微好一些，視覺上不會過于太搶主角，如下最終呈現結果：

如果有限時間內想要讓需求方得到滿意方案，所以以下兩點我覺得是挺重要的：

• 對比排除法是一個很好的工作方法；一個西瓜到底好不好，拿另一個進行比較就知道了。
• 及時反饋：很多時候什么結果并不是一開始就知道，所以在做的過程中需要不斷理順想法。此時很重要的一點就是，跟需求方及時反饋，無論是正向的還是負向的，否則結果不是老板所期望的，自己也會陷入無限的苦惱中。

好啦，文章寫到這里，如果大家有更好地意見也歡迎留言

文章來源：優設網     作者：麥芽糖

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