كانت مواصفات التصميم متعدد الأبعاد من 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 على قالب تصميم متعدد الأبعاد ( File> New From Template> Material Design ) وآخر مجاني جيد من Kyle Ledbetter والذي يمكنك الحصول عليه هنا. إذا لم يكن لديك Sketch ، فيمكنك نسخها ولصقها من ملصقات XD الموجودة في الملف> 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 من الحافظة ، لا تبدأ العمل بمرح. أول شيء يجب عليك القيام به هو فك تجميع البطاقة لأنك تحتاج إلى الوصول إلى البت والقطع التي تتألف منها البطاقة. للقيام بذلك ، حدد البطاقة وحدد Object> Ungroup أو اضغط 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 بكسل كذلك.