发布时间:2022-3-13 分类: 电商动态
为了
不久前,我刚刚离开汽车,在上个月我负责设计几个核心产品页面。 h5商场的主页设计采用了一些独特的互动和视觉。与大家分享一小部分。
原型设计
让我们先了解h5商城主页的原型版本:
通过原型图,我们梳理了框架的逻辑:产品横幅,3个主要功能btn,2个车辆滑动列表,页脚底部。
最后一件事是第一个屏幕的设计。我们如何让第一个屏幕不使用它?
横幅设计
如果我们遵循原型设计,我们的视觉效果基本如下:
但这种设计很受欢迎。即使你进行这种排版,你也无法摆脱普通的感觉,所以你会一次又一次地想到做出不同的设计。
很快,我找到了一个新的方向:
在UI设计世界中传言iOS11的新设计。许多新产品也借鉴了独特的设计风格,但在h5中,几乎没有h5采用类似的风格,我们创建了一个基于iOS的大卡和投影。独特的横幅设计:
我们结合了iOS11的独特风格,并添加了我们自己的交互设计。关键点在于我们几乎是采用类似设计的第一款h5,采用了parallax.js,独特的视觉差异使得页面变得丰富有趣:
横幅的切换效果采用了深刻而简单的设计:
车辆清单设计
在车辆列表设计中,使用空格而不是划分线和卡:
每个人都知道滑动效果不是gif。
家庭全效渲染
END。
在担任汽车租赁期间,他大胆尝试了各种新款式,并采用了自己的设计语言。虽然他离开了公司,但他仍然希望汽车租赁可以继续以他自己的风格。