2016-11-1 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
企業(yè)應(yīng)用的復(fù)雜性決定了在用戶使用過程中難免會需要通過幫助來解決用戶遇到難題或者通過幫助的設(shè)計來引導(dǎo)用戶順利開始任務(wù)。接下來讓我們共同類型以及該如何設(shè)計這些幫助。
幫助設(shè)計的元素
1.文本
運(yùn)用簡短的文字給用戶提供恰當(dāng)?shù)膸椭畔ⅲ瑢δ軌蛴靡痪湓捳f明白的事情，決不擺弄文采的變出兩三句話甚至是一段話出來。太多的文字用戶選擇的是忽略而不是閱讀，用戶并不希望在你的產(chǎn)品幫助文本讀出詩意，而是簡單明確的告訴他們這是什么情況，你可以采取什么行動，會有什么結(jié)果。文本鏈接也可以是文本的一種形態(tài)。
Xero 運(yùn)用文本的幫助設(shè)計
2.圖片
圖片能夠形象具體的表達(dá)出想要表達(dá)的意思與觀點(diǎn)，對于相對較為復(fù)雜的情形，可以適當(dāng)?shù)牟捎脠D文并茂的形式對用戶進(jìn)行幫助引導(dǎo)或者解決用戶遇到的問題。提供生動的圖形信息能夠有效吸引用戶的注意力，通過解讀圖片的信息而獲得對應(yīng)的幫助信息。在幫助設(shè)計中有效的運(yùn)用圖片能夠降低用戶學(xué)習(xí)的成本獲得更好的用戶體驗(yàn)。
Xero 運(yùn)用圖文的幫助設(shè)計
3.視頻
視頻可以運(yùn)用到復(fù)雜的情形中，通過聲音圖形有序的講解來提供給用戶相關(guān)的幫助信息。視頻剪輯提供了對于復(fù)雜流程及情形更為生動的介紹或者解答，用戶更多是在被動的接受信息中，更大程度的減少了用戶學(xué)習(xí)的成本，因此推薦使用視頻對復(fù)雜的情況進(jìn)行解釋說明，但視頻同時會占用更多的存儲于網(wǎng)絡(luò)流量資源，尤其當(dāng)用戶在非wifi環(huán)境下，視頻可能是并非用戶首選的點(diǎn)擊選擇。
Xero 運(yùn)用視頻的幫助設(shè)計
幫助類型
不同的情境不僅需要選擇使用幫助的元素，也需要選擇合適的幫助類型來為用戶提供恰到好處的幫助，本文將幫助分為介紹型幫助與勸導(dǎo)型幫助兩種類型，在不同的上下文情境中選擇不同的類型來給用戶提供幫助的解決方案。
介紹型幫助：顧名思義，介紹型幫助即以介紹為主要目的，這種方式的幫助主要可以運(yùn)用在用戶初次接觸產(chǎn)品或者某些功能時候提供的說明性幫助，如功能模塊介紹，標(biāo)題的解釋以及一些操作過程功能的解讀。旨在告知用戶當(dāng)面明對的是什么，可以做什么或者有什么用處。 如QuickBooks 在注冊的不同階段，提供適當(dāng)?shù)恼f明性解讀，告知用戶當(dāng)前步驟的作用及意義（見下圖）。
QuickBooks 介紹型幫助設(shè)計
勸導(dǎo)型幫助：即通過介紹引導(dǎo)用戶完成瀏覽或者任務(wù)。勸導(dǎo)型幫助可以運(yùn)用在一些空白的起始頁面，創(chuàng)建于修改頁面中，對于新功能操作的引導(dǎo)以及操作中遇到問題的解決幫助。勸導(dǎo)型幫助目的是勸導(dǎo)用戶嘗試某新新的功能或者通過引導(dǎo)完成任務(wù)。如Base應(yīng)用中對初始界面運(yùn)用引導(dǎo)性的標(biāo)識與文字提示用戶點(diǎn)擊上方按鈕開始創(chuàng)建銷售按鈕（見下圖）。
Base 勸導(dǎo)型幫助設(shè)計
幫助的表現(xiàn)形式
1.文本類幫助表現(xiàn)形式：
類型一：內(nèi)置輸入提示，內(nèi)置輸入提示通常為簡短明確的提示，引導(dǎo)用戶需要填入的內(nèi)容、格式等。如下圖：Stich Labs用戶選擇輸入的設(shè)計，將提示文字顯示在輸入框內(nèi)，當(dāng)用戶需要輸入時，便可以快速瀏覽文字獲得需要進(jìn)行的操作提示。
Stitch Labs內(nèi)置輸入提示設(shè)計
類型二：輸入內(nèi)容的旁位提示（如下圖），這種提示方式適用于一列的頁面排版中，因?yàn)閷τ谳斎雰?nèi)容的提示文字相對較多，不宜大面積使用，推薦在內(nèi)容較少的表單中使用，如注冊。
輸入內(nèi)容旁位提示
類型三：對文本的說明性提示（如下圖），這種提示適合運(yùn)用于標(biāo)題、獨(dú)立區(qū)塊說明以及一些特殊需求的字段中。
Stitch Labs中對頁面標(biāo)題的說明幫助設(shè)計
Stitch labs 頁面中對標(biāo)題的輔助說明設(shè)計整體頁面
2.彈出浮框式：
彈出浮框可以在當(dāng)用戶需要時候提供簡短的幫助信息，不需要時候隱藏起來的一種方式。觸發(fā)浮框的觸發(fā)點(diǎn)根據(jù)實(shí)際需要可以變化，如下圖的兩種觸發(fā)點(diǎn)樣式。需要說明的是在為桌面進(jìn)行的設(shè)計，推薦可以采用獲得焦點(diǎn)即顯示幫助文字，在移動設(shè)備上時通過點(diǎn)擊顯示。也可以根據(jù)實(shí)際需要調(diào)整觸發(fā)的時機(jī)。提出浮框可以運(yùn)用在許多地方，如對輸入標(biāo)簽的提示，對新功能行按鈕的引導(dǎo)性介紹等。下圖是彈出浮框的觸發(fā)樣式以及QuickBooks 對彈出浮框的運(yùn)用。
以圖標(biāo)為觸發(fā)點(diǎn)的彈出浮框提示以及以文本為觸發(fā)點(diǎn)的彈出浮框提示
QuickBooks的彈出浮框提示設(shè)計
3.解釋模塊式：
解釋模塊用于對頁面，或者較大的區(qū)塊進(jìn)行的說明?？梢允羌兾谋镜恼f明，也可以是圖文并茂以及內(nèi)嵌視頻對復(fù)雜的功能及內(nèi)在邏輯進(jìn)行指導(dǎo)說明，或者是步驟的引導(dǎo)說明。如StichLabs在采購訂單初始界面按照步驟以圖文方式整體介紹如何快速創(chuàng)建采購訂單（見下圖）；
StichLabs 初始界面的提示區(qū)域設(shè)計
Xero產(chǎn)品中運(yùn)用圖文方式，直觀的將創(chuàng)建發(fā)票步驟顯示在頁面頂部幫助解釋區(qū)域，方便用戶直接查看參考（如下圖）。
Xero操作步驟的提示區(qū)域設(shè)計
Base針對具體的區(qū)域運(yùn)用解釋區(qū)域的幫助形式對該區(qū)域的內(nèi)容進(jìn)行解釋與操作引導(dǎo)（如下圖）：
Base 區(qū)塊化幫助設(shè)計設(shè)計
4.內(nèi)嵌式幫助中心
大多數(shù)的企業(yè)應(yīng)用軟件還會提供內(nèi)嵌幫助中心，內(nèi)嵌幫助中心通常會根據(jù)當(dāng)前頁面內(nèi)容提供針對性的幫助內(nèi)容入口以及在線幫助中心的固定入口，用戶通過內(nèi)嵌的幫助中心可以獲得該頁面直接或者間接相關(guān)的幫助內(nèi)容入口，同時也可以鏈接到在線的幫助中心，獲得更為全面的幫助內(nèi)容。（下圖分別為內(nèi)嵌的幫助中心與在線幫助中心示例）
QuckBooks內(nèi)嵌幫助中心
5.在線幫助中心
在線幫助中心是最全面的集中幫助文檔的地方，在線的幫助中心內(nèi)容不一定是百分之百集合了應(yīng)用中所有的相關(guān)幫助，更多的承載了對于產(chǎn)品功能模塊、業(yè)務(wù)操作以及操作引導(dǎo)的介紹，如下圖QuickBooks的在線幫助中心。
Quick Books在線幫助中心
選擇使用幫助設(shè)計的要點(diǎn)
a.時機(jī)
產(chǎn)品中的幫助并非越多越好，也并非越早越好或者等著用戶自己去挖掘。好的幫助形式是能基準(zhǔn)把握時機(jī)，并較為準(zhǔn)確的判斷出用戶可能遇到的問題，并提供有針對性的解決方法。如QuickBooks的幫助中心，根據(jù)當(dāng)前界面的內(nèi)容，提供針對頁面內(nèi)容的用戶可能需要的幫助內(nèi)容入口，供用戶選擇使用。
QucikBooks 根據(jù)當(dāng)前頁面內(nèi)容在幫助中心中提供的關(guān)聯(lián)內(nèi)容
b.頻率
當(dāng)用戶需要頻繁的進(jìn)行某個操作或者使用某個功能時候，開始用戶可能對此功能的頁面或者該功能不理解或者不熟悉，然后通過用戶頻繁使用，當(dāng)用戶已經(jīng)對該功能爛熟于心時，此時的幫助提示是不是多余的元素呢？如何處理類似這種情況呢?相反，如果用戶對某頁面或者功能使用的并不是非常頻繁，只是偶爾用使用，該模塊的頁面與功能相對來說又比較復(fù)雜，那我們可以選擇將幫助內(nèi)容暴露在頁面中，共用戶方便查看，如設(shè)置頁面，用戶訪問的頻率不高，但是設(shè)置的操作復(fù)雜并且有許多內(nèi)在聯(lián)系的內(nèi)容，提供簡單直接容易獲得的幫助能夠提高用戶完成任務(wù)的速度，從而提高用戶效率。如Xero的新手引導(dǎo)幫助設(shè)計就比較巧妙，當(dāng)用戶首次進(jìn)入系統(tǒng)或者新用戶剛開始使用系統(tǒng)，Xero將如何開始使用軟件放置在頁面中非常明顯的位置，提供具體的引導(dǎo)幫助用戶快速學(xué)習(xí)開始。但同時提供了關(guān)閉該幫助提示的功能，而當(dāng)用戶再次需要該模塊的幫助內(nèi)容時，便可以在固定的入口再次將此幫助顯示在原來的位置（如下圖）。
Xero 打開幫助提示的設(shè)計
c.重要性
幫助設(shè)計還需要根據(jù)設(shè)計目標(biāo)的重要程度來評估使用什么形式的幫助。如果某功能并非核心功能，用戶及時不知道該功能是做什么的，但可以通過嘗試來逐漸弄明白該功能的作用，而不會造成嚴(yán)重的錯誤，如導(dǎo)致業(yè)務(wù)出錯或者一些不可逆的損失，則可以選擇性的采用幫助的形式與提示時機(jī)。但如果該功能或者頁面非常重要，不適當(dāng)?shù)膰L試會導(dǎo)致嚴(yán)重的后果，造成不可逆的影響或者取消該操作產(chǎn)生的影響會涉及很多的內(nèi)容與流程，則最好在用戶嘗試操作前提供必要明確的操作提示，降低操作錯誤的概率。必要時候可以采用打斷用戶的方式進(jìn)行引導(dǎo)用戶。
d.一致性
以上介紹了多種的幫助設(shè)計樣式，作為同一個應(yīng)用或者軟件，可以綜合使用多種幫助設(shè)計的形式，但在使用的同時，保證整體的統(tǒng)一性一樣非常重要，一致的設(shè)計與體驗(yàn)?zāi)軌蛱岣哂脩魧?yīng)用的信任并有更好的體驗(yàn)，一致的設(shè)計也能減少用戶學(xué)習(xí)的成本。如，我們常見的幫助設(shè)計方式，如果大多數(shù)需要此類幫助設(shè)計的頁面采用類似的布局方式，用戶在訪問到當(dāng)前頁面即使不仔細(xì)查看也能推斷出此塊是幫助內(nèi)容部分，相反，如果每個頁面有不同的位置布局，當(dāng)用戶需要幫助的時候，還需要花額外的精力進(jìn)行尋找該幫助。
總結(jié)
無論使用哪種幫助形式，都只是意在預(yù)判用戶在瀏覽或者執(zhí)行任務(wù)時候可能遇到的問題而進(jìn)行的輔助形式。最好的設(shè)計是盡可能的減少額外幫助的使用，當(dāng)一定需要使用幫助來減少用戶使用產(chǎn)品的受挫感或者減少用戶出錯的概率，應(yīng)當(dāng)選擇在適當(dāng)?shù)臅r機(jī)選擇合適的幫助形式輔助用戶完成任務(wù)。
最好的設(shè)計是讓用戶根據(jù)經(jīng)驗(yàn)或者直覺去順利完成相關(guān)的任務(wù)，當(dāng)然，也有些大眾消費(fèi)應(yīng)用會提供讓用戶自己挖掘功能或者服務(wù)來給用戶帶來額外的驚喜；但對于商業(yè)類軟件來說，效率是第一位的，如果想通過趣味性換來用戶的忠誠可能不是明智的選擇，所以在設(shè)計商業(yè)類軟件或者應(yīng)用時候，在沒有其他設(shè)計方式可以表達(dá)復(fù)雜的流程或者內(nèi)在的功能聯(lián)系，可以適當(dāng)?shù)倪x擇幫助設(shè)計來達(dá)到提醒用戶，輔助用戶順利完成預(yù)期目標(biāo)的目的。
文章來源: http://www.boxui.com/ued/interaction-design/26474.html
藍(lán)藍(lán)設(shè)計( www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.jghy.net
