扁平化風(fēng)格在線上商店的視覺設(shè)計(jì)應(yīng)用

趙安

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

關(guān)鍵詞：扁平化;線上商店;界面設(shè)計(jì);網(wǎng)頁設(shè)計(jì)

一、扁平化設(shè)計(jì)與擬物化設(shè)計(jì)概念

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

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

扁平化設(shè)計(jì)與擬物化設(shè)計(jì)作為兩種設(shè)計(jì)風(fēng)格是相輔相成的。無論擬物化設(shè)計(jì)還是扁平化設(shè)計(jì)，他們的作用邏輯都是信息傳達(dá)。信息傳遞的越準(zhǔn)確越迅速，在設(shè)計(jì)上來說才是更好的，設(shè)計(jì)作為一種信息表達(dá)，需要滿足現(xiàn)實(shí)社會(huì)的需求;擬物化設(shè)計(jì)與扁平化設(shè)計(jì)的區(qū)別在先天性上沒有什么優(yōu)勢(shì)與不足，他們作為兩種設(shè)計(jì)表達(dá)形式都是設(shè)計(jì)風(fēng)格洪流的兩多燦爛的浪花。

只有充分理解這些因素，經(jīng)過綜合分析，再?zèng)Q定應(yīng)該采取何種設(shè)計(jì)風(fēng)格，最后才可能會(huì)有更加充分的邏輯性與信息傳達(dá)的準(zhǔn)確性迅速性，進(jìn)而讓最終的設(shè)計(jì)結(jié)果更有價(jià)值。

二、扁平化風(fēng)格在線上商店的設(shè)計(jì)運(yùn)用原則

（一）層級(jí)結(jié)構(gòu)簡(jiǎn)化原則;在線上商店的扁平化設(shè)計(jì)運(yùn)用時(shí)，我們應(yīng)該了解扁平化設(shè)計(jì)不只是風(fēng)格上的扁平，也是信息層級(jí)結(jié)構(gòu)上的扁平化;扁平化設(shè)計(jì)風(fēng)格是擬物化設(shè)計(jì)風(fēng)格的延伸，要做到線上商店的扁平化設(shè)計(jì)運(yùn)用需要在用戶感知上做到層級(jí)的簡(jiǎn)化，達(dá)到交互感知的輕盈，而不是一味地?cái)M物化設(shè)計(jì)，尤其是在信息碎片化和多平臺(tái)，多屏幕尺寸的時(shí)代，只有更加充分簡(jiǎn)潔的層級(jí)結(jié)構(gòu)設(shè)計(jì)，才能適應(yīng)未來的終端碎片化，界面碎片化。

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

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

三、扁平化風(fēng)格在線上商店的視覺設(shè)計(jì)方法

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

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

1.簡(jiǎn)約便捷，特效過多會(huì)顯得整體冗雜

2.整體意識(shí)，交互設(shè)計(jì)在整體操作中應(yīng)是和諧統(tǒng)一的

3.層級(jí)結(jié)構(gòu)的簡(jiǎn)化也是扁平化交互設(shè)計(jì)中的重點(diǎn)

4.具有時(shí)尚與潮流的前瞻性，探索新的流行交互設(shè)計(jì)

（三）色彩設(shè)計(jì);色彩是設(shè)計(jì)中必不可少的一環(huán)，一件設(shè)計(jì)作品，結(jié)構(gòu)是軀體，那么色彩便是靈魂;扁平化設(shè)計(jì)與擬物化設(shè)計(jì)最大的區(qū)別就是：擬物化設(shè)計(jì)模擬現(xiàn)實(shí)物體的顏色質(zhì)感和紋理，重在現(xiàn)實(shí)物體;而扁平化設(shè)計(jì)則是從現(xiàn)實(shí)物體中抽象出來對(duì)象的顏色，通過整體的氛圍進(jìn)行再設(shè)計(jì)，重在顏色本身。所以在運(yùn)用扁平化設(shè)計(jì)進(jìn)行色彩設(shè)計(jì)時(shí)我們要從最終的設(shè)計(jì)效果出發(fā)，考慮整體的色調(diào)和需要表現(xiàn)的氛圍;現(xiàn)今在扁平化設(shè)計(jì)中流行較為明亮鮮活的顏色，因?yàn)楫?dāng)單調(diào)的顏色遇上扁平化設(shè)計(jì)后，會(huì)顯得整體太過單薄。

（四）文字設(shè)計(jì);作為信息量冗雜的線上商城，文字的設(shè)計(jì)排版也是扁平化運(yùn)用的難題之一，不同企業(yè)有不同企業(yè)的標(biāo)準(zhǔn)字體，在扁平化設(shè)計(jì)運(yùn)用中：

1.注意文字的整體統(tǒng)一，字體不能變化過多

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

3.顏色的運(yùn)用，文字信息可以通過不同字體來區(qū)分，還可以通過顏色區(qū)分

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

四、總結(jié)

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

參考文獻(xiàn)：

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