طراحی سیستم ناوبری مبتنی بر Gesture در iOS Apps

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

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

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

Core Gestures در iOS Navigation

دستورالعمل های رابط انسانی اپل (HIG) حرکات استانداردی را تعریف می کنند که کاربران انتظار دارند به طور مداوم در سراسر برنامه ها کار کنند. لور این تعاملات آشنا به کاربران کمک می کند تا در خانه احساس کنند.

Swipe

حرکت کشیدن شاید همه کاره ترین برای ناوبری باشد. Swiping چپ یا راست می تواند بین بازدیدها (به عنوان مثال در یک گالری عکس)، یک منوی نوار کناری (از لبه چپ در بسیاری از برنامه های مبتنی بر ناوبری) را نشان دهد یا یک صفحه را رد کند (به پشت در یک UI ناvigation Controller).

ضربه زدن

ضربه ساده پایه انتخاب است.در زمینه های ناوبری، یک ضربه می تواند عمیق تر به یک سلسله مراتب (به عنوان مثال، استفاده از یک ردیف در یک دید جدول) یا ایجاد یک عمل مانند باز کردن یک ورق پایین است. دو ضربه کمتر رایج برای ناوبری اما می تواند در محتوا زوم.

Pinch

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

طولانی مدت مطبوعات

یک مطبوعات طولانی (یا لمس نیرو در دستگاه های قبلی) منوهای متنی، پیش نمایش ها یا اقدامات سریع تر را بدون پیمایش از بین می برد، به عنوان مثال، فشار طولانی مدت پیش نمایش پیام می تواند گزینه های پاسخ بدون باز کردن مکالمه کامل را نشان دهد.

Edge Swipe

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

اصول طراحی برای ناوبری مبتنی بر Gesture

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

کشف قابلیت کشف

Gestures نامرئی هستند. کاربران باید به طور شهودی آنها را یاد بگیرند یا درک کنند.استفاده از نکات بصری (به عنوان مثال، یک فلش ظریف، یک نشانگر کشیدن، یا یک آموزش بیش از حد در راه اندازی اول) الگوهای ثابت مانند همیشه برای بازگشت به عقب - کمک به کاربران به سرعت یاد بگیرند.

سازگاری

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

بازخورد

هر حرکت باید بازخورد فوری و روشن ارائه دهد (در کنار حرکت یک دیدگاه ارائه دهد)، بازخوردهای ظریف (استفاده از UIImpactFeedbackGenerator یا UINotificationFeedbackGenerator)، و نشانه های صوتی (در صورت لزوم) تأیید می کنند که این حرکت به رسمیت شناخته شده است.

دسترسی

همه کاربران نمی توانند حرکات را با دقت انجام دهند. روش های جایگزین برای ناوبری را فراهم کنند: دکمه ها، میانبر صفحه کلید (در iPad با صفحه کلید)، اقدامات سفارشی VoiceOver و پشتیبانی کنترل سوئیچ ها تنها راه برای انجام اقدامات بحرانی نیستند.

اجتناب از درگیری ها

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

عملکرد Performance

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

پیاده سازی تشخیصگرهای Gesture در iOS

iOS مجموعه ای از تشخیص دهنده های حرکتی بتنی را در زیر (FLT:3) ارائه می دهد، در اینجا چگونگی اجرای الگوهای ناوبری مشترک وجود دارد.

راه اندازی Basic

بلافاصله یک تشخیص دهنده حرکتی را تنظیم کنید، هدف و عمل خود را تنظیم کنید، خواص را پیکربندی کنید (direction، تعداد ضربه ها و غیره)، و آن را به یک دید متصل کنید.

let swipeBack = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipeBack))
swipeBack.direction = .right
view.addGestureRecognizer(swipeBack)

پیشرفته Configuration

برای کنترل بیشتر دانه، از پروتکل نماینده استفاده کنید تا اجازه دهید یک حرکت کششی تنها زمانی که انگشت کاربر در نزدیکی لبه چپ شروع می شود (پر کشیدن برای عقب):

func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
 guard let swipe = gestureRecognizer as? UISwipeGestureRecognizer else { return false }
 let location = swipe.location(in: view)
 return location.x < 30
}

همزمان Gesture

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

انتقال های سفارشی

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

طراحی یک ناوبری منو با Gestures (Example)

بسیاری از برنامه های مدرن iOS از یک منوی همبرگر استفاده می کنند که از سمت چپ می لغزد.یک جایگزین مبتنی بر ژست می تواند یک ضربه کش از لبه برای نشان دادن یک پانل جانبی (مانند نمای تقسیم iPad) باشد.

  1. یک ژست لبه را به دیدگاه اصلی محتوا (با لبه ها: سمت چپ) متصل کنید.
  2. در حرکت شروع شد، یک دید منو به سمت چپ اضافه کنید؛ در عوض، موقعیت x خود را متناسب با آن به روز کنید؛ در پایان، آن را به طور کامل باز یا بسته بر اساس سرعت / حالت.
  3. یک دکمه برای کاربرانی که نمی توانند حرکت کنند، فراهم کنید.
  4. استفاده از [[FLT 10]] برای انیمیشن های تعاملی برای اجازه بازگشت به میان وعده ها.

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

تست و جلوگیری از حرکت در جاده

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

ابزارها و روش ها

  • uggerXcode Deb: تجسم حالات تشخیص دهنده (ممکن است، شروع، تغییر، به پایان رسید، لغو، شکست خورده) با استفاده از چشم انداز اشکال زدایی.
  • ] بازرس دسترسی: بررسی کنید که کاربران VoiceOver می توانند به هر اقدام دسترسی داشته باشند.
  • تست کاربر: کاربران واقعی را مشاهده کنید که حرکات را انجام می دهند؛ تردید، محرک های تصادفی یا تلاش های مکرر.
  • نظارت بر عملکرد: نرخ فریم را در هنگام اجرای حرکت با استفاده از ابزارهای انیمیشن اصلی بررسی کنید.

سقوط های معمول

  • محرک های شناسایی: یک کشیدن برای بازگشت ممکن است اشتباه باشد زمانی که کاربر سعی دارد یک ردیف را انتخاب کند.
  • تعارضات سیستم: در آیفون با Face ID، نشانگر خانه می تواند تعارض با حرکات لبه پایین استفاده از اموال [FLT 11] اجازه می دهد تا حرکت خود را اول، اما همیشه ارائه یک عقب نشینی.
  • ] کشف قابلیت کشف: اگر کاربران نمی دانند یک حرکت وجود دارد، آنها گیر می کنند.استفاده از نکات مداوم، یا UI سازگار که نشان دهنده دکمه ها پس از گذشت زمان.

قابلیت دسترسی و طراحی بی نتیجه

ناوبری مبتنی بر موتور نباید کاربران را با اختلالات حرکتی حذف کند.

  • [FLT: 1 ] هر عمل تکان دهنده باید از طریق یک دکمه یا میانبر صفحه کلید در دسترس باشد.
  • استفاده از برای افشای اعمال به عنوان اعمال نام گذاری شده است.
  • [[۱] [۱۰] [۱۰] [۱۰] [۱۰] [۱۰]] [[۱۰]]] [[۳]]] [[۱۰]]] [۱]] [۱] [۱]] [۱۰] [۱]] [۱۰] [۱] [۱] [۱] [۱] [۱]] [۱] [۳] [۱] [۱] [۱] [۳] [۳] [۳] [۱] [۱] [۱] [۳] [۳] [۱] [۱] [۱] [۱] [۱] [۱] [۳] [۳] [۱] [۱]]]] [۱]]]]] [۳] [۳] [۳] [۱] [۳] [۳] [۱] [۱] [۳] [۱] [۱] [۱] [۳] [۳] [۳] [۳] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۱] [۳]
  • خدمات مسکن: مراقب کمک های درمانی و خدمات لمسی باشید که رفتار حرکتی را تغییر می دهند - هرگز فرض نکنید که نقطه لمس دقیق است.

نتیجه گیری

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

برای مطالعه بیشتر، با دستورالعمل های رابط کاربری اپل (FLT:0) در مورد Gestures [FLT: 1] مشورت کنید، ، و مقاله عالی طراحی تعاملات مایع از WWDC برای بهترین شیوه های دسترسی به دسترسی، [F6G]