8项目八  网店页面设计方法

 

项目描述：

初学Photoshop的同学平时除了跟着老师多做练习以外，另一种学习方法就是模仿优秀作品，经过大量且长时间的练习才能掌握设计的技巧。离开了老师或者模仿，自己独立制作时总是出现排版或思路上的困难，本章节就是把网店页面的基础设计技巧用图例的方式展现出来，让同学们通过案例快速掌握页面设计上的小技巧，自己在使用Photoshop制作时可以有效避开设计缺陷。

 

项目开展：

8.1  任务一  网店LOGO设计方法

8.1.1 任务目标

       

知识目标	技能目标
● 能理解LOGO的概念；   ● 能了解LOGO的设计思路；   ● 能理解LOGO制作者的表达。	● 能使用LOGO设计思路完成关键词组的挑选；   ● 能运用不同的LOGO设计方法进行LOGO设计；   ● 能根据设计要求，选取合适的关键词组，完成LOGO制作。

 

8.1.2  任务知识链接

一、LOGO的概念

LOGO设计，与标志设计同义，是指商品、企业或网站等为品牌、名称、主题或活动等设计标志的一种行为。LOGO是徽标或商标的英文说法，拥有公司的识别和推广的作用，通过形象的LOGO可以让消费者记住公司名字和品牌文化。LOGO设计有很多种类，例如：文字LOGO、图形LOGO、图像LOGO和结合广告语的LOGO等。

本章节主要学习网店的LOGO设计。每个LOGO都有不同的含义，其各自代表不同的意义和作用。LOGO以简练的图形符号，表达一种特定的信息，是一种特别的标识。网店LOGO常常采用以下几种设计方式。

1、直接表达，直接使用网店的名、网店拼音或英文缩写来设计LOGO，这种表达方式简单通俗，很容易辨认；

2、间接表达，例如使用同音字或者用图案来表示，即可美化LOGO又可表达网店所销售的商品；

3、联想表达，通过文字和图案让人引发联想，在不同消费者的脑海里产生不同画面，起到千人千面的效果；

4、象征表达，例如天猫就用一只猫来做LOGO，“T”字形的猫身的线条流畅婉约，赋予了它女性的的特质，象征着极具魅力女性正享受着购物的乐趣。

LOGO就是将较为复杂的信息，通过文字和图案的形式，在简洁美观的图形之中传递集中概括想表达的内容，让人更容易辨识，从中让人得到启发，接受信息，加深对网店或品牌的记忆。

二、LOGO的表达

1、展现个性化

一个网店的优质LOGO，要有自己的个性化表达，是独特而且唯一的，不能在网上随便下载或者直接复制粘贴，LOGO的设计要融入自己的想法，结合店铺特点，呈现店铺商品的信息，就算在网络里有成千上万个同类型的网店和商品，也要利用网店的LOGO凸显独特的气质。

2、简洁易记的图形

LOGO尽可能用简单的图形来表达，用一个看完后容易记住的符号来呈现，如果图形太过复杂，大家不容易记住也很容易弄混。

图8-1 Starbucks和Starpreya

Starbucks和Starpreya都是销售咖啡的品牌，两个品牌LOGO都很相似，如图8-1所示。星巴克大家比较熟悉，另一个LOGO看完后很容易和星巴克弄混，不容易被记住。星巴克为了和这个品牌的咖啡有效区分，2011年通过设计团队Lippincott的协助，重塑了品牌，如图8-2所示。放弃了绿色圆圈，加强了星巴克英文名称，强调独一无二的品牌。

 

图8-2 星巴克LOGO

3、有效准确的表达

设计LOGO要首先考虑行业的属性，准确表达网店或者商品的自带属性，例如：苹果品牌的LOGO是一个被咬了一口的苹果，但并不适合用在水果行业，因为这个LOGO的设计带有该行业的属性特点，金属质感的设计，给大家带来的是现代科技感，色彩、高光与阴影的运用强化了冷色调，在形态与质感上都与电子行业贴合，与水果行业新鲜、绿色或有机的自带属性不符。

三、设计LOGO的思路

设计LOGO一般会使用两组或者两组以上的元素进行设计，使LOGO够通过这些元素组合能表达概括的内容。开始准备设计之前，根据网店或者商品的信息，有针对性的展开市场调研，调研同类型网店、商品的定位，和消费者关于行业的认知，根据调研结果提炼精准的设计元素进行LOGO设计，根据调研关键元素进行头脑风暴展开联想，收集最终关键组成元素进入设计，能更加准确瞄准用户人群展现LOGO特性。

图8-3 设计思路

进行头脑风暴展开联想，挑选出精准设计元素，展开相关词语的任意联想，可以是纵向联想也可以是横向联想，让设计元素达到足够多的量，便可从量里面挑选最符合和最有针对性的关键词。

例如下面这个例子，根据“甜品”这个商品，做市场调研，提炼了跟“甜品”有关的关键词，进行头脑风暴展开相关联想，如图8-3所示。

图8-3 头脑风暴的联想图

经过头脑风暴，纵向的可以从“甜品”使用什么材料开始联想，有牛奶、奶油、巧克力或糖等；横向联想由“甜品”的种类或品质等方面，让我们得到了很多关于“甜品”的设计元素，从这些展开的关键元素里，挑选都符合商品的关键精准设计元素，“白色”、“甜筒”、“巧克力”和“品牌”几个关键词进行组合创意，如图8-4所示。结合挑选出来的关键信息进行设计，最终设计方案，如图8-5所示。

小贴士：选择不同的关键信息作为设计元素，就可以组合成不同的LOGO，不同的设计者根据网店需求和自己的设计习惯来进行挑选，挑选的结果不必相同。

                                         

8-4  关键精准设计元素

图8-5 最终LOGO设计效果

小贴士：提炼元素展开头脑风暴进行联想时需要记住以下几点。

1、自由展开联想，讨论跟主题有关的内容，没有任何限制，尽可能的发散思维，从不同维度提出不同的关键词；

2、不用评论关键词好坏，头脑风暴过程中提出的设计元素关键词，都不要评价好或者坏，否则任何人的评价都会影响联想结果；

3、设计元素尽可能的多，要有足够的量，尽可能多的展开联想，从量里面寻找优质的关键词。

 

8.1.3  任务知识拓展

一、常见LOGO设计分类

1、以汉字、字母为主的LOGO

这种类型的LOGO很常见，如图8-6所示。分别是唯品会、今日头条、Soul聊天和爱奇艺的LOGO。直接使用名称作为LOGO，辨识度很高也有很强的关联性，消费者第一眼就能正确认知，强调企业或品牌的认知度，让人过目不忘，简单高效。

      

图8-6 汉字、字母LOGO

单纯的文字设计很实用，但是比较没有设计美感。若仅仅使用英文设计LOGO，26个英文字母很容易重复，对于中国消费者来说，记住相同相近字母LOGO不那么容易。比如Adobe整个系列都采用了英文字母来做LOGO图标，把字母规范放入方形或者圆形里，简单易记。如果遇上多字母组合，LOGO界面也不是那么友好，如图8-7所示。

图8-7 英文LOGO

2、以图片为主的LOGO

我们电脑或手机里的游戏几乎都使用图片作为LOGO，其它分类的软件较少采用这种方式设计LOGO，这与使用游戏的用户群体定位有很大关系。游戏作为娱乐类型的产品，用户可以接受LOGO色彩鲜艳，画面造型复杂，这种类型的设计可以在一定程度上吸引想玩游戏的用户，把LOGO设计得颜色丰富，画风二次元，可以增加用户的点击概率，或者直接使用游戏中的人物造型，直观表达这款游戏的风格，直接让用户通过LOGO分辨，这款游戏适合的人群性质，如图8-8所示。

图8-8 图片LOGO

除游戏使用这种类型的LOGO以外，其他很少用到，比较容易给人留下小成本制作的印象，以及使用时会有很多广告、插件，甚至是木马病毒的感觉。

3、以代表性主体为主的LOGO

这种类型的LOGO没有很多的色彩，复杂程度也一般，早起产品或者商品都比较采用这种设计风格，以某一特定的主体为代表进行设计，如图8-9所示。携程的LOGO是海豚，QQ的LOGO是企鹅，京东的LOGO是狗狗，都是可认知的某一主体，并且具有代表性，久而久之，消费者一听到或者看到，第一时间就马上想到该企业或者品牌。这种设计比较符合大众审美，LOGO展示出来的感觉比较传统，不一定会特别吸引人但很有特点，以代表性的主体设计LOGO，属于比较稳重的风格。

        

图8-9 主体LOGO

4、以极简造型为主的LOGO

这种类型的LOGO一般都具有比较强的设计性，使用以极简造型为主的LOGO并不是很多，主要针对年轻人，线条简单彩色也不是很多，没有过多的复杂造型，属于比较潮流的一种LOGO。这种类型的LOGO第一眼不容易被辨识，简单的造型让很多同类型LOGO比较难区分。不过在一堆花里胡哨的LOGO当中，极简的类型还是很容易被辨认，如图8-10所示。分别是爱回收、丁香妈妈和LOFTER社区。

        

图8-10 极简LOGO

 

二、LOGO的设计方法

1、加减法

加减法是图形设计中最常见、最实用的方法，把两个或两个以上的设计元素进行组合，形成一个全新的图形。将两个或两个以上设计元素的图形组合在一起，这种组合方式可以相加、相减或相交等，组合中包含了每一个设计元素，但是整体的外形已经不是原来的图形，而是找到各元素间可以巧妙衔接起来的点、线或面，由设计需求而得到各元素间的不同组合，形成各种新图形。加减法主要以下三种形式。

（1）分离

两个或两个以上设计元素使用加法进行组合，各设计元素之间互不接触，用“A+B”的方式进行设计。例如（如图8-11所示）：用一个小花冠素材和一颗桃心相加，就构成了一张小公主少女心的图像组合；一个字母Y和一个字母T相加组合，构成一个酒杯图案的LOGO。

       

图8-11 分离组合的LOGO

（2）正负

这种方法是两个或两个以上的设计元素使用减法进行组合，用“A-B”的方式设计图形，A部分里面有的，可以减去B部分。在LOGO设计中，英文字母经常使用这种方法来设计，字母比较简单，而且大多数都是可以全部闭合或者半闭合的结构，也可称为全包围或半包围。例如：一个字母D和一个字母R使用相减的方法设计LOGO，字母“O”是一个包围式结构，中间有一个可以调整的空间，可以利用这一特点来做正负图形，使用正负法设计“OT”两个字母，得到两个基本图形，如图8-12所示。不同设计者可以根据需要设计出多种图形，本案例举两个图例说明。

图8-12 相减法字母LOGO

正负形又可以用阴阳的方式表达，在一个图形中，用包围或者半包围的方式，填充颜色的部分是一部分图形，另一部分就不填充颜色，相当于是空白，但这部分空白也是另一个图形，一般空白部分没有其他部分明显，所以空白部分一定要尽可能简洁易懂，具有较强的辨识性，最典型的代表就是太极图（如图8-13所示）和Yago perdana设计的CAT标志。

    

图8-13 正负形LOGO

（3）相交

这种方法是两个或两个以上的设计元素相互有重合，可以是完全重合，也可以重合某一部分，你的图形里有我，我的图形里有你。例如（如图8-14所示）中国青年志愿者的LOGO，可以通过相似的部分合并，爱心、手掌和和平鸽三个设计元素，更好的突出志愿者的意义；另一个就是大家熟悉的阿里巴巴LOGO，由字母“a”和一张笑脸两个设计元素相交组合，“a”是开始，也代表着优秀，一张笑脸，象征着快乐工作。

     

图8-14 相交的LOGO

2、替代法

替代法就是通过颜色和形状等要素，把某一个设计元素改色、变形、增加或减少等，使其变成另一个元素，仍和原来的设计元素存在联系，有一定的辨识性，得到一个可以介于两个元素之间的新图形。这种方法设计的LOGO在，设计前后的图形都是比较相似的，能清晰分辨出LOGO的表达。例如（如图8-15所示）每日瑜伽LOGO，是Yoga英文首字母的样式，同时也是一个人在做着瑜伽姿势；e代驾的LOGO也有同样的效果，即是字母“e”，也是一个方向盘，很好的体现了代驾的意思；柳州柳盛螺蛳粉的LOGO，用曲线线条替代“柳”字的木字旁，意味着螺蛳粉。

          

图8-15 替代法的LOGO

3、几何法

几何法就是把文字或者图案放入几何形状中，或者在文字或图案中设计几何图形，让LOGO更有设计感。利用几何的图形把设计元素表现出来，一般使用圆形、矩形或不规则形状等，这种设计方法也比较常见，如图8-16所示。分别是腾讯视频、好看视频和央视频的LOGO。

          

图8-16 几何法的LOGO

我们可以举一个实例，例如住小帮的LOGO（如图8-17所示），就是重新设计了“住”字，中文都是方方正正的，如果设计成为矩形也是规规矩矩的，为了凸显“住”字的特点，这个LOGO给字体设置了不同的颜色，形状看起来更加可爱，也像一间小房子，更加形象的展示了企业与LOGO的关联性。

      

图8-17 “够”字LOGO

4、图案法

图案法可以根据设计需要直接按照商品图片或者是人物形象进行临摹。这种LOGO线条和颜色相对来说都比较多，看起来比较复杂。如果使用这种制作方法，遇到复杂的商品图片或是人物形象，就需要进行优化调整，把多余的部分简单化，让重点的部分能够很好地在LOGO里体现出来，如图8-18所示。分别是世界知名品牌商标联合利华和肯德基。

    

图8-18 图案法的LOGO

使用图案法的过程中要注意内容的优化和适当调整，要让图案和原图能够保持一定的相似度，有需要保证LOGO的可传播性和可记忆性，图案法中的LOGO颜色也可以相对的增多，配色要干净不要太乱。例如苹果LOGO的设计实例，如图8-19所示。

图8-19 舜的LOGO