كانت مواصفات التصميم متعدد الأبعاد من Google تستهدف في الأساس نظام Android الأساسي كطريقة لاقتراح اتساق التصميم على النظام الأساسي.
01 من 06كيفية إنشاء بطاقة تصميم مادية في Adobe Experience Design CC
وبمجرد أن بدأ المصممون بدسهم وفهم التفكير وراءه ، أصبح التصميم متعدد الأبعاد بهدوء أحد أكثر الفلسفات البصرية تأثيراً في تصميم الويب والجوال. كل ما تحتاج إلى فعله لمعرفة ما نصل إليه هو إجراء بحث مميَّز على موقع Pinterest وستشاهد مئات الأمثلة والتجارب على الأجهزة والأجهزة اللوحية وحتى مواقع الويب.
يتمثل الجانب الرائع في التصميم متعدد الأبعاد في تفكير Google حول كيفية ظهور التطبيقات والعمل على أجهزة الجوال ، ولكن يتم تطبيق المفاهيم على أي شاشة بأي حجم على أي نظام أساسي. وكما تذكر شركة Google في الفقرة الافتتاحية من المواصفات ، "لقد طعنا أنفسنا في إنشاء لغة مرئية لمستخدمينا تجمع بين المبادئ الكلاسيكية للتصميم الجيد وبين الابتكار وإمكانية التكنولوجيا والعلوم. هذا هو التصميم المادي. هذه المواصفات عبارة عن وثيقة حية سيتم تحديثها مع استمرارنا في تطوير المبادئ وخصائص التصميم متعدد الأبعاد ".
المادة التي تحدثت عنها ، بشكل عام جدا ، هي ورقة وعلامة مميزة لتصميم المواد هي البطاقة. فكر في بطاقة فهرسة على سطح وأنت على المسار الصحيح. والبطاقة هي عنصر يحتوي على صور ومقاطع فيديو وروابط نصية وما إلى ذلك ، ولكن حيث تختلف عن معظم التصاميم التفاعلية ، فالمقصود بها التركيز على موضوع واحد. تحتوي البطاقات على زوايا دائرية ، وتحتوي على ظلال باهتة تشير إلى أنها فوق السطح ، وإذا كانت جميعها على نفس المستوى ، يشار إليها باسم "المجموعة".
في هذا "كيف" ، سنقوم بإنشاء بطاقة تعتمد على المواصفات. بدلاً من إنشاء البطاقة بمجموعة متنوعة من أدوات التصوير والرسم ، سنأتي عليها من اتجاه مختلف. سنستخدم الأدوات في Adobe Experience Experience والتي تتوفر حاليًا في معاينة عامة لنظام Macintosh فقط وهي مجانية. يمكنك تحميله من هنا.
هيا بنا نبدأ.
02 من 06إنشاء Artotype Prototeype في Adobe Experience Design CC
لا توجد طريقة واضحة لإنشاء شاشة Android من شاشة البدء في Experience Design CC (XD). ما اعتدنا فعله عند فتح XD ، هو تحديد خيار iPhone 6 ، وعندما تفتح الواجهة ، نختار أداة Artboard أسفل شريط الأدوات واختر Android Mobile من التحديدات في لوحة Properties إلى اليمين. ثم ننتقل إلى أداة التحديد ، وننقر مرة واحدة على اسم لوحة رسم iPhone ونحذف لوحة الرسم. لا أكثر.
في الإصدار الحالي من XD ، يوجد سهم صغير بجانب جهاز iPhone 6 ، والذي عند النقر عليه ، يفتح قائمة منسدلة. من هنا ، يمكنك تحديد إصدار Android Mobile وسيتم فتح لوحة رسم Android Mobile المحددة في الواجهة.
لضمان توفر مساحة الشاشة المناسبة للبطاقة ، ننتقل عادةً إلى Sketch 3 ونقوم بنسخ شريط Status Bar و Nav Bar وشريط التطبيقات ولصقه من قالب التصميم متعدد الأبعاد في لوح الرسم. يحتوي رسم 3.2 على قالب تصميم متعدد الأبعاد (ملف> جديد من قالب> تصميم متعدد الأبعاد) وآخر مجاني جيد واحد هو من كايل ليدبيتر التي يمكنك الحصول عليها هنا. إذا لم يكن لديك Sketch ، فيمكنك نسخها ولصقها من ملصقات XD الموجودة في File> Open UI Kit> Google Material. يمكنك أيضًا تنزيلها من Google لاستخدامها في Photoshop و Illustrator و After Effects و Sketch.
03 من 06إضافة بطاقة تصميم المواد إلى Adobe XD CC Artboard
واحدة من الميزات الأكثر فائدة من XD هو تضمين مجموعات واجهة المستخدم لـ Apple iOS و Google Material و Microsoft Windows. في العديد من النواحي ، يضيفون كلمة "Rapid" إلى المصطلح "Protidypotyping السريع" ، بالإضافة إلى أنها تجعل مهمة المصمم أسهل في عناصر واجهة المستخدم الشائعة التي لا يجب إعادة إنشائها باستمرار في تطبيق التصميم مثل Photoshop أو Illustrator أو رسم.
كان عنصر واجهة المستخدم الذي نحتاجه عبارة عن بطاقة. للوصول إلى ذلك اخترنا File> Open UI Kit> Google Material وفتحت المجموعة كوثيقة جديدة. تم العثور على العنصر الذي نحتاجه في فئة البطاقات.
ما نحبه هو أنها تتقيد بمواصفات التصميم متعدد الأبعاد كما هو محدد في مواصفات كتل المحتوى بالإضافة إلى مواصفات تنسيق النص والتباعد في مواصفات الطباعة.
نمط البطاقة الذي أردناه هو النمط الموجود في أسفل اليسار. نحن ببساطة نتمشى مع الماوس لدينا ونسخها إلى الحافظة. لسوء الحظ ، لا تحتوي XD على واجهة tabbed للمستندات المفتوحة. ما نقوم به هو تحريك نافذة المستند المفتوح لأسفل قليلاً للكشف عن النافذة التي نعمل عليها ، وقم بتحديدها ولصقها. طريقة أخرى للتبديل بسرعة بين وثائق XD المفتوحة هي اضغط على Command- ".
04 من 06كيفية تحرير عنصر تصميم المواد في Adobe Experience Design CC
عندما لا تبدأ البطاقة في XD من الحافظة ببساطتها في العمل معها. أول شيء عليك القيام به هو فك التجميع للبطاقة لأنك تحتاج إلى الوصول إلى البت والقطع التي تتألف منها البطاقة. للقيام بذلك ، حدد البطاقة و حدد كائن> فك التجميع أو اضغط على Shift-Command-G.
تتكون بطاقتك الآن من ثلاث قطع:
- مربع رمادي فاتح للصورة.
- مربع رمادي متوسط للنص
- المربع الخلفي يستخدم كخلفية.
الخطوة الأولى هي حذف المربع الرمادي الفاتح. الغرض الوحيد منه هو العمل كعنصر نائب للصورة مما يجعله ، إذا اخترت ، اختياريًا.
المربع مع النص هو في الواقع رمادي داكن مع عتامة 50 ٪. يمكن استخدام هذا المربع كخلفية للنص ويمكنك تغيير اللون وتعتيم المربع.
على الرغم من أنه ليس من الواضح على الفور ، إلا أن الصندوق الرمادي الفاتح يتبع مواصفات التصميم متعدد الأبعاد حيث يتم تقريب أركانه العليا بمقدار 2 بكسل. ضع ذلك في اعتبارك إذا كنت تضيف صورة. كما ستحتاج إلى الزوايا الدائرية التي يمكن إضافتها إلى تطبيق التصوير أو في XD.
رؤية كيف أن هذا هو حالة الراحة للبطاقة فإنه يحتاج أيضا إلى الظل. تجعل المواصفات من الواضح أن هناك إرتفاع للراحة لبطاقة 2 بكسل. لإضافة هذا ، حدد شكل الخلفية السوداء وقم بتعيين قيم Y و B (Blur) على 2 في لوحة الخصائص.
05 من 06كيفية إضافة صورة لبطاقة تصميم المواد في Adobe XD CC
تبلغ معرفة البطاقة 344 بكسل ومساحة الصورة 150 بكسل ( نصف ارتفاع المربع الرمادي الفاتح ) فتحنا الصورة في Photoshop ، وقمنا بتقسيمها إلى الحجم وحفظناها باستخدام الخيار @ 2x في Photoshop تصدير باسم صندوق المحادثة. تم استيراد الصورة إلى Adobe XD.
ثم قمنا بسحب مربع اللون الرمادي الفاتح فوق الصورة على لوح اللصق وتم تحديده كائن> قناع الشكل. كانت النتيجة التقاط الصورة لأعلى الزاوية المستديرة من الشكل. ثم قمنا بنقل الصورة إلى موقعها النهائي.
مع الصورة في مكانها ، قمنا بعد ذلك بتغيير لون خلفية المربع الرمادي المتوسط ، وقمت بتغيير النص ولون نص الرابط.
06 من 06استخدام Adobe XD CC شبكة الميزة
مع اكتمال البطاقة ، يجب الآن وضعها بشكل صحيح وفقًا لمواصفات التصميم متعدد الأبعاد. وهذا يعني أن هناك 8 بكسل على جانبي البطاقة ، ويجب أن تكون البطاقة 8 بكسل أسفل شريط التطبيق. للقيام بذلك ، انقر مرة واحدة على اسم لوح الرسم ، وفي لوحة الخصائص ، حدد الشبكة. تظهر الشبكة على لوح الرسم.
حجم الشبكة الافتراضي هو 8 بكسل وهو ما يحدث بنفس حجم الشبكة للتصميم متعدد الأبعاد. إذا كنت بحاجة إلى حجم مختلف ، قم بتغيير القيمة في منطقة الشبكة. إذا كنت تريد تغيير لون الشبكة ، انقر فوق رقاقة اللون واختر لونًا من Color Picker الناتج.
مع ظهور الشبكة ، انقر فوق البطاقة وقم بنقلها إلى موضعها النهائي.
لإنهاء ، اخترنا البطاقة ، نقرت على زر تكرار الشبكة وغيرت التباعد بين البطاقات إلى 8 بكسل كذلك.
