آیکون های گفتگو، آیکون های گفتگو

نمادهای گفتگو در کادرهای گفتگوی پاپ آپ نشان داده می شوند که کاربر را برای تعامل ترغیب می کند. آنها از شیب نور و سایه داخلی استفاده می کنند تا در پس زمینه تاریک برجسته شوند.

همانطور که در ارائه مجموعه‌های آیکون مخصوص تراکم توضیح داده شد، باید مجموعه‌های آیکون جداگانه‌ای برای صفحه‌های با چگالی کم، متوسط ​​و بالا ایجاد کنید. این تضمین می کند که نمادهای شما به درستی در طیف وسیعی از دستگاه هایی که برنامه شما می تواند روی آنها نصب شود نمایش داده می شود. جدول 1 را برای فهرستی از اندازه نمادهای نهایی توصیه شده برای هر تراکم ببینید. همچنین، نکاتی برای طراحان را ببینید تا پیشنهاداتی در مورد نحوه کار با مجموعه‌ای از نمادها داشته باشید.

جدول 1. خلاصه ابعاد نماد گفتگوی تمام شده برای هر یک از سه تراکم صفحه نمایش تعمیم یافته.

ldpi (120 dpi)
(صفحه نمایش با چگالی کم)
mdpi (160 نقطه در اینچ)
(صفحه نمایش با چگالی متوسط)
hdpi (240 dpi)
(صفحه نمایش با تراکم بالا)
xhdpi (320 dpi)
(صفحه نمایش با تراکم فوق العاده بالا)
اندازه نماد گفتگو 24 × 24 پیکسل 32 × 32 پیکسل 48 × 48 پیکسل 64 × 64 پیکسل

هنر نهایی باید به عنوان یک فایل PNG شفاف صادر شود. از رنگ پس زمینه استفاده نکنید .

الگوهای ایجاد آیکون در Adobe Photoshop در بسته قالب آیکون موجود است.

تمامی نسخه های اندروید

دستورالعمل‌های زیر نحوه طراحی آیکون‌های گفتگو برای همه نسخه‌های پلتفرم اندروید را شرح می‌دهند.

ساختار

  • نمادهای گفتگو دارای قاب امن 1 پیکسلی هستند. شکل پایه باید درون قاب محافظ قرار بگیرد، اما ضد نام مستعار شکل گرد می‌تواند روی قاب امن همپوشانی داشته باشد.
  • تمام ابعاد مشخص شده در این صفحه بر اساس اندازه 32x32 پیکسل در Adobe Photoshop است. 1 پیکسل از padding را در اطراف جعبه محدود کننده در داخل قالب فتوشاپ نگه دارید.
نمایی از ساختار آیکون گفتگو

شکل 1. Safeframe و گرادیان پر برای نمادهای گفتگو. اندازه آیکون 32x32 است.

نور، افکت ها و سایه ها

نمادهای دیالوگ صاف هستند و به صورت رو به رو تصویر می شوند. برای اینکه در پس زمینه تاریک برجسته شوند، آنها با استفاده از گرادیان نور و سایه داخلی ساخته می شوند.

نمای نور، افکت‌ها و سایه‌ها برای آیکون‌های گفتگو.

شکل 2. نور، جلوه ها و سایه ها برای آیکون های گفتگو.

1. قسمت جلو: روکش گرادیان | زاویه 90 درجه
پایین: r 223 | g 223 | b 223
بالا: r 249 | g 249 | b 249
محل رنگ پایین: 0%
مکان رنگ برتر: 75%
2. سایه درونی: سیاه | شفافیت 25 درصد |
زاویه -90 درجه | فاصله 1px | اندازه 0px

قدم به قدم

  1. اشکال اصلی را با استفاده از ابزاری مانند Adobe Illustrator ایجاد کنید.
  2. شکل را در ابزاری مانند Adobe Photoshop وارد کنید و مقیاس آن را طوری تنظیم کنید که تصویری با ابعاد 32x32 پیکسل در پس‌زمینه شفاف قرار گیرد.
  3. افکت های مشاهده شده در شکل 2 را برای فیلتر مناسب اضافه کنید.
  4. نماد را در ابعاد 32x32 به عنوان یک فایل PNG با شفافیت فعال صادر کنید.
،

نمادهای گفتگو در کادرهای گفتگوی پاپ آپ نشان داده می شوند که کاربر را برای تعامل ترغیب می کند. آنها از شیب نور و سایه داخلی استفاده می کنند تا در پس زمینه تاریک برجسته شوند.

همانطور که در ارائه مجموعه‌های آیکون مخصوص تراکم توضیح داده شد، باید مجموعه‌های آیکون جداگانه‌ای برای صفحه‌های با چگالی کم، متوسط ​​و بالا ایجاد کنید. این تضمین می کند که نمادهای شما به درستی در طیف وسیعی از دستگاه هایی که برنامه شما می تواند روی آنها نصب شود نمایش داده می شود. جدول 1 را برای فهرستی از اندازه نمادهای نهایی توصیه شده برای هر تراکم ببینید. همچنین، نکاتی برای طراحان را ببینید تا پیشنهاداتی در مورد نحوه کار با مجموعه‌ای از نمادها داشته باشید.

جدول 1. خلاصه ابعاد نماد گفتگوی تمام شده برای هر یک از سه تراکم صفحه نمایش تعمیم یافته.

ldpi (120 dpi)
(صفحه نمایش با چگالی کم)
mdpi (160 نقطه در اینچ)
(صفحه نمایش با چگالی متوسط)
hdpi (240 dpi)
(صفحه نمایش با تراکم بالا)
xhdpi (320 dpi)
(صفحه نمایش با تراکم فوق العاده بالا)
اندازه نماد گفتگو 24 × 24 پیکسل 32 × 32 پیکسل 48 × 48 پیکسل 64 × 64 پیکسل

هنر نهایی باید به عنوان یک فایل PNG شفاف صادر شود. از رنگ پس زمینه استفاده نکنید .

الگوهای ایجاد آیکون در Adobe Photoshop در بسته قالب آیکون موجود است.

تمامی نسخه های اندروید

دستورالعمل‌های زیر نحوه طراحی آیکون‌های گفتگو برای همه نسخه‌های پلتفرم اندروید را شرح می‌دهند.

ساختار

  • نمادهای گفتگو دارای قاب امن 1 پیکسلی هستند. شکل پایه باید درون قاب محافظ قرار بگیرد، اما ضد نام مستعار شکل گرد می‌تواند روی قاب امن همپوشانی داشته باشد.
  • تمام ابعاد مشخص شده در این صفحه بر اساس اندازه 32x32 پیکسل در Adobe Photoshop است. 1 پیکسل از padding را در اطراف جعبه محدود کننده در داخل قالب فتوشاپ نگه دارید.
نمایی از ساختار آیکون گفتگو

شکل 1. Safeframe و گرادیان پر برای نمادهای گفتگو. اندازه آیکون 32x32 است.

نور، افکت ها و سایه ها

نمادهای دیالوگ صاف هستند و به صورت رو به رو تصویر می شوند. برای اینکه در پس زمینه تاریک برجسته شوند، آنها با استفاده از گرادیان نور و سایه داخلی ساخته می شوند.

نمای نور، افکت‌ها و سایه‌ها برای آیکون‌های گفتگو.

شکل 2. نور، جلوه ها و سایه ها برای آیکون های گفتگو.

1. قسمت جلو: روکش گرادیان | زاویه 90 درجه
پایین: r 223 | g 223 | b 223
بالا: r 249 | g 249 | b 249
محل رنگ پایین: 0%
مکان رنگ برتر: 75%
2. سایه درونی: سیاه | شفافیت 25 درصد |
زاویه -90 درجه | فاصله 1px | اندازه 0px

قدم به قدم

  1. اشکال اصلی را با استفاده از ابزاری مانند Adobe Illustrator ایجاد کنید.
  2. شکل را در ابزاری مانند Adobe Photoshop وارد کنید و مقیاس آن را طوری تنظیم کنید که تصویری با ابعاد 32x32 پیکسل در پس‌زمینه شفاف قرار گیرد.
  3. افکت های مشاهده شده در شکل 2 را برای فیلتر مناسب اضافه کنید.
  4. نماد را در ابعاد 32x32 به عنوان یک فایل PNG با شفافیت فعال صادر کنید.