主流电商网站视觉分析

2013/03/03 19773

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

一、留白

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

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

二、色彩

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

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

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

三、平衡、对齐、对比

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

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

四、细节

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

五、情境化

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

六、节奏感

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

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

七、筛选的图形化

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

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

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

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

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

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/e-commerce-sites-visual-analysis

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里