Google बाट सामग्री डिजाइन निर्दिष्टीकरण मूलतः एन्ड्रोइड प्लेटफर्मको उद्देश्य थियो जसको प्लेटफर्ममा डिजाइनको स्थिरता सुझाव छ।
01 को 06
Adobe अनुभव डिजाइन सीसीमा सामाग्री सामाग्री कार्ड कसरी बनाउने?
एक पटक डिजाइनरहरूले यसको माध्यमबाट पोक गर्न थाले र पछिको सोचलाई बुझ्न, सामग्री डिजाइनमा चुपचाप वेब र मोबाइल डिजाईनमा सबैभन्दा प्रभावशाली भिजुअल दर्शनहरू मध्ये एक हो। तपाईलाई हामीले के गर्दैछौं हेर्न चाहने को आवश्यकता छ Pinterest मा एक सामग्री डिज़ाइन खोजी र तपाईं सैकड़ों उदाहरणहरू देख्नुहुनेछ र यन्त्रहरू, ट्याब्लेट्स र यहाँ वेबसाइटहरूमा प्रयोगहरू देख्नुहुनेछ।
सामाग्री डिजाइनको आकर्षक पहलू हो यो Google को विचार कसरी अनुप्रयोगहरू देखा पर्दछ र मोबाइल यन्त्रहरूमा काम गर्दछ तर अवधारणाहरू कुनै पनि प्लेटफार्ममा कुनै आकारको कुनै पर्दामा लागू गरिन्छन्। Google को निर्दिष्टीकरणको सुरुवात अनुच्छेदमा बताइएको छ, "हामीले आफैलाई चुनौती दिएका छौं जुन हाम्रो प्रयोगकर्ताहरूका लागि भिजुअल भाषा सिर्जना गर्दछ जुन नवाचार र टेक्नोलोजी र विज्ञानको सम्भावनासँग राम्रो डिजाइनको क्लासिक सिद्धान्तहरू समिकरण गर्दछ। यो भौतिक डिजाइन हो। यो कल्पना एक जीवित कागजात हो जुन हामीले डिजाइन र सामग्री डिजाइनको विवरणहरू विकास गर्न जारी राख्नेछौं। "
सामग्रीको बारेमा, सामान्यतया सामान्यतया, कागज हो र सामग्री डिजाइनको होस्ट कार्ड हो। एउटा सतहमा सूचकांक कार्डको बारे सोच्नुहोस् र तपाईं सही पङ्क्तिमा हुनुहुन्छ। एक कार्ड एक तत्व हो जुन फोटोहरू, भिडियोहरू, पाठ लिङ्कहरू र यति समावेश गर्दछ तर तर तिनीहरू धेरै अन्तरक्रियात्मक डिजाइनहरूबाट भिन्न हुन्छन् भने तिनीहरू एक विषयमा फोकस गर्न चाहन्छन्। कार्डहरू गोल गरिएका छन्, बेहोश छायाहरू समावेश छन् जुन तिनीहरू सतहभन्दा माथि छन् र यदि तिनीहरू सबै उही विमानमा छन् तिनीहरू तिनीहरूलाई "संग्रह" भनिन्छन्।
यस "कसरी गर्ने" मा हामी कल्पनामा आधारित कार्ड सिर्जना गर्न जाँदैछौँ। विभिन्न इमेजिङ र चित्रकारी उपकरणहरूको साथ कार्ड सिर्जना गर्नुको सट्टा, हामी यो फरक दिशाबाट आउनेछौं। हामी एडोबको अनुभव डिजाइनमा उपकरणहरू प्रयोग गर्न जाँदैछौं जुन वर्तमान मा म्याकिन्टोस-मात्र सार्वजनिक पूर्वावलोकनमा रहेको छ र निःशुल्क छ। तपाइँ यसलाई यहाँ डाउनलोड गर्न सक्नुहुन्छ।
सुरू गरौं।
02 को 06
एडोब अनुभव डिजाइन सीसीमा प्रोटोटाइप कलाबोर्ड सिर्जना गर्दै
एन्ड्रोइड स्क्रिनमा अनुभव डिजाइन सीसी (एक्सडी) बाट सुरु स्क्रिन सिर्जना गर्न कुनै स्पष्ट तरिका छैन। एक्सडी खोल्ने क्रममा हामीले के गर्न प्रयोग गर्यौँ, आईफोन 6 विकल्प छान्न र, जब इन्टरफेस खुल्छ, हामी उपकरणपट्टीको तलमा आर्टबोर्डबोर्ड उपकरण छान्नुहोस् र दायाँतिर गुण प्यानलमा चयनबाट Android मोबाइल चयन गर्नुहोस् । त्यसपछि हामी चयन उपकरणमा स्विच गर्छौं, आईफोन आर्टबोर्डबोर्डको नाममा एकपटक क्लिक गर्नुहोस् र कलाबोर्ड मेटाउनुहोस्। थप होइन।
XD को हालको संस्करणमा, आईफोन 6 को छेउमा सानो सानो तीर छ, जब क्लिक गरेमा, ड्रप-डाउन मेनु खोल्छ। त्यहाँबाट तपाइँ इन्टरनेट मोबाइल संस्करण चयन गर्नुहोस् र एन्ड्रोइड मोबाइल कलाबोर्ड चयन गरिएको इन्टरफेसमा खोल्छ।
कार्डको लागि उचित स्क्रिन स्थान खुला छ भन्ने सुनिश्चित गर्न, हामी प्राय: स्केच 3 मा टाउको र कलाबोर्डमा सामाग्री डिजाइन टेम्प्लेटबाट स्टेटस बार, नेभिगेसन र एप पट्टी प्रतिलिपि र टाँस्नुहोस्। स्केच 3.2 एक सामग्री डिजाइन टेम्प्लेट ( फाइल> टेम्पलेट> सामग्री डिजाइनबाट नयाँ ) र अर्को वास्तवमा राम्रो नि: शुल्क एक केडी लिबेबर्टको हो जुन तपाई यहाँ प्राप्त गर्न सक्नुहुनेछ। यदि तपाईंसँग स्केच छैन भने, तपाईँले फाइल> ओपन यूआई किट> Google सामग्रीमा फेला पार्न XD स्टिकरहरूबाट प्रतिलिपि र पेस्ट गर्न सक्नुहुनेछ। तपाईं तिनीहरूलाई Google बाट फोटोशॉप, इलस्ट्रेटर, प्रभाव र स्केच पछिको लागि डाउनलोड गर्न सक्नुहुन्छ।
03 को 06
एडोब XD सीसी आर्टबोर्डमा सामग्री डिजाइन कार्ड थप्दै
XD को सबैभन्दा धेरै उपयोगी सुविधाहरू एप्पल आईओएस, Google सामग्री र माइक्रोसफ्ट विन्डोजका लागि यूआई किट्स समावेश छन्। धेरै सन्दर्भमा, तिनीहरू "रैपिड" शब्द "रैपिड प्रोटोटाइप" शब्द जोड्दछन्। साथै, तिनीहरू डिजाइनरको कामलाई सजिलो बनाउँदछ कि सामान्य यूआई तत्वहरू लगातार डिजाइन डिस्प्ले अनुप्रयोग जस्तै फोटोशप, इलस्ट्रेटर वा पुन: स्केच।
यूआई तत्व चाहिन्छ हामी कार्ड थियो। यसलाई प्राप्त गर्न हामीले फाइल चयन गर्नुहोला> खुला UI किट> Google सामग्री र किट नयाँ कागजातको रूपमा खोलियो। हामी आवश्यक आवश्यक तत्व कार्ड कार्डमा फेला पर्यो।
हामी यी बारे मा के प्रेम गर्दछौं कि उनि सामाग्री डिजाइन विनिर्देश को पालन गर्दछ जस्तै सामाग्री ब्लाकों को चश्मे को रूप मा राम्रो तरिकाले पाठ स्वरूपण र स्पेसिंग चश्मा मा राखिएको छ जसमा टाइपोग्राफी युक्ति मा राखिएको छ।
हामी चाहेको कार्ड शैली तल बायाँमा एक थियो। हामी सजिलै यो हाम्रो माछा संग मार्छौं र क्लिपबोर्डमा प्रतिलिपि बनाउँछौं। दुर्भाग्यवश, XD मा खुला कागजातहरूको लागि ट्याबबेड इन्टरफेस समावेश छैन। हामी के गर्छौं, हामी खुला काम गरेर खोलिएको खुला कागजात सञ्झ्याल सार्नको लागि, यो चयन गर्नुहोस् र पेस्ट गर्नुहोस्। खुला XD कागजातहरू बीच छिटो स्विच गर्ने अर्को तरिका आदेश- 'थिच्नु हो। '
04 को 06
एडोब अनुभव डिजाईन सीसीमा सामाग्री सामग्री तत्व को कसरि संपादित गर्नुहोस
जब एक्सडीमा कार्ड क्लिपबोर्डबाट आउँछ तब मात्र यो संग काम सुरु गर्दैन। तपाईंले गर्नु पर्ने पहिलो कुरा भनेको कार्डलाई समेट्नु हो किनकि तपाईंलाई बिटमा पहुँच गर्न र टुक्रा टुक्रा गर्न कार्ड चाहिन्छ। यो गर्नका लागि, कार्ड चयन गर्नुहोस् र वस्तु> समूह को चयन गर्नुहोस् वा Shift-Command-G थिच्नुहोस्।
तपाईंको कार्ड अब तीन टुक्राबाट बनाइएको छ:
- तस्विरका लागि हल्का खैरो बक्स।
- पाठको लागि मध्यम ग्रे बक्स
- ब्याक बक्स पृष्ठभूमिको रूपमा प्रयोग गरियो।
पहिलो चरणलाई हल्का खैरो बक्स मेटाउन हो। यसको मात्र उद्देश्य भनेको छविको लागि प्लेसहोल्डरको रूपमा कार्य गर्नु हो जुन तपाईले चयन गर्नुहुन्छ भने, वैकल्पिक।
पाठको साथ बक्स वास्तव मा एक अँध्यारो ग्रे 50% अस्पष्टता संग छ। यो बाकस पाठ पृष्ठभूमिको रूपमा प्रयोग गर्न सकिन्छ र तपाईले रङ र बक्सको अस्पष्टता परिवर्तन गर्न सक्नुहुनेछ।
यद्यपि यो तुरुन्तै स्पष्ट छैन, हल्का खैरो बाकस सामग्री डिस्प्ले युनिको पछि लाग्दछ जुन यसको माथिल्लो क्यान्सर 2 पिक्सेलमा घटेको छ। यदि तपाईं एक छवि थप्दै हुनुहुन्छ भने यो मनमा राख्नुहोस्। यसले गोल्ड कोनेलाई पनि जुन इमेजिङ अनुप्रयोगमा वा XD मा थप्न सकिन्छ।
यो कसरी कार्डको बाँकी अवस्था हो भनेर हेर्दै यो पनि छायाँको आवश्यकता पर्दछ। कल्पनाले यो स्पष्ट गर्दछ कि 2 पिक्सेलको कार्डको बाँकी उचाई छ। यो थप्नका लागि, कालो पृष्ठभूमि आकार चयन गर्नुहोस् र गुणस्तर कक्षमा Y र B (ब्लर) मानहरू 2 लाई सेट गर्नुहोस्।
05 को 06
Adobe XD CC मा सामग्री डिजाइन कार्डमा छवि कसरी थप्नुहोस्
कार्ड ठेगाना 344 पिक्सल चौडाई छ र छवि क्षेत्र 150 पिक्सेलको छ ( हल्का खैरो आधा उचाईको उचाई ) हामी फोटोमा फोटो खिच्यौं, यसलाई आकारमा फ्याँकिएको र यसलाई @ 2x विकल्पको प्रयोग गरी फोटोशॉपको निर्यातको रूपमा संवादमा सुरक्षित गरियो। बक्स। छवि एडोब एक्सडीमा आयात गरिएको थियो।
त्यसपछि हामीले अघिल्लो पछाडिको छविमा हल्का खैरो बक्स तान्नुभयो र वस्तु वस्तु> मास्कसँग आकार चयन गर्नुभयो। नतिजा छवि थियो आकारको गोल कोनेहरू। त्यसपछि हामी छविलाई यसको अन्तिम स्थितिमा सारियो।
ठाँउमा छविको साथ, हामी फेरि मध्यम सेतो बक्सको पृष्ठभूमि रङ परिवर्तन गर्यौं, पाठ परिवर्तन गरी लिङ्क पाठको रङ।
06 को 06
एडोब XD सीसी ग्रिड फीचर प्रयोग गर्दै
कार्ड पूरा भएपछि यो अब सामग्री डिजाईन नमूने अनुसार ठीकसँग राखिएको छ। यसको अर्थ त्यहाँ कार्डको छेउमा 8 पिक्सलहरू छन् र कार्ड एप पट्टीको तल 8 पिक्सेलको आवश्यकता पर्दछ। यो गर्नका लागि, एक तर्फबाट कलाबोर्ड नाममा क्लिक गर्नुहोस् र, गुण प्यानलमा, ग्रिड चयन गर्नुहोस्। ग्रिडले आर्टबोर्डमा देखा पर्यो।
पूर्वनिर्धारित ग्रिड आकार 8 पिक्सेल हो जुन सामग्री डिजाइनको लागि उही ग्रिड आकार हुने हुन्छ .यदि तपाईंलाई फरक साइज चाहिन्छ भने ग्रिड क्षेत्रमा मान परिवर्तन गर्नुहोस्। यदि तपाइँ ग्रिडको रंग परिवर्तन गर्न चाहनुहुन्छ भने, रङ चिपमा क्लिक गर्नुहोस् र परिणामकारी रङ पिकरबाट रङ छनौट गर्नुहोस्।
ग्रिड दृश्यात्मक रूपमा, कार्डमा क्लिक गर्नुहोस् र यसको अन्तिम स्थितिमा सार्नुहोस्।
समाप्त गर्न, हामीले कार्ड चयन गर्नुभयो, दोहोरी ग्रिड बटनमा क्लिक गर्यौं र कार्डहरू बीच 8 पिक्सेलमा पनि स्पेसिंग परिवर्तन गर्नुभयो।