मूल्य निर्धारण तालिका डिजाइन: उदाहरण के साथ १० युक्तियाँ (एलिमेंट)

कुंजी तकिए

• अच्छा मूल्य निर्धारण तालिका डिज़ाइन तीन या चार योजनाओं को एक साथ दिखाता है, जिसमें एक योजना को बाकी के ऊपर नेत्रहीन रूप से उठाया जाता है ताकि पाठक को चुनने के लिए डिफ़ॉल्ट हो।
• एक मूल्य निर्धारण तालिका बेहतर परिवर्तित करती है जब प्रत्येक कार्ड एक ही क्रम का पालन करता है: योजना का नाम, यह किसके लिए है, मूल्य, बिलिंग अवधि, एक छोटी सुविधा सूची और एक बटन।
• फ़ीचर पंक्तियाँ प्रत्येक में तीन से छह शब्द होनी चाहिए; एक पंक्ति जो दूसरी पंक्ति में लपेटती है वह पढ़ने को धीमा कर देती है और कार्डों को असमान बना देती है।
• बिक्री मूल्य के बगल में एक क्रॉस-आउट मूल मूल्य पाठक को एक एंकर देता है, और मास्टर एडॉन्स प्राइसिंग टेबल विजेट में बिल्कुल उसी के लिए एक बिक्री स्विच होता है।
• मासिक और वार्षिक टॉगल के लिए कार्ड के दो सेट की आवश्यकता होती है; मास्टर ऐडऑन में टॉगल कंटेंट विजेट (प्रो) दो सहेजे गए अनुभाग टेम्पलेट्स के बीच स्विच करता है।
• एक फोन पर, मूल्य निर्धारण कार्ड एक कॉलम में ढेर हो जाते हैं, इसलिए हाइलाइट की गई योजना को पहले या दूसरे स्थान पर बैठना चाहिए, तीसरे स्थान पर नहीं।

मूल्य निर्धारण तालिका डिजाइन तय करता है कि क्या एक आगंतुक जो पहले से ही आपके उत्पाद को चाहता है, कुछ सेकंड में सही योजना पा सकता है लेआउट सरल है: कार्ड की एक पंक्ति, एक मूल्य प्रत्येक, एक बटन प्रत्येक से छोटे निर्णय जो मायने रखते हैं: कितनी योजनाएं, कौन सी उठाई गई है, कीमत क्या दिखती है, प्रत्येक सुविधा पंक्ति कितनी देर तक चलती है, और बटन क्या कहता है।

यह पोस्ट दस मूल्य निर्धारण तालिका डिजाइन युक्तियों के माध्यम से चलता है, प्रत्येक एलिमेंट के लिए मास्टर एडॉन्स से मूल्य निर्धारण तालिका विजेट के साथ निर्मित वास्तविक तालिका पर दिखाया गया है उदाहरण मेड-अप योजनाओं (स्टार्टर, ग्रोथ, एजेंसी) का उपयोग करते हैं ताकि आप कीमतों की नकल किए बिना संरचना की आवश्यकता हो जहां एक टिप को दूसरे विजेट की आवश्यकता होती है, जैसे कि मासिक और वार्षिक टॉगल, पोस्ट कहता है कि कौन सा और क्या यह प्रो योजना में है।

१ तीन योजनाएं दिखाएं, अधिकतम चार

तीन योजनाएं मूल्य निर्धारण तालिका डिजाइन है जो अधिकांश पाठक एक नज़र में तुलना कर सकते हैं दो योजनाएं एक हां या कोई निर्णय नहीं लेती हैं पांच या अधिक योजनाएं तालिका को एक स्प्रेडशीट में बदल देती हैं, और पाठक लैपटॉप पर बग़ल में स्क्रॉल करना शुरू कर देता है और एक फोन पर छोड़ देता है।

योजना रखो आप चाहते हैं कि ज्यादातर लोग बीच में खरीदें लोग एक पंक्ति को बाएं से दाएं पढ़ते हैं, लेकिन वे केंद्र पर बस जाते हैं, जो भी है जहां कार्ड स्टैक होने पर फोन पर पहली बार आंख भूमि होती है यदि आप कस्टम मूल्य निर्धारण के साथ एक एजेंसी या एंटरप्राइज़ योजना बेचते हैं, तो इसे एक अलग तालिका के बजाय एक “संपर्क यूएसंबैग बटन के साथ चौथे कार्ड के रूप में रखें।

एलिमेंटर में, प्रत्येक कार्ड एक मूल्य निर्धारण तालिका विजेट है जो अपने स्वयं के कॉलम या कंटेनर में गिरा दिया जाता है तीन-कॉलम कंटेनर में तीन विजेट, प्रत्येक सेट एक ही लेआउट में, आपको ऊपर दी गई तालिका देता है मूल्य निर्धारण तालिका विजेट पृष्ठ पूर्ण नियंत्रण सूची और पांच लाइव लेआउट हैं।

२ एक योजना को बाकी से ऊपर उठाएं

एक हाइलाइट की गई योजना पाठक को एक डिफ़ॉल्ट देती है, और अधिकांश इसे ले जाएगा हाइलाइट एक बार में तीन चीजें करता है: कार्ड थोड़ा लंबा या उठा हुआ है, बटन रूपरेखा शैली के बजाय उच्चारण रंग का उपयोग करता है, और एक रिबन कारण का नाम देता है (“सबसे लोकप्रिय”, “बेस्ट वैल्यू”, “अनुशंसित”)।

बिल्कुल एक कार्ड हाइलाइट करें दो हाइलाइट किए गए कार्ड एक दूसरे को रद्द करते हैं आपके लिए सबसे अच्छा मार्जिन के साथ योजना चुनें जो अभी भी अधिकांश पाठकों को फिट करता है, सबसे महंगा नहीं।

मूल्य निर्धारण तालिका विजेट में, पर स्विच करें हाइलाइट तालिका सामग्री टैब में, फिर खोलें रिबन पाठ, संरेखण, स्थिति और रोटेशन सेट करने के लिए अनुभाग हाइलाइट किए गए कार्ड को स्टाइल टैब में एक अलग बटन रंग दें ताकि यह केवल रिबन पर निर्भर न हो।

३ कीमत को कार्ड पर सबसे बड़ी चीज बनाएं

कीमत कार्ड पर सबसे बड़ा पाठ होना चाहिए, योजना के नाम से बड़ा पाठक पहले संख्याओं के लिए मूल्य निर्धारण तालिका को स्कैन करते हैं और योजना के नामों को दूसरे पढ़ते हैं, इसलिए एक डिजाइन जो नाम को कीमत से बड़ा बनाता है, उन्हें धीमा कर देता है।

मुद्रा प्रतीक और बिलिंग अवधि संख्या से छोटी रखें। “$49” “49.00 USD प्रति माह की तुलना में तेजी से पढ़ता है। यदि आप किसी योजना पर छूट देते हैं, तो बिक्री मूल्य के बगल में पार की गई मूल कीमत दिखाएं। क्रॉस-आउट नंबर एक एंकर है: 49 तब सस्ता लगता है जब 69 अकेले की तुलना में उसके बगल में बैठता है।

विजेट में एक है बिक्री मूल्य निर्धारण के तहत स्विच करें इसे चालू करें, भरें मूल कीमतऔर स्ट्राइक-थ्रू स्वचालित रूप से प्रकट होता है सूची से मुद्रा चुनें या अपना स्वयं का प्रतीक टाइप करें।

४, खरीदार के बाद योजना का नाम दें, टियर नहीं

योजना के नाम सबसे अच्छा काम करते हैं जब वे पाठक को बताते हैं कि योजना किसके लिए है। “स्टार्टर, ग्रोथ, एजेंसी” “बेसिक, स्टैंडर्ड, प्रीमियम” से अधिक कहता है, और प्रत्येक नाम के तहत एक-पंक्ति उपशीर्षक (“एक साइट” के लिए, “छोटी टीमों के लिए”, “क्लाइंट वर्क” के लिए) अनुमान को हटा देता है।

उन नामों से बचें जिन्हें समझ में आने के लिए फीचर सूची की आवश्यकता है यदि किसी पाठक को पंक्तियों की तुलना करनी है, तो यह पता लगाने के लिए कि कौन सी योजना है “मानक”, नाम विफल हो गया है उसी कारण से चुटकुले और आंतरिक कोडनेम से बचें।

मूल्य निर्धारण तालिका विजेट में एक है शीर्षक और ए उपशीर्षक हेडर अनुभाग में फ़ील्ड, प्लस एक वैकल्पिक आइकन और टैग उपशीर्षक “ के लिए सही जगह हैछोटी टीमों के लिए”।

५ फीचर पंक्तियों को छोटा और एक ही क्रम में रखें

प्रत्येक सुविधा पंक्ति को एक पंक्ति, तीन से छह शब्दों पर फिट होना चाहिए लंबी पंक्तियां लपेटती हैं, कार्ड असमान हो जाते हैं, और पाठक योजनाओं में तुलना करना बंद कर देता है क्योंकि पंक्तियां अब लाइन नहीं होती हैं।

पंक्तियों को हर कार्ड में उसी तरह से ऑर्डर करें, पंक्तियों के साथ जो शीर्ष पर योजनाओं के बीच बदलती हैं (“१ साइट” बनाम “५ साइट” बनाम “असीमित साइट”) प्रति कार्ड पांच से सात पंक्तियां पर्याप्त हैं यदि आपके पास बीस विशेषताएं हैं, तो मूल्य निर्धारण तालिका उनके लिए गलत जगह है: शीर्ष पांच को यहां रखें और बाकी के लिए तुलना तालिका से लिंक करें।

विजेट का विशेषताएं पुनरावर्तक एक पाठ, एक आइकन और प्रति पंक्ति एक वैकल्पिक टूलटिप लेता है प्रत्येक शामिल सुविधा के लिए एक ही आइकन का उपयोग करें और एक योजना में शामिल नहीं होने वाली सुविधाओं के लिए एक अलग (या कोई नहीं) का उपयोग करें, इसलिए दृश्य पैटर्न कार्ड में मेल खाता है।

६, एक टूलटिप में विस्तार रखो, पंक्ति में नहीं

एक टूलटिप आपको पंक्ति को छोटा रखने देता है और फिर भी प्रश्न का उत्तर देता है “इसमें क्या शामिल है?”। पंक्ति कहती है “सभी विजेट”; टूलटिप कहता है “हर विजेट और एक्सटेंशन”।

दो या तीन पंक्तियों के लिए टूलटिप्स का उपयोग करें जो समर्थन प्रश्न उत्पन्न करते हैं, हर पंक्ति के लिए नहीं एक कार्ड जहां हर सुविधा में एक बिंदीदार रेखांकित दिखता है जैसे कि यह कुछ छिपा रहा है टूलटिप टेक्स्ट को एक वाक्य में रखें।

मूल्य निर्धारण तालिका विजेट में, फीचर पुनरावर्तक की प्रत्येक पंक्ति में एक होता है टूलटिप स्विच, एक टेक्स्ट फ़ील्ड और एक प्लेसमेंट विकल्प (ऊपर, नीचे, बाएँ, दाएँ)।

७ प्रति कार्ड एक बटन, उस पर एक क्रिया के साथ

बटन कार्ड पर एकमात्र तत्व है जो कुछ भी करता है, इसलिए इसे एक काम दें और इसे क्रिया के साथ लेबल करें। “प्रारंभ करना”, “मुक्त परीक्षण” प्रारंभ करें, “विकास करना” चुनें सभी काम करते हैं। “सबमिट” और “क्लिक करें यहाँ” नहीं।

बटन के नीचे, एक छोटी ट्रस्ट लाइन अंतिम आपत्ति को हटा देती है: “किसी भी समय को रद्द करें”, “१४-दिन पैसे वापस करने के लिए”, “कोई कार्ड की आवश्यकता नहींहै” इसे पांच शब्दों में रखें और उनमें से तीन को ढेर न करें।

विजेट का पाद अनुभाग में बटन टेक्स्ट, लिंक और एक है अतिरिक्त जानकारी विश्वास रेखा के लिए फ़ील्ड यदि आप आसान डिजिटल डाउनलोड के साथ बेचते हैं, तो उसी अनुभाग में एक ईडीडी खरीद बटन है जो सीधे उत्पाद से लिंक करता है एक वूकॉमर्स उत्पाद के लिए, उत्पाद या चेकआउट पृष्ठ पर बटन लिंक करें।

८, एक मासिक और वार्षिक टॉगल जोड़ें केवल जब बचत दिखाने लायक है

एक मासिक और वार्षिक टॉगल समझ में आता है जब वार्षिक बिलिंग पाठक को एक स्पष्ट राशि बचाता है, आमतौर पर दो महीने या उससे अधिक यदि वार्षिक छूट छोटी है, तो टॉगल निर्णय को बदलने के बिना एक कदम जोड़ता है, और एक एकल “बिल्ड वार्षिकंबोल लाइन एक ही काम करती है।

प्रति माह वार्षिक मूल्य दिखाएं (“$३९ /माह, बिल किया गया वार्षिक”) पूर्ण वार्षिक कुल के बजाय, इसलिए दो टॉगल राज्यों की तुलना की तरह के लिए की तरह की तुलना करें टॉगल के बगल में बचत रखें (“सेव २०%”) ताकि पाठक को पता चले कि स्विच क्यों मौजूद है इससे पहले कि वे इसे क्लिक करें।

मूल्य निर्धारण तालिका विजेट प्रति कार्ड एक मूल्य रखता है, इसलिए टॉगल दूसरे विजेट से आता है मासिक कीमतों के साथ कार्ड का एक सेट बनाएं और वार्षिक कीमतों के साथ एक, प्रत्येक को एक अनुभाग टेम्पलेट के रूप में सहेजें, और दोनों को इसमें डालें सामग्री विजेट टॉगल करेंू ी है, जो मास्टर एडन प्रो योजना में है टॉगल सामग्री पृष्ठ में सेटअप चरण और एक लाइव उदाहरण है।

९ पृष्ठ से मेल खाने वाला लेआउट चुनें, फिर इसे रखें

मूल्य निर्धारण तालिका का लेआउट इसके चारों ओर के अनुभाग से मेल खाना चाहिए: एक साफ सास पृष्ठ पर एक सादा कार्ड, एक नरम ब्रांड पर एक गोल हेडर, एक पृष्ठभूमि छवि जब पृष्ठ के बाकी हिस्सों में फोटोग्राफी का उपयोग किया जाता है, तो एक को चुनें और तालिका में प्रत्येक कार्ड के लिए इसका उपयोग करें।

एक टेबल के अंदर लेआउट को मिलाना एक आम गलती है पाठक योजनाओं में अंतर के रूप में आकार में अंतर पढ़ता है रंगों को भी सीमित रखें: हाइलाइट किए गए कार्ड के लिए एक उच्चारण रंग, बाकी के लिए एक तटस्थ।

मूल्य निर्धारण तालिका विजेट में पांच लेआउट हैं लेआउट ड्रॉपडाउन (डिफ़ॉल्ट, लेफ्ट एलाइन कंटेंट, राउंडेड टेबल, टेबल विद बीजी इमेज और स्क्यू बीजी पैटर्न), और जब आप उनके बीच स्विच करते हैं तो कंटेंट अपनी जगह पर बना रहता है टेम्पलेट लाइब्रेरी यदि आप तैयार डिज़ाइन से शुरुआत करना चाहते हैं तो इन लेआउट पर मूल्य निर्धारण अनुभाग बनाए गए हैं।

१० प्रकाशित करने से पहले एक फोन पर तालिका की जाँच करें

एक फोन पर कार्ड एक कॉलम में ढेर हो जाते हैं, इसलिए पाठक एक समय में एक योजना देखता है और दूसरों के पिछले स्क्रॉल करता है यह दो निर्णयों को बदलता है: कौन सा कार्ड पहले आता है, और प्रत्येक कार्ड कितना लंबा है।

हाइलाइट किए गए प्लान को मोबाइल पर पहले या दूसरे स्थान पर रखें यदि यह डेस्कटॉप पर तीसरे स्थान पर बैठता है, तो कंटेनर पर एलिमेंटर के उत्तरदायी आदेश का उपयोग करें इसे ऊपर ले जाने के लिए फीचर सूचियों को पांच पंक्तियों में रखें ताकि एक कार्ड मोटे तौर पर एक स्क्रीन में फिट हो, और टैप करने के लिए बटन को पर्याप्त चौड़ा बना दें।

एलिमेंटर रिस्पॉन्सिव मोड (पैनल के नीचे फोन आइकन) खोलें और मोबाइल ब्रेकपॉइंट पर टेबल की जांच करें मूल्य निर्धारण तालिका विजेट के स्टाइल टैब नियंत्रण में उत्तरदायी स्विच हैं, इसलिए आप डेस्कटॉप संस्करण को बदले बिना फोन पर मूल्य फ़ॉन्ट और पैडिंग को छोटा कर सकते हैं।

अक्सर पूछे जाने वाले प्रश्न

अंतिम विचार

मूल्य निर्धारण तालिका डिजाइन एक छोटी सूची में आता है: तीन योजनाएं, एक उठाया, सबसे बड़ी पाठ के रूप में कीमत, योजना के नाम जो कहते हैं कि योजना किसके लिए है, फीचर पंक्तियां जो एक पंक्ति में फिट होती हैं, विस्तार के लिए टूलटिप्स, एक बटन के साथ एक क्रिया, केवल एक टॉगल जब वार्षिक बचत वास्तविक हो, प्रति टेबल एक लेआउट, और एक फोन पर एक चेक उपरोक्त दस उदाहरणों में से प्रत्येक मूल्य निर्धारण तालिका विजेट और कुछ पैनल सेटिंग्स के साथ बनाया गया था।

यदि आप शून्य से शुरुआत कर रहे हैं, तो खोलें मूल्य निर्धारण तालिका विजेट पृष्ठ पांच लेआउट को लाइव देखने के लिए, या उनमें से एक तैयार मूल्य निर्धारण अनुभाग चुनें टेम्पलेट लाइब्रेरी और योजनाओं को बदलें विजेट में से एक है विजेट और एक्सटेंशन मास्टर ऐडऑन में, और बिलिंग स्विच के लिए टॉगल सामग्री विजेट योजनाओं में है मूल्य निर्धारण पृष्ठ.

संबंधित पढ़ना

• तुलना तालिका विजेट: पूर्ण सुविधा मैट्रिक्स जिसे मूल्य निर्धारण तालिका से लिंक किया जाना चाहिए
• गतिशील टेबल विजेट: मेनू और सेवा सूचियों के लिए प्रति पंक्ति एक मूल्य वाली मूल्य सूची
• एलिमेंटर एनिमेटेड बटन: कार्ड फूटर के लिए बटन शैलियाँ
• एलिमेंटर मार्केटिंग विजेट: मास्टर ऐडऑन में अन्य रूपांतरण विजेट
• मूल्य निर्धारण तालिका विजेट दस्तावेज़ीकरण: प्रत्येक नियंत्रण समझाया गया
• थीम बिल्डर: शेष मूल्य निर्धारण पृष्ठ के लिए हेडर और पादलेख टेम्पलेट