写给新手的控件设计指南（1）：UI栏

作者对五种UI栏的设计进行了梳理分析，包括导航栏，搜索栏，状态栏，标签栏和工具栏，供大家参考和学习。

之前的文章有连载过ios12的人机界面指南，写到了app框架，接下来几篇文章会接着跟大家分享控件设计指南，包括以下三个部分，今天讲第一部分：UI栏。

ios13设计规范里，UI栏包括导航栏，搜索栏，状态栏，标签栏和工具栏，其中搜索栏较为复杂，所以也做了一个思维导图，分享的内容主要为以下几部分：

下面进入正文：

01 导航栏navigation bars

1. 导航栏在ios规范里的描述

导航栏在页面顶部，状态栏的下方，常见的构成如下图：

当需要强调当前页面时，可以使用大标题。大标题的好处：帮助用户明确当前页面，同时帮助用户明确何时滚动到了页面顶部。大标题的交互效果：上滑时大标题缩放成小标题在导航栏中显示，如下：

需要注意的点：

（1）显示全屏内容时，为给用户更好的体验，可隐藏导航栏，比如查看全屏照片，观看视频时，阅读类软件阅读状态时导航栏会自动隐藏，然后可以通过简单的操作唤醒导航栏（如单击屏幕）。

（2）导航栏不要放置过多控件。一般情况下，导航栏只能包含「标题」「返回按钮」和「功能按钮」，当出现多个控件时，将其折叠。如下图，苹果自带的信息app，「管理信息列表」「编辑名字和照片」用一个按钮进行了折叠，点击「更多」以弹窗形式出现。

再比如，备忘录app，同样使用「更多」将操作隐藏。

2. 导航栏的延伸设计

导航栏的标题主要起到导航作用，告诉用户当前在哪，当页面底部有菜单时，标题可以隐藏，这样就可以给其他内容留出更多空间。

用户的阅读习惯是从上至下，导航栏的位置是用户进来页面后最先看到的，所以导航栏被赋予了更多功能，常见的有：

（1）导航栏与与搜索栏结合：比如电商类app，像淘宝，京东都将搜索栏冻结在导航栏，方便用户快速进行搜索。

（2）营销入口：导航栏除了放置功能控件外，为了满足短暂的业务需求也经常成为营销的入口，这样的入口具有很强的不固定性，将其放置在导航栏，不会使页面结构发生太大变化，同时它也不像浮窗那样具有很强的打扰性。比如双十一前京东推出的「超级百亿活动」：

02 搜索栏search bars

1. 在ios设计规范里的描述

搜索允许用户通过输入关键字得到目标信息，搜索栏可以单独显示，也可以显示在导航栏或内容视窗中，当显示在导航栏时，可以将其固定在导航栏，以便始终可以访问，也可以将其隐藏，上滑时再显示。

2. 搜索的作用

当产品内容过多时，用户不能快速准确找到目标功能或内容，所以就出现了搜索，对用户而言，搜索能帮助他们在短时间内精准的直达目标，对产品本身而言，搜索是一个巨大的流量入口，在产品运营中起着举足轻重的作用。

除此之外，我们也能通过对用户搜索数据的收集与分析，探知用户实际需求，找到产品优化和运营的机会点。

3. 搜索的方式

随着科技的发展，搜索方式越来越丰富，可以通过文本，语音，图片，视频，扫一扫等方式实现搜索目的，文本搜索很常见，不再赘述；语音搜索，一般伴随着文本搜索出现，比如支付宝的语音搜索：

还有音乐类软件的听音识曲功能也相当于语音搜索，再比如网易有道词典的语音搜索，如下：

图片搜索：比如淘宝的通过图片搜同款/相似款，还有百度图片的以图搜图功能。

视频搜索：视频搜索是抖音针对部分用户刚上线的功能，用户可以根据视频中的人物搜索到该人物的其他视频，随着5g的发展，想必该功能会得到更广泛的应用。

扫一扫搜索：淘宝的扫一扫搜索功能，通过扫描目标，搜索相关商品。

4. 搜索流程

这里主要以文本搜索展开介绍，搜索流程可以概括为搜索前→搜索中→搜索后，如下图

（1）搜索前

搜索前要注意的地方就是搜索入口，下面详细说一下不同搜索入口对应的场景：

1）独立的搜索tab

将搜索作为一个独立tab的场景是，搜索对用户和产品本身都非常重要，用户使用搜索功能非常频繁，用户能通过tab栏快捷定位到搜索，例子有app store，ios的照片，微博。

2）搜索框

最常见的入口形式即在页面顶部以搜索框形式出现，这种形式又分为以下几种交互方式：

搜索框随着上滑操作消失，反向滑动到顶部时出现，如微信，ios的备忘录都是这种方式。

上滑时搜索框收起变为搜索icon，反向滑动时搜索框出现，如支付宝，百度网盘

‍

搜索框冻结在页面顶部，方便用户快捷使用，多用于内容，电商类产品，搜索功能很重要。如淘宝，京东，小红书，知乎，美团都是这种方式。

3）搜索icon

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!