عنوان : نمایه (icon)(متخصصین ایران)درس چهارم قسمت3
متخصصین ایران طراحی سایت

نمایه (icon) اولین تاثیریه که برنامه شما روی کاربر می‌ذاره، پس خیلی مهمه که درست طراحی بشه. همین‌طور که روز به روز به کیفیت و عمق تصویر تبلت‌ها و گوشی‌ها داره اضافه می‌شه باید حواسمون باشه که برای کیفیت‌های بالاتر تصویر، نمایه‌های دقیق‌تری طراحی کنیم.

۱. یه پروژه جدید بسازید. می‌بینید در پوشه res چندتا پوشه وجود داره که با drawable شروع شده، ما تمامی تصاویر برنامه از جمله نمایه رو در این پوشه‌ها قرار می‌دیم، اما فرقشون چیه؟ فرقشون اینه که اندروید با توجه به میزان کیفیت تصویر هر دستگاهی انتخاب می‌کنه که از کدوم پوشه تصویر رو نمایش بده، یعنی ما یه تصویر در برنامه‌مون (مثلا نمایه) رو با کیفیت تصویرهای مختلف تهیه می‌کنیم و درون هر کدوم از این پوشه‌ها قرار می‌دیم:

ldpi برای دستگاه با کیفیت پایین low density

mdpi برای دستگاه با کیفیت متوسط medium density

hdpi برای دستگاه با کیفیت بالا high density

xdpi برای دستگاه با کیفیت خیلی بالا extra density و...

 

۲.چندین نوع نمایه(icon) وجود داره: نمایه برنامه (launcher)، نمایه نوار فعالیت (action bar)، نمایه اطلاعیه (notification) و...

نمایه‌برنامه تصویریه که کاربر از برنامه‌ی ما در فهرست برنامه‌هاش می‌بینه، نمایه‌نوار‌فعالیت هر نوع تصویریه که مثلا در فهرست‌ها استفاده می‌شه تا مفهوم رو به طور ساده به کاربر منتقل کنه، مثل این تصویر  که هرکی ببینه متوجه می‌شه برای جستجو هست، خود گوگل یه مجموعه‌ای از این نوع نمایه‌ها رو برای دانلود گذاشته که می‌تونید از اینجا دانلود کنید. نمایه اطلاعیه هم که از اسمش معلومه برای وقتیکه برنامه شما یه اطلاعیه (notification) تولید می‌کنه، توی نوار وضعیت نمایه اطلاعیه شما نشون داده می‌شه.

۳.ما می‌خوایم روی نمایه برنامه تمرکز کنیم. چند تا نکته برای طراحی نمایه:

هرجا ممکنه از شکل‌های برداری (vector) استفاده کنید -> مثلا در برنامه فتوشاپ اگه از شکل‌های برداری استفاده کنیم، بدون از دست دادن کیفیت تصویر می‌تونیم اون رو کوچیک یا بزرگ کنیم (برای اندازه صفحه‌های مختلف)

ابتدا با اندازه بزرگ طراحی کنید -> ابعاد طرح اولیتون بهتره به اندازه‌ی مضربی از اندازه نمایه‌تون باشه، تا با جزئیات دقیق طراحی کنید و برای اندازه‌های کوچکتر اونو کوچیک کنید و تغییرات دلخواهتونو بدید. مثلا برای نمایه‌ی برنامه به ترتیب به مربع‌هایی با ابعاد ۴۸، ۷۲، ۹۶ و ۱۴۴ پیکسل برای اندازه صفحه‌های مختلف نیاز دارید پس بهتره اول طرحتون رو روی مربعی با ابعاد ۸۶۴ در ۸۶۴ شروع کنید.

فراداده‌های غیرضروری رو از فایل نهایی پاک کنید -> درسته که sdk اندروید خودش فایل‌های png رو فشرده می‌کنه تا حجمشون کم بشه اما بهتره خودتون فراداده (metadata) و سرآیند (header) های غیرضروری رو از فایل‌های pngتون پاک کنید. ابزارهایی مثه OptiPNG یا Pngcrush می‌تونن این کارو براتون انجام بدن و اندازه فایل‌های شما رو بهینه کنن که باعث بالارفتن سرعت برنامه‌تون می‌شه.

۴.ابعاد نمایه‌هایی که باید برای هر کیفیت تصویر بسازید، تو جدول اومده:

کیفیت تصویر نمایه‌ی برنامه نوار فعالیت نمادهای کوچک اطلاعیه
mdpi 48x48 px 32x32 px 16x16 px 24x24 px
hdpi 72x72 px 48x48 px 24x24 px 36x36 px
tvdpi (use hdpi) (use hdpi) (use hdpi) (use hdpi)
xhdpi 96x96 px 64x64 px 32x32 px

48x48 px

xxhdpi 144x144 px 96x96 px 48x48 px 72x72 px

نکته: اندروید کیفیت تصویر ldpi رو هم پشتیبانی می‌کنه اما لازم نیست شما براش تصویری تهیه کنید، خود اندورید تصویری که در hdpi گذاشتید رو ابعادش رو نصف می‌کنه و برای گوشی‌هایی که ldpi هستند استفاده می‌کنه.

۵.وقتی می‌خواید پروژه بسازید تو یه مرحله، ازتون می خواد که اگه نمایه‌ای برای برنامه‌تون آماده کردید وارد کنید:

اگر نمایه‌های ابعاد مختلفی که برای برنامه‌تون تهیه کردید فرقی نمی‌کنه، (مثلا بعضی‌ها برای اندازه‌های بزرگتر جزئیات بیشتری تو تصویرشون می‌ذارن و تو اندازه‌های کوچکتر جزئیات رو کمتر می‌کنن تا خواناتر بشه) می‌تونید تو این مرحله، بزرگترین اندازه نمایه‌ای که درست کرید رو بهش بدید، خودش بقیه اندازه‌ها رو براتون می‌سازه. اگر بخواید مثلا فقط mdpi رو تغییر بدید می‌تونید به پوشه‌اش برید و اونو تغییر بدید، به این صورت که فایل رو بکشید و بندازید توش، اینطوری:

۶.اندروید خودش پیشنهاد می‌کنه که اسم تصویر مربوط به نمایه‌ی برنامه رو ic_launcher بذارید اما اگه می‌خواید یه اسم دیگه بذارید، باید فایل AndroidManifest.xml رو باز کنید، به زبانه application برید و روی دکمه Browse جلوی icon بزنید. (مراحل توی تصویر هست)

فقط حواستون باشه که حتما برای هر کیفیت تصویر جداگانه فایل png اش رو بسازید و تو پوشه‌اش قرار بدید هرچند اگه این‌کارو نکنید اندروید خودش ابعاد تصویر رو کوچیک بزرگ می‌کنه اما باعث می‌شه برنامه‌تون کند بشه، چون بار این کار می‌یفته رو دوش پردازنده گوشی و اونو کند می‌کنه.

 



 




نظر شما درباره این مطلب:




مطالب مشابه

14

مطالبی که باید از قبل بلد باشید (متخصصین ایران)


متخصصین ایران طراحی سایت

مطالبی که باید از قبل بلد باشید....


مطالبی که باید از قبل بلد باشید (متخصصین ایران)                  (اطلاعات بیشتر)

15

مراحل نصب "بسته توسعه نرم افزار" SDK برای کاربران مک (متخصصین ایران)


متخصصین ایران طراحی سایت

۱. دانلود "بسته توسعه نرم افزار" یا SDK ....

 


مراحل نصب "بسته توسعه نرم افزار" SDK برای کاربران مک  (متخصصین ایران)                  (اطلاعات بیشتر)

17

ایجاد دستگاه مجازی (Virtual Device) یا شبیه ساز (emulator) برای اندروید (متخصصین ایران)


متخصصین ایران طراحی سایت

1.وقتی در طول توسعه نرم افزاتون، احتیاج به آزمایش (تست) برنامتون دارید، حتما نیاز به....


 ایجاد دستگاه مجازی (Virtual Device) یا شبیه ساز (emulator) برای اندروید (متخصصین ایران)                  (اطلاعات بیشتر)

18

مراحل نصب ایکلیپس (Eclipse) روی مک (متخصصین ایران)


متخصصین ایران طراحی سایت

۰.قبل از نصب ایکلیپس باید اس دی کی رو ....


 مراحل نصب ایکلیپس (Eclipse) روی مک  (متخصصین ایران)                  (اطلاعات بیشتر)

19

مراحل نصب ایکلیپس (Eclipse) روی ویندوز (متخصصین ایران)


متخصصین ایران طراحی سایت

۰.قبل از نصب ایکلیپس باید اس دی کی رو نصب کرده باشید....

 


مراحل نصب ایکلیپس (Eclipse) روی ویندوز  (متخصصین ایران)                  (اطلاعات بیشتر)

16

مراحل نصب بسته بندی Android SDK platform (متخصصین ایران)


متخصصین ایران طراحی سایت

1.برنامه SDK Manager رو اجرا کنید...


 مراحل نصب بسته بندی Android SDK platform  (متخصصین ایران)                  (اطلاعات بیشتر)