close

                                                                                

 

最近在使用某SaaS文檔協作工具系統時,發現一個模組更新的提示,出於好奇,點擊進入查看此系統更新了什麼功能,做了一些嘗試體驗。

又想到大家在使用App的過程中,經常遇到App新功能的引導頁面,但很少有對於PC-Web後臺系統的引導文章,正好梳理一下以前遇到的各種Web場景引導頁。

一、形色引導

 

通過形狀、色彩、大小等進行引導。當人們大腦接收到一定量資訊時,會對相似的的資訊進行分類來簡化資訊的處理,所以我們在設計中可以把同類型的元素使用相同的形狀或色彩等。比如在選擇購買商品時,我們所需要篩選的資訊較多,如類別、品牌、價格、新舊、區域,這時候把這些資訊使用相同的樣式展示,使用者很自然的認為這些資訊是有關聯的,都是為了篩選所需的條件。

二、嚮導引導

除上圖中的嚮導步驟條,還有我們常見的場景——安裝CS版用戶端軟體的步驟條,可以回退、可以下一步、也可以取消。如下圖:

 

三、首頁引導

 

登錄一些後臺系統時,是不是經常看到更新公告。

比如上圖中的某業務系統,登錄後,首頁就是更新公司,相信大家看到這種,基本不去閱讀,會立即關閉,做產品設計時,怎樣防止用戶立即關閉呢?

去掉關閉按鍵,強制閱讀?

增加倒計時,在5秒、10秒後自動消失?

手工點擊已閱讀?

目前遇到就這些方案,如有其它,歡迎留言,期待你來。

 

是不是感覺前一圖的文字太多,對於有密集恐懼症的人說,是不願看到的,那對於產品來說,又想引導,又不要密集,那怎麼解決呢?

騰訊的TAPD專案管理工具平臺,就使用功能表引導的方式,點擊某功能表後,才彈出相應的幫助引導,也是一種好方法。

四、元素引導

 

使用過石墨文檔的童鞋應該能發現他們引導使用者熟悉產品的方式非常走心,和前面看到的幾家都不一樣,只用在使用產品的過程中,才引導你某某按鈕又做了什麼更新,哪些地方可以beta嘗鮮體驗。為你的別具一格引導方式點贊。

總結:設計一個良好的引導功能並不容易,你需要做出大量的規劃,通過試錯來驗證設計。希望今天分享列舉的幾種實踐——形色引導、嚮導引導、首頁引導、元素引導(最小細微性引導)能夠啟發大家完成引導程式的設計。

 

arrow
arrow
    全站熱搜

    微社群馬丁 發表在 痞客邦 留言(0) 人氣()