如何在設計中建立條理？

來自專欄設計相關4 人贊了文章

今天寫一篇專業文章，大概有兩千多字，但如果你是喜歡設計並具備設計匠心的設計師，相信你一定會有耐心看完，當然我也本著快餐式閱讀的原則儘可能廢話少說，很多方面直戳重點。

我們在平時的設計工作中，不管你做平面設計還是UI設計甚至其他設計，都需要理清工作需求並進行一個清晰完整的工作流程並注意一些設計方法，否則可能會出現一些做無用功的情況。我大概按照下面幾個方面來講如何在設計中建立條理，相信你如果是個嚴謹求實的設計工作者，一定會對部分引起共鳴，部分覺得還存欠缺，但不管怎麼說只要你有所收穫，這幾分鐘的付出都是值得的。

一、信息的整理

在《版面設計原理》中對信息的整理是說理解設計的意圖，提取要素，正確布置是設計的第一步。

以我的經驗，就拿做一張海報來說，我經常做一些課程推廣的海報，提供給我的信息我大概這樣分類：1.標題板塊；2.講師介紹板塊；3.課程介紹板塊；4.報名信息。

或者做Ui設計也是同樣的原理，對信息模塊需要做一個清晰的理解。這幾塊信息分類好，看看每塊信息的內容量，這有利於對不同板塊面積劃分做出準確判斷。

二、梳理信息層級

不管是一張海報還是其他設計，用戶在閱讀一張設計圖的時候都會有個先後順序，好比看美女，有的人先看臉，有的人先看胸，有的人先看腿，但是不同人的不同部位明顯程度不一樣，所以每個人的排布優先順序也不同。當然如果長得丑很容易被忽略這就好比你的設計做得爛，沒人看。

通常一張海報我們會把活動主題放大用來吸引人們關注，然後其他附屬信息相對弱化。但在每個小版塊內同樣存在排布層級，比如「雙十一巨惠，特價產品僅1折」，習慣性把「1折」加粗放大，說明這個「1折」具備更高的優先順序，要加強視覺用以突出；

另外，這點在產品設計中經常提到，我們一般會做個腦圖來表達不同模塊的層級觀念，清晰易懂。

三、版面的對齊與排布

很多人說對齊無非左右上下的關係，說的輕鬆可是很多時候不少人的作品就是無法對齊。沒有對比就沒有傷害，如果兩個作品放在一起明顯對齊的要比沒對齊的看著舒服很多。

其實對齊也不是單純左對齊，右對齊，居中對齊這麼簡單的事，更有板塊之間的對齊，元素之間的對齊，軸的對齊，間距的平均分布等，這種說法太過於宏觀，可能你並不能充分理解，無需擔心先有個大概印象，知道在做設計過程中需要注意這點就行。我會在後期的文章中單獨講解，估計一個對齊就能講出很多道理來，可見在做設計的過程中對齊排列的確是個非常重要的因素。

四、視線的移動

我們熟知的排版大部分是從左往右和從上到下為主，所以用戶在閱讀過程中視線轉移也是基於這個原則。通常這一現象以閱讀文章最具代表性，但其實幾乎所有的平面作品都存在這一現象，這跟長期形成的用戶習慣有很大關係。

這裡我們要考慮的問題是一方面迎合用戶的閱讀習慣，另一方面儘可能減小用戶的視覺疲勞。前者上面已經說過，後者相信大家在閱讀一些畫冊或報紙的時候會發現很多是圖文搭配排版的，而且每個模塊之間都有足夠留白，讓用戶輕鬆分辨不同的模塊區分，這樣做很重要的原因就是減小視覺疲勞和區分板塊信息。

五、構成與重複

在版面設計的過程中，往往內容越多越顯得雜亂無章，這時候我們需要把內容儘可能整理的更具有條理性。比如APP中的卡片式設計或畫冊中的產品介紹，不管是列表式還是交錯式，都是為了有效行程規律性的板式方便用戶眼睛移動過去的時候分辨信息板塊，以便對信息準確分類和易於閱讀。

六、重心和平衡

版面設計的時候需要注意整體的「平衡」，調整平衡的訣竅，是根據版面內編排要素的「分量」來考慮。文字，圖片，等都有分量，而分量大小一般由顏色和面積決定。但是不同元素之間的分量不一樣，這就需要在顏色和大小上以及多少上下功夫，使版面看起來相對平衡。

這裡還提到一個概念是重心。重心，是在重力場中，物體處於任何方位時所有各組成支點的重力的合力都通過的那一點。物理上這麼定義重心的概念，視覺上的重心有區別與物理概念，人的視覺安定與造形的形式美的關係比較複雜，人的視線接觸畫面，視線常常迅速由左上角到左下角，再通過中心部分至右上角經右下角，然後回到以畫面最吸引視線的中心視圈停留下來，這個中心點就是視覺的重心。

但畫面輪廓的變化，圖形的聚散，色彩或明暗的分布等都可對視覺重心產生影響。因此，畫面重心的處理是平面構圖探討的一個重要的方面。在平面廣告設計中，我們習慣性把主題放置在重心位置。

七、易讀的文本編排

想排版出易讀的文本編排就得熟悉文本所具備的屬性，首先是字體的選擇，然後行間距，段間距，字體大小，需不需要首行縮進，避頭尾法則等都是考慮因素。我大概總結了下，可以考慮以下幾個方面：

●字體的選擇是否易讀（比如襯線體和非襯線體的選擇）；

●字體的情感表達（比如倩體的柔美風格，菱心體的尖銳突出，造字工房力黑的力量感等）；

●段間距大於行間距，行間距是字體大小別小於1.5倍（這個1.5是參考值，設計中沒有固定值，只有相信自己的經驗和眼鏡，不同場合也不一樣。）；

●如果在軟體中操作，一行的文本適合點選文本編輯，一段的切記要拖出文本框；

●避免獨字成行現象出現；

●注意避頭尾法則的嚴格性；

●段落文字很多時候需要兩端對齊；

●多種大小不同的文字編輯的時候需要控制文本層級；

●注意中英文字體的搭配；

……

八、網格的靈活應用

網格系統的大概意思是把文字和圖片都配置在矩形框里，視覺上創造出條理分明、整齊的美感的排版方法。其實在很多書籍和雜誌中這種方法應用比較廣泛。

網格設計沒有特別的規則，一般都是根據內容來決定網格的大小以及分割塊數。使用網格排版的作品，在閱讀過程中板式視覺非常統一，因此具備方便尋找目的信息、易於閱讀的優點。但同時也有限制設計靈活性和版面單調的危險性。但不管怎麼說，方法不是唯一的，只不過是針對具體適合的問題才會去採用，只有對這些方法都充分了解，才會在實際應用中得心應手。

以上通過各個角度說了設計過程中的條理，基本說的比較宏觀，雖說都是版式設計中最為基礎的東西，但如果想深入了解還需要找很多案例精細講解，今天集中寫一部分，後續我會不斷分局部詳細寫出來並配上案例，這樣對理解更有幫助。

更多內容，請關注公眾號：設計實驗室

專註於各類圖片分享，攝影藝術作品，平面設計作品，其他視覺類相關作品，表情包製作，軟體技能教程等，歡迎關注。