Be Cool # Muse - 給自己設計一個作品集站

廢 話

一直很迷國外設計工作室的網站，之前2016年得空做了一個，為了換工作的時候一般會很有動力做作品集，後面也就基本荒廢在那，不怎麼更新了，下面稍微講講我的設計思路。

首 屏

Idea：

1. 凸顯少女風的氣質
2. 有交互效果，有趣

Do STH cool 其實是做那張圖的時候隨便想到的，然後感覺效果不錯，原始只是一張 gif 大圖，但是想說放在首屏應該有交互，那就點擊按住圖片就熄滅燈光吧！

現在想想，是做反了，應該滑鼠移上去就閃爍點亮比較符合現實物理邏輯。

我的站點dosthcool.github.io

菜 單

用 Muse 的滑鼠點擊效果改的，懸浮、選中、按下的效果。

豎著放幾個，有幾個大類放幾個。

然後在每個小圓點右邊加一行文字說明，什麼「主頁」、「作品集」、「聯繫」等。

接著，設置頁面的錨點，第一個放在網站豎直最上方。

再放幾個在其他頁面的水平初始位置，即為頁頭。

使用錨點的好處是可以感受到平滑移動到該點的動效體驗，就像飛起來一樣。

動 畫

既然可以飛起來了，沒道理不加一下「完全不用一行代碼就可以實現動畫效果」的滾動效果功能。

關於這個功能 Adobe 也寫了漢化的教程：scroll-effects 使用詳細教程

還有，直觀的動效展示

使用此類控制項效果，首先這個網站設置必須是固定寬度的。

老實說之前一直用英文的還挺順手的，2018 出來了漢化版各種彆扭的翻譯，都有點看不懂了。

整個網站的體驗視頻：

https://www.zhihu.com/video/952582592256557056

福 利

分享兩個作品集在線設計的網站，一個是很有名的adobe profile，但是目前只針對國外用戶，幸好還有一個，類似於設計about頁的：Readymag — Design anything on the web

廢 話

從微信公眾號那溜來這寫專欄了，那邊寫生活感悟經歷的較多，感興趣的寶寶們可以前往（ID：chomoon）

歡迎交流！