7 قانون اساسی برای استفاده از آیکون ها در طراحی UI

آیکون ها پیکتوگرام های کوچکی هستند که تقریباً در هر برنامه ای پیدا خواهید کرد. آنها به ما کمک می کنند فضای صفحه نمایش را ذخیره کنیم، ارتباط موثری برقرار کنیم و تعامل با یک محصول را سرگرم کننده تر کنیم.

اما با وجود اندازه آنها، ایجاد و استفاده از آیکون ها در طراحی UI آسان نیست. از آنجایی که نمادها مستقیماً بر قابلیت کشف ویژگی و تعداد خطاهایی که کاربران هنگام تعامل با یک محصول مرتکب می شوند تأثیر می گذارد، نمادهای بدون طراحی می توانند تأثیر منفی قابل توجهی بر تجربه کاربر از محصول شما داشته باشند. به همین دلیل است که طراحان رابط کاربری باید چند قانون یکپارچه را برای ایجاد و استفاده از آیکون ها در نظر بگیرند.

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

دارایی های طراحی وب در Envato Elements
برخی از بهترین کیت های نماد برتر را در Envato Elements خواهید یافت. این دارایی های ممتاز شامل ویژگی های با کیفیت بالا هستند که استفاده از آنها را در طراحی وب سایت خود سریع و آسان می کند. نمادهای سازگار با Figma، Adobe XD، Sketch و موارد دیگر را خواهید یافت. نه تنها این، با اشتراک Elements خود دسترسی نامحدودی به کیت های UI، قالب های وب، فونت ها، تم های وردپرس و سایر موارد مفید برای هر طراح وب خواهید داشت.

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

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

معنای نمادهای جهانی را دوباره تعریف نکنید. هنگامی که عملکرد نماد با آنچه کاربران انتظار دارند متفاوت باشد (یعنی نماد خانه به عنوان یک خروجی عمل می کند)، کاربران سردرگم می شوند.
از نمادهایی با معانی متناقض استفاده نکنید. نمادهایی که می توانند یک چیز را نشان دهند، نباید با هم در یک رابط کاربری استفاده شوند. برای مثال، نمادهای «قلب» و «ستاره» هر دو می‌توانند به معنای «افزودن به ویژگی‌ها» باشند. هنگامی که هر دو نماد را در رابط کاربری خود معرفی می کنید، بلافاصله سردرگمی ایجاد می کنید.
در صورت لزوم، برچسب های متنی را اضافه کنید. یک نماد با برچسب بهتر از یک نماد به تنهایی است. اگر می‌خواهید از نمادی استفاده کنید و مطمئن نیستید که واضح است، همیشه می‌توانید یک برچسب متنی در کنار آن اضافه کنید. کاربران برچسب را می خوانند و راحت تر معنی را درک می کنند.
متن جایگزین برای آیکون ها اضافه کنید. برچسب‌های متنی جایگزین، که به عنوان توضیحات دسترسی نیز شناخته می‌شوند، برای کاربران قابل مشاهده نیستند، اما فناوری قابل دسترسی (مانند ابزارهای VoiceOver) را امکان‌پذیر می‌کنند. چنین فناوری به کاربران نابینا می گوید که چه چیزی روی صفحه نمایش داده می شود.
انجام تجزیه و تحلیل رقبا تجزیه و تحلیل رقبا به شما می گوید که کاربران شما انتظار دیدن چه چیزی را دارند. توانایی کاربر برای رمزگشایی معنای یک نماد بر اساس تجربه قبلی آنها است. از آنجایی که کاربران از محصولاتی که استفاده می کنند یاد می گیرند، می توانید تجزیه و تحلیل رقبا را انجام دهید تا بفهمید رقبای شما از چه نمادهایی در محصولات خود استفاده می کنند. این شانس انتخاب نمادهایی را افزایش می دهد که مخاطب هدف شما با آنها آشنا باشد.
از آزمون 5 ثانیه ای استفاده کنید. این تکنیک به شما کمک می کند تا اطمینان حاصل کنید که نمایش تصویری مناسب را برای عنصر رابط خود انتخاب می کنید. اگر فکر کردن به یک نماد مناسب برای یک شی/عمل/رویداد بیش از پنج ثانیه طول بکشد، بعید است که بتوانید یک نمایش بصری مرتبط برای آن پیدا کنید.

2. آیکون ها را ساده و شماتیک نگه دارید – اما نه خیلی شماتیک!
ممکن است ایجاد آیکون هایی با جزئیات بصری زیاد وسوسه انگیز باشد تا تجسم واقعی تر شود. با این حال، این رویکرد می تواند بر روند طراحی شما تأثیر منفی بگذارد. هرچه جزئیات بصری بیشتری اضافه کنید، فرآیند طراحی آیکون خسته‌کننده‌تر می‌شود. ما اغلب مجموعه‌ای از آیکون‌ها را طراحی می‌کنیم، نه فقط یک آیکون، تا فرآیند طراحی آیکون زمان‌بر شود.
پایبندی به قانون استفاده از آیکون های ساده یک مزیت قابل توجه نیز به شما می دهد - آنها در اندازه ها و وضوح های مختلف صفحه نمایش به همان اندازه خوب به نظر می رسند. با توجه به اینکه ما معمولا

3. اطمینان حاصل کنید که آیکون های شما به خوبی مقیاس می شوند
حتی اگر از نمادهای شماتیک استفاده می کنید، تضمین نمی کند که آیکون های شما به خوبی مقیاس شوند. شما باید آنها را آزمایش کنید تا مطمئن شوید که نمادهای شما در اندازه های کوچک قابل تشخیص هستند. اندازه نماد خود را به 16 در 16 پیکسل تغییر دهید و ببینید آیا هنوز هم می توان آنها را به راحتی تشخیص داد

4. اندازه مناسب برای نمادهای خود را انتخاب کنید

اندازه نمادهای شما مهم است. وقتی نمادهای خود را خیلی کوچک می کنید، کاربران در تشخیص آنها و احتمالاً کلیک کردن روی آنها روی رابط های لمسی با مشکل مواجه می شوند. اما وقتی آیکون ها را خیلی بزرگ می کنید، توجه بیش از حد کاربران شما را طلب می کنند. اندازه آیکون های شما باید با توجه به رسانه ای که برای آن طراحی می کنید و متناسب با سایر عناصر رابط کاربری شما انتخاب شود.

بیایید ابتدا در مورد متوسط ​​صحبت کنیم. اگر برای دسکتاپ طراحی می‌کنید، می‌توانید برای آیکون‌های معمولی 24×24 پیکسل، برای آیکون‌های کوچک 16×16 پیکسل و برای آیکون‌های بزرگ 32×32 پیکسل انتخاب کنید. هنگامی که یک برنامه تلفن همراه طراحی می کنید، اندازه نمادهای شما باید بر اساس اندازه توصیه شده اهداف لمسی انتخاب شود. از آنجایی که کاربران با نمایشگرهای لمسی با انگشت شست خود ارتباط برقرار می کنند، نمادهای شما باید با انگشت شست سازگار باشند. هم اپل و هم گوگل اندازه یک هدف لمسی را پیشنهاد می‌کنند—دستورالعمل‌های رابط انسانی اپل استفاده از 44 x 44pt را پیشنهاد می‌کنند.

در همان زمان، Google Material Design یک هدف لمسی 48 x 48 پیکسل را توصیه می کند. در مقادیر مطلق، باید حدود 10 میلی متر باشد (که عرض انگشت متوسط ​​بزرگسالان است). اما مهم نیست که برای چه پلتفرمی طراحی می‌کنید، مطمئن شوید که کاربران می‌توانند بدون بزرگ‌نمایی از محصول شما استفاده کنند (برای تشخیص نمادها نباید بزرگ‌نمایی کنند).

نسبت نمادها
حالا بیایید در مورد نسبت ها صحبت کنیم. همه عناصر بصری در UI باید متناسب با یکدیگر اندازه شوند. وقتی صحبت از آیکون ها به میان می آید، اندازه آیکون ها باید متناسب با ظرفی که در آن قرار گرفته اند انتخاب شود، برای مثال، اگر می خواهید دکمه ای با نماد طراحی کنید، باید عرض و ارتفاع دکمه را در نظر بگیرید و انتخاب کنید. اندازه آیکون ها تا بتوانند به صورت ارگانیک در این ظرف قرار بگیرند.

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

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

6. مشخصات پلتفرم را در نظر بگیرید
در تمامی پلتفرم ها، سیستم آیکون های زیادی را برای آیتم های استاندارد تعریف می کند. حتی قبل از اینکه شروع به طراحی نمادها برای برنامه خود کنید، بررسی کنید که سیستم آیکون ها چه چیزی را ارائه می دهد. بیشتر اوقات، شما قادر خواهید بود هر آنچه را که نیاز دارید در کتابخانه سیستم پیدا کنید.

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

قبل از ایجاد نمادهای تنظیم شده برای برنامه خود، دستورالعمل های پلتفرم را بررسی کنید و مطمئن شوید که نمادهایی که می خواهید ایجاد کنید با دستورالعمل ها مطابقت دارند.

علاقمند به طراحی اپلیکیشن هستید؟ آموزش برنامه نویسی Android Studio را به شما پیشنهاد می کنیم.

7. آیکون های خود را با کاربران تست کنید
مهم نیست که چقدر زمان صرف طراحی رابط کاربری خود می کنید، همیشه باید برای آن تست قابلیت استفاده انجام دهید. تست قابلیت استفاده مشکلات قابلیت استفاده را که UI شما دارد نشان می‌دهد و به شما کمک می‌کند بفهمید آیا کاربران شما می‌توانند نمادهایی را که انتخاب کرده‌اید درک کنند یا خیر.

تکنیک های زیر می توانند برای آزمایش آیکون ها عالی باشند:

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

نتیجه گیری : 
استفاده از آیکون در طراحی UI چیزی شبیه طناب است! این کار را به درستی انجام دهید و می توانید تجربه کاربری محصول خود را بسیار افزایش دهید، اما اشتباه کنید و می توانید آسیب واقعی وارد کنید. این 7 قانون برای استفاده از آیکون باید به شما کمک کند تا آن را درست انجام دهید.

منبع