写给新手的控件设计指南（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

（编辑：河北网）

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