前一陣子升級了博客系統，由原來的wp2.6升級到wp2.7，而升級以后最大的改變就是全新的后臺管理界面了。
在我用了一會發現，wp2.7的后臺左側導航越用越熟悉，突然打開dwcs4一看，哈哈，這不是一模一樣嗎，adobecs4系列全面升級了界面，而左側導航的處理方式也全新的，下面我們來看看dwcs4的導航設計。

三種狀態：
第一種區塊全部展開，可以收縮，這一點和普通的軟件沒有什么區別。
第二種區塊全部隱藏起來，顯示圖標+文字，當用戶單擊以后顯示已隱藏區塊。
第三種區塊全部隱藏起來，只顯示圖標，當用戶單擊以后顯示已隱藏的區塊。
在第二種和第三種狀態的時候，可以設定是鼠標離開的時候區塊就隱藏，還是當用戶再點擊一次以后區塊才隱藏。

我認為這種導航設計很好的滿足了，新用戶、中級用戶和高級用戶三種不同的用戶。如果用戶是新手，那么他可能不了解軟件的窗口的作用，那么這個時候全部展開是最好的了，當用戶漸漸的了解窗口的作用以后，就可以用圖標+文字或者單獨圖標的方式來操作窗口。另外還有一個好處的是全是圖標的方式可以節省更多的操作空間。

不過其實微軟其實早就也用了一種解決方案來解這個決類似的問題。

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

WP2.7的后臺雖然借鑒了CS4的設計，但是因為是網頁的原因，進行了一些改進。但是實際用起來的效果確實要比CS4差很多，譬如鼠標懸浮的時候，選中狀態很不明顯，顯示出的菜單離導航的邊距太大，顯示初以來的菜單的標題欄太高，等等。看來WP的交互設計師還需要下很大的功夫來優化這個菜單。

原文：http://blog.d8in.com/posts/287.html