關于網站里的微博組件改版的介紹詳談(圖文)

2024-08-30 08:34:43

字體：大中小

來源：轉載

供稿：網友

　　寫在前面
　　微博組件是微博開放平臺針對第三方接入者提供的不需要開發即可實現網站接入的組件產品。將微博內容輸出到第三方網站，用戶在第三方網站上即可進行微博互動，分享內容、同步信息至微博，提高第三方網站用戶活躍度。改版涉及到微博組件數14個，主要包括好友選擇器、發布器、分享窗口等。
　　設計流程
　　與以往的產品改版的流程不一樣，此次改版是由UDC和產品協同發起需求，交互設計師發揮最大主觀能動性，控制設計中心的輸出時間，與品牌視覺、頁面構建、產品和開發效率溝通，小步快跑以提升更為良好的用戶體驗。

　　設計準備
　　找到問題(觀察用戶，手機反饋，集中梳理)(用戶對象：開發者和使用者)——分析(結合場景，透過現象看本質，同時和產品一起結合數據分析)——解決問題(從整體到細節，結合用戶需求解決問題)——繼續跟進

　　設計過程中遵循的優化體驗設計原則
　　原則一避免讓用戶思考
　　減少影響用戶完成某項"思考"或"任務"的噪音、減少岔路、減少多選題、為用戶盡可能的減少操作;為禁用的重要控件，提供相應的提示。
　　如圖所示分享窗口，后臺直接預置文本，并按照當前頁面富文本信息優先、高質量優先的原則默認選擇，為用戶盡可能的減少操作、減少多選題。同時輸入為空或超字數時，分享按鈕禁用，強制點擊出現相應的提示。

　　與此同時，為了避免用戶過多的冗余操作，可以提供個性化默認，為回訪用戶設置個性化默認選擇，這樣用戶便能更快完成表單。這因為選項常常具有"粘性"，即保持用戶之前的選擇。總結來說就是如果值得用戶輸入，就值得程序記住。用戶在微群和微博之間進行切換，后臺會保留并記住用戶的之前的輸入。

　　原則二層級清晰，降低視覺噪音
　　層級關系需要以邏輯和信息結構為依托，同時需要在視覺上體現出來。但是如果使用過多的線框，厚重的背景，卻會讓人眼花繚亂——適得其反。其實簡單的縮進就可以將層級關系表現出來。
　　兩像素的差別
　　我們可以看到富文本區域于輸入框之間有兩個像素的縮進，由于富文本的元素比較多，但終歸是一個整體，區區兩像素就可以將層級模塊區分，而不需要增加更多的視覺元素，讓頁面太過復雜。

　　評論箱的結構
　　評論箱之前為扁平結構，即評論和回復都在同一層級，此時我們常常看到類似一群人在一起的聊天記錄，瀏覽的用戶很難明白誰和誰在聊什么樣的問題。經過梳理，我們將評論分為兩個層級，第一層級為，對該頁面內容的評論;第二層級為對評論的回復。如下圖所示，評論的回復默認是不顯示的，展開后有50px的縮進，來表達出清晰的層級關系。

　　設置的層級
　　第三方的組件運用在外站，通常使用場景和環境很難一一估量。但是共同點就是外站寸土寸金，所以對于幫助類說明類的信息我們選擇放在開放平臺。開發者想要使用我們的產品的時候，首先需要了解我們的產品是什么，能為開發者帶來什么。有了這樣的基礎，激起了興趣之后，才會進一步的想去知道如何去使用。所以我們把整個頁面分為三大部分——說明、收益和設置。然而文字總是會讓額外呢提不起興趣，那么何不輔助些簡單明了的圖片來形象的說明呢?

　　原則三習慣是好幫手
　　習慣使用国产激情自拍_国产9色视频_丁香花在线电影小说观看 _久久久久国产精品嫩草影院