赞助商
立即赞助

iOS 人机界面指南精简版笔记之界面元素:Bars

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

最仔细研读了苹果官最的设计规范。上没有到很满意的翻译版本,于是自己老老实实的啃了几遍官方档,顺把习笔记输给大分享一。

里有几点要提醒一下大家:

  • 这是简明笔记,只了重点容,是通篇逐字逐句的翻译。想要全面了解的同建议认真习官方档。
  • 笔没有完按照官方的目录排序(官方二级目录按字母表顺序排列),而是根据重要程度、使用频率、相关以及易混淆程度等,综合考量,重新排序。
  • 如果有疏漏和错误,欢迎找茬提见~

基界面元素包括三大类,分别是Bars(栏)、Views(视图)、Controls(控件)。今天就从Bars(栏)开始~

以下是正文。

Navigation Bars 导航栏

iOS 人机界面指南精简版笔记之界面元素:Bars

外观:导航栏是半透明的,可填充为背景色。

隐藏:置成在特定条件下隐藏:例用输键盘、某手势、缩放视图等。

建议在全屏展示隐藏导航栏,以营造沉浸效果,但要让用户使用简的势(如点击)恢复导航栏。

注意:不需要导航或需要多个控件来管理内容时,请使用工具栏。

1. Navigation Bar Titles 导航栏标题

iOS 人机界面指南精简版笔记之界面元素:Bars

标题的用

数情况下标题以帮助用户他们在看什么。但标题不是必须的,也以空着。例在「备忘录」中,一行内容已经提供明确标题,在导航栏上添加标题就没必要。

大标题

特别强内容时以使用大标题。大标题方便用户浏览和搜索。

注意在iOS 13及更高版中

  • 标题的导航栏不包含背景质阴影。
  • 可隐藏导航栏的边框(通过删除导航栏的阴影),这样的好处是标题和容之间的联系更紧密。
  • 用户滚动内容区域时,大标题转换为标准标题,时边框重新出现,用来明确区分标题和内容。
2. Navigation Bar Controls 导航栏控件

iOS 人机界面指南精简版笔记之界面元素:Bars

导航栏不要挤多控件

通常不超过以下素:当前标题、后退按钮、一个内容操作控件。

段控制器

利用段控制器可以使页面层更扁,但只能用在最高层的页面,底层页面还是要用后退按钮。

如使用了分段控制则该栏不应含标题或分段控件以任何控件。

不要使用屑导航

返回按钮提供返回上页路径。如担心用户迷失,考虑将层级结构更扁平化。

文按钮

如使用多个文按钮,要预留足够隙以保证辨识性。

Tab Bars 标签栏

iOS 人机界面指南精简版笔记之界面元素:Bars

外观

和导航栏一样,标签栏是半透明度的,填充为背。横屏或竖屏方向标签栏高度一致。

隐藏:输入键盘出时被隐藏。

数

原则标签数不限制,屏幕或者横屏方向可以纳多数的标签。如果屏幕不下,后的标签会变「多」,点击后切换屏幕展示多标签。但这样用户操作效率不高,屏幕利用率也很低。
建议机上3-5个的标签数量比较适。少了也不适,标签之间会缺乏关性。

注:

  • 标签栏一般在最外层的全导航,要一直可见。(模态视图除外,模态视图从属于全导航)
  • 果某标签没法使用,不要删除或者禁用标签,用户得不稳定、难以预料。要持标签点击,并说明标签页内容不用的原因。
  • 不要把标签栏和工栏混淆。标签栏用来导航,工栏是针对当前视图的操作,者不会同出现。
  • 切换标签时候,相关联视图随转换,而不影响屏幕上其他位视图,否则会破坏页可预测性。

Toolbars 工具栏

iOS 人机界面指南精简版笔记之界面元素:Bars

外观:和导航栏、标签栏一,工栏是半透度的,可填充为背景色。横屏或竖屏方向高度一致。

隐藏:户太可需要他们的时候,或者输入键盘现的情况隐藏。例如在Safari中,户滑屏幕浏览页的时候工具栏是隐藏的。

注意

  • 工具栏不要使用分段控制。工具栏指定内容操作,分段控制用来切换视图内容,两者含义不。
  • 使用图标还文字按钮?3以建议图标,3以下建议文字加直观明了。

iOS 人机界面指南精简版笔记之界面元素:Bars

Search Bars 搜索栏

iOS 人机界面指南精简版笔记之界面元素:Bars

隐藏:和导航栏一起可以始终显示,也可以默认隐藏,直用户向下滑动显示。

注:虽然都可输入字,但要使本框取代搜索栏,两者给户的心里逾期截然同。

iOS 人机界面指南精简版笔记之界面元素:Bars

启清除按钮。大多数搜索栏都包含一个清除按钮,可清除该字的容。

适当时启用「取消」按钮。大数用搜索栏包含一个「取消」按钮,该按钮立即终止搜索。

iOS 人机界面指南精简版笔记之界面元素:Bars

以使用占位符或者搜索栏上方的单行简短提示,指导用户搜索的内容。

考虑在搜索栏下方提供有用的快捷方式和其内容,减少用户输入负担,更快获取内容。

1. Scope Bars 范围栏

iOS 人机界面指南精简版笔记之界面元素:Bars

若内容明确分类,使用范围栏缩小搜索范围。但提升搜索效率首先应该优化搜索结果,而非使用范围栏。

Status Bars 状态栏

iOS 人机界面指南精简版笔记之界面元素:Bars

不改变系统状态栏样式:用户期望状栏在系统范围内保持一致。

颜色模式:使亮色模式或者暗色模式都可,要注意颜色对保证辨识。

隐藏:议在全屏播放媒体内容时隐藏状态栏以造沉浸体验。要避免永久隐藏状态栏。如没有状态栏,们必须离开应用才能查看时或是否连接Wi-Fi。

默认况下状态栏背景透明的,可展示下方屏幕内,防止用户认可以状态栏下方内交互的办法以下三:

  • 使用导航栏,把下内容和状态栏分开。
  • 状态栏背景使用渐变色or纯色填充,遮挡下方内。
  • 使状态栏方容模糊,感觉方容被毛玻璃覆盖。

欢迎关注作者的微信公众:「能呆书一整天」

iOS 人机界面指南精简版笔记之界面元素:Bars

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

相关文章

编者按:随着亚马逊、小米、阿里巴巴等大公司都推出了智能语音产品,如何为这类以语音交互为核心的智能产品做设计也成了一个...
交互设计
在这之前我得先提及一本书──《简约至上:交互式设计四策略》。这本书基本算得上是交互设计的入门必读书籍了,非常适合身处项...
UI
之前一直觉得色彩,图形,字体是 UI设计的三大构成,任何设计都是从这三大元素开始的,所有的 UI设计都是由这些构成的,但是...
界面设计
我们的日常生活总是会面临无数的选择,尤其是在职业生涯中,我们必须考虑到很多的反对和挑战,更好的设计解决方案不仅是基于...
UI配色
底部导航栏可以说是现在最流行的导航控件了,微信、支付宝、淘宝、网易云音乐等等,各种类型的 APP 都有应用。 如何使用这...
导航栏设计
为什么一个简单的界面,你做出来后总觉得不够精致,很可能是因为你遗漏了一些容易忽略的设计细节。本文作者通过一个案例,细...
App设计
笔者最近在参与组件库的设计工作中,发现了一个很有趣的现象:诸多设计师都会以8像素为基数设立间距规范,将其运用在界面和元...
ui设计
近年来,「设计规范」逐渐被「设计体系」或「设计语言」的概念重塑。基于一套架构严谨、规则统一的体系框架,产品表现层面的...
一致性原则