دیزاین سیستم چیست و چه کاربردی دارد
- 2022-02-28
- 19 آوریل 2022
بطور خلاصه راهنمای سبک و دیزاین سیستم، دو راه متفاوت در برقرای ارتباط با استاندارهایی هستند که شما برای عناصر بصری، محتوای نوشتاری و رفتار تجربه کاربری در محصولات، وبسایت‌ها و محتوای چاپی خود وضع کرده‌اید.
همیشه آدما در طول تاریخ تمدن، در جستجــوی راه‌ی برای زندگــی بهتــر و راحــت‌تر بوده و هستــن و همین خصوصیــت کمال گرایــی و آرمانــی فکــر کــردن انسان‌ها، باعث به وجــود اومدن پـدیـده های اکتسابـی مثل علم، هنر، فرهنگ و تمدن شــده؛ پــررنــگ شدن نقش حرفــه و مهــارت و ارتباط تنگاتنــگ اون با اقتصــاد و سطح رفاه اجتماعی، باعث به وجود اومدن انقــلاب صنعتی شده و یافتن راه‌های جدید و خلاقانه برای حل کردن مشکلات اون هم به‌گونه‌ای که نیازهای مردم در اولویـت قرار بگیـره موضوعـیِ که “تفکـر دیزاین” به ما گـوش‌زد مـی‌کنه؛
ما در مدرسـه دیـزاین مهـارت‌ها و رشته‌های دیزایــن محــور رو بررسی می‌کنیم و سعــی داریم فرهنگ دیزاین در زبان فارسی رو گسترش بدیم؛
اگـر اولین بارِ که مقالات مدرسه ما رو مطالعه می‌کنید، توصیه می‌شه از ابتدای مسیر دیزاینر شدن با ما همگام بشید.
دیزاین سیستم یعنی چه؟
به مجموعه ای ضروری از قوانین، محدودیت ها و مرام‌نامه ها که به شکل دیزاین و کد ارائه می‌شوند را دیزاین سیستم می‌گوییم. دیزاین سیستم از جزء شروع شده و به کل گسترش می‌یابد.
دیزاین سیستم سه بخش ضروری دارد:
- قانون: اینکه یک بخش بصری یا یک متن چه شکلی باشد.
- محدودیت: اینکه مثلا نباید خارج از این ۳ رنگ، رنگی استفاده کرد.
- مرام‌نامه: برای چه کاربری چه چیزی را نشان دهیم.
به دیزاین سیستم به شکل یک اکوسیستم نگاه کنید
دیزاین سیستم آمیخته ای است از هویت بصری، کامپوننت ها و صدای برند، صدای برند یعنی چه طور برند شما باید با دیگران ارتباط بگیرد و صحبت کند. چه جور ادبیاتی شایسته برند شماست. مثلا بخش Voice and Tone در میل چیمپ را ببینید.
دیزاین سیستم چیست؟
تعاریف زیادی برای دیزاین سیستم وجود دارد ولی باورهای اشتباه ما از گذشته باعث می شود که ما با این تعریف شروع کنیم که دیزاین سیستم چه چیزی نیست؟
دیزاین سیستم Sketch library ، Style guide ، Pattern library نیست. در واقع همه این موارد به علاوه کلی مفهوم و کاربرد دیگر دیزاین سیستم را تشکیل می دهند، دیزاین سیستم تنها منبع موثقی هست که با دسته بندی همه المان های مورد نیاز تیم طراحی این امکان را فراهم می کند تا یک محصول، طراحی و توسعه داده شود؛
هدف هر دوی آنها رسیدن به نقطه‌ای به عنوان مرجع است تا بدانیم اجزا باید چه شکلی داشته باشند، چطور رفتار کنند و چگونه به نظر آیند، یک اسایل گاید و دیزاین سیستم خوب از ناسازگاری‌های تجربه کاربری میان یک محصول و محصولات دیگر یک سازمان جلوگیری می‌کند.
راهنمای سبک و دیزاین سیستم، دو راه متفاوت در برقرای ارتباط با استاندارهایی هستند که شما برای عناصر بصری، محتوای نوشتاری و رفتار تجربه کاربری در محصولات، وبسایت‌ها و محتوای چاپی خود وضع کرده‌اید، هدف هر دوی آنها رسیدن به نقطه‌ای به عنوان مرجع است تا بدانیم اجزا باید چه شکلی داشته باشند، چطور رفتار کنند و چگونه به نظر آیند.
یک اسایل گاید و دیزاین سیستم خوب از ناسازگاری‌های تجربه کاربری میان یک محصول و محصولات دیگر یک سازمان جلوگیری می‌کند.
پس این دو، دست در دست هم پیش می روند! هر دوی این اسناد با هم از منبعی واحد از قوانین محافظت میکنند که شامل دستورالعمل هایی است تا بدانیم اطلاعات در هر صفحه چگونه قرار بگیرند، چطور به نظر آیند و چه رفتاری داشته باشند تا در نهایت دارای لحنی باشند که مد نظر ما است.
بنابراین دیزاین سیستم یک خروجی نیست، بلکه مجموعه ای از خروجی هاست. این سیستم به صورت مداوم همگام با ابزار ها و تکنولوژی های جدید تکامل می یابد.
اما چرا باید این کار را بکنید؟
دلایل بسیاری وجود دارند، در ابتدا ، نتیجه داشتن این سند این خواهد بود که برند شما در نظر مشتریان و کاربران کاملا یکپارچه و شفاف باشد و تجربه کاربری مورد نظر با برندتان به آنان انتقال یابد که در این حالت آنان می توانند به راحتی محصولات شما را از سایر محصولات تشخیص دهند. و دیگر اینکه وقتی مشتریان یکبار نحوه کار کردن با محصول یا اپلیکیشن شما را آموختند بتوانند با همان آموزه‌ها از سایر محصولات شما، بدون داشتن تجربه هرگونه ناسازگاری، استفاده کنند.
همچنین این‌کار منافع بسیار زیادی در داخل سازمان شما خواهد داشت، داشتن راهنمای سبک و دیزاین سیستم زندگی را برای توسعه دهندگان ، طراحان ، تهیه کنندگان محتوا وهمچنین همکاران خارج از سازمان شما بسیار آسان خواهد کرد!
برقراری ارتباط با مفهوم و کانسپت طراحی به گونه‌ای انجام می‌گیرد که هرکس با حداقل تلاش بتواند آن را به ثمر رساند و واقعی سازد.
بیشتر دیزاین سیستم‌ها حداقل شامل قطعه کدهایی هستند که توسعه دهندگان میتواند آنها را کپی کرده و در کارشان قرار دهند. حتی در مواردی فرآیند طراحی، نمونه‌سازی و ابزارهای توسعه برای ساخت ساختار رابط کاربری را به صورت خودکار هم‌راستا میکنند و جلو میبرند.
یک راه مفید و کاربردی برای پی بردن به رابطه این دو سند ( راهنمای سبک و دیزاین سیستم ) این است که بدانیم راهنمای سبک خلاصه‌ای است از تمام اطلاعاتی که در یک دیزاین سیستم وجود دارد.
سابق بر این راهنمای سبک توسط افرادی استفاده میشده است که محتوا را تولید میکردند اما نیازی به کدنویسی و اضافه کردن قسمت هایی جدید به یک سیستم دیجیتال نداشته‌اند. اکنون دیزاین سیستم از همان قوانین اساسی با عنوان راهنمای سبک استفاده می‌کند و آنها را در جهت رساندن به مرحله‌ای که افراد بتوانند از آن قوانین برای ساختن یک رابط کاربری استفاده کنند، گسترش می دهد.
همانطور که دیدید «راهنمای سبک» پیش از تحت عنوان سند یا کتابچه برندینگ و هویت بصری در سازمان‌ها و شرکت های مختلف استفاده میشده است و چیزی که نیاز ما به داشتن یک دیزاین سیستم را مهم و حیاتی جلوه میدهد امکان استفاده از آن قوانین از پیش تعیین شده در ساختن محصولات دیجیتال و کدنویسی‌هاست که در ادامه بیشتر به آن خواهیم پرداخت.
داستان دیزاین سیستم از کجا شروع شد؟
اینطور گفته اند که ناسا در سال ۱۹۷۵ یک سند برای استانداردهای بصری اش منتشر کرد. احتمالا اگر در تاریخ به قبل‌تر هم بگردیم نمونه هایی از این استاندارد سازی خواهیم یافت.
به هر حال این کار ناسا را ببینید. کار بسیار باکیفیت و قابل تحسینی است.
اما داستان از جایی شروع شد که با بزرگ شدن شرکت ها نیاز به سیستمی برای دیزاین داشتند که بتواند همزمان با آنها بزرگ شود. قابل اسکیل (بزرگ شدن نمایی- رشد) باشد.
راهنماهای هویت بصری قابل اسکیل نبودند. باید بازنگری و بازطراحی شوند. رابطه کامپوننتی بین اجزای آن وجود ندارد. اما دیزاین سیستم ها متناسب با رشد شرکت، رشد خواهند کرد. پویا و زنده هستند. نسبت به تغییرات کل دیزاین سیستم هوشیار است و خود را منطبق خواهد کرد.نمونه ای از این زنده بودن دیزاین سیستم را در Lonely Planet’s میتوان دید. جایی که تیم طراحان آن آگاه هستند که باید نسبت به تغییرات و تاثیرات آن بر طراحی و دیزاین سیستم هوشیار بود.
فایده دیزاین سیستم برای من/سازمان‌من چیست؟
کسی شک ندارد که دیزاین سیستم برای بزرگ شدن لازم است. برای همکاری آسان‌تر بین تیم ها و کم کردن بحث ها و تسهیل امور به دیزاین سیستم احتیاج داریم.
طراحان دیزاین را به بخش های کوچک تری تقسیم میکنند و با در کنار هم قرار دادن این بخش های کوچک تر فرآیند دیزاین را توسعه پذیرتر و آسان تر میکنند. برنامه نویسان front-end هم میتوانند با component base کردن فرآیند توسعه، با تغییر یک بخش کل سیستم را به روز کنند. این یعنی زمان توسعه کمتر.
وقتی طراحان و برنامه نویسان زبان مشترک هم را بفهمند اصطکاک ها بین تیم ها کم می‌شود. دیزاین سیستم این پل ارتباطی بین طراحان و برنامه نویسان است.
دیزاین سیستم برای اعضای جدید فرآیند On boarding راحت تر و کم زمان‌بر تری را ایجاد می‌کند. صرف زمان کمتر برای ورود عضو جدید به تیم یعنی کاهش هزینه های سازمانی به خصوص در ابعاد بزرگ.
مشخصات یک دیزاین سیستم:
ویژگی های اصلی یک دیزاین سیستم خوب و کارآمد، صرف نظر از فن آوری ها و ابزارهای که توسط آنها طراحی و تهیه شده است، به شرح زیر است:
- یک دیزاین سیستم خوب باید توسط اعضای تیم پذیرفته شده و به قسمتی از پروسه طراحی تبدیل شده باشد و به مرور زمان با محصولات و تجربیات تیم تکامل پیدا کند.
- باید متعادل باشد و به اعضای تیم آزادی کافی برای مشارکت و خلاقیت بدهد و در عین حال استانداردهای خود را حفظ کند.
- باید پایدار* باشد و قسمت های مختلف سیستم در کنار هم خوب کار کنند و نتیجه یکدستی ارائه دهند.
- باید مستندات آن به خوبی تهیه شده باشد، هر چه مستندسازی بهتر صورت گرفته شده باشد، دیزاین سیستم راحت تر توسط تیم پذیرفته خواهد شد. و هر آنچه تغییر می کند باید داکیومنتش تهیه و در دسترس سایرین قرار بگیرد.
- باید انقدر قوی و بی نقص باشد که محصولاتی که به وسیله آن تهیه می شوند کمترین نقص را داشته باشند. کامپوننت های بدون خطا، بدون مشکلات کاربردپذیری و ظاهری
- باید کامپوننت ها و اجزای آن به راحتی و در زمینه های مختلف قابل استفاده مجدد باشند.
- باید بتواند پروسه طراحی را مقرون به صرفه تر و سریع تر کند.
دیزاین سیستم میتواند شامل موارد زیر باشد:
این موارد برای مثال ذکر شده است و دیزاین سیستم ها میتواند بسته به نیاز بسیار گسترده تر و یا محدودتر از موارد زیر باشند.
محتوا ها:
- نامگذاری
- (صدا و لحن محتوا * (بسته به هویت برند
- خطاها و اعتبارسنجی ها
تجربه کاربری:
- استانداردهای کاربردپذیری و تجربه کاربری
- دسترس پذیری
طراحی:
- تایپوگرافی ها
- رنگ ها
- آیکون ها
- تصویرسازی ها
- گریدها
- فواصل
- صدا ها
- موشن ها
- Gestures
- تصویر سازی داده ها و چارت ها
(کامپوننت ها و المان های رتبط کاربری (ظاهر گرافیکی و کد:
- ساختار و طرح بندی ها*
- Navigation
- فرم ها
- لیست ها و جدول ها
- عناوین و متون
- تصاویر و آیکون ها
نمونه هایی از دیزاین سیستم:
دیزاین مهارتی نه صرفا برای کار که مهارتی برای زندگی‌ست،
«دیزاین» می‌تونه به مثابه تفکری برای خلــق و بهبــود، در زندگــی روزمره ما جاری بشه و گره بسیاری از مشکلات رو باز کنـــه؛
امروزه دیزاین کاربردهایی بیش از قبل داره، حوزه های مختلفی که با دیزاین و دیزاینر سرُکار دارن هروز گسترش پیدا می‌کنن و شرکت ها هروزه بیشتر به این موضوع پی می‌برن که حضور یک دیزاینر برای طراحی محصولشون چقدر اهمیت داره؛
چنانچه به دیزاینر شدن علاقه دارید، می‌تونید مسیر دیزاینــر شدن رو در اینجا راحت تر پیدا کنید و با آزمونُ خطا مسیر رو طی نکنید،
در / این صفحه / مسیری خلق شده که اگر فعالیت حرفه ای خودت به سمت دیزاینر شدن رو می‌خوای ادامه بدی،
و به مقوله دیزاین جدی تر از بقیه مردم نگاه می‌کنی لازمه نگاهی بهش بندازی؛
ممنون که تا انتهای این مقاله همراه من بودید، خدا نگهدارتون.