網站第四版上線!歷次改版的設計思路

細節的更新日誌都在 Changelog

目前網誌有四版。

第一版

網誌

模板複製自 CNFeat。按照傳統紙張排版的風格進行大量修改。

主葉

無。

第二版

網誌

第二版複製自 kitian

主葉

模板用的這位 小姐姐 的,是一箇翻葉 js,模擬 ppt 效果。後來覺得 js 太累贅,就換了。

第三版

網誌

後來覺得 Jekyll 太慢了,就換成了 Hugo。主題複製自 xianmin。這是在原來基礎上改動最大的,基本已看不出原來的樣子。只是再怎麼好看,也不能一直不換,這箇框架先用到畢業吧。

最大的亮點是中文直排,以及波浪線、下劃線。這樣整箇網葉看起來就像中華書局出版的古籍一樣。

主葉

在第二版的基礎上魔改。70% 是我自己的內容。借鑑了AnyWay.FM,模擬的紙張效果,以線條作爲整箇頁面的框架,整箇主葉就是一張大紙。

第四版

網誌

4.0

第四版是主葉先做的,所以網誌就沿用了主葉的卡片式設計,取消了第三版的線條框架。這樣似乎又隱約回到了第一版的審美。

主題是在 Flex 的基礎上魔改,我命名爲 Flex-CJK。原生主題非常簡潔非常小,結構也非常清晰,不像第三版,有些臃腫。四月一日剛好修改了一整天,非常完美。很多直接把原來的複製過來就可以。

版面上稍有不同:1、歸檔頁面,第三版是按修改時間排序,第四版還是按照發布時間排序,但是開頭加了一些按修改時間排序的,這樣能結合兩者的優點。2、索引頁面,第三版是把所有文章都收納到一箇頁面,第四版還是各是各的,實在改不動了。

頁面速度,第三版是 89,原生第四版主葉是 96;訂製的是 主葉:99,歸檔頁:96,文章頁:92。

4.4.1

大變樣。把葉首導航欄全部移到了頁腳。全面實現卡片化。直排一列三十六字,橫排一排三十八字。背景圖案採用和主葉一樣的。

最近修改二十篇,也移到了主葉。

主葉

第四版在第三版基礎上魔改。經過四天修修補補,終於完工了。第一天做出來 4.0 是這樣的:

第四天 4.2 基本定型:

這兩年流行卡片式設計,最有代表性的是 iOS 的控制欄,改成了卡片式。這裏借鑑了 spencerwoo 的代碼。以卡片爲框架邏輯,完全取消了線條的支撐作用。每箇小卡片的背景色和描述字體的顏色都經過了反覆試驗。另外,加上了 Substats 的小牌子。

4.3 改成了截图式:

三月卅日最終的 4.4.1:

加了一箇鼠標懸浮的動畫:

一箇神細節:背景花紋跟圖片中我穿的襯衫花紋一模一樣😁

七月廿日改成卡片式:

4.7.01

加上圖片,終於有箇網站的樣子了:

七月廿七日:

七月廿九日 4.7.04:

小結

從卡片式到模仿手機屏幕截圖,再到最後加上黑邊框,直接模仿 iphoneX。這幾天主頁的調整就跟寫論文一樣,剛開始想到的是貓,最後寫出來的變成了狗。

審美口味過兩年就要變一下,生命不息折騰不止嘻嘻。只可惜自己不懂技術,要不然可以更折騰。下次改版,等碩士畢業了再說吧。