最近負責的新項目快上線了（感覺我好像一直在做 0-1），給大家總結了5個一定會遇到的新項目盲區及最新的解法，希望能幫助大家在交付開發前就順利完成設計輸出。
2020 年 4 月后，我們在設計 iOS 登錄界面的時候都知道必須加上蘋果官方強行要求的 Apple 賬戶登錄按鈕，但關于這個按鈕的設計規范其實有比較硬性的規定，沒有注意的話到了開發還原的時候就容易踩坑。
在國內的 iOS 登錄設計中通常突出的主流登錄方式是“微信”，手機登錄以及其他的第三方登錄都會以更弱一點的視覺方式呈現。
蘋果官方是允許對 Apple 賬戶登錄按鈕進行一定的自定義的，其中就包含將其弱化為一個圓形的圖標按鈕，只是圖標與圓形按鈕的大小比例是官方固定的比例（這個大家直接下載官方提供的圖標，它是自帶留白的區域的，保持圖標與高寬一致就符合要求了）。
而國外的 iOS 登錄設計中通常沒有那么多的第三方登錄方式并存，主要的“Facebook”與手機登錄通常會與 Apple 賬戶登錄按鈕同一級出現在界面中。
這個時候需要特別注意的是，蘋果官方對于這種大按鈕的限制主要在于 3 個部分：
剩下的按鈕樣式，比如顏色和描邊也非常有限，只可以使用白色填充黑色描邊與純黑色底這 2 種。
想了解更多具體內容，可以參考官方貼：https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
還記的早幾年做安卓項目的時候上架應用商店的啟動圖標輸出還是和 iOS 差異不大的，基本就是尺寸換換。這次輸出啟動圖標，被安卓的開發大大告知，安卓可以出這種帶動效效果的啟動圖標了，它的原理和效果，如下圖：
實現這個效果的設計配合輸出也很簡單，只需要整理一下的具體啟動圖標輸出就可以：
1. 啟動圖標（前景，不帶背景的）-108dp（324px）
當然以上僅針對純色背景，可以與 logo 主體輕易分隔的啟動圖標。如果是混為一體的話就需要調整輸出方式為以下：
想了解更多具體內容的鐵汁，戳底下官方傳送門：https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
這次新項目又遇到了開發中改稿的問題，大部分都因為全屏的背景圖切圖大小問題。
個別全屏視覺的界面，比如閃屏、登錄頁、音視頻語音等等，我們通常設計時不考慮切圖的大小問題就會比較放飛去設計。
但實際情況是一張全屏的花色 3 倍 png 切圖基本都在 2M 左右，就算把壓縮率提到 80%+（市面上大部分壓縮軟件的壓縮率都很有限，比如大家常用的 tinypng、pp 鴨等），就算你重復壓縮，也有至少 200 多 KB，遠遠超出開發 100k 以內的切圖大小限制。
所以不得不要求我們在輸出格式的時候拋棄 png 格式，啟用 JPG。
不過實際設計時候我們可能仍然會遇到不能用 JPG，必須用 PNG 格式的情況（透明度蒙層），那么建議大家可以嘗試以下 2 個小技巧：
最后不想屈服于樣式限制的鐵汁，一定記得提前輸出格式大小康康會不會超標嚴重（盡量控制在 100k 以內），不然無法落地再好看也沒有用咯。
目前關于移動端界面里個別小動效的導出比較主流的幾種格式是：Gif、逐幀圖、Lottie（Jason）、Webp、Apng。
Gif、逐幀、包括前幾年流行的 Lottie 大家應該都比較熟悉了，這里稍微科普 2 個陌生一點的格式：
目前我覺得性價比最高的就是 webp，它的優勢主要在于：
唯一的 2 個問題在于：
我度娘過一些導出 webp 的方式都不是很好用，問了我司的動效設計師，推薦一個比較簡單靠譜的方式分享給大家：
1. 先從 AE 導出逐幀圖（記得需要循環的動效做好循環）
不知道如何到逐幀圖的看這里：渲染→渲染設置→格式→選擇“PNG”序列→導出即可
2.下載 isparta
3. 直接將 AE 導出的逐幀圖文件包拖到 isparta 里導出 webp 格式（可選）
設計交付的協同平臺現在市面上很多，很多大廠也有自己內部的協同平臺來承載設計交付，俺們豬廠用的叫 dbox（非常滴不好用），在強推之下開始申請經費改用 Figma 了。之前為了更換協同平臺，把交付的協同平臺都做了一番調研，這里給大家直接看表格吧。
看完圖大家就會發現除了 Figma 大家的使用情況不會差很多，差的主要還是錢?？偟膩碚f的建議就是，如果已經從sketch改用Figma的土豪團隊就可以直接分享Figma文件鏈接給開發搞定切圖標注以及文件存檔這2件事兒了。
如果還在用 sketch 和 XD 的鐵汁，交付型的協同平臺我個人比較推薦 Zeplin，雖然有的人會說它服務器在國外很卡，我覺得其實還好吧，同時 Zeplin 近幾年還解決了 Win 系統適配的問題。
然后最后小吐槽下騰訊的 Xshow。一開始我覺得它是最香的，因為高清度、流暢度到美感幾乎都比較完美。一直到我發現了它居然是個完全開放的交付協作平臺，也就是別人知道你的賬戶 ID 之后就可以搜到你并看到你的所有項目文件，瞬間安全系數降為 0。作為一個明顯對標企業級的協作平臺這么瘋狂的植入社交功能，到底是企鵝的社交基因太強大還是怎么肥四？
文章來源：優設網 作者：Nana的設計錦囊
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計系統基本就是組織如何構建數字產品的故事，在公司內部，設計系統改善了產品團隊之間的協作，而設計和工程團隊之間面臨的一個常見問題是：共享品牌準則和界面信息。在開發過程中，應該遵守還原設計的內容，但是我們都知道這并不是那么簡單。
從目標達成的角度來說，設計規則的創建與執行同樣重要。我們期望參與產品的每一個角色，都能記住設計規范，結合設計原則（Perceptual Pattern ）最終達成界面展示在用戶面前的樣子。這也就需要設計系統內，有一套控制性強、拓展性高的方法來維系產品的風格呈現，也就是我們今天將要討論的設計變量（Design Token）
什么是設計變量（Design Token）
在數字產品的概念中，許多中心和微小的UI信息片段將在多個平臺上使用，被稱為：設計變量（Design Token），他們是設計系統中設計語言的構建塊，也是設計決策的呈現。他們維護核心樣式的所有值：間距，顏色，版式，斷點，動畫，字體，平臺比例尺，組件狀態等，最終通過數據表示。命名規范和結構化的約束，可確保產品體驗的統一度與靈活性，更進一步可為產品打造賦有情感的品牌認知。
而對于SaaS類或者APass類的公司而言，設計變量還可提供給多個合作商所用，滿足多種定制化的訴求。
在以往的真實產品中，示例（如下），設計人員會發現，實現和樣式管理的環節在開發過程中是完全斷掉的，設計語言轉化為開發的語言時，缺少風格系統完整性的延續。我們通常看到的style代碼都是一些幾乎沒有體感的參數，且公司產品體量越龐大復雜，想要全局迭代就越是痛苦。
但如果我們將這些參數封裝起來，用語義化的方式來進行描述，就增強了“系統下的畫面感”，如“font-size-level03”、“border-distinguish-background” 等，就是設計準則下情景化的歸類與描述。
但語義命名只是一個最終呈現，真正讓設計與開發者都能”讀語義，識運用“。還需要我們在設計系統中建立一整套完整的設計變量對應表，并讓大家對它們有著清晰的記憶。
這里我們將以群核科技旗下，工具設計系統（Tools ）中的設計變量為例，來給大家進行詳細分析。首先在設計原則下，我們引申出設計變量規則的制定原則：精準、靈活、易讀。
意指歸類與對象的精準性，配置化的靈活度，語意命名上的易讀性。
對所需范圍進行定義，命名規則與前端書寫規則達成約定。
變量的“結構完整”，有助于設計與工程團隊在長期維護上，提升靈活度，3層繼承結構，很大程度保證了“精準”“靈活”這一原則。
主題定制
我們找到產品界面中定義“核心樣式”的部分，例如顏色，字體大小，空間，動畫，陰影，斷點等等。通過這些具有統一命名規則的實體，用于代替硬編碼的值，直接集成到設計系統下的組件庫里，也在日常的產品界面開發中使用。
通過繼承，別名變量起到了銜接全局變量和指定變量的作用，指定變量影響了最終的樣式呈現，從而實現主題功能。
單個主題可供多個產品團隊使用，主題本身也提供可配置化，即擁有不同的主題外觀體驗能力——如“客戶訴求”、“用戶自定義”，“產品定位差異”等，也可通過創建新的主題，完成新的對應表，繼而產生相應的風格模式，例如“暗夜/日光模式”或“舒適/緊湊”布局模式，“企業品牌”定制模式等等。
主題功能在產品中體現
跨平臺呈現
多端設計是未來發展趨勢。最新的iPadOS 14還為許多應用程序添加了側邊欄，包括音樂，照片，文件和快捷方式，更加高效。它使iPad更具Mac感，也降低了學習成本。
目前我們很多產品都要考慮在 Web、iOS、Android 上設計。如果有新的功能增加，設計和開發會消耗較多的時間在上面，而且很難去統一把控。
Design Token 在跨多端設計中不僅是存儲樣式的變量，更是一套用于各操作系統間進行翻譯的口令。我們希望通過變量來控制一些樣式的屬性，在不同終端做到自動化的映射。
假設在移動端正文字用14x，而在pc端為12px，雖然它們值不一樣，但他們都是使用的color_text__primary，在不同終端變量會自動根據設備來取不同的值，通過一套設計就能實現多端運行，提升效率節約成本。
擁有了強大的設計變量樣式庫之后，它對我們的工作流程將帶來什么革新呢？
顯而易見的是，團隊將節省非常巨大的工作量，我們不再依賴單個工程人員的修改質量，且能更大程度減少跨組依賴。此外，早期設計工具無法與設計變量生成器進行本地通信，我們通過優化Sketch插件，完成了變量命名數據的輸出，使得工程人員可直觀看見變量名稱。這將為設計驗收節省大量時間。
產品的大批量的歷史問題也得到解決。數字化的自動識別效率遠高于痛苦的人工調整，設計師和產品團隊都將收獲全新的迭代方式，這是有歷史意義的一刻。
簡而言之，設計變量作為一個管理風格樣式的有效手段，可集成主題管理，對跨平臺開發也同樣起到作用。簡化團隊合作協作流程，提升迭代維護效率。尤其適用于需要構建多個Web應用程序和跨終端應用程序的組織。
文章來源：站酷 作者：酷家樂UED
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著移動網民數量增速放緩，流量紅利逐漸消退，平臺競爭愈發白熱化，優質創作者成為平臺的必爭對象。在后流量時代，抓住優質創作者的核心是平臺流量所能附加的多元價值，因此對流量的深耕與私域的變現成為了必定的解題走向。
面對這樣的趨勢，研究者應該如何走進創作者的世界，深入洞悉他們的私域運營需求？我們在對多名短視頻創作者的研究中沉淀了一些思考。
為什么關注私域變現？
——理解行業和業務是選題關鍵
行業趨勢：創作者的收入結構正在變化
短視頻創作者的傳統收入來源是依靠播放量獲得的平臺流量分成。但隨著短視頻玩家的不斷涌入，公域流量瓜分緊張，基于粉絲沉淀的私域變現成為創作者多樣化收益的來源。
從行業公開信息以及我們所接觸的創作者的鮮活案例中均能發現，非流量分潤的收入占比正在提升，多元的私域變現已成為他們收入的重要組成部分。
公域流量紅利見頂
私域流量收入可觀
業務思考：平臺對創作者多元變現需求越發重視
短視頻領域目前呈現創作者多平臺分發的趨勢。我們在研究中發現，多平臺混合運營的作者占比已接近七成；頭部作者也是如此，抖音和快手百萬粉以上的作者中有三成為雙棲作者。創作者精力被多平臺瓜分，而影響創作者對平臺的重視度和運營投入度的最核心因素就是經濟收益。
在“主陣地+重點運營平臺+純分發平臺+其他關注平臺”這種金字塔型的混合經營模式下，平臺只有向塔尖挺進，才能留住創作者。于是，支持創作者私域營運及多元變現也成為業務后續發力的重點方向，我們便順理成章的將研究聚焦在這一主題上。
經濟收益影響創作者平臺投入
私域運營拉動平臺成為主陣地
研究誰？——找準關鍵角色
私域運營是一個相對宏大的研究主題，要讓研究具備可行性，就要鎖定明確且合理的研究對象。找準關鍵角色，能夠起到讓研究事半功倍的效果。
考慮等級能力差異，研究鎖定頭部作者
內容創作的生態中，作者等級是影響需求差異化的核心變量。新手作者大多是視頻創作小白，還處在能力突破和粉絲積累的初始階段，更加關注成長收益，即創作能力的提升和流量的增長。而偏頭部作者已經積累了一定的創作經驗和粉絲基礎，更在意經濟收益，對于內容價值最大化需求強烈。
頭部作者也往往意味有著更好的粉絲基礎、更多的實戰經驗、更深的行業理解，對研究而言有更深的挖掘價值，也能在更短的時間內輸出更多有效信息。所以本次我們圈定頭部作者作為目標首選。
考慮不同垂類覆蓋，避免信息產生遺漏
短視頻的創作和運營日益走向細分化和垂直化，不同的細分垂直領域，也存在不同的變現方式和需求。因此，垂類領域是創作者研究中不可忽視的另外一個核心變量。
目前短視頻多元變現方式主要有電商帶貨、付費專欄、咨詢服務、打賞送禮等；我們在選擇創作者的內容垂類時，也有針對性的確定生活、家居、教育、情感、影視五個垂直方向，覆蓋所有變現類型。
研究什么？——梳理私域變現流程，搭建研究分析框架
在具體執行前，研究者首先要確定研究的關注重點，劃定研究的邊界。前期需要做大量的案頭研究工作，充分了解行業現狀。短視頻領域研究中有一些常用的信息獲取渠道，略作梳理，以供參考。
充分的信息獲取決定著研究的下限，能為研究洞察打好基礎，也能幫我們形成后續研究的系統性框架。我們基于私域運營的主要流程梳理，提取出影響私域運營效果的四個核心環節，形成最終研究產出的分析框架，后續關注創作者在該框架下各環節的具體需求及問題點。
如何理解創作者？
——5種思路，讓深入分析成為可能
創作者對于需求的表達往往是主觀和模糊的。對于B端創作者而言，由于具有更明確的平臺利益訴求，他們對于需求的表達甚至會表現出更多的“私利”和“怨念”——“我想要更多的流量分成”，“我想要完善的運營服務”，“我辛辛苦苦做內容，卻沒有收益，真讓我寒心”……
但是作為平臺，流量和資源的有限性決定了無法彌合多方矛盾，滿足無限需求。那么，作為研究者，我們不應該只簡單傳遞“用戶要什么”，而應該從用戶需求出發，剖析需求背后的形成原因和深層問題，告訴業務“為什么會這樣”以及“我該給什么”。
下面我們將以研究中的一些發現為例證，提供幾種研究分析思路，讓大家更好的理解如何還原創作者需求的本質。
一.不僅呈現事實，更要有底層思考
平臺的流量分配已經從粗放式的內容引入時代發展到精細化的內容建設與資源分配時代，策略不斷積極調整，向更多優質的內容傾斜。創作者們在尋求流量更持續、有效的利用時，也越來越意識到優質內容有著更大的增值空間，希望在平臺的引導和扶持下，生產更優質的內容不斷“圈粉”。
然而不同的平臺有不同的調性和內容偏好，這時候創作者困惑的是：到底何為優質內容，我又該如何去創作平臺喜歡的優質內容？這就需要平臺通過激勵政策和創作活動的引導給出答案。
在研究者的分析中，我們不能僅僅暴露“平臺政策不清晰”的問題，也不能只對競品的做法做簡單的羅列和復制。值得深入思考的是，現有政策和用戶需求的差距點在哪，后續優化的原則和方向是什么？
我們基于對于作者需求的理解和競品差異點的分析，提煉出平臺政策引導的三個優化方向：
1.垂直化：內容消費需求日益多元化，平臺創作激勵活動也要深入覆蓋更加多樣化的垂直細分領域；同時，為了增強創作者感知，應將各種激勵計劃顯性化進行包裝，清晰傳遞平臺扶持的垂類和方向。
2.日?；?/strong>：平臺創作活動應當多樣且高頻，充分契合不同領域創作者的興趣點，且需具備較強的時效性。
3.矩陣化：內容創作不再只是作者的單打獨斗，更需要在重大運營事件上聯合平臺和MCN機構進行內容共建、資源聯動，最大化內容的影響力。
二.不僅要看自身，還要看行業先行者
在短視頻賽道上，存在著諸多優秀的先發競爭者。競品在平臺管理、運營服務、產品功能等諸多方面都能為研究提供較好的借鑒作用。在研究中，作者的表達只是我們研究的“引子”，關注競品、對標行業標桿、分析差距，才能夠對作者需求形成更準確的判斷，對滿足需求的方式和重要性層級形成有效啟發。
以平臺運營服務支持為例，競品平臺的做法為我們提供了良好的借鑒意義，也形成了行之有效的業務參考。平臺與作者的理想關系是共贏共生，在服務過程中，需將平臺的玩法透明地傳遞給作者，讓作者對于如何運營、如何變現心里有底，建立“只要跟著平臺走就沒錯”的信賴感，與平臺之間形成更強的依存關系。
三.關注生態各角色，納入C端視角
內容創作生態包括平臺、B端創作者、C端用戶三種主要角色。創作者運營的目標受眾是C端用戶，對用戶更有吸引力的內容才更容易形成粉絲沉淀。因此，研究B端創作者，B-C聯動的分析視角尤為關鍵。我們可以從“C端用戶要什么”，推導出平臺需要幫“B端作者做什么”，進而給出更貼合創作者實際運營情況的賦能措施。
研究發現，在粉絲沉淀環節，從C端視角出發，內容是形成作者關注關系的關鍵，也是塑造作者IP形象的關鍵。那么，對應到對B端需求的滿足上，平臺就應該為其優質內容的露出提供更多能力支持，包括內容的自主管理、內容的連帶互通功能，最大化發揮內容的價值，充分賦能創作者。
四.聚焦群體差異，對細分需求保持敏感
不同類型的作者有不同的訴求，研究中需要更多關注差異、滿足差異。
以變現轉化環節為例，建立用戶信任感是創作者的一大需求。商業社會、信任為王，信任是形成購買的起點。平臺要重視對創作者身份的包裝與強化，外露關鍵信息，快速建立用戶對作者的信任感，從而促進付費轉化。在這個過程中，不同垂類下促成用戶下單購買的信息是不同的，作為研究者，應該對差異化的信息需求保持敏感。研究發現，電商購買中用戶更看重優惠折扣和交易信息；而專欄購買、付費咨詢，則更需要強調身份背書、作者榮譽等專業信息，以及增強作者和粉絲的溝通與交流，提升用戶信任度。
基于以上分析，業務在信息外露、增強作者身份形象感知上也規劃了進一步的優化措施，促進用戶付費轉化。
五.不僅看短視頻，還看垂直行業賽道
依托于短視頻平臺的私域變現，本質上還是電商/知識付費，短視頻只是在商品之外額外提供了一個內容展現、IP塑造的自媒體營銷方式。因此，研究視角不能僅僅局限在短視頻本身，更要學習垂直賽道的玩法，如：電商領域對標淘寶、盒馬；知識付費領域對標得到、小鵝通等成熟玩家。他們在其各自領域已經形成較為成熟的變現模式，短視頻平臺在交易閉環的實現效果上需要向這些垂直賽道產品看齊。
縱觀行業趨勢，短視頻平臺也在不斷引入產業鏈上的更多合作伙伴，例如：上游引入電商服務商進行供貨服務和產業帶打造；中游引入內容服務商提供創作者運營能力培訓、代運營服務；下游引入品牌服務商助力營銷推廣，以此提高平臺變現能力，共建生態繁榮。
結語：理解創作者，先要成為創作者
B端創作者的研究相對而言對研究者具有更大的挑戰，需要具備更豐富的行業知識儲備和更深入的問題洞察能力。理解創作者、理解內容創作生態才能為業務提出更切實可行的落地建議。
理解創作者，不能僅僅是走近創作者，而是要成為創作者，親身經歷才能更有感悟，這也是無論做任何領域的研究，作為研究者都應該具有的態度。
短視頻行業正經歷著它蓬勃的生長，未來有著無限的可能性，希望你和我們一起經歷、一起探索，也希望我們的思考能夠為你帶來一些啟發。
文章來源：優設 作者：百度MEUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
全文1萬4千字，講解文字編排有兩個層面的作用。其一，它做了一些傳遞信息的工作；其二，它自身在合理地編排下就會有韻律的美感。
在通常版式設計中，一般是由文字、色彩、圖形三個要素組合而成的。通過這三個要素的有機搭配，從而給人視覺上造成一定的沖擊，激發人們的閱讀興趣。
其次，文字組合編排是構成版式設計中最主要的構成要素，也是傳遞信息的重要的設計手法和策略。字體的選擇是否合適則會直接影響版式的效果，雖然能現在可供選擇的字體五花八門，但是所選擇的字體要能夠與版式的主題相吻合。除此之外，文字的字號也會影響閱讀，在排版時要注意文字信息的等級關系，做到有主有次。
如果文字從發明出來的那一刻起，就是為了記錄和傳遞信息，那在版式中的文字就是通過設計設計手法來更好的傳遞信息。
怎么去理解這句話呢？如果大家看過《王牌對王牌》這節目，里面有個游戲叫傳聲筒，里面的游戲規則是“每隊輪流參賽，每隊任選5名成員，每個成員用隔板隔開，第一人將對手所出題目，演繹給隊友，只能通過音效和動作表達，依次傳遞給下一位隊友，經過三四個人傳遞后最后一名隊友，猜測題目上的信息。猜對得一分，最終積分高的一隊獲勝。”
這種形式像不像設計師的日常呢？老板或者領導有個“牛批卡拉斯”的想法,然后他在想法告訴運營總監或者文策劃總監，然后在由下面的運營/策劃專員做成方案，最后在交給設計師做成圖片來傳遞老板那個“牛批卡拉斯”的想法。
那么文字組合怎么去編排就成為將老板的想法完美的傳遞出來的關鍵要素，為了不南轅北轍，我們需要將文字編排的形成方案，并在實際的工作中通過不斷的實踐去完善，那讓我們一起來了解下文字組編排的技巧吧。
一般的軟件里面都會有字體選擇器，我們需要找想要的字體的時候都是直接在里面去搜索，然后再去點擊使用，那么今天我來看看怎么通過觀察字體家族的特征來找到我們想要的字體吧。
家庭中的所有成員都有各不同的稱謂來辨別身份，在字體家族中也是如此，我們通過不同的前綴后綴的縮寫來區別字體的樣式。
例如：字體前面的LT代表的是萊諾字體公司，如果我們使用的字體前面或者后面帶有LT，那就說明這個款字體是由萊諾字體公司出版的。
當然，我們日?？吹阶煮w廠家也會有很多，例如常見的MS是微軟公司，MT是蒙納字體，ITC是國際字體公司等等，一般字體公司的名稱的縮寫為連著的大寫字母，所以我們看到字體中帶有2-3的大寫字母，我們可以默認他們是字體公司的名稱縮寫。
那剛剛我們看到LT后面還有STD，那個是什么意思呢？STD是英文單詞“Standard”的縮寫，代表著這個字體只支持基礎的字符集，它的字體字符集相對會少點，與其相對應的“PRO”是英文單詞“Professional”，則是代表字符集比較多的后綴。
既然字體家族的縮寫那么多，那我們怎么把它規整好方便記憶呢？方便我們通過不同的前綴后綴來區別字體的樣式。正常的我們講字體家族系統一分為三類，1.字體的寬窄，2.字體的造型，3.字體的字重。
寬窄系統：只有比較大的字體公司去做這類型字體，因為不常用，所以做的就比較少，漢字里面好像漢儀旗黑又寬窄系統，那我們怎么去識別呢，以Ai為例子，如果我們在字體后綴發現帶Condensed，那么我們可以確定這個字體為窄體，以后如果我們在字體后綴發現帶Extended，那么這個字體則為寬體。如果設計中有特殊的需求，需要我們可以通過后綴去識別。
造型系統是為給不同應用場景下字體做區分的，正常的分為：常規體，意大利斜體，空心體，裝飾花邊，老式數字。
常規題：常規體的后面一般帶Roman或者Regular,帶著著這個字體里面最常用也是最適中的字體。
意大利斜體：英文后綴一般帶Italic,這類型的字體一般是專人設計過的傾斜體，比軟件生成看起來更加舒適和諧。例如有的字體公司為了區分窄體的傾斜體，有的也會用這個單詞，oblique,但是意大利斜體（Italic）代表的是常規字的傾斜體。
空心體：英文后綴一般帶Outline,在一些大型的字庫公司設計的字體會有，他打出的字不是實心的，而是空心字類型的，常見會在比較粗的字體上會有，因為這個的字體變成空心字不容易破壞字體的負空間。
裝飾花邊：英文后綴一般帶Ornament，這種類型的字體一般比較少見，只要一個字體的字庫做到比較全的時候，才會考慮開發類似的字體。這個可以理解為字體類的素材，一般的應用場景比較少。
老式數字：英文后綴一般帶Oldstyle Figures，比較明顯的特征是高低不一樣，這類型的字體一般應用在小寫字母的編排中讓數字看起來更和諧。
標題專用字：英文后綴一般帶Titling，這類型的字體在放大后使用看起來比較精致，細節相對比較豐富，但是也有特殊的，例如Caslon字體的標題字用的是540的后綴。所以當找不到的時候我們可以通過細節去分辨。
字重的選擇一般是根據當前的選擇的字體去跳兩個字重去選擇，這樣才會有對比。字重也是我們設計中常用的選字模式。
我們認識了字體家族對我們做設計有什么作用呢，一個字體家族越全面，我們做設計是可以選擇的范圍就越大，也就越方便，所以我們接到需求，需要選擇字體排版的時候，大致看下字體家族，就可以分辨出這款字體是否適合我們去使用。
需要做好文字組合的編排的基礎是需要選擇合適的版面氣質的字體和相對應的中英文混合編排。
中文字體屬于方塊字，具有字體的輪廓性，并且每個字符占據的空間都是相同的，限制較為嚴格，如段落開頭必須空兩格，豎排文字必須從右到左等規則。中文字體是一種非常規整的文字，因此靈活性相對較小，編排難度較大。
一般情況下，英文字體采用流線型方式，靈活性很強，能夠根據版面的需求靈活變化字體的形態，以解決版面僵硬、呆板的問題，創造出豐富生動的版面效果。
在版式設計中，經常會遇到中英文對照的情況。中文字體的象形、會意等特征和英文字體的簡單、圖形化的特征充分結合，展現兩種字體的優勢。編排時應該注意中文字體與英文字體的設計創意與主次關系，做到層次明確，并且要注意字體的統一性，如果字體變化過多，很容易造成版面的混亂。
我們在聊中西文的編排之前我們需要先了解下西文的歷史，就像我們在打王者榮耀一樣，要學習某個英雄，就先得了解英雄的技能，然后才是這些技能怎么去搭配使用，學習文字組編排也是一樣的道理。
設計的目的一般是為零解決一些生活中的問題，字體的演化設計之路也是一樣的，都是通過外部能力能觸達的能力加上內部的需求所達到的最優的解決方案?，F在我們將西文字體在歷史上的進程可以分為“文藝復興體” “古羅馬襯線體”“過程型襯線體”“粗襯線體”“無襯線體”。
我們可以大致簡單的把基礎款的字體分為兩種，一種是一種是襯線體和無襯線體，襯線體（Caslon,Baskeville，Bodoni,Didot,Garamond,）,無襯線體（DIn,Helvetica）,
襯線體
Garamond是一個早期字體，有老式數字，雕刻感比較強，有傾斜體，
Baskeville修飾比Garamond要粗點，稍微有點厚重感，偏向優雅，特征明顯，
Bodoni筆畫有明顯的過度，比較現代，
Didot比較常見，特征更明顯，現代感更加強，女性感強，多用品牌，雜志，簡化大膽。筆畫對比更加大，出現的比較晚
無襯線體
Helvetica，特征，比較平穩，沒有特征，沒有華麗的裝飾，在國外特別受歡迎
DIN，和Helvetica區別：變化性特殊，切口有角度性的變化，更加簡單干凈。偏向美術字體數字的幾何形強，比較抓眼球
Futuer:菱角分明，幾何無襯線體，冰冷，升部比較高，比較高挑，多用于科技感比較足的設計中。
因為基礎款的字體很多字體公司都會去做，我們可以通過谷歌可商用字體庫去尋找免費字體尋找：http://www.googlefonts.net/
中文的基礎款排版字體一般為黑體，宋體，圓體，楷體和一些風格多變的美術體。
襯線體
最早是為適應印刷而出現的一種漢字字體，筆畫粗細有變化，而且一般是橫細豎粗，末端有裝飾部分，（即字腳，襯線），點，撇，捺，鉤等筆畫有尖端，屬于襯線字體，常用于書籍雜志報紙等正文排版，趙集，瘦金體。
思源宋體，前身是小塚明朝體改進的，筆畫特征比較相似，小塚明朝橫筆畫要細點，思源宋體橫筆畫要粗點。
無襯線體
黑體，屏顯字體，無論放大還是縮小都能看的清晰，黑體可塑性比較強，常用于標題字的制作，小的可以作為內文，黑體有稱作方體或者等線體，沒有襯線裝飾，字形端莊，筆畫橫平豎直，筆跡全部一樣粗細，結構嚴謹醒目，筆畫粗壯有力，撇捺等筆畫不尖銳，使人易于閱讀。由于其醒目的特點，常用于標題，導語，標志等。
思源黑體：是最廣泛知道的字體，質量高，7個字重，
漢儀旗黑：可以滿足所有的排版的需求，寬窄系統也有。
在我們日常的設計工作中，襯線體和無襯線體該怎么選擇呢？我相信很多設計師都在這個問題上糾結過。我們來結合歷史來看看這個問題吧
我們把時間倒退到歐洲17-18世紀，這個時期盛行一種藝術“巴洛克藝術”和“洛可可藝術”，巴洛克是一種更早期的宏大而華麗的藝術風格，后世有人將洛可可風格看作是巴洛克風格的晚期，即巴洛克的瓦解和頹廢階段。它產生在反宗教改革時期的意大利,發展于歐洲信奉天主教的大部分地區,以后隨著天主教的傳播,其影響遠及拉美和亞洲國家。巴洛克作為一種在時間、空間上影響都頗為深遠的藝術風格,其興起與當時的宗教有著緊密的聯系。然而它不僅在繪畫方面，巴洛克藝術代表整個藝術領域，包括音樂、建筑、裝飾藝術等，內涵也極為復雜。
基本的特點是打破文藝復興時期的嚴肅、含蓄和均衡，崇尚豪華和氣派，注重強烈情感的表現，氣氛熱烈緊張，具有刺人耳目、動人心魄的藝術效果。所以它代表那個時期最流行風格。同時我們可以看看那個時期所產生的字體，也是一樣浮夸，裝飾性明顯。
我們在把時間撥20世紀德國，一所代表著現代主義設計風格的學校誕生了，包豪斯學院，德國魏瑪市的 “公立包豪斯學?！保⊿taatliches Bauhaus）的簡稱，后改稱“設計學院”（Hochschule für Gestaltung），習慣上仍沿稱“包豪斯”。在兩德統一后位于魏瑪的設計學院更名為魏瑪包豪斯大學（Bauhaus-Universit?t Weimar）。它的成立標志著現代設計教育的誕生，對世界現代設計的發展產生了深遠的影響，包豪斯也是世界上第一所完全為發展現代設計教育而建立的學院。包豪斯風格成為了現代主義風格的代名詞。
而包豪斯的設計理念：把簡單的問題把形成標準化，強調一些構成上的東西，所以在這種觀念的影響下，就產生了一些非常好看的無襯線字體。
而在現代化風格的影響下，產生出了工業衍生品也非常簡約，現代。
做設計是一個入世學，所有的問題都需要結合現有的場景來看，我們上面聊完每個時期藝術熏陶下所產生的字體，那么我們結合實際情況來看下，我們和我們的父母都是在不同文化體系下所產生不同審美觀的人。左邊度圖是我們絕大數父母喜歡的裝修風格，像洛可可那時候一樣浮夸，而我們卻喜歡簡約的現代風格。
那么字體也是一樣的，有襯線的字體屬于比較古典的氣質，簡約的無襯線字體則是比較現代的工業風。
也不是所有的襯線字體都是比較古老的，而Didot這款字體因為它造型的特性，也會經常出現在雜志封面和一些奢侈品的設計中。從時間的角度來講，最有歷史痕跡的是括弧線襯線又稱古典型襯線，其次是過渡型襯線到粗襯線，最現代的就是極細型襯線。
而中文的襯線體沒有明確的區分，但是我們可以根據字體特征按照西文的類目去區分。
那上面談到，不是所有的襯線體都代表古典或者歷史的厚重感，所以無襯線體也不是根據出現時間和之前的應用場景也是有區分的。
西文的無襯線體分為傳統型無襯線，人文主義無襯線，和現代主義無襯線（幾何形無襯線），傳統型無襯線的G開口的地方都是水平的，開口的地方也比較小，看起來比較保守，母A它的筆畫是由粗到細，落差不是特別的大，字體造型也比較穩重。人文主義無襯線它慢慢的開始出現一些傾斜的特征，這樣它的開口處可以做的更大一點，它的負空間也會更大一點，字母A為了讓它的負空間也就是字谷變的更大，它的筆畫粗細變的更大了，手寫的感覺會更多一點，現代主義無襯線體字母G它不僅開口要大，而且還有很多圓形切割的特點。幾何的特征會更濃厚一點，我們把這個特征稱為幾何型無襯線字體。
中文的無襯線則分為傳統型無襯線，中間無襯線，現代型無襯線。在漢字的黑體里，分為2類字體，一類是有喇叭口的，一類是沒有喇叭口的，喇叭口的造型特征是在筆畫的轉折或筆畫造型豐富的地方會有一些向里面凹陷或微微凸起的造型特征，沒有喇叭口的字體特征是在任何筆畫造型都收拾的比較干凈利落。像傳統和中間型無襯線都是慢慢像現代型無襯線演化，喇叭口慢慢的演化成工業的切口風。
字體的選擇我們應該基于合適的主題，合適的用字場景以及使用平臺或者場景，這樣才可以選出合適的字體。
合適的主題：這點適用可以在運營設計或者平面設計中，我們接到的需要適用何種風格，例如國潮肯定會選用毛筆字這種張力比較強的字體，在例如比較有工匠精神的工藝品可以選用有手工感的宋體字。
合適的用字場景，看選用的字是用在標題還是還是正文，標題字可以選用張力比較強的字體，因為標題的文字需要醒目，可以直接傳遞版面需要表達的主題，而正文需要閱讀文本則選擇無個性的黑體比較合適。
適用的平臺，設計展現的平臺也是對字體選用的影響的關鍵因素之一，例如在iOS上選用蘋方字體，安卓上選用思源黑體，PC選用微軟雅黑都可以減輕開發打包的大小。
我們為什么要做中西文的那我們在中西文搭配的時候應該怎么去搭配呢？下面是我總結的三個方向：
1.細節類似，細節類似我們可以觀察字體的細節進行搭配
2.時間相同，就是在某一個時間節點下同時產生的兩款字體。
3 .氣質相同，這個是在漢字里面才有的，我們常見的字體除了宋體和黑體外，還有是書法字體或手寫體，這類型的字體在通常是不太好搭配字體的。
那要是原字體的西文不太好看，我們怎么去搭配呢？、
外形類似
帶有這種轉角圓滑的裝飾線的宋體字我們一般是搭配古典型的襯線體，這樣搭配起來會更舒服，或者漢字的黑體搭配西文的無襯線體，因為它們特征是一樣的，然后就是中文的圓體也同樣會搭配一個西文的圓體，這些都是細節類似的搭配方法。
時間相同
是看筆畫相似來匹配的，我們可以看到下面這個中文的筆畫特征是帶有喇叭口，這種類型的黑體很明顯是印刷工業時代的產物才會有的特征，而右邊的西文是粗襯線字體，也是帶有工業時期復古的感覺，而且產生的時間也是比較近似的，一個是20世紀左右產生的字體，一個是19世紀產生的字體，這兩款字體搭配在一起可以凸顯工業感，穩重感，復古感都有，這也是時間匹配法。
氣質相同
例如在中國像楷書字體的特征獨特，但是英文的字體沒有類似特征的字體，所以楷書和宋體在中國都可以列為書法體，在氣質上是相同的，所以搭配在一起也是比較常見的。
另外我也總結了一些常用的字體搭配方法，放在下圖了，這些只是給大家平常搭配字體時候的一個參考依據。
我們在日常的的設計工作中，無論是哪種設計，都會涉及文字組的編排，我們可以觀察到一般的文本分兩種組合，一種是標題文本+說明性文本。
標題文本主要放置版本需要傳遞的重要信息，說明性文本是輔助傳遞標題文本的含義。
對比廣泛的存在于我們的生活中，對比的形式也是多種多樣的，例如身高的高矮對比，體重的胖瘦對比，速度的快慢對比等等。在設計領域內，對比是最常出現的形式。對于信息來說，適當的對比可以讓信息層級更加清晰明了，同一層級的信息更加豐富。對于畫面整體來說，恰當的對比可以很好的制造出焦點(畫面主體)當我們需要突出某一個元素的時候，其他的元素相應的就要做出對比關系，才能保證主體的突出。
字號對比是最快可以提現內容層級關系的一個設計點，一個版面里面不會有太多的文字層級，一般保持在3-5個層級，大部分的軟件都會自己自帶的推薦字號，為什么最小的字號是6號，因為印刷里是可視的極限。
常見的字號比例有1:1.5,1:1.618,1:1.732,1:2等等。這些比例在正常使用能很快可以做出層級關系且不會有特別大的問題。例如1:1.618是黃金比例，也是很多植物生長的規律，符合人正常的審美感受。
行距比例如果沒設置合適，對閱讀會造成影響，很容易造成眼睛是視覺疲勞，看來不舒服且文本不容易閱讀。
當行距設置到合適的時候， 我們閱讀起來會比較舒服，也會提高閱讀效率。
行距的設定也可以套用固定的算法：字號*倍率＝行距。
我們在日常的設計工作中，當行距調整到比較合適的大小的時候，版面會具備層次感 ，但超過一定限度也不太好。那行距的調整具體有哪些用途呢，1.平衡版面，2.閱讀效率
例如現在整個版面看起來比較輕盈，那么我們可以選擇一個比較大的行距，因為中間的空比較多，所以看起來并沒有那么重。例如我們現在的版面非常重，我們需要平衡他，那我們的行距就可以給近一點，讓文本塊在視覺上更重，這就是平衡的作用。
行距的設定大小會影響我們閱讀的效率，例如行距比例小的，一般用在標題文本，因為標題的文本一般需要我們快速閱讀并了解清楚。
字距大設定也對人的閱讀也會有影響，字據過大的時候像樹懶說話一樣慢，字據小的時候感覺說話比較快。
當字距是-800時候的感受，感覺想動漫里的樹懶一樣，說起話來慢吞吞的。
當字距是--100時候的感受，感覺像和人在吵架一樣，說話的語速比較急切。
在一般的平面設計中字據設定為正負40-70之間去選擇，但是在UI設計中，字距一般為0.
同時字距也會受到中宮的影響，在同字號的情況下，微軟雅黑會比其他字號大一號，中宮越大，字面也會越大，因為筆畫外擴，中宮大的字體，字面大，默認間距小
中宮大的字體，字面大，默認間距小，他的字距可以給大點，中宮小的字體，字面小，默認間距大，他的字距可以給小點，
例如平方字體，正常0間距做內文會比較舒服，但是作為標題，調了之后會讀起來比較連貫。
無論是西文還是漢字，他的形狀都會不一樣，有圓形的，正方形的，三角形的等等，不同的形狀，負空間是不一樣的，不同的字號是需要微調字距的，我們需要軟件視覺來調整。
在AI中有個功能是基于視覺對齊，我們開啟便可以解決這個問題。
分欄的寬度，決定了一行的長度和字數，當欄寬太長的時候，我們閱讀可以會比較吃力，總感覺一眼看不到頭。
一行多少字合適呢？一般的是20-30字之間，極限是15-30之間比較合適，一行字太少和太長都會讓人很累，，這也是為什么有的書為啥讀不下去的原因。
這也是為什么很多娛樂消遣方便的書一頁的字很多，也是為為了提升閱讀的興趣。
文字設計的成功與否，不僅在于字體自身的書寫，也在于其運用的排列組合是否得當，文字層級之間的關系，適用規則，欄距＞行距＞字距。
上面的舒服，因為粗細對比比較平衡，下面面的對比過度，什么時候下可以做強對比呢？做了字號對比，就不要做過大的字重對比，
在現在的板式設計中，有一個被忽略的知識點，就是標點符號。標點符號在當今社會不僅僅是用來斷句，也是可以用來傳遞情感，例如下圖，同一句話因為加了不同的標段符號，所傳達的意思就完全不一樣了。
所以標點符號的運用與文字組的編排在板式設計中同樣的重要，例如在聊天的時候，我們隨意的時候的問號在正式排版中，“！”和“？”的疊用不能超過3個。
你一句話表達驚訝和疑問的時候，我們應該將問號放在前面感嘆號放在后面。
例如有書名號的文本段是不在需要用頓號去隔開的，如果當書名號后面有括號則是需要用標點符號去把他們分割開來的。
當然還有就是逗號和不能在一段的前面等等，這些都只是給各位小伙伴一些拓展知識，有興趣的小伙伴如果想自己的板式更加規范可以自己去查閱相關資料。
梳理信息層級有哪些作用呢？我們在自然界中會發現很多與階級有關的現場，例如狼群里，一般都會有頭狼，也叫狼王，主要是統領狼群的行動及群體意識，在企業中，老板作為一個公司的核心人物，一般正常的普通員工去離職，不會影響公司的正常運作，但是如果涉及到公司的老板不知下落或者企業的核心管理層離職，會對公司的股價和正常的業務流程造成很大的干擾。
在我們日常設計中編排文字組也是一樣的，我們首先需要確定接到的需求哪些是重要且關鍵的信息，哪些是次要信息。當它的重要層級越高，他在版面中所扮演傳遞信息的角色就越重要，我們接下來便是通過設計手法，例如通過字距，筆畫粗細，顏色，以及字體等等來做出層級的區分。
那我我們一起來看看實際的案例吧！
梳理信息層級有哪些作用呢？我們在自然界中會發現很多與階級有關的現場，例如狼群里，一般都會有頭狼，也叫狼王，主要是統領狼群的行動及群體意識，在公司中，老板
1.首先是它會便于傳遞信息的中心思想，有助于用戶快速理解，所以一般大標題文字很對都會做效果，有助于提升視覺的焦點，2.信息層級分明，主次有序的在版面中傳遞信息，3.降低視覺噪音：當版面中的文字信息案例主次有序的排列后，版面看起來比較和諧，所有的元素感覺是本應該就在那里的。
如果信息層級沒有梳理過的版面，則會閱讀起來非常的吃力卻效率低下。
關于文字編排節奏感，很多人應該好奇了節奏不是音樂的范疇嗎？怎么文字編排也說有節奏嗎了？
其實節奏感隨著地球開始有生命開始便存在了，因為太陽升起到落下是有著自己每天固定的節奏的，太陽升起人開始勞作，看著周圍的動物和植物都一天天有變化，感受著自己由青澀稚嫩到遲暮之年；這些有規則的事物形成的固有的節奏。
在文字編排中也可以感受到這樣的節奏，例如，字體是直線還是曲線，垂直還是水平，傾斜還是正立，緊湊還是寬松，對稱還是不對稱……這些都體現著文字的節奏。段與段之間的留白多少，字間距的大小都是有規律可以尋找的，如果文字組合被有規律的設計、排版，那在設計稿中本身就具有了一種節奏感的吸引力。沒有節奏就不會有生命，也不會有任何創造。
好聽的因為是因為音樂的節奏會有起有伏，有前奏有副歌有高潮部分，這樣的音樂才不會讓人覺得平淡，我們轉換到文字組編排也是一樣的道理，當我們把一些沒有節奏感的書籍拿出來看是會覺得很困的。
如果我們加以設計的手法，把文字組合好好的排版一下，這是可以提升我們對內容的閱讀興趣的。例如我們閱讀的雜志和一些資訊類的APP，他們對文字和圖片的排版就會很下心思。
那我們怎么打造自己設計中的節奏感呢？那接下來我們聊聊怎么通過閱讀視線心理去引導用戶。首先是基礎的視覺邏輯，讓用戶漸入佳境，通過常規的的閱讀習慣，其實是根據大小、色彩、線的指向去引導用戶的視線節奏，其次是視線引導，根據用戶的常用邏輯打造版面中的節奏感。
我們平時在看版面的時候的視線觀看邏輯是怎么確定的呢？1.根據日常的書寫邏輯：我們看圖習慣和我們日常的書寫習慣是密不可分的，一般是從左至右，從上到下，所以我們很少會看到從右往左的排版和從下往上的排版，因為這樣的不符合人的邏輯，
因為每個人都心理感受都不一樣，所以當視覺引導不一樣的時候，傳遞的感受也是不一樣的，文字組合的目的是為了增強其視覺傳達功能，賦予審美情感，誘導人們有興趣地進行閱讀。因此，在組合方式上就需要順應人們的心理感受。人們的一般閱讀順序是:水平方向上，視線一般是從左向右流動；垂直方向上，視線一般從上向下流動；大于45°斜度時，視線從上而下流動；小于45°時，視線從下向上流動。
板式的閱讀順序有兩種：從左到右和從右到左。這是人們平時慣性的限制，就好像寫文章一樣，一旦決定了從左到右寫，就不會更改，板式也是如此，一旦決定了板式的閱讀順序，許多元素都會隨之被限制。
橫排文字
正常我們去閱讀橫排文字就是先從左到右，從上到下的規律去閱讀。
豎排文字
豎排文字的閱讀順序是從上到下，整體在從右上至左下。我們無論是橫排版還是豎排版，行距都是要大于字距的。
版式設計的核心就是吸引人的視線。當我們在觀看某些東西時，大部分的人都有自己習以為常的觀看習慣。人們往往在一瞬間就會判斷出這是什么？這一現象導致的結果是人們會想起與所看到的東西相近的信息，并判斷畫面中信息的價值，我們將這種心理傾向稱之為視覺心理。視線的引導是建立在視線的移動之上的，在引導視線前，我們需要先建立焦點。
視覺聚焦是在文字組編排中先建立視覺的突破口，然后就再去引導其他的內容。設計師，有一個重要的瓶頸就是，無法在版面中快速的傳達主題的中心思想，明明什么信息都有，就是讓人抓不住重點。如何一秒吸引別人的注意力，快速get要表達的點？那就是需要在版面中埋下引導別人實現的點。
引導方式可以根據版面現有的內容做大小層次對比，顏色對比，空間對比及元素具有的特有指向性。
人們在日常生活中，通常會先注意到大的東西，在有較大的元素在版面中，我們的視線往往會向大的元素是聚集，從大到小，這樣一步一步的去看，在版面設計運用這樣的小技巧，我們閱讀起來相對來說比較順暢。特別是當兩件物體顏色或材質相同的時候，視線往往會集中在大的物體上。根據這一原理，應該盡量放大希望吸引讀者注意的東西。
通過有序的色彩的引導視線是版式設計中不可或缺的主要元素，同時也頻繁應用于視覺引導中。色彩的心理效果在視覺引導中的運用就是：人的目光首先會注意眾多色彩中不同的那一個。例如下圖中，當色彩是藍色的時候，是沒有焦點的，當出現別等顏色是特別吸引人的目光的。
然后在加上大小的對比之后，吸引我們眼球的肯定是下面這個大圓形。
如果在下面這個大圓形去改變顏色，這個便會更加大吸引人
其次是亮明度高的顏色比明度低的更吸引人的目光。
暖色調比冷色調會更加吸引人
我們正常的瀏覽順序是從左至右，從上至下，那當我們怎么打破這個順序呢？首先是暖色＞冷色，明度高＞明度低的，元素大的＞元素小的，那下圖我們瀏覽順序應該是先看紅色，在上面開始看，其次是右邊和下方。
引導是一種視覺的語言。一幅好的設計作品，用戶的視線一定是被控制在主體和興趣點上，而不是被其他與主題無關的雜物所吸引，只要用好視線的引導，才可以傳遞我們想傳遞的。
當版面中出現箭頭或者人臉等相關指向性的圖片或者元素出現，是因為古希臘畢達哥拉斯學派和柏拉圖認為眼睛在捕捉物體時，視線、目光和力量會以物體為目標，從眼睛向物體方向傳送，把這一想法用設計原理來表示時。這時候的帶有指向性的圖片或者元素，便是視覺的切入點。
線作為板式中的引導，也是非常常用的，它既可以作為引導視線的切入點，也可以填補畫面中的空白點。
線除了是直線，還可以是曲線，文字組成的線或者負空間形成的線，都是具有引導視線的作用。
我們從小在學校學習了數字的大小順序，在在考試時，我們會順著考生號找座位，坐車時順著車票找座位。我們生活中還有很多地方會應用到編號。所以我們的目光會隨編號移動，是因為我們一直就有這樣的習慣。如果看到1，就自然會找2，看到A會去尋找B，視線就會這樣一直移動下去。
設計離不開構圖，構圖通俗地講：就是為了表現畫面的主題思想，而對畫面上的人或物及其陪體、環境作出恰當的、合理的、舒適的安排，并運用藝術的技巧、技術手段強化或削弱畫面上某些部分，最終達到使主題形象突出，主體和陪體之間的布局多樣統一，畫面疏密有致，以及結構均衡的藝術效果，使主題思想得到充分、完美的表現。
當我們把文字組編排好了，可以通過構成形式將他們串聯起來，這才是好的排版，能快速想到版面的效果。
居中構圖是最常見的構圖，指的是將畫面的主要元素放置在版面的中軸線上，目的是快速吸引眼球，占據視覺焦點，突出主體。中心構圖的版式簡潔、利落，給人以雅致的視覺感受。在突出主體的同時又能賦予畫面穩定感，并使整體畫面具有一定的沖擊力，需要表現規整穩定、醒目大方的版面時，可以使用居中構圖。其次對稱構圖是居中的一種特例。
對稱的形態在視覺上有自然、安定、均勻、協調、整齊、典雅、莊重、完美的樸素美感，符合人眼的視覺習慣。平面構圖中的對稱，可分為點對稱和軸對稱。在平面構圖中應用對稱法則要避免由于過分的絕對對稱而產生單調、呆板的感覺。有時，在整體對稱的格局中加入一些不對稱的因素，反而能增加構圖的生動性和美感，避免了單調和呆板。能夠突出主體，聚焦視線，當制作的圖片沒有太多文字，并且展示主體很明確的情況下，可以使用對稱構圖，在電影海報中也是比較常見的。
斜線式構圖又稱傾斜構圖，是將文字或者主體物以傾斜的方式放置在版面當中。傾斜的角度產生勢能，給人以引導作用。優化視覺層級，清晰的傳遞信息。讓比較呆板的畫面具有活力和生機，當制作的版面需要沖擊、不穩定效果時，可以使用傾斜式構圖，需要沖擊感和不穩定感時可以嘗試，也可以做透視，讓他有近大遠小的空間感。
曲線式構圖指的是版面中重要元素呈曲線排布，其他元素填充剩余空間，曲線具有靈活的屬性。其中“S”形狀從前景向中景和后景延申，畫面構成縱深方向的空間關系的視覺感，所以曲線構圖的版面常常顯得充實、熱鬧、生動、空間感。具有曲線的優美而富有活力和韻味，需要有力的表現場景的空間感和深度時，可以選擇S形構圖，例如瑜伽海報。
要表現畫面的空間感和縱深感也可以用S型購物，這也是S型構圖的特性，讓畫面更有空間感。
壓角式構圖適用于標題字數較少的版式設計，標題作為絕對重要的元素放置四角，一眼就能被看到。要做好壓住四角的版式設計得進行網格構架，控制好版面之間的比例。這種構圖形式使得畫面更加穩定，突出中心主體。
散點式構圖是指主體數量較多，散落在畫面當中的構圖方法。在應用散點式構圖時應防止散亂，宜用隱性結構線或結構形將各個“點暗連起來，相互呼應形成聯系?！边m用于標題文字稍多的平面版式設計。文字排布時，拉開字的間距，在版式上化作為元素。標題文字的縱向距離要大于橫向距離，否則容易誤導閱讀順序。當文字信息比較多的時候，可以選擇散點構圖。
三分法是一條法則，同時也不是一條規則。 這個說法很拗口，我們來理解一下。 從本質上講，它就是我們的眼睛自然感知圖像的方式，這些圖像被限制在一個邊界之內（例如畫框）。 這些框架，都有一個固定的長度和寬度; 將這兩個屬性分別分成三個相等的部分，這會包含兩條水平和垂直穿過框架的等距線，形成四個線相交的點，并創建九個相等大小的框架，如下圖的九宮格。
而當版面的主要元素分布在三分線或點上，多數人會感覺這個畫面會比較和諧舒服，這接近是一種天性和本能了。當然，你還可以舉例說很多不是三分構圖的例子來反駁我，但這不重要，只要你要知道大部分遵循三分法構圖的畫面看著都是比較舒服的事實就行了。
古時候的文人墨客的門檻是“知句逗”，我個人覺得設計要想入行設計的門檻便是最基本的文字組的編排，
我們的感覺，即我們的視覺和我們的美感，優于幾何結構，當我們在處理黑白對比的平衡時，我們必須訴諸感，
在文字組的編排中，其中包含的技藝、功能和形式設計是絕對不能分開的。當我們作為設計師，做好每一處設計的細節，也是對觀看版面用戶最基本的尊重吧！
文章來源：優設 作者：Endings
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
B 端設計也是 UI 設計的一種，它的輸出環境只存在于電子屏幕中，所以統一使用 RGB 色彩顯示模式即可。
RGB 即光的三原色，因為每個像素點是由 R 紅色、G 綠色、B 藍色三種顏色的不同色彩強度混合而成。所以 RGB 色的表示可以由 3 個顏色各自使用 0-255 中的數值來呈現，比如：
這是 RGB 色彩最標準的記錄方式，但顯然看起來特別的不直觀，或者說不方便。所以在計算機中，為了方便記錄和調用，使用了一串十六進制的代碼來指代具體的 RGB 色。
理論上，我們只要使用 RGB 模式，隨便你怎么選色，只要記錄 16 進制碼進行復用，你就可以在任何文件、設備中獲得相同的色彩。
但在實際顯示效果上，不同的系統、設備、瀏覽器都有自己的調色板，“解釋” RGB 代碼后給出的色彩就有偏差。比如一樣的中文不同方言、語系、背景的人可能聽出不同的意思，比如牛子，我以為它是類似“晴子”這樣的姓名，至于你們的理解嘛……
相關行業為了避免這樣的問題，提出了 WEB 安全色的概念，即這些色彩在不同的顯示環境下，能實現最接近的色彩效果。
那么安全色都有哪些呢？網上有很多地方都有對應的色卡或者工具幫助我們選色。建議使用 Google 的 MD 色卡，這套色彩最全，使用范圍也最廣的顏色。
我們可以通過下面這個鏈接中的網頁工具，幫助我們快速實現選色和復制色彩代碼的操作。
網站鏈接：https://www.materialpalette.com/colors
當然，設計 B 端界面并不是只能使用安全配色，這只是一種建議，可以盡量確保主色，尤其是輔助色使用安全色，而中性色可以自由定義（下面會提）。
第 2 件事，自然就是講講該怎么配色了。和 C 端設計類似，我們主要的目標就是在項目設計過程中定義出 主色、輔助色、中性色 三種色彩類型，并把它們應用到合理的位置中去。
只是，針對 C 端來講，B 端的配色更功能化，更理性，也更簡單。我們要學習 B 端配色首先要排除那些花里胡哨的案例，比如下圖這種。
過度花哨的顏色會干擾我們對界面的實用和對信息的識別、檢索效率，除非是一些政績工程用來當 “花瓶” 的數據大屏，否則我們首先要排除顏色過度應用的選項。
那么什么主色、輔助色、中性色，我們先簡單做個說明。
主色，即你這套產品中的品牌色彩，是整套項目最核心，重要性最高的顏色。主色的選擇通常和你的品牌相關聯，比如騰訊云的藍色，阿里云的橙色，七麥的綠色。
輔助色，則是用來在系統中進行強調、標識、區分的彩色系統。品牌或者 C 端設計可能會通過輔助色和主色搭配實現個性化的配色方案，但是在 B 端是沒有這種訴求的。輔助色應用的目的性更強，是完全貼合操作效率來制定的。
比如下方是國外流行框架 StarBootstrap Admin 中使用的輔助色，它們都有對應的功能寓意場景。
中性色，則是這套系統中色彩使用的相關灰色，因為灰色是沒有色相、冷暖的區別，所以我們也稱它們為中性色。主要應用在文字、背景、分割線等基礎元素中。
B 端的配色，即了解這三個色彩類型以后，能正確制定合理的顏色，并應用進項目中去。下面，我們分別對每個類別進行簡單的講解。
1. 主色的應用規則
B 端的主色也就是產品的品牌色，多數 B 端項目中，主色不需要 B 端設計師自己選，在項目開始前就會有相關的品牌色、LOGO，直接復制色號即可。
和 C 端配色最大的不同是，品牌色在這里很多時候只是 “吉祥物”，它的存在用來宣示品牌本身的存在，但并不是任何情況下都直接參與界面色彩的填充。
假設品牌色是紫色、熒光黃、暗棕色之類的，那么這類顏色本身的內涵、寓意是難以滿足功能需求的，我們要盡可能減少它們的出現面積、頻次。
在 B 端設計中，主色的應用是最不需要大面積填充的，即使它是常見、耐用的藍色、橙色，主色的填充主要只應用在下面這些類型內容中：
2. 輔助色的應用規則
有了主色，我們就要為項目添加其它色彩了。
B 端彩色的搭配原則只有一個，那就是 —— 能省就省。我們不是設計一個讓用戶發出感嘆的色彩豐富絢麗、細節眾多的視覺平面，而是設計一個用來使用的軟件系統。所以前面舉例的那些花里胡哨的反面案例，就一定要在正式項目中敬而遠之。
用專業術語來說，配色過程要遵守 “奧卡姆剃刀原則”，如無必要，勿增輔色。
而為了滿足功能性需求，可以為 B 端項目添加的輔助色類型其實也非常的有限，按寓意劃分常見的也就以下幾種：
相信看到這里，你們腦海中已經有畫面了。我們會為正確使用綠色、鏈接使用藍色、警示使用紅色等等。這些都是具有普世性的顏色，與用戶的長期經驗吻合，沒有識別的成本。
而如果為了個性而個性，對輔助用色另辟蹊徑，相當于在異國自駕時使用藍燈行棕色停的系統，異國風情是有了，說翻車也就翻車了。
所以，針對 B 端輔助色的使用上，如果自己沒有把握和經驗，可以套用下方我們整理的 RGB 安全色，填充到頁面對應的元素中去：
用谷歌色卡各選 3 個同類色出來，并進行標記
3. 中性色的應用規則
B 端的輔助色找起來不難，難的是中性色的使用和搭配上。
任何完整的 B 端的項目，同一個界面中都包含了多個模塊、層級，以及數之不盡的文本字段。在這么多的內容中，我們要根據模塊、文字的權重，選擇合理的中性色填充。
新手很容易迷失在中性色的配色過程中，往往一套界面做完以后，使用的灰色或黑色透明度數量根本無法統計，非常的混亂。
所以，為了避免這樣的情況，我會建議從開始設計之前就定一套中性色，并將它們添加到設計軟件的色彩畫板中，每次填充中性色的時候直接從這個色板中選擇即可。
那么如何制定這套中性色？首先要理解在電子顯示器中，人眼對偏冷的中性色是耐受的（舒適），所以專業的 B 端項目中，中性色都帶有一定的冷色色相和飽和度，比如下圖是 Element 中性色在拾色器區域的分布，就并不是全灰的。
所以加入冷色是有必要的，同時，我們用 HSB 色彩模式中的 B 值作為中性色灰度的主要量化標準，全黑時 B 值為 0，白色為 100，每個定義出來的灰度都可以用 B 值作為代號，如 B20、B40 等。
我們根據這個標準，定義出 5-8 級的中性色，就可以滿足項目中的大多數場景。
雖然會有一些項目會使用透明度來制定灰度等級，比如黑色的 80%、40% 透明度，但我更建議將透明度使用場景和實際色值定義區分開來，只有在色彩的不同狀態（選中/失效等）下再應用透明度。
有關 B 端配色的部分也就先說到這里，B 端配色遠遠比 C 端更簡單，也更枯燥?？梢允褂玫纳史秶。茁芬哺恢隆Ｎ覀円龅?，就是將它們合理進行填充。
B 端設計也是 UI 設計的一種，它的輸出環境只存在于電子屏幕中，所以統一使用 RGB 色彩顯示模式即可。
RGB 即光的三原色，因為每個像素點是由 R 紅色、G 綠色、B 藍色三種顏色的不同色彩強度混合而成。所以 RGB 色的表示可以由 3 個顏色各自使用 0-255 中的數值來呈現，比如：
這是 RGB 色彩最標準的記錄方式，但顯然看起來特別的不直觀，或者說不方便。所以在計算機中，為了方便記錄和調用，使用了一串十六進制的代碼來指代具體的 RGB 色。
理論上，我們只要使用 RGB 模式，隨便你怎么選色，只要記錄 16 進制碼進行復用，你就可以在任何文件、設備中獲得相同的色彩。
但在實際顯示效果上，不同的系統、設備、瀏覽器都有自己的調色板，“解釋” RGB 代碼后給出的色彩就有偏差。比如一樣的中文不同方言、語系、背景的人可能聽出不同的意思，比如牛子，我以為它是類似“晴子”這樣的姓名，至于你們的理解嘛……
相關行業為了避免這樣的問題，提出了 WEB 安全色的概念，即這些色彩在不同的顯示環境下，能實現最接近的色彩效果。
那么安全色都有哪些呢？網上有很多地方都有對應的色卡或者工具幫助我們選色。建議使用 Google 的 MD 色卡，這套色彩最全，使用范圍也最廣的顏色。
我們可以通過下面這個鏈接中的網頁工具，幫助我們快速實現選色和復制色彩代碼的操作。
網站鏈接：https://www.materialpalette.com/colors
當然，設計 B 端界面并不是只能使用安全配色，這只是一種建議，可以盡量確保主色，尤其是輔助色使用安全色，而中性色可以自由定義（下面會提）。
第 2 件事，自然就是講講該怎么配色了。和 C 端設計類似，我們主要的目標就是在項目設計過程中定義出 主色、輔助色、中性色 三種色彩類型，并把它們應用到合理的位置中去。
只是，針對 C 端來講，B 端的配色更功能化，更理性，也更簡單。我們要學習 B 端配色首先要排除那些花里胡哨的案例，比如下圖這種。
過度花哨的顏色會干擾我們對界面的實用和對信息的識別、檢索效率，除非是一些政績工程用來當 “花瓶” 的數據大屏，否則我們首先要排除顏色過度應用的選項。
那么什么主色、輔助色、中性色，我們先簡單做個說明。
主色，即你這套產品中的品牌色彩，是整套項目最核心，重要性最高的顏色。主色的選擇通常和你的品牌相關聯，比如騰訊云的藍色，阿里云的橙色，七麥的綠色。
輔助色，則是用來在系統中進行強調、標識、區分的彩色系統。品牌或者 C 端設計可能會通過輔助色和主色搭配實現個性化的配色方案，但是在 B 端是沒有這種訴求的。輔助色應用的目的性更強，是完全貼合操作效率來制定的。
比如下方是國外流行框架 StarBootstrap Admin 中使用的輔助色，它們都有對應的功能寓意場景。
中性色，則是這套系統中色彩使用的相關灰色，因為灰色是沒有色相、冷暖的區別，所以我們也稱它們為中性色。主要應用在文字、背景、分割線等基礎元素中。
B 端的配色，即了解這三個色彩類型以后，能正確制定合理的顏色，并應用進項目中去。下面，我們分別對每個類別進行簡單的講解。
1. 主色的應用規則
B 端的主色也就是產品的品牌色，多數 B 端項目中，主色不需要 B 端設計師自己選，在項目開始前就會有相關的品牌色、LOGO，直接復制色號即可。
和 C 端配色最大的不同是，品牌色在這里很多時候只是 “吉祥物”，它的存在用來宣示品牌本身的存在，但并不是任何情況下都直接參與界面色彩的填充。
假設品牌色是紫色、熒光黃、暗棕色之類的，那么這類顏色本身的內涵、寓意是難以滿足功能需求的，我們要盡可能減少它們的出現面積、頻次。
在 B 端設計中，主色的應用是最不需要大面積填充的，即使它是常見、耐用的藍色、橙色，主色的填充主要只應用在下面這些類型內容中：
2. 輔助色的應用規則
有了主色，我們就要為項目添加其它色彩了。
B 端彩色的搭配原則只有一個，那就是 —— 能省就省。我們不是設計一個讓用戶發出感嘆的色彩豐富絢麗、細節眾多的視覺平面，而是設計一個用來使用的軟件系統。所以前面舉例的那些花里胡哨的反面案例，就一定要在正式項目中敬而遠之。
用專業術語來說，配色過程要遵守 “奧卡姆剃刀原則”，如無必要，勿增輔色。
而為了滿足功能性需求，可以為 B 端項目添加的輔助色類型其實也非常的有限，按寓意劃分常見的也就以下幾種：
相信看到這里，你們腦海中已經有畫面了。我們會為正確使用綠色、鏈接使用藍色、警示使用紅色等等。這些都是具有普世性的顏色，與用戶的長期經驗吻合，沒有識別的成本。
而如果為了個性而個性，對輔助用色另辟蹊徑，相當于在異國自駕時使用藍燈行棕色停的系統，異國風情是有了，說翻車也就翻車了。
所以，針對 B 端輔助色的使用上，如果自己沒有把握和經驗，可以套用下方我們整理的 RGB 安全色，填充到頁面對應的元素中去：
用谷歌色卡各選 3 個同類色出來，并進行標記
3. 中性色的應用規則
B 端的輔助色找起來不難，難的是中性色的使用和搭配上。
任何完整的 B 端的項目，同一個界面中都包含了多個模塊、層級，以及數之不盡的文本字段。在這么多的內容中，我們要根據模塊、文字的權重，選擇合理的中性色填充。
新手很容易迷失在中性色的配色過程中，往往一套界面做完以后，使用的灰色或黑色透明度數量根本無法統計，非常的混亂。
所以，為了避免這樣的情況，我會建議從開始設計之前就定一套中性色，并將它們添加到設計軟件的色彩畫板中，每次填充中性色的時候直接從這個色板中選擇即可。
那么如何制定這套中性色？首先要理解在電子顯示器中，人眼對偏冷的中性色是耐受的（舒適），所以專業的 B 端項目中，中性色都帶有一定的冷色色相和飽和度，比如下圖是 Element 中性色在拾色器區域的分布，就并不是全灰的。
所以加入冷色是有必要的，同時，我們用 HSB 色彩模式中的 B 值作為中性色灰度的主要量化標準，全黑時 B 值為 0，白色為 100，每個定義出來的灰度都可以用 B 值作為代號，如 B20、B40 等。
我們根據這個標準，定義出 5-8 級的中性色，就可以滿足項目中的大多數場景。
雖然會有一些項目會使用透明度來制定灰度等級，比如黑色的 80%、40% 透明度，但我更建議將透明度使用場景和實際色值定義區分開來，只有在色彩的不同狀態（選中/失效等）下再應用透明度。
有關 B 端配色的部分也就先說到這里，B 端配色遠遠比 C 端更簡單，也更枯燥。可以使用的色彩范圍更小，套路也更一致。我們要做的，就是將它們合理進行填充。
文章來源：站酷 作者：百度MEUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
大家是不是時常困惑于，B 端的表單設計體現不出高級感？設計發揮的空間特別的少？
那是你沒用對發力點~
B 端：設計表單頁面時，一方面須尊重用戶的習慣，不要在不必要的地方體現差別。總結了 4 個思考問題：
案例：以創建公眾號消息自動推送為例
另一方面要考慮信息層次。
搞定了基本要素后，我們開始考慮如何表現信息層次。
在了解什么封裝度和信息密度前，我先跟大家討論一下。什么是表單之間的關系。
我所認為表單之間的關系分為 3 種：
優點：
平鋪所有需要填寫的信息，適合內容項較少、內容項無法按照相關性分組的表單
缺點：
使用場景：
當需要完成一個簡單快速的任務，輸入少量信息即可完成創建
優點：
用于復雜任務時，拆解任務進行編排，適當的任務分割，可以降低用戶出錯率
缺點：
使用場景：
適用于大型、復雜任務
優點：
減少不必要（非重要）的輸入項，能適當的減輕用戶認知負擔
缺點：
使用場景：
特殊場景下使用
那么用一條完整的鏈路來表達就是：
了解完表單的結構關系知曉利弊后，那么應用在我們實際的場景中表達就是如圖所示：
封裝密度高且信息密度低
△ 圖中案例，僅做示例說明
將一個復雜的任務表單，進行封裝后，看起來任務量是不是也變少了？操作起來也不是很復雜了？
小結：
分析了解表單的結構關系，判斷表單，尋找共性的內容，將他們封裝為一個卡片，也可以封裝成一個組。主要的目的就是減少用戶認知負擔，提升操作/使用效率。
關于使用何種布局方式的判斷，應從信息的復雜度和關聯性兩個維度去梳理。根據信息的復雜度和相關性模型，選用相應的信息呈現方式，選用合理的布局方案來承載詳情頁的內容。
1. 信息的復雜度和相關性模型
△ 來源：Ant Design；來源鏈接： https://ant.design/docs/spec/research-form-cn
2. 區隔方式
根據各個信息之間的相關性，判斷各個信息模塊之間的親密度，通常情況下，相關性強的內容盡量靠近，相關性弱的的內容盡量拉開層次。
△ 來源：Ant Design；來源鏈接： https://ant.design/docs/spec/detail-page-cn
3. 注意事項
文章來源：優設網 作者：交互思維
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在 C 端設計中，不管是給車載客戶端、手機客戶端、電腦客戶端設計界面，都有比較具體的規范需要我們學習和遵守。
而唯獨 B 端設計，或者說網頁設計，我們在網上是找不到具體詳細的規范資料的。因為無論是螞蟻的 AntDesign 還是 Element、Clarity 等 B 端設計系統，其規范都只是針對自己這套產品的設計說明。
當我們不使用這些框架，要完成自定義設計，那么新人就完全不知道該怎么下手。所以，今天這篇內容，就是針對 B 端設計所需具備了解的基本規范進行說明。
幫助大家快速了解和掌握 B 端設計所需的規范知識。
B 端設計是 UI 類設計中的一個大類，它包含了非常多種面向企業、商業的客戶端類型，包括電腦、手機、平板、大屏等等，針對不同客戶端和系統，基礎規范都有一定的差異。本文主要集中在 WEB 端的管理界面設計。
WEB 管理界面雖然看起來和一般的網頁差別很大，但說到底，它也是網頁的一種，它遵循網頁設計的基本原則。我們對規范的解釋以網頁基礎規范為框架展開，并會加入一部分 B 端特有的設計元素規范說明。
主要包含的規范內容包含下面這些模塊：
規范的解釋，會涉及到不少網頁前端制作的知識點，建議立志在 B 端進行深耕的設計師，都要掌握 HTML + CSS 這些前端知識。
我們過去做過這個系列的詳解，可以通過下方的鏈接查看：
還要聲明一點，規范中總結的內容，包含 “規則” 和 “建議” 兩種類型，規則指的是瀏覽器、代碼等限制產生的硬性規范，而建議則是我根據自己經驗整理出來便于大家理解的內容。
在自己的項目中，如果出現 “建議” 無法適應的情況，那么完全可以根據實際場景來做決策，不需要拘泥于我給出的數值和限制。
下面，就開始進入正題吧！
首先，我們來解析一下 B 端布局的規范，即界面排版應該遵守的基本原則。
在前端 HTML CSS 的知識中，需要定義不同 DIV（或其它標簽）的長寬數值，并將這些大小不一的矩形進行排列、移動、嵌套，來實現界面的視覺樣式。
換句話說，所有置入畫面中的元素都包含一個矩形的外邊框，無論是文字、圖標、圖片、按鈕、標簽還是符號。
所以，在界面的布局中，無論我們使用什么樣的內容、字段，對于前端的頁面來講都只是無數矩形的排列過程。我稱這種布局的設計思路為 “矩陣布局法”。
矩陣布局法是設計方式和前端開發方式的統一，提升開發階段實現設計稿的效率和準確性，是每一個專業 B 端設計師都需要具備的素養。
在此基礎上，我們還有幾個統一的原則需要遵守：
1. 數值使用標準
在 UI 領域中，元素尺寸的定義不像平面設計大多以比例或“感覺”來制定，更多是使用手動輸入數值的方法來完成。
主流的系統、規范都會建議我們通過網格化參考工具來輔助我們進行布局設計，比如 Android MD 系統使用的 8*8 網格系統（常用電腦分辨率可以完美支持）。
也就是說，在這個系統中，元素的外邊框、間距，都是以 8 的倍數來設置的。這樣無論我們在設計還是在開發過程中，對于使用的數值都會有相應的默契。
但是，以 8 的倍數為基準的設計，跨越的幅度有點太大了，比如一個圖標，當你覺得 16px 小的時候，那下一檔 24px 頁可能太大了。所以，我的建議是對于相對比較復雜的項目來說，使用小一級的 4*4 網格來設計，會更兼顧靈活度和數值的統一性。
即設置元素的尺寸、間距的時候，我們都用 4 的倍數來完成，當你覺得元素的長或寬不合適，就對它進行 4px 的增減，比如下面的案例：
要警惕的是，4px 的基準，是針對元素視圖邊框的值，文字字號、圖標柵格等次級內容，并不會受到該原則的影響。且該原則只是一個設計基準的 “建議”，而不是限制，在特殊場景中可以選擇打破它。
2. 固定和響應尺寸
使用 4 的倍數完成設計，并不能解決 B 端設計中的所有尺寸問題。因為在 B 端的實際應用中，我們會加入響應式的邏輯，即頁面元素尺寸隨瀏覽器窗口的變動而變動。
所以，在設計 B 端界面元素的時候，我們要考慮兩種場景，固定尺寸和響應尺寸。
固定尺寸即不管環境發生什么變化，它的大小是定死的。比如圖標、標題、LOGO 等元素。而響應尺寸，則是一個 “未知數”，是需要一定的計算規則 “求得” 的。
比如還是搜索欄的案例，搜索框響應尺寸，而搜索按鈕是固定尺寸，那么在不同的寬度下面，它們顯示的效果如下：
要理解響應式尺寸對應規則，除了了解 CSS 中 Width:auto 屬性值的使用外，最簡單的就是搞清楚 UI 設計軟件中的響應式布局功能。
元素是響應還是固定尺寸是我們在設計過程中就做后決定的，而不是等設計做完以后再看圖說話。所以了解固定和響應尺寸的內容，在我們定義組件的過程中就要通過軟件的響應式功能進行設置，并需要在后期的標注和文檔中進行說明。
3. 常用的界面布局
最后，就是 B 端界面設計使用的主流布局形式了。雖然網頁因為畫布比手機大得多，設計的靈活性更高，但在 B 端中可以應用的布局形式也不多，只有固定的幾種。因為 B 端頁面布局中有幾個常用需要預留的坑位：導航、標題欄、工具欄、內容區域。
主要使用左右或上下布局兩個方向：
左右布局的形式，通常是左側作為導航區域，頂部作為工具欄使用。這種做法通常是因為系統內模塊較多，需要的導航數也多，用戶需要經常切換到不同模塊中去，所以左右分欄的布局可以很好的提升操作效率。
而上下布局中，則是面向一些處理場景、功能比較簡單的平臺，導航模塊少，且切換的頻率不高，主要的操作都集中在內容區域的設置上，沒有邊欄的影響還能提高操作的專注性和效率。
要使用哪種類型的布局，需要根據當前的項目功能做決定。但即使選擇了其中一類，也并不代表我們的工作就結束了，還需要在這個布局的框架下做進一步的規劃。
比如，我們需要制定內容區域多欄設計的比例劃分、復雜表單填寫系統中的內容引導欄、列表條目展開的側邊欄形式等等……
每套項目都需要先確定頁面的布局框架，然后再開始針對具體頁面、業務內容進行設計，保證整套系統操作方式的一致性。
文章來源：優設網 作者：超人的電話亭
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著項目的不斷發展，設計團隊在不斷壯大，設計師之間的協作也越來越多，相應的溝通和協作成本在不斷增加。如何才能更高效的合作，并把設計質量和一致性做的更好，是我們需要去解決的問題。
本文將以 QQ 動漫設計系統為例，分享一些過程中的思考和經驗，拋磚引玉，希望對大家有所幫助。
在項目初期，團隊設計師的協作方式是通過一個本地的 sketch 規范文件，以復制粘貼的方式來復用一些元素和控件。在設計師協作人數不多，UI 控件改動頻繁的情況下，這套流程可以比較快速的完成需求。
但隨著項目逐漸成熟，協作設計師人數變多、UI 控件逐漸趨于穩定且需要復用的地方逐漸變多時，之前流程的不足就逐漸凸顯出來。
1. 更新通知缺乏自動化
文件更新難以做到及時有效的通知到所有設計師，且需要人工在群里發通知，告知大家更新了文件。有些設計師暫時可能沒有相應的設計需求，可能會忽略更新后的文件，造成設計的不同步。或者等到需要的時候才去群里找更新的規范文件，版本容易搞錯且費時費力。
2. 全局組件更新困難
由于組件樣式是通過復制或修改的方式應用到界面設計中，當規范文件更新時，無法智能的自動更新修改相應的組件，需要設計師人工核對哪些地方有修改。這樣很難保證大家的設計版本都能得到統一的更新，當大家使用的組件版本不一致時，輸出的界面就會出現雜亂無章的情況。
3. 代碼復用率低
開發沒法全局調用代碼樣式，有些樣式可能需要反復復制使用，耗時費力，并因此產生的代碼臃腫，還會直接影響產品性能。
鑒于設計師目前多使用 sketch+xshow 的工作流程，而 xshow 正好也具備云端管理的能力，故決定以 xshow 作為橋梁，建立一個基于 sketch+xshow 的云端設計組件庫，以非常低的遷移和學習成本完成流程優化。
優化后的流程是把 sketch 本地組件庫通過 xshow 上傳至云端服務器，設計師通過 xshow 云端功能添加到 sketch 中，并在設計文件中嵌入這些云端組件。
這樣做能很好的解決上面說的問題：
1. 更新通知自動化
更新文件不用再靠人工在群里發通知，設計師也不需要去找文件，而是在 sketch 中會自動進行提醒。一旦有更新，會在右上角顯示提醒消息，設計師只需要點擊提醒，下載最新組件文件即可完成更新。
2. 全局組件一鍵更新
當更新組件庫文件后，界面中所有之前使用過云端組件的控件元素都會自動比對更新前后的差異，方便設計師判斷是否更新。這種更新最厲害的地方在于，更新是全局的，也就是一旦你確認了更新后的內容，所有界面都會自動按規范進行更新而無需設計師再逐個篩查。這樣做既能保證設計稿的一致性，也能大幅提高設計效率。
3. 開發效率和質量大幅提升
開發通過代碼把一些常用的樣式進行封裝，在一些高度復用的場景中直接調用。一方面可以通過調用的形式減少重復樣式代碼的復制，精簡代碼，降低軟件包體積，另一方面也可以減少不必要的工作量還能方便后期維護。
想要高效解決問題，正確的方法很關鍵，這里我們用到的方法就是原子設計理論。2013 年前端工程師 Brad Forst 將此理論思想運用在界面設計中，形成一套設計系統，包含 5 個層次：原子、分子、組織、模板、頁面，這套理論為組件庫的搭建提供了思路和方法。
在實際搭建過程中，因為組件庫的搭建工作量往往比較大，需要先明確流程和分工，主要包括以下幾個關鍵步驟：
1. 明確工具流程
因為是搭建云端組件庫，所以首先需要有一個云端工具進行管理。針對以 sketch 為基礎的云端組件庫來說，常用的工具流程包括 sketch cloud，各類云同步盤，第三方云數據庫自主部署等等。我們選擇的 sketch+xshow 工作流也是基于 xshow 具備云端管理功能，與其他流程本質上是一樣的，大家根據項目實際情況合理選擇就好。
2. 全面匯總并分類
按原子理論由小到大來對常規控件進行匯總并分類。對于 QQ 動漫項目來說，常見的控件類別包括：顏色、字體、圖標、按鈕、導航、狀態欄、彈窗、列表、標簽等等。每個項目所需要整理的組件不盡相同，原則就是對要復用的元素進行整理。
3. 制作樣式模板
為了便于維護和提升合作效率，將組件庫拆分為幾個不同的獨立文件，每一個文件由組件庫搭建小組成員獨立負責，減少混亂。
如果是有多位設計師參與時，因為組件庫的元素存在相互調用的情況，會遇到到底誰先做的問題。解決流程分 2 步：
QQ 動漫組件庫一共分了 5 個不同文件，分別是：基礎、操作、導航、反饋和內容。
4. 搭建本地組件庫
1?? 確定命名邏輯
提升設計效率，是組件庫存在的重要目標之一，而合理的組件命名起到了至關重要的作用。組件的名稱要保證通用性，太獨立的命名可能不夠兼容其他場景，也會讓使用的同學產生誤解。
對于組件命名，要多與使用的設計師一起探討，因為每個人的習慣都不同，方不方便因人而異，所以需要做一些平衡。
比如在做圖標命名邏輯的時候，糾結于要先按尺寸分（圖標/序號類別/尺寸/圖標名），還是按功能分（圖標 / 序號類別/尺寸/圖標名/狀態），不斷調整多次，這時候就需要找大家一起探討，怎么才是最方便的。
命名的方法是盡可能按共用屬性由多到少的順序來整理。比如，圖標共用的尺寸屬性多，就把尺寸歸到上層；如果圖標功能分類比較集中，那就把功能名稱歸到上層。根據實際項目和設計師使用情況的不同，會有不同的命名形式，命名確保效率就好。
在梳理組件庫結構命名時，先用思維導圖描繪一份結構化地圖，方便前期討論及調整。明確層級關系后，用在多人合作時進行參照，從而統一組件庫層級。在做這份結構化地圖時，需要列好全部分類、層級、具體名稱及示例。
2?? 顏色
顏色庫的設計，需要將產品中可復用的顏色匯總并分組，比如品牌顏色，按鈕顏色，圖標顏色，裝飾顏色等等，這樣可以使得用到顏色屬性的組件更加靈活。顏色的命名規范是：序號_功能/淺色 or 深色/序號 _ 屬性 / 序號 _ 狀態。例如，04 _ 按鈕色/淺色/01 _ 常規按鈕/04 _不可點
3?? 字體
字體樣式需要做全字重、顏色和左中右三種對齊方式，因為按目前 sketch 的組件邏輯，還不能修改嵌套字體的屬性。這些屬性可以對應到組件的命名上，字體組件的命名規范是：大小/序號對齊方式/屬性/用途，例如 42px/1 居左/常規/主文本。
邊做邊檢查。由于文字組件需要的命名特別多，很容易出錯，所以建議是最好每做一組，就檢查一遍。檢查的時候打開組件樣式，如果在組件預覽中發現重復或者結構不對的地方，及時調整。
多行文本行高要注意。文字的行高要尤其注意，一定要在前期檢查好尤其是多行文本的行高。如果行高前期設置不對的話，非常影響后面文本的擴展性，在用到多行文本時會遇到麻煩。想回頭修改的話，因為是最底層的原子需要逐個調整，所以代價是巨大的。
所以一定要開始設置字體組件之前就確定好行高，比如 QQ 動漫組件庫中的文字行高統一用文字大小的 1.5 倍，并取偶數作為文本的行高。當然，這里的行高也不是完全規定死，有時候也需要視情況而定。
文本的粗細。文字的粗細也是要在一開始的時候就要設置周全，最好是給所有字號的文字都設置好不同粗細的組件，盡管可能開始用不到，但會提升文字的擴展性，不然后面添加就會比較麻煩。
4?? 圖標
圖標組件最關鍵的地方在于使用邏輯和圖標規范。比如，我現在做的圖標邏輯是：圖標/類別/使用場景/具體名稱/尺寸/不同狀態，主要是按使用的頻次來整理的。也可以有其他邏輯方式，以方便使用為準。
圖標規范也會影響組件庫的整理和日常使用，在做圖標組件時，需要定義好圖標的最大范圍和最小范圍，嵌套起來使用才不會出錯。圖標的規范要嚴謹，同一個尺寸下的圖標視覺面積要保持一致。不然在大小這個層級就會出現，雖然是相同尺寸的圖標切圖范圍，但圖標的體量看起來卻并不一致。
將純色或漸變圖標中的顏色剝離，并使用顏色組件進行嵌套，這樣做既方便替換又能減少圖標組件庫的復雜度。
對于圖標的多種狀態，建議做在同一個層級中方便選擇。
對于圖標來說，直接對畫板設置切片即可，不需要再加切片框。如果你的組件庫之前用了很多切片來導出圖標，可以用 Automate 插件直接清理或設置全局的切片，非常方便。
5?? 控件
有了顏色、字體、圖標這些基礎元素后再來制作組件就會相對簡單很多，只需要通過拼裝把通用性強的組件做出來即可。這里可能需要注意設置好布局方式，讓內容盒子隨著內容的變化而變化。新版 sketch 的布局設置相對于老版本的確實會方便很多，理解起來很容易，所以這就不多討論了。
6?? 代碼組件化
在開發側進行前端 UI 組件庫的封裝，實現從設計到開發的樣式統一，提升效率和質量。
在優先級上，代碼組件化跟 UI 組件化可以同步進行，開發先寫好框架，然后隨著 UI 組件化的逐步確定，代碼也進行相應補充。
5. 構建云端組件庫
本地組件庫構建完成后，即可通過 xshow 上傳至云端，再由 xshow 直接添加到本地 sketch 中，完成整個使用流程的搭建。
6. 權限與維護
為了更好的維護云端組件庫，避免更新混亂，需要成立組件庫小組，只允許組件庫小組成員有編輯權限。日常需求中，如有新增組件，需提交給組件庫小組成員審核，通過后方可上傳至云端組件庫。
在制作組件文件的過程中，需遵循先自測后上傳的原則，避免在上傳后發現一些諸如命名錯誤、遺漏、嵌套混亂等問題，造成麻煩。
7. 編寫規范文檔
文檔的作用是給相關同事查閱，形成標準化使用流程。一些在組件庫中難體現的設計說明、未形成組件元素的使用規則或一些常見問題都可以寫在文檔里。
8. 問題與技巧
1??善用插件，提高效率
我其實是一個非常喜歡“偷懶”的人，但凡需要重復，批量的工作，我都覺得應該有更聰明的辦法。這里我推薦幾個我在做組件庫中經常用到的小插件。
2??不斷測試
組件庫的設計過程中，一定要邊做邊測試，尤其是在前期確立邏輯的時候，要不斷檢測是否真的好用。
3??內容更新權限與維護需要專人專辦
舉例：假設我負責字體，那么后續所有的字體更新相關都只找我來修改。若其他人在組件庫內找不到相應的組件搭建頁面而又特別高頻使用，需要向組件庫小組提出申請，并由對應組件庫管理員進行更新，不可以私自修改組件庫內容并上傳。
組件化思維不僅僅應用在 UI 領域，甚至在各行各業都需要建立組件化，比如對于一些時效性非常強的新聞產品，就需要針對突發事件內容模板化，以期能第一時間發布；如果想追熱點，組件化能夠使得產品具備隨時跟進熱點的能力，提升市場競爭力等等。
組件化是一種思維模式，也是如今設計師必不可少的能力。通過組件庫提升效率能夠讓設計和開發有更多的時間去打磨產品細節，從而打造出對用戶更加友好的產品，賦能設計的價值。
文章來源：優設網 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
