从应用程序设计和点击栏中学到一些东西

用户头像
深圳/网页设计师/6年前/178浏览
从应用程序设计和点击栏中学到一些东西

随着手机的尺寸越来越大,我们不断调整我们设计移动网页的方式。是否可以从应用程序设计和点击栏中学到一些东西?



我们可以通过移动导航以降低交互成本吗?在本文中,我们将找出答案。




手机屏幕尺寸在10年内翻了一番



毫无疑问,10年前被认为“大的吓人”的手机屏幕在今天看来也太小了。随着高度互动的游戏和高清显示器的出现,消费者更喜欢大屏幕的电影,视频和游戏。整个社会已经习惯了两手使用手机,而手机软件也适应了这一趋势。

MOVR的研究数据表明,更大尺寸的智能手机已经占领了市场


2017年,设备制造商开始采用具有5.7英寸和6英寸18:9显示屏的更高的18:9长宽比。现在,我们开始看到6英寸18:9显示器成为旗舰产品以及中端价格段的新标准,因为它们的屏幕面积超过5.5英寸16:9显示器。

基本上,手机的屏幕尺寸越来越大。很好,但是我们如何调整设计模式以反映这些变化?





拇指区:为移动用户设计



随着屏幕顶部越来越难以触及,将主菜单项靠近底部放置是更好的选择。


史蒂芬Hoober发现,49%的人依赖于一个拇指来实现在手机上的东西。在下图中,手机屏幕上的图表是近似覆盖率图表,其中的颜色表示用户可以到达屏幕的哪些区域并与拇指互动。绿色表示用户可以轻松到达的区域;黄色,需要伸展的区域;红色区域,要求用户改变握持设备的方式。



在设计时,请考虑将您的应用程序用于多种环境;即使是喜欢使用双手握把的人,也不一定总是会使用多个手指,更不用说用两只手与您的UI进行交互了。将顶级且常用的操作放在屏幕底部非常 重要。这样,通过单手和一拇指的交互即可轻松达到目标。


另一个重点-底部导航应用于具有类似重要性的顶级目的地。这些是需要从应用程序中的任何位置直接访问的目的地。





底部导航设计的几个关键要素



Tab几个为合适?


避免在底部导航中使用五个以上的Tab,因为分接目标之间的距离太近。在标签栏上放置太多标签会导致人们在身体上难以轻按所需的标签。而且,通过显示每个其他选项卡,您会增加应用程序的复杂性。






当前位置


在应用程序菜单上看到的最常见的单个错误是无法指示用户的当前位置。“我在哪里?”是用户成功导航所需回答的基本问题之一。用户应该在第一眼就知道如何从A点转到B点,而无需任何外部指导。您应该使用适当的视觉提示(图标,标签和颜色),因此导航不需要任何说明。





Tab颜色


避免在底部标签栏中使用不同的彩色图标和文本标签。相反,请遵循此简单规则-用应用程序的原色为当前底部导航操作(包括图标和存在的任何文本标签)着色。





统一性


基于格式塔理论的整体性原则,用户观察内容是总是将相近或者关联的内容视为一个整体,同级导航的一致性也是必然的,这种一致性体现在交互、元素等各个方面。





结论



导航通常是将用户带到他们想要去的地方的工具。在使用应用程序时,请始终考虑用户角色以及他们的目标。然后,定制导航以帮助他们实现这些目标。您正在为用户设计。产品对他们来说越容易使用,他们使用它的可能性就越大。


4
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】银行卡icon
UI通用设计素材1
【新年UI图标】优惠券icon
3D渐变流体抽象矢量UI背景图
高级感金属拟物 UI设计组件库
UI应用平面图标
Security Camera UI kit
【新年UI图标】珠宝icon
新能源APP应用UIKit
【新年UI图标】游戏/娱乐icon
钱包ui模板
高级表盘系列UI源文件
【新年UI图标】30个图标
【新年UI图标】影音icon
【新年UI图标】钱包icon
智能家居中心 简约 UI设计组件库
盲盒APP UI设计
抽象液态渐变UI背景模版
UI 登录界面设计模板包
拟物风质感写实UI卡片合集源文件
3D卡通UI界面图标可爱插画免扣素
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
我的钱包-UI界面设计-app
【新年UI图标】汽车icon
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册