About Project
弼伽機械為專業生產造紙制漿設備和紙漿模塑設備、模具研發與製造之技術創造型公司。早年以營運造紙工廠為業，於 2017 年成立現有公司。
本專案是弼伽為建立公司專業形象累積知名度、廣泛開發各路客群所委託設計與建置的企業網站。
Role
UI/UX designer
Front-end designer
Team
Front-end engineer,
Project manager
Client
BIGUAR MACHINE
Client Goal
-
提升公司知名度。
-
開拓網路、國際客源。
-
優於其他競爭企業的網站瀏覽體驗。
Project Goal
-
以視覺與介面設計克服傳產既定印象，協助企業打造品牌網路形象。
-
建置符合現今趨勢及技術規格的響應式官網。
Requirements
-
制定官網設計規範。
-
競品網站觀察分析。
-
評估規劃網站架構。
-
協助企業進行網站內容規劃與編排。
-
企業產品圖文美化與挑選。
-
支援中英文雙語系介面。
User Interface
Index
Layout description
專案首頁訴求設立兩點目標：
一、營造品牌形象為主設計
透過現今的設計趨勢及開發技術，簡化首頁功能性、以俐落標語帶出企業文化與精神，展現相比同行顯得耳目一新之企業形象。
二、做為四大分頁的行動召喚連結
節錄各分頁重點，讓瀏覽者透過首頁在第一時間迅速確實掌握全站資訊，並引導查閱詳情。
01.企業第一印象建立
透過整頓有序、空間明亮的廠辦環境、簡潔有力的信念目標，明快呈現企業內在文化和視覺形象。
行動召喚：連結「關於弼伽」頁面，了解更多公司沿革與專業所在。
02.產品訴求與使用表現
產品屬製造機械，買家購入儀器定會將生產良率納入考量，因而本區塊將產品和產品製品做為主角設計，目標增加購買說服力、建立打造專業形象與信賴感。
以行動召喚串連「產品介紹」分頁，在單元中進行更詳盡的介紹。
03.技術工藝與匠心精神
除了單項產品設備，企業亦希望能夠展現自己擁有完善的製造系統和工法技術。
首頁區塊提供瀏覽了解企業精神、具備哪些系統技術，並以按鈕做行動召喚串連「工藝介紹」分頁，在分頁單元中進行更完整的工藝系統說明。
04.聯絡資訊與 sitemap
同上面幾個區塊，首頁部分附上完整的聯繫資訊，並以此區塊進行 行動召喚引導，帶瀏覽者進入「聯絡我們」頁面了解更多聯絡方法與細節。
頁尾部分則提供完整全站區域連結和聯絡資訊，讓瀏覽全暫時能夠清楚知道自己的位置不迷失方向、可迅速切換前往欲查看之頁面單元。
-
尺寸技術需求：
RWD 響應式網頁 / Bootstrap4 & Sass
參考 Logo 作為大區塊比例用色來回應客戶需求，除了與同業做出操作體驗與技術上的突破差異外，介面視覺部分也要營造與其他競爭對手不同、給人耳目一新感覺的設計。
• Style
首頁不同於一般穩重方正的設計、配合鮮明的企業色加入斜角、對角線等元素展現產業活力，並以背景色塊與廠房實景照片結合豐富版面及提升瀏覽者對企業印象的真實感。
Strait & Solution
-
1. 專案中期發現插畫角色不夠亮眼突出，該怎麼修正強化？一、透過調整曲線比例、提高配色飽和度與對比性，增加角色的戲劇性張力。 二、優化情境描繪： 利用段落情境讓角色更融入其中，增加圖文契合度，以強化角色與登陸頁描述情境內容之間的連結。
-
2. 與團隊前端工程師 (/網頁設計師) 對於介面視覺有不同的看法 (配色上、圖面呈現上、執行技術上) ，是如何處理面對的？在未影響到策略層面的視覺設計以執行導向優先進行溝通妥協，透過大量調整與溝通經驗進行協商製造雙贏。 重點實例分享： 在「分銷功能」區塊對於呈現方式分為以故事敘述的文章段落，以及簡潔條列式的資訊圖表兩種。 前者期待透過賣家第一人稱敘事行口吻在使用旅程分享過程中點出分銷功能使用方法及其便捷性。 後者考量段落敘事文字過於冗長瑣碎而採用列點式的簡易資訊設計，減少版面文字量更加俐落明快，讓使用者能快速掌握單元信息重點。 在團隊堅持採用段落文章式排版呈現後，經過多次溝通，最後爭取到嘗試在插圖中加入簡單的圖表幫助使用者了解文句陳述情境。
-
3. 資費方案單元的分項說明和 CTA 按鈕經歷多次修改，最後是如何定案的？一、方案內容： 原以新舊制可用功能與費用作為主要說明內容，再加入年約收費制度說明顯得複雜無章。 後重新定義登陸頁面是配合全新收費方案改版上線，把視同年 9 月之後註冊之新制用戶為主要訴求對象。 故將表格改為針對未註冊新用戶之資費方案列表，舊用戶轉新用戶之相關說明統一由後台系統進行公告。 二、Call to action 按鈕： 原本三個分項都各自對應一個按鈕，但其中有兩個其實一樣都是註冊行為的召喚作用，在註冊流程中無法讓新用戶了解二者方案的差異。 在參考 CTA 倒三角的視覺設計原則後，決定以單一按鈕突顯聚焦、減少使用者對方案間的混淆，並在原按鈕處增加註解文字區塊，降低在視覺上的失衡。
-
4. 企業尚在探索品牌定位、建立差異化的過程，對專案執行有什麼樣的影響？在電商平台百家爭鳴的局勢中，需尋找出自己的獨特性與立足點。而當時的狀態確實造成一些執行推進上的困難。 將與視覺及介面設計有關的任務列出，和產品目標需求加以比對，調整決策出執行上線的順序權重： 角色設計： 第一階段＿賣家/消費者形象（已完成上線） 第二階段＿輕電商客服形象 產品介紹： 第一階段＿展現使用者相貌——分銷、服務特色單元（已完成上線） 第二階段＿形象動畫影片 (已完成分鏡腳本大綱) 降低產品介紹客服成本： 第一階段＿方案說明、系統介紹、各形態規模頁面範例（已完成上線） 第二階段＿FAQ頁面 (已完成設計) 、聊天機器人 （在任職間公司未正式進行第二階段項目排程，僅能以製作交付完整策劃文件以供日後接續執行之參考。）