扁平化風格在互動產品設計中的運用論文

扁平化風格在互動產品設計中的運用論文

  近年來,扁平化風格在產品互動設計中的運用越來越廣泛,成為互動產品設計中的一種視覺表現風格。扁平化風格完全採用不加任何視覺效果的平面元素進行設計,摒棄投影、漸變、浮雕、凹陷等三維視覺表現形式,力求營造簡潔、無干擾、直接的視覺效果。

  一、扁平化風格的表現形式

  1.框架形式簡潔化

  框架結構的規劃是產品互動設計中非常重要的組成部分,結構的設計是否具有邏輯性、是否流暢合理,是否符合產品定位和使用者需要,對於產品互動設計的後期延展具有舉足輕重的作用。扁平化風格在框架結構和形式設計上最大的特點就是簡潔化,主要體現在介面形式簡潔、介面層級簡潔兩方面。

  2.介面形式簡潔

  介面形式簡潔是扁平化風格的一種視覺特點。網際網路的快速發展導致使用者在使用產品過程中瀏覽資訊的可選性增加,耐心減弱,如何在最短時間內突出產品重要資訊和內容,是產品取勝的關鍵。扁平化設計正是透過圖形、圖示、色彩、字型的合理簡潔搭配和使用,形成具有產品特色的統一視覺效果,從而把重點資訊放在第一位,便於使用者第一時間關注和識別。在滿目三維效果越來越逼真的當代設計環境中,一款優秀的扁平化設計猶如清新的微風,能滿足資訊有效閱讀的同時,還能帶給使用者輕鬆的瀏覽感受和使用體驗。

  3.介面層級簡潔

  由於網路技術的提高和普及,人們使用手機進行產品互動介面操作的時間增多,但其大部分由零散的時間構成,因此手機互動產品的介面層級應以簡潔設計為主,簡單的選單層級可以節約開啟介面時使用的網路流量和時間,減少使用者的等待焦慮,給使用者提供一個流暢的瀏覽環境。扁平化風格在設計中使用模組化的構成元素所佔空間較小,同時單頁介面的展開很大程度上也減輕了使用者的視覺瀏覽負擔。常用的一種層級設計方法是“灌木型層級設計”,將產品介面中的最基礎層級資訊置頂,刪減需求量較少的中級層級資訊。由此得到的'層級設計,介面疊加層次少,使用者訪問路徑較短,使用者返回主介面層級較快速,普及和操作便捷。

  二、功能操作便捷化

  產品的功能要透過操作來實現,因此操作設計便捷化是產品互動設計的另一重點。使用者在友好便捷的操作過程中體驗、瞭解產品資訊,實現使用目的。但目前,不少互動產品由於功能設定過多,或功能疊加過度,操作步驟過於繁瑣,導致使用者體驗不友好,使用過程不能體現設計師的意圖,因此扁平化風格的設計成為便捷操作的一種設計途徑。

  1.操作引導便捷

  介面吸引使用者好奇心並激發使用者嘗試體驗操作是產品互動設計的一項重點。產品的引導頁設計成為招攬使用者的門面,要求既有設計感、趣味感,操作過程又不能繁瑣。目前很多新聞類產品的互動介面在引導頁設計上,資訊放置過度,造成介面內容龐雜,視覺重點不突出,使用者瀏覽容易疲倦等現象發生。扁平化風格的引導頁介面設計,網格化佈局乾淨、結構有條理,無裝飾風格的圖片和圖示搭配簡潔的文字說明,帶給使用者一種清新、明確、簡約的指引性視覺體驗。

  2.操作反饋明晰

  使用者在使用過程中遇到錯誤操作,或某一操作動作結束後,操作是否成功等一些情況時,需要產品互動設計提供反饋資訊這一步驟。良好的資訊反饋佔用時間少,佔用介面空間小,視覺效果不突兀,不會讓使用者感覺焦慮。如圖1是某一網頁等待介面設計,介面背景採用兒童畫手繪圖形,排列亂中有序,前景採用扁平化的矩形緩衝條造型,使用者在提交某一操作後,藉助緩衝條可以減緩等待時的焦慮。

  3.操作更新便捷

  網際網路線上線下產品資訊的更新是否快速便捷,是產品設計前規劃定位的一大思考要素。不少互動產品在設計時過於注重複雜、絢麗的表現形式,造成產品資訊更新速度較慢,成本較高的局面,而扁平化風格設計的另一優勢是成本低、更新快,由於構成扁平化風格多為無裝飾效果的平面構成元素,因此在產品介面風格和資訊的更新上,設計元素改變較便利,介面變換靈活,效果明顯,使用時間少,這也成為很多互動產品公司選擇扁平化風格的重要原因之一。

  三、扁平化風格在互動產品設計中的方法

  在產品互動設計中,扁平化風格元素的使用主要從圖形、色彩、排版、字型幾方面體現。

  1.扁平化圖形運用

  扁平化的圖形設計與三維圖形有很大差別,但設計方法和審美要求都必須符合市場和使用者心理標準。在具體設計上,要求圖形要在深入研究產品特徵的基礎上,高度提煉產品和所要傳達的資訊形象,除去各種裝飾手法、用直接概括的視覺語言塑造形象。圖形語意要明確,必須符合大眾的生活認知,識別度較高。如圖2是某一產品的網站調研資料介面設計,產品透過兩種顏色劃分矩形畫面,讓扁平化的介面產生視覺對比,介面所使用的飲料、蛋糕和人頭圖形,圖形設計摒棄凹凸、紋理、陰影等效果,用最簡潔的筆畫概括調研內容,搭配左側簡練的文字,突出圖形資訊重點。

  2.扁平化版式運用

  越是簡單的設計越體現設計師的功力。比如留白的版式設計,僅用黑白兩種對比元素就能設計出的強烈的視覺美感,在白色的背景上,黑色的文字既是資訊,也是一種黑色的視覺符號,透過點線面的不同組合、排列,形成或錯落、或整齊、或異形的不同畫面,給人以韻律感。扁平化版式設計,應以突出重要內容為主,排版上注意資訊的主次之分,透過調節文字與圖形、線條等其他元素之間的行間距、字間距,讓所有組成元素無形中成為畫面中的點和線,傳遞出動靜結合、強弱有序的節奏感。

  3.扁平化色彩運用

  介於產品互動設計中扁平化圖形的設計極為簡練,在介面視覺效果上想要突出重要資訊的話,另一設計方法就是合理運用扁平化色彩。產品互動設計中的扁平化色彩運用要求配色飽和度和色調儘量統一協調,常用飽和度高、明亮的單色為主。另外,扁平化色彩也常用到復古色作為配色,這類色彩飽和度較低,但因為將純色與白色相結合,使色彩視覺感受更加柔和親切,富有女性的柔美。近年來,扁平化色彩的同色使用較為流行,常常用某一單色搭配黑色或白色,從而創造出富有視覺衝擊力的介面效果。如圖3是手機某款基礎功能介面的扁平化配色方案,介面採用藍色為基礎色,搭配黑白兩色文字,形成視覺效果對比。

  四、結論

  扁平化風格的應用既是視覺設計語言的興起,也是設計思維方式的改變。最大的優勢是將產品資訊和操作原理以最直接簡練的形式展現給使用者,減少操作體驗過程中的出錯率。為了完善市場上各型別號和功能的產品互動介面需求,應當將設計重點放在產品互動介面的功能實現應用上,扁平化風格的興起和推廣,也應該立足於此,將優秀的互動體驗、便利的識別、流暢的操作、情感的傳遞、舒適的視覺效果等設計標準融匯於其中,最終實現視覺與功能雙重優秀的產品互動體驗設計。

最近訪問