1. <dd id="uw4i9"><track id="uw4i9"></track></dd>

    2. <dd id="uw4i9"><noscript id="uw4i9"></noscript></dd><dd id="uw4i9"><track id="uw4i9"></track></dd>
        <tbody id="uw4i9"></tbody>
        <dd id="uw4i9"><pre id="uw4i9"></pre></dd>
        首頁 > 設計 > 網頁設計 > 正文


        2020-09-18 22:25:10
        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.



        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

        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.



        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.


        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.



        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.


        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'.



        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.


        發表評論 共有條評論
        用戶名: 密碼:
        驗證碼: 匿名發表

        1. <dd id="uw4i9"><track id="uw4i9"></track></dd>

        2. <dd id="uw4i9"><noscript id="uw4i9"></noscript></dd><dd id="uw4i9"><track id="uw4i9"></track></dd>
            <tbody id="uw4i9"></tbody>
            <dd id="uw4i9"><pre id="uw4i9"></pre></dd>