知乎 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??