2012-5-16 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源:http://www.lpued.com/?p=697
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
后臺(tái)系統(tǒng)采用一整套UI,為什么會(huì)形式各異?能統(tǒng)一并帶來(lái)更好的體驗(yàn)嗎?基于交互設(shè)計(jì)師自己的內(nèi)心疑問(wèn),我們迫切的產(chǎn)出一套設(shè)計(jì)規(guī)范用于統(tǒng)一后臺(tái)操作系統(tǒng),利于用戶(hù)使用習(xí)慣的培養(yǎng)和延續(xù),降低學(xué)習(xí)成本,提高使用效率,有效提高開(kāi)發(fā)效率,方便功能的優(yōu)化擴(kuò)展?;诂F(xiàn)有的系統(tǒng),我們抽絲剝繭,才有了如今的階段性成果。
你知,或者不知
規(guī)范就在那里
不悲不喜
初期是給我們的小二,后期系統(tǒng)會(huì)開(kāi)放,外部商家或是委托方也會(huì)來(lái)使用我們的系統(tǒng)。那么我們第一次做系統(tǒng)規(guī)范的由于商家或委托方的信息掌握不到,可以主要針對(duì)我們的小二。
我們的小二有什么特點(diǎn)呢?他們目前是什么方法在錄入信息的呢?
小二這個(gè)角色在我們的部分可以細(xì)分為:認(rèn)證小二,物流小二,行業(yè)運(yùn)營(yíng)小二(行業(yè)運(yùn)營(yíng)小二里面還分:買(mǎi)手,買(mǎi)手助理,店鋪運(yùn)營(yíng)小二,網(wǎng)站運(yùn)營(yíng)小二……)每種角色來(lái)這個(gè)系統(tǒng)的目的都是不同的,行業(yè)運(yùn)營(yíng)小二,進(jìn)來(lái)主要是錄入信息,跟蹤訂單。物流小二主要是查看審核行業(yè)小二的申請(qǐng),跟蹤訂單,查看報(bào)表。認(rèn)證小二主要是審核行業(yè)小二或商家的申請(qǐng),跟蹤認(rèn)證情況,分析數(shù)據(jù)。
由于當(dāng)初系統(tǒng)發(fā)展情況參差不齊交互資源不夠,前端控件沒(méi)做,導(dǎo)致用戶(hù)極難使用。系統(tǒng)開(kāi)放過(guò)程中,頻繁的更換交互、視覺(jué)還有前端,導(dǎo)致現(xiàn)在單個(gè)系統(tǒng)交互方式有差異,多個(gè)系統(tǒng)呈現(xiàn)給同一個(gè)用戶(hù)時(shí),雖然基本框架沒(méi)問(wèn)題,但是在操作過(guò)程中效率低。
解決方案:用戶(hù)急需一個(gè)好用的后臺(tái)系統(tǒng)來(lái)提高他們的效率。
我們這次要做規(guī)范的目的是統(tǒng)一現(xiàn)有三個(gè)系統(tǒng)的視覺(jué)+交互規(guī)范,然后交付前段,前端來(lái)規(guī)定他們的代碼規(guī)范。讓我們一起走上提高我們小二的工作效率的第一步。
你念,或者不念
規(guī)范就在那里
不來(lái)不去
在計(jì)算機(jī)編程當(dāng)中,控件(或部件,widget或control)是一種圖形用戶(hù)界面元素。是一種基本的可視構(gòu)件塊,包含在應(yīng)用程序中,控制著該程序處理的所有數(shù)據(jù)以及關(guān)于這些數(shù)據(jù)的交互操作。
在PARC研究中心對(duì)施樂(lè)的Alto電腦(Xerox Alto)用戶(hù)界面的研究基礎(chǔ)上,如今已逐漸產(chǎn)生一組包含常規(guī)信息的可重用控件。常規(guī)控件的不同組合通常打包在部件工具箱中,程序員可以構(gòu)建圖形用戶(hù)界面(GUIs)。 大多操作系統(tǒng)包括一套用于程序設(shè)計(jì)的控件,程序員只需將它們加入應(yīng)用程序,指定它們的行為。
組合控件
描述:為實(shí)現(xiàn)產(chǎn)品中某一特定功能而獨(dú)立出來(lái)的模塊,其特點(diǎn)在于功能相對(duì)單一,在結(jié)構(gòu)層和行為層應(yīng)具備很強(qiáng)的可復(fù)用性,在表現(xiàn)層應(yīng)保持一致性,方便用戶(hù)識(shí)別。從單一控件可以衍生出多種組合控件以適應(yīng)不同功能操作,如:上傳組合控件,列表組合控件。
定義維度:控件描述、控件示意及尺寸、是否用戶(hù)反饋、設(shè)計(jì)理念、控件應(yīng)用。
你愛(ài),或者不愛(ài)
規(guī)范就在那里
有增無(wú)減
在第一步完成了控件基礎(chǔ)后,第二步的問(wèn)題就是如何運(yùn)用該控件?讓控件在場(chǎng)景中發(fā)揮作用,竄連出整個(gè)操作流程。這種目的之下,我們所要做的就是制定結(jié)構(gòu)和規(guī)則,就如同用這些控件做成建筑物一般,這就是框架規(guī)范的作用。
在設(shè)定框架時(shí),我們要考慮到以下幾點(diǎn)問(wèn)題:
由于業(yè)務(wù)場(chǎng)景不同,流程也不一樣,那么如何定義頁(yè)面,和頁(yè)面基礎(chǔ)內(nèi)容塊?
這里不妨假設(shè)流程中遇到的4種基本場(chǎng)景——>創(chuàng)建,查詢(xún),編輯,詳情,回饋
這四類(lèi)頁(yè)面,運(yùn)用的基礎(chǔ)控件類(lèi)型也不一樣,通過(guò)這4類(lèi)我們可以竄連基本的業(yè)務(wù)流程。
a. 創(chuàng)建編輯
創(chuàng)建和編輯都是對(duì)基礎(chǔ)數(shù)據(jù)的輸入和修改,這個(gè)界面用到最多的就是imput,表單,還有鏈接。從屏幕上劃分為三列式。含有大量的操作驗(yàn)證和操作提示塊。
b. 查詢(xún)
查詢(xún)頁(yè)面主要使用的是條件輸入操作和查看表單的功能,需要界面操作區(qū)和反饋區(qū)清晰明確,因此在框架上為兩大區(qū)域,保證他穩(wěn)定使用的習(xí)慣。 另外考慮各種導(dǎo)出和查看的鏈接。
c. 彈出頁(yè)面
彈出頁(yè)面的大小只占整個(gè)頁(yè)面大小的三分之一,這樣信息流不會(huì)太大,構(gòu)造結(jié)構(gòu)也不復(fù)雜。
d. 信息反饋
在完成一個(gè)頁(yè)面操作后及時(shí)反饋操作結(jié)果,這里的元素主要是:操作結(jié)果+語(yǔ)氣詞+建議動(dòng)作。以及相關(guān)鏈接。所以對(duì)文字架構(gòu)和展示有個(gè)限定,并配合一定的信息的icon.
不同于大框架,這個(gè)彈出頁(yè)面所承載的作用是保持當(dāng)頁(yè)信息比對(duì)下進(jìn)行彈出操作,因此,操作會(huì)簡(jiǎn)單直接,操作數(shù)量保持3,到4次操作內(nèi)。然后在回到主頁(yè)持續(xù)操作其它。
a. 詳情頁(yè)面
詳情頁(yè)面是所有操作情況的明細(xì)。是流程的結(jié)果,所以它模塊分類(lèi)會(huì)比較清楚,主要是文字和數(shù)字構(gòu)成,信息層次基本是2-3級(jí)。分類(lèi)也控制在4-5類(lèi)內(nèi),信息過(guò)多,會(huì)有收起展開(kāi)的功能,來(lái)控制信息量過(guò)多對(duì)傳到和尋找造成的麻煩。
b. 不同的顯示器分辨率
考慮最常用的1028,和最基礎(chǔ)的1024。把最常用的量歸結(jié)為一屏幕三個(gè)控件加上判斷和驗(yàn)證和控件組合,考慮特殊運(yùn)用。場(chǎng)景中最可能出現(xiàn)的數(shù)據(jù)和控件發(fā)生結(jié)果在操作頁(yè)面時(shí),用戶(hù)最關(guān)心數(shù)據(jù),所以要考慮在界面中如何理順?biāo)麄兊膶哟?。如何?duì)當(dāng)頁(yè)反饋的信息占用的位置和變化進(jìn)行 規(guī)范。比方說(shuō)查找和攜帶搜索過(guò)來(lái)的數(shù)據(jù)展示,還有上傳 ,在 當(dāng)頁(yè)顯示數(shù)據(jù)的展示分類(lèi)。這些排版規(guī)則,既要考慮到信息傳達(dá)的清晰,也要考慮到信息量的大小。
柵格化體系之所以在web端這么適用,也是因?yàn)樾畔⒑桶鎵K過(guò)多時(shí),在前端的環(huán)節(jié)易于分塊進(jìn)行分割,保持頁(yè)面的舒暢和整齊。以5,或者10為單位,基本適用于任何的排列和切割,無(wú)論場(chǎng)景,控件,數(shù)據(jù)元素多么復(fù)雜,都能用一定的單位計(jì)算其尺度大小,順利排列得下。形成一定的穩(wěn)定架構(gòu)。
你跟,或者不跟
規(guī)范就在你我手里
不舍不棄
圖標(biāo):是具有指導(dǎo),標(biāo)識(shí)性質(zhì)的圖形,它具有高度濃縮并快捷傳達(dá)、便于記憶的特性。好的圖標(biāo),能完善視覺(jué),提升體驗(yàn),更好的與用戶(hù)進(jìn)行溝通,在必要的時(shí)候能給用戶(hù)以明確提示,指導(dǎo)用戶(hù)去順利的完成操作。
1.確保圖形映射唯一性,可識(shí)別性;
2.設(shè)計(jì)盡量簡(jiǎn)潔,易懂,避免多余元素的出現(xiàn);
3.風(fēng)格趨于統(tǒng)一;
4.尊重習(xí)慣,多用常見(jiàn)圖形,避免誤導(dǎo);
1.造型上由一到三個(gè)圖形組合,且最多不超過(guò)3個(gè);
2.質(zhì)感細(xì)膩,豐富;
使用規(guī)范:優(yōu)先使用已有圖標(biāo);如已有圖標(biāo)無(wú)法滿(mǎn)足需求,則嚴(yán)格按需求提交流程申請(qǐng)新圖標(biāo)
前端開(kāi)發(fā)是我們的親密伙伴,所以盡快拉他們?nèi)牖?,一方面仰仗于他們的技術(shù)支持及開(kāi)發(fā)建議;另一方面他們也是受益人,一整套控件庫(kù)開(kāi)發(fā)出來(lái)也便于他們的調(diào)用及管理。
眾志成城,規(guī)范的產(chǎn)出仰仗于全體交互設(shè)計(jì)師工作之余的見(jiàn)縫插針及齊心協(xié)力,反復(fù)溝通探討,整合統(tǒng)一。
V1.0只是個(gè)開(kāi)始,接下來(lái)我們還會(huì)不斷完善、調(diào)整這套規(guī)范,不斷打磨使其更趨完善。
來(lái)我懷里
或者
讓規(guī)范住進(jìn)你的心里
默然相愛(ài)
寂靜歡喜
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com