في كثير من الأحيان في الشركة ، والتصميم متروك تماما للمصمم. وقد يغيرها فجأة تمامًا ، على الرغم من صيحات الاحتجاج "للجبهات" و "mobilshchiki". لدينا رأي مختلف: يجب ألا تؤثر النظرة الداخلية الداخلية للمصمم أو رؤية المطور بشكل كبير على المنتج. تصميم المنتج هو الجزء المرئي من العمل الذي يتفاعل معه العميل. لا يستطيع المصمم تقديم "قائمة الأمنيات" بنفسه ، يجب عليه التركيز على احتياجات العملاء. تطوير منتجات جيدة عضويا ، مع التركيز على العملاء. وهذا ينطبق على كل من التشبع والتصميم الوظيفي.
لا ينبغي أن يكون المصمم هو الناقل لمتطلبات التطبيق ؛ بل يجب على الشركة تحديد ما سيكون عليه. بغض النظر عمن يعمل على تصميم الدفعات الإلكترونية ، سيكون كل من الموقع والتطبيق جميلًا ومريحًا ، ولن يتغير النمط بشكل كبير بمقدار 180 درجة. يعمل هذا المبدأ لصالح مطوري الواجهة الأمامية والجوّال.
اليوم ، أنا ، مصمم المشروع تيمور ، سوف أخبرك كيف قمنا بإعادة تصميم تطبيق الهاتف المحمول وكيف ظهر نظام التصميم الخاص بنا.
كيف بدأ كل شيء
عندما جئت إلى المشروع لأول مرة ، بدا التطبيق كما يلي:
وقبل ذلك كان مثل هذا بشكل عام:
ما لم يناسبني:
1. لم التطبيق الحجم. في البداية ، كان لدينا عملتان (اليورو والدولار الأمريكي) وبطاقتان (لنفس العملات). كانت مترابطة بشكل صارم على حد سواء بصريا ومنطقيا. قسم الدولار هو بطاقة الدولار وهلم جرا. ثم تمت إضافة RUB وبدأ التصميم بأكمله في "الانتقال". لإضافة عناصر جديدة كان لاستخدام العكازات. لدى EPayments خطط لتوسيع قائمة العملات ونحتاج إلى معرفة كيفية إضافتها دون ألم للعميل. يجب أن يظل السلوك على جميع الشاشات متوقعًا. إذا تمت معالجة قائمة العملات على شاشة واحدة بواسطة نمط سلوك محدد ، فيجب تكرار نمط العمل مع العملات على الشاشة الأخرى.
2. تصميم قديم. بدا التطبيق "شديد القمامة" وصعب ، وأردت المزيد من العناصر الجوية وغير الضرورية. لماذا نحتاج إلى تدرجات و "جمال" إذا بدأت العيون بعد 5 دقائق بالتعب في التطبيق؟
3. الفرق في التصميم. لنظام التشغيل iOS و Android ، كان هناك تطبيقان مختلفان بشكل أساسي. إذا تحول شخص من نظام تشغيل إلى آخر ، فقد كل تجربة المستخدم المتراكمة. لم يستطع مالك Samsung إخبار مالك iPhone بكيفية إجراء العملية.
4. سير العمل غير الأمثل. عندما كان لدينا طريقة جديدة لتحويل الأموال من المحفظة ، جاءت هذه المهمة إلى المحلل الذي صنع mocap. ثم جاءت لي وتم رسم شاشة للترجمة. ثم قام المطور المحمول بتحويل كل شيء إلى رمز وصدمه إلى التطبيق. هذه عملية غير صحية ، حيث كان من الممكن إلقاء 80 ٪ من تكاليف العمالة. يمكنك توفير الكثير من الوقت هنا بمجرد إزالة المصمم من خط التجميع. إذا كانت هناك عناصر واجهة جاهزة ، فيمكنك تجميع نوافذ الترجمة منها.
تصميم مستقبل أكثر إشراقا
وهكذا بدأت العمل. بادئ ذي بدء ، كنت أرغب في تقديم طلب سهل الاستخدام. الخدمات المالية عموما لا ينبغي أن تشغل العملاء لفترة طويلة. في ذلك تحتاج إلى التنقل بسرعة ، واختيار عملية ، وإجراء ذلك والقيام بمزيد من عملك.
ثابت آخر مهم هو الود المطور. إذا كان لدينا شريحة أو عملة أو خدمة جديدة ، فلا ينبغي أن تعاني الجبهات والمعبئات وتثير كل الأنماط. يضيفون ببساطة ميزة جديدة تبدو واضحة ومتوقعة.
كنت أبحث عن أبسط تشابه وأدركت أننا بحاجة إلى مُنشئ نوافذ. لدينا مجموعة من الضوابط (الخلف ، الأمام ، اختيار الحساب ، إدخال التفاصيل) وقواعد العمل معهم (الألوان ، المسافات البادئة ، أحجام العناصر). في المصمم ، يمكن للمحللين والعاملين المتنقلين إنشاء بطاقات خدمة جديدة ونوافذ مشروطة بأنفسهم دون مجيئهم إلى "الركوع".
كان من المهم مراعاة أن المنتج يتطور بشكل واسع. اليوم لدينا 3 عملات ، في عام قد يكون هناك 33. اليوم نحن نقدم 15 طريقة لتحويل الأموال ، وغدا سيكون 115. في التطبيق قد تظهر كيانات جديدة تماما: بطاقات افتراضية ، وشراء الأسهم أو خدمات أخرى.
تجاهل أغلال القيود
المشكلة : يحتوي المشروع على عدد متزايد من العناصر - العملات وطرق التحويل وما إلى ذلك. يتم ترتيب العديد من العناصر أفقياً ، وكلما زاد عدد العناصر ، زاد استخدامها.
الحل : تقدم للتوسع مسبقًا ، اختر وضعًا مناسبًا للعناصر.
المشكلة الرئيسية في الإصدار السابق هي التحجيم. لذلك ، لدينا شاشة مشروطة بدقة 480 * 720 بكسل. وعلى ذلك أفقيا هناك 3 علامات تبويب مع وسائل تحويل الأموال. حسنًا ، سيكون عمرهم 15 عامًا. من الذي في عقولهم الصحيحة سوف يقوم بتمرير 15 علامة تبويب إلى اليمين؟ أو هل تحتاج إلى جعلها صغيرة الحجم بحيث لا يمكنك الدخول إليها إلا بإصبعك الصغير؟
في الدفع الإلكتروني ، لدى العميل محفظة واحدة بها عدة أقسام للعملات. العنصر الأكثر قابلية للتوسعة في واجهة المستخدم المحمولة هو القائمة. يمكن قلبه إلى ما لا نهاية تقريبًا بحركة مألوفة تمامًا. حتى إذا كان هناك العديد من العناصر فجأة ، يمكنك دائمًا تثبيت عامل التصفية أو البحث.
حد الراحة هو في مكان ما حول 10 عملات أو طرق التحويل. عندما يكون هناك المزيد منها ، سنقوم بربط الآلية الثانية ، والتي هي الآن قيد التطوير - الأقسام المختارة. يختار العميل نفسه أقسام العملات الأكثر أهمية بالنسبة له ويميزها بنجمة. أو إنشاء لوحة القيادة الخاصة بك في المنشئ ، مثل شاشة البداية في جيرا.
بالإضافة إلى ذلك ، كان لدي "برجر" على اليسار وشريط صنبور في الأسفل. أهم العمليات التي وضعناها على اللوحة السفلية. بادئ ذي بدء ، نظرتم إلى رصيد الأقسام والبطاقات. بعد ذلك يمكنك الذهاب إلى مكتب الاستقبال أو النقل ، أو الاطلاع على سجل المعاملات أو صرف العملة. كل الأشياء الأقل أهمية التي وضعت في "برغر". الآن هناك أكاذيب ، على سبيل المثال ، برنامج فرعي يتم الوصول إليه بشكل متكرر أقل.
حسنًا ، تم حل المشكلة ، انتقل إلى المشكلة التالية.
نبقي الاختلافات في الماضي
المشكلة : تطبيقات iOS و Android ليست متشابهة. تصميمها قديم ، الواجهة بها الكثير من العناصر الإضافية. من الصعب على العميل التركيز ، وسرعان ما يتعب.
الحل : قم بتقديم الطلبات وفقًا للإرشادات ، ولكن مع تصميم موحد. تنظيف من التدرجات ، والعمل على سهولة الاستخدام.
كما قلت ، كانت إصدارات Android و iOS تطبيقات مختلفة بشكل أساسي. لا يوجد شيء جيد للعميل أو لنا. بالإضافة إلى ذلك ، واجه المطورون مشكلات في طرح ميزات واختبارات جديدة. لذلك ، قررنا أن نجلب كل شيء إلى شكل واحد.
لا يمكنك عمل تطبيقات مماثلة. جوجل لديها تصميم المواد ، وأبل لديها واجهات الإنسان. لكن العناصر الأساسية التي نتخذها مماثلة. الشبكة ، ومعظم الضوابط وموقع الكتل هي نفسها. عناصر التحكم المسؤولة عن البنية الأساسية مصممة وفقًا لإرشادات نظام التشغيل. الحل الأسهل هو تنفيذ التطبيق بالكامل. لكن هذه إشارة إلى الكسل والجهل بالأدلة. والأدلة مكتوبة من قبل أشخاص أكثر ذكاءً منا مرات عديدة ، الأمر يستحق الاستماع إليهم.
أول من قمنا بتحديث التطبيق على Android. كان أرخص عند "نقاط القصة" ، معظم عملائنا يستخدمون نظام التشغيل هذا. بالإضافة إلى ذلك ، في مرحلة ما كان لدينا خلل في فريق تطوير المحمول - كان هناك المزيد من الأشخاص في فريق تطوير Android ويمكننا تخصيص بعض منهم لإعادة التصميم. لقد مضت هذه النسخة قدما وأصبحت نسخة نظام التشغيل iOS تلحق بها تدريجيا.
يعتمد ذلك على أدلة تصميم المواد وبفضل هذا ، لدينا تطبيق يكون فيه الشخص الذي لديه Xiaomi الشرطي على دراية بكل شيء. يتعلم بسرعة كيفية إرسال الأموال التي حصل عليها إلى بطاقة مصرفية.
عندما أطلقنا إعادة التصميم ، بدأنا في جمع ردود الفعل والنقد البناء. أولاً ، كان هناك دفق صغير من السلبية من أولئك الذين لا يحبون إعادة تصميم كظاهرة. هذا أمر طبيعي ويجب ألا يخاف. تواجه كل خدمة هذا. ثم كل شيء يهدأ ويمكنك جمع معلومات مفيدة.
في البداية ، انخفض التصنيف قليلاً ، ثم عاد إلى 4.6. لقد قدمنا بعض التعليقات الهامة وأصبحت الاستعراضات جيدة ولطيفة مرة أخرى. من هذه اللحظة ، يمكنك أن تأخذ على تطبيق لدائرة الرقابة الداخلية.
الآن التطبيقات متشابهة جدا. تتم بعض الأشياء بشكل متعمد لا وفقًا للإرشادات ، ولكن المقياس الرئيسي هو رد فعل العملاء. بدا كل شيء مناسبًا للمستخدمين: لم يتغير التقييم ، وشُكرنا على إعادة تصميم المراجعات.
تنعكس حقيقة أن التطبيقات أصبحت متشابهة في التطوير. الآن أصبحوا أسهل للاختبار ، الحالات في Testrail هي نفسها. جميع وثائق الحالة مكررة - بشكل طبيعي ، بصيغتها المعدلة. على سبيل المثال ، عندما نقوم بإعداد ميزة في تطبيق iOS ، فإن لديها بالفعل JSON من Android ولا يحتاج المطورون إلى الدخول في طلبات.
نعطي مقاليد الحكم
المشكلة : لم يتم تحسين عملية التطوير. يتم رسم كل بطاقة ترجمة جديدة وتطويرها من البداية.
الحل : اصنع مجموعة من العناصر والقواعد الجاهزة ، وتحول العملية إلى "مصمم".
ظهرت فكرة المصمم مع إعادة تصميم التطبيق ، لكننا قمنا بتطبيقه لاحقًا. كما قلت ، يجب أن التطبيق لا يعتمد على لي. إذا قدمنا ميزة جديدة ، فستنتقل المهمة من المحلل إلى مطوري الأجهزة المحمولة. يقومون بتجميع نافذة من عناصر التحكم المكتملة ، والتحقق من أنماطها ، والهوامش وكل شيء آخر - وفويلا ، النافذة جاهزة. يمكنني عمل رمز ، ولكن يجب أن تنتهي مشاركتي المباشرة هناك.
أولاً ، وجهت كل شاشة على حدة. ثم قام بتجميع العناصر المكررة: القوائم ، عناصر التحكم ، الأزرار ، الرسوم التوضيحية ، شاشات التأكيد ، وما إلى ذلك. عندما كان التطبيق جاهزًا ، كان لدي مكون واجهة مستخدم مكتمل.
إلقاء نظرة على العناصر ، كل شخص لديه شيء مماثل:
• العنوان
• "رجوع"
• قطرة
• خط لإدخال التفاصيل
• "التالي"
نحن نفعل هذه العناصر مقدما. بالإضافة إلى أننا نعد أدلة للألوان والمسافات البادئة والخطوط. في المخرجات ، نحصل على مُنشئ يقوم فيه المطور بتحويل الرسم في الرسام الشرطي من المحلل إلى نافذة ترجمة كاملة.
بطبيعة الحال ، كان على العمال المتنقلين العمل لتحويل مجموعة من الشاشات إلى نظام مكون أنيق. ولكن حدث ذلك بعد ذلك: لم يعد من الضروري الانتقال إلى Zeplin لتصميم الشاشة ، وجعله وتخزينه في المستقبل. هناك مكونات ، هناك ورقة نمط صارمة.
لتلخيص
أنا أحب ما فعلناه. أصبح التطبيق أكثر جمالا ، وكان موضع تقدير من قبل العملاء. أصبح من الأسهل على الجبهات والمعبئات العمل.
لم نستخدم بعد المقاييس بالكامل التي توضح كيفية تغير سلوك المستخدم. حتى الآن لا يمكننا الحكم إلا من خلال تقييمات العملاء والاستعراضات. بقي التصنيف كما هو - 4.6 على Google Play ، 4.8 على AppStore. تتعلق معظم المراجعات السلبية بعملية التحقق ، ويبدو أن العملاء وقت طويل. وفي الجانب الإيجابي ، غالباً ما يتم الإشادة بالتطبيق.
مقياس آخر ، داخلي فقط: نادراً ما أفتح ملف رسم مع مشروع متنقل. يضيف المطورون طرقًا جديدة للإيداع والسحب بدون لي. هذا يعني أن مكون واجهة المستخدم يعمل وقد تمكنت من جعل التصميم نظامي ، دون دكتاتورية المصمم.
نعتزم الآن تقديم المنتج لإلقاء نظرة واحدة على منصات مختلفة ، بما في ذلك إصدار سطح المكتب. بالإضافة إلى ذلك ، نخطط "لتجريف" بنية السيناريو بالكامل للميزات في تطبيقات الهاتف المحمول بحيث يقضي العميل وقتًا أقل في العمليات. حسنًا ، في الوقت نفسه ، سنتخلى عن البرجر على اليسار - هذا نمط قديم ، هناك خيارات أكثر ملاءمة.
تبحث عن وظيفة؟
نحن نبحث عن موظفين للعمل في مكتب في سانت بطرسبرغ. إذا كنت مهتمًا بتقنية fintech ، فنحن في انتظارك. ستجد أدناه شواغر وروابط للصفحات المقابلة لـ hh.ru.