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