現(xiàn)在有很多的界面設(shè)計，人體界面設(shè)計、Web界面設(shè)計等等，那么怎么做Web界面設(shè)計？相信很多朋友對于這方面都是非常感興趣的，今天就讓faceui來給大家普及一下關(guān)于Web界面設(shè)計的基本知識。

　　Web界面設(shè)計

　　UI設(shè)計過程中，常常要用到WEB界面設(shè)計，在Web已經(jīng)進入嶄新的時代的今天，界面的設(shè)計顯得非常重要。

　　Web設(shè)計中排版很重要。好的排版設(shè)計，不但要美觀，更多的是要將信息內(nèi)容有效的組織、排布，使其規(guī)范有序、清晰明確，便于用戶高效、準確獲取相關(guān)信息，讓Web設(shè)計更友好、易用、真實可信。這需要設(shè)計師深入理解所設(shè)計的信息內(nèi)容，提高信息內(nèi)容的組織、加工能力，將內(nèi)容本身作為設(shè)計元素，依照設(shè)計原理有效排布。良好的排版有助于Web設(shè)計更加簡潔有效。

　　圖片來源于網(wǎng)絡(luò)

　　怎么做Web界面設(shè)計

　　一、一致性原則

　　 對于相同或相近的業(yè)務(wù)功能，操作方式保持一致，培養(yǎng)用戶的操作習慣。比如查看聯(lián)系人功能，如果有的頁面是點擊彈出窗口查看，有的頁面是點擊從右側(cè)展出內(nèi)容，就會讓用戶產(chǎn)生困擾，降低用戶體驗。所以要不就統(tǒng)一的彈出窗口查看詳情，要不就統(tǒng)一的從右側(cè)展開詳情。

　　 此外，對于組件顏色、組件尺寸、組件擺放位置也盡量保持一致。比如彈出窗口，類似的業(yè)務(wù)不能有的窗口大，有的窗口??；一個查找聯(lián)系人的輸入框，不能有的頁面放在右側(cè)，有的卻放在左側(cè)；確認按鈕，不能有的頁面是藍色，有的頁面是灰色。

　　二、主次性原則

　　 避免并列過多操作讓用戶選擇，在不得不并列多個操作時，需區(qū)分操作主次，減輕用戶的選擇難度。

　　三、扁平化原則

　　 這里說的扁平化除了指界面效果的扁平化外，還包含了操作的扁平化這一層意思。即：

　　 1、降低頁面層級，能夠一個界面解決的不要彈出窗口，能夠彈出一層窗口解決不要彈出兩層窗口；

　　 2、降低操作復雜度，以清晰明了的方式讓用戶完成操作。比如對于復雜的表單填寫進行分步處理，每一步給出指引；

　　 3、降低鼠標點擊次數(shù)。比如一個新增用戶操作，如果是每增加一個用戶都要用戶點擊彈出一次窗口，完成后點擊“確定”窗口關(guān)閉，添加第二個人再彈出窗口。不如加入一個“確定并繼續(xù)添加”按鈕，這樣窗口并不關(guān)閉，讓用戶每次添加用戶都可以少點兩次鼠標，降低用戶使用系統(tǒng)的疲勞感；

　　 4、不要用提示框阻斷用戶。很多時候如果不是有必要，不要彈出一個confirm讓用戶確認。如果僅僅是提示用戶操作已完成就更沒有必要讓用戶再點擊一下確認按鈕了，貿(mào)然的阻斷用戶是很不友好的，這時需要使用toast這類非阻斷提示，提示出現(xiàn)后幾秒自動消失。而不是為了提示一下，阻斷了用戶的操作。

　　圖片來源于網(wǎng)絡(luò)

　　四、及時反饋原則

　　 任何一個產(chǎn)品，即使用戶界面做的再好，也離不開用戶引導和信息提示。操作過程中盡可能將狀態(tài)的反饋給用戶，即時的響應(yīng)會給用戶增加信賴感。包括：

　　 1、加載反饋。比如當用戶點擊一個按鈕時，其實后臺已經(jīng)開始處理業(yè)務(wù)，但如果界面無任何反應(yīng)會讓用戶覺得操作失敗，所以當一個操作需要一定時間完成時，就需要即時告知進度，保持與用戶的溝通；可以給一個進度條或者一個信息提示，甚至是一個轉(zhuǎn)圈的小圖標表示正在進行中也可以；若加載時間較長，應(yīng)提供取消操作。

　　 2、錄入反饋。比如操作過程中可通過校驗規(guī)則，讓用戶及時發(fā)現(xiàn)并糾正錯誤；使用輸入框組件的自動完成功能，用戶輸入時，下拉列表會隨著輸入的關(guān)鍵詞顯示匹配項；實時搜索，隨著用戶輸入，實時顯示搜索結(jié)果等。

　　 3、結(jié)果反饋。操作結(jié)束后，給出提示告知用戶。盡量使用toast這類非阻斷式提示，這是不打斷用戶操作的輕量級提示方式。必要時也可使用彈窗反饋，彈窗是很強的反饋機制，只有在傳遞非常重要，且可操作的信息時才需要使用它。

　　五、有參考原則

　　 除非你是個優(yōu)秀的用戶體驗設(shè)計師，否則請不要憑空臆想的搭建界面，而是盡量基于已有的模板進行稍加改動。常用的幾個web框架提供了很多界面布局模板供你選擇使用，如果你見過其他感覺不錯的設(shè)計方案，也可以模仿著別人的案例搭建界面?？傊?，你的界面最好是有例可循，才可以避免界面丑的太離譜。

　　怎么做Web界面設(shè)計？以上就是faceui給大家分享了做Web界面設(shè)計的一些實用知識，看完后，希望大家在做Web界面設(shè)計的時候，一定要注意一下Web界面設(shè)計的業(yè)務(wù)功能，這是整個界面設(shè)計的最重要的部分。