2023-02-06 初识网页设计
网页的定义
功能和定位
功能的策划
设计的美化
操作体验
对外宣传
提升品牌形象
网站的分类按对象划分可以分为TO C端和TO B端两种
TO C端就是面向用户和消费者：门户网站、企业网站、电商网站、游戏网站、视频网站
TO B端作为一个需求量很大的类别，后台、企业级别OA、网站统计后台等。注重的是效率而不是体验。
网页的分类
功能性
形象性（品牌形象站）
信息型（门户站）
网页的风格
简约风网页：留白大，黑白灰、彩色配色
正式严谨网站（传统、国企）
趣味卡通网页
年轻活跃网页
网页组成及规范
1.尺寸规范
1920 * 1080 1440 * 900 1334 * 768
常用分辨率1920 * 1080 主题设计1200px,首屏约高700px以里。
2.网页中的字体
中文：微软雅黑 宋体12px 英文：times New Roman Arial 10px
导航文字16~18px
标题文字14~24px
正文文字12~14px
辅助文字12~14px
注意事项：
12px宋体行距一般为16-30px,以20px最为常见
标题区可用黑体（雅黑），14px~24px
2.布局规范
3.网页元素构成（重点按钮）
网页元素
导航
按钮
图标
边框
装饰条
按钮的状态：正常、划过、点击状态、置灰状态（不可点击）
好作品必备要素
页面布局合理
色彩搭配和谐
图片选择恰当
细节处理到位
信息传达准确
导航设计
引导作用
1.顶部导航
2.侧边导航
多表现形式，可动可静，可大可小，比较个性化
节约网站空间的同时也显得更加简约
结构复杂的网站不适用这类导航
3.底部导航
4.汉堡包式导航
节约空间、具有设计感
导航设计流程
1.准备工作：整理导航结构内容
2.分析网站风格，确定导航的具体风格
3.设计方案
----------网站：PS笔刷吧----------
电商设计
1.认识电商设计
卖货：消费者 市场 卖家
线上 线下
常见的电商平台：淘宝 阿里巴巴 京东 唯品会 拼多多
2.电商设计的分类
3.电商设计中的一些尺寸要求
4.技能需求及思维
# 常见的电商品台
（1）B2B - Business to Business 商家对商家 阿里巴巴
（2）B2C - Business to Consumer 商家对个人 京东、天猫
（3）C2C - Consumer to Consumer 个人对个人 咸鱼、淘宝
（4）O2O 线上线下结合 美团、饿了么
什么是电商设计
主要是网页设计+平面设计
电商设计的分类
电商设计的种类
主图：一般数量为5张，大小800*800像素，其中一张是产品免费流量的入口
详情描述
详情页促销
产品详情页
宽750px高不限 要全面和准确的表达出产品的特点和功能。
产品详情促销
详情促销广告图，就是放在产品详情页之上的关联销售图片，和专题页销售海报。
关联促销：750*300/400px.
直通车
付费的主图 800*800
活动图
就是商家报名参加淘宝官方举办的各种促销活动时所要的产品图片。
钻展
新淘宝首页焦点图： 520 * 280px
右侧焦点图： 160 * 280px
淘宝app首页焦点图：640 * 200px
店铺装修
店招+店铺主题
海报： 1920 * 600PX
店招： 950 * 150px（包含导航栏）
活动页
二级页面/专题页
......
banner海报设计
通屏1920海报
最佳展示范围
淘宝：950 * 1020px
天猫：990px * 1100px
电商设计的分类
电商设计的必备技能
1、排版
2、合成
3、学会新的设计工具
4、关注设计潮流和热门时事
5、带着营销思维做设计
6、加强沟通理解能力
产品详情页的作用
优化宝贝详情对转化率有提升的作用，但起作用的还是商品本身。
详情页
淘宝： 750px宽
天猫： 790px宽
详情页组成部分
图、文
详情页设计
六大元素：配色 字体 文案 构图 排版 氛围
详情页的构成
商品展示 实力展示 吸引购买 交易说明 促销说明
详情页面各模块的作用
1.宝贝展示模块
1.1 宝贝展示
1.2 宝贝细节模块
1.3 产品规格参数模块
3.搭配展示模块
4.功能展示模块
5.包装展示模块
详情页面在流量转换中的重要性
引起潜在顾客关注 引发买家购买欲望 传达企业品牌信息
流量 有效流量 忠实流量
详情页的成交5部曲
引发兴趣 激发需求 产生信任 依赖到占有 打消疑虑 成交
