<p>PM /設計 : 陳怡君、子龍</p><p>前端：Dana、Jude</p><p>後端：5FPRO 伍樓專業</p><p>金流商城：flyingV</p><p><a href="https://iing.tw/" target="_blank">go to 2020 小英連任網</a></p><figure><img src="/dataImgs/portfolio/15/01.png"></figure><figure><img src="/dataImgs/portfolio/15/02.png"></figure><figure><img src="/dataImgs/portfolio/15/03.png"></figure><figure><img src="/dataImgs/portfolio/15/04.png"></figure><figure><img src="/dataImgs/portfolio/15/05.png"></figure><div class="grid"></div>

選舉網站是時間與品質賽跑的專案，如同運動員一般，需要團隊在高壓環境下，全神關注的往前衝，任何一個環節漏接，只能趕緊調整自己，第二天再繼續上陣，和平常的專案節奏，相當不同，感謝前方 PM 團隊的信任，將此重責交付給我們，我們很榮幸能在 2020 與多位專業一起前進

2020 小英連任網

<h2 dir="ltr"> <b>需求說明</b> </h2> <p dir="ltr"> 這次來自國家人權委員會的委託，希望能在新的立院會期，提出網站未來發展的方向，改變舊印象，營造新的形象。 </p> <h2 dir="ltr"> <b>中間轉折</b> </h2> <p dir="ltr"> 原本希望可以委託製作完網站的首頁，包含設計與工程，但和資訊部來回後，理解到既有的網站製作廠商的程式寫法，是沒有 API 的作法，也就是外觀與資料庫是黏在一起的，骨肉無法分離，不能只換外觀的皮而已。 </p> <p dir="ltr"> 台灣公部門的網站大多委託資訊部管理，將網站託管在本地端主機，和一般新創公司託管在雲端主機生態不同。政府也建立自己的資安測試，不定期的測試資訊部門的反應，這也是建立在本地端主機的生態下。 </p> <p dir="ltr"> 諸多考量下，仍建議客戶找既有廠商製作網站。對客戶來說，是較佳的解法。我們仍提供設計插圖，可以快速更換印象，達到和立委溝通網站未來發展的目的。 </p> <figure> <a href=""><img src="/dataImgs/portfolio/18/12.png"></a> <figcaption class="align-center"> 現行的國家人權委員會網站截圖（2021/4/27 截取），我們的任務是將其視覺進行老屋翻新工作 </figcaption> </figure> <h2 dir="ltr"> <b>技術新視野 </b> </h2> <p dir="ltr"> 政府和大型企業，提供網站，過往多會買一台主機放置於機房，並組成 MIS 團隊進行部署、上線等工作。 </p> <p dir="ltr"> 開發團隊會將程式碼遞交給機房工程師，再請進行部署、上線。這和雲端環境，由開發團隊自動部署上線的作法相當不同。 </p> <p dir="ltr"> 以客戶角度思量，本地端主機，有以下優勢 </p> <ol> <li dir="ltr">資料放自己家管理，有隱私資料更會傾向放自己家</li> <li dir="ltr">流量再大也不用新增費用，只要多買幾包乖乖的成本</li> <li dir="ltr">資安攻防有既有作法</li> </ol> <p dir="ltr"> 以開發團隊思量，雲端主機，有以下優勢 </p> <ol> <li dir="ltr">開發上線容易，不需要再過一組單位</li> <li dir="ltr">流量再大，雲端主機扛，但要新增費用</li> <li dir="ltr">資安保全由雲端主機配備，不用再煩惱這一塊</li> </ol> <p dir="ltr"> 野薑團隊熟悉處理的是雲端主機的運作方式，然而，若要將網站改為雲端主機，客戶端不只是程式碼編寫會出現問題，還會有組織及流程改動的問題。因此評估之下，認為將設計交付野薑，工程交付給過往提供服務的廠商，將設計與工程的工作切割開來，對彼此來說都是最有益的方式。 </p> <h2 dir="ltr"> <b>溝通文化</b> </h2> <p dir="ltr"> 國家人權委員會辦公室的專案窗口相當有經驗。溝通上過程除了給予明確的指示外，也能清楚將顧慮和感受傳達出來。比如說： </p> <p dir="ltr"> 「 我擔心，這組氛圍抗議太激烈，希望能氣氛緩和，更偏向遊行概念 」 </p> <p dir="ltr"> 「 我擔心，過往身障總是被批評都是接受幫助，希望能朝賦能(empower)方向走」 </p> <figure> <img src="/dataImgs/portfolio/18/01.jpg"> <figcaption class="align-center"> 客戶給予明確的指示文件 </figcaption> </figure> <p dir="ltr"> 這次插畫過程，我們拆分階段為「意象討論」→「草稿確認」→「彩稿細修」→「完稿」。 </p> <h3 dir="ltr"> ○ 意象討論 </h3> <p dir="ltr"> 我們收到一開始的文案是「性別，消除對婦女一切形式歧視公約。實現男女的完全平等，確信一國的充分和完全的發展，世界人民的福利以及和平的事業，需要婦女與男子平等充分參加所有政治、社會、經濟和文化生活等各方面活動。 」 </p> <p dir="ltr"> 在表達這類抽象概念時，我們會提供簡報，說明每一項元素和情緒連結，以及給予人的聯想是那些。這一階段重點是將潛在不適合地元素剔出，尤其注意可能會有公關危機的元素，是這階段溝通重點。 </p> <figure> <img src="/dataImgs/portfolio/18/02.png"> </figure> <div class="grid"> </div> <h3 dir="ltr"> ○ 草稿確認 </h3> <p dir="ltr"> 草稿溝通時會以先前討論過後、確定採納的元素，來進行構圖。窗口若能將草稿給長官確認，可以讓後續不用修改結構。 </p> <figure> <img src="/dataImgs/portfolio/18/03.png"> </figure> <div class="grid"> </div> <h3> ○ 彩稿細修 </h3> <p dir="ltr"> 彩稿交付後可能會有些調整。比如說，希望手有不同膚色，來呈現各種族群的多樣性。畫面的人物所傳達出來的情緒、氛圍等的調整，也會在彩稿時修正。相對於黑白的線稿，彩稿所能傳達的意涵更為完整，因此交付給窗口判斷是否符合專案需要，來進行精細的調整，有助於專案順暢。 </p> <figure> <img src="/dataImgs/portfolio/18/04.png"> </figure> <h3 dir="ltr"> ○ 完稿 </h3> <p dir="ltr"> 彩稿過關後，將插圖放上原先網站的設計稿中，搭配適合的文字和設計，再交付給客戶確認。 </p> <figure> <img src="/dataImgs/portfolio/18/05.png"> </figure> <h3 dir="ltr"> <b>團隊</b> </h3> <p dir="ltr"> PM | 陳怡君 </p> <p dir="ltr"> 視覺發展 | Hanyu、Si-Ray </p> <p dir="ltr"> 客戶團隊 | 國家人權委員會 </p> <h3 dir="ltr"> <b>首頁模擬大圖</b> </h3> <p dir="ltr"> 此專案仍提供一份模擬大圖，作為未來發展方向建議。 </p> <figure> <img src="/dataImgs/portfolio/18/06.png"> </figure> <p> <b>插畫視覺示意</b> </p> <figure> <img src="/dataImgs/portfolio/18/07.png"> </figure> <figure> <img src="/dataImgs/portfolio/18/08.png"> </figure> <figure> <img src="/dataImgs/portfolio/18/09.png"> </figure> <figure> <img src="/dataImgs/portfolio/18/10.png"> </figure> <figure> <img src="/dataImgs/portfolio/18/11.png"> </figure>

來自國家人權委員會的委託，希望能在新的立院會期，提出網站未來發展的方向，改變舊印象，營造新的形象。

國家人權委員會網站-視覺設計與插圖

<figure> <img src="/dataImgs/portfolio/20/coverimg.png"> </figure> <p> <a href="https://learning.nchu.cloud.edu.tw/onlinelearning/">Website Link→</a> </p> <h2> 需求說明 </h2> <div class="grid"> </div> <p dir="ltr"> 「教育部線上教學包」是我們在 2021年5月的急案，因為疫情之故，教學都改為線上課程，老師及學生都急需教育部資源。而「線上教學包」，便是在這情境下產生的。 </p> <p dir="ltr"> 雖然資訊都已經放上網站，但大量的資訊還是讓人頭昏眼花。 </p> <p dir="ltr"> 「我們需要重整資訊，讓老師、行政人員、家長，都能找到資訊，而且這案子要一個月內上線。對了，這是公部門網站，需要通過無障礙 AA 級。」 </p> <figure> <img src="/dataImgs/portfolio/20/01.png"> </figure> <p dir="ltr"> 我們看過網站後 (左邊舊版)，發現有幾個問題： </p> <ol> <li dir="ltr">網站架構不明確，導覽列重複出現</li> <li dir="ltr">相同按鈕樣式，點擊後會對應到 2 種以上路徑，需要重整</li> <li dir="ltr">無法掌握用色邏輯，似乎只有「這裡很重要快看我！」色彩資訊幾乎毫無用處</li> <li dir="ltr">重點很多，但編排沒有邏輯和優先順序</li> <li dir="ltr">沒有 RWD</li> </ol> <p></p> <p dir="ltr"> 我們分析需要： </p> <ol> <li dir="ltr">重整網站架構，改用分頁編排資訊</li> <li dir="ltr">重新規劃每一層編排邏輯</li> <li dir="ltr">重新整理顏色，因為資訊繁多，只能酌量上色，並且只能上品牌色和輔助色</li> <li dir="ltr">表格繁多，未來仍會持續更新。建議採用卡片式，表格式，維持更新彈性</li> </ol> <h2 dir="ltr"> 中間轉折 </h2> <p dir="ltr"> 雙方的配合與團隊編制，主要基於以下因素： </p> <p dir="ltr"> ☑️ 急件 </p> <p dir="ltr"> ☑️ 長官想快點看到結果 </p> <p dir="ltr"> ☑️ 報價合理 </p> <p dir="ltr"> ☑️ 滾動式修正也不怕 </p> <p dir="ltr"> 因為是急件，我們採用「設計 x1 + 前端 x1」團隊編制，而後端和後台則請客戶指派一位內部工程支援。我們不架後台後端，而是讓客戶內部工程師來做後台，配合專案 PM 滾動式調整。 </p> <figure> <img src="/dataImgs/portfolio/20/02.png"> </figure> <p dir="ltr"> 這樣編制的好處是，可以快速產出給客戶看，也能隨著需求滾動式修正。但缺點是，因為沒有資料庫後端，站內搜尋、運算、自由上架等功能，就無法實現。 </p> <p dir="ltr"> 團隊架構確定後，我們接著確認網站架構。這是專案開始時最重要的環節，因為我們需要知道網站要開哪幾頁，網站的整體由哪些頁面構成，這影響到工時，同時也會影響報價。這類資料統整與編輯的任務不難，只要有經驗設計師，都能從重複資訊中，抓出導覽列。 </p> <figure> <img src="/dataImgs/portfolio/20/03.png"> </figure> <p> 接下來的任務會進入設計專業範圍。因為資訊繁多，我們需要將資訊分層級，每一層級都有自己編排邏輯和對應行為，才能讓使用者有所依循，不會如同進入迷霧陣。 </p> <figure> <img src="/dataImgs/portfolio/20/04.png"> </figure> <p dir="ltr"> 重新編排資訊層級，我們分為三層 </p> <h3 dir="ltr"> 第一層編排邏輯——收合設計 </h3> <p dir="ltr"> 運用收合設計，讓資訊壓力減少。只酌量上綠色，作為收合提示。 </p> <h3 dir="ltr"> 第二層編排邏輯——展開主內容 </h3> <p dir="ltr"> 預定使用者進場後，會直接看到主內容，預設展開，並且用卡片和表單來整合資料 </p> <h3 dir="ltr"> 第三層編排邏輯——進階內容 </h3> <p dir="ltr"> 進階內容是使用者有興趣，才會進一步點擊。因為使用者很清楚知道，自己怎麼來到這一層，輔助提示不需要太顯目，建議使用靠左和灰色來處理。 </p>  <figure> <img src="/dataImgs/portfolio/20/05.png"> </figure><p dir="ltr"> 決定好編排邏輯和行為後，用色邏輯也會在此階段一併考慮。 </p> <p dir="ltr"> 色彩是有意義的，不僅是重點提示，也代表指引。在考慮用色時候，我們會分為： </p> <ol> <li dir="ltr"><b>功能性顏色：</b>開合設計我們採用綠色，讓使用者在網站中，看到綠色符號，就能意會到這是有開和功能的綠色。 另外，我們連結一律使用，藍色底線。使用者只要看到藍色底線，自然會明白這和連結有關。</li> <li dir="ltr"><b>氛圍性顏色：</b>通常會用來襯托，營造氛圍，或是作為裝飾性使用。讓整體網站不會這麼冰冷。</li> </ol> <p></p> <figure> <img src="/dataImgs/portfolio/20/06.png"> </figure> <h2 dir="ltr"> 技術新視野 </h2> <p dir="ltr"> 這次我們第一次經歷過無障礙測試。流程如下： </p> <figure> <img src="/dataImgs/portfolio/20/08.png"> </figure> <p> 順利通過檢測後，會拿到這樣的證明： </p> <figure> <img src="/dataImgs/portfolio/20/07.png"> </figure> <p dir="ltr"> 交給窗口上傳後，就能走下一流程 - 人工審核。 </p> <p dir="ltr"> 我們非常推薦這個社團<a href="https://www.facebook.com/groups/2015338878480237">《臺灣無障礙標章受害者聯盟》</a>。因為無障礙是不斷在更新的法規，檢測軟體 <a href="https://accessibility.ncc.gov.tw/Download/Category/52/1">Freego</a> 也不斷更新，Bug 也不一定會修復。這個社團會發表最新的災情，讓人少走彎路。 </p> <p></p> <h2 dir="ltr"> 溝通文化 </h2> <p dir="ltr"> 這次重點在於如何建立設計邏輯。公部門網站大多兼具傳達、容納資訊的角色，不只是單純官網，更接近產品型網站。 </p> <p dir="ltr"> 公部門通常也會開立多個子網站，服務不同部門內的業務。其實非常適合建立 UI system ，作為部門設計 Guideline 。 </p> <p dir="ltr"> 一套良好的 UI system ，會讓使用者覺得，即使在不同網站，也如同使用同一套服務。參考野薑之前的作品<a href="https://www.gingerdesign.com.tw/portfolio/%E6%AD%A3%E6%B3%95%E5%AF%B6%E8%97%8F">《 正法寶藏 》</a>，雖然由不同的設計師經手，但因為有一套良好的 UI system ，後續設計師都能依照 Guideline 實作，風格、體驗、使用者操作，都不會差距太多。 </p> <p dir="ltr"> 這次也因為先建立設計邏輯，也有助於漸少溝通的量。設計邏輯，可以讓窗口在內部討論時候，有一套規則能在內部回應。和廠商討論時，如果出現不符合邏輯的要求，也可以再回到設計邏輯看看。 </p> <p dir="ltr"> 比如說，在後期細修時候，窗口反應內部同事需要，將第三層資訊 btn 上亮綠色，因為擔心使用者回不去上一層。那我們就能依據前面規劃邏輯，說明第三層資訊，屬於進階內容，使用者很清楚自己是怎麼來的，不需要擔心使用者迷路。 </p> <p dir="ltr"> 如此討論，就不會集中在「要不要上色」、或是「上什麼顏色」，而是依循一套用色邏輯在前進。 </p> <figure> <img src="/dataImgs/portfolio/20/09.png"> </figure> <p dir="ltr"> 之前舊版網站，會讓人感覺到，用色混亂，到處都是重點。我們猜想其製作的溝通情境是： </p> <p dir="ltr"> 窗口：那個按鈕要改成綠色<br> 廠商：好 (快結案吧，你要改啥就改啥)<br> 窗口：不好意思，長官說，那個字體要放大，比較顯眼<br> 廠商：好 (快結案吧，你要改啥就改啥)<br> 窗口：不好意思，內部有同仁反應說，那個要加上粗體，這樣才會被看見<br> 廠商：好 (快結案吧，你要改啥就改啥) </p> <p dir="ltr"> 如此一來，就會出現，到處都是重點，到處都是重要的頁面。 </p> <p dir="ltr"> 窗口不只要面對長官，還有來自同仁的建議，一套經得起考驗的邏輯，在此就顯得非常重要。 </p> <p></p> <p dir="ltr"> 團隊 Team </p> <p dir="ltr"> 設計、PM | 陳怡君<br> 前端工程師 | 賴佳毅<br> 客戶 PM | 陳子郁<br> 客戶內容編輯 | 陳美汎<br> 客戶工程師 | 小任 </p> <figure> <img src="/dataImgs/portfolio/20/10.png"> </figure> <figure> <img src="/dataImgs/portfolio/20/11.png"> </figure> <figure> <img src="/dataImgs/portfolio/20/12.png"> </figure>

「教育部線上教學包」是我們在 2021年5月的急案，因為疫情之故，教學都改為線上課程，老師及學生都急需教育部資源。而「線上教學包」，便是在這情境下產生的。

教育部線上教學包

<figure> <img src="/dataImgs/blog/37/01.png"> </figure> <p dir="ltr"> 有些小工想要完成，但簽合約費時費力？一開始規劃的需求，和之後有些差異，又要再開包案來處理，有點小題大作。市場好像有變化了，想做一些小測試試... </p> <p dir="ltr"> 這些心聲我們聽到了～野薑推出，節省雙方心力的服務方式 - 彈性時數計費。用固定合約制和報價方式，讓您的寶貴時間花在專案需求上，讓服務跟得上變化。 </p> <figure> <img src="/dataImgs/blog/37/02.png"> </figure> <h2> <b>服務流程</b> </h2> <ol> <li dir="ltr">需求會議 - 可以預約我們<a href="https://gingerdesign.com.tw/form/demand-form">免費顧問諮詢一小時</a>，說明您的需求，交流可能解決方案</li><li dir="ltr">野薑提供報價單 & 合約，會包含預估時數，建議完工日期範圍，檔期，及付款方式</li><li dir="ltr">在您完成匯款後，我們就會開始動工囉</li><li dir="ltr">每雙週我們會提供報表，讓您知道目前工時及進度</li> </ol> <figure> <img src="/dataImgs/blog/37/03.png"> </figure> <h2> <b>彈性時數與固定包案的差異</b> </h2> <figure> <img src="/dataImgs/blog/37/04.png"> </figure> <p> <br> </p> <div dir="ltr" align="left"> <table> <tbody> <tr> <td> <br> </td> <td> <b>彈性時數制</b><br> </td> <td> <b>固定包案制</b><br> </td> </tr> <tr> <td> 計費方式<br> </td> <td> 依據工時計費&nbsp; 2000/hr<br> </td> <td> 依據專案計費&nbsp;<br> </td> </tr> <tr> <td> 簽署合約<br> </td> <td> 節省行政成本<br> </td> <td> 需合約流程<br> </td> </tr> <tr> <td> 驗收方式<br> </td> <td> 雙週提供報表<br> </td> <td> 專案階段完成後提供服務結果<br> </td> </tr> <tr> <td> 適用工程<br> </td> <td> 10萬以內小工程支援<br> </td> <td> 10萬以上大工程規劃<br> </td> </tr> <tr> <td> 結帳週期<br> </td> <td> 以 1-2 次支付簡化支付<br> </td> <td> 以 3 - 5 次多次支付<br> </td> </tr> <tr> <td> 修改次數<br> </td> <td> 依據需求彈性調整<br> </td> <td> 內含預設修改次數<br> </td> </tr> </tbody> </table> </div> <p dir="ltr"> 時數制適合小工程，不用擔心小工程需求沒人可以做，或是市場很少見的需求。包案制適合雙方對功能想像明確，規格清楚的時刻。如果不確定您的網站屬於小工程或者大工程，請參見〈<a href="https://gingerdesign.com.tw/blog/%E6%96%B0%E6%89%8B%E7%AA%97%E5%8F%A304%EF%BD%9C%E5%93%AA%E4%BA%9B%E6%98%AF%E5%A4%A7%E5%B7%A5%E7%A8%8B%EF%BC%9F%E5%93%AA%E4%BA%9B%E6%98%AF%E5%B0%8F%E5%B7%A5%E7%A8%8B%EF%BC%9F%8F%A303%EF%BD%9C%E7%B6%B2%E7%AB%99%E5%8F%AF%E4%BB%A5%E5%81%9A%E4%BB%80%E9%BA%BC%EF%BC%9F%E9%83%BD%E6%9C%89%20FB%EF%BC%8FLINE@%EF%BC%8FIG%EF%BC%8FTwitter%EF%BC%8FYoutube%20%E9%82%84%E9%9C%80%E8%A6%81%E7%B6%B2%E7%AB%99%E5%97%8E%EF%BC%9F">哪些是大工程？哪些是小工程？</a>〉簡單說明判斷方法。 </p> <h2 dir="ltr"> <b>需要注意什麼事？</b> </h2> <ol> <li dir="ltr">想要先過目報價單 &amp; 合約範例，給主管、採購參考，請填寫您的 Email，我們會寄送給您。詳細請參考〈<a href="https://gingerdesign.com.tw/blog/%E5%A0%B1%E5%83%B9%E7%B0%BD%E7%B4%84%E5%B0%8F%E7%B4%B0%E7%AF%80">報價簽約小細節</a>〉以及〈<a href="https://gingerdesign.com.tw/blog/%E8%A8%AD%E8%A8%88%E9%96%8B%E7%99%BC%E5%A6%82%E4%BD%95%E6%BA%9D%E9%80%9A%EF%BC%9F">網站開發流程</a>〉。</li><li dir="ltr">時數制和包案制都需要排檔期喔，野薑專心能量有限，早點預約比較好～</li><li dir="ltr">時數制也會開發票喔</li> </ol> <p> <br> </p> <h2 dir="ltr"> <b>Q&amp;A</b> </h2> <p dir="ltr"> <b>Q / 和窗口對談算不算時數？</b> <br> A / 不算時數喔，請盡量的描述您的問題，將問題解決最重要。 </p> <p dir="ltr"> <b>Q / 有沒有需求與所需工時的對照表可以參考？</b> <br> A / 官網首頁含動畫範例 |&nbsp; 25 - 30 小時<br> &nbsp; &nbsp; &nbsp; 安裝 SSL | 4-5 小時<br> &nbsp; &nbsp; &nbsp; 最新消息範例 | 10 - 15 小時<br> 歡迎來信詢問～ </p> <p dir="ltr"> <b>Q / 時數制如何驗收工時？</b> <br> A / 我們會先提供您一個時數範圍，例如 15 - 20 小時，多退少補，用多少算多少唷！ </p> <p dir="ltr"> <b>Q / 我可以包套後，追加內容用時數制嗎？</b> <br> A / 可以，請參考維護約 - 保固方案，我們會建議您準備一筆預算，在完工後，依據時數請款。請參考<a href="https://gingerdesign.com.tw/blog/%E7%B6%AD%E9%81%8B%E7%B4%84%E3%80%81%E5%8D%87%E7%B4%9A%E7%B4%84%E6%9C%89%E4%BB%80%E9%BA%BC%E4%B8%8D%E5%90%8C%EF%BC%9F">維護約說明</a>，或是來信詢問。 </p> <p dir="ltr"> <b>Q / 時數制跟後續維護約有什麼不同？</b> <br> A / 時數制適用於雙方對專案想像明確的階段！維護約則依據需求階段，提供不同方案支援。請參考<a href="https://gingerdesign.com.tw/blog/%E7%B6%AD%E9%81%8B%E7%B4%84%E3%80%81%E5%8D%87%E7%B4%9A%E7%B4%84%E6%9C%89%E4%BB%80%E9%BA%BC%E4%B8%8D%E5%90%8C%EF%BC%9F">維護約說明</a>，或是來信詢問。 </p> <p dir="ltr"> <b>Q / 決定方案後，日後我可以轉換計費方案嗎？</b> <br> A / 途中不可轉換。但您可以提出需求，我們會與您討論，在那一開發階段完成後進行轉換會比較好。 </p> <p> <br> </p> <p dir="ltr"> 如果對於時數制有其他疑惑，是以上Q&amp;A沒能回答到的，都歡迎和我們提出討論唷：） </p> <p> <br class="Apple-interchange-newline"> </p>

有些小工想要完成，但簽合約費時費力？一開始規劃的需求，和之後有些差異，又要再開包案來處理，有點小題大作。市場好像有變化了，想做一些小測試試...

哪一個野薑服務最適合我？

<h3 dir="ltr"><b>網站開發完後，還有哪些事需要做？</b></h3><p dir="ltr">網站開發完後，還有哪需事需要做？可以放著不管嗎？讓網站繼續幫我收單賺錢嗎？</p><p dir="ltr">您的疑問，我們都懂！基本上，網站和店面很像，如果要賺錢，也是要持續維持，但和店面不同的是，租金相對低很多，程式碼也能幫助減輕人力，但仍是需要繼續努力「維持店面」！</p><p dir="ltr">延伸閱讀：各種類型網站 vs 建議經營人力</p><h3><b>後續經營的任務和人力</b></h3><p dir="ltr">所以，蓋完網站，真正旅程才開始，以下為大家介紹，做的事情，這裡分為網站內容團隊、工程團隊，兩邊都有要繼續努力的事：</p><p dir="ltr"><b>網站內容團隊</b>（最少 1 人 ，通常由貴司人員擔任，搭配外部專業寫文）</p><p dir="ltr">工作任務 / 需要增添商品、商品文章介紹、收集客戶回饋、整理需求和工程團隊溝通</p><p dir="ltr"><b>工程團隊</b></p><p dir="ltr">工作任務&nbsp; /&nbsp; 監控 Google 爬蟲、協助修 bug 、連結、 文字 、 顏色、小幅度功能修改</p><h2 dir="ltr"><b>維護約方案！</b></h2><p dir="ltr">驗收完的網站，很有可能還會有一段時間，需要來回修改。因為在使用過程，會發現這裡和當初預想不同，需要修改等等。可以參考我們維護約，獲得工程支援，讓網站調適更順手！</p><p><br></p><div dir="ltr" align="left"><table><tbody><tr><td><b>維護約</b><br></td><td><b>方案內容</b><br></td><td><b>建議購買月數</b><br></td><td><b>計費方式</b><br></td></tr><tr><td>加值方案<br></td><td>-功能修改&nbsp;<br>(基於已有資料小幅度修改)<br>- 網站經營基礎教學<br>- bug修復<br>- 文字/顏色/連結配合修改<br>- 重啟服務<br></td><td>網站上線後 3 個月，購買此約，可以因應多方要求修改<br></td><td>依據需求複雜度計費<br></td></tr><tr><td>安心方案<br></td><td>- bug修復<br>- 文字/顏色/連結配合修改<br> 重啟服務<br></td> <td>網站上線後 6 個月，購買此約，可配合客戶回饋修改<br></td><td>依據需求複雜度計費<br> </td></tr><tr><td>保固方案<br></td><td>- bug修復<br>- 重啟服務<br></td><td>網站上線後 6 個月，工程支援，確保持續收單不斷線<br> </td><td>固定月費<br></td></tr></tbody></table></div><figure><img src="/dataImgs/blog/22/cover.png" data-image="photo-5"></figure><h2 dir="ltr"><b>升級約是什麼？</b></h2><p dir="ltr">當網站度過 12 個月，滿一歲後，恭賀！想必您更理解如何經營數位世界的事業了！如同店面需要年度維修，車子年度檢修，網站也是一樣～</p><p dir="ltr">因為網路世界是動態的，各種事物也不斷升級中，網站放著不升級，可能 5~10 年後會需要面臨砍掉重蓋！升級的成本，有可能和蓋一個新網站相同，而且還要面臨流失客戶的風險，請務必做好升級規劃！</p><p><br></p><p dir="ltr">但如果您經營一年，發現這點子不起色，猶豫是否要投入資源升級，我們會建議，先不要升級，考慮我們的<b>需求研究 / 網路知識顧問服務</b>，幫忙診斷一下 : )&nbsp;</p><p dir="ltr">如果您的事業，已經穩定從數位世界獲得益處，或是您的服務，已被大量用戶認可。我們會非常建議您，每年定期升級，讓網站持續發揮效益！</p><p dir="ltr">我們知道事業展開很耗心力，只要是野薑的客戶，我們會定期診斷您的網站，讓您少煩一件事~</p><p><br class="Apple-interchange-newline"></p>

網站如同一家店面，年度維修也是必須的

維運約、升級約有什麼不同？

<h2><b>維護約方案！</b></h2><p dir="ltr">驗收完的網站，很有可能還會有一段時間，需要來回修改。因為在使用過程，會發現這裡和當初預想不同，需要修改等等。可以參考我們彈性時數方案，獲得工程支援，讓網站調適更順手！</p><p dir="ltr"><b>計費方式：</b></p><p dir="ltr">專業工程支援一小時 2000</p><p dir="ltr"><b>如何採用：</b></p><p dir="ltr">step1&nbsp; 野薑依據需求評估時數，並提供報價單</p><p dir="ltr"><span class="Apple-tab-span"> </span>ex: 某 A 需求，需要 3-4小時完成</p><p dir="ltr">step2&nbsp; 客戶同意時數</p><p dir="ltr">step3&nbsp; 預支時數 5 成，作為合約成立</p><p dir="ltr">step4&nbsp; 工程支援</p><p dir="ltr">step5&nbsp; 驗收，若需修改，則再計入時數</p><p dir="ltr">step6&nbsp; 支付剩餘時數</p>

不同團隊規模，讓驗收更有效益

選擇適合團隊的驗收方式

<h2><b>專案開發</b></h2><p>報價合約通過後～會進入彼此最開心的設計開發時期，也是合作的開始囉！我們會盡力協助您，將您的想法落實在網路上，但也需要您傳達團隊內的想法。</p><figure><img src="/dataImgs/blog/20/cover.png" data-image="35416bd78460f6f24ecd8b2be5c8d500"></figure><p dir="ltr">延伸閱讀：新手窗口該如何是好？<br class="Apple-interchange-newline"></p><h3 dir="ltr">以下列出客戶常見的問題，可以在需求階段，討論您想要的服務 -</h3><ul><li dir="ltr"><b>需求研究：</b>如果還不確定服務流程、自家客戶狀態，可以考慮從需求研究開始，讓企劃更踏實。</li><li dir="ltr"><b>設計提案：</b>我們會用簡報方式，與您討論風格、網站主要服務，通常會搭配內部簡報，與您一起向主管說明想法。</li><li dir="ltr"><b>設計執行：</b>此階段進入我們專業範圍，我們會考量技術穩定性、使用者經驗、客戶品牌、客戶。</li></ul><ul><li><b>設計驗收</b>：您可以依據團隊內狀況，選擇不同驗收方式，我們也會在需求階段，確認您期待的驗收方式，請參考下方「選擇適合團隊的驗收方式」。</li></ul><h2><b>設計階段的溝通﻿</b><br class="Apple-interchange-newline"></h2><p dir="ltr">請將網站想成網路店面，您會想要給客人什麼感覺呢？您可以透過<a href="https://www.pinterest.com/"> pinterest</a> 網站找到很多範例。或是 Google 看你同行的網站，記錄下來給人的感受，值得學習的點。找找喜歡家具品牌、裝潢風格，試著描述你覺得好的地方，想調整的地方，這類傳達都能有效幫助設計師理解喔！</p><p dir="ltr">因為設計階段是個發散收斂的雙菱形過程。您會隨著設計進程，有不少想法冒出來，這些都可以記下來。</p><figure><img src="/dataImgs/blog/20/02.png" data-image="0dd695e40afffb669db5f310baf308ab"></figure><p dir="ltr">網站逐漸成形讓人感到開心，但別忘了，最終要將訪客達成目的才行。我們建議每一頁，都要問這三個問題</p><ol class="arx-block-state" style="margin-left: 0px; padding-left: 20px;"><li dir="ltr">誰將造訪這個網頁？</li><li dir="ltr">你希望網頁造訪者做什麼？</li><li dir="ltr">你要如何讓他們做？</li></ol><p dir="ltr">我們也會依據您的需求清單，不斷和您核對，您的想法是否能解決問題？ 依據我們經驗，第一個想法通常太直覺，我們建議讓子彈飛一下，讓想法有生長空間。請記得愛上問題，解決方案有很多種喔！</p><p dir="ltr">看起來有難度？別擔心，這些都包在野薑設計服務範圍，我們會協助您一步步打造網站。<b></b></p><h3>測試階段的溝通</h3><p>在測試階段，我們會給您 Beta 網站版本，您可以參考下方驗收方式，選用最適合團隊的方式驗收</p><p><br class="Apple-interchange-newline"></p>

理解設計開發流程，讓腦袋idea發揮到對的地方，表達更到位

設計開發如何溝通？

<h2><b>如何估算專案費用？</b></h2><p>在瞭解需求後，我們會展開第一次估價，如果已經有價格帶是最棒的！我們可以在前一階段需求會議，依據價格帶，抓出最核心的需求。但如果拿捏不準價格帶，也沒問題！有兩種方式可以協助評估：</p><p><b>A.</b> <b>估算服務</b></p><p>可以從我們提供「<b>我想參考報價、時程</b>」服務！參考我們作品集，找一個最接近想像的專案，點選「<b>我想參考報價、時程</b>」，填上聯絡資訊，我們會寄過去報價和時程，給您參考！快速抓價格帶～</p><figure><img src="/dataImgs/blog/19/cover.png" data-image="2308360feec252ec477a9d86ab6fd8a7"></figure><div class="grid"></div><p><b>B. 使用免費顧問一小時﻿</b></p><div class="grid"></div><p dir="ltr">歡迎使用免費顧問諮詢一小時服務，在瞭解需求後，我們會寄送建議信給您。理解需求後再進行估價，會更精準喔。</p><p><a href="https://www.gingerdesign.com.tw/blog/%E7%B6%B2%E8%B7%AF%E7%9F%A5%E8%AD%98%E9%A1%A7%E5%95%8F%20-%20%E6%9C%8D%E5%8B%99%E4%BB%8B%E7%B4%B9">參考免費顧問一小時</a></p><h2><b>﻿估算下一步？</b><br class="Apple-interchange-newline"></h2><p class="arx-block-state">如果幸運的彼此有對到，我們可以更仔細的討論需求和報價。有時候，集中資源將核心需求做好，反而更快能達到目標！我們可以協助評估，哪些是核心需求，及後續維運成本，並找出預算內的技術，達到目標。</p><figure><img src="/dataImgs/blog/19/01.png" data-image="f5ca5446599a5aeb766b831d7fcf1495"></figure><p>這一階段，雙方將會花一定時間，來會討論報價和需求。</p><p>也為您介紹報價單結構，讓您更快掌握 : )</p><figure><img src="/dataImgs/blog/19/02.png" data-image="37292d2429d47be23e5dc6bb1075a115"></figure><p dir="ltr"><b>報價通過後，簽約保護彼此吧～</b></p><p dir="ltr">野薑的合約結構：</p><ol><li dir="ltr"><b>服務建議書、提案簡報</b>，會是簽約前，雙方同意的專案方向</li><li dir="ltr"><b>報價單說明費用，匯款方式</b></li></ol><p><b>工作會議決議辦理、Email、文字往來：</b>擔心專案細節寫不進合約？專案合作中，需求討論紀錄下來，也會作為合約內容之一</p><figure><img src="/dataImgs/blog/19/03.png" data-image="80c6dbfbdd2a479f2e44ce880ce42828"></figure><p>報價通過後，進入簽約流程，是保護彼此的好方法喔！野薑也會為您預約合約說明，您可以透過視訊、通話方式，讓我們為您做說明，節省您的心力！有任何想法，也能當下討論，讓合約更貼近彼此的狀況。</p><figure><img src="/dataImgs/blog/19/04.png" data-image="a8469a14c55cd8e9aaffe29386a47301"></figure><p dir="ltr">當上述流程都完成後，我們就算正式攜手合作，會與您一起完成專案 : )&nbsp;</p><p><br class="Apple-interchange-newline"></p>

網站設計報價擔心超出預算，野薑提供估算服務，快速故算報價範圍

報價簽約小細節

<h1><b>專業建議</b></h1><h3><b>網路知識顧問是什麼？</b></h3><p class="arx-block-state">網路知識如茫茫大海，能做的事情越來越多，在資訊爆炸時代，節省注意力更快找到前進方向。變化萬千的網路世界，資訊爆炸的時代，到底要從何開始？該如何選擇？新的知識領域，有入門可以學嗎？</p><h3><b>我能獲得什麼？</b></h3><p dir="ltr">✓ 第一次免費通話諮詢 ( 60min )</p><p dir="ltr">✓ 平易近人的解釋，讓您快速理解，基礎網路概念</p><p dir="ltr">✓ 新手入門的指引方向、關鍵字，讓您在茫茫知識大海中有方向</p><h3><b>如何開始？</b></h3><div class="grid"></div><p dir="ltr">1. 填寫「<a href="https://beta.gingerdesign.com.tw/form/demand-form">客戶需求表單</a>」</p><p dir="ltr">2. 在<b>我需要的協助</b>，勾選「✓網路知識顧問」</p><p dir="ltr">3. 請盡量將表單填寫完整，讓我們更加理解您！顧問很快會和您聯繫～</p><p dir="ltr">備註：因為網路知識如茫茫大海，我們會在守備範圍內，為您提供最高品質的回答。若您的問題，需要特殊顧問，我們在徵求您的同意後，會為您協尋轉介適合的顧問。</p><h3 dir="ltr"><b>顧問結束後，如何進行下一步？</b></h3><p>顧問服務結束後，我們會為您整理需求信給您，並邀請您給我們評分回饋。</p><p>過往作為窗口，常常東問一家，西問一家，慢慢拼湊專案的知識。不過隔行如隔山，這一路拼湊下來，也是耗費不少心力，有些知識在 Google上找到也無法理解。</p><p>我們感受到尋找合作對象的困難，除了推出免費網路知識顧問，您也可以訂購「<b>需求專業建議」</b>付費服務，能協助您將最核心需求切出來，並提供施作建議簡報給您。</p><pclass="arx-block-state">這份文件可以讓您帶入團隊討論，與主管確認意向，能有效的節省來回溝通時間和心力。因為是專業製作，未來即使在報價階段無法和野薑合作，您也可以持有這份文件，與其他工作室討論。是有效節省您的心力的好方法。</p>

注意力珍貴年代，釐清需求再出手

Blog 文章

文章分類

以下是【野薑服務】有關的文章

哪一個野薑服務最適合我？

維運約、升級約有什麼不同？

選擇適合團隊的驗收方式

設計開發如何溝通？

報價簽約小細節

看我們如何協助釐清

2020 小英連任網

國家人權委員會網站-視覺設計與插圖

教育部線上教學包

Blog 文章

文章分類

以下是 【 野薑服務 】有關的文章

哪一個野薑服務最適合我？

維運約、升級約有什麼不同？

選擇適合團隊的驗收方式

設計開發如何溝通？

報價簽約小細節

看我們如何協助釐清

2020 小英連任網

國家人權委員會網站-視覺設計與插圖

教育部線上教學包

以下是【野薑服務】有關的文章