用這13個方法，幫你做出真正輕量化的移動App 設計

編者按：無論是扁平化還是Material Design，簡化圖標元素都只是觸及表象，想創造出本質上輕量化的設計，界面細節和交互上的考量也非常多，今天這篇好文，總結了13個幫你做出輕量化設計的方法。

1. 創造更輕的設計（Lighter Design)

什么是輕設計

扁平化設計不再使用各種斜度和陰影，讓app有了更輕盈的美感。這意味著通過運用負形空間來取代斜度和陰影，創造出一個只關注核心信息的、更為簡潔的界面，從而摒棄那些對app本身和用戶流程來說都很低效的設計元素。

如何更輕

較輕的設計舍棄掉了那些分散人們注意力的元素，以引導用戶去關注屏幕上有意義的內容，使得導航更簡單，同時又塑造了一種極簡、現代的高大上品牌形象。

2. 一種字體用到底

什么是只用一種字體

減少屏幕內所使用字體數量能最大限度地表現字體設計的張力。因為當你少用不同的字體、不同字號還有像斜體、黑體、半黑體等字形樣式時，內容之間留白的級別差異才能更好地被區分開來。

為什么只用一種字體

讓單一的字體貫穿于app中，不僅使品牌形象更趨穩定，也有利于跨渠道的內容響應（如app，手機網頁，電腦網頁等），從而優化全渠道體驗中的手機元素。另外，用戶也希望在滾屏瀏覽相關內容時眼前只有一種字體樣式。

3. 徹底告別線條——使用空間和組塊

什么是空間和組塊

盡管從前常用分割線來細分屏幕里的每個區域，但是這樣界面看起來會很密集凌亂。如果把線去掉，只將空間區分成不同內容的組塊，這樣做既能釋放空間，也能使界面看起來更干凈。

為什么要去掉線

去掉具體的線能讓界面看起來很現代，而且更關注實用性。舉例來說，圖片和字型能因此放得更大，那么視覺上會更清晰，使用起來也會更簡單。利用留白來替代畫線分隔，就能以一種不扎眼地方式劃分各個區域。

4. 將數據突出強調（Spotlighted Data）

什么是突出強調

由于用戶習慣越來越趨向于極簡的界面，大家也就更常用一些大字和撞色來強調某些數據，使其成為視覺焦點。根據不同目標客戶群的需求，突出數據也有很多種方式。

為什么要突出數據

受到大字和跳色的影響，用戶會把注意力放在屏幕內指定的區域，這樣的方式既不刻意，也不強制。由于提供了更簡便的導航和收集信息的體驗，信息就能更迅速地被用戶接受。

5. 創造微交互（Micro-interaction）

什么是微交互

微交互是在一個用例中做出一些小的視覺提升（如動畫、音效等），使用情境可以是完成一段數據處理、點贊或者推送即時消息等等。這些交互雖然看起來很微妙，卻能正好讓你注意到關鍵元素，以此來提高不同產品間的辨識度。

為什么要有微交互

舉例來說，當用戶在完成一些小任務，比如調整設置，系統能夠彈出友情提示信息，這種人性化的微交互就像是貼心小棉襖。用戶也會覺得擁有特贊的微交互的app用起來更有意思。

6. 精簡你的配色

什么是精簡配色

2013年扁平化設計橫空出世后，精簡調色板就成為了一個趨勢，一切以明確和簡潔為綱。結果，設計師和用戶為了更干凈的界面，都開始盡量少用顏色。

為什么要精簡配色

顏色在創造特定情緒、引導用戶視線和品牌傳達中都必不可少。品牌使用較少甚至專一的顏色能更直接反映出它的品牌標識性。另外，用戶也更喜歡不那么亂花漸欲迷人眼的視覺效果，它能相當有效地突出要點，使導航在app使用流程中更清晰明了。

7. 讓界面層次化（Layered Interface）

什么是層次化

曾幾何時，界面設計是擬物化（以寫實為準則的設計，如日歷app做得像真的日歷、有景深的app圖標、手機相機的快門聲音）的天下。如今，時移世易，大家都高唱“扁平化大法好”。一番改朝換代，扁平化刷新了一些新的規則，設計不再只關注3D能做多真，而是改用“層”的方式來營造實體感，從而創造一種更“可觸摸”的體驗。

為什么要層次化

雖說“扁平化大法好”，但扁平化設計最有可能犯的錯就是“太扁”，因為其設計過于微妙，以致用戶很難辨識和參與其中，更別說將其聯想到3D實物世界（或者以前的擬物世界）。而“層次化”則利用z軸表達出了物件壓物件的豎向關系。分層和增加深度有助于辨別不同物件之間的關系，也能讓某些特定的對象得到關注。

8. 使用Ghost按鈕

什么是ghost按鈕

ghost按鈕透明無色，邊界的線非常細，形狀也很簡單（像長方形或正方形），有直角或柔和邊緣，其中的文本都很簡潔明了。

為什么要用ghost按鈕

ghost按鈕能在保持極簡外觀的同時又吸引人關注它，而且它可以使屏幕上復雜的按鈕擁有等級體系。當同一頁面內有很多不同的按鈕時，它們會根據優先級被設計和擺放（如將ghost按鈕用在選項或過渡步驟中）。在某些情況下，Material design會用細微的陰影來幫助用戶察覺到這種等級體系。

9. 創造手勢交互（Gestures）

什么是手勢

陀螺儀和動作傳感器的一體化讓設備偵測到用戶的動作，在此基礎上，用戶與設備間的交互不僅僅是對屏幕點來點去，而更像是現實生活中的手勢在屏幕上的移植。

為什么要使用手勢

用戶都很懶，喜歡用最簡單的動作。舉個例，如果要讓用戶刪除一個東西，無論男女老少都會嘗試去把這東西拽出屏外。因此，如果要提升用戶體驗，減少點按，增加滾屏，讓應用程序不是個只能點來點去的玩意兒，這樣交互性會更強。

10. 使用動效（Motion）

什么是動效

隨著軟件革新，設計師現在也能僅通過利用風格樣式列表來控制動作了。以運動特征為基礎的設計元素到處都是，包括過渡、動畫甚至是模仿立體的質感。設計中使用動效可以幫助用戶消化內容，讓關鍵元素或數據、對象與其他的內容區分開，以強調它的重要性。

為什么要有動效

動效能將用戶的關注點轉移到特定區域，或者忽略它們。在界面中做出視覺響應能提高參與度，營造小驚喜取悅用戶。

11. 縮短用戶流程

什么是更短的用戶流程

與其讓用戶橫跨多重頁面來完成一個簡單的需求處理，不如在單屏內囊括所有過渡層階的操作，這樣就能減少其放在app上的時間和精力。舉個例子，用戶完成前一個部分時，就會有某種形式的自動開啟，或者出現下一步輸入區域的提示。

為什么要縮短用戶流程

移動端用戶隨時都在移動中，因此他們更傾向于在app內簡單迅速地完成任務處理。根據這個共識所設計出的應用程序體驗，理應讓用戶花費的精力降至最小，同時也可增強app啟動時的速度。

12. 建立設計準則（Design Standard）

什么是設計準則

設計標準是在項目初始時，通過決定色彩、圖標和整體布局間距等標準，來確立視覺語言的過程。

為什么要有設計準則

建立設計標準能使app內部以及在不同平臺之間的表現更為穩定和統一，將項目上線時出錯的可能性降到最低，也讓以后的修改更容易。

13. 創造原型（Prototyping）

什么是原型

原型是產品初步或早期的工作版本，能提供對設計具有實用性和價值的分析，從而為設計的效用作出有價值的建議，預測出潛在的修改需求，以此來節約設計師在提升用戶體驗上所付出時間和精力。

為什么要創造原型

原型可以通過進行低成本的“實驗”來顯現出項目的關鍵要素，包括其條件和特性作用域。它能讓你對產品進行實驗和反復推敲，將時間和資源用來從實驗結果中去學習，其整個過程是以洞察力為驅動的。

想學MD 設計，沒有比這個專題更全面的教程了：

官方譯文：

1. 《中文版來了！新版Material Design 官方動效指南》
2. 《中文版來了！新版MATERIAL DESIGN 官方動效指南（二）》
3. 《中文版來了！新版MATERIAL DESIGN 官方動效指南（三）》

學習筆記：

1. 《學霸的自學筆記！Material Design設計規范學習心得》
2. 《重磅教程！幫你全面徹底搞定MATERIAL DESIGN的學習筆記》

素材篇：

1. 《新鮮熱辣！一組實用的MATERIAL DESIGN風格素材！》

實戰教程：

1. 《重磅改版！網易新聞安卓客戶端MATERIAL DESIGN實戰》

原文作者｜Onur Oral
翻譯｜鄧詩韻 高雨滴
校對｜高雨滴

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com