美文网首页
01.【移动端导航】

01.【移动端导航】

作者: 大大大栗子czl | 来源:发表于2020-08-11 13:30 被阅读0次

导航设计综述

最好的路途就是没有路途,需要的东西就在手边,不需要跑来跑去。但在所有App都在堆砌功能的今天,这个设想还是过于遥远了。虽然我们不能阻止内容的增多,但我们可以尽量用直白的方式告诉用户现在在哪里,以及能去哪里,帮助用户找到想要的内容。

需要说明的是,导航设计最重要的是合理,而不是创新。导航设计实质上是设计将内容放置在合适的位置,并提供足够的指引帮我们沿着路标找到深层次的内容。有的路标会告诉你左拐是什么街道,有的路标同时会告诉你这条街道上有哪些旅游景点。至于路标提供多少信息,要根据用户和场景进行决定。

有效的导航是基于良好的组织系统的。因为导航系统不涉及内容的组织与排序,只是提供当前位置和路标。如果核心内容与组织系统都没有确定下来,就不要着急开始设计导航。

导航系统基于组织系统,合理最重要

从内容和视窗的角度看导航:

受限于竖型屏幕与尺寸,Web端的导航不能直接复制到移动端上。例如在列表设计上,Web端常用双面板选择模式(Mac备忘录),移动端则普遍使用单窗口深入模式(iOS备忘录)。同样的产品在不同平台上有不同的导航形式,如果仅仅从形式的角度看导航,显然是违背了形式追随内容的原则。

移动端导航设计有两个重要的因素:内容和视窗。以Apple备忘录为例子,其组织架构是相同,的。但是在MacOS和iOS的表现形式是不一样的。MacOS上屏幕足够展示全部的内容,而iOS则不允许一次展示【笔记组】和【笔记】,所以只能拆分成两个页面

移动端导航

虽然常见的App都是Tab导航作为全局导航,但实际上这些导航模式在全局导航和区域导航中均有应用,展示内容的导航模式有很多种,没有绝对的优先级之分。App的全局导航由核心内容的数量决定。先确定【核心数量】再确定【视窗】

1.跳板式:iOS launchpad、美图秀秀

2.列表式(正常列表&排序列表&分类列表&抽屉式):iOS邮件、滴滴、iOS设置

3.Tab式(顶部tab+底部tab):微信、微博、AppleMusic

4.陈列馆式:iOS天气

5.仪表式:iOS天气、指南针、健康

6.超级菜单式:

7.页面轮盘

8.图片轮盘

9.扩展列表

相关文章

  • 01.【移动端导航】

    导航设计综述 最好的路途就是没有路途,需要的东西就在手边,不需要跑来跑去。但在所有App都在堆砌功能的今天,这个设...

  • 移动端导航

    导航是任何应用程序的支柱。其目的是让用户以尽可能少的摩擦到达他们想去的地方。 移动导航必须是可发现的、可访问的并且...

  • 01.移动端_产品设计与规范_导航

    导航分类 1、扁平式导航 • 在一级页面提供导航栏和标签栏(也叫标签式导航)• 方便用户在不同的内容类别间切换 市...

  • 判断浏览器,区分PC和移动

    判断浏览器 区分PC和移动 web端:app.vue app端:app.vue 网站导航 网站导航

  • 移动端导航栏

    可以作为应用主体导航 标签导航 标签导航是IOS系统中最常见的导航,它继承了桌面导航的样式,对图标进行了扁平化处理...

  • 移动端底部导航

  • 移动端导航设计

    移动端: 用户在这个页面停留时,知道自己是从哪个页面过来的,也知道应该如何回去。我们通过各种方式(菜单、返回键、标...

  • 移动端导航设计

  • 移动端-顶部-导航

    html css menu.js

  • Tailwind Navbar

    导航栏 PC导航栏仿Airbnb导航条 PC导航条添加图标 PC导航条上图下字 移动端导航条

网友评论

      本文标题:01.【移动端导航】

      本文链接:https://www.haomeiwen.com/subject/xnqxxhtx.html