編輯導(dǎo)語：對(duì)于設(shè)計(jì)師來說，在工作中經(jīng)常思考的一件事就是：如何才能夠提高設(shè)計(jì)的高級(jí)感呢？本文作者通過為我們分享了他的一些經(jīng)驗(yàn)，看看有哪些可以提升UI界面質(zhì)感的小技巧。

寫在前面：在工作中大家有沒有聽到過這樣的聲音：“你這個(gè)設(shè)計(jì)挺好的，但是不夠高級(jí)……”，是不是當(dāng)場(chǎng)炸裂！仰望天空45度眼淚從臉頰滑過，默默問自己怎么做才能高級(jí)呢？下面我會(huì)分享給大家?guī)讉€(gè)小技巧來提升高級(jí)感~

一、強(qiáng)化結(jié)構(gòu)層次

大家還記不記得那段寫畢業(yè)論文不堪回首的時(shí)光，要給題目、目錄、一級(jí)標(biāo)題、二級(jí)標(biāo)題、正文和注釋不同的字號(hào)，以此使得論文的層級(jí)更加清晰。同理，在設(shè)計(jì)領(lǐng)域，相較于平淡無奇毫無重點(diǎn)的界面設(shè)計(jì)，具有良好視覺層次結(jié)構(gòu)的設(shè)計(jì)更受用戶青睞。

視覺呈現(xiàn)上要突出信息/模塊之間的邏輯關(guān)系，我們所聽到的：”太平了/有點(diǎn)單調(diào)“類似的聲音其實(shí)都是層次弱的體現(xiàn)。對(duì)于設(shè)計(jì)師而言，可以通過技術(shù)手段對(duì)于頁面中的信息/模塊進(jìn)行優(yōu)化調(diào)整，使畫面變得飽滿，分為以下幾個(gè)維度：

1. 文字層級(jí)區(qū)分(大小、字重、顏色)

在一倍圖下大字重標(biāo)題的字號(hào)可以提升至32pt，這種強(qiáng)烈而低頻率的對(duì)比更具有層次感。舉個(gè)例子，蝦米音樂和Appstore的大字重標(biāo)題讓頁面對(duì)比更加強(qiáng)烈，更具有引導(dǎo)性：

如果當(dāng)前頁面的文字層級(jí)過多，通過字號(hào)大小不足以清晰的區(qū)分層級(jí)時(shí)，可以采用顏色深淺或者文本加粗的方法，舉個(gè)?：

2. 圖標(biāo)輕重區(qū)分

如果在次要功能上使用了較為復(fù)雜的圖標(biāo)，而重要業(yè)務(wù)入口反而較為簡(jiǎn)單的話也會(huì)讓頁面的層次感出現(xiàn)問題，圖標(biāo)層級(jí)分為兩種「基于風(fēng)格區(qū)分」、「基于色彩區(qū)分」：

所謂無邊有界說的也就是：通過 間距/背景色 自然形成模塊達(dá)到效果（區(qū)別于傳統(tǒng)分割線）。雖然日常工作中大家可能會(huì)被要求在頁面上盡可能多的塞滿各種元素和模塊，美其名曰可以節(jié)省空間，但是其實(shí)這樣是相對(duì)保守的做法。

太多的元素會(huì)讓用戶get不到重點(diǎn)是什么，同時(shí)信息也未必會(huì)聚焦，有兩種方法可以幫助大家解決這個(gè)問題：

二、無邊有界的視覺美感

1. 用增加間距來區(qū)分模塊

現(xiàn)在的設(shè)計(jì)趨勢(shì)傾向于大的留白讓頁面更有“呼吸感”，一般一級(jí)頁面較為復(fù)雜，信息與模塊比較多，所以留白可以更好的讓用戶獲取到信息（二三級(jí)頁面可以辯證的使用大留白，運(yùn)用過多會(huì)顯得太過于追求形式了）。

2. 用背景色區(qū)分相鄰元素

在實(shí)際設(shè)計(jì)場(chǎng)景中，只要很微妙的差別就可以使用戶明了模塊之間的關(guān)系，分割線的存在其實(shí)有很大程度上會(huì)影響視覺效果，所以我們可以用淺灰色背景進(jìn)行區(qū)分，如下圖：

三、設(shè)牢設(shè)計(jì)原理

每個(gè)品牌都有屬于它的經(jīng)典款，比如converse的Chuck Taylor All Star是它最經(jīng)典款式之一。

相信大家自從接觸產(chǎn)品設(shè)計(jì)以來就被各種原理所洗禮，格式塔原理、奧卡姆剃刀、希克定律等等，就是一個(gè)字：超好用！（市面上有超級(jí)多關(guān)于這些原理的文章，不知道的同靴可以自己去找資料學(xué)習(xí)~）

所以我把它們看作產(chǎn)品設(shè)計(jì)相關(guān)理論的”經(jīng)典款”，在這里舉一個(gè)例子：

設(shè)計(jì)的成長必須要經(jīng)歷的三個(gè)階段，第一個(gè)階段時(shí)無章法的感性，第二個(gè)階段是有章法的理性，第三個(gè)階段時(shí)有章法的感性，所以只有透徹的懂得設(shè)計(jì)規(guī)則才可以在其基礎(chǔ)上進(jìn)行創(chuàng)新嘗試：

四、打破常規(guī)，設(shè)計(jì)“破局”

“靈魂出竅”的banner/人像：在設(shè)計(jì)中，可以考慮破局排列，這樣的做法更加能突出主體?吸引用戶點(diǎn)擊，使枯燥的頁面增加一丟活力：

五、適當(dāng)運(yùn)用毛玻璃效果

毛玻璃效果模仿了亞克力材質(zhì)，使用背景模糊制作出磨砂玻璃的效果并且漂浮在空間中，通過前后關(guān)系表現(xiàn)層次感，這是注重空間感的典型特征，意味著這種風(fēng)格有助于用戶建立界面的層次結(jié)構(gòu)和深度。

以上是毛玻璃的優(yōu)缺點(diǎn)，它運(yùn)用是克制的，下面舉幾個(gè)可以落實(shí)在產(chǎn)品中的例子：

六、動(dòng)效加成

在界面設(shè)計(jì)中，動(dòng)效已然變成一個(gè)趨勢(shì)，優(yōu)秀的動(dòng)畫效果可以為界面添加驚喜感，讓用戶對(duì)其印象深刻（并且動(dòng)效已是很多公司要求UI同學(xué)必備的技能了QAQ）。

1. 附屬動(dòng)作

在 UI 界面當(dāng)中，輔助動(dòng)作可以讓主要的動(dòng)畫效果更加突出。這些元素在需要用戶反饋的地方，顯得非常有用。例如點(diǎn)贊、關(guān)注，需要給用戶以鮮明的反饋，這樣的做法一定程度上可以提高用戶點(diǎn)擊率和活躍度。所有的微交互幾乎都是基于「附屬動(dòng)作」的原理來進(jìn)行設(shè)計(jì)的。

2.“招牌”動(dòng)作

動(dòng)效的設(shè)計(jì)可以巧妙的融入品牌元素，這樣可以加深用戶對(duì)產(chǎn)品的印象，形成APP的專屬符號(hào)。最常見的設(shè)計(jì)是在下拉刷新和loading上下功夫：

這個(gè)是Material Design官方動(dòng)效指南：materialcn.cn 大家可以前往學(xué)習(xí)~

七、有趣的缺省頁

當(dāng)缺省頁呈現(xiàn)在用戶眼前時(shí)，我們最常規(guī)的做法就是乖乖告訴用戶當(dāng)前是什么狀態(tài)+具有識(shí)別性的表意插圖。

But！現(xiàn)在已經(jīng)2021年了，我們可以把缺省圖設(shè)計(jì)的再大膽一些，可以結(jié)合產(chǎn)品的性格和IP形象來延展，并且缺省頁的設(shè)計(jì)不拘泥于中間一小塊空間，可以把整個(gè)屏幕當(dāng)作畫板進(jìn)行設(shè)計(jì)，例如躺平：

再叭叭幾句 ：以上是我在工作中總結(jié)下來的一些小方法和一些建議，希望可以幫助到大噶~ 其實(shí)平時(shí)的積累很重要??，最好的學(xué)習(xí)方法就是去實(shí)踐，在實(shí)踐中嘗試、感受，才能針對(duì)問題制定合理的設(shè)計(jì)策略，歡迎大佬們批評(píng)指正~

本文由 @柚子皮的設(shè)計(jì)筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自?Unsplash，基于 CC0 協(xié)議