關(guān)于簡書Web改版:看產(chǎn)品演進、優(yōu)先級和產(chǎn)品上線那些事

前言

  • 2017-1-5,自13年4月簡書網(wǎng)正式上線起硬耍,經(jīng)歷三年多的簡書Web端終于迎來重大改版


    改版截圖
  • 相比贊賞,此處的改版卻更多換來了大片的吐槽



    官方評論
  • 本文將基于產(chǎn)品的角度边酒,從產(chǎn)品方向经柴、用戶需求和功能邏輯的角度分析此次簡書Web的改版


目錄

目錄

1. 產(chǎn)品介紹

我先來簡單介紹下簡書這款產(chǎn)品:

  • 產(chǎn)品定位:一款內(nèi)容創(chuàng)作 & 交流的內(nèi)容型產(chǎn)品
  • 核心功能:簡潔、精致的寫作 & 閱讀環(huán)境
  • 核心需求:長尾生活情感抒發(fā) & 文學寫作需求
  • 產(chǎn)品邏輯:如下圖
產(chǎn)品邏輯

2. 改版概述

本次改版分為功能和UI設(shè)計方面墩朦,如下圖:

改版概述

詳情請看官方文章:給你一個更好的簡書——簡書新網(wǎng)站上線

3. 功能分析

功能改版

3.1 個性化推薦

這是本次改版在功能上變化最大的坯认、同時也是優(yōu)先級非常高的功能。

3.1.1 功能描述

  • 首頁Banner:顯示主編精選的文章 & 活動
  • 文章推薦:根據(jù)關(guān)注專題 & 用戶行為個性化推薦文章
  • 專題氓涣、作者推薦


    個性化推薦展示圖

3.1.2 需求

a. 讀者需求

  • 降低用戶發(fā)現(xiàn)感興趣文章的成本
    從13年4月至現(xiàn)今17年1月牛哺,隨著平臺上大量優(yōu)質(zhì)的文章內(nèi)容不斷產(chǎn)生,用戶發(fā)現(xiàn)自己感興趣劳吠、需要的文章的成本越來越大引润;通過積累的用戶數(shù)據(jù)進行文章的個性化推薦大大降低了用戶發(fā)現(xiàn)感興趣文章的需求

實際上,現(xiàn)在大部分內(nèi)容平臺都這么做了

  • 避免人工推薦帶來的主觀和局限性
    以前的推薦滿屏充斥著沒有營養(yǎng)的雞湯痒玩、被主編控制的首頁推薦 淳附,千篇一律。

b. 作者需求
為知名度較小的作者的文章提供更多的輸出渠道蠢古,得到更多的曝光率奴曙,避免馬太效應,即:

  • 被簡書推薦的文章閱讀量成千上萬草讶,未被推薦的文章閱讀量大部分過百都難洽糟,

雖然有專題投稿,但由于位置不顯、入口深脊框,影響力沒法和首頁相比

沒被簡書推薦的作者和文章颁督,可能就永遠安靜地沉默于簡書里践啄,哪怕你的文章很好浇雹。

c. 產(chǎn)品戰(zhàn)略需求
從13年4月至現(xiàn)今17年1月,在這4年的時間里屿讽,簡書:

  • 保持了純粹的寫作和閱讀體驗
  • 產(chǎn)生了大量的優(yōu)質(zhì)內(nèi)容
  • 聚集著大量的創(chuàng)作作者

從這次改版看來昭灵,簡書工具屬性的使命已經(jīng)完成,正往內(nèi)容分發(fā)平臺方向演進

這或許便是本次改版最大的目的伐谈。

d. 運營需求

  • 隨著用戶體量的增大烂完,簡書開始考慮用戶的活躍、留存問題诵棵;
  • 從本次Banner功能的推出可以看出簡書開始在運營方面下功夫:不斷推出各種社群活動提高用戶的活躍度抠蚣、留存度;
Paste_Image.png

e. 商業(yè)模式嘗試與擴展
從娛樂的寫作場景出發(fā)履澳,嘗試與電影嘶窄、文學等相關(guān)進行場景的擴展從而實現(xiàn)商業(yè)化

3.1.3 功能設(shè)計出現(xiàn)的問題

a. 推薦功能優(yōu)先級問題

推薦功能的設(shè)計(對于用戶來說主要體現(xiàn)在首頁的設(shè)計)卻被簡書的用戶各種詬病:本質(zhì)是對功能的優(yōu)先級和組織沒有很好進行優(yōu)先級排序距贷。主要體現(xiàn)在:

  • 首頁主要呈現(xiàn)的是個性化推薦功能柄冲,但卻摻雜著其他低頻功能,如導流App忠蝗;如下圖
Paste_Image.png
  • 在呈現(xiàn)個性化推薦功能時沒有對推薦細分功能進行優(yōu)先級排序现横,重點不突出,給人一種混亂的感覺

解決方案

  1. 去掉下方的App導流入口(因為主導航已經(jīng)有明顯的“下載App”入口)

我明白簡書PM的KPI阁最,但希望簡書的PM能進行很好的平衡

  1. 對推薦功能進行一次細分的優(yōu)先級排序
    Banner推薦 > 文章推薦 > 熱點推薦 > 專題推薦 > 作者推薦
  1. 排序的依據(jù)是:產(chǎn)品戰(zhàn)略需求>用戶需求 & 商業(yè)需求 >運營需求
  2. 這里是最考驗產(chǎn)品經(jīng)理的功力戒祠,因為不僅需要識別需求的真?zhèn)巍⑿枨蟮闹匾运僦郑瑫r還要去找到各類需求之間的平衡點得哆,比如說用戶需求和商業(yè)需求。

我和我的設(shè)計師小伙伴做了下修改后的Demo哟旗,如下圖:(左則為顯示優(yōu)先贩据,右側(cè)為輔;將熱點推薦收攏在Tab欄里)

效果圖

真正把用戶放在第一位闸餐,在實現(xiàn)用戶需求的前提下實現(xiàn)商業(yè)需求饱亮,我希望簡書的產(chǎn)品經(jīng)理有和我一樣的產(chǎn)品價值觀。

這里還有一個小的優(yōu)化點:關(guān)于文章的簡略顯示

Paste_Image.png

其實完全可以去掉舍沙,原因是:

  • 此處顯示的需求是為了讓用戶大概了解該文章近上,但是簡書的寫作本身沒有規(guī)范概要的要求,而很多人寫作并沒有寫概要的習慣拂铡,使得此處往往是顯示正文開端壹无,并未達到讓用戶了解文章概述的需求
  • 由于沒有規(guī)范葱绒,此處顯示往往很亂,影響整個頁面的簡潔度
  • 修改后的圖如下:


    對比圖

b. 作者推薦設(shè)計問題

  • 需求場景:推薦用戶感興趣的作者斗锭,降低用戶搜索的成本
  • 出現(xiàn)的問題:
  • 提供是否感興趣的信息不足:簡書是內(nèi)容平臺地淀,關(guān)鍵點在于內(nèi)容,但用戶只是看名字和頭像是無法確定自己是否對這個作者是否感興趣

這里要和微博岖是、Facebook等社交平臺區(qū)別帮毁,這類社交平臺的關(guān)鍵點在于人,直接看名字豺撑、頭像烈疚、粉絲數(shù)是足以讓用戶決定是否關(guān)注

  • 一鍵關(guān)注按鈕使用頻率低:因為關(guān)注作者的本質(zhì)還是內(nèi)容,哪怕是加了人物簡介聪轿,可是用戶不會因為名字或頭像或他有多少個贊而直接關(guān)注他爷肝,本質(zhì)還是會點進去先看他的內(nèi)容再選擇是否關(guān)注,所以該按鈕的使用場景出現(xiàn)的頻率非常低陆错;由于首頁本身元素較多灯抛,而簡書以簡潔突出,所以選擇刪去危号;

此處提供的推薦作者信息是為了吸引用戶點進去該作者的個人主頁看相關(guān)文章牧愁,從而完成關(guān)注作者的鏈條

  • 解決方案:
    • 增設(shè)個人簡介:總得讓用戶知道這個作者是干嘛的,他才會感興趣點進去看他的文章吧外莲?
    • 刪除了一鍵關(guān)注按鈕猪半。
    • 修改圖如下:


      對比圖

c. 專題推薦設(shè)計問題

和作者相比,專題的本質(zhì)就是內(nèi)容偷线,名字可以直接反應出該專題的內(nèi)容磨确,用戶是可以直接根據(jù)名字和相關(guān)信息直接決定是否關(guān)注該專題的。但出現(xiàn)的問題是:

  • 提供信息量不夠
    用戶除了看名字声邦,只是知道專題的內(nèi)容乏奥,但用戶關(guān)注還需要該專題的熱度和受歡迎程度才會選擇關(guān)注專題。

解決方案:增加了關(guān)注量亥曹、文章量顯示

  • “關(guān)注”操作成本高
    用戶在看了名字后已經(jīng)知道這個專題的類型邓了;看了關(guān)注量和文章量了解這個專題的受歡迎程序;這兩個因素足以讓用戶決定是否關(guān)注媳瞪。但此處用戶需要點擊進去才能關(guān)注專題骗炉,操作成本高且降低轉(zhuǎn)化率。

解決方案:增設(shè)一鍵關(guān)注按鈕

  • 修改圖如下


    對比圖

由于對功能進行了排序和重新組織蛇受,為了版式的統(tǒng)一性所以將專題推薦和作者推薦做成統(tǒng)一的句葵。

效果圖

根據(jù)上述的需求,我和我的設(shè)計師伙伴做了簡單的Demo,僅供闡述上述觀點乍丈,如下圖:

這里非常感謝我的設(shè)計師小五剂碴。

對比圖
對比圖

3.2 對象化關(guān)注

3.2.1 功能描述

  • 簡友關(guān)注
簡友關(guān)注
  • 專題關(guān)注
專題關(guān)注

3.2.2 需求

  • 以作者和專題為主體和節(jié)點,提供更多發(fā)現(xiàn)內(nèi)容資訊的渠道轻专,從而進一步實現(xiàn)內(nèi)容分發(fā)
  • 該需求迎合了產(chǎn)品從工具屬性到內(nèi)容分發(fā)平臺演進的戰(zhàn)略需求

3.3 移動端網(wǎng)頁更新

3.3.1 功能描述
在手機網(wǎng)頁即可完成:

  • 直接登錄忆矛,更可在微信里一鍵登錄;
  • 直接點贊铭若、評論洪碳;
  • 直接完成關(guān)注递览。
Paste_Image.png

3.3.2 需求

  • 隨著社會化媒體的快速發(fā)展叼屠,類似微博、微信绞铃、豆瓣等產(chǎn)品已經(jīng)成為內(nèi)容輸出的重要渠道镜雨,本次移動端Web的更新無疑是加強了站外渠道的分享和互動,為簡書上的內(nèi)容提供更多站外分享渠道
  • 該需求同樣迎合了產(chǎn)品從工具屬性到內(nèi)容分發(fā)平臺演進的戰(zhàn)略需求

3.4 夜間模式+字體設(shè)置

3.4.1 功能描述

  • 提供了黑夜儿捧、白天兩種顯示模式


    夜間模式
  • 提供網(wǎng)頁瀏覽的字體設(shè)置


    字體設(shè)置

3.4.2 需求

  • 對閱讀場景進行細分荚坞,提供更好的閱讀環(huán)境
  • 字體的設(shè)置則是個性化設(shè)置

3.4.3 出現(xiàn)的問題
對于夜間模式,屬于高頻需求菲盾;對于字體設(shè)置颓影,屬于低頻非剛需,但是圖標卻顯示的是字體修改的icon懒鉴,入口的優(yōu)先級過高诡挂。

3.4.4 解決方案

  • 顯示夜間模式切換的icon
  • 將字體設(shè)置這類低頻非剛需放置到個人設(shè)置里

效果圖

根據(jù)上述的需求,我和我的設(shè)計師伙伴做了簡單的Demo临谱,僅供闡述上述觀點璃俗,如下圖:

新舊版對比

3.5 關(guān)于個人主頁

  • 出現(xiàn)的問題
    個人主頁將個人信息和簡介分開放置,對于用戶來說悉默,看頭像和名字無法第一時間了解該作者城豁,而且個人簡介的放置不容易被用戶發(fā)現(xiàn)


    舊版
  • 解決方案
    個人信息和簡介放置在統(tǒng)一模塊;同時優(yōu)化了關(guān)注按鈕的位置

修改如下圖:

效果圖

對比圖如下:

對比效果圖

最終再貼出最終修改的效果圖:

效果圖1
效果圖2
效果圖3

4. UI設(shè)計

UI改版

4.1 主導航

本次改版中抄课,改動最大的是主導航:從側(cè)導航改成頂部導航:

導航改版

從產(chǎn)品的角度唱星,改版的原因:

  • 首頁增設(shè)了較多內(nèi)容(Banner、文章推薦跟磨、作者推薦间聊、專題推薦等等),原有導航難以容納吱晒;
  • 導航欄上功能過多甸饱,且有的功能使用頻率低,需要對功能進行優(yōu)先級排序


    新舊版導航功能對比

從設(shè)計的角度來看:(非常感謝我的設(shè)計師小五的意見)

  • 符合大多數(shù)人的閱讀&使用習慣,迎合主流的設(shè)計風格
  • 導航的Icon識別度低叹话,需要換成文字偷遗,但是文字是橫的而導航是豎的會導致不協(xié)調(diào),同時由于導航功能的減少驼壶,會導致下方大處留白
  • 舊版的視覺瀏覽順序不流暢氏豌,如下:
視覺瀏覽順序
  • 舊版導航使用過程中給用戶的感覺有點混亂,當進入一個功能頁面時用戶的注意力會十分分散热凹,感覺哪里都會跳走泵喘;新版則人更加簡潔、讓用戶更加專注


    效果對比圖

4.2 寫作界面優(yōu)化

去除了多余的元素般妙,更加純粹纪铺、更加簡潔

Paste_Image.png

4.3 閱讀界面優(yōu)化

對閱讀界面的文章進行重新排版,甚至對每一處間距碟渺、行高都進行繼續(xù)打磨鲜锚,真的很喜歡這種精致

Paste_Image.png

4.4 其他細節(jié)的設(shè)計優(yōu)化頁面

在本次改版中,簡書對整個Web的視覺設(shè)計苫拍、交互設(shè)計進行了大幅度的優(yōu)化芜繁,如文字的行間距以及字體大小,首頁banner圖的切換細節(jié)交互绒极、loading圖的用心設(shè)計骏令、各處文字不同灰度區(qū)分信息重要程度等等,這里貼幾張優(yōu)化得很明顯的地方:

搜索結(jié)果頁面
關(guān)注列表

5. 產(chǎn)品迭代&上線問題

本次簡書的Web改版可謂是憋了個大招

  • 功能上:新增了文章垄提、作者和專題推薦榔袋、幾乎對所有的功能優(yōu)先級、入口進行了優(yōu)化
  • 設(shè)計上:主導航替換塔淤、首頁大改版摘昌、網(wǎng)站幾乎所有的樣式都進行了優(yōu)化

整個簡書的Web已經(jīng)改頭換面了。

對很多用戶來說高蜂,對于本次改版的反應是:

  • 操作上和視覺上不習慣聪黎;
  • 頁面不再簡潔

Paste_Image.png

主要原因是:

  • 版本改動太大:無論是功能上還是設(shè)計上
  • 功能設(shè)計存在缺陷:無論是優(yōu)先級、入口還是功能邏輯

于是很多用戶反映:提供新老版本切換進行過渡备恤。

顯然稿饰,從產(chǎn)品的角度來說這并不現(xiàn)實。

從上面分析到露泊,設(shè)計的改版和功能改變是因為簡書產(chǎn)品戰(zhàn)略的需求喉镰,這是不可改變的。但是惭笑,產(chǎn)品要做的侣姆,應該是盡量降低用戶的不適應:

  • 針對”版本改動太大“問題
    采用產(chǎn)品的小步迭代生真,盡量以小版本改動逐步迭代,盡可能不要憋大招捺宗,從而降低舊用戶的不習慣和不適應柱蟀;
  • 針對”功能設(shè)計存在缺陷“問題:
    采用灰度發(fā)布 / 內(nèi)測,先小范圍試錯蚜厉,不斷完善再逐步擴展到全范圍使用

關(guān)于簡書的微信群公測
簡書建立了一個微信群通過用戶在里面反饋問題進行公測长已,可是存在的問題是:

  1. 簡書工作人員身份不明,用戶根本無法知道自己的問題是否得到解決
    產(chǎn)品 & 運營人員沒有改備注也沒有表明身份昼牛,提出問題后回答問題的根本不知道是誰术瓮,所以用戶根本不知道自己得到的問題是否傳達到簡書

群里表明身份的就只有一名技術(shù)人員。

  1. 回答問題基本是那一名技術(shù)人員贰健,而且回答永遠是:Yes or NO
    對于技術(shù)人員來說胞四,對需求問題回答的原則是:能解決,或不能解決霎烙。
公測群

而在收集用戶反饋 / 需求的時候撬讽,則是需要PM先判斷用戶需求的真?zhèn)?/strong>蕊连,然后再交給技術(shù)進行解決悬垃。

6. 碎碎念

  • 本次簡書的Web改版是自13年上線以來改版最大的一次,但從用戶反饋來看甘苍,這次改版并沒有得到大家的認可
  • 作為產(chǎn)品經(jīng)理尝蠕,我真的很喜歡這次改版,因為簡書這個產(chǎn)品終于長大了载庭,被賦予了更多的意義看彼。可是從功能設(shè)計和產(chǎn)品上線問題上囚聚,簡書的團隊確實有做得不足的地方靖榕,需要各位用戶的包容和建議,讓簡書變得越來越好顽铸,而不是一味的吐槽
  • 作為簡書的忠實用戶茁计,我真的很不喜歡這次改版,因為簡書不再純粹谓松,不再那么特別星压,泯然眾人矣

最后,希望簡書的產(chǎn)品經(jīng)理可以看到這篇文章鬼譬,也希望簡書在成長的過程中娜膘,不忘初衷。謝謝您的耐心閱讀优质。


歡迎關(guān)注Carson_Ho的簡書竣贪!

不定期分享關(guān)于產(chǎn)品策劃方法論干貨军洼,追求短、平演怎、快歉眷,但卻不缺深度

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末颤枪,一起剝皮案震驚了整個濱河市汗捡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌畏纲,老刑警劉巖扇住,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異盗胀,居然都是意外死亡艘蹋,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門票灰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來女阀,“玉大人,你說我怎么就攤上這事屑迂〗撸” “怎么了?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵惹盼,是天一觀的道長庸汗。 經(jīng)常有香客問我,道長手报,這世上最難降的妖魔是什么蚯舱? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮掩蛤,結(jié)果婚禮上枉昏,老公的妹妹穿的比我還像新娘。我一直安慰自己揍鸟,他們只是感情好兄裂,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蜈亩,像睡著了一般懦窘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上稚配,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天畅涂,我揣著相機與錄音,去河邊找鬼道川。 笑死午衰,一個胖子當著我的面吹牛立宜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播臊岸,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼橙数,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了帅戒?” 一聲冷哼從身側(cè)響起灯帮,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎逻住,沒想到半個月后钟哥,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡瞎访,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年腻贰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扒秸。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡播演,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出伴奥,到底是詐尸還是另有隱情写烤,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布渔伯,位于F島的核電站顶霞,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏锣吼。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一蓝厌、第九天 我趴在偏房一處隱蔽的房頂上張望玄叠。 院中可真熱鬧,春花似錦拓提、人聲如沸读恃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽寺惫。三九已至,卻和暖如春蹦疑,著一層夾襖步出監(jiān)牢的瞬間西雀,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工歉摧, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留艇肴,地道東北人腔呜。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像再悼,于是被迫代替她去往敵國和親核畴。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,108評論 25 707
  • 簡書產(chǎn)品分析報告 F組:謝少煌 劉冬陽 雷雅茜 秦茜 周莉莉 周俊華 目 錄 一冲九、產(chǎn)品定位 (1)目標市場谤草、目標用...
    Cherry華女閱讀 2,573評論 3 27
  • 我想我們每個人都會是羅茜吧咖刃,這部電影簡直不能再喜歡了。相比羅茜的敢愛敢恨憾筏,坦率堅強嚎杨,善良美麗熱情執(zhí)著,勇敢剛毅我更...
    知足smile閱讀 626評論 2 3
  • 中秋次日清晨氧腰,恰逢落了一場短時的秋雨枫浙,我在居家的園庭信步賞賞秋景,心底油然而生了愜意之情古拴。諺語言“一場秋雨...
    云詩一線閱讀 300評論 0 2
  • 想要說些什么,但我從不回頭去看我會說些什么桅打,這可能也是我的一大毛病是嗜,總強迫改過,也總是失敗挺尾,就像現(xiàn)在我希望自己能講...
    東北歸閱讀 168評論 0 0