潮流電商網站視覺分析

0 評論 10604 瀏覽 5 收藏 8 分鐘

最近在收集國外電商網站的視覺設計,看到很多極具前瞻性的網頁設計,框架結構、內容排版、色彩搭配、圖片運用上達到了非常和諧的統一。下面總結出的幾點,供大家參考和探討:

一、留白

非常大膽的留白,給內容足夠的呼吸空間。各個頁面的圖文間距都控制得非常好,頁面整體感覺更通透,襯托出信息內容。這種留白,給用戶思考和想象的空間,在引 導用戶視覺和創造流暢的視覺感受方面卻是至關重要的。而相比之下,我們雖然意識到留白的重要性,但往往不夠大膽而非常謹慎小心。

頁面設計的主要目標是視覺認知和清楚易讀。留白都是有明確的設計意圖的,在信息區塊之間留白比較大,在信息區塊內部則相對較小,這是為了讓眼睛找到一點點休 息的區域,這相對擁擠的頁面更能幫助用戶再操作的過程中不容易著急。信息區塊間的空白在這里首先是頁面看上去更清爽一些了,同時也提高了網頁的可用性。

二、色彩

韓國的電商網站,包括about,naver、daum都是以繞著VI的標準色來制作,logo的主色為主,一種互補或者相近顏色為輔,灰色過渡。完全無視 覺噪音。而每一種色彩都具有其特定的含義。其三家的設計風格都很接近,淡淡的背景,清晰的文字、直觀的素材。沒有過多的修飾和渲染,沒有過多豐富的顏色。

國外的大部分電商網站,尤其是歐美的網站大多是白色的,白色有著最佳的對比度和可讀性。它還顯露出整潔性,讓用戶能自由地瀏覽網站。以其他強調色則讓用戶能感到安定、興奮,也讓他們期望找到最滿意的采購。

不同的顏色對用戶產品不同的情感影響,所以在尋找輔助色的時候要有目的性和引導性,以下是一些常見色彩的小結:

三、平衡、對齊、對比

平衡,對齊,對比是極簡主義的三大要領。累贅的內容可以用空白和適當的構圖所取代,不需要補充額外的視覺輔助來使用戶看上去是“完整“,在國外的電商網站 中,這方面都做的很好,在平衡的把握上,信息的主次對比非常明顯,不只是顏色上,還有大小上。讓用戶在第一時間感知重要信息。

圖片的位置,大小的控制,人物的視覺方向、每張banner的文字對齊方式都是根據整體頁面的平衡感來設定,同時考慮整體的對齊流。

四、細節

作為一個設計師,我們希望人們注意到我們所作出的額外努力,比如降低陰影的百分比,或是過渡突出,使其一目了然。有時,通過微妙的變化,可以實現更好、更順 暢的效果,無論是為了營造視覺效果,還是抓取用戶視線,都能達到預期的設想。都說細節是設計的整個靈魂,看看這些網站是怎么把控細節的。

五、情境化

設定場景,傳達出清晰的信息,很巧妙的把價格信息自然的融入到場景中。自然、優雅的展現。并不突兀卻又能恰好的體現信息內容。這種表現方式宜家是個很經典的例子,具有親和力,同時用戶又不會對赤裸裸的價格展現而心生反感。

六、節奏感

視覺元素的造型、大小、色彩分布符合一定的比例關系,就能在視覺上產生類似于音樂的節奏感。
藍色色塊,它是節拍,是靈魂,它的大小變換猶如音樂中的輕重,形狀的改變猶如曲調的緩急,在網頁中自上而下有規律的出現,仿佛音符在跳躍。

黑色色塊,按照一定的間隔自上而下分布,在起到區分信息流的同時,色塊間距離和大小的不同也形成了不同的波長和輕重的節奏感。

七、篩選的圖形化

目前很多國外甚至國內的電商網站在搜索篩選上做了可視化圖形,集合了趣味性與實用性于一身的表現形式, 又一次佐證了“一圖勝千言”這一經典道理。這種表現方式的缺點是當篩選屬性\條件太多時很難都用圖形展現,比較適合垂直化時對關鍵屬性的提取時。

在這些b2c歐美電商網站中,還有很多需要我們去觀察和學習的,其網站因為地域性、領域性,行業性而各有不同,但共同點就是都清楚的了解領悟了簡單和統一的體驗是至關重要的。

“簡單和統一的體驗是關鍵?!?Simplicity and a unified experience is key)

Web視覺設計是一門綜合的藝術表現形式,肩負著不僅要跟國外的優秀方面學習,還要設計出符合國內用戶的習慣產品、也要用最科學的方法引導用戶群體,使得更好更快的使用我們的產品。我們的路還很遠。

來源:uisdc

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!