關(guān)于“管理中心”的界面設(shè)計(jì)框架，一般我們都會選擇傳統(tǒng)的“工”字結(jié)構(gòu)，頂部是形象區(qū)，左側(cè)是功能列表區(qū)，右側(cè)是操作區(qū)，這種結(jié)構(gòu)的功能擴(kuò)展性和易用性都是非常好的，幾乎90%以上的軟件系統(tǒng)的后臺管理中心都是采用這樣的結(jié)構(gòu)。

在實(shí)際設(shè)計(jì)工作中我們發(fā)現(xiàn)，用戶總是希望能把操作區(qū)的區(qū)域盡量變大，以最大限度滿足業(yè)務(wù)工作，提高使用效率。我們對信息的瀏覽習(xí)慣于向下擴(kuò)展，進(jìn)行縱向滾動。也就是說在顯示器分辨率一定的前提下，信息可以在Y軸進(jìn)行擴(kuò)展，而X軸卻是固定的，這就需要我們在側(cè)欄上多下功夫了。所以我們一般都會設(shè)置1-2個hide按鍵，來控制頂部欄和左側(cè)欄的消隱，這樣以來既可以擴(kuò)大操作區(qū)又不影響導(dǎo)航。

但是究竟左側(cè)欄的默認(rèn)寬度多少才是最合適，既能保持美觀，最大限度的放大操作區(qū)，又可以不影響操作呢。下面我們就此問題進(jìn)行一下研究。

我們首先將在左側(cè)欄將會用到的元素羅列一下
滾動條：17px?? 圖標(biāo)：16px? 文字（中文宋體）：11px 文字間距：1px

左側(cè)欄需要具備的以下幾個條件
1.一般來講左側(cè)會包括最多不超多4級的樹形菜單
2.文字為一行不折行，且一般不會超過8個漢字
3.考慮到可能會出現(xiàn)的滾動條

綜上所述，我們進(jìn)行排版。（如下圖）

最后我們計(jì)算得出左側(cè)欄的“黃金分割”寬度為204px

源地址：http://www.zcool.com.cn/a……MTM3ODA=.html