系統介面之設計概念

SPAZY LOHAS 網站的使用介面與系統操作介面的設計概念將借由圖 4-31

~4-36 來詳細說明。

(1) 一般使用者介面設計概念

a.網站首頁介面設計概念:畫面以清新綠色為底，flash 轉換動畫為部落 所拍攝照片製作，中間以代表部落文面文化的長老做為浮水印，加 上描述部落情景的文字，背景以大自然音樂為輔，並在畫面設立簡 單的三個項目功能，供使用者導入網站內頁。設計原則以讓一般使 用者在開啟網站首頁時，能直覺的感受到原住民部落特色及大自然 樂活氣息，如圖 4-31。

圖 4-31 網站首頁介面

b.網站內頁介面設計概念:畫面設計以部落風景照片堆疊加上代表原 住民色彩的紅黑三角形，頁面以清新綠色為底，左側以文面長老為 浮水印和首頁畫面呼應，在整體網站的視覺設計風格一致性，如圖 4-32。

圖 4-32 網站內頁介面

c.網站操作程序設計概念:提供簡易的防錯機制並使用常用的 GUI 輸入 控制為設計指導原則，如圖 4-33，以下作為說明:

c 防錯機制:當使用者離開未輸入訊息的文字方塊，即會跳出警告 視窗，提醒使用者必要欄位訊息未輸入的即時防錯功能。

d 文字方塊:具備一個有說明性意義的標題，使用者能清楚的關聯 標題和它的文字方塊，文字方塊大小夠大，可讓使用者輸入和檢視 資料之所有字元。

e 圓形按鈕:提供使用者單的方法快速的從一群組中做選擇，選項 以水平做排列。

f 列示方塊:列示方塊的寬度夠大，足以讓使用者輸入大部份的字 元並為使用者看見。

圖 4-33 網站操作程序畫面

(2) 管理者介面設計概念

a. 管理系統首面設計概念: 如圖 4-34

c 介面設計方面:畫面以綠色系為主，經調查綠色的視覺是讓人感 覺舒服、健康與溫和的，考量人性化、美觀化、視覺化…等因素後，

以綠色系設計畫面。

d 安全機制:為防止不合法管理者入侵與資訊安全的考量下，並做 安全性的防護設定，限制頁面存取，不管輸入任一頁面網址在未進 行登入帳號、密碼驗證前，都會將頁面轉回登入系統畫面，要求做 管理者登入帳號、密碼驗證。

圖 4-34 管理系統首頁介面

b. 管理系統內頁介面設計概念:畫面視覺設計風格與登入系統介面採 一致性，作業程序方面以簡單具良好的親和力之人性化介面按鍵，

方便管理者使用，如圖 4-35。

圖 4-35 管理系統內頁介面

c. 管理系統操作程序設計:提供簡易的防錯機制並使用常用的 GUI 輸 入控制為設計指導原則，如圖 4-36，以下作為說明:

c 防錯機制:當使用者離開未輸入訊息的文字方塊，即會跳出警告 視窗，提醒使用者必要欄位訊息未輸入的即時防錯功能。

d 下拉式清單:下拉式清單包含一個矩形的選取欄，有一個小型向 下的三角圖形按鈕，這個按鈕可顯示隱藏的選項清單，當資料項目 很多時使用下拉式清單可避免佔到多於畫面空間。

e 文字方塊:具備一個有說明性意義的標題，使用者能清楚的關聯 標題和它的文字方塊，文字方塊大小夠大，可讓使用者輸入和檢視 資料之所有字元。

f 列示方塊:列示方塊的寬度夠大，足以讓使用者輸入大部份的字 元並為使用者看見。

g 省略控制:按下省略符號(『瀏覽…』鍵)，會出現一個資料彈出式 對話框，供管理者快速選擇資料輸入。

圖 4-36 管理系統操作程序介面