說到創(chuàng)造高質(zhì)量的產(chǎn)品，所有的小細(xì)節(jié)都至關(guān)重要。?
很多人爭論什么更重要，是好的用戶體驗(yàn)還是好的用戶界面呢？我總是傾向于說 —— 兩者兼而有之。如果其中某一個失敗，你就不能對你的用戶產(chǎn)生影響。然而，用戶通常不會考慮用戶體驗(yàn)是什么，而是根據(jù)產(chǎn)品的外觀來評價(jià)產(chǎn)品。
如果你想提高技能，設(shè)計(jì)一些是最終展示形態(tài)的產(chǎn)品。它實(shí)際上會展示什么圖像，標(biāo)題會有多長？完美的設(shè)計(jì)一旦被真正的內(nèi)容填滿，就會被打破。
具體來說，在開始進(jìn)行 UI 設(shè)計(jì)之前，你需要知道頁面的每個部分都會顯示哪些內(nèi)容。還需要知道內(nèi)容尺寸的最大最小值。這些轉(zhuǎn)折點(diǎn)被稱為邊緣情況，因?yàn)樗鼈冿@示了界面何時(shí)以及如何變化。
1. 選擇圖片
還需要了解圖像限制。如果客戶沒有任何自定義圖片或不打算購買任何自定義照片，那么使用 Unsplash 提供的漂亮但毫無意義的照片是沒有任何作用的。
為什么？照片往往是概念性的，使用漂亮的東西是不夠的。相反，你需要選擇創(chuàng)建敘事性更強(qiáng)的或更深層含義的圖像。
無論做什么，不要使用不需要的照片。如今，人們被海量的信息淹沒了。額外一點(diǎn)無用的視覺信息只會讓他們惱火。
2. 了解重復(fù)模塊
另一個極端情況與重復(fù)模塊有關(guān)，例如，圖像 + 文本、圖標(biāo) + 文本、數(shù)字 + 文本等。應(yīng)該考慮這些模塊在兩行文本和十行文本時(shí)的外觀展示，以及它們是否會一一排列。
對于描述特征的小文本模塊，可以輕松使用三欄布局。但是，如果有超過 5 行的文本，并且需要全部顯示而不使用省略號省略，則必須想出另一種視覺解決方案。為什么？因?yàn)殚喿x長欄文本只對報(bào)紙有好處，對 Web 瀏覽不方便。解決方案可能包括使用水平滾動或兩列布局。
3. 規(guī)劃擴(kuò)展性
了解內(nèi)容的邊緣情況將幫助你更有效地使用屏幕空間并為界面的每個部分選擇正確的 UI 解決方案。但請記住，邊緣情況不僅與你目前所看到的有關(guān)，一個好的設(shè)計(jì)師應(yīng)該主動思考，考慮到客戶將來可能需要擴(kuò)展 UI 的可能性。
使用應(yīng)用程序時(shí)，用戶可以完成許多操作。重要的是對主要行動按鈕給予視覺上的引導(dǎo)性。所有的導(dǎo)航都是通過按鈕來實(shí)現(xiàn)的，所以你必須讓用戶更容易識別主要的按鈕，讓它們變得突出。如果用戶正在尋找輔助動作，則輔助動作應(yīng)該不那么突出，但仍然可見。
以下是區(qū)分主要和次要按鈕的方法：
- 對主要和次要按鈕使用不同的視覺權(quán)重。具有最強(qiáng)視覺權(quán)重的按鈕將獲得更多關(guān)注。
- 所以使用強(qiáng)烈的顏色、粗體文本和大小來為主要按鈕賦予視覺重量。對次要動作做相反的事情。
在設(shè)計(jì)用戶界面時(shí)，不要忘記任何用戶界面的主要目的：在用戶和服務(wù)之間提供盡可能流暢的交互。界面不允許存疑、沒有答案的問題或任何類型的不確定性。
設(shè)計(jì)者應(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è)計(jì)人員還應(yīng)注意意外錯誤（例如服務(wù)器錯誤、找不到頁面）。任何錯誤消息都是用戶流程的障礙。這就是為什么我們需要幫助用戶處理它，提供任何可能的解決方案，并嘗試消除這些糟糕的體驗(yàn) —— 特別是非用戶產(chǎn)生的錯誤。例如，一個好的解決方案可能是為 404 和 500 頁設(shè)計(jì)插圖或動畫。
1. 仔細(xì)設(shè)計(jì)表單校驗(yàn)
在設(shè)計(jì)錯誤狀態(tài)時(shí)，盡量不要惹惱你的用戶。尤其要小心所有可能的表單校驗(yàn)規(guī)則。
例如，假設(shè)一個帶有必填字段的表單。這意味著開發(fā)人員有一個相應(yīng)的校驗(yàn)邏輯：“所有必填字段都不應(yīng)該為空！ 假設(shè)用戶嘗試以隨機(jī)順序填寫表單，當(dāng)?shù)谝粋必填字段失去焦點(diǎn)狀態(tài)時(shí)，它返回一個錯誤：“請?zhí)顚懘俗侄巍＿@是必填的！”
我們的用戶驚呼，“等等，我只是在表單字段之間點(diǎn)擊，還沒有點(diǎn)擊‘提交’！” 事情甚至可能變得更糟。例如，假設(shè)你有另一個表單需要填寫，“提交” 按鈕將被禁用，直到所有必填字段不再為空。
想一想，用戶什么也沒做，也無法提交表單，但你已經(jīng)將幾個錯誤歸咎于他。這肯定會讓用戶感到不愉快，所以最好避免這種情況。
我承認(rèn)，我是一個對齊狂。但這僅僅是因?yàn)橐坏┠惆l(fā)現(xiàn)了調(diào)整對齊的力量，就會意識到這是讓布局看起來漂亮和平衡的關(guān)鍵。
許多設(shè)計(jì)師認(rèn)為使用網(wǎng)格會限制創(chuàng)造力，在某種程度上，確實(shí)如此。但是，如果你作為 UI 設(shè)計(jì)師新手，我認(rèn)為有必要在打破規(guī)則之前先學(xué)習(xí)這些規(guī)則。適當(dāng)?shù)奶畛浜烷g距使布局看起來干凈有序，同時(shí)使讀者更容易閱讀和理解信息。
應(yīng)在不同模塊周圍設(shè)置相同大小的空間（例如，在頂部和底部，以及在左側(cè)和右側(cè)）。如果空間不均勻，頁面看起來會很亂，用戶可能不會對每個部分給予同等的考慮。
填充太小意味著用戶無法將內(nèi)容分解為不同模塊。為了防止各模塊混合在一起，請將其分開并在它們之間插入一個大空間。
維護(hù)視覺層次結(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，這大于段落之間的空間）。
這將把重點(diǎn)放在最重要和最大的元素上。最大的文本 —— 標(biāo)題 —— 周圍有更大的空間。但是這個空間應(yīng)該更接近它后面的相關(guān)元素。
設(shè)計(jì)一個產(chǎn)品類似于建造一座公共建筑，比如圖書館或?qū)W校 —— 它需要包容所有人。這包括盲人、色盲和視障用戶。
問問 Domino，因?yàn)闊o法訪問該公司的網(wǎng)站，他們被一個盲人起訴。不要像 Domino 那樣，要為可訪問性而設(shè)計(jì)。
通常，我們試圖設(shè)計(jì)看起來不錯的東西，而忽略了將與我們的產(chǎn)品進(jìn)行交互的各類用戶。我作為設(shè)計(jì)師日漸成熟，已經(jīng)接受了所有會破壞設(shè)計(jì)師對完美想法的各種限制。ADA 合規(guī)性就是此類限制之一。
將文本縮小到 8 像素，因?yàn)樗m合我們的水平空間，或者使用淺灰色，因?yàn)樗雌饋聿诲e，這卻忽略了我們視力受損的訪客。當(dāng)我們試圖為 Dribbble 點(diǎn)贊時(shí)，我們可以避免這種情況，但在為真人開發(fā)產(chǎn)品時(shí)，這不是一個好習(xí)慣。Web 內(nèi)容可訪問性指南（WCAG）要求對比度至少為 4.5:1。還有針對運(yùn)動、聽覺和認(rèn)知障礙的指南。
1. 使用空白
也就是說，如果將兩個完全不同的元素彼此靠得很近，用戶將無法理解哪個元素是 “主要” 元素。這就是為什么我們可以說對比不僅僅是將不同的視覺風(fēng)格應(yīng)用到元素上，而且是關(guān)于使用留白的藝術(shù)。這是因?yàn)，有時(shí)為了使元素形成對比，需要用空格分隔它們。
留白對于讓用戶輕松閱讀內(nèi)容很重要。當(dāng)然，如果有太多的空白或?qū)⑻嗟膬?nèi)容塞進(jìn)一個小區(qū)域時(shí)，空白可能會被不當(dāng)使用。許多廣告過多的網(wǎng)站也缺乏足夠的空白空間。
2. 確保文本和圖像之間有足夠的對比度
避免放置在圖像上的文本副本的對比度低。文字和背景之間應(yīng)該有足夠的對比度。要使副本突出，請?jiān)趫D像上放置對比過濾器。黑色是一種流行的顏色，但你也可以使用明亮的顏色，將它們混合搭配。
另一種選擇是從一開始就使用對比圖像。在這種情況下，你可以將副本放在照片或圖像的暗部之上。
當(dāng)你需要通過小符號表達(dá)含義或簡要說明描述時(shí)，圖標(biāo)非常有用。它們也是現(xiàn)代界面的基本組成部分，尤其是在移動設(shè)備上。
在應(yīng)用程序中，圖標(biāo)通常相當(dāng)于按鈕？梢钥纯 Instagram：你只會看到圖標(biāo)和文本。
這就是為什么選擇正確的視覺圖像以對應(yīng)元素的含義非常重要。聽起來很簡單，對吧？不。找到合適的圖標(biāo)非常痛苦，但這就是我介紹這一點(diǎn)的原因。
你需要使用每個人都可以理解的極其簡單和常見的圖像來講述故事，并且需要將這些圖標(biāo)與 UI 的整體風(fēng)格相匹配。然后，你需要將它們以 SVG 格式提供給開發(fā)人員。
也許你已經(jīng)搜索過免費(fèi)圖標(biāo)，當(dāng)為每個元素找到一個漂亮的圖像時(shí)，你會很興奮。你想，它們彼此之間是多么完美的對應(yīng)！他們將被每個人理解！可悲的是，不知何故，你選擇的圖標(biāo)集的整體印象感覺相當(dāng)凌亂和不整潔。怎么能避免這種混亂？這里有一份簡短的清單供你參考：
- 線寬 —— 調(diào)整大小后，所有圖標(biāo)的線寬都應(yīng)該相等。否則，用戶將會很明顯看出差別。
- 角半徑 —— 如果圖標(biāo)包含一些矩形形狀，請比較你集合中每個圖標(biāo)的角半徑。如果不同的圖標(biāo)不一樣，最好修復(fù)它。
- 線帽形狀（用于輪廓圖標(biāo)）—— 它可以是矩形或圓形。
- 角連接形狀（用于輪廓圖標(biāo)）—— 它可以是矩形或圓形。
確實(shí)，不熟練的用戶可能不會特別注意到不同的線寬或圓角半徑。盡管如此，總體印象還是會出錯，用戶會感覺到。
換句話說，雖然使用免費(fèi)圖標(biāo)沒有錯，但使用免費(fèi)圖標(biāo)會使項(xiàng)目看起來很廉價(jià)，而且在某些情況下，顯得不太專業(yè)。此外，還有許多免費(fèi)圖標(biāo)可被人們立即識別。為什么？他們已經(jīng)看到它們被使用在任何地方。
這就是為什么我的建議是嚴(yán)格選擇免費(fèi)圖標(biāo)，或者更好的做法是自己去設(shè)計(jì)圖標(biāo)。自定義圖標(biāo)始終提供卓越的體驗(yàn)。
是的，理想情況下，這在當(dāng)今世界不應(yīng)再成為問題。我們都知道大多數(shù)用戶從移動設(shè)備訪問 Web 服務(wù)。不幸的是，許多設(shè)計(jì)師仍然傾向于忘記這一事實(shí)。（或者可能是客戶不想花錢來創(chuàng)建移動優(yōu)化的設(shè)計(jì)？）
然而，對于設(shè)計(jì)專業(yè)人士來說，不應(yīng)該出現(xiàn)不針對多個設(shè)備進(jìn)行優(yōu)化的問題。在創(chuàng)建 UI 時(shí)，應(yīng)該始終牢記廣受贊譽(yù)的 “移動端優(yōu)先” 方法。
專注于每種類型的用戶將在每個頁面上看到的內(nèi)容。然后，問問自己，“我選擇的用于顯示此特定內(nèi)容的 UI 控件是否方便？”
你可以選擇一個很好的 UI 元素，它可以在桌面設(shè)備上完美運(yùn)行，但它對智能手機(jī)用戶來說不是很好；蛳喾匆嗳。這就是為什么始終牢記必須為當(dāng)今設(shè)計(jì)的各種設(shè)備很重要的原因。
1. 觸控區(qū)域太小
小的觸摸區(qū)域令人沮喪，因?yàn)樗鼈儠褂脩綦y以完成他們想要的操作。我們都經(jīng)歷過在智能手機(jī)上點(diǎn)擊錯誤按鈕而不得不等待加載錯誤屏幕的挫敗感！
因此，在設(shè)計(jì)可點(diǎn)擊元素時(shí)，請記住為用戶配備不同大小的手指觸控區(qū)域：
- 記住成人食指的平均寬度為 1.6 到 2 厘米，從而創(chuàng)建手指友好的目標(biāo)。
- 讓你的觸摸目標(biāo)至少有 45-57 像素寬。這將為 用戶提供足夠的空間來擊中目標(biāo)，而不必?fù)?dān)心準(zhǔn)確性。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。