كيف لا تمتص في التصميم ، دليل 5 دقائق لغير المصمم.

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

إذا كنت لا تعتقد أنه يمكنك تعلم التصميم ، فقط تذكر ما قاله صديقنا الأسطوري ديفيد إريك جرول حول تعلم أشياء جديدة:

لم أتعلم أبدًا العزف على الطبول. لم أتعلم أبدًا العزف على الجيتار. أنا مجرد نوع من احسب بها. أعتقد أنه إذا كنت متحمسًا لشيء ما وكنت مدفوعًا به وكنت مركَّزًا ، فيمكنك فعل أي شيء تريد القيام به في الحياة.
- ديف غروهل ، فو المقاتلون

مع وضع كلمات السيد Grohls في الاعتبار ، هل أنت مستعد لدورة التعطل؟ ربط حزام الأمان مع الحوذان ، هنا نذهب في أي ترتيب معين:

1. استخدام الكثير من التباين

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

من: https://developer.apple.com/design/tips/

2. أسود تقريبا هو أسهل في القراءة من الأسود

إذا كان لديك الخيار ، فحاول استخدام اللون # 333333 RGB (51،51،51) بدلاً من الأسود الخالص للنص. أسود نقي على هزات بيضاء للعين ويجعل من الصعب التركيز على الحروف.

3. محتوى مهم أولا

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

من: https://developer.apple.com/design/tips/

يتيح عرض بعض الأمثلة للتسلسل الهرمي البصري الجيد في البرية.

يضع Instagram (أدناه ، على اليسار) تركيزًا واضحًا على الصورة / الفيديو الذي نشره المستخدم.

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

البحث هو الوظيفة الأساسية للتطبيق ، ويستخدم الناس Pinterest لاكتشاف وتصفح.

لننظر إلى مثالين آخرين

سبوتيفي (أدناه ، على اليسار) من الواضح أنها تحتفل بالألبوم الفني وعنوان الأغنية أولاً وأن يتحكم المشغل في المرتبة الثانية. على الرغم من أن أدوات التحكم في المشغل ثانوية ، فإن Spotify تعطي وزناً أكبر لزر التشغيل والإيقاف المؤقت للأمام السريع والخلفي.

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

4. محاذاة كل الأشياء

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

إصلاح التوافق هو واحد من أسهل التحسينات التي يمكننا إجراؤها على أي تطبيق أو موقع ويب ، وعلى الفور يجعل التطبيق أو موقع الويب يبدو أفضل من 10x.

من: https://developer.apple.com/design/tips/

لننظر إلى مثال آخر على المحاذاة ، هذه المرة من medium.com

إليكم تخطيط ويب قمت بتبديله من Medium.com - كيف يبدو هذا لك؟

هل تشعر بأي شيء حيال هذا التصميم؟

تلميح: لاحظ المحاذاة على الحافة اليسرى. كيف تبدو؟

على اليسار ، سلطت الضوء على النهر المرئي الناجم عن سوء المحاذاة ، على اليمين تركت ببساطة محاذاة جميع كتل المحتوى الرئيسية.

محاذاة winky على اليسار إنشاء نهر مرئي ، محاذاة متسقة على اليمينمحاذاة سيئة على اليسار ، محاذاة ثابتة على اليمين

5. حجم النص مع التباعد

نحن لسنا تصميم للنمل.

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

حجم النص جيد مقابل حجم النص السيئة من: https://developer.apple.com/design/tips/تباعد جيد مقابل حجم تباعد غير صالح من: https://developer.apple.com/design/tips/

6. استخدم طريقة عرض قائمة النتائج ، إذا كان الترتيب مهمًا

تحتوي معظم تطبيقات الجوال وتطبيقات الويب على نوع من البحث ويمكن أن يكون هناك بعض النقاشات حول تصميم صحي حول كيفية عرض النتائج.

إذا كان الترتيب مهمًا ، يكون عرض القائمة أكثر فاعلية.

إذا لم يكن الأمر مهمًا وترغب في تشجيع الاكتشاف (مثل Pinterest أو AirBnB) ، فستشجع طريقة العرض "الشبكة" نمطًا من النظرات لدعم الاكتشاف.

كيف يمكن للمستخدمين عرض نتائج البحث المقدمة في تخطيط الشبكة؟ بقلم سي سيو و ب. تشابارو

7. التصميم بالأسود والأبيض أولاً ، قم بإضافة اللون لاحقًا

التصميم بالأبيض والأسود سوف يحافظ على التركيز على حل وتصميم التجربة الأساسية لتطبيقك.

يثير اللون ردودًا عاطفية قوية وغالبًا ما يقطع قدرتنا على التركيز على مشكلة التصميم الأساسية.

8. إنشاء تصميم مريح

مشكلة الضغط باليد هي مشكلة حقيقية ، ففكر في الرسم أدناه من مقالة Luke Wroblewski المذهلة: التنقل السريع: تحسين اللمس عبر الأجهزة.

يحدد Luke مناطق الهاتف التي يسهل الوصول إليها واستخدامها (على الأقل بالنسبة للأيدي اليمنى) - أحب أن أرى أن للتطبيقات إعدادًا يمكنك من خلاله تبديل الواجهة من اليد اليمنى المسيطرة إلى اليد اليسرى المسيطرة.

تحافظ العديد من تطبيقات الأجهزة المحمولة الفعالة على التنقل والإجراءات الأساسية في الثلث السفلي من الهاتف.

رصيد الصورة: Luke Wroblewski استجابة سريعة: تحسين ميزة اللمس عبر الأجهزة

9. اقتراض لوحات الألوان

اللون هو القليل من الفن المظلم بعيد المنال. أوصي بشدة بالتوجه إلى Dribbble وابحث عن "Color Palettes" أو استخدم منشئ لوحة الألوان مثل Coolors أو Color Claim.

تنقذ نفسك ساعات من النقاش الذي لا نهاية لها والتخمين الثاني.

10. استخدم اتفاقيات Apple و Google OS

خلقت Apple و Google موارد مذهلة لأي شخص يقوم ببناء برامج لنظام Android أو iOS.

على سبيل المثال ، تحتوي مواصفات Google Material على إرشادات وموارد وألوان وأيقونات ومكونات للمساعدة في بدء تصميم التطبيق.

تمتلك Apple HIG - إرشادات واجهة الإنسان الخاصة بها ، والتي تحدد كل ما تحتاج لمعرفته حول كيفية تصميم تطبيق iOS.

لقطات مختلفة من Google Material Design و The Apple Human Interface Guidelines

تذكر ، التصميم يأخذ الممارسة

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

إذا وجدت هذه المقالة مفيدة ، فالرجاء النقر أو النقر على "♥ ︎" والتوصية بهذا ومشاركتها مع صديق يحتاج إلى مساعدة التصميم :)