網頁設計制作之改進超級鏈接效果
2019-10-26 17:23:11
供稿：網友
Hyperlinks enable people to jump instantly from page to page, or site to site. Such power can create anxiety.
超鏈接可以使訪問者從一個頁面跳轉至另外一個頁面，或從一個站點跳轉至另外一個站點。但是，這種頻繁的跳轉可能使人們產生焦慮。
To help users browse with confidence, links should be absolutely clear and explicit.
為了方便用戶更好的瀏覽頁面，超鏈接必須絕對的簡潔明了。
Principles
法則
1. Text hyperlinks should be clearly distinguishable from normal text.
超鏈接文字必須與普通的內容文字相區別
2. Any mouseover behaviour should have a highlighting effect.
鼠標移動到超鏈接上時必須要顯示突出效果
3.Hyperlink content should be as short as possible, yet long enough to identify either:
超鏈接的具體內容必須要言簡意賅（短而精）：
<!--[if !supportLists]-->· <!--[endif]-->Where you'll go [跳轉地址]
<!--[if !supportLists]-->· <!--[endif]-->What you'll get [希望獲取什么內容]
<!--[if !supportLists]-->· <!--[endif]-->What you want to happen [希望產生什么效果]
4. Hyperlinks with different targets should be clearly distinguishable.
指向不同目標的超鏈接必須要清晰可辨
5. Hyperlinks should give an indication of any unanticipated consequences, e.g.:
對點擊超鏈接后會出現的特殊情況加以解釋，如：
<!--[if !supportLists]-->· <!--[endif]-->Links to files [鏈接至一個文件]
<!--[if !supportLists]-->· <!--[endif]-->Links that open or close windows [點擊鏈接后會打開或關閉窗口]
What do you make a link?
考慮一下制作這個超鏈接的目的是什么
Hyperlink content example: Amapproved.com
超鏈接內容舉例：Amapproved.com
A site for locating approved Aston Martins, and it's good on the whole. This is the search results screen. Guess how you get from search results to see the details on a particular vehicle? The only link is the vehicle model (in the Vehicle summary column).
這個案例是Aston Martins [阿斯頓·馬丁] 汽車的網站。可以這樣說，它的整體外觀設計堪稱經典。這是一個搜索結果顯示頁面。那么現在，你想象一下，該如何通過搜索結果的方式來查閱有關車輛的詳細介紹。這里僅有的超鏈接就是關于“Vehicle summary column [車輛基本列表]”中的“vehicle model[車輛模型]”。
The first, and biggest problem, is that you can't distinguish the hyperlinks, breaking Principle 1. You don't know where to click to get more information: you have to guess.
首先所面臨的最大問題就是，你不能區分那個是超鏈接。這違反了法則1，即：你不知道該點擊那里來獲取更多的信息，因此，你必須先考慮這個問題
