在通常版式設計中，一般是由文字、色彩、圖形三個要素組合而成的。通過這三個要素的有機搭配，從而給人視覺上造成一定的沖擊，激發(fā)人們的閱讀興趣。

     其次，文字組合編排是構成版式設計中最主要的構成要素，也是傳遞信息的重要的設計手法和策略。字體的選擇是否合適則會直接影響版式的效果，雖然能現(xiàn)在可供選擇的字體五花八門，但是所選擇的字體要能夠與版式的主題相吻合。除此之外，文字的字號也會影響閱讀，在排版時要注意文字信息的等級關系，做到有主有次。

   如果文字從發(fā)明出來的那一刻起，就是為了記錄和傳遞信息，那在版式中的文字就是通過設計設計手法來更好的傳遞信息。

    怎么去理解這句話呢？如果大家看過《王牌對王牌》這節(jié)目，里面有個游戲叫傳聲筒，里面的游戲規(guī)則是“每隊輪流參賽，每隊任選5名成員，每個成員用隔板隔開，第一人將對手所出題目，演繹給隊友，只能通過音效和動作表達，依次傳遞給下一位隊友，經(jīng)過三四個人傳遞后最后一名隊友，猜測題目上的信息。猜對得一分，最終積分高的一隊獲勝?！?

     這種形式像不像設計師的日常呢？老板或者領導有個“牛批卡拉斯”的想法,然后他在想法告訴運營總監(jiān)或者文策劃總監(jiān)，然后在由下面的運營/策劃專員做成方案，最后在交給設計師做成圖片來傳遞老板那個“牛批卡拉斯”的想法。

    那么文字組合怎么去編排就成為將老板的想法完美的傳遞出來的關鍵要素，為了不南轅北轍，我們需要將文字編排的形成方案，并在實際的工作中通過不斷的實踐去完善，那讓我們一起來了解下文字組編排的技巧吧。

  一般的軟件里面都會有字體選擇器，我們需要找想要的字體的時候都是直接在里面去搜索，然后再去點擊使用，那么今天我來看看怎么通過觀察字體家族的特征來找到我們想要的字體吧。

1.11字體家族的縮寫

    家庭中的所有成員都有各不同的稱謂來辨別身份，在字體家族中也是如此，我們通過不同的前綴后綴的縮寫來區(qū)別字體的樣式。

例如：字體前面的LT代表的是萊諾字體公司，如果我們使用的字體前面或者后面帶有LT，那就說明這個款字體是由萊諾字體公司出版的。

   當然，我們?nèi)粘？吹阶煮w廠家也會有很多，例如常見的MS是微軟公司，MT是蒙納字體，ITC是國際字體公司等等，一般字體公司的名稱的縮寫為連著的大寫字母，所以我們看到字體中帶有2-3的大寫字母，我們可以默認他們是字體公司的名稱縮寫。

    那剛剛我們看到LT后面還有STD，那個是什么意思呢？STD是英文單詞“Standard”的縮寫，代表著這個字體只支持基礎的字符集，它的字體字符集相對會少點，與其相對應的“PRO”是英文單詞“Professional”，則是代表字符集比較多的后綴。

1.12字體家族系統(tǒng)

     既然字體家族的縮寫那么多，那我們怎么把它規(guī)整好方便記憶呢？方便我們通過不同的前綴后綴來區(qū)別字體的樣式。正常的我們講字體家族系統(tǒng)一分為三類，1.字體的寬窄，2.字體的造型，3.字體的字重。

1.13字體家族/字族的寬窄

     寬窄系統(tǒng)：只有比較大的字體公司去做這類型字體，因為不常用，所以做的就比較少，漢字里面好像漢儀旗黑又寬窄系統(tǒng)，那我們怎么去識別呢，以Ai為例子，如果我們在字體后綴發(fā)現(xiàn)帶Condensed，那么我們可以確定這個字體為窄體，以后如果我們在字體后綴發(fā)現(xiàn)帶Extended，那么這個字體則為寬體。如果設計中有特殊的需求，需要我們可以通過后綴去識別。

1.14字體家族/字族造型

造型系統(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é)去分辨。

1.15字體家族/字族的字重

  字重的選擇一般是根據(jù)當前的選擇的字體去跳兩個字重去選擇，這樣才會有對比。字重也是我們設計中常用的選字模式。

1.16字體家族的用途

    我們認識了字體家族對我們做設計有什么作用呢，一個字體家族越全面，我們做設計是可以選擇的范圍就越大，也就越方便，所以我們接到需求，需要選擇字體排版的時候，大致看下字體家族，就可以分辨出這款字體是否適合我們?nèi)ナ褂谩?

需要做好文字組合的編排的基礎是需要選擇合適的版面氣質(zhì)的字體和相對應的中英文混合編排。

2.10中文字體的編排

     中文字體屬于方塊字，具有字體的輪廓性，并且每個字符占據(jù)的空間都是相同的，限制較為嚴格，如段落開頭必須空兩格，豎排文字必須從右到左等規(guī)則。中文字體是一種非常規(guī)整的文字，因此靈活性相對較小，編排難度較大。

2.11西文字體的編排

     一般情況下，英文字體采用流線型方式，靈活性很強，能夠根據(jù)版面的需求靈活變化字體的形態(tài)，以解決版面僵硬、呆板的問題，創(chuàng)造出豐富生動的版面效果。

2.12中西文混合編排

     在版式設計中，經(jīng)常會遇到中英文對照的情況。中文字體的象形、會意等特征和英文字體的簡單、圖形化的特征充分結合，展現(xiàn)兩種字體的優(yōu)勢。編排時應該注意中文字體與英文字體的設計創(chuàng)意與主次關系，做到層次明確，并且要注意字體的統(tǒng)一性，如果字體變化過多，很容易造成版面的混亂。

2.20西文的演化歷程

   我們在聊中西文的編排之前我們需要先了解下西文的歷史，就像我們在打王者榮耀一樣，要學習某個英雄，就先得了解英雄的技能，然后才是這些技能怎么去搭配使用，學習文字組編排也是一樣的道理。

      設計的目的一般是為零解決一些生活中的問題，字體的演化設計之路也是一樣的，都是通過外部能力能觸達的能力加上內(nèi)部的需求所達到的最優(yōu)的解決方案。現(xiàn)在我們將西文字體在歷史上的進程可以分為“文藝復興體” “古羅馬襯線體”“過程型襯線體”“粗襯線體”“無襯線體”。

2.21西文的基礎款字體

   我們可以大致簡單的把基礎款的字體分為兩種，一種是一種是襯線體和無襯線體，襯線體（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/

2.22中文的基礎款字體

中文的基礎款排版字體一般為黑體，宋體，圓體，楷體和一些風格多變的美術體。

• 襯線體

最早是為適應印刷而出現(xiàn)的一種漢字字體，筆畫粗細有變化，而且一般是橫細豎粗，末端有裝飾部分，（即字腳，襯線），點，撇，捺，鉤等筆畫有尖端，屬于襯線字體，常用于書籍雜志報紙等正文排版，趙集，瘦金體。

思源宋體，前身是小塚明朝體改進的，筆畫特征比較相似，小塚明朝橫筆畫要細點，思源宋體橫筆畫要粗點。

• 無襯線體

黑體，屏顯字體，無論放大還是縮小都能看的清晰，黑體可塑性比較強，常用于標題字的制作，小的可以作為內(nèi)文，黑體有稱作方體或者等線體，沒有襯線裝飾，字形端莊，筆畫橫平豎直，筆跡全部一樣粗細，結構嚴謹醒目，筆畫粗壯有力，撇捺等筆畫不尖銳，使人易于閱讀。由于其醒目的特點，常用于標題，導語，標志等。

思源黑體：是最廣泛知道的字體，質(zhì)量高，7個字重，

漢儀旗黑：可以滿足所有的排版的需求，寬窄系統(tǒng)也有。

2.30無襯線體和襯線體的應用場景

     在我們?nèi)粘５脑O計工作中，襯線體和無襯線體該怎么選擇呢？我相信很多設計師都在這個問題上糾結過。我們來結合歷史來看看這個問題吧

2.31巴洛克時期和洛可可時期

     我們把時間倒退到歐洲17-18世紀，這個時期盛行一種藝術“巴洛克藝術”和“洛可可藝術”，巴洛克是一種更早期的宏大而華麗的藝術風格，后世有人將洛可可風格看作是巴洛克風格的晚期，即巴洛克的瓦解和頹廢階段。它產(chǎn)生在反宗教改革時期的意大利,發(fā)展于歐洲信奉天主教的大部分地區(qū),以后隨著天主教的傳播,其影響遠及拉美和亞洲國家。巴洛克作為一種在時間、空間上影響都頗為深遠的藝術風格,其興起與當時的宗教有著緊密的聯(lián)系。然而它不僅在繪畫方面，巴洛克藝術代表整個藝術領域，包括音樂、建筑、裝飾藝術等，內(nèi)涵也極為復雜。

     基本的特點是打破文藝復興時期的嚴肅、含蓄和均衡，崇尚豪華和氣派，注重強烈情感的表現(xiàn)，氣氛熱烈緊張，具有刺人耳目、動人心魄的藝術效果。所以它代表那個時期最流行風格。同時我們可以看看那個時期所產(chǎn)生的字體，也是一樣浮夸，裝飾性明顯。

2.32現(xiàn)代主義設計風格

     我們在把時間撥20世紀德國，一所代表著現(xiàn)代主義設計風格的學校誕生了，包豪斯學院，德國魏瑪市的 “公立包豪斯學?！保⊿taatliches 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)代主義風格的代名詞。

    而包豪斯的設計理念：把簡單的問題把形成標準化，強調(diào)一些構成上的東西，所以在這種觀念的影響下，就產(chǎn)生了一些非常好看的無襯線字體。

而在現(xiàn)代化風格的影響下，產(chǎn)生出了工業(yè)衍生品也非常簡約，現(xiàn)代。

2.33字體該怎么選擇

     做設計是一個入世學，所有的問題都需要結合現(xiàn)有的場景來看，我們上面聊完每個時期藝術熏陶下所產(chǎn)生的字體，那么我們結合實際情況來看下，我們和我們的父母都是在不同文化體系下所產(chǎn)生不同審美觀的人。左邊度圖是我們絕大數(shù)父母喜歡的裝修風格，像洛可可那時候一樣浮夸，而我們卻喜歡簡約的現(xiàn)代風格。

     那么字體也是一樣的，有襯線的字體屬于比較古典的氣質(zhì)，簡約的無襯線字體則是比較現(xiàn)代的工業(yè)風。

2.34中西文襯線體的分類

     也不是所有的襯線字體都是比較古老的，而Didot這款字體因為它造型的特性，也會經(jīng)常出現(xiàn)在雜志封面和一些奢侈品的設計中。從時間的角度來講，最有歷史痕跡的是括弧線襯線又稱古典型襯線，其次是過渡型襯線到粗襯線，最現(xiàn)代的就是極細型襯線。

而中文的襯線體沒有明確的區(qū)分，但是我們可以根據(jù)字體特征按照西文的類目去區(qū)分。

2.35中西文無襯線體的分類

  那上面談到，不是所有的襯線體都代表古典或者歷史的厚重感，所以無襯線體也不是根據(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è)的切口風。

2.36怎么去選擇字體

   字體的選擇我們應該基于合適的主題，合適的用字場景以及使用平臺或者場景，這樣才可以選出合適的字體。

合適的主題：這點適用可以在運營設計或者平面設計中，我們接到的需要適用何種風格，例如國潮肯定會選用毛筆字這種張力比較強的字體，在例如比較有工匠精神的工藝品可以選用有手工感的宋體字。

合適的用字場景，看選用的字是用在標題還是還是正文，標題字可以選用張力比較強的字體，因為標題的文字需要醒目，可以直接傳遞版面需要表達的主題，而正文需要閱讀文本則選擇無個性的黑體比較合適。

適用的平臺，設計展現(xiàn)的平臺也是對字體選用的影響的關鍵因素之一，例如在iOS上選用蘋方字體，安卓上選用思源黑體，PC選用微軟雅黑都可以減輕開發(fā)打包的大小。

2.37中西文如何搭配

  我們?yōu)槭裁匆鲋形魑牡哪俏覀冊谥形魑拇钆涞臅r候應該怎么去搭配呢？下面是我總結的三個方向：

1.細節(jié)類似，細節(jié)類似我們可以觀察字體的細節(jié)進行搭配

2.時間相同，就是在某一個時間節(jié)點下同時產(chǎn)生的兩款字體。

3 .氣質(zhì)相同，這個是在漢字里面才有的，我們常見的字體除了宋體和黑體外，還有是書法字體或手寫體，這類型的字體在通常是不太好搭配字體的。

那要是原字體的西文不太好看，我們怎么去搭配呢？、

• 外形類似

帶有這種轉角圓滑的裝飾線的宋體字我們一般是搭配古典型的襯線體，這樣搭配起來會更舒服，或者漢字的黑體搭配西文的無襯線體，因為它們特征是一樣的，然后就是中文的圓體也同樣會搭配一個西文的圓體，這些都是細節(jié)類似的搭配方法。

• 時間相同

是看筆畫相似來匹配的，我們可以看到下面這個中文的筆畫特征是帶有喇叭口，這種類型的黑體很明顯是印刷工業(yè)時代的產(chǎn)物才會有的特征，而右邊的西文是粗襯線字體，也是帶有工業(yè)時期復古的感覺，而且產(chǎn)生的時間也是比較近似的，一個是20世紀左右產(chǎn)生的字體，一個是19世紀產(chǎn)生的字體，這兩款字體搭配在一起可以凸顯工業(yè)感，穩(wěn)重感，復古感都有，這也是時間匹配法。

• 氣質(zhì)相同

    例如在中國像楷書字體的特征獨特，但是英文的字體沒有類似特征的字體，所以楷書和宋體在中國都可以列為書法體，在氣質(zhì)上是相同的，所以搭配在一起也是比較常見的。

另外我也總結了一些常用的字體搭配方法，放在下圖了，這些只是給大家平常搭配字體時候的一個參考依據(jù)。

     

    我們在日常的的設計工作中，無論是哪種設計，都會涉及文字組的編排，我們可以觀察到一般的文本分兩種組合，一種是標題文本+說明性文本。

標題文本主要放置版本需要傳遞的重要信息，說明性文本是輔助傳遞標題文本的含義。

3.10文字組編排的對比基礎

對比廣泛的存在于我們的生活中，對比的形式也是多種多樣的，例如身高的高矮對比，體重的胖瘦對比，速度的快慢對比等等。在設計領域內(nèi)，對比是最常出現(xiàn)的形式。對于信息來說，適當?shù)膶Ρ瓤梢宰屝畔蛹壐忧逦髁?，同一層級的信息更加豐富。對于畫面整體來說，恰當?shù)膶Ρ瓤梢院芎玫闹圃斐鼋裹c(畫面主體)當我們需要突出某一個元素的時候，其他的元素相應的就要做出對比關系，才能保證主體的突出。

3.11字號對比

      字號對比是最快可以提現(xiàn)內(nèi)容層級關系的一個設計點，一個版面里面不會有太多的文字層級，一般保持在3-5個層級，大部分的軟件都會自己自帶的推薦字號，為什么最小的字號是6號，因為印刷里是可視的極限。

3.12設計中常用的字號對比

常見的字號比例有1:1.5,1:1.618,1:1.732,1:2等等。這些比例在正常使用能很快可以做出層級關系且不會有特別大的問題。例如1:1.618是黃金比例，也是很多植物生長的規(guī)律，符合人正常的審美感受。

3.13行距對比

行距比例如果沒設置合適，對閱讀會造成影響，很容易造成眼睛是視覺疲勞，看來不舒服且文本不容易閱讀。

當行距設置到合適的時候， 我們閱讀起來會比較舒服，也會提高閱讀效率。

行距的設定也可以套用固定的算法：字號*倍率＝行距。

3.20行距對比的作用

    我們在日常的設計工作中，當行距調(diào)整到比較合適的大小的時候，版面會具備層次感 ，但超過一定限度也不太好。那行距的調(diào)整具體有哪些用途呢，1.平衡版面，2.閱讀效率

3.21平衡版面

     例如現(xiàn)在整個版面看起來比較輕盈，那么我們可以選擇一個比較大的行距，因為中間的空比較多，所以看起來并沒有那么重。例如我們現(xiàn)在的版面非常重，我們需要平衡他，那我們的行距就可以給近一點，讓文本塊在視覺上更重，這就是平衡的作用。

3.22閱讀效率

    行距的設定大小會影響我們閱讀的效率，例如行距比例小的，一般用在標題文本，因為標題的文本一般需要我們快速閱讀并了解清楚。

3.30字距的作用

字距大設定也對人的閱讀也會有影響，字據(jù)過大的時候像樹懶說話一樣慢，字據(jù)小的時候感覺說話比較快。

當字距是-800時候的感受，感覺想動漫里的樹懶一樣，說起話來慢吞吞的。

當字距是--100時候的感受，感覺像和人在吵架一樣，說話的語速比較急切。

在一般的平面設計中字據(jù)設定為正負40-70之間去選擇，但是在UI設計中，字距一般為0.

3.31中宮對字距對影響

   同時字距也會受到中宮的影響，在同字號的情況下，微軟雅黑會比其他字號大一號，中宮越大，字面也會越大，因為筆畫外擴，中宮大的字體，字面大，默認間距小

   中宮大的字體，字面大，默認間距小，他的字距可以給大點，中宮小的字體，字面小，默認間距大，他的字距可以給小點，

3.32文本性質(zhì)對字距對影響

例如平方字體，正常0間距做內(nèi)文會比較舒服，但是作為標題，調(diào)了之后會讀起來比較連貫。

3.33字體形狀對字距對影響

     無論是西文還是漢字，他的形狀都會不一樣，有圓形的，正方形的，三角形的等等，不同的形狀，負空間是不一樣的，不同的字號是需要微調(diào)字距的，我們需要軟件視覺來調(diào)整。

在AI中有個功能是基于視覺對齊，我們開啟便可以解決這個問題。

3.40欄寬的設定

    分欄的寬度，決定了一行的長度和字數(shù)，當欄寬太長的時候，我們閱讀可以會比較吃力，總感覺一眼看不到頭。

      一行多少字合適呢？一般的是20-30字之間，極限是15-30之間比較合適，一行字太少和太長都會讓人很累，，這也是為什么有的書為啥讀不下去的原因。

這也是為什么很多娛樂消遣方便的書一頁的字很多，也是為為了提升閱讀的興趣。

     文字設計的成功與否，不僅在于字體自身的書寫，也在于其運用的排列組合是否得當，文字層級之間的關系，適用規(guī)則，欄距＞行距＞字距。

3.40字重平衡

   上面的舒服，因為粗細對比比較平衡，下面面的對比過度，什么時候下可以做強對比呢？做了字號對比，就不要做過大的字重對比，

  3.50/知句逗

    在現(xiàn)在的板式設計中，有一個被忽略的知識點，就是標點符號。標點符號在當今社會不僅僅是用來斷句，也是可以用來傳遞情感，例如下圖，同一句話因為加了不同的標段符號，所傳達的意思就完全不一樣了。

    所以標點符號的運用與文字組的編排在板式設計中同樣的重要，例如在聊天的時候，我們隨意的時候的問號在正式排版中，“！”和“？”的疊用不能超過3個。

   你一句話表達驚訝和疑問的時候，我們應該將問號放在前面感嘆號放在后面。

例如有書名號的文本段是不在需要用頓號去隔開的，如果當書名號后面有括號則是需要用標點符號去把他們分割開來的。

   當然還有就是逗號和不能在一段的前面等等，這些都只是給各位小伙伴一些拓展知識，有興趣的小伙伴如果想自己的板式更加規(guī)范可以自己去查閱相關資料。

     梳理信息層級有哪些作用呢？我們在自然界中會發(fā)現(xiàn)很多與階級有關的現(xiàn)場，例如狼群里，一般都會有頭狼，也叫狼王，主要是統(tǒng)領狼群的行動及群體意識，在企業(yè)中，老板作為一個公司的核心人物，一般正常的普通員工去離職，不會影響公司的正常運作，但是如果涉及到公司的老板不知下落或者企業(yè)的核心管理層離職，會對公司的股價和正常的業(yè)務流程造成很大的干擾。

     在我們?nèi)粘ＴO計中編排文字組也是一樣的，我們首先需要確定接到的需求哪些是重要且關鍵的信息，哪些是次要信息。當它的重要層級越高，他在版面中所扮演傳遞信息的角色就越重要，我們接下來便是通過設計手法，例如通過字距，筆畫粗細，顏色，以及字體等等來做出層級的區(qū)分。

那我我們一起來看看實際的案例吧！

4.10 梳理信息層級梳理的作用

    梳理信息層級有哪些作用呢？我們在自然界中會發(fā)現(xiàn)很多與階級有關的現(xiàn)場，例如狼群里，一般都會有頭狼，也叫狼王，主要是統(tǒng)領狼群的行動及群體意識，在公司中，老板

1.首先是它會便于傳遞信息的中心思想，有助于用戶快速理解，所以一般大標題文字很對都會做效果，有助于提升視覺的焦點，2.信息層級分明，主次有序的在版面中傳遞信息，3.降低視覺噪音：當版面中的文字信息案例主次有序的排列后，版面看起來比較和諧，所有的元素感覺是本應該就在那里的。

如果信息層級沒有梳理過的版面，則會閱讀起來非常的吃力卻效率低下。

4.11  閱讀中的節(jié)奏感與心理引導

      關于文字編排節(jié)奏感，很多人應該好奇了節(jié)奏不是音樂的范疇嗎？怎么文字編排也說有節(jié)奏嗎了？

      其實節(jié)奏感隨著地球開始有生命開始便存在了，因為太陽升起到落下是有著自己每天固定的節(jié)奏的，太陽升起人開始勞作，看著周圍的動物和植物都一天天有變化，感受著自己由青澀稚嫩到遲暮之年；這些有規(guī)則的事物形成的固有的節(jié)奏。

    在文字編排中也可以感受到這樣的節(jié)奏，例如，字體是直線還是曲線，垂直還是水平，傾斜還是正立，緊湊還是寬松，對稱還是不對稱……這些都體現(xiàn)著文字的節(jié)奏。段與段之間的留白多少，字間距的大小都是有規(guī)律可以尋找的，如果文字組合被有規(guī)律的設計、排版，那在設計稿中本身就具有了一種節(jié)奏感的吸引力。沒有節(jié)奏就不會有生命，也不會有任何創(chuàng)造。

4.12  什么是文字組的節(jié)奏感

    好聽的因為是因為音樂的節(jié)奏會有起有伏，有前奏有副歌有高潮部分，這樣的音樂才不會讓人覺得平淡，我們轉換到文字組編排也是一樣的道理，當我們把一些沒有節(jié)奏感的書籍拿出來看是會覺得很困的。

     如果我們加以設計的手法，把文字組合好好的排版一下，這是可以提升我們對內(nèi)容的閱讀興趣的。例如我們閱讀的雜志和一些資訊類的APP，他們對文字和圖片的排版就會很下心思。

       那我們怎么打造自己設計中的節(jié)奏感呢？那接下來我們聊聊怎么通過閱讀視線心理去引導用戶。首先是基礎的視覺邏輯，讓用戶漸入佳境，通過常規(guī)的的閱讀習慣，其實是根據(jù)大小、色彩、線的指向去引導用戶的視線節(jié)奏，其次是視線引導，根據(jù)用戶的常用邏輯打造版面中的節(jié)奏感。

4.20 視覺邏輯

    我們平時在看版面的時候的視線觀看邏輯是怎么確定的呢？1.根據(jù)日常的書寫邏輯：我們看圖習慣和我們?nèi)粘５臅鴮懥晳T是密不可分的，一般是從左至右，從上到下，所以我們很少會看到從右往左的排版和從下往上的排版，因為這樣的不符合人的邏輯，

    因為每個人都心理感受都不一樣，所以當視覺引導不一樣的時候，傳遞的感受也是不一樣的，文字組合的目的是為了增強其視覺傳達功能，賦予審美情感，誘導人們有興趣地進行閱讀。因此，在組合方式上就需要順應人們的心理感受。人們的一般閱讀順序是:水平方向上，視線一般是從左向右流動；垂直方向上，視線一般從上向下流動；大于45°斜度時，視線從上而下流動；小于45°時，視線從下向上流動。  

4.21  閱讀順序和文字的關系

  板式的閱讀順序有兩種：從左到右和從右到左。這是人們平時慣性的限制，就好像寫文章一樣，一旦決定了從左到右寫，就不會更改，板式也是如此，一旦決定了板式的閱讀順序，許多元素都會隨之被限制。

• 橫排文字

正常我們?nèi)ラ喿x橫排文字就是先從左到右，從上到下的規(guī)律去閱讀。

• 豎排文字

豎排文字的閱讀順序是從上到下，整體在從右上至左下。我們無論是橫排版還是豎排版，行距都是要大于字距的。

4.22  通過閱讀邏輯引導視覺

     版式設計的核心就是吸引人的視線。當我們在觀看某些東西時，大部分的人都有自己習以為常的觀看習慣。人們往往在一瞬間就會判斷出這是什么？這一現(xiàn)象導致的結果是人們會想起與所看到的東西相近的信息，并判斷畫面中信息的價值，我們將這種心理傾向稱之為視覺心理。視線的引導是建立在視線的移動之上的，在引導視線前，我們需要先建立焦點。

4.23  閱讀中的視覺聚焦

       視覺聚焦是在文字組編排中先建立視覺的突破口，然后就再去引導其他的內(nèi)容。設計師，有一個重要的瓶頸就是，無法在版面中快速的傳達主題的中心思想，明明什么信息都有，就是讓人抓不住重點。如何一秒吸引別人的注意力，快速get要表達的點？那就是需要在版面中埋下引導別人實現(xiàn)的點。

4.30  如何進行視線對比引導

引導方式可以根據(jù)版面現(xiàn)有的內(nèi)容做大小層次對比，顏色對比，空間對比及元素具有的特有指向性。

4.31  大小對比

   人們在日常生活中，通常會先注意到大的東西，在有較大的元素在版面中，我們的視線往往會向大的元素是聚集，從大到小，這樣一步一步的去看，在版面設計運用這樣的小技巧，我們閱讀起來相對來說比較順暢。特別是當兩件物體顏色或材質(zhì)相同的時候，視線往往會集中在大的物體上。根據(jù)這一原理，應該盡量放大希望吸引讀者注意的東西。

4.32  色彩對比

   通過有序的色彩的引導視線是版式設計中不可或缺的主要元素，同時也頻繁應用于視覺引導中。色彩的心理效果在視覺引導中的運用就是：人的目光首先會注意眾多色彩中不同的那一個。例如下圖中，當色彩是藍色的時候，是沒有焦點的，當出現(xiàn)別等顏色是特別吸引人的目光的。

然后在加上大小的對比之后，吸引我們眼球的肯定是下面這個大圓形。

如果在下面這個大圓形去改變顏色，這個便會更加大吸引人

其次是亮明度高的顏色比明度低的更吸引人的目光。

暖色調(diào)比冷色調(diào)會更加吸引人

4.33視覺吸引力的關系

   我們正常的瀏覽順序是從左至右，從上至下，那當我們怎么打破這個順序呢？首先是暖色＞冷色，明度高＞明度低的，元素大的＞元素小的，那下圖我們?yōu)g覽順序應該是先看紅色，在上面開始看，其次是右邊和下方。

4.40視線的引導

引導是一種視覺的語言。一幅好的設計作品，用戶的視線一定是被控制在主體和興趣點上，而不是被其他與主題無關的雜物所吸引，只要用好視線的引導，才可以傳遞我們想傳遞的。

4.41 元素的指向性

    當版面中出現(xiàn)箭頭或者人臉等相關指向性的圖片或者元素出現(xiàn)，是因為古希臘畢達哥拉斯學派和柏拉圖認為眼睛在捕捉物體時，視線、目光和力量會以物體為目標，從眼睛向物體方向傳送，把這一想法用設計原理來表示時。這時候的帶有指向性的圖片或者元素，便是視覺的切入點。

4.42 線的引導

線作為板式中的引導，也是非常常用的，它既可以作為引導視線的切入點，也可以填補畫面中的空白點。

線除了是直線，還可以是曲線，文字組成的線或者負空間形成的線，都是具有引導視線的作用。

4.43 向下一數(shù)字移動視線

   我們從小在學校學習了數(shù)字的大小順序，在在考試時，我們會順著考生號找座位，坐車時順著車票找座位。我們生活中還有很多地方會應用到編號。所以我們的目光會隨編號移動，是因為我們一直就有這樣的習慣。如果看到1，就自然會找2，看到A會去尋找B，視線就會這樣一直移動下去。

     設計離不開構圖，構圖通俗地講：就是為了表現(xiàn)畫面的主題思想，而對畫面上的人或物及其陪體、環(huán)境作出恰當?shù)?、合理的、舒適的安排，并運用藝術的技巧、技術手段強化或削弱畫面上某些部分，最終達到使主題形象突出，主體和陪體之間的布局多樣統(tǒng)一，畫面疏密有致，以及結構均衡的藝術效果，使主題思想得到充分、完美的表現(xiàn)。

當我們把文字組編排好了，可以通過構成形式將他們串聯(lián)起來，這才是好的排版，能快速想到版面的效果。

5.10 居中構圖

     居中構圖是最常見的構圖，指的是將畫面的主要元素放置在版面的中軸線上，目的是快速吸引眼球，占據(jù)視覺焦點，突出主體。中心構圖的版式簡潔、利落，給人以雅致的視覺感受。在突出主體的同時又能賦予畫面穩(wěn)定感，并使整體畫面具有一定的沖擊力，需要表現(xiàn)規(guī)整穩(wěn)定、醒目大方的版面時，可以使用居中構圖。其次對稱構圖是居中的一種特例。

5.11 對稱構圖

       對稱的形態(tài)在視覺上有自然、安定、均勻、協(xié)調(diào)、整齊、典雅、莊重、完美的樸素美感，符合人眼的視覺習慣。平面構圖中的對稱，可分為點對稱和軸對稱。在平面構圖中應用對稱法則要避免由于過分的絕對對稱而產(chǎn)生單調(diào)、呆板的感覺。有時，在整體對稱的格局中加入一些不對稱的因素，反而能增加構圖的生動性和美感，避免了單調(diào)和呆板。能夠突出主體，聚焦視線，當制作的圖片沒有太多文字，并且展示主體很明確的情況下，可以使用對稱構圖，在電影海報中也是比較常見的。

5.12 傾斜構圖

     斜線式構圖又稱傾斜構圖，是將文字或者主體物以傾斜的方式放置在版面當中。傾斜的角度產(chǎn)生勢能，給人以引導作用。優(yōu)化視覺層級，清晰的傳遞信息。讓比較呆板的畫面具有活力和生機，當制作的版面需要沖擊、不穩(wěn)定效果時，可以使用傾斜式構圖，需要沖擊感和不穩(wěn)定感時可以嘗試，也可以做透視，讓他有近大遠小的空間感。

5.13 S/Z型構圖

   曲線式構圖指的是版面中重要元素呈曲線排布，其他元素填充剩余空間，曲線具有靈活的屬性。其中“S”形狀從前景向中景和后景延申，畫面構成縱深方向的空間關系的視覺感，所以曲線構圖的版面常常顯得充實、熱鬧、生動、空間感。具有曲線的優(yōu)美而富有活力和韻味，需要有力的表現(xiàn)場景的空間感和深度時，可以選擇S形構圖，例如瑜伽海報。

要表現(xiàn)畫面的空間感和縱深感也可以用S型購物，這也是S型構圖的特性，讓畫面更有空間感。

5.14 壓腳構圖

    壓角式構圖適用于標題字數(shù)較少的版式設計，標題作為絕對重要的元素放置四角，一眼就能被看到。要做好壓住四角的版式設計得進行網(wǎng)格構架，控制好版面之間的比例。這種構圖形式使得畫面更加穩(wěn)定，突出中心主體。

5.15 散點構圖

    散點式構圖是指主體數(shù)量較多，散落在畫面當中的構圖方法。在應用散點式構圖時應防止散亂，宜用隱性結構線或結構形將各個“點暗連起來，相互呼應形成聯(lián)系。”適用于標題文字稍多的平面版式設計。文字排布時，拉開字的間距，在版式上化作為元素。標題文字的縱向距離要大于橫向距離，否則容易誤導閱讀順序。當文字信息比較多的時候，可以選擇散點構圖。

5.16 三分法構圖

    三分法是一條法則，同時也不是一條規(guī)則。 這個說法很拗口，我們來理解一下。 從本質(zhì)上講，它就是我們的眼睛自然感知圖像的方式，這些圖像被限制在一個邊界之內(nèi)（例如畫框）。 這些框架，都有一個固定的長度和寬度; 將這兩個屬性分別分成三個相等的部分，這會包含兩條水平和垂直穿過框架的等距線，形成四個線相交的點，并創(chuàng)建九個相等大小的框架，如下圖的九宮格。

     而當版面的主要元素分布在三分線或點上，多數(shù)人會感覺這個畫面會比較和諧舒服，這接近是一種天性和本能了。當然，你還可以舉例說很多不是三分構圖的例子來反駁我，但這不重要，只要你要知道大部分遵循三分法構圖的畫面看著都是比較舒服的事實就行了。

6.10 總結

    古時候的文人墨客的門檻是“知句逗”，我個人覺得設計要想入行設計的門檻便是最基本的文字組的編排，

我們的感覺，即我們的視覺和我們的美感，優(yōu)于幾何結構，當我們在處理黑白對比的平衡時，我們必須訴諸感，

在文字組的編排中，其中包含的技藝、功能和形式設計是絕對不能分開的。當我們作為設計師，做好每一處設計的細節(jié)，也是對觀看版面用戶最基本的尊重吧！

文章來源：優(yōu)設   作者：Endings

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

文章來源：ui中國   作者：百度MEUX

藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(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 色彩最標準的記錄方式，但顯然看起來特別的不直觀，或者說不方便。所以在計算機中，為了方便記錄和調(diào)用，使用了一串十六進制的代碼來指代具體的 RGB 色。

理論上，我們只要使用 RGB 模式，隨便你怎么選色，只要記錄 16 進制碼進行復用，你就可以在任何文件、設備中獲得相同的色彩。

但在實際顯示效果上，不同的系統(tǒng)、設備、瀏覽器都有自己的調(diào)色板，“解釋” 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)中進行強調(diào)、標識、區(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 端配色最大的不同是，品牌色在這里很多時候只是 “吉祥物”，它的存在用來宣示品牌本身的存在，但并不是任何情況下都直接參與界面色彩的填充。

假設品牌色是紫色、熒光黃、暗棕色之類的，那么這類顏色本身的內(nèi)涵、寓意是難以滿足功能需求的，我們要盡可能減少它們的出現(xiàn)面積、頻次。

在 B 端設計中，主色的應用是最不需要大面積填充的，即使它是常見、耐用的藍色、橙色，主色的填充主要只應用在下面這些類型內(nèi)容中：

• LOGO
• 關鍵按鈕
• 選中狀態(tài)
• 高亮文本、圖標
• 標簽用色

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ù)之不盡的文本字段。在這么多的內(nèi)容中，我們要根據(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 色彩最標準的記錄方式，但顯然看起來特別的不直觀，或者說不方便。所以在計算機中，為了方便記錄和調(diào)用，使用了一串十六進制的代碼來指代具體的 RGB 色。

理論上，我們只要使用 RGB 模式，隨便你怎么選色，只要記錄 16 進制碼進行復用，你就可以在任何文件、設備中獲得相同的色彩。

但在實際顯示效果上，不同的系統(tǒng)、設備、瀏覽器都有自己的調(diào)色板，“解釋” 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)中進行強調(diào)、標識、區(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 端配色最大的不同是，品牌色在這里很多時候只是 “吉祥物”，它的存在用來宣示品牌本身的存在，但并不是任何情況下都直接參與界面色彩的填充。

假設品牌色是紫色、熒光黃、暗棕色之類的，那么這類顏色本身的內(nèi)涵、寓意是難以滿足功能需求的，我們要盡可能減少它們的出現(xiàn)面積、頻次。

在 B 端設計中，主色的應用是最不需要大面積填充的，即使它是常見、耐用的藍色、橙色，主色的填充主要只應用在下面這些類型內(nèi)容中：

• LOGO
• 關鍵按鈕
• 選中狀態(tài)
• 高亮文本、圖標
• 標簽用色

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ù)之不盡的文本字段。在這么多的內(nèi)容中，我們要根據(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

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

前言

大家是不是時常困惑于，B 端的表單設計體現(xiàn)不出高級感？設計發(fā)揮的空間特別的少？

那是你沒用對發(fā)力點~

B 端：設計表單頁面時，一方面須尊重用戶的習慣，不要在不必要的地方體現(xiàn)差別?？偨Y了 4 個思考問題：

案例：以創(chuàng)建公眾號消息自動推送為例

• 思考用戶用產(chǎn)品做什么事？用戶會用該產(chǎn)品創(chuàng)建公眾號消息推送，根據(jù)用戶觸發(fā)事件，推送相關信息
• 用戶用這類產(chǎn)品最關心的是什么？核對觸發(fā)事件，檢驗消息發(fā)送狀態(tài)
• 用戶有哪些思維定勢？這里就不舉例了（條件不變時，能迅速地感知現(xiàn)實環(huán)境中的事物并作出正確的反應）
• 用戶用過什么類似的產(chǎn)品等？……

另一方面要考慮信息層次。

搞定了基本要素后，我們開始考慮如何表現(xiàn)信息層次。

• 封裝度高、信息密度低
• 如何判斷采用哪種布局方式

什么是封裝度高且信息密度低？

在了解什么封裝度和信息密度前，我先跟大家討論一下。什么是表單之間的關系。

我所認為表單之間的關系分為 3 種：

1. 常規(guī)結構

優(yōu)點：

平鋪所有需要填寫的信息，適合內(nèi)容項較少、內(nèi)容項無法按照相關性分組的表單

缺點：

• 表單頁中需要填寫內(nèi)容眾多，容易造成信息密度過高
• 操作需要的視覺元素越多，用戶的認知負擔越重

使用場景：

當需要完成一個簡單快速的任務，輸入少量信息即可完成創(chuàng)建

2. 樹狀結構

優(yōu)點：

用于復雜任務時，拆解任務進行編排，適當?shù)娜蝿辗指睿梢越档陀脩舫鲥e率

缺點：

• 無法在表單頁中根據(jù)內(nèi)容量進行合理地布局
• 視覺噪點過多，無法兼顧頁面展示和用戶填寫效率

使用場景：

適用于大型、復雜任務

3. 顯/隱結構

優(yōu)點：

減少不必要（非重要）的輸入項，能適當?shù)臏p輕用戶認知負擔

缺點：

• 雖然減輕用戶輸入負擔，但無法高效的判定任務分割的容錯率
• 用戶確認信息有一定難度，無法兼顧頁面展示

使用場景：

特殊場景下使用

那么用一條完整的鏈路來表達就是：

了解完表單的結構關系知曉利弊后，那么應用在我們實際的場景中表達就是如圖所示：

封裝密度高且信息密度低

△ 圖中案例，僅做示例說明

將一個復雜的任務表單，進行封裝后，看起來任務量是不是也變少了？操作起來也不是很復雜了？

小結：

分析了解表單的結構關系，判斷表單，尋找共性的內(nèi)容，將他們封裝為一個卡片，也可以封裝成一個組。主要的目的就是減少用戶認知負擔，提升操作/使用效率。

如何判斷采用哪種布局方式？

關于使用何種布局方式的判斷，應從信息的復雜度和關聯(lián)性兩個維度去梳理。根據(jù)信息的復雜度和相關性模型，選用相應的信息呈現(xiàn)方式，選用合理的布局方案來承載詳情頁的內(nèi)容。

1. 信息的復雜度和相關性模型

△ 來源：Ant Design；來源鏈接： https://ant.design/docs/spec/research-form-cn

2. 區(qū)隔方式

根據(jù)各個信息之間的相關性，判斷各個信息模塊之間的親密度，通常情況下，相關性強的內(nèi)容盡量靠近，相關性弱的的內(nèi)容盡量拉開層次。

• 不通欄分割線：將相關內(nèi)容分開；
• 通欄分割線：將內(nèi)容分成多個部分；
• 卡片：放置一個主題；
• 頁簽：對象描述信息最頂層組織方式，如按版本組織、按意圖組織、按階段組織；

△ 來源：Ant Design；來源鏈接： https://ant.design/docs/spec/detail-page-cn

3. 注意事項

• 表單內(nèi)容數(shù)量 <7 項，不建議分組；
• 表單內(nèi)容數(shù)量 7~ 15 個建議分組；
• 表單內(nèi)容數(shù)量 >15 個建議使用頁簽分組或采用分組標題欄展開收起樣式。

文章來源：優(yōu)設網(wǎng)       作者：交互思維

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

在 C 端設計中，不管是給車載客戶端、手機客戶端、電腦客戶端設計界面，都有比較具體的規(guī)范需要我們學習和遵守。

而唯獨 B 端設計，或者說網(wǎng)頁設計，我們在網(wǎng)上是找不到具體詳細的規(guī)范資料的。因為無論是螞蟻的 AntDesign 還是 Element、Clarity 等 B 端設計系統(tǒng)，其規(guī)范都只是針對自己這套產(chǎn)品的設計說明。

當我們不使用這些框架，要完成自定義設計，那么新人就完全不知道該怎么下手。所以，今天這篇內(nèi)容，就是針對 B 端設計所需具備了解的基本規(guī)范進行說明。

幫助大家快速了解和掌握 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ī)范內(nèi)容包含下面這些模塊：

• 布局規(guī)范
• 色彩規(guī)范
• 字體規(guī)范
• 圖標規(guī)范
• 控件規(guī)范
• 表單規(guī)范
• 表格規(guī)范
• 動效規(guī)范

規(guī)范的解釋，會涉及到不少網(wǎng)頁前端制作的知識點，建議立志在 B 端進行深耕的設計師，都要掌握 HTML + CSS 這些前端知識。

我們過去做過這個系列的詳解，可以通過下方的鏈接查看：

還要聲明一點，規(guī)范中總結的內(nèi)容，包含 “規(guī)則” 和 “建議” 兩種類型，規(guī)則指的是瀏覽器、代碼等限制產(chǎn)生的硬性規(guī)范，而建議則是我根據(jù)自己經(jīng)驗整理出來便于大家理解的內(nèi)容。

在自己的項目中，如果出現(xiàn) “建議” 無法適應的情況，那么完全可以根據(jù)實際場景來做決策，不需要拘泥于我給出的數(shù)值和限制。

下面，就開始進入正題吧！

B端布局規(guī)范

首先，我們來解析一下 B 端布局的規(guī)范，即界面排版應該遵守的基本原則。

在前端 HTML CSS 的知識中，需要定義不同 DIV（或其它標簽）的長寬數(shù)值，并將這些大小不一的矩形進行排列、移動、嵌套，來實現(xiàn)界面的視覺樣式。

換句話說，所有置入畫面中的元素都包含一個矩形的外邊框，無論是文字、圖標、圖片、按鈕、標簽還是符號。

所以，在界面的布局中，無論我們使用什么樣的內(nèi)容、字段，對于前端的頁面來講都只是無數(shù)矩形的排列過程。我稱這種布局的設計思路為 “矩陣布局法”。

矩陣布局法是設計方式和前端開發(fā)方式的統(tǒng)一，提升開發(fā)階段實現(xiàn)設計稿的效率和準確性，是每一個專業(yè) B 端設計師都需要具備的素養(yǎng)。

在此基礎上，我們還有幾個統(tǒng)一的原則需要遵守：

• 數(shù)值的使用標準
• 固定和響應尺寸
• 常用的界面布局

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ù)來完成，當你覺得元素的長或?qū)挷缓线m，就對它進行 4px 的增減，比如下面的案例：

要警惕的是，4px 的基準，是針對元素視圖邊框的值，文字字號、圖標柵格等次級內(nèi)容，并不會受到該原則的影響。且該原則只是一個設計基準的 “建議”，而不是限制，在特殊場景中可以選擇打破它。

2. 固定和響應尺寸

使用 4 的倍數(shù)完成設計，并不能解決 B 端設計中的所有尺寸問題。因為在 B 端的實際應用中，我們會加入響應式的邏輯，即頁面元素尺寸隨瀏覽器窗口的變動而變動。

所以，在設計 B 端界面元素的時候，我們要考慮兩種場景，固定尺寸和響應尺寸。

固定尺寸即不管環(huán)境發(fā)生什么變化，它的大小是定死的。比如圖標、標題、LOGO 等元素。而響應尺寸，則是一個 “未知數(shù)”，是需要一定的計算規(guī)則 “求得” 的。

比如還是搜索欄的案例，搜索框響應尺寸，而搜索按鈕是固定尺寸，那么在不同的寬度下面，它們顯示的效果如下：

要理解響應式尺寸對應規(guī)則，除了了解 CSS 中 Width:auto 屬性值的使用外，最簡單的就是搞清楚 UI 設計軟件中的響應式布局功能。

元素是響應還是固定尺寸是我們在設計過程中就做后決定的，而不是等設計做完以后再看圖說話。所以了解固定和響應尺寸的內(nèi)容，在我們定義組件的過程中就要通過軟件的響應式功能進行設置，并需要在后期的標注和文檔中進行說明。

3. 常用的界面布局

最后，就是 B 端界面設計使用的主流布局形式了。雖然網(wǎng)頁因為畫布比手機大得多，設計的靈活性更高，但在 B 端中可以應用的布局形式也不多，只有固定的幾種。因為 B 端頁面布局中有幾個常用需要預留的坑位：導航、標題欄、工具欄、內(nèi)容區(qū)域。

主要使用左右或上下布局兩個方向：

左右布局的形式，通常是左側作為導航區(qū)域，頂部作為工具欄使用。這種做法通常是因為系統(tǒng)內(nèi)模塊較多，需要的導航數(shù)也多，用戶需要經(jīng)常切換到不同模塊中去，所以左右分欄的布局可以很好的提升操作效率。

而上下布局中，則是面向一些處理場景、功能比較簡單的平臺，導航模塊少，且切換的頻率不高，主要的操作都集中在內(nèi)容區(qū)域的設置上，沒有邊欄的影響還能提高操作的專注性和效率。

要使用哪種類型的布局，需要根據(jù)當前的項目功能做決定。但即使選擇了其中一類，也并不代表我們的工作就結束了，還需要在這個布局的框架下做進一步的規(guī)劃。

比如，我們需要制定內(nèi)容區(qū)域多欄設計的比例劃分、復雜表單填寫系統(tǒng)中的內(nèi)容引導欄、列表條目展開的側邊欄形式等等……

每套項目都需要先確定頁面的布局框架，然后再開始針對具體頁面、業(yè)務內(nèi)容進行設計，保證整套系統(tǒng)操作方式的一致性。

文章來源：優(yōu)設網(wǎng)       作者：超人的電話亭

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

隨著項目的不斷發(fā)展，設計團隊在不斷壯大，設計師之間的協(xié)作也越來越多，相應的溝通和協(xié)作成本在不斷增加。如何才能更高效的合作，并把設計質(zhì)量和一致性做的更好，是我們需要去解決的問題。

本文將以 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ā)沒法全局調(diào)用代碼樣式，有些樣式可能需要反復復制使用，耗時費力，并因此產(chǎn)生的代碼臃腫，還會直接影響產(chǎn)品性能。

解決之道：云端組件庫

鑒于設計師目前多使用 sketch+xshow 的工作流程，而 xshow 正好也具備云端管理的能力，故決定以 xshow 作為橋梁，建立一個基于 sketch+xshow 的云端設計組件庫，以非常低的遷移和學習成本完成流程優(yōu)化。

優(yōu)化后的流程是把 sketch 本地組件庫通過 xshow 上傳至云端服務器，設計師通過 xshow 云端功能添加到 sketch 中，并在設計文件中嵌入這些云端組件。

這樣做能很好的解決上面說的問題：

1. 更新通知自動化

更新文件不用再靠人工在群里發(fā)通知，設計師也不需要去找文件，而是在 sketch 中會自動進行提醒。一旦有更新，會在右上角顯示提醒消息，設計師只需要點擊提醒，下載最新組件文件即可完成更新。

2. 全局組件一鍵更新

當更新組件庫文件后，界面中所有之前使用過云端組件的控件元素都會自動比對更新前后的差異，方便設計師判斷是否更新。這種更新最厲害的地方在于，更新是全局的，也就是一旦你確認了更新后的內(nèi)容，所有界面都會自動按規(guī)范進行更新而無需設計師再逐個篩查。這樣做既能保證設計稿的一致性，也能大幅提高設計效率。

3. 開發(fā)效率和質(zhì)量大幅提升

開發(fā)通過代碼把一些常用的樣式進行封裝，在一些高度復用的場景中直接調(diào)用。一方面可以通過調(diào)用的形式減少重復樣式代碼的復制，精簡代碼，降低軟件包體積，另一方面也可以減少不必要的工作量還能方便后期維護。

實踐之行：云端組件庫搭建

想要高效解決問題，正確的方法很關鍵，這里我們用到的方法就是原子設計理論。2013 年前端工程師 Brad Forst 將此理論思想運用在界面設計中，形成一套設計系統(tǒng)，包含 5 個層次：原子、分子、組織、模板、頁面，這套理論為組件庫的搭建提供了思路和方法。

在實際搭建過程中，因為組件庫的搭建工作量往往比較大，需要先明確流程和分工，主要包括以下幾個關鍵步驟：

1. 明確工具流程

因為是搭建云端組件庫，所以首先需要有一個云端工具進行管理。針對以 sketch 為基礎的云端組件庫來說，常用的工具流程包括 sketch cloud，各類云同步盤，第三方云數(shù)據(jù)庫自主部署等等。我們選擇的 sketch+xshow 工作流也是基于 xshow 具備云端管理功能，與其他流程本質(zhì)上是一樣的，大家根據(jù)項目實際情況合理選擇就好。

2. 全面匯總并分類

按原子理論由小到大來對常規(guī)控件進行匯總并分類。對于 QQ 動漫項目來說，常見的控件類別包括：顏色、字體、圖標、按鈕、導航、狀態(tài)欄、彈窗、列表、標簽等等。每個項目所需要整理的組件不盡相同，原則就是對要復用的元素進行整理。

3. 制作樣式模板

為了便于維護和提升合作效率，將組件庫拆分為幾個不同的獨立文件，每一個文件由組件庫搭建小組成員獨立負責，減少混亂。

如果是有多位設計師參與時，因為組件庫的元素存在相互調(diào)用的情況，會遇到到底誰先做的問題。解決流程分 2 步：

1. 由一位設計師把組件庫的原子級組件（主要包括顏色，字體，圖標）先做好，并建立分類組件標準模板，其他設計師在這些模板基礎上進行完善，保證組件庫在邏輯層級統(tǒng)一。
2. 如果過程中遇到，自己組件中需要調(diào)用對方組件，比如某個圖標沒有在圖標組件文件中，但自己的列表中又需要，可以先用其他組件中的圖標代替，等圖標組件庫更新后，再同步更新這里的組件即可。

QQ 動漫組件庫一共分了 5 個不同文件，分別是：基礎、操作、導航、反饋和內(nèi)容。

4. 搭建本地組件庫

1?? 確定命名邏輯

提升設計效率，是組件庫存在的重要目標之一，而合理的組件命名起到了至關重要的作用。組件的名稱要保證通用性，太獨立的命名可能不夠兼容其他場景，也會讓使用的同學產(chǎn)生誤解。

對于組件命名，要多與使用的設計師一起探討，因為每個人的習慣都不同，方不方便因人而異，所以需要做一些平衡。

比如在做圖標命名邏輯的時候，糾結于要先按尺寸分（圖標/序號類別/尺寸/圖標名），還是按功能分（圖標 / 序號類別/尺寸/圖標名/狀態(tài)），不斷調(diào)整多次，這時候就需要找大家一起探討，怎么才是最方便的。

命名的方法是盡可能按共用屬性由多到少的順序來整理。比如，圖標共用的尺寸屬性多，就把尺寸歸到上層；如果圖標功能分類比較集中，那就把功能名稱歸到上層。根據(jù)實際項目和設計師使用情況的不同，會有不同的命名形式，命名確保效率就好。

在梳理組件庫結構命名時，先用思維導圖描繪一份結構化地圖，方便前期討論及調(diào)整。明確層級關系后，用在多人合作時進行參照，從而統(tǒng)一組件庫層級。在做這份結構化地圖時，需要列好全部分類、層級、具體名稱及示例。

2?? 顏色

顏色庫的設計，需要將產(chǎn)品中可復用的顏色匯總并分組，比如品牌顏色，按鈕顏色，圖標顏色，裝飾顏色等等，這樣可以使得用到顏色屬性的組件更加靈活。顏色的命名規(guī)范是：序號_功能/淺色 or 深色/序號 _ 屬性 / 序號 _ 狀態(tài)。例如，04 _ 按鈕色/淺色/01 _ 常規(guī)按鈕/04 _不可點

3?? 字體

字體樣式需要做全字重、顏色和左中右三種對齊方式，因為按目前 sketch 的組件邏輯，還不能修改嵌套字體的屬性。這些屬性可以對應到組件的命名上，字體組件的命名規(guī)范是：大小/序號對齊方式/屬性/用途，例如 42px/1 居左/常規(guī)/主文本。

邊做邊檢查。由于文字組件需要的命名特別多，很容易出錯，所以建議是最好每做一組，就檢查一遍。檢查的時候打開組件樣式，如果在組件預覽中發(fā)現(xiàn)重復或者結構不對的地方，及時調(diào)整。

多行文本行高要注意。文字的行高要尤其注意，一定要在前期檢查好尤其是多行文本的行高。如果行高前期設置不對的話，非常影響后面文本的擴展性，在用到多行文本時會遇到麻煩。想回頭修改的話，因為是最底層的原子需要逐個調(diào)整，所以代價是巨大的。

所以一定要開始設置字體組件之前就確定好行高，比如 QQ 動漫組件庫中的文字行高統(tǒng)一用文字大小的 1.5 倍，并取偶數(shù)作為文本的行高。當然，這里的行高也不是完全規(guī)定死，有時候也需要視情況而定。

文本的粗細。文字的粗細也是要在一開始的時候就要設置周全，最好是給所有字號的文字都設置好不同粗細的組件，盡管可能開始用不到，但會提升文字的擴展性，不然后面添加就會比較麻煩。

4?? 圖標

圖標組件最關鍵的地方在于使用邏輯和圖標規(guī)范。比如，我現(xiàn)在做的圖標邏輯是：圖標/類別/使用場景/具體名稱/尺寸/不同狀態(tài)，主要是按使用的頻次來整理的。也可以有其他邏輯方式，以方便使用為準。

圖標規(guī)范也會影響組件庫的整理和日常使用，在做圖標組件時，需要定義好圖標的最大范圍和最小范圍，嵌套起來使用才不會出錯。圖標的規(guī)范要嚴謹，同一個尺寸下的圖標視覺面積要保持一致。不然在大小這個層級就會出現(xiàn)，雖然是相同尺寸的圖標切圖范圍，但圖標的體量看起來卻并不一致。

將純色或漸變圖標中的顏色剝離，并使用顏色組件進行嵌套，這樣做既方便替換又能減少圖標組件庫的復雜度。

對于圖標的多種狀態(tài)，建議做在同一個層級中方便選擇。

對于圖標來說，直接對畫板設置切片即可，不需要再加切片框。如果你的組件庫之前用了很多切片來導出圖標，可以用 Automate 插件直接清理或設置全局的切片，非常方便。

5?? 控件

有了顏色、字體、圖標這些基礎元素后再來制作組件就會相對簡單很多，只需要通過拼裝把通用性強的組件做出來即可。這里可能需要注意設置好布局方式，讓內(nèi)容盒子隨著內(nèi)容的變化而變化。新版 sketch 的布局設置相對于老版本的確實會方便很多，理解起來很容易，所以這就不多討論了。

6?? 代碼組件化

在開發(fā)側進行前端 UI 組件庫的封裝，實現(xiàn)從設計到開發(fā)的樣式統(tǒng)一，提升效率和質(zhì)量。

在優(yōu)先級上，代碼組件化跟 UI 組件化可以同步進行，開發(fā)先寫好框架，然后隨著 UI 組件化的逐步確定，代碼也進行相應補充。

5. 構建云端組件庫

本地組件庫構建完成后，即可通過 xshow 上傳至云端，再由 xshow 直接添加到本地 sketch 中，完成整個使用流程的搭建。

6. 權限與維護

為了更好的維護云端組件庫，避免更新混亂，需要成立組件庫小組，只允許組件庫小組成員有編輯權限。日常需求中，如有新增組件，需提交給組件庫小組成員審核，通過后方可上傳至云端組件庫。

在制作組件文件的過程中，需遵循先自測后上傳的原則，避免在上傳后發(fā)現(xiàn)一些諸如命名錯誤、遺漏、嵌套混亂等問題，造成麻煩。

7. 編寫規(guī)范文檔

文檔的作用是給相關同事查閱，形成標準化使用流程。一些在組件庫中難體現(xiàn)的設計說明、未形成組件元素的使用規(guī)則或一些常見問題都可以寫在文檔里。

8. 問題與技巧

1??善用插件，提高效率

我其實是一個非常喜歡“偷懶”的人，但凡需要重復，批量的工作，我都覺得應該有更聰明的辦法。這里我推薦幾個我在做組件庫中經(jīng)常用到的小插件。

2??不斷測試

組件庫的設計過程中，一定要邊做邊測試，尤其是在前期確立邏輯的時候，要不斷檢測是否真的好用。

3??內(nèi)容更新權限與維護需要專人專辦

舉例：假設我負責字體，那么后續(xù)所有的字體更新相關都只找我來修改。若其他人在組件庫內(nèi)找不到相應的組件搭建頁面而又特別高頻使用，需要向組件庫小組提出申請，并由對應組件庫管理員進行更新，不可以私自修改組件庫內(nèi)容并上傳。

總結

組件化思維不僅僅應用在 UI 領域，甚至在各行各業(yè)都需要建立組件化，比如對于一些時效性非常強的新聞產(chǎn)品，就需要針對突發(fā)事件內(nèi)容模板化，以期能第一時間發(fā)布；如果想追熱點，組件化能夠使得產(chǎn)品具備隨時跟進熱點的能力，提升市場競爭力等等。

組件化是一種思維模式，也是如今設計師必不可少的能力。通過組件庫提升效率能夠讓設計和開發(fā)有更多的時間去打磨產(chǎn)品細節(jié)，從而打造出對用戶更加友好的產(chǎn)品，賦能設計的價值。

文章來源：優(yōu)設網(wǎng)      作者：騰訊ISUX

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