所在位置：
首頁 >
營銷資訊 >
建站知識 > 案例研究：希臘餐桌橄欖油出口商官方網(wǎng)站
案例研究：希臘餐桌橄欖油出口商官方網(wǎng)站
時間：2024-04-23 12:30:02 | 來源：建站知識
時間：2024-04-23 12:30:02 來源：建站知識
今天我研究的案例是世界領(lǐng)先的希臘餐桌橄欖油出口商Konstantopoulos SA“Olymp”的官方網(wǎng)站（https://www.konstolymp.gr/），它重點關(guān)注B2B。它是一個清新現(xiàn)代的網(wǎng)站，將棕色，金色和綠色的泥土色調(diào)與俏皮的微交互和動畫相結(jié)合，同時滿足了全球批發(fā)B2B客戶的專業(yè)信息需求。
視覺系統(tǒng)
網(wǎng)站的視覺系統(tǒng)通過網(wǎng)站中使用的重復模式進行補充，以提供一致的品牌體驗：
- 將視差滾動與浮動元素（原始和加工橄欖和橄欖葉）結(jié)合使用可確保我們的核心內(nèi)容始終在周圍，與內(nèi)容進行有趣的互動。
- 彩色調(diào)色板，通過補充噪聲紋理填充，而延伸調(diào)色板提供必要的視覺變化。
- 使用柔和的的照片為核心區(qū)域提供夢幻般的照片元素質(zhì)量，同時確保重點放在介紹性文本上。
- 平滑滾動用于巧妙地加強視差效果和滾動觸發(fā)的航點，從而允許更多時間讓動畫在不妨礙用戶導航的情況下運行。
將視差滾動與浮動元素（原始和加工橄欖和橄欖葉）結(jié)合使用可確保我們的角色始終在周圍，與內(nèi)容進行有趣的互動。
UI元素
讓我們從前端設(shè)計角度檢查網(wǎng)站的一些UI元素：
- 主頁主要CTA：網(wǎng)站沒有采用傳統(tǒng)的幻燈片，而是只有一屏使用相應(yīng)的動畫效果的內(nèi)容，很好的突出了產(chǎn)品特性（并不是每個網(wǎng)站都需要幻燈片）。
- 菜單動畫：導航菜單有兩個深度級別。使用了兩列布局，第一列顯示了第一級元素，第二列顯示了第二級元素。使用時間軸動畫（通過TimelineMax）完成菜單背景和項目的動畫制作。考慮到較小分辨率的菜單布局變化，使用這種技術(shù)的動畫編排證明極具挑戰(zhàn)性。
- 歷史和生產(chǎn)過程部分：這些部分使用復雜的布局表示，結(jié)合固定元素（尋呼機和年份指示器）以及圖像和副本的受控滾動。年度指標的變化效果是通過一個簡單但視覺上令人印象深刻的系統(tǒng)實現(xiàn)的：每個數(shù)字由一個垂直的數(shù)字列（0-9）使用overflow-hidden表示。在每次更改時，每列獨立于其當前值旋轉(zhuǎn)到其目標數(shù)，具有不同的動畫持續(xù)時間和延遲，增加了效果的視覺興趣，而沒有過多的編程復雜性。在分析了要顯示的實際年份后，我們選擇將列移動一個元素，使每個元素從9開始，從而使“世紀之交”動畫不那么跳躍。
- 浮動元素動畫。網(wǎng)站達到了“自由浮動”效果。
藝術(shù)方向
如果沒有適當?shù)膶I(yè)攝影和視頻內(nèi)容很難達到良好的用戶體驗。網(wǎng)站的視頻及照片的拍攝都是非常棒的，可以生成有效的視覺內(nèi)容。
技術(shù)
該網(wǎng)站建設(shè)的后端是使用CMS
Drupal 8構(gòu)建的。在前端，它將
TimelineMax與動畫和
ScrollMagic相結(jié)合，
以實現(xiàn)有針對性的視差和平滑滾動效果。標題中的噪聲紋理是通過透明文本填充顏色與紋理可平鋪背景圖像相結(jié)合實現(xiàn)的。所有CSS都是按照
BEM / SMACSS慣例在
SASS中編寫的。
在線咨詢