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

前言

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

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

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

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

頁面的結(jié)構就相當于人體的骨骼，支撐著整個頁面的信息。

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

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

2. 用大間距來區(qū)分每個模塊

模塊與模塊之前使用相等的大間距來區(qū)分，會讓頁面整體有高級感，適當?shù)牧舭滓矔層脩糸喿x起來更加舒適。

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

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

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

信息的對齊可以降低用戶的閱讀門檻，會使整體頁面看起來更加有秩序和邏輯。

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

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

居左對齊往往運用在操作按鈕的排列上，一般用戶在使用手機時，習慣用右手來操作和點擊，把操作部分居左對齊也符合用戶的操作習慣。

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

二、合理舒適的圖片比例

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

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

三、微質(zhì)感設計

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

1. 投影的處理

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

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

2. 毛玻璃質(zhì)感

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

3. 微質(zhì)感圖標設計

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

餓了么、美團、大眾點評的首頁金剛位圖標目前都運用了微質(zhì)感的設計。

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

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

五、把最重要的元素突出

可以通過顏色，大小和背景色等手法把頁面中最重要的信息元素突出展示，形成視覺焦點。

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

六、大段文字的處理

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

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

七、一致性原則

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

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

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

八、打破常規(guī)的設計布局

在界面設計中，可以運用一些新穎的布局，可以吸引用戶點擊，形成視覺焦點，也能讓界面與眾不同起來。

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

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