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

電腦資料 時(shí)間:2019-01-01 我要投稿
【clearvueentertainment.com - 電腦資料】

    在軟件設(shè)計(jì)中嘗試過很多菜單的表現(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ì)給排版帶來不好的影響。

   

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

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

   

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

    三、并列篩選

   

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

電腦資料

菜單的表現(xiàn)方式——體驗(yàn)并列和包含的關(guān)系交互設(shè)計(jì)》(http://clearvueentertainment.com)。但是也有一些網(wǎng)站是按照這樣的方式進(jìn)行篩選;這種方式限制用戶的眼光是從左到右,逐個(gè)縮小篩選的范圍,就像很多導(dǎo)航一樣,先通過分類,再詳細(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)系,是無級(jí)別關(guān)系的。

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

   

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

   

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

    這種方式的好處是,一目了然,a讓用戶知道所有的分類,首頁的效果就達(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)不便。是不是可以引入國外的方法,進(jìn)行結(jié)合處理呢?希望和大家一起探討!

    來自:http://www.xibeidesign.cn/xibei/article.asp?id=54

最新文章