在唐·諾曼的書(shū)《情感設(shè)計(jì)：為什么我們愛(ài)（或恨）日常事物》中摊册，唐諾曼描述了一項(xiàng)研究碍岔，他發(fā)現(xiàn)“……[a] 系統(tǒng)的美學(xué)程度影響了使用后對(duì)美學(xué)和可用性的感知舔痪，而實(shí)際可用性的程度沒(méi)有這樣的影響司倚±嘣纾”?換句話(huà)說(shuō)媚媒，視覺(jué)設(shè)計(jì)對(duì)整體體驗(yàn)的影響與實(shí)際可用性一樣大。
其實(shí)是沒(méi)有那么絕對(duì)涩僻，視覺(jué)不管在工業(yè)產(chǎn)品上還是互聯(lián)網(wǎng)產(chǎn)品中都會(huì)對(duì)整體體驗(yàn)有一定的影響度缭召，用戶(hù)體驗(yàn)是用戶(hù)使用產(chǎn)品的感受，用戶(hù)的感受會(huì)受到產(chǎn)品本身的功能逆日、外觀以及用戶(hù)當(dāng)時(shí)所處的環(huán)境嵌巷。
例如我們?nèi)粘Ｊ褂玫谋樱藭r(shí)的你需要一個(gè)既能裝2L水又好看的杯子室抽，當(dāng)從網(wǎng)上購(gòu)買(mǎi)的杯子到貨時(shí)發(fā)現(xiàn)杯子比預(yù)期的少裝0.5L水搪哪，而且外表上也沒(méi)有圖片上那么好看，那么此時(shí)估計(jì)大部分人都想去退貨或者投訴坪圾。
或者說(shuō)杯子水裝的夠多晓折，但是外觀上想要的是個(gè)商務(wù)風(fēng)格，但是商家發(fā)錯(cuò)了你拿到一個(gè)上面布滿(mǎn)卡通圖案的杯子兽泄，這時(shí)大部分人的內(nèi)心估計(jì)也是想去找商家理論漓概。
用戶(hù)的體驗(yàn)是會(huì)受到各種原因所影響，一個(gè)小小的錯(cuò)誤亦或者是跟用戶(hù)的預(yù)期落差太大已日，都會(huì)影響用戶(hù)的體驗(yàn)垛耳，所以視覺(jué)設(shè)計(jì)對(duì)用戶(hù)的體驗(yàn)是既存在也合理只是它可能沒(méi)有產(chǎn)品功能上的影響那么大。
在本文中將講解UI設(shè)計(jì)中如何避免誤導(dǎo)信息，誤導(dǎo)到信息對(duì)體驗(yàn)的影響
什么是誤導(dǎo)信息
誤導(dǎo)信息其實(shí)就是產(chǎn)品傳達(dá)的表意與用戶(hù)看到后理解上有差異堂鲜，像圖標(biāo)栈雳、文案、交互反饋等等都會(huì)出現(xiàn)誤導(dǎo)的情況缔莲。
誤導(dǎo)信息影響體驗(yàn)
當(dāng)我們?cè)邳c(diǎn)擊一個(gè)鏈接哥纫、按鈕或者圖像時(shí)怎么點(diǎn)都沒(méi)有反饋，我們可能會(huì)以為是網(wǎng)絡(luò)問(wèn)題痴奏，最后卻發(fā)現(xiàn)產(chǎn)品功能上本身上就不可點(diǎn)擊蛀骇，但是在視覺(jué)上讓人誤以為可以點(diǎn)擊，這就很直接的影響到了用戶(hù)體驗(yàn)读拆。
設(shè)計(jì)者如何發(fā)現(xiàn)問(wèn)題
當(dāng)我們以上帝視角去觀察產(chǎn)品時(shí)擅憔，如何發(fā)現(xiàn)問(wèn)題呢？我這里推薦用數(shù)據(jù)畫(huà)板檐晕、頁(yè)面熱圖等工具去發(fā)現(xiàn)問(wèn)題暑诸，當(dāng)新上的功能頁(yè)面發(fā)現(xiàn)數(shù)據(jù)異常時(shí)最簡(jiǎn)單最快的方式就可以去通過(guò)熱圖發(fā)現(xiàn)（設(shè)計(jì)師最快的方法，像發(fā)現(xiàn)策略問(wèn)題辟灰、功能問(wèn)題等就不推薦了大多都不在設(shè)計(jì)師范疇內(nèi)）个榕。
下圖中是一個(gè)社區(qū)的頁(yè)面，這里做了一個(gè)虛擬的熱力圖芥喇，那么作為設(shè)計(jì)者如何發(fā)現(xiàn)問(wèn)題西采，假設(shè)這里內(nèi)容里的《今日娛樂(lè)圈》不可點(diǎn)擊，產(chǎn)品功能上不支持继控，那么從熱力圖上可以看出械馆，用戶(hù)點(diǎn)擊《今日娛樂(lè)圈》的次數(shù)跟關(guān)注的次數(shù)相等，那么代表著視覺(jué)上這里的信息傳達(dá)則誤導(dǎo)了用戶(hù)湿诊，導(dǎo)致用戶(hù)認(rèn)知錯(cuò)誤狱杰，并且會(huì)間接影響其他關(guān)鍵入口的點(diǎn)擊。
對(duì)產(chǎn)品數(shù)據(jù)的影響
當(dāng)前期沒(méi)有發(fā)現(xiàn)問(wèn)題時(shí)厅须，設(shè)計(jì)者通過(guò)看熱力圖去進(jìn)行數(shù)據(jù)分析仿畸，則會(huì)導(dǎo)致數(shù)據(jù)分析不準(zhǔn)確以及后續(xù)的產(chǎn)品策略方面可能產(chǎn)生偏移。
誤導(dǎo)信息有哪些維度
除了上面的例子在做頁(yè)面設(shè)計(jì)時(shí)則需要避免朗和，對(duì)用戶(hù)產(chǎn)生誤導(dǎo)的因素還有許多下面逐個(gè)來(lái)看错沽。
誤導(dǎo)性文本或UI元素
多年來(lái)，某些 UI 設(shè)計(jì)選擇變得越來(lái)越普遍眶拉，有些已經(jīng)達(dá)到了成為既定設(shè)計(jì)慣例的地步千埃，偏離這些約定成俗的設(shè)計(jì)方式可能會(huì)給用戶(hù)體驗(yàn)上帶來(lái)影響，因?yàn)橛脩?hù)已經(jīng)被國(guó)內(nèi)眾多產(chǎn)品培養(yǎng)出一定的習(xí)慣忆植，例如放可，帶下劃線(xiàn)的文本通常被理解為一個(gè)鏈接谒臼，因此用戶(hù)在使用時(shí)會(huì)嘗試點(diǎn)擊它，當(dāng)該段文字具有下劃線(xiàn)但是卻不支持點(diǎn)擊可能會(huì)導(dǎo)致用戶(hù)體驗(yàn)與期望不匹配耀里，從而引起用戶(hù)連續(xù)點(diǎn)擊蜈缤，最終造成影響用戶(hù)體驗(yàn)的因素。
響應(yīng)緩慢且缺乏反饋
如果用戶(hù)單擊或點(diǎn)按某個(gè)元素但沒(méi)有快速收到反饋冯挎，用戶(hù)可能會(huì)反復(fù)單擊以確認(rèn)單擊是否有效底哥，在這些情況下用戶(hù)需要看到正確的加載消息或其他一些視覺(jué)性的反饋，這樣能夠幫助用戶(hù)緩解焦慮情緒房官，避免用戶(hù)流失趾徽。
錯(cuò)誤死鏈接和不完整元素
如果通常可以交互的元素突然變得無(wú)響應(yīng)翰守，則用戶(hù)可能會(huì)以粗暴的方式做出響應(yīng)孵奶，例如多次點(diǎn)擊該元素或者某個(gè)位置進(jìn)行嘗試，我們?cè)谧龅臅r(shí)候需要確保元素和鏈接的功能性潦俺，以及視覺(jué)上的表意拒课，這點(diǎn)在用戶(hù)使用體驗(yàn)上影響比較大徐勃。
下圖中的直播列表“標(biāo)簽”在視覺(jué)上以多色形式展示事示，在用戶(hù)認(rèn)知中多色標(biāo)簽即可以點(diǎn)擊進(jìn)入此標(biāo)簽下的內(nèi)容頁(yè)，當(dāng)此處無(wú)法點(diǎn)擊時(shí)用戶(hù)就會(huì)產(chǎn)生疑惑為什么不能跳轉(zhuǎn)僻肖、為什么點(diǎn)了沒(méi)反應(yīng)等肖爵。
另一個(gè)產(chǎn)品的頁(yè)面中的“勛章墻”元素同樣有這個(gè)問(wèn)題，從價(jià)值上來(lái)看勛章墻在頁(yè)面中核心位置主要目的是希望用戶(hù)能夠直觀看到自己擁有多少勛章臀脏，從而產(chǎn)生成就感劝堪，對(duì)于勛章這種視覺(jué)表現(xiàn)較強(qiáng)的元素，應(yīng)當(dāng)放大去凸顯其視覺(jué)價(jià)值揉稚，從視覺(jué)的維度去激起用戶(hù)的欲望秒啦。
標(biāo)題不明確或者導(dǎo)航混亂
對(duì)于產(chǎn)品來(lái)講一般用戶(hù)分為有目標(biāo)、無(wú)目標(biāo)兩種搀玖，對(duì)于有目標(biāo)的用戶(hù)在使用產(chǎn)品時(shí)希望能夠在最快的時(shí)間找到自己想要找到內(nèi)容余境，而無(wú)目標(biāo)的用戶(hù)則需要產(chǎn)品向用戶(hù)展示時(shí)，需要把重點(diǎn)功能內(nèi)容傳遞給用戶(hù)灌诅，讓用戶(hù)盡快的使用起來(lái)芳来，如果產(chǎn)品的標(biāo)題導(dǎo)航在視覺(jué)上就混亂不堪，沒(méi)有任何層級(jí)而言就會(huì)導(dǎo)致兩種用戶(hù)在使用效率上大大降低猜拾，體驗(yàn)相對(duì)也較差即舌。
如果產(chǎn)品內(nèi)的標(biāo)題導(dǎo)航文案等傳遞的信息有誤，那么會(huì)大概率造成用戶(hù)誤操作挎袜，使用路徑上也會(huì)降低效率顽聂。
如何避免這些問(wèn)題
統(tǒng)一的文字規(guī)范
在對(duì)一些關(guān)鍵信息或者反饋信息進(jìn)行文案描述時(shí)建議使用比較易于理解的話(huà)術(shù)肥惭，這樣在基礎(chǔ)理解上不會(huì)造成誤解，在進(jìn)一步可以讓這些話(huà)術(shù)更具有情感化紊搪、人性化务豺。
優(yōu)化加載速度
有人說(shuō)加載速度取決于技術(shù)和用戶(hù)的網(wǎng)絡(luò)設(shè)計(jì)能起到什么作用呢？還真能嗦明，在做動(dòng)效或者復(fù)雜反饋動(dòng)效時(shí)笼沥，常用的格式即為GIF、json娶牌、pag奔浅、svga這4種格式，在做復(fù)雜的動(dòng)效時(shí)首先排除gif文件诗良，內(nèi)存上它隨便做一下都幾十kb汹桦，質(zhì)量上也相對(duì)較差一般不建議使用，后面三種格式各有各的優(yōu)勢(shì)鉴裹，從本質(zhì)上都能夠避免內(nèi)存過(guò)大導(dǎo)致加載過(guò)慢舞骆。
統(tǒng)一的設(shè)計(jì)規(guī)范
在設(shè)計(jì)產(chǎn)品的初期就要考慮設(shè)計(jì)規(guī)范的問(wèn)題，規(guī)范決定著產(chǎn)品未來(lái)的延展性径荔、一致性督禽、嚴(yán)謹(jǐn)性、體驗(yàn)程度等总处，我個(gè)人在做產(chǎn)品設(shè)計(jì)時(shí)在做第一個(gè)頁(yè)面的時(shí)候就習(xí)慣去思考產(chǎn)品未來(lái)的方向以及規(guī)范需要規(guī)范到什么樣的范圍狈惫，規(guī)范可用持續(xù)性有多久等等，總之前期思考的維度多一點(diǎn)鹦马，后期設(shè)計(jì)時(shí)避坑就會(huì)多一點(diǎn)胧谈，同樣規(guī)范的完善度和準(zhǔn)確性決定著設(shè)計(jì)的頁(yè)面是否會(huì)出現(xiàn)前面講的問(wèn)題。
