知乎這款問答應用一直以來受到了很多人的青睞，人們可以在這里學習知識、分享知識、交朋友。以下是我對這款軟件的一些界面還有交互邏輯上的一些想法，不足之處望大家積極指出。
對于圖中出現的人和回答，本人無意冒犯，如果侵犯到了您的隱私，請私信我，我會第一時間刪除，謝謝。 本人很喜歡知乎這款應用，無論從設計還是內容上都是一款十分優秀的APP。文章中涉及到的觀點，并無惡意，只是一些個人的小想法，還望理解謝謝。
另：截圖來源
原圖：尺寸1080x1920 改版：尺寸720x1280
知乎版本：4.9.1（439）
設備：Mi-4c
安卓版本：5.11
MIUI版本：7.0.11.0
一、目標
本次重設計，在不改變整個交互結構的基礎上，著重解決的問題有以下3點：
1.減輕長時間閱讀造成的視覺疲勞，使界面更通透，更輕；
2.對一些個人感覺交互不合理的地方進行修改；
3.在原有圖標的基礎上進行微調，使之更統一；
二、知乎信息結構圖
大致梳理了一下知乎的結構，重復比較多的模塊單獨列出，如回答模塊和文章模塊。
這只是單向的，各個分支末端的聯系并未標明。
三、具體頁面重設計及想法
1.首頁
1.圖標：原版的底部標簽欄“主頁”和“發現”是正負形的樣式，中間的“通知”有間隔也算是正負形吧，后面的兩個不是正負形的樣式，所以我在不改變原有含義的基礎上對“消息”和“更多”進行了調整。
“消息”的中間加了兩個氣泡（我知道你萌想說微信 = =）
“更多”換成了四個圓角矩形的形式
“發現”中間的指針加上了圓角
并且對這五個圖標的激活和未激活狀態增加了小彩蛋（個人興趣）如圖3-1所示。主頁對比如圖3-2所示。
另外原版的“搜索”圖標用的是谷歌爸爸的默認MD圖標，為了統一樣式，重繪成了帶有圓角的樣式，還有知乎Live的閃電，也做了同樣的改動。
2.文字
原版每個模塊的問題采用的是粗體，內容和提示文字采用的是正常體，除此之外還有大小和顏色上的不同。這樣做的目的是為了更好的區分這些元素，而且更好地突出標題。
但是，我個人認為，這樣做會顯得界面很笨重，而且在有的iOS手機上會顯得字特別大，影響閱讀體驗。因此，我舍棄了通過粗細區分字體的做法。所有的字體都采用正常粗細，通過顏色的深淺和大小區分各個元素。
這個樣做的結果可以使用戶快速瀏覽標題找到自己感興趣的內容，并且減輕閱讀負擔。
3.布局
每個模塊的贊同、評論和關注問題放在了屏幕的右側，這樣做的目的是為了更好的從上至下瀏覽題目，減少快速瀏覽時造成的中斷，而且符合人們左右閱讀的習慣，即看完標題，大致瀏覽內容后再看到贊同評論的信息，然后視線再回到左側瀏覽下一條問題。
而且點擊“關注問題”變成“已關注”的狀態，由于是文字右對齊，位置會有個向右的動作，而且文字會變色，可以給用戶更好的提示，增加人機交互。如圖3-3所示。
對于知乎的新功能知乎Live,原版是可左右滑動瀏覽推送的Live信息，仔細觀察可以發現“查看全部Live”的方塊沒有顯示完全，這樣做的目的是為了提示用戶右側還有相應的信息。但是在我使用的過程中最多推薦過兩條有關Live的信息，加上“顯示全部Live”一共三塊。而且，右上角的“X”號我個人感覺沒有存在的必要，因為如果用戶感興趣，他就會點進去查看內容。如果對這場Live不感興趣，他會做如下選擇：①右滑查看其它live ②點擊查看全部Live進入下個界面。如果對這塊內容不感興趣，就會直接下滑瀏覽其他內容。
但是，知乎這樣做有他本身的原因，即提高新功能的曝光率和點擊率，為用戶提供更多的選擇性。
從界面的整體性考慮，我舍棄了左右滑動的這種方式，規規矩矩的用一個推薦Live和一個查看全部Live的模塊，然后和左右基線對齊，同時把“X”號去掉。同時新增一個進入知乎Live的入口，即點擊“知乎Live”也可進入Live界面，因為原版點擊這里沒有任何反應。這樣進入知乎Live就有四個入口：①屏幕右上角圖標 ②知乎Live ③推薦模塊 ④查看全部Live
搜索框大小做了適當調整，左邊和基線對齊，右邊和Live圖標距離保證不變，整個框依然作為可點擊區域不變。Live圖標左移，和右基線對齊。
4.FAB按鈕
FAB按鈕的顏色，我認為和整體不太搭，而且這個黃色只用在了各個界面的FAB按鈕處，其他界面再也沒有看到這個顏色。所以我嘗試了更跳躍的紅色作為FAB的顏色，和藍色為對比色，更加突出按鈕。如圖3-4所示。
不知道是不是有bug，激活FAB時經常出現“X”號消失的情況。
首先，我對將遮罩的顏色從白色換成了黑色，使畫面更柔和。
接下來，我對彈出的三個按鈕圖標進行了一些調整，全采用了正負形的形式，并且使圓角更明顯，同時對提示文字作了修改（強迫癥）。
5.其他
每個模塊的更多里除了“屏蔽問題”和分享外增加了“屏蔽話題”選項。如圖3-5所示。
有這個想法的原因是有天我發現，我很久以前關注的某個話題推送的內容我都不太喜歡，但是我想取消關注，我需要做如下步驟：底部標簽欄更多→我關注的→話題→找到對應話題取消關注。增加這個選項之后，我只需要做：更多→屏蔽話題。然后就可以取消對應話題的推送了。
整個界面的背景采用灰色微帶藍色，同時把每個模塊的陰影去掉，只保留導航欄、標簽欄、FAB以及彈出模塊的陰影，既有層級，界面本身顯得干凈。
2.發現
1.推薦
頂部banner在原版是可以滾動的，但是沒有任何元素可以提示banner的個數。左右滑動可以切換，與導航欄的滑動切換有沖突，但是并沒有特別大的影響。
所以我修改了頂部banner和導航欄之間的距離，增加了banner和問題模塊的距離以區分兩者。同時在 banner上增加了提示banner個數的小圓點，告訴用戶一共有多少個，雖然用戶不一定會全部看完，但這樣做可以減少用戶對于未知的不適感。
頂部導航欄的切換下劃線，我改成了圓角矩形，與底部標簽欄的圓潤圖標統一。切換方式依然是點擊或者左右劃屏幕，功能上不做改變。
FAB按鈕做顏色上的改變，不改變其隨機跳轉問題的功能。
2.圓桌
舍棄4:3的圖片比例，使用16:9比例，與原版保持一致，使一屏內顯示更多內容，同時是畫面更精美，不做改動。
3.熱門
除了之前提到頂部導航欄之外，其他不做改動。
4.收藏
收藏界面我做了一些調整，將頭像用戶名字和關注人數對調了地方。因為我覺得，用戶瀏覽這個地方的主要目的有：①看收藏夾的名字是不是自己喜歡的（如果有簡介，會先看簡介）；②再看這個收藏夾是不是受歡迎來決定是不是點擊進去瀏覽。這樣可以使用戶快速上下瀏覽。
2.通知
1.通知
首先，原版中未讀消息的字體會比已讀消息的字體顏色要深，這樣可以提醒用戶哪些是未讀的，哪些是已讀的，這樣的做法既簡單右易懂，我保留了這種形式。在此基礎上，我把左上角的未讀提示，即“2條未讀”也設計成了這樣的形式，當有未讀消息的時候，文字是較深一級的顏色，當沒有未讀消息的時候，文字用較淺一級的顏色，以此來區分。尤其是通過右側的圖標將所有通知消息變為已讀時，除了問題字體會變色，未讀提示也會變色，這種統一感會用戶更強烈的感覺。
然后仔細觀察原版中的底部標簽欄，我明明有未讀消息，但是通知圖標下方的小圓點不見了，有種小圓點君翹班的既視感（= =）。至少在我看來，即使跳轉到通知頁面，在用戶沒有讀完所有內容或者手動清除未讀消息之前，小圓點君不應該憑空消失。
這里想說點題外話，有些APP的未讀提示你點開之后要不就是提醒你VIP充值，要不就是廣告，不只是這樣，有時候他的路徑藏得特別深，總是就是很麻煩，在中立的立場上我很理解這種做法，但是站在用戶的角度或者一個純粹的設計師的角度來講，這樣的做法實在是有點不妥。但是還是要平衡用戶體驗和商業價值方面的平衡，也是你萌設計師要做的事情不是嗎？
最后我把手動標為已讀的圖標加上了圓角，是整體圖標統一。
至于最下面的一個“回答了問題”為什么是右對齊基線。因為有的用戶的名字實在是太長了。這段有點枯燥，不想看的可以略過……知乎的機制應該是這樣的：①1人或者2人回答問題，這些用戶的用戶名都會顯示出來②當有3人及以上會顯示2個人的名字，之后用等n人代替。總結來說就是，最多顯示2個人的用戶名。然后我們分析，沒有出現等n人，說明是2人或者1人，然后有點點點，說明不是一個人，所以應該是2個人。結果就是2個人，我還沒碰到過一個人的用戶名超過一行的情況。
還有最重要的一個地方，我為什么要把原版里一整塊切割成了一小塊一小塊的，這點單獨講比較困難，所以我放在最最后面。
2.贊與感謝
不做改動
3.粉絲
不做改動
3.私信
稍微修改了幾點：
①原版中點擊FAB跳出來的是回信的界面，因此我覺得既然發現界面里的FAB按鈕可以改成“隨機”的圖標，那么我認為這里應該也可以。我用鉛筆代替了加號，這樣可以使用戶更直觀的理解FAB按鈕“回信”的功能。
②原版中“私信”應該是和16dp的基線對齊的，但知乎的頭像沒有和16dp對齊，整個界面看起來不太規整。所以我把導航欄的“私信”兩個字對齊基線72dp，統一標題左側基線，為之后的圖標預留位置（我想這樣會減少一些開發大哥的工作量吧= =）。同時知乎的頭像放大，對齊16dp的基線。
如果是純粹的MD風格，大部分導航欄文字左側都會有圖標。這里的話看個人選擇吧，我選擇的是這樣，當然原版中的也很好。
5.更多和個人中心
把這兩個內容放到一起更容易整理思路。
首先，在原版的“更多”界面里，有“我的關注”、“我的收藏”、“我的草稿”、“最近瀏覽”、“我的書架”、“我的Live”、“我的值乎”這幾個部分作為一塊，然后下面的是“夜間模式”和“設置”。
單看這個界面，從圖標統一的角度來看，“我的書架”是立體的，而其他都是二維的，用在這里不太貼切，所以我把這個圖標做了以下修改，換成了幾本書垂直放置的形式。“最近瀏覽”加粗了中間的指針，“我的值乎”加上了輪廓圓。
我覺得這里比較貼心的一點是，切換夜間模式的按鈕很好找，而且用了切換開關擺在了很醒目的位置，是作為一款閱讀類App必不可少的一項功能。
然后對比我的個人中心頁面，我發現這里面稍微有一些問題。
①圖標不統一
兩個“我的收藏”一個是五角星，一個是數錢==書簽，我本來以為這兩個里面的內容會有所不同，可是點進去之后發現內容是一樣的。所以我想統一成一個圖標。對比其他圖標可以發現，有圓有矩形，為了統一，我選擇書簽和五角星的結合作為“我的收藏”的圖標。
②內容重復
“我的Live”、“我的收藏”出現了兩次。“我的收藏”的重復，是因為他是很常用的一個模塊，在“更多”里出現，會使用戶第一時間找到，不用再點進主頁尋找。“我的Live”，個人理解為要增加曝光率吧。
接下來，我對比了其他人的個人中心，發現他人的個人中心和我的個人中心有些區別。增加了他的值乎模塊。因此，我將這兩大部分重新整理了一下，按照和“我”的相關度分為了3類
①專屬于我的，別人看不到也不可以用的內容：“我的草稿”、“瀏覽歷史”、“最近瀏覽”、“我的書架”
②專屬于我的，但是別人也可以用的功能：“夜間模式”、“設置”
③雙方可以共享的內容：“我的關注”（包括人、收藏、話題、問題、專欄）、“我的收藏”、“我的回 答”、“我的提問”、“我的文章”和“我的Live”,另外開通值乎功能后還有“我的值乎”
其中①②放到更多里，③放到個人中心。同時還要考慮到用戶常用的幾個功能：“我的關注”、“我的收藏”也放入更多里，于是就有了下面的分類圖3-15。排序方式的依據為用戶最想的功能和整齊度兩方面。
可以看到，“更多”界面的內容可以在一屏內顯示完，用戶不用再猶豫是下滑找他想要的內容，還是進個人中心找他想要的內容，節省了用戶的時間成本。
最后，把圖標的中心和頭像的中心對齊，后面的文字也對齊，至此“更多”界面完成。
下面是“個人中心”界面
原版里分為了“個人主頁”和“詳細信息”兩大部分，對比這兩個部分會發現“點贊”和“感謝”兩個圖標重復。所以我把詳細信息里的四個圖標放到了個人主頁中，并加上了圓角。
這里我做了一個較大的改動，我把詳細信息里的其他內容去掉，用一個新的頁面展示，這個頁面需要點擊頭像進入。而原版中點擊頭像之后彈出的是修改或下載頭像按鈕。
這樣個人中心就只有一個頁面，關注的話題等移動到了之前標簽的位置，然后對齊。
在第一個模塊增加了個人資料的小字提示，右邊的關注按鈕僅作他人觀看時的示意。
第二個模塊去掉了“我關注的專欄”一項，整合到“我的關注”里，不論想查看自己或是別人關注的任何東西，都可以在這里找到，理順一下邏輯。
其他方面，數字右對齊，最近動態模塊采用首頁中的模板。
至此五大塊內容已經重設計結束。
6.搜索
搜索主界面（圖3-17），改變了搜索框的高度，使其和主頁中的搜索框高度一致，長度增加，使返回圖標左右留白相同。改變導航欄下劃線樣式，最近瀏覽圖標“更多”里使用同一圖標。
搜索內容界面（圖3-18），原版中輸入搜索信息后，“最近瀏覽”模塊會消失。這種情況下，如果用戶想再次進入“最近瀏覽”界面，有三種選擇：①清空搜索框內容；②退出搜索界面，回到主頁再次點擊搜索；③退回主頁，切換到“更多”頁面，點擊最近瀏覽。我的想法是，在搜索出相關內容后，依然保留“最近瀏覽”模塊，這樣用戶就會多一種進入“最近瀏覽”的入口。但是我不知道這樣實際開發的時候是否可以實現，希望有了解的朋友給予解答。之后的問題模塊依然是把贊同和評論右對齊，使用戶可以快速瀏覽感興趣的問題，較少贊同和評論造成的閱讀中斷。
搜索人界面（圖3-19），保留了“最近瀏覽”模塊。
7.問題界面和我的收藏
1.問題頁面
從上往下看，首先是問題標簽，我覺得沒有必要把該問題所屬的話題全部放在上面，向左向右的小箭頭雖然可以滑動標簽，但是對于我來說，我幾乎沒有滑動過。所以我只列出其中四個，并且可以在屏幕中顯示完全，去掉了小箭頭。
“關注”人數圖標與“更多”里的保持一致，“評論”為了和“私信”區分，使用圓角矩形，并與回答詳情頁中保持一致。右側的藍色關注按鈕保持整個APP使用這一種。
邀請回答和寫回答圖標加入圓角。
回答模塊的文字使用深一級，因為在這個頁面，用戶的主要目的是為了閱讀回答，找到自己感興趣的點進去瀏覽詳情。贊同評論時間三項右對齊，使用戶快速瀏覽回答。
2.回答頁面
原版中使用了“X”號作為返回的圖標，我統一規范為箭頭作為返回符號。
回答者模塊，保持和搜索人的頁面中的模塊一致。
底部功能圖標，“收藏”換為書簽形式，“評論”與上圖“評論”保持一致。這里我去掉了沒有幫助的按鈕，收進了屏幕右上方的更多里。
3.評論頁面
4.收藏頁面
圖標方面，“關注”和“評論”圖標與問題頁面的保持統一。
“共406個回答”移動到下層。
每個模塊沒有像前面那樣分割開來，而是用1像素的線分割， 這里我想說一下自己的想法 。
在整個知乎的界面里，模塊按照操作可分為3類：
①只能點擊，跳轉另一個頁面；
②只能點擊，同時當前頁面跳出進一步操作頁面，如主頁每個模塊的“…”
③除了點擊之外可進行其他手勢操作，如長按、滑動等。
大部分的模塊都是屬于類別①，如圖3-24所示。這些所有界面里的模塊，只能進行點擊，然后跳轉。
屬于②的只有主頁的每個模塊，點擊“…”更多，可以屏蔽問題或分享。
屬于③的有兩個頁面，一是評論頁面，二是我的收藏頁面。
評論頁面，單擊和長按可彈出“回復”、“舉報”等功能。
收藏頁面，左滑可已刪除該收藏。但我對原版中的左滑不太喜歡。我第一次不小心左滑，發現他突然就消失了，嚇一跳，然后下面彈出如果誤刪可撤銷操作，但是停留時間很短，還沒等我點擊提示就消失了。從此之后下滑都小心翼翼的（= =）。所以我換為左滑會彈出垃圾箱圖標，再次點擊可刪除，防止用戶誤操作。但我這樣做，用戶想大面積刪除的時候會影響流暢度。只能說兩種方法各有利弊吧。
所以我把①和②歸為一類，這類只能進行點擊操作，這類模塊用留白分割開來。按照Material Design的規范，相似內容且操作不超過三種的模塊應使用瓷磚，也就是用1px線分割，這樣可使用戶更流暢的瀏覽。但是，我為了符合我規定的分類，用了自己的方法，即留白。
③歸為另一類，這類可進行其他手勢操作，如長按，滑動等，這類模塊用1px線分割，表明可進行其他操作。
所以我重設計的界面里使用留白分割的原因就是這樣，另一方面也是為了使頁面顯得更加干凈。
四、總結
這次重設計的頁面是知乎常用的幾個界面，當然還有其他頁面，比如登錄注冊，Live詳情頁面，值乎詳情頁面沒有進行重設計。
通過這次的一番思考，更加深刻地認識了如何從整體上把握界面的統一性，以及交互邏輯在界面設計中的重要性。還有一款產品從“0”做到“1”是需要付出很多努力的，遠比我這樣的對“1”加工要辛苦得多，請善待你萌身邊的每一個設計師。
就醬，下次再見。
Tags: 知乎live 移動設計
文章來源：http://www.zcool.com.cn/article/ZNDQxMTUy.html