Feature/refactor clean code UI ux

docs/frontend/phase03-ui-ux.md

@@ -1,20 +1,27 @@
 ---
 title: UI/UX
-description: Oh, no wait; I'm sorry; That's "pretty dumb".
+description: سفری هیجان‌انگیز در دنیای رابط کاربری و تجربه کاربری.
 tags: [Readonly]
 ---
 
-:::info این فاز، یکی از فازهای `Readonly` است.
+:::info این فاز، یکی از فازهای
+`Readonly`
+است.
 
-به فازهایی `Readonly` می‌گوییم که کارگاهی برای آن‌ها برگزار نمی‌شود و صرفاً برای اموزش به مستندات اکتفا می‌کنیم.
+به فازهایی
+`Readonly`
+می‌گوییم که کارگاهی برای آن‌ها برگزار نمی‌شود و صرفاً برای اموزش به مستندات اکتفا می‌کنیم.
 
 :::
 
 ## مقدمه
 
-معمولاً در پروژه‌های بزرگ، وظیفۀ طراحی بر عهدۀ شخصی به جز توسعه‌دهندۀ فرانت‌اند است.
-اما در خیلی از مواقع ممکن است شما خودتان بخواهید این کار را انجام دهید.
-بنابراین در اینجا مواردی که باید در طراحی به آن‌ها توجه کنید را توضیح می‌دهیم.
+
+فرض کنید یک اپلیکیشن خرید آنلاین داریم که هدف آن فروش محصولات مختلف به کاربران است. یکی از ویژگی‌های کلیدی این اپلیکیشن، نمایش محصولات مشابه است. اگر اپلیکیشن دارای یک طراحی خوب باشد، می‌تواند محصولات مشابه را به صورت واضح و جذاب نمایش دهد.
+
+برای مثال، اگر اپلیکیشن دارای یک بخش "محصولات مشابه" باشد که به صورت واضح و با تصاویر جذاب نمایش داده شود، کاربر می‌تواند به راحتی محصولات مشابه را مشاهده کند و تصمیم خرید را با اطمینان بیشتری بگیرد. همچنین، اگر اپلیکیشن دارای یک فیلتر و مرتب‌سازی مناسب باشد، کاربر می‌تواند به راحتی محصولات را بر اساس قیمت، برند و سایر ویژگی‌ها فیلتر کند و به محصول مورد نظر خود دسترسی پیدا کند.
+
+از سوی دیگر، اگر اپلیکیشن دارای یک طراحی ضعیف باشد، بخش "محصولات مشابه" ممکن است به صورت نامنظم و بدون تصاویر جذاب نمایش داده شود. این می‌تواند باعث شود کاربر نتواند به راحتی محصولات مشابه را مشاهده کند و تصمیم خرید را با اطمینان بیشتری بگیرد. بنابراین، یک طراحی خوب می‌تواند به افزایش رضایت کاربر، بهبود نرخ تبدیل و افزایش وفاداری مشتری کمک کند.
 
 -   تفاوت UI و UX چیست؟
 -   کدام رنگ‌ها هم‌نشینی بهتری با یکدیگر دارند؟
@@ -31,8 +38,14 @@ tags: [Readonly]
 ### تفاوت UI با UX
 
 قطعاً بارها این دو کلمه را در جاهای مختلف شنیده‌اید.
-UI یا User Interface به معنای رابط کاربری، مربوط به المان‌هایی است که کاربر با آن‌ها ارتباط دارد.
-UX یا User Experience به معنای تجربۀ کاربری، مربوط به کیفیتی است که کاربر هنگام استفاده از محصول تجربه می‌کند.
+UI
+یا
+User Interface
+به معنای رابط کاربری، مربوط به المان‌هایی است که کاربر با آن‌ها ارتباط دارد.
+UX
+یا
+User Experience
+به معنای تجربۀ کاربری، مربوط به کیفیتی است که کاربر هنگام استفاده از محصول تجربه می‌کند.
 
 ![UI vs UX](./images/ui-vs-ux.jpg)
 
@@ -52,8 +65,18 @@ UX یا User Experience به معنای تجربۀ کاربری، مربوط ب
 هرگز حجم انبوهی از اطلاعات را در یک مکان کوچک جا ندهید
 چرا که کاربر نمی‌تواند به اندازۀ کافی تمرکز کند و این مسئله برایش عذاب‌آور خواهد بود.
 
-برای ایجاد White Space، راحت‌ترین کار استفاده از `margin` و `padding` است.
-همچنین در flexbox و grid می‌توانید از `gap` استفاده کنید.
+برای ایجاد
+White Space
+، راحت‌ترین کار استفاده از
+`margin`
+و
+`padding`
+است.
+همچنین در
+flexbox و grid
+می‌توانید از
+`gap`
+استفاده کنید.
 
 #### Color
 
@@ -75,7 +98,9 @@ UX یا User Experience به معنای تجربۀ کاربری، مربوط ب
 [Adobe Color](https://color.adobe.com/create/color-wheel)
 را پیشنهاد می‌کنیم.
 ابتدا از سمت چپ، نوع قالب رنگی را مشخص کنید،
-سپس با استفاده از Color Wheel در وسط صفحه، رنگ اصلی را انتخاب کنید.
+سپس با استفاده از
+Color Wheel
+در وسط صفحه، رنگ اصلی را انتخاب کنید.
 مشاهده خواهید کرد که ادوبی، باقی رنگ‌ها را به طور خودکار در اختیار شما قرار می‌دهد.
 
 همچنین از ابزارهای زیر برای ساخت قالب رنگی می‌توانید استفاده کنید:
@@ -100,11 +125,21 @@ Contrast
 به‌عنوان مثال اگر دکمه‌ای داشته باشیم،
 می‌توان تضاد بین رنگ نوشته و رنگ پس‌زمینه را در نظر گرفت.
 
-استانداردی به نام WCAG وجود دارد که بیان می‌کند چه نسبتی بین نوشته و پس‌زمینه باید وجود داشته باشد.
-این استاندارد شامل دو حالت AA و AAA است که حالت دوم رتبه‌بندی بهتری دارد و در صورت امکان باید آن را در نظر گرفت.
+استانداردی به نام
+WCAG
+وجود دارد که بیان می‌کند چه نسبتی بین نوشته و پس‌زمینه باید وجود داشته باشد.
+این استاندارد شامل دو حالت
+AA و AAA
+است که حالت دوم رتبه‌بندی بهتری دارد و در صورت امکان باید آن را در نظر گرفت.
 
-همچینن میزان Contrast به اندازۀ متن نیز وابسته است.
-به‌عنوان مثال در رتبه‌بندی AA اگر اندازۀ متن معمولی باشد، نسبت Contrast باید حداقل 4.5 به 1 باشد؛
+همچینن میزان
+Contrast
+به اندازۀ متن نیز وابسته است.
+به‌عنوان مثال در رتبه‌بندی
+AA
+اگر اندازۀ متن معمولی باشد، نسبت
+Contrast
+باید حداقل 4.5 به 1 باشد؛
 اما اگر اندازۀ متن بزرگ باشد، این نسبت می‌تواند تا 3 به 1 کاهش پیدا کند.
 
 برای بدست آوردن این نسبت می‌توانید از ابزارهای زیر استفاده کنید:
@@ -121,7 +156,9 @@ Contrast
 #### Visual Hierarchy
 
 زمانی که کاربر وارد صفحه می‌شود، با چشمانش المان‌های صفحه را به ترتیب بررسی می‌کند
-که به آن Visual Hierarchy گفته می‌شود.
+که به آن
+Visual Hierarchy
+گفته می‌شود.
 همواره المان‌های مهم‌تر باید رتبۀ بالاتری در این رده‌بندی داشته باشند.
 به‌عنوان مثال تیتر یک صفحه از اهمیت بالایی برخوردار است اما تاریخ نگارش آن ممکن است خیلی مهم نباشد.
 
@@ -135,17 +172,29 @@ Contrast
 #### Alignment
 
 Alignment
-یا تراز بودن، به شدت ارتباط تنگاتنگی با Visual Hierarchy دارد
+یا تراز بودن، به شدت ارتباط تنگاتنگی با
+Visual Hierarchy
+دارد
 و اگر بتوان از این دو به درستی استفاده کرد،
-شاهد یک UI و UX حرفه‌ای خواهیم بود.
+شاهد یک
+UI و UX
+حرفه‌ای خواهیم بود.
 
-المان‌هایی که Contrast بالایی دارند، باید در یک ستون نسبت به المان‌های بالا و پایین خود قرار داشته باشند.
+المان‌هایی که
+Contrast
+بالایی دارند، باید در یک ستون نسبت به المان‌های بالا و پایین خود قرار داشته باشند.
 به این ترتیب می‌توان یک ساختار مشخص ایجاد و به بهبود تمرکز کاربر کمک کرد.
 
 در اکثر مواقع توصیه نمی‌کنیم المان‌ها را به صورت وسط‌چین تنظیم کنید؛
 مگر اینکه فضای کوچکی مانند صفحه نمایش تلفن همراه در اختیار داشته باشید.
-همچنین در موارد محدود می‌توانید Hero Section خود را به این شکل انتخاب کنید.
-اما بیشتر اوقات بهتر است با توجه به RTL یا LTR بودن سایت، همان جهت را برای تراز کردن المان‌ها انتخاب کنید.
+همچنین در موارد محدود می‌توانید
+Hero Section
+خود را به این شکل انتخاب کنید.
+اما بیشتر اوقات بهتر است با توجه به
+RTL
+یا
+LTR
+بودن سایت، همان جهت را برای تراز کردن المان‌ها انتخاب کنید.
 
 برای آشنایی بیشتر با این مفهوم می‌توانید از لینک‌های زیر استفاده کنید:
 
@@ -177,14 +226,23 @@ Alignment
 اما برای اکثر کاربران صرفاً باری اضافه و امتیازی منفی محسوب می‌شود.
 
 از سایه‌ها فقط و فقط در جایی که به آن احتیاج دارید استفاده کنید.
-پیشنهاد می‌کنیم از `border` و `outline` استفاده نکنید،
+پیشنهاد می‌کنیم از
+`border` و `outline`
+استفاده نکنید،
 اما اگر اصرار بر این کار دارید، نوع، اندازه و رنگ آن‌ها باید طوری انتخاب شود که توجه زیادی را از کاربر نگیرد.
-Gradientها فقط زمانی خوب به نظر می‌آیند که بی‌نقص پیاده‌سازی شده باشند؛
-بنابراین در حالت کلی بهتر است از رنگ‌های Solid استفاده کنید.
-
-از طرفی باید دقت کنید که طرح شما Over-simplified نباشد.
+Gradiant
+فقط زمانی خوب به نظر می‌آیند که بی‌نقص پیاده‌سازی شده باشند؛
+بنابراین در حالت کلی بهتر است از رنگ‌های
+Solid
+استفاده کنید.
+
+از طرفی باید دقت کنید که طرح شما
+Over-simplified
+نباشد.
 این اتفاق بر سر بسیاری از لوگوها آمده و کاربران از آن بیزارند.
-همه چیز باید به اندازه باشد تا بهترین UI و UX حاصل شود.
+همه چیز باید به اندازه باشد تا بهترین
+UI و UX
+حاصل شود.
 
 ![Patreon's Logo - Before and After](./images/patreon-logo-before-after.png)
 
@@ -197,5 +255,6 @@ Gradientها فقط زمانی خوب به نظر می‌آیند که بی‌ن
 
 ## پروژه
 
-سایتی که تا اینجا طراحی کرده‌اید را از منظر UI و UX بررسی کنید.
-در صورتی که جایی از سایت مشکلی مشاهده می‌کنید، آن را برطرف کنید.
+سایتی که تا اینجا طراحی کرده‌اید را از منظر
+UI و UX
+بررسی کنید. در صورتی که جایی از سایت مشکلی مشاهده می‌کنید، آن را برطرف کنید.