【Plains;Gate.】Flat_Zhihu v2.4 - 聽說你們很討厭新版個人主頁?

專欄真的好久好久沒更新了…剛看了一下好像是八個月?感覺這半年來刷知乎的頻率已肉眼可見的速度下降,講道理什麼時候棄坑了也說不定撒 ??(??ω???)

雖然是這樣,但時不時還會從知乎和 Github 裡面收到這樣那樣的反饋,雖然因為工作的關係大多數問題都沒辦法第一時間回復和解決,不過晚上回到家還是會認真仔細看一遍然後乖乖去做 code check 的。之前有一次在 Github 上新開了一個 issue,那兩天剛好在忙一直沒有時間回復,結果有不少小夥伴跑過來幫忙定位問題,突然有種「雖然一直在坑但是原來大家一直在盯著的呢」的負罪感,要所以還是要好好搬磚填坑呢 ?(*`ω′*)?

Flat_Zhihu 更新至 v2.4,code_name 為【聽說你們很討厭新版個人主頁?】,所以…你懂的…

關於新版的個人主頁,特別是 banner 的問題引發了不少的爭議。其實我個人對 banner 本身倒是沒有太大意見(然而以國內目前的網路環境來講,圖片質量和版權問題可能會是一個大災難),畢竟對於像我這樣更注重「內容」而非「人」的知乎早期用戶而言,即使看到一個很精彩的回答,我也很少會去在意這個回答是誰寫的,他 / 她還寫過哪些回答等等,因此特意去點開一個人的個人主頁已經是頻次很低的行為了,所以就算改版了也不是太在意。

雖然心裡早已經打好了預防針,但是新版個人主頁上線後,看到那個超佔位置的 banner,我才發現我還是太高估了…

在 13 Macbook Pro 上,打開新版個人主頁大概就是這樣,不得不說這個 banner 實在太搶視覺焦點了,讓我都沒有辦法再好好看其他的東西,隨手點開了幾個用戶的個人主頁,什麼都沒留下印象就只記得那個碩大的 banner 了。最哭笑不得的是,按照知乎所宣揚的價值體系中,banner 這種信息應該是最沒有價值的,而真正反映出一個用戶的價值的東西,回答、文章、提問、收藏、個人成就等等,全部擠到了被瀏覽器截掉的下面,這種硬生生把知乎拉到跟 QQ 空間和新浪微博一個等級的做法也是夠厲害的。

講道理,加個 banner 我不反對,但是看著這麼一個沒多大信息量的東西把空間都佔掉了還真的挺煩人,但是直接給屏蔽掉也不太好,畢竟還是有很多人喜歡給自己弄一個好看的個人主頁的。對於這個「食之無味棄之可惜」的 banner,我稍微做了一些調整:

首先,banner 默認只截取其中一部分顯示,並減少透明度,減少頭圖對其他內容的視覺干擾;同時把第一個大卡片的高度壓縮下來,騰出更多的位置給下面的內容,讓第一條 feed 以及「個人成就」擠上來首屏,提高首屏的信息密度。

但是 banner 就那樣被截頭截尾地被放置在那裡也未免太可憐了…所以當滑鼠 hover 上去之後,原來的 banner 又會重新復活啦ヾ(??▽?)ノ

優化完成~

當然了,除了 banner 以外,其實新版的個人主頁還有不少優化的空間,但由於知乎官方對個人主頁的改版依然出於持續更新階段,這邊會等到趨於穩定之後再進行優化。

另外,本次更新還包括了 v2.3.1 以及 v2.3.2 的調整和優化,在此不再細述,詳細請見更新日誌。

________

▍更新日誌

Updates on v2.4

  1. 優化了新版個人主頁的 UI,降低了 banner 的高度和透明度,減少視覺干擾

  2. 加入了一些小彩蛋(笑

Updates on v2.3.2

  1. 屏蔽了首頁 timeline 中所有 live 相關的 feed

  2. 重新調整了寬屏模式的頁面寬度上下限

  3. 修復低解析度下的一些頁面布局 bug(感謝 @漢子賣了個萌 的反饋

Updates on v2.3.1

  1. 感謝 @沂琳醬 的催更 >///<

  2. 繼續修復個人頁面的布局錯位問題(2016.7.29)

  3. 優化首頁置頂的「提問 / 回答 / 寫文章」按鈕,去除頂部欄的提問按鈕

  4. 優化寬屏模式下首頁以及問題的字型大小設置和文字排版,提升閱讀體驗

  5. 修復非寬屏模式下話題頁面的布局錯誤(感謝 Github 的 @garrydzeng 的反饋以及 @miyuchina 幫忙定位了問題)

  6. 修復「消息」小紅點和彈出對話框的位置 bug(感謝 @孫唯佳 的反饋)

  7. 修復首頁右側側邊欄絲般順滑的交互動畫

  8. 修復引用和無序列表同時使用時出現的重疊問題

▍效果預覽

▍如何使用

  1. 確認自己用的是 Chrome 谷歌瀏覽器 / Firefox 火狐瀏覽器 / Safari 瀏覽器
  2. Chrome 用戶請下載並安裝好 Stylish 這個擴展程序:Stylish - Chrome Web Store [1]
  3. Firefox 用戶請到這裡安裝: Stylish for Firefox
  4. Safari 用戶請到這裡安裝:Stylish for Safari

  5. Stylish 安裝好後,打開這個頁面:Flat_Zhihu 2.4,載入主題

▍備註

  1. 官方應用商店有可能需要翻牆,也可通過非官方渠道下載:Stylish | chrome-plugin.com

  2. 本工具以 OS X + Chrome / Firefox 作為基準進行 UI 調試,如果在使用過程中遇到任何 bug 或者其他問題,可通過評論或私信向本人反饋
  3. Plains;Gate. 項目已經搬到 Github 上,歡迎來 Star / Fork:Frizen/Plains-Gate · GitHub

________

最後還是忍不住想要秀一個:


推薦閱讀:

還在為不會畫小圖標而發愁?快用這個網站下載 48,300 個免費 Icon!
一個「橘子」的用戶體驗設計
Material Design 的UI組件設計:Text fields文本框 (上)
VR虛擬現實UX設計要注意哪些方面?
設計每周清單:Medium 新 LOGO 及會員計劃、Google 動效團隊發布 Sketch2AE 插件

TAG:用户界面设计 | 产品设计 |