閱讀進度0%
Sep 9, 2020

【設計師筆記】網站改版心得:改版需要的不是創意,而是洞悉人心

文/ READr 設計 weiweihsu

在做 READr 改版的這段期間,應該是我畢生產出 prototype 最頻繁的一段日子,而且產出 prototype 之後,還需要不斷地找使用者來測試、訪談、反覆修正,才能逐漸確定哪些是版面上的必要元素。透過 prototype 確定必要元素後,接著發展設計風格,融入品牌精神,最終加入使用者回饋。透過搜集回饋的方式,讓 READr 能夠不斷地迭代下去。

製作 prototype 的軟體,最初選擇常用的 sketch,後來為了線上測試,才改用 figma。如果你恰巧也是設計師,讓我呼籲一下,千萬不要 sketch 做一半轉 figma,即使兩個軟體用起來很像,還是有些相應數值沒辦法百分百對轉,如果不幸地,你又是個完美主義者,光調那些東西可能就會耗掉半天以上的時間。

「實驗精神」從細節裡展現

還記得發展設計風格前,團隊討論出來的方向是數據與實驗精神混搭,所以找來參考的每個網站,都是以數據做為主要呈現,並且透過大面積色塊,強化現代與實驗精神,看到這些網站,我就大膽地做了個嘗試,不過,設計出來的結果因為偏離 READr 品牌形象太多,直接砍掉重練。

後來發現,所謂的實驗精神,其實並不需要在視覺上表現太多,而是要回歸到「媒體」這個身份,嘗試在傳統的內容網站架構下,表現出那麼一點點的不一樣。確定方向後,我挖出了一年多前 READr 改版提案時的設計稿,重新檢視裡面的元素,進行色系與版型的調整,產出獨具個性 A 版本與輕鬆悠閒 B 版本。

A 版本利用 READr logo 的招牌黃色與對話元素,以色彩、元素的重新配置,放大品牌形象,也使用強烈的對比色彩,凸顯出 READr 身為非主流媒體的一大特色。

B 版本則承襲 READr 2.0 特色,以圖片、專題為重點,拉大字元、區塊的間距,試圖緩和專題較為深沈的氛圍,又不失專業。

幾經討論後,團隊決定以 A 版本為主,但因為捨不得 B 版本的輕鬆感,在調整設計稿時,我默默地將所有字元間距都拉開,希望能用一點小改變,讓使用者閱讀起來更輕鬆,甚至看得更深、沈浸得更久。

凸顯品牌精神:協作與開放資料

最後來說說跟 READr 2.0 的差異吧!其實首頁呈現的內容差不多,主要是增加了數據與協作兩個區塊。在設計協作這個區塊時,突然想起當年政治獻金的資料協作活動,熱血的同事們,只要手邊沒事,就會幫忙確認資料,看到這景象的我,也就義無反顧地加入協作。這是被實際行動所吸引的例子,那麼,如果看不到其他人的行為,該怎麼吸引更多的人一起協作呢?直覺想到萬年不敗的口碑行銷,讓參加過協作的人,號召更多人來參與,眾人協作的畫面多麽青春啊!想到這裡,就擅自增加了一個區塊,讓參加過協作的人現身說法,希望能夠透過這種方式,讓更多人願意參與 READr 的協作活動。

另一個新增的區塊,就是 READr 最引以為傲的數據,其實 READr 一直都有開放資料,讓大家可以自行使用,但因為沒有特別推廣,只有少數人知道。因此這次在設計上的重點就是,試著讓數據本身當主角,在首頁佔有一席之地,試試看這樣的方式,能不能讓更多人一起來利用數據做出有趣的呈現。

改版的過程很長,有時候覺得看不到盡頭,但在某些特別有感觸的部分,又充滿了衝勁。很高興這次有機會和團隊一起進行本次 READr 改版,一次次的討論與調整,都讓 READr 網站越來越好。未來也希望正在看這篇文章的你,能夠多多給 READr 回饋,和 READr 一起走在成長的道路上!


最新報導