懶人目錄

 一.前言

二.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)行頁(yè)面元素分析

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

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

3. 模塊化分割方法

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

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

我們來看下qq音樂會(huì)員中心頁(yè)面的設(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ì)的，在大頁(yè)面中可以是焦點(diǎn)，在小模塊中也可以是焦點(diǎn)

6.1 頁(yè)面中焦點(diǎn)

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

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

我們可以看到在優(yōu)酷的“我的”頁(yè)面信息以卡片的形式呈現(xiàn)，而會(huì)員購(gòu)買入口則以一種帶有色彩傾向性的顏色設(shè)計(jì)，表達(dá)了其的重要性；還有優(yōu)酷的首頁(yè)精選的卡片中“全網(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)，所以我們需要去取舍！很多國(guó)產(chǎn)安卓手機(jī)都有自己的系統(tǒng)字體，要實(shí)際調(diào)研真機(jī)效果（如差異不大非必須嵌入字體）蘋果和安卓常用字體如下

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

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

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

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

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

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

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

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

12. 色彩在版式中的對(duì)比運(yùn)用

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

12.1 純度對(duì)比

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

12.2 明暗對(duì)比

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

12.3色相對(duì)比

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

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

我們?cè)诰W(wǎng)上購(gòu)物時(shí)，更多的是通過圖片的第一印象來獲取產(chǎn)品，所以圖片在購(gòu)物網(wǎng)站的比例都做到盡可能的適合自己的產(chǎn)品特點(diǎn)才能讓版式設(shè)計(jì)更優(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è)計(jì)的軟硬關(guān)系

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

14.1 曲線與圓角

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

14.2 漸變與過渡蒙層

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

14.3 直線加浮層

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

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

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

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

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

三. 總結(jié)思考

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

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

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

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

原文地址：站酷

作者：Zeal莊治柱

• 插畫形式
• 生活場(chǎng)景
• 文字圖形化
• 視覺置換法
• 比例夸張法
• 直接代入法

01 插畫形式

現(xiàn)在的海報(bào)設(shè)計(jì)大部分喜歡使用插畫形式去表達(dá)，好處在于它具有豐富的想象力和自由創(chuàng)造性。例如代入品牌產(chǎn)品或吉祥物作為插畫元素。

02 生活場(chǎng)景

很多互聯(lián)網(wǎng)品牌早已將生活場(chǎng)景作為傳播的“常規(guī)操作”。借助互聯(lián)網(wǎng)大數(shù)據(jù)，穩(wěn)抓用戶生活軌跡，透過鏡頭精準(zhǔn)切割出用戶生活場(chǎng)景。作品多數(shù)采用溫馨場(chǎng)景的形式展開創(chuàng)作，將生活的一些情節(jié)定格在插畫中。以場(chǎng)景觸發(fā)用戶情感，最終引發(fā)用戶共鳴。

03 文字圖形化

文字的圖形化編排是將文字編排成一條線、一個(gè)面或一個(gè)圖形，例如將文字圍繞圣誕樹圖形編排。

04 視覺置換法

將產(chǎn)品轉(zhuǎn)換成圣誕元素，借助色彩、形狀、線條、質(zhì)感、空間等視覺元素，來表達(dá)兩種視覺形象的相似性。正是通過這種視覺形象的相似，來刺激受眾的聯(lián)想和想象。這樣的設(shè)計(jì)富有趣味性，與品牌產(chǎn)生很強(qiáng)的關(guān)聯(lián)性。

05 比例夸張法

這一創(chuàng)意手法是屢試不爽的絕招，可以運(yùn)用在許許多多的廣告中。將某些物件進(jìn)行視覺上大小比例的夸大，加大整體的視覺沖擊力。

06 直接代入法

這是很直接的一種廣告設(shè)計(jì)形式，將代表性的產(chǎn)品與圣誕主題結(jié)合，或者單獨(dú)展示圣誕元素，再進(jìn)行常規(guī)的圖文編排，直接達(dá)到宣傳效果。

作者： 周妙妍  來源：版式設(shè)計(jì)很簡(jiǎn)單(公眾號(hào))

我們?cè)谥谱骶W(wǎng)站的時(shí)候如何把做好的效果圖轉(zhuǎn)成網(wǎng)頁(yè)格式呢？這里就有很多方法，如果是比較復(fù)雜的網(wǎng)頁(yè)就需要用手動(dòng)來切圖。如果不是很復(fù)雜的可以直接用PS自帶的切片工具來切割。教程中介紹的是規(guī)則切圖，實(shí)際應(yīng)用中需要用手動(dòng)來劃分區(qū)塊的大小。

最終效果
1、打開要分割的圖片，點(diǎn)工具欄的切片工具。

2、將劃分切片的水平劃分為4，垂直劃分為3，點(diǎn)好后出現(xiàn)12個(gè)等分的圖片。

3、將圖片劃分好后，我們點(diǎn)工具欄最下面的鍵計(jì)入IR狀態(tài)下編輯圖片。

有了路徑工具以后，文字排版就顯得更加靈活。我們可以把文字做成任何想要的圖案。如教程中的，我們可以把文字放入閉合的路徑里面做成實(shí)體圖形，也可以按照一條條曲線路徑排版做成可愛的文字曲線。難度較大一點(diǎn)的就是通過路徑組合做成創(chuàng)意的文字圖案。相信學(xué)習(xí)了本教程以后，你就可以發(fā)揮創(chuàng)意做成更多創(chuàng)意圖形。

最終效果

1、新建一個(gè)400×300的圖像(可自設(shè)尺寸)，然后選擇自定形狀工具。

注意繪圖方式應(yīng)為第一種(形狀圖層)，如下圖紅色箭頭處。然后在形狀列表中選擇一個(gè)心形(如不在列表中，可恢復(fù)默認(rèn)形狀)，如下圖綠色箭頭處。樣式選擇為無樣式。另外可以選取一個(gè)的顏色。

2、然后在圖像中畫出一個(gè)心形(繪制過程中可以按住SHIFT鍵保持長(zhǎng)寬比)，這樣其實(shí)就是建立了一個(gè)帶矢量蒙版的色彩填充層。如下左圖，圖層調(diào)板中顯示的正是一個(gè)色彩填充層。雙擊縮略圖可以更改填充的顏色，而圖層縮略圖右方有一個(gè)蒙版縮略圖(下左圖藍(lán)色箭頭處)，這就是矢量蒙版縮略圖，特點(diǎn)是以灰色來表示被隱藏的區(qū)域。有關(guān)矢量蒙版的知識(shí)我們將在以后學(xué)習(xí)。

在進(jìn)行下一步之前，要保證路徑蒙版中的路徑處于顯示狀態(tài)，方法是點(diǎn)擊路徑蒙版縮略圖。會(huì)看到圖像中的心形出現(xiàn)了一個(gè)外框，而圖層調(diào)板中路徑蒙版縮略圖周圍出現(xiàn)了一個(gè)細(xì)線框，如下右圖。

3、現(xiàn)在選擇文本文字工具，并使其停留在這個(gè)心形路徑之上，依據(jù)停留位置的不同，鼠標(biāo)的光標(biāo)會(huì)有不同的變化。當(dāng)停留在路徑線條之上時(shí)顯示為，當(dāng)停留在圖形之內(nèi)將顯示為。請(qǐng)注意這兩者的區(qū)別，前者表示沿著路徑走向排列文字，后者則表示在封閉區(qū)域內(nèi)排版文字，作用是完全不同的。

4、現(xiàn)在我們先將文字工具停留在心形之內(nèi)(光標(biāo)為)，然后單擊，出現(xiàn)文字輸入光標(biāo)，輸入一些文字。如“LOVE”(注意每個(gè)字母之后都有一個(gè)空格，原因稍后再述)。選擇一個(gè)英文字體(如Tohoma)，選擇小一些的字號(hào)(如6px)，并復(fù)制粘貼幾次，使其充滿整個(gè)圖形(超出也沒有關(guān)系)，效果如下左圖。此時(shí)看到文字在圖形內(nèi)的排列并不對(duì)稱，接下來在段落調(diào)板中設(shè)置居中，并適當(dāng)設(shè)置左縮進(jìn)和右縮進(jìn)的數(shù)值(如5px)，這樣看上去就較為舒適了。一般來說在封閉圖形內(nèi)排版文字，都要進(jìn)行這些設(shè)定以達(dá)到較好的視覺效果。如下右圖。

5、現(xiàn)在隱藏(甚至可以刪除)心形色彩填充層，我們看到在文字外圍仍然保留有一條封閉路徑，與原先心形路徑相同。如下左圖。由此可以明白，雖然這個(gè)文字層的排版路徑是籍由另外一個(gè)圖層中的矢量路徑而來，但在完成后，其也“克隆”了一條相同的路徑并“留用”。

我們可以對(duì)這條“克隆并留用”的路徑進(jìn)行修改，從而改變文字的排版布局。方法是使用直接選擇工具〖A/SHIFT_A〗，在文字層(不是早先的填充層，此時(shí)應(yīng)隱藏填充層)的路徑上點(diǎn)擊一下，就會(huì)看到路徑上顯示出許多小方塊。如下中圖。用直接選擇工具往左上方略為移動(dòng)藍(lán)色箭頭處的方塊，就可以看到效果。有關(guān)路徑的知識(shí)我們將在以后學(xué)習(xí)，到時(shí)候我們可以進(jìn)行更多更復(fù)雜的修改，現(xiàn)在大家先記住路徑是可以修改的就可以了。

前面我們提到過要在每個(gè)英文字母后面加上空格，是為了在行末換行時(shí)可以讓單個(gè)字母移到下一行，而如果使用一整個(gè)英文單詞LOVE，則在行末換行時(shí)，因?yàn)橐３滞暾?，整個(gè)單詞將被移到下一行，這樣的效果看上去就比較生硬(也有人會(huì)喜歡這種效果)，如下右圖。大家以后在實(shí)際應(yīng)用中可以參考這種加空格的方法，如果覺得空格拉大了字母間距，可以通過在字符調(diào)板中設(shè)置間距為負(fù)值來彌補(bǔ)。