طراحی متریال: ساختار

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

– بخش رابط کاربری (UI regions)

ساختار موبایل و تبلت شامل یک نوار برنامه (app bar) و دکمه شناور اکشن بصورت دائمی است. بخش داخلی (content area) محتوای اصلی اپ را در بر می‌گیرد. یک نوار اختیاری می‌تواند برای قابلیت‌های اضافی پایین دکمه اکشن افزوده شود. ناوبری کناری (side nav) بطور کلی بخشی از محوطه اپ را پوشش خواهد داد.

ساختار دسکتاپ نیز مانند موبایل و تبلت شامل نوار برنامه اصلی و دکمه شناور اکشن می‌باشد. در لی‌اوت دسکتاپ دست طراح باز است تا از دو ناوبری راست و چپ برای ابزارهای ثانویه و یا منوهای دلخواه مانند فیلترها استفاده نماید. این بخش ناوبری می‌تواند بصورت ثابت بوده و یا توسط دکمه‌ای فراخوانده شود. (مانند لی‌اوت موبایل)

دوری از مناطق L شکل در طراحی متریال

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

20150809172740

لبه‌ها را با کارت (card) و یا دکمه شناور اکشن از هم جداسازی کنید.

20150809173052از کارت‌ها وقتی به محتوای مدیریت شده نیاز دارید استفاده کنید. با کارت‌ها می‌توانید محتوا را از هم جدا و گروه‌بندی کنید. طبق تصویر سمت راست می‌توانید کارت‌ها را لیست کنید تا از فضا بیشترین استفاده صورت گیرد.


– نوار ابزار (Toolbars)

نوار ابزار دسترسی‌های متنوعی ایجاد می‌کند و می‌تواند شامل ابزارآلات و اکشن‌های مختلف بسته به نیاز برنامه باشد. مثلا یک منوی ثانویه را باز کند. دکمه بازگشت یا به اشتراک گذاری را شامل شود. ابزار جستجو یا ابزارهای ویرایشگر متن مثل انتخاب متن، کپی و … را شامل شود. در زیر نمونه ای از کاربرد نوار ابزار را مشاهده می‌کنید:


– نوار برنامه (App bar)

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

  • بعنوان یک دکمه کنترل برای باز کردن کشوی ناوبری بکار رود.
  • بعنوان یک آیکون فلِش رو به بالا برای سریع طی کردن طولی برنامه به سمت بالا (همانند دکمه برو به بالا در طراحی سایت) بکار رود.
  • اگر نیازی به ناوبری در نمایش فعلی نیست بطور کامل حذف شود.

layout_structure_appbar_structure1

عنوان (title) بکار رفته در نوار برنامه نشان دهنده عنوان صفحه جاری است که می‌تواند بعنوان عنوان برنامه، عنوان صفحه و یا فیلتر صفحه، بسته به موقعیت صفحه بکار رود.

آیکون‌های موجود در سمت راست نوار برنامه بعنوان اکشن‌ها و ابزارهای مرتبط با صفحه عمل می‌کنند. آیکون منو می‌تواند یک لیست منوی اضافی را باز کند که شامل اکشن‌های ثانویه مانند راهنما، بازخورد، تنظیمات و … است.

متریال ۴ نوع رنگ برای نوار برنامه تعیین کرده. روشن – تیره – شفاف و رنگی. تجربه نشان داده استفاده از نوار برنامه رنگی متناسب با رنگ صفحه جاری و یا رنگ اصلی برنامه نتیجه دل نشینی دارد. در نوار برنامه تمامی آیکون‌ها باید همرنگ باشند. اما عنوان در صورت نیاز می‌تواند رنگ متمایزی داشته باشد. در این مورد باید به کنتراست رنگ‌ها و قابلیت خوانده شدن توجه کرد.

20150809181028

ارتفاع پیش فرض نوار برنامه به شرح زیر است:

  • موبایل: ۴۸dp
  • موبایل در حال عریض: ۵۶dp
  • تبلت و دسکتاپ: ۶۴dp

منو شبیه یک برگه کوچک یادداشت است که بصورت موقت برای اکشن‌های اضافی ظاهر می‌شود. منو می‌تواند همچنین شامل آیکون یا آواتار باشد.


– نوار سیستمی (System bar)

نوار وضعیت (status bar) شامل آیکون‌های اطلاع‌رسانی و سیستمی پیش فرض اندروید مانند وضعیت آنتن، باطری، ساعت و … است. نوار پنجره (window bar) در برنامه‌هایی مانند گوگل کروم شامل اکشن‌های مربوط به یک پنجره نظیر کوچک کردن، بستن و … است. نوار وضعیت در برنامه‌های عادی نمایش داده می‌شود اما در برنامه کروم، مخفی شده و جای خود را به نوار پنجره می‌دهد. در این صورت از فضای صفحه استفاده کافی شده و تمرکز روی برنامه و محتوای آن بیشتر می‌شود. ارتفاع نوار وضعیت ۲۴dp و نوار پنجره ۳۲dp پیشنهاد شده است.

20150810121956

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

نوار ناوبری اندروید (android navigation bar) محل قرار گرفتن کنترل‌های سیستمی اندروید یعنی بازگشت، خانه و اپ‌های اخیر، است. همچنین در اندروید ۲.۳ به پایین نمایش دهنده منوی اپ می‌باشد. ارتفاع پیشنهادی برای این نوار ۴۸dp بوده و رنگ آن می‌تواند تیره، روشن و یا شفاف باشد.


– ناوبری کناری (Side nav)

ناوبری کناری می‌تواند به صورت ثابت یا موقتی در صفحه نمایش داده شود. این نوار می‌تواند در سمت چپ یا راست قرار گیرد. نمایش محتوا از سمت چپ به راست پیشنهاد شده به صورت اولیه است. بهتر است از ناوبری سمت راست بصورت ثانویه و برای محتوای اضافی‌تر استفاده کنید. در آینده در مورد محتوا و ساختار این ناوبری صحبت خواهیم کرد. برای بدست آوردن عرض این بخش باید عرض صفحه نمایش را از ۵۶dp کم کنیم. یعنی حداقل ۵۶dp از صفحه زیر نمایش داده شود. حداکثر عرض ناوبری ۳۲۰dp می‌باشد. این حداکثر عرض در ناوبری چپ کاربرد دارد. این مقدار برای لی‌اوت دسکتاپ ۴۰۰dp است. در صورتیکه از ناوبری راست استفاده کنیم می‌شود از کل عرض صفحه استفاده کرد.

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

– چارچوب سفید (Whiteframes)

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

دانلود وایت فریم متریال دیزاین

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

*منبع: Google

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *