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