一、ui設計說明怎么寫

UI設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計，也叫界面設計。那么，ui設計說明怎么寫?下面小編為大家整理的一些內容，希望大家喜歡!

我們的目標是：(沒有蛀牙，^_^ 玩笑!)

既要清晰描述用戶界面原型中的細節和交互方式，又要方便項目組的其他開發人員、需求人員以及測試人員等角色交流察看的說明文檔。


主要內容包括：

1. 產品的目標和成功標準，(例如一個全新的預言項目不可能要求用戶滿意度在90%以上，對升級產品要求就會高一些。)

2. 產品最終用戶群及產品用途(了解用戶的年齡、職業、產品的使用環境等都是非常必要的)

3. 首先滿足基本功能。(例如DVD機的基本功能是播放影碟，可能還有播放CD的功能等等)

4. 主要功能(在產品的幾十個功能中通過用戶驗證和項目組篩選，選取用戶最常用到的功能，將其優化，以不同層次展現于界面上。)

5. 用戶界面特性。(每一款界面都有自己的特性，比如觸摸屏的操作界面與手機的操作界面就算功能完全一樣，結構、布局等特點也不會相同的。)

幾點注意事項

1. 必須緊貼需求，圍繞功能點展開。

2. 描述語言簡短精確(這樣別人看的時候才不會煩)

3. 保持文本的易維護性，建議使用WORD的大綱視圖編寫，便于更改和查找。

4. 說明書一定要有版本管理，對每次更新內容要做詳細說明。

5. 圖標要與名稱一同提交，并說明是什么類型，如桌面圖標、列表中的圖標、工具欄圖標、按鈕圖標、屬性框或提示信息框中的圖標等等。

6. 注意紀錄，包括項目組和用戶以及合作伙伴，如果在解釋某一特性時令兩人以上會感到困惑，那這一部分就需要更清楚的闡述了。

7. 設計與實現同步，這個時最難的了，很多設計由于程序無法實現都被“卡”掉，早期程序也無法確定是否可以實現，傷腦筋!

8. 維護UI設計說明書時不要忘記維護原型，作為UI設計說明書的補充原型是很重要的。

UI設計中容易被忽略的地方

1. 支持錯誤提示和撤銷操作

2. 簡便的安裝和卸載。

3. 必要的設置和幫助。

4. 異常處理、錯誤消息的描述和問題回應提示。

5. 除界面上有的圖標和按鈕外，還要有快節鍵、菜單訪問鍵、右鍵菜單、是否支持從其它軟件界面內托拽復制文件等操作的說明。

6. 域、菜單和按鈕在什么情況下為不可點擊狀態。

7. 狀態區，用來描述界面狀態的區域，通常位于頁面下方。(PS存儲時狀態區會顯示進度條)

8. 剪貼板行為，用戶在我們產品中拷貝的文字或圖片的局部，是否可以貼入其他程序。

9. 指針的行為，說明超過多長時間的等待時應出現沙漏狀態，在文本輸入區光標應有改變、有鏈接的地方有變為小手等

10. 聲音行為，警示音、按鈕觸發音等

11. 統一消息窗的彈出位置、背景色、大小、布局及特色

12. 菜單欄和下拉選項等程序動作的描述，是向下還是向右彈出等。

13. 動態狀態描述，如果要求窗口漸隱或漸顯，那就要說明漸隱或漸顯過程的時間以及方式(半透明還是馬賽克)等。

二、UI設計內容

與之相應，UI設計師的職能大體包括三方面：一是圖形設計，軟件產品的產品“外形”設計。二是交互設計，主要在于設計軟件的操作流程、樹狀結構、操作規范等。一個軟件產品在編碼之前需要做的就是交互設計，并且確立交互模型，交互規范。三是用戶測試/研究，這里所謂的“測試”，其目標恰在于測試交互設計的合理性及圖形設計的美觀性，主要通過以目標用戶問卷的形式衡量UI設計的合理性。如果沒有這方面的測試研究，UI設計的好壞只能憑借設計師的經驗或者領導的審美來評判，這樣就會給企業帶來極大的風險。

研究界面

圖形設計師Graphic UI designer

國內大部分UI工作者都是從事這個行業，是了解軟件產品、致力于提高軟件用戶體驗的產品外形設計師。

這些設計師大多是美術院校畢業的，其中大部分是有美術設計教育背景，例如工業外形設計，裝潢設計，信息多媒體設計等。

人與界面

交互設計師interaction designer

在圖形界面產生之前，長期以來UI設計師就是指交互設計師。交互設計師的工作內容就是設計軟件的操作流程，樹狀結構，軟件的結構與操作規范(spec)等。一個軟件產品在編碼之前需要作的就是交互設計，并且確立交互模型，交互規范。

交互設計師一般都是軟件工程師背景居多，也有視覺設計師轉行進入的。

研究人

用戶測試/研究工程師User experience engineer

任何的產品為了保證質量都需要測試，軟件的編碼需要測試，自然UI設計也需要被測試。這個測試和編碼沒有任何關系，主要是測試交互設計的合理性以及圖形設計的美觀性。測試方法一般都是采用焦點小組，用目標用戶問卷的形式來衡量UI設計的合理性。這個職位很重要，如果沒有這個職位，UI設計的好壞只能憑借設計師的經驗或者領導的審美來評判，這樣就會給企業帶來嚴重的風險性。

用戶研究工程師一般是心理學人文學背景比較合適。

綜上所述UI設計師就是：軟件圖形設計師、交互設計師、用戶研究工程師。

三、UI設計原則

1.簡易性

界面的簡潔是要讓用戶便于使用、便于了解產品，并能減少用戶發生錯誤選擇的可能性。

2.用戶語言

界面中要使用能反映用戶本身的語言，而不是游戲設計者的語言。

3.記憶負擔最小化

人腦不是電腦，在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩定，24小時內存在約25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。

4.一致性

它是每一個優秀界面都具備的特點。界面的結構必須清晰且一致，風格必須與產品內容相一致。

5.清楚

在視覺效果上便于理解和使用。

6.用戶的熟悉程度

用戶可通過已掌握的知識來使用界面，但不應超出一般常識。

7.從用戶習慣考慮

想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。

通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設計。如：書籍對比竹簡。

8.排列

一個有序的界面能讓用戶輕松的使用。

9.安全性

用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統的提示。

10.靈活性

簡單來說就是要讓用戶方便的使用，但不同于上述。即互動多重性，不局限于單一的工具(包括鼠標、鍵盤或手柄、界面)。

11.人性化

高效率和用戶滿意度是人性化的體現。應具備專家級和初級玩家系統，即用戶可依據自己的習慣定制界面，并能保存設置。

UI常見的手機UI

ui設計說明

四、UI設計規范

一致性原則

堅持以用戶體驗為中心設計原則，界面直觀、簡潔，操作方便快捷，用戶接觸軟件后對界面上對應的功能一目了然、不需要太多培訓就可以方便使用本應用系統。

字體

-保持字體及顏色一致，避免一套主題出現多個字體;

-不可修改的字段，統一用灰色文字顯示。

對齊

-保持頁面內元素對齊方式的一致，如無特殊情況應避免同一頁面出現多種數據對齊方式。

表單錄入

-在包含必須與選填的頁面中，必須在必填項旁邊給出醒目標識(*);

-各類型數據輸入需限制文本類型，并做格式校驗如電話號碼輸入只允許輸入數字、郵箱地址需要包含“@”等，在用戶輸入有誤時給出明確提示。

鼠標手勢

-可點擊的按鈕、鏈接需要切換鼠標手勢至手型;

保持功能及內容描述一致

-避免同一功能描述使用多個詞匯，如編輯和修改，新增和增加，刪除和清除混用等。建議在項目開發階段建立一個產品詞典，包括產品中常用術語及描述，設計或開發人員嚴格按照產品詞典中的術語詞匯來展示文字信息。

準確性原則

使用一致的標記、標準縮寫和顏色，顯示信息的含義應該非常明確，用戶不必再參考其它信息源。

顯示有意義的出錯信息，而不是單純的程序錯誤代碼。

避免使用文本輸入框來放置不可編輯的文字內容，不要將文本輸入框當成標簽使用。

使用縮進和文本來輔助理解。

使用用戶語言詞匯，而不是單純的專業計算機術語。

高效地使用顯示器的顯示空間，但要避免空間過于擁擠。

保持語言的一致性，如“確定”對應“取消”,“是”對應“否”。

可讀性原則

文字長度

文字的長度，特別是在大塊空白的設計中很重要，太長會導致眼睛疲憊，閱讀困難。太短又經常會造成尷尬的斷裂效果，斷字的使用也會造成大量的復合詞，這些斷裂嚴重的影響了閱讀的流暢性。

空間和對比度

每個字符同線路長度，間距也是重要的。所以每個字符之間的空間至少等于字符的尺寸，大多數數字設計人員習慣選擇一個最小的文字大小的150%為空間距離，這就可以留下足夠的空間。當每一行中讀取大段的文字，且線路長度過多或線之間的空間太少，都會造成理解困難。

對齊方式

無論是在文本中心，還是偏左，或者是沿著一個文件的右側對齊，文本的對齊相當重要，可以極大地影響可讀性。一般而言，文本習慣向左對齊，因為它反映了你的閱讀方式 – 從左至右。你熟悉每一行開始和結束的地方。

布局合理化原則

在進行UI設計時需要充分考慮布局的合理化問題，遵循用戶從上而下，自左向右瀏覽、操作習慣，避免常用業務功能按鍵排列過于分散，以造成用戶鼠標移動距離過長的弊端。多做“減法”運算，將不常用的功能區塊隱藏，以保持界面的簡潔，使用戶專注于主要業務操作流程，有利于提高軟件的易用性及可用性。

菜單

-保持菜單簡潔性及分類的準確性，避免菜單深度超過3層。

-菜單中功能是需要打開一個新頁面來完成的，需要在菜單名字后面加上“…”。【只適用于C/S架構，B/S請無視】。

按鈕

確認操作按鈕放置左邊，取消或關閉按鈕放置于右邊。

功能

-未完成功能必須隱藏處理，不要置于頁面內容中，以免引起誤會。

排版

-所有文字內容排版避免貼邊顯示(頁面邊緣)，盡量保持10-20像素的間距并在垂直方向上居中對齊;各控件元素間也保持至少10像素以上的間距，并確保控件元素不緊貼于頁面邊沿。

表格數據列表

-字符型數據保持左對齊，數值型右對齊(方便閱讀對比)，并根據字段要求，統一顯示小數位位數。

滾動條

-頁面布局設計時應避免出現橫向滾動條。

頁面導航(面包屑導航)

-在頁面顯眼位置應該出現面包屑導航欄，讓用戶知道當前所在頁面的位置，并明確導航結構，如：首頁>新聞中心>歐科智能招商服務平臺正式發布，其中帶下劃線部分為可點擊鏈接。

信息提示窗口

-信息提示窗口應位于當前頁面的居中位置，并適當弱化背景層以減少信息干擾，讓用戶把注意力集中在當前的信息提示窗口。一般做法是在信息提示窗口的背面加一個半透明顏色填充的遮罩層。

系統操作合理性原則

盡量確保用戶在不使用鼠標(只使用鍵盤)的情況下也可以流暢地完成一些常用的業務操作，各控件間可以通過Tab鍵進行切換，并將可編輯的文本全選處理。

查詢檢索類頁面，在查詢條件輸入框內按回車應該自動觸發查詢操作。

在進行一些不可逆或者刪除操作時應該有信息提示用戶，并讓用戶確認是否繼續操作，必要時應該把操作造成的后果也告訴用戶。

信息提示窗口的“確認”及“取消”按鈕需要分別映射鍵盤按鍵“Enter”和“ESC”。

避免使用鼠標雙擊動作，不僅會增加用戶操作難度，還可能會引起用戶誤會，認為功能點擊無效。

表單錄入頁面，需要把輸入焦點定位到第一個輸入項。用戶通過Tab鍵可以在輸入框或操作按鈕間切換，并注意Tab的操作應該遵循從左向右、從上而下的順序。

系統響應時間原則

系統響應時間應該適中，響應時間過長，用戶就會感到不安和沮喪，而響應時間過快也會影響到用戶的操作節奏，并可能導致錯誤。因此在系統響應時間上堅持如下原則：

2-5秒窗口顯示處理信息提示，避免用戶誤認為沒響應而重復操作;

5秒以上顯示處理窗口，或顯示進度條;

一個長時間的處理完成時應給予完成警告信息。