loading请求处理中...

导航条怎么设计

2021-12-02 22:58:26 阅读 10608次 标签: 导航条设计 作者: 陈先生12121
一、双层次菜单的建设
 
很多时候,公司的沈阳网站优化的顶部栏设计内容也是有非常多样化的,但是,有些时候内容过多也会引起品牌的繁重,所以,这个时候如果顶部栏的内容过多,可以采取双层次菜单的建设,这种形式也非常受广大设计师的青睐和喜爱,这同时也简化了程序的复杂化,所以,双层次菜单的建设其实很有必要的。而且,首层的菜单也可以精简化,可以把很多公司的主打品牌的内容更大方简洁的介绍出来,第二层的菜单也可以再补充一下,这个方法是比较好的。
 
二、字体颜色的新颖设计
 
一个顶部栏的文字配色字体的设计也是非常新颖的,要与主打品牌形成一个完美的搭配。也不要选择太过厚重,所以要选择干净一点的颜色。还有就是字体和字体颜色的设计,较为常见的就是放大镜工具和下拉箭头的两用工具使用,那字体的形状和大小都是比较重要的,形状可以新颖化,字体也不要太大,要把重要的关键字可以加粗或者整上下划线,重点标注出来,因为现在很多人浏览的速度都非常快,大概就是扫一眼,那么,我们一定要把重点的关键词标注出来,这样会更加让客户注意到。
导航条怎么设计
 
三、全方面多样化的内容展览
 
顶部栏的内容也是非常重要的,内容一定要好好的思考思索一下,我们要知道我们应该都设计哪些内容:
  1、品牌网站建设的图标设计,这个一定要结合自己公司的理念,这样把自己公司的理念设计到自己的品牌图标里,再加入到顶部栏,就会特别醒目。
  2、菜单的设计一定要多方面的去思考。
  3、导航键一定要方便,这样可以一目了然进去了解更多的公司的主要品牌特质。
  4、登陆注册方式可以设计的特别一点。
 
四、设计的大胆,引人入胜
 
众所周知,一个网站的顶部导航设计是极为重要的,因为,这是就相当于一个公司的门面,相当于公司的主要招牌,那么,这个设计一定要吸引广大的客户,而且设计一定要大胆,新颖,这样才能更好的推广,但是,有些时候很多的公司就会忽略这个问题,可能设计的比较简单,所以,如果在设计顶部栏的时候一定要注意创新,时尚,多方面多元化的去设计。


导航条设计案例


底部导航栏可以说是现在最流行的导航控件了,微信、支付宝、淘宝、网易云音乐等等,各种类型的 APP 都有应用。

导航条怎么设计

如何使用这种极普遍的导航控件呢?先来看看在 Material Design 规范和 iOS 规范下的基本交互特性。

Material Design规范

当用户选择点击某个选项时,则应该直接展现相应的页面,或者刷新当前的页面;注意不要在点击后展示菜单或者弹出框(pop-up)。另外,如果点击系统返回键,不会切换到底部导航栏上一次点击的页面。

另外,有以下三点需要注意:

  • 点击当前选项的图标,则页面返回顶部。即如果当前在第一个 tab,点击第一个 tab,页面回到顶部。
  • 点击底部导航栏中的选项后,应该返回该页面顶部并刷新该选项的页面(这一点笔者认为也不是必要,需要根据应用自身的场景来判断)。
  • 当点击底部导航栏中的不同选项时,避免页面发生横向切换。

苹果iOS设计规范

苹果的设计规范,主要讲了以下三点:

  • 如果底部导航栏中的某个选项暂时不可用,不要把该选项置灰。在不可用而又点击了的情况下,页面只要展示这个页面为什么没有内容就可以了。
  • 避免使用过多的选项。当然,如果选项过少也会有问题。一般在 iPhone 上,3 到 5 个选项比较合适。在 iPad 上可以适量增加。
  • 可以使用肩标来提示信息数量,如下图所示。

导航条怎么设计

以上是底部 tab 导航栏的基本交互特性。底部 tab 导航,一般用于组织起应用的最顶层内容,其中每个 tab 承载了应用的一个维度的功能。例如微信,每个 tab 都承载了一个维度的功能。

导航条怎么设计

基于这个特点,对于底部 tab 导航栏,最常用的做法是它只出现在一级页面。当用户从一级页面进入到二级页面,那么底部导航栏会消失。

导航条怎么设计

我也一直认为,底部导航栏就该如此使用:从一级页进入二级页,它,必须消失。

然而,事情就怕有例外,而且还是大佬级别的例外。

有一次使用苹果系统自带的相册应用,当我进入二级页,底部导航栏还存在着。

这不是挑事吗?无独有偶,苹果 App Store 也是如此。

导航条怎么设计

我浏览了手机上的快 300 个应用,发现网易云音乐、虾米音乐也是采用二级页保留底部导航栏的逻辑。

虽然使用这种逻辑的应用数量较少,但这不能不引起我的质疑:

  • 底部导航栏难道不应该就在二级页消失吗?
  • 用户已经到了二级页,还可以切换到别的 tab 吗?
  • 如果二级页可以保留,那么什么情况下保留?

底部导航栏二级页存在感研究

我首先从设计规范出发,看一下这样做是否是符合规范的。

在找遍了 iOS 设计规范和谷歌的 Material Design 设计规范之后,我发现规范里并没有相关规定。

既然如此,那么从用户使用的角度,这么做是合理的吗?

于是我研究了在二级页保留底部导航的应用,发现这些应用的底部导航栏里的 tab 有一个共同点:每个 tab 的重要性差不多,且应用更偏重于让用户发现、探索新内容,而不是沉浸在某个模块里。

导航条怎么设计

以苹果自带的照片应用为例:「照片」tab 以时间为维度组织用户的照片,「为你推荐」tab 以智能算法为维度,「相簿」以相簿和照片类型为维度,搜索以用户主动搜索为维度,每种维度都提供了让用户搜寻、管理照片的可能。

比如用户如果需要找某一张特定的照片,他可能先通过相簿来找,当他进入到某个相簿(此时为二级页),找了一会没找到,就切换到照片 tab,通过回忆拍照片的大概时间段来寻找了。

其实这种随时能切换 tab 的方式,跟 PC 网站上,常驻在页面顶部的导航条很相似。

导航条怎么设计

导航条怎么设计

顶部的导航条,保证了用户在任何页面,都可以迅速到达特定的几个核心页面。

下面再来研究一下二级页没有保留底部导航栏的应用。

导航条怎么设计

上面的三个应用,每个 tab 的重要程度也差不多,但每个模块提供的功能都相对更沉浸。比如淘宝,第一个 tab「首页」主要让用户浏览商品,第二个 tab 则是让用户浏览各种内容。这两个 tab 之间,是不需要用户频繁切换的。

并且,在进入二级页后,页面底部会较为频繁地出现新的操作栏。

导航条怎么设计

如果二级页依然保留底部导航栏,那么和底部的操作栏会堆在一起,显然是不可以的。

切换后是否保留之前状态

在 iOS 规范里,没有找到与此相关的说明,但在谷歌的 Material Design 规范里,我找到了间接关联的一段说明:

  • 在 Android 上:点击某个 tab 后,展示该 tab 的最高一级的页面内容。重置任何先前的用户交互和临时屏幕状态,例如滚动位置,选项卡选择和搜索行为。
  • 在 iOS 上:点击某个 tab 后,展示该 tab 里用户之前的交互结果。如果用户先前访问过该 tab,则点击该 tab 后,展示用户操作的最后一个屏幕(如果可能,保留其先前状态)。如果用户以前没有访问过该 tab,则展示该 tab 的最高一级的页面内容。

设计公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

留言( 展开评论

快速发任务

价格是多少?怎样找到合适的人才?

官方顾问免费为您解答

 
相关任务
DESIGN TASK 更多
中学广播站LOGO设计

¥500 已有27人投标

为幼儿园设计园徽

¥500 已有48人投标

企业LOGO设计

¥500 已有8人投标

pc网站ui设计

¥100 已有1人投标

羊肠线清洗机设计

¥20000 已有0人投标