() translation by (you can also view the original English article)
تلتقط الصور الفوتوغرافية انتباهنا وتثير استجابة فورية تقريبًا عندما نواجهها. ولذلك هم جزء هام من أي موقع نقوم بإنشاء. تلعب الصور دورًا مهمًا في تحديد انطباعنا الأول ، ولكن يمكن أن تخبرنا أيضًا عن موضوع الموقع ويمكن أن تكون عاملاً هائلاً في كسب الثقة.
عندما تستخدم بشكل صحيح، صور فعالة جداً ويمكن بسرعة إرسال الرسالة المقصودة إلى جمهورك. ومع ذلك ، فإن استخدام الصور الخاطئة يمكن أن يؤدي إلى تدهور تجربة المستخدمين لديك. كيف نختار المناسب منها؟
استخدام الصور في تصميم مواقع الإنترنت
بقدر ما نهتم بجميع جوانب موقع الويب الذي ننشئه: المحتوى ، والألوان ، والطباعة ، والتسلسل الهرمي ، وهندسة المعلومات ، وغيرها من التفاصيل ، فإن الصور تستحق اهتمامًا كبيرًا من حيث سهولة الاستخدام وتجربة المستخدمين بشكل عام على موقعك.
وينبغي التعامل مع الصور على مواقع الإنترنت شيء مصممي فهم وتطبيق فعال، ولذا فهذه المقالة سوف نقطة لكم في الاتجاه الصحيح وتظهر لك كيفية التفكير في الصور عند اتخاذ قرار لاستخدام واحد في مشروع الويب الخاص بك بعد.
تتطلب الاهتمام باستخدام صور كبيرة
الناس تفحص الشاشات استناداً إلى الخبرة الماضية والتوقعات. أعلى اليسار هو نقطة الانطلاق الأكثر شيوعًا لعين المستخدمين ، على الرغم من أن ذلك يعتمد على أنماط قراءة ثقافتهم. إذا كنت تستخدم صور كبيرة في الصفحة سيتم فورا جذب انتباههم وسحبها بعيداً عن ميلها المعتادة.
التعامل مع صورة كمحتوى
أنا متأكد من أن كنت لن يجادل معي أن صورة على صفحة ويب المحتوى، ولكن هل أنت حقاً التعامل معها على هذا النحو؟ هل تستخدمها فقط كإضافة أو حشو محتوى جيد؟ هل فكرت في جميع جوانب ذلك الجزء من المحتوى بالتحديد؟ قد يمكنك تقييم الصورة بشكل صحيح قبل الذي اخترته لاستخدامه؟ هل فكرت في نماذج المستخدمين العقلية وتأثير الصورة عليها؟ توفر معلومات ذات مغزى الصورة أو تقديم مساعدة للمهمة الحالية للمستخدم؟ هذه ليست سوى بعض الأسئلة التي تحتاج إلى الإجابة عليها قبل استخدام صورة على صفحة ويب.
ينبغي ابدأ استخدام الصور فقط "جاز" على صفحة ويب.
لقد رأيت العديد من المصممين يضعون صورة جميلة بملء الشاشة على صفحة ويب ، ويرمون بعض الشعار أو "دعوة إلى العمل" ويعلنون أنه تم القيام به. في كثير من الحالات لم يتم تقييم الصورة ، كان المصمم يتبع فقط اتجاه مستمر. دعونا نرى كيفية تقييم صور قبل استخدامه في موقع الويب الخاص بك.
اختيار صورة مثالية
هناك بعض الأشياء التي يجب وضعها في الاعتبار عند اتخاذ قرار لاختيار صورة في تصميمك. سوف نفترض أن كنت تعرف كيفية تقييم الجوانب الأساسية للصورة، تلك يجري: النوعية والحجم، وتكوينها والتعرض. الجودة من حيث الدقة المطلوبة وحجم الصورة ويفضل اتجاهها للاستخدام المقصود والتكوين الفعال واقتصاص الصورة للفت الانتباه ، والمواد المعروضة بشكل صحيح على الصورة.
مرة كنت قد فعلت ذلك والصورة اجتاز الاختبار الأساسي يمكنك الاستمرار في استكشاف الخيارات للاستخدام المقصود الخاص بك.
عمليات الدماغ الصور 60,000 مرات أسرع من قراءة النص. --مايك باركنسون
هل هو مفيد؟
قبل كل شيء يجب أن يكون صورة مفيدة. لا يوجد شيء خطأ في استخدام صورة كعنصر نائب سطع صفحة أو ملء بعض الفضاء، ولكن حتى ذلك الحين النظر في السياق الذي كنت تستخدم تلك الصورة. صور محتوى مفيدة ومفيدة ومثيرة للتفكير هي تلك التي تحتاج إلى اهتمام خاص. صور مفيدة وينبغي
- تساعدنا على فهم أفضل لشيء،
- تعلمنا كيفية استخدام شيء ما، أو
- وتبين لنا كيفية القيام بشيء.
مربعا والموقع هو مثال جميل لصور مفيدة في تصميم مواقع الإنترنت.
يمكنك أن تقول على الفور أن هذه الصورة قد تم تصويرها بطريقة احترافية (انظر إلى أظافر اليدين والأصابع). والأهم أنه يتصل مباشرة ما المنتج، وكيف أنه من السهل استخدام. صور مفيدة جداً، والتربوية والتعليمية.
قلم رصاص والموقع هو مثال آخر لصور مفيدة. على نحو مماثل للمثال السابق ، تظهر هذه الصورة بالضبط ما يدور حول المنتج (القلم) ، ومكان وكيفية استخدامه (تطبيق iPad).
كما يجعل الموقع وودستير جيدا على استخدام الصور لشرح المنتج. من الواضح أن منتجهم يستخدم لرفع جهاز Mac الخاص بك ولكنه يوفر أيضًا اتصالات USB مفيدة في متناول اليد. تخيل هذا المنتج معزولة دون سياق (ايماك). هل تعتقد الصورة ستكون مفيدة بقدر هذا واحد؟
جروفيمادي يقوم بعمل عظيم لتقديم مجموعة من منتجاتها على صورة خلفية ملء الشاشة واحدة. من الواضح تمامًا أنها تصنع ملحقات مكتبية خشبية متطورة. ليس فقط هذه الصورة مفيدة ، بل هي أيضا فعالة جدا وعاطفية في نفس الوقت. سوف نأتي بصور فعالة والعاطفي في لحظة.
إذا نظرت إلى الأمثلة المذكورة أعلاه ، فسوف تلاحظ أن جميع الصور واضحة وجليّة ، وأن تشرح الرسالة المقصودة بشكل جيد. لم يكن لديك للبحث وقتاً طويلاً لمعرفة ما المنتج/الخدمة/الموقع حول. هذه خصائص كل من صور مفيدة في تصميم مواقع الإنترنت.
هل هو فعال؟
الصورة الفعالة هي الصورة التي تحث على اتخاذ إجراء ، وتؤثر على سلوكنا وتوضح الرسالة المقصودة بوضوح. على وجه الخصوص، صور المنتج الجيد والفعال وينبغي تشجيع المستخدمين على شراء تلك المنتجات. لقد رأينا من الأمثلة السابقة أن الصور الصالحة للاستخدام هي بالفعل فعالة لأنها تجعل المنتج مرغوبًا ، مما يشجعنا على شرائها. كلما نرى صور الذي يقوم بتشغيل إجراء تغيير في سلوكنا نحن يمكن أن تصف أنها فعالة.
إذا نظرتم إلى موقع التنقل وتلك سماعات الأحمر العصير لك الحصول على جذب فورا ويحتمل أن ترغب في شرائها!
أبل المعروف للكمالية في كل ما يقومون به. الصفحة المقصودة فون مليء بصور المنتج الرائع والمرغوب فيه التي تجعلك ترغب في امتلاك واحد من منتجاتها.
والموقع تسبتر هو مثال آخر صورة فعالة. لاحظ كيف يبدو الرجل على الصورة لأسفل مثل وجود شيء أدناه لاستكشافه؟ وفي الواقع هناك شيء أدناه.
موقع مابكويست ليس فقط ينقل المشاعر مع الصور، ولكن أيضا يستخدم اتجاه نظرات ذكية لدليل عيون المستخدمين للمحتوى الهام في الصفحة، في هذه الحالة وصلة التحميل متنقلة على اليسار.
إلا قليلاً يستخدم الناس متعة وتسلية الصور على الصفحة الرئيسية. يمكنك أن تقول على الفور أن هناك شيئًا غريبًا حول هذا الأمر. نتيجة لذلك، وحسن هو منزعج استخدام الألوان والأضواء والتعرض واهتمامك في بعض الطرق لمعرفة ما حول هذا الموقع.
الموقع ضخم يتميز بصورة كبيرة على الصفحة الرئيسية لعرض ما يفعلونه (أنها ناحية الطلاء إعلان كبير والجداريات) وكيفية القيام بذلك (تحقق من الرجل الذي على اليمين). الشيء المثير للاهتمام حول هذه الصورة هو الناس يمرون على اليسار. أنها تبدو متحمس حول ما يشهدونه والذي ينطوي عليك كمراقب ويجعل الصورة ورسالة كاملة مثيرة وفعالة.
هل هو اموتيفي؟
صورة انفعالية ينبغي أن يسفر عن رد فعل عاطفي من المشاهد. سواء كان ذلك مجرد إرضاء للنظر ، أو التهدئة ، أو مزعجة بطريقة تجبرنا على اتخاذ بعض الإجراءات ، أو مضحكة ومسلية ، أو جذابة ومرغوبة ، طالما أن الصورة تستجيب لمشاعرنا بطريقة ما سيكون لها أكبر تأثير من واحد لا.
ويتميز فروجديسيجن دراسة حالة على موقعة على الإنترنت حول إدارة الإغاثة في إدارة الطوارئ والكوارث. الصورة الرئيسية، جنبا إلى جنب مع الشعار جيدة، فعالة جداً والانفعالية. يروي قصة ويظهر خطر ونظرا نحن نرى المرفقة به.
الصورة الرئيسية للموقع التنفس مهدئ جداً. جنبا إلى جنب مع شعار جيد والاتجاه الصحيح نحو النظر ، تنقل المرأة على الصورة سهولة تنفسها للمشاهد. لاحظ تسمية الزر "استنشق"؟
صور الموقع شون بساتين الرئيسي يروي قصة كبيرة حول له. فإنه ينقل السعادة، والثقة والأمل، والصداقة واستباقا للمشاهد الذي يحصل المرتبطة به، ويشعر بالتعاطف تجاه عمله.
بجانب فائدة وفعالية من اختيار صور "الأطعمة التتابع"، أنها أيضا ترجمة العواطف عن الخدمة التي تقدمها. تظهر النساء على اليسار واليمين فرحتهن في العمل من أجلهن ، ولأن Relay Foods هي كل شيء عن المنتجات الطبيعية ، فإن تعبيرات الوجه النسائية على هذه الصور تتماشى مع رسالة العلامة التجارية / الخدمة.
سلطة وجوه
وهناك سبعة (أو ثمانية) من المشاعر الأساسية:
- فرح
- حزن
- انتهاك حرمة المحكمة
- خوف
- الاشمئزاز
- مفاجأة
- غضب
فهي عالمية ويتم توصيلها (عادة) عن طريق تعبيرات الوجه والإيماءات الجسدية. إذا كنت تستخدم صورًا لأشخاص لتوصيل رسالتك المقصودة ، فاحرص على مشاهدة هذه المشاعر السبعة الأساسية وتقرر أيها تقود الجمهور المستهدف.
إغلاق حتى صور الناس فورا انتزاع اهتمامنا وتساعد على تحريك عواطفنا، مما جعلها عنصر تصميم قوية.
عندما نرى وجه، نحن يتم تلقائياً تشغيل لتشعر بشيء أو أن يتعاطف مع هذا الشخص
لقد رأينا بالفعل صورًا لأشخاص في الأمثلة السابقة ولكن دعنا نستكشفها قليلاً.
على الرغم من أن الصورة "بناء النار" امرأة لا تقول لنا أي شيء حول المنتج الخاص بهم، يضيف شخصية للمنتج الخاص بهم وهو وسيلة مفيدة وفعالة للاستيلاء على اهتمام المستخدمين. لا يتحقق نفس التأثير إذا كان هناك فقط صور أي فون بدلاً من المرأة.
إذا أردت استخدام صورة صورة كبيرة على الموقع الشخصي الخاص بك من أي وقت مضى أحييكم، لقد كنت هناك. ولكن كن حذراً! يمكن أن يؤدي تعبير الوجه الصغير إلى إحداث فرق كبير في الرسالة التي تتواصل معها. دانيال اكلير يقوم بعمل جيد حقاً في تقديم نفسه للجمهور. يتصل له تعبير الوجه الثقة والهدوء والثقة.
يمكن أن يقول الناس عندما ابتسامة حقيقية أو وهمية
ويعلم الجميع ما حدث في مركز التجارة العالمي. موقع مركز ذكرى 9/11 مكرس لقصص أولئك الذين كانوا هناك. يتطلع الشخص الموجود على الصورة إلينا مباشرة ، مما يساعدنا على الارتباط بموضوع الموقع الذي يدعونا إلى الانضمام إلى المجتمع.
ملاحظة: يتم ذلك دون أن تكون المواجهة؛ فرق طفيف!
مثال عظيم آخر للجمع أكثر من الرسالة مع قرب صور الوجه الإنساني هو موقع الحفظ. رجل كايابو على الصورة يربط السلطة والشجاعة والتقدير.
كما ذكرت سوزان Weinschenk، قرب صور، الأكثر إقناعاً على موقع جمعية خيرية، وهذا صحيح. احفظ يتميز الأطفال بقرب صور لطفل في حاجة التي تماما بمحاذاة مع الشعار والموضوع من الموقع. لاحظ اتجاه التحديق نحو زر التبرع؟
كيف * إلا * لاستخدام الصور في تصميم مواقع الإنترنت
على الرغم من أننا رأينا العديد من الأمثلة الرائعة لكيفية استخدام الصور في تصميم الويب الخاص بنا ، يمكن إساءة استخدامها بسهولة. ومن ثم أنا ذاهب لتظهر لك بعض الأمثلة لكيفية استخدام الصور لا وما يجب تفاديه.
الصورة لا علاقة لها--استوديو تصميم ويب تقدم خدمات "مصممة من صنع" يستخدم صورة خلفية لا علاقة لها (خيوط ملونة) الذي يقوم بإنشاء خطأ الانطباع الأول يرسل رسائل خاطئة إلى الزائر. هناك معنى هنا ، لكنه استعارة غامضة.
الحل الأفضل هنا هو استخدام لون خالص أو صورة جماعية لفريق. إلى جانب ذلك، لا يمكن أن يكون متلائما مع المنتجات الرقمية.
تستخدم البرامج كخدمة تقدم أدوات التعاون للفرق صورة لامرأة مشغولة في العمل. وهذا قد خلق انطباع بأن قالت أنها تشعر بالقلق إزاء البرنامج نفسه هو تعزيز الموقع. أفضل حل هنا هو إظهار إما لقطات شاشة المنتج الحقيقية أو إظهار امرأة سعيدة باستخدام منتجها.
خلفية الصورة غير واضحة--تستخدم فقط كنائب الزخرفية، لا يتصل أي شيء عن الموقع وبالتالي وجود أي تأثير حقيقي. أنصحك بتجنب خلفيات الصور غير الواضحة قدر الإمكان ، ويمكنك أن تفعل أفضل من ذلك ؛)
آخر صور بصلة إلى موضوع الموقع. على الرغم من أن الكلمات "اليدوية" و "ورشة العمل" يمكن أن تكون مرتبطة بالصورة نفسها ، إلا أنها لا تنقل الموضوع الحقيقي للموقع. بات العلامة التجارية كل شيء عن إيجاد استراتيجيات العلامة التجارية ومع السلسلة من الصور المتصلة تجهيز الأخشاب أنهم في عداد المفقودين فرصة كبيرة لتوصيل هذه الرسالة.
اختيار صور خاطئة--ما كان الانطباع الأول الخاص بك عندما رأيت هذه الصورة؟ وسيساعد شخصين السعادة الدائمة في مقهى عملك تنجح على الإنترنت. أليس كذلك؟ لا ، تقدم وكالة تصميم مواقع الويب التي تقدم خدمات كاملة هذه المساعدة ، ويجب أن تعرض الصورة أحد العملاء السعداء والناجحين. قد يكون هذا أيضا ربما ألبوم صور التي يجب تجنبها.
صور--تقريبا ابدأ التواصل الرسالة الصحيحة. لماذا هناك صبي صغير يرتدي نظارات ويحمل إبهامًا؟ مطور توفير PHP ترميز الخدمات؟ لا أرى ذلك.
فشل الموقع على مستوى البلاد لإيصال الرسالة بهذه الصورة. أولاً، الصورة لا علاقة لها بالموضوع، وامرأة يبدو أن قضم أظافرها (ونحن نعرف أن هذا اضطرابات نفسية)، وعدم وضوح الشاشة على الكمبيوتر اللوحي لها. تُظهر هذه الصورة القلق والعصبية والإجهاد ، ولا أعتقد حقاً أن نيشن وايد تريد إيصال ذلك لزوارها.
خاطرة النهائي
تركز هذه المقالة على استخدام صور كبيرة على موقعك على الويب ، ولكن هناك العديد من الطرق الأخرى لاستخدامها بشكل صحيح لإشراك جمهورك. أن نبدأ في التفكير حول الصور في بداية عملية التصميم الخاص بك. إذا كنت قد فعلت المشروع المناسب للبحث سيكون لديك بالفعل الكثير من الأفكار.
استثمر في التقاط الصور الجيدة: يمكن للمصور الكبير أن يضيف ثروة إلى قيمة أعمالك على الويب.
كل ما كنت تقوم بتصميم، جمهورك تتألف من الناس الذين سوف تستفيد من التصميم الخاص بك. إن فهم السلوك البشري هو في الحقيقة الطريقة الوحيدة لتصميم فعال ، وهذا ينطبق على اختيار أفضل الصور لتصميم موقعك الإلكتروني التالي.
لمزيد من القراءة
