起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識知乎 Android 端的一次重設(shè)計(jì)練習(xí)
文章為作者基于自己做知乎 Android 端重設(shè)計(jì)的總結(jié)分享，一起來看。
這次做知乎 Android 端重設(shè)計(jì)，是由于四個月前，Android 端去掉了頂部導(dǎo)航的藍(lán)條。由于設(shè)計(jì)趨勢種種緣由雖然可以理解，但是去掉藍(lán)條后的界面字重層級關(guān)系變得混亂，顯示十分粗糙。知乎的Android 端顯得很老舊。再加上之前使用時候的一些感觸。于是就愉快的作為練習(xí)對象動手啦。
在 Android 端，提問action放置于搜索框內(nèi)部，同時提問和搜索引導(dǎo)顏色相當(dāng)，視覺上會認(rèn)為是一件事，對用戶識別造成干擾。
搜索框引導(dǎo)文本顏色過重，使用與下面Tabs【動態(tài)、熱門、發(fā)現(xiàn)】相差不多灰黑色，導(dǎo)致在視覺上重要程度似乎相當(dāng)。顯得主次不明。
灰色分割線和卡片式投影組合使界面厚重且陳舊。
可能由于對屏幕尺寸的珍惜，一屏顯示更多的內(nèi)容。文本間距較窄略顯局促。
卡片內(nèi)信息層級略微混亂。
我對首頁做了這些：
- 將提問從搜索框中剔除，讓 Tabs 功能更明確。
- 增加淺色背景，重新梳理層級關(guān)系。讓信息層級更清晰。
- 關(guān)注問題移動到右側(cè)，用距離將展示信息和可操作按鈕加以區(qū)分。
- 提問作為問答社區(qū)中高頻事件，用懸浮按鈕加以突出，增加點(diǎn)擊率。
- 去掉了卡片下略臟的投影。
- 底部 Tabs 遵行 MD 的設(shè)計(jì)規(guī)范，選中狀態(tài)下顯示文本。使界面更簡單爽朗。
長時間單模塊滑動會讓用戶產(chǎn)生視覺上的疲憊。讓每個模塊擁有自己獨(dú)立的形式，在單一的樣式中加以分割，讓界面更具有節(jié)奏感。
首頁的發(fā)現(xiàn)我進(jìn)行了這些調(diào)整：
- 和首頁保持統(tǒng)一，對標(biāo)題和文本增加了底色。
- 減小了專欄等頭像大小，讓頭像不過于宣兵奪主。
- 專欄和話題用統(tǒng)一的樣式。收藏夾和圓桌根據(jù)各自所承載的信息的不同，為它們設(shè)計(jì)了不同的樣式。在專欄和話題中加以分割。
想法往往是一瞬間的事，比如看到一個場景觸動了想法。記錄場景比文字描述的優(yōu)先級就更高。
翻了很久的想法，大部分人在使用話題時并并不會連接上下語境，甚至知乎也他作為標(biāo)簽放在正在討論。所以用標(biāo)簽代替話題似乎是可行的的，同時界面中也不會有太多的藍(lán)色顯得到處都可點(diǎn)擊。
原設(shè)計(jì)中卡片的并列關(guān)系很棒，再做重設(shè)計(jì)的時候這里琢磨了好久。最后選擇用包含這種比較直觀的方式來制作。
想法設(shè)計(jì)思路：
- 多功能懸浮按鈕。在不同場景都可以迅速記錄想法。同時也方便以后的新功能的拓展。
- 發(fā)布想法的時候，增加標(biāo)簽快捷按鈕。
- 將原來話題改為標(biāo)簽，話題穿插在文本中影響閱讀。單獨(dú)提取出來也更方便辦用戶根據(jù)自己感興趣的標(biāo)簽點(diǎn)擊查看更多同屬性內(nèi)容。
- 增加了搜索功能，可以在想法中進(jìn)行熱門話題檢索。
- 將原設(shè)計(jì)中并列關(guān)系改為包含關(guān)系轉(zhuǎn)發(fā)更直觀。更容易體現(xiàn)針對哪條想法產(chǎn)生的新想法。當(dāng)同一作者針對同一想法連續(xù)性產(chǎn)生想法進(jìn)行轉(zhuǎn)發(fā)的拓展性也更強(qiáng)。
我對市場做了這些：
- 重新排版了市場，采用了更多的卡片設(shè)計(jì)
- 每日新知時間基本控制在兩分鐘左右，顯示時長沒有太大的意義。去除了末尾的時間顯示，通過前面播放鍵外面的進(jìn)度條表達(dá)。
知乎的消息中心是自己使用起來最糾結(jié)的部分。消息的種類十分多，通過icon來做區(qū)分很不直觀。
評論，問題和基礎(chǔ)信息融合在一起，沒有加以區(qū)分，視覺識別閱讀更為困難
對此我做了這些調(diào)整：
- 去除單條信息上的種類圖標(biāo)，將消息細(xì)化讓層級更清晰。
- 優(yōu)化評論和針對評論進(jìn)行評論的版式。評論默認(rèn)展示三行，超出部分需點(diǎn)擊查看原文。
- 優(yōu)化提及，適當(dāng)展示一點(diǎn)前后內(nèi)容。會讓用戶更容易決定要不要點(diǎn)擊看更多。
- 將陌生人信息匯總，默認(rèn)展示最新一條的頭像。
- 將關(guān)注的專欄和收藏的動態(tài)在消息中匯總，防止錯過。
原來長列表加圖標(biāo)的樣式在使用的時候會比較沒耐心看哪個是什么入口。隨著功能的增多，這里也會變得更加臃腫。
為此我重新設(shè)計(jì)更多的結(jié)構(gòu)：
- 重要的入口兩排展示。節(jié)約空間，底下的模塊就可以更好的展示業(yè)務(wù)。
- 將底部模塊根據(jù)不同的功能需要進(jìn)行差別化設(shè)計(jì)，可拓展性更強(qiáng)。
- 私家課突出學(xué)習(xí)進(jìn)度，點(diǎn)擊可快速進(jìn)入課程。
- 書籍除了最近閱讀的進(jìn)度，還展示了已完成和購買，突出成就感。
- 付費(fèi)咨詢展示最新提問，可在此界面快速進(jìn)行回答。
- 展示最近收聽的Live，點(diǎn)擊可快速回到上次離開的地方。
我做了這些：
- 將評論中的時間和可點(diǎn)擊的評論等加以區(qū)分。
- 一鍵切換排序方式。優(yōu)化排版，強(qiáng)調(diào)可操作按鈕。
- 將提問從搜索框中剔除，讓 Tabs 功能更明確。
斷斷續(xù)續(xù)做了有點(diǎn)久，由于沒有數(shù)據(jù)支持，可能很多地方考慮的也不夠周到。以及歡迎諸位質(zhì)疑探討共同提高。
本文由 @符號 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自unsplash，基于CC0協(xié)議
在知乎中，搜索和提問是一體的，提問是搜索的一種延續(xù)，不應(yīng)該分開的。
在分析原稿的時候是想將提問從搜索框提取出來，不讓兩個功能雜糅在一起。讓用戶去琢磨在這個黑框我到底是搜索還是提問。所以優(yōu)先考慮了和想法使用統(tǒng)一樣式。
其次，我認(rèn)為提問在問答社區(qū)依然是重要的功能，通過懸浮按鈕強(qiáng)調(diào)沒毛病。
至于您說的搜索和提問是一體的，提問是搜索的一種延續(xù)。是考慮讓用戶先進(jìn)行搜索，等沒有相關(guān)問題在去提問這個思路么？
回答最后一句，是的，這是知乎搜索的核心思想，也是知乎的核心競爭力，搜索和提問不能被分拆。
淺談最后一頁的設(shè)計(jì)。
從UI和UE的角度來講，這個改版是沒有抓住原稿的思路。知乎作為一款長時間閱讀使用的產(chǎn)品，是需要盡量避免高亮顯示，以對提高用戶的視力感官的友好度。所以可以看到，除了底部tab和問題關(guān)注按鈕的“強(qiáng)引導(dǎo)”之外產(chǎn)品并未對功能進(jìn)行高亮處理。改版的整體設(shè)計(jì)風(fēng)格也偏向了平庸。
從產(chǎn)品的角度來說，原稿采用輕陰影的方式對版式進(jìn)行有效切割，加之對大部分用戶右手操作習(xí)慣的考慮，綜合使得功能重心完美平衡。而改版當(dāng)中，將可點(diǎn)擊打開的評論留言功能改到了左邊，而不可點(diǎn)擊的瀏覽量改到右邊，形成了操作逆勢。仔細(xì)分析原稿，可以發(fā)現(xiàn)，“留言評論”“瀏覽量”與“關(guān)注問題”是輕參與感用戶行為；而“邀請回答”與“添加答案”則是重參與感行為。新改版中太過于強(qiáng)調(diào)操作部分的歸納，導(dǎo)致“評論留言”功能的忽視，會拉低用戶參與問題的方式，影響一部分用戶參與問題的操作便利性與積極性，并且致使功能版式在問題標(biāo)題右下角造成莫名的空白，導(dǎo)致視覺重心不穩(wěn)。
總結(jié)：作者對于內(nèi)容產(chǎn)品的用戶同理心仍需多加思考，在功能版式上思考還需加深，在設(shè)計(jì)上多理解UI與產(chǎn)品的聯(lián)系。好了，我裝完逼了. ??
我理解的您所說的“高亮顯示”指的是（邀請回答、添加回答、關(guān)注問題）這部分，我在設(shè)計(jì)的時候?qū)⑺鼈兗性谕粎^(qū)域內(nèi)，讓功能按鈕更統(tǒng)一和集中。
比起原設(shè)計(jì)，雖然進(jìn)行了高亮的處理，也并沒有造成閱讀障礙，反而將用戶從判斷多種可點(diǎn)擊操作樣式（問題部分的關(guān)注評論、關(guān)注按鈕、邀請回答和寫回答）中解脫出來，讓視覺上更清晰。當(dāng)然您說的設(shè)計(jì)風(fēng)格更平庸，這個仁者見仁，也許您會有更好的設(shè)計(jì)方案。
如果您說的是問題頁的評論和關(guān)注，在知乎官方設(shè)計(jì)是都是可以點(diǎn)擊打開的…
其次，您認(rèn)為關(guān)注人數(shù)、評論和關(guān)注都是輕參與感的原因是？瀏覽量和評論的確是低優(yōu)先級的東西啊，但是如果關(guān)注都是輕參與感….不能茍同（如果是，原稿中也不會高亮）
我給你倆翻譯吧，哈哈！
他說的閱讀障礙，是指你整體風(fēng)格的亮度太高，不單是某些按鈕的高亮。
他說的輕參與感，是指看到就行，十個人里可能有一個人會點(diǎn)擊，且不點(diǎn)擊也不影響產(chǎn)品發(fā)展。
他說的重參與感，是指產(chǎn)品希望且需要引導(dǎo)的某些功能，如果引導(dǎo)力不足，會影響產(chǎn)品的發(fā)展。
評論原文已經(jīng)提過，改版設(shè)計(jì)太過注重“操作項(xiàng)”的收納導(dǎo)致在 “輕參與感”與“重參與感”的分級上不夠清晰.也就是說，你原本認(rèn)為的亮點(diǎn)設(shè)計(jì)是悖論設(shè)計(jì)，這個位置的原稿設(shè)計(jì)是重“參與感分級”，輕“操作項(xiàng)收納”，并不是你理解的在“操作項(xiàng)收納”上做得不夠好。
其次談到UI的強(qiáng)調(diào)點(diǎn)上見下面這位的總結(jié)，我們達(dá)成一個設(shè)計(jì)共識即可：就是知乎這款產(chǎn)品要利于閱讀，利于長時間地閱讀。
而改版設(shè)計(jì)中三個高亮按鈕以及一些細(xì)節(jié)調(diào)亮都把整體亮度拉高了.這是不利的，而人家采用陰影切割板式的陰影設(shè)計(jì)，是比較取巧的一種方式。
問題頁的關(guān)注數(shù)量與評論數(shù)量談到的輕參與感見下面這位總結(jié)，是指操作次數(shù)低。而關(guān)注與邀請回答的操作頻次雖然也不是很高，但這里變維度了，這兩個操作是高度引導(dǎo)的操作（也是知乎產(chǎn)品內(nèi)核之一），在低回答數(shù)與低關(guān)注數(shù)的問題下，可以幫助提高UGC增長。
改版設(shè)計(jì)要吃透別人的設(shè)計(jì)并且從同理心出發(fā)才能打好重構(gòu)設(shè)計(jì)的基礎(chǔ)。重構(gòu)的設(shè)計(jì)要多維度地去思考對方產(chǎn)品是如何考慮的，遭遇了哪些限制，并且也要把自己放入這些限制中去思考該如何處理。真正走到對方的環(huán)境，你會發(fā)現(xiàn)往往對方面臨的情況比你想象的復(fù)雜得多得多。而你在場外無壓力發(fā)揮當(dāng)然可以比別人做得更好，而人家可能有運(yùn)營、老板、開發(fā)、研發(fā)周期、技術(shù)實(shí)現(xiàn)、競爭對手、市場等多個維度的壓力要去承擔(dān)。
我評論得很亂，很多東西甚至超越你目前最遠(yuǎn)能看到的。你隨便看看就好，認(rèn)識到自己努力的事情還有很大問題對年輕人來說是一件痛苦的事。我也是。
從評論內(nèi)容就可以看到您對產(chǎn)品設(shè)計(jì)方向有豐富的經(jīng)歷和對許多產(chǎn)品設(shè)計(jì)問題有入木三分的見解，是我這種剛?cè)氘a(chǎn)品設(shè)計(jì)坑的小白的一個很值得學(xué)習(xí)的標(biāo)桿，所以能否留下您的知乎或者微博等ID??