# 103: Περιοχή αποσπάσματος Photoshopping - CSS-Κόλπα

Anonim

Ώρα να βουτήξετε στην περιοχή Snippets! Δηλαδή, η πραγματική περιοχή περιεχομένου της. Έχουμε ήδη την κεφαλίδα στη θέση της. Η περιοχή αποσπάσματος είναι αρκετά δημοφιλής. Χωρίς να εμβαθύνω στα αναλυτικά στοιχεία, ξέρω από την παρακολούθηση κοινωνικών μέσων μαζικής ενημέρωσης και την ακρόαση από ανθρώπους στην πραγματική ζωή ότι βρίσκουν πολλά χρήσιμα πράγματα σε αυτόν τον τομέα.

Στο v9, μια πολύ κοινή και νόμιμη κριτική ήταν ότι ήταν δύσκολο να περιηγηθείτε. Ήταν ένα βαριά χρωματισμένο ακορντεόν και κάθε απόσπασμα ήταν ένας «σύνδεσμος φυσαλίδων» (λόγω έλλειψης καλύτερης περιγραφής) που ταιριάζει με το κύριο χρώμα αυτής της ενότητας αποσπάσματος. Χειρότερα, ήταν ευθυγραμμισμένα δικαιολογημένα, τα οποία νόμιζα ότι θα ήταν ένας τακτοποιημένος τρόπος για να τους δώσουν λίγο χώρο και να ρίξουν το βλέμμα λίγο, αλλά κατέληξαν να φαίνονται παράξενοι και ατημέλητοι.

Ας εξαργυρώσουμε τον εαυτό μας εδώ και να κάνουμε την περιοχή Snippets πιο όμορφη για περιήγηση. Παρόλο που, πάλι, το μεγαλύτερο μέρος αυτού του περιεχομένου βρίσκεται μέσω αναζήτησης. Ακόμα, μπορεί επίσης να το κάνει ωραίο να περιηγηθείτε.

Αμέσως αποφασίζουμε να μην βάλουμε ένα πεδίο αναζήτησης στην περιοχή περιεχομένου. Υπήρχε στο παρελθόν, αλλά πρόκειται για επανασχεδιασμό και παίρνουμε την απόφαση να ενοποιήσουμε την αναζήτηση σε έναν τομέα. Μόλις μάθετε πώς να χρησιμοποιείτε την αναζήτηση μία φορά, θα ξέρετε πώς λειτουργεί για πάντα.

Για το σχεδιασμό, πηγαίνουμε με δύο στήλες. Στα αριστερά, οι κύριες κατηγορίες αποσπάσματος, καθεμία με μοναδικό χρώμα. Ώρα ουράνιου τόξου! Περιηγηθούμε στη δική μας γκαλερί για έμπνευση.

Η δεξιά στήλη θα είναι απλώς μια λίστα με τα αποσπάσματα αυτής της κατηγορίας. Απλό, εύκολο στην περιήγηση. Μοιάζει πολύ με τους συνδέσμους υποσέλιδου. Οι άνθρωποι ξέρουν πώς να σαρώσουν και να χρησιμοποιήσουν λίστες συνδέσμων. Είναι το πιο απόλυτα απλό σχέδιο σχεδίασης που υπάρχει.

Ωστόσο, ανακατευόμαστε με κάποιες αποφάσεις σχεδιασμού. Πρέπει οι σύνδεσμοι να ταιριάζουν με το χρώμα της ενότητας ή απλά να είναι γκρι; Πρέπει να "ρίξουμε" τους συνδέσμους με μια ξεθωριασμένη έκδοση του κύριου χρώματος; Πρέπει να συμπεριλάβουμε ημερομηνία δημοσίευσης ή ενημερωμένη ημερομηνία ή κανένα; Διασκεδαστικό και σημαντικό πράγμα που πρέπει να σκεφτούμε, αλλά μπορούμε πάντα να λαμβάνουμε τέτοιου είδους αποφάσεις μόλις φτάσουμε στο πρόγραμμα περιήγησης και συνεργαζόμαστε με πραγματικά δεδομένα.