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

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

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


文章标题:商城网站设计的定义与分类
标题URL:http://kswjz.com/view/104180.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流