Rumah > hujung hadapan web > html tutorial > Lebih daripada 40 contoh reka bentuk borang web yang cantik_HTML/Xhtml_Penghasilan halaman web

Lebih daripada 40 contoh reka bentuk borang web yang cantik_HTML/Xhtml_Penghasilan halaman web

PHP中文网
Lepaskan: 2016-05-16 16:42:44
asal
5293 orang telah melayarinya

Di bawah ini kami memperkenalkan lebih daripada 40 contoh borang web yang cantik serta penyelesaian moden dan pemikiran kreatif yang berkaitan dengan reka bentuk borang web, namun, dalam kebanyakan kes, anda boleh dengan mudah Menggunakan css dan (x)html untuk mencipta reka bentuk yang sama

Borang web adalah cara utama untuk pelawat berkomunikasi dengan pemilik laman web. Maklum balas sentiasa penting, itulah sebabnya kami memastikan borang web mudah difahami dan intuitif untuk digunakan, tetapi walaupun dalam reka bentuk formal ia memainkan peranan yang berkesan dalam kreativiti.

Borang web tidak perlu membosankan, menggunakan CSS atau Flash anda boleh memastikan ia menarik dan berkesan. Ambil perhatian bahawa anda perlu menghasilkan sesuatu yang unik dan menarik - bentuk simbol, ikon, warna, kedudukan atau saiz yang sering digunakan untuk mencapai penyelesaian reka bentuk yang menarik. Kami telah mencari beberapa contoh dan telah menemuinya. Borang web yang kreatif, asli dan luar biasa.

Di bawah ini saya memperkenalkan lebih daripada 40 contoh bentuk web yang cantik serta penyelesaian moden dan pemikiran kreatif yang berkaitan dengan reka bentuk borang web, namun, dalam kebanyakan kes, anda boleh mencipta reka bentuk yang sama dengan mudah menggunakan css ringkas dan (x)html.

1 Penyelesaian yang bersih, ringkas dan cantik

Memandangkan borang web mungkin merupakan bahagian paling penting dalam laman web Salah satu bahagian terpenting anda sebagai seorang. pereka bentuk perlu memastikan bahawa pelawat anda boleh memahami maklumat yang mereka perlukan untuk mengisi dengan mudah dalam medan borang. Bentuk yang kompleks dan panjang meningkatkan beban kognitif pengguna - ia lebih sukar untuk diproses. Dalam konteks, memilih penyelesaian yang mudah dan bersih kelihatan seperti pendekatan yang baik. Walau bagaimanapun, jika borang itu direka bentuk dengan perhatian kepada perincian dan kelihatan baik, masuk akal untuk menggunakan beberapa ikon yang menarik.

kotak komunikasi softmail berasal dari Brazil Dalam reka bentuk borang, ia menunjukkan ikon mel yang cukup bagus yang disepadukan dengan borang. Butang hantar bersih dan berfungsi. Ini adalah reka bentuk kreatif.

swfir juga menggunakan sampul surat sebagai pembayang.

Tulisan tangan digunakan pada tapak web katrin wegmann. Reka bentuk yang menarik perhatian, menarik perhatian dan suka bermain dengan sempurna menyampaikan fungsinya kepada pengguna.

Reka bentuk TheWatchMakerProject sangat mengagumkan. Borang ini diletakkan di sebelah kanan ulasan terkini.

Frexy.comMenggunakan penyelesaian yang baik dan bersih

Flingmedia menggunakan borang hubungan yang diubah suai yang, bergantung pada niat pelawat (ulasan umum, permintaan untuk projek baharu), pengguna boleh memilih borang Web yang menarik minatnya.

Envero.org - Borang web adalah besar dan mengisi keseluruhan lebar reka letak. Oleh itu saiz fon yang sepadan dan saiz kotak input dipilih.


2. Penyelesaian Kreatif

Walaupun borang web dianggap mencukupi untuk memastikan pengguna dan pemilik tapak web sentiasa berhubung, sesetengah pereka sering mengambil risiko reka bentuk kreatif untuk mengelakkan pelawat mendapati reka letak membosankan Walaupun borang web standard telah digunakan selama beberapa tahun. Banyak isyarat berbeza digunakan, beberapa contoh menarik diringkaskan di bawah.

CRreated 201.com Lihat borang hubungan ini dengan kesan perspektif yang sangat berbeza. Kesan ini dicipta menggunakan denyar.

Nah, yang ini pasti berbeza. Jika anda ingin menghubungi Edward Pistachio, anda perlu menyelesaikan teka-teki terlebih dahulu. Pendekatan ini tidak sesuai untuk blog atau laman web perniagaan. Walau bagaimanapun, ia sangat sesuai dengan laman web konseptual ini. Pengunjung terkejut.

Pengambilan Kimia Menggunakan folder, beberapa nota dan beberapa kertas

Alexandru Cohaniuc menunjukkan borang web yang besar menggunakan sekeping papirus dan setem.

Borang hubungan Tony Yoo mempunyai butiran hubungan di sebelah kiri.

Qwert City Pengguna boleh menghantar poskad kepada pereka bentuk.

wildvuur.com - Borang web ini disepadukan sepenuhnya dengan reka letak tapak web

BubblesSocmempunyai Borang web yang besar dan sangat besar dengan bahagian atas.


3. Gunakan ilustrasi untuk mencerahkan borang

Apabila pengguna mengklik pada pautan ke ilustrasi halaman web, dia hanya selangkah lagi untuk berhubung dengan pemilik tapak web. Untuk memastikan pelawat benar-benar boleh mengisi borang, sesetengah pereka menggunakan teks dan ilustrasi yang menarik untuk membuatkan pengguna berasa lebih selesa dengan borang tersebut.

Reka Bentuk Intuitif cuba menarik perhatian pengunjung dengan posmen yang sibuk. Bolehkah dia mengatasinya?

X-Grafik.skGunakan setem dari Slovakia.

Kqoule.comAda seorang lelaki cantik yang menjemput semua orang untuk mengulas.

Dressfordialogue.com menggunakan ilustrasi kecil di bahagian atas sebelah kanan borang, tetapi walaupun begitu, kadangkala ia berfungsi dengan baik.


4. Sepadukan lebih banyak fungsi

Mencari beberapa borang web kreatif, kami mendapati bahawa beberapa fungsi baharu telah digunakan, yang jarang digunakan pada masa lalu untuk menyediakan pengguna dengan format teks kaya dan peluncur untuk penyuntingan teks, tahap tajuk dan imej yang berbeza. Peluncur digunakan untuk menentukan had belanjawan untuk projek tertentu.

InfectedFx mempunyai borang web yang agak kompleks dengan gesaan, pilihan dan butang Borang ini juga menggabungkan kawasan kotak teks editor WYSIWIG.

Sidebarcreative.com memberikan bakal pelanggan bar gelongsor untuk mengehadkan belanjawan projek.


5. Gunakan ikon untuk menyampaikan maklumat yang diperlukan.

Dari perspektif kebolehgunaan, tiada yang lebih menjengkelkan daripada borang web dengan label teks biasa yang panjang dan tiada penunjuk visual. Bentuk sedemikian membosankan. Ia tidak menarik dan tidak membuatkan pengguna berasa selesa. Anda boleh mereka bentuk borang dengan lebih baik dan, sebenarnya, tidak banyak medan yang diperlukan. Selalunya ikon digunakan untuk menunjukkan kepada pengguna medan yang diperlukan.

DesignDisease WordPress Theme Gunakan simbol mudah untuk menunjukkan medan yang diperlukan.

Bouctoubou.com mempunyai logo yang sangat mudah dan asas, namun, mereka berjaya menjadikan borang itu lebih menarik.


6. Penggunaan tulisan tangan dan gaya grunge

Saya pernah menulis tentang penggunaan tulisan tangan dan gaya grungy dalam reka bentuk web moden. Elemen reka bentuk sedemikian telah digunakan dalam bentuk web kerana ia unik dan menyampaikan personaliti pereka bentuk. Terutamanya reka bentuk web berasaskan flash lebih suka kaedah ini.

Redblu menyediakan surat khabar. Untuk mendapatkan borang, anda perlu menyeret surat khabar dengan sewajarnya.

Fivecentstand menawarkan penyelesaian berasaskan kilat yang bertujuan untuk disepadukan dengan keseluruhan tapak. Ia boleh menjadi agak sukar untuk pengguna baharu.

Pointofe.com Gunakan nota melekit sebagai borang web. Saiz fon mungkin perlu ditingkatkan.

Swiths.com menggunakan reka bentuk lama. Kesan hover juga disediakan.


7. Penyelesaian Eksperimen

Di bawah anda akan menemui beberapa penyelesaian yang luar biasa digunakan yang boleh memberikan titik permulaan untuk reka bentuk anda. Tidak semuanya tampan, tetapi terdapat beberapa perkara tentang mereka yang mungkin meningkatkan lagi pemikiran reka bentuk anda.

adorama.commenawarkan penyelesaian yang kelihatan bagus dan padat: kotak komunikasi di bar sisi

Bahasa yang berbeza - gaya yang berbeza, dalam Booloob.comButang hantar diletakkan di sebelah kiri borang.

Paregonta.com:Tiga dimensi dan sangat mudah. Bentuk yang berwarna-warni dan terutamanya padat.

Sunmatecushions.com mempunyai gaya yang sangat berbeza dan entah bagaimana sesuai di sini.

Nah, kenapa tidak? Kertas dinding sebagai latar belakang pada GeekAndHype.com

Revota.com Ia hitam dan berbayang, tetapi menggunakan kesan tuding sorotan apabila menunjukkan kawasan semasa.

catydesign juga sangat malap. Apa yang menarik tentang borang ini ialah maklumat yang dicadangkan diletakkan di tempat yang sesuai.

MyMileMarker: Borang tiada had lebar. Kadangkala bentuk mendatar berfungsi lebih baik daripada bentuk menegak.

Jaroslav Cerny menunjukkan cara mencampurkan borang web dengan e-mel. Borang ini tidak lagi dalam talian, tetapi ia patut disebut.

Xyarea.be Luar biasa dan asli. Ia mungkin kotak komunikasi paling nipis di dunia.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan