مبادئ جوجل التوجيهية لتصميم الماتريال : الشكل أو النمط (Style) – الجزء الرابع

الصور

style-imagery-style_philosophy_large_mdpi

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

المبادئ

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

style-imagery-principles-delight_large_mdpi

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

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

style-imagery-principles-information_large_mdpi

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

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

style-imagery-principles-personal_20relevance_large_mdpi

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

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

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

إدراج المنطقية للتأكد من أن الصور ديناميكية (dynamic) ، سياقها ذكي وذات صلة. عرض الصور التنبؤية (Predictive) هو مستوي من الذكاء الذي يحس نبشكل كبير من تجربة المستخدم.

style-imagery-principles-appreciaton_content_large_mdpi

كن غامر (Be Immersive)

لا تخف من الحجب أو الاشارة إلي الأبطال المتكاملين (integrated heros) والصور المصغرة (thumbnails) من خلال اللون والمحتوي المغطي ( content overlays).

style-imagery-principles-immersive_20obscure_large_mdpi

أفضل الممارسات

استخدام متوسطات متعددة (Multiple Mediums)

كلا من الصور التوضيحية (Illustration) والفوتوغرافية يمكن أن تستخدم في نفس المنتج. التصوير الفوتوغرافي يوحي بوجود درجة من الدقة ويجب استخدامه لعرض كيانات وقصص محددة.  الصور التوضيحية (Illustration) فعالة لتمثيل المفاهيم والاستعارات التي يكون التصوير الفوتوغرافي (photography) فيها محدد وقد يكون منفر (alienating).

style-imagery-bestpractices-multiple-mediums-a_large_mdpi

افعل
لكيانات معينة ، انظر أولا إلي تمثيل التصوير الفوتوغرافي ( photographic representation).

style-imagery-bestpractices-multiple-mediums-b_large_mdpi

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

style-imagery-bestpractices-watch_stock-do_large_mdpi

افعل
اذا استخدمت التصوير الفوتوغرافي لإيصال الفكرة ، التطور ، الاستعارة ، القطع.

style-imagery-bestpractices-watch-stock-dont_large_mdpi

لا تفعل
 

 الابتعاد عن stock

استخدم الصور للتعبير عن صوت مميز وتجسيد التميز الإبداعي.

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

style-imagery-bestpractices-stock-dont_large_mdpi

لا تفعل

style-imagery-bestpractices-stock-do_large_mdpi

افعل

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

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

افعل                                                                  لا تفعل

style-imagery-bestpractices-point-focus-reminder-do_large_mdpi style-imagery-bestpractices-point-focus-reminder-dont_large_mdpi

افعل لاتفعل

افعل لاتفعل

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

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

افعل                                                                  لا تفعل

style-imagery-bestpractices-narrative-appointment-do_large_mdpi style-imagery-bestpractices-narrative-appointment-dont_large_mdpi

style-imagery-bestpractices-narrative-carseat-do_large_mdpi  style-imagery-bestpractices-narrative-carseat-dont_large_mdpi

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

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

افعل لا تفعل

style-imagery-bestpractices-manipulate-flowers-do_large_mdpi style-imagery-bestpractices-manipulate-flowers-dont_large_mdpi

style-imagery-bestpractices-manipulate-lake-do_large_mdpi style-imagery-bestpractices-manipulate-lake-dont_large_mdpi

تكامل واجهة المستخدم (UI Integration)

الدقة (Resolution)

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

style-imagery-integration-resolutiona_large_mdpi

افعل
الصورة حجمها مناسب

 

style-imagery-integration-resolutionb_large_mdpi

لا تفعل
الصورة متدهورة وسيئة

ادخال المقياس (Introduce Scale)

إدخال مقاييس وجداول (scales) بديلة لإنشاء مستويات أهمية بصرية .

style-imagery-integration-introduce_scalea_large_mdpi

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

style-imagery-integration-introduce_scaleb_large_mdpi

تشجيع النوافذ المتعددة (containers) للاستخدام في نفس النظام.

حماية النص

لجعل التيبوغرافي مقروء علي الصور ، اضافة scrims حماية النص .

style-imagery-integration-typetreatment1do_large_mdpi

افعل
scrims الداكنة يجب ان تكون ما بين 20% – 40% الشفافية (opacity) تبعا للمحتوي.scrims الخفيفة تتراوح ما بين 40% – 60% شفافية تبعا للمحتوي.

style-imagery-integration-typetreatment1dont_large_mdpi

لا تفعل
لا تقوم بحجب الصور بشكل كبير ب scrims حماية النص.

 

style-imagery-integration-typetreatment2do_large_mdpi

افعل
للمباني الكبيرة، استهدف مناطق محددة لحماية النص بدلا نت تغطية الصورة كاملة.

style-imagery-integration-typetreatment2dont_large_mdpi

لا تفعل
لا تقوم بعمل over-scrim علي الصور الكبيرة

style-imagery-integration-typetreatment3do_large_mdpi

افعل
التغطية الكاملة باللون (Color overlays) يختلف عن سكريم (scrims ) حماية النص ويمكن استخدامها كعنصر التصميم . عند إنشاء تغطية كاملة باللون ، عينة من اللون جنبا إلي جنب مع المحتوي لإنشاء لوحة موحدة واظهار المحتوي.

style-imagery-integration-typetreatment3dont_large_mdpi

لا تفعل

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

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

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

الصور المصغرة (Thumbnails) تشير لمزيد من المعلومات – المساح للمستخدم بنظرة سريعة للمحتوي – وتساعد التصفح. الصور المصغرة(Thumbnails) تتيح لك إضافة الصور في مساحات صغيرة.

style-imagery-integration-imagetypeavatarsa_large_mdpi

الصور الرمزية تجعل التطبيق يشعر بطابع شخصي أكثر . ويشغل مساحة أقل.

 

style-imagery-integration-imagetypeavatarsb_large_mdpi

الصورة الرمزية للعلامة التجارية توصل المعلومات في لمحة ، وكذلك الصورة المصغرة.

صور البطل (Hero Images)

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

صورة بارزة (Feature image)

style-imagery-integration-imagetypeheroa_large_mdpi

الصورة البارزة هي ، نقطة التركيز الأساسية ضمن تصميم غير متجانس.

صورة بطل متكاملة (Integrated hero image)

style-imagery-integration-imagetypeherob_large_mdpi

صور بطل المتكاملة تنشئ بيئة غير متجانسة لأجزاء المحتوي في التصميم. وهم ليسوا نقاط التركيز الأساسية.

معرض الصور (Gallery)

معرض الصور هو صور بطل (hero) بصرية متجانسة ضمن التصميم إما في شبكة (grid) أو كصورة واحدة.

style-imagery-integration-imagetypegalleryb_large_mdpi style-imagery-integration-imagetypegallerya_large_mdpi

 

مقالات ذات صلة

3 تعليقات

  1. علي الكلباني
    10 سبتمبر,2014 في 6:29 م - Reply

    شكررا لك على المقال

  2. mohadi
    10 سبتمبر,2014 في 6:55 م - Reply

    رائع جدا اخى

  3. Ahmed Abed
    10 سبتمبر,2014 في 9:06 م - Reply

    مقال مميز بارك الله فيك