உள்ளடக்கம்
- 01. அடிப்படை கேன்வாஸ்
- 02. இடைமுக கூறுகள்
- 03. பயனர் தகவல்
- 04. இன்பாக்ஸ் தளவமைப்பு
- 05. மின்னஞ்சல் உருப்படிகள்
- 06. புதிய பொத்தான்
- முடிவுரை
ஆப்பிளின் புதிய மொபைல் இயக்க முறைமையின் மிக அற்புதமான அம்சங்களைப் பயன்படுத்தி iOS 7 பயன்பாட்டு வடிவமைப்பை உருவாக்குவோம். ஆப்பிளின் iOS 7 ஐபோன் மற்றும் ஐபாட் இயக்க முறைமைக்கு புதிய புதிய தோற்றத்தை அறிமுகப்படுத்துகிறது. IOS 7 பயன்பாட்டு இடைமுகத்தை வடிவமைப்பதற்கான பொதுவான வழிகாட்டுதலை இவ்வாறு சுருக்கமாகக் கூறலாம்:
- பிளாட் - iOS 7 க்கான ஆப்பிள் வடிவமைப்பு வழிகாட்டுதல்கள் எளிமை, பயன்பாட்டினை மற்றும் பயன்படுத்த எளிதான அணுகுமுறையை ஊக்குவிக்கின்றன. புதிதாக வடிவமைக்கப்பட்ட சில பயன்பாடுகள் (மற்றும் ஆப்பிளின் சொந்த ஸ்டைலிங்கில்) தட்டையான வடிவமைப்பின் சில பண்புகளை எதிர்க்கின்றன. ஆனால் அதை உண்மையில் எடுத்துக் கொள்ள வேண்டாம். எடுத்துக்காட்டாக, காட்டப்பட்டுள்ள விசைப்பலகை மற்றும் பொத்தான்கள் 100 சதவீதம் தட்டையானவை அல்ல; ஒவ்வொரு கடிதமும் ஒரு பொத்தானுக்குள் இருக்கும், அதில் ஒரு துளி நிழல் உள்ளது. இந்த நுட்பமான விளைவு சில நன்மைகளைக் கொண்டுள்ளது மற்றும் இது முற்றிலும் தட்டையான அணுகுமுறையிலிருந்து வேறுபடுகிறது.
- வண்ணங்கள் - iOS 7 பயன்பாடுகளுக்கான வண்ணங்கள் பிரகாசமாகவும், அதிக நிறைவுற்றதாகவும், அழைக்கும் விதமாகவும் இருக்க வேண்டும். இருப்பினும், சொந்த iOS 7 பயன்பாடுகள் எப்போதும் அதைப் பின்பற்றாது. எடுத்துக்காட்டாக, மின்னஞ்சல் அல்லது செய்திகள் பயன்பாட்டைப் பார்க்கவும்.
- அச்சுக்கலை - உள்ளடக்கத்தில் இலகுரக அச்சுக்கலை உள்ளது. எழுத்துரு ஹெல்வெடிகா நியூ லைட்.
- தளவமைப்பு - குறைந்த அல்லது அடுக்கு பாணிகளைக் கொண்ட ஒளியின் உச்சரிப்பு, பயன்படுத்த எளிதான இடைமுகம்.
உங்கள் வயர்ஃப்ரேம்களை வைத்தவுடன், நாங்கள் தொடர்ந்து வடிவமைப்பைத் தொடங்கலாம்.
01. அடிப்படை கேன்வாஸ்
UI கூறுகளை வைக்க அடிப்படை கேன்வாஸை உருவாக்குவோம். வெளிப்படையான பின்னணியுடன் ஃபோட்டோஷாப்பில் 640x1138px கேன்வாஸை உருவாக்கவும். பயன்பாடு அணுகக்கூடியது, பயன்படுத்தக்கூடியது மற்றும் உள்ளடக்கம் சார்ந்ததாக இருக்க வேண்டும், எனவே பின்னணிக்கு பைத்தியம் வண்ணங்களைப் பயன்படுத்த மாட்டோம்.
அதற்கு பதிலாக, எங்கள் பிராண்ட் நிறத்தை (கத்தரிக்காய் ஊதா) மேல் பட்டியில் ஒதுக்குவோம். மேல் பட்டியில் பொதுவாக 100px உயரம் இருக்கும். (IOS 7 உடன் தொடங்கும் போது, நிலைப் பட்டி மேல் பட்டி இடைமுகத்தின் ஒரு பகுதியாகும், எனவே நீங்கள் இதை முன்பு செய்யவில்லை என்றால் அதை உங்கள் வடிவமைப்பில் சேர்க்க மறக்காதீர்கள்.)
மிக மேலே 640x100px திட செவ்வகத்தை உருவாக்கவும். வடிவமைப்பு பிக்சல் சரியானது என்பதை உறுதிப்படுத்த நான் வழக்கமாக 3200% ஜூம் வரை பயன்படுத்துகிறேன்.
அடிப்படை விசைப்பலகை குறுக்குவழிகளைக் கற்றுக்கொண்டால், இந்த மீண்டும் மீண்டும் செய்யக்கூடிய செயல்களை நீங்கள் கண் சிமிட்டலில் செய்ய முடியும். ஒரு வெளிப்படையான கேன்வாஸுடன் தொடங்கி, ஓட்டத்தின் குறிப்பிட்ட பகுதிகளில் பயன்படுத்தப்படும் சில திரைகளை உருவாக்கவும்.
02. இடைமுக கூறுகள்
பயன்பாட்டு லோகோ வட்டங்களை அடிப்படையாகக் கொண்டது, அதனால்தான் இடைமுகக் கூறுகளைத் தெரிவிக்க இதைப் பயன்படுத்த முடிவு செய்தேன். மெனுவுக்கு நிலையான மூன்று செங்குத்து கோடுகள் இருப்பதற்கு பதிலாக, ஆக்கப்பூர்வமாக இருக்கட்டும்! 12x12px வட்டம் வரைந்து, #fff ஐ நிரப்பி, அதை மூன்று முறை நகலெடுத்து படத்தில் காட்டப்பட்டுள்ளபடி வைக்கவும். வட்டங்களுக்கு இடையிலான இடைவெளி 8px ஆகும்.
வலது பக்கத்தில், எங்களிடம் ‘அமைப்புகள்’ இருக்கும். அமைப்புகள் ஐகானுக்கு ஒத்த ஒன்றை உருவாக்குவோம்: 4px அகலமுள்ள வெளிப்புற பக்கவாதம் கொண்ட 10x10px வட்டம். 42px விட்டம் கொண்ட ஒரு வட்டத்தை வரைந்து, 34px விட்டம் கொண்ட உள் வட்டத்தை கழிப்பதன் மூலம் இந்த பக்கவாதத்தை உருவாக்கலாம். ஒவ்வொரு பக்கத்திலும் 20px இடத்தை சரியான முறையில் அனுமதிக்கும் இடது மற்றும் வலது பக்கத்தில் ஐகான்களை வைக்கவும். இந்த பக்கத்திற்கான தலைப்பு கிடைமட்டமாக மையப்படுத்தப்பட்ட ‘சுயவிவரம்’. எழுத்துரு ஹெல்வெடிகா லைட் மற்றும் எழுத்துரு அளவு 36px ஆகும்.
உங்கள் பயன்பாட்டு வடிவமைப்பில் பிராண்ட் வண்ணங்களுக்கான அடிப்படையாக மேல் பட்டியைப் பயன்படுத்த முயற்சிக்கவும். இதற்கு நல்ல எடுத்துக்காட்டுகளை பேஸ்புக் மற்றும் இன்ஸ்டாகிராம் ஐபோன் பயன்பாட்டில் காணலாம்.
03. பயனர் தகவல்
பயனரின் பெயர், இருப்பிடம் மற்றும் புகைப்படம் ஆகியவற்றைக் கொண்ட பயனர் தகவல் பகுதியை வரையலாம். பின்னணி 222px உயரமுள்ள ஒரு சதுரம். ஒரு மாதிரி புகைப்படத்தை வைக்கவும், கிளிப்பிங் மாஸ்க் கருவியைப் பயன்படுத்தி முகமூடியை உருவாக்கவும். புகைப்படத்தை சரியான முறையில் மையப்படுத்தவும்.
புகைப்படம் எடுத்தல் அடிப்படையிலான தளவமைப்புகள் கவனமாக வடிவமைக்கப்பட வேண்டும், தளவமைப்பின் பயன்பாட்டை கருத்தில் கொண்டு. எங்களிடம் உரை வைக்கப்பட்டுள்ளது, எனவே மாறுபாடு நல்லது மற்றும் உரை அணுகக்கூடியது என்பதை உறுதிப்படுத்த வேண்டும். பின்னணியில் வெவ்வேறு புகைப்படங்களுடன் உரை தெரிவுநிலையை சோதிக்கிறீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். நான் #fff மற்றும் 1px துளி நிழலுடன் உரையைத் தேர்ந்தெடுத்தேன்.
இன்னும் மாறுபாட்டை அடைய, பின்னணியில் சில கருப்பு சாய்வுகளைச் சேர்ப்போம். ஒரு செவ்வகத்தை உருவாக்கி, அதில் கிளிப்பிங் மாஸ்கைப் பயன்படுத்துங்கள்.
டிரான்ஸ்ஃபார்ம் கருவி மூலம் புகைப்படத்தை ஒருபோதும் அளவிட வேண்டாம். தரம் மிகவும் பாதிக்கப்படும். அதற்கு பதிலாக, பட அளவு கருவியைப் பயன்படுத்தி அதை உங்களுக்குத் தேவையான அளவுக்கு அளவிடவும். சிறந்த முடிவுகளுக்கு, அடோப் லைட்ரூம் போன்ற தொழில்முறை மென்பொருளைப் பயன்படுத்தவும், இது ஒரு குறிப்பிட்ட அளவில் கோப்பை ஏற்றுமதி செய்யும்.
எந்தவொரு புகைப்படத்தையும் பின்னணியாகப் பயன்படுத்துவதன் மூலம் சிறந்த மாறுபாட்டை அடைய இந்த நுட்பத்தைப் பயன்படுத்தவும், இதன் மூலம் பயனர் நெகிழ்வுத்தன்மையை வழங்குகிறது.
04. இன்பாக்ஸ் தளவமைப்பு
இப்போது நாங்கள் இன்பாக்ஸ் தளவமைப்பை உருவாக்கப் போகிறோம். இன்பாக்ஸ் பிரிவுக்கான மேல் பட்டியில் தொடங்கவும். திடமான # 3a3e4b உடன் 640x100px செவ்வகத்தை பின்னணியாக உருவாக்கவும். இன்பாக்ஸ் மெனுவுக்குச் செல்ல அதன் இடது பகுதி அம்புக்குறியாக இருக்கும். திடமான # 2e988d செவ்வகத்தை உருவாக்கவும், இது 100x100px ஆகும்.
வயர் ஃப்ரேமிங் எளிது. ஒரே தளவமைப்பின் பல வேறுபாடுகளை நீங்கள் கொண்டிருக்கலாம், ஆனால் எது மிகவும் பொருந்தக்கூடியது என்பதை சரியான தொடர்புகள் உங்களுக்குத் தெரிவிக்கும்.
உங்கள் பயன்பாட்டு வடிவமைப்பில் நிரப்பு வண்ணங்களைப் பயன்படுத்துவது மிகவும் முக்கியமானது. சில வண்ணங்களுடன் விளையாடுங்கள், வண்ண கோட்பாடு வழிகாட்டுதலைப் பயன்படுத்துங்கள், நீங்கள் செல்லும்போது பிராண்ட் வண்ணங்களைப் பயன்படுத்த மறக்காதீர்கள். (வண்ணக் கோட்பாடு மற்றும் உங்கள் UI க்கான வண்ணங்களை எவ்வாறு இணைப்பது என்பதைப் பற்றி அறிய சில ஆன்லைன் ஆதாரங்கள் உள்ளன. பயன்பாட்டு வடிவமைப்பிற்கு எனது தனிப்பட்ட விருப்பம் படைப்பு சமூக தளமான COLORlovers (colorlovers.com) ஆகும்.)
அம்பு ஐகானை வடிவமைக்க, 19x4px செவ்வகத்தை உருவாக்கவும். திட #fff உடன் அதை நிரப்பி 45 கோணத்தில் உருமாற்றம் / சுழற்று பயன்படுத்தவும். செவ்வகத்தை நகலெடுத்து, டிரான்ஸ்ஃபார்ம் / ஃபிளிப் செங்குத்து விண்ணப்பிக்கவும், அதை இழுக்கவும், அது அம்பு வடிவத்தை உருவாக்குகிறது. வடிவங்களை ஒன்றிணைக்கவும். Voilà!
இடமிருந்து ‘இன்பாக்ஸ்’ தலைப்பு 70px வைக்கவும். இது செங்குத்தாக சீரமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். அடுத்து, # 141516 பின்னணியுடன் ஒரு வட்டத்தை உருவாக்கி, உள்ளே 8 எண்ணை வைத்து செங்குத்தாகவும் கிடைமட்டமாகவும் சீரமைக்கவும். இது புதிய மின்னஞ்சல் அறிவிப்பு.
05. மின்னஞ்சல் உருப்படிகள்
ஒரு செவ்வகத்தை உருவாக்கி திட #fff ஐ நிரப்பவும். ஒரு # e3e3e3 எல்லையை வரைந்து செவ்வகத்தின் கீழ் விளிம்பில் வைக்கவும். 120x120px வட்டத்தை உருவாக்கி, சாம்பல் நிறத்துடன் நிரப்பவும், பயனரின் புகைப்படத்தைப் பிடித்து, அதை மேலே வைக்கவும், அதில் கிளிப்பிங் மாஸ்கைப் பயன்படுத்துங்கள்.
கிடைமட்டமாகவும் செங்குத்தாகவும் மையப்படுத்தவும். இடது மற்றும் வலதுபுறத்தில் 25px முன்பதிவு செய்யப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். அனுப்புநரின் பெயரை # 000 இல் மற்றும் செய்தி நகலை # 868b98 இல் சேர்க்கவும். சரியான இடத்தில் வைக்கவும். தேதி # 000 மற்றும் இலகுவான எழுத்துரு எடையில் உள்ளது, வலதுபுறம் சீரமைக்கப்பட்டது. மூன்று முறை செய்யவும்.
உருப்படிகளுக்கு கூட, #fafafa ஐ பின்னணி நிறமாகப் பயன்படுத்தவும். உள்ளடக்கம் சார்ந்த தளவமைப்புக்கு (வாசகர், மின்னஞ்சல் கிளையண்ட், செய்தித்தாள்) ஒளி திரைகள் மற்றும் சாம்பல் உரையைப் பயன்படுத்தி சிறிய திரைகளில் அணுகக்கூடியது மற்றும் படிக்க எளிதானது என்பதை உறுதிப்படுத்தவும்.
06. புதிய பொத்தான்
102px விட்டம் கொண்ட ஒரு வட்டத்தை உருவாக்கி, திட # ec2e49 ஐ நிரப்பவும். கீழ் வலதுபுறத்தில் வைக்கவும். 40x40px அளவுடன் பேனா ஐகானை வடிவமைக்கவும். ஒரு வட்டத்தில் வைக்கவும் மற்றும் செங்குத்தாகவும் கிடைமட்டமாகவும் சீரமைக்கவும். ஐகானை 90% ஒளிபுகாநிலையைக் கொடுங்கள். உங்கள் கேக்கில் ஒரு செர்ரியைச் சேர்க்க, ஒட்டுமொத்த ஒளி இடைமுகத்தில் நன்றாக தோன்றும் ஒரு பொத்தான் உங்கள் பயன்பாட்டு UI க்கு கடைசி விவரத்தையும் ஆர்வத்தையும் சேர்க்கும்.
முடிவுரை
இன்பாக்ஸ் தளவமைப்பு மற்றும் சுயவிவர பாணிகளைக் கொண்ட நவநாகரீக ஐபோன் பயன்பாட்டின் இடைமுகத்தை வடிவமைத்துள்ளீர்கள்.தளவமைப்புடன் விளையாட முயற்சிக்கவும், பயனர் சுயவிவரப் பகுதிக்கு மொசைக் பின்னணியைச் சேர்த்து மெனுவை உருவாக்கவும். மெனு செயல்களை வடிவமைக்கவும் வரையறுக்கவும் மறக்க வேண்டாம். அடோப் ஆஃப்டர் எஃபெக்ட்ஸ் அல்லது ஒத்த வடிவமைப்பு கருவிகளைப் பயன்படுத்தி நீங்கள் தொடர்புகளையும் சேர்க்கலாம். கப்பல்!
சொற்கள்: ஜூலியா குசைனோவா
ஜூலியா குசைனோவா ஒரு மூத்த தயாரிப்பு வடிவமைப்பாளர் ஆவார், இவர் யுஐ / யுஎக்ஸ், காட்சி மற்றும் மொபைல் வடிவமைப்பு மற்றும் வயர்ஃப்ரேமிங் ஆகியவற்றில் நிபுணத்துவம் பெற்றவர்.இந்த கட்டுரை முதலில் நிகர பத்திரிகை வெளியீடு 250 இல் வெளிவந்தது.
