<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="visual-layout" xml:lang="el">

  <info>
    <credit type="author">
      <name>Allan Day</name>
      <email>aday@gnome.org</email>
    </credit>
    <credit>
      <name>Calum Benson</name>
    </credit>
    <credit>
      <name>Adam Elman</name>
    </credit>
    <credit>
      <name>Seth Nickell</name>
    </credit>
    <credit>
      <name>Colin Robertson</name>
    </credit>
    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>
    <desc>Τακτοποίηση στοιχείων στην γραφική διεπαφή.</desc>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Ελληνική μεταφραστική ομάδα GNOME</mal:name>
      <mal:email>team@gnome.gr</mal:email>
      <mal:years>2014-2015</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Δημήτρης Σπίγγος</mal:name>
      <mal:email>dmtrs32@gmail.com</mal:email>
      <mal:years>2015</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Θάνος Τρυφωνίδης</mal:name>
      <mal:email>tomtryf@gmail.com</mal:email>
      <mal:years>2014</mal:years>
    </mal:credit>
  </info>

<title>Οπτική διάταξη</title>

<p>Η οπτική διάταξη των στοιχείων ελέγχου, πληροφοριών και περιεχομένου επηρεάζει την ευκολία κατανόησης της εφαρμογής σας καθώς και την ομορφιά της. Είναι σημαντικό να αναγνωρίζετε ότι ο οπτικός σχεδιασμός έχει μια ισχυρή επίπτωση στο πόση εργασία περιέχεται στη χρήση μιας εφαρμογής - φτωχή διάταξη καταλήγει σε επιπλέον προσπάθεια των χρηστών, ενώ καλή διάταξη απαιτεί λιγότερη προσπάθεια.</p>

<p>Η τήρηση αυτών των οδηγιών οπτικής διάταξης θα σας βοηθήσει να παράξετε μια εφαρμογή που είναι όμορφη, ευκολονόητη και αποτελεσματική στη χρήση.</p>

<section id="general-guidelines">
<title>Γενικές οδηγίες</title>

<list>
<item><p>Ένα σημείο στοίχισης είναι μια φανταστική κάθετη ή οριζόντια γραμμή μέσα από το παράθυρό σας που ακουμπά την άκρη μιας ή περισσότερων ετικετών ή στοιχείων ελέγχου στο παράθυρο. Η ελαχιστοποίηση αυτού του αριθμού θα εμφανίσει τη διάταξη πιο καθαρή, πιο απλή και πιο ευκολονόητη.</p></item>
<item><p>Να στοιχίζετε το περιεχόμενο και τα στοιχεία ελέγχου στη διάταξης ακριβώς. Το μάτι είναι πολύ ευαίσθητο στα στοιχισμένα και στα αστοίχιστα αντικείμενα. Αν τα οπτικά στοιχεία δεν στοιχίζονται, θα είναι δύσκολο για κάποιον να τα σαρώσει. Τα στοιχεία που δεν στοιχίζονται αρκετά θα αποσπούν την προσοχή.</p></item>
<item><p>Να είσαστε ομοιόμορφος. Χρησιμοποιήστε το ίδιο διάκενο παντού.</p></item>
<item><p>Να οργανώνετε τα σχετικά στοιχεία ελέγχου και τις πληροφορίες σε ομάδες και να χρησιμοποιείτε διάκενο για να τα διαφοροποιείτε. Αυτό κάνει μια διεπαφή πιο ευανάγνωστη και πιο κατανοητή.</p>
<list>
<item><p>Ως πρόχειρος κανόνας, αφήστε κενό μεταξύ στοιχείων σε βήματα των 6 εικονοστοιχείων, η αύξηση στη σχέση μεταξύ σχετικών στοιχείων γίνεται πιο μακρινή.</p></item>
<item><p>Αφήστε 12 οριζόντια εικονοστοιχεία μεταξύ ετικετών και συνδεμένων στοιχείων.</p></item>
<item><p>Για κάθετα διάκενα μεταξύ ομάδων στοιχείων, 18 εικονοστοιχεία είναι αρκετά.</p></item>
<item><p>Μια γενική συμπλήρωση 18 εικονοστοιχείων συνιστάται μεταξύ των περιεχομένων ενός παραθύρου διαλόγου και των περιγραμμάτων του παραθύρου.</p></item>
</list></item>
<item><p>Βάλτε εσοχή 12 εικονοστοιχείων στα στοιχεία για να δείξετε ιεραρχία και σχέση.</p></item>
<item><p>Αποφύγετε τη χρήση πλαισίων με ορατά περιγράμματα για να ξεχωρίζετε ομάδες στοιχείων ελέγχου - χρησιμοποιήστε διάκενο και κεφαλίδες στη θέση τους.</p></item>
</list>

<p>Λαθεμένο διάκενο και στοίχιση:</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-incorrect.svg"/>

<p>Σωστό διάκενο και στοίχιση:</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-correct.svg"/>

<p>Σωστό διάκενο, με μονάδες (εικονοστοιχεία):</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-spacing.svg"/>

</section>

<section id="label-alignment">
<title>Στοίχιση ετικέτας</title>

<p>Αν είναι δυνατό, στοιχίστε δεξιά τις ετικέτες (δείτε το παρακάτω διάγραμμα). Αυτό θα αποφύγει μεγάλα κενά μεταξύ ετικετών και των συσχετισμένων στοιχείων ελέγχου. Αυτός ο τύπος δεξιάς στοίχισης δεν είναι δυνατός αν έχετε στοιχεία ελέγχου με εσοχές: εδώ θα πρέπει να χρησιμοποιηθεί η αριστερή στοίχιση.</p>

<media type="image" mime="image/svg" src="figures/label-alignment.svg"/>

</section>

<section id="hierarchy">
<title>Οπτική ιεραρχία</title>

<p>Οργανώστε τα οπτικά στοιχεία από πάνω προς τα κάτω και από αριστερά προς τα δεξιά. Αυτή είναι η κατεύθυνση που τα άτομα με δυτικές τοπικές ρυθμίσεις τείνουν να διαβάζουν μια διεπαφή, έτσι ώστε τα στοιχεία στα πάνω αριστερά να βρεθούν πρώτα. Αυτή η διάταξη δίνει στις διεπαφές μια ιεραρχία: αυτά τα στοιχεία που προβάλλονται πρώτα γίνονται αντιληπτά με προτεραιότητα έναντι αυτών που έρχονται μετά από αυτά. Για αυτόν τον λόγο, θα πρέπει να τοποθετείτε τα επικρατούντα στοιχεία ελέγχου από πάνω και στα αριστερά των στοιχείων ελέγχου και του περιεχομένου που επηρεάζουν. Οι γραμμές κεφαλίδας είναι ένα βασικό υπόδειγμα σχεδιασμού από αυτήν την άποψη.</p>

</section>

</page>