文:小静静 | 转自微信公众号静静做设计呢(ID:jingidesign) 由原文删减
iOS导航栏设计
一、基础规范
其中 text 为上一级的标题,title 为当前视图的标题,a 代表操作控件。
ios10 规范中提及:一般来说,导航栏上应该不多于以下三个元素:当前视图的标题、返回按钮和一个针对当前的操作控件。
在已下载的 253 个 app(app 来源于豌豆荚的设计奖,appso 和最美应用的推荐,app store 的编辑推荐等,),归纳了以下三种形式:含三种元素、不含返回按钮、不含返回及标题。
含三种元素:
大部分 app 没有显示上一级标题,右边的操作控件最多为 2 个。在使用体验上,只要保证两个控件之间距离符合规范,2 个操作控件是可行的。
不含返回按钮:
不含返回的一般为一级页。
不含返回及标题:
大部分 app 右边的操作控件一般不多于 3 个。
二、扩展形式
在已下载的 253 个 app,归纳了以下四种形式:包含搜索框、包含标签、包含 logo。
包含搜索框:
操作控件加搜索框,多用于搜索需求优先级较高的页面。与搜索栏的区别是,搜索栏不包含管理当前页面的操作控件。
包含标签:
操作控件加多个标签,一般不多于 3 个,若多余三个可以考虑另设标签栏。
包含LOGO: