خانه » آموزش‌های رایگان طراحی و کدنویسی سایت » آموزش طراحی کارت قیمت خدمات سایت

پک طراحی سایت نقره‌ای

  • طراحی متناسب با کسب و کار شما
  • طراحی شخصی المانهای گرافیکی
  • ارائه هاست و دامنه رایگان
  • پشتیبانی فنی شش ماهه
  • طراحی بنرهای سفارشی محصول
  • پیاده سازی فرم‌های کمپین
قیمت:
۲۵,۰۰۰,۰۰۰
تومان

کاربرد کارت قیمت در وبسایت

وجود کارت قیمت در صفحاتی سفارش و حتی در صفحه اصلی سایت باعث می‌شود تا مخاطب در کمترین زمان ممکن به ویژگی‌های هر پارت از محصول و خدمت شما پی ببرد و این در حالی است که اگر کارت قیمت به شیوه ای اصولی طراحی شود مخاطب برای خرید پکیج گران‌تر ترغیب میشود.

برای این منظور بهتر است تمام ویژگی‌ها و مزیت های خدمات رو روی همه کارها درج نمایید و با استفاده از آیکون‌ها و رنگ متن ویژگی‌های فعال و غیر فعال را به اطلاع مخاطب برسانی؛ در تجربه کاربری و ترغیب مخاطب درج اعداد نتیجه مطلوب تری را به همراه دارد به صورت مثال میتوان در پیکج A تعداد ماه پشتیبانی را سه و در پیج بعدی (پکیج B) آنرا شش در نظر گرفت. این باعث نوعی مقایسه ذهنی و برآورد قیمت شده و قالبا نتیجه ای با هزینه-فایده بالاتر را انتخاب میکنند.

نکات طراحی و تجربه کاربری

اصول طراحی کلی کارت‌ها باید به شیوه‌ای باشد که رعایت توازن در میزان فاصله‌های حاشیه ای (padding) و همچین فاصله بین عناصر (این اینجا : ویژگی‌های پکیج) (gap) رعایت شده باشد.

شی کنید بجای استفاده از رنگهای مختلف از با میزاین شدت رنگ (opacity) بازی کنید و ویژگی‌های فعال را با بلد نمایید.
استفاده از آیکون‌های متضاد (فعال و غیر فعال) میتواند به انتقال اطلاعات و تحلیل دقیق هر پکیج به مخاطب کمک کرده و سرعت انتخاب را افزایش دهد. 

نکته اساسی در طراحی کارت‌های قیمت : تجربه نشان داده که مخاطبهای از بین پکیج‌های موجود بیشتر تمایل دارند که پکیج دوم را انتخاب نمایید (در واقع تمایل کمتری برای خرید پکیج ارزان تر و یا گرانتر را دارند) پس در صورتی که تمام کارهای قیمت شما دارای دیزاین مشابه میباشد در پکیجهای میانی ویژگیها را به نوعی ترغیب کننده تر ایجاد نمایید تا شانس فروش آن را افزایش دهید.

در صورتی که تعداد کارتهای قیمت شما در صفحه زیاد است (بیشتر از سه یا چهار کارت) بهتر است کارتی که برای شما مزیت استراتژیک دارد را به گونه‌ای که دیزاین کلی را بهم نزند بلد نمایید ؛ برای این منظور می‌توانید بک‌گراند کارد خود را به رنگ شاخص سایت و یا اپلیکیشن خود تغییر دهید و رنگ فونت ها را برای خوانایی بهتر به رنگ زمینه کلی سایت و یا اپ استایل دهید.

در مثال در دیزاین ما می‌توان برای زمینه از زنگ آبی (001AFF#) و برای فونت و دکمه از رنگ سفید بهره گرفت.

کدهای HTML

برای کپی کردن کدهای HTML فقط کافیست روی بخش کد کلیک کنید

				
					<div class="cord-price">
    <h2>پک طراحی سایت نقره‌ای</h2>
    <div class="option">
        <ul>
            <li id="active">طراحی متناسب با کسب و کار شما</li>
            <li id="active">طراحی شخصی المانهای گرافیکی</li>
            <li id="active">ارائه هاست و دامنه رایگان</li>
            <li id="active">پشتیبانی فنی شش ماهه</li>
            <li id="disactive">طراحی بنرهای سفارشی محصول</li>
            <li id="disactive">پیاده سازی فرم‌های کمپین</li>
        </ul>
    </div>
    <div class="price">
        <div class="so">قیمت:</div>
        <div class="main-price">
            <div class="num">۲۵,۰۰۰,۰۰۰</div>
            <img decoding="async" src="tooman.svg" alt="تومان">
        </div>
    </div>
    <button>ثبت سفارش</button>
</div>
				
			

کدهای CSS

برای کپی کردن کدهای CSS فقط کافیست روی بخش کد کلیک کنید

				
					.cord-price {
    background-color: white;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    display: inline-block;
}
.cord-price h2 {
    font-size: 24px;
    font-weight: 900;
}
.cord-price .option {
    padding: 0 10px;
    background: #f2f2f2;
    border-radius: 7px;
}
.cord-price .option ul {
    list-style-type: none;
    padding-right: 0 !important;
    padding: 5px 0;
}
.cord-price .option li {
    border-bottom: 1px dashed #BFBFBF;
    padding: 7px 5px;
    text-align: right;
    color: black;
}
li#active:before {
    content: '' !important;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 0 -7px 10px;
    background-image: url(ok.svg);
    background-size: cover;
}
li#disactive:before {
    content: '' !important;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 0 -7px 10px;
    background-image: url(no.svg);
    background-size: cover;
}
.cord-price .option li#disactive {
    color: #BFBFBF;
}
.cord-price .option li:last-child {
    border-bottom: none;
}
.cord-price .price {
    padding: 10px;
    text-align: right;
}
.cord-price .price .so{
    font-size: 14px;
    font-weight: 500;
    color: #BFBFBF;
    margin-bottom: -10px;
}
.cord-price .price .main-price {
    display: flex;
    justify-content: space-between;
    font-size: 30px;
    font-weight: 700;
}
.cord-price .price .main-price img {
    width: 35px;
}
.cord-price button {
    padding: 15px;
    width: 100%;
    border-radius: 7px;
    border: none;
    background-color: #001AFF;
    color: #fff;
    font-family: 'Yekan Bakh';
    font-size: 20px;
}
				
			

نکته پایانی : توجه داشته باشید که در هر طراحی که انجام میدهید نهایت سادگی و سهولت استفاده را رعایت نمایید، این امر باعث میشود که در خودآگاه مخاطب تجربه کاربری دلنشینی از سایت و یا اپلیکیشن شما به یاد بماند.

تنها زمانی نیاز به بلد کردن المانها و یا استفاده از رنگهای جذاب وجو دارد که دارای دو شرط اساسی باشد:
اول : اینکه برای کسب و کار شما مهم باشد که مخاطب اون مطلب را بدادن و این اطلاع موجب فروش محصول و یا خدمت شما شود.
دوم : اینکه این جلب توجه باعث شود تا مخاطب با کلید بر روی آن متن و یا دکمه و … در مسیر فروش شما قرار گیرد.

در کل هدف نهایی هر کسب و کاری جلب نظر مخاطب و به تناسب فروش بیشتر است و این نکته باید همیشه در تمام مراحل طراحی و پیاده سازی یک وبسایت و یا اپلیکیشن مد نظر قرار بگیرد.

آخرین آموزش‌ها:

پرسش و پاسخ
نظر و یا هر سوالی در خصوص مقاله " آموزش طراحی کارت قیمت خدمات سایت " دارید مطرح کنید تا پاسخ دهیم.
4.7/5

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

ورود | ثبت‌نام

لطفا شماره موبایل یا ایمیل خود را وارد کنید
نوین گرام