تعليق: يقدم هذا المقال عملية تطوير Netease Weibo بأكملها مع HTML5
يتم تفضيل HTML5 بشكل متزايد من قبل فرق تطوير الإنترنت في الداخل والخارج. تقوم Google ، بتطوير متجر Chrome Web Store بحماس ، وقد أصدرت Microsoft موقعًا إيرلنديًا للموضوع الربيعي الذي يدعم تطوير تقنية HTML5 ، واستثمرت نوكيا بكثافة في شراء وبناء أعمال خريطة نوكيا. يهتم عمالقة الإنترنت المحليين أيضًا بمعايير تطوير الويب الجديدة التي تم تفجيرها من جميع أنحاء المحيط وبدأوا في اختبار منتجات HTML5.تم إطلاق منتج تطبيق الويب الخاص بـ iPhone من نظام iPhone من Netease Weibo بنجاح في الربع الأول من عام 2012. وسأشارك الآن التجارب والدروس المستفادة من تطوير المشروع هذا ، وآمل أن تنمو معك في بيئة تطوير HTML5.
التوظيف
1. تكوين المطور
مدير المنتج: شخص واحد ؛
مصمم التفاعل: 1 ؛
المصمم البصري: 1 ؛
المهندس الأمامي: 1 ؛
مهندسي الكواليس: 2 ؛
اختبار: شخص واحد.
2. وقت التنمية
مصمم التفاعل: 22 يوم عمل ؛
المصمم البصري: 14 يوم عمل ؛
المهندس الأمامي: 50 يوم عمل ؛
مهندس الخلفية: بسبب استخدام بيانات الواجهة الخلفية الأصلية ، تحتاج فقط إلى التعاون مع المهندس الأمامي للاتصال بالبيانات
من بينها ، استخدم التفاعل والواجهة الأمامية أطول وقت في دورة التطوير بأكملها.
عملية تطوير تطبيق الويب Netease Weibo
1. التخطيط للمتطلبات الوظيفية: يختلف عن الويب والعملاء المحليين
الشخص المسؤول: مدير المنتج ؛ المشارك: مصمم التفاعل
يختلف تطبيق الويب الخاص بـ Netease Weibo (يشير جميعهم إلى الهواتف المحمولة في هذه المقالة) عن منتجات الويب ويختلف أيضًا عن العملاء المحليين.
1. مقارنة بالويب ، يتمتع تطبيق Netease Weibo Web بمزايا قوية مثل التنقل والغني بالوسائط ، ولديه عيوب مثل مساحة عرض المعلومات الصغيرة والهندسة المعمارية للمعلومات العميقة. حالات الاستخدام من الاثنين مختلفة. يستخدم Weibo Web في الغالب في ظل وقت وفيرة وظروف الشبكة المتفوقة ؛ تستخدم تطبيقات الويب Weibo في الغالب في ظل الوقت التافلي وظروف الشبكة ذات الجودة غير المتكافئة.
لذلك ، يجب أن يتجنب تطبيق Netease Weibo Web الوظائف الكبيرة والكاملة ، ويحتاج إلى استخراج الوظائف الأكثر شيوعًا من قبل المستخدمين في بيئة الهاتف المحمول ، وإضافة وظائف احتياجات فريدة على جانب الهاتف المحمول (مثل وظيفة الخدمة الموضعية في مرحلة التكرار).
2. مقارنة مع العملاء المحليين ، يتمتع تطبيق Netease Weibo Web بمزايا عدم التثبيت ، والترقية البسيطة ، وتكلفة التطوير المنخفضة ، والتخطيط القابل للتكيف. كما أن لديها مزايا سرعة الاستجابة البطيئة ، وأذونات منخفضة لاسترداد عناصر التحكم الأصلية للهاتف المحمول ، واستقرار ضعيف قليلاً.
استنادًا إلى مزايا وعيوب الاثنين ، يحتاج تطبيق Netease Weibo Web إلى اللحاق بالتجربة عالية الجودة للعملاء المحليين ومحاولة ضمان الوزن والسرعة.
في كلمة واحدة ، يمكن أن تكون وظائف تطبيق الويب أكثر دقة من وظائف العملاء على الويب والعملاء المحليين ، وتلبية الاحتياجات الأساسية للمستخدمين في بيئات الهاتف المحمول.
تخطيط وظيفة تطبيق الويب Netease Weibo ، كما هو موضح أدناه:
2. تصميم هندسة المعلومات: ضحل وضيق قدر الإمكان
الشخص المسؤول: مصمم التفاعل ؛ المشارك: مدير المنتج
يجب أن يعرف الأشخاص الذين صنعوا منتجات الإنترنت المتنقلة لماذا يجب أن تكون بنية المعلومات ضحلة وضيقة قدر الإمكان. السبب الأكبر هو مساحة العرض الصغيرة والمكلفة للهاتف المحمول. يجب أن تكون بنية المعلومات الخاصة بالعميل المحلي للهاتف المحمول ضحلًا وضيقًا ، ويحتاج تطبيقات الويب إلى ذلك أكثر ، لأن هناك دائمًا شريط أدوات أسفل المتصفح في صفحة المتصفح ، مما تسبب في تناول جزء صغير من مساحة العرض المليئة بالفعل. كما هو مبين في الشكل أدناه:
شريط أدوات المستعرض في أسفل شاشة الهاتف المحمول لا فائدة منه بالنسبة لمنتجات تطبيق الويب: تطبيق الويب نفسه هو تطبيق حلقة مغلقة ولا يتطلب شريط أدوات المتصفح. حتى لو لم يؤثر على بنية المعلومات الكبيرة ، فسيؤدي ذلك إلى تآكل مساحة العرض الثمينة وله تأثير مهم على تصميم نظام الملاحة (تم تحليل هذا الجزء لفترة وجيزة في المقالة السابقة "مناقشة حول تصميم تطبيق iPhone على الويب".).
مقالة WebJX مقدمة: Netease Weibo ، التطوير الفعلي لـ HTML5.
3. تصميم التفاعل: بسيط وفعال
الشخص المسؤول: مصمم التفاعل ؛ المشاركون: مدير المنتج ، المصمم البصري ، مهندس واجهة ، فني خلفي
مفهوم تصميم التفاعل:
يأتي مفهوم تصميم التفاعل المحدد لهذا المنتج من: مسح سيناريو استخدام المستخدم ، وتحليل المنافسين ، وحالة أبحاث تطبيق الويب ، ومتطلبات Weibo Web الخاصة. مفاهيم تصميم التفاعل التي تم تلخيصها أخيرًا هي بشكل أساسي:
1. سهولة البحث:
تعزيز التنقل العالمي ، والعودة السريعة إلى الصفحة الرئيسية ، والعمليات المشتركة العادية ، ومظاهرات الرسوم المتحركة في الوقت المناسب ، وتخطيط صفحة ويب بسيطة وواضحة ، إلخ.
2. تحسين كفاءة الاستخدام
تقليل مستوى بنية المعلومات ، وإعطاء إدخال مفتاح الاختصار المناسب ، وضمان مناطق اللمس الآمنة ، والنظر في عادات تصفح المستخدم ، وإعطاء الأولوية للوظائف الأساسية ، والقضاء على الضوضاء البصرية غير الضرورية ، إلخ ، إلخ.
3. أكثر ذكاء ومراعي
وهو يدعم الاستخدام دون اتصال ، والملء التلقائي في المعلومات في التحرير بعد انقطاع غير متوقع ، والاستخدام الحذر لصناديق التحذير ، والمساعدة في تنفيذ اقتراحات البحث ، وأشرطة الأدوات مرتبة لاحتياجات المهمة الحالية ، والتعليقات النشطة والفعالة ، وما إلى ذلك.
4. تحسين تركيز المهمة
مسار تشغيل المهمة الفردي ، التنقل في علامة التبويب المخفية في الوقت المناسب ، إلغاء عوامل التداخل ، عرض تراعي الأزرار غير المتوفر ، تعظيم صفحة المهمة ، بدون تقليل الوظيفة ، إلخ.
5. تناسق المنصة:
شاهدها الآن ، انقر فوقه ، وقائمة عرض منصة iOS ، ودفع الرسوم المتحركة على الشاشة أثناء عمليات الإرجاع والعودة ، وعرض مشروط لمنصة iOS ، وصناديق التحذير ، والضوابط الأصلية للاتصال ، ومنطق القفز البسيط والواضح ، إلخ.
لم يعد مفهوم التصميم التفاعلي في هذه المرحلة مجرد مفهوم ، ولكن أكثر من إرشادات تصميم محددة لمنتج تطبيق الويب. تعد طريقة تنفيذ التصميم التي تحمل مفهوم التصميم الجميل تطبيقًا مهمًا في مرحلة أبحاث التصميم.
هناك العديد من محتوى التصميم والتفاصيل ، وهنا سنلتقط فقط تفاصيل واحدة لمشاركتها معك:
سهولة البحث المعززة - التنقل العالمي المحسن
بالمقارنة مع Wap Weibo الأصلي ، فإن الوجود الثابت لشريط الملاحة العالمي هو تغيير كبير. دعونا نحلل بإيجاز أسباب القيام بذلك:
- ما هي بيئة استخدام المستخدم؟ - مواقف الهاتف المحمول في الهواء الطلق (مثل في مترو الأنفاق أو في الخط) ، أو حالة الخمول الداخلية (مثل تصفح Weibo قبل الذهاب إلى السرير) ؛
- ما هو الغرض من المستخدم القادم إلى هذه الصفحة؟ -بوت ويبو ؛
- ما هي الإجراءات الشائعة التي يستخدمها المستخدمون في هذه الصفحة؟ - انسحب لأسفل للقراءة ، أعلى وتحميل معلومات جديدة ، انقر فوق علامات تبويب أخرى لأداء القفز ؛
- ما هي الفوائد إذا تم إصلاح شريط التنقل العالمي في الأعلى؟ - مناسبة للمستخدمين للعودة إلى الأعلى ، ومريحة للمستخدمين لتحميل معلومات جديدة ، ومريحة للمستخدمين لتبديل علامات التبويب ، ولديهم شعور قوي بالتحكم العالمي ؛
- ما هي العيوب إذا تم إصلاح شريط التنقل العالمي في الأعلى؟ -مساحة عرض معلومات قيمة
…………
أثناء استخدام المستخدم ، يعد سلوك التثبيت والانتعاش والتبديل سلوكًا متكررًا نسبيًا ، ويجب ضمان راحة التشغيل. يمكن أن يفي شريط التنقل العالمي الثابت بهذا المطلب: يمكن تصدرت النقر على مفتاح المنزل وتحديثه ، مما يمكن أن يسهل المستخدمين إلى تبديل علامات التبويب. في الوقت نفسه ، يمكن أن يمكّن شريط التنقل العالمي الثابت للمستخدمين من معرفة مكان وجودهم بوضوح وأين يمكنهم الذهاب إليه ، مما يمنح المستخدمين شعورًا قويًا بالتحكم العالمي.
4. التصميم البصري: تجربة الأسلوب الجديد
الشخص المسؤول: المصمم البصري ؛ المشاركون: مدير المنتج ، مصمم التفاعل ، مهندس واجهة
تمت مناقشة تحديد النمط المرئي لتطبيق Netease Weibo Web من خلال زوايا متعددة:
1. هل يجب أن نحافظ على نغمة اللون بما يتوافق مع عميل Netease Weibo المحلي؟
تحتاج المنتجات إلى الحفاظ على تناسق معين على منصات مختلفة ، وأسلوب اللون هو أيضًا جزء مهم من تشكيل مزاج المنتج. هل نحتاج إلى استخدام الجلود المشابهة لعميل Netease Weibo المحلي؟ اللون الرئيسي للعميل المحلي لـ Netease Weibo أحمر.
التحليل كما يلي:
- فوائد استخدام هذا الأحمر هي: تناسق المنتج الأقوى ؛ مزاج المنتج الذي يتكون من اللون الأحمر أكثر حيوية.
-عيب استخدام هذا اللون الأحمر هو أن المنطقة الحمراء جذابة قليلاً مقارنة بمحتوى Weibo ، وأن القراءة الغامرة أكثر صعوبة في تحقيقها ؛
باستخدام تطبيق Netease Weibo Web من خلال Safari Browser ، يختلف التأثير البصري النهائي عن التأثير الخاص بالعملاء المحليين ، حيث يشغل شريط أدوات المتصفح دائمًا خطًا من المساحة في أسفل الشاشة. Red هو لون صاخب نسبيًا ، في حين أن شريط أدوات المستعرض أزرق ورمادي ، وهو هادئ نسبيًا. الفجوة الضخمة بين هذين اللونين تجعل النظارات غير مريحة للغاية.
استنادًا إلى التحليل أعلاه ، ليس من المناسب استخدام اللون الأحمر للعميل المحلي.
مقالة WebJX مقدمة: Netease Weibo ، التطوير الفعلي لـ HTML5.
2. ما هو تأثير الجري في متصفح سفاري؟
يتم تشغيل تطبيق Netease Weibo Web وعرضه من متصفح Safari ، وهو أحد البيئات لهذا المنتج. تمنح صفحة الويب للناس شعورًا خفيفًا ومبسطًا ، في حين أن العميل المحلي يمنح الناس شعورًا ثقيلًا ومستقرًا.
لذلك ، فإن النمط البصري خفيف الوزن هو خيار جيد.
3. اتجاهات النمط البصري الحالي
أصبح النمط الجديد بقيادة Metro UI و Google+ اتجاهًا مهمًا لتطوير النمط البصري. بعد فترة من التجربة المرئية الرائعة والمعقدة ، عدت إلى البساطة والأناقة البصرية الطازجة في أن تكون شائعة.
لذلك ، جرب المصممون البصريون العديد من المحاولات البصرية ، بما في ذلك اللون الأحمر والأسود البارد والرمادي الفاتح الطازج. بعد المقارنة من أطراف متعددة ، اتفق الجميع على أن اللون الرمادي الطازج والفاتح كان. الرمادي الطازج والفاتح هو اللون الرئيسي ، والحالة النقر على الرمز هي الحمراء الشائعة التي تستخدمها Netease ، والتي تحافظ على اتساق النمط البصري إلى حد ما.
5. التنمية الأمامية: كسر الحيل
الشخص المسؤول: مهندس واجهة ؛ المشاركون: مدير المنتج ، مصمم التفاعل ، مصمم مرئي ، فني خلفي
عندما تصل إلى هذا الجزء ، قد تكون أكثر قلقًا بشأن شكل الكود المحدد وما هو شكل إطار التنفيذ؟ عذرًا ، لا يمكن عرض أسرار المنتج المشاركة في الشركة ، ولا يمكن عرض رمز التنفيذ المحدد للجميع. سامحني!
هنا نختار أسئلة مستخدمي الإنترنت للإجابة بإيجاز:
السؤال 1: هل يمكنك التحدث عن الهندسة المعمارية الأمامية؟ لماذا لم يتم استخدام Sencha؟
الإجابة: نظرًا لأن Sencha Touch 1.x/2.x ، JQuery Mobile ، إلخ ، ليست مثالية للتخصيص والأداء واستهلاك الموارد ، فقد طورت الواجهة الأمامية Netease إطار عملها الخاص. كما قلت ، يستخدم Seajs للتعامل مع تحميل النصوص ، ويحاكي Iscroll التمرير. يبدو أن التأثير لا يزال جيدًا. سيستمر الواجهة الأمامية لـ Netease في تحسين هذا الإطار.
السؤال 2: هل يمكنك التقاط الصور وتحميل الصور؟
لا يعطي iPhone Safari إذنًا لاسترداد الكاميرات والمعارض ، لذلك لم يتم الوفاء بهذا المطلب بعد. بالمناسبة ، إذا كان Android يعطي أذونات ، فسوف يلبي بالتأكيد هذه الحاجة الملحة في ذلك الوقت.
6. عمل المتابعة
يتضمن العمل اللاحق بشكل أساسي التفتيش التفاعلي والتفتيش البصري واختبار ضمان الجودة والملخص والتعليقات لإصلاح المشكلات بعد إطلاقه والتخطيط للتكرار التالي. يفهم الجميع عملية المشروع ، لذلك لن أقول الكثير.
الدروس المستفادة من هذا
1. مشاعر سير العمل
1. كن تجربة تجربة ممتازة كدليل.
هذا المشروع هو مثال نموذجي على النهج الموجهة للتصميم. أولاً ، يمنح المصممين وقتًا ومساحة كافية للعب ، بينما يمكن أن تكون التكنولوجيا مضادة للهجوم. فكرة العمل هذه هي حجر الزاوية في المنتج بأكمله للحصول على تجربة مستخدم جيدة. تقنية HTML5 قوية ولديها الكثير من الاحتمالات ؛ والتصميم هو تشكيل هذه الاحتمالات التقنية في القوالب.
2. مدير المنتج ، التفاعل ، الرؤية ، التواصل الأمامي في الوقت المناسب ومتكررة
خلال المشروع بأكمله ، يعقد مديرو المنتجات ومصممي التفاعل والمصممين البصريين والمهندسين الأماميين اجتماعًا كل أسبوع. وقد ثبت فيما بعد أن هذا التواصل المتكرر قلل بشكل كبير من معدل إعادة صياغة وتحسين كفاءة التنمية.
3. تشغيل بسرعة مع خطوات صغيرة والتركيز على التكرار.
منتجات Netease Weibo معقدة نسبيًا ، وتقدم تطوير HTML5 بطيء نسبيًا والقوى العاملة محدودة. من المستحيل إكمال جميع التفاصيل الوظيفية والاتصال بالإنترنت في نفس الوقت. خلاف ذلك ، سوف يستغرق الأمر شهرًا واحدًا للتصحيح لاحقًا ، مما يضيف عبئًا كبيرًا على التطوير السريع للمنتج. لذلك ، أصبح اختيارًا لا مفر منه للقيام بأكثر الوظائف الأساسية فقط في العدد الأول.
2. تجربة المستخدم
1. نظام الملاحة أكثر ملاءمة في الجزء العلوي من الشاشة.
كان شريط أدوات المتصفح موجودًا دائمًا ، مما يجعل شريط التنقل في Tab لم يعد مناسبًا لتثبيت في أسفل الشاشة ، والأعلى أكثر ملاءمة.
2. الراحة أكثر أهمية ، والوظائف الأكثر استخدامًا يتم تعيينها بذكاء.
نظرًا لأداء المنتج وأداء المتصفح ، لا يزال طلاقة تطبيق الويب الحالية وسرعة القفز غير قابلة للمقارنة مع التطبيقات الأصلية ، وتكلفة القفز أعلى قليلاً. لذلك ، من الضروري أن تقرب الوظائف الأكثر شيوعًا من المستخدمين لتقليل تكلفة الانتظار الناجمة عن القفزات.
3. المسودة البصرية هي توازن بين الجماليات والبساطة. يجب تنفيذ معظم المسودات المرئية باستخدام الكود.
يتم تنفيذ كل الرؤية تقريبًا من خلال التعليمات البرمجية ، ومن الأفضل ألا تكون معقدة للغاية بالنسبة للتصميم البصري. كما يستغرق الأمر وقتًا للمهندسين في الواجهة الأمامية لهضم المسودات البصرية.
3. فهم التنفيذ الفني
1.
هذا صداع وشيء عاجز. الأذونات الممنوحة لنظام iOS لتطبيق الويب منخفضة للغاية. في المقابل ، يمكن لتطبيق الويب الخاص بنظام Android أن يسترجع عناصر التحكم في الكاميرا وأيضًا دعم وظيفة تحميل صورة Weibo (ولكن لم يتم تطوير إصدار Android بعد).
2. لا يمكن أن تحقق cutscenes تأثيرات سلسة مثل العملاء المحليين.
الأسباب هي: cutscenes الجيدة سوف تآكل أداء المنتج ؛ تقنية HTML5 ليست مثالية وناضجة ؛ لا يزال هناك نقص في متصفح قوي.
ملخص
بالإضافة إلى مشكلات إذن نظام iOS ، فإن الأداء الممتاز لتطبيق الويب قريب من تطبيق التطبيق الأصلي. أعطت تقنية HTML5 صفحات الويب WAP حياة جديدة وجلبت تغييرات مزعجة على WAP. في مشاريع HTML5 ، يعد التخطيط الوظيفي الأفضل للتحسين ؛ يجب أن تكون بنية المعلومات ضحلة وضيقة قدر الإمكان ؛ يحتاج تصميم التفاعل إلى السعي من أجل البساطة والكفاءة ؛ يأخذ التصميم البصري أيضًا في الاعتبار بيئة التشغيل الخاصة للمتصفح ؛ لا يحتاج الواجهة الأمامية إلى هضم التفاعل والتصميم البصري تدريجياً فحسب ، بل يحاول أيضًا مواجهة الهجوم في التقنيات الجديدة والمشاكل الجديدة. التواصل المتكرر بين الفريق بأكمله ضروري للغاية ، ومن الأفضل اتخاذ خطوات صغيرة وتشغيل خطوات تطوير سريعة.
مع القوى العاملة المحدودة والطاقة ، هناك تحيزات حتما. الجميع مدعوون لإثبات ضجة! نتطلع إلى مناقشة هذا الموضوع المثير للاهتمام معك.