- 相關(guān)推薦
ui界面設計規范
檢驗一個(gè)界面的標準既不是某個(gè)項目開(kāi)發(fā)組領(lǐng)導的意見(jiàn)也不是項目成員投票的結果，而是終端用戶(hù)的感受。下面就由小編為大家介紹一下ui界面設計規范，希望對大家有所幫助！
一致性原則
堅持以用戶(hù)體驗為中心設計原則，界面直觀(guān)、簡(jiǎn)潔，操作方便快捷，用戶(hù)接觸軟件后對界面上對應的功能一目了然、不需要太多培訓就可以方便使用本應用系統。
字體-保持字體及顏色一致，避免一套主題出現多個(gè)字體；不可修改的字段，統一用灰色文字顯示。
對齊-保持頁(yè)面內元素對齊方式的一致，如無(wú)特殊情況應避免同一頁(yè)面出現多種數據對齊方式。
表單錄入-在包含必須與選填的頁(yè)面中，必須在必填項旁邊給出醒目標識（*）；各類(lèi)型數據輸入需限制文本類(lèi)型，并做格式校驗如電話(huà)號碼輸入只允許輸入數字、郵箱地址需要包含“@”等，在用戶(hù)輸入有誤時(shí)給出明確提示。
鼠標手勢-可點(diǎn)擊的按鈕、鏈接需要切換鼠標手勢至手型；
保持功能及內容描述一致-避免同一功能描述使用多個(gè)詞匯，如編輯和修改，新增和增加，刪除和清除混用等。建議在項目開(kāi)發(fā)階段建立一個(gè)產(chǎn)品詞典，包括產(chǎn)品中常用術(shù)語(yǔ)及描述，設計或開(kāi)發(fā)人員嚴格按照產(chǎn)品詞典中的術(shù)語(yǔ)詞匯來(lái)展示文字信息。
準確性原則
使用一致的標記、標準縮寫(xiě)和顏色，顯示信息的含義應該非常明確，用戶(hù)不必再參考其它信息源。顯示有意義的出錯信息，而不是單純的程序錯誤代碼。
避免使用文本輸入框來(lái)放置不可編輯的文字內容，不要將文本輸入框當成標簽使用。使用縮進(jìn)和文本來(lái)輔助理解。使用用戶(hù)語(yǔ)言詞匯，而不是單純的專(zhuān)業(yè)計算機術(shù)語(yǔ)。
高效地使用顯示器的顯示空間，但要避免空間過(guò)于擁擠。保持語(yǔ)言的一致性，如“確定”對應“取消”,“是”對應“否”。
布局合理化原則
在進(jìn)行UI設計時(shí)需要充分考慮布局的合理化問(wèn)題，遵循用戶(hù)從上而下，自左向右瀏覽、操作習慣，避免常用業(yè)務(wù)功能按鍵排列過(guò)于分散，以造成用戶(hù)鼠標移動(dòng)距離過(guò)長(cháng)的弊端。多做“減法”運算，將不常用的功能區塊隱藏，以保持界面的簡(jiǎn)潔，使用戶(hù)專(zhuān)注于主要業(yè)務(wù)操作流程，有利于提高軟件的易用性及可用性。
菜單-保持菜單簡(jiǎn)潔性及分類(lèi)的準確性，避免菜單深度超過(guò)3層。菜單中功能是需要打開(kāi)一個(gè)新頁(yè)面來(lái)完成的，需要在菜單名字后面加上“…”�！局贿m用于C/S架構，B/S請無(wú)視】。
按鈕-確認操作按鈕放置左邊，取消或關(guān)閉按鈕放置于右邊。
功能-未完成功能必須隱藏處理，不要置于頁(yè)面內容中，以免引起誤會(huì )。
排版-所有文字內容排版避免貼邊顯示（頁(yè)面邊緣），盡量保持10-20像素的間距并在垂直方向上居中對齊；各控件元素間也保持至少10像素以上的間距，并確�？丶夭痪o貼于頁(yè)面邊沿。
表格數據列表-字符型數據保持左對齊，數值型右對齊（方便閱讀對比），并根據字段要求，統一顯示小數位位數。
滾動(dòng)條-頁(yè)面布局設計時(shí)應避免出現橫向滾動(dòng)條。
頁(yè)面導航（面包屑導航）-在頁(yè)面顯眼位置應該出現面包屑導航欄，讓用戶(hù)知道當前所在頁(yè)面的位置，并明確導航結構，如：首頁(yè)>新聞中心>歐科智能招商服務(wù)平臺正式發(fā)布，其中帶下劃線(xiàn)部分為可點(diǎn)擊鏈接。
信息提示窗口-信息提示窗口應位于當前頁(yè)面的居中位置，并適當弱化背景層以減少信息干擾，讓用戶(hù)把注意力集中在當前的信息提示窗口。一般做法是在信息提示窗口的背面加一個(gè)半透明顏色填充的遮罩層。
系統操作合理性原則
盡量確保用戶(hù)在不使用鼠標（只使用鍵盤(pán)）的情況下也可以流暢地完成一些常用的業(yè)務(wù)操作，各控件間可以通過(guò)Tab鍵進(jìn)行切換，并將可編輯的文本全選處理。
查詢(xún)檢索類(lèi)頁(yè)面，在查詢(xún)條件輸入框內按回車(chē)應該自動(dòng)觸發(fā)查詢(xún)操作。
在進(jìn)行一些不可逆或者刪除操作時(shí)應該有信息提示用戶(hù)，并讓用戶(hù)確認是否繼續操作，必要時(shí)應該把操作造成的后果也告訴用戶(hù)。
信息提示窗口的“確認”及“取消”按鈕需要分別映射鍵盤(pán)按鍵“Enter”和“ESC”。
避免使用鼠標雙擊動(dòng)作，不僅會(huì )增加用戶(hù)操作難度，還可能會(huì )引起用戶(hù)誤會(huì )，認為功能點(diǎn)擊無(wú)效。
表單錄入頁(yè)面，需要把輸入焦點(diǎn)定位到第一個(gè)輸入項。用戶(hù)通過(guò)Tab鍵可以在輸入框或操作按鈕間切換，并注意Tab的操作應該遵循從左向右、從上而下的順序。
系統響應時(shí)間原則
系統響應時(shí)間應該適中，響應時(shí)間過(guò)長(cháng)，用戶(hù)就會(huì )感到不安和沮喪，而響應時(shí)間過(guò)快也會(huì )影響到用戶(hù)的操作節奏，并可能導致錯誤。因此在系統響應時(shí)間上堅持如下原則：
2-5秒窗口顯示處理信息提示，避免用戶(hù)誤認為沒(méi)響應而重復操作；
5秒以上顯示處理窗口，或顯示進(jìn)度條；
一個(gè)長(cháng)時(shí)間的處理完成時(shí)應給予完成警告信息。
拓展：ui界面設計方向
用戶(hù)研究
用戶(hù)研究包含兩個(gè)方面：一是可用性工程學(xué)（usability Engineering），研究如何提高產(chǎn)品的可用性，使得系統的設計更容易被人使用、學(xué)習和記憶；二是通過(guò)可用性工程學(xué)研究，發(fā)掘用戶(hù)的潛在需求，為技術(shù)創(chuàng )新提供另外一條思路和方法。
用戶(hù)研究是一個(gè)跨學(xué)科的專(zhuān)業(yè)，涉及可用性工程學(xué)、人類(lèi)功效學(xué)、心理學(xué)、市場(chǎng)研究學(xué)、教育學(xué)、設計學(xué)等等學(xué)科。用戶(hù)研究技術(shù)是站在人文學(xué)科的角度來(lái)研究產(chǎn)品，站在用戶(hù)的角度介入到產(chǎn)品的開(kāi)發(fā)和設計中。
用戶(hù)研究通過(guò)對于用戶(hù)的工作環(huán)境、產(chǎn)品的使用習慣等研究，使得在產(chǎn)品開(kāi)發(fā)的前期能夠把用戶(hù)對于產(chǎn)品功能的期望、對設計和外觀(guān)方面的要求融入到產(chǎn)品的開(kāi)發(fā)過(guò)程中去，從而幫助企業(yè)完善產(chǎn)品設計或者探索一個(gè)新產(chǎn)品概念。
他是得到用戶(hù)需求和反饋的途徑，也是檢驗界面與交互設計是否合理的重要標準。
交互設計
這部分指人與機之間的交互工程，在過(guò)去交互設計也由程序員來(lái)做，其實(shí)程序員擅長(cháng)編碼，而不善于與最終用戶(hù)交互。所以，很多的軟件雖然功能比較齊全，但是交互方面設計很粗糙，繁瑣難用，學(xué)習困難。使用這樣的軟件后，不是使人聰明與進(jìn)步而是讓人感到愚弄與羞辱。許多人因為不能操作電腦軟件而下崗失業(yè)，這樣的交互使電腦成為讓人恐懼的科技怪獸。于是我們把交互設計從程序員的工作中分離出來(lái)單獨成為一個(gè)學(xué)科，也就是人機交互設計。他的目的在于加強軟件的易用、易學(xué)、易理解，使計算機真正成為方便地為人類(lèi)服務(wù)的工具。
界面設計
在漫長(cháng)的軟件發(fā)展中，界面設計工作一直沒(méi)有被重視起來(lái)。做界面設計的人也被貶義的稱(chēng)為“美工”。其實(shí)軟件界面設計就像工業(yè)產(chǎn)品中的工業(yè)造型設計一樣，是產(chǎn)品的重要買(mǎi)點(diǎn)。一個(gè)友好美觀(guān)的界面會(huì )給人帶來(lái)舒適的視覺(jué)享受，拉近人與電腦的距離，為商家創(chuàng )造賣(mài)點(diǎn)。界面設計不是單純的美術(shù)繪畫(huà)，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶(hù)而設計，是純粹的科學(xué)性的藝術(shù)設計。檢驗一個(gè)界面的標準即不是某個(gè)項目開(kāi)發(fā)組領(lǐng)導的意見(jiàn)也不是項目成員投票的結果，而是最終用戶(hù)的感受。所以界面設計要和用戶(hù)研究緊密結合，是一個(gè)不斷為最終用戶(hù)設計滿(mǎn)意視覺(jué)效果的過(guò)程。
【ui界面設計規范】相關(guān)文章：
ui界面設計方向09-30
ui界面設計流程07-01
ui界面設計師的職能06-01
ui界面設計有哪些原則09-01
室內樓梯設計規范09-01
如何認識CAD界面06-26
園林景觀(guān)設計規范08-24
coreldraw界面顏色如何改變09-13