四、 UI設(shè)計(jì)一致性的體現(xiàn)
五、 交互設(shè)計(jì)一致性的體現(xiàn)
一致性的字面意思和使用的場(chǎng)景不同代表的含義也會(huì)有區(qū)別,這里主要使用在UI/UX設(shè)計(jì)中。
UI/UX設(shè)計(jì)中一致性是指在整個(gè)應(yīng)用程序或網(wǎng)站中使用相同的設(shè)計(jì)元素和模式。它涉及在所有頁(yè)面和屏幕上使用相同的視覺(jué)語(yǔ)言、布局和交互,以創(chuàng)造一致且直觀的用戶(hù)體驗(yàn)。一致性有助于用戶(hù)了解如何瀏覽應(yīng)用程序或網(wǎng)站,消除困惑和沮喪,并使他們更容易學(xué)習(xí)和記住如何使用產(chǎn)品。
設(shè)計(jì)并非孤立的實(shí)踐。它與其他領(lǐng)域交織在一起,其中之一就是心理學(xué)。在設(shè)計(jì)中發(fā)揮根本作用的心理學(xué)原理是重復(fù)定律。
這一定律的起源可以追溯到 20 世紀(jì)早期,當(dāng)時(shí)德國(guó)心理學(xué)家赫爾曼·艾賓浩斯進(jìn)行了開(kāi)創(chuàng)性的研究。他的工作對(duì)理解人類(lèi)記憶具有革命性意義。艾賓浩斯最著名的貢獻(xiàn)是“遺忘曲線(xiàn)”,它表明如果不嘗試保留信息,信息會(huì)隨著時(shí)間的推移而丟失。然而,他還發(fā)現(xiàn),反復(fù)接觸信息會(huì)極大地影響我們記憶信息的能力。從本質(zhì)上講,重復(fù)可以強(qiáng)化回憶。
艾賓浩斯的重復(fù)實(shí)驗(yàn)主要關(guān)注學(xué)習(xí)和記憶的過(guò)程,但其影響遠(yuǎn)不止于此。這讓人們認(rèn)識(shí)到,重復(fù)的元素更容易被記住,從而引導(dǎo)觀眾的注意力和焦點(diǎn)。很明顯,重復(fù)可以用來(lái)引導(dǎo)行為和理解。
通過(guò)重復(fù)顏色、形狀和圖案等特定元素,設(shè)計(jì)師可以創(chuàng)造一種統(tǒng)一感和節(jié)奏感。這種重復(fù)還使設(shè)計(jì)師能夠強(qiáng)調(diào)基本元素或信息。
重復(fù)不僅僅是一種設(shè)計(jì)原則,更是生活的一個(gè)基本方面。在自然界中,重復(fù)以各種方式體現(xiàn),從雪花的對(duì)稱(chēng)性到海浪拍打海岸的韻律圖案,從貝殼的螺旋到一年四季的循環(huán)。這種自然的重復(fù)帶來(lái)了節(jié)奏、結(jié)構(gòu)和可預(yù)測(cè)性,創(chuàng)造了一種舒適和熟悉的感覺(jué)。
人類(lèi)是自然的一部分,天生就能夠識(shí)別和響應(yīng)這些模式。我們的大腦是出色的模式識(shí)別機(jī)器,我們傾向于認(rèn)為重復(fù)的模式令人感到舒適和熟悉。這種認(rèn)知特征解釋了為什么設(shè)計(jì)中的重復(fù)模式(無(wú)論是在數(shù)字界面、實(shí)體產(chǎn)品、建筑還是營(yíng)銷(xiāo)中)會(huì)引起我們的共鳴。
在 iOS 的設(shè)計(jì)指南中,一致性被視為讓設(shè)計(jì)融入 iOS 生態(tài)的關(guān)鍵,它幫助用戶(hù)在不同應(yīng)用間建立起一種熟悉感。遵循規(guī)范的一致性可以「help your design feel at home in iOS」,保持一致性是為用戶(hù)帶來(lái)產(chǎn)品愉悅感的重要方式。
在經(jīng)典交互設(shè)計(jì)原則中,「一致性」一直是重要的設(shè)計(jì)準(zhǔn)則。在幾乎可以稱(chēng)為「設(shè)計(jì)師必讀」的雅各布·尼爾森的十條可用性原則中,一致性(Consistency and standards)位列第四,原則建議設(shè)計(jì)者在界面和交互上遵循既定的規(guī)則,無(wú)論是在應(yīng)用內(nèi)部還是跨平臺(tái)之間。
在具體的執(zhí)行中,內(nèi)部一致性通常指應(yīng)用內(nèi)應(yīng)當(dāng)使用統(tǒng)一的視覺(jué)風(fēng)格和交互語(yǔ)言,相同的功能和操作應(yīng)該在體驗(yàn)上保持一致。而外部一致性則更強(qiáng)調(diào)用戶(hù)應(yīng)該遵循平臺(tái)和系統(tǒng)的設(shè)計(jì)規(guī)范,保持用戶(hù)在同一平臺(tái)不同應(yīng)用間體驗(yàn)的相似性。
一致性在UI/UX(用戶(hù)界面/用戶(hù)體驗(yàn))中非常重要,因?yàn)樗鼘?duì)于提供良好的用戶(hù)體驗(yàn)和用戶(hù)界面的可用性至關(guān)重要。下面詳細(xì)說(shuō)明一致性的幾個(gè)重要原因:
1、 用戶(hù)學(xué)習(xí)曲線(xiàn):
一致的UI/UX設(shè)計(jì)可以降低用戶(hù)的學(xué)習(xí)曲線(xiàn)。當(dāng)用戶(hù)在應(yīng)用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時(shí),他們可以快速理解并準(zhǔn)確預(yù)測(cè)如何與界面進(jìn)行交互。這減少了用戶(hù)的混淆和困惑,提高了他們的效率和滿(mǎn)意度。
一致性使用戶(hù)界面更加易于使用。當(dāng)用戶(hù)在不同的頁(yè)面或功能之間找到相似的設(shè)計(jì)元素和交互模式時(shí),他們可以輕松地將已有的知識(shí)和經(jīng)驗(yàn)應(yīng)用于新的情境中。這種一致性幫助用戶(hù)快速完成任務(wù),減少錯(cuò)誤和迷失,提供更好的導(dǎo)航和流暢的體驗(yàn)。
一致的UI/UX設(shè)計(jì)有助于樹(shù)立品牌形象和增強(qiáng)品牌認(rèn)可度。通過(guò)在不同的渠道和平臺(tái)上保持一致的設(shè)計(jì)元素、標(biāo)識(shí)和視覺(jué)風(fēng)格,品牌可以建立起獨(dú)特而可識(shí)別的形象。用戶(hù)在不同的觸點(diǎn)上都能感受到品牌的一致性,從而增加品牌的信任和忠誠(chéng)度。
一致性直接影響用戶(hù)的滿(mǎn)意度。當(dāng)用戶(hù)在使用應(yīng)用程序或網(wǎng)站時(shí)感受到一致的設(shè)計(jì)和交互方式時(shí),他們會(huì)感到更加舒適和自信。一致性傳遞了專(zhuān)業(yè)和質(zhì)量的信號(hào),讓用戶(hù)感到被關(guān)注和重視。這種積極的用戶(hù)體驗(yàn)有助于提升用戶(hù)滿(mǎn)意度,并促使他們持續(xù)使用和推薦你的產(chǎn)品或服務(wù)。
a、例如紅綠燈,在學(xué)習(xí)駕照或老師教學(xué)時(shí)會(huì)統(tǒng)一講解紅燈停,綠燈行。
b、向左向右箭頭符號(hào)的使用,在日常生活中都會(huì)保持一致。
c、我們乘坐地鐵時(shí),地鐵的線(xiàn)路圖也會(huì)保持一致性,每個(gè)站的點(diǎn)大小,文字,到站和未到站以及行駛過(guò)的站點(diǎn)都有清晰統(tǒng)一的設(shè)計(jì)和交互操作。
顏色是一種物理現(xiàn)象和感官體驗(yàn),是光波在人眼視網(wǎng)膜上的反射或吸收所形成的視覺(jué)效果。
設(shè)計(jì)中的顏色選擇代表了一個(gè)項(xiàng)目的品牌,例如常見(jiàn)的餓了么藍(lán),美團(tuán)的黃,京東的紅等等,顏色的一致性有助于營(yíng)造良好的視覺(jué)體驗(yàn),強(qiáng)化品牌形象,提升可用性和無(wú)障礙性,最終改善用戶(hù)的整體交互感受。這對(duì)于產(chǎn)品的成功至關(guān)重要。在設(shè)計(jì)時(shí)顏色(品牌色)會(huì)延續(xù)到按鈕,圖標(biāo),字體、標(biāo)簽,背景,banner等模塊使用。
字體是一種特定的文字樣式,它描述了文字的形狀、大小、粗細(xì)、間距等視覺(jué)特征。
字體是設(shè)計(jì)中非常重要的元素之一,不同類(lèi)型的字體,字體的粗細(xì),有襯線(xiàn)字體和有襯線(xiàn)字體,字體的字重等,這些不一致會(huì)造成頁(yè)面混亂,字體的選擇和使用會(huì)對(duì)用戶(hù)的視覺(jué)體驗(yàn)、信息感知、品牌聯(lián)系和情感體驗(yàn)產(chǎn)生重要影響。
開(kāi)發(fā)實(shí)現(xiàn)上如果字體使用較多,會(huì)影響加載速度,沒(méi)有統(tǒng)一的字體制定規(guī)則后期更新迭代也會(huì)比較繁瑣,造成資源浪費(fèi)。
圖標(biāo)是一種簡(jiǎn)化的、具有視覺(jué)表現(xiàn)力的符號(hào)圖形,在用戶(hù)界面設(shè)計(jì)、信息傳達(dá)等領(lǐng)域廣泛應(yīng)用。
在眾多APP中,常使用APP的你肯定可以感受到,圖標(biāo)除了準(zhǔn)確的表達(dá)某個(gè)含義,還需要在設(shè)計(jì)時(shí)保持一致性,圖標(biāo)的大小,設(shè)計(jì)的風(fēng)格例如線(xiàn)型圖標(biāo)、填充圖標(biāo)、簡(jiǎn)約圖標(biāo)、立體圖標(biāo)、卡通圖標(biāo)等,如果這些圖標(biāo)風(fēng)格進(jìn)行混合使用就會(huì)造成混亂,影響用戶(hù)體驗(yàn),看起來(lái)很不專(zhuān)業(yè)也會(huì)影響用戶(hù)使用時(shí)對(duì)于安全性的擔(dān)憂(yōu)。
按鈕是一種常見(jiàn)的交互界面元素,用于觸發(fā)某種操作或功能。
設(shè)計(jì)中的按鈕有很多樣式,因?yàn)轫?xiàng)目類(lèi)型的不同按鈕樣式也不同,按鈕的樣式有圓形按鈕,矩形按鈕,圓角矩形按鈕,菱形按鈕等,同一個(gè)項(xiàng)目中建議使用統(tǒng)一的按鈕樣式,除了可以體現(xiàn)專(zhuān)業(yè)性,還可以讓用戶(hù)增加信任度,按鈕樣式使用很多,用戶(hù)除了使用體驗(yàn)不友好,還會(huì)覺(jué)得是不是跳出了這個(gè)產(chǎn)品去到了另一個(gè)地方。
排版是指在印刷或數(shù)字媒體中,對(duì)文本、圖像等內(nèi)容進(jìn)行有規(guī)則的布局和格式化的過(guò)程。
設(shè)計(jì)中排版的一致性,使用戶(hù)能夠快速適應(yīng)和理解界面的結(jié)構(gòu),降低學(xué)習(xí)成本,用戶(hù)對(duì)于熟悉的排版模式產(chǎn)生更強(qiáng)烈的歸屬感和安全感,使內(nèi)容更易讀,用戶(hù)可以依照熟悉的視覺(jué)動(dòng)線(xiàn)快速找到所需信息,提高信息獲取效率。
根據(jù)文字意思就是用戶(hù)才操作時(shí)候的流程保持一致,操作保持一致,例如大家常見(jiàn)的下單購(gòu)買(mǎi)商品流程,
用戶(hù)在購(gòu)買(mǎi)商品時(shí):點(diǎn)擊商品——商品詳情——付款購(gòu)買(mǎi),其他商品也應(yīng)該是這樣流程,
如果每個(gè)商品流程不同就會(huì)很亂,例如:
點(diǎn)擊A商品————商品詳情——付款購(gòu)買(mǎi);
點(diǎn)擊B商品——付款購(gòu)買(mǎi)——查看商品詳情;
點(diǎn)擊C商品——同類(lèi)商品列表——商品詳情——付款購(gòu)買(mǎi),
這樣就會(huì)很亂,用戶(hù)不知道點(diǎn)擊下一個(gè)商品會(huì)是什么樣子。
1、APP中的視頻瀏覽是上下滑動(dòng),進(jìn)入新的模塊后視頻瀏覽變成了左右滑動(dòng)。
2、需要確認(rèn)某些操作時(shí),確認(rèn)按鈕一會(huì)在右側(cè),一會(huì)確認(rèn)又在左側(cè)。
用戶(hù)在操作時(shí)會(huì)除了體驗(yàn)很亂,也很難培養(yǎng)用戶(hù)習(xí)慣。
文案和標(biāo)點(diǎn)符號(hào)的一致比較好理解,例如常見(jiàn)的輸入框,“請(qǐng)您輸入帳號(hào)”,“請(qǐng)輸入你的密碼”,同一頁(yè)面場(chǎng)景下文案和稱(chēng)呼不統(tǒng)一,會(huì)造成用戶(hù)操作遲疑,是不是這個(gè)不重要才用了“你”,重要的才用“您”,為了避免用戶(hù)進(jìn)行不必要的思考文案保持一致,符號(hào)亦是如此。
當(dāng)我們看到下一步按鈕時(shí),有些地方交互是進(jìn)入了新的頁(yè)面,有的是分步式使用。建議使用一種保持統(tǒng)一,避免用戶(hù)產(chǎn)生誤導(dǎo)。
操作反饋后的彈窗,相同功能反饋的彈窗樣式不一致:一會(huì)是圖文彈窗,一會(huì)純文字提示,用戶(hù)也會(huì)很亂,包括交互時(shí)出現(xiàn)的樣式也需要保持一致,劇中或從下向上彈出。
一致性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悅的用戶(hù)體驗(yàn)。通過(guò)保持設(shè)計(jì)元素、布局和交互方式的一致性,可以降低用戶(hù)的認(rèn)知負(fù)荷,提高用戶(hù)的學(xué)習(xí)效率,增強(qiáng)品牌形象,提升用戶(hù)滿(mǎn)意度,并最終實(shí)現(xiàn)更好的業(yè)務(wù)成果,詳細(xì)分為以下七點(diǎn):