TAB设计一些个人思考
以前有在《移动应用ui设计——导航设计》中提到底部和顶部tab设计的模式和设计来源,如今市场上很多app都沿用了底部选项卡的形式。随着app内容的丰富,tabs方式也越来越多的呈现出来,tabs这一展现方式使得在不同的视图和功能间探索和切换以及浏览不同类别的数据集合信息变得更加简单。
用法:tab用来显示页面的分组内容,tab标签用来简要的描述内容。
【TAB设计一些个人思考】同理,只有当用户不需要同时从多个选项卡中查看内容时才使用Tab导航。因为使用Tab导航会增加用户短期记忆的负担,增加了认知负荷和互动成本,并降低可用性。
文章图片
tab 作用
1.令导航不言自明。
Tab 这种用户控件是易于理解和使用的,精心设计的 tab 能通过与其它 tab 的不同来清晰地表达用户当前所处位置。
所以此处用户思维是:1,tab标签题目是什么?2,查看内容是什么。3,不感兴趣查看下个标签
文章图片
2.提高内容组织的质量。
Tab 对内容进行有意义的划分,使其在屏幕上占用更少的空间。大多情况下,tab 在视觉上连接了页面中的内容。这也加强了页面空间和活动 tab 之间的联系,也能使用户可以轻松地访问他们感兴趣的内容。
所以tab带给用户更多的体验是左右滑动的转场动效,强化不同tab处于同一个屏幕的感觉,使得信息结构更加扁平。
3.增强视觉上的一致性。
ios10的人机界面设计指南中提到了一致性的设计原则。一款内部一致的应用能够贯彻相同的标准和规范:使用系统提供的界面元素、风格统一(众所周知)的图标、标准的字体样式和一致的措辞。应用所包含的特征和交互行为是符合用户心理预期的。
但其实比一致性更重要的是设计能够让用户轻松快速上手app,低成本的理解页面核心内容,这种将内容展示给用户是对以内容为中心的用户界面设计非常好的展现形式。
4.tab内容的同一性和差异性。
ios的tab样式存在多样性,除了同类信息tab外,异类信息也可以用tab的形式展现。而用户在使用 tab 时则认为他们会在当前视图中看到与已打开的 tab 或父级 tab 相关的内容即可,并不会过多的从整体tab去认知和比较,如果我们的设计是让用户在tab里面进行反复的比较各个tab的内容信息,则违背了tab的设计原则,让原本易用的设计变得复杂了。
tabs同类信息比较常见,新闻类app有很多标签模块
文章图片
文章图片
而腾讯也有单独把视频作为tabs的一项,相比于其它地域和类别的标签,也不会显得难以理解和突兀。
文章图片
文章图片
Tab 也可以以某种方式分割相互关联的数据。在 Apple AppStore 中每个 app 视图都有详细信息,评论和相关子视图的 tab。
文章图片
5.自然的平级
通常,用户不需要同时看到多个 tab 的内容。如果你的内容需要人们比较不同 tab 上的信息,那最好不要使用 tab ,因为反复切换增加了用户的短期记忆负担,降低了可用性。
6.范围选择栏或过滤器
当我们对用户可能想要搜索的内容有明确的定义或分类时,将 tab 引入范围选择栏可能起到很大作用。
文章图片
总结:tabs的设计初衷在于让用户易用易理解产品,tab的标签则让用户更易理解当前tab页面内容,用合适的页面布局形式突出页面的功能,减少用户比较与思考成本。
tabs页面的内容要注意其一致性,而界面的一致性可以分为形式与功能,这里可以遵循一条理论:形式满足于功能(而非功能满足形式),以内容为主,展现出用户需要的信息才是优秀的设计。
而视觉则需用其高超的技艺让界面的形、色、质相辅相成,让每一个不同的组成元素,文字、组件、图标交融交错,使其整个app每一个组成部分都有特定条件下的前提以促成他们在视觉表现上的一致性。
tab可能看起来像一个微小、乏味的图形用户界面设计,但我们合理的运用Tab的特点,扁平的信息架构,让用户快速获取信息,阅读理解页面内容,这样也能为我们的用户体验加分哦!
推荐阅读
- PMSJ寻平面设计师之现代(Hyundai)
- 今天写一些什么
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- 爱琐搭配(喜欢复古、冷淡,像这种双环设计的气质耳环)
- 别墅庭院设计,不同的别墅庭院设计也给人视觉上完全不一样的!
- tableView|tableView 头视图下拉放大 重写
- 「按键精灵安卓版」关于全分辨率脚本的一些理解(非游戏app)
- 一些杂感(11)
- 记录iOS生成分享图片的一些问题,根据UIView生成固定尺寸的分享图片