【网页设计自习室#004】网页页面导航栏(header头部)的设计 |
您所在的位置:网站首页 › 网页导航高度怎么设置的呢 › 【网页设计自习室#004】网页页面导航栏(header头部)的设计 |
一. 导航的作用
1. 导航存在的概念
①引导使用者查找信息,通过简单查看分类来选择自己所需要的内容 ②清晰整个网站的目录结构和信息关系,层次分明,方便查看 ③作为整个页面的向导,通过简单分类指引用户 2. 导航常见类型2.1 横向导航(顶部水平栏导航) 内容查看相对直观,可镶嵌在banner中也可单独分开
承载信息多,设计感强,左右分隔布局,可镶嵌在banner中
同一页面使用两种以上导航设计,通常用于电商页面 2.4 折叠导航 交互性增强,所占页面面积较小 需选择展开才能看到具体内容,是未来的设计趋势 2.5 面包屑导航 常用于页面层级分类指向 举例: 腾讯首页>我的>历史记录 二. 导航设计规范 1.导航基础数值①网页中最小字号为12px,导航文字一般为14——20px ②导航栏尺寸为80——100px ③导航有效区为1200px ④全屏页面类导航多为自适应网站,有效区可留可不留 所有数值保持偶数 三. 基础设计流程1. 新建矩形来定界,用参考线来划分区域 举例:左右各留300px,即可用300px宽度的矩形块来定界
举例:新建高度为80px的矩形,来确定顶部栏的具体位置 顶部字体这里选择的是18px
反复参考相似内容 修改字体,排版,颜色 这就是最基础的页面,如何进阶,请看下期 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |