赞助商
立即赞助

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

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

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

一、导航设计定义

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

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

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

二、导航设计的类型

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

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

1. 全局型导航

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

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

跳版式/桌面式

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

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

标签式/选项卡式

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

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

列表

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

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

2. 瞬时导航

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

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

抽屉式/侧边式

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

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

下拉菜单式

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

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

点聚式

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

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

3. 混合导航

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

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

舵式

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

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

轮播式

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

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

三、导航设计的层次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

图片素作者:Michelle Yuen

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

相关文章

编者按:本文从选择参照物、构图与位置关系、主体物轮廓及比例、把控平面与半立体、风格统一、远近变化六个核心问题,教你绘...
扁平风格
@CDYdesign :每当提到设计方法论时,总难免会给人一种比较虚空偏理论,或者说比较难应用到设计实战中的感觉;但是这一次,经...
经验分享
线是最基础的,也是设计中最常见的,希望这篇文章对大家有所帮助。 一、线的概念 线是点运动的轨迹。几何学上的线只有长度和...
点线面
编者按:今天的译文同样来自设计师 Eugen Eşanu,他将经典设计书《Don‘t Make Me Think》中的内容梳理出来供你参考。这些老问...
Eugen Eşanu
橙子的橙子:有个朋友拿了他做的界面,问我哪里需要修改,他总觉得不对劲,但不知道要怎么改。我把这些建议量化成可执行的标...
App设计
编者按:Webdesigndepot 每月的干货合集又来了,这个团队的内容合集做得非常友好,涵盖了工具、图标、字体、网站、教程等一系...
干货合集
@Daidai丶呆 :本篇文章写写近期看到的比较有趣的话题,「一款好产品,所需具备的条件」。 产品角度 早前有看到张小龙说 :一...
ui设计
一. 什么是「无障碍设计」,为什么它这么重要? 在这个多样化的世界上,并不是所有人都能毫无障碍、顺利地使用各种产品。 优...
弱势群体