基于天猫(淘宝)店铺的网页装修编写
抛弃传统图片式装修的流畅浏览体验
继续浏览
优化浏览体验
HTML+CSS+PNG
由于天猫（淘宝）店铺主页及承接页（落地页）装修模板不足以实现预期浏览效果，所以设计师用Photoshop做出设计稿之后，再用第三方店铺装修工具贴入热区链接，以实现点击商品图片、链接跳转到指定页面等多个目的。
不过这种方法的弊端是浏览效果卡顿、网页加载速度慢最终导致客户浏览店铺体验差、客户流失。这是由于全屏图片占用空间过大、第三方工具代码过于亢杂、客户浏览网速不一所造成的。我的目的就是用网页通用的HTML+CSS代码转换设计稿，去除不需要的JPG图片及繁杂代码，尽可能的用代码语言表示最终实现快速加载页面、优化浏览体验的目的。
案例01
专题页(天猫)
设计目标
聚集头盔类中的夏季头盔，剖析头盔的主要特性，如防晒、防紫外线、通风、轻便、防护能力等，经由一系列的动画特效展示，直观的展现夏盔头盔的特点。
配色说明
主色选用头盔的主打色近黑色，辅色选用更为明亮的绿色来代表夏季，配合文本的白色，整体结构清晰，内容层次分明，有丰富的可读性。
Date：2017.04.17
案例02
店铺首页(天猫)
设计目标
使用扁平化设计风格，制定间距、对齐、字体、颜色等诸多基准，设计时严格按照预定基准执行，精确到像素单位，保证通篇布局严谨，浑然一体。
配色说明
设计时考虑到头盔颜色的统一，选用更鲜明的红色为主色，辅色选用具有强烈对比性的纯白色，使文本阅读更清晰明辨，主标题与副标题均有一定存在感。
案例03
旗舰首页(天猫)
设计目标
作为多个店铺中负责门面形象的旗舰店，用多个不同模块展示店铺产品，再辅以丰富的动画效果，以实现不同于传统头盔类目首页的浏览体验。
配色说明
主色选用头盔的主打色近黑色，辅色选用略显尊贵的金色，表现出低调中的高端大气。黑色与金色对比较为强烈，文本大小分明，易于阅读。
案例04
店铺通设(淘宝)
设计目标
以摄影工作室的风格为基调，页面氛围清新简单，除开必要的图片展示，多以文字说明为主要内容。浅色风格配以风格不同的摄影作品，主次分明，内容清晰易读。
配色说明
依据风格基调，采用浅灰色作为主色，辅色用以白色，页面轻松干爽，文字用黑色展示更便于阅读。
Copyright © fanlasy 保留所有权利 豫ICP备19045970号
