一、商城网站设计的定义与分类
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总能巧妙的传递信息。
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/48492.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
