2016-11-07 分類: 網(wǎng)站設(shè)計(jì)
引導(dǎo)設(shè)計(jì)模式從字面意思理解就是在一個(gè)網(wǎng)站上引導(dǎo)用戶瀏覽網(wǎng)頁(yè),很多人想到,網(wǎng)站也需要做這樣的設(shè)計(jì)嗎?又不是去什么風(fēng)景區(qū)怎么也需要引導(dǎo)設(shè)計(jì)模式,其實(shí),如果你的網(wǎng)站網(wǎng)頁(yè)非常多,那還真的非常有必要的,但是如果是一般的企業(yè)網(wǎng)站,可能也沒(méi)什么必要,因?yàn)轫?yè)面二十多個(gè)也就夠用了,對(duì)于一些大型門戶網(wǎng)站來(lái)講,卻是非常有必要的,很多邏輯性非常強(qiáng)的頁(yè)面同樣也是非常重要的。很多時(shí)候,我們?nèi)ヒ恍┱愋偷墓δ苄跃W(wǎng)站,經(jīng)常會(huì)在網(wǎng)站信息中找不到自己想要的內(nèi)容,斑駁的網(wǎng)站中各種信息和功能交雜在一起,顯得網(wǎng)站亂糟糟的,用戶在瀏覽網(wǎng)頁(yè)的時(shí)候根本不清不楚有時(shí)候?yàn)榱苏乙粋€(gè)表格下載下來(lái)也要浪費(fèi)很長(zhǎng)時(shí)間,這也體現(xiàn)到了網(wǎng)站引導(dǎo)設(shè)計(jì)的重要性。網(wǎng)站引導(dǎo)設(shè)計(jì)可以減少用戶的流失,能夠讓用戶盡快找到其所需的東西,網(wǎng)站中的引導(dǎo)是存在于用戶與目標(biāo)之間的一條直線,讓用戶與目標(biāo)之間建立有效聯(lián)系,減少不必要的時(shí)間和精力消耗。網(wǎng)站引導(dǎo)設(shè)計(jì)之前一定要對(duì)網(wǎng)站做一個(gè)整體的分析,根據(jù)用戶對(duì)互聯(lián)網(wǎng)的了解程度可區(qū)分為新手型用戶和專家型用戶。新手型用戶對(duì)互聯(lián)網(wǎng)的了解程度比較低,理論上引導(dǎo)過(guò)程應(yīng)盡量詳細(xì),讓其感受到濃厚的人文關(guān)懷。一般來(lái)說(shuō)此類用戶使用網(wǎng)站比較迷茫,不明白自己想要做什么,只會(huì)吸引感興趣的內(nèi)容。而專家型用戶對(duì)互聯(lián)網(wǎng)了解程度較高,已然不需要過(guò)多的引導(dǎo),只要能傳達(dá)出網(wǎng)站產(chǎn)品的特色、核心功能即可。此類用戶點(diǎn)擊網(wǎng)站的目的明確,只會(huì)關(guān)注自己所需要的。引導(dǎo)設(shè)計(jì)大致分為三個(gè)類型,如下:全局式引導(dǎo):這個(gè)類型的引導(dǎo)比較常見(jiàn),也是不對(duì)用戶了解程度有要求的的一種引導(dǎo)方式。全局式引導(dǎo)的好處在于可以明確且清楚的去突出產(chǎn)品,給用戶留下深刻的印象,也方便用戶快速上手操作,接受度會(huì)得到明顯的提高。局部式引導(dǎo):也被稱作備注式引導(dǎo)。這個(gè)類型通常會(huì)在注冊(cè)頁(yè)面或登陸頁(yè)面時(shí)出現(xiàn),例如知乎網(wǎng)的引導(dǎo)框,提示用戶新的變化,引導(dǎo)用戶點(diǎn)擊查看。向?qū)揭龑?dǎo):也被稱作為分步驟引導(dǎo)。這是將復(fù)雜繁瑣的操作過(guò)程進(jìn)行分段,告訴用戶此項(xiàng)操作總數(shù)共有多少項(xiàng),此時(shí)已進(jìn)行到哪一步,以及后邊的進(jìn)程。人的心理總是傾向于目標(biāo)明確、結(jié)構(gòu)清晰的對(duì)象,讓用戶能夠清晰的見(jiàn)到整個(gè)過(guò)程,有兩個(gè)作用:一是引導(dǎo)用戶。此種引導(dǎo)方式在京東網(wǎng)、各大支付平臺(tái)、各大網(wǎng)銀平臺(tái)或者較為復(fù)雜的網(wǎng)絡(luò)平臺(tái)時(shí)顯得尤為重要。用戶可能是首次接觸到這個(gè)網(wǎng)站,對(duì)于如何操作仍是一知半解。此時(shí)能夠有一個(gè)清晰的導(dǎo)向示意圖,讓其可以一步一步操作,會(huì)提升客戶極大的心理信任。二是給用戶心理依賴感和安全感。用戶傾向于執(zhí)行自己知道終點(diǎn)的操作。小結(jié):引導(dǎo)模設(shè)計(jì)的效果就是在潛移默化中進(jìn)行,讓用戶毫追隨并接受你的引導(dǎo)。三個(gè)引導(dǎo)方式并不是孤立存在的,而是相輔相成、互相襯托。在不同的情況下應(yīng)選擇不同的方式。
網(wǎng)站設(shè)計(jì)—異常情況和處理方式有哪些?
在設(shè)計(jì)中異常指的是除了正常狀態(tài)之外的情況,舉個(gè)例子,假如你要設(shè)計(jì)一個(gè)下載按鈕,那么下載按鈕需要有幾種狀態(tài)呢?正常狀態(tài)下需要提供的下載按鈕的狀態(tài)應(yīng)該有:點(diǎn)擊下載(下載前)正在下載(或者是下載中、已下載59%等描述)下載完成如果你在設(shè)計(jì)中只提供了這三種下載狀態(tài)是不夠的(其實(shí)有部分新手設(shè)計(jì)師,只提供了點(diǎn)擊下載這種狀態(tài))。還應(yīng)該考慮如果下載中出現(xiàn)了斷網(wǎng),或者是用戶暫停下載等情況的時(shí)候應(yīng)該怎么處理呢?這就是異常情況。所以除了前面三種狀態(tài),還需要提供繼續(xù)下載,下載失敗等狀態(tài)。下載完成后,現(xiàn)在的設(shè)計(jì)一般是會(huì)自動(dòng)安裝的,此時(shí)顯示安裝中,如果不自動(dòng)安裝還需要提供安裝操作,安裝完成后提供打開(kāi)的操作。當(dāng)然這里面包含的異常狀態(tài)主要是暫停后的繼續(xù)下載、下載失敗等。下圖就是我做的下載按鈕,可以看到其實(shí)很多狀態(tài)如點(diǎn)擊下載、下載完成、安裝、打開(kāi)等在視覺(jué)表現(xiàn)上是一樣,只是文本不同。即使是這樣,這些應(yīng)有的狀態(tài)無(wú)論是交互設(shè)計(jì)師還是視覺(jué)設(shè)計(jì)師都應(yīng)該給出的,不然程序員會(huì)不知道哪一種情況用什么形式的按鈕。主要包含以下7 種情況:與網(wǎng)絡(luò)環(huán)境等有關(guān)的:下載失敗、服務(wù)器出錯(cuò)、斷網(wǎng),網(wǎng)速過(guò)慢、加載失敗、網(wǎng)絡(luò)連接失敗(wifi密碼正確,連接不成功);空狀態(tài):搜索結(jié)果為空、無(wú)瀏覽記錄、無(wú)收藏、無(wú)購(gòu)買記錄、無(wú)訂單記錄、無(wú)下載記錄等;表單類異常:密碼錯(cuò)誤、輸入字符太少,數(shù)量超額,賬號(hào)密碼等不符合相應(yīng)規(guī)則、賬號(hào)過(guò)期、必填項(xiàng)未填寫(xiě)(提示并定位)、必填項(xiàng)的輸入字符為空等;時(shí)效性:二維碼/驗(yàn)證碼的過(guò)期/失效處理,例如具有實(shí)效性的鏈接,二維碼等;限定值:上傳文件超過(guò)限定大小、操作過(guò)于頻繁(刷新頻繁,點(diǎn)贊、抖一抖,戳一戳等,需給出友好提示);不可用:賬號(hào)不存在、賬號(hào)過(guò)期、選項(xiàng)不可選、按鈕置灰等;其他:外接設(shè)備連接失敗(如遙控器、音響、手機(jī)等)、斷電/電量過(guò)低、安裝失敗;2.用戶在操作中是感受不到這種異常,并且對(duì)用戶的操作有較小影響的。其實(shí)在一些登錄、支付、提交等按鈕,還有一種「不可用」的狀態(tài),用戶未輸入信息時(shí),登錄按鈕置灰,只有當(dāng)用戶輸入相應(yīng)的信息后,按鈕才高亮。二、異常情況的匯總通過(guò)上面的例子,相信已經(jīng)充分了解到設(shè)計(jì)中的異常是什么,以及異常的處理方式,那么接下來(lái)總結(jié)一下設(shè)計(jì)中常見(jiàn)的異常情況。異常情況處理其實(shí)分為兩種情況。兩種異常情況處理1.界面中有明顯的提示,需要用戶了解此情況的,并且影響用戶進(jìn)行下一步操作的。主要是用戶切換任務(wù)引起的異常:如按 home鍵突然退出/切換應(yīng)用、返回鍵退出、下載過(guò)程退出等。以上就是在設(shè)計(jì)中常見(jiàn)的一些異常情況匯總,看到這里,可能很多朋友就要說(shuō)了,這么多,我怎么記得住。我個(gè)人的建議是:如果你熟悉上面的這些異常的話,其實(shí)在設(shè)計(jì)類似的模塊時(shí)就會(huì)考慮到相應(yīng)的情況;如果你不熟悉這些,你可以把文章描述的異常情況當(dāng)作一個(gè)檢查表,設(shè)計(jì)到相應(yīng)的模塊時(shí),可以參考是否會(huì)出現(xiàn)上方的情況。三、異常處理接下來(lái)分析一下這些異常情況的處理方式,按異常方式來(lái)處理。與網(wǎng)絡(luò)環(huán)境等有關(guān)的:下載失敗、服務(wù)器出錯(cuò)、斷網(wǎng),網(wǎng)速過(guò)慢、加載失敗、網(wǎng)絡(luò)連接失敗(wifi密碼正確,連接不成功)1.下載失敗一般需要給出明確的下載失敗提示,可以通過(guò)彈窗、Toast、列表等提示。如下圖所示,然后給出用戶下一步的操作提示,例如重試、重新下載、刪除等操作。2.空狀態(tài)搜索結(jié)果為空、無(wú)瀏覽記錄、無(wú)收藏、無(wú)購(gòu)買記錄、無(wú)訂單記錄、無(wú)下載記錄等。其實(shí)空狀態(tài)很好理解,就是頁(yè)面沒(méi)有內(nèi)容時(shí),空頁(yè)面一般會(huì)提示用戶當(dāng)前頁(yè)面的空狀態(tài),同時(shí)也可以做適當(dāng)?shù)囊龑?dǎo)。例如在影視類App中,如果觀看記錄為空,則可以為用戶推薦影片,如熱播影片、猜您喜歡,其他人都在看等熱門推薦供用戶選擇。不過(guò)如果無(wú)法確定你推薦的用戶是否喜歡,不建議做推薦。3.表單類異常密碼錯(cuò)誤、輸入字符太少,數(shù)量超額,賬號(hào)密碼等不符合規(guī)則、賬號(hào)過(guò)期、必選項(xiàng)未填寫(xiě)(提示并定位)、必填項(xiàng)的輸入字符為空等。4.時(shí)效性二維碼/驗(yàn)證碼的過(guò)期/失效處理,例如具有實(shí)效性的鏈接,二維碼等。實(shí)效性比較多的體現(xiàn)在二維碼、付款碼、驗(yàn)證碼等有時(shí)間限定的情況下才有效的情況,通常失效之后需要重新刷新,手機(jī)的篩選操作通常是點(diǎn)擊或者是下拉刷新;PC端的通常好似點(diǎn)擊,TV 端的是按「OK」鍵刷新。如下圖所示為 QQ 的掃碼登錄頁(yè)面和 UC瀏覽器的手機(jī)登錄頁(yè)面。5.限定值上傳文件超過(guò)限定大小、操作過(guò)于頻繁(刷新頻繁,點(diǎn)贊、抖一抖,戳一戳等,需給出友好提示)對(duì)于文件過(guò)大無(wú)法上傳、下載這種建議都是采取彈窗的方式告訴用戶當(dāng)前狀況,明確問(wèn)題并且加上操作提示。如新媒體管家中的導(dǎo)入的word 的文件不能超過(guò)10M的提示如下左圖所示。對(duì)于操作過(guò)于頻繁,比較常見(jiàn)于 QQ 中的抖動(dòng)窗口,其實(shí)在一些電視頁(yè)面的手機(jī)截圖工具中,刷新太頻繁也會(huì)彈出Toast 提示。6.不可用賬號(hào)不存在、賬號(hào)過(guò)期、選項(xiàng)不可選、按鈕置灰等。賬號(hào)不存在用于登錄時(shí),輸入的賬號(hào)不在已注冊(cè)的賬號(hào)中,則會(huì)提示此賬號(hào)不存在,是否立即注冊(cè)等。7.賬號(hào)過(guò)期APP 或網(wǎng)站中,登錄賬號(hào)后,如果太久不使用,則會(huì)有過(guò)期的期限,設(shè)計(jì)師需要根據(jù) APP的具體情況設(shè)置登錄過(guò)期的時(shí)間期限,此時(shí)需要提醒用戶重新登錄。主要有 Toast和彈窗兩種方式提示,這需要根據(jù)賬號(hào)過(guò)期對(duì)用戶的影響大小來(lái)決定用哪一種方式。如下方左圖所示,登錄賬號(hào)過(guò)期對(duì)用戶使用此應(yīng)用的影響不大,則可以采用 Toast輕提示的方式處理;如下方右圖,如果不登錄賬號(hào)則無(wú)法使用此應(yīng)用的功能,則需要采用彈窗強(qiáng)提示的方式,提示用戶去登錄。8.選項(xiàng)不可選主要包含當(dāng)前的選項(xiàng)中有不可選的選項(xiàng),還包括在不達(dá)到某種條件情況下,無(wú)法使用此功能的按鈕等。9.其他外接設(shè)備連接失敗(如遙控器、音響、手機(jī)等)、斷電/電量過(guò)低、安裝失敗。外接設(shè)備連接失敗需要提示,如果知道連接失敗原因,建議給出原因。斷電情況通常用于 PC端和 TV端,斷電后需要為用戶恢復(fù)文件。很多設(shè)計(jì)軟件都有這個(gè)功能,一旦軟件無(wú)響應(yīng)或者其他異常情況導(dǎo)致文件出問(wèn)題,一般都會(huì)提供恢復(fù)文件。安裝失敗后需要提供提示安裝失敗原因,如存儲(chǔ)空間不足、文件已損壞的提示。10.用戶切換任務(wù)引起的異常較多如按 home 鍵突然退出/切換應(yīng)用、返回鍵退出、下載過(guò)程退出。11.服務(wù)器出錯(cuò)服務(wù)器出錯(cuò)的頁(yè)面常見(jiàn)的500、501、502、503、504、505 等 5 開(kāi)頭的頁(yè)面。其中這些錯(cuò)誤的解釋如下:500 內(nèi)部服務(wù)錯(cuò)誤:顧名思義500 錯(cuò)誤一般是服務(wù)器遇到意外情況,而無(wú)法完成請(qǐng)求;501 服務(wù)器不具備完成請(qǐng)求的功能;502 Bad Gateway錯(cuò)誤;503服務(wù)器目前無(wú)法使用(由于超載或停機(jī)維護(hù));504 Bad Gateway timeout 網(wǎng)關(guān)超時(shí);505 服務(wù)器不支持請(qǐng)求中所用的 HTTP協(xié)議版本。服務(wù)器異常時(shí),在網(wǎng)頁(yè)端的處理方式為提示+返回,在移動(dòng)端的處理方式為提示+重試,下圖是一些普通的處理方式。近幾年,很多網(wǎng)站和應(yīng)用將這種異常頁(yè)面設(shè)計(jì)的相對(duì)美觀和有故事性一些,提升了整體的趣味性,減少用戶的焦慮。例如網(wǎng)絡(luò)被外星人劫走了之類的,相信大家也看過(guò)很多。這里就不舉例子了。12.網(wǎng)絡(luò)異常斷網(wǎng)、網(wǎng)速過(guò)慢、網(wǎng)絡(luò)連接失敗(wifi密碼正確,連接不成功)其實(shí)都是屬于網(wǎng)絡(luò)異常的情況,加載失敗有時(shí)是網(wǎng)絡(luò)速度慢造成的,有時(shí)可能是IIS(Internet Information Services互聯(lián)網(wǎng)信息服務(wù))空間不足。下圖是一些網(wǎng)絡(luò)異常情況下的處理方式。如果網(wǎng)絡(luò)異常之前應(yīng)用沒(méi)有緩存之前的頁(yè)面的內(nèi)容,則整體提示用戶網(wǎng)絡(luò)異常,也可以提供一個(gè)操作指導(dǎo)用戶操作;如果網(wǎng)絡(luò)異常之前頁(yè)面已經(jīng)緩存則顯示之前的頁(yè)面,Toast輕提示用戶網(wǎng)絡(luò)異常,此類異常建議用戶再次打開(kāi)時(shí),回到上次用戶離開(kāi)前的狀態(tài)。如果數(shù)據(jù)被清理,則回到上次保存的數(shù)據(jù)頁(yè)面中。四、總結(jié)文章主要總結(jié)了設(shè)計(jì)中常用的異常情況,并且給出了相應(yīng)的解決方案,最長(zhǎng)用的規(guī)則就是給出異常提示+下一步操作提示,既明確了出錯(cuò)原因,又指引用戶下一步操作,用戶是相對(duì)容易接受的。
網(wǎng)站名稱:網(wǎng)站設(shè)計(jì)中如何做好引導(dǎo)設(shè)計(jì)模式?
網(wǎng)址分享:http://www.rwnh.cn/news/62127.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容