تحميل مجاني: رسم واجهة المستخدم كيت
بعد غوغل تصميم المواد نتائج المبادئ في الانخراط ، والتصاميم الحديثة. ولكنها تنتج أيضًا نتيجة نهائية تبدو وكأنها تبدو جيدة ، مثل Google. تتحرك العلامة التجارية فائقة الذوق من جانبها ، ولكنها ليست رائعة إذا كنت ترغب في الاحتفاظ بقوة العلامة التجارية الخاصة بك.
إنفجن تم تعيينها لإنشاء تصميم بريد إلكتروني يلتزم بتصميم متعدد الأبعاد ، دون النظر إلى نسخة Gmail. إنه نجاح كبير ، لذلك نحن سعداء لأنهم وافقوا على تقديمه كمجموعة UI مجانية {$lang_domain} القراء.
اللون
تشتهر Google منذ زمن بعيد بالاستخدام الجريء للألوان ، ويوسع التصميم متعدد الأبعاد لوحة الألوان ذات الطيف القائم على التشبع. ويبقى التركيز على حقول كبيرة من الألوان المسطحة خالية من التدرجات التي كانت تهيمن على الويب. وعلى الرغم من أن المحادثات حول اتجاهات التصميم تميل إلى دمج التدرجات ، وإسقاط الظلال ، وفن التخيل ، فإن التصميم متعدد الأبعاد يشجع الظلال الدرامية للإشارة إلى الحقائق اللمسية التي تأسست عليها.
لذا فإن هذا التنزيل يميز نفسه على الفور من خلال عرض المستخدم بتدرجات دراماتيكية ، بما في ذلك الربط الصارخ في أيقونة التصميم الرئيسية. تم رسم جميع الألوان من لوحة تصميم المواد من Google ، حيث تم مزجها ببساطة بطريقة جديدة. نظرًا لأن التصميم المادي يتطلب ألوانًا جريئة وعالية التباين وألوانًا عميقة الصباغ ، فإنه من المغري استخدام لوحة فائقة العمق لملء جميع أدوار الألوان في التصميم. ولكن الألوان لا تحتاج إلى أن تكون متباينة لتلائم المعايير المادية وتحقيق أهدافها ، فهي تحتاج فقط إلى أن تكون مقصودة.
طباعة
تتفهم Google بوضوح قوة الطباعة في العلامة التجارية. تعمل خطوطها المخصصة على إنشاء واجهات مستخدم واضحة وتعزيز علامتها التجارية. أراد Invision مظهرًا عصريًا ونظيفًا إلى Roboto ، دون استخدام Roboto. لذلك يستخدم القالب Avenir؛ خط نظيف آخر له أصول هندسية ، مع دفء إنساني.
التفاعل والرسوم المتحركة
يساعد دائمًا على الحفاظ على النظام الأساسي الخاص بك في الاعتبار عند التصميم ، من أجل إنتاج تجربة متناسقة للمستخدم. ولهذا السبب يمتلك هذا القالب نمط iOS ، على الرغم من أنه يعمل بشكل جيد على Android أيضًا.
يحتوي التصميم متعدد الأبعاد من Google على بعض الأشياء الرائعة التي يمكنك أن تذكرها حول كيف يمكن للتفاعل والرسوم المتحركة أن تُبهج المستخدمين وليس تشتيت انتباههم. ولكن أمثلة تصميم النماذج من Google محددة جدًا أيضًا ، وتأكد من أنه عند استخدام الرسوم المتحركة والتفاعل ، فإنه يمثل الرسوم المتحركة والتفاعل المناسبين لمشروعك. تم تصميم مجموعة أدوات واجهة المستخدم هذه للسماح بمجموعة متنوعة من الطرق المختلفة ، بحيث يمكنك استخدام أي استراتيجية تتناسب مع تصميمك.
قم بتنزيل الملف أسفل المعاينة:
