為什么大多數(shù)人推崇的設(shè)計(jì)一致性,不一定好用?
一、一致性的重要性
回顧我成長(zhǎng)過(guò)程中聽(tīng)到的謊言,有幾個(gè)令人印象深刻...
比如,奶奶會(huì)告訴我打開(kāi)一罐漢堡王的《捉鬼敢死隊(duì) 2》品牌的飲料,會(huì)有一個(gè)真正的鬼魂跳出來(lái)。這讓我非常害怕,以至于我奶奶只要暗示要打開(kāi)罐頭,我和姐姐都會(huì)害怕。奶奶是個(gè)有趣的女人。
捉鬼敢死隊(duì)飲料
一個(gè)更有欺騙性的誤解是:人們總是認(rèn)為設(shè)計(jì)工作需要始終保持一致性。在這篇文章中,我將探討我們應(yīng)該如何保持一致,以及在哪些情況下,對(duì)一致性的追求會(huì)導(dǎo)致我們做出更糟糕的設(shè)計(jì)決策。打趣的說(shuō),保持一致是一種美德。雖然很少有人一直表現(xiàn)不好,但前后不一致是騙子和偽君子的專利,是一種道德缺陷。在設(shè)計(jì)上亦是如此,我們很容易就能想到生活中那些令人困惑、反感又抓狂的設(shè)計(jì)不一致之處。例如:
1. 汽車轉(zhuǎn)向燈設(shè)計(jì)
這是一個(gè)設(shè)計(jì)不一致的典型案例,它存在于整個(gè)汽車行業(yè)中。在一些汽車上(通常是歐美國(guó)家生產(chǎn)的),左側(cè)的操縱桿控制的是指示燈。然而在另一些汽車上(通常是日韓生產(chǎn)的)則是右側(cè)操縱桿用于控制指示燈。這種缺乏一致標(biāo)準(zhǔn)的情況意味著當(dāng)你租來(lái)一輛你不熟悉的汽車旅行時(shí),每一次想要打開(kāi)轉(zhuǎn)向燈結(jié)果卻是打開(kāi)雨刮,你的內(nèi)心都要經(jīng)歷一次令人挫敗的戰(zhàn)斗。
2. 用于分組的鍵盤快捷鍵
我最喜歡在軟件中對(duì)對(duì)象進(jìn)行分組,無(wú)論是 Figma、Keynote 還是 Photoshop。不幸的是,這通常比需要的更困難。
大多數(shù) MacOS 應(yīng)用程序(從 Figma 到 Sketch、Photoshop、Mural 到 Affinity)都使用簡(jiǎn)單的 CMD + G 快捷鍵對(duì)一組對(duì)象進(jìn)行分組。
Keynote 固執(zhí)地抵制這種簡(jiǎn)單的模式,并使用快捷鍵 Option + CMD + G。這會(huì)讓我很惱火。每次我敲擊 CMD + G 都沒(méi)有讓我操作的對(duì)象成組,而是不停地做無(wú)用功,嘗試“查找下一個(gè)”。
3. 滑動(dòng)操作
不一致存在于簡(jiǎn)單的視覺(jué)差異中——在 iOS 上進(jìn)行滑動(dòng)操作。在某些應(yīng)用程序中,它們只是文本,在其他應(yīng)用程序中,它們是文本與圖標(biāo)的組合,而在其他應(yīng)用程序中,它們具有不同的標(biāo)簽。這些點(diǎn)雖然影響不大,但一旦你注意到了,對(duì)頁(yè)面一致性的缺乏關(guān)注就變得很明顯了。
不一致的體驗(yàn)是不好的。不難列出通過(guò)使用一致的元素和控件來(lái)提供出色體驗(yàn)的多種方式。例如:
4. Google Workspace 導(dǎo)航
Google Workspace 應(yīng)用程序中的導(dǎo)航欄通過(guò)適當(dāng)?shù)撵`活性提供了一致的體驗(yàn),你始終知道如何在應(yīng)用程序內(nèi)部和之間進(jìn)行導(dǎo)航,并且導(dǎo)航欄上的元素也根據(jù)你所在的特定應(yīng)用程序進(jìn)行了優(yōu)化。
5. MacOS / iPad 快捷鍵
Mac 和 iPad 鍵盤上可以使用相同的鍵盤快捷鍵,從而在兩者之間輕松切換。
6. Atlassian Jira 任務(wù)模塊的視覺(jué)語(yǔ)言
在 Jira (譯者注:一款面向團(tuán)隊(duì)的事務(wù)跟蹤和項(xiàng)目管理工具,類似 Trello、Worktile)中,圖標(biāo)和任務(wù)編號(hào)的一致使用提供了強(qiáng)大的視覺(jué)速記,表明用戶正在查看任務(wù),無(wú)論任務(wù)顯示為列表項(xiàng)、卡片、鏈接還是整個(gè)頁(yè)面。
7. 標(biāo)牌系統(tǒng)
標(biāo)牌通過(guò)一致的視覺(jué)標(biāo)識(shí)符、顏色和術(shù)語(yǔ)系統(tǒng)(無(wú)論是在機(jī)場(chǎng)、地鐵線還是路邊)通過(guò)其一致性更快地傳遞信息。
例如,這是一組澳大利亞的路標(biāo)。與其他標(biāo)牌系統(tǒng)一樣,它具有有益且經(jīng)過(guò)深思熟慮的一致性。
現(xiàn)在讓我們假設(shè),在創(chuàng)建如此成功且一致的標(biāo)牌集之后,一位瘋狂的標(biāo)牌設(shè)計(jì)師要求所有路邊標(biāo)牌都符合他們定義的視覺(jué)標(biāo)準(zhǔn)。因此建筑物、房屋和廣告標(biāo)志必須使用相同的圖案。
在這個(gè)世界上,一個(gè)漂亮舒適的房屋標(biāo)志和產(chǎn)品廣告最終也會(huì)同樣一致:
使命完成——我們保持一致了!通過(guò)將一致性擴(kuò)展到超出合理范圍,它現(xiàn)在導(dǎo)致了更糟糕的設(shè)計(jì)結(jié)果。我們已經(jīng)失去了這兩個(gè)標(biāo)志所具有的許多具體、獨(dú)特的目標(biāo),我們現(xiàn)在有很多很多看起來(lái)相似的標(biāo)志,一些帶有關(guān)鍵信息,另一些則只是房屋名稱或廣告。即使我們瘋狂的標(biāo)志設(shè)計(jì)師隨后要求房屋標(biāo)志和廣告采用不同的顏色,這對(duì)于減少單一文化或解決第一個(gè)問(wèn)題也沒(méi)有多大作用。
二、一致性并不是一切
簡(jiǎn)而言之,一致性不是也不可能是優(yōu)秀設(shè)計(jì)的唯一標(biāo)準(zhǔn)。建立一致的設(shè)計(jì)系統(tǒng)很重要,但過(guò)度追求一致性可能會(huì)犧牲設(shè)計(jì)的其他方面。
讓我們以 Google 最近重新設(shè)計(jì)的 Google Workspace 圖標(biāo)系統(tǒng)為例。引入一組更加一致的圖標(biāo)在很多方面都很棒,但缺點(diǎn)是現(xiàn)在每個(gè)圖標(biāo)都是一組幾乎相同的彩虹框和斑點(diǎn)中的一個(gè),乍一看彼此無(wú)法區(qū)分,也更難以辨別。
正如一位 Reddit 用戶所說(shuō),“這些圖標(biāo)融入了彩色盒子的海洋”。
我們先別急著跟風(fēng),加入那些每當(dāng)大應(yīng)用一有大膽改變就群起而攻之的人群。從這個(gè)例子可以清楚地看出,過(guò)于關(guān)注一致性會(huì)帶來(lái)一些缺點(diǎn)??纯次易约涸?Atlassian 的工作,我可以多次看到這種情況—以下是一個(gè)事件:
1. Atlassian:指南針
那會(huì)兒我們正在設(shè)計(jì)卡片來(lái)在屏幕上構(gòu)建信息。我們最初的設(shè)計(jì)對(duì)捕獲性能分?jǐn)?shù)的卡片使用了不同的格式。這些分?jǐn)?shù)是用戶需要一目了然地評(píng)價(jià)和理解的重要指標(biāo)。
在迭代過(guò)程中,團(tuán)隊(duì)轉(zhuǎn)向了一種設(shè)計(jì),消除了這種不同的布局,并確保卡片之間具有更大的一致性,但代價(jià)是分?jǐn)?shù)乍一看很容易理解。結(jié)果是更糟糕的體驗(yàn),頁(yè)面上的關(guān)鍵信息更難以解析。
值得慶幸的是,團(tuán)隊(duì)回到了早期的設(shè)計(jì),但對(duì)一致性的追求導(dǎo)致我們錯(cuò)過(guò)了其他重要的設(shè)計(jì)考慮因素,并使我們面臨更糟糕的設(shè)計(jì)結(jié)果的風(fēng)險(xiǎn)。
三、為什么以及何時(shí)保持一致性很重要
界面設(shè)計(jì)一致的重要性早已為人所知,雅各布·尼爾森(Jakob Nielsen)的 10 個(gè)可用性啟發(fā)法之一是:
#4:一致性和標(biāo)準(zhǔn)
用戶不必懷疑不同的詞語(yǔ)、情況或動(dòng)作是否意味著同一件事。遵循平臺(tái)和行業(yè)慣例。
然后他補(bǔ)充道 ...
人們大部分時(shí)間都在使用除您的產(chǎn)品以外的數(shù)字產(chǎn)品。用戶對(duì)其他產(chǎn)品的體驗(yàn)決定了他們的期望。未能保持一致性可能會(huì)迫使用戶學(xué)習(xí)新東西,從而增加用戶的認(rèn)知負(fù)擔(dān)。
尼爾森繼續(xù)強(qiáng)調(diào)保持內(nèi)部和外部一致性的必要性 —— 工具或產(chǎn)品系列內(nèi)的一致性以及與更廣泛的行業(yè)慣例的一致性。
還記得前面討論的 Apple 鍵盤快捷鍵示例嗎?Apple 的鍵盤快捷鍵在內(nèi)部是一致的,CMD + G 將在所有 Apple Mac 應(yīng)用程序中“查找下一個(gè)”,但這是以與使用 CMD + G 來(lái)分組對(duì)象的更廣泛行業(yè)模式保持一致為代價(jià)的。
我們應(yīng)該優(yōu)化內(nèi)部還是外部一致性?我認(rèn)為賈里德·斯普爾(Jared Spool)說(shuō)得對(duì),這個(gè)問(wèn)題問(wèn)錯(cuò)了。他認(rèn)為我們應(yīng)該考慮用戶當(dāng)前的知識(shí),因?yàn)?/p>
當(dāng)考慮一致性時(shí),你想到的是產(chǎn)品。而考慮當(dāng)前知識(shí)時(shí),你考慮的是用戶。它們是同一枚硬幣的兩面。
我想補(bǔ)充一點(diǎn),考慮用戶當(dāng)前目標(biāo)的重要性。也就是說(shuō),不僅僅是思考“用戶當(dāng)前知道什么?”還有“他們想做什么?”?;氐轿覀兊目ㄆ纠覀冃枰獌?yōu)化的不僅僅是用戶對(duì)卡片外觀的了解。我們還需要針對(duì)用戶目標(biāo)進(jìn)行優(yōu)化,從而使關(guān)鍵評(píng)分信息更加突出。
斯普爾進(jìn)一步指出:
為什么我們傾向于追求一致性?因?yàn)檫@樣更容易思考。實(shí)際上,你只需要了解你的設(shè)計(jì)而不必了解有關(guān)用戶的任何信息就可以談?wù)撌故虑楸3忠恢隆4蠖鄶?shù)設(shè)計(jì)師都非常熟悉這一點(diǎn)。
如斯普爾所說(shuō)保持一致性對(duì)設(shè)計(jì)師來(lái)說(shuō)更容易思考,但它這并不是解決問(wèn)題的關(guān)鍵。要警惕把創(chuàng)建一致的設(shè)計(jì)系統(tǒng)這一目標(biāo)取代為用戶創(chuàng)建有效、可用的界面的目標(biāo)。
1. 屁股決定腦袋
創(chuàng)建一致的設(shè)計(jì)系統(tǒng)既重要又極其困難。然而,這樣的設(shè)計(jì)系統(tǒng)只是一種通過(guò)提高內(nèi)部一致性為用戶提供更好體驗(yàn)的工具。
對(duì)于設(shè)計(jì)師來(lái)說(shuō),當(dāng)我們開(kāi)始在 Figma 等工具中創(chuàng)建組件時(shí),常常會(huì)陷入陷阱。我們認(rèn)為我們的目標(biāo)是培育一個(gè)“完美”的設(shè)計(jì)體系。在這個(gè)系統(tǒng)中,每塊版式都是相同的,每個(gè)組件都具有相同的狀態(tài)、相同的顏色和相同的術(shù)語(yǔ)。在我們?cè)O(shè)計(jì)的過(guò)程中,例外情況會(huì)成倍增加,但我們幾乎將這些視為對(duì)我們?cè)O(shè)計(jì)邏輯的威脅,因此想方設(shè)法將它們硬塞到現(xiàn)有系統(tǒng)中,而不是發(fā)展我們的設(shè)計(jì)并以更大的靈活性構(gòu)建更多的靈活性來(lái)支持未滿足的用戶需求。
回到斯普爾的觀點(diǎn),我們對(duì)一致性提出了錯(cuò)誤的問(wèn)題,因?yàn)槲覀兊脑O(shè)計(jì)教育以近乎道德的方式教導(dǎo)我們將一致性視為本質(zhì)上的美德。在設(shè)計(jì)批評(píng)中,我們聽(tīng)到“y 與 x 不一致!”作為一個(gè)設(shè)計(jì)的失敗,而不是圍繞匹配用戶知識(shí)和滿足用戶需求的最佳方式進(jìn)行更深思熟慮的問(wèn)題。
四、一致性是終結(jié)思想的陳詞濫調(diào)
問(wèn)題在于,當(dāng)我們總是說(shuō)“我們的設(shè)計(jì)要一致!”的時(shí)候,這就變成了一種“思想終結(jié)者”(精神病學(xué)家羅伯特·杰伊·利夫頓(Robert Jay Lifton)提出)—— 就像一種表面上看似有理的說(shuō)辭,實(shí)際上卻讓我們停止了理性的討論。
諸如 “這么做不行”、“不這么做不行” 或 “現(xiàn)在不是時(shí)候” 之類的短語(yǔ)就證明了這一點(diǎn),陰謀論者在說(shuō) “相信計(jì)劃” 之類的陳詞濫調(diào)時(shí)也是如此。它不是檢查我們應(yīng)該優(yōu)化的一致性(內(nèi)部/外部/視覺(jué)/功能?)或者一致性是否真的有助于我們?cè)谀撤N情況下滿足用戶需求,而是建議我們不假思索地消除任何已識(shí)別的不一致,因?yàn)橐恢滦?好。
五、一致性是設(shè)計(jì)的手段而不是目的
我們冒著 “陳詞濫調(diào)” 的風(fēng)險(xiǎn),將一致性視為我們工具箱中的另一個(gè)工具,以提供有效、可用的體驗(yàn)。有時(shí),內(nèi)部一致的體驗(yàn)是匹配用戶知識(shí)并幫助用戶實(shí)現(xiàn)目標(biāo)的最佳方式。有時(shí),外部一致的體驗(yàn)是答案,而有時(shí),完全新穎的東西才是最好的解決方案。
話雖如此,我們必須在每次交互中平衡優(yōu)化用戶需求和知識(shí),同時(shí)確保我們具有一定程度的內(nèi)部和外部一致性。每次交互的結(jié)果不應(yīng)該是完全不同的界面、模式和風(fēng)格。我們確實(shí)需要考慮不一致的開(kāi)發(fā)成本。一致的、可重用的設(shè)計(jì)模式會(huì)產(chǎn)生一致的、可重用的代碼。一致性是我們?cè)谥贫ㄔO(shè)計(jì)決策時(shí)可能考慮和優(yōu)化的一組工具之一,過(guò)度、簡(jiǎn)化地關(guān)注任何一個(gè)因素都可能導(dǎo)致更糟糕的結(jié)果。
iOS 應(yīng)用程序之間的滑動(dòng)操作不一致可能有充分的理由。有時(shí),滑動(dòng)操作會(huì)徹底刪除一個(gè)項(xiàng)目,有時(shí)它只是將其從列表中刪除,因此他們的表達(dá)有所不同。列表中的電子郵件往往比大多數(shù)其他列表項(xiàng)高得多,因此使用圖標(biāo)+文本可以更好地填充空間。滑動(dòng)的一般模式和一些顏色編碼的操作是一致的,但設(shè)計(jì)師通過(guò)考慮更多的事情來(lái)平衡設(shè)計(jì),而不僅僅是一致性,以便為這種情況提供更好的體驗(yàn)。
Atlassian 自己的設(shè)計(jì)原則認(rèn)識(shí)到了這一現(xiàn)實(shí)。我們的設(shè)計(jì)原則之一是:
1. 匹配目的并感到熟悉
我們的產(chǎn)品兼顧了個(gè)人用途以及與人們使用的其他產(chǎn)品的整體和諧。盡管視覺(jué)和行為上存在持續(xù)的相似性,但它們會(huì)適應(yīng)人們的設(shè)備和環(huán)境,而不是為了一致性而保持一致。
我們是否平衡了“學(xué)習(xí)行為將貫穿產(chǎn)品的期望”與調(diào)整外觀和功能以使其更有效的需要?
與所有事物一樣,保持一致性的毒性在于劑量。
此外,保持一致性沒(méi)有對(duì)錯(cuò)之分。這是一個(gè)核心設(shè)計(jì)原則,對(duì)于為用戶提供良好的體驗(yàn)至關(guān)重要。如果走得太遠(yuǎn),或者以過(guò)度簡(jiǎn)化的方式,它可能會(huì)通過(guò)為此而構(gòu)建一致的系統(tǒng)來(lái)取代服務(wù)用戶的需求。
因此,下次當(dāng)您擔(dān)心自己或他人設(shè)計(jì)的一致性時(shí),請(qǐng)?jiān)儐?wèn)用戶知道什么并試圖實(shí)現(xiàn)什么,然后討論哪種一致性度量最能幫助您實(shí)現(xiàn)這些目標(biāo),以及這種情況是否需要一點(diǎn)不一致。只要不一致是內(nèi)部的,它就很可能是合理的。這在 Figma 文件中可能看起來(lái)不太好,但會(huì)幫助您更好地支持用戶。
六、譯者思考
當(dāng)我們談到一致性時(shí),我們通常身處已有的范式中,這些范式所解決的問(wèn)題是既定的。
當(dāng)我們的設(shè)計(jì)解決的是既定范圍內(nèi)的問(wèn)題時(shí),我們通常傾向于用既有的范式來(lái)解決,這樣做能夠減少不一致所帶來(lái)的用戶理解成本問(wèn)題。然而產(chǎn)品的內(nèi)外部環(huán)境并不是一成不變的。
當(dāng)我們所解決的問(wèn)題超出既定范圍時(shí),我們不應(yīng)過(guò)度追求一致性,我們或需要優(yōu)先考慮設(shè)計(jì)本身是否真正解決了用戶訴求,甚至是否有更多超出用戶預(yù)期的可能性。
當(dāng)然判斷是否超出既定范圍需要設(shè)計(jì)師對(duì)需求背景有較為全面的了解,甚至動(dòng)手進(jìn)行一些設(shè)計(jì)嘗試。在我們的方案已經(jīng)解決了問(wèn)題本身的前提下,我們?cè)賹⒎桨副旧碇劣趦?nèi)外部環(huán)境中進(jìn)行對(duì)照,查看是否有不滿足原有范式一致性的部分,這些部分是否可以被去除、替代、亦或是擴(kuò)展為一種新的范式針對(duì)性的解決原有范式無(wú)法解決的一類新問(wèn)題。
作者:We-Design
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)
本文來(lái)源:http://gagu89.com/seodongtai/20005.html