起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識提升UI界面質(zhì)感的小技巧們
編輯導語：對于設計師來說，在工作中經(jīng)常思考的一件事就是：如何才能夠提高設計的高級感呢？本文作者通過為我們分享了他的一些經(jīng)驗，看看有哪些可以提升UI界面質(zhì)感的小技巧。
寫在前面：在工作中大家有沒有聽到過這樣的聲音：“你這個設計挺好的，但是不夠高級……”，是不是當場炸裂！仰望天空45度眼淚從臉頰滑過，默默問自己怎么做才能高級呢？下面我會分享給大家?guī)讉€小技巧來提升高級感~
一、強化結構層次
大家還記不記得那段寫畢業(yè)論文不堪回首的時光，要給題目、目錄、一級標題、二級標題、正文和注釋不同的字號，以此使得論文的層級更加清晰。同理，在設計領域，相較于平淡無奇毫無重點的界面設計，具有良好視覺層次結構的設計更受用戶青睞。
視覺呈現(xiàn)上要突出信息/模塊之間的邏輯關系，我們所聽到的：”太平了/有點單調(diào)“類似的聲音其實都是層次弱的體現(xiàn)。對于設計師而言，可以通過技術手段對于頁面中的信息/模塊進行優(yōu)化調(diào)整，使畫面變得飽滿，分為以下幾個維度：
1. 文字層級區(qū)分(大小、字重、顏色)
在一倍圖下大字重標題的字號可以提升至32pt，這種強烈而低頻率的對比更具有層次感。舉個例子，蝦米音樂和Appstore的大字重標題讓頁面對比更加強烈，更具有引導性：
如果當前頁面的文字層級過多，通過字號大小不足以清晰的區(qū)分層級時，可以采用顏色深淺或者文本加粗的方法，舉個?：
2. 圖標輕重區(qū)分
如果在次要功能上使用了較為復雜的圖標，而重要業(yè)務入口反而較為簡單的話也會讓頁面的層次感出現(xiàn)問題，圖標層級分為兩種「基于風格區(qū)分」、「基于色彩區(qū)分」：
所謂無邊有界說的也就是：通過 間距/背景色 自然形成模塊達到效果（區(qū)別于傳統(tǒng)分割線）。雖然日常工作中大家可能會被要求在頁面上盡可能多的塞滿各種元素和模塊，美其名曰可以節(jié)省空間，但是其實這樣是相對保守的做法。
太多的元素會讓用戶get不到重點是什么，同時信息也未必會聚焦，有兩種方法可以幫助大家解決這個問題：
二、無邊有界的視覺美感
1. 用增加間距來區(qū)分模塊
現(xiàn)在的設計趨勢傾向于大的留白讓頁面更有“呼吸感”，一般一級頁面較為復雜，信息與模塊比較多，所以留白可以更好的讓用戶獲取到信息（二三級頁面可以辯證的使用大留白，運用過多會顯得太過于追求形式了）。
2. 用背景色區(qū)分相鄰元素
在實際設計場景中，只要很微妙的差別就可以使用戶明了模塊之間的關系，分割線的存在其實有很大程度上會影響視覺效果，所以我們可以用淺灰色背景進行區(qū)分，如下圖：
三、設牢設計原理
每個品牌都有屬于它的經(jīng)典款，比如converse的Chuck Taylor All Star是它最經(jīng)典款式之一。
相信大家自從接觸產(chǎn)品設計以來就被各種原理所洗禮，格式塔原理、奧卡姆剃刀、?？硕傻鹊?，就是一個字：超好用?。ㄊ忻嫔嫌谐壎嚓P于這些原理的文章，不知道的同靴可以自己去找資料學習~）
所以我把它們看作產(chǎn)品設計相關理論的”經(jīng)典款”，在這里舉一個例子：
設計的成長必須要經(jīng)歷的三個階段，第一個階段時無章法的感性，第二個階段是有章法的理性，第三個階段時有章法的感性，所以只有透徹的懂得設計規(guī)則才可以在其基礎上進行創(chuàng)新嘗試：
四、打破常規(guī)，設計“破局”
“靈魂出竅”的banner/人像：在設計中，可以考慮破局排列，這樣的做法更加能突出主體?吸引用戶點擊，使枯燥的頁面增加一丟活力：
五、適當運用毛玻璃效果
毛玻璃效果模仿了亞克力材質(zhì)，使用背景模糊制作出磨砂玻璃的效果并且漂浮在空間中，通過前后關系表現(xiàn)層次感，這是注重空間感的典型特征，意味著這種風格有助于用戶建立界面的層次結構和深度。
以上是毛玻璃的優(yōu)缺點，它運用是克制的，下面舉幾個可以落實在產(chǎn)品中的例子：
六、動效加成
在界面設計中，動效已然變成一個趨勢，優(yōu)秀的動畫效果可以為界面添加驚喜感，讓用戶對其印象深刻（并且動效已是很多公司要求UI同學必備的技能了QAQ）。
1. 附屬動作
在 UI 界面當中，輔助動作可以讓主要的動畫效果更加突出。這些元素在需要用戶反饋的地方，顯得非常有用。例如點贊、關注，需要給用戶以鮮明的反饋，這樣的做法一定程度上可以提高用戶點擊率和活躍度。所有的微交互幾乎都是基于「附屬動作」的原理來進行設計的。
2.“招牌”動作
動效的設計可以巧妙的融入品牌元素，這樣可以加深用戶對產(chǎn)品的印象，形成APP的專屬符號。最常見的設計是在下拉刷新和loading上下功夫：
這個是Material Design官方動效指南：materialcn.cn 大家可以前往學習~
七、有趣的缺省頁
當缺省頁呈現(xiàn)在用戶眼前時，我們最常規(guī)的做法就是乖乖告訴用戶當前是什么狀態(tài)+具有識別性的表意插圖。
But！現(xiàn)在已經(jīng)2021年了，我們可以把缺省圖設計的再大膽一些，可以結合產(chǎn)品的性格和IP形象來延展，并且缺省頁的設計不拘泥于中間一小塊空間，可以把整個屏幕當作畫板進行設計，例如躺平：
再叭叭幾句 ：以上是我在工作中總結下來的一些小方法和一些建議，希望可以幫助到大噶~ 其實平時的積累很重要??，最好的學習方法就是去實踐，在實踐中嘗試、感受，才能針對問題制定合理的設計策略，歡迎大佬們批評指正~
本文由 @柚子皮的設計筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載
題圖來自?Unsplash，基于 CC0 協(xié)議
字體改造法