کوتاه در مورد UI Style Guide

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

یک نمونه style guide

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

مزایای style guide

در مورد اهمیت استایل گاید هر چقدر هم که بگم تا زمانی که در یک پروژه واقعی باهاش مواجه نشین متوجه اهمیتش نمی‌شین اما موارد زیر شاید بتونه شما به اندازه‌ی کافی از استایل گاید نداشتن بترسونه.

انسجام

من تا الان در بسیاری از مقالات و ویدئوها در مورد اهمیت Consistency صحبت کردم و به عنوان یکی از اصول ۱۰ گانه Heuristic Evaluation هم بهش پرداختم. در همه‌ی این موارد صحبت بر لزوم انسجام بوده. این اولین باره احتمالا که دارم راهکار مدونی برای پیاده‌سازی این استانداردسازی هم ارائه می‌کنم.

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

زبان مشترک

از آنجا که دولوپرها هم در شروع برنامه‌نویسی ابتدا این استایل گاید را پیاده سازی می‌کنند اگر نام‌گذاری المان‌های style guide به درستی انجام شده باشه تیم دیزاین و برنامه‌نویسی می‌تونن تعاملات بهتری داشته باشند.

مثلا تنها کافیه برای اصلاح رنگ وضعیت یک دکمه طراح به برنامه‌نویس بگه که در حالت Hover رنگ این دکمه باید Primary Light باشه و از استایل فونت Button استفاده بشه.

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

آموزش Domain Driven Design (DDD) + EF Core
بیشتر بخوانیم

بروزرسانی در لحظه

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

اینجوری در جلسه بعدی که سر این بحث می‌شه که بهتر بود از زنگ X به جای Y استفاده کنیم به جای بحث‌های طولانی می‌شه این این تغییرات رو در چشم به هم زدنی اعمال کرد و حالا با دیتا در مورد گزینه‌هامون صحبت کنیم.

ساده کردن کارها

معمولا پروژه‌های بزرگ و پیچیده هر چقدر که جلوتر بریم بر حجم این پیچیدگی افزوده می‌شه و از یه جایی به بعد اگر استایل گایدی وجود نداشته باشه درک موقعیت سخت می‌شه برای همین استاندارهای توی style guide کمک می‌کنه در زمان طراحی هر المان جدید بشه به راحتی با بررسی مجدد اون قوانین اولیه تصمیمات منسجم و مبتنی بر منطق گرفت.

کار یکباره

هر چند ساخت اولین استایل گاید کار بسیار سختیه اما خوبیش اینه که یه بار که بسازیش در بسیاری از پروژه می‌تونی با تغییرات مختصری استفادش کنی یا حتی ساخت یه style guide جدید ۱۰ برابر سریعتر از اولین استایل گاید زمان‌بره.

تکمیل به مرور

درسته طراحی اولین استایل گاید می‌تونه سخت باشه اما از اونجا که می‌شه style guide رو به مرور تکمیل کرد می‌تونیم به راحتی از پایه‌ای ترین چیزها شروع کنیم و همینطور که در طراحی پیش می‌ریم و به استاندارهای جدیدی نیاز داریم اونها رو ایجاد کنیم.


استایل گاید شامل چه مواردی است؟

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

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

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

از اسامی که بگذریم به هر حال گام بعدی پس از طراحی style guide تکمیل کردن UI Kit با افزوده المان‌های طراحی است.

همینطور که گفتم طراحیstyle guide کار سخت و زمانبریه و من در این ویدئوی یوتیوب ساخت استایل گاید در فیگما که بخشی از دوره UI/UX مقدماتی من تو یوتیوبه یه style guide رو از صفر طراحی کردم.

نکاتی در مورد تماشای این ویدئو

  1. این ویدئو در یوتیوبه پس برای دیدن اون نیاز به VPN دارید.
  2. از اونجا که طراحی Style Guide زمانبره در نتیجه مدت این فیلم هم زیاده و چون من روش اصطلاحا بلند بلند فکر کردم نمی‌شد کمترش کرد اما شما می‌تونین رو دور تند ببینید.
  3. این ویدئو یه سری پیشنیاز داره که بهتره قبل یا بلافاصله بعد از این ویدئو اونها رو ببینین.
  4. یادتون نره سابسکرایب کنین و با لایک و کامنت حمایت

مجله اینترنتی توزلو

Share

دیدگاهتان را بنویسید

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

بیست − 6 =