TQC+認證依各領域設計人才之專業謀生技能為出發點,根據國內各產業專業設計人才需求,依其工作職能及核心職能,規劃出各項認證測驗。 在視傳設計領域中,本會經過調查分析最普遍的工作職稱,根據各專業人員之職務不同,彙整出相對應之工作職務(Task),以及執行這些工作職務所需具備之核心職能(Core Competency)與專業職能(Functional Competency),規劃出幾項專業設計人員,分別為:「平面設計專業人員」、「Flash動畫設計專業人員」、「多媒體網頁設計專業人員」、「網頁設計專業人員」、「數位出版專業人員」等。

網頁設計專業人員 | Web Design Expert

人員證書無期限限制,單科成績效力為五年期
TQC+認證依各領域設計人才之專業謀生技能為出發點,根據國內各產業專業設計人才需求,依其工作職能及核心職能,規劃出各項認證測驗。 在視傳設計領域中,本會經過調查分析最普遍的工作職稱,根據各專業人員之職務不同,彙整出相對應之工作職務(Task),以及執行這些工作職務所需具備之核心職能(Core Competency)與專業職能(Functional Competency),規劃出幾項專業設計人員,分別為:「平面設計專業人員」、「Flash動畫設計專業人員」、「多媒體網頁設計專業人員」、「網頁設計專業人員」、「數位出版專業人員」等。 更多
證照資訊 題庫專區 延伸資訊 相關學習

證照資訊

報考資格

各報考項目資格,請參閱財團法人中華民國電腦技能基金會網站

報名方式

採用線上報名,請至TQC+ 考生服務網,查詢線上報名〈網址:http://www.TQCPLUS.org.tw〉。

考試費用

各報考項目費用,請參閱中華民國電腦技能基金會網站網站

考試內容

需通過:電腦繪圖概論與數位色彩配色(PDC)、網頁設計(PDW)、影像處理(PPC),始可換發網頁設計專業人員證書。

考試地點

全國TQC+ 授權訓練中心均可報考,請上中華民國電腦技能基金會網站查詢
收合

題庫專區

暫無測驗 目前暫無相關測驗內容,若有合作意願歡迎與我們聯繫!
Hi~ 歡迎分享學習資源,有學習問題可匿名向Giver發問!
我要分享

學習推薦

月光創意

網頁設計

10/12 11:21

RWD 網頁設計是什麼?從手機打開網站那一刻說起
【先講一個你一定遇過的畫面】
你坐在捷運上,用手機點開朋友傳來的一間餐廳網站。畫面一出來,字小到要兩隻手指放大,菜單是一張橫的圖片,要左右滑才看得到完整內容,按鈕小到點三次才點中。你心裡想的是「換一間好了」,手指已經回到上一頁。
對經營網站的人來說,這一秒就是真金白銀。網站沒壞,電腦上也好看,可是訪客是用手機來的,而手機看到的不是你原本想給他看的樣子。RWD 網頁設計在處理的,就是這一秒。
RWD 是 Responsive Web Design 的縮寫,中文通常叫響應式網頁設計,也有人寫回應式。名字有點陌生,但講白了只有一句話:不管訪客用什麼裝置打開你的網站,畫面都自己調成那個裝置最好讀的樣子。
【換個方式理解:同一個接待,面對不同的客人】
我們做網站常拿現場接待來比喻。
同一位接待人員,遇到坐輪椅的客人,會改走斜坡;遇到抱著小孩的媽媽,會先幫忙開門。他要傳達的內容都一樣,只是做法跟著對方的情況調整。
RWD 就是這件事。你的網站內容只有一份,網址只有一個,但訪客從電腦、平板、手機進來,看到的排版會自己變化。電腦上可能是左圖右文並排,到了手機變成圖片在上、文字在下;原本橫向排一列的三個服務,變成直的往下疊。內容一個字都沒少,只是換了排列方式。
這裡有個關鍵,很多人第一次聽到會誤會:RWD 不是「做一個電腦版,再自動縮小」,也不是「另外做一個手機版網站」。它從頭到尾就只有一個網站、一份 HTML、一個網址。
【核心其實只有三件事】
把行銷詞拿掉,RWD 在技術上就是三件事湊在一起。
第一,一個網址、一份內容。電腦和手機共用同一套 HTML 和一組網址,不是做兩個站再互相轉址。這件事的意義比聽起來大:Google 不用去猜哪個是電腦版、哪個是手機版,也不用處理兩份內容之間的關係,收錄起來單純很多。
第二,用 CSS 的媒體查詢(Media Query)判斷螢幕寬度。媒體查詢像是設在 CSS 裡的一個開關,語法大概是 @media(max-width: 768px){⋯⋯},意思是「螢幕寬度小於等於 768 像素時,套用這段樣式」。螢幕寬度一變,套用的樣式跟著換,版面就重排了。
第三,viewport 設定。這行寫在網頁的 head 裡:width=device-width, initial-scale=1.0。作用是在告訴手機:「請用你的真實寬度來顯示,不要自己假裝是電腦。」少了這行,手機會用電腦的寬度硬塞,結果就是字超小、整頁縮在一起,訪客只能一直放大縮小。很多「看起來有做 RWD,手機卻很難用」的網站,問題就出在這一行的細節沒顧好。
順帶講一個效能上的但書。版面能伸縮之後,圖片如果還是照電腦版的大圖丟給手機,手機等於白下載了一堆用不到的畫素,載入自然會慢。實務上會用圖片的 srcset 或 picture 標籤,讓瀏覽器依裝置挑合適的尺寸,速度跟體驗都會好一點。
【斷點要抓多少?不要背型號,看內容】
新手最常問的是「斷點要設幾 px」。網路上會給一串表:手機 720 以下、平板 720 到 1024、桌機 1024 以上。這張表可以當起步的參考,但別把它當規定。
我們的做法是:把瀏覽器視窗從最寬慢慢往左縮,盯著版面看。文字開始擠成一團、圖片開始被壓扁、並排的東西開始不對勁的那個寬度,就是該設斷點的地方。每個網站的內容不一樣,斷點自然不會一樣。硬背裝置尺寸,等於又變相把版面綁死在固定寬度上,反而失去 RWD 的意義。
【RWD、AWD、手機版,到底差在哪】
同樣是「讓手機也能看」,業界其實有三種做法,常被混在一起講。
一種是 RWD。前端自己根據螢幕寬度調整,同一份 HTML、同一個網址。
一種是 AWD(自適應網頁設計,Adaptive Web Design)。它在伺服器端先判斷訪客用什麼裝置,再回傳對應的 HTML,可以是同一個網址,也可以是不同網址。
還有最早期的一種,直接做一個獨立的手機版網站,網址常是 m 開頭,跟電腦版是兩個站。
三個擺在一起,差別最明顯的是維護。手機版網站要把內容更新兩次,電腦改完忘了改手機,兩邊就不一樣;AWD 要維護多份 HTML,每次改版都得顧到每個版本;RWD 只有一份,改一次,所有裝置一起生效。
那 RWD 一定最好嗎?也不盡然。如果網站資訊量極大、分類很多層,或是有很複雜的後台操作介面、需要針對手機做很不一樣的流程,AWD 的動態服務反而能給手機更貼合的體驗。但這種做法需要工程團隊長期維護,成本也高。對絕大多數企業形象網站、服務型網站、一般電商來說,RWD 是很穩的選擇。
【你真的有 RWD 嗎?五個自己就能驗的點】
這段是我們被問最多的。很多業主說「我的網站有做手機版啊」,實際打開來,是另一回事。用下面五點自己檢查一遍。
第一,手機上往左右滑,會不會出現橫向的卷軸?有的話代表有東西超出畫面了,這通常是沒做好,不是設計。
第二,需不需要手動放大才看得清楚文字?正常的手機版字級,是不用放大就能順順讀完的。
第三,按鈕好不好按?用手指點得下去,跟用滑鼠點得下去,是兩件事。按鈕之間留點間距,手指才不會誤觸。
第四,把電腦瀏覽器的視窗慢慢縮小,版面會不會自己重排?如果只是整體一起縮小、文字圖片同步變小,那是「等比縮放」,不是 RWD。
第五,用 Google 的 PageSpeed Insights 或 Chrome 開發者工具跑一次行動版分數,看看有沒有列出「可點擊元素太近」「文字太小」這類項目。工具不會騙人。
五點過關,大概就真的能用了。有一項沒過,就值得找人看一下。
【三個最常見的誤解】
誤解一:「畫面會自動縮小就是有 RWD。」正好相反。整頁等比縮小,是沒有 RWD 的網站被手機硬塞之後的樣子。真正的 RWD 是版面重新排列,不是全部一起變小。
誤解二:「技術上做了 RWD,手機就一定好用。」技術只是門檻。字級、按鈕、圖片、載入速度這些體驗細節沒顧,一樣會被訪客關掉。
誤解三:「RWD 只是把版面做窄一點,應該比較便宜。」版面要同時在四、五種寬度下都好看,工作其實更細。真正決定價格的,是內容、頁數、功能和設計的客製程度,跟有沒有做 RWD 是兩回事。
【優點講完了,也講一下它的限制】
RWD 的優點很實在:網址單一,SEO 的權重集中,符合 Google 的行動優先索引;維護只要顧一份;品牌在每個裝置上長得一致;訪客不用縮放拖曳就能讀完。
但它也有不擅長的地方,該講清楚。
複雜的表格是其一。產品規格表、財務報表這種東西,硬塞進手機的小螢幕本來就難讀,常見的解法是改成卡片式排版,或乾脆另開一份檔案讓人下載。其二是高度客製的互動,有些操作在手機上需要完全不同的流程,硬用同一套版面做,反而卡卡的。其三是效能,前面提過,圖片和資源沒處理好,手機版會被拖慢。
這些限制不是要勸退,而是說:RWD 是主流做法,但不是萬靈丹,要看網站的性質。
【費用大概落在哪,以及要不要自己做】
行情這種東西每年都在動,只能給區間。套版型的 RWD 網站,大概萬元上下起跳;客製化的形象網站,落在數萬元到十多萬元之間很常見;牽涉金流、會員、複雜後台的專案再往上。實際金額還是要看功能、頁數、客製程度,以各家公告為準。
那能不能自己做?可以。現在多數架站平台和 WordPress 的模板本身就支援 RWD,套上去,網站至少有基本的手機版。自己做的門檻不在「版面能不能生成」,而在「排版能不能調好」:手機上文字大小、圖片裁切、選單開合,這些細節決定了訪客讀不讀得下去,也正好是最花時間的地方。
什麼時候建議直接找專業?三個訊號:網站會收錢或收個資;公司要的是一個拿得出手的品牌門面;你沒有時間、也沒耐性去調這些細節。這三種情況硬自己做,通常省了前期的錢,賠上後面的時間和形象。
【找設計公司時,把這幾題問清楚】
如果你決定交給公司做,簽約前這幾題值得問白。
第一,是真正的 RWD,還是另外做一個手機版網站?請對方講清楚是不是單一網址、共用一份內容。
第二,手機版有沒有含在報價裡?有些低價方案把「手機版」拆開另外收。
第三,圖片會不會壓縮、載入速度顧不顧?這題最能看出對方做不做得細。
第四,後台我自己改文字換圖片,手機版會不會跑版?好的後台會讓人不用懂程式也能安全更新。
第五,如果是舊網站改版,是局部調整還是整套重做?這要看原本的程式架構,請對方實際看過再回答。
【月光創意可以幫你做什麼】
我們做網站設計十多年,累積超過一千個網站,服務過的產業從中小企業形象官網、購物車電商,到基金會與健康單位都有。RWD 響應式網頁一直是我們的基本工,不是加購項目。
我們做 RWD 有幾個習慣,你可以拿來當對照:手機版是主版本,不是做完電腦版再順手縮小;圖片在上線前一定壓過、裁到實際要用的尺寸;後台讓你改字換圖不會把版面弄壞。網站結案後有後台,日常更新你自己來就行。
想看更完整的 RWD 原理、各種做法的比較,還有可以自己動手拖曳、當場看斷點變化的互動範本,都放在我們官網這一頁:
如果你正在評估新網站,或覺得現有網站在手機上表現不好,也歡迎直接來聊,我們會先幫你確認問題在哪,再決定要不要動工。
【幾個常被問到的問題】
問:舊網站一定要打掉重做,才能有 RWD 嗎?
答:不一定。要看原本的程式結構。有些網站改底層就能支援,有些重做反而更省時省錢,需要實際看過才知道。
問:用了 Bootstrap 這類框架,就等於有 RWD 嗎?
答:不等於。框架提供工具,做得對不對還是看人。用框架一樣可以做出手機上很難用的網站。
問:RWD 會不會讓網站變慢?
答:做得好不會,還會更快。會變慢通常是圖片太大、資源沒整理、載入的程式沒精簡,問題不在 RWD 本身。
問:小公司、預算不多,也一定需要 RWD 嗎?
答:只要你的客人會用手機找你,就需要。現在多數流量來自行動裝置,這是基本盤,不是選配。
看更多
0 0 43 0
月光創意

網頁設計

10/04 15:52

架設網站自己來:流程、費用與平台怎麼選
客人走進來或線上訊息丟過來,最常見的第一句是「架一個網站多少錢」。我們回答完,通常會先反問一句:這個網站要做什麼、給誰看?
問這句不是為了拖時間。過去十五年我們看過太多網站卡住,卡的地方不是技術,是需求從來沒被講清楚。錢是結果,前面那幾個問題沒答,後面的錢一定會算錯。
這篇我們把架設網站拆開來講:三大要素是什麼、自架和找公司的差別在哪、費用大概怎麼抓,以及自己動手時最容易踩的坑。看完你應該可以自己決定要走哪一條路。
【架設網站的三大要素】
不管你最後選哪種方式,網站要活起來,一定要有這三樣東西。
網域是門牌。像 moon-d.com 這樣的一串字,訪客輸入它才能找到你。門牌的問題在於,一旦註冊成功,幾乎不能改拼字。要改就是買一個新的,之前累積的連結、搜尋紀錄、大家記住的印象,全部歸零。所以挑網域的時候我們的建議很簡單,能短就短,能跟品牌同名就跟品牌同名,中文拼音可以接受,但盡量別用一串沒人念得出來的字。
主機是房子。網站裡的文字、圖片、程式、會員資料都放在裡面,房子夠不夠穩、有沒有保全,會直接影響你的網站會不會有一天突然開不起來。
網頁設計是裝潢。同一間房子,裝潢得好不好,訪客願意待多久、會不會打電話來問,差很多。這也是我們的工作範圍。
三樣都有,網站才會出現。少了門牌沒人找得到你,少了房子東西沒地方擺,只有裝潢而沒有房子,站不起來。
【三條路:自架、架站平台、找公司】
第一條是免費架站平台。Wix、Google Sites、WordPress.com 這類,註冊帳號、選一個模板、換掉文字和圖片,一個晚上可以有東西跑起來。學生作業、活動報名頁、作品集,這種一次性的用途,這條路最快。
限制也很明顯。你用的網址通常是平台的子網域,不是你自己的名字。想用 yourbrand.com 通常要升級。網站裡會有平台的廣告,功能有上限,版面調不到太細。更現實的問題是資料能不能匯出:將來想搬家,能不能把文章、會員紀錄、訂單整批帶走,這件事要先問清楚,不要上線後才發現。
第二條是自架站,主流做法是 WordPress 加一間虛擬主機。軟體本身免費,付費的是主機和網域。自由度最高,版面、外掛、資料結構都能自己決定,SEO 的設定也最完整。代價是主機要自己選、系統要自己更新、外掛要自己顧、備份要自己排,還有資安。做不到這些,網站就會開始出問題,而且通常是在你最需要的時候。
第三條是找網頁設計公司做。錢花下去,換到的是時間和一個能用的結果。這條路適合幾種情況:網站牽涉金流、會員、個資、募款或訂房;公司需要的是一個拿得出去的品牌門面,不是湊合的版面;或者你根本不想學,也沒耐性處理主機大小事。
要選哪一條,我的判斷標準只有一個:三年後這個網站要不要搬家?
不要搬,就用平台,省事。
要搬,而且打算在上面經營很久、寫文章、做 SEO,那就自架。
要的是品質和穩定,錢不是唯一考量,就找公司。
【網域與主機怎麼挑】
網域後綴最常見的是 .com 和 .tw。.com 辨識度高,國際品牌都這樣取,客人輸入時不容易猜錯。.tw 和 .com.tw 比較明確地指向台灣市場,價格通常也便宜一點。做本地生意、客群明確在台灣,用 .tw 系列不算失敗;如果希望網址有一天能拿去跟國外客戶談,.com 比較保險。
還有一件事比後綴重要:續約價格。註冊第一年常常有很漂亮的折扣,第二年恢復原價。有些名稱看起來便宜,續約卻是別的價。付款前把續約價看清楚,這是寫在合約裡的規則,不是猜的。
主機的話,我們看四個地方。
第一是備份。多久備一次、備份放在哪、能不能自己還原。沒有備份的主機,等於把網站的命交在別人手裡。
第二是客服。能不能用中文講、營業時間涵蓋你上線的時段。半夜網站打不開,找不到人,這個成本比省下的月費高很多。
第三是流量限制。很多低價方案的流量額度很小,超過就限速或關站。企業官網的流量通常不大,但活動頁和廣告期間的量會突然衝起來,最好留一點餘裕。
第四是能不能升級。等網站做起來要搬家時,是同一間主機換方案,還是整個重來?這決定你現在的選擇有沒有綁住未來。
還有一個常被忽略的:機房位置。訪客主要在台灣,選台灣或亞洲的機房,連線順很多。不過機房只是其中一環,網站慢更多時候是圖片太大、外掛太多,快取沒開,不要誤判成主機不好。
【費用大概要抓多少】
自己架站的行情,網域每年約 400 到 1,000 元,共享型主機約 1,500 到 6,000 元,兩項加起來,入門等級大概 2,000 到 10,000 元之間。SSL 憑證現在多半有免費方案,不一定真的要花錢買。實際金額以各供應商的公告為準,促銷和匯率都會變。
用免費平台的話,錢可以壓到零。代價是子網域、平台廣告、功能上限,以及前面講過的資料能不能帶走,平台出問題到最後容易白費心血。
找公司製作,差異就大了。套版或模組化的做法從萬元上下起跳,功能、頁面數、是否含手機版、是否含首年主機,都會影響報價。客製化的專案,市場上落在幾萬元到十多萬元很常見,需要金流、會員、串接外部系統的專案再往上。沒有什麼奇怪的價差,錢差在哪裡通常就是差在客製程度和功能數量。比較時記得問清楚:手機版算不算在內、原始碼和主機權限歸誰、後續改內容要不要另外收費。
還有三種成本不會出現在報價單上,但一定會發生:你自己花在維護上的時間、續約和加購的費用、以及將來搬家的成本。省下來的錢,有時候是從時間裡借來的。
【從零到上線的五個步驟】
步驟一,先寫一頁規格。不用漂亮,用具體。網站要達成什麼:接詢價、賣東西、還是讓人看文章?要有哪幾頁?首頁一定要出現什麼?訪客看完之後,希望他做什麼動作?把這些寫成一張紙,之後所有決定都以這張紙為準。這一張紙能省掉後面八成的來回修改。
步驟二,買網域、選主機。先買網域,因為名字要先確定下來才能設主機的綁定。名稱確定後,主機就照前面說的四個條件挑。
步驟三,決定用什麼工具做。這個決定要在第一步之後做,因為工具要服裝需求。只是一個形象頁,和要會員登入的系統,答案是不同的兩件事。
步驟四,做版面和內容。順序建議是:先把文字放進去,再調版面,最後才選顏色和圖片。反過來做的人,通常會卡在一堆漂亮版型裡,發現沒有文字可以放進去。手機版要同步做,不是之後再補,現在大部分人是從手機開始看的。
步驟五,測試和上線。用自己的手機,從頭到尾把網站滑一遍,每個按鈕都點過,電話和表單真的送出一封測試信。確認沒有測試文字和失效連結,再對外開放。上線後把網站網址提交到 Google Search Console,讓搜尋引擎知道這個站存在。提交只是讓它來看,不是保證排名。
【自己架最容易踩的坑】
這一段是我們被問最多的。
網域沒有開自動續約,忘記了,網站整個消失。最慘的狀況不是網站掛掉,是有人打電話來說找不到你的網站,你才發現原來過期兩個月了。網域和主機都開自動續約,信用卡不要用短期卡,帳號信箱要真的收得到信。這三件事設定好,五分鐘解決一個可能損失慘重的問題。
外掛裝太多。開始是為了加功能,後來變成互相衝突,網站越來越慢,作者自己也搞不清楚是哪一個在出問題。貪多通常不是好事,確定要用的才留。
只在電腦上測。桌機版看起來很完整,手機上選單跑出去、按鈕小到點不到。這種問題上線後再改,工時是前面的好幾倍。
圖片直接用相機原檔。一張幾 MB 的照片放進首頁,訪客在還沒看到你的內容之前就離開了。上傳前先壓縮,尺寸裁到你實際要用的樣子。
沒有備份,直到出事才發現救不回來。備份不是選配,是網站還活著的最低條件。
【什麼時候該放棄自架】
有三種情況,我會直接建議放棄自架。
第一,網站要收錢、要拿會員個資、要接金流或外部系統。這種站出事要有人負責,不是自己在家弄到半夜能承擔的。
第二,公司需要的是品牌形象,不是有一個網站就好。客戶看的是你做出來的東西,不會因為你省了設計費而給你加分。
第三,你沒有時間學,也沒有耐性處理主機。這種情況硬自架,結果通常是網站擺在那裡三個月沒更新,反而比一開始就委託更糟。
【月光創意可以幫你做什麼】
我們做網站架設十五年,累積超過一千個網站,服務過的產業從中小企業形象官網、購物車電商、活動網頁到基金會與健康單位都有。做的事情包括企業形象網站設計、購物車與訂房系統、RWD 響應式網頁、主機承租與網站維護,以及需要時的程式開發。
我們的做法比較單純:先談需求、給報價、簽約收訂金,製作過程會做版型讓你評估,結案後網站有後台,你自己就能改字換圖,不需要每次都丟回來。我們對圖庫的合法授權要求高,不用擔心被告。
如果你正在評估架一個網站,歡迎來看看我們的作品集和服務內容,也歡迎直接問報價。網站架設的完整費用說明、包含哪些項目、加購怎麼算,都在我們的網頁設計報價頁上面寫得很清楚,可以先自己看過再決定要不要談。
【常見問題】
問:架設網站要多少錢?
答:自己架,網域加主機每年約 2,000 到 10,000 元是常見的入門區間;用免費平台可以接近零,但會有子網域和功能限制;找公司製作從萬元到十多萬元都有,差在客製程度和功能數量。實際金額以各供應商和廠商公告為準。
問:完全不會寫程式,可以自己架設網站嗎?
答:可以。Wix、Google Sites、WordPress.com 都是用拖拉的方式排版,不用寫程式。但網域、主機、外掛、備份這些技術活會跟著一起來,時間要自己抓。
問:網站做好就會有流量嗎?
答:不會。上線只是開始。流量要靠內容更新、SEO、社群或廣告慢慢累積,通常要三到六個月才看得出穩定變化。新站最怕的是上線後就沒人管。
問:自架和找公司做,差的不只是錢吧?
答:對。差的是你要花多少時間在上面、你能不能完全掌握網站資料、以及出問題時誰處理。自架省的是前期費用和自由度,找公司買的是時間和一個有人負責的結果。
問:為什麼要先談需求,不要直接報價?
答:因為同一句「做一個網站」,形象官網和購物車網站的差異是十倍。需求沒談清楚就報價,兩邊都會錯估。
看更多
0 0 58 0
月光創意

網頁設計

10/02 11:45

一頁式網站是什麼?一頁式網頁設計優缺點與費用解析
很多人的第一個網站是被一則廣告逼出來的。點進一個連結,畫面一路往下滑,商品或方案從頭講到尾,滑到底的時候旁邊跳出填寫框,人就順手把手機號碼留了下來。整個過程沒有換過頁面,也沒有點過任何選單。這種把一件事從頭講到尾的頁面,就是一頁式網站(One Page Website),也有人說一頁式網頁、單頁網站。
它聽起來像一句行銷話術,其實是很樸素的工具:把該說的資訊排成一條動線,讓人不用自己找路。下面把一頁式網站能做的事、不能做的事,以及我們實際做過的幾種型態講清楚,幫你在決定花錢之前,先想明白自己到底需不需要。
一、一頁式網站是什麼
一頁式網站的全部內容都在同一個網址裡。首頁上方有主視覺和一句主打的話,往下依序排服務介紹、案例、價格、常見問題,最後放聯絡表單。頁面頂端通常會留一個選單,點了不會跳到別的頁面,而是往下滑到這一段。這種跳法叫錨點跳轉,是長頁能讀得下去的前提。
和多頁式網站比起來,差別在資訊的位置。多頁式網站把公司介紹放在「關於我們」,產品放在「產品專區」,案例放在「案例分享」,訪客要自己點進去找;一頁式網站把這些東西排在一起,順序由你決定。訪客的差別是,前者要做出選擇,後者只要一直滑。
順帶講一個常被混用的名詞。Landing Page(著陸頁)講的是位置,也就是「訪客從廣告點進來後抵達的那一頁」;一頁式網站講的是形式,也就是「這頁總共只有一頁」。位置和形式是兩件事,一頁式網站可以當著陸頁用,你官網裡的某一個服務頁也可能是著陸頁,只是它不是單頁。
同場加映:月光創意另寫了一篇一頁式網站與 Landing Page 中文意思的完整版文章:https://www.moon-d.com/blog/one-page-website.php
一頁式網頁設計這幾個字在業界被使用得很寬鬆,實際上做的事情差很多。有的是把公司現有的簡介貼成一頁,動一下滑就到底;有的是花時間重新安排內容節奏、處理視覺階層、把表單和追蹤都接好。兩者外觀看起來都像一頁式網站,做出來能不能用,是兩回事。
二、你到底該不該做一頁式網站
在動工之前,先回答五個問題,問完大概就有答案了。
第一,你的網站要回答的問題是不是只有一個?「我們做什麼、為什麼值得信、要怎麼找我」,三句話講完就沒了,適合一頁式。如果對方會問到你沒做的部分,例如各項方案的差異、服務據點、維修收費、多年案例,那就需要多頁式。
第二,商品或服務的數量是不是收斂的?一個課程、一檔新商品、一次促銷、一項專業服務,都是好例子。整間公司二十條產品線擺進一頁,會變成一張沒人想讀的清單。
第三,你的流量從哪裡來?如果主要靠 Google 自然搜尋,建議直接跳過這個選項,理由下一節會說明。如果是投廣告、發社群、寄電子報、印在名片或 DM 上讓人掃碼,流量來源集中在一兩個地方,一頁式非常合用。
第四,內容會不會一直長下去?每月都要新增文章或案例的網站,單頁結構會很快撐不住。反過來,內容穩定、期數固定的頁面,用一頁式最省事。
第五,你要訪客做的動作是同一件事嗎?「填表預約」是,「填表之後還要選加購、加入會員、下載應用程式」就不是。一頁式的力量來自專心,如果頁面上同時有六個按鈕要人選,等於把難度還給了訪客。
五個問題裡,只要「要做 SEO」或「服務項目很多」任一成立,就該認真考慮多頁式。其餘都偏向可以使用一頁式網站。
三、一頁式網站的好處
動線短,是最實在的一項。訪客從點進來到按下送出,中間沒有換頁、沒有開新視窗、沒有回到上一頁找路。每多一個跳出點,就多一次放棄的機會,尤其是手機上。表單放在頁尾,不代表它一定被填,但它至少在視線內。
手機閱讀友善是另一個好處。現在多數人上網的動作就是滑,滑這個動作不需要學習,也不需要等頁面載入。一頁式網站的節奏本來就適合手機,設計時把手機版當主版本就好,不會出現「桌機版很好看,手機版擠成一團」的窘況。
製作快,後續修改也單純。頁面只有一個,東西要改就是改那一處,不會出現「首頁改了,內頁沒改」的情況。對只有一兩個人要維護的團隊來說,這點很實際。
還有一個比較少被講的好處:訊息會被迫一致。當你只有一個頁面可以放內容,產品文案、服務說明和價格就不容易各說各話。資訊一集中,矛盾的地方反而會自己浮出來。
四、缺點,以及最常見的三個誤區
第一個誤區是「一頁式網站也能做 SEO」。實情是它先天吃虧。所有主題共用一個網址,等於只有一個標題、一組網頁描述可以寫。你想同時被「XX 室內設計」「XX 維修」「新北 裝修推薦」找到,需要的是多個頁面各自對應一個搜尋意圖,單一長頁做不到。這不代表一頁式網站完全不會被搜尋到,而是它很難成為自然流量的主力。若網站存在的目的就是讓不認識你的人從 Google 找到你,請把預算留給多頁式。
第二個誤區是「只有一頁,所以便宜」。頁面數量不等於工作量。訪談、文案、圖片、影片授權、響應式適配、表單串接、追蹤設定、測試與上線,每一項都跟頁數無關,還常常是一頁式專案最花時間的部分。真正會讓報價拉開差距的,是這些工作有沒有被認真做。
第三個誤區是「看起來比較有規模」。這正好講反了。在金融、醫療、法律、上市上櫃這些產業,一頁式網站常被讀成小公司、沒制度、隨便做做。所以這類客戶通常會把一頁式網頁用在活動或產品募資上,正式的企業形象還是做多頁式官網。
還有幾個實際限制要知道。所有東西共用一個網址,之後想分析「哪一段的訪客最多、哪一段開始離開」,資料會比較難拆解。滑完就走的人很多,又沒有其他頁面可以逛,跳出率看起來會偏高,拿它跟多頁式官網直接相比沒有意義。頁面拉得太長也會有後果:圖片太多會拖慢載入,區塊順序亂會讓人滑到一半就放棄。一頁式能塞多少字,最後是由訪客的耐心決定,跟版面空間無關。
五、我們做過的三種一頁式網站
講完道理,換三個我們真的做過的案子,差別會比較清楚。
第一個是金融投信推出的黃金礦業 ETF 募集頁。這種頁面要在很短的時間內讓投資人相信這檔標的值得研究,所以視覺走黑金路線:深色岩質底襯出金色的光澤,標的代碼用大字級的金屬質感字型放在第一眼的位置,資訊則用比較克制的排版往下列。重點不在裝飾,而在於把「這是什麼」和「我要做什麼」分開處理。頁面右側做了懸浮的快捷工具列,申購單與銷售機構的入口一直掛在畫面上,訪客不論滑到哪一段都能立刻行動,不必回頭找。
第二個是電商通路品牌的活動頁,背景是一整檔檔的促銷套組。這種頁面最怕滑到底還是不知道要買哪一組,所以節奏比資訊更重要。做法上,讓背景的雲朵與愛心有呼吸感的微動態,商品和「立即購買」按鈕在滑入時做漸顯與微幅放大,讓「點這裡」的手感成立;影片與底部按鈕的切換也刻意調過節奏,避免看起來像被塞進去的廣告。這種頁面沒有太多字,設計的任務就是讓手指繼續往下滑。
第三個是醫療健檢中心的一頁式官網。這個型態真正的難題是信任,視覺只是外層。健檢是低頻、高單價、又牽涉身體的消費,訪客在意的是項目內容、檢查流程、院所環境、醫師陣容與預約方式。這頁的排法是照著看診的順序走:健檢項目與差別、流程說明、環境照片、醫師介紹、費用與預約入口。資訊夠完整,信任感才有地方生出來;這也是為什麼它不能只做漂亮,內容深度得跟上一頁。
三個案子擺在一起,同一種形式的側重點可以差很多。募集頁要的是權威感與行動捷徑,活動頁要的是節奏與衝動,官網要的是資訊完整與可信度。動工前先決定這一頁要說服誰,設計才有依據。
六、從想法到上線的流程
第一步,寫出一句話說明這頁要對誰說什麼。如果這一句話需要三個不同的受眾、五項服務和四種行動才能講完,問題不在頁面太短,在於任務還沒拆開。
第二步,排區塊順序。順序要照訪客的疑問走,不照公司的組織圖。訪客通常先問「這是什麼」,再問「跟你競爭的有什麼不同」,然後才問「要多少錢」「怎麼找你」。誰先誰後要想清楚。
第三步,備素材。文字、照片、影片、標誌、價格與常見問題,缺一項就會在製作階段卡住。照片建議一次備齊同尺寸,影片要先確認長度與比例。這一步沒做,後面會一直等。
第四步,決定誰做。這是整個流程裡最關鍵的一個決定,下一節會講。
第五步,驗收,而且用手機驗。檢查項目不多:首屏的主張和按鈕有沒有被蓋住、表單能不能真的收到、頁面在慢速網路下會不會卡、每張圖片有沒有替代文字、按鈕點下去有沒有被記錄。這五項沒過,不要上線。
七、自己做,還是找人做
誠實講,一頁式網站確實有免費工具能用。個人作品集、履歷、單一課程的招生頁、一次性的活動,這些用現成平台或自己動手做得又快又省錢,這點不用否定。
撐不住的情況是另一種:頁面要自己長期更新、要在上面賣東西、要能被 Google 找到、要代表一家有規模的公司、還要在手機上又快又穩。這種情況自己做的成本通常比想像中高,因為時間會卡在你根本不熟的地方,美化反而不是瓶頸。
我們(月光創意網頁設計)做的是後半段:客製化的一頁式網頁設計、響應式適配、把內容節奏重新排過、表單與系統串接、追蹤設定,以及最重要的——上線之後還可以繼續幫你改內容、追蹤數據並調整。這種頁面最好在規劃階段就把後續維護一起談掉,因為一頁式網站的內容要更新,沒有後台可以靠就會變成一份靜態文件。
八、常見問題
一頁式網站等於著陸頁嗎?
不對等。著陸頁描述的是訪客從哪裡進來,一頁式網站描述的是頁面有幾頁。前者可以有多頁,後者只有一頁。
一頁式網站能放多少商品?
沒有固定數字,判準是「滑到底還願不願意讀」。實務上把十來件、差異明確的商品放在一頁是讀得完的,數量再往上,建議改用多頁式加上分類。
做一頁式網站還需要做響應式嗎?
需要,而且建議直接以手機版為主版本再放大到桌機。絕大多數訪客是拿手機進來的,先做桌機再等比例縮小,字級和間距會一直卡住。
之後想擴充成多頁式,可以嗎?
可以,但成本不等於把頁面切開。內容重新歸類、導覽重新設計、網址與標題重新規劃都要重做。所以如果本來就預計三年內會擴充,一開始就做多頁式比較省。
九、如果還在猶豫怎麼開始
一頁式網站能不能用,取決於你的內容能不能收斂成一條線。收斂得了,它是最省力的做法;收斂不了,多花時間做也只會得到一張很長的網頁。
如果你手上的素材很多,卻不確定該排成活動頁、募集頁還是一頁式官網,可以先看月光創意整理的「一頁式網站完整指南」: https://www.moon-d.com/blog/one-page-website.php
裡面把一頁式網站的定義、與 Landing Page(著陸頁)的差別、優缺點、設計原則、報價行情與免費平台比較整理成一頁,也放了可互動的範例,建議直接存起來。
歡迎直接帶著你的需求來聊,我們會先幫你確認這一頁該不該做成一頁式。
月光創意網頁設計:https://www.moon-d.com/
看更多
0 0 74 0