信息展示型网页 以展示企业、产品官方信息为主 的页面 多用于企业官网、产品官网、个人主页等场景。
高级 平面化 品牌调性 多动效
功能服务型网页 以提供丰富的内容或产品功能为 主的网站 类似知乎、爱奇艺、微博、站酷等都为此类
行业化 交互多 关注细节
门户平台型网页 门户网站是大型信息综合平台 类似腾讯网、搜狐网、新浪网等主站
紧凑 聚合 层级复杂
电商外贸型网页 国内的电商和外贸网站自成体系 包括淘宝、京东等电商或品牌外贸站点
通用性 流程化 逻辑清晰
营销活动型网页 用来进行活动宣传的营销型网页 常见于弹窗广告或者手机移动端H5页面
抓眼球 冲击力 卖点明确 花里胡哨
系统管理型网页 主要指的是B端管理系统页面 是一个可以独立出来的 UI网页设计类型
模块化 专业场景 线上软件
花瓣、pinterest、unsplash、500px、behance、淘宝品牌店
分析网页需求 确定网页类型 设置相关尺寸 确认响应数量 添加栅格类型 按钮多操作多不适合响应式
1280x800 1440x800
版心区域在900-1200px
win 微软雅黑 light regular bold
字号 自重 字色 行高 段距
中文最小 12px 常规阅读 13-15px 较大 15-20px
light 注释次要 regular 正常阅读 bold 强调标题
字色 注释灰度 50-80 正常灰度 20-40 标题灰度 5-20
行高 注释 字号的1.4-1.6 16-18px 正常 字号的1.6-2 20-30px 标题 默认Auto auto
段间距 注释 6-14px 正常 8-24px 标题 0
配色 品牌用色 核心色彩
辅助色 功能用色 氛围色 点缀色
中性色 灰度用色 文字用色 背景色
图标 启动、装饰、工具 大小一致、风格一致、粗细一致、透视一致 iconpark 图标有外部边距要保留
最好4和8
网页间距有一定的规律 4 8 16 24 32 48 64