規范設計心得：用戶是誰，需求又是什麼？

　　後台系統采用一整套UI，為什麼會形式各異?能統一並帶來更好的體驗嗎?基於交互設計師自己的內心疑問，我們迫切的產出一套設計規范用於統一後台操作系統，利於用戶使用習慣的培養和延續，降低學習成本，提高使用效率，有效提高開發效率，方便功能的優化擴展。基於現有的系統，我們抽絲剝繭，才有了如今的階段性成果。

　　用戶是誰?需求是什麼?交互設計師對於一個項目最基本的了解就是源於這兩個問題。我們做這次規范也是如此……

　　你知，或者不知;規范就在那裡;不悲不喜

　　用戶是誰?我們的系統是給誰用的?

　　初期是給我們的小二，後期系統會開放，外部商家或是委托方也會來使用我們的系統。那麼我們第一次做系統規范的由於商家或委托方的信息掌握不到，可以主要針對我們的小二。

　　我們的小二有什麼特點呢?他們目前是什麼方法在錄入信息的呢?

　　小二這個角色在我們的部分可以細分為：認證小二，物流小二，行業運營小二(行業運營小二裡面還分：買手，買手助理，店鋪運營小二，網站運營小二……)每種角色來這個系統的目的都是不同的，行業運營小二，進來主要是錄入信息，跟蹤訂單。物流小二主要是查看審核行業小二的申請，跟蹤訂單，查看報表。認證小二主要是審核行業小二或商家的申請，跟蹤認證情況，分析數據。

　　需求是什麼?

　　由於當初系統發展情況參差不齊交互資源不夠，前端控件沒做，導致用戶極難使用。系統開放過程中，頻繁的更換交互、視覺還有前端，導致現在單個系統交互方式有差異，多個系統呈現給同一個用戶時，雖然基本框架沒問題，但是在操作過程中效率低。

　　解決方案：用戶急需一個好用的後台系統來提高他們的效率。

　　我們這次要做規范的目的是統一現有三個系統的視覺+交互規范，然後交付前段，前端來規定他們的代碼規范。讓我們一起走上提高我們小二的工作效率的第一步。

　　你念，或者不念;規范就在那裡;不來不去。

　　從哪個緯度展開規范設計?

　　1. 控件

　　在計算機編程當中，控件(或部件，widget或control)是一種圖形用戶界面元素。是一種基本的可視構件塊，包含在應用程序中，控制著該程序處理的所有數據以及關於這些數據的交互操作。

　　在PARC研究中心對施樂的Alto電腦(Xerox Alto)用戶界面的研究基礎上，如今已逐漸產生一組包含常規信息的可重用控件。常規控件的不同組合通常打包在部件工具箱中，程序員可以構建圖形用戶界面(GUIs)。 大多操作系統包括一套用於程序設計的控件，程序員只需將它們加入應用程序，指定它們的行為。

　　組合控件

　　描述：為實現產品中某一特定功能而獨立出來的模塊，其特點在於功能相對單一，在結構層和行為層應具備很強的可復用性，在表現層應保持一致性，方便用戶識別。從單一控件可以衍生出多種組合控件以適應不同功能操作，如：上傳組合控件，列表組合控件。

　　定義維度：控件描述、控件示意及尺寸、是否用戶反饋、設計理念、控件應用。

　　你愛，或者不愛;規范就在那裡;有增無減。

　　2. 框架規范

　　在第一步完成了控件基礎後，第二步的問題就是如何運用該控件?讓控件在場景中發揮作用，竄連出整個操作流程。這種目的之下，我們所要做的就是制定結構和規則，就如同用這些控件做成建築物一般，這就是框架規范的作用。

　　在設定框架時，我們要考慮到以下幾點問題：

　　2.1不同的流程與場景

　　由於業務場景不同，流程也不一樣，那麼如何定義頁面，和頁面基礎內容塊?

　　這裡不妨假設流程中遇到的4種基本場景——》創建，查詢，編輯，詳情，回饋

　　這四類頁面，運用的基礎控件類型也不一樣，通過這4類我們可以竄連基本的業務流程。

　　a. 創建編輯

　　創建和編輯都是對基礎數據的輸入和修改，這個界面用到最多的就是imput，表單，還有鏈接。從屏幕上劃分為三列式。含有大量的操作驗證和操作提示塊。

　　b. 查詢

　　查詢頁面主要使用的是條件輸入操作和查看表單的功能，需要界面操作區和反饋區清晰明確，因此在框架上為兩大區域，保證他穩定使用的習慣。 另外考慮各種導出和查看的鏈接。

　　c. 彈出頁面

　　彈出頁面的大小只占整個頁面大小的三分之一，這樣信息流不會太大，構造結構也不復雜。

　　d. 信息反饋

　　在完成一個頁面操作後及時反饋操作結果，這裡的元素主要是：操作結果+語氣詞+建議動作。以及相關鏈接。所以對文字架構和展示有個限定，並配合一定的信息的icon.

　　2.2 操作

　　不同於大框架，這個彈出頁面所承載的作用是保持當頁信息比對下進行彈出操作，因此，操作會簡單直接，操作數量保持3，到4次操作內。然後在回到主頁持續操作其它。

　　a. 詳情頁面

　　詳情頁面是所有操作情況的明細。是流程的結果，所以它模塊分類會比較清楚，主要是文字和數字構成，信息層次基本是2-3級。分類也控制在4-5類內，信息過多，會有收起展開的功能，來控制信息量過多對傳到和尋找造成的麻煩。

　　b. 不同的顯示器分辨率

　　考慮最常用的1028，和最基礎的1024。把最常用的量歸結為一屏幕三個控件加上判斷和驗證和控件組合，考慮特殊運用。場景中最可能出現的數據和控件發生結果在操作頁面時，用戶最關心數據，所以要考慮在界面中如何理順他們的層次。如何對當頁反饋的信息占用的位置和變化進行 規范。比方說查找和攜帶搜索過來的數據展示，還有上傳 ，在 當頁顯示數據的展示分類。這些排版規則，既要考慮到信息傳達的清晰，也要考慮到信息量的大小。

　　2.3 數字化柵格化整個體系，易於著地

　　柵格化體系之所以在web端這麼適用，也是因為信息和版塊過多時，在前端的環節易於分塊進行分割，保持頁面的舒暢和整齊。以5，或者10為單位，基本適用於任何的排列和切割，無論場景，控件，數據元素多麼復雜，都能用一定的單位計算其尺度大小，順利排列得下。形成一定的穩定架構。

　　你跟，或者不跟;規范就在你我手裡;不捨不棄。

　　3. 視覺規范

　　圖標：是具有指導，標識性質的圖形，它具有高度濃縮並快捷傳達、便於記憶的特性。好的圖標，能完善視覺，提升體驗，更好的與用戶進行溝通，在必要的時候能給用戶以明確提示，指導用戶去順利的完成操作。

　　設計時需注意：

　　1.確保圖形映射唯一性，可識別性;

　　2.設計盡量簡潔，易懂，避免多余元素的出現;

　　3.風格趨於統一;

　　4.尊重習慣，多用常見圖形，避免誤導;

　　美學角度需注意：

　　1.造型上由一到三個圖形組合，且最多不超過3個;

　　2.質感細膩，豐富;

　　使用規范：優先使用已有圖標;如已有圖標無法滿足需求，則嚴格按需求提交流程申請新圖標

　　4.前端開發介入

　　前端開發是我們的親密伙伴，所以盡快拉他們入伙，一方面仰仗於他們的技術支持及開發建議;另一方面他們也是受益人，一整套控件庫開發出來也便於他們的調用及管理。

　　5.規范產出

　　眾志成城，規范的產出仰仗於全體交互設計師工作之余的見縫插針及齊心協力，反復溝通探討，整合統一。

　　V1.0只是個開始，接下來我們還會不斷完善、調整這套規范，不斷打磨使其更趨完善。

　　來我懷裡;或者;讓規范住進你的心裡;默然相愛;寂靜歡喜。

　　以上內容由UPD交互組——耿莉 呂俊 馬亦芯 張科 金晶 共同編寫

　　文章來源：阿裡巴巴良無限UPD團隊Blog