最热点的12种导航模式.docx
- 文档编号:28038246
- 上传时间:2023-07-07
- 格式:DOCX
- 页数:16
- 大小:1,007.59KB
最热点的12种导航模式.docx
《最热点的12种导航模式.docx》由会员分享,可在线阅读,更多相关《最热点的12种导航模式.docx(16页珍藏版)》请在冰豆网上搜索。
最热点的12种导航模式
最热点的12种导航模式
用户在利用应历时,需要随时清楚了解下一步应当前去哪一页面和如何前去该页面。
若是用户无法轻松在应用中进行导航,则将很快对你的应用失去兴趣。
因此,可否为移动应用设计出有效的导航功能相当重要。
在投入菜单、操作栏、弹窗、按钮、箭头、链接等内容的设计之前,你需要牢记几个大体的注意事项。
导航设计的4大注意事项
在弄清自己移动应用的架构和组织情况以后,就可以够开始考虑导航设计了。
在此时,你需要考虑下面的几个事项:
1.可达性
移动应用的导航功能可以说是所有界面最重要的组成部份,因此必然要保证其可达性,并把最关键的要素尽可能突出,同时不要影响到内容本身。
2.是不是成心义
确保菜单、操作栏、弹窗、按钮、箭头、链接等导航要素简单明了,让用户一看就知道是什么意思和操作结果是什么。
不要弄的太过花哨,用户没有耐心去“猜”。
3.易于理解
若是你想设计比较高级的导航功能(例如链接图片、允许滑动或其他手势导航,或访问隐藏菜单),请务必在设计进程中保证前后一致,以便用户熟悉你所利用的模式,同时还应加入一些额外的信息(例如小箭头、文字或改变颜色或高亮等)来吸引用户注意力,并以微妙的方式对用户进行引导。
不要给用户呈上“看得见摸不着的导航功能”。
4.通用性
你的导航功能应当以必然的形式显示于移动应用的各个界面。
各个导航模式不必然要完全相同,但其大体结构应当在应用内维持一致,可以按照背景进行小幅度的调整。
导航模式概述
在记住上述设计目标后,下面是本文要详细说明(对这些设计模式的更深切探讨请见咱们的电子书《移动UI设计模式2014》)的几个设计模式的概览:
1. 说明与引导标记
2. 溢出菜单
3. 滑块
4. 基于内容的导航
5. 变换式控件
6. “跟从式”固定导航
7.垂直导航
8. 弹窗
9. 滑出页面、侧边栏和抽屉
10. 无所不至的链接
11. 高级转动条
12. 滑动视图
1.说明与引导标记
Secret
问题
用户希望了解如何利用应用的各项功能。
解决方案
设计一套说明或教程来演示各项功能如何利用。
此刻很多应用都利用这种方式在用户第一次启动时提供演示。
这种方式可以分为两大大体方式。
Secret和YouTube等应用采用了覆盖图指南的方式,并利用“引导标记”突出显示UI中的关键部份来讲明其作用。
另外,Carousel和Duolingo等应用则会在用户第一次启动时以幻灯片的形式引导用户走完全数体验进程,从而有效地说明应用能够帮忙用户实现哪些功能。
这一引导进程同时也是搜集重要信息(方便后期简单注册乃至更深切的需求)的绝佳机会,类似于设置向导。
这一模式对于无法第一时间直观了解功能的应用来讲相当重要,因为用户对你的应用了解越深刻,就越有可能继续用下去。
2.溢出菜单
Whatsapp、Gmail
问题
用户希望能够快速利用附加选项或操作。
解决方案
将附加选项和按钮隐藏在溢出菜单中,这样它们就不会干扰主界面。
溢出菜单在安卓系统中有着普遍的应用,其主要用于将不常常利用但与当前内容有相关度的选项和菜单项隐藏到操作栏中。
Whatsapp和Gmail等应用对刷新和状态设置等菜单项(这些都是用户需要能够快速利用,但如果是放在显眼位置会比较碍事的附加功能)就采用了这种模式。
在RelateIQ中,用户可以按住主菜单项来查看子菜单,从而实现快速导航到不同视图。
3. 滑块
Uber
问题
用户希望能够在不同选项之间无缝切换。
解决方案
利用滑动手指的方式实现选项切换的显眼、轻松过渡。
例如,Uber可让用户在各侧间拖动滑块无缝切换四种出行服务方式。
在这一UI设计模式中,其乃至可以放大缩小地图,从而给用户模拟出周边车辆的密度水平,让你能够自动看到各类可行的方案。
4.基于内容的导航
Tinder
问题
用户希望能够轻松、直观探索特定内容的细节。
解决方案
实现概览和细节界面的无缝过渡。
Tinder和9Gag均实现了这方面的无缝响应。
在Tinder中,其UI设计模式可让用户在两种用户资料界面无缝过渡,用户只需单击各视图的主照片即可。
不仅如此,若是用户在用户资料的详细视图界面下滑动各个照片,然后单击某个照片返回大体视图,其还会保留显示你所单击选中的照片。
这样即可实现极为流畅、直观的用户体验和流程。
5. 变换式控件
问题
用户希望能够执行各类不同的操作,但屏幕空间有限,无法显示全数所需控件。
解决方案
利用其他功能替换按钮和屏幕控件。
按照用户当前操作情况的不同,UI设计可利用针对性的元素替换先前的元素。
例如,用“执行”替换“撤销”或“添加”替换“删除”。
若是用户前后执行的操作存在必然的关联,那么这种方式绝对有效。
Pinterest和Spotify会把“+”变成“x”按钮,这样用户就可以知道自己可以取消添加别针或关注相簿。
这一UI设计模式可大量节约空间,让撤销操作快速简练,整体上可谓值得玩味的解决方案。
6.“跟从式”固定导航
Dropbox
问题
用户希望能够在应用内随时访问菜单。
解决方案
转动页面时维持顶部、侧边或底部导航栏不变。
在某些情况下,页脸部份子节的题目也可在转动时维持固定,或附着到已有的固定导航栏上。
以地址簿为例,其中按字母顺序分隔的每一个分节(“a”、“b”“c”等)可以在转动过度节题目时维持在顶部导航栏下方。
相册和文件夹类应用多采用这种设计模式。
在其他方面,当用户朝着某一方向转动时,可让菜单消失,而朝另一方向转动时则会固定显示。
在这方面Pinterest是一个很好的例子,其菜单会在向上转动时从底部消失,向下转动时从头出现。
这一点与用操作栏(Android机广为采用的模式)存储常常利用app功能的模式完全不同。
7.垂直导航
Facebook、Spotify
问题
用户希望能够在应用的不同部份之间进行导航,但屏幕空间有限,无法显示全数信息。
解决方案
将重要的UI部份以列表的形式进行呈现,让用户可以转动查看自己要执行的操作或内容。
在这一方面,转动是一个比较标准的移动应用手势,所以应用采用这一模式进行导航布局是比较合理的。
这一模式还可让UI的题目和脚标能够实现更多“通用”导航,例如操作栏等。
Spotify等音乐播放器,Yahoo!
、Digest等新闻阅读器和之外的各类应用都以不同方式采用了垂直导航的模式。
8.弹窗
TED、Dropbox
问题
用户希望在查看相关信息的同时维持当前在UI中所处的位置。
解决方案
以弹窗的形式显示重要通知和其他信息。
这一UI模式的优势在于能够以简练明了的形式查看其他信息或执行特定操作,同时无需用户退出当前活动。
正式的TED应用会以弹窗的形式放置播放控件,同时背景会以半透明形式显示,这样一方面可让用户知道自己能够对播放器执行相关操作,同时,又不会干扰用户阅读当前内容。
Dropbox和Kindle也将控件放到了弹窗里。
弹窗式UI模式对于这种应用的操作超级重要,因为其主要执行对象是数据,因此这一模式就可让用户清楚看到控件的操作目标。
在保证内容可见的情况下,用户可以对挑选选项进行调整或改变字体大小,同时不需要在不同视图间来回切换——所有操作都可以在当前界面完成。
弹窗和模拟窗口也可用于显示重要通知或需要用户特别注意的提示,要隐去弹窗需要用户点击或滑动。
以Secret和Swarm为例,这两个应用均利用弹窗来讲明用户继续操作的预期结果。
9.滑出页面、侧边栏和抽屉
LinkedIn、Gogobot
问题
用户希望能够在应用内的各个不同部份间进行导航,同时导航期间不用在每一个部份延误时间。
解决方案
为应用设计一个二级部份——例如导航、聊天、设置、用户资料等,该二级部份可在不需要时以可折叠面板的形式隐藏到主要部份以后。
在需要访问时,可移动到主要部份一旁或滑动覆盖主要部份。
由于滑动页面是和应用主要内容相离开的单独内容层,因此具体如何对抽屉内的内容(图标、文字乃至简单控件)进行布局可以灵活掌握,只要能够保证重要功能的快速访问即可。
通常情况下,抽屉可以隐藏到“汉堡式层叠菜单”下方,或隐藏在一个简单箭头(表明箭头内包括额外内容)后方。
10.无所不至的链接
Yelp
问题
用户希望取得前后一致的内容导航体验,同时不会受到多余内容的干扰。
解决方案
给应用内的大部份乃至全数内容加上链接,让用户能够自由探索寻觅自己所需的信息,而不会陷入死循环或被繁冗的超链接文本、多余的按钮、广告宣传等网站上常见的无聊内容所干扰。
若是用户希望与应用中的某一部份内容进行交互,他们一般会点击该内容,打开新视图取得详细体验。
举例来讲,在Yelp中,用户面临着多种选择——他们可以点击底部的按钮,也可以点击内容本身(例如地图或评论)进行阅读。
而Flipboard则在用户阅读数字杂志时提供了眼花缭乱的导航方式,例如滑动、点击、手抓退出、撤销、返回等等等等,相较Yelp要复杂得多。
10.高级转动条
Carousel、Dropbox
问题
用户希望能够看到自己当前在整体内容中所处的位置,并能够快速跳跃到较长的列表或图集的某个特定位置。
解决方案
除利用滑动手势进行转动外,很多移动清单或图集类应用还提供长时间显示或滑动时短暂显示的转动条。
在很多情况下,转动条还会配套转动索引(按日期、字母、分类、位置等排序)。
对于索引式转动,其转动提示条一般是长时间显示的,也就是说用户不执行转动操作时也显示。
通过触摸或拖动转动提示条能够以显眼的方式弹出当前所处部份提示。
可是,转动条和索引二者也可以结合采用,而且仅在转动时显示以节省屏幕空间、减少对用户的干扰。
对于转动和索引的功能比较关键的应用,转动条一般会以显眼方式长时间显示。
例如Carousel,其不仅有显眼的转动条,在底部还提供了一个强力转动条,以便用户轻松滚过上百万张照片。
随着用户创造内容、定阅、组群、列表等的日渐增多,咱们在未来将看到更多能够让用户以搜索和转动条之外的方式寻觅所需的创造性UI设计模式。
11.滑动视图
Yahoo!
、Digest、Flipboard
问题
用户希望能够在不返回索引的情况下从某项内容快速导航到另一内容。
解决方案
让用户能够以滑动内容的方式在不同项目间切换。
这一模式很类似于阅读相簿的感觉,此刻有愈来愈多的应用开始采用这一模式,比如Yahoo!
、Digest和Flipboard等。
这一模式有助于维持用户的浸入式体验,另外,其还可用于架构用途,例如把应用中的不同部份分类到各个“标签”,让用户能够通过滑动进行查看。
在采用这一模式时,还可以考虑一下如何以最佳方式让界面表现出其具有滑动功能。
让用户放手导航
关注用户预期的导航目标、他们是不是会观察导航元素、他们导航到应用某一区域的频率、用户的来源和利用应用的目的(也就是用户流)等等。
反复对导航元素进行整理、排序、改变大小和微调,直到取得超越预期的结果。
固然还需要沉思用户在尝试进入应用的某个部份时实际会采取哪一种方式,切勿遗漏关键要素。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 热点 12 导航 模式