網站後台設計規範:架構規範和視覺規範

來源:互聯網
上載者:User

文章描述:後台系統規範設計心得.

後台系統採用一整套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。把最常用的量歸結為一螢幕三個控制項加上判斷和驗證和控制群組合,考慮特殊運用。情境中最可能出現的資料和控制項發生結果在操作頁面時,使用者最關心資料,所以要考慮在介面中如何理順他們的層次。如何對當頁反饋的資訊佔用的位置和變化進行 規範。比方說尋找和攜帶搜尋過來的資料展示,還有上傳 ,在 當頁顯示資料的展示分類。這些排版規則,既要考慮到資訊傳達的清晰,也要考慮到資訊量的大小。

[1] [2]  下一頁



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。