編者按：昨天分享了justinlam總結(jié)的移動版式設(shè)計原理前3條，今天繼續(xù)下一篇，這篇聊聊留白的藝術(shù)和視覺心理學(xué)，同樣的好頂贊，來收。

本文是下篇，上篇教程戳這里→《超實(shí)用！移動端界面中的版式設(shè)計原理(上)》

4. 留白的藝術(shù)

不單單是文字和圖片需要設(shè)計，留白也是構(gòu)成頁面排版必不可少的因素。所有的白都是“有目的的留白”，帶有明確的目的來控制頁面的空間構(gòu)成。

常見的手法有幾種，第一通過留白來減輕頁面帶給用戶的負(fù)擔(dān)。

首屏對一個應(yīng)用來說十分重要，因此一些比較復(fù)雜的應(yīng)用首評都堆積了大量的入口。如果無節(jié)制的添加，頁面中包含的內(nèi)容太多時，會給人一種頁面狹窄的感覺，給用戶帶來強(qiáng)烈的壓迫感，所以元素太多有時候反而不是好事。留白能使頁面的空間感更強(qiáng)，視線更開闊，通過留白來減輕頁面的壓迫感，使用戶進(jìn)入一種輕松的氛圍。

第二通過留白區(qū)分元素的存在，弱化元素與元素之間的阻隔。

表單項(xiàng)與表單項(xiàng)之間，按鈕與按鈕之間，段落與段落之間這種有聯(lián)系但又需要區(qū)分的元素用留白的方式可以輕易造成一種視覺上的識別，同時也能給用戶一種干凈整潔的感覺。

第三通過留白有目的的突出表達(dá)的重點(diǎn)。“設(shè)計包含著對差異的控制。

不斷重復(fù)相同的工作使我懂得，重要的是要限制那些差異，只保留那些最關(guān)鍵的。”這句話出自原拓哉的“白”一書中，通過留白去限制頁面中的差異使內(nèi)容突出是最簡單自然的表達(dá)方式。減少頁面的元素以及雜亂的色彩，讓用戶可以快速聚焦到產(chǎn)品本身，這種方法在電商類的應(yīng)用上被大量的使用。

第四留白賦予頁面構(gòu)成產(chǎn)生不同的變化。版式設(shè)計中要有節(jié)奏感，這也是我一直強(qiáng)調(diào)了。

傳統(tǒng)雜志在每一頁翻開都會有不同的視覺感受，我認(rèn)為在app內(nèi)很多板塊之間的也是可以局部去突出個性或特點(diǎn)的。留白可以賦予頁面輕重緩急的變化，也可以營造出不同的視覺氛圍，通過留白去改變版式再配合四大原則可以產(chǎn)生出不同的效果。

值得注意的是，留白不是一定要用白色去填充界面，而是營造出一種空間與距離的感覺，自然與舒適境界。

5. 視覺心理的靈活運(yùn)用

在觀看事物時，往往會產(chǎn)生一些不同的視覺心理，例如兩個等寬的正方形和圓形放在一起，你一定會覺得正方形更寬。在版式設(shè)計中同樣大量運(yùn)用這些科學(xué)視覺方法對用戶進(jìn)行視覺上的引導(dǎo)，也能讓設(shè)計師快速找到一些排版布局的方法。

（via 版式設(shè)計原理）

首先最常見方法是的是靈活運(yùn)用黃金分割比，文本與線段的間隔，圖片的長寬比等地方都可以通過黃金分割比快速的設(shè)定。比如通欄高度的設(shè)定等等。

在界面排布中，往往圓角和圓形比直角更容易讓人接受，更加親切。

直角通常用在需要更全面展示的地方，例如用戶的照片，唱片封面，藝術(shù)作品，商品展示等地方。在個人類的feed或者頭像，板塊的樣式等使用圓角會有更好的效果。

在全局頁面的排版中也要避免單調(diào)，增加節(jié)奏感。

在上文我也提到過排版要有輕重緩急之分，這樣讓用戶在觀看的過程中不會感到冗長，無趣。

圖片也是有不同的色調(diào)的，通過蒙版的方法可以控制這種色調(diào)。

如果選擇比較明亮的色調(diào)可以減輕這種對用戶的壓迫感，選擇比較暗的色調(diào)可以讓整個畫面更沉穩(wěn)，內(nèi)容顯示更為清晰。

6. 沒有設(shè)計的設(shè)計

最后這段不是版式設(shè)計原理，更像是一種設(shè)計的心境。

古人在寫詩的時候有一種手法叫白描，原拓哉也曾強(qiáng)調(diào)“最美的設(shè)計是虛無”，在界面設(shè)計中同樣追求一種“讓用戶感受不到設(shè)計”的境界。每一條線/每一行文字/每一個按鈕的存在都是都有它存在的理由。它不加無意義的修飾、不須陪村和烘托，讓用戶更關(guān)注內(nèi)容的主體，弱化對視覺的認(rèn)知。甚至于用戶在滑動時看到一個按鈕或一行文字也感覺這是理所當(dāng)然的存在。“菩提本無樹，明鏡亦非臺”，做設(shè)計和做人一樣，一切有為法皆如夢幻泡影，不要注重形式才能明心見性。

圖中的例子在某些地方處理得也不是那么自然，但是我認(rèn)為以上的例子是有向“讓用戶感知不到設(shè)計”的方向上走的，沒有完美的設(shè)計，只有努力變的更好的設(shè)計。最后，做好設(shè)計非一朝一夕，理解設(shè)計也非一朝一夕，希望各位善于發(fā)現(xiàn)美，也善于理解美。

【為了這8個指南也得存書簽！】

1. 平面設(shè)計：《超贊！設(shè)計師完全自學(xué)指南》
2. 交互設(shè)計：《交互設(shè)計師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計師》
3. UI設(shè)計：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識學(xué)起來！為設(shè)計師量身打造的DPI指南》
8. 交互設(shè)計自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計篇》

原文地址：zhuanlan.zhihu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量107萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com