طراحی Mobile first

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

طراحی تطبیقی

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

• 4-6 اینچ – طرح‌بندی برای گوشی‌های هوشمند
• 7-11 اینچ – طرح‌بندی برای تبلت
• 12 اینچ و بالاتر- طرح‌بندی برای دسکتاپ

طراحی ریسپانسیو

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

طراحی اولیه موبایل یا Mobile first

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

شرکت تکران ارائه دهنده خدمات طراحی سایت در سطحی حرفه‌ای و بین‌المللی است. برای مشاهده نمونه کارهای طراحی سایت به لینک زیر مراجعه نمایید:

نمونه کار طراحی سایت

چرا طراحی Mobile first برای تجارت ضروری است؟

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

کار با محتوا

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

نکاتی برای طراحی Mobile first

•  آماده کردن یک لیست: یک سند یا صفحه گسترده با لیست کامل محتوایی که می‌خواهید در وب‌سایت قرار دهید، تهیه کنید.
• مطالب را در اولویت قرار دهید: عناصر مهم از آن سند یا صفحه گسترده به قابل مشاهده‌ترین نقاط می‌روند.
• تاکید بر یکنواختی: تیم خود را تشویق کنید که طراحی را از کوچکترین تا بزرگترین صفحه نمایش شروع کنند و به تدریج اندازه را افزایش دهند.
• افزایش ناحیه لمسی: این ضروری است زیرا اثر انگشت به طور قابل توجهی گسترده تر از یک ماوس پیکسلی است.
• از تصاویر گرافیکی بزرگ و پیچیده خودداری کنید. عکاسی منظره و گرافیک‌های پیچیده روی صفحه نمایش‌های ضعیف نمایش داده می‌شوند.
• تایپوگرافی: مطمئن شوید که اندازه متون مهم کمتر از 16pt نباشد.
• حوزه محتوای امن را فراموش نکنید. محتوا نباید به لبه‌های صفحه بچسبد. اپل برای جلوگیری از این امر، فاصله pf را 16 پیکسل توصیه می‌کند.