一、状态栏
状态栏出现在屏幕的最顶部,并显示有关设备当前状态的有用信息,如时间,信号数据,⽹络状态和电池电量。
状态栏中显示的实际信息因设备和系统配置⽽异。
1.基础类
背景色为黑白的状态栏为基础类状态栏
交互说明:
状态栏也能自定义背景色和导航栏颜色保持一致。
产品在特定界面可隐藏状态栏,不建议所有页面都隐藏状态栏。
2、背景模糊类
在 iOS 系统中,通过对状态栏和导航栏进行背景模糊处理,可以使得产品体验更加沉浸
交互说明:
具体的实现效果可以通过前端代码实现,这里只是模拟 iOS 的背景模糊
二、导航栏
从页面布局上看,导航栏分为顶部导航栏、底部导航栏和侧边导航栏。最常见的是顶部导航栏,位于状态栏下方,主要用于明确页面位置、层级等。
一般来说,导航栏主要包含以下内容:
1)网站/应用名称:帮助用户一眼识别品牌
2)主要分类:根据网站内容或服务的不同,将信息分门别类,如产品、服务、价格等。
3)搜索框:方便用户快速查找内容
4)用户账户相关:如登录、注册、个人中心等,通常结合用户头像或特定图标表示。
5)联系方式:用户与网站或应用的联系途径
6)辅助菜单:如汉堡菜单,用于隐藏或展示更多的导航选项。
7)社交媒体链接:快速访问品牌的社交媒体页面
三、标签栏
标签栏是用户进入APP 的第一触点,绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。标签栏是用户界面中非常重要的导航元素,它不仅影响用户的操作体验,还关系到整个应用的美观度和易用性。标签栏最多显示5个。
四、工具栏
工具栏是一个用于对当前视图进行操作的栏,上面会提供一些控件,比如分享、评论等。工具栏上面的控件一定是当前使用场景下用户最需要和最常用的控件,尽量避免出现不常用的指令干扰用户。
工具栏是半透明的,一般位于屏幕底部,当使用键盘或者进行某些手势的时候会被隐藏。

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念,誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶,成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴!
優(yōu)網(wǎng)科技成立于2001年,擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用(手機(jī)站、APP開(kāi)發(fā))、微信定制開(kāi)發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。