原型圖爲什麼總是被打回，一改再改！咱們今天一起來看看規範的原型設計，看不會也不要緊，模板抱回家省事省力省心！
背景：由於後臺原型沒得規範，慢慢變成了垃圾桶，越來越難維護。所以計劃重構後臺，統一用一套設計規範。
過程：...省略繁瑣的撕逼過程
結果：基於element框架，設計後臺原型，重構後臺。
1 element-ui介紹
- Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的組件庫，提供了配套設計資源，幫助你的開發快速成型。由餓了麼公司前端團隊開源。
2 Design-設計原則
2.1 一致性 Consistency
- 與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；
- 在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。
2.2 反饋 Feedback
- 控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；
- 頁面反饋：操作後，通過頁面元素的變化清晰地展現當前狀態。
2.3 效率 Efficiency
- 簡化流程：設計簡潔直觀的操作流程；
- 清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；
- 幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。
2.4 可控 Controllability
- 用戶決策：根據場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；
- 結果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。
3 舉幾個栗子
3.1 Color 色彩規範
爲了避免視覺傳達差異，使用一套特定的調色板來規定顏色，爲你所搭建的產品提供一致的外觀視覺感受。
- 主色
- Element 主要品牌顏色是鮮豔、友好的藍色。
- 輔助色
- 除了主色外的場景色，需要在不同的場景中使用（例如危險色表示危險的操作）。
- 中性色
- 中性色用於文本、背景和邊框顏色。通過運用不同的中性色，來表現層次結構。
3.2 Typography 字體規範
我們對字體進行統一規範，力求在各個操作系統下都有最佳展示效果。
- 字體
- 字號
- 行高
4 獲取模板
想要獲取Element原型模板的同學
請 點個在看 然後在公衆號回覆：
模板快出來
更多省時省力省心的分享，關注我咯~
作者簡介：“木深”，PMcaff、產品壹佰等社區專欄作者。熱愛新鮮事物，負責過機器人、3D打印、VR商城等多個創業項目，目前在跨境電商行業做產品經理。閒暇之餘，運營個人公衆號“異世治人錄”，分享自己對互聯網產品及生活工作感悟的原創文章，關注我~