ui設計文檔怎麼寫，ui設計規範文檔怎麼寫

ui設計規範；ui設計規範有哪些？這個問題對於ui設計師來說應該是比較關心的吧，因爲作爲ui設計師，ui整理設計規範也是設計能力的一種體現。

所以，無論是自己設計創作還是推動產品開發，你的設計規範是否完善，對產品的質量起着決定性的關鍵作用。那麼我們今天就來聊聊這個問題吧！ui設計規範有幾大分類組成：1、Logo 品牌印象的直接感受，根據頁面不同背景所使用的Logo圖也不同。

將產品中所使用到的Logo統一分類，以下引用Moby's Petshop UI Style Guide的Logo資源例舉說明。Moby's Petshop UI 的Logo由圖形和文字組合而成，而品牌色爲藍色，Logo的使用也需要考慮到Footer黑色背景下的Logo。

所以用Logo的橫豎向排版和單個Logo圖形來分類更好。分類裏面則展現品牌色的Logo、品牌色背景的Logo、Footer黑色背景的Logo。

2、標準色 顏色是設計最重要的部分，沒有之一。細節決定品質，所以對顏色的運用格外細緻，顏色的搭配直接決定產品的品質感。

顏色大致可分爲品牌色、文本顏色、背景色、線框色等。給顏色添加關鍵詞，明確用於什麼界面。

以下引用real-pixels UI Style Guide的顏色規範，可以借鑑的是每個顏色不僅標註了顏色值，而且右側給出了顏色使用的場景，值得借鑑的是按鈕Normal狀態和Hover狀態的顏色值放在一起，這樣，對不同狀態顯示的顏色感受更直觀。對顏色值統一規範命名變量，提高開發效率的同時更好的維護設計規範。

在前端開發中，對顏色值進行編號，這樣對代碼也有着極大的優化。定義一個設計規範的CSS樣式庫，開發過程中就不用重複修改CSS參數值，直接引用定義好的變量名就可以，這樣修改設計規範的成本大大降低。

3、字體 字體是設計中必不可少的考慮因素，不同的字體氣質不一樣，並且不同場景下帶給人的感受也不一樣。所以需要在設計的時候考慮到字體的設計效果，然後在設計規範中註明。

以下引用的是Retail Banking Service UI Style Guide中的字體規範，在定義字體名稱的同時也定義了字體的風格，並且添加了不同字體風格的預覽效果，常見的字體風格有：Light、Regular、Italic、Semibold、Bold。4、段落設置 在實際的產品設計中，段落有很多種樣式，不同場景下的段落要求也不一樣。

比如：閱讀內容的段落要求文本可閱讀性強，所以對字體、字號、顏色、行間距等要求簡單易讀。而帶有裝飾性的段落文本則不需要那麼嚴謹，裝飾性強就可以。

需要注意的是：在定義段落默認字體的時候還需要定義一個後備字體，即默認字體不能正常顯示情況下顯示的字體。設計的水平層次就在於對細節的打磨，這也就是段落規範在設計中存在的意義。

5、圖標 圖標是重要的軟件標識，在設計資源中是最重要的模塊之一。在軟件產品中甚至可能每個頁面都存在圖標，圖標除了美化的作用以外，還有着明確指代含義的計算機圖形。

具體分爲以下三個作用：圖標是與其它網站鏈接以及讓其它網站鏈接的標誌和門戶。圖標是網站形象的重要體現。

圖標能使受衆便於選擇。根據圖標大小和使用用途進行分類整理設計規範，這樣才更清晰明瞭。

6、圖片 圖片也是屬於設計規範最重要的部分之一，按照用途分類整理圖片資源，設計風格系統化。7、度量 在設計的過程中，我們經常會使用一套規範的度量標準，來保持產品的一致性，分別爲圓角值、間距、大小。

對度量解釋最好的是設計中經常使用到的柵格系統（Grid Systems），運用固定的格子設計版面佈局，其風格工整簡潔。這就是我們在網頁和APP設計的過程中經常使用到柵格系統的原因。

8、陰影 陰影風格及參數也是設計規範中的一部分，在整理設計規範的時候，需要注意的是陰影的參數值是網頁中控制陰影的參數值，而不是設計軟件中的參數值。舉個例子：網頁中陰影對應的參數值爲：box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 ，不透明度：10%，這纔是程序員需要的陰影參數值，否則最終開發出來的陰影會出現不一致的情況，無法達到規範的目的。

9、組件 常用的UI組件（Component）:Button控件、下拉框、選擇框（單選複選框）、時間選擇器、輸入框、搜索框、進度條、分頁器、提示框、警告框、表格、彈出面板、數字步進器、選項卡等。Button控件 按鈕是最常見的組件之一，按鈕有5個狀態：Normal、Hover、Active、Disabled 、Loading。

需要在規範中分別羅列出這五個狀態，標註上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值。如果是圖標按鈕的話，除了上述參數值以外還需要標註icon和按鈕文本之間的間距和icon圖標的大小。

10、下拉框 下拉框是爲用戶提供多個選擇的單選組件，優點是用最簡單的界面佈局方式收納了很多的選項，需要注意定義下拉選擇框彈出的時候，鼠標移動上去的Normal、Hover、Active狀態。11、選擇框（單選複選框） 顧名思義，單選框是衆多選擇裏面選一個，而複選框是衆多選擇裏面可以無限制選擇。

單選框和複選框都需要三個狀態，即未選中狀態、選中狀態和不可點擊狀態。時間選擇器：時間選擇器是選擇年月日的組件，分別對應年月日星期的。

1. 有UI效果圖，導入進axure裏添加文字後，可以直接生成pdf文檔。

2. 如沒有UI效果圖，用axure畫出各個ui的線框圖或添加交互效果後，用 Foxit PDF Editor （免費）編輯pdf裏的字，把各個UI頁面的說明一改，齊活，特快！望給分~~~

axure下載地址：?ald

Foxit PDF Editor 下載地址：

UI設計文檔主要是爲了解釋說明自己的設計，讓別人能快速地瞭解自己的設計。

UI 設計文檔要包含這樣幾個大的方面

1、文檔接受（文檔的目的、文檔的範圍、讀者對象、參考的文檔，術語與解釋）

2、用戶界面設計規範

3、用戶界面彙總

4、界面標準和公共控件（界面元素精細標準、標準按鈕庫和快捷鍵、標準交互對話框庫、標準分辨率、標準操作、標準表格、標準編輯項類型庫、標準列表、標準快捷搜索）

5、界面詳細設計

很多人很頭疼，年度總結與新年目標該怎麼寫？其實年度總結與目標正好是我們向上級領導、以及同事們展現你對本職工作認識度與工作計劃的途徑。寫得好零領導更加喜歡你，也許你的一個建議成爲了公司前景的目標。

年度目標一般要結合自己的本職工作去寫、切忌太寬泛：

1、首先是總結自己進來做過的項目、擔任的事項，是否順利，有什麼可以改進的地方？有哪些可以學習的地方？一條一條列出來，簡評一下。

2、目標是建立在當下的，不能沒有根據的提出來。所以在你總結了你的今年所經歷的大大小小的項目後，是否在本職工作中還需要有提升的地方？（你可以從UI工作流程中、團隊溝通中、自己對產品設計的理解中、團隊需要你的地方等等來簡述）

3、本職工作講完後，可以說說通過其他什麼途徑，來提升自己的對UI設計的理解、產品需求的研究、以及在綜合產品知識方面的瞭解。例如看什麼書、去哪些平臺堅持每週看幾篇設計文檔、或者去參加XX舉辦的設計大賽取得一個什麼成績，等等。

最後，祝你2017年開心快樂，事業順利！

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

主要內容包括：

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

2. 產品最終用戶羣及產品用途（瞭解用戶的年齡、職業、產品的使用環境等都是非常必要的）

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

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

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

我們的目標是：

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

1. 產品的目標和成功標準，（例如一個全新的預言項目不可能要求用戶滿意度在90%以上，對升級產品要求就會高一些。）2. 產品最終用戶羣及產品用途（瞭解用戶的年齡、職業、產品的使用環境等都是非常必要的）

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

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

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

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

2. 描述語言簡短精確（這樣別人看的時候纔不會煩）

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

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

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

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

8. 維護UI設計說明書時不要忘記維護原型，作爲UI設計說明書的補充原型是很重要的。UI設計中容易被忽略的地方

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

2. 簡便的安裝和卸載。

3. 必要的設置和幫助。

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

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

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

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

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

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

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

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

很多人很頭疼，年度總結與新年目標該怎麼寫？其實年度總結與目標正好是我們向上級領導、以及同事們展現你對本職工作認識度與工作計劃的途徑。

寫得好零領導更加喜歡你，也許你的一個建議成爲了公司前景的目標。年度目標一般要結合自己的本職工作去寫、切忌太寬泛：1、首先是總結自己進來做過的項目、擔任的事項，是否順利，有什麼可以改進的地方？有哪些可以學習的地方？一條一條列出來，簡評一下。

2、目標是建立在當下的，不能沒有根據的提出來。所以在你總結了你的今年所經歷的大大小小的項目後，是否在本職工作中還需要有提升的地方？（你可以從UI工作流程中、團隊溝通中、自己對產品設計的理解中、團隊需要你的地方等等來簡述）3、本職工作講完後，可以說說通過其他什麼途徑，來提升自己的對UI設計的理解、產品需求的研究、以及在綜合產品知識方面的瞭解。

例如看什麼書、去哪些平臺堅持每週看幾篇設計文檔、或者去參加XX舉辦的設計大賽取得一個什麼成績，等等。最後，祝你2017年開心快樂，事業順利。