首頁 > 網頁教程 > 設計分享 > 什么是扁平設計?如何創建扁平化設計風格?

什么是扁平設計?如何創建扁平化設計風格?

時間:2013-09-15    來源:oschina

扁平化設計或者說扁平化的UI風格,是今年最受關注的一個web和平面設計的發展趨勢。而經常被拿來與扁平化做比較的是擬物化設計,兩者的設計原則和設計風格完全相反。

設計師們或許會有疑惑,這究竟是一種能持續下去的設計趨勢呢?還是只能是風行一時,曇花一現。暫且不談未來和不管這些反對的聲音,大多數設計師還是很想在自己的工作中嘗試使用這一設計趨勢。在這里,我們將深入了解什么是扁平化風格,追蹤扁平化設計的歷史根源,并介紹如何開始我們的扁平化設計。

在開始之前我必須給讀者們一個提醒或者說警告:扁平化設計,可以用來設計非常漂亮而又簡單的界面,但它不一定適合每一個項目。請用心想想你到底想實現什么樣的視覺效果,你到底想要向用戶傳達什么。

什么是扁平設計?

顧名思義,扁平設計是根據平面的樣式來定義的:通過移除額外的元素比如陰影,斜邊,紋理和創建3D樣式的梯度等等來簡化界面。

這個想法用來創建一個完成好的圖案,它只在二維空間上存在,沒有遺棄任何"常規"界面提供的功能。扁平設計給設計師帶來了一個新的挑戰,因為去掉界面的裝飾和效果,就很難在設計中定義主要行為和元素。

扁平設計源于希望創建更多的數字化界面,在數碼設備上為界面改革創建更多開放的畫布。在這里有一些很有名的MAC圖標在自身的基礎上被重新繪制為扁平版本。你可以很容易地看到圖標是如何維持他們的樣式和形狀,盡管它們去掉了一些細節,陰影和紋理。

扁平化設計的演變

歷史地看,設計的趨勢像風格的趨勢一樣在復雜和簡單之間不斷地搖擺。這在可視化設計領域,尤其是web和多媒體界面設計領域表現地更加明顯,在這個領域里設計持續地更加短暫,而且不像傳統的印刷設計那樣持久。

術語"扁平化設計"是由Allan Grinshtein在設計者的版本控制系統 LayerVault中創造和推廣的。Allan說"優雅的界面是用最少的元素達到最佳的效果的界面"。這個理念是與更多修飾、更復雜的界面相比用最簡化的界面更適合于界面的功能。社團在去年一直用仿真界面炮轟這個理念的基礎上采納了這個理念。

從那時起,扁平化設計得到了快速成長。大多數扁平化設計模式具有五個特征-不添加效果、簡單的設計和UI元素,注重字體、注重色彩和總體最小化設計。你還可能需要下載 扁平化UI免費界面工具箱

扁平化設計與微軟

扁平化設計的最大玩家并且第一個把扁平化設計風格帶到一線的是微軟。2006年,微軟啟動了Zune音樂播放器。它非常昂貴、而且把DRM應用到音樂文件,不過它是一次商業失敗。然而即使Zune商業方面沒有成功,它也是確定后續幾年微軟設計的第一步。Zune的界面非常簡潔,并且是注重輕量和大的字體、沒有多余的細節和元素的界面。

從2006年到今天,微軟已經用Zune做為基礎開發了圖像和可視化界面,使它們更明晰化和更扁平化。微軟的其他產品也受到這種風格影響,比如Xbox 360面板,使用了簡單的圖標和排版的基于矩形的界面。Windows 8的"Metro UI"可能是微軟最大的界面修改之一。它的簡單幾何界面不久在Windows Phone 7,即比Windows 8 界面更小的和移動版本上得到了復制。

怎樣創建一個扁平設計? 按鈕

當使用邊框,梯度和下陰影來創建一個按鈕,就是使得這些元素在背景與內容中很顯眼。這使按鈕很好辨認為一個可以點擊的元素。

當創建一個扁平的按鈕,你就不能應用這些細節,所以我們的焦點應該放在布局的組織和顏色的差異上。當然,你只要你能保持按鈕的扁平外觀,你也可以使用斜邊和陰影,但是你會想使這些控件變得盡可能的簡潔。

表格

在扁平設計里,表格是一個關鍵的元素。文本區域,輸入欄和下拉欄都不能按照它們默認的做法插入陰影。如果你想完全地控制這些元素,你可以使用一個支持主題的插件,比如uniformjs并應用你想要的主題樣式,甚至可以自己創建一些主題。

字體

字體是扁平化設計里非常重要的元素。由于界面更加簡潔,你可以使用字體幫你創建你期望的風格和基調。你可以對扁平化設計的框架只使用定制的并且特定的字體來設置基調。由于背景簡單,字體就會突出并且本身就設置了風格。

色彩

設計界面的基礎之一是定義調色板。扁平化界面設計所采用的色彩的模式與其他調色板相比傾向于更加醒目和更加明亮。扁平化UI色彩在思想上就是用這樣的理念開發的,而且是下載今天扁平化設計里所用的某些最佳(和最流行)的色彩的好去處。

當你選擇好調色板后,記住要想想色彩是怎樣幫助用戶對整個站點進行導航的。確保給站點的主要動作指定色彩:比如"提交"、"發送"、"更多"等按鈕都應當是同一個色彩。理想情況下鮮明的色彩與背景形成了鮮明的對比。如果你的徽標或者商標采用主色的話,那么它應當是主要控制所使用的哪個色彩。不要自始至終過分的使用它,否則你將冒著在用戶眼里這個色彩不太重要的風險。

你還應該選擇按鈕的輔助色彩,通常是淺灰色。這樣的話你可以把兩個按鈕排成一行,例如"提交"和"取消","提交"作為主要動作而"取消"是輔助動作。在扁平化設計里色彩的選擇尤其重要,因為當你使用扁平化按鈕的時候,色彩將是幫助用戶識別彼此的主要手段之一。

相關推薦
分析用戶界面中扁平化設計的優缺點
另眼觀看用戶界面扁平化設計的不足之外
扁平化風格的網頁設計案例欣賞
21個扁平化設計的動態創意鏈接交互樣式欣賞
換湯不換藥?看應用們如何“為iOS 7設計”
網頁設計中如何運用圓形的搭配 讓網頁更出彩
界面設計教程:如何做好扁平化設計之交互篇
扁平化設計的前世今生:靈感或來自瑞士風格
扁平化:回歸真實的設計
網頁設計分享:如何預知未來的大勢所趨?
設計完美極簡風格網站的六個步驟分享
年度最佳!20個最優秀的網頁設計案例欣賞
網頁設計師必看:2015全球網站設計趨勢推薦
扁平化設計與Material Design區別在哪里?
關于扁平化設計的五個要素
網頁教程:扁平化設計的步驟和要點
扁平化設計的六點優勢分析
進化中的扁平化設計還能玩出什么花樣?
24款響應式和扁平化設計的后臺管理界面欣賞
最新Web設計8個趨勢:視差滾動 響應式設計等
Web設計師如何創建適合Retina顯屏設備的圖片教程
10個漂亮實用并附帶源碼的Web設計教程分享
2014年Web網頁設計的10大發展趨勢前瞻
最新的七個WEB設計趨勢及其生存技巧預測
網頁教程:響應式Web設計的9項基本原則
展望未來成為主流的Web設計七大趨勢
網頁設計已死?如何看待近幾年網頁設計發展前途?
Web后臺設計易被忽視的組件技巧
Web頁面中的表格設計如何才能做得更好?
高用戶體驗的表單設計該怎么做?
電商產品設計感想:你真的認識購物車嗎?
交互設計:利用控制感,為用戶體驗加分
如何創建最佳的移動設計?七個用戶體驗設計小Tip
移動端詳情頁設計:排版 構圖 色彩 氛圍點綴 字體怎么做?
20個精致漂亮的視頻播放器界面設計欣賞及點評
視覺設計:頁面構建的審圖與細節

精彩推薦

熱門教程

北京pk10走势图下载 股票质押 吉林新快三玩法技巧 世界杯赌球如何买赚钱 爱彩网浙江11选5 福彩中心3d342期开机号 如何精准定位到赚钱的项目 新版的内蒙古十一选五 福彩3d坐标走势图分析 516棋牌游戏a 极速十一选五现场开奖 3d独胆组六 大富豪电玩城下载二维码