全文1萬4千字，講解文字編排有兩個層面的作用。其一，它做了一些傳遞信息的工作；其二，它自身在合理地編排下就會有韻律的美感。
在通常版式設計中，一般是由文字、色彩、圖形三個要素組合而成的。通過這三個要素的有機搭配，從而給人視覺上造成一定的沖擊，激發(fā)人們的閱讀興趣。
其次，文字組合編排是構成版式設計中最主要的構成要素，也是傳遞信息的重要的設計手法和策略。字體的選擇是否合適則會直接影響版式的效果，雖然能現(xiàn)在可供選擇的字體五花八門，但是所選擇的字體要能夠與版式的主題相吻合。除此之外，文字的字號也會影響閱讀，在排版時要注意文字信息的等級關系，做到有主有次。
如果文字從發(fā)明出來的那一刻起，就是為了記錄和傳遞信息，那在版式中的文字就是通過設計設計手法來更好的傳遞信息。
怎么去理解這句話呢？如果大家看過《王牌對王牌》這節(jié)目，里面有個游戲叫傳聲筒，里面的游戲規(guī)則是“每隊輪流參賽，每隊任選5名成員，每個成員用隔板隔開，第一人將對手所出題目，演繹給隊友，只能通過音效和動作表達，依次傳遞給下一位隊友，經(jīng)過三四個人傳遞后最后一名隊友，猜測題目上的信息。猜對得一分，最終積分高的一隊獲勝?！?
這種形式像不像設計師的日常呢？老板或者領導有個“牛批卡拉斯”的想法,然后他在想法告訴運營總監(jiān)或者文策劃總監(jiān)，然后在由下面的運營/策劃專員做成方案，最后在交給設計師做成圖片來傳遞老板那個“牛批卡拉斯”的想法。
那么文字組合怎么去編排就成為將老板的想法完美的傳遞出來的關鍵要素，為了不南轅北轍，我們需要將文字編排的形成方案，并在實際的工作中通過不斷的實踐去完善，那讓我們一起來了解下文字組編排的技巧吧。
一般的軟件里面都會有字體選擇器，我們需要找想要的字體的時候都是直接在里面去搜索，然后再去點擊使用，那么今天我來看看怎么通過觀察字體家族的特征來找到我們想要的字體吧。
家庭中的所有成員都有各不同的稱謂來辨別身份，在字體家族中也是如此，我們通過不同的前綴后綴的縮寫來區(qū)別字體的樣式。
例如：字體前面的LT代表的是萊諾字體公司，如果我們使用的字體前面或者后面帶有LT，那就說明這個款字體是由萊諾字體公司出版的。
當然，我們日常看到字體廠家也會有很多，例如常見的MS是微軟公司，MT是蒙納字體，ITC是國際字體公司等等，一般字體公司的名稱的縮寫為連著的大寫字母，所以我們看到字體中帶有2-3的大寫字母，我們可以默認他們是字體公司的名稱縮寫。
那剛剛我們看到LT后面還有STD，那個是什么意思呢？STD是英文單詞“Standard”的縮寫，代表著這個字體只支持基礎的字符集，它的字體字符集相對會少點，與其相對應的“PRO”是英文單詞“Professional”，則是代表字符集比較多的后綴。
既然字體家族的縮寫那么多，那我們怎么把它規(guī)整好方便記憶呢？方便我們通過不同的前綴后綴來區(qū)別字體的樣式。正常的我們講字體家族系統(tǒng)一分為三類，1.字體的寬窄，2.字體的造型，3.字體的字重。
寬窄系統(tǒng)：只有比較大的字體公司去做這類型字體，因為不常用，所以做的就比較少，漢字里面好像漢儀旗黑又寬窄系統(tǒng)，那我們怎么去識別呢，以Ai為例子，如果我們在字體后綴發(fā)現(xiàn)帶Condensed，那么我們可以確定這個字體為窄體，以后如果我們在字體后綴發(fā)現(xiàn)帶Extended，那么這個字體則為寬體。如果設計中有特殊的需求，需要我們可以通過后綴去識別。
造型系統(tǒng)是為給不同應用場景下字體做區(qū)分的，正常的分為：常規(guī)體，意大利斜體，空心體，裝飾花邊，老式數(shù)字。
常規(guī)題：常規(guī)體的后面一般帶Roman或者Regular,帶著著這個字體里面最常用也是最適中的字體。
意大利斜體：英文后綴一般帶Italic,這類型的字體一般是專人設計過的傾斜體，比軟件生成看起來更加舒適和諧。例如有的字體公司為了區(qū)分窄體的傾斜體，有的也會用這個單詞，oblique,但是意大利斜體（Italic）代表的是常規(guī)字的傾斜體。
空心體：英文后綴一般帶Outline,在一些大型的字庫公司設計的字體會有，他打出的字不是實心的，而是空心字類型的，常見會在比較粗的字體上會有，因為這個的字體變成空心字不容易破壞字體的負空間。
裝飾花邊：英文后綴一般帶Ornament，這種類型的字體一般比較少見，只要一個字體的字庫做到比較全的時候，才會考慮開發(fā)類似的字體。這個可以理解為字體類的素材，一般的應用場景比較少。
老式數(shù)字：英文后綴一般帶Oldstyle Figures，比較明顯的特征是高低不一樣，這類型的字體一般應用在小寫字母的編排中讓數(shù)字看起來更和諧。
標題專用字：英文后綴一般帶Titling，這類型的字體在放大后使用看起來比較精致，細節(jié)相對比較豐富，但是也有特殊的，例如Caslon字體的標題字用的是540的后綴。所以當找不到的時候我們可以通過細節(jié)去分辨。
字重的選擇一般是根據(jù)當前的選擇的字體去跳兩個字重去選擇，這樣才會有對比。字重也是我們設計中常用的選字模式。
我們認識了字體家族對我們做設計有什么作用呢，一個字體家族越全面，我們做設計是可以選擇的范圍就越大，也就越方便，所以我們接到需求，需要選擇字體排版的時候，大致看下字體家族，就可以分辨出這款字體是否適合我們去使用。
需要做好文字組合的編排的基礎是需要選擇合適的版面氣質的字體和相對應的中英文混合編排。
中文字體屬于方塊字，具有字體的輪廓性，并且每個字符占據(jù)的空間都是相同的，限制較為嚴格，如段落開頭必須空兩格，豎排文字必須從右到左等規(guī)則。中文字體是一種非常規(guī)整的文字，因此靈活性相對較小，編排難度較大。
一般情況下，英文字體采用流線型方式，靈活性很強，能夠根據(jù)版面的需求靈活變化字體的形態(tài)，以解決版面僵硬、呆板的問題，創(chuàng)造出豐富生動的版面效果。
在版式設計中，經(jīng)常會遇到中英文對照的情況。中文字體的象形、會意等特征和英文字體的簡單、圖形化的特征充分結合，展現(xiàn)兩種字體的優(yōu)勢。編排時應該注意中文字體與英文字體的設計創(chuàng)意與主次關系，做到層次明確，并且要注意字體的統(tǒng)一性，如果字體變化過多，很容易造成版面的混亂。
我們在聊中西文的編排之前我們需要先了解下西文的歷史，就像我們在打王者榮耀一樣，要學習某個英雄，就先得了解英雄的技能，然后才是這些技能怎么去搭配使用，學習文字組編排也是一樣的道理。
設計的目的一般是為零解決一些生活中的問題，字體的演化設計之路也是一樣的，都是通過外部能力能觸達的能力加上內部的需求所達到的最優(yōu)的解決方案?，F(xiàn)在我們將西文字體在歷史上的進程可以分為“文藝復興體” “古羅馬襯線體”“過程型襯線體”“粗襯線體”“無襯線體”。
我們可以大致簡單的把基礎款的字體分為兩種，一種是一種是襯線體和無襯線體，襯線體（Caslon,Baskeville，Bodoni,Didot,Garamond,）,無襯線體（DIn,Helvetica）,
襯線體
Garamond是一個早期字體，有老式數(shù)字，雕刻感比較強，有傾斜體，
Baskeville修飾比Garamond要粗點，稍微有點厚重感，偏向優(yōu)雅，特征明顯，
Bodoni筆畫有明顯的過度，比較現(xiàn)代，
Didot比較常見，特征更明顯，現(xiàn)代感更加強，女性感強，多用品牌，雜志，簡化大膽。筆畫對比更加大，出現(xiàn)的比較晚
無襯線體
Helvetica，特征，比較平穩(wěn)，沒有特征，沒有華麗的裝飾，在國外特別受歡迎
DIN，和Helvetica區(qū)別：變化性特殊，切口有角度性的變化，更加簡單干凈。偏向美術字體數(shù)字的幾何形強，比較抓眼球
Futuer:菱角分明，幾何無襯線體，冰冷，升部比較高，比較高挑，多用于科技感比較足的設計中。
因為基礎款的字體很多字體公司都會去做，我們可以通過谷歌可商用字體庫去尋找免費字體尋找：http://www.googlefonts.net/
中文的基礎款排版字體一般為黑體，宋體，圓體，楷體和一些風格多變的美術體。
襯線體
最早是為適應印刷而出現(xiàn)的一種漢字字體，筆畫粗細有變化，而且一般是橫細豎粗，末端有裝飾部分，（即字腳，襯線），點，撇，捺，鉤等筆畫有尖端，屬于襯線字體，常用于書籍雜志報紙等正文排版，趙集，瘦金體。
思源宋體，前身是小塚明朝體改進的，筆畫特征比較相似，小塚明朝橫筆畫要細點，思源宋體橫筆畫要粗點。
無襯線體
黑體，屏顯字體，無論放大還是縮小都能看的清晰，黑體可塑性比較強，常用于標題字的制作，小的可以作為內文，黑體有稱作方體或者等線體，沒有襯線裝飾，字形端莊，筆畫橫平豎直，筆跡全部一樣粗細，結構嚴謹醒目，筆畫粗壯有力，撇捺等筆畫不尖銳，使人易于閱讀。由于其醒目的特點，常用于標題，導語，標志等。
思源黑體：是最廣泛知道的字體，質量高，7個字重，
漢儀旗黑：可以滿足所有的排版的需求，寬窄系統(tǒng)也有。
在我們日常的設計工作中，襯線體和無襯線體該怎么選擇呢？我相信很多設計師都在這個問題上糾結過。我們來結合歷史來看看這個問題吧
我們把時間倒退到歐洲17-18世紀，這個時期盛行一種藝術“巴洛克藝術”和“洛可可藝術”，巴洛克是一種更早期的宏大而華麗的藝術風格，后世有人將洛可可風格看作是巴洛克風格的晚期，即巴洛克的瓦解和頹廢階段。它產(chǎn)生在反宗教改革時期的意大利,發(fā)展于歐洲信奉天主教的大部分地區(qū),以后隨著天主教的傳播,其影響遠及拉美和亞洲國家。巴洛克作為一種在時間、空間上影響都頗為深遠的藝術風格,其興起與當時的宗教有著緊密的聯(lián)系。然而它不僅在繪畫方面，巴洛克藝術代表整個藝術領域，包括音樂、建筑、裝飾藝術等，內涵也極為復雜。
基本的特點是打破文藝復興時期的嚴肅、含蓄和均衡，崇尚豪華和氣派，注重強烈情感的表現(xiàn)，氣氛熱烈緊張，具有刺人耳目、動人心魄的藝術效果。所以它代表那個時期最流行風格。同時我們可以看看那個時期所產(chǎn)生的字體，也是一樣浮夸，裝飾性明顯。
我們在把時間撥20世紀德國，一所代表著現(xiàn)代主義設計風格的學校誕生了，包豪斯學院，德國魏瑪市的 “公立包豪斯學校”（Staatliches Bauhaus）的簡稱，后改稱“設計學院”（Hochschule für Gestaltung），習慣上仍沿稱“包豪斯”。在兩德統(tǒng)一后位于魏瑪?shù)脑O計學院更名為魏瑪包豪斯大學（Bauhaus-Universit?t Weimar）。它的成立標志著現(xiàn)代設計教育的誕生，對世界現(xiàn)代設計的發(fā)展產(chǎn)生了深遠的影響，包豪斯也是世界上第一所完全為發(fā)展現(xiàn)代設計教育而建立的學院。包豪斯風格成為了現(xiàn)代主義風格的代名詞。
而包豪斯的設計理念：把簡單的問題把形成標準化，強調一些構成上的東西，所以在這種觀念的影響下，就產(chǎn)生了一些非常好看的無襯線字體。
而在現(xiàn)代化風格的影響下，產(chǎn)生出了工業(yè)衍生品也非常簡約，現(xiàn)代。
做設計是一個入世學，所有的問題都需要結合現(xiàn)有的場景來看，我們上面聊完每個時期藝術熏陶下所產(chǎn)生的字體，那么我們結合實際情況來看下，我們和我們的父母都是在不同文化體系下所產(chǎn)生不同審美觀的人。左邊度圖是我們絕大數(shù)父母喜歡的裝修風格，像洛可可那時候一樣浮夸，而我們卻喜歡簡約的現(xiàn)代風格。
那么字體也是一樣的，有襯線的字體屬于比較古典的氣質，簡約的無襯線字體則是比較現(xiàn)代的工業(yè)風。
也不是所有的襯線字體都是比較古老的，而Didot這款字體因為它造型的特性，也會經(jīng)常出現(xiàn)在雜志封面和一些奢侈品的設計中。從時間的角度來講，最有歷史痕跡的是括弧線襯線又稱古典型襯線，其次是過渡型襯線到粗襯線，最現(xiàn)代的就是極細型襯線。
而中文的襯線體沒有明確的區(qū)分，但是我們可以根據(jù)字體特征按照西文的類目去區(qū)分。
那上面談到，不是所有的襯線體都代表古典或者歷史的厚重感，所以無襯線體也不是根據(jù)出現(xiàn)時間和之前的應用場景也是有區(qū)分的。
西文的無襯線體分為傳統(tǒng)型無襯線，人文主義無襯線，和現(xiàn)代主義無襯線（幾何形無襯線），傳統(tǒng)型無襯線的G開口的地方都是水平的，開口的地方也比較小，看起來比較保守，母A它的筆畫是由粗到細，落差不是特別的大，字體造型也比較穩(wěn)重。人文主義無襯線它慢慢的開始出現(xiàn)一些傾斜的特征，這樣它的開口處可以做的更大一點，它的負空間也會更大一點，字母A為了讓它的負空間也就是字谷變的更大，它的筆畫粗細變的更大了，手寫的感覺會更多一點，現(xiàn)代主義無襯線體字母G它不僅開口要大，而且還有很多圓形切割的特點。幾何的特征會更濃厚一點，我們把這個特征稱為幾何型無襯線字體。
中文的無襯線則分為傳統(tǒng)型無襯線，中間無襯線，現(xiàn)代型無襯線。在漢字的黑體里，分為2類字體，一類是有喇叭口的，一類是沒有喇叭口的，喇叭口的造型特征是在筆畫的轉折或筆畫造型豐富的地方會有一些向里面凹陷或微微凸起的造型特征，沒有喇叭口的字體特征是在任何筆畫造型都收拾的比較干凈利落。像傳統(tǒng)和中間型無襯線都是慢慢像現(xiàn)代型無襯線演化，喇叭口慢慢的演化成工業(yè)的切口風。
字體的選擇我們應該基于合適的主題，合適的用字場景以及使用平臺或者場景，這樣才可以選出合適的字體。
合適的主題：這點適用可以在運營設計或者平面設計中，我們接到的需要適用何種風格，例如國潮肯定會選用毛筆字這種張力比較強的字體，在例如比較有工匠精神的工藝品可以選用有手工感的宋體字。
合適的用字場景，看選用的字是用在標題還是還是正文，標題字可以選用張力比較強的字體，因為標題的文字需要醒目，可以直接傳遞版面需要表達的主題，而正文需要閱讀文本則選擇無個性的黑體比較合適。
適用的平臺，設計展現(xiàn)的平臺也是對字體選用的影響的關鍵因素之一，例如在iOS上選用蘋方字體，安卓上選用思源黑體，PC選用微軟雅黑都可以減輕開發(fā)打包的大小。
我們?yōu)槭裁匆鲋形魑牡哪俏覀冊谥形魑拇钆涞臅r候應該怎么去搭配呢？下面是我總結的三個方向：
1.細節(jié)類似，細節(jié)類似我們可以觀察字體的細節(jié)進行搭配
2.時間相同，就是在某一個時間節(jié)點下同時產(chǎn)生的兩款字體。
3 .氣質相同，這個是在漢字里面才有的，我們常見的字體除了宋體和黑體外，還有是書法字體或手寫體，這類型的字體在通常是不太好搭配字體的。
那要是原字體的西文不太好看，我們怎么去搭配呢？、
外形類似
帶有這種轉角圓滑的裝飾線的宋體字我們一般是搭配古典型的襯線體，這樣搭配起來會更舒服，或者漢字的黑體搭配西文的無襯線體，因為它們特征是一樣的，然后就是中文的圓體也同樣會搭配一個西文的圓體，這些都是細節(jié)類似的搭配方法。
時間相同
是看筆畫相似來匹配的，我們可以看到下面這個中文的筆畫特征是帶有喇叭口，這種類型的黑體很明顯是印刷工業(yè)時代的產(chǎn)物才會有的特征，而右邊的西文是粗襯線字體，也是帶有工業(yè)時期復古的感覺，而且產(chǎn)生的時間也是比較近似的，一個是20世紀左右產(chǎn)生的字體，一個是19世紀產(chǎn)生的字體，這兩款字體搭配在一起可以凸顯工業(yè)感，穩(wěn)重感，復古感都有，這也是時間匹配法。
氣質相同
例如在中國像楷書字體的特征獨特，但是英文的字體沒有類似特征的字體，所以楷書和宋體在中國都可以列為書法體，在氣質上是相同的，所以搭配在一起也是比較常見的。
另外我也總結了一些常用的字體搭配方法，放在下圖了，這些只是給大家平常搭配字體時候的一個參考依據(jù)。
我們在日常的的設計工作中，無論是哪種設計，都會涉及文字組的編排，我們可以觀察到一般的文本分兩種組合，一種是標題文本+說明性文本。
標題文本主要放置版本需要傳遞的重要信息，說明性文本是輔助傳遞標題文本的含義。
對比廣泛的存在于我們的生活中，對比的形式也是多種多樣的，例如身高的高矮對比，體重的胖瘦對比，速度的快慢對比等等。在設計領域內，對比是最常出現(xiàn)的形式。對于信息來說，適當?shù)膶Ρ瓤梢宰屝畔蛹壐忧逦髁?，同一層級的信息更加豐富。對于畫面整體來說，恰當?shù)膶Ρ瓤梢院芎玫闹圃斐鼋裹c(畫面主體)當我們需要突出某一個元素的時候，其他的元素相應的就要做出對比關系，才能保證主體的突出。
字號對比是最快可以提現(xiàn)內容層級關系的一個設計點，一個版面里面不會有太多的文字層級，一般保持在3-5個層級，大部分的軟件都會自己自帶的推薦字號，為什么最小的字號是6號，因為印刷里是可視的極限。
常見的字號比例有1:1.5,1:1.618,1:1.732,1:2等等。這些比例在正常使用能很快可以做出層級關系且不會有特別大的問題。例如1:1.618是黃金比例，也是很多植物生長的規(guī)律，符合人正常的審美感受。
行距比例如果沒設置合適，對閱讀會造成影響，很容易造成眼睛是視覺疲勞，看來不舒服且文本不容易閱讀。
當行距設置到合適的時候， 我們閱讀起來會比較舒服，也會提高閱讀效率。
行距的設定也可以套用固定的算法：字號*倍率＝行距。
我們在日常的設計工作中，當行距調整到比較合適的大小的時候，版面會具備層次感 ，但超過一定限度也不太好。那行距的調整具體有哪些用途呢，1.平衡版面，2.閱讀效率
例如現(xiàn)在整個版面看起來比較輕盈，那么我們可以選擇一個比較大的行距，因為中間的空比較多，所以看起來并沒有那么重。例如我們現(xiàn)在的版面非常重，我們需要平衡他，那我們的行距就可以給近一點，讓文本塊在視覺上更重，這就是平衡的作用。
行距的設定大小會影響我們閱讀的效率，例如行距比例小的，一般用在標題文本，因為標題的文本一般需要我們快速閱讀并了解清楚。
字距大設定也對人的閱讀也會有影響，字據(jù)過大的時候像樹懶說話一樣慢，字據(jù)小的時候感覺說話比較快。
當字距是-800時候的感受，感覺想動漫里的樹懶一樣，說起話來慢吞吞的。
當字距是--100時候的感受，感覺像和人在吵架一樣，說話的語速比較急切。
在一般的平面設計中字據(jù)設定為正負40-70之間去選擇，但是在UI設計中，字距一般為0.
同時字距也會受到中宮的影響，在同字號的情況下，微軟雅黑會比其他字號大一號，中宮越大，字面也會越大，因為筆畫外擴，中宮大的字體，字面大，默認間距小
中宮大的字體，字面大，默認間距小，他的字距可以給大點，中宮小的字體，字面小，默認間距大，他的字距可以給小點，
例如平方字體，正常0間距做內文會比較舒服，但是作為標題，調了之后會讀起來比較連貫。
無論是西文還是漢字，他的形狀都會不一樣，有圓形的，正方形的，三角形的等等，不同的形狀，負空間是不一樣的，不同的字號是需要微調字距的，我們需要軟件視覺來調整。
在AI中有個功能是基于視覺對齊，我們開啟便可以解決這個問題。
分欄的寬度，決定了一行的長度和字數(shù)，當欄寬太長的時候，我們閱讀可以會比較吃力，總感覺一眼看不到頭。
一行多少字合適呢？一般的是20-30字之間，極限是15-30之間比較合適，一行字太少和太長都會讓人很累，，這也是為什么有的書為啥讀不下去的原因。
這也是為什么很多娛樂消遣方便的書一頁的字很多，也是為為了提升閱讀的興趣。
文字設計的成功與否，不僅在于字體自身的書寫，也在于其運用的排列組合是否得當，文字層級之間的關系，適用規(guī)則，欄距＞行距＞字距。
上面的舒服，因為粗細對比比較平衡，下面面的對比過度，什么時候下可以做強對比呢？做了字號對比，就不要做過大的字重對比，
在現(xiàn)在的板式設計中，有一個被忽略的知識點，就是標點符號。標點符號在當今社會不僅僅是用來斷句，也是可以用來傳遞情感，例如下圖，同一句話因為加了不同的標段符號，所傳達的意思就完全不一樣了。
所以標點符號的運用與文字組的編排在板式設計中同樣的重要，例如在聊天的時候，我們隨意的時候的問號在正式排版中，“！”和“？”的疊用不能超過3個。
你一句話表達驚訝和疑問的時候，我們應該將問號放在前面感嘆號放在后面。
例如有書名號的文本段是不在需要用頓號去隔開的，如果當書名號后面有括號則是需要用標點符號去把他們分割開來的。
當然還有就是逗號和不能在一段的前面等等，這些都只是給各位小伙伴一些拓展知識，有興趣的小伙伴如果想自己的板式更加規(guī)范可以自己去查閱相關資料。
梳理信息層級有哪些作用呢？我們在自然界中會發(fā)現(xiàn)很多與階級有關的現(xiàn)場，例如狼群里，一般都會有頭狼，也叫狼王，主要是統(tǒng)領狼群的行動及群體意識，在企業(yè)中，老板作為一個公司的核心人物，一般正常的普通員工去離職，不會影響公司的正常運作，但是如果涉及到公司的老板不知下落或者企業(yè)的核心管理層離職，會對公司的股價和正常的業(yè)務流程造成很大的干擾。
在我們日常設計中編排文字組也是一樣的，我們首先需要確定接到的需求哪些是重要且關鍵的信息，哪些是次要信息。當它的重要層級越高，他在版面中所扮演傳遞信息的角色就越重要，我們接下來便是通過設計手法，例如通過字距，筆畫粗細，顏色，以及字體等等來做出層級的區(qū)分。
那我我們一起來看看實際的案例吧！
梳理信息層級有哪些作用呢？我們在自然界中會發(fā)現(xiàn)很多與階級有關的現(xiàn)場，例如狼群里，一般都會有頭狼，也叫狼王，主要是統(tǒng)領狼群的行動及群體意識，在公司中，老板
1.首先是它會便于傳遞信息的中心思想，有助于用戶快速理解，所以一般大標題文字很對都會做效果，有助于提升視覺的焦點，2.信息層級分明，主次有序的在版面中傳遞信息，3.降低視覺噪音：當版面中的文字信息案例主次有序的排列后，版面看起來比較和諧，所有的元素感覺是本應該就在那里的。
如果信息層級沒有梳理過的版面，則會閱讀起來非常的吃力卻效率低下。
關于文字編排節(jié)奏感，很多人應該好奇了節(jié)奏不是音樂的范疇嗎？怎么文字編排也說有節(jié)奏嗎了？
其實節(jié)奏感隨著地球開始有生命開始便存在了，因為太陽升起到落下是有著自己每天固定的節(jié)奏的，太陽升起人開始勞作，看著周圍的動物和植物都一天天有變化，感受著自己由青澀稚嫩到遲暮之年；這些有規(guī)則的事物形成的固有的節(jié)奏。
在文字編排中也可以感受到這樣的節(jié)奏，例如，字體是直線還是曲線，垂直還是水平，傾斜還是正立，緊湊還是寬松，對稱還是不對稱……這些都體現(xiàn)著文字的節(jié)奏。段與段之間的留白多少，字間距的大小都是有規(guī)律可以尋找的，如果文字組合被有規(guī)律的設計、排版，那在設計稿中本身就具有了一種節(jié)奏感的吸引力。沒有節(jié)奏就不會有生命，也不會有任何創(chuàng)造。
好聽的因為是因為音樂的節(jié)奏會有起有伏，有前奏有副歌有高潮部分，這樣的音樂才不會讓人覺得平淡，我們轉換到文字組編排也是一樣的道理，當我們把一些沒有節(jié)奏感的書籍拿出來看是會覺得很困的。
如果我們加以設計的手法，把文字組合好好的排版一下，這是可以提升我們對內容的閱讀興趣的。例如我們閱讀的雜志和一些資訊類的APP，他們對文字和圖片的排版就會很下心思。
那我們怎么打造自己設計中的節(jié)奏感呢？那接下來我們聊聊怎么通過閱讀視線心理去引導用戶。首先是基礎的視覺邏輯，讓用戶漸入佳境，通過常規(guī)的的閱讀習慣，其實是根據(jù)大小、色彩、線的指向去引導用戶的視線節(jié)奏，其次是視線引導，根據(jù)用戶的常用邏輯打造版面中的節(jié)奏感。
我們平時在看版面的時候的視線觀看邏輯是怎么確定的呢？1.根據(jù)日常的書寫邏輯：我們看圖習慣和我們日常的書寫習慣是密不可分的，一般是從左至右，從上到下，所以我們很少會看到從右往左的排版和從下往上的排版，因為這樣的不符合人的邏輯，
因為每個人都心理感受都不一樣，所以當視覺引導不一樣的時候，傳遞的感受也是不一樣的，文字組合的目的是為了增強其視覺傳達功能，賦予審美情感，誘導人們有興趣地進行閱讀。因此，在組合方式上就需要順應人們的心理感受。人們的一般閱讀順序是:水平方向上，視線一般是從左向右流動；垂直方向上，視線一般從上向下流動；大于45°斜度時，視線從上而下流動；小于45°時，視線從下向上流動。
板式的閱讀順序有兩種：從左到右和從右到左。這是人們平時慣性的限制，就好像寫文章一樣，一旦決定了從左到右寫，就不會更改，板式也是如此，一旦決定了板式的閱讀順序，許多元素都會隨之被限制。
橫排文字
正常我們去閱讀橫排文字就是先從左到右，從上到下的規(guī)律去閱讀。
豎排文字
豎排文字的閱讀順序是從上到下，整體在從右上至左下。我們無論是橫排版還是豎排版，行距都是要大于字距的。
版式設計的核心就是吸引人的視線。當我們在觀看某些東西時，大部分的人都有自己習以為常的觀看習慣。人們往往在一瞬間就會判斷出這是什么？這一現(xiàn)象導致的結果是人們會想起與所看到的東西相近的信息，并判斷畫面中信息的價值，我們將這種心理傾向稱之為視覺心理。視線的引導是建立在視線的移動之上的，在引導視線前，我們需要先建立焦點。
視覺聚焦是在文字組編排中先建立視覺的突破口，然后就再去引導其他的內容。設計師，有一個重要的瓶頸就是，無法在版面中快速的傳達主題的中心思想，明明什么信息都有，就是讓人抓不住重點。如何一秒吸引別人的注意力，快速get要表達的點？那就是需要在版面中埋下引導別人實現(xiàn)的點。
引導方式可以根據(jù)版面現(xiàn)有的內容做大小層次對比，顏色對比，空間對比及元素具有的特有指向性。
人們在日常生活中，通常會先注意到大的東西，在有較大的元素在版面中，我們的視線往往會向大的元素是聚集，從大到小，這樣一步一步的去看，在版面設計運用這樣的小技巧，我們閱讀起來相對來說比較順暢。特別是當兩件物體顏色或材質相同的時候，視線往往會集中在大的物體上。根據(jù)這一原理，應該盡量放大希望吸引讀者注意的東西。
通過有序的色彩的引導視線是版式設計中不可或缺的主要元素，同時也頻繁應用于視覺引導中。色彩的心理效果在視覺引導中的運用就是：人的目光首先會注意眾多色彩中不同的那一個。例如下圖中，當色彩是藍色的時候，是沒有焦點的，當出現(xiàn)別等顏色是特別吸引人的目光的。
然后在加上大小的對比之后，吸引我們眼球的肯定是下面這個大圓形。
如果在下面這個大圓形去改變顏色，這個便會更加大吸引人
其次是亮明度高的顏色比明度低的更吸引人的目光。
暖色調比冷色調會更加吸引人
我們正常的瀏覽順序是從左至右，從上至下，那當我們怎么打破這個順序呢？首先是暖色＞冷色，明度高＞明度低的，元素大的＞元素小的，那下圖我們?yōu)g覽順序應該是先看紅色，在上面開始看，其次是右邊和下方。
引導是一種視覺的語言。一幅好的設計作品，用戶的視線一定是被控制在主體和興趣點上，而不是被其他與主題無關的雜物所吸引，只要用好視線的引導，才可以傳遞我們想傳遞的。
當版面中出現(xiàn)箭頭或者人臉等相關指向性的圖片或者元素出現(xiàn)，是因為古希臘畢達哥拉斯學派和柏拉圖認為眼睛在捕捉物體時，視線、目光和力量會以物體為目標，從眼睛向物體方向傳送，把這一想法用設計原理來表示時。這時候的帶有指向性的圖片或者元素，便是視覺的切入點。
線作為板式中的引導，也是非常常用的，它既可以作為引導視線的切入點，也可以填補畫面中的空白點。
線除了是直線，還可以是曲線，文字組成的線或者負空間形成的線，都是具有引導視線的作用。
我們從小在學校學習了數(shù)字的大小順序，在在考試時，我們會順著考生號找座位，坐車時順著車票找座位。我們生活中還有很多地方會應用到編號。所以我們的目光會隨編號移動，是因為我們一直就有這樣的習慣。如果看到1，就自然會找2，看到A會去尋找B，視線就會這樣一直移動下去。
設計離不開構圖，構圖通俗地講：就是為了表現(xiàn)畫面的主題思想，而對畫面上的人或物及其陪體、環(huán)境作出恰當?shù)?、合理的、舒適的安排，并運用藝術的技巧、技術手段強化或削弱畫面上某些部分，最終達到使主題形象突出，主體和陪體之間的布局多樣統(tǒng)一，畫面疏密有致，以及結構均衡的藝術效果，使主題思想得到充分、完美的表現(xiàn)。
當我們把文字組編排好了，可以通過構成形式將他們串聯(lián)起來，這才是好的排版，能快速想到版面的效果。
居中構圖是最常見的構圖，指的是將畫面的主要元素放置在版面的中軸線上，目的是快速吸引眼球，占據(jù)視覺焦點，突出主體。中心構圖的版式簡潔、利落，給人以雅致的視覺感受。在突出主體的同時又能賦予畫面穩(wěn)定感，并使整體畫面具有一定的沖擊力，需要表現(xiàn)規(guī)整穩(wěn)定、醒目大方的版面時，可以使用居中構圖。其次對稱構圖是居中的一種特例。
對稱的形態(tài)在視覺上有自然、安定、均勻、協(xié)調、整齊、典雅、莊重、完美的樸素美感，符合人眼的視覺習慣。平面構圖中的對稱，可分為點對稱和軸對稱。在平面構圖中應用對稱法則要避免由于過分的絕對對稱而產(chǎn)生單調、呆板的感覺。有時，在整體對稱的格局中加入一些不對稱的因素，反而能增加構圖的生動性和美感，避免了單調和呆板。能夠突出主體，聚焦視線，當制作的圖片沒有太多文字，并且展示主體很明確的情況下，可以使用對稱構圖，在電影海報中也是比較常見的。
斜線式構圖又稱傾斜構圖，是將文字或者主體物以傾斜的方式放置在版面當中。傾斜的角度產(chǎn)生勢能，給人以引導作用。優(yōu)化視覺層級，清晰的傳遞信息。讓比較呆板的畫面具有活力和生機，當制作的版面需要沖擊、不穩(wěn)定效果時，可以使用傾斜式構圖，需要沖擊感和不穩(wěn)定感時可以嘗試，也可以做透視，讓他有近大遠小的空間感。
曲線式構圖指的是版面中重要元素呈曲線排布，其他元素填充剩余空間，曲線具有靈活的屬性。其中“S”形狀從前景向中景和后景延申，畫面構成縱深方向的空間關系的視覺感，所以曲線構圖的版面常常顯得充實、熱鬧、生動、空間感。具有曲線的優(yōu)美而富有活力和韻味，需要有力的表現(xiàn)場景的空間感和深度時，可以選擇S形構圖，例如瑜伽海報。
要表現(xiàn)畫面的空間感和縱深感也可以用S型購物，這也是S型構圖的特性，讓畫面更有空間感。
壓角式構圖適用于標題字數(shù)較少的版式設計，標題作為絕對重要的元素放置四角，一眼就能被看到。要做好壓住四角的版式設計得進行網(wǎng)格構架，控制好版面之間的比例。這種構圖形式使得畫面更加穩(wěn)定，突出中心主體。
散點式構圖是指主體數(shù)量較多，散落在畫面當中的構圖方法。在應用散點式構圖時應防止散亂，宜用隱性結構線或結構形將各個“點暗連起來，相互呼應形成聯(lián)系?！边m用于標題文字稍多的平面版式設計。文字排布時，拉開字的間距，在版式上化作為元素。標題文字的縱向距離要大于橫向距離，否則容易誤導閱讀順序。當文字信息比較多的時候，可以選擇散點構圖。
三分法是一條法則，同時也不是一條規(guī)則。 這個說法很拗口，我們來理解一下。 從本質上講，它就是我們的眼睛自然感知圖像的方式，這些圖像被限制在一個邊界之內（例如畫框）。 這些框架，都有一個固定的長度和寬度; 將這兩個屬性分別分成三個相等的部分，這會包含兩條水平和垂直穿過框架的等距線，形成四個線相交的點，并創(chuàng)建九個相等大小的框架，如下圖的九宮格。
而當版面的主要元素分布在三分線或點上，多數(shù)人會感覺這個畫面會比較和諧舒服，這接近是一種天性和本能了。當然，你還可以舉例說很多不是三分構圖的例子來反駁我，但這不重要，只要你要知道大部分遵循三分法構圖的畫面看著都是比較舒服的事實就行了。
古時候的文人墨客的門檻是“知句逗”，我個人覺得設計要想入行設計的門檻便是最基本的文字組的編排，
我們的感覺，即我們的視覺和我們的美感，優(yōu)于幾何結構，當我們在處理黑白對比的平衡時，我們必須訴諸感，
在文字組的編排中，其中包含的技藝、功能和形式設計是絕對不能分開的。當我們作為設計師，做好每一處設計的細節(jié)，也是對觀看版面用戶最基本的尊重吧！
文章來源：優(yōu)設 作者：Endings
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
文章來源：ui中國 作者：百度MEUX
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
B 端設計也是 UI 設計的一種，它的輸出環(huán)境只存在于電子屏幕中，所以統(tǒng)一使用 RGB 色彩顯示模式即可。
RGB 即光的三原色，因為每個像素點是由 R 紅色、G 綠色、B 藍色三種顏色的不同色彩強度混合而成。所以 RGB 色的表示可以由 3 個顏色各自使用 0-255 中的數(shù)值來呈現(xiàn)，比如：
這是 RGB 色彩最標準的記錄方式，但顯然看起來特別的不直觀，或者說不方便。所以在計算機中，為了方便記錄和調用，使用了一串十六進制的代碼來指代具體的 RGB 色。
理論上，我們只要使用 RGB 模式，隨便你怎么選色，只要記錄 16 進制碼進行復用，你就可以在任何文件、設備中獲得相同的色彩。
但在實際顯示效果上，不同的系統(tǒng)、設備、瀏覽器都有自己的調色板，“解釋” RGB 代碼后給出的色彩就有偏差。比如一樣的中文不同方言、語系、背景的人可能聽出不同的意思，比如牛子，我以為它是類似“晴子”這樣的姓名，至于你們的理解嘛……
相關行業(yè)為了避免這樣的問題，提出了 WEB 安全色的概念，即這些色彩在不同的顯示環(huán)境下，能實現(xiàn)最接近的色彩效果。
那么安全色都有哪些呢？網(wǎng)上有很多地方都有對應的色卡或者工具幫助我們選色。建議使用 Google 的 MD 色卡，這套色彩最全，使用范圍也最廣的顏色。
我們可以通過下面這個鏈接中的網(wǎng)頁工具，幫助我們快速實現(xiàn)選色和復制色彩代碼的操作。
網(wǎng)站鏈接：https://www.materialpalette.com/colors
當然，設計 B 端界面并不是只能使用安全配色，這只是一種建議，可以盡量確保主色，尤其是輔助色使用安全色，而中性色可以自由定義（下面會提）。
第 2 件事，自然就是講講該怎么配色了。和 C 端設計類似，我們主要的目標就是在項目設計過程中定義出 主色、輔助色、中性色 三種色彩類型，并把它們應用到合理的位置中去。
只是，針對 C 端來講，B 端的配色更功能化，更理性，也更簡單。我們要學習 B 端配色首先要排除那些花里胡哨的案例，比如下圖這種。
過度花哨的顏色會干擾我們對界面的實用和對信息的識別、檢索效率，除非是一些政績工程用來當 “花瓶” 的數(shù)據(jù)大屏，否則我們首先要排除顏色過度應用的選項。
那么什么主色、輔助色、中性色，我們先簡單做個說明。
主色，即你這套產(chǎn)品中的品牌色彩，是整套項目最核心，重要性最高的顏色。主色的選擇通常和你的品牌相關聯(lián)，比如騰訊云的藍色，阿里云的橙色，七麥的綠色。
輔助色，則是用來在系統(tǒng)中進行強調、標識、區(qū)分的彩色系統(tǒng)。品牌或者 C 端設計可能會通過輔助色和主色搭配實現(xiàn)個性化的配色方案，但是在 B 端是沒有這種訴求的。輔助色應用的目的性更強，是完全貼合操作效率來制定的。
比如下方是國外流行框架 StarBootstrap Admin 中使用的輔助色，它們都有對應的功能寓意場景。
中性色，則是這套系統(tǒng)中色彩使用的相關灰色，因為灰色是沒有色相、冷暖的區(qū)別，所以我們也稱它們?yōu)橹行陨?。主要應用在文字、背景、分割線等基礎元素中。
B 端的配色，即了解這三個色彩類型以后，能正確制定合理的顏色，并應用進項目中去。下面，我們分別對每個類別進行簡單的講解。
1. 主色的應用規(guī)則
B 端的主色也就是產(chǎn)品的品牌色，多數(shù) B 端項目中，主色不需要 B 端設計師自己選，在項目開始前就會有相關的品牌色、LOGO，直接復制色號即可。
和 C 端配色最大的不同是，品牌色在這里很多時候只是 “吉祥物”，它的存在用來宣示品牌本身的存在，但并不是任何情況下都直接參與界面色彩的填充。
假設品牌色是紫色、熒光黃、暗棕色之類的，那么這類顏色本身的內涵、寓意是難以滿足功能需求的，我們要盡可能減少它們的出現(xiàn)面積、頻次。
在 B 端設計中，主色的應用是最不需要大面積填充的，即使它是常見、耐用的藍色、橙色，主色的填充主要只應用在下面這些類型內容中：
2. 輔助色的應用規(guī)則
有了主色，我們就要為項目添加其它色彩了。
B 端彩色的搭配原則只有一個，那就是 —— 能省就省。我們不是設計一個讓用戶發(fā)出感嘆的色彩豐富絢麗、細節(jié)眾多的視覺平面，而是設計一個用來使用的軟件系統(tǒng)。所以前面舉例的那些花里胡哨的反面案例，就一定要在正式項目中敬而遠之。
用專業(yè)術語來說，配色過程要遵守 “奧卡姆剃刀原則”，如無必要，勿增輔色。
而為了滿足功能性需求，可以為 B 端項目添加的輔助色類型其實也非常的有限，按寓意劃分常見的也就以下幾種：
相信看到這里，你們腦海中已經(jīng)有畫面了。我們會為正確使用綠色、鏈接使用藍色、警示使用紅色等等。這些都是具有普世性的顏色，與用戶的長期經(jīng)驗吻合，沒有識別的成本。
而如果為了個性而個性，對輔助用色另辟蹊徑，相當于在異國自駕時使用藍燈行棕色停的系統(tǒng)，異國風情是有了，說翻車也就翻車了。
所以，針對 B 端輔助色的使用上，如果自己沒有把握和經(jīng)驗，可以套用下方我們整理的 RGB 安全色，填充到頁面對應的元素中去：
用谷歌色卡各選 3 個同類色出來，并進行標記
3. 中性色的應用規(guī)則
B 端的輔助色找起來不難，難的是中性色的使用和搭配上。
任何完整的 B 端的項目，同一個界面中都包含了多個模塊、層級，以及數(shù)之不盡的文本字段。在這么多的內容中，我們要根據(jù)模塊、文字的權重，選擇合理的中性色填充。
新手很容易迷失在中性色的配色過程中，往往一套界面做完以后，使用的灰色或黑色透明度數(shù)量根本無法統(tǒng)計，非常的混亂。
所以，為了避免這樣的情況，我會建議從開始設計之前就定一套中性色，并將它們添加到設計軟件的色彩畫板中，每次填充中性色的時候直接從這個色板中選擇即可。
那么如何制定這套中性色？首先要理解在電子顯示器中，人眼對偏冷的中性色是耐受的（舒適），所以專業(yè)的 B 端項目中，中性色都帶有一定的冷色色相和飽和度，比如下圖是 Element 中性色在拾色器區(qū)域的分布，就并不是全灰的。
所以加入冷色是有必要的，同時，我們用 HSB 色彩模式中的 B 值作為中性色灰度的主要量化標準，全黑時 B 值為 0，白色為 100，每個定義出來的灰度都可以用 B 值作為代號，如 B20、B40 等。
我們根據(jù)這個標準，定義出 5-8 級的中性色，就可以滿足項目中的大多數(shù)場景。
雖然會有一些項目會使用透明度來制定灰度等級，比如黑色的 80%、40% 透明度，但我更建議將透明度使用場景和實際色值定義區(qū)分開來，只有在色彩的不同狀態(tài)（選中/失效等）下再應用透明度。
有關 B 端配色的部分也就先說到這里，B 端配色遠遠比 C 端更簡單，也更枯燥?？梢允褂玫纳史秶。茁芬哺恢?。我們要做的，就是將它們合理進行填充。
B 端設計也是 UI 設計的一種，它的輸出環(huán)境只存在于電子屏幕中，所以統(tǒng)一使用 RGB 色彩顯示模式即可。
RGB 即光的三原色，因為每個像素點是由 R 紅色、G 綠色、B 藍色三種顏色的不同色彩強度混合而成。所以 RGB 色的表示可以由 3 個顏色各自使用 0-255 中的數(shù)值來呈現(xiàn)，比如：
這是 RGB 色彩最標準的記錄方式，但顯然看起來特別的不直觀，或者說不方便。所以在計算機中，為了方便記錄和調用，使用了一串十六進制的代碼來指代具體的 RGB 色。
理論上，我們只要使用 RGB 模式，隨便你怎么選色，只要記錄 16 進制碼進行復用，你就可以在任何文件、設備中獲得相同的色彩。
但在實際顯示效果上，不同的系統(tǒng)、設備、瀏覽器都有自己的調色板，“解釋” RGB 代碼后給出的色彩就有偏差。比如一樣的中文不同方言、語系、背景的人可能聽出不同的意思，比如牛子，我以為它是類似“晴子”這樣的姓名，至于你們的理解嘛……
相關行業(yè)為了避免這樣的問題，提出了 WEB 安全色的概念，即這些色彩在不同的顯示環(huán)境下，能實現(xiàn)最接近的色彩效果。
那么安全色都有哪些呢？網(wǎng)上有很多地方都有對應的色卡或者工具幫助我們選色。建議使用 Google 的 MD 色卡，這套色彩最全，使用范圍也最廣的顏色。
我們可以通過下面這個鏈接中的網(wǎng)頁工具，幫助我們快速實現(xiàn)選色和復制色彩代碼的操作。
網(wǎng)站鏈接：https://www.materialpalette.com/colors
當然，設計 B 端界面并不是只能使用安全配色，這只是一種建議，可以盡量確保主色，尤其是輔助色使用安全色，而中性色可以自由定義（下面會提）。
第 2 件事，自然就是講講該怎么配色了。和 C 端設計類似，我們主要的目標就是在項目設計過程中定義出 主色、輔助色、中性色 三種色彩類型，并把它們應用到合理的位置中去。
只是，針對 C 端來講，B 端的配色更功能化，更理性，也更簡單。我們要學習 B 端配色首先要排除那些花里胡哨的案例，比如下圖這種。
過度花哨的顏色會干擾我們對界面的實用和對信息的識別、檢索效率，除非是一些政績工程用來當 “花瓶” 的數(shù)據(jù)大屏，否則我們首先要排除顏色過度應用的選項。
那么什么主色、輔助色、中性色，我們先簡單做個說明。
主色，即你這套產(chǎn)品中的品牌色彩，是整套項目最核心，重要性最高的顏色。主色的選擇通常和你的品牌相關聯(lián)，比如騰訊云的藍色，阿里云的橙色，七麥的綠色。
輔助色，則是用來在系統(tǒng)中進行強調、標識、區(qū)分的彩色系統(tǒng)。品牌或者 C 端設計可能會通過輔助色和主色搭配實現(xiàn)個性化的配色方案，但是在 B 端是沒有這種訴求的。輔助色應用的目的性更強，是完全貼合操作效率來制定的。
比如下方是國外流行框架 StarBootstrap Admin 中使用的輔助色，它們都有對應的功能寓意場景。
中性色，則是這套系統(tǒng)中色彩使用的相關灰色，因為灰色是沒有色相、冷暖的區(qū)別，所以我們也稱它們?yōu)橹行陨?。主要應用在文字、背景、分割線等基礎元素中。
B 端的配色，即了解這三個色彩類型以后，能正確制定合理的顏色，并應用進項目中去。下面，我們分別對每個類別進行簡單的講解。
1. 主色的應用規(guī)則
B 端的主色也就是產(chǎn)品的品牌色，多數(shù) B 端項目中，主色不需要 B 端設計師自己選，在項目開始前就會有相關的品牌色、LOGO，直接復制色號即可。
和 C 端配色最大的不同是，品牌色在這里很多時候只是 “吉祥物”，它的存在用來宣示品牌本身的存在，但并不是任何情況下都直接參與界面色彩的填充。
假設品牌色是紫色、熒光黃、暗棕色之類的，那么這類顏色本身的內涵、寓意是難以滿足功能需求的，我們要盡可能減少它們的出現(xiàn)面積、頻次。
在 B 端設計中，主色的應用是最不需要大面積填充的，即使它是常見、耐用的藍色、橙色，主色的填充主要只應用在下面這些類型內容中：
2. 輔助色的應用規(guī)則
有了主色，我們就要為項目添加其它色彩了。
B 端彩色的搭配原則只有一個，那就是 —— 能省就省。我們不是設計一個讓用戶發(fā)出感嘆的色彩豐富絢麗、細節(jié)眾多的視覺平面，而是設計一個用來使用的軟件系統(tǒng)。所以前面舉例的那些花里胡哨的反面案例，就一定要在正式項目中敬而遠之。
用專業(yè)術語來說，配色過程要遵守 “奧卡姆剃刀原則”，如無必要，勿增輔色。
而為了滿足功能性需求，可以為 B 端項目添加的輔助色類型其實也非常的有限，按寓意劃分常見的也就以下幾種：
相信看到這里，你們腦海中已經(jīng)有畫面了。我們會為正確使用綠色、鏈接使用藍色、警示使用紅色等等。這些都是具有普世性的顏色，與用戶的長期經(jīng)驗吻合，沒有識別的成本。
而如果為了個性而個性，對輔助用色另辟蹊徑，相當于在異國自駕時使用藍燈行棕色停的系統(tǒng)，異國風情是有了，說翻車也就翻車了。
所以，針對 B 端輔助色的使用上，如果自己沒有把握和經(jīng)驗，可以套用下方我們整理的 RGB 安全色，填充到頁面對應的元素中去：
用谷歌色卡各選 3 個同類色出來，并進行標記
3. 中性色的應用規(guī)則
B 端的輔助色找起來不難，難的是中性色的使用和搭配上。
任何完整的 B 端的項目，同一個界面中都包含了多個模塊、層級，以及數(shù)之不盡的文本字段。在這么多的內容中，我們要根據(jù)模塊、文字的權重，選擇合理的中性色填充。
新手很容易迷失在中性色的配色過程中，往往一套界面做完以后，使用的灰色或黑色透明度數(shù)量根本無法統(tǒng)計，非常的混亂。
所以，為了避免這樣的情況，我會建議從開始設計之前就定一套中性色，并將它們添加到設計軟件的色彩畫板中，每次填充中性色的時候直接從這個色板中選擇即可。
那么如何制定這套中性色？首先要理解在電子顯示器中，人眼對偏冷的中性色是耐受的（舒適），所以專業(yè)的 B 端項目中，中性色都帶有一定的冷色色相和飽和度，比如下圖是 Element 中性色在拾色器區(qū)域的分布，就并不是全灰的。
所以加入冷色是有必要的，同時，我們用 HSB 色彩模式中的 B 值作為中性色灰度的主要量化標準，全黑時 B 值為 0，白色為 100，每個定義出來的灰度都可以用 B 值作為代號，如 B20、B40 等。
我們根據(jù)這個標準，定義出 5-8 級的中性色，就可以滿足項目中的大多數(shù)場景。
雖然會有一些項目會使用透明度來制定灰度等級，比如黑色的 80%、40% 透明度，但我更建議將透明度使用場景和實際色值定義區(qū)分開來，只有在色彩的不同狀態(tài)（選中/失效等）下再應用透明度。
有關 B 端配色的部分也就先說到這里，B 端配色遠遠比 C 端更簡單，也更枯燥?？梢允褂玫纳史秶。茁芬哺恢?。我們要做的，就是將它們合理進行填充。
文章來源：站酷 作者：百度MEUX
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
大家是不是時常困惑于，B 端的表單設計體現(xiàn)不出高級感？設計發(fā)揮的空間特別的少？
那是你沒用對發(fā)力點~
B 端：設計表單頁面時，一方面須尊重用戶的習慣，不要在不必要的地方體現(xiàn)差別。總結了 4 個思考問題：
案例：以創(chuàng)建公眾號消息自動推送為例
另一方面要考慮信息層次。
搞定了基本要素后，我們開始考慮如何表現(xiàn)信息層次。
在了解什么封裝度和信息密度前，我先跟大家討論一下。什么是表單之間的關系。
我所認為表單之間的關系分為 3 種：
優(yōu)點：
平鋪所有需要填寫的信息，適合內容項較少、內容項無法按照相關性分組的表單
缺點：
使用場景：
當需要完成一個簡單快速的任務，輸入少量信息即可完成創(chuàng)建
優(yōu)點：
用于復雜任務時，拆解任務進行編排，適當?shù)娜蝿辗指?，可以降低用戶出錯率
缺點：
使用場景：
適用于大型、復雜任務
優(yōu)點：
減少不必要（非重要）的輸入項，能適當?shù)臏p輕用戶認知負擔
缺點：
使用場景：
特殊場景下使用
那么用一條完整的鏈路來表達就是：
了解完表單的結構關系知曉利弊后，那么應用在我們實際的場景中表達就是如圖所示：
封裝密度高且信息密度低
△ 圖中案例，僅做示例說明
將一個復雜的任務表單，進行封裝后，看起來任務量是不是也變少了？操作起來也不是很復雜了？
小結：
分析了解表單的結構關系，判斷表單，尋找共性的內容，將他們封裝為一個卡片，也可以封裝成一個組。主要的目的就是減少用戶認知負擔，提升操作/使用效率。
關于使用何種布局方式的判斷，應從信息的復雜度和關聯(lián)性兩個維度去梳理。根據(jù)信息的復雜度和相關性模型，選用相應的信息呈現(xiàn)方式，選用合理的布局方案來承載詳情頁的內容。
1. 信息的復雜度和相關性模型
△ 來源：Ant Design；來源鏈接： https://ant.design/docs/spec/research-form-cn
2. 區(qū)隔方式
根據(jù)各個信息之間的相關性，判斷各個信息模塊之間的親密度，通常情況下，相關性強的內容盡量靠近，相關性弱的的內容盡量拉開層次。
△ 來源：Ant Design；來源鏈接： https://ant.design/docs/spec/detail-page-cn
3. 注意事項
文章來源：優(yōu)設網(wǎng) 作者：交互思維
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
在 C 端設計中，不管是給車載客戶端、手機客戶端、電腦客戶端設計界面，都有比較具體的規(guī)范需要我們學習和遵守。
而唯獨 B 端設計，或者說網(wǎng)頁設計，我們在網(wǎng)上是找不到具體詳細的規(guī)范資料的。因為無論是螞蟻的 AntDesign 還是 Element、Clarity 等 B 端設計系統(tǒng)，其規(guī)范都只是針對自己這套產(chǎn)品的設計說明。
當我們不使用這些框架，要完成自定義設計，那么新人就完全不知道該怎么下手。所以，今天這篇內容，就是針對 B 端設計所需具備了解的基本規(guī)范進行說明。
幫助大家快速了解和掌握 B 端設計所需的規(guī)范知識。
B 端設計是 UI 類設計中的一個大類，它包含了非常多種面向企業(yè)、商業(yè)的客戶端類型，包括電腦、手機、平板、大屏等等，針對不同客戶端和系統(tǒng)，基礎規(guī)范都有一定的差異。本文主要集中在 WEB 端的管理界面設計。
WEB 管理界面雖然看起來和一般的網(wǎng)頁差別很大，但說到底，它也是網(wǎng)頁的一種，它遵循網(wǎng)頁設計的基本原則。我們對規(guī)范的解釋以網(wǎng)頁基礎規(guī)范為框架展開，并會加入一部分 B 端特有的設計元素規(guī)范說明。
主要包含的規(guī)范內容包含下面這些模塊：
規(guī)范的解釋，會涉及到不少網(wǎng)頁前端制作的知識點，建議立志在 B 端進行深耕的設計師，都要掌握 HTML + CSS 這些前端知識。
我們過去做過這個系列的詳解，可以通過下方的鏈接查看：
還要聲明一點，規(guī)范中總結的內容，包含 “規(guī)則” 和 “建議” 兩種類型，規(guī)則指的是瀏覽器、代碼等限制產(chǎn)生的硬性規(guī)范，而建議則是我根據(jù)自己經(jīng)驗整理出來便于大家理解的內容。
在自己的項目中，如果出現(xiàn) “建議” 無法適應的情況，那么完全可以根據(jù)實際場景來做決策，不需要拘泥于我給出的數(shù)值和限制。
下面，就開始進入正題吧！
首先，我們來解析一下 B 端布局的規(guī)范，即界面排版應該遵守的基本原則。
在前端 HTML CSS 的知識中，需要定義不同 DIV（或其它標簽）的長寬數(shù)值，并將這些大小不一的矩形進行排列、移動、嵌套，來實現(xiàn)界面的視覺樣式。
換句話說，所有置入畫面中的元素都包含一個矩形的外邊框，無論是文字、圖標、圖片、按鈕、標簽還是符號。
所以，在界面的布局中，無論我們使用什么樣的內容、字段，對于前端的頁面來講都只是無數(shù)矩形的排列過程。我稱這種布局的設計思路為 “矩陣布局法”。
矩陣布局法是設計方式和前端開發(fā)方式的統(tǒng)一，提升開發(fā)階段實現(xiàn)設計稿的效率和準確性，是每一個專業(yè) B 端設計師都需要具備的素養(yǎng)。
在此基礎上，我們還有幾個統(tǒng)一的原則需要遵守：
1. 數(shù)值使用標準
在 UI 領域中，元素尺寸的定義不像平面設計大多以比例或“感覺”來制定，更多是使用手動輸入數(shù)值的方法來完成。
主流的系統(tǒng)、規(guī)范都會建議我們通過網(wǎng)格化參考工具來輔助我們進行布局設計，比如 Android MD 系統(tǒng)使用的 8*8 網(wǎng)格系統(tǒng)（常用電腦分辨率可以完美支持）。
也就是說，在這個系統(tǒng)中，元素的外邊框、間距，都是以 8 的倍數(shù)來設置的。這樣無論我們在設計還是在開發(fā)過程中，對于使用的數(shù)值都會有相應的默契。
但是，以 8 的倍數(shù)為基準的設計，跨越的幅度有點太大了，比如一個圖標，當你覺得 16px 小的時候，那下一檔 24px 頁可能太大了。所以，我的建議是對于相對比較復雜的項目來說，使用小一級的 4*4 網(wǎng)格來設計，會更兼顧靈活度和數(shù)值的統(tǒng)一性。
即設置元素的尺寸、間距的時候，我們都用 4 的倍數(shù)來完成，當你覺得元素的長或寬不合適，就對它進行 4px 的增減，比如下面的案例：
要警惕的是，4px 的基準，是針對元素視圖邊框的值，文字字號、圖標柵格等次級內容，并不會受到該原則的影響。且該原則只是一個設計基準的 “建議”，而不是限制，在特殊場景中可以選擇打破它。
2. 固定和響應尺寸
使用 4 的倍數(shù)完成設計，并不能解決 B 端設計中的所有尺寸問題。因為在 B 端的實際應用中，我們會加入響應式的邏輯，即頁面元素尺寸隨瀏覽器窗口的變動而變動。
所以，在設計 B 端界面元素的時候，我們要考慮兩種場景，固定尺寸和響應尺寸。
固定尺寸即不管環(huán)境發(fā)生什么變化，它的大小是定死的。比如圖標、標題、LOGO 等元素。而響應尺寸，則是一個 “未知數(shù)”，是需要一定的計算規(guī)則 “求得” 的。
比如還是搜索欄的案例，搜索框響應尺寸，而搜索按鈕是固定尺寸，那么在不同的寬度下面，它們顯示的效果如下：
要理解響應式尺寸對應規(guī)則，除了了解 CSS 中 Width:auto 屬性值的使用外，最簡單的就是搞清楚 UI 設計軟件中的響應式布局功能。
元素是響應還是固定尺寸是我們在設計過程中就做后決定的，而不是等設計做完以后再看圖說話。所以了解固定和響應尺寸的內容，在我們定義組件的過程中就要通過軟件的響應式功能進行設置，并需要在后期的標注和文檔中進行說明。
3. 常用的界面布局
最后，就是 B 端界面設計使用的主流布局形式了。雖然網(wǎng)頁因為畫布比手機大得多，設計的靈活性更高，但在 B 端中可以應用的布局形式也不多，只有固定的幾種。因為 B 端頁面布局中有幾個常用需要預留的坑位：導航、標題欄、工具欄、內容區(qū)域。
主要使用左右或上下布局兩個方向：
左右布局的形式，通常是左側作為導航區(qū)域，頂部作為工具欄使用。這種做法通常是因為系統(tǒng)內模塊較多，需要的導航數(shù)也多，用戶需要經(jīng)常切換到不同模塊中去，所以左右分欄的布局可以很好的提升操作效率。
而上下布局中，則是面向一些處理場景、功能比較簡單的平臺，導航模塊少，且切換的頻率不高，主要的操作都集中在內容區(qū)域的設置上，沒有邊欄的影響還能提高操作的專注性和效率。
要使用哪種類型的布局，需要根據(jù)當前的項目功能做決定。但即使選擇了其中一類，也并不代表我們的工作就結束了，還需要在這個布局的框架下做進一步的規(guī)劃。
比如，我們需要制定內容區(qū)域多欄設計的比例劃分、復雜表單填寫系統(tǒng)中的內容引導欄、列表條目展開的側邊欄形式等等……
每套項目都需要先確定頁面的布局框架，然后再開始針對具體頁面、業(yè)務內容進行設計，保證整套系統(tǒng)操作方式的一致性。
文章來源：優(yōu)設網(wǎng) 作者：超人的電話亭
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
隨著項目的不斷發(fā)展，設計團隊在不斷壯大，設計師之間的協(xié)作也越來越多，相應的溝通和協(xié)作成本在不斷增加。如何才能更高效的合作，并把設計質量和一致性做的更好，是我們需要去解決的問題。
本文將以 QQ 動漫設計系統(tǒng)為例，分享一些過程中的思考和經(jīng)驗，拋磚引玉，希望對大家有所幫助。
在項目初期，團隊設計師的協(xié)作方式是通過一個本地的 sketch 規(guī)范文件，以復制粘貼的方式來復用一些元素和控件。在設計師協(xié)作人數(shù)不多，UI 控件改動頻繁的情況下，這套流程可以比較快速的完成需求。
但隨著項目逐漸成熟，協(xié)作設計師人數(shù)變多、UI 控件逐漸趨于穩(wěn)定且需要復用的地方逐漸變多時，之前流程的不足就逐漸凸顯出來。
1. 更新通知缺乏自動化
文件更新難以做到及時有效的通知到所有設計師，且需要人工在群里發(fā)通知，告知大家更新了文件。有些設計師暫時可能沒有相應的設計需求，可能會忽略更新后的文件，造成設計的不同步?；蛘叩鹊叫枰臅r候才去群里找更新的規(guī)范文件，版本容易搞錯且費時費力。
2. 全局組件更新困難
由于組件樣式是通過復制或修改的方式應用到界面設計中，當規(guī)范文件更新時，無法智能的自動更新修改相應的組件，需要設計師人工核對哪些地方有修改。這樣很難保證大家的設計版本都能得到統(tǒng)一的更新，當大家使用的組件版本不一致時，輸出的界面就會出現(xiàn)雜亂無章的情況。
3. 代碼復用率低
開發(fā)沒法全局調用代碼樣式，有些樣式可能需要反復復制使用，耗時費力，并因此產(chǎn)生的代碼臃腫，還會直接影響產(chǎn)品性能。
鑒于設計師目前多使用 sketch+xshow 的工作流程，而 xshow 正好也具備云端管理的能力，故決定以 xshow 作為橋梁，建立一個基于 sketch+xshow 的云端設計組件庫，以非常低的遷移和學習成本完成流程優(yōu)化。
優(yōu)化后的流程是把 sketch 本地組件庫通過 xshow 上傳至云端服務器，設計師通過 xshow 云端功能添加到 sketch 中，并在設計文件中嵌入這些云端組件。
這樣做能很好的解決上面說的問題：
1. 更新通知自動化
更新文件不用再靠人工在群里發(fā)通知，設計師也不需要去找文件，而是在 sketch 中會自動進行提醒。一旦有更新，會在右上角顯示提醒消息，設計師只需要點擊提醒，下載最新組件文件即可完成更新。
2. 全局組件一鍵更新
當更新組件庫文件后，界面中所有之前使用過云端組件的控件元素都會自動比對更新前后的差異，方便設計師判斷是否更新。這種更新最厲害的地方在于，更新是全局的，也就是一旦你確認了更新后的內容，所有界面都會自動按規(guī)范進行更新而無需設計師再逐個篩查。這樣做既能保證設計稿的一致性，也能大幅提高設計效率。
3. 開發(fā)效率和質量大幅提升
開發(fā)通過代碼把一些常用的樣式進行封裝，在一些高度復用的場景中直接調用。一方面可以通過調用的形式減少重復樣式代碼的復制，精簡代碼，降低軟件包體積，另一方面也可以減少不必要的工作量還能方便后期維護。
想要高效解決問題，正確的方法很關鍵，這里我們用到的方法就是原子設計理論。2013 年前端工程師 Brad Forst 將此理論思想運用在界面設計中，形成一套設計系統(tǒng)，包含 5 個層次：原子、分子、組織、模板、頁面，這套理論為組件庫的搭建提供了思路和方法。
在實際搭建過程中，因為組件庫的搭建工作量往往比較大，需要先明確流程和分工，主要包括以下幾個關鍵步驟：
1. 明確工具流程
因為是搭建云端組件庫，所以首先需要有一個云端工具進行管理。針對以 sketch 為基礎的云端組件庫來說，常用的工具流程包括 sketch cloud，各類云同步盤，第三方云數(shù)據(jù)庫自主部署等等。我們選擇的 sketch+xshow 工作流也是基于 xshow 具備云端管理功能，與其他流程本質上是一樣的，大家根據(jù)項目實際情況合理選擇就好。
2. 全面匯總并分類
按原子理論由小到大來對常規(guī)控件進行匯總并分類。對于 QQ 動漫項目來說，常見的控件類別包括：顏色、字體、圖標、按鈕、導航、狀態(tài)欄、彈窗、列表、標簽等等。每個項目所需要整理的組件不盡相同，原則就是對要復用的元素進行整理。
3. 制作樣式模板
為了便于維護和提升合作效率，將組件庫拆分為幾個不同的獨立文件，每一個文件由組件庫搭建小組成員獨立負責，減少混亂。
如果是有多位設計師參與時，因為組件庫的元素存在相互調用的情況，會遇到到底誰先做的問題。解決流程分 2 步：
QQ 動漫組件庫一共分了 5 個不同文件，分別是：基礎、操作、導航、反饋和內容。
4. 搭建本地組件庫
1?? 確定命名邏輯
提升設計效率，是組件庫存在的重要目標之一，而合理的組件命名起到了至關重要的作用。組件的名稱要保證通用性，太獨立的命名可能不夠兼容其他場景，也會讓使用的同學產(chǎn)生誤解。
對于組件命名，要多與使用的設計師一起探討，因為每個人的習慣都不同，方不方便因人而異，所以需要做一些平衡。
比如在做圖標命名邏輯的時候，糾結于要先按尺寸分（圖標/序號類別/尺寸/圖標名），還是按功能分（圖標 / 序號類別/尺寸/圖標名/狀態(tài)），不斷調整多次，這時候就需要找大家一起探討，怎么才是最方便的。
命名的方法是盡可能按共用屬性由多到少的順序來整理。比如，圖標共用的尺寸屬性多，就把尺寸歸到上層；如果圖標功能分類比較集中，那就把功能名稱歸到上層。根據(jù)實際項目和設計師使用情況的不同，會有不同的命名形式，命名確保效率就好。
在梳理組件庫結構命名時，先用思維導圖描繪一份結構化地圖，方便前期討論及調整。明確層級關系后，用在多人合作時進行參照，從而統(tǒng)一組件庫層級。在做這份結構化地圖時，需要列好全部分類、層級、具體名稱及示例。
2?? 顏色
顏色庫的設計，需要將產(chǎn)品中可復用的顏色匯總并分組，比如品牌顏色，按鈕顏色，圖標顏色，裝飾顏色等等，這樣可以使得用到顏色屬性的組件更加靈活。顏色的命名規(guī)范是：序號_功能/淺色 or 深色/序號 _ 屬性 / 序號 _ 狀態(tài)。例如，04 _ 按鈕色/淺色/01 _ 常規(guī)按鈕/04 _不可點
3?? 字體
字體樣式需要做全字重、顏色和左中右三種對齊方式，因為按目前 sketch 的組件邏輯，還不能修改嵌套字體的屬性。這些屬性可以對應到組件的命名上，字體組件的命名規(guī)范是：大小/序號對齊方式/屬性/用途，例如 42px/1 居左/常規(guī)/主文本。
邊做邊檢查。由于文字組件需要的命名特別多，很容易出錯，所以建議是最好每做一組，就檢查一遍。檢查的時候打開組件樣式，如果在組件預覽中發(fā)現(xiàn)重復或者結構不對的地方，及時調整。
多行文本行高要注意。文字的行高要尤其注意，一定要在前期檢查好尤其是多行文本的行高。如果行高前期設置不對的話，非常影響后面文本的擴展性，在用到多行文本時會遇到麻煩。想回頭修改的話，因為是最底層的原子需要逐個調整，所以代價是巨大的。
所以一定要開始設置字體組件之前就確定好行高，比如 QQ 動漫組件庫中的文字行高統(tǒng)一用文字大小的 1.5 倍，并取偶數(shù)作為文本的行高。當然，這里的行高也不是完全規(guī)定死，有時候也需要視情況而定。
文本的粗細。文字的粗細也是要在一開始的時候就要設置周全，最好是給所有字號的文字都設置好不同粗細的組件，盡管可能開始用不到，但會提升文字的擴展性，不然后面添加就會比較麻煩。
4?? 圖標
圖標組件最關鍵的地方在于使用邏輯和圖標規(guī)范。比如，我現(xiàn)在做的圖標邏輯是：圖標/類別/使用場景/具體名稱/尺寸/不同狀態(tài)，主要是按使用的頻次來整理的。也可以有其他邏輯方式，以方便使用為準。
圖標規(guī)范也會影響組件庫的整理和日常使用，在做圖標組件時，需要定義好圖標的最大范圍和最小范圍，嵌套起來使用才不會出錯。圖標的規(guī)范要嚴謹，同一個尺寸下的圖標視覺面積要保持一致。不然在大小這個層級就會出現(xiàn)，雖然是相同尺寸的圖標切圖范圍，但圖標的體量看起來卻并不一致。
將純色或漸變圖標中的顏色剝離，并使用顏色組件進行嵌套，這樣做既方便替換又能減少圖標組件庫的復雜度。
對于圖標的多種狀態(tài)，建議做在同一個層級中方便選擇。
對于圖標來說，直接對畫板設置切片即可，不需要再加切片框。如果你的組件庫之前用了很多切片來導出圖標，可以用 Automate 插件直接清理或設置全局的切片，非常方便。
5?? 控件
有了顏色、字體、圖標這些基礎元素后再來制作組件就會相對簡單很多，只需要通過拼裝把通用性強的組件做出來即可。這里可能需要注意設置好布局方式，讓內容盒子隨著內容的變化而變化。新版 sketch 的布局設置相對于老版本的確實會方便很多，理解起來很容易，所以這就不多討論了。
6?? 代碼組件化
在開發(fā)側進行前端 UI 組件庫的封裝，實現(xiàn)從設計到開發(fā)的樣式統(tǒng)一，提升效率和質量。
在優(yōu)先級上，代碼組件化跟 UI 組件化可以同步進行，開發(fā)先寫好框架，然后隨著 UI 組件化的逐步確定，代碼也進行相應補充。
5. 構建云端組件庫
本地組件庫構建完成后，即可通過 xshow 上傳至云端，再由 xshow 直接添加到本地 sketch 中，完成整個使用流程的搭建。
6. 權限與維護
為了更好的維護云端組件庫，避免更新混亂，需要成立組件庫小組，只允許組件庫小組成員有編輯權限。日常需求中，如有新增組件，需提交給組件庫小組成員審核，通過后方可上傳至云端組件庫。
在制作組件文件的過程中，需遵循先自測后上傳的原則，避免在上傳后發(fā)現(xiàn)一些諸如命名錯誤、遺漏、嵌套混亂等問題，造成麻煩。
7. 編寫規(guī)范文檔
文檔的作用是給相關同事查閱，形成標準化使用流程。一些在組件庫中難體現(xiàn)的設計說明、未形成組件元素的使用規(guī)則或一些常見問題都可以寫在文檔里。
8. 問題與技巧
1??善用插件，提高效率
我其實是一個非常喜歡“偷懶”的人，但凡需要重復，批量的工作，我都覺得應該有更聰明的辦法。這里我推薦幾個我在做組件庫中經(jīng)常用到的小插件。
2??不斷測試
組件庫的設計過程中，一定要邊做邊測試，尤其是在前期確立邏輯的時候，要不斷檢測是否真的好用。
3??內容更新權限與維護需要專人專辦
舉例：假設我負責字體，那么后續(xù)所有的字體更新相關都只找我來修改。若其他人在組件庫內找不到相應的組件搭建頁面而又特別高頻使用，需要向組件庫小組提出申請，并由對應組件庫管理員進行更新，不可以私自修改組件庫內容并上傳。
組件化思維不僅僅應用在 UI 領域，甚至在各行各業(yè)都需要建立組件化，比如對于一些時效性非常強的新聞產(chǎn)品，就需要針對突發(fā)事件內容模板化，以期能第一時間發(fā)布；如果想追熱點，組件化能夠使得產(chǎn)品具備隨時跟進熱點的能力，提升市場競爭力等等。
組件化是一種思維模式，也是如今設計師必不可少的能力。通過組件庫提升效率能夠讓設計和開發(fā)有更多的時間去打磨產(chǎn)品細節(jié)，從而打造出對用戶更加友好的產(chǎn)品，賦能設計的價值。
文章來源：優(yōu)設網(wǎng) 作者：騰訊ISUX
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
調查問卷，是一個低成本快速收集資料的定量分析工具。這是個看起來簡單，產(chǎn)出的問卷也看似很簡單，但是在整體設計的過程卻是需要很多的思考和預備。
關于調查問卷，會分成三個部分來解說，
廢話不說，直接開干！
1. 為什么做問卷
這個是問卷的目的，也直接影響后面問題的設計。
2. 如何使用問卷的研究結果
這是關于問卷解決方案的落地。不需要太過細致的落地計劃，但是至少要清楚，這份問卷的研究成果，可以獲得多少支持力度。不管問卷發(fā)現(xiàn)了多么偉大的問題，如果沒有落地，其實是沒有無意義。也切忌不要今年做的研究結果，明年來實施，那問卷的時效性和準確性就會大打折扣了，因為市場的瞬息萬變。
這是做所有事前，都要問的問題，「為什么做 Why」。而這個問題為什么重要呢，因為這會關系到設計問卷的核心內容是什么，會影響問卷的構成，當然最后也會產(chǎn)出不同的結果。
問卷的目的主要可以分為六個方面
1. 收集用戶信息
很多時候，我們或許知道理想目標用戶是誰，但是誰才是真正使用我們產(chǎn)品的用戶呢？了解真正使用的用戶，可以對用戶進行更針對性的分析和設計。
2. 了解用戶使用習慣
了解用戶在產(chǎn)品上是如何使用產(chǎn)品的，以及用戶的使用路徑是否按著我們期待的方式進行，這是很有必要，這也是一個驗證的過程。
2. 滿意度
了解用戶對產(chǎn)品的滿意程度，對于用戶不滿意的方面，可以進行歸納總結，并給出合理的解決方案
3. 建議反饋、吐槽、好評
從問卷中收集用戶的心聲，明白槽點是什么。同時也收集用戶的好評，這也是激勵團隊一個很好的方法，因為是直接來自用戶。
4. 體驗優(yōu)化
對一個成功的產(chǎn)品來說，它要好用，它也要好看。產(chǎn)品有大改版前，可以用問卷來評估整體產(chǎn)品的體驗如何，以便在重新設計的方向上能更好聚焦。
5. 需求驗證
很多時候，需求可能沒那么明確，用戶和產(chǎn)品間始終存在著 gap， 所以我們有時對方案琢磨不定時，可能會試運行，后續(xù)看用戶反饋。通過合理設計問卷，我們也可以稍微窺探到用戶的想法
但是對需求的驗證，單通過問卷還是比較難的，只能窺探到比較淺的一層，最好后續(xù)可以對用戶進行訪談來做后續(xù)跟蹤，以便了解事情的全面。
這里要注意的是，問卷不適合探索用戶的新的需求，或者要驗證很精準的信息等比較復雜性的問題。
如果你問用戶，近期會推出新功能，問他會不會用。大致上，你得到的回答都是肯定。很多時候，同意比拒絕更簡單。
根據(jù)提問的方式，可以分為 「是什么」「怎么樣」「怎么辦」
1. 是什么
主要是用戶信息、使用習慣等問題。
例如，年齡層、職業(yè)、使用產(chǎn)品目的、知道產(chǎn)品的渠道、使用頻率、使用競品軟件、整體滿意度等
2. 怎么樣
主要是詢問用戶原因，比如打這個分數(shù)的原因，某功能使用如何等
3. 怎么辦
主要是詢問用戶的建議、期待產(chǎn)品改進的地方
問卷中并不是所有問題都適合問，有一些比較敏感的問題需要去避免，以免激起用戶的負面情緒
1. 敏感性問題
個人信息類的問題比較容易會有敏感信息存在，就像你問用戶工資區(qū)間，和在問卷最后告知用戶參與問卷都有獎品，需要填寫收貨地址。很明顯收貨地址的準確性會比工資更高。
2. 措辭嚴謹
3. 問卷的順序
先簡單后復雜，并注意整體邏輯性的表達。循序漸進，如果一開頭就是很難的問題，用戶很容易放棄答題
4. 問題長度
盡量保持所有問題在一個差不多的長度呢，保持一樣的節(jié)奏。避免時長時短
5. 避免專業(yè)詞匯
很多時候，我們會用一些所謂的“行話”來表達，但是在問卷當中，無法保證用戶同樣是理解的，而且也會讓用戶產(chǎn)生距離感，非必要情況下，不要使用專業(yè)詞匯
6. 選擇題枚舉要窮盡
題目數(shù)最好不多于 7 個，太多也會造成用戶選擇困難，最后記得加個其他并提供文本框輸入
7. 避免互斥、重復、相似
問題避免前后矛盾，造成用戶困擾，也不要重復或相似度極高的問題，除非這個問題是陷阱題，為了檢驗用戶是否認真答題。但是在數(shù)量有限的問題中，一般比較少使用陷阱題
8. 保持開放性
為所有選擇的選項，加入「其他——」「以上都不是」「不知道」，用戶可能會覺得問題或答案不匹配，而不知道選什么，這時需要給用戶一個出口，避免產(chǎn)生無效數(shù)據(jù)
9. 避免詢問引導性的問題
大部分用戶認為 XX 功能，很好用，你覺得呢？
如果看到這樣問題，大概可以從中讀出兩個信息，1. 大家都覺得好用 2. 平臺希望我說好用。
這個問題所傳達出來的隱藏含義會引導用戶做出不真實的反饋，這是沒有意義的問題
10. 避免讓用戶選擇「 是/否」「真/假」「好/壞」
強制選擇非黑即白，大部分情況下沒什么意思，因為用戶可能不確定。這個問題本身也沒有太大價值，也會錯過用戶一些比較有趣的回答。
所以如果這個問題的目的，是一定要知道的，可以更改提問的方式。
對于用戶的問題，答案要可以量化表達，來產(chǎn)生數(shù)據(jù)，才便于后續(xù)數(shù)據(jù)的分析
11. 避免問用戶將來的事，或回憶許久前的事
當人們將自己的行為投射到未來時，通常會過于簡單化和理想化，人們更擅于解釋當下進行的內容。
所以，如果要知道特定環(huán)境下用戶的操作，則要配合合適的場景預設，并且是用戶熟悉的場景。或者可以直接問，今天你會如何如何
所以可以通過詢問今天的行為來，確定將來會不會使用。當然這不是絕對的，畢竟未來存在太多變數(shù)。
對于許久前的用戶的操作行為，也盡量不詢問，因為會忘記，而當強迫他去思考時，他可能自己腦補，產(chǎn)生不準確的記憶，進而對研究結果產(chǎn)生偏差。
12. 其他
問卷中存在多選題，必選題，選填題，記得預覽問卷時，注意問題平臺有無自動添加文字說明。
不要用 checkbox, radio 來區(qū)別多選和單選，這是不能準確的傳達，也有可能用戶沒有注意到，或者就不清楚，而使用文字的表述會更清晰，不會產(chǎn)生歧義。
必選題，選填題，如果問卷平臺，也只是用*號來表達必選時，建議在文字上也加上這樣的說明
整體問卷的過程需要時間，所以也需要的具體的日程安排，以便整體問卷的進行是井然有序。
日程安排中，要包括：
調查問卷從準備到產(chǎn)出報告，需要一個過程，建議與其他設計師或 PD 來一起配搭工作，更高效的完成，一個人去做，總是會有一些盲點，并且會比較大的壓力。
如果你在問卷方面是新手，也建議找個有經(jīng)驗的設計師或 PD 來做你顧問，減少一些不必要的坑。
文章來源：優(yōu)設網(wǎng) 作者：箴鹽設計
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
5分鐘帶你了解服務設計的原則、案例及常用方法！
我們常說，現(xiàn)在是體驗至上的時代，用戶對產(chǎn)品的使用不再是單純的需求滿足，更要獲得滿意的體驗。服務設計的發(fā)展為我們改善用戶的體驗提供了新的思路，從本質出發(fā)，任何產(chǎn)品都是在提供某種服務，服務的質量從根本上決定了用戶的體驗。
什么是服務設計
服務設計一直在我們的生活中，我們無時無刻不在體驗著各式各樣的服務。荷蘭一家專業(yè)的服務設計機構31 Volts是這樣描述服務設計的：“如果有兩家緊挨著的咖啡店，出售同樣價格的咖啡時，服務設計是讓你走進其中一家而不是另一家的原因?！边@個描述很生動，同時也說明了服務設計的作用。
其實服務設計的定義還有很多，行業(yè)內不同的專家和學者都有自己的理解和解讀，不管定義如何，重要的是服務設計的思維方式，可以幫助我們從全局改善服務體驗。
服務設計的原則及案例說明
2010年在《This is Service Design Thinking》一書中，作者首次提出了5個服務設計基本原則，這些原則之后也被廣泛使用，但隨著服務設計的不斷發(fā)展，其中的一些原則也需要重新去審視和思考，因此在2017年作者將其更新修訂為6項。
a.以人為中心(Human-centered)
以人為中心的設計理念在產(chǎn)品設計、交互設計等領域已經(jīng)得到了廣泛的應用，服務設計當然也沒有例外，以人為中心就是要站在用戶的角度上看待和思考問題，考慮所有被服務影響的人。
在日本，農(nóng)產(chǎn)品市場存在這樣一個問題，農(nóng)產(chǎn)品批發(fā)商無法及時從種植者處了解農(nóng)產(chǎn)品的相關狀況、收獲量等信息，因此他們也就無法與要購買農(nóng)產(chǎn)品的人進行談判，這樣造成的結果可能是糧食的浪費。日本的一家軟件公司NJC（Nippon Jimuki Co. Ltd.）發(fā)現(xiàn)了這一問題，他們希望利用自身能力（軟件方面的優(yōu)勢）去解決這一問題，因此將目標設定為：創(chuàng)建一個可以提供有用數(shù)據(jù)而又不給農(nóng)民或農(nóng)產(chǎn)品批發(fā)商帶來負擔的系統(tǒng)。
最終的產(chǎn)出的結果是Fudoloop這個應用程序，通過Fudoloop，批發(fā)商可以提前一天從農(nóng)民那里收到信息，進而協(xié)調買家的各種要求。Fudoloop的使用者分為兩種，一種是需要更新農(nóng)產(chǎn)品信息的農(nóng)民，一種是從Fudoloop上獲取農(nóng)產(chǎn)品信息的批發(fā)商，F(xiàn)udoloop分別為兩種用戶進行了設計。
圖片來源：Fudoloop
在設計Fudoloop時存在這樣一個問題，農(nóng)產(chǎn)品市場中的相關從業(yè)人員普遍年齡較大、受教育程度低、軟件使用經(jīng)驗很少，面對這樣的用戶，顯然通常的軟件設計并不符合他們的需求，因此Fudoloop的界面設計非常簡單且信息突出，從事農(nóng)產(chǎn)品相關工作的人員可以輕松的使用Fudoloop完成農(nóng)產(chǎn)品信息的更新，而不會因為學習產(chǎn)生很大的壓力。Fudoloop還在大型農(nóng)業(yè)貿(mào)易展覽會邀請了一些行業(yè)內的人員和用戶參與到了產(chǎn)品的體驗中，并收集了他們反饋的建議，以改善產(chǎn)品。
圖片來源：IDEO
NJC在設計Fudoloop時充分堅持了以人為中心的原則，考慮到服務涉及的不同用戶，并根據(jù)用戶本身的特點和需求進行設計。NJC的CMO佐藤賢一是這樣評價Fudoloop的：“當簡單、以人為本的思想?yún)R聚在一起時，創(chuàng)新就會發(fā)生”。
b.協(xié)作(Collaborative)
這條原則說的是，不同背景和職能的利益相關者應該參與到服務設計流程中，收集多方訴求，發(fā)現(xiàn)不同看待問題的角度，才會更好的解決問題。
在美國舊金山，有一所學校和Revolution Foods這家餐飲公司合作，為學校內的人員提供豐富的、營養(yǎng)的午餐，但是實際來餐廳就餐的人數(shù)與預期相差很大，數(shù)據(jù)顯示，有72%可以承擔起午餐費用的人并沒有來到食堂吃午餐。經(jīng)過調查發(fā)現(xiàn)其中的原因，很多學生等校內人員并不愿意排長隊或者匆忙的吃完午餐，因此他們選擇了去校外享受午餐的時間。
為了改善這種情況，這所學校請來了全球頂尖的設計咨詢公司IDEO，他們與1300多名學生、父母、營養(yǎng)人員、董事會專員、校長、老師和社區(qū)團體等利益相關者一起工作，重新去設計了學校的午餐，并且制定了針對三種年齡的就餐體驗的建議，完成了飲食、就餐空間、新技術使用等多方面的優(yōu)化和設計。
圖片來源：IDEO
最終，學校完美的改善了午餐服務的體驗，這其中包含了所有利益相關者的想法和工作，因此設計成果也被人們所接受，越來越多的校內人員會選擇學校的午餐，之后，這種設計模式也被舊金山的許多學校采納和推出。
所以，服務中涉及到的利益相關者有很多，多收集他們的想法與建議，甚至讓他們參與到服務設計中去，問題會得到更好的解決。
c.迭代(Iterative)
迭代是一個不斷接受反饋不斷優(yōu)化的過程，如此重復執(zhí)行，讓產(chǎn)品變得越來越好。服務設計也需要迭代，不要避免犯錯誤，而是從錯誤中學習和改變，同時也要不斷的收集各方的反饋信息，這些信息是服務進行迭代的核心所在。隨著互聯(lián)網(wǎng)的發(fā)展，迭代的思維早已滲透到每一個互聯(lián)網(wǎng)產(chǎn)品，此處就不再過多解釋。
d.有序(Sequential)
服務設計應該是一系列相互關聯(lián)的活動，并且是按照順序進行的，精準的把控服務每一個環(huán)節(jié)的節(jié)奏，用戶才能獲得更愉悅的體驗。
以外賣為例，用戶的使用過程包含訂外賣時的商家選擇到下單過程，下單后配送外賣，用戶收到外賣和用餐后這幾個過程，而服務的提供者主要包括商家、平臺和外賣小哥，為了保證用戶能夠獲得流暢的服務體驗，需要各個服務提供者在服務展開的不同環(huán)節(jié)推出優(yōu)質的服務，如下圖。
在訂外賣時，平臺會為用戶推出“超值優(yōu)惠”“限時秒殺”等優(yōu)惠活動，商家推薦、訂單歷史等商家選擇渠道，以及不同的篩選條件，以上的目的都在于幫助用戶快速找到自己期望的、合適的商家。在用戶選定商家后，進入到選擇商品并下單的過程，一方面，商家會推出優(yōu)惠的活動、推薦菜品等，另一方面，平臺也會給出自己的優(yōu)惠。
下單后，用戶面臨的是一個配送過程中的等待時間，為了緩解用戶在等待過程中的焦慮情緒，平臺會及時更新和推送外賣小哥的狀態(tài)，如到達商家、取餐中、與用戶的距離等，同時會給出用戶預期的送達時間，若超過預期時間用戶還可進行催單，商家可以聯(lián)系用戶表達歉意，整個過程用戶對配送狀態(tài)是可視的。
用戶收到外賣時首先會與外賣小哥接觸，包括與外賣小哥提前確定取餐的時間地點，取外賣時的短暫對話等，這些都會影響用戶對服務的印象，因此外賣小哥需要保證服務態(tài)度的禮貌和友好。收到外賣后，食品包裝首先給到了用戶對商家的第一印象，然后是餐品是否符合用戶預期，讓用戶滿意。
在用戶就餐后，首先平臺要提供給用戶評價的功能，用戶可以分享自己就餐的感受，商家也可以通過平臺為用戶提供更多的優(yōu)惠，引導用戶能夠再次回到商家訂餐。
從外賣的案例中我們可以看到，服務是一個過程，是需要有序展開的，每一個環(huán)節(jié)的體驗都會影響到用戶對服務的印象，在恰當?shù)沫h(huán)節(jié)提供恰當?shù)膬?yōu)質服務，才能確保用戶的整體體驗。
e.真實(Real)
服務本質上是無形的，應該用“物理元素”來可視化，這樣可以用戶的服務記憶，增強用戶對他們所接受服務的感知。
同樣以上述外賣為例，商家為用戶提供餐食，這部分是借助美團這個平臺和外賣小哥來完成的，用戶和商家的接觸僅僅是送達的餐食，因此無法通過像到店體驗一樣，讓用戶感知到商家提供的更多服務。
為了讓服務變得更加“有形化”，商家就需要花費更多的心思，如圖，商家為了增強用戶對服務的感知，一般會在在包裝上花費很多功夫，精致的包裝讓商家的形象更好且更加值得信任，一些有趣的包裝還可能讓用戶的心情變得愉悅。另外，商家也可以通過一張便利貼的溫馨問候或者贈送小禮品等方式讓用戶更真實的感受到服務，通過這樣的手段，即使用戶并沒有真的接觸到商家，體驗也會變得很好，商家的形象也會提升很多。
圖片來源：古田路9號
f.整體(Holistic)
整體就是要著眼于整個用戶旅程，考慮用戶與服務的每個觸點（觸點的概念后文會進行介紹），并兼顧多方利益相關者的需求。也就是所謂的全方位服務體驗，考慮服務環(huán)境的方方面面，沒有任何遺漏。這個原則實施起來并不是那么簡單，從整體角度思考問題會使問題變得復雜。不過在服務設計中，是有一些方法和工具是可以幫助我們完成整體思考的，比如服務藍圖。
服務設計的常用方法-服務藍圖
a.服務藍圖簡介
服務藍圖是一張圖表，通過列出在每個階段發(fā)生的、不同角色執(zhí)行的所有活動，顯示了服務的整個過程。如圖所示是一個服務藍圖的簡單示例，垂直方向上展示服務中的利益相關者，水平方向上為用戶的歷程，也就是用戶經(jīng)歷的不同階段。在服務藍圖中有兩條線，一條是可見線（line of visibility），可見線上方為用戶可與之交互的服務，也可以稱之為“前臺”，可見線下方代表的是后臺進程，用戶無法看到但需要給用戶提供支持，后臺進程還可以存在內部交互線，用來表示內部人員的聯(lián)系。用戶與前臺服務之間存在另外一條交互線（line of interaction），用來表示用戶與服務之間的接觸。
圖片來源：Service Design Tools
明確了服務藍圖的大致框架之后，還需要注意服務藍圖中一個非常重要的概念——觸點。觸點就是在服務的各階段，用戶和產(chǎn)品、服務、后臺產(chǎn)生的接觸，每個觸點也是服務可以進行展開和優(yōu)化的方向。
b.Uber服務藍圖繪制
為了明確服務藍圖的繪制和分析過程，下面將結合下圖所示的Uber服務藍圖進行說明。
圖片來源：Medium
(1) 明確用戶歷程
用戶使用Uber打車服務主要可以簡單分為以下三個階段：注冊（下載APP - 新用戶注冊），乘車階段（下單 - 等待車輛到達 - 乘車 - 到達目的地）、乘車后（付款 - 評價）。
(2) 明確利益相關者
用戶與之產(chǎn)生互動的前臺服務人員為司機，而設計師、開發(fā)人員、項目經(jīng)理等負責后臺的服務支持，以保證Uber按照預期的目標運作。
(3) 明確前后臺活動
一方面，需要明確和用戶接觸的前臺活動有哪些，Uber打車服務中和用戶產(chǎn)生接觸的主要為司機及車輛，因此需要確保司機是合格的、車輛內部的環(huán)境是干凈舒適的，同時司機在與用戶接觸的過程中需要提供禮貌的問候和交流，滿足用戶在乘車過程中的要求，完成乘車費用的收取，提醒用戶離開前帶好隨身物品，以及評價乘客等。
另一方面，用戶對后臺的流程可能并不了解，但需要明確哪些后臺活動和支持會對用戶產(chǎn)生影響。比如在用戶下單時能夠自動獲取用戶定位，告知用戶預期的時間和價格，以及發(fā)送給用戶司機的狀態(tài)等。
在明確前后臺活動時，我們可以以用戶歷程為線，分步驟進行分析，確保每個環(huán)節(jié)中涉及到的前后臺活動沒有被遺漏。
(4)明確關鍵觸點
在服務藍圖中我們可以標注用戶與服務的主要接觸點，針對觸點進行設計是提升服務體驗的一個重要和有效的手段。
在Uber打車服務中還有一些需要注意的觸點，一是等待時間，這包括用戶發(fā)起乘車請求后、付款時以及評價司機時，等待時間是造成用戶體驗較差的一個原因，因此需要注意標注出這些觸點，并想辦法優(yōu)化，在服務設計中需要注意相關環(huán)節(jié)的應盡量簡單，減少用戶的等待。另外需要注意的是會對體驗影響較大的觸點，如司機態(tài)度不友好、乘客下車時忘記帶隨身物品等，可能造成失敗的服務體驗的觸點應該精心地去設計，避免這樣的情況發(fā)生。
通過以上過程我們完成了Uber服務藍圖的繪制，從中可以獲取到Uber打車服務的整體概貌及其相互關系。
///
結語
服務設計的思維能夠幫助我們從全局的角度去審視和思考，發(fā)現(xiàn)更多改善服務的可能性，從而為用戶提供更好的體驗。因此對于產(chǎn)品和設計等相關人員來說，不能僅僅把目光放在產(chǎn)品本身，而是要從服務的角度去正確看待產(chǎn)品和用戶的關系，以用戶為中心，找到用戶與產(chǎn)品的每一個接觸點來進行服務設計，這樣才能保證用戶在整個流程中都能得到好的體驗。
文章來源：站酷 作者：百度MEUX
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
先看目錄！
1.什么是流量分發(fā)
2.為什么要做流量分發(fā)
3.首頁中流量分發(fā)的類型
4.流量轉化模型
5.流量如何分配的
6.設計案例與流量分發(fā)
7.如何衡量流量的效果
相信大家對流量并不陌生，我們在運營的口中經(jīng)常會聽到這個詞：流量。運營通過各種手段和策略吸引用戶來接觸、使用我們的產(chǎn)品，從而吸引到了許多的流量，流量越多機會也就越多，比如一家奶茶店門店選址要考慮的最關鍵因素就是人流量。
流量分發(fā)的本質其實就是用戶需求分發(fā)，我們設計師的價值就在于如何讓這些流量發(fā)揮出更大的價值，讓流量價值和用戶價值相匹配。流量就像是一片海，海水通過不同的分支流入大陸形成了江、河，如果沒有這些分支，那么這些水永遠無法被利用，發(fā)揮出它們的價值。流量分發(fā)我們最常見的方式有：搜索分發(fā)、算法分發(fā)、社交分發(fā)、人工分發(fā)、付費分發(fā)
舉一個比較典型的例子：海底撈在進行流量轉化之前，并不是單純的在店門口給用戶一排座位讓用戶去等待，因為這部分用戶就像沒有被分流的海水是死的，這時候的用戶其實也有自己的目標，就是消磨時間，那么海底撈就提供了一系列服務讓這部分用戶活動起來，比如給零食、玩具、做指甲等等，于是這部分用戶其實就相當于進入了就餐流程的分支，提前享受服務和餐廳提供的福利，除了提升用戶體驗以外，也消化了大部分的流量。試想一下如果一下來了許多客戶，但你只有十幾張椅子讓用戶等待，勢必造成更多的損失。
流量是無序混亂的，只有到它應該去的地方，它才會有價值。產(chǎn)品與用戶雙方都需要有清晰的目標，產(chǎn)品提供解決方案和導流不同的場景，用戶負責完成目標給業(yè)務帶來價值。
流量分發(fā)最典型的就是電商產(chǎn)品，因為業(yè)務目標非常明確，就是實現(xiàn)gmv的提升，但同時其用戶的需求場景也是相對來說很復雜的。那么一個好的流量分發(fā)策略，可以大大的減少用戶完成目標的時間和精力，也讓產(chǎn)品可以準確的掌握用戶的需求流向。
流量不分發(fā)或者錯誤分發(fā)就會造成更多的消耗，什么意思呢？我們舉個例子，譬如下方的模坑app首頁，首頁中雖然提供了搜索、分類和標簽欄不同模塊，但是核心的內容顯示區(qū)域則只有一張預售產(chǎn)品的大圖。我們知道用戶類型非常多，這樣的布局對于小白和第一次用此款產(chǎn)品的小白來說會十分迷茫，因為最顯眼的內容中并沒有他們想要獲取的信息。我們不求滿足所有用戶，但至少需要覆蓋大部分用戶和核心用戶，此外，這樣的形式就像一個漏斗，只靠一個出口漏水，效率自然不高。
同時為了達到最大化，流量的分發(fā)并不是單向的，而是并行、串聯(lián)的。比如你可以在通過搜索找到某件商品，參與活動、運營板塊、商品分類、網(wǎng)紅直播等等區(qū)域都可以發(fā)現(xiàn)這個商品，同理，你想要購買視頻app的會員，不僅僅可以去個人中心，你還可以去詳情。所以流量就像一個大網(wǎng)格，單純的給漏斗戳幾個洞還不夠，甚至要把這些洞用很多根管子串起來。
流量分發(fā)可以幫助盤活新業(yè)務以及尋找新的價值，例如我們之前的電商產(chǎn)品在前期是以時間軸為核心的消化方式，商品以單品列表平鋪的形式展示，在產(chǎn)品發(fā)展過程中形態(tài)會發(fā)生變化，單純以這樣的形態(tài)承載用戶需求肯定是不夠的，所以更多運營板塊和推薦可以分擔這部分“舊”流量。
我們在移動端的首頁可以?？匆姷念愋陀校核阉?、宮格型板塊、信息流、banner、fab等。
搜索給有明確需求的用戶提供了入口，同時在搜索這個顯性場景中我們也可以細化出更多的場景給流量提供更有效的支持
例如搜索場景下除了熱門搜索、搜素歷史以外還可以提供不同的分類內容推薦。
逐漸走下神壇的banner，曾經(jīng)可是在UI界叱咤風云，在當時由于他是首頁占比一哥，很多產(chǎn)品在首頁規(guī)劃中都認為banner會承載大部分的流量，尤其是像淘寶等電商產(chǎn)品，banner不僅僅可以靠圖片吸引用戶，在做一些大促活動時候還可以變成氛圍擔當，和導航欄上下呼應。我們說首頁是寸土寸金的，但是大家發(fā)現(xiàn)沒有，banner的流量和他本身的價值可能不相匹配。也就是說雖然他面積很大，但是用戶點擊率相比于其他板塊并沒有什么優(yōu)勢，甚至還低。所以淘寶目前的首頁已經(jīng)看不到banner了，這個區(qū)域可以放下更多的運營區(qū)塊和流量入口，當需要它的時候再配置起來就可以了。
這個板塊除了業(yè)務分類的“金剛區(qū)”以外還有運營活動的配置區(qū)域，我們先來說以業(yè)務劃來劃分的流量入口，以這樣的形式來分配流量是常規(guī)的手段，當然他也是有利弊的，有利的地方在于幾乎每個業(yè)務板塊雨露均沾，至少是在同一屏幕中呈現(xiàn)，還可以左右滑動切換更多。弊端的話就是層級深，并且用戶瀏覽效率低不聚焦，對于那些泛瀏覽型的用戶并不友好，因為你進入一個業(yè)務板塊后發(fā)現(xiàn)內容自己 不感興趣需要就需要再返回。所以這樣的分流更適合深度使用產(chǎn)品的用戶
那有沒有另外一種形式可以分配流量給不同業(yè)務板塊呢？當然是有的，比如tab標簽，有了tab標簽，泛瀏覽的型的用戶會更喜歡，他們能更快的找到自己喜歡的內容，比如bilibili、騰訊視頻的首頁，這個當然也和產(chǎn)品目標有關，他們希望讓用戶看到更多的內容，讓產(chǎn)品更扁平化。
那么你即想扁平又想讓用戶直觀的看到業(yè)務板塊分類怎么辦呢，你可以這么做，就像大眾點評一樣上邊是宮格，下面是tab標簽
Fab和cta可以說是比較另類的存在了，幾乎就是你想讓用戶去點，那你就放，所以這樣的入口流量路徑就比較單一，無法沉淀和升級流量，是短期目標的形態(tài)。fab的這樣的懸浮入口會一直在首頁顯示，通常產(chǎn)品為了吸引用戶會將其設計的比較吸引人，比如添加動效等，但是fab也會干擾用戶正常瀏覽界面，所以一般可以用透明、伸縮的方式解決，不過伸縮要考慮用戶實際操作，避免頻繁的伸縮造成的更多干擾。
大部分產(chǎn)品對于泛瀏覽用戶的匹配場景都是提供信息流，但是單純的給信息流依然無法讓用戶深入沉淀，所以需要在信息流中穿插一些分流入口，譬如品牌、話題、活動、排行等，讓用戶有更深入的瀏覽，這樣才能促成轉化。
流量獲取很容易，但是我們的目標并不是讓用戶進來逛一圈就走，所以流量的轉化我把他以這樣的模型展示，也就是說流量從獲取到沉淀再到最后的進化過程。
獲取新流量的方式很多，例如社交分發(fā)、線下活動引流等等，內部流量也可以通過打通多個板塊進行流量互換。但是這些流量是表面的，不做進一步整合也就沒有實際價值，所以我們需要將其沉淀下來。
流量就像過江之鯽，如果你想讓這條江里有更多魚，你首先需要有個兜來留住這些用戶，為了不讓這些魚繼續(xù)游走，你可以給更多豐富的食物、創(chuàng)造更好的環(huán)境。如何讓魚更好的在這里生存呢，要讓他們熟悉你的一切，要讓這些魚在其中發(fā)展、繁衍，所以當我們用內容吸引住用戶后，要讓用戶留下來成為深度用戶，這個前提就是讓用戶更長時間的使用產(chǎn)品，如何提升產(chǎn)品使用時長呢？譬如通過智能算法在很多斷流的板塊提供偏好推薦、幫助用戶預判場景、社交互動、讓用戶有成就感、積分體系、個人成長系統(tǒng)、個人品牌塑造等。
之前兩步依然是在存量市場里盤流量，這是對的，從十四五國家發(fā)展規(guī)劃來看，我們能看到一個關鍵的變化，就是從“速度”到“質量”的變化，如果你的流量已經(jīng)完成沉淀，那么可以不著急找增量，而是找進化的方法。當然以下是我個人的一些思考，僅供參考。從淺層到深入，從深入到高效，從高效到創(chuàng)造，所以當你的流量已經(jīng)比較成熟的時候，可能更多需要讓這些用戶再創(chuàng)造新的內容，他們可以利用你提供的產(chǎn)品創(chuàng)造自己的玩法，即便你不提供任何的幫助也可以形成生態(tài)，甚至還可以幫你引入增量市場。
譬如玩社群的都知道，引流簡單，但是要維持社群的熱度和培養(yǎng)超級粉絲是很難的，但是一旦你做到了，那么這些人就是幫你創(chuàng)造更多的價值，所以你需要一個龐大且智能的基建，還有更好的服務。
判斷流量分配是否合理的標準不在于多和廣，而在于核心價值與目標是否達成。譬如內容型電商（抖音、快手）和傳統(tǒng)型電商（淘寶、京東），內容型電商的流量是依靠內容帶動電商去轉化，更多的是依靠內容的質量，而傳統(tǒng)型電商依靠的是商品，那么在這兩個產(chǎn)品中，前者的流量更多還是要流向內容而非商品。
再舉個例子，在首頁的板塊中，我們默認流量從大到小是板塊越靠上的越多，越靠下的越少是嗎？也不是，板塊的分配是需要結合用戶需求的，比如你規(guī)劃的板塊視覺上很明顯但是從數(shù)據(jù)上看流量很低，那么這個板塊就是有問題的，或者板塊不明顯但流量很高，這些都不是正常表現(xiàn)。
所以流量分發(fā)之前就要確定好，分發(fā)的目的和希望達成的目標。是能夠讓新用戶更快了解產(chǎn)品，還是讓成熟用戶在使用時更高效，或者大力宣傳新業(yè)務等等，不是一股腦兒隨大流的把蛋糕切成幾塊。
不知道有沒有在做抖音的小伙伴，抖音的流量分發(fā)讓很多人搞不明白，其實抖音屬于一個強運營平臺，當用戶制作一個視頻發(fā)布后，他的流量并不是全部來自于已經(jīng)關注你的粉絲，一部分是通過判斷你的視頻內容和質量分發(fā)給相應標簽、可能會喜歡的用戶。但是快手和抖音不同，快手的社交分發(fā)策略更重，用戶發(fā)布的視頻，已經(jīng)關注的粉絲分發(fā)到的比例會更高，這樣用戶的互動也會更強。
通過一些設計案例我們來看看設計在流量分發(fā)中起到的作用。
流量與曝光是有關系的，為了爭取更多的曝光我們可以采用這樣的方式進行設計，通常我們可以看到橫向滾動結束后進入下一級界面需要點擊更多，但點擊的成本就高于滑動，所以在這里可以讓用戶直接通過滑動進入下一級界面，增加曝光。同時滑動是承接上一步手勢操作，很連貫，相比點擊的效率也會越高。
我們經(jīng)常在用產(chǎn)品的時候能看到同一個界面可以從多個不同的入口進來，比如像小鹿茶app點擊下單跳轉到商品列表，也可以直接點擊底部第二個tab切換過來。比如你可以在夜宵板塊和品牌板塊都能找到kfc，讓一個區(qū)域的流量不僅僅從單獨的方向流入，這樣可以滿足更多用戶的場景需求。像淘寶的商品流量來自多個不同的層級
還有我們可以將更深層級的業(yè)務板塊提到上一層級，提高子業(yè)務板塊的點擊率和曝光，譬如貝殼在下方的tab板塊中除了信息流內容外還嵌入了精選、人氣、熱門三個分類。還有類似像德邦app這樣的工具型首頁其實版面利用率太低，本身產(chǎn)品功能不多其實不需要劃分出這么多板塊，讓每個板塊流量這么分散，可以直接在首頁中加入查單號的功能，并且將寄件收件歷史平鋪在首頁。
淘寶商品詳情中會有店鋪和店鋪推薦內容，方便用戶查看更多偏好商品，提高客單價。具有電商屬性的社交產(chǎn)品在用戶圖文中可以添加商品鏈接、標簽、話題等等。還有淘寶在首頁的feed流中點擊商品會進入另一個feed流，這里的商品又進行了算法權重的加持，會更加準確與多樣，由于本身處于逛場景的用戶，在這一步再次幫助用戶進行準確選擇，可以提高轉化，當然了，這樣中心化的分流方式對于商家而言不太友好。
衡量流量分發(fā)的效果，我們可以查看板塊的點擊率（UV/PV）和預期。比如在某個周期中，有100個人進入這個界面，而這個界面中的banner最終點擊量為1000次，那么這個banner的點擊率為1000/100=10，平均每人點擊了10次。點擊率越高，該入口的流量自然更大。
每個產(chǎn)品對于活躍的標準不同，比如一個商場衡量活躍用戶數(shù)會算那些進來蹭空調的大伯大媽嗎？還是衡量那些有消費行為的顧客，同理一個產(chǎn)品計算活躍不是單純看每天有多少人登錄瀏覽就算活躍的。
那么觀察活躍度有什么用呢？比如我們之前做一個大促活動，每個板塊都有活動，但是大促結束后，只有童裝類板塊的日活流量在持續(xù)下降，于是我們通過相關調研，發(fā)現(xiàn)是因為童裝類的品類太少，用戶沒有逛和再次購買的興趣。
一波流量進入后，我們不僅要看他們去了哪里，還要查看這波流量在這里做了什么，于是我們通過查看頁面停留時長可以判斷一些問題，比如
1. 如果用戶在本該停留時長長的頁面反而停留時間短可能是當前內容不感興趣、看不懂、閃退、臨時有事等等
2.反之，在本該停留時間短但是用戶停留時間長，說明可能文案排版或者解釋的不清楚、用戶可能在思考、臨時有事等等
一波流量進入后，可能進入更深級界面也可能停留原地，那么還有一部分可能就直接離開了，查看流量的流失可以幫助我們判斷以下問題
1.如果用戶在進行某個多步驟任務，當我們發(fā)現(xiàn)其在即將完成時退出了，或者在中間步驟退出了，那說明可能出現(xiàn)了某些問題讓用戶進行不下去
2.用戶可能對當前流程沒有預期，也可能覺得有風險也可能是對某個地方產(chǎn)生不滿
流量就像是一群被標記過的小白鼠，從哪里來到哪里去，中間做了什么，都被我們記錄了下來，那么頁面訪問路徑也是我們查看這些流量去向的關鍵指標，例如cctalk在冷啟動后默認打開發(fā)現(xiàn)頁面，我們進行了一些用戶的調研，發(fā)現(xiàn)90%以上的同學在進入后都會切換到上課這個界面，這里可以思考的是作為產(chǎn)品我們發(fā)現(xiàn)用戶有這樣的行為，需不需要對產(chǎn)品進行優(yōu)化，產(chǎn)品這樣的設計是否考慮到的是新用戶和培養(yǎng)用戶習慣讓更多課程有曝光。其實這里可以做一些判斷，如果用戶近期有購課、上課的記錄和行為，默認打開上課板塊。若新用戶或者長期沒有上課行為的用戶則默認打開發(fā)現(xiàn)界面。這樣就可以起到更精準的分流。
8.總結
流量誠可貴，流失就白費。
今天分享就到這里，你學廢了嗎？
文章來源：站酷 作者：應駿
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
藍藍設計的小編 http://www.bouu.cn