<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>mind-map｜林鼎淵 Dean Lin</title>
    <link>https://deanlin.net/tags/mind-map/</link>
    <image><url>https://deanlin.net/images/author_hu_aa256fc934e9a932.jpg</url><title>mind-map｜林鼎淵 Dean Lin</title><link>https://deanlin.net/tags/mind-map/</link><width>144</width><height>144</height></image>
    <description>林鼎淵（Dean Lin）的部落格：生成式 AI 企業內訓講師、外商資安公司軟體專家、7 本書作者。400 多篇文章用白話分享生成式 AI 實戰、Claude Code 與 Vibe Coding 教學、團隊合作與職場成長。</description>
    <generator>Hugo</generator>
    <language>zh-tw</language>
    <copyright>© 2020–2026 林鼎淵 Dean Lin</copyright>
    <lastBuildDate>Thu, 07 Oct 2021 08:35:20 +0800</lastBuildDate>
    <atom:link href="https://deanlin.net/tags/mind-map/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>[面試][系統設計]如何設計一個像 Facebook 的社交平台</title>
      <link>https://deanlin.net/blog/202110/fullstack-career-notes-day-22/</link>
      <pubDate>Thu, 07 Oct 2021 08:35:20 +0800</pubDate>
      <guid>https://deanlin.net/blog/202110/fullstack-career-notes-day-22/</guid>
      <dc:creator>林鼎淵</dc:creator>
      <category>職涯成長</category>
      <description>其實前面 10 幾篇文章的內容都是系統設計的一環，只是問題的方向是從你過往的履歷、技術或是面試公司的需求出發，透過詢問細節來評核你技術的硬實力。</description>
      <media:content url="https://deanlin.net/blog/202110/fullstack-career-notes-day-22/images/cover_hu_fd12157e912393a9.jpg" medium="image" type="image/jpeg" width="1200" height="675" />
      <content:encoded><![CDATA[<blockquote>
<p>擅長<del>嘴砲</del>溝通的人在這個環節有較多優勢。</p>
</blockquote>
<p>其實前面 10 幾篇文章的內容都是系統設計的一環，只是問題的方向是從你過往的履歷、技術或是面試公司的需求出發，透過詢問細節來評核你技術的硬實力。</p>
<p>再確認求職者的硬實力過關後，有些面試官會<mark>給你一個情境來做系統設計</mark>；然後依據你在這道題目上的應對進退，<mark>決定要給你 Junior 還是 Senior 的職稱</mark>。</p>
<blockquote>
<p>如果你面試的職缺是 Tech Lead，這題回答得不好有高機率直接出局。</p>
</blockquote>
<h2 id="大綱">大綱<a class="h-anchor" href="#%e5%a4%a7%e7%b6%b1" aria-label="這個段落的連結"></a></h2>
<ol>
<li><strong>初探系統設計</strong>
<ul>
<li>1.1 Junior 跟 Senior 工程師的差異</li>
<li>1.2 系統設計的題目來源</li>
<li>1.3 面試官在找的是同事</li>
</ul>
</li>
<li><strong>如何設計一個像 Facebook 的社交平台</strong>
<ul>
<li>2.1 縮小問題範圍，確認具體需求</li>
<li>2.2 先提出一個簡單的解決方案</li>
<li>2.3 提出減少耗能的解決方案</li>
<li>2.4 從自己擅長的面向切入</li>
<li>2.5 不要有預設立場</li>
<li>2.6 主動提出不同設計的優缺點</li>
</ul>
</li>
<li><strong>衍伸問題</strong>
<ul>
<li>3.1 你有使用過 Mind Map 跟 Sitemap 嗎？它們的使用時機是？</li>
</ul>
</li>
</ol>
<hr>
<h2 class="h-nomark" id="1-初探系統設計">1. 初探系統設計<a class="h-anchor" href="#1-%e5%88%9d%e6%8e%a2%e7%b3%bb%e7%b5%b1%e8%a8%ad%e8%a8%88" aria-label="這個段落的連結"></a></h2>
<p>筆者在第一次遇到系統設計的問題時表現得很差，因為我把它當成一個技術性的問題，所以<mark>不停的在輸出自己的想法及觀點</mark>，面試完的當下還覺得自己表現的超棒，肯定會拿到 Offer。</p>
<p>果然在兩天後收到 Offer Get 的信件，但核薪結果沒有到達自己的期待；當時我並不了解自己在哪個環節犯了錯，於是向人資詢問主管對我的評價，我收到的評價是：「技術完全沒問題、經驗豐富、自我學習能力高；<mark>但在系統架構的設計上能力稍顯不足，主觀思維太多</mark>。」</p>
<p>在這之後我才知道面試有「系統設計」這個類型的題目，也明白當時的回答並不是面試官期待的答案。</p>
<h3 class="h-nomark" id="11-junior-跟-senior-工程師的差異">1.1 Junior 跟 Senior 工程師的差異<a class="h-anchor" href="#11-junior-%e8%b7%9f-senior-%e5%b7%a5%e7%a8%8b%e5%b8%ab%e7%9a%84%e5%b7%ae%e7%95%b0" aria-label="這個段落的連結"></a></h3>
<p>Junior 工程師在看到問題後會想<mark>直接提出解決方案</mark>；而 Senior 工程師則會先釐清問題，<mark>從整體架構去思考</mark>。</p>
<p>會有這樣的差異是很正常的，因為 Junior 工程師在入職後，往往是<mark>接受任務分配</mark>的一方，所以他們已經習慣「<mark>收到問題 → 解決問題</mark>」的作業模式；很少人會去思考<mark>為什麼要這樣做、能不能這樣做</mark>，以至於可以完成交辦的任務，卻缺乏對整體架構的思維。</p>
<p>而 Senior 工程師除了要寫程式外，有時還要<mark>跟 PM 討論需求、規劃系統架構、分配工作給 Junior 工程師、幫 Junior 工程師 Debug</mark>；有些工程師討厭做這些事情，因為會耽誤到自己寫程式的時間，但正因為這些事情讓他有<mark>更完整的架構思維與溝通能力</mark>。</p>
<hr>
<h3 class="h-nomark" id="12-系統設計的題目來源">1.2 系統設計的題目來源<a class="h-anchor" href="#12-%e7%b3%bb%e7%b5%b1%e8%a8%ad%e8%a8%88%e7%9a%84%e9%a1%8c%e7%9b%ae%e4%be%86%e6%ba%90" aria-label="這個段落的連結"></a></h3>
<p>雖然系統設計的範圍很廣，但面試官愛考的就大概就是以下幾種：</p>
<ul>
<li><strong>經典面試題</strong><br>很多面試官都是去題庫裡面找題目，我這裡也是建議讀者<mark>先熟悉題庫</mark>；透過反覆練習題庫，除了掌握基本盤外；在面對沒有接觸過的系統也能做到基本的應對進退。</li>
<li><strong>面試公司的系統</strong><br>有些知名企業喜歡向求職者詢問：「如果是你，會如何設計我們公司的系統？」<br>這個問題除了考系統設計外，其實也是想知道<mark>求職者對面試公司的系統了解有多深</mark>。</li>
<li><strong>你履歷上的技能</strong><br>像是筆者在履歷上有<mark>網頁爬蟲</mark>的經歷，面試官就會以此詢問筆者：「如何設計一個網頁爬蟲的系統？」</li>
</ul>
<blockquote>
<p><strong>備註：</strong></p>
<p>每個面試官在意的細節都不一樣；有些題目除了要系統設計外，他還要你提供不同方案的<mark>人力資源配置、功能時程預估、所需硬體資源&hellip;</mark>，要你設計一套可以讓組織運轉的流程。</p>
<p>如果沒有一定的實務基礎，面對這些延伸的問題基本沒有招架之力。</p>
</blockquote>
<hr>
<h3 class="h-nomark" id="13-面試官在找的是同事">1.3 面試官在找的是同事<a class="h-anchor" href="#13-%e9%9d%a2%e8%a9%a6%e5%ae%98%e5%9c%a8%e6%89%be%e7%9a%84%e6%98%af%e5%90%8c%e4%ba%8b" aria-label="這個段落的連結"></a></h3>
<p>問題走向完全看面試官的喜好，因為沒有固定的解答，所以<mark>回答是否被接受也是看你跟面試官頻率是否契合</mark>。</p>
<p>今天面試官<mark>要找的是同事</mark>，在確認技術過關後；他想透過這個關卡更進一步了解求職者：</p>
<ul>
<li>是否具備分析問題的能力。</li>
<li>會經過討論再做出設計，而不是一開始就有許多預設立場。</li>
<li>能夠清晰闡述自己的策略。</li>
<li>溝通時雙方在同一個頻率，不會出現雞同鴨講的狀況。</li>
<li>能評估自己提出方案的優缺點，並提出可行的優化方案。</li>
</ul>
<p>與其說是考試，<mark>更像是同事間在討論一個議題</mark>；有時也會遇到你認為自己的方案沒問題，但面試官就是覺得不可行的狀況；此時你可以先了解面試官顧慮的點，可能真的有自己忽略的細節。</p>
<p>有時面試官的技術能力未必高於求職者，也許你提出的方案更好，但因為已經超過面試官知識範圍所以不被採納；此時<mark>並不建議堅持己見</mark>，你可以說：「也許有我忽略的細節，您的考慮應該是對的。」然後<mark>轉移到下一個話題</mark>。</p>
<p>如果你遇到一個自己完全不熟悉的領域，連回答的頭緒都沒有，<mark>請跟面試官討論你想解決的問題，並說明為什麼會卡住，千萬不要不懂裝懂瞎掰答案</mark>；多跟面試官互相分享彼此的想法，面試官自己也很清楚求職者是不可能在短時間內給出完美的答案，面對自己不熟悉的議題，就算有不會知識也是很正常的。</p>
<ul>
<li>系統設計不只是單純的考試，而是評估你在工作上會如何討論問題。</li>
<li>雙方有來有往聊得越開心，就算你的回答有犯錯也容易被忽略。</li>
</ul>
<p><mark>會錄取的求職者未必技術能力最好，但絕對是在面試過程中溝通流暢的</mark>。</p>
<hr>
<h2 class="h-nomark" id="2-如何設計一個像-facebook-的社交平台">2. 如何設計一個像 Facebook 的社交平台<a class="h-anchor" href="#2-%e5%a6%82%e4%bd%95%e8%a8%ad%e8%a8%88%e4%b8%80%e5%80%8b%e5%83%8f-facebook-%e7%9a%84%e7%a4%be%e4%ba%a4%e5%b9%b3%e5%8f%b0" aria-label="這個段落的連結"></a></h2>
<h3 class="h-nomark" id="21-縮小問題範圍確認具體需求">2.1 縮小問題範圍，確認具體需求<a class="h-anchor" href="#21-%e7%b8%ae%e5%b0%8f%e5%95%8f%e9%a1%8c%e7%af%84%e5%9c%8d%e7%a2%ba%e8%aa%8d%e5%85%b7%e9%ab%94%e9%9c%80%e6%b1%82" aria-label="這個段落的連結"></a></h3>
<p>大部分主管在交代事情時，只會給一個方向，並不會把細節說清楚；所以面試官也是想透過這個問題來了解在未來交辦工作時，你會如何面對。</p>
<ul>
<li>
<p><strong>縮小問題範圍</strong><br>Facebook 是一個經歷十幾年改版、無數菁英灌注青春與熱血的系統，它所<mark>提供的服務實在是太多了</mark>，所以要先確認問題回答的方向，比如說：「Facebook 有提供蠻多種服務的，像是發文動態、Messager、廣告系統；我們要先從哪一塊來做討論？」</p>
</li>
<li>
<p><strong>不要急著提出解決方案</strong><br>當年筆者沒搞清楚狀況，把它當成高流量架構設計的問題；直接丟出一堆像是 Load Balance、Repliaction、DB Sharding&hellip;的技術方案；我當時說的很開心，但<mark>回答的內容完全偏離了面試官想要了解的方向</mark>。</p>
<blockquote>
<p>使用什麼技術可以等需求確定後再討論，如果一開始在分析問題時就走偏了，那後面再多的努力也沒有用。</p>
</blockquote>
</li>
</ul>
<hr>
<h3 class="h-nomark" id="22-先提出一個簡單的解決方案">2.2 先提出一個簡單的解決方案<a class="h-anchor" href="#22-%e5%85%88%e6%8f%90%e5%87%ba%e4%b8%80%e5%80%8b%e7%b0%a1%e5%96%ae%e7%9a%84%e8%a7%a3%e6%b1%ba%e6%96%b9%e6%a1%88" aria-label="這個段落的連結"></a></h3>
<p>假設面試官把問題縮小到<mark>打造一個 Messager 的系統</mark>，那核心功能就非常明確；此時你只要<mark>簡單敘述設計概念</mark>就好；不要急著說出使用 Node.js + Socket.io + MongoDB 這些工具來打造系統。</p>
<ul>
<li><strong>簡述基礎解決方案</strong><br>我們會需要一個<mark>聊天伺服器</mark>來處理訊息間的溝通，當用戶發送訊息時，訊息會<mark>先傳送到伺服器並儲存</mark>；如果接收方在線上就直接<mark>傳送訊息</mark>給他，如果不在線就透過<mark>推播通知</mark>。<br>在 UI 介面上，使用者發送訊息成功時會有<mark>時間戳記</mark>；當接收方點開訊息時也會有<mark>已讀的標記</mark>。</li>
</ul>
<blockquote>
<p>通常考題都會涵蓋「前端、後端、資料庫」的設計；這樣面試官才能依照自己在意的點深入詢問。</p>
</blockquote>
<hr>
<h3 class="h-nomark" id="23-提出可以減少耗能的可行方案">2.3 提出可以減少耗能的可行方案<a class="h-anchor" href="#23-%e6%8f%90%e5%87%ba%e5%8f%af%e4%bb%a5%e6%b8%9b%e5%b0%91%e8%80%97%e8%83%bd%e7%9a%84%e5%8f%af%e8%a1%8c%e6%96%b9%e6%a1%88" aria-label="這個段落的連結"></a></h3>
<p>資源永遠是有限的，更高的硬體規格代表更多的預算，此時就需要 <code>trade-off（權衡）</code>。</p>
<p>接著讓我們從資源消耗的角度來探討 Messager 這個系統中，<mark>好友上線顯示綠燈的功能</mark>要如何設計。</p>
<p>最簡單的做法是當用戶一上線，就向所有好友發送上線通知；但這個設計在系統成長到<mark>百萬用戶</mark>，且特定時段上線的<mark>活躍用戶數量高達 30 萬</mark>時，這種發送通知的方法<mark>對資源的消耗極大</mark>。</p>
<ul>
<li><strong>有什麼方式可以減輕資源消耗？</strong><br>很多人打開 Messager 只是簡單回覆訊息就關掉，所以系統其實沒必要爲剛上線的用戶立刻發送通知；我會建議把發送上線通知的策略改為<mark>顯示活躍用戶</mark>，可能要在線 5 分鐘以上再發送通知；透過<mark>減少請求的次數來降低對系統資源的消耗</mark>。</li>
</ul>
<hr>
<h3 class="h-nomark" id="24-從自己擅長的面向切入">2.4 從自己擅長的面向切入<a class="h-anchor" href="#24-%e5%be%9e%e8%87%aa%e5%b7%b1%e6%93%85%e9%95%b7%e7%9a%84%e9%9d%a2%e5%90%91%e5%88%87%e5%85%a5" aria-label="這個段落的連結"></a></h3>
<p>在提出基礎的解決方案後，題目就會往細節發展，此時你可以<mark>主動向面試官確認一些系統需求</mark>，假設你擅長大流量高併發的議題，你就故意問面試官：「<mark>這個系統在設計上要考量到大流量以及高併發的問題嗎？</mark>」</p>
<p>主動引導面試官將話題轉向自己擅長的領域是很重要的；<mark>但如果面試官對這個議題沒有興趣，千萬不要自顧自的一直講</mark>。</p>
<blockquote>
<p>如果你對某個領域不擅長就<mark>不要挖坑給自己跳</mark>，假如你主動提及資料庫相關問題，面試官可能就因為你履歷上有 MySQL 跟 PostgreSQL 的經驗，而詢問你兩者的優缺點及使用時機，如果你答不出來反而會被扣分。</p>
</blockquote>
<hr>
<h3 class="h-nomark" id="25-不要有預設立場">2.5 不要有預設立場<a class="h-anchor" href="#25-%e4%b8%8d%e8%a6%81%e6%9c%89%e9%a0%90%e8%a8%ad%e7%ab%8b%e5%a0%b4" aria-label="這個段落的連結"></a></h3>
<p>Messager 系統除了傳送訊息這個基礎功能外，還有<mark>建立聊天群組、回覆特定訊息、移除訊息、對訊息傳送表情符號&hellip;</mark>等眾多功能。</p>
<p>如果你打算在這些功能上開闢戰場，<mark>請先詢問面試官是否需要這些功能</mark>；而不是沒有經過溝通，自己覺得理所當然就直接開始設計。</p>
<blockquote>
<p><strong>經驗分享</strong></p>
<p>在系統開發上，如果你要做的功能在需求規格以外，一定要先跟 PM 溝通；你認為必要的功能對客戶來說可能根本不需要，甚至系統有可能因為多出來的功能而產生無法預期的 Bug；<mark>千萬不要自作聰明</mark>。</p>
</blockquote>
<hr>
<h3 class="h-nomark" id="26-主動提出不同設計的優缺點">2.6 主動提出不同設計的優缺點<a class="h-anchor" href="#26-%e4%b8%bb%e5%8b%95%e6%8f%90%e5%87%ba%e4%b8%8d%e5%90%8c%e8%a8%ad%e8%a8%88%e7%9a%84%e5%84%aa%e7%bc%ba%e9%bb%9e" aria-label="這個段落的連結"></a></h3>
<p>如果面試官把話題帶到 <code>DB Sharding</code> 上面，比如：「隨著用戶成長，儲存用戶的 Table 資料量太大，效率越來越低，有什麼解決方案嗎？」</p>
<p><strong>筆者會用下面的角度來回答：</strong></p>
<p>考慮到用戶數量會持續成長，為了減輕資料庫的負擔，我會將這個 Table 切分到多個資料庫來分散壓力，這邊提供兩種切分策略：</p>
<ul>
<li>
<p><strong>Range-based partitioning</strong><br>第一種是挑選一個合適的<mark>欄位作為切分條件</mark>，像是以用戶的「年齡」做為切分條件；不過使用這種方式可能會造成<mark>不均勻的 Server load</mark>，因為每個年齡段的用戶數量不同。</p>
</li>
<li>
<p><strong>Hash partitioning</strong><br>為了解決 Server load 不均勻的問題，第二種方案則是挑選一個欄位用 <code>Hash Function</code> 計算出一個值，用這個值來決定資料要放到哪個資料庫。</p>
<blockquote>
<p>可以採用 <code>Consistent Hashing</code> 讓資料均勻分布在不同 DB；這個方案在 DB 數量有增減時，也能盡量避免原有的 Key 被重新分配。</p>
</blockquote>
</li>
</ul>
<p><mark>系統設計沒有標準答案，如果你有能力提出多種解決方案，並能說出各自的利弊是非常加分的。</mark></p>
<hr>
<h2 class="h-nomark" id="3-衍伸問題">3. 衍伸問題<a class="h-anchor" href="#3-%e8%a1%8d%e4%bc%b8%e5%95%8f%e9%a1%8c" aria-label="這個段落的連結"></a></h2>
<h3 class="h-nomark" id="31-你有使用過-mind-map-跟-sitemap-嗎它們的使用時機是">3.1 你有使用過 Mind Map 跟 Sitemap 嗎？它們的使用時機是？<a class="h-anchor" href="#31-%e4%bd%a0%e6%9c%89%e4%bd%bf%e7%94%a8%e9%81%8e-mind-map-%e8%b7%9f-sitemap-%e5%97%8e%e5%ae%83%e5%80%91%e7%9a%84%e4%bd%bf%e7%94%a8%e6%99%82%e6%a9%9f%e6%98%af" aria-label="這個段落的連結"></a></h3>
<p><mark>考點：設計系統架構時的輔助工具</mark></p>
<ul>
<li><strong>Mind-Map</strong><br>在專案做需求訪談時，我會先透過 Mind Map 來幫助發想與記錄想法，透過這張圖即使開會偏離重點也可以快速拉回；在會後我會透過它向同事說明需求的關聯性、以及一些功能的限制條件，讓他們快速理解這個專案的目標。</li>
<li><strong>Sitemap</strong><br>在需求明確後，我會用 Sitemap 規劃系統架構，設計頁面之間的關聯性與階層，完成流程上的模擬；並檢視規劃是否有下列問題：
<ul>
<li>
<p>如果需要 SEO 的頁面被埋得太深就要重新規劃，避免 Google 爬蟲不到。</p>
</li>
<li>
<p>檢查是否有規劃不良導致的孤兒網頁。</p>
<blockquote>
<p><strong>孤兒網頁</strong>：系統沒有連結可以抵達的網頁。</p>
</blockquote>
</li>
</ul>
</li>
</ul>
<hr>
<h3 id="筆者碎碎念">筆者碎碎念<a class="h-anchor" href="#%e7%ad%86%e8%80%85%e7%a2%8e%e7%a2%8e%e5%bf%b5" aria-label="這個段落的連結"></a></h3>
<p>即使經驗豐富，面對一個從未思考過的問題，也很難提出合適的設計；這邊建議讀者可以透過以下方式，有意識地培養自己系統設計的能力：</p>
<ul>
<li>上網找題庫，吸收他人在系統設計上的經驗。</li>
<li>找 Mentor 做模擬面試，熟悉答題方向。</li>
<li>在閒暇時思考知名的系統是如何設計出來的（ex：Youtube、Google、Twitter&hellip;）。</li>
</ul>
<p>感謝大家的閱讀，如果喜歡我的文章可以<code>訂閱</code>接收通知；如果有幫助到你，按<code>Like</code>可以讓我更有寫文的動力，我們明天見～</p>
<h3 id="參考資源">參考資源<a class="h-anchor" href="#%e5%8f%83%e8%80%83%e8%b3%87%e6%ba%90" aria-label="這個段落的連結"></a></h3>
<ol>
<li><a href="https://www.youtube.com/watch?v=zomYKjlvJGU&amp;ab_channel=HackBear%E6%B3%B0%E7%91%9E">系統設計面試 6 個技巧｜我面 Google 前的準備方法</a></li>
<li><a href="https://medium.com/jktech/acf6ab1f502f">軟體工程師系統設計面試準備指南</a></li>
<li><a href="https://wizardforcel.gitbooks.io/gainlo-interview-guide/content/5.html">系統設計面試（第一部分）</a></li>
<li><a href="https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md">donnemartin/system-design-primer</a></li>
<li><a href="https://www.yesharris.com/sitemap-seo/">從 Sitemap 的應用，談 SEO 的學習</a></li>
</ol>
<hr>
<hr>
<blockquote>
<p><img src="https://deanlin.net/blog/202110/fullstack-career-notes-day-22/images/fullstack-career-notes-day-22-01.webp" width="1024" height="233" alt="參考資源（圖 1）" fetchpriority="high" decoding="async"></p>
<p>在許多人的幫助下，本系列文章已成功出版，除了添加新的篇章，更完善了每個案例的應對進退；如果對現在的職涯感到迷茫，也許這本書能帶給你不一樣的觀點～</p>
<p><strong>天瓏書局：</strong> <a href="https://www.tenlong.com.tw/products/9786263334571">https://www.tenlong.com.tw/products/9786263334571</a></p>
</blockquote>
]]></content:encoded>
    </item>
  </channel>
</rss>
