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

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

20種標題排版技巧：

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

本篇將通過四個案例詳解行書風格字體的設計原理。

案例一：趣玩

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

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

Step3：將描邊加粗，并調整兩個字的比例關系，使兩個字看上去更加整體靈動：

Step4：使用寬度工具將描邊線條調出粗細變化，讓字體看上去更具書寫感，線條的粗細關系仍參考行書字體：

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

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

案例二：口味羅氏蝦

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

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

Step3：對勾好的基礎骨架進行調整，讓五個字的結構和大小在視覺上更加協調，并將描邊加粗：

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

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

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

案例三：茉莉

Step1:  使用鋼筆工具繪制基礎字形（此步驟可以用墊底字，但需注意最終結構與墊底字有所區別）：

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

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

案例四：野獸派

Step1:  使用鋼筆工具繪制基礎字形（此步驟可以用墊底字，但需注意最終結構與墊底字有所區別）：

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

Step3:  從行書資料中提煉筆畫形式，應用到基礎字形中，替換掉原有筆畫：

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

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

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

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

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

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

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

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

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

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

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

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

最后做一個樣機，增強視覺展示效果，也可以用多種色彩搭配。

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

作者 | 趣趣熊
來源 | 趣設記 （id: qushejiba）

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

01. 處理圖中的阻礙物

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

02. 圖片的比例是否統一

當出現多圖片的時候，如果所展現的圖片比例不一致，就很容易喪失整體性和統一感。應確定所展現的部分是特寫還是整體，再進行圖片比例的調整。

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

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

04. 學會對信息拆分和重組

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

05. 不宜使用過多的色彩

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

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

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

07. 行寬不能過短或過長

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

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

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

注：本篇所有例字均收集自互聯網，因時間跨度較久，無法每個都能標注出作者，如有侵權請私信聯系，請見諒。

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

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

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

首先根據項目名稱中的字義，我們來設定文字外形。“春雲舍”三個字當中的“云”和“舍”字，更容易聯想到具象的事物。這里我們選定“舍”字作為核心詞語，以“舍”字進行具象圖形聯想，作為文字外形。同學們如果感興趣可以嘗試以云字作為核心去聯想相關的具象圖形。

“舍”是房屋的意思。那么我們搜索古風建筑，并從中找到非常具有美感的江南的建筑，根據屋頂的造型提煉出幾何感的造型，作為文字的外形。

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

然后我們再將草圖墊底，在草圖的基礎上進行優化。讓整體更規范和秩序。

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

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

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

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

筆畫統一是指分析筆畫的特征尋找出一組文字中的筆畫共性，再對這一筆畫進行創意的調整，從而形成秩序的變化。

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

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

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

通過分析，我們發現這三個字的下半部分有一定的相似性，所以我們可以嘗試把這部分的筆畫做統一的變化處理。這個項目的行業為日系食品類，所以字體的調性定為具有傳統氣質的襯線體。以宋體字為基礎，記憶點的部分可以嘗試替換為行書筆畫。

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

我們以宋體字的特征為基礎設定出具有相應筆飾的筆畫。先做出橫豎撇捺點這幾筆基礎筆畫就可以。

選一個宋體字做為墊底字，可以將字高壓扁一點，增加字體的穩定感。用剛才做好的筆畫以墊底字為基礎搭建出新的文字結構。

將搭建好的字體提取出來，并進行結構細節上面的調整，讓整體更協調。

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

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

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

替換筆畫，非常好理解，就是將一部分的筆畫替換為其它風格或者形式。可以是外文，可以是數字，可以是符號等等，當然無論怎樣變化，依然需要保持識別度。通過不同字形的對比，形成記憶點。

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

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

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

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

在墊底字的基礎上，使用簡潔的筆畫搭建出字體的結構。然后將豎筆替換為“（）”。

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

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

所以接下來我們調整細節，將南的結構調整的更松散些，讓整體的負空間更協調。統一三個字的字面大小，以及調整整體結構的細節。

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

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

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

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

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

刺青這組字則是將一部分筆畫改用線條表達， 直觀的表現刺青的畫面感。

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

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

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

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

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

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

結構變異是指通過調整字體的結構改變文字的重心，字面，中宮等，比如統一壓低或者抬高重心，收緊中宮，或者將部分筆畫進行夸張變化等方式。通過結構的變異，讓字形更為獨特，形成一種巧妙的記憶點。

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

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

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

然后在墊底字的基礎上進行直接使用鋼筆拉出線條進行結構的搭建。需要注意所有的撇和捺都用傾斜45度的線條。大致拼出就可以，之后再調整細節。

用長方形作為字面框，方便規范字面統一。再調整一些細節，將筆畫集中分布在上面和下面的區域，留中間的位置。

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

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

字型混搭是指將不同風格不同類型的文字進行混搭在一起，形成沖突卻不突兀的強烈對比感。

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

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

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

然后根據墊底字的先搭配出大致的字體結構。并將部分筆畫直接用字母代替。其它筆畫的風格也可以跟字母的風格調整為有粗細變化的形態。

搭建好后，我們發現字母的小襯角，以及部分筆畫太細，與其它的筆畫對比過大。

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

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

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

一、圖文框的種類

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

? 幾何圖文框

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

? 異形圖文框

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

? 對話框

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

? 爆炸框

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

? 立體框

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

? 虛線框

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

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

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

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

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

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

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

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

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

三、圖文框的使用小細節

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

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

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

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

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

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

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

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

? 圖文框之間也可以有大小對比、輪廓對比、方向對比、空間對比等，這樣的版面才會有主次，有變化，視覺上不至于太單調。

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

注：最好不要把版面里的所有元素都放進圖文框內。

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

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

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

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

  用戶頭像篇

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

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

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

  按鈕篇

當一個頁面有兩個操作按鈕時，可以區分出來一個最重要的按鈕，引導用戶更容易去進行選擇。

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

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

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

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

  卡片排版篇

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

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

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

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

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

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

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

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

  文字排版篇

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

當主標題和副文案一樣長的時候，整體會顯得很呆板，且看著是一團字的感覺，這時就可以讓標題和副標題之間產生長短不一的顯示，就不會那么呆板。

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

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

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

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

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

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

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

在需要突出信息的時候，左圖的排版方式并沒有達到需要突出的信息，看不到重要的信息。如前面所說，在做信息層級的時候對比一定要拉開，才能突出最重要的信息，讓用戶一眼get到主要信息。

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

當文案標題需要加硬投影的時候，亮字下應該加顏色較暗的投影，例如右圖。如果亮字下面的投影顏色還是很亮，會出現標題文案識別不清晰，對比度不足。

最后

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

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

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

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

什么是漸變呢？

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

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

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

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

找到正確的靈感

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

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

創造自己的調色板

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

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

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

混合調色板的顏色

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

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

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

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

使用有意義的漸變方向

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

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

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

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

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

將漸變和抽象形狀結合起來

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

感謝閱讀

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

?

從起名開始

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

關于名字，客戶提了以下三點要求。

①字數為三個字；

②名稱中要有“書”字；

③易記憶，朗朗上口。

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

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

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

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

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

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

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

LOGO創作過程

品牌名稱確定之后，設計方向就好把握了。客戶希望設計一款字標，能同時體現“書本書”的文化和活力。

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

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

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

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

把描邊加粗后看下效果。

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

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

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

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

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

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

下圖紅框標注的就是跟客戶敲定的最終版本。

標準色方面，因為專業技能書涵蓋各行各業，用彩色難免會有偏頗和感性認知，只有中性的黑色能完美駕馭和詮釋。

最后我們看一些視覺延展和應用。

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

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

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

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