傲嬌的扁平化設計的進擊之旅:與時俱進,勇於創新
開搶瞭!雙11創業者優選服務!
在過去的幾年裡,扁平化設計以其簡約的畫面、整潔的佈局、流暢的加載速度、響應式設計等眾多優勢俘虜瞭一大批粉絲,正逐漸成為網站設計趨勢的主流。這種設計趨勢為什麼能極短的時間內迅速發展壯大?除瞭以上這些優點,還有一項十分重要的因素,那就是扁平化設計一直與時俱進,不斷克服自身的弊端,努力跟上時代的步伐,滿足用戶的需求。早期的扁平化設計強調放棄一切裝飾效果如陰影、漸變、紋理等,重點突出信息本身,這使得網站的視覺效果很是單調,網站的配色方案也比較單一,但在後期發展過程中,扁平化設計開始突破原有的局限性,積極吸納一些新的、有用的設計元素,有關扁平化設計方面的想法和概念不斷豐富,扁平化設計也開始出現新的類型和分支。在今天,扁平化設計的呈現方式多種多樣,不管你想做一個什麼樣的網站,總有幾款扁平化設計能讓你傾心。今天小飛就帶您看一下扁平化設計的發展歷程以及一些實例,快來一起感受扁平化設計的進擊之旅吧!
早期的扁平化設計 V1.0
在扁平化設計出現以前,人們一直很喜歡擬物化設計,通過逼真的紋理、多樣的漸變以及復雜的細節營造出3D效果,讓虛擬物更接近於實物,模仿真實事物的外觀。蘋果公司也曾是這種設計風格的忠實支持者之一,它的應用商店和各種設備上圖標都有使用擬物化設計(當然,後期也轉向於扁平化設計)。然而,在2010年,扁平化設計開始向超現實的擬物化設計發起沖擊。扁平化設計使用棱角分明的線條,讓信息和事物的工作方法以簡單直接的方式呈現出來,這更便於訪客理解。扁平化網站的設計方案也集中在高飽和度的色彩和排版上,而不是大量的圖像,這減少瞭網站不必要的加載時間。
這就是早期的扁平化設計,強調去除冗餘、厚重和繁雜的裝飾效果,避免做出3D效果的元素,使用簡潔風格的圖標,聚焦於抽象、極簡和符號化。但它也有自己的不足。由於強調剝離細節設計,主要依靠信息本身,在用戶引導方面也並不總是那麼順暢;單調的視覺效果和單一配色方案難以滿足大眾的口味。不過事實也證明絕大多數設計師還是喜歡這種設計趨勢的,這點從它的不斷發展中就可以看出來。總而言之,扁平化設計可能是過去十年裡最偉大的和最具革命性的一種設計趨勢。
台中靜電機租賃
Material Design [1.0和2.0的中間時代]
Material Design是谷歌為其產品和軟件推出的一種視覺設計語言,是一套設計標準文檔的集合。它吸取瞭扁平化設計中最精華的部分,同時又添加一些微妙的擬物化元素,比如使用陰影顯示分層,使用動畫引起用戶交互,保證網站的可用性和用戶的互動性。它讓扁平化設計更加開放,一些規定也沒有早期那麼苛刻。
扁平化設計發展如此迅速背後一個主要的推動力就是Material Design。雖然Material Design 的概念很明確,但它也隨著網站趨勢和用戶需求的改變不斷變化。它可以看作一種設計框架和模板,具有普遍適用性。從某種意義上來說,Material Design可以看做早期的扁平化設計和扁平化2.0的一個過渡,或者說它促進瞭扁平化設計的進一步演變。不過,Material design畢竟是與谷歌直接聯系在一起的,在創建一個獨特的網站上面沒有那麼有效。
扁平化 2.0
接下來就是扁平化2.0的時代瞭。扁平化 2.0 這個概念最早來源於設計師 Ryan Allen。扁平化 2.0 是一種演變,而不是一場革命。扁平化2.0隻是扁平化設計的一個分支,它給扁平化設計重新賦予瞭新的內涵,是這個概念沉淀之後逐漸成熟的標志。扁平化 2.0允許設計師打破其原有的強硬規定,帶來瞭一些微妙的元素和技巧,如高光強調、漸變、多種色調和色度、陰影效果、多種配色方案。在扁平化中使用微陰影可以增加元素深度,將重要內容從背景中獨立出來,有效傳遞信息;將低調的漸變用於背景色或氛圍色能夠實現元素的過渡,給網站籠罩一種和諧、朦朧感。當然,這些新元素的添加都是適度的,是符合扁平化的美學標準的。也因此,扁平化2.0在易用性和適用性更強,兼顧瞭設計的美觀和功能性,幾乎可以和任何其他概念一起結合使用,網站的用戶友好度大大提升,扁平化2.0受到很多設計師的歡迎,不少網站都應用瞭這一設計趨勢。另外,也有一些設計趨勢從扁平化2.0中衍生出來,最流行的可能要數卡片式設計和分屏式設計瞭,扁平化這棵大樹的枝幹越來越多。
扁平化設計2017
在今天,不少設計師繼續進行有關扁平化設計的嘗試,在設計手法或細節處理中又融入瞭越來越多的想法。扁平化設計進入瞭一個新的發展階段,由於這個發展階段暫時還沒有人命名,小飛姑且稱它為扁平化設計2017,下面是當今扁平化網站中的一些共同特征,這些特征都與扁平化2.0的有所不同,標志著新的發展階段的到來。下面就一起來看看吧!
元素更趨扁平化
扁平化設計2.0中的按鈕風格和用戶界面元素在今天已經不那麼適用瞭。現在,按鈕的樣式要比以往更加簡單,常常是方形或圓角邊緣的矩形框配以黑白色的文本,網站LOGO和圖標也都采用更加扁平化的風格。各種簡潔的元素再加上一個詳盡的主頁設計,這樣的網站才能脫穎而出。
精簡的導航菜單
由於扁平化設計要求簡潔大方的設計佈局,網站的導航菜單也需要更加精簡,這也是為什麼隱藏式菜單導航和漢堡圖標開始流行。它們幾乎已經成為當前網站的標配,給訪客提供充足的自由,既方便操作也不影響信息的傳遞,還在不同大小的屏幕上也能夠得到很好的呈現。
更廣泛的配色方案
大膽明亮的配色一直是扁平化設計的"寵兒"。在早期扁平化設計中,人們經常挑選高飽和度的顏色,而在扁平化2.0時期雙色調配色是比較流行的配色方向。但隨著扁平化設計的進一步發展,今天網站中使用的配色方案要更加豐富,網站設計師不僅使用明亮、鮮艷的顏色,也會應用暗色系的色彩,比如在主頁使用漸變的色調或疊加圖片等,網頁設計要比以往更加生動活潑。
油煙處理機出租
極簡的主頁設計
以往扁平化設計強調的極簡主要在於網站中的各種元素、圖標等。在2017年,網站的主頁設計也遵循極簡主義。現在的網站主頁更傾向於強調單個行為引導,而不是復雜的元素堆疊。反過來說,就算主頁上的元素再多樣,單個的行為引導也會給訪客留下簡潔、幹凈的印象。
精致的排版
當網站中不再使用復雜多樣的元素以後,網頁排版的重要性就凸顯出來瞭。前面在《巧妙利用排版和佈局迅速提升網站顏值》中我們討論過網頁排版有助於強調視覺效果,提高網站可讀性和可用性,還能保持網站元素的一致性。在扁平化設計之中,網頁排版的好處可不僅僅這些,精致的網頁排版還能夠提升網站的設計美感,讓信息內容本身很好的展現。
更少的擬物特效
盡管在今年的扁平化設計之中,設計師確實有使用一些微妙的元素讓網站設計更加豐富,但這並不意味著擬物化設計的回歸。生動、有趣的網站並不總是與擬物化設計掛鉤的,他們與擬物效果有著本質的不同。相反,現在的扁平化設計中使用更少的擬物效果,盡量不營造逼真的效果。
動效與反饋
近些日子,隨著H5/CSS3技術的發展,動效又重新回歸大熒幕。而在扁平化設計之中,設計師常常將動效與反饋結合在一起,這能更好的引導用戶、同用戶溝通,是如今交互設計和UX設計的關鍵所在。
大量留白
隨著顯示屏幕越來越大(PC端和移動設備都是如此),設計師在網站中使用大量留白以保持扁平化設計的極簡主義風。與此同時,留白還能夠有效突出網站的關鍵內容。當然咯,留白並不一定非得是白色。如果你對網站中留白手法比較感興趣,可以參閱《少即是多-怎樣在響應式網站中運用"留白"藝術》。
扁平化圖層
毫無裝飾的扁平化圖層看上去也很棒,而且還可以給用戶提供一些額外的信息,它們能成為不同元素的載體,或者單純的營造空間感。分層設計方法就是其中一個代表。
超大的設計元素
超大的字體,超大的圖片,甚至超大的按鈕和圖標,都已經不是什麼新鮮的設計手法瞭,它們借助過人的體積感和強有力的對比來制造視覺奇觀,是非常有用的設計技巧。這種設計手法在早期的扁平化設計就有瞭,隻不過現在使用更加頻繁。
扁平化設計一直在不斷進擊,易讀性更高、可用性更強、視覺上更美觀,這也是為什麼它能源源不斷迸發出蓬勃生機。我們在做網站時也是一樣,不要墨守成規,切實根據網站自身的特點,尋找符合的模板,運用有效的技巧,讓自己的網站更加出彩。扁平化設計還會一直發展下去,誰也不知道它最終會成為什麼樣,是經典不朽還是逐漸淘汰,但不可否認的是現在扁平化設計仍是大傢比較擁護的設計趨勢之一。趕緊在自己的網站使用扁平化設計吧!
如果你沒什麼想法,不妨來起飛頁看看吧!起飛頁自助建站平臺有不少扁平化設計的模板,這些模板都有著簡潔的元素、圖標,多樣的配色方案,足夠的留白。快來起飛頁自助建站平臺(http://www.qifeiye.com/?t_wd=a5)做一個扁平化設計的網站吧!
新竹靜電機出租
- Dec 04 Mon 2017 09:46
傲嬌的扁平化設計的進擊之旅:與時俱進,勇於創新
close
全站熱搜
留言列表