paint-brush
தொழில்நுட்ப நிறுவனர்கள் தங்கள் முதல் முன்மாதிரியை உருவாக்க இந்த 5 ஆதாரங்களைப் பயன்படுத்துகின்றனர்மூலம்@marinacher
700 வாசிப்புகள்
700 வாசிப்புகள்

தொழில்நுட்ப நிறுவனர்கள் தங்கள் முதல் முன்மாதிரியை உருவாக்க இந்த 5 ஆதாரங்களைப் பயன்படுத்துகின்றனர்

மூலம் Marina Chernyshova6m2025/01/21
Read on Terminal Reader

மிக நீளமானது; வாசிப்பதற்கு

வடிவமைப்பின் முழுமையான பற்றாக்குறை மற்றும் ஒவ்வொரு திரையின் சரியான வடிவமைப்பில் நிறைய நேரம் செலவழிக்கப்படுவதற்கும் இடையே ஒரு சமநிலை உள்ளது. எளிமைப்படுத்தல் மற்றும் தேவையற்ற படிகள் மற்றும் செயல்களைத் தவிர்ப்பதன் மூலம் மென்மையான UX ஐ அடைய முடியும், மேலும் ஏற்றுக்கொள்ளக்கூடிய UI மிகவும் எளிமையானது ஆனால் கவர்ச்சிகரமானதாக இருக்கும். முக்கிய விஷயம் என்னவென்றால், ஆயத்த தீர்வுகளைப் பயன்படுத்துவதில் தயங்கக்கூடாது மற்றும் பயனர் ஓட்டத்தை உருவாக்குவது போன்ற வடிவமைப்பிற்கு முன் படிகளைத் தவிர்க்க வேண்டாம். இந்த விஷயத்தில், தவறு செய்யும் அல்லது நேரத்தை வீணடிக்கும் ஆபத்து கணிசமாகக் குறைக்கப்படுகிறது, இது உங்கள் வளங்களைச் சேமிக்கும் மற்றும் உந்துதலை பாதிக்காது.
featured image - தொழில்நுட்ப நிறுவனர்கள் தங்கள் முதல் முன்மாதிரியை உருவாக்க இந்த 5 ஆதாரங்களைப் பயன்படுத்துகின்றனர்
Marina Chernyshova HackerNoon profile picture


எனது பெயர் மெரினா செர்னிஷோவா, நான் ஒரு தயாரிப்பு வடிவமைப்பாளர் மற்றும் வழிகாட்டி. எனது முந்தைய கட்டுரையில், " பட்ஜெட்டில் சுருக்கமா? முழு நேர வடிவமைப்பாளர் இல்லாமல் உங்கள் முதல் MVP ஐ உருவாக்க இந்த வடிவமைப்பு முறைகளைப் பயன்படுத்தவும் ,” என் கருத்துப்படி ஆரம்ப நிலை தொடக்கங்களுக்கு எப்போதும் முழுநேர வடிவமைப்பாளர் தேவையில்லை என்பதையும், கோட்பாட்டு பார்வையில் முதல் முன்மாதிரி வடிவமைப்பை எவ்வாறு அணுகுவது என்பதையும் நான் விவரித்தேன். இந்த கட்டுரையில், மிகவும் நடைமுறை பக்கத்தைப் பார்க்க உங்களை அழைக்க விரும்புகிறேன். நிறுவனர்களும் ஆரம்பகால தொழில்நுட்ப தொழில்முனைவோரும் தங்களின் முதல் முன்மாதிரியை உருவாக்கப் பயன்படுத்தக்கூடிய பயனுள்ள ஆதாரங்களைப் பகிர்ந்து கொள்கிறேன்.


உங்கள் தயாரிப்பை நீங்களே முழுமையாக வடிவமைக்க உங்களுக்கு ஆர்வமும் நேரமும் இருந்தால், நீங்கள் ஃபிக்மாவைக் கற்றுக்கொள்ள பரிந்துரைக்கிறேன். ஃபிக்மா என்பது கிளவுட் அடிப்படையிலான வடிவமைப்பு மென்பொருளாகும், இது திட்ட மேம்பாட்டிற்கு முன் யோசனைகளை வரையவும், வடிவமைக்கவும் மற்றும் முன்மாதிரி செய்யவும் பயன்படுகிறது. இந்தக் கருவியின் மூலம், வடிவமைப்பாளர்கள் இணைய உலாவி மூலம் தளவமைப்புகளை உருவாக்கவும், படங்களைச் சேர்க்கவும், வண்ணங்கள் மற்றும் எழுத்துருக்களுடன் பரிசோதனை செய்யவும் மற்றும் பலவற்றைச் செய்யவும் இணைந்து பணியாற்றலாம். ஃபிக்மா ஒரு சக்திவாய்ந்த கருவியாகும், ஆனால் அதே நேரத்தில் பயன்படுத்த மிகவும் எளிதானது மற்றும் அனைத்து குழு உறுப்பினர்களுக்கும் இடையே தொடர்பு கொள்ள மிகவும் உதவியாக இருக்கும்.


ஃபிக்மாவைத் தவிர, ஃபிக்ஜாம் மற்றும் ஃபிக்மா ஸ்லைடுகளைப் பயன்படுத்துவது மிகவும் வசதியானது. FigJam என்பது கூட்டு குழுப்பணிக்காக வடிவமைக்கப்பட்ட ஒரு ஒயிட்போர்டு கருவியாகும். அணிகள் நிகழ்நேரத்தில் ஒத்துழைக்கவும், யோசனைகளைக் காட்சிப்படுத்தவும், ஒன்றாக மூளைச்சலவை செய்யவும் இது அனுமதிக்கிறது. ஃபிக்மா ஸ்லைடுகள் என்பது வடிவமைப்பாளர்கள் மற்றும் அவர்களின் குழுக்களுக்காக வடிவமைக்கப்பட்ட விளக்கக்காட்சி கருவியாகும். ஃபிக்மா மற்றும் ஃபிக்மா ஸ்லைடுகள் ஏற்கனவே ஃபிக்மாவைப் பயன்படுத்துபவர்களுக்கு உங்கள் வடிவமைப்புகள், ஒயிட்போர்டுகள் மற்றும் விளக்கக்காட்சிகள் அனைத்தையும் ஒரே சுற்றுச்சூழல் அமைப்பில் வைத்திருக்க நல்லது.

வயர்ஃப்ரேம்கள்

வயர்ஃப்ரேம்கள் என்பது இணையதளம், பயன்பாடு அல்லது மென்பொருள் இடைமுகம் போன்ற டிஜிட்டல் தயாரிப்பின் தோராயமான திட்டவட்டமான காட்சிப் பிரதிநிதித்துவம் ஆகும். எனது முந்தைய கட்டுரையில், பயனர் ஓட்டம் என்றால் என்ன என்பதை நான் விளக்கினேன் - இது ஒரு குறிப்பிட்ட பணி அல்லது இலக்கை நிறைவேற்ற ஒரு தயாரிப்பு அல்லது வலைத்தளத்தின் வழியாக பயனர் செல்லும் பாதையை வரைபடமாக்கும் காட்சி வரைபடம்.* பயனர் ஓட்டத்தின் அடிப்படையில் நீங்கள் முதல் எளிமையானதை உருவாக்கலாம். வயர்ஃப்ரேம்களின் பதிப்பு.


நீங்கள் அல்லது உங்கள் குழு தயாரிப்பை வடிவமைக்கத் தொடங்குவதற்கு முன், தயாரிப்பு கட்டமைப்பைப் புரிந்து கொள்ள வயர்ஃப்ரேம்கள் அவசியம். வண்ணங்கள், எழுத்துருக்கள் மற்றும் ஐகான்கள் போன்ற வடிவமைப்பின் நுணுக்கங்களால் திசைதிருப்பப்படாமல், UX வடிவமைப்பு உரையாடல்களை மையமாகவும், ஆக்கப்பூர்வமாகவும் வைத்து, அணிகள் தேவைகளை சீரமைக்க அவை உதவுகின்றன.


வயர்ஃப்ரேம்கள் மிகவும் வித்தியாசமாக உணரப்படலாம், அவை உயர்-விவரமாகவும் குறைந்த-விவரமாகவும் இருக்கலாம். சில அடிப்படை எடுத்துக்காட்டுகளை கீழே காண்க:

  • இடது படம் (உள்ளடக்கத் தொகுதிகளுடன் வயர்ஃப்ரேம் போன்ற UI)
  • வலது படம் (வரைபடங்கள் மற்றும் விரிவான கூறுகளுடன் கூடிய உயர் நம்பக UI)

குறைந்த விரிவான வயர்ஃப்ரேம் அடங்கும்

உயர் விவரமான வயர்ஃப்ரேம் அடங்கும்

கட்டமைப்பு, தளவமைப்பு மற்றும் பயனர் ஓட்டம் ஆகியவற்றில் கவனம் செலுத்துங்கள்

விரிவான செயல்பாடு மற்றும் குறிப்பிட்ட வடிவமைப்பு கூறுகளில் கவனம் செலுத்துங்கள்

அடிப்படை கிரேஸ்கேல் அல்லது கோடிட்ட ஓவியங்கள்

வண்ணங்கள், பிரிப்பான்கள் மற்றும் விளக்கப்படங்கள் போன்ற குறிப்பிட்ட கூறுகள் இருக்கலாம்

உரைகளின் படங்களுக்கு ஒதுக்கிடங்களைப் பயன்படுத்துகிறது

உண்மையான அல்லது பிரதிநிதி உள்ளடக்கத்தைச் சேர்க்கவும்

பொதுவாக நிலையானது, அம்புகளுடன் வழிசெலுத்தலைக் குறிக்கலாம்

பெரும்பாலும் ஊடாடும், பயனரின் சாத்தியமான செயல்களுக்கு ஒத்திருக்கிறது


சாத்தியமான எளிமையான ஒன்றைத் தொடங்க பரிந்துரைக்கிறேன்: தோராயமான தலைப்புகள் மற்றும் பொத்தான்களுடன் பிரதான திரைகளை ஏற்பாடு செய்யுங்கள் மற்றும் உரைகளை அதிகம் தொந்தரவு செய்யாதீர்கள்.


நீங்கள் ஃபிக்மாவில் பணிபுரிந்தால், வார்ப்புருக்கள் மூலம் பிரேம்களை உடனடியாக யதார்த்தமான அளவில் உருவாக்கலாம்.


ஃபிரேம் கருவியைத் தேர்ந்தெடுக்கும்போது, வலது பேனலில் டெம்ப்ளேட்களின் பட்டியல் தோன்றும்


மிகவும் யதார்த்தமான இடைமுக உறுப்புகளுடன் கூடிய விரிவான வயர்ஃப்ரேம்களை உருவாக்க, நிறைய நேரத்தை மிச்சப்படுத்த, வயர்ஃப்ரேமிங்கிற்கு ஆயத்த ஃபிக்மா சொத்துக்களைப் பயன்படுத்தலாம் (எடுத்துக்காட்டாக இந்த நூலகம் )

நூலகத்திலிருந்து வெவ்வேறு UI கூறுகள்


இந்த கட்டத்தில், வண்ணங்கள் அல்லது எழுத்துருக்கள் போன்ற சிறிய விஷயங்களுக்கு கவனம் செலுத்தாத ஒரு முன்மாதிரியை நீங்கள் ஏற்கனவே உருவாக்கி, அதை உங்கள் நண்பர்களில் ஒருவருக்குக் காட்டலாம். இது மொபைல் பயன்பாடாக இருந்தால், உங்கள் ஃபோனிலிருந்து இணைப்பைத் திறந்து, அதை மிகவும் யதார்த்தமாகக் காட்டலாம். எல்லாத் திரைகளுக்கும் இடையில் தேவையான அனைத்து மாற்றங்களும் உள்ளதா என்பதைச் சரிபார்ப்பது முக்கியம், மேலும் ஒரு பயனர் திரும்பிச் செல்லலாமா அல்லது செயலை ரத்துசெய்யலாமா.


வலது பேனலில் உள்ள ப்ரோடோடைப் தாவலில், திரைகளுக்கு இடையே ஒரு தொடர்பை உருவாக்கலாம் (உதாரணமாக, ஒரு பொத்தானைக் கிளிக் செய்வதன் மூலம் மாற்றம்

ஆயத்த கூறு நூலகங்கள்

புதிதாக எல்லாவற்றையும் வடிவமைக்க வேண்டிய அவசியமில்லை. உங்கள் தயாரிப்பை வடிவமைக்க நீங்கள் பயன்படுத்தக்கூடிய ஃபிக்மா சமூகத்தில் உள்ள ஆயத்த சொத்துக்களை ஆராய்வது மிகவும் உதவியாக இருக்கும்.


ஃபிக்மாவில் மெட்டீரியல் யுஐ போன்ற பல நூலகங்கள் உள்ளன. இந்த நூலகங்களில் ஐகான்களின் தொகுப்பிலிருந்து ஏற்கனவே கூடியிருந்த பக்கங்கள் வரை பல பயனுள்ள கூறுகள் உள்ளன.


நீங்கள் நூலகத்திலிருந்து ஒரு பொத்தானை நகலெடுத்து, அதற்குத் தேவையான அளவுருக்களை எளிதாகத் தேர்ந்தெடுக்கலாம் (வகை, அளவு, நிலை, ஐகான் இருப்பு போன்றவை)


உறுப்புகள் பொதுவாக ஏற்கனவே அனைத்து நிலைகளையும் கொண்டிருக்கும் (ஹோவர் மற்றும் தேர்ந்தெடுக்கப்பட்ட நிலைகள், எச்சரிக்கைகள், விளக்கங்கள் போன்றவை). முழு இடைமுக சுருக்கங்களும் சிறிய கூறுகளிலிருந்து சேகரிக்கப்படலாம், எடுத்துக்காட்டாக, பொத்தான்கள் மற்றும் அட்டவணைகள் உள்ள மாதிரி உரையாடல். தனிமங்களுக்கு கூடுதலாக, விளிம்புகள், இடைவெளிகள் போன்றவற்றுடன் அவற்றை எவ்வாறு சரியாகப் பயன்படுத்துவது என்பதற்கான வழிமுறைகள் இருக்கலாம். இந்த நூலகங்கள் டெவலப்பர்கள் பயன்படுத்தக்கூடிய கூறுகள் மற்றும் முழு தளவமைப்புகளையும் உருவாக்கியுள்ளன.


இது தேவைப்பட்டால், எதிர்காலத்தில் உங்கள் சொந்த கூறுகளைச் சேர்க்கலாம். உதாரணமாக, உங்களுக்கு சில விளக்கப்படங்கள் தேவைப்பட்டால், அவற்றை வேறொரு நூலகத்திலிருந்து எடுக்கலாம். உங்களுக்கு தரமற்ற உறுப்பு தேவைப்பட்டால், அதை புதிதாக வடிவமைத்து அனைத்து மாநிலங்களுடனும் நூலகத்தில் சேர்க்கலாம்.

ஆயத்த கிராஃபிக் சொத்துக்கள்

சீரான மற்றும் நன்கு வடிவமைக்கப்பட்ட கிராபிக்ஸ் காரணமாக எந்தவொரு தயாரிப்பும் மிகவும் முதிர்ச்சியடைந்ததாகவும் சிந்தனைமிக்கதாகவும் இருக்கும்: விளக்கப்படங்கள், சின்னங்கள், அனிமேஷன்கள் போன்றவை.


இதற்கு கூடுதல் நேரத்தை வீணடிக்க வேண்டிய அவசியமில்லை, இங்கே நீங்கள் ஆயத்த செட்களையும் பயன்படுத்தலாம். வெவ்வேறு பாணிகள் மற்றும் வண்ணங்களில் இத்தகைய செட் நிறைய உள்ளன. அவைகளிலும் காணலாம் ஃபிக்மா சமூகம் அல்லது ஸ்ப்லைன் சமூகம் நீங்கள் 3D கிராபிக்ஸ் விரும்பினால். பெரும்பாலும் பெரிய பெட்டிகள் வணிக பயன்பாட்டிற்காக செலுத்தப்படுகின்றன, ஆனால் அவை மிகவும் மலிவு.


ஃபிக்மா சமூகத்திலிருந்து விளக்கப்பட தொகுப்புகளின் எடுத்துக்காட்டுகள்


இந்த சொத்துக்கள் உங்கள் தயாரிப்புக்குள் மட்டுமல்ல, உங்கள் மார்க்கெட்டிங் பொருட்கள், சமூக வலைப்பின்னல் படங்கள் மற்றும் பிட்ச் டெக்குகளுக்கும் பயன்படுத்தப்படலாம். நீங்கள் அங்கு பல்வேறு விளக்கக்காட்சி டெம்ப்ளேட்களைக் காணலாம் மற்றும் உங்கள் பாணியைப் பொறுத்து அவற்றை மாற்றலாம்.

ஃபிக்மா சமூகத்திலிருந்து ஸ்டார்ட்அப் பிட்ச் விளக்கக்காட்சி டெம்ப்ளேட்டின் எடுத்துக்காட்டு

குறிப்புகள் & உத்வேகம்

பயனர் ஓட்டங்கள் மற்றும் பல்வேறு தயாரிப்புகளின் ஸ்கிரீன்ஷாட்களை சேகரிக்கும் பல தளங்கள் உள்ளன pageflows.com அல்லது mobbin.com . போட்டியாளர் பகுப்பாய்வு அல்லது உத்வேகத்திற்காக நீங்கள் அவற்றை ஆராயலாம். நீங்கள் ஒரு குறிப்பிட்ட அம்சத்தில் பணிபுரியும் போது அவை மிகவும் உதவியாக இருக்கும், மேலும் இது ஒரு பரவலான UX பேட்டர்ன் என்பதை நீங்கள் அறிவீர்கள் நீங்கள் அவற்றை வகைகளின்படி உலாவலாம் அல்லது முக்கிய வார்த்தைகள் மூலம் குறிப்பிட்ட செயல்பாட்டைத் தேடலாம்.


mobbin.com இலிருந்து பதிவுசெய்யும் திரைகளின் எடுத்துக்காட்டுகள்


மென்மையான பயனர் அனுபவத்தில் பணிபுரிவது, ஏற்கனவே உள்ள தீர்வுகளை நம்புவது எப்போதும் சிறந்தது, ஏனெனில் அவை தெளிவாகவும் பயனர்களுக்கு நன்கு தெரிந்ததாகவும் இருக்கும். நீங்கள் புதுமையான செயல்பாட்டில் பணிபுரிந்தாலும், நீங்கள் எப்போதும் மற்றொரு பகுதியில் இருந்து ஒத்த வடிவங்களைப் பயன்படுத்தலாம்.

முடிவுரை

இப்போதெல்லாம் டிஜிட்டல் சந்தை மிகவும் போட்டித்தன்மை வாய்ந்தது மற்றும் பயனர்கள் நல்ல UX மற்றும் UI இல் அனுபவம் பெற்றுள்ளனர். "அலங்காரங்களில்" தேவையற்ற நேரத்தை வீணடிக்கும் தயாரிப்பு வளர்ச்சியின் ஆரம்ப கட்டத்தில் கூட இதை புறக்கணிக்காமல் இருப்பது நல்லது, ஆனால் அதை ஒரு போட்டி நன்மையாகப் பயன்படுத்த முயற்சிக்கவும்.


என் கருத்துப்படி, வடிவமைப்பின் முழுமையான பற்றாக்குறை மற்றும் ஒவ்வொரு திரையின் சரியான வடிவமைப்பில் நிறைய நேரம் செலவழிக்கப்படுவதற்கும் இடையே ஒரு சமநிலை உள்ளது. எளிமைப்படுத்தல் மற்றும் தேவையற்ற படிகள் மற்றும் செயல்களைத் தவிர்ப்பதன் மூலம் மென்மையான UX ஐ அடைய முடியும், மேலும் ஏற்றுக்கொள்ளக்கூடிய UI மிகவும் எளிமையானது ஆனால் கவர்ச்சிகரமானதாக இருக்கும்.


முக்கிய விஷயம் என்னவென்றால், ஆயத்த தீர்வுகளைப் பயன்படுத்துவதில் தயங்கக்கூடாது மற்றும் பயனர் ஓட்டம் உருவாக்கம் போன்ற வடிவமைப்பிற்கு முன் படிகளைத் தவிர்க்க வேண்டாம். இந்த வழக்கில், தவறு செய்யும் அல்லது நேரத்தை வீணடிக்கும் ஆபத்து கணிசமாகக் குறைக்கப்படுகிறது, இது உங்கள் வளங்களைச் சேமிக்கும் மற்றும் உந்துதலை பாதிக்காது.