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

ساختار در موبایل :

این ساختار شامل یک نوار اپلیکیشن (app bar) دائمی و یک دکمه عملیاتی شناور میباشد. در پایین صفحه هم میتواند یک نوار دیگر جهت عملکردهای بیشتر، به دلخواه اضافه شود. منوهای جانبی راهبری، کلیه عناصر را پوشش میدهند.

توضیح عکس : بالا از چپ به راست -> منوی راهبری جانبی - نوار ابزار (app bar)- محدوده محتوا (زیر app bar) و منوی راهبری جانبی در سمت راست
                      در پایین صفحه -> نوار ابزار پایینی

ساختار در تبلت :

این ساختار شامل یک نوار اپلیکیشن (app bar) دائمی و یک دکمه عملیاتی شناور میباشد. نوار app ، عناصر را از نوار پایین موبایل و تبلت جذب میکند. برای عملکردهای بیشتر، یک نوار پایینی هم میتواند به دلخواه اضافه شود. منوی جانبی کلیه عناصر ساختاری دیگر را می پوشاند. منوی جانبی سمت راست میتواند به صورت موقت یا دائمی نمایش داده شود.

توضیح عکس : بالا از چپ به راست -> منوی راهبری جانبی - نوار ابزار (app bar)- محدوده محتوا (زیر app bar) و منوی راهبری جانبی در سمت راست
                      در پایین صفحه -> نوار ابزار پایینی

ساختار در Desktop :

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

توضیح عکس : بالا از چپ به راست -> نوار ابزار (app bar)
                      ردیف دوم از چپ به راست -> نوار ابزار- نوار ابزار دوم- نوار ابزار
                      ردیف سوم از چپ به راست ->منوی راهبری جانبی- محدوده محتوا و منوی جانبی سمت راست
                      در پایین صفحه -> دکمه عملیاتی شناور

نواحی UI :

یک تقسیم کننده عمودی یا افقی دائمی تعریف نمایید.


سعی کنید صفحه را به تعداد زیاد به قسمت های عمودی تقسیم نکنید (در این حالت عموماً به شکل L میشود). در عوض از whitespace برای ایجاد نواحی دیگر استفاده کنید.


حاشیه ها را با کارت ها یا دکمه های عملیاتی بشکنید.


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


 

---