連結
注意
此設計指南是針對 Windows 7 所建立,尚未針對較新版本的 Windows 進行更新。 大部分的指導方針仍以原則方式套用,但簡報和範例不會反映 我們目前的設計指導方針。
透過 連結,使用者可以流覽至另一個頁面、視窗或 [說明] 主題;顯示定義;起始命令;或選擇選項。 連結是文字或圖形,表示可以按一下它,通常是使用流覽或未檢視 的連結系統色彩來顯示。 傳統上,連結也會加上底線,但這種方法通常不必要,而且不偏好減少視覺雜亂。
當使用者將滑鼠停留在連結上方時,如果連結文字尚未) ,連結文字會顯示為底線 (,而指標圖形會變更為 手部。
文字連結是最輕量可點選的控制項,通常用來減少設計的視覺複雜度。
這是正確的控制項嗎?
若要決定使用時機,請考量下列問題:
- 這是用來巡覽至另一個頁面、視窗或說明主題的連結;顯示定義;起始命令;還是選擇選項? 如果不是,請使用其他控制項。
- 命令按鈕是否為較佳的選擇? 如果使用 下列命令按鈕,請使用命令按鈕 :
設計概念
讓連結成為可辨識
連結 缺乏能供性,這表示 其視覺屬性不會建議其使用方式 ,而且只會透過體驗瞭解它們。 沒有底線的連結和連結系統色彩會顯示為一般文字;確定其行為的唯一方法是從其簡報、內容,或將指標放在其上方。
意外地,這種缺乏能供性通常是使用連結的動機,因為它們看起來很輕量,因而減少設計的視覺複雜度。 連結會消除 命令按鈕 所使用的視覺繁重框架,以及其他控制項所使用的框線。 例如,雖然您可以使用命令按鈕讓主要命令變得明顯,但您可以選擇次要命令的連結來取消強調它們。
接著,挑戰是保留足夠的視覺線索,讓使用者能夠辨識連結。 基本指導方針是 使用者必須單獨透過視覺檢查辨識連結,他們不應該將滑鼠停留在物件上,或按一下它來判斷它是否為連結。
如果連結使用 連結系統色彩 和下列其中一個視覺線索,則使用者可以單獨透過視覺檢查來辨識連結:
使用者也可以使用下列視覺線索進行視覺檢查來辨識連結,但這些線索本身並不足以辨識:
- 建議按一下的文字,例如命令式動詞開頭的命令動詞,例如顯示、列印、複製或刪除。
- 放置於一般文字區塊內。
當然,使用者一律可以透過滑鼠暫留或按一下互動來判斷連結。 如果任何重大工作不需要探索連結,您可以取消強調這類連結。
在此範例中,請連絡我們、使用規定、商標和隱私權聲明是連結。 它們刻意取消強調,因為不需要任何重要工作。 它們是唯一連結的線索是它們具有滑鼠指標暫留,而且位於視窗底部的標準流覽區域。
建立特定、相關且可預測的連結
連結文字應該表示按一下連結的結果。
特定連結比一般連結更吸引使用者,因此 請使用連結標籤來提供按一下連結結果的特定描述性資訊。 不過,請確定您的連結文字並非如此特別,因此會誤導並不建議適當使用。
簡潔的連結比詳細資訊連結更容易閱讀。 消除不必要的文字和詳細資料。 連結標籤不一定是完整的。
若要評估您的連結文字:
- 請確定連結文字反映連結支援的案例。
- 請確定連結的結果可預測。 使用者不應該對結果感到意外。
如果您只執行兩件事...
單獨透過視覺檢查來探索連結。 使用者不應該與程式互動,才能尋找連結。
使用連結,提供按一下連結結果的特定描述性資訊,並視需要盡可能使用文字。 使用者應該能夠從連結文字和選擇性 資訊提示正確預測連結的結果。
使用模式
連結有數種功能模式:
使用狀況 | 範例 |
---|---|
流覽連結 用來巡覽至另一個頁面或視窗的連結。 |
按一下連結會就地巡覽至另一個頁面,如瀏覽器視窗或精靈所示;或 顯示新的視窗。 相較于工作連結,流覽不會起始工作,而是直接巡覽至另一個位置,或繼續進行正在進行中的工作。 導覽表示安全性,因為使用者一律可以返回。 新聞標題 在此範例中,按一下連結會流覽至新聞封面頁面。 |
工作連結 用來起始新命令的連結。 |
按一下連結會立即執行命令,或顯示對話方塊或頁面以收集更多輸入。 相較于流覽連結,工作連結會起始新的工作,而不是繼續現有的工作。 工作不表示安全使用者無法使用 Back 命令還原為先前的狀態。 因此會呼叫工作連結,以防止與 命令連結混淆。 登入 在此範例中,按一下連結會起始登入命令。 |
說明連結 用來顯示說明主題的文字連結。 |
按一下連結會在個別視窗中顯示說明文章。 什麼是強式密碼? 在此範例中,按一下連結會顯示具有指定主題的 [說明] 視窗。 |
定義連結 當使用者按一下或將滑鼠停留在連結上方時,用來在資訊提示中顯示定義的文字連結。 |
此模式很適合用來定義使用者可能不知道的字詞,而不需要新增螢幕雜亂。 在此範例中,會顯示資訊提示定義。 |
功能表連結 一組用來建立功能表的工作連結。 |
因為功能表的內容指出一組連結,所以文字通常不會加上底線 (,但暫留) ,而且可能不會使用連結系統色彩。 在此範例中,一組連結會建立功能表。 |
選項連結 選取的選項或其預留位置,其中按一下連結會叫用命令來變更該選項。 |
不同于一般文字連結,連結會變更其文字以反映目前選取的選項,而且一律會使用未檢視的連結色彩繪製。 左側範例顯示來自 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:// 通訊協定名稱和使用小寫文字。
不正確:
www.microsoft.com
正確:
microsoft.com
在不正確的範例中,「HTTPs://」和「www」不說出。
工作連結
使用命令式動詞啟動連結,並清楚描述連結執行的工作。 請勿使用結束標點符號。
如果命令需要其他資訊,請以省略號結束連結, (包括確認) 才能成功完成。 只有在需要其他資訊來執行工作時,才顯示另一個視窗時,請勿使用省略號。
列印...
在此範例中,列印...命令連結會顯示 [列印] 對話方塊,以收集詳細資訊。
列印
相反地,在此範例中,Print 命令連結會將檔的單一複本列印到預設印表機,而不需要任何進一步的使用者互動。
正確使用省略號很重要,表示使用者可以在執行工作之前做出進一步的選擇,或完全取消工作。 省略號所提供的視覺提示可讓使用者不需擔心即可探索您的軟體。
如有必要,請使用 「now」 結束工作連結,以區別它與導覽連結。
下載檔案
立即下載檔案
在此範例中,「下載檔案」會流覽至下載檔案的頁面,而「立即下載檔案」實際上會執行 命令。
說明連結
如需指導方針和範例,請參閱 說明。
連結資訊提示
- 使用完整句子和結尾標點符號。
如需更多指導方針和範例,請參閱 工具提示和資訊提示。
文件
參考連結時:
- 使用確切的連結文字,包括其大小寫,但不包含省略號。
- 若要描述使用者互動,請使用 click。
- 可能的話,請使用粗體文字格式化連結文字。 否則,只有在需要以避免混淆時,才將連結文字放在引號中。
範例:若要啟動掃描,請按一下 [掃描電腦]。
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應