在前端中如何在表格中最后一行加入输入框_UI设计进阶干货 — 如何制定UI规范...
APP為何要制定設計規范
作為UI設計師，整理設計規范也是設計能力的一種體現。但很多小公司的設計師都覺得, 整個公司只有自己一個設計師, 所有的設計稿都是自己一個人做的, 風格肯定都是統一的, 所以沒必要花那么長時間去做一個沒有用的東西。
但其實規范的本身并不是只給設計師用的, 他更大的作用是對于整個團隊, 比如方便和開發之間的溝通, 幫助他們制作統一的組件, 以后用到的時候直接調用。
而對于設計師來說, 也不用重復做圖、重復標注, 改動一個的時候就能同步所有, 大大提高了工作效率。所以，無論是自己設計創作的階段還是和程序員溝通推動產品開發階段，你的設計規范是否完善，對產品的質量起著決定性的關鍵作用。
在UI設計的過程中，設計規范是一個關鍵步驟。今天為大家整理了設計規范中的分類情況，UI設計規范有幾大分類組成，分別是：尺寸、標準色、字號、段落設置、圖標、圖片、間距、圓角值、大小、陰影、組件等。
1尺寸
設計圖尺寸
雖說現在大多數人都是以750 (@2x) 為設計稿, 但是也還是有人720 (@2x) 的尺寸, 或是375 (@1x) 的尺寸, 比如我就是用的720,所以設計之初最先要定一個統一的設計尺寸, 特別是多個設計師合作的時候, 千萬不要想當然的以為別人都和你一樣。
間距大小
間距包括頁邊距、模塊與模塊之間的間距, 這種全局的間距大小必須要一致, 頁邊距的大小很好定, 基本上20、24、32居多, 根據產品特性定一個統一的就好。
而模塊與模塊之間的間距就相對復雜一點, 在定之前需要先確定模塊之間的分割方式, 是用線、還是面、還是留白, 然后再確定間距。
確定好模塊與模塊之間的分割方式后，還需要確定模塊內部的，確定之后就要嚴格執行。
比如規范定的模塊與模塊之間用線，模塊內部之間用留白，那后續所有頁面都需要按照這個規則來（特殊情況除外）。
2、標準色
顏色是設計最重要的部分，沒有之一。細節決定品質，所以對顏色的運用格外細致，顏色的搭配直接決定產品的品質感。包括基礎標準色（主色）、基礎文字色, 還應該包括全局標準色（背景色、分割線色值等）這些都需要標好色值以及使用的場景。
當顏色是漸變的時候, 也需要標清楚漸變的顏色。
對顏色值統一規范命名變量，提高開發效率的同時更好的維護設計規范。
在前端開發中，對顏色值進行編號，這樣對代碼也有著極大的優化。定義一個設計規范的CSS樣式庫，開發過程中就不用重復修改CSS參數值，直接引用定義好的變量名就可以，這樣修改設計規范的成本大大降低。
3、字體
字體是設計中必不可少的考慮因素，不同的字體氣質不一樣，并且不同場景下帶給人的感受也不一樣。所以需要在設計的時候考慮到字體的設計效果，然后在設計規范中注明。
在定義字體名稱的同時也定義了字體的風格，并且添加了不同字體風格的預覽效果，常見的字體風格有：Light、Regular、Italic、Semibold、Bold。
還有一點也不能忘記，那就是行間距，不管是一行文字還是多行文字，我們都需要標注清楚行間距，也就是行高，如果是段落的話還需要標注段落間距。
所以為了避免團隊的其他成員忽略了文字的行間距，我們需要在做規范的時候標明，所有文字必須注明行間距。
4、段落設置
在實際的產品設計中，段落有很多種樣式，不同場景下的段落要求也不一樣。比如：閱讀內容的段落要求文本可閱讀性強，所以對字體、字號、顏色、行間距等要求簡單易讀。而帶有裝飾性的段落文本則不需要那么嚴謹，裝飾性強就可以。
需要注意的是：在定義段落默認字體的時候還需要定義一個后備字體，即默認字體不能正常顯示情況下顯示的字體。設計的水平層次就在于對細節的打磨，這也就是段落規范在設計中存在的意義。
5、圖標
圖標具體分為以下三個作用：
在我們的項目緊急而人員又不足的時候, 可能沒有那么多時間，去把所有的圖標都畫的精細，那這個時候我們可以先定尺寸。
當然這里說的定尺寸不是讓你把頁面內所有圖標的尺寸都定好，而是說優先定幾個大的模塊，比如頂導航、底導航、個人中心的...
等后續空閑的時候我們再去細化這些圖標，開發也只需要換張圖, 不影響其他。
建議圖標尺寸盡量不要過多，比如32、36、40、48 都有, 這樣會顯得凌亂無序, 而且這些完全可以統一成兩個大小的, 比如32、48的。
因為圖標是可以有留白區域的, 也就說圖標本身大小可以是40, 但是切圖尺寸是48。
這樣做的好處就是圖標大小種類較少、方便記憶、也顯得專業, 畢竟誰也不希望最后整理出來的規范, 32的圖標2個、36的圖標2個、40的圖標2個, 這樣孤零零的多慘, 所以建議圖標尺寸不要太多。
6、圖片
圖片包括 APP 內出現的所有圖, 一般情況下都是產品圖和頭像, 但是需要注意的是在制定規范之前, 要先把圖片比例定好, 常見的比例有 1:1、2:1、4:3、16:9 等等，也是屬于設計規范最重要的部分之一，按照用途分類整理圖片資源，設計風格系統化。
然后再把每個模塊所用的圖片大小以及它的比例標清楚, 如果圖片有圓角度的話也需要注明。
頭像的尺寸可以定三個，大中小各一個，基本體量少的 APP 都夠用了。
建議 APP 內的圖片比例兩到三個就好, 因為這涉及到后臺上傳, 比例不一樣的話, 要不然就是開發需要對圖片進行裁剪、要不然就是需要留不同的接口, 后期分別上傳, 無論哪一種,都是需要額外的人力成本, 所以不要給自己挖坑哦。
7、柵格系統
在設計的過程中，我們經常會使用一套規范的度量標準，來保持產品的一致性，分別為圓角值、間距、大小。
對度量解釋最好的是設計中經常使用到的柵格系統（Grid Systems），運用固定的格子設計版面布局，其風格工整簡潔。這就是我們在網頁和APP設計的過程中經常使用到柵格系統的原因。
8、陰影
陰影風格及參數也是設計規范中的一部分，在整理設計規范的時候，需要注意的是陰影的參數值是網頁中控制陰影的參數值，而不是設計軟件中的參數值。
舉個例子：網頁中陰影對應的參數值為：
box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 ，不透明度：10%，這才是程序員需要的陰影參數值，否則最終開發出來的陰影會出現不一致的情況，無法達到規范的目的。
9、導航
頂導航
高度、字體大小、顏色、有沒有分割線, 有的話分割線色值 ; 帶不帶圖標、多個圖標之間的間距等等。
底導航
底部導航和前面一樣，要放他默認和點擊效果圖標！
二級導航
主要是一些篩選類tab, 需要標明文字大小、色值、選中后的橫線的大小, 這里橫線的樣式目前常見的有兩種, 一種是固定的短線, 不管上面文字多少, 都是顯示一樣的大小; 還有一種是和文字一樣長的, 無論哪一種, 事先都需要定義一下規則。
10、組件
常用的UI組件（Component）：Button控件、下拉框、選擇框（單選復選框）、時間選擇器、輸入框、搜索框、進度條、分頁器、提示框、警告框、表格、彈出面板、數字步進器、選項卡等。
Button控件
按鈕是最常見的組件之一，按鈕有5個狀態：Normal、Hover、Active、Disabled 、Loading。
需要在規范中分別羅列出這五個狀態，標注上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值。如果是圖標按鈕的話，除了上述參數值以外還需要標注icon和按鈕文本之間的間距和icon圖標的大小。
下拉框：
下拉框是為用戶提供多個選擇的單選組件，優點是用最簡單的界面布局方式收納了很多的選項，需要注意定義下拉選擇框彈出的時候，鼠標移動上去的Normal、Hover、Active狀態。
選擇框（單選復選框）：
顧名思義，單選框是眾多選擇里面選一個，而復選框是眾多選擇里面可以無限制選擇。單選框和復選框都需要三個狀態，即未選中狀態、選中狀態和不可點擊狀態。
時間選擇器：
時間選擇器是選擇年月日的組件，分別對應年月日星期的信息，在設計的時候需要考慮到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作品規范吧，其他6套產品規范大圖請看下方提取方法！
請微信后臺回復關鍵詞“參考”免費提取！
我要進群
VIP會員招募令
2019全新UI教程大禮包
UI設計進階干貨 - 動效UI設計進階干貨-閃屏UI設計進階干貨-引導頁UI設計進階干貨-注冊登錄UI設計進階干貨 - 首頁UI設計進階干貨 - BannerUI設計進階干貨-列表頁UI設計進階干貨 - 適配&標注
UI設計進階干貨 - 切圖&命名UI設計進階干貨-重陽節閃屏賞析UI進階干貨—金剛區
UI進階干貨—陰影
UI進階干貨 - 競品分析UI進階干貨-詳解B端產品&C端產品
UI進階干貨-尼爾森十大交互原則
UI進階干貨 - PRD撰寫技巧
UI進階干貨 - 加載動畫
UI進階干貨 - 表單
UI進階干貨 - 輕量化設計
關鍵詞回復：
VIP、OC、神器、可視化、進群商用字體、UI學習 、面試技巧、Banner、樣機下載、LOGO、C4D教程、轉手繪、插畫、名片、包裝、字體下載、2.5D、設計規范，創意合成，作品集模板、商務合作、轉載、軟件下載請回復相對應縮寫（例如：PS）
總結
以上是生活随笔為你收集整理的在前端中如何在表格中最后一行加入输入框_UI设计进阶干货 — 如何制定UI规范...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： k8s ubuntu cni_手把手教你
- 下一篇： HTML与cgi post传递与接收,C