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