Dalam artikel ini, kita akan mengatakan bagaimana kita mengembangkan bukan bola dalam ruang hampa, tetapi perpustakaan komponen nyata, dan bagaimana kita berhasil mengabaikan perfeksionisme yang berlebihan (bukan merugikan proyek) untuk
menghemat 25% dari anggaran .
Ini adalah bagian pertama dari artikel ini, di mana akan ada banyak informasi praktis yang membosankan tetapi konkret tentang pembuatan komponen dalam Figma, serta nuansa, perangkap dan realitas menciptakan proyek dengan anggaran terbatas dalam pengaturan provinsi =)
Permulaan pekerjaan didahului oleh negosiasi dan kerja analitik yang panjang, atas dasar mana ToR terperinci ditulis dengan pengelompokan menjadi blok fungsional (dinamis) dan statis. Detail tentang itu dapat ditemukan
di artikel ini . Jika Anda belum mengerjakan TK seperti itu, kami sangat merekomendasikannya. Pengalaman yang sangat positif untuk seluruh tim pengembangan dan proyek secara keseluruhan.
Namun kembali ke desain
Perlu disebutkan bahwa Figma meluncurkan pembaruan yang sangat menyenangkan pada puncak pekerjaan, sehingga tidak akan ada kata tentang warna dan gaya teks. Kami berharap bahwa pembaca yang penuh perhatian akan belajar sesuatu yang bermanfaat untuk dirinya sendiri bahkan tanpa nuansa ini. Juga, jika Anda tidak memiliki pemahaman dasar tentang prinsip-prinsip pengorganisasian komponen dalam figma, kami sarankan pencarian di habr.com (ada banyak materi hebat tentang topik ini).
Sebelum memulai desain pixel-perfect, dalam banyak kasus kami membuat konsep desain. Biasanya itu adalah semacam tata letak mentah (dari sisi visual), yang harus dipikirkan secara menyeluruh dalam hal perilaku pada layar yang berbeda dan mempertimbangkan fungsi utama. Ini diperlukan untuk menghindari kejutan yang tidak menyenangkan di masa mendatang ketika blok yang dilupakan tidak tertanam dalam tata letak yang disetujui. Oleh karena itu, konsep lebih merupakan rancangan tata letak halaman nyata daripada styleboard, yang, bagaimanapun, menyediakan serangkaian gaya dasar dan
tata letak dasar
untuk halaman berikutnya.
Dalam hal ini, konsepnya adalah sebagai berikut:
Secara umum, tidak ada yang rumit. Satu-satunya hal yang akan memerlukan perhatian khusus (pada halaman ini) adalah preview dari lot (kartu ini), yang terdiri dari seperangkat posisi yang tidak terbatas (garis-garis ini ada di kartu), dan serangkaian tombol yang berbeda untuk berbagai peran.
Ada beberapa nuansa yang tidak terhitung, tetapi kami sepakat untuk jujur dan melakukannya tanpa sikap yang tidak perlu, jadi kami akan memberi tahu Anda bagaimana mereka muncul dalam proses.
Jadi - semuanya sudah disiapkan. Kami memiliki TK dengan fungsionalitas yang ditentukan untuk memahami pengoperasian komponen; styleboard sebagai konsep untuk memahami gaya elemen; standar untuk penamaan komponen untuk transfer desain tanpa rasa sakit ke tata letak, dan jumlah obat penenang dalam segala jenis dan warna ...
Anda dapat mulai melihat-lihat dalam gambar
Algoritme pengembangan sistem desain akan berupa perpindahan dari komponen (atom) yang sederhana dan tidak dapat dibagi menjadi komponen yang lebih kompleks, dan untuk tampilan visual hierarki, kami akan menggambar setiap tingkat kompleksitas berikutnya dalam kolom baru.
Teks
Untuk memulainya, kita akan mendefinisikan elemen yang tidak dapat dibagi: seperangkat tajuk berita utama, paragraf, dan gaya individu untuk teks tombol, gaya untuk penampung dan nama filter dan sesuatu yang lain. Jangan lupa untuk mengubah semuanya menjadi komponen!
Montserrat medium sebagai font utama dan Montserrat tebal untuk judul dan sorotan.
Pergi ke ikon. Kami menarik mereka dari perpustakaan gratis "Bulu"
Ikon
Setiap ikon ditempatkan dalam wadah 24x24 piksel dan disejajarkan di tengah sepanjang dua sumbu (untuk berjaga-jaga). Semua ikon disebut nama sesuai selera, tetapi dengan tambahan awalan "i" sehingga tidak ada duplikat dalam nama, dan kelompokkan agar tidak mengacaukan panel dengan lapisan.
Kami juga akan memiliki ikon jejaring sosial dan email tambahan untuk pemberitahuan input yang tidak lengkap, reset filter, tanda bintang untuk posisi yang diperlukan dalam lot, chevron untuk dropdown dan tanda centang untuk kotak centang dan batalyon radio. Semua ikon ini akan lebih kecil dan lebih ringan dari yang utama, tetapi demi standarisasi kami juga menempatkannya dalam wadah 24x24.
Selanjutnya, kita beralih ke komponen yang lebih kompleks. Kami akan menempatkan mereka di sebelah kanan, dan mengumpulkan mereka dari elemen dari kolom dan tongkat pertama.
Kotak centang
Mari kita mulai dengan sesuatu yang lebih sederhana.
Kotak centang dan radiobutton dalam wadah 16x16 piksel. Untuk setiap negara bagian, buat komponen terpisah. Ini diperlukan agar dalam desain halaman (dirakit dari komponen-komponen ini) kita dapat mengganti satu negara dengan negara lain melalui panel INSTANCE.
Kami melakukan hal yang sama dengan semua elemen dinamis yang memiliki status panduan, aktif, pasif, dll.
Penghitung dan penggeser
Kami juga membutuhkan penghitung untuk menampilkan jumlah sesuatu. Ini akan menjadi data yang berbeda tergantung pada lokasinya. Kami membuat bingkai 20x20 dan gambar di tengah.
Tombol untuk objek slider juga berguna bagi kami. Kami membuatnya 30x30 dan menempatkan ikon chevron secara kondisional di tengah. Kami membuat komponen untuk berbagai kondisi.
Pohon katalog
Baru-baru ini, kami mulai mematuhi prinsip menggunakan kembali komponen yang sama pada perangkat yang berbeda sehingga tidak menghasilkan entitas yang tidak perlu dan menjaga kemurnian kode (sebanyak mungkin). Karena itu, kami melakukan pohon katalog, mulai dari tampilan ponsel. TK memberi tahu kita bahwa tingkat bersarang maksimum pohon adalah 3.
Kita mulai dari tingkat pertama: bingkai dengan tinggi 60 piksel dan lebar tanpa dimensi (itu akan beradaptasi dengan wadah), ikon disejajarkan secara vertikal dan 20 piksel dari tepi kiri, nama cabang akan berasal dari komponen h4. Semua ini terpaku pada sisi kiri pada panel CONSTRAINS. Tempelkan jumlah lot (juga h4) dan chevron ke sisi kanan.
Gambar ulang komponen untuk cabang terbuka. Kami mengatur katalog tingkat kedua dengan cara yang sama, tetapi karena kami tidak akan menggunakan kembali gaya ini di mana pun - hanya mengkloning baris paragraf dengan peningkatan 20-pixel. Seperti di Photoshop - tidak ada masalah. Demikian pula untuk level ketiga + stick + perubahan warna garis.
Berikutnya adalah serangkaian kompromi berkelanjutan
Menu
Panel tab untuk semua jenis menu dan tab yang kami tempatkan di wadah 60px tingginya, dan item itu sendiri ditempatkan di tengah. Ke depan, kami mengatakan bahwa pendekatan ini tidak benar, karena jika Anda ingin mendapatkan tata letak karet penuh, setiap tab harus ditempatkan dalam bingkai yang terpisah. Jika tidak, itu tidak akan berfungsi untuk mengatur perilaku tab relatif satu sama lain. Tapi kami, berbicara dengan para pengembang, dengan hati yang tenang memberikan skor.
Daftar
Pada waktunya, saya mengingat hal-hal sepele seperti daftar bernomor dan tak bernomor. Untuk menambahkan nomor, kami kembali ke kolom pertama dan membuat komponen nomor dua digit.
Input dan filter
Momen datang ketika kami melanggar aturan hierarki kami sendiri dan menempatkan komponen dan komponen yang terdiri dari komponen-komponen ini (* _______ *) dalam satu kolom (ingat: aturannya adalah menempatkan mereka di sebelah kanan, membawanya keluar di yang terpisah). Itu mungkin dilakukan tanpa ini, tetapi kami memutuskan bahwa blok (filter atau input) dan dropdown-nya akan terdiri dari satu komponen di berbagai negara. Seperti yang dikatakan Salvor Hardin: "Jangan biarkan moralitas menghalangi Anda melakukan hal yang benar."
Kami membuat kompromi ini karena alasan berikut: komposisi input dan, misalnya, kotak centang harus memiliki tingkat kesulitan yang sama (satu kolom), tetapi daftar drop-down di input dapat berisi kotak centang. Kami benar-benar ingin daftar drop-down membentuk satu unit dengan input - demi bayangan yang indah.
Anda dapat mengatakan bahwa kemudian Anda harus memasukkan input dengan dropdown di kolom (berikutnya) yang terpisah dan Anda akan benar. Tetapi bagi kami dalam proses itu menjadi jelas tidak segera. Dan sejak konveyor diluncurkan, kami, didorong oleh anggaran dan tenggat waktu, dipaksa untuk melanggar hukum tidak tertulis ini dalam membangun sistem desain atom. Biarkan saya memberi tahu Anda dari pengalaman - tidak ada satu pun desainer atau pengembang yang menderita karenanya.
Kami akan kembali ke pesawat praktis.
Input
Di dalam bingkai 60px, kami menempatkan komponen paragraf sebagai pengganti. Saat input dalam fokus, placeholder akan naik. Kami memberikan indentasi 20 piksel dan menempelkannya ke tepi kiri. Pada batas bawah blok, tambahkan garis 2 piksel (gunakan persegi panjang!), Tempelkan secara vertikal ke Bawah. Horisontal, Anda dapat memilih Skala. Lebih jauh di sisi kanan, dalam situasi yang berbeda, kita dapat memiliki satuan ukuran atau chevron dropdown. Tambahkan keduanya dan yang lain dan rekatkan ke tepi kanan. Sekarang semuanya terentang dengan rapi, dan semua salinan komponen ini mewarisi perilaku orang tua.
Kami menambahkan komponen untuk berbagai status: kursor di atas input kursor, fokus, buka-turun, valid dan tidak valid. Salah satu cara untuk dengan cepat membuat status adalah: mengkloning komponen, tekan opsi + perintah + b, atau “turunan anak” - melalui menu konteks. Kami mengedit apa yang kami butuhkan dan mengubahnya menjadi komponen baru. Jangan lupa ganti nama.
Dengan filter, situasinya mirip dan dengan pengecualian dari keadaan default dan menambahkan tanda silang untuk mereset nilai, mereka tidak berbeda dari input. Lupa - input akan masuk satu demi satu secara horizontal, jadi di tepi kanan kita tambahkan garis abu-abu 2px. Jangan lupa untuk menempelkannya di tepi kanan.
Tombol
Tombol dalam proyek kami terdiri dari dua jenis.
Pertama: tombol biasa yang akan digunakan di mana saja kecuali untuk kartu pratinjau lot. Anatomi mereka adalah ini: bingkai 30 piksel tinggi dengan latar belakang transparan, persegi panjang dengan ukuran yang sama dengan pembulatan 15 piksel (pada panel KENDALA kita mengatur nilai Skala di kedua sumbu) dan komponen btn-txt yang kita luruskan di semua sumbu di tengah (untuk setiap pemadam kebakaran, kami tiba-tiba memutuskan menambah ketinggian tombol?) Dalam komponen terpisah, pilih gaya tombol saat melayang dan yang terpisah untuk menekan.
Jenis tombol kedua harus sesuai dengan gaya kartu pratinjau dan memiliki ikon. Selain fungsi push, tombol juga akan melaporkan melalui penghitung yang diambil dari kolom yang sama (maaf), misalnya, berapa kali tombol telah ditekan.
Kami membuatnya dari segiempat tinggi 60px, lebar akan tergantung pada konten. Kami menyematkan dan memusatkan komponen ikon dan btn-txt pada semua sumbu. Kami memaksakan komponen penghitung pada ikon sehingga sudut kiri bawahnya bertepatan dengan pusat ikon. Tombol-tombol akan disusun satu demi satu, jadi kami menambahkan strip abu-abu 2 piksel untuk pemisahan visual di setiap sisi. Tidak perlu maka matikan di tempat. Dalam hal ini, dalam komponen pratinjau lot.
Kami akan kembali ke tingkat komponen ini, tetapi untuk sekarang lanjutkan.
Topi
Pergi ke kolom baru dan mulai mengumpulkan tajuk.
Kami mengambil bingkai dengan tinggi 60 piksel yang sama tingginya sebagai basis. Di bagian bawah, tambahkan garis abu-abu 2 piksel. Ambil lebar 1440px, karena kami akan mengumpulkan semua templat desktop atas izin ini. Kami sudah mengikuti skema standar: sejajar dengan pusat lekukan vertikal, horizontal 20 piksel, logo, tab menu, pencarian (itu dirangkai secara analogi dengan input pada kolom kedua).
Sisi kanan header harus berisi panel informasi dengan informasi akun saat ini, dan bahkan dengan daftar drop-down. Kami kembali ke kolom sebelumnya dan mengumpulkan barang ini dari ikon dan teks (Anda sudah tahu caranya).
Untuk melihat daftar drop-down pada template apa pun, kami lampirkan dua komponen sekaligus (dropdown terbuka dan tertutup). Satu dimatikan dengan menyodok mata pada panel lapisan. Jangan lupa hapus centang Konten Klip pada panel LATAR BELAKANG.
Selanjutnya, kami menyederhanakan header untuk layar yang lebih kecil dengan memotong yang tidak perlu. Kami bertindak dengan cara yang terbukti. Kami mengkloning, melepaskan, menghapus yang tidak perlu, menambahkan ikon burger, mengganti namanya, mengubahnya menjadi komponen.
Untuk 320 piksel, kita dapat sedikit memindahkan lekukan di antara ikon.
Sekarang saatnya mengatur karet. Untuk melakukan ini, pilih komponen "Header-desktop" kami dan buka LAYOUT GRID. Beralih ke speaker. Jumlah kolom dalam hal ini tidak masalah, yang utama adalah bahwa grid harus (untuk tugas yang berbeda, coba grid yang berbeda) Margin 20 piksel. Selanjutnya, kita mengkonfigurasi perilaku komponen bersarang pada header.
Secara lebih rinci tentang pengaturan karet templat kami akan kirim di bagian kedua artikel ini.
Burger
Setiap kali ketika merancang navigasi untuk burger, kami mulai menemukan kruk, tetapi tidak dalam hal ini. Ternyata kami memiliki semua yang kami butuhkan untuk burger, kecuali tombol tutup. Kami mengumpulkan komponen yang diperlukan dalam banyak dan mengubahnya menjadi komponen baru.
Pratinjau banyak
Buka kartu pratinjau untuk katalog. Pertama-tama, menjadi jelas bahwa Anda perlu membuat komponen terpisah untuk tombol-tombol di tampilan ponsel (sarana gambar tidak memungkinkan Anda untuk memusatkan ikon jika Anda hanya menyembunyikan teks tombol). Kami pergi ke kolom dengan tombol kotak dan menyelesaikan negara untuk layar sempit. Tambahkan kisi tiga kolom.
Untuk kartu itu sendiri, pertama-tama kita buat komponen item baris dan blok dengan informasi dasar. Kami mengelompokkan mereka sehingga rekondisi sederhana dapat mencapai tampilan seluler.
Pada titik ini, agar tidak mengembang artikel yang sudah besar, kami mengambil jeda singkat. Pada bagian kedua, kita akan berbicara tentang bagaimana komponen di atas dikelompokkan bersama dan membentuk templat halaman responsif.
Kami yakin bahwa pendekatan ini masih belum ideal, jadi kami akan dengan senang hati memberikan komentar tentang topik tersebut (terutama jika Anda tahu cara menggunakan angka lebih produktif) - pengalaman Anda akan membantu kami meningkatkan proses bisnis kami. Bulat.