Mari kita membuat naratif yang menarik dari komponen UI lakaran. Kami akan membedah unsur -unsurnya -warna, tipografi, dimensi -dan menterjemahkannya ke dalam cerita untuk penonton yang pelbagai: visual, pendengaran, sentuhan. Matlamatnya? Pengalaman yang menarik, mudah difahami, dan tidak dapat dilupakan. Kejelasan dan koheren adalah yang paling penting.

Rakan saya, Katie, telah memilih komponen UI. Saya akan memberi penjelasannya (alat utama kami adalah SCS, ranting, dan kraf, tetapi bahasa templat tidak kritikal), dan dia akan memberikan maklum balas. Idealnya, saya akan mendapat maklumat yang paling tepat, dengan beberapa kesilapan untuk menggambarkan bagaimana maklumat dapat hilang semasa handoff.

Dalam label putih atau rangka kerja pembangunan front-end, keutamaan adalah fleksibiliti dan kebolehsuaian. Kandungan dan gaya disimpan sebahagian besarnya agnostik (dalam sempadan produk) kerana destinasi dan tujuan utama kod tidak diketahui. Walau bagaimanapun, peralihan baru -baru ini ke agensi reka bentuk web telah membalikkan fokus ini. Di sini, penekanannya adalah pada reka bentuk yang sangat disesuaikan dengan keperluan khusus pelanggan dan penonton sasaran mereka.

Berkolaborasi rapat dengan pereka grafik seperti Katie, bekerja dengan UI yang sempurna, Pixel-Perfect UI, bukannya wireframes atau naratif awal, adalah lengkung pembelajaran. Namun, saya membawa kemahiran berharga ke meja: reka bentuk dokumen .

Reka Bentuk Dokumen -Pada dasarnya web semantik dengan kebolehcapaian di terasnya -melukis merawat reka bentuk grafik sebagai sistem komunikasi. Kami menerjemahkan tujuan asas warna, tipografi, dan susun atur ke DOM yang boleh diakses, linear, dan dilayari. Ia html, biasa dan mudah. Namun, menghairankan, prinsip asas ini sering diabaikan.

Katie menyediakan fail lakaran yang penuh dengan papan arten dan spesifikasi reka bentuk yang jelas. Analisis saya mendedahkan enam atau tujuh komponen menggunakan paradigma kad yang sama:

• Kad membentangkan metadata mengenai halaman laman web.
• Ia mengandungi imej/media dan metadata (objek media).
• Ia dipaparkan dalam sekumpulan objek yang serupa.
• Kumpulan ini secara konsisten ditaip (tiada pencampuran hasil carian, artikel berita, dan kelas).
• Setiap objek mempunyai satu pautan halaman dan tiada tindakan lain.
• Setiap objek termasuk panggilan untuk bertindak (misalnya, "buku").
• Unsur pilihan: masa, kategori, lencana.
• Unsur yang diperlukan: Media, Tajuk, Pautan.

Kad itu adalah elemen navigasi utama. Pengguna melintasi laluan berpandu, memilih dari set kad berdasarkan halaman peringkat atas ("What's On," "Kelas"). Ia tidak interaktif, tetapi panduan, kad indeks yang memimpin pengguna ke destinasi mereka -dalam kes ini, membeli tiket pertunjukan.

Pertimbangkan analogi ini: menggambarkan risalah persembahan melalui telefon. Anda tidak akan membaca verbatim teks, bermula dengan butiran yang tidak relevan. Anda juga tidak akan menerangkan warna dan fon. Anda akan menyampaikan maklumat penting: "Ini adalah pertunjukan terbesar , Selasa jam 7:30 malam, Odeon di Oxford Street, berhampiran trem." Inilah intipati reka bentuk dokumen.

Kiraan, kumpulan, dan nama

Mari struktur setiap kad dalam item senarai. Kami memerlukan kumpulan yang boleh dikira, yang akan kami perkenalkan dengan tajuk (<h3></h3> ). Ini membolehkan pengguna pembaca skrin untuk:

1. Kenal pasti senarai dalam gambaran keseluruhan tajuk.
2. Lihat item Count di hadapan.
3. Navigasi ke item/kad senarai seterusnya.
4. Langkau kumpulan dan teruskan ke halaman seterusnya (penomboran adalah mercu tanda berlabel berikut).

============================================================================================================== =============================================================================================================== ============================================================================================================== =============================================================================================================== ============================================================================================================== =============================================================================================================== =============================================================================================================== ===============================================================================================================

Anchor

Setiap kad akan dibalut dengan elemen utama (<a></a> ). Ini mengutamakan pautan, yang membolehkan pengguna mengklik dengan segera apabila mengenal pasti kad yang berkaitan. Walaupun kawasan yang boleh diklik besar bermanfaat, ia tidak sepatutnya menjadi perangkap kebolehgunaan. Longkang murah kad menyediakan jarak yang mencukupi untuk meminimumkan klik yang tidak disengajakan.

Tajuk

Tajuk pertunjukan akan menjadi tajuk (<h3></h3> ), mencerminkan keunggulan visualnya. Pengguna yang cepat mengimbas tajuk dengan mudah akan mencari maklumat utama ini. Imej akan mendahului tajuk; Oleh kerana penerangan imej tidak tersedia melalui API, atribut alt akan dibiarkan kosong.

Sekarang untuk metadata:

• Lencana
• Tarikh/masa
• Kategori

Lencana

Lencana ini menyoroti maklumat khusus tempat. Walaupun manfaat penggunanya tidak begitu jelas, penekanan visualnya memerlukan kemasukan. Untuk mengelakkan ia terlepas semasa pelayaran tidak visual, saya akan meletakkannya terus selepas tajuk, sama ada pertama atau terakhir untuk akses yang konsisten. Bukan<abbr></abbr> , Saya akan menggunakan teks biasa kerana warna jenama berfungsi sebagai penunjuk pemilikan tempat yang jelas.

<p> Sorotan HAC</p>

Pembaziran adalah organisasi khusus, jelas membezakan acara dalaman dari yang dihoskan oleh organisasi luaran.

Tarikh/masa

Tarikh adalah penting dan akan diletakkan di a<h4></h4> elemen, memudahkan pengimbasan cepat untuk tarikh atau masa tertentu. The<time></time> Elemen memastikan tafsiran tarikh/masa yang betul oleh teknologi bantuan.

Kategori/tag

Kategori mengikuti lencana dan tarikh, mencerminkan de-prioritization visual mereka. Kami mengelakkan pengulangan dengan meletakkan maklumat khusus sebelum maklumat yang lebih umum. Tag mudah mendahului senarai kategori untuk kejelasan. Jarak berkod keras menghalang penyimpangan walaupun dengan pemampatan teks.

<p> Kategori: { % untuk kategori dalam kategori.all () %} {{kategori}} { % if not loop.last %} / { % endif %} { % endfor %}</p>

Pengekodan warna kategori utama dikendalikan dalam CSS, kerana ia adalah isyarat bukan lisan yang tidak memerlukan penerangan lisan. Kategori utama diletakkan terlebih dahulu, tetapi tidak dilabel secara eksplisit, kerana penapis kategori yang sedia ada menyediakan kaedah pemilihan yang lebih cekap.

Tindakan

Panggilan untuk Tindakan ("Buku," "Belajar Lebih") digayakan sebagai rentang, diletakkan terakhir untuk menandakan akhir kad. Ini memastikan tiada data mengikuti tindakan.

Kesimpulan

Markup ini mengutamakan pengiraan, pengumpulan, dan penamaan data, membolehkan kedua-dua interaksi linear dan bukan linear. Halaman ini dapat difahami apabila dibaca secara berurutan atau di bahagian, memudahkan navigasi yang cekap.

Maklum balas Katie

Katie Parry, pereka: artikel yang sangat baik! The<time></time> Pengendalian elemen sangat pandai. Walau bagaimanapun, pengguna teknologi bantuan menerima maklumat dalam urutan yang telah ditetapkan. Tanpa penapisan, mencari peristiwa tertentu (contohnya, acara tarian) memerlukan menavigasi melalui tajuk, lencana, tarikh, dan kategori, yang boleh menjadi rumit. Ini bukan ralat pengekodan, tetapi batasan paradigma web semasa. Sesuatu yang perlu dipertimbangkan untuk penambahbaikan masa depan.

Proses reka bentuk saya sering bermula dengan kad acara, walaupun sebelum menubuhkan tipografi di seluruh tapak. Secara visual, kad ini harus:

• Menyerupai senarai untuk kegunaan intuitif.
• Menyediakan maklumat yang mencukupi untuk Penilaian Kepentingan Pengguna (Imej, Tajuk, Tarikh, Pautan).
• Sertakan panggilan yang jelas ke tindakan (pautan).
• Mudah diimbas.

Kebolehbagaian visual dicapai dengan penempatan jenis maklumat yang konsisten dan hierarki visual yang jelas. Tipografi dan jarak adalah kunci. Judul sangat menonjol; Tarikh secara konsisten digayakan tetapi berbeza dari tajuk; Kategori mempunyai gaya yang berbeza. Jarak dalam sampel kod memerlukan pelarasan untuk scannability optimum.

Pengguna mengimbas maklumat yang berbeza. Sesetengah melayari secara amnya; Orang lain mencari peristiwa atau kategori tertentu. Kad perlu menampung tingkah laku yang pelbagai ini. Walaupun konvensyen wujud, reka bentuk kad berbeza -beza di seluruh projek.

Keseimbangan mesti diserang antara antara muka yang biasa dan keaslian khusus pelanggan. Typefaces tersuai dan palet warna menyumbang, tetapi penemuan pengguna adalah penting. Saya menyelidik pelanggan dan khalayak mereka (tapak semakan, media sosial) untuk mendedahkan pandangan yang mempengaruhi reka bentuk. Peningkatan penglibatan pemaju dalam fasa penemuan ini akan bermanfaat. Pada masa ini, saya menggunakan nota lakaran yang luas dan kadang -kadang spreadsheet untuk menentukan fungsi. Populator data akan menjadi ideal!

Atas ialah kandungan terperinci Menceritakan kisah reka bentuk grafik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!