像淘宝天猫这样的电商平台，已经开始从之前的拼价格到现在的注重品牌。随着传统品牌的进驻，竞争将会越来越激烈，视觉设计变得尤其重要。因此，我们在进行首页设计的时候更要讲求品牌调性和视觉引导。下面将会结合实例讲述本文的主题——店铺首页设计的五大法则：形、色、质、纹、境。
法则一：形——形状构图
形，顾名思义就是形状与构图。在店铺首页设计中我们要学会利用形状来构图，有趣生动地将页面内容切分为几个区域。当然，设计师除了能有效地划分区域外，还能通过形状有效“引导”用户的视线，为用户提供有效的选择，达到引导用户按照既定的浏览路径阅读页面。
就如某茶叶店铺首页为例，茶叶是一种历史韵味浓厚的产品，因此我们在设计的时候会倾向使用中国风水墨为页面设计的主题风格。根据产品的外形，我们在页面中运用较多圆形的形状来搭配，看似无意，其实饱含深意。
再如以下例子，设计师通过由大到小的形状变化，将用户视觉集中到文字上面，达到引导用户阅读的目的。
再者，在页面设计中善于使用形状，是最简单营造活动气氛的手段。例如，我们要做一个端午节的主题页面可以融入龙船、粽子的形状；中秋节可以融入彩云、月亮、玉兔等形状；大促活动可以结合红包、福袋......这样的例子有太多了，我就不一一举例了。总之，我们在做页面的时候，尽量用图形化思维思考。
法则二：色——色彩搭配
色，当然就是页面的色彩搭配。人们根据以往记忆及经验产生联想，从而形成一系列的色彩心理反应。因此，每一种颜色都有特定的情感认知，我们成为冷暖色调。例如，人们见到红、红橙、橙、黄橙、红紫等色后，马上联想到太阳、火焰、热血等物像，产生温暖、热烈、危险等感觉，使人产生冲动情绪；人们看到蓝、蓝紫、蓝绿等色后，则很易联想到太空、冰雪、海洋等物像，就会产生寒冷、理智、平静等感觉。当然，色彩的冷暖感觉不仅是表现在固定色相上，而且在比较中还会显示其相对的倾向性。例如，同样的色系，明暗深浅的程度不同，给人的感觉也会有所区别。
当拿到首页设计方案之后，我们首先要确定页面的配色方案，确定主色和辅助色，如果能做一个色板那就更好。就如上例茶叶首页中，方案中客户的要求是中国风、清新淡雅、体现高大上的品质。于是，我们就根据客户要求做出了一个配色方案，红色、灰色、黑色这三种颜色搭配营造出一种高端的感觉，再配以白色和浅啡色等辅助色，以及水墨画、木雕屏风、撑油纸伞古典女人等中国风元素，整个首页的轮廓基本出来了。
又如以下例子一样，设计师是通过单色去延伸到整个画面，这样的好处是统一和深刻。而且我们还可以通过明度和色相小幅度的变化来增加色彩的层次感，令画面更富表现力。
法则三：质——质地质感
质，即质地和质感，也就是表现物体的真实感。人的视觉或触觉对不同物态如固态、液态、气态的特质的感觉。在设计中我们可以通过不同手法的运用来表现物体的质感，我们可以尝试从两个方面入手：
1.空间的质感
空间的层次感就如拍照的道理一样，有远有近，有实有虚，这样才会符合人的视觉习惯。虚实相生的处理首发形成的一种特殊的画面意境表达，将画面中的平面变得立体。就如下图为例，我们可以运用或薄或厚的笔触营造画面空间的质感。这样虚实结合的手法，使得用户第一眼就能将视觉中心放到画面的正中央。
2.色彩的质感
色彩的质感是指作品给人的感觉是硬朗还是柔和。有一个方法就是当把作品去色之后，观察作品中表现出从黑到灰到白的存在比例。如果一个作品的黑色比较多那么整体的效果就会显得很沉重，而如果白色很多的话那么整体效果就会显得很苍白。
从上图中，我们可以看到灰不是单纯一种颜色，而是由不同深浅的灰色渐变而来，这样我们就可以将画面的质感丰富起来，色彩的质感就是这么一回事。
法则四：纹——纹理背景
纹，即纹理背景，一张图做得好不好，很大程度上是由背景来决定的。纹理底图用得恰当的话更能省去不少功夫。例如，茵曼主打是棉麻服饰，它的页面都会固定地使用一些麻布、十字纹等类似轻文艺风格的元素，你可千万别小看这些纹理、背景，所谓的氛围就是靠这样的小素材搭建起来的。我们平时要善于建立个人素材库和善于联想，提起中国风就能想到水墨画、剪纸、中国红、脸谱、传统乐器、旗袍等等富有中国特色的元素，提起春节我们就能一些富有中国传统节日气氛的剪纸图案、烟花爆竹、灯笼等背景元素。
当然，除了能想到这些元素之外，我们还要不仅仅限于这些东西，敢于与别人不同，才是作为设计师的灵魂之力。
法则五：境——氛围环境
境，顾名思义就是氛围环境。说到氛围就不得不提另一个词：调性。“调性”这个词常用来描述音乐作品中的旋律和声调。所谓“广告设计的调性”，是指广告画面中所体现出来的广告诉求的感知形象。如从一张店铺首页海报中可到该店的消费人群，生活态度、季节时令、活动促销气氛等。
意境，意义的镜像。如静谧、禅意、幽静等形容词，我们似乎很难说出用了什么颜色或元素就能营造出来。同一个页面有人觉得是欢乐的，有人认为是悲伤的，这往往是由阅读者的经验或体会而决定的。那么，我们应该如何营造页面的意境呢？
如果你觉得上面说得过于高深，或者我们尝试从人对周围的感知来理解。人有两种视觉，中央视觉和周边视觉。中央视觉主要用于直视事物观察细节，而周边视觉则展现是视野中的其他区域，也就是人眼能看到的周边区域。根据国外最新研究表明，多数人对场景的认知源于周边视觉。从这个研究中，我们可以知道人们在看电脑屏幕时会用到周边视觉，而且经常只扫一眼周边视觉区域便以此判定整个页面的内容。因此，我们在营造页面氛围的时候要注意周边视觉的处理，让用户能通过页面的周边视觉感知到店铺的活动主题、品牌风格。另外，营造意境的另一个秘诀就是统一，主题风格统一，色彩统一，形状统一等各种因素都统一才能产生合力作用——营造意境。
俗话说：佛靠金装，人靠衣装。门面做得高档，进来的顾客的消费能力自然高。首页就是店铺的门面，试问您会在街边档买上百元的东西吗？形、色、质、纹、境就是打造一个优秀首页必备的要诀，如果各位好好斟酌这五个字，相信一定能一个让客户满意的首页。此文作者：珊珊，文章出处：大麦电商网
发表评论