تصميم تطبيقات الهاتف المحمول الجميلة من البداية

لقد بدأت في تعلم تصميم الجرافيك عندما كان عمري 13 عامًا. تعلمت تصميم مواقع الويب من الدورات التدريبية عبر الإنترنت وكنت ألعب باستخدام Photoshop و Affinity Designer طوال اليوم. علمتني تلك التجربة كيف أفكر كمصمم.

أقوم بتصميم التطبيقات وتطويرها منذ ما يقرب من عام الآن. حضرت برنامجًا في MIT حيث عملت مع فريق لتطوير Universeaty. قبل شهرين ، بدأت العمل على تطبيق جديد ، Crypto Price Tracker ، والذي أطلقته مؤخرًا في 28 يناير.

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

عملية التصميم :

  1. قم بإنشاء رسم تخطيطي لتدفق المستخدم لكل شاشة.
  2. إنشاء / رسم إطارات سلكية.
  3. اختر أنماط التصميم ولوحات الألوان.
  4. إنشاء نماذج.
  5. أنشئ نموذجًا أوليًا لتطبيق متحرك واطلب من الأشخاص اختباره وتقديم الملاحظات.
  6. امنح اللمسات الأخيرة على النماذج حتى تكون الشاشات النهائية جاهزة لبدء الترميز.

لنبدأ!

مخطط تدفق المستخدم

تتمثل الخطوة الأولى في معرفة الميزات التي تريدها في تطبيقك. بمجرد الحصول على أفكارك ، قم بتصميم مخطط لتدفق المستخدم. مخطط تدفق المستخدم هو تمثيل عالي المستوى لرحلة المستخدم عبر التطبيق / موقع الويب الخاص بك.

عادة ، يتكون مخطط تدفق المستخدم من 3 أنواع من الأشكال.

  • تستخدم المستطيلات لتمثيل الشاشات.
  • تُستخدم الماسات لتمثيل القرارات (على سبيل المثال ، النقر على زر تسجيل الدخول ، والتمرير سريعًا إلى اليسار ، والتكبير).
  • السهام تربط الشاشات والقرارات معا.

تعد مخططات تدفق المستخدم مفيدة للغاية لأنها تقدم فكرة منطقية جيدة عن كيفية عمل التطبيق.

إليك مخطط تدفق المستخدم الذي رسمته عندما بدأت العمل على تصميم تطبيقي.

إطارات سلكية

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

أستخدم قوالب مطبوعة من UI Stencils لرسم الأطر السلكية. إنه يوفر الوقت ويعطي قماشًا جميلًا للرسم عليه وتدوين الملاحظات.

فيما يلي مثال للإطار السلكي.

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

أنماط التصميم ولوحات الألوان

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

أفضل المنصات للعثور على أنماط التصميم هي Mobile Patterns و Pttrns. وللعثور على لوحات ألوان جيدة ، انتقل إلى Color Hunt.

نموذج تجريبي

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

توجد برامج وأدوات تصميم لإنشاء نماذج بالحجم الطبيعي. أستخدم مصمم التقارب. الأداة الأكثر استخدامًا لتصميم iOS هي Sketch.

فيما يلي مثال على بعض التصميمات المبكرة لتطبيقي.

لقد جربت أكثر مع لوحات ألوان مختلفة.

شاركت النماذج الأولية مع أصدقائي لتعليقاتهم. يبدو أن الكثير من الناس يحبون مخطط التدرج الذهبي والأسود.

كن على استعداد لتلقي التعليقات وتجربة الاقتراحات الجديدة! ستجد أفكارًا رائعة تأتي من المستخدمين عندما تتحدث إليهم ، وليس عندما تقوم بالتمرير بشكل محموم عبر Dribbble أو Behance.

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

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

بمجرد أن أصبحت جميع شاشاتي جاهزة ، قمت بتجميع نموذج أولي في Adobe XD وطلبت من بعض الأصدقاء التجربة وتقديم الملاحظات.

بعد اللمسات الأخيرة وما شابه ، هذا ما يبدو عليه تصميمي النهائي.

بعد اكتمال جميع الشاشات ، قمت باستيرادها إلى Xcode وبدأت في ترميز التطبيق.

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

أنهي المنشور بأحد اقتباساتي المفضلة حول التصميم.

"التصميم ليس فقط شكله وشكله. التصميم هو كيف يعمل"

-ستيف جوبز