【形式】
在界面上一步步引導(dǎo)用戶(hù)按預(yù)定的順序完成任務(wù),把任務(wù)分成一系列步驟,在每個(gè)步驟里讓用戶(hù)集中處理一件事情。如,Qzone個(gè)人空間的注冊(cè)頁(yè)面:
【優(yōu)點(diǎn)】
對(duì)于較長(zhǎng)的任務(wù),在設(shè)計(jì)用戶(hù)界面時(shí)如何讓用戶(hù)明白操作的步驟,向?qū)У膬?yōu)點(diǎn)正是讓用戶(hù)按照預(yù)先規(guī)劃的路線圖來(lái)組織這項(xiàng)任務(wù),而不用了解整個(gè)任務(wù)的結(jié)構(gòu),用戶(hù)要做就是按順序執(zhí)行每個(gè)步驟,相信他們?nèi)绻裱甘荆蜁?huì)成功完成。
【用法】
把組成任務(wù)的操作分成幾個(gè)部分或幾組操作,各個(gè)部分的次序排列可能必須是嚴(yán)格限制的,也可以是能夠由用戶(hù)選擇的。
Qzone的的注冊(cè)過(guò)程包括 選擇風(fēng)格樣式、填寫(xiě)個(gè)人信息、補(bǔ)充資料和完成四步,用戶(hù)必須依次填寫(xiě),而不能先填寫(xiě)后面的步驟再回來(lái)寫(xiě)前面的;而對(duì)于一些在線支付類(lèi)的流程,從產(chǎn)品挑選、支付信息、支付地址、送貨地址等步驟,它們的順序并不重要,因?yàn)楹竺娴倪x擇并不依賴(lài)前面的選擇,把相關(guān)的選擇放在一起只是簡(jiǎn)化了人們填寫(xiě)表單的工作。
任務(wù)拆分后步驟的數(shù)量和粒度往往需要很好的權(quán)衡,如果只有兩步,那會(huì)顯得很傻,如果有十五步,就會(huì)顯得乏味枯燥;但是每個(gè)步驟也需要保證不能太復(fù)雜,不然失去了向?qū)У囊饬x。
【頁(yè)面表現(xiàn)】
1)多頁(yè)面表現(xiàn)形式
從頁(yè)面表現(xiàn)上來(lái)看,最簡(jiǎn)單的實(shí)現(xiàn)方式就是將每個(gè)步驟放在一個(gè)單獨(dú)的頁(yè)面上,用前進(jìn)和后退按鈕進(jìn)行控制,但這種形式也有缺點(diǎn),每個(gè)獨(dú)立的界面不能顯示上下文,用戶(hù)不知道前面和后面分別顯示的是什么,因此這樣的形式最好能夠允許用戶(hù)在進(jìn)行過(guò)程中能夠隨時(shí)向前或者向后移動(dòng)。因?yàn)槿绻荒茏層脩?hù)可以改變前面的選項(xiàng)而必須重新開(kāi)始那就會(huì)讓人受不了。從這點(diǎn)來(lái)說(shuō),如果是多頁(yè)面的向?qū)В臉?biāo)準(zhǔn)的配置應(yīng)該是:
或者結(jié)合雙面板選擇模式
2)單一頁(yè)面表現(xiàn)形式:
第一種 帶標(biāo)題的欄目:標(biāo)題上有固定編號(hào),因?yàn)橐谎劬涂梢钥吹剿械牟襟E,所以這個(gè)模式適合用在分支不多的任務(wù)上。
第二種 響應(yīng)式允許或響應(yīng)式展開(kāi):在用戶(hù)完成前面一個(gè)步驟之后才把后面的步驟顯示在頁(yè)面上,如果向?qū)У牟襟E不多,采用這樣的方式會(huì)讓頁(yè)面更簡(jiǎn)潔一些。
總結(jié):
以上三種常用的模式:雙面板選擇、畫(huà)布加工具條以及向?qū)俏覀兘?jīng)常會(huì)在網(wǎng)頁(yè)設(shè)計(jì)中見(jiàn)到的模式,平時(shí)的使用中我們已經(jīng)在不知不覺(jué)中認(rèn)識(shí)并習(xí)慣它們了,通過(guò)這些基本的模式,在設(shè)計(jì)加以變形和創(chuàng)新就可以創(chuàng)造出更有趣和方便的交互方式。下面的例子是一個(gè)綜合了以上三種交互模式的例子:
0
喜歡他,就推薦他上首頁(yè)吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版
豫 ICP 備16038122號(hào)-2
豫公網(wǎng)安備 41019702002261號(hào)