主页 > 业界时代 >[生活] 网站迈入第九年大改版!!全新风格 iLife 布景 >

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景

2020-05-27

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景

回想起上次网站改版,得追溯至六年前的此刻 (连结),当时还是个懵懂的学生而已,同学们都在打电动与看动画片刻,我也开始在找寻适合自己的兴趣,发现藉由摄影与文字搭配,在部落格写成一篇篇游记与开箱文也蛮好玩的,后来也花更多的心思再经营。至于布景部分过往都是凭自己感觉,再拿现成版型拼凑修改出来的,这回很感谢老弟 Funtory 设计生活 版面美编、香肠炒鱿鱼程式协助,採用 HTML5 框架语法及许多小功能,诞生全新风格代号为「iLife」布景正式上架,感谢过往至今许多朋友照顾,也希望有这舒适阅读环境,你们会更加喜欢这地方。



回顾过往

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景

上一版 SOFUN 布景风格,是採用香肠开发 MadoKing 魔动王版型修改而来,无论是顶部横幅 Header 图片,按钮造型、侧边栏还是内文样式等,即使正式亮相公开后,仍会不时做修改微调的动作。

毕竟读理工科,没有美术细胞,只能从逛别人网页,看到不错再凭感觉调整适合自己网站,让我再次感受到好的视觉效果,还是得靠专业美工与程式设计师搭配,才能呈现最完美的版型样式出来。

我想也因为如此,激起想客製化彻底美化一番的念头,从设计到程式搞定约半年左右,过程间常太忙导致耽搁情况,终于以新版 iLife 版行正式登场亮相 ~ XDD

P.S: 至于新朋友们,想瞧瞧过往的模样,也可以至网站时光机浏览。【连结1】【连结2】

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景 [生活] 网站迈入第九年大改版!!全新风格 iLife 布景

原本使用手机行动装置版面,则是属于比较阳春的风格,首页载入几篇最新文章,包含缩图、标题与文章日期,内文也是大同小异。

关于 iLife 版型 & 首页图文呈现:

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景

新版 iLife 版型首页,与过往可说是截然不同,尤其是背景由原本的灰底,改为木质条文色系图片,首图撑大撑满强化视觉效果,侧边栏宽间距也变大,也美化 CSS 呈现样式,让浏览网站整体质感提升。

为何版型要取名为 iLife ??主要也是希望将生活所见所闻,以及实用资讯用图文方式分享,这也是记录生活的一种方式,才不会年纪大了要回顾过往,只能看照片来说故事,少了当时内心想法与文字纪录;未来看着过往文章,才会知道想法,或是哪方面又进步了,喜欢自己并且让自己更棒,我想就从 iLife 做起。

内文相关文章 & 作者介绍:

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景

内文页面在文末地方,过往是以文字显示相关文章,现在则採用 Jetpack 内建模组呈现,210*120 大图搭配文字样式,在视觉效果上更好,也比较能吸引读者目光。

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景

下方栏位依据发文作者显示不同资讯,尤其是特定主题与邀约合作,会请到神秘好友来站台,若是对同类别主题感兴趣,也可以找到同分类上/下一篇,然后再点进去阅读浏览。

特定主题类别并排显示:

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景

此外也针对特定分类主题,如:美食旅游等类别,设计 3*3 九宫格样式页面,方便读者快速挑选喜爱内容。

侧边栏最新/精选文章 & 顶部社群按钮:

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景 [生活] 网站迈入第九年大改版!!全新风格 iLife 布景

过往侧边栏想显示最新文章 & 精选内容,都是以内建纯文字样式来显示,现在则是搭配 Photon 缩图及 CSS 微调,让读者浏览感觉更美观一些。

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景

社群平台推广预设常见这几种,放太少又觉得空空的有些单调,所以又多补上去 Twitter、Pinterest 以及 LinkedIn 等按钮。

随页面固定 & 多层主题选单:

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景

期盼已久的选单,终于在 iLife 版型上实现,採用 CSS + jQuery 可显示三层,其动线和显示样式也让人一目了然,滑动页面时顶部选单 Fixed 固定住,右侧则是搜寻框与社群联络钮,常用的联繫按钮图示。

ERROR 404 错误页面:

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景

至于连结错误,或是失效的文章,会导向 404 错误页面,相较于过往拥挤排版,这回样式稍微宽鬆一些,并且将分类与时间彙整列上去,资讯内容也更加丰富,让迷路的读者可以快速找到感兴趣的讯息。

行动装置版型:

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景 [生活] 网站迈入第九年大改版!!全新风格 iLife 布景

手机版则直接採用 imXD Mobile 版型,样式与过往 imMobile 有些许类似,但首页加入灰框与白底后有更明显区隔,内文则是将作者、时间与分类资讯移至顶部。

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景 [生活] 网站迈入第九年大改版!!全新风格 iLife 布景

文末同样有相关文章、社群分享、作者资讯与标籤等按钮样式,动线操作上比上一版更加明确。

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景 [生活] 网站迈入第九年大改版!!全新风格 iLife 布景

下面额外加入推荐阅读 & 更多文章资讯,透过分类、标籤与随机等条件判断,来显示出相对应的讯息出来,对于透过搜寻引擎进来的朋友,说不定会对这些内容感兴趣。

[生活] 网站迈入第九年大改版!!全新风格 iLife 布景 [生活] 网站迈入第九年大改版!!全新风格 iLife 布景

尾巴则是有上一篇 / 下一篇文章快选连结,滑动页面时顶部也会 Fixed 固定住,左边为自定义选单,右边才是搜寻框,若程式判断不正确,也可点选切换为电脑版。

差不多就是这样,经营网站长达九年,也是小孩读国小阶段,虽然说仅记录生活片刻,但也把精彩时光捕捉下来,并且认识许多的新朋友。

最后再次感谢阿右与香肠协助,成就了这个舒适版型与阅读空间,如有问题也欢迎留言给予建议,欢迎各位旧雨新知常来逛逛,相信未来会有更多旅游玩乐,以及软体开箱等相关创作的,也期盼自己能够维持定期写作好习惯 ~ ^^


上一篇:
下一篇: