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

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

إليك كيف تصممه ...

ابدأ بمخطط أسود وأبيض

سي

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

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

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

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

استخدم تباعد مبالغ فيه

ثعلب النار

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

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

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

إضافة اللون الطبيعي والتظليل

رابطة

أنت الآن على استعداد للتفكير في الألوان والتظليل للتصميم. اجعلها تبدو طبيعية وتقليد الواقع في ظلال وأساليب التصميم.

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

استخدم بعض القواعد الأساسية للفيزياء لتخيل (وتصميم) كل بطاقة كما ستعقد:

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

خلق طبقات بسيطة

todoist

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

المواد أزرار

"في التصميم المادي ، يتم ترجمة الخصائص الفيزيائية للورق إلى الشاشة. الخلفية من تطبيق يشبه نسيج مسطح غير شفاف من ورقة.

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

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

التمسك الخطوط البسيطة

اكتب

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

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

الحد من عناصر واجهة المستخدم

موسيقى

كرر بعدي: بطاقة واحدة تساوي إجراء واحد.

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

قد لا تحتاج حتى إلى زر على الإطلاق في تصميم على شكل بطاقة.

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

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

استنتاج

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

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