美文网首页
2★ - iOS导航栏样式分析

2★ - iOS导航栏样式分析

作者: GUX交互组 | 来源:发表于2016-12-24 00:41 被阅读187次

文:小静静 | 转自微信公众号静静做设计呢(ID:jingidesign) 由原文删减


iOS导航栏设计

一、基础规范

iOS系统导航的基础形式

其中 text 为上一级的标题,title 为当前视图的标题,a 代表操作控件。

ios10 规范中提及:一般来说,导航栏上应该不多于以下三个元素:当前视图的标题、返回按钮和一个针对当前的操作控件。

在已下载的 253 个 app(app 来源于豌豆荚的设计奖,appso 和最美应用的推荐,app store 的编辑推荐等,),归纳了以下三种形式:含三种元素、不含返回按钮、不含返回及标题。




含三种元素:

大部分 app 没有显示上一级标题,右边的操作控件最多为 2 个。在使用体验上,只要保证两个控件之间距离符合规范,2 个操作控件是可行的。



不含返回按钮:

不含返回的一般为一级页。



不含返回及标题:

大部分 app 右边的操作控件一般不多于 3 个。



二、扩展形式

在已下载的 253 个 app,归纳了以下四种形式:包含搜索框、包含标签、包含 logo。


包含搜索框:

操作控件加搜索框,多用于搜索需求优先级较高的页面。与搜索栏的区别是,搜索栏不包含管理当前页面的操作控件。




包含标签:

操作控件加多个标签,一般不多于 3 个,若多余三个可以考虑另设标签栏。





包含LOGO:


相关文章

网友评论

      本文标题:2★ - iOS导航栏样式分析

      本文链接:https://www.haomeiwen.com/subject/mlrlvttx.html