▲點擊 "TCC翻譯情報局" 關(guān)注，回復(fù) "社群" 加入我們

本文共 5167 字，預(yù)計閱讀 13 分鐘
TCC 情報局的第 89 篇干貨分享
2021 年的第 77 篇

TCC 推薦：大家好，這里是 TCC 翻譯情報局，我是張聿彤。文章較為偏實戰(zhàn)性，，其中包含界面設(shè)計中的規(guī)范間距、對齊元素、報錯狀態(tài)等內(nèi)容，將我們?nèi)粘９ぷ髦薪?jīng)常遇到的問題進行了匯總，并給予了相應(yīng)的解決方案，本篇文章可以作為工具，便于我們在日常工作里，核對界面設(shè)計中的種種問題。

說到創(chuàng)造高質(zhì)量的產(chǎn)品，所有的 小細(xì)節(jié)都至關(guān)重要。?

很多人爭論什么更重要，是好的用戶體驗還是好的用戶界面呢？我總是傾向于說 —— 兩者兼而有之。如果其中某一個失敗，你就不能對你的用戶產(chǎn)生影響。然而，用戶通常不會考慮用戶體驗是什么，而是根據(jù)產(chǎn)品的外觀來評價產(chǎn)品。

1.忽略范圍/規(guī)劃不當(dāng)

1. Ignoring Scope/Bad Planning

你會經(jīng)常看到包含 “Lorem ipsum” 占位字段的產(chǎn)品和庫存照片嗎？不會。

如果你想提高技能，設(shè)計一些是最終展示形態(tài)的產(chǎn)品。它實際上會展示什么圖像，標(biāo)題會有多長？完美的設(shè)計一旦被真正的內(nèi)容填滿，就會被打破。

具體來說，在開始進行 UI 設(shè)計之前，你需要知道頁面的每個部分都會顯示哪些內(nèi)容。還需要知道內(nèi)容尺寸的最大最小值。這些轉(zhuǎn)折點被稱為邊緣情況，因為它們顯示了界面何時以及如何變化。

1）選擇圖片

還需要了解圖像限制。如果客戶沒有任何自定義圖片或不打算購買任何自定義照片，那么使用 Unsplash 提供的漂亮但毫無意義的照片是沒有意義的。

為什么？照片往往是概念性的，使用漂亮的東西是不夠的。相反，你需要選擇創(chuàng)建敘事性更強的或更深層含義的圖像。

無論做什么，不要使用不需要的照片。如今，人們被海量的信息淹沒了。額外一點無用的視覺信息只會讓他們惱火。

2）了解重復(fù)模塊

另一個極端情況與重復(fù)模塊有關(guān)，例如，圖像 + 文本、圖標(biāo) + 文本、數(shù)字 + 文本等。應(yīng)該考慮這些模塊在兩行文本和十行文本時的外觀展示，以及它們是否會一一排列。

對于描述特征的小文本模塊，可以輕松使用三欄布局。但是，如果有超過 5 行的文本，并且需要全部顯示而不使用省略號省略，則必須想出另一種視覺解決方案。為什么？因為閱讀長欄文本只對報紙有好處，對 Web 瀏覽不方便。解決方案可能包括使用水平滾動或兩列布局。

3）規(guī)劃擴展性

了解內(nèi)容的邊緣情況將幫助你更有效地使用屏幕空間并為界面的每個部分選擇正確的 UI 解決方案。但請記住，邊緣情況不僅與你目前所看到的有關(guān)，一個好的設(shè)計師應(yīng)該總是主動思考，考慮到客戶將來可能需要擴展 UI 的可能性。

2. 主次行動按鈕沒有區(qū)別

2. No difference between primary and secondary actions

使用應(yīng)用程序時，用戶可以完成許多操作。重要的是對主要行動按鈕給予視覺上的引導(dǎo)性。所有的導(dǎo)航都是通過按鈕來實現(xiàn)的，所以你必須讓用戶更容易識別主要的按鈕，讓它們變得粗體和突出。如果用戶正在尋找輔助動作，則輔助動作應(yīng)該不那么突出，但仍然可見。

以下是區(qū)分主要和次要按鈕的方法：

對主要和次要按鈕使用不同的視覺權(quán)重。具有最強視覺權(quán)重的按鈕將獲得更多關(guān)注。
所以使用強烈的顏色、粗體文本和大小來為主要按鈕賦予視覺重量。對次要動作做相反的事情。

3. 令人沮喪的錯誤狀態(tài)

3. Frustrating error states

在設(shè)計用戶界面時，不要忘記任何用戶界面的主要目的：在用戶和服務(wù)之間提供盡可能流暢的交互。界面不允許存疑、沒有答案的問題或任何類型的不確定性。

設(shè)計者應(yīng)該向用戶提供關(guān)于狀態(tài)的明確反饋，特別是在錯誤狀態(tài)的情況下。因此，錯誤通知應(yīng)滿足以下簡單規(guī)則：

它們應(yīng)該是 可識別和引人注目的（例如，紅色是表示錯誤的常見 UI 模式）。
他們應(yīng)該清楚地解釋發(fā)生了什么以及用戶如何修復(fù)錯誤。
它們應(yīng)該是上下文相關(guān)的。最好在與它們相關(guān)的元素附近顯示錯誤消息。
他們不應(yīng)該有刺激性。用戶是否已經(jīng)被錯誤激怒了？

設(shè)計人員還應(yīng)注意意外錯誤（例如服務(wù)器錯誤、找不到頁面）。任何錯誤消息都是用戶流程的障礙。這就是為什么我們需要幫助用戶處理它，提供任何可能的解決方案，并嘗試消除糟糕的體驗 —— 特別是如果這不是用戶產(chǎn)生的錯誤。例如，一個好的解決方案可能是為 404 和 500 頁設(shè)計插圖或動畫。

1）仔細(xì)設(shè)計表單校驗

在設(shè)計錯誤狀態(tài)時，盡量不要惹惱你的用戶。尤其要小心所有可能的表單校驗規(guī)則。

例如，假設(shè)一個帶有必填字段的表單。這意味著開發(fā)人員有一個相應(yīng)的校驗邏輯：“所有必填字段都不應(yīng)該為空。” 假設(shè)用戶嘗試以隨機順序填寫表單，當(dāng)?shù)谝粋€必填字段失去焦點狀態(tài)時，它返回一個錯誤：“請?zhí)顚懘俗侄巍＿@是必填的！”

我們可憐的用戶驚呼，“等等，伙計，我只是在表單字段之間點擊，還沒有點擊‘提交’！” 事情甚至可能變得更糟。例如，假設(shè)你有另一個表單需要填寫，“提交” 按鈕將被禁用，直到所有必填字段不再為空。

想一想，可憐的用戶什么也沒做，也無法提交表單，但你已經(jīng)將幾個錯誤歸咎于他。這肯定會惹惱任何人，所以最好避免這種情況。

2）權(quán)衡成本和價值

不要聽那些試圖告訴你以你想要的方式實現(xiàn)它將花費大量精力的開發(fā)人員的話。記住：不避免這個問題會讓你付出代價，就是客戶！沒有人需要沒有客戶的服務(wù)或產(chǎn)品。即使開發(fā)成本很低。

4. 沒有對齊

4. Poor alignment

我承認(rèn)，我是一個對齊狂。但這僅僅是因為一旦你發(fā)現(xiàn)了調(diào)整對齊的力量，就會意識到這是使任何布局看起來漂亮和平衡的關(guān)鍵。

許多設(shè)計師認(rèn)為使用網(wǎng)格會限制創(chuàng)造力，在某種程度上，這是真的。但是，如果你剛開始作為 UI 設(shè)計師，我認(rèn)為有必要在打破規(guī)則之前先學(xué)習(xí)這些規(guī)則。適當(dāng)?shù)奶畛浜烷g距使布局看起來干凈有序，同時使讀者更容易閱讀和理解信息。

應(yīng)在不同模塊周圍設(shè)置相同大小的空間（例如，在頂部和底部，以及在左側(cè)和右側(cè)）。如果空間不均勻，頁面會看起來很亂，用戶可能不會對每個部分給予同等的考慮。

填充太小意味著用戶無法將內(nèi)容分解為不同模塊。為了防止各模塊混合在一起，請將其分開并在它們之間插入一個大空間。

維護視覺層次結(jié)構(gòu)的一種簡單方法是遵循以下簡單規(guī)則：不同邏輯塊之間的填充應(yīng)該大于每個塊內(nèi)部標(biāo)題和文本之間的填充。例如，假設(shè)有一個包含標(biāo)題、副標(biāo)題和段落的長文本模塊：

將標(biāo)題 padding-bottom 設(shè)置為 40px，然后跟隨一段文本。
將段落 padding-bottom 設(shè)置為 10px。
如果段落后有小標(biāo)題，padding-top 30px（即段落與小標(biāo)題頂部的間距為30px），padding-bottom 為 20px（即小標(biāo)題底部與段落之間的間距將是 20px，這大于段落之間的空間）。

這將把重點放在最重要和最大的元素上。最大的文本 —— 標(biāo)題 —— 周圍有更大的空間。但是這個 空間應(yīng)該更接近它后面的相關(guān)元素。

5. 低對比度

5. Low Contrast

設(shè)計一個產(chǎn)品類似于建造一座公共建筑，比如圖書館或?qū)W校 —— 它需要包容所有人。這包括盲人、色盲和視障用戶。

問問 Domino，因為無法訪問該公司的網(wǎng)站，他們被一個盲人起訴。不要像 Domino 那樣，要為可訪問性而設(shè)計。

通常，我們試圖設(shè)計看起來不錯的東西，而忽略了將與我們的產(chǎn)品進行交互的各類用戶的考慮。隨著我作為設(shè)計師日漸成熟，我已經(jīng)接受了所有會破壞設(shè)計師對完美想法的各種限制。ADA 合規(guī)性就是此類限制之一。

將文本縮小到 8 像素，因為它更適合我們的水平空間，或者使用淺灰色，因為它看起來不錯，這卻忽略了我們視力受損的訪客。當(dāng)我們試圖為 Dribbble 點贊時，我們可以避免這種情況，但在為真人開發(fā)產(chǎn)品時，這不是一個好習(xí)慣。Web 內(nèi)容可訪問性指南（WCAG）要求對比度至少為 4.5:1。還有針對運動、聽覺和認(rèn)知障礙的指南。為確保你符合這些標(biāo)準(zhǔn)，請下載 Stark，它會檢查你的設(shè)計是否可訪問。

1）使用空白

也就是說，如果將兩個完全不同的元素彼此靠得很近，用戶將無法理解哪個元素是 “主要” 元素。這就是為什么我們可以說對比不僅僅是將不同的視覺風(fēng)格應(yīng)用到元素上，而且是關(guān)于使用留白的藝術(shù)。這是因為，有時為了使元素形成對比，需要用空格分隔它們。

留白對于讓用戶輕松閱讀內(nèi)容很重要。當(dāng)然，如果有太多的空白或?qū)⑻嗟膬?nèi)容塞進一個小區(qū)域時，空白可能會被不當(dāng)使用。許多廣告過多的網(wǎng)站也缺乏足夠的空白空間。

2）確保文本和圖像之間有足夠的對比度

避免放置在圖像上的文本副本的對比度低。文字和背景之間應(yīng)該有足夠的對比度。要使副本突出，請在圖像上放置對比過濾器。黑色是一種流行的顏色，但你也可以使用明亮的顏色，將它們混合搭配。

另一種選擇是從一開始就使用對比圖像。在這種情況下，你可以將副本放在照片或圖像的暗部之上。

6. 糟糕的圖標(biāo)

6. Poor Iconography

當(dāng)你需要通過小符號表達(dá)含義或簡要說明描述時，圖標(biāo)非常有用。它們也是 現(xiàn)代界面的基本組成部分，尤其是在移動設(shè)備上。

在應(yīng)用程序中，圖標(biāo)通常相當(dāng)于按鈕。可以看看 Instagram：你只會看到圖標(biāo)和文本。

這就是為什么選擇正確的視覺圖像以對應(yīng)元素的含義非常重要。聽起來很簡單，對吧？不。找到合適的圖標(biāo)非常痛苦，但這就是我介紹這一點的原因。

你需要使用每個人都可以理解的極其簡單和常見的圖像來講述故事，并且需要將這些圖標(biāo)與 UI 的整體風(fēng)格相匹配。然后，你需要將它們以 SVG 格式提供給開發(fā)人員。

也許你已經(jīng)搜索過免費圖標(biāo)，當(dāng)為每個元素找到一個漂亮的圖像時，你會很興奮。你想，它們彼此之間是多么完美的對應(yīng)！他們將被每個人理解！可悲的是，不知何故，你選擇的圖標(biāo)集的整體印象感覺相當(dāng)凌亂和不整潔。怎么能避免這種混亂？這里有一份簡短的清單供你參考：

線寬 —— 調(diào)整大小后，所有圖標(biāo)的線寬都應(yīng)該相等。否則，用戶將會很明顯的看出來。
角半徑 —— 如果圖標(biāo)包含一些矩形形狀，請比較你集合中每個圖標(biāo)的角半徑。如果不同的圖標(biāo)不一樣，最好修復(fù)它。
線帽形狀（用于輪廓圖標(biāo)）—— 它可以是矩形或圓形。
角連接形狀（用于輪廓圖標(biāo)）—— 它可以是矩形或圓形。

確實，不熟練的用戶可能不會特別注意到不同的線寬或圓角半徑。盡管如此，總體印象還是會出錯，用戶會感覺到。

換句話說，雖然使用免費圖標(biāo)沒有錯，但最好別對它們放輕松。使用免費圖標(biāo)會使項目看起來很廉價，而且在某些情況下，不專業(yè)。此外，還有許多免費圖標(biāo)可供人們立即識別。為什么？他們已經(jīng)看到它們在任何地方使用。

這就是為什么我的建議是嚴(yán)格選擇免費圖標(biāo)，或者更好的做法是自己去設(shè)計圖標(biāo)。自定義圖標(biāo)始終提供卓越的體驗。

7. 未考慮跨平臺情況

7. Not thinking cross platform

是的，理想情況下，這在當(dāng)今世界不應(yīng)再成為問題。我們都知道大多數(shù)用戶從移動設(shè)備訪問 Web 服務(wù)。不幸的是，許多設(shè)計師仍然傾向于忘記這一事實。（或者可能是客戶不想花錢來創(chuàng)建移動優(yōu)化的設(shè)計？）

然而，對于設(shè)計專業(yè)人士來說，不應(yīng)該出現(xiàn)不針對多個設(shè)備進行優(yōu)化的問題。在創(chuàng)建 UI 時，應(yīng)該始終牢記廣受贊譽的 “移動端優(yōu)先” 方法。

專注于每種類型的用戶將在每個頁面上看到的內(nèi)容。然后，問問自己，“我選擇的用于顯示此特定內(nèi)容的 UI 控件是否方便？”

你可以選擇一個很好的 UI 元素，它可以在桌面設(shè)備上完美運行，但它對智能手機用戶來說不是很好。或相反亦然。這就是為什么始終牢記必須為當(dāng)今設(shè)計的各種設(shè)備很重要的原因。

1）觸控區(qū)域太小

小的觸摸區(qū)域令人沮喪，因為它們會使用戶難以完成他們想要的操作。我們都經(jīng)歷過在智能手機上點擊錯誤按鈕而不得不等待加載錯誤屏幕的挫敗感！

因此，在設(shè)計可點擊元素時，請記住為用戶配備不同大小的手指觸控區(qū)域：

記住 成人食指的平均寬度為 1.6 到 2 厘米，從而創(chuàng)建手指友好的目標(biāo)。
讓你的觸摸目標(biāo)至少有 45-57 像素寬。這將為 用戶提供足夠的空間來擊中目標(biāo)，而不必?fù)?dān)心準(zhǔn)確性。

原文：https://uxplanet.org/is-your-ui-messy-7-common-mistakes-to-avoid-31ae18689b61

作者：Denislav Jeliazkov

譯者：張宇旸

審核：徐曼鷺、李澤慧、張聿彤

編輯：孫淑雅

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

往期精選文章：

十個技巧幫助你設(shè)計一款在線學(xué)習(xí) APP

添加小助手微信，備注「社群」，即可加入讀者群。

7 個導(dǎo)致 UI 混亂的常見錯誤

本文共 5167 字，預(yù)計閱讀 13 分鐘
TCC 情報局的第 89 篇干貨分享
2021 年的第 77 篇

1. Ignoring Scope/Bad Planning

3）規(guī)劃擴展性

2. No difference between primary and secondary actions

3. Frustrating error states

1）仔細(xì)設(shè)計表單校驗

2）權(quán)衡成本和價值

4. Poor alignment

5. Low Contrast

6. Poor Iconography

7. Not thinking cross platform

1）觸控區(qū)域太小

這些 色彩心理學(xué)知識教你如何傳遞信息

案例研究｜康奈爾大學(xué)副業(yè)社區(qū)網(wǎng)站設(shè)計

網(wǎng)頁設(shè)計師能從日式美學(xué)中學(xué)到什么？

案例研究｜一款為你帶來難忘體驗的美食 APP

如何制作打動面試官的作品集，這里有一份完整的指導(dǎo)手冊

如何做好用戶體驗項目？從一個好計劃開始

如何建立設(shè)計系統(tǒng)

如何把握不同層級用戶的需求：回歸本質(zhì)，打磨信息架構(gòu)

TCC 視野｜2021 年用戶體驗設(shè)計趨勢分析

7 個導(dǎo)致 UI 混亂的常見錯誤

本文共 5167 字，預(yù)計閱讀 13 分鐘TCC 情報局的 第 89 篇 干貨分享2021 年的 第 77 篇

1. Ignoring Scope/Bad Planning

3）規(guī)劃擴展性

2. No difference between primary and secondary actions

3. Frustrating error states

1）仔細(xì)設(shè)計表單校驗

2）權(quán)衡成本和價值

4. Poor alignment

5. Low Contrast

6. Poor Iconography

7. Not thinking cross platform

1）觸控區(qū)域太小

本文共 5167 字，預(yù)計閱讀 13 分鐘
TCC 情報局的第 89 篇干貨分享
2021 年的第 77 篇