APP設計風格對比:扁平化、極簡、Material Design

2021-02-15 創意設計師

主要的APP設計風格大致分為以下三種：

扁平化（Flat Design ）、極簡、Material Design（谷歌APP設計風格）

APP設計風格是指APP通過主要的幾種顏色搭配、頁面布局和界面交互體驗等給用戶呈現出的整體視覺感受。

下面我們就來重點分析下這三種目前主流的APP設計風格的區別。

APP設計風格一、扁平化設計   Flat Design

首先，扁平化設計是一個大的範疇。它既包含了極簡設計風格和Material Design、微軟的metro風格。是相對之前的蘋果擬物化設計風格發展至今的。

1、什麼是扁平化設計

去除冗餘、厚重和繁雜的裝飾效果。而具體表現在去掉了多餘的透視、紋理、漸變以及能做出3D效果的元素，這樣可以讓「信息」本身重新作為核心被凸顯出來。同時在設計元素上，則強調了抽象、極簡和符號化。

更少的按鈕和選項，這樣使得UI界面變得更加乾淨整齊，使用起來格外簡潔，從而帶給用戶更加良好的操作體驗。

優點

1、界面美觀、簡約大方、條理清晰

2、設計元素上強調抽象、極簡、符號化，去除冗餘的裝飾效果突顯App的文字圖片等信息內容。

3、完美兼容pc網站、安卓、ios等不同系統的平臺和不同屏幕解析度的設備，適應性強。

缺點

1、降低用戶體驗，在非行動裝置上令人反感；意思就是比較抽象

2、缺乏直觀，需要一定的學習成本和意思的表達不清晰。

3、傳達的感情不豐富，不直觀。

設計技巧分享

1、簡單的設計元素

2、強調字體的使用

3、關注色彩

4、簡化的互動設計

5、偽扁平化設計

APP設計風格二、極簡設計風格

極簡在攝影中是一種突出主體取簡去繁的攝影手法，在生活中是一种放松的生活態度，在設計中是一種簡潔的設計手法。

簡約正是極簡設計風格的代表產物。極簡設計以簡單，易用為原則，滿足人們生活需要原則簡單，易於掌握。

簡約正在成為當代人的審美標準，無論是排版還是交互，越簡單的設計反而更加吸引人。不僅用戶的審美在發生改變，移動APP設計師們也在為此而努力著。

APP的極簡設計風格如下：

界面：簡潔整齊大方，回歸自然，尊重自然規律，依據形態自然體現。明快而富視覺衝擊力的個性圖形，用色單純洗鍊，刪繁就簡，以少勝多，視覺中心點明確。大面積的留白，使圖、文、底主次分明，更具有強烈的視覺衝擊力。

交互：核心在於以人為本，更加重視用戶自然的感受。通過交互來設計出用戶希望出現的界面效果。

APP設計風格三、Material Design設計

Material Design設計風格是興起於谷歌安卓系統的5.1以後的。也是谷歌安卓手機作業系統的風格。也是谷歌推出了全新的設計語言Material Design。

Material Design設計代表是卡片化設計風格。

如今Material Design將會慢慢成為全平臺設計規範和APP設計風格的趨勢。

下面我們看下微博APP的Material Design設計風格。

當然還有國外的一些設計網站的Material Design的設計風格的APP案例。例如：追波網的APP界面設計風格。

現在讓我們回顧下Material Design的九大設計原則：

擴展閱讀：最全安卓Material Design的設計原則和設計規範

1、材料是個隱喻 

（所謂的「材料」是基於觸覺現實，靈感來自於對於紙張和墨水的研究，也加入了想像和魔法的因素。）

2、表面是直觀和自然的

（表面和邊緣為現實經驗提供了視覺線索。使用熟悉的觸覺屬性，可以直觀地感受到使用情景。）

3、維度提供交互

光、表面和運動是展現交換的關鍵因素。逼真的光影效果顯出了各部分分離，劃分了空間，指示了哪些部分可以進行操作。

4、適應性設計

底層設計系統包括了交互和空間兩部分。每一個設備都能反映出同一底層系統的不同側面。每一設備的界面都會按照大小和交互進行調整。

5、目錄用黑體和圖形設計，並帶有意圖

黑體能突出層次、意義，顯現焦點。深思熟慮的色彩選擇，層次分明的圖像，大範圍的鋪陳和有意的留白可以創造出浸入感和也能讓表達更清晰。

6、顏色、表面和圖標都強調動作效果

用戶行為就是體驗設計的本質。基本動作效果是轉折點，他們可以改變整個設計，可以讓核心功能變得更加明顯，更為用戶指明了「路標」。

7、用戶發起變化

操作界面中的變化來自於用戶行為。用戶觸摸操作產生的效果要反應和強化用戶的作用。

8、動畫效果要統一

所有動畫效果都在統一的環境下顯示。即使發生了變形或是重組，對對象的呈現也不能破壞用戶體驗的連續性。

9、動作富有情感和一致性

動作是有意義的，而且是恰當的，動作有助於集中注意力和保持連續性。

總之，手機APP界面設計的重點無非就是兩個：一個是界面視覺設計，一個是考慮界面設計的用戶體驗。以上就是25學堂跟各位對如今最流行的三種APP設計風格的對比分析。

扁平化、極簡、Material Design也是APP設計師目前常用的設計風格。

轉載自：25學堂 http://www.25xt.com/appdesign/10940.html

相關焦點

  • Material Design Lite,簡潔驚豔的前端工具箱
    一、設計語言github項目地址：https://github.com/google/material-design-lite擬真 vs. 扁平在iso7之前，Apple採用的是擬真化設計語言，期望通過模擬現實世界的物體，給用戶 身臨其境的感覺。
  • Instagram推新版app:扁平化圖標成亮點
    而爭議性最大的莫過於由原來的相機圖標變為扁平化、明亮鮮豔的圖標。Instagram推新版app：扁平化圖標惹爭議（圖片來自於The Next Web）    Instagram團隊表示，這樣的設計可以使布局更加簡單，用戶可以把注意力更加集中在朋友分享的照片上
  • Material Design控制項使用(一)
    最近學習了一下md設計風格和相對應的控制項覺得挺棒的,真希望以後能做安卓設計風格的app,只是心有魚而力不足,雖身為安卓程式設計師但由於公司設計成本卻每天做著
  • 扁平化為什麼會成為設計行業發展趨勢?
    細心的設計師可能發現，在最新的iOS13中，app Store裡放棄了之前的線框設計而是換成了一種輕量化的圖標，帶有比較圓潤的外觀，更加有親和力。我們就暫稱為面型2.0。在標籤上，線性圖標的選中態為背景填充樣式，而在iOS 13中選中態和非選中態只有顏色上的區分。
  • 2017年扁平化設計這麼玩
    漢堡圖標已經成為當前網站的標準配置，設計師可以將非關鍵因素隱藏在漢堡圖標之後的菜單裡面。由於扁平化設計對於配色的可接受性更強，網頁設計有了更多的可能性。這使得如今的網頁設計整體上比以往更加多彩有趣，許多網頁首頁甚至採用了圖片+色彩疊加的設計。極簡的首頁設計
  • 解讀Material Design引領的UI設計趨勢
    因此Material Design並不是去擬物化的設計。許多設計師把扁平化與擬物化對立起來，其實兩者並不是對立關係。但我更願意稱Google新的設計語言為抽象化。無論是蘋果的設計語言，還是Google的設計語言，乃至於Windows的Modern UI 和Facebook的Paper設計語言，大方向都是一致的，而在細節上卻分道揚鑣。
  • APP扁平化設計的優勢!
    APP扁平化設計的優勢APP扁平化設計提倡功能美大於形式美，少即是多，留白大於填充的美學原理。僅僅具有色彩、形狀、線條等基本元素，字體也是選擇最基本、簡潔的那種，呈現出簡潔明了的特點。色彩APP扁平化設計中，通常採用比其他風格更明亮更炫麗的顏色，高飽和、鮮亮、復古或單色塊之類的顏色。鮮亮的色彩為扁平化設計創造出一種與眾不同的感覺，因為它在明、暗背景下都能獲得很好的對比度，達到一種極富衝擊力的視覺效果，吸引用戶的注意。
  • 好像除了甲方,大家都愛極簡和性冷淡風格?
    極簡迷」，好像除了甲方，大家都愛極了極簡和性冷淡風格。什麼是極簡主義？極簡主義是是二戰後60年代興起的一個藝術派系，稱為「Minimal Art」,是對抽象表現主義一種極至的抗議。谷歌被認為是極簡主義Web界面的先驅者，尤其是今年提出的「material design」，更是把極簡主義發揚光大的表現。
  • APP扁平化界面設計方法!
    扁平化界面設計並不是完全的抵制裝飾效果，而是合理適度的使用裝飾效果，合理適度的裝飾效果是指在不影響用戶對功能的使用的同時滿足用戶的審美需求。①拒絕特效。扁平化界面設計追求的是信息傳遞的直觀明了，具體表現去掉了多餘的透視、紋理、漸變以及3D效果的元素，注重減少信息的裝飾元素，減少圖片的分層效果。
  • 新擬物化,會是下一個UI設計趨勢嗎?
    所以隨著 2013 年 iOS 7 的發布，Apple 決定「走扁平化」風格。大多數陰影都消失了。現在，按鈕大多只是文本連結。一切都是二維的，沒有偽 3D 模型。人們討厭它！扁平化的想法來源於我們認為界面本就是平面的 —— 一堆像素顯示在平坦的表面上。儘管準確而當代化，但人們意識到有些東西丟失了，失去了將按鈕按下而不是觸摸平坦表面的趣味。
  • 打造 Material 形狀主題 | 設計篇
    形狀也可以表達互動，比如上圖裡通過不對稱的切角暗示那裡存在可操作的組件。Material 組件分為三類: 小、中、大。"小" 組件包括按鈕、貼塊、懸浮操作按鈕、信息提示控制項和工具提示等。"因此，以不同的形狀樣式處理不同大小的組件，不僅可以給形狀留出空間，讓它們充分發揮前文提到的 "設計工具" 的用途，還能讓您的應用看起來平衡且直觀。在為應用的主題選擇形狀時，您可以從品牌的其他元素中尋找靈感。徽標 (logo) 是一個很好的起點。
  • 【交互】設計師眼中的扁平化設計新潮流
    當然你可以簡單地認為扁平化設計只是另一個轉瞬即逝的美學潮流。不過一旦你深入去了解它的設計原理，你將會明白，扁平化設計不僅僅只是「看上去很美」。扁平化設計是什麼？扁平化設計是極簡主義的直系親屬，不過它更複雜和多樣化一些。扁平設計既兼顧了極簡主義的原則又可以應對更多的複雜性；通過去掉三維效果，這些設計將銳度和清晰度融為一體。
  • 為什麼網站建設越來越趨向扁平化設計?
    自響應式網站推出以來，我們發現越來越多的企業網站改版出來的風格都趨於扁平化展示，我們首先要弄清楚什麼叫做扁平化設計？注釋：扁平化概念的核心意義是：去除冗餘、厚重和繁雜的裝飾效果。同時在設計元素上，則強調了抽象、極簡和符號化。簡單的來說，就是以簡潔為主，突出內容的核心，去掉冗長的表達方式。現在人們更喜歡簡單直接的東西，最直接的反應是網站建設。與之前的相對比較酷的網站相比，現在的人們更喜歡簡單，操作直接的網站，正因為如此，目前大部分的網站設計都趨向於扁平化。
  • 關於極簡主義設計
    極簡主義這個詞被使用在人類活動的各個領域中：建築、藝術、攝影、文學、音樂、UI設計，甚至食物。Merriam-Webster 詞典種對於它的解釋是「在音樂、文學和設計領域中以極其平衡簡潔而著稱的一種風格或技術」。如今極簡主義已經成為UI設計的一個新方向。
  • 你應如何理性對待扁平化設計?
    但設計往往是複雜的，設計跟穿衣服一樣，固然有潮流，但是潮流是不適合你又是另外一回事了。量體裁衣——你認為扁平化設計真的符合你的項目嗎？ 初步認識扁平化設計本文既不否定扁平化，也不盲目追隨扁平化。扁平化的好與壞取決於兩點：1.設計師個人設計理念與設計造詣的高低。2.扁平化是否與設計需求相符。
  • 扁平化名片設計
    來源：crazyleafdesign今天的教程非常實用，將會教你利用PS打造簡約、充滿現代感的名片。
  • PS扁平化圖形製作教程,四種風格教你吃透扁平化
    扁平化是指沒有立體感，僅僅只有簡單的亮面和暗面
  • 扁平化風格設計法,圖形、色塊一個不能少
    扁平化風格是設計界的一種流行趨勢，它是設計師們長久以來對藝術表現手法的一種共同探索。
  • 為什麼化妝品logo設計越來越扁平化?
    在之前大多數UI設計風格還是以擬物化的設計風格為主，就在Windows更換UI設計以及蘋果發布IOS 7系統後，人們發現這種扁平化設計，好像更符合大家審美需求，這也讓扁平化設計從UI設計，迅速延伸到其他設計領域，特別是logo設計，這幾年都是以扁平化設計風格為主，相信大家對於為什麼化妝品
  • Neway Design | 案例分享:極簡輕奢暢想
    點綴色為愛馬仕桔與深空藍微妙對比搭配，而香檳金屬的局部應用點亮輕奢的意義。痴迷於極簡風格的流線美學，入門會客廳與餐宴廳通過地面高度的落差延伸層次關係，分割區域的同時又屬同一個空間，地面紋理選用灰色調流線型水墨紋，助力空間的延伸感與節奏性。而玄關正對的植物玻璃盒子，若隱若現地遮擋著裡面的世界，通透精緻，但不忍阻斷整個空間的延續性。