基本介紹

Uncle Liao's 廖叔叔健康屋,一個位於高雄,於全省有多家直營據點的品牌,專注於發揚健康理念,並同步販售受歡迎的營養早餐、健康食品。

Uncle Liao's 廖叔叔健康屋官非常喜歡飛。創意互動的過往的作品,雖然位處台灣的南北兩地,但雙方合作一見如故,非常愉快。

此網設計專案,執行於2015年,是與飛。創意互動合作的兩個網站專案之ㄧ。

以視差滑動設計的首頁,搭配RWD 響應式網頁設計的單元內頁,讓網站能有更大的包容性。

設計概念

自然、健康、活潑是網站的整體主軸

Uncle Liao's 廖叔叔健康屋是一個以健康、自然為訴求的品牌,客戶希望網站要活潑不單調,或是跟別的品牌的官網太雷同。

由於客戶指明要以視差網頁、滑動的形式設計網站,所以設計團隊便選定以完整大圖像的方式,來設計一個直式的大首頁,方便用大型圖像,呈現Uncle Liao's 廖叔叔健康屋的概念。

除了網站的首頁是視差滑動的形式之外,整個網站都是使用RWD響應式網頁(Responsive Web Design) 的方式設計,這讓桌機、手機、平板都能在相同網址的網頁中,看到最佳化的螢幕、畫面配置。

使用HTML5相關技術,讓瀏覽網站時,內容展示與畫面設計都能同步提升。

* 廖叔叔健康屋版權所有

色彩計劃

以標準色綠色為主,輔以兩種綠及橘色作整體搭配。

以Uncle Liao's 廖叔叔健康屋的標準色綠色為主色系,延伸出兩個不同明度、彩度的綠色作搭配,使UI界面能有層次上的變化,並以橘色作輔助色的搭配。

除主色系與輔助色外,並以繽紛的各色系為不同單元搭配顏色,增加網站整體的活潑感。

R178 G235 B39

#B2EB27

R24 G140 B120

#188C78

R27 G162 B139

#1bA28B

R230 G91 B50

#E65B32

智慧型手機版本

針對手機重新設計直式畫面,單手也能順暢瀏覽網站

視差滑動首頁在偵測到來訪者是智慧型手機後,會直接倒引導一個專為智慧型手機設計的精簡版首頁。

針對智慧型手機的直式顯示方式,設計團隊也重新規劃了操作界面,用一目了然的選單,讓手機的使用者能快速切換頁面或單元,找到所需的資訊。

支援 iOS / Android / Windows 智慧型手機。

* 廖叔叔健康屋版權所有

桌上型電腦版本

充分利用桌機效能,讓橫式大畫面呈現最佳效果

以一個視差滑動頁面的直式大首頁,串聯六個大畫面,讓最重要的幾個單元、概念,借由視差效果的方式,能精彩地呈現使用者面前。

用桌上型電腦或筆記型電腦瀏覽內頁各個單元,也因使用RWD響應式網頁(Responsive Web Design) 的方式設計,使網頁的顯示區域、可閱讀的範圍,變得比一般網站更大更寬。

支援PC / Mac桌上型電腦、筆記型電腦,Chrome、Safari、Firefox及IE9以上之瀏覽器。

* 廖叔叔健康屋版權所有

造訪Uncle Liao's官方網站 與我們聯繫

相關案例

相關案例

威秀影城
iShow卡友網站

相關案例

Uncle Liao′s
廖叔叔健康屋

上一個案例 下一個案例