आम वेब यूआई शैलियाँ


91

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

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

वैकल्पिक शब्द

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

इसके बाद के संस्करण के साथ बनाया mockup Balsamiq मॉक-अप के लिए एक महान उदाहरण है, सब सबसे आम "घटक" का उपयोग करने के लिए उपलब्ध हैं, और सभी का सबसे अच्छा: वहाँ केवल एक अच्छे दिखने वाले शैली से चुनने के लिए है।

क्या वेब के लिए ऐसा कुछ है? एक तटस्थ अभी तक अच्छा सीएसएस या जावास्क्रिप्ट यूआई फ्रेमवर्क?


अब तक के विकल्प:

मुझे यह जानने में दिलचस्पी है कि क्या कोई सीएसएस-केवल यूआई फ्रेमवर्क हैं।

मुझे यह पृष्ठ वेब UI लाइब्रेरीज़ की बहुत अच्छी सूची के साथ मिला , लेकिन उनमें से अधिकांश (कम से कम अच्छे वाले) जावा के लिए विशिष्ट प्रतीत होते हैं, क्या शुद्ध सीएसएस या जेएस में समान रूप से अच्छे विकल्प हैं?

पुनश्च: मैं AJAX, प्रभाव, व्यवहार और में दिलचस्पी नहीं हूँ ... मेरी मुख्य (केवल) चिंता शैली है।


सभी सुझावों के लिए सभी का धन्यवाद!

सभी यूआई पुस्तकालयों द्वारा सुझाए गए बहुत सावधानी से विचार करने के बाद, मैं इस निष्कर्ष पर पहुंचा हूं कि एक्सटीजेएस और क्यूओक्सडू वे हैं जो मेरी जरूरतों को सबसे करीब से फिट करते हैं। jQuery UI आशाजनक लगता है, लेकिन केवल तत्वों की कम मात्रा प्रदान करता है।

जहाँ तक CSS-only लाइब्रेरियों में जाने पर मुझे BlueTrip / BluePrint और टैबलर द्वारा सुझाए गए विषय सबसे अच्छे लगे। इसके अलावा, फ्लेक्स और नैप्की भी खोज के लायक हैं।

अब समय जानने के लिए! =)


6
टिप्पण लायक, jQuery-यूआई बुलाया "थीम रोलर" गति बातें करने के लिए एक अच्छा विषय डिजाइनर है: jqueryui.com/themeroller
निक Craver

जवाबों:


7

मैं विश्वास नहीं कर सकता कि किसी ने भी उल्लेख नहीं किया है:

http://www.extjs.com/

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

यदि आप वास्तव में EXT के साथ विकसित पूर्ण UI के लिए एक अनुभव प्राप्त करना चाहते हैं, तो इस url का प्रयास करें:

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html


@ एरिक: सुझाव के लिए धन्यवाद। क्या आप किसी ऐसी पुस्तक / ट्यूटोरियल को जानते हैं जिसकी आप सिफारिश कर सकते हैं? मुझे यह पता लगाने में थोड़ी परेशानी हो रही है कि मुझे एक्सपीजेएस को एक विशिष्ट PHP एमवीसी एप्लिकेशन में कैसे एकीकृत करना चाहिए।
एलिक्स एक्सल

शुरू करने के लिए सबसे अच्छी जगह ट्यूटोरियल है जो EXT प्रदान करता है: extjs.com/learn/Tutorials जहां तक ​​इसे अपने PHP फ्रेमवर्क के साथ एकीकृत करने की बात है, मैं नहीं कह सकता - लेकिन ये आपके HTML पृष्ठ हैं, इसलिए आप उन्हें अपने तरीके से एकीकृत करेंगे। आप किसी भी अन्य पेज को एकीकृत नहीं करेंगे?
एरिक

11

लेआउट के लिए 960gs और स्टाइल के लिए jQuery-UI का एक संयोजन संभवतः वह है जो आप बाद में हैं।

आप 960gs के बजाय ब्लूप्रिंट CSS फ्रेमवर्क पर भी विचार कर सकते हैं ।


आपका मतलब jQuery UI JS फ्रेमवर्क या jQuery UI CSS फ्रेमवर्क है?
एलिक्स एक्सल

1
भ्रम के लिए क्षमा याचना, मेरा मतलब है कि वह स्टाइल के लिए यूआई यूआई सीएसएस फ्रेमवर्क। लेकिन ऐसा कोई कारण नहीं है कि आप JS विगेट्स ढांचे को भी शामिल नहीं कर सकते हैं।
शेन ओ'ग्राडी

धन्यवाद, मैं उस पर गौर करूंगा। =)
अलिक्स एक्सल

7

Dojo और dijit का उपयोग करने के बारे में क्या ?

दिजीत विगेट्स और एलिमेंट्स बनाने का एक तेज़ तरीका है। यह 3 डिफ़ॉल्ट थीम के साथ भी आता है जो संशोधित करना आसान है।

विभिन्न विगेट्स की एक अच्छी सूची यहाँ


dijit को लगता है कि मुझे क्या चाहिए, हालाँकि मैं पृष्ठ तक नहीं पहुँच सकता - पता नहीं क्यों।
एलिक्स एक्सल

वह कौन सा पृष्ठ है जिसे आप एक्सेस नहीं कर सकते?
peirix 12

द्विज, लेकिन यह अब काम कर रहा है। =) जैसे ही मैं एक कंप्यूटर के पास पहुँचता हूँ (मैं वर्तमान में एक फोन के साथ ब्राउज़ कर रहा हूँ) इसे बेहतर तरीके से देखूँगा।
एलिक्स एक्सल

6

किसी ऐसे व्यक्ति के साथ जोड़ी बनाएं जो UI डिज़ाइन में माहिर हो।

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

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

एक अच्छा इंटरफ़ेस css फ्रेमवर्क सहित सरल नहीं है।

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

यदि आप अधिक उत्पादक कर रहे हैं सिस्टम आर्किटेक्चर, योजना, विकास, जो कुछ भी ... आपको अपने आप को उस दिशा में धकेलना चाहिए। जबकि एकल विकास परियोजनाएं पूरी हो सकती हैं, मैं इसे अक्षम के रूप में देखता हूं। यह बहुत दुर्लभ है कि किसी के पास शीर्ष-स्तरीय अनुप्रयोगों को विकसित करने के लिए कौशल हो।

चुनौती किसी को मिल रही है, जिसके साथ आप अच्छा काम करते हैं।


4

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


1
जीडब्ल्यूटी यूआई के जावा में लिखे गए हैं। GWT फिर उस जावा को ले जाता है और उसे शुद्ध html / जावास्क्रिप्ट में बदल देता है।
एबटीन फ़ोरोज़ंडेह

3

(G) UI डिज़ाइन के उद्देश्य से कुछ रूपरेखाएँ हैं; Qooxdoo , JQuery UI और MochaUI उनमें से कुछ हैं (हालांकि अंतिम उपयोग योग्य फ्रेमवर्क की तुलना में अधिक प्रमाण-अवधारणा है)। ये चौखटे आमतौर पर विभिन्न प्रकार के JS- संचालित तत्व (रूप तत्व, जैसे इनपुट फ़ील्ड और सबमिट बटन, लेकिन अन्य तत्व जैसे टैब) प्रदान करते हैं। हालाँकि, यह अभी भी आप पर निर्भर करेगा कि आप इन तत्वों को किस स्थिति में रख सकते हैं, और शायद उन्हें स्टाइल करें।

शायद खुद को CSS फ्रेमवर्क से परिचित करना (जैसे 960GS ) उपरोक्त JS UI फ्रेमवर्क को पूरक कर सकता है।

(एक व्यक्तिगत अस्वीकरण के रूप में; मेरे पास ऊपर बताए गए किसी भी ढांचे के साथ बहुत कम अनुभव है। लेकिन मुझे यकीन है कि Google या SO मुझे उत्तर दे सकते हैं जो मैं नहीं कर सकता।)


1
960.gs वास्तव में बहुत स्टाइलिंग नहीं करता है - आप इसके लिए ब्लूएट्रिप ( bluetrip.org ) जैसा कुछ चाहते हैं । 960.gs वास्तव में केवल ग्रिड-आधारित लेआउट प्रदान करता है।
डोमिनिक रॉगर

मैंने आपके द्वारा सुझाए गए फ्रेमवर्क में एक नज़र डाली, qooxdoo अत्यधिक जटिल लगता है (सब कुछ जावास्क्रिप्ट के माध्यम से परिभाषित किया गया लगता है - यहां तक ​​कि फॉर्म इनपुट इत्यादि भी।), MochaUI का बहुत ही शांत तटस्थ रंगों के साथ एक बहुत अच्छा इंटरफ़ेस है, मैंने इसे नहीं देखा है। इसका स्रोत कोड लेकिन यह भी बल्कि सीमित लगता है (बहुत से प्रारंभिक शैलियाँ गायब हैं)। jQuery UI अब तक का सबसे अच्छा विकल्प है। 960.gs अच्छा है लेकिन डोमिनिक की तरह यह स्टाइल के लिए नहीं है।
एलिक्स एक्सल

3

यह आपकी वर्तमान परियोजना के लिए आपकी मदद नहीं करेगा, लेकिन यह भविष्य की परियोजनाओं के लिए विचार करने योग्य है। HTML 4 में GUI एप्लिकेशन बनाने और सीएसएस और HTML की सीमाओं के खिलाफ लगातार कुश्ती करने के बाद कई साल बिताने के बाद, मैंने सोचा कि मैं एडोब फ्लेक्स की कोशिश करूंगा। क्या सुधार हुआ!

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


फ्लेक्स वास्तव में बहुत अच्छा उपकरण है, लेकिन इन दिनों पर विचार करें कि दुनिया एचटीएमएल 5 की ओर बढ़ रही है और फ्लेक्स में आकार और मल्टी लिंगुअल के साथ कई समस्याएं हैं जहां जावास्क्रिप्ट जीतता है और आप कीमत के बारे में क्या सोचते हैं लेकिन मैं फिर भी फ्लेक्स के बारे में सोचता हूं महान उपकरण है
tawfekov

मुझे वास्तव में उम्मीद है कि मानकों के लिए एक शुद्ध HTML / जावास्क्रिप्ट / सीएसएस समाधान मानकों की प्रक्रिया से निकलेगा।
जैकब

फ्लेक्स बल्कि भारी हो सकता है, और खोज-इंजन-अनुकूल के रूप में नहीं हो सकता ... लेकिन सिस्टम को मेरी राय में हराया नहीं जा सकता। मैं एक 'वरिष्ठ' वेब डेवलपर नहीं हूं, लेकिन मैं वास्तव में फ्लेक्स ढांचे के भीतर काम करने का लाभ देखता हूं। Adobe एक बहुत अच्छी प्रणाली है। केवल डेस्कटॉप / वेब / और मोबाइल के लिए एक फ्रेमवर्क / मानकीकृत वितरण के साथ कोड करने में सक्षम होना शब्दों से परे मूल्यवान है।
डेरेक अडायर

3

आप निम्नलिखित साइट को ब्राउज़ करने पर विचार कर सकते हैं:

http://themeforest.net/category/site-templates/admin-skins

यहां कई "प्रशासनिक" थीम खरीद के लिए उपलब्ध हैं जो आपकी आवश्यकताओं के अनुरूप हो सकती हैं।


2

वायरफ्रेम मॉकअप उस तरह से शुरू करने का एक शानदार तरीका है।

यहाँ चर्चा किए गए अधिकांश UI फ़्रैमेव्रोक्स का उपयोग करने के बाद, मैं निम्नलिखित कारणों से आपको jQueryUi की ओर ले जाने के लिए तैयार हूँ:

  1. jQueryUI CSS फ्रेमवर्क आपके लिए सुसंगत और शांत दिखने वाले CSS की देखभाल करता है (यह वास्तव में आसान है - बस कुछ मार्कअप करें और कक्षाएं लागू करें)

  2. jQueryUI में टैब्सकंट्रोल है, और शैली रूपों के लिए त्वरित त्वरित आसान तरीकों पर ढेर है।


सभी सुझाए गए विकल्पों में से मैं एक्सटीजेएस के लिए अधिक इच्छुक हूं, क्या आपने कभी इसका इस्तेमाल किया है? आप इसकी तुलना jQuery UI से कैसे कर सकते हैं?
एलिक्स एक्सल

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

2

यदि आप आधुनिक, गैर IE, ब्राउज़र को लक्षित कर रहे हैं, तो आपको स्प्राउटकोर की जांच करनी चाहिए । मॉकअप के लिए मैं मॉकिंगबर्ड का उपयोग करता हूं ।


धन्यवाद, मॉकिंगबर्ड ने वास्तव में मेरा दिन बना दिया! स्प्राउटकोर के लिए यह अच्छा लगता है, लेकिन कुछ डेमो फ़ायरफ़ॉक्स 3.5.7 में थोड़े छोटी दिखती हैं।
एलिक्स एक्सल

2

एक अपेक्षाकृत नया PHP फ्रेमवर्क विशेष रूप से यूआई-केंद्रित सॉफ्टवेयर के विकास के लिए डिज़ाइन किया गया है। आपके पास यहां टैब, फिल्टर और ग्रिड सहित तत्व शामिल हैं और आपको लागू करने के लिए कोड की लगभग 20 पंक्तियां ले जाएंगे।

http://agiletoolkit.org/


1

क्या आपने एक्सरे की कोशिश की है ? यह अनुप्रयोगों और वेब साइटों के लिए तेजी से वायरफ्रेम, प्रोटोटाइप और विनिर्देशों को बनाने का एक उपकरण है।

यह बाल्सामीक के समान तरीके से काम करता है, लेकिन यह आपको HTML, CSS और जावास्क्रिप्ट के रूप में अपने वायरफ्रेम / प्रोटोटाइप को निर्यात करने की अनुमति देता है।

फिर आप इसे सर्वर पर अपलोड कर सकते हैं या इसे अपने कंप्यूटर पर कार्यशील उदाहरण के रूप में चला सकते हैं।

आप प्रपत्र, लिंक, टैब, रोलओवर, जावास्क्रिप्ट प्रभाव बना सकते हैं।


धन्यवाद, Axure अच्छा लगता है, लेकिन यह नहीं है कि मैं क्या कर रहा हूँ।
एलिक्स एक्सल

1

यदि आप पहले से ही अपने प्रोटोटाइप के लिए Balsamic Mockups का उपयोग कर रहे हैं तो आपको Napkee पर विचार करना चाहिए । वेबसाइट को उद्धृत करने के लिए "नेपकी आपको बटन के एक क्लिक पर Balsamiq Mockups को HTML / CSS / JS और Adobe Flex 3 पर निर्यात करने देता है।"


1

मैं कुछ समय पहले इस भाग गया, और कुछ भी नहीं पाया, इसलिए मैंने इसे सीएसएस सीखने के अवसर के रूप में लिया। लेकिन तब से ऐसा लगता है कि इस विषय की दिशा में काफी प्रगति हुई है।

मुझे आशा है कि वह मदद करेंगे।


1

लेआउट और jQuery-UI या Jquery टूल के लिए 960gs का एक संयोजन बहुत अच्छा है, मैं उन्हें लगभग हर परियोजना में उपयोग करता हूं, लेकिन मैं http://easyframework.com/ में जोड़ना चाहूंगा, हालांकि इसका व्यवसाय अनुकूल नहीं है, इसलिए इसकी जांच करना सुनिश्चित करें इसका लाइसेंस लेकिन मुझे यह पसंद है


यदि आप टाइपोग्राफी में रुचि रखते हैं तो cufon cufon.shoqolate.com/generate की जाँच करें
tawfekov 11

1

मैंने हाल ही में iplotz.com नाम की एक अच्छी वेबसाइट की खोज की है जहाँ आप बिना कुछ भी इंस्टॉल किए अपने एप्लिकेशन / वेबसाइट / प्रोजेक्ट का मॉकअप बना सकते हैं। इसमें कई सारे सामान्य नियंत्रण भी हैं, साथ ही इस संपूर्ण परियोजना को प्रबंधित करने और इसे दूसरों के साथ ऑनलाइन साझा करने के लिए बहुत अधिक विशेषताएं हैं।

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


यह बाल्सामीक के लिए एक बहुत अच्छा विकल्प है, मेरा ब्राउज़र बहुत धीमा है, लेकिन पहली छाप से यह पैसे के लायक लगता है, धन्यवाद।
एलिक्स एक्सल

0

सैस ऐसा लगता है कि यह कुछ सीएसएस सिरदर्द को कम करने के तरीके के रूप में संभावित है।



हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.