2017-4-11 資深UI設(shè)計(jì)者
引導(dǎo)新用戶熟悉產(chǎn)品的方式多種多樣,向?qū)С绦蚴瞧渲凶罱?jīng)典也是最常用的一種。今天的文章,我們來聊聊向?qū)С绦虻脑O(shè)計(jì)模式。
向?qū)С绦蛲ǔ?huì)提供一系列的步驟或者目標(biāo),讓用戶在完成步驟達(dá)成目標(biāo)的過程中,逐步熟悉這個(gè)平臺(tái)或者產(chǎn)品。向?qū)С绦颍╓izerd),或者說是新手向?qū)ё畛跏歉綆г趯?shí)物產(chǎn)品的說明書當(dāng)中,告訴用戶如何起步,怎么使用產(chǎn)品。在此之后不就,隨著互聯(lián)網(wǎng)的和數(shù)字產(chǎn)品的發(fā)展,它也引入到數(shù)字產(chǎn)品當(dāng)中。最典型的,就是各種軟件的安裝向?qū)А?
許多傳統(tǒng)的桌面端軟件在安裝的時(shí)候,是有安裝向?qū)С绦騺硪龑?dǎo)用戶完成這個(gè)步驟的,直到今天也是如此。這種設(shè)計(jì)模式是隨著Windows 95的大規(guī)模普及而得到了推廣。
向?qū)С绦虻暮锰幉⒉簧伲?
將復(fù)雜的任務(wù)分解成為一系列簡單易行的小步驟,幫你進(jìn)行精簡。
分割處理,各個(gè)擊破。
正如同之前所說的,桌面端軟件安裝的向?qū)Ь褪欠浅5湫偷睦印T诎惭b向?qū)У闹敢?,用戶需要自己?fù)制文件,編輯配置文件,選取安裝目錄,并檢查軟件是否正常運(yùn)行。安裝向?qū)?fù)雜的條件轉(zhuǎn)化為可理解可執(zhí)行的步驟,它所帶來的回報(bào)也是明顯的:減少了培訓(xùn)和客戶服務(wù)上的成本。
許多操作和決策是需要專業(yè)知識(shí)支撐的,但是向?qū)С绦蚝芎玫慕鉀Q這個(gè)問題,幫用戶合理的規(guī)避了這些障礙。用戶只需要按照預(yù)設(shè)的路徑一步步完成整個(gè)初始化過程:“不要讓我想,只需要告訴我下一步要怎么做?!?
向?qū)С绦蚩梢栽谙旅媲闆r下發(fā)揮作用:
1、用戶想要達(dá)成一個(gè)需要多個(gè)步驟才能完成的目標(biāo)
你正在設(shè)計(jì)的UI牽涉到一個(gè)超長的任務(wù)或者是一個(gè)無法直接簡化流程的任務(wù),而向?qū)С绦蚰軌蜃屵@個(gè)任務(wù)的復(fù)雜性看起來降低了,而可行性和易用性提高了。
2、用戶必須按照特定的順序來完成的任務(wù)
對(duì)于必須按照特定順序來執(zhí)行的任務(wù),是需要學(xué)習(xí)的,而向?qū)С绦蚰軌蚪档蛯W(xué)習(xí)曲線,同時(shí),細(xì)分的流程讓用戶不會(huì)錯(cuò)過重要的步驟,降低出錯(cuò)的機(jī)率。
向?qū)С绦蚩隙ú皇侨f能的,甚至可以說它是需要謹(jǐn)慎使用的。將任務(wù)分解成小步驟,并不是每次都能給人帶來良好的體驗(yàn):
1、當(dāng)任務(wù)本身并不復(fù)雜的時(shí)候
當(dāng)一個(gè)任務(wù)只需要一個(gè)簡單的表單,或者點(diǎn)擊幾下按鈕就能完成的話,那么它并不需要使用向?qū)С绦騺硪龑?dǎo)用戶。
2、當(dāng)用戶本身就是進(jìn)階用戶之時(shí)
向?qū)С绦蛲ǔ?huì)將復(fù)雜的問題簡化來處理,但是這種解決方案并不能應(yīng)對(duì)所有的用戶需求。對(duì)于進(jìn)階用戶,或者說重度用戶而言,向?qū)С绦虺3?huì)顯得僵化,他們會(huì)覺得受限。向?qū)С绦蚴怯脕韼椭脩舻?,但是重度用戶所追求的自由和定制性常常無法從向?qū)С绦蛑蝎@得。對(duì)于創(chuàng)意工作者和程序員而言,尤其是如此。
小貼士:最好是在向?qū)С绦蛞酝馓峁╊~外的選項(xiàng)。
3、當(dāng)你想要指引用戶的時(shí)候
不要使用向?qū)С绦騺黻U述概念。用戶在向?qū)н^程中閱讀大量的補(bǔ)充文本,他們會(huì)更加專注于任務(wù)本身。
當(dāng)你在設(shè)計(jì)你的下一個(gè)產(chǎn)品的向?qū)С绦虻臅r(shí)候,可以參考下面的最佳實(shí)踐,來確保它的有效性:
向?qū)С绦虻腢I設(shè)計(jì)難度在于分割步驟的大小和數(shù)量之間的平衡。只有一兩個(gè)步驟的向?qū)С绦蚋緵]有存在的意義,而超過10個(gè)步驟的向?qū)С绦騽t會(huì)讓人覺得過長。最理想的設(shè)計(jì)是將向?qū)С绦蚩刂圃?~5個(gè)步驟。之后,將你所設(shè)計(jì)的向?qū)脕碜隹捎眯詼y試,確保它能為用戶所接受。
在每個(gè)步驟當(dāng)中,你需要讓用戶明白這個(gè)步驟的功能和存在的意義。同時(shí),每個(gè)步驟當(dāng)中,你應(yīng)該給予用戶足夠的信息來確保他們能作出正確的決定。想要每個(gè)步驟都有明確的目標(biāo),這兩個(gè)東西是關(guān)鍵:
·清晰而簡潔的向?qū)?biāo)簽
·每個(gè)步驟都有簡要的目的說明
反例:Homesite 這個(gè)網(wǎng)站在第一屏上并未對(duì)目標(biāo)作出陳述,如果用戶從其他的頁面直接跳轉(zhuǎn)過來,很難立刻弄明白要干啥。
不必要的界面元素在用戶完成任務(wù)的過程中,會(huì)分散他們的注意力。刪除這些元素能夠讓用戶更加專注。
你應(yīng)該搞清楚向?qū)С绦虻倪吔缭谀睦?,這樣才能確保用戶明白何時(shí)完成。為了讓你的向?qū)С绦蚋玫囊龑?dǎo)用戶,你應(yīng)該讓它的這些功能有所體現(xiàn):
·將步驟編號(hào)
·表明這些步驟推進(jìn)的方向(從上到下還是從左到右)
·區(qū)分正在執(zhí)行的步驟的和待完成的步驟
·指示已經(jīng)成功完成的步驟
·完成之后給予用戶以確認(rèn)信息
反例:不要讓每一個(gè)步驟都是孤立的,最好讓它和前后步驟聯(lián)系起來,讓用戶看到。
范例:清楚地在步驟旁邊標(biāo)上步驟數(shù)字,此外,從UI上體現(xiàn)所有步驟的概述。
默認(rèn)值,或者說默認(rèn)設(shè)定是非常有用的。無論你如何安排步驟,用戶始終還是希望擁有控制權(quán)的,而默認(rèn)值能給用戶作為參考。比如程序的安裝位置。
有的時(shí)候,由于種種原因用戶決定放棄執(zhí)行當(dāng)前步驟,而取消按鈕讓用戶在決定放棄的時(shí)候,有安全的退出路徑。
如果用戶有新的想法,或者有新的主意,那么用戶可能會(huì)撤銷已完成的步驟,重新開始,修改數(shù)據(jù),或者完全放棄。讓用戶可以回到上一個(gè)步驟,撤銷已經(jīng)執(zhí)行的步驟,則能夠重新開始引導(dǎo),按照新的想法來重新設(shè)置。
在即將完成整個(gè)向?qū)С绦虻臅r(shí)候,將用戶完成過程中所執(zhí)行的選擇總結(jié)成為摘要,讓用戶可以在完成前確認(rèn)所有的信息。
設(shè)計(jì)一個(gè)良好的向?qū)С绦虿⒉蝗菀祝阈枰龀龃罅康囊?guī)劃,通過試錯(cuò)來驗(yàn)證設(shè)計(jì)。希望今天所列舉出的最佳實(shí)踐能夠幫你完成向?qū)С绦虻脑O(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com