| Invalid Date
字数 0阅读时长 1 分钟
back to basics
Pythonista
Pythonista
Clean Code
Clean Code
Writing
Writing

最新文章
文章

 
 
 
 
 
 
 

第一次迭代思路

一、前言

這次先寫完「前言」與「架構發想」部分的思路,再開始實作高級作業頁面,主要節點如下:
  • 前置功課
    • 老方法,看了第一屆優秀學員的作業四,大概 15 份,重心放在觀察作業四的輪廓與實作方向,尤其是和作業一的差別
    • 這些其實在助教課與作業命題中都已經一再闡明,參考主要是為了藉由觀摩實例來加深體會
  • 定性:以軟體工程師這個角色為作呈現的主體(這部分會回應作業說明中的思路撰寫要點所提出的問題 1-3)
    • 與作業一的呈現差異
      • 作業一只是大概講講我的經歷,雖然提及程式但大概只佔全篇的 1/4,畢竟太細節的東西有門檻,一般人也不一定感興趣,考慮整體讀者的接受程度,內容不適合過度偏頗
      • 而作業四,我打算把程式元素放大到 2/3 左右,技術細節變多,再加上一些個人喜好(ex: Podcast 推薦)
      • 換句話說,作業四基本會假設讀者「對程式相關的事物有興趣」
    • 這個主頁是要給誰看?用途是什麼?
      • 初級作業以新進同仁為呈現對象,我在思路中有提到這個切入角度有點不好發揮
      • 主體不變(都是以軟體工程師這個角色為主體)的前提下,我把呈現的目標對象擴大為「對我作為軟體工程師這個角色」有興趣的人,這些人可大致歸類為兩大類:
        • 潛在合作方(前來面試的工程師、求才中的公司、技術社群小聚認識的人)
        • 對程式有興趣方(單純對程式好奇、上班族想學一點程式來自動化工作流程以節省時間、想轉職軟體工程師而需要知道該學哪些技能的人)
    • 希望給別人什麼價值?(換位思考,交換思維)
      • 潛在合作方:我目前的技能與可能貢獻的領域,包括相互學習也是一種貢獻
      • 對程式有興趣方:了解學習的方向與材料的選擇,以及學習路徑的參考
    • 內容調性與主軸:軟體工程師的自我修養
      • 乍聽之下好像要變成工程師的履歷頁面?答咩!太嚴肅了,且無趣
      • 會以程式的學習為主,順便可以串連第二三週的內容,就像大家進訓練營懷抱著熱情和期望,作為軟體工程師也要散出發類似的追求才行
    • 你認為觀看這頁面的人,理想中的閱讀/使用流程是?
      • 原則上按照首頁左側選單的順序即可,就有興趣的部分再行深入
      • 在選單的順序上有一些思路:先人(特質)後技能
        • 關於我:看完首頁的三個關鍵字後,可以先來看關於我,看看是不是個奇怪的傢伙
        • 我的文章:然後是文章,了解我的特質與著墨過的技術
        • 學習筆記:比較材料面,但對於想學程式的人,這邊才是重點
        • Podcast 推薦:降低整體頁面的嚴肅感,並在文章之餘額外表現我的喜好
      • 最後是外部連結
  • 一點反思
    • 這個前言已經太嘮叨了,「恰如其分」值得追求,但我沒有做好
    • 晚上偶然看到了第一週 MVP——Greengable 的第四週作業,助教涵渝的評語:
      • 喜歡 greengable 衷於自己,維持以往的個人風格,為自己而做。 雖然這週是關係系統,主要是讓同學製作簡易的 Notion 公開主頁,不過我感覺得到你好像沒那麼追求要給更多人看到,反而是追求給有緣的人看到,所以呈現的資訊不會因為特定對象來做調整,不知道我這樣的理解對嗎? 如果是這樣的話,我覺得沒問題唷~
    • 我覺得非常動人,無論是涵渝或 Greengable,怎麼能如此溫柔?😭
    • 「為自己而做」並不容易,最後一週,我也要 back to basics 🐧

二、架構發想

  • 第一屆阿哲真的非常精彩,不過基於「back to basics」的要求,我想呈現五個面向即可:
    • 學習專案與任務
    • 技能樹
    • 材料點評
    • 推薦 Podcast 單集
    • 文章
  • 要應用第三週作業老K迭代建議提到的的「情境入口」
  • 我喜歡讓選單在上方而不是左側
  • 二、三週資料庫選用部分:專案與任務資料庫
    • 二、三週對我來說是一個整體,我想要的任務系統差不多就是第三週的高級作業內容:
      😈
      kyo's PAID+ 知識學習系統
    • 不過這五個資料庫不會全部呈現在這份作業,理由如下:
      • 專案與任務:會!
      • 知識筆記:no,太零碎
      • 學習筆記:no,太細節,但是會以更「老少咸宜」的方式呈現,也就是材料點評
      • 日記:no,太害羞
  • 新增資料庫部分
    • 文章資料庫
    • Podcast 單集推薦資料庫
    • 學習材料點評資料庫:將所學覺得不錯的材料做成項目短評(30 字即可)
  • 新增頁面:關於我,一個簡單講述我目前所學技能的頁面,但不涉及細節,只是給個輪廓

三、實作與思路

👉
提醒:實作可能會修正上述「二、架構發想」的內容,我會提醒並闡述改變方案的理由,並以「⚠️」標示,而非回頭修改第二部分的內容,這樣也能讓讀者知道還沒實作之前的我,究竟是哪邊想得太天真了!
  • 大概是四份作業中最長的的實作思路,因為涉及的考量點確實是最多的
  • 完成第三週作業,我原以為自己能夠在本次訓練營學到的能為我實際所用的核心部分已經滿足了 9成5 了,但這份作業依舊讓我打開了新的視野,不得不佩服團隊們在題目設計上的巧思與用心
  • 話不多說,我們開始吧!

一、首頁概述:頁面標題與命名、主視覺、三個關鍵字、左側選單、結尾

此為首頁純靜態的部分
  • 頁面標題與命名:Code and Me
    • 既是我的 blog 名稱,同時也想要表達這個頁面就是和程式、和我有關
    • 標題下方的「back to basics」可以算是副標題,上承標題下啟三個關鍵字,然後才展開整個頁面的具體內涵
  • 主視覺:Space
    • 不少人以太空、星球作為發想,我也不例外!
    • Cover 使用了星際探索相關的圖,而主頁 ICON 採用土星,真的好喜歡這個 emoji
  • 三個關鍵字
    • 說真的我本來想要刪掉的,哈哈,但是覺得這個可以快速帶來第一印象,還是保留。尤其在我把里程碑移至「關於我」的後台頁面後,這部分就更加必要了
    • 色塊變成透明,降低顏色干擾,因為本次的主軸色是以褐色與灰色(🪐土星色)為主,所以原來的藍色色塊我就拿掉了
    • 但仍然使用藍字,顏色上也可以和 Cover 顏色呼應
  • 左側選單
    • ⚠️ 發想時表示喜歡放在上側,但我在首頁實作時沒有採用,因為首頁的上側已經被三個關鍵字佔據了,再堆疊一層選單會產生視覺上的疲累,所以改為左側,以 callout 區塊呈現
      • 但後台頁面內依舊使用上側選單嘿!
    • 這個左側選單在「區塊類型」上有過一些掙扎:
      • 本來想要把後台 page 直接放這裡,讓後台頁面和選單直接整合,像初級作業一般,但是如此一來就不能使用 callout 區塊而只能用 page 區塊
      • 純用 page 區塊雖然也可以有背景色,但美感顯然不如 callout
      • 所以還是用了 callout,同時首頁不直接放後台 page
    • 因此,所有的後台頁面包括頁面內的新資料庫,全部集中到
      今夜星光燦爛
    • 外部連結則一致放在選單最下方,並以「More Info」和內部頁面連結區隔,圖示上也有差別
  • 結尾
    • 結尾雖然不是必要,沒有結尾會讓人感覺少了點什麼
    • 最後選用了公式區塊,並只用簡單的「Believe in Code and Me」重申了命名內涵,讓主頁面的首尾呼應

二、關於我

「關於我」有獨立的後台頁面,而前台只有一個選單連結呈現:
  • 把原來在首頁的「里程碑」移到這裡
    • 畢竟里程碑的內容很少變動,不需要常看,移到「關於我」更加適合
    • 和技能樹置於同一頁,也更有相關性,讚
  • 技能樹部分,很簡陋,大概知道即可
  • 本頁內容為純靜態,與資料庫無涉
這裡的重點其實是要講一下所有「後台頁面」的共通元素
  • 相同的 Cover:讓後台的主視覺也有一致性
  • 上側選單:首頁不適合,但用這裡就很棒了
    • 切換後台頁面時,無須回到首頁
  • 說明:使用 callout 對這個後台頁面內容進行介紹!
  • Back To Top:在底部,方便在內容太多的時候回到最上面

👉
以下開始講述各個資料庫內容區塊在前台(首頁)的動態呈現思路,以及後台頁面的規劃與整體呈現思路
依首頁中的每個內容區塊分別說明

三、最近我在學什麼?——專案與任務

  • 標題的樣式與格式
    • 一開始是使用 header 3,而且沒有背景色塊,後來想起了第一週作業老K的提醒:
      • 「若不使用色塊背景的話,就要思考如何在視覺上拉出層次、留下空白。大部分的人對純黑白文字還是會下意識抵抗的。」
    • 後來改採類似第一週作業的 Quote 標題法
      • 使用灰底以和選單一致,維持整頁的色調
      • 但是使用褐色字而非黑色字,因為資料庫標題是強制黑字(還粗體),區塊標題如果也用黑字,一樣會有點視覺疲勞
      • 現在 Quote 可以用大型字體了!更適合作為標題的場景需求替代方案(美美的)
        • notion image
    • 後面的內容區塊標題也都是照這個思路,自不待言
  • 標題命名
    • 本來叫「我的專案與任務」,但發現這個命名很有問題,因為「專案、任務」都太過概括籠統,什麼的專案?什麼的任務?可能會讓初來乍到的人摸不著頭緒,要看內容才能推知
    • 有必要使用更俗易懂的說明,於是才改為現版本的「最近我在學什麼?——專案與任務
      • 讓人一看就可以先知道,原來是指學習相關的事——只是用專案任務形式來進行
      • 其他內容區塊標題比如「最新文章」,因為內容相對單純,比較沒有這個問題
      • 這個改動算是對各內容區塊標題在語意與口吻上的對齊
  • View
    • 這是首頁全部內容區塊唯一有 view 可以選的,因為它沒有獨立的後台頁面可以再細看!
    • view「執行中」是呼應標題的「最近」,但我也做了「已完成」來讓人了解我之前做過哪些事
      • 專案的兩個 view 都是 list 形式
      • 而任務的主 view 則採用直觀的看板,「已完成」才用清單
  • 目的與功能
    • 原則上我並沒有打算讓讀者了解我專案與任務的細節,所以沒有製作獨立的後台頁面
    • 它比較像是 ig 上的「動態訊息」而已
    • 不過為了讓「潛在合作方」知道我做過什麼,更容易決定是否合作,還是保留了「已完成」view 供參考,算是一個折衷

四、最新文章

內容較單純,先講前台再講後台
  • 前台篇
    • 無論前台或後台,資料檢視上全部都採用 Gallery 檢視,因為我每一篇文章的插圖都很認真在選,一定要秀一波!
      • property 的選擇主要以「層次分明」為訴求
      • 採:標題 > 類別 > 日期 > 一點點內文
    • 不採用 board 呈現更多內文
      • 因為「分組」會很麻煩,而且我很討厭看到「hidden groups」這個部分,gallery 才簡潔
      • 而且這畢竟是文章的「簡介」而非本文,呈現上點到為止即可
    • 從本內容區塊開始,前台的資料庫不會再有複數 view 可切換!
      • 強制只有一種動態呈現的樣式
      • 想看細節的話可點擊左側選單進入後台頁面
      • 維持首頁版面呈現上的一致性,不會一下子清單一下子表格
    • filter
      • 以發文已過日期在「60 天內」作為 filter 條件
  • 後台篇
    • views
      • 主 view 是「全部」文章,第一次載入限制 25 頁,並以發文日期由新到舊來 sort
      • 其餘的 view 是依文章分類,一樣用發文日期新到舊排序

五、最近的學習與複習筆記

  • ⚠️ 最終版使用作業二建立、作業三完善的「學習筆記資料庫」
    • 本來「架構發想」是說沒有要用「學習筆記資料庫」,而是改用「材料點評」,但我真的很懶得再寫了 XD
    • 所以使用意思相近的學習筆記資料庫作業「概念」呈現,便宜行事
      • 不過實際上,我應該不太可能真的把筆記真的公布給別人看
        • 也不是說這些有什麼厲害,而是我真實的筆記中會有很多自己的碎碎念
        • 太私人了,哈哈
    • 這裡主要還是想表達「學習材料的選擇與推薦」這件事
  • 前台篇
    • 以「已過天數」<= 14 來進行 filter
      • 此時就能看出,有了自己的「已過天數」欄位的優點——可以非常彈性來選定時間區段
      • 而不會只有一星期、一個月、一年這些制式選項
    • view:只有一個就是清單
      • 而且 property 欄位全部隱藏,因為和另一個內容區塊並列,所以排版上要力求簡潔
      • 詳細的欄位呈現請至後台頁面!
  • 後台篇
    • 預設 view 為「全部」
      • 採 list 格式
      • 欄位會秀出「重要性」、「材料類別」、「技術類別」
    • 其他 views
      • 以技能類別為分頁名稱!
        • 原本是以「材料類別」為分頁,但其實不符合一般人的思考需求
        • 應該是先看想學的技術類別,才會去注意是書或線上課
      • 分頁的每個 view 依舊是 list,但顯示的 property 欄位有變動(縮減)
        • 取消「技術類別」欄位的呈現,原因不難理解,因為 view 的名稱已經包含這個訊息

六、Podcast 推薦

最後的最後!
為了呼應我第一週作業說的「最常聽」的 Podcast,這裡就真的只選這兩個頻道來推薦單集
  • 前台篇
    • 排版與思路都和前面的「最近學習與複習」差不多
    • 以完成日作為排序依據,由新到舊
    • 以完成日為「過去一個月」作為 filter 條件
  • 後台篇
    • 這裡和前面「最近學習與複習」則大有不同!
    • 本後台頁面是全部後台中唯一打開「full width」的頁面,因為內容為表格呈現,資訊較多
    • views
      • 預設 view「全部」,其餘 view 有按頻道,也有按「三星推薦」的內容
        • property 顯示略有不同
      • 全都是以表格呈現
      • 這裡要特別講的是為何採用表格呈現
        • 主要是因為本頁內容算是一種「資訊的歸納與篩選器
        • 我個人化的程度較低,預計留給讀者自行選擇的彈性更大,所以原資訊會保留更多,供讀者自行判斷、選擇
        • 因為保留的資訊較多,所以不得不採用表格檢視,使其大量資訊能整齊呈現
        • 連排序的依據都寫在 view 名稱上,方便讀者識別
    • 偶然發現,從文章、學習筆記到 Podcast 推薦,剛好各是以 gallery、list、table 這三個最常用的 view 作為呈現方式
      • 可見不同的材料,確實有各自適合的表現手法
      • 同一個材料在不同場景或切入角度下也是
  • 最後補個可以優化的方向
    • 就是再加上「推薦理由」欄位,會更有誠意且更有推薦上的說服力
    • 但我已力氣放盡了,哈哈哈
 
The end,感謝閱讀
 
Loading...
目录