網站現況
南科管理局網站於今年一月重新設計改版,目前網站版面美麗大方,具設計感,主要服務欲設廠的投資者和園區從業人員及其眷屬,首頁整體大致可分為園區意象展示、最新消息、園區資訊、影片、各式重要連外資訊或網站、網站地圖等。有三項主要的問題,對於瀏覽與理解時會產生影響。
網站目標使用者分析
1. 投資廠商、園區廠商
有商業上的需求,主要為研發專利、投資資訊等。
2. 園區從業人員
生活需求為主,主要為瞭解交通資訊、園區生活、餐廳資訊等。
3. 園區附近居民
瞭解園區可提供之生活機能。
網站問題分析
問題1-主要目標與功能不明確
首頁呈現之資訊與功能過少,整體偏重形象呈現,使用者較難取得相關資訊。
問題2-提供的資訊過於表淺
僅提供聯絡窗口資訊,浪費了網站可解決瀏覽者問題的便利性,以致使用者者瀏覽過一次就不會再瀏覽。
問題3-圖像、介面配置凌亂
部分圖像風格不一,不利閱讀;介面配置較不直覺。
導入目標與策略
為提升南部科學園區現有網站的易用性與易讀性、便利性,讓使用者能夠更輕易操作網站或是從該網站取得資訊,並保有剛改版之介面設計。依據南部科學園區現有網站進行UI/UX調整,期望在修改的最小幅度內,以形象、功能兼具之網站為目標,保存既有形象;解決各目標族群需求,並更進一步符合行動裝置的易用性。
導入目標
•提升南部科學園區網站之易用性、優使性。
•使⽤者能夠更輕易了解南部科學園區或是取得資訊。
•呈現具品牌渲染性與一致性的風格形象。
•提升網站於行動裝置的易用性。
導入策略
•整合重複功能,增加露出必要資訊或功能。
•增加網站頁面內容,讓使用者可以透過網站初步找尋到相關資料,增加對網站的信賴度,減少直接跳轉離開或僅使用google搜尋才找得到資料的情況。
•根據不同目標對象,將功能區塊加以分類配置。
•首頁大圖改為輪播圖片,增加園區資訊能見度。
•調整介面,以符合使用者操作經驗。
•增加圖像或圖像化的應用:如 icon、圖表、圖形等。
•減少條列式的⽂字的使⽤。
導入手法
透過既有網站設計分析,將南科管理局形象設定為活潑、親民、科技感,設計調整著重於整體版面風格的一致性,整理區分各主題區塊,使各主題區塊更加鮮明,並透過版面調整與造型、色彩應用,加強操作介面之邏輯以強化各項大小功能的使用性。
視覺風格導入目標
一、延續既有設計風格
二、加強版面留白呼吸空間
三、形象Banner減少過多的造型裝飾版塊
四、民眾專區,突破格線框架增添趣味的版面設計
五、簡潔的南科資訊數據圖板
六、導入品牌意識
視覺風格導入解析
一、延續既有設計風格:
既有的網站設計風格清新亮麗且帶有科技感,符合南部科學園區之品牌意象,是表現很好的設計,故此次改版建議將原有風格延續。
二、加強版面留白呼吸空間與大標題設計:
加大區塊與區塊之間的留白距離,以提升閱讀瀏覽舒適度與辨識度,利用大字級的標題呈現,清楚切割文章與版面段落。
三、形象Banner減少過多的造型裝飾版塊:
標誌下方的裝飾性版塊,在部分較小的螢幕裝置呈現時,會遮蔽到於其位置下方的Banner,進而影響Banner圖像的展示,產生Banner圖像破碎的感覺(如下圖),故建議將此區塊的裝飾版塊移除,修改為較為單純的頁首設計。
四、民眾專區,突破格線框架增添趣味的版面設計:
近年國際網站設計趨勢,皆採取突破既有網頁隔線框架的破格設計,於南科網站的民眾區域採取此設計以增添閱覽南科網站時的趣味性,真實環境圖吸引使用者的目光,更能讓使用者了解南部科學園區的風情;搭上清楚的文字內容,在使用經驗上能更佳的提升閱覽經驗,並加深對此網站的印象。
五、簡潔的南科資訊數據圖板:
採簡潔的圖塊與藍綠色的主色,作為數據圖板的視覺基礎,以延續主要風格的設計。此外區數據內容的採集為網站中流量的排名前三的數據資料。
六、導入品牌意識:
網站經營需有清楚的品牌意識與形象營造之目標,網站若進入運營階段,能透過圖像與文字呈現加深目標對象對於此網站的印象。建議可以增加更多園區風景景緻與街角美學,抑或是加入人文氣息之圖像,感性與理性兼具,此外選擇圖片需以美感美學為重要的選圖指標,好看的照片能渲染使用者更快速的進入網站所想傳達的情境,並能在使用者的腦海中留下良好的品牌印象。
色彩計畫
網站色彩可大幅度增強使用者對於網站閱覽的印象,色彩意象更能詮釋傳達品牌的精神與論點,建議延續既有網站之主要配色,部分加重使用比例於各式按鈕和具提示、強調功能之項目。 原網站的主要配色為藍色(#2d83ec)漸層至綠色(#03b178)。
文字規範
網站的文字更為清晰與簡潔,建議整體使用無襯線的黑體字,加強標題粗體字的粗度,並依據現有網站之文字大小微調:
1.內文-16px
2.選單-24px
3.主題區塊標題-40px
4.小標題-24px
為了提升網站閱讀性,讓使用者瀏覽文字時更加舒適,更符合人的閱讀習慣,文字段落的行距建議訂定於1.2-1.4倍之間,段落的前後盡量避免標點符號與落單的字。
導入成果