Desain antarmuka untuk pengontrol industri

Halo! Nama saya George, saya seorang desainer.

Sementara kami semua pulang, saya memutuskan untuk berbagi pengalaman dalam mengembangkan desain antarmuka untuk otomasi industri, sehingga banyak profesional yang terlibat dalam desain aplikasi dan desain situs web. Tetapi tidak ada begitu banyak antarmuka khusus yang dirancang untuk mengelola sistem teknik.

Untuk beberapa alasan, secara umum diterima bahwa desain tidak diperlukan dalam industri ini, dan jika seorang insinyur tidak dapat memahami sistem, maka itu lebih menunjukkan kualifikasinya, dan bukan bahwa antarmuka dapat dipikirkan dengan buruk, informasi tersebut disajikan dalam satu set kacau, di mana tidak mungkin untuk menavigasi dengan cepat, yang, pada gilirannya, mengarah pada kesalahan kerja dan pengguna.

Pertama, saya akan memberi tahu Anda cara membuat antarmuka panel kontrol sistem ventilasi untuk perangkat lunak Segnetics. Kami memulai proyek dengan mempelajari pengguna dan lingkungan operasi. Kami mempelajari dan memodelkan secara rinci bagaimana dan di mana panel kami akan digunakan. Seringkali ini adalah ruang teknis semi-gelap, pengaturan di papan atau instalasi. Menyadari hal ini, mereka mulai mencari analog dan cara untuk menyelesaikan masalah serupa. Kami membahas banyak antarmuka: perangkat medis, mobil, manajemen sistem produksi, dll. Kami memutuskan bahwa kami menyukai gaya antarmuka instrumen pesawat modern, keunggulan utamanya adalah bahwa pilot harus membaca hanya informasi penting yang dibersihkan dari kebisingan visual secepat mungkin. Prinsip ini kami meletakkan dasar untuk seluruh antarmuka masa depan dan beralih ke pembuatan prototipe.







Pada tahap awal, kami membuat sketsa blok utama dalam ukuran alami layar dan menuangkan program ke controller untuk memeriksa area di mana elemen ditekan, logika transisi.
Setelah menyetujui tata letak, kami beralih ke membuat sketsa pencarian. Kami melewati sejumlah besar opsi untuk sketsa dan gaya. Mereka kira-kira mengerti apa yang kami inginkan, memutuskan untuk mencoba studi yang lebih rinci, tetapi hanya sebagian kecil. Datar? Skeuomorfisme? Mungkin mengambil gaya menggambar grafik?







Perlahan-lahan kita menemukan gambar yang cocok untuk kita dan mulai belajar. Layar utama yang digunakan operator untuk berinteraksi adalah diagram mimic. Ini harus menampilkan parameter penting dari aliran masuk dan buang, status dan status perangkat dalam sistem. Kami melihat beberapa trik dalam pesawat, mengumpulkan diagram mimik, menontonnya pada beban maksimum, dan bagaimana itu akan terlihat 90% dari waktu.











Kami menyetujui gaya umum dan beralih ke pengembangan layar yang tersisa. Yang paling menarik adalah layar pengaturan tugas. Kami membahas beberapa opsi - pemilih ponsel, memasukkan nomor dari keyboard, dll. Dan mereka memutuskan bahwa itu keren untuk membuat peredupan sentuhan untuk pengaturan kasar suatu angka, dan tombol + \ - untuk yang lebih akurat. Di sini saya ingin mengucapkan terima kasih banyak kepada programmer Segnetics, yang membuat roda tuning berputar dengan lancar dan bermain dengan baik selama berhenti. Benar, ternyata sangat tinggi.

Kami bekerja melalui semua layar dan perangkat animasi, menyatakan. Kecelakaan, pembekuan, putus di sabuk, bagaimana bra filter meningkat dan mengempis selama awal dan berhenti sistem. Bagaimana bilah kemajuan diisi.









Pada langkah berikutnya, kami mengadaptasi antarmuka panel kontrol untuk digunakan pada pengontrol lain. Kami menambahkan fungsi membuat jadwal, mengubah layar utama, karena pengontrol ini hanya dapat mengontrol instalasi tertentu, sementara panel mendukung pengelolaan beberapa sistem.







Pelanggan proyek berikutnya adalah jaringan cuci mobil swalayan Moscow Cooga.

Saya punya teman programmer yang memimpin kursus pemrograman bagus untuk insinyur di sini (plc-edu.pro), dia bertanya kepada saya. "Gog, aku sedang melakukan program cuci mobil swalayan di sini. Pelanggan ingin semuanya terlihat profesional dan keren. Bisakah Anda membantu kami dengan ini? "

Sebagai seorang desainer, saya harus merumuskan logika interaksi antara pengguna dari berbagai tingkatan dengan antarmuka. Memahami data apa yang harus dilihat semua pengguna, dan akses apa yang dibutuhkan hanya melalui kata sandi. Bagaimana membangun logika tugas pengaturan sehingga intuitif dan tidak memerlukan manual multi-halaman?

Untuk memulai, saya membuat daftar peran dan langkah-langkah yang penting bagi mereka. Apa yang perlu dilakukan untuk mengimplementasikan skenario ini atau itu.



Sebagai hasilnya, kami mendapatkan prototipe interaktif di Fig, yang menampilkan semua fungsi dan tindakan dasar. Pada prototipe ini, saya melakukan beberapa tes untuk menguji hipotesis desain dan logika.



Seperti apa tampilan antarmuka pada akhirnya, tidak kalah pentingnya (walaupun banyak orang berpikir berbeda) daripada bagaimana layanan ini bekerja. Penampilan membentuk kesan layanan. Itu menciptakan suasana hati. Membangun koneksi emosional antara perangkat seseorang. Ini adalah desain yang membuat penggunaan layanan menyenangkan. Jika Anda ingin membangun hubungan yang panjang dengan klien Anda, perhatikan hal ini. Setelah menggambar semua ikon, tombol, dan statusnya, kami melanjutkan ke pemrograman.







Di sini saya ingin berbicara secara terpisah tentang bagaimana Figma membuat hidup lebih mudah. Saya menggambar antarmuka ventilasi pertama saya di Illustrator. Saya harus memotong ratusan elemen dan status mereka di PNG, menyimpan banyak folder. Buat markup piksel-demi-piksel dari posisi elemen pada layar. Untungnya, hari ini semua ini tidak perlu. Kami menambahkan programmer ke file kerja Gambar dan dia sudah bisa melihat pada tahap prototipe mana mekanik akan digunakan dan memberikan penilaian sendiri tentang kemungkinan.

Proyek kecil lainnya adalah antarmuka pameran untuk meniru pengoperasian pengontrol pompa panas untuk Thermex.

Saya tidak akan mengulangi lagi, caranya sama - dari tujuan penggunaan dan prototipe hingga panduan akhir kecantikan. Proyek ini selesai 2 minggu dari penandatanganan kontrak hingga OK akhir dari klien.











Sejalan dengan proyek otomatisasi, saya bekerja pada antarmuka sistem medis. Aplikasi untuk dokter dari departemen penerimaan, aplikasi untuk dokter distrik yang pulang. Antarmuka registri dan desain sistem resep obat. Jika tertarik, saya akan memberi tahu Anda lain kali.

Terbuka untuk kerja sama dan saya akan berterima kasih atas kritik yang membangun!