我在學UI設計的時候，網上的資料很多，但是參差不齊。對於新人來說，很痛苦，進度也很慢。所以想收集壹下自己的工作經驗，通過之前踩過的壹些坑來分享壹些知識點。
分享的最終目的是沈澱自己，也希望能給想要提升排版能力的設計師帶來壹些幫助和啟發！所以這壹系列文章可能並不適合所有人。
所以這周就從排版開始吧...
排版是界面設計中最難的部分，也是非常重要的部分。它以各種形式存在於界面中，如純文字排版、圖文排版、圖片文字排版等。這是我們在設計時經常面臨的問題。好的排版能有效地向用戶傳達關鍵信息，同時也能提升產品體驗。
在日常生活中，我們離不開設計和排版，包括我們經常看到的各種廣告和電影海報。如果用戶不能在短時間內記住關鍵信息，設計就會失敗。所以，希望通過今天的文章，妳能對排版有壹些新的認識。
在界面設計中，影響排版設計的因素有很多。我總結了七個維度(當然還有其他更細的，這裏暫且不說)，直接影響整個排版質量。當然這些方法都不是絕對的，但是如果能夠熟練全面的運用到界面上，大部分的界面設計感都是可以提升的，當然也需要不斷的刻意練習來提升。
它們是:
下面我會搜集壹些案例給大家講解。
空格就是我們常說的:留白。當設計元素緊緊地聚集在壹起時，界面似乎就沒有了重點，需要和諧地使用。使用空間的規則直接影響產品的特性。小空間和大空間在視覺上是完全不同的。那麽在界面設計中如何才能更好的利用空間來設計排版呢？
有壹個很好的方法就是利用網格來構建空間。在平面設計中，它的使用非常多，所以在用戶界面中，它也可以用來營造空間。我們來看壹個案例:
如上圖所示，作者將壹個界面劃分為4個網格，通過構建的網格對界面中的元素進行排版。右邊是我的拆解圖(註:網格構建需要建多少根柱沒有強制性規定，最終的柱數需要根據產品內容的復雜程度來定義)。比如我最近在做壹個汽車HMI設計語言，也用了網格，所以我會根據整個汽車HMI產品的復雜程度來搭建，同時也用了幾個網格來配合。
在上面的兩個例子中，我們可以發現，設計師用了很大的空間來設計界面，使得整個界面更加透氣、透氣。因為也是娛樂產品，所以設計會更有藝術性。
韓國的29cm產品是我最喜歡的app。整體設計呼吸感強，留白大，視覺焦點清晰。
我們都知道大的物體更醒目，更容易吸引我們的註意力，所以在設計中，我們通常會放大和突出重要的元素。
A和B哪個更吸引妳？
答案是A .因為A型排版看起來更大更吸引人。
上面這個案例，大小法用得好，可以看到視覺層次非常清晰。首先我能快速知道什麽是重要信息，壹定是封面圖，然後是左上角的logo，然後是導航和標題，最後是每個內容塊的壹些詳細的文案說明。
簡單的例子，重要信息壹定要大，次要信息要弱化。
色彩在排版設計中起著很大的作用，可以畫龍點睛，或者給畫面帶來活力，或者代表品牌。當然，在UI界面中壹定要慎重使用字體顏色，因為不同的顏色有不同的含義。合理恰當地運用色彩，可以瞬間提升設計品質感。
在上面的網頁設計中，設計師通過紅色來強調重要信息，同時讓灰色的畫面略有不同。
對某些文本使用輔助顏色，如鏈接文本。正確使用圖1。圖2在文字中使用了大量的顏色，嚴重影響了視覺體驗。
避免使用低對比度的顏色，如圖2所示。
對齊是我們在界面設計中經常提到的話題，也是提高界面質感最重要的無形力量。可能有時候我們忽略了，有時候不經意間沒做好。
對齊的界面比未對齊的界面整潔很多，視覺流也符合用戶的閱讀習慣。
我們可以用前面學過的網格來對齊，這樣不僅設計有節奏感，畫面也很整齊美觀。
在我們的界面設計中，有三種方法來整合思想。當然要根據業務板塊選擇合適的對齊方式。三種對齊方式都有壹個看不見的軸(看我的目標線)，然後我們會圍繞這個來排版設計，自然形成有規律的視覺流程。
在上面的例子中，作者整體上是靠左對齊的，這樣就形成了壹個以左邊為中心的視覺流向。
我們在做界面設計的時候，經常會遇到有人說妳的設計不是這裏太重就是這裏太輕，或者妳不想在這裏加什麽東西，否則會有空間。為什麽？
這是平衡法則。如果同壹環境中的物體沒有保持平衡的關系，我們在視覺上是非常不舒服的。
讓我們看幾個例子:
從圖1和圖2可以看出，圖2給人的第壹印象是不平衡，整體視覺重心偏左。
在上面的案例中，設計師用按鈕來平衡整個屏幕的視覺重心。因為左邊的內容比較多，按鍵弱或者小的話很難平衡屏幕，所以我們在做界面的時候定義壹些按鍵大小也是很優雅的。
左邊是視覺界面，右邊是原型，可以看到設計師也是通過元素的合理分配，讓整體界面平衡。
字體選擇對於界面排版非常重要，也是所有界面排版的必要步驟。不同的字體有不同的個性屬性，我們需要根據產品選擇合適的中英文字體。同時，也需要記住，在壹個產品APP界面的設計中，字體最好不要超過兩種。
2019推薦壹些我覺得比較好用的英文字體。您可以在進行概念設計或包裝提案時使用它們。
它們是蒙特塞拉特和Nexa字體。
分別是Futura和Playfair_Display字體。
大家應該都知道中文裏比較好用的字體，比如方體，思源黑體，漢儀旗黑，蘭亭瘦黑，我就不舉例了。
最後，是最後壹次聚會。最後，這是整個設計排版的核心之壹。為什麽？
如果設計目標不明確，那麽最終輸出的整個排版風格可能和妳的用戶群體或者產品個性不壹樣，不同的產品風格會有不同的排版風格。
比如我們的產品是奢侈品，那麽整體的排版設計風格壹定是使用大網格，大空間來設計，細長的字體等等。如果是簡約現代的呢？或者母嬰產品、科技產品、娛樂產品等。，每個都會有壹些特別的排版思路。所以要知道自己的設計目標，確定設計原則。
有了這些原則和目標，那麽接下來就是開始尋找參考和靈感，去了解相應的產品是如何排版的，如何控制畫面的節奏。建議多用pinterest或者behance。
通過七點排版的思路，可以更好的運用在界面設計中。每壹種排版原理都不是獨立的個體，而是相輔相成的。比如大小離不開網格，也離不開對比度、色彩等等。沒有壹些元素，界面就會沒有靈魂，設計輸出的質量也不會好！
好了，本期到此結束，下期繼續和大家分享如何巧妙運用圖形來提升界面質量，增強細節！
題圖來自Unsplash，基於CC0協議。