科技网

当前位置: 首页 >自媒体

app底部导航设计用户体验移动APPUI的底部导航设计

自媒体
来源: 作者: 2019-05-17 14:06:57

1 : 用户体验:移动APP UI的底部导航设计

企业怎样做品牌推行 7夕来了好推有礼!

设计师都知道,设计不只是为了好看。设计也决定用户如何融入1个产品,不管是网站还是app。这是1种交谈。导航菜单就是1种交谈。由于如果用户不明白使用方式,你的网站或app再漂亮都没用。

图片来源:Behance

为何底部导航如此重要?

Steven Hoober在他的关于移动装备使用状态的研究中发现,49%的人依托1根手指完成手机上的操作。在下图中,手机屏幕上的画面表示大致的触摸范围,不同色彩表示用户能用拇指在屏幕上触及的区域。绿色表示轻易触及;黄色表示需要伸长手指;红色表示需要用户改变持握方式。

图片表示单手操作智能手机的舒适程度。图片来源:uxmatters

把最重要最经常使用的操作放在屏幕底部非常重要,由于它们能用1只手指轻松触及。

标签栏

许多利用遵守这1规律,将底部导航(又称作标签栏)作为最重要的app功能。Facebook的核心功能1触即达,能够在不同功能中迅速切换。

Facebook 的 iOS 底部标签栏。

底部导航设计的3个关键

导航通常是搭载用户的交通工具。底部导航应当承载重要性同等的顶级目的地。这些目的地需要在app的任何地方留有直接的入口。

优秀的底部导航设计遵守以下3条定律:

1. 只显示最重要的目的地

在底部导航中使用3到5个顶级目的地。如果少于3个,请斟酌使用标签代替。

底部设计导航避免使用5个以上,由于点击目标相互会过于接近。在标签栏放置过量的项目,让人们难以点中他们的目标。每多展现1个标签,app的复杂性就增加1分。

如果顶级目的地确切有5个以上,不要用底部导航来承载这些入口,请斟酌放在其他位置。

避免内容转动

小屏幕上不言而喻的解决方式,就是部份隐藏式的导航——没必要担心屏幕空间的局限,把标签项放入转动的标签栏便可。但是转动的内容效力低下,由于你得滑动1下才能看到想要的选项。

iOS版 Rookie Cam app中就存在“看不见就想不到”的问题。

2. 表达出当前位置

没有表达当前位置,多是app菜单中最普遍的毛病。“我在哪里?”是用户需要回答的基本问题之1,这是顺利操作的条件。

用户应当在没有任何外部引导的情况下,1眼就看出如何从A前往B。应当提供适当的视觉线索(图标、标签和色彩),操作就不需要任何说明了。

图标

正由于底部导航操作以图标方式展现,它们所表达的内容应当要合适通过图标来表达。有些用户熟知的通用图标,通常这些都表示搜索、邮件、打印等功能。不幸的是,“通用”图标很少。app的设计师常经常使用图标来代表1些非常难以分辨的功能。

老版本的Bloom.fm利用Android版。真是相当难理解用户当前所处位置。

我在这篇文章《图标是优秀用户体验的1部份》中强调了这个问题。

色彩

避免在底部标签栏使用不同色彩的图标和文字标签。应当使用app的主色来表示视觉焦点。

左图:不同色彩的图标让app看起来像是圣诞树。右图:应当只用主色。

遵守1条简单的法则——用app的主色来提亮当前的底部导航项(包括图标和文字标签)。

iOS版Twitter的底部菜单栏。Messages是当前选中项。

如果底部导航栏有背风景,就要用黑白的图标和文字标签。

左图:避免使用彩色图标和彩色背景的组合。右图:使用黑白图形。

文字标签

文字标签要为导航图标提供简短成心义的描写。不要用太长的标签,由于它们不能截断或换行。

避免换行、截断和缩小文字标签。

菜单元素要易于阅读。用户要能理解他点击某个元素时会产生甚么。

点击尺寸

目标区域足够大,才易于点击。将界面宽度按操作项的数量等分,计算每一个底部导航操作项的宽度。或,把所有底部导航项的宽度设为最宽。

Android规范建议依照下图的尺寸设计移动真个底部导航栏。

移动真个固定导航栏。单位是逻辑像素(dp)。来源:Material Design。

标签栏的小红点

可以在标签栏显示小红点,表示有相干的新信息。

可以用低调的方式给标签栏图标加上小红点。

3. 让导航不言自明

优秀的导航应当感觉像1只隐形的手,在操作途中指援用户。毕竟,如果用户都没法找到,那最酷的功能和最有吸引人的内容都没用。

表现

每一个底部导航图标都要通向某个目的地。而不能是打开菜单或其他弹出窗口。点按底部导航图标应当直接通向相应界面,或刷新当前激活的界面。

不要用标签栏提供控制项,用来操作当前界面或app模式中的元素。如果需要提供操作项,请改用工具栏。

iOS的工具栏

保持统1

尽量在每种情况下都显示标签栏。这样能给用户1种视觉上可靠的感觉。

不要由于功能不可用就移除某个标签。如果你在某些情况下移除1个标签,其他情况确保存,就会让你的app界面感觉不可靠、难以预感。最好解决方案是保证所有标签都是可用的,然后解释为何某个标签没有内容。例如,如果用户没有离线文件,Dropbox里的Offline标签会显示1个界面,教你如何添加。这个功能就是空状态。

Dropbox利用的空状态界面。

隐藏标签栏

如果界面里是转动的信息流,标签栏可以在转动查看更多内容时隐藏,向下滑动尝试回顶部时再显示。

底部导航栏可以根据转动,动态显示和隐藏。

视觉愉悦

避免使用横向滑动的动效来切换界面。激活和未激活的界面,切换过渡效果应当使用叠加渐隐效果。

叠加渐隐动画。来源:Material Design

总结

底部导航应当:

可见且结构公道(使用3到5个顶级目的地,并且避免可转动内容)

清晰(导航栏元素要易于阅读,点击区域要足够大,方便操作)

简单(保证每一个导航图标都通向适合的目的地,而且通过底部导航要能够触达所有元素)

原文链接:https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f#.3z87f9p1s

翻译:colachan

作者:Nick Babich

2 : 浅谈主导航、次导航和底部导航的优化设置方法

导航是网站的指南针,是用户快速寻觅所需信息的快捷入口。1个网站中能否留住用户,首先看导航的设置是不是符适用户阅读习惯及是不是足够的清晰,让用户1目了然的了解全网站相干内容。固然在网站优化中,导航一样占据着不可忽视的作用。1个导航是不是利于蜘蛛爬行则影响着网站内页是不是被收录,所以,网站导航的设置在优化中的重要性可想而知了。而且1个网站中分别存在3个导航,怎样去设置这些导航才利于SEO优化呢?今天笔者来谈谈自己的经验心得。

1、主导航(菜单栏)

首先主导航其实就是我们常说的菜单栏,这个导航条在网站中占据的位置是整站除网站标题以后最重要的,它既要提供给搜索引挚网站有哪些内容,同时也要让用户知道网站做的内容有哪些。对主导航我们需要从两方面来对其分析看看如何做优化设置:1从搜索引挚方面,主导航必须是纯文字形的,而且不能带任何的修改代码,特别是以图片、FLASH、JS代码、框架代码作导航的是要不得的,同时主导航中的相干栏目都应当前后具有相干性,千万不要前面的是减肥的,后面是丰胸的,不相干的导航栏目其实不能提升关键词排名。2从用户阅读的方面分析。首先我们需要弄清楚用户需要甚么的样导航,导航显现的情势如何,色彩的搭配是不是公道,是不是刺眼等。我们以A5的导航为例了,如图:

从图中我们可以看到两个小细节对用户阅读是非常有影响的,其1就是鼠标点击后的色彩变化,这个可让用户知道自己现在访问是甚么栏目,其2小3角的提示,这个对色彩比较浅的导航辨别时,更有影响力。笔者认为1个导航必须可以告知用户自己所阅读的栏目是甚么,同时在分不清次导航的情况下对自己所处的位置也有个了解。不管怎样说,主导航是网站的主体,同时也是能否让用户停留在网站中的关键所在。所以好好设置主导航是网站优化中必须做好的第1步。

2、次导航(面包屑导航)

次导航1般位于网站内页以后,如分类页、内容页等,都是在内容的上方。固然这其实不局限于这个地方,根据用户的阅读习惯,1般放到分类内容上方和内容页的内容上方比较适合。对次导航我们应当如何来做优化设置呢?首先我们还是以A5的为例了,如图:

分类页的次导航

内容页的次导航

分类页上面的次导航相对来讲优化设置比较容易,只要把分类栏目跟首页连在1起就好了,而且分类页的次导航1般都是由1而终的,就是不管你翻多少页,次导航的内容都1样的。那对内容页的次导航我们应当如何做呢?其1次导航最后1层不要设置回链,毕竟这是最底1层了,设置回链对优化不利,有为优化而内链的嫌疑。其2次导航前面两层都应当设置超链接指向相应的页面,这样方便用户通过次导航就能够返回上1层。其3次导航不得加H标签,1些站长喜欢在这里加上H标签来聚集网站权重,实际上是弊大于利。笔者认为标准的次导航设置方法应当是首页(超链接回首页)》》》分类页(超链接回相应的分类页)》》》内容页的内容标题(不要设置任何的链接)这样的情势才利于SEO优化。

3、底部导航

1般程序都不会自带底部导航的,大部份具有底部导航的缘由是站长为了增加关键词密度及提示用户可以通过底部导航返回相应的栏目而设置的,固然设置了底部导航其实不是说对SEO优化不利,只要设置正确了,其效果还是有的。那末我们应当如何做优化设置呢?以A5的为例,如图:

就如A5的底部导航的设置方法,在底部导航中,如果不是为了SEO优化而设置的,那末首先要在链接中加上NOFOLLOW标签,告知搜索引挚不要爬行这些链接,由于我们是为了方便用户而设置的。如果为了优化而设置的那就不要加NOFOLLOW标签了。1般底部导航应当放1些自已认为有必要的栏目关键词,如联系我们、免责声明、版权所有之类的就不要设置了,放这些到底部导航既浪费地方,而且对用户和SEO优化都没有任何的帮助,尽可能的把自己认为重要的,需要重复提示的内容放到底部导航,既可以告知搜索引挚哪些是重点,同时也让用户可以在阅读到页脚时快速的返回到相应的页面。对底部导航的优化设置,首先需要1定量的数据分析,由于这个用得好对SEO帮助非常有用。然后根据网站的特点来设置,尽量的把底部导航用在1些需要重要提示的地方。

1个导航的优化设置是不是处理得好,不但影响着SEO优化的效果是不是最大化,同时对用户体验而言也是非常重要的,所以说,把网站的所有导航都设置好,并做好优化处理,在搜索引挚和用户方面都可以取得很多的印象分。好了此篇就讲到这里,本文由独家供稿,转载请注明,谢谢!

SEO专题推荐:

关键词优化专题:网站关键词优化没效果?来这里学习最实用的关键词优化技能!

内链优化专题:最能提升网站权重的内链部署优化技能与方法

外链建设专题:高质量自然外链怎样做?读完这些你将质的奔腾

网站降权专题:2015年最有用的网站降权、被K、被黑、被攻击的解决方法

用户体验专题:学习完这些,作为站长的你可以秒懂如何做网站用户体验

行业网站专题:优化行业网站的“葵花宝典”看完后无优化压力

3 : 浅谈主导航、次导航和底部导航的优化设置方法

导航是网站的指南针,是用户快速寻觅所需信息的快捷入口。1个网站中能否留住用户,首先看导航的设置是不是符适用户阅读习惯及是不是足够的清晰,让用户1目了然的了解全网站相干内容。固然在网站优化中,导航一样占据着不可忽视的作用。1个导航是不是利于蜘蛛爬行则影响着网站内页是不是被收录,所以,网站导航的设置在优化中的重要性可想而知了。而且1个网站中分别存在3个导航,怎样去设置这些导航才利于SEO优化呢?今天笔者来谈谈自己的经验心得。

1、主导航(菜单栏)

首先主导航其实就是我们常说的菜单栏,这个导航条在网站中占据的位置是整站除网站标题以后最重要的,它既要提供给搜索引挚网站有哪些内容,同时也要让用户知道网站做的内容有哪些。对主导航我们需要从两方面来对其分析看看如何做优化设置:1从搜索引挚方面,主导航必须是纯文字形的,而且不能带任何的修改代码,特别是以图片、FLASH、JS代码、框架代码作导航的是要不得的,同时主导航中的相干栏目都应当前后具有相干性,千万不要前面的是减肥的,后面是丰胸的,不相干的导航栏目其实不能提升关键词排名。2从用户阅读的方面分析。首先我们需要弄清楚用户需要甚么的样导航,导航显现的情势如何,色彩的搭配是不是公道,是不是刺眼等。我们以A5的导航为例了,如图:

从图中我们可以看到两个小细节对用户阅读是非常有影响的,其1就是鼠标点击后的色彩变化,这个可让用户知道自己现在访问是甚么栏目,其2小3角的提示,这个对色彩比较浅的导航辨别时,更有影响力。笔者认为1个导航必须可以告知用户自己所阅读的栏目是甚么,同时在分不清次导航的情况下对自己所处的位置也有个了解。不管怎样说,主导航是网站的主体,同时也是能否让用户停留在网站中的关键所在。所以好好设置主导航是网站优化中必须做好的第1步。

2、次导航(面包屑导航)

次导航1般位于网站内页以后,如分类页、内容页等,都是在内容的上方。固然这其实不局限于这个地方,根据用户的阅读习惯,1般放到分类内容上方和内容页的内容上方比较适合。对次导航我们应当如何来做优化设置呢?首先我们还是以A5的为例了,如图:

分类页的次导航

内容页的次导航

分类页上面的次导航相对来讲优化设置比较容易,只要把分类栏目跟首页连在1起就好了,而且分类页的次导航1般都是由1而终的,就是不管你翻多少页,次导航的内容都1样的。那对内容页的次导航我们应当如何做呢?其1次导航最后1层不要设置回链,毕竟这是最底1层了,设置回链对优化不利,有为优化而内链的嫌疑。其2次导航前面两层都应当设置超链接指向相应的页面,这样方便用户通过次导航就能够返回上1层。其3次导航不得加H标签,1些站长喜欢在这里加上H标签来聚集网站权重,实际上是弊大于利。笔者认为标准的次导航设置方法应当是首页(超链接回首页)》》》分类页(超链接回相应的分类页)》》》内容页的内容标题(不要设置任何的链接)这样的情势才利于SEO优化。

3、底部导航

1般程序都不会自带底部导航的,大部份具有底部导航的缘由是站长为了增加关键词密度及提示用户可以通过底部导航返回相应的栏目而设置的,固然设置了底部导航其实不是说对SEO优化不利,只要设置正确了,其效果还是有的。那末我们应当如何做优化设置呢?以A5的为例,如图:

就如A5的底部导航的设置方法,在底部导航中,如果不是为了SEO优化而设置的,那末首先要在链接中加上NOFOLLOW标签,告知搜索引挚不要爬行这些链接,由于我们是为了方便用户而设置的。如果为了优化而设置的那就不要加NOFOLLOW标签了。1般底部导航应当放1些自已认为有必要的栏目关键词,如联系我们、免责声明、版权所有之类的就不要设置了,放这些到底部导航既浪费地方,而且对用户和SEO优化都没有任何的帮助,尽可能的把自己认为重要的,需要重复提示的内容放到底部导航,既可以告知搜索引挚哪些是重点,同时也让用户可以在阅读到页脚时快速的返回到相应的页面。对底部导航的优化设置,首先需要1定量的数据分析,由于这个用得好对SEO帮助非常有用。然后根据网站的特点来设置,尽量的把底部导航用在1些需要重要提示的地方。

1个导航的优化设置是不是处理得好,不但影响着SEO优化的效果是不是最大化,同时对用户体验而言也是非常重要的,所以说,把网站的所有导航都设置好,并做好优化处理,在搜索引挚和用户方面都可以取得很多的印象分。好了此篇就讲到这里,本文由http://www.huishou518.com 独家供稿,转载请注明,谢谢!

4 : 谷歌更新安卓利用设计规范 加入底部导航更像iOS

网易科技讯 3月16日消息,据科技网站Verge报导,谷歌昨日更新了安卓利用设计指点规范,告知开发者在某些情况下,应在利用底部加入导航条。评论称这使得安卓利用进1步贴近苹果iOS利用的设计风格。

谷歌将这类设计称为“底部导航条”。与iOS不同的是,谷歌的导航条可以在用户转动翻页时隐藏,为屏幕留出更大空间。导航条上的按键在选中时也会略微变大;若导航条上有数个按键,被高亮的那个还会略微挤开其他的按键。

之前谷歌1直依托“汉堡包”按钮在程序内导航阅读,即利用上部可呼出按钮的3行菜单设计。虽然这类设计让安卓利用具有了独特的外观(和更多的屏幕空间),但这也意味着用户在利用内导航时,需要多操作1步。切换到底部导航条,可以更方便用户操作。

新设计其实不意味着“汉堡包”菜单就此消失。谷歌表示,底部导航条只应当在利用提供3到5个核心功能区域时使用。如果只有两个区域,开发者应使用Tab标签;如果有6个或更多区域,应当继续使用“汉堡包”。不过1般利用多包括3到6个功能区。

谷歌已在自家利用上加入了这类设计,几个月前升级的Google+便是如此。两周前更新的Google Photos也加入了带有3个按钮的底部导航。(维尼)

北京治疗牛皮癣那家医院好吉林中医医院好不好汕尾那家医院治疗白癜风实力强

相关推荐