网页设计制作之改进超级链接效果
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，即：你不知道该点击那里来获取更多的信息，因此，你必须先考虑这个问题
