ASong
[切版前端] 網頁設計技能樹:轉職後的小事 Day1

切版是前端技能樹很重要的分支之一,由於之前的主管說我切版能力不足,我就老老實實地專心來補一下切版的經驗值,畢竟從哪裡跌倒就要從哪裡站起來嘛!雖然每間公司對於切版能力的要求不一,不過我個人倒是還滿喜歡切版的,覺得能夠輕易用短短幾行代碼做到設計師能做到的事情真是太好玩了。


參加六角學院的切版課程後,覺得弄清楚了很多之前沒完全理解的概念,有種啊切版原來就這樣而已呀的感覺,但又發現其實有很多功能我竟然沒用過,那要怎麼辦呢?我想多看幾篇文章可能是正解,我會先看完這系列文章 「 CSS 沒有極限系列 | 卡斯伯 」(總共七個系列 210 篇文章吧。),畢竟沒用過至少也先有個印象留下筆記(如之前寫過得技術文 百日轉職前端工程師:第六週前端基礎 CSS《DAY 13》),定期覆盤,遲早會掌握 80/20 法則中 80% 的功能,剩下的 20% 呢?就照我之前的慣例,隨緣!不再有效打擊範圍內,但有時還是可以撿個好球帶。

以下推薦一個最近常用的工具:Codepen

好用,可以快速線上展示程式碼,在問人問題時很方便,我第一次大量寫 Scss 就是在這寫的。
不小心手一滑刷了 NT$ 3000 買了年費方案,具體付費方案能做啥還沒體會到 xD

以下的練習算是循序漸進,前期分開區塊練習先求有做出來,後期最終作業才把所有細節一次整合起來,所以看到有的寫得可以給我建議但是不要戰我 XD。


一、切版技能:文字長短不一之排版

其實重點在於掌握 flexbox 功能的 flex-direction: column 功能,和 justify-content 和 align-items,並且善用主軸和交叉軸。

設計稿來源:六角學院提供

二、切版技能:左側欄位設計之文章排版

主要是要掌握 ul > li > a之功能,並且要能依照圖片大小去設計 max-width: OOOpx; 最大寬度。

設計稿來源:六角學院提供

三、切版技能:常見文章 / 新聞排版

沒什麼難度,就是善用 flex-direction: column; 主軸交叉軸切換,搭配 justify-content: space-between;。
(學完可以去媒體公司工作了(誤))

設計稿來源:六角學院提供

四、切版技能:常見三種文章類型排版

要調整圖片大小還滿麻煩的,但基本上也沒什麼難度,開始嘗試使用 Scss 去寫 CSS,有種爽感。

設計稿來源:六角學院提供

四、切版技能:海報背景切版

就是用 background-img: url(); ,第一次用有點生疏不過多用幾次以後發現還好主要是要注意圖片的寬高,去搭配切版設計。

設計稿來源:六角學院提供

五、切版技能:購物車欄位切版

有點麻煩就是各個區塊樣式不一,橫向縱軸關係也不一,所以切起來需要寫滿多樣式的,在思考怎麼精簡的寫出 CSS 花了一些時間。

設計稿來源:六角學院提供

六、切版技能:商品列表切版設計

這題主要難點也是在思考該要怎麼根據圖片大小設計容器寬度和排列方式,讓其擁有自適應效果。

設計稿來源:六角學院提供

七、切版技能:名片設計

這題花了滿多時間,在研究怎麼搞出六角形出來,以及調整 position: absolute 的位置,有點突破想像沒想到能夠用 CSS 切出那麼多形狀,老實說要計算函數我還是沒有很懂覺得麻煩,參考這篇文章「 單一 div 的正多邊形變換 ( 純 CSS ) 」,但暫且先能用就好,我自己覺得設計得滿美的,很像是真正可以使用的網頁名片。

設計稿來源:六角學院提供

八、切版技能:完整線上課程平台官網首頁

其實沒耐心的人可以直接跳到這裡,就做了滿多細節上的處理,算是把前面所有實作過的技能整合起來,把圖片灰階在上間公司做過,遮罩則是第一次用,結合起來看感覺有點麻煩,但分開處理其實沒什麼難度,唯一值得注意的點是盡可能不要把寬高寫死。

我自己在做完以後提出了幾個問題如下,有興趣的人可以幫我解惑一下,我會很感謝你:

  • (1). 好像有看到一些是說要用絕對定位讓我有點不解,我的理解是能用 padding 就用!用 padding 推出高度和寬度,才有自適應效果。
  • (2). 我覺得我在 CSS 中大量的使用了 flex,但是否有些地方根本不需要使用 flex 就能處理了?有點不確定是不是寫了些冗余的 CSS 內容?
  • (3). 在 CSS 模組化概念中好像有提到要盡量使用 class 讓結構與樣式分離,但在表格的地方我還是直接使用到結構為了讓每一格都有相同的樣式所以直接使用的樣式,不知道是否有更好的做法?
  • (4). 在 table 的最左上角那一格好像會文字會自動幫我置中,因此我額外加上了 text-align: left; 這是正常的嗎?
  • (5). 最底部的 footer 是否有需要加上連結呢?是否有功能能夠實現點擊信箱直接打開郵箱跟手機功能?最右上角的臉書推特社群連結是否需要加上 hover,是否有推薦的樣式呢?
  • (6). 在 class 變數的命名上是否會讓人覺得前後不一?有些 class 我是覺得不會重複使用到所以直接在原有的 course 裡面加上 course-item,這是符合慣例的嗎?
  • (7). 是否有其他在工作上常使用到的 meta 我應該加上去,也有點不確定我 meta 寫得是否符合慣例?
  • (8). SCSS 的巢狀結構不知道是否易讀性是符合標準的?是否有建議優化之處?
設計稿來源:六角學院提供

九、結論:用對工具,切版其實滿好玩的

自己覺得切的過程中其實有種爽感,感覺切版其實也沒那麼難,但有些雷沒踩過弄懂過,真的遇到是怎樣也寫不出來的,感謝六角學院,在過程獲益良多,希望之後可以朝 Boostrap 5 和 Tailwind 更精進。有興趣的人可以參考我之前從轉職到被資遣的文章,老實說對於找到工作這件事我是沒有很擔心,重點還是放在我自己踏實的累積了多少,或許這就是當初我選擇走技術的有趣之處,不管怎樣,前進了多少你自己知道,時間花了就是花了,弄懂解決問題的方法和原理以後是誰也無法從你手上奪走的。




作者介紹 - ASong

ASong

ASong, 現在是一位前端工程師;業餘的閱讀愛好者、講師、寫作者;任何討論或合作可寄送至 dragoncres@gmail.com。

發表迴響