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

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总能巧妙的传递信息。

TAG： 天富APP登录