如何做好用戶界面中的版式設(shè)計(jì)？來看資深設(shè)計(jì)師的總結(jié)！

前言

說到版式設(shè)計(jì)很多人更多聯(lián)系的是平面設(shè)計(jì)中的海報(bào)版式設(shè)計(jì)，而在UI界面設(shè)計(jì)中，也需要遵循很多的版式設(shè)計(jì)方法論，今天我為大家整理一份UI設(shè)計(jì)中版式的實(shí)戰(zhàn)運(yùn)用以及設(shè)計(jì)思路。

什么是用戶體驗(yàn)界面版式設(shè)計(jì)

版式設(shè)計(jì)是現(xiàn)代設(shè)計(jì)藝術(shù)的重要組成部分，是視覺傳達(dá)的重要手段。表面上看，它是一種關(guān)于編排的學(xué)問，實(shí)際上，它不僅是一種技能，更實(shí)現(xiàn)了技術(shù)與藝術(shù)的高度統(tǒng)一，版式設(shè)計(jì)是現(xiàn)代設(shè)計(jì)者所必備的基本功之一。

通俗點(diǎn)解釋，我們在做設(shè)計(jì)時(shí)需要有「條理性」的思維指導(dǎo)，因?yàn)槿说难劬蛘叽竽X在短時(shí)間內(nèi)無法處理大量「撲面而來」的信息，設(shè)計(jì)師需要把這些信息通過視覺化的手段，把這些信息處理成有條理的且具有引導(dǎo)性的「視覺走勢」或者說叫視覺引導(dǎo)，讓讀者在短時(shí)間內(nèi)可獲得你想要表達(dá)的信息，最終形成預(yù)期收益。

版式設(shè)計(jì)的核心方法論

第一：了解字體字形

字體的版式設(shè)計(jì)中，需要了解字體基本結(jié)構(gòu)和字體的空間結(jié)構(gòu)在實(shí)際工作運(yùn)用的時(shí)候，你會發(fā)現(xiàn)字體上下部分是有一個(gè)留白空間的，其實(shí)際的高度要比可視的高度要高

第二：了解行高與行間距

設(shè)計(jì)師提供的設(shè)計(jì)稿與開發(fā)出來的文字高度有所不同比如，實(shí)際開發(fā)出來的會更高一些；iOS 設(shè)備與Android 設(shè)備也有所不同，比如可以看到同樣是顯示20號的字體，安卓的行高會偏高一些。在不同的 Android 設(shè)備上使用的字體不一樣，可能還會出現(xiàn)更多的差別。如果不想辦法抹平這差別，就不能真正意義上實(shí)現(xiàn)雙端一致了。

所以設(shè)計(jì)師在視覺走查時(shí)要特別注意，我的習(xí)慣是同時(shí)用2個(gè)不一樣的手機(jī)，一個(gè)手機(jī)放效果圖一個(gè)手機(jī)安裝實(shí)際測試程序，2者進(jìn)行對比，才能更好的看出區(qū)別來。

第三：字體文字段排版

行間距

我們不難發(fā)現(xiàn)，左側(cè)的文章行間距過小，而右側(cè)的行間距看起來更明確和更舒適；大段文字排版時(shí)，建議使用左對齊的方式，可讀性更高；

避免符號行首及右側(cè)過多鋸齒形

文字的編排時(shí)，如果行首與行尾有標(biāo)點(diǎn)符號時(shí)，閱讀起來很不友好，為了更加便于閱讀我們需要進(jìn)行避頭尾的處理，甚至為了整齊我們需要對文字區(qū)塊進(jìn)行強(qiáng)制對齊；實(shí)際運(yùn)用中可以發(fā)現(xiàn)不論是今日頭條的新聞詳情頁還是網(wǎng)易新聞的新聞詳情頁都是比較整齊的文字排列形式

第四：版心/虛擬邊框

在版式設(shè)計(jì)中，不論是平面海報(bào)還是UI界面設(shè)計(jì)，我們都需要有一個(gè)版心的概念把所有需要展現(xiàn)的內(nèi)容，都放置在此容器中，讓內(nèi)容更加有條理，具有更好的「透氣性」；實(shí)際工作中這樣的好處是多頁面改版會節(jié)省很多的工作量，且效果更加統(tǒng)一美觀

第五：網(wǎng)格系統(tǒng)/柵格化

網(wǎng)格系統(tǒng)是提升頁面條理性的有效設(shè)計(jì)方法，通過網(wǎng)格的設(shè)定，讓排版更加有參考的標(biāo)準(zhǔn)，去設(shè)計(jì)時(shí)有跡可循；在不同設(shè)計(jì)師配合過程中，也能夠避免不同設(shè)計(jì)師設(shè)定的間距不同等造成的效果不一致（關(guān)于實(shí)際工作中網(wǎng)格的實(shí)際運(yùn)用運(yùn)用，如果同學(xué)們想了解的可以評論區(qū)留言，我可以單獨(dú)拿出一篇文章來講解）

第六：重量比/張弛度對比

調(diào)整畫面中的文字或者線條粗細(xì)度以及內(nèi)容明度來增加頁面的張弛度，或者叫重量比畫面中文字越粗重量感越重，反之越輕線條選擇時(shí)越粗則越重，越能表現(xiàn)其重要性的分隔色塊或者圖片越深越鮮艷的則較重，反之越淺越淡的越輕

第七：細(xì)節(jié)點(diǎn)綴與變化

在界面設(shè)計(jì)中，需要突出層次的同時(shí)，也需要注意輔助文字或者解釋文字的排版，亦或者是元素的「打破常規(guī)」；合理的排列這些信息起到展示其功能入口的目的，同時(shí)也能夠起到點(diǎn)綴和增加畫面細(xì)節(jié)的作用，讓畫面更加的精致！不論是線條、還是留白還是細(xì)小的icon、文字等都可以很好的起到破解畫面單調(diào)的作用

第八：節(jié)奏/重復(fù)

重復(fù)性的元素可以是圖案、文字、色彩、空間格式等，重復(fù)能增強(qiáng)條理性和界面的統(tǒng)一感，節(jié)奏和韻律也需要重復(fù)來實(shí)現(xiàn)。實(shí)際工作中經(jīng)常能夠看到很多類似的版式設(shè)計(jì)

第九：親密性/貼近度

親密性的關(guān)系可以讓畫面形成獨(dú)立的內(nèi)容區(qū)域或者呈現(xiàn)空間，讓產(chǎn)品能夠很好的呈現(xiàn)相對獨(dú)立的信息，減少用戶的識別難度，提高效率；不論是常用的線條或者「水槽」分割的形式；還是Google引領(lǐng)的「去線式」設(shè)計(jì)，亦或者是卡片式設(shè)計(jì)的絕對親密特制的形式都可以給人創(chuàng)造出親密貼近的版式設(shè)計(jì)感受

實(shí)際界面設(shè)計(jì)中如何運(yùn)用？需要避免的坑都有哪些？

1. 文字間距的實(shí)際運(yùn)用

當(dāng)你在設(shè)計(jì)大段文字界面的時(shí)候，比如筆記的編輯頁面，或者新聞類的詳情頁時(shí)，就需要了解行高應(yīng)該在一個(gè)什么大小，一般常用的間距應(yīng)該在1.2-2.0大小的文字高度倍數(shù)，移動端每行中文字建議20-25個(gè)字；在左圖可以看到文字的行高/行間距過窄給人一種很壓抑不易閱讀的感受，而右側(cè)的間距相對更加舒適

2. UI界面中的版心

在海報(bào)設(shè)計(jì)或者書籍排版中常常用到版心的概念，把比較重要的信息都放在設(shè)定的中心區(qū)域內(nèi)，讓版式更加具有一定的透氣性；在版心的面積比也可以叫「版心率」，版面率越高，可排版的內(nèi)容越多，反之則越少

3. 網(wǎng)格系統(tǒng)的運(yùn)用

網(wǎng)格系統(tǒng)又叫柵格系統(tǒng)，早期的Web網(wǎng)頁設(shè)計(jì)時(shí)開始運(yùn)用這樣的方法，

運(yùn)用網(wǎng)格系統(tǒng)的目的，前面我也提到了其實(shí)主要是2個(gè)，

第一是提升頁面條理性的有效設(shè)計(jì)方法，讓排版更加有參考的標(biāo)準(zhǔn)；

第二是避免不同設(shè)計(jì)師設(shè)定的間距不同等造成的設(shè)計(jì)的結(jié)果不一致，導(dǎo)致項(xiàng)目延期等風(fēng)險(xiǎn)的發(fā)生。

柵格實(shí)際界面中的運(yùn)用形式中，可以看到App Store的柵格化采用了左邊距40右邊距40列12間距20，Medium采用了左邊距36右邊距36列10間距44，不同產(chǎn)品的柵格定義不同，需要根據(jù)自己的產(chǎn)品而定

4. 重量級對比

色塊對比

對色塊通過顏色和飽和度的調(diào)節(jié)對比，讓畫面中元素的層次以及重量級的引導(dǎo)，起到明顯的作用；不理論是印象筆記的微信強(qiáng)引導(dǎo)的綠色button，還是小紅書強(qiáng)引導(dǎo)的白色button都是與其他button采用不同的設(shè)計(jì)重量級進(jìn)行區(qū)分，而知乎的「選擇器」操作則選中button采用高飽和的顏色，未選中則選用低保和的顏色進(jìn)行對比

字重對比

通過對標(biāo)題加粗運(yùn)用重色、內(nèi)容運(yùn)用淺色低飽和的方式，產(chǎn)生視覺差，提高用戶的瀏覽效率以及表達(dá)產(chǎn)品的視覺層次；可以看到以下3個(gè)案例中很明確的運(yùn)用了字重對比的版式設(shè)計(jì)語言進(jìn)行層次的區(qū)分

5. 親密性/貼近度

通過對相同屬性元素模塊化或者區(qū)域分隔造成的一種視覺上的相對獨(dú)立性，使得界面的層次清晰有序，提高用戶的識別效率；在以下案例中可以看到京東APP與優(yōu)酷APP的設(shè)計(jì)語言都運(yùn)用了卡片形式制造親密性，而微信讀書則采用了「水槽」分割來制造親密性版式設(shè)計(jì)

6. 點(diǎn)綴與變化

在界面設(shè)計(jì)中很多時(shí)候會出現(xiàn)單純的圖片或者文章類的重復(fù)性排版，容易造成視覺上的單調(diào)感，我們可以增加修飾性的元素來制造變化，也可以通過穿插不同形式的內(nèi)容來打破乏味的版式；在優(yōu)酷的適配標(biāo)題中可以看到增加了心形或者火苗的點(diǎn)綴形式，而Twitter的的文字列中增加了icon圖標(biāo)；在Medium中對重復(fù)性信息中間增加橫向滑動的內(nèi)容來打破枯燥單調(diào)的版式設(shè)計(jì)

7. 節(jié)奏/重復(fù)

節(jié)奏感，可以讓畫面元素或者組合呈現(xiàn)一致性的排列，從而達(dá)到閱讀效率的提升；在App Store的樣式采用了列表重復(fù)的版式設(shè)計(jì)，而在大眾點(diǎn)評的版式設(shè)計(jì)中采用了瀑布流的設(shè)計(jì)語言

總結(jié)

設(shè)計(jì)排版的核心要點(diǎn)是要幫助用戶，影響用戶的使用，提高產(chǎn)品的體驗(yàn)友好度

可以幫助到用戶更好的獲得喜愛的產(chǎn)品、能夠快速的記錄心得和感悟、能夠減少瀏覽上的干擾因素、提高識別的效率；設(shè)計(jì)服務(wù)生活、設(shè)計(jì)可以改善體驗(yàn)、提升體驗(yàn)

以上是我實(shí)際工作中運(yùn)用的有效的實(shí)戰(zhàn)方法論，其實(shí)每一個(gè)模塊都可以單獨(dú)的拆分出來進(jìn)行更加系統(tǒng)和全面的講解和分析說明，后面的文章里有機(jī)會和大家在分享。

希望對大家在UI設(shè)計(jì)界面版式設(shè)計(jì)中有所實(shí)際的幫助，讓我們一起努力，每天進(jìn)步一點(diǎn)點(diǎn)，成為更好的自己。

歡迎關(guān)注作者微信公眾號：「知研設(shè)」