App UI/UX Template Analyzer

Scritto il August 21, 2022 • 3 minuti • 639 parole

Si propone uno strumento per l’analisi della interfaccia grafica degli screen. Mediante una visione 3D sarebbe possibile rendere molto più semplice la compresione della composizione delle schermate.

App UI/UX Template Analyzer in via si sviluppo, ancora non è ben chiaro il come esso dovrebbe essere ma l’idea di basa è quella di avere la possibilità di visualizzare in maniera separata ogni componete e vista della pagina.

Attualmente è possibile rappresentare le sezioni degli screen, anche su differenti altezze a partire dal fondo chiamati layer.

Questo strumento è stato sviluppato mediante l’uso della libreria grafica 3D Babylon.js. Lo studio e l’uso di questa libreria è stato molto entusiasmante, ogni sviluppatore front-end credo dovrebbe assolutamente provare.

Step1 - Importare il tool nella pagina

Per poter utilizzare il tool basta basta includere nella pagina i seguenti script:

<!-- Babylon.JS -->
<script src="https://cdn.babylonjs.com/babylon.max.js" type="text/javascript"></script>
<!-- App UI/UX Template Analyzer -->
<script src="appanalyzer.js"></script>

il primo script consente di includere la libreria 3D Babylon.js
il secondo invece è il codice per poter utilizzare il tool

Step2 - Scegliere dove visualizzare il tool

Per poter inserire il tool nella pagina basta inserire un nodo canvas. La dimensione dello screen dovrà essere gestita dallo sviluppatore, opzionalmente è consigliato applicare un identifiativo o una classe per poter accedere ad esso.

<!-- resto della pagina -->
<body>
    <!-- contenuto del body -->
    <canvas id="boxAnalyzer" style="width:100%; height:100vh;"></canvas>
    <!-- contenuto del body -->
</body>
<!-- resto della pagina -->

Il tag proposto mostra un canvas con identificativo boxAnalyzer le cui dimensioni occupano tutta la larghezza a disposizione ed altezza pari all’altezza del dispositivo in uso.

Step3 - Inizializzare il tool

A questo punto bisogna inizializzare il tool, si esamini il seguente codice:

window.addEventListener('DOMContentLoaded', function(){
    appanalyzerInit('/screen/uno/screen.json', {
        'selector': '#boxAnalyzer',
        'debug': false
    });
});

Per poter inizializzare il tool bisgona invocare la funzione appanalyzerInit, si consiglia di invocarlo nel momento in cui la pagina risulta caricata ascoltando appunto l’evento DOMContentLoaded come nell’esempio.

appanalyzerInit prende in input due parametri :

input – un oggetto che descrive il modello dello screen oppure un URL che collega ad un JSON che lo descrive (lo si descriverà a breve)
options – opzioni aggiuntive (in via di sviluppo) contenenti altre varie opzioni (tra cui la più importante selector un selettore CSS Query per selezionare il canvas precedentemente definito)

Step4 - Definire l’input per il tool

Il tool prende in input un oggetto come il seguente:

{
    "settings": {
        "width": 375,
        "height": 774,
        "layer_h": 15,
        "img": "/screen/uno/all.png"
    },
    "layers": [
        {
            "name": "part1",
            "width": 375,
            "height": 63.9,
            "x": 0,
            "y": 0,
            "l": 1
        },
        {
            "name": "part2",
            "width": 375,
            "height": 640.6,
            "x": 0,
            "y": 63.9,
            "l": 0
        },
        {
            "name": "part3",
            "width": 375,
            "height": 63.9,
            "x": 0,
            "y": 704.4,
            "l": 1
        }
    ]
}

L’oggetto è suddiviso in due parti:

settings – contiene tutto ciò che riguarda le impostazioni generali
layers – contiene tutte le sezioni dello screen che si vogliono evidenziare

Nella sezione settings in particolare troviamo il campo img che contiene un URL che punta ad uno screenshot dello screen da analizzare accompagnate dalla sua larghezza width e la sua altezza height mentre layer_h definisce quanto dovranno essere alti i livelli da visualizzare.

In layers sono definite tutte le sezioni che si vogliono evidenziare. Essi sono dei ritagli di immagini definiti da una selezione di punti che partono dal punto di coordinate (x, y) ed il successivo (x + width, y + height). L’origine di tali punti è il vertice in alto a sinistra della immagine (come in tutti i programmi di grafica)

La seguente grafica descrive in maniera astratta la definizione di selezione usata dal tool:

definition layer coordinates

Conclusione

Si conclude quindi riproponendo l’esempio proposto all’inizio del’articolo. In questo esempio si analizza uno screen e sono presenti 3 layer: si evidenzia l’uso di una HeaderBar ad una BottomNavigationBar.