请选择 进入手机版 | 继续访问电脑版

作品展示

原创作品:天空之城_0012

系统分类: 机器人创想秀 - 技术流

作品版权:天空之城_0012 版权所有,禁止匿名转载;禁止个人使用。

天空之城_0012

2015-6-20 23:49:51

作品亮点:

以科沃斯品牌为基础的一次web前端开发

作品说明:

以科沃斯品牌为基础设计的一个虚构的科沃斯DT85专卖店(在线预览地址http://htmlpreview.github.io/?https://github.com/Leotw/Webpreview/blob/master/20150524/DT85/index.html)由于DT85朵朵的问世取得了非常不错的销售业绩,因此我以地宝朵朵为主题,结合一些科沃斯品牌元素以及当今流行的网页设计风格,重新设计了一个虚构的朵朵销售平台,由于技术、成本、时间有限,这个作品只有网页前端,没有服务器,而且不是官方授权,因此仅限于作品展示。

  • 概要设计
主要开发技术:html、css、javascript、ajax

主要框架:jquery、fullpage.js、jquery.fullpage.js、jquery.fullpage.css
页面主要结构:在主页index.js的基础上用ajax调用其它页面,由于ajax的运行,每次打开其他页面不需要重新加载网页,因此比<a></a>的点开方式更快捷(由于本作品是存放在github博客上,每次运行需要解析,因此无法使用ajax,页面的打开仍然采用锚点方式打开)

index

index


2.网页设计以及布局
基本设计:产品页面主要使用采用朵朵产品的表面的一部分颜色,以#211a17为网页基础背景色,在表达一些比较活泼的应用时页面则以一些低饱和度的色彩轮换。页面的表现完全以产品朵朵为主,通过产品图与文字搭配,空出足量的留白来奠定我们的品牌感。海外宣传页则以#3cc7af/#333/#003366三种主要色贯穿,其中#003366由VI色改编,是海外宣传页头屏的主要色。在字体方面由于一些好看的淘宝页面常用字体如方正兰亭系列,考虑到用户毕竟都不一定是专业设计人员,电脑上很少安装此类字体,所以一律采用微软雅黑。

_MG_0095-1.png web_40.png
app_01_01_04.png ser_01.jpg

css布局:产品页面基本都有共同的头部导航以及不同的主体元素,网页整体都能适应不同屏幕,并且主要内容都进行居中设计,满足一定的响应式。
2.JPG

海外宣传页的布局则在尾部多出百度地图的框架载入区

百度Map

百度Map


3.交互设计
主要使用javascript和框架jquery进行开发。
主要动画包:<1>shane.js
shane.js是由科沃斯电商二部的tek店长徐新峰编写的基于jquery的动画包,包含几款常用的网页设计过渡特效,在封装与功能上做得非常棒。
<2>fn_mousewheel.js
fn_mousewheel.js是由我在jquery与jquery.mousewheel.js的基础上整合改写的一个页面滑动插件,目前这个插件的封装性比较差,功能上比较脆弱,因此只能用于一些固定布局的页面
<3>scrollReveal.js
scrollReveal.js是目前非常流行的一款页面过渡插件
<4>jquery.fullPage.js
是基于jquery和jquery.fullPage.css的页面基于滚轴滑动的插件
<5>XXXConfig.js
各类动画的整合文件。





其他作品
返回列表