همه چیز درمورد design language system!


[تعداد: 1    میانگین: 5/5]

design language system (سیستم زبان طراحی)،یک زبان واقعی است؛ نمیتواند اتفاقی به وجود آید.

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

سیستم زبان طراحی

دسته ای از قوانین یا راهنما ها،که درجه هماهنگی در یک اکوسیستم دیجیتال را افزایش میدهد.

حالا اکو سیستم دیجیتال چیست؟! گروهی وابسته از سازمانها،مردم یا هرچیزی که یک پلتفرم دیجیتال استاندارد شده را،برای منفعت متقابل یکدیگر،بین هم به اشتراک میگذارند.

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

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

design language system مثل پایه ریزی یک اسکلت ساختمان برای شروع ساخت آن است.

که باعث میشود زمان ساخت کاهش یابد و با کیفیت بالاتری انجام پذیرد.

حالا به بررسی این اسکلت میپردازیم:

Tools(ابزار ها):

مجموعه ای از ابزار ها جهت طراحی: adobe XD,Sketch,invision,git

ابزار ها

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

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

files system(سیستم فایل ها):

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

documentation(اسناد):

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

style guide(شیوه ی راهنمایی):

از همه المان هایی که کالای دیجیتال را ساخته یک سیاهه آماده کنید.

همه ی  کاری که باید انجام دهید این است که از همه ی المان های کالا اسکرین شات تهیه کنید و آنها را در دسته بندی های مختلف قرار دهید.

گام هایی که برای ساخت یک style guide مفید وجود دارد:

Tool box(جعبه ابزار):

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

بنابراین وقتی فرد جدیدی به تیم اضافه شود همه چیز هایی که به آن نیاز پیدا خواهد را در این جعبه ابزار به راحتی پیدا خواهد کرد.

naming conventions(قرارداد نام گذاری):

همانند نامگذاری فایل ها گفته شد، یک قرارداد برای نامگذاری در design language system تعیین کنید که کل تیم با آن راحت باشند و آن را برای همه ی المانها و نماد ها و لایه ها پیاده سازی کنید.

grid system(سیستم توری):

یک grid system با بهترین کارایی برای کالای دیجیتال خود انتخاب کنید. این کار زمان تصمیم گیری در طراحی را کم میکند.

typography & text style(تایپو گرافی و استایل نوشته):

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

Pattern library(کتابخانه ای از الگوها):

نمونه ای از المان های مورد استفاده در طراحی

کتابخانه ای به عنوان الگو برای طراحی

کالا را به بلوک های قابل استفاده ی دوباره تقسیم کنید که بتوانند در دسته بندی های مختلف قرار بگیرند.

فایده های سیستم زبان طراحی:

برند:

recognizability (قابیلت تشخیص دهی):

یک design language system برای کالای دیجیتال یک شخصیت میسازد،شخصیتی که کارکتر و هویت خود را داراست که اجازه میدهد در دنیای کالاهای دیجیتال به راحتی شناخته شده و متمایز شود.

المان آبی رنگ فیس بوک که نشان دهنده ی برند ای اپ است

المان لایک فیسبوک

برای مثال: دکمه لایک فیسبوک که یک امضا برای فیسبوک به حساب می آید. و همیشه برای برند فیسبوک،از 2009 تا الان مورد اهمیت زیادی قرارداشته است.

consistency(یکپارچگی):

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

authenticity(اعتبار):

المان کلپ برند مدیوم به عنوان شاخصی برای این برند

المان کلپ برند مدیوم

کلپس (دست زدن) در برنامه مدیوم که نشاندهنده احساس به مقاله هاست،یک المان یکتا است که در هیچ اپلیکیشنی تا به حال پیاده سازی نشده بود و به برند قابلیت شناخته شدن میدهد.

کاربر:

ease of use & enjoyment(استفاده ی آسان و مفرح):

از کاربر فکر کردن نخواهید!

تجربه کاربری را ارتقا دهیدو کاری کنید کاربر بتواند به راحتی ادامه ی روند را تشخیص دهد.

در این صورت تجربه ی او یک تفریح به حساب می آید.

بیزینس:

efficiency & cost(کارایی و هزینه):

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

Innovation (نوآوری):

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

فواید سیستم زبان طراحی تمام نشدنی هستند و کاربرد آن تنها به اکوسیستم های دیجیتال محدود نمیشوند.

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

در دوقسمت اول این مقاله فرایند چگونه ساختن یک سیستم زبان طراحی و فواید سیستم زبان طراحی را باهم بررسی کردیم،در این قسمت میخواهیم یک مثال از یک سیستم زبان طراحی را مورد تحلیل قراردهیم اما قبل از آن بهتر است محیط سیستم زبان طراحی را به صورت چک لیست از نظر بگذرانیم:

  •  آدرس دهی همه ی اکو سیستم
  • ابزارها برای همه ی افراد اکوسیستم
  • قرارداد نامگذاری
  • سیستم فایل ها
  • اسناد
  • شیوه راهنما به همراه یک رابط کاربری قابل بازرسی
  • کتابخانه ی الگو ها
  • جعبه ابزار
  • سیستم توری
  • تایپوگرافی و استایل نوشته

مثال:

حال به بررسی سیستم طراحی Atlassian میپردازیم:

www.atlasian.com

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

سیستم زبان طراحی برند atlasian دارای چند بخش مارکتینگ و... که در متن

سیستم زبان طراحی برند atlasian

  • سطح مستنداتی که سیستم طراحی Atlassian دارد، با تفکر جامع بسیار کارامد که همه‌ی گروه‌های وابسته به یکدیگر را پوشش میدهد، ظرفیت بالای آن را نشان میدهد و فرهنگ خود را آشکار میکند.
  • آنها یک بسته‌ی رابط کاربری وب را فراهم می‌آورند که آماده دانلود است. توجهشان به جزئیات ستودنی است.
  • آن‌ها یک دسته از الگوهای مستند شده دارند و مرتبا این لیست را به‌روزرسانی میکنند. آن‌ها اطمینان حاصل میکنند که این‌ در بخشی موسوم به “تازه‌ها چیست؟” با کاربرانشان ارتباط برقرار میکند. قابلیت پیشگیری در چرخه‌ی سیستم، بوسیله‌ی مرتبط ماندن، ارزش را افزایش میدهد.
  • در Atlassian، آن‌ها از یک سیستم تور مانند برای تولید هماهنگی‌های بصری و صفحات منسجم تبعیت میکنند. سیستم توری به طور کامل مستندسازی شده و در برای مشاهده اختیار عموم قرار دارد.
  • تایپوگرافی (فن چاپ) برای سیستم‌عامل‌های متفاوت با فونت‌ها و کاربردهای مستند شده، و البته قابل دانلود به صورت یک بسته‌ی رابط کاربری وب.
  • بخشی درمورد برند، فوایدی را که سیستم برای محصولش به ارمقان می‌آورد را برجسته میکند.
  • بخشی برای برند، به شخصیتی که محصولات Atlassian باید از خود بازتاب کنند و نوع نویسندگی‌ای که نوشته‌ها باید از آن تبعیت کنند اشاره میکند. این شخصیت به محصولات هویت وقابلیت شناسایی میدهند.

نتیجه گیری کلی:

سیستم زبان طراحی ، میان اعضای تیم برند یک ارتباط استاندارد به ارمغان می آورد.

همچنین به شما اجازه میدهد تا احساس یاپیام مورد نظر شما را به خوبی به کاربر برساند (تهیه ی تجربه کاربری عالی).

اگر این مقاله رو دوست داشتید،به مقاله های قبلیمون هم سر بزنید 🙂

آموزشطراحی اپلیکیشن iOSطراحی اپلیکیشن اندرویدطراحی فروشگاه اینترنتیمقالات آموزشی

adobe xdatlassiandesign language systemdesign systeminvisionpattern librarysketchstyle guidetypographyuiuiduxuxdسیستم دیجیتالسیستم زبان طراحیطراحی اپلیکیشن موبایلطراحی تجربه کاربریطراحی رابط کاربریطراحی سایت

سیده زهرا میرکاظمیمشاهده نوشته ها

دانشجوی مهندسی کامپیوتر، علاقه مند به ui/ux و front-end

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

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