https://virgool.ir/feed/@Javan_Designerآموزش رایگان برنامه نویسی، گرافیک، سئو و ....fa2026-11-11 12:51:50https://files.virgool.ir/upload/users/1569015/avatar/4YFwPb.pnghttps://virgool.ir/@Javan_Designerhttps://virgool.ir/@Javan_Designer/رابط-کاربری-ui-وتجربه-کاربری-uxبخش-3-ul4izvh2ruqu۱.۱.۱ تفاوت UX و UIدر واقع UX روی تعامل و درگیری کاربر با محصول تأکید دارد، در حالی که UI روی ظاهر و رابط تمرکز می کند. این دو با هم کار می کنند تا یک تجربه ی دیجیتال روان و موفق بسازند.بر اساس جدول ۱.۱ که از Mads Soegaard (۲۰۲۳) نقل شده، تفاوت های کلیدی این هاست:UX روی تجربه ی کلی کاربر تمرکز دارد. یعنی کل سفر کاربر را در نظر می گیرد. UI روی نقاط تماس بصری مشخص تمرکز دارد؛ یعنی همان جاهایی که کاربر مستقیم می بیند و لمس می کند.UX روی استراتژی، ساختار و طراحی تعامل تمرکز دارد. UI روی جنبه های سطحی طراحی، از جمله جلوه های بصری.UX شامل مطالعه ی سفر کاربر و طراحی معماری اطلاعات است. UI شامل طراحی عناصر ملموس تجربه مثل انتخاب کامپوننت ها و نحوه ی تعاملشان است.خروجی های UX شامل پرسونا، نقشه ی سفر کاربر، وایرفریم و پروتوتایپ است. خروجی های UI شامل ماکاپ، چیدمان های فیدلیتی بالا (high-fidelity) و پروتوتایپ است.UX محیط، حال وهوا و زمینه ی کاربر را در نظر می گیرد. UI ملموس تر است، چون کاربر مستقیم با رابط تعامل دارد.مثال ساده: فرض کن یک اپ بانکی داری. UX می پرسد: کاربر چطور از ورود تا انتقال پول می رسد؟ کجا گیر می کند؟ چه حسی دارد؟ UI می پرسد: دکمه ی انتقال پول چه رنگی باشد؟ فونتش چه باشد؟ کجای صفحه قرار بگیرد؟نکته ی مهم این است که UX و UI در تمرکز و دامنه شباهت هایی دارند، اما یکی کلی تر و استراتژیک تر است و دیگری جزئی تر و بصری تر.۱.۱.۲ مثال UX در مقابل UI: نقش UX در اپ بانک موبایلطراحی UX مطمئن می شود کاربران بتوانند کارها را سریع و لذت بخش انجام دهند. مثلاً یک طراح UX ممکن است:سفر کاربر را از ورود تا انتقال پول یا بررسی موجودی ترسیم کند.قبل از ساخت وایرفریم، تحقیق کاربر انجام دهد تا نقاط درد (pain points) را پیدا کند.از پرسونا و نقشه ی سفر کاربر استفاده کند تا نشان دهد کاربران مختلف چطور با نرم افزار تعامل می کنند.پروتوتایپ ها را روی کاربران واقعی تست کند تا مشکلات کاربردپذیری را پیدا و رفع کند و مطمئن شود اپ کاربرپسند است و نیازها را برآورده می کند.مثال سادهطراح UX متوجه می شود کاربران مسن در مرحله ی وارد کردن رمز دوم گیر می کنند. پس مرحله را ساده تر می کند، راهنما اضافه می کند و دوباره تست می کند.نقش UI در اپ بانک موبایلطراحی UI روی ویژگی های تعاملی و عناصر بصری تمرکز دارد که کاربر می بیند و لمس می کند. یک طراح UI ممکن است:فونت، آیکون و طرح رنگ را انتخاب کند تا ظاهری یکدست و زیبا بسازد.صفحه ها را بچیند تا دکمه ها، منوها و عناصر تعاملی راحت پیدا و استفاده شوند.پروتوتایپ های تعاملی و ماکاپ های فیدلیتی بالا بسازد تا نشان دهد هر کامپوننت چطور به اقدامات کاربر مثل کلیک دکمه و سوایپ صفحه واکنش می دهد.مثال سادهطراح UI تصمیم می گیرد دکمه ی انتقال پول آبی برند باشد، در پایین صفحه و بزرگ تر از بقیه قرار بگیرد، و وقتی لمس می شود یک انیمیشن کوچک داشته باشد.جمع بندیطراح UI روی جذابیت بصری و تعاملی اپ تأکید دارد، در حالی که طراح UX کارکرد و کاربردپذیری آن را تضمین می کند. این دو با هم کار می کنند تا یک اپ بانک موبایل روان و جذاب تحویل بدهند.۱.۲ تاریخچه و تکامل کوتاه UI و UXاگرچه تفاوت های UX و UI در بخش قبل نشان داده شد، این دو از دوران باستان تا امروز به مفاهیم و محصولات نزدیک بوده اند. این بخش زمینه ی استفاده و تاریخچه ی آن ها را بررسی می کند.ارتباط فنگ شویی با UXبر اساس Uddin (۲۰۲۳)، بین فلسفه ی فنگ شویی و تجربه ی کاربری ارتباط وجود دارد. فنگ شویی به دنبال هماهنگ کردن افراد با محیط شان است، درست همان طور که UX به دنبال بهینه سازی تجربه های دیجیتال برای کاربردپذیری، کارکرد و لذت است. هر دو رشته هدفشان بهبود زندگی مردم از طریق راه حل های طراحی نوآورانه است و هر دو نیازمند درک عمیق رفتار انسان هستند.مثال سادهدر فنگ شویی، چیدمان اتاق خواب طوری طراحی می شود که آرامش و خواب بهتر را ممکن کند. در UX، چیدمان یک صفحه طوری طراحی می شود که کاربر راحت تر به هدفش برسد. هر دو درباره ی چیدن درست عناصر برای رسیدن به نتیجه ی بهتر هستند.4000 سال قبل از میلاد: فنگ شویی و اهمیت فضافنگ شویی یک فلسفه و عمل باستانی است که به دنبال ساخت محیط های هماهنگ، حمایت کننده و پرورش دهنده است. در هسته ی آن اصل تعادل قرار دارد. فعالان فنگ شویی از انرژی های مکمل یین و یانگ برای ایجاد هماهنگی در فضاها استفاده می کنند. این انرژی ها از طریق وو شینگ (Wu Xing) یا پنج عنصر بیان می شوند: آب، چوب، آتش، خاک و فلز.یکی از پرکاربردترین جنبه های فنگ شویی، نظریه ی مربوط به اتاق خواب است. فنگ شویی راهنمایی می دهد که عناصری مثل تخت، میز، صندلی و آینه چطور چیده شوند تا جریان انرژی بهینه شود. اتاق خواب در فنگ شویی اهمیت ویژه ای دارد، چون مهم ترین اتاق خانه در نظر گرفته می شود؛ جایی که فرد زمان زیادی را در آن می گذراند و آرامش پیدا می کند. چون خواب یک حالت غیرفعال ایجاد می کند، اعتقاد بر این است که انرژی داخل اتاق خواب تأثیر عمیقی بر سلامت کلی و وضعیت ذهنی فرد دارد.مثال سادهدر فنگ شویی می گویند تخت را طوری قرار نده که پایین آن رو به در باشد، چون حس ناامنی ایجاد می کند. در UX هم می گوییم دکمه ی «خروج» یا «حذف» را کنار دکمه ی «ذخیره» قرار نده، چون کاربر ممکن است اشتباهی بزند و حس ناامنی پیدا کند. هر دو درباره ی پیشگیری از تصمیم های ناخواسته هستند.امیر جوان میرامیر جوان میرWed, 04 Nov 2026 16:05:02 +0330https://virgool.ir/@Javan_Designer/رابط-کاربری-ui-وتجربه-کاربری-uxبخش-3-jpfme73dahip1.2.2 سال 500 قبل از میلاد یونانیان باستان و ارگونومییونان باستان به خاطر روش های پیشرفته اش در فلسفه، ریاضیات و معماری مشهور بود و یکی از پیشرفته ترین جوامع زمان خودش محسوب می شد. دستاوردهای یونانی ها در دین، هنر، فرهنگ و پزشکی تأثیر عمیقی بر تمدن های بعدی، به ویژه رومی ها گذاشت. فیلسوفانی مثل سقراط و افلاطون پایه ی فلسفه ی غربی را بنا نهادند.نوآوری هایی مثل آسیاب آبی، ساعت آبی، ظرف آب (hydria) و پیچ ارشمیدس نشان دهنده ی نبوغ یونانی ها و تأثیر ماندگارشان بر توسعه ی جهانی است. نمونه های اولیه ی طراحی تجربه ی کاربری را می توان در همین دستاوردها ردیابی کرد، به ویژه از طریق درک آن ها از ارگونومی در قرن پنجم قبل از میلاد.یک نمونه ی قابل توجه بقراط (Hippocrates) است که در نوشته هایش چیدمان ایده آل برای جراحان را توصیف کرد. او تأکید کرد که ابزارها باید طوری قرار بگیرند که به راحتی در دسترس باشند و مانع کار جراح نشوند دقیقاً مثل اصول UX امروزی که هدفشان بهبود کاربردپذیری و کارایی است.مثال سادهتصور کن یک جراح در حال عمل است. اگر ابزارها بی نظم روی میز پخش باشند، جراح وقت تلف می کند و ممکن است اشتباه کند. بقراط می گفت ابزارها را به ترتیب استفاده بچین. امروز هم در یک اپ موبایل، دکمه هایی که کاربر بیشتر استفاده می کند باید در دسترس ترین جای صفحه باشند. این همان منطق ارگونومی است.1.2.3 اوایل دهه ی 1900: فردریک وینسلو تیلور و جستجوی کارایی در محیط کاربر اساس نظریه ی مدیریت علمی تیلور، مدیران مسئول ساختن کارآمدترین سیستم های تولید برای افزایش بهره وری شرکت بودند. تیلور در کتاب اصول مدیریت علمی (1911) استدلال کرد که شیوه های مدیریتی بهبودیافته را می توان به صورت علمی برای حل مشکلات فرایندهای کاری خاص به کار برد. او معتقد بود کلید افزایش بهره وری، بهینه سازی عملکرد کار است.یک نمونه ی قابل توجه از نظریه ی او در عمل، وقتی رخ داد که کارگران با کمک تحقیق بیومکانیکی و کرونومتر روش مؤثرتری برای بارگیری آهن خام در واگن های قطار پیدا کردند. نتیجه این بود که مقدار آهن بارگیری شده در همان روز اول تقریباً دو برابر شد.طراحی UX مدرن هم اصل مشابهی را منعکس می کند. هدفش بهبود نرخ تبدیل کسب وکار از طریق ساختن تجربه ی کاربری بهتر است.مثال سادهفرض کن یک کارگر باید 100 قطعه را جابه جا کند. تیلور با کرونومتر زمان می گرفت، حرکات اضافی را حذف می کرد و روش بهینه را پیدا می کرد. در UX هم ما با تحلیل رفتار کاربر می فهمیم کاربر کجا وقت تلف می کند و آن مراحل را حذف یا ساده می کنیم. مثلاً فرم ثبت نامی که از 10 فیلد به 4 فیلد کاهش پیدا کند، نرخ تکمیل را بالا می برد.1.2.4 دهه ی 1940: تویوتا و ارزش ورودی انسانیراه تویوتا در سراسر جهان به خاطر مدیریت مؤثر سیستم های تولید، کارگران، مصرف کنندگان و کل جامعه مشهور است. تعهد تویوتا به تعالی عملیاتی پایه ی موفقیتش را می سازد. این تعالی فراتر از ابزارها و تکنیک های بهبود کیفیت است که تویوتا در بخش تولید pioneered کرد.راه تویوتا در سراسر جهان به خاطر مدیریت مؤثر سیستم های تولید، کارگران، مصرف کنندگان و کل جامعه مشهور است. تعهد تویوتا به تعالی عملیاتی پایه ی موفقیتش را می سازد. این تعالی فراتر از ابزارها و تکنیک های بهبود کیفیت است که تویوتا در بخش تولید pioneered کرد.این مفهوم ابتدا توسط تویودا کیچیرو، رئیس پیشین تویوتا معرفی شد. بین سال های 1948 تا 1975، اوه نو تای ایچی و ایجی تویودا سیستم را اصلاح و پیشرفت دادند. مشابه نوآوری های قبلی هنری فورد، سیستم تولید تویوتا بسیار مؤثر بود، اما با رویکردی مصرف کننده محورتر و بازارمحورتر به توسعه و تحویل محصول.روش 5S به طور جمعی توسط رهبری و مهندسان تویوتا، به ویژه تای ایچی اوه نو و شیگئو شینگو، توسعه و اصلاح شد. این روش یک رویکرد ساخت یافته به سازمان دهی محیط کار است که از پنج واژه ی ژاپنی گرفته شده:واژه Seiri (ساماندهی / Sort): جدا کردن چیزهای لازم از غیرلازمواژه Seiton (نظم دادن / Set in Order): چیدن منطقی چیزهای لازمواژه Seiso (پاکیزه سازی / Shine): تمیز کردن کاملواژه Seiketsu (استانداردسازی / Standardize): ایجاد رویه های استاندارد برای نگهداریواژه Shitsuke (حفظ و تداوم / Sustain): اطمینان از تداوم این شیوه ها در بلندمدتموفقیت این روش با گفتگوی تیمی هدایت می شود که به توافق جمعی درباره ی مؤثرترین روش های انجام کار کمک می کند.مثال سادهفرض کن میز کارت شلوغ است. با 5S اول چیزهای غیرضروری را دور می ریزی، بعد وسایل لازم را منظم می چینی، بعد میز را تمیز می کنی، بعد یک قانون می گذاری که هر وسیله جای مشخصی داشته باشد، و در نهایت عادت می کنی هر روز همین نظم را حفظ کنی. در طراحی دیجیتال هم همین طور است: اول عناصر غیرضروری صفحه را حذف می کنی، بعد عناصر مهم را منظم می چینی، بعد ظاهر را یکدست می کنی، بعد قواعد طراحی را استاندارد می کنی و در نهایت تیم را متعهد می کنی که همیشه از همان قواعد استفاده کند. این همان چیزی است که در سیستم طراحی هم دیدیم.1.2.5 سال 1955: هنری دریفوس و هنر طراحی برای مردماولین کسی که وقتی درباره ی بهبود کاربردپذیری صحبت می کنیم به ذهن می آید هنری دریفوس است که بیشتر با جمله ی طراحی برای مردم شناخته می شود. دریفوس یک طراح صنعتی آمریکایی بود که چندین محصول نمادین خلق کرد و منطق و اصول علمی، پایه ی فلسفه ی طراحی اش را می ساخت.او در کتاب طراحی برای مردم طراحی UX را این طور خلاصه کرد:وقتی نقطه ی تماس بین محصول و مردم به منبع اصطکاک تبدیل شود، طراح صنعتی شکست خورده است.برعکس، طراح موفق بوده اگر محصول باعث شود مشتریان احساس امنیت بیشتر، راحتی بیشتر، تمایل بیشتر به خرید، بهره وری بیشتر یا صرفاً شادی بیشتر کنند.نمونه های قابل توجه از طراحی های او شامل تلفن های رومیزی، جاروبرقی هوور و ماشین تحریرهای رویال است.درس دریفوس برای طراحان UX این است که باید زمان و منابع لازم برای تحقیق کاربر را قبل از شروع پروژه به وضوح مشخص کنند. اگر مشتری اهمیت تحقیق کاربر را درک نمی کند، باید ارزش آن را دوباره بررسی کند یا به سراغ کار بعدی برود.مثال سادهتصور کن یک تلفن رومیزی را برمی داری. اگر شکل و وزنش طوری باشد که دستت راحت باشد، دکمه ها در جای طبیعی انگشتت باشند و شنیدن صدا واضح باشد، یعنی طراح موفق بوده. اگر گوشی سنگین باشد و دکمه ها گیج کننده، طراح شکست خورده. در اپ موبایل هم همین طور است: اگر کاربر برای انجام یک کار ساده عرق می ریزد، طراح UX شکست خورده است.1.2.6 سال 1960: داگلاس انگلبارت و مکان نمای ماوس محورسیستم آنلاین (NLS) در دهه ی 1960 توسط داگلاس انگلبارت به عنوان بخشی از پروژه ی «افزایش هوش انسانی» در مرکز تحقیقات افزایش در SRI International در منلو پارک کالیفرنیا توسعه یافت. این کامپیوتر چندین پنجره برای کار با هایپرست و یک مکان نمای ماوس محور داشت. یکی از الهام های اصلی انگلبارت، پیشنهاد سال 1945 ونوار بوش برای memex بود؛ یک کامپیوتر اطلاعاتی مبتنی بر میز.کار پیشگامانه ی انگلبارت راه را برای نوآوری ها در Xerox PARC هموار کرد. در اوایل دهه ی 1970، چند محقق از SRI به Xerox PARC منتقل شدند و در آنجا کامپیوتر شخصی Alto در سال 1973 ساخته شد. Alto اولین سیستمی بود که از استعاره ی دسکتاپ و رابط کاربری گرافیکی استفاده کرد و یک صفحه ی بیت مپ داشت. اگرچه Alto هرگز به عنوان محصول تجاری عرضه نشد، هزاران واحد از آن ساخته شد و در PARC، سایر تأسیسات Xerox و دانشگاه های مختلف به طور گسترده استفاده شد. تا اواخر دهه ی 1970 و اوایل دهه ی 1980، Alto تأثیر عمیقی بر طراحی کامپیوترهای شخصی گذاشت و الهام بخش سیستم هایی مثل Three Rivers PERQ، Apple Lisa و Macintosh و اولین ایستگاه های کاری Sun شد.مثال سادهقبل از ماوس، کاربر باید دستورات متنی تایپ می کرد تا با کامپیوتر کار کند. انگلبارت ماوس را آورد تا کاربر بتواند با حرکت دادن یک وسیله و کلیک کردن، با عناصر بصری تعامل کند. این همان انقلابی است که امروز آن را عادی می دانیم.کلیک روی آیکون، باز کردن پنجره، کشیدن و رها کردن. همه ی این ها از کار انگلبارت شروع شد.امیر جوان میرامیر جوان میرTue, 03 Nov 2026 16:12:40 +0330https://virgool.ir/@Javan_Designer/رابط-کاربری-ui-وتجربه-کاربری-ux-مقدمهبخش-2-pxteb43cgu5yچرا UI/UX مهم است؟طراحی رابط کاربری (UI) و تجربه کاربری (UX) یک حوزه ی حیاتی برای ساخت محصولات دیجیتالی است که هم لذت بخش برای کاربر باشند و هم کارکردی.طراحی UX کل سفر کاربر را در نظر می گیرد و مطمئن می شود که استفاده آسان، دسترس پذیر و رضایت بخش است.طراحی UI روی عناصر بصری و تعاملی تمرکز می کند؛ چیزهایی مثل چیدمان، رنگ ها و تایپوگرافی.یک فرایند UI/UX خوب شامل چهار مرحله است:تحقیق (Research)پروتوتایپ (Prototyping)تست (Testing)تکرار و اصلاح (Iteration)هدف این فرایند هماهنگ کردن نیازهای کاربر با اهداف کسب وکار است.وقتی طراحان روی راه حل های کاربرمحور، طراحی جذاب و ناوبری شهودی تمرکز می کنند، می توانند تعامل کاربر را بالا ببرند، اصطکاک را کم کنند و موفقیت محصول را رقم بزنند. طراحی UI/UX مؤثر، چه برای نرم افزار، چه اپ موبایل و چه وب سایت، پلی بین فناوری و تعامل انسانی می سازد و در نهایت شکل دهنده ی این است که کاربر محصول دیجیتال را چطور درک و تجربه می کند.برای ارائه ی راه حل هایی که هم تأثیرگذار و هم آسان باشند، طراحان، توسعه دهنده ها و ذی نفعان باید درک پایه ای از این اصول داشته باشند.فرض کن یک اپ سفارش غذا می سازی. اگر فقط به زیبایی ظاهری فکر کنی (UI) اما مسیر سفارش دادن پیچیده باشد (UX ضعیف)، کاربر خسته می شود و اپ را ترک می کند. برعکس، اگر مسیر ساده باشد اما ظاهر آشفته و ناخوشایند، کاربر اعتماد نمی کند. موفقیت وقتی است که هر دو با هم درست باشند.۱.۱ تعریف UI در مقابل UXگاهی UI و UX را به جای هم به کار می برند، اما در واقع UI زیرمجموعه ای از UX است. یعنی UX دامنه ی بزرگ تری دارد و UI بخشی از آن است.تعریف UI (رابط کاربری)اصطلاح «رابط کاربری» به اجزای تعاملی و بصری یک محصول دیجیتال اشاره دارد که کاربر با آن ها در تعامل است. این اجزا شامل عناصر گرافیکی مثل پالت رنگ، تایپوگرافی، دکمه ها و آیکون ها می شود.هدف اصلی طراحی UI این است که یک رابط زیبا و کاربرپسند بسازد که کاربر را به تعامل تشویق کند و کاربردپذیری را بالا ببرد.مثال ساده: دکمه ای که رنگش با برند هماهنگ است، اندازه اش مناسب لمس است، متنش خواناست و در جای درست قرار گرفته این یعنی UI خوب.تعریف UX (تجربه کاربری)اصطلاح «تجربه کاربری» به تجربه ی کلی کاربر در هنگام تعامل با یک محصول دیجیتال اشاره دارد. طراحی UX کل سفر کاربر را در نظر می گیرد تا مطمئن شود محصول مفید، آسان برای پیمایش و منطبق با نیازهای کاربر است.طراحی UX شامل این موارد است:بهبودهای تکرارشونده (Iterative improvements)طرح های ساده و اولیه وایرفریم (Wireframes)نمونه ی قابل تست پروتوتایپ (Prototyping)تست کاربردپذیری (Usability testing)تحقیق کاربر (User research)هدف UX ارائه ی تجربه ای روان، مؤثر و لذت بخش است که اهداف و انتظارات کاربر را برآورده کند.مثال ساده: کاربری که وارد اپ می شود، می خواهد در سه مرحله ساده محصولی را بخرد و مطمئن باشد پولش کسر شده. اگر این مسیر روان باشد، UX خوبی داشته ایم.نقل قول از هوگو ریموندهوگو ریموند، از طرفداران طراحی در Figma، می گوید:«طراحی مؤثر رابط کاربری، کاربردپذیری و طراحی تعاملی را کنار هم می آورد تا یک ارتباط عاطفی بین کاربر و محصول بسازد.»یعنی UI خوب فقط زیبا نیست؛ حس عاطفی هم ایجاد می کند. یک رابط جذاب می تواند تجربه ی کلی کاربر از یک وب سایت یا محصول دیجیتال را به طور قابل توجهی بهتر کند.مثال رستوران: رابطه ی UI و UXUI مثل دکور رستوران، چیدمان میزها و طراحی منو است. یعنی همان عناصر بصری که تصمیم اولیه را شکل می دهند و اولین برداشت را می سازند.UX مثل کل تجربه ی غذا خوردن است: راحتی صندلی، توجه پرسنل، کیفیت غذا، و جریان روان از سفارش تا پرداخت.همان طور که یک رستوران با دکور زیبا اما سرویس بد مشتری را ناامید می کند، اپی که ظاهر خیره کننده دارد اما ناوبری اش گیج کننده است، کاربر را کلافه می کند.مثال ساده: تصور کن وارد رستورانی می شوی که دکور فوق العاده ای دارد، منوی خوش خط، و نورپردازی حرفه ای. اما غذا ۴۵ دقیقه دیر می آید، پیشخدمت بی توجه است و صورتحساب اشتباه می شود. آیا برمی گردی؟ احتمالاً نه. در دنیای دیجیتال هم دقیقاً همین طور است: ظاهر زیبا (UI) بدون تجربه ی روان (UX) کاربر را نگه نمی دارد.امیر جوان میرامیر جوان میرSat, 17 Oct 2026 12:15:13 +0330https://virgool.ir/@Javan_Designer/رابط-کاربری-ui-وتجربه-کاربری-ux-مقدمه-oziavhkv5drkبا اینکه دستگاه های دیجیتال در زندگی روزمره ی ما زیاد شده اند، بسیاری از آن ها همچنان آزاردهنده، گیج کننده یا آشکارا طردکننده هستند. یعنی چیزی که طراح در ذهن داشته با چیزی که کاربر واقعاً تجربه می کند، فاصله ی زیادی دارد.پر کردن این شکاف فقط به مهارت فنی نیاز ندارد.به سه چیز دیگر هم نیاز دارد:درک عمیق روانشناسی انسانتعهد به تفکر فراگیر (Inclusive Thinking) یعنی طراحی برای همه، نه فقط یک گروه خاصرویکرد سیستماتیک به ساخت تجربه هایی که خودبه خود شهودی به نظر برسند، نه اینکه کاربر مجبور باشد دستورالعمل بخواندهدف این است که در نهایت بفهمی محصولات دیجیتال چطور می توانند و باید به نفع کاربرانشان باشند.فصل ۱: مقدمه ای بر UI/UXاین فصل تفاوت بین رابط کاربری (UI) و تجربه کاربری (UX) را روشن می کنیم. بعد تاریخچه ی این دو را از ارگونومی باستانی تا روش های دیجیتال مدرن دنبال می کنیم. در پایان هم یک فرایند طراحی ده مرحله ای معرفی می کنیم که پایه ی همه ی فصل های بعدی است.فرض کن یک رستوران را طراحی می کنی. UI همان دکور، میز و صندلی و منوی خوش خط است. UX همان تجربه ی کلی است. چقدر طول کشید غذا بیاید، چقدر راحت توانستی سفارش بدهی، چقدر پرسنل خوش برخورد بودند. یک رستوران می تواند دکور زیبا داشته باشد (UI خوب) اما تجربه ی بدی داشته باشد (UX بد).فصل ۲: از فلسفه به عملاین فصل پایه ها را می سازد. دو مفهوم اصلی را بررسی می کنیم:طراحی انسان محور (Human-Centered Design یا HCD): یک چارچوب اخلاقی راهنماست. یعنی همیشه اول به نیاز و راحتی انسان فکر کن.تفکر طراحی (Design Thinking): یک روش مشخص، تکرارشونده و عملی برای رسیدن به آن هدف.این دو با هم کار می کنند تا چیزهایی بسازند که سه ویژگی داشته باشند:مطلوب برای کاربران (Desirable)از نظر فناوری امکان پذیر (Feasible)از نظر تجاری سودآور (Viable)مثال ساده: یک اپلیکیشن مسیریابی را تصور کن. HCD می گوید اول از رانندگان بپرس چه مشکلی دارند. Design Thinking می گوید: نمونه ی اولیه بساز، تست کن، اصلاح کن، دوباره تست کن. نتیجه باید هم برای راننده خوب باشد، هم با فناوری موجود بسازد، هم برای شرکت پول دربیاورد.فصل ۳: روانشناسی رفتار کاربراین فصل فرایندهای ذهنی را بررسی می کنیم که زیربنای ادراک، تصمیم گیری و عمل کاربر هستند. یعنی مغز کاربر چطور اطلاعات را می بیند، پردازش می کند و تصمیم می گیرد.سه مفهوم کلیدی:قوانین گشتالت (Gestalt’s Laws): درباره ی ادراک بصری. مثلاً مغز ما چیزهای نزدیک به هم را یک گروه می بیند. به همین دلیل در طراحی، اگر دو دکمه را کنار هم بگذاری، کاربر فکر می کند به هم مربوط اند.قانون هیک (Hick’s Law): هرچه تعداد گزینه ها بیشتر باشد، تصمیم گیری کندتر می شود. یعنی منوی با ۲۰ آیتم باعث می شود کاربر گیج شود. منوی با ۵ آیتم سریع تر انتخاب می شود.اثر زایگارنیک (Zeigarnik Effect): مغز ما کارهای ناتمام را بهتر به یاد می آورد تا کارهای تمام شده. به همین دلیل نوار پیشرفت (Progress Bar) در اپ ها انگیزه ی ادامه می دهد: کاربر می بیند کاری ناتمام است و می خواهد تمامش کند.مثال ساده: یک اپ یادگیری زبان را تصور کن. اگر بعد از هر درس یک نوار پیشرفت نشان بدهی که ۸۰٪ کامل شده، کاربر ترغیب می شود درس بعدی را هم انجام دهد تا نوار به ۱۰۰٪ برسد. این همان اثر زایگارنیک است.فصل ۴: معماری اطلاعاتاین فصل درباره ی پایه ی استراتژیک طراحی UX است. یعنی محتوا چطور سازمان دهی، برچسب گذاری و ساختاربندی می شود. قبل از اینکه صفحه را طراحی کنی، باید بدانی اطلاعات چطور دسته بندی می شوند و کاربر چطور آن ها را پیدا می کند.مثال ساده: یک فروشگاه اینترنتی را تصور کن. اگر محصولات را بدون دسته بندی بگذاری، کاربر گم می شود. اما اگر دسته بندی روشن باشد مثلاً «لباس مردانه»، «لباس زنانه»، «کفش»، «اکسسوری» کاربر سریع تر به آنچه می خواهد می رسد. این همان معماری اطلاعات است.معماری اطلاعات باید با مدل ذهنی کاربران هماهنگ باشد. یعنی چیزهایی که کاربر از قبل در ذهنش درباره ی یک موضوع دارد.معماری اطلاعات چهار جزء اصلی دارد:سیستم سازمان دهی: محتوا چطور دسته بندی می شودسیستم برچسب گذاری: هر بخش چه نامی داردسیستم ناوبری: کاربر چطور بین بخش ها حرکت می کندسیستم جستجو: کاربر چطور چیزی را پیدا می کندهمچنین هشت اصل معرفی می شود که ساختاردهی خوب را هدایت می کنند.مثال ساده: فرض کن یک اپ بانکی داری. کاربر انتظار دارد گزینه ی «انتقال وجه» را زیر بخش «پرداخت» یا «تراکنش ها» ببیند، نه زیر «تنظیمات». اگر آن را جای غیرمنتظره بگذاری، مدل ذهنی کاربر به هم می ریزد و گیج می شود. این همان هماهنگی با مدل ذهنی است.فصل ۵: طراحی تعامل (Interaction Design)این فصل درباره ی ارتباط بین انسان و محصول است. برای این کار از یک چارچوب به نام پنج بُعد (Five Dimensions) استفاده می کنیم:کلمات: متن هایی که در رابط کاربری می بینیبازنمایی های بصری: آیکون ها، تصاویر و عناصر گرافیکیاشیاء و فضاهای فیزیکی: دستگاه هایی که کاربر لمس می کندزمان: مدت زمان انیمیشن ها، تأخیرها و پاسخ هارفتار: واکنش محصول به اقدامات کاربربرای ارزیابی طراحی تعامل، دو ابزار مهم معرفی می کنیم:اصول پایه ی دان نورمن (Don Norman): درباره ی اینکه کاربر چطور با محصول تعامل می کند و چطور باید طراحی شود تا شهودی باشدده اصل کاربردی نیلسن (Nielsen’s 10 Usability Heuristics): قواعدی که به کمک آن ها می توان کیفیت یک رابط کاربری را سنجیدمثال ساده: فرض کن یک دکمه ی «ذخیره» داری. اگر بعد از زدن آن، هیچ بازخوردی نبینی، نمی دانی ذخیره شد یا نه. اگر یک پیام کوچک «ذخیره شد» یا یک تیک سبز ببینی، رفتار محصول به تو می گوید چه اتفاقی افتاد. این همان بُعد رفتار در طراحی تعامل است.فصل ۶: طراحی بصری و برندسازیاین فصل توضیح می دهیم که زیبایی شناسی چگونه به کارکرد خدمت می کند. یعنی زیبایی فقط تزئین نیست؛ به کاربر کمک می کند بفهمد کجا برود و چه کاری انجام دهد.چهار عنصر بصری مهم معرفی می شوند:مقیاس: اندازه ی عناصر نسبت به همسلسله مراتب: اهمیت عناصر نسبت به همتعادل: توزیع بصری عناصرکنتراست: تفاوت بین عناصر برای جلب توجهسپس اجزای بنیادین هویت بصری بررسی می شوند: لوگو، پالت رنگ، تایپوگرافی و تصاویر. این ها به عنوان سیستم های ارتباطی استراتژیک معرفی می شوند که اعتماد و شناخت برند را می سازند.مثال ساده: یک دکمه ی اصلی در یک صفحه ی پرداخت را تصور کن. اگر همان رنگ برند باشد، بزرگ تر از بقیه ی دکمه ها، و در جای درست قرار گرفته باشد، کاربر فوراً می فهمد باید روی آن بزند. این همان ترکیب مقیاس، سلسله مراتب و کنتراست است که به کارکرد کمک می کند.فصل ۷: طراحی برای همه (Designing for All)این فصل درباره ی رابطه ی بین دسترس پذیری (Accessibility)، کاربردپذیری (Usability) و فراگیری (Inclusion) است. ایده ی اصلی این است که طراحی برای حاشیه ها، تجربه را برای همه بهتر می کند. یعنی اگر محصول را برای افرادی بسازی که سخت ترین شرایط را دارند، همه ی کاربران از آن سود می برند.برای این کار از اصول POUR در WCAG استفاده می شود:قابل درک (Perceivable): کاربر باید بتواند محتوا را ببیند یا بشنودقابل استفاده (Operable): کاربر باید بتواند با رابط کار کندقابل فهم (Understandable): کاربر باید بتواند محتوا را بفهمدقابل اعتماد (Robust): محتوا باید با فناوری های مختلف کار کندمثال ساده: زیرنویس برای ناشنوایان را در نظر بگیر. این ویژگی برای افرادی که در محیط شلوغ هستند یا زبان مادری شان زبان ویدیو نیست هم مفید است. یعنی طراحی برای یک گروه خاص، به همه کمک می کند.نتیجهطراحی UX مسئولیت بزرگی دارد. ما رابط هایی می سازیم که دسترسی به اطلاعات، خدمات، جوامع و فرصت ها را ممکن می کنند. وقتی عاقلانه طراحی می کنیم، موانع را برمی داریم و به مردم قدرت می دهیم. وقتی غیرمسئولانه طراحی می کنیم، در دنیایی که از قبل پیچیده است، موانع بیشتری می سازیم.مثال ساده: یک اپ بانکی را تصور کن. اگر طراحی خوب باشد، یک فرد سالمند به راحتی می تواند قبض هایش را پرداخت کند. اگر طراحی بد باشد، همان فرد ممکن است از پرداخت جا بماند و جریمه شود. اینجاست که طراحی UX از یک مهارت فنی به یک مسئولیت اخلاقی تبدیل می شود.امیر جوان میرامیر جوان میرWed, 14 Oct 2026 16:23:46 +0330https://virgool.ir/@Javan_Designer/ساخت-یک-دیزاین-سیستم-در-آخر-هفته-znmkq1a4yfx2فرض کن یک پروژه ی شخصی را شش ماه است که داری می سازی. هر بار که به یک دکمه ی جدید نیاز داری، استایل دکمه را از صفر می نویسی. هر کارت جدید، حاشیه ی داخلی اش کمی با قبلی فرق دارد. خاکستری هایت همه کمی متفاوت اند: #666، #6b6b6b، #707070.این ها در ده ها فایل پخش شده اند و هیچ کدام یکسان نیستند. محصول کار می کند، اما هر صفحه ی جدید بیشتر از حد لازم طول می کشد و هر تصمیم طراحی مثل این است که برای اولین بار گرفته می شود.راه حل پیچیده نیست فقط یک فایل CSS با متغیرهایی که واقعاً از آن ها استفاده کنی.چرا بیشتر توسعه دهنده های تک نفره سیستم طراحی را نادیده می گیرند؟دلیل رایج کمبود وقت است. سیستم طراحی حس کار زیرساختی می دهد؛ همان کاری که وقتی پروژه «به اندازه ی کافی بزرگ» شد انجام می دهی. بنابراین سریع تحویل می دهی، تصمیم های محلی می گیری و ادامه می دهی.اما هزینه ی پنهان ظاهر می شود. یک گزارش تحقیقاتی از Sparkbox نشان داد تیم هایی که سیستم طراحی دارند، ۴۷٪ زمان کمتری را نسبت به تیم های بدون آن صرف توسعه ی فرم می کنند. این شکاف روی هم انباشته می شود هر کامپوننتی که بدون سیستم بسازی، یک رویه ی کمی متفاوت ایجاد می کند.بعد از شش ماه، پانزده نوع دکمه ی متفاوت داری و هیچ قاعده ی روشنی برای اینکه کدام را کِی استفاده کنی، نداری.هزینه ی دیگر خستگی تصمیم گیری است. بدون سیستم، هر عنصر جدید رابط کاربری از تو می خواهد که دوباره به همان سؤالات پاسخ دهی: چقدر حاشیه ی داخلی؟ کدام اندازه ی فونت؟ چه شعاع گوشه ای؟ یک سیستم طراحی به این سؤالات یک بار پاسخ می دهد. بعد از آن، دیگر تصمیم نمی گیری و شروع به ساختن می کنی. سرمایه گذاری یک آخر هفته، با همان ویژگی بعدی که تحویل می دهی، هزینه اش جبران می شود.حداقلِ سیستم طراحیِ قابل استفادهنیازی نیست کار بزرگی انجام دهی. یک سیستم طراحی کارآمد برای یک توسعه دهنده ی تک نفره یا یک تیم کوچک دقیقاً به چهار چیز نیاز دارد:اول، توکن های طراحیمقادیر خام شما. رنگ ها، فاصله گذاری، شعاع گوشه ها، اندازه های فونت. این ها همان عناصر پایه ای هستند که همه چیز دیگر به آن ها ارجاع می دهد.دوم، مقیاس تایپوگرافیمجموعه ای تعریف شده از اندازه ها و وزن ها برای سرعنوان ها، متن اصلی، زیرنویس ها و برچسب ها. نه گزینه های بی نهایت، یک مجموعه ی ثابت.سوم، مقیاس فاصله گذاریریتمی یکنواخت برای حاشیه ی داخلی، حاشیه ی خارجی و فاصله ها. رایج ترین رویکرد، یک واحد پایه ی ۸ پیکسلی با مقیاسی تعریف شده است: ۴، ۸، ۱۶، ۲۴، ۳۲، ۴۸، ۶۴.چهارم، کتابخانه ی کامپوننتدکمه ها، فرم ها و کارت ها برای شروع. نه همه چیز. فقط همان سه کامپوننتی که در هر پروژه ای به سراغشان می روی.همین. بقیه چیزها می توانند صبر کنند تا واقعاً به آن ها نیاز پیدا کنی.ویژگی های سفارشی CSS به عنوان ستون فقراتبرای شروع، به Style Dictionary یا Theo یا هیچ ابزار ساخت وسازی نیاز نداری. یک فایل CSS خوش ساختار با ویژگی های سفارشی، نقطه ی شروع درستی برای یک پروژه ی تک نفره یا یک تیم کوچک است.یک فایل واقعی توکن ها این گونه به نظر می رسد::root { /* Colors — primitives */ --blue-500: 2563eb; --blue-600: 1d4ed8; --gray-100: f3f4f6; --gray-700: 374151; --gray-900: 111827; --red-500: ef4444; --white: ffffff; /* Colors — semantic */ --color-primary: var(--blue-500); --color-primary-hover: var(--blue-600); --color-text: var(--gray-900); --color-text-muted: var(--gray-700); --color-surface: var(--gray-100); --color-error: var(--red-500); /* Spacing */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ /* Typography */ --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-normal: 1.5; /* Border */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 9999px; }رویکرد دو لایهعناصر پایه (مثل blue-500) و توکن های معنایی (مثل color-primary) ارزش دارد که از همان ابتدا جدا شوند. بر اساس راهنمای سیستم های طراحی ۲۰۲۵ در design.dev، جدا کردن مقادیر پایه از توکن های معنایی، همان چیزی است که بعداً تم سازی را ممکن می کند.مثال: وقتی بخواهی حالت تاریک را اضافه کنی، فقط لایه ی معنایی را تغییر می دهی. عناصر پایه یکسان می مانند، کامپوننت ها یکسان می مانند. فقط دوباره مشخص می کنی که color-primary به چه چیزی اشاره کند.مثال:[data-theme="dark"] { --color-primary: var(--blue-400); --color-text: var(--gray-100); --color-surface: var(--gray-800); }ویژگی های سفارشی CSS در زمان اجرا کار می کنند، یعنی بدون نیاز به مرحله ی ساخت به روزرسانی می شوند و می توان با جاوااسکریپت تغییرشان داد. آن ها از تغییر تم پشتیبانی می کنند، به ترجیحات کاربر پاسخ می دهند و به طور طبیعی در درخت کامپوننت های شما جاری می شوند. هیچ کدام از این ها با متغیرهای Sass ممکن نیست، چون Sass پیش از آنکه مرورگر آن ها را ببیند، کامپایل شده و از بین می رود.این فایل را در بالای شیوه نامه ی اصلی خود وارد کن و هر کامپوننتی که می نویسی، بلافاصله به هر توکنی دسترسی دارد.اول چه چیزی را بسازیم؟دکمه ها، فرم ها، کارت ها به همین ترتیبدکمه ها پرلمس ترین کامپوننت هر رابط کاربری هستند و در بیشترین حالت ها وجود دارند:پیش فرضهاورفوکوسفعالغیرفعالدر حال بارگذاریوقتی دکمه ها را اول می سازی، مجبور می شوی هم زمان درباره ی توکن های رنگ، شعاع گوشه ها، مقیاس فاصله گذاری و سبک حلقه ی فوکوس تصمیم بگیری. این تصمیم ها زبان بصری همه چیزِ بعدی را تعیین می کنند.مثال:.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); border-radius: var(--radius-md); border: none; cursor: pointer; transition: background-color 0.15s ease; } .btn-primary { background: var(--color-primary); color: var(--white); } .btn-primary:hover { background: var(--color-primary-hover); } .btn-primary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }دوم فرم هافرم ها جایی هستند که ناهماهنگی بصری بیشترین آزار را برای کاربر ایجاد می کند. فیلدهای ورودی، برچسب ها، حالت های خطا، متن راهنما. همه ی این ها باید یکدست به نظر برسند. فرم ها از مجموعه تصمیم های متفاوتی نسبت به دکمه ها استفاده می کنند.چرا فرم ها بعد از دکمه ها می آیند؟ چون وقتی دکمه ها را ساخته باشی، مقیاس فاصله گذاری و قواعد شعاع گوشه را قبلاً مشخص کرده ای. بنابراین کامپوننت های فرم بدون اینکه زور بزنی، خویشاوند دکمه ها به نظر می رسند.مثال ساده:.input { padding: var(--space-2) var(--space-3); border: 1px solid var(--gray-300); border-radius: var(--radius-md); font-size: var(--font-size-base); color: var(--color-text); background: var(--white); } .input:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }سوم کارت هاکارت ها عمومی ترین الگوی ظرف هستند. آن ها دکمه ها را در خود جای می دهند و گاهی عناصر فرم را شامل می شوند. به همین دلیل آخر از همه ساخته می شوند. چون می خواهی بعد از کامپوننت هایی بسازی شان که معمولاً داخلشان زندگی می کنند. کارت ها همچنین رنگ سطح و قواعد سایه را تعیین می کنند که به بقیه ی سیستم بازخورد می دهد.مثال:.card { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }مستندسازیمستندسازی همان بخشی است که توسعه دهنده های تک نفره بیشتر از همه نادیده می گیرند و شش ماه بعد پشیمان می شوند. چون یادشان نمی آید چرا --radius-md: 6px را انتخاب کرده اند یا برای حاشیه ی داخلی کامپوننت در مقابل حاشیه ی چیدمان، کدام مقدار فاصله را استفاده کنند.حداقلِ مستندسازی که واقعاً استفاده می شود، یک نمونه Storybook نیست. یک فایل HTML واحد است به نام design-system.html که tokens.css را import می کند و هر توکن و کامپوننت را به صورت بصری نمایش می دهد. نیازی به فریم ورک نیست. فقط یک صفحه که در مرورگر باز می کنی و می بینی همه چیز چه شکلی است و چه نامی دارد.این فایل را در بخش های زیر سازماندهی کن:رنگ ها: هر توکن معنایی به صورت یک نمونه رنگ با نام و مقدار فعلی اش در زیر آن. وقتی وسط کار هستی و یادت نمی آید نام رنگ متن کم رنگ چیست، این صفحه را باز می کنی، می بینی و نام توکن را کپی می کنی.تایپوگرافی: هر توکن اندازه با متن واقعی در همان اندازه نمایش داده می شود. مثلاً «Heading 1» با --font-size-3xl و --font-weight-bold، و «Body» با --font-size-base و --font-weight-normal. مرجع بصری همیشه از خواندن لیست مقادیر rem بهتر است.فاصله گذاری: یک مقیاس بصری که هر مقدار فاصله را به صورت یک نوار رنگی با همان عرض یا ارتفاع نشان می دهد. سیستم واحد پایه ۸ پیکسلی وقتی ریتم را ببینی، فوراً شهودی می شود.کامپوننت ها: هر کامپوننت در همه ی حالت هایش، همه در یک جا.دکمه: پیش فرض، هاور، غیرفعال.ورودی: خالی، فوکوس شده، خطا.کارت: پیش فرض.چه زمانی ابزار اضافه کنیم؟یک فایل CSS ساخت یافته نقطه ی شروع درستی است. اما چه زمانی بیشتر اضافه کنیم؟Style Dictionary زمانی ارزش دارد که بخواهی توکن ها را بین پلتفرم های مختلف به اشتراک بگذاری وب، iOS، اندروید یا ایمیل. این ابزار تعریف های JSON توکن را می گیرد و خروجی های مخصوص هر پلتفرم را تولید می کند:ویژگی های سفارشی CSSمتغیرهای Sassکاتالوگ های دارایی SwiftXML اندرویدبرای یک پروژه ی وب تک نفره، احتمالاً زیادی است. اما برای پروژه ای که هم اپ وب دارد و هم اپ React Native، زمان راه اندازی اش را سریع جبران می کند.https://styledictionary.com/Theo (محصول Salesforce) مشابه Style Dictionary کار می کند و نحو پیکربندی اش کمی ساده تر است. از سال ۲۰۲۵ نگهداری فعال کمتری دارد اما برای تیم هایی که زودتر آن را پذیرفته اند و نیازی به تغییر ندارند، هنوز کار می کند.https://github.com/salesforce-ux/theoبرای بیشتر پروژه های تک نفره و تیم های کوچک، همان فایل CSS ساخت یافته پاسخ درست است. بر اساس گزارش ۲۰۲۴ «State of Design Systems» از Specify، ۷۴٪ سیستم های طراحی بالغ از توکن ها به عنوان روش اصلی توزیع تصمیم های طراحی استفاده می کنند. اما قالبی که توکن ها در آن زندگی می کنند به اندازه ی نظم و انضباط در استفاده ی مداوم از آن ها مهم نیست.برنامه ی آخر هفته برای ساخت سیستم طراحیاین برنامه یک آخر هفته ی متمرکز است شنبه و یکشنبه و در مجموع حدود ۱۰ تا ۱۳ ساعت وقت می برد. هدف این است که یک سیستم طراحی حداقلی بسازی که از این به بعد در هر ویژگی جدید به کارت بیاید.شنبه صبح ۲ تا ۳ ساعت ساخت فایل tokens.cssاولین کار این است که فایل توکن ها را بسازی. در این فایل سه چیز را تعریف می کنی:رنگ های پایه و معنایی: مثل --blue-500 به عنوان مقدار خام، و --color-primary به عنوان توکن معنایی که به آن ارجاع می دهد.مقیاس فاصله گذاری: مثل --space-1 تا --space-12 بر پایه ی واحد ۸ پیکسلی.مقیاس تایپوگرافی: اندازه ها و وزن های فونت برای عنوان ها، متن اصلی، زیرنویس و برچسب.شنبه بعدازظهر ۳ تا ۴ ساعت ساخت کامپوننت دکمهحالا دکمه را می سازی. همه ی حالت هایش را پوشش می دهی:حالت پیش فرضحالت هاورحالت فوکوسحالت غیرفعالو اگر لازم بود، حالت در حال بارگذاریهر مقدار در دکمه باید یک توکن باشد. مثلاً:.btn { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); background: var(--color-primary); color: var(--white); border: none; cursor: pointer; transition: background-color 0.15s ease; } .btn:hover { background: var(--color-primary-hover); } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; }چرا دکمه اول؟ چون پرلمس ترین کامپوننت هر رابط کاربری است و بیشترین حالت ها را دارد. وقتی دکمه را درست بسازی، مجبور می شوی درباره ی رنگ، شعاع گوشه، فاصله گذاری و حلقه ی فوکوس تصمیم بگیری. این تصمیم ها زبان بصری بقیه ی سیستم را تعیین می کنند.یکشنبه صبح ۲ تا ۳ ساعت ساخت کامپوننت های فرمبعد از دکمه ها، فرم ها را می سازی. فرم ها جایی هستند که ناهماهنگی بصری بیشترین آزار را برای کاربر ایجاد می کند. اجزایی که باید بسازی:فیلد ورودی (Input)برچسب (Label)حالت خطا (Error State)متن راهنما (Help Text)از همان توکن هایی استفاده می کنی که در دکمه ها به کار بردی. چون مقیاس فاصله گذاری و شعاع گوشه را قبلاً مشخص کرده ای، فرم ها خودبه خود با دکمه ها هماهنگ به نظر می رسند.مثال ساده:.input { padding: var(--space-2) var(--space-3); border: 1px solid var(--gray-300); border-radius: var(--radius-md); font-size: var(--font-size-base); color: var(--color-text); background: var(--white); } .input:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }یکشنبه بعدازظهر ۲ ساعت ساخت کامپوننت کارت و شروع فایل مستنداتاول کارت را می سازی. کارت عمومی ترین الگوی ظرف است و دکمه ها و گاهی عناصر فرم را در خود جای می دهد. به همین دلیل آخر از همه ساخته می شود..card { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }بعد شروع می کنی به ساخت فایل design-system.html. در این مرحله فقط رنگ ها و تایپوگرافی را در آن نمایش می دهی. این فایل یک صفحه ی HTML ساده است که tokens.css را import می کند و توکن ها را به صورت بصری نشان می دهد.یکشنبه عصر ۱ ساعت تکمیل مستندات و کامیت نهاییحالا کامپوننت ها را به design-system.html اضافه می کنی. یعنی دکمه ها در همه ی حالت ها، فرم ها در حالت های خالی و فوکوس و خطا، و کارت در حالت پیش فرض. بعد همه چیز را کامیت می کنی. تمام.نتیجهبعد از این آخر هفته، یک سیستم طراحی داری که در هر ویژگی جدید زمان صرفه جویی می کند. نه به خاطر اینکه پیچیده است، بلکه به خاطر اینکه یکدست است. هر بار که به دکمه، فرم یا کارت جدید نیاز داشته باشی، از همین توکن ها و کامپوننت ها استفاده می کنی و دیگر از صفر شروع نمی کنی.امیر جوان میرامیر جوان میرTue, 06 Oct 2026 15:17:14 +0330