https://virgool.io/feed/@ehsanhadi احسان هادی هستم یک طراح، علاقمند به علوم شناختی در حوزه طراحی و معتقد به ترویج علم رایگان و آزاد و اینجا درباره طراحی و تجربه خودم در مسیر شغلی حرف میزنم ? fa 2026-06-07 08:19:21 https://files.virgool.io/upload/users/28246/avatar/LV0fFc.jpg?height=120&width=120 https://virgool.io/@ehsanhadi https://virgool.io/designblog/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A7%D8%AA%D9%85%DB%8C-atomic-design-ytjdpjte5vf3 ما صفحات را طراحی نمی کنیم، بلکه سیستمی از کامپوننت‌ها را طراحی می کنیم. Stephen Hayاین مطلب ترجمه‌ و خلاصه‌ای است از Atomic Design، روشی برای طراحی دیزاین سیستم‌ها بر پایه اجزای سازنده آن که Brad Frost تهیه کرده است و در بسیاری از موارد مخصوصا به عنوان یک روش، فلسفه و چارچوب برای رسیدن به یک دیزاین سیستم کارگشاست. «بِرَد فِراست» کتابی به همین نام دارد که در آن توضیح داده وقتی به دنبال ایده‌ای برای نظم دادن به تولید کامپوننت‌های سازنده یک رابط کاربری بوده به فکر استفاده از روشی افتاده که در شیمی برای دسته‌بندی عناصر استفاده می‌شود، در این روش با ترکیب عناصر ساده می‌توان عناصر پیچیده‌تر ساخت و از آن پس این فلسفه به عنوان سنگ بنای یک متدولوژی برای ساخت دیزاین سیستم‌های متفاوت قرار گرفت.رابط‌های کاربری از اجزای کوچکتری ساخته شده‌اند. این بدان معنی است که ما می‌توانیم کل رابط‌ها را به ساختمان بلوک‌های اساسی شکسته و از آنجا کار را شروع کنیم. این اصلی ترین ویژگی طراحی اتمی است.جدول تناوبی عناصر یک رابط کاربریطراحی اتمی (Atomic design)چیست؟ پنج سطح در متدولوژی طراحی اتمی طراحی اتمی روشی (methodology) است برای ساخت سیستم‌های طراحی (Design Systems)، این روش دارای پنج سطح مشخص است :اتم‌ها (Atoms)مولکول‌ها (Molecules)ارگانیسم‌ها (Organisms)قالب‌ها (Templates)صفحه‌ها (Pages)اتم‌ها (Atoms)اتم‌ها عناصر پایه در ساخت هر عنصر هستند. در رابط‌کاربری یک وب‌سایت می‌توان از تگ‌های HTML مانند لیبل، ورودی‌ها یا دکمه‌ها به عنوان اتم نام برد.مثالی از اتم ها در متدولوژی طراحی اتمی اتم‌ها همچنین می توانند شامل عناصر انتزاعی‌تر مانند پالت‌های رنگی ، قلم‌ها و جنبه‌های حتی نامرئی‌تر یک رابط‌کاربری مانند انیمیشن‌ها باشند.درست همانند اتم‌های موجود در طبیعت، آنها کاملاً انتزاعی هستند و اغلب به‌تنهایی مفید نیستند. با اینحال به عنوان یک مرجع خوب در جدول یک کتابخانه الگو (pattern library) می توانید کلیت سیستم را در آن‌ها ببینید.مولکول‌ها (Molecules)وقتی شروع به ترکیب اتم‌ها با هم می‌کنیم ، همه‌چیز جالب‌تر و ملموس‌تر می‌شوند. در واقع مولکول‌ها گروه‌هایی از اتم هستند که به هم پیوسته‌اند و کوچکترین واحد اساسی یک ترکیب (component) هستند. این مولکول‌ها خاصیت خاص خود را دارند و به عنوان ستون فقرات سیستم‌های طراحی (Design systems) ما عمل می‌کنند.مثالی از مولکول‌ها در متدولوژی طراحی اتمی به عنوان مثال ، یک برچسب فرم(label)، ورودی (input) یا دکمه، به خودی خود و تنهایی چندان مفید و کاربردی به نظر نمی‌رسند، اما وقتی آنها را به عنوان یک «فرم» ترکیب کنید دارای «کاربرد» می‌شوند. «استیو جابز» : "یک کار را انجام بده؛ و آن کار را خوب انجام بده." و این همان کاری است که حاصل ترکیب اتم‌ها با هم به عنوان یک مولکول کاربردی انجام می‌دهد، که این ما را دلگرم می‌کند. در حالی که مولکول‌ها در یک نگاه پیچیده به نظر می‌رسند، ولی با یک نگاه دقیق، آنها فقط ترکیب نسبتاً ساده‌ای از اتم‌ها هستند که برای «استفاده مجدد» ساخته شده‌اند.ارگانیسم‌ها (Organisms)مولکول‌ها، آجرها و بلوک‌های ساختمانی را در اختیار ما می‌گذارند تا بتوانیم با آنها کار کنیم، اکنون می‌توانیم آن‌ها را با هم ترکیب کنیم تا ارگانیسم‌ها تشکیل شوند. ارگانیسم‌ها گروه‌هایی از مولکول‌ها هستند که به یکدیگر متصل می‌شوند تا یک بخش نسبتاً پیچیده‌تر و همچنین مستقل از کل رابط‌کاربری را تشکیل دهند.مثالی از ارگانیسم‌ها در متدولوژی طراحی اتمی اکنون در حال شروع مرحله‌ای هستیم که هرچه بیشتر ما را در راه رسیدن به یک نتیجه ملموس کمک می‌کند. کارفرما یا مشتری ممکن است زیاد با مولکول‌های طراحی شده در سیستم طراحی شما ارتباط برقرار نکند! اما ما با ساختن ارگانیسم‌ها شروع به شکل دادن به شمایل نهایی رابط‌کاربری می‌کنیم که برای کارفرما هم ملموس‌تر و قابل دیدن است.ارگانیسم‌ها می توانند از انواع مولکول‌های مشابه و یا متفاوت تشکیل شوند. به عنوان مثال، ارگانیسم قسمت بالای یک وب سایت (Masthead) ممکن است از اجزای متنوعی مانند لوگو، نوار پیمایش (navigation bar)، فرم جستجو و حتی لیست کانال‌های رسانه‌های اجتماعی تشکیل شود. اما یک ارگانیسم جهت نمایش "محصولات" (product grid) ممکن است از یک مولکول (احتمالاً حاوی تصویر محصول ، عنوان محصول و قیمت) تشکیل شود که بارها و بارها تکرار می شود.فرآیند ساختن ارگانیسم‌ها از مولکول‌ها، باعث تشکیل کامپوننت‌های مستقلی با ویژگی‌های همچون قابلیت جابجایی (portable) و همچنین استفاده مجدد (reusable) می‌گردد.قالب ها (Templates)در قسمت قالب‌ها، ما دیگر اصطلاحات شیمیایی مثل اتم، مولکول و … را کنار می‌گذاریم و از واژه‌هایی که برای مشتری و کارفرما آشنا‌تر هستند و حس بیشتری به عنوان خروجی کار القا می‌کنند، استفاده می‌کنیم.مثالی از قالب‌ها در متدولوژی طراحی اتمی قالب‌ها (templates) اغلب گروهی ارگانیسم‌ها هستند که با کنار هم قرار گرفتن، صفحات را تشکیل داده‌اند. اینجاست که در عمل ما طرح را می‌بینیم و به چیدمان (lay out) آن پی می‌بریم.از آنجا که قالب‌ها بسیار ملموس هستند و میتوانند زمینه را برای درک مفاهیم انتزاعی‌تری مثل مولکول‌ها و ارگانیسم ها فراهم کنند، معمولا کارفرما‌ها با آن ارتباط بهتر و بیشری برقرار می‌کنند و تجربه نشان داده می‌توان پروسه طراحی را به صورت وایرفریم (wireframe) از قالب‌ها آغاز کرد و در فرایند طراحی و با توجه به نیاز به جزییات با اضافه کردن اجزای کوچکتر، سرانجام به طرح نهایی رسید.صفحه‌ها (Pages)صفحات نمونه‌های خاصی از قالب‌ها هستند. در این مرحله جانمایی محتوا در قالب با محتوای واقعی جایگزین می‌شود و تجسمی واقعی از آنچه کاربر در انتها خواهد دید به‌دست می‌آید.مثالی از صفحه‌ها در متدولوژی طراحی اتمی صفحات در پروسه طراحی بالاترین درجه باورپذیری را درمخاطب ایجاد می‌کنند چون ملموس‌تر از سایر قسمت ها هستند و البته بیشترین زمان در فرآیند طراحی صرف همین بخش میشود، همچنین بیشترین نظر و بازخورد نیز بر روی این بخش گرفته می‌شود.در واقع این مرحله، زمانی است که ما در آن اثربخشی سیستم طراحی (Design system) را می‌سنجیم. دیدن همه چیز یکجا در در یک صفحه به ما اجازه می‌دهد نگاهی به عقب بیاندازیم تا مولکول‌ها، ارگانیسم‌ها و قالب‌ها را بهتر طراحی کنیم تا در نتیجه نمایش بهتری با داده‌های واقعی داشته باشیم.همچنین صفحات جایی هستند که می‌توان در آن قالب‌ها را از نظر میزان پذیرش تغییرات در موقعیت‌های مختلف آزمایش کرد. مثلا شما ورودی‌های مختلف را با انواع داده‌ها با تعداد کاراکتر‌های مختلف تست می‌کنید یا پاسخ دادن دکمه‌ها و دیگر عناصر صفحه را به کارکرد یکدیگر و نمایش در حالت بروز یک خطا را می‌توانید ببینید. تمام حالت‌های خاص در صفحات مختلف بر روی بازگشت به عقب و ساختن دوباره سیستم طراحی (Design System) تاثیر می‌گذارند.چرا طراحی اتمی (Atomic design) ؟از خیلی از جهات ما خیلی از این کارها را همیشه انجام می‌دهیم حتی اگر این عمل آگاهانه و از روی انتخاب این روش نباشد.طراحی اتمی روش روشنی برای دستیابی به سیستم های طراحی (Design Systems) فراهم می کند. مشتریان و اعضای تیم قادرند با دیدن مراحل انجام شده در پیش روی خودشان، مفهوم سیستم‌های طراحی را بهتر درک کنند.طراحی اتمی به ما قابلیت گذر از انتزاع به واقعیت ملموس را می دهد. به همین دلیل ما را قادر به ساختن سیستم هایی با ثبات (consistency) و قابلیت مقیاس پذیری (scalability) می‌کنند در حالی که هم‌زمان می‌توان چگونگی نمایش و عملکرد محتوای واقعی در خروجی‌نهایی را در آن شبیه‌سازی کرد. و مونتاژ (assembling) به جای ساختارشکنی (deconstructing)، یعنی ما از همان لحظه شروع در حال ساختن سیستم هستیم و منتظر نمی‌مانیم که در آخر پاییز جوجه ها را بشماریم.این متن به طور خلاصه می‌تواند ساختار این متدولوژی را روشن سازد ولی من پیشنهاد می‌کنم با توجه به در دسترس بودن این کتاب، با مطالعه کامل آن بیشتر با جزییات این روش آشنا شوید. در طول سالیان که طراحان زیادی از جمله خود من از این روش برای طراحی سیستم‌های طراحی استفاده کرده‌اند، همیشه انتقادهایی هم به این شیوه وارد بوده، مثلا در بیشتر موارد شما در حالی که باید از این فلسفه استفاده کنید اما لزوما نمی توانید تمام اجزای یک سیستم را بر مبنای نامگذاری‌های این روش مثل اتم ها، مولکول‌ها و ارگانیسم‌ها دسته‌بندی کنید و باید روش نامگذاری و دسته‌بندی خودتان را دنبال کنید.در پایان و در صورتی که به این موضوع علاقه‌مند هستید پیشنهاد می‌کنم مقاله‌ای را که به 10 دلیل برای استفاده از این روش در ساختن دیزاین سیستم‌ها اشاره کرده مطالعه کنید و یا این مقاله که نگاهی انتقادی به این روش داشته است، و همچنین این گفتگو که به بعضی مشکلات این روش اشاره کرده که خود آقای Frost هم در قسمتی از آن پاسخ داده است.این روش و در واقع فلسفه، انقلابی در طراحی و ساختن سیستم‌های طراحی بوده که استفاده از آن و همچنین ساختن روشی متفکرانه براساس آن، در نهایت هم برای طراحان و توسعه دهندگان، و هم برای کاربران محصولات می‌تواند مفید باشد. Ehsan Hadi Ehsan Hadi Fri, 09 Apr 2021 13:05:37 +0430 https://virgool.io/designblog/%D8%A7%D8%B3%D9%BE%D8%B1%DB%8C%D9%86%D8%AA-%DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8%AD%D9%84-%D9%85%D8%B4%DA%A9%D9%84%D8%A7%D8%AA-%D8%A8%D8%B2%D8%B1%DA%AF-%D9%88-%D8%AA%D8%B3%D8%AA-%D8%A7%DB%8C%D8%AF%D9%87-%D9%87%D8%A7%DB%8C-%D8%AC%D8%AF%DB%8C%D8%AF-%D9%81%D9%82%D8%B7-%D8%AF%D8%B1-%D9%BE%D9%86%D8%AC-%D8%B1%D9%88%D8%B2-qfnmqwqh08f8 خلاصه‌ای از کتاب SPRINT نوشته Jack Knapp خلاصه‌ای از کتاب SPRINT نوشته Jack Knappبرای من به عنوان یک طراح، همیشه کار گروهی یک چالش به حساب می‌آید و این چالش وقتی پُررنگ‌تر می‌شود که یک کار گروهی باید در یک زمان مشخص به نتیجه برسد. وای بر آن روز :)) در واقع من به عنوان عضوی از جامعه «دقیقه نودی‌ها» وقتی پای طراحی و ایده‌های نو در میان باشد تا آخرین لحظه ممکن در حال ایده‌پردازی هستم ( شاید بهتر است بگویم بودم ). با اینکه مدت‌ها بود که من با پدیده «چابکی» در کار تیمی و استفاده از روش «اسپرینت» در طراحی و تولید آشنا بودم و در استفاده از آن تجربه داشتم اما این کتاب، تجربه‌ای ناب از یکی از آغازگران این راه در چند پروژه واقعی را در اختیار من قرار داد که حیف بود اگر راجع به آن نمی‌نوشتم. البته سعی من در خلاصه نویسی این کتاب به نتیجه خوبی نرسید و تصمیم گرفتم یکی از خلاصه‌های خوب نوشته شده برای این کتاب را ترجمه کنم. خلاصه‌ای در چهار دقیقه!خلاصه در یک جمله (البته یک جمله بلند) : اسپرینت، به طور کامل روند مدیریت پروژه شما را دگرگون خواهد کرد و از نو خواهد ساخت، این روش به شما اجازه خواهد داد که از صفر تا مرحله ساختن یک پروتوتایپ را فقط در پنج روز بپیمایید و سریع‌تر از هر زمان دیگری متوجه شوید که ایده ارزشمندی داشتید یا نه!نقل قول مورد علاقه من: اسپرینت - جادوی حل مشکلات بر روی تخته - Jack Knapp - Sprintهفته گذشته، به پُستی از «Jack Knapp» برخوردم که در آن اعلام کرده بود پس از ده سال همراهی با Google و Google Venturs قصد دارد که تمرکز خود را بر روی نوشتن به صورت تمام وقت بگذارد. من فهمیدم که او قبلا کتابی را تحت عنوان Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days منتشر کرده بود، پس وقتی در Blinkist یافتمش، تهش رو درآوردم!همونطور که عنوان کتاب پیشنهاد می‌دهد، اسپرینت یک پروسه پنج روزه است، که بعد از آن شما بازخورد‌های انتقادی و مهمی درباره ایده‌های خود خواهید داشت و اینکه آیا این ایده‌ها برای مارکتینگ، تجربه مشتری یا طراحی محصول خوب کار خواهند کرد یا نه! «جِیک» این پروسه را در حالی طراحی کرده که مشغول کار بر روی پروژه‌هایی مثل Gmail یا Google X بوده، او اسپرینت‌ها را در بیش از 150 شرکت جلو برده، در بازه‌ای از Slack تا Mozilla و یا خطوط هوایی KLM.من نمی‌توانم تمام این پروسه را با جزییات با شما به اشتراک بگذارم، اما در اینجا یک بررسی اجمالی شامل چند مرحله حیاتی در این پروسه را آورده‌ام:اسپرینت شامل ضرب‌الاجل (deadline)، یک تیم در یک اتاق و پروتوتایپ است.بر روی تعریف یک لحظه در نقشه سفر مشتری متمرکز شوید و کار رو از همان‌جا ( از تَه به سر) شروع کنید. ( نکته‌ای که در این قسمت متن در ترجمه برای من جالب بود، اصطلاح Working Backwards بود که به معنی شروع از آخر است، مثلا وقتی شما دسته کلید خودتون را گم کرده‌اید از آخرین محلی که بودید شروع به گشتن می‌کنید و قدم به قدم عقب می‌روید تا کلید‌ها را پیدا کنید).یک طرح اولیه و سریع از راه‌حل‌های موجود ترسیم کنید ببینید چطور می‌توانید آنها را با هم ادغام کنید.امیدوارم کتونی‌های دویدنتون رو یادتو باشه کجا گذاشتید چون خیلی سریع می‌ریم سر اصل مطلب!حل مسئله در پنج روز در روش اسپرینتدرس اول: سه جزء اصلی اسپرینت، یک مهلت و مدت معین، حضور یک تیم در یک اتاق و تعداد کافی پروتوتایپ، هستند.خیلی از چیزهای خوب در صورت ضرورت و اجبار شکل می‌گیرند. اسپرینت‌ها هم از این قائده مستثنا نیستند. ایده وقتی به ذهن «جیک» خطور کرد که او مشغول کار بر روی اضافه کردن یک ویژگی مهم به Gmail بود، که چیزی نبود جز مرتب‌سازی خودکار پیام‌ها. وقتی فقط یک ماه تا زمان مقرر باقی مانده بود او مجبور به یک نوآوری در کار شد. البته به سرعت.برای اینکه این کار خوب از آب دربیاید، او روش جدیدی برای مدیریت پروژه طراحی کرد که اتفاقا کار هم کرد. از آن زمان او مشغول بهبود ساختار این روش بوده تا به امروز، مشخصه این روش سه جنبه کلیدی هستند:داشتن یک مهلت خیلی خیلی مشخص و سخت‌گیرانه. این باعث به تعویق افتادن یا ازبین بردن میل به تعلل و پشت‌گوش‌اندازی می‌شود. بر اساس قانون پارکینسون، میزان کار، همیشه زمانی که از قبل برای آن در نظر گرفته شده است را پر می‌کند، پس کوتاه‌تر، بهتر. یک اسپرینت معمولا پنج روز طول می‌کشد، از دوشنبه تا جمعه (البته برای فرنگی‌ها که برای ما می‌شود از شنبه تا چهارشنبه).قرار دادن افراد با مجموعه مهارت‌های مختلف در یک اتاق. مهندسین، بازاریابان، طراحان، حسابداران، متخصصین عملیات، مدیران، هرچه دیدگاه‌ها در تیم شما متنوع‌تر باشد بهتر است. تیم‌های اسپرینت معمولا از هفت نفر با سوابق مختلف تشکیل می‌شوند. از حضور تمام سطوح سلسله‌مراتب استقبال می‌شود.نتیجه باید یک پروتوتایپ مشخص باشد. طوفان ذهنی و ایده پردازی برای ایده‌های مبهم ساده است. بدست آوردن و داشتن چیزی کاربردی برای ارايه سخت است، اما آن چیز، در صورت وجود می‌تواند بازخورد استفاده‌کننده واقعی را به‌همراه داشته باشد.این سه قانون ساده باعث می‌شوند که اطمینان حاصل کنیم برای هر اسپرینت، افراد دور هم جمع می‌شوند، چشم در چشم می‌شوند، کار می کنند و چیزی تولید می‌کنند که براساس ارزش‌های واقعی شکل گرفته است. این دقیقا چیزی است که این پروسه را برای استارتاپ‌ها، که به منابع محدودی دسترسی دارند عالی و تکمیل می‌کند. درس دوم: مهندسی معکوس نقشه راهتان بوسیله تمرکز بر لحظه‌ای که کاربر با محصول ارتباط برقرار می‌کند.یکی از اولین قدم‌ها در اسپرینت شما شناسایی و تعریف کردن چالش است (define)، وظیفه‌ای که موفقیت آن به توانایی شما در مهندسی معکوس نیجه نهایی بستگی دارد. Savioke کمپانی که ربات‌های خدماتی تولید می‌کند، می‌خواست رباتی برای انجام دلیوری در اتاق‌های هتل طراحی کند که بتواند یک مورد مشخص را برای مهمانان هتل به درب اتاقشان ببرد و همچنین زمان زیادی را برای کارکنان هتل ذخیره کند.«جیک» در ابتدا با پرسیدن نحوه و زمان استفاده از محصول به آن‌ها کمک کرد که مشخص کنند می‌خواهند چه کسی را تحت تاثیر قرار بدهند. بعد از همه اینها، لحظه تعیین‌کننده زمانی است که مشتری شما (مشتری بالقوه) با محصول برای اولین بار روبرو می‌شود. برای Savioke این لحظه زمانی فرا می‌رسد که یک مهمان هتل درب اتاق را باز می‌کند و مواجه می‌شود با یک مورد جدید، مثل مسواک، که توسط یک ربات ارائه می‌شود.هر قدم از اینجا به بعد در خدمت آن لحظه بود. برای مثال،این بلافاصله نگرانی‌های ایجاد کرد که برخی افراد ممکن است با دیدن ربات بترسند، پس ربات باید ظاهری غیر تهدیدآمیز داشته باشد.من عاشق این دیدگاه شدم و در واقع چرخدنده های من رو به چرخش درآورد تا بتونم در مورد آنچه مربوط به پروسه پذیرش یک محصول توسط کاربر و جا انداختن یک محصول در تجربه کاربران لازمه روش خودم را بهبود بدهم.طرح‌های خود برای رسیدن به راه‌حل را با هم ترکیب تا به یک چیز اصلی برسید و پروژه را خُرد کنید.درس سوم: طرح‌های خود برای رسیدن به راه‌حل را با هم ترکیب تا به یک چیز اصلی برسید و پروژه را خُرد کنید.طوفان ذهنی ممکن است به تنهایی برای موفقیت یک اسپرینت کافی نباشد، اما به طور قطع یکی از قسمت‌های اصلی این پروسه به شمار می‌آید. برای ساده کردن آن، «جیک» پیشنهاد دموی به اصطلاح رعد و برقی را می‌دهد، که در آن هر عضو تیم سه دقیقه فرصت دارد که راه‌حل‌های موجود برای بخش‌های مختلف مشکلی که قرار است حل شود ارائه دهد.وقتی همه ارائه ها انجام شد، برای اینکه هر کسی بتواند در شرایط برابر خودش را نشان دهد و اثبات کند «جیک» پیشنهاد یک راه عالی داد: همه باید یک طرح ساده از تجسم راه‌حلی که پیشنهاد داده‌اند ترسیم کنند. مطمئنا همه توانایی خوبی در طراحی ندارند، اما حتی من که فقط چشم چشم دو ابرو می‌کشم هم می‌توانم طرحی ساده از یک صفحه سایت طراحی کنم!همه باید یک طرح ساده از تجسم راه‌حلی که پیشنهاد داده‌اند ترسیم کنند. طراحی‌های اولیه (Sketching) دو مزیت به همراه دارند:خواهید دید که چرا و چگونه راه‌حل های فردی به نوعی می‌توانند با هم ادغام شوند تا به آنچه نیاز دارید برسید.می‌تواند پروژه شما را به چندین قسمت مختلف، با مراحل مشخص، خُرد کند تا بتوانید روی هر قسمت جداگانه کار کنید.بعد از این تمرین، شما از اینکه راه‌حل شما چه شکلی خواهد داشت و چطور باید پیاده‌سازی شود ایده‌های بسیار بهتری خواهید داشت. حالا تنها کاری که شما باید انجام بدهید رسیدن به خط پایان است!مروری بر «اسپرینت»به نظر می‌رسد «جیک» بچه بسیار خوبی است و ایده فوق‌العاده‌ای با نام «اسپرینت» ارائه کرده است! یک ماه خیلی سریع می گذرد اما برای استارتاپ‌ها و کسب و کارهای جوان، یک دوازدهم از سال کافی است تا همه چیز را به قعر چاه سوق دهد و بالعکس. تصور کنید در عرض یک ماه چهار اسپرینت را انجام داده‌اید. با بازخوردی که از چهار پروتوتایپ منسجم دریافت کرده‌اید، شما دیگر تقریبا مطمئن هستید که چه چیزی را باید گسترش دهید.این یک دورنماست اما من واقعا هیجان‌زده هستم از اینکه بتوانم روزی جزئی از اسپرینتی باشم که «جیک» راه انداخته باشد ولی قبل از آن باید مثل او راهی برای نوشتن تمام وقت پیدا کنم!خواندن خلاصه کتاب اسپرینت را به چه کسی پیشنهاد می‌کنم؟به موسس 24 ساله یک استارتاپ در حوزه قهوه، که به تازگی اولین مرحله جذب سرمایه را گذرانده است، به معاون توسعه محصول 47 ساله‌ای که خیلی سریع نیاز به پیاده‌سازی چند امکان جدید بر روی محصول را دارد، و هرکسی که یک ماه زمان را بر روی ایده‌ای صرف کرده است که در دنیای واقعی کار نمی‌کند!مثل هر روش دیگری می‌توان برای این روش هم نقاط ضعف و قوت زیادی در نظر گرفت و با توجه به اینکه این تئوری در سالها پیش ارائه شده است می‌توان حتی راه‌حل های بهتری را مبتنی بر آن پیدا کرد، اما رجوع به این روش بسیاری از مشکلات بزرگ را به سرعت حل خواهد کرد. در واقع و براساس تعریف ابداع کنندگان این پروسه، استفاده از این روش فرصتی به تیم می‌دهد تا قبل از ساختن و عرضه نمونه اصلی محصول، میانبری داشته باشد برای آموختن بیشتر درباره ایده‌ها و آزمودن آنها در نمونه اولیه.اسپرینت میانبری است برای آموختن بیشتر درباره ایده‌ها و آزمودن آنها قبل از ساختن و عرضه محصول.از آنجا که خرید این کتاب در ایران اگر غیرممکن نباشد بسیار سخت است، لینک دریافت فایل این کتاب قرار داده می‌شود. Ehsan Hadi Ehsan Hadi Sun, 04 Apr 2021 21:44:08 +0430 https://virgool.io/designblog/%D9%82%D9%88%D8%A7%D9%86%DB%8C%D9%86-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%86%D9%88%D8%B2%D8%AF%D9%87-%D8%A7%D8%B5%D9%84-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B1%D8%B3%DB%8C%D8%AF%D9%86-%D8%A8%D9%87-%DB%8C%DA%A9-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B9%D8%A7%D9%84%DB%8C-ytozlgmf23oc با رویکرد طراحی رابط کاربریطراحی طراحی استطراحی طراحی استقانون شماره یک، چه طراحی گرافیک انجام می‌دهید ، چه طراحی رابط کاربری و یا هر نوع دیگر از طراحی، هرگز این را فراموش نکنید که آنچه شما انجام می‌دهید حل مسئله است و شما در حال دکوراسیون نیستید، این دو کاملا متفاوت هستند. شما در حال یافتن راهی برای آسان کردن فهم و تسهیل در برقراری ارتباط هستید.مشکل شما را دیگران حل نمی‌کنندقانون شماره دو، راه حل مشکل و مسئله شما با راه حل مشکلات دیگران متفاوت است. به یاد داشته باشید کاری که شما در جهت طراحی رابط کاربری انجام می دهید متناسب با نیاز های محصول و سازمان شماست و بر مبنای زمینه فعالیت شما و زمینه ای است که سازمان شما فعالیت می‌کند و نیز براساس آن چیزی است که قرار است کاربران شما از آن استفاده کنند، پس با دیدن نمونه کارهای زیاد و متفاوت از دیگران خود را گمراه نکنید.فرم از عملکرد پیروی نمی کندفرم از عملکرد پیروی نمی کندقانون شماره سه، در طراحی هیچگاه عملکرد نباید تعیین کننده فرم و ظاهر طراحی باشد، چیزی که ظاهر را مشخص میکند زمینه ای است که هر فرد استفاده کننده نیاز دارد از آن استفاده کند.فرم از عملکرد پیروی نمی کنددر واقع برای رسیدن به فرم، از یک عملکرد به خصوص، تعداد بیشمار راه حل بر اساس نیاز، سطح درک و انتظار کاربر وجود دارد که تعیین کننده ظاهر (در این موضوع رابط کاربری) است.فرم از عملکرد پیروی نمی کندهر نیرویی منجر به تکامل شکل و فرم می شودهر نیرویی منجر به تکامل شکل و فرم می شود قانون شماره چهار، روش کار شما در سازمان و سیاست‌های کاری سازمان شما نیرویی است که مشخص کننده شکل نهایی طراحی شماست. این بدان معناست که شما در پروسه طراحی باید راه متناسب برای کار کردن در کنار این فشارها را بیابید و این دو را با هم تنظیم کنید.در صفحات نمایش کوچک « کم زیاد است » (Less is more)less is moreقانون شماره پنج، با یک مثال وارد این بخش شویم، اگر شما قصد جابجایی از یک خانه بزرگ شش اتاق خوابه به یک آپارتمان دو اتاق خوابه را داشته باشید مسلما نمی توانید تمام اسباب و اساس خود را با خود ببرید، این دقیقا شبیه به این است که شما قصد این را داشته باشید که یک برنامه بزرگ و یا یک سیستم سازمانی را در یک اپلیکیشن موبایل پیاده سازی کنیدشما واقعا باید بدانید که به چه چیزی احتیاج دارید و اینکه بدانید مردم چه طور از صفحات کوچک استفاده میکنند و چقدر زمان برای ارتباط برقرار کردن با آنچه می توانند ببینند دارند، در اینجا کم هم زیاد است.«تعادل» (Balance) باعث ایجاد نظم بصری و درک روابط می شودتعادلقانون شماره شش، هنگامی که عناصر مختلف را در صفحه می چینید شما به دنبال یافتن تعادل هستید که این تعادل به عناصر اجازه میدهد در جهت صحیح حرکت کنند و حس مرتبط با معنای مورد نظر شما را القا نمایند.تعادلتعادلریتم بصری (Visual Rhythm) ، درک و استفاده از عناصر را سرعت می بخشدریتمقانون هفتم، استفاده از ریتم و تکرار آن.ریتم شاید از مهمترین مولفه ها در هر طراحی باشد که باعث شکل گیری نظم و سرعت عمل در درک عناصر میگردد و میتوان با استفاده درست از آن یک رفتار در طراحی را به یاد سپرد. مانند الگوهای موسیقی و تکرار آن: 1.2.1.2.1.2...ریتمیک طراحی خوب یک طراحی « هماهنگ » است (Harmony)قانون هشتم، روابط عناصر در طراحی‌ رابط کاربری مانند روابط انسانی در یک رابطه دوستانه و یا روابط در محیط کار باید دارای هماهنگی باشند و تمام عناصر با یکدیگر و هماهنگ با هم کار کنند و نه بر ضد هم.هماهنگیهارمونی«تسلط»، عنصر غالب در صحفه تمرکز کاربر را هدایت میکند (Dominance)تسلطقانون نهم، هرگز فراموش نکنید که به مهمترین عنصر یا همان عنصر غالب روی صفحه توجه کنید و ببینید آیا آن همان نقطه مورد نظر شما هست یا خیر و آیا تمرکز کاربر به نقطه و عنصر درستی جلب میشود؟تسلطهمه چیز در «تراز» با یکدیگر باشند (Align)ترازقانون دهم، قدرت تراز بودن عناصر با هم و مرتب بودن آنها، یک قدرت فوق العاده عظیم است، به طوری می توانید از آن به عنوان یک ابزار بسیار قدرتمند در ایجاد یک رابط کاربری عالی و همچنین ایجاد یک تجربه مثبت در کاربر بهره ببرید.ترازمطالب مرتبط را با «مجاورت» گروه بندی و سازماندهی کنید (Proximity)مجاورتقانون یازدهم، مجاورت. این مسئله بسیار مهم است، درست مانند هم‌ترازی، باید مطالب مربوط به هم را با مجاورت گروه‌بندی کنید .بعضی مواقع تنها لازم است به فضای منفی (فضای خالی) میان عناصر توجه کنید که با کم کردن این فضا آنها را در ارتباط با هم نشان می دهید و با زیاد کردن آن آنها را در دو گروه متفاوت ترسیم می کنید، به آسونی روشن کردن یک فشفشه.مجاورتبا رعایت این اصل (مجاورت) و توجه به فضای سفید، حتی بدون در نظر گرفتن ظاهر رابط کاربری، تجربه کاربری بینهایت مثبت خواهد شد.از «رنگ» در جهت برقراری ارتباط و تاثیر متقابل استفاده کنیدنمونه استفاده نادرست از رنگقانون دوازدهم، استفاده از رنگ. این اصل را برخلاف اصول دیگر با یک تصویر از نحوه استفاده غلط از رنگ در طراحی شروع کردیم، به نظر شما بدتر از این هم می شود؟!نمونه استفاده نادرست از رنگ بله می‌شود! به :)) به تصویر بالا نگاه کنید.استفاده از رنگ ها هرگز نباید براساس سلیقه شخصی باشند و هیچگاه نباید فقط چون یک رنگ زیبا است از آن استفاده کرد! همیشه باید این واقعیت را در نظر بگیرید که نور ساطع شده از صفحه نمایش حاصل از رنگ های با اشباع رنگی سنگین (Color saturation) می تواند آزار دهنده باشد و استفاده از رابط کاربری را دشوار سازد.استفاهده از رنگ در طراحیرنگ ها را بر اساس معانی، احساسات و برند انتخاب کنیداستفاده از رنگ بر اساس احساسات برندقانون سیزدهم، رنگ‌ها را بر اساس هماهنگی با معانی تداعی کننده رنگ، احساساتی که از دیدن آن برانگیخته می شود و همچنین رنگ‌های استفاده شده در برند و نام تجاری انتخاب کنید.رنگ«تضاد» همیشه برنده است (Contrast)تضادقانون چهاردهم، در مقابل استفاده از رنگ این استفاده از تضاد و کنتراست است که جنگ را تمام می کند و هیچ چیز قدرتمند دیگری وجود ندارد. «تایپوگرافی» همیشه باید به صورت هدفمند طراحی شود (Typography)تایپوگرافیقانون پانزدهم، تایپوگرافی هدفمند. این چیزی بیشتر از انتخاب ساده یک فونت است. شما باید از چیزی که این حروف می گویند آگاه باشید و بدانید با هرکدام چه ارتباطی میتوان برقرار کرد و چه حسی را منتقل میکنند. باید بدانید شکل حروف و نوع قلم برای کاربر قابل شناسایی است یا نه و مطمئن باشید از خوانایی لازم برخوردار است.تایپوگرافی«آیکون» ها باید قابل شناسایی و به یادآوری باشندانتخاب آیکونقانون شانزدهم، انتخاب آیکون صحیح. نباید چرخ را دوباره اختراع کرد، اگر یک نماد و آیکون به صورت عمومی استفاده میشود از آن غافل نشوید و همچنان از آن استفاده کنید، به آن چیزی که مردم میشناسند اکتفا کنید.انتخاب آیکون «زمینه و موضوع استفاده» شکل ظاهری را مشخص میکند (Context of use)موضوع طراحیقانون هفدهم، توجه به زمینه و موضوع طراحی، در جایی که مربوط به داده‌ها و اطلاعات است زمینه و موضوع مورد استفاده‌، چگونگی ظاهر رابط کاربری را مشخص میکند. اینکه می‌خواهیم با این داده چه کنیم، اینکه مهمترین چیزی که باید از آنها بفهمیم چیست، اینکه چه عملی باید روی آن انجام دهیم‌، اینها مواردی است که باید روی این موارد تمرکز کرد.موضوع طراحیساده‌تر بهتر استسادگیقانون هجدهم، ساده‌تر تقریبا همیشه بهتر است. این یک واقعیت است هم در زندگی و هم قطعا در طراحی یک رابط کاربری تعاملی.ساده تر بهتر استبر روی جدا کردن «محتوا» از «کنترل ها» کار کنیدجدا کردن محتوا از کنترلقانون نوزدهم، همیشه جدا کردن محتوا از کنترل ها را جدی بگیرید و روی آن کار کنید. میان آن چیزی که کاربر باید بخواند و آن چیزی که باید کاری روی آن صورت دهد باید تفاوت واضحی باشد مثل دکمه ها ، لینک ها و ...جدا کردن محتوا از اکشن و کنترلدر آخر پیشنهاد می کنم به اصل اول توجه ویژه ای داشته باشید و همیشه طراحی را طراحی بدونیم، همیشه به حل مساله فکر کنیم ، انواع راه ها و متدولوژی ها برای حل مساله رو مطالعه کنیم و هر کاری که میکنیم طراح باشیم. Ehsan Hadi Ehsan Hadi Sun, 14 Jun 2020 11:32:50 +0430 https://virgool.io/@ehsanhadi/%D8%AF%DB%8C%D8%B2%D8%A7%DB%8C%D9%86-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D9%88-%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%D8%B3%D9%8E%D8%A8%D9%92%DA%A9-design-system-style-guide-%D8%A8%D8%AE%D8%B4-%D8%A7%D9%88%D9%84-%D9%82%D8%B3%D9%85%D8%AA-%D8%AF%D9%88-%D8%AF%DB%8C%D8%B2%D8%A7%DB%8C%D9%86-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D9%88-%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%D8%B3%D8%A8%DA%A9-%DA%86%DB%8C%D8%B3%D8%AA-cvutbxmk8bzp دیزاین سیستم و راهنمای سَبْک ( Design system & Style guide ) - بخش اول قسمت دو - دیزاین سیستم و راهنمای سبک چیست؟بیشتر از فقط یک مشت سنداحسان هادی‌نژاد هستم و در ادامه از سری مطالب بررسی دیزاین سیستم و راهنمای سبک در دوره‌ای با همین عنوان از سایت لیندا که قبلا در اینجا معرفی کردم به اسناد دیزاین سیستم و راهنمای سبک رسیدیم و حالا بیشتر ماهیت این دو سند را با هم در این پست بررسی میکنیم همچنین میتونید قسمت قبل را در اینجا مطالعه کنید.این بخش از این دوره تحت عنوان «راهنمای سبک و دیزاین سیستم چیست؟» و در قالب پنج قسمت ارائه شده که من هم به همان ترتیب این مطالب را پیش خواهم برد. در دومین قسمت تحت عنوان «بیشتر از یک مشت سند» با من همراه باشید. راهنمای سبک و دیزاین سیستم ها در بطن خود اسنادی هستند که چگونگی نمایش و نحوه رفتار هر چیزی را که شما خواهید ساخت،مشخص و طراحی میکنند.این اسناد نباید به صورت یک کتاب قانون به نظر برسند بلکه باید همچون دیدگاهی باشند که از آن منظر به وضوح بتوان گفت که دقیقا چه چیزی قابل قبول است و چه چیزی قابل قبول نیست.همه چیز نیاز به مستندسازی دارد، مستندی که براساس فلسفه شرکت شکل میگیرد تا راهنمایی باشد برای تمام ارتباطات از طریق رفتار و چیدمان حتی کوچکترین اجزا و کامپوننت ها در رابط کاربری. نمونه‌ای از فلسفه و ماموریت سازمانی در راهنمای سبکگاهی اوقات این سند شامل متن های توصیفی و تصاویر است و گاهی به شکل کُد است.اما برای داشتن یک راهنمای سبک و دیزاین سیستم موفق چیزهای بیشتری از تنها مستندسازی نیاز است.شما به فرآیندهایی نیاز دارید که چگونگی و زمان استفاده از اسناد را شرح دهند. در ابتدا افراد باید از وجود این اسناد مطلع باشند و برای اینکه این اسناد تبدیل به استاندارد شوند، باید از آنها استفاده کنند و نیاز به آن را احساس کنند.فرآیند تبدیل سند به استانداردبرای پذیرش این سند از سوی افراد باید خیلی زود آنها را نیز درگیر فرآیند ایجاد آن کرد، وجود یک کانال ارتباطی شفاف میان افراد برای دریافت پیشنهادات و تغییراتی اعم از کم یا اضافه کردن و به طور معمول اعمال نوعی حاکمیت سازمانی یا فرآیند بازنگری می تواند شما را مطمئن سازد که افراد از این استانداردها پیروی خواهند کرد.اینکه دست یافتن به این حاکمیت چقدر می تواند سخت و سنگین باشد، به سازمان شما و تعداد جلساتی که نیاز است در آن شرکت کنید بستگی دارد.هرچه راهنمای سبک و دیزاین سیستم بهتر و جامع تری بسازید احتمال اینکه که افراد دستورالعمل‌های آن را دنبال کنند بیشتر است و همچنین در آینده، برای متقاعد کردن آنها به استفاده از آن، کار کمتر و آسان‌تری در پیش دارید.نمونه ای از راهنمای سبکبهترین حالت، وقتی شما روی مستندسازی استانداردها کار میکنید، این است که، شما در واقع انجام کارها را برای دیگران راحت‌تر می‌کنید، ذهن آنها را از تمرکز روی شلوغی اجزا و کامپوننت‌های رابط کاربری آزاد میکنید و اجازه میدهید بیشتر و گسترده تر برروی کل تجربه کاربری فکر کنند. بعدا بیشتر به این موضوع خواهیم پرداخت که چگونه سندی بسازیم که مورد پذیرش و موافقت سازمان قرار گیرد اما در ادامه مباحث اجازه بدهید کمی بیشتر به تشریح جزییات یک راهنمای سبک و دیزاین سیستم بپردازیم.چالشی که در این قسمت به اون اشاره شد یعنی پذیرش و مقبولیت یک سند طراحی به عنوان استاندارد از سخت‌ترین معضلات طراحان در سازمان‌های بزرگ هست که نکته‌هایی که در بخش‌های بعدی در این سری مطالب به اون می‌پردازیم میتونه راه ما رو در ساختن این اسناد هموار‌تر کنه و قبول آنها رو از سوی سازمان راحت‌تر، در پست بعدی با عنوان «دیزاین سیستم» به جزییات بیشتری از این سند می پردازیم. Ehsan Hadi Ehsan Hadi Tue, 01 Oct 2019 17:27:25 +0330 https://virgool.io/@ehsanhadi/%D8%AF%DB%8C%D8%B2%D8%A7%DB%8C%D9%86-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D9%88-%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%D8%B3%D9%8E%D8%A8%D9%92%DA%A9-design-system-style-guide-%D8%A8%D8%AE%D8%B4-%D8%A7%D9%88%D9%84-%D9%82%D8%B3%D9%85%D8%AA-%DB%8C%DA%A9-%D8%AF%DB%8C%D8%B2%D8%A7%DB%8C%D9%86-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D9%88-%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%D8%B3-%D8%B3%D8%A8%DA%A9-%DA%86%DB%8C%D8%B3%D8%AA-aibj0lwzfrm9 برقرای ارتباط با استانداردهای تجربه کاربریدیزاین سیستم و راهنمای سَبْک ( Design system & Style guide ) - بخش اول قسمت یک - دیزاین سیستم و راهنماس سبک چیست؟ احسان هادی‌نژاد هستم و در ادامه از سری مطالب بررسی دیزاین سیستم ها و راهنمای سبک در دوره‌ای با همین عنوان از سایت لیندا به چیستی و چرایی داشتن دیزاین سیستم ها و راهنمای سبک می‌پردازیم و از نحوه برقراری ارتباط با تجربه کاربری در صورت وجود این دو سند مهم خواهیم گفت.امیدوارم از قسمت قبلی این سری از مطالب که به معرفی این دوره و آشنایی با این مبحث می‌پرداخت استفاده کرده باشید و راغب به دنبال کردن این سری از مطالب باشید، همچنین خوشحال میشم از طریق همین صفحه و یا لینکداین نظرات شما را درباره این مبحث و شیوه ارائه اون بدونم.این بخش از این دوره تحت عنوان «راهنمای سبک و دیزاین سیستم چیست؟» و در قالب پنج قسمت ارائه شده که من هم به همان ترتیب این مطالب را پیش خواهم برد. با من همراه باشید تا به اولین قسمت از این بخش تحت عنوان «برقراری ارتباط با استاندارد‌های تجربه کاربری» بپردازیم.راهنمای سبک و دیزاین سیستم، دو راه متفاوت در برقرای ارتباط با استاندارهایی هستند که شما برای عناصر بصری، محتوای نوشتاری و رفتار تجربه کاربری در محصولات، وبسایت‌ها و محتوای چاپی خود وضع کرده‌اید.هدف هر دوی آنها رسیدن به نقطه‌ای به عنوان مرجع است تا بدانیم اجزا باید چه شکلی داشته باشند، چطور رفتار کنند و چگونه به نظر آیند.یک اسایل گاید و دیزاین سیستم خوب از ناسازگاری‌های تجربه کاربری میان یک محصول و محصولات دیگر یک سازمان جلوگیری می‌کند.راهنمای سبک و دیزاین سیستمبه طور معمول یک راهنمای سبک جنبه های مختلف مربوط به محتوا و برندینگ را توصیف می کند و یک دیزاین سیستم توصیف کننده معماری و ساختار محصولات دیجیتال است.استایل گاید بیان میکند که چگونه و با چه اجزایی به «برقراری ارتباط» بپردازید و دیزاین سیستم می گوید که این اجزا چگونه در اپلیکیشن و سایت شما به نمایش درآیند.راهنمای سبک و دیزاین سیستم دست در دست پیش میروند!پس این دو، دست در دست هم پیش می روند! هر دوی این اسناد با هم از منبعی واحد از قوانین محافظت میکنند که شامل دستورالعمل هایی است تا بدانیم اطلاعات در هر صفحه چگونه قرار بگیرند، چطور به نظر آیند و چه رفتاری داشته باشند تا در نهایت دارای لحنی باشند که مد نظر ما است. اما چرا باید این کار را بکنید؟نمونه راهنمای سبک (style guide)دلایل بسیاری وجود دارند.در ابتدا ، نتیجه داشتن این سند این خواهد بود که برند شما در نظر مشتریان و کاربران کاملا یکپارچه و شفاف باشد و تجربه کاربری مورد نظر با برندتان به آنان انتقال یابد که در این حالت آنان می توانند به راحتی محصولات شما را از سایر محصولات تشخیص دهند. و دیگر اینکه وقتی مشتریان یکبار نحوه کار کردن با محصول یا اپلیکیشن شما را آموختند بتوانند با همان آموزه‌ها از سایر محصولات شما، بدون داشتن تجربه هرگونه ناسازگاری، استفاده کنند.نمونه راهنمای سبک (style guide)نمونه راهنمای سبک (style guide)نمونه راهنمای سبک (style guide)نمونه راهنمای سبک (style guide)همچنین این‌کار منافع بسیار زیادی در داخل سازمان شما خواهد داشت، داشتن راهنمای سبک و دیزاین سیستم زندگی را برای توسعه دهندگان ، طراحان ، تهیه کنندگان محتوا وهمچنین همکاران خارج از سازمان شما بسیار آسان خواهد کرد!برقراری ارتباط با مفهوم و کانسپت طراحی به گونه‌ای انجام می‌گیرد که هرکس با حداقل تلاش بتواند آن را به ثمر رساند و واقعی سازد.بیشتر دیزاین سیستم‌ها حداقل شامل قطعه کدهایی هستند که توسعه دهندگان می‌تواند آن‌ها را کپی کرده و در کارشان قرار دهند. حتی در مواردی فرآیند طراحی، نمونه‌سازی و ابزارهای توسعه برای ساخت ساختار رابط کاربری را به صورت خودکار هم‌راستا می‌کنند و جلو میبرند.نمونه ای از قطعه های کد در دیزاین سیستم carbon design systemیک راه مفید و کاربردی برای پی بردن به رابطه این دو سند ( راهنمای سبک و دیزاین سیستم ) این است که بدانیم راهنمای سبک خلاصه‌ای است از تمام اطلاعاتی که در یک دیزاین سیستم وجود دارد. سابق بر این راهنمای سبک توسط افرادی استفاده میشده است که محتوا را تولید میکردند اما نیازی به کدنویسی و اضافه کردن قسمت هایی جدید به یک سیستم دیجیتال نداشته‌اند. اکنون دیزاین سیستم از همان قوانین اساسی با عنوان راهنمای سبک استفاده می‌کند و آن‌ها را در جهت رساندن به مرحله‌ای که افراد بتوانند از آن قوانین برای ساختن یک رابط کاربری استفاده کنند، گسترش می دهد.همانطور که دیدید «راهنمای سبک» پیش از تحت عنوان سند یا کتابچه برندینگ و هویت بصری در سازمان‌ها و شرکت های مختلف استفاده میشده است و چیزی که نیاز ما به داشتن یک دیزاین سیستم را مهم و حیاتی جلوه میدهد امکان استفاده از آن قوانین از پیش تعیین شده در ساختن محصولات دیجیتال و کدنویسی‌هاست که در ادامه بیشتر به آن خواهیم پرداخت. در پست بعدی از این سری مطالب، قسمت دوم از این بخش را تحت عنوان «بیشتر از یک مشت سند» می‌توانید دنبال کنید. Ehsan Hadi Ehsan Hadi Mon, 30 Sep 2019 15:00:36 +0330 https://virgool.io/DesignersCommunity/design-system-and-style-guide-zmhgbnjql1we Design Systems & Style Guides من، احسان هادی‌نژاد، طراح گرافیکی هستم که به مباحث UI/UX بسیار علاقمندم و چند سالی است که مطالب این حوزه را دنبال میکنم و از رابطه بین اصول طراحی گرافیک و طراحی رابط کاربری در فضاهای کاری نو استقبال میکنم و علاقمند به استفاده از اونها هستم همچنین از یافتن روابط و قواعد جدید در طراحی بسیار لذت می برم، یکی از این روابط نه چندان جدید بحث «دیزاین سیستم‌ها» است که امروزه در مباحث «تجربه کاربری» خیلی زیاد به آن اشاره می شود و مورد بحث قرار می‌گیرد، از این رو من هم علاقمند به دنبال کردن این مبحث شدم مخصوصا از این جهت که هنگام کار با سازمان‌های بزرگ و سرویس‌های متعدد و طراحی های پیچیده نیاز به بودن یک «دیزاین سیستم» را بسیار احساس میکردم.سوال اول، اصلا «دیزاین سیستم‌» چیست و چرا اینقدر اهمیت دارند؟این سوال میتونه سوال اول و آخر ما باشه :)) در حقیقت این سری مطالب جواب همین سوال را در خودشون دارند، من هم به دنبال جواب این سوال به منابع زیادی در وب برخوردم اما در اینجا قصد دارم با استفاده از یکی از دوره های سایت Lynda با همین عنوان به بررسی این مطلب بپردازیم و در هر پست یکی از سرفصل های چند دقیقه ای این دوره را بررسی می‌کنیم.این دوره ابتدا به معرفی «راهنمای سَبْک» (Style guide) می‌پردازد که شاید پیش‌تر از این طراحان گرافیک و نیز کارشناسان تبلیغات و بازاریابی از آن با عناوین مختلف مثل برندینگ، کتابچه برند، هویت بصری و... استفاده می کردند و با آن آشنا بوده‌اند.سپس به ساخت این سند، و تفاوت آن با «دیزاین سیستم» و ساختن یک دیزاین سیستم خوب بر مبنای یک سند راهنمای سَبْک خوب می‌پردازد.برای استفاده از این دوره شما می‌تونید ویدئوهای اون رو از سایت اصلی تهیه کنید و همچنین از سایت فارسی ( البته با پرداخت مبلغی ) آن را دانلود کنید و یا اینکه با من در این سری از مطالب همراه باشید تا به مرور ترجمه مطالب این دوره رو به همراه فیلم هر قسمت و کمی گفتگو درباره اون بپردازیم.Chris Nodder این دوره را «کریس نودِر Chris Nodder » در سال 2018 ارائه کرده است ، ایشان از کارشناسان با تجربه طراحی تعاملی و تجربه کاربری بشمار میره و از این دوره به عنوان یکی از پایه های یادگیری «تجربه کاربری» نام برده است .بیشتر مطالب این سری پست‌‌ها ترجمه متن این دوره است و سعی میکنم مطلبی به آن اضافه نکنم تا به صورت یک دوره مستند قابل استفاده باشد هرچند ممکنه در انتهای هر پست کمی هم از تجارب طراحی خودم یا نتایج جستجو هایم درباره اون مطلب بنویسم. در تعریف (Overview) این دوره اینطور اومده که:«راهنمای سَبْک» (Style guide) سندی است که لحن (tone) در ارتباطات سازمان و همچنین نحوه طراحی محصولات را مشخص می‌کند. که شامل «برندینگ»، «فلسفه شرکت یا سازمان» همچنین فهم و شناخت از مشتریان و بازار شما می‌باشد. این سند ممکن است عناصر بصری، نوشتاری و در برخی مواقع شیوه گفتاری که از آن استفاده میکنید را تعریف کند. آژانس‌های همکار با سازمان یا شرکت شما ( بخصوص آژانس‌های تبلیغاتی)، فریلنس‌ها(freelance)، طراحان و توسعه‌دهندگان، این سند راهنما را در جهت اطمینان از انتقال صحیح پیام برند شما، به‌کار خواهند گرفت و همچنین استفاده از آن مانع از هدر رفتن وقت، انرژی و تلاش‌های آن‌ها خواهد شد. با کارشناس UX، «کریس نودر» همراه باشید تا شما را در ساختن یک «راهنمای سَبْک» مبتنی بر استراتژی تجربه کاربری در یک مسیر مشخص و یکپارچه وهمچنین قابل فهم برای همگان راهنمایی کند. بیاموزید چگونه سازگاری، خلاقیت و انعطاف‌پذیری ایجاد کنید تا تیم شما بتوانند با ساختن یک تجربه کاربری عالی، تصویری منسجم و با هویت از سازمانتان ارائه دهند. به علاوه، دریافتن اینکه چطور دیزاین سیستمِ کاملی بسازید که شامل تمام اجزا (Components) و کد‌های مربوط به طراحی رابط کاربری (interface) با قابلیت استفاده چندین‌باره باشد و همیشه از یکسان بودن زبان طراحی از یک محصول به محصول دیگر اطمینان داشته باشید.سرفصل مباحثی که در این دوره بررسی می‌شوند:راهنمای سبک (style guide) چیست؟سیستم‌های طراحی (design systems) چیستند؟مبانی «راهنمای سبک»اجزای «راهنمای سبک»مشخص کردن مخاطبان و دیدگاه‌هایتاننوشتن یک «راهنمای سبک»مبانی «دیزاین سیستم»ساختن یک «دیزاین سیستم»پذیرش «راهنمای سبک» و «دیزاین سیستم» شما از سوی مردمجمع و جور کردن کارها با «راهنمای سبک» و «دیزاین سیستم»اگر هیچوقت راهنمای سَبْکی نداشته‌اید و به صورت رسمی دیزاین سیستمی نساخته‌اید پس حتما سازمان یا شرکت شما برای تولید و طراحی یک تجربه کاربری در محصولاتش از مجموعه‌ای از قواعد و دستورالعمل‌ها استفاده می‌کرده است و این کاملاً محتمل است که این قوانین و دستورالعمل‌‌های متفاوت در موارد مختلف با هم دچار مغایرت و تضاد می‌شوند.این تضاد و مغایرت در قوانین طراحی چیزی است که منجر به طراحی‌های ناهماهنگ و ناسازگار، عدم شفافیت در هویت و برندینگ نام تجاری و همچنین تولید محتوایی که عاری از پیام مناسب است و در انتقال پیام برند و اهداف محصول ناتوان است، می‌شود. این موضوع همچنین وقت توسعه دهندگان شما را تلف خواهد کرد و موجب بروز تنش در گروه شما خواهد شد.«کریس نودر» اهداف این دوره را اینطور بیان میکند:سلام من کریس نودر هستم، در این سری از دوره‌های آموزشی لینکداین(لیندا) من به شما نشان خواهم داد چطور «راهنمای سبک» و «دیزاین سیستم»ای بسازید که با قوانین هویت سازمانی (برندینگ)‌ و نام تجاری ارتباط درستی برقرار کرده و تصمیم‌گیری های مربوط به طراحی را در یک مسیر واحد پیش ببرد. مسیری که کارمندان، پیمانکاران، آژانس‌ها و توسعه‌دهندگان خارج از سازمان، همگی آن را درک کرده و از آن استفاده کنند.همونطور که دیدین این مطالب آنقدر جالب و در عین حال گسترده هستند که برای خواندن معرفی اون هم باید چند دقیقه وقت گذاشت در عین حال به لطف نحوه آموزش در سایت لیندا، مطالب بسیار ساده و در عین حال کاربردی بیان می‌شوند به صورتی که حتی عناوین سرفصل مباحث می‌توانند راهنمای ما در بررسی و ساخت یک دیزاین سیستم باشند. منتظر مطالب آینده باشید مطمئن هستم اگر کمی علاقه به این بحث داشته باشید مطالب بسیار مفیدی رو خواهید دید و مسیر شما در طراحی یک دیزاین سیستم خوب بسیار هموار خواهد شد.بخش بعد «دیزاین سیستم و راهنمای سبک چیست؟» Ehsan Hadi Ehsan Hadi Thu, 12 Sep 2019 17:50:02 +0430