商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > edf壹定发娱乐官网登录 > 网站设计 >

“不一样的极简设计”—凹凸租车H5商城首页设计

发表日期:2018-01-05 15:24edf壹定发官网登录浏览次数: 本文关键词:“,不一样,seo,极简,设计,seo,—,凹凸,租车,序,

  序

  前不久刚从凹凸租车离职,在最后的一个月中自己负责了几个核心产品页的设计,其中h5的商城首页设计,自己用了些与众不同的交互与视觉。在这里跟大家做一个小小的分享。

  

“不一样的极简设计”—凹凸租车H5商城首页设计

 

  原型设计

  我们先了解下h5商城首页的原型图版本:

  

“不一样的极简设计”—凹凸租车H5商城首页设计

 

  通过原型图,我们梳理了框架的逻辑:品宣Banner、3主功能btn、2车辆滑动列表、footer底部。

  最终要的就是第一屏的设计,我们如何让第一屏做的与众不用呢?

  Banner设计

  如果按照原型设计,我们的视觉效果基本如下:

  

“不一样的极简设计”—凹凸租车H5商城首页设计

 

  但这样设计很大众,即便你这么做排版,都脱离不了普通的感觉,于是自己一而再再而三的再思考如何做出一个与众不同的设计。

  很快,自己找到了新的方向:

  

“不一样的极简设计”—凹凸租车H5商城首页设计

 

  iOS11新的设计已经响遍了UI设计界,很多新产品也借鉴了独特的设计风格,但在h5中,几乎没有h5是采用了类似风格,而我们基于iOS的大卡片和投影,创造了一种与众不同的banner设计:

  

“不一样的极简设计”—凹凸租车H5商城首页设计

 

  我们结合了iOS11的独特风格,在它的基础上增加了属于我们自己的交互设计,关键之处在于我们几乎是首个h5采用类似的设计,并采用了parallax.js,独特的视觉差让页面变得丰富有趣:

  

“不一样的极简设计”—凹凸租车H5商城首页设计

 

  banner的切换效果用了深入浅出设计:

  

“不一样的极简设计”—凹凸租车H5商城首页设计

 

  车辆列表设计

  车辆列表设计中,用留白来代替分割线和卡片:

  

“不一样的极简设计”—凹凸租车H5商城首页设计

 

  滑动效果就不做gif了,大家都了解。

  首页完整效果图

  

“不一样的极简设计”—凹凸租车H5商城首页设计

 

  END.

  在凹凸租车任职期间,自己大胆的尝试了各类新风格,并融入了自己的设计语言,虽然离职,但还是希望凹凸租车能在自己风格率领中延续下去。

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.fridaandfauna.com/news/wzsj/6948.html

网站设计案例推荐

热门文章

揭秘2017年最新的网站快速排名设...

网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

日期:2017-06-30 浏览次数:5386

终于等到你!2017年2月设计圈实...

随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...

日期:2018-04-01 浏览次数:649

现代404页面设计趋势分析与案例...

每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...

日期:2018-02-27 浏览次数:648

商丘建站公司:内行讲堂!让设...

你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...

日期:2018-04-15 浏览次数:633

商丘网站维护:如何写出一个完...

本文对如何写出一个完美的错误信息,进行了3个重要组成部分的分析。 每个系统都会有无法正常工作的时候。可能是用户的错误或系统的失败。在这两种情况下,以正确的方式处理错...

日期:2018-05-27 浏览次数:627

相关文章

民权企业logo标志的重要性详细解...

LOGO是一个认知性很强的东西,不仅方便人们记忆,还能帮助品牌在众多同类产品和企业中能够脱颖而出。LOGO作为公司或品牌的标识,起到了至关重要的作用。 企业为什么需要LOGO? 1、...

日期:2018-08-06 浏览次数:192

对比这10个注意事项,你的网页...

对于网页而言,视觉信息的传达至关重要。用户通过页面获取信息,文字、图片、图标、按钮、表单等UI元素都承载着不同类型的信息。在这其中,文字的作用尤其巨大。排版设计的时...

日期:2018-01-05 浏览次数:67

如何正确的画出功能逻辑图?...

当我们需要设计任务型功能的时候,除了基础的线框图和交互,更需要提前搞清楚整个功能的内部逻辑流程,简称功能逻辑图。 举几个大家熟悉的任务型功能作为例子,方便大家理解概...

日期:2018-01-05 浏览次数:80

如何设计一个简单的新闻聚合产...

如何设计一个简单的新闻聚合产品?文章介绍了制作极简的新闻聚合产品的7步骤,好奇的你和我一起来看看。 你知道在三四线的县城,用户在哪里看新闻么?不是在今日头条里,而是...

日期:2018-01-05 浏览次数:77

长滚动页面的最佳实践...

在这篇文章中,作者将讨论一些长滚动的优势和需要考虑的快速提示。 长或无限滚动的网站最近越来越普遍,这不仅仅是趋势或巧合。长滚动的技术允许用户来回移动大量的内容,且不...

日期:2018-01-05 浏览次数:70

随机推荐

用户体验设计:完美的提示消息...

《网页设计综合指南》(三):...

交互设计自查表...

超全面!腾讯设计师做了100个弹...

从零开始设计一款APP之ANDROID设计...

杜蕾斯让人高潮迭起的海报,用...