不要再做冰冷的下拉選單 QA 了，消費(fèi)者找不到你問題之外，點(diǎn)了之後都是拿到固定的回答。透過 AI ，我們可以設(shè)定自己的品牌調(diào)性來回答。

幽默風(fēng)趣版：

正經(jīng)完整版：

透過後臺參數(shù)的設(shè)定，我們可以很快的調(diào)整回答的方向和內(nèi)容。一點(diǎn)都不需要擔(dān)心去「生成」文案的問題，就讓我們看一下操作 UI 的影片：

開啟更多可能性

不僅與此，若你的商品屬性，或是服務(wù)特性有什麼需要先「教育」AI 的，也非常好輸入，就像是把公司客服教戰(zhàn)守策丟給一個合規(guī)人員去熟讀，且他不太會給你遲到早退，24小時服務(wù)，又不會抱怨（同樣是付錢辦事對吧）。

我們的AI解決方案能夠整合到任何電商平臺，無論是客服互動還是後端管理，都能提供無縫的支援。如果您正在尋找能夠提升客戶服務(wù)效率和優(yōu)質(zhì)的 AI 技術(shù)，CTK Pro 是您的最佳選擇。讓我們一起開啟電商的智能化新紀(jì)元。

對於希望將 AI 技術(shù)融入電商網(wǎng)站的企業(yè)，CTK Pro 提供專業(yè)的諮詢與服務(wù)。我們的目標(biāo)是利用AI為您的業(yè)務(wù)帶來革命性的改變。聯(lián)繫我們，一起探索AI如何為您的電商平臺增值。

*上述部分內(nèi)容，由 Chat gpt 生成。

網(wǎng)路上許多梗圖，其實(shí)洞悉人性中最想看到的一面，也是把事實(shí)攤在你眼前，反而更容易看到重點(diǎn)。就讓小編獻(xiàn)醜，放上一張：【你以為的網(wǎng)頁設(shè)計(jì)/ CTK Pro 提供的網(wǎng)頁服務(wù)】讓你來了解製作網(wǎng)站的箇中滋味。

沒錯，一般企業(yè)（也就是 CTK Pro 的客戶）看到的通常會是：

• 報(bào)價(jià)單有什麼項(xiàng)目，各項(xiàng)費(fèi)用是否合理
• 我想要做一個跟 XXX 一樣的網(wǎng)站，會是多少錢？
• 直接給我一個價(jià)格
• 網(wǎng)頁設(shè)計(jì)公司，比我還了解公司的服務(wù)、產(chǎn)品
• 蓋好之後，Google 就會幫我排上第一頁
• 兩個禮拜可以蓋好網(wǎng)站嗎？

CTK Pro 或是其他優(yōu)秀的網(wǎng)站設(shè)計(jì)公司提供的服務(wù)其實(shí)是：

• 企業(yè)形象/網(wǎng)站建置規(guī)劃與建議
• 剖析你對品牌服務(wù)、產(chǎn)品的認(rèn)知，再來放到網(wǎng)頁中
• 其他建置網(wǎng)站相關(guān)知識：網(wǎng)域、主機(jī)、快取、SEO、資安、維護(hù)
• 上線要注意什麼項(xiàng)目
• 上線後維護(hù)網(wǎng)站規(guī)劃

網(wǎng)頁設(shè)計(jì)公司多會定位為良好的「合作夥伴」，也會像是「網(wǎng)站顧問」的角色，透過與你溝通需求的過程中，用我們的專業(yè)建議，提供網(wǎng)站資訊架構(gòu)的建議，也提供各項(xiàng)功能的解決方式。所以當(dāng)網(wǎng)站建置完成後，我們一定是除了你們之外，最了解你們服務(wù)的好夥伴！

建置網(wǎng)站需要準(zhǔn)備的項(xiàng)目？

• 公司簡介
• 喜好的風(fēng)格案例
• 網(wǎng)站 sitemap
• 企業(yè) CI 或是至少擁有 Logo
• 內(nèi)容素材，包含圖片、示意圖、形象圖、說明文字、文案等
• 網(wǎng)站建置目的，以及相關(guān)功能需求（若有流程圖佳）

上述的項(xiàng)目越清楚，網(wǎng)頁設(shè)計(jì)公司越容易了解你的需求。網(wǎng)頁設(shè)計(jì)公司一定是「協(xié)助完成」，而非報(bào)價(jià)完成後，付款網(wǎng)站就會自己生出來，所有的網(wǎng)站功能、形式更是為了內(nèi)容，也就是企業(yè)想要與網(wǎng)站使用者溝通的事情決定！

那些客戶會看的網(wǎng)站設(shè)計(jì)注意事項(xiàng)：

? （一）網(wǎng)頁字級大小之範(fàn)例
? （二）那些你沒有想到/過的網(wǎng)頁功能
? （三）網(wǎng)頁完成之際，最常問的問題有那些？
? （四）5 個網(wǎng)頁設(shè)計(jì)不容許錯誤
? （五）壓縮圖片，節(jié)省網(wǎng)站空間，加快速度
? （六）網(wǎng)站上線前的須知與修改

若不知道網(wǎng)站需求如何撰寫，不妨直接連絡(luò)我們，或是參考【如何撰寫網(wǎng)站規(guī)格】這篇文章

面相評估網(wǎng)頁預(yù)算的方式：

大致了解網(wǎng)頁種類後，若還是沒有頭緒，或許可以從網(wǎng)站功能面，或是一定會花費(fèi)的項(xiàng)目來規(guī)畫預(yù)算。

• 固定費(fèi)用：
  包含網(wǎng)域、主機(jī)、憑證，這裡的費(fèi)用相對固定，唯主機(jī)端看選用的等級、流量會有較大的差異，好的網(wǎng)頁設(shè)計(jì)公司，都可以給業(yè)主建議，CTK Pro 本身也是 Cloudways 的合作代理，對於優(yōu)良的主機(jī)有需求，也可諮詢我們。
• 網(wǎng)頁設(shè)計(jì)費(fèi)用：
  稍早提到的「形象網(wǎng)站」，也關(guān)係到設(shè)計(jì)費(fèi)用。從整個網(wǎng)站的設(shè)計(jì)，也可區(qū)分為企業(yè)形象、網(wǎng)站視覺風(fēng)格、UI元素、整體版面設(shè)計(jì)、遵循 CI 之規(guī)範(fàn)等，有經(jīng)驗(yàn)的設(shè)計(jì)公司，費(fèi)用可能從十萬起跳。故影響網(wǎng)頁設(shè)計(jì)報(bào)價(jià)的一大要素，應(yīng)該多去看看網(wǎng)頁設(shè)計(jì)公司的作品集，評估他可能的費(fèi)用
• 網(wǎng)頁程式費(fèi)用：
  主要會看網(wǎng)站有哪些功能、樣式調(diào)整，通常會有下面這些項(xiàng)目

響應(yīng)式調(diào)整、內(nèi)容管理系統(tǒng)（後臺）、電子商務(wù)功能，包含：會員、金流、物流、訂單管理、商品管理、客服管理、折價(jià)券、追蹤埋設(shè)、廣告埋設(shè)

• 網(wǎng)頁內(nèi)容費(fèi)用：企業(yè)品牌的內(nèi)容，通常還是內(nèi)部最清楚，從過往的案例、產(chǎn)品都可以產(chǎn)出。若這裡完全沒有準(zhǔn)備，可以參考同業(yè)網(wǎng)站，或詢問品牌顧問公司。

這裡也提一下，常被忽略的另外兩個面向：「網(wǎng)頁規(guī)劃」和「網(wǎng)頁維護(hù)」，有好的規(guī)劃才會讓網(wǎng)站如期上線（延伸閱讀：網(wǎng)頁上線前的修改），且前期設(shè)計(jì)、程式才不會走歪。而上線後，也需要定期維護(hù)內(nèi)容、程式、管控資安，並做好風(fēng)險(xiǎn)管控，才能順利讓網(wǎng)站運(yùn)行。

• 網(wǎng)頁規(guī)劃費(fèi)用：

網(wǎng)頁從無到有，架構(gòu)和使用者流程，其實(shí)是相當(dāng)依賴經(jīng)驗(yàn)的。許多網(wǎng)站現(xiàn)在也會從手機(jī)介面開始規(guī)劃，更貼近一般使用者使用情境。

優(yōu)良的網(wǎng)頁設(shè)計(jì)公司，有機(jī)會在與客戶接洽時，就抽絲剝繭，協(xié)助確認(rèn)需求，提供報(bào)價(jià)，後續(xù)製作、開發(fā)期間，更是能不斷依照進(jìn)程，優(yōu)化實(shí)際的產(chǎn)品。

• 網(wǎng)頁維護(hù)費(fèi)用：

程式、資安的更新，資料庫清理，以及定期的檢查、備份、掃描，對網(wǎng)站來說都是必要的。固定執(zhí)行網(wǎng)站維護(hù)，有效降低跑版、被駭客等情況，在意外事件發(fā)生時，也能夠最小損害的方式復(fù)原。

以上，已經(jīng)概括了網(wǎng)站建置 98% 的面向，若有哪些功能是沒有提及的，通常就會是客製討論的範(fàn)疇了。

什麼？還是不知道怎麼估算網(wǎng)站製作的費(fèi)用嗎？那麼從執(zhí)行人員的成本來估計(jì)，也是一種方式。打開政府電子採購網(wǎng)，查詢關(guān)鍵字【網(wǎng)站】，可以發(fā)現(xiàn)很多案例，你會發(fā)現(xiàn)其費(fèi)用遠(yuǎn)比文章上面介紹的都高出不少！

從「中華民國資訊軟體協(xié)會」的建議中，為提供資訊服務(wù)經(jīng)費(fèi)估算之合理性及共通性，依照行政院主計(jì)處公告之計(jì)算方式，應(yīng)估算以下職位之人員執(zhí)行之薪資：

• 計(jì)畫主持人
• 專案管理師
• 資訊及通訊專業(yè)人員（系統(tǒng)分析、前、後端工程師、資料庫與資安程式）
• 設(shè)計(jì)人員
• 資訊管理及維護(hù)技術(shù)員
• 辦公室綜合事務(wù)人員
• 電話及網(wǎng)路客服人員

當(dāng)然，這些人員不會是整個專案期間，僅執(zhí)行該專案（以 CTK Pro 來說，當(dāng)然也歡迎有企業(yè)包場〔誤！〕），一般來說，估算前四項(xiàng)的費(fèi)用，再加上網(wǎng)頁設(shè)計(jì)公司利潤，就會是合理報(bào)價(jià)。

坊間會看到一些一萬，兩萬甚至更低，可以完成一個網(wǎng)站的報(bào)價(jià)，小編也不禁為完工的品質(zhì)，倒抽幾把冷汗。

看到這邊，若對公司網(wǎng)站品質(zhì)有一定堅(jiān)持，卻還是不知道怎麼評估；或是有客製、套版的需求，歡迎加入 CTK Pro 的 Line，讓我們提供您諮詢協(xié)助。

RPA 是什麼？

RPA 用最簡單易懂的方式解釋，可以把它看做更聰明的按鍵、滑鼠精靈，就像是掛機(jī)遊戲一樣，有設(shè)定好的腳本，當(dāng)你人不在電腦面前時，一樣可以幫你按照腳本練功升等。

運(yùn)用在企業(yè)上，則是從業(yè)務(wù)接洽、財(cái)務(wù)、訂單/供應(yīng)鏈管理、人力管理、客戶服務(wù)等面向都能夠套用。尤其以重複性高、機(jī)械化、流程化、具有一定規(guī)則規(guī)範(fàn)，或需要在不同系統(tǒng)間大量重複操作（像是複製貼上）的工作，都可以使用類似的解決方法，達(dá)到高效、低錯誤率的境界。

其實(shí)流程自動化，最早可以回推到工業(yè)機(jī)器人，工業(yè)手臂或是自動化生廠的工廠，就是提升制式化的工作效率，達(dá)到更高的效率外，也取代人力去執(zhí)行相對危險(xiǎn)的工作。在資訊爆炸的時代，公司資料全數(shù)轉(zhuǎn)為電子化，卻也衍生了更多數(shù)據(jù)處理的需求，我們需要在不同系統(tǒng)間、不同表格間來回填寫許多資料以完成規(guī)定的 SOP，也是近十年來，軟體方便的 RPA 導(dǎo)入，躍升為顯學(xué)。

已經(jīng)高度開發(fā)完成的 RPA 應(yīng)用軟體

從軟體應(yīng)用層面，有許多現(xiàn)成的工具可以協(xié)助我們完成，這裡簡單列舉以下幾種：

• UiPath：提供用於設(shè)計(jì)自動化工作流程的拖放界面。它適用於各種業(yè)務(wù)流程自動化。
• Blue Prism：專注於提供企業(yè)級的RPA解決方案。它支持創(chuàng)建高效、可靠的自動化腳本。
• Automation Anywhere：一個全面的RPA平臺，適合各種規(guī)模的企業(yè)。它結(jié)合了傳統(tǒng)的RPA與認(rèn)知自動化功能。
• Microsoft Power Automate（前身為 Microsoft Flow）：集成於Microsoft 365套件中，與 Office 系列有深度整合。

這些軟體，提供一個介面供您去設(shè)定流程、操作細(xì)項(xiàng)，對於程式操作邏輯很清楚，或是有一定程度 debug （除錯）能力的使用者來說，具有相當(dāng)程度的彈性。一旦設(shè)定好操作方法，通?？梢詤f(xié)助部分族群或是工作項(xiàng)目加快其效率。

網(wǎng)頁設(shè)計(jì)公司也可以協(xié)助你倒入 RPA ？

導(dǎo)入 RPA 流程，其實(shí)會需要公司集體決策，再加上實(shí)際業(yè)務(wù)者參與操作，碰上一些小修改，或是產(chǎn)生 bug 時，也需要一定的能力去排除，有一定的門檻。

CTK Pro 透過網(wǎng)站系統(tǒng)設(shè)計(jì)、UI/UX 的掌握，不管是普生的預(yù)約網(wǎng)站，或是法雅客的 ERP 串接工作等，利用程式、API 或是 JS 、良好的系統(tǒng)規(guī)劃設(shè)計(jì)等方法，都能視作 RPA 的一部分，最大的目標(biāo)還是減少人工重複的流程，增加準(zhǔn)確度，把時間留給更有意義的項(xiàng)目上。

以下是幾個透過程式倒入 RPA 常見的工具：

• Python：自動化任務(wù)或是處理數(shù)據(jù)的優(yōu)先選擇。因其簡潔的語法和豐富的模板支持。特別適合數(shù)據(jù)處理、網(wǎng)絡(luò)爬蟲和系統(tǒng)操作。
• JavaScript (Node.js)：對於網(wǎng)絡(luò)應(yīng)用相關(guān)的自動化，JavaScript（特別是Node.js環(huán)境）可以是一個有效的選擇。它適用於處理網(wǎng)頁自動化和API交互。
• Bash Scripting：對於Linux環(huán)境下的系統(tǒng)級任務(wù)，Bash腳本經(jīng)常被用來自動化日常的系統(tǒng)管理任務(wù)。
• API整合：利用應(yīng)用程式介面（API）進(jìn)行整合和自動化。這對於連接不同的應(yīng)用程式和服務(wù)特別有用。
• 網(wǎng)頁自動化：使用如Selenium、Puppeteer等工具進(jìn)行網(wǎng)頁瀏覽自動化，模擬用戶交互。

透過程式的方式來執(zhí)行 RPA，對於終端使用者來說，是可以建立可靠的 UI 反饋與操作，例如在每一個必須經(jīng)過人工確認(rèn)/審核的步驟，做出提示之 UI，增加正確性及結(jié)果的可靠性；或是每一個起始點(diǎn)，可以上傳自訂的檔案，來完成每次略有不同的工作，這種操作模式對於經(jīng)營電商的後臺管理者來說，會更為實(shí)用，因?yàn)槊看唯乙幚淼挠唵钨Y料、客戶資料實(shí)在是不盡相同。

而且以法雅客的例子來說，能在不同端點(diǎn)，或是排程時間內(nèi)，自動去完成下一項(xiàng)任務(wù)，對於整體的管理、流程自動化來說，得到的效益更大。而且在資料安全上，完全可以本地端處哩，避免敏感資料外洩的風(fēng)險(xiǎn)，且處理的情況都可以有網(wǎng)頁形式的 log 供後續(xù)錯誤時校正。

對於需要實(shí)時間控的一些網(wǎng)站來說，不僅需要監(jiān)看是否上限，更要能確保網(wǎng)站重要流程，如結(jié)帳、預(yù)約等複雜的操作項(xiàng)目能順利進(jìn)行。CTK Pro 也利用 Ghost Inspector 的工具，來確保網(wǎng)站的營運(yùn)受到影響時，可立即收到通知。

AI 在未來可以給 RPA 什麼協(xié)助？

未來，人工智慧（AI）絕對可以在導(dǎo)入機(jī)器人流程自動化（RPA）方面發(fā)揮重要作用。AI和RPA的結(jié)合正在形成一種新的自動化範(fàn)式，這在業(yè)界常被稱為智能自動化或智能流程自動化（IPA）。這種結(jié)合利用了AI的學(xué)習(xí)和適應(yīng)能力，使自動化過程更加智能和高效。

使用 AI 的潛在優(yōu)勢：

• AI模型可以從經(jīng)驗(yàn)中學(xué)習(xí)，不斷改進(jìn)和適應(yīng)新的業(yè)務(wù)環(huán)境，從而提高過程效率。
• 結(jié)合自然語言模型，提供更自然的用戶互動
• 預(yù)測分析：AI的預(yù)測能力可以幫助企業(yè)預(yù)見未來趨勢和潛在問題，並相應(yīng)調(diào)整自動化策略。
• 結(jié)合數(shù)據(jù)分析處理：分析大量數(shù)據(jù)，從一系列名單或數(shù)據(jù)中，直接獲取更有價(jià)值之洞察資料。

隨著技術(shù)的進(jìn)步，AI 將繼續(xù)提高 RPA 的智能化水平，使其能夠應(yīng)對更加複雜的業(yè)務(wù)場景。這不僅能提高自動化的效率和有效性，還能為企業(yè)提供更大的靈活性和競爭優(yōu)勢。這些可能在短期的未來出現(xiàn)，然而，能更快速應(yīng)用的企業(yè)，一定是之前已經(jīng)優(yōu)先導(dǎo)入 RPA 相關(guān)流程的企業(yè)。

CTK Pro 怎麼幫你

使用客製化程式進(jìn)行自動化需要一定的開發(fā)技能和維護(hù)投入，另一種說法則是可以完全滿足不同的使用者需求去開發(fā)，也是 CTK Pro 想要服務(wù)的對象。

還在尋找 RPA 導(dǎo)入，卻不知道從何著手嗎？玲郎滿目的 RPA 工具，不知道究竟要從哪個開始嗎？先和我們聊聊需求，我們希望提供企業(yè)靈活，且可完全控制的流程，現(xiàn)在就把需求留言給我們吧！

性能需求

網(wǎng)站的性能直接影響到使用者體驗(yàn)，網(wǎng)站跟你家的主機(jī)/手機(jī)一樣，規(guī)格越好，擁有越多越快的 CPU（核心處理能力），越大的記憶體（通常到達(dá)一定的量值就 ok），直接決定了網(wǎng)站運(yùn)行的速度。

一般網(wǎng)站的主機(jī)規(guī)格要求不會很高，1-2 個虛擬 CPU 通常都跑得起來，記憶體建議至少還是有 2GB 以上以應(yīng)付網(wǎng)站處理各種 request。若為電商系統(tǒng)，主機(jī)會處理到訂單、金流，後臺要資料等程式執(zhí)行，規(guī)格要比一般網(wǎng)站高兩倍以上，最好還要依照實(shí)際訂單、流量來調(diào)整，以應(yīng)付同時瀏覽/結(jié)帳的使用者。

若是尖峰流量更大的網(wǎng)站，就還要考量負(fù)載平衡器，DNS端的分流，甚至要做多主機(jī)、多資料庫等情況（大型電商、購票網(wǎng)站等）。其他如主機(jī)使用的系統(tǒng)、資料庫系統(tǒng)、資料庫分離等各專業(yè)的術(shù)語，就等網(wǎng)頁設(shè)計(jì)公司協(xié)助你了解了。

資安管理、安全性

資安則是中小企業(yè)較容易忽略的一環(huán)，但其重要性也不可小覷。除了保護(hù)使用者個個資、隱私，網(wǎng)站使用 SSL 的 https 瀏覽（現(xiàn)況來說若非 https，瀏覽器甚至直接阻擋）都是基本的。

若是較大型的專案，可以參考 2021年修正公告的「資通安全管理法實(shí)行細(xì)則」、「資通安全責(zé)任等級分級辦法」等來施行，除了上述提到的隱私保護(hù)、加密外，也會依照需要遵守的等級不同，強(qiáng)調(diào)下列項(xiàng)目：

• 強(qiáng)密碼政策
• 防止 SQL 注入及跨站腳本攻擊
• 程式更新與漏洞修復(fù)
• 訪問控制
• 不中斷方案
• 備份與恢復(fù)機(jī)制

兼容性

兼容性是一般網(wǎng)頁設(shè)計(jì)公司就會協(xié)助考量完善的，主要針對不同的瀏覽器、不同設(shè)備、不同解析度的裝置，都能夠正常運(yùn)作。以往裝置類型很多，現(xiàn)況來說主流的瀏覽器包含 Chrome、Safari（通常是 iOS 裝置），較少部分但是也需要支援的如微軟的 edge、Firefox，甚至臺灣也有近 4% 的人使用 Samsung 瀏覽器也會需要考量（還好現(xiàn)在不太用顧慮以往的大魔王 IE 瀏覽器了……）。

資料來源：https://gs.statcounter.com/browser-market-share/all/taiwan

後臺管理

此項(xiàng)目其實(shí)對於規(guī)劃完善的企畫書來講，會在使用者處就考量到，因?yàn)獒崤_使用者也是核心使用者之一。開放的後臺功能，至少要能對網(wǎng)頁的內(nèi)容，做「增刪查改」（CRUD）。

進(jìn)階的使用通常會包含如「訂單管理」、「流程管理」、「網(wǎng)站功能管理」等，依照實(shí)際需求，決定哪些項(xiàng)目是可以開放給「非程式官頁」的管理人員。開放型的後臺，通常具備後臺最高權(quán)限後，可以操作許多項(xiàng)目，相對更要著重管理帳號之資安、密碼強(qiáng)度限制；相對限縮的後臺權(quán)限，對於多數(shù)的使用這來說會比較放心，不容易去改動到會壞掉的東西。

可剔除或分批上線之項(xiàng)目（包含預(yù)算規(guī)劃）

功能規(guī)劃好，將其步上軌道仍須確實(shí)的時程、進(jìn)度規(guī)劃。這部分要考量的執(zhí)行的網(wǎng)頁設(shè)計(jì)公司的規(guī)模、整體預(yù)算和搭配的行銷/上線時程。

有些功能看似很完美，但實(shí)際開發(fā)起來可能耗時，又要大量時間測試。有些小地方或許還可以更精進(jìn)，但或許不影響上線初期實(shí)際操作。這些情況都可能可以針對預(yù)算、時程再來調(diào)整、安排。如話說，沒有完美程式的一天，永遠(yuǎn)都有另外一個功能想要上線，大如 Google, FB, Apple 也需要常常更新程式碼，也關(guān)乎於時程和技術(shù)力，以及適應(yīng)越來越多不同應(yīng)用的使用者習(xí)慣。

測試與驗(yàn)收的標(biāo)準(zhǔn)

網(wǎng)站完成後，需要進(jìn)行測試和驗(yàn)收，測試的基準(zhǔn)有哪一些常是在目標(biāo)規(guī)劃時就看得出端倪的，更好的做法是在開發(fā)同時，就可以撰寫測是腳本，當(dāng)開發(fā)完成後，就以當(dāng)初設(shè)定的情境去模擬、測試與驗(yàn)證（同時應(yīng)該會迸出更多情境的?。?/span>

網(wǎng)站或系統(tǒng)建置一般來說會就大功能驗(yàn)收，許多系統(tǒng)文字、提示訊息或者細(xì)微的 UI 優(yōu)化，都是可以後續(xù)再做調(diào)整的，詳細(xì)內(nèi)容可以參考【寫給客戶看的網(wǎng)頁設(shè)計(jì)（六）網(wǎng)頁上線前之修改】。

負(fù)責(zé)窗口

負(fù)責(zé)窗口是 CTK Pro 私心建議事前規(guī)劃好的。業(yè)主端通常不具有網(wǎng)頁/程式專業(yè)，有時候是營運(yùn)主任擔(dān)任，有時候是設(shè)計(jì)師擔(dān)任，有時候則是負(fù)責(zé)內(nèi)容的同仁擔(dān)當(dāng)，但也有像是負(fù)責(zé)資安或者主機(jī)建置的 MIS 擔(dān)任。不同專業(yè)在負(fù)責(zé)溝通網(wǎng)站/系統(tǒng)需求時，會有不同的結(jié)果。

有些同仁可以快速做圖，補(bǔ)足網(wǎng)站圖片、內(nèi)容區(qū)塊。有些同仁可以很明確知道後臺管理者操作的邏輯、需求和更改方向。有些同仁對於形象要求可以明確傳達(dá)，而有些同仁可以很快的上手系統(tǒng)後臺操作。了解自己專長的定義，並且在需要其他專業(yè)介入，或者找其他人決策時，也千萬別猶豫，唯有更通盤的了解整個網(wǎng)站建置，後續(xù)調(diào)整的方向才會是整個團(tuán)隊(duì)的目標(biāo)！

首先還是你的目標(biāo)

為什麼要做網(wǎng)頁？做了這個系統(tǒng)後，可以達(dá)成什麼好處，可以服務(wù)到誰？完成後預(yù)計(jì)的規(guī)劃是怎樣？

即便是單純的形象網(wǎng)站，也會有一個明確的目標(biāo)，例如：想和消費(fèi)者傳達(dá)某件特定的訊息；或是從網(wǎng)站互動中，讓消費(fèi)者理解企業(yè)裡面等。

功能型網(wǎng)站、電商系統(tǒng)或是特定的系統(tǒng)，目標(biāo)勢必更為明確。例如提升訂單流程之自動化，有效減低人力及人工出錯之機(jī)會；與 Line@串接，提升回報(bào)的親民性及立即性，提升使用者之好感；強(qiáng)化網(wǎng)站資訊安全，發(fā)展出還原演練之 SOP 或是能在攻擊後一小時內(nèi)恢復(fù)網(wǎng)站運(yùn)作。

以上這些，都會是很實(shí)際、確實(shí)的目標(biāo)。通常一個專案會有複數(shù)個目標(biāo)，並且有優(yōu)先順序之分，才方便規(guī)劃和後續(xù)取捨。

定義各大項(xiàng)功能

一個目標(biāo)底下，勢必會有多個功能才能夠協(xié)同完成。在定義功能時，建議採用[使用者中心]之觀點(diǎn)，不需要考量技術(shù)規(guī)格，而是定義目標(biāo)使用者與利害關(guān)係人，找出他們可能碰到的問題及解決方案，以滿足各種使用者為目標(biāo)導(dǎo)向來開發(fā)。

有了以上方向，就很容易找出使用者流程（User Flow），為了完成每一條使用者流程下，網(wǎng)站或系統(tǒng)，就會需要有 X X功能，這些功能，若能在初期，就得以小規(guī)模實(shí)現(xiàn)，並測試，後續(xù)更容易依照測試之反饋，疊代調(diào)整設(shè)計(jì)/功能。

設(shè)計(jì)風(fēng)格與首頁區(qū)塊

風(fēng)格與首頁會是網(wǎng)站的門面，這時其實(shí)也要考量到今天是要建置哪一類型的網(wǎng)站，是形象網(wǎng)站呢？還是功能性網(wǎng)站，或是電商網(wǎng)站需要追求業(yè)績至上。

設(shè)計(jì)風(fēng)格會考量到品牌識別，相關(guān)字詞或設(shè)計(jì)元素，更重要的是影響整個版面會怎麼排（排版設(shè)計(jì)），這關(guān)乎網(wǎng)站系統(tǒng)的首頁會要有哪些元素、區(qū)塊、可操作/互動元件。

偏重功能型的網(wǎng)站，通常會在首頁明顯可見處，放上醒目、具有層級性的按鈕，讓使用者可以完成 90% 以上的操作；偏重形象或是企業(yè)官網(wǎng)，則多會放上重要訊息布達(dá)，或傳遞品牌精神。在第一屏（使用者一進(jìn)到你的網(wǎng)站後）之後，則視情況放上不同重要性的區(qū)塊，這也會是相當(dāng)重要的取捨。

使用者體驗(yàn)

或許你沒有聽過 UI 設(shè)計(jì)師，好的網(wǎng)頁設(shè)計(jì)公司通常會幫你 Cover 使用者體驗(yàn)這一塊，包含前後頁操作符合邏輯、按鈕位置正常、按鈕層級正常（一頁不會有太多主要按鈕）、操作區(qū)塊符合一般使用大?。℅oogle 針對 SEO 撰寫的規(guī)範(fàn)）、連結(jié)通常具有相同的樣式，以維持相同的網(wǎng)頁瀏覽體驗(yàn)。

上述步驟看起來微不足道卻又異常繁瑣，但UI 的設(shè)計(jì)關(guān)乎到建置完成後，前臺的操作體驗(yàn)、後臺管理的順暢程度，輕則影響跳出率，重責(zé)不容易引導(dǎo) user 到你設(shè)定的目標(biāo)頁，更有可能造成後臺管理人員的嚴(yán)重抱怨！

若是後臺管理系統(tǒng)，或是要處裡訂單、申請單、預(yù)約等系統(tǒng)，端看原本的使用情境為何，後續(xù)建置後，管理人力的多寡，想要幾個步驟能夠完成處裡等等。這裡服務(wù)的是作為[網(wǎng)站管理者]或[訂單維護(hù)者]的使用者流程，優(yōu)秀的網(wǎng)站系統(tǒng)公司，會進(jìn)一步和你討論實(shí)際需求再做開發(fā)。

項(xiàng)目優(yōu)先層級

開發(fā)的順序與核心價(jià)值的界定，也是相當(dāng)重要。在開發(fā)時，有些功能會因?yàn)樾枨笙嘈n突，或是需要額外的開發(fā)時數(shù)才能解決某些問題/需求，此時定義出每個項(xiàng)目的優(yōu)先層級，做出對應(yīng)的取捨，會更符合使用者多數(shù)情況的期待。

少數(shù)一般優(yōu)先度，甚至低優(yōu)先度，有可能透過些微的人力調(diào)整，就可以達(dá)成，此時更該考量的是開發(fā)成本，以及碰到狀況的頻率，依這兩點(diǎn)作為依據(jù)，通常不會背離最初設(shè)定的目標(biāo)。

網(wǎng)站需求的格式，其實(shí)沒有一定，用心智圖也好、表格也好，反而是單純的文字不容易讓你要溝通的人了解需求的全貌。網(wǎng)站設(shè)計(jì)、流程通常是具有階層性、方向性、順序性的，把握這幾個要點(diǎn)，要做出一定的需求書一定不難。

有一定規(guī)模的需求，卻又不知道怎麼撰寫/開啟你的專案計(jì)畫，不妨到政府電子採購網(wǎng)，找找網(wǎng)站或是系統(tǒng)相關(guān)的標(biāo)案，下載其規(guī)格需求書，裡面通常有制式的脈絡(luò)或需求可供參考，也是許多接標(biāo)案的廠商參考的關(guān)鍵。

這些則是一般企業(yè)不一定有想到的需求點(diǎn)，詳細(xì)的內(nèi)容我們就下回分曉【下篇連結(jié)在此，告訴你更多沒規(guī)劃到的事】：

• 性能需求
• 資安管理/安全性
• 兼容性需求
• 後臺管理
• 可剔除或分批上線的項(xiàng)目
• 測試與驗(yàn)收標(biāo)準(zhǔn)
• 預(yù)算規(guī)劃
• 負(fù)責(zé)窗口
• 後續(xù)維運(yùn)、更新內(nèi)容

圖片A：壓縮 50%，jpg 檔，檔案大小 246 KB，解析度有縮放，為：1996X1171

圖片B：原圖，檔案大小 1.8MB，解析度 2674X1569

圖片C：壓縮 50%，jpg 檔，檔案大小 397 KB，解析度 2674X1569

–（解析度上傳時還是有壓縮）

如何？有選到覺得是最正確的圖片嗎？如果你不放大來看（或甚至你的螢?zāi)桓静粔蚝茫?，是不是很難分辨這之間的區(qū)隔呢？要是真的放大三張圖來看，在網(wǎng)頁或手機(jī)上，真的看得出來嗎？

由圖片A 到圖片 C 分別是（這裡只擷取 300 x 300 px 大小，故檔案大小不容易超過）：

圖片A：原檔未壓縮，檔案大小 94KB

圖片B：壓縮至 70%，檔案大小 53KB

圖片C：壓縮至 30%，檔案大小 41KB

其實(shí)網(wǎng)頁顯示顏色時，因?yàn)?RGB 代碼，一般是 16 位元（例如 #ff0000，就是紅色，# 008000 是綠色），約有一千六百萬色（甚至是因?yàn)檠b置的限制，某些裝置只能顯示 256 色 / 8 位元），圖片的壓縮細(xì)節(jié)損失，才沒有那麼容易看出來勒！

圖片壓縮工具選擇

網(wǎng)頁在上搞（圖片時），最大的 NG 就是放了不可思議大小的圖片檔！一個首頁以 5MB 計(jì)算，圖片可能佔(zhàn)了 90% 的網(wǎng)站大小，若有 10張 近 500KB 的圖片來說，全部壓縮到 100KB 以下，網(wǎng)站整體大小可能縮減 70% 以上！

以這篇文章範(fàn)例來說，是使用 illustrator 圖片編輯轉(zhuǎn)存時設(shè)置壓縮。若沒有專業(yè)的影像編輯軟體也沒關(guān)係，上網(wǎng)搜「壓縮圖片」其實(shí)有許多免費(fèi)的線上版本可以幫助你縮圖，像是 Tinyjpg，或是 WordPress 的外掛如 WP Smush 都可以達(dá)到類似的效果。（這邊還是會建議在作圖或是輸出時，就設(shè)定完畢，減少圖檔可能失真的機(jī)會）

若是企業(yè) Logo 這種可能需要去背的圖片，就必須存為 png 檔，若能有向量檔，如 svg 檔，在圖片空間節(jié)省上也是很有幫助，且 svg 檔更有著放大看也不會出現(xiàn)模糊的優(yōu)勢，更適合當(dāng)做網(wǎng)頁中 Logo 的檔案格式使用。

總之若是可以提供壓縮檔、原檔（一般是 psd, ai 檔），給網(wǎng)頁設(shè)計(jì)公司，上稿時應(yīng)萬無一失；若是需要自行上稿也別擔(dān)心，照著上面的提示，找到適合的大小還是可以壓縮出符合規(guī)格的圖片的。

大小對了，網(wǎng)頁圖片格式也要正確

列出網(wǎng)頁設(shè)計(jì)中，常見的圖片格式/大小給大家參考：

? 一般圖片：jpg 檔
? 需要有透明背景的圖檔：png, svg 檔
? 需要有動畫效果：gif, svg 檔

? 網(wǎng)頁中全版 Banner 寬度建議：1920px
? 大面積 Banner 寬度建議：1440px 以上
? 一般大圖 寬度建議：1024 以上
? 中型圖片 寬度建議：800 以上

*高度可依照圖片比例調(diào)整，但不宜超出「一個螢?zāi)豢娠@示之範(fàn)圍」為準(zhǔn)。

細(xì)節(jié)決定了網(wǎng)頁設(shè)計(jì)的精緻度

一系列「給客戶看的網(wǎng)頁設(shè)計(jì)」文章下來，以新文章來說，自然流量都不錯。第一個是希望想要製作網(wǎng)頁的企業(yè)/公司，找到適合的網(wǎng)頁設(shè)計(jì)公司，而非用預(yù)算衡量，如此許多看不到的地方、沒想到的地方，就這樣被遺漏過去，最終製作了網(wǎng)站，也難以達(dá)到預(yù)期成效。

以圖片相關(guān)的網(wǎng)頁設(shè)計(jì)細(xì)節(jié)還有下面這些，列出以供參考：

?? jpg 壓縮圖片時，很容易將文字邊緣破壞得模糊不清（又稱為破壞性壓縮）
?? 圖片命名盡可能還是以不要太長，且有意義的英文為主
?? 太大的圖片，除了讀取速度，也可能增加主機(jī)的負(fù)擔(dān)
?? svg 檔案輸出時，要格外注意（大小/陰影等）
?? 提供照片時，盡可能不使用手機(jī)照出來之成品（感光元件限制）
?? RWD 設(shè)計(jì)時，圖片注意事項(xiàng)

延伸閱讀

? （一）網(wǎng)頁字級大小之範(fàn)例
? （二）那些你沒有想到/過的網(wǎng)頁功能
? （三）網(wǎng)頁完成之際，最常問的問題有
? （四）5 個網(wǎng)頁設(shè)計(jì)不容許錯誤