لقد تم تصميم التطبيقات وتطويرها منذ عام تقريبًا الآن. حضرت برنامجًا في معهد ماساتشوستس للتكنولوجيا حيث عملت مع فريق لتطوير جامعة. منذ شهرين ، بدأت العمل على تطبيق جديد ، Crypto Price Tracker ، والذي أطلقته مؤخرًا في 28 يناير.
في هذا المنشور ، سأشارك عملية التصميم خطوة بخطوة التي أتبعها مع أمثلة على التطبيق الذي عملت عليه. من المفترض أن يساعد هذا أي شخص يرغب في تعلم مهارات التصميم الرقمي أو تحسينها. لا يتعلق التصميم بمعرفة كيفية استخدام برامج التصميم ، ولن تعلمك هذه المشاركة كيفية استخدامه. هناك المئات من البرامج التعليمية عالية الجودة عبر الإنترنت للتعلم. يتعلق التصميم أيضًا بفهم منتجك من الداخل إلى الخارج ، وميزاته ووظائفه ، والتصميم مع مراعاة المستخدم النهائي. هذا هو الغرض من هذا المنشور لتدريسه.
عملية التصميم:
قم بإنشاء مخطط تدفق المستخدم لكل شاشة.
إنشاء / رسم إطارات سلكية.
اختر أنماط التصميم ولوحات الألوان.
قم بإنشاء نماذج.
أنشئ نموذجًا أوليًا لتطبيق متحرك واطلب من الأشخاص اختباره وتقديم تعليقات.
امنح اللمسات الأخيرة على النماذج لتكون الشاشات النهائية جاهزة لبدء الترميز.
لنبدأ!
مخطط تدفق المستخدم
الخطوة الأولى هي معرفة الميزات التي تريدها في تطبيقك. بمجرد الحصول على أفكارك ، قم بتصميم رسم بياني لتدفق المستخدم. يمثل الرسم البياني لتدفق المستخدم تمثيلًا عالي المستوى لرحلة المستخدم عبر تطبيقك / موقعك على الويب.
عادة ، يتكون مخطط تدفق المستخدم من 3 أنواع من الأشكال.
تستخدم المستطيلات لتمثيل الشاشات.
يتم استخدام الماس لتمثيل القرارات (على سبيل المثال ، النقر على زر تسجيل الدخول ، والتمرير إلى اليسار ، والتكبير).
تقوم الأسهم بربط الشاشات والقرارات معًا.
تعد الرسوم البيانية لتدفق المستخدم مفيدة للغاية لأنها تعطي فكرة منطقية جيدة عن كيفية عمل التطبيق. تصميم تطبيق مثل مرسول
إليك رسمًا تخطيطيًا لتدفق المستخدم رسمته عندما بدأت العمل على تصميم تطبيقي.
الإطارات السلكية
بمجرد الانتهاء من الرسوم البيانية لتدفق المستخدم لكل شاشة ورحلات المستخدم المصممة ، ستبدأ في العمل على الإطار الهيكلي لجميع الشاشات. إن الإطارات السلكية هي في الأساس تمثيلات منخفضة الدقة لكيفية ظهور تطبيقك. بشكل أساسي ، رسم تخطيطي أو مخطط تفصيلي للمكان الذي ستذهب إليه الصور والعلامات والأزرار والأشياء ، مع تخطيطها وموقعها. رسم تخطيطي لكيفية عمل تطبيقك.
أستخدم قوالب مطبوعة من UI Stencils لرسم الإطارات السلكية. إنه يوفر الوقت ويعطي قماشًا لطيفًا للرسم عليه وتدوين الملاحظات.
إليك مثالًا على إطار سلكي.
الإطار السلكي للواجهة الرئيسية.
بعد رسم الإطارات السلكية ، يمكنك استخدام تطبيق يسمى Pop والتقاط صورة لجميع رسوماتك باستخدام التطبيق والحصول على نموذج أولي من خلال ربط جميع الشاشات من خلال الأزرار.
أنماط التصميم ولوحات الألوان
هذا هو الجزء المفضل لدي إنه مثل نافذة التسوق. الكثير من أنماط التصميم ولوحات الألوان للاختيار من بينها. أذهب في اختيار من أحب وتجرب معهم. شركة برمجة تطبيقات الجوال بالرياض
أفضل المنصات للعثور على أنماط التصميم هي Mobile Patterns و Pttrns. للعثور على لوحات ألوان جيدة ، انتقل إلى Color Hunt.
نموذج تجريبي
هذا عندما تنتقل أخيرًا إلى استخدام برنامج التصميم. يمثل نموذج التصميم بمعنى التصميم تمثيلاً عالي الدقة لتصميمك. يبدو الأمر وكأنك دخلت هذا التطبيق في المستقبل وأخذت بعض لقطات الشاشة منه. يجب أن تبدو واقعية تشبه إلى حد كبير الشيء الحقيقي.
هناك برامج وأدوات تصميم لإنشاء نماذج. أنا استخدم مصمم التقارب. الأداة الأكثر استخدامًا لتصميم iOS هي Sketch.
في ما يلي مثال لبعض التصميمات المبكرة لتطبيقي.
جلب الرسم بقلم الرصاص إلى بكسل!
لقد جربت أكثر من لوحات الألوان المختلفة. شركة تصميم تطبيقات الجوال بالسعودية
لقد شاركت النماذج الأولية مع أصدقائي لتعليقاتهم. يبدو أن الكثير من الناس يحبون التدرج الذهبي والمخطط الأسود.
كن على استعداد لتلقي الملاحظات وتجربة الاقتراحات الجديدة! ستجد أفكارًا مذهلة تأتي من المستخدمين عند التحدث إليهم ، وليس عند التمرير المحموم عبر Dribbble أو Behance.
لذلك أعدت تصميم النموذج وأزلت الرسوم البيانية للخلفية لأن إنشاءها كان عملية تستغرق وقتًا تقنيًا وتقليل إمكانية القراءة. هذا هو شكل النموذج المعاد تصميمه.
التدرج الذهب مع الأسود تبدو جيدة بشكل مدهش! شركة تصميم تطبيقات الجوال
لقد كنت راضيًا جدًا عن نظام الألوان والرموز على شريط علامات التبويب والتخطيط العام. تقدمت وصممت بقية الشاشات باتباع إرشادات التصميم نفسها. لقد كانت عملية طويلة ، لكنها بالتأكيد ممتعة!
بمجرد أن تكون جميع شاشاتي جاهزة ، قمت بتجميع نموذج أولي في Adobe XD وطلبت من بعض الأصدقاء تجربة وتقديم ملاحظات.
بعد اللمسات الأخيرة ، وهذا ما يبدو عليه تصميمي النهائي. تطبيق حجر صالونات
الواجهة الرئيسية!
بعد اكتمال جميع الشاشات ، قمت باستيرادها إلى Xcode وبدأت في ترميز التطبيق.
في هذا المنشور ، سأشارك عملية التصميم خطوة بخطوة التي أتبعها مع أمثلة على التطبيق الذي عملت عليه. من المفترض أن يساعد هذا أي شخص يرغب في تعلم مهارات التصميم الرقمي أو تحسينها. لا يتعلق التصميم بمعرفة كيفية استخدام برامج التصميم ، ولن تعلمك هذه المشاركة كيفية استخدامه. هناك المئات من البرامج التعليمية عالية الجودة عبر الإنترنت للتعلم. يتعلق التصميم أيضًا بفهم منتجك من الداخل إلى الخارج ، وميزاته ووظائفه ، والتصميم مع مراعاة المستخدم النهائي. هذا هو الغرض من هذا المنشور لتدريسه.
عملية التصميم:
قم بإنشاء مخطط تدفق المستخدم لكل شاشة.
إنشاء / رسم إطارات سلكية.
اختر أنماط التصميم ولوحات الألوان.
قم بإنشاء نماذج.
أنشئ نموذجًا أوليًا لتطبيق متحرك واطلب من الأشخاص اختباره وتقديم تعليقات.
امنح اللمسات الأخيرة على النماذج لتكون الشاشات النهائية جاهزة لبدء الترميز.
لنبدأ!
مخطط تدفق المستخدم
الخطوة الأولى هي معرفة الميزات التي تريدها في تطبيقك. بمجرد الحصول على أفكارك ، قم بتصميم رسم بياني لتدفق المستخدم. يمثل الرسم البياني لتدفق المستخدم تمثيلًا عالي المستوى لرحلة المستخدم عبر تطبيقك / موقعك على الويب.
عادة ، يتكون مخطط تدفق المستخدم من 3 أنواع من الأشكال.
تستخدم المستطيلات لتمثيل الشاشات.
يتم استخدام الماس لتمثيل القرارات (على سبيل المثال ، النقر على زر تسجيل الدخول ، والتمرير إلى اليسار ، والتكبير).
تقوم الأسهم بربط الشاشات والقرارات معًا.
تعد الرسوم البيانية لتدفق المستخدم مفيدة للغاية لأنها تعطي فكرة منطقية جيدة عن كيفية عمل التطبيق. تصميم تطبيق مثل مرسول
إليك رسمًا تخطيطيًا لتدفق المستخدم رسمته عندما بدأت العمل على تصميم تطبيقي.
الإطارات السلكية
بمجرد الانتهاء من الرسوم البيانية لتدفق المستخدم لكل شاشة ورحلات المستخدم المصممة ، ستبدأ في العمل على الإطار الهيكلي لجميع الشاشات. إن الإطارات السلكية هي في الأساس تمثيلات منخفضة الدقة لكيفية ظهور تطبيقك. بشكل أساسي ، رسم تخطيطي أو مخطط تفصيلي للمكان الذي ستذهب إليه الصور والعلامات والأزرار والأشياء ، مع تخطيطها وموقعها. رسم تخطيطي لكيفية عمل تطبيقك.
أستخدم قوالب مطبوعة من UI Stencils لرسم الإطارات السلكية. إنه يوفر الوقت ويعطي قماشًا لطيفًا للرسم عليه وتدوين الملاحظات.
إليك مثالًا على إطار سلكي.
الإطار السلكي للواجهة الرئيسية.
بعد رسم الإطارات السلكية ، يمكنك استخدام تطبيق يسمى Pop والتقاط صورة لجميع رسوماتك باستخدام التطبيق والحصول على نموذج أولي من خلال ربط جميع الشاشات من خلال الأزرار.
أنماط التصميم ولوحات الألوان
هذا هو الجزء المفضل لدي إنه مثل نافذة التسوق. الكثير من أنماط التصميم ولوحات الألوان للاختيار من بينها. أذهب في اختيار من أحب وتجرب معهم. شركة برمجة تطبيقات الجوال بالرياض
أفضل المنصات للعثور على أنماط التصميم هي Mobile Patterns و Pttrns. للعثور على لوحات ألوان جيدة ، انتقل إلى Color Hunt.
نموذج تجريبي
هذا عندما تنتقل أخيرًا إلى استخدام برنامج التصميم. يمثل نموذج التصميم بمعنى التصميم تمثيلاً عالي الدقة لتصميمك. يبدو الأمر وكأنك دخلت هذا التطبيق في المستقبل وأخذت بعض لقطات الشاشة منه. يجب أن تبدو واقعية تشبه إلى حد كبير الشيء الحقيقي.
هناك برامج وأدوات تصميم لإنشاء نماذج. أنا استخدم مصمم التقارب. الأداة الأكثر استخدامًا لتصميم iOS هي Sketch.
في ما يلي مثال لبعض التصميمات المبكرة لتطبيقي.
جلب الرسم بقلم الرصاص إلى بكسل!
لقد جربت أكثر من لوحات الألوان المختلفة. شركة تصميم تطبيقات الجوال بالسعودية
لقد شاركت النماذج الأولية مع أصدقائي لتعليقاتهم. يبدو أن الكثير من الناس يحبون التدرج الذهبي والمخطط الأسود.
كن على استعداد لتلقي الملاحظات وتجربة الاقتراحات الجديدة! ستجد أفكارًا مذهلة تأتي من المستخدمين عند التحدث إليهم ، وليس عند التمرير المحموم عبر Dribbble أو Behance.
لذلك أعدت تصميم النموذج وأزلت الرسوم البيانية للخلفية لأن إنشاءها كان عملية تستغرق وقتًا تقنيًا وتقليل إمكانية القراءة. هذا هو شكل النموذج المعاد تصميمه.
التدرج الذهب مع الأسود تبدو جيدة بشكل مدهش! شركة تصميم تطبيقات الجوال
لقد كنت راضيًا جدًا عن نظام الألوان والرموز على شريط علامات التبويب والتخطيط العام. تقدمت وصممت بقية الشاشات باتباع إرشادات التصميم نفسها. لقد كانت عملية طويلة ، لكنها بالتأكيد ممتعة!
بمجرد أن تكون جميع شاشاتي جاهزة ، قمت بتجميع نموذج أولي في Adobe XD وطلبت من بعض الأصدقاء تجربة وتقديم ملاحظات.
بعد اللمسات الأخيرة ، وهذا ما يبدو عليه تصميمي النهائي. تطبيق حجر صالونات
الواجهة الرئيسية!
بعد اكتمال جميع الشاشات ، قمت باستيرادها إلى Xcode وبدأت في ترميز التطبيق.