دکمه عملیاتی شناور

دکمه عملیاتی شناور

این دکمه ها توسط یک آیکون دایره ای که بر روی رابط کاربری (UI) شناور است مشخص میشوند و رفتارهای حرکتی مانند تبدیل شدن (morph)، فعال سازی و یک نقطه anchore جا بجا شونده دارند.
دکمه های عملیاتی شناور در 2 اندازه هستند :
اندازه پیش فرض : برای اکثر موارد استفاده
اندازه کوچک : تنها جهت ایجاد پیوستگی با دیگر عناصر صفحه نمایش استفاده میشود.

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

دکمه عملیاتی شناور باید حداقل 16dp از لبه های موبایل و حداقل 24dp در تبلت/desktop فاصله داشته باشد.

md-c3

دکمه عملیاتی شناور
آیکون داخلی : 24x24dp
دایره دکمه عملیاتی : 56x56dp

md-c4

دکمه عملیاتی کوچک
آیکون داخلی : 24x24dp
دایره دکمه عملیاتی : 40x40dp

دکمه عملیاتی شناور در زمان متمرکز شدن (focused) پررنگ تر میشود و در صورت فشار دادن مقداری بالا میرود.
همه صفحه ها نیاز به دکمه عملیاتی شناور ندارند. این دکمه ها عملیات اصلی و کلیدی را در یک برنامه مشخص میکنند.

md-c5

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

md-c6

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

md-c7

md-c8

کیفیت ها :

دکمه های عملیاتی شناور را برای عملیات های مثبت مانند ایجاد کردن، علاقه مندی ها (favorite)، اشتراک گذاری، راهبری و explore به کار ببرید.
md-c9
از دکمه های عملیاتی شناور جهت عملیات های منفی و مخرب استفاده نکنید. مانند موارد زیر :
  • آرشیو یا زباله
  • عملیات های غیر خاص
  • خطا یا هشدار
  • عملیات های محدود مثل بریدن متن (cut)
  • کنترل هایی که باید در نوار ابزار باشند مانند کنترل میزان صدا یا تغییر رنگ یک فونت

دکمه های عملیاتی شناور شامل آیکون های نوار اپلیکیشن یا اطلاعیه های نوار وضعیت نمیباشند. علامت ها یا عناصر دیگر را در یک دکمه عملیاتی شناور لایه بندی نکنید.

md-c10

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

md-c11

md-c12

به دکمه های عملیاتی شناور بعد اضافی ندهید.

md-c11

md-c14

رفتار :

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

صفحه های جانبی :

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

لیست ها :

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

صفحه های تقسیم بندی شده (tabbed) :

در این صفحه ها، دکمه های عملیاتی شناور نباید در همان جهتی که محتوا از صفحه خارج میشود، خارج شوند(باید خلاف جهت هم باشد).

انتقالات (transition) :

دکمه عملیاتی شناور یک مثال منحصر به فرد از یک کاربرد اصلی در برنامه میباشد. از امتیاز ظاهری آن جهت ایجاد انتقالات زیبا برای یک عنصر کلیدی استفاده کنید.
انتقالات رایج شامل تریگر (trigger)، نوار ابزار (toolbar)، تبدیل شدن ، speed dial میباشند. این یک لیست کامل از انتقالات نمیباشد. دکمه های عملیاتی شناور طراحی شده اند تا انعطاف پذیر باشند. از انتقالاتی استفاده نمایید که برای برنامه و صفحه ای که دکمه در آن قرار میگیرد مناسب هستند.

تریگر (trigger) :

دکمه عملیاتی شناور میتواند به سادگی یک عملیات را ایجاد نموده یا به جایی راهبری نماید.

نوار ابزار (toolbar) :

دکمه عملیاتی شناور میتواند بعد از فشار دادن تبدیل به نوار ابزار شود یا در هنگام scroll کردن تبدیل به یک نوار ابزار شود. نوار ابزار میتواند شامل عملیات های مریوطه، فیلدهای متنی و جستجو یا هر آیتم دیگری که میتواند مورد استفاده قرار بگیرد، باشد.
md-c15
md-c16
md-c17
md-c18
دکمه عملیاتی در هنگام scroll تبدیل به نوار ابزار میشود

 

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

md-c19
md-c20

Speed dial :

دکمه عملیاتی شناور میتواند در صورت فشار دادن، عملیات های مرتبطرا نمایش دهد. زمانی که منو فراخوانی میشود، دکمه باید در صفحه باقی بماند. فشار دادن همان دکمه یا باید باعث فعال شدن رایج ترین عملیات شود یا منوی باز شده را ببندد.
md-c21
md-c22
md-c23
نمایش لیستی از عملیات های مرتبط در صورت فشار دادن دکمه
نمایش لیستی از عملیات های مرتبط در صورت فشار دادن دکمه

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

md-c25
md-c26
md-c27
در صورت فشار دادن دکمه تبدیل به یک برگه میشود
در صورت فشار دادن دکمه تبدیل به یک برگه میشود

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

md-c29 md-c30
در دکمه های عملیاتی شناور منوهای سرریز قرار ندهید. حداکثر باید دو مرحله وجود داشته باشد تا از صفحه اولیه به مقصد مورد نظر برسید.
آپشن ها باید مقصدهای مشخص داشته باشند
آپشن ها باید مقصدهای مشخص داشته باشند
آپشن ها نباید حاوی منوهای سرریز باشند
آپشن ها نباید حاوی منوهای سرریز باشند

عملیات های سرریزی را در منوهای سرریز در نوارهای ابزار قرار دهید نه در دکمه های عملیاتی.

منوهای سرریز متعلق به نوارهای ابزار میباشند
منوهای سرریز متعلق به نوارهای ابزار میباشند

md-c34

دکمه های عملیاتی شناور، منوهای سرریز نیستند
دکمه های عملیاتی شناور، منوهای سرریز نیستند

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

دکمه عملیاتی میتواند به عملیات های مرتبط تبدیل شود
دکمه عملیاتی میتواند به عملیات های مرتبط تبدیل شود
دکمه عملیاتی نباید تبدیل به عملیات های نا مرتبط شود
دکمه عملیاتی نباید تبدیل به عملیات های نا مرتبط شود

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

دکمه عملیاتی شناور میتواند تبدیل به لیستی از مخاطبین شود
دکمه عملیاتی شناور میتواند تبدیل به لیستی از مخاطبین شود
دکمه عملیاتی شناور نباید تبدیل به عملیات های نامرتبط شود
دکمه عملیاتی شناور نباید تبدیل به عملیات های نامرتبط شود

تبدیل (morph) :

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

md-c40 md-c41 md-c42

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

تمام صفحه (full screen) :

دکمه عملیاتی شناور میتواند تبدیل به یک برگه متریال جدید شود که کل صفحه را میپوشاند.
این نوع تغییر معمولاً همراه با ایجاد محتوای جدید میباشد. در نتیجه، این حالت دیگر متدی برای بازگشت به حالت اولیه ندارد.
md-c44 md-c45 md-c46

md-c47
دکمه در صورت فشار دادن تبدیل به یک برگه متریال جدید میشود که کل صفحه را میپوشاند

صفحه های بزرگ :

یک دکمه عملیاتی شناور میتواند به یک نوار اپلیکیشن گسترده پیوست شود.
md-c48
یک دکمه عملیاتی شناور میتواند به یک نوار ابزار یا عنصر ساختاری داخل یک برگه پیوست شود. (به شرطی که عناصر دیگر را block نکند)
md-c49
یک دکمه عملیاتی میتواند به لبه یک برگه پیوست شود.
md-c50
در هر صفحه بیشتر از یک دکمه عملیاتی شناور نداشته باشید.
md-c51
دکمه عملیاتی شناور را با هر عنصر در صفحه همراه نکنید.
md-c51
جلسه مشاوره ی رایگان

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

در این جلسه تمام نیازهای شما را بررسی میکنیم.

کنار شما هستیم تا بهترین تصمیم ها را با هم بگیریم.

با ما تماس بگیرید:

041-33355073

از طریق واتساپ با ما در ارتباط باشید:

    09145269199

× مشاوره رایگان از طریق واتساپ