EGON SUNG

< back

HKCNEWS

UX、UI 設計、前端開發、品牌管理

2016 - 2022

因政治壓力,hkcnews.com 已於 2022 年 1 月停止運作。

眾新聞(CitizenNews)是一家於 2017 年在香港成立的獨立群眾集資網絡媒體。有感於新聞自由日漸萎縮,十位資深新聞工作者共同創辦了這間公司,希望打造一個能夠捍衛新聞專業、培育年輕人才的平台。眾新聞專注於本地法律與政治議題的深度分析,而非許多另類本地媒體慣用的短平快報導。

Mockups of hkcnews.com 2.0

HKCNEWS 2.0 & 3.0

2017 - 2020

原本的網站分別外包給兩家不同的公司——一間設計公司與一間開發公司。這是老掉牙的故事:設計師不懂網站是怎麼建置的,工程師也抓不到設計中真正重要的細節。這間設計公司是頗受尊敬的傳統平面設計公司,他們提供的網頁設計其實是 PDF 裡的圖片。開發團隊再拿著這些 PDF 建出整個網站。

選單和按鈕看起來都不像可以互動,也很少被點擊。佔據大部分版面的無限捲動功能常常出錯。整體看起來就像是從 90 年代穿越過來的網站。

競品分析

我比較了香港三家不受財務或中國政府政治壓力影響的主要繁體中文媒體。

Apple Daily Logo

優勢

  • 讀者群龐大:《蘋果日報》是香港最受歡迎的數位新聞媒體,每日讀者超過 300 萬人。

  • 報導範圍廣泛:涵蓋本地新聞、國際新聞、娛樂、體育與生活風格等多元主題。

  • 內容吸睛:《蘋果日報》以聳動標題與吸引人的內容聞名,經常在社群媒體上爆紅。

劣勢

  • 政治立場鮮明:《蘋果日報》以親民主派立場聞名,這可能讓政治立場不同的讀者卻步。

  • 煽情化:吸引人的內容雖是優勢,但《蘋果日報》也常被批評將新聞事件過度煽情化,重視點閱率勝過準確性。

  • 小報式報導:《蘋果日報》經常被指以小報風格報導新聞,這可能讓部分讀者對其可信度打折扣。

Stand News Logo

優勢

  • 獨立報導:《立場新聞》以獨立報導自豪,這在香港媒體生態中相當難得。

  • 高品質新聞:專注於深度報導與調查性新聞,贏得讀者與同業的讚譽。

  • 關注社會正義:《立場新聞》高度關注社會正義議題,引起許多讀者共鳴。

劣勢

  • 讀者群較小:《立場新聞》的讀者群比《蘋果日報》小,可能限制其影響力。

  • 報導面向較窄:雖然《立場新聞》擅長深度報導,但主題範圍比其他媒體窄,可能限制部分讀者的興趣。

  • 財務資源有限:《立場新聞》仰賴捐款與訂閱維持營運,這可能限制其擴張與投資新計畫的能力。

Initium Media Logo

優勢

  • 國際視野:《端傳媒》提供深度的國際新聞報導,在香港媒體生態中獨樹一格。

  • 高品質新聞:與《立場新聞》一樣,《端傳媒》以高品質新聞聞名,擁有忠實讀者群。

  • 數據導向報導:《端傳媒》運用數據與科技支援報導,使其有別於其他媒體。

劣勢

  • 讀者群最小:《端傳媒》是三者中讀者群最小的。

  • 報導面向較窄:與《立場新聞》類似,《端傳媒》的主題範圍比其他媒體窄,可能限制部分讀者的興趣。

  • 在地內容較少:由於《端傳媒》著重國際視野,可能不像其他媒體那樣全面報導本地新聞。

眾新聞作為一個提供深度新聞報導的平台,同時也開放讀者投稿,文章會先經資深記者審閱編輯後刊出。眾新聞後來也成功打造了幾個獨特的迷你互動網站,以數據為基礎、搭配調查報導的敘事方式。為了保持中立、聚焦主題,網站也需要明確區分新聞報導與評論意見。

回饋意見

2020 年,由於 2019 年香港的社會運動,越來越多香港市民開始關注新聞,我們的讀者群與捐款都大幅成長。這為我們帶來了更多資源,而隨著運動逐漸平息,我們也有了時間可以全面改版網站。

字體排印

有些團隊成員認為字體排印可以更有變化,例如在不同情境下交替使用無襯線與襯線字體,呈現更豐富的層次。

色彩

漸層色彩雖然有助於在競爭對手中脫穎而出,但也有人覺得太過強烈、顯得俗氣。

可用性

原本的網站問題不少,某些元素的位置並不合理。使用者留存率極低。大多數使用者都是透過社群媒體貼文進站,很少直接進入首頁。

分類

需要一個更直覺的方式來重新分類文章,並搭配相應的色彩標示。

易讀性

我們的讀者與團隊成員年齡層相當多元,從二十多歲到六十多歲都有。文字大小與標題長度一直是團隊內部持續討論的議題。

2.0

使用者流程與線框稿都相當直覺明瞭。網站本身以無限捲動的首頁為架構,呈現可排序、可篩選的文章瀑布式排版。選單可進入特定文章分類、設定頁與捐款頁。這並非全面改版,而比較像是為原網站換上新外觀——重新調整了間距、字體排印與互動元素。

Wireframe for hkcnews.com 2.0

3.0

在第三次迭代中,團隊推動了全面改版。我決定走極簡風格,只在真正需要的地方強調視覺層次。

Screenshot of the prototype of hkcnews.com 3.0

分類

為網站上所有文章建立清楚、有區別性的分類。

主色

新聞

新聞

News

次色

評論

評論

Opinion

博客

博客

Blog

中國組

中國組

China Team

影片

影片

Video

互動新聞

互動新聞

Interactive News

標籤

國安法

National Security Law

字體排印

在不破壞整體呈現一致性的前提下,稍微加入更活潑的字體排印方式。選用 Noto Sans 與 Noto Serif,是為了兼顧英文與香港繁體中文的多樣性。

整體美學

整體網站設計的視覺風格以傳統報紙為基礎,並加入響應式設計與數位易讀性,讓它更貼近現代。

眾新聞不幸停運的事件,讓這個設計未能完全實現。即便如此,能在一個我從小成長的地方,於社會與政治情勢如此敏感、動盪的時期,與一群充滿熱忱的新聞工作者共事,對我來說是莫大的榮幸,也讓我獲得了寶貴的經驗。我做過的許多作品如今已遭到審查,但我相信自己當初所做的是對的,也盡我所能保留了備份,希望能讓真相繼續留存。

品牌管理

2017 - 2018

由於資源有限,前兩年我是唯一的設計師。每週要產出數十篇文章的圖像素材,許多記者不得不自己製作搭配文章的圖片。因此,早期許多圖像與社群媒體貼文製作粗糙,也未能維持品牌一致性。

訪談

我決定先找資淺記者了解他們的工作流程,因為他們正是需要自己製作圖像、且對眾新聞品牌較不熟悉的一群人。

時間限制

他們常常只有不到半小時能製作圖像,大部分時間都在城市裡奔波採訪或寫稿。需要一個方法讓他們能快速產出素材,同時適用於眾新聞網站與社群媒體貼文。

技能

幸好大多數年輕團隊成員與新鮮人都熟悉科技,在新聞系就讀時修過數位媒體課程、學過繪圖工具。只要工具不會太複雜,他們都能輕鬆上手。

素材分發

令人意外的是,大多數新進員工根本不知道品牌素材放在哪裡(其實存放在公司的 NAS)。他們甚至不知道原本的品牌指南(一份 PDF 檔)存在。此外,團隊成員常透過 WhatsApp 互相傳送圖片,經過層層壓縮後畫質嚴重流失。

品牌指南網站

我建立了一個品牌指南網站,讓團隊成員只要能上網,隨時隨地都能取用。網站上有規則讓大家遵循,維持品牌一致性,同時也能取得所有需要的素材。

預製 Photoshop 範本

我製作了預先設計好樣式的 Photoshop 範本,為團隊節省時間。

「迷因製造機」(Mememaker)

由於 Adobe 全家桶對低使用頻率帳號有限制,一位工程師建議改用「迷因製造機」工具來進一步節省時間。團隊成員可以遠端使用,加上並調整 Logo 與文字位置,幾分鐘內就能準備好發文。

大多數團隊成員最後並沒有真正使用這些工具。類似的狀況也發生在我們試圖讓團隊改用 Slack 取代 WhatsApp 做內部溝通時——舊習慣讓大家對新工具卻步,而團隊內也缺乏能要求大家使用這些工具的權威。當時我雖是資深職位,但並非創意總監,沒有足夠的權限去要求大家配合。2019 年初,我轉為兼職身份去探索其他機會,同時仍持續協助團隊。

香港反送中運動重大事件互動網站

前端開發

與一位希望保持匿名的本地插畫家合作,我們將插畫家原先製作的大型資訊圖表海報,轉譯為一個互動網站。海報與網站呈現的是 2019 年 7 月 21 日在香港元朗發生的事件。

因香港政府對新聞自由的威脅,此專案已作修改。

Human
Rights
Press
Awards

Infographic poster of what happened in Yuen Long on July 21, 2019

社運抗爭資料庫 – HKCNEWS

設計 + 前端開發

一個獲獎的資料庫,記錄了 2014 年及 2019 年前歷次運動中每一位被捕人士的資料。

因香港政府對新聞自由的威脅,此專案已不再上線。

Mockup of 社運抗爭資料庫 社運抗爭資料庫

CE Election 2017 – HKCNEWS

設計 + 前端開發

這個小型互動網站根據社群媒體上針對每位候選人的即時輿情數據設計開發而成。最終,輿情最負面的候選人當選,並引發了香港史上規模最大、持續超過半年的抗爭運動之一。

因香港政府對新聞自由的威脅,此專案已不再上線。

Mockup of Chief Executive Election 2017 data news
Typographic design 1Typographic design 2
Typographic design 3
illustration design 1illustration design 2illustration design 3illustration design 4illustration design 5illustration design 6
HKCNEWS | Egon Sung