الصور في تصميم الماتريال، الصور – سواء كانت توضيحية (illustration) أو فوتوغرافية (photography) ـــ تكون مبنية ولكن لا تفتعل (contrived).النسبية (Materiality) ، البنية (texture) ، العمق (depth) ، والاستخدام الغير متوفع للون ، إدراك السياق يكونوا مؤكدين (emphasized). مبادئ الصور تدعم تحقيق الهدف، التفكير العميق ، واجهات مستخدم جميلة. [divider] [/divider]

المبادئ

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

الأهمية والصلة الشخصية (Personal Relevance)

استخدام الصور المثير للعواطف التي تنشئ اتصال عاطفي مع التطبيق.

المعلومات (Information)

توصيل معلومات محددة. يسهل الاستيعاب لإنشاء تجربة تشعر بالذكاء.

الفرحة والسرور (Delight)

اسعد المستخدم بصور غير متوقعة وتكون ذات صلة لجعل التجربة تشعر وكانها سحرية (magical). [divider] [/divider]

ادراك السياق (Appreciation of context)

إدراج المنطقية للتأكد من أن الصور ديناميكية (dynamic) ، سياقها ذكي وذات صلة. عرض الصور التنبؤية (Predictive) هو مستوي من الذكاء الذي يحس نبشكل كبير من تجربة المستخدم. كن غامر (Be Immersive) لا تخف من الحجب أو الاشارة إلي الأبطال المتكاملين (integrated heros) والصور المصغرة (thumbnails) من خلال اللون والمحتوي المغطي ( content overlays). [divider] [/divider] أفضل الممارسات استخدام متوسطات متعددة (Multiple Mediums) كلا من الصور التوضيحية (Illustration) والفوتوغرافية يمكن أن تستخدم في نفس المنتج. التصوير الفوتوغرافي يوحي بوجود درجة من الدقة ويجب استخدامه لعرض كيانات وقصص محددة.  الصور التوضيحية (Illustration) فعالة لتمثيل المفاهيم والاستعارات التي يكون التصوير الفوتوغرافي (photography) فيها محدد وقد يكون منفر (alienating). [divider]  [/divider]

 الابتعاد عن stock

استخدم الصور للتعبير عن صوت مميز وتجسيد التميز الإبداعي. للهئات الخاصة أو محتوي العلامات التجارية ، استخدم الصور الخاصة المحددة، للمزيد من المحتوي الملخص. الصور الفوتوغرافية (Photographic stock) والمرسومة ليست محددة أو تعبيرية. [divider] [/divider]

اشمل نقطة تركيز (Have a point of focus)

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

افعل                                                                  لا تفعل

[divider] [/divider]

إنشاء الروايات والقصص

إنشاء قصة غامرة واحساس بالسياق.

افعل                                                                  لا تفعل

    [divider] [/divider]

لا تقم بالافراط في التلاعب والمعالجة (Over-Manipulate)

المحافظة علي سلامة الصورة الأصلية. لا تطبق فلترات أو تمويه ضبابي (gaussian blurs) علي الصور ، خاصة عند محاولة اخفاء الأخطاء.

افعل لا تفعل

  [divider] [/divider] تكامل واجهة المستخدم (UI Integration) الدقة (Resolution) تأكد من أن حجم صورك يناسب المكان الذي ستوضع فيها. والفريم وورك يشجع استخدام الصور الكبيرة. اختبر احجام الدقة المناسبة علي الأجهزة المختلفة والنسب.   [divider] [/divider] ادخال المقياس (Introduce Scale) إدخال مقاييس وجداول (scales) بديلة لإنشاء مستويات أهمية بصرية . [caption id="attachment_5678" align="alignnone" width="360"] في اطار المعرض ، إدخال الصور المصغرة بمختلف الأحجام لنقل التسلسل الهرمي للمحتوي.[/caption] [caption id="attachment_5679" align="alignnone" width="360"] تشجيع النوافذ المتعددة (containers) للاستخدام في نفس النظام.[/caption] [divider] [/divider] حماية النص لجعل التيبوغرافي مقروء علي الصور ، اضافة scrims حماية النص .   [divider] [/divider]

الصور الرمزية والصور المصغرة (Avatars and Thumbnails)

الصور الرمزية والصور المصغرة تمثل الكيان أو المحتوي، إما فعليا من خلال التصوير الفوتوغرافي أو من الناحية النظرية من خلال التوضيح (illustration). بشكل عام، هم أهدف للاستفادة التي تقود لؤية أساسية شاملة للكيان أو المحتوي. الصور الرمزية يمكن استخدامها لتمثيل أشخاص. للصور الشخصية،وتقديم خيارات التخصيص. كما يمكن للمستخدمين اختيار عدم اضافة الصورة الشخصية، وفر صورة افتراضية جيدة. عند استخدامها مع شعار معين ، الصور الرمزية يمكن أن تستخدم أيضا لتمثيل علامة تجارية. الصور المصغرة (Thumbnails) تشير لمزيد من المعلومات – المساح للمستخدم بنظرة سريعة للمحتوي – وتساعد التصفح. الصور المصغرة(Thumbnails) تتيح لك إضافة الصور في مساحات صغيرة. [caption id="attachment_5692" align="alignnone" width="360"] الصور الرمزية تجعل التطبيق يشعر بطابع شخصي أكثر . ويشغل مساحة أقل.[/caption]   [caption id="attachment_5691" align="alignnone" width="360"] الصورة الرمزية للعلامة التجارية توصل المعلومات في لمحة ، وكذلك الصورة المصغرة.[/caption] [divider] [/divider] صور البطل (Hero Images) صور البطل هي الصور التي تكون عادة مرتكزة في مكان بارز، في الجزء المرئي(above the fold)، مثل بانر في أعلي الشاشة. فهي تعمل علي جذب المستخدم، وتوفر السياق حول المحتوي، أو تعزز العلامة التجارية. صورة بارزة (Feature image) [caption id="attachment_5695" align="alignnone" width="360"] الصورة البارزة هي ، نقطة التركيز الأساسية ضمن تصميم غير متجانس.[/caption] صورة بطل متكاملة (Integrated hero image) صور بطل المتكاملة تنشئ بيئة غير متجانسة لأجزاء المحتوي في التصميم. وهم ليسوا نقاط التركيز الأساسية. [divider] [/divider] معرض الصور (Gallery) معرض الصور هو صور بطل (hero) بصرية متجانسة ضمن التصميم إما في شبكة (grid) أو كصورة واحدة.  ]]>