前端的UI设计与交互之导航篇

在广义上,任何告知用户他在哪里,他能去什么地方以及如何到达那里的方式,都可以称之为导航。当设计者使用导航或者自定义一些导航结构时,请注意:
尽可能提供标识、上下文线索,避免用户迷路;
保持导航样式和行为一致或者减少导航数量,降低用户学习成本;
尽可能减少页面间的跳转(例如:一个常见任务需要多个页面跳转时,请减少至一到两次),让用户移动距离保持简短。
一、导航菜单
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 页之内。

时间: 2024-08-30 12:07:04

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

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

图标是具有指代意义的图形,也是一种标识.通过使用图标表达命令,强调状态,表示产品或类别.为了系统及跨平台之间图形认知保持一致, 图标在设计和使用时有以下两个原则点需要注意:简单的图形语言以及高辨识度.清晰.直观的图标更能明确指代含义便于识别记忆:保持图标之间一致的风格和表现方式.界面中的所有图标都应该在细节设计.透视和笔画权重上保持一致.一.系统图标系统图标通常用来表示常用的操作,比如:删除.保存.编辑.也可以用来表示一个文件或者状态.2.关键轮廓线根据不同的图标形状类型使用不同的轮廓线,可以使

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

跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好的阅读体验的同时,使页面的视觉层次更加清晰.使用时有以下三点需要注意:合理的使用不同的字重.字号和颜色来强调界面中最重要的信息:尽可能的使用单种字体,混合使用多种字体会让界面看起来零散和草率:遵循 WCAG 2.0 标准,字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准. 一.字体家族优秀的字

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

为了帮助用户了解应用当前要做什么,也给用户的下一步行为做参考,以及了解操作后所产生的结果 ,当用户和系统需要交互时,使用不同的模式来反馈信息或结果.当设计者使用反馈或者自定义一些反馈时,请注意:为用户在各个阶段提供必要.积极.即时的反馈:避免过度反馈,以免给用户带来不必要的打扰,能够及时看到效果的.简单的操作,可以省略反馈提示.一.提示信息1.警告警告提示(Alert)是一种非阻碍式的信息展示,它不打断用户的当前操作,一般停留至页面某个位置(优先顶部),非浮层的静态展现形式,始终展现,不会自动消

设计师们做UI设计和交互设计、界面设计等一般会去什么网站呢?

明明可靠颜值吃饭,却偏偏要靠才华立身,UI设计师就是这样一群神奇的物种.面对“大的同时小一点”.“五彩斑斓黑”.“下班之前给我”……这些甲方大大刁钻的需求,设计师每天都在咬牙微笑讨生活.你可以批评我的作品,但是不能质疑我的业务能力.这是设计师的底线. 言归正传,设计师们做UI设计和交互设计.界面设计等一般会去什么网站呢?我挑选了12个非常实用的设计网站,既有大家众所周知的又包含一些比较小众但是干货满满的网站,涉及素材资源站.字体设计网站.以及动效.视频素材网站等等,希望小编的推荐能对大家的学习和

开发辅助 | 前端开发工程师对 UI设计、交互设计的认知

1.UI 用户界面 UI:User Interfase 用户界面 UID:User Interfase Designer 用户界面设计师,多指移动 app 的界面设计: 2.一个合格的 UI 设计师,至少应该具备什么? (1)审美: 一个好的设计师,应具备基本的艺术审美,识别不同的艺术表现形式,区分作品的好坏,感受下: 图1:  图2:   (2)想象力.脑洞 比如:克里斯托弗·诺兰导演的电影<盗梦空间>. 宫崎骏的<千与千寻> (3)基本的工具使用: 常用且基本的工具:PS 拓展

UI设计需要学什么?

UI这个概念,也许没有入行的朋友还是挺陌生,但是对于从事UI设计的设计师来说可以很火高薪的工作.其实UI设计囊括了很多方面,做网页也属于UI,做软件设计也属于UI,所以不要分的那么细致,在工作中逐渐找寻自己的方向,发展自己的爱好.选UI设计要看你选择的工作,一般都是具备一定的软件操作能力后,在工作中不断积累的. ui即User Interface(用户界面)的简称.UI设计则是指对软件的人机交互.操作逻辑.界面美观的整体设计.现在比较多的UI实际上就是GUI设计.也就是图形用户界面的设计,包括软

UI设计网站内容大分类

对于初学UI设计或者交互设计的设计师,有很多知识来源于网络资源的共享,有的选择了一些UI设计培训机构学习基础,有的选择了在各大网站上吸取知识,然而万变不离其宗,无论从哪里学习过来的东西,吸取到才是自己的东西,在交互设计中,我们需要清楚知道不同网站的不同特点与优势. 一.作品展示网站 1.站酷  http://www.zcool.com.cn/ 里面覆盖了很多作品,网页,APP等相当不错的作品,也有很多优秀包含广泛内容的文章. 2.UI中国  http://www.ui.cn/ 从名字可以看出,U

怎样选择UI设计培训机构?

如何选择正规的UI培训机构?对于大多数想学好UI设计的人而言,选择一家可靠的UI培训机构至关重要,随着互联网的飞速发展,UI设计在设计行业已经起到举足轻重的作用,只要有设计的地方大家一定会想到UI,现如今UI设计这一岗位越来越受到企业的追捧,而这一行业高薪高就业率也成为大多数人选择的主要原因,而UI培训机构多如春笋,整体教学质量参差不齐,UI设计培训机构哪个好?这里就要谈到UI设计培训机构的就业率排名(全部借鉴网上评论及其周围朋友的经历),目前真正专业的UI培训机构为数不多,从学校的环境.师资的

【blade的UI设计】理解前端MVC与分层思想(bat面试深度回顾)

前言 这里扯到面试,完全是因为最近校招要来了,很多大三的同学一定按捺不住心中的焦躁,其中有期待也有彷徨,或许更多的是些许担忧,最近在开始疯狂的复习了吧 这里小钗有几点建议给各位: ① 不要看得太重,关心则乱,太紧张反而表现不好 ② 好的选择比坚持更重要 这点小钗便深有体会了,因为当年我是搞.net的,凭着这项技能想进bat简直就是妄想,于是当时我就非常机智的转了前端,另一个同学也非常机智的转了安卓 所以各位想进大公司,还需要提前关注各个公司最大的缺口是什么,找不准缺口基本无望进大公司的 ③ 积累