淘宝美工培训之淘宝店铺首页设计:店铺风格和信息设计
作者:一网学   最后更新时间:2014-09-03 17:21:05

电商卖家对淘宝店铺设计的要求正在越提越高,区别于京东和拍拍,淘宝店铺首页的设计至关重要,这里是最重要的门面。 淘宝集市店和商城店在首页装修上有一点小区别就是集市店页头那里有个独立的店铺logo展示区域,会对页头的设计产生一定影响。不过这篇文章并不探讨具体的设计,这里讨论的是整个设计规划和设计方法。一网学,致力于网页设计培训、UI设计培训、淘宝美工培训,平面设计培训,是最好的远程设计培训学校。

我把店铺首页分成4个需要设计的部分(除去这四块,其他根据产品类目的不同各有区分,这里不谈)。

1.页头导航

2.活动主题

3.主推产品

4.产品分类

由于是整个首页的设计,所以一开始就需要一个设计规划。


规划内容一个是店铺风格,一个是信息设计。

原先淘宝店铺的设计就是一个店铺的设计,现在的设计要求已经提升到了品牌化,品牌就应该有一个品牌的样子。店铺设计的重点就是产品陈列的一个设计,但是引入品牌的概念之后,就需要加入更多品牌的元素。 品牌设计里的VI基本要素系统主要包括:企业名称、企业标志、标准字、标准色、象征图案、宣传口语、市场行销报告书等。


其在店铺里的应用我们可以来分析下:

1.店铺的LOGO和名称肯定是有的,不需要我们重新设计。

2.标准字即便已经是名牌也未必有,我们在店铺设计里需要做的就是统一字体的应用,不能出现各种各样的字体,字体选择要少而精,这里包括里中文字体和英文字体。

3.标准色也是没有的,我们首先要参考logo的色彩,其次是区分竞争对手的颜色选择,还要参考行业和产品的色彩特征,综合之,一般情况下我们需要三个颜色,一个是基础色,一个是辅助色,还一个是突出色。实际运用中当然不可能只用三个颜色,这三个颜色是作为基准色存在的,不管店铺怎么改版,这三个颜色都还在,这样才能保证店铺设计的统一及连贯。具体到产品,例如女装女鞋,用的颜色很多很杂,但是在某些不容易改动的位置图片上我们使用的色彩必须是这几个基准色。

4.象征图案也可以说是辅助图形,怎样才能让消费者在见不到你店铺logo的情况下知道你是谁,消费者从搜索直接进入你的商品详情页她能知道你是谁么?象征图案的设计意义就在这里,它是和标准色组合使用的,一个店铺不能只靠logo来识别,其他还需要识别的地方就要靠标准色和象征图案来完成。

5.宣传口语往往就是一句话,它可以是品牌的一个定位,也可以是品牌的风格描述,也可以一句情感化的广告语。在理想情况下,店铺的设计应该围绕这句宣传口语来进行,这是很难的但也是最重要的,这里强调文案功底和设计功底,一般的店铺都没法做到这个层次。


店铺风格设定完成后我们开始进行信息设计。

信息设计指的是设计页面的哪一部分放什么产品什么文案什么内容。之所以把信息设计放到前面是因为这是核心,设计的本质是把信息视觉化,方便信息的传播,自然信息本身是至关重要的。 运营和美工间最应该协调的部分就是信息设计,导航里面要放什么内容,活动主题是什么要放什么文案文案的主次,主推产品有哪些,它们之间的推介顺序应该是什么样的,产品分类里面应该放多少个产品是否需要主次顺序等等,只有这些都商量好了,后面的设计才能更顺利地进行,否则后面对设计稿的改动次数会更多。这里对美工的运营思维要求比较高,我们来看下需要做哪些协调工作。

1.导航块 总共需要几个导航分类内容,是否需要放品牌文案,是否需要着重表现收藏店铺,是否需要放活动内容等等。

2.活动主题 主题内容是什么,文案的主次顺序,是否有需要重点展示的产品等等。

3.主推产品 主推产品有哪些,它们有怎样的区别和定位,它们的推介顺序是什么样的,它们的核心卖点是什么,是否需要突出价格和折扣等等。

4.产品分类 店铺产品总共有几大分类,页面从上至下的摆放顺序是什么样的,每个分类模块里面放几个产品,产品是否需要主次区分,是用方格矩阵还是更灵活的展示方式,单个产品是否需要突出展示价格或折扣等等。 这个时候不着急出设计稿,而是需要一张信息图表,把各个模块的信息设计完成后再开始做设计稿才是更合理和高效的设计。 接下来的部分就到了我们平常的设计的部分了,这里不谈。 想法还比较初级,有待更多的学习和实践。


                            【一网学,淘宝美工培训,我的未来我设计】


                           想学习更多淘宝美工知识请进:淘宝美工培训

上一篇:淘宝美工培训教程之PS淘宝白色背景的商品修图方法

下一篇:淘宝美工培训之ps淘宝图片教程:把包包背景抠掉

其它免费教程

拯救拖延症!设计新人如何做好时间管理(GTD)?

时间:2015-11-17 点击:1412

小编:吐血推荐!今天heidixie(阿里资深设计师)这篇教程既是写给设计师的也是写给在职场中的所有...

PS教程:教你如何临摹复古的旧电视图标

时间:2015-11-24 点击:1268

小编:今天p大点s给大家带来电视机图标的绘制,效果精致又比较复古,文章传授了许多实用的技巧,内附源文...

一张图告诉你色彩心理学在网页设计中的应用

时间:2014-02-24 点击:2876

随着读图时代的到来,设觉设计在我们网站的设计中的地位越发重要。同时,色彩在我们的视觉感知中扮演极其重...

photoshop中色阶调节教程

时间:2014-03-21 点击:2733

色阶是表示图像亮度强弱的指数标准,也就是我们说的色彩指数,在数字图像处理教程中,指的是灰度分辨率(又...

超全面的移动端尺寸基础知识科普指南【UI移动端尺寸】

时间:2015-04-21 点击:1358

@十萬個為什麽 :初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花...

更多设计教程>>


在家就能免费试听
多了解下对你最终选择总是有帮助的
姓名:
电话:
Q Q:
答案:
邮箱:
留言:
提交试听申请