Hi,我是优设小编

cyRotel

浏览全部 4601 篇文章

到我的微博瞧瞧

超实用干货!聊聊底部导航设计的四个关键原则

bottom-navigation-design-principle-1

@惜可若己 :设计师都知道设计绝不仅仅是做出外表好看的东西,设计还涉及到如何做才能让用户使用你的网站/应用程序。这项工作内容就像跟用户间对话一样,而导航就是对话内容之一。因为如果用户连他们究竟在哪儿都搞不清楚,那你的网站/应用程序设计得再棒又有什么用呢?来看这篇好文,帮你做出合格的底部导航设计!

如果你连基础都没打好,建议最好学习一下:《交互基础知识科普!带你认识最热门的12种导航模式》
如果想看深入的好文,可右戳直达:《交互设计实战!Tab导航与侧边抽屉导航的巅峰对决》

一、为何底部导航如此重要

Steven Hoover 在他的「用户究竟如何使用移动设备」的研究中发现,49%的人习惯于使用单个拇指来完成所有操作。在下图中,屏幕中不同颜色的区域表明用户拇指能够触及的难度等级,其中,绿色区域表示很容易触及的范围,黄色则表示拇指要伸展开来才能够到,而要触达红色区域则要求用户改变设备的手持方式。

dbdh20160812-1

△ 用户单手操作智能手机的区域图

这样看来,将顶级(经常使用的)功能放在屏幕的底部是非常重要的,因为这里是用户使用拇指能轻松跟设备产生交互的位置。

许多程序正是遵循上述原则,使用底部导航来表示程序中最重要的功能。Facebook便是代表之一,这样做也允许了用户能在不同功能间快速切换。

dbdh20160812-12

△ Facebook iOS客户端底部导航

二、底部导航设计的四个关键点

导航通常就是指引用户前往他们想去的地方的工具。底部导航则应该用来表示程序中常用的几项重要功能。这些功能要求能够直接从应用程序的任何地方访问。

好的底部导航设计遵循以下规则:

1、只显示最重要的功能

使用3-5个顶级导航标签。如果少于3个标签,考虑使用标签选项卡替代。

dbdh20160812-13

避免使用超过5个底部导航块,否则会造成块与块间显示太拥挤,也容易造成误点错点问题。另外,过多导航块会让你的程序看起来更加复杂。

dbdh20160812-2

如果你的顶层导航块确实超出了5个,不要都放在底部导航,考虑放在其他地方或选出最重要的放在底部。

2、避免使用滚动设计

对于小屏幕来说,隐藏一部分导航块显然是一个解决方案——你不用担心屏幕限制,只需要把导航块置于一个可滚动区域。但是这种方式难免会降低使用效率,因为即使你已经看到了你需要的块,你可能仍然需要滚动一下才能看到全部标签。

dbdh20160812-3

△ Rookie Cam iOS客户端滚动设计方案

3、告知用户当前位置

没有向用户表明其当前所在的位置大概是所有程序常常犯的一个错误。而对于用户,在成功地使用导航之前,他们要搞清楚的基本问题便是“我现在在哪”。

好的设计应该是用户在没有任何外界指引的情况下,也能仅靠第一眼就能知道该如何从A点到B点。你应该使用合适的视觉线索(图标、标签或者颜色)直观的告诉用户,而不必有任何多余的解释。

(1)图标

底部导航块往往都是使用图标表示,它们应该传达出跟其内容匹配的信息。虽然有一些用户熟知的通用图标,大多是用来代表诸如搜索、邮箱和打印等功能。不过这种通用图标非常稀少。但是程序设计者常常设计出从视觉样式很难识别出其对应的功能特性的图标。

dbdh20160812-4

△ Bloom.fm Android客户端之前的做法,何yne size-n" 3做免 h2016" cata-cm但是程53 色)>

底免使哪⃨是魾或蠏用图同颜色的区堇。打孾或大寥是用图序设做本问区调看誁其前所在出签。

<="http://image.uisdc.com/wp-content/uploads/2016/08/dbdh20160812-4.p14g" width="800" height="320" />

避 Fac左

这毷循上迥扡简手做则:—你给 h2016出最魾或用图序设做本问区调进行良奲

△ FacTwirs.cS客户端底部导按b><

如果你部导航块栏问庈 1 色)大寥是用 h2出最图标。打啙眬魾或呈黑奲者白的劶态

避 Fac左

底啙眬魾或寥是用应爪之能特渀个错简短楚癰图殟光

54直觮。椚氏>

底郥是用姮。柟表涳到蠟特被松蘓做刦摸到B到

1 class="alignnone size-full wp-image-196806"1src="dbdh20160812-4" alt="http://image.uisdc.com/wp-content/uploads/2016/08/dbdh20160812-4.p6g" width="474" borght="88"4 />

如 Fac机的述固殟椚氏图惨导航来蠏>

1》55 孾或縄难孾"><笊皷>

使甯能听縍吪错孾或栏标<笊皷表示其一于是觉标<㼏》一注难喰息。虽>

1 class="alignnone size-full wp-image-196806"1src="dbdh20160812-4" alt="http://image.uisdc.com/wp-content/uploads/2016/08/dbdh20160812-4.p7g" width="639" claght="88"9/>

△ Blo用图孾"><笊皷于yne内>

34告用爪之过言做其>

没秀网雾截设计的像薇ﯔ引篼yn旅序难吪显痠形难剋

5图行这>

底寀部底部导航块䭾或堇。是有顶你風户能我疰图方访大僽仍琌酀泉所朓来部底菜手抖㯹輰B桠

△过輸唨图孾或栏给yn澛交你犟蓪≍所幕限/㼏》图䏑挜内难厧件元材大垜少应去供交给yn控件大诓骨图慷。栏

http://image.uisdc.com/wp-content/uploads/2016/08/dbdh20160812-4.p17g

<="dbdh20160812-4" alt="http://image.uisdc.com/wp-content/uploads/2016/08/dbdh20160812-4.p9g" width="6393 claght="568" />

如 FacD="b" d网痴劶态>

1》53 藏一截设>

底鞜少乕的讹匹使琪错动一》16"。氛大孾或栏惽听縍yn向最动一㊠<顶动要浪唺最

如 Fac惨导航来苊皽听根据yn难动一式鐑一只昘p> >54直觉样儉悦 /> 如>

底免使用图厥从难娪鐑迟圥表縍同功觉标显转。那同功觉标显寥是用图淡的淡燄区嫯蔾跥进行过渡

ong>精> ><-study claget="_blank">用交赞:

  • 互设计-reagesiglaget="_blank">用交互设计

  • UI计者

    ref="http://www.uisdc.com/navin"><"> ii9sign">-studylaget="_blank">用交实用干浪匁斕獗!基础手何从做䭦UI计者。i>
  • 所底鼀发用交8猫諘匁更娋 !基础手何从系统方习一所底鼀发。i>
  • 植标㷧用交视菜鸰,諘匁!PHOTOSHOP植标酐喹" c攻略。i>
  • 的奲衈—用交区彩搭的切功!标超瑢硈<你做僨 清殟的奲。i>
  • DPI斕獗 href="http://www.uisdc.com/navign" tnaeagesigp">-dpid=get="_blank">用交础知识科习来更!这麡还职量庈 成姆DPI斕獗。i>
  • 互设计-rnervieaon(vescri" target="_blank">。i>
  • 精则啙方䝀strong>精href="http:///uiiixy:n/pr.org/plow-custom-navigation-deseacbile-devaui"effr> b98c0f#.j9u2xzg altget="_blank">用ixy:n/pr>

    >用g srcss="aligcle_li->a="dbdyor cneii9-101src="http://image.uisdc.com/wp-content/uploads/2016/08/d4/yor cneii9-101sg" width="800" height="160" cla/p> i> >用i9-10m/mt> “对膅最习</> 如hong>精【性奲荐: 精>/> 如hong>精麡还职馁把评地-x9眬推d>ong>精s上最全的设计师图书目刪之
    如hong>精麡还荚瞧d>ong>精s挤廓岀亝量812设网甠<博">用@秀网页设计
    /> 如hong>精麡还航之d>ong>精s䚄萃层尖麡还櫙/荐:用httpuii.uisdc.com/bo> i> >="twid/cs >ref="http://www.uisdc.com/wui/" target="_blank"> /p> <- .xoSDC G --> 标相注章 class="bootuw da /d ress="pubtbnail', itf="http://www.uisi9-10m/mt/5ii9sigation-patiop="vesuxei=e="markground">lge-19: fn(httpuiige.uisdc.com/wp-content/uploads/2016/09/bao5ii9sigation-patiop="vesuxg" w) />get="_blank" cla>> i

    get="_blank" cl>样5导刐知盾截设计的㼏》那皽听这瑢端验 i>

    i>

  • ress="pubtbnail', itf="http://www.uisi9-10m/mt/webe-reccri" tsdthth"unusualvigation" tar=e="markground">lge-19: fn(httpuiige.uisdc.com/wp-content/uploads/2016/05/uiswebe-reccri" tsdthth"unusualvigation" tg" w) />get="_blank" cla>> i

    get="_blank" cl>意斛幋,姆躡还老2话顶䯼之玩得狀眼无亯网站/> i>

    i>

  • ress="pubtbnail', itf="http://www.uisi9-10m/mt/20-erseaon(vesigation-pasdtebe-reyd==e="markground">lge-19: fn(httpuiige.uisdc.com/wp-content/uploads/2016/05/h4/20-erseaon(vesigation-pasdtebe-reyg" w) />get="_blank" cla>> i

    你认厕冒险老2话炫站的莩儿网站页篼之麡还> 3>

    简手䎇截设栏麡还礟触极礄图叐諘瑢端验 i>

  • ress="pubtbnail', itf="http://www.uisi9-10m/mt/%94%a8%e8%ad%97%e5%b7%99%e4%b9%e4%e9%ad%91%e9%ab%99' c%ad%9f%b5%88%e8%ad%8e%a0%e9%ae%be%e8%ae%a1' c%aa%9f%e4%b2' 0%esrc=e="markground">lge-19: fn() />get="_blank" cla>> i

    用台ﭐ商务站/篼之栏麡还集萃> i>

    <得外ﭘ哦

  • ress="pubtbnail', itf="http://www.uisi9-10m/mt/unusualvigation" tdtebsign">-src=e="markground">lge-19: fn(httpuiige.uisdc.com/wp-content/uploads/2016/08/d1/unusualvigation" tdtebsign">-sg" w) />get="_blank" cla>> i

    -s/>get="_blank" cl>样;焋满戆夛兊哪用悫站的莩儿网站页篼之麡还来5二

    i>

  • ress="pubtbnail', itf="http://www.uisi9-10m/mt/igation-patterns-mobile" tar=e="markground">lge-19: fn(httpuiige.uisdc.com/wp-content/uploads/2016/04/baoigation-patterns-mobile" tg" w) />get="_blank" cla>> i

    get="_blank" cl>互基础知识科普!带你认识最热门的12种导航模式》

    i> < <- .xPC打WAP聚的⚄剈 v cla"bdsSOHUCSrc="bds887"0claa> > ="twid/jtarscripta /d (funon() ( var auiid = 'cysIcg7yN var tenf = 'duct_3f4b0d38a9a9742e8.p5493eaf961061 var th="8 = window.><"> Wh="8 || docut' =.docut' =El_su =.cliu =Wh="8 ( cuth="8 < 960) window.docut' =.wride('