技術(shù)資訊
扁平化網(wǎng)站設(shè)計的特點是什么
2015-06-23 21:59:38
如果對扁平化概念有點模糊的話,這樣描述也許更容易理解:很多雜志和期刊其實就是扁平化的設(shè)計,扁平化代表簡潔、實用,沒有過多的修飾,所以這幾年大眾越來越接受扁平化設(shè)計。
扁平化設(shè)計的特點是十分鮮明的,國外設(shè)計師Carrie Cousins在網(wǎng)站上介紹了扁平化的五個特點,下面看看扁平化設(shè)計(Flat Design)的五個特點:
特點二、界面元素
扁平化設(shè)計通常采用許多簡單的用戶界面元素,諸如按鈕或者圖標之類。設(shè)計師們通常堅持使用簡單的外形(矩形或者圓形),并且盡量突出外形,這些元素一律為直角(極少的一些為圓角)。這些用戶界面元素方便用戶點擊,這能極大的減少用戶學(xué)習新交互方式的成本,因為用戶憑經(jīng)驗就能大概知道每個按鈕的作用。
此外,扁平化除了簡單的形狀之外,還包括大膽的配色。但是需要注意的是,扁平化設(shè)計不是說簡單的搞些形狀和顏色搭配起來就行,它和其他設(shè)計風格一樣,是由許多的概念與方法組成的。
扁平化設(shè)計采用簡單的用戶界面
特點一、拒絕特效
扁平化設(shè)計概念最核心的地方就是放棄一切裝飾效果,諸如陰影、透視、紋理、漸變等等能做出 3D 效果的元素一概不用。所有的元素的邊界都干凈俐落,沒有任何羽化、漸變或者陰影。這一設(shè)計趨勢極力避免任何擬物化設(shè)計的元素,這導(dǎo)致這一設(shè)計風格在其它平臺有時候顯得突兀,前景圖片、按鈕、文本和導(dǎo)航欄與背景圖片格格不入,各成一派。
因為這種設(shè)計有著鮮明的視覺效果,它所使用的元素之間有清晰的層次和布局,這使得用戶能直觀的了解每個元素的作用以及交互方式。如今從網(wǎng)頁到手機應(yīng)用無不在使用扁平化的設(shè)計風格,尤其在手機上,因為屏幕的限制,使得這一風格在用戶體驗上更有優(yōu)勢,更少的按鈕和選項使得界面干凈整齊,使用起來格外簡單。
扁平化設(shè)計拒絕特效
特點三、優(yōu)化排版
由于扁平化設(shè)計的使用特別簡單的元素,排版就成了很重要的一環(huán),排版好壞直接影響視覺效果,甚至可能間接影響用戶體驗。
字體是排版中很重要的一部分,和其他元素相輔相成。想想看,一款花體字在扁平化的界面里得有多突兀。下圖是一些扁平化網(wǎng)站使用無襯線字體的例子。無襯線字體家族龐大分之眾多,其中有些字體會在特殊的情景下會有意想不到的效果。但注意,過猶不及,不要使用那些極為生僻的字體,因為保不齊它就把你帶進坑里了。
扁平化設(shè)計及其重視排版
扁平化設(shè)計及其重視排版
扁平化設(shè)計及其重視排版
特點五、最簡方案
設(shè)計師要盡量簡化自己的設(shè)計方案,避免不必要的元素在設(shè)計中出現(xiàn)。簡單的顏色和字體就足夠了,如果你還想添加點什么,盡量選擇簡單的圖案。扁平化設(shè)計尤其對一些做零售的網(wǎng)站幫助巨大,它能很有效的把商品組織起來,以簡單但合理方式排列。
扁平化設(shè)計采用最簡方案
特點四、慣用明亮配色
扁平化設(shè)計中,配色貌似是最重要的一環(huán),扁平化設(shè)計通常采用比其他風格更明亮、炫麗的顏色。同時,扁平化設(shè)計中的配色還意味著更多的色調(diào)。比如,其他設(shè)計最多只包含兩三種主要顏色,但是扁平化設(shè)計中會平均使用六到八種。
而且扁平化設(shè)計中,往往傾向于使用單色調(diào),尤其是純色,并且不做任何淡化或柔化處理(最受歡迎的顏色是純色和二次色)。另外還有一些顏色也挺受歡迎,如復(fù)古色(淺橙、紫色、綠色、藍色等)。
扁平化設(shè)計慣用明亮配色
扁平化設(shè)計的未來
沒有人有能夠預(yù)測未來的水晶球,所以我們幾乎可以說,扁平化設(shè)計最終也還是會消失的,會被別的設(shè)計風格取代。但是設(shè)計師們會不斷的計劃和嘗試,并最終將它進化到一個新的風格。其實谷歌公司現(xiàn)在正在嘗試將它和傳統(tǒng)的Rich Design進行結(jié)合,以充分發(fā)揮二者各自的特點。總之,設(shè)計行業(yè)永遠處于變化之中,扁平化設(shè)計絕不會是設(shè)計師心中永遠的“寵兒”!
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2011-11-05 23:02:49] 讓網(wǎng)站外鏈在你睡著的時候也能自動增加的方法
- [2014-11-28 21:51:04] 網(wǎng)站優(yōu)化的外鏈應(yīng)該怎么發(fā)
- [2011-10-27 22:12:15] 網(wǎng)站關(guān)鍵詞間隔符號用什么好?
- [2014-12-29 19:45:10] 被稱為網(wǎng)站中的小王子—20歲CEO
- [2014-07-17 13:26:01] dede 產(chǎn)品列表頁 總有一個空白 的問題
- [2014-12-15 09:27:04] 如何分析百度怎么抓取網(wǎng)站內(nèi)容
- [2014-02-23 22:48:40] 青島高端網(wǎng)站設(shè)計公司
- [2015-03-12 09:32:55] 制作網(wǎng)站應(yīng)選擇什么語言最安全
- [2015-06-01 21:45:01] 分享一個多個變量的sql語句
- [2014-12-06 13:44:42] 扁平化網(wǎng)頁設(shè)計的顏色搭配使用
- [2015-01-27 10:16:35] 網(wǎng)站發(fā)布軟文更容易被收錄技巧?
- [2014-01-10 00:16:32] 如何在DEDE列表頁中調(diào)用下載地址(已解決)
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
色彩心理學(xué) 插畫 青島輪胎網(wǎng)站設(shè)計 空白和簡潔的設(shè)計 外貿(mào)網(wǎng)站設(shè)計 網(wǎng)站建設(shè),手機網(wǎng)站 企業(yè)網(wǎng)站設(shè)計 高端輪胎網(wǎng)站設(shè)計 外貿(mào)網(wǎng)站建設(shè) H5 網(wǎng)站設(shè)計趨勢 robots 營銷型網(wǎng)站 網(wǎng)站交互設(shè)計 青島flash網(wǎng)站 SEO 營銷策略 青島網(wǎng)站案例 新的元素 微網(wǎng)站 企業(yè)建站 H5定制設(shè)計 視覺靈感 青島不錯的英文網(wǎng)站建設(shè)公司 網(wǎng)站推廣 力圖數(shù)字科技 集團公司網(wǎng)站建設(shè) 力圖 css 青島網(wǎng)站營銷