前端設計實驗室

這個系列把一個設計技巧做成一篇互動實驗。每次固定大部分條件，只改一個變因，再比較 Vanilla、Vue 3、React 如何控制同一個畫面。

系列怎麼讀？

LAB

技巧篇

一次觀察一個設計原則，並切換三種前端寫法。

NOTE

基礎筆記

補充會在多篇文章重複用到的設計名詞。

PROJECT

主題作業

把幾個技巧組合成一個完整頁面。

已完成的技巧篇<ol class="series-list">

  • 前端設計實驗室 01｜換一套英文字型，畫面個性差多少？

    在同一張活動卡片上切換優雅、甜美、自然、帥氣四種字型，並即時比較 Vanilla、Vue 3、React 的實作程式碼。

  • 前端設計實驗室 02｜如何把不同顏色統一成柔和色調？

    在同一張卡片上比較原始、粉色、淺色與柔和色調，觀察如何用相近的明度和彩度統一配色。

    • </ol>

    第一條路線：可愛風設計

    目前先完成可愛風的五個技巧，再把它們組合成一張活動卡片。

    1. 英文字型：已完成
    2. 柔和色調：已完成
    3. 使用插畫：準備中
    4. 邊框：準備中
    5. 條紋與圓點：準備中
    6. 小作業：用五個技巧完成一張可愛風活動卡片

    完整的文章編號、來源頁碼與其他主題路線記錄在工作清單中，文章完成後會自動出現在這個系列目錄。