關於扁平化設計,你還需要知道這些

2021-01-16 藝術中國


扁平化設計風格(Flat design)源於對用戶放棄使用產品的原因的研究。其中最主要的兩個原因是導航效果不佳及加載緩慢。

首先,用戶對app的技術門檻感到難以理解。忠實用戶可以想辦法克服技術障礙,但較為年輕以及年老的用戶並沒有足夠的耐心和精力去研究一款程序。另一個導致用戶停用產品的重要原因是加載速度太慢。就其本質而言,扁平化設計的下載速度比複雜設計的下載速度要快的多。(複雜設計的特性是有很多裝飾元素,如陰影和分層等。)

有鑑於此,平面設計師開始探索一種讓用戶感到熟悉,一致,易用和有秩序的排版及設計風格。這是一種全新的設計理念。這也許是第一個由平面設計師主導的數字變革。微軟在視覺傳達方面做了很多投資。它對於平面設計風格的重視形成了一種全球設計風潮。蘋果公司還在苦守著自己臃腫的圖標和圖形不放,但最終它也從iOS 7開始轉而擁抱扁平化設計風格。

下面這張截圖就是扁平化設計的一個很好的範例。扁平化意味著既不過度單調,也沒有過多元素。


谷歌目前正在大力鼓勵響應式設計。因為響應式設計風格的網站只有一個URL和同樣的HTML,這讓谷歌能更好地指示內容。而扁平化設計風格與響應式設計的理念十分契合。扁平化設計不需要多餘的元素,因而加載十分快速。它也更利於在不同大小的設備上顯示乾淨利落的排版。

扁平化設計的主要原則

色彩

我們先從色彩開始吧:對色域的大膽運用是扁平化設計的標誌之一。Windows 8首先使用了具有明亮色彩的分層。使用色彩和大小都不同的元素能便捷地創建分層。過去,設計中色彩的主要目的是提升程序的使用效率,但事實證明它在創造審美效果上也同樣出色。

獲得一個具有一致性的色域的有效方法是,先選擇一種顏色,然後調低色調,增加灰度,以便獲得不同色調但彼此相關的色彩。有種論調認為,在扁平化風格的設計中,元素之間模糊的界限常令用戶感到不知該點擊哪裡。其實只要能恰當地調整色彩,大小和文本就能輕易避免這一點。記住,色彩越明亮,它的主導性就越強。

關於色彩運用你可以借鑑Flat UI Colors 的例子。

恰當的功能可見性

所謂功能可見性(affordance)就是網站上表明某個元素可用於實現某個任務的信號。「點擊此處」就是功能可見性的一個例子。另一個例子是一個用於代表主頁的房屋圖標。

網頁開發者需要在自己的設計中清楚地表現出功能可見性。這也是過去三十年裡一直被網頁開發領域的專業人士所實踐的一個準則。然而在扁平化設計中,網站中的項目一般都需要進行重新設計以便讓非專業人士的用戶也能輕鬆地使用網站。

UI Patterns 列出了功能可見性的許多不同範例。

明確的功能可見性

當網頁上的項目能使任何具備最粗淺的上網技術的人都感到明白無誤的時候,這些項目便具備了明確的功能可見性。例如,一個很大的「點擊此處」圖標會讓用戶產生點擊的衝動。在這兩處場景中運用明確的功能可見性非常重要:一是面對新用戶時,二是採用新的或非常獨特的界面時。

設計者需要幫助對應用程式不熟悉的用戶樹立信心,以便他們能儘快熟悉常用的圖標。而新推出一款app時,即使針對的是經驗豐富的用戶,也要清楚地說明圖標的意義,以便用戶在執行任務時能順利達成目標。設計師還應特別考慮年輕用戶,老年用戶以及生活在網絡尚未完全普及的地區的用戶的需要。當然,總體的設計目標還是要創建合理有序的網頁。

模式化的功能可見性

模式化的功能可見性指的是已被廣泛認可的,能實現特定任務的網頁項目。例如點擊紅心可以將網站加入「我的最愛」列表。一個有下劃線的詞語代表著一個連結,如果你點擊它的話會被轉到別的網站/網頁。模式化的功能可見性可以說是應用最廣泛的一種功能可見性。

隱藏的功能可見性

隱藏的功能可見性是指,只有用戶執行了特定的操作後,項目才會顯示的特性。例如當光標置於其上才會顯示的下拉式目錄。通過這種方式可以隱藏很多導航選項。這是很有必要的,因為網站的上需要顯示的選項太多了,但又不可能同時顯示。

當然這樣所導致的風險就是用戶根本找不到所需的項目。因此在扁平化風格的設計中,最重要的功能永遠在最顯著的位置。而用戶一般也能在短期內便適應這種隱藏式的功能可見性。

錯誤的功能可見性

網頁中充斥著錯誤的功能可見性,提示,指引或模式,他們告訴用戶當點擊或光標懸停在某個元素上時就會產生某個結果,而事實上卻什麼也沒有。有時導致這樣問題的是一個無效連結,有時是設計的疏忽,但更多時候,是由於質量低下的平面設計。這也是導致用戶棄用某款產品的主要原因之一。

借喻式的功能可見性


這個指的主要是圖標的使用。例如,一個印表機的圖標其功能就是指示用戶列印文件。擬物化的圖標是寫實而充滿細節的,而扁平化設計風格的圖標就不是這樣。借喻式的功能可見性只會採用平面的,極簡化的圖像,將一個項目壓縮為易於理解的符號。Dribbble 提供了很多極簡的扁平化設計圖標,設計師可以免費下載使用。

下圖是擬物化設計與扁平化設計圖標的對比。


排版


扁平化設計非常重視簡潔與秩序,它必須通過排版和視覺元素來傳達設計師的心思。

一般來說扁平化設計風格的網站中文字或密集的文字塊很少見,所以設計師處理這些文字內容必須十分用心。有些設計師會說在設計中將無襯線字體用於標題或正文中十分重要。儘管如此,我們還可以更進一步,設法獲得更為清晰的字體。

在扁平化設計中應去除一切非必要的元素。沒有必要在每個標題中都將首字母大寫(Initial Caps)。大寫字母一般用於專有名詞和句子中的第一個單詞中。精於排版的設計師一般都很喜歡隱喻式的功能可見性,因為它與1930年代的設計風潮有某些相似之處。也契合「同型設計」的概念——這原本是一種顯示數據的方法,但它深深地影響了今日的圖標設計。


Class Project Ideas.


Mapping with Isotype

扁平化設計檢查清單

在將你的設計交付給客戶之前,請對照以下表單逐一檢查你的項目,以確認你的設計符合扁平化設計的審美理念:

設計中用於顯示行動按鈕的圖像和圖標足夠簡潔清晰嗎?在每個頁面中,是否有清晰的標題提示本頁面的主要功能頁面中的功能可用性是否足夠清楚且合理?分級是否能清晰展示?你是否將網站的社交選項置於醒目位置?分享到社交媒體的功能是否便捷?

扁平化設計的未來

當蘋果決定放棄擬物化設計的時候,等於同時為所有花哨的網站敲響了警鐘。這些網站看起來越來越過時和粗笨。我覺得蘋果至今仍未能做到全面擁抱平面化設計。iOS 8在某些方面仍顯得不夠簡潔。有趣的是,谷歌仍在繼續鼓勵華麗設計與扁平化設計的結合。例如它仍在使用分層,也許未來的設計師會在自己的設計中加入更多華麗的視覺元素,從而開啟一個新的設計潮流。事實上,今日的扁平化設計風格就源於1920-30年代的設計風格。儘管扁平化設計風格也許不過是另一個「潮流」,但不可否認的是它是一個十分實用的潮流。

設計師和開發者總想為自己的作品打上鮮明的標籤。而扁平化設計則要求設計師嚴格遵循極簡主義的設計原則。在設計中知道如何取捨是一種藝術。但真正貫徹扁平化設計的精髓卻需要意志和勇氣。至今我還未看到扁平化設計有消退的跡象。它如此優雅,簡潔而易用。它是一種純粹而靈活的設計方式。

來源:http://www.instantshift.com/2015/08/06/flat-design-guide/

翻譯:劉海靜

相關焦點

  • 關於扁平化界面風格的設計美學討論
    這是一篇關於視覺方面的小文章,關於扁平化與擬物化風格的討論。有不少朋友來發表各自的看法,說明這確實是大家都蠻關心的設計問題。大家的觀點雖然不同,但都有一定的道理,都能看出發表論調的設計師的思考和激情。有人說了你怎麼這麼沒節操呢,你到底覺得哪種好?
  • 設計經驗分享:扁平化設計的8個Tips
    我此處所談的扁平化指的是一個大的概念,將後面衍生出來所謂的「似扁平化」也包含進來。Tip1:關於高光、漸變和投影網上所說扁平化風的三大要素:去高光、去漸變、去陰影。這麼說是有點絕對了,我認為應該是去掉過渡式高光、過渡式漸變、過渡式陰影。在這篇文章裡,扁平化高光、階梯式漸變以及所謂的長投影是允許的。
  • 扁平化2.0時代!今年六個全新的扁平化設計風格
    隨著扁平化進化到2.0時代,我們再來看看2016年,有哪些是扁平化設計以前從未有的。扁平化2.0的全新細節 為了避免純粹的扁平化設計,一些細微的效果逐漸被運用其中。扁平化歷來被人所詬病的方面即交互不夠明顯,按鈕難以找到等。現在這些問題都可以通過增加一些小小的效果而得以解決。但這些效果的運用也是符合扁平化的簡潔美學的。
  • 如何練習扁平化插畫風景?扁平化風景插畫設計
    如何練習扁平化插畫風景?扁平化風景插畫設計!現如今扁平矢量插畫已經成為廣告行業、網際網路行業等行業內備受追捧的重要視覺素材。在本教程中,我們將以當下流行的扁平插畫風格為創作方向,繪製一幅溫馨、可愛的扁平森林場景插畫。
  • 設計師最愛的扁平化圖標icon合輯
    還記得上周公子教你們做的技術流科技風嗎,最後那個人物圖標我留了個懸念,它是一個扁平化的icon。所以這周的每周開方,公子要分享給你們的就是,我個人一直收藏的幾個扁平化圖標庫!因為扁平化圖標本身就很有設計感,所以有些時候我們根本不需要做其他的設計,單靠幾組圖標就可以撐起一份完整的PPT。
  • 扁平化名片設計PS教程
    要麼請一位設計師幫你設計,要麼下載一些免費名片模版,修改出自己想要的效果。今天的教程非常實用,將會教你利用PS打造簡約、充滿現代感的名片。不過在設計這款名片時,我理念已經有了,因此略過草圖設計流程。如果你在設計名片時毫無靈感,那麼給你推薦一些名牌設計站點: The Design Inspiration, Card Nerd, Card Gala, Cardonizer, Cards Observer,Creattica, Cardview.不妨借鑑一下,有助於你快速開始。這次設計使用了扁平化風格。
  • 關於卡片式設計,你需要知道這4點
    而名片盒書信這種卡片感就更強了,你可以把一封信摺疊起來,方便攜帶,等到需要的時候再伸展開來,進行詳細閱讀。正是人類生活早已充斥著「卡片設計」,所以當我們手中的設備界面有了「卡片式設計」的時候,人們反而覺得使用起來很方便和有熟悉感。而我們現在用的系統界面的卡片式設計來自哪裡呢?
  • 教師資格證考試關於課程分類及其特徵,你還需要知道這些
    課程編制:是依據一定的課程理論,對學校課程進行分析、選擇、設計、實驗、評價的整體過程。學校課程的組成部分(課程計劃、課程標準、教材)都是經過課程編制而產生的,所以說課程編制是實施學校教育的中心環節。2、怎樣選擇和形成學習經驗3、怎樣有效地組織學習經驗4、如何確定這些目標正在實現關於目標模式四個目標經常考選擇題泰勒原理可以概括為:目標、內容
  • 加裡·哈默爾:未來公司架構將是扁平化
    這使得這些人的知識多樣性、通曉領域和時間在作出決定時捉襟見肘。」環境的變化也使得超凡的領導永遠不夠用。馬克思·韋伯曾把伴隨「金字塔」結構而生的官僚主義稱為「人們所知道的、最好的、實現對人專橫控制的辦法。」加裡·哈默爾卻認為,要賦予商業公司以未來,首先便是要將這種「軟性的暴政」用扁平化的組織框架代替。「如果我們希望建立真正具有適應性的公司架構,將權力更為廣泛地下放就是必須的。」晨星公司是近年來興起的、組織扁平化的公司之一。
  • 深度解析 | 關於汽車座椅設計我們需要知道什麼?
    之所以要先設計座椅,是因為確定了駕駛員的坐姿以後,才能根據人體的H點來設計座椅,包括位置、造型、薄厚、可調角度等等。也只有確定了坐姿之後,方向盤、踏板、中控臺、車門等等這些位置才能夠最終確定。這些都是極為專業的內容,需要數據和開發經驗的積累,也需要專業的實驗驗證設施和技術。以中國設計師、工程師目前所掌握的技術和經驗來看,要想完全自主來進行座椅的研發,確實是個比較困難的過程。據說中國目前還沒有自主研發座椅的實力。好了,上面算一個概述,下面我按照不同方向來跟大家聊聊有關座椅設計的那些事兒。
  • Logo設計|標誌不夠抓人?那是你還不懂得設計的「打狗棒法」
    品類:旅遊時間:2019-11-03服務:品牌logo設計導語關於電梯,第一時間你會想到什麼?換句話說,我們需要找到能夠有效傳遞信息的辦法。所謂有效傳遞,即讓接受信息的用戶,可以將信息記下,並將其貯存在自己心靈的深處,在需要的時候,能夠第一時間對其產生聯想,這樣就實現了信息傳播的目的。
  • 圖標風格扁平化 蘋果iOS7概念圖曝光
    圖標風格扁平化 蘋果iOS7概念圖曝光 2013年05月14日 09:19作者:董曉龍編輯:董曉龍文章出處:泡泡網原創   泡泡網手機頻道5月14
  • 關於JK你需要知道這些!
    首先我覺得有版權意識支持原創是一件很好的事情,但是如果你自己都「山正不分」,就不要出來當正義的小警察了好嗎?不過這件事也沒有讓我生氣,就是感覺莫名其妙。現在這些JK圈的小警察不管是在線上還是線下進行一些十分不友善的「執法行為」,這些真的會讓外人看JK圈的笑話。而且也會嚇到一些真正喜歡JK制服的女孩。
  • 「乾貨」你需要知道的插畫設計網站丨優質
    插畫師平時都是逛什麼設計網站呢?有哪些比較實用的插畫設計網站?想必這些問題都是繪畫初學者們比較傷腦筋的問題,那麼到底插畫師一般會逛什麼設計網站?或許當創作枯竭的時候,走訪這些網站,能有所啟發,並激發你的創作靈感。1、Folio英國的一家插畫藝術作品展示網站,位於大英博物館附近的一個工作室,過去40多年的歷史中,與世界上最具影響力的插畫師合作。
  • 最全ui設計圖標解析,圖標概念大揭曉
    後來,人們對這些名詞統一固定譯為「商標」。咳咳~不好意思跑題了,ui設計圖標並不是這樣的!(冷漠臉)圖片來源於網絡其實正確打開方式是這樣的!ico圖標其實是icon file的縮寫形式,它是基於windows而開發的一個圖形格式,大多用於電腦,手機或其它設備中為各種文件,應用程式或快捷方式設置的一種圖形標誌。
  • 你知道火狐瀏覽器LOGO是怎樣煉成的嗎?
    在網際網路時代,人人上網,上網就需要瀏覽器,大家熟悉的瀏覽器要麼就IE、360、谷歌、火狐這些了,對於開發人員人說,用的最多的就谷歌、火狐不過了,今天logofree跟大家分享火狐瀏覽器LOGO是怎樣煉成的?
  • 關於成功轉行,我們還需要知道些什麼?
    在《轉行》這本書中,有兩個大的觀點:1.我們不是只有一個自我,而是有多個自我構成的整體2.成功地轉型,來自對可能性的想像和嘗試關於轉行,我們以前的理解是,一定要有一個清晰的目標,然後一步一步的通過行動靠近它,因為,沒有目標就失去了方向。而找到目標比較靠譜的方法就是職業測評,測測自己什麼個性,也就先了解自己,找到那個真實的自己。
  • 「騰訊課堂大師班」羅子雄:好的設計是宜家和麥當勞
    提到羅子雄,可能很多人的印象還停留在「錘子科技的早期員工」,「Smartisan OS 主要設計者」這些標籤上。但可能很多人並不了解,這個在設計圈內赫赫有名的設計師,涉獵領域涵蓋了室內空間、遊戲 CG、網頁、手機作業系統以及 VR 等多個領域。
  • 關於貓你需要知道的常識
    導語:「關於貓你需要知道的常識」1. 貓,屬於貓科動物,分家貓、野貓,是全世界家庭中較為廣泛的寵物。家貓的祖先據推測是起源於古埃及的沙漠貓,波斯的波斯貓,已經被人類馴化了3500年(未像狗一樣完全地被馴化)。
  • 木工技巧 | 關於木工施膠這些基本知識和小技巧你需要知道
    今天和大家分享一些關於木工施膠的基本知識以及一些操作小技巧,希望對大家的日常作業中有幫助。塗膠量多少是合適膠水的施加量的多少會直接影響膠水的拼接效果,其實我們可以通過膠水在交接面的溢膠情況來觀察。如下圖左側很明顯施膠量太少,膠接效果會不理想。而右側膠縫膠水溢出比較嚴重,雖然粘結效果理想,但原材料浪費嚴重。最佳施膠量的溢膠情況最好能做到下圖中膠縫。