Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Design & Illustration
  2. Designing
Design

9 Prinsip Penting untuk Reka Bentuk Web Baik

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Reka bentuk laman web boleh menjadi sukar difahami, kerana ia melibatkan pencapaian reka bentuk yang boleh digunakan dan menyenangkan, menyampaikan maklumat dan membina jenama, secara teknikalnya bersifat baik dan visual.

Tambah ini fakta bahawa banyak pereka Web (termasuk diri saya sendiri) adalah diajar sendiri, bahawa reka bentuk Web masih cukup baru untuk menjadi subjek sampingan di banyak institusi reka bentuk, dan perubahan media sesering teknologi yang berlaku.

Jadi hari ini saya telah mengumpulkan 9 prinsip saya untuk reka bentuk Web yang baik. Ini hanya pendapat saya dan saya cuba menghubungkannya dengan lebih banyak bacaan mengenai subjek supaya anda tidak hanya mendengar suara saya. Jelas sekali, saya mempunyai banyak penafian: peraturan dibuat untuk dipecahkan, jenis reka bentuk yang berbeza bekerja dengan berbeza, dan saya tidak selalu memenuhi nasihat saya sendiri. Jadi sila baca ini kerana ia bertujuan -- hanya beberapa pemerhatian saya berkongsi ...



Menangkap Lembah menggunakan bar warna untuk membimbing mata anda melalui bahagian dari atas ke bawah ...

1. Precedence (Guiding the Eye)

Reka bentuk Web yang baik, mungkin lebih daripada jenis reka bentuk yang lain, adalah mengenai maklumat. Salah satu alat terbesar dalam senjata untuk melakukan ini adalah keutamaan. Apabila menavigasi reka bentuk yang baik, pengguna perlu diketengahkan oleh skrin oleh pereka. Saya memanggil keutamaan ini, dan ini mengenai berapa banyak berat visual yang berbeza bahagian reka bentuk anda.

Contoh contoh yang mudah ialah di kebanyakan laman web, perkara pertama yang anda lihat ialah logo. Ini sering kerana ia besar dan menetapkan apa yang telah ditunjukkan dalam kajian menjadi tempat pertama orang melihat (kiri atas). beliau adalah satu perkara yang baik kerana anda mungkin mahu pengguna mengetahui dengan segera laman web yang mereka lihat.

Tetapi keutamaan harus pergi lebih jauh. Anda harus mengarahkan mata pengguna melalui urutan langkah-langkah. Sebagai contoh, anda mungkin mahu pengguna anda pergi dari logo/jenama ke penyataan kedudukan utama, bersebelahan dengan imej yang punchy (untuk memberikan personaliti laman web), kemudian ke teks badan utama, dengan navigasi dan bar sisi yang mengambil kedudukan sekunder dalam urutannya.

Apa yang anda cari oleh pengguna adalah terpulang kepada anda, pereka Web, untuk memikirkan.

Untuk mencapai keutamaan anda mempunyai banyak alat yang boleh dilupuskan:

  • Posisi — Jika sesuatu di halaman mempunyai pengaruh yang jelas dalam susunan pesanan pengguna melihatnya.
  • Warna — Menggunakan warna berani dan halus adalah cara mudah untuk memberitahu pengguna di mana hendak melihatnya.
  • Sebaliknya — Menjadi berbeza membuat perkara menonjol, sementara yang sama menjadikan mereka sekunder.
  • Saiz — Big mengambil keutamaan lebih sedikit (kecuali segala-galanya besar, dalam hal ini mungkin sedikit luar biasa terima kasih kepada Sebaliknya)
  • Elemen reka bentuk — jika terdapat anak panah menunjuk gergasi pada sesuatu, meneka di mana pengguna akan dapat melihat?


Bacaan Lanjutan:

Anda boleh membaca lebih banyak pemikiran saya tentang Precedence dalam post Psdtuts+ lama yang dipanggil Unsur Reka Bentuk Web Besar - menggilap. Joshua David McClurg-Genevese membincangkan prinsip reka bentuk web yang baik dan reka bentuk di Digital-Web. Joshua juga mempunyai nama terpanjang yang pernah :-)



Marius mempunyai tapak yang sangat bersih dan sangat mudah dengan banyak ruang

2. Jarak

Ketika saya mula-mula merancang saya ingin mengisi setiap ruang yang ada dengan barang-barang. Ruang kosong kelihatan membazir. Malah sebaliknya adalah benar.

Jarak menjadikan perkara lebih jelas. Dalam reka bentuk Web terdapat tiga aspek ruang yang harus anda pertimbangkan:

  • Jarak Baris
    Apabila anda meletakkan teks keluar, ruang antara baris secara langsung memberi kesan kepada bagaimana ia boleh dibaca. Ruang terlalu kecil menjadikannya mudah untuk mata anda tumpah dari satu baris ke ruang yang seterusnya, terlalu banyak bermakna bahawa apabila anda menyelesaikan satu baris teks dan pergi ke sebelah mata anda dapat tersesat. Jadi anda perlu mencari medium gembira. Anda boleh mengawal jarak baris dalam CSS dengan pemilih "ketinggian baris". Secara amnya saya dapati nilai lalai selalunya terlalu kecil. Spasi Talian dipanggil leading (tempat tidur leper), yang berasal dari proses yang digunakan oleh pencetak untuk memisahkan baris teks dalam masa yang lama — dengan meletakkan bar di antara garis-garis.
  • Lapisan
    Teks secara umum tidak boleh menyentuh elemen lain. Imej, sebagai contoh, tidak boleh menyentuh teks, tidak harus sempadan atau jadual.
    Padding adalah ruang antara elemen dan teks. Peraturan mudah di sini adalah bahawa anda harus selalu ada ruang di sana. Terdapat pengecualian tentu saja, terutamanya jika teks adalah sejenis tajuk/grafik atau nama anda adalah David Carson :-) Tetapi sebagai peraturan umum, meletakkan ruang antara teks dan seluruh dunia membuatnya jauh lebih mudah dibaca dan menyenangkan .
  • Ruang Putih
    Pertama sekali, ruang putih tidak perlu berwarna putih. Istilah ini hanya merujuk kepada ruang kosong pada halaman (atau ruang negatif seperti yang kadangkala disebut). Ruang putih digunakan untuk memberikan keseimbangan, perkadaran dan kontras ke halaman. Banyak ruang putih cenderung menjadikan perkara kelihatan lebih elegan dan mewah, jadi contohnya jika anda pergi ke laman arkitek yang mahal, anda akan sentiasa melihat banyak ruang. Jika anda ingin belajar menggunakan ruang kosong dengan berkesan, pergi ke majalah dan lihat bagaimana iklan dibentangkan. Iklan untuk jenama besar jam tangan dan kereta dan sejenisnya cenderung mempunyai banyak ruang kosong yang digunakan sebagai elemen reka bentuk.


Bacaan Lanjutan:

Di WebDesignFromScratch terdapat artikel hebat yang disebut panduan reka bentuk Web 2.0, yang membincangkan Simplicity - konsep yang membuat banyak penggunaan jarak. Terdapat banyak barangan berguna lain di sana juga!



Noodlebox berfungsi dengan baik menggunakan keadaan hidup/mati dalam navigasi mereka untuk memastikan pengguna berorientasikan.

3. Navigasi

Salah satu pengalaman yang paling mengecewakan anda boleh di laman web tidak dapat mencari jalan ke mana atau di mana anda berada. Saya ingin berfikir bahawa untuk kebanyakan pereka Web, navigasi adalah konsep yang kami dapat menguasai, tetapi saya masih menemui beberapa contoh yang buruk di luar sana. Terdapat dua aspek navigasi untuk diingat:

Navigasi — Di mana anda boleh pergi?
Terdapat beberapa peraturan kenamaan untuk diingat di sini. Butang untuk melakukan perjalanan di sekitar tapak harus mudah dicari - ke arah atas halaman dan mudah dikenalpasti. Mereka harus kelihatan seperti butang navigasi dan diterangkan dengan baik. Teks satu butang sepatutnya cukup jelas ke mana ia membawa anda. Selain dari segi akal, ia juga penting untuk membuat navigasi boleh digunakan. Sebagai contoh, jika anda mempunyai sub-menu peralihan, memastikan seseorang boleh sampai ke item sub-menu tanpa kehilangan peralihan adalah penting. Begitu juga menukar warna atau imej pada peralihan adalah maklum balas yang sangat baik untuk pengguna.

Orientasi — Di mana anda sekarang?
Terdapat banyak cara anda boleh berorientasikan pengguna supaya tidak ada alasan untuk tidak. Di tapak kecil, ia mungkin hanya satu tajuk besar atau versi "bawah" butang yang sesuai di dalam menu anda. Di laman web yang lebih besar, anda mungkin menggunakan laluan remah roti, sub-tajuk dan peta tapak untuk benar-benar hilang.


Bacaan Lanjutan:

SmashingMagazine mempunyai pilihan gaya navigasi berasaskan CSS yang bagus untuk dilalui, dan #3 adalah salah satu saya! A List Apart juga mempunyai artikel yang baik mengenai orientasi yang dipanggil Where Am I?


4. Reka Bentuk untuk Membina

Kehidupan telah menjadi lebih mudah sejak pereka Web beralih ke susun atur CSS, tetapi sekarang ia masih penting untuk memikirkan bagaimana anda akan membina laman web ketika anda masih dalam Photoshop. Pertimbangkan perkara seperti:

  • Bolehkah ia dilakukan?
    Anda mungkin telah memilih fon menakjubkan untuk salinan badan anda, tetapi adakah ia sebenarnya satu font HTML standard? Anda mungkin mempunyai reka bentuk yang kelihatan cantik namun lebar 1100px dan akan menghasilkan scroller mendatar untuk majoriti pengguna. Adalah penting untuk mengetahui apa yang boleh dan tidak boleh dilakukan, oleh itu saya percaya semua pereka Web juga harus membina tapak, sekurang-kurangnya kadang-kadang.
  • Apa yang berlaku apabila skrin diselaraskan?
    Adakah anda perlu mengulang latar belakang? Bagaimana mereka akan bekerja? Adakah reka bentuk berpusat atau kiri sejajar?
  • Adakah anda melakukan sesuatu yang secara tekal sukar?
    Walaupun dengan kedudukan CSS, beberapa perkara seperti penjajaran menegak masih agak menyakitkan dan kadang-kadang lebih baik dielakkan.
  • Bolehkah perubahan kecil dalam reka bentuk anda sangat memudahkan cara anda membinanya?
    Kadang-kadang memindahkan objek di sekitar dalam reka bentuk boleh membuat perbezaan yang besar dalam bagaimana anda perlu kod CSS anda kemudian. Khususnya, apabila unsur-unsur reka bentuk merentasi satu sama lain, ia menambah sedikit kerumitan kepada membina. Jadi jika reka bentuk anda mempunyai, katakan tiga elemen dan setiap elemen sepenuhnya berasingan dari satu sama lain, ia akan menjadi sangat mudah untuk dibina. Sebaliknya jika ketiga-tiganya bertindih antara satu sama lain, ia mungkin masih mudah, tetapi mungkin sedikit lebih rumit. Anda harus mencari keseimbangan antara apa yang kelihatan baik dan perubahan kecil yang dapat memudahkan pembinaan anda.
  • Untuk laman web yang besar, terutamanya, bolehkah anda memudahkan perkara?
    Ada masa ketika saya digunakan untuk membuat butang imej untuk tapak saya. Jadi jika ada butang muat turun, contohnya, saya akan membuat sedikit gambar muat turun. Pada tahun lalu atau lebih, saya telah bertukar menggunakan CSS untuk membuat butang saya dan tidak pernah melihat ke belakang. Pasti, ini bermakna butang saya tidak selalu mempunyai fleksibiliti yang mungkin saya ingin, tetapi simpanan dalam masa membina daripada tidak perlu membuat berpuluh-puluh imej butang kecil sangat besar.


Sekiranya ada yang tahu jenis yang baik, iLoveTypography itu!

5. Typography

Teks adalah unsur reka bentuk yang paling biasa, jadi tidak menghairankan bahawa banyak pemikiran telah masuk ke dalamnya. Penting untuk mempertimbangkan perkara seperti:

  • Pilihan Font — Jenis fon yang berbeza mengatakan perkara yang berbeza mengenai reka bentuk. Sesetengah kelihatan moden, ada yang kelihatan retro. Pastikan anda menggunakan alat yang sesuai untuk tugas tersebut.
  • Saiz fon —Tahun lalu ia adalah bergaya untuk mempunyai teks yang sangat kecil. Malangnya, orang-orang ini mula menyedari bahawa teks itu dimaksudkan untuk dibaca, bukan hanya melihat. Pastikan saiz teks anda konsisten, cukup besar untuk dibaca, dan dipadatkan supaya tajuk dan sub-kepala ditonjolkan dengan sewajarnya.
  • Spasi — Sebagaimana dibincangkan di atas, jarak antara garis dan jauh dari objek lain adalah penting untuk dipertimbangkan. Anda juga harus memikirkan jarak antar huruf, walaupun di Web ini kurang penting, kerana anda tidak mempunyai banyak kendali.
  • Panjang Jalur — Tiada peraturan yang keras dan pantas, tetapi secara amnya baris teks anda tidak boleh terlalu lama. Semakin lama mereka, semakin sukar mereka membaca. Lajur kecil teks berfungsi dengan lebih baik (fikirkan bagaimana akhbar membentangkan teks).
  • Warna — Salah satu tabiat terburuk saya adalah membuat teks kontras rendah. Ia nampak baik tetapi tidak membaca dengan baik, malangnya. Namun, saya seolah-olah melakukannya dengan setiap reka bentuk laman web yang pernah saya buat, tsk tsk tsk.
  • Perenggan — Sebelum saya mula merancang, saya suka membenarkan teks dalam segala hal. Ia dibuat untuk tepi bagus di kedua-dua belah perenggan saya. Malangnya, teks yang dibenarkan hanya mencipta jurang pelik di antara kata-kata di mana mereka berada secara automatik. Ini tidak baik untuk mata anda apabila membaca, jadi berpegang kepada kiri-sejajar melainkan jika anda mempunyai badan sihir teks yang berlaku untuk mengosongkannya dengan sempurna.


Bacaan Lanjutan:

Nick La di WebDesignerWall mempunyai artikel hebat mengenai tipografi dalam talian yang disebut Kontras dan Aliran Tipografi.



Happycog tahu kebolehgunaan di dalamnya, dan laman web mereka sendiri mudah dan mudah digunakan.

6. Kegunaan

Reka bentuk web bukan hanya tentang gambar cantik. Dengan begitu banyak maklumat dan interaksi yang akan dilaksanakan di laman web, penting bagi anda, pereka, sediakan untuk semuanya. Itu bermakna membuat reka bentuk laman web anda boleh digunakan.

Kami telah membincangkan beberapa aspek kebolehgunaan - navigasi, keutamaan, dan teks. Berikut adalah tiga perkara yang lebih penting:

  • Mengikuti Piawaian
    Terdapat perkara-perkara tertentu yang diharapkan oleh orang ramai, dan tidak memberi mereka menyebabkan kekeliruan. Sebagai contoh, jika teks mempunyai garis bawah, anda mengharapkan ia menjadi pautan. Melakukan sebaliknya bukan amalan kebolehgunaan yang baik. Pasti, anda boleh memecahkan beberapa konvensyen, tetapi kebanyakan laman web anda harus melakukan apa yang orang harapkan untuk melakukannya!
  • Fikirkan tentang apa yang sebenarnya pengguna lakukan
    Prototyping adalah alat yang biasa digunakan dalam reka bentuk untuk benar-benar "mencuba" reka bentuk. Ini dilakukan kerana sering apabila anda benar-benar menggunakan reka bentuk, anda melihat perkara-perkara kecil yang membuat perbezaan besar. ALA mempunyai artikel yang kemudiannya dipanggil Jangan sekali-kali Gunakan Peringatan Apabila Anda Minumlah Undo, yang merupakan contoh terbaik dari keputusan reka bentuk antara muka kecil yang boleh menjadikan kehidupan menghisap untuk pengguna.
  • Fikirkan tentang tugas pengguna
    Apabila pengguna datang ke laman web anda, apakah yang sebenarnya mereka lakukan? Senaraikan jenis tugas yang boleh dilakukan oleh orang di tapak, bagaimana mereka akan mencapai mereka, dan betapa mudahnya anda buat untuk mereka. Ini mungkin bermakna melakukan tugas yang sangat umum di halaman utama anda (cth. "Mulailah membeli-bela", "pelajari tentang apa yang kami lakukan" dan lain-lain) atau mungkin bermaksud memastikan sesuatu seperti kotak carian sentiasa mudah diakses. Pada penghujung hari, reka bentuk Web anda adalah alat untuk digunakan oleh orang ramai, dan orang tidak suka menggunakan alat yang menjengkelkan!


Bacaan Lanjutan:

AListApart mempunyai banyak artikel mengenai kegunaan web.



Pulpa elektrik berjaya kelihatan kasar, tetapi jika anda melihat dengan teliti anda menyedari ada grid teguh dan perkara sebenarnya semuanya bersatu.

7. Penjajaran

Menjaga perkara yang dibariskan adalah sama penting dalam reka bentuk web kerana ia dalam reka bentuk cetak. Itu bukan untuk mengatakan bahawa segala-galanya harus berada dalam garis lurus, tetapi sebaliknya anda harus melangkah dan mencuba menyimpan perkara secara konsisten pada halaman. Menyelaraskan membuat reka bentuk anda lebih teratur dan dicerna, serta menjadikannya kelihatan lebih digilap.

Anda juga mungkin ingin mendasarkan reka bentuk anda pada grid tertentu. Saya harus mengakui saya tidak melakukan ini secara sedar - walaupun jelas sebuah laman web seperti Psdtuts sebenarnya mempunyai struktur grid yang sangat mantap. Tahun ini saya telah melihat beberapa artikel yang sangat bagus mengenai reka bentuk grid termasuk Designing SmashingMagazine dengan Pendekatan Berasaskan Grid & Suatu Senarai Selain Pemikiran Di Luar Grid. Nyatanya, jika anda berminat dalam reka bentuk grid, anda pasti perlu melawat rumah DesignByGrid.com yang bernama tepat kepada semua perkara yang griddy.



Laman ExpressionEngine adalah jiwa kejelasan. Segala-galanya tajam dan bersih.

8. Kejelasan (Sharpness)

Menjaga reka bentuk anda tajam dan tajam adalah sangat penting dalam reka bentuk web. Dan apabila ia datang kepada kejelasan, itu semua tentang piksel.

Dalam CSS anda, segala-galanya akan menjadi piksel sempurna supaya tidak ada yang perlu dibimbangkan, tetapi dalam Photoshop ia tidak begitu. Untuk mencapai reka bentuk tajam, anda perlu:

  • Teruskan tepi bentuk terputus ke piksel. Ini mungkin melibatkan pembersihan bentuk, garisan dan kotak secara manual jika anda menciptanya dalam Photoshop.
  • Pastikan sebarang teks dibuat menggunakan tetapan anti-aliasing yang sesuai. Saya menggunakan "Sharp" banyak.
  • Memastikan kontras itu tinggi supaya sempadan ditakrifkan dengan jelas.
  • Lebih-menekankan sempadan hanya sedikit untuk membesar-besarkan kontras.


Bacaan Lanjutan:

Saya menulis lebih lanjut mengenai kejelasan dalam Unsur-unsur Reka Bentuk Web Besar - menggilap. Saya perhatikan bahawa pereka cetak beralih ke reka bentuk Web, khususnya, tidak berfikir dalam piksel, tetapi ia benar-benar penting.



Veerle melakukan tugas yang baik untuk memastikan butiran terperinci konsisten di seluruh papan.

9. Konsistensi

Konsistensi bermakna membuat semua perlawanan. Saiz kepala, pilihan font, pewarna, gaya butang, jarak, elemen reka bentuk, gaya ilustrasi, pilihan gambar, dan lain-lain Semuanya harus bertemakan untuk membuat reka bentuk yang koheren antara halaman dan halaman yang sama.

Menjaga reka bentuk anda konsisten adalah tentang menjadi profesional. Ketidaksesuaian dalam reka bentuk adalah seperti kesalahan ejaan dalam esei. Mereka hanya mengurangkan persepsi kualiti. Apa jua bentuk reka bentuk anda, dengan tetap konsisten, akan sentiasa membangkitkannya. Walaupun ia adalah reka bentuk yang buruk, sekurang-kurangnya membuat ia reka bentuk yang konsisten dan buruk.

Cara paling mudah untuk mengekalkan konsistensi ialah membuat keputusan awal dan berpegang kepada mereka. Walau bagaimanapun, dengan laman web yang sangat besar, perkara boleh berubah dalam proses reka bentuk. Apabila saya merancang FlashDen, sebagai contoh, proses itu mengambil beberapa bulan, dan pada akhirnya beberapa gagasan saya untuk butang dan imej telah berubah, maka saya terpaksa kembali dan menyemak semula halaman awal untuk dipadankan dengan tepat pada masa yang sama.

Mempunyai set gaya CSS CSS yang baik juga boleh pergi jauh untuk membuat reka bentuk yang konsisten. Cobalah untuk menentukan tag teras seperti <h> dan <p> dengan cara sedemikian rupa untuk membuat padanan lalai dengan betul dan jangan lupa mengingat nama kelas tertentu sepanjang masa.


Bacaan Lanjut:

Artikel ThinkVitamin Bagaimana CRAP adalah reka bentuk anda? membincangkan Pengulangan turun halaman dan betapa pentingnya. Artikel ini ditulis oleh Mike Rundle yang merancang 9rules, jadi anda tahu itu patut dibaca!

Dapatkan Buku Saya!

Menikmati artikel ini? Saya baru saja menyelesaikan sebuah buku mengenai freelancing yang boleh anda beli dalam talian sebagai e-book. Teruskan untuk mengetahui lebih lanjut mengenai Cara Menjadi Freelancer Rockstar.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.