小米商城页面设计。从网页使用者的视角来看待问题以及如何解决,将自己看做使用者来思考希望此页面展现出什么样的效果。首先是网页排版,在设计页面时多次调成大小和布局力求还原小米商城的页面,各组块之间不能相互矛盾和遮挡,色彩也清晰了然。页面上方的搜索栏和购物车图标在鼠标掠过时会自动弹出拉框,购物车悬停,设置动画过渡。以及中间轮播产品图片的组块是重点编写的部分,页面加载动画,从头到尾的速度是相同的并无限循环,设置鼠标经过时图样改变,鼠标变小手。设置固定宽度和高度而不是用百分比来设置大小,高度会等比例缩放。
广告轮播旁的导航栏,一竖线要注意对其。鼠标经过时弹出所有在售卖的商品型号小图一览,方便浏览页面的人点击和寻找到自己心意的产品。每一列的个数不同,所以在导航栏不能设置百分比宽度要设置固定宽度。规定段落中的文本不进行换行,显示省略号来代表溢出被修改的文本。
页面下方有视频内容,video并列,鼠标经过时视频封面会放大。
页面下的底部链接较密集,超链接的形式出现。