App之底部导航栏的设计

   <p style="text-align:center"><img src="https://simg.open-open.com/show/097d3ce839f45ef369b31325c192559d.jpg"></p>    <p>笔者按：这是系列文章“App之xxx”的第二篇，第一篇我总结了 <a href="http://www.open-open.com/lib/view/open1464313717686.html">App之“文字”的设计技巧</a> 。今天来总结下app的底部导航栏的设计。 我为什么写这个系列的文章。因为我正在做一款app，我在团队中主抓产品设计、UX/UI设计、部分前端开发，少量运营。在工作之余，我决定把所研究的内容写成关于app之xxx的系列文章，文章选择的题材会往“小而精”这个方向努力，范围在我的工作内容中选取。</p>    <p><img src="https://simg.open-open.com/show/57bd244de636c7ed21e7cbf0fc3ee663.gif"></p>    <p>先来看看app常用的导航模式有哪些： <strong>列表式、网格式、标签导航、抽屉式导航</strong> 等。</p>    <p>简单对比下优缺点：</p>    <ul>     <li> <p>列表式结构清晰明了，大部分应用于二级或三级页面，最常见于"我的--设置"选项里，缺点是占的篇幅比较大，样式比较单调。如领英的设置页面</p> </li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/20caeb50ab6d863fce24cdae9a389bb5.png"></p>    <ul>     <li> <p>网格式与列表式类似，但排布更紧凑，显示也更直观，可在一页容纳更多选项，常见于一级页面，电商类app一级页面用的比较多，如淘宝的首页</p> </li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/bbe4937c72d03cf06dba090cf6472fcd.png"></p>    <ul>     <li> <p>标签式有顶部、底部两大类，底部应用的最广泛，因为底部比较方便大拇指点击。比如上文2个例子。</p> </li>     <li> <p>抽屉式是把所有功能都收到一个按钮里，这样界面就非常干净了，同时给功能操作带来了隐蔽性，例子就不举啦，安卓机的app很多这类的。。</p> </li>    </ul>    <p>那么，有没有一种方式应用在一级页面，可以集合这些优点：</p>    <ul>     <li> <p>列表式的结构清晰明了，</p> </li>     <li> <p>网格式的紧凑、直观，</p> </li>     <li> <p>标签式底部导航的便利拇指操作，</p> </li>     <li> <p>抽屉式容纳更多选项，简洁界面。</p> </li>    </ul>    <p>我们一步步推理下</p>    <p>1、由于需要便于拇指操作，这决定了我们只能在标签式导航中的底部导航栏来进行改造。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/aa017c6886188aa2579c41695f03e0b2.png"></p>    <p>2、底部导航栏的功能按钮排布。这里把抽屉式的汉堡包按钮，变成了“更多",我们可以把一些不常用的功能全部收纳到这里。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c349d9c39701cac3f6c25537b3bf91f6.png"></p>    <p>3、然后其中居中的一个按钮可以展开更多的选项，把底部导航栏变成网格式或者列表式的导航模式。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c386c158a298355c1c73e0eb70815943.png"></p>    <p>展开为列表式</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c82816ed68485f3d661d4a26deef185e.png"></p>    <p>展开为网格式</p>    <p>这样改善后，底部导航栏是不是变得特别强大了？</p>    <p>下面再看看底部导航栏的一些主流设计方式里的案例：</p>    <p>目前有3种典型的模式，分别是</p>    <ul>     <li> <p>模式1：首页＋我的；</p> </li>     <li> <p>模式2：首页＋更多；</p> </li>     <li> <p>模式3：中间功能项突出。</p> </li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/72c3a753c07be94c5d8a7d4aac62ecb6.png"></p>    <p>“我的”模式是最常见的，满足了用户在各个功能之间的频繁切换。各个功能项是同等重要的。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c59dc92a169569e0824b509fc4762e80.png"></p>    <p>“更多”模式是突出其他几项功能，把次要功能全部收入更多里。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9488c1b2e0e5d880a37f3317d2944ac1.png"></p>    <p>“中间功能项突出”模式，主次分明，把最频繁使用的功能置于中间，也有的中间功能键起到收纳作用，点击是开启更多选项。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7111a2f3320484c92444bb65d019f5b7.png"></p>    <p>开启中间功能键的例子：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2f4df201aae9245ba838c1aac08bdbed.png"></p>    <p>闲鱼，拓展了标签数量</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/581ada33ffd49776e627de04acca53bf.png"></p>    <p>全民K歌，直接是新起一页，有网格式和列表式</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0e025bf447e047a92ca31b91d547417b.png"></p>    <p>喜马拉雅FM，也是新起一页，列表式</p>    <p>当然，案例只是参考， 具体问题还是需要具体分析的，没有哪个模式是万能的，只有适合的才是最好的。</p>    <p>下面继续总结一些小细节：</p>    <ul>     <li> <p>一般功能项会设置4至5个。因为手机屏幕容量有限。</p> </li>     <li> <p>功能项大部分以图标+文字的形式表达。文字是为了更准确的表达意思，这个在第一篇 <a href="/misc/goto?guid=4959673827042198771" rel="nofollow,noindex">App之“文字”的设计技巧</a> 探讨过原因。</p> </li>     <li> <p>主页的图标，采用“小房子”或logo。</p> </li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4d1d12f7740866453025f3977e7a2a6e.png"></p>    <ul>     <li> <p>“发现”功能项是电商、娱乐影音类app用的比较多的功能。</p> </li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/20220ea9b94c6a2c35a90110c0949053.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2d50167fc926ca0cd821c954ee02f459.png"></p>    <ul>     <li> <p>“消息”是社交类app的标配。</p> </li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3f792671a3a053d5688a2a6e279f86a6.png"></p>    <p>角标提醒，用小红点或者带数字的小红点。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/13f1236f98bf3edf617e856dfcfeb3de.png"></p>    <p>地图类app应用较少采用常规的底部导航栏，没有固定范式，底部导航栏的具体样式根据业务来设计。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/44478231380984b9f379aacfa7492d0b.png"></p>    <p>最后，用张动图总结本文内容。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7cc84e4f65649fd9f381a1ef50e82eb4.gif"></p>    <p> </p>    <p>来自： <a href="/misc/goto?guid=4959673827128398667" rel="nofollow">http://www.cocoachina.com/design/20160527/16481.html</a></p>    <p> </p>