創(chuàng)建美觀、可用和高效的UI界面需要花費時間進(jìn)行設(shè)計細(xì)節(jié)的打磨，本文從視覺和情感化設(shè)計兩個方面來說說如何提升UI設(shè)計的高級感。 

 

1、視覺元素

在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天，你會發(fā)現(xiàn)所有的App越來越像，似乎是同一套模版設(shè)計出來的產(chǎn)品。而這種普適化的設(shè)計會導(dǎo)致同質(zhì)化嚴(yán)重，使得設(shè)計不精致，產(chǎn)品沒有氣質(zhì)和品牌感。一個App設(shè)計是否精致，是否富有設(shè)計感，在于它的細(xì)節(jié)，這就意味著我們在進(jìn)行設(shè)計的時候，要從細(xì)微之處著手，從多方面去鉆研如何創(chuàng)造出打動人心的UI設(shè)計。本節(jié)總結(jié)了12個簡單直觀的提升設(shè)計感的小細(xì)節(jié)，一起來學(xué)習(xí)。

 

1.1 使用顏色深淺構(gòu)建層次結(jié)構(gòu)

在對UI 文本進(jìn)行樣式控制的時候，最常見的錯誤莫過于過度依賴字體大小差異來營造對比。單純使用字體大小對比，所營造的對比并不夠，嘗試結(jié)合色彩和字重來營造更好的對比效果。

 

 

每種顏色都有一個視覺權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)。通過使用顏色的深淺，為元素賦予不同的重要性。如果可以的話，你甚至可以采用兩到三種顏色：

• 主要內(nèi)容使用深灰色（諸如標(biāo)題，但是不要用純黑）

• 次要內(nèi)容使用灰色（比如商品介紹）

• 輔助性內(nèi)容采用淺灰色（比如發(fā)布日期）

 

類似的，在UI設(shè)計的時候，通常兩種不同的字重足以營造出優(yōu)秀的層次感：

• 大多數(shù)的文本采用正常的字重（400到500，具體取決于字體）

• 對于需要強(qiáng)調(diào)的文字采用較重的字重（600到700，具體取決于字體）

 

▲主標(biāo)題字重為600，其他標(biāo)綠點的文字字重都為400

 

 

應(yīng)當(dāng)盡量不要讓正文部分字重低于400，因為這一部分字體本身尺寸已經(jīng)較小，低于400會使得可讀性不佳。如果你依然需要降低字重，那么不妨讓字體色彩更淺一點，或者替換成其他識別度較強(qiáng)、字重相對較小的字體。

 

灰色文字在無彩/彩色背景下要分開處理

 

不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯的淡化其視覺效果的做法。

 

但是在彩色背景下，想要降低和背景色之間的對比，通常有兩種方法：

一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。

 

▲左圖設(shè)計師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色

 

 

其次當(dāng)涉及長篇內(nèi)容時，大面積的深色粗體字會給人一種沉重感，而且很跳躍。通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個問題，使文字更容易被識別。

 

 

1.2 統(tǒng)一色調(diào)

選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來增加均衡。設(shè)計時避免用過多的顏色。如果項目允許，只需使用固定的色板，通過調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡單的方式為設(shè)計增加一致性。

 

 

1.3 干凈的陰影

陰影是UI設(shè)計中最常見的視覺表現(xiàn)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時也能增強(qiáng)畫面的視覺層次感。相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。

 

 

這種輕柔的陰影呈現(xiàn)出的干凈，增加了畫面的精致。如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會讓畫面更加扁平，讓視覺變得厚重，呈現(xiàn)出不精致的畫面感。

 

陰影不一定是黑色的，還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調(diào)一致，因此呈現(xiàn)出十分融洽的畫面感。在UI設(shè)計中，這種手法不宜過多使用，否則呈現(xiàn)出的各種色彩搭配會讓人眼花繚亂。

 

1.4 個性的圖標(biāo)設(shè)計

合格的設(shè)計師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo)，而優(yōu)秀的設(shè)計師能夠創(chuàng)造風(fēng)格獨特的圖標(biāo)。我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時，為它的視覺表現(xiàn)力加入更多的創(chuàng)意呢？例如下面這組圖標(biāo)設(shè)計，無論是在圖形上的創(chuàng)新，還是顏色搭配上都呈現(xiàn)出無與倫比的創(chuàng)意。

 

 

標(biāo)簽欄作為一個App的全局導(dǎo)航起著至關(guān)重要的作用，它的設(shè)計影響著整個產(chǎn)品的視覺風(fēng)格。通常，大多數(shù)App都是使用iOS規(guī)范的設(shè)計樣式（默認(rèn)灰色，選中填充品牌色），這樣的設(shè)計太普通，太常見了。要想讓標(biāo)簽欄圖標(biāo)設(shè)計精致和富有個性，可以豐富每一個選中態(tài)圖標(biāo)的視覺表現(xiàn)，例如給圖標(biāo)加上背景和表情，即顯得生動有趣，又增加了用戶的好感，給人留下深刻的印象。

 

3D立體圖標(biāo)設(shè)計是近幾年來的流行趨勢，看上去十分精致、華麗，但是看久了會讓人產(chǎn)生輕微的視覺疲勞，同時因其復(fù)雜的結(jié)構(gòu)會增加用戶的認(rèn)知成本。一般在外賣美食類應(yīng)用中比較常見。

 

 

1.5 Tab的設(shè)計感

Tab是App設(shè)計中最常見的控件之一，它源自Material Design的設(shè)計規(guī)范。現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開始使用這種導(dǎo)航欄樣式來進(jìn)行設(shè)計，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見了。

在視覺表現(xiàn)形式上，Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài)，它的設(shè)計較為簡單，通常是使用一組文字標(biāo)簽，通過顏色或在標(biāo)簽下加上小長條來區(qū)分兩者的狀態(tài)。因為它簡單，卻越難設(shè)計出彩，要發(fā)揮極大的設(shè)計想象力，跳脫出設(shè)計規(guī)范的限制，才能找到完美的方案。例如蝦米音樂的Tab選中態(tài)是一段音頻波線，再配合文字的大小對比，一個富有設(shè)計感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來了。

 

 

我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個絕佳的來源。從品牌形象中提取具有獨特氣質(zhì)的視覺富豪作為Tab選中態(tài)的小長條，這樣就建立起視覺上的聯(lián)系，讓用戶產(chǎn)生由內(nèi)而外的一致感受。例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計上，既讓界面視覺獨一無二，又進(jìn)一步強(qiáng)化了用戶對品牌形象的認(rèn)知。

 

1.6 無框設(shè)計 去繁從簡

在UI設(shè)計中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個元素的好辦法，但是它不是唯一的方法，使用過多會讓整個布局的設(shè)計感降低，或多或少都會干擾用戶瀏覽的視線，讓信息內(nèi)容失去注意力，因此可以減少不必要的裝飾元素。我們可以通過以下幾個方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：

 

使用陰影

陰影同樣可以營造出邊界感，而且相比邊框分割線更加微妙，并不會顯得突兀，不會分散用戶的注意力，讓內(nèi)容更聚焦。

 

 

使用不同的背景色來區(qū)分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進(jìn)行區(qū)分。所以，你所需要做的就是在不同的區(qū)塊采用不同的背景色，并且嘗試刪除分割線，因為你根本不需要它。

 

 

增加額外的留白

創(chuàng)建元素之間的分離效果，并不一定要通過線框來表現(xiàn)，只要增加留白，讓它們分隔開就行了。通過留白和間距來實現(xiàn)元素分組是UI設(shè)計中的常用手法。

 

 

1.7 統(tǒng)一設(shè)計元素

在App中的每一個界面都有許多元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計樣式。通常個人中心的標(biāo)簽欄圖標(biāo)是一個人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。如果圖形擁有獨特的外觀，如橢圓矩形，也可以作為視覺符號的一種，延續(xù)到其他界面中，成為圖形或按鈕的外觀。這樣，整個界面就被統(tǒng)一的設(shè)計元素聯(lián)系起來了，給用戶始終如一的一致感。

 

 

1.8 符合產(chǎn)品氣質(zhì)的字體

選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶正確的情感意識。雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計需求。但會出現(xiàn)一個問題就是，系統(tǒng)字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微。例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發(fā)力、速度的感覺，換成系統(tǒng)字體后，整體感覺在氣勢上就變?nèi)趿撕芏唷?/p>

 

 

1.9 第三方圖標(biāo)風(fēng)格統(tǒng)一

大多數(shù)App都支持三方登陸，他可以減輕用戶注冊的時間成本。通常是在注冊登陸頁的底部展示第三方圖標(biāo)入口，這也是設(shè)計師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒有針對它們再設(shè)計。一個設(shè)計精致的App不應(yīng)漏過任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計。

 

 

1.10 圖片中尋找色彩

App中優(yōu)美的圖文設(shè)計，能帶給用戶如沐春風(fēng)的視覺享受，它非常重要。我們經(jīng)?？吹轿淖织B加在圖片背景上的設(shè)計樣式，為了減少復(fù)雜圖片背景對文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優(yōu)的辦法。我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級和富有設(shè)計感。

 

 

1.11 提高圖片質(zhì)量

圖片的質(zhì)量影響著整個App的格調(diào)和用戶的情緒，高品質(zhì)的圖片給人愉悅的視覺享受，產(chǎn)生美好的聯(lián)想。而低品質(zhì)的圖片會瞬間拉低App的質(zhì)感。在App設(shè)計中，一張漂亮的圖片從收集到上線，需要經(jīng)過裁剪，調(diào)色等過程才能被使用。即使是普通的商品圖片，我們將它摳圖后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會變得美觀、整潔。

 

 

1.12 卡片式設(shè)計

現(xiàn)在的UI界面設(shè)計中，卡片式設(shè)計已經(jīng)是一種非常常見的設(shè)計形式，它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實現(xiàn)復(fù)雜內(nèi)容的簡化處理，提高空間利用率。同時卡片式設(shè)計通常很依賴視覺元素，很強(qiáng)的視覺元素正是卡片式設(shè)計的一種優(yōu)勢，也是提升設(shè)計品質(zhì)感的良方。

 

 

2、情感化設(shè)計

心理學(xué)認(rèn)為，情感是人對客觀事物是否滿足自己的需求而產(chǎn)生的態(tài)度體驗。只有當(dāng)產(chǎn)品觸及到用戶的內(nèi)心時，使他產(chǎn)生情感的變化，那么產(chǎn)品便不再冷冰冰，他透過眼前的東西，看到的是設(shè)計師為了他的使用體驗，對每一個魔鬼細(xì)節(jié)的用心琢磨，人們會產(chǎn)生愉快、喜愛和幸福的情感。情感化設(shè)計并不是轟轟烈烈，有時候僅僅一句文案、一幅插圖、一個動畫就能打動人心，使用戶獲得愉悅的使用體驗。讓設(shè)計變得高級不僅僅是視覺層面，這些簡單而美好的設(shè)計細(xì)節(jié)充滿了積極情緒，它是滿足產(chǎn)品的功能性和易用性之后，追求更高層次的目標(biāo)。

 

2.1 提示性文字

語言是情感化設(shè)計最直接的利器，擬人化的對白相比冰冷的話語更能獲得用戶的好感，賦予產(chǎn)品的新的生命力。例如App那些push推送通知，因為用戶每天收到的PUSH實在是太多了，早已心如止水！這個時候，你就需要一條成本低、效率高的PUSH文案，去撩動用戶主子們的心。將原本對用戶的打擾變成一種逗趣，讓人看到會心一笑。

 

 

2.2 下拉刷新

下拉刷新是用戶在App使用中經(jīng)常進(jìn)行的操作，常見的下拉刷新設(shè)計是圖標(biāo)加文字的形式，這種設(shè)計簡單、直觀，但毫無設(shè)計感，不能引發(fā)用戶任何的情緒。

 

 

下拉刷新是一種臨時狀態(tài)，豐富它的設(shè)計細(xì)節(jié)不會造成與產(chǎn)品界面的格格不入，相反，一個富有設(shè)計感的下拉刷新設(shè)計能讓產(chǎn)品獲得用戶的好感。例如uc頭條在下拉刷新時會蹦出一只奔跑的小鹿，暗示正在快馬加鞭的加載新內(nèi)容，小鹿形象延續(xù)了品牌logo。作為資訊類產(chǎn)品，內(nèi)容更新速度至關(guān)重要，奔跑的小鹿正好隱喻了這一點。用戶也在這種快樂的情緒中對產(chǎn)品產(chǎn)生好感，瞬間就讓下拉刷新變得生動有趣。

 

 

2.3 頭像設(shè)計

個人中心頁與用戶信息密切相關(guān)，用戶的虛擬形象在這里得以展現(xiàn)，常見的設(shè)計是一個用戶頭像加登陸文字的形式，這種默認(rèn)的頭像設(shè)計無法得到用戶的認(rèn)同感。

 

現(xiàn)在很多的產(chǎn)品已經(jīng)放棄了死板的默認(rèn)頭像，給用戶更多的選擇。賦予產(chǎn)品一些人格魅力，可以讓產(chǎn)品富有生命力，消除人機(jī)界面的冰冷交互，幫助用戶和產(chǎn)品建立友好的聯(lián)系。例如美團(tuán)外賣和躺平，它們各自的身份都代表了產(chǎn)品的氣質(zhì)和用戶的屬性，讓用戶產(chǎn)生一種身份的認(rèn)同感。

 

 

2.4 缺省頁化解負(fù)面情緒

通常狀態(tài)是，當(dāng)前頁面沒有內(nèi)容或無網(wǎng)絡(luò)狀態(tài)下出現(xiàn)的頁面。常見的設(shè)計是圖標(biāo)加提示文字的形式，這種簡陋的設(shè)計會給用戶心理造成很大的落差，陷入負(fù)面情緒中。情感化設(shè)計在此時就可發(fā)揮巨大的作用，它通過設(shè)計手段來減輕用戶在看到一個毫無內(nèi)容的界面時所產(chǎn)生的挫敗感。 設(shè)計師可發(fā)揮的空間很大，根據(jù)產(chǎn)品屬性和品牌延展圖形，結(jié)合動效或插畫等情感化設(shè)計，可以很好的豐富頁面內(nèi)容。例如躺平的空白頁呈現(xiàn)出一種賤萌的場景，讓用戶會心一笑，使產(chǎn)品充滿了趣味性。

 

 

2.5 標(biāo)簽欄微動效

情感化設(shè)計變得越來越豐富，圖標(biāo)設(shè)計上升至可以展示動畫效果。通過動效的使用，標(biāo)簽欄切換變得不再死板。用戶在頻繁切換頁面時，不再覺得單調(diào)。精心設(shè)計的動態(tài)效果，能夠緩解用戶等待時焦躁的心情，從心理上縮短用戶等待時長，讓品牌更加深入人心。

 

 

2.6 模擬用戶行為

如果一個產(chǎn)品可以模擬用戶的行為，將用戶代入真實的情境中，用戶就會對產(chǎn)品產(chǎn)生深刻的認(rèn)同感。例如「潮汐」會根據(jù)時間場景和季節(jié)變化，播放不同的背景音樂來營造氛圍。雨聲、雷聲、風(fēng)聲、潮水聲等讓人時刻感受到身臨其境的情境。

 

 

情感化設(shè)計可以拉近用戶與產(chǎn)品之間的距離，在更深的層面體現(xiàn)出對人性的關(guān)懷，為人們帶去情感上的愉悅和感動。洞悉用戶的行為，換位思考去滿足用戶的需求，情感交流就產(chǎn)生了。例如當(dāng)你截屏了一張圖片，打開微信對話框時就會自動顯示這張圖片，提前預(yù)知了你發(fā)截圖的需求。

 

再例如很多觀眾都習(xí)慣了在電影結(jié)尾等彩蛋的習(xí)慣，因為很多時候坐在影院等彩蛋卻等來沒有彩蛋的結(jié)果只能白白浪費了時間。在「淘票票」上購買電影票時，你會發(fā)現(xiàn)影片詳情頁會有彩蛋提醒，告知你電影是否有彩蛋且彩蛋會出現(xiàn)在影片的什么位置。有了這個提示信息，就不必再為了不確定的彩蛋期待浪費時間啦。

 

2.7 有趣的細(xì)節(jié)設(shè)計

俗話說：有趣的靈魂萬里挑一，可見有趣是可以引發(fā)交流進(jìn)而讓人們產(chǎn)生積極的情緒。 在UI設(shè)計中，有些有趣的設(shè)計是隱形的，需要用戶自己去發(fā)現(xiàn)，當(dāng)用戶找到這顆彩蛋時，就會獲得一份喜悅和樂趣，增強(qiáng)用戶對產(chǎn)品的探知欲。例如在電腦端打開B站的鬼畜區(qū)長按這個返回圖標(biāo)10秒左右，你會打開鬼畜區(qū)的新世界(⊙o⊙)（友情提示：記得戴上耳機(jī)或調(diào)小音量）其實長按「返回」10秒后網(wǎng)頁下方會出現(xiàn)一條黑框提示「嘗試輸入字母，發(fā)現(xiàn)鬼畜秘密」。按照提示乖乖輸入字母就會出現(xiàn)鬼畜明星劃過你的屏幕！

 

 

有些有趣的設(shè)計又是顯性的，目的是讓用戶與產(chǎn)品引發(fā)交流從而產(chǎn)生積極的情緒。例如成為優(yōu)酷視頻會員，不僅可以尊享豐富的影視資源，還能讓自己的ID在發(fā)彈幕時使用劇集相關(guān)角色的頭像。帶角色扮演頭像的彈幕，讓發(fā)言更有劇集代入感。這個彩蛋的設(shè)置一方面強(qiáng)化了會員身份的尊貴感與特權(quán)性，一方面也豐富了彈幕區(qū)的多樣化，可謂一舉兩得了。

 

總的來說：UI設(shè)計的“高級感”意味著在視覺層面要從細(xì)微之處著手，創(chuàng)造出精致富有設(shè)計感的畫面；另一方面要從情感化設(shè)計出發(fā)，使用戶與產(chǎn)品產(chǎn)生情感上的共鳴，獲得更高層次的使用體驗。