我們都知道ui設(shè)計非常的重要,可以為人們帶來更好的體驗(yàn),那么,大家知道ui如何設(shè)計?如果你也想進(jìn)一步的通過自己的設(shè)計技能,成為高手的話,自然就需要好好的看看接下來的內(nèi)容,將會讓你有所收獲。
1、設(shè)計規(guī)范
一致性原則
堅持以用戶體驗(yàn)為中心設(shè)計原則,界面直觀、簡潔,操作方便快捷,用戶接觸軟件后對界面上對應(yīng)的功能一目了然、不需要太多培訓(xùn)就可以方便使用本應(yīng)用系統(tǒng)。
字體-保持字體及顏色一致,避免一套主題出現(xiàn)多個字體;-不可修改的字段,統(tǒng)一用灰色文字顯示。
對齊-保持頁面內(nèi)元素對齊方式的一致,如無特殊情況應(yīng)避免同一頁面出現(xiàn)多種數(shù)據(jù)對齊方式。
表單錄入-在包含必須與選填的頁面中,必須在必填項(xiàng)旁邊給出醒目標(biāo)識(*);-各類型數(shù)據(jù)輸入需限制文本類型,并做格式校驗(yàn)如電話號碼輸入只允許輸入數(shù)字、郵箱地址需要包含"@"等,在用戶輸入有誤時給出明確提示。
(圖片來自網(wǎng)絡(luò))
鼠標(biāo)手勢-可點(diǎn)擊的按鈕、鏈接需要切換鼠標(biāo)手勢至手型;
保持功能及內(nèi)容描述一致-避免同一功能描述使用多個詞匯,如編輯和修改,新增和增加,刪除和清除混用等。建議在項(xiàng)目開發(fā)階段建立一個產(chǎn)品詞典,包括產(chǎn)品中常用術(shù)語及描述,設(shè)計或開發(fā)人員嚴(yán)格按照產(chǎn)品詞典中的術(shù)語詞匯來展示文字信息。
準(zhǔn)確性原則
使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫和顏色,顯示信息的含義應(yīng)該非常明確,用戶不必再參考其它信息源。
顯示有意義的出錯信息,而不是單純的程序錯誤代碼。
避免使用文本輸入框來放置不可編輯的文字內(nèi)容,不要將文本輸入框當(dāng)成標(biāo)簽使用。
使用縮進(jìn)和文本來輔助理解。
使用用戶語言詞匯,而不是單純的專業(yè)計算機(jī)術(shù)語。
高效地使用顯示器的顯示空間,但要避免空間過于擁擠。
保持語言的一致性,如"確定"對應(yīng)"取消","是"對應(yīng)"否"。
?。▓D片來自網(wǎng)絡(luò))
2、ui如何設(shè)計
1、像素陰影
像素陰影的UI設(shè)計技術(shù)實(shí)現(xiàn)起來非常簡單,就是為圖像增加一個像素的硬邊投影。簡單來說,就是在Photoshop的圖層混合選項(xiàng)里選擇投影,并將尺寸(Size)設(shè)為0,將距離(Distance)設(shè)為1px。由于只有1個像素的陰影,設(shè)計上不會給人過度使用的感覺。
2、陰影加高光
這是是一種不怎么起眼,但是卻效果不錯的UI設(shè)計技術(shù)。
當(dāng)標(biāo)題標(biāo)題部分為深色,在增加了一個柔和的陰影后仍然沒有給我們一種突出的感覺,這時用到陰影加高光的UI設(shè)計技術(shù)。方法很簡單,用像素分割的方法。在標(biāo)題和內(nèi)容之間,增加1個像素的白線,并適當(dāng)降低透明度。
3、兩像素分割
兩像素分割技術(shù)在UI設(shè)計和網(wǎng)頁布局運(yùn)用非常廣泛,這是一種比較細(xì)微的視覺效果。可能不會引起注意,但是如果運(yùn)用恰當(dāng),它的效果真的非常不錯。
將畫面在photoshop放大,這樣我們就可以進(jìn)入像素級別的工作。新建一個圖層,選擇鉛筆工具,選擇白色的前景色,按住Shift鍵,這樣你就可以在菜單和logo之間畫一條1個像素的直線。用同樣的方法,在白線的上方,繪制一條黑線。通常我會根據(jù)自己的需要用Photoshop調(diào)節(jié)它們的透明度,使它們和周圍的顏色融合。
ui如何設(shè)計?以上就是我們?yōu)楦魑慌笥褌冋淼膬?nèi)容,大家看完之后,是不是知道了應(yīng)該如何做了吧,希望上面的內(nèi)容可以為大家?guī)韱l(fā)。