Rakennan verkkosivustohakemistoa, joka sisältää tuhansia yrityksiä. Jokaisella yrityksellä on yrityksen ulkopuolinen verkkosivusto ja useita sosiaalisia sivustoja, kuten Facebook, Twitter ja Instagram. Minulla on mukava neliön kuvakkeet, jotka edustavat kutakin sosiaalista sivustoa.
Minulla on linkki yrityksen verkkosivustoon, jossa on tekstilinkki, jossa lukee ”käy verkkosivustollamme”. Se ei kuitenkaan näytä yhtä hyvältä kuin kuvakkeet.
Onko olemassa yleinen tai tyypillinen kuvake, joka edustaa linkkiä yrityksen verkkosivustolle?
Vastaa
Standardi on katettu kahdessa ”suuressa” kuvakekirjastossa.
Tämä symboli on toiminut hyvin testauksessa.
Materiaalikuvakkeet
FontAwesome
kommentit
- Katso täydellinen luettelo FontAwesome ulkoisten linkkien kuvakkeista täältä: fontawesome.com/icons?d=gallery& q = external . Huomaa, että vain nykyiselle versiolle vuodesta 2019 alkaen
external-link-square-altjaexternal-link-altovat ilmaisia. Vaikkaexternal-linkon ilmainen Earlissa ier-versio.
Vastaa
En tiedä, onko kuvake yksinään riittävän selkeä. ..
GOV.UK-sivustossa he poistivat kaikki nuo kuvakkeet seuraavista kolmesta syystä:
- Sinun ei aina tarvitse kertoa ihmisille ulkoisista linkeistä
- Kuvake on epäselvä ja epäselvä
- Sanat ovat tehokkaampia
https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/
Kommentit
- Keskustelu koskee kehittäjien valittamista koodia saastuttavasta ominaisuudesta ja spekulointia mahdollisista käyttäjä ajattelee sitä, ei vankkoja todisteita. Syyt kuulostavat myös tekosyiltä poistaa ominaisuus.
- On totta, että se oli alun perin kehittäjä ' huolestuttaa, mutta jos luet artikkelin perusteellisesti, ' huomaat, että sen jälkeen tuli suunnittelun suuntaviiva olla käyttämättä näitä kuvakkeita. Ja se ' on myös hyvä esimerkki suunnittelutiimin ja kehittäjien hyvästä yhteistyöstä.
Vastaa
Tässä on SVG -kuvake, jota voit käyttää inline-muodossa (suoraan HTML-koodissa, missä kuvaketta tarvitaan).
<svg width="24px" height="24px" viewBox="0 0 24 24" style="cursor:pointer"><g stroke-width="2.1" stroke="#666" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 13.5 17 19.5 5 19.5 5 7.5 11 7.5"></polyline><path d="M14,4.5 L20,4.5 L20,10.5 M20,4.5 L11,13.5"></path></g></svg>
(Lainattu Quorasta )
Esimerkki: 