懶人目錄

 一.前言

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

三.總結(jié)思考

 

一.前言

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

 

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

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

在界面版式設(shè)計中，可以運用平面設(shè)計中的結(jié)構(gòu)思考方法去理解UI界面中的空間元素結(jié)構(gòu)的分布對應(yīng)，下面以新聞類客戶端為例進(jìn)行頁面元素分析

 

 

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

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

 

 

3.模塊化分割方法

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

 

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

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

 

 

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

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

 

6.畫面焦點

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

 

6.1頁面中焦點

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

 

 

6.2模塊中的焦點

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

 

 

7.界面平衡

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

 

 

8.字體的選擇

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

 

 

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

節(jié)奏感的設(shè)計表現(xiàn)形式有很多種，比較常用的是在統(tǒng)一的樣式節(jié)奏中穿插不同的模塊來使得頁面的節(jié)奏感更加的跳躍和靈活，比如Medium、網(wǎng)易云音樂的版式設(shè)計中都運用了節(jié)奏感的設(shè)計方法

 

跳躍的節(jié)奏感給人以活潑和時尚現(xiàn)代的感受，不會讓畫面通盤單一且枯燥的呈現(xiàn)給用戶；靈活的節(jié)奏感也為很多付費內(nèi)容提供了很好的呈現(xiàn)方式

 

 

10.常用版心邊距距離整理

不同行業(yè)的邊距大小不同，內(nèi)容信息較多的文字類和購物類產(chǎn)品的邊距相對較小，而很多以圖片、視頻和音樂為主的產(chǎn)品相對較大！我為大家整理了常用參數(shù)，方便設(shè)計師們查看和參考，不必每次都需要測量很多產(chǎn)品

 

11.多端思維版式設(shè)計，符合平臺特性的版式設(shè)計

我們發(fā)現(xiàn)很多產(chǎn)品移動端的版式設(shè)計與Web端網(wǎng)頁的Feed流版式設(shè)計結(jié)構(gòu)會有不同，如果是你你會這么排版嗎？

 

其實這樣的版式設(shè)計師有原因的，第一是移動端更多時候以文字標(biāo)題作為吸引人的視線，而圖片在手機(jī)端顯示較小，所以很多圖片的清晰度和內(nèi)容呈現(xiàn)都不夠清晰，第二和手機(jī)端不同，網(wǎng)頁端圖片較大，可以很好的起到其本身的作用，也正因為網(wǎng)頁端的呈現(xiàn)空間較大，所以當(dāng)標(biāo)題比較短的時候，如果還按照移動端的結(jié)構(gòu)，那么標(biāo)題和圖片的中間會產(chǎn)生空白，造成視覺的瀏覽的不連貫，這就是為什么不同平臺版式差異化的原因。

 

 

 

12.色彩在版式中的對比運用

其中主要包含經(jīng)典的3種-純度對比、色相對比、明暗對比，界面設(shè)計師如果掌握了這3種常用對比手法，可以在界面設(shè)計中靈活自如的制造出不錯的色彩對比

 

12.1純度對比

我們可以看到此案例中進(jìn)度條部分，采用了低純度的藍(lán)色和高純度的藍(lán)色和綠色制造色彩對比形成層次反差，讓畫面非常的有活力

 

12.2明暗對比

這張圖片中的主背景顏色左側(cè)為白色，右側(cè)則調(diào)整成了黑色，通過色彩明度的對比可以表現(xiàn)出整個界面的層次感，使得整體的感受呈現(xiàn)出簡約和高品質(zhì)的風(fēng)格（現(xiàn)在很多產(chǎn)品都已經(jīng)適配了深色模式，可以為用戶呈現(xiàn)出Light和Darkmode兩種用戶體驗）

 

12.3色相對比

整體界面的主色調(diào)不難看出，是以綠色為基本色進(jìn)行大面積運用，橙色在綠色中的運用非常鮮明，形成強(qiáng)烈對比，讓用戶非常清晰的知道此為強(qiáng)引導(dǎo)入口

 

  

13.圖片版面率的有效利用

我們在網(wǎng)上購物時，更多的是通過圖片的第一印象來獲取產(chǎn)品，所以圖片在購物網(wǎng)站的比例都做到盡可能的適合自己的產(chǎn)品特點才能讓版式設(shè)計更優(yōu)；常見的圖片尺寸有16:9、4:3、3:2、1:1、2:1、1:0.618（黃金比例），

比如淘寶、京東的產(chǎn)品圖片，在有限的空間內(nèi)，正方形比例的呈現(xiàn)則是最大的空間展示；優(yōu)酷采用16：9的比例更加符合人眼瀏覽視頻的習(xí)慣等

 

 

 

 

14.版式設(shè)計的軟硬關(guān)系

在界面設(shè)計中，為了功能的突出或者版式的“活躍性”等需要，必須增加一些元素來烘托，此時不妨試試看如下幾種軟硬搭配的方法，能夠起到不錯的效果

 

14.1曲線與圓角

通過曲線與圓角的方式讓界面變得更加“柔和”，比如以下產(chǎn)品的頂部位置的背景層的處理上，通過運用柔和的具有弧度的線條，讓整個畫面都不那么生硬了

 

 

14.2漸變與過渡蒙層

在界面設(shè)計中我們常常因為為了保證界面元素存在而又不失品質(zhì)在圖片上增加icon的方式，此時可以通過增加過渡蒙層的效果上增加icon既能夠保證功能性又能夠保證美觀度

 

 

14.3直線加浮層

通過直線設(shè)計手法把圖片和功能入口進(jìn)行風(fēng)格，是一種界線清晰的“生硬”設(shè)計方法，讓界面有一種剛硬、強(qiáng)勁的感受

 

 

15.「高級感」的版式設(shè)計

有一種高級感版式設(shè)計是利用大留白與大卡片的版式設(shè)計的方式，讓整個產(chǎn)品的氣質(zhì)凸顯了出來，使得產(chǎn)品別具一格，比如下面3個產(chǎn)品，利用卡片進(jìn)行模塊化設(shè)計，內(nèi)容里凸顯少量文字運用色彩重量對比和修飾性的語句，再配以高品質(zhì)的圖片，使得整個界面非常的具有高級感

 

 

16.差異化版式設(shè)計方法

設(shè)計工作中，經(jīng)常會用到的方法，主要目的是能夠達(dá)到在同類型功能入口中，起到脫穎而出的效果，比較具有典型代表的是增加動畫效果或者增加角標(biāo)等修飾性的設(shè)計，如拼多多的入口里增加了icon的動效和角標(biāo)的動效設(shè)計在新人專享處特別運用紅包的表現(xiàn)手法讓元素都動了起來；在蘑菇街的入口位置對直播入口的頭像進(jìn)行了動效設(shè)計，增加視覺引導(dǎo)性

 

 

三.總結(jié)思考

以上就是我為大家整理的實戰(zhàn)中常用的版式設(shè)計的小技巧，希望能夠幫助到大家，提升自己的設(shè)計能力和水平；

其實還有更多好的實際工作中的知識點和防踩坑技巧可以分享給大家，期待未來能夠繼續(xù)幫助大家進(jìn)行梳理。

 

在此還是希望同學(xué)們給文章進(jìn)行點贊加關(guān)注，留言區(qū)評論。讓文章里的知識點能夠有更多的角度融入到實際工作中

讓我們一起努力，每天進(jìn)步一點點，成為更好的自己。