移动端用户体验:底部导航

  计划师都领略,计划不单是为了悦目。计划也决策用户何如融入一个产物,无论是网站照样app。这是一种交讲。导航便是一种交讲。由于假如用户不明了应用办法,你的网站或app再美丽都没用。

  Steven Hoober正在他的合于搬动筑立应用途境的磋议中发掘,49%的人寄托一根手指完结手机上的操作。不才图中,手机屏幕上的画面透露大致的触摸规模,差异颜色透露用户能用拇指正在屏幕上触及的区域。绿色透露方便触及;黄色透露必要伸长手指;血色透露必要用户更正持握办法。

  把最苛重最常用的操作放正在屏幕底部卓殊苛重,由于它们能用一只手指轻松触及。

  很众利用恪守这一法则,将底部导航(又称作标签栏)举动最苛重的app功用。Facebook的重心功用一触即达,或许正在差异功用中急忙切换。

  导航平日是搭载用户的交通东西。底部导航应当承载苛重性等同的顶级目标地。这些目标地必要正在app的任何地方留有直接的入口。

  底部导航避免应用5个以上,由于点击目的彼此会过于靠近。正在标签栏就寝过众的项目,让人们难以点中他们的目的。每众浮现一个标签,app的杂乱性就扩充一分。

  假如顶级目标地确实有5个以上,不要用底部导航来承载这些入口,请探讨放正在其他位子。

  小屏幕上显而易睹的处置办法,便是个别荫蔽式的导航——不必费心屏幕空间的限制,把标签项放入滚动的标签栏即可。可是滚动的实质效能低下,由于你得滑动一下才华看到思要的选项。

  没有外达今朝位子,或者是app菜单中最普通的过失。“我正在哪里”是用户必要解答的根基题目之一,这是利市操作的条件。

  用户应当正在没有任何外部诱导的境况下,一眼就看出何如从A赶赴B。应当供应符合的视觉线索(图标、标签和颜色),操作就不必要任何证实了。

  正由于底部导航操作以图标办法闪现,它们所外达的实质应当要适合通过图标来外达。有些用户熟知的通用图标,平日这些都透露征采、邮件、打印等功用。不幸的是,“通用”图标很少。app的计划师通常用图标来代外极少卓殊难以分袂的功用。

  老版本的Bloom.fm利用Android版。真是相当难剖释用户今朝所处位子。

  避免正在底部标签栏应用差异颜色的图标和文字标签。该当应用app的主色来透露视觉中央。

  恪守一条轻易的规矩——用app的主色来提亮今朝的底部导航项(席卷图标和文字标签)。

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

  目的区域足够大,才易于点击。将界面宽度按操作项的数目平分,估量每个底部导航操作项的宽度。或者,把全体底部导航项的宽度设为最宽。

  精良的导航应当觉得像一只隐形的手,正在操作途中指援用户。终归,假如用户都无法找到,那最酷的功用和最有吸引人的实质都没用。

  每个底部导航图标都要通向某个目标地。而不行是掀开菜单或其他弹出窗口。点按底部导航图标应当直接通向相应界面,或者更始今朝激活的界面。

  不要用标签栏供应管制项,用来操作今朝界面或app形式中的元素。假如必要供应操作项,请改用东西栏。

  不要由于功用不成用就移除某个标签。假如你正在某些境况下移除一个标签,其他境况确保存,就会让你的app界面觉得不牢靠、难以预思。最佳处置计划是保障全体标签都是可用的,然后评释为什么某个标签没有实质。比方,假如用户没有离线文献,Dropbox里的Offline标签会显示一个界面,教你何如增加。这个功用便是空形态。

  假如界面里是滚动的音讯流,标签栏能够正在滚动查看更众实质时荫蔽,向下滑动考试回顶部时再显示。

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

  可乐橙,微信民众号:可乐橙(colachangreen)。人人都是产物司理专栏作家,UI/UX计划师,合心互联网,合心科技。现居杭州,与小伙伴们正正在创业途中。恐怕不是一名精良的计划师,起码是个夷愉的计划师。

  听到良众舆论说正在中邦步调员是吃芳华饭的,那么产物司理呢,也吃芳华饭吗?

  人人都是产物司理(是以产物司理、运营为重心的研习、换取、分享平台,集媒体、培训、社群为一体,全方位供职产物人和运营人,建设9年举办正在线+期,线+场,产物司理大会、运营大会20+场,笼盖北上广深杭成都等15个都邑,好手业有较高的影响力和著名度。平台咸集了浩繁BAT美团京东滴滴360小米网易等著名互联网公司产物总监和运营总监,他们正在这里与你一齐发展。

更多案例

艾瑞移动资讯APP媒体价值研究报明陞告:

即日,艾瑞接洽公布《众媒渠道下转移资讯APP媒体代价商酌通知》。通知显示,据2016年1月至2017年6月资讯类APP月度笼盖独立配置数据显示,资讯类APP笼盖率...

移动端用户体验:底部导航

计划师都领略,计划不单是为了悦目。计划也决策用户何如融入一个产物,无论是网站照样app。这是一种交讲。导航便是一种交讲。由于假如用户不明了应...

Photoshop教程 手机界面规格 PS淘宝美工 U

举报视频:Photoshop教程 手机界面规格 PS淘宝美工 UI图标打算 PS合成教程 PS调色教程【黄剑锋】 PS淘宝美工 老照片上色 PS合成教程 PS调色教程 Photoshop教程【...

友情链接:

Copyright © 2002-2021 明陞网络设计有限公司 版权所有 | 网站地图