作為界面設(shè)計師，總是希望作品好看而且有道理。屏幕上每個元素都應(yīng)當(dāng)看起來舒服，界面也不能只是藝術(shù)品。界面要承擔(dān)工作。界面要能提供信息，清晰說明動作的可能過程。如果設(shè)計師夠熟練，視覺吸引和功能，漂亮與清晰，裝飾和意義，這兩個因素經(jīng)常共存。但是，我們希望設(shè)計看起來是什么樣子和客戶如何理解設(shè)計，這兩者之間會存在著沖突。我最近在 GitHub網(wǎng)站就碰到了裝飾與意義的問題。
GitHub網(wǎng)站全局導(dǎo)航
登錄到GitHub，全局導(dǎo)航出現(xiàn)在頭部分右側(cè)。圓角矩形包裹了全局導(dǎo)航塊。
觀察一下包裹全局導(dǎo)航塊的圓角矩形。其外側(cè)是灰色邊框，整個全局導(dǎo)航塊呈淡藍色背景。邊框和背景屬于裝飾性。它們?yōu)閷?dǎo)航塊增添了風(fēng)格和視覺趣味。為了幫助你看清楚邊框和背景的裝飾性質(zhì)，下面有兩張圖，上一張是原圖，下一張沒有邊框和背景。
兩張圖看起來都很舒服，功能也沒有變化。你會說兩者之間的區(qū)別只是審美角度、或者個人觀點問題，沒必要再討論。但是，事情沒這么簡單。容器元素包裹鏈接遠遠不是風(fēng)格問題。裝飾容器實際上改變了鏈接的意義，正如我們下面會討論的，裝飾容器給GitHub造成了問題。想明白為什么，先來了解容器元素如何影響客戶理解設(shè)計。
容器影響所包含元素
容器中放置鏈接，暗示了容器和鏈接之間的關(guān)系。從技術(shù)而言，容器給鏈接加上了范圍（scope）。網(wǎng)絡(luò)應(yīng)用工具中經(jīng)常出現(xiàn)的編輯（edit）鏈接，是大家都熟悉的例子。
上面兩個編輯鏈接都被容器限制了范圍。瀏覽者期望上一個編輯鏈接用來編輯Michael Bluth，因為這個鏈接和Michael Bluth出現(xiàn)在同一個框中。兩個鏈接一樣，容器在發(fā)揮作用。
這個道理如何應(yīng)用到GitHub全局導(dǎo)航？repositories（項目的意思，譯者注）中的all鏈接有問題。GitHub有兩種信息，一種是任何人都可以瀏覽的repositories，另一種是用戶自己的repositories。這就是我們在其導(dǎo)航設(shè)計中發(fā)現(xiàn)的問題。
GitHub的裝飾設(shè)計暗示了repositories鏈接有范圍限制
全局導(dǎo)航塊包裹在邊框中，”all”鏈接受到當(dāng)前用戶的限制。點擊鏈接，應(yīng)當(dāng)期望看到屬于當(dāng)前用戶的repositories。
與沒有邊框的版本相比�！盿ll”鏈接是指Michael的repositories，還是只所有用戶的repositories列表，不清楚。
不只是裝飾：GitHub上的行為令人困惑
GitHub全局導(dǎo)航起初看起來只是裝飾或者風(fēng)格問題。現(xiàn)在我們明白了美學(xué)決定還會影響瀏覽者如何理解設(shè)計。就GitHub而言，repositories鏈接受到限制，并沒有與行為相符。點擊”all”鏈接，實際出現(xiàn)的并不是當(dāng)前用戶的repositories，而是所有用戶的公共repositories列表。如果想看當(dāng)前用戶的repositories，需要點擊avatar圖標(biāo)旁邊的用戶名字。真夠折騰！
重新設(shè)計應(yīng)考慮范圍
如何重新設(shè)計，才能消除困惑？一種方法，去掉容器，重新排列元素，消除repository鏈接受到當(dāng)前用戶限制的暗示。
這種重新設(shè)計利用視覺原則，影響如何理解導(dǎo)航塊的方式。將avatar圖標(biāo)移動到右側(cè)，去掉邊框，repository鏈接與當(dāng)前用戶之間相關(guān)的假設(shè)不再存在。
另一種方法，保留原設(shè)計中的裝飾容器，利用文案說明限制范圍。
第二種重新設(shè)計采用兩個鏈接，”all”和”mine”，來區(qū)分所有repositories列表和只屬于當(dāng)前用戶的repositories列表。無論是采用視覺原則還是文字，兩種重新設(shè)計的方案都消除了”all”鏈接的模糊性，設(shè)置了清晰期望。
GitHub提供的服務(wù)很好，我知道我有點吹毛求疵。UI是微妙游戲。大腦和眼睛的功能敏感精妙。作為設(shè)計師，應(yīng)當(dāng)非常謹(jǐn)慎，有些時候我們?yōu)檠劬υO(shè)計，而忘記了大腦。希望這些例子能幫助你對兩種元素更敏感—裝飾元素和改變界面意義的元素。
粵公網(wǎng)安備 44010402000282號