淺析APP界面設計風格的應用與發展

林 京

（福州工商學院 福建 福州 350715）

1 引言

APP可以幫助我們解決生活中的各種疑難雜癥，而UI設計師的工作就是創造出令人滿意的用戶界面。為此，設計人員通常需要深入了解移動應用程序的特性，了解它們的組成部分和功能[1]。但隨著科技和生活方式的改變，現在已經很難為任何一種APP區分出一套標準界面指南了。本文集合現下界面設計風格，分析這些風格的利弊，以展望手機界面設計的未來發展。

2 界面設計的基本概念

界面設計為UI設計（User Interface）的簡稱。人與手機交互中，手機操作界面的設計稱之為界面設計。設計既合理又美觀的界面設計，使用戶在交互過程能夠享受到流暢的使用感，亦能使APP定位精準，提高下載量。

APP的界面風格能夠決定用戶的粘性，用戶粘性的提高才能保證APP的下載量。近年來，界面的設計呈現喜人的發展趨勢，不斷有新的風格融入界面設計中，界面設計不再注重單一的實用性，同時兼顧了美觀性和實用性。

3 界面設計的視覺風格

3.1 輕擬物風格

輕擬物風格不是單純的復刻以前的擬物風格，而是集合了時下審美趨勢的新風格，加入適當的光影、透視，體現出設計的質感和立體感，提高了界面和圖標的辨識度。擬物風格主要應用在關鍵的圖標上。APP的擬物風格并不是過去我們追求的那種極其真實、復雜的擬物，而是經過一定簡化、抽象后的擬物——輕擬物。在國內，已經有不少的廠商，將輕擬物設計語言應用在自身的APP

上。以“餓了么”“美團”為例，在首頁的金剛位置使用了極其辨識度的圖標，讓用戶更容易感知當前分類的屬性，見圖1、圖2。

圖1 “餓了么”首頁圖

圖2 “美團”首頁圖

3.2 扁平化風格

扁平化風格在2012年開始蓬勃發展，至今已在平面設計中形成了一種扁平化趨勢。界面設計的風格已經被扁平化的設計主導。扁平化的設計在信息的獲取上的確是給用戶帶了更好的用戶體驗和獲取效率外，同時也導致了設計風格趨于同質化的現象[2]。

3.3 手繪風格

手繪風格，是使用手繪進行設計的一種風格，如手工繪圖、速寫、手寫文字或涂鴉的一種方式。手繪體風格在近幾年的設計中的發展也有著不可阻擋的勢頭，手繪體風格的APP圖標在表現上更加隨意和個性，給用戶一種輕松、浪漫、隨意、幽默的感覺[3]。

3.4 毛玻璃風格

毛玻璃風格在2020年成為流行的設計手法，更多地適用在頁面的背景層，更加突出主體物的效果。毛玻璃效果能夠創建視覺層次結構，增加自然精致的細節。在復雜內容中能讓用戶全面感知與處理信息，有效傳達信息，提高了信息可閱讀、易閱讀性。同時，在蘋果系統的新版本里再次加大了使用范圍，如小組件的背景、應用的側邊欄等。毛玻璃的處理不單單在頁面的背景/按鈕上進行，也可以在圖標上，通過毛玻璃的疊加，圖標的質感會更加突出，見圖3。

圖3 毛玻璃風格示例圖

3.5 柔和漸變風格

漸變設計趨勢呈現兩極分化，在視覺設計中，漸變變得更加夸張，但是在UI設計領域，無論是背景、UI元素（如按鈕、卡片和圖形）漸變會使得界面顯得更加微妙柔和。漸變色的使用，可以不單單運用在卡片背景，同時也可應用在圖標上，可以增加整體界面的質感，讓產品年輕化。

3.6 3D和景深效果

從總體上來說，3D設計越來越成熟，適配性也越來越廣泛。設計師也在充分利用最新的技術來呈現3D效果，在軟件層面的支持也相當的完善，從整體視覺到UI元素、交互、體驗，3D幾乎無處不在。值得一提的是，除了諸多視覺元素的視覺設計之外，有一個非常突出的亮點，就是運用 3D 來構建視覺景深，渲染出層次。這種景深和3D元素所構建出來的沉浸感使得整個頁面充滿了吸引力，結合色彩，陰影、高光，呈現在高清晰度的屏幕上，這些都成為了將用戶留下來的理由。

3.7 幾何元素風格

幾何元素既可以作為背景適用，也可以作為裝飾細節，增加設計的趣味性。簡潔和干脆的幾何圖形可以加強文字信息傳遞以及氛圍渲染的效果。即使是最簡單的幾何元素，同樣可以創造出繁復、有趣、富有想象力的設計。簡潔和干脆的幾何圖形可以加強文字信息傳遞以及氛圍渲染的效果。即使是最簡單的幾何元素，同樣可以創造出繁復、有趣、富有想象力的設計。

3.8 插畫系統的建立

卡通插畫一直在流行，并流行了很多年。卡通插畫能夠脫穎而出的原因很簡單：有趣、多變、靈活，效果好。在目前，越來越多產品專門打造服務與產品體系的插畫系統，伴隨的產品體系的日漸成熟，輸出一套統一規范的插畫系統，可以凸顯產品的調性。一方面可以提高品牌的認知度，統一對外輸出美觀性、一致性。另一方面還可以對日常常規運營設計提高效率。插圖系統是對產品插圖的整體性概括，其本質是“文檔規范”與“設計資產”的集合，用于提供一定的原則、方法、標準與素材，幫助設計師系統化、高質量地完成設計輸出，同時提升設計效率，將設計師從重復的勞動中解放出來。

3.9 進階版的微動效

我們都知道微交互動畫，流暢并且合理的動效會讓用戶感受到流暢和愉悅，適當的加入微動效會讓產品的品質感提升和帶來差異化的改變。

近年來，越來越多廠商注重微動效帶來的體驗優化，專門開設了動效設計師這個崗位，主要為產品在研發過程中，各個模塊間加入動效設計，保證頁面的銜接是連貫一致的。

在設計過程中，經常加入微動效的模塊大概是：頁面切換、對話框、上滑浮層、彈出式菜單、觸發縮放類、頁面導航、分頁滾動、小模塊滑動、開關類、按鈕或模塊觸發的反饋等。

3.10 字體與留白

UI界面逐漸扁平，色塊圖標弱化，為突出頁面重心和內容，iOS 11在界面標題上使用更大的字號，更粗的字體。近年在大標題的風格衍變下，文字在傳達信息外，也開始有了裝飾性作用，采用超大字體，成為頁面排版美化的一部分。去分割線，通過大標題與留白區分層級。這樣的好處可以減少分割線對內容的干擾。

留白是一種對比手法或方式，而非純粹的減少內容來達到留白的目的。在手機屏幕空間相對有限的情況下，我們的視覺會更加聚焦。

過于密集的設計往往會造成視覺疲勞，因此更需要多去思考內容設計的空間感，適當的留白可以降低視覺疲勞，增加頁面的呼吸感，提高視覺聚焦和閱讀效率。

4 界面設計的發展趨勢

時代在快速發展，人們的審美也在更新換代。我們即將迎來5G時代，這對智能手機又是新一輪的挑戰與機遇，對界面設計師們也是一番新的天地，界面設計師需要對新的技術有新的認知才能設計出合理的界面。界面設計最根本的核心就是解決用戶的需求，幫助用戶快速地操作手機界面，具有功能性的同時還能兼顧美觀性，這便是成功的界面設計[4]。因此，一名優秀的界面視覺設計師需要能夠及時地把握流行趨勢，擅長不同風格的設計，根據用戶的需求進行有針對性的設計，不斷更新換代，迭代產品交互，提升用戶的體驗感，了解用戶需求，對界面設計的信息層級合理規范，層級邏輯清楚、有節奏感地排列手機界面[5]。手機界面的設計趨勢總是在不斷變化，需要界面設計師不斷地學習，持續地提升自我的審美，練習新技術，不斷地實踐才能與時俱進。

5 結語

在信息時代，人均一部智能手機的大環境下，手機和人們的生活密不可分，不再只是打電話和發信息。人們通過下載應用可以做很多事，利用應用程序設置鬧鐘、購物、導航、看電影等，已深深進入我們的生活中去，而我們對于它也有了更高的要求，不止希望它做得漂亮，還希望它更便捷高效，這對手機的界面設計無疑是一大挑戰。對于未來科技的發展我們無法預測，手機的發展或許會有更多的可能性，APP作為互聯網時代的產物越來越受到人們的關注與期待，而APP的界面將會得到更多可能的發展。