做UI設(shè)計(jì)怎么能忽略設(shè)計(jì)的一致性

　　隨著現(xiàn)代世界的奔忙和周?chē)罅啃畔⒌牟豢爸刎?fù)，人們傾向于選擇簡(jiǎn)單，有時(shí)甚至不考慮這種選擇。為了減輕認(rèn)知負(fù)擔(dān)，用戶(hù)尋求快捷方式，模式和模型，這些快捷方式，模式和模型使與數(shù)字世界和眾多通信渠道的交互變得輕松而直接。在用戶(hù)體驗(yàn)設(shè)計(jì)中，支持該目標(biāo)的因素之一是一致性，做UI設(shè)計(jì)怎么能忽略設(shè)計(jì)的一致性呢?我們?cè)撊绾卧谠O(shè)計(jì)的應(yīng)用程序或網(wǎng)站中實(shí)現(xiàn)一致性呢?
 

　　無(wú)論交流的點(diǎn)或渠道如何，產(chǎn)品以相同或相似的方式與用戶(hù)進(jìn)行交流。就用戶(hù)體驗(yàn)而言，這意味著相似的元素在外觀和功能上均相似，從而減輕了認(rèn)知負(fù)擔(dān)，并使交互更加流暢和直觀?？紤]到當(dāng)今人們信息過(guò)多的事實(shí)，他們傾向于選擇易于理解和交互的產(chǎn)品。此外，一致性在產(chǎn)品外觀和工作方式上為和諧的感覺(jué)奠定了可靠的基礎(chǔ)。和諧永遠(yuǎn)是我們擁有的任何經(jīng)驗(yàn)中不可或缺的一部分。一致性使用戶(hù)界面可預(yù)測(cè)和可學(xué)習(xí)，而品牌因此而獲得了堅(jiān)實(shí)統(tǒng)一的展示和性能。
 

　　用戶(hù)不必懷疑不同的詞語(yǔ)，情況或動(dòng)作是否意味著同一件事。就像視頻播放器使用向上/向下箭頭鍵增加或減少音量。一致的用戶(hù)體驗(yàn)設(shè)計(jì)方法帶來(lái)以下好處：對(duì)于新用戶(hù)，界面變得更容易學(xué)習(xí);用戶(hù)更少的困惑導(dǎo)致更少的錯(cuò)誤發(fā)生，這樣可以減輕認(rèn)知負(fù)擔(dān)，節(jié)省用戶(hù)的時(shí)間和精力;一致性支持網(wǎng)站或應(yīng)用程序的強(qiáng)大品牌形象。
 

　　因此，一致性連接不同 UI元素進(jìn)入可預(yù)測(cè)和清晰互動(dòng)的系統(tǒng)。實(shí)際上，這也是我們?cè)谖锢硎澜缰兴龅氖虑?，目的是使我們的日常生活更輕松，并避免一次又一次地專(zhuān)注于相同的操作。例如，我們所有人都將碗碟和餐具保存在我們的廚房中，因此，即使是初次來(lái)到某人的家中，您也不會(huì)嘗試在浴室中搜尋杯子和勺子，因?yàn)檫@是已知的并遵循的模式大多數(shù)人。
 

　　從影響因素的角度來(lái)看，一致性可以是外觀和功能。
 

　　視覺(jué)一致性是基于使相似的對(duì)象或元素看起來(lái)相同。明確元素之間的連接并建立堅(jiān)實(shí)的視覺(jué)層次至關(guān)重要。它與圖標(biāo)，字體，圖像大小，按鈕，標(biāo)簽和其他重要內(nèi)容有關(guān)。例如，當(dāng)您組織文章時(shí)，所有類(lèi)型的文本元素(標(biāo)題，子標(biāo)題，主要正文，引號(hào)等)都應(yīng)使用相同的印刷表示系統(tǒng)可掃描的并感到有條理。如果您創(chuàng)建的博客或媒體具有多種類(lèi)型的帖子，則它們必須堅(jiān)持相同的視覺(jué)表現(xiàn)系統(tǒng)，以便可以將它們視為一個(gè)整體出版物，而不是一堆亂七八糟的帖子。
 

　　從聯(lián)系和規(guī)模的角度來(lái)看，一致性可以是內(nèi)部的和外部的。
 

　　內(nèi)部一致性是指界面或品牌的不同部分，它們的外觀和行為就像一個(gè)清晰的系統(tǒng)。例如，當(dāng)您在產(chǎn)品的不同頁(yè)面或屏幕上以相同的方式對(duì)所有CTA按鈕進(jìn)行著色和設(shè)計(jì)時(shí)，用戶(hù)將能夠在用戶(hù)使用過(guò)程的任何步驟中快速區(qū)分它們。
 

　　外部一致性是指界面的某些部分，這些部分的外觀和行為類(lèi)似于大多數(shù)此類(lèi)產(chǎn)品的典型模式。舉例來(lái)說(shuō)，當(dāng)您甚至在銷(xiāo)售非有形產(chǎn)品的網(wǎng)站上使用購(gòu)物車(chē)時(shí)，或者在文本鏈接下劃線(xiàn)時(shí)，都會(huì)向用戶(hù)暗示他們可以點(diǎn)擊。
 

　　實(shí)施可識(shí)別的模式，用戶(hù)進(jìn)入您的應(yīng)用程序或網(wǎng)站之前，已經(jīng)有大量的行為模式和習(xí)慣。這套知識(shí)是基于他們以前的經(jīng)驗(yàn)，并取決于設(shè)計(jì)人員如何使用它，這可能會(huì)幫助或破壞用戶(hù)體驗(yàn)。在數(shù)字產(chǎn)品流行之前，對(duì)于統(tǒng)計(jì)數(shù)據(jù)和圖表，大多數(shù)用戶(hù)將紅色與負(fù)余額或減少相關(guān)聯(lián)，將綠色與正余額或增加相關(guān)聯(lián)。使用不同年齡和國(guó)籍的成千上萬(wàn)的人都知道的這種模式，您可以支持產(chǎn)品的外部一致性，并易于理解數(shù)據(jù)可視化。同樣，將接受來(lái)電的按鈕涂成綠色并將拒絕來(lái)電的按鈕涂成紅色可降低用戶(hù)的認(rèn)知負(fù)擔(dān)，因?yàn)樗麄円呀?jīng)習(xí)慣了這種模型，并且無(wú)需考慮什么紐扣 打。
 

　　應(yīng)對(duì)個(gè)人挑戰(zhàn)的應(yīng)用程序同樣，這一點(diǎn)可能涉及內(nèi)部一致性，這對(duì)于具有大量屏幕和交互功能的復(fù)雜產(chǎn)品尤其重要。當(dāng)你登上用戶(hù)，教育他們?nèi)绾翁幚斫缑?，以及使用從一個(gè)頁(yè)面到另一頁(yè)面的一致的交互集，他們不需要專(zhuān)注于如何處理每個(gè)新頁(yè)面，因此他們覺(jué)得界面非常直觀。但是，如果破壞了這種一致性，用戶(hù)將需要時(shí)間和精力來(lái)了解正在發(fā)生的事情。
 

　　當(dāng)您在大多數(shù)頁(yè)面上使用帶有垂直滾動(dòng)條的圖像庫(kù)，然后在另一頁(yè)面上對(duì)它們使用不太明顯的水平滑塊時(shí)，則可能使用戶(hù)在內(nèi)容上感到掙扎或完全錯(cuò)過(guò)?；蚣僭O(shè)您長(zhǎng)時(shí)間在屏幕底部使用加號(hào)按鈕，而用戶(hù)習(xí)慣于在那里找到它，但隨后將其移至頂部并隱藏在漢堡菜單中?；蛘哒f(shuō)，您使電話(huà)號(hào)碼在某些屏幕上可以點(diǎn)擊和交互，而在其他屏幕上則不交互，盡管到處看起來(lái)都一樣。那是不一致的。當(dāng)然，在這種情況下，用戶(hù)將需要一些時(shí)間從一種模式切換到另一種模式。這種體驗(yàn)可能會(huì)很煩人，因此請(qǐng)注意使用工具提示或其他技術(shù)對(duì)其進(jìn)行平滑處理。
 

　　當(dāng)然，這并不意味著您只需要遵循已知的模式。總是有創(chuàng)意和開(kāi)箱即用的解決方案的空間。只需記住要考慮他們與目標(biāo)用戶(hù)已經(jīng)知道和使用的內(nèi)容之間的聯(lián)系，如果這種聯(lián)系薄弱，請(qǐng)考慮如何為用戶(hù)提供支持，而不是將設(shè)計(jì)創(chuàng)意轉(zhuǎn)化為用戶(hù)的煩惱。此外，為交互模式的邏輯性和相似性而努力-即使它們?cè)谒挟a(chǎn)品屏幕上都不常見(jiàn)，但卻是一致的，但習(xí)慣它們的過(guò)程將變得容易快捷。

 

　　家具和室內(nèi)裝飾網(wǎng)站的概念對(duì)UI設(shè)計(jì)中的UI組件的實(shí)驗(yàn)要謹(jǐn)慎，出于一致性考慮，對(duì)UI元素進(jìn)行的任何實(shí)驗(yàn)都應(yīng)考慮兩次。對(duì)于成千上萬(wàn)個(gè)應(yīng)用程序和網(wǎng)站中使用的基本元素而言，尤其如此。人們非常了解他們，因此在大多數(shù)情況下，他們甚至不需要思考太多。
 

　　無(wú)論與網(wǎng)站或應(yīng)用程式使用者打交道，當(dāng)他們需要尋找東西時(shí)，都會(huì)尋找標(biāo)有「 搜索按鈕或字段。如果您將搜索功能隱藏在另一張圖片或圖標(biāo)，這可能會(huì)破壞體驗(yàn)并迷惑用戶(hù)。他們將不嘗試與內(nèi)容進(jìn)行交互，而是嘗試查找要搜索的字段?；蛘?，試圖找到聯(lián)系方式，大多數(shù)網(wǎng)站訪(fǎng)問(wèn)者將在頁(yè)面頂部或聯(lián)系我們數(shù)據(jù)的頁(yè)腳中找到“聯(lián)系我們”頁(yè)面或表單的鏈接;考慮到這一點(diǎn)，您可以捷徑轉(zhuǎn)化并獲得滿(mǎn)意的客戶(hù)。這同樣適用于其他基本功能和廣泛使用的功能，例如書(shū)簽，購(gòu)物車(chē)，聊天和通訊程序，將項(xiàng)目保存到愿望清單，撥打電話(huà)，添加新項(xiàng)目等等。如果您決定嘗試使用它們的外觀，位置和性能，請(qǐng)對(duì)其進(jìn)行良好的測(cè)試，并確保用戶(hù)能夠與它們進(jìn)行交互。

 

　　任務(wù)跟蹤器應(yīng)用思維排版和顏色相似
 

　　在視覺(jué)一致性的影響最大的因素中，UX設(shè)計(jì)人員經(jīng)常會(huì)提到 顏色 和 版式。毫無(wú)疑問(wèn)，它們都有影響視覺(jué)風(fēng)格，情感背景和用戶(hù)行為的能力。對(duì)于視覺(jué)性能至關(guān)重要，如果一致使用，兩者都可以使用戶(hù)感覺(jué)到產(chǎn)品的整體性和統(tǒng)一性。這就是為什么應(yīng)該有一個(gè)經(jīng)過(guò)深思熟慮的設(shè)計(jì)系統(tǒng)，為文本內(nèi)容和布局元素使用特定的字體和顏色。這樣，網(wǎng)站或應(yīng)用程序?qū)⒏杏X(jué)清晰，用戶(hù)無(wú)需習(xí)慣從一個(gè)屏幕到另一個(gè)屏幕的新外觀和組合。
 

　　糖果的網(wǎng)站設(shè)計(jì)建立具有視覺(jué)效果的系統(tǒng)
 

　　圖像不僅在增加界面的美感和樣式方面發(fā)揮著重要作用;它們比文本更快，更容易被感知，它們還支持可用性，放大消息，以及花費(fèi)2美分來(lái)設(shè)置所需的心情和氛圍。但是，這并不意味著設(shè)計(jì)師只是拍攝他們喜歡的不同圖像并將其放入界面中。除了排版外，圖像還必須呈現(xiàn)一個(gè)系統(tǒng)，而不僅僅是隨機(jī)集。在這種情況下，它們成為提供一致的用戶(hù)體驗(yàn)的另一個(gè)因素。
 

　　圖片來(lái)源結(jié)構(gòu)化后，處理任何數(shù)據(jù)始終總是比較容易。甚至小說(shuō)書(shū)也提出了有組織的章節(jié)體系，那么任何一種界面如何避免這種現(xiàn)象呢?使內(nèi)容的結(jié)構(gòu)合理，使用戶(hù)可以將精力集中在信息上，而無(wú)需進(jìn)行試圖安排和理解連接的初步工作。而且，不應(yīng)該針對(duì)特定的屏幕或頁(yè)面，而應(yīng)針對(duì)整個(gè)網(wǎng)站或應(yīng)用進(jìn)行此操作，以使其在任何交互點(diǎn)上都感覺(jué)簡(jiǎn)單，一致。
 

　　做UI設(shè)計(jì)一定不能夠忽略設(shè)計(jì)的一致性，保持設(shè)計(jì)的一致性對(duì)用戶(hù)體驗(yàn)感有很大的提升，用戶(hù)的認(rèn)知大都已經(jīng)固有化，很難改變，所以不要試圖改變固有認(rèn)知，作為UI設(shè)計(jì)師首先要考慮用戶(hù)的感受，用戶(hù)接受你的設(shè)計(jì)才有價(jià)值有意義。