主流电商网站视觉分析

最近在收集国外电商网站视觉设计,看到很多极具前瞻性的网页设计,框架结构、内容排版、色彩搭配、图片运用上达到了非常和谐的统一。下面总结出的几点,供大家参考和探讨:

一、留白

非常大胆的留白,给内容足够的呼吸空间。各个页面的图文间距都控制得非常好,页面整体感觉更通透,衬托出信息内容。这种留白,给用户思考和想象的空间,在引 导用户视觉和创造流畅的视觉感受方面却是至关重要的。而相比之下,我们虽然意识到留白的重要性,但往往不够大胆而非常谨慎小心。

主流电商网站视觉分析

页面设计的主要目标是视觉认知和清楚易读。留白都是有明确的设计意图的,在信息区块之间留白比较大,在信息区块内部则相对较小,这是为了让眼睛找到一点点休 息的区域,这相对拥挤的页面更能帮助用户再操作的过程中不容易着急。信息区块间的空白在这里首先是页面看上去更清爽一些了,同时也提高了网页的可用性。

主流电商网站视觉分析

二、色彩

韩国的电商网站,包括about,naver、daum都是以绕着VI的标准色来制作,logo的主色为主,一种互补或者相近颜色为辅,灰色过渡。完全无视 觉噪音。而每一种色彩都具有其特定的含义。其三家的设计风格都很接近,淡淡的背景,清晰的文字、直观的素材。没有过多的修饰和渲染,没有过多丰富的颜色。

主流电商网站视觉分析

国外的大部分电商网站,尤其是欧美的网站大多是白色的,白色有着最佳的对比度和可读性。它还显露出整洁性,让用户能自由地浏览网站。以其他强调色则让用户能感到安定、兴奋,也让他们期望找到最满意的采购。

主流电商网站视觉分析

不同的颜色对用户产品不同的情感影响,所以在寻找辅助色的时候要有目的性和引导性,以下是一些常见色彩的小结:

主流电商网站视觉分析

三、平衡、对齐、对比

平衡,对齐,对比是极简主义的三大要领。累赘的内容可以用空白和适当的构图所取代,不需要补充额外的视觉辅助来使用户看上去是“完整“,在国外的电商网站 中,这方面都做的很好,在平衡的把握上,信息的主次对比非常明显,不只是颜色上,还有大小上。让用户在第一时间感知重要信息。

主流电商网站视觉分析

图片的位置,大小的控制,人物的视觉方向、每张banner的文字对齐方式都是根据整体页面的平衡感来设定,同时考虑整体的对齐流。

主流电商网站视觉分析

四、细节

作为一个设计师,我们希望人们注意到我们所作出的额外努力,比如降低阴影的百分比,或是过渡突出,使其一目了然。有时,通过微妙的变化,可以实现更好、更顺 畅的效果,无论是为了营造视觉效果,还是抓取用户视线,都能达到预期的设想。都说细节是设计的整个灵魂,看看这些网站是怎么把控细节的。

主流电商网站视觉分析

五、情境化

设定场景,传达出清晰的信息,很巧妙的把价格信息自然的融入到场景中。自然、优雅的展现。并不突兀却又能恰好的体现信息内容。这种表现方式宜家是个很经典的例子,具有亲和力,同时用户又不会对赤裸裸的价格展现而心生反感。

主流电商网站视觉分析

六、节奏感

视觉元素的造型、大小、色彩分布符合一定的比例关系,就能在视觉上产生类似于音乐的节奏感。
蓝色色块,它是节拍,是灵魂,它的大小变换犹如音乐中的轻重,形状的改变犹如曲调的缓急,在网页中自上而下有规律的出现,仿佛音符在跳跃。

主流电商网站视觉分析

黑色色块,按照一定的间隔自上而下分布,在起到区分信息流的同时,色块间距离和大小的不同也形成了不同的波长和轻重的节奏感。

主流电商网站视觉分析

七、筛选的图形化

目前很多国外甚至国内的电商网站在搜索筛选上做了可视化图形,集合了趣味性与实用性于一身的表现形式, 又一次佐证了“一图胜千言”这一经典道理。这种表现方式的缺点是当筛选属性\条件太多时很难都用图形展现,比较适合垂直化时对关键属性的提取时。

主流电商网站视觉分析

在这些b2c欧美电商网站中,还有很多需要我们去观察和学习的,其网站因为地域性、领域性,行业性而各有不同,但共同点就是都清楚的了解领悟了简单和统一的体验是至关重要的。

“简单和统一的体验是关键。”(Simplicity and a unified experience is key)

Web视觉设计是一门综合的艺术表现形式,肩负着不仅要跟国外的优秀方面学习,还要设计出符合国内用户的习惯产品、也要用最科学的方法引导用户群体,使得更好更快的使用我们的产品。我们的路还很远。

一淘UX原文:http://ux.etao.com/posts/453

收藏 11
点赞 11

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。