中文字幕一区二区三区在线中文-日本中文字幕 在线观看-欧美日韩国产亚洲综合-性色AV一二三天美传媒

廣州總部電話:020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
廣州總部電話:020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
請輸入搜索關(guān)鍵詞
知識庫 知識庫

優(yōu)網(wǎng)知識庫

探索行業(yè)前沿,共享知識寶庫

如何做好底部導(dǎo)航欄圖標(biāo)設(shè)計?

發(fā)布日期:2025-05-29 11:19:34 瀏覽次數(shù): 925 來源:婉寧交互設(shè)計

一、导航栏的重要性


将导航栏置于底部,很大程度上是基于用户拇指交互的覆盖区域。无论使用左手交互还是右手交互,底部导航栏都处于用户拇指可以自然覆盖的区域。

底部导航栏的图标是路牌,承担着指路的作用,给用户指明进入产品后可以分别通往什么页面。

二、固定布局


底部标签栏的布局是固定的。所有可用选项均显示在栏中。

由于多种原因,不建议使用可滚动的底部栏。

  1. 这不是标准模式,因此用户并不期望滚动底部栏。

  2. 这会让用户感到沮丧,因为他们需要记住是否已经滚动了该栏,或者他们可能会忘记滚动的方向。

三、导航栏尺寸


虽然图标的形状会因为设计的差异而有所不同,但是在图标外观的现实格式和基础尺寸上,应该保持一致。激活状态下的图标尺寸可能会有所增加,配色和轮廓会微调,以达到抓人眼球的目的,但是不应差异太大。

四、底部导航入口的数量


底部导航入口一般在3-5个,最常见的是4-5个。5个按钮通常会让导航的空间比较紧凑局促,用户可能会误触,这样会让体验非常差。

五、视觉和风格的一致性


保持图标在设计上的一致性其实非常重要,这是保证 APP 在设计上,有着最基本的专业性。不一致的设计非常容易被用户注意到,带来的用户体验的隐患是非常之大的。比如图标的样式尽量保持一致,风格保持统一等。

六、底部导航栏模式

底部导航栏有权重平分、强调信息、引导操作这三种模式。

1、权重平分

当产品的功能结构权重比较平均,不希望突出其中某个结构时,一般采用权重平分的模式,即每个底部入口的分量都是平均的。常规产品会采用这样的形式。

2、强调信息

当产品需要强调某些信息引起用户注意或同一个按钮承担两个功能时,设计便可以选择在某个入口添加明显的信息指示或功能。增加功能的底部导航入口不一定是首页,也可以是其它入口。

3、引导操作

当产品希望用户能够进行某个操作,需要进行强操作提醒时,可以选择引导操作的导航栏模式,在中心突出操作按钮。大众点评、百果园、转转、星巴克、闲鱼等都是采用这种模式

優(yōu)網(wǎng)科技,優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商

優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念,誠信務(wù)實的服務(wù)了近萬家客戶,成為眾多世界500強、集團和上市公司的長期合作伙伴!

優(yōu)網(wǎng)科技成立于2001年,擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用(手機站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。


我要投稿

姓名

文章鏈接

提交即表示你已閱讀并同意《個人信息保護聲明》

專屬顧問 專屬顧問
掃碼咨詢您的優(yōu)網(wǎng)專屬顧問!
專屬顧問
馬上咨詢
掃一掃馬上咨詢
掃一掃馬上咨詢

掃一掃馬上咨詢