Ehsan Hadi
Ehsan Hadi
خواندن ۴ دقیقه·۵ سال پیش

دیزاین سیستم و راهنمای سَبْک ( Design system & Style guide ) - بخش اول قسمت یک - دیزاین سیستم و راهنمای سبک چیست؟

برقرای ارتباط با استانداردهای تجربه کاربری

دیزاین سیستم و راهنمای سَبْک ( Design system & Style guide ) - بخش اول قسمت یک - دیزاین سیستم و راهنماس سبک چیست؟
دیزاین سیستم و راهنمای سَبْک ( Design system & Style guide ) - بخش اول قسمت یک - دیزاین سیستم و راهنماس سبک چیست؟

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

امیدوارم از قسمت قبلی این سری از مطالب که به معرفی این دوره و آشنایی با این مبحث می‌پرداخت استفاده کرده باشید و راغب به دنبال کردن این سری از مطالب باشید، همچنین خوشحال میشم از طریق همین صفحه و یا لینکداین نظرات شما را درباره این مبحث و شیوه ارائه اون بدونم.

این بخش از این دوره تحت عنوان «راهنمای سبک و دیزاین سیستم چیست؟» و در قالب پنج قسمت ارائه شده که من هم به همان ترتیب این مطالب را پیش خواهم برد. با من همراه باشید تا به اولین قسمت از این بخش تحت عنوان «برقراری ارتباط با استاندارد‌های تجربه کاربری» بپردازیم.



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

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

یک اسایل گاید و دیزاین سیستم خوب از ناسازگاری‌های تجربه کاربری میان یک محصول و محصولات دیگر یک سازمان جلوگیری می‌کند.

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

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

استایل گاید بیان میکند که چگونه و با چه اجزایی به «برقراری ارتباط» بپردازید و دیزاین سیستم می گوید که این اجزا چگونه در اپلیکیشن و سایت شما به نمایش درآیند.

راهنمای سبک و دیزاین سیستم دست در دست پیش میروند!
راهنمای سبک و دیزاین سیستم دست در دست پیش میروند!

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

اما چرا باید این کار را بکنید؟

نمونه راهنمای سبک (style guide)
نمونه راهنمای سبک (style guide)

دلایل بسیاری وجود دارند.

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

نمونه راهنمای سبک (style guide)
نمونه راهنمای سبک (style guide)
نمونه راهنمای سبک (style guide)
نمونه راهنمای سبک (style guide)
نمونه راهنمای سبک (style guide)
نمونه راهنمای سبک (style guide)


نمونه راهنمای سبک (style guide)
نمونه راهنمای سبک (style guide)

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

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

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

نمونه ای از قطعه های کد در دیزاین سیستم carbon design system
نمونه ای از قطعه های کد در دیزاین سیستم carbon design system

یک راه مفید و کاربردی برای پی بردن به رابطه این دو سند ( راهنمای سبک و دیزاین سیستم ) این است که بدانیم راهنمای سبک خلاصه‌ای است از تمام اطلاعاتی که در یک دیزاین سیستم وجود دارد.

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



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

در پست بعدی از این سری مطالب، قسمت دوم از این بخش را تحت عنوان «بیشتر از یک مشت سند» می‌توانید دنبال کنید.


دیزاین سیستمطراحیتجربه کاربریاستارتاپDesign System
احسان هادی هستم یک طراح، علاقمند به علوم شناختی در حوزه طراحی و معتقد به ترویج علم رایگان و آزاد و اینجا درباره طراحی و تجربه خودم در مسیر شغلی حرف میزنم ?
شاید از این پست‌ها خوشتان بیاید