• 
• 
• 
• 
• 
• 
• 

返回貼子列表		發(fā)表新貼
主題： 區(qū)分UI設(shè)計(jì)中的裝飾元素和意義元素	共有1583人瀏覽過(guò)本貼	主貼管理 置　頂 加　精 結(jié)　貼 轉(zhuǎn)　貼

昵稱：奈薇建站網(wǎng) 論壇積分：108000 發(fā)貼等級(jí)：21 發(fā)貼數(shù)：1156 回貼數(shù)：1282 被砸雞蛋：1 獲贈(zèng)鮮花：182

發(fā)表時(shí)間：2019/8/6 21:56:00 樓　主 區(qū)分UI設(shè)計(jì)中的裝飾元素和意義元素 　　作為界面設(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)編輯MichaelBluth，因?yàn)檫@個(gè)鏈接和MichaelBluth出現(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)題?，F(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)致力于，讓每個(gè)中國(guó)人、每個(gè)中國(guó)企業(yè)都擁有自己的“官方網(wǎng)站”！ 回復(fù)此貼 單貼管理 修　改 刪　除 清理簽名 TOP

共0個(gè)回貼   分0頁(yè)

上一頁(yè) / 下一頁(yè)   當(dāng)前第頁(yè)

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開(kāi)發(fā)區(qū)信息港 山東在線門戶