在產(chǎn)品設(shè)計(jì)中，有質(zhì)感的界面呈現(xiàn)一方面可以讓用戶更愿意“留下”，另一方面也可以幫助提升企業(yè)的形象。那么作為設(shè)計(jì)人員，你知道如何有效優(yōu)化UI界面，以提升設(shè)計(jì)質(zhì)感嗎？在本篇文章里，作者便總結(jié)了提升設(shè)計(jì)質(zhì)感的小方法，一起來(lái)看一下吧。

前言

作為一名設(shè)計(jì)師，很多時(shí)候在做設(shè)計(jì)時(shí)都會(huì)遇到這個(gè)普遍存在的問(wèn)題：設(shè)計(jì)不夠高級(jí)，沒(méi)有質(zhì)感，細(xì)節(jié)不到位。一個(gè)精致的，細(xì)節(jié)滿滿的設(shè)計(jì)是每個(gè)設(shè)計(jì)師都想做到的，而且富有質(zhì)感的App設(shè)計(jì)，用戶使用起來(lái)也更加愉悅，從而提升產(chǎn)品和企業(yè)的口碑和形象。

界面的質(zhì)感一般表現(xiàn)在設(shè)計(jì)五要素的表現(xiàn)層，設(shè)計(jì)師可以通過(guò)排版、配色、動(dòng)效等設(shè)計(jì)手段將產(chǎn)品呈現(xiàn)出來(lái)， 也是用戶能夠最直接感受到產(chǎn)品本身的一個(gè)層面。

下文中，總結(jié)了一些設(shè)計(jì)方法，可以優(yōu)化UI界面，提升設(shè)計(jì)的質(zhì)感。

一、清晰的結(jié)構(gòu)層次

頁(yè)面的結(jié)構(gòu)就相當(dāng)于人體的骨骼，支撐著整個(gè)頁(yè)面的信息。

1. 可以通過(guò)文字的大小、粗細(xì)、和深淺來(lái)區(qū)分內(nèi)容的主次關(guān)系

上圖兩種卡片的設(shè)計(jì)對(duì)比，左側(cè)經(jīng)紀(jì)人信息卡片只運(yùn)用了字體大小對(duì)比來(lái)排列，而右側(cè)的卡片通過(guò)字體的大小、粗細(xì)和顏色的深淺對(duì)比排列信息，主次分明，用戶閱讀起來(lái)更加聚焦。

2. 用大間距來(lái)區(qū)分每個(gè)模塊

模塊與模塊之前使用相等的大間距來(lái)區(qū)分，會(huì)讓頁(yè)面整體有高級(jí)感，適當(dāng)?shù)牧舭滓矔?huì)讓用戶閱讀起來(lái)更加舒適。

上圖兩個(gè)排列方式的對(duì)比，左邊每個(gè)模塊之前的間距和標(biāo)題內(nèi)容之間的間距一致，頁(yè)面整體看起來(lái)沒(méi)有節(jié)奏，顯得局促，而且模塊之間劃分也不明確；右側(cè)的排列是模塊的間距是標(biāo)題內(nèi)容間距的2倍，這樣的排列讓整個(gè)頁(yè)面更有節(jié)奏。

上圖的FARFETCH APP的首頁(yè)界面幾乎都是用大間距來(lái)區(qū)分模塊，整體頁(yè)面非常有質(zhì)感。

3. 信息對(duì)齊和統(tǒng)一

信息的對(duì)齊可以降低用戶的閱讀門檻，會(huì)使整體頁(yè)面看起來(lái)更加有秩序和邏輯。

信息可以居左對(duì)齊、居中對(duì)齊和居右對(duì)齊三種對(duì)齊法則。

一般純文案的信息內(nèi)容應(yīng)當(dāng)統(tǒng)一居左對(duì)齊，符合用戶的閱讀習(xí)慣，在一些圖像信息的頁(yè)面中，比如缺省頁(yè)面、個(gè)人主頁(yè)等頁(yè)面中，元素居中對(duì)齊可以豐富頁(yè)面空間。

居左對(duì)齊往往運(yùn)用在操作按鈕的排列上，一般用戶在使用手機(jī)時(shí)，習(xí)慣用右手來(lái)操作和點(diǎn)擊，把操作部分居左對(duì)齊也符合用戶的操作習(xí)慣。

在淘寶的界面中，收藏列表的頁(yè)面，文字圖片等閱讀類信息統(tǒng)一都是居左對(duì)齊，“去店鋪”和“找相似”這些操作按鈕統(tǒng)一居右對(duì)齊，用戶在讀完信息之后可以直接操作。

二、合理舒適的圖片比例

在頁(yè)面中會(huì)使用配圖或者插入一些banner，這個(gè)時(shí)候頁(yè)面預(yù)留的圖片的尺寸比例應(yīng)當(dāng)統(tǒng)一而且符合規(guī)范，不能隨意設(shè)定一個(gè)尺寸，在頁(yè)面里，圖片的比例尺寸的細(xì)節(jié)問(wèn)題往往也能體現(xiàn)出頁(yè)面的質(zhì)感。

不論圖片大小如何改變，整體比例保持不變，比較常用的圖片比例一般有4:3、16:9、3:4，使用這個(gè)比例來(lái)制定圖片的大小會(huì)讓整體頁(yè)面富有美感。

三、微質(zhì)感設(shè)計(jì)

微質(zhì)感是介于扁平化設(shè)計(jì)和擬物設(shè)計(jì)之間，在UI細(xì)節(jié)設(shè)計(jì)上，使用一些微質(zhì)感的設(shè)計(jì)，會(huì)讓界面更加出彩。

1. 投影的處理

在卡片投影的處理上，為了使卡片有立體感，可以在周圍加一圈細(xì)描邊，干凈的投影加細(xì)描邊之后，會(huì)讓卡片更加突出。

運(yùn)用投影的灰白變化色調(diào)，把扁平化的圖形變得有立體感。

2. 毛玻璃質(zhì)感

經(jīng)常瀏覽設(shè)計(jì)網(wǎng)站的一定會(huì)發(fā)現(xiàn)很多設(shè)計(jì)師的作品都運(yùn)用了“毛玻璃”的設(shè)計(jì)，這種質(zhì)感具有柔和的光感，視覺(jué)感受愉悅，也會(huì)讓整體界面更加有質(zhì)感。

3. 微質(zhì)感圖標(biāo)設(shè)計(jì)

圖標(biāo)的風(fēng)格在經(jīng)歷了擬物到扁平的轉(zhuǎn)變后，開(kāi)始結(jié)合創(chuàng)意、圖形化、漸變、微光影和投影等，延伸出更加多樣的新風(fēng)格，這種微質(zhì)感的圖標(biāo)能讓人眼前一亮，吸引用戶點(diǎn)擊，更加個(gè)性和創(chuàng)新。

餓了么、美團(tuán)、大眾點(diǎn)評(píng)的首頁(yè)金剛位圖標(biāo)目前都運(yùn)用了微質(zhì)感的設(shè)計(jì)。

四、使用有質(zhì)感的配圖

在界面設(shè)計(jì)中，往往會(huì)要選擇一些配圖，這些配圖的質(zhì)量也會(huì)影響到整體頁(yè)面的質(zhì)感，最好選擇圖片質(zhì)量高，和主題一致的配圖，盡量不要選擇雜亂無(wú)章和界面主題不一致的圖片。

五、把最重要的元素突出

可以通過(guò)顏色，大小和背景色等手法把頁(yè)面中最重要的信息元素突出展示，形成視覺(jué)焦點(diǎn)。

上面列舉了一些例子，在電商的界面里，價(jià)格信息往往會(huì)通過(guò)數(shù)字的標(biāo)紅、放大和加粗來(lái)突出顯示，在一些有按鈕點(diǎn)擊的界面里，往往會(huì)把想讓用戶操作的按鈕通過(guò)顏色區(qū)分顯示出來(lái)。

六、大段文字的處理

如果頁(yè)面中涉及到大段的文字或者是篇幅較長(zhǎng)的文字內(nèi)容時(shí)，如果使用純黑或者是較粗的字體時(shí)，頁(yè)面整體就會(huì)顯得過(guò)于沉重，閱讀起來(lái)不夠舒適。

可以把文字調(diào)整成深灰色，并且選擇不加粗的字體，這樣的頁(yè)面看起來(lái)更加舒適而且有質(zhì)感。

七、一致性原則

連鎖餐飲有統(tǒng)一的中央廚房，統(tǒng)一的店面裝修風(fēng)格，統(tǒng)一的出餐效率，這些標(biāo)準(zhǔn)化的設(shè)定可以使店面在最低成本的控制下開(kāi)連鎖店，而且也會(huì)培養(yǎng)客戶的熟悉度，降低用戶的選擇門檻。

在界面設(shè)計(jì)中的一致性原則可以提升用戶體驗(yàn)的同時(shí)，也可以提升用戶使用產(chǎn)品的效率，減少用戶的使用顧慮，同時(shí)也可以降低開(kāi)發(fā)的研發(fā)成本。

一致性包括：設(shè)計(jì)風(fēng)格一致、色彩（品牌色、主色調(diào)、輔助色）的一致、文本樣式的一致、交互邏輯的一致、控件/按鈕的一致、交互操作的一致等等。

八、打破常規(guī)的設(shè)計(jì)布局

在界面設(shè)計(jì)中，可以運(yùn)用一些新穎的布局，可以吸引用戶點(diǎn)擊，形成視覺(jué)焦點(diǎn)，也能讓界面與眾不同起來(lái)。

上圖的一些App的界面打破了常規(guī)的板式，用了大膽創(chuàng)新的設(shè)計(jì)，讓人眼前一亮，帶給用戶不一樣的體驗(yàn)。

以上就是我總結(jié)出來(lái)的一些關(guān)于設(shè)計(jì)師快速提升界面質(zhì)感的一些方法，希望可以幫助到大家，在平時(shí)的工作中，多實(shí)踐、多積累、多嘗試，才能提升設(shè)計(jì)水平，遇到問(wèn)題的時(shí)候可以想到合理的解決方案和設(shè)計(jì)策略。