Merancang Tata Letak UI Killer Dengan Freebies - Panduan Terbaik
Bidang reka bentuk web telah mengambil nafas sendiri dalam hanya beberapa tahun yang singkat. Terdapat pereka yang lebih aktif di seluruh dunia sekarang berbanding sebelum ini, semua bekerjasama dengan idea projek yang inovatif. Dan konsep di sebalik banyak trend ini telah dibangunkan melalui pereka grafik profesional.
Ia boleh mengambil masa berbulan atau bahkan bertahun-tahun sebelum anda memahami sepenuhnya ciri-ciri bangunan antara muka pengguna. Anda perlu mempertimbangkan saiz dan penempatan elemen halaman, juga pembacaan teks dan label. Dengan sedikit masa luang, anda boleh menggali pendekatan minimalis untuk membina laman web dengan kurang dan mengurangkan kekeliruan. Dan walaupun begitu, ada banyak lagi teknik rekaan yang lain untuk dipertimbangkan.
Untuk panduan ini, saya telah menyambung beberapa teknik reka bentuk antara muka pengguna moden dengan percuma boleh dimuat turun dan bermain dengan. Adalah harapan saya bahawa ini akan memberi motivasi kepada mereka yang berminat dalam kerjaya dalam membina grafik / reka bentuk web. Malah pereka web profesional mungkin mendapati beberapa trend ini membantu projek anda yang seterusnya.
Berlatih dengan Templat Penuh
Apabila anda mempunyai kemahiran untuk merancang susun atur anda sendiri dari awal, tidak perlu memulakan templat. Para pemula, sebaliknya, mungkin merasa lebih selesa bermula dari reka bentuk penuh dan bekerja dalam butiran lebih halus.
Terdapat beberapa muat turun percuma laman web template PSD yang lengkap untuk portfolio, halaman utama, blog, dan banyak lagi kategori lain. Ini adalah reka bentuk yang sempurna untuk memulakan untuk membiasakan diri dengan “umum” susunatur web. Setiap laman web akan mempunyai keperluan yang berbeza untuk elemen halaman dan anda perlu menentukan item yang penting.
Berikut adalah contoh JPA yang dipanggil "AppCivilization", yang direka oleh Martin Fabricius. Tataletak dipaparkan untuk studio kreatif yang mereka bentuk aplikasi mudah alih dan kemungkinan tapak web. Ke arah bawah, anda akan dapati panel kecil ikon aplikasi yang dipamerkan dalam portfolio. Anda juga akan melihat keseluruhan reka bentuk dipecah secara mendatar ke dalam tajuk, tayangan slaid atas, kandungan utama, dan kaki gelap.
Sumber Asal - Muat Turun
Merancang Halaman Pendaratan
Mari lihat pada freebie lain yang juga direka oleh Martin. Contoh berikut adalah halaman pendaratan yang boleh anda gunakan untuk menjual semua jenis produk. Umumnya ini adalah barangan digital yang boleh dimuat turun oleh pengguna iaitu aplikasi, foto, ikon, template dan lain-lain.
Sumber Asal - Muat Turun
Tetapi bahagian terbaik reka bentuknya adalah bahawa ia sangat fleksibel untuk pemula untuk bekerja di sekitar. Pengepala masih menggunakan navigasi atas kecil dengan imej yang besar, tetapi terutama tindakan pengguna yang diharapkan adalah berbeda. Dia mempunyai yang besar “Belilah itu!” butang yang menonjol di atas lipatan. Pada halaman pendaratan produk ini akan menarik lebih banyak perhatian daripada tayangan slaid jQuery.
Satu lagi teknik UI yang hebat adalah paparan ciri iPhone kecil di tengah-tengah halaman. Martin termasuk pukulan pratonton iPhone, butang App Store, dan senarai kecil ciri utama. Apabila pelawat mencari butiran produk anda tidak dapat membuat perkara lebih mudah daripada melalui senarai diformat.
Lebih banyak templat:
Berikut adalah beberapa templat JPA percuma yang kami keluarkan di pas:
- Templat JPA Laman Web "BiZ"
- Templat PSD Tapak "ThinkJuice"
- Templat PSD Tapak Perniagaan Profesional
- Templat PSD Tapak "Polo360"
Anda mungkin juga berminat dengan perkara berikut:
- Templat laman web perniagaan
- Tutorial halaman + "Segera hadir"
Navigasi Laman Utama
Menu dan butang hanyalah alat untuk membina elemen halaman yang lebih besar. Tidak dinafikan bahawa navigasi utama laman web anda mempunyai tujuan yang sangat penting. Anda memerlukannya untuk laman web anda mudah diakses dengan kaedah jatuh balik mungkin untuk pengguna mudah alih.
Berikut adalah bar navigasi sejuk dengan kesan tekstur jahitan. Gaya kemuncak boleh dipaparkan sebagai kotak gelap atau sebagai hujung ke bawah yang menunjuk ke kandungan halaman. Gaya ini telah menonjol sejak bertahun-tahun dan kelihatan hebat dalam persekitaran yang betul.
Sumber Asal - Muat Turun
Satu lagi freebie serupa adalah navigasi header bertekstur yang direka oleh Edi Gil. Saya sangat suka bagaimana navbar kedua ini termasuk kedua-dua senarai pautan dan beberapa butang halaman tambahan. Anda akan mahu menawarkan pautan sekunder kepada pengunjung di mana mereka boleh mencari profil anda di seluruh Web.
Sumber Asal - Muat Turun
Gaya Menu Alternatif
Selain daripada bar navigasi mendatar biasa terdapat gaya reka bentuk lain yang perlu dipertimbangkan. Pautan menegak boleh dibahagikan kepada sub-tajuk yang berbeza yang meninggalkan lebih banyak ruang untuk kandungan halaman.
Ambil contoh menu freebie di bawah yang direka oleh laman web Icojam.
Setiap tajuk dibina untuk mengembangkan dan runtuh berdasarkan objek yang dipilih. Di samping itu, reka bentuk membolehkan kaunter nombor kecil untuk duduk di sebelah kanan setiap kategori. Ini sebaiknya dipenuhi sebagai pelayaran blog untuk mengira berapa banyak siaran yang difailkan di bawah setiap topik.
Sumber Asal - Muat Turun
Petua / Tutorial navigasi:
- 50+ Skrip Navigasi Berbeza CSS Bersih
- Breadcrumb Navigation Best Practices & Examples
- Membina Navigasi Bergerak dengan jQuery
- Pengekodan Navigasi Breadcrumb Dalam CSS3
- Merancang Navigasi Dengan CSS Kurang
Borang Web Bersih
Umur moden Internet adalah jauh dari tempat pertemuan statik. Pengguna sentiasa berkongsi maklumat dan berinteraksi antara satu sama lain setiap hari. Kebanyakan teks dan perkongsian media ini diuruskan melalui borang web.
Kita harus melihat hanya beberapa contoh bagaimana anda boleh merancang input dan butang bentuk yang kelihatan bersih. Reka bentuk elemen anda boleh pergi jauh ke arah menjemput pengunjung anda untuk benar-benar menggunakannya. Dan ini seterusnya membina kredibiliti laman web anda dan mengumpulkan lebih banyak paparan halaman.
Log Masuk
Terdapat beberapa contoh besar borang login JPA untuk diperiksa. Ini freebie log masuk melalui Ahli sains WP mempunyai semua elemen standard anda. Dua medan input untuk log masuk / kata laluan, butang hantar, dan tandakan kotak untuk mengurus kuki sesi.
Reka bentuk model ini sempurna jika anda boleh melaksanakan kesan melalui jQuery. Kepala panah kanan atas menjadikan anda memikirkan setup tetingkap gaya popup. Ini adalah teknik yang indah untuk menjimatkan ruang pada laman web anda dengan mengekalkan bentuk tersembunyi sehingga pengguna mengklik pautan pendaftaran.
Sumber Asal - Muat Turun
Borang di bawah adalah percuma untuk dimuat turun terima kasih kepada pereka Gil Huybrecht. Dia menggunakan corak yang sama dengan latar belakang kasar dan tekstur kertas. Apa yang saya sukai terutamanya mengenai reka bentuk Gil ialah elemen "besar". Pendaratan lebih baik pada borang login yang mengisi keseluruhan halaman. Pengguna dapat melihat dengan mudah apa yang mereka menaip dan ada kekurangan.
Sumber Asal - Muat Turun
Jika anda berpengalaman sebagai pemaju frontend menggunakan CSS3 maka sangat mudah untuk menterjemahkan grafik ini ke dalam kod. Anda juga boleh melaksanakan kesan cahaya luar yang terpilih dan sudut bulat untuk medan butang dan input.
Kenalan
Borang lain yang anda dapati pada hampir setiap laman web ialah borang hubungan. Ini biasanya akan merangkumi bidang untuk nama, e-mel, dan kandungan mesej penghantar.
Freebie di bawah adalah contoh hebat menggunakan tekstur dan ikon tersuai.
Reka bentuk juga menggunakan teks pemegang tempat bukan label. Ini bermakna apabila borang pertama dimuatkan setiap medan ditetapkan dengan nilai lalai (ex: nama anda). Tetapi kemudian ketika anda mula menaip pemegang tempat kosong dan kandungan anda dipaparkan sebagai gantinya. Semua pelayar mematuhi piawaian akan menyokong kesan ini dan ia boleh menjimatkan ruang pada halaman.
Sumber Asal - Muat Turun
Satu lagi freebie yang menarik untuk dimuat adalah borang hubungan berbentuk tab yang direka oleh berbakat Jonno Riekwel. Reka bentuk ini lebih mudah dan mempunyai label ciri di atas setiap masukan. Ini adalah penyelesaian yang baik untuk perniagaan yang lebih besar atau pemula yang perlu menghantar mesej bersama menerusi pelbagai jabatan di syarikat.
Sumber Asal - Muat Turun
Tutorial Borang Hubungi:
- Borang Masuk / Pendaftaran: Idea dan Contoh Cantik
- Buat Borang Masuk Kesan Stacked-paper
- Buat Borang Perhubungan HTML5 / CSS3 Berbasis Ajax
Reben dan Banner
Hanya 6 atau 7 tahun yang lalu bulat-bulat sudut mula meningkat dalam trend reka bentuk yang popular. Kini kami telah datang lebih jauh dengan bayang-bayang drop dan reben sudut.
Sumber Asal - Muat Turun
Beberapa elemen ini boleh digunakan sebagai kemuncak reka bentuk, seperti kaunter ulasan atau sebagai tarikh penerbitan blog. Ribbon di atas adalah sempurna untuk portfolio atau halaman projek di mana anda ingin menarik perhatian pengunjung anda. Anda juga boleh mencuba reben menegak yang sama di mana reka bentuk jatuh dari bahagian atas.
Kesan-kesan halaman kecil ini pergi jauh untuk meningkatkan susun atur anda. Pengunjung mengambil perhatian dan akan menyukai tempat-tempat menarik estetika ini. Tetapi anggap bahawa riben sudut kecil hanya sebahagian daripada trend reka bentuk ini.
Sumber Asal - Muat Turun
Selain itu reka bentuk sepanduk penuh telah menjadi sangat popular untuk membina pengiktirafan jenama. Anda boleh menggunakannya dalam logo, navigasi, laman utama, atau bahkan pada catatan blog yang ditampilkan. Implikasi ini hampir tidak terbatas dengan keupayaan reka bentuk yang baik.
Membungkus Sudut
Satu lagi kesan spanduk reben yang sangat spesifik dilakukan dengan membungkus reka bentuk di sekitar sudut halaman anda. Ini membina ilusi laman anda menjadi 3-D dan riben itu dibalut bahagian atas laman web anda.
Reka bentuk di bawah ini adalah 100% percuma untuk dimuat turun dan boleh digunakan untuk idea projek anda sendiri. Anda dapat melihat bagaimana ini menarik perhatian pengunjung dan mengapa tren ini telah berkembang menjadi kegilaan seperti itu. Berhati-hati agar tidak menggunakan terlalu banyak sepanduk. Secara pukal, ini boleh menjadi sangat menjengkelkan seperti kesan "glossy / mirrored" web 2.0 yang lebih tua.
Sumber Asal - Muat Turun
Merekabentuk dengan Butang
Selain dari hyperlink, anda akan mendapat interaksi yang paling banyak dari pelawat dengan butang. Item halaman ini boleh melakukan apa saja dengan bantuan panggilan jQuery dan Ajax kecuali anda juga boleh menggunakan butang untuk menghubungkan ke kandungan statik, seperti muat turun freebie misalnya!
Kit UI di bawah, direka oleh Matt Gentile mempunyai lebih banyak daripada sekadar butang. Set PSDnya hebat untuk pemula yang ingin mengambil gradien dan tekstur untuk membina bentuk yang serupa. Selalunya kali anda akan menemui butang berkualiti tinggi dalam kit UI berbanding dengan JPA tunggal.
Sumber Asal - Muat Turun
Bagaimana Membuat Variasi
Seperti yang anda luangkan masa mengamalkan teknik ini, anda ingin membuat gaya yang berbeza dari semasa ke semasa. Ini mungkin beralih kepada butang yang sama antara projek dan susun atur yang berbeza. Satu contoh yang baik adalah butang set susu yang ditawarkan oleh pereka Robert van Klinken.
Sumber Asal - Muat Turun
Setiap tiga butang asal mempunyai gaya kecerunan yang berbeza, kecuali keadaan hover dan aktif yang kelihatan sama. Apabila bekerja di Photoshop, anda perlu memadankan warna di antara kecerunan atau memindahkan warna ke lapisan kesan. Dengan pemahaman ini, anda juga boleh membina butang freebie anda sendiri untuk dimuat turun!
Sumber Asal - Muat Turun
Tekstur Kayu + Kertas
Apabila anda perlu memasak reka bentuk susun atur asas anda maka anda perlu bergerak ke arah lebih banyak kaedah yang licik. Tekstur sentiasa dialu-alukan jika anda boleh melaksanakannya dengan betul melalui latar belakang CSS atau kandungan lebar lebar. Dan dua tekstur yang paling popular yang saya lihat adalah kertas kayu dan kosong.
Idea notepad sangat mudah tetapi ia boleh berfungsi sebagai reka bentuk penjenamaan yang kerap sama ada sebagai sebahagian daripada elemen antara muka pengguna atau dibina ke keseluruhan susun atur anda. Tetapi kertas tidak selalu kelihatan yang terbaik dengan sendirinya, dan tekstur lain dapat membantu gaya campuran. Di sinilah lebih banyak tekstur kayu yang terperinci boleh dimainkan.
Sumber Asal - Muat Turun
Imej akan menonjol dan kelihatan indah dibungkus dalam kulit luar. Seluruh konsep tekstur adalah untuk memberikan laman web anda perasaan atau emosi tertentu. Tema kayu boleh menimbulkan rasa rumah dan alam semula jadi. Terdapat juga kit web UI kayu hebat untuk dimuat turun oleh Jeremiah Wingett. Jika anda merasa kreatif, cuba sertakan beberapa tekstur anda sendiri dan lihat bagaimana prestasi mereka dalam persekitaran berasaskan web.
28 Tekstur Kayu Resolusi Tinggi
Kesimpulannya
Pereka web terbaik adalah orang yang berlatih setiap hari dan tidak pernah membiarkan kegagalan mereka menghalang dari matlamat utama mereka. Anda harus responsif dan melantun kembali dengan cepat dari kedua-dua kejayaan dan percubaan gagal. Petua dan hadiah percuma dalam panduan ini harus menjadi titik permulaan yang baik untuk mula belajar bagaimana membina konsep halaman yang berbeza untuk projek web. Dan kami ingin membaca pemikiran anda mengenai perkara ini di kawasan perbincangan pos.
