連結

注意

此設計指南是針對 Windows 7 所建立,尚未針對較新版本的 Windows 進行更新。 大部分的指導方針仍以原則方式套用,但簡報和範例不會反映 我們目前的設計指導方針

透過 連結,使用者可以流覽至另一個頁面、視窗或 [說明] 主題;顯示定義;起始命令;或選擇選項。 連結是文字或圖形,表示可以按一下它,通常是使用流覽或未檢視 的連結系統色彩來顯示。 傳統上,連結也會加上底線,但這種方法通常不必要,而且不偏好減少視覺雜亂。

當使用者將滑鼠停留在連結上方時,如果連結文字尚未) ,連結文字會顯示為底線 (,而指標圖形會變更為 部。

文字連結是最輕量可點選的控制項,通常用來減少設計的視覺複雜度。

注意

與命令連結版面配置相關的指導方針會顯示在不同的文章中。

這是正確的控制項嗎?

若要決定使用時機,請考量下列問題:

  • 這是用來巡覽至另一個頁面、視窗或說明主題的連結;顯示定義;起始命令;還是選擇選項? 如果不是,請使用其他控制項。
  • 命令按鈕是否為較佳的選擇? 如果使用 下列命令按鈕,請使用命令按鈕
    • 控制項會起始立即動作,包括顯示視窗,以及該命令與視窗的主要用途有關。
    • 即使針對次要命令,也會顯示一個視窗來收集輸入或做出選擇。
    • 標籤簡短,由四個或更少單字組成,因此避免長按鈕的不動外觀。
    • 命令不是內嵌的。
    • 控制項會出現在其他相關命令按鈕的群組內。
    • 動作是破壞性或無法復原的。 因為使用者將連結與導覽 (關聯,而且能夠備份) ,所以連結不適用於具有重大結果的命令。
    • 同樣地,在 精靈工作流程中,命令代表承諾用量。 在這類視窗中,命令按鈕會建議承諾用量,而連結則建議流覽至下一個步驟。

設計概念

讓連結成為可辨識

連結 缺乏能供性,這表示 其視覺屬性不會建議其使用方式 ,而且只會透過體驗瞭解它們。 沒有底線的連結和連結系統色彩會顯示為一般文字;確定其行為的唯一方法是從其簡報、內容,或將指標放在其上方。

意外地,這種缺乏能供性通常是使用連結的動機,因為它們看起來很輕量,因而減少設計的視覺複雜度。 連結會消除 命令按鈕 所使用的視覺繁重框架,以及其他控制項所使用的框線。 例如,雖然您可以使用命令按鈕讓主要命令變得明顯,但您可以選擇次要命令的連結來取消強調它們。

接著,挑戰是保留足夠的視覺線索,讓使用者能夠辨識連結。 基本指導方針是 使用者必須單獨透過視覺檢查辨識連結,他們不應該將滑鼠停留在物件上,或按一下它來判斷它是否為連結

如果連結使用 連結系統色彩 和下列其中一個視覺線索,則使用者可以單獨透過視覺檢查來辨識連結:

  • 加上底線的文字。
  • 圖形或專案符號,例如 具有圖示連結 模式的文字。
  • 在標準導覽、選項或命令位置內放置,例如視窗 的內容區域 ,或在導覽列、功能表列、工具列或頁尾中。

使用者也可以使用下列視覺線索進行視覺檢查來辨識連結,但這些線索本身並不足以辨識:

  • 建議按一下的文字,例如命令式動詞開頭的命令動詞,例如顯示、列印、複製或刪除。
  • 放置於一般文字區塊內。

當然,使用者一律可以透過滑鼠暫留或按一下互動來判斷連結。 如果任何重大工作不需要探索連結,您可以取消強調這類連結。

黑色背景灰色標籤的螢幕擷取畫面

在此範例中,請連絡我們、使用規定、商標和隱私權聲明是連結。 它們刻意取消強調,因為不需要任何重要工作。 它們是唯一連結的線索是它們具有滑鼠指標暫留,而且位於視窗底部的標準流覽區域。

建立特定、相關且可預測的連結

連結文字應該表示按一下連結的結果。

特定連結比一般連結更吸引使用者,因此 請使用連結標籤來提供按一下連結結果的特定描述性資訊。 不過,請確定您的連結文字並非如此特別,因此會誤導並不建議適當使用。

簡潔的連結比詳細資訊連結更容易閱讀。 消除不必要的文字和詳細資料。 連結標籤不一定是完整的。

若要評估您的連結文字:

  • 請確定連結文字反映連結支援的案例。
  • 請確定連結的結果可預測。 使用者不應該對結果感到意外。

如果您只執行兩件事...

  1. 單獨透過視覺檢查來探索連結。 使用者不應該與程式互動,才能尋找連結。

  2. 使用連結,提供按一下連結結果的特定描述性資訊,並視需要盡可能使用文字。 使用者應該能夠從連結文字和選擇性 資訊提示正確預測連結的結果。

使用模式

連結有數種功能模式:

使用狀況 範例
流覽連結
用來巡覽至另一個頁面或視窗的連結。
按一下連結會就地巡覽至另一個頁面,如瀏覽器視窗或精靈所示;或 顯示新的視窗。 相較于工作連結,流覽不會起始工作,而是直接巡覽至另一個位置,或繼續進行正在進行中的工作。 導覽表示安全性,因為使用者一律可以返回。
新聞標題
在此範例中,按一下連結會流覽至新聞封面頁面。
工作連結
用來起始新命令的連結。
按一下連結會立即執行命令,或顯示對話方塊或頁面以收集更多輸入。 相較于流覽連結,工作連結會起始新的工作,而不是繼續現有的工作。 工作不表示安全使用者無法使用 Back 命令還原為先前的狀態。 因此會呼叫工作連結,以防止與 命令連結混淆。
登入
在此範例中,按一下連結會起始登入命令。
說明連結
用來顯示說明主題的文字連結。
按一下連結會在個別視窗中顯示說明文章。
什麼是強式密碼?
在此範例中,按一下連結會顯示具有指定主題的 [說明] 視窗。
定義連結
當使用者按一下或將滑鼠停留在連結上方時,用來在資訊提示中顯示定義的文字連結。
此模式很適合用來定義使用者可能不知道的字詞,而不需要新增螢幕雜亂。
滑鼠暫留所顯示之資訊提示的螢幕擷取畫面
在此範例中,會顯示資訊提示定義。
功能表連結
一組用來建立功能表的工作連結。
因為功能表的內容指出一組連結,所以文字通常不會加上底線 (,但暫留) ,而且可能不會使用連結系統色彩。
一組連結的螢幕擷取畫面
在此範例中,一組連結會建立功能表。
選項連結
選取的選項或其預留位置,其中按一下連結會叫用命令來變更該選項。
不同于一般文字連結,連結會變更其文字以反映目前選取的選項,而且一律會使用未檢視的連結色彩繪製。
Outlook 規則精靈中規則的螢幕擷取畫面
左側範例顯示來自 microsoft outlook 規則精靈的規則,其中包含預留位置選項。 當使用者按一下連結並選取一些選項之後,右側範例會更新連結文字以顯示結果。
如果選項具有可變格式,則 using 選項連結特別適合。
規則精靈中已修改之規則的螢幕擷取畫面
右側的範例顯示 outlook 規則具有可變格式。
文字如何變更為下拉式清單的螢幕擷取畫面
左側的範例會顯示選項連結。 選取時,它會變成下拉式清單,如右側所示。

連結也有數種簡報模式:

使用狀況 範例
純文字連結
只包含文字。
此簡報是最有彈性的,因為它可以在任何地方使用,包括 內嵌
藍色連結文字的螢幕擷取畫面
在此範例中,文字色彩會清楚識別內嵌連結。
具有圖示連結的文字
具有上述圖示的文字,表示其函式。
因為圖形提供連結的額外視覺指示,所以比未加上底線的純文字連結更容易辨識為連結。 此模式通常會使用 16x16 圖元圖示。
包含圖示之四個連結清單的螢幕擷取畫面
在此範例中,圖示會提供連結的其他視覺指示。
使用小型三角形播放命令的螢幕擷取畫面
在此範例中,標準三角形播放符號表示此文字是命令。
僅限圖形連結
只包含圖形。
假設缺少文字連結,則沒有連結色彩或底線可指出連結。 這些連結取決於要建議按一下的圖形設計,或使用者按一下時建議動作之圖形內的文字。 僅限圖形連結有時會有滑鼠停留在效果上,以指出連結。 此方法有助於,但無法單獨透過視覺檢查來探索。
具有連結選取滑鼠指標的圖示螢幕擷取畫面
在此範例中,無法單獨透過視覺檢查來探索連結。
由於潛在的辨識和當地語系化問題,不建議使用僅限圖形的連結作為執行工作的唯一方式。

指導方針

互動

  • 如果按一下連結的結果不是立即顯示忙碌指標。 如果沒有意見反應,使用者可能會假設按一下未發生,然後再按一次。

色彩

  • 針對已流覽和未流覽的連結使用主題或連結系統色彩。 這些色彩的意義在所有程式中都是一致的。 如果基於任何原因,使用者不喜歡這些色彩 (可能因為協助工具原因而) ,他們可以自行變更。

  • 針對流覽連結,請針對流覽和未流覽的連結使用不同的色彩。 只保留程式實例持續時間內所流覽連結的歷程記錄。 造訪的色彩很重要,指出使用者已經在哪裡,防止他們意外地重複重新流覽相同的頁面。

  • 針對其他類型的連結,請勿使用流覽的連結色彩。 例如,識別「造訪」命令中沒有足夠的值。

  • 請勿為不是連結的文字色彩,因為使用者可能會假設它是連結。 使用粗體或灰色的陰影,否則會使用彩色文字。

  • 例外狀況:如果所有連結都加上底線或放在標準導覽或命令位置內,您可以使用彩色文字。

    不正確:

    含藍色文字的電源計劃訊息螢幕擷取畫面

    在此範例中,藍色文字不正確地用於不是連結的文字。

  • 使用與連結色彩對比的背景色彩。 視窗系統色彩一律是不錯的選擇。

    不正確:

    藍色背景藍色連結文字的螢幕擷取畫面

    在此範例中,背景色彩與連結色彩的對比不佳。

強調

  • 對於執行主要工作所需的連結,請提供視覺線索,讓使用者可以單獨透過視覺檢查辨識連結。 這些線索包括底線、圖形或專案符號,以及標準連結位置。 使用者不應該將滑鼠停留在物件上,或嘗試按一下該物件來判斷它是否為連結。 如果連結從其內容中不明顯,請使用加底線文字。
  • 請勿將不是連結的文字加上底線,因為使用者可能會假設它是連結。 使用斜體,否則使用加底線文字。 僅保留連結的底線。
  • 列印時,請勿列印底線或連結色彩。 列印的連結沒有值,而且可能會造成混淆。
  • 僅針對命令連結使用箭頭圖示。 一般連結不應該使用箭號圖示,除非它們用來取代 Windows XP 中的 命令連結
  • 將圖示放在文字左側。 圖示必須以視覺化方式導向文字。

正確:

文字前面的圖示螢幕擷取畫面

不正確:

文字後面的圖示螢幕擷取畫面

在不正確的範例中,圖示不會導向文字。

  • 按一下圖示的結果與按一下文字的結果相同。 否則會非預期且令人困惑。
  • 請勿使用僅限圖形的連結。 使用者很難將它們辨識為連結,以及圖形內的任何文字, (用來指出按一下) 建立當地語系化問題時的動作。
  • 請確定導覽連結不需要承諾。 使用者應該一律能夠返回初始狀態,方法是使用 [上一頁] 流覽或 [取消] 關閉新的視窗。

  • 連結到特定內容,而不是一般內容。 例如,最好連結至檔的相關區段,而不是連結至開頭。

  • 只有在連結的內容相關、實用且不備援時,才使用連結。 在導覽連結中使用條件,不只因為您可以這麼做。

  • 如果連結流覽至外部網站,請將 URL 放在資訊提示中, 讓使用者可以判斷連結的目標。

  • 僅連結第一個出現的連結文字。 多餘的連結是不必要的,而且可能會讓文字難以閱讀。

    正確:

    [圖片] 資料夾可讓您輕鬆共用您的圖片。 您可以使用圖片中的工作,在電子郵件中傳送圖片,或在網路上的安全私人位置發佈圖片。 您也可以直接從 [圖片] 資料夾列印圖片。

    不正確:

    [圖片] 資料夾可讓您輕鬆共用圖片。 您可以使用 [圖片] 中的工作,在電子郵件中傳送圖片,或在網路上的安全私人位置發佈圖片。 您也可以直接從 [圖片] 資料夾列印圖片。

    在正確的範例中,只有第一次出現的相關文字會連結。

    例外狀況:

    • 如果指令有連結,請將連結放在指令中。

      使用強式密碼非常重要。 如需詳細資訊,請參閱<增強式密碼>。

      在此範例中,連結位於 指令中,而不是第一次出現。

    • 如果之後的出現次數與第一個專案相距遠,則連結至後續專案。 例如,您可以在 [說明] 主題內的不同區段中重複連結。

  • 針對非破壞性或容易反轉的命令使用工作連結。 由於使用者會將連結與導覽 (建立關聯,且能夠備份) ,因此連結不適用於具有重大結果的命令。 顯示對話方塊或確認的命令是不錯的選擇。

    正確:

    開始

    Stop

    不正確:

    刪除檔案

    在不正確的範例中,命令是破壞性的。

  • 將相關的導覽和工作連結分組到功能表中。 放置於標準導覽或命令位置中相關連結的功能表,可讓您比個別放置連結更容易尋找和瞭解連結。

  • 針對選取相依功能表,請移除不適用的功能表連結。 請勿停用它們。 這麼做可消除雜亂,使用者不會錯過需要選取的連結。

  • 對於與選取範圍無關的功能表,請停用不適用的功能表連結。 請勿將其移除。 這麼做可讓功能表更穩定,且這類連結更容易找到。

    具有暗灰色功能表命令對話方塊的螢幕擷取畫面

    在此範例中,Windows Update正在執行更新,因此會停用檢查更新命令,而不是移除更新。

  • 如果連結需要進一步說明,請在個別的文字控制項或資訊提示中提供補充說明,但不要同時提供這兩者的說明。 使用完整的句子和結尾標點符號。 如果文字相同,則不需要提供這兩者,如果文字不同,則會造成混淆。

    包含補充文字的連結螢幕擷取畫面

    在此範例中,補充說明會提供連結的進一步資訊。

    包含資訊提示的連結螢幕擷取畫面

    在此範例中,資訊提示會提供進一步的資訊。

  • 請勿提供只是重新整理連結文字的資訊提示。

    不正確:

    含有備援資訊提示的連結螢幕擷取畫面

    在此範例中,資訊提示會藉由使用者重複的風險而令人不動。

Text

  • 請勿指派 存取金鑰。 您可以使用 Tab 鍵來存取連結。

  • 使用連結,提供按一下連結結果的特定描述性資訊,並視需要使用太多文字。 連結文字應該會指出按一下連結的結果。 使用者應該能夠從連結文字和選擇性資訊提示正確預測連結的結果。

    不正確:

    安全性通知警告連結的螢幕擷取畫面

    在此範例中,即使連結看起來很重要,其標籤也太過一般。 使用者更可能按一下更明確的連結。

  • 針對內嵌連結:

    • 保留文字的大小寫和標點符號。

    • 除非文字是問題,否則請勿在連結中包含結束標點符號。

    • 在最相關的部分連結文字,然後選擇足以輕鬆按一下的連結文字。

      正確:

      移至新聞群組。

      不正確:

      移至新聞群組。

      在這些範例中,「Go」 不是文字最相關的部分,而且不夠大,無法制作良好的點擊目標,而 「newsgroup」 則是 。

    • 避免將兩個不同的內嵌連結放在彼此旁邊。 使用者可能認為它們是單一連結。

      不正確:

      如需詳細資訊,請參閱 UX 指導方針。

      在此範例中,「UX」 和 「guidelines」 是兩個不同的連結。

  • 若為獨立連結, (非內嵌連結) :

    • 使用 句子樣式大寫
    • 除非連結是問題,否則請勿使用結束標點符號。
    • 使用所有文字做為連結。
  • 使用清楚區別于畫面上其他連結的連結。 使用者應該能夠正確預測和區分連結目標。

    不正確:

    尋找防毒軟體

    取得防毒軟體

    正確:

    如何知道是否已安裝防毒軟體

    安裝防毒軟體

    在不正確的範例中,兩個連結之間的差異不清楚。

  • 請勿新增按一下或按一下這裡連結文字。 這不是必要的,因為連結表示按一下。 此外,按一下這裡並單獨傳達螢幕助讀程式讀取連結的相關資訊。

    不正確:

    按一下這裡以取得描述。

    正確:

    Description

    在不正確的範例中,「按一下這裡」不會說出,而且不會傳達連結的相關資訊。

流覽連結

  • 使用名詞啟動連結,並清楚描述按一下連結的位置。 請勿使用結束標點符號。 有時候,您可能需要使用動詞來開始流覽連結,但不要使用已由連結事實所隱含的動詞命令,例如檢視、開啟或移至。

  • 如果流覽至網頁,且您預期目標使用者重新叫用 URL,並將其輸入至瀏覽器,請將流覽連結呈現為 URL。 可能的話,請將這類 URL 設計成簡短且容易記住。

  • 如果連結包含以 「www」 開頭的網站 URL,請省略 HTTPs:// 通訊協定名稱和使用小寫文字。

    不正確:

    https://www.microsoft.com

    www.microsoft.com

    正確:

    microsoft.com

    在不正確的範例中,「HTTPs://」和「www」不說出。

工作連結

  • 使用命令式動詞啟動連結,並清楚描述連結執行的工作。 請勿使用結束標點符號。

  • 如果命令需要其他資訊,請以省略號結束連結, (包括確認) 才能成功完成。 只有在需要其他資訊來執行工作時,才顯示另一個視窗時,請勿使用省略號。

    列印...

    在此範例中,列印...命令連結會顯示 [列印] 對話方塊,以收集詳細資訊。

    列印

    相反地,在此範例中,Print 命令連結會將檔的單一複本列印到預設印表機,而不需要任何進一步的使用者互動。

    正確使用省略號很重要,表示使用者可以在執行工作之前做出進一步的選擇,或完全取消工作。 省略號所提供的視覺提示可讓使用者不需擔心即可探索您的軟體。

  • 如有必要,請使用 「now」 結束工作連結,以區別它與導覽連結。

    下載檔案

    立即下載檔案

    在此範例中,「下載檔案」會流覽至下載檔案的頁面,而「立即下載檔案」實際上會執行 命令。

說明連結

如需指導方針和範例,請參閱 說明

連結資訊提示

  • 使用完整句子和結尾標點符號。

如需更多指導方針和範例,請參閱 工具提示和資訊提示

文件

參考連結時:

  • 使用確切的連結文字,包括其大小寫,但不包含省略號。
  • 若要描述使用者互動,請使用 click。
  • 可能的話,請使用粗體文字格式化連結文字。 否則,只有在需要以避免混淆時,才將連結文字放在引號中。

範例:若要啟動掃描,請按一下 [掃描電腦]。