PIMS 產品官網
專案簡介
一人負責製作PIMS 智能秤重系統的產品官網。
目的
開發潛在客戶，介紹產品功能、應用場景與聯絡方式。
負責項目
PM/UI設計/網站架設
核心負責項目
主導整體畫面UI設計，頁面內容排版
與廠商進行現場訪談、觀察實際流程
使用 Webflow 架設網站，撰寫 CSS/JS 實現動畫與互動功能(GPT輔助)
設計主導包括 IA、動畫設計、頁面排版與形象影片
使用工具
illustrator , Figma , Ae , Webflow , ChatGPT
頁面設計/UI
重點頁面展示
首頁
BN可以快速想填寫表單或者直接看詳細介紹的人可以快速找到連結，往下滑會展示PIMS的小動畫，很簡單也很清楚的介紹PIMS APP是什麼，以及能做到什麼。再往下放上一些知名合作廠商的logo，點擊可以連接到相關案例介紹頁面。
產業
分析各個產業實際應用的狀況，可以讓使用者更容易去想像使用情境，首先放上"你是不是也遇過這種問題"(痛點)，接著顯示該產業應用APP的流程，下面用文字介紹其他實際的應用，最後展示我們做到了什麼。
案例
內容大綱是廠商遇到的痛點，改善後的使用流程，在使用APP前和使用後對比，APP與廠商相關的照片和影片。
方案試算
計算各個介面搭配，以及租賃或買斷的金額計算，計算完成後下方的表單會自動帶入使用者選擇的方案，留下聯絡資訊後即可寄給我們。
功能介紹
Line泡泡
每個頁面上放上浮動泡泡，使用者可以隨時聯絡專員
提醒區塊
在首頁BN下方放上，提醒使用者可以往下滑，下滑後會消失
流程動畫
產業流程的循環動畫
未完成頁面彈跳小提示
未完成頁面呈現半透明狀態，這時候點選會提示還在準備中，可以讓使用者知道未來會有什麼頁面
首頁滑動動畫
用滑動的動畫增添互動性，快速讓陌生的受眾快速瞭解我們產品的功能以及價值
專案心得
專案中遇到的困難
沒有從零開始架設網站的經驗
當時公司是使用wordpress架設公司官網，但在維護和風格改版的時候遇到很多限制，因此接到此專案的當下就決定不要用這個平台架設，但我也不會直接打code架設網站。
解決方案
當時剛好看到一個很接近Figma操作方式且自由度很大的平台Webflow，花了一點時間學習後發現他是一個操作介面對設計師很友善的平台，於是就開始使用Webflow架設網站，有先學習了一些基礎的前端，理解class div等的觀念後，慢慢把網站架設完整，中途一邊學習一邊實做。
對於規劃完整網站沒有頭緒
不太清楚該如何開始規劃一個完整的網站。
解決方案
先去瞭解受眾會想要知道什麼資訊，以及什麼內容是吸引他們的，接著使用IA資訊架構的方式去分頁面，主要功能分在第一層以此類推，寫出每個重點頁面的內容大綱，請同仁提供相關文案資訊，然後使用Figma製作排版，方便隨時調整，整體確定後才開始架設網站。