Teknologi pembangunan tapak web ialah proses yang sangat pelbagai rupa. Namun begitu, semua peringkatnya boleh dibahagikan kepada dua komponen utama - fungsi dan kulit luar. Atau, seperti biasa di kalangan juruweb, bahagian belakang dan bahagian hadapan, masing-masing. Orang yang memesan tapak web mereka dari studio pembangunan web selalunya secara naif percaya bahawa ia patut memberi tumpuan hanya pada fungsi, dan ini akan menjadi keputusan yang tepat. Tetapi ini benar dalam kes yang sangat jarang berlaku, biasanya untuk projek permulaan pada peringkat ujian beta. Jika tidak, reka bentuk grafik dan antara muka pengguna hanya diperlukan untuk mematuhi piawaian pembangunan web dan mudah.
Batu asas pertama yang dihadapi oleh pereka bentuk antara muka, atau pereka bentuk, ialah lebar reka letak tapak. Lagipun, untuk itu adalah perlu untuk menarik antara muka. Secara intuitif, dua pendekatan timbul - sama ada membuat susun atur berasingan untuk setiap peleraian skrin yang popular atau mencipta satu versi tapak untuk semua paparan. Dan kedua-dua pilihan adalah salah, tetapi perkara pertama dahulu.
Lebar tapak web standard dalam pikseluntuk Runet
Sebelum pembangunan reka letak penyesuaian, pembangunan tapak dengan lebar seribu piksel adalah fenomena jisim. Angka ini dipilih untuk satu sebab mudah - supaya tapak itu sesuai dengan mana-mana skrin. Dan ini mempunyai logiknya sendiri, tetapi mari kita anggap bahawa seseorang masih mempunyai sekurang-kurangnya monitor HD pada desktop. Dalam kes ini, reka letak anda akan kelihatan seperti jalur kecil di tengah-tengah skrin, di mana segala-galanya tersangkut dalam satu timbunan, dan di sisi terdapat ruang besar yang tidak digunakan. Sekarang mari kita anggap bahawa seseorang mengakses tapak web anda pada tablet dengan skrin lebar 800px dan "Tunjukkan tapak web penuh" ditandakan dalam tetapan. Dalam kes ini, tapak anda juga akan dipaparkan secara tidak betul, kerana ia tidak sesuai dengan skrin.
Daripada pertimbangan ini, kita boleh membuat kesimpulan bahawa lebar tetap untuk reka letak sudah pasti tidak sesuai untuk kita dan kita perlu mencari cara lain. Mari analisa idea reka letak yang berasingan untuk setiap lebar skrin.
Susun atur untuk semua majlis
Jika anda telah memilih sebagai strategi untuk membuat reka letak untuk semua saiz skrin di pasaran, maka tapak anda akan menjadi yang paling unik di seluruh Internet. Lagipun, adalah mustahil hari ini untuk merangkumi keseluruhan rangkaian peranti, cuba memperhalusi setiap pilihan. Tetapi jika anda menumpukan pada resolusi monitor dan skrin peranti yang paling popular, maka idea itu tidak buruk. Satu-satunya kelemahannya ialah kos kewangan. Lagipun, apabila pereka antara muka, pereka bentuk dan pengekod dipaksa untuk melakukan kerja yang sama 5 atau 6 kali, projek itu akan menelan belanja.lebih tinggi secara tidak seimbang daripada harga asal yang dianggarkan.
Oleh itu, hanya tapak satu halaman boleh bermegah dengan banyak versi untuk skrin yang berbeza, yang tujuannya adalah untuk menjual satu produk dan pastikan anda melakukannya dengan baik. Nah, jika anda tidak mempunyai salah satu daripada pendaratan ini, tetapi tapak berbilang halaman, maka anda harus berfikir lebih jauh.
Saiz Tapak Paling Popular
Sesuatu kompromi antara kedua-dua ekstrem itu ialah memberikan reka letak untuk tiga atau empat saiz skrin. Antaranya, satu mestilah susun atur untuk peranti mudah alih. Selebihnya harus disesuaikan untuk skrin desktop kecil, sederhana dan besar. Bagaimana untuk memilih lebar tapak? Di bawah ini kami membentangkan statistik perkhidmatan HotLog untuk Mei 2017, yang menunjukkan kepada kami taburan populariti pelbagai resolusi skrin peranti, serta dinamik penunjuk ini.
Dari jadual anda boleh mengetahui cara menentukan saiz tapak yang anda ingin gunakan. Di samping itu, kita boleh membuat kesimpulan bahawa format yang paling biasa hari ini ialah skrin 1366 kali 768 piksel. Skrin sedemikian dipasang dalam komputer riba bajet, jadi popularitinya adalah semula jadi. Yang paling popular seterusnya ialah monitor HD Penuh, yang merupakan standard emas untuk video, permainan, dan oleh itu untuk membuat susun atur tapak web. Selanjutnya dalam jadual kita melihat peleraian peranti mudah alih 360 kali 640 piksel, serta pelbagai pilihan untuk skrin desktop dan mudah alih selepasnya.
Mereka reka letak
JadiSelepas menganalisis statistik, kita boleh membuat kesimpulan bahawa lebar tapak yang optimum mempunyai 4 variasi:
- Versi komputer riba dengan lebar 1366px.
- Versi HD penuh.
- Susun letak lebar 800px untuk paparan pada monitor desktop kecil.
- Versi mudah alih tapak - 360 piksel lebar.
Katakanlah kami telah memutuskan saiz yang akan digunakan untuk sumber yang dijana untuk tapak tersebut. Tetapi projek sedemikian masih akan menelan kos yang tinggi. Jadi mari kita lihat lebih banyak pilihan, kali ini tanpa menggunakan lebar tetap.
Menjadikan reka letak fleksibel
Terdapat pendekatan alternatif, apabila ia berbaloi untuk menyesuaikan hanya pada saiz skrin minimum, dan saiz tapak itu sendiri akan ditetapkan mengikut peratusan. Pada masa yang sama, elemen antara muka seperti menu, butang dan logo boleh ditetapkan dalam nilai mutlak, memfokuskan pada saiz minimum lebar skrin dalam piksel. Blok dengan kandungan, sebaliknya, akan diregangkan mengikut peratusan yang ditentukan bagi lebar kawasan skrin. Pendekatan ini membolehkan anda berhenti menganggap saiz tapak sebagai had untuk pereka bentuk dan mengatasi nuansa ini dengan mahir.
Apakah nisbah emas dan bagaimanakah ia boleh digunakan pada reka letak halaman web?
Malah pada zaman Renaissance, ramai arkitek dan artis cuba memberikan ciptaan mereka bentuk dan perkadaran yang sempurna. Untuk jawapan kepada soalan tentang nilai perkadaran sedemikian, mereka beralih kepada ratu semua sains - matematik.
Sejak zaman dahulu, satu bahagian telah dicipta yang mata kita anggap sebagai yang paling semula jadi dan elegan,kerana ia ada di mana-mana. Penemu formula untuk nisbah sedemikian adalah seorang arkitek Yunani kuno yang berbakat bernama Phidias. Dia mengira bahawa jika bahagian yang lebih besar daripada perkadaran berkaitan dengan yang lebih kecil kerana keseluruhannya berkaitan dengan yang lebih besar, maka perkadaran sedemikian akan kelihatan terbaik. Tetapi ini berlaku jika anda ingin membahagikan objek secara tidak simetri. Perkadaran ini kemudiannya dipanggil bahagian emas, yang masih tidak memandang tinggi kepentingannya untuk sejarah budaya dunia.
Kembali ke reka bentuk web
Ia sangat mudah - menggunakan nisbah keemasan, anda boleh mereka bentuk halaman yang akan menyenangkan mata manusia yang mungkin. Mengira mengikut definisi formula nisbah emas, kita mendapat nombor tidak rasional 1, 6180339887 …, tetapi untuk kemudahan, kita boleh menggunakan nilai bulat 1, 62. Ini bermakna bahawa blok halaman kita hendaklah 62 % dan 38% daripada keseluruhan, tidak kira saiz sumber yang dijana untuk tapak yang anda gunakan. Anda boleh melihat contoh dalam rajah ini:
Gunakan teknologi baharu
Teknologi susun atur tapak web moden memungkinkan untuk menyampaikan idea perancang dan pereka dengan tepat, jadi kini anda mampu untuk melaksanakan idea yang lebih berani daripada pada permulaan teknologi Internet. Anda tidak perlu lagi berfikir keras tentang saiz tapak yang sepatutnya. Dengan kemunculan perkara seperti susun atur penyesuaian blok, pemuatan kandungan dan fon yang dinamik, pembangunan laman web menjadi lebih menyenangkan. Lagipun, teknologi ini adalahlebih sedikit sekatan, walaupun masih ada. Tetapi seperti yang anda tahu, tanpa had tidak akan ada seni. Kami mencadangkan anda menggunakan satu pendekatan reka bentuk yang benar-benar kreatif - nisbah emas. Dengan itu, anda boleh mengisi ruang kerja dengan berkesan dan cantik, tidak kira apa saiz tapak yang anda tetapkan dalam templat anda.
Cara meningkatkan ruang kerja tapak
Ada kemungkinan besar anda tidak akan mempunyai ruang yang mencukupi untuk memuatkan semua elemen UI ke dalam reka letak yang kecil. Dalam kes ini, anda perlu mula berfikir secara kreatif atau lebih kreatif daripada yang anda lakukan sebelum ini.
Maksimum mengosongkan ruang pada tapak dengan menyembunyikan navigasi dalam menu timbul. Adalah logik untuk menggunakan pendekatan ini bukan sahaja pada peranti mudah alih, tetapi juga pada desktop. Lagipun, pengguna tidak perlu melihat sepanjang masa pada tajuk yang ada di tapak anda - dia datang untuk mendapatkan kandungan tersebut. Dan kehendak pengguna mesti dihormati.
Contoh cara yang baik untuk menyembunyikan menu ialah reka letak berikut (foto di bawah).
Di sudut atas kawasan merah, anda boleh melihat salib, mengklik pada yang akan menyembunyikan menu ke dalam ikon kecil, meninggalkan pengguna bersendirian dengan kandungan tapak web.
Walau bagaimanapun, ini adalah pilihan, anda boleh meninggalkan navigasi, yang akan sentiasa kelihatan. Tetapi anda boleh menjadikannya elemen reka bentuk yang cantik, dan bukan hanya senarai pautan popular di tapak. Gunakan ikon intuitif sebagai tambahan kepada atau malah bukan pautan teks. itu yang samaakan membolehkan tapak anda menggunakan ruang skrin dengan lebih cekap pada peranti pengguna.
Tapak web terbaik adalah responsif
Jika anda tidak tahu susun atur mana yang hendak dipilih untuk tapak, maka semuanya mudah untuk anda. Untuk menjimatkan kos pembangunan dan pada masa yang sama tidak kehilangan khalayak anda disebabkan reka letak yang buruk untuk sesetengah peranti, gunakan reka bentuk responsif.
Reka bentuk responsif ialah reka bentuk yang kelihatan sama bagus pada peranti yang berbeza. Pendekatan ini akan membolehkan tapak anda difahami dan mudah walaupun pada komputer riba, walaupun pada tablet, walaupun pada telefon pintar. Kesan ini dicapai dengan menukar lebar kawasan kerja skrin secara automatik. Dengan menggunakan helaian gaya responsif untuk tapak anda, anda membuat keputusan yang terbaik.
Apakah perbezaan antara reka bentuk responsif dan versi tapak web
Reka bentuk responsif berbeza daripada versi mudah alih tapak kerana dalam kes kedua, pengguna menerima kod html yang berbeza daripada kod desktop. Ini adalah kelemahan dari segi pengoptimuman prestasi pelayan dan juga pengoptimuman enjin carian. Di samping itu, menjadi lebih sukar untuk mengira statistik untuk versi tapak yang berbeza. Pendekatan penyesuaian tidak mempunyai kelemahan ini.
Responsif untuk pelbagai peranti dicapai melalui susun atur dengan peratusan lebar yang ditentukan atau dengan memindahkan blok ke ruang yang tersedia (dalam satah menegak pada telefon pintar dan bukannyamendatar pada desktop), atau mencipta reka letak individu untuk skrin yang berbeza.
Ketahui lebih lanjut tentang reka bentuk dan pembangunan responsif dalam tutorial kami.
