怎麼評價知乎（2015 年初）的 UI 與交互設計？

12-13

如題

（轉載請經本人私信同意，並標明「來自胡痴兒」）
我夢中的知乎是這樣的

好了言歸正傳=_=
如何深入解讀一款產品？以知乎為例：

我試著從web、ios和Android三種操作環境，
可用性、易用性、愛用性三個維度，
對比其競品quora作答

一、如何欣賞知乎？
第一眼→ →

用黃金分割割屏幕
用水平分隔線來分割屏幕
同時突出登陸的重要性和展示部分內容去吸引用戶

沉靜而寒冷的知乎

思考：視覺要符合所處的環境，其次才是品牌色。鮮艷的高冷的大塊藍色只適合首頁，內容頁則以黑白灰為主色調以突顯信息本身，但是完全素色的界面又顯得死氣沉沉。可以在控制項反饋樣式上使用藍色，讓藍色使界面更有個性的同時不搶內容。

我們欣賞一下知乎app的展示web

去掉頁頭和頁尾
吻合屏幕，沒有滾動條
內容極度聚焦
一屏以內，清晰，令人耳目一新

強化重點，弱化周邊

凸顯入口模塊
增加用戶識別的準確性
一塊朱紅襯著LOGO作為品牌色有效地抓住了瀏覽者的視覺中心
輸入欄和Button作為功能核心佔據了頁面的心臟位置
突出註冊表單，弱化登錄
- 登錄長期有效
- 大部分時間看到的首頁並不是未登錄時的首頁
- 只有在登錄周期失效、更換瀏覽器、電腦時重新「登錄」

quora的情緒
quora的紅，紅得發歡，衝擊著我的視網膜
那種醇郁的朱紅，是一種精神的儀式，一種炙熱，一種成熟

二、知乎的網站結構
知乎網站的信息架構樹形結構圖

深廣度平衡

深度過大的網站不利於用戶快速獲取信息
廣度過大的網站則容易讓用戶在無數並列的超鏈接面前不知所措

培養用戶使用情景的思維方式

知乎沒有凸顯提問模塊

不鼓勵提問→ →

quora把提問放得非常明顯

鼓勵用戶提問

懸浮點贊窗，點擊其他區域關閉

2.知乎的導航
知乎的全局導航過於明顯，分散了用戶的注意力，那麼大一團擬物藍=_=

quora比較值得學習

知乎的抽屜導航
場景：

分支類目多
類目層級深

優勢：

隱藏多餘的類目
使當前頁面簡潔

劣勢:

部分類目，當前頁不可見
類目間切換成本高

quora的上下tab導航

場景：

導航條目少
使用頻率相差不太大

優勢：

所有入口可見
容易找
扁平信息層級

劣勢:

佔據屏幕下一條欄
阻擋內容
Tab的數目有限

3.知乎的柵格

quora的看回答
點擊內容區域

文字第一次被展開
再點擊內容區域→文字完全展開

告訴你上次翻到了哪裡

縱向瀏覽的信息流
點擊問題

進入回答後下拉

3.知乎怎樣轉移焦慮情緒？

前提：用戶反感漫長的等待，讓心情變壞，影響情緒

（1）用戶關注的焦點從等待轉移到一個趣味的畫面、一句簡短的文案
（2）縮短用戶心理等待時間：

挪動變化著的三個點，讓用戶在等待的情緒中剝離出來
轉移注意，為用戶等待的的耐性爭取了時間
讓我不得不希望網速慢下來，多欣賞一會這個設計

頁面載入的進度反饋

發布答案的載入動畫——保持積極響應

網路狀態不佳，總進度進展緩慢甚至停止，需要用戶等待
呈現活動的載入狀態，灌水似的logo保持積極的響應，告訴用戶後台在努力載入
積極活躍的動畫，加強用戶對快速的感知，掩蓋緩慢的現實

細節：

先是迅速的浮到某個預定的位置，給與用戶頁面載入迅速的感受
而實際進度卻在追趕載入進度的logo

結果提前呈現，隨後實現

用設計掩護程序的響應速度，讓用戶感覺到在使用時是流暢的。

用戶發出指令，
用戶界面上迅速反饋操作結果，
而實際數據由後台處理→ →

點擊發布後，該圖片通過動畫從發布器跳轉到瀏覽的信息流中
在用戶看來，已經發布成功，而後台依然在上傳過程中

告訴用戶為什麼要在這裡提交內容

給用戶一個提交內容的理由。
簡單告訴用戶建立內容的好處

比如你可以認識更多人
可以更有條理也更高效地管理信息
……

幫助用戶產生使用目的：

如quora的問和答里——

「快去提問吧，等有答案的時候我們將會告訴你的！」

「開始在quora上寫然後看多少人看過你的內容。」

ios

android

五、淺析知乎的文字及排版
——適合老年人查看的字體和樣式

夜間模式

背景

白色是全頻光，全放射光對人眼睛的最有刺激

淺色模式時，使用乳白色、淺灰色、淡黃色的紙張

提高：

瀏覽的舒適度
效率

帶有紙張紋理的背景長時間閱讀舒適度最高。

為了讓用戶有效使用，降低用戶辨識時間，必須保證清晰度

字體

（1）飽滿
（2）簡潔
（3）字的長寬比
飽滿
無稱線的字體清晰簡潔，無需花費額外的時間加以辨認

字型大小
環境對比度

Fontcolor: #444444 / 68,68,68

Background: #F7F7F7 / 247,247,247

size: 18pt

行長

不會超過40個漢字。

文本寬度控制在450-700px為宜，此範圍內參照字型大小大小；

胡痴兒數了數

知乎web每行42個漢字，稍密了些！
知乎ios在iPhone6上每行20個漢字
知乎Android在nexus5上每行18個漢字

quora每行76個字母（空格算一個字母)，正好適宜！
quora for ios在iPhone6上每行54個字母
quora for Android在nexus5上每行46個字母

間距
對於知乎這種篇幅長且偏學術的比較枯燥的文章：

控制文字的密度
用段距把握文章的節奏
給讀者喘息和思考的機會
使文章更有層次和可讀性

Fontcolor: #979D9F / 151,157,159

Background: #1D1F21 / 29,31,33

size：18sp

六、知乎的搜索框

運行結構：

點擊「搜索」
啟動搜索輸入框
輸入和提交搜索請求
顯示反饋搜索結果

知乎for ios的「搜索」——持續式搜索

將搜索框、文本融合
隨時準備接收用戶的激活

假如沒有搜到相關問題和回答可以「添加問題」

知乎for Android的「搜索」——可擴展搜索

不是主要的功能。
搜索按鈕（放大鏡圖標）放在工具欄中

假如沒有搜到相關問題和回答怎麼辦？

quora for ios的「搜索」——可擴展搜索

quora for Android的「搜索」——可擴展搜索

如何優化知乎目前的搜索體驗？
提供語音搜索功能
Pre.搜索前，顯示cookies（搜索歷史）、搜索建議
ing.搜索中，即時匹配，輸入時提供即時數據

根據用戶輸入的字來判斷用戶是搜索問題還是用戶

七、知乎的用戶體驗金字塔
根據不同的用戶定製產品操作入口
同一界面不同用戶需求
用戶維度的劃分

新手→中間用戶→資深用戶
中間用戶（大部分）→資深用戶
資深用戶

新手和中間用戶都會變成資深用戶
每種用戶都有不同目的，那麼他們的共同目的是什麼？
（定性研究和定量分析）

思考：

這個頁面是幹什麼的？
我大致能通過這個頁面做些什麼？
接下來我該去哪裡？

逐步完善

1.有效性——基礎體驗建設（可用）
色盲（8.65%的男性用戶和0.43%的女性用戶）眼裡的知乎和quaro

如果把它當做一幅素描，會發現他畫灰了，知乎的字體和明度所形成的對比度明顯不夠

建議：使用形狀+色彩的信息提示

夏至日中午堅持刷知乎和quora

近視眼和弱視眼裡的知乎和quora

坐在顛簸的車上的人眼裡的知乎和quora

坐在加速的火箭里的人眼裡的知乎和quora

2.高效性——優化升級體驗（易用）

圖標語義優化
降低用戶使用和學習成本

突破點：從用戶痛點出發
圖文結合，加入文字指示

3.滿意度——用戶深層需求滿足（愛用）滿足使用需求→滿足心靈需求

個性化
情感化

案例：
劉看山

讓錯誤成為不可能。很美好。
404

基於用戶心裡模型，而非工程實現模型

把複雜的後台通過設計符合用戶日常生活中常用的瀏覽、操作方式
生活中的細節和數據結合

隨便看看

八、知乎有哪些不足？
quora是怎麼做的？
該怎麼學習和改進？

界面風格不統一

web端是擬物藍

color: linear gradient

* 0% - #0E7BE4 / 14,123,228

* 100% - #006CBB / 0,108,187

border: #006CBB / 0,108,187

移動端是扁平藍

color: #0077D9 / 0,119,217

漸變+陰影

shadow:

* x y - 0px, 2px

* blur - 4px

* #CCCCCC / 204,204,204 (60%)

胡痴兒按
這裡還是有值得學習的地方：

「取消」是二級按鈕的鏈接方式，為消極操作
「發布」為積極操作，具有「肯定」、「確定」的潛在暗示
但是quora用顏色和字體拉得更開！消極操作為灰字且細

但，這裡quora的流程非常順暢

操作入口出現的時機是適宜的

這裡值得學習的地方——簡化操作方式

令他們快速實現目標
操作時儘可能地採用「選擇」的方式而不是「填寫」

不足：

單項任務流
缺乏主題

改進建議：

清晰劃分用戶在此頁面需要做什麼？可以做什麼？
高亮顯示需要進行的、當前所處的操作階段
介紹還未進行到的操作
告訴用戶他們：

完成了什麼？
將要做什麼？
還有什麼沒有做？
應該怎樣做，才能使任務成功？

遇到Input Box的控制項

讓用戶少輸入
智能給出參考

操作入口

按鈕控制項
輸入框
文字鏈
……

正常滑鼠停留

滑鼠按下

視覺不明確：

清晰度
可識別性

我們看看quora的按鈕：
正常

滑鼠停留

滑鼠按下

quora有哪些地方值得知乎學習？
橫屏

避免用戶出錯
給用戶行為約束——封閉掉不正確的道路

比如這一位，明明把我拉黑了，卻顯示在我的「你可能感興趣的人」里

然後我點擊關注——

建議：

顯示剩餘邀請次數為藍色
當邀請次數為「0」時，不能邀請更多人，操作項被置灰，不可點選。
避免誤操作

模態彈窗的反饋，打斷了任務流
誰也不能保證所有人都可以準確無誤地走完一個流程，
我們來看看這個失敗的彈窗：

信息干擾
用戶使用進程中斷
增加用戶達成目標的難度
給用戶造成干擾
影響用戶完成任務

在iphone OS中稱作：Alert-box
在Android OS中稱：Pop-up box

模態彈窗很不友好，用戶在填寫問題時可能會被打斷三次，所以降低了用戶的參與度。

建議：適時地給用戶相應的幫助

我們來看看quora是怎麼做的？
　　quora採用了Toast list的方式，提醒糾正，非模態的處理，讓流程更加順暢和輕鬆自如。

用戶第一次使用或需要幫助，及時出現，有選擇的餘地
用戶已經出錯或者將要出錯時，及時提醒
用戶遇到不明白時，給出解釋

細節：黃色代表警告，綠色代表成功

假如我的問題不存在就自動添加問題

入口信息不明確

1.無論點擊我的主頁還是我的頭像和名字都進入「我的主頁」

2.消息流的「被評論」熱區
只有web端可以跳到被評論上

ios和Android的三個熱區

「評論者名」→「評論者列表」
「標題」→「問題列表」
「內容區域」→「回答內容」

胡痴兒按：勞資就是想看誰評論了我啊啊啊啊

告訴用戶是什麼
告訴用戶怎麼作才能完成整個流程

未激活按鈕的設計——拉得不夠開
預設用途：
一個界面或者控制項，要讓用戶一看見它就知道如何使用
知道這個控制項可否操作
」激活」和」未激活」兩種狀態而目前處於」未激活」狀態的按鈕

呈不可操作的視覺效果（比如灰色）

可點贊和不可點贊
對比區分不夠明顯

隱藏部分功能

quora，按步驟拆分的用戶教育——
通過明確的步驟性的引導用戶如何操作

結果呈現給予正向鼓勵

給予用戶必要的預判性錯誤提示
——告訴用戶，這樣走可能會錯
當用戶的一個行為很可能會引發預見性的錯誤，越早提示用戶，並給出可行性的建議，錯誤越容易被接受和改正，用戶的損失也就越小。

胡痴兒按：黃得漂亮（發灰），太他媽文藝了！

quora
胡痴兒按：黃得正，起到了警示的作用！

對登錄流程進行優化

糟糕的「郵箱已存在」

通常的登錄和註冊是分開設計的
如果將登錄和註冊整合
每一步驟都只有一個表單
註冊和登錄沒有任何衝突
這樣避免了」用戶已存在」然後又要重新填寫表單的不良體驗
在流程上有很大的優化

優秀案例：

登錄時，以為沒有註冊，遂跑去註冊

註冊時，又提醒你已註冊，直接登錄

設計規範
不同於一般的48dp的韻律，知乎用的56dp
間距為16dp

參考quora

標題應右退11dp
漢堡按鈕應左進2dp

搜索輸入框應拉長16dp

贈詩一首《致知乎》
——如果找工作是追女孩，投簡歷是一次表白
那麼知乎一定是我當初暗戀的女孩。

當年，沒任何工作經驗的我
見到人生中第一家心儀的公司——知乎
我那麼在乎這家公司和它的產品
甚至可以忍受廉價的工資
可是我的簡歷還是被扔到垃圾桶里
我投了一千份簡歷，全部石沉大海
沒有迴音
……

像我的愛情：

沒任何感情經歷時
我第一次見到心儀的女孩
我要把身上和腦袋裡所有美好的事物都和她分享
但，她拒絕了純潔的我
……

我的老師——知乎，你的學生胡痴兒，敬上。
我要開始用我的知識反哺你了！

我來說兩點我個人感覺很彆扭的吧：
1，當用戶只有一個收藏夾時，點擊某個答案的收藏按鈕，會彈出這麼一個彈窗……

說真的，我真的百思不得其解，接下來該如何操作呢？怎麼才能把我要收藏的答案塞進我的收藏夾？點「關閉」？感覺不是……點「創建收藏夾」？肯定不是了。難道是直接點擊右上角的×？我腦子有坑？

挪了半天滑鼠才發現收滑鼠在藏夾這個框框里時，有一個略微變灰的反饋，我試著點了一下……

我擦！原來如此！

整個界面沒有任何隱喻引導用戶點擊這裡，也沒有用戶熟悉的「確定-取消」的體系，而是一個長得不像按鈕、也沒有空位置標識的複選框……尤其對於只有一個收藏夾條目的用戶來說，是多大的悲劇啊！
縱使我第一次學習了這一交互之後，以後很多次點開收藏，我都要第一下先迷糊一下……茫然的想，接下來我該點哪？

2，登陸頁填寫驗證碼。

在某些你異地登陸或連續輸錯密碼時，知乎會讓你填寫驗證碼……而這個頁面，更是讓我栽了無數回。
第一眼一看，哦，驗證碼，異常登陸了。tpTi，填吧。點擊下面擬物凹陷的、裡面寫著「請填寫驗證碼」的文本框，咦？怎麼怎麼點都沒反應？Chrome又崩潰了（咦？我為什麼要說又？）？電腦假死了？狂點滑鼠左鍵半天才發現，哦……原來驗證碼輸入框TMD在驗證碼的上方……

為毛一個提示長得那麼像輸入框啊！！！還擬物凹陷搶奪視覺重心啊！！！既然你的輸入框里已經有默認文字「驗證碼」三個字了，為毛還要單獨列出一個提示費二遍事啊！！！為毛驗證碼的輸入框會出現在驗證碼上方啊！！！

我想個傻【嗶】一樣狂點滑鼠左鍵還又把鍋甩到Chrome上啊！（咦？我為什麼要說又？）

我冷靜下……

中規中矩，達成了產品目標，在中國我們稱之為「好的設計」，我是說 iOS 版。Android 版在「設計」上有些刻意的痕迹，用的不多。

看完前面幾位的答案，說一些其他的三個痛點。

第一，手機編輯只是一個記事本嗎？
我想在第一句話的「三個痛點」和這句話的「第一」加粗突出，可是手機黨做不到啊。我要插入圖片，完了之後：

嗯，我的文字被頂到哪去了======果然換電腦，丟，放錯圖片了，怎麼刪啊！游標放在圖片後面或者雙擊圖片，什麼反饋都沒有~~~在線等，挺著急的。

第二，一個答案的分享、贊同、幫助、感謝、收藏、評論，傻傻分不清。
那個，我順手點了感謝和沒有幫助，這樣也可以？

其次，收藏有已收藏的反饋，感謝喲已感謝的反饋，我評論了也給個反饋好嘛！
總得說來，這些控制項的區別有時候傻傻分不清，我也是看了某知乎答案後才養成了「我不不知道你說的對不對，所以不能任性地贊同你但我很長知識，我會感謝你，甚至收藏你的答案。沒有幫助充滿惡意，分享有那麼善良，哈哈哈」

第三，難道沒有人覺得評論區域的那個橫線很奇怪嗎？

吐槽完畢，我再也不想用手機回答需要多圖片支持的答案了~~

我只說兩個痛點。

第一，鎖屏狀態下通知推送提示有人評論，解鎖後不是直接跳到該評論，而是需要手動點開評論。拉到最後一個評論才能看到。

如果評論比較少還好，評論多了簡直就是要把屏幕搓爛的節奏好么？？

你特么確定這不是在逗我？？！！

第二，手滑點了感謝竟然取消不掉。

感謝放到那個地方很容易誤觸好么？？？

如果答主的觀點和自己不一致還點了感謝簡直比吃了蒼蠅還噁心。

法克。

就這兩個痛點我覺得知乎的交互設計就像狗屎一樣。

我就不信沒人點贊。

知乎今天更新了！！！！太棒了！！！愛你，黃繼新！！！么么噠！

1
感謝分享收藏沒有幫助舉報
按鈕太多了，還有誰能告訴我感謝和贊同的區別？？
為什麼不能使向下按鈕撤銷贊同的功能等同於沒有幫助、

2.右上角那邊個人信息滑鼠懸停出現，消息為什麼要單機後出現。很不習慣。消息整合在個人信息里也是可以的吧。

3.用了很長一段時間我才明白要看較熱門信息點話題看剛出現的問題點發現。用戶學習成本太高了。

4.用戶主頁中，頭像為什麼不能顯示大圖？ @黃繼新你對得起那麼多美女知友么！！

5. 還有很多在同一頁面功能相互重疊的按鈕.....

怎麼評價Quora的UI與交互？
哦，不好意思，Quora改版了...

怎麼評價人人的UI與交互？
哦，不好意思，Facebook改版了...

手機上跳不到新的評論，電腦上@不到想要的人。

我主要說下知乎APP（安卓平台）
UI：選擇象徵互聯網的藍色為主色調，登錄界面大幅藍色為底，主界面header-bar為藍色，其餘白色居多，中規中矩，缺乏可陳。
交互： 1.導航框架：原先的tab標籤式改成了現在側滑抽屜式
我認為是進步，這一舉措增加了閱讀面積，而且並沒有對用戶的操作帶來多少繁冗，畢竟發現、話題之類的切換並不是高頻次的操作，而且知乎整體的交互層級並不深，所以沒必要使用占可視面積的tab式
2.信息架構：...

= = 以上我看啥時來填坑，先說重點
知乎是UGC問答社區，C content是UGC社區的核心，這就註定了UI和交互設計的優先順序遠遠低於內容運營，題主如果問問如何評價知乎的運營應該更能獲得一些乾貨。
但也並不是說UI和交互不重要了，知乎的UI以上已經評價，交互我要吐槽吐槽，既然是以內容為核心的社區，交互也應該圍繞兩點來來展開：1.讓用戶更快獲得想要的內容 2.讓用戶更方便地產生內容。知乎的搜索體驗和移動端回答排版的體驗我相信不用我多說了...

Android 端的 app 採用了 Android 設計規範，差評。

每次展開答案或者評論之後我就再也找不到收起了。

怎麼沒有人說電腦版答案的字體和所佔的版面都很小，看長文章很累。

我個人灰常討厭知乎的iOS客戶端，太尼瑪難用了，上次在回答問題的時候。我寫了一長串，然後點發布，誰知道無線掉了，然後一直發不出去，既然發不出去，不會弄到草稿箱里嗎？然後我把知乎關了，重新打開，發現沒弄到草稿箱，頓時想死的心都有了，還有，我一直覺得，知乎的手機客戶端居然沒有自己關注的話題下的問題推送，取而代之的居然是發現下編輯的推薦，編輯大大，你曉得我們對神馬感興趣不，瞎推薦…@黃繼新還有新版的iOS啟動前居然有一段時間的黑屏，不知道是不是我手機特有的還是大家都這樣，還不如原來的版本呢。總之，手機客戶端不人性化，知乎的網站好幾年了都沒怎麼變過，都不知道知乎是不是請不起前端工程師了。知乎還沒有wp客戶端呢吧

誰提問的？
回復自己的評論不能直接跳，要自己翻。

差勁……

看一個問題的答案看著看著感興趣了我要拉回頂部關注
寫答案我又要拉到底部
貌似第一名的答案是展開的？看著看著根本不知道有多長啊...結果發現原來這麼長...一直往下拉往下拉...終於出來第二名的答案了

ios客戶端的搜索感覺十分捉急。
比如無法直觀地看到每個提問的關注量和回答數，一般我們都會先點回答多的問題嘛。可是如圖，這些一看問題本身就覺得不靠譜的卻佔據前列。

我看了一會兒下面的答案想回答這個問題，發現居然還要拉回top

沒有幫助按鈕的位置簡直不能忍，左手單手使用的情況下常常會出現誤點沒有幫助。

為那些我誤觸沒有幫助的答案默哀

最後，說這麼多，他們改嘛？客戶端還是那麼難用，手機寫答案網路不順暢就各種丟，回複評論翻到手軟。安卓現在的這個版本多久沒更新了！

0404更新
之前排第一那個睜眼說瞎話的自己刪答案了大快人心

以下為之前回復

跟誰特一樣

目測排第一的答案都被踩出誰特了，真不要連