• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 超全面的导航设计基础知识总结(一)

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

作者:Nick益 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App设计,UI组件,导航设计,移动端设计,经验分享等相关知识,Nick益希望在学习及工作中可以帮助到您

随着移动互联网的不断发展,「以移动为中心」的理念和战略也不断渗透,互联网的「短、平、快」往往使设计师们无法长时间停下来思考可用性设计,快速找到最佳的设计方式是对我们一大挑战。「移动端界面设计模式」是基于大量设计师的智慧和尝试总结下来的可实施的解决方案,可以帮助我们解决绝大多数常见的移动界面设计需求,因此,在这里我将移动端的设计模式一一阐述,并附上我们常见的一线移动端产品作为案例作为解释。希望给广大的设计师们在设计方案中提供基石和支撑。

一、导航设计定义

导航设计也可以称之为框架设计,将产品的核心点(业务层)集中突出,尽可能做到任务路径的扁平化和用户操作便捷性,将用户最常用行为(用户层)分类组织,让这些功能元素被用户以最容易的方式获取和使用,在移动界面设计中,是非常重要的模块,可以大胆的说:一个移动端界面设计就是不同类型的导航设计以不同方式的合理组装。

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

二、导航设计的类型

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

1. 全局型导航

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

跳版式/桌面式

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

标签式/选项卡式

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

列表式

更多的文字和状态的描述和变化。

2. 瞬时导航

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

抽屉式/侧边式

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

下拉菜单式

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

点聚式

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

3. 混合导航

拥有直接展示功能入口并结合需要操作才展示的其他剩余功能。换言之,全局导航与瞬时导航的结合,其中常用包括:舵式、轮播式等。

舵式

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

轮播式

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

三、导航设计的层次

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

主导航:从一个主类别切换到另一个主类别的一级菜单,主类别的切换。次导航:指在选中的模块内活动的二级导航。

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

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

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

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

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

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

这篇文章只是简单的介绍了在移动端界面设计模式中导航设计的各个类型。便于广大设计师们理解,我们通过简单的方式将其划分开三大导航模式(全局型、瞬时型、混合型),要做出紧贴实际业务以及好的用户体验的导航设计,却并不容易。

下一篇文章,我将阐述每一个模式的特色,拆解并分析多个产品界面中导航设计的运用。

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

图片素材作者:Michelle Yuen

「导航设计指南」

  • 《交互基础小课堂!移动端的导航设计模式》
  • 《轻松看懂规范!详解组件控件结构体系之导航类》
  • 《超详细解读:UI导航设计不仅仅指的是导航栏》
  • 《设计师进阶笔记!APP导航的设计套路》

优设大课堂

您可能想查找下面的文章:

  • 手机APP用户界面设计的10点建议
  • 关于音乐播放App(应用软件)的分析与重设计 如何设计出漂亮的音乐播放界面
  • 写给新手的APP结构指南:首页相关(上)
  • 基础科普!重复与突变在产品设计中的应用
  • 超全面的导航设计基础知识总结(一)
  • 写给UI新手的APP结构指南:注册和登录
  • 用户体验是一种过程,而不是结果
  • 超全面的移动端UI 设计规范整理汇总
  • 感觉设计不舒服但又不知道原因?可能是这8个常见的交互细节问题
  • 这个帮你改善睡眠的APP,是这样设计出来的

相关文章

  • 2017-08-06对淘宝商城首页大图设计架构的分析与看法(图)
  • 2018-08-23想掌握对话式交互?先来学习自然对话的基础知识!
  • 2017-08-06怎么设计响应式WEB?响应式WEB设计的优缺点
  • 2018-08-23腾讯高级交互设计师:什么是优秀的设计思维与方法?
  • 2018-08-23新人想要入场视频类H5 设计?你需要了解这些
  • 2017-08-06网站产品设计参考的几条原则
  • 2018-08-23「这个控件叫什么」系列之Notice Bar/通告栏
  • 2017-08-06flash 嵌入网页 与IE, FF,傲游兼容问题
  • 2017-08-06响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用
  • 2017-08-06网站配色方案 为网站选择正确的颜色

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 做设计八年后,我发现设计最难的是分寸
    • div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
    • Ext.windows.Windows中autoScroll:true 配置无效,不出现滚动条
    • 设计实战案例!谈谈网易严选企业购的交互设计
    • 基础小技巧!5个简单直观的设计对比方法
    • 分享20个优秀的网页表单设计案例
    • 这样才能学到东西!UI设计师该如何正确地“把玩”APP?
    • 如何适配iPhone X?来看滴滴出行的实战案例复盘!
    • 有人说腾讯傻,花几百万买了套字体…
    • 谈谈网页设计中的Less和More(图)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有