Tech Neo技巧沙龙 | 11月25号，九州云/ZStack与您一路商量云时代收集界线治理实践
应用汉堡菜单照样应用标签式导航，是移动端UI设计师经常会纠结的问题。就今朝来看，跟着手机屏幕尺寸弗成控制的慢慢膨胀，标签式导航似乎越来越受迎接。
不过值得留意的是，在移动端上APP会加倍偏向于应用标签页导航，而绝大年夜多半的移动端网站仍然会应用汉堡菜单作为重要的导航对象。值得留意的是，汉堡菜单这种设计在今朝越来越大年夜的手机屏幕上，可用性正在逐渐降低。
关键的痛点
绝大年夜多半的时刻，我们会在行进中应用手机，在地铁上，超市里，鄙人班路上，这个时刻我们经常无法双手操作棘手上提着袋子，或者拿着一杯咖啡，或者握着地铁上的分别。然则往往这个时刻，我们更须要同界面进行快速的交互。
多半传统的移动端网站导航，要么在页面的最顶端，要么在最底端，可是问题在于棘手机屏幕太大年夜了。网页的汉堡菜单搁笔却经常位于手机的左上角或者右上角，正好是距离拇指最远的地位。
面对的挑衅
面对这种痛点，UI和UX设计师们并没有忽视。有不少设计师会和开辟者协同，在网站界面的底部放置一个小尺寸的固定导航栏。在桌面端上浏览的时刻，它看起来是悬浮在页头的导航，在移动端上，它是悬浮固定在页面底部的快速拜访式的小的导航按钮组合。
随后，这种测验测验慢慢演变成了接近汉堡搁笔的一系列快速拜访功能按钮，这些按钮代表着这个网站的重要、常用的功能元素，可能是导航、德律风、特定页面的链接等等。
可问题在于，在iPhone X上，即使是如许设计的导航，可用性依然存在问题，承载浏览器重要交互的按糯竽暌怪须要大年夜界面顶部触发。同时，网页底部内置的菜单其实是会让人分心，全部别验是支瑰异碎的。
在设计原型的时刻，我的目标是创造一个响应快速而简短、可交互的原型，确保它在开辟人员那边看起来也是可行的：
落地的设计
所以，我揣摩着设计出一套可以或许尽量兼顾到包含iPhoneX在内的所有设备的移动端网页导航，尽可能让它易用且解决各类痛点。我的办法不复杂，就是在移动端网页接近底部的地位上增长一个悬浮的菜单按钮。
这个固定地位的悬浮按钮居中靠下，无论是左手握持照样右手握持都能正好点击获得。为了不受到iPhoneX 屏幕边沿圆角的影响，也尽量不影响内置的导航对象栏，我决定让这个按钮点击触发之后，展开是一个横跨屏幕的菜单栏。按钮的地位接近底部然则不接近边沿，不会隐瞒到iPhoneX 的Home键。地位的拔取并不难。
点击悬浮按钮之后，网页菜单展开，也会触发并调用体系内置的浏览器导航菜单，两者合而独一。用户不仅可以在膳绫擎的网页菜单中调用各类针对当前网页的操作，还能点击下面的浏览器菜单，针对不合网页进行操作。
不过，这个解决筹划还不是完美的。在iOS的 Safari 浏览器上，点击屏幕底部的任何元素，第一次点击会触发Safari 浏览器内置的菜单栏，第二下才会真正触发这个悬浮的网站导航栏。不过开辟者可以有针对性地进行调剂，欺骗iOS Safari 浏览器，让它在第一下点击的时刻就触发这个网页导航。
编者按：iPhoneX 宣布之后，全新的屏幕和为之适配的iOS体系，为我们出现出全新的交互。之前我们习惯了的交互，在这块带着刘海的屏幕上，不再完全雷同，之前适可而止的设计，在这块屏幕上似乎也没法完美的运作了。产品设计师Daniel Korpai 发清楚明了在iPhoneX移动端网页导航上存在的交互汕９依υ?题，并撰写此文。
可用的原型
https://dribbble.com/shots/3851367-iPhone-X-Web-Navigation-Idea
最终的思虑
这并不是一个太复杂的设计项目，然则在实际需求上，倒是实实袈内涵地解决了令人纠结的痛点。这个概念设计在大年夜型的移动端设备上其实也可以或许轻松实现。不过，它还能持续深刻地摸索下去，比如，它在iPad Pro 的浏览器傍边，这个导航按钮放置在哪个地位更合适呢?设计师还可以细心衡量这个按钮是否要在滚动浏览的时刻隐蔽起来，怎么隐蔽，何时触发。
我想，这才是UI/UX设计师须要思虑的问题吧。
【编辑推荐】
- 拿到iPhone X之后，必定要尝尝这些别人没有的新功能
- 教你轻松几步 给iPhone X装上Home键
- 这个应用可以或许让iPhone X的刘海“消掉”
- iPhone X操作变得更复杂：苹不雅无奈但果断
推荐阅读
麦渴攀莱恩创造集装箱的时刻，或许不会想到这种运输方法会推动经济的全球化成长。当一批批货色被打包搬上火车、轮船、飞机，集装箱不仅解决了装货慢、载量小的困境，还将本来数月的运输时光大年夜数月缩>>>详细阅读
本文标题：为了让iPhone X更好浏览网页，我给网页加了个导航按钮
地址：http://www.17bianji.com/lsqh/38797.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示