日韩 亚洲一区二_久久vs国产综合色大全_国产精品福利在线_欧美在线一级A片免费观看欧美在线_女同性毛片60分钟

您現(xiàn)在所在的位置：首頁(yè) >關(guān)於奇酷 > 行業(yè)動(dòng)態(tài) > 鄭州UI設(shè)計(jì)培訓(xùn)中的小細(xì)節(jié)

鄭州UI設(shè)計(jì)培訓(xùn)中的小細(xì)節(jié)

來(lái)源：奇酷教育 發(fā)表於：

　　鄭州UI設(shè)計(jì)培訓(xùn)中的小細(xì)節(jié)，今天UI培訓(xùn)老師給大家講講圖標(biāo)樣式：實(shí)心圖標(biāo) or 線(xiàn )性圖標(biāo)，到底那種風(fēng)格更適合用戶(hù)體驗(yàn)呢？　　在設(shè)計(jì)UI

　　鄭州UI設(shè)計(jì)培訓(xùn)中的小細(xì)節(jié)，今天UI培訓(xùn)老師給大家講講圖標(biāo)樣式：實(shí)心圖標(biāo) or 線(xiàn )性圖標(biāo)，到底那種風(fēng)格更適合用戶(hù)體驗(yàn)呢？
　　在設(shè)計(jì)UI頁(yè)面時(shí)，我們通常需要決定是使用實(shí)心圖標(biāo)還是線(xiàn )性圖標(biāo)。它們兩(liǎng)種到底哪種風(fēng)格更符合用戶(hù)體驗(yàn)呢？
UI設(shè)計(jì)培訓(xùn)
　　很多人認(rèn)為它們之間的差異僅僅是一個(gè)偏好問(wèn)題，但實(shí)際上研究表明，它們真的有所區(qū)別。
　　了解何時(shí)使用實(shí)心或線(xiàn )性圖標(biāo)可讓你的用戶(hù)輕鬆瀏覽你的產(chǎn)品。他們將能夠更快地識別你設(shè)計(jì)的圖標(biāo)並選擇正確的選項(xiàng)。
　　從多年UI教學(xué)中發(fā)現(xiàn)，圖標(biāo)樣式的確會(huì)影響任務(wù)性能。研究中主要通過(guò)識別圖標(biāo)到選擇圖標(biāo)的速度以及準(zhǔn)確性來(lái)測(cè)量任務(wù)性能。
　　實(shí)心圖標(biāo)通常情況下比線(xiàn )性圖標(biāo)更快識別，但不是絕對(duì)的。有的線(xiàn )性圖標(biāo)更容易識別，還有部分圖標(biāo)不論實(shí)心樣式還是線(xiàn )性樣式，用戶(hù)的反應(yīng)時(shí)間並沒有太大的差異。那具體是怎麼樣的呢？
　　標(biāo)誌特徵
　　圖標(biāo)通常由基本特徵和它的標(biāo)誌性特徵（即顯著特徵）組成。標(biāo)誌特徵是用戶(hù)用來(lái)識別圖標(biāo)的內(nèi)容，如果缺少這個(gè)特徵，或者設(shè)計(jì)得很不明顯，那麼圖標(biāo)將變得無(wú)法識別。
　　例如：評(píng)論氣泡圖標(biāo)的尾部是其特有的標(biāo)誌，沒有這個(gè)尾巴，它只是一個(gè)橢圓。鎖圖標(biāo)上的鑰匙孔也是它特有的標(biāo)誌，沒有鑰匙孔，很容易將圖標(biāo)誤認(rèn)為是一個(gè)手提包。同樣齒輪圖標(biāo)上的鋸齒也是其特有的標(biāo)誌，沒有它，它會(huì)看起來(lái)像一個(gè)甜甜圈。
　　研究顯示：沒有鑰匙孔的“鎖定“圖標(biāo)是最難識別出來(lái)的圖標(biāo)，錯誤率高達(dá)25%。鑰匙孔是一個(gè)重要的標(biāo)誌性特徵，沒有它，圖標(biāo)看起來(lái)會(huì)像一個(gè)手提包、錢包、甚至像是一口鍋。這些標(biāo)誌性特徵都是用戶(hù)識別圖標(biāo)的重要信息。繪製圖標(biāo)時(shí)，要確保它包含用戶(hù)識別圖標(biāo)所需的標(biāo)誌性特徵。如果圖標(biāo)看起來(lái)像是其他的東西，必須考慮為其添加額外的特徵標(biāo)誌。
　　線(xiàn )性圖標(biāo)更易識別
　　繪製圖標(biāo)除了標(biāo)誌性特徵必須突出或更容易被注意外，有時(shí)某些圖標(biāo)上的標(biāo)誌性特徵在線(xiàn )性樣式中比實(shí)心樣式更突出、明顯。
　　評(píng)論泡沫尾巴在實(shí)心填充的情況下很容易被忽略，但在描邊空心的線(xiàn )性狀態(tài)下就很明顯。垃圾桶蓋子也一樣，在實(shí)心的樣式下很難被注意到，但描邊卻更容易看到。同樣，鑰匙上牙花（鋸齒）的細(xì)節(jié)是微妙的，但鋸齒狀的邊緣在描邊的樣式上可以顯示得更加明顯。
　　例如，如果把評(píng)論、鑰匙和刪除圖標(biāo)放在手機(jī)底部標(biāo)籤欄中進(jìn)行比較，你會(huì)發(fā)現(xiàn)線(xiàn )性圖標(biāo)比實(shí)心圖標(biāo)明顯多了。它們的一些標(biāo)誌性特徵也被表現(xiàn)得更突出。
　　因此我們得出結(jié)論：當(dāng)圖標(biāo)標(biāo)誌性特徵很微妙並出現(xiàn)在形狀的邊緣時(shí)，請使用線(xiàn )性圖標(biāo)樣式。這使得其特徵更加突出，從而可以更快被用戶(hù)識別。
　　實(shí)心圖標(biāo)更易識別
　　要知道，我們之所以繪製圖標(biāo)，是為了映射現(xiàn)實(shí)世界中的物理對(duì)象，而這些物理對(duì)象多是實(shí)心的。比如“刪除”按鈕圖標(biāo)我們習(xí)慣用“垃圾桶”表示。所以其實(shí)線(xiàn )性圖標(biāo)並不是大多數(shù)人習(xí)慣看到的真實(shí)樣子，或者說(shuō)它看起來(lái)不是那麼真實(shí)甚至有點(diǎn)抽象。這也是為什麼多數(shù)情況下實(shí)心圖標(biāo)可以更快識別的原因。
　　儘管如此，用戶(hù)仍然能夠識別線(xiàn )性圖標(biāo)。只是可能識別出來(lái)的時(shí)間花費(fèi)更長(zhǎng)而已。如果產(chǎn)品強(qiáng)調(diào)用戶(hù)效率，那麼優(yōu)化這些線(xiàn )性圖標(biāo)勢(shì)在必行了。
　　該研究還發(fā)現(xiàn)，電話(huà)、剪刀、贊和工具4個(gè)圖標(biāo)在線(xiàn )性的樣式下很難識別。因為這些圖標(biāo)的輪廓樣式在其標(biāo)誌性特徵的地方，都具有狹窄的內(nèi)部間距，從而產(chǎn)生視覺噪音。
　　總而言之，對(duì)於內(nèi)部間距較窄的對(duì)象，最好使用實(shí)心圖標(biāo)。線(xiàn )性圖標(biāo)適合更簡(jiǎn)單的形狀，使得圖標(biāo)會(huì)更容易識別。
　　平分秋色
　　該研究發(fā)現(xiàn)：部分圖標(biāo)不管是實(shí)心還是線(xiàn )性樣式下，識別度幾乎一致沒有差異。例如收藏、購(gòu)物車(chē)和旗幟圖標(biāo)不論樣式如何對(duì)用戶(hù)選擇圖標(biāo)的速度和準(zhǔn)確性幾乎沒有差別。
　　這意味著這些圖標(biāo)的線(xiàn )性樣式並不會(huì)降低用戶(hù)的識別度。其原因在於：它們具有較寬的內(nèi)部間距，從而降低了視覺噪音。內(nèi)部間距越窄，產(chǎn)生的噪聲就越多，對(duì)識別的幹擾就越大。
　　底部圖標(biāo)的樣式選擇
　　對(duì)於App底部標(biāo)籤欄的圖標(biāo)，我們通常的做法是使用實(shí)心圖標(biāo)表示標(biāo)籤欄中按鈕的激活狀態(tài)，而其他未激活按鈕則保持線(xiàn )性樣式。但是這種設(shè)計(jì)實(shí)踐是落後的，應(yīng)該反其道而行之。
　　因為，當(dāng)用戶(hù)激活了某個(gè)按鈕圖標(biāo)，他們更需要關(guān)注的是那些沒有被激活的按鈕圖標(biāo)，而不是繼續(xù)關(guān)注他們已經(jīng)選擇的圖標(biāo)按鈕。所以對(duì)於未被激活的按鈕圖標(biāo)，用實(shí)心樣式效果會(huì)更好，更容易受到用戶(hù)的關(guān)注。
　　而使用線(xiàn )性圖標(biāo)表示已激活的按鈕，對(duì)比未激活的圖標(biāo)即有風(fēng)格和顏色變化，又突出了所選圖標(biāo)，同時(shí)也不會(huì)過(guò)於搶眼，掩蓋未激活按鈕的存在。
　　雖然目前國(guó)內(nèi)App底部圖標(biāo)使用這種表現(xiàn)形式的並不多，大多數(shù)還是採取比較落後的線(xiàn )性圖標(biāo)表示未激活的按鈕。但是相信隨著這項(xiàng)研究結(jié)論的深入人心，今後會(huì)越來(lái)越普遍。
　　最後聽UI設(shè)計(jì)培訓(xùn)老師怎麼說(shuō)：如果效率對(duì)用戶(hù)來(lái)說(shuō)很重要，那麼必須考慮圖標(biāo)的識別度。抑或是你想要圖標(biāo)更容易識別，那麼實(shí)心樣式的圖標(biāo)會(huì)更好，但是也會(huì)有例外。了解以上這些特殊情況後，你可以在根據(jù)產(chǎn)品的實(shí)際情況選擇線(xiàn )性圖標(biāo)和實(shí)心圖標(biāo)。
　　提示，選擇圖標(biāo)樣式時(shí)應(yīng)記住：
　　1、多數(shù)情況下，實(shí)體圖標(biāo)比線(xiàn )性圖標(biāo)更容易識別
　　2、圖標(biāo)由基本特徵和標(biāo)誌性特徵組成
　　3、若圖標(biāo)的標(biāo)誌性特徵很微妙且不夠突出，則選擇線(xiàn )性圖標(biāo)
　　4、當(dāng)圖標(biāo)內(nèi)部間距較寬時(shí)，選擇線(xiàn )性圖標(biāo)更易辨認(rèn)
　　5、當(dāng)圖標(biāo)內(nèi)部間距較窄時(shí)，選擇實(shí)心圖標(biāo)更易辨認(rèn)