在广义上,任何告知用户他在哪里,他能去什么地方以及如何到达那里的方式,都可以称之为导航。当设计者使用导航或者自定义一些导航结构时,请注意:
尽可能提供标识、上下文线索,避免用户迷路;
保持导航样式和行为一致或者减少导航数量,降低用户学习成本;
尽可能减少页面间的跳转(例如:一个常见任务需要多个页面跳转时,请减少至一到两次),让用户移动距离保持简短。
一、导航菜单
1、顶部导航菜单
顶部导航菜单的形式就是把超链接连成一行,信息内容层级比较简单明了,适用在浏览性强的门户性质以及比较前台化的应用。一级类目建议在 2-7 个以内。标题长度 4-15 个字符长度为好,中文字长 2-6 个。
2、侧边导航菜单
垂直导航较横向的导航更灵活,易于向下扩展, 且允许的标签长度较长。类目数量不限,可配合滚动条使用,适合信息层级多、操作切换频率高的管理性质的应用。
二、面包屑(Breadcrumb)
面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系。
注意事项: 1. 层级过深时,建议做隐藏处理,页面显示保持在三级以内,最多不宜超过五级; 2. 尽可能不使用面包屑,尤其是当前页面的导航能清晰的告诉用户他在哪里时。
三、标签页(Tabs)

标签页把大量信息进行分类展示,用户可以方便地切换标签,而不必跳转页面进行比较浏览,可以在有限的显示区域内展示更多信息。分类可根据业务类别、业务状态或者操作类型等并列关系来分,分类标题长度为 2-6 个中文字。
1、基本样式
引领整个页面的内容,用于主功能切换。
2、卡片样式
用于页面中局部展示,包裹型容器能很好的和其它内容隔离。
3、胶囊型样式
用于卡片内的选项切换,经常和其它组件结合使用,让用户快速切换对应内容。
4、竖状样式
用于分类较多的选项,可以不限制分类数量,具备更好的扩展性
四、步骤条(Steps)
步骤条是引导用户按照流程完成任务的导航条,可以帮助用户对操作流程长度和步骤有个预期,并且知道自己当前在哪个步骤,同时也可以对用户的任务完成度有明确的度量。当任务复杂或者存在先后关系时,将其分解成一系列步骤。
1、横向流程步骤条
步骤多于 2 步时使用, 但建议不超过 5 步,每阶段文字长度保持在 12 个字符以内。
2、竖向流程步骤条
一般居页面左侧,悬浮固定,可追加多行文字描述,适合较多步骤或步骤数动态变化时使用,例如:时间步骤跟踪描述。
3、分页器(Pagination)
当有大量内容需要展现时进行分页加载处理,分页器可以让用户清楚的知道自己所要浏览的内容有多少、已经浏览了多少、还剩余多少。
a)标准样式
当信息条目较多的时候,可以允许用户自定义每页的行数,以提高用户查看和检索信息的效率和灵活性,常与表格、卡片搭配使用。
b)迷你样式
一般用于卡片或者浮层。
c)简易样式
一般用于卡片或者统计类表格展示,在 10 页之内。

前端的UI设计与交互之导航篇的更多相关文章

  1. 前端的UI设计与交互之布局篇

    布局是页面构成的前提,是后续展开交互和视觉设计的基础.设计者在选择布局之前,需要注意以下几点原则:明确用户在此场景中完成的主要任务和需获取的决策信息.明确决策信息和操作的优先级及内容特点,选择合理布局 ...

  2. 前端的UI设计与交互之文案篇

    在界面中,我们需要通过对话的方式与用户产生共鸣.精准.清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感.因此在界面设计时,文案也应当被重视. 在使用和书写文案时有以下几点需要注意:从用户 ...

  3. 前端的UI设计与交互之色彩篇

    一.颜色Red热情.警示 Green成功.通过.安全 Blue专业.科技 Pink典雅.明快.女性 Orange醒目.温暖 Purple高雅.浪漫 Yellow活力.提示 Cyan清新.冷静.结构化 ...

  4. 前端的UI设计与交互之数据录入篇

    数据录入是获取对象信息的重要交互方式,用户会频繁的增加.修改或删除信息.多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验.设计者应当注意这几点:为初级用户/偶尔访问的用户提供简单易 ...

  5. 前端的UI设计与交互之字体篇

    跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好 ...

  6. 前端的UI设计与交互之图标篇

    图标是具有指代意义的图形,也是一种标识.通过使用图标表达命令,强调状态,表示产品或类别.为了系统及跨平台之间图形认知保持一致, 图标在设计和使用时有以下两个原则点需要注意:简单的图形语言以及高辨识度. ...

  7. 前端的UI设计与交互之设计原则篇

    1.亲密性 a)纵向间距示例这三种规格分别为:8px(小号间距).16px(中号间距).24px(大号间距). b)在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层 ...

  8. 前端的UI设计与交互之反馈示篇

    为了帮助用户了解应用当前要做什么,也给用户的下一步行为做参考,以及了解操作后所产生的结果 ,当用户和系统需要交互时,使用不同的模式来反馈信息或结果.当设计者使用反馈或者自定义一些反馈时,请注意:为用户 ...

  9. 前端的UI设计与交互之数据展示篇

    合适的数据展示方式可以帮助用户快速地定位和浏览数据,以及更高效得协同工作.在设计时有以下几点需要注意:依据信息的重要等级.操作频率和关联程度来编排展示的顺序.注意极端情况下的引导.如数据信息过长,内容 ...

随机推荐

  1. 每日总结 -----把人家代码干掉了 我恨git

    今天搞了下午git,写完代码commit之后,pull完发现没法push,说是和origin有分支,然后自己查资料又是reset又是rebase的,commit之后发现自己改动的代码几乎没有被提交上去 ...

  2. Xshell小技巧

    1. 鼠标右键粘贴 工具->选项->鼠标->向右按钮->(paste the clipboard contents.) 2. 选定文本自动复制到剪贴板 工具->选项-&g ...

  3. JS基础回顾,小练习(实现each方法)

    function each(arr, fn) { for(var i=0;i<arr.length;i++){ fn(arr[i],i); } } var arr = ['java', 'c', ...

  4. Gao Big 深圳行

    day 1 来到深圳的国际化大都市之后,首先要做的事情就是···坐地铁?? 到了旅店,已经比较晚了,又折腾了两三下.. day 2 第二天一早,一行人出发来到深圳大学(nv shen su she)参 ...

  5. Apache的HBase与cdh的sqoop集成(不建议不同版本之间的集成)

    1.修改sqoop的配资文件 2.从mysql导入到hbase(import) bin/sqoop import \ --connect jdbc:mysql://linux-hadoop3.ibei ...

  6. 盘点PHP编程常见失误

    概述:本文盘点PHP开发者在编码时,容易忽略或不注意引起的小失误与错误. 变量声明 如果在一条语句中声明一个变量,如下所示:$var='value';编译器首先会求出语句右半部分的值,恰恰正是语句的这 ...

  7. linux下svn客户端报错Cannot negotiate authentication mechanism的解决方法

    svn客户端报错Cannot negotiate authentication mechanism的解决方法: 问题出现的原因之一: 因为SVN服务器配置了saslauthd服务用来实现与ldap的对 ...

  8. IIS自定义404错误页显示“系统找不到指定的文件”解决方法

    在IIS站点属性里面设置了自定义的404错误页面为一个文件之后,有时一直不生效,总是提示这样一句话:“系统找不到指定的文件”. 其实这种错误也只是在某些网站程序中出现,其实解决办法很简单.这是由于II ...

  9. PHP分页初探 一个最简单的PHP分页代码的简单实现

    PHP分页代码在各种程序开发中都是必须要用到的,在网站开发中更是必选的一项. 要想写出分页代码,首先你要理解SQL查询语句:select * from goods limit 2,7.PHP分页代码核 ...

  10. echarts——各个配置项详细说明总结

      前  言    最近做了个关于各种图表的项目,用到了echarts , 关于各个配置项刚开始用好多都不懂,有些地方需要改不知道改哪个参数,就在网上查了各种,总结规整了一下,跟大家分享学习一下.(e ...