內容更新於 — 2023-06-17 15:14
「網站改版」，其實是一段有趣的歷練...
對我來說，OXYGEN Builder是無所不能的！
怎麼說呢？
在WordPress網站的建構的過程中，它將「程式碼」這件事，盡可能地具象化！
這對非網頁工程背景的我來說，能夠更容易設計出更自由的版型和功能。
而温唯這個網站，是我用OXYGEN Builder製作的第二個網站。回想當時，各種CSS、Keyframe大開竅，學會了許多技巧，恨不得把他們全部裝進網站，然後，就變成了一盤大雜燴...
我的第二個OXYGEN Builder網站☞舊版温唯，來懷念一下以前存檔的螢幕錄影吧！
經過一位前輩的提點，我也開始思考這個問題...
是啊！做平面設計的時候，衝擊力是提案的武器，而視覺上的協調感才是整體設計的最高指導原則啊！
怎麼跳到了網頁設計，反而把這個最高指導原則給丟了呢？
此外，平面設計是死的，網頁設計是活的，還需要考慮到使用者體驗，有許多關於UI和UX的小細節需要照顧，這還真的超出以往做平面設計時所能涉略到的範疇呢！
其實啊！以往做得比較多的是雜誌的排版；所以，當時設計温唯這個網站時，也是按照我習慣的照片與文字的排版去設計；在我當時的認知中，每一個Section對我來說，就是不同的頁面...（誤）
但是，在網頁設計的概念中，他們都存在於同一個頁面；因此，整體的主色調與樣式的統一，便決定了整個頁面的「協調感」，所以，這也是我這次改版的首要工作。
最大的重點是「統一色調」＋「統一樣式」＝整體視覺上的協調感。
除了首頁以外，單一文章的問題更大！
為了加強某些文字區塊，我使用了多種顏色與樣式作為文字方塊的背景以及圖文呈現；此外，左右二側的功能性選單更是花俏，相當干擾閱讀體驗，這些都會在這次的大改版中整理乾淨。
以我的LOGO來說，是深灰棕色（#625b55）和中灰膚色（#dfba9f）的組合，因為這二個顏色都帶著不飽和的灰階，所以，不同色階的灰色正好就成了主要的底色。接著，從深灰棕色到中灰膚色之間，找到了深灰紫色（#70576f）作為輔助色，再從淺灰紫色（#cdc9d6）的對比色調中，找到了淺灰綠色（#d4dce0），於是整體的色調中，就在深灰棕色與中灰膚色的深淺與對比色調中，達到了平衡與協調。
除了色調的協調之外，每個Section所使用的樣式也要達到一致。
我採用的是不規則的形狀作為每個小元素的背景以及裝飾；而按鈕則是統一改成長箭頭。
文字顏色
Total Time: 1 day
其實當初就是為了主色調而挑選的照片，符合深淺棕色系>膚色>淺灰藍綠色。但是，改版之後，整頁的色階偏淺，所以，我在背景中加入background overlay的效果，用白色（#fff）將照片放淡10%，以達到與整頁的和諧。
因為主圖已經放淡，所以，這二張照片便不打算再放淡了。
反倒是將文字以及keyframe手寫簽名效果改成色「深灰棕色（#625b55）」，視覺上也較為舒適。
改成偏暖的淺灰色作為背景，再輔以中灰色的英文字以及60%的「深灰棕色」的虛線作為裝飾。
文章的分類按鈕則是改成我很喜歡的凹凸按鈕；考量到sticky header中已經有一個logo會轉動，所以便取消分類按鈕中的「轉轉icon」。
在這次的改版中，取消了「轉轉icon」，於是，我將轉動的JS效果做在裝飾用的不規則形狀中。
而次分類的按鈕也套用了較小的不規則形狀作為背景，來呼應裝飾用的不規則形狀。
其實這是我以往最不會設計的一塊！
因為，我的部落格內容目前涵蓋了四大主題，而對於內容產出者來說，實在不想放過任何一次展現文章的機會，如此一來，整個首頁內容會過於複雜。
所以，一開始，我就打算用overflow-x:auto;的方式，讓這些不同分類的「最新文章」，不至於佔據過多的版面。
不過，後來在阿控的影片中，學到了另外一招CSS大覺，就變成滑鼠就能直接滾動，連JS都不用了！
然而，在「最新文章」的這個Section中，最困擾的其實是，文章的特色圖片顏色不一！
而這個問題，也在阿控的另外一支影片中，使用CSS的「filter」去調整顏色的呈現，可以說是網頁版的濾鏡效果。
我比較常使用的是「brightness」去調暗；如果情況允許，也可以使用「greyscale」去調淡。
一樣改用另外一種不規則形狀作為背景，顏色也改成與主色調一致的色系。
和第四、第五個Section的邏輯一樣。
這裡我放的是社群、訂閱和贊助，原本是三欄二列，然後，為了符合不同社群的內容和標誌，所以，每一列的大小不一致，顏色就更別說了。
老實說，對於這一區塊，我目前還真的沒太多想法，那麼，就先依循著框架，改成整齊的條列式吧！
以上，是我的首頁改版細節，下一篇會分享「單一文章」的改版。有任何想法或建議，都可以在留言中告訴我囉！
Copyright ©miriammibao.com all rights reserved｜Designed by MiriamMibao温唯 Since 2014.