技術(shù)資訊
什么是扁平化網(wǎng)站設(shè)計(jì)風(fēng)格
2014-04-25 22:10:46
網(wǎng)站設(shè)計(jì)經(jīng)過幾十年的發(fā)展,由簡單的文字顯示走到現(xiàn)在豐富的圖文和動(dòng)畫顯示,而正是這種滿屏的圖片和花俏的修飾,讓網(wǎng)頁的實(shí)用的本質(zhì)越來越少。而就在這種花俏的修飾達(dá)到一定程度后,扁平化設(shè)計(jì)就出現(xiàn)了,扁平化的特點(diǎn)就是摒棄了這些花哨和過度的修飾,讓頁面返璞歸真。
因此,扁平化設(shè)計(jì),對于過度設(shè)計(jì)來說是一種進(jìn)步,甚至可以說是一次革命。過度設(shè)計(jì)來源于這樣一種心態(tài):一些設(shè)計(jì)師為了吸引網(wǎng)站的訪客并且保持訪客的興趣。結(jié)果就是,他們會(huì)將各種花哨的(盡管不一定是有用的)東西放到網(wǎng)站上去,如華麗的動(dòng)畫和插圖。
簡而言之,扁平化設(shè)計(jì)可以總結(jié)為一個(gè)眾所周知的原則K.I.S.S,即“keep it simple,stupid。”
有些被稱作扁平化設(shè)計(jì)的對用戶來說很友好,那是因?yàn)樗麄兪且杂脩魹橹行牡?,使用這種設(shè)計(jì)方法時(shí)用戶是第一位的和最重要的。
曾經(jīng),skeuomorphic設(shè)計(jì)正是這么做的,他們把現(xiàn)實(shí)生活的熟悉的畫面搬到界面上,采用仿真的陰影形成更多的噱頭,以及假亂真的紋理,甚至于使用真正物體。
扁平化設(shè)計(jì)基礎(chǔ)
簡約和簡單可以用來描述扁平化設(shè)計(jì)的特性,這意味著它很自然地促進(jìn)可用性。它具有鮮明的色彩,清晰的邊緣,開放空間,干凈,當(dāng)然,二維或平面化的插圖。它是指任何過度設(shè)計(jì)以外的東西。
windows 8,微軟最新發(fā)布的操作系統(tǒng),是扁平化設(shè)計(jì)的基本例子。
微 軟應(yīng)該說是大力使用這種風(fēng)格最早的公司之一。顯然,這可以被看作是最近已經(jīng)遭到非議的蘋果過度使用擬物化設(shè)計(jì)的一個(gè)回應(yīng)。你會(huì)注意到,從上面 windows 8的例子中,扁平化設(shè)計(jì)強(qiáng)調(diào)了基本的,像圖標(biāo)一樣的圖形設(shè)計(jì),而不是把真實(shí)世界的物體變小一點(diǎn)或者使用仿真的圖形。這意味著扁平化設(shè)計(jì)使得真實(shí)的世界和科 技世界之間產(chǎn)生更大的鴻溝。
摒棄圖層效果
扁平化設(shè)計(jì)的名稱來源于它使用2維度的設(shè)計(jì)方法和平面化的設(shè)計(jì)元素,這意味這它不會(huì)過度設(shè)計(jì)。同時(shí)也意味著不會(huì)有倒角,投影,漸變或者其他更多的效果應(yīng)用到一個(gè)圖層上去??纯茨切┦褂帽馄交O(shè)計(jì)的網(wǎng)頁框或者元素:它們只有清晰的邊緣而沒有什么投影。
看看triplagent,它全面詮釋了這些特點(diǎn)。
扁平化設(shè)計(jì)之所以成功,因?yàn)樗匀皇欠浅*?dú)特的,而且它不必使用過分夸張的花招吸引網(wǎng)站訪問者。在外觀和元素排布上,它是組織良好層次清楚的,所以這個(gè)網(wǎng)站對用戶來說是非常易于交互的。
色彩是讓人難忘的要素
花一點(diǎn)時(shí)間去看看一些扁平化設(shè)計(jì)的網(wǎng)頁,你會(huì)馬上發(fā)現(xiàn),他們使用的色彩比那些非扁平化設(shè)計(jì)的網(wǎng)頁更加明亮和充滿活力。在如此的聚焦于簡潔之后,
扁平化設(shè)計(jì)給予網(wǎng)頁色彩這樣的基本設(shè)計(jì)元素以更加散發(fā)光彩的機(jī)會(huì)。
扁平化設(shè)計(jì)可以溯源到調(diào)色板的使用。除了更加充滿活力,他們通常使用更多的顏色。例如,傳統(tǒng)的色板通常使用2-3種顏色,扁平化設(shè)計(jì)可以使用多達(dá)8種顏色。
在基本色和輔助色已經(jīng)是很流行的常見色的情況下,多色相即使沒有什么多余的 元素就已經(jīng)是充滿活力的。至于現(xiàn)在,有些顏色似乎比其他的顏色更受歡迎:復(fù)古的顏色(藍(lán)色,綠色,紫色,橙色)
這些顏色在扁平化設(shè)計(jì)的網(wǎng)站上已經(jīng)都非常常見。在Wistia的網(wǎng)站上,你可以清楚的看見所有這些方面,色彩是無縫銜接在一起的。
排版是重點(diǎn)
毫不奇怪的是,由于沒有多余元素的存在和干擾,排版的重要性被顯得更加突出。在扁平化設(shè)計(jì)中,排版以前從未被作為一個(gè)設(shè)計(jì)元素顯得這么重要過,也許因?yàn)橛脩舻难劬^少為這方面分心。
文字的風(fēng)格和扁平化設(shè)計(jì)的外在表現(xiàn)需要是和諧共存的,一個(gè)花哨的字體會(huì)和其他簡單的設(shè)計(jì)元素形成鮮明的對比。同樣需要強(qiáng)調(diào)的是字體的簡潔大方。一個(gè)成功的扁平化設(shè)計(jì)的靠譜的選擇是sans serif這種字體??梢詫⒁粋€(gè)高度創(chuàng)造性的字體作為一種藝術(shù)元素與極簡主義保持和諧,這樣做也許不會(huì)讓用戶覺得很夸張。但是,請不要做的過火。
平面設(shè)計(jì)中的字體必須教會(huì)用戶學(xué)會(huì)如何獲得最大的設(shè)計(jì)收益。因此,在網(wǎng)頁上的元素和按鈕應(yīng)該顯得易用和易于交互。
下面是平面設(shè)計(jì)的一個(gè)很好的例子。這是Flatmate,一個(gè)瑞典的公司。
扁平化設(shè)計(jì)是一次變革
總而言之,扁平化設(shè)計(jì)應(yīng)該是對一些設(shè)計(jì)者在過去幾年里過度裝飾的反抗。這應(yīng)該是一個(gè)很好的進(jìn)步,因?yàn)楹芏嗑W(wǎng)站都是過度的裝飾著動(dòng)畫和插圖。
而這些對用戶體驗(yàn)來說是毫無用處的。扁平化設(shè)計(jì)給網(wǎng)站的設(shè)計(jì)帶來的簡潔之美,雖然它仍然在尋找更好的視覺表現(xiàn)以及怎樣才能給用戶帶來更好的體驗(yàn)的的方法。
最后,你覺得扁平化設(shè)計(jì)是怎樣的?現(xiàn)在到了扁平化設(shè)計(jì)的時(shí)代了么,還是只是暫時(shí)對擬物化的過度設(shè)計(jì)的一個(gè)回應(yīng)?你是否喜愛扁平化設(shè)計(jì)超過了擬物化設(shè)計(jì)?
擬物化設(shè)計(jì):正好相反
如果你仍然不清楚扁平化設(shè)計(jì)是什么,那么就看看和它相反的設(shè)計(jì)手法:擬物化設(shè)計(jì);這是個(gè)很好的辦法將兩者區(qū)分開來?;緛碚f,擬物化設(shè)計(jì)的特點(diǎn)是通過把真實(shí)世界的觸覺和物理感受和網(wǎng)站設(shè)計(jì)結(jié)合起來。
例如:Find my friends的設(shè)計(jì),它是蘋果公司設(shè)計(jì)的一個(gè)應(yīng)用,它可以讓用戶發(fā)現(xiàn)其他用戶和跟蹤他們的IOS設(shè)備,看看它在主界面上那仿皮革制品的紋理的界面,是擬物化設(shè)計(jì)的絕佳例子。
有些人認(rèn)為擬物化設(shè)計(jì)失寵了。這是因?yàn)樘O果在推廣ios操作系統(tǒng)的時(shí)候也推廣了這種設(shè)計(jì),而當(dāng)前,他們也要摒棄擬物化設(shè)計(jì)了,這應(yīng)該主要是
因?yàn)橥瞥邕@種設(shè)計(jì)的前蘋果的高級副總裁 Scott Forstall離職了。
如果在青島網(wǎng)站建設(shè)中要做到扁平化設(shè)計(jì),就需要基于這樣的設(shè)計(jì)原則:設(shè)計(jì)應(yīng)該是簡潔的,讓頁面內(nèi)容返璞歸真。
近期更新
- [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è)計(jì)開發(fā)——移動(dòng)端傳播利器
- [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è)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2012-09-07 13:45:45] 網(wǎng)頁的面包屑導(dǎo)航
- [2012-05-10 22:26:24] dede批量增加文檔翻頁
- [2018-06-04 20:53:05] ueditor源代碼模式居左
- [2014-11-08 22:41:32] 網(wǎng)頁設(shè)計(jì)中應(yīng)急小技巧你會(huì)幾個(gè)?
- [2011-10-05 10:08:41] dede與新浪Xweibo 騰信Iweibo 記事狗微博整合 進(jìn)行ucenter通信
- [2016-12-02 16:33:00] 告別刻板沉悶,青島網(wǎng)站制作教您校園網(wǎng)站建設(shè)新思路
- [2011-11-05 21:28:33] seo一定要膽子大,要敢于實(shí)踐,要拿的起放的下!
- [2012-08-30 18:21:00] 簡潔的網(wǎng)站設(shè)計(jì)細(xì)節(jié)
- [2014-10-06 09:11:40] 網(wǎng)頁設(shè)計(jì)靈感的起源地
- [2015-03-09 09:28:29] 進(jìn)一步優(yōu)化網(wǎng)站,減少百度降權(quán)!
- [2014-12-18 09:16:13] 網(wǎng)站設(shè)計(jì)可用性的重要之處
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
網(wǎng)站SEO 網(wǎng)站設(shè)計(jì)資訊 網(wǎng)站推廣 高端網(wǎng)站設(shè)計(jì) 新的元素 良好的導(dǎo)航 網(wǎng)站策劃 插畫 營銷型網(wǎng)站建設(shè) 網(wǎng)站品牌 官網(wǎng)網(wǎng)站建設(shè) 青島開發(fā)區(qū)建站公司 robots 互聯(lián)網(wǎng) 版面布局 搜索引擎蜘蛛 搜索引擎 膠南網(wǎng)站建設(shè)公司 企業(yè)建站 網(wǎng)站動(dòng)畫 青島網(wǎng)站制作 青島網(wǎng)站優(yōu)化 網(wǎng)站設(shè)計(jì)趨勢 高端輪胎網(wǎng)站設(shè)計(jì) 青島好的網(wǎng)站優(yōu)化公司 網(wǎng)站建設(shè)的步驟有哪些 手機(jī)網(wǎng)站 SEO 青島網(wǎng)站案例 H5定制設(shè)計(jì)