赞助商
立即赞助

超全面的导航设计基础知识总结(一)

UI设计3年前 (2021)更新 流光
2.6K 0 0

随移动互联网的不断发展,「以移动中」的理念战略也不断渗透,互联网的「短、平、」往往使设师们无法时间停下思考可用性设,速找到的设方式对我们一挑战。「移动端界面设模式」基于设师的智慧试总结下的可实施的解决方案,可以帮我们解决绝多数常见的移动界面设需求,因此,这里我将移动端的设模式一一阐述,并我们常见的一线移动端产品作案例作解释。希望给广的设师们设方案中提供基石支撑。

一、导航设计定义

导航设也可以称之框架设,将产品的核点(业务层)集中突出,尽可能到任务径的扁平化用户操作便捷性,将用户常用行(用户层)分类组织,让这些功能元素被用户以易的方式获取使用,移动界面设中,非常重的模块,可以胆的:一移动端界面设就不同类型的导航设以不同方式的合理组装。

目前市上移动界设计所使用导航设计,基本分为以下(桌、选项卡、列表、侧边抽屉、下菜单、聚)6大基础导航模,为了不断满足业务、用户需求,涌出(舵、轮播等)新颖混合型导航模。设计师们在基础导航模上仍在不断做升级优化以及组合创新。

超全面的导航设计基础知识总结(一)

二、导航设计的类型

按照操作方式,我们可以将导航设致分三种不同的类型:全局型、瞬时型、混合型。

超全面的导航设计基础知识总结(一)

1. 全局型导航

只需打开应,就直截了当的展示导航中的各个项。换言之,无需操作,就可看到并通过各个功入口。通固定在页面中,占据页面的一定的面积。中包括:桌面式、标签式、列表式(如图)

超全面的导航设计基础知识总结(一)

跳版式/桌面式

通常占据屏幕的大数面积。

超全面的导航设计基础知识总结(一)

标签式/选项卡式

iOS 和 Android端常用的导航模式,算是标准选项卡导航,还有其新的创新。

超全面的导航设计基础知识总结(一)

列表

更多文和状态描述和变化。

超全面的导航设计基础知识总结(一)

2. 瞬时导航

点击一入口(icon/标题/箭)或手势操作,会展示各单选项,入口相对占页面面积非常小,用户需的时候调出,算打破屏幕界运用页面视觉层级的高明手法。其中常用包括:抽屉式、单式、点聚式。

超全面的导航设计基础知识总结(一)

抽屉式/侧边式

点击左上角的头像,左侧划入功入口。

超全面的导航设计基础知识总结(一)

下拉菜单式

点击添加,弹出下来功能选项。

超全面的导航设计基础知识总结(一)

点聚式

点击一个入,围绕其散开,并展示出其中的功能入。

超全面的导航设计基础知识总结(一)

3. 混合导航

拥有接展示功能入口并结合需要操作才展示其他剩余功能。换言,全局导航与瞬时导航结合,其常用括:舵、轮播等。

超全面的导航设计基础知识总结(一)

舵式

全局导航-底部标签栏式 + 瞬时导航-点聚式 = 舵式导航

超全面的导航设计基础知识总结(一)

轮播式

全导航-桌面式 + 瞬时导航-抽屉式 = 轮播式导航

超全面的导航设计基础知识总结(一)

三、导航设计的层次

导航设计中各类型设计模式是以自由的组合,根据业务需求结合用户验找到一套适合的组合拳。我们通常选择一个导航为主框架,其他导航为辅助。

导航:从一个类别切换到另一个类别的一级菜单,类别的切换。次导航:指在中的模的二级导航。

导航内功能的层级(微博:混合导航-舵式一级导航 + 混合导航-轮播式作二级导航)

超全面的导航设计基础知识总结(一)

导航与导航之间的层级(饿了么:全局导航-标签式一级导航, 混合导航-轮播式作二级导航; 咸鱼:混合导航-舵式一级导航,全局导航-桌面式作二级导航)

超全面的导航设计基础知识总结(一)

四、怎么区分全局型导航、瞬时型导航还是混合型导航?

是否需要手势操作,展示功入口-全;需要点击或者手势-瞬时;展示了分的功入口,还需要通过点击或者手势展开剩余功-混合。

五、好的导航设计要满足哪些要求呢?

  • 一种在应用内跳转不同页面的方法。在有限的屏幕中不能将内容一股脑的抛在用户眼前,因此导航计必须能然而然的促进或引导用户的跳转行为。
  • 跳转口和所包含的内容之间的关系。仅仅提供一个跳转口的列表是不够的。口和按钮之间相互之间有什么关系?是否有业务功能的重点?传达的信息对用户快速理一个产品,上手使用一个产品是非常非常必要的。
  • 结构传达容和当前浏览页面之间的系。帮助户快速解哪个跳转入口可最好的支持他们的任务或他们想要达到的目标/目的地。

篇文章只是简单的介绍在移动端界面设计模式中导航设计的各个类型。便大设计师们理,我们通简单的方式将其划分开三大导航模式(局型、瞬时型、混合型),要做出紧贴际业务以及的用户验的导航设计,却并不容易。

一篇章,我将阐述每一个模式的特色,拆解并分析多个产界面中导航设计的。

欢迎关注作者的微信公众:「三分设」

超全面的导航设计基础知识总结(一)

图片素作者:Michelle Yuen

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

为什么这么多科技公司的 LOGO 看起来都差不多?从 Google 到 Airbnb,从 Spotify 到 Pinterest,这些公司最初都使用了相对独...
facebook
“为了设计这个产品的UI我们已经设计了线框图、原型,没有时间和精力再在这当中加一个环节了!”对于UI设计流程,我想你没少听...
ui设计
在上两期整理banner设计的过程中,我发现线框在banner设计中的应用非常广泛。不仅能够辅助一些元素的设计,还可以为设计增色...
Banner
工作到现在已经负责过2个资讯类新项目了,每次做完项目感觉都有很多缺憾,这次就对新闻资讯类 app 做一个 UX 总结解析,希望...
App设计
大家好,我是Clippp。今天为大家带来的文章是「导航」设计。如何在顶部导航和侧边导航之间做出合理的选择呢?两种不同的设计...
侧边导航
账户登录注册是互联网产品或移动端产品必备的模块,本文作者结合案例对登录注册设计进行了分析探究,与大家分享。 登录和注...
交互设计
我刚刚进入设计这个行业时,非常差劲。曾经有一段时间,我沉迷于模仿 Dribbble 上流行的设计元素,却不知道该如何把它们和谐...
App分析
一、图标的定义 1. 什么是图标 图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。 2. ...
ICO