1.5 电商视觉设计的规范与规则

遵循电商视觉设计的规范与规则可以保证电商视觉设计的可行性与可用性。下面分别从单位介绍、页面结构、栅格系统和文字规则这4个方面展开讲解。

1.5.1 单位介绍

1.英寸

英寸（inch，in）是英式的长度单位，也是用于表示显示设备尺寸的单位，一般1in≈2.54cm，如图1-11所示。

2.像素

像素（pixel，px）是组成屏幕画面最小的点。电商视觉设计中，像素是用于表示页面尺寸的单位，如图1-12所示。

分辨率（resolution）即屏幕中像素的数量，它等于画面水平方向的像素值×画面垂直方向的像素值。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细，如图1-13所示。

1.5.2 页面构成

1.店铺首页的页面构成

在PC（Personal Computer，个人计算机）端中，店铺首页通常由店招与导航、轮播海报、优惠券、分类模块、商品展示和底部信息构成，如图1-14所示（全图见二维码）。在手机端中，店铺首页除了尺寸的变化，其页面构成与PC端的几乎相同。设计部分店铺首页时，设计师可根据商家需求，自行选择加入文字标题、店铺热搜、排行榜和逛逛更多等模块，如图1-15所示（全图见二维码）。

2.商品详情页的页面构成

在PC端中，商品详情页通常由主图、左侧区域以及详情区域构成，如图1-16所示（全图见二维码）。在手机端中，商品详情页除了尺寸的变化，其页面构成与PC端的相比缺少了左侧区域，如图1-17所示（全图见二维码）。

1.5.3 栅格系统

栅格系统也称为网格系统。设计师利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或单元格，再以这些单元格为基准，进行页面的布局设计，使页面布局规范、简洁、有秩序，如图1-18所示。

1.栅格系统的组成

（1）单元格

栅格系统由格子组成网，因此其基本单位是单元格。栅格系统需要先定义好栅格的最小单位，然后以最小单位去定义栅格系统。在PC端，常见的最小单位有4像素、6像素、8像素、10像素、12像素。目前主流计算机设备的屏幕分辨率在竖直方向与水平方向上基本都可以被8整除，同时以8像素作为最小单位，视觉上也能感受到较为明显的差异，因此推荐使用8像素作为单元格的边长，如图1-19所示。使用8像素作为单元格的边长建立网格后，便需要使用8的倍数设置元素及元素之间的间距尺寸。同时注意不要全都套用8的倍数，可以优先用8像素，当跨度太大时也可以使用其他常见的最小单位。

（2）列+水槽+边距

确定好单元格后，需要确定列、水槽和边距这3个元素，如图1-20所示。其中列是放置内容的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左、右边缘之间的距离。

2.栅格系统的搭建

（1）确定屏幕宽度

搭建栅格系统的第一步是确定屏幕宽度，针对不同的设计项目，屏幕宽度设置也会不同。在PC端电商视觉设计中，屏幕宽度通常设置为1920px。在手机端电商视觉设计中，电商平台屏幕宽度通常设置为750px，店铺首页屏幕宽度通常设置为1200px，如图1-21所示。

（2）确定栅格区域

确定好屏幕宽度后，接下来需要确定栅格区域。栅格区域应在结合屏幕尺寸的基础上，根据不同的布局方案进行确定。在屏幕宽度为1920px、上下布局的电商视觉设计中，栅格区域通常为屏幕中间的安全宽度区域，如图1-22所示。根据项目的不同，安全宽度也会发生变化。在屏幕宽度为1920px的设计尺寸中，常用平台的安全宽度如图1-23所示。

（3）确定列数、水槽、边距

①列数

PC端电商视觉设计常用的列数为12列，如图1-24所示。手机端电商视觉设计的列数则以6列和12列为主，如图1-25所示。

②水槽

水槽以及横向间距的宽度可以依照最小单位8px为增量进行统一设置，如8px、16px、24px、32px、40px。其中24px最为常用，如图1-26所示。手机端电商视觉设计可根据App设计规范，采用24px、30px、32px、40px的水槽，建议采用30px或32px的水槽。

③边距

边距通常是水槽的0、0.5、1.0、1.5、2.0倍等。以屏幕宽度为1920px的设计稿为例，其栅格系统一般在1200px的安全宽度区域进行搭建，此时内容与屏幕左、右边缘已经有了一定距离，边距可以根据画面美观度及呼吸感进行选择，如图1-27所示。手机端电商视觉设计可根据App设计规范，采用20px、24px、30px、32px、40px以及50px的边距，建议采用30px以上的边距。

1.5.4 文字规则

1.字号

进行PC端电商视觉设计时，以14pt为默认字号，并运用不同的字号和字重体现设计中的视觉信息层次，如图1-28所示。需要注意的是，字号值多采用偶数，因为采用奇数字号无法对齐像素，从而会造成模糊现象。进行手机端电商视觉设计时，可以参考iOS和Android提供的@2x字号规范，其中最小字号建议在20px以上，如图1-29所示。

2.间距

（1）字间距

标题文字的字间距通常建议为字号的1/5以下，如标题文字字号是60pt时，字间距通常设置为-50～-20。内容文字由于字号较小，字间距需要适当加大，建议为字号的1/5以上，如内容文字字号是24pt时，字间距通常设置为20～50，如图1-30所示。

（2）行间距

行间距让行与行之间有了可呼吸的空间，行间距对文章的易读性有很大影响。行间距需要大于字间距，建议为字号的1/3～2/3。当排版标题文字时，行间距建议为字号的1/3，当排版内容文字时，行间距建议为字号的2/3，如图1-31所示。

（3）段间距

段间距能够保持页面的节奏，它的设置与字号有着密切联系。段间距建议设置为2～3个字号高度，如图1-32所示。