網頁製作 網頁製作

網站規劃與設計上課補充教材

網站規劃與設計 > 課程內容 > 期末報告物件繳交流程

期末報告物件繳交流程

經過本學期的一堆 HTML / CSS 的相關技術訓練,你應該會有 (1)一個個人網站的規模資料,當然得要看你自己的設計技巧。 另外,我們還需要 (2)分組進行實際的店家介紹。這個店家介紹的目的,就是讓你跟實際的業主接洽,看看接案子的時候有哪些需要注意的部份。 這個部份再要求你依據底下的內容,提出關於你店家的需求,同時替你的業主分析他所需要的項目有哪些喔!
  • 14.1: 分組與主題設定
  • 14.2: 實地採訪後的網站分析規劃
  • 14.3: 實地採訪分析報告
  • 14.4: 網站雛型以及測試階段報告
  • 14.5: 資料繳交行程 (期末報告前,至少需要 4 周的工作量)

14.1: 分組與主題設定

由前面的許多章節,我們大概知道了網站製作一開始最麻煩的就是那個版型的製作,版型的製作需要搭配業主的需求、目標客戶群的能力, 以及可能產生的 UI、UX 操作的親和力等等基礎知識與技術,這部份前面的章節都談到非常多了!等到版面設計完成之後,大概就是一堆素材的應用! 而素材的取得最重要的,其實就是所謂的『著作權』了!請特別注意底下的說明:

  1. 任何資料一經製作即享有著作權 (不需要宣告、不需要任何動作!);
  2. 具有著作權的資料,僅可合理使用,如:
    • (1)研究性著作可合理使用的範圍較大
    • (2)所使用的質量不可超過原著作之合理比例
    • (3)使用的部分並不會對原著作產生現有價值的影響等等
  3. 擅自以公開口述、公開播放、公開上映公開演出、公開傳輸、公開展示、改座、編輯、 出租等方法侵害他人之著作財產權,處三年以下有期徒刑、拘役,或併科新台幣七十五萬元以下罰金
  4. 著作內容含有圖形、攝影、電腦程式、表演等
  5. 一般著作權存續為 50 年。
  • 網站設計與發展的注意事項 (必須要找到你的業主!)
  1. 定義:專案的目的與目標觀眾 (業務需求、內容/素材彙整、內容/風格訊息、專案訊息發佈需求)
  2. 建構:專案流程圖 (專案結構/頁面繪製)
  3. 設計:設計圖樣、設計預覽、重新設計、產生分鏡腳本
  4. 建置與測試:專案製作、技術測試、可用性測試等
  5. 導入:推廣計畫、專案上傳

下週報告的重點著重在第一點『定義』方面,為了完成期末報告,本班必須要處理一個大型專案,該專案可以有 10 個小專案的網站建置需求, 同時,必須說明每個小專案的目標觀眾大致為何 (男女?年齡?宗教?教育水準?慣用語言?資訊技術能力?等等),同時, 需要說明大致的圖像素材來源 (怎麼拍?是否可能容易具有肖像權的問題?是否需要店家的同意書?),都需要進行討論。

根據上述的目標與客戶的需求,開始設計需要使用的資訊技術,包括是否使用 PHP?是否需要大量的 CSS?網站是否具有大頻寬? 網站的容量是否允許本專案的進行 (如果無法提供大容量,則你的數據資料是需要壓縮?還是需要外掛?例如放置到 youtube 上等等), 討論的素材與文字比例是否合乎一般設計?預計投入的時間 (要規劃採訪的時間,採訪的次數等) 以及資訊領域的設計時間 (去背、圖像後製、 網站的設計等等)。

  • 一個簡易的範本

底下提供一個簡易的主題發想的範本,同學們可以根據該範本自行根據自己小組的討論規劃出想要推銷的網站企劃書, 並於下週請組長上台報告相關的資訊 (不要額外製作其他的簡報資訊,直接透過本章最後的作業資訊,直接繳交到組長的網站資料內即可)。

前言:

目前崑山附近的許多鄰里,其實各有各自的特色,而且鄰里之間其實可能不會很清楚知道附近里民之間的一些活動與習俗。 此外,光是永康區就有 30 多個里,各個里的區域內,應該有許多的隱藏板美食、觀光景點與歷史故事、神奇傳說等, 若能將這些資訊進行統整,對於里長或者是整個里民的生活傳承來說,也應該具有相當多的好處! 至於永康區的各個里聯絡資訊如下所示:

主題:台南市永康區各里民情風俗與美食餐飲介紹

根據上述的說明,本年度期末報告建議各組分別與永康區 (或其他台南市的分區) 的各里里長聯繫,並與里長強調, 本組將暫時免費的提供各里的網站建置介紹,僅需要里長 (或服務區的其他協助人員) 協助我們組進行里的介紹, 預計進行的介紹包括有:

  • 本里的歷史-包含曾經發生過的大事件與處理方式
  • 本里的特殊景點-比較特別的,可以提供大眾來觀光的
  • 本里的廟宇歷史與特色-實地走訪廟宇拍攝與介紹
  • 本里的隱藏美食-只有在地人才知道的
  • 本里的特殊人物-有點類似名人介紹
  • 本里觀光時的行程安排-包括食宿、車程、交通工具建議、一日遊的時候可以搭配的週邊景點(比較熱門的台南景點)
  • 其他里長或里民們建議的事項分析歸納。

為此,請各組立刻分配各自的里,以進行期末報告的分析。同時,下週請自行與里長聯繫,並開始採訪、拍攝、後製等動作。 同時,各里的里長資訊如前言的連結,至於各里的位置則請參考 google map 自行搜尋的結果。

素材彙整

由於預計進行各里的介紹,因此素材取得的方式主要為與里長、里民之間的採訪,以及實地走訪 (真的是用走的) 拍攝的照片與影片, 當然,需要進行後製才有比較妥當的展示結果。此外,也將經由與里長、里民的介紹,看能否從里長辦公室取得一些比較珍貴的歷史照片, 經過本組的掃描或重新拍攝,進行數位化的典藏,以利保存在網站上,提供未來里長、里民向外部介紹時的一個依據。

但是由於某些照片可能具有著作權或者是肖像權的爭議,建議拍攝時一定要詢問擁有者的意願。若對方有意願,但是有點遲疑時, 可以給予授權書的簽訂,讓該資料授權本組應用於網站製作,但不可用於其他地方,以使擁有者產生較大的提供意願。 預計素材彙整將會有相當大量的照片、圖片與歷史文件資料,採訪的影片資訊等,這都需要後製者的協助。

網站風格

主要為本組自行規劃,但會與里長或者是里民討論,看看是否有更符合該里的特性。包括網站的版型建議、網站的配色風格 (古色古香、進階前衛等), 另外,亦將大量的採訪後,將口述的資料轉為文字介紹,最終變成數位文字放置於本組的網站上。這都需要與里長實際聯繫過之後, 才能夠進一步說明。

目標客群

本網站的建置主要在提供永康區各里一個可以彙整自己里的重點特色的功能,因此目標客群主要為該里的里民,由於里民們的年齡可以較高一點點, 因此呈現的風格應該要稍微滿足長者的瀏覽習性,包括文字可能要大一點,可能需要有較大且叫明顯的按鈕提供長者點擊, 此外,由於網站還包含了美食、食宿旅遊資訊,因此,也將一部分客群定義在觀光客或背包客上面,因此提供的資訊需要較為完整, 同時也應該要提供資訊的『時間』,亦即該資訊都是本年度的資料,要加上採訪日期較佳。

投入的時間

由於預計實地走訪該地,因此需要特別注意採訪的次數,尤其需要里長協助時,應該要特別注意禮貌與採訪時間的準時行為, 以讓里長、里民、住家願意提供本組較為特色的資源。本組預計採訪里長一次,請里長協助帶領至廟宇兩次,前往採訪隱藏版美食數次, 故現有人力,將會在週末時,或夜晚時,前往採訪,同時考慮里長的服務時間,將於本組星期一至五沒有課的時間,前往採訪里長。 此外,若里長有疑慮時,將請系上主任提供網站製作的採訪證明,以利本組進行實際訪談。

本組預計分配工作

  • 組長:XXX(4060CXXX),主要負責整組的網站製作進度規劃,協調各成員的工作狀態,聯繫廠商,主要素材的取得等,同時作為對外的窗口, 提供里長聯繫的主要負責人。
  • 組員:YYY(4060CYYY),主要負責網站設計,包括版型設計,CSS搭配導覽列的規劃,將素材 (文字與照片) 放置到網站,並且測試網站的可用性
  • 組員:ZZZ(4060CZZZ),主要負責實地採訪拍照、攝影、美編後製、圖片壓縮與上傳到 youtube 攝影內容等任務。
  • 組員:WWW(4060CWWW),主要負責網頁特效部份,包括 javascript 的圖片特效、表單製作的特效情境等等任務。
  • ....

另外,在開始未來的網站規劃之前,底下的連結你應該要瞧一瞧,仔細看看建置網站應該如何設計比較妥當:

14.2: 實地採訪後的網站分析規劃

通常網站製作者自己想的,跟業主或實際採訪者,或者是最終討論出來的目標客群都可能有些誤差,因此在上週討論過實際的各里資訊後, 應盡快與各里的里長或負責人聯繫,並且進行過初次的採訪。採訪的內容與 14.1 的企劃書相近,你可能需要列印你的企劃書給業主或里長查閱, 有書面資料是比較適合討論的。

討論時,你可以提供底下的幾個資料來看,讓業主或里長有較為清楚的概念:

網站需求分析:

業主預計使用此網站進行什麼目標?

  • 塑造本里的形象
  • 增加觀光客源
  • 增加美食區與食宿民眾的經濟收入

網站的重要與次要目標

  • 提供本里重要的歷史資料、重要的文獻資料等
  • 提供本里各項旅遊資訊與觀光行程安排規劃資訊
  • 提供本里各重要據點的聯繫方式

網站的建置重點

  • 以本里的特色為主,進行觀光推廣,而非單純的里長辦公室簡介
  • 需要提供正確的資訊,因此每筆資料都需要列出建立的時間
  • 提供 FB 或 IG 等流行的社群連結 (可能需要幫助里長建立粉絲團或社團)

再者,需要跟里長說明或討論一下,可能瀏覽這個網站的主要使用者的資訊,包括年齡、資訊技術、男女比例等

使用者特性分析:

預計預設的主要使用者

  • 里長辦公室成員與里民
  • 負責聯繫本里的台南市官員

可能的潛在使用者

  • 對於本里美食有興趣的觀光客
  • 經過台南市重要景點時,可能會來住宿的觀光客
  • 來本里廟宇拜拜的進香團團客

這些使用者可能想要迫切知道的資訊

  • 里民們需要知道里長辦公室的服務據點、服務內容與近期的活動規劃等
  • 觀光客可能需要知道本里的重要觀光、美食、食宿據點等資訊

大部分使用者可能具有的資訊技術

  • 里民可能不會電腦,但是會用智慧型手機上網瀏覽
  • 觀光客背包客主要大部分都是手機或平板瀏覽
  • 但是預先查詢時,潛在客戶可能都是使用桌機或筆電查詢(因為較為方便快速)

你也可以透過底下的 PDF 連結資料,分析不同的網站目標:

  • 網站需求分析:重點在強調你的『商品』要如何呈現,並且與其他同質的網站做區隔(事前分析);
  • 使用者特性分析:針對使用者的年齡、習慣、身份、需要的智能等先進行分析;
  • 本組內部討論資訊

在完成與里長或業主的討論之後,各組內部應該有比較明確的網站製作方向了,包括網站風格與版面配置等等,還有素材大小等等,都應該較為明確了。 此時,開始小組內部討論,進行本組的資源分析,主要的分析方向大概有:

小組資源分析:

小組預定資源計畫

  • 投入的資金:
    • 一次採訪美食每人大約花費 150 元用餐,並且協調店家給予拍攝各個餐點,預計採訪 3 次。
    • 每次採訪均須騎車前往,因此需要花費汽油費用約 50 元每次
  • 投入的人力: 本組所有組員,其中以採訪組 (組長或其他人) 留下聯絡方式給里長以及其他廠商
  • 投入的時間:
    • 包括 2 次周間白天的里長採訪、 1 次里長辦公室的素材製作、 3 次美食及食宿與廟宇的實地採訪 (應該是週末)。
    • 採訪完畢之後,開始網站的製作,素材後製需要 5~10 個工作天,採訪文稿打字彙整需要 2 個工作天, 網站製作版型需要 3 個工作天,實際將資料彙整進入網站需要 5 個工作天。...

小組成員分析

  • 組長,專長 XXX,實際負責 XX
  • 組員,專長 XXX,實際負責 XX
  • ...

小組對外窗口

  • 主要負責人手機留給里長
  • 小組成員建立額外的 FB 社團或者是 Line 群組,並加入里長、重要里民、店家等

小組內部與外部測試人員 (實際列出姓名)

  • 組員 XXX :進行測試可用性,包括 UI 界面是否合乎使用者操作習慣等
  • 里長 XXX :進行測試可用性,包括整體網站風格是否合乎原本的預期目標
  • 店長 XXX :進行測試可用性,主要是看本身的資料是否正確?以及素材是否合乎使用規範等。
  • 班上同學 XXX :進行測試可用性,交叉分析,看看本網站是否能夠更完整。
  • 班上同學 XXX :進行測試可用性,交叉分析,看看本網站是否能夠更完整。

你也可以透過底下的 PDF 連結資料,分析不同的網站目標:

  • 組織資源分析:為了這個案子,公司打算投入多少人力物力?物力又包括哪些等等;
  • 建置組織成員分析:那你的單位有沒有足夠的戰力呢?如何進行分工?組長是誰?開會時程等建置;
  • 建置技術規格分析

小組內部分析完畢後,也需要針對我們的網站建立所需要的資源進行分析。主要的資源可以使用底下的資料來討論:

建置技術規格分析

網站所在伺服器建置需求?

  • 是否選擇自己建立伺服器主機?
  • 是否選擇雲端虛擬機器?
  • 是否選擇雲端虛擬主機 (僅有網頁空間,可能不具備 PHP 與資料庫支援)?
  • 尋求外部協助 (鳥哥已經幫大家做好了)

所需要的硬體分析

  • CPU : 2 顆、2GHz 以上等級
  • RAM : 至少 2GB 以上等級
  • HD : 至少 500G 以上等級
  • NET : 至少傳輸可達到 60Mbps/20Mbps 的頻寬等級

所需要的網址列

  • 是否自行申請?可以參考 hinet 的網站介紹:https://domain.hinet.net/
  • 鳥哥提供的是: XXX.ykd.vbird.tw 這樣的網址,請提供 5 個可能的網址名稱,並讓業主溝通同意
    • 先說明 ykd 為 yongkang district 永康區的英文縮寫。
    • foot.ykd.vbird.tw
    • temple.ykd.vbird.tw
    • ...

還需要提供的技術 (有搭配建立資料庫才需要)

  • 外部 FB 連結
  • 內部討論區建置
  • 使用會員管理系統
  • 使用 PHP 建立投票機制
  • ...

你也可以透過底下的 PDF 連結資料,分析不同的網站目標:

  • 建置技術規格分析-1:先思考需要用到什麼技術?這時需要的服務、程式語言、使用伺服器硬體有哪些?
  • 建置技術規格分析-2:那你的網站有多少頻寬可以使用?要不要託管?有沒有技術能力自己維護?
  • 建置技術規格分析-3:這個與軟體較有相關性,不同的機制會用到不同的軟體技術, 不同的軟體技術所使用到的硬體資源又不相同,所以這裡當然要事先進行分析;

14.3: 實地採訪分析報告

要訪談之前,總是需要有些資料才好!這樣才不會天馬行空的亂做。因此,訪談時,請先想好你的分組目標是什麼?要達成此目標需要多少素材的質量? 文字槁需要錄影錄音嗎?還有重要的分項討論等。以本次永康區各里的介紹來說,應該可以準備底下的問題:

  • 本里的歷史-包含曾經發生過的大事件與處理方式
  • 本里的特殊景點-比較特別的,可以提供大眾來觀光的
  • 本里的廟宇歷史與特色-實地走訪廟宇拍攝與介紹
  • 本里的隱藏美食-只有在地人才知道的
  • 本里的特殊人物-有點類似名人介紹
  • 本里觀光時的行程安排-包括食宿、車程、交通工具建議、一日遊的時候可以搭配的週邊景點(比較熱門的台南景點)
  • 其他里長或里民們建議的事項分析歸納。

如果以店家的觀點來看,你可以增加許多問題,包括:

  • 替店家詢問『開店宗旨』、『開店過程辛酸』、『店家歷史』、『有趣的經歷』
  • 詢問店家『產品介紹』、『特殊產品』、『店長推薦』等等重要產品項目
  • 詢問店家是否『需要設定 logo 』以及相關的宣傳品,例如海報設計等可以替店家著想與規劃
  • 詢問店家是否可以『採訪錄影』、『產品拍照後製重繪』、『能否公開訪談記錄』等資訊~(這些資料可以經過後製放在產品上!)
  • 最終產生網站地圖囉!

網站地圖有許多格式,你應該要繳交底下兩種格式才好: (第七章已經講過,記得回去看一看)

習題的完成示意圖
習題的完成示意圖

上述資料處理完畢之後,你應該要開始製作第一個網頁的版型,小組初次討論版型的相關資訊,可以透過第 7 堂課 balsamiq 的繪圖資料製作! 例如底下的圖示情況來展示你的版型。透過手繪的草稿方式也可以!沒問題!

習題的完成示意圖

你也可以透過底下的 PDF 連結資料:

14.4: 網站雛型以及測試階段報告

你的網站開發應該具有一定的雛型了,但是到底效果如何?所有的連結是否正常運作?素材與文稿的資料量是否符合當初的預期? UI 界面是否符合當初的規劃?這都需要開始進行測試了。因此,本週的最重要目的,就是將網站的基本雛型、所有的按鈕通通設計出來, 並且提供交叉測試,請不同的組別幫忙你測試!並且提供回饋,這樣才能夠讓你下週的報告能夠有一定程度的品質。

網站測試評估回覆

測試人員姓名:

  • 網站的網頁數量是 (1~5分)
  • 網站的設計與當初的目標客戶群分析 (字體、配色、版面配置等)
  • 網站是否提供了類似麵包屑導覽列的功能 (方便使用者理解版面位置)
  • 是否提供了適當的導覽列與分類
  • 各網頁相互連結的關係是否正常?
  • 網站使用的資訊技術含量 (bootstrap? PHP? javascript...)
  • 其他建議:

上述的資料應該要在本週內完成後交付該組成員,讓網站開發者能夠進行進一步的設計與討論。

14.5: 資料繳交行程 (期末報告前,至少需要 4 周的工作量)

關於 14.1 的資料繳交部份,其實只要組長一人繳交一個網頁的資訊,網頁資訊如 14.1 的範例內容即可,亦即是一份『網站規劃企劃書』的格式,主要內容須涵蓋底下資料:

  1. 3~5 人一組,繳交期限與同作業繳交期限相同,請繳交 (1)組長姓名學號 (2)每一個組員的姓名學號。
  2. 本組人員的主要分工 (每個人的角色分配),基本上,每個人每件事都要做,例如外出探尋廠商等任務。但是有主要的召集人, 該召集人負責該部份的工作。並非每個人只負責自己的部份而已,這要搞清楚!
  3. 請在組長的網頁當中製作一個連結,新增一個報告頁面,裡面說明: (1)你們組預計提出的期末大主題方向; (2)該主題內容的基礎要求介紹; (3)該主題是否能夠提供本年度 10 組以上的同學進行期末練習? (4)主要的廠商大致為何,且如何分配不同的組別特性?
  4. 下週請各組組長 (或推派代表) 上台說明期末報告的相關介紹 (上面的資料說明。)

關於 14.2 的資料繳交部份,亦只需要組長或負責人的資料連結即可。繳交的資料就如 14.2 的說明,須有:

  1. 網站需求分析表
  2. 使用者特性分析表
  3. 小組資源分析表
  4. 建置技術規格分析表

關於 14.3 的資料繳交部份,亦只需要組長或負責人的資料連結即可。繳交的資料就如 14.3 的說明,須有:

  1. 網站地圖,需要有方塊圖以及 excel 的資料
  2. 網站界面設計圖,可以使用 balsamiq 或者是手繪均可。

關於 14.4 的資料繳交部份,無須繳交任何資料,只需要相對的測試人員提供 14.4 範例內的分數與建議表,讓小組成員可以進一步修訂。