《网页设计培训侧边栏菜单解析》由会员分享，可在线阅读，更多相关《网页设计培训侧边栏菜单解析（14页珍藏版）》请在金锄头文库上搜索。
1、YWXUECOM网页设计培训侧边栏菜单解析近来，越来越多的研究及测试表明，侧边栏菜单，也就是我们俗称的汉堡包菜单，很可能是一种弊大 于利的设计模式。不过我们也要知道，这个问题实际上是很微妙的，我们很难以一种非此即彼的标准 来判断;我在一系列可用性测试当中所观察到的情况也证明了这一观点。一网学，致力于网页设计培 训、UI设计培训、淘宝美工培训，平面设计培训，是最好的远程设计培训学校。所以我个人仅希望各位在制定设计决策之前能够充分了解这种模式当中所存在的问题，有可能导致的 结果，以及一些相关的替代方案。三Q Browse nearbyDiscoverq j=BROWSE问题所在可发现性较低 效率较
2、低YWXUE.COM与系统的导航模式冲突不够一目了然1可发现性较低若不在视线中，便不在认知中。默认状态下，侧边栏菜单和其中的所有内容都是不可见的。此外，要使界面真正可用，首先要让人们了解到触发侧边栏展开的图标是可点击的按钮。我们见过不 少产品都会在汉堡包图标旁边加注“菜单”，或使用气泡提示来告诉用户这里是可以点击的;显然，他们 也感觉到了这一问题。这种做法并非不可取，但在应用最重要的界面中平白增加这样的元素，对于核 心功能来说仍然属于一种干扰。2效率较低即使用户知道了侧边栏菜单的存在，他们在使用导航时仍然会感受到摩擦力，因为这种模式要求用户 首先打开菜单，然后才能寻找自己的目标。N-J SIM
3、 B12：0i匚二Q Browse nearbyNearbyTheres a tip from Rita at Street Diner (Friday Street Food Market: ILFor vegetarians, tine the Ethiopian stall andFoodMk 0.3 miLuis at 68 Middle StreetRif自Brilliant NoiseCentral Brighton1me Trevor M.GribotJThe LanesFtring elastic bands at Manuel.Antony R. ribotThe Lane&
4、26rnOily T, ribot The Lanes27m而下图所展示的是拥有传统的固定导航系统（tab栏）的模式，其中的功能模块一目了然，入口始终保 持可见：No SIM 守1205-i I =E_Home *Street Diner /.st-tDr-crNe&d something to cool down?hbjuicebike is here for you #brightonDnewSnyc Popular n . imZero to One - A Eook By Peter Thiel zerotooneboo k.ccmPaul Kinlan v-.PauLKinlar.D
5、ecided to wait whan first hearing about ap pl inks, Yep, I am so frustrated that this situation has come a do Lit and this is a poor solution令 M 2TimeiinesNMFi 询 icnMessagesMe3与系统的导航模式冲突所有问题当中最突出的就是这一点了。例如在iOS当中，我们很难在不引起冲突的情况下将菜单按钮与标准的回退按钮同时放置在导航栏里。No SIM mmarcFrom another perspective: Heres the col
6、our table from the images. 3 vs 128 unique colours, http:/7iJmguncom/ xB27N59.pngmarcSIGGRAPH blows my mind, everyyeanSnverse-Foley Animation youtu.beAdaptive Tå and Crackingyoutii.beImJbreuRT &nevyn: Note Wat lookback Anywhere 063 is out on Cydia as well, with all the news from 0.6 J and 0.6.2
7、 too. htt p:/bit. ly/1 jsep LImarcBoth images were saved using PNG 8 and Save for Web in Photoshop. YepH using ImageOptim does change the results. The larger dimensioned image wins by an even bigger margin now, http 7/i.inngur,co m/52ARgiYr png4不够一目了然在默认状态下，你无法获取某个特定模块的信息，因为菜单本身就是隐藏的，要了解模块当中的信息, 你首先
8、要经由菜单进入模块才可以。当然，也可以像Jawbone UP应用那样直接通过图标来代表信息。但这种方式的扩展性不强，你很可 能需要针对不同类型的内容维护一套多个图标，最终不得不通过一种更通用的方式来呈现信息提示， 以减少复杂性;从“一目了然”的角度讲，结果还是差不多。而固定的tab栏，在任何上下文环境中都可以让用户清晰的了解到每个模块当中所发生的事情，并让 他们能够随时进入相关界面。令炉 潭 土Timelines Notifications MessagesMe用户的认知作为设计师，我们可能会为了节约可用空间而不得不使用汉堡包模式;不过，在现实当中，人们究竟 是怎么看待界面的？这方面我们可能存
9、有误解。你认为人们可以看到眼前的一切，其实他们只能注意 到某个焦点区域，即使整个屏幕的尺寸很小。节约屏幕空间一一我们可以尝试通过其他不会对导航造成负面影响的方式来达成这一目标;那些最基 本的人机交互设计原则仍然需要遵守，例如通过一目了然的方式为用户提供反馈、展示应用当前的状 态等等。何时使用汉堡包菜单严格的讲，按照我们之前的分析，汉堡包菜单真正有意义的用法不是很多，多数情况下还是要尽量避 免使用;不过例外也仍然存在。IRCCIoud是一个不错的例子，在这里，汉堡包菜单模式是利大于弊的，因为IRCCIoud同时存在两 套导航，通过汉堡包菜单，用户可以在同一个界面环境中去到频道菜单和会员菜单中进行
10、导航。网学Na SIM 审13：14# hoodieOfficial http:/hood.ie channel |wel.詐YWXUE.COMcitys center10:53 mariusz joined-mariusz20CH :41 d0:S2:a00: :1 db tenmilestereo WunderbarJ tenmilestereo Im looking forwfiFd to making it to Berlin.10:58 a T louisremi. martinklepsch, and vmx joined * galfert left u pmuellr_ qui
11、t pmueJIr and ThreeTaeswork popped in - L0u1s f LOjOsffff jx thats gonna be amazing!:)11 ：20 o 7 psGnf_ joined = pscanf. martinkepsch, boennemann, shimaore; and iQuisremi quit * LOuOs * LOul s, matzew * matzew|Lunch tenmilestereo ffffux: Definitely.:)12:05 o = martinklepsch. mlGuro; L0u1s: Acconut,
12、and ferjm quit fronx popped in i pmuellr and boennemann nipped out -matzew| Lunch f matzewA Send这种用法是可以接受的。它的内容界面只有一级结构，不再有下级界面，无需一层层的前后导航，因 此不会发生导航冲突的情况。不过即使是这样，我们也可以看到，导航栏中的信息负载已经相当严重了。=#hoodieOfficial http:/hood.ie channel Wei其他负面结果也比较明显。右侧的会员菜单按钮占据了通常情况下用来放置行动按钮的位置，与当前 界面相关的操作无处摆放。设计师别无选择，只能将各种与
13、上下文相关的操作集成在左下角设置按钮 唤出的行动菜单当中。No SIM 寺13：34# hoodieOfficial http：/hood.ie channel | Wei.making il to Berlin,10:58n r louisreini, martiriklepsch, and vitix joined galfert left = pmuellr_ quit pmuellr and ThreeTbeswork popped in L Ou 1 s LQuOs11:19ffffux thats gonna be amazing!：)11:20dpscanL joined p&c
14、anf, martinklepsch, boennemann, shimaore, and louisreirii quit * LOuOs L0u1 s, matzew maUew|Lunch tenmiiestereo ffffux： Definirely,;)New Messages12；O5 D t pickets joined = martinklepsch,L0u1 s, Acconut, and ferjm quit fronx popped in prrnjellr, boennemann, and mlouro nipped out matzewlLunch “ maUew, lhalmquisl_ ihDlmqui&t ffffux CouchDB Weekly News httpM bl。口 乱 a 口ac 片幺 o 即 co uc 忤臼t Zcouchdb_wsekiv_news_mav_i 6Send这也引出了本文的下一部分。替代方案最简单直接的替代方案就是传统的tab栏。Featured Top
