01 को 03
नवीनतम Atomic.io अपडेट मा स्क्रॉल योग्य कंटेनर शामिल छ
केही महिनापछि मैले प्रोटोटाइप गतिमा परमाणुइको प्रयोग कसरी गर्न सक्थे । म टुक्रामा बनाइएको मुख्य बिन्दुहरू मध्ये "ग्राहकलाई प्रदर्शन" को रूपमा यो छोडेर ग्राहकलाई वा छविको कल्पना छोड्नु भन्दा महत्त्वपूर्ण छ। वास्तवमा, यो धेरै महत्वपूर्ण भएको छ कि UX / UI उपकरणहरूको सम्पूर्ण नयाँ श्रेणी दृश्यमा देखा पर्दछ। यसमा समावेश छ - एप्पल कुञ्जी, एडोबको एनिम एनिमेसन , प्रभाव पछि र UXPin , केहि नाम गर्न। ब्लकमा नयाँ बच्चा एटमिक.ओ यो खुला बिटामा भएको थियो जब मैले पहिले उत्पादनको बारेमा लेखे।
खुला बिटाको बारेमा स्वच्छ कुरा भनेको तिनीहरू सफ्टवेयर निर्माताले सुविधा सेटमा प्रयोगकर्ता प्रतिक्रियाहरू इकट्ठा गर्ने मौका प्रदान गर्छन्, हराएका सुविधाहरू सहित, र त्यसपछि उनीहरूलाई अनुप्रयोगमा थप गर्नुहोस् र व्यापारिक रिहाई गर्नुअघि परीक्षण गरेका छन्। परमाणुको अवस्थामा, एउटा सुविधा जुन म साँच्चै छुटेको थियो ऊ ठाडो वा तेर्सो रूपमा सामग्री स्क्रोल गर्ने क्षमता थियो। यसले कार्डहरू, स्लाइड शो वा व्यावहारिक रूपमा केहि पनि समावेश गर्न सक्छ जुन प्रयोगकर्ताले एपको वा साइटको इन्टरफेसको सीमा भित्र स्वाइप गर्दछ वा ड्र्याग गर्दछ।
यो विषयको लागि धेरै प्रयोगकर्ताहरू हुनुपर्दछ किनभने स्क्रोल योग्य कंटेनरहरू यो महिनाको एपमा पेश गरिएको थियो र, मलाई स्वीकार्न चाहन्छु, प्रोटोटाइपमा स्क्र्रोल योग्य सामग्री सिर्जना गर्न मर्न सरल छ।
यहाँ कसरी छ ...
02 को 03
कसरी परमाणु स्क्रोलिङ सामग्री सिर्जना गर्ने परमाणुमा
तपाईंलाई नि: शुल्क 30-दिन परीक्षणको लागि पहिलो साइन अप गर्न आवश्यक हुन्छ र, त्यस अवधिको अन्त्यमा तपाईलाई तीन मूल्य निर्धारण योजनाहरू प्रस्तुत गरिनेछ।
तपाईंले जान्नु पर्ने पहिलो कुरा हो जुन तपाइँले गरिरहनुभएको सबै काम ब्राउजरमा छ र एप्सले Google क्रोममा कडा उद्देश्य राखेको छ। एकपटक तपाई लग इन भएपछि, तपाईंलाई परियोजना पृष्ठमा लगाइनेछ। एप खोल्नको लागी, नयाँ परियोजना बटन क्लिक गर्नुहोस्।
जब इन्टरफेसले देख्नेछ तब त्यहाँ सीमित उपकरणहरू छन्, पृष्ठहरूमा पृष्ठहरू र लेयरहरू थप गर्ने क्षमता, कलाबोर्ड र, दाँया माथि, एक सन्दर्भ-संवेदनशील गुण प्यानल।
यस उदाहरणमा, मैले आईफोन 5 प्रीसेटसँग 320 x 568 को साथ सुरू गरेँ। त्यसपछि फोल्डरमा स्क्रोल गरिएको फोल्डरमा खोल्नुहोस् र तिनीहरूलाई क्यानभासमा घुमाउनुहोस्। तिनीहरू स्वचालित रूपमा यो परियोजनामा थपिएका थिए र तपाईँले तह तहमा क्लिक गर्नुहुँदा तिनीहरू व्यक्तिगत तहमा छन्। मैले त्यसपछि तीर उपकरण चयन (चयन) चयन गरें, छवि छान्नुभयो र तिनीहरूलाई बीच केही स्पेस थप्नको लागि नयाँ स्थितिमा तान्नुभयो। मैले त्यसपछि सबै तस्बिरहरू चयन गरे र उपकरणपट्टीमा ठाडो रूपमा वितरित बटन क्लिक गर्नुहोस् । यो समान तस्वीरहरु स्पेस गरियो।
अर्को चरण स्क्रोल गरिएको सबै सामग्री चयन गर्न र कन्टेनर बटन क्लिक गर्नुहोस् वा समूह बटन पप डाउनबाट स्क्रिन कन्टेनर सिर्जना गर्नुहोस् । एकपटक कन्टेनर सिर्जना गरिसकेपछि तपाईले लेयर प्यानलमा हेर्नुहुनेछ - कन्टेनर क्लिक गर्नुहोस् र क्यान्सरको तलको तलल्लो ह्यान्डल तान्नुहोस् । गुणस्तर प्यानलको तलमा पूर्वावलोकन बटनमा क्लिक गर्नुहोस् र यसले ब्राउजर सञ्झ्याल सुरु गर्नेछ। सामग्री स्क्रोल गर्नको लागि आफ्नो माउसको स्क्रिन व्हील प्रयोग गर्नुहोस्। तपाईंको प्रोजेक्टमा फर्काउन ब्राउजर सन्झ्यालको दाँयामा सम्पादन बटनमा क्लिक गर्नुहोस् ।
03 को 03
एटमिकमा क्षैतिज स्क्रोलिङ सामग्री सिर्जना गर्ने
क्षैतिज स्क्रोलिङ भर्खरै सजिलो छ।
यस अवस्थामा, क्यान्सरमा एक श्रृंखला को श्रृंखला घुमाईयो र एकअर्का विरुद्ध तिनीहरूलाई छोयो। छवियों को चयन संग, म तब शीर्ष पङ्क्तिबद्ध बटन मा क्लिक गर्नुहोस ताकि उनि सबै एक-दूसरे संग गठबंधन गर्न को लागी।
त्यसपछि मैले शिफ्ट कुञ्जी तल राखें र लेयर प्यानलमा प्रत्येक तह चयन गरें। छवियों को चयन संग, म कंटेनर बटन मा क्लिक गरे र , गुण पैनलों मा, व्यवहार को क्षेत्र मा क्षैतिज रूप देखि चयन गरियो।
त्यसपछि मैले पूर्वावलोकन बटनमा क्लिक गरेर ब्राउजर सञ्झ्यालमा परियोजना परीक्षण गरे।
यद्यपि मैले ऊर्ध्वाधर र क्षैतिज स्क्रॉलको व्यक्तिगत संस्करण कसरी बनाउने भनेर देखेको छु, जब सम्म तपाईले एक कन्टेनर सामग्रीलाई एक कन्टेनरमा राख्नुभयो, तपाईले यी कन्टेनरहरू स्क्रिनको अलग-अलग क्षेत्रमा राख्न सक्नुहुन्छ। उदाहरणको लागि, वेब पेजले एक साइड मेनुमा ठाडो स्क्रॉल गर्न सक्दछ र त्यहि पृष्ठमा एक स्लाइड शोमा तेर्सो स्क्रॉल गर्ने सामग्री हुन सक्छ। वास्तवमा, कन्टेनरले वस्तुहरूको लागि ठाडो र क्षैतिज स्क्रोलिङ दुवैसँग हुन सक्छ जसमा छवि पिकर जसमा दर्जन वा थम्बनेलहरू छन्।
यो सुविधाको बारेमा थप जानकारीको लागि atomic.io जाँच गर्नुहोस्:
- ब्लग घोषणा
- स्क्रोलिङ कन्टेनर ट्यूटोरियल
- कन्टेनरहरू प्रयोग गरेर मास्क गर्दै
- समस्या निवारण स्क्रोलिंग कंटेनर