[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"post-data-tafavot-ui-va-ux":3,"comments-5":49},{"post":4,"course":18,"related":33},{"id":5,"slug":6,"title":7,"content":8,"excerpt":9,"category":10,"date":11,"readTime":12,"wordCount":13,"image":14,"author":15,"authorRole":16,"authorImg":17,"reviewedBy":18,"tags":19,"relatedCourseSlug":23,"categoryKey":24,"summaryPoints":25,"faq":29,"seoTitle":30,"seoDesc":31,"createdAtIso":32,"updatedAtIso":32,"updatedDate":18},5,"tafavot-ui-va-ux","تفاوت UI و UX چیست؟ راهنمای کامل برای شروع طراحی","\n\u003Cp>اگر تازه وارد دنیای طراحی دیجیتال شده‌اید، احتمالاً این دو مخفف را همیشه کنار هم دیده‌اید: \u003Cstrong>UI\u002FUX\u003C\u002Fstrong>. آن‌قدر با هم می‌آیند که خیلی‌ها فکر می‌کنند یک چیزند. ولی این دو، دو تخصص کاملاً متفاوت با ابزارها، مهارت‌ها و حتی شخصیت‌های شغلی متفاوت‌اند. اشتباه گرفتنشان باعث می‌شود آدم‌ها سال‌ها در مسیری تلاش کنند که اصلاً مناسبشان نبوده.\u003C\u002Fp>\n\n\u003Cp>در این مقاله تفاوت را با مثال‌های ملموس روشن می‌کنیم، می‌گوییم هرکدام چه مهارت‌هایی می‌خواهد، و کمک می‌کنیم تشخیص بدهید کدام‌یک به شیوه‌ی فکر کردن شما نزدیک‌تر است.\u003C\u002Fp>\n\n\u003Ch2>ساده‌ترین تعریف: خانه و نقشه‌ی خانه\u003C\u002Fh2>\n\n\u003Cp>فرض کنید قرار است یک خانه ساخته شود.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>طراح UX\u003C\u002Fstrong> کسی است که تصمیم می‌گیرد آشپزخانه کجا باشد، چند اتاق لازم است، در ورودی به کدام سمت باز شود و چرا حمام نباید مستقیماً به پذیرایی راه داشته باشد. او با رفتار آدم‌ها سروکار دارد: چه مسیری را بیشتر طی می‌کنند، کجا گیر می‌کنند، چه چیزی آزارشان می‌دهد.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>طراح UI\u003C\u002Fstrong> کسی است که تصمیم می‌گیرد رنگ دیوارها چه باشد، دستگیره‌ها چه شکلی داشته باشند، نورپردازی چطور باشد و همه‌ی این‌ها کنار هم چه حسی بدهند. او با ظاهر و حس بصری سروکار دارد.\u003C\u002Fp>\n\n\u003Cp>حالا نکته‌ی مهم: \u003Cstrong>یک خانه‌ی زیبا با نقشه‌ی بد، خانه‌ی بدی است.\u003C\u002Fstrong> و یک نقشه‌ی عالی با دیوارهای زشت و نور بد هم کسی را جذب نمی‌کند. برای همین این دو تخصص همیشه کنار هم می‌آیند.\u003C\u002Fp>\n\n\u003Ch2>UX یعنی چه؟ (تجربه‌ی کاربری)\u003C\u002Fh2>\n\n\u003Cp>UX مخفف \u003Cem>User Experience\u003C\u002Fem> است. کار طراح UX این است که مطمئن شود کاربر می‌تواند کاری را که آمده انجام بدهد، بدون سردرگمی و بدون عصبانیت.\u003C\u002Fp>\n\n\u003Cp>این شغل بیشتر از آنکه «طراحی» باشد، \u003Cstrong>حل مسئله و تحقیق\u003C\u002Fstrong> است. یک طراح UX معمولاً این کارها را انجام می‌دهد:\u003C\u002Fp>\n\n\u003Cul>\n  \u003Cli>\u003Cstrong>تحقیق کاربر:\u003C\u002Fstrong> با آدم‌های واقعی حرف می‌زند تا بفهمد مشکلشان واقعاً چیست، نه اینکه حدس بزند.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>ساخت پرسونا:\u003C\u002Fstrong> تصویر مشخصی از مخاطب می‌سازد تا تصمیم‌ها بر اساس یک آدم واقعی گرفته شود، نه «کاربر» انتزاعی.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>طراحی مسیر کاربر:\u003C\u002Fstrong> مشخص می‌کند کاربر از کجا شروع می‌کند و با چند قدم به هدفش می‌رسد. هر قدم اضافه یعنی درصدی ریزش.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>وایرفریم:\u003C\u002Fstrong> اسکلت خاکستری و بدون رنگِ صفحه را می‌کشد تا فقط روی ساختار تمرکز شود.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>تست کاربری:\u003C\u002Fstrong> طرح را جلوی چند نفر می‌گذارد و نگاه می‌کند کجا گیر می‌کنند. این مرحله بیشترین چیز را به طراح یاد می‌دهد.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cblockquote>مثال ملموس: وقتی در یک فروشگاه اینترنتی برای خرید یک کالای ساده مجبورید اول حساب بسازید، ایمیل را تأیید کنید و بعد آدرس بدهید — این یک مشکل UX است، نه مشکل رنگ و فونت. و همین یک مورد می‌تواند بخش بزرگی از خریدها را از بین ببرد.\u003C\u002Fblockquote>\n\n\u003Ch2>UI یعنی چه؟ (رابط کاربری)\u003C\u002Fh2>\n\n\u003Cp>UI مخفف \u003Cem>User Interface\u003C\u002Fem> است: هر چیزی که کاربر می‌بیند و با آن تعامل می‌کند. دکمه‌ها، رنگ‌ها، فونت‌ها، فاصله‌ها، آیکون‌ها و انیمیشن‌ها.\u003C\u002Fp>\n\n\u003Cp>کار طراح UI این است که آن اسکلت خاکستری را به چیزی تبدیل کند که هم زیبا باشد، هم قابل استفاده، هم با هویت برند بخواند. مهارت‌هایش:\u003C\u002Fp>\n\n\u003Cul>\n  \u003Cli>\u003Cstrong>سیستم طراحی:\u003C\u002Fstrong> مجموعه‌ای از قواعد و اجزای تکرارشونده می‌سازد تا کل محصول یکدست بماند و هر صفحه سلیقه‌ای طراحی نشود.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>تایپوگرافی:\u003C\u002Fstrong> انتخاب فونت و تنظیم اندازه، وزن و فاصله‌ی خطوط. در فارسی این کار سخت‌تر است چون فونت‌های باکیفیت کمتری وجود دارد و مسئله‌ی راست‌به‌چپ هم اضافه می‌شود.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>رنگ و کنتراست:\u003C\u002Fstrong> نه فقط زیبایی — کنتراست کافی یک الزام دسترس‌پذیری است. متن خاکستری روشن روی پس‌زمینه‌ی سفید برای خیلی‌ها اصلاً خوانا نیست.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>سلسله‌مراتب بصری:\u003C\u002Fstrong> اینکه چشم کاربر اول کجا برود و بعد کجا. این با اندازه، رنگ و فضای خالی کنترل می‌شود.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>حالت‌های مختلف:\u003C\u002Fstrong> یک دکمه فقط یک حالت ندارد؛ حالت عادی، هاور، فشرده، غیرفعال و در حال بارگذاری هم باید طراحی شود.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>جدول تفاوت‌ها در یک نگاه\u003C\u002Fh2>\n\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\u003Cth>معیار\u003C\u002Fth>\u003Cth>طراح UX\u003C\u002Fth>\u003Cth>طراح UI\u003C\u002Fth>\u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\u003Ctd>سوال اصلی\u003C\u002Ftd>\u003Ctd>آیا کار می‌کند؟\u003C\u002Ftd>\u003Ctd>آیا درست به نظر می‌رسد؟\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>جنس کار\u003C\u002Ftd>\u003Ctd>تحقیق، تحلیل، ساختار\u003C\u002Ftd>\u003Ctd>بصری، زیبایی‌شناسی، جزئیات\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>خروجی\u003C\u002Ftd>\u003Ctd>وایرفریم، مسیر کاربر، گزارش تست\u003C\u002Ftd>\u003Ctd>طرح نهایی، سیستم طراحی، پروتوتایپ\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>مهارت کلیدی\u003C\u002Ftd>\u003Ctd>همدلی و تفکر سیستمی\u003C\u002Ftd>\u003Ctd>حس بصری و دقت در جزئیات\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>ابزار رایج\u003C\u002Ftd>\u003Ctd>Figma، Miro، Maze\u003C\u002Ftd>\u003Ctd>Figma، Sketch، Illustrator، Photoshop\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>وقتی بد انجام شود\u003C\u002Ftd>\u003Ctd>کاربر گیج می‌شود و می‌رود\u003C\u002Ftd>\u003Ctd>محصول بی‌اعتبار و ارزان به نظر می‌رسد\u003C\u002Ftd>\u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003Ch2>کدام یک مناسب شماست؟\u003C\u002Fh2>\n\n\u003Cp>به‌جای اینکه بپرسید کدام «بهتر» است، از خودتان این سوال‌ها را بپرسید:\u003C\u002Fp>\n\n\u003Ch3>احتمالاً به UX نزدیک‌ترید اگر…\u003C\u002Fh3>\n\u003Cul>\n  \u003Cli>وقتی از یک اپلیکیشن بدی استفاده می‌کنید، ناخودآگاه در ذهنتان بازطراحی‌اش می‌کنید.\u003C\u002Fli>\n  \u003Cli>از حرف زدن با آدم‌ها و فهمیدن دلیل رفتارشان لذت می‌برید.\u003C\u002Fli>\n  \u003Cli>حوصله‌ی داده و نمودار و تست کردن فرضیه را دارید.\u003C\u002Fli>\n  \u003Cli>برایتان مهم‌تر است که چیزی «کار کند» تا اینکه «قشنگ باشد».\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch3>احتمالاً به UI نزدیک‌ترید اگر…\u003C\u002Fh3>\n\u003Cul>\n  \u003Cli>وقتی چیزی از نظر بصری ایراد دارد فوراً متوجه می‌شوید و می‌توانید بگویید چرا.\u003C\u002Fli>\n  \u003Cli>از کار کردن روی جزئیات ریز — دو پیکسل فاصله، یک درجه تغییر رنگ — خسته نمی‌شوید.\u003C\u002Fli>\n  \u003Cli>به فونت، ترکیب‌بندی و رنگ حساسیت دارید.\u003C\u002Fli>\n  \u003Cli>دیدن خروجی زیبای نهایی برایتان انگیزه می‌سازد.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>اگر هنوز مطمئن نیستید، \u003Ca href=\"\u002Ftalent\">آزمون استعدادیابی رایگان داناورس\u003C\u002Fa> در ۱۸ سوال نیمرخ شما را در شش بُعد — از جمله «خلاقیت بصری» و «حل مسئله» — می‌سنجد و مسیر محتمل‌تر را پیشنهاد می‌دهد.\u003C\u002Fp>\n\n\u003Ch2>از کجا شروع کنم؟\u003C\u002Fh2>\n\n\u003Cp>یک نکته‌ی مهم: خیلی‌ها فکر می‌کنند باید اول تئوری UX را کامل بخوانند و بعد سراغ ابزار بروند. تجربه خلاف این را نشان می‌دهد. \u003Cstrong>وقتی چیزی نساخته‌اید، اصول UX برایتان انتزاعی و فراموش‌شدنی است.\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>مسیر پیشنهادی ما:\u003C\u002Fp>\n\n\u003Col>\n  \u003Cli>\u003Cstrong>یک ابزار بصری را یاد بگیرید و با آن چیزی بسازید.\u003C\u002Fstrong> حتی یک صفحه‌ی ساده. این کار مفاهیم را از ذهنی به عملی تبدیل می‌کند.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>یک اپلیکیشن موجود را بازطراحی کنید.\u003C\u002Fstrong> چیزی که هر روز استفاده می‌کنید و از بخشی از آن بدتان می‌آید. این بهترین تمرین اول است چون مسئله از قبل وجود دارد.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>طرحتان را به سه نفر نشان بدهید و ساکت بمانید.\u003C\u002Fstrong> فقط نگاه کنید کجا مکث می‌کنند. این اولین تست کاربری واقعی شماست و بیشتر از ده مقاله به شما یاد می‌دهد.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>تکرار کنید.\u003C\u002Fstrong> پورتفولیو با سه پروژه‌ی واقعی و مستند، ارزشش از ده گواهی‌نامه بیشتر است.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Ch2>واقعیت بازار کار ایران\u003C\u002Fh2>\n\n\u003Cp>در آگهی‌های استخدام ایران معمولاً یک نفر برای هر دو نقش استخدام می‌شود؛ عنوان شغلی «طراح UI\u002FUX» رایج‌ترین حالت است. یعنی در عمل باید هر دو را در حد قابل قبول بلد باشید، ولی بهتر است در یکی عمیق‌تر شوید.\u003C\u002Fp>\n\n\u003Cp>نکته‌ی عملی: \u003Cstrong>پورتفولیو تعیین‌کننده‌تر از رزومه است.\u003C\u002Fstrong> کارفرما در مصاحبه معمولاً می‌پرسد «چرا این تصمیم را گرفتی؟» — و اگر فقط طرح زیبا داشته باشید بدون توانایی توضیح منطق پشتش، همان‌جا متوقف می‌شوید. برای همین هر پروژه‌ی پورتفولیو باید یک توضیح کوتاه داشته باشد: مسئله چه بود، چه گزینه‌هایی را بررسی کردید، چرا این را انتخاب کردید.\u003C\u002Fp>\n\n\u003Ch2>جمع‌بندی\u003C\u002Fh2>\n\n\u003Cp>UX ساختار و منطق است؛ UI ظاهر و حس. اولی تصمیم می‌گیرد چه چیزی کجا باشد، دومی تصمیم می‌گیرد آن چیز چطور به نظر برسد. هیچ‌کدام بدون دیگری محصول خوبی نمی‌سازد.\u003C\u002Fp>\n\n\u003Cp>اگر می‌خواهید از سمت بصری شروع کنید، \u003Ca href=\"\u002Fcourses\u002Fphotoshop\">دوره‌ی فتوشاپ\u003C\u002Fa> نقطه‌ی شروع استانداردی است و بیشترین تقاضا را در بازار ایران دارد. اگر مستقیماً طراحی رابط کاربری هدفتان است، \u003Ca href=\"\u002Fcourses\u002Fsketch\">دوره‌ی طراحی رابط کاربری\u003C\u002Fa> از همان ابتدا روی اصول UI و پروتوتایپ تمرکز دارد. برای کار روی لوگو و تصویرسازی هم \u003Ca href=\"\u002Fcourses\u002Fillustrator\">دوره‌ی ایلاستریتور\u003C\u002Fa> مسیر درستی است.\u003C\u002Fp>\n\n\u003Cp>و اگر هنوز بین این مسیرها مردد هستید، قبل از پرداخت هر هزینه‌ای \u003Ca href=\"\u002Ftalent\">آزمون استعدادیابی\u003C\u002Fa> را بدهید یا با \u003Ca href=\"\u002Fcontact\">مشاوران داناورس\u003C\u002Fa> صحبت کنید. مشاوره رایگان است و هدفش این است که وقتتان را در مسیر اشتباه هدر ندهید.\u003C\u002Fp>\n  ","اگر تازه وارد دنیای طراحی دیجیتال شده‌اید، احتمالاً این دو مخفف را همیشه کنار هم دیده‌اید: UI\u002FUX . آن‌قدر با هم می‌آیند که خیلی‌ها فکر می‌کنند یک چیزند. ولی این دو، دو تخصص کاملاً ...","طراحی و UI\u002FUX","۳۱ شهریور ۱۴۰۵","۶ دقیقه",1174,"\u002Fimages\u002Fblog\u002Ftafavot-ui-va-ux.jpg","تیم تولید محتوای داناورس","مدرس و کارشناس آکادمی","\u002Fimages\u002Flogo-light.png",null,[20,21,22],"طراحی رابط کاربری","UI\u002FUX","داناورس","sketch","design",[26,27,28],"UX یعنی تجربه‌ی کاربری: ساختار، منطق و مسیر کاربر؛ UI یعنی رابط کاربری: ظاهر، رنگ، فونت و جزئیات بصری.","طراح UX بیشتر تحقیق و حل مسئله می‌کند و طراح UI طرح نهایی و سیستم طراحی می‌سازد؛ هیچ‌کدام بدون دیگری محصول خوبی نمی‌سازد.","در ایران معمولاً یک نفر برای هر دو نقش استخدام می‌شود؛ پس باید هر دو را در حد قابل قبول بلد باشید و در یکی عمیق‌تر شوید.",[],"تفاوت UI و UX چیست؟ راهنمای کامل شروع طراحی","تفاوت طراحی UI و UX با مثال‌های ملموس: هرکدام چه کاری می‌کنند، چه مهارتی می‌خواهند، کدام مناسب شماست و از کجا باید شروع کرد.","2026-09-22T19:22:25.738268+00:00",[34,39,44],{"path":35,"title":36,"desc":37,"image":38},"\u002Flearning\u002Fdore-tarahi-graphic","دوره طراحی گرافیک: از کجا شروع کنیم، چه نرم‌افزاری یاد بگیریم و دوره‌ی خوب را چطور بشناسیم","قبل از ثبت‌نام در دوره گرافیک بخوانید: مبانی طراحی، کدام نرم‌افزار اول، موشن گرافیک، گرافیک با گوشی و هوش مصنوعی، هزینه و ۸ نشانه‌ی یک دوره‌ی خوب.","\u002Fimages\u002Fblog\u002Fdore-tarahi-graphic.jpg",{"path":40,"title":41,"desc":42,"image":43},"\u002Flearning\u002Famoozesh-photoshop-az-sefr","آموزش فتوشاپ از صفر: نقشه راه قدم‌به‌قدم، ابزارهای اصلی و تمرین","آموزش فتوشاپ از صفر برای مبتدی‌ها: نقشه راه شش‌هفته‌ای، مفهوم لایه و ماسک، ده ابزار پرکاربرد با کلید میان‌بر، تمرین هر مرحله و اشتباه‌های رایج تازه‌کارها.","\u002Fimages\u002Fblog\u002Famoozesh-photoshop-az-sefr.jpg",{"path":45,"title":46,"desc":47,"image":48},"\u002Flearning\u002Fphotoshop-ba-goshi-ya-computer","آموزش فتوشاپ با گوشی یا کامپیوتر؟ جواب صادقانه","با گوشی چه کارهایی در فتوشاپ می‌شود کرد و کجا به بن‌بست می‌خورید؟ حداقل سخت‌افزار لازم و مسیر درست شروع، بدون تعارف.","\u002Fimages\u002Fblog\u002Fphotoshop-ba-goshi-ya-computer.jpg",[]]