导图社区 Web界面设计规范
这是一篇关于Web界面设计规范的思维导图,最全页面设计流程思维导图,一目了然,非常实用,值得收藏。
社区模板帮助中心,点此进入>>
互联网9大思维
产品立项报告
产品经理如何做好项目管理
经验分享:产品经理必懂的产品思维
产品诞生过程
产品周期图
开门红的思考
招创智搜
网易星球
教学教务系统
Web界面设计规范
一.基本概念
像素(px)
固定数值,绝对单位
eg:网页宽1024 高768
大型网站,数量最多
百分比(%)
相对单位可伸缩
eg:网页宽100%
小型网站,个人网站,宣传网站
屏幕分辨率:72 颜色模式:RGB
浏览器垂直滚动条的宽度
二.三种情况
网页的内容宽度<屏幕分辨率宽度
屏幕两边会出现留白
网页内容可以完整显示
允许
网页的内容宽度=屏幕分辨率宽度
屏幕和内容宽度一致
网页内可以完整展示
网页的内容宽度>屏幕分辨率宽度
浏览器底部出现水平滚动条
网页内容不可以完整显示
不允许
常用网页尺寸
宽度
网页的安全宽度计算公式
屏幕分辨率的宽度
浏览器垂直滚动条宽度(20px)
常用宽度值
1024*768
1000px
……px
1366*768
1300px
1200px
1440*900
1400px
1920*1280
1900px
1800px
高度
根据网页的内容多少自动取值
网页文字规范
常用字体
宋体
微软雅黑
系统自带,多用于正文
特殊字体
logo
按钮
广告字体
转换为图片
常用字号
字的高度进行计算
12px
最小字号
14px
16px
18px
文字边缘设置
大于16px
边缘设置为“无”
边缘设置“windows LCD"
行高设置
在ps中,用行高的数值减去字号,就等于段落的行高
段落中的每一行的行高是在文字的上下两边
网站建设流程
获得需求
客户
领导
同事
网上找
需求类型
文档
图像素材
语言沟通
主题