راهنمای کاربردی برای طراحی اول-موبایل

طراحی اول-موبایل، همونطور که از اسمش پیداست، طراحی برای نمایشگرهای کوچیکه. این روش یکی از بهترین استراتژی های ساخت وب سایت های واکنشگرا یا تطبیقیه.

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

اول-موبایل = اول-محتوا

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

فرایند طراحی اول-موبایل

ما در این بخش فرایندی رو که طراح هامون در دارکوب استفاده میکنند براتون توضیح میدیم.
همونطور که بارها در مقاله های قبلی گفتیم، اولین مرحله برای ساختار بندی قالب، طراحی وایرفریم هست. ما برای طراحی وایرفریم یا نمونه ساده اولیه، از کوجکترین نمایشگر شروع میکنیم و بعد فرایند رو به اندازه های مختلف نمایشگر انتقال میدیم.
به این ترتیب قالب با اندازه نمایشگر متناسب میشه و میتونید بیشتر تمرکزتونو روی محتوا بذارید.
فرایند ما شامل این مراحله:
1- تولید محتوا: تو یه جدول تمام عناصری رو که میخواهیم در موردشون مطلب داشته باشیم وارد میکنیم.
2- سلسله مراتب بصری: عناصری که برای محتوا در نظر گرفتیم، به ترتیب اهمیت اولویت بندی میکنیم و مشخص میکنیم که مهمترین عناصر به چه صورت نمایش داده بشن.
3- طراحی با کوچکترین قالب و بعد از اون مقیاس بندی: اول وایرفریم موبایل طراحی میشه و بعد اون رو بعنوان مدل قالب های بزرگتر بکار میبریم.
4- بزرگ کردن قسمتهای لمسی: انگشتها خیلی بزرگتر نشانگر ماوس هستند و به همین دلیل باید قسمتهای قابل لمس (کلیک) رو برای دستگاههای لمسی بزرگ کنیم. اپل برای این قسمتها 44 پیکسل رو پیشنهاد میکنه. اطراف هایپرلینکها رو فضای خالی بذارید و دکمه ها رو بزرگ کنید تا انگشت اشتباها به قسمتهای دیگه برخورد نکنه.
5- روی افکتهای وابسته به ماوس حساب نکنید: نیازی به گفتن نداره، اما معمولا طراح ها تو کارهای تعاملیشون به افکتهایی تکیه میکنند که با حرکت ماوس فعال میشه. حالا فرض کنید روی موبایل که ماوس وجود نداره این افکتها چه کاربردی میتونن داشته باشند؟ هنوز چنین افکتهایی برای انگشت ساخته نشده.
6- اپلیکیشن رو هم مد نظر قرار بدید: کاربرها موبایل طبق تجربه شون عادت به حرکت و کنترل کم دارند. میتونید از تعاملاتی استفاده کنید که به دوباره لود کردن صفحه نیاز نداشته باشه، مثل ویجت های قابل باز و بسته شدن، مسیریابی کشویی، درخواستهای آجاکس یا سایر عناصر.
7- از تصاویر بزرگ استفاده نکنید: عکسهای تمام صفحه و تصاویر پیچیده روی نمایشگرهای کوچیک خوب نمایش داده نمیشن. برای کاربرهای موبایل تصاویری بذارید که روی نمایشگرهای کوچیک هم قابل کنترل باشند.
8- طراحیتونو روی یک وسیله واقعی امتحان کنید: کامپیوتر یا لبتاپ تونو بذارید کنار و روی موبایل یا تبلت سایتتونو ببینید. صفحات مختلف رو چک کنید و مسیریابی سایت رو بررسی کنید. مسیریابیش آسونه؟ سریع لود میشه؟ خوندن متن و دیدن تصاویر راحته؟
این ها فقط اصول کار بود. وگرنه مراحل کامل خیلی بیشتر از اینهاست که شرح اونها در این مقاله نمیگنجه.

آموزش طراحی اول-موبایل

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

اولویتهای محتواتونو مشخص کنید

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

• جدیدترین مدل موتور
• پرفروش ترین موتور
• بهترین جاده برای موتورسواری
• اسم شرکت و تصویر
• مسیریابی (فهرست)
• جستجو
• پرفروشترین موتورها در رده دوم
• اعتبار هدایا
• نظر مشتریان
• آخرین پست وبلاگ

حالا میتونیم بر اساس فهرستی که درست کردیم، بقیه کارها رو با اعتماد به نفس کامل پیش ببریم.

حالت نمایش بر روی گوشی های هوشمند

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

حالت نمایش روی تبلت

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

حالت نمایش روی کامپیوترهای رومیزی

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

• اعتبار هدایا
• نظر مشتریها
• پست وبلاگ در مورد جدیدترین موتور رعد

خودتون برای طراحی وب سایتتون تصمیم بگیرید

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