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

圖片相較于純文字具備更強(qiáng)的視覺性，所以選擇合適的好圖片就至關(guān)重要，下面為大家介紹三種思路。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

為什么你的設(shè)計看起來很亂？在此之前我們先了解一個概念，我們怎樣看這個世界？

我們通過眼睛看世界，眼（又稱眼睛，目）是一個可以感知光線的器官。那么結(jié)論來了，我們看到這個世界，其實本質(zhì)就是看到了光。舉個例子，晴空萬里時我們可以看到很遠(yuǎn)很遠(yuǎn)的距離，反之在漆黑的屋子里，我們什么都看不見。

我們再來了解第二個問題，眼睛是怎樣成像的？眼睛通過調(diào)節(jié)晶狀體的彎曲程度（屈光）來改變晶狀體焦距獲得倒立的、縮小的實像。簡單來說，成像原理就是晶狀體來改變焦距，簡單一點解釋決定成像的重要因素是焦距。

你的設(shè)計看起來很亂，往往在這幾個方面出了問題：

• 明暗關(guān)系紊亂；
• 視覺焦點不明確，畫面沒有重點；
• 顏色雜亂，毫無章法。

明暗

明暗是指畫中物體受光、背光和反光部分的明暗度變化以及對這種變化的表現(xiàn)方法。明暗分亮面，灰面，暗面，以及明暗交界線，反光五大調(diào)子。單個物體明暗關(guān)系，暗部（反光，投影）＞灰面＞亮面。整體關(guān)系，靠近光源暗部＞遠(yuǎn)離光源……畫畫核心畫的是光，遵循光照的自然規(guī)律即可。

去色檢查畫面明暗關(guān)系

從上至下三張圖依次是去色之后的黑白圖；運(yùn)用色相和飽和度給畫面賦予一個顏色的單色圖；原圖。

從下圖可以粗略得出結(jié)論，明暗（光源色）+固有色=色彩。調(diào)色之前先處理明暗，畫面顏色處理起來就非常簡單了。

最近火爆的國產(chǎn)硬核科幻片海報，即使去掉顏色，黑白關(guān)系依舊明確清楚。好的設(shè)計即使沒有任何顏色，依舊是一副好的素描畫。我所理解的明暗關(guān)系與色彩的關(guān)系相當(dāng)于人體與衣服妝容的關(guān)系，對于一個美女是否漂亮，衣服妝容的搭配是你能達(dá)到漂亮的上限，然而你的臉型，身高，氣質(zhì)，皮膚才是你能達(dá)到的驚為天人的基礎(chǔ)。

視覺焦點

視覺焦點究其概念，是讓我們的視線多停留幾秒的視覺元素，我們在畫面中第一眼就能看到的元素，畫面中的「主角」。

對畫面的視覺漏斗進(jìn)行分類：

• 視覺焦點：想看不見都很難，表現(xiàn)突出；
• 重要元素：不經(jīng)意就能看見；
• 輔助元素：仔細(xì)看看也能看見（類似買理財產(chǎn)品的最右下角的小標(biāo)注，「投資有風(fēng)險，理財需謹(jǐn)慎」）

高斯模糊法看視覺焦點

瞇著眼睛看形，睜著眼睛看細(xì)節(jié)。把畫面模糊調(diào)到一定程度，然后看畫面，如果畫面仍然能看清楚「主角」，那么畫面的視覺中心就是可以的。下圖畫面即使模糊了，我們依然能看清「男主角」沈騰以及飛馳人生四個大字，雖然原圖背景復(fù)雜以及其他裝飾物很多，依然不影響畫面的整體協(xié)調(diào)感，元素多且雜而不亂。

這上面的兩個例子看出，即使畫面模糊了，還是能清晰看到畫面表達(dá)的主題。那么模糊度多少合適呢，一般調(diào)整到上面所說的視覺漏斗中重要元素看起來剛好模糊到看不清就可以了。

色彩

色彩是附著在物品上由于光的照射產(chǎn)品漫反射的顏色，可以粗略按色彩元素分為光源色，固有色和漫反射產(chǎn)生的環(huán)境色。按照長期的實踐經(jīng)驗來看，通常比較和諧的配色方式是除了產(chǎn)品的固有色之外，盡量把光源色和環(huán)境色統(tǒng)一在三種顏色（黑白灰不算顏色）之內(nèi)，顏色比例盡量類光源色的主色調(diào)占據(jù)畫面百分之八十的面積，其他環(huán)境色作為補(bǔ)充。

色彩插件檢查配色

谷歌插件 palette.site 能分析出畫面顏色的狀態(tài)以及畫面中幾種主要的顏色，借助這個插件能很輕松檢查畫面是否超過了3種顏色（黑白灰不算顏色），如果超過三種顏色，那么頁面就需要做減法，或者將顏色統(tǒng)一在一個色系里，用明度以及飽和度區(qū)分。

插件的使用方法：可以直接使用瀏覽器下載，然后也可以在瀏覽器中選擇一張圖片，右鍵「在新標(biāo)簽中打開圖片」，然后再「點擊右上角的插件按鈕」分析顏色狀態(tài)。

從上面的兩個案例中可以看出，兩個 banner 的顏色分析基本都在三種顏色以內(nèi)，特別是下面的看起來比較復(fù)雜的顏色，總共分析的顏色也就紅黃藍(lán)，其中藍(lán)色還是點綴色的存在。

今天的內(nèi)容就說到這里了，我們回顧一下重點內(nèi)容，解決畫面看起來很亂可以有以下方法：

• 去色檢查畫面明暗關(guān)系
• 高斯模糊法看視覺焦點
• 色彩插件檢查配色

設(shè)計雖沒有近路，但可以少走彎路。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

Tooltips并不新鮮，但它們?nèi)匀槐徽`用。

定義：Tooltip是當(dāng)用戶與圖形用戶界面中的元素交互時出現(xiàn)的簡短、信息豐富的消息。Tooltips通常會在兩種情況下出現(xiàn)，鼠標(biāo)懸停時或鍵盤懸停。(以防萬一你不知道鍵盤懸停是什么: 為了使用頁面中激活的元素，用戶通常需要用鼠標(biāo)移上去或使用鍵盤上的tab鍵切換上去。鍵盤懸停指的是保持鍵盤聚焦在同一個元素上一段時間。)

工具提示(Tooltips)可以依附于頁面中任何激活的元素（圖標(biāo)、文字鏈接、按鈕，等等）。它們?yōu)榕鋵Φ脑靥峁┟枋龌蚪忉?。因此，tooltips與界面中的元素相關(guān)聯(lián)并具有特定性，并不會用它來解釋大圖或整個的任務(wù)流。

有一個很重要的地方是，tooltips是用戶觸發(fā)的。因此，在頁面中主動彈出來告知用戶新的功能或如何使用一個具體的功能的提示不是tooltips。

由于tooltips是由懸停手勢觸發(fā)出來的，他們只能在設(shè)備上通過鼠標(biāo)或鍵盤觸發(fā)。在觸摸屏上通常不可用。（將來，tooltips可以在眼控設(shè)備上觸發(fā)，當(dāng)用戶將視線聚焦在界面某個特定元素一段時間便可觸發(fā)）

Tooltips vs. Popup Tips

盡管tooltips主要是限于桌面電腦和筆記本，但是在觸摸屏上，它們還有一個類似姊妹元素：popup Tips。Tooltips和Popup Tips都有相同的目標(biāo)：提供有用的、更多的內(nèi)容。下面這個表格展現(xiàn)了二者主要的相似點和不同點。

本文將重點介紹tooltips及其在桌面網(wǎng)站上的使用。

Tooltip使用指南

1.不要在任務(wù)的關(guān)鍵信息處使用tooltips

用戶不需要找到工具提示即可完成任務(wù)。當(dāng)Tooltips為一些用戶不熟悉的表單字段提供額外的解釋，或者解釋一些看起來不尋常的需求時，它是最好用的。請記住，tooltips會消失，因此指令或其它可直接操作的信息，比如字段需求，不應(yīng)該出現(xiàn)在tooltip中。（如果是的話，用戶就不得不在他的工作記憶中記住，以便順利使用）

Don't:

Amtrak網(wǎng)站將密碼要求放在Tooltips中（通過鼠標(biāo)懸停訪問）。這類信息對于用戶成功完成“創(chuàng)建賬戶”流程至關(guān)重要，因此應(yīng)始終顯示在屏幕上。

Do:

FedEx使02-用tooltips為運(yùn)輸表單字段提供額外信息。比如，電子郵件字段中有一個tooltip，說明列出該字段的原因（此tooltip通過鼠標(biāo)懸停訪問）

2.在tooltip內(nèi)提供簡短有用的內(nèi)容

明顯的或有冗余文本的tooltips對用戶無益。如果你無法想到特別有用的內(nèi)容，就不要提供Tooltip。否則，只會給UI增加無用信息，并且浪費任何一個看到該工具提示的用戶。

此外，長內(nèi)容也不再是“提示”，所以請保持簡短。Tooltips是微內(nèi)容的——短文本旨在自給自足。你的文本可以是單行或者多行，只要它是有關(guān)聯(lián)的并且不會遮擋相關(guān)內(nèi)容。

Don't:

在Sprint網(wǎng)站上，帶有“添加新行”的按鈕上還有文本“添加新行”的tooltip。這個tooltip是重復(fù)且沒必要的。

Do:

阿里巴巴的搜索框里有一個無標(biāo)簽的相機(jī)圖標(biāo)。當(dāng)用戶鼠標(biāo)懸停到這個圖標(biāo)上時，會出現(xiàn)“通過圖片搜索”的tooltip。這個功能對很多用戶來說都不熟悉，因此這里描述圖標(biāo)用途的tooltip很有幫助

3.支持鼠標(biāo)和鍵盤懸停

Tooltips只在鼠標(biāo)懸停時出現(xiàn)的話，對于依賴于鍵盤導(dǎo)航的用戶來說不夠易用。確保在你的設(shè)計中tooltips可以通過鍵盤無障礙訪問。

Don't:

麥當(dāng)勞的網(wǎng)站不支持通過鍵盤觸發(fā)tooltip。當(dāng)用戶選中同一個頁面（底部)時，鼠標(biāo)懸停啟動的tooltip（頂部）不可用。

Do:

維基百科支持鍵盤觸發(fā)tooltips。鼠標(biāo)懸停和鍵盤懸停時會出現(xiàn)相同的tooltips。

4.當(dāng)附近有多個元素時使用箭頭指示

箭頭有助于清楚的識別工具提示和哪個元素相關(guān)聯(lián)。當(dāng)附近有幾個元素時，箭頭有助于避免混淆。

Don't:

PowerPoint有幾個圖標(biāo)彼此靠近。如果沒有工具提示箭頭，則很難知道哪個工具提示對應(yīng)哪個工具。

Do:

Whiteboard使用工具提示箭頭來提示所選圖標(biāo)。盡管圖標(biāo)間距很大，但手型指針的提示能讓指示更清晰，視覺噪音最小。

5.在網(wǎng)頁中使用統(tǒng)一的Tooltips

Tooltips很難發(fā)現(xiàn)，因為它們通常缺乏視覺線索。如果tooltips在你的網(wǎng)站中沒有規(guī)律的出現(xiàn)，用戶將永遠(yuǎn)不會發(fā)現(xiàn)它們。保持一致并為設(shè)計中的所有元素，而不是只針對某些元素提供工具提示非常重要。如果只有一些元素需要額外的解釋，使用彈出提示而不是工具提示。

Don't:

Business Insider網(wǎng)站為其導(dǎo)航菜單里3個圖標(biāo)的其中兩個提供了tooltips。（注：在網(wǎng)站的主頁上，Globe圖標(biāo)確實有一個讀取Globe圖標(biāo)的工具提示，但是這個標(biāo)簽沒有任何幫助，沒有說明它的功能：語言選擇器）一般來說，我們建議不要使用沒有標(biāo)簽的圖標(biāo)和隱藏標(biāo)簽的tooltips，但是當(dāng)工具提示不一致時，這種問題更嚴(yán)重。

Do:

Todolist始終如一的使用tooltips。主要部分的三個圖標(biāo)都有tooltips.通過一致性來實現(xiàn)用戶的潛在期望。

更多推薦

• 為無標(biāo)簽的圖標(biāo)提供tooltips

大多數(shù)圖標(biāo)都有一定程度的概念模糊，這就是我們?yōu)樗袌D標(biāo)推薦文本標(biāo)簽的原因。如果你堅持不為網(wǎng)站中的圖標(biāo)提供文本標(biāo)簽，至少你可以給用戶提供一個描述性的工具提示。

• 確保tooltips和背景有一定的對比

用戶通常會查看他們點擊或懸停的位置。然而，由于tooltips的隱蔽性，一定對比度對于確保用戶能看到工具提示中的文字很重要。此外，對于有視力障礙的用戶，在白色頁面中使用淺灰色tooltips會很難閱讀。

• 定位tooltips，以便他們不會遮擋相關(guān)內(nèi)容

當(dāng)tooltips遮擋了與它們相關(guān)的內(nèi)容時，會導(dǎo)致用戶重復(fù)操作（即移動鼠標(biāo)關(guān)閉工具提示，再次讀取信息或字段，懸停以顯示工具提示）。測試你的工具提示位置確保不會擋到與用戶目標(biāo)相關(guān)的其它內(nèi)容。

結(jié)論

當(dāng)用戶無法理解某項功能時，tooltips是一種防錯方式。如果用戶遵循其它的設(shè)計指南（比如，文本標(biāo)簽加圖標(biāo)），那么今天的很多tooltips用例都可以忽略。重要的信息應(yīng)始終在頁面上顯示。因此，tooltips對于用戶完成重要的任務(wù)并不是必不可少的。

我們越是追求極簡主義，我們需要的tooltips就越多，我們的用戶就需要越多的學(xué)習(xí)成本。下次，當(dāng)你考慮tooltips的時候，問一下自己：為了用戶完成某個任務(wù)，這個信息是否需要？如果答案是否定的，那么工具提示非常合適。否則，信息應(yīng)直接出現(xiàn)在頁面中。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

作者： John Saito | 翻譯： 正_青_春 審校： 凌藝蜻

我從設(shè)計中學(xué)到的一件事是你無法取悅所有人。你可以嘗試，但你最終會得到一個大打折扣的設(shè)計，而且無法讓任何人滿意。

當(dāng)你試圖讓所有人滿意時，你會失去你的重點，你會開發(fā)一些人們不需要的功能，你所寫的用戶也根本不會去讀。

好的設(shè)計就是完全圍繞一個清晰的目標(biāo)。這一點非常重要！

過去的一個月里，我一直在和在設(shè)計中有明確清晰目標(biāo)的設(shè)計師交流，他們來自Google，Airbnb，Slack, Dropbox等等, 我想窺視他們的內(nèi)心，看看是什么驅(qū)動他們做出決定以及是什么在指引他們的設(shè)計，以下是我學(xué)到的一些內(nèi)容。

UXRen

1、從問題開始，而不是答案

 你是否注冊了新產(chǎn)品，然后第二天就忘記密碼？這已經(jīng)無數(shù)次地發(fā)生在我身上。如果我向你求助，你會建議我做什么？

 有些人可能會建議我直接寫下密碼，輕松，問題解決了。但是安全專家不會推薦寫下密碼，因為那并不安全。

好的設(shè)計師不會直接跳到解決方案，他們會花時間去理解問題。

 那么，好的設(shè)計師會怎么做？好的設(shè)計師不會直接跳到解決方案。他們會花時間去了解問題。他們提出問題并找出原因、背景和限制：你一般怎么記錄你的密碼？你總是隨身攜帶手機(jī)嗎？你有多少密碼？

你越了解問題，你越能找到解決問題的切入點。深入理解給你自信，深入理解就是把你的初步想法轉(zhuǎn)化為實際深入的觀點。

我詢問了Google 智能助理的產(chǎn)品設(shè)計師Adriana Olmos關(guān)于她解決問題的方法。當(dāng)她的利益相關(guān)者提出需求時，他們經(jīng)常根據(jù)解決方案而不是問題來定位他們的想法?！拔以噲D去了解他們解決問題的理論基礎(chǔ)是什么”她說，從那時起，我與他們一起去了解用戶最底層的需求，并了解背后的原因，然后來做優(yōu)化迭代。了解了原因，如何去做就順理成章了。

了解了問題的來龍去脈，你就可以找到解決問題的方法了。 評論(0) 瀏覽(2754)

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

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

網(wǎng)絡(luò)上有很多關(guān)于Icon設(shè)計的文章，一些文章從部分維度切入講述Icon的設(shè)計理念，但大部分缺乏整體性。

所以我嘗試把自己的思考方式結(jié)合其他人的設(shè)計理念整理了一個完整的Icon設(shè)計法則，通過簡單易懂的描述語言，并且結(jié)合設(shè)計案例呈現(xiàn)出來，希望能夠?qū)Υ蠹矣兴鶐椭?。文章使用的案例只代表個人觀點，并不代表相關(guān)產(chǎn)品。

本文重點講述Icon設(shè)計思維，關(guān)于Icon的具體定義以及具體的制作過程就不再贅述，網(wǎng)絡(luò)上有很多相關(guān)文章都有講述。

從不同維度對Icon設(shè)計進(jìn)行解析，整理一整套Icon的設(shè)計法則。每一個產(chǎn)品中都有不同類型的Icon，產(chǎn)品通過Icon可以快速的向用戶傳遞語意，通過獨特的設(shè)計語言讓用戶形成對于產(chǎn)品的認(rèn)知心智。Icon的重要性就不言而喻了。

ICON的設(shè)計法則-菱形設(shè)計法則，主要包括語意、層級、設(shè)計形式、風(fēng)格、一致性、范圍。而其他的設(shè)計思考也是這個設(shè)計法則的變體，中心思想沒有發(fā)生變化。通過對以上設(shè)計思考點的聚合，來設(shè)計能夠傳遞Icon語意，并且能夠清晰展現(xiàn)產(chǎn)品結(jié)構(gòu)和信息層級的Icon系統(tǒng)，通過差異化的設(shè)計形式展現(xiàn)產(chǎn)品設(shè)計的獨特風(fēng)格，讓具有一致性的設(shè)計語言傳遞信息，和用戶形成共鳴。

層級

第一層級Icon

第二級別Icon

第三層級Icon

第一層級的Icon一般指首頁的井字入口Icon，讓用戶快速獲取入口信息，完成對產(chǎn)品流量的分流，讓用戶快速完成自己的任務(wù)。這種類型的Icon是級別最高的，無論是面積、形式感、視覺沖擊力都應(yīng)該是最突出的，這種高層級的Icon可以簡單通過一下三種方法表現(xiàn)，1、擬物化的設(shè)計方式增加視覺重心和吸引力。2、通過細(xì)節(jié)的增加呈現(xiàn)Icon設(shè)計的復(fù)雜形式感。3、采用沖擊力強(qiáng)的色彩對比，抓住用戶的關(guān)注點。除此之外具體的思考過程，后文也會詳細(xì)講述。

下圖分別是“自如” “每日優(yōu)鮮” “大眾點評”的首頁入口Icon，分別采用了擬物化設(shè)計，細(xì)節(jié)添加，色彩對比的設(shè)計方法。

第二級Icon歸納為導(dǎo)航類型的Icon，引導(dǎo)用戶操作產(chǎn)品，完成用戶的任務(wù)，同時傳遞品牌特色。這種Icon類似真實街道中的指向標(biāo)。第二層級的Icon不需要做的視覺重點非常重，能夠讓用戶認(rèn)知到，并且了解Icon傳遞的信息，在操作行為上產(chǎn)生預(yù)期就可以。通常的設(shè)計樣式是線型Icon或者是面型Icon。

下圖分別是“自如” “每日優(yōu)鮮” “大眾點評”的二級Icon系統(tǒng)

第三類Icon是語意型Icon，主要是向用戶傳遞信息，烘托信息氛圍，并且引導(dǎo)用戶瀏覽信息。這種類型的Icon視覺相對較輕，且不可點擊，具體的設(shè)計思考在后續(xù)的內(nèi)容展開。

下圖分別是“自如” “每日優(yōu)鮮” “大眾點評”的三級Icon系統(tǒng)

以上三級的劃分并不是說Icon只有這幾種類型，這樣劃分是從功能和視覺上進(jìn)行區(qū)分便于設(shè)計同學(xué)理解，當(dāng)然在具體的設(shè)計過程中也可以對Icon進(jìn)行更細(xì)化的區(qū)分，最主要根據(jù)具體的需求去定義Icon的層級，然后再采用對應(yīng)層級的設(shè)計語言。

語意    

1）、Icon背后的語意(Icon的特性歸納）

2）、Icon的可識別性(Icon的特點表現(xiàn))

Icon的重要意義是抓住用戶能夠通過圖像式的語言快速獲取產(chǎn)品信息。所以在Icon的設(shè)計之前，需要思考Icon背后傳遞的文字語意，理解語意，構(gòu)建對于語意的多維拆解（比如沙發(fā)是由靠背、兩個扶手、四條腿構(gòu)成，重心要穩(wěn)，和床有哪些區(qū)別等等）。同時還需要思考Icon圖形化之后的可識別性，基于對用戶認(rèn)知的了解，歸納Icon設(shè)計中需要具體表達(dá)的幾個關(guān)鍵特點，迎合用戶的認(rèn)知心里。幫助用戶快速的獲取Icon想要傳遞的信息，如果不能快速的獲取，反而增加了用戶獲取信息的成本，那就本末倒置，削弱了用戶的使用體驗。

例：下圖是“大眾點評”二級Icon設(shè)計的語意表現(xiàn)思考方法

設(shè)計形式

1）、外形

2）、表達(dá)方式

3）、色彩組合

4）、Icon特色

外形是Icon 的基本形態(tài)，不同的形態(tài)傳遞不同的視覺感受，構(gòu)建不同的心智。同時Icon的外形決定了內(nèi)部元素的設(shè)計。

Icon的表達(dá)方式主要兩種，分別是線型Icon，面型Icon。線型Icon形式抽象、簡潔，便于用戶識別，用戶認(rèn)知成本較低，缺點是Icon容易極簡，造成了似是而非，可識別性降低。面性Icon相對線型Icon視覺重心更突出，便于用戶聚焦，設(shè)計表現(xiàn)形式會更豐富，缺點是可能會過于復(fù)雜，造成信息層級混亂，增加了用戶的認(rèn)知成本。

色彩組合，就是Icon中的色彩語言，在設(shè)計Icon的過程中通常包括單色系的Icon和色彩組合系列的Icon。通過不同顏色的組合傳遞產(chǎn)品的品牌形象和產(chǎn)品特質(zhì)，在設(shè)計Icon的過程中，尤其是導(dǎo)航Icon的過程中不建議使用超過兩種顏色的Icon，這樣容易使用戶視覺疲勞。

Icon特色是Icon在設(shè)計過程中的細(xì)節(jié)，這些細(xì)節(jié)是體現(xiàn)Icon自身精致的部分，同時也會影響用戶對于產(chǎn)品和品牌的認(rèn)知聯(lián)系。影響產(chǎn)品的感性認(rèn)知觸達(dá)用戶內(nèi)心。

例：下圖以“大眾點評”中的“拍視頻”icon做舉例說明

風(fēng)格

1）、品牌理念

2）、產(chǎn)品特色

3）、視覺特色

品牌理念是是指產(chǎn)品背后的定義和想要傳遞的價值。通過簡介的符號、文字傳遞給用戶的認(rèn)知、理解、印象、感受。通過塑造品牌理念的塑造，和用戶在感性層面形成共鳴。融入品牌基因的Icon系統(tǒng)具有更好的辨識性和認(rèn)同感。這需要設(shè)計師和業(yè)務(wù)團(tuán)隊一起溝通產(chǎn)品，深入理解業(yè)務(wù)，總結(jié)出關(guān)鍵詞語表達(dá)品牌，最終和業(yè)務(wù)團(tuán)隊達(dá)成統(tǒng)一共識。

產(chǎn)品特色指產(chǎn)品在同行業(yè)中的定位差異，核型競爭力。通過簡潔的視覺語言進(jìn)行表現(xiàn)。通常的產(chǎn)品特色體現(xiàn)在業(yè)務(wù)范圍、用戶群體，使用場景，產(chǎn)品功能等。在這四個維度中總結(jié)歸納成可落地的具體的表達(dá)關(guān)鍵詞，進(jìn)一步具象化。

視覺特色指在競品分析中，總結(jié)得到在視覺層面其他產(chǎn)品中可以借鑒的感性共性和自己產(chǎn)品定位差異性的結(jié)合。通過可借鑒的共性傳遞行業(yè)的特點，而差異化的視覺表現(xiàn)可突出自己產(chǎn)品的特色和競爭力。

例：繼續(xù)以“拍視頻”Icon為例子進(jìn)一步解釋說明

一致性

一致性的綜合表現(xiàn)在圓角、透明度、線條粗細(xì) 、間距、顏色、層級、漸變、特色細(xì)節(jié)。

Icon的一致性有利于降低用戶的認(rèn)知成本，便于品牌傳遞，而Icon的非一致性會增加用戶的跳出感，降低用戶對于產(chǎn)品專業(yè)度的認(rèn)可。通常情況下可以通過以上8個維度進(jìn)行分析和提煉。前七個維度大家比較好理解。重點解釋一下第八個維度“特色細(xì)節(jié)”，特色細(xì)節(jié)是設(shè)計師通過對于產(chǎn)品和業(yè)務(wù)的理解主觀加入的一些關(guān)鍵性視覺表現(xiàn)的點，增加產(chǎn)品一致性的基因，可能是斷線，尖角，原點等等標(biāo)志性元素。

例：下圖通過對“大眾點評”Icon做拆解進(jìn)一步從六個維度說明Icon系統(tǒng)的一致性（并不是說每一個icon的設(shè)計必須包含八個維度）

范圍

視覺范圍和熱區(qū)范圍

隨著Sketch的普及，更多的設(shè)計師開始采用一倍的設(shè)計畫布輸出設(shè)計方案，但在設(shè)計的過程中需要注意視覺面積和物理面積，兩個Icon的物理尺寸大小是一樣的，視覺感性的面積偶爾會變化。所以需要在設(shè)計完Icon之后，對Icon進(jìn)行排列，進(jìn)行視覺對比，發(fā)現(xiàn)視覺的不一致性。

熱區(qū)范圍是代碼定義的用戶可操作的交互面積，視覺是感知不到的。熱區(qū)范圍的確定有利于開發(fā)工程師和設(shè)計師達(dá)成視覺方案的一致。避免后期由于大家對于方案設(shè)計、開發(fā)理解的不同，增加后續(xù)溝通的成本。通常情況下會出現(xiàn)的問題就是

1、界面開發(fā)的還原度低

2、熱區(qū)范圍過小，用戶無法點擊

3、Icon的熱區(qū)范圍不一致。

總結(jié)

在設(shè)計的過程中，Icon的樣式可以借鑒，但要根據(jù)自己的產(chǎn)品做形式上的調(diào)整，具體可以通過上述談到的幾個維度作為切入點調(diào)整Icon。同時在設(shè)計的過程中避免無窮的細(xì)化，因為有些細(xì)節(jié)用戶根本不會觀察到，這樣做只能是設(shè)計師的自嗨。設(shè)計師容易漏掉的是熱區(qū)范圍的確定，盡管Ios平臺和Android平臺都有對于Icon范圍的定義，但針對產(chǎn)品的icon熱區(qū)范圍調(diào)整還是要有設(shè)計師自己的想法。這樣才能增加Icon設(shè)計的思考價值，也更符合產(chǎn)品自身的特色。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

飛豬首頁的歷史

我在2015年畢業(yè)后，就來到了飛豬。其實當(dāng)時還沒有飛豬的概念，那時候的 app 叫「阿里旅行·去啊」，后來了解到我們還有過「淘寶旅行」、「阿里旅行」、「去啊」等這些曾用名。

說起名字還有個故事。我剛工作那會打Uber，司機(jī)們都特?zé)崆?，打車能和你聊一路?

有個司機(jī)問我：「你是在阿里哪個部門工作呀？」，我就說：「去啊」。司機(jī)很激動，馬上說：「哦哦，我知道，那個去哪兒網(wǎng)，頭像是綠色駱駝的那個！我老婆手機(jī)里就裝了一個！」

我連忙說：「不是的不是的，我們叫去啊，不叫去哪兒。我們也叫阿里旅行，或者淘寶旅行，你知道吧…」

然后我們討論了一路「去啊」和「去哪兒」的區(qū)別。

雖然直到我下車，我也不知道司機(jī)老哥有沒有弄明白。

這個事其實很有代表性。在當(dāng)時，旅行市場最大的品牌就兩個，攜程和去哪兒。雖然市場上還有同程、窮游、螞蜂窩、驢媽媽、藝龍等旅行相關(guān)的app，但我們就叫「去啊」，其實已經(jīng)暴露了我們的目的（并不是為了讓大家想下「去哪兒」的時候，不小心下載了「去啊」），而是我們當(dāng)時的目標(biāo)就是要做一個對標(biāo)OTA 的旅行預(yù)訂工具。

這時候我們的首頁和他們比起來，簡直滿分。當(dāng)然，我指的是相似度，滿分。

這其實就是飛豬的起源版本首頁。在這里我們可以看到巨大的機(jī)票、酒店這樣的旅行類目預(yù)訂的入口，其實就是為了讓用戶有「預(yù)訂」的認(rèn)知。

直到有一天，產(chǎn)品經(jīng)理在壓榨設(shè)計師出圖，我隱約聽到「我們是平臺，不是OTA」這樣的說法。那個設(shè)計師熬掉好幾根頭發(fā)之后，方案確定了，我們便有了下面這個版本的首頁。

我們看到，這個版本的首頁看起來不像攜程了，更像是當(dāng)時的淘寶。那個產(chǎn)品經(jīng)理把他的 iphone5s 擦得锃亮，非常興奮地給我展示：「你看，這個首頁，改得太棒了！比以前好多了！」

其實以我當(dāng)時的聰明才智，真沒看出來。但后來想想，這個改版其實是一次覺醒。這個改版意味著，我們要在平臺的業(yè)務(wù)模式下，在機(jī)票酒店這樣的預(yù)訂心智之外，找到自己的特色。

而這種差異化的思維模式影響了接下來一年多的首頁設(shè)計。

剛開始接首頁時，我們嘗試從內(nèi)容進(jìn)行突破，將商品羅列升級為旅行內(nèi)容。

同時，在品牌升級為飛豬之后，我們嘗試為用戶提供更個性的服務(wù)，基于用戶可能想去、準(zhǔn)備出發(fā)、正在旅行等不同階段，設(shè)計了「目的地個性化」模塊，讓有不同需求的用戶可以看到不一樣的目的地、玩法、商品。

后來我們新起了場景化項目，有個業(yè)務(wù)小組產(chǎn)出了全球第一站、周邊好去處這兩個出境、周邊的導(dǎo)購場景。

并且我們將首頁所有的信息都進(jìn)行了個性化處理，讓每個人每天可以看到不一樣的內(nèi)容。

當(dāng)然，首頁的樣式看起來越來越美好了，但我們?nèi)匀徊粷M意。

歷史版本首頁的問題

上面這些版本的首頁，有一個共性：我們一直圍繞著業(yè)務(wù)的布局，在首頁上設(shè)計業(yè)務(wù)模塊。比如下面的這些模塊：

而體現(xiàn)在數(shù)據(jù)上，也有這么幾個共性：

• 用戶最主要的點擊發(fā)生在頭部類目預(yù)訂；
• 用戶在頁面中尾部的點擊非常低；
• 用戶可能看到了頁面中尾部，但仍不點擊。

用一句話來總結(jié)，就是用戶對排列業(yè)務(wù)模塊搭出的首頁沒有建立認(rèn)知。

2018年4月開始，我們著手對飛豬首頁進(jìn)行一輪整體的改版。在改版之前，我們首先需要對之前首頁進(jìn)行一次全面的體檢。

在這里，我們使用 NLP 理解層次，來深入理解飛豬首頁到底發(fā)生了什么。

簡單介紹一下 NLP 理解層次：我們一般可以通過6個層次理解事物，由低到高分別是：環(huán)境、行為、能力、BVR（信念/價值觀/原則）、身份、精神。這套框架幾乎可以幫我們分析理解一切問題。

△ 用NLP分析問題背后的原因

1. 環(huán)境：飛豬業(yè)務(wù)主導(dǎo)的環(huán)境

飛豬的整體環(huán)境核心是以業(yè)務(wù)為導(dǎo)向的，設(shè)計的大部分工作是屬于支持性質(zhì)的。在首頁工作中，我們做得更主動一些，常給一些提案，也可以算作是共創(chuàng)。但核心的決策權(quán)是屬于業(yè)務(wù)和產(chǎn)品的，所以這就導(dǎo)致，飛豬最后上線的東西，往往優(yōu)先考慮的是業(yè)務(wù)的重要性。

2. 行為：首頁根據(jù)業(yè)務(wù)調(diào)整不斷改版

我們始終在跟蹤首頁的數(shù)據(jù)，并根據(jù)數(shù)據(jù)的變化、業(yè)務(wù)的傾向性對首頁進(jìn)行日常的調(diào)整。

3. 能力：設(shè)想的場景沒有做好，維度少/內(nèi)容欠佳

我們希望做場景化，其實是很好的想法。但業(yè)務(wù)前期只嘗試了周邊、出境兩個場景，這很難匹配旅行用戶各種各樣的偏好。

同時，飛豬在生產(chǎn)高質(zhì)量內(nèi)容的方面做得不夠，產(chǎn)出的內(nèi)容沒有讓用戶產(chǎn)生興趣。

4. BVR：內(nèi)容數(shù)量>內(nèi)容質(zhì)量

因為飛豬的內(nèi)容起步晚，在起步初期的目標(biāo)是提高內(nèi)容的數(shù)量，而非生產(chǎn)高質(zhì)量的爆款文章。所以當(dāng)后續(xù)我們需要用到內(nèi)容時，常常擔(dān)心取到一些充數(shù)的質(zhì)量不高的內(nèi)容。

5. 身份：售賣平臺

飛豬以往的定位仍然是旅行商品預(yù)訂平臺，這也會在一定程度上，導(dǎo)致我們不會在提升內(nèi)容質(zhì)量上投入太多。

6. 精神：？

這個層面我只能說我個人的理解：我希望飛豬能讓旅行者享受更多旅行的快樂。

2018年飛豬首頁做的改變和突破

通過分析我們發(fā)現(xiàn)，飛豬的身份定位，對我們設(shè)計產(chǎn)品會有從表及里的深度影響。如果我們定位是旅行預(yù)訂工具，必然只能做出小的創(chuàng)新。所以如果要做大改變，首先要定義飛豬的新身份。

而恰巧，2018年飛豬迎來了新的品牌定義──「全球fun肆玩」。我們開始從旅行預(yù)訂平臺進(jìn)行更大膽的轉(zhuǎn)型，試圖建立新的在線旅游生態(tài)。

在這個身份轉(zhuǎn)變的契機(jī)下，我們在2018年對首頁進(jìn)行了升級。

1. 矯正目標(biāo)

飛豬的新目標(biāo)叫「全球fun肆玩」，關(guān)鍵在fun。我們需要通過設(shè)計，激發(fā)用戶旅行的欲望。

2. 重構(gòu)框架

舊版飛豬的框架依然是圍繞業(yè)務(wù)架構(gòu)建立的。而在這次改版中，我們希望基于每一個普通旅行者的視角，來建立新的首頁框架。

在建立框架之前，我們需要挖掘的是，旅行是什么？

有人說旅行是機(jī)酒火汽的預(yù)訂，其實不是。我理解的旅行指的是人，花一段時間，離開現(xiàn)在的位置，去感受快樂。其中包含了角色、目的、地點、時間4個關(guān)鍵的因素。而取決于角色的不同，每個人在旅行上作出的決定也是不同的，所以「人」是旅行真正的內(nèi)在因素。

而我們認(rèn)知里零散的旅行方式，如：跟團(tuán)游、自由行、親子游、出境游、周邊游只是被內(nèi)在因素對旅行產(chǎn)生影響的結(jié)果。

而偏偏旅行還要求我們產(chǎn)生玩的想法，留出足夠的時間，從一個地方去另一個地方。當(dāng)定機(jī)票酒店已經(jīng)不再是個難題的時候，我們決策困難的原因更多是在自身：我不知道自己想要什么樣的旅行。

所以我們解析了用戶的旅行特性，發(fā)現(xiàn)每個用戶喜歡的內(nèi)容、商品，都是不同，且是特色鮮明的。所以我們的核心需要做到的，就是讓這些無數(shù)的普通人，都能感知自己的內(nèi)在，并找到和自己內(nèi)在適合的旅行方式。而直接放商品、內(nèi)容都讓用戶難以理解。所以我們選擇了更理想的方式來讓用戶理解自己的內(nèi)在──主題。

我對主題這兩個字的定義是：一句話描述你想要的旅行。這句話可以是：情侶最愛去、國內(nèi)必玩地、舌尖上的中國、隱居西子湖畔等等和你匹配的點。

我們初步將主題組織成了靈感、計劃、商品三個維度，希望能在玩什么、什么時間去、買什么等旅行決策上，對用戶由內(nèi)而外地產(chǎn)生幫助。

3. 培養(yǎng)能力

在搭建好了框架后，我們需要的就是更好的承接能力。核心考驗的就是內(nèi)容的生產(chǎn)和算法的組織。

為了讓用戶看到更好的內(nèi)容，我們使用了新的后臺，可以通過算法，動態(tài)選出具有相似主題的無數(shù)商品，搭建頻道，并進(jìn)行投放，做到千人千面。

在內(nèi)容質(zhì)量上，我們還將繼續(xù)尋找突破口，進(jìn)行新的升級。

飛豬2018的首頁，我們也在視覺上打破傳統(tǒng)，做了很多突破。

突破空間 – 打破「屏效比」的偽命題

在移動端設(shè)計的時候，設(shè)計師往往被要求利用屏幕的空間。

而業(yè)務(wù)方和 PD 也非常機(jī)智，總能有一些金點子，例如：「區(qū)塊再矮一點」、「文字再小一點」、「給我多放幾排」、「一排再給我多放幾個」。

在這樣的訴求下，我們的界面設(shè)計常常會失去很多留白空間，導(dǎo)致信息密度會很大。而太大的信息密度反而會影響用戶的閱讀欲望，甚至降低用戶的閱讀效率。

而隨著設(shè)計影響力的增加，大家認(rèn)識到了一個更美的、更能討人喜歡的界面，不是什么都放上來的界面。

圖片 – 大圖凸顯內(nèi)容品質(zhì)

由于以往對空間利用的苛刻，我們的圖片常常會被壓縮得很窄、很矮，有時甚至無法形成系統(tǒng)的圖片比例。而在解決了空間的問題后，我們可以按照1 : 1、16 : 9、4 : 3這樣的標(biāo)準(zhǔn)比例來設(shè)計圖片坑位的大小。這些比例能更好地幫助用戶閱讀圖片的內(nèi)容。

文字 – 不是裝飾，更不僅是內(nèi)容

隨著iOS11的推出，大標(biāo)題對設(shè)計已經(jīng)產(chǎn)生了較大的影響力。我們在設(shè)計首頁時就做了大膽的嘗試，使用簡短有力的大標(biāo)題和留白作為每個模塊的區(qū)隔，讓用戶的視線可以從一個模塊自然地過渡到下一個模塊。

同時，我們盡量保證內(nèi)容是簡短有力的，這樣就可以用更大的字號，減少用戶閱讀的成本。

色彩 – 來自于旅行的顏色

以往在猜你喜歡中，我們的標(biāo)簽都是用黃色或者黑色底，蓋在圖上來做的。但這會影響圖片的品質(zhì)，同時較小的標(biāo)簽文字蓋在圖上，其實并不適合用戶閱讀。

所以我們優(yōu)化了方案，讓小文字和圖片不要重疊，提升了文字的閱讀性。同時通過改變標(biāo)簽文字的顏色，讓標(biāo)簽成為了商品卡片的點綴。

未來的首頁

我們回顧了飛豬首頁的設(shè)計歷史，并看到了2018年我們的探索。這背后伴隨的是行業(yè)、市場、用戶的變化，提醒著我們需要把產(chǎn)品設(shè)計得更優(yōu)秀，來面對無盡的挑戰(zhàn)。

2018年飛豬首頁的改版，也代表著首頁設(shè)計模式的轉(zhuǎn)變，從業(yè)務(wù)爭奪入口轉(zhuǎn)型為基于用戶體驗，設(shè)計師、產(chǎn)品經(jīng)理、業(yè)務(wù)方、技術(shù)團(tuán)隊協(xié)同作戰(zhàn)的模式。

而作為設(shè)計師，更需要始終圍繞著用戶，在桎梏中跳舞，做出好體驗的設(shè)計。

2018飛豬首頁的改版只是開始，飛豬才剛剛轉(zhuǎn)型，未來我們將更加緊密地圍繞用戶，提供質(zhì)的服務(wù)。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

背景，應(yīng)該很好理解，我相信應(yīng)該沒有人會不清楚，比如這里我們做的這個案例，很明顯白色的底就是背景。如果讓大家填充背景色，我相信大部分人的本能反應(yīng)就是填充基本色相。

比如這里的背景我們填充了紅色。

當(dāng)然其他任何色相在原則上都是可以的，因為都是背景色。

但是我們本期教程所要探討的不是這種在色相上的背景色，那我們所要總結(jié)的背景色規(guī)律是什么呢？我們先來看圖。

大家可以思考一下，看看能不能發(fā)現(xiàn)這其中的規(guī)律。這里的背景色類型并不是我們通常所認(rèn)為的具體色相，也不是在色調(diào)上的劃分，而是從更寬泛的角度去探索背景色的規(guī)律，然后更好的運(yùn)用到我們的設(shè)計當(dāng)中。

那我們就來看看背景色的四種類型是如何劃分的：分別是白底型、淡色型、深色型、黑底型。

白底型

首先我們來看白底型。

說到白底不能不說白色，白色是沒有任何色彩的顏色，是非常好的調(diào)和色，可以和任何色彩搭配。

而研究色彩最重要的就是要了解它的屬性和氣質(zhì)，而任何色彩都有兩面性，白色最突出的屬性就是干凈、簡潔、純潔等等，再結(jié)合相應(yīng)的設(shè)計內(nèi)容和題材也可以傳遞出非常多的屬性，只要和這些屬性相吻合都可以使用白色。

而白底型又分為大白底和小白底，比如畫面中的這個就屬于小白底，也就是說雖然是白色背景，但是內(nèi)容信息比較多留白比較少，就屬于小白底型。小白底型具有的意象是實用、干凈、知性以及舒暢、通透、簡潔等等。

大白底型也很容易理解，就是類似這種留白較多內(nèi)容或元素較少的版面，我們平時說的比較多的極簡和留白風(fēng)格，基本上都是這種大白底型的。大白底型具有的明顯屬性是簡約、樸素、開放、文藝、雅致、清淡等等。下面我們來看看白底型的相關(guān)作品。

這是一個美食招貼，畫面以白色為背景，通過文字的編排以及不同色彩的食品來豐富版面，干凈、簡潔的同時又能夠很好的讓人關(guān)注食品的本身，而且這里使用的就是小白底型。

這個海報也是小白底型，像這種在白色背景上使用黑色文字、淡色圖形或插畫的設(shè)計也很多，給人的感覺非常干凈，直接。

這種純文字的海報相信大家也肯定見過不少，就是白色背景上方黑色的純文字編排，看似簡單其實是非常難的一種形式，難的地方不是色彩，而在于對版式能力的考驗。

這個海報雖然也是白底黑字的純文字編排，但是也屬于大白底型，文字信息量非常少，屬于極簡留白的風(fēng)格，給人的感覺就是簡約、雅致甚至是文藝和藝術(shù)。

這是一個純凈水的海報，也是采用的白底型，上方的文字和圖形以藍(lán)色為主、紅色為輔，藍(lán)色代表水，紅色是印章的顏色，通過元素之間合理的空間以及整體的白色背景，體現(xiàn)出了純凈水產(chǎn)品的天然、健康、純凈，沒有任何其他雜質(zhì)。

淡色型

我們再來看看第二種背景型，淡色型。

淡色是比較冷靜的色調(diào)，沒有什么很強(qiáng)的主張，給人冷淡的感覺，所以淡色的使用范圍就有局限，但是只要合理的運(yùn)用淡色的特點，就可以發(fā)揮出淡色的最大優(yōu)勢。

淡色最適合表現(xiàn)纖細(xì)、優(yōu)雅、溫柔等屬性，淡色會讓人產(chǎn)生幸福溫柔的情緒，讓人們進(jìn)入沒有刺激感的色彩世界，但是淡色調(diào)沒有積極性，太過溫柔反而給人冷淡的印象。

背景用淡色調(diào)雖然也可以體現(xiàn)白色的簡潔、干凈，但是卻多了些色彩本身的傾向性，無論用什么色相都可以給人優(yōu)雅、簡潔的印象，淡色最適合表現(xiàn)女性、優(yōu)雅、平和等印象，富有情緒變化，輕柔、輕快。下面我們還是來看看相關(guān)設(shè)計。

這個海報的背景就是采用的淡色型，背景是比較淡的黃色，海報中唯一色彩比較豐富的元素就是五個小人的插畫，而且以暖色調(diào)為主，所以背景使用暖色調(diào)的黃色可以讓整體版面的色彩很均衡，結(jié)合人物的卡通插畫給人一種純真、輕柔，以及淡雅的恬靜風(fēng)格。

這個海報是關(guān)于美食產(chǎn)品的，典型的日式風(fēng)格，包括書法字、櫻花等等，這里的背景雖然帶有微弱的漸變和紋理，但是并不影響整體的淡粉色調(diào)，雖然是美食主題，但是這種淡雅、清新、柔軟的風(fēng)格一點都不會影響到人的食欲。

這個海報雖然是關(guān)于文化的，但是整體的風(fēng)格偏向這種卡通、插畫的感覺，而且色彩使用的也比較豐富，純度和明度都控制的很好，整體協(xié)調(diào)統(tǒng)一，背景色使用了淡色的黃色，統(tǒng)一了整體畫面的色調(diào)，充滿了可愛、童趣。

深色型

第三種背景類型就是深色型。

深色就是在純色中加入大量的黑色，從而讓純色變得內(nèi)斂了許多，而且增添了力量感，更加嚴(yán)肅莊重。

深色可以表現(xiàn)強(qiáng)力感和深度，這是其他色調(diào)所不具備的，如果說淡色是女性的顏色，深色就是男性的顏色，充滿了力量和陽剛，當(dāng)然這并不是絕對的。

深色融合了純色和黑色的特點，可以有效的突顯位于背景之上的元素和色彩，同時又帶有強(qiáng)烈的情緒，具有高格調(diào)。深色型最大的特點就是深沉，給人堅實可靠的感覺，并且還帶有神秘和幻想，配合適當(dāng)?shù)纳嗫梢猿錆M激情。

美食相關(guān)的海報很多都喜歡用深色型背景，尤其是傳統(tǒng)類美食，還有就是巧克力、咖啡相關(guān)的主題。這個海報的背景就是使用了深色調(diào)，給人一種高檔感和格調(diào)感。

這個海報的背景色使用了深色調(diào)的藍(lán)色，結(jié)合白色的線稿畫，充滿了神秘感，而且很有深度，同時又不失傳統(tǒng)和古典的韻味。

這是一個酒類招貼海報，深色的背景沒有任何其他顏色的干擾，純白色的文字，使得整個版面干凈利落，同時背景的深色又為畫面帶來力量感、強(qiáng)勁而有力，正符合了酒品類的風(fēng)格和屬性。

黑底型

最后一種背景型就是黑底型。

黑色代表什么都看不見，是抑制力很強(qiáng)的顏色，與黑色組合的顏色都會被很好的襯托出來。

黑色最適合用來表現(xiàn)奢華、男性和神秘，也可以表現(xiàn)幻想性、神秘性和強(qiáng)大的力量，同時黑色也代表了閉鎖，是帶有不安和恐懼的顏色，而且還代表犯罪和暴力。

黑色作為背景的時候，會激發(fā)觀者的想象力，讓其他色彩看上去更加鮮艷。任何元素在黑色的背景上都富有神秘感和幻想，黑色面積越大這種感覺越明顯，此外黑底型最突出的特點就是力量感、高級、內(nèi)斂和莊重。

這是張藝謀導(dǎo)演的電影《影》的其中一款海報，并沒有使用太過復(fù)雜的背景，就是采用純黑色為底色，上方水墨武俠的人物以及書法字，帶有傳統(tǒng)、古典、深沉的韻味，如果是看過這部電影的同學(xué)回過頭來看這個海報，你會發(fā)現(xiàn)其實電影中的爾虞我詐、人心險惡也都蘊(yùn)藏在黑色的世界里。

這個海報的主體人物是日本拳擊手村田諒太，也就是和體育、運(yùn)動相關(guān)的內(nèi)容，而背景正是使用了黑底型配色，體現(xiàn)出男性的陽剛以及拳擊的力量感。

這個電影海報也是大面積的黑色背景，上方的元素很簡單，就是地球和文字，通過光影的處理和深邃的黑色，給人的感覺很直接，神秘、恐怖、遙不可及。

這個海報相對來說比較偏藝術(shù)化，純黑色的背景，各種幾何圖形，簡單的文字內(nèi)容，給人一種高級感和格調(diào)感。

這個海報從字面意思以及圖形來看應(yīng)該是與地震相關(guān)的主題，那么自然災(zāi)害肯定是非常嚴(yán)肅的話題，所以設(shè)計者也很簡單直接，黑底白字，讓人有效的閱讀文字信息，充滿了正式感和莊重感。

案例演示

最后我們來看看案例演示，這里我們設(shè)計一個書籍封面，書籍的名稱是無聲告白。

首先我們創(chuàng)建出網(wǎng)格，根據(jù)網(wǎng)格來編排文字信息，這里我們創(chuàng)建的是橫向八欄，豎向五欄的模塊網(wǎng)格。

然后先將書籍名稱編排到版面兩側(cè)，各占一個格子，中間放置引言信息，同樣占據(jù)一個網(wǎng)格寬度，標(biāo)題放在版面上方可能會顯得有些重。

所以這里我們可以將標(biāo)題下移，然后頂部編排作者名和書籍的英文名。

然后將其他文字內(nèi)容編排到版面的最下方。因為我們主要是講色彩，所以文字編排這塊就不過多講解了。

然后將書脊部分加入進(jìn)來，將書籍名稱、作者以及出版社的相關(guān)信息編排好，版式部分基本就差不多了。

下面我們根據(jù)本期教程所講的背景類型來配色，而這里應(yīng)該使用哪種背景型呢？這個要根據(jù)設(shè)計的內(nèi)容來決定，因為這本小說的名字叫做無聲告白，而且小說的故事內(nèi)容也比較壓抑充滿悲劇色彩，所以這里我決定使用黑底型的配色。

將背景填充黑色，文字反白。但如果是現(xiàn)在這樣單純的黑色，可能看上去會顯得有些單調(diào)。

所以這里我們從書籍名字中的無聲來找靈感，為背景填充象征聲波的抽象圖形來豐富版面。

最后添加書籍的腰封，使用白色來形成對比，腰封上的文字填充黑色，這個書籍封面就設(shè)計完成了。

我們來看下效果圖，整體的黑色調(diào)還是比較有這種陰暗、憂郁、孤獨的感覺的。

那有的人可能會有疑問，其他三種背景色就不可以么？當(dāng)然也可以，配色在很多情況下并不是對錯的問題，而是要看你想通過色彩傳遞出什么樣的感覺。所以這里我也做了其他三種背景型的配色，如果單從版面的整體配色感覺來看，也是沒有任何問題的。

還是那句話，關(guān)鍵點是你想讓這個設(shè)計給人什么樣的感覺，如果想傳遞白底型所代表的印象，那么你就可以使用白底型。

同樣的道理，如果你想傳遞淡色型的色彩印象，當(dāng)然你也可以使用淡色型。

如果想傳遞深色型的意象那就使用深色型，這個邏輯應(yīng)該很容易理解。

本期教程到這里就結(jié)束了，我們主要從白底型、淡色型、深色型、黑底型這四個角度出發(fā)，來探討不同的背景型所傳遞出的不同感受。這四種背景類型屬于大的范圍，如果想對配色深入研究，當(dāng)然背景色不可能就四種，理論上來講任何色彩都可以充當(dāng)設(shè)計的背景，所以除了要掌握好這四種背景型，還要做到兼顧色相的屬性和色調(diào)的屬性，這樣才是一個多維度視角的配色，就像我們開頭講到的，配色就是一座高山，你知道通往山頂?shù)牡缆吩蕉啵憔涂赡鼙葎e人更快地到達(dá)山頂。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

那么在對比了幾個常用的組件庫（Ant Design / Element / iView）并結(jié)合自身的工作經(jīng)驗之后，我選擇了一些常用的組件，來和大家簡單總結(jié)下它們的使用場景以及可能出現(xiàn)的誤區(qū)。

在Ant Design 的組件庫中，分為了通用、布局、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋、其他這七大類組件。今天先來看看數(shù)據(jù)錄入中的相關(guān)組件，我將其又分為了手動輸入以及點擊選擇兩大類。（評分、上傳等特征明顯的組件就不在此贅述了。）

手動輸入

1. 輸入框Input

輸入框是數(shù)據(jù)錄入中最常見也是最基礎(chǔ)的組件，在需要用戶輸入內(nèi)容的時候即可選用。

除了常規(guī)的輸入框，帶前/后綴、帶圖標(biāo)、帶按鈕的輸入框也是較常用到的。

在輸入內(nèi)容中頭/尾是相對固定的時候，我們就可以采用帶前/后綴的輸入框來減少用戶手動輸入，比如網(wǎng)址輸入框就可以加上后綴。

有時候為了幫助用戶了解輸入內(nèi)容的類型，可以在輸入框中加上圖標(biāo)，比如輸入用戶名或密碼的時候。

帶按鈕的輸入框最常使用的場景就是搜索框了。

2. 自動完成AutoComplete

自動完成其實是輸入框Input 的一項功能，但是 Ant Design 和 iView 中將其單獨拎出來了，為了避免大家搞混，我們這兒也單獨講。（Element中在輸入框 – 帶輸入建議）

顧名思義，自動完成就是輔助用戶輸入。在輸入一部分內(nèi)容后，提供相關(guān)的備選項，不僅可以減少手動輸入，還能更精準(zhǔn)的輸入。常見的使用場景就是搜索框了。

3. 數(shù)字輸入框InputNumber

數(shù)字輸入框特用于需要輸入范圍數(shù)值的場景（電話QQ等號碼不宜使用）。右側(cè)的步進(jìn)器則可以幫助用戶精準(zhǔn)控制數(shù)值的增減。

當(dāng)然作為輸入框的一種，也可以加上前/后綴來減少固定內(nèi)容的輸入，比如%或者貨幣單位（￥、$、元、円）。

點擊選擇

1. 單選框Radio

單選框顧名思義就是在一組選項中僅可選擇一個時使用。

由于單選框的選項都是平鋪展示的，所以選項不宜過多，當(dāng)選項較多時建議采用選擇器Select（后文會提到）。

按鈕形式的單選框也可以被當(dāng)作標(biāo)簽頁Tabs 來使用（標(biāo)簽頁Tabs的本質(zhì)其實就是單選框）。

2. 多選框Checkbox

多選框則是在一組選項中需要選擇多個時使用。

同樣，由于是平鋪展示，選項不宜過多。

多選框不同于單選框Radio 的是，它可以單獨使用，來表示兩種狀態(tài)之間的切換，類似于開關(guān)Switch。區(qū)別在于開關(guān)Switch 會直接觸發(fā)改變狀態(tài)，多選框則一般用于狀態(tài)標(biāo)記，需要配合提交操作使用。

3. 選擇器Select

選擇器也是數(shù)據(jù)錄入中很常見的組件，它以下拉菜單的形式來呈現(xiàn)選項（選項較少時建議采用單選框Radio 或多選框Checkbox 平鋪展示）。

除了單選，還有多選的形式。

上文輸入組件中提到的自動完成AutoComplete，其實也是選擇器的一種衍生方式──帶輸入的選擇器。

4. 級聯(lián)選擇Cascader

級聯(lián)選擇是指，在選擇器Select 選項數(shù)量較大時，采用多級分類的方式將選項進(jìn)行分隔，便于用戶選擇。比如地址選擇，就可以按省市區(qū)一層層分類。

5. 穿梭框Transfer

當(dāng)多選框Checkbox 選項過多時，除了選擇器Select 的多選形式，還可以用穿梭框的形式來呈現(xiàn)。相比于選擇器Select，穿梭框占據(jù)更大的空間，當(dāng)然也可以展示選項的更多信息。

6. 日期選擇器DatePicker

當(dāng)需要錄入日期的時候，可以選用日期選擇器。用戶從彈出的日歷面板中直接選取即可。

當(dāng)然，需要錄入一段時間的時候，也可以同時選擇開始日期和結(jié)束日期。

7. 時間選擇器TimePicker

時間選擇器與日期選擇器DatePicker 幾乎一樣，從彈出面板中選擇時間即可。

時間選擇器和日期選擇器DatePicker 還可以組合使用。

8. 滑塊Slider

滑塊的使用場景類似于數(shù)字輸入框InputNumber，需要在某個范圍內(nèi)錄入數(shù)值。不同的是，它可以直接選取而不用手動輸入。

當(dāng)然，也可以和數(shù)字輸入框InputNumber 配合使用。

還可以選擇某個區(qū)間，比如價格區(qū)間。

當(dāng)數(shù)據(jù)選項較少或者離散（不連續(xù)）時，還可以采用分段的形式。

總結(jié)

今天主要講了數(shù)據(jù)錄入的相關(guān)組件，共11個：

• 輸入框Input：最基礎(chǔ)組件，除常規(guī)外，還有帶前/后綴、帶圖標(biāo)、帶按鈕的形式。
• 自動完成AutoComplete：輸入框Input 的一項功能，提供備選項輔助輸入。
• 數(shù)字輸入框InputNumber：錄入范圍數(shù)值，帶步進(jìn)器精準(zhǔn)控制，還可帶前/后綴。
• 單選框Radio：只能選擇一個，選項不宜過多，按鈕形式可做標(biāo)簽頁Tabs。
• 多選框Checkbox：可多選，選項不宜過多，單個使用可做開關(guān)Switch。
• 選擇器Select：以下拉菜單的形式呈現(xiàn)更多選項，可單選/多選，可帶輸入。
• 級聯(lián)選擇Cascader：選項數(shù)量較大，采用分類的方式將選項分隔。
• 穿梭框Transfer：可多選，展示選項更多的信息。
• 日期選擇器DatePicker：選擇日期，可以選擇一段日期。
• 時間選擇器TimePicker：選擇時間，可以與日期選擇器DatePicker 組合使用。
• 滑塊Slider：錄入范圍數(shù)值，可與數(shù)字輸入框InputNumber 組合使用，可選擇區(qū)間，可用分段的形式。

  藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

插畫一方面富于靈活表現(xiàn)，可根據(jù)設(shè)計師思維和想法進(jìn)行各類創(chuàng)意，適用于各類視覺主題，另一方面又與嚴(yán)選簡約、精致的品牌形象契合度較高，因而是嚴(yán)選專題設(shè)計的一個主要表達(dá)方向，經(jīng)常在嚴(yán)選各類專題設(shè)計中得到應(yīng)用，受到廣大用戶的喜愛與推崇。

許多剛?cè)胄械囊曈X設(shè)計師認(rèn)為插畫風(fēng)格專題設(shè)計需要非常專業(yè)的插畫功底才能完成，因而盡管覺得插畫風(fēng)格專題唯美、形象卻敬而遠(yuǎn)之不敢輕易嘗試，今天個人從以下五個步驟去解構(gòu)插畫風(fēng)格專題設(shè)計，通過相對簡單易學(xué)的基本操作，讓沒接觸過插畫風(fēng)格的設(shè)計師也能輕松駕馭與運(yùn)用。

嚴(yán)選插畫風(fēng)格設(shè)計五部曲

整體構(gòu)思

和所有風(fēng)格的視覺設(shè)計一樣，插畫風(fēng)格設(shè)計首先也需要進(jìn)行整體的需求分析，主要進(jìn)行以下方面工作。

1. 分析受眾與目標(biāo)

首先需要對專題的受眾進(jìn)行簡單的社會化分析，通過分析大體了解受眾的年齡層次、收入水平、審美品味、興趣愛好等，根據(jù)社會化特征信息建立用戶畫像，有利于設(shè)計方向與基調(diào)的確定。比如嚴(yán)選的目標(biāo)用戶定位于20-35歲，具有穩(wěn)定的工作與收入，追求高品質(zhì)生活的都市白領(lǐng)。

其次需要深入分析專題所需要表達(dá)的目標(biāo)和信息，通過色調(diào)、版式、字體、元素等設(shè)計手法準(zhǔn)確傳達(dá)信息內(nèi)容的同時，帶給用戶更多美的感受，升華主題思想，強(qiáng)化品牌概念與服務(wù)。

2. 確定情感關(guān)鍵詞

所謂情感關(guān)鍵詞，就是我們產(chǎn)品的視覺所要表達(dá)的情感感受，比如情人節(jié)專題確定的「浪漫」、「溫馨」、「甜蜜」，新年專題的「喜慶」、「歡快」、「熱烈」，父親節(jié)的「責(zé)任」、「擔(dān)當(dāng)」、「感恩」等等。確定好專題活動的關(guān)鍵詞后，將有助于我們進(jìn)行整體風(fēng)格的把握與塑造。

3. 整體意境構(gòu)思

確定好專題的方向后，接下來就可以構(gòu)思整體的意境以及挑選合適的素材，如新年專題我們會想到用大面積紅色作為主色調(diào)的布局，結(jié)合鞭炮、春聯(lián)、燈籠、年畫等中國傳統(tǒng)元素，通過合理的組織和編排，加上中國風(fēng)的字體設(shè)計與適當(dāng)?shù)募?xì)節(jié)完善，共同勾勒營造一派喜慶祥和的氣象。

提取輪廓

基于前一步驟的構(gòu)思的整體意境，我們需要對挑選的現(xiàn)實素材進(jìn)行插畫化改造。通常我們通過鼠標(biāo)勾選的形式，將素材的輪廓勾勒出來并填充相應(yīng)的顏色，使寫實的風(fēng)格形象化、概括化和扁平化。

簡化圖形

插畫風(fēng)格相對實物風(fēng)格，去掉了大量的寫實細(xì)節(jié)，只保留主要的特征信息因而顯得扁平簡約但不失形象生動。因此在這個步驟我們需要將勾勒好的圖形進(jìn)行簡化操作，以簡單圖形代替寫實描繪、多以面和色塊去代替原有的細(xì)節(jié)，簡化后的圖形具有高度的概括性。

完善細(xì)節(jié)

除了保證插畫的形象性與直觀性外，我們需要進(jìn)一步對素材進(jìn)行細(xì)節(jié)上的完善，以滿足進(jìn)一步的審美性與趣味性，同時賦予元素一些創(chuàng)造性，可以嘗試通過以下方法進(jìn)一步完善。

1. 移花接木

移花接木指將現(xiàn)實中不同時間和空間各類元素進(jìn)行解構(gòu)和重組，創(chuàng)造出一些妙趣橫生的新事物，增加插畫內(nèi)容的趣味性。

2. 區(qū)分主次

將重要的、核心的元素進(jìn)行強(qiáng)調(diào)刻畫、次要的元素進(jìn)行弱化處理，從而拉開主次元素的層次關(guān)系，使畫面更加具有層次感和空間感。

3. 突破現(xiàn)實

通過調(diào)整元素間的比例關(guān)系，夸張的創(chuàng)造現(xiàn)實中并不存在的事物，更加容易吸引用戶的目光焦點。

優(yōu)化整體

經(jīng)過以上的步驟，我們的素材基本已完成插畫風(fēng)格的改造，但插畫素材在整體專題界面中并非孤立的存在，而是和整體色調(diào)風(fēng)格、版式、字體設(shè)計形成一套有機(jī)和諧的整體，共同去呈現(xiàn)專題需要表達(dá)的信息與目標(biāo)。

案例分析

1. 千萬和春住專題

整體構(gòu)思

情感關(guān)鍵詞：清新、唯美

整體意境構(gòu)思：以嫩綠色作為主色調(diào)，結(jié)合桃花、陽光、汽車、風(fēng)箏營造輕松出游踏青的歡快意境。

提取輪廓

從田野、桃花等幾張現(xiàn)實圖片中將頁面需求的主體元素進(jìn)行提取，作為背影進(jìn)行主體頁面的大面積輔色，將整體的色調(diào)感覺搭建出來。

簡化圖形

初步提取的輪廓由于過于具象，與唯美的主題風(fēng)格不太協(xié)調(diào)，在這一步我們將主體元素進(jìn)行簡化處理，用圓潤、可愛的幾何圖形加上明快的色塊去代替樹木，整體更加扁平、卡通化，營造更加輕松、自由的氛圍。

完善細(xì)節(jié)

為了更好的體現(xiàn)春天外出郊游的意境，我們對細(xì)節(jié)進(jìn)行完善，增加了汽車、風(fēng)箏等小元素，將桃花進(jìn)行樹枝刻畫、太陽光芒的刻畫等處理，同時將遠(yuǎn)處山景進(jìn)行虛化，形成層巒疊障的連綿山脈，拉開了畫面的層次空間。

優(yōu)化整體

最后我們根據(jù)主題進(jìn)行專題的字體設(shè)計，將常規(guī)的宋體進(jìn)行變形處理，部分筆劃好似春風(fēng)輕撫而飄逸，又加上了象征春天生機(jī)勃勃的嫩芽，富有生活趣味。通過一片桃花作為主體分別呈放若遇到新歡、若重拾舊愛的對應(yīng)專題好禮，使頁面整體和諧統(tǒng)一。

2. 愛戀物語專題

目標(biāo)：呈現(xiàn)出情人節(jié)情侶間的愛情的甜蜜與浪漫。

情感關(guān)鍵詞：浪漫、甜蜜

整體意境構(gòu)思：以甜美暖色作為主色調(diào)，通過主體元素禮物盒與情侶間夸張的比例關(guān)系抓住用戶眼球，浪漫甜美同時不失趣味性。

3. 新春集市新年專題

目標(biāo)：呈現(xiàn)出春節(jié)喜慶熱鬧與琳瑯滿目的商品。

情感關(guān)鍵詞：喜慶、熱鬧

整體意境構(gòu)思：以中國傳統(tǒng)舞獅、牌樓、鞭炮等作為主體元素，谷倉作為次要元素，前后對比主次分明、空間感強(qiáng)，呈現(xiàn)了新春集市的縱深與五谷豐登的產(chǎn)品，整體氛圍熱烈喜慶，激發(fā)用戶的購買欲望。

總結(jié)

插畫風(fēng)格的表達(dá)，既遵循著藝術(shù)設(shè)計的通用規(guī)則，又具備自身獨特的審核特征，需要設(shè)計師更多去發(fā)現(xiàn)生活中的美，通過以上五部曲將生活中各類元素進(jìn)行不斷的重組、創(chuàng)造，在專題中進(jìn)行特有的形象性、生動性、趣味性、創(chuàng)造性的藝術(shù)表達(dá)，從而豐富專題內(nèi)容，更好傳達(dá)專題思想。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。