如何創建精緻的UI界面(一):排版篇

2020-12-15 人人都是產品經理

本文給大家介紹了七大排版思路，也希望能給有想要提升排版能力的設計師帶來一些幫助與啟發！

前言

從本周開始，接下來時間裡，會和大家分享如何創建精緻的UI界面，共五部曲，為什麼要做這個分享？

曾經我學習UI設計時，網上資料很多，但是參差不齊，對於新人而言，這是很痛苦的，進步慢。因此我想通過之前踩過一些坑，集合自己的工作經驗，把一些知識點分享出來。

分享的最終目的是沉澱自己，同時也希望能給有想要提升排版能力的設計師帶來一些幫助與啟發！所以本系列文章並不一定適合所有人。

那麼本周就先從排版篇幅開啟……

為什麼要學習排版

排版是界面設計中最難的部分，也是非常重要的一部分，它以各種形式存在界面中，純文本排版，圖形文排版，圖片文本排版等等，這是我們在做設計時候，經常會面臨的問題。好的排版能有效地向用戶傳遞關鍵的信息，同時也能提升產品使用體驗。

在我們日常生活中，離不開設計排版，包括經常見到的各種廣告與電影宣傳海報，如果不能讓用戶在短時間內記住關鍵信息，這個設計就是失敗的。因此我希望通過今天這篇文章，能夠讓你對排版有一些新的認識。

提升設計排版有哪些方法

在界面設計中，影響排版設計的因素有很多，我總結歸納了7個維度（當然還有其他更細的，在這裡就先暫時不講），它直接影響整個排版質量，這些方法當然不是絕對，但是如果能巧妙綜合得運用到界面中，能保證大部分界面設計感得以提升，當然也是需要不斷刻意練習來提高的。

分別是：

合理運用空間的力量
大小的力量
論顏色的重要性
對齊的力量
平衡定律
選擇好的字體
清晰了解設計目標

下面我會集合一些案例來和大家講解下

1. 合理運用空間的力量

空間即我們常說的留白，當設計元素緊緊地聚集在一起時，界面看起來沒有重點，因此需要和諧的運用它，空間的運用規則直接影響產品的性格，小空間和大空間在視覺感受上，兩者完全不同，那麼我們在界面設計中如何去更好的運用空間來設計排版。

有一個很好的方法就是可以運用網格去搭建空間，在平面設計中，運用得非常多，那麼在用戶界面中，同樣也可以運用網格去搭建，下面看一個案例：

如上圖作者把一個界面分為4Gird，通過搭建好的網格來進行界面中元素排版，右側是我拆解的圖（備註：網格的搭建並沒有任何強制性的規定需要搭建多少列，最終的搭建列數需要根據這個產品內容複雜程度去定義的），比如：我最近在做車載HMI設計語言，同樣也運用了網格，那麼我會根據整個車載HMI產品複雜程度去搭建，同時也運用了幾種網格配合使用。