轉載藍藍設計(  www.syprn.cn )是一家專注而深入的設計機構 ，為期望卓越的國內外企業提供有效的   BS界面設計 、  cs界面設計 、  ipad界面設計  、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、  網站建設 、平面設計服務

來源：http://www.lpued.com/?p=697

如果您想訂閱本博客內容，每天自動發到您的郵箱中，          請點這里

 

后臺系統采用一整套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只是個開始，接下來我們還會不斷完善、調整這套規范，不斷打磨使其更趨完善。

 

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