Dreamweaver教程:淘宝店铺首页设计
电商卖家对淘宝店铺设计的要求正在越提越高,区别于京东和拍拍,淘宝店铺首页的设计至关重要,这里是最重要的门面。
淘宝集市店和商城店在首页装修上有一点小区别就是集市店页头那里有个独立的店铺logo展示区域,会对页头的设计产生一定影响。不过这篇文章并不探讨具体的设计,这里讨论的是整个设计规划和设计方法。
我把店铺首页分成4个需要设计的部分(除去这四块,其他根据产品类目的不同各有区分,这里不谈)。
1.页头导航
2.活动主题
3.主推产品
4.产品分类
由于是整个首页的设计,所以一开始就需要一个设计规划。
规划内容一个是店铺风格,一个是信息设计。
原先淘宝店铺的设计就是一个店铺的设计,现在的设计要求已经提升到了品牌化,品牌就应该有一个品牌的样子。店铺设计的重点就是产品陈列的一个设计,但是引入品牌的概念之后,就需要加入更多品牌的元素。
品牌设计里的VI基本要素系统主要包括:企业名称、企业标志、标准字、标准色、象征图案、宣传口语、市场行销报告书等。
其在店铺里的应用我们可以来分析下:
1.店铺的LOGO和名称肯定是有的,不需要我们重新设计。
2.标准字即便已经是名牌也未必有,我们在店铺设计里需要做的就是统一字体的应用,不能出现各种各样的字体,字体选择要少而精,这里包括里中文字体和英文字体。
3.标准色也是没有的,我们首先要参考logo的色彩,其次是区分竞争对手的颜色选择,还要参考行业和产品的色彩特征,综合之,一般情况下我们需要三个颜色,一个是基础色,一个是辅助色,还一个是突出色。实际运用中当然不可能只用三个颜色,这三个颜色是作为基准色存在的,不管店铺怎么改版,这三个颜色都还在,这样才能保证店铺设计的统一及连贯。具体到产品,例如女装女鞋,用的颜色很多很杂,但是在某些不容易改动的位置图片上我们使用的色彩必须是这几个基准色。
4.象征图案也可以说是辅助图形,怎样才能让消费者在见不到你店铺logo的情况下知道你是谁,消费者从搜索直接进入你的商品详情页她能知道你是谁么?象征图案的设计意义就在这里,它是和标准色组合使用的,一个店铺不能只靠logo来识别,其他还需要识别的地方就要靠标准色和象征图案来完成。
5.宣传口语往往就是一句话,它可以是品牌的一个定位,也可以是品牌的风格描述,也可以一句情感化的广告语。在理想情况下,店铺的设计应该围绕这句宣传口语来进行,这是很难的但也是最重要的,这里强调文案功底和设计功底,一般的店铺都没法做到这个层次。
店铺风格设定完成后我们开始进行信息设计。
信息设计指的是设计页面的哪一部分放什么产品什么文案什么内容。之所以把信息设计放到前面是因为这是核心,设计的本质是把信息视觉化,方便信息的传播,自然信息本身是至关重要的。
运营和美工间最应该协调的部分就是信息设计,导航里面要放什么内容,活动主题是什么要放什么文案文案的主次,主推产品有哪些,它们之间的推介顺序应该是什么样的,产品分类里面应该放多少个产品是否需要主次顺序等等,只有这些都商量好了,后面的设计才能更顺利地进行,否则后面对设计稿的改动次数会更多。这里对美工的运营思维要求比较高,我们来看下需要做哪些协调工作。
1.导航块
总共需要几个导航分类内容,是否需要放品牌文案,是否需要着重表现收藏店铺,是否需要放活动内容等等。
2.活动主题
主题内容是什么,文案的主次顺序,是否有需要重点展示的产品等等。
3.主推产品
主推产品有哪些,它们有怎样的区别和定位,它们的推介顺序是什么样的,它们的核心卖点是什么,是否需要突出价格和折扣等等。
4.产品分类
店铺产品总共有几大分类,页面从上至下的摆放顺序是什么样的,每个分类模块里面放几个产品,产品是否需要主次区分,是用方格矩阵还是更灵活的展示方式,单个产品是否需要突出展示价格或折扣等等。
这个时候不着急出设计稿,而是需要一张信息图表,把各个模块的信息设计完成后再开始做设计稿才是更合理和高效的设计。
接下来的部分就到了我们平常的设计的部分了,这里不谈。
想法还比较初级,有待更多的学习和实践。
Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |