資深UI傳授的十大界面設計理念

專業調查顯示，26%的應用在下載后只打開過一次。任意一款APP都包含了開發者和推廣者的大量精力，但是最終達不到想要的營銷效果，相當于前期的付出都打了水漂。APP使用率低的重要原因之一是APP界面設計很差，那么，開發者如何提升APP界面質量呢？

關于APP界面設計理念，用一句話概括就是“簡潔輕快的界面設計更符合現代用戶的心理需求”。從用戶體驗角度出發，專注于產品的質量，追求人性化設計理念。

扁平化設計，拒絕冗雜繁重

在近幾年中，APP的界面設計風格發生了翻天覆地的變化，由原來的3D、擬物發展到扁平、簡約。為何APP界面設計會朝著扁平化發展呢？

隨著APP承載的信息量越來越大，加劇了超負荷現象。其中一部分信息是重要的，但是大部分信息卻是無關緊要的。所以，APP開發者就需要不斷地評估APP為用戶提供的價值，過濾掉華而不實的功能，如圖2-7所示是兩款不同APP的扁平化設計界面。

設計APP界面時，去掉用戶界面的繁雜元素才是提升用戶視覺體驗的王道。因此，設計者始終要本著“簡約就是金科玉律”的原則設計APP。

導航設計，APP結構一目了然

當設計者確定了APP的設計需求和設計流程后，開始著手設計APP界面或者是APP原型圖。在這個時候，設計者都要面臨的第一個問題是：如何將這些信息以最優的方式組合起來？

導航設計成了承接和組合APP各個元素的最佳方式，良好的APP導航設計模式對整個APP的用戶體驗起到關鍵作用。而移動應用界面的導航設計是多種多樣的，下面將介紹幾種比較常見的導航設計。

（1）抽屜式導航設計和宮格式導航設計

抽屜式導航是將菜單隱藏在當前頁面后，點擊入口按鈕即可像拉抽屜一樣拉出菜單，如圖2-8（a）所示。抽屜式導航界面設計的優點是節省頁面展示空間，讓用戶將注意力聚焦到當前頁面。因此，抽屜式導航比較適合不需要頻繁切換頁面的APP，但是設計者在使用這種導航設計方式時需要注意的是，一定要提供菜單滑出的過渡動畫，給用戶足夠的緩沖空間。

宮格式導航是將APP的主要入口全部聚合在同一個頁面，方便用戶能夠直接選擇需要的功能，如圖2-8（b）所示。宮格式導航具有簡約而不簡陋的優點，導航清晰且明顯，并能提升用戶的使用體驗。但是設計者在設計宮格的顏色時，切忌不分青紅皂白地使用色彩，這可能會讓用戶混淆功能，還會對顏色產生疲倦感。

（2）列表式導航設計和組合導航設計

列表式導航是APP導航設計中必不可少的一個信息承載模式。列表式導航通常用于二級頁，由于它與宮格導航一樣，不會默認展示任何實質內容，所以通常不會出現在APP首頁，如圖2-9（a）所示。列表式導航結構清晰、易于理解、冷靜高效，能夠幫助用戶快速定位并找到對應的頁面，并且列表項目可以通過間距、標題和字符等進行分組。

當用戶需要聚焦內容，同時又需要一些快捷入口能夠連接到某些頁面時，就可以采用組合式導航，如圖2-9（b）所示。組合式導航設計用圖表的形式展現快捷入口，也可以將它理解為一種圖形化的文字鏈。這種導航設計方式靈活，對于用戶而言，能夠滿足用戶對APP功能界面設計的創新要求，就APP架構頁面來說，組合式導航設計能快速適應架構的調整。

輔助動畫，視覺營銷的利器

輔助動畫是APP界面必不可少的元素，適當地增加輔助性動畫可以給用戶明確的反饋提示，例如，加載頁面動畫、下載動畫、發送成功動畫、提示動畫以及APP更新動畫等，如圖2-10所示是京東金融APP的輔助性動畫提示。

輔助動畫給用戶提供有意義的反饋，幫助用戶直觀了解操作的結果，減少用戶在等待功能響應時引起的煩躁感，此外，輔助性動畫的種類豐富，既可以是簡單的文本框，也可以是精美有趣的動畫，還可以是幽默的文字，能給用戶留下深刻印象，提升用戶在使用時的愉悅感，這一細節的設計也能成功吸引用戶使用APP，并且逐步培養忠誠用戶。

人性化設置，產品設計的基礎守則

在現實生活中，每逢喜慶節日，商家都會張燈結彩，烘托出節日的氣氛，為消費者營造出一種熱鬧的、紅火的和溫馨的消費環境，進而刺激消費者的購買欲望，提升商品的銷售量。

而在線上的營銷活動中，APP設計者也會在APP的Logo、按鈕、圖表和背景圖片等地方加入節日主題元素，這樣就會貼近現實的環境，消費者即使是在線上購物，也能感受到濃濃的節日氣氛。因此，這就是一種很人性化的設計。如圖2-11所示分別是京東商城APP春節界面和百度糯米APP春節界面。

要點提示

任何一款APP的每一個功能、界面顏色以及設計風格，甚至是一個小按鈕，都是設計者經過深思熟慮的，APP設計者要在用戶需求和公司需求之間找到平衡點，既能夠為用戶提供良好的用戶體驗，也能夠保證公司的盈利。而關于節日元素，除了人性化體驗的考慮，更重要的就是用戶體驗，APP設計者通過在APP界面中加入節日元素，制造出熱鬧的節日氣氛，進而吸引到更多的消費者在線上進行消費，最終達到APP營銷的目的。

遠離老土的顏色

在APP界面設計中，色彩是很重要的一個設計元素。APP設計者如果能夠靈活地進行色彩搭配，可以為APP的設計加分，提升用戶的交互體驗和視覺體驗。那么，APP設計者該如何使用色彩打造出讓用戶驚艷的產品呢？

（1）APP界面設計規范

APP設計規范是指對APP界面進行風格統一，對界面元素的樣式、顏色和大小設定統一的原則，使界面設計整潔和統一，減少界面元素的重復設計。APP色彩使用標準如圖2-12所示。

（2）APP界面設計中色彩運用原理和對比原則

手機APP界面要給用戶以簡潔、整齊和條理的使用感，依靠的就是界面元素的排版、間距設計以及色彩的搭配。其色彩運用原理需要遵循以下原則。

●設計色調的統一：針對APP類型選擇恰當色調，例如，殺毒類APP色彩搭配中，綠色代表安全，橙色代表危險預警，紅色代表系統危險。總之，不同APP所代表的含義不同，設計者需要結合具體的APP來統一色調。

●標準界面的采用：當APP界面沒有明確的規定時，APP設計需要做到跟操作系統保持統一，通過讀取系統標準色表來進行選擇。

●勿忽略色盲、色弱用戶：進行APP色彩設計的時候，不要忽視了色盲、色弱群體。如果在APP中使用了特殊顏色表示重點或者特殊功能，設計者也應該使用特殊指示符、著重號以及圖標等進行說明。

●顏色方案的測試：顏色方案的測試是APP設計搭配中的重要環節。因為每部手機的顯示器和分辨率不同，APP界面色彩的表現在不同的手機中都不一樣，所以，APP設計者應該經過嚴格測試，通過不同的機型去進行顏色測試。

●遵循對比原則：色彩對比原則很簡單，就是淺色背景上使用深色文字，深色背景上使用淺色文字。例如，藍色文字配以白色背景容易識別，在紅色背景下則不易分辨，原因是紅色和藍色沒有足夠反差，但藍色和白色反差很大。除非是特殊情況，APP界面中杜絕使用對比強烈，讓人產生憎惡感的顏色。

●色彩類別的控制：在APP界面上盡量少使用類別不同的顏色，以免讓用戶眼花繚亂，反而讓整個界面出現混雜感，界面需要保持干凈、簡潔和大方。

響應式網頁設計

響應式網頁設計是“響應式網頁設計之父”Ethan Marcotte提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本。

響應式網站越來越受到歡迎，但是由于它沒有固定的頁面尺寸。在沒有任何物理限制的情況下，讓APP設計者感到無從下手。以下只分析如何運用響應式Web設計的各項基本原則來實現APP網頁的布局。

（1）Web字體VS系統字體

Web字體能夠讓網頁字體看起來很炫酷，但這些字體都需要先下載，字體越多，網頁加載時間就越長，很容易影響用戶體驗。盡管系統字體加載速度快得多，但太過普通，不能吸引到用戶的注意力。

（2）移動優先VS臺式桌面優先

嚴格來說，移動優先和臺式桌面優先的區別不大。而從移動端著手會帶給APP設計者一些額外的限制，因此，建議APP設計者從兩端同時入手。

（3）利用內容流營銷

隨著手機屏幕尺寸越來越大，內容所占的垂直空間也越來越多，內容會向下方延伸，產生內容流，為APP營銷提供了一種新的營銷方式。

（4）靈活地運用相對單位

APP設計者的設計對象可能是臺式桌面，也可能是移動端屏幕，或者介于兩者之間的屏幕類型。由于像素密度不同，設計者需要使用靈活可變，并且能夠適應各種情況的單位，例如，百分比。在使用百分比時，寬度50%就表示寬度占屏幕（或者叫“視區”，是指所打開瀏覽器窗口的大小）的一半。