رسومات المنتج 6 تقنيات لجعل الصور أكثر إفادة

لقد أصبح مصممو المواقع الإلكترونية محتالين للغاية في تقنيات التسويق. إن جذب محتوى الصفحة جيد دائمًا ، ولكن عندما يتعلق الأمر بجذب انتباه الزوار ، فإن الصور هي أكثر أشكال الوسائط شيوعًا. لا تتطلب صوتًا مثل مقاطع الفيديو التجريبية ويمكنها نقل المعلومات المهمة بسرعة في غضون ثوانٍ. قد يبدو الأمر سهلاً ، ولكن هناك بعض التقنيات البارزة لبناء صور إعلامية على مواقع الويب.

وتشمل هذه التسميات الميزة ، لقطات الشاشة عن قرب ، ومقارنات الأسعار ، وتفاصيل دقيقة أخرى. يمكن لمصممي الويب استخدام رسومات المعلومات لتصميم تطبيقات جديدة أو برامج أو ألعاب فيديو أو العديد من المنتجات الأخرى! على الرغم من الأكثر شيوعًا ، ترى هذه التقنيات مستخدمة في مجالات مختلفة من التكنولوجيا.

تحقق من الأفكار أدناه حيث لا نقدم نصائح فحسب ، بل أمثلة واقعية لرسومات المنتجات الجميلة المليئة بالمعلومات الرائعة.

1. توسيع على المحتوى الخاص بك

لا ينبغي استخدام الصور الإعلامية بدلاً من محتوى صفحة الويب الجيدة. في حين أن استخدم الصور للتوسع في النقاط الرئيسية و توضيح لهم بوضوح للزائرين. واحدة من أفضل الطرق للقيام بذلك هي بناء تجريبي صغير لتسليط الضوء على المناطق الهامة من البرنامج التعليمي. مع وجود عدد قليل من الرسومات ولقطات الشاشة المعلوماتية ، من الأسهل كثيرًا الحفاظ على اهتمام القراء بالتنقل خلال كل خطوة.

عندما تحاول إظهار برنامج تعليمي (مثل Photoshop تعليمي) ، قد يكون من الصعب القيام بذلك نقل الرسالة إلى نص مكتوب. سيهبط الزائرون بمقالك ويبدأون فورًا في الحكم على المواد دون وعي ضمن جزء صغير من الثانية. يحتوي Web Designer Wall على برنامج تعليمي رائع حول إنشاء صور مدورة CSS3 مصحوبة برسم مفيد. يتضمن ذلك بعض الملصقات و لقطة قريبة للتأثير.

في صفحة المقالة الأصلية ، تضيف هذه الصورة صورة أكثر وضوحًا في عقلك تجاه ما ستقوم بإنشائه. أضاف المؤلف رابطًا تجريبيًا صغيرًا ، ولكن لماذا لا يتضمن بعض الصور التجريبية أيضًا؟ أنت أكثر عرضة للفت الانتباه مع لقطة تجريبية المسمى بشكل صحيح.

حاول تجنب إضافة الصور فقط من أجل محتوى الوسائط في رسالتك. إذا كان يمكنك شرح أساليبك أو استنتاجك دون صورة ، فابدأ هنا أولاً. فقط بعد النظر إلى الوراء على نسخة الويب الخاصة بك ، يجب أن تفكر في إعادة تكرار بعض النقاط في رسم صورة مفصل. على وجه التحديد قد تجد البرنامج التعليمي يتطلب المزيد من الإشارات البصرية مع زيادة التعقيد. يمكن أن يتضمن مثالان بناء قاعدة بيانات موقع الويب أو مجموعة بيانات الجدول.

2. تسليط الضوء على الميزات البارزة

نظرًا لأن كل قطعة من البرمجيات / التكنولوجيا ستحتوي على العديد من الميزات ، فإنه يكاد يكون من المستحيل شرح كل قطعة. ليس هذا فقط ، ولكن من المحتمل جدًا أن يهتم زوّارك بقراءة أكثر من 20 علامة على رسم المعلومات الخاص بك. التزم أكثر الميزات إثارة للاهتمام و استخدام التسميات لشرح أكثر تعمقا.

عند كتابة نسخة الويب لمحتوى التصنيف الخاص بك تجنب لغة مملة متى أمكن. إذا كان الزوار ينظرون إلى أحدث إصدار من تطبيقك ، فقد لا يهتمون كثيرًا بالتغييرات في نظام الألوان. كيف سيؤثر ذلك على سير العمل اليومي؟ بدلا من ذلك ربما تسليط الضوء على ما هو مفيد لهم, مثل لوحة واجهة جديدة أو اتصال متعدد المستخدمين. يجب أن تكون هذه عموما ميزات مجردة الذي لا يمكنك رؤيته فقط “يبحث” في المنتج.

وجود مثل هذه التسمية لشرح هذه الميزات بشكل مباشر سيوفر الاستجابة الأكثر وفرة. سيشعر الزوار أنهم يعاملون كمتسوقين أذكياء وناضجين قادرين على اتخاذ قراراتهم الخاصة. إذا كانوا يحبون ميزاتك حقًا ، فهذا يعطي دفعة أكبر لشراء البرنامج أو المنتج الخاص بك.

يوجد أدناه مثال من صفحة تحديث Mozilla Firefox.

يمكنك أن ترى أن المصممين قد استخدموا خطوط متعرج منقط للإشارة إلى التسميات والميزات الجديدة. هذه هي في الواقع صور الخلفية وضع تماما داخل حاوية شعبة. من المدهش أن كل نص التسمية مكتوب أيضًا داخل علامات HTML (ليس صورة واحدة كبيرة فقط).

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

لاحظ أيضًا كيف تظهر ميزة Panorama على اليسار يقدم صغير “أعرف أكثر” حلقة الوصل. ربما هذا هو أفضل ممارسة يمكنك الدخول إليها عند بناء رسومات المعلومات! إذا كان لديك صفحات بديلة أو نقاط ربط داخل نفس الصفحة ، فيمكن للزائرين النقر فوق هذه الروابط لفهم المزيد حول الميزات المعقدة.

تذكر أنه يتم استخدام رسومات إعلامية لعرض المضايقين وميزات المنتج بسهولة للزائرين. لذلك على الرغم من محدودية المساحة الموجودة حول الرسم ، يمكنك ذلك تقدم دائمًا الفرصة لمعرفة المزيد على صفحة خارجية.

3. بسيطة ، تسميات غير مزعجة

ملصقات هي حقا الجانب الأكثر أهمية في إنشاء رسومات المنتج بالمعلومات. من المحتمل أن يحتاج الزوار إلى فهم المناطق المختلفة في المنتج أو البرنامج أو المواقع الإلكترونية أو تطبيق الجوّال ، إلخ. لسوء الحظ ، يمكن استخدام الجداول والقوائم النقطية فقط. عندما تحتاج حقًا إلى شرح ميزات المنتج ، من المهم اختيار ذلك النقاط الساخنة لوضع العلامات.

ربما تعد Apple Computers أفضل مثال على تفاصيل الملصقات المبسطة. قد تلاحظ هذه التقنيات الدقيقة على رسوماتها عند النظر إلى الأجهزة اللوحية أو أجهزة الكمبيوتر المحمولة أو iPhone السيئ السمعة. ميزاتها والمواصفات الفنية هي نفسها بشكل عام مثل غيرها من الشركات المصنعة لأجهزة الكمبيوتر ذات العلامات التجارية الكبيرة. ومع ذلك ، فإن نماذجها الرسومية هي بدائية لدرجة أن المنتجات تبيع نفسها بنفسها.

لاحظ أنه عند تعطل العملية ، يكون الأمر أبسط مما تعتقد! رسومات المنتج ليست سوى جزء قياسي من تصميم الموقع العام. حتى إذا كنت تبيع الأسمدة أو ملاءات الأسرة أو بطاقات التداول ، فمن المحتمل أن تستخدم تقنيات الوسم هذه بشكل جيد. وعلى الرغم من أن شركة أبل لديها بعض الرسومات الإعلامية المبسطة حقًا ، إلا أنها ليست الشركة الوحيدة التي تفعل ذلك. محاولة غوغلينغ حول للشركات في مكانه الخاص بك لمعرفة ما إذا كانت الرياضة تسميات أي معلومات يتوهم أو شاشات دعابة على موقعه على الانترنت.

4. الصور ذات المحتوى الديناميكي

بالنسبة إلى بعض مطوري الويب ، قد لا يكفي إنشاء رسم باسم البرنامج. قد يكون هناك الكثير من الميزات الفريدة التي تريد الانتقال إليها ولكنها تحتوي على جزء صغير من صفحة الويب الخاصة بك. من الممكن أن بناء سلسلة من الخطوات التمهيدية مما يؤدي لك الزوار خلال عرض منتج صغير.

Newsberry يوضح بأنا مثال على ذلك. في صفحتهم الرئيسية ، ستلاحظ وجود منطقة كتلة بها ملاحة صغيرة صغيرة تحتها. وهي تشمل 5 خطوات على طول العملية مع لقطات مختلفة وبعض النص الوصفي المصاحب. حتى لو لم يكن لديك أي فكرة عن ما يستخدم ل Newsberry ، ل يشرح المحتوى التمهيدي الأمور بوضوح تام. حتى يتم عرض بعض الروابط التجريبية عبر سلسلة الشرائح.

أثناء التنقل خلال محتواها ، يجب أن تلاحظ أن العديد من الشرائح تحتوي على لقطات شاشة داخل نافذة متصفح صغيرة. هذا التأثير هو في الواقع بسيط جدا لتقليد! تحتاج فقط إلى ابحث عن صورة لاستخدامها كصور خلفية لك ولقطات إعادة حجم لتناسب الداخل. منحت هذا التأثير لن يعمل مع كل منتج ، لكنه طريقة رائعة لتأطير الشاشات من تطبيق ويب.

5. مسح لقطات وصور المنتج

من الممكن تضمين جميع التسميات والميزات الخاصة بمنتجاتك ولكن لا يزال هناك نقص في المبيعات. ال تعد لقطات الشاشة والصور التي تختارها للرسوم البيانية بنفس أهمية جميع التفاصيل الدقيقة. على نظامي التشغيل Windows و Mac OS X ، توجد طرق لالتقاط لقطات شاشة لسطح المكتب بالكامل باستخدام اختصارات لوحة المفاتيح. باستخدام هذه الطريقة جنبًا إلى جنب مع بعض الوقت في Photoshop ، يمكنك تجميع العروض التوضيحية للميزات المهمة جدًا.

إذا كان منتجك معقدًا جدًا ، فيجب أن تحاول ذلك وضعت معا بعض الصور المختلفة. يستخدم المثال أعلاه من موقع Tweetbot الدوائر الزرقاء للإشارة إلى إجراء التنصت على التطبيق. بدلاً من لقطة شاشة واحدة مع العديد من التسميات ، يمكنك استخدام معرض صور jQuery صغير لدمج 3-5 رسومات مختلفة. هذا يمنحك المزيد من الفرص ل التركيز على وجهات نظر مختلفة للمنتج بينما تقدم للزوار تجربة أكثر ثراء.

عند التقاط لقطة من جهاز الكمبيوتر أو الهاتف الذكي ، يتم حفظ الصورة دائمًا بنسبة تكبير 100٪. يتمتع محررو الصور مثل Photoshop بالقدرة على تغيير حجمهم ، لكنهم يفقدون التفاصيل غالبًا. إذن كيف يمكنك وضع مثل هذا الرسم في موقعك الصغير؟ واحدة من أفضل التقنيات تكبير حيث يمكنك تصغير التطبيق وإنشاء أقسام مكبرة من أهم القطع. يتم مشاهدة هذه التقنية في البرامج أكثر شيوعًا من المنتجات المادية - لقد قمت بالتفصيل بعملية التصميم أدناه.

6. بناء تأثير "تكبير العدسة"

سأقوم ببناء الخطوات اللازمة لبناء تأثير العدسة المكبرة في Adobe Photoshop. إذا كنت تستخدم محرر رسومات آخر ، فمن المحتمل أن تقوم بنفس المهام ، لكن القوائم والأوامر ستختلف.

أحد أفضل الأمثلة على هذه التقنية هو الصفحة الرئيسية لتطبيق Things for Mac. يحتوي الرسم على تطبيق صغير الحجم بحيث يتلاءم تمامًا مع الصفحة بالإضافة إلى ظل صغير. لكن على بعض المناطق المهمة ، ستلاحظ وجود دائرة بها محتوى داخلي أكبر بكثير. لقد أضفوا حتى توهجًا داخليًا أبيض لتظهر كإضاءة منكسرة تتألق عبر العدسة!

المكافأة: "عدسة تكبير" تأثير فوتوشوب تعليمي

لبدء الاستيلاء على لقطة شاشة ترغب في استخدامها للرسم. لقد التقطت شاشة سريعة للصفحة الرئيسية لهونجكيات. سأقوم بقص نافذة المتصفح فقط وتغيير حجمها إلى حوالي 700 بكسل. يجب عليك تغيير حجم العرض ليناسب مساحة المحتوى في موقع الويب الخاص بك. اصنع الآن طبقة جديدة أعلى هذه الخلفية وقم بعمل تحديد دائري مع الاستمرار في التحول لإبقائها متناسبة. املأ أي لون تريده.

الخطوة 1

مع إبقاء الدائرة محددة ، قم بتغيير٪ fill في لوحة الطبقات إلى 0٪. تحت طبقة FX أضف ضربة سوداء 1px-2px وتوهج داخلي أبيض. يمكنك تقليل التعتيم على إضاءة بيضاء أقل.

الخطوة 2

لا تزال تبقي الدائرة المحددة تتحرك على طبقة الخلفية الخاصة بك واضغط على ctrl (بالنسبة لمستخدم Mac ، إنه مفتاح أمر أو أمر cmd.) + ج لنسخ. ثم اصنع طبقة جديدة أعلى الخلفية ولكن أسفل دائرة التكبير والصقها. يمكنك بدلاً من ذلك مجرد الضغط على ctrl + j لتكرار طبقة جديدة مع التحديد فقط.

اضغط على ctrl + t لفتح أداة التحويل. الآن توسيع نطاق طبقة مكررة جديدة أثناء الضغط تحول للحفاظ على كل شيء متناسب و بديل للحفاظ على مركز ثابت.

الخطوه 3

اضغط على ctrl وانقر على أيقونة طبقة العدسة المكبرة لإجراء اختيارك مرة أخرى. تجدر الإشارة إلى أنه لا يزال يتعين عليك إبراز طبقة الخلفية المكررة في لوحة الطبقات (الطبقة الموجودة أسفل العدسة المكبرة مباشرةً) مما يعني أنه سيكون لها خلفية زرقاء فاتحة.

اضغط على Ctrl + Shift + i لعكس التحديد الحالي. الآن اضغط على حذف لمسح القمامة الزائدة من لقطة الشاشة التي أعيد تحجيمها. للحصول على القليل من التأثير الإضافي ، اسحب قائمة طبقة FX لإضافة ظل إسقاط صغير. يمكنك أيضًا رسم خط رأسي رفيع بمقدار 1 بكسل واستخدام فلتر التسييل (تصفية> تسييل) إنشاء مقبض صغير!

استنتاج

من أجل تصميم رسومات رائعة للمنتج ، يجب أن تتذكر الأساسيات. يريد الزوار ببساطة فهم ما تحاول بيعه! أسهل طريقة للحصول على هذه المعلومات هي من خلال سلسلة من لقطات أو رسم تفصيلي واحد. العلامات هي مجرد القطعة الثانية في هذا اللغز ، حيث يمكنك تحديد أهم مجموعات الميزات.

عندما تجمع كل هذه التقنيات معًا ، من المحتمل أن تبدأ في ملاحظة الصورة الأكبر. سوف ترتفع التنزيلات وعمليات الشراء - خاصةً إذا وضعت الرسومات في المقدمة وفي المنتصف على صفحتك الرئيسية. هذه التقنيات مثالية لمصممي الجرافيك والويب للبدء في مجال تصميم المنتج. لقد قمنا بتفصيل بعض الأفكار المجردة ، لكننا نود أن نسمع أفكارك في منطقة المناقشة أدناه!