轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(  m.820esy.cn )是一家專注而深入的設(shè)計機(jī)構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、  cs界面設(shè)計 、  ipad界面設(shè)計  、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、  網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，          請點這里

 

后臺系統(tǒng)采用一整套UI,為什么會形式各異？能統(tǒng)一并帶來更好的體驗嗎？基于交互設(shè)計師自己的內(nèi)心疑問，我們迫切的產(chǎn)出一套設(shè)計規(guī)范用于統(tǒng)一后臺操作系統(tǒng)，利于用戶使用習(xí)慣的培養(yǎng)和延續(xù)，降低學(xué)習(xí)成本，提高使用效率，有效提高開發(fā)效率，方便功能的優(yōu)化擴(kuò)展?；诂F(xiàn)有的系統(tǒng)，我們抽絲剝繭，才有了如今的階段性成果。

用戶是誰？需求是什么？交互設(shè)計師對于一個項目最基本的了解就是源于這兩個問題。我們做這次規(guī)范也是如此。。。。。。

你知，或者不知
規(guī)范就在那里
不悲不喜

 

用戶是誰？我們的系統(tǒng)是給誰用的？

初期是給我們的小二，后期系統(tǒng)會開放，外部商家或是委托方也會來使用我們的系統(tǒng)。那么我們第一次做系統(tǒng)規(guī)范的由于商家或委托方的信息掌握不到，可以主要針對我們的小二。

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

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

需求是什么？

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

解決方案：用戶急需一個好用的后臺系統(tǒng)來提高他們的效率。

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

你念，或者不念
規(guī)范就在那里
不來不去

 

從哪個緯度展開規(guī)范設(shè)計？

1.  控件

在計算機(jī)編程當(dāng)中，控件（或部件，widget或control）是一種圖形用戶界面元素。是一種基本的可視構(gòu)件塊，包含在應(yīng)用程序中，控制著該程序處理的所有數(shù)據(jù)以及關(guān)于這些數(shù)據(jù)的交互操作。

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

組合控件

描述：為實現(xiàn)產(chǎn)品中某一特定功能而獨(dú)立出來的模塊，其特點在于功能相對單一，在結(jié)構(gòu)層和行為層應(yīng)具備很強(qiáng)的可復(fù)用性，在表現(xiàn)層應(yīng)保持一致性，方便用戶識別。從單一控件可以衍生出多種組合控件以適應(yīng)不同功能操作，如：上傳組合控件,列表組合控件。

定義維度：控件描述、控件示意及尺寸、是否用戶反饋、設(shè)計理念、控件應(yīng)用。

你愛，或者不愛
規(guī)范就在那里
有增無減

 

2.  框架規(guī)范

在第一步完成了控件基礎(chǔ)后，第二步的問題就是如何運(yùn)用該控件？讓控件在場景中發(fā)揮作用，竄連出整個操作流程。這種目的之下，我們所要做的就是制定結(jié)構(gòu)和規(guī)則，就如同用這些控件做成建筑物一般，這就是框架規(guī)范的作用。

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

 

2.1不同的流程與場景

由于業(yè)務(wù)場景不同，流程也不一樣，那么如何定義頁面，和頁面基礎(chǔ)內(nèi)容塊？

這里不妨假設(shè)流程中遇到的4種基本場景——>創(chuàng)建，查詢，編輯，詳情，回饋  

這四類頁面，運(yùn)用的基礎(chǔ)控件類型也不一樣，通過這4類我們可以竄連基本的業(yè)務(wù)流程。

a.  創(chuàng)建編輯

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

b.  查詢

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

c.  彈出頁面

彈出頁面的大小只占整個頁面大小的三分之一，這樣信息流不會太大，構(gòu)造結(jié)構(gòu)也不復(fù)雜。

d.  信息反饋

在完成一個頁面操作后及時反饋操作結(jié)果，這里的元素主要是：操作結(jié)果+語氣詞+建議動作。以及相關(guān)鏈接。所以對文字架構(gòu)和展示有個限定，并配合一定的信息的icon.

 

2.2 操作

不同于大框架，這個彈出頁面所承載的作用是保持當(dāng)頁信息比對下進(jìn)行彈出操作，因此，操作會簡單直接，操作數(shù)量保持3，到4次操作內(nèi)。然后在回到主頁持續(xù)操作其它。

a.  詳情頁面

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

b.  不同的顯示器分辨率

考慮最常用的1028，和最基礎(chǔ)的1024。把最常用的量歸結(jié)為一屏幕三個控件加上判斷和驗證和控件組合，考慮特殊運(yùn)用。場景中最可能出現(xiàn)的數(shù)據(jù)和控件發(fā)生結(jié)果在操作頁面時，用戶最關(guān)心數(shù)據(jù)，所以要考慮在界面中如何理順?biāo)麄兊膶哟?。如何對?dāng)頁反饋的信息占用的位置和變化進(jìn)行 規(guī)范。比方說查找和攜帶搜索過來的數(shù)據(jù)展示，還有上傳 ，在   當(dāng)頁顯示數(shù)據(jù)的展示分類。這些排版規(guī)則，既要考慮到信息傳達(dá)的清晰，也要考慮到信息量的大小。

 

2.3 數(shù)字化柵格化整個體系，易于著地

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

你跟，或者不跟
規(guī)范就在你我手里
不舍不棄

 

 

3.  視覺規(guī)范

 

圖標(biāo)：是具有指導(dǎo)，標(biāo)識性質(zhì)的圖形，它具有高度濃縮并快捷傳達(dá)、便于記憶的特性。好的圖標(biāo)，能完善視覺，提升體驗，更好的與用戶進(jìn)行溝通，在必要的時候能給用戶以明確提示，指導(dǎo)用戶去順利的完成操作。

設(shè)計時需注意：

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

2.設(shè)計盡量簡潔，易懂，避免多余元素的出現(xiàn)；

3.風(fēng)格趨于統(tǒng)一；

4.尊重習(xí)慣，多用常見圖形，避免誤導(dǎo)；

美學(xué)角度需注意：

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

2.質(zhì)感細(xì)膩，豐富；

 

使用規(guī)范：優(yōu)先使用已有圖標(biāo)；如已有圖標(biāo)無法滿足需求，則嚴(yán)格按需求提交流程申請新圖標(biāo)

 

4.前端開發(fā)介入

前端開發(fā)是我們的親密伙伴，所以盡快拉他們?nèi)牖铮环矫嫜稣逃谒麄兊募夹g(shù)支持及開發(fā)建議；另一方面他們也是受益人，一整套控件庫開發(fā)出來也便于他們的調(diào)用及管理。

 

5.規(guī)范產(chǎn)出

眾志成城，規(guī)范的產(chǎn)出仰仗于全體交互設(shè)計師工作之余的見縫插針及齊心協(xié)力，反復(fù)溝通探討，整合統(tǒng)一。

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

 

來我懷里
或者
讓規(guī)范住進(jìn)你的心里
默然相愛
寂靜歡喜