https://virgool.io/feed/@m_28482125 fa 2026-04-14 08:52:24 https://files.virgool.io/upload/users/1047617/avatar/sWDH8C.png?height=120&width=120 https://virgool.io/@m_28482125 https://virgool.io/@m_28482125/%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85-%DA%A9%D9%84%DB%8C%D8%AF%DB%8C-ui-ux-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%85%D8%AD%D8%B5%D9%88%D9%84-%D8%A8%D9%87-%D8%B2%D8%A8%D8%A7%D9%86-%D8%B3%D8%A7%D8%AF%D9%87-ewfss0xqzvx7 مفاهیم کلیدی UI / UX و طراحی محصول (به زبان ساده)اگه تازه وارد دنیای طراحی محصول شدی یا حس می‌کنی مسیر یادگیریت یه‌کم مبهمه، شناخت این مفاهیم پایه می‌تونه حسابی کمکت کنه.بیاین دونه‌دونه مرورشون کنیم 👇1️⃣ رابط کاربری UI (User Interface)همه چیزهایی که کاربر می‌بینه و باهاشون سر و کار داره: رنگ‌ها، فونت‌ها، دکمه‌ها، آیکن‌ها و چیدمان.UI خوب یعنی محصول تمیز، خوشگل و قابل اعتماد به نظر بیاد.2️⃣ تجربه کاربری UX (User Experience)احساسی که کاربر موقع استفاده از محصول می‌گیره. اینکه کارهاش راحت انجام بشه، گیج نشه و سریع به هدفش برسه.3️⃣ تحقیق و بررسی کاربر User Researchیعنی بریم سراغ کاربر واقعی و بفهمیم چی می‌خواد، چه مشکلی داره و چطور فکر می‌کنه. بدون این مرحله، طراحی بیشتر میشه حدس زدن.4️⃣ وایر فریم Wireframeیه طرح خیلی ساده از صفحه، بدون رنگ و جزئیات. فقط برای اینکه بدونیم هر چیز کجا قرار می‌گیره.5️⃣ طرح تعاملی Prototypeخیلی ساده اش رو بخوام بگم یه نسخه قابل کلیک از طرح. کمک می‌کنه قبل از کدنویسی بفهمیم ایده جواب می‌ده یا نه. ( به مشتری هم خیلی کمک می کنه بتونه قبل از اینکه واسه کد هزینه کنه طرح رو حس کنه و با صفحات ور بره و کار کنه )6️⃣ دیزاین سیستم (سیستم طراحی) Design Systemیه مجموعه از رنگ‌ها، فونت‌ها، کامپوننت‌ها و قانون‌ها. باعث میشه طراحی‌ها یکدست و سریع‌تر جلو برن. همچنین به برنامه نویس ها کمک می کنه تا خیلی سریع مواردی که نیاز دارند مثل رنگ، فونت، اندازه ها رو استفاده کنند و از طرفی مطمئن بشند که در کل پروژه رعایت شده و نیاز نیست هربار چک کنند.7️⃣ تست کاربردپذیری Usability Testingبررسی کاربر و اینکه واقعاً چطور با محصول کار می‌کنه و ایا اصلا میتونه با محصول ارتباط بگیره . هرجایی که گیر کرد، اون نقطه درد کاربره و باید بهبود داده بشه.8️⃣ دسترس پذیری Accessibilityطراحی برای همه؛ حتی کسایی که محدودیت بینایی یا حرکتی دارن. یه محصول خوب، همه رو در نظر می‌گیره. و البته این موضوعی هستش که حتی شرکت ها، استارت اپ ها، محصولات بزرگ خیلی کم بهش اهمیت میدن. معمولا اپل همیشه در این موضوع نسبت به بقیه شرکت ها پیشتاز تره ولی خب همچنان طیف خاصی از کاربران چه در دنیای دیجیتال و چه دنیای واقعی از تمام محصولات به راحتی نمی تونند استفاده کنند.9️⃣ معماری اطلاعات Information Architectureمرتب‌کردن محتوا و بخش‌ها به شکل منطقی. جوری که کاربر راحت چیزی که می‌خواد رو پیدا کنه. هر چی که دیتاها زیاد و گیج کننده باشه کاربر زودتر خسته میشه. ( کاربر الان تربیت شده سوشال مدیاهایی مثل اینستاگرام و ایکس هستش و حال و حوصله کاربرای قدیم دهه 60 رو نداره :)) )🔟طراحی تعاملی Interaction Designرفتار دکمه‌ها و عناصر: کلیک، هاور، انیمیشن و بازخوردها.اینا به محصول جون می‌دن. و البته بخوام خودمونی و ساده اش بگم ادم قراره به سیستم ( کامیپوتر و کلا هر محصولی ) ارتباط برقرار کنه. این ارتباط از طریق 5 حسی که داریم اتفاق میوفته و در دنیای مجازی فقط دو حس بینایی و شنوایی کاربرد داره که این باعث میشه تعامل خیلی سخت تر بشه.1️⃣1️⃣ طراحی واکنش گرا Responsive Designمحصول روی موبایل، تبلت و دسکتاپ درست و حسابی دیده بشه. نه فقط کوچیک بشه، بلکه هوشمندانه تطبیق پیدا کنه. ( امروزه اکثر کاربران شاید 80 درصد به بالا از موبایل و تبلت استفاده می کنند و خیلی از طراحان رابط کاربری ابتدا موبایل رو طراحی می کنند و بعد سراغ نسخه دسکتاپ میرن )1️⃣2️⃣ ارزیابی و اکتشاف Heuristic Evaluationبررسی UX با یه سری چک‌لیست معروف. یه راه سریع برای پیدا کردن مشکل‌ها. یعنی بررسی می کنیم مشکل رو پیدا می کنیم و برای مشکل راه حل می سازیم ( همین نقاط درد و راه حلش باعث رشد یا شکست یک محصول میشه )1️⃣3️⃣ پرسونا ( کاربر خیالی )Personaیه کاربر فرضی که نماینده یه گروه واقعیه. کمک می‌کنه بدونیم دقیقاً برای کی طراحی می‌کنیم. ( یک نظم کلی هم به پروژه میده که هر جاش یه اسم استفاده نکنیم و به عنوان مثال اگه در یک پروژه به 5 تا کاربر نیاز داریم از همونا در همه جای پروژه استفاده کنیم )1️⃣4️⃣ جریان یا مسیر کاربر User Flowمسیری که کاربر از شروع تا رسیدن به هدف طی می‌کنه. هرچی ساده‌تر باشه، تجربه بهتره. ( اینجا است که مسیرهای کور و قفل مشخص میشه، کاربر نباید در یک مسیر به انتها برسه و همیشه باید یه راه حل ، پیشنهاد و ... وجود داشته باشه )1️⃣5️⃣ طراحی اتمی Atomic Designساخت رابط از تیکه‌های خیلی کوچیک تا کل صفحه ( طراحی از جزء به کل )یه روش مرتب برای ساخت UI حرفه‌ای. ( اینطوری همه چیز در نظر گرفته میشه و یک بار کل سیستم طراحی میشه و بعد برای صفحات مختلف اجزاء کنار هم قرار میگرند البته این نباید باعث میشه که خلاقیت زیر سوال بره و همیشه خلاقیت برای ادم خلاق راه ها و ایده های جدید داره :) )اگه واقعا می خوای تو این مسیر رشد کنی، فقط خوندن و آموزش نگاه کردن کافی نیست. برای هر کدوم از این موارد تمرین کن، مثال ببین و سعی کن تو پروژه های کوچیک استفاده شون کنی.یادگیری واقعی از عمل کردن و تمرین کردن و استمرار داشتن میاد ...🚀خوشحال میشم نظرت رو بگی و همچنین اگه دوست داشتی یه سر به کانال تلگرام من بزنیکانال تلگرام من قاسم سبحانی قاسم سبحانی Mon, 02 Feb 2026 19:47:25 +0330 https://virgool.io/Sakkoo/%D8%A7%D9%81%DA%A9%D8%A7%D8%B1-%D9%85%D8%AA%D9%81%D8%A7%D9%88%D8%AA-%D9%85%D9%86-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-unsyy0vtnm3q افکار متفاوت من - قسمت اول عدد 12سلام و درودقاسم سبحانی هستم طراح رابط کاربری و خیلی دوست دارم افکار و دیدگاه های خودمو اینجا به اشتراک بزارم. افکاری که شاید برای شما هم جالب باشه و یه جایی گره کوچکی از یک مشکل رو باز کنه...در این قسمت میخوام یه نگاه متفاوت به عدد 12 داشته باشم. یک عدد در بین بی نهایت اعداد ریاضی که تشکیل شده از 12 تا عدد 1 کنار هم ! ۱۲ یک عدد طبیعی است که پس از ۱۱ و پیش از ۱۳ است. دوازده یک عدد برتر بسیار مرکب است، که قابل تقسیم به ۲، ۳، ۴ و ۶ است (ویکی پدیا) این تنها توضیحی که وقتی این عدد هیچ جایگاه خاصی نداشته باشه میتونیم در موردش بنویسیم ولی بیایم یکم از زاویه های مختلف به این عدد نگاه کنیم.مثلا اگه 12 رو بیاریم در علم روانشناسی قرار بدیم میتونیم به 12 کهن الگو یونگ اشاره کنیم که هر کدومش اندازه یک کتاب توضیح داره و 12 کتاب میشه در مورد هر کهن الگو نوشت !اگه 12 رو بیاریم در دین و مذهب اسلام قرار بدیم میتونیم به 12 امام اشاره کنیم که هر کدوم یک زندگی نامه دارند و میتونیم 12 کتاب و حتی صدها کتاب در مورد هر کدوم بنویسیم.اگه دوازده رو بیاریم در زمان و کهکشان ها قرار بدیم میتونیم به 12 ماه در سال و یا 12 صورت فلکی که داریم اشاره کنیم و یا به تعداد زیادی از ادم ها که در سن 12 سالگی قرار دارند که برای هر کدومش می تونیم صدها و هزاران کتاب و مقاله بنویسیم.پس خود عدد 12 به تنهایی یه تعریف خیلی ساده داره و ارزش خاصی نداره ولی در جایگاه های متفاوت که قرار میگیره میتونه بسیار ارزشمند و یا بسیار بی ارزش بشه.از این نوع نگرش میتونیم در uiux کمک بگیریم و استفاده کنیم تا یک قسمتی رو برای کاربر ارزشمند کنیم تا در نهایت به هدفی که داریم برسیم. به عنوان مثال در هیروسکشن همیشه یک کال تو اکشن وجود داره که کاربر رو به یک چیزی هدایت می کنه که هدف اصلی اون سایت یا استارت اپ هست ولی باید کاربر بفهمه که در این قسمت ارزشمند ترین چیزی که میتونه انتخاب کنه این باتن هستش و این ازرشمندی رو می تونیم با چیزهای مختلف ایجاد کنیم به عنوان مثال :1- استفاده از رنگ مناسب : میتونه از دیزاین سیستم و رنگ بندی اصلی الهام گرفته بشه و یا با توجه به اهمیتش از رنگ های پر انرژی استفاده بشه.2- استفاده از متن مناسب : دو متن "برای دانلود کلیک کنید" و "کلیک کنید تا دانلود کنید" با هم کلی تفاوت داره و می تونه کاربر رو جذب یا دفع کنه !3- استایل باتن : هر چی موضوع نرم تر و احساسی تر و عواطف و انرژی زنانه بیشتری داشته باشه استایل نرم تر، گردتر و سردتر و هر چی که موضوه خشن، رسمی و عواطف و انرژی مردانه بیشتری داشته باشه استایل خشن تر و تیز تر میشه.دقت کنید فقط برای یک کال تو اکشن میتونیم کلی دیدگاه متفاوت داشته باشیم که هر کدومش رو انتخاب کنیم میتونه در موفقیت یا شکست پروژه تاثیر داشته باشه و نتیجه گیری اصلی هم دقیقا همینه ! شکست یا موفقت یک ایده، توجه به همین نکات ریز چون کاربر الان سطح سواد خوبی داره و در ناخودگاهش به این نکات توجه میکنه و اگه رعایت نشه باعث شکست ایده میشه.ممنون که وقت گذاشتی و مطالعه کردی. خیلی دوست دارم نظرت رو بدونم و حتی در موردش بیشتر گپ بزنیم.لینکدین من | دریبل من قاسم سبحانی قاسم سبحانی Fri, 12 Jul 2024 19:49:47 +0330