一. 导航的作用

1. 导航存在的概念

①引导使用者查找信息，通过简单查看分类来选择自己所需要的内容
②清晰整个网站的目录结构和信息关系，层次分明，方便查看
③作为整个页面的向导，通过简单分类指引用户

2. 导航常见类型

2.1 横向导航（顶部水平栏导航）

内容查看相对直观，可镶嵌在banner中也可单独分开

2.2 纵向导航

承载信息多，设计感强，左右分隔布局，可镶嵌在banner中

2.3 混合导航

同一页面使用两种以上导航设计，通常用于电商页面

2.4 折叠导航

交互性增强，所占页面面积较小
需选择展开才能看到具体内容，是未来的设计趋势

2.5 面包屑导航

常用于页面层级分类指向
举例： 腾讯首页>我的>历史记录

二. 导航设计规范

1.导航基础数值

①网页中最小字号为12px，导航文字一般为14——20px
②导航栏尺寸为80——100px
③导航有效区为1200px
④全屏页面类导航多为自适应网站，有效区可留可不留
所有数值保持偶数

三. 基础设计流程

1. 新建矩形来定界，用参考线来划分区域

举例：左右各留300px，即可用300px宽度的矩形块来定界

2.新建矩形框来确定顶部导航栏位置

举例：新建高度为80px的矩形，来确定顶部栏的具体位置
顶部字体这里选择的是18px

3. 通过甲方给的产品内容，来决定页面中元素的去留

反复参考相似内容
修改字体，排版，颜色

这就是最基础的页面，如何进阶，请看下期

【网页设计自习室#004】网页页面导航栏（header头部）的设计相关推荐

web页面导航栏自适应问题
web页面导航栏自适应问题 1. 问题描述 2.问题原因 3.解决思路 1. 问题描述 Axure RP 9 矩形元件转化为动态面板后,通过设置100%宽度(具体方法可以百度,在此不详细介绍),出来的 ...
微信小程序隐藏页面导航栏左上角的小房子
描述:隐藏页面导航栏左上角的小房子解决办法: onShow(){wx.hideHomeButton(); }, 在当前页面的onshow方法里面写上wx.hideHomeButton();来隐藏小房 ...
页面导航栏在鼠标向下滑动后会漂浮在顶部的设计（已解决）
文章目录 1,动态演示效果图 2,设置相对定位的静态网页排版 html代码 >>> css代码 >>> 3,获取页面标签后进行事件监听 js代码 >>& ...
刘金玉编程HTML5百度资源,零基础html5网页开发教程第008期导航栏开发案例
本节知识视频教程小伙伴们大家好,欢迎收看刘金玉编程第八期.本期我们主要做一个导航栏的一个. 导航栏,有的人又喜欢叫菜单栏.确实和菜单有点像.导航栏几乎会用在所有的网站中.那么导航栏是怎么开发出来的呢 ...
html网站底部导航栏怎么做,如何设计一个页面的底部导航？
最近遇到一个需求,做一个有底部导航的页面,页面上的内容要求一屏展示(尽量不要有滚动),同时还要兼容1366768 .1440900.1920*1080这些屏幕,能不能用代码来实现呢? 首先底部的导航栏 ...
vue实现网页中滚动鼠标时改变导航栏背景颜色
1.HTML <div id="topBannerNav" :style="topBannerNavBg">导航栏部分 </div> 2 ...
bootstrap 导航栏字体颜色_设计自己的Hugo主题——开发导航栏
引言导航栏组件对于整个站点来讲应该说是至关重要的,因为它会出现在每个界面中.对我来讲,导航栏是最吸引人.最有意思的地方,因为针对不同的屏幕大小,他能显示出不同的样式风格,而且当我去访问一个界面时,我 ...
前端学习（九）页面导航栏页面最基本实现
我们常见的网站,页面的最上方都有个导航栏,例如CSDN的最上方的: 那我们也做一个这样的,首先element有这个控件"el-menu",那我们就按照示例做一个样子出来,类似于这样 ...
【第四趴】uni-app页面导航栏配置（掌握页面导航栏背景颜色、文字等效果配置）
文章目录写在前面 pages.json 对页面配置? 导航条配置写在最后写在前面聚沙成塔--每天进步一点点,大家好我是几何心凉,不难发现越来越多的前端招聘JD中都加入了uni-app 这一项, ...
uni-app去掉页面导航栏
全局去掉顶部导航 "globalStyle": {"navigationStyle":"custom", //可以去掉小程序端的顶部导航&q ...

【网页设计自习室#004】网页页面导航栏（header头部）的设计

一. 导航的作用

1. 导航存在的概念

2. 导航常见类型

二. 导航设计规范

1.导航基础数值

三. 基础设计流程

【网页设计自习室#004】网页页面导航栏（header头部）的设计相关推荐

最新文章

热门文章