关键词：
在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。当设计者使用导航或者自定义一些导航结构时，请注意：
尽可能提供标识、上下文线索，避免用户迷路；
保持导航样式和行为一致或者减少导航数量，降低用户学习成本；
尽可能减少页面间的跳转（例如：一个常见任务需要多个页面跳转时，请减少至一到两次），让用户移动距离保持简短。
一、导航菜单
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设计与交互之字体篇
跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。字体是界面设计中最重要的基本构成之一，用户通过文本来消化内容和完成工作，优雅的字体将大大提升用户的阅读体验及工作效率。在满足不同终端始终保持良好... 查看详情
前端的ui设计与交互之反馈示篇
为了帮助用户了解应用当前要做什么，也给用户的下一步行为做参考，以及了解操作后所产生的结果，当用户和系统需要交互时，使用不同的模式来反馈信息或结果。当设计者使用反馈或者自定义一些反馈时，请注意：为用... 查看详情
web前端之javascript高级程序设计六：事件
web前端之JavaScript高级程序设计六：事件JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这... 查看详情
ui设计培训课程是哪些?
...、简约风格网站设计制作。项目实训：展示类型企业站3.前端开发制作+响应式WEB开发：HTML简介及文档结构CSS选择器讲解、浮动定位与布局、CSS3酷炫效果制作、HTML5新标签、相应式布局原理、Bootstrap模板。项目实训:响应式网站设... 查看详情
app开发之进阶完善篇题小满appmui+flask+mongodb+h5(代码片段)
...记不太清楚了，大体的记录一下。二，增加签到模块2.1，前端设计前端设计比较简单，我充当UI设计了一张一般般的图片，之后设计了一个登录按钮。写了应该js监控点击事件，作用于前后端的交互。先来一个效果图吧：document.ge... 查看详情
prism+materialdesign+entityframeworkcore+postgresqlwpf开发总结之中级篇(代码片段)
...C#常用知识点；中级篇主要争对WPF布局与MaterialDesign美化设计，在减轻代码量的情况做出漂亮的应用；终极篇为框架应用实战，包含MVVM框架Prism，ORM框架EntityFrameworkCore，开源数据库Postgresql。目录Prism+MaterialDesign+EntityFrameworkCore+Post... 查看详情
前端设计之灰度值利用
在前端设计中，图片的灰度与彩色交互变化是十分有用且必须掌握的。 充分的利用色差的变化可以给浏览者带去别致的体验。 实例代码如下：<imgclass="filter"src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=155969907,18... 查看详情
源码分析mycat专栏
...通信协议篇之存储过程调用4、源码研读Mycat1.6之网络篇---前端线程模型（应用程序与mycat交互篇）上篇5、源码分析mycat1.6之网络篇---前端线程模型下篇（读写事件篇）6、源码分析mycat1.6之网络篇----前后端连接交互... 查看详情
javascript课程大纲
...些千锋武汉5的学习主要包括以下几个阶段：第一阶段：前端页面重构：PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局；第二阶段：Javascript高级程序设计：原生Javascript交互功能开发、面向对象开发与ES5/ES6、Javascript工具库自主... 查看详情
零基础学ui小白锐变之路全能ui/ue设计师
...告创意设计网页版式设计与配色技巧移动端UI界面设计Web前端制作Javascript+jQuery+HTML5+CSS3UI交互动画设计课程目录:第1部分：PS基础第2部分：AI第3部分：平面实战第4部分：实用美术第5部分 查看详情
客户端热更新框架之ui热更框架设计(下)
...的重点是热更新如何与UI框架进行结合？ 现在笔者把设计“UI热更新框架”的整体设计与构建过程表述如下，最后附带源码工程的下载链接，供广大学员参考研究。如果大家有什么不明白的地方，欢迎大家在评论区进行... 查看详情
敏捷开发之理论概述篇
一、敏捷实践 1.敏捷宣言 个体与交互 胜过 过程和工具 可以工作的软件 胜过 面面俱到的文档 客户合作 胜过 合同谈判 响应变化 胜... 查看详情
ued视觉交互设计与流程介绍
...作用,您可能感兴趣的文章:项目管理－习惯发生范围变更前端性能核对表Checklist-2018大型电商互联网性能优化案例国际化环境下系统架构演化微服务架构设计视频直播平台的系统架构演化微服务与Docker介绍Docker与CI持续集成/CD互联... 查看详情
做ui设计的，需要学习哪些知识？
做UI设计的，需要学习哪些知识？很多初学者对UI设计师从事的工作不太了解，就陷入不知道自己能否学会，怎么学才好的困境，下面就带大家一探究竟，传说中的UI设计师职业大揭秘，希望帮你理清思路。1、工作内容UI设计从工... 查看详情
ui设计如何自学？
...一般是产品经理或者交互设计师，下游和你对接的一般是前端 查看详情
前端框架
1、BootstrapBootstrap是一系列常用CSS和jQueryplugin的集合，典型的UI库，带给你的是栅格系统，是预置的按钮、表单、列表、导航、响应式等等样式，它在你独立开发的时候非常有用。因为能节约用来设计网页的时间，而且这套预置的... 查看详情
ui设计毕业设计论文题目
参考技术Aui设计毕业设计论文题目 ui设计毕业生即将毕业了，大家要在毕业前完成论文的写作哦!下面我为大家介绍ui设计毕业设计论文题目，希望能帮到大家! 1)基于技术接受模型的传统媒体客户端用户使用行为研究 2... 查看详情
前端学习
UI:userinterface 用户界面不止是手机，还包括，PC,电视等有屏幕可操作的平台。项目团队角色确定：产品经理：梳理项目需求，制定产品开发更新计划，协调团队交流。、交互设计师：用户使用流程。交互流程。... 查看详情