وبلاگ کاسپید

وایرفریم در طراحی اپلیکیشن موبایل

وایرفریم در طراحی اپلیکیشن موبایل

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

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

اصطلاحات و مفاهیم رابط کاربری موبایل

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

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

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

تب بار یا نوار تب

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

کنترل بخش

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

اکشن شیت

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

استفاده از الگوهای طراحی

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

رابط کاربری موبایل

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

ضربه و دوبار ضرب:

شبیه کلیک کردن با موس

بالا و پایین کشیدن:

مانند بالا و پایین کردن صفحات طولانی و دراز در وب سایت. همچنین برای حذف محتوا از یک لیست استفاده می شود.

فشردن و نگاه داشتن:

این کار بیشتر برای مرتب کردن اپ های روی صفحه موبایل به کار می رود.

زوم کردن از طریق انگشتان دست:

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

2 تیر 1398
برخی برند های طرف قرارداد با کاسپید
  • زعفران سحرخیززعفران سحرخیز
  • شرکت نیک کالاشرکت نیک کالا
  • صنایع غذایی مارینصنایع غذایی مارین
  • شرکت تهران داروشرکت تهران دارو
  • شرکت زرین غزال (بستنی دایتی)شرکت زرین غزال (بستنی دایتی)
  • شرکت پاکسانشرکت پاکسان
  • فدراسیون فوتبالفدراسیون فوتبال
  • بیمه رازیبیمه رازی
  • چیچکچیچک
  • بهریزانبهریزان
  • برنج آوازهبرنج آوازه
  • پخش قاسم ایرانپخش قاسم ایران
  • لینا نیکلینا نیک
  • عطر بیکعطر بیک
  • امرسانامرسان
  • صنایع غذایی هانیصنایع غذایی هانی
  • نوین زعفراننوین زعفران
  • صنایع غذایی شام شامصنایع غذایی شام شام
  • شرکت ایران گلابشرکت ایران گلاب
  • هتل مارینا پارک کیشهتل مارینا پارک کیش
  • شرکت ایرانکو (سونی)شرکت ایرانکو (سونی)
  • شرکت ساپکوشرکت ساپکو
  • چینی زرینچینی زرین
  • پمپ ایرانپمپ ایران
  • مارگارینمارگارین
  • صنایع غذایی ب.آصنایع غذایی ب.آ
  • جهان ترابر ماهانجهان ترابر ماهان
  • کیش ایرکیش ایر
  • خانه و آشپزخانهخانه و آشپزخانه
  • پارمیداپارمیدا