Uncle Liao's 廖叔叔健康屋 - 飛。創意互動

基本介紹

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 瀏覽器。
* 廖叔叔健康屋｜版權所有