您当前的位置 : 凤凰彩票官网 > 企业文化 > 「10招」教你玩转电商专题页面设计人人都是产品经理

「10招」教你玩转电商专题页面设计人人都是产品经理

时间:2019-01-26 20:09:11 来源:凤凰彩票官网 作者:匿名



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

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

单页设计只是纸上创作和设计的隐喻。

首页出现在图形设计中。设计师使用不同尺寸和材料的纸张在正面和背面自由设计,主要用于折叠,传单和海报。

如下:

从花瓣网的图片

电子商务领域的单页设计更像是对平面单页环境的升级。它不仅具有图形设计的所有设计规则,而且具有许多网站设计功能。

例如,您可以使用新的视差滚动和H5技术使页面与人们更紧密地互动,使他们更像是在浏览页面时阅读故事。

它主要出现在一些促销项目中,例如活动页面,产品介绍页面和商店主页。

如下:

在单页主题的设计中,为了使第一个屏幕到第二个屏幕然后内容部分的视觉间隔更加一致和流畅,有必要充分利用局部对比度和整体关系使页面效果更加完整。

功能页面中的入口点是整个页面中的主线。

平面理论中的点用于聚焦,分散注意力并吸引注意力。

如下:

菜单中的线条用于显示故事情节。

使用一些艺术表达为页面添加一些乐趣和装饰。

如下:

这是整个页面的完成级别。

单页设计不限于完成第一屏设计或单个元素的设计。

它强调从开始到结束的视觉连接,从第一个屏幕到次要屏幕到内容区域到底部,从本地到整体。

我们来看看三个优秀的设计:

接下来是我写的10个主题的技巧。它们主要是重要的理论观点。让我们结合自己的主题来考虑它。

头部地图元素的设计不区分楚和汉。

您不仅可以制作单个页面,还希望制作与下面内容直观相关的头像。

打破第一个屏幕(称为头部地图)和二级屏幕具有显着的色带分离,形式分离,线条分离等。

如下图所示,红色圆圈表示的位置是头部图像的高度。一般头部图像的高度值建议在450到600之间。如果太高,则会浪费空间。所谓的上下连接,即页面必须在整个页面中有一个主元素,以形成整个页面的视觉焦点。让元素头部和尾部回声,上下。

例如:

(1)图中所示的红色圆圈

主题中出现的主要元素是:头部和尾部的元素具有视觉响应性和一致性;

(2)由图中的黑色圆圈表示

整个主题中的这个元素必须一个接一个地沿着整个页面直行,否则就会有断点的感觉。

如果您无法在实际需求应用程序中实现整体设计性能,则应尝试在本地或某些元素中执行此操作。

尽量不要使用颜色块来分区页面内容。整体单页设计使用单色背景。

对于某些平台类型活动单页面,我们经常会看到使用不同颜色块进行分区的设计。当然,这种处理方法是更好地分离不同的活动,也作为一种设计形式。

对于类别主题,商店主页,多色块的分离明显更差。

如下:

左边的图片是整个区块的深蓝色背景。没有任何分区,整个页面看起来更加统一;

右边的图像是块的浅色背景,由颜色分隔,使整个页面更有趣。

(注意:并不是你不能使用多色块来分区页面内容,而是要查看特定的需求和主题,选择使用不同的表来表达)

上述重复元素旨在更好地将整体感觉从点到面连接起来;

但是,如果整体中出现的元素是拼凑而成或样式发生了很大变化,那么单页的完整性将会大大降低。

无论是排版,字体选择,按钮样式,颜色等都是一致的,这样的单页是一个整体。

如图所示:

由于单个页面将所有信息和元素集中在一个页面上,因此单个页面设计也注定是可以超过三个屏幕的页面设计。

由于它是整个页面的长版本,信息量非常大,那么你应该适当控制每个屏幕的高度,既保持屏幕之间的透气性和空白,又给人们一个空间放松和呼吸。

例如:

白色不是特别白。使用空格时,请注意不要在整个可视连接上有可见的断点,因为页面上有空白区域和大间隙。尽量保持屏幕紧密,屏幕松动,整个页面充满节奏。

整个页面设计从点到点强调整体概念和性能。它不仅产生单个屏幕视觉(标题)和内容区域的单独表示。更多要求要求我们放大细节并缩小页面以查看整个页面以完成超高,创意和实际平衡的页面设计。

例如:

处理和技能的细节很棒,如几个缩放效果所示。

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

正是由于过分强调形式感,所以整个页面的效果必须具有丰富的功能和巧妙的创意才能摆脱普通的单页设计。

从而吸引用户的眼球,让用户根据整体设计体验完整的页面信息,形成更完整的用户体验和对整个页面的视觉理解。

例如:

左边的图片是我当时制作的圣诞节创意页面,由整体设计打结。在这样做时,整个礼仪元素被放大并用作表达的主要元素;

右边的图片是外国户外主题单页的设计。基于倾斜的整体倾斜线具有运动和运动的印象。同时,整个页面与非常动态的角色图像一起动态化。

当您设计单页页面时,您可以在构思开始时为整个页面设置故事,以便页面具有新颖的主题,并且单个页面为用户提供更好的视觉体验。

这两项工作,从意图到技术再到设计,都与传统电子商务的折扣性能分开。更有趣的是,您想了解技术细节和更多幕后知识吗?

滚动动画的功能是:

首先,它用于逐步讲述故事;

然后使用完美流畅的浏览体验,将各种内容无缝无缝地连接到一些元素,以实现分层动画;

最后,让当前简约的平面设计有一个阳光充足的地方!如下图所示,来自蒂芙尼。

分享我的感受:

跟随天空,在蒂芙尼的纯净世界中跳舞。

以下是幸福的关键,城市的回忆,情感的礼物,圣约的誓言,探索属于你我的蒂芙尼。

个人解释

雪花从观察者的视线一侧到另一侧,一步一步地发现美妙的世界,纯白色的折纸与西方美学建筑和城市街景,折纸阴影,原始平铺纸,空间和三维;

清新的湖绿色和纯白色的结合完全定义了爱的纯真。

使用滚动技术像第一首音乐一样一步一步地听这个精彩的故事。几个视差卷轴的案例共享:

H5和动态效果的出现使这个话题活跃起来,不再是严格的静态画面。

H5和动态的出现使得主题的整体体验更像是观看精心安排的故事。

如下:

设计版权属于Pacific Network

这是一次新的尝试。我也希望将来能够举一个例子!

(想想看,这个主题推荐了40个项目,这些项目被视为中小型推荐活动!但是文案和图片的结合,加上H5技术增强了用户浏览体验并改变了大多数现有的电子商务平台。显示,强制销售路径)!

总体规划基于讲故事,让用户可以观看屏幕并将其一起出售!或者这些创新现在似乎与运营商有些不一致,但这种方法可能是未来的趋势。

总结9个词:总体,整体,整体

总结10句话:

H5动态新潮流,人机交互

视差滚动助手,单页开发的新趋势

整体设计故事,页面可以吸引人

怎么做整个话题,注意形式可以打破

总的来说,我认为它是一个整体。

一眼看到3个屏幕后,你会头晕而不留空白。

总的来说,记得东平和西樵

背景颜色应该是整体的,使用颜色块“切豆腐”谨慎

保持清醒,页面有一个头和尾巴是很重要的。

头图有点,以下设计非常好接

注意:如果违反了照片的版权,请与我联系,并感谢您为行业同事设计精彩页面!作者:马良重生,号公:好实验室

本文由

版权所有:copyleft © 1999 - 2018 凤凰彩票官网( www.seoexplicado.com)    备案号:陕ICP备11000646号 法律声明 | 在线留言 | 在线招聘 | 在线调查 陕公网安备 61019002000646号