搜狐產品經理延歡推薦：產品設計規範與關乎“秩序和混亂”的人生演算法
1. 文章裡很多內容是基礎技能，是對自己的一個規範，很多可以提升效率的東西自己都沒有去用（元件庫、註釋等等）；2. 之前有讀過一篇講產品如何創新的文章，裡面提到三個步驟拿來主義、跨界思維、顛覆式創新。整個過程與這篇文章提到的從“秩序到混亂”是異曲同工的。個人覺得成長應該是基於自我認知而又超越其本來的自我認知的一個過程。作為產品新人往往會充滿熱情，希望能夠洋洋灑灑一下子設計出一份滿意的炫酷的作品，但所謂厚積薄發，我們必須先積累、先規範、先學習，才能夠在此基礎上進行創新與超越，也只有有了底有了基，才能夠有高度望的遠。所以，規範也好、要求也好、競品調研也好，都是這個過程中重要的部分，需要耐心完成。共勉。
以前設計產品把隨性當創意，不屑於已經被定義好的東西，不屑於規範性的東西。後來才認識到，越自我的東西，距離產品越遠，距離藝術越遠，距離人性越遠。
不知不覺做產品一年多了，接觸的大多數是後端產品。今天和大家分享一下關於後臺產品設計的一些經驗和心得，與君共勉。
文章結構：
- 目錄結構規範；
- 原型設計規範；
- 註釋規範；
- 關於“秩序（規範）和混亂”的一些思考。
一、目錄結構規範
0歲的產品同學很多對Axure的定位就是一個畫原型的工具，經常拿起Axure就開始畫頁面，一開啟.rp檔案目錄第一頁就是產品首頁。
一個好的原型設計不僅僅是畫出滿足業務需求的原型頁面，而是讓瀏覽者清晰的明白這個專案的背景和業務邏輯以及整個產品結構，而這些基本都是通過目錄來引導的，所以拿起Axure 不是一開始就畫頁面，而是完善目錄結構。
需求規格說明書 & 產品結構導圖
通常介紹整個專案背景以及產品形態等，通常以《需求規格說明書》的形式展示：
產品結構導圖相當於移動端產品的功能結構圖，一般用思維導圖和架構圖來展示說明，以上兩個頁面主要告訴閱讀者專案背景，產品功能形態。
專案開發流程&基本流程圖
專案開發流程圖主要介紹整個專案開發過程中各部門角色之間的協作流程，有的公司偏向于敏捷開發，有的公司走傳統的需求，評審，設計&開發，測試，驗收，上線的路線，相關流程都應該體現在流程圖裡，方便閱讀者知曉。
產品設計過程中每一個涉及到業務邏輯和功能邏輯的流程都需要在基本流程圖裡提現，當遇到複雜的業務邏輯的時候，流程圖往往比原型頁面更加直觀。
原型封面 & 版本控制
原型封面主要介紹作簡要的產品描述和歸屬標識，作為原型設計完整性的一部分，不是必要的。
版本控制主要作為產品更新迭代記錄以及設計週期的一個時間標識。
全域性框架設計規範 & 全域性控制元件設計規範 & 原型註釋規範
不僅是專業的UI設計需要遵守設計規範，產品設計也需要定義一定的設計規範，方便自己設計產品隨時複用，也方便其他人接手時能儘可能的在保持設計樣式整體一致的前提下，快速上手。
二、產品設計規範
保持整個系統所有頁面結構的一致性和所有控制元件元素的統一性是我們定義設計規範最初的目的。
產品設計規範具體體現在：全域性框架設計規範，全域性控制元件設計規範，原型註釋規範這三個方面。
全域性框架設計規範
後臺系統框架主要分為三個部分：① 系統功能區 ② 選單區 ③ 資料/功能區
當然三個區域可以進行很多靈活的設計，無論選擇哪種都需要保持所選框架下所有頁面的整體一致性。
全域性控制元件設計規範
上文提到剛開始設計原型的同學經常會出現不同的頁面同樣的資訊不同大小的字型，同樣的功能按鈕用不同的顏色，結果導致整個原型看起來像是很多個人設計出來的，沒有一致性，原因就在於開始的時候沒有定義好一套控制元件設計規範。
平時的產品設計過程中可以參考一些優秀的UI框架，例如：Bootstrap，Flat UI ，jQuery UI 等。
在設計原型前定義好這些控制元件以及樣式的規範後，所有的頁面都引用一套樣式，不僅使整個原型保持一致性，而且能大大的提高設計效率。
這裡要提到Axure 的兩個很實用的功能：一個是母版，一個是控制元件樣式
把後面可能要多次複用的控制元件做成母版以及把需要多次複用的控制元件樣式設定成主題樣式會大大的提高設計效率。
全域性註釋規範
當然這裡指的註釋規範是基於Axure 的，並非藉助於PRD文件。對於PC端的原型設計，我更傾向於用Axure 原生的註釋功能來描述。分別為：業務邏輯，需求說明，功能邏輯，視覺（互動）邏輯，技術邏輯，備註等。
在保證整個產品設計統一性和一致性的前提下，每個人都可以根據自己的喜好定義自己的原型設計規範。
四、關於“秩序（規範）和混亂”的一些思考
秩序和混亂一直是指導我學習和工作的第一性原理，下面我用畢加索畫牛的過程來解釋這個道理，也解釋了為什麼我會覺得“規範”是一件很重要的事情，以至於要用一篇文章來強調。
這是畢加索1934年12月5日畫的一張牛，看起來很正常，惟妙惟俏。
過了幾天，他又畫了一張圖，看起來也不錯，比較正常。
這張也不錯，有點小頑皮。
這張更頑皮了
接下來的幾張越來越頑皮了
你可能看到過畢加索畫的很抽象的幾何牛，也可能只看過他筆下惟妙惟肖的模擬牛，但是連貫起來看畢加索畫牛的過程，從最開始的模擬牛，不斷的被結構化，幾何化，最後畫出了很抽象的幾何牛。
普通人完全可以畫出一個一模一樣的幾何牛，但是為什麼畢加索畫出的牛就這麼牛，這是一個值得思考的問題。畢加索是建立在模擬牛的基礎上，通過解構，抽象出來的幾何牛，這是建立在某種“秩序”上引入的藝術性“混亂”，而不是直接去通過簡筆畫畫出一個幾何牛，這就是大師和普通人的本質差別。
“我們的混亂，是逃避秩序前無力掌控的毀滅性混亂” 這讓我想到幾個月前的自己，對工作的熱愛和對產品的追求以及處女座的性格。總是希望畫原型的時候每一個頁面讓它好看，炫酷，以至於過度發揮。這樣做導致的結果是可能一個頁面很好看，整體會很混亂，看起來像是很多人畫出來的。
後來我明白了建立在秩序上的混亂這樣的道理之後，每次畫原型都會定義好設計規範和UI框架，第一次感覺得到秩序和規範帶來的美，以及遵守規範帶來的簡潔，流暢和高效，我更相信在框架和規範下再去引入混亂和創新才是有價值的。