سایز استاندارد طراحی ui

حتما تا کنون درباره طراحی ریسپانسیو شنیده اید که یکی از مهم ترین اصول طراحی ui است. طراحی ریسپانسیو مسئولیتی است که برعهده طراحUI قرار دارد. آشنایی با انواع دستگاه های دیجیتال، دانستن سایز متناسب با هر دستگاه و طراحی مرتبط و مناسب از ویژگی هایی است که یک طراح باید با آن آشنا باشد. در ادامه این مطلب به سوالات زیر پاسخ خواهیم داد:

• هنگام طراحی برای iOS، اندروید یا وب، اندازه صفحه نمایش من چقدر باید باشد؟
• از چه اندازه آیکون در طراحی ui استفاده کنم؟
• DP و PT چیست و چه رابطه ای با پیکسل (Px) دارد؟
• چرا طراحی ui من ناسازگار و نامتعادل به نظر می رسد؟

یکی از مشکلات رایج حین طراحی رابط کاربری، ابعاد نامناسب، کمبود فضای سفید، استفاده ضعیف از رنگ و تایپوگرافی بد و درهم تنیدگی مطالب است. برای حل این مشکل آشنایی با مفاهیم DP/Pt/Px ضروری است.

همچنین بخوانید:

بهترین افزونه های فیگما برای طراحان (2021)

DP/Pt/Px چیست؟

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

pt (Point)

هر Point معادل ۰٫۰۱۳۸۳ اینچ و یا ۰٫۳۵۲۵ میلیمتر است. این واحد به dpi ربطی ندارد و در همه دستگاه ها هم اندازه میباشد.

px (Pixel)

برابر باpixcel واقعی روی صفحه نمایش میباشد..
نکته: در صورت استفاده از واحدهای dp و sp برای view ها اندازه آنها متناسب با دستگاه تنظیم میشود. اگر از pt استفاده کنیم اندازه هر viewدر همه دستگاهها برابر است و اگر از px استفاده کنیم اندازه ها بر اساس رزولوشن صفحه نمایش تنظیم میشود.

dp (Device Independent Pixel)

این واحد اندازه گیری هم به صورت dip و هم به صورت dp نوشته می شود. در حقیقت dip یک واحد پیکسلی مجازی است که بر اساس یک صفحه نمایش با رزولوشن 160 dpi طراحی شده است. به عبارت دیگر یک dip معادل با یک پیکسل در یک صفحه نمایش که دارای 160 نقطه در هر اینچ است می باشد. چنانچه کلیه عناصر در یک layout را در توسعه اندروید بر حسب dip تعیین کنیم، این اطمینان را خواهیم داشت که به طور مثال یک دکمه در دستگاه هایی با صفحه هایی با تراکم متفاوت به طور متناسب بزرگ یا کوچک خواهد شد.
هنگامی که طرح خود را به توسعه دهندگان می سپارید، بیشتر اوقات آنها می دانند که آیا از DP، Pt یا Px استفاده کنند. اما اگر شما به عنوان مبتدی می خواهید کار خود را به عنوان یک طراح ui شروع کنید، باید اندازه و سایز هر واحد را به خوبی بدانید.

px = dp * (dpi / 160)
فرمول بالا رابطه بین px,dp و dpi را نشان می دهد.بهترین گزینه برای طراحی واسط کاربر(UI) استفاده از واحد dp است که نمایش متناسب با نمایشگرهای مختلف با چگالی های متفاوت را تضمین می کند.

sp و sip : چیزی شبیه به dp است و برای مشخص کردن اندازه قلم به کار می رود.ولی با این تفاوت که با تنظیمات اندازه قلم(font size) کاربر نیز هماهنگ است در نتیجه خروجی،متناسب با چگالی نمایشگر و اندازه قلم تنظیم شده توسط کاربر خواهد بود.
در مجموع استفاده از dp و sp به طور موکد توصیه شده است زیرا باعث می شود برنامه شما در گوشی های مختلف دارای تناسب اندازه یکسانی باشد(چه اندازه کنترل ها و چه اندازه متن) و همچنین در صورتی که اندازه قلم توسط کاربر در دستگاه تغییر کند،تغییرات در برنامه نیز اعمال می شود.

توصیه می کنیم مطالعه کنید:

معرفی بهترین مجموعه های طرح سه بعدی برای طراحی UI

شروع طراحی ui

قبل از طراحی ui باید از خود بپرسید: پلتفرمی که برای آن طراحی می کنید چیست؟ اندروید، iOS یا دسکتاپ؟ بسته به پلتفرم، پرکاربردترین و احتمالاً کوچکترین اندازه صفحه نمایش را باید هدف قرار دهید.

همان طور که در بالا مشاهده می کنید، 360×640 پرکاربردترین رزولوشن صفحه نمایش موبایل است. زیرا اندروید سیستم عامل موبایل غالب در جهان است و همه دستگاه های اندرویدی (اولیه) با نسبت تصویر 16:9 دارای صفحه نمایش 360×640 dp هستند. و بین iPhone 5 و iPhone X، هر مدل معمولی آیفون دارای وضوح صفحه نمایش 375×667 pt بود. به صورت کلی پیشنهاد می شود برای اندروید با ابعاد 360×640 و برای iOS 375×667 طراحی کنید.
از سوی دیگر، 1366×768 همچنان غالب ترین رزولوشن صفحه نمایش برای دسکتاپ است. بنابراین توصیه می کنیم هنگام طراحی برای دسک‌تاپ، این اندازه صفحه را هدف قرار دهید.

اجزای رابط کاربری اندروید

اکنون که می‌دانید 8pt Grid چیست و چرا مهم است، اجازه دهید اجزای رابط کاربری اندروید را بررسی کنیم.
یک صفحه رابط کاربری برنامه اندروید معمولاً از 4 قسمت تشکیل شده است:

منطقه محتوا

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

نوار برنامه

نوار برنامه معمولاً از یک عنوان و تعدادی نماد تشکیل شده است. اگر آن را تجزیه کنیم به این صورت می شود:

نوار پیمایش پایین

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

لبه ها و حاشیه ها

احتمالاً قبلاً متوجه شده اید که 16dp مقدار استاندارد برای حاشیه چپ و راست است. گاهی افراد از 8 و گاهی 24 استفاده می کنند اما در اکثر موارد کمتر از 16 توصیه نمی شود.
با این حال، هنگامی که محتوای متن/تصویر را در داخل کارت قرار می دهید، می توانید از حاشیه های 8dp دور شوید بدون اینکه UI مشغول به نظر برسد، اما باید مطمئن شوید که حداقل یک حاشیه 12dp بین محتویات داخل کارت و کارت باقی می گذارید. به عنوان یک مبتدی، فقط 16 dp را در هر دو طرف بگذارید. با کسب تجربه بیشتر یاد خواهید گرفت که از فضاها بهتر استفاده کنید.

دکمه ها

هنگام استفاده از دکمه ها، آنها را 48dp بالا ببرید. دستورالعمل‌های طراحی متریال Google توصیه می‌کنند که هر ناحیه قابل ضربه زدن باید حداقل 48×48 dp باشد. کمتر از آن دقت را کاهش می دهد. هنگام استفاده از 2 دکمه در کنار هم، حداقل 16 dp فاصله بین آنها قرار دهید.

با این حال، بسته به پروژه خود می توانید از دکمه های کوچکتر یا بزرگتر استفاده کنید، اما مطمئن شوید که هیچ عنصر UI قابل لمس دیگری در شعاع 48 dp وجود ندارد.

ما در آژانس دیجیتال مارکتینگ تاس استفاده از دکمه ای با ارتفاع کمتر از 32 dp را توصیه نمی کنیم. و آن دکمه 32 dp نباید دکمه اقدام اولیه شما باشد. برای دکمه های اقدام اولیه، آنها را بین 40 تا 56 dp نگه دارید.
در یک دکمه با ارتفاع 48 dp، برچسب ها در 14-16 بهترین ظاهر را دارند، هنگام استفاده از برچسب های بزرگ، می توانید آنها را 12 کنید. اما کمتر از آن توصیه نمی شود.
توجه داشته باشید هنگام طراحی از پیکسل های شکسته استفاده نکنید. به عنوان مثال 44.23، 39.97. آنها را به پیکسل کامل گرد کنید. و دوباره مقیاس 8dp را دنبال کنید.
از چند سبک برای نمونه های مختلف از یک عنصر UI استفاده نکنید. تا حد امکان از نمادها / کامپوننت ها استفاده کنید. در وقت شما صرفه جویی زیادی خواهد کرد.

جمع بندی

دانستن اصول طراحی ui و سایز متناسب با هر پلتفرم برای طراحی ریسپانسیو از اهمیت به سزایی برخوردار است. در این مطلب به بررسی اصلی ترین مفاهیم برای دستیابی به بهترین طراحی پرداختیم. شما برای طراحی وبسایت خود متناسب با اصول و قواعد می توانید از خدمات طراحی UI آژانس دیجیتال مارکتینگ تاس بهره بگیرید.