扁平化設計風格帶給受眾的是一種乾淨、簡潔的設計情緒。這樣的一種設計風格在扁平化風格出現之前其實已經被大量應用,只是在設計手法上沒有扁平化的設計更加極致。例如下面這個案例,是一個典型的扁平化時代之前的設計,但整體的設計風格與扁平化的風格類似,都是簡潔、乾淨的設計風格。其實,如果我們將這個設計中導航條、搜索框等元素中的高光、陰影去除掉,將其中的圖示元素更換為非擬物化的圖示的話,在版式上再變化一下的話,這個設計馬上就可以變為扁平化的設計。
在 WordPress 網站建設 SEO 站羣看來,扁平化的設計如此的流行是因為它更加適應於移動終端裝置的小尺寸螢幕。扁平化的設計風格更加適合在手機、平板電腦等小螢幕上進行操作。但把扁平化的這種優勢放大到能夠顛覆整個設計思維方式的話,無疑是誇大了它的影響。扁平化的設計也有它自身的缺陷,如果將其用在稍微複雜一點的介面中,扁平化設計會帶來很多困擾。因此無論它應用的再廣泛,扁平化也僅僅只是一種風格而已,在大尺寸的螢幕上,例如網頁方面的設計,沒有必要都採用扁平化的設計。
當然,這篇文章並非要對於扁平化與擬物化的設計孰優孰劣辯個是非,相反,作為一種設計風格,身為 UI 設計師,扁平化的設計風格如此流行,我們更加應該掌握這種設計風格的特點及表現手法。這篇文章我們就用上面 HTC 設計案例的改版來詳細分析一下扁平化設計風格的設計要素,掌握扁平化設計風格的設計方法。
那麼扁平化的設計有哪些設計特點,我們又該如何動手將這個設計改版為流行的扁平化風格呢?我大概梳理了一下,基本的步驟應該包括以下幾個方面:
一、梳理網站資訊,剔除非重要的資訊。
根據網站目的和訴求梳理網站資訊,這是無論做哪種風格的網站設計都要做的步工作。資訊梳理的工作非常重要,它直接關係到一個網站的目標能否達成,WordPress 網站建設覺得:想想重要的資訊由於缺乏整理沒有在頁面的重要位置和視覺方面體現出重要性,無論設計的再美觀,也是無用的。但我們經常所看到的情況卻相反,一個網站的頁被重要不重要的資訊塞的滿滿當當,每一個子頁面的內容都要在頁上佔據一個位置,什麼產品展示、新聞資訊、常見問題、專題活動都出現在頁上,這樣做的結果就是讓次要的資訊沖淡了重要資訊的比重,資訊的主次得不到體現,訪問者瀏覽過網站後似乎什麼都看到了,但卻沒有留下深刻的印象。時刻要記住,設計不是為了漂亮,更不是為了炫技,而是為了便捷資訊的溝通。資訊的梳理工作在扁平化的設計中顯得更加重要,因為扁平化的設計就是要體現簡潔、乾淨的特點,頁面上的資訊太多,就不太容易做出這樣的視覺風格來。
拿上面 HTC 手機頁面中的資訊來舉例,Logo 和導航的內容不用多説,導航作為網站資訊組織結構的體現是非常重要的一個元素。 HTC 是一個生產和銷售手機的企業,那麼可想而知,頁上重要的資訊當然是新產品的展示,其次是新的專題活動以及特色產品的展示,其他的例如企業新聞、產品支持服務搜索等內容大可不必在頁中出現,因為這些資訊相較於前面提到的資訊來説,沒有那麼重要,完全可以在內頁中體現即可。
二、確定設計方案,具體落實版式、色彩方案、字型、創意等內容。
網站的資訊確定之後,我們就可以着手來制定更為詳細的設計方案。先需要確定的是版式,也就是網站的佈局。在扁平化風格的設計中,由於設計中常使用特別簡單的元素,所以排版就變得非常重要,成為了設計中出彩的地方。扁平化設計中常見的排版方法是用矩形來劃分頁面中不同的資訊區域,例如下面的幾個案例所示,可以看到無論是整體頁面的劃分或者分欄資訊的劃分,矩形在其中扮演了非常重要的角色。
以扁平化的設計風格來看,上面 HTC 頁的設計導航部分的創意顯得過於複雜,將主要內容固定在一個寬度內的板式看上去也過於小氣,所以我們將目前已有的版式更改為通欄的佈局方式。放棄目前導航的設計,將導航文字直接放置於通欄的導航條上,banner 部分的設計也做同樣的處理,banner 下方是新的活動資訊,各個活動資訊區域用矩形劃分開來。
接着需要確定的是色彩方案。在扁平化的設計中,多采用純度低、亮度高的顏色。高亮色彩的使用讓整體的設計風格更加清新。看看下面這些案例的設計:
再往下是頁尾導航和版權資訊,這部分的資訊不是頁面的重點,只要做到契合整體頁面的設計即可。下圖是我們重新設計後的頁面,對比改版之前的設計,我們就能對扁平化的設計方法有一個大概的瞭解。