Käyttöliittymäohjeistus
| Info |
|---|
Dokumentti on luonnosvaiheessa. Ohjeistuksen ensimmäinen versio hyväksytään projektissa elokuussa 2014. Tämän hetkinen tilanne on parhaiten nähtävissä esimerkkipalvelusta: http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php |
| Table of Contents | ||
|---|---|---|
|
...
- kehyksen ulkopuoliset javascriptit/css ja niiden dokumentointi
- yleisperiaate: jos et ole varma miten näkymä tehdään, kysy UI-tiimiltä!
- näkymät, joita UI-tiimi ei ole protonnut/määritellyt on syytä hyväksyttää/näyttää UI-tiimille
- tarkistuslistat kehittäjien avuksi
Bootstrap
Eduplan GUI perustuu nyt Bootstrap 3-frameworkkiin. Se on hyväksi todettu ja monipuolinen kirjasto, jossa on toteutettu myös mukautuvuus kattavasti. Tämän päälle on tyylitelty oma visuaalinen tyyli, sekä tarvittavat lisäkomponentit, css-luokat ja javascriptit.
Kehys
- Yläpalkki (
- Yläpalkki (header)
- sovellus brändäys, tausta
- käyttäjän tiedot ja toiminnot
- päänavigaatio
Päänavigaatio (topbar)
- Päänavigaatioon uusi yksinkertaistettu toteutus
- Mitä tulossa valikkoon, käykö tekstuaalinen rakenne vai ikoni (FontAwesome)
- Bootstrap-pohjainen ikoninavigaatio
- Maksimaalinen tilan Maksimaalinen tilan käyttö
- Mukautuvuus (voi olla myös sidemenu!)
Alapalkki (footer)
- [Takaisin ylös] mobiilissa
...
- otsikot
- pieni teksti (himmennetty)
- lihavoinnit, kursivointi
- listat (ul, ol). Muotoilematon, ilman etumerkkejä
- linkit, linkkien eri tilat
omaan less- tiedostoon
Näkymät
Näkymäesimerkit ovat tässä määrittelyssä ensisijaisen tärkeitä. Pelkät elementtien määrittelyt eivät riitä takaamaan yhdenmukaisia toteutuksia.
...
- näkymän otsikkopalkki (voi sisältää otsikon, toimintoja, tietoja, ehkä palaute/lataaja) http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#titlebar
- määrittele tarkemmin
- Näkymän yleinen määrittely, sivun otsikko, murupolku jne. Perustelu jos jokin pääelementeistä puuttuu.
...
- palvelun työpöytä (dashboard)
- alaosion työpöytä
- listausnäkymä
- yksittäisen katselu (avain arvo-tietolistan näyttäminen esimerkiksi. Esim peppi > henkilö > profiili)
- lomake / muokkaus
- modal, kuten Jira
- muokkauksen sisäinen navigointi eri osioihin
- jos sivu tyhjä eikä dataa: tarjoa ensimmäinen toimenpide
- Näkymän sisäinen navigaatiorakenne
- dynaamiset valinnat vasemmalla, esim. Pepin tallennetut haut
- valintojen väliotsikot
- kompleksi tietojen muokkaus, ops-editori muokkaa opsia, miten huomioidaan tallennus eri välilehdillä
- haku + hakutulos. Erilaisia malleja erilaisiin/erimääräisiin hakukriteereihin ja tuloksiin. Hakutuloksesta paluu hakuun/listaukseen.
- Excel-tyyppinen inline editointi
-
- alaosion työpöytä
- listausnäkymä
- yksittäisen katselu (avain arvo-tietolistan näyttäminen esimerkiksi. Esim peppi > henkilö > profiili)
- lomake / muokkaus
- modal
- muokkauksen sisäinen navigointi eri osioihin view-näkymästä (sidebar)
- jos sivu tyhjä eikä dataa: tarjoa ensimmäinen toimenpide
- modal
- Näkymän sisäinen navigaatiorakenne
- dynaamiset valinnat vasemmalla, esim. Pepin tallennetut haut
- valintojen väliotsikot
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#left-navi
- kompleksi tietojen muokkaus, ops-editori muokkaa opsia, miten huomioidaan tallennus eri välilehdillä > jokainen oma modaali
- haku + hakutulos. Erilaisia malleja erilaisiin/erimääräisiin hakukriteereihin ja tuloksiin. Hakutuloksesta paluu hakuun/listaukseen.
- Excel-tyyppinen inline editointi (mass edit)
- Perus "sisältö"sivu. Eli otsikko/teksti/kuva-tyyppinen sisältö
- Palstat perustuvat Bootstrapin Gridiin.
- Lomakkeiden validointi
- Palautteet toiminnoistaPerus "sisältö"sivu. Eli otsikko/teksti/kuva-tyyppinen sisältö,
Poikkeavat / uniikit näkymät aina UI-tiimin kautta!
...