animasi 2D

Tumbuh, akhir pekan adalah tentang ibadah dalam rumah tangga Hinman. Minggu pagi yang disediakan untuk ibadah ritual melelahkan ditentukan oleh orang tua saya. Untuk itu diperlukan berdandan dalam pakaian tidak nyaman, pergi ke gereja dan pura-pura mendengarkan khotbah bertele-tele tentang Yesus (sementara aku menarik corat-coret di buku nyanyian).

Sabtu, bagaimanapun, disediakan sebagai hari ibadah saya, dan saya adalah seorang murid bangga dan berdedikasi gereja Saturday Morning Cartoons. Setiap Sabtu, hujan atau cerah, sehat atau sakit, aku akan melompat dari tempat tidur, lari ke bawah untuk ruang tamu, menanam diri di depan TV, dan merayakan Injil Wonder Woman, Captain Caveman, Scooby Doo dan Papa Smurf selama berjam-jam. Sementara orang tua saya jauh dari antusias tentang pilihan saya agama, mereka ditoleransi sebagai bentuk quid pro quo untuk Minggu kehadiran di gereja.

Sedikit yang baik dari kita tahu bahwa jam-jam dedikasi fanatik pada Injil Sabtu pagi pemrograman kartun akhirnya akan berubah menjadi aset berharga kejuruan. Saya membayangkan bahwa banyak dari Anda membaca ini adalah anggota jemaat yang sama - kelompok kita yang mengenali perbedaan halus namun penting agama antara kartun masih-frame (seperti yang ditemukan dalam komik bagian dari koran Minggu) dan TV animasi kartun sebelumnya, yang kami dengan senang hati mengambil persekutuan jus jeruk dan sereal setiap Sabtu pagi. Kami adalah orang-orang yang memahami apa yang menambahkan gerakan untuk sesuatu yang datar dan tak bernyawa dapat melakukan Gerakan. Menghembuskan kehidupan ke dalam segala sesuatu yang disentuhnya.

Kartun animasi seperti Wonder Woman, Scooby Doo dan Captain Caveman mengajari saya bagaimana pergerakan dapat bernapas kehidupan ke dalam gambar.

Menambahkan gerakan untuk apa pun - apakah serangkaian gambar atau transisi antara layar dalam pengalaman digital - ". Menambahkan air" tidak semudah Ini adalah seni yang membutuhkan kesabaran, mata untuk kehalusan dan studi yang cermat tentang bagaimana benda-benda dan orang bergerak melalui ruang dan waktu.

Transisi dan animasi berbasis gerak halus muncul sebagai bahan desain ponsel baru dan menarik, layak untuk dipelajari dan digunakan dengan efisiensi dan rahmat. Penambahan gerakan untuk pengalaman mobile yang dapat memberikan kejelasan, informasi tentang konteks dan, terus terang, sejumput sukacita dan menyenangkan. Namun, animasi atau transisi yang funky terlalu banyak dapat menghancurkan pengalaman mobile yang sangat baik. Hal ini membuat pemahaman prinsip-prinsip di balik seni animasi terbaik langkah pertama untuk berseni menerapkan gerakan untuk pekerjaan desain Anda.

Orang-orang yang memahami hal ini lebih baik daripada siapa pun adalah legiun animator brilian yang telah bekerja di Walt Disney. Untungnya bagi kita, dua animator dengan nama Ollie Johnston dan Frank Thomas memutuskan untuk menggoreskan pena di atas kertas dan berbagi dengan dunia animasi prinsip dasar yang digunakan oleh Disney animator selama proses pembuatan film dalam buku mereka, The Illusion of Life: Disney Animation .

Anda mungkin bertanya-tanya apa yang animasi harus dilakukan dengan pengalaman pengguna mobile. Sedangkan bentuk seni animasi dulunya asalnya dari film animasi dan televisi, telah menemukan jalan ke komputer dan pengguna digital pengalaman alam. Animasi Artful memiliki semua tetapi menyerang pengguna pengalaman lapangan mobile. Apakah itu adalah transisi antara layar dari pengalaman mobile atau perilaku diterapkan pada elemen UI yang dapat berinteraksi dengan menggunakan gerakan, gerak telah menjadi elemen desain ponsel yang signifikan. Ini adalah bahan desain yang dapat digunakan untuk membantu pengguna panduan melalui pengalaman ponsel Anda buat.

Mengambil isyarat dari Johnston dan Thomas, bab ini menjelaskan 12 prinsip dasar animasi, dipinjam dari buku mereka 1981 Illusion of Life: Disney Animation. Meskipun awalnya dikembangkan untuk film animasi dan televisi, prinsip-prinsip ini benar-benar berlaku untuk pengalaman berbasis disaring, juga. Jika diterapkan dengan kehalusan dan kemahiran, gerak dapat meningkatkan kerja mobile Anda, memberikan sentuhan sedikit sihir yang Anda alami setiap Sabtu pagi sebagai seorang anak.

The Illusion of Life: Disney Animation, oleh Frank Thomas dan Ollie Johnston, menguraikan 12 prinsip dasar animasi.

Berikut adalah 12 prinsip dasar animasi:

1. Squash dan stretch
2. Antisipasi
3. Pementasan
4. Lurus ke depan dan menimbulkan-to-berpose
5. Ikuti melalui dan tindakan tumpang tindih
6. Lambat masuk dan keluar
7. Arcs
8. Tindakan Sekunder
9. Pemilihan waktu
10. Berlebihan
11. Gambar Padat
12. Banding

12 Prinsip Animasi

PRINSIP 1: SQUASH DAN PEREGANGAN

Orang-orang dan benda memiliki massa yang melekat. Ketika sebuah benda bergerak, kualitas gerakan sering menunjukkan kekakuan objek. Buatan manusia benda dunia nyata, seperti rak buku atau kursi kayu, yang kaku dan memiliki fleksibilitas sedikit. Permukaan lembut, seperti pakaian, benda-benda organik dan daun tanaman, memiliki kurang kekakuan dan fleksibilitas yang lebih tinggi. Squash dan stretch adalah prinsip animasi yang digunakan untuk akurat mengungkapkan kekakuan obyek.

Benda organik dan lembut-permukaan, seperti balon penuh air, memiliki beberapa tingkat fleksibilitas dalam bentuk mereka. Squash dan stretch adalah prinsip animasi yang membantu menggambarkan kualitas ini dalam animasi.

Pertimbangkan untuk menggunakan prinsip ini ketika Anda memutuskan apa perasaan Anda ingin pengalaman mobile Anda untuk membangkitkan sebagai pengguna terlibat dengan itu.Apakah pengalaman mobile Anda dunia pesawat solid, permukaan kaku dan gerakan tajam, tepat? Atau sebuah dunia yang lebih organik, dengan lembut, permukaan lentur dan mudah, gerakan anggun? Squash dan stretch dapat membantu Anda mengekspresikan gerakan-gerakan.

Layar transisi di Flipboard menunjukkan prinsip squash dan peregangan untuk mengungkapkan bahwa permukaan dalam dunia aplikasi yang kaku dan papan-seperti. Sebaliknya, transisi layar di Apple iBook menggunakan prinsip squash dan peregangan untuk menggemakan gerakan fleksibel dan organik membalik-balik halaman buku kertas nyata.

PRINSIP 2: ANTISIPASI

Ketika ilustrator menggambarkan objek bergerak atau karakter, tiga tahap yang berbeda harus dipertimbangkan untuk membuat gerakan objek realistis:

• Persiapan untuk tindakan,
• Tindakan itu sendiri,
• Hasil dari gerakan.

Entah itu adonan bisbol berliku sebelum ayunan atau yang takut dari musim semi sebelum itu bermunculan, antisipasi adalah prinsip animasi digunakan untuk menyiapkan obyek untuk gerakan. Antisipasi adalah tentang merancang komponen adegan - pencahayaan, komposisi atau bahkan bentuk dari suatu obyek atau karakter - untuk memberikan pemirsa petunjuk tentang apa yang akan terjadi.

The crouch dari bowler, penutupan sebelum mengayunkan bola bowling, adalah contoh dari pose dan gerak yang prinsip antisipasi menangkap.

Mirip dengan penerapannya dalam film animasi dan kartun, bila diterapkan ke dunia UX mobile,antisipasi adalah semua tentang memberikan wawasan pengguna ke apa yang akan terjadi selanjutnya. Sebagai contoh, prinsip dapat diterapkan pada pengobatan visual antarmuka seperti pengguna membuka aplikasi. Hal ini juga dapat diterapkan pada transisi antara pengalaman. Karena bahasa isyarat relatif baru bagi pengguna, prinsip antisipasi juga dapat digunakan untuk memberikan affordance untuk gestural UIS. Antisipasi memberikan petunjuk tentang kecepatan dan arah bahwa benda-benda di UI dapat bergerak dan kemungkinan gestural dari objek tersebut.

Aperture animasi ditemukan di aplikasi kamera dari banyak smartphone mempersiapkan pengguna untuk tindakan mengambil foto.

Cara kartu di Palm Pre UI bergerak adalah affordance bagi pengguna, memberi mereka wawasan ke dalam bahasa gestural dari UI.

Tirai jendela animasi pada layar awal Windows Phone 7 menggunakan prinsip antisipasi dengan memberikan pengguna mengintip ke UI ubin dinamis telepon.

PRINSIP 3: STAGING

Orang-orang tertarik untuk menjual properti sering "panggung" rumah, yang berarti mereka mengatur setiap kamar sedemikian rupa bahwa tujuannya adalah benar-benar jelas. Prinsip pementasan dalam animasi mirip, karena pementasan yang baik membuat ide sentral dari sebuah animasi benar-benar jelas untuk pemirsa. Dalam dunia pengalaman pengguna mobile, prinsip pementasan yang paling relevan ketika mempertimbangkan transisi antara layar dan interaksi. Sebuah interaksi yang baik dipentaskan menggabungkan cahaya, warna, komposisi dan gerak untuk mengarahkan mata pengguna untuk persis di mana itu perlu karena mereka berinteraksi dengan pengalaman. Pengalaman ponsel yang dipentaskan memiliki rasa aliran dan kemudahan, sedangkan yang buruk dipentaskan merasa terputus-putus.

Ilustrasi yang dipentaskan di sebelah kanan membuat ide sentral - dua karakter terlibat dalam percakapan - benar-benar jelas. Ilustrasi buruk dipentaskan di sebelah kiri meninggalkan dinamis antara dua karakter terbuka untuk interpretasi, membuat ide sentral tidak jelas.

Staging adalah pertimbangan penting namun halus ketika menerapkan animasi dan gerakan untuk pengalaman mobile. Tantangan utama dalam menciptakan user interface alami adalah bahwa mereka tidak memiliki jangkar konseptual yang kuat. Akibatnya, pengguna yang baru untuk UIS alami sering merasa anchorless karena mereka menavigasi pengalaman touchscreen.Jika Anda menerapkan baik, pementasan yang kuat untuk animasi dan transisi dari pengalaman mobile Anda, maka pengguna akan merasa lebih membumi ketika mereka berinteraksi dengan itu.

Pementasan yang baik digunakan dalam versi iPad dari Keynote memungkinkan pengguna untuk melihat secara tepat di mana file mereka saat ini bekerja pada kehidupan di struktur file aplikasi. Penggunaan halus ini pementasan membuat nuansa pengguna didasarkan pada pengalaman.

PRINSIP 4: STRAIGHT-DEPAN DAN POSE-TO-POSE

Lurus ke depan dan berpose untuk berpose adalah teknik yang berhubungan dengan proses menggambar animasi. Dalam rangka untuk menangkap tindakan cepat dinamis dengan gerakan yang tidak biasa, animator akan menggunakan teknik lurus ke depan dan menarik setiap frame tunggal animasi. Pose-to-berpose menggambar teknik mempekerjakan penggunaan keyframes (yaitu frame penting berurutan) dan di-perantara (yaitu frame menengah yang mengekspresikan gerakan antara keyframes).

Ilustrasi di atas menggambarkan teknik lurus ke depan di mana setiap frame dari animasi yang diberikan. Ilustrasi di bagian bawah mewakili keyframes yang akan digunakan dalam animasi berpose-to-berpose.

Sebagian besar animasi dan transisi yang digunakan dalam pengalaman selular menggunakan teknik animasi berpose-to-berpose. Pose-to-pose yang biasanya sudah cukup untuk transisi yang tidak terlalu rumit dan yang dapat dijelaskan dengan mudah. Jika Anda ingin memasukkan gerakan yang tidak biasa atau dinamis dalam pengalaman Anda yang tidak dapat dicapai dengan menggunakan berpose-to-berpose, maka Anda mungkin akan perlu untuk menggabungkan teknik lurus ke depan.

Permainan populer seperti Plants vs Zombies untuk mempekerjakan iPad berpose-to-berpose teknik animasi.

Game dengan gerakan yang lebih kompleks, seperti dalam permainan iPad Fruit Ninja , menggunakan teknik animasi lurus ke depan untuk menangkap gerak dinamis.

PRINSIP 5: TINDAK MELALUI AKSI DAN TUMPANG TINDIH

Bayangkan seekor anjing besar dengan rahang raksasa gemetar sisi kepala ke sisi. Gerakan dinamis kulit lembek di wajahnya saat ia menggeleng ke sana kemari adalah contoh dari prinsip animasi kelima: tindak lanjut dan tindakan yang tumpang tindih. Sementara antisipasi harus dilakukan dengan persiapan tindakan, tindak lanjut melibatkan akhir dari suatu tindakan.Tindakan jarang datang ke berhenti mendadak dan lengkap, melainkan datang ke sebuah akhir bertahap. Tindak melalui menangkap bagaimana bagian-bagian dari suatu objek (seperti rahang anjing) terus bergerak bahkan setelah bagian lain dari objek (seperti kepala anjing) telah berhenti bergerak.

Tindak melalui menangkap betapa berbedanya bagian dari sebuah objek bergerak pada tingkat yang berbeda (seperti kepala anjing bergerak pada tingkat yang berbeda dari telinga atau rahang).

Sekarang bayangkan bahwa anjing berjalan menyusuri trotoar dengan pemiliknya. Seluruh tubuhnya bergerak, tapi waktu kakinya berbeda dari waktu ekornya atau kepala. Tumpang Tindih tindakan adalah prinsip animasi yang menangkap bagaimana bagian-bagian dari sebuah objek - seperti kepala anjing, ekor dan kaki - bergerak pada tingkat yang berbeda. Menangkap gerakan, serta sedikit variasi dalam waktu dan kecepatan bagian ini, membuat benda-benda tampak lebih alami. Suatu tindakan tidak boleh dibawa ke benar-benar berhenti sebelum tindakan lain telah dimulai. Tumpang tindih mempertahankan aliran antara frase mandiri tindakan.

Sementara elemen UI dari pengalaman mobile harus bekerja sama untuk membentuk keseluruhan, tindak lanjut dan tindakan tumpang tindih dapat membantu Anda menentukan dan mengkomunikasikan hubungan antara elemen UI. Transisi dan animasi adalah cara yang bagus untuk mengungkapkan bagaimana elemen UI saling berhubungan.

Transisi ke dan dari ubin dinamis pada Windows telepon menggunakan prinsip tindakan tumpang tindih. Ubin tidak melakukan perjalanan sebagai satu unit, melainkan setiap ubin bergerak pada tingkat yang berbeda.

PRINSIP 6: DALAM LAMBAT DAN OUT

Apakah itu mobil mengupas keluar dari berhenti mati atau sprinter meledak keluar dari blok dan membuat trek dalam perlombaan, benda perlu waktu untuk mempercepat dan memperlambat.Prinsip animasi keenam, lambat masuk dan keluar, berkaitan dengan jarak yang diperlukan untuk secara akurat menggambarkan hukum yang melekat inersia yang mengatur semua benda dan orang-orang.

Objek dalam dunia perlu waktu untuk mempercepat dan memperlambat. Sebuah strategi untuk secara akurat menggambarkan jenis gerak adalah dengan menambahkan lebih banyak frame objek dekat awal dan akhir gerakan dan sedikit di tengah.

Menambahkan frame objek dekat awal dan akhir gerakan dan frame sedikit di tengah menciptakan ilusi efek inersia.

Prinsip ini bekerja untuk karakter bergerak antara dua pose, seperti duduk dan berdiri, dan untuk benda bergerak benda mati, seperti bola memantul. Sementara pengalaman kami buat untuk mobile UX sering hidup di dunia lain - dunia di balik kaca dari perangkat mobile - yang memungkinkan beberapa hukum fisika untuk ada di dunia yang akan membuat pengalaman-pengalaman yang lebih relatable kepada pengguna. Entah itu perbedaan yang halus dalam waktu dalam cara daftar gulungan data atau transisi animasi yang muncul sebagai aplikasi terbuka, lambat masuk dan keluar akan membuat frase gerak pengalaman aliran Anda dengan cara yang terasa alami bagi pengguna.

Prinsip lambat masuk dan keluar yang diterapkan pada gulungan daftar di banyak UIS mobile.Lebih frame berada di awal dan akhir gerakan. Efek ini membuat UI tampak seolah-olah itu diatur oleh hukum inersia.

Lebih frame berada di awal dan akhir dari transisi bergulir dari layar awal pada iPhone, membuat ikon aplikasi merasa seolah-olah mereka mematuhi hukum inersia.

PRINSIP 7: ARCS

Benda tidak bergerak melalui ruang secara acak. Sebaliknya, mereka bergerak sepanjang jalur yang relatif diprediksi yang dipengaruhi oleh kekuatan-kekuatan seperti dorong, hambatan angin dan gravitasi. Garis besar kembang api pada Empat Juli atau tanda selip di trotoar dari mobil pengereman jejak fisik jarang jalur ini, biasanya, lintasan obyek tidak terlihat.

Lintasan obyek sebagian besar tak terlihat, kecuali pada kesempatan langka, seperti kembang api menyala yang percikan bercahaya melacak jalurnya.

Sementara jalur ini sebagian besar tak terlihat oleh mata manusia, pola ada untuk lintasan berdasarkan apakah objek tersebut organik atau mekanis. Objek yang bersifat mekanis, seperti mobil, sepeda dan kereta api, cenderung bergerak sepanjang lintasan lurus, sedangkan benda-benda organik, seperti tanaman, manusia dan hewan, cenderung bergerak sepanjang lintasan melengkung. Objek yang ingin menghidupkan harus mencerminkan karakteristik ini untuk realisme yang lebih besar.

Ketika mengintegrasikan gerakan menjadi pengalaman mobile, mempertimbangkan apakah obyek yang animasi harus mencerminkan kualitas organik atau mekanis. Jika yang pertama, maka prinsip animasi busur menunjukkan bahwa objek harus bergerak sepanjang lintasan melengkung. Jika yang terakhir, maka objek akan bergerak sepanjang jalan yang lurus.

Unsur alami seperti ikan dan air dalam aplikasi iPhone ini bergerak di sepanjang lintasan melengkung.

Elemen antarmuka pada platform mobile Android cenderung bergerak sepanjang garis lurus, memberikan UI perasaan mekanik.

PRINSIP 8: AKSI SEKUNDER

Bayangkan tupai berlari di rumput dan kemudian melompat ke pohon. Pergerakan kaki tupai (dianggap sebagai tindakan primer) akan animasi untuk menekankan hewan cahaya, gesit, kiprah sigap. Tangkas, gerakan bergelombang ekor tupai (tindakan sekunder) akan menjadi tipe yang terpisah dan sedikit berbeda dari gerakan yang mendukung tindakan utama.

Tindakan utama dari animasi ini adalah gerakan tubuh tupai dan kaki. Bentuk dan karakter ekor tupai ketika bergerak adalah tindakan sekunder. Bersama-sama, mereka membuat animasi terasa lebih realistis.

Ekor tupai adalah contoh tindakan sekunder, yang mendukung tindakan utama dari urutan animasi tanpa mengganggu dari itu. Tindakan sekunder diterapkan untuk memperkuat suasana hati atau memperkaya tindakan utama dari sebuah adegan animasi. Kunci untuk tindakan sekunder adalah bahwa hal itu harus menekankan, bukannya menarik perhatian dari, tindakan utama.

Transisi yang terjadi ketika pengguna mengklik URL dalam email, mengaktifkan browser pada iPhone, adalah contoh dari tindakan sekunder. Tindakan utama adalah jendela browser berayun maju ke tampilan. Tindakan sekunder adalah aplikasi email surut ke latar belakang. Kedua tindakan terjadi secara bersamaan, tetapi tindakan sekunder dari aplikasi email mendukung tindakan utama dari jendela browser.

Contoh tindakan sekunder diterapkan untuk transisi animasi antara jendela aplikasi.

PRINSIP 9: TIMING

Dalam animasi, seperti dalam kehidupan, waktu adalah segalanya. Frustrasi dan kecanggungan yang kita rasakan ketika objek, karakter atau kehidupan itu sendiri bergerak terlalu lambat atau terlalu cepat adalah bukti pentingnya bawaan waktu. Dalam dunia animasi, waktu mengacu pada jumlah gambar atau frame dari suatu tindakan tertentu, yang diterjemahkan ke kecepatan aksi di film. Timing adalah teknik penting untuk menguasai karena membantu menentukan karakteristik fisik dari suatu objek, seperti berat, ukuran dan skala. Hal ini juga dapat membuat obyek tampak untuk mematuhi hukum fisika - seperti yang terlihat, misalnya, dalam kecepatan obyek ketika ditekan.

Selain mengungkapkan karakteristik fisik, waktu membantu mengkomunikasikan keadaan emosi, suasana hati dan kepribadian dari suatu obyek atau karakter. Sebagai contoh, perubahan kecil dalam waktu dapat mengkomunikasikan fisik dan suasana hati yang terfokus dan disengaja Wile E. Coyote saat ia tergesa-gesa mengejar cepat, baik hati Road Runner, yang sebaliknya bergerak dengan mudah.

Timing - kecepatan belaka di mana Road Runner bergerak - mengungkapkan baik fisik dari karakter (berat badan, tinggi dan skala) dan mood dari kejaran antara Road Runner dan Wile E. Coyote.

Apakah itu kecepatan di mana daftar gulungan atau mondar-mandir dari transisi antara layar dalam aplikasi mobile, waktu adalah halus namun penting untuk dikuasai. Timing, yang berlaku untuk UX mobile, adalah seni yang membutuhkan kemahiran dan praktek. Luangkan waktu untuk memahami apa yang sedang dikomunikasikan melalui gerakan dan kecepatan elemen antarmuka dalam desain Anda. Juga, meluangkan waktu untuk bereksperimen dan trial and error ketika Anda mulai bekerja dengan animasi.

Waktu dalam aplikasi foto iPad mirip dengan menyeret cepat setumpuk kartu. Ini mengungkapkan ringan, daya apung dan kecepatan hiper-realistis.

PRINSIP 10: KETINGGIAN

Prinsip yang saya rasakan membawa yang paling menyenangkan kepada pihak animasi berlebihan. Ini adalah elemen yang membuat pergerakan merasa dinamis, hidup dan menyenangkan hanya biasa - sangat mirip dengan karakter ikonik Ren dan Stimpy .

Animator Kanada John Kricfalusi ahlinya digunakan berlebihan dalam serial televisi animasi Ren dan Stimpy.

Animasi tanpa beberapa tingkat berlebihan mungkin terlihat akurat, tapi kemungkinan akan merasa kaku dan mekanis. Menguasai prinsip ini melibatkan mengidentifikasi elemen desain yang relevan, mencari tahu bagaimana elemen yang bergerak, dan kemudian mengutak-atik bentuk, skala atau komposisi elemen sehingga memperkuat gerakan, sambil menambahkan lapisan drama. Berlebihan tidak selalu berarti distorsi ekstrim.

Definisi klasik berlebihan, dipekerjakan oleh Disney, adalah untuk tetap setia pada realitas tetapi untuk mengusulkan suatu bentuk liar. Ketika menerapkan prinsip ini untuk gerakan dalam pengalaman mobile, latihan tingkat tertentu menahan diri. Jika adegan berisi beberapa elemen, maka berlebihan dari elemen-elemen harus seimbang relatif terhadap satu sama lain, untuk menghindari membingungkan atau mengganggu penampil.

Transisi antara layar awal iPad dan pembukaan aplikasi berlebihan. Itu membuat membuka aplikasi merasa kenyal dan menyenangkan, seperti memantul pada trampolin.

PRINSIP 11 DAN 12: MENGGAMBAR PADAT DAN BANDING

Dari 12 prinsip animasi yang digariskan oleh Johnston dan Thomas, dua terakhir - gambar yang solid dan daya tarik - adalah yang paling spesifik untuk karakter animasi. Dengan demikian, mereka memiliki sedikit kurang relevansi ke ponsel UX. Menggambar padat adalah tentang menghormati aturan ruang tiga dimensi dan memberikan objek dan karakter dimensi yang tepat melalui volume dan berat. Gambar yang solid membutuhkan animator untuk memahami dasar-dasar bentuk tiga dimensi: anatomi, berat badan, keseimbangan, cahaya dan bayangan.

Menggambar padat menekankan bentuk tiga dimensi, anatomi akurat dan animasi yang memiliki rasa berat, keseimbangan, cahaya dan bayangan.

Daya tarik karakter animasi mirip dengan karisma aktor hidup. Sebuah karakter yang menarik belum tentu simpatik - karena penjahat atau monster juga bisa menarik. Yang penting adalah bahwa penonton merasa karakter nyata dan menarik.

Metode penyampaian Gerak Dalam Pekerjaan Anda

Sementara 12 prinsip yang dikembangkan oleh Johnston dan Thomas sangat membantu untuk menyediakan kosakata untuk gerakan dan memberikan rasa dari apa yang mungkin, pertanyaan inti bagaimana mengintegrasikan gerakan ke dalam desain tetap. Langkah pertama adalah menyadari gerak sebagai bahan desain. Langkah berikutnya adalah untuk mulai mengintegrasikan gerakan ke dalam proses desain. Berikut adalah tiga tempat utama dalam proses desain di mana Anda dapat mulai bekerja dengan keajaiban gerak:

• sketsa,
• wireframing,
• prototyping.

SKETSA

Waktu untuk mulai berpikir tentang gerak selama fase sketsa dari proses desain Anda. Mirip dengan bagaimana gerakan karakter animasi mengekspresikan kepribadian, gerakan layar dan elemen antarmuka merupakan cara ampuh untuk mengekspresikan kepribadian dari pengalaman mobile Anda membuat. Sketsa ide untuk transisi dan frase gerakan awal akan membantu Anda berpikir tentang kepribadian yang ingin Anda pengalaman mobile Anda untuk menyampaikan dan bagaimana Anda dapat menggunakan gerakan untuk berkomunikasi itu.

Ini gerakan storyboard sketsa untuk "membuka rincian iTunes" transisi dilakukan dengan catatan dasar lengket.

WIREFRAMING

Wireframing belum fase lain dalam proses desain untuk bekerja di luar gerakan Anda ingin mengintegrasikan ke dalam pengalaman mobile. Karena wireframes sering menyampaikan aliran layar, transisi - yaitu gerakan antara layar - cocok secara alami ke dalam dokumen wireframe. Menggunakan gambar dan ilustrasi, Anda dapat mulai untuk menarik keluar gerakan yang ada dalam pikiran. Karena wireframes adalah dokumen yang mengkomunikasikan ide-ide desain untuk kedua pengembang dan stakeholder dalam sebuah organisasi, termasuk spesifikasi hanya gerak dalam dokumen akan membuat semua orang menyadari gerak dan membuat mereka berbicara tentang hal itu.

Spesifikasi gerak ini dalam dokumen wireframe bergantung pada gambar dan ilustrasi.

PROTOTYPING

Sketsa dan gerak wireframing baik langkah pertama, tapi tidak ada yang mengalahkan hal yang nyata. Menggunakan alat prototyping yang meliputi kosakata gerak adalah salah satu cara yang paling ampuh untuk mendorong kelancaran Anda sendiri dengan gerakan sebagai media desain.Alat seperti perangkat lunak presentasi (Keynote, PowerPoint, dll) termasuk gerak dalam kosa kata mereka. Alih-alih membuat sketsa gerak, membuat prototipe low-fidelity menggunakan software ini, yang akan membantu Anda bereksperimen dengan gerakan dan mengkomunikasikan ide-ide animasi Anda lebih akurat kepada tim desain.

Membuat prototipe dengan software seperti Keynotopia memungkinkan Anda untuk menghidupkan interaksi pengguna dan transisi di antara layar, memungkinkan Anda untuk bereksperimen dengan ide-ide gerakan Anda menggunakan hal yang nyata.

Tips Untuk Menerapkan Prinsip Animasi Untuk Anda Mobile UX Proyek

1. Menahan diri.
   Beberapa hal yang lebih menyebalkan daripada pengalaman mobile dengan terlalu banyak pizazz animasi. Sementara animasi menyenangkan dan menarik, tidak over-menerapkannya, jika tidak, anda mungkin mengubah pengalaman hebat dalam kecelakaan kereta api. Sebaliknya, bergantung pada kecerdikan dan siasat untuk menyampaikan gerak.
2. Prinsip komplementer
   Entah itu adegan di film animasi atau transisi antara layar dalam pengalaman mobile, prinsip-prinsip animasi jarang ada di isolasi. Sebaliknya, animasi yang paling efektif adalah orkestrasi dari banyak prinsip diterapkan bersama-sama. Sebagai keterampilan animasi Anda tumbuh, Anda akan belajar bagaimana berseni menggabungkan prinsip-prinsip ini seperti resep besar.
3. Animasi dalam peran pendukung
   Dalam film, animasi mendukung cerita. Hal yang sama berlaku untuk mobile UX.Animasi harus melengkapi pengalaman mobile, tidak menjadi bintang. Pastikan animasi Anda mendukung interaksi dalam pengalaman dan tidak mengurangi atau membingungkan.

Ringkasan

Setelah disediakan untuk kartun dan film, gerak merupakan bahan desain baru dan kuat dalam lanskap UX mobile. Selain membawa fokus dan kejelasan, dapat menambahkan sedikit karakter dan bahkan sihir untuk pengalaman yang Anda buat. Sementara materi desain baru dapat memakan waktu untuk belajar, mendapatkan sampai dengan kecepatan pada animasi dan motion mungkin akan merasa intuitif dan tidak merasa seperti sebuah tugas, dan itu akan membuat semua orang jam menonton kartun Sabtu pagi sebagai seorang anak tampak seperti investasi yang bijaksana.

Untuk meringkas:

• Transisi dan animasi berbasis gerak halus muncul sebagai bahan desain ponsel baru dan menarik yang dapat menambah efisiensi dan rahmat. Penambahan gerakan untuk pengalaman mobile dapat membawa kejelasan, informasi tentang konteks dan sedikit sukacita dan menyenangkan.
• Meskipun awalnya dikembangkan untuk film animasi dan televisi, 12 prinsip dasar animasi dari 1981 buku The Illusion of Life: Disney Animation berlaku untuk pengalaman berbasis layar, juga. Prinsip-prinsip ini tercantum di bawah ini.
• 1. Squash dan stretch
  2. Antisipasi
  3. Pementasan
  4. Lurus ke depan dan berpose untuk berpose
  5. Tindak lanjut dan tindakan tumpang tindih
  6. Lambat masuk dan keluar
  7. Arcs
  8. Tindakan Sekunder
  9. Pemilihan waktu
  10. Berlebihan
  11. Gambar Padat
  12. Banding
• Tiga titik kunci dalam proses desain di mana Anda dapat mulai bekerja dengan keajaiban gerak adalah sketsa, wireframing dan prototyping.

Artikel ini adalah kutipan dari The Ponsel Frontier ditulis oleh Rachel Hinman (Rosenfeld Media, 2012).

(Al)

Tags: PengaTumbuh, akhir pekan adalah tentang ibadah dalam rumah tangga Hinman. Minggu pagi yang disediakan untuk ibadah ritual melelahkan ditentukan oleh orang tua saya. Untuk itu diperlukan berdandan dalam pakaian tidak nyaman, pergi ke gereja dan pura-pura mendengarkan khotbah bertele-tele tentang Yesus (sementara aku menarik corat-coret di buku nyanyian).

Sabtu, bagaimanapun, disediakan sebagai hari ibadah saya, dan saya adalah seorang murid bangga dan berdedikasi gereja Saturday Morning Cartoons. Setiap Sabtu, hujan atau cerah, sehat atau sakit, aku akan melompat dari tempat tidur, lari ke bawah untuk ruang tamu, menanam diri di depan TV, dan merayakan Injil Wonder Woman, Captain Caveman, Scooby Doo dan Papa Smurf selama berjam-jam. Sementara orang tua saya jauh dari antusias tentang pilihan saya agama, mereka ditoleransi sebagai bentuk quid pro quo untuk Minggu kehadiran di gereja.

Sedikit yang baik dari kita tahu bahwa jam-jam dedikasi fanatik pada Injil Sabtu pagi pemrograman kartun akhirnya akan berubah menjadi aset berharga kejuruan. Saya membayangkan bahwa banyak dari Anda membaca ini adalah anggota jemaat yang sama - kelompok kita yang mengenali perbedaan halus namun penting agama antara kartun masih-frame (seperti yang ditemukan dalam komik bagian dari koran Minggu) dan TV animasi kartun sebelumnya, yang kami dengan senang hati mengambil persekutuan jus jeruk dan sereal setiap Sabtu pagi. Kami adalah orang-orang yang memahami apa yang menambahkan gerakan untuk sesuatu yang datar dan tak bernyawa dapat melakukan Gerakan. Menghembuskan kehidupan ke dalam segala sesuatu yang disentuhnya.

Kartun animasi seperti Wonder Woman, Scooby Doo dan Captain Caveman mengajari saya bagaimana pergerakan dapat bernapas kehidupan ke dalam gambar.

Menambahkan gerakan untuk apa pun - apakah serangkaian gambar atau transisi antara layar dalam pengalaman digital - ". Menambahkan air" tidak semudah Ini adalah seni yang membutuhkan kesabaran, mata untuk kehalusan dan studi yang cermat tentang bagaimana benda-benda dan orang bergerak melalui ruang dan waktu.

Transisi dan animasi berbasis gerak halus muncul sebagai bahan desain ponsel baru dan menarik, layak untuk dipelajari dan digunakan dengan efisiensi dan rahmat. Penambahan gerakan untuk pengalaman mobile yang dapat memberikan kejelasan, informasi tentang konteks dan, terus terang, sejumput sukacita dan menyenangkan. Namun, animasi atau transisi yang funky terlalu banyak dapat menghancurkan pengalaman mobile yang sangat baik. Hal ini membuat pemahaman prinsip-prinsip di balik seni animasi terbaik langkah pertama untuk berseni menerapkan gerakan untuk pekerjaan desain Anda.

Orang-orang yang memahami hal ini lebih baik daripada siapa pun adalah legiun animator brilian yang telah bekerja di Walt Disney. Untungnya bagi kita, dua animator dengan nama Ollie Johnston dan Frank Thomas memutuskan untuk menggoreskan pena di atas kertas dan berbagi dengan dunia animasi prinsip dasar yang digunakan oleh Disney animator selama proses pembuatan film dalam buku mereka, The Illusion of Life: Disney Animation .

Anda mungkin bertanya-tanya apa yang animasi harus dilakukan dengan pengalaman pengguna mobile. Sedangkan bentuk seni animasi dulunya asalnya dari film animasi dan televisi, telah menemukan jalan ke komputer dan pengguna digital pengalaman alam. Animasi Artful memiliki semua tetapi menyerang pengguna pengalaman lapangan mobile. Apakah itu adalah transisi antara layar dari pengalaman mobile atau perilaku diterapkan pada elemen UI yang dapat berinteraksi dengan menggunakan gerakan, gerak telah menjadi elemen desain ponsel yang signifikan. Ini adalah bahan desain yang dapat digunakan untuk membantu pengguna panduan melalui pengalaman ponsel Anda buat.

Mengambil isyarat dari Johnston dan Thomas, bab ini menjelaskan 12 prinsip dasar animasi, dipinjam dari buku mereka 1981 Illusion of Life: Disney Animation. Meskipun awalnya dikembangkan untuk film animasi dan televisi, prinsip-prinsip ini benar-benar berlaku untuk pengalaman berbasis disaring, juga. Jika diterapkan dengan kehalusan dan kemahiran, gerak dapat meningkatkan kerja mobile Anda, memberikan sentuhan sedikit sihir yang Anda alami setiap Sabtu pagi sebagai seorang anak.

The Illusion of Life: Disney Animation, oleh Frank Thomas dan Ollie Johnston, menguraikan 12 prinsip dasar animasi.

Berikut adalah 12 prinsip dasar animasi:

1. Squash dan stretch
2. Antisipasi
3. Pementasan
4. Lurus ke depan dan menimbulkan-to-berpose
5. Ikuti melalui dan tindakan tumpang tindih
6. Lambat masuk dan keluar
7. Arcs
8. Tindakan Sekunder
9. Pemilihan waktu
10. Berlebihan
11. Gambar Padat
12. Banding

12 Prinsip Animasi

PRINSIP 1: SQUASH DAN PEREGANGAN

Orang-orang dan benda memiliki massa yang melekat. Ketika sebuah benda bergerak, kualitas gerakan sering menunjukkan kekakuan objek. Buatan manusia benda dunia nyata, seperti rak buku atau kursi kayu, yang kaku dan memiliki fleksibilitas sedikit. Permukaan lembut, seperti pakaian, benda-benda organik dan daun tanaman, memiliki kurang kekakuan dan fleksibilitas yang lebih tinggi. Squash dan stretch adalah prinsip animasi yang digunakan untuk akurat mengungkapkan kekakuan obyek.

Benda organik dan lembut-permukaan, seperti balon penuh air, memiliki beberapa tingkat fleksibilitas dalam bentuk mereka. Squash dan stretch adalah prinsip animasi yang membantu menggambarkan kualitas ini dalam animasi.

Pertimbangkan untuk menggunakan prinsip ini ketika Anda memutuskan apa perasaan Anda ingin pengalaman mobile Anda untuk membangkitkan sebagai pengguna terlibat dengan itu.Apakah pengalaman mobile Anda dunia pesawat solid, permukaan kaku dan gerakan tajam, tepat? Atau sebuah dunia yang lebih organik, dengan lembut, permukaan lentur dan mudah, gerakan anggun? Squash dan stretch dapat membantu Anda mengekspresikan gerakan-gerakan.

Layar transisi di Flipboard menunjukkan prinsip squash dan peregangan untuk mengungkapkan bahwa permukaan dalam dunia aplikasi yang kaku dan papan-seperti. Sebaliknya, transisi layar di Apple iBook menggunakan prinsip squash dan peregangan untuk menggemakan gerakan fleksibel dan organik membalik-balik halaman buku kertas nyata.

PRINSIP 2: ANTISIPASI

Ketika ilustrator menggambarkan objek bergerak atau karakter, tiga tahap yang berbeda harus dipertimbangkan untuk membuat gerakan objek realistis:

• Persiapan untuk tindakan,
• Tindakan itu sendiri,
• Hasil dari gerakan.

Entah itu adonan bisbol berliku sebelum ayunan atau yang takut dari musim semi sebelum itu bermunculan, antisipasi adalah prinsip animasi digunakan untuk menyiapkan obyek untuk gerakan. Antisipasi adalah tentang merancang komponen adegan - pencahayaan, komposisi atau bahkan bentuk dari suatu obyek atau karakter - untuk memberikan pemirsa petunjuk tentang apa yang akan terjadi.

The crouch dari bowler, penutupan sebelum mengayunkan bola bowling, adalah contoh dari pose dan gerak yang prinsip antisipasi menangkap.

Mirip dengan penerapannya dalam film animasi dan kartun, bila diterapkan ke dunia UX mobile,antisipasi adalah semua tentang memberikan wawasan pengguna ke apa yang akan terjadi selanjutnya. Sebagai contoh, prinsip dapat diterapkan pada pengobatan visual antarmuka seperti pengguna membuka aplikasi. Hal ini juga dapat diterapkan pada transisi antara pengalaman. Karena bahasa isyarat relatif baru bagi pengguna, prinsip antisipasi juga dapat digunakan untuk memberikan affordance untuk gestural UIS. Antisipasi memberikan petunjuk tentang kecepatan dan arah bahwa benda-benda di UI dapat bergerak dan kemungkinan gestural dari objek tersebut.

Aperture animasi ditemukan di aplikasi kamera dari banyak smartphone mempersiapkan pengguna untuk tindakan mengambil foto.

Cara kartu di Palm Pre UI bergerak adalah affordance bagi pengguna, memberi mereka wawasan ke dalam bahasa gestural dari UI.

Tirai jendela animasi pada layar awal Windows Phone 7 menggunakan prinsip antisipasi dengan memberikan pengguna mengintip ke UI ubin dinamis telepon.

PRINSIP 3: STAGING

Orang-orang tertarik untuk menjual properti sering "panggung" rumah, yang berarti mereka mengatur setiap kamar sedemikian rupa bahwa tujuannya adalah benar-benar jelas. Prinsip pementasan dalam animasi mirip, karena pementasan yang baik membuat ide sentral dari sebuah animasi benar-benar jelas untuk pemirsa. Dalam dunia pengalaman pengguna mobile, prinsip pementasan yang paling relevan ketika mempertimbangkan transisi antara layar dan interaksi. Sebuah interaksi yang baik dipentaskan menggabungkan cahaya, warna, komposisi dan gerak untuk mengarahkan mata pengguna untuk persis di mana itu perlu karena mereka berinteraksi dengan pengalaman. Pengalaman ponsel yang dipentaskan memiliki rasa aliran dan kemudahan, sedangkan yang buruk dipentaskan merasa terputus-putus.

Ilustrasi yang dipentaskan di sebelah kanan membuat ide sentral - dua karakter terlibat dalam percakapan - benar-benar jelas. Ilustrasi buruk dipentaskan di sebelah kiri meninggalkan dinamis antara dua karakter terbuka untuk interpretasi, membuat ide sentral tidak jelas.

Staging adalah pertimbangan penting namun halus ketika menerapkan animasi dan gerakan untuk pengalaman mobile. Tantangan utama dalam menciptakan user interface alami adalah bahwa mereka tidak memiliki jangkar konseptual yang kuat. Akibatnya, pengguna yang baru untuk UIS alami sering merasa anchorless karena mereka menavigasi pengalaman touchscreen.Jika Anda menerapkan baik, pementasan yang kuat untuk animasi dan transisi dari pengalaman mobile Anda, maka pengguna akan merasa lebih membumi ketika mereka berinteraksi dengan itu.

Pementasan yang baik digunakan dalam versi iPad dari Keynote memungkinkan pengguna untuk melihat secara tepat di mana file mereka saat ini bekerja pada kehidupan di struktur file aplikasi. Penggunaan halus ini pementasan membuat nuansa pengguna didasarkan pada pengalaman.

PRINSIP 4: STRAIGHT-DEPAN DAN POSE-TO-POSE

Lurus ke depan dan berpose untuk berpose adalah teknik yang berhubungan dengan proses menggambar animasi. Dalam rangka untuk menangkap tindakan cepat dinamis dengan gerakan yang tidak biasa, animator akan menggunakan teknik lurus ke depan dan menarik setiap frame tunggal animasi. Pose-to-berpose menggambar teknik mempekerjakan penggunaan keyframes (yaitu frame penting berurutan) dan di-perantara (yaitu frame menengah yang mengekspresikan gerakan antara keyframes).

Ilustrasi di atas menggambarkan teknik lurus ke depan di mana setiap frame dari animasi yang diberikan. Ilustrasi di bagian bawah mewakili keyframes yang akan digunakan dalam animasi berpose-to-berpose.

Sebagian besar animasi dan transisi yang digunakan dalam pengalaman selular menggunakan teknik animasi berpose-to-berpose. Pose-to-pose yang biasanya sudah cukup untuk transisi yang tidak terlalu rumit dan yang dapat dijelaskan dengan mudah. Jika Anda ingin memasukkan gerakan yang tidak biasa atau dinamis dalam pengalaman Anda yang tidak dapat dicapai dengan menggunakan berpose-to-berpose, maka Anda mungkin akan perlu untuk menggabungkan teknik lurus ke depan.

Permainan populer seperti Plants vs Zombies untuk mempekerjakan iPad berpose-to-berpose teknik animasi.

Game dengan gerakan yang lebih kompleks, seperti dalam permainan iPad Fruit Ninja , menggunakan teknik animasi lurus ke depan untuk menangkap gerak dinamis.

PRINSIP 5: TINDAK MELALUI AKSI DAN TUMPANG TINDIH

Bayangkan seekor anjing besar dengan rahang raksasa gemetar sisi kepala ke sisi. Gerakan dinamis kulit lembek di wajahnya saat ia menggeleng ke sana kemari adalah contoh dari prinsip animasi kelima: tindak lanjut dan tindakan yang tumpang tindih. Sementara antisipasi harus dilakukan dengan persiapan tindakan, tindak lanjut melibatkan akhir dari suatu tindakan.Tindakan jarang datang ke berhenti mendadak dan lengkap, melainkan datang ke sebuah akhir bertahap. Tindak melalui menangkap bagaimana bagian-bagian dari suatu objek (seperti rahang anjing) terus bergerak bahkan setelah bagian lain dari objek (seperti kepala anjing) telah berhenti bergerak.

Tindak melalui menangkap betapa berbedanya bagian dari sebuah objek bergerak pada tingkat yang berbeda (seperti kepala anjing bergerak pada tingkat yang berbeda dari telinga atau rahang).

Sekarang bayangkan bahwa anjing berjalan menyusuri trotoar dengan pemiliknya. Seluruh tubuhnya bergerak, tapi waktu kakinya berbeda dari waktu ekornya atau kepala. Tumpang Tindih tindakan adalah prinsip animasi yang menangkap bagaimana bagian-bagian dari sebuah objek - seperti kepala anjing, ekor dan kaki - bergerak pada tingkat yang berbeda. Menangkap gerakan, serta sedikit variasi dalam waktu dan kecepatan bagian ini, membuat benda-benda tampak lebih alami. Suatu tindakan tidak boleh dibawa ke benar-benar berhenti sebelum tindakan lain telah dimulai. Tumpang tindih mempertahankan aliran antara frase mandiri tindakan.

Sementara elemen UI dari pengalaman mobile harus bekerja sama untuk membentuk keseluruhan, tindak lanjut dan tindakan tumpang tindih dapat membantu Anda menentukan dan mengkomunikasikan hubungan antara elemen UI. Transisi dan animasi adalah cara yang bagus untuk mengungkapkan bagaimana elemen UI saling berhubungan.

Transisi ke dan dari ubin dinamis pada Windows telepon menggunakan prinsip tindakan tumpang tindih. Ubin tidak melakukan perjalanan sebagai satu unit, melainkan setiap ubin bergerak pada tingkat yang berbeda.

PRINSIP 6: DALAM LAMBAT DAN OUT

Apakah itu mobil mengupas keluar dari berhenti mati atau sprinter meledak keluar dari blok dan membuat trek dalam perlombaan, benda perlu waktu untuk mempercepat dan memperlambat.Prinsip animasi keenam, lambat masuk dan keluar, berkaitan dengan jarak yang diperlukan untuk secara akurat menggambarkan hukum yang melekat inersia yang mengatur semua benda dan orang-orang.

Objek dalam dunia perlu waktu untuk mempercepat dan memperlambat. Sebuah strategi untuk secara akurat menggambarkan jenis gerak adalah dengan menambahkan lebih banyak frame objek dekat awal dan akhir gerakan dan sedikit di tengah.

Menambahkan frame objek dekat awal dan akhir gerakan dan frame sedikit di tengah menciptakan ilusi efek inersia.

Prinsip ini bekerja untuk karakter bergerak antara dua pose, seperti duduk dan berdiri, dan untuk benda bergerak benda mati, seperti bola memantul. Sementara pengalaman kami buat untuk mobile UX sering hidup di dunia lain - dunia di balik kaca dari perangkat mobile - yang memungkinkan beberapa hukum fisika untuk ada di dunia yang akan membuat pengalaman-pengalaman yang lebih relatable kepada pengguna. Entah itu perbedaan yang halus dalam waktu dalam cara daftar gulungan data atau transisi animasi yang muncul sebagai aplikasi terbuka, lambat masuk dan keluar akan membuat frase gerak pengalaman aliran Anda dengan cara yang terasa alami bagi pengguna.

Prinsip lambat masuk dan keluar yang diterapkan pada gulungan daftar di banyak UIS mobile.Lebih frame berada di awal dan akhir gerakan. Efek ini membuat UI tampak seolah-olah itu diatur oleh hukum inersia.

Lebih frame berada di awal dan akhir dari transisi bergulir dari layar awal pada iPhone, membuat ikon aplikasi merasa seolah-olah mereka mematuhi hukum inersia.

PRINSIP 7: ARCS

Benda tidak bergerak melalui ruang secara acak. Sebaliknya, mereka bergerak sepanjang jalur yang relatif diprediksi yang dipengaruhi oleh kekuatan-kekuatan seperti dorong, hambatan angin dan gravitasi. Garis besar kembang api pada Empat Juli atau tanda selip di trotoar dari mobil pengereman jejak fisik jarang jalur ini, biasanya, lintasan obyek tidak terlihat.

Lintasan obyek sebagian besar tak terlihat, kecuali pada kesempatan langka, seperti kembang api menyala yang percikan bercahaya melacak jalurnya.

Sementara jalur ini sebagian besar tak terlihat oleh mata manusia, pola ada untuk lintasan berdasarkan apakah objek tersebut organik atau mekanis. Objek yang bersifat mekanis, seperti mobil, sepeda dan kereta api, cenderung bergerak sepanjang lintasan lurus, sedangkan benda-benda organik, seperti tanaman, manusia dan hewan, cenderung bergerak sepanjang lintasan melengkung. Objek yang ingin menghidupkan harus mencerminkan karakteristik ini untuk realisme yang lebih besar.

Ketika mengintegrasikan gerakan menjadi pengalaman mobile, mempertimbangkan apakah obyek yang animasi harus mencerminkan kualitas organik atau mekanis. Jika yang pertama, maka prinsip animasi busur menunjukkan bahwa objek harus bergerak sepanjang lintasan melengkung. Jika yang terakhir, maka objek akan bergerak sepanjang jalan yang lurus.

Unsur alami seperti ikan dan air dalam aplikasi iPhone ini bergerak di sepanjang lintasan melengkung.

Elemen antarmuka pada platform mobile Android cenderung bergerak sepanjang garis lurus, memberikan UI perasaan mekanik.

PRINSIP 8: AKSI SEKUNDER

Bayangkan tupai berlari di rumput dan kemudian melompat ke pohon. Pergerakan kaki tupai (dianggap sebagai tindakan primer) akan animasi untuk menekankan hewan cahaya, gesit, kiprah sigap. Tangkas, gerakan bergelombang ekor tupai (tindakan sekunder) akan menjadi tipe yang terpisah dan sedikit berbeda dari gerakan yang mendukung tindakan utama.

Tindakan utama dari animasi ini adalah gerakan tubuh tupai dan kaki. Bentuk dan karakter ekor tupai ketika bergerak adalah tindakan sekunder. Bersama-sama, mereka membuat animasi terasa lebih realistis.

Ekor tupai adalah contoh tindakan sekunder, yang mendukung tindakan utama dari urutan animasi tanpa mengganggu dari itu. Tindakan sekunder diterapkan untuk memperkuat suasana hati atau memperkaya tindakan utama dari sebuah adegan animasi. Kunci untuk tindakan sekunder adalah bahwa hal itu harus menekankan, bukannya menarik perhatian dari, tindakan utama.

Transisi yang terjadi ketika pengguna mengklik URL dalam email, mengaktifkan browser pada iPhone, adalah contoh dari tindakan sekunder. Tindakan utama adalah jendela browser berayun maju ke tampilan. Tindakan sekunder adalah aplikasi email surut ke latar belakang. Kedua tindakan terjadi secara bersamaan, tetapi tindakan sekunder dari aplikasi email mendukung tindakan utama dari jendela browser.

Contoh tindakan sekunder diterapkan untuk transisi animasi antara jendela aplikasi.

PRINSIP 9: TIMING

Dalam animasi, seperti dalam kehidupan, waktu adalah segalanya. Frustrasi dan kecanggungan yang kita rasakan ketika objek, karakter atau kehidupan itu sendiri bergerak terlalu lambat atau terlalu cepat adalah bukti pentingnya bawaan waktu. Dalam dunia animasi, waktu mengacu pada jumlah gambar atau frame dari suatu tindakan tertentu, yang diterjemahkan ke kecepatan aksi di film. Timing adalah teknik penting untuk menguasai karena membantu menentukan karakteristik fisik dari suatu objek, seperti berat, ukuran dan skala. Hal ini juga dapat membuat obyek tampak untuk mematuhi hukum fisika - seperti yang terlihat, misalnya, dalam kecepatan obyek ketika ditekan.

Selain mengungkapkan karakteristik fisik, waktu membantu mengkomunikasikan keadaan emosi, suasana hati dan kepribadian dari suatu obyek atau karakter. Sebagai contoh, perubahan kecil dalam waktu dapat mengkomunikasikan fisik dan suasana hati yang terfokus dan disengaja Wile E. Coyote saat ia tergesa-gesa mengejar cepat, baik hati Road Runner, yang sebaliknya bergerak dengan mudah.

Timing - kecepatan belaka di mana Road Runner bergerak - mengungkapkan baik fisik dari karakter (berat badan, tinggi dan skala) dan mood dari kejaran antara Road Runner dan Wile E. Coyote.

Apakah itu kecepatan di mana daftar gulungan atau mondar-mandir dari transisi antara layar dalam aplikasi mobile, waktu adalah halus namun penting untuk dikuasai. Timing, yang berlaku untuk UX mobile, adalah seni yang membutuhkan kemahiran dan praktek. Luangkan waktu untuk memahami apa yang sedang dikomunikasikan melalui gerakan dan kecepatan elemen antarmuka dalam desain Anda. Juga, meluangkan waktu untuk bereksperimen dan trial and error ketika Anda mulai bekerja dengan animasi.

Waktu dalam aplikasi foto iPad mirip dengan menyeret cepat setumpuk kartu. Ini mengungkapkan ringan, daya apung dan kecepatan hiper-realistis.

PRINSIP 10: KETINGGIAN

Prinsip yang saya rasakan membawa yang paling menyenangkan kepada pihak animasi berlebihan. Ini adalah elemen yang membuat pergerakan merasa dinamis, hidup dan menyenangkan hanya biasa - sangat mirip dengan karakter ikonik Ren dan Stimpy .

Animator Kanada John Kricfalusi ahlinya digunakan berlebihan dalam serial televisi animasi Ren dan Stimpy.

Animasi tanpa beberapa tingkat berlebihan mungkin terlihat akurat, tapi kemungkinan akan merasa kaku dan mekanis. Menguasai prinsip ini melibatkan mengidentifikasi elemen desain yang relevan, mencari tahu bagaimana elemen yang bergerak, dan kemudian mengutak-atik bentuk, skala atau komposisi elemen sehingga memperkuat gerakan, sambil menambahkan lapisan drama. Berlebihan tidak selalu berarti distorsi ekstrim.

Definisi klasik berlebihan, dipekerjakan oleh Disney, adalah untuk tetap setia pada realitas tetapi untuk mengusulkan suatu bentuk liar. Ketika menerapkan prinsip ini untuk gerakan dalam pengalaman mobile, latihan tingkat tertentu menahan diri. Jika adegan berisi beberapa elemen, maka berlebihan dari elemen-elemen harus seimbang relatif terhadap satu sama lain, untuk menghindari membingungkan atau mengganggu penampil.

Transisi antara layar awal iPad dan pembukaan aplikasi berlebihan. Itu membuat membuka aplikasi merasa kenyal dan menyenangkan, seperti memantul pada trampolin.

PRINSIP 11 DAN 12: MENGGAMBAR PADAT DAN BANDING

Dari 12 prinsip animasi yang digariskan oleh Johnston dan Thomas, dua terakhir - gambar yang solid dan daya tarik - adalah yang paling spesifik untuk karakter animasi. Dengan demikian, mereka memiliki sedikit kurang relevansi ke ponsel UX. Menggambar padat adalah tentang menghormati aturan ruang tiga dimensi dan memberikan objek dan karakter dimensi yang tepat melalui volume dan berat. Gambar yang solid membutuhkan animator untuk memahami dasar-dasar bentuk tiga dimensi: anatomi, berat badan, keseimbangan, cahaya dan bayangan.

Menggambar padat menekankan bentuk tiga dimensi, anatomi akurat dan animasi yang memiliki rasa berat, keseimbangan, cahaya dan bayangan.

Daya tarik karakter animasi mirip dengan karisma aktor hidup. Sebuah karakter yang menarik belum tentu simpatik - karena penjahat atau monster juga bisa menarik. Yang penting adalah bahwa penonton merasa karakter nyata dan menarik.

Metode penyampaian Gerak Dalam Pekerjaan Anda

Sementara 12 prinsip yang dikembangkan oleh Johnston dan Thomas sangat membantu untuk menyediakan kosakata untuk gerakan dan memberikan rasa dari apa yang mungkin, pertanyaan inti bagaimana mengintegrasikan gerakan ke dalam desain tetap. Langkah pertama adalah menyadari gerak sebagai bahan desain. Langkah berikutnya adalah untuk mulai mengintegrasikan gerakan ke dalam proses desain. Berikut adalah tiga tempat utama dalam proses desain di mana Anda dapat mulai bekerja dengan keajaiban gerak:

• sketsa,
• wireframing,
• prototyping.

SKETSA

Waktu untuk mulai berpikir tentang gerak selama fase sketsa dari proses desain Anda. Mirip dengan bagaimana gerakan karakter animasi mengekspresikan kepribadian, gerakan layar dan elemen antarmuka merupakan cara ampuh untuk mengekspresikan kepribadian dari pengalaman mobile Anda membuat. Sketsa ide untuk transisi dan frase gerakan awal akan membantu Anda berpikir tentang kepribadian yang ingin Anda pengalaman mobile Anda untuk menyampaikan dan bagaimana Anda dapat menggunakan gerakan untuk berkomunikasi itu.

Ini gerakan storyboard sketsa untuk "membuka rincian iTunes" transisi dilakukan dengan catatan dasar lengket.

WIREFRAMING

Wireframing belum fase lain dalam proses desain untuk bekerja di luar gerakan Anda ingin mengintegrasikan ke dalam pengalaman mobile. Karena wireframes sering menyampaikan aliran layar, transisi - yaitu gerakan antara layar - cocok secara alami ke dalam dokumen wireframe. Menggunakan gambar dan ilustrasi, Anda dapat mulai untuk menarik keluar gerakan yang ada dalam pikiran. Karena wireframes adalah dokumen yang mengkomunikasikan ide-ide desain untuk kedua pengembang dan stakeholder dalam sebuah organisasi, termasuk spesifikasi hanya gerak dalam dokumen akan membuat semua orang menyadari gerak dan membuat mereka berbicara tentang hal itu.

Spesifikasi gerak ini dalam dokumen wireframe bergantung pada gambar dan ilustrasi.

PROTOTYPING

Sketsa dan gerak wireframing baik langkah pertama, tapi tidak ada yang mengalahkan hal yang nyata. Menggunakan alat prototyping yang meliputi kosakata gerak adalah salah satu cara yang paling ampuh untuk mendorong kelancaran Anda sendiri dengan gerakan sebagai media desain.Alat seperti perangkat lunak presentasi (Keynote, PowerPoint, dll) termasuk gerak dalam kosa kata mereka. Alih-alih membuat sketsa gerak, membuat prototipe low-fidelity menggunakan software ini, yang akan membantu Anda bereksperimen dengan gerakan dan mengkomunikasikan ide-ide animasi Anda lebih akurat kepada tim desain.

Membuat prototipe dengan software seperti Keynotopia memungkinkan Anda untuk menghidupkan interaksi pengguna dan transisi di antara layar, memungkinkan Anda untuk bereksperimen dengan ide-ide gerakan Anda menggunakan hal yang nyata.

Tips Untuk Menerapkan Prinsip Animasi Untuk Anda Mobile UX Proyek

1. Menahan diri.
   Beberapa hal yang lebih menyebalkan daripada pengalaman mobile dengan terlalu banyak pizazz animasi. Sementara animasi menyenangkan dan menarik, tidak over-menerapkannya, jika tidak, anda mungkin mengubah pengalaman hebat dalam kecelakaan kereta api. Sebaliknya, bergantung pada kecerdikan dan siasat untuk menyampaikan gerak.
2. Prinsip komplementer
   Entah itu adegan di film animasi atau transisi antara layar dalam pengalaman mobile, prinsip-prinsip animasi jarang ada di isolasi. Sebaliknya, animasi yang paling efektif adalah orkestrasi dari banyak prinsip diterapkan bersama-sama. Sebagai keterampilan animasi Anda tumbuh, Anda akan belajar bagaimana berseni menggabungkan prinsip-prinsip ini seperti resep besar.
3. Animasi dalam peran pendukung
   Dalam film, animasi mendukung cerita. Hal yang sama berlaku untuk mobile UX.Animasi harus melengkapi pengalaman mobile, tidak menjadi bintang. Pastikan animasi Anda mendukung interaksi dalam pengalaman dan tidak mengurangi atau membingungkan.

Ringkasan

Setelah disediakan untuk kartun dan film, gerak merupakan bahan desain baru dan kuat dalam lanskap UX mobile. Selain membawa fokus dan kejelasan, dapat menambahkan sedikit karakter dan bahkan sihir untuk pengalaman yang Anda buat. Sementara materi desain baru dapat memakan waktu untuk belajar, mendapatkan sampai dengan kecepatan pada animasi dan motion mungkin akan merasa intuitif dan tidak merasa seperti sebuah tugas, dan itu akan membuat semua orang jam menonton kartun Sabtu pagi sebagai seorang anak tampak seperti investasi yang bijaksana.

Untuk meringkas:

• Transisi dan animasi berbasis gerak halus muncul sebagai bahan desain ponsel baru dan menarik yang dapat menambah efisiensi dan rahmat. Penambahan gerakan untuk pengalaman mobile dapat membawa kejelasan, informasi tentang konteks dan sedikit sukacita dan menyenangkan.
• Meskipun awalnya dikembangkan untuk film animasi dan televisi, 12 prinsip dasar animasi dari 1981 buku The Illusion of Life: Disney Animation berlaku untuk pengalaman berbasis layar, juga. Prinsip-prinsip ini tercantum di bawah ini.
• 1. Squash dan stretch
  2. Antisipasi
  3. Pementasan
  4. Lurus ke depan dan berpose untuk berpose
  5. Tindak lanjut dan tindakan tumpang tindih
  6. Lambat masuk dan keluar
  7. Arcs
  8. Tindakan Sekunder
  9. Pemilihan waktu
  10. Berlebihan
  11. Gambar Padat
  12. Banding
• Tiga titik kunci dalam proses desain di mana Anda dapat mulai bekerja dengan keajaiban gerak adalah sketsa, wireframing dan prototyping.

Artikel ini adalah kutipan dari The Ponsel Frontier ditulis oleh Rachel Hinman (Rosenfeld Media, 2012).

(Al)

Tags: Penga