Acest website folosește cookies
×
Logo FCS

WinCC flat design

Primul lucru care se observă la un sistem SCADA/HMI este interfața grafică și utilitatea lui. Grafica standard, WinCC Dark, Light sau Wireframe din Tia Portal WinCC poate fi puțin „învechită” pentru gustul multora. Dacă urmărim evoluția conceptului grafic (GUI - Graphic User Interface) al aplicațiilor cu o intensă utilizare precum aplicațiile din telefonul mobil, site-urile web sau chiar și a sistemelor de operare, observăm că s-a făcut trecerea de la stilul candy - bombat, lucios, 3D, la un stil plat - simplificat, colțuros și cu culori uniforme. Grafica obiectelor sau acțiunilor a trecut de la reprezentări realistice la unele conturate și cât mai simplificate.

Tinând seama de acest trend, putem crea stiluri/teme plate (flat GUI) și în Tia WinCC. Odată creată o temă (Style Sheet) putem să le aplicăm obiectelor din proiect. La început acest lucru poate dura destul de mult până suntem mulțumiți cu rezultatul final. Avantajul este că aceste teme pot fi refolosite și în alte proiecte iar dacă modificăm tema, toate obiectele setate cu aceea temă se reîmprospătează automat fără a modifica manual fiecare obiect.

Atenție, în WinCC Basic v13, aceste stiluri/teme nu se pot modifica sau crea. Acestea se pot edita doar de la versiunea WinCC Comfort în sus.

Sfatul #1: Exersați pe un proiect de test

Înainte de a începe o temă pentru un proiect/client exersați pe un proiect de test. Din nefericire crearea/modificarea unor teme pot introduce artefacte nedorite.

Momentan pe Tia WinCC V13 instalat pe Windows 10 64bit (în cazul meu) au existat astfel de probleme: tema arată normal în editorul de ecrane dar în Runtime erau distorsionate. Dacă pățiți așa ceva, o metodă aplicată de mine este să debifez și să bifez dinou „Style/Design settings” din „Properties” apoi să recompilez proiectul de la zero.

Pentru început, vă recomand să citiți următorul articol de pe site-ul Siemens: SIMATIC HMI Control Panels - Innovative Design and Operation. Vă va ajuta să întelegeti mai bine ce este un StyleSheet și cum se editează.

Sfatul #2: Folosiți o temă modernă tip Flat UI

Începeți cu o căutare pe Internet cu exemple de „Flat UI Kit”. Sigur veți găsi ceva să vă inspire pentru noul proiect.

Stilul plat poate avea și unele dezavantaje, nu exagerați cu el. Obiectele de interacțiune ar trebui puse în evidență. De exemplu un buton ar trebui să se evidențieze clar față de un obiect rectangular colorat. Puteți adăuga din „Appearance”, un „Corner radius” de 2px și poate chiar un contur subțire de 1px cu o culoare din aceeași nuanță cu fundalul.

Sfatul #3: Paleta de culori

Culorile sunt foarte importante pentru un design de calitate. Folosiți doar câteva culori și nuanțele acestora în tot proiectul. Culorile le puteți alege în funcție de tipul aplicației sau în funcție de culorile din logoul beneficiarului. Încercați să nu folosiți culori stridente care pot obosi ochii utilizatorului.

Puteți să găsiți ușor câteva seturi de culori pentru o temă plată (flat) pe site-uri dedicate. Un site util cu palete de culori se poate găsi la adresa: Adobe Color CC.

Dacă găsiți culorile potrivite dar aveți doar codul lor hex, pentru a le folosi în WinCC, acestea trebuie convertite în format rgb: Hex to RGB Converter. Pentru a ușura munca copiați și lipiți conținutul rgb din valoarea CSS, care vine deja pregătit cu virgule între culori.

Saftul #4: Imaginile și pictogramele

Dacă continuați cu stilul plat, atunci utilizați și pictogramele în același sens. Vă recomand să creați grafica în format vectorial pentru a putea fi scalată în orice mărime, în funcție de necesități. Un program foarte util, gratuit, este Inkscape. Cu el puteți edita și salva imaginile în majoritatea formatelor vectoriale și exporta în format raster. Dacă aveți nevoie de un program de editare imagini raster, vă recomand, Gimp.

Implicit Tia WinCC V13 suportă fișiere grafice în format vectorial tip WMF și EMF dar, din experiență, acestea sunt redate la o rezoluție scăzută atunci când sunt sub-scalate în imaginile de fundal pe obiecte. Imaginile tip hartă de puncte/raster se comportă mai bine la sub-scalare dar, evident, sunt estompate cânt sunt supra-scalate. Pentru un rezultat cât mai bun, vă recomand să exportați imaginea vectorială într-un format raster tip PNG, într-o rezoluție în care Runtime-ul să nu scaleze imaginea. Astfel, dacă folosiți un buton de 100px x 100px, cu o margine de 10px de jur-împrejur, vom avea în interior un spațiu pentru o imagine de 80px x 80px.

Pictogramele folosite pentru demonstrația de mai sus au fost descărcate de pe site-ul FlatIcon. Aici găsiți seturi de pictograme în format vectorial, majoritatea fiind gratuite.

Sper ca aceste sfaturi să vă fie de folos și să vă inspire la un design cât mai plăcut și cât mai util.

Contact Fluid Control Systems

Adresă:
Bd. Theodor Pallady 287,
Cladirea IOR2, Et. 1

Program:
L-V: 09:00 - 17:00

Telefoane:
Fix: 021.340.40.54
Mobil: 0723.878.314

Email:
Email: office@fluidcontrol.ro
Skype ID: fluidcontrol