Yi Fan Chen's profile

Taiwan Scientific American Website: RWD Design Process

/// 專案名稱 ///
台灣《科學人》雜誌RWD網站企劃與設計

/// 專案角色 ///
網站企劃/UI/UX Designer/F2E

/// 專案目標 ///
將舊網站無痛改版成易於閱讀的RWD網站

/// 專案問題 ///
資訊細碎雜亂、缺乏視覺重點(包含重點不清楚、文章分類紊亂等問題)、閱讀經驗差(例如字太小而難以閱讀、手機閱讀經驗差等)

/// 提供策略 ///
重整資訊、歸納重點,在視覺上聚焦,提升閱讀經驗,打造「內容導向」網站。

/// 設計方法 ///
重整資訊的部分,我根據《科學人》網站與資料庫架構,提供可用、易用的架構,以符合業主希望以無痛方式改版,盡量以版面與前端為主進行修改。因此這部分的限制在於後端資料的複雜性高,根據資料架構與易使性必須取得平衡,在最少變動的情況下,帶給讀者符合直覺的使用經驗。
閱讀經驗則是此次設計上的重點,我參考了國內外網站營運模式及版面設計,提供兩種解決方案:「廣告導向」與「內容導向」。「廣告導向」的首頁以Yahoo!奇摩首頁為例,以廣告為營利主要來源,因此在版面上可以發現廣告是主要視覺焦點。而「內容導向」則已美國《科學人》網站及紐約時報(New York Times)網站為範例,試圖讓遠流主管們版面重點與營運方向有所關聯,因此版面設計並不是個人主觀意見,而是在設計方針與原則上是有所依據的。
最後遠流《科學人》雜誌改版的改版小組成員討論後決定以「內容導向」為主,希望《科學人》文章為全站閱讀重點。

​​​​​​​
/// 專案任務 ///
1. 改變網站架構
原本的網站架構是以雜誌單元結構(如:解讀心智、形上集⋯⋯等)為主,但雜誌訂戶畢竟是少數。為使大部分的讀者都能夠直覺地找到想閱讀的文章,我們將科學上的分類(如:醫學、物理⋯⋯等)為基礎,打造網站選單與網站架構。

2. 首頁版面數位雜誌化:
以文章為區塊的流動排版,確保網站文章在電腦與手機上均有良好的閱讀效果。挑戰在於手機上該呈現多少重要資訊,並考慮到手機閱讀文章時,適合先看到哪些資訊。

3. 打造良好的RWD閱讀經驗
考慮到多數人所使用的電腦與手機螢幕解析度做為主要測試的載具,主要使用者為常使用科學人網站的讀者及內部測試者。在設計文章頁版面時,調整圖文在版面內容呈現的樣子,並且真實測試者閱讀文章的閱讀經驗(使用者主觀感受)與閱讀理解速度(客觀結果),經過測試後,找到在不同載具間適合閱讀的圖文比例與文章樣式,例如:字級與間距,一行多少字時較易於閱讀,以及圖文配置的比例為何。

4. 改善訂閱雜誌方案的購買頁
挑戰在於原訂閱戶與新訂戶的方案如何在同一頁面呈現才不會過於雜亂或混淆,而後台可用的類別也是設計時的限制之一。討論連結後台系統可用的項目後,設計出直覺好用、易於操作的購買頁面,增加非訂戶的訂閱意願。

結案報告:點這裡
/// 設計成果 ///
舊版首頁:
新版首頁:
舊版手機網頁介面:
新版手機網頁:
介面:
/// 專案網址 ///
台灣《科學人》雜誌網站:
網站首頁:http://sa.ylib.com/
文章頁面:https://goo.gl/qNqDwp
方案頁面:https://goo.gl/SkSazN
/// 專案總結 ///
我們如何讓網站易於找到想讀的文章,打造良好的閱讀經驗,並達到內容導向的網站盈利模式?
1. 改變資訊架構
2. 透過版面視覺,影響讀者對網站的觀感。再經由電腦與手機上測試調整找到適合《科學人》文章的排版,以達到RWD的最佳體驗。
3. 在文章頁面中置入訂閱方案,我們重整方案頁,期望透過重新導向的方式,增加訂閱數,以達到讀者為主的盈利模式。
____________________________________________​

:: THANKS FOR WATCHING ::

ROXIE OLIVIA CHEN____<3

 ____________________________________________​

Taiwan Scientific American Website: RWD Design Process
Published:

Taiwan Scientific American Website: RWD Design Process

Published: