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