Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe Photoshop
Webdesign

Merekabentuk Instrumen UI di Aplikasi Web Menggunakan Photoshop

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Robi'ah Ar Ro'yi (you can also view the original English article)

Final product image
What You'll Be Creating

Perkembangan berasaskan gaya menawarkan banyak pendekatan fleksibel untuk reka bentuk web moden.  Dalam tutorial ini, saya akan membimbing anda untuk mereka bentuk instrumen UI (Antara Muka Pengguna / Antara Muka Pengguna) dan juga menjelaskan membuat keputusan yang akan menjadikan instrumen UI kami konsisten dan boleh diguna semula.

Bekalan Tutorial

Untuk dapat mengikuti tutorial ini, anda memerlukan beberapa lekapan (tersedia percuma):

Menyediakan Dokumen Photoshop

Langkah 1

Buka Photoshop dan mulakan dengan membuat dokumen baru ( File> New ...) menggunakan tetapan seperti ditunjukkan di bawah.  Anda bebas menggunakan kanvas dengan mana-mana dimensi yang anda suka-selepas semua, web tidak mempunyai kawasan tetap.

Langkah 2

Mari kita sediakan beberapa garis tambahan supaya instrumen UI kami teroragnisir dan kemas.  Saya tidak selalu menggunakan grid, tetapi mengaturnya akan memastikan kebersihan dan konsistensi.  Pergi ke Lihat> Panduan Baru ... dan sediakan beberapa baris bantuan.  Saya biasanya memilih 1000px sebagai titik permulaan yang luas jadi mari kita simpan instrumen UI kami pada dimensi itu.

Nota: Garis bantu yang digunakan dalam tutorial ini: menegak pada 100px, 600px dan 1100px.

Petua: Anda juga boleh menggunakan plugin Photoshop Photoshop untuk membuat proses ini lebih cepat.

Langkah 3

Dipandu oleh Etiquette Photoshop kami akan memastikan perkara teratur dan mudah dalam navigasi dan mengedit.  Dalam persekitaran kerja, kami memerlukan instrumen UI ini untuk digunakan pada banyak kesempatan sebagai rujukan dan aset pembangunan.  Oleh itu, anda perlu menetapkannya secara rapi (pasukan pemaju akan sangat menghargai ini). Mari buat enam kumpulan lapisan yang dipanggil Typography, Buttons, Forms, Avatar, Picture, dan Color.

Untuk membuat kumpulan pergi ke Layer> New> Group ... dan beri setiap tajuk seperti yang disebutkan.  Untuk penciptaan yang lebih cepat klik ikon.

Mengenal pasti Typography

Seperti yang dikatakan Oliver Reicheinstein yang terkenal, " Reka Bentuk Web ialah 95% Typography ", jadi anda perlu membuat hak ini.  Pertama kita perlu menetapkan persekitaran yang sempurna untuk jenis anda; latar belakang yang neutral dan tidak mencolok.  Latar belakang dan tipografi harus ditetapkan pada tahap kontras yang munasabah untuk pembacaan mudah.  Untuk tutorial ini Mari kita gunakan warna halus warna-warna neutral abu-abu tetapi cukup berkuasa untuk memberikan aplikasi identiti.  Untuk tutorial ini, mari gunakan abu #e9eeef abu-abu dan tekan Alt + Backspace untuk latar belakang.

Langkah 1

Buka kumpulan Typography , gunakan Alat Jenis mendatar (T) dan pilih font Open Sans .  Open sans adalah jenis huruf moden yang mempunyai ketebalan yang pelbagai dan mempunyai rupa yang profesional tetapi juga selesa.  Cukup gaya untuk Tajuk, tetapi juga praktikal untuk badan web.

Open Sans mempunyai pelbagai varian, jadi untuk instrumen UI ini kita akan menggunakan satu font sahaja.  Sentiasa ingat bahawa anda perlu berhati-hati dalam menggunakan lebih daripada dua jenis huruf yang berlainan untuk projek anda kerana ia terdedah untuk membuat perkara yang anda lakukan dalam kekacauan.

Saya telah menetapkan warna latar depan kepada #000000 hitam kemudian menggunakan Alat Jenis Mendatar (T) dan fon yang telah disebutkan, Open Sans , dengan pilihan 55px Cahaya , masukkan bahagian tajuk.  Kami akan menggunakan tajuk dan tajuk model yang sama untuk judul lain untuk mengekalkan konsistensi.

Langkah 2

Sekarang kita perlu membuat hierarki untuk tipografi kita.  Sila semak artikel ini Bagaimana Membuat Modular Typography Skla oleh Ian Yates untuk memahami lebih baik mengenai sains dan kepentingan tipografi web.

HTML (HyperText Markup Language) mempunyai pelbagai tag yang akan membantu penyemak imbas menafsirkan kandungan halaman. Kebanyakan Tag ini digunakan khusus untuk tipografi web seperti  <h1>,<h2>, <h3> dan sebagainya Ia menerangkan tajuk utama, <h1> menjadi yang paling penting. Selepas itu terdapat <p> tag yang digunakan untuk perenggan. Tanpa mencari maklumat lanjut mengenai apa yang berkaitan dengan HTML, kita akan mengkaji rupa elemen berikut.

Menggunakan Alat Jenis mendatar (T) masukkan tajuk utama.  Saya menggunakan Open Sans (Light) 55px untuk h1, 44px untuk h2, dan 32px untuk h3, memberikan jarak 30px antara setiap.  Jarak adalah satu lagi perkara yang perlu dipertimbangkan.  Berikan ruang yang cukup supaya ketukan kekunci anda dapat dibaca dengan mudah dan kelihatan seimbang.

Nota: Saya menggunakan Ketebalan biasa untuk h3.  Sebagai teks menjadi lebih kecil, variasi Light mungkin menjadi lebih tidak boleh dibaca.

Langkah 3

Kami telah menetapkan tajuk utama kami, sekarang mari kita pergi ke teks kandungan sebenar.  Pertimbangkan semua variasi teks yang mungkin dan paparan pada instrumen UI anda, jadi pemaju boleh memohon apa yang anda telah merancang.  Fikirkan model utama dalam perenggan, berani, miring, dan pautan.

Untuk warna teks utama saya menggunakan kelabu #838383 , untuk tajuk hitam #000000 dan biru #006ee3 untuk warna pautan.

Tajuk harus tegas berwarna gelap daripada teks badan, untuk memberi kesan yang lebih besar.  Warna kandungan utama harus selesa dan mudah dibaca. Akhirnya, pastikan anda memilih warna yang berbeza untuk pautan anda supaya pengguna memahami bahawa mereka boleh mengklik pada mereka.

Nota: atau tajuk dan pautan dengan ketebalan fon Semibold untuk menjadikannya kelihatan lebih besar dan lebih penting. 

Mambuat Keys

Butang sangat penting untuk projek web kami.  Ia adalah pautan atau bentuk yang mudah pada kebanyakan masa, tetapi ia juga digunakan untuk fungsi Panggilan Untuk Tindakan (CTA) dengan mengarahkan orang di halaman untuk membuat keputusan lebih cepat.  Sngatlah adalah penting untuk mengekalkan paparan yang konsisten pada butang supaya pengguna akan terbiasa dengan ini sepanjang aplikasi.

Langkah 1

Kurangkan kumpulan Tipografi dengan mengklik ikon anak panah kecil dalam nama kumpulan dan membuka kumpulan Tombol .  Selepas itu buat beberapa alat menegak untuk membahagikan kawasan kandungan ke tiga kawasan yang sama dengan jarak 35px setiap satu.  Pergi ke Lihat> Panduan Baru ... dan tetapkan bantuan menegak berikut: 410px, 445px, 755px, dan 790px.  Di sinilah kita meletakkan butang kita supaya semuanya menjadi sama dan konsisten.

Langkah 2

Navigasi kembali ke kumpulan Tipografi , cari bahagian lapisan tajuk dan salinannya dengan mengklik CMD + J , kemudian pindahkan kumpulan Tombol dan ubahnya ke "Butang".

Kemudian masukkan tajuk status tiga butang: Normal, Float, dan On. Letakkannya di sebelah kiri tiga bahagian yang sama, dan terus ingat untuk memberikan jarak 35px antara kawasan pertama, kedua, dan ketiga.

Langkah 3

Kini tetapkan warna latar depan yang sebelum ini menggunakan biru #006ee3 dan buat kumpulan baru yang dipanggil Primary Normal .  Kemudian gunakan Alat Bulat Rectangle (U) , tetapkan Radius ke 3px dan lukiskan bentuk persegi dengan dimensi 310x44px.  Letakkannya di antara dua baris pertama di bawah tajuk "Normal".  Untuk mencapai hujung butang, tulis beberapa teks menggunakan #ffffff putih agar dapat dibaca dengan jelas.

Langkah 4

Sekarang duplikat kumpulan dengan Primary Botton klik CMD + J pada kumpulan dan namakan semula kumpulan ke Primary Hover  dan Primary Active .  Selepas itu letakkan dua kumpulan baru di bawah s = kedua-dua bahagian yang kami buat tajuk utama sebelum ini.

Apakah maksud hover dan aktif ?  Anda boleh bertanya Perkongsian menerangkan keadaan apabila butang apabila anda menggerakkan kursor tetikus ke arahnya, kami mesti menggambarkan beberapa maklum balas dari kekunci itu.  Pautan menjadi aktif apabila anda mengklik padanya.

Untuk membuat model terapung dan aktif dalam butang kami hanya menjadikannya lebih gelap.  Buat lapisan baru di atas butang bentuk dan isikan dengan hitam #000000 .  Selepas itu tahan butang Alt dan tetikus pada lapisan sehingga anda melihat ikon anak panah ke bawah, kemudian lepaskan untuk membuat Clipping Mask .  Akhirnya, mengurangkan kegelapan Opacity hingga 10%.

Nota: untuk butang aktif menambah lapisan hitam Opacity kepada 20%

Langkah 5

Sekarang pendua semua kumpulan butang sebelumnya dan tukar tajuk dan warna sekunder.  Kami akan menentukan warna instrumen UI kami kemudian dalam tutorial ini. Sekarang, pilih satu warna dan ganti warna biru sebelumnya. Saya menggunakan #36c265 hijau.

Merancang Borang

Borang adalah sangat penting dalam elemen aplikasi web kerana ini akan membolehkan pengguna memasukkan maklumat dan berinteraksi dengan aplikasi.  kami akan merekabentuk beberapa bentuk asas supaya pemaju boleh kekal pada model yang sama dan mengekalkan reka bentuk yang konsisten.

Langkah 1

Kurangkan Tombol Kumpulan dan buka kumpulan formulir .  Sekali lagi duplikat tajuk seksyen dari kumpulan terdahulu dan ubah ke "Borang".  Kami akan membuat beberapa jenis jenis input asas termasuk input teks, medan kata laluan, dropdown atau pilih lajur dan kumpulkan lajur (butang mudah).

Apabila merancang bentuk, kejelasan dan perkara yang biasa adalah faktor utama.  Jangan cuba percubaan.  Buat kumpulan baru dan namakan namanya kepada Nama .  Kemudian gunakan Alat Jenis mendatar (T) dan masukkan label lajur masukan, saya buat "Nama Pertama", gunakan font yang sama, Open Sans (Biasa) , hitam 18px #000000 .

Sekarang duplikat salah satu lapisan tomboldan bergerak dalam kumpulan Name .  Kemudian tukar latar belakang ke #fffff putih dan tambah 1px grey  di dalam #d5d5d5 .  Akhirnya, letakkan contoh input teks di dalam lingkungan persegi.  Sebagai contoh, saya menggunakan 16px Open Sans (Regular) dan #838383 out #838383 seperti yang digunakan dalam badan teks terdahulu.

Langkah 2

Buat beberapa lajur input dengan tajuk hanya dengan menggandakan medan input pertama.  Umumnya, untuk kata laluan / kata laluan menggunakan titik atau bintang *.  Lebih banyak lajur input sampel ditunjukkan di bawah.

Duplikat CDM + J salah satu daripada kumpulan butang, gerakkannya ke dalam kumpulan Formulir dan letakkannya di bawah medan input yang baru kami buat.  Sekali lagi, adalah penting untuk sentiasa konsisten dan menggunakan semula unsur-unsur yang telah dibuat sebelum ini.

Langkah 3

Dalam tutorial ini kita berpegang kepada antara muka pengguna yang paling asas yang boleh digunakan oleh aplikasi web yang sangat mudah.  Mari buat lagi jenis medan input; iaitu <select> .

Duplikasikan salah satu daripada kumpulan lajur dan letakkannya di antara garisan menegak ketiga dan keempat, pastikan untuk meratakan semuanya. Tukar nilai kepada apa sahaja yang anda mahu dan tambahkan ikon anak panah yang mudah untuk menunjukkan bahawa ini adalah lajur dengan menu lungsur turun.  Anda boleh mencari ikon anak panah anda pada Pemidang Ikon.

Langkah 4

Untuk membuat kerja pemaju lebih mudah, sekali lagi pastikan anda memasuki keadaan aktif.  Fikirkan bagaimana jatuh turun akan kelihatan apabila pengguna mengkliknya?  Ia adalah tugas pereka untuk membimbing pemaju untuk mewujudkan pengalaman yang konsisten dan koheren.

Duplikasikan kumpulan jatuh turun yang baru kami buat.  Menggunakan Alat Pemilihan Arah (A) klik pada sudut bentuk yang kami buat untuk melihat tepi, kemudian tahan kekunci Shift , pilih empat titik bawah dan tekan beberapa kali untuk melanjutkan bentuknya.  Teknik ini akan memastikan bentuk vektor yang anda buat dan simpan sudut yang tidak disentuh.

Selepas itu duplikasikan pilihan yang mungkin dan letakkan beberapa di bawah yang pertama.  Gunakan Alat Talian 1px (U) pada Berat untuk membuat pemisah mudah dan terakhir menukar warna anak panah untuk digunakan seperti butang untuk.  Ini akan membantu untuk menunjukkan bahawa lajur aktif.

Langkah 5

Kami akan mencipta senario mesej ralat mudah, seperti jikas seseorang memasukkan kata laluan terlalu lemah. 

Duplikat lajur CMD + J kata laluan yang telah dibuat dan letakkannya di bawah lajur lajur sebelumnya.  Setelah itu, ubah bingkai lajur ke warna merah nipis (saya menggunakan #eb8686 ) dan latar belakang menjadi abu-abu merah #e9dde3 .  Akhir sekali, pilih merah # b63131 yang lebih kukuh dan masukkan mesej ralat yang mudah.

Itulah proses membuat borang!  Saya telah mengkaji asas-asas tetapi sudah cukup untuk menjadi permulaan untuk mereka bentuk lebih banyak bentuk kompleks.

Avatar

Avatar adalah perkara biasa dalam hampir semua aplikasi web hari ini, jadi berguna untuk mempunyai beberapa visual untuk memudahkan proses komunikasi dan mengenal pasti pengguna.

Langkah 1

Kurangkan kumpulan yang tidak lagi diperlukan dan buka kumpulan Avatar. Gunakan Alat Ellipse (U) dan, tahan kekunci Shift , lukis bulatan 80x80px. Lawati uifaces.com dan ambil gambar.  Salin dan tampal di atas kalangan yang baru diwujudkan.  Tahan kekunci Alt dan masjid pada imej kecil imej sehingga anda melihat ikon anak panah kecil, kemudian lepaskan tetikus untuk membuat Mask Clipping .

Langkah 2

Adalah penting untuk berfikir tentang bagaimana Avatar akan digunakan dan dengan itu saiz yang berbeza akan digunakan oleh pemaju.  Sebagai contoh, imej avatar yang meningkat boleh digunakan pada halaman profil dan lebih kecil di bahagian komen.

Duplikat avatar dan skala CMD + T , tahan kekunci Shift untuk mengekalkan perkadaran.

Imej

Sebenarnya kita harus memasukkan imej sampel untuk menunjukkan bagaimana imej akan muncul dalam aplikasi anda.  Saya akan meletakkan gambar dalam bentuk bulatan ini untuk menunjukkan bahawa imej mesti mempunyai sudut bulat.

Langkah 1

Gunakan Alat Rectangle Bulat (U) dan lukiskan bentuk persegi di antara baris menegak di bawah kumpulan Avatar .  Selepas itu memilih imej, saya menggunakan salah satu dari unsplash.com, tetapkan saiz dengan CMD + T dan buat Clipping Mask .

Buat Warna

Sekarang kita akan membincangkan warna.  Palet warna pepejal sangat penting dan anda mesti belajar teori warna agar lebih memahami makna dan kepentingan warna yang anda gunakan.  Kami memilih untuk memilih warna selepas hujung proses, kerana sekarang kami mempunyai idea untuk melihat unsur-unsur yang kami perlukan untuk memberi gaya.

Langkah 1

Buka kumpulan Warna dan pilih salah satu warna yang anda gunakan untuk butang sebagai warna latar depan.  Selepas itu, gunakan Rectangle Tool (U)untuk menarik persegi.  Kemudian gunakan Alat Jenis Mendatar (T) dan tulis tajuk warna, atau untuk apa yang digunakan, contohnya. "Warna Utama" dan menyediakan kod warna dalam HEX, RGB atau sebarang format lain yang diperlukan.  Buat kumpulan baru, tulis nama warna dan letakkan semua lapisan di dalamnya.

Langkah 2

Sekarang pendua kumpulan warna CMD + J dan buat warna warna yang anda perlukan.  Biasanya, lebih baik jika anda mengekalkan empat hingga lima warna, kerana lebih daripada itu akan menjadikan unsur-unsur kelihatan tidak kemas pada akhirnya.  Belajar Kuler dan COLOURlovers untuk menginspirasi palet warna yang luar biasa.

Untuk tutorial ini yang anda lihat, saya menggunakan warna "Rendah" dan "Menengah", satu warna untuk teks badan, dan satu untuk tajuk, juga putih untuk input latar belakang.  Ini ditunjukkan seperti ditunjukkan di bawah.

Tahniah! Anda sudah selesai!

Inilah yang kita pelajari.  Panduan membuat gaya antara muka pengguna untuk aplikasi web.  Saya harap anda belajar dan memahami asas-asas untuk mencipta panduan gaya, mengambil keputusan dan bagaimana ini menguntungkan bagi projek itu.

Sekiranya anda mempunyai sebarang soalan atau masalah, jangan teragak-agak untuk PING saya di ruangan komen!

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.