https://virgool.io/feed/@bemanielham طراح رابط و تجربه کاربری fa 2026-04-15 09:47:49 https://files.virgool.io/upload/users/1911393/avatar/Ev8yjY.jpg?height=120&width=120 https://virgool.io/@bemanielham https://virgool.io/@bemanielham/%D8%AF%D9%88%D9%85%DB%8C%D9%86-%D9%82%D8%B7%D8%B9%D9%87-%D8%A7%D8%B2-%D9%BE%D8%A7%D8%B2%D9%84-%DA%AF%DB%8C%D9%85%DB%8C%D9%81%DB%8C%DA%A9%DB%8C%D8%B4%D9%86-qjy7r3op3x0r در اولین قطعه سعی کردم به زبان ساده مفهوم کلی طراحی متقاعد کننده رو به اشتراک بگذارم. حالا با ذهنیتی که از اون مفهوم داریم میتونیم تمرکزمون رو کامل سمت موضوع گیمیفیکیشن ببریم.گیمیفیکیشن چیست؟بازی‌ها بوجود اومدن تا ما در روند بازی‌ها مسائل ساختگی و غیرواقعی رو حل کنیم، در گیمیفیکیشن ما از ابزار‌ها، مکانیزم‌ها و تفکر بازی برای حل مسائل واقعی در فضای خارج از بازی استفاده میکنیم و در محصول و دیزاین ما گمیفیکیشن رو با هدف درگیر کردن کاربر و برانگیختن او در راستای دستیابی به اهداف خود کاربر و دستاوردهای تجاری به کار میبریم.برای مثال زدن استفاده از گیمیفیکیشن میشه به شرکت The Fun Theory که وابسته به فولکس واگن هست اشاره کرد، این شرکت باور داره که "یک ایده سرگرم کننده، میتونه بهترین راه برای تغییر رفتار افراد باشه". اگر سوار مترو شده باشین، حتما بارها با ازدحام جمعیت جلوی پله برقی مواجه شدین. این شرکت برای ترغیب مردم به استفاده از پله‌های معمولی به جای پله برقی، ایده پله‌های پیانویی رو در شهر‌های فراوانی از جمله ملبورن، استکهلم، میلان و استانبول اجرا کرده.با پا گذاشتن روی هر یک از پله‌ها، صدای یکی از کلید‌های پیانو به گوش میرسه. این ایده برای مسافران هم بسیار جالب بوده و یکی از ویدیوهای مربوط به این پیانو های غول پیکر در یوتیوب بیش از 23 میلیون بار بازدید داشته.فارسی سازی گیمیفیکیشنعده زیادی سعی داشتن معادل فارسی کلمه گیمیفیکیشن رو ابداع کنن اما متاسفانه زبان فارسی این قابلیت رو نداره. برای معادل سازی ما ابتدا باید بتونیم در زبان فارسی برای دو واژه Game و Play معانی و تعاریف متفاوتی مطرح کنیم. این دو واژه با هم متفاوت هستند. در واژه Game ما به عملی اشاره میکنیم که هدف و قانون داره ولی Play قانون و هدفی رو دنبال نمیکنه و در لحظه اتفاق میوفته. برای مثال، اگر ماشین اسباب بازی رو دست یک کودک بدهیم امکانش هست که اون رو به جای هواپیما در هوا حرکت بده (Play) اما همون ماشین رو بدست یک آدم بالغ که به بازی علاقه داره بدیم ممکنه حاشیه فرش رو به عنوان جاده انتخاب کنه و با قوانین خاص یک بازی رو شروع کنه (Game). ما در فارسی برای هر دو مثال از واژه بازی استفاده میکنیم و تا زمانی که برای این دو تعریف واژه متفاوتی در نظر گرفته نشه، معادل فارسی برای گیمیفیکیشن هم بوجود نمیاد.اخلاق در دیزاین و استفاده از گیمیفیکیشنبه یک اسلحه فکر کنید؛ اسلحه به خودی خود باعث آسیب نمیشه فقط یک وسیله هست که با اون میشه به دیگران آسیب رسوند. مثل اسلحه، گیمیفیکیشن رو هم میشه یک ابزار یا جعبه ابزاری برای دیزاینر‌ها در نظر گرفت. متاسفانه تعداد دیزاینر‌هایی که اطلاع کامل از اثرات بلند مدتی که روی کاربر میگذارن دارن بسیار محدوده. خیلی از محصولات ابتدای کار قصد آسیب رسوندن به کاربر رو ندارن اما در ادامه ناخواسته باعث ایجاد مشکلاتی برای کاربران میشن. برای مثال فیسبوک در ابتدا نمیدونست گزینه لایک که قرار هست اضافه کنه چقدر میتونه برای کاربران اعتیاد آور باشه یا اسنپ چت نمیدونست که فیلترهاش چقدر میتونه باعث کمبود اعتماد بنفس و افزایش عمل‌های زیبایی بشه. اخلاقیات در دیزاین به عهده دیزاینر هست و اخلاق و فکر کردن به عواقب تصمیمات باید عضو جدایی ناپذیر از دیزاین باشه تا مقدار کاربرها یا خرید روزانه جاش رو به معیار کاربردی بودن و مفید بودن محصول نده. الهام بمانی الهام بمانی Tue, 04 Jun 2024 17:31:52 +0330 https://virgool.io/@bemanielham/%D8%A7%D9%88%D9%84%DB%8C%D9%86-%D9%82%D8%B7%D8%B9%D9%87-%D8%A7%D8%B2-%D9%BE%D8%A7%D8%B2%D9%84-%DA%AF%DB%8C%D9%85%DB%8C%D9%81%DB%8C%DA%A9%DB%8C%D8%B4%D9%86-qgf9ebvilzho خیلی وقت نمیگذشت که با موضوع گیمیفیکیشن آشنا شده بودم که یک روز بین سرچ‌هام به لایو‌های آقای علیرضا شورابی و آقای امیر تقی‌آبادی برخوردم. آقای تقی‌آبادی تعدادی لایو رو داخل کانال یوتوبشون سیو کرده بودن که خیلی جذاب و ساده در اون ویدیوها راجب گیمیفیکیشن گفت‌وگو میکردن.از همون زمانی که لایو ها رو دیدم و میدونستم که یک بار دیدنشون برام کافی نیست، تصمیم گرفتم که محتوای هر لایو ( به علاوه مقداری توضیحات اضافه‌تر ) رو با اجازه از خود آقای تقی‌آبادی در چند مقاله اینجا منتشر کنم.اگر به تازگی یا برای اولین‌‌بار هست که با این موضوع آشنا میشین ممکنه مثل من توی دنیایی از کلمات عجیب و جدید غرق بشین اما تلاشم بر این هست که به همون اندازه که خودم موفق شدم مفهوم این کلمات رو متوجه بشم به هرکسی که این سری مقالات رو میخونه هم این مفاهیم رو منتقل کنم.برای درک معنی و نکات گیمیفیکیشن بهتره اول به سراغ مفهوم طراحی متقاعد کننده یا Persuasive design بریم.طراحی متقاعد کننده | Persuasive designتصور کنید با قصد خرید یک مدل هندزفری وارد یک سایت فروشگاهی شدید، شما بعد از جستجو اون محصول رو پیدا نمیکنید اما در لاین تخفیفات ویژه فروشگاه شما یک هندزفری با مشخصات خیلی شبیه به هندزفری که در نظر داشتین با تخفیف بالا و قیمت مناسب پیدا میکنن و دست خالی سایت رو ترک نمیکنین.این اتفاق نشون دهنده اینه که طراح UI/UX اون سایت نه اینکه شما رو فریب داده باشه، بلکه با شناختی که روی انسان، ذهن انسان، محرک‌های تصمیم گیری و رفتاری اون داره تونسته با استفاده از اطلاعات و اصول روانشناسی، به طور طبیعی روی احساسات و رفتار شما تاثیر بگذاره و شما رو متقاعد کنه تا همون عملی که ازتون به عنوان کاربر محصولش انتظار داره رو انجام بدین.انسان‌ها علم روانشناسی و جامعه شناسی رو مطالعه میکنن به این دلیل که راجب رفتار و افکار انسان شناخت پیدا کنن تا بتونن توسط همون اطلاعات دیگران رو کنترل کنن و زمانی که بخواهیم کلمه کنترل کردن رو زیباتر جلوه بدیم روی این کلمه برچسب "قانع کردن" میزنیم.در دنیای محصول، به این هنر قانع کردن طبیعی از طریق کار روی احساسات و عقل کاربر، طراحی متقاعد کننده یا Persuasive design گفته میشه.در فرآیند متقاعد سازی، رابطه‌ای دو طرفه بین اقناع کننده و اقناع شونده بوجود میاد که اقناع کننده تلاش میکنه از طریق یکسری پیام، اقناع شونده رو ترغیب کنه تا برای هدفی، کار مشخصی رو انجام بده.در دیزاین، وسیله اقناع همان محصول، اقناع کننده طراح و اقناع شونده کاربر و تمام ویژگی‌ها و المان‌ها مثل عکس و رنگ و محتوا وسیله هستن.بی‌جی فاگ نویسنده کتاب "تکنولوژی اغواگر" به این موضوع اشاره میکنه که ما از کامپیوترها به عنوان یک ابزار برای تغییر رفتار و نگرش افراد میتونیم استفاده کنیم و اونها رو برای رفتاری متقاعد کنیم و این متقاعد سازی زمانی که جنس دیجیتال میگیره با عنوان کَپتولوژی (Captology) شناخته میشه. تمام چیزی که امروز ما از دیجیتال مارکتینگ و گیمیفیکیشن میشناسیم زیر مجموعه کپتولوژی هست.فاگ معتقده که هر رفتاری که از ما سر میزنه 3 قدم داره:یک نشانه ما رو بر می‌انگیزهتوانایی انجام اون چک میشهدر صورت وجود انگیزه اون رفتار و عمل از ما سر میزنهدرس اصلی فاگ دقیقا همینه که باید روی گیمیفای کردن نشانه‌ای که به کاربر انگیزه میده کار کنیم و اون رو برای انجام کار مورد نظرمون هدایت کنیم.طراحی متقاعد کننده در شبکه‌های اجتماعی و بازی‌هاآقای اسکینر با یکسری آزمایشات این موضوع رو اثبات کرد که مغز پستانداران و پرندگان به شکلی هست که ما میتونیم با نوعی پاداش، مقدار معین از اون و فاصله زمانی مشخص بین دو پاداش؛ پترنی برای اون موجود بدست بیاریم که این پترن بدلیل ترشح نوروترنسلیتر‌ها در مغز(نوروترنسلیتر‌ها یا انتقال دهنده عصبی پیام‌رسان شیمیایی در بدن هستن که وظیفه اونها انتقال پیام‌های عصبی از سلول‌های عصبی به سلول‌های هدف هست و این سلول‌های هدف ممکنه در عضلات غدد یا سایر اعصاب باشن) خاصیت اعتیادآوری خیلی بالایی داره و ما در طراحی متقاعد‌کننده قصد داریم پترن کاربران رو بدست بیاریم و روی اونها تاثیر بگذاریم.برای اطلاعات بیشتر راجب آزمایش آقای اسکینر، میتونین آزمایش "جعبه اسکینر" رو مطالعه کنین.نوتیف اینستاگرام دقیقا همین کار رو با ما میکنه. بر اساس بررسی‌ها، تاثیر دریافت حجم زیادی کامنت و لایک، با تاثیر سورپرایز شدن با یک هدیه یکی هست. اینستاگرام بخاطر حجم دیتای بالا، پترن‌هایی رو بدست آوردن و متوجه شدن که با چه فاصله زمانی ای باید کامنتهای کاربر رو جمع کرده و در زمان مشخصی برای کاربر بفرستن. اگر دقت کنید میبینید که زمانی که شما پستی رو داخل اینستاگرام منتشر میکنین لایک و کامنت‌ها خیلی سریع نمایش داده میشن و ولی کمی زمان که میگذره این لایک و کامنت رو بصورت گروهی در زمان‌های خاصی به شما نمایش میده و با اینکار تمام تمرکزش روی ترشح نوروترنسلیتر در مغز شماست.با گذشت زمان از محصول و با دریافت حجم دیتای بالا، به جای طراحی یک پترن برای تمام کاربران، میشه برای هر کاربری بصورت شخصی یک پترن تعریف کرد.برای رسیدن به این پترن‌ها نیازه که اولایلی که اپ یا بازی تولید میشه اجازه ندیم اون محصول مطرح و فراگیر بشه. باید بگذاریم خیلی آروم شناخته بشه تا بتونیم راحت رفتار کاربرانمون رو بسنجیم و محصول رو بهبود بدیم و اطلاعاتی که برای اون پترن‌ها نیاز هست رو بدست بیاریم. خیلی از بازی‌ها مثل امانگ آس، کلش آف کلنز ، کت وارز و انگری بردز نمونه‌هایی از این حرکت هستن که تا مدت زیادی توسط کاربرای کمی شناخته و استفاده شدن و بعد از بهبود به شدت مطرح شدن و با رضایت کاربران زیادی روبرو شدن.حرف آخرطراحی متقاعد کننده یا Persuasive Design بصورت خلاصه میشه ابزاری کردن تمام دانشی که در علوم انسانی بدست اومده برای تاثیر گذاری روی رفتار و طرز فکر کاربر و قانع کردن او برای انجام دادن یا ندادن کاری و یا تغییر افکار و باور برای هدفی خاص.امیدوارم تونسته باشم مفاهیمی که خودم تازه باهاشون آشنا شدم رو بصورت ساده به اشتراک بگذارم. قطعا با مرور زمان قطعه‌های بعدی این پازل بهتر و کامل‌تر میشه!لینک ویدیوهای گیمفیکیشن در یوتوب: https://www.youtube.com/watch?v=yHRNqfxQ8QI&list=PLT4L2_8BD6plazEDGxLOlTiFMAsdNdCDv الهام بمانی الهام بمانی Mon, 27 May 2024 20:24:43 +0330 https://virgool.io/@bemanielham/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A7%D8%AA%D9%85%DB%8C-atomic-design-qputwuja4e3h "...مجموعه‌ای از ذرات و قطعات که رابط کاربری شما را تشکیل میدهند."این جمله متعلق به برد فراست (Brad frost) است، شخصی که روش طراحی اتمی را مطرح کرد. امیدوارم که آخر این مقاله منظور برد فراست رو از جمله بالا کامل متوجه شده باشین.برد در کتابی با همین نام توضیح داده که وقتی به دنبال ایده‌ای برای نظم دادن به طرح‌ها و کامپوننت‌های خودش بوده به این فکر افتاده که میتونه این دسته بندی‌ها رو از دسته بندی‌هایی که برای عناصر در شیمی استفاده میشن الهام بگیره. در شیمی با ترکیب عناصر ساده میشه عناصر پیچیده‌تر ساخت و با الهام از شیمی، با ترکیب اجزای کوچک یک طرح، میشه طرح‌های پیچیده‌تر ساخت.طراحی اتمی دقیقا چیه؟به حل کردن یک پازل 1000 قطعه فکر کنید. برای حل این نوع پازل‌های سخت و پیچیده، ما معمولا اول قطعه‌های شبیه به هم رو جدا میکنیم، بعد قطعه‌های مربوط رو به هم وصل میکنیم و بعد مجموعه‌ای از قطعه‌ها رو متصل میکنیم و به همین شکل جلو میریم تا پازل تکمیل میشه.با همین مثال میتونیم طراحی اتمی رو تعریف کنیم. در طراحی اتمی، یک طرح پیچیده هم با کنار هم قرار گرفتن کوچیک ترین اجزا تشکیل میشن که توی این روش ما به اون‌ها "اتم" میگیم.طراحی اتمی در پروسه دیزاین، یک کتاب راهنماست که به ما میگه هر چیز چگونه‌، کجا و به چه شکل قرار هست استفاده بشه. این روش یک زبان مشترک بین طراحان و برنامه نویسان ایجاد میکنه که باعث جلوگیری از ناهماهنگی‌ها و سرعت بخشیدن به کار میشه.جدا از سرعت و هماهنگی، در پروسه طراحی خیلی اوقات پیش میاد که طراحان مثل برنامه نویسان منطقی به طرح‌ها نگاه نکنن و تمایل داشته باشن که خلاقیت زیادی توی طرح بکار ببرن، طراحی اتمی این کمک رو به اونها میکنه تا طبق سلیقه خود و منطبق با چهارچوب برنامه نویس طرح‌ها رو پیش ببرن.برد فراست مفهوم خودش رو اینطور بیان میکنه که با توجه به شیوه طراحی اتمی، طرح‌های ما از ترکیب اتم‌ها، مولکول‌ها، سلول‌ها، ارگانیسم‌ها، قالب‌ها و در آخر صفحه‌ها تشکیل میشه. در ادامه هرکدوم از این موارد رو بررسی میکنیم.اتم‌ها(Atoms)در طراحی اتمی، اتم‌ها کوچکترین و اساسی‌ترین عناصر تشکیل دهنده در رابط کاربری هستند که از ترکیب آنها طرح‌های پیچیده و متفاوت تشکیل میشه.اتم‌ها در طراحی میتونن شامل دکمه‌ها، برچسب‌ها، آیکون‌ها، یا حتی عناصر انتزاعی‌تر مثل پالت رنگ، قلم‌ها، یا حتی انیمیشن‌ها باشن که ما در طراحی به جای ترکیب اتم‌های هیدروژن و اکسیژن، اینها رو باهم ترکیب میکنیم و در طول طراحی ازشون استفاده میکنیم.درست مثل اتم‌های موجود در طبیعت، به تنهایی مفید نیستن و باید اونها رو ترکیب کرد تا مورد استفاده قرار بگیرن.ملکول‌ها(Molecules)مولکول‌ها در رابط کاربری همون component ها هستن که از گروهی از اتم‌هایی که به هم متصل میشن بدست میان و کارایی و خواص متفاوتی دارن.برای مثال باکس‌ جستجو رو در نظر بگیرین. آیکون، متن و دکمه هر کدوم یک اتم جدا هستن که ما میتونیم این اتم‌ها رو به روش‌های مختلف با هم ترکیب کنیم و از اونها استفاده کنیم و هرکدوم در جاهای مختلف کارایی و مفهوم متفاوتی داشته باشن. زمانی که این اتم‌ها با هم ترکیب بشن مولکول باکس جستجو بوجود میاد.در دیزاین سیستم‌ها از ترکیب اتم‌ها مولکول های زیادی برای استفاده مجدد در جاهای مختلف طرح ساخته میشه که میشه به این مولکول ها به عنوان ستون فقرات دیزاین سیستم هم اشاره کرد.پموجودیت‌ها(Organisms)ارگانیزم‌ها از کنار هم قرار گرفتن یک یا چند مولکول ساخته شده از اتم‌ها بوجود میان. مولکول‌های ترکیب شده در ارگانیزم‌ها میتونن شبیه هم یا متفاوت از هم باشن.برای مثال منوی همبرگری نمونه ای از یک ارگانیزم هست. اون شامل لوگو، مشخصات کاربر، مولکول جستجو، دکمه ثبت نام و... هست.ارگانیزم‌ها همچنان طرح کاملی نیستن و فقط از ترکیب چند مولکول بوجود میان و یک کامپوننت پیچیده تر رو بوجود میارن.الگوها(Templates)این بخش دیگه شباهت زیادی به جهان مولکولی و شیمی نداره و نمیشه با چیزی مثالش زد ولی برای طراحی اتمی بخش مهمی هست.الگو‌ها با توجه به محصول نهایی و محتوای اصلی صفحه بوجود میان. اگر هر اتم رو یه استخون کوچک در نظر بگیریم، الگوها حکم اسکلت رو داخل یک طرح دارن.همونطور که بالاتر هم اشاره شد، مولکول‌ها از ترکیب اتم‌ها بدست میان و از ترکیب مولکول‌ها هم ارگانیزم‌ها بوجود میان؛ در آخر این ارگانیزم‌ها جایی دور هم جمع میشن و الگو‌ها رو تشکیل میدن. اونا از نظر ترکیب و محتوا فرق خیلی زیادی با خروجی طرح ندارن ولی باز هم طرح پایانی ما نیستن.قالب همون wireframe هست که بالاخره در این بخش از کار ما میتونیم این مرحله رو با کارفرما به اشتراک بگذاریم و با توجه به نیاز‌ها و خواسته‌ها، جزئیاتی رو اضافه یا کم کنیم تا به طرح نسبتا نهایی برسیم.صفحات(Pages)این مرحله آخرین مرحه از طراحی اتمی هست که در این قسمت ما طرح نهایی رو آماده میکنیم و همه چیز رو سرجاش قرار میدیم و چگونگی قرار گیری اجزای طرح رو کنار هم چک میکنیم.این صفحه‌ها نمونه واقعی و پیشرفته‌تر قالب‌ها هستن که از محتوای واقعی مثل رنگ‌ها، تصاویر، متن‌ها و شکل‌ها در اونها استفاده میشه. هر وب‌سایت یا اپلیکیشنی که الان مشاهده میکنین داخل این مرحله آخر قرار داره.جمع بندیطراحی اتمی روش کاربردی و کارآمد برای دقیق و با نظم و یکدست جلو رفتن طرح و ارتباط و همکاری بهتر بین طراحان و برنامه نویسان هست. شاید ابتدای کار این روش سخت یا بی استفاده بنظر برسه اما در ادامه‌ی مسیر و رشد و پیشرفت محصول نیاز به این روش احساس میشه.امیدوارم حالا موفق شده باشم و مفهوم جمله برد فراست که اول مقاله بهش اشاره شد رو رسونده باشم! الهام بمانی الهام بمانی Mon, 18 Mar 2024 08:43:03 +0330 https://virgool.io/@bemanielham/%D8%AF%DB%8C%D8%B2%D8%A7%DB%8C%D9%86-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-design-system-hbd5wxdilcir چند ماهی بود از دوره کارآموزیم داخل شرکتی میگذشت؛ یک روز با یکی از همکار‌ها مشغول صحبت بودیم که به دیزاین سیستم‌ها اشاره کرد و ازشون سوال پرسید، وقتی دید شبیه علامت سوال شدم بحث رو تموم کرد تا اجازه بده من تحقیقاتم و شروع کنم. سرچ کردن و شروع کردم و سایت های مختلف رو زیر و رو کردم تا بالاخره تونستم به شناخت کلی از دیزاین سیستم‌ها برسم.دیزاین سیستم چیه؟به یک محصولی فکر کنید که چند تیم مختلف طراحی دارن روی اون کار میکنن؛ زمانی که صحبت از چندین نفر یا چند تیم میشه، هماهنگ بودن آدم ها سخت میشه، هماهنگ بودن طرح‌ها سخت تر!اون محصول در حال توسعه هست و طرح ها هم باید هماهنگ باهم پیش برن، اینجاست که دیزاین سیستم‌ها این مشکل رو حل میکنن. دیزاین سیستم‌ها مجموعه ای از عناصر مورد نیاز یک تیم برای طراحی و توسعه یک محصول هست و به طور مداوم همراه با محصول، ابزار و فن آوری های جدید بروزرسانی میشه. از فاکتور‌های اصلی که باید هنگام طراحی این سیستم در نظر گرفته بشه، مقیاس، تکرار پذیری پروژه‌های شما و منابع و زمان در دسترس شماست.دیزاین سیستم علاوه بر اینکه ابزاری برای طراحان و دولوپر ها هست، برای دستیابی به عناصر انتزاعی مثل ارزش های برند، روش های کار مشترک، طرز فکر، باور های مشترک و ... استفاده میشه.آیتم های موجود در دیزاین سیستم1. هدف و ارزش‌های مشترکتعریف هدف و ارزش مشترک، یا مشخص کردن نقطه ایده محصول، باعث میشه که تمام تیم در یک وضعیت ذهنی مشترک قرار بگیرن. در این قسمت به غیر از اهداف و ارزش‌های تجاری به اهداف و ارزش‌های تیمی هم میشه اشاره کرد.2. اصول طراحیاصول طراحی دستورالعمل هایی هست که تیم طراحی رو برای رسیدن به هدف تعیین شده برای محصول نهایی هدایت میکنه و انتخاب ها رو برای طراحان در مسیر طراحی تعیین میکنه.3. هویت و زبان برندمواردی که الفبای یک برند رو تشکیل میدن عبارتند از:•رنگ‌•فونت‌•فضا•اشکال•آیکون‌•تصاویر‌•انیمیشن‌•آوا و لحن‌•صدادر طراحی دیزاین سیستم، قواعدی که باید برای استفاده این موارد و کنار هم قرار دادن اون‌ها و باید‌ها و نباید‌ها در طراحی اون‌ها در سیستم رعایت بشه توضیح داده میشه.4. کامپوننت ها و پترن هاهمه ی مواردی که درباره‌اش صحبت کردیم، برای ساخت کامپوننت‌ها و پترن ها مورد استفاده قرار میگیرن و میتونیم از این ها در ساخت و توسعه محصول به صورت مستمر استفاده کنیم.کامپوننت‌ها توسط طراحان طراحی شده و توسط دولوپر‌ها به کد تبدیل میشن و پترن‌ها شامل توضیحات و باید‌ها و نباید‌های استفاده از کامپوننت‌ها در سیستم هستن.داشتن یه دیزاین سیستم برای تیم طراحی، باعث میشه که طراحان بتونن به جای وقت گذاشتن روی طراحی عناصر تکراری، وقت بیشتری برای مشکلات پیچیده‌تر مثل اولویت بندی اطلاعات و مدیریت سفر کاربر و ... اختصاص بدن.دیزاین سیستم‌ها جدا از طراحی، نیاز به نگهداری و بروز رسانی دارن و به طور معمول یک تیم مسئولیت طراحی و نگهداری این سیستم رو به عهده میگیره.اندازه تیم میتونه برای هر شرکتی متفاوت باشه اما حداقل افرادی که حضور اونها داخل تیم اجباری هست شامل ( Interaction Designer / طراح تعامل - Visual Designer / طراح بصری - Developer / توسعه دهنده ) و در حالت ایده آل داخل این تیم نقش های دیگه ای مثل ( Resercher / محقق - Architect / معمار - Content Writer / نویسنده محتوا) میتونن حضور داشته باشن.معمولا هر مجموعه بزرگی برای هماهنگی، دیزاین سیستم خودش رو طراحی و تصویب میکنه. اما این به این معنی نیست که طراحان یا دولوپر‌ها نتونن از دیزاین سیستم‌های مطرح دیگه ای برای طراحی و پیاده‌سازی یا آموزش استفاده نکنن! اشاره‌ ای به چند دیزاین سیستم بزرگatlassian design اطلسیان یک شرکت ایتالیایی هست که در زمینه نرم افزار و سرمایه‌گذاری فعالیت میکنه. از مهمترین محصولاتش میشه به نرم افزار jira و Confluence اشاره کرد. اولین دیزاین سیستم این شرکت در سال 2012 منتشر شد. مهمترین خصوصیت این دیزاین سیستم اینه که در طراحی آیتم‌ها از نسبت کنتراست‌های استانداردی استفاده میکنه که حتی کاربرانی که از بینایی کمی هم برخوردارند به راحتی میتونن از محصولات استفاده کنن.2. carbon design systemدیزاین سیستم کربن، متعلق به شرکت IBM هست که در زمینه تولید سخت‌افزار و نرم‌افزار فعالیت داره. دیزاین سیستم carbon در مقایسه با بقیه دیزاین سیستم‌ها، تخصصی‌تر و متفاوت‌تر و پر جزئیات‌تر هست و مورد توجه و استقبال طراحان و دولوپر‌های زیادی قرار گرفته.3. apple human interface guidelinesاین سایت، مربوط به شرکت apple هست که دیگه کمتر کسی هست که شناختی ازش نداشته باشه. اپل داخل این سایت دیزاین سیستم و کلی منابع آموزشی برای طراحان و دولوپر‌ها قرار داده و برای هر کامپوننت توضیحات کاملی اختصاص داده شده.4. material designمتریال دیزاین، دیزاین سیستمی هست که گوگل ارائه داده و یه منبع بزرگ آموزشی برای طراح ها حساب میشه. به جز کامپوننت هایی که کامل با جزئیات راجب اونها توضیح داده شده، داخل قسمت styles راهنمای کاملی از انتخاب رنگ، تایپوگرافی، آیکون ها و شکل ها وجود داره. در حال حاضر سه نسخه از این دیزاین سیستم منتشر شده.معرفی ابزارهای طراحی و ساخت دیزاین سیستمحالا که یه معرفی کوتاه از دیزاین سیستم و چند نمونه از اون رو داشتیم، بد نیست چند تا ابزاری که با اون‌ها میشه سراغ ساخت دیزاین سیستم خودمون بریم هم بشناسیم.بعضی از این ابزار‌ها به طور اختصاصی روی طراحی و ساخت دیزاین سیستم تمرکز دارن و بعضی در کنار محصولات و خدماتی که ارائه میدن میشه ازشون برای طراحی و ساخت دیزاین سیستم ها هم کمک گرفت.AtomizeInvision AppLingoFigmaUX pinنتیجه گیریهمونطور که بالاتر به این نکته اشاره کردم، دیزاین سیستم همراه با محصول، نیاز به نگهداری و توسعه داره و هرچی که این سیستم با جریان کاری طراحان و دولوپر‌‌ها در یک راستا باشه، اثر بخشی بیشتری داره.دیزاین سیستم‌های متفاوت زیادی وجود دارن که هرکدوم بسته به هدف و ارزش‌های محصول طراحی شدن و داخل این مقاله فقط به تعدادی از اون‌ها اشاره شد، اما پیشنهاد میکنم حتما سری به این وبسایت‌ها بزنین که میتونن خیلی کمک کننده باشن مخصوصا اگه اول راه هستین! الهام بمانی الهام بمانی Sat, 13 Jan 2024 10:01:17 +0330