前一陣子升級(jí)了博客系統(tǒng)，由原來(lái)的wp2.6升級(jí)到wp2.7，而升級(jí)以后最大的改變就是全新的后臺(tái)管理界面了。
在我用了一會(huì)發(fā)現(xiàn)，wp2.7的后臺(tái)左側(cè)導(dǎo)航越用越熟悉，突然打開(kāi)dwcs4一看，哈哈，這不是一模一樣嗎，adobecs4系列全面升級(jí)了界面，而左側(cè)導(dǎo)航的處理方式也全新的，下面我們來(lái)看看dwcs4的導(dǎo)航設(shè)計(jì)。

三種狀態(tài)：
第一種區(qū)塊全部展開(kāi)，可以收縮，這一點(diǎn)和普通的軟件沒(méi)有什么區(qū)別。
第二種區(qū)塊全部隱藏起來(lái)，顯示圖標(biāo)+文字，當(dāng)用戶單擊以后顯示已隱藏區(qū)塊。
第三種區(qū)塊全部隱藏起來(lái)，只顯示圖標(biāo)，當(dāng)用戶單擊以后顯示已隱藏的區(qū)塊。
在第二種和第三種狀態(tài)的時(shí)候，可以設(shè)定是鼠標(biāo)離開(kāi)的時(shí)候區(qū)塊就隱藏，還是當(dāng)用戶再點(diǎn)擊一次以后區(qū)塊才隱藏。

我認(rèn)為這種導(dǎo)航設(shè)計(jì)很好的滿足了，新用戶、中級(jí)用戶和高級(jí)用戶三種不同的用戶。如果用戶是新手，那么他可能不了解軟件的窗口的作用，那么這個(gè)時(shí)候全部展開(kāi)是最好的了，當(dāng)用戶漸漸的了解窗口的作用以后，就可以用圖標(biāo)+文字或者單獨(dú)圖標(biāo)的方式來(lái)操作窗口。另外還有一個(gè)好處的是全是圖標(biāo)的方式可以節(jié)省更多的操作空間。

不過(guò)其實(shí)微軟其實(shí)早就也用了一種解決方案來(lái)解這個(gè)決類似的問(wèn)題。

雖然大致開(kāi)上去沒(méi)什么兩樣，但是實(shí)際上有很大不同。
1、按鈕上處理的不同：窗口隱藏以后微軟的處理方式是變成一個(gè)豎著的小標(biāo)簽，用16×16的小圖標(biāo)+文字。標(biāo)簽又窄又長(zhǎng)，鼠標(biāo)點(diǎn)擊十分不爽，標(biāo)簽上的文字是90°旋轉(zhuǎn)的，很難閱讀。而cs4的處理方式是用一個(gè)24×24的圖標(biāo)+橫排的文字作為標(biāo)簽，這樣不僅容易點(diǎn)擊，而且也容易閱讀，不過(guò)這樣的方式會(huì)損失掉一些空間。所以又有了進(jìn)化方式，就是干脆就是一個(gè)圖標(biāo)去表示。這樣既容易點(diǎn)擊也節(jié)省空間，雖然沒(méi)有了文字說(shuō)明，但是在鼠標(biāo)懸浮的時(shí)候會(huì)有提示，而且我想用這種高級(jí)模式的人已經(jīng)很容易辨認(rèn)這些圖標(biāo)是表示什么工具窗口的了。
2、顯示區(qū)塊的處理不同：窗口顯示以后微軟的處理方式是由上到下，根據(jù)軟件的高度鋪滿，寬度可以拖動(dòng)設(shè)定，無(wú)論標(biāo)簽在什么位置，顯示的窗口都是一個(gè)位置。這里最重要的一個(gè)問(wèn)題就是顯示窗口的位置，因?yàn)闃?biāo)簽都很長(zhǎng)的，所以當(dāng)單擊第一標(biāo)簽窗口的位置還是可以比較舒服，但是點(diǎn)擊第二個(gè)標(biāo)簽的時(shí)候就會(huì)發(fā)現(xiàn)標(biāo)簽就會(huì)離窗口的位置比較遠(yuǎn)有些不舒服，而如果有很多的標(biāo)簽的時(shí)候，第四個(gè)，第五個(gè)，就會(huì)發(fā)現(xiàn)已經(jīng)很難容忍這種操作了。雖然窗口的位置是固定的，但是單擊標(biāo)簽的時(shí)候用戶需要的是相對(duì)定位感，而不是絕對(duì)定位。cs4處理的方式就要好得多，cs4可以讓用戶把工具區(qū)塊進(jìn)行分組，一般一個(gè)分組最多不會(huì)超過(guò)4個(gè)，這個(gè)分組和全部展開(kāi)時(shí)候的分組是一致的。當(dāng)用戶在單擊一個(gè)圖標(biāo)的時(shí)候顯示隱藏的區(qū)塊，區(qū)塊的位置由分組接線而定，這樣的好處是既保持了和展開(kāi)以后效果的一致性，又不會(huì)離點(diǎn)擊的功能按鈕又太遠(yuǎn)的距離。而顯示的區(qū)塊默認(rèn)為正常的窗口大小，也可以拖拽獨(dú)立設(shè)定大小。這樣的好處就在于我沒(méi)有必要為了4，5行的東西把整個(gè)邊都遮住。

WP2.7的后臺(tái)雖然借鑒了CS4的設(shè)計(jì)，但是因?yàn)槭蔷W(wǎng)頁(yè)的原因，進(jìn)行了一些改進(jìn)。但是實(shí)際用起來(lái)的效果確實(shí)要比CS4差很多，譬如鼠標(biāo)懸浮的時(shí)候，選中狀態(tài)很不明顯，顯示出的菜單離導(dǎo)航的邊距太大，顯示初以來(lái)的菜單的標(biāo)題欄太高，等等?？磥?lái)WP的交互設(shè)計(jì)師還需要下很大的功夫來(lái)優(yōu)化這個(gè)菜單。