每一種實(shí)際上作為一個(gè)小方法，都可以進(jìn)行舉一反三。比如線裝飾，線可以是直線、可以是曲線、可以是粗線、可以是細(xì)線、可以是實(shí)線、可以是虛線、可以是有顏色的、可以是放射狀的、可以是無(wú)規(guī)則的、可以是涂鴉風(fēng)格的….
假設(shè)每一種分類(lèi)你可以舉一反三變成五種，那么我這里的二十種就是一百種，那么我這篇文章的標(biāo)題就可以起名為：一百種標(biāo)題，拿去抄，多少有點(diǎn)不要臉了…接下來(lái)全部是圖，沒(méi)有一句廢話
20種標(biāo)題排版技巧：
以上就是我為大家整理的20種標(biāo)題排版設(shè)計(jì)技巧啦！快去試試吧，讓你的作品閃閃發(fā)光，吸引更多的目光和心心！
]]>
作者 | 陳亞 來(lái)源 | 站酷 （chenya.zcool.com.cn）
]]>
作者 | 陳亞 來(lái)源 | 站酷 （chenya.zcool.com.cn）
]]>在設(shè)計(jì)中，相鄰的元素比分開(kāi)較遠(yuǎn)的元素會(huì)更加吸引人注意，在做設(shè)計(jì)閱讀順序時(shí)，利用設(shè)計(jì)分組是一個(gè)非常有效的方法，將不同信息進(jìn)行視覺(jué)間距分組。能提升用戶(hù)對(duì)于內(nèi)容上的理解。
▲如上圖slack的設(shè)計(jì)，插畫(huà)引導(dǎo)圖和底部按鈕上面文字拉開(kāi)了距離，使得內(nèi)容更聚焦。第二個(gè)界面的頂部頭像和下面的文字也是通過(guò)分組形成了對(duì)比。
▲stadium-live的產(chǎn)品設(shè)計(jì)上，登錄頁(yè)面按鈕為一組，頂部品牌LOGO和slogan一組，人物為一組，每組信息之間分組非常明確，互相都不會(huì)對(duì)對(duì)方視覺(jué)產(chǎn)生干擾，后面兩張頁(yè)面也是如此，頂部的導(dǎo)航，和下面表單信息，以及頭像和底部按鈕，通過(guò)分組處理，內(nèi)容更加符合用戶(hù)的視覺(jué)動(dòng)線。
▲在球員定制的處理上，最右邊那張圖，通過(guò)卡片和線條分組處理，從視覺(jué)上很清晰的看見(jiàn)排名；哪兩個(gè)球隊(duì)之間正在進(jìn)行比賽。
▲當(dāng)一組信息比較接近時(shí)，證明他們是有關(guān)聯(lián)的，如果距離比較遠(yuǎn)，這意味著這組信息和他們是不同的，簡(jiǎn)單來(lái)說(shuō)，通過(guò)鄰近性原則創(chuàng)造這些關(guān)系，為信息帶來(lái)層次。
運(yùn)用空白建立視覺(jué)層次
空白也是視覺(jué)設(shè)計(jì)元素，并不是留白就是空著，如果設(shè)計(jì)中留白運(yùn)用合理，可以幫助用戶(hù)理解很多信息，因此任何設(shè)計(jì)都需要通過(guò)適當(dāng)?shù)呢?fù)空間來(lái)傳遞信息。
▲如上圖我喜歡的一個(gè)應(yīng)用classpass設(shè)計(jì)非常極簡(jiǎn)，頁(yè)面中大量運(yùn)用留白來(lái)凸顯內(nèi)容。
▲classpass的設(shè)計(jì)不會(huì)使用太多的視覺(jué)元素，而是運(yùn)用留白把內(nèi)容進(jìn)行分組，每個(gè)頁(yè)面的留白恰到好處，同時(shí)留白本身就是對(duì)信息進(jìn)行區(qū)分，所以頁(yè)面中減少了很多線條使用，會(huì)更加干凈有品質(zhì)感。
▲must是一款電影軟件，整體設(shè)計(jì)非常雜志風(fēng)，頁(yè)面就是通過(guò)圖文處理，以及留白空間的處理，增加對(duì)比，基本產(chǎn)品使用過(guò)程中你不會(huì)感覺(jué)到視覺(jué)負(fù)擔(dān)，元素之間的信息組織的非常清晰。
▲在電影展示頁(yè)面，信息的處理，以及打分設(shè)計(jì)上，多次運(yùn)用留白來(lái)處理信息層級(jí)，在設(shè)計(jì)中，當(dāng)你元素周?chē)舭自蕉?，它產(chǎn)生聚焦注意力的作用也越強(qiáng)，如右邊的打分頁(yè)面，幾乎所有焦點(diǎn)都在這個(gè)彈窗上。
▲Artsy是一款藝術(shù)品電商網(wǎng)站，整個(gè)app的設(shè)計(jì)也充滿(mǎn)了藝術(shù)氣息，每次我設(shè)計(jì)找不到感覺(jué)的時(shí)候就會(huì)去打開(kāi)看看，里面的排版、還有設(shè)計(jì)的細(xì)節(jié)處理，都值得我學(xué)習(xí)，但我喜歡的還是他對(duì)于板式和留白空間的處理。
▲在首頁(yè)設(shè)計(jì)，我最喜歡他相框的設(shè)計(jì)，就像欣賞美術(shù)館的一幅畫(huà)，頁(yè)面留白也非常大，襯線體和非襯線體的對(duì)比也運(yùn)用的非常好。
▲整個(gè)APP的設(shè)計(jì)被大量留白包圍，雖然現(xiàn)在流行各種質(zhì)感，光感，C4D的設(shè)計(jì)，但是大量視覺(jué)元素會(huì)讓頁(yè)面過(guò)于飽和，如果沒(méi)有很好的視覺(jué)引導(dǎo)，用戶(hù)會(huì)感到不知所措。這種簡(jiǎn)單的返璞歸真，也能讓人視覺(jué)不容易產(chǎn)生疲勞。
運(yùn)用氛圍建立層次
▲每個(gè)紋理的運(yùn)用，有設(shè)計(jì)感的紋理從視覺(jué)感受上比簡(jiǎn)約主義更能吸引用戶(hù)注意力，但是背景紋理的運(yùn)用不能為了設(shè)計(jì)而設(shè)計(jì)，而是需要和產(chǎn)品內(nèi)容有關(guān)系。比如紋理和文字內(nèi)容、和信息是密切相關(guān)的。如上圖，是一款打車(chē)軟件，背景結(jié)合了打車(chē)的地圖，公路線路，用車(chē)場(chǎng)景；讓頁(yè)面對(duì)比和設(shè)計(jì)層次更加突出。
▲Jour這款產(chǎn)品在設(shè)計(jì)上，背景通過(guò)有層次的氛圍紋理和質(zhì)感，使得頁(yè)面氛圍感很強(qiáng)，層次細(xì)節(jié)更加豐富，當(dāng)然在設(shè)計(jì)時(shí)候切忌對(duì)于設(shè)計(jì)氛圍過(guò)度運(yùn)用，那樣會(huì)讓用戶(hù)分散注意力。
▲其它場(chǎng)景上氛圍紋理的運(yùn)用，卡片上通過(guò)系列插畫(huà)的塑造，頁(yè)面雖然有很多插畫(huà)，但是頁(yè)面平衡感同樣被把握的很好。用的時(shí)候需要考慮用戶(hù)在不同界面看見(jiàn)的元素視覺(jué)感受是一致的。
▲氛圍除了圖形，其實(shí)色彩也是很重要一種方式，我很喜歡的ASANS的設(shè)計(jì)，在背景上就是運(yùn)用了一些幾何圖形的肌理效果讓整個(gè)空間感更加豐富，這些幾何圖形豐富細(xì)節(jié)的同時(shí)也讓整個(gè)內(nèi)容更加凸顯。
▲如上圖是里面一個(gè)注冊(cè)登錄場(chǎng)景，界面中，除了背景灰色底紋通過(guò)幾何圖形來(lái)烘托視覺(jué)層次，同時(shí)在插畫(huà)上也非常巧妙，用戶(hù)輸出時(shí)，完成后，整個(gè)插畫(huà)到品牌圖形的連貫變化體驗(yàn)非常好。
▲Sift是一款新聞?lì)愰喿x產(chǎn)品，這類(lèi)型產(chǎn)品設(shè)計(jì)一般就是文字排版，設(shè)計(jì)簡(jiǎn)約為主，但是sift運(yùn)用了一種大膽的設(shè)計(jì)，背景氛圍上采用一些點(diǎn)線底紋的肌理效果，和內(nèi)容結(jié)合的平衡感把握的很不錯(cuò)。
▲Lugg是一款貨車(chē)APP有點(diǎn)像國(guó)內(nèi)的貨拉拉，整個(gè)設(shè)計(jì)氛圍感也非常強(qiáng)，運(yùn)用的全插畫(huà)設(shè)計(jì)，從引導(dǎo)頁(yè)，到核心功能頁(yè)面的設(shè)計(jì)都能看見(jiàn)完整插畫(huà)的運(yùn)用，是我目前見(jiàn)過(guò)運(yùn)用插畫(huà)氛圍作為主設(shè)計(jì)最好的產(chǎn)品。
▲感興趣的同學(xué)可以去美國(guó)蘋(píng)果商店下載使用，頁(yè)面中增加氛圍是一種增加層次很好用的方式，但是同樣需要注意好視覺(jué)平衡，不要本末倒置。
運(yùn)用字體對(duì)比建立層次
▲運(yùn)用襯線字體和非襯線字體對(duì)比是非常常用的方式，如上圖運(yùn)用了Adelle Sans和Tiempos這兩款字體的對(duì)比讓頁(yè)面內(nèi)容結(jié)構(gòu)非常清晰
▲上圖官網(wǎng)的設(shè)計(jì)，干凈的排版，通過(guò)字體大小、字型進(jìn)行對(duì)比，體現(xiàn)出視覺(jué)層次。
字體的選擇本身也是設(shè)計(jì)中很重要的因素，好的設(shè)計(jì)不僅能提升設(shè)計(jì)品質(zhì)，同時(shí)也能讓頁(yè)面視覺(jué)層次更加分明。
寫(xiě)在結(jié)尾
回歸我們?cè)O(shè)計(jì)本質(zhì)，其實(shí)我一直覺(jué)得設(shè)計(jì)就是一個(gè)翻譯官，我們的使命是讓用戶(hù)能更容易理解產(chǎn)品復(fù)雜或晦澀難懂的專(zhuān)業(yè)信息，同時(shí)我們能提前規(guī)避他們可能遇到的問(wèn)題，而不僅僅是專(zhuān)注在界面美觀上，今天分享的這些提升設(shè)計(jì)層次的技巧，是為了讓頁(yè)面有更好的體驗(yàn)，也希望大家能通過(guò)實(shí)踐去運(yùn)用的更好。
作者：sky
01.對(duì)稱(chēng)
很多人覺(jué)得對(duì)稱(chēng)構(gòu)圖很死板，這是一個(gè)誤解，之所以會(huì)出現(xiàn)這種情況通常是設(shè)計(jì)師把對(duì)稱(chēng)用錯(cuò)了地方，或者是圖形本身不好看，其實(shí)對(duì)稱(chēng)是非常經(jīng)典的一種形式，用好了會(huì)很高級(jí)，比如下面這些案例都使用了對(duì)稱(chēng)圖形或?qū)ΨQ(chēng)構(gòu)圖。
使用對(duì)稱(chēng)時(shí)還需注意：
1.各元素的布局要有節(jié)奏感，比如圖形的排列呈方向漸變、大小漸變或重復(fù)排列等。
2.元素要足夠豐富，太簡(jiǎn)單的對(duì)稱(chēng)圖形難有高級(jí)感；
02.純色背景
雖然近幾年很流行使用漸變色，但一些大品牌和設(shè)計(jì)大師仍舊更喜歡使用純色來(lái)做設(shè)計(jì)，特別是用純色來(lái)做背景，因?yàn)橄噍^漸變色而言，單色給人的感覺(jué)更高級(jí)，這或許是因?yàn)槠涓胶?、更穩(wěn)重的原因（不同的顏色的重量也不一樣）。
舉個(gè)例子，下圖兩款元素和設(shè)計(jì)都是相同的，只是背景一個(gè)為純色，一個(gè)為漸變色，通過(guò)對(duì)比可以看出，左圖感覺(jué)更高級(jí)。
03.極簡(jiǎn)
極簡(jiǎn)風(fēng)格的設(shè)計(jì)容易產(chǎn)生高級(jí)感，這應(yīng)該是能達(dá)成共識(shí)的觀點(diǎn)，極簡(jiǎn)其實(shí)就是畫(huà)面中的元素、字體、顏色、特效等要盡量少，而留白的空間要足夠多。當(dāng)然，極簡(jiǎn)設(shè)計(jì)遠(yuǎn)不止這么簡(jiǎn)單，否則人人都能做，優(yōu)秀的極簡(jiǎn)設(shè)計(jì)產(chǎn)品本身或者主視覺(jué)圖形一定要美觀、精簡(jiǎn)、獨(dú)特，排版和配色也很講究。
04.抽象
很多藝術(shù)作品的表現(xiàn)手法就很抽象，很難一眼就看明白它們?cè)谡f(shuō)什么，所以藝術(shù)給人的感覺(jué)很高級(jí)，設(shè)計(jì)作品也同樣如此，使用抽象手法來(lái)設(shè)計(jì)圖形、表現(xiàn)設(shè)計(jì)主題，通常會(huì)比具象的表現(xiàn)手法更高級(jí)，這是招貼海報(bào)和logo設(shè)計(jì)慣用的手法。
由于抽象圖形不好理解，所以在設(shè)計(jì)調(diào)性的把握上一定要十分準(zhǔn)確。
05.使用面癱模特
大家應(yīng)該都有發(fā)現(xiàn)這樣一個(gè)現(xiàn)象，很多時(shí)裝秀上的模特都是喜歡板著一張臉，還有一些時(shí)尚雜志上的模特姿態(tài)會(huì)很僵硬或者很扭曲，這讓人很莫名奇妙，但視覺(jué)上確實(shí)會(huì)比咧嘴大笑或者姿勢(shì)很隨性的模特感覺(jué)要更高級(jí)，這或者是因?yàn)椴唤拥貧獾脑虬伞?/p>
06.重復(fù)
重復(fù)的手法也容易營(yíng)造高級(jí)感？是的，最典型的代表就是奢侈品的花樣。
重復(fù)之所以可以產(chǎn)生高級(jí)感是因?yàn)椋ㄟ^(guò)重復(fù)排列元素可以產(chǎn)生節(jié)奏感以及大量的細(xì)節(jié)，并且畫(huà)面會(huì)有很強(qiáng)的統(tǒng)一性。
07.黑白灰搭配
無(wú)論每年的流行色如何變，黑白灰永遠(yuǎn)都不會(huì)過(guò)時(shí)，顏色對(duì)設(shè)計(jì)的氣質(zhì)有很大影響，搭配不好就容易俗，而黑白灰是一組很完美的色彩搭配，不僅不會(huì)難看，還會(huì)因?yàn)槠洫?dú)立于花花視界之外而顯得脫俗、高級(jí)。這其實(shí)也算是一種極簡(jiǎn)設(shè)計(jì)，即把顏色刪減到?jīng)]有顏色。
并且，巧妙運(yùn)用圖形的輪廓以及黑色的色值，同樣可以設(shè)計(jì)出豐富的層次和體積感。
08.體現(xiàn)民族文化
俗話說(shuō)，民族的就是世界的，在設(shè)計(jì)中融入民族文化也可以提升設(shè)計(jì)的高級(jí)感，當(dāng)然，不是簡(jiǎn)單地加幾個(gè)現(xiàn)成的傳統(tǒng)元素，而是要在設(shè)計(jì)概念中融入傳統(tǒng)文化，并且要將這些民族元素進(jìn)行現(xiàn)代化的處理或者再創(chuàng)作，否則設(shè)計(jì)不但不會(huì)有高級(jí)感，還會(huì)顯得很俗氣。
09.復(fù)古風(fēng)
無(wú)論是服裝設(shè)計(jì)行業(yè)還是建筑、裝潢設(shè)計(jì)行業(yè)，都時(shí)不時(shí)會(huì)刮一陣復(fù)古風(fēng)，平面設(shè)計(jì)也同樣如此，復(fù)古意味著經(jīng)典，也就意味著高級(jí)，所以我們會(huì)看到，有很多走高端路線的品牌的設(shè)計(jì)喜歡使用復(fù)古風(fēng)。
顯然，并不是用了以上技巧就能做出高級(jí)感，也并不是沒(méi)有以上這些特點(diǎn)的設(shè)計(jì)就不高級(jí)，設(shè)計(jì)的氣質(zhì)是由設(shè)計(jì)的各個(gè)要素共同決定的，所以只有我們多看、多嘗試、多總結(jié)，才能找到更多做出優(yōu)秀設(shè)計(jì)的方法。
原文地址：蔥爺（公眾號(hào)）
作者：蔥爺
國(guó)外網(wǎng)站使用這種布局方式較多，經(jīng)過(guò)調(diào)研，結(jié)合嘗試后，本文梳理了響應(yīng)式設(shè)計(jì)的方法流程，記錄問(wèn)題與思考，幫助以后類(lèi)似的項(xiàng)目開(kāi)展更快。
什么是響應(yīng)式布局
響應(yīng)式布局常常和自適應(yīng)布局搞混。其實(shí)通過(guò)下面的動(dòng)圖我們很容易能理解兩者的區(qū)別。
△ 響應(yīng)式和自適應(yīng)的區(qū)別，來(lái)源網(wǎng)上資料
- 響應(yīng)式布局：容器大小隨窗口大小而變化。
- 自適應(yīng)布局：容器大小不隨窗口大小而變化，邊距隨窗口大小而變化。
響應(yīng)式布局優(yōu)勢(shì)
調(diào)研中我們發(fā)現(xiàn)，國(guó)外幾個(gè)內(nèi)容網(wǎng)站，YouTube、Spotify、Netflix 和Behance，都使用了「內(nèi)容墻」的設(shè)計(jì)方式，以突出內(nèi)容的豐富度。
由于這種設(shè)計(jì)通常會(huì)保持容器之間的間距不變，這就需要容器大小變化以適應(yīng)窗口大小變化了。響應(yīng)式的布局思路，很好地幫助完成內(nèi)容墻的設(shè)計(jì)。
△ 滿(mǎn)屏的內(nèi)容突出了內(nèi)容豐富度
響應(yīng)式布局的設(shè)計(jì)要點(diǎn)
在以往的開(kāi)發(fā)合作中，設(shè)計(jì)提供切圖和尺寸標(biāo)注給開(kāi)發(fā)就行了。
而響應(yīng)式頁(yè)面中的容器大小是動(dòng)態(tài)的，我們可以提供一個(gè)表格，告訴開(kāi)發(fā)在不同的頁(yè)面寬度區(qū)間，對(duì)應(yīng)的布局應(yīng)該是怎么樣的。這些區(qū)間的臨界點(diǎn)，就是「斷點(diǎn)」。
我們以容器多，情況比較復(fù)雜的視頻首頁(yè)模擬一次確定斷點(diǎn)的流程。
△ 響應(yīng)式布局的設(shè)計(jì)思路
首先，斷點(diǎn)是反映頁(yè)面發(fā)生突變的情況的，如邊距開(kāi)始發(fā)生變化、容器數(shù)量開(kāi)始發(fā)生變化等。本例中，我們固定了側(cè)邊欄a、邊距b、間距d。據(jù)下圖公式，容易得知容器數(shù)量和容器寬度有著明確的數(shù)量關(guān)系。因此，尋找斷點(diǎn)，需要我們先確定容器寬度(c)。
△ 容器數(shù)量和容器寬度有著明確的數(shù)量關(guān)系
容器寬度和容器內(nèi)容相關(guān)。本例中，我們規(guī)定正常情況下容器寬度最小300px，以保證封面圖和標(biāo)題文字還能被看清。當(dāng)容器寬度被壓到300px時(shí)，容器數(shù)量減少一個(gè)。
有了容器的最小尺寸，那么我們可以輸出給開(kāi)發(fā)的「頁(yè)面寬度-容器數(shù)量對(duì)應(yīng)表」。從下表可以讀出，瀏覽器寬度在1284-1595px之間時(shí)，側(cè)邊欄展開(kāi)為288px，放3個(gè)容器，瀏覽器會(huì)自動(dòng)把容器寬度算出來(lái)。
△ 頁(yè)面寬度與容器數(shù)量關(guān)系表
斷點(diǎn)選擇的技巧
從上面的案例我們知道，確定斷點(diǎn)和容器數(shù)量、容器大小有關(guān)。那么，斷點(diǎn)的選擇其實(shí)是體現(xiàn)了，設(shè)計(jì)師對(duì)頁(yè)面信息呈現(xiàn)方式的理解。
1. YouTube的小心機(jī)
調(diào)研的過(guò)程中，我們發(fā)現(xiàn)YouTube 選擇 1143-1966px 作為4個(gè)容器的前后斷點(diǎn)。這個(gè)頁(yè)面寬度區(qū)間很大，達(dá)到了824px（遠(yuǎn)超5個(gè)容器的跨度335px）。
△ YouTube的網(wǎng)頁(yè)斷點(diǎn)情況
我們猜想：
- YouTube認(rèn)為1行4個(gè)視頻是用戶(hù)瀏覽的最好數(shù)量；
- 他們想把這種布局覆蓋主流的(約66.25%)屏幕寬度 1280-1920px。
2. 關(guān)注高分屏的實(shí)際效果
需要特別注意的是，橫向分辨率達(dá)到3840px 的PC高分屏中，主流瀏覽器會(huì)按照2倍圖展示內(nèi)容。此外，Windows系統(tǒng)下有系統(tǒng)縮放，推薦的是1.25倍，導(dǎo)致3840px的屏幕寬度，瀏覽器認(rèn)為只有1536px (3840px÷2÷1.25)。所以有時(shí)候會(huì)出現(xiàn)在分辨率很高的屏幕下，響應(yīng)式頁(yè)面展示的內(nèi)容反而更少了的情況。
寫(xiě)在最后
響應(yīng)式的布局方法能很好地支持越來(lái)越流行的「內(nèi)容墻」的設(shè)計(jì)。找好斷點(diǎn)，設(shè)定好不同屏幕分辨率的布局策略，是響應(yīng)式設(shè)計(jì)的關(guān)鍵。
原文：騰訊GLDesign
在進(jìn)行文字編排之前，首先要理解文字的內(nèi)容。我見(jiàn)過(guò)很多設(shè)計(jì)師只注重版式美觀而不關(guān)注文字內(nèi)容，把文字一拿到手就開(kāi)始編排，從不考慮文字在說(shuō)什么。他們認(rèn)為文字一定要服從于版式需求，反而這是不正確的設(shè)計(jì)方法。對(duì)于一篇文案稿，如果我們不去理解它表述的內(nèi)容，就很容易本末倒置。
01 橫豎編排組合
標(biāo)題組合的編排一般都會(huì)使用基本的編排方式：橫編排，豎編排或橫豎編排。這是比較容易掌握，也是使用較為廣泛的方式，給人一種嚴(yán)謹(jǐn)正規(guī)的感覺(jué)。而橫豎編排都會(huì)遵從對(duì)齊，如左對(duì)齊／右對(duì)齊／居中對(duì)齊／兩端強(qiáng)制對(duì)齊。只要做到對(duì)齊，基本都能做出好的標(biāo)題組合。
左對(duì)齊編排組合
▼
居中對(duì)齊編排組合
▼
兩端強(qiáng)制對(duì)齊編排組合
▼
02 線框編排組合
如果你覺(jué)得單純的橫豎編排過(guò)于單調(diào)，不妨添加一些線框。在文字中插入線（線框）或其他圖形元素，使整個(gè)標(biāo)題變化更豐富。在使用中需要注意線（線框）的粗細(xì)和長(zhǎng)度，考慮它們與信息間起到什么作用，而并非隨意添加。
03 錯(cuò)位編排組合
除了正常的橫豎組合編排，簡(jiǎn)單的錯(cuò)位組合也是不可缺少的編排方式。其具有較強(qiáng)的編排創(chuàng)造性，能表現(xiàn)出文字間的節(jié)奏感。
04 方向編排組合
文字的方向編排是指把文字整體或局部排列成傾斜狀態(tài)，構(gòu)成非對(duì)稱(chēng)的畫(huà)面形式，使版面具有動(dòng)感和節(jié)奏感，富有強(qiáng)烈的視覺(jué)效果。
05 圖形穿插編排組合
巧妙地將文字與主圖穿插一起，整體達(dá)到圖文并茂的版面效果。提高畫(huà)面的趣味性，并能同時(shí)傳達(dá)圖文兩種信息。而這種做法的難度比較高，很考驗(yàn)設(shè)計(jì)師的設(shè)計(jì)功底。
最后，無(wú)論你選用哪種方式去編排，文字的編排最終還是要回歸到能順利地傳遞出去，必須調(diào)整好文字的間距和字重比例，考慮整體版面的平衡感和層次感。
]]>
在我收藏夾里，收藏著大量?jī)?yōu)秀的設(shè)計(jì)，每次去看的時(shí)候，不停問(wèn)自己為什么當(dāng)初這個(gè)設(shè)計(jì)吸引了我，后來(lái)終于找到一個(gè)點(diǎn)，就是色彩，在第一眼看到的時(shí)候，奪走我視覺(jué)焦點(diǎn)的就是色彩。
色彩是設(shè)計(jì)師的一個(gè)魔法棒，它能吸引你的注意力，喚起設(shè)計(jì)情感，在電商設(shè)計(jì)中，人們對(duì)產(chǎn)出做出的90%的快速?zèng)Q策來(lái)源于色彩，所以為什么國(guó)內(nèi)電商的“立即購(gòu)買(mǎi)”會(huì)是橙色，紅色，因?yàn)檫@個(gè)顏色能刺激用戶(hù)，能產(chǎn)生購(gòu)買(mǎi)沖動(dòng)！
那么怎么去定義一套色彩呢？一起來(lái)了解下
色彩怎么定義
1.了解產(chǎn)品性格
在定義色板的時(shí)候，首先需要去確定設(shè)計(jì)的目的是什么，試著去問(wèn)問(wèn)自己，我們的這個(gè)色彩需要給用戶(hù)傳遞什么樣的信息，是希望他有購(gòu)買(mǎi)欲望，還是希望他感受到尊貴感受，還是希望喚起他某種情緒，色彩可設(shè)定品牌基調(diào)，情緒。
▲ 可口可樂(lè)旗下Fuze Tea紅茶品牌，采用自然的綠色作為品牌顏色，來(lái)傳遞這款茶，融合植物、茶淬取物和其他健康成分。
▲ Uber (優(yōu)步)越南推出的網(wǎng)路“摩托車(chē)”接送服務(wù)，在UberMOTO全新品牌形象設(shè)計(jì)中，因?yàn)樵谠侥咸鞖夂苎谉?，所以采用了藍(lán)色綠色配色，斜45度的色塊拼接，延伸出了會(huì)反光的安全外套，還有醒目的安全帽，在一大票的“摩托車(chē)”群中，立刻就可以一目了然司機(jī)的位置。
2.了解用戶(hù)人群
▲ 男生和女生最喜歡的顏色
▲ 男生和女生最討厭的顏色
男性通常更喜歡大膽的顏色，而女性喜歡更柔和的顏色。此外，男性更喜歡深色的顏色(加入黑色的顏色)，而女性更容易接受明亮的顏色(添加了白色的色彩)。
人們對(duì)于顏色的看法不同，顏色根據(jù)個(gè)人喜好，文化宗教信仰不同，有不同的寓意，所以我們?cè)谠O(shè)計(jì)時(shí)候一定要去考慮我們的用戶(hù)誰(shuí)在使用!
▲ 在西方世界里面，紅色代表恐怖和死亡，火災(zāi)，暴力戰(zhàn)爭(zhēng)。
▲ 在我們這，紅色卻是和繁榮富強(qiáng)，性格，火熱激情等聯(lián)系在一起，不同文化差異是我們做設(shè)計(jì)時(shí)候需要去考慮。
▲ 在西方國(guó)家，黑白代表純潔，優(yōu)雅，尊貴，高端感覺(jué)，包括很多大牌的服裝設(shè)計(jì)，店面裝修都是采用黑白。
▲ 在日本韓國(guó)，黑白代表死亡，喪禮等，文化的差異，和人群差異所以在設(shè)計(jì)的時(shí)候一定要重復(fù)考慮到。
3.了解色彩心理學(xué)
了解基礎(chǔ)的色彩心理學(xué)，有興趣的同學(xué)可以去搜索相關(guān)資料看看。
▲ 紅色：最容易引起人的注意、興奮、激動(dòng)、緊張。
▲ 橙色：充滿(mǎn)生機(jī)和活力的顏色讓人聯(lián)想到大地以及秋色，變化和運(yùn)動(dòng)的感覺(jué)。
▲ 黃色：明亮、輝煌、燦爛、愉快、親切、柔和的印象。
▲ 綠色：是豐饒、充實(shí)、平靜與希望綠色繼承了藍(lán)色所有具備的平靜的屬性。
▲ 藍(lán)色：藍(lán)色是冷色，讓人感到崇高、深遠(yuǎn)、純潔、透明、智慧。藍(lán)色也是公司最偏愛(ài)的顏色，代表著科技和理性。
▲ 紫色：紫色給人高貴、優(yōu)越、奢華、優(yōu)雅、流動(dòng)、不安的感覺(jué)，灰暗的紫色則是傷痛、疾病，容易造成心理上的憂郁、痛苦和不安的感覺(jué)。因此，紫色時(shí)而有脅迫性，時(shí)而有鼓舞性，在設(shè)計(jì)中一定要慎重使用。
4.尋找色彩靈感
早期時(shí)候很難去選定一個(gè)品牌色，，這個(gè)時(shí)候我們一定要去尋找靈感，下面推薦幾個(gè)工具
▲ https:/ /brandcolors.net/是一個(gè)特別好的網(wǎng)站，里面有全世界500強(qiáng)的品牌色板，所有知名公司的品牌色板這里都可以找到答案，可以從他們的品牌色板中去尋找我們想要的那種，和我們產(chǎn)品比較匹配的顏色。
▲ Dribbble和Behanc上搜索關(guān)鍵詞也能找到很多設(shè)計(jì)師的色板
▲ https:/ /www.materialui.co/colors谷歌色板庫(kù)上很多值得我們?nèi)W(xué)習(xí)
▲ http://www.home-designing.com/也可以從室內(nèi)設(shè)計(jì)師經(jīng)常用的室內(nèi)網(wǎng)站配色中去獲得一些設(shè)計(jì)靈感。
▲ 當(dāng)你找到喜歡的配色方案時(shí)，你可以用吸管根據(jù)來(lái)梳理喜歡的這個(gè)配色，做成色板，有必要吋候可以迸行凋整。
如何去定義一套UI配色
如何去定義一套APP的配色，如何用HSB去定義套配色。
什么的HSB?
HSB是一種顔色模式，在HSB模式中，H代表色相，S代表飽和度，B代表亮度!
1.多嘗試不同配色
在制作色板的時(shí)候，需要我們盡可能的把所有顏色和顏色靈感都創(chuàng)造出來(lái)，不要怕嘗試不好，然后把所有顏色嘗試處理后，再去縮小色板范圍，怎么縮小范圍，可以結(jié)合我前面說(shuō)的那些原則，在UI設(shè)計(jì)中，可能額外需要注意幾個(gè)問(wèn)題:
- 超鏈接顏色
- 品牌色
- 主要顏色，輔助顏色
- 成功顏色，錯(cuò)誤顏色
- 文字顏色，背景顏色
2.利用HSB色彩模型
第一步確定品牌色，品牌色一般企業(yè)LOGO的顏色，如果沒(méi)有可以去定義一個(gè)
以品牌色為基準(zhǔn)得出24色帶
我們拿Spotify這個(gè)軟件舉例，他品牌色是綠色，來(lái)定義它的一套色彩體系
h值(色相)以15，S和B不変，遞增得到基于品牌色的24個(gè)色帶，為什么是24個(gè)，24X15=360剛好圍繞色環(huán)盤(pán)一圏，因此得到一圈基于品牌色，明度和飽和度一致性的顔色。
基于色帶得出16色相環(huán)
細(xì)心的同學(xué)可能發(fā)現(xiàn)色帶上其實(shí)很多顔色都比較接近，比如綠色、藍(lán)色，我們需要再進(jìn)一步篩選出合適的顏色作為16色相環(huán)，盡量選取一些和主品牌色比較舒服的顏色搭配。
最后根據(jù)篩選后得出的16色相環(huán)
調(diào)整B (亮度)和S (飽和度)
這一步我們需要去定義同頻的輔助色，也就是16色相環(huán)的輔助色，可以在亮度(B) 按-10，-20去加減，也可以在H上面以+-5去増加色相，原則就是需要有對(duì)比度，需要明顯。
調(diào)整飽和度值
調(diào)整明度，如果對(duì)比不明顯，可以-20, -30
最后得出一套同頻下的色盤(pán)，但是很相近，所以我們需要去排除一些
制定色板
和品牌色同頻的輔助色板
制定色板，這里需要使用到一個(gè)網(wǎng)站https://coolors.co/這里只需要輸入對(duì)應(yīng)的品牌色，就可以得出根據(jù)明度遞減遞增的色板，當(dāng)然你也可以去調(diào)整明度來(lái)得出色板。
自此我們得出了整個(gè)產(chǎn)品的調(diào)色板，很多電商大促，包括Airbnb和谷歌都是通過(guò)類(lèi)似的方法得出他們的色盤(pán)！最后根據(jù)我們前面定義的，警告色，超鏈接顏色，成功提示色，我們可以從輔助色盤(pán)中得出對(duì)應(yīng)的顏色，警告用紅色，超鏈接用藍(lán)色，警告黃色，成功綠色等等。
漸變色板
取品牌輔助色相鄰近色顏色做漸變
最后
以上就是今天的分享，如何定義一個(gè)色彩體系和色盤(pán)。知識(shí)量比較大，特別是關(guān)于HSB的運(yùn)用，色盤(pán)出來(lái)了其實(shí)只是根據(jù)，關(guān)于如何色彩搭配其實(shí)是需要我們不斷的去嘗試!希望大家都能掌握這個(gè)方法。
原文地址：我們的設(shè)計(jì)日記（公眾號(hào)）
作者： sky
于是乎，蔥爺總結(jié)了幾個(gè)可以幫助大家做出優(yōu)秀折頁(yè)的設(shè)計(jì)套路，具體如下：
◇◆ 1.異形封面 ◆◇
常見(jiàn)的折頁(yè)，封面與內(nèi)頁(yè)都是統(tǒng)一、對(duì)齊的，像下圖這樣：
而如果把折頁(yè)的封面設(shè)計(jì)成異形，那么就容易在視覺(jué)上給人眼前一亮的感覺(jué)，從而提升閱讀率。當(dāng)然，也不能為了異形而異形，通常這么做是為了利用異形與內(nèi)頁(yè)形成互動(dòng)，制造一些比較有意思的效果。
提示：這類(lèi)折頁(yè)采用的紙張要足夠厚才會(huì)有比較好的效果，比如200g、250g、300g等。
◇◆ 2.封面鏤空 ◆◇
封面鏤空在畫(huà)冊(cè)設(shè)計(jì)中經(jīng)常被用到，但在折頁(yè)中比較少見(jiàn)，這種工藝對(duì)紙張也有一定的要求，適合比較厚的紙。封面鏤空的亮點(diǎn)在于，可以通過(guò)鏤空的圖形展現(xiàn)出內(nèi)頁(yè)的內(nèi)容，并使露出的內(nèi)容與封面元素相互作用，從而制造視覺(jué)上的舒適體驗(yàn)。
◇◆ 3.打破常規(guī)造型 ◆◇
前面談到把折頁(yè)封面設(shè)計(jì)成異形可以提升其吸引力，其實(shí)如果品牌調(diào)性合適、客戶(hù)接受度廣，從折頁(yè)的造型上做改變更能讓人眼前一亮，比如把折頁(yè)設(shè)計(jì)成圓形、三角形、平行四邊形等。
提示：非常規(guī)造型在內(nèi)容的布局上沒(méi)有常規(guī)的矩形方便，所以在設(shè)計(jì)前最好評(píng)估一下，已有的內(nèi)容適合用什么樣的造型來(lái)呈現(xiàn)。
◇◆ 4.打破二維 ◆◇
“平面不平”一直是平面設(shè)計(jì)師在努力的方向，除了在視覺(jué)上創(chuàng)造空間感外，我們還可以通過(guò)裁剪、折疊，在折頁(yè)上真正實(shí)現(xiàn)三維的效果，比如下面這些作品。
打破二維的折頁(yè)設(shè)計(jì)除了可以完成基本的信息傳遞外，還可以使設(shè)計(jì)更有趣更新穎，從而給受眾留下更深刻的印象。
◇◆ 5.以色塊區(qū)分折線 ◆◇
在折頁(yè)中我們會(huì)自然地把折線看作是每一個(gè)版面的邊界，有時(shí)一個(gè)版面只會(huì)排列一個(gè)板塊的信息，在這種情況下，我們可以給每個(gè)版面的背景填充不同的顏色，這么做不僅能使相連的兩個(gè)版面及內(nèi)容區(qū)隔更明顯，而且還能使整體看起來(lái)更豐富、更有視覺(jué)沖擊力。
提示：根據(jù)內(nèi)容的多少和設(shè)計(jì)需求的不同，還可以把相連兩個(gè)或三個(gè)版面填充為同一顏色，還可以用兩個(gè)顏色進(jìn)行錯(cuò)位填充。
◇◆ 6.忘記折線 ◆◇
折頁(yè)的折線就好比一條分割線，它可以把相連兩個(gè)頁(yè)面的內(nèi)容區(qū)隔開(kāi)，也可以方便閱讀，但折頁(yè)中的頁(yè)面畢竟是兩兩相連的，我們?cè)陂喿x折頁(yè)時(shí)，呈現(xiàn)在眼前的往往是好幾個(gè)頁(yè)面。所以有時(shí)候我們可以打破折線的束縛，把折頁(yè)當(dāng)成一個(gè)大的版面來(lái)設(shè)計(jì)，也就是做一些跨版處理，或者打破從左至右一P一P看的視覺(jué)流程，這么處理可以使作品變得相對(duì)靈活很多。
提示：當(dāng)然這里所說(shuō)的忘記折線只是相對(duì)的，因?yàn)檎劬€確實(shí)會(huì)影響到內(nèi)容的呈現(xiàn)以及視覺(jué)流程，所以?xún)?nèi)文一般不會(huì)做跨版處理。
◇◆ 7.打破常規(guī)的折疊方式 ◆◇
折頁(yè)最常用的折疊方式為風(fēng)琴折和內(nèi)三折，這兩種折疊方式雖然很經(jīng)典，但是缺乏創(chuàng)造力，所以我們可以嘗試一些不那么主流的折疊方式，比如觀音折就很好做創(chuàng)意。
還有一些折疊方式會(huì)更另類(lèi)，我們可以在設(shè)計(jì)前就想好折疊方式，然后再根據(jù)折疊方式來(lái)安排信息的擺放。
結(jié)語(yǔ)
優(yōu)秀的折頁(yè)設(shè)計(jì)可以從材質(zhì)、工藝、造型、平面視覺(jué)等多方面去做文章，優(yōu)秀的設(shè)計(jì)師也應(yīng)該對(duì)這幾方面都有比較深的了解。其實(shí)，不論做什么設(shè)計(jì)，我們都應(yīng)該從一些比較大的方面著手，使讓設(shè)計(jì)脫引而出，而不是總沉迷在一些錦上添花的小細(xì)節(jié)里，希望這篇文章對(duì)打開(kāi)你的設(shè)計(jì)思路能有一點(diǎn)幫助。
原文地址： 蔥爺（公眾號(hào)）
作者： 蔥爺
行間距大家都知道，但是具體如何設(shè)定值很多人不知道，一般我常用規(guī)則是 +4 ，比如文字大小是12PX，那么行間距就是16，以此類(lèi)推文字是14，那么行間距就是18。
▲ 上圖是之前設(shè)計(jì)的一套規(guī)范的字行間距規(guī)則，供大家參考。
除了+4的規(guī)律你也可以運(yùn)用黃金比例，文字大小X1.414，文字大小X1.616(1.414和1.616是黃金值)取四舍五入，得出以下字體間距規(guī)則。
很多人要問(wèn)，我如何判斷界面里面用多大的行間距呢?道理很簡(jiǎn)單，就是看你們內(nèi)容，如果你們app內(nèi)容需要很豐富，你可以行間距小一些讓屏幕展示更多內(nèi)容，可以運(yùn)用+4的原則，目前淘寶天貓是這個(gè)原則，如果你頁(yè)面內(nèi)容更加留白大一些閱讀舒服一些，可以運(yùn)用黃金比例的行間距，比如新聞閱讀軟件，需要大量留白來(lái)調(diào)整呼吸感!
▲ Yahoo News因?yàn)槲淖謨?nèi)容信息比較多，所以需要頁(yè)面信息量豐富，所以在行間距上用的類(lèi)似固定+4的原則，讓頁(yè)面看起來(lái)更加清爽。
▲ 相反Airbnb頁(yè)面節(jié)奏大家感覺(jué)更舒服一些，因?yàn)樗w的行間距比較大，留白比較舒服，給人很優(yōu)雅，清爽的感覺(jué)，他們?cè)诤芏嘣O(shè)計(jì)細(xì)節(jié)上都沒(méi)有遵循iOS規(guī)范，而去打破重組，比如列表高度，列表的圖標(biāo)大小等。
2.調(diào)整字間距
除了行間距，字間距同樣很重要，特別是英文頁(yè)面時(shí)候，同樣的內(nèi)容，字間距，和行間距不合適，看起來(lái)界面就會(huì)相差很多，有的看著很舒服，有的看起來(lái)說(shuō)不出來(lái)哪里不對(duì)。
▲ 這2個(gè)頁(yè)面，左邊: (字母和字母的字間距: 0 ，行間距：20)；右邊: (字母和字母的字間距: 0.2 ，行間距：22)
上面左邊的頁(yè)面字母和字母之前距離非常的緊密，句子和句子之間的行間距也很近，導(dǎo)致閱讀起來(lái)很密集，不夠舒服，相反右邊通過(guò)加大行間距和字間距，使得內(nèi)容沒(méi)有那么滿(mǎn)，字母和字母之間的間距，行與行之間的間隔，使得整個(gè)設(shè)計(jì)節(jié)奏得到了一些舒緩!
需要注意的是:不要給太大的字間距，有時(shí)候過(guò)大也會(huì)讓讀者不舒服。
3.減少線
▲ 同樣一個(gè)結(jié)構(gòu)，Airbnb對(duì)于商品單元處理就比ebay看起來(lái)要干凈清爽一些，原因在于ebay上面線條太多，可能和他們整體視覺(jué)語(yǔ)言有關(guān)，線多了就沒(méi)有純色看著清爽干凈。
▲ 再看亞馬遜的設(shè)計(jì)，以及韓國(guó)29cm對(duì)于細(xì)節(jié)的處理，29cm去除一切線條，讓設(shè)計(jì)更加清爽利索，而亞馬遜線條很多，雖然很好的起到的信息分割作業(yè)，但是就不夠清爽利落。
▲ 同樣一個(gè)設(shè)計(jì)，上面的采用線條的處理，下面的采用去掉線條用色塊來(lái)處理，哪個(gè)看起來(lái)更加干凈，當(dāng)然是下面的!
所以在一個(gè)設(shè)計(jì)里面減少線條，或者讓線條最少化，是讓UI設(shè)計(jì)看起來(lái)干凈的一種很重要的方法，通過(guò)間距來(lái)分割信息，加強(qiáng)內(nèi)容和內(nèi)容之間的間距，這樣做，用戶(hù)也是可以很清晰的區(qū)分信息層級(jí)。
需要注意的是：優(yōu)先保證內(nèi)容清晰，如果有些地方一定要用到線條，一定要使用它。
▲ 在Facebook新版本視覺(jué)風(fēng)格中，很明顯發(fā)現(xiàn)去線條的設(shè)計(jì)技法,左側(cè)是改版前，右側(cè)是改版后，很明顯facebook減少了線的運(yùn)用。
▲ 去掉線條后整個(gè)設(shè)計(jì)并沒(méi)有影響層級(jí)，相反更加清晰。
4.留白
▲ 頁(yè)面放松和呼吸感在UI中非常重要，在左側(cè)的設(shè)計(jì)中，元素之間的距離特別小，都擠在一個(gè)空間里面，非常的滿(mǎn)。
右邊的界面，很好的運(yùn)用了版式，和空間感，有足夠的空間讓元素之間去呼吸讓用戶(hù)感覺(jué)舒服。
▲ 這個(gè)案例里面，左邊的內(nèi)容很密集，留白雖然有，但是不明顯，右邊運(yùn)用了大的灰色留白來(lái)區(qū)分信息的內(nèi)容，所以右側(cè)看起來(lái)更加舒適。
▲ Facebook的卡片設(shè)計(jì)同樣也是采用粗的間距來(lái)作為信息的區(qū)分，讓頁(yè)面看起來(lái)更加的層次分明，利索干凈。
▲ 同樣左側(cè)的頁(yè)面雖然運(yùn)用了去線，每個(gè)內(nèi)容和內(nèi)容直接的間距留白有了，但是信息密集不清晰，右側(cè)的就很清晰，通過(guò)頭像作為紐帶來(lái)區(qū)分信息，讓每行的內(nèi)容更加清晰可見(jiàn)。
5運(yùn)用卡片
▲ 在清晰度層面，使用卡片是幫助內(nèi)容信息反饋的很好一種視覺(jué)形式，同時(shí)也讓信息更加明確哪塊是哪塊。
▲ 卡片化設(shè)計(jì)在移動(dòng)端讓設(shè)計(jì)更加干凈利落，是經(jīng)常運(yùn)用到的設(shè)計(jì)點(diǎn)。
總結(jié)
今天分享的幾個(gè)小技巧點(diǎn)，其實(shí)是我們每天做設(shè)計(jì)中遇見(jiàn)的，需要靈活的多學(xué)多用，同時(shí)我們每天看到的一些好的設(shè)計(jì)，記得去留意分析，為什么別的設(shè)計(jì)好，別人設(shè)計(jì)看起來(lái)那么干凈，畢加索說(shuō)過(guò)：好的設(shè)計(jì)師借鑒，偉大的設(shè)計(jì)師偷。
- 1.加強(qiáng)行間距，+4原則或黃金比例
- 2.加大字間距: 0.1或0.2勿過(guò)大
- 3.減少線條，如非得已使用線
- 4.合理留白，拉開(kāi)信息層級(jí)
- 5.運(yùn)用卡片，更好整合信息
原文地址：我們的設(shè)計(jì)日記（公眾號(hào)）
作者：sky
