关于iPhone XS 网页导航的思考

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年8月9日00:43:39 评论 467

关于iPhone XS 网页导航的思考

汉堡包菜单按钮和标签栏导航是手机应用程序设计中的一个老话题。但是目前来看,随着手机屏幕的尺寸越来越大,标签栏导航似乎越来越受欢迎。

很多手机应用程序已经采用了标签栏导航,但是大多数的网站还在使用汉堡菜单按钮作为主要导航。尽管这种导航解决方案不能用一只手在较大的移动屏幕尺寸上使用。

用户痛点

很多时候我们是在移动中使用手机。当我们在上班或行走期间,我们希望能够更快速更方便的使用手机,甚至是一只手的时候。这种情况下,我们的另一只手往往背着一个袋子,一个咖啡杯或者拉着在公共汽车上的扶手。

原始的汉堡按钮始终位于屏幕的左上角或右上角,因此在大型设备上单手使用传统的网站导航是一个很大的挑战。

挑战

多年来,越来越多的设计师和开发者决定在网站的底部设置一个固定的导航条。在桌面视图的情况下,这就像一个固定的头部导航,但是在移动设备上,它被粘在屏幕的底部,而不是顶部。

关于iPhone XS 网页导航的思考

后来,在汉堡菜单按钮旁边出现了一些动作项目,比如电话、电子邮件和方向指示器,这使得用户可以用一只手快速地访问网站上最重要的元素。

然而,在iPhone X上,这个解决方案不再是可用的,因为访问主屏幕的指示器总是在web内容之上,这使得所有的底层导航都被分散和破坏。

关于iPhone XS 网页导航的思考

设计

作为一种创建易于使用的网站导航的解决方案,我在屏幕底部创建了一个浮动的菜单按钮,它在每个移动设备上都很漂亮,包括iPhone X。

这个固定定位的浮动菜单按钮总是可以用一只手来实现,要么用户是对的,要么是左手。为了创建一个不受圆形屏幕角或重叠的主屏幕指示器影响的解决方案,我决定使用一个按钮而不是一个全宽度导航条。我把这个快速菜单按钮放在屏幕底部附近,但不太靠近边缘。通过这种方式,可以很舒服地触达并且不受重叠的UI元素或圆角屏幕的影响。

点击浮动菜单按钮后,用户可以完全访问网站的导航,快速的操作,如打电话给公司,发送电子邮件或开始导航到他们的地址。

关于iPhone XS 网页导航的思考

(这个解决方案唯一的缺点是,如果你想在iOS Safari上点击屏幕底部的任何元素,在第一次点击之后,只有Safari标签栏会出现,第二个点击将会激活网站导航。然而,这是一个权衡,以便能够单手使用网站,如果浮动动作按钮的位置正确,就可以在第一次点击之后骗过iOS Safari并打开导航。)

原型

在原型开发过程中,我的目标是创建一个快速,简短和响应的交互,同时确保从开发人员的角度来看也是可行的。

关于iPhone XS 网页导航的思考

im, 无色
  • 本文由 发表于 2019年8月9日00:43:39
iPhone迁移功能使用心得 浏览器新闻

iPhone迁移功能使用心得

刚刚买来台 iPhone11,由于原来的 iPhone 有300多 G 内容,我电脑硬盘才256G,就试了下 iPhone 的迁移功能,网上搜索的教程,在这里:https://www.liulanqi...
iPhone迁移功能使用说明 浏览器新闻

iPhone迁移功能使用说明

来源:AppSo 对于 iOS 这个或许是地球上最好用的生态系统,最近大家关注的都是 iOS 13 的 beta 版更新,仿佛正式版的 iOS 12 已经彻底过气了。当然,iOS 12 作为一个已经成...
iPhone浏览器 iCab Mobile 下载 浏览器下载

iPhone浏览器 iCab Mobile 下载

在 iOS 上你使用什么浏览器?相信大多数人的选择就是 Safari。很简单,Safari 足够简单和好用,再加上苹果的私有 API,Safari 在性能方面也完爆一些第三方浏览器。另一方面,在手机和...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: