အားလုံးပဲ မဂၤလာပါရွင့္။

ညီမကေတာ့ Spiceworks Myanmar Company တြင္ Web Designer အျဖစ္ ဝင္ေရာက္ အလုပ္လုပ္ကိုင္ေနတဲ့ မဇင္ႏုေထြး ျဖစ္ပါတယ္ရွင့္။
ဒီအပတ္မွာေတာ့ ၿပီးျပည့္စုံတဲ့ icon အျဖစ္ ေရးဆြဲဖန္တီးရာမွာ အေျခခံက်ၿပီး အေရးပါေသာ အခ်က္ေလးေတြကို မွ်ေဝေပးခ်င္ပါတယ္ရွင့္။

ပထမဆုံးအေနနဲ႔ icon အေၾကာင္းကို အနည္းငယ္ ေျပာျပေပးပါမယ္။ Icon ဆိုသည္မွာ web page တစ္ခု သို႔မဟုတ္ application တစ္ခုရဲ႕ program, feature, file, topic သို႔မဟုတ္ information မ်ားကို ကိုယ္စားျပဳ ေဖာ္ျပထားေသာ ေသးငယ္သည့္ graphical image တစ္ခုျဖစ္ပါတယ္။
Icon တစ္ခုကို click သို႔မဟုတ္ double-click ႏွိပ္ပါက သက္ဆိုင္ရာ file, program သို႔မဟုတ္ တျခားေသာ page, function တစ္ခုအေနနဲ႔ လုပ္ေဆာင္ေဖာ္ျပေပးပါတယ္။

Icon ကိုအသုံးျပဳၿပီး design ဖန္တီးျခင္းျဖင့္ ရရွိလာမည့္ အက်ိဳးေက်းဇူးမ်ားကေတာ့
၁။ အေၾကာင္းအရာႏွင့္ အျမင္အာ႐ုံ အဆင့္ဆင့္ကို ဖန္တီးေပးပါတယ္။
၂။ အသုံးျပဳသူမ်ားရဲ႕ အာ႐ုံစူးစိုက္မႈကို ပိုမိုရရွိေစပါမယ္။
၃။ အသုံးျပဳသူမ်ားအတြက္ နားလည္မႈကို ပိုမိုလြယ္ကူေစပါတယ္။
၄။ ပိုမိုဆြဲေဆာင္မႈရွိေစပါမယ္။

မိမိေဖာ္ျပလိုေသာ အေၾကာင္းအရာ အခ်က္အလက္မ်ားကို စကားလုံးမ်ားအသုံးျပဳ၍ design ဖန္တီးျခင္းသည္ ထိေရာက္ေသာနည္းလမ္းျဖစ္ေပမဲ့ စကားလုံးမ်ားအလြန္အကြၽံ သုံးျခင္းသည္ အသုံးျပဳသူမ်ားအေနျဖင့္ ၿငီးေငြ႕ဖြယ္ျဖစ္သြားေစၿပီး အာ႐ုံစူးစိုက္မႈကို ေလ်ာ့နည္းသြားေစပါတယ္။
ထို႔ေၾကာင့္ မိမိတို႔ရဲ႕ design ဖန္တီးရာမွာ icon ကိုအသုံးျပဳၿပီး ဖန္တီးျခင္းသည္ ပိုမိုထိေရာက္မႈရွိေစေသာ နည္းလမ္းတစ္ခု ျဖစ္ပါတယ္။
Icon တစ္ခုဖန္တီးရာတြင္ အသုံးျပဳသူမ်ား ပိုမိုနားလည္လြယ္ေစရန္ႏွင့္ ေကာင္းမြန္ေသာ ဆက္စပ္မႈမ်ား ရရွိေစရန္အတြက္ အဘက္ဘက္မွ အေတြးအေခၚေကာင္းမ်ားစြာ လိုအပ္ပါတယ္။
သို႔ျဖစ္ပါ၍ ဖန္တီးသူမ်ား အေနျဖင့္ သတိထားသင့္ေသာ အခ်က္မ်ားကို ဂ႐ုတစိုက္လိုက္နာၿပီး ဖန္တီးမွသာ ၿပီးျပည့္စုံၿပီး အဆင္ေျပေသာ icon အျဖစ္ ရရွိလာမွာျဖစ္ပါတယ္။
အေျခခံက်ၿပီး အေရးပါေသာ အခ်က္အလက္မ်ားကို ‌ေဖာ္ျပေပးပါမယ္။

၁။ ႐ိုးရွင္းလြယ္ကူမႈ
Icon ဖန္တီးရာမွာ လက္ေတြ႕က်သည္၊ မက်သည္ကို စိုးရိမ္မေနပဲ မလိုအပ္ေသာ အစိတ္အပိုင္းမ်ားကို ဖယ္ရွားရန္ လိုအပ္ပါတယ္။ လိုအပ္ၿပီး အသုံးျပဳသင့္သည့္ အေျခခံ shape မ်ားကိုသာ သုံးထားျခင္းျဖင့္ အသုံးျပဳသူမ်ားကို ႐ိုးရွင္းစြာႏွင့္ အလြယ္တကူနားလည္ေစပါမယ္။

၂။ ေရွ႕ေနာက္ညီၫြတ္မႈ
မိမိ design မွာ ေအာက္ပါပုံတြင္ ေဖာ္ျပထားသည့္အတိုင္း icon တစ္ခုထက္ပိုၿပီး အသုံးျပဳမည္ဆိုလွ်င္ icon တစ္ခုႏွင့္တစ္ခု ေရွ႕ေနာက္ညီၫြတ္စြာ ဆက္စပ္မႈရွိရပါမယ္။ Shape, fill, stroke thickness, size အစရွိေသာ အေသးစိတ္ အပိုင္းအစမ်ားကအစ ဂ႐ုတစိုက္ဖန္တီးေပးဖို႔ လိုအပ္ပါတယ္။

၃။ ရွင္းလင္းျပတ္သားမႈ
ေသးငယ္ေသာ အစိတ္အပိုင္းတစ္ခုအေနျဖင့္ တည္ရွိေပမဲ့ အသုံးျပဳသူအေနနဲ႔ ရွင္းရွင္းလင္းလင္း ျပတ္ျပတ္သားသား ျမင္ႏိုင္ဖို႔လည္း လိုအပ္ပါတယ္။

၄။ Spacing အကြာအေဝး
Spacing အကြာအေဝးသည္ icon design ဖန္တီးရာမွသာမက web site, application အစရွိေသာ design မ်ားဖန္တီးရာမွာလည္း အေရးႀကီးပါတယ္။ စနစ္တက်ရွင္းရွင္းလင္းလင္း အသုံးျပဳထားျခင္းျဖင့္ အသုံးျပဳသူအျမင္ကို ရွင္းလင္းေစပါတယ္။

၅။ အျမင္ပိုင္းဆိုင္ရာ ျပဳျပင္​ေပးမႈ
တခ်ိဳ႕ေသာ shape အေနအထားမ်ားသည္ scale နဲ႔ၾကည့္မယ္ဆိုလွ်င္ အလယ္က်သည့္ပုံစံျဖစ္ေနေပမဲ့ အျမင္ျဖင့္ၾကည့္လိုက္လွ်င္ အလယ္မက်တဲ့ ပုံစံျဖစ္ေနပါလိမ့္မယ္။ ထို႔ေၾကာင့္ ေအာက္ပါပုံတြင္ယွဥ္ျပထားသလို scale အရ အလယ္မက်ေနေပမဲ့ အျမင္နဲ႔ၾကည့္တဲ့အခါ အဆင္ေျပေအာင္လည္း ခ်ိန္ညႇိေပးဖို႔လိုအပ္ပါတယ္။

၆။ အ႐ြယ္အစားႏွင့္ Layout ပုံစံ
Icon မ်ားကို အ႐ြယ္အစား အတူတူဖန္တီးရန္ လိုအပ္ပါတယ္။
မိမိဖန္တီးလိုက္တဲ့ icon က web site တစ္ခု သို႔မဟုတ္ app တစ္ခုရဲ႕ မတူညီေသာ position အေနျဖင့္အသုံးျပဳႏိုင္တဲ့ အတြက္ေၾကာင့္ padding အကြာအေဝးမ်ားကိုလည္း ဂ႐ုတစိုက္အသုံးျပဳေစခ်င္ပါတယ္။

၇။ စမ္းသပ္စစ္ေဆးမႈ
အထက္တြင္ေဖာ္ျပေပးထားေသာ အခ်က္မ်ားကို လိုက္နာ၍ ဖန္တီးၿပီးၿပီဆိုလွ်င္ ေနာက္ဆုံးအခ်က္အေနနဲ႔ကေတာ့ မိမိဖန္တီးလိုက္တဲ့ icon ကို ထည့္သြင္းအသုံးျပဳမည့္ design တြင္ အဆင္ေျပမႈရွိမရွိ စမ္းသပ္အသုံးျပဳၾကည့္ရမွာ ျဖစ္ပါတယ္။ တစ္ခါတေလမွာ icon တစ္ခုတည္းအေနနဲ႔ အဆင္ေျပေနေပမဲ့ တျခား design တစ္ခုနဲ႔ေပါင္းစပ္လိုက္ခ်ိန္မွာ အဆင္မေျပတာလည္းရွိေနႏိုင္တဲ့ အတြက္ေၾကာင့္ ျဖစ္ပါတယ္။

အထက္ပါ အခ်က္မ်ားကို သတိထားၿပီး စနစ္တက်ဖန္တီးမည္ဆိုလွ်င္ ပိုမိုေကာင္းမြန္ ျပည့္စုံေသာ icon အျဖစ္ရရွိေစမွာ ျဖစ္ပါတယ္။
အခ်ိန္ေပးၿပီး ဖတ္ရႈ႕ေပးခဲ့ၾကတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္ရွင့္။ ဒီ blog ေလးကို ဖတ္ရႈ႕ၿပီး ဗဟုသုတ အနည္းငယ္ရရွိသြားလိမ့္မယ္လို႔လည္း ေမွ်ာ္လင့္မိပါတယ္။

 

Reference Links

https://www.ptiacademy.in/blog/7-rules-for-perfect-icon-design
https://www.linkedin.com/pulse/7-steps-perfect-icons-rekha-bhavsar?trk=public_profile_article_view