阿檸 a.ling 網站設計案例
城市覺醒，一口到位用一口檸檬爆擊
我們將阿檸清新鮮明的品牌個性，轉化為兼具視覺層次與互動節奏的網站。透過飲品與食材的立體編排、捲動轉場及產品輪播，讓品牌特色隨瀏覽逐步展開；並延伸一致的設計語言至飲品、門市與加盟專區，整合品牌展示與資訊查詢，呈現從視覺設計到前端實作的完整成果。
Colors
以品牌綠傳遞檸檬飲品的清新印象，搭配奶油白營造明亮留白；深綠建立文字與區塊層次，霧綠柔化背景，黃綠則點亮按鈕與互動細節，串連整站一致的視覺語言。
#018C39品牌主色・標題與主要視覺
#0A5A2B深色區塊・文字層次
#FFFFEB頁面底色・閱讀留白
#C9DDA0輔助背景・漸層層次
#C5DF4B按鈕・互動重點
首頁把招牌飲品、品牌形象與理念串成一段連續捲動。右側為官網首頁實際錄影。
雙杯、檸檬切片與冰塊拆成獨立去背圖層，前後交錯擺放；LEMON PUNCH 與 LEMON RUSH 大字穿插在杯子前後，讓平面畫面也有景深。
每個圖層依前後距離設定不同的漂浮幅度，滑鼠移動時產生視差；切片與冰塊像懸在空中，捲動時再依序飄散，維持清爽輕快的節奏。
往下捲動時，杯子與切片依序飄散、首屏淡出，接著帶出品牌形象照與「職人精神」理念文案，產品與品牌故事在同一段捲動中接續。
首頁以圓形舞台輪播招牌飲品，飲品頁再以分類菜單完整列出品項與價格。
每個系列以圓形飲品照開場，綠色標籤標出「鮮乳茶」，先認系列、再看品項。
照片旁以直書文字補充風味特色，與橫排價目表形成對比，系列之間一眼就能區分。
中文品名為主、英文名以襯線小字補充，價格靠右對齊，掃一眼就能比較。
熱銷飲品頁・鮮乳茶系列：系列分區，圓形主圖搭配中英價目表。
把 logo 的檸檬輪廓切成三段，作為影像遮罩；三個系列各放入自己的食材特寫，同一個造型就能承載不同主題。官網首頁實際使用
嚴選表皮油胞飽滿的屏東 A 級檸檬，爆打 35 下，讓果肉、果香與果汁在黃金時間釋放。
以海鹽糖漿柔和檸檬的酸度、修飾茶葉微澀，讓整杯清爽解膩。
選用上乘原葉茶，與檸檬的酸感互不搶味，只留回甘。
Custom Page Design with Brand Consistency
阿檸的顧客常在路上、排隊時用手機查飲品和門市，所以行動版和桌機版同步規劃，不是事後縮小。首屏重新堆疊標語與雙杯，飲品菜單改為單欄閱讀，門市資訊一手就能操作。
行動版首頁
行動版飲品菜單
行動版品牌形象
行動版門市據點
Credits
企劃、設計到前端實作，三位夥伴共同完成這個阿檸官網案例。
Project Manager
Designer
Frontend