踏破鐵鞋無覓處，得來全不費(fèi)功夫。微信付費(fèi)閱讀一出，對優(yōu)質(zhì)內(nèi)容創(chuàng)作者來說，無疑從天而降了一條增收渠道。微信為什么在要此時推出付費(fèi)功能？在付費(fèi)閱讀最終推出之前，微信做了哪些準(zhǔn)備？如何打造一個成功的平臺？
微信公眾號付費(fèi)最早的新聞出現(xiàn)在2017年2月14日，馬化騰在朋友圈回復(fù)評論人洪波說，正在加快微信公眾號付費(fèi)訂閱功能。
轉(zhuǎn)眼三年過去，付費(fèi)閱讀才姍姍來遲。這是一個極佳的根據(jù)內(nèi)外環(huán)境來演進(jìn)產(chǎn)品的案例。
首先我們來看微信付費(fèi)閱讀的要求，前兩條“公眾號注冊超過3個月”和“3個月內(nèi)無嚴(yán)重違規(guī)紀(jì)錄”，都是對使用權(quán)益的基本要求；最后一條“已發(fā)表至少3篇原創(chuàng)文章”則是典型用戶的關(guān)鍵特征，從此項出發(fā)，可以推導(dǎo)出產(chǎn)品功能商業(yè)化演進(jìn)的關(guān)鍵路徑點。
通過商業(yè)化關(guān)鍵特征“原創(chuàng)性”，找到了關(guān)鍵演進(jìn)路徑的起點：原創(chuàng)。
下面是圍繞原創(chuàng)的各項關(guān)鍵事件時間節(jié)點：
2017年11月22日正式發(fā)布原創(chuàng)功能：
公眾號文章可以使用“原創(chuàng)聲明”和“留言”功能。背后依托的是騰訊在文章重復(fù)率檢查的技術(shù)。一篇上萬字的文章，點擊“原創(chuàng)聲明”時，幾乎無感知收到檢查的結(jié)果。原創(chuàng)聲明的擴(kuò)展功能包括：打賞、轉(zhuǎn)載、白名單。
2018年6月6日正式恢復(fù)文章打賞功能：
微信最早在2016年就推出了文章贊賞功能，此項功能一波三折，中間經(jīng)歷了與Apple AppStore平臺的分成博弈，還有作者的所得是否該納個稅的社會輿論；最后在2018年6月6日正式恢復(fù)：贊賞的錢直接給到作者。
微信與Apple是競合策略（Coopetition）運(yùn)用。微信作為Apple App，打賞功能根據(jù)AppStore規(guī)則應(yīng)由Apple分羹。而作為擁有9億用戶的微信，又為Apple創(chuàng)造了一個殺手級的App——你能想象同一個打賞，安卓手機(jī)上的微信能讓創(chuàng)作者收入更高嗎？那Apple用戶的高價值如何體現(xiàn)？數(shù)字化產(chǎn)品中競合策略的發(fā)生，取決者兩者既可集成（Integration）又可分離（Separation），并且需要進(jìn)行商業(yè)上的決策。
2019年10月29日原創(chuàng)文章規(guī)模達(dá)到1.1億：在北京由騰訊主辦的《互聯(lián)網(wǎng)社交平臺知識產(chǎn)權(quán)保護(hù)論壇》上，騰訊宣布，原創(chuàng)聲明標(biāo)識的文章規(guī)模已超過1億。其中騰訊的原創(chuàng)保護(hù)貢獻(xiàn)在累計刪除15萬的涉嫌侵權(quán)文章、6萬品牌侵權(quán)信息，每天主動攔截假冒注冊行為11,000次。
產(chǎn)品內(nèi)部演進(jìn)總結(jié)：
原創(chuàng)產(chǎn)品的內(nèi)部演進(jìn)，經(jīng)歷了關(guān)鍵技術(shù)突破、商業(yè)規(guī)則變革和規(guī)?；齻€關(guān)鍵節(jié)點。至此產(chǎn)品市場已經(jīng)成熟。
知識付費(fèi)市場是由視頻、音樂用戶付費(fèi)習(xí)慣的不斷成長而帶動的。艾瑞《2018年中國在線知識付費(fèi)市場研究報告》預(yù)測，到2020年，中國知識付費(fèi)市場規(guī)模將達(dá)到235.1億人民幣。
艾瑞這份報告偏差在于：價值鏈分析只將微信視為了渠道，在2018年微信已經(jīng)擁有原創(chuàng)+付費(fèi)兩大基本要素之后，艾瑞也未在競爭格局將微信視為潛在進(jìn)入者。
2019年知識付費(fèi)“風(fēng)口”過去之時，對行業(yè)中依然處于中小規(guī)模，無法站穩(wěn)用戶基礎(chǔ)的創(chuàng)業(yè)公司而言，就將成為即將摔下來的豬，而此時市場卻初步成熟，正是巨頭進(jìn)入的時機(jī)了。
市場趨勢發(fā)展總結(jié)：
初期市場進(jìn)入容易，因參與者少，供給遠(yuǎn)小于需求時，初創(chuàng)公司容易獲得用戶，面對競爭少。但隨著用戶使用、購買習(xí)慣的養(yǎng)成，越來越多的競爭者進(jìn)入，達(dá)到供需平衡時刻（即市場均衡）時，新進(jìn)入者獲客、現(xiàn)有的供給方留客將越來越困難。如果此時市場規(guī)模足夠大，達(dá)到數(shù)百億甚至千億級別，它將成為巨頭們的主戰(zhàn)場。
艾瑞報告中知識付費(fèi)產(chǎn)業(yè)價值鏈定義了三類參與者，內(nèi)容提供方和知識付費(fèi)平臺類又共細(xì)分為六個角色。而微信付費(fèi)閱讀將整個產(chǎn)業(yè)價值鏈供應(yīng)端重塑為了兩個角色：平臺和原創(chuàng)作者。這一重塑極大地簡化了價值創(chuàng)造與交付過程，也提升了價值獲取的份額。對整個產(chǎn)業(yè)來說，是一次有效的增值。
在知識付費(fèi)產(chǎn)業(yè)還存在一個潛在進(jìn)入者，就是工具應(yīng)用，比如阿里巴巴推出的語雀知識管理平臺，就提供了非常好用的文章編寫和管理工具。但平臺能夠快速替換掉獨立知識付費(fèi)平臺、頭部知識內(nèi)容商以及KOL、經(jīng)紀(jì)/孵化公司，是因為平臺的獨特技術(shù)（核武器）：生成性。
生成性 Generativity——平臺具備創(chuàng)造新產(chǎn)品的技術(shù)能力（Technology supports the creation of novel products.）
正是生成性，使平臺成為了數(shù)字化時代最高生產(chǎn)力的代表。僅僅使用微信付費(fèi)閱讀功能，作者就可以直接創(chuàng)造出讀者可購買的產(chǎn)品，這就是微信作為平臺的核心顛覆能力。而頭部知識內(nèi)容商的簽約作者、KOL，均可以通過入駐微信公眾號以及運(yùn)營微信群，完成整個商業(yè)模型的閉環(huán)。
打造一個平臺，需要根據(jù)外部市場趨勢，不斷地進(jìn)行內(nèi)部產(chǎn)品演進(jìn)和內(nèi)外商業(yè)生態(tài)治理。
但微信付費(fèi)閱讀的成功遞進(jìn)，不僅僅是技術(shù)或簡單商業(yè)化（變現(xiàn)）的轉(zhuǎn)變，而是抓住了知識付費(fèi)產(chǎn)業(yè)的第一性原理：知識產(chǎn)權(quán)保護(hù)。
根據(jù)科斯定理，在一個產(chǎn)權(quán)清晰的市場中，它的配置將會是最有效的。抓住知識產(chǎn)權(quán)生態(tài)的微信付費(fèi)，有可能實現(xiàn)內(nèi)容創(chuàng)作者與閱讀者之間更有效的資源配置。
文章來源：人人都是產(chǎn)品經(jīng)理
語言設(shè)置
校驗消息默認(rèn)是英文的，定義中文或其他語言的錯誤提示消息
-
import VeeValidate from 'vee-validate';
-
import Vue from 'vue'
-
Vue.use(VeeValidate)
-
-
var dict = {
-
zh_CN: {
-
messages: {
-
required: function(field){
-
return field + '不能為空！';
-
},
-
between: function(field){
-
return field + '輸入不符合設(shè)定規(guī)則！';
-
},
-
min : function (field,leng) {
-
return field + '長度不能小于'+leng+'位';
-
}
-
}
-
}
-
};
-
-
VeeValidate.Validator.localize('zh_CN', dict.zh_CN);
校驗的時候需要設(shè)置語言
this.$validator.localize('zh_CN');錯誤消息顯示
顯示指定字段的第一個錯誤
this.$validator.first('fieldname')顯示所有字段的第一個錯誤消息
this.$validator.errors.all()配置
路由攔截配置不需要修改之前的代碼,匹配的url請求會直接通過mock而不是請求服務(wù)器
-
const handler = req => {
-
return {mock數(shù)據(jù)};
-
}
-
Mock.mock('url攔截規(guī)則,正則表達(dá)式',handler)
配置延遲時間
模擬服務(wù)器請求的異步特性
-
Mock.setup({
-
timeout:1000
-
})
模塊化
多人協(xié)作，或者中大型的項目需要把store分為模塊
-
const a = {
-
state : {foo:1},
-
mutations : {hello(state)=> {}}，
-
modules : {
-
...嵌套
-
}
-
}
-
const b = {}
-
const store = {
-
state : {},
-
mutations : {},
-
actions : {},
-
modules : {
-
module_name_a:a,
-
module_name_b:b
-
}
-
}
在調(diào)用的時候，state 有命名空間的，而mutation和actions都與父模塊共用同樣的命名空間所以不能定義與父模塊同名的mutation 或 action
獲取模塊的state
this.$store.state.module_name_a.foo調(diào)用模塊的mutation
this.$store.commit('hello')namespace
定義了namespace ,mutations 和 action 會帶上模塊的命名: module_name/muation
-
const store = {
-
modules : {
-
namespace : true,
-
a: {
-
muations : {
-
test(state) => {...}
-
}
-
}
-
}
-
}
這時候調(diào)模塊內(nèi)的mutation
this.$store.commit('a/test')日期選擇控件
設(shè)置默認(rèn)值
<datepicker v-model="mydate" </datepicker> 日期格式化
<datepicker :format="'yyyy-MM-dd'"> </datepicker> 語言選擇（默認(rèn)是英文）
導(dǎo)入語言資源文件，然后再設(shè)置:language
設(shè)置成中文
-
語言設(shè)置
校驗消息默認(rèn)是英文的，定義中文或其他語言的錯誤提示消息
-
import VeeValidate from 'vee-validate';
-
import Vue from 'vue'
-
Vue.use(VeeValidate)
-
-
var dict = {
-
zh_CN: {
-
messages: {
-
required: function(field){
-
return field + '不能為空！';
-
},
-
between: function(field){
-
return field + '輸入不符合設(shè)定規(guī)則！';
-
},
-
min : function (field,leng) {
-
return field + '長度不能小于'+leng+'位';
-
}
-
}
-
}
-
};
-
-
VeeValidate.Validator.localize('zh_CN', dict.zh_CN);
校驗的時候需要設(shè)置語言
this.$validator.localize('zh_CN');錯誤消息顯示
顯示指定字段的第一個錯誤
this.$validator.first('fieldname')顯示所有字段的第一個錯誤消息
this.$validator.errors.all()配置
路由攔截配置不需要修改之前的代碼,匹配的url請求會直接通過mock而不是請求服務(wù)器
-
const handler = req => {
-
return {mock數(shù)據(jù)};
-
}
-
Mock.mock('url攔截規(guī)則,正則表達(dá)式',handler)
配置延遲時間
模擬服務(wù)器請求的異步特性
-
Mock.setup({
-
timeout:1000
-
})
模塊化
多人協(xié)作，或者中大型的項目需要把store分為模塊
-
const a = {
-
state : {foo:1},
-
mutations : {hello(state)=> {}}，
-
modules : {
-
...嵌套
-
}
-
}
-
const b = {}
-
const store = {
-
state : {},
-
mutations : {},
-
actions : {},
-
modules : {
-
module_name_a:a,
-
module_name_b:b
-
}
-
}
在調(diào)用的時候，state 有命名空間的，而mutation和actions都與父模塊共用同樣的命名空間所以不能定義與父模塊同名的mutation 或 action
獲取模塊的state
this.$store.state.module_name_a.foo調(diào)用模塊的mutation
this.$store.commit('hello')namespace
定義了namespace ,mutations 和 action 會帶上模塊的命名: module_name/muation
-
const store = {
-
modules : {
-
namespace : true,
-
a: {
-
muations : {
-
test(state) => {...}
-
}
-
}
-
}
-
}
這時候調(diào)模塊內(nèi)的mutation
this.$store.commit('a/test')日期選擇控件
設(shè)置默認(rèn)值
<datepicker v-model="mydate" </datepicker> 日期格式化
<datepicker :format="'yyyy-MM-dd'"> </datepicker> 語言選擇（默認(rèn)是英文）
導(dǎo)入語言資源文件，然后再設(shè)置:language
設(shè)置成中文
-
從性質(zhì)上來說，我們看到的背景一般都會分為 5 種：純色、漸變、肌理、圖形、全圖，但在真正開始做設(shè)計之前，我們并不會直接在這 5 種性質(zhì)的背景里挑選，反而會從一些其他的維度先去思考，才能做出具體的選擇。
△ 發(fā)布會背景的 5 種性質(zhì)
因此在這 5 個性質(zhì)之外，我們還要引入其他的思考維度，而這些思考的維度才能夠讓我們真正能做出「符合當(dāng)前頁面內(nèi)容」的幻燈片背景。
按照幻燈片背景設(shè)計的時間流程線，可以分為 8 大維度：直觀感，主視覺、布局感、場景感、設(shè)計感、平衡感、氛圍感、跳躍率。
△ 發(fā)布會背景定制的 8 個維度
通常我們拿到客戶的標(biāo)配原稿都是白底黑字的形式，這時我們首先考慮的出發(fā)點是：
整個幻燈片希望給人傳達(dá)的是偏向「明亮陽光」、「沉穩(wěn)大氣」的哪種感覺，這兩種截然不同的感受會讓我們在背景選取的時候，傾向于「亮色調(diào)」，或是「暗色調(diào)」。
在這個階段我們并不會思考幻燈片背景到底是屬于「純色、漸變、肌理、圖形、全圖」哪種，這個階段思考這個問題實在是太早了，我們只能從一個非常簡單卻又截然相反的兩條路徑，這時候是沒有任何細(xì)節(jié)可言的。
——這被我稱之為「直覺感」。
這是我們根據(jù)信息片段，不用太多思考，而出現(xiàn)的想法、感覺、信念或者偏好，可以幫助我們進(jìn)行快速決策——這是設(shè)計師/團(tuán)隊對內(nèi)容而產(chǎn)生的直覺洞察，本質(zhì)上是個人的知識體系和經(jīng)驗對其做出的判斷，沒有過多的原因。
△ 純白/純黑背景的內(nèi)容原稿
這兩者的選取會在一開始做設(shè)計的時候，就會帶給我們不同的思考角度，當(dāng)我們確定了調(diào)性后，我們就會把原稿的背景色直接改為純白或是純黑，方便我們潛移默化地思考?xì)赓|(zhì)。
但這個階段確認(rèn)方向，有便于自己找到調(diào)性上的初心，不會在后期的細(xì)節(jié)設(shè)計中陷入方向性的錯誤。
當(dāng)我們把整個頁面的直觀感受判斷清楚以后，接下來可以涉及一些具體的設(shè)計性質(zhì)，通常設(shè)計情況分為兩種：一種是「有跡可循」，另外一種是「無跡可循」，分別對應(yīng)不同的背景設(shè)計方法。
對于發(fā)布會而言，「有跡可循」的情況最直接的就是主視覺（Key Visual）沿用的情況（以下稱之為主KV）；「無跡可循」就需要從所需傳遞出的感覺和美感相結(jié)合來考慮，將在「場景感」和「設(shè)計感」兩個維度談及。
每一場活動基本都會有一個主 KV 用于奠定活動的視覺基調(diào)，所以幻燈片在大概率上和主 KV 會有一定的聯(lián)系——但這中間會需要我們準(zhǔn)確判斷出兩個小的隱藏需求：
這兩個隱形需求，在前期溝通的時候一定要確認(rèn)出來，否則的話有可能會造成很大的誤解，導(dǎo)致很多額外、不應(yīng)發(fā)生的問題。就此說明一下：
1. 客戶對于主KV的態(tài)度
一種情況，是需求方對于這個主 KV 本身有一定的不滿，但由于各種各樣的因素最終使用了這個主 KV，如：
△ 需求方可能不太滿意的主 KV
由于主 KV 已定，需求方會寄希望于幻燈片的設(shè)計上，內(nèi)心的需求是：「能夠基于主 KV，但不止于主 KV」。
另一種情況，是需求方對主 KV 的某些部分乃至全部部分都比較滿意，允許設(shè)計師/團(tuán)隊使用主 KV 的部分亮點元素進(jìn)行設(shè)計——其中的幅度最好在前期設(shè)計之前探索清楚，具體溝通的技巧涉及兩方自身和彼此的合作經(jīng)驗，需兩方共同配合。
△ 需求方比較滿意的主 KV
其中有一個技巧就是：看看需求方是否有將主 KV 應(yīng)用到整個大會的物料設(shè)計之中，如果有的話，那么幻燈片遵循對應(yīng)風(fēng)格一般都屬于「政治正確」的操作。
2. 客戶對幻燈片的期望
正如需求方對主 KV 的態(tài)度會影響他對幻燈片的期望，需求方希望設(shè)計師/團(tuán)隊能遵循統(tǒng)一的調(diào)性（畢竟是同一場大會），但如果直接 100% 沿用主 KV 的話，也可能會出現(xiàn)問題。
因此，設(shè)計師/團(tuán)隊需要和需求方確認(rèn)幻燈片設(shè)計對于主 KV 的「沿用自由程度」。
△ 對主 KV 元素的 3 種沿用自由程度
這三種情況其實都真實存在，實際上我也都遇到過。
這里有個經(jīng)驗，是如果設(shè)計師/團(tuán)隊只問一個非常簡單的問題：「幻燈片設(shè)計是否要按照主 KV 來走」。需求方一般會說：「我們要遵循主 KV 的風(fēng)格」，實際情況是能要求完全不遵循主 KV 的需求方很少，除非設(shè)計師/團(tuán)隊成功做出了能驚艷到需求方的作品。
但由于沒有明確「沿用自由程度」，就會在設(shè)計的時候帶來較大困擾。
這個困擾主要來源于：對于主 KV 的「沿用自由程度」，直接決定了對于幻燈片的「設(shè)計自由程度」。
△ 擴(kuò)充「設(shè)計自由程度」
設(shè)計師/團(tuán)隊和需求方確認(rèn)主 KV 的「沿用自由程度」時，并不是在限制自己的「設(shè)計自由程度」，反而是在擴(kuò)充「設(shè)計自由程度」——要知道設(shè)計過程中有哪些是不能做的，而有哪些是可以去嘗試的，從而來確認(rèn)有多少設(shè)計想法是被允許的，有多少程度是能被實施的。
因此在有主 KV 的大會，幻燈片背景設(shè)計的首要考慮維度是「主視覺」。
著手制作幻燈片背景的時候，在整體角度考慮下的「布局感」尤其重要，我們先看一個設(shè)計需求較高的案例：
對于設(shè)計感要求非常強(qiáng)的需求方，會希望每一頁的背景都都盡可能的多變（即使是同樣的元素，也希望把位置稍微調(diào)配一下），這一種需求對于設(shè)計的要求是比較高的。
△ 每一頁背景都盡可能多變的需求
我們可以這么理解：
并不是背景每一頁不同就是好的設(shè)計，對于內(nèi)容比較多的幻燈片，需要在內(nèi)容上分層級，例如有 4 個篇章的幻燈片，可能每一個篇章的背景是統(tǒng)一的，在下一個篇章的時候才會做一定的調(diào)整，正如「002 號知識發(fā)布會」的背景：
△ 通過整體布局規(guī)劃實現(xiàn)背景布局感
幸運(yùn)的是，在真實的使用場景中，所需要的程度通常是：在某一些頁面有單獨的定制化，而其他的頁面可以使用統(tǒng)一的背景。如：20 頁不同的背景，改為 8 個不同的背景（相當(dāng)于：4 個章節(jié)+ 4 種背景+ 4 種背景），這是通過規(guī)劃背景來提高統(tǒng)一性并降低設(shè)計難度，有實際應(yīng)用意義。
需求方?jīng)]有給到主 KV，或者甚至主 KV 也是由設(shè)計師/團(tuán)隊設(shè)計的時候，就要和需求方溝通他們想要的感覺，尤其注意演示場景對背景設(shè)計的影響，兼并考慮效果的美感度。
從單頁的角度看，所有的背景都要考慮現(xiàn)場演示的「場景感」，其中較為突出的是純色背景和經(jīng)典搭配的漸變背景。
1. 純色：簡約大氣
純色的技法不難，但顏色選取非常重要，其中的難點主要是對于客戶想表達(dá)的這一個內(nèi)容的顏色匹配和顏色選取上。
其中分為：純黑背景和其他顏色的純色背景。純黑背景帶給人極其穩(wěn)重的感覺，而其他顏色的純色背景則相反，帶給人干凈潔凈的感覺。
△ 不同氣質(zhì)的多種純色背景
無論哪種純色背景，其中有兩個隱形的要求：
成像質(zhì)量高的屏幕能讓觀眾拍照時不會受到太多由于亮色純色帶來的成像問題，而越接近純白色的色調(diào)就越需要現(xiàn)場燈光的配合，如果配合得不好，可能演講人會成為背景上的「剪影」。
2. 漸變：經(jīng)典搭配
漸變是發(fā)布會中一直都比較流行的背景色，Keynote 的自帶模板 Gradient 就是這樣的典范。
從上到下的黑色漸變到「深紫」「深藍(lán)」「深灰」的搭配，在發(fā)布會中被使用頻繁，由于底部顏色較淺，能更好襯托內(nèi)容和演講人，是發(fā)布會的經(jīng)典搭配。
△ Keynote 的 Gradient 背景
除了之前提到的各種考慮外，設(shè)計的美觀程度非常重要，有的頁面在「純色」「漸變」「肌理」等都可以選擇的情況下，「設(shè)計感」就是其中很重要的思考出發(fā)點。
1. 漸變：多變流行
隨著審美不斷地提高，有很多國內(nèi)大廠的發(fā)布會漸變是沒有太多規(guī)律的，這種流線型的美感容易讓別人對科技感和定制化感受深刻，這種漸變的制作難度會更高。
這種出彩的顏色在新興行業(yè)使用較多，偏傳統(tǒng)類型的公司就不太適合。
△ 背景非線性漸變背景的發(fā)布會應(yīng)用
此外，接近純色的背景上通過光影制造亮點也是高級手段，能讓畫面呈現(xiàn)豐富細(xì)節(jié)，顯得耐看很多。
△ 通過光影制造背景亮點
2. 肌理：細(xì)膩耐看
單純以肌理作為背景的設(shè)計并不算特別多，它的好處主要是在于讓整個畫面看起來更加有質(zhì)感一點，比純色要顯得更加有設(shè)計感。
通常肌理也會和光影相結(jié)合，來體現(xiàn)這一個頁面的高檔和奢華感。通過案例我們也可以看到為了突出產(chǎn)品和高檔氣質(zhì)的發(fā)布會頁面會使用這一種設(shè)計。
△ 通過肌理突出頁面氣質(zhì)氛圍
由于每一頁的幻燈片內(nèi)容容量的差異，會造成在每頁的版式差異，不同版式所需的「平衡感」所需背景是不同的：
△ 背景中添加輔助元素結(jié)合版式平衡頁面
這 5 個性質(zhì)的背景，都具備一個隱性的作用，就是對內(nèi)容進(jìn)行含義賦予，也就是增加「氛圍感」。
如果一個幻燈片從頭到尾都是純色的背景，甚至也都是單一的背景，這一個背景能賦予這個頁面的含義就是單一的，可能就是讓人感覺到某一種感受，僅此而已。
△ 單一的背景
如果定制化比較強(qiáng)，就會有不同的需求對頁面背景進(jìn)行含義賦予，如：
1. 圖形：屬性點綴
有的時候我們也會用點線作為頁面背景元素，使用「點陣」或者「多線段混合工具」效果填充頁面，讓整體的頁面圖版率提高。
△ 「點陣」和「多線段混合工具」效果
也會有一些情況會用圓形、點線、多邊形來做頁面的點綴，不同屬性的形狀會有不同的氣質(zhì)：
所以在選擇的時候，我們會考慮想要體現(xiàn)的感覺來選取形狀。
△ 圓形、三角形、多邊形的圖形背景
2. 全圖：氛圍濃烈
前段時間很多大廠不約而同使用了全圖型背景，讓這種設(shè)計手法廣為流傳。
具象的圖片讓觀眾直接身臨其境，時間的朋友的「大豆君」、「深圳」都是這樣的用法；而在一些企業(yè)愿景頁上，直接放上公司的圖片也能體現(xiàn)出非常直接的關(guān)聯(lián)性。
△ 具象式配圖
全圖型的圖片不一定和具體的內(nèi)容完全一一對應(yīng)，存在象征的可能，無論是：星空、山川，還是用黑板的粉筆字比喻算法等，都會在實際使用時起到象征的意義。
△ 象征式配圖
如果既不是產(chǎn)品對應(yīng)的具象圖片，也不是起到象征意義的配圖，就不要為了美觀而放和主題無關(guān)的圖片，否則容易讓觀眾困惑。
實際使用的過程中，往往由于各種原因，直接找到的真實圖片不足以支撐整個發(fā)布會背景，如：
這時我們就需要對圖片「融合背景」處理，既和整體背景統(tǒng)一，也加入了頁面的必要內(nèi)容。
△ 象征式配圖
如果頁面內(nèi)容需要實際真實可觀的場景來輔助呈現(xiàn)，就需要通過合成來「制造場景」，讓觀眾能直觀看到文案含義，就能加速對內(nèi)容的理解；還可以合成現(xiàn)實中不存在的圖片作為背景，增加氛圍的感受力度。
△ 象征式配圖
背景的「跳躍率」是我從「文字」和「圖片」的含義中引申使用的。
△ 文字跳躍率
△ 圖片跳躍率
△ 圖片跳躍率
文字跳躍率和圖片跳躍率描述的是素材之間的大小、景深的差異，而借用「跳躍率」的名詞來用在背景上解釋，就是整個幻燈片背景的素材各方面的差異程度。
△ 整體調(diào)性和每頁的調(diào)性
即使每一頁單獨看起來是比較和諧的，但受限于每頁內(nèi)容的圖片質(zhì)量、色調(diào)等的不同，不可避免地有可能整體看起來會顯得比較混亂，這時就要做一定的調(diào)整，確保整體統(tǒng)一性，才能讓作品形成整體。
其中要把握的是：既不能完全一樣，也不能完全不同，這之間的取舍體現(xiàn)出的就是設(shè)計師在制作時的把握度了，也是功力的體現(xiàn)。
對于以下場景，你是不是有那么一點點熟悉：
視覺A：「視覺 B，把你之前的稿子發(fā)我下，我的頁面里也有組件 A」
視覺A：「稿子里的組件 A 怎么跟視覺 C 剛剛發(fā)群里的不一樣啊，我以哪個為主？」
視覺B：「剛剛業(yè)務(wù)通知組件 A 得修改，這次大促有 30+ 個頁面都用到，這修改量這么大咋辦？」
交互A：「這個 tab 上的文字看不清」，視覺A：「我覺得挺清晰的了」
開發(fā)：「為什么每次給的設(shè)計稿，明明長得都差不多，可尺寸就差了幾個像素，我又得寫新的樣式表進(jìn)去」
以上的對話，在大型且多人合作的項目中尤為常見。
隨著大促項目體量越來越大，參與人員越來越多，這些問題越發(fā)明顯，直接影響了活動的視覺統(tǒng)一性和整體的工作效率。因此我們開展了營銷組件庫的設(shè)計。
組件庫就是界面設(shè)計常用控件或元件的集合，「組」是設(shè)計元素的組合方式，「件」由不同的元件組成。
其工作方式和樂高原理差不多，玩家（設(shè)計師）通過小元件（設(shè)計元素）或組件（模板）的不同組合形式，層層搭建和嵌套，最終組成建筑（頁面）。
△ 樂高W16搭建過程，圖片來自「什么值得買」
△ 頁面設(shè)計過程
1. 保證用戶體驗的一致性
對于大促這種含有多個子項目，涉及到 30+ 的頁面同期輸出的復(fù)雜項目，每個獨立的子項目雖然在需求上有一定區(qū)別，但整體的用戶體驗需要滿足基本的一致性，減少用戶認(rèn)知和負(fù)擔(dān)，提高用戶的使用效率。組件庫的建立，其統(tǒng)一的設(shè)計語言能保持設(shè)計結(jié)果的統(tǒng)一性，避免多人多風(fēng)格的現(xiàn)象。
2. 提升效率
不同行業(yè)、不同產(chǎn)品、不同項目的組件庫因其業(yè)務(wù)特點不同，其差異會非常大。那怎樣的組件庫才能滿足「大促營銷類」的項目需求？
分析研究
行業(yè)設(shè)計：行業(yè)優(yōu)秀的設(shè)計系統(tǒng)、組件庫搭建思維，以及其源文件，是最寶貴的學(xué)習(xí)資源。
主站設(shè)計：保證全站設(shè)計的一致性的同時，也是重要的學(xué)習(xí)參考；
過往問題：對過去項目的橫向和縱向?qū)Ρ群头治觯斫鈽I(yè)務(wù)結(jié)構(gòu)以及特點，從需求出發(fā)，拆解頁面表達(dá)結(jié)構(gòu)和所需組件的特點。
設(shè)計方向
通過前期的分析，明確了針對營銷大促類組件庫的設(shè)計方向：
拆分重組的組件化思維，解決模板靈活性和一致性的訴求
在設(shè)計方法上，我以 2013 年 Brad Forst 提出的原子設(shè)計方法論作為指導(dǎo)。方法的本質(zhì)其實就是將頁面拆解為最小元素（原子），然后原子可以演變成分子，分子通過多維度的組合形式成為組織，再到模板，最終生成頁面（原理如下圖）。
營銷需求的多變性體現(xiàn)在分子的組合方式各不相同，但其共用特征是最小元素（原子）基本相同，因此統(tǒng)一最小元素，定義其組合的規(guī)則，即可從源頭把控設(shè)計的一致性。同時通過特定的組合原則，設(shè)計師結(jié)合各項目需求根據(jù)組合和應(yīng)用原則（布局、文字等）進(jìn)行設(shè)計，從而實現(xiàn)其靈活性。
原子設(shè)計理論延展閱讀：
明確了設(shè)計方向和設(shè)計方法后，結(jié)合營銷項目自身的特點，開始了組件庫的設(shè)計實施，整體流程如下：
梳理組件庫
將近幾期具有典型代表的頁面收集整理分析，主要是為了以下 2 個方面的內(nèi)容
ps：組件庫強(qiáng)調(diào)的是通用和復(fù)用，因此無需把所有模塊都納入整理清單，做「合適」的，而不是大而全但可能臃腫的組件庫。關(guān)于這個組件庫的體量應(yīng)該如何選擇，可以看下文末的參考文獻(xiàn)。
設(shè)計環(huán)節(jié)
梳理完組件庫，按照原子設(shè)計方法論組件嵌套的形式進(jìn)行組件設(shè)計。在 Brad 的概念里，是將系統(tǒng)分為了 5 個層級，但針對營銷業(yè)務(wù)的多變性，要滿足復(fù)用性和靈活性，越往上的層級復(fù)用性越差，因此在現(xiàn)階段，采用了 3 個層級「原子-分子-組織」構(gòu)成營銷組件庫。
「全局考慮」在設(shè)計的整個過程中，需考慮每個組件后續(xù)的使用場景以及設(shè)計師的使用方法，利用 sketch 功能（symbol 嵌套、豐富的配置項、響應(yīng)式設(shè)計等），可以設(shè)計出一個高通用性的組件（如下圖），以此達(dá)到增強(qiáng)每個組件的復(fù)用性，以及精簡組件庫的目的。（因文章篇幅受限，詳細(xì)內(nèi)容可見文末參考文獻(xiàn)）
下面為每一個層級的詳細(xì)設(shè)計：
第一層：「原子」是最基本和最小顆粒度的單位，工作中常以「元素」命名，例如：顏色、文字、圖標(biāo)、分割線等
布局：系統(tǒng)布局規(guī)范，需要通過統(tǒng)一的設(shè)計元素和間距規(guī)范去引導(dǎo)使用者們使用并且能夠適配不同屏幕尺寸，目的是達(dá)到一致性，可適配、可控性原則。
「網(wǎng)格系統(tǒng)」通過前期的研究，網(wǎng)格系統(tǒng)采用的是目前最常用的「8點網(wǎng)格」，能更好地適配不同屏幕尺寸，2 倍的變化均能更好地保持偶數(shù)，不出現(xiàn)小數(shù)點的情況。
「設(shè)計原則」遵循格式塔理論：建立良好的信息層級，能讓用戶快速獲取和理解有用、感興趣的信息，并產(chǎn)生下一步行為。
顏色體系：「色值標(biāo)準(zhǔn)」為保證文本可識別性，結(jié)合Web內(nèi)容無障礙指南（WCAG）2.0標(biāo)準(zhǔn)，做了以下定義：
顏色對比度檢測工具：https://contrast-finder.tanaguru.com/
「衍生色設(shè)定規(guī)則」規(guī)律性設(shè)定衍生色，更好地打造頁面信息層級
根據(jù)以上規(guī)則設(shè)定顏色體系
文字體系：項目中字體根據(jù)實現(xiàn)類型分為系統(tǒng)字體以及圖片字體
「系統(tǒng)字體」為了較好的用戶瀏覽體驗，設(shè)計中優(yōu)先采用開發(fā)直接寫的系統(tǒng)實現(xiàn)的字體類型，不會因適配而產(chǎn)生文字不清晰或做圖時不同系統(tǒng)渲染效果不同導(dǎo)致的不統(tǒng)一。
「圖片字體」考慮到版權(quán)，以及字體在不同系統(tǒng)下渲染差異化的原因，選擇了免費(fèi)商用的思源黑體。
基礎(chǔ)原子：「靈活性設(shè)置」充分考慮應(yīng)用場景，利用 sketch 功能提高其包容性和靈活性。
第二層：「分子」原子排列組合構(gòu)成了分子，工作中多以「模板」命名，例如：品牌模板、單品模板等
「局部到整體，整體到局部」原子和分子，其實是一個系統(tǒng)中，相互依賴的元素。因此在分子的設(shè)計過程中，會遇到原子包容性不足的情況，因此實際設(shè)計中，是不斷在原子分子之間切換設(shè)計，不斷完善各自的設(shè)計。
第三層：「組織」原子、分子排列組合構(gòu)成了組織，工作中多以「模塊」命名，例如：商品列表、內(nèi)容卡片、入口模塊、瀑布流圖等
「保持克制，寧缺毋濫」該層面設(shè)計時，「局部影響整體，整體影響局部」的關(guān)系體現(xiàn)得更為明顯，會在原子/分子/組織三個層面不斷切換，進(jìn)一步完善各個層面的設(shè)計。但過程中需保持克制，所有的設(shè)計應(yīng)是圍繞「復(fù)用性」和「靈活性」進(jìn)行設(shè)計的，而非組合方式越多越好，多即意味著一致性在一定程度會受到影響。因此，應(yīng)是從過往項目中，預(yù)測未來可能出現(xiàn)的情況，窮舉后提取通用的組合規(guī)則后進(jìn)行設(shè)計。
過程中多嘗試不同方案設(shè)計，結(jié)合實際項目測試，擇取最優(yōu)方案。
整理設(shè)計文件，輸出設(shè)計規(guī)范文檔和使用說明。除了整理設(shè)計文件，梳理設(shè)計規(guī)范外，組件庫相當(dāng)于一個產(chǎn)品，需要有一份使用說明，為用戶提供基礎(chǔ)學(xué)習(xí)，提升團(tuán)隊成員的使用效率。
4. 迭代設(shè)計和維護(hù)
一個優(yōu)秀的組件庫絕不是 30 天速成班就結(jié)束的項目，而是一款產(chǎn)品，需有專人長期的跟進(jìn)和維護(hù)，例：優(yōu)化組件包容性；補(bǔ)充組織的種類等，從而逐步建立起適用于團(tuán)隊的組件庫。
1. 打造組件庫的幾個關(guān)鍵步驟
2. 項目成果
組件庫在 19 年雙 11 項目中的應(yīng)用，統(tǒng)一性顯著提升，對比往年節(jié)省 76 人/天，平均效率提升 30%，其中主會場提升了 50%。
3. 項目反思
4. 設(shè)計小感悟：
提起「日式風(fēng)格」，大家腦袋里會閃過哪個畫面？性冷淡設(shè)計？無印良品原木風(fēng)？櫻花配上小清新濾鏡？「簡素」、「侘寂」、乃至念上它一句「Less is more」？
△ 無印良品藝術(shù)總監(jiān)原研哉作品
總之，按照大眾流行的印象來概括，東瀛來的設(shè)計應(yīng)當(dāng)是性冷淡、實用、柔和克制的色彩、自我克制。
但這樣幾個印象，足以概括日本設(shè)計嗎？
咱們先拿一個國產(chǎn)的外包裝設(shè)計來拋磚引玉——椰樹牌椰汁外包裝。
如果以大眾印象里日本設(shè)計的評價標(biāo)準(zhǔn)來說，這個外包裝堪稱是泥石流一樣的存在——只有信息的堆疊，跟當(dāng)年恒源祥「羊羊羊」的洗腦廣告思路如出一轍。
但就在前幾年，一位知名的日本設(shè)計師卻為這樣一種設(shè)計點了個贊，宣稱這是「了不起的設(shè)計」，還充滿少女心地發(fā)了個圖，表示就沖這包裝，自己每天早上都要干上它一瓶。大有他鄉(xiāng)遇知己，相見恨晚之感。
這個設(shè)計師名叫高田唯。他的設(shè)計，跟椰汁魔性的外包裝異曲同工：有如街頭牛皮癬小廣告一樣的畫面，江湖人稱「新丑風(fēng)」。
但注意，「新丑」這個詞，高田唯自己可不接受，他不認(rèn)為自己算是「新丑」，應(yīng)該是「全丑」才對——丑怎么能分新舊呢？丑就應(yīng)當(dāng)是純粹的丑。
△ 高田唯作品
而高田唯，只是日本設(shè)計的一個縮影。如果我們把常規(guī)印象里，日本設(shè)計性冷淡那一面翻過來炒一炒——你會發(fā)現(xiàn)那魔性、浮夸、充滿腦洞的土味日式風(fēng)同樣在國際舞臺上有自己的一席之地。
△ 腦洞設(shè)計師 吉田ユニ的海報作品
咱們先講高田唯那些街頭牛皮癬一樣的作品。
實際上，他并不是一開始就成為了日本設(shè)計界的邪教徒?？v觀他的早期作品，雖然不受認(rèn)可，反倒是一板一眼、規(guī)規(guī)矩矩的名門正派弟子畫風(fēng)。
△ 高田唯的早期作品：左為 2009 年「印刷のいろは」 海報，右為 「印刷のいろは」 2010 海報
咱們可以在前些年他在上海的個展「潛水平面設(shè)計」，感受下啥是「全丑」風(fēng)。
從展覽邀請函開始，畫面就已經(jīng)充斥著火車站旅店小卡片級別的設(shè)計和配色。
△ 左圖為 2017「游泳 Graphic」海報
高田唯作品：左為 JAGDA2017 年鑒 封面設(shè)計，右為「For Stockists Exhibition」2017 海報
比如說，面對代表日本平面設(shè)計最高榮譽(yù)的 JAGDA（日本平面設(shè)計師協(xié)會）的約稿，高田唯絲毫不顧甲方的口味，為他們的年鑒封面和主視覺弄出了這樣畫風(fēng)的作品。
△ 高田唯 JAGDA 東京新入會員聯(lián)歡會海報設(shè)計（入選東京 TDC）
高田唯當(dāng)然知道大眾能夠喜愛、接受的設(shè)計長什么樣。
他打小就出生自一個設(shè)計家庭。他老爸高田修地早年供職于資生堂設(shè)計部門，是原研哉在武藏野美術(shù)大學(xué)時期的恩師。而高田唯本人在 2011 年還獲得了JAGDA 新人獎，這可算得上是走向國際設(shè)計舞臺的門票。
說我當(dāng)上了營業(yè)廳售貨員、他考上了北京大學(xué)、高田唯獲得了新人獎，我們都有個美好的未來——平均一下絲毫不為過。
△ 高田唯作品 FOR STOCKISTS EXHIBITION 2011
轉(zhuǎn)變也在這時發(fā)生，用高田唯自己的話講是：「日本設(shè)計有一個感覺就是看膩了」，「單單只把東西做得美觀，這樣的人實在太多了。所以我要探尋一條如何將設(shè)計表現(xiàn)得更生動的路?！?
街頭上那些日常的、堆疊滿信息而完全沒有設(shè)計感的圖像，反倒成為他靈感的新來源。
他說：「設(shè)計不僅是追求世界上的美感，一個沒經(jīng)歷過正規(guī)的設(shè)計教育，不熟悉各種設(shè)計工具的人做出來的東西有時候會更具有表現(xiàn)力，因為他們?yōu)榱藗鬟_(dá)自己的理念而去努力的這件事本身就是美的，我想把這種美融入自己的作品中?！?
這倒是可以說，他走向了高度專業(yè)化的日本設(shè)計反面：一種看山不是山、無招勝有招的狀態(tài)，他是用 「新丑」來挑戰(zhàn)「舊美」的人。
△ 高田唯「Why not live for art II」海報
△ 大街上采風(fēng)的高田唯
更多高田唯的作品：
除了高田唯，實際上還有很多國際知名的日本藝術(shù)家、設(shè)計師，也都跟小清新、性冷淡八竿子打不著關(guān)系。
就先說日本當(dāng)代藝術(shù)吧，身價最高的幾位選手里，像草間彌生、村上隆都有著獨特的自我風(fēng)格，甚至有點精神污染。
△ 草間彌生的裝置藝術(shù)作品
這畫風(fēng)一眼就能勸退密恐患者，但這些圓點對于草間彌生來說，其實是偏執(zhí)與童年記憶的產(chǎn)物。
△ 草間彌生的裝置作品
10 歲時的她，因為神經(jīng)性視聽障礙伴隨著精神分裂，就看到的世界而言，真實反而是仿佛隔著一層斑點狀的網(wǎng)。
那些張牙舞爪的植物都是童年時、幻覺中草木開口后的結(jié)果。因此，幻覺占據(jù)了真實，繪畫對于她來說是釋放恐懼的途徑。
△ 草間彌生標(biāo)志性的波點南瓜
更多關(guān)于草間彌生的作品：
而村上隆的太陽花，雖然五顏六色、永遠(yuǎn)微笑、永遠(yuǎn)密密麻麻，但其實是在他一派赤誠的擔(dān)憂里誕生的。
△ 村上隆在大館賽馬會藝方「村上隆 對戰(zhàn) 村上隆」展覽現(xiàn)場。攝影：Alex Maeland
村上隆眼中所謂的日本主流文化是由多種多樣的亞文化構(gòu)成，這些戰(zhàn)后出現(xiàn)的流行文化一面成為日本的代表，另一面又令人憂心忡忡。
△ 村上隆的標(biāo)志性作品「超扁平太陽花」
而他的作品，正是在的可愛、扁平、漫畫風(fēng)格中，嘲諷越來越浮于表面的大眾文化——整個社會都已經(jīng)進(jìn)入超扁平時代。
△ 橫尾忠則為實驗劇場「天井棧敷」時創(chuàng)作的海報
再走出當(dāng)代藝術(shù)領(lǐng)域，回顧一下日本設(shè)計的歷史，就會發(fā)現(xiàn)浮夸、腦洞大開始終是它的另一面。用所謂性冷淡、簡素來概括，其實是一種偏見、一種被加工選擇后的刻板印象。
△ 橫尾的早期迷幻又魔性的作品
比如日本國寶級設(shè)計師、藝術(shù)家橫尾忠則，有著迥異于常人的腦回路，年輕時曾莫名其妙跑到達(dá)利家強(qiáng)行做客。
他的作品同樣如此，極其詭異的腦回路、帶有沖擊力但傳統(tǒng)的日本色彩，融合浮世繪的構(gòu)圖、畫面，再拼接上彼時流行的波普藝術(shù)，「大和波普」可謂極具辨識度。
同時，傳聞他還因為自己的創(chuàng)意被甲方拒絕后揍了甲方一頓，最后，甲方（朝日啤酒）欣然接受了他的創(chuàng)意，這張海報也旋即成為橫尾忠則的經(jīng)典之一。
△ 橫尾設(shè)計的朝日啤酒海報，正是在這張海報上，橫尾成功揍了甲方。
光明正大喊出「一日之計毀于晨」、「在設(shè)計上我從不追求流行，我就是流行」的仲條正義，其部分作品也跟「日式性冷淡」一毛錢關(guān)系都沒有。反倒充斥著大腦洞、極富童心，帶著返璞歸真的頑童之感。
△ 仲條正義「Mother & Other」部分海報節(jié)選
而近些年火爆的吉田ユニ，干脆整幅作品都稱得上是腦洞的代言人。
△ 電視劇《人100%靠外表》海報
實際上，她的每一張作品都是現(xiàn)場實拍的，并沒有任何 3D 或者 CG 技術(shù)，因此，為了達(dá)到想要的效果，現(xiàn)場的物品、各種元素需要反復(fù)地擺放、一遍遍地改良，方才能接近她腦海中的理想狀態(tài)。
△ 吉田ユニ Yuni Yoshida V.S. Naomi Watanabe·PUNYUS 2017 春夏系列
△ 吉田ユニ 裝苑「PLAY A SENSATION」
日本設(shè)計以往給人的常規(guī)印象，大多和日本特有的美學(xué)特質(zhì)——「禪」、「空無」，「侘寂」、「物哀」、「幽玄」等等關(guān)鍵詞有關(guān)。
△ 幽玄：長谷川等伯的《松林圖》
△ 物哀：京都清水寺
作為傳統(tǒng)，與「簡素」，「侘寂」這些表面印象相對的，日本文化中還有很多浮夸的、魔性的、乃至金碧輝煌的經(jīng)典元素——像浮世繪、古代的大和繪、妖魔鬼怪，武士鎧甲等等。
△ 日本武士鎧甲
△ 浮世繪
而每個設(shè)計師對這些傳統(tǒng)的文化又有著截然不同的思考與理解，所以才誕生了那么多新奇古怪、紛繁復(fù)雜的、腦洞大開的日本設(shè)計。
所以說，并不存在一個看起來「性冷淡」的日本傳統(tǒng)，更不存在一個由「性冷淡」組成的日本設(shè)計。
不止是日本設(shè)計，所謂北歐設(shè)計、新中式都是一個不夠具體的概括，其內(nèi)涵無法用一兩個詞定義，但豐富和不同正是這個世界可愛的地方嘛。
文章來源：優(yōu)設(shè)
很多時候，當(dāng)你的設(shè)計遇到了挑戰(zhàn)，你無法客觀地回答為什么，甚至在和業(yè)務(wù)方溝通的過程中表現(xiàn)得很被動。
通常根據(jù)人們的習(xí)慣，我們將核心行動操作都放置在右側(cè)，例如下圖核心的行為召喚按鈕都放置在右側(cè)，那為什么都要放在右側(cè)呢？
我們可以用古騰堡圖表來解釋一下。古騰堡——西方活字印刷術(shù)的發(fā)明人，順便看一下他發(fā)明的圖表，啥意思呢？就是當(dāng)我們在瀏覽一個不熟悉頁面的時候，我們通常瀏覽的路徑是一個對稱的，從左上到右下的一個路徑，最終的視覺落點通常就會在這條線上。
所以我們很多的信息和操作按鈕，都是在右側(cè)。然而我們發(fā)現(xiàn)有些對話框卻把行動按鈕放在左側(cè)，我們來分析一下原因，像下方的對話框：
左側(cè)的是我們常規(guī)看到的一個模態(tài)彈框，彈框內(nèi)右側(cè)的行動按鈕可以是確定，也是可以刪除，但是右側(cè)的彈框基于我們的猜測是希望用戶在高風(fēng)險操作下，再次確認(rèn)要進(jìn)行的操作，所以當(dāng)用戶視線移動到右邊的行動按鈕時發(fā)現(xiàn)它并不是想要的操作，這時用戶會對左側(cè)信息進(jìn)行一次再瀏覽，確認(rèn)后再選擇，很多時候用戶在進(jìn)行操作的時候會下意識地進(jìn)行右側(cè)點擊，所以這樣的處理方法可以避免用戶對高風(fēng)險行為的誤操作。
但是話又說回來，這樣的設(shè)計其實違背了用戶的習(xí)慣和預(yù)期，所以還是要慎重考慮。
我們再來看一下高德地圖的案例， 點擊「退出」后展開兩個選項，「退出導(dǎo)航」在左側(cè)高亮，取消放在了右側(cè)。
那這算不算違反用戶的習(xí)慣和預(yù)期呢？我們換一種解釋，這里運(yùn)用到的是「菲茲定律」，目標(biāo)按鈕的大小、和手指間的距離影響用戶操作的效率
如果退出導(dǎo)航放在右側(cè)可以嗎？在別的場景下沒問題，但是在行車駕駛的場景中，任何的操作都需要快速?？梢栽傧胍幌聢鼍埃裁磿r候會退出導(dǎo)航：1.目的地已到 2.開到一半認(rèn)識路了 3.導(dǎo)錯目的地了 4.要換交通工具了…..所以高德作為一個工具型產(chǎn)品，是一個核心的準(zhǔn)則。
菲茲定律深入解讀：
現(xiàn)在隨著大數(shù)據(jù)和人工智能的科技進(jìn)步，人們?nèi)粘Ｉ钜沧兊迷絹碓奖憷蛘哒f人也變得越來越懶。我們不用再費(fèi)盡心機(jī)尋找我們想要的，所有的內(nèi)容都會跟我們的習(xí)慣、行為被智能推送，產(chǎn)品也越來越人性化。所以我們今天的十萬個為什么就來聊一聊個性化設(shè)計！
1. 內(nèi)容個性化
個性化內(nèi)容需要通過發(fā)現(xiàn)偏好-幫助過濾-使用 3 個步驟來看。首先內(nèi)容個性化可以分為用戶偏好個性化以及用戶設(shè)置個性化，比如抖音、淘寶等應(yīng)用，會根據(jù)用戶對內(nèi)容的搜索、瀏覽等行為習(xí)慣的偏好進(jìn)行不同的算法推送，比如抖音我最近看鑒寶和籃球比較多，所以針對這些視頻，我的完播率、播放數(shù)、點贊評論數(shù)據(jù)有變化之后，推送給我視頻內(nèi)容的權(quán)重就發(fā)生了變化。
其實很多用戶不太理解，在電商應(yīng)用，我已經(jīng)購買過一件商品后，卻依然還是給我推送同樣類型的商品。
而用戶設(shè)置個性化比如在使用 bilibili、漫畫等應(yīng)用時會在正式瀏覽前讓用戶設(shè)置自己的偏好和基礎(chǔ)信息幫助用戶進(jìn)行更精準(zhǔn)的推薦。
但這里有一個問題是，我們給用戶設(shè)置的選項和用戶實際本身不符，比如讓用戶選擇他的年齡，很多用戶可能覺得自己會更年輕，所以選擇年齡和實際不符，那么推送的內(nèi)容是他需要的嗎？所以這里就需要根據(jù)用戶真實行為數(shù)據(jù)來進(jìn)行再次的過濾。
但是如果我們就這樣把用戶所選的內(nèi)容都推送給他，那效率一定很低下，所以我們會從時間、熱度和用戶自身行為權(quán)重進(jìn)行排序計算，當(dāng)然這些內(nèi)容也并不是都用 feed 流來承載，形式可以多樣化，也包括進(jìn)行分類，就像微信閱讀會推薦 3 本書，你也可以選擇點擊換一換，甚至還把推薦來源給寫出來了。
2. 場景個性化
最近看到兩個不同的界面，實屬有趣。某天我下了地鐵用支付寶掃碼出站后，頁面提示我是否要進(jìn)行打車，我覺得還是挺貼心的，雖然我不需要打車但是這個場景讓我有了更加方便的選擇。
同時發(fā)現(xiàn)在群里有另一個小伙伴也截了這個頁面，他的界面卻是提醒他是否要租一輛共享單車！這簡直是赤裸裸的「歧視」呀。當(dāng)然這個也就是和下面要講的用戶行為有關(guān)了，如果你經(jīng)常騎車，他就會在這里給你推薦共享單車。
還比如高德地圖在導(dǎo)航的時候如果即將進(jìn)入收費(fèi)站，在頁面明顯的位置也會出現(xiàn)支付寶入口的圖標(biāo)。（圖片找不到了）
3. 行為個性化
這個應(yīng)該正確的說是行為導(dǎo)致的功能個性化，比如知乎，從之前的上下切換話題到左右切換，再演變成上下切換話題。大家用過知乎的同學(xué)知道，現(xiàn)在上下切換話題其實還是有些不方便的，但是知乎為了讓更多金主爸爸的廣告能露出，不得已出此「下策」。
我們在設(shè)計的過程中也有一個原則「避免功能即按鈕」的設(shè)計，在業(yè)務(wù)的背景下也被選擇性忽略，所以他做了一個懸浮可動的切換按鈕，其實在可動之前，他是固定的，是由于用戶頻繁誤操作的行為，讓知乎的設(shè)計師將它變成了可動吸附的按鈕了。這個就是行為導(dǎo)致的功能個性化。
再比如騰訊視頻、愛奇藝?yán)锏摹钢豢?TA」這個功能。通過數(shù)據(jù)和用戶行為路徑的分析，發(fā)現(xiàn)很多用戶會在一個視頻里頻繁觀看某一個演員的片段，可能是自己喜歡的演員，可能是被其他平臺吸引過來看某個片段的用戶，這樣大量的行為讓我們發(fā)現(xiàn)用戶的這個高頻需求。
4. 目標(biāo)個性化
最近也在體驗了一款游戲，完美世界的笑傲江湖。其實現(xiàn)在很多的手游都會有這樣的功能，就是會讓用戶選擇如何體驗游戲，由于玩游戲用戶時間、職業(yè)的不同，所需要體驗游戲的內(nèi)容也是有區(qū)別的。
時間多的用戶更想要體驗所有內(nèi)容，快速提高戰(zhàn)力。而女性用戶可能更想邊看風(fēng)景邊玩，看唯美的畫面。如果是時間少的上班族，那么更希望能做一些性價比高的任務(wù)，不至于脫離大部隊的節(jié)奏。所以當(dāng)用戶有不同目標(biāo)時，產(chǎn)品也有相應(yīng)的策略讓用戶更好地體驗產(chǎn)品。
很多設(shè)計師在進(jìn)行信息設(shè)計的時候，通?？恐杏X和曾經(jīng)嘗試過的經(jīng)驗進(jìn)行信息美化。但是當(dāng)我們遇到需要對信息設(shè)計進(jìn)行解釋的時候，理由通常很蒼白。
你無法說出為什么用戶能夠快速地瀏覽信息，只是覺得又大、又粗、又鮮艷的信息能夠被識別。所以今天我們就要來聊一聊，為什么。
首先給大家介紹一些經(jīng)過研究之后的數(shù)據(jù)結(jié)論：
人類視野的空間分辨率從中央向邊緣減少。我們?nèi)祟惷恐谎劬哂?700 萬左右的視錐細(xì)胞，它們在人眼中的分布是越靠近中央凹的區(qū)域越密集。而另外一個研究表明，邊界視覺的信息在被傳遞到大腦之前是經(jīng)過壓縮的，而中央凹的視覺則不會。大概就是下 2 圖這個意思。
然后有同學(xué)會問，既然我們的邊界視覺那么差，當(dāng)用戶在瀏覽界面信息的時候，為什么給用戶 3 秒鐘時間看界面他還是能夠記住頁面中的一些信息呢，或者會說為什么我們在瀏覽的時候，它不像下圖那樣只有一小圈是高清，而邊上的文字是模糊的呢。
這其實是因為大腦通過一個比較粗獷的方式，基于我們的預(yù)期，給視野進(jìn)行填充，大腦也會命令你的眼睛對邊上的信息進(jìn)行細(xì)節(jié)采樣。所以這是一個很快速的過程。
為什么有的人能夠一目十行就是，他的大腦能幫他補(bǔ)充得更多，或者說他的中央凹面積大。
但是有一個實驗是，我們通過眼動測試，當(dāng)用戶的中央凹停留在一篇文章中的一個地方時，這個文字顯示的是正確的，但是隨著中央凹的移動，他周圍的文字會進(jìn)行隨機(jī)的變化，他雖然能夠成功地完成閱讀，但是速度大幅下降。
比如大家看一下這個頁面的區(qū)域：
當(dāng)我們掃完這個頁面也就 2-3 秒，但是如果你沒有把中央凹停留在一個信息上的時候，其實都是靠大腦對我們的預(yù)期進(jìn)行的補(bǔ)充。而真實的情況是，你們并沒有發(fā)現(xiàn)頁面中錯誤的地方。
言歸正傳，為什么你的信息用戶總是看不見呢。我們又要講到邊界視覺。我們的設(shè)計如果不考慮邊界視覺，那么就會影響到能夠被識別的信息。那么邊界視覺到底有什么用呢？
1. 引導(dǎo)中央凹
我們剛才說了中央凹的重要性，那么我們在什么時候會把中央凹放到我們要看的信息上呢？其實就是依靠我們的邊界視覺。
邊界視覺引導(dǎo)中央凹，它幫助中央凹捕捉關(guān)鍵信息。我舉個例子，大家在查看一個食品包裝的生產(chǎn)日期的時候是怎么尋找的呢，大家的眼睛不斷地在搜索，而邊界視覺是提供了低分辨率的線索，幫助大腦，控制眼睛以線索的發(fā)現(xiàn)順序進(jìn)行移動。
2. 捕捉運(yùn)動元素
邊界視覺可以非?？焖俚牟蹲降竭\(yùn)動的物體，所以在界面設(shè)計中，無法放置在核心位置的元素但又需要用戶去注意到的時候，通常就會使用動效。
1. 將信息盡量放在中央凹或者中央凹邊上能夠被預(yù)期的位置
在小紅書很早的一個版本中，當(dāng)用戶進(jìn)行點贊操作后，反饋消息在頂部顯示，讓用戶無法察覺和關(guān)注到。因為邊界視覺都無法捕捉。所以當(dāng)用戶在進(jìn)行操作時，如果需要將狀態(tài)、文字告知用戶，就需要顯示在用戶能預(yù)期以及能被邊界視覺捕捉到的位置。
2. 使用圖標(biāo)、圖片的形式標(biāo)記出關(guān)鍵信息
比如在一大段的文本中，用戶無法快速的查看內(nèi)容標(biāo)題，我們就可以在標(biāo)題前使用圖標(biāo)、圖片的形式進(jìn)行標(biāo)記，讓邊界視覺獲取到信息之后在大腦中產(chǎn)生預(yù)期模型。
3. 使用動態(tài)效果吸引用戶注意
動態(tài)效果能夠快速被捕捉，甚至引導(dǎo)用戶的視線。比如馬蜂窩在底部進(jìn)行點贊后通過動效引導(dǎo)用戶，告知用戶該點贊是為用戶而贊，同時讓用戶的視線又回到了頂部，可能增加用戶的停留時間。
4. 使用高亮的顏色來吸引用戶的邊界視覺進(jìn)行捕捉
由于邊界視覺的搜索是線性的，所以我們必須將重點的信息進(jìn)行高亮顯示，比如警告的紅色，可點擊的藍(lán)色等。
在這里再補(bǔ)充一個我總結(jié)出來的規(guī)律，不一定對。
大家可以看到，下方的知乎話題界面，一進(jìn)入界面我們的邊界視覺立馬給我們進(jìn)行信息捕捉，所以首先被關(guān)注到的是呈現(xiàn)藍(lán)色的文字、圖片、圖標(biāo)等。
這里大家發(fā)現(xiàn)一個問題沒有
為什么在這個界面中上方的兩個按鈕不用色塊的形式做呢？
例如右邊這樣，很多同學(xué)在這里第一反應(yīng)是這個按鈕太重了！很突兀！為什么很突兀？
既然要引導(dǎo)用戶為什么不做得重一點呢？那有同學(xué)又會說這樣設(shè)計會干擾用戶對其他信息的瀏覽，那么為什么會干擾對其他信息的瀏覽呢？
我猜測人眼的中央凹視錐細(xì)胞會根據(jù)界面中信息的重要程度進(jìn)行調(diào)整，也就是說不同程度的強(qiáng)化會讓邊界視覺的捕捉能力下降。
像右側(cè)的色塊按鈕讓中央凹的視覺細(xì)胞更加聚集，而導(dǎo)致邊界視覺的范圍也大幅縮小，所以你們看左邊界面覺得信息優(yōu)先級很清晰，但是右側(cè)的就會覺得我只看到了兩個大按鈕，而其他的信息都沒有被捕捉到。
那繼續(xù)思考一下，什么時候能用大色塊的按鈕呢？很多電商平臺的購物都是大按鈕，這個難道不會讓用戶的邊界視覺受影響嗎？
大家發(fā)現(xiàn)一個規(guī)律沒有，有大按鈕的頁面基本上圖片、圖標(biāo)都很多，而一般都是文字的頁面，通常都不會出現(xiàn)大按鈕，因為出現(xiàn)了就會被噴太突兀了！！
這就是因為大按鈕在沒有其他更高層級信息的配合下讓邊界視覺捕捉范圍降低了，如果都是高層級的信息，那么邊界視覺的捕捉范圍就會「一視同仁」。
所以，為了讓一個界面的按鈕不突兀，一種方法是用和它相似級別的元素進(jìn)行輔助展示，另一種方法就是降低該按鈕的視覺引導(dǎo)層級。
不知道大家是否曾經(jīng)或者現(xiàn)在使用過某個產(chǎn)品，當(dāng)我們在完成某一個任務(wù)或者在某個場景中時，自己的操作行為特別自然流暢，注意力也非常集中，這種感覺讓你非常的愉悅、舒適。
所以契克森米哈提出了心流的概念：個體完全投入某種活動的整體感覺，當(dāng)個體處于心流體驗的過程中，會對周邊干擾視而不見，過程非常愉快且會覺得時間過得很快。
所以當(dāng)我們在做交互設(shè)計時，我們追求的就是一種自然、能讓用戶進(jìn)入心流的交互體驗。但是大家不要誤會了心流的概念，有些同學(xué)覺得我們在刷抖音、微博、微信就是一種心流的狀態(tài)，那就錯了。
心流并不是一種簡單的沉浸的狀態(tài)，當(dāng)我們在娛樂時不過是被內(nèi)容吸引了，讓你覺得沉浸只不過是你的行為操作形成了習(xí)慣，不是心流狀態(tài)。
今天我就來和大家分享一下如何通過一些方法，作出讓用戶進(jìn)入心流狀態(tài)的設(shè)計，這些都是有跡可循的。
開過車的同學(xué)都知道，左側(cè)剎車右側(cè)油門，檔在右手邊，在國內(nèi)所有車都是這樣，所以我們不會搞錯。在經(jīng)過一段時間的駕駛后我們更能夠清楚的了解汽車的動力、剎車等性能，所以我們會覺得這輛車的操控感覺很好。原因是他的設(shè)計符合了用戶的預(yù)期。直覺的預(yù)期、位置的預(yù)期、功能的預(yù)期以及結(jié)果的預(yù)期。舉個例子，當(dāng)我給你一個任務(wù)，希望你能夠快速的進(jìn)入 xxapp 進(jìn)行個人頭像的設(shè)置，在這個前提條件下我們來看一下剛才說的幾個預(yù)期：
直覺預(yù)期
每個人的直覺都不同，這來源于他生活中的環(huán)境影響和習(xí)慣影響所以對于我個人的直覺來說，要完成這個任務(wù)首先必須找到最初的入口，我的直覺告訴我這個功能大概率可能出現(xiàn)的位置會在底部標(biāo)簽中的個人中心板塊中。
位置預(yù)期
個人中心板塊的位置可能會根據(jù)信息架構(gòu)而出現(xiàn)變動，比如抽屜導(dǎo)航中會出現(xiàn)個人中心的入口，例如滴滴。當(dāng)我們進(jìn)入之后會看到頭像、名字、箭頭等信息，特別是箭頭，這個圖標(biāo)給人的預(yù)期是你可以繼續(xù)進(jìn)入進(jìn)行下一步操作，那么用戶對下一步操作的預(yù)期基本上就是會點擊箭頭或者頭像，這個也是比較明確的。或者直接來一個編輯的按鈕也是可行的，這樣就不需要用戶去猜了，但編輯的功能比較垂直了，所以到底用哪種形式，要根據(jù)內(nèi)容來。
如果沒有這個箭頭，用戶一定會產(chǎn)生試探性的行為操作，此時內(nèi)心已經(jīng)有疑惑且不自信了。所以在心流交互中，明確的功能引導(dǎo)非常重要。
功能預(yù)期
用戶預(yù)期通過他的操作能夠達(dá)成目的，那么最基本的就是在這條路徑上的功能不能缺失以及減少其他的干擾?？梢园l(fā)現(xiàn)微信的個人中心最底部板塊有兩個熱區(qū)，并不是一塊直接進(jìn)入個人中心的熱區(qū)，如果點擊名字這一整行，則會下拉引導(dǎo)你拍攝一段視頻。所以有時候想替換頭像以為點擊這一塊都可以進(jìn)入二級，卻發(fā)現(xiàn)這并不是我要的功能。
結(jié)果的預(yù)期
最后當(dāng)用戶進(jìn)入編輯頭像頁面之后，需要關(guān)注其場景，這邊微信做的就挺好：
很多時候交互流程已經(jīng)做的非常自然了，但是當(dāng)用戶正在他的心流體驗中，突然一個模態(tài)彈框跳出打斷了用戶，令人啼笑皆非的是這個彈窗只是告訴你一個不痛不癢的信息，這就比較難受了。
而我們來看馬蜂窩當(dāng)用戶在 app 中完成某些特定任務(wù)后，不會出現(xiàn)模態(tài)彈窗的強(qiáng)制干擾，而是在頂部出現(xiàn)一個通知 bar，這樣原本在進(jìn)行任務(wù)中間階段的用戶不會受太大的干擾，可以繼續(xù)任務(wù)行為。
再例如美團(tuán)外賣和餓了么，用戶在點餐時對優(yōu)惠優(yōu)惠的關(guān)注是特別強(qiáng)烈的，而是否能夠讓用戶認(rèn)真的挑選菜品，我們也盡可能做到影響的打擾，就像滿減去湊單的交互形式，點擊后不跳轉(zhuǎn)，僅在當(dāng)前頁面以文字形式讓用戶明白并行動，但這里去湊單很容易和去結(jié)算有誤操作。
例如馬蜂窩自定義旅程，進(jìn)行多標(biāo)簽選項，當(dāng)用戶在當(dāng)前頁面選擇完該頁面的選項后自動幫助用戶定位到選擇日期的功能模塊中。這樣減少了用戶不必要的下滑操作，像這樣單一場景中對用戶的行為預(yù)期是比較好判斷的。
之前玩過很多款手游，即便是一些常用的套路，每家都能玩的不一樣，例如寶石合成、英雄裝備獲取，有些游戲能夠做到讓用戶在一個場景中不脫離。
比如寶石合成這個功能。寶石從哪里來？是否能在合成合成路徑中穿插購買的分支并再鏈接回合成場景？在包裹中進(jìn)行合成和在裝備界面進(jìn)行合成是否流程一樣；然而有些游戲當(dāng)用戶購買完寶石后需要重新自己再打開合成界面，非常繁瑣，同時也導(dǎo)致了用戶消費(fèi)路徑的斷裂。
再比如裝備副本獲取這個功能，這里我們看一下權(quán)利的游戲這款游戲，當(dāng)我一件裝備的零部件不足需要進(jìn)行掃蕩獲取，這里有兩種場景，一種是我剛好只需要這 4 個件合成 1 件，另一個是我需要更多的零部件，不僅僅這一個，所以對前者來說我達(dá)成了目的就可以返回去合成界面，而后者我可能需要更多數(shù)量的零件，但不管如何我一定還是需要返回合成界面的，然而不管是哪個場景，都必須點擊兩下關(guān)閉按鈕才能返回合成界面，所以在這個地方缺少了一個快速拉回用戶狀態(tài)的按鈕，叫做「去合成」。
當(dāng)我已經(jīng)完成了我的需求后，能夠讓我快速的返回合成界面，因為合成裝備才是我的最終目的，而不是刷更多的碎片。
下方的案例再解釋一下第 3 點，當(dāng)用戶點擊合成之后，不要提示告知用戶數(shù)量不夠，因為你已經(jīng)顯示了數(shù)量未達(dá)標(biāo)，用戶想點擊的目的是讓你告訴他未達(dá)標(biāo)改怎么辦，所以這里最好的處理方式就是把獲取該裝備的方法告訴用戶。
我們希望一個產(chǎn)品使用起來很自然，除了操作成習(xí)慣之后流暢外，一些幫助用戶潛意識的連貫的微交互也顯得非常重要。不需要有華麗的動畫，有時候僅僅只是一個晃動，一個速度曲線就足以合理的表達(dá)功能的語言。
文章來源：優(yōu)設(shè)
與其他相對成熟的設(shè)計領(lǐng)域（UI、插畫等）相比，數(shù)據(jù)可視化尚顯小眾，在一個細(xì)分、小眾、不成熟的領(lǐng)域里做設(shè)計，「怎么去找靈感」確實是一些小伙伴經(jīng)常遇到的問題。本文以本人工作經(jīng)驗為基礎(chǔ)，系統(tǒng)性分析了該問題及對應(yīng)的解決方法，并將其整理成文與大家分享，這在數(shù)據(jù)可視化行業(yè)內(nèi)尚屬首次。當(dāng)然了，本文雖面向數(shù)據(jù)可視化設(shè)計師群體，但其中的方法是通用的，運(yùn)用在其他設(shè)計領(lǐng)域也完全事半功倍。
本文圍繞「搜什么——去哪兒搜——怎么搜——素材的整理——靈感的迭代與更新」 五大板塊展開。
靈感庫的建立大體上分主動與被動兩種。主動，是我們有意識地收集、整理相關(guān)作品素材形成靈感庫的過程；被動，指通過朋友圈好友分享、同行推薦等獲取靈感的方法。因為后者更不可控，影響因素較多，比如你所處的圈子、社交網(wǎng)絡(luò)使用習(xí)慣等都會影響被動獲取的質(zhì)量。所以今天，我跟大家分享的主要是第一種主動建立靈感庫的方法，而這個方法的核心我把它歸納為兩個字 ：搜索。
搜索是現(xiàn)在這個時代我們主動獲取信息的最主要手段，每天我們通過各類關(guān)鍵詞在各類 APP 上獲取各樣的服務(wù)、產(chǎn)品和資源。靈感的主動收集就是一個通過關(guān)鍵詞搜索，然后分類、整理、研究、再利用的過程。所以影響靈感收集的主要因素其實就是我們能不能用好搜索。不同的搜索方法、渠道、關(guān)鍵詞極大地影響著我們獲取到的信息質(zhì)量，這也是本篇文章為何以搜索核心展開的原因。
如下圖所示，同樣的關(guān)鍵詞在不同的搜索渠道，得到的內(nèi)容質(zhì)量是不一樣的。
互聯(lián)網(wǎng)很大，如果沒有明確的目標(biāo)，找靈感的過程就跟刷抖音一樣，恍恍惚惚幾個小時，好像點了不少贊，收藏了不少干貨，回頭看其實并沒有什么特別有價值的東西，所以找靈感要有目標(biāo)，有 KPI 才行，有目標(biāo)就有標(biāo)準(zhǔn)，有標(biāo)準(zhǔn)才有方向和效率。
如上圖所示，我對數(shù)據(jù)可視化這個行業(yè)術(shù)語做了分析和拆解，這樣做的目的是為之后搜索關(guān)鍵詞的提取做思路的拓展。很多小伙伴在搜索可視化相關(guān)內(nèi)容時，思路總是局限在「可視化」這個關(guān)鍵詞上，但是直接使用這個關(guān)鍵詞搜索，大多數(shù)時候并不能找到我們心理預(yù)期的結(jié)果，或者搜索多次后，看到的都是之前見過的作品，很難突破邊界，獲取更多新的靈感。造成的這個結(jié)果的原因顯而易見，就是關(guān)鍵詞的匱乏，不知道搜什么。而對「大屏數(shù)據(jù)可視化」進(jìn)行解析之發(fā)現(xiàn)，以往的搜索，我們只使用了四個方向里的其中一個，其它三個方向并沒有很好的利用。現(xiàn)在，我們以每個方向上的核心關(guān)鍵詞為基礎(chǔ)，去豐富它的下一級關(guān)鍵詞，這樣就會像枝芽新生一樣，在各個節(jié)點延伸出豐富的詞匯。
媒介就是指數(shù)據(jù)可視化設(shè)計最終落地在什么平臺，一般來講，大屏數(shù)據(jù)可視化設(shè)計落地的媒介當(dāng)然就是大屏了，以它為核心做關(guān)鍵詞的發(fā)散，可以產(chǎn)生其它幾個二級關(guān)鍵詞。
數(shù)據(jù)類型是主要數(shù)據(jù)的特征或來源，不同的數(shù)據(jù)類型，在可視化設(shè)計時有不同的視覺特征。比如地理信息的數(shù)據(jù)可視化，一般會與道路、河流、人造建筑、某區(qū)域內(nèi)地標(biāo)等一起出現(xiàn)，會有豐富的 3D 場景、動效，而圖表信息相對較少；報表類信息的數(shù)據(jù)可視化，則主要以更好地展示報表內(nèi)大量數(shù)據(jù)為主，所以強(qiáng)調(diào)信息的層級、主次，設(shè)計的目標(biāo)是要減少用戶認(rèn)知負(fù)擔(dān)、引起用戶閱讀興趣，促進(jìn)數(shù)據(jù)內(nèi)容的有效傳達(dá)，因而會較少使用動畫，其次，因數(shù)據(jù)較多，也很難對應(yīng)到某個具體的物理場景，故 3D 模型等也較少使用。
所以以數(shù)據(jù)類型為核心，拓展的二級關(guān)鍵詞會讓搜索結(jié)果更精準(zhǔn)，更有針對性。
設(shè)計風(fēng)格就是視覺設(shè)計整體上給人的想象和感受，好的設(shè)計就跟一個人一樣，一定是有自己鮮明的個性和氣質(zhì)，能夠引起人的共鳴和向往，唯有如此，設(shè)計才能吸引人，從而影響人，并最終傳遞自己的觀點給觀者。所以設(shè)計風(fēng)格的定義是視覺設(shè)計中最重要的一環(huán)，也是最需要靈感和創(chuàng)造力的部分。
作為數(shù)據(jù)可視化設(shè)計師，我們想要找到的參考是那些具有數(shù)據(jù)可視化風(fēng)格的作品，但這些作品本身并不一定是在講數(shù)據(jù)可視化的內(nèi)容，只要作品某部分的設(shè)計有我們想要的那種「感覺」，就可以了，而這個作品可能是某段影片、某個動效、某種圖形、某個元素或聲音。基于這樣的思路，我歸納了一些具有數(shù)據(jù)可視化風(fēng)格但不一定都是數(shù)據(jù)可視化作品的關(guān)鍵詞。這就是一個特別有意思的點，我們想要找到某個內(nèi)容，但當(dāng)我們用最貼切它的那個名字去找時，卻不一定能找到最能代表它風(fēng)格的作品。所以當(dāng)我們跳出數(shù)據(jù)可視化這樣一個具體的點，而從更抽象的設(shè)計風(fēng)格這個層面去看待它的時候，就能更好地發(fā)散思維、拿到了更多好的關(guān)鍵詞，找到更多的刺激點。
以設(shè)計風(fēng)格為例，我們從它的節(jié)點上找到任意一個關(guān)鍵詞：SCI-FI，然后搜索這個關(guān)鍵詞，我們看看搜索到的結(jié)果。
業(yè)務(wù)場景簡單理解就是在什么情況下要解決什么問題，它是數(shù)據(jù)可視化的落腳點，也是數(shù)據(jù)可視化的商業(yè)價值所在。每個公司或團(tuán)隊，都會有自己專注的業(yè)務(wù)方向，所以在工作中找這方面的靈感，從業(yè)務(wù)場景入手效果最好。
簡單回顧下，通過上部分文章的分析，我們從媒介、數(shù)據(jù)類型、設(shè)計風(fēng)格、業(yè)務(wù)場景四個方面形成了一個數(shù)據(jù)可視化的關(guān)鍵詞的矩陣。這個矩陣是建立靈感庫的基礎(chǔ)，之后每當(dāng)我們有新的關(guān)鍵詞要加入，或者有效果不好的關(guān)鍵詞需要剔除，只需修改、迭代這個關(guān)鍵詞矩陣即可。有了這個關(guān)鍵詞矩陣后，我們?nèi)绾卫盟瓿梢淮位趯嶋H需求的靈感搜集？下面給大家舉個小例子來看一下怎么用。
首先用盡可能簡短的一句話描述業(yè)務(wù)方訴求。
一句話描述業(yè)務(wù)訴求后，我們把業(yè)務(wù)需求帶到關(guān)鍵詞矩陣中，就會獲得如下圖的結(jié)果：
可以看到，帶入需求后，按樹狀結(jié)構(gòu)去匹配與需求相吻合的關(guān)鍵詞，就可拿到明確的搜索指引目錄，然后我們按搜索指引，開始靈感收集即可。
這里有個小小的點，就是為什么要盡可能用簡短的一句話來描述業(yè)務(wù)方訴求，
合適的關(guān)鍵詞是第一步，它保證了我們搜索結(jié)果的有效性，而去哪兒搜決定了我們搜索結(jié)果的質(zhì)量。如下圖，針對數(shù)據(jù)可視化設(shè)計師，我對「去哪兒搜」這個問題按我自己的從業(yè)經(jīng)驗做了梳理。
從我的歸納里大家可以發(fā)現(xiàn)，我把數(shù)據(jù)可視化設(shè)計師的靈感來源分為了四大塊（其它行業(yè)的設(shè)計也大體上就這四塊），分別是：設(shè)計網(wǎng)站、產(chǎn)品或服務(wù)提供方、獨立設(shè)計師或工作室、視頻網(wǎng)站。
第一部分：設(shè)計網(wǎng)站
設(shè)計網(wǎng)站部分列出的都是設(shè)計師們都熟悉的幾個站點，在之前，大多數(shù)靈感的收集都可在花瓣完成，但花瓣最近幾次改版之后，已經(jīng)沒有以前那么好用了。對數(shù)據(jù)可視化方面的素材搜索，個人經(jīng)驗上，強(qiáng)烈推薦大家去 behance，雖然 behance 訪問方面也面臨一些困難，但是，但凡你想真的了解一些好的設(shè)計，這個網(wǎng)站，是你一定要想辦法去經(jīng)常逛逛的。至于為啥不推薦其它幾個網(wǎng)站，倒并不是說其它網(wǎng)站不能用，只是搜索的結(jié)果相對局限。針對這塊的具體分析，我會在文末的 Q&A 里進(jìn)行。
第二部分：產(chǎn)品或服務(wù)提供方
我們知道，任何商業(yè)設(shè)計，一定是有一個業(yè)務(wù)或應(yīng)用場景來支撐的，一定程度上設(shè)計就是在圍繞業(yè)務(wù)場景提供視覺、交互、用戶體驗、品牌等方面的解決方案，也就是說設(shè)計是服務(wù)于業(yè)務(wù)場景的，反過來講，服務(wù)于這個業(yè)務(wù)場景的就只有設(shè)計師么？當(dāng)然不是。在市場條件下，服務(wù)的提供方除了像設(shè)計師這樣的個體外，更多的是我們熟悉的另一個機(jī)構(gòu)（組織），這個組織的名字叫「公司」。公司把大量專業(yè)的人員組織在一起，通過優(yōu)勢互補(bǔ)、強(qiáng)力協(xié)作，提供服務(wù)、解決需求方問題。對于數(shù)據(jù)可視化設(shè)計來講，企業(yè)當(dāng)然也參與其中。所以我們找靈感去服務(wù)提供方也是一個的方法。企業(yè)要證明自己的實力、要讓潛在客戶了解自己，必然會花大量的資源做營銷做推廣，而最常見的推廣的落腳點就是企業(yè)官網(wǎng)。很多做數(shù)據(jù)可視化的公司，會在官網(wǎng)展示一些能體現(xiàn)自己業(yè)務(wù)特點、業(yè)務(wù)實力的案例，而這些案例就是這些企業(yè)最好的數(shù)據(jù)可視化設(shè)計作品了，沒有人會在自己的臉上放垃圾上去，對不？ 所以但凡有案例展示的官網(wǎng)，案例基本都是最典型最好的設(shè)計，所以從這些案例中找靈感，也是一個有意思且有效的方法和途徑。
△ 阿里DataV
△ Hightopo
△ Tob.Design
第三部分：獨立設(shè)計師或工作室
獨立設(shè)計師一般給人的感覺是什么呢？就是在自己垂直的領(lǐng)域內(nèi)牛逼，近乎神一樣的存在。獨立設(shè)計師要能順利「獨立」，當(dāng)然是在設(shè)計能力、個人品牌建設(shè)、客戶維護(hù)、運(yùn)營管理等方面都有比較硬核的水準(zhǔn)，所以這部分設(shè)計師作品一般不會差。而工作室一般都是一個或者幾個知名設(shè)計師組成的團(tuán)隊，在管理方面更「公司化」一些，這樣的工作產(chǎn)出也會比較穩(wěn)定，水平較高。就可視化（包括類可視化）領(lǐng)域來講，個人比較認(rèn)可和喜歡的工作室有以下幾個（歡迎大家評論里補(bǔ)充，或參與文末問卷調(diào)查），Ta 們的作品風(fēng)格鮮明，找靈感也是不錯的參考
△ dennisschafer
△ huds+guis
以上對于「去哪兒搜」的分析，我相信可以給大家很好的啟發(fā)：我們設(shè)計師尋找好的作品并不一定要通過設(shè)計相關(guān)網(wǎng)站進(jìn)行，你看大家都能看到的東西，即使有突破，那也是大家所熟悉的樣子，你只有從圈子里跳出去，看 80% 的人看不到的東西，你的靈感才有機(jī)會與眾不同，標(biāo)新立異。
前面兩部分，我們介紹了搜什么（關(guān)鍵詞的定義），去哪兒搜（合適的素材來源），接下來以 behance 為例跟大家聊聊怎么搜，介紹一些具體的方法。我們的目標(biāo)是盡可能少的點擊搜索按鈕，且盡可能多的找到符合自己預(yù)期的有質(zhì)量的作品。要做到這點，首先我改掉自己以往的不好的搜索習(xí)慣。
我知道很多小伙伴都是輸入一個關(guān)鍵詞，然后看結(jié)果頁，沒有滿意的就換一個關(guān)鍵詞繼續(xù)，這樣做很低效，容易漏掉結(jié)果頁中符合你預(yù)期的好作品，并且也容易造成關(guān)鍵詞的浪費(fèi)，通過第一部分關(guān)鍵詞矩陣的介紹，大家都知道，關(guān)鍵詞是被定位推導(dǎo)而來的，若不停的換關(guān)鍵詞，很快就會出現(xiàn)關(guān)鍵詞用完了但是依然沒有找到好靈感的囧局，所以榨干每一個關(guān)鍵詞是搜索的重要手段，具體怎么做到這一點，我個人有以下思路給大家參考：
快速瀏覽、標(biāo)記自己感興趣的項目，稍后再做整理
通過這個結(jié)果頁面我們看到，搜索結(jié)果包含「所有結(jié)果、項目、人物、情緒板」四個選項，默認(rèn)顯示所有結(jié)果，但這個意義不大，重點在項目跟情緒板。
項目
切換到項目標(biāo)簽，項目標(biāo)簽下展示的都是完整的項目作品，這是可以快速瀏覽，看到感興趣的內(nèi)容就把它標(biāo)記到新的頁面，等所有瀏覽查看結(jié)束后再細(xì)看每個項目，并對項目做進(jìn)一步的分類和整理。
項目標(biāo)簽下提供的篩選項很實用，分類依據(jù)推薦「好評最多+本月」的組合，以月為單位既可選到大家都比較認(rèn)可的新作品也避免了因數(shù)據(jù)波動造成部分作品質(zhì)量差的情況。「已策展」類似站酷或 UI 中國的首頁推薦，是被官方編輯認(rèn)可和推薦的作品，一般都會有很高的質(zhì)量，但時間上可能會比較久遠(yuǎn)。
在篩選器里面，有另一個比較實用的功能叫做「按色彩篩選」，如果客戶或者業(yè)務(wù)方對主色調(diào)有要求，就可以通過色彩的篩選，找到更符合我們業(yè)務(wù)需求的相關(guān)作品借鑒，或者設(shè)計師自己對某類顏色的搭配總是調(diào)整不好，也可以通過篩選，看看其它同行是如何處理這類色彩的，這也是一個有針對性訓(xùn)練和學(xué)習(xí)的方法。
情緒版
情緒版就是花瓣里的畫板，它是其 Ta 設(shè)計師采集的同類主題的作品合集，用法也跟花瓣一模一樣，唯一的不同是花瓣可以采集站外的內(nèi)容到畫板，而behance 只能采集站內(nèi)的內(nèi)容，其余兩者完全一致。
情緒版默認(rèn)是按時間的先后順序排列，所以可以通過篩選項，將排列順序調(diào)整為「關(guān)注人數(shù)最多」，正常來講，關(guān)注人數(shù)越多的情緒版收集的作品質(zhì)量也越高。
我們知道，像站酷、UI 中國等平臺，用戶上傳作品時，都需要給作品添加一些標(biāo)簽，這些標(biāo)簽的作用就是幫助網(wǎng)站做人工的作品分類，我們點擊某一標(biāo)簽就能看到使用了同一標(biāo)簽的所有作品，可以說標(biāo)簽是比搜索關(guān)鍵詞的內(nèi)容檢索手段。每一個作品下，都顯示了作者上傳作品時填寫的標(biāo)簽，通過點擊這些標(biāo)簽我們將搜索結(jié)果引入到了另一個更純粹有效的內(nèi)容領(lǐng)域。
更有趣的是，標(biāo)簽同樣支持項目、情緒版這兩個層面的進(jìn)一步分類，同時也支持之前介紹過得分類篩選功能。也就是說，在最開始搜索時找準(zhǔn)一個關(guān)鍵詞，之后通過情緒板、作品標(biāo)簽等方式就能關(guān)聯(lián)起來海量的內(nèi)容。
通過前兩步，我們已找到了一些比較不錯的作品，而優(yōu)秀作品的背后當(dāng)然是優(yōu)秀的設(shè)計師或團(tuán)隊。所以點進(jìn)作者的主頁看，一般都會有驚喜的。除了能看到作者自己的作品外，我想說的是另一個標(biāo)簽「好評」，好評這個標(biāo)簽其實體現(xiàn)了作者的審美和職業(yè)方向，如果作者本人在領(lǐng)域內(nèi)已經(jīng)足夠?qū)I(yè)，那么能被 Ta 欣賞和點贊的作品大概率也不會差，所以好評這個按鈕，是借助行業(yè)大咖的手幫我們做了一次作品的篩選和收集，點這個標(biāo)簽進(jìn)去大多數(shù)時候是不會讓你失望的，一般都驚喜滿滿。
在今天，每個設(shè)計師離自己領(lǐng)域里最頂尖的大咖，只隔著 3.75 個人，通過點擊作者的「正在關(guān)注」，你可以看到設(shè)計師本人還關(guān)注了行業(yè)里的哪些設(shè)計師，通過這樣的操作 3 到 4 次，你會發(fā)現(xiàn)總有那么幾個人，會在這個略顯復(fù)雜的網(wǎng)絡(luò)中被不同的大咖同時關(guān)注，那么 Ta 就是這個行業(yè)里比較頂尖的人才了。
在「正在關(guān)注」下面會顯示作者所在團(tuán)隊，因為好多項目其實一個人是很難完成的，大都是好幾個設(shè)計師協(xié)作的結(jié)果，所以如果你找到的這個設(shè)計師作品足夠牛逼，那說明他的團(tuán)隊也是很不錯的，順便關(guān)注一波就好。
當(dāng)你習(xí)慣這樣摸瓜，一段時間后這個行業(yè)里幾乎的大咖就都在你的關(guān)注列表里了，做到這一步后你就會有一個新的收獲，這點我們后面再聊。
利用前面的搜索方式，我們已經(jīng)找到了不少較為滿意的作品，接下來我們需要再對這些作品做簡單的篩選整理，把真正符合我們需求的作品整理出來。
我習(xí)慣用網(wǎng)站自帶的收藏功能及部分精品資源本地收藏的方式來整理自己的靈感庫。網(wǎng)站的情緒板我把它看作是一個各個終端通用的網(wǎng)盤。behance 提供了兩個收藏作品的功能：點贊與保存到情緒版。站酷跟 ui 中國也有同樣的功能。
點贊的作品，會統(tǒng)一收集到個人主頁「點贊」標(biāo)簽下，所有作品按時間排列，比較亂，所以推薦把喜歡的作品收集到情緒板。建立情緒板可以按類別將作品整理到不同畫板，由于情緒板是可以分享和被搜索的，所以使用情緒板整理靈感，不僅方便了自己，也益于同行。目前來看，情緒板在 behance 這個產(chǎn)品中已經(jīng)跟花瓣中的畫板非常像了，不僅可以采集一個完整的作品到情緒板，也可以采集作品中某個單獨的圖片或視頻到情緒板，這樣的靈活性跟花瓣完全一致，且 behance 將情緒板被放到了用戶非常容易觸達(dá)的位置，所以在大家的共同努力下，各類情緒板會越來越豐富，這個功能也會更有價值。
1. 資源的自我更新
經(jīng)常玩抖音的小伙伴都知道，抖音會根據(jù)你的點贊、瀏覽等行為，為你推薦符合個人口味的視頻，而這樣的推薦功能在 behance 也有，behance 會根據(jù)你點贊收藏的作品、你關(guān)注的人，給你推薦相應(yīng)作品，并且推薦作品是直接顯示在首頁的，每次打開 behance，你都會在網(wǎng)站最直觀的位置看到 behance 為你推薦的內(nèi)容，這里的內(nèi)容大體上分為兩類，一類是你關(guān)注的設(shè)計師的作品更新，另一部分基于已經(jīng)關(guān)注的作者推薦相似的作品給你，就我個人使用體驗來講，推薦還是相當(dāng)準(zhǔn)確的。
behance 的推薦功能是資源自我更新的一個重要手段，你關(guān)注的同一領(lǐng)域作者越多，收藏的作品越多，它的推薦就越準(zhǔn)確，這樣就節(jié)省了一些資源搜索的時間成本。要想獲得好的推薦結(jié)果，我建議你的 behance 上只關(guān)注一個領(lǐng)域的作者和作品，以我自己為例，我只關(guān)注數(shù)據(jù)可視化方向的作者和作品，雖然我也喜歡攝影、插畫等，但我主業(yè)是數(shù)據(jù)可視化，所以為了提高首頁推薦作品質(zhì)量，其它兩類我會去 500px 等更垂直的網(wǎng)站瀏覽，而不會在 behance 上關(guān)注。當(dāng)然，網(wǎng)站只是個工具，你也可以有自己的用法，于我而言，我關(guān)注的核心是效率。
2. 資源的迭代
如果把我們收藏的內(nèi)容比作是云盤里的資源，那么資源并不是越多越好，無論哪種類型的內(nèi)容，當(dāng)內(nèi)容很多的時候找起來都會比較麻煩的。我們需要堅持做一些工作來不斷減少資源的數(shù)量提高資源的質(zhì)量，少而精是最好的狀態(tài)，如此我們就不需要花很多時間去找某個內(nèi)容，而已有的內(nèi)容又都能很好的滿足需求。要做到這點，我們需要給資源做迭代，所謂迭代就是去掉舊的過時的內(nèi)容，添加新的更好的。每隔一段時間，回來翻一翻自己之前收藏的作品，會發(fā)現(xiàn)有些作品自己已經(jīng)看不上了，因為在做靈感收集的過程中，我們的審美會自然有所提高，當(dāng)輸入的作品樣本越來越多，我們對作品評價的維度也會更多，之前那些覺得好的作品，現(xiàn)在看來也就會有缺陷和不滿，這是一個很正向的結(jié)果，成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品，添加更符合自己當(dāng)前審美的作品到各個情緒版。
迭代還意味著我們需要對那些情緒版的標(biāo)簽做維護(hù)，對那些命名跟內(nèi)容不大匹配的情緒板，要及時更新更恰當(dāng)?shù)拿?。同時，也要對情緒板內(nèi)容的類別做維護(hù)，比如動畫、視頻類素材最好不要跟圖片類素材放一起，因為列表的封面圖并不能體現(xiàn)作品詳情里是否包含視頻等內(nèi)容，所以作品很多時找起來就比較麻煩，按內(nèi)容的不同類型把內(nèi)容分別收納進(jìn)不同的情緒版可以給我們后續(xù)的應(yīng)用節(jié)省不少時間。
1. behance在國內(nèi)訪問受限，為何要以它為例做靈感收集的方法介紹？
首先，Behance 國內(nèi)訪問不暢，并不影響它是世界范圍最優(yōu)秀的設(shè)計師聚集平臺的事實。對于數(shù)據(jù)可視化而言，并不是一個新興的領(lǐng)域，在國外早已有之，并且相對成熟，而國內(nèi)相關(guān)作品、經(jīng)驗尚少，所以從獲取知識的角度來看，behance 上你能獲取到的數(shù)據(jù)可視化相關(guān)作品或內(nèi)容，不管是數(shù)量還是質(zhì)量上，都要比國內(nèi)的好。
其次，正如文章剛開始我說的那樣，文中介紹的方法對國內(nèi)的大部分設(shè)計網(wǎng)站同樣適用，尤其是關(guān)鍵詞的定義、標(biāo)簽的使用、收藏及情緒板（畫板）的使用技巧。綜上，我當(dāng)然是要介紹「更好」的靈感獲取網(wǎng)站給大家，而不是揪著大家熟悉的聊。
2. 我自己也收集研究了不少優(yōu)秀作品，為何做的時候還是不知道如何下手？
毋庸置疑，優(yōu)秀的作品建立在良好的審美基礎(chǔ)之上，好的作品看多了審美自然會有提升，但審美有了為啥還是做不出符合自己期望的作品來。這塊有兩個問題，一個是刻意練習(xí)的度沒到，另一個是不會分析別人好的作品?？桃饩毩?xí)聽名字就知道是什么意思，而作品分析就是我們要知道一個作品之所以讓人眼前一亮，它「亮」在什么地方，就是要具體到細(xì)節(jié)，我們越是能夠細(xì)致的指出那些讓你覺得好的點，就越能模仿和借鑒，之后再輔以大量的刻意練習(xí)，才會有效果明顯的提升。
文章來源：優(yōu)設(shè)
我們在翻閱雜志的時候，總是會驚嘆雜志里的圖片怎么會這么好看。其實雜志里的圖片一方面是由攝影師專門為雜志的編排而拍攝的，另一方面，也是因為雜志對圖片的處理手法十分巧妙，今天這節(jié)課我們將給大家講解一下關(guān)于雜志里的圖片都是如何處理的。
在課程開始之前，我們先來看一些雜志的圖片。這三張是以一張大圖片為主體的雜志頁面，我們將圖片用紅色的色塊標(biāo)記，文字則用藍(lán)色的色塊標(biāo)記。我們可以發(fā)現(xiàn)，紅色部分的面積遠(yuǎn)大于藍(lán)色部分的面積。
我們換成小圖片的頁面看看。同樣的，圖片的面積也遠(yuǎn)大于文字的部分。我們可以發(fā)現(xiàn)，現(xiàn)在雜志的大多數(shù)頁面其實都是以圖片作為畫面的主體，或者說圖片所占比重會比文字大得多。
為什么會出現(xiàn)這種現(xiàn)象呢？那是因為圖片與文字相比，圖片的視覺沖擊力和對人的吸引力遠(yuǎn)大于文字。為了能夠吸引讀者的購買和閱讀，所以雜志頁面中會加入豐富的圖片。
那么我們接著先來了解一下關(guān)于圖片分類的小知識。
圖片可以分為點陣圖和矢量圖，點陣圖就是以像素組成的圖，放大之后可能會造成模糊等失真的效果。矢量圖則是由線條、幾何圖形等構(gòu)成，可以隨意放大縮小也不會失真。
也可以分為攝影圖片和手繪圖片，顧名思義，攝影圖片是用照相機(jī)拍攝出來的圖片，而手繪圖片則是通過筆或者手繪板畫出來的圖片。
矩形圖片和去底圖，矩形圖片是指外輪廓是矩形的圖片，而去底圖則是把環(huán)境都除去，只保留主體的圖片。
因為手繪的圖片本身就會比實物的攝影圖更加具備張力，也更容易給人提供想象，修飾的需求并沒有攝影圖來的這么高，而且手繪的或是矢量圖在雜志中出現(xiàn)的概率相對比較少一些，所以本篇教程所針對的圖片是左邊的這兩種，矩形或者是去底的攝影圖片。
這節(jié)課我們雖然講解的是如何去修飾一張圖片，可是對于圖片的修飾我們應(yīng)該要把控好一個度，因為如果我們一味的追求效果而對圖片進(jìn)行過度的處理，很可能會削弱了圖片想表達(dá)的東西，甚至讓版面過于繁雜而凌亂不堪。而且在某些情況下，圖片不需要進(jìn)行修飾也能讓版面足夠有張力和美觀，那么在什么情況下我們可以不對圖片進(jìn)行修飾呢？我們來看看吧。
第一種情況是當(dāng)我們使用的圖片本身就足夠的好，足夠有質(zhì)感和張力，無需進(jìn)行修飾便能夠撐起整個版面。
第二種情況是我們可以通過兩張以上的圖片排列，讓圖片之間產(chǎn)生對比或是關(guān)聯(lián)，從而讓畫面產(chǎn)生張力。
那么第三種情況就是當(dāng)我們想要強(qiáng)調(diào)文字部分時，并且文字組合做得足夠的精致或者有表現(xiàn)力時，那么圖片也可以省略掉修飾的環(huán)節(jié)。
最后一種情況是我們要刻畫簡約風(fēng)格的畫面時，就要盡量避免對圖片進(jìn)行太多的修飾和刻畫，否則圖片會使畫面產(chǎn)生巨大的違和感。
接下來正式進(jìn)入本次教程的核心部分，雜志中對圖片都是如何刻畫的呢？我們第一種要講解的方法就是前面提到的去底圖。
為什么說去底也算是一種修飾圖片的手法呢？我們來看看這張圖片，這張圖片是我從一個電商網(wǎng)站上保存的圖片。我們可以看到這張圖片雖然十分的美觀，但是模特的裙子和背景色調(diào)很接近，比較不容易展示裙子的細(xì)節(jié)。
我們把他做成一頁雜志，可以發(fā)現(xiàn)這個頁面從版式結(jié)構(gòu)上來說并沒有什么問題，整體畫面也十分美觀。
但是如果我們想要做一版能夠展示裙子細(xì)節(jié)的版面，那么我們可以嘗試把這個模特?fù)赋鰜?，裙子在純色的背景上就足夠清晰和亮眼了?
把去底的模特放進(jìn)版面中，這兩個版面對比一下，是不是右手邊的版面更加簡潔有力呢？
另外，去底的圖片相比起矩形圖片也會顯得更加靈活。我們用這樣一個多張矩形圖片整齊排列的畫面來作為例子。這個版面排列十分整潔美觀，信息都一目了然。
但是如果我們想要讓版面變得更加活潑和有張力一些呢？我們就可以通過去底來實現(xiàn)。利用圖片去底之后所形成的負(fù)空間進(jìn)行排列圖片，讓圖片錯落有致地排列在版面里，這樣靈活處理出來的畫面，會更加熱鬧和有張力。
這些都是雜志中使用去底圖片的案例。
剛剛我們講的只是去底圖片的基礎(chǔ)玩法，接下來我們要講解一下去底圖的另外兩種高階一些的玩法。首先是粗糙去底。粗糙去底就是大致地沿著主體的輪廓將主體摳下來，并不需要嚴(yán)絲合縫地?fù)笀D。
還是用這個模特當(dāng)做案例，如果我們覺得剛剛做的這個版面有些單調(diào)的話，那么我們不妨嘗試一下粗糙去底的方法。粗糙去底的方式能讓圖片的形式感更加強(qiáng)烈。
很多時候粗糙去底還會在圖片底下加一個小小的投影，讓圖片有種不規(guī)則的小紙片的感覺。
在雜志中這樣的處理方式是非常常見的，它適合用在偏時尚潮流或者是偏文藝的版面中。
第二種進(jìn)階玩法是半去底，也可以叫做局部去底，意思就是沿著圖片主體的外輪廓將主體的局部摳出來。
在這里給大家介紹兩種比較常用的局部去底的小技巧。第一種是主體背后有輪廓明顯的物體的話，我們可以將主體沿著主體背后物體的輪廓進(jìn)行摳圖，例如這個模特背后的門。
當(dāng)主體背后沒有什么明顯的物體讓我們進(jìn)行局部摳圖的時候，那也沒關(guān)系，我們可以使用第二種小技巧，將主體踩著的地面摳出一部分來，這樣也能一定程度上展示主體所在的環(huán)境。
我們同樣將這兩個摳好的模特放進(jìn)版面里，比起最初的版本，這兩稿的形式感會更強(qiáng)一些。
這個雜志作品就用到了我剛剛介紹的小技巧。這樣的去底方式能讓版面更加活潑有趣。
另外將去底圖和矩形圖片放在一起，能夠產(chǎn)生強(qiáng)烈對比，表現(xiàn)力也會很強(qiáng)。
例如這些雜志頁面都存在著矩形圖片和去底圖片的對比。
我們很多時候都會自嘲自己只是摳圖的，可是聽了這些之后，有沒有發(fā)現(xiàn)自己連摳圖都不配，摳圖遠(yuǎn)遠(yuǎn)沒有你想得這么簡單，去底的圖片比矩形圖片靈活得多，也更具有活潑熱鬧的屬性，將去底圖處理得好，可以給版面帶來非常大的氣質(zhì)上的提升。那么我們接著來看，除了去底之外，還有什么別的處理圖片的技巧吧！
接下來給大家講解一下第二種比較常見的圖片處理方式——疊加色塊。
疊加色塊的方式有兩種，分別為半疊色塊和全疊色塊。我們先來講講半疊的。
好吧，又是這個模特。我們在他的背后疊加一個色塊，一方面可以一定程度上填補(bǔ)留白，另一方面也能讓圖片更具有形式感。
除了疊加這種矩形色塊，還可以嘗試疊加不規(guī)則的色塊，不規(guī)則的色塊相比矩形色塊能更靈活的處理負(fù)空間，也可以根據(jù)主體的輪廓進(jìn)行靈活調(diào)整。
看看這些案例，通過加入了色塊是不是讓畫面更飽滿和有張力了呢？
接下來來講講全疊色塊，全疊色塊的處理手法一般是用在這種多圖片并列排列的版面中，因為如果是一張大圖片使用全疊的手法就會顯得有些呆板了。
我們用個案例來展示一下吧，例如這樣一個版面，整齊地排列著九種不同的蔬菜，可是由于這些蔬菜的形狀各異，導(dǎo)致了負(fù)空間特別的零碎，畫面顯得有些散。
最快的解決方式就是給他們疊加一些色塊，那么版面就變得規(guī)整許多了。
如果我們覺得這樣有些不夠靈活的話，我們可以將個別的蔬菜放大，讓蔬菜的局部或者是投影超出色塊，這樣的版面就會顯得靈活而不零碎了。
第三個手法是使用描邊或者邊框。
剛剛我們用去底的方式來讓這個版面更加活潑有張力，其實通過添加邊框是一個更加簡單快捷的方法。
我們不需要改變版面的結(jié)構(gòu)，只需要在矩形圖片的邊緣添加一圈描邊，或者是將圖片的邊框處理成拍立得，版面就會立即顯得更加活潑有趣了。
邊框的形式有很多，例如在圖片的內(nèi)部加邊框，兩條粗細(xì)不同的線組成的邊框，或者是手繪的線條作為邊框。我們可以通過多看雜志總結(jié)出更多的邊框形式。
剛剛我們講的都是矩形圖片，其實去底圖片也是可以添加描邊的。例如這頁雜志，通過描邊的使用，使得深色的產(chǎn)品在深棕色的背景中能夠凸顯出來。
字疊圖是在雜志中可以說是最常見的修飾手法了，非常的簡單粗暴但是超級實用。字疊圖的方式大概也有三種，分別為標(biāo)題疊圖，段落文字疊圖和手寫體疊圖。
首先講講標(biāo)題疊圖的使用。我們來看看這個版面，他的主體是一個大草原的大場景圖片，圖片中沒有明顯主體。那么我們就可以通過將標(biāo)題疊在圖片上的方式，使得圖片上產(chǎn)生視覺焦點。
如果將兩張圖片的位置換一換，上方的大圖片變成了這張以蒙古包為主體的草原圖片，那么我們疊加文字的時候就需要注意到疊加的位置要與主體相呼應(yīng)了。
這兩個都是將標(biāo)題組疊壓在圖片上的例子，將標(biāo)題組合疊加在圖片上，能讓標(biāo)題和圖片都得到凸顯和強(qiáng)調(diào)。
接下來是疊加段落文字，將段落文字疊壓在圖片上，能讓版面更加靈活，也能讓大段的段落文字顯得沒這么枯燥。一般來說，因為識別度的原因，段落文字不會完全疊加在圖片上，只會疊壓局部。
我們同樣用大草原的文案來做一個段落文字的疊壓。由于是段落文字，特別需要注意文字的可讀性，所以我們將段落文字都疊壓在了色調(diào)比較淺的天空上，盡可能地保證閱讀的流暢。
最后是疊壓手寫體的處理方式，手寫體的疊壓與標(biāo)題一樣，同樣需要注意疊壓的位置。
手寫體的疊壓能將手寫體自帶的屬性帶給圖片，例如想讓圖片更文藝一些可以用細(xì)一些的手寫體，更潮流一些則可以疊壓粗的涂鴉感覺的手寫體等等。
我們剛剛講解的都是在矩形圖片上疊加文字，那么在去底圖片上能不能疊加文字呢？其實是可以的，像一些裝飾的手寫體，或者字號比較大的標(biāo)題，在不影響識別性的情況下進(jìn)行字疊圖的手法都是沒有問題的。但是！我們是非常不建議在去底圖上疊加段落文字，因為一般去底圖可以用來疊壓文字的地方不多，如果要大面積的疊壓段落文字，必定會產(chǎn)生識別度不足的問題，所以在去底圖上疊加段落文字需要非常謹(jǐn)慎。
那么除了字疊圖之外，利用文字進(jìn)行修飾的方式非常的多，我在這里給大家介紹幾種比較常用的。
將文字繞著圖片主體排列是在雜志中非常常見的一種手法，能讓畫面變得更加活潑熱鬧。
我們也可以將文字處理成發(fā)射狀，模擬出一種噴口而出的感覺，使得圖片更具有動感。
添加對話框，能讓圖片變得十分生動，讓靜止的圖片也有一種會思考或者會說話的感覺。
類似的方式還有非常多，例如文字加指向性的箭頭、個性的字體、數(shù)字，甚至是豎排的文字等等，都可以變成裝飾圖片的元素。
還是用一個案例來示范一下吧。這次換一個鞋子的案例，我們看這個版面構(gòu)圖啥的都沒什么問題，就是缺乏了一些活潑的氛圍，那么我們加入文字的裝飾性元素，版面就瞬間變得活躍了。
如果我們想要添加裝飾元素又缺少文案的時候，那我們就可以用下一種修飾手法，添加手繪的元素。
裝飾性的手繪小元素，能夠模擬出人物或者是物體的運(yùn)動趨勢，讓圖片和版面具備運(yùn)動感。
同樣這雙鞋，我們給他添加一些手繪的小元素，也同樣能夠塑造出活潑生動的畫面。
接下來要講的是添加投影
我們來看看這些添加投影的例子，投影可以讓圖片變得更加真實，更具備細(xì)節(jié)，使得畫面更加具備質(zhì)感。
這一個案例添加投影也可以一定程度上解決畫面單調(diào)的問題，但是他具備的氣質(zhì)并不是添加裝飾性元素的活潑熱鬧，添加投影帶來的是使畫面更具備質(zhì)感。
添加投影除了剛才使用的真實投影外，我們還可以用這種假的投影，其實就是一個疊在主體下方的，與主題輪廓相似的幾何色塊。這種方式更注重的是表達(dá)一種形式感，而非真實感。
第8種的修飾手法是傾斜。
傾斜的手法能讓圖片具有不平衡感，從而產(chǎn)生強(qiáng)烈的動感。關(guān)于傾斜我們之前已經(jīng)有別的教程詳細(xì)說過了，那我們就直接看看案例吧。
我們將這雙鞋子進(jìn)行傾斜擺放之后，感覺畫面就不那么單調(diào)了，產(chǎn)生了一定的張力。
最后一種方式是出血和跨頁處理的手法。
也許你們會想怎么出血也算是修飾手法呢？不就是放大而已么？沒錯，放大也能算是一種修飾手法。在圖片足夠高清的情況下，放大能讓讀者留意到許多我們平時不注意的細(xì)節(jié)，增添了版面的細(xì)節(jié)感。相對于完整的圖片，經(jīng)過出血的處理的圖片遭到了裁切，會產(chǎn)生一種陌生感，也能夠讓讀者覺得更新鮮。
最后我們還是用這雙鞋子來示范一下，因為鞋子放大出血之后，版式結(jié)構(gòu)會遭到破壞，所以我們得換一個新的構(gòu)圖。由于經(jīng)過出血處理之后的鞋子并不完整，所以我們在上方加入了一雙小的完整的鞋子作為信息的補(bǔ)充。
好啦，我們給大家總結(jié)的雜志里處理圖片的小技巧已經(jīng)全部講完啦，不知道大家都學(xué)會了沒。雖然說我們是從雜志的設(shè)計中總結(jié)出來的設(shè)計技法，但是并不意味著這些手法就只能應(yīng)用在雜志設(shè)計中，設(shè)計其實都是共通的，并沒有說某些技法就只能被用在某些領(lǐng)域中。下面我們就給大家?guī)硪粋€海報的案例，給大家演示一下如何將雜志中的騷操作帶到別的設(shè)計中。
因為我們使用的是雜志的編排技巧，比較適合時尚、潮流或是文藝的風(fēng)格，所以我們選擇做一個潮牌的宣傳海報，這樣在氣質(zhì)上會比較相符合。
首先建立一個版面并確定好頁邊距。接著我們把畫面的主體，也就是這個潮牌的創(chuàng)始人陳冠希歐巴放在畫面中間。
然后將標(biāo)題文字放在版面右上角，標(biāo)題文字我們做了一個投影的效果增強(qiáng)標(biāo)題的形式感。對應(yīng)的，我們在版面的左下角編排二級信息的文字，做一個對角線的呼應(yīng)。
接著將其余的文字安排在左上角和右下角，我們整個版面的大體框架就出來了。我們可以看到現(xiàn)在這個版面的留白太多，形式感不夠強(qiáng)烈，缺乏氛圍感。接下來我們就要用我們今天教程所講的手法來一一解決這些問題。
先來一個疊加色塊的手法，在歐巴的身后疊一個黃色的圓形色塊，那么上半部分負(fù)空間零碎的問題就一定程度上得到了解決。接著再來添加一個投影，這個投影我們選用了高明度和高純度的青藍(lán)色，這樣更加有時尚有趣的感覺。
然后使用字疊圖，從文案中的slogan里提取出It’s Movement的英文放大疊在人物身上，這里我們選用了一款比較有趣的粗無襯線字體。
剩下的負(fù)空間我們用添加文字裝飾元素和手繪裝飾元素的手法填滿。最后的最后，再給版面上加一層點元素背景，增加版面形式感。我們這一張海報就最終成型了。
文章來源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計的小編 http://sillybuy.com
