一、商城网站设计的定义与分类

1、商城网站的定义

商城是信息化时代电子商务发展的产物，是商家在网上自己商品的展示、销售、和企业宣

传的网络平台和通道。

为个人用户和企业用户提供人性化的全方位服务，努力为用户创造亲切、轻松和愉悦的购

物环境，不断丰富产品结构，最大化地满足消费者日趋多样的购物需求。

2、商城网站的分类

1.平台型（B2B B2C C2C）

2. 垂直型（自营商城）

3.品牌型（品牌宣传+购买）

3、商城网站设计风格

1.简约

2.时尚

3.卡通

二、商城网站项目工作的流程

1、工作流程

1.项目立项

2.产品分析

仔细研究需要在网页中展现的内容，梳理其中的逻辑关系，分清层次，以及重要程度。

3.交互原型

网页原型设计也是分步骤实现的，先把一个页面分为若干个大部分，然后分别逐步细化。

如果是为客户设计的网页，那么使用原型线框图与客户交流沟通是最合适的方式，既可以清晰地表明设计思路，又不用花费大量的绘制时间，因为原型设计阶段，往往要经过反复修改。

如果每次都使用完成以后的设计图交流，则反复修改需要大量的时间和工作量，而且在设

计的开始阶段，往往交流沟通的中心并不是涉及的细节，而是功能、结构等策略性的问题，因此使用这种线框图示非常合适的。

4.界面设计

根据原型图使用photoshop生成设计稿。

5.前端开发

6.后台开发

7.项目测试

8.项目上线

三、商城设计与前端开发的关系

1、板块设计

1.版块风格

板块可以具有自己独立的风格，建议所有版块上的保持控件风格统一，功能一致，以便提

高重用性

2、文字

1.推广设计（专题）

推广设计的风格多种多样，需要根据需求选择字体来营造氛围，推广设计的字体往往是做

在图片上，不需要考虑用户的设备中有没有包含该字体。

2.产品设计

产品设计的字体，很少会做在图上，大多数字体由前端工程师来实现，设计师一般会选择

用户设备里自带的字体来进行设计。

3.网页文本字使用规范

中文字体：

文本字一律采用14px字体，黑体主要用做标题、重点突出文字。建议

使用14px + 20px字体的混合搭配，避免大面积使用加粗字体，字体请使用系统自带字体。

英文字体：

英文字体从9px开始就能清晰显示，选择空间大。10px、11px、12px、13px都是常见的字

体大小，字体请使用系统自带字体。例：Tahoma、Arial、Verdana

3、设计稿输出

1.设计稿目录结构

JPEG：文件夹下存放每一个页面的定稿

PSD：文件夹下存放PSD源文件

2.PSD文件命名

PSD文件要统一命名，最终确认、废弃的稿件要分别标记。

命名准则：版块名称 + 内容页面 + 制作日期 + ABCD表示第几稿（PSD源文件、JPEG输

出稿统一使用）

3.PSD分组、细化

页面PSD里，每个版块对应一个组，多余没用的图层能删就删。每个版块的标题、图片、

作品、按钮、文字等都用组别归类命名好。

四、商城banner设计

1、沟通

1.确认信息

2.风格定位

2、执行

1. 先版式（骨架）

如果不考虑产品的位置，常见的“文案+背景”的关系主要有三种。

如果考虑产品的位置，常见的“文案+产品+背景”的关系主要是下图的几种。

2. 在配色（血肉）

配色方法其实有很多，下图介绍的6种方法可以让Banner呈现平衡的色彩关系。

黑白灰这3 种中性色能与任何色彩起和谐、缓解作用。主要作用是：调和色彩搭配，突出其他颜色。

3. 丰富细节（衣服）

细节就像人的衣服一样，丰富而适当的细节可以让设计更加精致很耐看。

3、审核

1.展示形式

Banner设计后一定要o上效果提或是样机，去模拟真实的展示效果，看看实际上线效果和

预期是不是一致的。另外，设计师要去表达自己的设计思路和想法。

2.信息传达

Banner的组成元素都是为了传达中心主旨，要做到意思传达清晰准确，避免阅读障碍和意思含糊的情况。

3.美观——排版

当画Banner需要放的元素比较多，尤其是文字，这是候比较考验设计师对信息的整理和

归纳能力。

4.美观——色彩

前面介绍了配色的几种方法，但是色彩的明度，纯度和饱和度等属性上面的变化还是会影

响到画面整体的配色。

5.美观——细节

细节处理的好坏，考验设计师的功底和情怀。Banner上面的所有元素都是因为需要存在，

不是可有可无的。

6.美观——创意

打破常规，与众不同。

优秀的Banner总能巧妙的传递信息。