初入电商行业的王先生是一家销售单反镜头滤镜器材的天猫商城店主,他很注重产品的质量,却很少在意店铺页面的美观度和用户的体验感,虽回头客好评不断,但由于页面不够抢眼,总是无法吸引更多消费者进店消费。为了网店的发展,王先生找到了小张所在的网页设计团队,希望他们帮助设计一套全新的店铺页面和商品详情图,来提升店铺形象/改善用户体验。

  经与王先生深入沟通,小张针对店铺页面做了如下分析和规划。

  1、需求分析

  设计目标:提升店铺形象,改善用户体验,吸引更多摄影爱好者进店消费。O功能定位:为消费者提供摄影器材的在线购买、咨询和帮助服务。整体风格:店铺的整体风格应结合简洁、时尚、科技感等特点进行设计。

  2、页面规划

  页面规划包括网页布局设计和网页颜色、字体设计,下面分别说明。

  1.网页布局设计

  店铺首页布局设计:根据店铺的功能定位及整体风格,店铺首页的版块结构分为:横向导航栏、Banner、代金券、滤镜分类、推荐商品、商家信息和商品主图展不版块。设置网页宽度为1920像素,版心宽度为1280像素,版块间距为50像素。网页布局和最终效果。

  商品详情图布局设计:

  商品详情图根据店铺首页的风格进行延伸设计,宽度为790像素,采用黄黑相间的色块将商品基本信息、特色介绍和拍摄效果展示版块进行分割,使详情图结构清晰,节奏感十足,既美观大方,又能有效展示产品细节。

  栢塑小提示

  店铺页面不同于企业网站的页面。店铺页面的框架是由商城规定的,店家只负责店铺页面的主体布局、图片和文字内容即可。另外,详情页的框架也由商城提供,因此店主只需提供相应的详情图即可。

  2.颜色与字体

  页面中的标准色使用黑色、白色、蓝色和黄色。正文字体使用常规的微软雅黑字体,以便阅读;标题或需要强调的文字则使用笔画较粗的方正综艺和Humnst777字体,在销售商品时能起到强调和提示效果。