APP导航栏设计分析：5种设计样式+4种交互状态
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">编辑导语：App的导航栏是页面设计中不可缺少的部分，看似相同，但其实在设计上都有着<span style="color: black;">有些</span>差异。本文作者从刚设计样式、设计风格、交互状态等多个发面出发，对导航栏进行了系统的分析。<span style="color: black;">一块</span>来<span style="color: black;">瞧瞧</span>。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPKjAG5v5MO8~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=PsMqICDUSVdyuIL75w4vJtiZB5o%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">APP导航栏(AppBar)<span style="color: black;">大众</span>应该都很<span style="color: black;">熟练</span>，<span style="color: black;">位置于</span>屏幕顶部，集合了用户经常<span style="color: black;">运用</span>的<span style="color: black;">有些</span>功能，是页面设计中<strong style="color: blue;">不可缺少</strong>的组成部分。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">虽然导航栏很<span style="color: black;">平常</span>，<span style="color: black;">然则</span><span style="color: black;">咱们</span>在<span style="color: black;">运用</span><span style="color: black;">制品</span>的过程中会<span style="color: black;">发掘</span>，<span style="color: black;">每一个</span>APP的导航栏或多或少都存在<span style="color: black;">有些</span>设计上的<strong style="color: blue;">差异</strong>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为了能让<span style="color: black;">大众</span>对导航栏有更清晰且全面的认识，这篇<span style="color: black;">文案</span>将导航栏的<strong style="color: blue;">设计样式、设计风格、交互状态</strong>等多方面的内容综合在<span style="color: black;">一块</span>进行分析，<span style="color: black;">一块</span>来<span style="color: black;">瞧瞧</span>吧~</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>导航栏的<span style="color: black;">形成</span></h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">全部</span>导航栏<span style="color: black;">一般</span>分为左、中、右三部分，左侧和右侧<span style="color: black;">重点</span>用来<span style="color: black;">安置</span>功能控件，中间部分<span style="color: black;">重点</span>用来<span style="color: black;">安置</span>文字标题，接下里展开分析左中右三部分的<span style="color: black;">形成</span>。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPKjf6B02TyJ~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=c%2F0AXlWf76KOiTcCLuc8H90LMcs%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. 左侧导航</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">安置</span>在APP顶部导航栏左侧的控件<span style="color: black;">非常多</span>都跟动作<span style="color: black;">关联</span>，例如执行返回动作、关闭动作<span style="color: black;">或</span>点击汉堡菜单进行展开动作等。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPKkB1KZpZUD~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=AWPXF1KBfUpkeypwyNrQtk%2B9Kj0%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">除了在左侧<span style="color: black;">安置</span><span style="color: black;">暗示</span>动作的控件，还<span style="color: black;">能够</span>在<span style="color: black;">安置</span>头像框、<span style="color: black;">信息</span>提示等优先级较高的内容，用来引起用户的<span style="color: black;">重视</span>。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPKlJ4cwbnUZ~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=S%2FBM7yGh1uq32M7GtY6ZN2rzTws%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在网页端的顶部导航栏中，左侧都会<span style="color: black;">安置</span>品牌logo，<span style="color: black;">由于</span>网页端顶部的空间更大，<span style="color: black;">因此</span>还<span style="color: black;">能够</span>在LOGO<span style="color: black;">周边</span>结合徽标、搜索框、下拉菜单等空间。</p><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPKlo56rpthc~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=l3U%2B5L2sjg2z1pGJ1%2Bk0C0EkYnc%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 中间部分</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">APP顶部导航栏的中间部分<span style="color: black;">重点</span>用于<span style="color: black;">安置</span>标题，当然<span style="color: black;">按照</span><span style="color: black;">运用</span>场景的<span style="color: black;">区别</span>，还<span style="color: black;">能够</span><span style="color: black;">安置</span>头像、搜索框、下拉框、导航等控件。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">（1) 标题</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最<span style="color: black;">平常</span>的是在中间<span style="color: black;">运用</span>加粗的文字<span style="color: black;">做为</span>标题，<span style="color: black;">亦</span><span style="color: black;">能够</span><span style="color: black;">运用</span>主标题+副标题的形式来展示<span style="color: black;">更加多</span>的信息。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPLXofJluzZ~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=DzGpoAAk87sbHoYIMj4XVoFKrJg%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">还<span style="color: black;">能够</span>把标题区域做成支持下拉的样式，扩展<span style="color: black;">更加多</span>的功能全。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPLYV5eNyt8K~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=N5aMAMpSvjv%2BnzSYsE9AFimWYQw%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">（2) 用户头像</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在社交类<span style="color: black;">制品</span>或对话框中，会在中间部分<span style="color: black;">安置</span>用户的头像和信息，用来展示用户的<span style="color: black;">仔细</span>信息。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPLZ3Vkj0u0~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=W8FtjF1NBq6pLUNDDcE%2FWYJy3GU%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">（3) <span style="color: black;">制品</span>Logo</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有些<span style="color: black;">制品</span>还会将Logo放在导航栏的中心位置用来展示品牌形象，在APP的首页<span style="color: black;">能够</span><span style="color: black;">思虑</span><span style="color: black;">这般</span>设计，起到强调<span style="color: black;">功效</span>。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPLZgC4IFQg3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=wevqz%2BK6r4tVqoZ4rYRtbBn1m8c%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">（4) 分段控件</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在移动端<span style="color: black;">制品</span>中，还<span style="color: black;">能够</span>在中间部分<span style="color: black;">安置</span>分段控件，<span style="color: black;">一般</span>2-3个标签，在<span style="color: black;">初期</span>的网易云音乐APP中就用到了<span style="color: black;">这般</span>的设计，<span style="color: black;">经过</span>点击标签<span style="color: black;">或</span><span style="color: black;">上下</span>滑动页面完成内容切换。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPLahGNfdLee~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=pTxAwiKlx%2Fvz1YWntgdE%2BtAEo8w%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">（5) 搜索框</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">导航栏中间经常能看到搜索框，<span style="color: black;">而后</span>搜索框<span style="color: black;">上下</span>两边<span style="color: black;">安置</span>其他的控件。当导航栏的内容太多，<span style="color: black;">例如</span>有文字标题、头像、按钮等控件，搜索栏和这些控件可能<span style="color: black;">没法</span>并排<span style="color: black;">安置</span>时，<span style="color: black;">能够</span>将搜索栏横向拉长，放在下一行单独展示。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">此刻</span>淘宝APP首页的导航栏就做<span style="color: black;">成为了</span>两行，上一行用来<span style="color: black;">安置</span>文字标题和功能图标，搜素栏集合扫码、拍照等功能单独<span style="color: black;">做为</span>一行。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPM9x5HkLiSo~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=ypmSzIbp8OvM%2FDgSXaPVfg%2BdEBE%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">（6) 导航选项</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在网页中，标签、按钮、面包屑导航等<span style="color: black;">平常</span>的导航组件，<span style="color: black;">一般</span>会固定在网页导航的中心位置。当页面缩小到移动端时，<span style="color: black;">思虑</span>到移动端尺寸较小，<span style="color: black;">倘若</span>顶部导航内容太多，<span style="color: black;">能够</span>尝试把功能组件放到第二层级。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPMAcJ2x1oSE~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=CELGt9%2FbsM2WsZeXDtoNmR%2BFIyg%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. 右侧导航</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">相<span style="color: black;">针对</span>左侧和中间，APP导航栏的右侧部分更加灵活，<span style="color: black;">无</span>固定的<span style="color: black;">需求</span>说<span style="color: black;">必要</span>放<span style="color: black;">那些</span>内容，<span style="color: black;">按照</span>需求<span style="color: black;">安置</span><span style="color: black;">各样</span>类型的功能控件。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">（1) 头像</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>想调用与用户属性相关的功能，就<span style="color: black;">能够</span>将头像放在导航栏的右侧区域，点击弹出<span style="color: black;">关联</span>的选项。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPMD1GG5D9VQ~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=mXTszYArxnPWwnQVfb6aGYBsOII%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">（2) 图标</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在右侧区域<span style="color: black;">安置</span>功能图标是最<span style="color: black;">平常</span>的设计，把用户最常<span style="color: black;">运用</span>的功能，例如<span style="color: black;">信息</span>图标、搜索图标，都<span style="color: black;">能够</span>集中到导航栏的右侧区域。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPMDq66xSfcI~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=JUc1sfuT2dPOMjNeKylXS7mg1vU%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>右侧<span style="color: black;">必须</span>展示的图标太多，<span style="color: black;">能够</span>把这些图标聚合在<span style="color: black;">一块</span>，处理成类似<span style="color: black;">微X</span>首页右上角的设计，点击之后<span style="color: black;">显现</span><span style="color: black;">更加多</span>功能。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPMES6ql0TJa~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=3vc0Al9IApuTw0KN%2F%2FbixTt%2FgZ0%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">（3) 按钮</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">按钮<span style="color: black;">亦</span><span style="color: black;">能够</span>放在右侧区域来引导用户操作。当<span style="color: black;">显现</span>多个按钮时，要<span style="color: black;">运用</span>样式和颜色来灵活区分按钮的主次关系。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">按钮的形状<span style="color: black;">包含</span>圆形、方形、圆角矩形等，按钮样式<span style="color: black;">包含</span>颜色填充、描边、图标和文字结合等多种风格，<span style="color: black;">经过</span>灵活的设计抓住用户的<span style="color: black;">重视</span>力。</p><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPNIADrD2Lza~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=kuLK2MQMsF3dQk%2FSLF%2B6EeooJFw%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">（4) 搜索框</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在网页端中会看到搜索框放在右侧的设计，将搜索框<span style="color: black;">做为</span>单独的控件<span style="color: black;">或</span>和其他控件组合<span style="color: black;">运用</span>放在右侧，方便用户快速<span style="color: black;">拜访</span>。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPNJG3pJH0EU~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=BxyLAKuIi1gCCpMS6knK3OOJ65U%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">（5) 下拉菜单</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在Pad端和网页端中，<span style="color: black;">能够</span><span style="color: black;">运用</span>嵌套在应用栏右侧的下拉菜单进行切换帐户、语言等操作。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPNK262sdrJb~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=RJnejW%2BhP%2BppMIh99xnUJdxG7Cg%3D" style="width: 50%; margin-bottom: 20px;">
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>导航栏的5种设计风格</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">顶部导航栏设计风格<span style="color: black;">必须</span>与与<span style="color: black;">全部</span><span style="color: black;">制品</span>的UI相匹配，<span style="color: black;">平常</span>的导航栏设计样式有</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">扁平风格、<span style="color: black;">暗影</span>悬浮效果、颜色填充效果、<span style="color: black;">运用</span>半透明导航等。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPNKf9zvrUTX~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=4HvIw1tmLLAl0abBX7TWxLybiN4%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. 扁平风格</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">顶部导航区域完全融入到背景中，和<span style="color: black;">全部</span>页面融为一个整体，页面看起来比较简约。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPNLEZupYWT~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=DirZ3qQeGFjFct1MTQmyuoNlV0Y%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. <span style="color: black;">暗影</span>悬浮风格</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>在导航栏下方<span style="color: black;">增多</span>一层<span style="color: black;">暗影</span>效果，让导航栏有悬浮在页面上的感觉，<span style="color: black;">同期</span>便于和页面其他内容作区分。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPO2R20uzP1z~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=7xBnDyBJ1m1m8Hmxfvlqa4G3AqM%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. 颜色填充风格</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">将导航栏背景进行色彩填充，不透明度降低到8-12%，<span style="color: black;">运用</span><span style="color: black;">有些</span>简约而高级的色彩来<span style="color: black;">增多</span>页面的丰富度，<span style="color: black;">表现</span>品牌特点。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPO3F1Lxr9Wn~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=eSaFIViIb%2BAGDAaLWD%2Fwgj1c388%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4. 深色风格</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">APP页面的背景大多都是浅色，这个时候<span style="color: black;">倘若</span><span style="color: black;">运用</span>深色的导航，能够产生很<span style="color: black;">剧烈</span>的对比效果，用来<span style="color: black;">明显</span>导航中的内容。<span style="color: black;">例如</span><span style="color: black;">初期</span>的<span style="color: black;">微X</span>APP页面，顶部<span style="color: black;">便是</span>采用深色的导航，和浅色的页面作对比。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPO3rFcMovSF~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=NGUlqKCxIQn81dynTPs8V6QzaL0%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">5. 透明风格</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">照片</span>详情页的UI设计中常用到透明的导航风格，既能避免导航栏将<span style="color: black;">照片</span>内容遮挡，还能<span style="color: black;">明显</span>页面的高级感。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPO4mCPfIui4~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=CWEc831lpESJxFutuXyiP%2Bs2lzQ%3D" style="width: 50%; margin-bottom: 20px;">
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span>导航栏交互状态分析</h1>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. 选中状态</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当用户与导航栏交互时，导航栏上的控件要能够动态切换来为用户<span style="color: black;">供给</span>即时反馈，<span style="color: black;">例如</span>当选中页面中的内容时，导航栏要出对应的操作提示，<span style="color: black;">是不是</span>删除、分享等。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPO5rHbfdgmI~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=kbiz8qjbcJ0ZVuLmkNxalmVNKhA%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 滚动状态</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当页面上下滚动时，<span style="color: black;">本来</span>扁平的APP导航栏<span style="color: black;">显现</span><span style="color: black;">暗影</span>悬浮的升<span style="color: black;">有效</span>果，状态的改变会让操作看起来更自然。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPOkRIQPsYxA~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=8MAFH0I54yK865R8QH4Vs2e0f2A%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. 背景模糊</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当页面滚动时，顶部导航<span style="color: black;">显现</span>毛玻璃的模糊效果，这是<span style="color: black;">此刻</span>很流行的视觉效果，会让整体的用户体验更流程。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPOlA5LgPbqT~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=MaEGddY8AVNC%2BTHQbxqV8UTpWKM%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4. 尺寸<span style="color: black;">调节</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当页面尺寸变小时，要<span style="color: black;">思虑</span>将多余的导航选项折叠并<span style="color: black;">隐匿</span>在“<span style="color: black;">更加多</span>”图标里面，<span style="color: black;">这般</span>才会让设计更<span style="color: black;">恰当</span>。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T2ZPOlg36gx5V2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644293&x-signature=9PmdxDbiAa4OxGd40308iinNUIY%3D" style="width: 50%; margin-bottom: 20px;">
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">4、</span>最后</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以上<span style="color: black;">便是</span><strong style="color: blue;">导航栏(App Bar)设计</strong>中能用到的知识点和设计细节，<span style="color: black;">期盼</span><span style="color: black;">经过</span>这些内容能<span style="color: black;">帮忙</span>你对导航栏有<span style="color: black;">更加多</span>的设计想法和思考。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">#专栏作家#</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">作者：Clippp，<span style="color: black;">微X</span>公众号：Clip设计夹。每周精选设计<span style="color: black;">文案</span>，专注分享关于<span style="color: black;">制品</span>、交互、UI视觉上的设计思考。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文原创发布于人人都是<span style="color: black;">制品</span>经理，未经作者许可，禁止转载。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">题图来自Unsplash，基于CC0协议。</p>
同意、说得对、没错、我也是这么想的等。 论坛是一个舞台，让我们在这里尽情的释放自己。 感谢您的精彩评论，为我带来了新的思考角度。
页:
[1]