16個(gè)保姆級(jí)UI界面設(shè)計(jì)版式設(shè)計(jì)實(shí)用小技巧

2022-02-10 點(diǎn)擊量：

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

懶人目錄

一.前言

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

三.總結(jié)思考

一. 前言

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

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

1. 版面中的空間關(guān)系元素

在界面版式設(shè)計(jì)中，可以運(yùn)用平面設(shè)計(jì)中的結(jié)構(gòu)思考方法去理解UI界面中的空間元素結(jié)構(gòu)的分布對(duì)應(yīng)，下面以新聞?lì)惪蛻舳藶槔M(jìn)行頁面元素分析

2. 內(nèi)容過多處理方法

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

3. 模塊化分割方法

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

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

我們來看下qq音樂會(huì)員中心頁面的設(shè)計(jì)，不同的等級(jí)對(duì)應(yīng)不同的顏色card，運(yùn)用顏色填充背景吸引用戶增加界面專屬比重，起到賬戶切換視覺的引導(dǎo)作用，是一個(gè)很好的設(shè)計(jì)思路

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

我們?cè)谧鲈O(shè)計(jì)時(shí)很多時(shí)候會(huì)去追求“高級(jí)灰”、“高逼格”亦或者是“獨(dú)特性”，其實(shí)更重要的是要符合產(chǎn)品的調(diào)性和產(chǎn)品對(duì)象人群，不能一味的去追求自我的“設(shè)計(jì)追求”，比如下面的2個(gè)案例就很好的表達(dá)出了產(chǎn)品的調(diào)性，明確的告訴用戶我是做什么產(chǎn)品的，為什么樣的人群去服務(wù)的

6. 畫面焦點(diǎn)

表示在畫面中相對(duì)更加突出的內(nèi)容，讓用戶在瀏覽產(chǎn)品時(shí)能夠第一視覺捕捉用戶的眼球；焦點(diǎn)是相對(duì)的，在大頁面中可以是焦點(diǎn)，在小模塊中也可以是焦點(diǎn)

6.1 頁面中焦點(diǎn)

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

6.2 模塊中的焦點(diǎn)

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

7. 界面平衡

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

8. 字體的選擇

很多時(shí)候有的設(shè)計(jì)師在做界面時(shí)候都希望全端的字體能夠統(tǒng)一，最好的辦法是嵌入文字包，但給代碼包增加了負(fù)擔(dān)，淮安專業(yè)廣告公司，所以我們需要去取舍！很多國產(chǎn)安卓手機(jī)都有自己的系統(tǒng)字體，要實(shí)際調(diào)研真機(jī)效果（如差異不大非必須嵌入字體）蘋果和安卓常用字體如下

 9. 有節(jié)奏感的版式設(shè)計(jì)