我們都知道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ā)。