最近筆者主導(dǎo)了一個(gè)教育資源網(wǎng)站的搭建過(guò)程，在對(duì)優(yōu)化預(yù)覽功能體驗(yàn)方案中頗有體會(huì)，認(rèn)為從產(chǎn)品價(jià)值、用戶體驗(yàn)都值得去思考，下面和大家分享一下我的思考路徑！

先交待一下背景~

網(wǎng)站用于展示小學(xué)、初中、高中各個(gè)學(xué)科的教育資源，如教案、學(xué)案、課件、微課、試題等多種資源，服務(wù)于小、初、高階段的一線教育從業(yè)者。用戶可通過(guò)瀏覽器直接訪問(wèn)該網(wǎng)站的教育資源，可以在瀏覽器上打開(kāi)資源文檔內(nèi)容進(jìn)行瀏覽，支持登錄會(huì)員下載使用。運(yùn)營(yíng)后收集用戶反饋信息，其反映的情況很不樂(lè)觀，尤其是網(wǎng)站的體驗(yàn)方面，用戶感到有一種挫敗感……

如此是很難將網(wǎng)站應(yīng)有的價(jià)值傳遞給用戶的，通過(guò)市場(chǎng)調(diào)研、用戶反饋以及對(duì)網(wǎng)站數(shù)據(jù)的分析，發(fā)現(xiàn)了一些問(wèn)題：尤其在預(yù)覽資源文檔流程中，一些常用的資源格式不支持在線瀏覽，視覺(jué)體驗(yàn)質(zhì)量不高，內(nèi)容模糊，文檔內(nèi)容加載慢，等待時(shí)間長(zhǎng)……

從網(wǎng)站的定位來(lái)看，提供資源預(yù)覽（或?yàn)g覽）是該網(wǎng)站提供資源服務(wù)的核心功能，也是網(wǎng)站在內(nèi)容和信息傳達(dá)服務(wù)實(shí)現(xiàn)其價(jià)值的直接體現(xiàn)，因此優(yōu)化并提高預(yù)覽環(huán)節(jié)的用戶體驗(yàn)問(wèn)題需要重視起來(lái)。

筆者圍繞如何提高資源文檔在瀏覽器中在線預(yù)覽的體驗(yàn)，進(jìn)行了廣泛的思考和分析，也在此分享出來(lái)希望讀者對(duì)此多提見(jiàn)解，與筆者一起打造出極致的預(yù)覽體驗(yàn)。

針對(duì)這個(gè)問(wèn)題，我并沒(méi)有直接去尋找答案，而是先對(duì)網(wǎng)站資源庫(kù)中的基礎(chǔ)數(shù)據(jù)進(jìn)行了統(tǒng)計(jì)和整理，并深度分析目標(biāo)用戶關(guān)注的教學(xué)資源類型及資源文檔類型、格式等因素，對(duì)相關(guān)信息進(jìn)行了全面匯總和分析。

下面是通過(guò)對(duì)資源庫(kù)中的資源基礎(chǔ)數(shù)據(jù)的信息圖表：

通過(guò)觀察和分析，發(fā)現(xiàn)網(wǎng)站資源庫(kù)中數(shù)據(jù)很復(fù)雜。資源類型包括教案、學(xué)案、課件、微課、動(dòng)畫(huà)、聽(tīng)力、試題等十多個(gè)類別，其實(shí)在用戶實(shí)際使用場(chǎng)景中，各類型資源的定義是相對(duì)的，是可以相互轉(zhuǎn)化的。

此外網(wǎng)站中資源的文檔格式種類數(shù)量也有很多種，通過(guò)分析網(wǎng)站的目標(biāo)用戶關(guān)注的資源類型，發(fā)現(xiàn)大多集中在教案、學(xué)案、課件、試題、微課等這幾類,且這些類別的資源文檔格式多以pdf、ppt、doc、mp4、avi、flv為主。

思考到這里，必須重新審視幾個(gè)問(wèn)題：網(wǎng)站對(duì)資源進(jìn)行如此細(xì)分是否合理呢？錄入資源時(shí)支持如此多的文檔格式，是否有必要？目標(biāo)用戶真切關(guān)注的資源類型有哪些，這些資源文檔的常用的格式是怎樣的……

通過(guò)分析之后，我認(rèn)清了一個(gè)事實(shí)：

• 首先，網(wǎng)站對(duì)資源過(guò)細(xì)的分類加重了用戶選擇的難度，也增加了用戶對(duì)資源本身所屬類型認(rèn)知的成本；
• 其次，網(wǎng)站支持太多文檔格式的在線瀏覽也增加了技術(shù)難度；
• 最后，網(wǎng)站沒(méi)有通過(guò)一些特殊加載方式來(lái)解決資源加載時(shí)間過(guò)長(zhǎng)問(wèn)題。

要解決我們面前的重要問(wèn)題，就不能停留在當(dāng)初制造他們的思維層面上。

——愛(ài)因斯坦

根據(jù)業(yè)務(wù)需求，并通過(guò)分析之后，我從資源數(shù)據(jù)、技術(shù)限制、交互操作、界面視覺(jué)設(shè)計(jì)幾個(gè)方面針對(duì)如何提高資源信息的預(yù)覽體驗(yàn)，展開(kāi)了思考并進(jìn)行了設(shè)計(jì)嘗試，內(nèi)容如下：

（1）數(shù)據(jù)層面

這里的數(shù)據(jù)層面是指該網(wǎng)站所承載資源基礎(chǔ)屬性，如資源類型、文檔格式、文檔大小等都是需要分析和思考的；在數(shù)據(jù)層面，提高資源在線預(yù)覽的體驗(yàn)，從以下幾點(diǎn)進(jìn)行了嘗試：

• 重新定義網(wǎng)站資源的類別，簡(jiǎn)化類別細(xì)分，減輕用戶區(qū)分資源類型的負(fù)擔(dān)，避免用戶落入選擇困局；
• 嚴(yán)格規(guī)范資源文檔錄入的限制條件，如文檔格式、資源大小、命名規(guī)范等，同時(shí)提高錄入資源的質(zhì)量品質(zhì)，對(duì)不清晰、不完整的資源進(jìn)行優(yōu)化或剔除；
• 重視目標(biāo)用戶重點(diǎn)關(guān)注的資源及其文檔類型、格式等，如教案、學(xué)案、課件等；

從網(wǎng)站資源的原始數(shù)據(jù)上進(jìn)行優(yōu)化，可最大限度上提高資源信息的預(yù)覽體驗(yàn)。

（2）技術(shù)層面

網(wǎng)站資源信息的瀏覽以數(shù)字設(shè)備為媒介，通過(guò)瀏覽器訪問(wèn)網(wǎng)站，進(jìn)行資源文檔的在線瀏覽。因此必須在瀏覽器兼容、支持在線瀏覽格式等方面提高技術(shù)水平，如下幾點(diǎn)是對(duì)技術(shù)層面的優(yōu)化要求：

• 必須支持并重點(diǎn)優(yōu)化重點(diǎn)資源文檔格式的在線瀏覽，如pdf、ppt、doc、mp4等；在此基礎(chǔ)上滿足更多文檔格式的在線瀏覽，建議根據(jù)數(shù)據(jù)分析，制定一個(gè)支持在線預(yù)覽文檔格式的優(yōu)先級(jí)表；
• 優(yōu)化資源加載方式，比如瀏覽資源文檔時(shí)，先加載部分內(nèi)容，避免因資源過(guò)大，導(dǎo)致加載時(shí)間過(guò)長(zhǎng)的情況；
• 采用先進(jìn)算法，優(yōu)化資源數(shù)據(jù)大小，在保證資源品質(zhì)的情況下，盡可能減小文檔資源，加快加載速度；
• 對(duì)壓縮包類型的資源瀏覽的優(yōu)化，比如采用展示資料包文檔列表，使用戶選擇要瀏覽的資源文檔；
• 錄入資源文檔時(shí)，對(duì)不規(guī)范、質(zhì)量不高的資源文檔進(jìn)行技術(shù)轉(zhuǎn)化，從而達(dá)到基礎(chǔ)資源優(yōu)化的要求。

從技術(shù)層面提供在線預(yù)覽功能，可以最大程度的承載體驗(yàn)設(shè)計(jì)意圖；當(dāng)然對(duì)此還需要工程師哥哥的大力支持，如果落實(shí)不到位，提高用戶體驗(yàn)就是一句空話；

（3）交互層面

交互體驗(yàn)層面的優(yōu)化，主要包括用戶篩選資源類型，到查找資源文檔，再到打開(kāi)并進(jìn)入資源文檔這一業(yè)務(wù)流程鏈路上的交互操作的優(yōu)化，結(jié)合之前收集的用戶行為數(shù)據(jù)，來(lái)驅(qū)動(dòng)產(chǎn)品體驗(yàn)設(shè)計(jì)。

具體內(nèi)容如下：

• 優(yōu)化應(yīng)用流程及功能交互，減少用戶完成任務(wù)的步驟和時(shí)間；
• 優(yōu)化資源文檔詳情頁(yè)面的交互方式，如在資源文檔過(guò)長(zhǎng)，頁(yè)數(shù)過(guò)多時(shí)進(jìn)行分頁(yè)展示、引導(dǎo)加載、全屏查看等；
• 優(yōu)化信息布局結(jié)構(gòu)，對(duì)文檔信息、功能操作元素進(jìn)行布局優(yōu)化，突出重點(diǎn)信息，從而幫助用戶完成與頁(yè)面功能的交互；
• 優(yōu)化操作引導(dǎo)，窮盡異常情況，完整其處理機(jī)制，如操作引導(dǎo)、加載異常、網(wǎng)絡(luò)中斷、用戶權(quán)限反饋等。

一個(gè)網(wǎng)站如何能帶給訪問(wèn)用戶極致的體驗(yàn)，用最短的時(shí)間俘獲用戶，并與用戶產(chǎn)生情感共鳴，情感化的設(shè)計(jì)是至關(guān)重要的。

（4）界面信息

• 優(yōu)化界面版式布局，通過(guò)合理的版式設(shè)計(jì)，來(lái)加強(qiáng)信息傳達(dá)的效果；
• 簡(jiǎn)化界面信息，尤其是用戶瀏覽信息的頁(yè)面，要減少干擾用戶的界面元素，努力營(yíng)造沉浸式的瀏覽體驗(yàn)；
• 優(yōu)化字段文案，進(jìn)行圖形化處理，美化網(wǎng)頁(yè)界面，以此來(lái)達(dá)到提升視覺(jué)體驗(yàn)的效果。

在進(jìn)行界面設(shè)計(jì)時(shí)，要結(jié)合網(wǎng)站定位、用戶類型與產(chǎn)品整體的調(diào)性，與網(wǎng)站其他頁(yè)面的風(fēng)格要保持一致，否則再優(yōu)美華麗的網(wǎng)頁(yè)都會(huì)影響最終產(chǎn)品價(jià)值的傳遞和體現(xiàn)。

功能體驗(yàn)的優(yōu)劣決定了網(wǎng)站整體體驗(yàn)，體驗(yàn)伴隨用戶與網(wǎng)站進(jìn)行的一切互動(dòng)上，提升網(wǎng)站設(shè)計(jì)中的用戶體驗(yàn)需要設(shè)計(jì)師應(yīng)站在更全面的角度去系統(tǒng)的思考影響體驗(yàn)的因素，從基礎(chǔ)數(shù)據(jù)、到技術(shù)支撐，再到細(xì)節(jié)呈現(xiàn)，努力嘗試每一個(gè)維度，終會(huì)創(chuàng)造超出用戶預(yù)期的產(chǎn)品設(shè)計(jì)，給用戶帶去體驗(yàn)上的驚喜。

本文由 @歲月 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議