• EN
香港:(852)3749 9734
廣州: (020)3834 3713
info@inspirr.com

新聞資料

網頁設計案例分享:Twitter網頁版的設計改版分析

移動端時代,雖然Twitter的移動客戶端已改版多次,但對PC端網頁設計改版真的異常克制。近日,Twitter終於抵擋不住改版的「誘惑」,對PC端大刀闊斧,從裡到外翻新整個網頁設計。雖然網站改版總會對用戶帶來不適應不理解,以及各種負面反饋,但對網站而言有時又真的不得不做。下面,香港網頁集團將為大家分享「Twitter網頁版的設計改版分析」,希望能給各位有不同的啟發。

網頁設計案例分享:Twitter網頁版的設計改版分析

網頁設計案例分享:Twitter網頁版的設計改版分析

從整體視覺風格來看,新版Twitter的PC端網頁設計給人更現代的感覺,且和移動端版本設計保持一致,其改版內容包括:

網頁設計案例分享:Twitter網頁版的設計改版分析

1. 原本置於頂部的導航欄,被功能性更強的左側欄取代,承載起主要導航功能。其中,原本被隱藏的「書籤(bookmarks)」和「列表(lists)」,這次改版直接顯示在側邊欄中。

網頁設計案例分享:Twitter網頁版的設計改版分析

2. 舊版的「熱門事件」存在感較低,於第一屏的左側側邊欄中,只有標籤,容易被人忽略;新版則單獨佔據右側側邊欄「Trends for you」,且以Twitter中標誌性的標籤(Hashtags)的形式呈現。此外,搜索欄同樣被挪到右側邊欄,並置於「Trends for you」的頂部,其巧妙之處在於:當用戶搜索內容時,搜索結果直接覆蓋在右側,而不會佔據中間的主要信息流。

網頁設計案例分享:Twitter網頁版的設計改版分析

▲ 舊版Twitter推文彈出框

網頁設計案例分享:Twitter網頁版的設計改版分析

▲ 新版Twitter推文

3. 新版Twitter不僅在布局上更扁平,在交互上也有相應的變化。舊版Twitter中,當點擊具體推文條目時,內容會以彈窗框形式呈現;新版則會在當前層中直接擴展開顯示,不會彈出,主要信息流不會因此被覆蓋,整個Twitter變得開闊,整體融合感和有機感也變得更加強烈。

網頁設計案例分享:Twitter網頁版的設計改版分析

4. 新版Twitter提供更豐富的個性化設計體驗,雖然舊版Twitter也可定製字體大小色彩,之前都是隨意設置,這會讓很多並不熟悉的用戶難以控制好文本和色彩的對比度,降低整體視覺的愉悅度;新版的配色和文字大小經過調校後,能給用戶帶來足夠的選擇空間,同時還可保持整體視覺體驗上的愉悅性設計。

網頁設計案例分享:Twitter網頁版的設計改版分析

5. 潮流最IN的「Dark Mode」也隨着本次改版一併大包更新。關於深色模式的控制,Twitter和其他平台略有不同,其所設計的Dark Mode方式有兩種:「昏暗(Dim)」,其背景色為深灰;「熄燈(Light Out)」,其背景色幾乎全黑。

任何社交媒體平台發展到某一階段時,都可能會面臨各種各樣問題,Twitter同樣不例外。因此,為了滿足用戶不同需求,Twitter改版也是不得已的措舉。