请选择 进入手机版 | 继续访问电脑版
img_top
查看: 151|回复: 2

[分享] 【转帖】导航菜单设想五步法(二)

[复制链接]
avatar

8

主题

25

帖子

124

积分

注册会员

Rank: 2

积分
124
ico_lz  楼主| 发表于 2021-3-29 14:47:23 | 显示全部楼层 |阅读模式
前文传送门:


导航菜单设想五步法(一)

三、菜单层级有区分

我将常见的导航区分停止总结,分为以下三种形式:

3.1色彩区分

色彩区分作为最间接最有用的一种形式,这类形式也是背景页面最初的状态,我凡是会用色彩区分和移动端顶部状态栏的演变史做对照,就其功用而言他们都有很多类似的点:

微信在2018年12月份时,公布微信7.0,将顶部导航由黑色改变成红色,引得大师争辩不休,而经过时代不竭洗礼,大师也逐步接管这个了工作,渐渐忘去

【转帖】导航菜单设想五步法(二)

2019年也有类似的工作发生,有几个产物的WEB端停止了一系列的大改,YouTube、Twitch、Twitter都停止了重新设想,他们也不谋而合的将块面去除,去掉过剩的的灰色,经过留白和空间将页面拉开

【转帖】导航菜单设想五步法(二)

【转帖】导航菜单设想五步法(二)
【转帖】导航菜单设想五步法(二)

这否是是下一个WEB端所要追随的趋向,我还不得而知~
假如WEB端都有此改变,那末B端产物还会远吗?

说回B端设想,色彩上的区分和移动端类似,更多表现在导航层和内容层之间的区分,由于从本质上讲,这两个自己就属于分歧的营业模块,经过色彩的区分,是最为间接,最简单的一种方式。
这类形式常见于很多复杂系统,例如:飞书
小唠一句:飞书的文档功用以及协同工作比钉钉好用太多,假如大师现在还在寻觅协同软件,可以试试飞书~

【转帖】导航菜单设想五步法(二)

左侧导航为深色,可以让用户更沉醉的体验,由于屏幕边沿都为深色,用户在利用时可以真正做到有区分

3.2 投影区分

在现现在的移动端产物,投影大行其道,弥散投影,高级投影到处可见,也逐步影响更多WEB真个产物利用投影。增加本身产物Z轴空间

Z轴空间给导航带来了的纵深感,同时可以在功用层级上,经过度层设想,使页面层级关系十清楚白,指导用户利用导航。

【转帖】导航菜单设想五步法(二)

Material Design设想的出现,正是Z轴空间的鼻祖,在我们的屏幕中斥地了第三个设想纬度,在Z轴上展现增加了更多的交互形式。在多少系统中,Z 轴是 X 轴和 Y 轴之外垂直于屏幕的轴,我们经过引入 Z 轴在交互设想中显现三维的物理空间感,使页面内容可以获得有用区分

比如Teambiton在页面中应用投影,强化了页面层级的关系

【转帖】导航菜单设想五步法(二)

3.3 朋分线区分


朋分线针对导航功用性不高,同时要满足很高设想感的产物
朋分线太深,页面十朋割裂,朋分线太浅,页面分别又不明白,是以需要设想师对朋分线的把控非常公道

朋分线在Dribbble上见到过很多,经过简单的线条加上空间的朋分,将导航区与内容区分隔,构成很好的视觉感受。假如你是刚起头尝试做导航,不太倡议尝试这类形式,由于对于页面空间的把控要非常刻薄

四、导航可设置

B端产物易操纵性中,导航可设置操纵算得上是一个重要的点。其中最主如果经过设置操纵实现导航易用性的提升而若何让菜单可设置,凡是的做法有两种。

4.1 我的菜单

假如你的产物是针对大都脚色分歧的用户停止设想,那末在导航设想时,可以斟酌增加一个菜单选项:我的菜单,对于菜单停止标签处置
设备一个我的菜单,将用户常用的菜单停止增加,可以满足每一位用户的菜单快速挑选的需求,经过这样的自界说,用户在常用的菜单下,可以经过我的菜单停止快速跳转

举个栗子?:

在印象笔记傍边,其快速方式就是可以将用户想要的模块放置在此,可以快速跳转

【转帖】导航菜单设想五步法(二)

4.2 脚色设置

假如你的产物是为特定几类脚色停止办事,那末在导航设想时,可以斟酌按照用户脚色的分歧,给用户分歧的导航展现
经过脚色的挑选,利用对于复杂导航停止简化,同时治理员可以按照本身公司的营业分歧,给用户设置出分歧的脚色权限予以满足用户的导航需求,这样在设想层面上可以削减很多不需要的麻烦~

回复

使用道具 举报

avatar

13

主题

43

帖子

207

积分

中级会员

Rank: 3Rank: 3

积分
207
在线会员 发表于 2021-3-29 18:12:17 | 显示全部楼层
优秀呀,朋友
回复

使用道具 举报

avatar

3

主题

10

帖子

63

积分

注册会员

Rank: 2

积分
63
在线会员 发表于 2021-3-29 18:12:38 | 显示全部楼层
【转帖】导航菜单设计五步法(二)【转帖】导航菜单设计五步法(二)【转帖】导航菜单设计五步法(二)
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则