Case 20 | Medium.com

原網站:https://medium.com/

Medium是我經常看各類文章的地方,尤其相關設計類的文章。這篇將解析medium網站的排版和UX流程。

・top的區域使用70px字號,#080808顏色的大標題“Medium is a place to write, read, and connect",讓用戶能清晰快速的知道產品是什麼,怎麼用,意義是什麼。非常高超但又不突兀的產品描述和營銷。

・向下拉動到一定位置,背景會變為白色。方便下面的內容閱讀。

・brand logo是圖標加text,黑色的brand logo非常百搭,適應各種光線環境。

區域的右邊是特別設計的文字組成的圖像,整體形成引號”的形狀,同時每句話都是產品的特性,非常非常妙的圖標。

文章內容呈現在左側,按照向下滑動鼠標的方向呈現。

右側 “Discover more of what matters to you"是fixed position, 方便用戶隨時通過標籤tag索引內容。

CTA button(“Get Started"和“See all topics")顏色使用綠色(#1A8917),color text的數量不多也不少

打開一篇Medium上的文章,上方的nav bar是雙層的,1st line是brand settings nav,2rd line是這篇文章的nav bar

文章正文在頁面中間,user attention可以完全集中在reading

左側固定的小邊框是writor的簡介,也符合Medium所說“Write, read and connect"的"connect"

文章底部是橫向排版的“更多文章”(“More From Medium"),方便用戶閱讀更多文章而深度使用Medium的產品

網站的最下方“Learn more"使用rgba(0, 0, 0, 0.9)背景色,字體顏色rgba(255, 255, 255, 0.98),非常modern和neat的質感

🍺思考;

・最重要的UX是讓用戶可以專注於使用產品。不要用不必要的設計和任何其他內容讓用戶分心,focus在產品的主要功能上。最好的設計是讓用戶在使用產品時,流暢出於直覺

・horizontally and vertically的排版間隔來,增加變化和趣味

・fixed position的內容需精簡

・閱讀性的產品,字體上使用顏色的數量需精簡。這樣整個頁面不會太過於花哨沒有重點