[生活] 網站邁入第九年大改版!!全新風格 iLife 佈景上架

回想起上次網站改版,得追溯至六年前的此刻 (連結),當時還是個懵懂的學生而已,同學們都在打電動與看動畫片刻,我也開始在找尋適合自己的興趣,發現藉由攝影與文字搭配,在部落格寫成一篇篇遊記與開箱文也蠻好玩的,後來也花更多的心思再經營。至於佈景部分過往都是憑自己感覺,再拿現成版型拼湊修改出來的,這回很感謝老弟 Funtory 設計生活 版面美編、香腸炒魷魚程式協助,採用 HTML5 框架語法及許多小功能,誕生全新風格代號為「iLife」佈景正式上架,感謝過往至今許多朋友照顧,也希望有這舒適閱讀環境,你們會更加喜歡這地方。



回顧過往

 

上一版 SOFUN 佈景風格,是採用香腸開發 MadoKing 魔動王版型修改而來,無論是頂部橫幅 Header 圖片,按鈕造型、側邊欄還是內文樣式等,即使正式亮相公開後,仍會不時做修改微調的動作。

 

畢竟讀理工科,沒有美術細胞,只能從逛別人網頁,看到不錯再憑感覺調整適合自己網站,讓我再次感受到好的視覺效果,還是得靠專業美工與程式設計師搭配,才能呈現最完美的版型樣式出來。

 

我想也因為如此,激起想客製化徹底美化一番的念頭,從設計到程式搞定約半年左右,過程間常太忙導致耽擱情況,終於以新版 iLife 版行正式登場亮相 ~ XDD

 

P.S: 至於新朋友們,想瞧瞧過往的模樣,也可以至網站時光機瀏覽。【連結1】【連結2

 

 

原本使用手機行動裝置版面,則是屬於比較陽春的風格,首頁載入幾篇最新文章,包含縮圖、標題與文章日期,內文也是大同小異。

 

關於 iLife 版型 & 首頁圖文呈現:

 

 

新版 iLife 版型首頁,與過往可說是截然不同,尤其是背景由原本的灰底,改為木質條文色系圖片,首圖撐大撐滿強化視覺效果,側邊欄寬間距也變大,也美化 CSS 呈現樣式,讓瀏覽網站整體質感提升。

 

為何版型要取名為 iLife ??主要也是希望將生活所見所聞,以及實用資訊用圖文方式分享,這也是記錄生活的一種方式,才不會年紀大了要回顧過往,只能看照片來說故事,少了當時內心想法與文字紀錄;未來看著過往文章,才會知道想法,或是哪方面又進步了,喜歡自己並且讓自己更棒,我想就從 iLife 做起。

 

內文相關文章 & 作者介紹:

 

 

內文頁面在文末地方,過往是以文字顯示相關文章,現在則採用 Jetpack 內建模組呈現,210*120 大圖搭配文字樣式,在視覺效果上更好,也比較能吸引讀者目光。

 

 

下方欄位依據發文作者顯示不同資訊,尤其是特定主題與邀約合作,會請到神秘好友來站台,若是對同類別主題感興趣,也可以找到同分類上/下一篇,然後再點進去閱讀瀏覽。

 

特定主題類別並排顯示:

 

 

此外也針對特定分類主題,如:美食旅遊等類別,設計 3*3 九宮格樣式頁面,方便讀者快速挑選喜愛內容。

 

側邊欄最新/精選文章 & 頂部社群按鈕:

 

 

過往側邊欄想顯示最新文章 & 精選內容,都是以內建純文字樣式來顯示,現在則是搭配 Photon 縮圖及 CSS 微調,讓讀者瀏覽感覺更美觀一些。

 

 

社群平台推廣預設常見這幾種,放太少又覺得空空的有些單調,所以又多補上去 Twitter、Pinterest 以及 LinkedIn 等按鈕。

 

隨頁面固定 & 多層主題選單:

 

 

期盼已久的選單,終於在 iLife 版型上實現,採用 CSS + jQuery 可顯示三層,其動線和顯示樣式也讓人一目了然,滑動頁面時頂部選單 Fixed 固定住,右側則是搜尋框與社群聯絡鈕,常用的聯繫按鈕圖示。

 

ERROR 404 錯誤頁面:

 

 

至於連結錯誤,或是失效的文章,會導向 404 錯誤頁面,相較於過往擁擠排版,這回樣式稍微寬鬆一些,並且將分類與時間彙整列上去,資訊內容也更加豐富,讓迷路的讀者可以快速找到感興趣的訊息。

 

行動裝置版型:

 

 

手機版則直接採用 imXD Mobile 版型,樣式與過往 imMobile 有些許類似,但首頁加入灰框與白底後有更明顯區隔,內文則是將作者、時間與分類資訊移至頂部。

 

 

文末同樣有相關文章、社群分享、作者資訊與標籤等按鈕樣式,動線操作上比上一版更加明確。

 

 

下面額外加入推薦閱讀 & 更多文章資訊,透過分類、標籤與隨機等條件判斷,來顯示出相對應的訊息出來,對於透過搜尋引擎進來的朋友,說不定會對這些內容感興趣。

 

 

尾巴則是有上一篇 / 下一篇文章快選連結,滑動頁面時頂部也會 Fixed 固定住,左邊為自定義選單,右邊才是搜尋框,若程式判斷不正確,也可點選切換為電腦版。

 

差不多就是這樣,經營網站長達九年,也是小孩讀國小階段,雖然說僅記錄生活片刻,但也把精彩時光捕捉下來,並且認識許多的新朋友。

 

最後再次感謝阿右香腸協助,成就了這個舒適版型與閱讀空間,如有問題也歡迎留言給予建議,歡迎各位舊雨新知常來逛逛,相信未來會有更多旅遊玩樂,以及軟體開箱等相關創作的,也期盼自己能夠維持定期寫作好習慣 ~ ^^

 

臉書留言

一般留言

  • 我喜歡現在這個版型~~~
    我的行動版跟你的一樣,據說這世界上本來只有我跟香腸使用這個行動版,歡迎你加入,哈哈!

  • 阿福「大」哥~
    我也很喜歡你現在這個版型~
    而且那個 “簡單生活" 的 LOGO 變得好活潑,看了心情都變好了耶!

    對了,阿福大哥請問一下,
    你平均每天花多少時間寫文章?幾乎兩三天就一篇,好強!!!

    • 哈!! 謝謝你的讚美,真開心 ~ 寫文章頗看心情的
      有時候靈感一來寫個 3 ~ 5 篇起跳不是問題
      而且很多文章都是平時遇到的困難紀錄
      順便在除錯時就截圖存下來,所以也不會太花費時間 XD