Modern Family 角色人物關係圖

設計說明

  • 操作方式：滑鼠移到所選取的圓點，也可以拖移圓點，將點線移至想要的位置觀察、或調整視線， 增強互動性。
  • 為了使使用者注意力集中並不被影響，當點選圓點時，此圓點的名字字體和圓圈半徑會加大，且其他人的名字會變為灰色，然後與該人物相關的人物關係的線會加粗，並顯示他們之間的關係(線上面會出現彼此關係)。

    • 設計選擇

    What

  • Data and Dataset Types: Network
  • Data Types - Items: 人物
  • Data Types - Attributes: 主角、配角
  • Data Types - Links: 關係(例如：親子關係、婚姻關係）
  • Dataset Avalibility: Static

    • Why

  • 這是我最喜歡的美劇！不過網路資源都是靜態的關係圖表，所以我想分析觀察裡面的關係藉此做成動態網頁。而且由於自己已經熟透劇情，因此在製作人物關係時，也更得心應手。 因為是人物關係圖，因此讓我聯想到用network圖來呈現。

    • How

  • 使用 Network Graph 呈現出來人物之間關係

    • 經驗法則

  • Character co-occurence
  • 由於一部劇裡面會出現非常多角色，為了讓使用者更能辨識，有把主角們的圓點半徑增大，主角們圓點的顏色也與配角們不同。 主角們為深藍色，而配角們則為綠色，半徑也較小。
  • 不再多加使用背景顏色，避免色彩過多眼花撩亂

    • 參考資料來源：維基百科