網頁設計公司的部落格
原文網址:http://blog.udn.com/technology/151001576
列印日期:2024/10/10
台北外宿節活動網站設計,桌上型電腦版網站與手機版網頁設計介紹
2020/09/27 16:48:50

宅旅行staycation是新興的旅遊觀念,意即不用跑遠,就是在地,來一趟小旅行省去機票花費; 說走就走;只要外宿輕旅包,不用扛行李; 睡眠保證,不用和時差對抗, 跟上了宅旅行的旋風,台北外宿節,期待民眾走進台北,深度體驗台北,給自己一個留宿台北的理由,感受一下Taipei Staycation的樂趣!




台北外宿節官方網站設計,桌上型電腦版網站與手機版活動網頁設計介紹


觀光旅遊帶來的人潮,與地方產業發展息息相關,也是刺激在地經濟發展,吸引青年歸鄉打拼,推動地方創生的利基。整合各地與眾人的資源,創造最大價值,共同發想台北市觀光發展方向。


這個活動網站設計由本公司進行製作,採用響應式設計並利用html5 canvas技術設計首頁特效,首頁整合jQuery與CSS3技術搭配canvas顯示多圖更換與水波紋效果。


不對稱的佈局


對稱與不對稱似乎是網頁設計過程中,一直要做的取捨。
對稱的和諧,和不對稱的差異,都是創造好設計的必須的手段。
響應式網頁設計模式是近年網頁設計一個最主要的趨勢,有許多人基於Bootstrap套件進行設計,以至於大多數的新創網站的佈局都是基於格子的概念,基於網格的設計確實有助於網站的佈局無論在什麼裝置上都可以保持秩序。
格子的概念用於對稱設計通常都用的不錯,但是不對稱並非人人都運用嫻熟。我們簡單聊聊網頁設計中的不對稱設計。
追求獨一無二的設計師通常想要打破這個秩序,隨機地放置設計元素打破格子的概念,這技術讓網站看起來更有創意,並且在未來的2021年會成為一個相當重要的設計趨勢。


首頁全後台管理


網站首頁是抓住網友的第一道關卡,有許多網頁設計公司、公關公司甚至專門設計一頁式網站,企圖在第一頁決勝,可見首頁網頁的重要性,為了要吸引消費者,我們設計的與滑鼠互動的canvas水波紋效果,並且每張圖片都可以由活動執行單位由後台上傳修改。


除了圖片外,我們規劃文字與圖片抽離的網頁,所有文字都是Google可以抓取的資料,文字由企劃人員自行管理,可以針對不同的活動變更不同的網頁文字內容。




圖片尺寸1024*768pixel





桌上型電腦版網站與手機版活動網頁設計作品-台北外宿節官方網站設計

圖片尺寸1024*768pixel




響應式網頁設計讓活動訊息更容易閱讀


活動網站最重要的功能之一就是發佈新聞,網頁設計考慮到手機使用者,針對不同螢幕裝置響應成方便閱讀的排版設計。


這個活動網頁設計由本公司進行建置,採用CSS3技術設計網頁,整合Google QR Code API即時顯示QR Code讓手機用戶直接掃描瀏覽。


超大字體


家中長輩在瀏覽網站文章時,常常因為頁面的文字太小,導致看的很吃力,雖然可以從「瀏覽器設定」將網頁縮放的比例調高一點,但可能會造成排版錯亂。
想要設計兼具美感及具有特色的網頁、調配屬於自己風格的網站,隨著近年網頁設計的趨勢,在設計上盡可能地將設計簡化以突顯主體,超大的字體或大膽的排版越來越受歡迎。
現代網頁設計的一大重點:字體樣式. 網站文字大小、字元間距、行高等,在現今偏向較簡潔版面設計,字級相關的細節大大影響著網頁整體的表現。
感覺生動是巨大字體的一大好處。你可以通過將其放在網站首頁上來引起網友對品牌名稱或業務目標的注意。 網友會很容易記住這些簡短易記的內容,並且再次拜訪。


網頁後台管理功能


網站內容是抓住網友的重要關卡,有許多公司甚至專門請文字工作者撰寫豐富的文字內容,企圖在內容決勝,可見網頁內容的重要性,為了要吸引消費者,我們整合可視化排版編輯器內容可以讓設計師由後台上傳修改,並且可以上傳貼圖,每張圖片都自動產生ALT文字標籤,以利Google抓取。


拆分佈局


借助拆分網頁內容的網頁設計技術,您可以在一個頁面上一次展示多個重要訊息,還能使網站看起來更有組織性。






活動網站整合社群分享設計


目前Line與Facebook是網友最常使用的社群媒體,整合這兩個網站的分享API讓網友可以在電腦版網頁與手機版網頁同時進行分享功能。



台北外宿節網頁內容分享至Line社群平台示意圖

圖片尺寸520*666pixel





台北外宿節行動版網頁內容示意圖

圖片尺寸371*752pixel




手機版活動網站設計


WARC 2019年報告顯示,到了2025年時,全球近四分之三(72.6%)的網路用戶將透過智慧型手機上網,相當於37億人,遠高於目前使用手機上網人口20億。


目前Line與Facebook是台灣手機用戶最常使用的社群媒體,整合這兩個網站的分享API讓網友可以在行動版網頁進行分享功能。


滾動視差網頁設計


網站設計中的視差滾動技術最初來自電視遊戲。它的特色在於在網頁滾動期間以不同的速度移動背景,進而產生類似3D的效果。在許多網路行銷公司的作品中也時常看見這類型的技術,滾動視差技術已經紅了很多年,2021年的影響力似乎還是不容小覷。