「10招」教你玩转电商专题页面设计

「10招」教你玩转电商专题页面设计,第1张

「10招」教你玩转电商专题页面设计

电子商务中的主题设计是单页设计的一种应用。

写在前面得话

电子商务中的主题设计是单页设计的一种应用。

单页设计,简单描述为在一张纸上进行的写作和设计。

页面首先出现在计划设计中。设计师对唯一一张不同规格、不同材质的印刷纸的正反面进行了全过程的随机设计,主要用于折页、宣传页、海报。

如下图:

图片来自花瓣网

电商行业的单页设计,更像是自然环境下单页方案应用的升级。它不仅具有平面设计的所有设计规则,还具有网站设计的许多特点。

例如,新的视差翻转和H5技术可以使页面和人的交互更加紧密,也使客户在访问页面时更像是在阅读一篇文章或一个故事。

出现在一些营销主题活动页面、产品介绍页面、店铺前台页面等需求中。

如下图:

什么叫整体专题设计的“冰糖葫芦标准”?

在设计单页主题时,为了使产品详情页到副屏再到内容板块的视觉效果更加连贯流畅,需要灵活运用局部对比和整体联想,使页面的实际效果更加细致。

冰糖葫芦标准一:单页的点,这儿指突破口

专版的突破是整版的主要任务。

图论基础理论中的点是用来聚焦点,传播,吸引大家注意力的。

如下图:

冰糖葫芦标准二:单页的线,用于联接和正确引导

专门一页中的线是用来引出一篇短篇小说的情节的。

应用一些视觉表达,用一些挑战和装饰艺术来增强页面。

如下图:

冰糖葫芦标准三:单页的面,用以整体设计风格的设计

这里指的是一整页的完成率。

单页设计不必拘泥于商品详情页或单个元素的设计。

它从头到尾(产品详情页到副屏,再到内容区,再到底部),从局部到整体,注重一种视觉接触。

让我们来看看三组优秀的设计:

10个专题设计的方法

接下来是我梳理的专题设计的10种方法,主要是一些大的基础理论点。下面我们结合自己的主题问题来思考一下。

1、店标有一个点,下边设计才好接

点原素的设计分不清河与汉界。

不能抱着做大图的想法就去期货 *** 作页面,要让店铺logo的视觉效果和下面的内容联系起来。

去掉商品详情页(也就是别名的店铺logo)和副屏,用明显的彩条、方式、线条等隔开。

如下图,红圈显示的部分是店铺logo的长宽比。一般店铺logo的长宽比建议在450,600中间,过高会消耗室内空房间。

2、承前启后很重要,页面有头也是有尾

说白了,承上启下就是页面要有一个围绕整体的主要元素,形成一整页视觉效果的聚焦点。

让元素从头到尾的衬托,让左右连贯。

举个例子:

①图中红色圆圈所示。

题目中出现的主要元素,如:头尾元素要保证视觉效果上的对比和一致;

(2)图上的黑色圆圈表示

专题中围绕整体的这个元素在整个页面中一定要拉直,不然会有断裂点的感觉。

如果在具体要求的应用中不能保证总体设计的主要性能,也应尽可能在部分或某些元素的应用中得到保证。

3、背景色要整体,谨慎使用图形“切水豆腐”

页面内容的系统划分尽量不能用图形来进行,整体单页设计多采用单一色调。

对于一些服务平台型的主题活动页面,随处可见一些不同图文系统的设计。自然,这种方法是为了更好、更强烈地区分不同的活动主题,也是设计的一种表现。

对于分类主题,店铺首页,很明显多个图形的分离会不太整体。

如下图:

左图是一整块的深蓝色的情况,沒有一切系统分区,整体页面看见较为统一;下图是分层的浅色调的情况,运用色调开展系统分区,促使整体页面较为开朗和活泼可爱。

(注:并不是不能用多个图形对页面内容进行系统的划分,只是需要看实际需求和主题风格,选择不同的方式主要展示)

4、由点到面整体感,谨记东拼和西凑

如前所述,元素的重复出现是为了更好的强化点面连接的整体感;

但如果整体中出现的元素都是东拼西凑,或者设计风格五花八门,单个页面的完整性还是会大打折扣。

无论是版面设计、字体样式选择、按钮样式、颜色等各方面都必须保持一致,这样才能把单个页面作为一个整体来考虑。

如下图所示:

5、一眼看了3屏多,不做留白艺术就得晕 

单页将所有的信息内容和元素主要集中在一个整页中,所以单页设计毕竟是可以超越三屏的页面设计。

也就是长版的整页有非常大的数据量,所以每个屏幕的长宽比都要适当的 *** 控,这样既能保持屏幕之间的透气性和空白艺术,又能保持室内空给大家释放压力和呼吸的空间。

举个例子:

留白的艺术不是指留白~

在应用空白艺术时,要注意页面上不需要的空白艺术和较大的空白,导致视觉效果在整体视觉效果的连接上的中断。既要保证屏幕能紧,又要保证屏幕能松,让整个页面充满节奏。

6、整体想想,整体做,整体看

整页设计从点到线,再到面,集中体现整体设计理念和主要表现。不仅仅是产出率,更是一个商品详情页(店铺logo)的视觉效果和一个内容区的单独反映。

但是大量的规定规定,我们选择把大部分页面改得像重点,把页面改得像整页的方式,来设计一个极高的、艺术的、有创意的、易用的、平衡的页面。

举个例子:

如下图,放大的实际效果很多,关键点的解决方法和方法都很好。

7、整体专题如何做,重视方式就能破

单页设计的特点是强调整体形式感的表达;

也正是因为过于注重有形式感的条目,所以一整页的实际效果需要有饱满的特色和精湛的艺术创意,这样才能在一般的单页设计团队中避免。

然后吸引客户的注意力,让客户跟随整体设计去感受页面的详细信息内容,对一整页的客户体验和视觉效果产生完整的理解。

举个例子:

左图就是我那时候做的一个圣诞的整体艺术创意页面,以礼结的方式围绕整体设计中。那时候做的情况下,就把整体的礼结原素变大化,做为主导原素去主要表现;下图是一个海外室外专题单页的设计,整体以歪斜感的曲线为主导原素,具备炫酷、健身运动的印像。另外,融合十分有几何形的人物图片促使整体页面的炫酷时足。

8、整体设计小故事化,页面才可以吸引人

如果设计单页,在设计思路之初就为整页设置一个故事,让页面有新颖的主题元素,那么单页的视觉效果对客户来说会更好。

从构思到手法,再到设计,两个作品摆脱了传统电商打折的主要表现。很有意思。你想知道背后的关键点和很多专业知识吗?

9、视差翻转好帮手,单页发展趋势新时尚

滚动字幕动画的特征取决于:

最先它是用于由浅入深的说故事;随后运用极致的丝滑的访问感受,将每个內容间无缝拼接且精致的相互连接部分一些原素去做层次的特效;最终使如今简约的、平扁的页面设计,拥有点晴之处!

如下图,来自蒂芙尼项链。

分享我的经历:

跟随飞翔的天空,洒脱在蒂芙尼项链的纯净世界里。

这里有通往幸福的钥匙,大城市的记忆,诺言信的礼物,海誓山盟。来探索属于你我的蒂芙尼项链吧。

我解释

摇摆不定的小雪花带著观众的视野一步步的去动卡空间全球,纯粹的白手工折纸搭出了欧式的唯美意境工程建筑与城市街景,手工折纸的黑影很倒位,把本来铺平的纸,拥有室内空间和层次感;清爽的湖水绿与纯粹的粉色搭配,彻底界定了爱的童真。滚动字幕技术性的应用,像首曲子由浅入深的去倾听这美好小故事。

多次视差翻转的良好案例分析:

http://memories.sutueatsflies.com/

http://tati-express.arte.tv/fr/

http://philwappler.de/

https://www.sodastreamusa.com/pepsihomemade/

http://nicolauska.sk/

10、H5动画特效新发展趋势,人机交互技术有看头

而H5动画特效的出现,让这个专题变得活灵活现,而不再是一个死板的纯静态画面。

而H5动画特效的出现,让项目整体感觉更像是在看一个精心策划的短篇故事。

如下图:

该设计的版权属于太平洋网络公司。

算一个新的审判例子吧。我也期待以后能做那样的事情!

(仔细揣摩一下。在题目强烈推荐的40款产品中,算是大中小强烈推荐的主题活动!但是里面的创意文案和界面的结合非常优秀,H5技术提高了客户的访问体验,改变了目前大部分的电商平台。静态的数据展示和强制就像是销售产品的方式)!

整体方案策划,故事导向,让客户边看界面边推广产品!还是那种自主创新。现在看一些不符合运营商的方式,但那种方式可能是以后时髦的发展趋势。

最终

总结9个字:整体想、做、看。

总结10句话:

H5动画特效新发展趋势,人机交互技术有看头视差翻转好帮手,单页发展趋势新时尚整体设计小故事化,页面才可以吸引人整体专题如何做,重视方式就能破整体想想,整体做,整体看一眼看了3屏多,不做留白艺术就得晕由点到面整体感,谨记东拼和西凑背景色要整体,谨慎使用图形“切水豆腐”承前启后很重要,页面有头也是有尾店标有一个点,下边设计才好接

注:如有侵犯图片版权,请联系我,感谢设计界同仁给你好看的页面!

创作者:马良再生,微信微信官方账号:非常好研究室

文章作者为@马良再生,未经批准严禁拦截。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/779336.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-04
下一篇 2022-05-04

发表评论

登录后才能评论

评论列表(0条)

保存