每一種實際上作為一個小方法，都可以進(jìn)行舉一反三。比如線裝飾，線可以是直線、可以是曲線、可以是粗線、可以是細(xì)線、可以是實線、可以是虛線、可以是有顏色的、可以是放射狀的、可以是無規(guī)則的、可以是涂鴉風(fēng)格的….

假設(shè)每一種分類你可以舉一反三變成五種，那么我這里的二十種就是一百種，那么我這篇文章的標(biāo)題就可以起名為：一百種標(biāo)題，拿去抄，多少有點不要臉了…接下來全部是圖，沒有一句廢話

20種標(biāo)題排版技巧：

以上就是我為大家整理的20種標(biāo)題排版設(shè)計技巧啦！快去試試吧，讓你的作品閃閃發(fā)光，吸引更多的目光和心心！

本篇將通過四個案例詳解行書風(fēng)格字體的設(shè)計原理。

案例一：趣玩

Step1:  在書法字典或以觀書法等網(wǎng)站找一些趣玩這兩個字的行書資料：

Step2：參考找好的行書資料，使用鋼筆工具繪制出字體的骨架，注意保持橫筆傾斜角度的統(tǒng)一：

Step3：將描邊加粗，并調(diào)整兩個字的比例關(guān)系，使兩個字看上去更加整體靈動：

Step4：使用寬度工具將描邊線條調(diào)出粗細(xì)變化，讓字體看上去更具書寫感，線條的粗細(xì)關(guān)系仍參考行書字體：

Step5：將字體輪廓化，調(diào)整部分豎筆畫的起筆角度和粗細(xì)，并在部分筆畫交叉處加入 ink trap 切角，使字體更有細(xì)節(jié)：

Step5：加入合適的圖形和色彩做整體編排，這個案例就完成了：

案例二：口味羅氏蝦

Step1:  依然是在書法字典或以觀書法等網(wǎng)站找這五個字的行書資料，有些字如果找不到，那就找偏旁部首的字來拼：

Step2:  直接使用鋼筆工具在找好的資料上把字體的基礎(chǔ)骨架勾出來：

Step3：對勾好的基礎(chǔ)骨架進(jìn)行調(diào)整，讓五個字的結(jié)構(gòu)和大小在視覺上更加協(xié)調(diào)，并將描邊加粗：

Step4：使用寬度工具將描邊線條調(diào)出粗細(xì)變化，讓字體看上去更具書寫感，然后將字體輪廓化，調(diào)整部分筆畫的細(xì)節(jié)：

Step5：在部分筆畫交叉處加入 ink trap 切角，使字體更有細(xì)節(jié)：

Step6：加入英文、日文以及鋼筆畫風(fēng)格的蝦，做整體編排，這個案例就完成了：

案例三：茉莉

Step1:  使用鋼筆工具繪制基礎(chǔ)字形（此步驟可以用墊底字，但需注意最終結(jié)構(gòu)與墊底字有所區(qū)別）：

Step2:  找一些這兩個字的行書資料（整字找不到就找偏旁部首）作參考，將字體中的部分筆畫替換為行書的結(jié)構(gòu)：

Step3:  最后，加入品牌其它相關(guān)信息，做整體的編排，一個品牌LOGO的字體案例就完成了：

案例四：野獸派

Step1:  使用鋼筆工具繪制基礎(chǔ)字形（此步驟可以用墊底字，但需注意最終結(jié)構(gòu)與墊底字有所區(qū)別）：

Step2:  依舊是找一些這三個字的行書資料，盡量多找一些，然后從中提煉可以應(yīng)用的筆畫形式：

Step3:  從行書資料中提煉筆畫形式，應(yīng)用到基礎(chǔ)字形中，替換掉原有筆畫：

Step4:  嘗試多種筆畫形式，對于一些應(yīng)用效果不太理想的連筆形式，需要舍棄掉，選擇最優(yōu)方案：

Step5:  選出最優(yōu)方案，加入品牌其它信息和合適的圖形外框做整體的編排，這個案例就最終完成了：

四個案例到此就結(jié)束了，最后回顧一下本篇要點：本篇文章中講到了兩種行黑風(fēng)格的字體設(shè)計思路，一種是完全用行書的骨架加黑體的筆形特征，另一種是將黑體的部分筆畫替換為行書的特征，在應(yīng)用時需要根據(jù)實際場景去選擇適合的形式，你學(xué)會了嗎？我們下一期見，拜拜！

作者：文兩道 來源：字美之道（ID：zimeizhidao）

首先我們先整理一下所需要的文案，這里將信息進(jìn)行層次劃分，用大小粗細(xì)做區(qū)分。

接著我們可以思考一下如何去設(shè)計，如果沒思路的話，簡單點的方法就是先找參考海報去“抄”一下，今天我就找了一張日式海報，先來分析這個海報的特點，可以看出信息是居中分布，主體上下放置，風(fēng)格比較輕松。

OK，這時候就要開始頭腦風(fēng)暴了，畫面顯然要有兩只貓咪，到這里可以去找一些貓咪的插畫風(fēng)格來參考來，不用著急找現(xiàn)成的素材，這不，我覺得這種風(fēng)格就很好。

多魔性的小貓咪，畫起來也很簡單，接著開始構(gòu)思版式，稍作加工，畫出草圖

上一步完成就已經(jīng)成功一大半了，接著經(jīng)過我的不懈努力，貓咪畫的栩栩如生

接下來我們將剩余的信息進(jìn)行排版處理，劃分好大小層次，主標(biāo)題可以做成手繪字體，與整體畫面更匹配。

下一步我們將處理好的信息全部放入到畫面中，調(diào)整好大小與位置。

最后我們來完善畫面，加上一些線條和元素來增加氛圍，同時使畫面聯(lián)系更密切，背景加上小魚干增加層次感，最后搭配顏色，海報就設(shè)計好啦。

最后做一個樣機(jī)，增強(qiáng)視覺展示效果，也可以用多種色彩搭配。

OK，分享就到這里了，學(xué)會用草稿的形式去設(shè)計海報，會是一種很不錯的思路哦，大家趕緊去上手嘗試吧。

作者 | 趣趣熊
來源 | 趣設(shè)記 （id: qushejiba）

今天的分享是關(guān)于排版細(xì)節(jié)問題，通過7個排版案例，告訴設(shè)計師有哪些版式設(shè)計的小細(xì)節(jié)容易忽略，比如圖片的比例、文章的序號一節(jié)信息的拆分與重組，小小的改動看起來很簡單，但可以讓設(shè)計更加精致。

01. 處理圖中的阻礙物

我們經(jīng)常遇到一些圖片主體的周邊會存在多余的雜物，這樣就會影響圖片整體的視覺效果。因此需要把這些阻礙物處理掉，讓傳達(dá)的信息更突出，畫面看起來才會更美觀。

02. 圖片的比例是否統(tǒng)一

當(dāng)出現(xiàn)多圖片的時候，如果所展現(xiàn)的圖片比例不一致，就很容易喪失整體性和統(tǒng)一感。應(yīng)確定所展現(xiàn)的部分是特寫還是整體，再進(jìn)行圖片比例的調(diào)整。

03. 盡量將序號和文本分開

在編輯大段文本的時候，我們可能會遇到這種的問題。就是數(shù)字序號和文本擠在一起，看起來會沒那么整齊。所以我們盡量將序號和文本分開，不要連在一起編排，這樣才顯得整齊和便于閱讀。

04. 學(xué)會對信息拆分和重組

當(dāng)我們遇到這種長短不一的時間編排的時候，就需要將信息拆分和重組。你會發(fā)現(xiàn)重組之后，從線到面，整體會變得更具有設(shè)計感和趣味性，信息傳達(dá)也更清晰明了。

05. 不宜使用過多的色彩

如果一個版面使用過多的色彩，會造成版面信息混亂，失去重點。如果非要使用多種顏色，可以利用相同色相不同的純度或明度進(jìn)行配色。即便是不同的顏色，在色相相同的情況下，也能帶來統(tǒng)一的視覺感。

06. 跨越幾個欄或幾個單元格來編排

無論是什么類型的網(wǎng)格，都可以作出不同變化的版面效果。但是一提到網(wǎng)格系統(tǒng)，很多設(shè)計者通常都會把設(shè)計要素都放置在一個欄里或一個單元格中，這樣的畫面容易缺乏變化感。其實可以跨越幾欄或幾個單元格來進(jìn)行編排，這樣才能設(shè)計出不同變化的版面樣式。

07. 行寬不能過短或過長

行寬過短會導(dǎo)致眼睛需要來回掃視，容易跳行，破壞閱讀節(jié)奏。行寬過長則視線移動距離大，影響閱讀體驗，甚至?xí)?dǎo)致版面擁擠，留白感不夠。

當(dāng)然啦，還有其他需要注意的排版細(xì)節(jié)沒列出來，這只是其中一小部分。所以細(xì)節(jié)能看出一個作品的精致度，千萬不要認(rèn)為細(xì)節(jié)處理是浪費時間。當(dāng)你把細(xì)節(jié)都做到位的時候，就可以跟小白階段說拜拜了。如果你喜歡這系列的內(nèi)容，記得給我點個贊哦，會堅持下去更新的。

文字LOGO設(shè)計看似比圖形簡單，卻也很考驗設(shè)計師對字體設(shè)計的功底，以及對文字涵義的理解和具象化能力。既要具有一定的視覺效果即美觀度，又要保證LOGO的易識別性及應(yīng)用的廣泛性。那么文字LOGO的記憶點設(shè)計，則是整個設(shè)計中的重點。接下來為大家整理了六種記憶點的設(shè)計方法 ：

注：本篇所有例字均收集自互聯(lián)網(wǎng)，因時間跨度較久，無法每個都能標(biāo)注出作者，如有侵權(quán)請私信聯(lián)系，請見諒。

外型統(tǒng)一，顧名思義就是每一個文字的外型或者外輪廓是保持一致的。那么該如何確定外型呢，可以是根據(jù)文字的涵義去定義圖形的形狀，也可以是根據(jù)項目的具體情況確定相關(guān)的圖形。

比如這個內(nèi)蒙古的城市LOGO，每個字的外形都是一個蒙古包的形態(tài)，很好的將文字的形和義融合在一起，同時也形成了一個清晰的記憶點。

再來看這組可口可樂的文字，將每個字的外型設(shè)置為一個倒三角形，然后根據(jù)輪廓的走勢將里面的筆畫也進(jìn)行變化。當(dāng)然這并不是可口可樂的標(biāo)識，可能是應(yīng)用在某個節(jié)目場景，為了契合節(jié)日的氛圍，將字體的輪廓設(shè)置為彩旗的形狀。

首先根據(jù)項目名稱中的字義，我們來設(shè)定文字外形。“春雲(yún)舍”三個字當(dāng)中的“云”和“舍”字，更容易聯(lián)想到具象的事物。這里我們選定“舍”字作為核心詞語，以“舍”字進(jìn)行具象圖形聯(lián)想，作為文字外形。同學(xué)們?nèi)绻信d趣可以嘗試以云字作為核心去聯(lián)想相關(guān)的具象圖形。

“舍”是房屋的意思。那么我們搜索古風(fēng)建筑，并從中找到非常具有美感的江南的建筑，根據(jù)屋頂?shù)脑煨吞釤挸鰩缀胃械脑煨?，作為文字的外形?/p>

確定外形后，我們先在墊底字的基礎(chǔ)上進(jìn)行草圖繪制。這一步確實很草，不著急不要緊，后面再一步步優(yōu)化就好。

然后我們再將草圖墊底，在草圖的基礎(chǔ)上進(jìn)行優(yōu)化。讓整體更規(guī)范和秩序。

將線條加粗后，我們發(fā)現(xiàn)有些地方太過緊密，這種情況在文字縮小后，局部會糊成一團(tuán)。

所以我們可以將這些地方的筆畫再進(jìn)行簡化處理。簡化后的字體正負(fù)空間的對比更舒適。

接下來再將線條筆畫擴(kuò)展，再將筆頭切平就可以了。

最后再加上一個簡單的排版就完成了。

筆畫統(tǒng)一是指分析筆畫的特征尋找出一組文字中的筆畫共性，再對這一筆畫進(jìn)行創(chuàng)意的調(diào)整，從而形成秩序的變化。

比如這一組起跳點，通過尋找走之底，足字底以及點的四點底之間的共性，再將這些筆畫進(jìn)行統(tǒng)一的圖形化處理，既保證了識別度，又讓文字之間有了關(guān)聯(lián)性和秩序感，從而形成了記憶點。

如迪這一組是我非常喜歡的一個LOGO。將口字與由字的轉(zhuǎn)折那一筆做了統(tǒng)一的變化，融合了傳統(tǒng)書法行書的筆畫走勢，整體筆畫又是幾何極簡的風(fēng)格，整體既簡約又富有現(xiàn)代感。

接下來我們使用“奈米果”這個命題來進(jìn)行嘗試

通過分析，我們發(fā)現(xiàn)這三個字的下半部分有一定的相似性，所以我們可以嘗試把這部分的筆畫做統(tǒng)一的變化處理。這個項目的行業(yè)為日系食品類，所以字體的調(diào)性定為具有傳統(tǒng)氣質(zhì)的襯線體。以宋體字為基礎(chǔ)，記憶點的部分可以嘗試替換為行書筆畫。

我們找出關(guān)于這三個字的一些行書的碑帖，通過觀察可以看到，最后一筆都有連筆的形態(tài)，那么我們可以嘗試將最后一筆進(jìn)行一個連筆形態(tài)的變化。

我們以宋體字的特征為基礎(chǔ)設(shè)定出具有相應(yīng)筆飾的筆畫。先做出橫豎撇捺點這幾筆基礎(chǔ)筆畫就可以。

選一個宋體字做為墊底字，可以將字高壓扁一點，增加字體的穩(wěn)定感。用剛才做好的筆畫以墊底字為基礎(chǔ)搭建出新的文字結(jié)構(gòu)。

將搭建好的字體提取出來，并進(jìn)行結(jié)構(gòu)細(xì)節(jié)上面的調(diào)整，讓整體更協(xié)調(diào)。

然后我們在碑帖上提取出連筆筆畫。

再將每個字的最后一筆替換成行書的連筆筆畫

最后再搭配上簡單的排版，就完成了。

替換筆畫，非常好理解，就是將一部分的筆畫替換為其它風(fēng)格或者形式?？梢允峭馕模梢允菙?shù)字，可以是符號等等，當(dāng)然無論怎樣變化，依然需要保持識別度。通過不同字形的對比，形成記憶點。

這一組字就是將一部分筆畫替換為與本身筆畫相似的數(shù)學(xué)符號，并把顏色也改為對比色。讓替換的符號更為突出，更具有趣味性和設(shè)計感。

接下來這一組則是將部分筆畫替換成日文的平假名，而日文的平假名是根據(jù)中文的草書演化而來，所以看上去也像是融合了草書的筆畫。

我們來嘗試將筆畫替換為標(biāo)點符號的形式去做一個字體LOGO

打出命題“有點南”，我們可以發(fā)現(xiàn)這三個字都有一個框的共同點，那么我們可以嘗試用替換“（）”去替換這個框。

在墊底字的基礎(chǔ)上，使用簡潔的筆畫搭建出字體的結(jié)構(gòu)。然后將豎筆替換為“（）”。

將搭建好的文字提取出，然后我們可以發(fā)現(xiàn)“（）”上的橫筆破壞了符號的識別性，如果識別不出，那么我們替換這個筆畫也就沒有意義了。

所以我們將“（）”上下的橫筆減掉。很好，去掉橫筆的文字也沒有影響識別性，整體結(jié)構(gòu)變得松散。

所以接下來我們調(diào)整細(xì)節(jié)，將南的結(jié)構(gòu)調(diào)整的更松散些，讓整體的負(fù)空間更協(xié)調(diào)。統(tǒng)一三個字的字面大小，以及調(diào)整整體結(jié)構(gòu)的細(xì)節(jié)。

到這一步基本就完成了，但是因為結(jié)構(gòu)松散后，字體的氣質(zhì)也變得更悠閑的感覺，但是筆畫太過硬朗，破壞了整體輕松的氣質(zhì)。

所以我們嘗試將筆畫改為圓頭，增添更多親和力，字體的氣質(zhì)也更偏向可愛輕松感，與文字涵義也更契合。

最后再搭配合適的排版就完成了。

圖形裝飾是指在統(tǒng)一形態(tài)的字體基礎(chǔ)上，添加圖形進(jìn)行裝飾，或者也可以刪減筆畫，用圖形替代筆畫或者某個部分。讓LOGO形象更生動更具有感染力。

比如這組文字就是將一部分筆畫替換為幾何圖形進(jìn)行裝飾，圖形是用圓形拼建出的云朵造型，生動的表達(dá)了松林間的意境。

刺青這組字則是將一部分筆畫改用線條表達(dá)， 直觀的表現(xiàn)刺青的畫面感。

第一步還是先用筆畫將結(jié)構(gòu)搭建出來，筆畫就是基礎(chǔ)的矩形，沒有什么筆飾就不特意說明了，注意豎筆比橫筆粗一點就可以了。

然后我們用四個圓形拼出一個花瓣的形狀，中間部分用一個十字交叉線，擴(kuò)展后并拉出圓角。再與花瓣圖形進(jìn)行修剪就得到右邊的圖形了。

接下來我們就將畫出來的花瓣圖形添加到文字中，將野字上面的田字替換掉。

為了與圖形適配，我們可以將部分筆畫轉(zhuǎn)為圓角。

因為筆畫較粗，整體呈現(xiàn)的感覺比較厚重，我們可以對筆畫銜接處，進(jìn)行切角或者斷筆處理，增加整體的透氣感。

最后再搭配相同氣質(zhì)的英文就完成了。

結(jié)構(gòu)變異是指通過調(diào)整字體的結(jié)構(gòu)改變文字的重心，字面，中宮等，比如統(tǒng)一壓低或者抬高重心，收緊中宮，或者將部分筆畫進(jìn)行夸張變化等方式。通過結(jié)構(gòu)的變異，讓字形更為獨特，形成一種巧妙的記憶點。

比如說這一組字，筆畫的處理很干凈沒有什么特征，但是在結(jié)構(gòu)上做了很大的變化，統(tǒng)一將重心下沉，同時字面拉高，形成反差產(chǎn)生記憶點。

而這一組字則是將一些筆畫或者偏旁部首進(jìn)行夸大或者縮小或者位移等方式進(jìn)行變化，讓文字變得很有個性，也很好的詮釋了文字本身想表達(dá)的涵義。

先打出墊底字，我們將字面設(shè)定為瘦長型，把墊底的字體也需要拉長處理。

然后在墊底字的基礎(chǔ)上進(jìn)行直接使用鋼筆拉出線條進(jìn)行結(jié)構(gòu)的搭建。需要注意所有的撇和捺都用傾斜45度的線條。大致拼出就可以，之后再調(diào)整細(xì)節(jié)。

用長方形作為字面框，方便規(guī)范字面統(tǒng)一。再調(diào)整一些細(xì)節(jié)，將筆畫集中分布在上面和下面的區(qū)域，留中間的位置。

然后將線條擴(kuò)展，再將部分筆畫做切平處理。

上下兩部分的間距太大，文字的割裂感太強(qiáng)，所以我們可以嘗試將一些豎筆拉長，連接上下兩個部分，但整體的上下分離的結(jié)構(gòu)不受影響。最后再加上一個合適的排版就完成了，是不是很簡單。

字型混搭是指將不同風(fēng)格不同類型的文字進(jìn)行混搭在一起，形成沖突卻不突兀的強(qiáng)烈對比感。

這組生而不同，就是將“而”字替換為一個手寫體的日文字，同字中間的口字也替換成一個英文字母O。讓單調(diào)的無襯線字體變得生動獨特起來。

這組也是使用了同一種方法，用兩個花體英文字母拼出一個陽字，將手寫感的陽字與無襯線黑體結(jié)合碰撞出不同的感，讓文字更有趣味性。

首先我找到一個合適的偏手寫體的英文字體，將所有的字母打出來，如果有需要也可以將所有的標(biāo)點符號和數(shù)字也打出來。

然后根據(jù)墊底字的先搭配出大致的字體結(jié)構(gòu)。并將部分筆畫直接用字母代替。其它筆畫的風(fēng)格也可以跟字母的風(fēng)格調(diào)整為有粗細(xì)變化的形態(tài)。

搭建好后，我們發(fā)現(xiàn)字母的小襯角，以及部分筆畫太細(xì)，與其它的筆畫對比過大。

可以將襯角減掉，筆畫較細(xì)的地方，也可以根據(jù)需要調(diào)整得粗一點。“時”的一點有點過大，這里我們直接用一個圓形代替。最后再搭配上合適的排版就完成了。

關(guān)于文字LOGO記憶點的設(shè)計方法還有很多，來日方長，以后我們可以繼續(xù)探 索。今天的教程就到這里啦！

作者：yoyo 來源：胡曉波工作室（ID：ziyou-design）

一、圖文框的種類

不同造型和形態(tài)的圖文框，其氣質(zhì)以及用途也會有所差別，常用于排版的圖文框有以下幾種：

? 幾何圖文框

幾何圖形是最簡單的圖文框，最常見的有矩形、圓形、橢圓形、圓角矩形等等，主要用于信息分組、信息強(qiáng)調(diào)。

? 異形圖文框

這類圖文框常用于海報設(shè)計中，像一塊補(bǔ)丁一樣，把文字插入在畫面中，有點拼貼藝術(shù)的感覺。

? 對話框

對話框具有一定的指向性，常用于排版對話文案、海報標(biāo)題、插入補(bǔ)充性文字等。

? 爆炸框

爆炸框具有很強(qiáng)的視覺沖擊力，以往最常用于商品價格之類的促銷信息，近幾年，爆炸框在海報設(shè)計中非常受歡迎，變成了一個很時尚的設(shè)計元素。

? 立體框

即在平面圖文框的基礎(chǔ)上增加3D效果，這種圖文框視覺效果更突出，而且可以加強(qiáng)版面的空間對比，是設(shè)計促銷海報的不錯選擇。

? 虛線框

虛線框比起線框在視覺上更精致、更可愛，如果你想用圖文框進(jìn)行排版，但又不想圖文框很突出，或者是做與兒童相關(guān)的設(shè)計時，虛線框會是一個不錯的選擇。

二.如何選擇合適的圖文框

前面我們介紹了幾種不同造型的圖文框，但其實除了造型上的差異，圖文框還有圓角和尖角、直線和曲線、填色和描邊等方面的差異，我發(fā)現(xiàn)很多設(shè)計師經(jīng)常會用錯圖文框，那么，該如何來選擇正確的圖文框呢？通常是根據(jù)視覺調(diào)性和內(nèi)容的多少來選。

? 如果想要高級、簡約的效果，適合用幾何形圖文框，如矩形、圓形、橢圓形、拱門形等，而且一般是用描邊圖文框，當(dāng)然描邊自然不能太粗。

? 如果想要時尚一點、酷一點，通常要用填色圖文框，即我們平常所說的色塊，而且圖文框的輪廓最好是比較尖銳、硬朗的，比如直角矩形、平行四邊形、尖角的爆炸框、像素圖文框、不規(guī)則的多邊形等等。

當(dāng)然，這類圖文框的色彩搭配也很重要，通常是使用飽和度較高的對比色。

? 如果想要視覺效果柔和一點、可愛一點，則更適合使用一些圓潤、柔軟的圖文框，比如圓角矩形、圓形、云朵形、曲線異形等等。

? 如果想要復(fù)古或中國風(fēng)的效果，用中式、港式的圖形框很容易出效果，這類圖文框通常是描邊圖文框，或者是填色加描邊雙效果圖文框，而且描邊通常較粗。

? 圓形、橢圓形、爆炸框之類的圖文框，通常只適合文字比較少的情況，文字較多時，矩形框和異形框會比較適合。

三、圖文框的使用小細(xì)節(jié)

? 圖文框內(nèi)的文字應(yīng)該與圖文框的邊界保留一定的距離，通常來說，在文字是橫排的情況下，文字離圖文框的上下距離不得小于正文的行距，左右不得小于1個正文字符的寬度。

當(dāng)然，重點是視覺要舒適，要便于閱讀，如果文字比較多、字號比較大,那么通常會排得比較滿，即文字與圖文框邊界的距離會比較小,反之,則會比較大。

? 如果想要視覺效果比較輕松、高級，那么圖文框內(nèi)的留白可以盡量多一點，比如網(wǎng)頁和UI中的按鈕設(shè)計通常就是這么做的。

? 文本框內(nèi)的文字排列方式，要盡量與文本框的形狀相呼應(yīng)，視覺上才會比較和諧，即矩形框的文字也要排成矩形，圓形框的文字要排成圓形。在下方的長圖中，文字排版的輪廓形狀基本都是跟所對應(yīng)的圖文框輪廓相呼應(yīng)。

四、如何避免版面變得死板?

? 圖文框內(nèi)的文字盡量不要左右兩端嚴(yán)格對齊，可以采用居中對齊或者左對齊等方式，不要把圖文框塞得太滿，盡量多留一點呼吸空間。

? 給文字信息加上圖文框還只是開始，如何排好框內(nèi)的文字才是重點，要盡量把圖文框內(nèi)的排版做得精致一點?？騼?nèi)的文字必須有著豐富對比關(guān)系和清晰的層級關(guān)系，比如要有字號大小區(qū)分、顏色區(qū)分，可以給小標(biāo)題增加小的圖文框、用圖文框突出某些重要詞句、用線區(qū)隔信息、給信息進(jìn)行分組、加一些裝飾元素等等。

? 圖文框之間可以錯位排版和疊加處理，不要每個圖文框都嚴(yán)格對齊和均等分布；

? 圖文框之間也可以有大小對比、輪廓對比、方向?qū)Ρ取⒖臻g對比等，這樣的版面才會有主次，有變化，視覺上不至于太單調(diào)。

? 可以對圖文框進(jìn)行適當(dāng)打破，使一部分元素或文字沖出圖文框，比如把部分文字或圖片元素疊加在圖文框的邊界處，創(chuàng)造出框里框外的對比效果，也可以加強(qiáng)版面的靈活性。

注：最好不要把版面里的所有元素都放進(jìn)圖文框內(nèi)。

? 使用不規(guī)則圖形作為圖文框，或者將圖文框和文字一同做旋轉(zhuǎn)和扭曲，也可以有效打破傳統(tǒng)、常規(guī)的視覺效果。

圖文框真的非常強(qiáng)大，結(jié)合不同的設(shè)計需求和其他設(shè)計知識，你可以創(chuàng)造出無限的可能，基本上可以解決大部分的設(shè)計問題，以上蔥爺分享的內(nèi)容只是九牛一毛，這些所謂的方法也絕對不是標(biāo)準(zhǔn)，因為設(shè)計是不存在標(biāo)準(zhǔn)的，所謂的經(jīng)驗和技巧只是能幫助經(jīng)驗不足的設(shè)計師可以更快做對、做好，如果你夠強(qiáng)，所有的經(jīng)驗都可以打破。

作者：蔥爺 | 公眾號：蔥爺 (id:congyenanian)

建議收藏起來，方便隨時查看～

  用戶頭像篇

關(guān)于用戶頭像這個板塊的信息，如果采用昵稱向上對齊，ID向下對齊的方式，兩塊內(nèi)容就會很分散，不夠聚焦。

如果頭像和背景的顏色有一部分接近或者顏色一樣，看起來會感覺頭像好像少了一塊，例如左圖。為頭像框添加描邊，讓頭像更有整體性，還可以讓文案對比更明顯，頁面看起來也會更精致。

當(dāng)用戶使用手機(jī)注冊登錄后，新用戶沒有頭像的情況下，就要給一個默認(rèn)頭像，或者使用品牌IP形象，增加用戶的品牌記憶。

  按鈕篇

當(dāng)一個頁面有兩個操作按鈕時，可以區(qū)分出來一個最重要的按鈕，引導(dǎo)用戶更容易去進(jìn)行選擇。

當(dāng)彈窗背景是白色的時候，會有點空蕩的感覺，顯得細(xì)節(jié)不夠，可以為背景豐富細(xì)節(jié)，增加耐看程度。

當(dāng)使用亮色按鈕時，如果文字也比較亮，識別度就會很差。識別度對比一定要明顯，亮底暗字，暗底亮字，畫面一定不能出現(xiàn)識別模糊的情況。

登錄板塊，在用戶未輸入的狀態(tài)下，登錄/注冊按鈕呈現(xiàn)置灰狀態(tài)，給人不可點擊的感覺。輸入信息后，激活登錄按鈕高亮狀態(tài)，這樣可以更清晰地引導(dǎo)用戶操作下一步。

在這樣的登錄狀態(tài)中，輸入后與未輸入的文字顏色需要給予一定的區(qū)分，這樣便于用戶區(qū)分哪些是填寫和未填寫的。在輸入框可以增加對應(yīng)的icon ，讓整體感覺更豐富。

  卡片排版篇

關(guān)于投影的使用技巧，盡量選擇顏色微淺或者和卡片顏色相近的投影。左圖的投影使用比較深的顏色，會讓畫面太過沉重。

在圖文式卡片排版的場景中，圖片占比內(nèi)容區(qū)域大，能起到突出重點的作用。

右圖內(nèi)容少的時候使用的是黃金分割比法則 0.618:1的比例。當(dāng)內(nèi)容多的時候，左圖的布局也不錯，瀑布流排下去能避免過于死板。

卡片上有過多的小標(biāo)簽時，可以加一個淡色的底，這樣不會給人文案很多的感覺，整體視覺不會很分散，且層級更加分明，讓用戶更快速的找到自己需要的信息。

卡片背景直接排上文案，背景會顯得很空，沒有層次和細(xì)節(jié)。所以在做背景的時候，適當(dāng)加上一些細(xì)節(jié)，就會顯得耐看很多。

文案直接加在圖片上時，要去對應(yīng)地處理圖片，例如給圖片加一個蒙版，這樣就不會導(dǎo)致文字的顏色和圖片疊加在一起看不清的情況。

在做效果圖的時候，有圖片需要添加到設(shè)計稿中，盡量選擇搭配起來比較和諧的圖片，比如：飽和度、色相、亮度等盡量保持差不多的感覺，這樣看起來會增加設(shè)計稿中的整體一致。

在有多個板塊需要做成滑動的時候，需要留出一個被遮住的板塊，代表還有內(nèi)容可以滑動。在左圖中，多個板塊剛好做成一個寬度的內(nèi)容，那么用戶不知道后面還有內(nèi)容可以滑動。

  文字排版篇

文字行間距的把控，對于較大的文字，行間距通常來說采用文字大小1.5倍的間距，文字較小時使用1.2倍的間距會比較合適。通常情況下，我會設(shè)置比1.5倍還大一些的間距，文字行間距太小不易于用戶閱讀，可適具體情況而定。

當(dāng)主標(biāo)題和副文案一樣長的時候，整體會顯得很呆板，且看著是一團(tuán)字的感覺，這時就可以讓標(biāo)題和副標(biāo)題之間產(chǎn)生長短不一的顯示，就不會那么呆板。

在卡片上排列信息時，需要用到線條的時候，線太深給人感覺分割會很明顯，把線的顏色調(diào)淺，有一點感覺在會比較好。

接著上面的信息排列，另一種方案是可以把線去掉，增加上下兩者的間距，擴(kuò)大留白也可以起到拉開信息之間的板塊區(qū)分，讓整個畫面更加簡潔和干凈。

信息已填寫與未填寫的一個區(qū)分，已填寫過的信息用深一些的顏色，未填寫的信息用淺一些的顏色，這樣利于用戶更快速找到需要修改和填寫的信息。

對于導(dǎo)航選中的欄目，選中的信息顯示和其他的欄目對比要拉開。對比弱的話，用戶一眼看不出來當(dāng)前選擇的導(dǎo)航欄目是哪一個。針對選中的欄目，可以根據(jù)品牌形象去做延展，建立品牌認(rèn)知感。

面對內(nèi)容過多的場景，分別將兩組信息排在畫面里，例如左圖，會感覺整個畫面信息很多，而且很分散。

在右邊的排版中，加了一層背景包裹起來分別對應(yīng)的信息時，會讓信息層級更加分明。

圖標(biāo)和文字搭配的情況下，為圖標(biāo)加一個底色，可以讓該頁面圖標(biāo)的大小視覺保持一致，也會給予其重心的承載作用。

在需要突出信息的時候，左圖的排版方式并沒有達(dá)到需要突出的信息，看不到重要的信息。如前面所說，在做信息層級的時候?qū)Ρ纫欢ㄒ_，才能突出最重要的信息，讓用戶一眼get到主要信息。

文案信息板塊的排版，當(dāng)文案層級對比不是很明顯的時候，如第三種，居中排列文案，會使閱讀體驗很差，視覺參差不齊的循環(huán)。當(dāng)文案層級比較明顯的時候，居中對齊也是一種比較好的方式。

當(dāng)文案標(biāo)題需要加硬投影的時候，亮字下應(yīng)該加顏色較暗的投影，例如右圖。如果亮字下面的投影顏色還是很亮，會出現(xiàn)標(biāo)題文案識別不清晰，對比度不足。

最后

以上就是全部的UI/UX設(shè)計技巧，希望通過這些技巧能夠讓你對界面設(shè)計加入更多思考，打造更好用的產(chǎn)品！

另外推薦大家去「下雨天DS」主頁查看更多內(nèi)容：myandy.zcool.com.cn

慢慢來比較快，如覺得有幫助，

漸變無處不在。這不再是90年代的一種趨勢，設(shè)計師們傾向于在現(xiàn)代簡約的UI中使用漸變。背景、按鈕、開關(guān)、卡片、甚至是陰影，你所有能夠想到的地方都有漸變的存在。漸變已經(jīng)橫掃了數(shù)碼產(chǎn)品和Dribbble/Behance這樣的設(shè)計平臺。

什么是漸變呢？

漸變是從一種顏色過渡到另一種顏色，是由很多種顏色組成的混合（一個漸變可以有無限多的陰影）。

我們可以在很多方面使用漸變。例如在背景和前景的漸變元素，可以做出微妙或者是極端大膽的顏色組合。

因為漸變是通用的，我們可以用他們來傳達(dá)獨特的設(shè)計或者品牌理念。

在這篇文章中，我想要分享一些實用的技巧，讓你的漸變設(shè)計脫穎而出。

找到正確的靈感

首先，我們需要找到源頭。

漸變最好的靈感來源就是大自然。因此，最開始的設(shè)計過程就是花時間去觀察現(xiàn)實世界。尋找風(fēng)景、環(huán)境或者植物的照片作為你的顏色來源，并且和你的項目建立起聯(lián)系。

創(chuàng)造自己的調(diào)色板

使用“顏色選擇器”找到合適的部分。從一張照片/圖片中選擇2-3種醒目的原色來構(gòu)建你的調(diào)色板。

建議一開始只選擇少量的幾種顏色。因為RNG顏色模型只有三個變量，這意味著你可以混合紅（R）、綠（G）、藍(lán)（B）來構(gòu)建出任何的漸變。RGB的值通常是在0-255之間。

此外，為了使得構(gòu)建出來的漸變看起來比較柔和平滑，在構(gòu)建調(diào)色板的時候考慮值的變化在50-150之間。

混合調(diào)色板的顏色

在選好的調(diào)色板上創(chuàng)建一個新的圖層，并通過添加“背景模糊”的效果來實現(xiàn)平滑的過渡。

創(chuàng)建一個新的圖層，用獲得的模糊的路徑重新創(chuàng)建線性漸變。

在線性漸變中使用徑向漸變以增加深度

徑向漸變用于模擬光照，而光照并不總是線性的。你可以將徑向漸變應(yīng)用到預(yù)先設(shè)計好的線性漸變上，并配置光源的方向，使它看起來效果更好。

使用有意義的漸變方向

在有需要的地方使用漸變方向。例如，使用發(fā)射光源以突出特定的元素，通過將文本放置在彩色區(qū)域使其更具可讀性，或者通過具有平滑的漸變路徑的UI引導(dǎo)用戶。

增加顆粒噪點使其具有沖擊力

在Figma或Sketch中，可以在漸變上添加一層紋理，使其看起來有復(fù)古風(fēng)。在網(wǎng)頁端你可以通過在漸變上放置圖片來應(yīng)用顆粒噪點效果。

在這里你可以學(xué)到如何用CSS添加噪點。

注意：你通常只需要0.1%到0.5%的噪點圖像透明度。

將漸變和抽象形狀結(jié)合起來

為了使你的漸變效果更酷炫，甚至可以使用抽象的半透明形狀。使用“蒙版”工具在漸變層之外或之上嵌套斑點或波浪形狀。

感謝閱讀

原文：https://blog.prototypr.io/how-to-design-sexy-gradients-a897b42c245
翻譯：花火譯文小組
來源：靜Design（ID：JingDesign91）

?

從起名開始

客戶是出版社的，也是我的老主顧了，此次他委托我設(shè)計一個線上書店品牌，定位是專業(yè)技能書籍的出版和發(fā)行，但品牌名稱還沒想好，需要先取一個名字。

關(guān)于名字，客戶提了以下三點要求。

①字?jǐn)?shù)為三個字；

②名稱中要有“書”字；

③易記憶，朗朗上口。

PS：給品牌取名也是品牌設(shè)計的一環(huán)，屬于理念設(shè)計（MI），記得要收費喲~

經(jīng)過幾天的苦思冥想和討論篩選，我和客戶最終確定了“書本書”這個名字，他也非常滿意我對這三個字的概念闡述。（內(nèi)容略長，無耐心可略過）

第一個“書”為動詞，意為“書寫、記錄”，《說文解字》中寫道：“書，箸也”，“箸”通“著”，即書寫、記載、記錄。

第二個“書”為名詞，意為“書籍”。而“本”字也有兩層含義，既是量詞，比如一本書、兩本書，又可以作為指示代詞，就是“這或那”，比如“本書講述的內(nèi)容是XXX”，這里的“本”就是“這”的意思。

三個字連起來相應(yīng)地就有了雙重含義，一是“寫一本書”，這層含義對應(yīng)的是作者；二是“記錄這本書”，這層含義對應(yīng)的是出版方。再直白點兒說，作者負(fù)責(zé)寫書，我們負(fù)責(zé)將作者的寫作成果進(jìn)行整理、記錄、宣傳和發(fā)行！一語雙關(guān)，合作雙贏。

而類似ABA的命名方式也是非常有節(jié)奏感和易記性的，比如“奧利奧”、“熊本熊”、“王中王”等，朗朗上口，讀者（消費者）看一次就能輕松記住。

就這樣，一個有文化底蘊又直白有趣的名字就誕生了。

LOGO創(chuàng)作過程

品牌名稱確定之后，設(shè)計方向就好把握了?？蛻粝ＭO(shè)計一款字標(biāo)，能同時體現(xiàn)“書本書”的文化和活力。

“文化”對應(yīng)的是古典和傳承，而“活力”則代表了親和與現(xiàn)代，所以我決定用篆體+圓體來做個結(jié)合，看能否擦出有趣的火花。

考慮到圖書品類是專業(yè)書籍而不是古籍，且專業(yè)書的功能就是把復(fù)雜的知識清晰化、簡單化，所以字形不適合全部參考繁體結(jié)構(gòu)，尤其是“書”字的繁體，太復(fù)雜了！

我這里做了一個局部參考的嘗試，就是將“本”和“書”字拆分成上下兩部分，上部分參考圓體結(jié)構(gòu)，下部分參考篆體結(jié)構(gòu)，如下：

經(jīng)對比，“本”字中A1太普通，A3骨架太散，“書”字中B2和B3都略顯花哨了，所以我最終選擇了A2+B1的組合。

把描邊加粗后看下效果。

目前的效果雖然不錯，但略顯呆板和平淡，缺乏記憶點。

因為“本”字是左右對稱的，而前后兩個字又都是“書”，所以能否以“本”為鏡，將第一個“書”字做個水平翻轉(zhuǎn)呢？如下：

哎？！這么一翻轉(zhuǎn)是不是有點兒意思了？整體有了一種絕對的平衡和美感。

雖然第一個“書”字乍一看比較陌生，但按照正常的閱讀習(xí)慣，我們會先略過它，并識別出后兩個字是“本”和“書”，這時但凡觀察一下，便能輕易發(fā)現(xiàn)原來第一個字就是反寫的“書”，從而完成對第一個字的識別。

這種水平翻轉(zhuǎn)文字的做法顯然有些冒險，但好在“書”字的結(jié)構(gòu)比較簡單，且有后面的“書”字做參考，不會影響識別性，反而能加深讀者對品牌的獨特印象。

確定了基礎(chǔ)字形后，又對字高和字重做微調(diào)，從而篩選出最合適的方案。

下圖紅框標(biāo)注的就是跟客戶敲定的最終版本。

標(biāo)準(zhǔn)色方面，因為專業(yè)技能書涵蓋各行各業(yè)，用彩色難免會有偏頗和感性認(rèn)知，只有中性的黑色能完美駕馭和詮釋。

最后我們看一些視覺延展和應(yīng)用。

我這里做了一個類似放射線條的輔助圖形，既像翻開的書，又像太陽的光芒，為無數(shù)求知者照亮道路。

好啦，本期的書店品牌的LOGO設(shè)計教程就講到這里，我們下期再見鴨~

作者：君小陽
來源：這logo怎么了（ID：wtf-logo）

作者 | 陳亞   來源 | 站酷 （chenya.zcool.com.cn）