16個保姆級UI界面版式設計實用小技巧

2022-02-18 點擊量：

我為大家整理了非常實用的，實際工作中學來即用的版式設計小技巧，希望你都能讀懂、吸收、運用~提升自己的設計能力和水平；

懶人目錄

一.前言

二.UI界面中實戰版式技巧分析

三.總結思考

一. 前言

在做UI界面的時候，很多時候我們需要去看很多的產品進行競品分析、市場調研，不論是交互邏輯還是設計細節，非常占用設計師的時間成本，在這里我為大家分析和整理了常用的一些實戰設計小技巧，幫助大家節省一些搜集資料的時間，希望幫助設計師們提高設計品質和效率！

二. UI界面中實戰版式技巧分析

1. 版面中的空間關系元素

在界面版式設計中，可以運用平面設計中的結構思考方法去理解UI界面中的空間元素結構的分布對應，下面以新聞類客戶端為例進行頁面元素分析

2. 內容過多處理方法

為了讓閱讀更有效，可以采用不同標題規格、不同編排比例或不同色底進行層次上的劃分

3. 模塊化分割方法

線條分割和空間分割的區別，分割線給人一種壓迫感，而空間的分割給人更加輕松的閱讀感受

4. 如何改變版面圖版率與視覺空間比重

我們來看下qq音樂會員中心頁面的設計，不同的等級對應不同的顏色card，運用顏色填充背景吸引用戶增加界面專屬比重，起到賬戶切換視覺的引導作用，嘉瑞廣告，是一個很好的設計思路

5. 根據主題選擇配圖及配色方案

我們在做設計時很多時候會去追求“高級灰”、“高逼格”亦或者是“獨特性”，其實更重要的是要符合產品的調性和產品對象人群，不能一味的去追求自我的“設計追求”，比如下面的2個案例就很好的表達出了產品的調性，明確的告訴用戶我是做什么產品的，為什么樣的人群去服務的

6. 畫面焦點

表示在畫面中相對更加突出的內容，讓用戶在瀏覽產品時能夠第一視覺捕捉用戶的眼球；焦點是相對的，在大頁面中可以是焦點，在小模塊中也可以是焦點

6.1 頁面中焦點

采用模態效果的彈窗給人以不可忽視的方式出現

6.2 模塊中的焦點

我們可以看到在優酷的“我的”頁面信息以卡片的形式呈現，而會員購買入口則以一種帶有色彩傾向性的顏色設計，表達了其的重要性；還有優酷的首頁精選的卡片中“全網獨播”等角標的設計在每一個模塊中都很搶眼，很容易就能夠捕捉到用戶的視覺重心；蘋果手機自帶日歷中當前日期的紅色選中態以絕對的焦點方式設計呈現給用戶

7. 界面平衡

平衡是版面元素上下左右比例都比較適中，給人一種穩定和平衡的視覺感受。平衡的版式設計可以讓畫面穩定不會產生上下比重失衡的現象，平衡的比例構圖令人愉悅，而不平衡的設計會造成不穩定的分散注意力。視覺平衡是指在設計中的負元素和正元素比例相對合適，設計師的作用就是發揮元素的視覺重量的構圖平衡。

8. 字體的選擇

很多時候有的設計師在做界面時候都希望全端的字體能夠統一，最好的辦法是嵌入文字包，但給代碼包增加了負擔，所以我們需要去取舍！很多國產安卓手機都有自己的系統字體，要實際調研真機效果（如差異不大非必須嵌入字體）蘋果和安卓常用字體如下

 9. 有節奏感的版式設計