?

扁平化設計風格在網頁設計中的優勢

2015-08-15 00:54陳冠軍張阿維
科技視界 2015年15期
關鍵詞:扁平化物化層級

陳冠軍 張阿維

(西安工程大學,陜西 西安 710048)

互聯網的誕生是一個奇跡,而網頁則是這個奇跡的載體和縮影。隨著互聯網的飛速發展,網頁的設計越來越重要。擬物化和扁平化設計風格作為當下最流行的兩種設計風格,關于它們的爭論從未停止過。

1 扁平化設計和擬物化設計簡介

扁平化設計是指擯棄多余的裝飾,如陰影、透視、紋理、漸變等,以抽象化、簡潔化、符號化的設計元素將信息和事物的工作方式展示出來的一種設計風格。信息結構呈現的是一種扁而寬的結構形式。其風格特點為抽象新穎、色彩豐富、清新質樸、網格設計明顯。[1]

說起扁平化設計就不得不提擬物化設計。擬物化設計是指以高光、紋理、陰影等效果模仿現實世界實物的造型、材質和顏色,從而達到現實實物的再現,通過這種形象易懂的方式來表達操作方法的一種設計風格,其信息組織結構呈現長而深的縱向樹形結構,風格特點是具象寫實、華麗逼真。[2]

2 扁平化設計在網頁界面視覺上的優勢

2.1 網頁界面元素

格式塔心理學家認為,人們的知覺有一種“簡化”的傾向。這種傾向是一種將任何物體以盡可能簡單的機構組織起來是能夠體現物體最本質的形態的表達。[3]

在擬物化設計中,設計師會模仿現實世界里真實物體的顏色、形狀等。例如:設計師會為按鈕添加漸變、陰影等效果以符合真實按鈕的特征,以求對用戶產生親切的感覺。然而,這樣的按鈕往往帶來的是一種不符合用戶預期的體驗,同時這也一定程度上限制了用戶的個性化想象空間,更重要的是設計開發的周期相對更長。扁平化設計使用的都是基本形狀,去除了漸變、陰影等裝飾性效果,弱化了視覺上的復雜性,突出了每個元素所表達的信息本身。另外,由于扁平化設計的元素的這些特點,其具有更廣泛的適用性,比如:眼睛近視和弱視的用戶也可以方便的使用這類設計。

2.2 網頁布局

之前的網頁設計講求精美的圖片和排版效果,漂亮的插畫與周到的布局設計,扁平化設計拋棄了復雜的光影效果,更專注于根本的內容呈現。扁平化設計中大量使用扁平化的圖標、矢量圖形和圖標字體,這種設計更符合現代人的審美觀。

一方面,擬物化設計初衷是降低用戶的認知成本,目的是讓用戶在使用科技產品時可以參考現實世界的操作規律,可短時間內輕松掌握數碼產品的用法[4]。而在現今階段,數碼產品普及度已非常高,特別是在年輕用戶群體中,擬物化設計的功能性優勢已無法凸顯,用戶已經熟悉了各類數碼產品的基本特點,適應了各類界面的操作方法,在扁平化設計風格的界面中更容易更快速地找到所需要的信息。

另一方面,扁平化設計界面更能提升用戶操作的效率。隨著移動互聯網的迅速崛起,移動終端屏幕尺寸的多樣化給網頁設計造成了很多麻煩,所以響應式網頁設計應運而生了。在這方面,擬物化設計的網頁很難實現跨屏幕、跨平臺的界面適配,特別是在小尺寸的屏幕上,擬物化的圖標非常不易識別,而扁平化設計的圖標則可以很好地滿足這些變化因素的需求。扁平化更多的使用矢量圖形,減少了對像素精度的依賴,這樣設計師也有了更大的創意空間,從而可以創建出適應性更強的用戶界面。

2.3 色彩

扁平化設計頁面中,因為追求極簡主義,所以沒有其他多余的裝飾。因此,設計者在設計時需要更加注意色彩的搭配,這樣將會收到更好的視覺效果??偨Y扁平設計的色彩搭配大致分為兩種:同類色搭配:同類色搭配,最常用的是把同一種顏色的黑、白、灰三種色調結合在一起,形成層次上的對比。在扁平化設計中,單色的使用不僅能分清層次感,同時也能把握住整體感。對比色搭配:對比色搭配的使用可以使頁面看起來極富活力又有豐富的色彩變幻,視覺效果醒目。在使用對比色進行搭配時,設計師要注意到在設計時應當先了解網頁的主題,選用合適的顏色進行搭配。

2.4 字體

文字是設計師向用戶傳遞信息的最主要手段。而字體的選擇不僅要符合扁平化設計的簡約風格,同時還要符合整個頁面主題的設計風格。一般扁平化風格的頁面會使用無襯線字體,再通過對字體字號、顏色和粗細的變化進行排版[5]。不同排版的文字信息會帶來不同的視覺瀏覽體驗,如字號較大,或是粗體,能幫助用戶輕易地分辨、獲取文字所傳達的信息,這就在內容上創造出一定的層次感,可明顯提升內容的易讀性。

3 扁平化設計在網頁信息組織結構上的優勢

擬物化設計的信息組織結構主要表現為層級化結構,呈現為金字塔形的縱向樹形結構,是一種邏輯性較強的層級化組織方式[6]。這種信息組織結構層級較多,每個層級容納的信息量少而準確,根據嚴密的邏輯關系將信息進行有效的分類,因此信息獲取的準確率比較高。同時層級間的轉換路徑較長,不同界面的切換耗時長且不利于全局觀察,已造成用戶“迷路”。擬物化設計是一種注重功能實現的信息結構,它更適用于信息結構邏輯性強,信息種類繁多且詳細的產品。

扁平化設計最大程度地縮短了信息層級,不斷擴展橫向信息承載量,呈現出一種扁而寬的結構形式。特別是卡片式的信息展現形式可以同時展示信息標題和少量內容,減少了用戶在訪問多個目標信息時所耗費的認知成本。但是如果單個層級承載的信息量過大,獲取精確信息的難度將變大,對于信息在頁面中的定位也增加了難度。因此,扁平化設計適用于快捷的信息瀏覽,信息及模塊的分支少且信息傳達迅速的產品。扁平化設計的這種信息組織結構可以很好地優化目前絕大部分網頁體驗。

4 扁平化設計在網頁交互方式上的優勢

擬物化設計的網頁往往由于擬物的不徹底,比如可能由于花費時間較長的原因,按鈕的四種狀態不能做到完全的擬物,會造成用戶體驗上的不連貫,給用戶造成疑惑。同時由于擬物化設計耗時比較長,往往很少在網頁動效方面改善用戶體驗的事情。而扁平設計中使用的多是簡單的矢量圖形、圖標、圖片,做交互動效比較容易且不易亂。同時網頁交互動效可以大大提高用戶的情感體驗,避免扁平化設計風格給人造成冰冷、毫無生機的感覺。

5 總結

扁平化與擬物化設計一樣都由來已久,隨著互聯網的飛速發展,特別是移動互聯網的崛起,滿足了用戶的各種新需求,解決了用戶體驗的痛點,扁平化設計的優勢得以凸顯并得到了廣泛傳播。扁平化設計風格運用在網頁設計上,他的這些優點將同樣會對用戶體驗產生非常積極的影響。擬物化設計風格也不會就此覆滅,它會用適當的方式對用戶體驗做出貢獻。

[1]宋方,金錦虹,逯新輝.析“扁平化”手機界面設計[J].包裝工程,2012,33(14):60-63.

[2]夏穎翀.數字產品界面中樸素的設計和冗余的設計[J].裝裝飾,2013(5):98-99.

[3]馬海港.少即是多:論扁平化界面設計風格的優勢[J].現代裝飾:理論,2013(12):88.

[4]馬娜娜.簡潔而不乏味:淺談扁平化界面設計[J].大眾文藝,2013(16):137-138.

[5]張蕓.扁平化設計在網頁上應用的優勢[J].藝術科技,2013(6):229.

[6]嚴屏,韋錦城.探析現代數字界面中的擬物化風格與扁平化風格[J].包裝工程,2013(22):114-126.

猜你喜歡
扁平化物化層級
軍工企業不同層級知識管理研究實踐
基于軍事力量層級劃分的軍力對比評估
扁平化的球星Ⅱ
任務期內多層級不完全修復件的可用度評估
物的人化與人的物化——當代舞臺美術的表演
檔案:一種物化的文化形態
扁平化的球星
扁平化的球星
拋物化Navier-Stokes方程的降維仿真模型
X-bar之弊——從名物化分析到最簡方案
91香蕉高清国产线观看免费-97夜夜澡人人爽人人喊a-99久久久无码国产精品9-国产亚洲日韩欧美综合