كيفية إنشاء تطبيق لتعلم اللغة مع Sketch

لنفترض أننا نريد إنشاء تطبيق لتعلم اللغة. يعرض هذا التطبيق كلمة أو أكثر من كلمات اللغة الهدف للمستخدم كل يوم حتى يتذكرها. نسمي هذا التطبيق “كل يوم، كلمة فرنسية”. تكمن الفكرة في إصدار سلسلة من هذه التطبيقات للغات مختلفة، لكننا سنبدأ بالفرنسية.

في بداية عملية تصميم واجهة المستخدم، نستخدم قلمًا وورقة وتبدأ في رسم وظائف مختلفة للتطبيق. عندما يتم الانتهاء من هذه الرسومات، نذهب إلى برنامج Sketch ونعطي الحياة لتصميماتنا.

يعد Sketch أداة رائعة لهذا لأنه مصمم لتصميم واجهات المستخدم. كما أن به بعض الأدوات الداخلية المناسبة التي تساعد في ضبط تصميمات الجوال ومعاينتها على أجهزة مختلفة، وسنشرح المزيد عن ذلك لاحقًا.

الدراسة الأولية لإنشاء تطبيق لتعلم اللغة

أول شيء نحتاجه هو مخطط انسيابي لفهم كيفية تنقل المستخدم في البرنامج. يساعدنا هذا المخطط الانسيابي على فهم كيفية تفاعل صفحات التطبيق المختلفة مع بعضها البعض. بعد ذلك، سنعمل على رسم كل صفحة من الصفحات الفردية. من الآن فصاعدًا، أنت جاهز لفتح برنامج Sketch وإحياء أفكار التصميم الخاصة بك.

تصميم صفحة الإعداد او صفحة Onboarding

الصفحة الأولى التي نحتاج إلى تصميمها هي صفحة Onboarding، لأنها تتيح للمستخدمين تلقي إشعارات منا. بهذه الطريقة، نوفر لهم كلمات جديدة كل يوم.

نبدأ بتجميع مبادئ تصميم واجهة المستخدم. لبدء تصميم صفحة Onboarding، من الأفضل التحقق من بعض أمثلة التطبيقات الأخرى لمعرفة كيفية الحصول على إذن لتلقي الإشعارات الفورية فيها. على سبيل المثال، قام تطبيق Foursquare بعمل ذكي للغاية في هذا الصدد. أحيانًا يتخذ المستخدمون موقفًا دفاعيًا عندما نطلب منهم تمكين الإشعارات أو السماح بالوصول إلى موقع المستخدم. لذا فقد وضعت Foursquare فقاعة إشعار في الجزء العلوي من الإرشادات لشرح سبب حاجتها للحصول على هذا الإذن.

فكرة تقديم معلومات إضافية للمستخدم في وقت تلقي إذن الإشعارات هي فكرة جيدة. بهذه الطريقة، يتوافق أيضًا مع مبادئ تصميم واجهة المستخدم التي يجب أن يكون المستخدم على دراية بها. عندما يفتح مستخدم جديد تطبيقنا، فإن أول شيء يجب أن يراه هو صفحة تشرح سبب حاجته إلى تمكين الإشعارات لهذا التطبيق.

نبدأ عملنا عمليا. أولاً، نحتاج إلى رسم مخطط تقريبي لهذه الصفحة. نبدأ بالقلم والورق، وهما وسيطان أساسيان لسهولة المسح وإعادة الرسم. كلما زاد الوقت الذي تقضيه في هذه الخطوة، قلت المشكلات التي ستواجهها عند تصميم وحدات البكسل.

الآن لدينا أساس جيد لبدء التصميم. افتح Sketch وحدد أداة Artboard. أضف عناصر iOS الشائعة مثل شريط الحالة باستخدام الإعداد المسبق لـ iPhone6 ​​في القسم الموجود على اليمين. ثم انتقل إلى File >> New From Template >> iOS UI Design. يحتوي هذا الملف على عناصر iOSالشائعة التي نحتاجها غالبًا. سيتم فتح مربع الحوار البسيط هذا عندما ينقر المستخدم على ” Enable Notifications “.

الصفحة الرئيسية في إنشاء تطبيق لتعلم اللغة

عندما يقوم المستخدم بتنشيط خيار إعلام الدفع، نرسله مباشرة إلى الصفحة الرئيسية للتطبيق. هذا هو الوقت المناسب لتقديم مقدمة وشرح بعض مكونات التطبيق، لكننا سنترك ذلك ليوم آخر. الحقيقة هي أننا إذا استخدمنا المبادئ العامة لتصميم واجهة المستخدم، فقد لا نحتاج حتى إلى هذا الشرح. التطبيق سهل الاستخدام بما يكفي لفهمه دون الحاجة إلى شرح إضافي. المعلومات الرئيسية التي يجب عرضها على الصفحة الرئيسية هي كما يلي:

نظرًا لأننا نريد استخدام التحفيز، فإننا نعرض إحصائيات الشخص في الجزء العلوي من الصفحة.

أسفل هذه الإحصائيات، نعرض الدروس الحالية والتقدم والدروس المقفلة. نريد التأكد من عدم إمكانية الوصول إلى هذه الدروس. بهذه الطريقة، سيتم تشجيع المستخدم على فتح قفله في كل مرة يفتح فيها الشاشة الرئيسية. نظرًا لأننا نريد أن يكون تطبيقنا مرئيًا تمامًا، يجب أن نحاول استخدام صور جميلة في كل صفحة.

نحن نصمم الصفحة الرئيسية، لذلك يجب أن يكون المستخدم قادرًا على الانتقال إلى أي مكان من هنا. بالنسبة للمبتدئين، يوفر التطبيق بعض إعدادات المستخدم الأساسية، مع التأكد من وجود طريقة للوصول إلى صفحة الإعدادات من الشاشة الرئيسية. الآن بعد أن عرفنا ما نريد تصميمه، نقوم بدراسة أولية للحصول على فكرة عن كيفية توافق هذه المكونات معًا بصريًا وبدون الكثير من العمل.

لذلك نفتح برنامج Sketch ونضيف مكونات الصفحة الرئيسية. بالطبع، تم بالفعل إنجاز معظم العمل. يكفي وضع كل عنصر في المكان الذي ينتمي إليه وتلوينه.

الآن بعد أن أصبحت الصفحة الرئيسية للتطبيق جاهزة، أصبح لدى المستخدم مكان لتتبع تقدمه العام وأيضًا قياس تقدم كل درس، ويمكنه أيضًا شراء دروس جديدة وتغيير إعدادات المستخدم الخاصة به.

مشاهده الدرس

في هذا القسم، نحتاج إلى إنشاء صفحة لكل درس يتم الانتقال إليه عندما ينقر المستخدم على الدروس الموجودة في الصفحة الرئيسية. نحتاج أيضًا إلى منح المستخدم القدرة على تعطيل الدرس، لأنه قد لا يرغب في تنشيط العديد من الدروس في نفس الوقت. لذلك في هذه الصفحة نحتاج إلى ما يلي:

• اسم الدرس
• التمثيل المرئي للدرس (صورة / أيقونة)
• قائمة الكلمات المفتوحة

من الآن فصاعدًا، سنستأنف نفس العملية مثل الصفحات السابقة. أولاً، نقوم بتمييز الصفحة باستخدام القلم والورق. ثم نقوم بإنشاء نسخة عالية الدقة منه في Sketch للحصول على فكرة جيدة عما سنبنيه.

نحتاج إلى اتباع مبادئ البنية الجيدة والتسلسل الهرمي، لذلك سنبدأ باسم القسم/التقدم في الأعلى. ثم تتبع الكلمات. يجب أن نستفيد أيضًا من مبدأ إعادة الاستخدام، الذي ينص على أنه يجب استخدام المكونات المشتركة لخلق التماسك. في الصفحة الرئيسية، استخدمنا هذه الدوائر الصغيرة الفعالة لإظهار التقدم، والذي يمكننا إعادة استخدامه في هذا القسم.

الآن بعد أن رسمنا صفحة الدرس، يمكننا البدء في إنشاء نسخة بكسل عالية الدقة. نحن نتبع أنماط تصميم iOS / OSX. هل لاحظت أنه في الصورة أعلاه، تم قطع خط فاصل الكلمات قبل الوصول إلى حافة الشاشة؟ هذه تفاصيل دقيقة يتعلمها المستخدمون أثناء العمل مع نظام التشغيل. يشير هذا إلى أن النقر فوق هذا العنصر سيؤدي إلى إظهار نص وقائمة أعمق. القرائن الدقيقة مثل هذه لها تأثير مهم، وفهمها يمكن أن يجعل مهمة المصمم أسهل قليلاً.

عرض الكلمة

إذا نظرت إلى المخطط الانسيابي الأصلي، يمكنك أن ترى أنه في المستوى الأعمق يمكن للمستخدم رؤية كلمة واحدة. في هذه الصفحة نقوم بتضمين ما يلي:

• صورة تعرض الكلمة
• الكلمة نفسها
• القواعد (الأفعال، الأسماء، و..).
• نطق
• تعريف الكلمة بالانجليزية
• صوت للكلمة
• ارتباط بأقسام أخرى مثل تصريف الأفعال

نظرًا لأننا نريد أن يكون هذا التطبيق مرئيًا تمامًا، نبدأ بصورة في المنتصف ثم نرتب الباقي حسب الأهمية. كما هو الحال دائمًا، نبدأ برسم تخطيطي بالقلم الرصاص والورق للحصول على فكرة عامة عن كيفية وضع عناصر واجهة المستخدم. لقد تحدثنا بالفعل عن مبدأ “إعادة الاستخدام”، فكلما زاد عدد الصفحات في التطبيق، أصبح هذا المبدأ أكثر أهمية. نحتاج إلى التأكد من أن الخطوط متوافقة في جميع صفحات التطبيق، بالإضافة إلى الأزرار والروابط.

اختبار التصاميم

من السؤال عن ماهية واجهة المستخدم، نوصل إلى النقطة التي نتمكن فيها من نقل أفكارنا في ملف Sketch، ولكن كيف يمكننا التأكد من أن كل شيء يبدو جيدًا على جهاز محمول دون إنشاء برنامج؟ هذا هو المكان الذي يكون فيه Sketch Mirror مفيدًا.

لسنوات، كان ربط تصميمات الهاتف المحمول على جهاز حقيقي أمرًا صعبًا، وكان عليك إرسال صورة JPG أو PNG إلى الهاتف أولاً. على الرغم من نجاح هذا الوضع، إلا أنه يتطلب الكثير من الطاقة ولم يكن فعالًا للغاية. أتاحت منتجات مثل معاينة Skala معاينة تصميمات Photoshop على الأجهزة المحمولة، ولكن كان من الصعب إعداد الأداة ولم تعمل دائمًا.

لحسن الحظ، يوفر Sketch الآن هذه الوظيفة داخليًا. كل ما عليك فعله هو تنزيل Sketch Mirror من App Store، وتأكد من أن كل من جهازك وجهاز الكمبيوتر على نفس الشبكة، وافتح Sketch Mirror. بعد ذلك، يمكنك تحديد جهازك المحمول بالنقر فوق الزر Mirror في الزاوية العلوية اليمنى من تطبيق الرسم. يمكن الآن عرض كل صفحة ولوحة فنية في ملف الرسم بسهولة على الهاتف وتحديثها على الفور مع تغير كل قسم.