元件特性分析

第四章個案研究與分析

第三節元件特性分析

在元件分析階段，使用詮釋結構模式，建立所有設計元件的層級結構，並分析各 元件之間彼此的隸屬關係。

1. 建立層級結構：

(1)建構關聯矩陣：將 23 個元件排列成 23 × 23 的結構分析矩陣，依據介面設計專家針對每個元件所定義的互動性設計規範，進行元件彼此之間的關聯性分析。

專家依照自己的設計經驗判斷，橫列(row)上的元件對直行(column)上的元件具有影響性，則註記「1」在對應的方格中。例如：C10 (文字方塊)與 C11(按鍵) 相互具有影響性，故在矩陣中座標(10，11)和(11，10)的方格中標註為「1」。(如圖 14)

NO 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Frame 1 1 1 1 1 1 1

Menu 2 1 1 1 1 1

Navigation bar or icon 3 1 1 1 1 1 1

single panel 4 1 1 1

two-panel selector 5 1 1 1

Tree Table 6 1 1 1

Address Box 7

Drop Down List 8 1

Check Box 9

Text Box 10 1

Button 11 1

Scroll Bar 12

Pop Up MessageBox 13 1 1 1 1

Hyperlink graphic 14 Tool Tip 15

Tag 16 1 1

Search field 17 1 1

Header 18 1

Editor Zone 19 Text 20 Hyper Text 21

Banner 22 1

Calender 23 1 1 1 1

圖 14 網站郵件系統介面元件之關聯矩陣

(2)建構可達矩陣：利用詮釋結構模式進行階層架構的建構作業，將原始的關聯矩陣透過轉換為相鄰矩陣與可達矩陣(圖 15)。

NO 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 D-Value

Frame 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 21

Menu 2 1 1 1 1 1 1 1 1 1 1 1 1 1 13

Navigation bar or icon

3 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 17

single panel 4 1 1 1 1 1 1 1 1 1 1 1 1 1 13

two-panel selector

5 1 1 1 1 4

Tree Table 6 1 1 1 1 4

Address Box 7 1 1

Drop Down List 8 1 1 1 1 1 1 1 1 1 1 1 1 1 1 14

Check Box 9 1 1

Text Box 10 1 1 2

Button 11 1 1 2

Scroll Bar 12 1 1

Pop Up MessageBox

13 1 1 1 1 1 1 1 1 1 1 1 1 1 13

Hyperlink graphic

14 1 1

Tool Tip 15 1 1

Tag 16 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 16

Search field 17 1 1 1 3

Header 18 1 1 2

Editor Zone 19 1 1 1 1 1 1 1 1 1 1 1 1 1 13

Text 20 1 1

Hyper Text 21 1 1

Banner 22 1 1 2

Calender 23 1 1 1 1 1 1 1 1 1 1 1 1 1 13

R-Value 1 9 2 9 4 10 11 3 5 12 12 11 9 4 11 2 1 1 9 11 11 2 9

圖 15 網站郵件系統介面元件之可達矩陣

(3)群集化可達矩陣：經由可達集合的處理(表 6)，並將具有關聯性的元件整理成群集化可達矩陣(圖 16)。

表 6

相鄰集合與可達集合的處理

S

R(S

) A(S

) R(S

)∩A(S

)

S1 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,19,20,21,22,

23 1 1

S2 2,4,6,7,10,11,12,13,15,19,20,21,23 1,2,3,4,8,13,16,19,23 2,4,13,19,23 S3 2,3,4,5,6,7,8,9,10,11,12,13,15,19,20,21,23 1,3 3,

S4 2.4.6,7,10,11,12,13,15,19,20,21,23 1,2,3,4,8,13,16,19,23 2,4,13,19,23

S5 5,9,12,20 1,3,5,16 5

S6 6,7,15,21 1,2,3,4,6,8,13,16,19,23 6

S7 7 1,2,3,4,6,7,8,13,16,19,23 7

S8 2,4,6,7,8,10,11,12,13,15,19,20,21,23 1,3,8 8

S9 9 1,3,5,9,16 9

S10 10,11 1,2,3,4,8,10,11,13,16,17,19,23 10,11 S11 10,11 1,2,3,4,8,10,11,13,16,17,19,23 10,11

S12 12 1,2,3,4,5,8,12,13,16,19,23 12

S13 2,4,6,7,10,11,12,13,15,19,20,21,23 1,2,3,4,8,13,16,19,23 2,4,13,19,23

S14 14 1,14,18,22 14

S15 15 1,2,3,4,6,8,13,15,16,19,23 15

S16 2,4,5,6,7,9,10,11,12,13,15,16,19,20,21,23 1,16 16

S17 10,11,17 17 17

S18 14,18 18 18

S19 2,4,6,7,10,11,12,13,15,19,20,21,23 1,2,3,4,8,13,16,19,23 2,4,13,19,23

S20 20 1,2,3,4,5,8,13,16,19,20,23 20

S21 21 1,2,3,4,6,8,13,16,19,21,23 21

S22 14,22 1,22 22

S23 2,4,6,7,10,11,12,13,15,19,20,21,23 1,2,3,4,8,13,16.19,23 2,4,13,19,23

NO 7 9 10 11 12 14 15 20 21 5 6 17 18 22 2 4 13 19 23 8 16 3 1

7 1

9 1

10 1 1

11 1 1

12 1

14 1

15 1

20 1

21 1

5 1 1 1 1

6 1 1 1 1

17 1 1 1

18 1 1

22 1 1

2 1 1 1 1 1 1 1 1 1 1 1 1 1

4 1 1 1 1 1 1 1 1 1 1 1 1 1

13 1 1 1 1 1 1 1 1 1 1 1 1 1

19 1 1 1 1 1 1 1 1 1 1 1 1 1

23 1 1 1 1 1 1 1 1 1 1 1 1 1

8 1 1 1 1 1 1 1 1 1 1 1 1 1 1

16 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1

3 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1

圖 16 網站郵件系統介面元件之群集化可達矩陣

(4)建構本研究個案之層級結構圖(圖 17)。

圖 17 網站郵件系統之層級架構圖

2. 元件特性分析：藉由詮釋結構模式所建構的層級架構，一般皆會分為：最高層級、

中間層級與基礎層級。通常位在最高層級中的元件或因子，都具有主動影響其他因子的特性。而位於底部的基礎層級中的因子，大都相依於位於高層因子。至於位在中間層級的因子，因兼具影響底層因子和相依於高層因子的雙重特質，常常會因為受到外部環境的因素影響而產生變化，極其不穩定。因此，常於此層級中發現群集性的因子，彼此互相影響，形成模組。本研究的層級架構圖，分為 6 層，

敘述如下：

(1)最高層級：具有主動影響其他層級的特性在最高層層級(level 1)的 C1(框架)為介面設計中必要的基礎元件，對大多數元件具有主動的影響性(圖 18)。而同位在

Level 1

7 9 ¹² ¹⁴ ¹⁵ ²⁰ ²¹

10 11

Level 2

Level 3

Level 4

19 23

4 ¹³

Level 5

Level 6

16 8

5 6 ¹⁷ ¹⁸ 22

次高層的 level 2 中的 C3(瀏覽器列)和 level 3 中的 C8(下拉式選單)，C16(標籤) 對 level 4- level，6 中的大多數元件都具有主動影響性(圖 19)。

圖 18 最高層元件分佈圖

Level 1

7 9 ¹² ¹⁴ ¹⁵ ²⁰ ²¹

10 11

Level 2

Level 3

Level 4

19 23

4 ¹³

Level 5

Level 6

18 17

16 8

5 6 22

圖 19 第二層與第三層的元件分佈圖

(2)中間層級：具有主動影響其他層級，並兼具相依於高層級的雙重特性。位於居中位置的 level 4，不僅受到 level1-level3 中各元素的影響，也影響 level 5 的元件 C6(樹狀表格)和 level 6 的元件 C7(通訊錄)，C10(文字方塊)，C11(按鍵)，

C12(卷軸)，C15(工具提示)，C20(一般文字)和 C21(超連結文字)。其中特別值得注意的是，在本層級中的元素：C2(功能選單)，C4(單面板)，C13(彈跳式訊息視窗)，C19(編輯區)，C23(行事曆)，彼此具有高度互動性，並同時亦相依於其他元件，因此成為模組。但不同於基礎層的模組，在此處的模組亦具備子系統的特性，具有不確定性和易變性(圖 20)。

Level 1

7 9 ¹² ¹⁴ ¹⁵ ²⁰ ²¹

10 11

Level 2

Level 3

Level 4

19 23

4 ¹³

Level 5

Level 6

16 8

5 6 ¹⁷ ¹⁸ 22

圖 20 中間層的元件分佈圖

(3)基礎層級：具有受到高層級因子主動影響的相依特性。處於下層的 level 5 對於最底層 level 6 的元件也具有影響性，其中 C10(文字方塊)和 C11(按鍵)互相影響，成為功能模組(圖 21) 。

Level 1

7 ¹² 9 ¹⁴ ¹⁵ ²⁰ ²¹

10 11

Level 2

Level 3

Level 4

19 23

4 ¹³

Level 5

Level 6

17 18

16 8

5 6 22

圖 21 基礎層的元件分佈圖

藉由層級架構圖中的元件分佈之探討，可以得知：

1. C1(框架)、C3(瀏覽器列)、C8(下拉式選單)、C16(標籤) 等四個元件具有主動影響的特性，為關鍵性的主導元件。故介面設計師，在規劃介面設計架構時，必頇先配置這四個關鍵元件。

2. C2(功能選單)，C4(單面板)，C13(彈跳式訊息視窗)，C19(編輯區)和 C23(行事曆) 等五個元件，因互相影響，形成一模組功能。由於此功能模組位在中間層級，具備影響與相依雙重特性，極容易受到外在環境變化的影響，對原有系統產生架構上的改變，甚至形成創新性的變革。故當使用者提出新的需求時，設計者必頇注意這類元件是否會受到影響。

Level 1

7 ¹² 9 ¹⁴ ¹⁵ ²⁰ ²¹

10 11

Level 2

Level 3

Level 4

19 23

4 ¹³

Level 5

Level 6

16 8

5 22

18 6

3. 位處於基礎層級的元件，一般在設計意涵上，較不具有主動影響性。甚至，某些元件所具備的功能，並無法對整體系統產生影響性，因而容易被忽略。對於這一類的元件，設計者可評估其功能和效益，決定是否從整體系統中移除。但在層級中的模組，必頇慎重評估其功能。此類模組，雖不具主動影響性，但卻具備基礎的功能。例如：文字方塊與按鍵之間的關係。

在文檔中中華大學 (頁 39-49)

第四章 個案研究與分析

第三節 元件特性分析

S

R(S

) A(S

) R(S

)∩A(S

)

Level 1

Level 2

Level 3

Level 4

Level 5

Level 6

Level 1

Level 2

Level 3

Level 4

Level 5

Level 6

Level 1

Level 2

Level 3

Level 4

Level 5

Level 6

Level 1

Level 2

Level 3

Level 4

Level 5

Level 6

Level 1

Level 2

Level 3

Level 4

Level 5

Level 6

第四章個案研究與分析

第三節元件特性分析