為啥你的UI界面感覺亂?這7個常見問題一定要避免
編輯導(dǎo)語:UI設(shè)計師在設(shè)計過程中往往需要特別考慮排版的問題,因為這決定了給用戶的第一印象是什么,但有不少設(shè)計師會忽略排版的問題。那么如何解決UI界面亂的問題呢?本文圍繞UI設(shè)計排版展開了講述,推薦對此感興趣的伙伴閱讀。
對于UI設(shè)計師來說,特別是對于初階UI設(shè)計師或者UI初學(xué)者而已,排版的好壞是這個階段核心要考慮的問題,也就是細(xì)節(jié)。但是不少同學(xué)總是在這個上邊很不注重,總想著創(chuàng)意。沒有了基礎(chǔ)的創(chuàng)意就如同無本之源,是沒有任何意義的。
接下來咱們來看看,這7點可以讓你的UI設(shè)計質(zhì)量明顯提升所需要注意的問題。
一、忽略內(nèi)容而設(shè)計
如果您想提高自己的技能,請設(shè)計一些可能成為產(chǎn)品最終目標(biāo)的產(chǎn)品。它將實際顯示哪些圖像,標(biāo)題有多長?因為,一旦您將真實的內(nèi)容填滿你的設(shè)計稿,您的精美設(shè)計就會變的異常難看。
具體來說,在開始進(jìn)行UI設(shè)計之前,您需要知道頁面的每個部分都將顯示哪種內(nèi)容。您還需要知道內(nèi)容的最小和最大顯示長度,正確處理折行。
1. 選擇正確的配圖
如果作為概念設(shè)計稿,那么選擇你能拿到的最好的配圖當(dāng)然是可行的。但是一旦你要為真實的應(yīng)用創(chuàng)建設(shè)計,那么配圖的質(zhì)量就必須要考慮。所以,盡量選擇跟主題相關(guān)的配圖,而不是在圖庫中的跟主題毫無關(guān)聯(lián)的圖片。只有在這種情況下,你才能真實了解最終的成品是什么樣子的。
2. 注意重復(fù)的列表和塊
通常情況下,列表有以下幾種形式:圖像+文本,圖標(biāo)+文本,數(shù)字+文本等。您應(yīng)該考慮用哪種形式可以讓信息更有效的表達(dá)。
對于描述功能的小文本塊,您可以使用三列布局。但是,如果您有多于五行的文本,并且需要全部顯示而沒有省略號,則必須用另一種視覺解決方案。為什么呢?因為手機(jī)閱讀者沒有閱讀較長的文本的習(xí)慣。此時,可以使用水平滾動或者兩列布局的圖片列表。
另外,要考慮一下內(nèi)容區(qū)塊的極端情況,比如列表的文字最長和最短大概有多少字?jǐn)?shù)。優(yōu)秀的設(shè)計師應(yīng)該始終主動思考。以考慮客戶將來可能需要擴(kuò)展UI的可能性。
二、區(qū)分主要動作和次要動作
注意到上圖哪里有區(qū)別了嗎?“Login” “忘記密碼”“Get Start” 三個按鈕變成了一個。在做設(shè)計時,我們必須區(qū)分按鈕的主次,這就要求你要明白,你現(xiàn)在在設(shè)計的這個頁面,最重要的功能是什么,然后對這些功能進(jìn)行排序,主要功能突出顯示,次要內(nèi)容則弱化。因為用戶可能還要去找它們,但是它們沒有那么重要,但是是必須的。所以,右圖優(yōu)化后的效果是不是更好呢?
區(qū)分主按鈕和次要按鈕(輔助功能)的方法:
- 對主按鈕和輔助按鈕使用不同的視覺權(quán)重。視覺重量最強(qiáng)的按鈕將獲得更多關(guān)注。
- 因此,請使用強(qiáng)烈的顏色,粗體文本和大小為主要按鈕賦予視覺效果。對次要動作則相反。
三、令人沮喪的錯誤狀態(tài)
在設(shè)計用戶界面時,請不要忘記任何用戶界面的主要目的:在用戶和服務(wù)之間提供盡可能平滑的交互。不要讓用戶感覺到沮喪,即使在用戶出錯的時候。
設(shè)計人員應(yīng)向用戶提供有關(guān)狀態(tài)的明確反饋,尤其是在出現(xiàn)錯誤狀態(tài)的情況下。因此,錯誤通知應(yīng)滿足以下簡單規(guī)則:
- 它們應(yīng)該是可識別且引人注意的(例如,紅色是常見的UI模式,指示錯誤)。
- 他們應(yīng)該清楚地說明發(fā)生了什么,以及用戶如何解決該錯誤。
- 它們應(yīng)該是上下文的。最好在與它們相關(guān)的元素附近顯示錯誤消息。
- 它們不應(yīng)具有刺激性。您的用戶是否對錯誤已經(jīng)足夠煩惱了?
設(shè)計師還應(yīng)注意意外錯誤(例如,服務(wù)器錯誤,找不到頁面)。任何錯誤消息都是用戶流程的障礙。因此,我們需要幫助用戶進(jìn)行處理,提供任何可能的解決方案,并設(shè)法消除不良體驗,尤其是這不是用戶犯錯的情況下。例如,一個好的解決方案可能是設(shè)計404和500頁的插圖或動畫。
1. 表單合法性檢查
在設(shè)計錯誤狀態(tài)時,請盡量避免惹惱用戶。特別要注意所有可能的形式檢查。
例如,假設(shè)您有一個包含必填字段的表單。這意味著開發(fā)人員會進(jìn)行相應(yīng)的檢查,“所有必填字段都不能為空。” 假設(shè)用戶嘗試以隨機(jī)順序填寫表格。當(dāng)?shù)谝粋€必填字段失去焦點狀態(tài)時,它將返回錯誤:“請?zhí)顚懘俗侄?。這是必需的!”
我們可憐的用戶大聲說:“等等,我只是在表單字段之間單擊,甚至沒有單擊’提交’!” 而且情況甚至可能變得更糟。例如,假設(shè)您有另一個檢查,“提交”按鈕將被禁用,直到所有必填字段不再為空。
請考慮一秒鐘。您的可憐用戶沒有做任何事情,也無法提交表格,但是您已經(jīng)將他的幾個錯誤歸咎于他了。這肯定會激怒任何人,因此最好避免這種情況。
2. 權(quán)衡成本和價值
不要聽那些試圖告訴您的開發(fā)人員,這將花費(fèi)您很大的精力來以您想要的方式來實現(xiàn)。切記:不避免此問題將使您付出代價,你的客戶將會流失。這是必須要做的,沒有商討的余地。
四、元素沒有對齊
許多設(shè)計師認(rèn)為使用網(wǎng)格會限制您的創(chuàng)造力,從某種意義上說,這是事實。但是,如果您是UI設(shè)計的初學(xué)者,我認(rèn)為有必要在打破規(guī)則之前首先學(xué)習(xí)這些規(guī)則。
適當(dāng)?shù)奶畛浜烷g距可使布局看起來整潔有序,同時使讀者更容易閱讀和理解信息。
在邏輯塊周圍應(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)題,則將其頂部填充為30px(即,段落與子標(biāo)題頂部之間的間隔為30px),將底部填充為20px(即,子標(biāo)題底部與段落之間的間隔)將為20px,大于段落之間的間隔)。
這將把重點放在最重要和最大的元素上。最大的文本(標(biāo)題)周圍有較大的空間。但是這個空間應(yīng)該更接近跟隨它的相關(guān)元素。
五、對比度過低
大多數(shù)設(shè)計必須要考慮到大多數(shù)人,其中包括盲人,色盲和視力障礙的用戶。通常,我們會嘗試設(shè)計看起來不錯的產(chǎn)品,而忽略了要與我們的產(chǎn)品進(jìn)行交互的不同用戶。
成熟的設(shè)計師更傾向于克制的做設(shè)計。比如將文字縮小到8px甚至更小,使用淺灰色陰影(因為它看起來不錯)。雖然它更適合我的UI界面布局,但是它忽略了有視力障礙的訪客。
WCAG(Web內(nèi)容可訪問性指南)提到,必須要保證4.5:1的對比度。為了確保您符合這些標(biāo)準(zhǔn),請下載Stark,它將檢查您的設(shè)計是否可訪問。
1. 保持留白
如果您將兩個完全不同的元素放置在彼此非??拷奈恢茫敲从脩魧⒉粫斫饽膫€元素是“主要”元素。這就是為什么我們可以說對比不僅是對元素應(yīng)用不同的視覺樣式,而且還涉及使用留白的藝術(shù)。這是因為有時為了使元素形成對比,您需要使用空格分隔它們。
留白對于使您的內(nèi)容易于用戶閱讀很重要。當(dāng)然,留白可能會被不正確地使用:有太多的留白或?qū)⑻嗟膬?nèi)容塞滿了一個很小的區(qū)域。許多廣告過多的網(wǎng)站也缺乏足夠的留白。
2. 確保文本和圖像有足夠的對比度
避免將低對比度的文本復(fù)制放置在圖像上。文字和背景之間應(yīng)有足夠的對比。要突出顯示副本,請在圖像上放置一個對比濾鏡。黑色是一種流行的顏色,但是您也可以使用明亮的顏色,將它們混合和匹配。
另一種選擇是從一開始就使用對比圖像。在這種情況下,您可以將副本放置在照片或圖像的深色部分的頂部。
六、圖標(biāo)觀感不佳
當(dāng)您需要通過小符號表達(dá)含義或簡要說明說明時,圖標(biāo)非常有用。它們還是現(xiàn)代界面的基本組成部分,尤其是在移動設(shè)備上。在應(yīng)用程序中,圖標(biāo)通常等同于按鈕。這就是為什么選擇正確的視覺圖像以符合元素含義的原因非常重要。
您需要使用非常簡單且通用的圖像來講述故事,每個人都可以理解。您需要將這些圖標(biāo)與UI的整體樣式進(jìn)行匹配。然后,您需要將它們以SVG格式提供給開發(fā)人員。
有些設(shè)計師喜歡用免費(fèi)的圖標(biāo),這些圖標(biāo)單個看起來都不錯,但是一旦放到一起,就不太協(xié)調(diào)了。那么如何來避免這種混亂呢?
- 線寬-調(diào)整大小后,所有圖標(biāo)的線寬應(yīng)相等。否則,它們不會非常明顯。
- 圓角半徑—如果您的圖標(biāo)包含一些矩形形狀,請比較集合中每個圖標(biāo)的圓角半徑。如果不同的圖標(biāo)不同,則最好對其進(jìn)行修復(fù)。
- 風(fēng)格形狀(用于輪廓圖標(biāo))—可以是矩形或圓形。
盡管使用免費(fèi)圖標(biāo)并沒有錯,但最好還是謹(jǐn)慎使用它們。使用免費(fèi)圖標(biāo)會使項目看起來廉價,并且在某些情況下不專業(yè)。此外,還有很多免費(fèi)的圖標(biāo),人們可以立即識別出來。為什么?他們已經(jīng)看到它們到處都在使用。
七、注意點擊區(qū)域
觸摸區(qū)域太小會讓用戶抓狂,因為它們會使用戶難以完成所需的動作。我們所有人都經(jīng)歷過在智能手機(jī)上點擊錯誤按鈕,并在屏幕加載錯誤時必須等待的挫敗感!
因此,在設(shè)計可點擊元素時,請記住,成人食指的平均寬度為1.6到2厘米,以創(chuàng)建手指友好的目標(biāo)。觸摸目標(biāo)的寬度至少為45–57像素。這將為用戶提供足夠的空間來擊中目標(biāo),而不必?fù)?dān)心準(zhǔn)確性。
原文作者:Denislav Jeliazk(作者已授權(quán))
原文地址:https://mp.weixin.qq.com/s/z2EdEEgVPRcGu0x77Cz6-w
翻譯:Tzw_n,公眾號「小阿田的設(shè)計筆記」
本文由 @Tzw_n 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!