网页设计制作之改进超级链接效果
发布时间：2020-03-29 14:08:13 所属栏目：编程 来源：站长网
导读：Hyperlinks enable people to jump instantly from page to page, or site to site. Such power can create anxiety. 超链接可以使会见者从一个页面跳转至其它一个页面，或从一个站点跳转至其它一个站点。可是，这种频仍的跳转也许使人们发生焦急。 To help
|
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，即：你不知道该点击哪里来获取更多的信息，因此，你必需先思量这个题目 The second problem is: The links look the same although they point to completely different targets (each one is a different used Aston Martin). This breaks Principle 4. Because all the links on this page have the same content (the vehicle model), it's even less obvious that they might be the link. 第二个题目是：尽量这些链接指向完全差异的方针（每个差异的链接都行使了名称“Aston Martin”），但它们看上去险些一样，这就违背了上述的法例4；再加上全部的链接都包括了沟通的内容（vehicle model [车辆范例]），这就使得超链接越发不明明。 If I click on "Aston Martin DB7 GT", I would expect to get general information about the Aston Martin DB7 GT car. This breaks Principle 3, because the link is not accurately describing what I'll get if I click it. 假如我点击“Aston Martin DB7 GT”这个链接，但愿获取关于“Aston Martin DB7 GT”型汽车的概略信息。可是，我发明最终获取的信息和链接的描写存在进出。那么，这就违背了法例3。 What should they do? 网站该怎样改造？ The "thing you get" is the information about a particular car. The thing that represents the particular car is the entire table row. There is no other unique identifier for the car (mileage, price etc. aren't necessarily unique). Therefore, the whole row should be the clickable hyperlink. (It would also be helpful if the row changed colour/tone on mouseover). “thing you get [你所获取的资料]”应该是与一辆汽车相干的信息，这些代表特定车型的信息应该占有整个表格列；同时，由于这里没有包括详细车型信息（如：英里数、价值等）简直认工具，以是，表格的整列必需作为可点击的超链接工具。（假如鼠标移至超链接上可以或许发生变色结果的话，将更有助于识别）。 Expressing size in hyperlinks 描写超链接工具的尺寸巨细 It's quite common to find computers putting out this kind of information to set user's expectations when linking to a file: 当链接到一个文件时，我们凡是会发明超链接上包括一段关于文件巨细尺寸的描写，这有助于用户抉择本身的意愿（即：是否点击该文件链接）。 如：PDF (46,764 bytes) Thinking about the user's goals, what they need is to know roughly how long the download will take: will it be a few seconds, or minutes? That's generally as accurate as it needs to be. 好好思索一下用户的方针是什么，凡是环境下，他们必要知道下载必要花去多长时刻：是几秒钟，照旧几分钟？因此，我们应该对其作出尽也许精准的描写。 What should it be? 应该奈何描写上述的文件尺寸呢？ There's no benefit at all in showing more than two significant figures in file sizes. Above should be 47KB. Also, only ever use kilobytes or megabytes for file sizes online. (Good, useful file sizes to 2 significant figures run: 4.7KB, 47KB, 470KB, 4.7MB etc.) 对文件尺寸的描写最好不要高出两位有用数字。上述文件尺寸应该写成47KB。因此，收集上应尽也许地行使千字节（kb）或兆字节（mb）对文件举办描写。（我们保举的2位数字描写法如下：4.7KB, 47KB, 470KB, 4.7MB等等） Formatting hyperlinks 对超链接界说名目 If we have to differentiate text hyperlinks from other text, should this be done with colour or formatting such as underlining/emboldening? 假如我们必要在一个文本中区分差异的笔墨链接，我们应该对超链接的部门行使差异于平凡文本的颜色，可能对超链的笔墨加上下划线，可能加粗。 The de facto convention has been that hyperlinks are rendered in blue with underlines, that they turn red when clicked, and that visited links are purple. 默认的超链接举措对应的颜色变革是：早先，超链接是蓝色的，并带有下划线；当点击时，它会酿成赤色；会见过的超链接将会以紫色表现。 The most readable way to render most text is black on a white background, and making text hyperlinks blue (#00f) works very well on white. It is clearly distinguishable from regular black text, while still providing enough visual contrast to be readable. 最常用的增进超链接可读性的要领是：整体页面为黑字白底，笔墨超链接为蓝色（#00f）。这样做可以使得颜色的视觉比拟度明明，从而便于区分超链接内容和文本内容，增进可读性。 Blue hyperlink in greyscale: with and without underline. 超链接的颜色可以有灰色更换蓝色，带不带有下划线均可。 It's appropriate to ask if differentiating by colour alone will work for people who are colourblind. The image above is a screen capture of this page, totally desaturated. It shows that, even without colour, there is sufficient tonal difference between black and blue to make the hyperlink clear. The underlined version is a little bit clearer, but showing underline on hover would serve a similar purpose. 同时你还要思量到假如仅仅依赖颜色的变革来区分超链接状态的话，那么色盲们可以接管吗？最好是扣问一下他们是否能分辨这些颜色。上面的图片是页面截图，从上面的图片中你可以看到，纵然不行使超链接的颜色变革结果，仅行使玄色和蓝色也可以或许很清晰的识别出超链接。给超链接加上下划线将更有助于用户识别超链接；可能是当鼠标颠末超链接时呈现下划线，这样也能到达同样的结果。 Should hypelinks be underlined? 超链接是否必要带有下划线？ Underlining works okay for occasional inline links. 对付不常常行使的内置超链接可以加上下划线。 It makes the link stand out a little more than colour alone. 通过对超链接行使下划线（与仅对超链接举办颜色变革）更能起到突出超链接的浸染。 In this example, the underlining works well to distinguish article titles from the sub-title. 在这个案例中，下划线可以清晰地域分主问题和二级问题。 I think underlining becomes unhelpful when there are numerous inline links in paragraphs, in lists of links, and when there are lots of sets of links on a page. 假如段落中、链接列表中或页面中的超链接过多，那对这些链接行使下划线将起不到任何突出浸染。 Here are a couple of examples of collections of hyperlinks, showing the original (underlined) and the same with underlines removed. 下面两组超链接结果的比拟。左边的超链接包括下划线，右边则不包括下划线，详细如下： Notice how it's quicker and easier to read the non-underlined blocks of text. 请留意：假如像上面这样的链接列表，那么不行使下划线将更有助于快速、轻盈地阅读。 In this second example, I have also adjusted the line spacing to make the related words clearer. 在第二个案例中，我还调解了单词之间的间距以使其看上去越发清楚。 Consistency 同等性 It is important that hyperlink formats behave consistently across pages. 尚有一点很重要，就是全部页面的超链接名目最好保持同等。 Obviously, where some text links are on different backgrounds, such as in navigation bars, they may need to use special colours or treatments. 很显然，当超链接位于差异的配景时，如：位于导航条内，那么我们将对其行使出格的颜色和结果。 The above snippets are taken from the Guardian Online homepage 上面的片段来自于Guardian Online的首页。 While most links look similar (#036, mainly not underlined, there are several very different styles applied on the hover, when the mouse pointer moves over the active link. 上面的超链接名目看上去基内情同（字体颜色#036，超链接根基上不带下划线，当鼠标颠末超链接时发生的结果各不沟通）。 The psychological effect is disconcerting: you are left doubting whether all links will do similar things (i.e. go to another page on this site), or whether you might be taken unexpectedly somewhere else. I think that this schizophrenic behaviour weakens the brand experience, as well as diminishing usability. 从内心学角度讲，这样的结果处理赏罚会让人感想不安；同时，你会对此留有疑虑：是否所用的链接满是这样（包罗其余页面）；是否会链接到一个出乎料想的处所。我以为，这种让人感想精力破碎的结果处理赏罚要领将减弱用户对该网站品牌的映像，同时，网站的可用性也将大打折扣。 There is no good reason to treat all the hyperlinks differently. The third example also breaks the second principle, because its colour change makes it weaker, less noticeable, which is not 'highlighting'. 我们不行以对全部的超链接都行使差异的结果。上面的第三个案例违背了第二个法例；由于差异的颜色变革使超变得毫无重点，基础起不到突出的浸染 Conclusion 结论 On balance, it seems that the predominant convention in the industry is to keep #00f or #00c (slightly darker) blue for links, and to make links red and (optionally) underlined on hover. 总而言之，最具特点的超链接颜色结果变革是：行使 #00f 或 #00c（颜色较前者轻微暗点），作为超链接的字体颜色；当鼠标颠末期，行使赤色可能加上一条下滑线来突显它。 I think that this provides the best balance of functionality when applied consistently to inline hyperlinks and grouped hyperlinks. 我以为：对全部的内置超链接和群组超链接行使沟通的结果变革可以或许在其成果性保持最好的均衡。 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
