Bagaimana Membuat Panduan Gaya: Mulakan dengan Rangka Kerja UI

Q & A dengan Designer UX AdRoll mengenai mengapa kami melakukannya dan apa yang kami pelajari

Siaran blog ini adalah yang pertama dalam siri yang mencatat perjalanan panduan gaya, dari penciptaannya, untuk menyediakan rangka kerja UI yang matang untuk pasukan kami, dan akhirnya menularkan suara dan nada yang unik untuk produk kami.

Hi! Saya Arya Srinivasan, seorang Penyelidik UX di AdRoll. Saya duduk dengan Mason Lee, seorang Pereka UX yang mengerjakan produk API iklan asal AdRoll, untuk membincangkan karyanya mengembangkan panduan gaya AdRoll.

Arya: Untuk memulakan perkara, mengapa anda memulakan projek panduan gaya? Apakah masalah yang diperlukan untuk menyelesaikannya?

Mason: Masalahnya adalah ketidaksesuaian reka bentuk, di seluruh produk dan dalam satu produk. Contohnya, butang yang sepatutnya kelihatan sama di mana-mana tetapi sebenarnya berbeza mengikut warna, berat font, dan gaya sempadan.

Butang kelihatan berbeza dalam rekaan pereka individu dan aplikasi kami.

Pertumbuhan pesat AdRoll bermakna kami memberi tumpuan kepada kelajuan. Kami kini sebuah syarikat yang lebih besar dengan pelbagai produk, jadi pereka saya percaya penting bagi kami untuk menekankan konsistensi bagaimana kami membentangkan produk kami: melalui reka bentuk.

Untuk menumpukan pada reka bentuk, kita perlu terlebih dahulu menetapkan ketidakkonsistenan yang ada. Pereka UX di sini biasanya memberi tumpuan kepada satu atau dua produk, jadi untuk mendapatkan pasukan kami untuk berfikir tentang reka bentuk merentas semua produk, saya mengadakan mesyuarat "Smackdown UI" mingguan untuk membincangkan garis panduan UI.

Dalam setiap mesyuarat, kami melihat ketidakkonsistenan reka bentuk untuk membuat keputusan mengenai reka bentuk tunggal. Selepas beberapa mesyuarat, pereka masih bertanya tentang warna atau padding yang betul, dan lain-lain. Kami memerlukan dokumen pusat dengan semua jawapan, jadi saya membina Rangka Kerja UI kami dalam lakaran sebagai sumber untuk pereka. Apabila kita sedar ada komponen yang hilang atau ingin memasukkan komponen baru, kita membincangkannya dan menambahnya kepada fail Rangka Kerja UI induk.

Arya: Anda menyebutkan anda mahu AdRoll menjadi syarikat sentris reka bentuk - apa maksud anda dengan itu?

Mason: Saya mahu AdRoll meletakkan reka bentuk di barisan hadapan supaya ia adalah pembeza kompetitif - diiktiraf oleh pelanggan sebagai produk yang direka dengan baik yang benar-benar menyelesaikan keperluan mereka.

Arya: Apakah matlamat segera anda untuk panduan gaya? Adakah anda mempunyai visi jangka panjang untuk projek ini?

Mason: Matlamat jangka pendek saya ialah untuk mewujudkan konsistensi reka bentuk antara pereka dengan menyeragamkan komponen UI kami. Saya mahu pereka untuk bercakap bahasa yang sama apabila bercakap reka bentuk. Contohnya, dalam modal atau jatuh turun, jurutera membina berdasarkan bagaimana perancang itu mencadangkan. Jika elemen reka bentuk berbeza antara pereka, jurutera akan membuat elemen yang sama dengan cara yang berbeza.

Matlamat jangka menengah saya adalah untuk mempunyai gaya ini ditakrifkan dalam kod kami dalam "RollUp," perpustakaan komponen UI dalaman AdRoll. Jika kita mempunyai lembaran gaya yang telah ditetapkan, semua jurutera kita perlu lakukan adalah menyalinnya. Pereka dan jurutera boleh bercakap bahasa yang sama.

Arya: Adakah anda menghadapi sebarang masalah semasa membuat panduan gaya? Bagaimana anda menyelesaikannya?

Mason: Salah satu halangan terbesar ialah mendapatkan pembelian dari orang di seluruh pasukan produk. Untuk mendapatkan semua orang yang terlibat, saya membuat satu mesyuarat dengan senarai item agenda yang jelas untuk ditutup. Saya membentangkan ketidakkonsistenan reka bentuk, seperti menu dropdown yang berbeza antara produk. Memberi bukti visual mencetuskan perbualan, dan pada akhirnya, orang mengambil berat tentang produk mereka dan mahu konsistensi.

Satu lagi cabaran adalah menentukan peraturan. Apabila bercakap mengenai penyeragaman komponen, ia mesti terpakai di mana sahaja, dalam setiap konteks. Anda perlu memikirkan setiap kes tepi. Komponen perlu fleksibel, tetapi pada masa yang sama ciri-lengkap cukup supaya ia mudah digunakan, boleh digunakan, dan terpakai.

Berikut adalah contoh fleksibiliti panduan gaya kami. Keputusan awal kami untuk padding dalam dropdown geotargeting ini terlalu besar, jadi kami merevisi panduan gaya untuk memperhitungkan kes penggunaan ini.Sebelum (kiri), Selepas (kanan)

Saya sebenarnya mahu memanggil satu lagi cabaran! Penamaan boleh menjadi sukar. Seperti yang saya katakan sebelumnya, saya mahu pereka dan jurutera untuk bercakap bahasa yang sama, tetapi ini perlu dilakukan dengan teliti. Untuk sesuatu semudah dropdown, kita sebenarnya mempunyai beberapa variasi (satu dengan kotak pilihan, satu lagi dengan kotak pilihan dan blok teks, dan satu lagi ialah menu lungsur standard). Bagaimanakah kita menamakan tiga dropdown yang berbeza sehingga ada pemahaman sejagat yang mana?

Semantik ini mencabar; penamaan kami perlu masuk akal. Kami menggunakan beberapa alat kerjasama yang hebat untuk mendapatkan konsensus apabila kami membuat keputusan atas nama. Misalnya, Wake membantu kami mengumpul semua soalan dan isu terbuka, membincangkan penyelesaian, memantau keputusan Smackdown UI, dan meneruskan perbualan dengan pasukan produk yang lebih besar melalui integrasi dengan Slack.

Bagaimana kami menggunakan Wake untuk membincangkan ketidakkonsistenan UI dan bekerjasama dengan peraturan komponen.

Arya: Adakah terdapat sesuatu yang unik mengenai UI AdRoll, yang perlu anda pertimbangkan semasa membuat panduan gaya?

Mason: Papan pemuka kami sangat berat data. Di samping itu, aliran penciptaan kempen memberikan pengiklan banyak sekumpulan tuas untuk menarik. Untuk memenuhi keperluan pengiklan kurang berpengalaman, kami berhasrat untuk menetapkan tetapan lalai yang berkesan. Dalam produk kami, komponen mempunyai fungsi yang kompleks tetapi kelihatan mudah dan mudah digunakan.

Arya: Adakah terdapat beberapa perkara yang anda ingin tahu apabila anda mula membuat panduan gaya?

Mason: Saya harap saya mempunyai pemahaman yang lebih mendalam tentang bagaimana semua produk kami berfungsi dari awal. Sebagai contoh, kami berkongsi bagaimana kerja produk masing-masing dalam mesyuarat kritikan reka bentuk mingguan kami, jadi saya tahu bagaimana SendRoll (produk tafsiran e-mel kami) berfungsi di permukaan, tetapi saya tidak mempunyai pengetahuan yang mendalam mengenai SendRoll bahawa pereka itu tidak. Saya fikir pemahaman yang berorientasikan tentang produk itu pasti membantu ketika bekerja pada panduan gaya, kerana saya kemudian mempunyai pemahaman yang lebih baik mengenai kes-kes penggunaan yang berpotensi.

Arya: Jadi apakah cara terbaik untuk mencapai pemahaman umum tentang proses pereka dan produk mereka?

Mason: Walaupun kami benar-benar menumpukan pada penghantaran produk kami, kami melakukan kerja yang baik untuk berkongsi proses reka bentuk kami dalam mesyuarat kritikan reka bentuk mingguan kami. Saya fikir kita boleh menjadi lebih baik untuk menutup gelung selepas setiap mesyuarat - bagaimana pereka bentuk memasukkan maklum balas daripada mesyuarat itu? Setelah produk dihantar dan digunakan oleh pengiklan kami, kami juga dapat membagikan bagaimana pengiklan menggunakan produk berdasarkan pandangan dari analisis.

Arya: Adakah terdapat apa-apa sumber yang anda sebut semasa mengendalikan projek ini?

Mason: Saya membaca Reka Bentuk Atom oleh Brad Frost, meneliti secara dalam talian, dan bercakap dengan pereka UX lain di MeetUps. Sekiranya anda berfikir bahawa syarikat tertentu mengamalkan reka bentuk yang baik, maka ia sangat mungkin mereka telah membincangkan tentang panduan gaya mereka di suatu tempat dalam talian.

Arya: Apakah status panduan gaya kami?

Mason: Saya telah menangkap dan menyemak semua elemen UI yang kami gunakan dalam produk kami yang berbeza dan mengagihkannya ke asas, komponen, corak, dan halaman, yang akan menjadi sumber kebenaran untuk reka bentuk UI kami.

Anda boleh menyemak elemen asas dan komponen UI pada Dribbble. Jika anda sudah biasa dengan Reka Bentuk Atom, saya mengelompokkan tahap "atom" dan "molekul" ke dalam apa yang saya sebut "komponen". Sebagai contoh, menggabungkan tajuk bentuk dan input menjadikannya mudah bagi pereka lain untuk menyalin dengan mudah borang yang lengkap bidang.

Terima kasih untuk membaca!

Lihatlah topik-topik yang akan datang ini semasa kami membangunkan panduan gaya kami:

  • Bagaimana Rangka Kerja UI memudahkan kerjasama
  • Membangunkan gaya baru berdasarkan Rangka Kerja UI
  • Bagaimana untuk membina laman web Panduan Gaya
  • Perjalanan untuk mencari Suara dan Nada kami