• 關於App情報誌

Logo

Navigation
  • 情報焦點
    • 新聞情報
    • 專題報導
    • 活動情報
    • ChinaJoy
    • WMGC
  • 限時免費
    • iOS 限免
    • Android 限免
    • WP 限免
  • 娛樂生活
    • Lets App
    • 街頭直擊
    • Fun 創作
  • 評測
    • 科技潮物
    • 軟體評測
    • 遊戲評測
    • 配件
  • 專欄
    • 名人專訪
    • 達人觀點
    • 實用技巧
  • iOS
    • iOS 新聞
    • iOS 軟體
    • iOS 遊戲
    • iOS 技巧
    • iOS 硬體週邊
  • Android
    • Android 新聞
    • Android 軟體
    • Android 遊戲
    • Android 技巧
  • WP
    • Windows Phone 新聞
    • Windows Phone 軟體
  • 影音
    • App Star
    • App Fun 影音
  • 遊戲
  • 手遊專區
    • 暗黑黎明
    • 一國兩國三國誌

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

By 雷鋒網 | on 2015-07-14 | 0 則留言
新聞情報

扁平化的浪潮似乎在一夜之間席捲了設計界,但其實扁平化並不是什麼新鮮事物。對於網站設計而言,扁平化設計實用且好用。扁平化設計2.0中平衡了實用性與美觀性,其背後的設計哲學使其擁有長久的生命力。

扁平化改變了什麼?究竟有什麼魔力?讓我們揭開扁平化設計的神秘面紗,看看其卓越之處,分析其技術核心,並探討哪些技術將薪火相傳。

當我們在談論「扁平化」的時候,我們在談論什麼?

扁平化設計最早可追溯到瑞士極簡設計風格(也叫國際主義平面設計風格),扁平化設計在保留了舊有樣式的同時又創造出了新的東西。把扁平化設計的五個元素剝離出來,從這五方面我們可以看出扁平化的真正奧義。

1. 長陰影

在按鍵等大多數UI 設計元素中,長陰影常常伴隨亮色調的元件出現。

陰影常常比較寬,且以45 度角傾斜,鋒利的邊角使其一眼可辨。對陰影恰到好處的應用可以起強調作用並使扁平的圖標更具立體感。

然而,這種長陰影有逐漸被淡雅的陰影取代的趨勢。拭目以待更短的陰影效果在未來的表現。

 

2. 亮色調

有趣的是,扁平化設計的出現使得大膽靚麗的色彩運用得以重生。設計師們比以前更多地運用了有趣又充滿活力的顏色。

事實上,一些設計師們甚至建立了專門的網站用以展示他們獨特的配色方案。

 

3. 簡化排版

說到排版,扁平化的排版不僅僅是把字體替換成無框線的Helvetica或黑體。

當然,扁平化的排版應採用簡單易讀的字體,這意味著無框線和等寬字體稱為必然選擇。最好的字體應該讓人將注意力集中到內容本身。

儘管字體設計也是藝術的一種,設計師們應該把可讀性放在第一位。扁平化設計使設計師們更加註重字體的選擇。甚至框線字體也被簡化。

4. 虛擬按鍵

透明且可點擊的虛擬按鍵,在提供了可視化的交互方塊的同時又不會遮擋住UI 設計。

虛擬按鍵由於透明,簡潔的特性,並不會吸引太多注意力。起初,虛擬按鍵以擬物設計革命者的姿態出現,其後在形狀與細節等方面有了長足的進步。虛擬按鍵與扁平化設計相輔相成,構成了極簡與抽象的設計風格。

5. 極簡與抽象

扁平化設計天生就是極簡的。當設計的靈感並非來源於現實生活,擬物化的設計質感就理所應當被拋棄。

那麼,剩下的就是用顏色,漸變,陰影,形狀,和其他視覺細微之處的框架內容。扁平設計在本質上,迫使設計師更具創造性—— 設計服務於內容呈現,而不是真實感的呈現。

極簡主義的概念並不新鮮,但它因其潔淨美觀和網站的性能優勢(如降低網頁加載時間)最近又開始流行。這隨著扁平化設計重生,並使用了鮮豔的背景,簡單的設計,並演變成大量留白的更簡單的設計。

展望

扁平化設計最初的概念是用一個個沒有特徵且清晰可辨的方塊呈現設計框架。但在與其他流行的設計語言融合之後,扁平化設計本身已經發生了巨大改變。

扁平化設計一夜之間成為業界潮流,但它的發展成熟無疑還需要一些時日。扁平化設計的早期形式非常激進的想要做出與擬物化渭涇分明的極簡設計,但現在的扁平化設計逐漸加上了修飾與質感。

讓我們看看出自設計師Ryan Allen的近乎扁平化設計(Almost Flat)或稱扁平化設計2.0。

大多數精美的近乎扁平化設計設計運用在網頁領域,運用“視差滾動”可以在一個螢幕中顯示豐富的內容。

Canal TP 公司運用如字體與色調等簡單的特色,與動畫加上視差滾動相結合,使兩種範式偉大結合。這種搭配有助於消除過分簡單的扁平化帶來的副作用,使其更實用且適用於內容複雜的站點。

扁平化設計不會過快消失,只是會增加動畫與交互設計,以適應更加複雜的網站。眾所周知,“設計追隨內容”,扁平化則是呈現內容的最佳設計範式。

網頁設計以實用為第一追求,每一個按鍵,點擊與滑動都應該有明確功能與視覺反饋。最重要的是,UI 元件需要有統一的風格,讓用戶忽略頁面與設備的差異。這些基礎元件將被提取出各自特點構成扁平化的圖標。

看看「漢堡包式菜單按鈕」的出現——無論你是否同意這種做法,無疑,現在其已經成為司空見慣的導航符號。

扁平化設計也在漸漸加入其他細節。

許多扁平化設計或近乎扁平化設計的網站包含大量圖片,這在傳統網站上是很少見的。扁平化的配色及排版與圖片完美結合,這不需要對圖片有太多修飾就可以獲得現代化的風格。

比如,有些網站運用近乎扁平化設計設計風格,在網頁中採用深色背景圖片,扁平化的按鈕,導航及字體,令網站非常直觀簡潔,現代且易用。正如設計師Wells Riley所建議的,經常審視你設計的實用性與易用性。美感只是設計的另一個維度,真正目的是解決用戶需求。

後記

扁平化設計實際上並沒有公認的量化標準。它作為設計元素的一種可以運用在各種更高層次的設計體系之中。將扁平化的設計元素嵌入各種設計之中常常有意想不到的驚喜,例如一個有過多內容的網站,可以適當運用扁平化設計元素以適應傳統的平面設計方案。

 

通過TNW

本文章獲雷峰網授權使用,原文連結請點此:雷峰網

到APP情報誌 Facebook 粉絲團、Google+ 專頁找我們玩 ! 

 

分享這篇文章:
  • tweet

標籤: Material designui設計平面設計扁平化扁平化設計

最新文章

  • 1/ 6 iOS 限時免費軟體推薦

    2017-01-06 - 0 則留言
  • 12/13 iOS 限時免費軟體推薦

    2016-12-13 - 0 則留言
  • Ubisoft30週年,《刺客教條3》讓你免費下載玩啦!

    2016-12-08 - 0 則留言

相關文章

  • Firefox 40 推出為 Windows 10 量身打造的極簡大視野

    2015-08-13 - 0 則留言
  • 選擇你喜愛的顏色,線上產生 Material Design 風格配色建議

    2015-07-09 - 0 則留言
  • WhatsApp全新改版,扁平化設計風格誕生

    2015-04-17 - 0 則留言

關於作者

雷鋒網

雷鋒網由一群移動互聯網的信徒建立,他們中有投資人,有觀察者,有產品經理,有資深玩家,還有創業者。我們將客觀敏鋭地記錄移動互聯網的每一天。

Comments are closed.
熱門關鍵字:限時免費App   App Star

隨時追蹤最新App情報

訂閱 Feedly

follow us in feedly
  • 新功能,把FB上喜歡的文章存起來吧!

    2014-08-14 - 1 則留言
  • 受保護的文章:解救一個人的情人節,《賴在一起》新朋友一把抓

    2012-02-17 - 0 則留言
  • 打造自己的時尚品味 – Adam LifeStar Lightning 傳輸線開箱

    2012-07-14 - 0 則留言
  • 受保護的文章:超堅固 ! OZAKI O!tool T-Cable Lightning 蘋果官方授權 (MFI) 傳輸線 / 充電線開箱

    2012-07-20 - 0 則留言
  • 受保護的文章:迷你琴鍵暢彈遊戲無限,「Ozaki TAPiano」藍芽鋼琴遊戲控制器

    2012-07-24 - 0 則留言
  • 乘著海嘯而來的App遊戲

    2012-10-13 - 0 則留言
  • LINE全球用戶破2億

    2013-08-01 - 0 則留言
  • 用行動裝置看漫畫成趨勢

    2013-08-01 - 0 則留言

App情報誌

關於App情報誌

《APP情報誌》開放徵稿,歡迎投稿:[email protected]

評測合作、廣告宣傳、開箱文合作、媒體採訪,請洽:[email protected]


瞭解更多
(NEW)

隨時追蹤最新APP情報

熱門類別

‧ 情報焦點
‧ 限時免費
‧ 專欄
‧ 影音
‧ iOS
‧ Android
‧ Windows Phone
  • 關於App情報誌
  • 個資保護聲明
  • 聯絡App情報誌
© 2014. Appshooting Inc. All rights Reserved.