مقدمه ای بر سیستم های طراحی برای طراحان UX / UI

عکس پروفایل نویسنده

@avrorashuhaliiطراح محصول

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

برای طراحان ارشد – کسانی که تازه شروع به مطالعه سیستم های طراحی UX / UI کرده اند و کسانی که تا 1-2 سال در این زمینه کار می کنند. هدف اصلی این مقاله آشنایی شما با م componentsلفه های اساسی طراحی سیستم ، معرفی مقدماتی این مفهوم و بازنگری در مطالب با نشان دادن چندین نمونه از سیستم های طراحی است که قبلاً توسط شرکت های بزرگ استفاده شده اند.

الهام بخش این مقاله این واقعیت است که طی 2-3 سال اخیر شرکت ها به طور فعال طراحی سیستم را برای محصولات خود ایجاد کرده اند. طراحان قبلاً متوجه شده اند كه بسیاری از فرآیندهای موجود در پروژه ها می توانند سیستم سازی ، سهولت و خودكار سازی شوند.

سیستم های طراحی چیست؟

برای اینکه تعریف واضحی از این اصطلاح ارائه دهید ، باید مفاهیمی مانند کیت UI ، دستورالعمل و کتاب مارک را در نظر بگیرید. این اصطلاحات اغلب با سیستم طراحی اشتباه گرفته می شوند. بیایید نگاهی دقیق به این مفاهیم بیندازیم:

کیت رابط کاربر

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

یک کیت UI کاملاً آماده از همه عناصر تشکیل شده و در یک یا چند فایل برای کار در فتوشاپ ، Adobe XD یا Figma / Sketch قرار دارد.

شما می توانید نمونه های بیشتری از کیت UI را در اینجا پیدا کنید:

راهنما:

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

یک دستورالعمل کاملاً به پایان رسیده می تواند در قالب PDF ، در صفحه وب سایت یا در پرونده ای برای فتوشاپ ، Adobe XD یا Figma / Sketch باشد.

کتاب برند:

این سندی است که استانداردهای سبک بصری برای یک شرکت خاص را تعیین می کند. کتاب مارک شامل ارزشها و ویژگیهای اصلی در ارتقا brand و توسعه برند است. بر کمپین ، ارتباطات و خدمات بازاریابی تأثیر می گذارد. همچنین می تواند به عنوان مجموعه ای از رهنمودهای استراتژیک توصیف شود زیرا تمام جنبه های مارک تجاری یک شرکت را در بر می گیرد.

کتاب مارک تجاری به صورت یک یا چند فایل PDF یا هر قالب دیگر و همچنین با فایلهای منبع عناصر طراحی شرح داده شده در سند (برای فتوشاپ ، Adobe XD یا Figma / Sketch) ارائه می شود.

می توانید نمونه کتاب های مارک بیشتری را در اینجا پیدا کنید:

بنابراین ، سیستم طراحی چیست؟

این مجموعه ای از ارزش ها ، ابزارها و اجزای تجاری است که کیفیت و سرعت تولید محصول را افزایش می دهد و همچنین از موارد موجود پشتیبانی مثر می کند. سیستم طراحی اغلب توسط شرکتهای بزرگی مانند گوگل ، اپل و Airbnb ایجاد می شود. این چندین هدف اصلی دارد:

  1. تمرکز دانش. این مکانی است که تمام اطلاعات مربوط به یک محصول جمع آوری می شود ، اطلاعاتی که می تواند برای طراحان ، برنامه نویسان ، بازاریابان ، مدیران و صاحبان کالا مفید باشد. همچنین ، سیستم طراحی به طور موثر به روند جذب کمک می کند.
  2. فرصتی برای صرفه جویی در هزینه های صرف شده برای طراحان در آینده فراهم می کند ، زیرا نیازی به صرف زمان مشخصی برای یافتن راهنمای سبک مورد نظر یا اسناد داشبورد نخواهید بود.
  3. طراحی سیستم می تواند به شما کمک کند از نادیده گرفتن جزئیات مهمی که تشخیص آنها بدون جمع آوری همه چیز در سیستم دشوار است ، جلوگیری کند. بیایید در مورد اجزای آماده صحبت کنیم. در اینجا ، من می خواهم به طراحی اتمی بپردازم. هدف اصلی این روش توصیف هر یک از م componentلفه ها در سیستم طراحی است.

اجزای طراحی سیستم:

  1. کیت های رابط کاربر
  2. رهنمودها
  3. کتاب های مارک
  4. اجزای آماده
  5. مستندات

بیایید اجزا را مرور کنیم.

در اینجا می خواهم به طراحی اتمی بپردازم که شامل موارد زیر است:

  • اتم ها
  • مولکول ها
  • موجودات زنده
  • الگوها
  • صفحات

نقش اصلی این روش توصیف هر یک از م componentلفه ها در سیستم طراحی است.

طرح اتمی شامل موارد زیر است:

  • اتم ها – کوچکترین بلوک های ساختمانی یک پروژه ؛
  • مولکول ها – عناصر پیچیده تری که از چندین اتم تشکیل شده اند.
  • ارگانیسم ها – قسمتهای عملکردی صفحه که از گروههای اتم و مولکول ایجاد می شوند.
  • الگوها – صفحات بدون محتوای واقعی. الگوها ارگانیسم ها را در یک طرح کامل سایت ترکیب می کنند.
  • صفحات – این جایی است که شما بر اساس الگو محتوای واقعی را تولید و پر می کنید هنگام ایجاد یک سیستم طراحی ، باید به طراحی اتمی پایبند باشید و همه قطعات را با تقسیم آنها به اتم ها ، مولکول ها ، ارگانیسم ها ، الگوها و صفحات آماده کنید.

مثالی از Airbnb:

ارگانیسم وجود دارد که شامل:

  • 3 زبانه – مکانهایی برای استراحت ، نمایش ها و نمایش های آنلاین.
  • یک جعبه شامل: زمینه های ورودی و یک دکمه

مولکول در اینجا یک جعبه (شامل فیلدهای ورودی و دکمه ها) و 3 زبانه بالای جعبه خواهد بود:

اتم یک قسمت ورودی جداگانه ، دکمه ، برگه است:

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

مستندات.

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

طراحان هنگام ایجاد یک سیستم طراحی با چه مشکلاتی روبرو می شوند:

  • اگر شما یک طراح پایه هستید ، بعید است که یک کار مشابه به شما داده شود ، زیرا تجربه عملی کافی ندارید. آماده کار با دستورالعمل ها باشید
  • این در حال حاضر گامی در جهت پیشرفت مهارتهای طراحی سیستم شماست.
  • ایجاد یک طراحی سیستم ممکن است مدت زمان زیادی طول بکشد. شما باید از نظر روانشناختی مدیریت خود را برای این فرآیند آماده کنید و از آنها بخواهید که در مورد رهنمودها هوشیار و شفاف باشند (و از آماده سازی فوری پروژه نخواهند).
  • یک سیستم طراحی مساوی با ارتباط نزدیک با توسعه دهندگان است و در اینجا شما باید واقعاً تلاش کنید تا نقاط مشترکی برای دستیابی به یک محصول با کیفیت پیدا کنید.

نمونه های سیستم های طراحی:

علاوه بر این

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

برچسب ها

با هکر نون همراه باشید

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