說到版式設計很多人更多聯系的是平面設計中的海報版式設計，而在UI界面設計中，也需要遵循很多的版式設計方法論，本期小編為大家整理一份UI設計中版式的實戰運用以及設計思路

1.前言

說到版式設計很多人更多聯系的是平面設計中的海報版式設計，

而在UI界面設計中，也需要遵循很多的版式設計方法論，今天我為大家整理一份UI設計中版式的實戰運用以及設計思路

2.什么是用戶體驗界面版式設計

版式設計是現代設計藝術的重要組成部分，是視覺傳達的重要手段。表面上看，它是一種關于編排的學問；

實際上，它不僅是一種技能，更實現了技術與藝術的高度統一，版式設計是現代設計者所必備的基本功之一。

通俗點解釋，我們在做設計時需要有“條理性”的思維指導，因為人的眼睛或者大腦在短時間內無法處理大量“撲面而來”的信息，

設計師需要把這些信息通過視覺化的手段，把這些信息處理成有條理的且具有引導性的“視覺走勢”或者說叫視覺引導，

讓讀者在短時間內可獲得你想要表達的信息，最終形成預期收益。

3.版式設計的核心方法論

第一了解字體字形

字體的版式設計中，需要了解字體基本結構和字體的空間結構在實際工作運用的時候，你會發現字體上下部分是有一個留白空間的，其實際的高度要比可視的高度要高

第二了解行高與行間距

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

PS:視覺走查

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

第三字體文字段排版

行間距

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

避免符號行首及右側過多鋸齒形

文字的編排時，如果行首與行尾有標點符號時，閱讀起來很不友好，為了更加便于閱讀我們需要進行避頭尾的處理，甚至為了整齊我們需要對文字區塊進行強制對齊；實際運用中可以發現不論是今日頭條的新聞詳情頁還是網易新聞的新聞詳情頁都是比較整齊的文字排列形式

第四版心/虛擬邊框

在版式設計中，不論是平面海報還是UI界面設計，我們都需要有一個版心的概念把所有需要展現的內容，都放置在此容器中，讓內容更加有條理，具有更好的“透氣性”；實際工作中這樣的好處是多頁面改版會節省很多的工作量，且效果更加統一美觀

第五網格系統/柵格化

網格系統是提升頁面條理性的有效設計方法，通過網格的設定，讓排版更加有參考的標準，去設計時有跡可循；在不同設計師配合過程中，也能夠避免不同設計師設定的間距不同等造成的效果不一致（關于實際工作中網格的實際運用運用，如果同學們想了解的可以評論區留言，我可以單獨拿出一篇文章來講解）

第六重量比/張弛度對比

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

第七細節點綴與變化

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

第八 節奏/重復

重復性的元素可以是圖案、文字、色彩、空間格式等，重復能增強條理性和界面的統一感，節奏和韻律也需要重復來實現。實際工作中經常能夠看到很多類似的版式設計

第九 親密性/貼近度

親密性的關系可以讓畫面形成獨立的內容區域或者呈現空間，讓產品能夠很好的呈現相對獨立的信息，減少用戶的識別難度，提高效率；不論是常用的線條或者“水槽”分割的形式；還是Google引領的“去線式”設計，亦或者是卡片式設計的絕對親密特制的形式都可以給人創造出親密貼近的版式設計感受

4.實際界面設計中如何運用？需要避免的坑都有哪些？

文字間距的實際運用

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

UI界面中的版心

在海報設計或者書籍排版中中常常用到版心的概念，把比較重要的信息都放在設定的中心區域內，讓版式更加具有一定的透氣性；在版心的面積比也可以叫”版心率“，版面率越高，可排版的內容越多，反之則越少。

網格系統的運用

網格系統又叫柵格系統，早期的Web網頁設計時開始運用這樣的方法，

運用網格系統的目的，前面我也提到了其實主要是2個，

• 第一是提升頁面條理性的有效設計方法，讓排版更加有參考的標準；
• 第二是避免不同設計師設定的間距不同等造成的設計的結果不一致，導致項目延期等風險的發生。

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

重量級對比

色塊對比

通過對色塊通過顏色和飽和度的調節對比，讓畫面中元素的層次以及重量級的引導，起到明顯的作用；不理論是印象筆記的微信強引導的綠色button，還是小紅書強引導的白色button都是與其他button采用不同的設計重量級進行區分，而知乎的“選擇器”操作則選中button采用高飽和的顏色未選中則選用低保和的顏色進行對比。

 字重對比

通過對標題加粗運用重色、內容運用淺色低飽和的方式，產生視覺差，提高用戶的瀏覽效率以及表達產品的視覺層次；可以看到以下3個案例中很明確的運用了字重對比的版式設計語言進行層次的區分。

親密性/貼近度

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

點綴與變化

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

節奏/重復

節奏感，可以讓畫面元素或者組合呈現一致性的排列，從而達到閱讀效率的提升；在App Store的樣式采用了列表重復的版式設計，而在大眾點評的版式設計中采用了瀑布流的設計語言。

5.總結

設計排版的核心要點是要幫助用戶，影響用戶的使用，提高產品的體驗友好度

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

以上是我實際工作中運用的有效的實戰方法論，其實每一個模塊都可以單獨的拆分出來進行更加系統和全面的講解和分析說明，后面的文章里有機會和大家在分享。

以上就是本期分享的內容了，希望對大家在U設計界面版式設計中有所實際的幫助，讓我們一起努力，每天進步一點點，成為更好的自己。

轉載聲明：本文來源于網絡，不作任何商業用途