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