Ghid de stil servicii electronice guvernamentale

Navigare

Navigarea este importantă pentru o accesibilitate sporită. De aceea elementele de navigare în primul rând vor fi ușor de recunoscut și diferențiat (formă, culoare, interacțiune) față de alte elemente de conținut și respectiv vor fi folosite după context.

În principiu avem la dispoziție mai multe tipuri de elemente de navigare / legătură cu alte pagini: legăturile text, butoanele (care pot fi mari, medii și mici, simple și importante după context), breadcrumbs-urile și barele de progres a unui proces, plus elementele de navigare din header-ul și footer-ul paginii.

Elementele de navigare este bine să fie distincte și ușor de recunoscut.

Vom folosi pentru aceasta culorile și butoanele. Să trecem în revistă elementele de navigare și stările lor, plus contextul și modul de utilizare.

Legături text

Fundal deschis / închis

Legătura text pe fundal deschis

Legătura text pe fundal închis / imagine

Butoane

După cum este exemplificat și pe parcursul paginilor făcute în baza ghidului vizual, butoanele pot fi folosite după context și necesitate.

Sunt instrumente importante de accentuare a unei acțiuni care urmează a fi făcută (continuarea unui proces spre următorul pas, ștergere, întoarcere sau anulare a unei acțiuni, etc.).

Vom include cateva stiluri de butoane: buton primar, buton secundar, buton succes, buton pericol, buton atentie, buton deschis și buton inchis.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secundar</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Pericol</button>
<button type="button" class="btn btn-warning">Atentie</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Deschis</button>
<button type="button" class="btn btn-dark">Inchis</button>

Pentru unele cazuri s-ar putea sa aveti nevoie de butoane transparente cu border. Pentru aceasta e necesar sa adaugati o clasa aditionala .btn-striped.


<button type="button" class="btn btn-primary btn-striped">Button striped</button>

Marimi butoane

Vom folosi trei mărimi de butoane: mici, medii și mari.

Buton mari si mai mici

Butoanele mai mari sau mai mici? Adăugați .btn-lg sau .btn-sm pentru dimensiuni suplimentare.


<button type="button" class="btn btn-primary btn-lg">Button mare</button>
<button type="button" class="btn btn-primary btn-sm">Button mic</button>

În cadrul elementelor care limitează mărimea (blocuri, module, header, footer, tabele, etc), vom folosi butoane mici sau medii pentru a nu crea un dezechilibru prea mare între butoane și restul elementelor din respectivul grup.

Dacă spațiul și contextul o permit sau chiar o necesită (spre exemplu prima pagina în zona unde se transmite mesajul principal despre serviciul respectiv), putem folosi butoane mari ca îndemn spre acțiune spre principalele funcționalități sau compartimente ale site-ului.

Buton de tip bloc

Creați butoane de tip bloc - cele care acoperă întreaga lățime a unui părinte - adăugând .btn-block.


<button type="button" class="btn btn-primary btn-block">Button tip bloc</button>

Buton inactiv

Faceți ca butoanele să pară inactive adăugând atributul disabled la orice element de tip button.


<button type="button" class="btn btn-primary" disabled >Buton inactiv</button>

Butoane circulare cu pictograma

In unele cazuri va fi necesitatea de a folosi butoane cu pictograme.


<button type="button" class="btn-circle bg-red" >
    <i class="far fa-file-pdf" ></i>
</button>
<button type="button" class="btn-circle bg-blue" >
    <i class="fab fa-facebook-f" ></i>
</button>
<button type="button" class="btn-circle bg-cyan" >
    <i class="fab fa-twitter" ></i>
</button>
<button type="button" class="btn-circle bg-blue" >
    <i class="fab fa-linkedin-in" ></i>
</button>
<button type="button" class="btn-circle bg-blue" >
    <i class="fas fa-info" ></i>
</button>
<button type="button" class="btn-circle bg-gold" >
    <i class="fas fa-user" ></i>
</button>
<button type="button" class="btn-circle bg-dark" >
    <i class="fas fa-cog" ></i>
</button>

Recomandăm folosirea acestora doar în cazul necesității accentuării și focusării atenției utilizatorului asupra respectivei acțiuni sau funcționalități. În cazul în care toate butoanele de pe pagină o să fie de timp important, atunci niciunul dintre ele n-o să fie accentuat.

La fel și pentru butoanele de anulare sunt două tipuri (implicit și important). Cele de timp important se vor folosi doar în cazul în care urmează o acțiune ireversibilă (de confirmare a ștergerii / eliminării unui item spre exemplu) și în combinație cu un buton implicit. Evitați folosirea a mai multe butoane de tip important în același context.

Paginare

Paginare mica


<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <i class="fas fa-arrow-circle-left" aria-hidden="true"></i>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <i class="fas fa-arrow-circle-right" aria-hidden="true"></i>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Paginare cu multe pagini su indicator pagina curenta


<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" aria-label="Previous">
        <i class="fas fa-arrow-circle-left" aria-hidden="true"></i>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">3 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <i class="fas fa-arrow-circle-right" aria-hidden="true"></i>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>

Breadcrumbs


<nav aria-label="breadcrumb">
  <ol class="breadcrumb justify-content-center">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library 1</a></li>
    <li class="breadcrumb-item"><a href="#">Library 2</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Header


<header>
  <div class="navbar-top bg-gradient">
    <div class=" page-wrapper container">
      <div class="d-flex align-items-center justify-content-between">
        <a class="top-brand text-white d-flex align-items-center flex-no-wrap" href="#">
          <img src="images/logo/logo-gov.png" class="mr-2" width="21"  alt="Guvernul Republicii Moldova">
          <span>Guvernul Republicii Moldova</span>
        </a>
        <ul class="nav-nav d-inline-flex ml-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-globe mr-2"></i>
                Romana
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Romana</a>
              <a class="dropdown-item" href="#">Rusa</a>
              <a class="dropdown-item" href="#">English</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#" id="navbarDropdown2" role="button">
              <i class="fas fa-comments mr-2"></i>
              <span class="badge badge-important">6</span>
              Notificari
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdownUsername" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-user mr-2"></i>
                Nume Utilizator
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownUsername">
              <a class="dropdown-item" href="#">qwe</a>
              <a class="dropdown-item" href="#">asd</a>
              <a class="dropdown-item" href="#">123</a>
            </div>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-white">
                <i class="fas fa-sign-out-alt mr-2"></i>
                Sign Out
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="bg-white">
    <div class="page-wrapper">
        <nav class="navbar navbar-expand-lg bg-white px-3 align-items-stretch">
          <a class="navbar-brand py-3 d-flex" href="#">
            <img src="images/logo/demo/m-product.svg" class="img-fluid"/>
            <span class="brand-long-text">Ghid de stil servicii electronice guvernamentale</span>
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon">
                <i class="fas fa-bars icon-default"></i>
                <i class="fas fa-times icon-close"></i>
            </span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active"><a class="nav-link" href="grila.html">Acasa<span class="sr-only">(current)</span></a></li>
              <li class="nav-item"><a class="nav-link" href="colors.html">Despre noi</a></li>
              <li class="nav-item"><a class="nav-link" href="text.html">Contacte</a></li>
            </ul>
          </div>
        </nav>
    </div>
  </div>
</header>

Footer


<footer>
  <div class="page-wrapper container-fluid pt-4">
    <div class="row">
      <div class="col-lg-3 col-md-4">
        <div class="d-flex flex-column">
          <a class="text-white d-flex align-items-center mb-3 gov-logo-container" href="#">
            <img src="images/logo/logo-gov.png" class="mr-2" width="21" alt="Guvernul Republicii Moldova">
            <span>Guvernul Republicii Moldova</span>
          </a>   
          <a href="#">
            <img src="images/logo/m-style-white.svg" class="footer-logo mb-4" height="45" title="Product Logo" />
          </a>                     
        </div>
      </div>
        <div class="col-lg-5 col-md-8">
          <div class="footer-links container-fluid">
            <div class="row">
              <div class="col links-group pl-0">
                <h4 class="group-title">
                    Footer Link column title
                </h4>
                <ul>
                  <li>
                    <a href="#">Lorem ipsum dolor sit amet</a>
                  </li>
                  <li>
                    <a href="#">Curabitur </a>
                  </li>
                  <li>
                    <a href="#">Praesent vel risus</a>
                  </li>
                </ul>
              </div>
              <div class="col links-group pl-0">
                <h4 class="group-title">
                  Footer Link column title
                </h4>
                <ul>
                  <li>
                    <a href="#">Lorem ipsum dolor sit amet</a>
                  </li>
                  <li>
                    <a href="#">Curabitur </a>
                  </li>
                  <li>
                    <a href="#">Praesent vel risus</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="footer-right d-flex mb-3">
              <div class="support-info flex-column mb-4">
                <span class="small-text text-gray pb-1">Serviciul  suport clien</span>
                <span class="support-phone"><i class="fas fa-phone-alt mr-2"></i>022 820 000</span>
              </div>
              <div class="d-flex align-items-center">
                <div class="footer-egov-logo pr-3">
                    <img src="images/logo/logo-egov-white.svg" width="80" height="40" alt="egov-logo" title="eGov"/>
                </div>
                <ul class="footer-social-links d-inline-flex m-0">
                  <li>
                    <a href="#" class="d-flex align-items-center" title="Facebook">
                      <i class="fab fa-facebook-f m-auto"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="d-flex align-items-center" title="Twitter">
                      <i class="fab fa-twitter m-auto"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="d-flex align-items-center" title="Youtube">
                      <i class="fab fa-youtube m-auto"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="d-flex align-items-center" title="Linked In">
                      <i class="fab fa-linkedin-in m-auto"></i>
                    </a>
                  </li>
                </ul>
            </div>
          </div>
        </div>
    </div>
  </div>
  <div class="footer-bottom p-2 mt-">
      &copy;  Copyright. Agentia de Guvernare Electronica 2020
  </div>
</footer>