کمی بیشتر؛ طراحیِ گرید !
سلام. قرار نیست از مزایای شبکه بندی بگویم، دنبال اصول ها هستم.
داشتم منابع مرتبط با اصول طراحی شبکه بندی(گرید) برای طراحان تجربه کاربری را می دیدم، یک منبع خوب ترجمه شده در اینجا یافتم. بعد دیدم نسبت به متن اصلی چندتا نکته دیگر جامانده که باید اضافه شود:
نکته 5
اگر به علل زیبایی شناختی، قرار است تصویر در محل خاصی قرار گیرد(تصویر به صورت کامل بکگراند را پوشانده یا حتی از فریم بیرون زده)، دیگر نیازی نیست که در پروتوتایپینگ، تصویر را دقیقا روی ستون ها قرار دهید!
خود توسعه دهنده بعدا میفهمدد که این تصویر فول وایدث هست.
هدر و فوتر (سرورقی و پاورقی) استثناهایی هستند که قواعد حاکم بر محتوا و عکس ها، بعضا بر آنها اعمال نمیشود. در بعضی از طرح ها، آنها را به لبه های مرورگرها می چسبانند، بعضی دوست دارند آن را هم عرض محتوا نگه دارند. واقعاً به خود شما و شرایط شما بستگی دارد. مزیت نگه داشتن آنها به صورت هم عرض محتوای شما این است که وقتی کاربر در حال مشاهده سایت شما در یک مانیتور بسیار گسترده است، گیج نمی شود(چون معمولا اطلاعات و تب منو در هدر قرار میگیرد). مزیت نگه داشتن آنها به مرورگر پین شده این است که فضای بیشتری برای عناصر ناوبری دارید.
نمونه ها
سایت Invision’s Genome Project
یک نمونه گرید خلاقانه که گاترها تعمدا حذف شده اند و یکچارچه بنظر میرسد(تنها 8 ستون عریض دارد).
سایت ورد پرس WordPress
روش استفاده از شبکه بندی به خود شما بستگی دارد. می توانید از آن برای قسمت اصلی استفاده کرده و نوار کناری را کنار بگذارید. در وردپرس، بیشتر مطالب در مرکز صفحه است و یک نوار کناری در سمت چپ وجود دارد.
سایت ماکاپ کلاب The Mockup Club
محتوای و شبکه بندی شما همیشه نباید از مرکز شروع شود! برای Mockup Club، محتوای اصلی، دورتر و به سمت چپ رفته!
سایت آتلاسون
نوعی از شبکه بندی نامتقارن که با موشن همراه شده است
اینستاگرام
من کاملا مطمئنم که اینستاگرام می تواند با این 6 ستون عریض روی دسکتاپ برود(ریسپانسیو شود).
شیوه ی محاسبه ی گریدها
1) طبق متریال دیزاین گوگل
موارد بالا، نمونه هایی بود که نشان میداد میتوان قواعد قبلی( از جمله اصول متریال دیزاین گوگل راجع گریدها) را شکست. متریال دیزاین مثلا میگوید برای یک گوشی با عرض 360 dp باید چهارعدد ستون درنظر گرفت و برای یک تبلت با عرض 600 dp باید هشت عدد ستون را داشت:
تعداد ستون های نمایش داده شده در شبکه بندی، با توجه به محدوده نقطه شکست (طیف وسیعی از اندازه های صفحه از پیش تعیین شده) که در آن یک صفحه مشاهده می شود، تعیین می شود. خواه نقطه شکست برای تلفن همراه ، تبلت یا اندازه های دیگر باشد.
از آنجایی که طبق متریال دیزاین گوگل، میتوان گریدهارو شخصی سازی کرد Grid customization(تغییر گاترها و حاشیه ها و یکسان نبودن شان نسبت بهم مثلا)، ماهم میتونیم یه سبک طراحی پیشنهاد بدیم، طراحی براساس گریدها. اصلا خیلی از طراحها با همین قیدهای افقی-عمودی کار میکنند و چیز عجیبی هم نیست!
2) محاسبه گریدها با نرم افزارها
بهترین شان را حتما میشناسید: adobe xd
یکی از استانداردهای مورد استفاده در طراحی وب سایت با استفاده از شبکه بندی، شبکه ۹۶۰px است. این شبکه بر مبنای عرض استاندارد ۹۶۰px برای طراحی وب سایت، طراحی شده است .با استفاده از این سیستم می توان به ساختارهای ۱۲ ستون ، ۱۶ ستون و ۲۴ ستون رسید.
می توانید تمامی اجزاء تشکیل دهنده وب سایت خود را مانند ( Side Bar , Header , Content , Footer ) با استفاده از این سیستم طراحی کنید ، کاربرد margin ها و Padding ها با استفاده از این سیستم بسیار راحت و ساده و درصد اشتباهات بسیار پایین. است . در تصویر زیر می توانید نمونه از layout ساخته شده با استفاده از سیستم شبکه بندی را ملاحظه نمائید .
3) الهام گرفتن از گریدهای خلاقانه صنعت چاپ
یک راه برای رسیدن به خلاقیت، توجه به مبانی هنرهای بصری و خصوصا مبحث انواع تعادل بصری است که در ادامه با نمونه های تصویری، شرح میدهیم:
در یک نگاه کلی، دو نوع گرید متقارن و غیرمتقارن داریم.
حالا یکی از راههای خلق گرید این است که مثل یک کادر به artboard نگاه کنید که از جهات افقی، عمودی و مورب، میتواند به دو بخش تقسیم شده و میتوان وزن بصری (از طریق میزان فضای مثبت/منفی، تعداد و ابعاد عناصر و همچنین رنگ ها) را کنترل نمود. این نکته با چشم و ذهن قابل درک است!
ابتدا یک عنصر در گوشه ای از صفحه بگذارید، بعد سعی کنید در سمت دیگر، چیزی اضافه کنید. با همین دیدگاه میتوان به بی شمار طرح و شبکه بندی خلاقانه رسید. از شر طراحی ابزارمحور هم خلاص میشوید!
البته این روش برای وقتی است که خلق یک گرید جدید (و در نتیجه حس) در اولویت است و نه چیز دیگری!
بخواهیم بقیه مبانی هنرهای تجسمی را بگوییم به درازا میکشد…بگذریم…
خب در این سایت انواع این گریدهای هنری طور که با css شده را میتونید ببینید
و اینجا هم دموی گریدهای نسبتا خلاقانه 12 ستونه را دارید که با css اجرا شده اند
4) سفارشی سازی کنید
هنگام طراحی با شبکه بندی، طراحان بصری معمولاً سوالات زیر را می پرسند: چند ستون و ردیف باید استفاده شود؟ کدام عرض ستون و ارتفاع ردیف را باید انتخاب کنم؟ آیا لازم است اندازه بلوک یا عرض گاتر تنظیم شود؟ قبل از شروع کار با شبکه ها، همه این سوالات باید پرسیده شوند. بهترین کار این است که همیشه این ویژگی ها را بر اساس نیازهای خود تنظیم کنید. اگر نمی خواهید یک طرح شبکه سفارشی ایجاد کنید، می توانید با یک شبکه 12 ستونی شروع کنید.
اما از کجا بفهمیم هر دستگاهی با کدام شبکه بندی، ریسپانسیو میشود؟
باید شبکه بندی را پیداکنید که برای اهداف تیم شما مناسب است:
1) خود شبکه بندی و نوع فریمورک استفاده شده توسط توسعه دهنده از جمله بوت استرپ، یکی از راههای ریسپانسیو شدن است، اما کدام ابعاد ستون و گاتر، مارا بهتر به این مقصود میرسانند؟
برای اطمینان از اینکه طرح شبکه بندی شما در اندازه های مختلف صفحه نمایش نیز کار خواهد کرد، از مقادیر درصدها و نسبت ها به جای پیکسل ها استفاده کنید. آنهم با استفاده از گرید ژنراتور! (منکه نفهمیدم!)
برای انکار میتوانید از ژانراتور گرید grid layout tool/generator استفاده کنید. مثلا در سایت Mockplus میتوانید برای شخصی سازی طرح بندی شبکه برای پروژه خود استفاده کنید.این یک پلت فرم آنلاین طراحی یک مرحله ای است که به کاربران یک طرح شبکه بندی خودکار را ارائه می دهد تا تمام ستون ها ، ردیف ها ، گاترها و بلوک ها را به راحتی تنظیم کنند. شما می توانید این راهنماهای شبکه را بر اساس نیاز خود نشان داده یا پنهان کنید. این طرحهای ریسپانسیو خودکار به شما کمک می کند با سهولت یک وب سایت یا برنامه تلفن همراه پاسخگو ایجاد کنید.
یا اینکه از سایت layoutit کُدهای سازنده گرید با فریمورک css را دریافت کنید CSS grid generator
2) استفاده از جدول های تبدیل در متریال دیزاین گوگل
ایشان میفرماید: ابعاد مرجع دستگاههای مختلف، با مرزهایی از هم جدا میشوند که به آنها Breakpoint گفته میشود.
طراحی مطابق با این سیستم نقاط شکست Breakpoint (درواقع مبتنی بر عرض صفحات نمایش/دستگاهها) میتواند طرح های ریسپانسو را بر اساس ساختار ستون ها فراهم کند. لی اوت ها با استفاده از شبکه های 4 ستون ، 8 ستون و 12 ستون برای استفاده در صفحه های مختلف در دسترس هستند ، و طرح های ریسپانسیو را بر اساس ساختار ستون زیر و برای استفاده در صفحه های مختلف، دستگاه ها و جهت گیری های مختلف فراهم می کند. هر محدوده نقطه شکست تعداد ستون ها، حاشیه و گاترهای توصیه شده را برای هر اندازه صفحه نمایش تعیین می کند.
3) بنظرم باید روش قابل اطمینان تری دیگری هم باشد. بذارید یکبار دیگه بپرسم:
از کجا بفهمیم هر دستگاهی با کدام شبکه بندی، ریسپانسیو میشود؟
در مرحله طراحی البته. نه برنامه نویسی… هرکی میدونه لطفا در کامنت ها بگه. متشکرم!
منابع:
https://www.mockplus.com/blog/post/ui-grid-layout-design