專欄平臺設計的幾點感悟

時間：2023-09-05 23:00:01 | 來源：網(wǎng)站運營

時間：2023-09-05 23:00:01 來源：網(wǎng)站運營

專欄平臺設計的幾點感悟：愛詞霸是金山詞霸的網(wǎng)頁端，現(xiàn)新開通“英語專欄平臺”，為專欄作者提供方便查看自己相關數(shù)據(jù)并進行編輯的平臺。作為以內(nèi)容為主的頁面設計，目前這個專欄已經(jīng)到達第三期，頁面繁多，所以我將頁面歸為幾類，分類進行設計，這樣便于使用統(tǒng)一規(guī)范，提高效率。以下是幾個類別的頁面：

1數(shù)據(jù)統(tǒng)計頁

2列表頁

添加課程頁

課程詳情頁




3表單

添加課程表單

添加音頻表單

此外還有添加視頻，圖文等表單。



4編輯文章頁面

內(nèi)容詳情頁

評論頁面




5彈窗

選擇作品類型

此外還有刪除確認彈窗，客服，圖片選擇器等彈窗。

6Landingpage頁


在做這六類頁面的過程中，我總結了以下幾點設計方法，與大家分享:

1數(shù)據(jù)統(tǒng)計要歸類


數(shù)據(jù)統(tǒng)計頁面是所有關于創(chuàng)作者的相關數(shù)據(jù)的集合。本來這些數(shù)據(jù)比較分散，而且毫無規(guī)律可言，所以在設計的時候，我們要在其中進行大概的分類，使其可以整合表現(xiàn)。在其他的項目中，我們常見的統(tǒng)計數(shù)字的設計方法是可以畫圖表，柱狀，餅狀，折線圖等，用于表現(xiàn)數(shù)據(jù)變化規(guī)律，對于這種零散的數(shù)據(jù)要整合在一起，就需要我們用歸類的方法表現(xiàn)出來了。在這一頁面中，經(jīng)過與產(chǎn)品經(jīng)理溝通，我們確定的是最為突出“去創(chuàng)作”，其次是作者比較關心的一些自己作品受到的關注度，這兩部分，視覺上放置在一起，最次要的評論和提現(xiàn)放在最后。這樣就自然地分出了視覺上的兩個層次，交互上的三個重要度。




2三種常見導航的應用

網(wǎng)頁中的導航是除了內(nèi)容外最重要的部分，所以規(guī)定清晰的導航意義重大，它有助于我們理清網(wǎng)頁的整體結構與來龍去脈，使得用戶不會“迷路”。課程詳情頁面就是一個具有三類導航的例子。

如上圖，紅色的為全局導航引領整個網(wǎng)站的幾個大塊。綠色的為本地導航，介紹了專欄具體的幾個板塊。藍色的上下文導航，可以通過它回到上一個頁面，也可以去往接下來的一個頁面。許多網(wǎng)站，除了這三類導航，還會在網(wǎng)頁的最下方提供補充導航，告訴用戶除了本網(wǎng)站的內(nèi)容，還能提供一些其他可能有用的鏈接。

同時，這個課程詳情頁面，也是專欄中結構比較復雜的一個板塊。所以我在本地導航右側內(nèi)容區(qū)進行了三個大塊的劃分，分別是上下文導航，課程屬性區(qū)，和列表區(qū)。見下圖


這設計的過程中，我采用了幾個減少視覺混亂的方法：1）使用空白或輕色背景劃分頁面；2）盡可能少得使用強調(diào)，使得信息比較扁平；3）減少元素尺寸變化；4）減少元素顏色變化。



3表單設計需簡潔


這次項目涉及的表單比較多，包括新建課程的表單，新建視頻，音頻，圖文的表單。表單常見于新建，注冊，發(fā)表等內(nèi)容，通常會有一個簡單的布局，以放分散用戶的注意力。所以設計的時候，要精簡一些信息，注意文案的措辭。其實設計簡單高效的表單并不容易，原因就是大家并不喜歡填表單。所以，能夠作出合理的設計決策，使得用戶填表單的時候感覺容易，舒服就至關重要了。微信公眾平臺的表單采用分步驟填寫的方法，讓人先選擇所填表單的類型，再一步步填寫，信息總量并沒有減少，但使用起來感覺信息總量可以接受，也不容易使得用戶在過程中迷失。綜上，表單的設計要素：1）簡潔，讀起來簡單；2）分步驟拆分，如天貓購買付款頁面等。

表單設計的幾個常見細節(jié)：1）文本標簽，常見的可以放置于輸入框左側，上方，放置于左側的，文案一般右對齊；2）文本框一般垂直排列，這與大家的閱讀習慣有關。

值得一提的是表單頁的添加課程中有一些選填項目，默認是折疊起來不顯示的。這是因為這部分內(nèi)容，在產(chǎn)品方面，是不鼓勵用戶去填寫與修改的，所以在交互方面，我采用了默認將其隱藏的方法，點擊展開icon，才能展示出下方的幾項。這種漸進展示的方法（核心功能＋擴展功能）可以在很多產(chǎn)品中見到，比如谷歌搜索，大家可能常見的是關鍵字搜索，適合于主流用戶，但它還有布爾搜索...等服務于專家級用戶。

點擊“更多”時展開以下擴展部分



4編輯文章頁重效率


這個頁面是作者對自己文章的評論進行查看并回復的頁面，由于評論一般而言都在文章之下，或之后，所以我根據(jù)評論的重要程度，采用了左右結構，使得無論文章長短，都能在首屏看到并回復評論。這樣可以提高操作效率。

像那種純?yōu)g覽文章 并發(fā)表評論的頁面，就更適合上下結構，因為并不是每個人都會去看評論，將最重要的文章放置在上方，是符合大多瀏覽類產(chǎn)品的需求，如網(wǎng)易新聞，各大新聞客戶端。



另外，彈窗和landingpage頁也有其不同的規(guī)律。在做頁面比較多的設計項目時，善于歸類分類處理不同的頁面，不但可以提高效率，也能保持統(tǒng)一的設計規(guī)范。愛詞霸作者專欄正不斷更新，力求給用戶更易用的體驗；設計過程如有不當之處，歡迎大家指正～^_^