https://virgool.io/feed/@zahrazgh fa 2026-04-15 10:47:16 https://static.virgool.io/images/default-avatar.jpg https://virgool.io/@zahrazgh https://virgool.io/@zahrazgh/%D9%85%D8%AF%D9%84-%D8%B0%D9%87%D9%86%DB%8C-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-fjrfesmkv3ag Mental Model in UX designمدل ذهنی همان تصویری است که کاربران فضای دیجیتال از نحوه‌ی استفاده از وب‌سایت، تلفن‌های هوشمند و سایر محصولات دیجیتالی در ذهن خود ایجاد می‌کنند. مدل‌های ذهنی در ذهن کاربر ساخته می‌شوند. به عنوان مثال، کاربران از همان تجربه‌ای که هنگام مراجعه به یک اپلیکیشن مربوط به پیش‌بینی آب‌و‌هوا بدست آورده‌اند در یک اپلیکیشن مربوط به هواشناسی استفاده می‌کنند. برای طراحان تجربه کاربری دانستن این که کاربران از مدل‌های ذهنی خود استفاده می‌کنند، بسیار ارزشمند است. شناخت مدل‌های ذهنی کاربران به طراحان UX کمک می‌کند تا در مورد برنامه‌ریزی پروژه خود، انتظارات کاربران را از سیستم خود درک کنند.اگر به مدل‌های ذهنی موجود در میان کاربران پایبند نباشید، میان ایده کاربر در مورد نحوه کارکرد یک محصول یا خدمت و نوع عملکرد آن تطابقی وجود نخواهد داشت. این عدم تطابق می‌تواند انواع و اقسام مشکلات را برای سازمان ایجاد کند زیرا چنین مشکلاتی منجر به شکل‌گیری ناامیدی در میان کاربران می‌گردد و اغلب کاربران اپلیکیشن یا وب‌سایت شما را رها می‌کنند و در‌مورد استفاده مجدد از آن‌ها دوباره تصمیم می‌گیرند. اگرچه مدل‌های ذهنی افراد اغلب متفاوت است، اما وقتی حرف از تجارب کاربر برای رابط‌های کاربری آشنا مانند وب‌سایت‌ها می‎‌شود، اکثریت کاربران مدل‌های مشابه ذهنی خود را برای تجارب مشترک ایجاد می‌کنند. به عنوان مثال، اگر شخصی برای خرید محصولی به وب‌سایت جدیدی مراجعه کند، بر‌اساس تجربیات گذشته خود در خرید آنلاین، یک الگوی ذهنی درست از چگونگی تجربه بررسی در سایت جدید را خواهد داشت. اگر دنباله‌ی بررسی جدید با مدل‌ ذهنی کاربران مطابقت داشته باشد، آن‌وقت کاربر به راحتی با کمک مدل ذهنی خود به بررسی گزینه‌های موجود می‌پردازد و از تجربه خود احساس رضایت می‌کند.علاوه بر خرید آنلاین، می‌توانیم فرض کنیم که بسیاری از کاربران، قراردادهای تجربه کاربری مشخصی را کاملا درک می‌کنند، مانند:پیوندهایی که زیر‌‌آنها خط کشیده می‌شود و یا با رنگی متفاوت نوشته می‌شوند.کادرهای جستجویی که در گوشه سمت راست بالای ‌سایت ظاهر می‌شوند.لوگوهایی که در گوشه سمت چپ بخش بالای سایت ظاهر می‌شوند.کشف پایگاه کاربری شمابهترین راه برای شروع، اگر می‌خواهید با مدل‌های ذهنی کاربران طراحی وب سایت خود مطابقت داشته باشید، این است که ابتدا بدانید پایگاه کاربر هدف شما چه کسی است. همه کاربران طراحی وب سایت در سراسر صفحه مدل های ذهنی یکسانی ندارند!یک قانون سرانگشتی خوب این است که برخی از آزمایشات کاربر را انجام دهید. جمع‌آوری داده‌ها از تحقیقات کاربر و ایجاد شخصیت ‌های کاربر طراحی وب سایت راهی درخشان برای دستیابی به این هدف است. هنگامی که پرسونای کاربر خود را ابداع کردید، سپس می توانید رابط کاربری طراحی وب سایت خود را به گونه ای طراحی کنید که مناسب آنها باشد و سپس آن را روی آنها آزمایش کنید تا ببینید آیا ویژگی های آن واقعاً با مدل های ذهنی آنها مطابقت دارد یا خیر.نمونه هایی از مدل های ذهنی واقعی در طراحی وب سایتبنابراین بیایید به چند نمونه از مدل ‌های ذهنی رایج کاربران طراحی وب سایت نگاه کنیم. این مثال‌ ها نشان می ‌دهند که چگونه کاربران طراحی وب سایت ، مستقل از ما طراحان طراحی وب سایت ، درک درستی از نحوه کار طراحی وب سایت ها و برنامه ‌ها ایجاد می ‌کنند1. نوار جستجوی گوگلیکی از نمونه های برجسته و مورد بحث از یک مدل ذهنی معمولی کاربر طراحی وب سایت ، نوار جستجوی URL گوگل است.در ابتدا قرار نبود که نوار URL در بالای صفحه مرورگر مانند نوار جستجوی Google عمل کند. برای وارد کردن دامنه کامل برای بردن کاربر مستقیم به طراحی وب سایت مورد نظر در نظر گرفته شده بود.با این حال، گوگل به سرعت متوجه شد که بسیاری از مردم انتظار داشتند که دقیقاً مانند نوار جستجو عمل کند و فقط کاربران قدیمی اینترنت متوجه تفاوت شدند. به همین دلیل، آنها تصمیم گرفتند که بهترین کار این است که مدل ذهنی کاربر طراحی وب سایت انبوه را تامین کند.گوگل به نوار URL همان عملکردهای نوار جستجو را داد و حتی به نماد جستجوی ذره بین اضافه کرد، چیزی که نمونه نوارهای جستجو در سراسر طراحی وب سایت است. همچنان همان عملکرد نوار URL قدیمی را با هدایت مستقیم کاربران به دامنه های طراحی وب سایت حفظ می کند، اما همچنین می تواند لیستی از نتایج جستجو را به همان شیوه نوار جستجو نمایش دهد.2. پنجره های مدالمثال عالی دیگر از مدل ذهنی کاربر طراحی وب سایت ، پنجره مودال کلاسیک است که ظاهر می‌ شود، معمولاً از کاربر می ‌پرسد که آیا کوکی‌ ها (کوکی‌های طراحی وب سایت!) را دوست دارد یا می‌ خواهد برای چیزهای خود ثبت نام کند.بسیاری از کاربران طراحی وب سایت هنوز فکر می کنند که با فشار دادن دکمه بازگشت در مرورگر خود، صفحه تنظیم مجدد می شود و پنجره مودال ناپدید می شود. وقتی مرورگر آن ‌ها را به‌ طور کامل از صفحه دور می‌ کند، برایشان احساس می‌ شود که دو قدم به عقب برگشته‌ اند.3. تصاویر با دکمه های غیر قابل کلیکسپس مثال بعدی که داریم چیز واضح ‌تری است، که متأسفانه هنوز در دنیای امروزی طراحی وب سایت رابط کاربری اتفاق می‌افتد: شامل دکمه ‌ای روی یک تصویر، که بخشی از تصویر است.در مواردی مانند این، کل تصویر یا کارت قابل کلیک است اما دکمه قابل کلیک نیست. این بدیهی است که در تضاد با مدل ‌های ذهنی اکثر افراد است، زیرا برای آنها، یک دکمه باید قابل کلیک باشد. بله، هنوز هم کار می ‌کند، اما در این صورت، شاید بهتر باشد کارت را قابل کلیک ‌تر نشان دهید.نکته اصلی این است که، اگر عناصری مانند دکمه ‌ها به روشی که مردم به آن عادت کرده‌اند رفتار نکنند، کمتر به طراحی UI طراحی وب سایت شما اعتماد خواهند کرد و معتقدند که پر از اشکال و اشکال است.4. چک باکس ها و دکمه های رادیوییمثال عالی دیگر برای ایجاد عدم تطابق مدل ذهنی (و منفجر شدن سر کاربران شما) استفاده نادرست از چک باکس ها و دکمه های رادیویی است.اکثر کاربران طراحی وب سایت درونی کرده ‌اند که چک ‌باکس‌ها شامل فهرست‌ هایی از آیتم‌ ها یا گزینه‌ هایی است که باید انتخاب شوند، که م ی‌توان چند مورد را در یک زمان بررسی کرد. از سوی دیگر، دکمه ‌های رادیویی یک کتری ماهی متفاوت هستند و می ‌توانند همزمان تنها یک دکمه را انتخاب کنند.5. انتخابگرهای تاریخ تقویماین یکی را می ‌توان بر اساس شخصیت‌ های کاربر طراحی وب سایت شما استدلال کرد، اما تقویمی که با اکثر انتخاب ‌کنندگان تاریخ ارائه م ی‌شود، نمونه ‌ای عالی از یک عنصر UI طراحی وب سایت جهانی است که تلاش می ‌کند مدل ذهنی بیشتر کاربران از تاریخ ‌ها را برآورده کند.انتخاب روزها، ماه‌ها و سال‌ها از فهرست‌های کشویی امکان‌پذیر است، اما اغلب می‌توان گفت که اکثر کاربران زمان آسان‌تری برای انتخاب تاریخ‌ها از نمایش تقویم سنتی خواهند داشت. زهرا قاسمی زهرا قاسمی Sun, 10 Mar 2024 13:36:26 +0330 https://virgool.io/@zahrazgh/%D8%AE%D9%84%D8%A7%D8%B5%D9%87-%D8%A7%DB%8C-%D8%A7%D8%B2-%D8%AF%D9%88%D8%B1%D9%87-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-rahnema-nc33kv0hftqq در ابتدا باید بگم :به نظرم مسیر یادگیری ، پیشرفت و ارتقاء خود در هر زمینه ای و هر پوزیشن شغلی ای همیشه ادامه خواهد داشت و بهتر هست که اطلاعات و علم خودمون در هر زمینه ای رو مداوم آپدیت کنیم :)در این پست از ویرگول قصد دارم خلاصه ای از مسیر طی شده در دوره رابط کاربری گذرانده شده بنویسم و منتشر کنم تا برای بقیه ی افراد که قصد شرکت در دوره های بعد را دارند هم مفید واقع شود .1. در ابتدا پس از طی کردن ثبت نام آنلاین و انجام تسک آزمایشی ، مرحله مصاحبه آنلاین انجام شد و در این جلسه درباره مسائلی از جمله : میزان انگیزه ، مهارت های فردی ، میزان تسلط بر مباحث رابط کاربری و ... صحبت شد .2. پس از بررسی و با موفقیت طی کردن مصاحبه ، از طرف رهنما تماس گرفته شد و تاریخ افتتاحیه و اطلاع از پذیرفته شدن در دوره ارسال شد .از تاریخ 6 شهریور دوره به صورت حضوری و یک روز در هفته (6 ساعت ) استارت خورد .در طول این 7 هفته ،در مورد مسائل از جمله فنی و software بررسی و صحبت شد . که در ادامه به صورت مختصری توضیح خواهم داد :سرفصل ها :دیزاین سیستم ، انواع سبک های طراحی ، استفاده و ایجاد کامپوننت های کاربردی (با آخرین اپدیت های فیگما ) ، پروتوتایپ ، طرح های ترند در زمان حال و وایرفریم .در طی دوره طرح ها با نظارت اساتید و منتور های دوره بهبود پیدا کردند و پروژه ها از وایر فریم شروع شد و انتهای دوره به درست کردن کیس استادی رسیدیم .در مسیر بهبود طرح و اموزش ها ، مهمان هم داشتیم :)با خانم نرگس غریب آشنا شدیم و برامون از دیزاین سیستم سنت (دیوار ) صحبت کردن .آقای ابوالفضل احمدی که درباره نحوه ارتباط با تیم فرانت برامون توضیح دادن.آقای محمد حسین احمدی درباره AR / VR برامون توضیح دادن.خانم مریم قریشی که درمورد تفاوت های گرافیک و ui برامون صحبت کردن .در آخر باید بگم رهنما فضای صمیمی ای داشت و منتور ها و اساتید با صبوری به رشد افراد کمک میکردند و فضای خوبی برای ارتقاء و پیشرفت در دوره وجود داشت .اساتید و منتور های دوره زهرا قاسمی زهرا قاسمی Fri, 13 Oct 2023 14:59:32 +0330 https://virgool.io/@zahrazgh/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%DA%86%D9%87%D8%A7%D8%B1-%D9%85%D9%88%D8%B1%D8%AF-%D8%A7%D8%B2-%D8%B3%D8%A8%DA%A9-%D9%87%D8%A7%DB%8C-%D8%B1%D8%A7%DB%8C%D8%AC-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-sqyvouzvfwjh سبک اسکئومورفیسم (Skeuomorphism) :اسکئومورفیسم، سبک بصری مورد استفاده برای طراحی اولین رابط های کاربری گرافیکی بود. در اسکئومورفیسم، عناصر طراحی از همتایان دنیای واقعی خود تقلید می‌کنند تا بین دنیای فیزیکی و دیجیتالی پل بزنند. سبکی از طراح است که در آن طراحان سعی می کنند اشیای دنیای حقیقی را وارد دنیای مجازی کنند.برای این کار با استفاده از لبه ها و سایه ها سعی می شود که طراحی اشیا به صورتی باشد که تداعی کننده این اشیا در دنیای واقعی باشد.برای مثال می توان مجله ها را در یک قفسه کتاب قرار داد که کاربران بتوانند با کلیک روی هر مجله به محتویات آن دسترسی پیدا کنند.اسکیومورفیسم از دهه 1980 شکل گرفت.یکی از اولین طرفداران آن استیو جابز از شرکت اپل بود.ایده ساده بود، در صورت استفاده از طراحی skeuomorphic رابط های کامپیوتری برای کاربران بسیار بصری تر خواهد بود و بهتر می توانند با آن ارتباط برقرار کنند.در نتیجه این سبک از طراحی تا سال 2011 که طراحی فلت معرفی شد غالب ترین سبک طراحی وبسایت ها و برنامه ها بود.نسخه‌‌های اولیه سیستم‌‌عامل موبایل اپل، ios ، از اسکئومورفیسم در رابط کاربری استفاده می‌کردند. در این سبک بیشتر از سایه ها در طراحی استفاده می شود.سبک فلت (Flat design) : همان‌طور که از اصطلاح «فلت دیزاین» یا «طراحی مسطح» و یا «طراحی تخت» مشخص است، در این نوع رویکرد عناصر قرار گرفته روی GUI (رابط گرافیکی کاربری) کاملاً مسطح و تخت هستند به طوری که از سایه، گرادیانت، تکسچر و ... برای ایجاد نمایی سه‌بُعدی به هیچ وجه استفاده نمی‌شود. با اتخاذ چنین رویکردی، طرح نهایی فقط دو بُعد خواهد داشت: طول و عرض. برخی افراد طراحی مسطح را «طراحی ساده» نیز می‌نامند که شاید بتوان گفت این نامگذاری صحیح نیست! طراحی مسطح در عین سادگی، می‌تواند کاملاً پیچیده هم باشد. به عبارت دیگر، صرفاً به این خاطر که ظاهر وب‌سایت‌ها و اپلیکیشن‌های موبایل با استفاده از رویکرد طراحی مسطح ساخته شده، نمی‌توان گفت که ساده هستند. در واقع، از آنجا که در پس تک‌تک عناصر قرار گرفته در طراحی مسطح هدف و منظوری قرار دارد، می‌توان گفت که طراحی مسطح به همان اندازه که دیگر رویکردهای طراحی پیچیده هستند، از پیچیدگی‌های خاص خود برخورار است.سبک متریال (Material design) :طراحی متریال (موسوم به کاغذ کوانتومی) یک زبان طراحی توسعه یافته توسط گوگله که در سال 2014 معرفی شد. Material Design بیش از حد به سیستم گرید و انیمیشن ها اهمیت میدهد و عمق و سایه ها برای المان های طراحی شده در اون بسیار مهم اند. گوگل مدعی است که زبان جدید طراحی اون ها (متریال دیزاین) الهام گرفته از مرکب و کاغذ است.طبق صحبت یکی از طراحان مشهور جهان به نام Matias Durate همون طور که اجسام در دنیای واقعی قابل حسن و دارای طول و عرض و ارتفاع هستند، در این نوع طراحی دیجیتال هم این نوع حس ها و امکانات وجود دارد. متریال دیزاین نسخه مکتوب، مستند و علمی طراحی تخت است.اهداف متریال : ایجاد یک زبان بصری که اصول کلاسیک طراحی خوب رو با نوآوری و امکان فناوری و علم ترکیب میکند از جمله وِیژگی های این ابزار طراحی است. با استفاده از Material Design یک سیستم عامل اساسی ایجاد کنید که برای تجربه یکپارچه در سراسر سیستم عامل ها و اندازه های مختلف دستگاه ها مورد استفاده قرار میگیرد.نئومورفیسم (Neumorphism design) :از ترکیب دو اسکئومورفیسم (skeuomorphism) و متریال دیزاین (Material Design) ایجاد گردیده و که آنرا از نظر سبک شناسی زیر مجموعه مینیمالیسم قرار میدهند. Neumorphism در واقع یک سبک بصری در طراحی ui است در Neumorphism طراح از سایه های داخلی و بیرونی استفاده میکند تا به بیننده فرم و حالت یک شکل نرم و اکسترود را القا نماید. یکی از جالب ترین چیزها در مورد نئومورفیسم این است که هم در طراحی اسکئومورفیسم و هم در طراحی فلت قابل استفاده است. زهرا قاسمی زهرا قاسمی Thu, 14 Sep 2023 20:49:43 +0330 https://virgool.io/@zahrazgh/%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%87%D9%85%DA%A9%D8%A7%D8%B1%DB%8C-%D8%A8%D9%87%D8%AA%D8%B1-%D8%A8%DB%8C%D9%86-%D8%B7%D8%B1%D8%A7%D8%AD%D8%A7%D9%86-%D9%88-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%AF%D9%87%D9%86%D8%AF%DA%AF%D8%A7%D9%86-zvm0m3efs51m مقدمه ای بر ابزار Handoff : مرحله‌ای است که طراحان UI/UX مدل های طراحی نهایی شده را برای کدنویسی بیشتر به توسعه دهندگان نرم افزار منتقل می‌کنند.فرآیند توسعه نرم افزار همه چیز در مورد همکاری است. از یک طرف، برخی از علاقه مندان ممکن است مانند یک گورو همه کاره باشند، اما نتیجه به ندرت قابل توجه است. از سوی دیگر، یک محصول باکیفیت به چندین متخصص نیاز دارد تا در آن شرکت کنند. به همین دلیل است که اکثر راه حل های نرم افزاری نتیجه همکاری بین متخصصان مختلف از جمله مهندسان نرم افزار، طراحان UI/UX، متخصصان QA و غیره است.با این حال، همکاری ایجاد شده و به خوبی سازماندهی شده بین توسعه دهندگان و طراحان منجر به برجسته ترین نتایج می شود. انتقال صاف طراحی و تصاویر به مهندسان نرم افزار و پشتیبان روند توسعه را سرعت می بخشد و وظایف اضافی مربوط به پیاده سازی گرافیک را حذف می کند.چنین خودکارسازی را می توان با کمک ابزارهای دستیابی به دست آورد.گردش کار Handoffبرای به دست آوردن یک محصول نهایی عالی، ضروری است که انتقال نرمی داشته باشید. اما زمانی که متخصصان زیادی در توسعه محصول مشارکت دارند، حفظ ارتباط و همکاری عالی بین طرف های مختلف مهم است.بیایید نگاهی بیندازیم که گردش کار انتقال طراحی شامل چه چیزی است:طراحان UI/UX از ابزارهایی مانند Adobe XD، Photoshop، Figma، Sketch و دیگران برای ایجاد طرحی شبیه به محصول آینده استفاده می کنند.سپس مدل‌ها برای بررسی بیشتر توسط اعضای تیم، ذینفعان و توسعه‌دهندگان در ابزار دستیابی طراحی آپلود می‌شوند.ابزار دستیابی به کاربران اجازه می دهد نظرات خود را برای طراحان بگذارند. به طوری که ذینفعان، توسعه دهندگان می توانند نظرات خود را بر این اساس برای طراحان ارسال کنند.طراحان مشکلات را برطرف می کنند یا طبق نظرات دوباره طراحی می کنند.نسخه ثابت به روز شده طرح ماکت برای تایید نهایی به ذینفعان بازگردانده می شود.پس از تایید، توسعه‌دهندگان ماکت‌ها را لایه به لایه با استفاده از ابزار handoff بررسی می‌کنند.در نهایت، هر عنصر از طراحی توسط توسعه دهنده به کد تبدیل می شود. ابزار Handoff به توسعه‌دهندگان کمک می‌کند تا مقادیر دقیق هر عنصر را که برای کمک به ایجاد برنامه‌های کاربردی پیکسل کامل طراحی شده است، دریافت کنند.همانطور که مشاهده شد، ابزارهای دستیابی طراحی، همکاری بین طراحان، توسعه‌دهندگان و ذینفعان را تسهیل می‌کنند و آن را مؤثر می‌سازند.امروزه انواع زیادی از ابزارهای دست‌ساز مانند Zeplin، Avocode، Sympli، InVision، Marvel، Figma، Adobe و غیره در بازار موجود است. در بین این ابزار به بررسی فیگما خواهم پرداخت .فیگما یکی دیگر از ابزارهای مشارکتی است که شایان ذکر است و برای بررسی و اظهار نظر در زمان واقعی عالی است. این کاملاً مبتنی بر مرورگر است بنابراین کاملاً روی ویندوز، لینوکس یا MacOS کار می کند. Figma همچنین از Slack به‌عنوان کانال ارتباطی خود استفاده می‌کند، بنابراین هرگونه نظر یا ویرایش طراحی انجام شده در Figma مستقیماً در اختیار تیم قرار می‌گیرد. Figma با Zeplin و بسیاری از ابزارهای دیگر مانند Coda، Notion، Trello، Jira، Dropbox و Confluence ادغام کامل دارد و روند توسعه نرم‌افزار را آسان‌تر و سازنده‌تر می‌کند. زهرا قاسمی زهرا قاسمی Fri, 18 Aug 2023 15:09:29 +0330 https://virgool.io/@zahrazgh/figma-config-2023-z0kfxtclzjrx 1 . Dev Mode : فیگما یک فضای کاری جدید به نام Dev Mode را معرفی کرد که به طور خاص برای توسعه دهندگان طراحی شده است. این شامل چندین ویژگی است که به پر کردن شکاف بین طراحی و توسعه کمک می کند.این یک فضای کاری در Figma است که برای پاسخگویی به نیازهای توسعه‌دهندگان طراحی شده است و هدف آن این است که آنها در داخل پلتفرم احساس کنند که در خانه هستند. Figma به طور سنتی به عنوان یک ابزار طراحی دیده می شود و با معرفی Dev Mode، Figma به دنبال پر کردن شکاف بین طراحی و توسعه است.2 . Connect to your tools & codebaseبا Dev Mode، توسعه‌دهندگان می‌توانند به‌طور یکپارچه با ابزارها و پایگاه‌های کد موجود خود، از جمله ابزارهای محبوب مانند Jira، GitHub و Storybook یکپارچه شوند. این امکان گردش کار ساده‌تری را برای تیم‌های محصول و توسعه‌دهندگان فراهم می‌کند.3. Track what needs to go to production یک ویژگی مفید است که به توسعه دهندگان کمک می کند تا عناصر طراحی و تغییراتی را که باید در محصول نهایی پیاده سازی شوند، پیگیری کنند.این به ساده‌سازی فرآیند اجرای تغییرات و به‌روزرسانی‌ها در یک محصول زنده با ارائه یک نمای کلی روشن و سازمان‌دهی شده از عناصری که آماده انتقال به مرحله تولید هستند، کمک می‌کند.4. Inspect files alongside code with Figma in VS Codeبا استفاده از این ویژگی، توسعه‌دهندگان می‌توانند فایل‌های طراحی را در همان جایی که با استفاده از کد ویژوال استودیو کد می‌نویسند، بررسی کنند. این امر طراحی و توسعه را حتی به هم نزدیکتر می کند و نیاز به جابجایی بین ابزارهای مختلف را کاهش می دهد.پسوند Figma for VS Code به شما امکان می‌دهد فایل‌های طراحی را پیمایش و بازرسی کنید، با طراحان همکاری کنید، تغییرات را دنبال کنید و اجرای طراحی را تسریع کنید - همه اینها بدون ترک محیط توسعه‌تان. از پسوند Figma for VS Code برای موارد زیر استفاده کنید:مشاهده و پاسخ به نظرات و فعالیت در زمان واقعیدریافت کد پیشنهادی بر اساس طرح هافایل های کد را به اجزای طراحی پیوند دهید5. Variablesاین به‌روزرسانی بزرگ Config بود. معرفی متغیرها به فرآیندهای طراحی ساده تر و کارآمدتر اجازه می دهد. متغیرها می‌توانند رنگ، عدد، متن و مقادیر بولی را ذخیره کنند که می‌توانند در طول طراحی مجدداً استفاده شوند.6. Aliasing support in variablesاین ویژگی امکان استفاده بیشتر مبتنی بر زمینه از متغیرها را فراهم می کند و درک و استفاده از آنها را برای کل تیم آسان تر می کند.نام مستعار به شما این امکان را می دهد که نام دیگری (نام مستعار) برای یک متغیر ایجاد کنید، که می تواند زمانی مفید باشد که یک مقدار ممکن است به روش های مختلف در یک پروژه ارجاع داده شود.به عنوان مثال، ممکن است یک رنگ برند اصلی داشته باشید که در برخی مکان ها به عنوان رنگ پس زمینه و در برخی دیگر به عنوان رنگ حاشیه استفاده می شود. به جای ایجاد متغیرهای جداگانه برای هر یک از اینها، می توانید یک متغیر برای مقدار رنگ ایجاد کنید و سپس نام مستعارهایی مانند "Background Color" یا "Border Color" ایجاد کنید که به متغیر اصلی اشاره می کند. به این ترتیب، اگر رنگ برند تغییر کند، فقط باید متغیر اصلی را به‌روزرسانی کنید و همه نام‌های مستعار تغییر را منعکس می‌کنند.7. Scoping support in variablesمحدوده به زمینه ای اشاره دارد که یک متغیر در آن در دسترس است. در زمینه سیستم های طراحی، یک محدوده ممکن است یک پروژه خاص، یک صفحه خاص در یک پروژه یا حتی یک جزء واحد باشد. محدوده به مدیریت پیچیدگی سیستم های طراحی کمک می کند و مشخص می کند که یک متغیر در کجا کاربرد دارد.به عنوان مثال، ممکن است متغیری داشته باشید که اندازه بالشتک را تعریف می کند که معمولاً در کل طراحی شما استفاده می شود. این می تواند یک متغیر دامنه جهانی باشد. اما در یک جزء خاص، ممکن است شما یک اندازه بالشتک متفاوت بخواهید. شما می توانید یک متغیر جدید با همان نام تعریف کنید که فقط به آن جزء محدود شده است. هنگامی که به متغیر padding در آن کامپوننت ارجاع می دهید، از مقدار محدوده مولفه استفاده می کند. اگر به متغیر padding در جای دیگری ارجاع دهید، از مقدار جهانی استفاده می کند. 8. Variable modes with different valuesهنگام استفاده از حالت های متغیر در Figma، می توانید مجموعه ای از متغیرها را برای هر موضوع تعریف کنید.به عنوان مثال، ممکن است برای تم روشن خود متغیرهای رنگی مانند پس زمینه روشن و متن روشن و متغیرهای متناظر برای تم تیره خود مانند پس زمینه تیره و متن تیره داشته باشید.این متغیرها فقط به رنگ ها محدود نمی شوند، بلکه می توانند سایر عناصر طراحی مانند تایپوگرافی، فاصله گذاری یا مقادیر بولی را نیز در بر گیرند که نمایش عناصر خاص را کنترل می کنند.هنگامی که این متغیرهای مرتبط با موضوع تعریف شدند، می توانید به راحتی با تغییر حالت متغیر، بین تم ها در طراحی خود جابجا شوید. برای مثال، اگر می‌خواهید ببینید طراحی شما در حالت تاریک چگونه به نظر می‌رسد، به سادگی حالت متغیر را به «تاریک» تغییر دهید، و تمام عناصر طراحی که به متغیرهای موضوع اشاره می‌کنند، به‌روزرسانی می‌شوند تا مقادیر تم تیره را منعکس کنند.9. Plugin and REST API supportاین کارکرد متغیرها را گسترش می دهد و به شما در ایجاد مقیاس و مدیریت کمک می کند.پشتیبانی پلاگین به توسعه دهندگان اجازه می دهد تا پلاگین های Figma را ایجاد کنند که با متغیرها تعامل دارند. به عنوان مثال، یک افزونه می‌تواند برای خودکارسازی فرآیند اعمال متغیرهای خاص بر روی مجموعه‌ای از اشیاء یا ایجاد گزارشی درباره نحوه استفاده از متغیرها در یک فایل طراحی طراحی شود. این می تواند به طور قابل توجهی سرعت کارهای تکراری را افزایش دهد، ثبات را اعمال کند و بینش های ارزشمندی را در مورد سیستم طراحی شما ارائه دهد.پشتیبانی REST API ادغام داده های طراحی Figma را با سایر سیستم ها از طریق رابط برنامه نویسی برنامه (API) آن امکان پذیر می کند. این بدان معناست که متغیرهای موجود در Figma را می توان به صورت برنامه نویسی از خارج از Figma مورد دسترسی قرار داد و دستکاری کرد و به همین ترتیب، از داده های خارجی می توان برای به روز رسانی متغیرها در Figma استفاده کرد.10. Advanced prototypingبا استفاده از متغیرها، شرایط و عبارات، طرح‌های خود را با پویایی و تعامل بیشتر زنده کنید، که به شما امکان می‌دهد نمونه‌های اولیه ایجاد کنید که به ورودی کاربر به روشی بسیار واقعی‌تر و پاسخگوتر واکنش نشان دهند.متغیرها در نمونه سازی می توانند مقادیری مانند اعداد، متن، رنگ ها یا بولی (درست/نادرست) را داشته باشند. این مقادیر را می توان برای ایجاد تعاملات پویاتر در نمونه اولیه استفاده کرد و دستکاری کرد. به عنوان مثال، یک متغیر ممکن است تعداد دفعات کلیک روی یک دکمه را در خود نگه دارد یا وضعیت فعلی یک سوئیچ را ذخیره کند.شرایط به شما اجازه می دهد تا در نمونه های اولیه خود منطق ایجاد کنید. شما می توانید اقدامات یا نتایج مختلفی را بر اساس مقدار فعلی یک متغیر مشخص کنید. به عنوان مثال، می‌توانید قانونی داشته باشید که می‌گوید «اگر دکمه بیش از 5 بار کلیک شده است، به صفحه دیگری بروید».عبارات شما را قادر می سازد تا محاسبات یا تبدیل ها را روی متغیرهای خود انجام دهید. برای مثال، می‌توانید با هر بار کلیک کردن روی یک دکمه، یک متغیر شمارنده را افزایش دهید یا رنگ جدیدی را بر اساس ورودی کاربر محاسبه کنید.11. In-context editing and inline previewاین به‌روزرسانی‌های قابلیت استفاده به ما اجازه می‌دهند تا نمونه‌های اولیه خود را در یک نمای مشابه ویرایش و پیش‌نمایش کنیم و روند طراحی را تسریع کنیم.به طور سنتی، طراحان برای ایجاد تغییرات در یک طرح باید بین نماها یا حالت‌های مختلف جابجا شوند و سپس پیش‌نمایش چگونگی ظاهر این تغییرات در نمونه اولیه را مشاهده کنند. این می‌تواند فرآیندی زمان‌بر باشد، به‌ویژه زمانی که بر روی یک طرح بر اساس بازخورد یا آزمایش تکرار می‌شود.با این به‌روزرسانی، طراحان اکنون می‌توانند تغییراتی در طرح‌های خود ایجاد کنند و بلافاصله ببینند که این تغییرات چگونه بر نمونه اولیه تأثیر می‌گذارد بدون اینکه نیازی به تغییر نماها باشد. این ویژگی ویرایش درون متنی و پیش نمایش درون خطی می تواند با امکان تکرار سریع و بازخورد فوری در مورد تغییرات طراحی، روند طراحی را به میزان قابل توجهی سرعت بخشد.12. Improved auto layoutویژگی طرح‌بندی خودکار اکنون به عناصر اجازه می‌دهد تا به اندازه کانتینر پاسخ دهند که هرگز قبلاً نبوده است.ویژگی (ٌWrap) اساساً عناصر طراحی شما را قادر می سازد مانند متن جریان پیدا کنند. اگر گروهی از عناصر را به صورت افقی مرتب کنید، و گروه برای قاب والد خود بیش از حد عریض شود، عناصر به طور خودکار به خط بعدی می‌پیچند. این به ویژه هنگام طراحی اجزایی که نیاز به تطبیق با مقادیر مختلف محتوا یا اندازه صفحه دارند، مانند برچسب‌ها در لیست برچسب یا موارد در یک شبکه، مفید است.حداقل یا حداکثر ارتفاع/عرض به حفظ ثبات و یکپارچگی طراحی کمک می کند. با تعریف این محدودیت‌ها، می‌توانید اطمینان حاصل کنید که یک عنصر بدون توجه به محتوایی که در خود دارد یا اندازه صفحه‌ای که در آن مشاهده می‌شود، هرگز خیلی کوچک نمی‌شود (که ممکن است آن را غیرقابل خواندن یا غیرقابل کلیک کند) یا خیلی بزرگ (که ممکن است طرح‌بندی شما را از بین ببرد یا با عناصر دیگر همپوشانی داشته باشد).13.Upgraded font pickerانتخابگر فونت جدید و بهبود یافته به طراحان امکان می دهد فونت مناسب را سریعتر و راحت تر از همیشه پیدا کنند.جستجو در انتخابگر فونت به روز شده به طراحان این امکان را می دهد که فونت مورد نظر خود را به سرعت با تایپ نام آن پیدا کنند. این به ویژه هنگام کار با یک کتابخانه فونت بزرگ مفید است، زیرا نیاز به پیمایش دستی در لیست برای یافتن فونت مورد نظر را از بین می برد. این می تواند روند طراحی را تا حد زیادی سرعت بخشد و آزمایش با فونت های مختلف را آسان تر کند.فیلتر کردن راهی برای محدود کردن لیست فونت ها بر اساس معیارهای خاص، مانند serif، sans-serif، monospace و موارد دیگر فراهم می کند. زمانی که مطمئن نیستید از کدام فونت استفاده کنید و می خواهید چند گزینه را در یک دسته بندی خاص مقایسه کنید، می تواند بسیار مفید باشد. این باعث می‌شود فرآیند انتخاب فونت مناسب کمتر و متمرکزتر شود.پیش نمایش نام فونت ها در فونت خود یک به روز رسانی کوچک اما مهم است. پیش از این، برای اینکه ببینید چه شکلی است، باید یک فونت را روی برخی از متن های طراحی خود اعمال کنید. اکنون، می‌توانید پیش‌نمایش هر فونت را مستقیماً در انتخابگر فونت مشاهده کنید، که می‌تواند در زمان و کلیک‌های شما بسیار صرفه‌جویی کند. همچنین به شما این امکان را می دهد که در یک نگاه ببینید که چگونه ویژگی ها و شخصیت هر فونت ممکن است در طراحی شما قرار بگیرد.14. Updates to the file browserیکی از پیشرفت های قابل توجه قابلیت جستجوی پیشرفته است. به روز رسانی جدید به کاربران اجازه می دهد تا به سرعت فایل ها یا پروژه هایی را که توسط تیم های خارجی با آنها به اشتراک گذاشته شده است با استفاده از کلمات کلیدی یا عبارات خاص پیدا کنند. این امر به ویژه هنگام برخورد با تعداد زیادی پروژه در Figma مفید است.مرورگر فایل اکنون گزینه های مرتب سازی و فیلتر کردن را بهبود داده است. کاربران می توانند فایل ها را بر اساس پارامترهای مختلفی مانند تاریخ آخرین اصلاح، مالک فایل یا تیمی که فایل را به اشتراک گذاشته است، مرتب کنند. این امکان پیمایش آسان‌تر را فراهم می‌کند و به سازماندهی فضای کاری شما کمک می‌کند.علاوه بر این، یک بخش جدید "فایل های مشترک" وجود دارد. این یک فضای اختصاصی است که در آن تمام فایل ها و پروژه های به اشتراک گذاشته شده با یک کاربر توسط تیم های خارجی در کنار هم قرار می گیرند. این می‌تواند مقدار قابل توجهی در زمان برای کاربرانی که اغلب با تیم‌های خارجی مختلف همکاری می‌کنند، صرفه‌جویی کند، زیرا دیگر نیازی به جستجوی فایل‌های خود برای یافتن فایل‌های به اشتراک گذاشته شده با آنها ندارند.ممنونم از زمانی که برای خواندن این مطلب گذاشتید ? زهرا قاسمی زهرا قاسمی Thu, 27 Jul 2023 15:55:54 +0330 https://virgool.io/@zahrazgh/atomic-design-ixrq3hhbu7vi در این پست میخواهم درباره طراحی اتمی یا همان atomic design به صورت خلاصه مطلب را منتشر کنم .امیدوارم این مطالب برای شما مفید باشد.ابتدا مطلب را با جمله ای از استفن هی (Stephen Hay) شروع می کنم : “ما صفحات را طراحی نمی‌کنیم، ما در حال طراحی سیستم‌هایی از اجزاء هستیم.”طراحی اتمی چیست؟ این روش به این علت طراحی اتمی نام گذاری شده است که از علم شیمی الهام گرفته است. با روش عناصر کوچک‌تر مثل اتم می‌توانیم ساختار بزرگتری را ایجاد و بارها و بارها از آن استفاده کنیم.چرا طراحی اتمی؟ این روش طراحی اتمی نامیده می شود زیرا ایده اصلی آن در شیمی و مطالعه ترکیب ماده است. جهان از مجموعه ای ثابت از «عناصر اتمی» تشکیل شده است که برای بسیاری از ما به عنوان جدول تناوبی عناصر شناخته می شود. این عناصر اجزای سازنده همه چیز در اطراف ما هستند. در شیمی، این عناصر اتمی دارای خواص ثابتی هستند که آنها را مشخص می کند. اکسیژن و هیدروژن به تنهایی اتم هایی با خواص مستقل هستند. با این حال، هنگامی که این عناصر با هم ترکیب می شوند، مولکول هایی را ایجاد می کنند که ویژگی های منحصر به فرد خود را می گیرند که از اتم های موجود در آنها تشکیل شده است. در مورد هیدروژن و اکسیژن، جفت شدن دو اتم هیدروژن با اکسیژن چیزی را ایجاد می کند که ما به عنوان مولکول آب می شناسیم.طراحی اتمی روشی است که توسط براد فراست(Brad Frost)  ارائه شده است. وی با در نظر داشتن این موضوع و با الهام از طراحی مدولار (یکی از روش‌های طراحی محصول است که برای تولید یک محصول کامل با ادغام یا ترکیب قطعات کوچکتر و مستقل از یکدیگر استفاده می شود) روش طراحی اتمی را فرموله کرد که در آن همه چیز با کوچکترین عنصر رابط آغاز می‌‌شود: اتماین استعاره به ما این امکان را می‌دهد که بفهمیم چه چیزی را می‌آفرینیم و به‌خصوص چگونه آن را خلق می‌کنیم. براد فراست طراحی اتمی را به عنوان یک رویکرد کمی متفاوت برای طراحی رابط می‌دانست، اما رویکردی که در پایان می‌تواند تأثیر زیادی بگذارد.در مورد ایجاد سیستم‌های طراحی مطالب زیادی گفته شده است، و بیشتر آن‌ها بر ایجاد پایه‌هایی برای رنگ، تایپوگرافی، gridها، بافت و موارد مشابه تمرکز دارند.ما تا همین اواخر تمام صفحه‌های یک محصول را طراحی می‌کردیم و سپس آن را به اجزای کوچک برش می‌دادیم تا مشخصات یا ‌kit‌های رابط کاربری را بسازیم. اما با ارائه دادن روش طراحی اتمی توسط براد فراست خیلی از طراحان طراحی خود را، از جزء به کل شروع می‌کنند.برای مثال، رابط‌ها از اجزای کوچک‌تر تشکیل شده‌اند. این بدان معناست که ما می‌توانیم کل رابط‌ها را به بلوک‌های ساختمانی اساسی تقسیم کنیم و از آنجا کار کنیم. این اصل اساسی طراحی اتمی یا همان atomic design است.جدول تناوبی عناصر5 مرحله‌ی طراحی اتمی:طراحی اتمی از 5 مرحله تشکیل شده است که هر مرحله با مرحله‌ی قبلی تکمیل می‌شود.1.اتم‌ها2.مولکول‌ها3.ارگانیسم‌ها4.قالب‌ها5. صفحه‌هاپنج مرحله طراحی اتمیاتم‌هااولین مرحله برای شروع طراحی اتم‌ها هستند.اتم‌ها عضو کوچک، ثابت و سازنده سیستم ما هستند. اتم‌ها شامل پالت‌های رنگی، فونت‌ها، عناصر منفرد (مانند header‌ها، پاراگراف‌ها، دکمه‌ها و غیره) و هر چیز دیگری است که با اتم‌های دیگر ترکیب می‌شود تا یک مولکول ایجاد کنند.ملکول‌هاوقتی شروع به ترکیب اتم‌ها با هم می‌کنیم المان‌ها جالب‌تر و ملموس‌تر می‌شوند. مولکول‌ها گروه‌هایی از اتم‌ها هستند که به یکدیگر پیوند دارند و کوچک‌ترین واحدهای بنیادی یک ترکیب هستند. این مولکول‌ها ویژگی‌های خاص خود را دارند و به عنوان ستون فقرات سیستم‌های طراحی ما عمل می‌کنند. برای مثال، حالا یک text box به همراه یک دکمه و یک برچسب، روی هم یک ملکول را تشکیل می‌دهند، به اسم ملکولِ جست‌وجو (همان کامپوننت). به عنوان یک قاعده‌ی کلی، آن‌ها ترکیبی نسبتا ساده از اتم‌ها هستند که برای استفاده مجدد ساخته شده‌اند.ارگانیسم‌هاارگانیسم‌ها گروه‌هایی از مولکول‌ها هستند که به هم پیوسته‌اند تا یک بخش نسبتاً پیچیده و متمایز از یک رابط را تشکیل دهند.ارگانیسم‌ها جایی هستند که ما شروع به دیدن رابط کاربری می‌کنیم. شما می‌توانید ارگانیسم‌ها را به عنوان یک کامپوننت در نظر بگیرید و به‌ راحتی از آن در کل دیزاین و یا قالب‌هایتان استفاده کنید. در نتیجه ارگانیسم هنوز یک طرح کامل نیست و فقط یک کامپوننت هست. نمونه‌ای از ارگانیسم ممکن است یک منوی ناوبری(Navigation Menu) باشد که شامل یک لوگو، آیتم‌های منوی ناوبری (صفحه اصلی،وبلاگ،درباره ماو...)و یک کادر جستجو یا دکمه ثبت نام است.قالب هادر این مرحله، قیاس شیمی خود را می‌شکنیم تا وارد زبانی شویم که برای مشتریان و خروجی نهایی ما منطقی‌تر باشد. قالب‌ها اساسا وایرفریم‌های (wireframe) ما هستند و عمدتاً از گروه‌هایی از ارگانیسم‌ها تشکیل شده‌اند که برای تشکیل صفحات به هم دوخته شده‌اند. اینجاست که ما شروع به دیدن طرح در کنار هم می‌کنیم و شروع به دیدن چیزهایی مانند طرح‌بندی در عمل می‌کنیم.صفحه‌هاصفحه‌ها بالاترین سطح وفاداری را دارند و از آن‌جایی که ملموس‌ترین بخش هستند، معمولاً اکثر افراد در این فرایند بیشتر وقت خود را در آن می‌گذرانند و بیشتر بررسی‌ها حول آن می‌چرخد. صفحه‌ها نمونه‌های خاصی از قالب‌ها هستند. در اینجا  placeholderمحتوا با محتواهایی که مثال‌هایی از محتوای واقعی هستند جایگزین می‌شود تا تصویری دقیق از آنچه کاربر در نهایت خواهد دید ارائه دهد. مرحله‌ی صفحه ضروری است زیرا جایی است که اثربخشی سیستم طراحی را آزمایش می‌کنیم. مشاهده‌ی همه چیز در سیستم های مختلف به ما این امکان را می‌دهد که برای اصلاح مولکول‌ها ، ارگانیسم‌ها و قالب‌های خود به منظور بررسی بهتر به عقب برگردیم. صفحات همچنین مکانی برای آزمایش تغییرات در قالب ها هستند. برای مثال، ممکن است بخواهید بیان کنید که عنوانی حاوی 40 کاراکتر چگونه است یا با 340 کاراکتر چطور به نظر میرسد؟ وقتی یک کاربر یک کالا در سبد خرید خود دارد در مقابل 10 کالا با کد تخفیف اعمال شده، چگونه به نظر می‌رسد؟ مجدداً، این موارد خاص بر نحوه‌ی بازگشت و ساختن سیستم خود تأثیر می‌گذارند. با این حال صفحه‌ها جایی هستند که شما تعیین می‌کنید که کدام قالب‌ها باید نمایش داده شوند. همچنین صفحه‌ها جایی است که اکثر کاربران و ذی‌نفعان پروژه نظر خود را در مورد طراحی می‌دهند چون که همه‌ی عناصر را در شکل نهایی و در کنار یکدیگر می بینند. طراحی با جزئیات بالا و همه‌ی نیازمندی‌ها در صفحه‌ها به شما این امکان را می‌دهد که بتوانید نقاط ضعف و بخش‌هایی از طراحی را که کار نمی‌کنند را پیدا و مشکلات آن‌ها را حل کنید.طراحی اتمی مفهومی است که از وب زاده شده است. اما درک این نکته مهم است که طراحی اتمی برای همه‌ی رابط‌های کاربری، نه فقط رابط‌های مبتنی بر وب، اعمال می‌شود. می‌توانید روش طراحی اتمی را در رابط کاربری هر نرم‌افزاری اعمال کنید: Microsoft Word، Keynote، Photoshop، ATM بانکتان، هر چه که باشد.صفحات در مرحله پنجم طراحی زهرا قاسمی زهرا قاسمی Thu, 20 Jul 2023 13:01:59 +0330