2006年3月，本書繁體中文版以《出色網頁大賞》為題名在臺灣上市！

一個不懂得欣賞優秀網頁作品的設計師可能永遠都無法懂得借鑒的真諦；一個無法將優秀作品的精髓融入到現有需求中的設計師可能永遠都無法找到真正的靈感。

即便是那些看似獨創的設計，其靈感也往往來自設計師在長期借鑒過程中的不斷積累。

設計源于靈感，靈感源于借鑒——這是每個網頁設計師都應該牢記的“成功法則”。

下面這些網頁設計指南摘自《優秀網頁設計速查與賞析》一書。

用“原型法”細化網站設計需求

每個網頁設計師都有過被含混、多變的客戶需求折磨得痛苦不堪的經歷。在需求分析階段，使用“原型法”可能是細化并確認需求的最好方式。

當客戶根本不清楚自己的需求是什么的時候，網頁設計師不妨根據同類網站的構思和實現方式，用最便捷的工具（比如Dreamweaver）在最短的時間內搭出一個可以瀏覽、跳轉但不一定支持所有功能的網站原型，然后與客戶一起體驗并評估這個網站原型的架構、流程、布局、配色、文字等不同層面——這樣的評估結束后，客戶心中隱藏許久的那份“設計需求”也許就已經浮出水面了。

網頁鏈接的深度、廣度和泛耦合程度

超級鏈接是網頁設計中最重要的信息組織方式，也是整個Web世界的精髓所在。但糟糕的鏈接設計——比如過于泛濫和隨意的超級鏈接——很可能會讓沖浪者迷失在充斥著信息碎片的海洋里。

如果將網站首頁視為鏈接層次中的第一級，那么，由首頁中的超級鏈接得到的，在信息內容上具有從屬關系的站內頁面就是網頁鏈接層次中的第二級；從每個第二級頁面又可以繼續得出第三級網頁；依此類推，我們多半可以得到一個完整的樹形鏈接結構。在這個樹形鏈接結構中，整棵樹的層數可以被稱為（站內）網頁鏈接的深度，頁面最多的一層中包含的頁面總數可以被稱為（站內）網頁鏈接的廣度。一般說來，一個網站的鏈接深度和廣度最好有一個合適的均衡關系，深度過大的網站不利于沖浪者快速獲取相關信息，廣度過大的網站則容易讓沖浪者在無數并列的超級鏈接面前不知所措。

當網頁中的某個鏈接既沒有指向下一級網頁，也沒有指向上一級網頁時，它必然構成了由當前頁面向跨層級網頁或站外URL的“跳轉”，這種跳轉的出現頻率可以被稱為網頁鏈接的泛耦合程度。泛耦合程度過低的網站無法有效發揮Web沖浪的價值，由此得到的網站過于死板；另一方面，泛耦合程度較高的網站又有可能造成信息內容的支離破碎，影響沖浪者的正常閱讀。因此，網頁鏈接的泛耦合程度應該與網站的設計需求相適應——兒童或動漫類的網站應鼓勵那些代表跳躍式思維的泛耦合鏈接，而一個學術類的網站則應該對泛耦合鏈接持相對謹慎的態度。

導航欄的統一和變化

幾乎每個網頁都有導航欄。對同一個網站內的所有網頁來說，導航欄必須在設計風格上力求統一。否則，沖浪者就需要分別適應每個頁面的導航界面風格，這不但會浪費不少時間，也會嚴重影響整個網站的使用美感。

但這里所說的統一并不是要求我們為每個網頁設計出一模一樣的導航欄。完全相同的導航欄會讓沖浪者在瀏覽過程中由疲憊而麻木、由麻木而喪失對網站的瀏覽興趣。也就是說，我們應該在統一的整體風格下，在每一個或每一組網頁的導航欄中尋求細節上的變化。

比方說，我們可以在確保所有導航欄形狀、布局、字體一致性的基礎上，變換不同導航欄的背景顏色；或者，我們可以在統一了色彩、形狀、字體的情況下，變換不同導航欄的相對位置；再或者，我們還可以變換不同頁面中導航欄的背景圖片——當然，所有背景圖片應當從屬于某種統一的風格——同時保持其他設計元素不變。

“在統一的基礎上尋求變化”——除了導航欄以外，網頁設計師在處理同一頁面或同一網站內的其他設計問題時，這句話也同樣有效。

網頁基本布局

要尋找網頁布局方面的靈感并不難。我建議大家沒事兒時多做些折紙練習：隨手拿起一張A4復印紙，然后根據自己的心情好壞，或平行、或斜向、或選擇任意角度將紙片折疊幾次，再把紙平攤在面前，紙上呈現出來的折痕沒準兒就是一種相當不錯的網頁布局呢！

當然，網頁設計師還是要盡量熟悉那些典型網頁的基本布局方式，以根據客戶的需要選擇使用。比如，門戶類網頁為了盡可能多地展現信息內容，通常都會設計成三欄甚至四欄的縱向布局；公司首頁為了展現強大的企業實力，往往會選擇“視野”更寬闊的橫向布局；個人主頁為了展示網站主人的個性，其網頁布局方式也會千差萬別，像軸向布局、網格布局、斜角布局、放射布局、多中心布局、離散布局、對比布局等等都是常見的個人主頁布局方式。

網頁空間中的視覺導向

每個網頁都是一個神奇的視覺空間。像我們熟悉的四維時空一樣，網頁空間也有深度、廣度和時間流逝的感覺，甚至還會在設計元素引發的“力”的作用下產生運動或扭曲。

每當我們打開一個新的網頁后，我們的視線首先會聚焦在網頁中最引人注意的那一點上——我們通常稱其為視覺焦點。隨后，我們的思路會受到視覺焦點周邊設計元素的形狀和分布方式的影響，并在不知不覺中把視線轉移到另一個值得停留的地方（例如，一段醒目的線條，一種色彩到其近似色的漸變，它們都會讓我們的視線按照設計師預先安排的軌跡移動）。如此繼續下去，視線經過的所有關注點可以連接成一條完整的視覺路徑。

使用視覺路徑引導沖浪者按某種內在的邏輯順序瀏覽網頁信息的過程可以被稱為網頁空間中的視覺導向。是否能自發、自覺地使用視覺導向的設計方法并根據視覺路徑的走向排列關鍵信息，這是區別專業網頁設計師和業余網頁設計師的一個重要依據。

網頁空間的秩序及運動趨勢

網頁空間的秩序是網頁中所有視覺元素相互作用的結果。分析某個特定網頁空間的秩序時，最好把視覺元素抽象為“點”、“線”、“面”三大類，然后分別考察每一類元素之間以及不同類型元素之間的相互作用。

在設計師眼中，每一個視覺元素都可以被看成是“力”的源泉。不同視覺元素釋放出來的“力”的方向和大小不同。一個向右傾斜的三角形可以同時釋放出類似“重力”的垂直作用力和向右的水平作用力。視覺元素和視覺元素通過“力”相互作用，共同影響著整個網頁的空間秩序。

當網頁空間中所有作用力處于平衡狀態時，空間秩序最為穩定，整個網頁看起來比較和諧、均衡；反之，當所有作用力可以在某個方向上形成合力時，空間秩序就會處于不穩定的狀態，整個網頁看起來則會充滿動感和活力。

網頁中的留白

網頁中的留白就像情感小說中的心理描寫或是動作電影中的抒情段落一樣，可以讓網頁的視覺效果更加自由、流暢。很遺憾，許多網頁設計師都不懂得這個淺顯的道理，他們或是在客戶需求的壓力下，或是在不良設計習慣的驅使下，將整個頁面塞滿了圖片、文字、鏈接或是廣告，以至于所有視覺元素都不得不在擁擠的空間內茍延殘喘、痛苦掙扎。

留白并不特指網頁中的白色區域。事實上，網頁中凡是沒有前景元素干擾的視覺區域都可以被稱為留白。橫向通欄的留白可以讓網頁擁有一種水平的流動感；縱向的留白可以平衡文字、導航欄等視覺元素在水平方向的作用力；標題區域的大面積留白可以突出公司名稱或網頁標題信息；正文區域內的大面積留白既可以豐富頁面布局的內涵，也可以緩解沖浪者在閱讀時可能產生的視覺疲勞。

文字信息的設計和編排

編排網頁上的文字信息時需要考慮字體、字號、字符間距和行間距、段落版式、段間距等許多要素。從美學觀點看，既保證網頁整體視覺效果的和諧、統一，又保證所有文字信息的醒目和易于識別，這是評價此類工作的最高標準。從技術方面來說，今天的網頁設計師大多使用CSS樣式來控制和編排文字信息，但在使用某種客戶端未必安裝的特殊字體時，設計師通常會將文字信息保存為圖片或Flash對象，以確保所有設計元素在客戶端瀏覽器中的正確展現。

“對比”是另一個設計和編排文字信息時必須考慮的問題。不同的字體、不同的字號、不同的文字顏色、不同的字符間距在視覺效果上都可以形成強烈的對比。精心設計的文字對比可以為網頁空間增添活力，而過于泛濫的對比因素也會讓整個網頁混亂不堪。

圖片和動畫

在網頁中使用圖片時，同樣需要考慮美學和技術兩方面的問題。首先，圖片的色彩、形狀、風格等一定要與網頁的整體風格相適應，圖片所要傳達的理念或信息內容應當盡可能清晰、準確——這是美學方面的考量。其次，網頁設計師必須知道二值、灰度、256色及真彩色圖片之間的差異，懂得矢量圖片和點陣圖片各自的優缺點，并盡量優化圖片的比特大小以減少網頁的傳輸時間——這是技術方面的考量。只有在美學和技術兩方面都讓人滿意的圖片才有資格出現在網頁的整體設計中。

動畫元素通常可以很自然地成為網頁上最吸引人的視覺焦點，因為運動的東西總是比靜止的東西更容易抓住人們的眼球。也正是基于這樣的原因，我們需要用更為慎重的態度來決定在何時或何地使用動畫元素。我見過太多被動畫元素搞“砸”的網頁，那些網頁的設計師無一例外地犯了濫用動畫的錯誤。其實，要判斷一個動畫元素是否有存在的必要，大家可以使用下面這個簡單的法則：如果某個動畫元素只具有裝飾網頁的作用，而無法讓信息的展示更清晰或更生動，那么，你應該毫不猶豫地刪掉它。

網頁空間中的運動趨勢線

許多網頁的視覺空間中都隱藏了一條富有活力的運動趨勢線。當你觀察某個頁面時，如果你的直覺不斷告訴你，頁面中的某些設計元素（比如某些連接在一起的色塊，某些相互影響的圖片，特別是某些具有強烈暗示作用的線條）構成了一個隱約可見的、朝某個方向運動的元素集合，那么，你不妨直接用畫筆勾出一條能夠反映該元素集合運動趨勢的線條，就像畫家在做人體寫生時通常要先畫出一條反映人體運動趨勢的線條一樣——我們可以把這條線叫做網頁空間中的運動趨勢線。

從運動趨勢線的方向和形狀出發，我們可以很容易地找出每一個視覺元素與整體視覺空間的交互關系。一旦我們發現，某個視覺元素并沒有為運動趨勢線做出任何貢獻，反而有可能阻礙運動趨勢線的流暢延伸，那么，這個視覺元素多半就沒有任何存在的必要。

此外，在開始一個新的網頁設計前，如果設計師能根據靈感的暗示，在紙上首先畫出一條運動趨勢線，然后根據運動趨勢線的延伸規律設計所有視覺元素的形狀、色彩和位置，如此得到的網頁設計就更有可能表現出非同一般的視覺效果來。

使用Web標準設計網頁

很多網頁設計師只考慮網頁的視覺效果，卻從不關心網頁的具體實現技術。結果，現在的Web世界里有太多太多足夠漂亮但卻不符合技術標準的網頁，它們要么無法支持Firefox、Safari等非IE瀏覽器，要么不能在用戶改變缺省字體大小時保持原貌。更可怕的是，這些不符合技術標準的網頁內部多半是一堆充斥著<TABLE>、<FONT>標簽的“意大利面條”，沒有哪個瀏覽器會喜歡這些下載和顯示效率都異常低下的代碼，也沒有哪個程序員會愿意維護這些毫無頭緒可言的數字垃圾。

目前被業界普遍認可的客戶端網頁技術標準是XHTML＋CSS＋JavaScript。但即便是使用了這些標準的技術，我們也不能保證自己的設計一定會符合最好的設計習慣。有關利用Web標準進行設計，以及培養良好設計習慣的問題，建議大家參考電子工業出版社2004年5月出版的《網站重構——應用Web標準進行設計》一書。

另一方面，Web標準總是處于發展和更新之中。每個網頁設計師都應該定期關注W3C網站上的相關內容（盡管W3C的網站在視覺效果上糟糕得一塌糊涂）。

Flash和RIA技術

Flash的大名四海皆知，似乎沒有在這里刻意強調的必要。有關Flash我只想說兩點：其一，Flash動畫是手段而不是目的，如果單純為了炫耀而在網頁中不加限制地使用Flash動畫，以至于沖浪者一進網站就頭暈目眩，那可就得不償失了；其二，有許多網頁動畫效果既可以用CSS+JavaScript實現，也可以用Flash實現，二者各有利弊——網頁設計師在選擇時應多考慮效率、標準、易用性等與沖浪者關系最為密切的問題。

除了純客戶端的Flash應用之外，網頁設計師們也該對客戶端與服務端結合的RIA（Rich Internet Applications）技術給予足夠的關注。在Macromedia倡導的RIA架構中，網頁設計師可以和程序員一起利用Macromedia Flex編寫運行在Web服務器上、可以動態產生Flash應用的服務端代碼。與以往那些輸出HTML或XHTML的服務端代碼相比，RIA可以讓交互式的Web頁面（比如購物類網頁）像Flash動畫一樣動感、靚麗。

Blog和Wiki的啟示

Blog和Wiki是這幾年才流行開來的Web應用模式（千萬不要告訴我你不知道Blog和Wiki是什么）。盡管今天大多數Blog和Wiki站點在設計方面都沒有任何亮點可言，網頁設計師還是應該花些時間研究一下Blog和Wiki的應用理念。

我的意思是說，Blog和Wiki為網友們提供了兩種全新的展示自我價值、實現“人”、“網”互動的平臺。這兩種全新的信息發布與傳播模式其實也為新一代的網頁設計提出了嚴峻的挑戰。例如，設計師該如何組織一個可能有多人參與、可能隨時有信息變更的頁面，才能保證該頁面中每個視覺元素都完美、和諧？設計師該如何處理一個可以由用戶自行定義的頁面，才能保證該頁面的設計風格總是與站點的整體風格協調一致？更進一步地說，在一個賦予用戶最大自由的網頁中，設計師的職責是增加了還是減少了？像Blog和Wiki這樣的站點，它們一定無法在視覺效果上達到完美嗎？

選擇最適合自己的軟件工具

每個網頁設計師都有自己最得心應手的軟件工具。在選擇軟件工具這個方面，人云亦云的盲從態度是最不可取的。

我自己在設計網頁時用得最多的工具其實是UltraEdit（Windows環境）和BBEdit（Mac OS X環境），但我絕不會因此而否定FrontPage或Dreamweaver在可視化領域的巨大優勢；我最喜歡的圖形圖像工具是Photoshop、Painter與Illustrator的組合，但我從不認為使用Windows畫板來描繪點陣圖或使用PowerPoint來勾勒矢量圖就是水平低下的表現；在制作動畫時，Flash對我而言只是一個最后的合成工具，此前還會有Illustrator、Swift 3D等許多軟件發揮它們各自的價值——大家一定猜不到，我還經常在微軟的OneNote軟件中繪制Flash動畫的分鏡頭草稿呢；此外，懂得編程的網頁設計師還可以在開發工具和腳本語言的幫助下，讓設計過程更加輕松——不知道大家是否嘗試過，用JavaScript或AppleScript來操控Photoshop，就可以根據某個數據庫中預先存儲的數據批量生成網站中的所有按鈕圖片，這可是一種十分愜意的使用體驗啊！

認識和使用色環

色環就是將常用色彩按照某種規律排列成圓環之后的結果。千萬不要以為色環只有一種。例如，以計算機顯示器使用的紅、綠、藍三原色為基礎，經兩兩混合得到間色，再進一步得到下一級間色，最終得到的12色、24色或更多顏色的色環通常被稱為RGB色環或光源色色環；而從美術顏料中的紅、黃、藍三原色出發得到的色環也被稱為美術色環；還有一些設計師會根據自己的需要，僅僅用某個色調區域的色彩組合成專用的色環。

經常觀察和分析色環中隱藏的色彩規律是網頁設計師的必修課之一。在RGB色環中，我們可以很容易找到那些最適于在顯示器中表現的色彩。但RGB色環隱藏了較多暖色系的細節，我們最好用美術色環來探索顏色與顏色之間的相互關系。

在美術色環中，相距180°的兩種顏色是反差最強烈的補色，間距在60°以內的色彩是關系最為協調的近似色，兩兩相距60°的三種顏色則可以構成一個視覺效果非常強烈的色彩組合……如果我們自己創建出了一個由不同深淺的藍色組成的色環，那么，只要簡單地將色環中心區域填充為某種色彩，就能很快找到與該顏色最為相配的藍色了。

色彩的心理效應

每種色彩都會引起人們特定的心理感覺。我們常說的冷色和暖色就是心理感覺的體現。一些設計師喜歡為自己熟悉的每種色彩配上兩三個特定的形容詞，比如為深紫色配上“憂郁－陶醉－哀婉”，然后根據這些形容詞，將不同的色彩分門別類，以便在需要時選用。韓國I.R.I色彩研究所用類似的方法將標有形容詞的常用色彩及色彩組合置于“生硬－柔和/動態－靜態”的坐標系（印象空間）中，這樣，設計師只要在坐標系中圈出與網站主題吻合的印象區域，就可以很容易地找到自己需要的色彩組合了（參見電子工業出版社2002年9月出版的《Web Color Design——設計師談網頁配色》一書）。

色彩的心理效應不是固定不變的。特定色彩在與其他不同色彩搭配時，往往會表現出不同的心理效應。比如，當我們把紫色放在藍色和綠色中間時，紫色看起來是典型的暖色，而當我們把同樣的紫色放在紅色和橙色之間時，它看起來就是典型的冷色了。再比如，單獨看起來明亮、純凈的黃色一旦被置于淺棕色的背景中，似乎一下子就變得模糊和晦澀了。

不同的色彩模型

在電腦中，網頁設計師可以使用不同的色彩模型來表示特定的色彩。打開Photoshop軟件的調色板，我們可以看到最常用的四種色彩模型——RGB、CMYK、HSB和Lab。

RGB是設計師在網頁中指定色彩的基本模型。作為一名網頁設計師，我們應當對RGB色彩模型有足夠的了解，至少，我們應能快速說出大多數典型色彩的RGB近似值，或是在看到某一組RGB值后馬上知道那大致是一種什么樣的色彩。

CMYK是打印機等印刷設備使用的色彩模型。大多數網頁設計師無須考慮CMYK模型。但在設計那些專用于打印的彩色網頁時，我們就必須解決某種色彩轉換到CMYK模型后可能存在的失真問題，因為許多明亮的RGB色彩都無法準確映射到CMYK空間。使用Photoshop提供的“Proof Colors”功能可以看到色彩在打印輸出時的實際效果——如果某種色彩失真較大，那么最好提前換掉它。

HSB色彩模型可以反應出某種色彩的色調（Hue，也譯作“色相”，但中文Windows和Mac OS X系統的調色板均使用“色調”的譯法）、飽和度、亮度這三個基本屬性。HSB模型最接近人們對色彩的感知方式，因此，在選擇特定色彩或色彩組合的時候，我們可以先從HSB模型出發定位色彩，然后再將其轉換為網頁中使用的RGB值。

Lab模型是一種非常出色的技術模型，非常適于精確地表達、存儲、壓縮或轉換色彩信息。盡管也可以用較直觀的方式理解Lab模型，但目前使用Lab模型尋找或定位特定色彩的設計師還寥寥無幾。

色調變化

在色調（Hue，也譯作“色相”）的基礎上尋求變化是最常用的色彩搭配方式之一。

從RGB色環或美術色環出發，我們可以很容易地找到相距180°左右的補色組合以及相距60°以內的近似色組合。使用補色可以在網頁中制造出強烈的視覺對比效果，這適于表達那些鮮明、突出的主題；使用近似色則可以讓網頁的整體視覺效果更加和諧，這適于表現那些含蓄、內斂的主題。

還有一種值得注意的色調組合方式：選出一種特定色彩后，在色環上找到其補色所在的位置，然后從補色兩邊同時選出兩種或多種補色的近似色，并將它們與原色彩搭配起來。這樣的色彩組合一方面包含視覺上的對比因素，另一方面也包含統一、和諧的效果。如果變換每種色彩在網頁上的分布位置和分布面積，還可以得到許多意想不到的結果。

飽和度變化

飽和度是反應色彩純凈或灰濁程度的指標。將飽和度相近的色彩搭配在一起，可以在統一的視覺效果中引入節奏上的變化；將飽和度差異較大的色彩搭配在一起，可以讓飽和度高的色彩更加突出，也可以讓網頁中的視覺沖突更加明顯。

飽和度為0時，色彩就變成了白色、灰色或黑色。因此，有些設計師也把特定色彩與白色、灰色、黑色的搭配歸入到飽和度對比的范疇中。從這個意義上說，白色、灰色、黑色等中性色在突出其他色彩的“彩色屬性”方面有著非常重要的價值。

亮度變化

保持色調和飽和度一定的情況下，單純改變某種色彩的亮度，也可以得到許多漂亮的色彩組合。

在許多現代企業的網頁中，亮度不同的藍色既可以讓整個網頁保持統一的商務風格，也可以讓不同的網頁區域形成一定的對比和變化關系。有時候，前景信息和背景信息分別使用亮度不同的色彩（比如暗綠色背景上的淺綠色文字）也會收到奇效——這些網頁看上去似乎沉浸在某種獨特而強烈的感情色彩中；同時，前景顏色和背景顏色既保持了一定的相似性，又存在較明顯的對比關系，不會妨礙我們閱讀文字信息。

Web安全色和其他調色板

選擇顏色時，可以直接利用一些現成的調色版。

網頁設計師比較熟悉的216種網頁安全顏色在前幾年一度成了配色領域里的首選調色板。據說這216種安全顏色在所有操作系統和所有顯示設備上的顯示效果都完全一致——這種說法當然不夠準確，這216種色彩只是相對而言不那么容易受到設備影響罷了。今天，在絕大多數顯卡和顯示器都已經使用24位真彩色的情況下，216種安全顏色的重要程度已經大不如前。但是，如果設計師希望網頁能在PC以外的設備（如PDA和手機）上保持足夠出色的顯示品質，我們還是應該堅持從這216種顏色組成的調色板中尋找配色方案。

在Photoshop或Illustrator軟件的“Swatches”窗格中，我們還可以載入許多經典的調色板。比如，PANTONE系列的調色板就非常受設計師們的歡迎。直接從這些經典的調色板中選取顏色可以省去尋找或嘗試色彩組合時的許多麻煩。

使用配色工具

網頁設計師應善于利用軟件工具幫助自己選擇色彩和色彩組合。比如，我自己就經常在Illustrator中用矩形拼湊出基本的網頁布局，然后不斷改變每個矩形的填充色，以尋找最佳的配色方案。

有一些非常專業的配色軟件可以幫我們解決很多問題，比如ColorImpact軟件可以讓我們在RGB色環或美術色環中自由選取特定的色彩，可以根據我們選擇的主色調和配色思路（比如以補色為主或以近似色為主）自動給出示例網頁的顯示效果，還可以讓我們在屏幕范圍內自由點選顏色并完成RGB、HSB等色彩模型間的轉換。另一種名為ColorWheel Pro的小軟件在網頁配色模擬方面的功能比ColorImpact還要強大一些。

網頁設計中的人機界面問題

很多網頁設計師只注重布局、文字、色彩等基本設計要素，而從不考慮自己設計的網頁是否能給用戶帶來最舒適的使用體驗。結果，有許多看上去絢麗無比的頁面使用起來卻極為繁瑣：為了填寫一個簡單的表格，用戶可能要用鼠標點上好幾十次；為了通過一個最基本的身份認證，用戶可能要在兩三個頁面之間跳來跳去；為了進入最有價值的下載頁面，用戶可能要坐等屏幕上的Flash短片嘰嘰喳喳地唱上好幾分鐘……

這些問題其實都與人機界面的設計相關。

人機界面設計是一門相當深奧的學問。限于篇幅，我在這里不可能展開討論視覺隱喻、最短交互路徑、信息傳遞效率、典型操作模式等細節問題。我只是想提醒大家，一名合格的網頁設計師同時也應該是一名合格的人機界面設計師，因為無論從哪個意義上來說，Web頁面都是一種最典型也最流行的人機交互平臺，而網頁設計在本質上就是一種以Web為載體的人機界面設計。