在這個「顏值即王道」的時代，不管什麼東西，只要足夠好看就能吸引更多目光，線上商城設計也不一樣。韓國線上商店設計久負盛名，今天Inspirr將從構圖、配色、輔助元素這三方面，對韓國大型生活超市Emart網站的banner設計為例進行分析，希望大家能從中獲得更多靈感。

網站設計案例分析：看看韓國線上商店banner設計有什麼值得借鑒的地方

網站設計案例分析一：四大構圖類型

在UI設計中，圖形設計、交互設計、色彩搭配，乃至圖標設計等等都離不開溝通技巧，因此掌握構圖技巧對加強界面的層級關係非常重要。下面，就讓Inspirr為大家說說Emart網站banner設計使用了哪四種構圖類型：

構圖類型①：中心集中式

網站設計案例分析

Banner以圖片作為主元素撐滿整個畫面，而主標題則作為次要元素平衡畫面，再根據界面主題需求添加合適的裝飾元素，加強整體視覺衝擊力。

構圖類型②：三角式構圖

網站設計案例分析

Banner中的主物體、次物體和主標題形成穩定的三角形構造關係，使整體畫面顯得非常飽滿、穩定。

構圖類型③：頂視角分散式構圖

網站設計案例分析

頂視角分散式構圖，適用於需展示較多產品的情況，雖然能讓畫面非常出彩，但對於產品發散過程的節奏和走向較難掌控。

構圖類型④：折線跳躍式

網站設計案例分析

產品懸浮於畫面中並僅展示部分，配以適當文字排版和裝飾元素，使整體畫面效果變得更加活躍，也加強了畫面的延展性。

Emart網站設計案例分析二：配色

● 色彩理論基礎

配色方案的運用吸引用戶注意力的常見手段，更是向用戶傳達情緒的有效手段。想要恰到好處地運用色彩，設計出令人賞心悅目的作品，就必須掌握基本的色彩理論。下面，就讓Inspirr為大家說說Emart網站banner設計運用了哪些色彩理論基礎知識：

色彩理論基礎知識①：單色/同色系

網站設計案例分析

同色系搭配適合產品本身顏色比較統一的情況，通過運用與產品較接近的周邊顏色，再搭配合適的輔助元素，就能讓畫面變得統一而豐富。

色彩理論基礎知識②：類似色

網站設計案例分析

類似色的可變化範疇會相對比同色系要多，在主色調明確情況下添加類似色作為輔助色，使畫面形成明暗層次，給人一種簡潔而單純之美。

色彩理論基礎知識③：補色系列

Emart 網站在補色上的應用比較廣泛，這主要是因為這個網站的調性很活潑，同時產品屬於色彩明快的快消品類。畫面使用補色配色方案，既能很好地達到視覺對比效果，同時又能提高畫面融合度，增加用戶的愉悅度，更容易地激起他們點擊慾望。

色彩理論基礎知識④：多色搭配

網站設計案例分析

當設計需要更多顏色時，可以嘗試三色或四色方案，但由於這類配色方案掌控難度較高，因此在Emart 網站的應用上較少。為了達到畫面平衡，建議使用一種顏色作為主色調，一種作為輔助色調，其餘一種或兩種作為點綴色。

Emart網站設計案例分析三：輔助元素

輔助元素在Emart網站banner設計的應用上非常廣泛，一來可以增加畫面的豐富性;二來可以強化產品的特性。

網站設計案例分析

輔助元素主要以產品相關元素進行圖形化，能有效強化功能特性，增加畫面趣味性，以及對產品紋樣或特性進行延展……

此外，輔助元素在icon樣式上的應用也非常多樣，可根據畫面的特點延伸出不同類型、不同樣式。

【總結】

從上述內容的分析，可以看出Emart在網站設計上的主要特點主要有三，分別是：

▪ 構圖大膽、主體突出、畫面延展性強

▪ 配色活潑且有理有據

▪ 輔助元素點綴很到位，能強化功能特點

文中所針對的banner設計主要作為日常宣傳形式上展現，但大促及大型活動時的設計不能過多參考上述案例，而是針對活動的主題制定一個更明確的思路和方法完善整個網站設計的視覺效果。