Panduan profesional untuk reka bentuk UI

Pengarang: Randy Alexander
Tarikh Penciptaan: 25 April 2021
Tarikh Kemas Kini: 16 Mungkin 2024
Anonim
Speed Art Reka Grafik UI/UX Bahagian 1 (Figma)
Video.: Speed Art Reka Grafik UI/UX Bahagian 1 (Figma)

Kandungan

Semasa memulakan kerjaya, saya adalah pereka web. Saya bekerja dalam reka bentuk web selama empat tahun, bermula dengan laman web perniagaan kecil dan akhirnya beralih kepada pelanggan yang lebih besar. Saya mendapati bahawa bukan reka bentuk grafik yang menarik minat saya, dan juga tidak berusaha untuk mendapatkan nama jenama yang lebih besar. Saya lebih berminat dengan corak penomboran, cara orang berinteraksi dengan bentuk, dan perkara seperti prestasi yang dirasakan, daripada reka bentuk visual laman web.

Semasa saya menonton filem sci-fi, saya akan melihat antara muka. Dan ketika saya bermain permainan video, saya akan memerhatikan cara menu disusun. Sekiranya ada ciri-ciri ini yang tidak asing bagi anda, anda mungkin juga merupakan perancang UI.

Saya berhenti kerja agensi dan memulakan syarikat sendiri. Di halaman LinkedIn saya, saya cuba meringkaskan matlamat kerjaya baru saya: untuk membuat perisian yang terbaik. Sudah empat tahun saya bermula sebagai freelancer, dan perjalanan saya tidak berhenti. Hari-hari ini saya membantu menjalankan syarikat reka bentuk UI kecil yang dipanggil Mono. Kami baru-baru ini mengalu-alukan ahli pasukan keempat kami.


Dalam artikel ini, saya ingin menerangkan bagaimana rasanya menjadi pereka UI, termasuk apa sebenarnya pekerjaan yang dilakukan, di mana untuk mencari sumber pembelajaran terbaik, dan bagaimana untuk menjadi lebih baik dalam kraf anda.

Apa yang dilakukan oleh pereka UI?

Saya dapati secara amnya anda boleh membahagikan karya pereka antara muka pengguna kepada empat kategori. Anda berkomunikasi dengan pelanggan, anda membuat penyelidikan, anda merancang dan membuat prototaip, dan anda berkomunikasi dengan pemaju. Mari kita perhatikan setiap fasa ini dengan lebih terperinci.

Komunikasi pelanggan

Komunikasi pelanggan adalah mengenai memahami masalah pelanggan. Tujuannya adalah untuk memahami perniagaan pelanggan anda, jadi permulaan projek biasanya banyak bercakap. Anda tidak perlu terlalu banyak mengetahui tentang domain pelanggan anda semasa anda mula - anda boleh melihat perniagaan mereka dengan cara yang baru sambil anda memikirkan kemungkinan penyelesaian reka bentuk.


Untuk menjadi pereka UI yang baik, anda akhirnya perlu dapat berfikir seiring dengan perniagaan pelanggan anda. Sebagai contoh, pelanggan anda mungkin berada dalam penerbangan. Bekerja untuk mereka akhirnya akan membuat anda cukup berpengetahuan mengenai industri itu. Oleh itu, petua untuk kebahagiaan anda sendiri di sini adalah memilih industri yang anda kerjakan dengan bijak, jadi anda tidak akan menjadi pakar dalam sesuatu yang tidak anda minati atau tidak minat.

Semasa projek, komunikasi tidak berhenti. Sebagai pereka, anda akan mempersembahkan karya anda secara berterusan. Di syarikat kami, kami adalah pasukan terpencil, jadi kami tidak mengadakan banyak perjumpaan secara langsung. Sebaliknya, kami menggunakan perkongsian skrin dengan banyak melalui persidangan video. Alat komunikasi seperti Skype dan Slack digunakan setiap hari.

Ia berguna untuk menggabungkan kaedah komunikasi segerak dan tidak segerak. Panggilan sangat bagus jika anda memerlukan banyak maklumat dengan cepat, tetapi anda mesti berada dalam masa yang sama. Kami menganggap Slack sebagai ‘penyejuk air maya’ kami dan menggunakan Basecamp untuk menguruskan projek reka bentuk yang kompleks. Apabila kami merancang prototaip menggunakan HTML dan CSS, kami menggunakan GitHub Issues untuk membincangkan kod secara langsung.


Penyelidikan

Serta komunikasi pelanggan, anda akan melakukan banyak penyelidikan. Ini boleh merangkumi kajian lapangan, bengkel dengan pelanggan, menganalisis persaingan atau menentukan strategi - pada dasarnya, apa sahaja yang dapat membantu anda memahami masalah yang dihadapi.

Penyelidikan adalah apa yang memberitahu pilihan reka bentuk anda. Ini adalah artikel yang pernah anda baca, atau perkara baru yang baru dilancarkan oleh Apple. Apabila tiba masanya untuk menjelaskan mengapa anda membuat pilihan reka bentuk tertentu, penyelidikan anda menyokong anda.

Penyelidikan boleh menjadi sangat luas. Saya sering menguji peranti baru untuk tujuan penyelidikan atau mendaftar ke aplikasi web baru untuk mengkaji antara muka penggunanya.

Reka bentuk dan prototaip

Sebagai pereka, anda mungkin akan menghabiskan sebahagian besar masa anda untuk membuat reka bentuk dan membuat prototaip. Projek reka bentuk UI dapat bergerak maju dalam pelbagai cara, dari lakaran, reka bentuk terperinci, hingga pengekodan.

Kaedah yang anda gunakan bergantung pada jenis projek. Apa yang anda reka? Adakah laman web, atau anda lebih suka memanggilnya aplikasi? Adakah ia menggunakan teknologi asli? Adakah reka bentuk semula atau adakah anda bermula dari awal?

Di syarikat kami tidak ada proses yang tetap, tetapi kebanyakan projek mengikut urutan kasar yang sama: mereka bermula dengan lakaran dan bingkai kawat, pergi ke reka bentuk visual dan interaksi terperinci, dan diakhiri dengan prototaip.

Sebagai pereka, kami menghabiskan banyak masa untuk memikirkan alat kami. Walaupun alat yang hebat adalah penting, itu bukan perkara yang paling penting. Mampu menggunakan Adobe Creative Suite dan aplikasi seperti Sketch dengan cekap adalah setara dengan menggunakan pensil untuk menggambar atau berus untuk melukis. Anda masih perlu membuat lukisan itu.

Oleh itu, minat yang sihat terhadap alat adalah perkara yang baik. Saya suka mencuba alat baru yang dapat membantu saya menjadi lebih produktif. Alat penyunting vektor kegemaran saya adalah Illustrator, tetapi kebanyakan kerja reka bentuk visual saya dilakukan dalam Sketsa hari ini. Anggota pasukan yang lain telah beralih ke alat yang lebih baru seperti Affinity Designer.

Alat adalah pilihan yang sangat peribadi. Selagi kita dapat bekerjasama dengan mudah, setiap orang bebas memilih sendiri. Untuk menjadikannya lebih mudah untuk membincangkan reka bentuk kami dengan pelanggan, kami membuat prototaip dengan InVision. Untuk prototaip yang lebih maju, kami menggunakan HTML dan CSS. Alat yang anda perlukan semuanya bergantung pada pekerjaan yang ingin anda lakukan dengannya.

Komunikasi pembangun

Bahagian kerja pereka UI yang sering dilupakan adalah komunikasi pembangun. Hari-hari ini, anda tidak dapat melepaskan hanya dengan menghantar reka bentuk anda kepada para pemikir dan berharap ia dapat dilaksanakan dengan betul. Pereka terbaik tahu bahawa cabarannya bukan dalam membuat reka bentuk, tetapi dalam menyampaikannya - bukan hanya kepada pihak berkepentingan yang harus memberikan persetujuan mereka, tetapi juga kepada pemaju yang harus melaksanakannya.

Berkomunikasi reka bentuk terdapat dalam pelbagai bentuk: spesifikasi terperinci, menyediakan aset, mengkaji semula reka bentuk bersama. Apa yang masuk akal untuk disampaikan dalam setiap contoh sangat bergantung pada apakah proyek itu asli atau aplikasi web.

Pendekatan tradisional adalah untuk menyampaikan aset di sebelah reka bentuk skrin. Reka bentuk skrin boleh digunakan untuk melihat bagaimana reka bentuknya secara keseluruhan, sementara asetnya adalah ikon PNG dan SVG yang siap digunakan, jadi pemaju tidak perlu berurusan dengan penyunting grafik.

Di syarikat kami, kami menyokong penyampaian lebih daripada itu. Kami menggunakan panduan gaya komponen untuk membantu mengekalkan konsistensi dalam reka bentuk kami. Semasa kita berurusan dengan projek web, kami menyampaikan sekumpulan HTML dan CSS terperinci, didokumentasikan demi satu, siap untuk dilaksanakan. Saya percaya bahawa mempunyai perhatian dalam setiap fasa pengembangan perisian adalah satu-satunya cara untuk mencapai matlamat saya untuk mencipta perisian bertaraf dunia.

Web vs aplikasi asli

Apabila anda merancang aplikasi asli untuk platform (mis. IOS atau Android), anda cenderung mematuhi garis panduan tertentu. Semasa anda merancang untuk web, tidak ada banyak panduan. Apa yang biasanya berlaku ialah pelanggan anda mempunyai sekumpulan garis panduan grafik untuk jenama mereka yang menentukan bagaimana keadaannya.

Namun, garis panduan ini cenderung disesuaikan dengan laman web pemasaran, dan apa yang ada di dalamnya tidak selalu membawa kepada keputusan antara muka pengguna yang baik. Fon cenderung dipilih untuk alasan pemasaran, bukan untuk alasan keterbacaan. Warna mungkin berani dan mencolok, yang berfungsi dalam kempen iklan, tetapi tidak dalam aplikasi yang Anda gunakan sehari-hari. Panduan ini mesti ditafsirkan.

Terdapat beberapa garis panduan UI untuk web. Anda boleh berpendapat bahawa web adalah lebur pelbagai gaya. Sekiranya anda membuat sesuatu yang lebih terasa seperti aplikasi daripada laman web, anda perlu mengetahui mengenai kerangka kerja yang banyak digunakan seperti Bootstrap dan ZURB Foundation. Rangka kerja mula menentukan bagaimana keadaan kelihatan, kerana anda tidak mahu mencipta semula roda. Dan itu mungkin perkara yang baik.

Di syarikat kami, kami suka menggunakan Bootstrap. Ia menyediakan ukuran lalai yang masuk akal untuk elemen UI biasa seperti butang, jadual data dan modal.

Dalam reka bentuk web, anda lebih terkongkong oleh kemampuan teknikal web. Dulu sukar untuk menerapkan visual yang sederhana seperti sudut bulat di laman web. Hari-hari ini sudah lama berlalu - anda kini bebas melukis antara muka pengguna dengan banyak bayangan, peralihan, animasi dan juga 3D.

Sebagai pereka, lebih realistik untuk mengawal proses dan reka bentuk dalam penyemak imbas. Saya tidak melihat banyak pereka UI mengambil alih pengaturcaraan UI aplikasi asli, tetapi perancang yang melakukan HTML dan CSS aplikasi web adalah kejadian biasa. Sekiranya anda dapat membuat kod rekaan anda sendiri, anda akan memiliki kelebihan berbanding rakan sebaya anda, dan bagi saya itu satu-satunya cara untuk benar-benar memahami bagaimana web berfungsi.

Kekangan web

Anda akan segera mengetahui bahawa tidak semua trik hebat yang anda pelajari disokong dalam setiap penyemak imbas, dan itulah realiti merancang untuk web. Adalah baik untuk mengikuti prinsip-prinsip terkenal seperti peningkatan progresif, di mana anda memuatkan kandungan yang dipertingkatkan bila boleh, tetapi juga memikirkan bagaimana kandungannya merosot.

Baru-baru ini, 'memotong mustard' menjadi popular. Dipimpin oleh pasukan web BBC, ini melibatkan pembezaan antara penyemak imbas 'baik' dan 'buruk', dan memberikan pengalaman terhad kepada penyemak imbas 'buruk'. Walau bagaimanapun, ia hanya berfungsi untuk laman web kandungan.

Mengenai pengalaman seperti aplikasi, banyak orang membatasi sokongan kepada beberapa penyemak imbas terkemuka sahaja, untuk mempermudah pembangunan. Malangnya, ini membawa kita kembali ke situasi 1996 di mana anda memerlukan penyemak imbas tertentu untuk melihat kandungan.

Meningkatkan kemahiran anda

Oleh itu, bagaimana anda mengikuti perkembangan industri web yang pantas dan meningkatkan kemahiran anda? Mari kita lihat beberapa kaedah yang berbeza untuk meningkatkan kemahiran anda ...

Pengetahuan platform

Bahagian utama senjata pereka adalah pengetahuan platform. Anda harus mengetahui mengenai pelbagai sistem operasi, dan bagaimana orang menggunakannya. Sebagai pereka, kita cenderung menggunakan Mac, tetapi kemudian mudah lupa bahawa kebanyakan orang di luar sana menggunakan kotak Windows untuk menyelesaikan pekerjaan mereka.

Saya rasa anda hanya dapat memahami sesuatu sekiranya anda menggunakannya sendiri. Saya lebih suka menggunakan Mac saya untuk merancang, tetapi menghabiskan banyak masa untuk mengikuti evolusi pelbagai platform lain. Saya mempunyai beberapa salinan Windows yang dipasang di Mac saya sebagai mesin maya. Saya sibuk menguji binaan baru Windows 10 menggunakan Program Insider Microsoft untuk melihat pelbagai perubahan di UI.

Saya juga kerap membeli perkakasan baru untuk menguji cara kerjanya. Saya membeli Apple Watch hanya untuk menguji platform. Saya kemudian menjualnya kerana saya merasakan ia tidak menambah banyak kehidupan saya.

Lebih jauh dari ini, web dapat dilihat sebagai sistem operasinya sendiri. Ia terus berkembang, dengan ciri baru ditambahkan pada setiap vendor penyemak imbas setiap minggu. Sangat berguna untuk mengetahui aspek teknikal penyemak imbas, terutamanya mengenai kemampuan CSS dan grafik. Anda perlu mengetahui apa itu SVG dan WebGL, dan bagaimana anda boleh menggunakan API Animasi Web.

Setiap platform berkembang dari masa ke masa dan sebagai pereka antara muka pengguna, adalah tugas anda untuk terus mengetahui. Lagipun, apa sahaja yang anda reka tidak hidup secara terpisah, tetapi merupakan sebahagian daripada ekosistem perisian yang lebih besar.

Kembali kepada asasnya

Apa yang kita hadapi hari ini tidak begitu berbeza dengan apa yang kita hadapi 20 tahun yang lalu. Terdapat banyak nasihat yang baik dalam buku. Cuba Reka Bentuk Pertahanan untuk Web oleh Jason Fried dan Matthew Linderman dan Jangan Buat Saya Berfikir oleh Steve Krug sebagai permulaan.

Sekiranya anda tidak tahu mengenai konsep seperti modaliti dan perbelanjaan, anda perlu membaca. Anda harus dapat menjelaskan apa itu undang-undang Fitts. Undang-undang kedekatan Gestalt? Ini adalah roti dan mentega reka bentuk UI.

Dapatkan inspirasi dari permainan dan filem

Sebagai pereka UI, saya menggunakan sumber inspirasi lain untuk melakukan kerja saya. Saya mendapat banyak inspirasi dalam permainan. Beberapa permainan sangat kompleks, dan pereka UI harus menyelesaikan masalah antara muka kompleks yang sama dengan pereka UI yang mengerjakan projek perniagaan.

Permainan juga dapat menunjukkan trend. Minimalisme yang terdapat dalam menu Colin McRae Rally mengingatkan saya pada arah iOS7. Sebaliknya, reka bentuk animasi UI yang kini bergaya muncul dalam permainan bertahun-tahun yang lalu. Perpindahan dari skeuomorfisme ke antara muka yang berfungsi dan telanjang, dan 'reka bentuk rata' juga kelihatan dalam permainan. Bandingkan Oblivion 2006 dengan Skyrim 2011. Kedua-dua permainan adalah RPG dalam siri yang sama, tetapi perbezaannya sangat ketara.

Antaramuka futuristik dalam filem Marvel seperti Iron Man juga menjadi inspirasi bagi saya. Itu bukan contoh yang betul-betul boleh digunakan, tetapi menjadikan saya lebih memikirkan mengenai pengkomputeran secara keseluruhan. Adakah kita mahukan masa depan skrin, atau adakah kita mahu skrin hilang? Ini mungkin merupakan soalan yang baik untuk diajukan di sebuah pub yang penuh dengan pereka.

Anda berkembang sebagai perancang melalui kerja keras, ketekunan, bercakap dengan rakan sebaya, dan membaca banyak sekali. Kira-kira setahun yang lalu saya membaca sebuah karya di New York Times mengenai orang-orang yang berumur 80-an yang terus mengasah kerajinan mereka. Saya rasa saya baru bermula. Bagaimana dengan awak?

Menarik Hari Ini
Komputer riba Walmart terbaik pada tahun 2021
Baca Lebih Lanjut

Komputer riba Walmart terbaik pada tahun 2021

Panduan kami untuk komputer riba Walmart terbaik eme tinya dapat dilihat jika anda berada di pa aran untuk komputer baru. ama ada anda memerlukan komputer riba anggaran untuk membuat anda melalui kela...
Syria di luar talian kerana PBB menyatakan akses web sebagai hak asasi manusia
Baca Lebih Lanjut

Syria di luar talian kerana PBB menyatakan akses web sebagai hak asasi manusia

Dalam alah atu penjela an teori terbaik berbanding realiti yang pernah anda lihat dalam indu tri teknologi, warga yria mendapati ebahagian be ar perkhidmatan internet negara itu pada hari Jumaat pada ...
Jeffrey Zeldman pada Manifesto Reka Bentuk Web 2012nya
Baca Lebih Lanjut

Jeffrey Zeldman pada Manifesto Reka Bentuk Web 2012nya

Pada bulan April, Jeffrey Zeldman merancang emula laman web peribadinya ecara radikal, mencipta e uatu yang berani dan memecah belah. Diilhamkan oleh jeni yang menarik dan perkhidmatan baca-kemudian, ...