البحث في الموقع

اعتاد المصمّمون على عرض البيانات بطرق مختلفة، إذ يمكن عرضها على شكل تصميم، أو واجهة معيّنة، أو ربّما على شكل جداول، كلّ ذلك تيسيرًا لفهم هذه البيانات. وقد كانت جداول الأسعار ولا زالت مستخدمة من قبل العديد من الشّركات والأفراد على حدٍّ سواء لعرض خطط التّسعير المتوفرة لديهم. إن كنت تملك خططاً متعدّدة للتسعير فعرضها على هيئة جدول للتّسعير سيكون أمرًا مفيدًا وجذّابًا في نفس الوقت. سنستخدم برنامج Adobe Photoshop لتصميم جدول للتّسعير وسيستغرق العمل حوالي 20 إلى 30 دقيقة. جدول التسعير الخطوة 1أنشئ ملفًّا جديدًا بالأبعاد 1200px في 600px. ستكون أبعاد جدول التّسعير 1000px في 340px ولكنّنا سنحتاج إلى بعض المساحة الّتي ستحيط بالجدول، لذا ستكون أبعاد الملفّ أكبر قليلًا من أبعاد الجدول. الخطوة 2بواسطة أداة المستطيل ذو الأطراف المدوّرة (Rounded Rectangle Tool (U، ارسم مستطيلًا بالأبعاد التّالية: 1000px في 340px، ثمّ أضف إليه بريقًا خارجيًا خفيفًا Outer Glow بواسطة أنماط الطبقات Layer Styles بالإضافة إلى حدّ خارجيّ Stroke بسماكة 1px، كذلك أعط الحدّ الخارجيّ لونًا أغمق بقليل من لون المستطيل. الخطوة 3سنقسّم جدول التّسعير إلى ثلاثة أقسام. التّرويسة، المحتوى ومساحة لزرّ الإجراء. سيحتوي قسم التّرويسة على اسم الخطّة فقط. باستخدام أداة المستطيل (Rectangle Tool (U، ارسم شكلاً بعرض 1000px وارتفاع 70px. لوّن المستطيل باللّون (#e0e3e3) وأضف إليه ظلًّا للحصول على نفس التّأثير الذي ينتج من تطبيق (البريق الخارجيّ Outer Glow) باستثناء إمكانية تحديد اتّجاه الظّلّ (بتغيير مقدار الزّاوية). الخطوة 4سيحتوي جدول التّسعير على 4 خطط يمكن التّسجيل في الموقع من خلالها، ومن الشّائع أن تقوم بتمييز إحدى الخطط وتسميتها بـ (الخطة الأفضل) أو ما شابه ذلك. استخدم أداة المستطيل ذي الحوافّ المدوّرة (U) وارسم شكلاً بالأبعاد 250px في 290px، ثم طبّق نفس التأثيرات الّتي طبّقتها على الطّبقة الأساسيّة. الخطوة 5كرّر الخطوة 3، باستثناء تلوين التّرويسة بلون رماديّ غامق (#d1d1d1). الخطوة 6سنستخدم نوعين من الخطوط في جدول التّسعير، (Open Sans) و (Helvetica)، استخدم الوزن متوسّط السّماكة لخط (Open Sans) في اسم الخطّة في قسم التّرويسة. الخطوة 7استخدم الخط (Helvetica) في قائمة الأسعار لكلّ خطّة، وبما أنّنا نرغب في تمييز (الخطة المتقدّمة)، سنعطي وسم السّعر لونًا أحمر برّاقًا. الخطوة 8ننتقل الآن إلى قسم (المحتوى)، والّذي سيحتوي على ثلاث مزايا ستقدّمها لزبائنك، وسيكون ذا بنية جميلة وبسيطة. سنستخدم خطّ (Open Sans)، سيكون خطّ الأرقام بحجم 24pt سميك، أما خطّ النّصوص سيكون بحجم 14pt عاديّ. ستكون المزايا مفصولة عن بعضها البعض بخطوط منقّطة، ويمكن استبدالها بكلّ سهولة بخطّ بسيط. الخطوة 9يجب أن تحتوي كل خطّة على زرّ يمكن للزّبون ومن خلال الضّغط عليه أن يتّخذ إجراءً تجاه الخطّة، سواء كان هذا الإجراء هو الحصول على معلومات أوسع عن هذه الخطّة، الاستئناف أو الدفع. باستخدام أداة المستطيل ذي الحوافّ المدوّرة (U)، ارسم مستطيلاً رماديّ اللّون، وأضف إليه تأثير الظلّ بلون رماديّ غامق. الخطوة 10طبّق تأثير التدرّج اللوني Gradient Overlay واختر نمط المزج Soft Light، والشّفافية بمقدار 40%. الخطوة 11أضف إلى الزرّ حدًّا خارجيًّا من النّوع المتدرّج Gradient. الخطوة 12مستخدمًا الخطّ (Open Sans Bold) وبحجم 24pt، أضف بعض الكلمات إلى الزرّ، سنضيف عبارة (Choose Plan). ضاعف قسمي (المحتوى) و(وزرّ الإجراء) مرّتين، وضعهما في المكان المخصّص لكلّ منهما. يمكنك الرجوع إلى الشّكل النهائيّ لمعرفة الأماكن المخصّصة لهذين القسمين. الخطوة 13لا تختلف (الخطّة المتقدمة) عن الخطط الأخرى سوى أنّ لون وسم السّعر وزرّ الإجراء أكثر بريقًا. زرّ الإجراء الأحمر مشابه بشكل كبير للأزرار الرماديّة، ولكنّه يختلف عنها بلونه الأساسيّ #ed161c، ولون الحدّ الخارجيّ المبيّن في الصّورة أدناه. الخطوة 14أخيرًا، غيّر ألوان الحدّ الخارجيّ من الألوان الرماديّة إلى الألوان الحمراء التّالية. النتيجة النهائية ترجمة -وبتصرف- للدرس Create a Pricing Table Using Photoshop in bout 20 Minutes لصاحبه Dainis Graveris.