形象網站設計

R Studio互動形象網站

讓品牌介紹有記憶點，也讓訪客知道下一步如何聯繫。線上體驗：https://r-studio-landing-demo.vercel.app 建議開啟網站並向下捲動，體驗完整互動。【設計重點】以朱紅、黑色與米白建立品牌風格，搭配大字、留白及光影，串起服務介紹、作品與合作流程。【互動亮點】・Logo 開場動畫與捲動敘事。・庭院場景、紅門、落葉及水面互動。・文字揭幕、影像轉場、視差與橫向展廊。・合作流程、常見問題及需求摘要入口。【閱讀體驗】規劃桌機與手機版面，提供靜態閱讀及減少動態的替代呈現；場景離開畫面時暫停繪製，圖片採延遲載入。【作品範圍】本作品為工作室自主設計與開發的概念 Demo。場景圖片含 AI 生成素材，互動另以程式實作；需求摘要只在瀏覽器內產生。實際專案依品牌、內容與預算重新規劃。

使用的技能專長

HTML5
CSS3
RWD
WebGL
SVG
JavaScript
UI/UX設計

・2026/10/02 更新

更多來自 R Studio 的作品

WordPress升級與版面優化

葡萄樹傳媒｜讓既有 WordPress 網站順利升級，也更容易維護。網站：https://vinemedia.org/ 【專案目標】保留原有文章與影音內容，處理舊版 PHP、外掛與佈景主題的相容性問題，並改善版面與內容管理方式。【執行重點】・PHP 升級：盤點環境、建立備份與隔離測試站，完成 PHP 8.2 升級及正式環境分批部署。・外掛相容性：檢查版本、佈景主題與編輯器，修復舊短碼、文章編輯及內容顯示問題。・版面調整：整理中文首頁、英文頁、文章及分類頁的導覽、字體與間距，檢查桌機及手機閱讀。・後台管理：增加首頁精選內容、專欄與圖片 Banner 管理，方便選文、排序與換圖。【交付成果】依當次上線紀錄完成 30 項前台回歸檢查，交付外掛版本清單、後台操作說明、備份回復流程與技術交接手冊。【作品範圍】 R Studio 負責既有網站升級、相容性修復與版面調整。品牌、文章及影音屬原站；圖片為公開網站畫面，技術成果依本案交付紀錄整理。

網站維護經營

NexCRM企業管理介面

NexCRM｜把管理資料與工作流程整理清楚。【作品重點】・管理儀表板：集中查看資料概況、工作狀態與待辦項目。・組織與簽核：用組織圖呈現階層與流程設定。・資料列表：清楚排列欄位、狀態與日常操作。・深淺色介面：依使用情境安排閱讀層次。・AI 助理介面：呈現資料問答的操作方向。【適合的需求】客戶管理、業務追蹤、表單與內部作業系統。若你目前用 Excel 或多套軟體管理資料，可以先從最常用的流程開始整理。【展示範圍】圖片沿用 NexCRM 既有系統畫面，展示管理介面與流程設計。新專案的功能、資料權限、AI 應用與外部串接，依實際需求另行規劃及驗收。

網路應用程式設計

114

品牌官網＋微型電商Demo

拾光小集｜從品牌介紹，到商品探索與購物體驗。線上 Demo：https://r-commerce-client-demo.vercel.app/ 【展示內容】・品牌首頁：主視覺、品牌故事、選品分類與行動入口。・商品目錄：分類、關鍵字搜尋與價格排序。・商品詳情：圖片、材質、顏色、尺寸及數量選擇。・穿搭互動：從穿搭照片預覽單品，連到商品資訊。・購物流程：購物袋與模擬結帳介面。【設計重點】以暖白、低飽和綠與自然影像建立品牌風格，清楚安排商品資訊與操作按鈕，讓瀏覽流程容易理解。【適合的需求】品牌形象官網、選品展示、商品型錄與小型購物網站。先確認品牌內容、商品資料與操作流程，再分階段開發及驗收。【作品範圍】 R Studio 正在開發的自主 Demo。圖片為實際網頁截圖，商品與穿搭照片含 AI 示意素材；購物為模擬體驗，不實際扣款或配送。正式金流、物流與第三方串接，另依專案確認及驗收。

網站架設

157

AI課程招生頁設計

把課程特色、學習內容與報名入口說清楚。【作品重點】・主視覺與行動按鈕：讓訪客快速了解主題與下一步。・課程內容：用分段介紹與卡片整理學習重點。・方案比較：清楚排列內容與費用，方便評估。・報名入口：在頁面適當位置安排詢問與報名按鈕。【適合的需求】講師課程、工作坊、活動招生與單頁網站。先整理「誰適合參加、能學到什麼、如何報名」，再安排視覺與內容層次。【展示範圍】本作品展示招生頁的視覺與內容編排。頁面中的學員數、評分、成效與金額為版面示意，不作為工作室實績或服務報價。會員、付款、影片觀看與學習紀錄等功能，需另依需求開發及驗收。

網頁設計

125

R Studio

5小時前上線平均 3小時內回覆