<?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>The visual layout of controls, information and content affects how easy it is to understand your application. As part of this, it is important to recognise that visual design has a strong impact on how much work is involved in using an application — poor layout results in users having to put in additional effort, while good layout requires less effort.</p>

<p>Good visual layout also obviously makes applications more attractive and visually pleasing.</p>

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

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

<list>
<item><p>An alignment point is an imaginary vertical or horizontal line through your window that touches the edge of one or more labels or controls in the window. Minimize the number of these — the fewer there are, the cleaner and simpler your layout will appear, and the easier it will be for people to understand.</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>Avoid using frames with visible borders to separate groups of controls — use spacing and headers instead.</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>
