介面研究與練習 · 服務網站與客戶工作台研究
CUT.STUDIO 影片剪輯工作室
獨立研究 Nas.com 介面，重建 31 個原站公開頁面，並接入真實客戶與管理員流程，涵蓋需求、私有檔案、回饋與版本審閱。
這是自主製作、概念設計或介面練習，展示可查看的設計與實作；並非客戶委託成果，未提供客戶營收或轉化成效證明。
項目拆解
從頁面結構，到實際畫面。
ZequnWeb 自主作品，非客戶委託；Demo 中的品牌、評價與數據屬於展示內容，不代表已核實的客戶成果。
完整網站與手機畫面
英文 Demo 的桌面與手機長圖會自動從頂部展示到底部。可暫停後手動捲動、從頭重播，或開啟原圖。
01 / 頁面架構
訪客的資訊瀏覽路徑
- 01服務頁面
- 02價格與常見問題
- 03帳戶
- 04項目需求
- 05檔案與回饋
- 06交付審閱
02 / 視覺設計
黃色 Start 按鈕與大幅媒體延續已註明來源的 Nas.com 參考；公開頁面介紹服務，自主實作的工作區以狀態、檔案與版本組織協作。
03 / 響應式取捨
服務展示與工作區採用不同資訊密度，響應式版面將導覽、需求欄位和交付操作組織到窄螢幕內容區。
依據現有實作整理的設計分析，不將其表述為客戶調研或使用者測試記錄。
具體實作
技術組合
- HTML
- CSS
- JavaScript
- Cloudflare Pages Functions
- D1
- R2
- Cloudflare Pages
只列出現有項目記錄或公開腳本可支持的技術；內容架構與 UX 在上方獨立說明。
介面研究與練習
交付內容與項目結果
概念重點
設計與實作說明
項目背景
這是 ZequnWeb 為虛構品牌 CUT.STUDIO 製作的獨立研究。公開頁面視覺與已註明來源的參考素材依據 Nas.com 重建，客戶工作台與後端由本站獨立實作；並非客戶委託，與 Nas.com 無關聯。
設計帶來的改變
依據原站版面、CSS、媒體與互動重建 31 個核心公開頁面及標準路徑別名；另外以 Cloudflare Pages Functions、D1 與私有 R2 儲存實作本站客戶工作台和管理員後台。
可查看的設計重點
- 31 個核心公開頁面保留原站版面、媒體與互動，並提供標準路徑別名
- 客戶與管理員角色使用真實工作階段及專案所有權驗證
- 私有 R2 檔案透過登入驗證上傳與下載，每個檔案限制 25 MiB
- 專案需求、進度、留言與活動紀錄持續儲存於 D1
- 交付支援多版本審閱、修改請求與最新版本核准
- 一次性復原碼可恢復帳號存取，無模擬郵件寄送流程
需要解決的問題
服務展示需要連接項目需求、素材權限、回饋及交付審閱，同時清楚註明參考介面來源。
設計方案
依據原站版面、CSS、媒體與互動重建 31 個核心公開頁面及標準路徑別名；另外以 Cloudflare Pages Functions、D1 與私有 R2 儲存實作本站客戶工作台和管理員後台。
交付內容
- 31 個原站公開頁面、標準路徑別名與響應式導覽
- 參考站字體、媒體、平滑 FAQ 與素材來源說明
- 註冊、安全工作階段登入、變更密碼與一次性復原碼
- 客戶需求、每個檔案最多 25 MiB 的私有上傳與專案回饋
- 管理員指派、進度更新與專案活動紀錄
- 多版本交付、修改請求與最新版本核准
技術與實作
- HTML
- CSS
- JavaScript
- Cloudflare Pages Functions
- D1
- R2
項目價值
這個概念展示了甚麼
依據原站版面、CSS、媒體與互動重建 31 個核心公開頁面及標準路徑別名；另外以 Cloudflare Pages Functions、D1 與私有 R2 儲存實作本站客戶工作台和管理員後台。
查看其他項目 →由此開始
想把這個方向變成您的網站？
提供業務類型、現有網站或參考網站、目標客戶及大概預算，我會先協助您釐清有用的製作範圍。