Komentar: Artikel ini memperkenalkan seluruh proses pengembangan Netease Weibo dengan HTML5
HTML5 semakin disukai oleh tim pengembangan internet di rumah dan di luar negeri. Asing, Google dengan antusias mengembangkan Chrome Web Store, Microsoft telah merilis situs web tema Spring Irlandia yang mendukung pengembangan teknologi HTML5, dan Nokia telah berinvestasi besar -besaran dalam membeli dan membangun bisnis peta Nokia. Raksasa internet domestik juga tertarik pada standar pengembangan web baru yang hancur dari seluruh laut dan telah mulai menguji produk HTML5.Produk aplikasi web platform iPhone NetEase Weibo berhasil diluncurkan pada kuartal pertama 2012. Sekarang saya akan berbagi pengalaman dan pelajaran yang dipetik dari pengembangan proyek ini dengan Anda, dan saya berharap dapat tumbuh bersama dengan Anda di lingkungan pengembangan HTML5.
Staf
1. Konfigurasi Pengembang
Manajer Produk: 1 orang;
Desainer Interaksi: 1;
Desainer Visual: 1;
Insinyur front-end: 1;
Insinyur Backstage: 2;
Penguji: 1 orang.
2. Waktu Pengembangan
Desainer Interaksi: 22 hari kerja;
Desainer Visual: 14 Hari Kerja;
Insinyur front-end: 50 hari kerja;
Backend Engineer: Karena menggunakan data backend asli, Anda hanya perlu bekerja sama dengan insinyur front-end untuk memanggil data
Di antara mereka, interaksi dan front-end menggunakan waktu terlama dalam seluruh siklus pengembangan.
Proses Pengembangan Aplikasi Web Netease Weibo
1. Perencanaan Persyaratan Fungsional: Berbeda dari Web dan Klien Lokal
Orang yang bertanggung jawab: Manajer Produk; Peserta: Perancang Interaksi
Aplikasi Web NetEase Weibo (semua merujuk ke ponsel dalam artikel ini) berbeda dari produk web dan juga berbeda dari klien lokal.
1. Dibandingkan dengan Web, Aplikasi Web Netease Weibo memiliki keunggulan yang kuat seperti mobilitas dan kaya media, dan memiliki kelemahan seperti ruang presentasi informasi kecil dan arsitektur informasi yang mendalam. Situasi penggunaan keduanya berbeda. Weibo Web sebagian besar digunakan secara imersif dalam waktu yang berlimpah dan kondisi jaringan yang unggul; Aplikasi Webo Web sebagian besar digunakan di bawah waktu sepele dan kondisi jaringan dengan kualitas yang tidak merata.
Oleh karena itu, aplikasi web NetEase Weibo harus menghindari fungsi yang besar dan lengkap, dan perlu mengekstrak dan memilih fungsi yang paling umum digunakan oleh pengguna di lingkungan seluler dari web, dan menambahkan fungsi kebutuhan unik di sisi seluler (seperti fungsi layanan lokal akan dipertimbangkan pada tahap iterasi).
2. Dibandingkan dengan klien lokal, Aplikasi Web NetEase Weibo memiliki keuntungan dari tidak ada instalasi, peningkatan sederhana, biaya pengembangan yang rendah, dan tata letak yang dapat disesuaikan. Ini juga memiliki keunggulan kecepatan respons yang lambat, izin rendah untuk mengambil kontrol asli ponsel, dan stabilitas yang sedikit lemah.
Berdasarkan kelebihan dan kerugian dari keduanya, Aplikasi Web NetEase Weibo perlu mengejar ketinggalan dengan pengalaman berkualitas tinggi dari klien lokal dan mencoba memastikan ringan dan cepat.
Singkatnya, fungsi aplikasi Web dapat lebih halus daripada klien Web dan lokal, memenuhi kebutuhan paling inti dari pengguna di lingkungan seluler.
Perencanaan Fungsi Aplikasi Web Netease Weibo, seperti yang ditunjukkan di bawah ini:
2. Desain Arsitektur Informasi: Dangkal dan Sempit Mungkin
Orang yang bertanggung jawab: perancang interaksi; Peserta: Manajer Produk
Orang -orang yang telah membuat produk internet seluler harus tahu mengapa arsitektur informasi harus dangkal dan sempit mungkin. Alasan terbesar adalah ruang tampilan kecil dan mahal dari ponsel. Arsitektur informasi dari klien lokal ponsel harus lebih dangkal dan sempit, dan aplikasi web membutuhkan ini lebih banyak lagi, karena selalu ada bilah alat peramban di halaman browser, menyebabkan sepotong kecil ruang tampilan yang sudah sempit dimakan. Seperti yang ditunjukkan pada gambar di bawah ini:
Alat browser di bagian bawah layar ponsel sangat tidak berguna untuk produk aplikasi web: Aplikasi Web itu sendiri adalah aplikasi loop tertutup dan tidak memerlukan bilah alat browser. Bahkan jika itu tidak mempengaruhi arsitektur informasi yang besar, itu akan mengikis ruang tampilan yang berharga dan memiliki dampak penting pada desain sistem navigasi (bagian ini dianalisis secara singkat dalam artikel sebelumnya "Diskusi tentang Desain Navigasi Aplikasi Web iPhone".).
Pendahuluan Artikel Webjx: Netease Weibo, Pengembangan aktual HTML5.
3. Desain Interaksi: Sederhana dan Efisien
Orang yang bertanggung jawab: perancang interaksi; Peserta: Manajer Produk, Perancang Visual, Insinyur Front-End, Teknisi Back-End
Konsep Desain Interaksi:
Konsep desain interaksi spesifik dari produk ini berasal dari: survei skenario penggunaan pengguna, analisis pesaing, status penelitian aplikasi web, dan persyaratan aplikasi web Weibo sendiri. Konsep desain interaksi akhirnya dirangkum terutama:
1. Peningkatan kemudahan pencarian:
Memperkuat navigasi global, pengembalian cepat ke beranda, operasi umum reguler, demonstrasi animasi tepat waktu, tata letak halaman web yang sederhana dan jelas, dll.
2. Meningkatkan efisiensi penggunaan
Kurangi tingkat arsitektur informasi, berikan entri kunci pintasan yang sesuai, pastikan area sentuh yang aman, pertimbangkan kebiasaan menjelajah pengguna, memberikan prioritas pada fungsi inti, menghilangkan noise visual yang tidak perlu, dll.
3. Lebih Cerdas dan Penting
Ini mendukung penggunaan offline, mengisi informasi dalam pengeditan setelah gangguan yang tidak terduga, penggunaan kotak peringatan yang hati -hati, bantuan dalam implementasi saran pencarian, toolbar yang diatur untuk kebutuhan tugas saat ini, umpan balik aktif dan efektif, dll.
4. Tingkatkan konsentrasi tugas
Jalur operasi tugas tunggal, navigasi tab Tab yang Tepat Waktu, Menghilangkan Faktor Gangguan, Tampilan Greyscale Tombol Tidak Tersedia, Maksimalisasi Halaman Tugas, Tidak Ada Minimalisasi Fungsi, dll.
5. Konsistensi Platform:
Tonton sekarang, klik, daftar tampilan platform iOS, animasi layar push selama operasi ke depan dan pengembalian, tampilan modal platform iOS, kotak peringatan, kontrol asli call-up, logika lompat sederhana dan jelas, dll.
Konsep desain interaktif pada tahap ini tidak lagi hanya sebuah konsep, tetapi lebih dari panduan desain khusus untuk produk aplikasi web. Metode implementasi desain yang membawa konsep desain yang indah adalah implementasi penting dalam tahap penelitian desain.
Ada banyak konten dan detail desain, di sini kami hanya akan mengambil satu detail untuk dibagikan kepada Anda:
Peningkatan Kemudahan Pencarian - Peningkatan Navigasi Global
Dibandingkan dengan WAP Weibo asli, keberadaan tetap dari bilah navigasi global adalah perubahan besar. Mari secara singkat menganalisis alasan untuk melakukan ini:
–Apa lingkungan penggunaan pengguna? - situasi seluler luar ruangan (seperti di kereta bawah tanah atau sejalan), atau keadaan idle dalam ruangan (seperti menjelajahi Weibo sebelum tidur);
–Apa tujuan pengguna yang datang ke halaman ini? -Browse Weibo;
–Apa tindakan umum yang digunakan pengguna di halaman ini? - Tarik ke bawah untuk membaca, top dan memuat informasi baru, klik tab lain untuk melakukan lompatan;
- Apa manfaatnya jika bilah navigasi global diperbaiki di atas? - Nyaman bagi pengguna untuk kembali ke atas, nyaman bagi pengguna untuk memuat informasi baru, nyaman bagi pengguna untuk beralih tab, dan memiliki rasa kontrol global yang kuat;
- Apa kelemahannya jika bilah navigasi global ditetapkan di atas? -Ruang tampilan Informasi Berharga yang Berharga
…………
Selama penggunaan pengguna, perilaku menyatukan, menyegarkan, dan beralih tab juga merupakan perilaku yang relatif sering, dan kenyamanan operasi perlu dipastikan. Bilah navigasi global tetap dapat memenuhi persyaratan ini: mengklik tombol HOME dapat ditutup dan disegarkan, yang dapat memfasilitasi pengguna untuk mengganti tab. Pada saat yang sama, bilah navigasi global tetap dapat memungkinkan pengguna untuk mengetahui dengan jelas di mana mereka berada dan ke mana mereka bisa pergi, memberi pengguna rasa kontrol global yang kuat.
4. Desain Visual: Eksperimen Gaya Segar
Orang yang bertanggung jawab: desainer visual; Peserta: Manajer Produk, Perancang Interaksi, Insinyur Front-End
Penentuan gaya visual aplikasi web Netease Weibo telah dibahas melalui berbagai sudut:
1. Haruskah kita menjaga nada warna konsisten dengan klien lokal Netease Weibo?
Produk perlu mempertahankan konsistensi tertentu pada platform yang berbeda, dan gaya warna juga merupakan bagian penting dari membentuk temperamen produk. Jadi, apakah kita perlu menggunakan kulit yang mirip dengan klien lokal Netease Weibo? Warna utama klien lokal Netease Weibo berwarna merah.
Analisisnya adalah sebagai berikut:
- Manfaat menggunakan merah ini adalah: konsistensi produk yang lebih kuat; Temperamen produk yang dibentuk oleh merah lebih energik.
-Kerugian menggunakan merah ini adalah bahwa area merah sedikit menarik dibandingkan dengan konten Weibo, dan pembacaan mendalam lebih sulit untuk dicapai;
Menggunakan aplikasi web NetEase Weibo melalui browser Safari, efek visual akhir berbeda dari klien lokal, bahwa bilah alat peramban selalu menempati garis ruang di bagian bawah layar. Merah adalah warna yang relatif berisik, sedangkan bilah alat peramban berwarna biru dan abu -abu, yang relatif tenang. Kesenjangan besar antara kedua warna ini membuat kacamata sangat tidak nyaman.
Berdasarkan analisis di atas, tidak cocok untuk menggunakan warna merah klien lokal.
Pendahuluan Artikel Webjx: Netease Weibo, Pengembangan aktual HTML5.
2. Apa dampak dari berlari di browser Safari?
Aplikasi Web Netease Weibo dijalankan dan ditampilkan dari browser Safari, yang merupakan salah satu lingkungan untuk produk ini. Halaman web memberi orang perasaan ringan dan ramping, sementara klien lokal memberi orang perasaan berat dan stabil.
Oleh karena itu, gaya visual yang ringan adalah pilihan yang baik.
3. Tren Gaya Visual Saat Ini
Gaya baru yang dipimpin oleh Metro UI dan Google+ telah menjadi tren pengembangan gaya visual yang signifikan. Setelah periode pengalaman visual yang indah dan kompleks, saya kembali ke kesederhanaan dan gaya visual yang segar mulai populer.
Jadi, desainer visual telah mencoba beberapa upaya visual, termasuk merah, hitam keren, dan abu -abu muda segar. Setelah membandingkan dari beberapa pihak, semua orang sepakat bahwa warna abu -abu segar dan terang itu. Grey segar dan terang adalah warna utama, dan status ikon yang diklik adalah merah yang biasa digunakan oleh NetEase, yang mempertahankan konsistensi gaya visual sampai batas tertentu.
5. Pengembangan Front-End: Hancurkan trik
Orang yang bertanggung jawab: insinyur front-end; Peserta: Manajer Produk, Perancang Interaksi, Perancang Visual, Teknisi Back-End
Ketika Anda mencapai bagian ini, Anda mungkin lebih peduli tentang seperti apa kode spesifiknya dan seperti apa kerangka implementasi itu? Maaf, rahasia produk yang terlibat dalam perusahaan, dan kode implementasi spesifik tidak dapat ditampilkan kepada semua orang. Maafkan aku!
Di sini kami memilih 2 pertanyaan netizens untuk menjawab secara singkat:
Pertanyaan 1: Bisakah Anda berbicara tentang arsitektur front-end? Mengapa Sencha tidak digunakan?
Jawaban: Karena Sencha Touch 1.x/2.x, JQuery Mobile, dll. Tidak ideal untuk kustomisasi, kinerja dan konsumsi sumber daya, NetEase Front-end telah mengembangkan kerangka kerja sendiri. Seperti yang Anda katakan, ia menggunakan SEAJS untuk menangani pemuatan skrip, dan Iscroll mensimulasikan pengguliran. Tampaknya efeknya masih bagus. NetEase Front-end akan terus meningkatkan kerangka kerja ini.
Pertanyaan 2: Bisakah Anda mengambil gambar dan mengunggah gambar?
iPhone Safari tidak memberikan izin untuk mengambil kamera dan galeri, jadi persyaratan ini belum terpenuhi. Ngomong -ngomong, jika Android memberikan izin, itu pasti akan memenuhi kebutuhan mendesak ini pada waktu itu.
6. Pekerjaan tindak lanjut
Pekerjaan selanjutnya terutama melibatkan inspeksi interaktif, inspeksi visual, pengujian QA, ringkasan dan umpan balik untuk memperbaiki masalah setelah diluncurkan, dan perencanaan untuk iterasi berikutnya. Semua orang mengerti proses proyek, jadi saya tidak akan banyak bicara.
Pelajaran yang Dipetik Dari Ini
1. Perasaan tentang alur kerja
1. Menjadi desain pengalaman yang sangat baik sebagai panduan.
Proyek ini adalah contoh khas dari pendekatan berorientasi desain. Pertama, ini memberi desainer cukup waktu dan ruang untuk dimainkan, sementara teknologi dapat diserang balik. Gagasan kerja ini adalah landasan dari seluruh produk untuk mendapatkan pengalaman pengguna yang baik. Teknologi HTML5 sangat kuat dan memiliki terlalu banyak kemungkinan; Dan desain adalah untuk membentuk kemungkinan teknis ini menjadi cetakan.
2. Manajer Produk, Interaksi, Visi, Komunikasi Front-End Secara Tepat dan Sering
Di seluruh proyek, manajer produk, perancang interaksi, perancang visual, dan insinyur front-end mengadakan pertemuan setiap minggu. Kemudian terbukti bahwa komunikasi yang sering ini sangat mengurangi tingkat pengerjaan ulang dan meningkatkan efisiensi pengembangan.
3. Jalankan dengan cepat dengan langkah -langkah kecil dan fokus pada iterasi.
Produk Netease Weibo relatif kompleks, dan kemajuan pengembangan HTML5 relatif lambat dan tenaga kerja terbatas. Tidak mungkin untuk menyelesaikan semua detail fungsional dan online secara bersamaan. Kalau tidak, dibutuhkan satu bulan untuk debug nanti, menambahkan beban berat untuk pengembangan produk yang cepat. Oleh karena itu, itu menjadi pilihan yang tak terhindarkan untuk hanya melakukan fungsi inti paling dalam edisi pertama.
2. Pengalaman pengguna
1. Sistem navigasi lebih cocok di bagian atas layar.
Toolbar browser selalu ada, yang membuat bilah navigasi tab tidak lagi cocok untuk diperbaiki di bagian bawah layar, dan bagian atas lebih cocok.
2. Kenyamanan lebih penting, dan fungsi yang paling umum digunakan diatur secara cerdik.
Karena kinerja produk dan kinerja browser, kelancaran aplikasi web saat ini dan kecepatan lompatan masih belum sebanding dengan aplikasi asli, dan biaya lompatan sedikit lebih tinggi. Oleh karena itu, perlu untuk membawa fungsi yang paling umum digunakan lebih dekat dengan pengguna untuk mengurangi biaya tunggu yang disebabkan oleh lompatan.
3. Draf visual adalah keseimbangan antara estetika dan kesederhanaan. Sebagian besar draft visual perlu diimplementasikan menggunakan kode.
Hampir semua visi diimplementasikan melalui kode, dan sebaiknya tidak terlalu rumit untuk desain visual. Ini juga membutuhkan waktu bagi insinyur front-end untuk mencerna konsep visual.
3. Pemahaman implementasi teknis
1. Pembatasan izin browser Safari, aplikasi web tidak dapat menghubungi alat kamera dan tidak mendukung fungsi unggahan gambar.
Ini adalah sakit kepala dan hal yang tidak berdaya. Izin yang diberikan pada sistem iOS ke aplikasi web terlalu rendah. Sebaliknya, aplikasi web sistem Android dapat mengambil kontrol kamera dan juga mendukung fungsi unggah gambar Weibo (tetapi versi Android belum dikembangkan).
2. Cutscene tidak dapat mencapai efek yang halus seperti klien lokal.
Alasannya adalah: Cutscene yang baik akan mengikis kinerja produk; Teknologi HTML5 tidak begitu sempurna dan dewasa; Masih ada kekurangan browser yang kuat.
ringkasan
Selain masalah izin sistem iOS, kinerja aplikasi web yang sangat baik dekat dengan aplikasi asli. Teknologi HTML5 telah memberi WAP Web halaman kehidupan baru dan membawa perubahan yang mengganggu WAP. Dalam proyek HTML5, perencanaan fungsional adalah yang terbaik untuk pemurnian; Arsitektur informasi harus dangkal dan sempit mungkin; Desain interaksi perlu berjuang untuk kesederhanaan dan efisiensi; Desain visual juga memperhitungkan lingkungan operasi khusus browser; Front-end tidak hanya perlu secara bertahap mencerna desain interaksi dan desain visual, tetapi juga dengan berani mencoba melakukan serangan balik dalam teknologi baru dan masalah baru. Komunikasi yang sering terjadi antara seluruh tim sangat diperlukan, dan yang terbaik adalah mengambil langkah -langkah kecil dan menjalankan langkah -langkah pengembangan yang cepat.
Dengan tenaga dan energi yang terbatas, ada bias pasti. Semua orang dipersilakan untuk membuat keributan! Menantikan untuk membahas topik menarik ini dengan Anda.