2022-9-19 濤濤
視覺設計排版：
第一步，先把文字內容做好排版；
第二步，思考場景設計與信息層級處理；
第三步，進行排版設計的布局；
第四步，最后做好色彩和細節的優化，從整體出發到細節處理再回歸整體性的原則，做好包裝的設計展示。
一 格式塔原理在排版中的應用
格式塔原理是 20 世紀早期的德國心理學家研究小組發現的人類視覺工作原理。人類視覺是整體性的，我們會對看到的事物自建結構，并且在神經系統層面上感知形狀，圖形和物體。「形狀、區域」在德語中是 Gestalt，所以這些理論也就叫做視覺感知的格式塔原理。
格式塔原理的設計原則如下：
1. 鄰近性原則
物體之間的相對距離會影響我們認知它們的關系。相互靠近的元素被認為是一組，那些距離較遠的則自動劃分為組外。整體看來，距離近的關聯性更緊密。
下面左圖中的圓相互之間在水平方向比垂直距離近，那樣我們看到了4排圓點，而右圖看成2列。
如何應用于UI設計：
鄰近性原則，在網頁端或移動端的排版布局中有非常廣泛的應用。設計師應用此原則，調整距離或者用分割線等來分開不同設計模式的構建。此原理應用在設計中，界面層級好，視覺清晰。
按照原理，我們會將內容相似的元素位置放置得更接近，在 UI 設計中的卡片化設計，列表組合等信息整合設計都會應用到此原理。并且不同內容之間我們使用分割線，留白，卡片區分等方式來使不同的內容區分更為明顯。
2. 相似性原則
格式塔原理中的相似性通常和鄰近性原則一起運用在產品設計中。它指出了影響我們感知分組的另外一個原則：有共同視覺元素的物體看起來更有關聯性。我們傾向于將看起來相似的對象視為一組或者一個模式，并且將它們與特定含義或者功能聯系在一起。
如何應用于UI設計：
利用顏色，形狀，大小，方向，以及紋理等視覺元素，組成相近的樣式。UI 設計規范中的控件組合成的組件，大部分都會使用到相似性原則，統一視覺樣式，來表達統一的功能性。
3. 封閉性
人的眼睛在觀看時，大腦并不是在一開始就區分各個單一的組成部分，而是將各個部分組合起來，使之成為一個更容易理解的統一體。這個統一體是我們日常生活中常見的形象，如正方形、圓形、三角形等，讓用戶容易理解。
如何應用于UI設計：
這個原則也非常適用于圖形用戶界面的圖標設計或界面設計中
4. 連續性原則
人的視覺具備一種運動的慣性，會追隨一個方向的延伸，以便把元素連接在一起成為一個整體。下圖是兩個交叉的圓弧軌跡，人們往往傾向于使視覺流跟隨著相同顏色的軌跡，而不會被干擾，我們能夠感知這是兩條弧線。
如何應用于UI設計：
連續性目前在 app 產品中應用非常廣泛。比如在電商產品中 banner 區域的左右滑動交互模塊，滑動組件和進度條展示。
主要應用范圍如下：
1 導航欄中的連續性設計
2 卡片模塊中的連續性設計
3 模塊的連續性設計
5. 主體/背景
我們的大腦將視覺區域分為主體和背景 2 個部分。這個特征有利于我們對重要信息和次要信息的感知。
主體和背景的區別可以從以下兩個方面來控制：
1 場景大?。何覀儍A向于將處于大場景中的中間小區域部分視為主體，而大場景視為背景；
2 層級關系：如果在同一個平面中，我們傾向于將處于視覺第一層級的物體視為主體。
如何應用于UI設計：
此原則可以幫助設計師在設計界面的過程中抓住用戶注意力，并且讓用戶優先看到我們想讓他們看到的事物。比如重要信息的彈窗提示，以及弱化背景從而突出內容等界面中都有運用到此原則。
二 移動端版式設計原則：
版式設計，在有限的版面空間中，將版面構成元素，如：文字、圖片、線條和顏色等，根據特定的內容，進行組合排列，并運用造型要素及形式原則，把構思與計劃以視覺的形式美感，表達出來。
一個優秀的排版要考慮到用戶的閱讀習慣和設計美感，幫助用戶區分重點、提升可讀性。遵循平面設計原理，排版中的對齊、對比、重復、親密性 4 大原則。
對齊原則
對齊是版式設計的最重要的原則之一，對齊可以建立一種整齊的外觀，帶給用戶舒服的一致性的瀏覽體驗?；趶纳系较?，從左到右的閱讀習慣，應用在界面設計中，一般是左對齊、居中對齊和右對齊，同時同一豎線上的元素，要保持居中對齊。
對比原則
做排版設計時，重點的元素通過尺寸、色彩、造型等引起用戶關注，這樣重點內容，才會突出出來。設計要有輕重緩急之分，不要讓用戶去找重點，Don't let users think，讓用戶順利的接受重要信息。
例如：圖片大小的對比，讓用戶感受到最重要的信息。
親密性原則
根據親密的原則來組織復雜的信息，將彼此相關的同一類的元素靠近，同時把遠離不相關的元素，這樣就可以大大提高界面設計的可讀性。
三 作品集排版法則
設計排版法則：
1 左對齊
在頁面排版時，將你的文字設置為左對齊。為什么？在西方文化中，人們的閱讀習慣是從上到下，從左到右的。通過左對齊文字，眼睛能夠更容易地找到邊緣，更易于閱讀。避免因為這個原因縮進段落的第一行。
2 使用一種字體
優秀的設計師在排版設計中能夠完美使用兩種字體，是因為他們能夠把握和了解所選的字體的類型，并保證他們是互補的。
但是一般情況下，避免使用兩種相同類型的字體。例如，不要使用兩種以上的非襯線體、粗襯體或手寫體。
使用一種字體，直到你能夠很好的運用和掌握它。如：蘋方字體或Dinner字體。
3 跳過一個字重
在改變字體權重時，從細體到粗體，或者從中粗體到超粗體。大師級的設計關鍵就是對比。
粗體和細體對比的標題字體組合，獲得最大的對比。
4 雙倍字號尺寸
當改變字號大小時，一個好的經驗法則是，你使用的字號大小是現有字號的兩倍或一半。
5 對齊到一個軸線
沿著一個主坐標構建你的字體排版，并將字體元素對齊到網絡線。無論文字類型或大小如何，在垂直軸上，字體對齊軸線的左邊緣。在水平軸上，尋找最佳水平元素，或對齊文字的大寫字母字高，或對齊文字基線即可。
6 使用條框分類
使用形狀/線條將相關的內容信息塊進行分類編組。這樣會使不同的元素排列很有順序。
7 注意間距
段落排版中到處都是間距。如果文字左對齊。右側會出現文字的參差不齊、起伏留白等。避免在段落的最后一行出現單字成行的情況，切勿使用強制對齊設置。
注意段落右側的起伏形狀，在一個句子中標點符號之間使用單個空格，以避免形狀和角度不美觀。
間距的重要性。越是間距接近的元素，讀者就會假設在不同的信息塊之間存在這一種關系。
最后推薦 優秀設計師的作品排版 ：
如下圖：來自國際化設計師 MIKE 的設計作品
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：峻溪POINTVISION 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司