本文章是由機器翻譯。

展現可用性

不只外在美

Dr. Charlie Kreitzberg 和 Ambrose Little

Dr。Charles B。 Kreitzberg

Ambrose Little

樣式銷售。’s 為 true 有關軟體有關其他產品所顯示的原狀。超炫的視覺化設計可以吸引買主，並建議一個產品已經很酷、 well 擬出且有效。當然漂亮的封裝 doesn’t 作為 well-worn proverbs 像 「 美麗是唯一的面板深 」，「 don’t，由其封面來判斷一本書 」 提醒我們保證之內容的品質。

但視覺化設計重要。雖然超炫的視覺化設計沒有替代的品質建構它 ’s 若要關閉視覺化設計為只行銷 fluff 發生錯誤。最低限度它應該是專業且美觀。如果您製造產品為客戶或公眾，您可能要考慮僱用來開發特殊的外觀和感覺的視覺化設計工具。而如果您的產品套件通用的外觀及操作是重要。

視覺化設計會超過裝飾，而會擁有使用者 ’s 經驗很強的影響。若要專注於某些區域為：

• 外觀和感覺  
• 可否讀取
• 探索的 affordances
• 支援的通訊
• 表情和信任

外觀和感覺

外觀及操作是產品的用來描述您整體的印象 (個性) 一詞。’s 不特別定義完善的詞彙，但它不會提醒我們視覺化設計大幅提供給產品 ’s 字元。

詞彙 看起來 通常包含色彩、 字型、 圖形、 標誌及商標。覺得 是稍微 amorphous，並嘗試佔領使用者 ’s 經驗中互動與產品品質。感覺就會建立透過互動的視覺化設計和其他設計的項目 (例如資訊架構。感覺受到元素 (如動畫、 轉換及用於介面的語言。感覺通常是使用形容詞和象徵物說明:正式、 隨意、 友善、 vibrant、 積極、 laid 後。雖然 ’s 可能會分別討論外觀和感覺的實際上他們應該形成連貫的整體。

若要協助您思考外觀和感覺，您可以造訪 的 CSS Zen 花園。由 Dave Shea 溫哥華，從 Web 設計工具建立 CSS Zen 花園是共同作業工作視覺化設計工具開發標準的 HTML 站台的外觀和感覺的地方。規則就是他們可以修改 CSS 樣式表和新增圖形但不是可能進行變更 HTML 或內容。所以在該意義的 「 感覺某些設定 — 您 can’t 變更字句的語言，但您可以變更視覺化的語言。

要在站台時可以翻轉之間所設計。它們是所有相當不錯，但非常不同，在 [外觀和感覺。當您從設計切換到設計要很好的了解它多少差異的方式會讓視覺化設計。

您一定會偏好 CSS Zen 處理序區中的某些設計給其他人。選擇外觀和感覺是一種愛好和合適性產品的目的。如同其他方面的使用者經驗它 ’s 愛好和期望您應該試著符合您的觀眾。

您可以決定是否設計人員提供 CSS Zen 花園的某些已更著重在其自我運算式 — 美工圖案 — 比網站 ’s 內容有關資訊。這是真正的問題。許多視覺化設計工具所因此著重其他們都在提升可讀性、 訊息、 affordances 或品牌，較不成功的美工圖案也就是很重要。take-away 是不是每個良好的演出者是很好的視覺化設計工具的軟體。

您可能感興趣簡報視覺化架構模式中 ( Quince UX 圖樣總管 。那里您可以學習如何視覺化設計可以用來建立架構或 「 視覺化設計語言 」 可用於整個方案 (及超過它到其他資產)，如此有一致和適當設計架構。

可否讀取

可讀性強並受到視覺化設計。可讀性，廣泛，就是使用者 ’s 能力理解和處理內容。我們大多是注重文字，可讀性，但您應該考慮所有類型的您支援的內容。說到可讀性，視覺設計手動在手動適用於產品 ’s 資訊架構。您應該還記得資訊架構有關的資訊視覺化階層中的語意上組織方式。視覺化設計工具將會決定如何呈現各種類型的資訊。

(不小心) 示範可讀性的問題的幾個網站是 先生瓶子 ， Bella DeSotoHavenWorks 。這些網站是從 那 Suck 網頁 ，其中永遠 isn’t 可靠的來源，但檢視站台，有些人認為有問題的方式。當您查看這些網站，請考慮什麼建立可讀性問題及如何可能解決它們。

有趣的可讀性工具，請參閱 的 可讀性。這個工具可讓您探索不同字型的大小和資料行的寬度，並透過一個 bookmarklet 將您想要的外觀套用至任意 Web 網頁。

字型和印刷樣式可有產品 ’s 外觀和感覺很強大的影響。我們通常傾向於將視為靜態和 utilitarian 字型，但他們可以執行感情影響許多。它 ’s 值得造訪 webdesigner 軍火庫 ，您將在其中找到的視訊與用來傳達強大的郵件的印刷樣式的 18 範例。雖然您可能沒有使用這類的影片印刷樣式的許多機會，您將會得到某種意義來說，它可以是如何強大工具。

類型大小是一種可讀性中更重要的因素。通常開發人員 (設計工具) 年輕和 don’t 思考事實較舊的使用者擁有較不嚴重的願景。結果太小的字型大小是公用的。選擇較小的字型大小可以是沒問題，只要設計支援放大透過瀏覽器 (假設，’s 可用) 或透過許多新聞和其他資訊的網站上看到的一樣，是更直接的選項。

字型與背景之間對比也是可讀性的非常重要元素。沒有為一般文字使用灰色，而不是黑色的型別某些設計人員之間的趨勢。它看起來優雅，但可能會難以閱讀。的圖 1 中比較具有黑色版本 (10pt # 000000) 灰色的文字 (10pt #AAAAAA)。使用夫人可以有效少量您想要降低文字。在這種方法中使用，夫人可以協助 unclutter 頁面。但使用夫人的主要內容讓內容難以閱讀。

圖 1 文字色彩] 和 [背景對比

的 圖 1，我們正在使用的可能知道會使用視覺化設計工具，而不使用實際內容探索印刷格式和版面配置的 「 lorem ipsum 」 文字。它 ’s 有時容易檢閱程序，如鼓勵視覺外觀，而不是特定的內容上註解的人，一個有用的工具。您將在 Lorem Ipsum 找到有用 lorem ipsum 產生器。雖然在設計階段，lorem ipsum 可能很有用的閱讀版面配置區文字 isn’t 讀取有意義的文字相同。基於這個原因如果您存取內容您應該試一試之前完成視覺化設計。

’s 可能在 HTML 中，建立一些真正恐怖的文字/背景色彩，而且會有真正不良設計在 Web 上的範例。W3C 有 建議演算法 來判斷是否兩個色彩有足夠的對比合作愉快。

我們建立兩個範例在 的 圖 1 中，以及可怕的範例中使用不錯小開放原始碼工具稱為 設計工具 Plaything圖 2 。

圖 2 的 劣對比損害賠償責任可讀性

您應該考慮其他可讀性因素包括：

• 放置在行間多少空間。太少的空間建立出擁擠的外觀時太多的空間將會摧毀段落 cohesiveness。在 1.5 間距可能開始的好方法。
• 多久使各行。非常長行難以掃描。如果您使用的液體的版面配置可能很長，有些監視器在各行，您可能要考慮限制線條長度不超過 80 到 100 個字元所使用的字型大小而定。在許多情況下較短的線條寬度會更好並 (如有長瞭解報紙) 多個資料行的設計可以真的增強可讀性有很多的文字時。

有用的印刷樣式資源是 eBook、" 的印刷樣式的樣式套用至 Web 的項目 "。

探索的 Affordances

您應該考慮在視覺化設計中第三個區域，這樣很容易就能讓使用者可用來探索 affordances。affordances 提示，可讓您知道您可以做一件事就像在 [連結加底線的東西，讓使用者知道文字是可點選，或按鈕的外觀凸起，如同按它。

在一般設計良好的 UI 物件應該在它的運作方式明顯。3D 與用來建立假象陰影可以有效地在指示使用者可以按下物件的原因是深度的它們運用從真實世界的比喻。回收，在十月的專欄 (」 快速內部您使用者 ’ 噴頭 的 」)，我們談關於心理模型。這是範例。使用者瞭解如何按下按鈕在現實世界裡，讓他們傳送該瞭解到設計良好的一個按鈕圖形表示。

透過螢幕項目，是可點選用手狀游標是探索的 affordance 的另一種方式。使用良好它可以協助 unclutter 一個畫面，但使用才會在滑鼠暫留時明顯的 affordances 可以建立使用性問題。它可以是個好主意，讓人四處移動滑鼠來探索它們可以用的介面做什麼特別是如果 ’s 一個主要的動作。

您使用的控制項大部份，您 don’t 需要太擔心 affordances 的 presented–a 捲軸是通常很清楚，因為它，例如 ’s 一個既定的慣例的方式。但如果您建立圖形化的作用區，來控制瀏覽或其他動作，’s 很重要的使用者知道要按哪裡。如果使用者 aren’t 熟悉 (有一次 ’s 該心理模型) 某些控制項，您必須設計中非常清楚它們的運作方式。最近使用性測試中我們找到很多的使用者 didn’t 了解如何使用 accordion 控制項。重新設計控制項解決問題。

在短視覺化設計應該通訊使用者可以互動的項目。設計應該能夠明顯何種動作可能發生，而且結果會是。

支援的通訊

許多視覺化設計工具方法藉由定義是視覺化語言的產品設計。是視覺化語言是一組的協助以溝通意見的設計原則。有幾個層面，若要建立視覺化的語言。

洞察力和關聯

是視覺化語言的一個項目會善用認知。視覺化處理 isn’t 被動 — 只要觀察您的眼睛的前面物件 — 但現用的處理序，涉及選擇性和審判。我們將討論一些十月資料行中的這些問題。認知是在特殊專長稱為 Gestalt 心理學 ，’s 值得進一步熟悉 perceptual 原則如結案、 相似度、 註解的接續、 鄰近的以及圖及地面的某些研究 — 請參閱 的 「 Gestalt 原則。

是視覺化語言的其他項目會被建置上常見的心理關聯，如使用自然感覺曲線以建議性質、 使用硬式角度] 和 [行建議機器、 使用故意 disjointedness 建立有意義的騷動，及使用對稱性建立有意義的餘額和 harmony。

可以運用其他關聯包含與在使用紅色的錯誤/停止] 和 [確定/移的綠色等等的文化特性 conditioned 的元素。不過，留意這種關聯可能會有不同 cross-cultural 或內容的項目。比方說紅色具有正面關聯在中國和汽車或身衣著，內容中紅色建議性感。

給定的方式常見紅色/綠色 = 問題/確定連線是 ’s 是令人意外通用於尋找非直覺的方式，可用的色彩。比方說，我們遇到 論壇程式中的 圖 3 訊息。我們刻意做文字有，讓您可以取得初始的印象根據使用的色彩。

圖 3 紅色表示有問題

雖然色彩使用建議的問題， 的 圖 4 顯示它實際上所說。

圖 4 的色彩與的郵件] 衝突

附註在標題中是的淺色文字比它也標籤。藉由變更的訊息方塊，並在頁首色彩修訂訊息可產生更清楚地通訊， Figure5 所示。

圖 5 綠色建議誤判的郵件

變更色彩為綠色是較佳的視覺設計為此目的和內容。

資訊結構

視覺化設計也可用來強化資訊架構尤其是視覺化的階層架構。例如，我們幾乎都變成標題大 bolder 比它們加上標籤的內容。然後我們建立的標題階層來協助釐清內容的結構。文字中我們使用這類技術為 粗體 、 底線italicizing ，對進行人質和較小強調或降低元素並提示關於其角色讀取器。

色彩是盡量不要使用時，特別是可以運用很好的效果的另一個區域。quince 有 限制到只是兩個或的話色調調色盤，並改變濃度 (飽和度) 和增援視覺化溝通這些色彩的亮度，處理的 一些色調圖樣 。色彩也可用來很好的效果如果介面已經 isn’t 飽和以真的繪製出與動作的呼叫等等的重要元素的色彩。

色彩可以也用來將更重要的項目拉到前景，藉由只 de-emphasizing 較不重要的項目。這是一種情況，其中使用，例如的灰色文字可以發送到背景較不重要的東西而帶來什麼左前方和中央。

圖 6 的 Visual 設計支援資訊架構

情緒和信任

視覺化設計會影響表情，並會影響應用程式或網站的可信度，使用者便會產生信任 (或 mistrust) 的意義。例如，考慮兩個站台 圖 7 和 圖 8 ，每個都有相同的內容，但不同視覺設計中。

圖 7 您信任此廠商嗎吗？

您購買從一個看起來會像這樣的地方電視嗎吗？  您 innately 信任它嗎?  大多數的我們已經有什麼似乎是線上，shady 公司，我們不 inclined 信任這些。這個替代的設計，請考慮：

圖 8 相同的內容、 不同設計 Engenders 其他信任

此設計是更專業、 可靠、 可信度而可靠。您是很多、 更比較容易交出您的信用卡發卡資訊到站台就像這樣。而且在實際上有已經成這方面的視覺化設計由 的 Stanford Web 可信度研究專案 的特定研究。我們建議您閱讀並遵循其方針。Don 諾曼具有這個區域稱為 進一步探討 aesthetics 上產品接受度的影響的 感情設計 撰寫一本書。

顯著的影響

視覺化設計是深遠超過面板。外觀和感覺、 可讀性和明確性各種控制項可以讓極大的差異在產品 ’s 可用性和使用者經驗 ； 不 ’s 只是眼睛糖果或個人的喜好。

良好的視覺設計可協助識別螢幕中哪個元件是 affordances，因此它直接影響輕鬆地與產品互動的使用者。視覺化設計也支援資訊架構讓使用者處理所傳達的資訊更容易。視覺化設計可以 evoke 使用者同時透過相片和插圖，並更些微透過整體的外觀和感覺的表情。除了表情，視覺設計可以幫助建立 (或損毀) 有意義的信任。在短時有些開發人員關閉視覺化設計為不重要，眼睛糖果或 lipstick，它可以具有顯著影響。

因為它 ’s 如此強大工具，’s 思考視覺化設計和教育本身其更功能方面，如我們在這裡初步的開發人員很重要。只有少數的我們有技術，以建立高品質視覺化設計，而且 ’s 通常將在 「 專業人員的最佳方法。但是否自行或與其他人的工作，您可以進行視覺化設計，’s 一定要瞭解這些基本概念。很好的入門是俊白色 ’s [元素的圖形設計:空間、 Unity、 頁面架構及類型 (Allworth 按，2002年)，金鑰的原則會配置的內建約七個設計元件。

除了讀取有關設計，看在許多已建立良好的設計 (請嘗試搜尋獲獎網站) 的範例，以及設計您回來想法是很好。分析他們找出所設計為何良好。如果您發現較不具競爭力的設計，考慮一下應該獲得改善的原因和方式。更多的曝光度獲得良好的設計，越您將無法辨識它，甚至做更好自己。您可能永遠不會變成專業視覺化設計工具但是您會更好使用它們。而且免不了，當您自行進行工作時，您將會執行較佳的工作。

視覺化設計真的可以協助您藉由建立卓越給使用者和共同工作人員最可見的項目中會產生很棒的產品。

Dr。Charles Kreitzberg 是執行長的 Cognetics Corp.，它提供了可用性諮詢和使用者經驗設計服務。他的熱情就建立交戰和 delight 使用者同時支援產品 ’s 業務目標的直覺化介面。查爾斯居住在中央的新增運動衫他 moonlights 作為執行音樂家。

Ambrose Little* 居住與他的妻子和四個的子系，在中央新增運動衫。他是被設計和開發 10 年以上的軟體是締結 INETA 演講者及 Microsoft MVP。最近，他的移位從技術設計人員的設計，現在是 Infragistics 使用者經驗設計工具。*