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年開心快樂，事業順利。