એડોબ અનુભવ ડિઝાઇન યુક્તિઓ, ટિપ્સ, અને પઘ્ઘતિ

01 ના 07

એડોબ અનુભવ ડિઝાઇન યુક્તિઓ, ટિપ્સ, અને પઘ્ઘતિ

જ્યારે એડોબએ પર્સનલ પ્રિવ્યૂ તરીકે એક્સપિરિયન્સ ડીઝાઇન રજૂ કર્યું, ત્યારે કંપનીએ તે જ સમયે બે જગ્યાએ આકર્ષક અદ્ભુત કામગીરી કરી. પ્રથમ, તેમણે ઉભરતી પ્રોટોટાઇપિંગ સોફ્ટવેર બજારમાં એક જગ્યા બનાવી. બીજું, તેઓએ વપરાશકર્તાઓને "વર્ક-ઇન-પ્રોગ્રેસ" સાથે રમવાની તક ઊભી કરી અને વપરાશકર્તાઓને તે પ્રગતિને પ્રભાવિત કરવા દેવામાં આવી. હવે થોડા મહિનાઓ માટે એપ્લિકેશન ઉપલબ્ધ છે, મેં વિચાર્યું હતું કે કેટલાક અનુભવ ડિઝાઇન યુક્તિઓ, ટીપ્સ અને ટેકનિક્સ શેર કરવા માટે તે સારો સમય હશે.

પરંતુ પ્રથમ, તમે આશ્ચર્ય થઈ શકે છે પ્રોટોટાઇપિંગ સોફ્ટવેર દ્વારા શું અર્થ થાય છે. આ જગ્યામાં મુખ્ય ખેલાડીઓમાં પ્રોટો.ઓઓ, પ્રિન્સિપલ, યુએક્સપિન, અટોમિક.ઓઓ , એક્સપિરિયન્સ ડીઝાઇન અને ઇનવિઝન છે. સ્ક્રેચ 3, ફોટોશોપ અને ઇલસ્ટ્રેટર જેવા કાર્યક્રમોથી વિપરીત, જ્યાં સ્ટેટિક ડિઝાઇન્સ નિર્માણ કરવામાં આવે છે, આ ગ્રાફિકલ એડિટર્સ આજે મોબાઇલ અને વેબ ડિઝાઇન સ્પેસમાં આંતરક્રિયાઓ, ગતિ અને અન્ય સુવિધાઓ પ્રસ્તુત કરે છે.

વપરાશકર્તાના ઉદ્ભવ સાથે મોબાઇલ અને અનિવાર્ય, લેસર જેવા વપરાશકર્તા પર ધ્યાન કેન્દ્રિત કરવું, થોડા ડિઝાઇન્સને ચાબુક મારવા માટે ડિઝાઇનર માટે પૂરતું નથી, કેટલાક કોમ્પ્સને એક સાથે ખેંચો અને પછી પ્રોજેક્ટને છોડો અથવા તેને વેબ સર્વર પર અપલોડ કરો. યુઆઇ / યુએક્સ વર્કફ્લોમાં મૂળભૂત રીતે વસ્તુઓ બદલાઈ છે. પ્રક્રિયાના દરેક પગલા, વપરાશકર્તા, સ્કેચ, વાયરફ્રેમ્સ, મૉકઅપ્સ અને પ્રોટોટાઇપિંગને ઓળખવાથી હવે વિસ્તૃત વપરાશકર્તા પરીક્ષણને આધીન છે.

તે છેલ્લું તબક્કો છે - પ્રોટોટાઇપિંગ - જ્યાં અંતિમ નિર્માણમાં પ્રોજેક્ટ ખસેડવામાં આવે તે પહેલાં પીડા પોઇન્ટની શોધ અને નિશ્ચિત થયેલ છે. આ તે છે જ્યાં સ્ક્રીન પરની ક્રિયાપ્રતિક્રિયાઓ, ગતિ, સ્ક્રીન સંક્રમણો અને દરેકને પ્લેસમેન્ટ કરવું ખૂબ જ મહત્વપૂર્ણ છે. મુદ્દાઓ અને સમસ્યાઓ ફક્ત સ્થિર છબી તરીકે દર્શાવવામાં આવતી નથી અથવા મૌખિક રીતે સમજાવી શકાતી નથી. છેવટે, આ ઉત્પાદનો વાસ્તવિક માનવો માટે છે તેના તમામ કોડને ખસેડવા કરતાં, પ્રોટોટાઇપિંગ પ્રક્રિયા વધુને વધુ તે હેતુ માટે ડિઝાઇન કરવામાં આવેલ ગ્રાફિક્સ સૉફ્ટવેર દ્વારા કરવામાં આવે છે. કોઈ ભૂલને ઠીક કરવી, ઇમેજને બદલવા, કેટલાક ટેક્સ્ટને ફરીથી લખવું, બટનને ખસેડવાનું અને કોડને સતત પુનર્લેખન અને ડીબગિંગ કરતા દ્રશ્ય સંપાદકનો ઉપયોગ કરવાનું સરળ છે.

હકીકતમાં, આ સોફ્ટવેર આજેના "રેપિડ પ્રોટોટાઇપીંગ" ડિઝાઇન અને ડેવલપમેન્ટ પર્યાવરણમાં મુખ્ય ઘટક બની ગયું છે.

તેના કહેવા પ્રમાણે, ચાલો અનુભવ ડિઝાઇન સાથે કેટલાક મજા કરીએ.

07 થી 02

એડોબ અનુભવ ડિઝાઇનમાં સાદી વર્તુળ સાથે ગંતવ્ય પિન બનાવો

XD નો એક સુઘડ પાસા વેક્ટર ડ્રોઇંગ ટૂલ્સનો તેનો ઉપયોગ છે. ચિહ્ન શોધી શકાતો નથી? કોઇ વાંધો નહી. તમારા પોતાના રોલ. અહીં કેવી રીતે:

1. ધ લાઈપસ ટૂલ પસંદ કરો અને, વિકલ્પ / Alt-Shift કી દબાવવામાં સાથે, વર્તુળ દોરો.
2. પસંદ કરેલ વર્તુળ સાથે, FF0000 માં ભરો રંગ સેટ કરો અને ગુણધર્મોમાં "કંઈ નહિં" માટે બોર્ડર.
3. એન્કર પોઇન્ટ બતાવવા માટે વર્તુળને ડબલ-ક્લિક કરો નીચે એન્કર નીચેની તરફ ખેંચો
4. પસંદ કરેલ એન્કર પોઇન્ટને ડબલ-ક્લિક કરો અને વણાંકો લીટીઓ સાથે બદલવામાં આવે છે.
5. સફેદ ભરણ સાથે કોઈ અન્ય નાના વર્તુળ દોરો અને કોઈ સ્ટૉક નહીં. તેને સ્થાને ખસેડો અને પિન અને વર્તુળને પસંદ કરો પ્રોપર્ટીઝની ટોચ પર સંરેખિત પેનલમાં, આડું કેન્દ્ર બટન પર ક્લિક કરો અને પિન બનાવવામાં આવે છે.

03 થી 07

એડોબ અનુભવ ડિઝાઇનમાં એક પૃષ્ઠભૂમિ બ્લર બનાવો

પૃષ્ઠભૂમિ છબી પર ટેક્સ્ટ અથવા અન્ય સામગ્રી હોવા માટે સામાન્ય છે. આ સમસ્યા અહીંની છબી છે, વધુ વખત નહીં કરતાં, તેની ઉપરની સામગ્રીને વધુ શક્તિશાળી બનાવે છે. આ સમસ્યાને ઉકેલવાનો એક માર્ગ એ પૃષ્ઠભૂમિ છબીને અસ્પષ્ટ કરવાની છે. તમે ફોટોશોપ અથવા અન્ય ઇમેજ એડિટિંગ સૉફ્ટવેરમાં છબીને અસ્પષ્ટ કરી શકો છો, પરંતુ આ અંશે બિનકાર્યક્ષમ છે, ખાસ કરીને કારણ કે XD હવે તમારા માટે આ કાર્યને હેન્ડલ કરી શકે છે. અહીં કેવી રીતે:

1. એક નવી આર્ટબોર્ડ બનાવો અને તમારી પૃષ્ઠભૂમિ છબી ઉમેરો.
2. લંબચોરસ ટૂલ પસંદ કરો અને છબી પર લંબચોરસ દોરો. પસંદ કરેલ લંબચોરસ સાથે, ભરો ટુ વ્હાઇટ અને સ્ટ્રોક ટુ નોબલ સેટ કરો.
3. લંબચોરસ પસંદ કરેલ સાથે, ગુણધર્મો પેનલમાં પૃષ્ઠભૂમિ બ્લર પસંદ કરો . ત્રણ સ્લાઇડર્સનો બ્લર એમાઉન્ટ, બ્રાઇટનેસ અને ઓપેસીટી છે. તેઓ જે કરે છે તે અહીં છે:

• અસ્પષ્ટ રકમ: આકારની નીચે છબીની ઝાંખી ગોઠવે છે મહત્તમ મૂલ્ય +50 છે
• તેજ: છબીમાં હાઇલાઇટ્સ અને પડછાયાઓને સમાયોજિત કરે છે. ન્યૂનતમ મૂલ્ય -50 છે અને મહત્તમ મૂલ્ય +50 છે.
• અસ્પષ્ટતા: આકારની નીચેની છબીની દૃશ્યતા અને આકારની પારદર્શિતાને અસર કરે છે. મૂલ્યો 0% થી 100% સુધીની છે.

જો તમે ખરેખર "વસ્તુઓને સ્વિચ કરો" કરવા માંગો છો, તો આકારનું રંગ બદલી દો અને છબીના "દેખાવ" ને બદલવા માટે અસ્પષ્ટતા મૂલ્ય સાથે રમે છે.

04 ના 07

એડોબ એક્સપિરિયન્સ ડિઝાઇનમાં સ્ક્રિમ બનાવો

એક સામાન્ય ડિઝાઇન સમસ્યા એ છે ઈન્ટરફેસ ઘટકો તત્વોને એક સામાન્ય રંગ હોવો જોઈએ, પરંતુ પૃષ્ઠભૂમિ છબી અથવા નક્કર રંગ પર મૂકવામાં આવે ત્યારે તે ખોવાઈ જાય છે. ઉકેલ એક scrim છે એક સ્ક્રીમ એ કંઈક અંશે અપારદર્શક ઢાળ છે જે ઇન્ટરફેસ ઘટક અને બેકગ્રાઉન્ડ વચ્ચે મૂકવામાં આવે છે. આ XD માં પરિપૂર્ણ કરવું સરળ છે. અહીં કેવી રીતે:

1. XD માં તમારા કલાબોર્ડ બનાવો, એક છબી ઉમેરો અને યોગ્ય UI કિટ - ફાઇલ> ખોલો UI કિટ ... માંથી ઇન્ટરફેસ ઘટકો કૉપિ કરો અને પેસ્ટ કરો ... - આર્ટબોર્ડમાં. ઉપરની છબીમાં ફોટો સ્ટેટસ બાર અને એપ્લિકેશન બારને જોવાનું મુશ્કેલ બનાવે છે.
2. લંબચોરસ ટૂલ પસંદ કરો અને લંબચોરસને દોરો. પ્રોપર્ટી પેનલમાં, રંગ પીકરમાં પૉપ ડાઉનમાંથી ભરો અને ગ્રેડિયેન્ટ પસંદ કરો પસંદ કરો. ઢાળ રંગને બ્લેક અને વ્હાઇટ પર સેટ કરો. એ મૂલ્યને અક્ષમ કરો- અસ્પષ્ટ- 60% અને સફેદ એ મૂલ્ય 0%.
3. લંબચોરસ પસંદ કરેલ સાથે, ઑબ્જેક્ટ> ગોઠવો> બેકવર્ડ મોકલો પસંદ કરો ઈન્ટરફેસ ઘટકો હવે છબી પર દૃશ્યમાન છે.

05 ના 07

એડોબ અનુભવ ડિઝાઇનમાં એક છબી અવતાર બનાવો

એક સામાન્ય ડિઝાઇન પેટર્ન ચેટ એપ્લિકેશન્સમાં જોવા મળે છે જ્યાં લોકો એકબીજા સાથે વાત કરે છે અને સ્પીકરનું ચિત્ર સ્ક્રીન પર દેખાય છે. આ અવતાર સામાન્ય રીતે મૉસ્કેડ થયેલા ચિત્રો છે. તે XD માં મૃત સરળ પરિપૂર્ણ છે અહીં કેવી રીતે:

1. તમે આર્ટબૉર્ડ પર કોઈ છબી અને એક વર્તુળ અથવા અન્ય આકાર સાથે પ્રારંભ કરો છો તમે કોઈપણ રંગ સાથે વર્તુળ ભરી શકો છો. સ્ટ્રોક રંગ ઉમેરવાનું તમારે શું કરવાની જરૂર નથી. જ્યારે તમે અસર બનાવો છો ત્યારે તે અદૃશ્ય થઈ જશે, તેથી શા માટે ચિંતા કરવી. જો તમારે વર્તુળને ખોરકાવવાની જરૂર પડે, તો તેને ક્લિપબોર્ડ પર કૉપિ કરો.
2. વર્તુળને છબી પર ખસેડો અને છબી અને વર્તુળ બન્ને પસંદ કરો. બોટ ઑબ્જેક્ટ પસંદ કર્યા પ્રમાણે, ઑબ્જેક્ટ> માસ્ક આકારો સાથે પસંદ કરો . જ્યારે તમે માઉસ છોડો છો, અવતાર બનાવવામાં આવે છે. ત્યાંથી તમે તેનું કદ બદલી શકો છો.
3. જો તમારે સ્ટ્રોક ઉમેરવાની જરૂર પડે, તો કલાબોર્ડ પર તમારા ક્લિપબોર્ડ પર બેસીને વર્તુળ પેસ્ટ કરો. પસંદ કરેલી કૉપિ સાથે ગુણધર્મોમાં ભરવાનું બંધ કરો અને સ્ટ્રોક રંગ અને પહોળાઈ ઉમેરો. તેમને રેખા કરવા માટે, બન્ને ઑબ્જેક્ટ્સ પસંદ કરો અને ગુણધર્મો પેનલની ટોચ પર સંરેખિત વિકલ્પોમાં કેન્દ્ર સંરેખિત કરો બટન ક્લિક કરો.
4. જો તમે માસ્કમાં ફોટાને ખસેડવા માંગો છો, તો માસ્ક પર ડબલ ક્લિક કરો. આ છબી અને માસ્ક આકાર બતાવશે. છબી પર ક્લિક કરો અને તેને સ્થિતિમાં ખેંચો. જ્યારે તમે માઉસ છોડો છો, ત્યારે છબી માસ્કની અંદર તેની નવી સ્થિતિમાં હશે.

06 થી 07

એડોબ અનુભવ ડિઝાઇન આર્ટબોર્ડ્સ સાથે રમો

એક્સપિરિયન્સ ડિઝાઇન આર્ટબોર્ડ ફક્ત તમારા માટે સામગ્રી મૂકવા માટે નથી. તેઓ, પણ, આયોજિત કરી શકાય છે. અહીં કેટલીક બાબતો છે જે તમે કરી શકો છો:

1. જો તમને કલાબોર્ડની લેન્ડસ્કેપ અને પોર્ટ્રેટ સંસ્કરણોની જરૂર હોય તો, આર્ટબોર્ડનું ડુપ્લિકેટ કરો અને, પસંદ કરેલી ડુપ્લિકેટ સાથે, પ્રોપર્ટીઝ પેનલમાં લેન્ડસ્કેપ બટનને ક્લિક કરો. આર્ટબોર્ડ લેન્ડસ્કેપ ઓરિએન્ટેશનમાં બદલાઈ જશે. જો આર્ટબોર્ડમાં તેમાં સામગ્રી છે, તો કલાબોર્ડનું નામ ક્લિક કરો અને આર્ટબોર્ડ પ્રોપર્ટીઝ ગુણધર્મો પેનલમાં દેખાશે.
2. આર્ટબોર્ડમાં કસ્ટમ રંગ ઉમેરવા માટે, અને તે બાબત માટેનું પ્રોજેક્ટ, ઍર્ટબોર્ડ પસંદ કરો અને પ્રોપર્ટીઝ પેનલના દેખાવ વિભાગમાં ભરો રંગ ચિપ પર ક્લિક કરો. રંગ માટે હેક્સાડેસિમલ મૂલ્ય દાખલ કરો અને + સાઇન પર ક્લિક કરો. રંગ કસ્ટમ રંગ તરીકે ઉમેરવામાં આવશે. તે રંગને બીજે ક્યાંક લાગુ કરવા માટે, ઑબ્જેક્ટ પસંદ કરો અને રંગને લાગુ કરવા માટે કસ્ટમ રંગ ચિપ પર ક્લિક કરો.
3. આર્ટબોર્ડ્સને ઊભી સ્ક્રોલ કરી શકાય છે. આવું કરવા માટે, આર્ટબોર્ડ પસંદ કરો અને તેની ઊંચાઈ ક્યાંતો પ્રોપર્ટીઝ પેનલ્સ પર અથવા નીચેથી આર્ટબોર્ડના તળિયે ખેંચીને બદલો. પ્રોપર્ટીઓ પેનલના સ્ક્રોલ વિસ્તારમાં, પોપ ડાઉન મેનુમાંથી ઊભી પસંદ કરો અને સ્ક્રીન માટે વ્યૂપોર્ટની ઊંચાઈ દાખલ કરો. તે ડેશ કરેલ વાદળી રેખા તમને વ્યૂપોર્ટની નીચે દર્શાવે છે. તેને ચકાસવા માટે, પ્લે બટનને ક્લિક કરો અને દૂર સ્ક્રોલ કરો સ્ક્રોલિંગ બંધ કરવા માટે, સ્ક્રોલિંગમાં કોઈ નહીં પસંદ કરો.

07 07

એડોબ અનુભવ ડિઝાઇનમાં મોબાઇલ UI કીટ સંપાદિત કરો

અનુભવ ડિઝાઇનમાં આઇઓએસ, એન્ડ્રોઇડ અને વિન્ડોઝ યુઆઈઝના વિકાસ માટે UI કિટ છે. જ્યારે તમે સૌ પ્રથમ તેમને ખોલો છો, ત્યારે તમે વિચારી શકો છો કે તેઓ ખૂબ સારી રીતે સ્થાનાંતરિત છે. તદ્દન - તે કિટમાં બીટ્સ અને ટુકડાઓમાંની દરેક નહીં તે સંપૂર્ણપણે સંપાદનયોગ્ય છે. ચાલો Android વાયરફ્રેમ બનાવીને શોધવા દો

1. તમે એન્ટરબોર્ડ સાધન પસંદ કરીને અને પ્રોપર્ટીઝ પેનલના Google વિભાગમાં Android મોબાઇલ પસંદ કરીને શરૂ કરો છો .
2. ફાઇલ> ખોલો UI કિટ> Google સામગ્રી પસંદ કરો આ મટીરીઅલ ડિઝાઇન UI કિટ ખોલે છે. બૃહદદર્શક ગ્લાસ પસંદ કરો અને તે સ્ક્રીન માર્ગદર્શિકાઓના આર્ટબૉર્ડને પસંદ કરો . મને આ એકથી શરૂ કરવાનું ગમે છે કારણ કે તે મને ઇન્ટરફેસ ઘટકોના યોગ્ય ઑન-સ્ક્રીન પ્લેસમેન્ટ માટે માર્ગદર્શિકાઓ આપે છે. જો તમે બ્લુ બારમાંથી એક પર ક્લિક કરો છો, તો તમે જોશો કે તે લૉક છે. તેને અનલૉક કરવા માટે તેમને દરેક સાથે જોડાયેલ લૉક પર ક્લિક કરો . આર્ટબૉર્ડની માર્કી અને પસંદગીને ક્લિપબોર્ડ પર કૉપિ કરો. તમારા દસ્તાવેજ પર પાછા ફરો અને સ્ક્રીનને તમારા આર્ટબોર્ડમાં પેસ્ટ કરો
3. એપ્લિકેશન બાર પર એકવાર ક્લિક કરો કે જે આર્ટબોર્ડની ટોચ છે. નોંધ લો કે તમે તેને કેવી રીતે પસંદ કરી શકો છો. ઑબ્જેક્ટ> ગોઠવો> ફ્રન્ટ પર લાવો પસંદ કરો. તમારી પસંદગી હવે સ્ક્રીન માર્ગદર્શિકાઓ ઉપર છે આ તમને સ્ક્રીન પરનાં દરેક ઘટકોને સંપાદિત કરવા માટે સક્ષમ બનાવવું જોઈએ.
4. ટોચ પર સ્ટેટસ બારને ડબલ પર ક્લિક કરો અને, ગુણધર્મો પેનલ્સ અને ભરો રંગને 455A64 પર ક્લિક કરો . એપ્લિકેશન બાર પર ડબલ ક્લિક કરો અને તેની ભરણ 607D8B પર સેટ કરો. આનાથી તમને જણાવવું જોઈએ કે UI કીટમાં દરેક ઘટક પ્રોજેક્ટના રંગની વિશિષ્ટતાઓને પહોંચી વળવા માટે સંપાદિત કરી શકાય છે.
5. ચિહ્નો વિશે શું? અહીં તેનું રંગ કેવી રીતે બદલવું તે અહીં છે. તેને પસંદ કરવા માટે હૃદય પર ડબલ ક્લિક કરો. જો તમે પ્રોપર્ટીઝ પેનલમાં જુઓ છો, તો તમે એમ ધારી શકો છો કે તમે પસંદગીને સંપાદિત કરી શકતા નથી. તદ્દન. હૃદયને વધુ એક વખત ડબલ ક્લિક કરો પ્રોપર્ટીઝ ખુલ્લા છે અને તમે FF0000 માં ભરણ રંગને બદલી શકો છો. બાકીના ચિહ્નો અને ટેક્સ્ટ માટે આ બેવડું ક્લિક કરો ટ્રિકને પુનરાવર્તન કરો.