https://virgool.ir/feed/@lida.babaieProduct designerfa2026-11-10 16:26:31https://files.virgool.ir/upload/users/94308/avatar/gt1AHS.jpghttps://virgool.ir/@lida.babaiehttps://virgool.ir/yoko-space/نامگذاری-توکن-ها-در-دیزاین-سیستم-ifknmednr1st در دنیای دیزاین سیستم، کارایی و سازگار بودن بسیار مهم است. همانطور که محصولات دیجیتال روز به روز تکامل میابند، داشتن یک زبان بصری یکپارچه در پلتفرم‌ها و تیم‌های مختلف هر روز مهمتر می شود.توکن‌های طراحی به‌عنوان یک منبع یکتا برای تصمیم‌گیری‌های طراحی عمل می‌کنند، در واقع شما می‌توانید عناصر اصلی مانند رنگ‌ها، تایپوگرافی، فاصله‌ها و ... را به‌گونه‌ای با آنها تعریف کنید که در تمام تیم ها علاوه بر اینکه یک زبان مشترک دارید، انسجام و یکپارچگی را هم حفظ کنید. اما مهمترین قسمت در توکن‌ها نحوه نام‌گذاری آن‌ها است. نامگذاری در توکن‌های طراحی چیزی بیش از یک عنوان هستند - آنها زبانی هستند که طراحان و توسعه دهندگان برای برقراری ارتباط بین تصمیمات طراحی از آنها استفاده می کنند. هیچ استانداردی در جهان برای توکنایز کردن وجود ندارد و دیزاین سیستم های مختلف به روش های مختلفی با توجه به شرایط تیمی با آن برخورد می کنند.در این مقاله، من ابتدا به بررسی روش‌های نامگذاری مورد استفاده در سه دیزاین سیستم محبوب، از جمله متریال و فلوئنت و یوکو میپردازم و سپس موارد مهم در این مسیر را بازگو میکنم. چه در حال ساختن یک دیزاین سیستم جدید باشید یا یک سیستم موجود را اصلاح کنید، درک این نکات نامگذاری می تواند به شما در ایجاد یک سیستم قابل فهم‌تر و قابل گسترش‌تر کمک کند.جایگاه توکن‌ها در دیزاین سیستم قبل از یادگیری نامگذاری اجازه دهید با جایگاه توکن‌ها در دیزاین سیستم آشنا شویم در شکل زیر شما میتوانید به راحتی این را درک کنید، کنار تمام اجزا بزرگ دیزاین سیستم، توکن ها یک جایگاه بزرگ و مهم دارند، پس میتوانیم نتیجه بگیریم توکن ها بی اهمیت نیستند!!انواع توکن‌هاتوکن‌های رنگی:رنگ مورد استفاده در یک دیزاین سیستم را نشان می دهد (به عنوان مثال رنگ اصلی ، رنگ ثانویه، رنگ پس زمینه، ....)تایپوگرافی: فونت‌ها، اندازه‌ها، ارتفاع خط و سایر ویژگی‌های مربوط به متنتوکن‌های فاصله: فاصله بین عناصر به عنوان مثال، حاشیه هاتوکن‌های پدینگ توکن‌های borderتوکن‌های سایهاهمیت نامگذاری در توکن‌سازینام‌گذاری واضح، زیربنای یک دیزاین سیستم موفق است. در این مسیر همکاری بین تیم‌های درگیر بسیار مهم است ما نمیتوانیم یک نام‌گذاری انتخاب کنیم که فقط برای تیم دیزاین قابل فهم باشد مهمترین ویژگی آنها ایجاد پیوند بین تیم‌های مختلف است پس انتخاب چگونگی نام گذاری آنها نیاز به مشورت و بررسی با تیم‌های درگیر دارد . زمانی که نام توکن‌ها برای همه قابل فهم باشند میتوانند به عنوان یک زبان مشترک بین طراحان و توسعه دهندگان عمل کنند و همکاری و کارایی را تقویت کنند. اگر بخواهیم به چند جنبه کلیدی در توکن‌ها اشاره کنیم میتوانیم به موارد زیر اشاره کنیم: حفظ consistency در سرار پلتفرم ها:توکن های طراحی تضمین می کنند که عناصر طراحی به صورت کاملا یکسان در چندین پلتفرم مانند برنامه های کاربردی وب، موبایل و دسکتاپ اعمال می شوند. حفظ Scalability و Flexibilityزمانی که دیزاین سیستم‌ها رشد می کنند، چالش حفظ و نگهداری آنها نیز افزایش می‌یابد. توکن‌ها به طراحان و توسعه دهندگان اجازه میدهند که مدیریت و به روزرسانی عناصر تا حد زیادی راحت انجام شود. اگر هنوز در مورد اینکه توکن ها چگونه استفاده میشوند متوجه نشده اید اجازه دهید کمی بیشتر درمورد آنها توضیح دهم، در سال‌های گذشته زمانی که میخواستیم رنگی را در سیستم استفاده کنیم در ابتدا آنها را با استایل‌های مختلف در سیستم تعریف میکردیم و وقتی رنگ را به یک دکمه انتساب می‌دادیم به شکل زیر تعریف میشد. این نامگذاری در دیزاین سیستم هایی که بزرگ هستند و چندین طراح دارند با مشکل مواجه میشد زیرا ممکن بود blue-60 در هر جایی استفاده شود صرف نظر از تست رنگ، کانسیستنسی و ... و اما توکن ها جدی تر شدند به شکل زیر دقت کنید در واقع همان blue-60 است اما با درک بهتر!!همانطور که در شکل بالا میبینید من توکن های رنگی دکمه را در دو حالت نشان داده‌ام، در این حالت طراحان میدانند که رنگ های پس‌زمینه در رنگ‌های مشخص تعریف شده اند و دیگر نیازی نیست به دنبال رنگ پس زمینه در سیستم باشند و حتی حالت های رنگی هم با نام های مشخص تفکیک شده اند برای مثال hover,pressو ....اما سوالی که اینجا مطرح میشود، چه نام گذاری درست است؟چگونه باید نامگذاری کنیم؟ و ... من در این قسمت نامگذاری‌های مختلف را نشان میدهم و شما با تیم تان میتوانید تصمیم بگیرید کدام مفید است. مروری بر سیستم های طراحی محبوب متریال متریال دیزاین به دلیل دستورالعمل های جامع و رویکرد ساختاریافته اش در طراحی توکن ها شناخته شده است. قراردادهای نامگذاری مورد استفاده در طراحی متریال بر وضوح، consistency و scalability تمرکز دارند.متریال از ساختار زیر پیروی می کند:۱- پیشوند (Prefix): معمولا با md نمایش داده میشود و به معنای متریال است.۲- نوع توکن (Token type) : متریال توکن ها را براساس طرز استفاده آنها دسته بندی میکند که شامل : مرجع (Reference ): تمام گزینه‌های استایل مانند مقادیر هگزا رنگ، که در یک دیزاین سیستم موجود است.سیستمی (System): هدفی را که یک توکن در UI انجام می دهد، از رنگ و تایپوگرافی گرفته تا ارتفاع و شکل.کامپوننت (Component) : نشان دهنده عناصر و مقادیری است که یک جزء را تشکیل می دهند، مانند مانند رنگ نماد یک دکمه ، متن برچسب، نمادها۳- دسته (Category) : هدف توکن را توصیف می کند(به عنوان مثال، پالت، تایپوگرافی، فاصله گذاری)۴- جزییات (Specific value) : جزئیات مربوط به توکن را ارائه می دهدمثال : `md.ref.palette.primary`اجازه بدهید یکم جزیی تر به متریال نگاه کنیم،قراردادهای نامگذاری متریال دیزاین به گونه ای طراحی شده اند که هم توصیفی و هم انعطاف پذیر باشند. توکن های رنگیمتریال ابتدا رنگ ها را به دو دسته Schemes ، State Layers تقسیم میکند، سپس از نام گذاری توصیفی برای هر قسمت استفاده میکند. در Schemes رنگ های پایه هر جز را قرار داده. و State Layers حالت هایی که برای press, hover و غیره تعریف میشود را قرار داده. توکن های متنی (Typography Tokens)توکن های متنی در متریال برای نشان دادن نوع متن و کاربرد آن نامگذاری می‌شوند، که شامل دو دسته Typeface (وزن فونت ها) و Type scale (تمام ویژگی های یک فونت استایل) دسته بندی کرده, که Type scale متریال شامل چهار دسته Display , Headline , Title, label, body است.به صورت کلی نامگذاری متریال در کنار ساختار سلسله مراتبی که دارد، دارای پیچیدگی های بسیاری است، و در صورتی که فردی با این دیزاین سیستم آشنا نباشد درک آن برایش دشوار است.فلوئنتفلوئنت دیزاین از یک رویکرد ساختاریافته برای نامگذاری توکن ها استفاده می کند. این ساختار کمک می‌کند تا توکن‌ها را بر اساس دسته‌بندی، ویژگی‌ها و تغییراتشان سازمان‌دهی کنیم، شبیه به طراحی متریال است اما با برخی ویژگی‌های منحصربه‌فرد.فلوئنت از ساختار دو مرحله ای پیروی می کند:مرحله اول: تعریف تمام اجزا مثل رنگ، سایزو ضخامت در یک دسته به نام globalمرحله دوم : معنا دادن به توکن های global که به نام Alias نامگذاری کردهاجازه بدهید در یک تصویر بهتر توضیح دهم. قراردادهای نامگذاریقراردادهای نامگذاری توکن های فلوئنت دیزاین واضح طراحی شده است تا نقش هر توکن را منعکس کند. بالاتر اشاره کردیم که به طور کلی دو دسته global و Aliasداریم، حالتی که برای رنگ ها استفاده کرده دسته color را به عنوان Alias استفاده کرده، و دارای ۴ دسته بندی اصلی برای رنگ ها است : رنگ های پس زمینه (Background)رنگ متن و نماد (Foreground)رنگ های حاشیه (Strok)این سه دسته، دسته های اصلی در نامگذاری است، اما با توجه به تصمیماتی که در تیم های خود داشته دسته هایی به نام Accessible, Disable , ... هم میبینید.نکته ای که وجود دارد فلوینت از یک سری زیر دسته برای بک گراند و فورگراند استفاده کرده که از ۱ تا ۱۰ (یا هر عدد دیگری) دسته بندی شده، و در هر کدام از این زیر دسته ها حالت های مختلف رنگی نمایش داده شده به طور مثال (hover , press , ..) به طور کلی فلوئنت به انعطاف‌پذیری خود در نام‌گذاری تأکید دارد. توکن ها به گونه ای طراحی شده اند که در پلتفرم های مختلف (ویندوز، وب، موبایل) قابل استفاده باشند و در عین حال زبان بصری ثابتی را حفظ کنند. این انعطاف پذیری در قراردادهای نامگذاری رعایت شده است، تا زمینه های مختلف را پوشش دهند، و به اندازه کافی خاص هستند تا از سردرگمی جلوگیری کنند.من سعی کردم دو سیستم محبوب و متفاوت در نامگذاری را در اینجا بررسی کنم.تا اینجا میتوانیم به این نکته برسیم که نامگذاری توکن ها ساختار مشخص ندارد، و تیم دیزاین و دولوپ این راه را روشن میکند. دیزاین سیستم Yoko Spaceهدف سازگاری , دسترس پذیری و یادگیری است ،اینکه تمام افراد بتوانند به راحتی نامگذاری را متوجه شوند و از طرفی قابل گسترش هم باشد.در ایجاد توکن از ساختار دو مرحله ای پیروی استفاده شده:مرحله اول: تعریف تمام اجزا مثل رنگ، سایزو ضخامت در یک دسته به نام directoryمرحله دوم : معنا دادن به توکن های directory که به نامهای مختلف رنگی، اندازه و ... نامگذاری کردیمتوکن های رنگی توکن های رنگی دارای ۴ دسته بندی است به نام neutral, brand, state, status میباشد و هر کدام از این دسته ها دارای زیر دسته هایی به نام bg, fg, border تقسیم شده اند و هر رنگی با توجه به میزان روشنایی اش در دسته های از ۱ تا ۱۰ قرار گرفته. به طور مثال من دو دسته neutral, brand را در زیر آورده ام!هنگام ایجاد یک قرارداد نامگذاری برای دیزاین سیستم خود، چندین عامل برای اطمینان از وضوح، سازگاری و کارایی مهم هستند:۱. ثبات:یکنواختی: ساختار نامگذاری ثابتی را در سراسر سیستم حفظ کنید.پیوندها یا پسوندها: استفاده از پیشوندها یا پسوندهای ثابت را برای انواع مختلف توکن در نظر بگیرید.حساسیت به حروف کوچک: در مورد بزرگ و کوچک بودن حروف تصمیم بگیرید (مانند camelCase، PascalCase) و به آن پایبند باشید.۲. وضوح:نام های توصیفی: از نام های واضح و توصیفی استفاده کنید که دقیقاً هدف توکن را منعکس کند.اجتناب از ابهام: مطمئن شوید که نام توکن ها بدون نیاز به توضیح اضافی معانی واضحی دارند.۳.مقیاس پذیری:آینده : یک سیستم نامگذاری طراحی کنید که بتواند رشد و گسترش آینده را در خود جای دهد.انعطاف پذیری: امکان تغییرات و سفارشی سازی بدون انجام تغییرات بزرگمدولار: یک رویکرد مدولار برای نامگذاری در نظر بگیرید که سازماندهی و مدیریت را آسان میکند.۴.همکاری:زبان مشترک: یک واژگان مشترک برای طراحان و توسعه دهندگان ایجاد کنید.ورودی تیم: کل تیم را در فرآیند نامگذاری برای تقویت مالکیت شرکت دهید.مستندات: قراردادهای نامگذاری را برای مرجع به وضوح مستند کنید.۵.سازگاری ابزار:ابزارهای طراحی و توسعه:از سازگاری با قراردادهای نامگذاری ابزارهای دلخواه خود اطمینان حاصل کنید.ادغام: نحوه ادغام سیستم نامگذاری با سایر سیستم ها و فرآیندها را در نظر بگیرید.۷. بهترین شیوه ها:تحقیق: سیستم های طراحی موجود و قراردادهای نامگذاری آنها را تجزیه و تحلیل کنید.دستورالعمل ها:دستورالعمل های نامگذاری واضحی را برای تیم ایجاد کنید تا از آنها پیروی کند.بررسی و اصلاح: به طور منظم سیستم نامگذاری را در صورت نیاز بررسی و اصلاح کنید.با در نظر گرفتن دقیق این عوامل، می توانید یک نامگذاری قوی و موثر برای دیزاین سیستم خود ایجاد کنید که همکاری، کارایی و قابلیت نگهداری را ارتقا میدهد.منابع:Yoko Space design systemMaterial DesignCarbon Design SystemPolarisDesign Systems HandbookA Comprehensive Guide to Design Systemslida babaielida babaieMon, 26 Aug 2024 21:12:59 +0330https://virgool.ir/@lida.babaie/افزایش-قابلیت-استفاده-با-کاهش-بار-شناختی-کاربر-eqqtobqp4pa5هر بار که از یک وب سایت بازدید می کنید، یک فرآیند یادگیری در مغز آغاز می شود. به طور مثال ناوبری، چیدمان یا تصویر با چرخش خودکار در صفحه اصلی، که مغز شما باید یاد بگیرد که چگونه از سایت استفاده کند و در عین حال دلیل ورود شما را در وهله اول پیگیری کند.تلاش ذهنی مورد نیاز در این مدت بار شناختی نامیده می شود. نکته ای که وجود دارد این است که حافظه ای که این اطلاعات در آن پردازش و ذخیره می شود محدود است. مغز شما زمانی که اطلاعات بیشتری با توجه به توان خود دریافت می کند، شروع به کند شدن می کند یا حتی کار را رها می کند. اگرچه بار شناختی کاملاً قابل اجتناب نیست، بلکه طراحان باید برای مدیریت و تطبیق این محدودیت ها تلاش کنند.بار شناختی چیست؟بار شناختی به میزان تلاشی اطلاق می شود که در هنگام استدلال و تفکر انجام می شود. هر فرآیند ذهنی، از حافظه گرفته تا ادراک و زبان، بار شناختی ایجاد می کند زیرا نیاز به انرژی و تلاش دارد. هنگامی که بار شناختی بالا باشد، فرآیندهای فکری به طور بالقوه با اختلال مواجه می شوند. برای طراح UX، یک هدف مشترک هنگام طراحی رابط‌ها این است که بار شناختی کاربران را به حداقل برساند.قدرت پردازش مغز انسان با بارگذاری بیش از حد اطلاعات کاهش می یابد. کاربر ممکن است احساس سردرگمی یا گیج شدن کند که منجر به تجربه منفی کاربر می شود. برای سهولت تجربه کاربر، باید با پیروی از اصول خاصی از روانشناسی شناختی، در جهت کاهش بار شناختی تلاش کنیم.هیچ راهی برای حذف کامل بار شناختی وجود ندارد - در واقع، حتی اگر این امکان وجود داشت، مطلوب نبود!!!برای اینکه بار شناختی را به حداقل برسانید، باید رابط کاربری طبیعی (NUI) را توسعه دهید.رابط کاربری طبیعی چیست؟"تا به حال، ما همیشه مجبور بوده‌ایم خود را با محدودیت‌های فناوری وفق دهیم و روش کار با رایانه‌ها را با مجموعه‌ای از قراردادها مطابقت دهیم. با NUI، دستگاه‌های محاسباتی برای اولین بار با نیازها و ترجیحات ما سازگار می‌شوند و انسان‌ها شروع به استفاده از فناوری به هر روشی می‌کنند که برای ما راحت‌تر و طبیعی‌تر باشد."بیل گیتسرابط‌های کاربری که با استفاده از روش‌هایی مانند لمس، حرکات یا صدا در تعامل هستید، اغلب به عنوان رابط کاربر طبیعی (NUI) شناخته می‌شوند. ما آن‌ها را رابط‌هایی در نظر می‌گیریم که استفاده از آن‌ها را آنقدر آسان می‌دانیم که طبیعی به نظر می‌رسند.چند نکته در طراحی رابط کاربری طبیعی وجود دارد:هنگامی که یک NUI طراحی می کنید، باید از مهارت های موجود کاربران استفاده کنید. اگر کاربران بتوانند مهارت‌هایی را که در زمینه‌های دیگر زندگی خود دارند به کار ببرند، آن‌ها را از دردسر یادگیری چیزهای کاملاً جدید نجات خواهید داد.شما باید به کاربران مبتدی اجازه دهید به تدریج یاد بگیرند که چگونه از رابط کاربری استفاده کنند. در اینجا، شما باید یک مسیر یادگیری واضح را برای کاربران ترسیم کنید، مسیری که به آن‌ها اجازه می‌دهد با مهارت‌های اولیه شروع کنند و گام به گام و به تدریج به سراغ چیزهای پیشرفته‌تر بروند. هرگز کاربران مبتدی را با گزینه های زیاد غرق نکنید. در عوض، آن را ساده نگه دارید.یک NUI باید با داشتن تعامل مستقیم بین کنش و واکنش کاربر از تعامل کاربر با دنیای فیزیکی تقلید کند. برای مثال کنسول مایکروسافت حرکت کاربران را حس می کند و به آنها اجازه می دهد تا از طریق حرکات با محتوای موجود در صفحه ارتباط برقرار کنند.و نکته آخر که ربط به این مقاله داره کاهش بار شناختی!!!انواع بار شناختیسه دسته بار شناختی داریم:بار شناختی ذاتی(Intrinsic Cognitive Load​):از نظر تجربه کاری میزان انرژی است که افراد برای به دست آوردن اطلاعات جدید در محصول شما و هر تعاملی که سعی دارند با محصول شما انجام دهند، میباشد. برای مثال می توانید کار را به مراحل کوچکتر تقسیم کنید تا بار شناختی ذاتی را کاهش دهید.بار شناختی اضافی(Extraneous cognitive):بار شناختی اضافی روشی است که اطلاعات همراه با اطلاعات حواس‌پرتی یا نامربوط ارائه می‌شود که تمرکز یادگیرنده را سخت می‌کند.بار شناختی ژرمن(Germane cognitive):بار شناختی ژرمن روشی است که برای ساختن و پردازش طرحواره ها استفاده می شود. این به ویژه برای زمینه هایی مانند آموزش جالب است، اما پرداختن به آن از طریق طراحی نیز پیچیده تر است.کاهش بار شناختی1- قطعه قطعه کردن اطلاعات: قطعه قطعه کردن یک استراتژی مهم برای جلوگیری از بار شناختی است. در این روش، کاربر/ یادگیرنده واحدهای بزرگ‌تر را به واحدهای کوچک‌تر تقسیم می‌کند که به خاطر سپردن آن آسان‌تر است، بنابراین بار شناختی کاهش می‌یابد.2-توجه به مدل ذهنی کاربر:افراد دارای مدل‌های ذهنی درباره نحوه عملکرد وب‌سایت‌ها بر اساس تجربیات گذشته خود از بازدید از سایت‌های دیگر دارند. وقتی از برچسب‌ها و طرح‌بندی‌هایی استفاده می‌کنید که آن‌ها در وب‌سایت‌های دیگر با آن‌ها مواجه شده‌اند، بنابراین بار شناختی کاهش را می‌ دهید.3-خودداری از بهم ریختگی بصری:پیوندهای زائد، تصاویر نامربوط و تایپوگرافی بی معنی رشد کاربران را کند می کند.درست است که استفاده از این موارد خوب است اما زمانی که بیش از حد از آنها استفاده شود نتیجه معکوس می دهد و در واقع قابلیت استفاده را مختل می کند.4-به جای یادآوری از تشخیص استفاده کنید:انسانها در تشخیص چیزها بهتر از به خاطر سپردن آنها هستند. تشخیص در واقع به پردازش کمتری در مغز انسان نیاز دارد، بنابراین خطر خطا یا شکست کمتری وجود دارد. در نتیجه، طراحی ما باید باعث شناسایی بیش از یادآوری شود. برای مثال می‌توانیم این را با استفاده از تصاویری که کاربران می‌توانند به سرعت با یک اقدام یا اطلاعات مرتبط کنند، اعمال کنیم.5-نحوه اسکن صفحات آنلاین توسط افراد را درک کنید6-گام های غیرضروری را حذف کنید:مقدار کاری که کاربر باید انجام دهد باید حداقل باشد. تمام موارد اضافی ممکن را حذف کنید تا کاربران کوتاه ترین مسیر را برای رسیدن به مقصد خود را فراهم کنند.با این کار بار شناختی کاهش می یابد.امیدوارم این مقاله براتون مفید باشه،در صورتی که شما هم نکته ای دارید خوشحال میشم برام بنویسید.منابع:https://www.nngroup.com/articles/minimize-cognitive-load/?lm=theory-user-delight&pt=articlehttps://www.interaction-design.org/literature/topics/cognitive-loadhttps://medium.com/dsgnrs/cognitive-psychology-in-ux-scarcity-of-getting-attention-cc0465ebc54dlida babaielida babaieFri, 24 Dec 2021 23:14:15 +0330https://virgool.ir/@lida.babaie/خطاهای-شناختی-در-طراحی-محصول-(قسمت-اول)-fgfcsspcffcqاثبات اجتماعی (Social proof)به گفته رابرت سیالدینی "در صورتی که یک رفتار را دیگران انجام دهند ما تصور میکنیم صحیح میباشد و انجام میدهیم."بنابراین غالباً در شرایطی نسبت به کاری که باید انجام دهیم مطمئن نیستیم ، تصور می کنیم افراد اطراف ما (کارشناسان ، افراد مشهور ، دوستان و غیره) دانش بیشتری در مورد آنچه اتفاق می افتد و آنچه باید انجام شود دارند.برنامه هایی که سعی می کنند کاربران را به انجام عملی غیرمعمول یا شروع یک عادت جدید سوق دهند ، غالباً از اثبات اجتماعی مانند نظرات ، رتبه بندی ، توصیفات و غیره استفاده میکنند.بعنوان مثال برنامه مدیتیشن Petit BamBou است که به صورت واقعی نشان می دهد چه تعداد از افراد در حال مدیتیشن هستند و یا چه تعداد از افراد در هفته ، ماه ، سال و غیره در حال مدیتیشن بوده اند. به این ترتیب ، آنها قصد دارند نشان دهند که مدیتیشن چیزی است قابل دسترسی برای همه ، و هیچ مانعی برای انجام آن وجود ندارد.و یا اثبات اجتماعی توسط افراد مشهور این مورد زمانی است که افراد مشهور محصولات شما را تأیید می کنند.مثال:زمانی که یک ایفلوئنسر محصول شما را تبلیغ میکندکنجکاوی (Curiosity)کنجکاوی یک حالت انگیزشی دلپذیر است که شامل تمایل به شناخت و جستجوی اطلاعات و تجربیات بدیع و جدید است.به عنوان مثال برنامه تناسب اندام Strava با ویژگی "Pace Analysis" پیش نمایشی از شکل نمودار را به شما ارائه می دهد ، اما اطلاعات بیشتری نمیدهد. اگر می خواهید اطلاعات بیشتری را ببینید ، باید مشترک آنها شوید. در واقع این برنامه یک حس کنجکاوی را در شما به وجود آورده .شناخت بیش از فراخوان (Recognition over Recall)افراد به راحتی تجربه هایی که کرده اند را به یاد می آورند تا اینکه بخواهند فعالیت هایی که فقط در حافظه اشان میباشد را به یاد بیاورند.به همین دلیل بسیاری از وبسایت ها به جای اینکه از کاربران خود بخواهند همه چیز را به خاطر بسپارند ، به کاربران خود گزینه هایی را پیشنهاد میدهند.دسترسی به صفحات اخیراً بازدید شده و جستجوهای انجام شده در گذشته می تواند به کاربران کمک کند وظایفی را که ناقص انجام داده اند و یادآوری آن ها مشکل میباشد از سر بگیرند.آمازون (و بسیاری دیگر از وب سایت های تجارت الکترونیکی) لیست مواردی را که اخیراً از آنها بازدید کرده اند نشان می دهد. این لیست ها به کاربران کمک می کند خریدی را که ممکن است از چند روز پیش شروع کرده باشند به پایان برسانند.خوشحال کنندها (Delighters)افراد لذت های کوچک و غیرمنتظرانه را به خوبی بیاد می آورند و به آنها پاسخ میدهند. هرگونه تأثیر احساسی مثبتی که کاربر هنگام تعامل با دستگاه یا رابط کاربری ممکن است داشته باشد،که می تواند بر رفتارها و نظرات فرموله شده هنگام استفاده از وب سایت یا برنامه تأثیر بگذارد.از نظر محصول ، دلپذیرها ویژگی هایی هستند که ارزش پیشنهادی برند شما را تشکیل می دهند و یک مزیت رقابتی ایجاد می کنند. اینها ویژگیهایی هستند که دقیقاً بخشی از روند برنامه ریزی محصول نیستند ، اما در طولانی مدت ، فقط برای افزایش رضایت مشتری و حفظ مشتری به آن اضافه می شوند.لنگر و تنظیم(Anchoring & Adjustment)تعصب لنگر زمانی اتفاق می افتد که افراد بیش از حد به اطلاعات قبلی یا اولین اطلاعاتی که هنگام تصمیم گیری پیدا می کنند اعتماد می کنند.به عنوان مثال ، اگر ابتدا تی شرت 1200 دلاری را مشاهده می کنید - سپس تی شرت 100 دلاری را مشاهده می کنید - مستعد دیدن پیراهن دوم ارزان قیمت هستید.ویا نحوه ارائه تخفیف را در نظر بگیرید. نشان دادن قیمت اصلی با قیمت تخفیف یافته به این معنی است که قیمت اصلی می تواند درک کاربر از ارزش آن کالا را لنگر کند.چالش های مناسب (Appropriate challenges)افراد از چالش ها خوشحال میشوند بویژه چالش هایی که بین عملگرهای طاقت فرسا و خسته کننده تعادل ایجاد میکنند.توی اپلیکیشن Duolingo این مورد به خوبی انجام شدهاثر زیبایی-قابل استفاده بودن (Aesthetic-Usability Effect)جدا از داشتن UX عالی ، داشتن رابط کاربری عالی و طراحی بصری نیز به همان اندازه مهم است.مطالعات نشان می دهد که برداشت های اولیه از یک محصول بر نگرش طولانی مدت در مورد کیفیت آن تأثیر می گذارد.اولین برداشت افراد بر شکل گیری نگرش آنها تأثیر می گذارد و به طور قابل ملاحظه ای بر نحوه درک افراد تأثیر می گذارد.نسبت دادن ارزش(Value Attribution)افراد برای چیز هایی ارزش قائل هستند که هزینه آنها بیشتر است.هزینه میتواند پولی یا زمانی باشد.بعضی اوقات شرکت ها با تغییر قیمت باعث میشوند که این درک را در کاربر ایجاد کنند که آن کالا باارزش میباشد.یا در بازی ها این ارزش بوسیله زمان انجام میشود.یعنی با صرف وقت زیاد شما به یک امتیاز دست پیدا میکنید.بیزاری از دست دادن(Loss aversion)افراد اگر چیزی که به دست آورده اند را از دست بدهند خیلی ناراحت میشوند .گاهی اوقات برنامه هایی به شما متذکر میشوند که اگر اشتراک را نخرید این مزایا و مزایای فعلی را از دست میدهید.برای مثال اگر در Duolingo وارد سیستم نشوید ، تمام اطلاعات اولیه را که پر کرده اید و همچنین اولین آزمون "معرفی" را که انجام داده اید ، از دست خواهید داد.مثالی دیگر ، در Headspace شما مقدمه ای را برای مراقبه شروع کرده اید. پس از 10 جلسه ، شما در راه یادگیری مدیتیشن به خوبی متعهد شده اید. اما اگر در برنامه حق بیمه مشترک نباشید ، نمی توانید پیشرفت خود را ادامه دهید و این حرکت را که شروع کرده اید از دست خواهید داد.رویداد های دوره ای (Periodic Events)اگر کاری به صورت مکرر انجام شود باعث علاقه ،احساس تعلق میشود.برای مثال در برنامه Headspace هر روز کاربران در یک ساعت مشخص با هم دیگر مراقبه میکنند این روش علاوه بر این که به کاربر حس غیر مجازی بودن میدهد باعث استفاده بلند مدت از برنامه میشود.-----https://uxplanet.org/getting-real-about-delightful-design-24af65ebbe93https://medium.com/@stephenajiboye7/delighters-the-wow-feature-set-a07ba19719c1https://www.nngroup.com/articles/anchoring-principle/https://www.nngroup.com/articles/theory-user-delight/lida babaielida babaieMon, 04 Jan 2021 01:22:42 +0330https://virgool.ir/DesignersCommunity/9-خطای-شناختی-در-user-research-و-مدیریت-آنها-bms1kqshczlmاز آنجا که ما برای اتخاذ تصمیمات آگاهانه در مورد محصول / تجارت ، بیشتر و بیشتر به تحقیقات کمی و کیفی اعتماد کرده ایم ، مهم است که اطمینان حاصل کنیم داده ها و روشهای جمع آوری آنها با خطاهای شناختی دچار اشتباه نشده است.در این جا 9 مورد از این خطا ها را بازگو کرده ایم1- اثر قاب بندی (framing effect)این اثر یک خطای شناختی است که در آن افراد براساس گزینه های مثبت یا منفی ارائه شده ، در مورد گزینه ها تصمیم میگیرند.در صورتی که به گفتار و کردار خود توجه نکنید در تحقیقات کاربری پرهیز از این خطا دشوار است.به بیان ساده ، افراد به تنهایی گزینه ای را انتخاب نمی کنند. آنها وابستگی زیادی به نحوه ارائه مسائل دارند.نقشه همدلی برای کمک به غلبه بر این خطا با در نظر گرفتن آنچه می بینیم و می شنویم همراه با آنچه انجام می دهیم و می گوییم کمک می کند.مثال :هنگامی که در حال تست نمونه اولیه و یا پرسیدن از کاربران برای تجربه های افراد در مورد محصول هستید باید مراقب نحوه تنظیم سوالات باشید.سوالاتی مانند اینکه در موقع استفاده از محصول چه چیزی را دوست داشتید یا چه چیزی را دوست نداشتید میتواند باعث شود کاربران فقط روی نقاط مثبت یا منفی محصول تمرکز کنند و ممکن است بینش کاذب منفی یا مثبت ایجاد کنید.دو سوال خنثی و بیطرف که در این حالت میشود پرسید این است که آیا می توانید آخرین باری که از محصول استفاده کرده اید را توصیف کنید؟" یا "وقتی از این محصول استفاده می کنید چه حسی دارید؟" این دو سوال میتواند نتایج بیطرفانه بهتری داشته باشند.2-خطای تایید (confirmation bias)این تعصب اغلب هنگامی که ما تحقیق می کنیم ، ظاهر می شود. ما به جای آزمایش یک فرضیه (کار علمی که باید انجام دهیم) سعی داریم آن را ثابت کنیم. سپس ما داده هایی از تحقیق خود را که دقیقاً فرضیه ما را ثابت میکند ، انتخاب می کنیم. این هدف از تحقیق را بی ارزش می کند (و در برخی موارد کاملاً نفی می کند) - ما می خواهیم بدانیم که واقعاً چه اتفاقی می افتد ، نه اینکه از اعتقادات خاص خود حمایت کنیم.ما داده هایی را دوست داریم که فرضیه / اعتقادات موجود ما را تأیید می کند و کسانی را که آنها را به چالش می کشند کنار می گذاریم. این یک شبکه ایمنی تکاملی است که برای محافظت از مغز ما در برابر تهدید اطلاعات مخالف که هویت ما را به چالش می کشد ، در ما برنامه ریزی شده است (ما به عنوان قبیله هایی با عقاید مشترک رشد کرده ایم).مثالیک نمونه معمول این است که یک محقق / مدیر محصول از شرکت کننده بپرسد - "آیا شما تا به حال اقدام X را از طریق برنامه Y انجام داده اید یا فکر کرده اید" ، و شرکت کننده می گوید ، "بله! همیشه!". هورا! شما برنده تمام پولها شده اید و شواهد شما تأیید شده است. کاربران عاشق انجام چنین کاری از طریق برنامه شما هستند. اما در واقعیت ممکن است دور از حقیقت باشد.هنگامی که برای چیزی تأیید / پاسخ مثبت دریافت کردید ، به چندین روش مختلف بررسی کنید. چرا کاربر آن اقدام را انجام داده است؟ آیا به این دلیل بود که گزینه های دیگری نداشتند؟ آیا آنها روند را دوست داشتند؟ در هفته گذشته چند بار این کار را انجام داده اند؟ آیا آنها می توانند مدرکی نشان دهند؟ آیا احتمال دارد که آنها فقط بخواهند شما را راضی کنند؟بهترین راه برای جلوگیری از سوگیری تأیید این است که به طور مداوم در طول فرایند تحقیق ، طرفدار شیطان برای افکار و فرضیه های خود باشید.3-خطای عقب ماندگی(hindsight bias)پس از یک واقعه ، مردم اغلب معتقدند که آنها نتیجه رویداد را قبل از وقوع نتیجه می دانستند . به همین دلیل است که اغلب از آن به عنوان پدیده "من همه چیز را می دانستم" یاد می شود.هنگامی که ما تحقیق می کنیم ، اغلب از کاربران می خواهیم که در گذشته خود جستجو کنند تا نمونه ها و شواهدی را پیدا کنند. و غالباً وقتی به عمق چرایی می پردازیم ، چندین دلیل درباره چگونگی مواجهه آنها با مشکلات خاص / انجام اقدامات خاص می شنویم.برای مثال بعد از شرکت در یک بازی بیس بال ، ممکن است اصرار داشته باشید که می دانید تیم برنده از قبل برنده خواهد شد. مثالیک کاربر از عدم فروش خوب خود با توجه به کسب و کارهای اینترنتی شکایت داشت و میگفت با ورود کسب و کارهای اینترنتی فروشی من دیگر ندارم.بنابراین وقتی من پرسش متقابل را مطرح کردم که چرا او وارد کسب و کار اینترنتی نمی شود ، یک پاسخ کاملاً شگفت آور دریافت کردم"وب سایت ها به خوبی از مشتریان مراقبت نمی کنند و در صورت وجود هرگونه آسیب یا مشکلی در محصول ما ، بر نام ما تأثیر منفی میگذارد "این یک نشانه واضح بود که او واقعاً از نحوه کار تجارت الکترونیکی و این واقعیت که مشتریان گزینه بازگشت کالاهای آسیب دیده و بازبینی به فروشندگان را داشتند ، آگاهی نداشت.هرگز نمی توان مشتریان را به دلیل طرح چنین دلایلی سرزنش کرد ، اما برای مصاحبه کنندگان بسیار مهم است که از آنها آگاهی داشته باشند و دائماً شواهد را برای تأیید اظهارات خود بررسی کنند.4- مطلوبیت اجتماعی(Social Desirability Bias)ما انسان های اجتماعی هستیم و این بدان معناست که اعمال و گفتارهای ما به گونه ای ارائه می شود که در میان دیگران ظاهر خوبی داشته باشیم ، حتی اگر نادرست باشد. این امر چنان ریشه در رفتار ما دارد که حتی با بی احترامی به کسانی که از این هنجارها پیروی نمی کنند ، ضد اجتماعی می گوییم.مثالاین تعصب به ویژه هنگامی مطرح می شود که شما در مورد موضوعی تحقیق کنید که دارای یک سرمایه اجتماعی مرتبط است (رسانه های اجتماعی ، سیستم عامل های آنلاین ، خدمات خواستگاری و غیره).یک کاربر میانسال در شبکه های اجتماعی که می خواهد تصویری از یک رهبر با علم را در میان خانواده خود به تصویر بکشد, هرگز چیزی ارسال نمی کند یا چیزی را بیان نمی کند که ممکن است آن تصویر را مختل کند ، و از این رو حتی اگر مشکلی در استفاده داشته باشد و به سختی بتواند از طریق برنامه پیمایش کند ، ممکن است از آن شکایت نکند. یک محقق ماهر تلاش می کند سوالات را به گونه ای تنظیم کند که مطلوبیت اجتماعی آن فرد را افزایش دهد (به عنوان مثال: اگر می توانستید این را برای پدر / مادر خود بهتر طراحی کنید ، چه کاری انجام می دهید؟) این می تواند سرنخی را درباره موضوعاتی که واقعاً آزار دهنده هستند اما هرگز در مورد آنها صحبت نمی کنند ، بیان کند.5-دThe Sunk Cost Fallacy یکی از رایج ترین تعصبات میباشد, نه تنها در تحقیقات بلکه در انتخاب های عمده زندگی (ازدواج / بدهی و غیره) خسارات زیادی به بار می آورد.تصور غلط: شما بر اساس ارزش آینده اشیا، سرمایه گذاری ها و تجارب تصمیم های منطقی می گیرید.حقیقت: تصمیمات شما آلوده به سرمایه گذاری های احساسی است که جمع می کنید ، و هرچه بیشتر روی چیزی سرمایه گذاری کنید ترک آن سخت تر می شود.مثالما به عنوان محقق ، وقت زیادی را صرف انجام تحقیقات و جمع آوری داده ها می کنیم. در طی یک دوره زمانی ، این داده ها می توانند به جای مفید بودن به یک انبار اطلاعات تبدیل شوند. با مشاهده این یافته ها ، ما می توانیم به راحتی گم شویم و تصویر بزرگتری از آنچه واقعاً برای دستیابی و ارائه آن نیاز داریم را از دست بدهیم.برای جلوگیری از این خطا، مهم است که تلاشها و پاداشهای خود را متعادل کنیم. این به این معنی است که پس از هر تحقیق یک بازنگری کرده و یک سری موارد که به ما در تحقیق زیاد کمک نمیکند حذف کنیم.روش Lean Startupبه نوعی در راستای این هدف است در واقع در این روش گفته میشود با آزمایش های کوچک و عینی درطول فرایند به جای صرف وقت و تلاش زیاد بیهوده به نتیجه ای بهتر برسیم.6-اثر موقعیت سریال(Serial-Position Effect)اثر موقعیت سریال ، گرایش فرد به یادآوری اولین و آخرین مورد از سری بهترین و موارد میانی بدترین است.مثال:در کارهایی مانند مرتب سازی کارت ، این اشتباه می تواند منجر به حذف یا نادیده گرفتن کارت های میانی توسط کاربران شود ، که ممکن است اثربخشی فعالیت / آزمایش را مختل کند.یک راه خوب برای عملکرد بهتر این است که کارت هارا به قطعات کوچکتر تقسیم کنید و یا ترتیب را چند بار تصادفی کنید تا خطای ایجاد نشود.7-توهم شفافیت (The illusion of transparency)بیشتر اوقات افراد توقع دارند با استفاده از حالت روحی اشان یا زبان بدن اشان شما تشخیص دهید که فرد چه حسی دارد که این مورد مطمئنا سخت است حتی برای یک آدمی که به طور کامل میشناسید.مثالدر مصاحبه ها ، بسیاری از شرکت کنندگان سعی دارند احساسات خود را از طریق زبان بدن ، مکث و نشانه های غیرکلامی دیگر منتقل کنند. و آنها فکر میکنند که توانسته اند موضوع خود را به خوبی منتقل کنند.به همین دلیل ارائه بازخورد مثبت از اهمیت برخوردار است. میتوانید در این مواقع از شرکت کننده بپرسید: "بنابراین از آنچه شما گفتید احساس می کنم در مورد این ویژگی چنین احساسی دارید ، اگر اشتباه می کنم معذرت میخوام."غالباً تعجب خواهید کرد اگر بدانید که هر آنچه آنها در وهله اول گفته اند توسط شما کاملاً متفاوت تفسیر شده است.8-خطای تعصب ضمنی ( Implicit Bias )این خطا که به عنوان شناخت اجتماعی ضمنی نیز شناخته می شود ، به نگرش ها یا کلیشه هایی اشاره دارد که به طور ناخودآگاه براعمال و تصمیمات ما تأثیر می گذارند. این خطا ها ، که شامل ارزیابی های مطلوب و نامطلوب است ، به صورت غیرارادی و بدون آگاهی فعال می شوند.مثالیکی از برجسته ترین نمونه های خطای ضمنی این است که افسران پلیس سیاه پوستان را به جرم و جنایت متهم می کنند بدون اینکه متوجه شوند این کار را انجام میدهند.در چارچوب تحقیقات کاربر ، این امر ممکن است هنگامی اتفاق بیافتد که با افرادی از گروههای جمعیتی ، نژادی یا قومی خاصی صحبت کنیم که قبلاً درباره آنها تصوراتی داشته ایم, این می تواند ما را به رفتارهای خاصی سوق دهد که ممکن است کاملاً ضروری نباشد (مانند مودب بودن بیش از حد نسبت به افراد معلول در صورتی که ترجیح می دهند مانند یک فرد عادی با آنها رفتار شود). یک روش خوب برای اجتناب از این امر این است که قبل از مصاحبه ، قبل از گفتگو با فرد ، تمام نکات و ایده های پیش فرض را در مورد خودتان بنویسید.مهم است که همیشه به یاد داشته باشیم که به عنوان یک محقق خوب ، وظیفه ما این نیست که از نظر اجتماعی جذاب باشیم و یا با کاربران خود دوست شویم بلکه واقعاً درک کنیم که درون ذهن آنها چه می گذرد و چگونه آنها فکر می کنند.9-خطای انتساب اساسی (Fundamental Attribution Error)با این خطا ، ما معتقد هستیم که دیگران کارهای بدی انجام می دهند زیرا افراد بدی هستند. ما تمایل داریم عوامل موقعیتی را که ممکن است نقشی داشته باشند نادیده بگیریم.مثالوقتی تست های کاربردی را انجام می دهید و می شنوید که یک کاربر در مورد "اشتباه" انجام دادن یک کار خاص صحبت می کند ، توجه کنید! این ممکن است بزرگترین سرنخ برای ایجاد یک محصول / تجربه بهتر باشد.محصولات واقعا خوب باعث می شوند کاربر کمتر فکر کند و کارهای بیشتری انجام دهد.یک راه خوب برای جلوگیری از این خطا ، تکمیل مصاحبه ها با مشاهدات / heatmap است. آنها گزارش بهتری از نحوه استفاده کاربران از محصول و نوع خطاهایی که به دلیل طراحی ضعیف مرتکب می شوند ، ارائه می دهند. در بین متخصصان اما به عنوان محقق ، باید با این مفهوم مبارزه کنیم. محصولات و منحنی های یادگیری آنها باید به گونه ای طراحی شود که حتی یک مبتدی بتواند آنها را با چند بار تلاش انتخاب کند و در صورت عدم موفقیت احساس گناه نکند.به طور خلاصه میتوان گفت 1-Framing effect:چارچوب پرسش ها می تواند پاسخ ها را تحت تأثیر قرار دهد2-Confirmation Bias:انسانها فقط به دنبال مدارکی هستند که فرضیه خود را تأیید کنند3-Hindsight Bias:انسانها همیشه دلایل عمل خود را در گذشته می یابند4-Social Desirability Bias:انسان ها تمایل دارند به گونه ای صحبت کنند که ظاهر خوبی داشته باشند5-Sunk Cost Fallacy:انسانها تمایل دارند بیشتر از آنچه که باید ضرر کنند و به ضررهای خود ادامه دهند6-Serial-Position Effect:انسانها تمایل دارند برای موارد انتهای / ابتدای لیست ها ارزش بیشتری قائل شوند7-Illusion of transparency:انسانها تمایل دارند تا حدی که دیگران می دانند چه فکری می کنند ، بیش از حد تخمین بزنند8-Implicit Bias:انسان ها در مورد گروه های خاص و رفتار آنها ارتباطات ضمنی دارند9-Fundamental Attribution Error:انسانها تمایل دارند که خطاها را به خصوصیات داخلی نسبت دهند حتی اگر موقعیتی باشد / ناشی از نیروهای خارجی باشدامیدوارم این مقاله را دوست داشته باشید هر جایی صحبتی دارید خوشحال میشم بشنوممنابع :https://uxdesign.cc/10-cognitive-biases-to-avoid-in-user-research-and-how-to-avoid-them-993aa397c8c6https://www.verywellmind.com/what-is-a-hindsight-bias-2795236https://en.wikipedia.org/wiki/Illusion_of_transparencyhttps://ethicsunwrapped.utexas.edu/glossary/fundamental-attribution-errorlida babaielida babaieFri, 20 Nov 2020 19:22:39 +0330https://virgool.ir/DesignersCommunity/اصول-استفاده-از-responsive-grids-mwdngydjneejگرید ها روشی برای هم ترازی سیستماتیک، نظم بخشیدن ، ایجاد سلسله مراتب و "منطق" طراحی های طرح های شما هستند. این امر باعث می شود همه چیز کمتر شناور به نظر برسد ومنظم و زیباتر به نظر برسند و به طور کلی می توانید با نگاه به طرح ها بگویید چه کسی از گرید به درستی استفاده نمی کند. با تبدیل شدن افراد به طراحان بهتر ، چشمان آنها دائماً در همه جا خطوط افقی و عمودی می کشند تا این نظم و تراز را ایجاد کنند و طرح قدرتمند را تشخیص دهند.مطمئنا همه شما میدانید که چرا باید از گرید ها در طراحی استفاده کنید اما تا به حال به این فکر کرده اید نحوه استفاده درست از این گریدها چگونه میباشد؟بهتر است در ابتدا آناتومی گرید را توضیح دهیم.Field Elementsبلوک های طراحی شما هستند که میتواند شامل عکس, متن و یا هر المان دیگری باشداسامی دیگر مثل units, elements, parent containers هم به همین معنی استفاده میشود.Columnsستون‌ها خط های ضخیم رنگی هستند که عرض محتوای شما را تشکیل میدهند. المان های طراحی شما روی تعداد مشخصی از ستون ها قرار میگیرند به طور سنتی عرض ستون ها در یک سیستم طراحی تغییر نمیکند اما تعداد ستون ها در سیستم‌های مختلف عوض میشود در رایانه ها 12 ستون، در موبایل 4 و در تبلت به 8 ستون تغییر میکند .شما از هر اندازه ستون میتوانید برای طراحی خود استفاده کنید که این اندازه بین 60 تا 80 پیکسل است اما انتخاب بهترین عرض خیلی مهم است چون عرض محتوای شما را در برمیگرد و به طرح شما زیبایی میدهد.Guttersگاتر به فاصله بین ستون ها گفته میشود که اندازه رایج آن 20 پیکسل میباشد. استفاده از این فضای سفید باعث خواناییِ بهتر المانهای صفحه طراحی شما میشود .این اندازه زمانی که میخواهید یک masonry design یا گالری تصاویر طراحی کنید خیلی مهم است .Side marginsبا عنوان outside gutters هم شناخته میشوند در واقع حاشیه های جانبی برای طراحی بهتر شما هستند که از این حاشیه ها به وفور در طراحی هایتان استفاده میکنید.حال که با عبارات پایه آشنا شدیم بهتر است ببینیم چگونه باید ازگرید ها استفاده کرد البته این نکته هم مد نظر داشته باشیم این قوانین بایدی ندارند و فقط برای دیزاین تمیزتر به ما کمک میکنند.قرار گیری المان های صفحه روی تعدادی از ستونهامحتوای شما باید روی تعداد مشخصی از ستون ها قرار بگیرند حال به هر نحوی که دوست دارید در مثال زیر کارت ها در ستون های 3 تایی ,6 تایی ,4 تایی قرارگرفته اند .ممکنه با خودتان بگوید به این صورت محتوای ما خیلی بهم نزدیک میشوند(و قانون فضای سفید نقض میشود) و ممکن است در نگاه اول بهم ریخته نشان داده شوند.اما برا اینکه نظم خود را رعایت کنیم میتوانیم به صورت زیر طراحی کنیم.در تصویر در واقع محتوای 3*3 و منظمی را داریم که هر ستون یک حاشیه نامرئی دارد جهت نظم بهتر و پیروی از این قانون و میتوانید این موضوع را با برنامه نویس خود به راحتی درمیان بزارید.ببینید تصویر چقدر تمیز و مرتب میباشد.محتوی را به صورت مرتب روی ستون ها قرار دهید محتوا را بین خطوط سفید رها نکنیدنیازی نیست همه المان ها قوانین گرید را رعایت کنند فقط کافی است المان مادر از قانون گرید پیروی کندکارت اصلی روی ستون ها قرار گرفته اگر هیچ دلیلی برای جایگذاری المان ها خارج از حاشیه ها ندارید این کار را نکنیدفکر نکنید صفحه مرورگر یک بوم نقاشی است که میتوانید هر محتوایی را در هر جایی از صفحه قرار دهید محتوای مهم و کلیدی باید در حاشیه درست صفحه قرار بگیرندحالا ببینیم ریسپانسیو چگونه کار میکند و چند نوع داریم؟تا این جا قسمت های مختلف گرید و نحوه استفاده صحیح را یاد گرفتیم ببینیم انواع ریسپانسیو توی مرورگر ها چگونه کار میکنند.توی طراحی سنتی عرض ستون ها و گاتر ثابت میماند و فقط تعداد ستون ها در دستگاه های مختلف تغییر میکند.حال چرا ؟به این دلیل که کار برای طراحان راحتر میشود.برای مثال فکر کنید صفحه ای برای دسکتاپ که شامل سه کارت در سطر اول میباشد طراحی کرده اید حال اگر همین صفحه در تبلت نمایش یابد دو کارت در سطر اول و کارت سوم در سطر دوم نمایش می یابد و اگر در موبایل باشد در هر سطر یک کارت نمایش میدهید.Fixed Gridاگر برنامه نویس شما از این حالت برای تغییر اندازه استفاده کند با هر تغییر اندازه و نزدیک شدن به نقاط شکست ,یک سری حاشیه دور متن و تصاویر شما به وجود می آید در این حالت تصاویر به صورت داینامیک تغییر اندازه نمیدهند در واقع با تغییر اندازه مرورگر تصاویر و متن ها به صورت ثابت در صفحه میباشند.Fluid gridدر این حالت انگار تصاویر و متن ها در صفحه به صورت سیال هستند و با هر تغییر اندازه مرورگر اندازه متن و تصویر هم عوض میشود.سایت Airbnb این حالت را بخوبی ایجاد کرده است Hybrid Gridsهمچنین میتوانید از هر دو نمونه ثابت و سیال به صورت ترکیبی استفاده کنید اصولا بیشتر سایت ها به صورت ثابت طراحی میشوند و در موبایل به صورت سیال ,چون استفاده افراد از موبایل بیشتر استسیستم های گرید جالب!!این سیستم ها درسته از قوانین ستون و گاتر که در بالا گفتیم استفاده نکرده اند اما با یک قاعده خیلی خوب این قوانین را تحت سیستم خود پیاده کرده اند .Invision’s Genome Projectاین سایت نه تنها واقعاً خوب طراحی شده است ، بلکه در واقع از نمایش سیستم گرید خود در طراحی استفاده می کند تا حتی زیباتر به نظر برسد. در این سیستم هیچ گاتری وجود ندارد و 8 ستون ضخیم وجود دارد.حتما به این سایت سر بزنید قسمت جذاب منوی سایت را ببینید.Dropbox Designدر این سیستم هیچ حاشیه جانبی و گاتری تعریف نمیشود.در عوض صفحه به دو قسمت تقسیم میشود.محتوا در این قسمت ها قرار میگیرد و با هر قسمت مثل یک صفحه هنری جداگانه رفتار میشود.در نهایت ....هدف از این پست ارائه برخی راهنمایی ها در چگونگی استفاده از گرید در طراحی ریسپانسیو بود.بهترین کاری که می توانید انجام دهید این است که ببینید سایت های دیگر چگونه عناصر موجود در صفحه خود را تراز می کنند ، شروع به دیدن الگوها کنید.دیزاین سیستم های زیر میتونه برای درک بهتر این موضوع کمک کنه.Google’s Material Design SystemIntuit’s Design SystemIBM’s Carbon Design System…And here’s huge list of other systems you can look throughپس از درک کامل نحوه کار شبکه ها ، شما یک طراح بهتری میشوید . من همچنین طراحی تمیزتر و تمیزتر می شود که در صورت داشتن جریانی که از صفحه ای به صفحه دیگر می رود ، محصول نهایی را با کیفیت بالا می برد. بهتره سیستم گریدی پیدا کنید که برای شما و تیم توسعه اتان مناسب باشد و اطمینان حاصل کنید که همه طراحان یک تیم از گرید به همین روش استفاده می کنند.امیدوارم این مقاله براتون مفید بوده باشه منبع :https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01https://designsystemsrepo.com/design-systems/lida babaielida babaieSun, 13 Sep 2020 00:50:40 +0430