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