在軟件設(shè)計(jì)中嘗試過(guò)很多菜單的表現(xiàn)形式，其中含義各不相同，隨著表現(xiàn)形式的多樣化，整理使用的方式也顯得比較重要，

菜單的表現(xiàn)方式——體驗(yàn)并列和包含的關(guān)系交互設(shè)計(jì)

。

    一、預(yù)覽樣式

   

    可以看到操作系統(tǒng)或者操作軟件都采用了這種表現(xiàn)方式，這種表現(xiàn)方式的優(yōu)點(diǎn)在于可以很好的明確包含關(guān)系，上下級(jí)的顯示較為清晰，在專屬的行業(yè)軟件中比較注重操作的上下級(jí)關(guān)系，使用頻率是比較多的，例如軟件的一級(jí)菜單下包含了多個(gè)二級(jí)菜單。當(dāng)然這樣的排列方式就多了一個(gè)煩惱，不能清晰的定義下級(jí)菜單的多少，會(huì)給排版帶來(lái)不好的影響。

   

    如上圖：當(dāng)二級(jí)菜單在不之情的范圍下，使用這樣的預(yù)覽模式，可能對(duì)二級(jí)菜單的樣式控制造成不好的影響。甚至不得已的情況下?lián)纹祈?yè)面。特別是在商業(yè)的領(lǐng)域中，二級(jí)的種類更是不可控制的，所以它的使用就比較受限。

    二、“樹”就是我們常用的列表試圖

   

    樹的應(yīng)用一般是在數(shù)據(jù)量大時(shí)，嵌套關(guān)系比較復(fù)雜，在二層關(guān)系以上的情況使用較多，它具有很好的擴(kuò)展性，能夠明確的從主干看到樹的基本內(nèi)容或者分類屬性。但是一般來(lái)說(shuō)，它會(huì)伴隨滾動(dòng)軸的出現(xiàn)，所以網(wǎng)頁(yè)中很少出現(xiàn)，目前我在看圖軟件和產(chǎn)品分類較多的情況下看到過(guò)。

    三、并列篩選

   

    就是說(shuō)簡(jiǎn)單的連動(dòng)，后面的選擇是依據(jù)前面的選擇結(jié)果而控制的。最多的情況應(yīng)該就是出現(xiàn)在上圖的方式中，

電腦資料

《菜單的表現(xiàn)方式——體驗(yàn)并列和包含的關(guān)系交互設(shè)計(jì)》(http://m.stanzs.com)。但是也有一些網(wǎng)站是按照這樣的方式進(jìn)行篩選；這種方式限制用戶的眼光是從左到右，逐個(gè)縮小篩選的范圍，就像很多導(dǎo)航一樣，先通過(guò)分類，再詳細(xì)選擇；它的優(yōu)點(diǎn)是空間比較省哦，但是當(dāng)層次比較多時(shí)，就難以應(yīng)付了；從用戶使用角度，距離用戶最近的就是用戶上一步選擇的結(jié)果，這樣就比較容易記憶，鼠標(biāo)的移動(dòng)范圍也相對(duì)的較小，比較快捷。

   

    上圖是并列篩選和下拉結(jié)合運(yùn)用比較好的例子，但是使我比較模糊的是，它采用了并列的排版方式，省去了大量的空間，但是選擇采用的卻不是逐級(jí)縮小的關(guān)系。當(dāng)用戶點(diǎn)擊“marke”時(shí)，是針對(duì)此類的篩選，似乎和后面的“farbe”等是并列的關(guān)系，是無(wú)級(jí)別關(guān)系的。

    四、目前使用較好的菜單表現(xiàn)關(guān)系（1）

   

    a點(diǎn)擊前如上圖排列

   

    b點(diǎn)擊后如上圖排列

    這種方式的好處是，一目了然，a讓用戶知道所有的分類，首頁(yè)的效果就達(dá)到了，告訴用戶這個(gè)網(wǎng)站給你提供了什么；由于每一項(xiàng)的二級(jí)層次種類較多，故使用了b的表現(xiàn)方式，中間用豎線間隔，進(jìn)行合理的分類。

    五、目前使用較好的菜單表現(xiàn)關(guān)系（2）

   

    這個(gè)是目前拍拍和淘寶等多家c2c網(wǎng)站使用的方式，最多不能代表最好，個(gè)人認(rèn)為從視覺上容易造成視覺上的疲勞；從數(shù)量上，滾動(dòng)軸表現(xiàn)的范圍有限制，對(duì)用戶記憶造成了不便；從定位上，撤銷上一步操作好像鼠標(biāo)動(dòng)作上有點(diǎn)不便。是不是可以引入國(guó)外的方法，進(jìn)行結(jié)合處理呢？希望和大家一起探討！

    來(lái)自：http://www.xibeidesign.cn/xibei/article.asp?id=54