Bentuk dalam talian adalah salah satu bidang pembangunan laman web yang paling sukar untuk dilakukan dengan betul, terutamanya dengan banyak perkara yang boleh menjadi salah. Perubahan sifat bagaimana orang mengakses kandungan dalam talian juga memberi kesan kepada teknologi yang dikembangkan bertahun-tahun sebelum orang diharapkan dapat menggunakan telefon seperti yang biasa mereka lakukan hanya dengan komputer. Ini adalah teknologi yang mengalami sedikit evolusi.
Reka bentuk borang web harus menjadi profesion yang berdiri sendiri. Pereka laman web harus menggunakan perkhidmatan pereka bentuk web profesional sepenuh masa untuk membantu mereka dalam tugas mereka. Tetapi ini tidak dilihat cukup ekonomik, dan oleh itu selalunya perancang laman web ini juga bertanggungjawab untuk reka bentuk apa pun bentuk yang digunakan di laman web ini.
Tetapi mereka bentuk borang adalah kemahiran yang sangat khusus. Ia memerlukan pemahaman bagaimana orang berinteraksi dengan information dan memahami cara terbaik untuk mengumpul dan membentangkanformation. Di mana reka bentuk web umum tertumpu terutamanya pada persembahanformation dan imej dalam cara yang menarik tetapi praktikal, reka bentuk bentuk menuntut kita menumpukan perhatian kita pada sifat dalamformation dan kemudian tentukan cara terbaik untuk menstrukturkannya pada halaman supaya ia berfungsi seperti yang dimaksudkan. Estetika adalah pertimbangan yang kurang penting dalam kes ini, tetapi masih tidak sepatutnya untukgotten.
Dalam artikel ini kita akan melihat seni reka bentuk borang web, dan melihat apakah kita dapat mencari cara untuk menjadikan bentuk web kita lebih pintar baik dari segi penampilannya dan bagaimana ia berfungsi.
Alat pembinaan borang web
Alat standard yang telah kami berikan oleh pembangun penyemak imbas dan W3C untuk menyatukan borang web kami tidak begitu tepat, dan sebelum menerapkan CSS kepada mereka, mereka sebenarnya agak mengerikan. Ini seperti apa:
Terdapat juga kawalan input standard lain yang dipanggil pilih, tetapi anda harus mengelakkan penggunaan ini kecuali menjimatkan ruang menjadi perhatian serius. Terdapat cara yang lebih baik untuk menangani tugas yang dilakukan oleh kawalan pilih, seperti yang akan kita bincangkan kemudian. Pengendalian textarea juga harus dielakkan apabila mungkin kerana ia sangat bermasalah dan antiquarian.
Sebagai tambahan kepada item input standard ini, ada juga yang baru khas yang dibuat untuk HTML5. Kecuali apabila dokumen sedang dipersiapkan dengan ketat untuk penggunaan dalaman dan di mana persekitaran penyemak imbas diketahui, hanya komponen yang berfungsi di Firefox dan Chrome yang harus digunakan. Ada baiknya jika komponen juga berfungsi di penyemak imbas lain, tetapi tidak seharusnya hanyalah bekerja di penyemak imbas lain. Berikut adalah komponen HTML5 seperti yang terdapat di Firefox:
Dan penampilan mereka yang sedikit berbeza di Chrome:
Sekarang, jelas sangat penting untuk menyedari bahawa input HTML5 anda akan kelihatan dan berfungsi secara berbeza antara Chrome dan Firefox, tetapi ia tetap berfungsi. Kawalan input standard juga kelihatan lebih bagus di Chrome daripada di Firefox. Perhatikan bahawa Chrome mengenakan standard tarikh Amerika Utara, yang mungkin tidak dihargai oleh pengguna. Juga versi Chrome kawalan tarikh menjadikannya tidak sesuai untuk paparan, dan hanya boleh digunakan untuk input. Penambahan pemilih tarikh adalah peningkatan utama dalam Chrome, tetapi kita mungkin boleh melihatnya pada versi Firefox yang akan datang.
Oleh kerana Firefox adalah sumber terbuka, anda sebenarnya dapat membuat versi Firefox peribadi anda sendiri memberikan input dengan cara yang sama seperti yang dilakukan oleh Chrome dengan memuat turun kod sumber penyemak imbas Chromium sumber terbuka yang menjadi asas Chrome, dan memindahkan bahagian kod yang relevan ke sumber Firefox kod (tetapi kemudian anda harus melakukannya setiap kali anda menaik taraf Firefox ke versi baru).
Perkara utama adalah, bagaimanapun, walaupun dengan peningkatan Chrome, penampilan lalai kawalan input adalah kecil dan tidak menarik. Terdapat beberapa kawalan lain yang tersedia, tetapi kerana ia tidak berfungsi di Chrome dan Firefox, mereka tidak boleh digunakan di laman web yang ditujukan untuk orang ramai.
Jawapan Bootstrap (hampir mencukupi)
Bootstrap menerapkan gaya pada kawalan standard yang meningkatkan penampilannya hingga tahap tertentu. Tetapi kerana falsafah reka bentuk berpusatkan mudah alih Bootstrap, ia menyebabkan beberapa kesan yang tidak diingini pada bentuk yang tidak dimaksudkan untuk ditampilkan sebagai satu lajur, dan menjadikan medan input pendek kelihatan lucu apabila merangkumi keseluruhan lajur secara lalai. Dunia mungkin bergerak dengan mudah, tetapi borang tidak dicipta dengan mempertimbangkan pengguna mudah alih.
Bootstrap memperluas kawalan untuk mengisi lebar mendatar dari wadahnya, yang bermaksud semua kawalan akan mempunyai lebar yang sama sama ada anda suka atau tidak (kecuali jika anda secara manual mengatasi tingkah laku ini), dan membolehkan anda menggayakan beberapa jenis kawalan dengan tambahan. Penyelesaian Bootstrap elegan dan mengatasi beberapa masalah kawalan yang mempunyai penampilan yang berbeza di penyemak imbas yang berbeza, tetapi hanya berfungsi dengan kawalan standard. Kawalan HTML5 tidak dilaksanakan dalam versi Bootstrap semasa, jadi anda harus menggayakannya sendiri.
Bootstrap juga membolehkan anda menggabungkan kawalan bersama. Kadang-kadang ini bagus dan kadang-kadang tidak begitu baik. Menggabungkan input teks dengan butang dan kotak centang mungkin terlihat bagus, tetapi dapat membingungkan pengguna mengenai bagaimana mereka harus berinteraksi dengan kawalan yang tidak dikenali.
Apa yang disediakan oleh Bootstrap adalah dua peranti pembinaan bentuk kegemaran saya, iaitu panel dan juga baik. Ini sangat berguna untuk mengelompokkan data bentuk untuk memberikan petunjuk visual data mana yang terkait dengan data lain, dan juga untuk memisahkan data.
Bangunan Bentuk Pintar 101
Kini kami bersedia untuk memikirkan bagaimana borang boleh dibina dengan cara yang lebih bijak. Untuk melakukan ini, kita perlu berfikir dengan baik melepasi lalai. Kita perlu sedar tentang desktop-akar terikat kawalan borang, dan juga keperluan untuk keserasian mudah alih. Dan kita perlu mengambil berat tentang perkara seperti kebolehgunaan dan pengesahan (jika borang itu akan digunakan untuk pengumpulan data).
Perkara terakhir itu bagus, kerana sementara kawalan borang digunakan untuk mengumpul input, ia juga digunakan untuk memaparkan data yang disimpan. Rata-rata pengguna web (dan sepatutnya) lebih berminat untuk masukformation daripada anda daripada mengalahformation kepada anda.
Pengumpulan data adalah mudah. Orang akan mengisi apa sahaja yang anda simpan di hadapan mereka, walaupun keadaan itu berantakan. Tetapi ketika memaparkan data, mereka lebih cerewet. Oleh itu, kita akan lebih memfokuskan pada penggunaan borang untuk memaparkan data daripada mengumpulkannya, kerana paparan memerlukan lebih banyak perhatian dan lebih banyak "kecerdasan."
1. Adakah kita memerlukan borang?
Sebelum membina borang, kita harus memastikan bahawa kita benar-benar memerlukannya. Sekiranya data dapat ditunjukkan dengan cukup dan tidak membingungkan sebagai tabel, jadual biasanya akan lebih efisien dan praktikal.
Borang perlu jika:
- Kami mengumpulkan input dari pengguna
- Kami mempunyai banyak data untuk dipaparkan
- Data perlu dibahagikan dengan jelas
- Pengguna cenderung mengakses data dari peranti mudah alih
Sekiranya salah satu daripada item di atas tidak benar, maka tidak perlu menggunakan borang, dan jadual akan mencukupi. Cabaran yang kami hadapi dengan keserasian mudah alih adalah bahawa jadual dan borang tidak sesuai dengan paparan mudah alih. Fakta bahawa pereka telefon pintar memberi pilihan kepada pengguna mereka untuk menggunakan penyemak imbas dalam orientasi potret dan bahawa kebanyakan pengguna lebih suka memegang telefon mereka dengan cara itu menyebabkan sebahagian besar masalah keserasian mudah alih harus dihadapi oleh pereka laman web.
Walau apa pun, borang lebih mudah disesuaikan dengan paparan mudah alih daripada jadual. Oleh itu, jika anda benar-benar mesti memastikan bahawa semua data dapat dilihat dengan mudah pada paparan mudah alih, maka borang adalah pilihan yang lebih baik daripada jadual ... kadang-kadang!
2. Reka bentuk desktop susun atur
Memang benar bahawa secara amnya anda seharusnya merancang susun atur mudah alih terlebih dahulu, tetapi dalam bentuknya, itu bukan kaedah terbaik, kerana kita perlu mengetahui bagaimana data akan dikelompokkan, dan kita hanya dapat melakukannya jika kita dapat melihat semua bidang sekaligus, yang merupakan sesuatu yang tidak dapat dilakukan pada telefon bimbit melainkan anda memaparkan data yang sedikit sehingga kami tidak perlu bersusah payah merancang borang.
Cara terpantas untuk membuat reka bentuk borang adalah dengan InkScape. Dalam contoh ini, kami akan membina sistem untuk mengurus rekod HR. Berikut adalah mock up untuk desktop prototaip:
Segi empat tepat di luar mewakili keseluruhan ruang paparan 1024 x 768 px. Pada mana-mana desktop penyemak imbas, kami tidak mempunyai akses kepada piksel sebanyak itu melainkan pengguna berada dalam mod skrin penuh (yang jarang berlaku). Jadi kami
reka bentuk ialah 900 x 600px, yang sepatutnya muat dalam kebanyakan kawasan yang tersedia desktop Skrin.
Apabila luas yang tersedia kurang dari 900px, lajur 2 x 450px kami akan pecah dan muncul sebagai satu lajur 450px berterusan. Ini menyelesaikan masalah keserasian mudah alih, sekurang-kurangnya sehingga Google menuntut kami menjadikan semua laman web kami dapat dipasang di skrin jam tangan.
Anda akan melihat bahawa sebahagian besar paparan hanya terdiri dari kotak input biasa, yang mungkin kelihatan membosankan, tetapi pada kenyataannya hampir selalu merupakan kaedah terbaik untuk melakukannya. Perhatikan juga penggunaan fon lebar tetap. Ini membantu mengekalkan keseragaman dalam reka bentuk bentuk.
Lajur kami sebenarnya akan sedikit lebih daripada 450 piksel, lebih kurang 600 piksel masing-masing, tetapi jika kita mahu memaksa lebar lajur menjadi kira-kira 450 piksel, kita hanya mengurangkan ukuran lajur kita dari 6 hingga 5. Tetapi lajur 600 piksel harus sesuai pada skrin mudah alih dalam mod potret tanpa membungkus.
Kami akan menguji susun atur kami dengan kod ini:
Dan kita dapat melihat bahawa semuanya kelihatan baik (kerana buat sementara waktu kita menambah sempadan untuk menunjukkan kepada kita).
Widget pembaris skrin Linux jelas bukan merupakan bagian dari laman web, tetapi ada untuk menunjukkan bahawa lajur kami tidak akan pecah dengan teruk pada paparan yang lebih kecil. Mari apa yang berlaku pada lebar skrin biasa yang berbeza:
3. Membuat ukuran input dan kedudukan label tersuai
Sekiranya kita membiarkan semuanya lalai, tanpa menambahkan CSS tersuai, inilah yang akan berlaku apabila kita menambahkan baris kawalan input pertama kita:
Ini berlaku kerana label untuk setiap input lalai di sebelah kiri input, dan kerana kami belum menetapkan lebar khusus untuk kawalan input. Kami dapat menyelesaikan kedua-dua masalah dengan CSS.
Sekarang kita hanya menetapkan sifat paparan elemen label ke "blok", tetapkan bidang Pertama dan Terakhir ke kelas "in40w", dan medan MI ke kelas "in10w", dan semuanya akan kelihatan lebih bagus.
Seperti yang anda lihat, ia kelihatan lebih baik, tetapi susun aturnya tidak lagi betul. Sekarang kotak itu disusun. Jadi bagaimana kita memperbaikinya dengan menghilangkan idea menggunakan elemen label sama sekali, kerana kita tidak begitu memerlukannya. Kami hanya akan menggunakan dalam40w and dalam10w kelas, ditambah membuat kelas baru yang dipanggil dalamLeftOf.
Yang, setelah digunakan, dapat menyelesaikan masalah yang kita lihat sebelumnya, seperti ini:
Tetapi ini tidak meninggalkan ruang yang cukup untuk bidang SSN. Ini kerana lajur kiri kami lebih besar dari yang dijangkakan, jadi 40% sebenarnya lebih banyak ruang daripada yang kami perlukan untuk bidang ini, jadi kami dapat memotongnya menjadi dalam30w, dan medan tengah lebih besar daripada yang diperlukan, jadi kita dapat membuatnya dalam5w. Inilah yang berlaku:
Jadi sekarang ada lebih banyak ruang untuk menambah bidang SSN, yang melengkapkan baris pertama borang input kami. Setelah melengkapkan semua butiran ini, membina lajur kiri yang lain semestinya sangat mudah. Kita dapat menyingkirkan sempadan sementara sekarang, dan juga menerapkan latar belakang yang betul pada lajur. Inilah bahagian paling atas panel, sebelum kita sampai ke kawasan khas borang:
Beberapa perkara telah berlaku pada peringkat ini. Yang pertama adalah bahagian mudah untuk menetapkan warna latar untuk lajur (rgb (235,235,246)), dan walaupun Anda tidak dapat melihatnya di sini, warna teks untuk semua input telah ditetapkan ke # 427DB4, dan bobot font ditetapkan untuk berani sehingga dapat mengurangkan ketegangan mata. Teks tersebut diatur untuk secara otomatis berubah menjadi huruf besar menggunakan properti transformasi teks CSS, sehingga dapat mempercepat kemasukan data dan mengurangi kesalahan.
Masalah yang lebih rumit dalam menyelaraskan kawalan dan memastikan mereka menjaga penjajaran yang layak pada jenis paparan mana pun memerlukan lebih banyak pemikiran. Anda sudah melihat teknik yang digunakan untuk input pertama dan labelnya. Teknik ini akan berfungsi apabila tidak perlu ada jarak tambahan antara input, tetapi jika kita perlu menambahkan ruang, maka lebih baik menggunakan teknik lain.
Teknik lain ini melibatkan penciptaan baris lajur bersarang di dalam lajur utama kami, yang akan membantu mengekalkan jarak kawalan yang betul. Bilangan lajur dan saiznya berubah bergantung pada keperluan setiap set kawalan. Ingat semuanya ada responsive, jadi apabila lajur diubah saiz, segala-galanya di dalam lajur akan cuba mengubah saiz agar sepadan dengan perubahan. Ini adalah berita baik untuk pengguna cacat penglihatan, kerana mereka boleh mengezum pembesaran pada paparan mereka dan semuanya akan disusun dengan betul seperti mana-mana pengguna lain.
Melangkah ke bahagian lajur kiri yang lebih kompleks, konsep asalnya yang digariskan dalam mock-up memerlukan struktur yang sukar dilaksanakan. Nasib baik saya menyedari data pada panel hak dapat digandakan jika kotak centang standard digunakan, dan ini menyelesaikan masalah kerumitan susun atur dengan baik:
Panel pemetik api di sekeliling bahagian khas hanyalah telaga Bootstrap biasa. Untuk memasukkan data agama, anda perlu memilih daripada senarai set agama rasmi yang dipratentukan (termasuk โlain-lainโ). Membangunkan lajur sebelah kanan adalah lebih mudah, dan hanya menggunakan teknik yang sama daripada set kawalan pertama pada lajur kiri, mengatur kawalan dalam jadual format, tetapi tanpa menggunakan jadual.
Untuk projek ini berjaya, ia perlu menyediakan yang sempurna responsiveness pada semua saiz paparan rasmi. Mari lihat bagaimana hasilnya. Pertama dengan versi resolusi penuh:
Itu cukup dekat dengan prototaip yang kita boleh berpuas hati dengannya. Malah, ia juga satu peningkatan. Sekarang mari kita lihat responsive reka letak pada setiap bahagian halaman yang berbeza:
Bootstrap dan HTML5 telah menjadikan pembangunan borang lebih pantas dan lebih mudah berbanding sebelum ini, tetapi banyak pembangun menjejaskan kemajuan ini dengan menjadikan borang terlalu rumit (menggunakan elemen borang HTML5 khas hanya kerana ia ada untuk digunakan dan bukannya kerana ia diperlukan untuk projek ), dan dengan mencipta bentuk satu dimensi sepenuhnya yang tidak cuba memanfaatkannya responsive reka bentuk. Dengan hanya sedikit penjagaan dan kerja tambahan, sebarang data boleh dibuat supaya kelihatan lebih rapi pada sebarang saiz skrin.
Anda mungkin mendapat beberapa gangguan kecil pada ukuran layar terkecil dalam susun atur potret pada ukuran layar terkecil (dalam kes projek ini, medan Permulaan Tengah pada baris pertama sedikit lebih kecil daripada yang ideal), tetapi pengguna mudah alih umumnya terima bahawa ini adalah pertukaran yang harus mereka buat kerana tidak memegang telefon mereka dengan betul.
Lakukan dengan betul, dan borang data anda boleh kelihatan seperti ini:
Daripada, eh, ini:
gambar header milik
Komen-komen Responses 0