Back to Question Center
0

ફોર્મ લેઆઉટ ડિઝાઇનિંગ: સંરેખણ            ફોર્મ લેઆઉટ ડિઝાઇનિંગ: સંરેખણવિસ્તૃત વિષયો: મોબાઇલ મીમટાલ

1 answers:
ફોર્મ લેઆઉટ ડિઝાઇનિંગ: સંરેખણ

નીચેના અમારા પુસ્તક, ડિઝાઇનિંગ યુએક્સ: ટૂંકા અર્ક છે, ફોર્મ્સ, જેસિકા એન્ડર્સ દ્વારા લખાયેલી. અસરકારક યુએક્સ ડિઝાઇનનો ચાવીરૂપ ભાગ ડિઝાઇન રચના માટે અંતિમ માર્ગદર્શિકા છે. સાઇટપેઇન મીમટ સભ્યો તેમના સભ્યપદ સાથે પ્રવેશ મેળવે છે, અથવા વિશ્વભરમાં સ્ટોર્સમાં તમે એક કૉપિ ખરીદી શકો છો.

તમે અને એક મિત્ર રાત્રિભોજન માટે દરેક રેસ્ટોરન્ટમાં ડ્રાઇવિંગ છે તમારા બન્ને માર્ગો બે લીન સાથે હાઈવેથી નીચે જાય છે - alojamiento web gratuito comparativa seguros. હાઇવે સમાન લંબાઈ છે. તમારા રૂટ પર, બધી ધીમી કાર યોગ્ય વસ્તુ કરી રહી છે અને એક લેન પર ચોંટી રહે છે, જેથી તમે અન્યમાં ભૂતકાળમાં ઝટકો લાવી શકો. તમારા મિત્રના માર્ગ પર, ધીમી કાર હાઇવેના બન્ને લેનમાં ફેલાયેલી છે, તેથી તેણીને અંદર અને બહાર વણાટ કરવાની જરૂર છે. તમારામાંના એકને પહેલા રેસ્ટોરન્ટમાં મળશે?

પૂર્ણ કરવા માટે વર્ટિકલ પાથ

એક સીધા, અવિભાજિત માર્ગ ડ્રાઇવિંગ માટે સૌથી ઝડપી છે, અને ફોર્મ ભરવા માટે પણ. તેથી તમારું આગલું પગલું ઊભું કરીને તમારા બધા ફોર્મ ફીલ્ડ્સને, તેમજ પૃષ્ઠ પરનું મુખ્ય બટન (જેને પ્રાથમિક ક્રિયા બટન કહેવામાં આવે છે):

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

એકબીજાના પ્રશ્નો ન બનો

કારણ કે પૂર્ણ કરવા માટે ઊભી પથ લાંબા સમય સુધી ફોર્મ બનાવે છે, તો તમે કદાચ એકબીજાના કેટલાક પ્રશ્નોને સ્ક્વિઝ કરવા લલચાવી શકો છો:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

આ ફોર્મમાં, સિક્યોરિટી કોડ અને પોસ્ટલ કોડના પ્રશ્નો અન્ય પ્રશ્નો

ઉપરાંત મૂકવામાં આવ્યા છે.

નીચેના કારણોસર આ એક ખરાબ વિચાર છે:

  • તે ફોર્મ દ્વારા સરળ પ્રવાહને વિક્ષેપિત કરે છે (તમારા ફાસ્ટ લેનમાં તૂટેલા કારની જેમ)
  • વપરાશકર્તાઓ વારંવાર જમણા બાજુ પર પ્રશ્ન જોઈ શકતા નથી, કારણ કે તે તેમની દ્રષ્ટિના ધ્યાનથી બહાર છે (આ ફક્ત નવ અક્ષરોની વિશાળ છે).
  • તે ફોર્મ બંને મોટા અને નાના સ્ક્રીનો પર seamlessly કામ કરવાથી અટકાવે છે. (આ ટૂંક સમયમાં વધુ.)

વધુમાં, જેમ તમે પ્રકરણ 3 થી યાદ કરી શકો છો, વપરાશકર્તાઓ માટે જોવામાં આવે છે ફોર્મની લંબાઈ, નહીં કે વાસ્તવિક લંબાઈ, તે બાબતો પૂર્ણ કરવા માટે ઊભી પથ ફોર્મ માત્ર નિરપેક્ષપણે ઝડપી ભરીને બનાવે છે, પરંતુ તે ઝડપી ઝડપી લાગે છે

ઉત્તર ક્ષેત્રો ગોઠવણી

તમે કેટલીક વખત જગ્યા બચાવવા માટેનો એક રસ્તો, ઉત્તર ક્ષેત્રો સાથે છે માર્કેટિંગ સંમતિ પ્રશ્ન માટે જવાબ ક્ષેત્રો જુઓ:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

હકીકતમાં, જન્મ તારીખ પણ નાના જવાબ ક્ષેત્રો સાથે એક પ્રશ્ન છે. તમને કદાચ લાગ્યું હશે કે અમે તેમને એક લીટી પર મૂકી દીધું છે:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

જો આપણે ઉત્તરના ક્ષેત્રોનો લાંબા સમય સુધી સમાંતર સેટ કરીએ છીએ, તો અમે મોટા સ્ક્રીનો

પર પણ આડી સ્ક્રોલબારની ખાતરી કરી શકીએ છીએ.

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

જો અમારા જવાબના ક્ષેત્રો નાના ના હોય, તો તે વધુ સંભવ છે કે અમે આડી સ્ક્રોલબારને મોબાઇલ પર દેખાશે.

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

રેડિયો બટન અથવા ચેકબોક્સના સેટની ઉભા ગોઠવણી મોબાઇલ પર પણ કામ કરે છે.

લેબલ પ્લેસમેન્ટ

અમારા ફોર્મને મોબાઈલ દૃશ્યમાં સમસ્યા છે, જે તમે ઉપરનાં કેટલાંક વર્ણનો પરથી જોઈ શકો છો. નાના સ્ક્રીન પર, ફોકસ ટેક્સ્ટ બોક્સમાં હોય ત્યારે, અનુરૂપ લેબલ દૃશ્યમાન નથી, જેમ કે આ ઉદાહરણ:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

ડાબી બાજુના લેબલ્સ શરૂઆતમાં જોવામાં આવે છે પરંતુ જ્યારે વપરાશકર્તા ફોર્મ ભરવાનું શરૂ કરે છે ત્યારે અદૃશ્ય થઈ જાય છે.

અમે હંમેશાં ક્ષેત્રોની ઉપરના લેબલ્સને મુકીને આ સમસ્યાને ટાળી શકીએ છીએ. પરંતુ આ એક નવી સમસ્યા ઊભી કરે છે: ફોર્મ ખૂબ દૃષ્ટિની બને છે.

અહીં તે મોટી સ્ક્રીન પર કેવી રીતે દેખાશે તે અહીં છે:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

ફોર્મ્સ લાંબા સમય સુધી હોય છે જ્યારે લેબલ્સ ક્ષેત્રની ઉપર સ્થિત થયેલ હોય છે.

તમારે શું કરવાની જરૂર છે તે ફોર્મનો કોડ છે પ્રતિભાવ . સ્ક્રીન મોટી હોય ત્યારે, લેબલ્સ ક્ષેત્રોની ડાબી બાજુએ જવું જોઈએ; જ્યારે સ્ક્રીન નાની હોય છે, ત્યારે લેબલો ફીલ્ડ્સ ઉપર જવા જોઈએ. આ રીતે, અમે મોટી સ્ક્રીનો પર જગ્યાનો ઉપયોગ કરીએ છીએ, જ્યારે ફોર્મની ખાતરી કરવાનું પણ નાની સ્ક્રીન પર ભરી શકાય છે.

જો આપણે અમારા ઉદાહરણ ફોર્મને પ્રતિભાવ આપવા માટે કોડ કરીશું, તો તે આ રીતે તે મોબાઇલ પર જોશે:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

મોબાઇલ પર, લેબલ્સ ક્ષેત્રોની ઉપર સ્થિત થયેલ છે, જેથી જ્યારે તમને તેની જરૂર હોય ત્યારે તે દૃશ્યક્ષમ હોય છે.

આ રીતે તે મોટી સ્ક્રીન પર દેખાશે:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

અહીં પ્રતિભાવ સ્વરૂપ લેબલ્સનું એક વાસ્તવિક દુનિયાનું ઉદાહરણ છે- પ્રથમ ફોર્મનું મોટું સ્ક્રીન વર્ઝન, પછી નાના સ્ક્રીન:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

મોટા સ્ક્રીનો પર, લેબલો ક્ષેત્રોની ડાબી બાજુએ છે, તેથી ફોર્મ સરસ અને ટૂંકા દેખાય છે

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

નાના સ્ક્રીનો પર, લેબલ્સ ફીલ્ડ્સ ઉપર છે, તેથી તેઓ હંમેશા દૃશ્યમાં રહે છે.

શું તે અભ્યાસ?

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

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

ગટર અવગણી

પહેલેથી જ શું કહેવામાં આવ્યું છે તે ઉપરાંત, તમારા ક્ષેત્રોની ડાબી તરફ લેબલો હોય ત્યારે તમે તમારા ફોર્મની ઉપયોગીતા વધારી શકો છો. આ તકનીકો લેબલ્સ અને તેમના જવાબના ક્ષેત્રો વચ્ચે મોટી "ગટર" દેખાતી અટકાવવા માટે મહત્વપૂર્ણ છે:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

અમારા ઉદાહરણ ફોર્મ પર ઘણા પ્રશ્નો માટે, લેબલ અનુરૂપ જવાબ ક્ષેત્રો દૂર છે.

આ અંતરાલ વપરાશકર્તાઓને તેમના જવાબ ક્ષેત્રો સાથે લેબલ્સને સાંકળવા માટે મુશ્કેલ બનાવે છે.

જો લેબલો મોટે ભાગે ટૂંકા હોય, તો તમે તેમને ફ્શ કરી શકો છો, જેથી તેઓ ક્ષેત્રોની બાજુમાં આવે:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

લેબલ્સ ફ્લશ અધિકાર સુયોજિત.

જો લેબલ્સ મોટેભાગે લાંબી છે, તો તેઓ વાંચવામાં સખત મહેનત કરે છે જો તે યોગ્ય લાગણીમાં હોય. આ કિસ્સામાં, તેમને ફ્લશ સેટ કરો (સામાન્ય ટેક્સ્ટની જેમ) પરંતુ તમારા ફોર્મમાં ઝેબ્રા સ્ટ્રિપિંગ ઉમેરો:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

ઝેબ્રા લેબલ્સ પાછળ સ્ટ્રિપિંગ ફ્લશ બાકી સુયોજિત.

ઝેબ્રા સ્ટ્રિપિંગ તમે દરેક બીજા પ્રશ્ન પાછળ જુઓ ચંચળ શેડિંગ છે. તે આંખને લેબલને ક્ષેત્ર સાથે જોડવા માટે મદદ કરે છે (જેમ કે એક અભ્યાસ દ્વારા દર્શાવવામાં આવ્યું છે કે હું જ્યારે પાછો ફર્યો હતો, અને તેનું અનુવર્તી કર્યું).

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

ક્ષેત્રોની ડાબી ધાર સાથે પ્રાથમિક ક્રિયા બટન લીટીઓની ડાબી બાજુની ધાર.

મલ્ટીસ્ટેપ ફોર્મ્સ

જો તમારો ફોર્મ બહુવિધ પગલાંઓ પર જાય તો, તમારે વપરાશકર્તાને પગલાંઓ વચ્ચે ખસેડવા માટે બટન્સ આપવાની જરૂર પડશે. એક વિકલ્પ એ છે કે આગળનાં બટન ક્ષેત્રો સાથે વાક્યમાં રાખવું, અમારા એક-પગલા સ્વરૂપો સાથે સુસંગત છે:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

ત્યારબાદ આપણી પ્રાથમિક ક્રિયા છે, તેથી તે ક્ષેત્રો સાથે ઊભા રૂપે ગોઠવાયેલ છે

બીજો વિકલ્પ ડાબી બાજુના આગળના બટનને અને પાછલા બટનને (એક અંગ્રેજી બોલતા પ્રેક્ષકો માટે) મૂકવાનો છે:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

અંગ્રેજી બોલનારાઓ ખાસ કરીને આગળ ધપાવવાના અધિકાર તરીકે વિચારે છે અને પછાત તરીકે છોડી દીધા છે, તેથી આપણે આ રીતે અમારા બટનો ગોઠવી શકીએ છીએ.

બંને અભિગમ સારી રીતે કામ કરવા દર્શાવવામાં આવ્યા છે, પરંતુ તે સંદર્ભ પર આધાર રાખે છે. જો તમને ખાતરી ન હોય કે તમારા ફોર્મ માટે યોગ્ય છે, તો તમારા લક્ષ્ય દર્શકો સાથે કેટલાક ઉપયોગીતા પરીક્ષણો ચલાવો.

(તમે એક એકોર્ડિયનમાં multistep સ્વરૂપો પણ મૂકી શકો છો, પરંતુ એકોર્ડિયનો પાસે અસંખ્ય ઉપયોગીતા મુદ્દાઓ છે તેથી શ્રેષ્ઠ ટાળવામાં આવે છે.)

મોબાઇલ પર બટન્સ

નાના સ્ક્રીનો પર, તમે તમારા બટનોને પ્રતિભાવ આપવા માટે તૈયાર કરી શકો છો, જેથી તેઓ:

  • ટોચ પર પ્રાથમિક ક્રિયા સાથે, સ્ટેક કરવામાં આવે છે
  • સ્ક્રીનની સંપૂર્ણ પહોળાઈ લે છે, સિવાય કે બંને બાજુ પર થોડુંક સફેદ જગ્યા (જેથી તેઓ હજુ પણ સ્પષ્ટ બટનો છે) સિવાય.

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

હવે અમારું ફોર્મ ખરેખર સારું જોઈ રહ્યું છે, અને તે બૂટ કરવા માટે ખૂબ ઉપયોગી છે. પરંતુ વધુ સુધારાઓ છે જે અમે કરી શકીએ છીએ, જે આપણે આગળની તપાસ કરીશું

March 1, 2018