扁平化風格在線上商店的視覺設計應用

趙安

摘要：隨著科技的進步發展，移動互聯網終端設備普及率大幅上升，“便捷化”的思維方式不僅影響著用戶的使用體驗，也給設計師帶來了新的設計思維方式。本文探究歸納扁平化設計風格特點，分析研究電子商務線上購物視覺設計;解決在信息碎片化與模板固化的信息時代中用戶逐步上升的線上購物心理需求;有利于扁平化設計風格在線上商店設計中的運用，對探索新的線上購物方式設計架構以及自媒體推廣等方面具有現實價值。

關鍵詞：扁平化;線上商店;界面設計;網頁設計

一、扁平化設計與擬物化設計概念

在現代設計史中，我們可以發現扁平化的靈感來源于很多時期的設計風格;在2008年由Google首次提出扁平化設計（flat design）這個概念，蘋果公司推出的IOS7系統將扁平化引入了大眾視野;扁平化風格沒有多余的效果，例如投影、凹凸或漸變等，使用簡潔風格的元素和圖標以及大膽豐富且明亮的配色風格。在設計上追求一種形式上與概念上的簡化。

擬物化設計這個詞最早出現在希臘語中，被稱為「skeuos」（意為器具或工具）和「morphe」（意為形狀）。擬物化顧名思義是模擬現實物體的造型和質感的設計風格，讓你一眼就能認出是什么東西，通過疊加高光、紋理、材質、陰影等一系列特效對實物進行設計再現，也可以一定程度的變形和夸張設計，界面模擬真實物體。交互方式也模擬現實世界的交互方式。

扁平化設計與擬物化設計作為兩種設計風格是相輔相成的。無論擬物化設計還是扁平化設計，他們的作用邏輯都是信息傳達。信息傳遞的越準確越迅速，在設計上來說才是更好的，設計作為一種信息表達，需要滿足現實社會的需求;擬物化設計與扁平化設計的區別在先天性上沒有什么優勢與不足，他們作為兩種設計表達形式都是設計風格洪流的兩多燦爛的浪花。

只有充分理解這些因素，經過綜合分析，再決定應該采取何種設計風格，最后才可能會有更加充分的邏輯性與信息傳達的準確性迅速性，進而讓最終的設計結果更有價值。

二、扁平化風格在線上商店的設計運用原則

（一）層級結構簡化原則;在線上商店的扁平化設計運用時，我們應該了解扁平化設計不只是風格上的扁平，也是信息層級結構上的扁平化;扁平化設計風格是擬物化設計風格的延伸，要做到線上商店的扁平化設計運用需要在用戶感知上做到層級的簡化，達到交互感知的輕盈，而不是一味地擬物化設計，尤其是在信息碎片化和多平臺，多屏幕尺寸的時代，只有更加充分簡潔的層級結構設計，才能適應未來的終端碎片化，界面碎片化。

（二）信息主次分明原則;縱觀現今成熟的電子商務線上商城，作為服務平臺，大多擁有數以萬計的商品服務種類，龐大的信息如何在框架中有序的組合成了許多設計師工程師需要思考的問題;在排版設計中我們可以把信息分為第一信息第二信息…以此類推，越重要的信息在設計中需要越突出，信息主次分明，我們所需要傳達的信息才會更加準確，用戶也能夠更迅速的接受信息。

（三）交互操作趣味性原則;從擬物化交互操作方式發展到現在流行的扁平化交互操作方式，面對未來的終端碎片化以及界面碎片化，人們已習慣了扁平化簡單迅速的交互操作方式;隨著扁平化的主流趨勢發展，過于簡單原始的扁平化交互操作方式逐漸滿足不了用戶日益增長的審美需求，為解決這個問題，很多公司采用不定時更新升級這種手段，不斷完善交互操作的方式，在如今互聯網迅速發展的時代，一成不變的設計是滿足不了社會發展需求的，所以在線上商城的扁平化設計運用時，應具有對時尚與潮流的前瞻性，不斷創造具有趣味性的交互操作方式，這樣才能加深用戶粘性與推廣力度。

三、扁平化風格在線上商店的視覺設計方法

（一）布局設計;電子商務線上商城發展至今，其布局設計讓用戶形成了一定的操作習慣：上欄的搜索頁，方便用戶便捷迅速的搜尋自己想要的商品。其次是banner動畫，推薦活動與產品。接著是產品分類，用戶可以根據分類挑選商品。然后是各電商品牌的特色模塊。最下欄菜單欄依次排列。2018年是自媒體發展最為迅速一年，很多品牌都進行過一些線上商店的POP UP STORE的銷售形勢，具有時效性的頁面設計成為一種潮流，很多并沒有遵循模式化的布局設計，而是創新發掘熱點，比如京東的年貨節頁面，運用了簡單的擬物化將商品名稱與霓虹燈相結合，營造了一種逛街的氛圍。

（二）交互設計;完全擬物化的設計趨勢已逐步退出大眾視野，具有溝通意義的交互得以保留，在展示形式上與現實物體并沒有太多的關聯性。在扁平化交互設計中，應該注意交互的便捷性和統一性，比如在擬物化設計中，閱讀電子書翻頁特效就如同現實中翻書效果一樣，但在扁平化交互設計中是通過簡單的頁面轉換來實現，一個好的交互設計是讓用戶能夠獲得好的體驗感的設計，而不是單純的炫特效;扁平化風格在線上商店設計運用時我們也應注意以下幾點：

1.簡約便捷，特效過多會顯得整體冗雜

2.整體意識，交互設計在整體操作中應是和諧統一的

3.層級結構的簡化也是扁平化交互設計中的重點

4.具有時尚與潮流的前瞻性，探索新的流行交互設計

（三）色彩設計;色彩是設計中必不可少的一環，一件設計作品，結構是軀體，那么色彩便是靈魂;扁平化設計與擬物化設計最大的區別就是：擬物化設計模擬現實物體的顏色質感和紋理，重在現實物體;而扁平化設計則是從現實物體中抽象出來對象的顏色，通過整體的氛圍進行再設計，重在顏色本身。所以在運用扁平化設計進行色彩設計時我們要從最終的設計效果出發，考慮整體的色調和需要表現的氛圍;現今在扁平化設計中流行較為明亮鮮活的顏色，因為當單調的顏色遇上扁平化設計后，會顯得整體太過單薄。

（四）文字設計;作為信息量冗雜的線上商城，文字的設計排版也是扁平化運用的難題之一，不同企業有不同企業的標準字體，在扁平化設計運用中：

1.注意文字的整體統一，字體不能變化過多

2.文字排版上分主次，文字信息主次分明

3.顏色的運用，文字信息可以通過不同字體來區分，還可以通過顏色區分

（五）用戶心理設計;隨著智能化不斷創新，人性化的設計越來越被大眾推崇，面對五花八門的商業社會，誰抓住了用戶心理，誰就抓住了商業點和機會;所以扁平化設計在線上商城的運用時，設計師需要抓住用戶的心理需求，換位思考，將自己帶入使用者的角度分析問題后再進行設計探究。

四、總結

時至今日，扁平化逐漸發展成為一種美學風格，也已成為線上商店的視覺設計應用的主流。但面對科技的發展，大眾審美的不斷更新，扁平化風格并非一成不變，還需要設計師不斷完善和發展，扁平化設計風格也從最簡單的單純表現“扁平化”逐漸向一些細微的效果轉變，歷來被人所詬病的方面即交互不夠明顯、按鈕難以找到等。這些問題都可以通過增加一些小小的效果而得以解決：微陰影的運用，可以增加元素的深度，使其更加突出，吸引用戶注意;幽靈按鈕的運用，這類設計的形狀是很簡單的幾何形，內透明，運用顏色的對比和排版使其獲得聚焦;低調漸變的運用，這種漸變大多用于背景色或氛圍色，不再喧賓奪主。作為現今線上商店主流設計應用的風格，扁平化也許會隨著時間的長流消失在人們的視野，那么如何解決新的設計需求，如何深度發掘設計的功能性，開拓新的滿足當下的設計理念，從而引領新的設計風向，這些都需要設計師們共同的努力！

參考文獻：

[1]宋方.析“扁平化”手機界面設計[J].包裝工程，2012（3）.