最近知乎改版巡莹,用起來有時候總是覺得好像哪里不對,最近抽了一兩天時間出來冰抢,仔細的看了看松嘶,知乎某個話題板塊中的動態(tài),精華兩個頁面上的各項之間的區(qū)隔挎扰,總是使我感覺到有點迷糊翠订,有時候在快速滑動瀏覽時常常沒有注意到問題是什么,或者滑到下一個問題也沒有察覺到
大概總結了一下問題是:
1遵倦、問題雖然字體比回答大一些尽超,但是任然大的不夠明顯不夠突出,尤其是在快速滑動瀏覽的情況下用戶很難快速識別問題和回答的區(qū)別梧躺。
2似谁、在一個問題的多個回答中采用橫線來隔開,橫線本身對內(nèi)容的閱讀造成了干擾掠哥。
3巩踏、回答和問題之間的距離與上一個問題的回答的和下一個問題之間的距離差別不大,雖然中間采用明顯的深色區(qū)域做了隔開续搀,但是還是難免造成視覺上的親密感覺,影響用戶通過內(nèi)容之間的距離來感覺內(nèi)容之間的相關性目代。
改進:
1嗤练、將問題字體顏色設計為突出的藍色。Robin說過“如果兩個項不完全相同煞抬,就應該使之不同,而且是應當是截然不同构哺。”曙强,所以考慮將問題字體顏色設計為突出的藍色,在和知乎的界面主色調保持一致的情況下碟嘴,非常明顯的將問題從回答中突出出來,并且由于問題的顏色和回答截然不同娜扇,很明顯的在問題和問題之間起到了很好的區(qū)隔作用。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(改進前)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(改進后)
2雀瓢、去掉煩人的橫線,讓頁面變得更簡潔更易閱讀刃麸。去掉橫線的同時醒叁,深色粗橫線成為視覺上唯一跳脫式的硬性區(qū)分方式,更便于用戶理解和注意泊业。因為每一個回答開頭的頭像和ID行已經(jīng)在每一個回答之間起到了很好的區(qū)別和標示作用把沼,這時候再使用橫線即影響了界面的簡潔度功能上也重復無用。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??(改進前)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(改進后)
3脱吱、拉近問題和問題的回答之間的空間距離智政。由于問題采用了和回答截然不同的藍色,這時候我們就可以考慮將問題和回答之間的距離拉的更近一些箱蝠,而不用擔心用戶混淆它們,問題和本身回答更近的距離不僅視覺上提示了用戶它們之間的相關性垦垂,還讓每一頁都可以顯示更多內(nèi)容宦搬,而不覺得擁擠。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(改進前)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(改進后)
后續(xù):
為了保持知乎顯示風格的一致性劫拗,知乎首頁界面的也需要將問題的顏色改為藍色间校,問題更突出了,便于用戶圍繞問題展開閱讀页慷,而且視覺效果看起來也不錯憔足,是嗎胁附?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(改進前)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (改進后)
心路歷程:
最開始考慮的做法是將問題的回答部分做一些縮進處里,這樣用戶就可以很直觀的通過格式的變化區(qū)別問題和回答部分滓彰。并且雖然回答部分會少顯示幾個字控妻,但是實際做出來后,少顯示幾個字的區(qū)別很小揭绑,至少并不影響用戶對回答的概覽弓候。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(改進前)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(縮進式改進后)
但最后考慮到首頁的顯示也需要跟著縮進,雖然少顯示幾個字的影響不大他匪,但這視乎并不是最好的方法菇存,所以最終放棄了這個方案,而采用了讓問題使用不同顏色將問題突出出來的方法邦蜜。
這是我第一次在簡書寫一些東西依鸥,希望各位帥哥美女多提意見,如果能得到大家的建議悼沈,我會很高興的毕籽,謝謝!