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

2022-02-18 點擊量：

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

懶人目錄

一.前言

二.UI界面中實戰(zhàn)版式技巧分析

三.總結思考

一. 前言

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

二. UI界面中實戰(zhàn)版式技巧分析

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

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

2. 內容過多處理方法

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

3. 模塊化分割方法

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

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

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

5. 根據(jù)主題選擇配圖及配色方案

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

6. 畫面焦點

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

6.1 頁面中焦點

采用模態(tài)效果的彈窗給人以不可忽視的方式出現(xiàn)

6.2 模塊中的焦點

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

7. 界面平衡

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

8. 字體的選擇

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

 9. 有節(jié)奏感的版式設計