網站ui設計規範文檔

1、UI設計師需要看PRD文檔嗎

產品經理主要是整理PRD文檔，然後再畫好產品流程圖及原型圖，然後結合產品分析、市場、用戶跟UI設計師溝通，定位產品的風格、主色調、功能、用戶體驗注意事項等。產品定位完成後下一個環節就是交給設計師。

2、超實用，UI設計師有哪些應該會寫的文件

企劃書

這是 Planner 的工作，但 UI 設計師一定要具備 5W 2H 1E 的基本能力。

規格書

規格書分成 2 種， Functional Spec 功能規格書、Technical Spec 技術規格書。技術規格書是 RD 在寫的，和設計師關系不大，功能規格書才是設計師要注意的目標。

Wireframe

正常的軟體開發流程一定包含企劃書、規格書，到了 Wireframe 階段應該就是 UI 設計師熟悉的工作了。

Mockup

就是開 Photoshop 或 Sketch 之類繪圖軟體製作精稿，設計師最熟悉的會話，

切圖

切圖這工作可能在 F2E 或設計師身上，F2E 的工作剛好踩在各種在線比較萬能一些，若是 App 項目會由 UI 切圖。

標示文件

當 Mockup 製作完成進入切圖階段後，需要製作一份寫明各元素尺寸、位置、色碼、透明度、字型、字級、文件名等信息的文件交給 RD，RD 才會知道「數值」多少。別指望他們在沒有任何說明的情況下就知道這圖片怎麼用、放哪裡、間隔是幾 px，

3、請問誰能提供一份界面測試的規範文檔供參考，謝謝

界面是軟體與用戶交互的最直接的層，界面的好壞決定用戶對軟體的第一印象。而且設計良好的界面能夠引導用戶自己完成相應的操作，起到向導的作用。同時界面如同人的面孔，具有吸引用戶的直接優勢。設計合理的界面能給用戶帶來輕松愉悅的感受和成功的感覺，相反由於界面設計的失敗，讓用戶有挫敗感，再實用強大的功能都可能在用戶的畏懼與放棄中付諸東流。目前界面的設計引起軟體設計人員的重視的程度還遠遠不夠，直到最近網頁製作的興起，才受到專家的青睞。而且設計良好的界面由於需要具有藝術美的天賦而遭拒絕。
目前流行的界面風格有三種方式：多窗體、單窗體以及資源管理器風格，無論那種風格，以下規則是應該被重視的。
1：易用性：
按鈕名稱應該易懂，用詞准確，屏棄沒楞兩可的字眼，要與同一界面上的其他按鈕易於區分，能望文知意最好。理想的情況是用戶不用查閱幫助就能知道該界面的功能並進行相關的正確操作。
易用性細則：
1):完成相同或相近功能的按鈕用Frame框起來，常用按鈕要支持快捷方式。
2):完成同一功能或任務的元素放在集中位置，減少滑鼠移動的距離。
3):按功能將界面劃分區域塊，用Frame框括起來,並要有功能說明或標題。
4):界面要支持鍵盤自動瀏覽按鈕功能，即按Tab鍵、回車鍵的自動切換功能。
5):界面上首先要輸入的和重要信息的控制項在Tab順序中應當靠前,位置也應放在窗口上較醒目的位置。
6):同一界面上的控制項數最好不要超過10個，多於10個時可以考慮使用分頁界面顯示。
7):分頁界面要支持在頁面間的快捷切換，常用組合快捷鍵Ctrl+Tab
8):默認按鈕要支持Enter及選操作，即按Enter後自動執行默認按鈕對應操作。
9):可寫控制項檢測到非法輸入後應給出說明並能自動獲得焦點。
10):Tab鍵的順序與控制項排列順序要一致，目前流行總體從上到下，同時行間從左到右的方式。
11):核取方塊和選項框按選擇幾率的高底而先後排列。
12):核取方塊和選項框要有默認選項，並支援Tab選擇。
13):選項數相同時多用選項框而不用下拉清單框。
14):界面空間較小時使用下拉框而不用選項框。
15):選項數較少時使用選項框，相反使用下拉列表框。
16):專業性強的軟體要使用相關的專業術語，通用性界面則提倡使用通用性詞語。
2： 規范性：
通常界面設計都按Windows界面的規范來設計，可以說：界面遵循規范化的程度越高，則易用性相應的就越好。小型軟體一般不提供工具廂。
規范性細則：
1):常用菜單要有命令快捷方式。
2):完成相同或相近功能的菜單用橫線隔開放在同一位置。
3):菜單前的圖標能直觀的代表要完成的操作。
4):菜單深度一般要求最多控制在三層以內。
5):工具欄要求可以根據用戶的要求自己選擇定製。
6):相同或相近功能的工具欄放在一起。
7):工具欄中的每一個按鈕要有及時提示信息。
8):一條工具欄的長度最長不能超出屏幕寬度。
9): 工具欄的圖標能直觀的代表要完成的操作。
10):系統常用的工具欄設置默認放置位置。
11):工具欄太多時可以考慮使用工具箱。
12):工具箱要具有可增減性，由用戶自己根據需求定製。
13):工具箱的默認總寬度不要超過屏幕寬度的1/5。
14): 狀態條要能顯示用戶切實需要的信息，常用的有：目前的操作、系統狀態、用戶位置、用戶信息、提示信息、錯誤信息等，如果某一操作需要的時間較長，還應該顯示進度條和進程提示。
15)：滾動條的長度要根據顯示信息的長度或寬度能及時變換，以利於用戶了解顯示信息的位置和百分比。
16)：狀態條的高度以放置五好字為宜，滾動條的寬度比狀態條的略窄。
17)：菜單和工具條要有清楚的界限;菜單要求凸出顯示，這樣在移走工具條時仍有立體感。
18)：菜單和狀態條中通常使用5號字體。工具條一般比菜單要寬，但不要寬的太多，否則看起來很不協調。
19): 右鍵快捷菜單採用與菜單相同的准則。
3：幫助設施：
系統應該提供詳盡而可靠的幫助文檔，在用戶使用產生迷惑時可以自己尋求解決方法。
幫助設施細則：
1)：幫助文檔中的性能介紹與說明要與系統性能配套一致。(我們的系統幫助文檔都是系統的祖先時期的說明，讓人困惑)。
2)：打包新系統時，對作了修改的地方在幫助文檔中要做相應的修改。
3)：操作時要提供及時調用系統幫助的功能。常用F1。
4)：在界面上調用幫助時應該能夠及時定位到與該操作相對的幫助位置。也就是說幫助要有即時針對性。
5)：最好提供目前流行的聯機幫助格式或HTML幫助格式。
6)：用戶可以用關鍵詞在幫助索引中搜索所要的幫助，當然也應該提供幫助主題詞。
7)：如果沒有提供書面的幫助文檔的話，最好有列印幫助的功能。
8)：在幫助中應該提供我們的技術支持方式，一旦用戶難以自己解決可以方便的尋求新的幫助方式。
4：合理性：
屏幕對角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引用戶注意力的位置，在放置窗體時要注意利用這兩個位置。
合理性細則：
1)：父窗體或主窗體的中心位置應該在對角線焦點附近。
2)：子窗體位置應該在主窗體的左上角或正中。
3)：多個子窗體彈出時應該依次向右下方偏移，以顯示窗體出標題為宜。
4)：重要的命令按鈕與使用較頻繁的按鈕要放在界面上注目的位置。
5)：錯誤使用容易引起界面退出或關閉的按鈕不應該放在易點擊的位置。橫排開頭或最後與豎排最後為易點位置。
6)：與正在進行的操作無關的按鈕應該加以屏蔽(Windows中用灰色顯示，沒法使用該按鈕)。
7)：對可能造成數據無法恢復的操作必須提供確認信息,給用戶放棄選擇的機會。
8)：非法的輸入或操作應有足夠的提示說明。
9): 對運行過程中出現問題而引起錯誤的地方要有提示，讓用戶明白錯誤出處，避免形成無限期的等待。
10): 提示、警告、或錯誤說明應該清楚、明了、恰當。
5：美觀與協調性：
界面應該大小適合美學觀點，感覺協調舒適，能在有效的范圍內吸引用戶的注意力。
美觀與協調性細則：
1): 長寬接近黃金點比例，切忌長寬比例失調、或寬度超過長度。
2): 布局要合理,不宜過於密集，也不能過於空曠，合理的利用空間。
3): 按鈕大小基本相近，忌用太長的名稱，免得佔用過多的界面位置。
4): 按鈕的大小要與界面的大小和空間要協調。
5): 避免空曠的界面上放置很大的按鈕。
6)：放置完控制項後界面不應有很大的空缺位置。
7): 字體的大小要與界面的大小比例協調, 通常使用的字體中宋體9-12較為美觀，很少使用超過12號的字體。
8): 前景與背景色搭配合理協調，反差不宜太大，最好少用深色，如大紅、大綠等。常用色考慮使用Windows界面色調。
9): 如果使用其他顏色，主色調要柔和，具有親和力與磁力，堅決杜絕刺目的顏色。
10): 大型系統常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。
11): 界面風格要保持一致，字的大小、顏色、字體要相同，除非是需要藝術處理或有特殊要求的地方。
12): 如果窗體支持最小化和最大化或放大時，窗體上的控制項也要隨著窗體而縮放；切忌只放大窗體而忽略控制項的縮放。
13)：對於含有按鈕的界面一般不應該支持縮放，即右上角只有關閉功能。
14): 通常父窗體支持縮放時，子窗體沒有必要縮放。
15)：如果能給用戶提供自定義界面風格則更好，由用戶自己選擇顏色、字體等。
6：菜單位置：
菜單是界面上最重要的元素，菜單位置按照按功能來組織。
菜單測試細則：
1): 菜單通常採用「常用--主要--次要--工具--幫助」的位置排列，符合流行的Windows風格。
2): 常用的有「文件」、「編輯」，「查看」等，幾乎每個系統都有這些選項，當然要根據不同的系統有所取捨。
3): 下拉菜單要根據菜單選項的含義進行分組，並且按照一定的規則進行排列，用橫線隔開。
4): 一組菜單的使用有先後要求或有向導作用時，應該按先後次序排列。
5): 沒有順序要求的菜單項按使用頻率和重要性排列，常用的放在開頭， 不常用的靠後放置；重要的放在開頭，次要的放在後邊。
6): 如果菜單選項較多，應該採用加長菜單的長度而減少深度的原則排列。
7): 菜單深度一般要求最多控制在三層以內。
8): 對常用的菜單要有快捷命令方式，組合原則見8。
9): 對與進行的操作無關的菜單要用屏蔽的方式加以處理，如果採用動態載入方式——即只有需要的菜單才顯示——最好。
10): 菜單前的圖標不宜太大，與字高保持一直最好。
11): 主菜單的寬度要接近，字數不應多於四個，每個菜單的字數能相同最好。
12): 主菜單數目不應太多，最好為單排布置。
13):菜單條是否顯示在合適的語境中？
14):應用程序的菜單條是否顯示系統相關的特性（如時鍾顯示）？
15):下拉式操作能正確工作嗎？
16):菜單、調色板和工具條是否工作正確？
17):是否適當地列出了所有的菜單功能和下拉式子功能？
18):是否可能通過滑鼠訪問所有的菜單功能？
19):相同功能按鈕的圖標和文字是否一致？
20):是否能夠用其他的文本命令激活每個菜單功能？
21):菜單功能是否隨當前的窗口操作加亮或變灰？
22):菜單功能是否正確執行？
23):菜單功能的名字是否具有自解釋性？
24):菜單項是否有幫助，是否語境相關？
25):在整個互動式語境中，是否可以識別滑鼠操作？
26):如果要求多次點擊滑鼠，是否能夠在語境正確識別？
27):如果滑鼠有多個按鈕，是否能夠在語境中正確識別？
28):游標、處理指示器和識別指針是否隨操作恰當地改變？
7:獨特性：
如果一味的遵循業界的界面標准，則會喪失自己的個性.在框架符合以上規范的情況下，設計具有自己獨特風格的界面尤為重要。尤其在商業軟體流通中有著很好的遷移默化的廣告效用。
測試細則：
1): 安裝界面上應有單位介紹或產品介紹，並有自己的圖標。
2): 主界面，最好是大多數界面上要有公司圖標。
3): 登錄界面上要有本產品的標志，同時包含公司圖標。
4): 幫助菜單的「關於」中應有版權和產品信息。
5): 公司的系列產品要保持一直的界面風格，如背景色、字體、菜單排列方式、圖標、安裝過程、按鈕用語等應該大體一致。
8：快捷方式的組合
在菜單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤的用戶操作得更快一些在西文Windows及其應用軟體中快捷鍵的使用大多是一致的。
菜單中：
1):面向事務的組合有:
Ctrl-D 刪除 ；Ctrl-F 尋找 ；Ctrl –H替換；Ctrl-I 插入 ；Ctrl-N 新記錄 ；Ctrl-S 保存 Ctrl-O 打開。
2)：列表:
Ctrl-R ，Ctrl-G定位；Ctrl-Tab下一分頁窗口或反序瀏覽同一頁面控制項；。
3):編輯:
Ctrl-A全選；Ctrl-C 拷貝；Ctrl-V 粘貼；Ctrl-X 剪切；Ctrl-Z撤消操作；Ctrl-Y恢復操作。
4)文件操作:
Ctrl-P 列印；Ctrl-W 關閉。
5):系統菜單
Alt-A文件；Alt-E編輯；Alt-T工具；Alt－W窗口；Alt－H幫助。
6):MS Windows保留鍵:
Ctrl-Esc 任務列表 ；Ctrl-F4 關閉窗口； Alt-F4 結束應用；Alt-Tab 下一應用 ；Enter 預設按鈕/確認操作 ；Esc 取消按鈕/取消操作；Shift-F1 上下文相關幫助。
按鈕中：
可以根據系統需要而調節，以下只是常用的組合。
Alt-Y確定(是)；Alt-C取消；Alt-N 否；Alt-D刪除；Alt-Q退出；Alt-A添加；Alt-E編輯；Alt-B瀏覽；Alt-R讀；Alt-W寫。
這些快捷鍵也可以作為開發中文應用軟體的標准,但亦可使用漢語拼音的開頭字母。
9:安全性考慮：
在界面上通過下列方式來控制出錯幾率，會大大減少系統因用戶人為的錯誤引起的破壞。開發者應當盡量周全地考慮到各種可能發生的問題,使出錯的可能降至最小。如應用出現保護性錯誤而退出系統,這種錯誤最容易使用戶對軟體失去信心。因為這意味著用戶要中斷思路,並費時費力地重新登錄,而且已進行的操作也會因沒有存檔而全部丟失。
安全性細則：
1)：最重要的是排除可能會使應用非正常中止的錯誤。
2)：應當注意盡可能避免用戶無意錄入無效的數據。
3)：採用相關控制項限制用戶輸入值的種類。
4)：當用戶作出選擇的可能性只有兩個時,可以採用單選框。
5)：當選擇的可能再多一些時,可以採用復選框,每一種選擇都是有效的,用戶不可能輸入任何一種無效的選擇。
6)：當選項特別多時，可以採用列表框，下拉式列表框。
7)：在一個應用系統中,開發者應當避免用戶作出未經授權或沒有意義的操作。
8)：對可能引起致命錯誤或系統出錯的輸入字元或動作要加限制或屏蔽。
9):對可能發生嚴重後果的操作要有補救措施。通過補救措施用戶可以回到原來的正確狀態。
10):對一些特殊符號的輸入、與系統使用的符號相沖突的字元等進行判斷並阻止用戶輸入該字元。
11)：對錯誤操作最好支持可逆性處理，如取消系列操作。
12):在輸入有效性字元之前應該阻止用戶進行只有輸入之後才可進行的操作。
13):對可能造成等待時間較長的操作應該提供取消功能。
14)：特殊字元常有；;』」><,『『：「〔」｛、\|｝〕+=)-(_*&&^%$#@!
,.。?/還有空格。
15)：與系統採用的保留字元沖突的要加以限制。
16)：在讀入用戶所輸入的信息時，根據需要選擇是否去掉前後空格。
17)：有些讀入資料庫的欄位不支持中間有空格，但用戶切實需要輸入中間空格，這時要在程序中加以處理。
10:多窗口的應用與系統資源：
設計良好的軟體不僅要有完備的功能，而且要盡可能的佔用最底限度的資源。
1)：在多窗口系統中，有些界面要求必須保持在最頂層，避免用戶在打開多個窗口時，不停的切換甚至最小化其他窗口來顯示該窗口。
2)：在主界面載入完畢後自動卸出內存，讓出所佔用的WINDOWS系統資源。
3)：關閉所有窗體，系統退出後要釋放所佔的所有系統資源 ，除非是需要後台運行的系統。
4)：盡量防止對系統的獨占使用。
5)：窗口能否基於相關的輸入或菜單命令適當地打開？
6)：窗口能否改變大小、移動和滾動？
7)：窗口中的數據內容能否使用滑鼠、功能鍵、方向箭頭和鍵盤訪問？
8)：當被覆蓋並重調用後，窗口能否正確地再生？
9)：需要時能否使用所有窗口相關的功能？
10)：所有窗口相關的功能是可操作的嗎？
11)：是否有相關的下拉式菜單、工具條、滾動條、對話框、按鈕、圖標和其他控制可為窗口可用，並適當地顯示？
12)：顯示多個窗口時，窗口的名稱是否被適當地表示？
13)：活動窗口是否被適當地加亮？
14)：如果使用多任務，是否所有的窗口被實時更新？
15)：多次或不正確按滑鼠是否會導致無法預料的副作用？
16)：窗口的聲音和顏色提示和窗口的操作順序是否符合需求？
17)：窗口是否正確地關閉？

4、UI設計中的動效如何通過文檔進行有效描述

動效設計涉及到動畫曲線和開發到底能不能實現怎麼實現的問題 很難像ui或者gui給開發一份spec就可以說清楚
最直觀的就是交付demo和動畫spec（如果跟你配合的開發會一些動畫的話 你最好也輸出給他工程文件）demo用於演示效果 spec中要明確寫明是如何運動的 還要註明參數和時間
但是作為動效設計師也最好可以掌握一門編程語言 這樣在設計動效時 心裡清楚哪些效果可以實現 要怎麼實現 開發的工作量和難易程度心裡也有個譜

5、UI 設計文檔要包含哪些內容

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

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

1、文檔接受(文檔的目的、文檔的范圍、讀者對象、參考的文檔，術語與解釋)

2、用戶界面設計規范

3、用戶界面匯總

4、界面標准和公共控制項(界面元素精細標准、標准按鈕庫和快捷鍵、標准交互對話框庫、標准解析度、標准操作、標准表格、標准編輯項類型庫、標准列表、標准快捷搜索)

5、界面詳細設計

6、BAT等大公司有前端開發規範文檔和UI規範文檔嗎

有的，大公司規范較多，可能不採用外面流行的框架，有公司自己內部的框架，一些規範文檔都是自己公司編寫的

7、ui設計師應該怎麼管理文件

我也是一名 UI設計師，也許你會跟我一樣，電腦上有很多參考的案例、自己練習的作品、各種項目原文件等等，目前是採用專門管理素材的工具「Eagle」再整理，它支持很多格式，而且收藏、管理、檢索功能都做的挺好用。

8、UI設計師有哪些應該會寫的文件

UI 設計師一定要具備 5W 2H 1E 的基本能力。
What 什麼—— 企劃的目的、內容。
Who 誰—— 企劃相關人員。
Where 何處 —— 企劃實施場所。
When 何時 —— 企劃的時間。
Why 為什麼 —— 企劃緣由、前景。
How 如何 —— 企劃的方法和運轉實施。
How much 多少 —— 企劃預算。
Effect 效果 —— 預測企劃結果、效果

9、UI 設計文檔要包含哪些內容?

UI 設計文檔要包含這樣幾個大的方面
1、文檔接受（文檔的目的、文檔的范圍、讀者對象、參考的文檔，術語與解釋）
2、用戶界面設計規范
3、用戶界面匯總
4、界面標准和公共控制項（界面元素精細標准、標准按鈕庫和快捷鍵、標准交互對話框庫、標准解析度、標准操作、標准表格、標准編輯項類型庫、標准列表、標准快捷搜索）
5、界面詳細設計

10、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、選擇框（單選復選框）

顧名思義，單選框是眾多選擇裡面選一個，而復選框是眾多選擇裡面可以無限制選擇。單選框和復選框都需要三個狀態，即未選中狀態、選中狀態和不可點擊狀態。

時間選擇器：

時間選擇器是選擇年月日的組件，分別對應年月日星期的信息，在設計的時候需要考慮到4個狀態，分別是：Select、Not_Select、Hover和Disable，並且寫進設計規范。

輸入框：

輸入文本框是我們軟體產品設計必不可少的組件，文本輸入框有4個狀態：Normal、Active、Disable和Error。

搜索框：

和輸入框相同的地方是都需要聚焦然後輸入內容完成操作，應該有為Normal、Active、搜索下拉狀態、Error狀態。

進度條：

這個需要在規范中註明上傳進度條的整個交互操作流程，對Normal狀態、點擊上傳/拖拽上傳狀態、上傳中、上傳成功、上傳失敗，整個流程狀態的整理。在上傳過程中，任何用戶操作都應該有及時響應的動作，這樣用戶在使用的過程中才不會迷茫。

分頁器：

分頁器是用於切換內容頁面的復合組件，常規的分頁器有上下頁操作按鈕、分頁頁碼按鈕、輸入頁碼手動查找的搜索框，以及分頁器的4個狀態：Normal、Hover 、Active、Disabled。

提示框：

提示框是一個事件觸發彈出面板顯示的組件，經常使用提示框的地方是，刪除按鈕、疑難問題點、提示類彈出信息等。這個風格設計就比較多了，設計風格各不相同，定義底板樣式、文字樣式和陰影參數。

警告框：

頁面報錯時的顯示樣式，常用的警告類信息是：操作成功、提醒用戶注意、警告用戶注意等。

表格：

表格類信息居多，應重點整理表格樣式以及文本顏色大小。

彈出面板：

彈出面板主要由4個部分組成，分別是面板內的文本信息、按鈕、面板大小樣式、蒙版顏色和透明度。

數字步進器：

數字步進器屬於復合類型的組件，可以理解為按鈕和輸入框聯動的組件，所以輸入框和按鈕擁有的屬性狀態，步進器都有。

選項卡：

切換選項卡即切換內容，和下拉選擇框不同的是，選項卡是將多個選項都排列出來的單選組件，需要考慮4個狀態：Normal 、Hover 、Active 、Disabled 。

 ui設計規范，ui設計規范有哪些？這個問題介紹到這里就介紹完了，現在你清楚ui設計了嗎？設計規范對整個項目的規范性推動很強大，但是需要花時間和耐心細心打磨，所以需要花費很多時間和精力去整理資料、編輯素材、分類整合，最後還要在設計軟體中將整個規范重新排列設計。如果你還有其他關於ui設計的問題歡迎持續關注易夏嵐或者與我進行交流~