設計思考：B/S結構服務中，如何提高資源資訊的預覽體驗？

釋放雙眼，帶上耳機，聽聽看~！

00:00

00:00

最近筆者主導了一個教育資源網站的搭建過程，在對優化預覽功能體驗方案中頗有體會，認為從產品價值、使用者體驗都值得去思考，下面和大家分享一下我的思考路徑！

先交待一下背景~

網站用於展示小學、初中、高中各個學科的教育資源，如教案、學案、課件、微課、試題等多種資源，服務於小、初、高階段的一線教育從業者。使用者可通過瀏覽器直接訪問該網站的教育資源，可以在瀏覽器上開啟資源文件內容進行瀏覽，支援登入會員下載使用。運營後收集使用者反饋資訊，其反映的情況很不樂觀，尤其是網站的體驗方面，使用者感到有一種挫敗感……

如此是很難將網站應有的價值傳遞給使用者的，通過市場調研、使用者反饋以及對網站資料的分析，發現了一些問題：尤其在預覽資源文件流程中，一些常用的資源格式不支援線上瀏覽，視覺體驗質量不高，內容模糊，文件內容載入慢，等待時間長……

從網站的定位來看，提供資源預覽（或瀏覽）是該網站提供資源服務的核心功能，也是網站在內容和資訊傳達服務實現其價值的直接體現，因此優化並提高預覽環節的使用者體驗問題需要重視起來。

筆者圍繞如何提高資源文件在瀏覽器中線上預覽的體驗，進行了廣泛的思考和分析，也在此分享出來希望讀者對此多提見解，與筆者一起打造出極致的預覽體驗。

針對這個問題，我並沒有直接去尋找答案，而是先對網站資源庫中的基礎資料進行了統計和整理，並深度分析目標使用者關注的教學資源型別及資源文件型別、格式等因素，對相關資訊進行了全面彙總和分析。

下面是通過對資源庫中的資源基礎資料的資訊圖表：

通過觀察和分析，發現網站資源庫中資料很複雜。資源型別包括教案、學案、課件、微課、動畫、聽力、試題等十多個類別，其實在使用者實際使用場景中，各型別資源的定義是相對的，是可以相互轉化的。

此外網站中資源的文件格式種類數量也有很多種，通過分析網站的目標使用者關注的資源型別，發現大多集中在教案、學案、課件、試題、微課等這幾類,且這些類別的資源文件格式多以pdf、ppt、doc、mp4、avi、flv為主。

思考到這裡，必須重新審視幾個問題：網站對資源進行如此細分是否合理呢？錄入資源時支援如此多的文件格式，是否有必要？目標使用者真切關注的資源型別有哪些，這些資源文件的常用的格式是怎樣的……

通過分析之後，我認清了一個事實：

• 首先，網站對資源過細的分類加重了使用者選擇的難度，也增加了使用者對資源本身所屬型別認知的成本；
• 其次，網站支援太多文件格式的線上瀏覽也增加了技術難度；
• 最後，網站沒有通過一些特殊載入方式來解決資源載入時間過長問題。

要解決我們面前的重要問題，就不能停留在當初製造他們的思維層面上。

——愛因斯坦

根據業務需求，並通過分析之後，我從資源資料、技術限制、互動操作、介面視覺設計幾個方面針對如何提高資源資訊的預覽體驗，展開了思考並進行了設計嘗試，內容如下：

（1）資料層面

這裡的資料層面是指該網站所承載資源基礎屬性，如資源型別、文件格式、文件大小等都是需要分析和思考的；在資料層面，提高資源線上預覽的體驗，從以下幾點進行了嘗試：

• 重新定義網站資源的類別，簡化類別細分，減輕使用者區分資源型別的負擔，避免使用者落入選擇困局；
• 嚴格規範資源文件錄入的限制條件，如文件格式、資源大小、命名規範等，同時提高錄入資源的質量品質，對不清晰、不完整的資源進行優化或剔除；
• 重視目標使用者重點關注的資源及其文件型別、格式等，如教案、學案、課件等；

從網站資源的原始資料上進行優化，可最大限度上提高資源資訊的預覽體驗。

（2）技術層面

網站資源資訊的瀏覽以數字裝置為媒介，通過瀏覽器訪問網站，進行資源文件的線上瀏覽。因此必須在瀏覽器相容、支援線上瀏覽格式等方面提高技術水平，如下幾點是對技術層面的優化要求：

• 必須支援並重點優化重點資源文件格式的線上瀏覽，如pdf、ppt、doc、mp4等；在此基礎上滿足更多文件格式的線上瀏覽，建議根據資料分析，制定一個支援線上預覽文件格式的優先順序表；
• 優化資源載入方式，比如瀏覽資源文件時，先載入部分內容，避免因資源過大，導致載入時間過長的情況；
• 採用先進演算法，優化資源資料大小，在保證資源品質的情況下，儘可能減小文件資源，加快載入速度；
• 對壓縮包型別的資源瀏覽的優化，比如採用展示資料包文件列表，使使用者選擇要瀏覽的資源文件；
• 錄入資源文件時，對不規範、質量不高的資源文件進行技術轉化，從而達到基礎資源優化的要求。

從技術層面提供線上預覽功能，可以最大程度的承載體驗設計意圖；當然對此還需要工程師哥哥的大力支援，如果落實不到位，提高使用者體驗就是一句空話；

（3）互動層面

互動體驗層面的優化，主要包括使用者篩選資源型別，到查詢資源文件，再到開啟並進入資源文件這一業務流程鏈路上的互動操作的優化，結合之前收集的使用者行為資料，來驅動產品體驗設計。

具體內容如下：

• 優化應用流程及功能互動，減少使用者完成任務的步驟和時間；
• 優化資源文件詳情頁面的互動方式，如在資源文件過長，頁數過多時進行分頁展示、引導載入、全屏檢視等；
• 優化資訊佈局結構，對文件資訊、功能操作元素進行佈局優化，突出重點資訊，從而幫助使用者完成與頁面功能的互動；
• 優化操作引導，窮盡異常情況，完整其處理機制，如操作引導、載入異常、網路中斷、使用者許可權反饋等。

一個網站如何能帶給訪問使用者極致的體驗，用最短的時間俘獲使用者，並與使用者產生情感共鳴，情感化的設計是至關重要的。

（4）介面資訊

• 優化介面版式佈局，通過合理的版式設計，來加強資訊傳達的效果；
• 簡化介面資訊，尤其是使用者瀏覽資訊的頁面，要減少干擾使用者的介面元素，努力營造沉浸式的瀏覽體驗；
• 優化欄位文案，進行圖形化處理，美化網頁介面，以此來達到提升視覺體驗的效果。

在進行介面設計時，要結合網站定位、使用者型別與產品整體的調性，與網站其他頁面的風格要保持一致，否則再優美華麗的網頁都會影響最終產品價值的傳遞和體現。

功能體驗的優劣決定了網站整體體驗，體驗伴隨使用者與網站進行的一切互動上，提升網站設計中的使用者體驗需要設計師應站在更全面的角度去系統的思考影響體驗的因素，從基礎資料、到技術支撐，再到細節呈現，努力嘗試每一個維度，終會創造超出使用者預期的產品設計，給使用者帶去體驗上的驚喜。

本文由 @歲月 原創釋出於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議