UI設(shè)計有哪些必知的注意事項呢?
◆色彩不是決定性的因素
色彩很容易受到環(huán)境的影響,設(shè)計的時候不要將色彩視為決定性因素,色彩可以醒目,作為引導(dǎo),但不應(yīng)該是做區(qū)別的唯一元素。在長篇閱讀的情況下,除了要強調(diào)的內(nèi)容,應(yīng)采用相對暗淡或柔和的背景色。當(dāng)然,視讀者而定,也可采用明亮的背景色。
◆循序展現(xiàn)
每個屏幕只展現(xiàn)必需的內(nèi)容,如果用戶需要作出決定,則展現(xiàn)足夠的信息供其選擇,他們會到在下一屏找到所需細節(jié),避兔過度闡釋或把所有一次展現(xiàn),如果可能將選擇放在下屏有步驟地展示信息,這會使你的界面交互更加清晰。
◆考慮屏幕全局光源
作為設(shè)計師,你應(yīng)該早就了解每個平臺,都有其不可改變的屏幕全局光源,所有高光和陰影效果都應(yīng)該和平臺的光源相協(xié)調(diào)。
◆明確導(dǎo)航和組織控件設(shè)計
向你的開發(fā)者明確展示你的設(shè)計中包含的標(biāo)簽、下拉菜單或者其它閉合機制。在進行這種控件設(shè)計時,要尊重平臺的設(shè)計慣例。開發(fā)者在進行開發(fā)時需要明確了解信息層次,因此你要確保你的設(shè)計清晰地展示你的意圖,圖層復(fù)合在這種情況下非常有用。
◆導(dǎo)出圖形時不進行壓縮
在導(dǎo)出時以 PNG alpha通道格式保存,除非被明確告知其它保存方式,除非被明確要求否則不要使用JPEG格式,不要考慮圖像文件大小,因為開發(fā)者或他們的開發(fā)環(huán)境會對圖像進行最優(yōu)化,以透明背景導(dǎo)出每個元素,而不是純色,即便你設(shè)計中的一部分背景確實是純色的。
◆詢問陰影的處理
和你的開發(fā)者溝通是否要將陰影效果包含在導(dǎo)出圖中,通常情況下,開發(fā)者會用CSS或?qū)懘a來應(yīng)用陰影,這樣做事實上會比直接使用預(yù)先保存的陰影位圖更方便容易,不要假定陰影效果應(yīng)該包含在圖像中,雖然在設(shè)計原型時用圖層展示陰影效果。
◆盡量使用單列而不是多列布局
單列布局能夠讓對全局有更好的掌控,同時用戶也可以一目了然內(nèi)容,而多列而已則會有分散用戶注意力的風(fēng)險,使你的主旨無法很好表達,最好的做法是用一個有邏輯的敘述,來引導(dǎo)用戶并且在文末給出你的操作按鈕。
◆合并重復(fù)的功能使界面簡潔
在整個產(chǎn)品開發(fā)期間我們會有意無意地創(chuàng)建很多模塊,版面或者元素,而它們的功能都是相近,此種情況已經(jīng)表明過度設(shè)計了,時刻警惕這些冗余的功能模塊,界面上模塊越多,用戶的學(xué)習(xí)成本就越大,所以請考慮重構(gòu)你的界面使它足夠精簡。
◆將選項與按鈕區(qū)分開來
諸如顏色、層次及模塊間的對比,這些視覺上的設(shè)計可以很好地幫助用戶使用產(chǎn)品,他時刻知道當(dāng)前所處的頁面以及可以轉(zhuǎn)到哪些頁面,要傳達這樣一個好的界面,你就需要將可點擊的元素、可選擇的元素以及普通的文字明顯區(qū)分開來。但千萬不要把這三種元素設(shè)計得混亂不堪。
◆界面要有鮮明對比讓人容易區(qū)分
把主要功能區(qū)從界面中突出顯示出來效果會好很多,通過明暗色調(diào)的對比來突顯,通過為元素添加陰影漸變等效果,讓界面富有層次感來張顯主要功能,你甚至可以在色相環(huán)上專門選擇互補色,來設(shè)計你的界面以達到突出“重心”的目的。
◆精簡表單內(nèi)容
表單中每個字段都會有失去用戶的風(fēng)險,不是每個人打字都很快速的,并且在移動設(shè)備上進行輸入更是相當(dāng)麻煩的事情。
如果你確實需要一大堆信息讓用戶填寫,試著將它們分散在不同頁面,在表單提交后還可以繼續(xù)補充,過多字段很容易讓整個表單顯示臃腫,當(dāng)然想簡潔也很容易,只放少數(shù)字段。
◆將操作的狀態(tài)或者進度呈現(xiàn)出來
現(xiàn)如今大多界面當(dāng)中已經(jīng)呈現(xiàn)了各色樣式的進度條或者標(biāo)明狀態(tài)的圖標(biāo),例如:郵件有己讀或未讀的狀態(tài);電子帳單有支付或未支付的狀態(tài)。而在界面上呈現(xiàn)這樣的狀態(tài)對于用戶來說是很有必要的,這樣用戶就可以知道某些操作是否成功,接下來準(zhǔn)備進行怎樣的操作。
◆過多邊框會讓界面四分五裂
邊框確實在劃分區(qū)域進行版塊設(shè)置時有很大的作用,但同時其明顯的線條也會吸引走用戶的注意力。為了達到劃分版塊又不轉(zhuǎn)移用戶注意力的目的,在排版時可以將界面上不同區(qū)域的元素通過空白進行分組,用上不同的背景色,將文字對齊方式進行統(tǒng)一,還有就是為不同區(qū)域設(shè)置不同的樣式。
◆界面設(shè)計得一致
在設(shè)計中保持一致性時就可以減少用戶的學(xué)習(xí)成本。用戶不需要學(xué)習(xí)新的操作。當(dāng)我們點擊按鈕或者進行拖拽操作,我們期望這樣的操作在整個程序的各個界面都是一致的,會得到相似的結(jié)果出來。可以在很多方面下功夫,來實現(xiàn)一個一致的界面包括:顏色、方向、元素的表現(xiàn)形式、位置、大小、形狀等。
◆將有關(guān)聯(lián)的功能分組
將各個功能項分組合并起來,可以提高程序的可用性。有點常識的人都知道刀子和叉子或者打開文件和關(guān)閉文件是放在一起的。將功能相近的元素放在一起也符合邏輯,符合我們平時的認(rèn)知。