Grafik Produk 6 Teknik Membuat Imej Lebih Informatif

Pereka web telah menjadi sangat licik dengan teknik pemasaran. Kandungan halaman melayari sentiasa baik, tetapi apabila merujuk kepada imej perhatian pengunjung anda adalah bentuk media yang paling popular. Mereka tidak memerlukan bunyi seperti video demo dan mereka dapat dengan cepat menyampaikan maklumat penting dalam masa beberapa saat. Ia mungkin kelihatan mudah, tetapi terdapat beberapa teknik ketara untuk membina imej bermaklumat di laman web.

Ini termasuk label ciri, tangkapan skrin, perbandingan harga, dan butiran minit lain. Pereka web boleh menggunakan grafik maklumat untuk membuat model aplikasi baru, perisian, permainan video, atau banyak produk lain! Walaupun biasanya anda melihat teknik ini digunakan dalam bidang teknologi yang berlainan.

Lihat idea-idea di bawah di mana kami menawarkan bukan sahaja petua tetapi contoh-contoh kehidupan sebenar grafik produk yang indah yang penuh dengan maklumat yang hebat.

1. Buka pada Kandungan anda

Imej bermaklumat tidak boleh digunakan sebagai ganti kandungan laman web yang baik. Sebaliknya gunakan imejan untuk berkembang pada mata utama anda dan ilustrasikan mereka dengan jelas untuk pelawat anda. Salah satu cara terbaik untuk melakukan ini adalah membina demo kecil untuk menyerlahkan bidang penting tutorial. Dengan beberapa grafik maklumat dan tangkapan skrin, lebih mudah untuk mengekalkan minat pembaca Anda melalui setiap langkah.

Apabila anda cuba untuk menunjukkan tutorial perisian (seperti tutorial Photoshop), ia boleh menjadi sukar untuk menyampaikan mesej ke dalam teks bertulis. Pengunjung akan mendarat pada artikel anda dan dengan serta-merta mula sub-secara sedar menilai bahan tersebut dalam pecahan sesaat. Web Designer Wall mempunyai tutorial hebat untuk membina imej bulat CSS3 yang disertai dengan grafik yang berguna. Ini termasuk beberapa label dan tembakan dekat kesannya.

Pada laman artikel asal, imej ini menambah gambaran yang lebih jelas ke dalam kepala anda ke arah apa yang akan anda buat. Penulis telah menambah pautan demo kecil, tetapi mengapa tidak termasuk beberapa imej demo juga? Anda lebih cenderung menarik perhatian dengan pukulan demo berlabel yang betul.

Mencuba untuk elakkan menambah imej hanya demi kandungan media dalam jawatan anda. Jika anda boleh menerangkan kaedah atau alasan anda tanpa imej bermula di sini dahulu. Hanya selepas melihat kembali salinan web anda sekiranya anda mempertimbangkan untuk memindahkan semula beberapa mata dalam graf imej terperinci. Khususnya anda boleh mencari a Tutorial memerlukan lebih banyak isyarat visual kerana peningkatan kerumitan. Dua contoh boleh termasuk membina pangkalan data laman web atau jadual data.

2. Menyerlahkan Ciri-ciri Cemerlang

Oleh kerana setiap perisian / teknologi akan mempunyai banyak ciri, hampir mustahil untuk menjelaskan setiap bit. Bukan sahaja ini, tetapi sangat tidak mungkin pelawat anda akan membaca 20+ label pada graf maklumat anda. Melekat pada ciri-ciri yang paling menarik dan gunakan label untuk menjelaskan sedikit lebih mendalam.

Apabila menulis salinan web untuk kandungan label anda elakkan bahasa yang membosankan bila boleh. Jika pelawat melihat versi terkini permohonan anda, mereka mungkin tidak peduli dengan perubahan dalam skema warna. Bagaimanakah ia akan menjejaskan aliran kerja harian mereka? Sebaliknya mungkin Terangkan apa yang memberi manfaat kepada mereka, seperti panel antara muka baru atau sambungan multi-pengguna. Ini hendaklah pada umumnya ciri abstrak yang anda tidak boleh lihat hanya dengan “melihat” pada produk.

Mempunyai label sedemikian untuk menerangkan ciri-ciri ini secara terang-terangan akan memberikan tindak balas yang paling banyak. Pengunjung akan merasakan bahawa mereka dianggap sebagai pembeli pintar, matang yang mampu membuat keputusan mereka sendiri. Sekiranya mereka benar-benar menyukai ciri-ciri anda, ini akan memberikan lebih banyak usaha untuk membeli perisian atau produk anda.

Di bawah adalah contoh dari laman kemas kini Mozilla Firefox.

Anda dapat melihat pereka telah menggunakan garis curvy bertitik untuk menunjukkan label dan ciri-ciri baru. Ini sebenarnya adalah imej latar belakang yang diposisikan tepat di dalam bekas div. Mengejutkan semua teks label juga ditulis di dalam tag HTML (tidak hanya satu imej besar).

Saya rasa kaedah ini bukan hanya berguna untuk bot crawler Google, tetapi juga pengguna mudah alih yang biasanya tidak mengalami laman web penuh.

Juga perhatikan bagaimana ciri Panorama ke kiri menawarkan sedikit “Ketahui lebih lanjut” pautan. Ini mungkin amalan terbaik yang anda boleh masuk ketika membina grafik maklumat! Sekiranya anda mempunyai halaman ganti atau sauh di halaman yang sama pelawat anda boleh mengklik pautan ini untuk memahami lebih lanjut mengenai ciri-ciri rumit.

Ingat bahawa grafik bermaklumat digunakan untuk mempamerkan ciri-ciri penggoda dan produk dengan mudah kepada pelawat anda. Jadi walaupun anda terhad dalam ruang di sekitar grafik yang anda boleh sentiasa menawarkan peluang untuk belajar lebih banyak pada halaman luaran.

3. Mudah, Label Tidak Mengeluh

Label adalah aspek yang paling penting dalam membuat grafik produk yang bermaklumat. Pengunjung mungkin perlu memahami bidang yang berbeza dalam produk, perisian, tapak web, aplikasi mudah alih, dan lain-lain. Malangnya penggunaan jadual dan senarai bulleted hanya boleh dilakukan setakat ini. Apabila anda benar-benar perlu menerangkan ciri-ciri produk, penting untuk dipilih hotspot untuk pelabelan.

Komputer Apple mungkin merupakan contoh terbaik dari butiran label mudah. Anda mungkin dapat melihat teknik-teknik yang tepat pada grafik mereka apabila melihat lebih banyak tablet, komputer riba, atau iPhone yang terkenal. Ciri-ciri dan spesifikasi teknikal mereka pada umumnya sama seperti pengeluar komputer jenama-jenama lain. Namun model grafik mereka begitu murni sehingga produknya dijual secara praktikal.

Perhatikan bahawa apabila anda memecahkan proses itu lebih mudah daripada yang anda fikirkan! Grafik produk hanyalah bahagian standard reka bentuk laman web keseluruhan. Walaupun anda menjual baja atau cadar atau kad dagangan, anda mungkin boleh menggunakan teknik pelabelan ini untuk kegunaan yang baik. Dan walaupun Apple mempunyai beberapa grafik maklumat yang sangat sederhana, mereka bukan satu-satunya syarikat yang melakukannya. Cuba Googling sekitar untuk perniagaan di niche anda untuk melihat sama ada mereka sukan apa-apa label maklumat mewah atau skrin penggoda di laman web mereka.

4. Imejan dengan Kandungan Dinamik

Bagi sesetengah pemaju web, mungkin tidak mencukupi untuk membuat grafik grafik perisian anda. Mungkin terdapat banyak ciri unik yang anda ingin temui tetapi mengandungi sebahagian kecil daripada halaman web anda. Ia mungkin membina satu siri langkah pengenalan membawa anda pelawat sepanjang demo produk kecil.

Newsberry mengilustrasikan contohnya dengan teliti. Di halaman rumah mereka, anda akan melihat kawasan blok dengan navigasi mini kecil di bawahnya. Mereka termasuk 5 langkah sepanjang proses dengan tangkapan skrin yang berbeza dan beberapa teks deskriptif yang disertakan. Walaupun anda tidak tahu apa yang digunakan oleh Newsberry, mereka kandungan pengantar menerangkan perkara dengan jelas. Anda juga menawarkan beberapa pautan demo sepanjang siri slaid.

Apabila anda bergerak melalui kandungannya, anda perlu melihat banyak slaid mengandungi tangkapan skrin di dalam tetingkap pelayar kecil. Kesan ini sebenarnya sangat mudah untuk ditiru! Anda hanya perlu cari imej untuk digunakan sebagai imejan latar belakang anda dan muat semula tangkapan skrin untuk dimuatkan di dalamnya. Diberikan kesan ini tidak akan berfungsi untuk setiap produk, tetapi ia adalah cara yang baik untuk membingkai skrin dari aplikasi web.

5. Kosongkan Skrin dan Foto Produk

Adalah mungkin untuk memasukkan semua label dan ciri terbaik untuk produk anda tetapi masih hilang pada jualan. The tangkapan skrin dan foto yang anda pilih untuk grafik anda pada akhirnya sama pentingnya dengan semua butiran yang lebih halus. Pada Windows dan Mac OS X terdapat cara untuk mengambil tangkapan skrin seluruh desktop anda dengan pintasan papan kekunci. Menggunakan kaedah ini digabungkan dengan beberapa masa di Photoshop, anda boleh mengumpul demo ciri yang sangat menarik.

Sekiranya produk anda sangat rumit, anda perlu cuba menyusun beberapa imej yang berbeza. Contoh di atas dari laman web Tweetbot menggunakan bulatan biru untuk menunjukkan tindakan menoreh pada aplikasinya. Daripada tangkapan skrin tunggal dengan banyak label mempertimbangkan menggunakan galeri imej jQuery kecil untuk menggabungkan 3-5 grafik yang berbeza. Ini memberi anda lebih banyak peluang tumpu pada perspektif yang berbeza dari produk manakala pengunjung ditawarkan pengalaman yang lebih kaya.

Apabila anda mengambil gambar dari PC atau telefon pintar, gambar sentiasa disimpan pada zoom 100%. Editor imej seperti Photoshop mempunyai keupayaan untuk saiz semula ini, tetapi mereka sering kehilangan butiran. Jadi, bagaimanakah anda dapat memuatkan grafik sedemikian ke dalam laman web kecil anda? Salah satu teknik terbaik ialah pembesaran di mana anda skala aplikasi turun dan membuat bahagian yang diperbesar daripada kepingan yang paling penting. Teknik ini dilihat lebih umum dalam perisian daripada produk fizikal - saya telah terperinci proses reka bentuk di bawah.

6. Membina "Lensa Zum" Kesan

Saya akan membina langkah-langkah untuk membina kesan kaca pembesar dalam Adobe Photoshop. Jika anda menggunakan editor grafik lain, kemungkinan besar anda akan melakukan tugas yang sama, tetapi menu dan arahan akan berbeza.

Salah satu contoh terbaik teknik ini adalah pada laman utama Perkara untuk Mac. Grafik ini mempunyai aplikasi yang kecil sehingga ia akan sesuai dengan sempurna ke halaman, bersama dengan bayangan drop kecil. Walau bagaimanapun, beberapa kawasan penting anda akan melihat bulatan dengan kandungan di dalamnya lebih besar. Mereka bahkan telah menambahkan cahaya dalaman putih untuk muncul sebagai cahaya reframpil bersinar melalui lensa!

Bonus: "Zoom Lens" Kesan Tutorial Photoshop

Untuk mula mengambil tangkapan skrin yang anda ingin gunakan untuk grafik anda. Saya telah mengambil skrin cepat dari halaman rumah Hongkiat. Saya akan menanam hanya tetingkap penyemak imbas dan saiz semula kepada kira-kira 700px. Anda perlu mengubah saiz lebar agar sesuai dengan kawasan kandungan laman web anda sendiri. Sekarang buat lapisan baru di atas latar belakang ini dan buat pilihan pekeliling semasa memegang peralihan untuk memastikannya berkadar. Isikan mana-mana warna yang anda mahu.

Langkah 1

Menjaga bulatan yang dipilih, tukar mengisi% dalam panel lapisan hingga 0%. Di bawah lapisan FX tambahkan strok hitam 1px-2px dan cahaya dalaman putih. Anda boleh mengurangkan kelegapan untuk pencahayaan kurang putih.

Langkah 2

Masih mengekalkan bulatan yang dipilih bergerak ke lapisan latar anda dan tekan ctrl (Untuk pengguna Mac, ia perintah atau kekunci cmd.) + c untuk menyalin. Kemudian buat lapisan baru di atas latar belakang tetapi di bawah lingkaran pembesar dan tampal. Anda boleh memilih ctrl + j untuk menduplikasi lapisan baru dengan hanya memilih pilihan.

Tekan ctrl + t untuk membuka alat transform. Sekarang skala keluar lapisan pendua baru semasa memegang peralihan untuk memastikan segala sesuatu berkadar dan alt untuk mengekalkan pusat pegun.

Langkah 3

Tekan ctrl dan klik ikon lapisan kaca pembesar untuk membuat pilihan anda semula. Perhatikan anda masih harus menyerlahkan lapisan latar belakang yang diduplikasi dalam panel lapisan (yang terus dibawah kaca pembesar kami) yang bermaksud ia akan mempunyai latar belakang biru terang.

Tekan Ctrl + Shift + i untuk membalikkan pemilihan semasa. Sekarang tekan padam untuk membersihkan sampah tambahan dari tangkapan semula skrin kami. Untuk sedikit kesan tambah tarik menu FX lapisan untuk menambah bayang drop kecil. Anda juga boleh menarik garis vertikal 1px nipis dan menggunakan Penapis Liquify (Tapis> Liquify) buat pemegang kecil!

Kesimpulannya

Untuk merancang grafik produk yang hebat, anda mesti mengingati asas-asasnya. Pelawat hanya mahu memahami apa yang cuba anda jual! Cara paling mudah untuk mendapatkan maklumat ini adalah melalui satu siri tangkapan skrin atau satu grafik terperinci. Label adalah sekeping kedua untuk teka-teki ini, di mana anda boleh menggariskan set ciri yang paling penting.

Apabila anda meletakkan semua teknik ini bersama-sama, anda mungkin akan mula melihat gambaran yang lebih besar. Muat turun dan pembelian akan meroket - terutamanya jika anda meletakkan grafik depan dan pusat anda di halaman utama anda. Teknik-teknik ini sangat sesuai untuk pereka grafik dan web untuk memulakan dalam bidang reka bentuk produk. Kami telah terperinci beberapa idea abstrak, tetapi kami ingin mendengar pendapat anda di kawasan perbincangan di bawah!