赞助商
立即赞助

让APP中内容呈现更友好易用的5种常见导航设计模式

UI设计3年前 (2021)发布 流光
2.8K 0 0

设移动端APP的时候,重的一点确保界面交互足够用又清晰直观。如果这两基本的特征都无法达,用户足够的理由使用它的,不用额外的价体了。不过,确保可用性的提下,学习曲线太过陡峭,用户的留存率则不会太高,毕竟学习本摆那儿。良好的UI设,通常会帮用户解决问题,确保可用性易用性,这些过设师反复打磨验证过后的相对典的设实践,则被视作设计模式。设计模式的好处在于,它经过了验证,并且具备突的特性。了解如今流行的设计模式,够你的APP在投放场之后获得更多的支持,拥有更强的竞争。

让APP中内容呈现更友好易用的5种常见导航设计模式

今天的章会着重介绍移端APP导航的设计模式。无论你设计的APP是么样的类,或多或都绕开导航设计。为APP中最常用也是最重要的模块,导航甚至能直接影响到用户不喜爱你的APP。

1、产品演示和教程引导

让APP中内容呈现更友好易用的5种常见导航设计模式

可用性是APP是否取得成功的关键性响因素。但是有的应用当中本身就包含着相对复杂的功能和多的内容,这个候,通过产品演示和教程引导来告知用户如何使用这一产品,是一个颇为有效的方式。Secret 和 Youtube 这个应用就面对着这的局面,在新用户开界面之后,计将关键性的UI控件标注出来,通过交互式的引导来帮助用户熟悉这些功能。而 Carousel 和 Duolingo 则采用了展示性的幻灯片来帮助用户体验其中的核心功能。当APP中部功能对于用户而言不够显的候,可以采用这种教程和引导模式来帮助用户,在简化APP的复杂性和易用性上有显的效果。这种计模式的另外一个优势在于,能够帮助开发者和计搜集更多有效的用户数据,进而找更加便捷的交互,提升用户体验。

2、基于内容的导航

让APP中内容呈现更友好易用的5种常见导航设计模式

论你APP含着怎样内容,你希望体用户体验是畅,内容足够晰。基于内容导航指并是系统性导航,而是在浏览过程,让概览模和详情模下缝转换导航模。以 Tinder 这款应用为例,在用户个页,你首先看到是概览模,其用户图片占据着绝大多数区域,再击下后,图片缩小,你可以看到更多和用户相关信息,着是详情模。各有侧两模满足不需求,缝地切换引领用户到不内容。

3、滑块

让APP中内容呈现更友好易用的5种常见导航设计模式

Uber 当中,常常会看到三到四种不同的乘车服务,设师并采用四不同的界面行呈,设了一可供用户回拨动的滑块,用户只需左右滑动就能够速切换不同的服务。这也一种典的移动端导航设,只需使用手指轻轻扫动,就能无缝切换。关键的,这种模式非常直观的,学习本几乎零。

4、弹出框

让APP中内容呈现更友好易用的5种常见导航设计模式

并是有的弹框都是“坏”设计。有的时候,为了户和界面之间更好的交互,弹框是最佳的解决方案。当有最的推送信息现,户在浏览当前页面而想跳的时候,使弹框来呈现时介入的信息,是一个两全美的方案。过,这种弹框遵循的设计模式是这样的:户执行特定的操作或者到达应的特定位置的时候现弹式口,显示与当前操作/位置相的信息。

弹出框于景,用户所浏览的原始内则背景中依然存,关闭弹出框之后,用户可以继续查看之未看完的内。弹出框一种足够引人瞩目的控件,用户真需的时候提供帮,如果滥用则会非常恼人。与此同时,弹出框的关闭也必须足够便捷,好轻扫或者点击就能轻松关闭。

TED官应用,采用了这样设计模。用户在浏览内容列表时候,可以以淡入淡出形弹出视频信息,用户可以临时查看这些视频内容,关闭后继续查看信息流不受影响。

5、侧边栏和抽屉控件

让APP中内容呈现更友好易用的5种常见导航设计模式

同电视桌面端的电脑相比,手机的屏幕尺寸太小了。所以,这些小屏幕行设的的问题,始终如何限的区域内效优置多的内。了避免屏幕混杂的信息,设师们常常选择侧栏、下拉框抽屉控件承载多的内。我们常见的,如今几乎无处不的汉堡单、滑出单的箭侧栏,其中都承载了多的选项深层级的内。通过这样的信息收纳方式,让主界面可以好的显示关键的信息。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

交互设计师作为近年兴起的互联网设计岗位之一,具有其岗位产生的背景的特殊性。从交互设计师岗位职能来讲,它是产品与视觉、...
交互稿
之前我把交互设计师职业技能的第一部分——思维部分讲完了,之后我开始讲「眼界」这部分。老实说,我只是作为一个设计师在写些...
交互模型
优步不允许你提前很早预订出租车,亚马逊最初只专注于卖书,谷歌最初只是一个搜索引擎。不知道从什么时候开始,我们开始认为...
Eugen Eşanu
当产品发展到一定阶段,优秀的用户体验设计对于产品在激烈的商业竞争中保持核心竞争力是至关重要的。一个产品能否高效地帮助...
产品设计
2018年5月9日凌晨1点,Google 开发者大会上对 Material Design 做了更新的讲解,其中令我印象深刻的是 Google 对图形语言单独...
Google
旅行时我们顺利到达一个又一个的目的地;生病时我们快速地找到医疗科室;超市里我们在数以万计的商品中找到心仪的商品,完成...
卡通形象设计
一、可用性价值 动效很容易被象成某种增强愉悦的东西,自身并不具备什么价值。常常被当做可有可无部分,通常作为最后一步点缀...
交互设计
怎么样的原型图才算是专业的原型图呢?文章总结了一些经验,希望对你有所帮助。文章分为上下两篇,阅读上篇内容→《超全面总结...
交互设计