https://virgool.io/feed/@HasanHemmati Digital Product Designer fa 2026-06-16 11:36:01 https://files.virgool.io/upload/users/4446/avatar/e9PoH7.png?height=120&width=120 https://virgool.io/@HasanHemmati https://virgool.io/@HasanHemmati/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B3%D8%A7%D8%AE%D8%AA-%D8%B3%DB%8C%D9%85%D8%A8%D9%84-%D8%AF%D8%A7%DB%8C%D9%86%D8%A7%D9%85%DB%8C%DA%A9-material-outlined-text-field-uk1rw5nl55sk چند روز پیش توی دریبل این شات رو گذاشتم. این یه سیمبل اسکچ هستش که تکست فیلد متریال رو شبیه‌سازی کرده بودم. نکته قابل توجه توی این سیمبل فاصله marginی هست که لیبل از کنار خودش توی حالت Focus داره و این مارجین با کم و زیاد شدن نوشته ثابت میمونه. حالا میخوام توضیح بدم که چجوری این سیمبل رو میتونین خودتون توی اسکچ بسازید.نحوه کارکرد این سیمبل در اسکچقدم اول: ساخت Borderما برای اینکه یه سیمبل داینامیک داشته باشیم نمیتونیم صرفا از Rectangle و Border Color استفاده کنیم. از Boolean Operationهای اسکچ قراره استفاده کنیم تا border رو بتونیم شبیه‌سازی کنیم.یه مستطیل با رنگ دلخواه بکشید. طبق متریال شعاع گوشه مستطیل باید ۴ باشد.یک مستطیل دیگه بکشید که از هر سمت ۲ پیکسل از قبلی کوچک تر باشه و شعاع گوشه‌هاش ۲ پیکسل باشه.مستطیل کوچک‌تر رو انتخاب کنین و به تمام لبه‌ها پین کنیدش: این دوتا رو از هم Subtract کنین. الان شکلی دارید که دقیقا رفتاری شبیه به یه مستطیل عادی با border 2px داره:شکلتون رو به یک سیمبل کنین.قدم دوم: ایجاد برش لیبلبرای اینکه مارجین لیبل رو بتونیم داینامیک درست کنیم باید یه برش بالای مستطیلمون درست کنیم.و مثل قدم قبلی باید subtract کنیم. با این مشخصات:Width: (همواره باید ۱۱ پیکسل از هر طرف فاصله داشته باشه(که تو این مورد میشه ۳۰۶ پیکسلHeight: 2pxFixed heightPin: Top, Left, Rightشکلمونو تست میکنیم:قدم سوم: اضافه کردن لیبل و حاشیه بالااسکچ یه قابلیت خیلی باحال داره که باعث میشه شکل‌ها فاصلشون رو نسبت به نوشته‌ها توی یه سیمبل حفظ کنن.که اینطوری کار میکنه:توی سیمبل اول چون دایره ارتفاعش از نوشته کوتاه‌تره این واکنش رو نشون میده. توی سیمبل دوم چون بزرگ‌تره سر جاش میمونه.حالا ما از این قابلیت استفاده میکنیم تا خط بالای تکست فیلدمون نسبت به اندازه لیبل واکنش نشون بده.لیبلمون رو با این مشخصات میسازیم:حالا میخوایم که border بالا رو کامل کنیم:یه مستطیل با عرض زیاد (مثلا ۱۰۰۰) و ارتفاع ۲ پیکسل با فاصله ۵ پیکسل از لیبلمون میکشیم:که اگه لیبلمون رو تغییر بدیم خط واکنش نشون میده:قدم چهارم: حذف اضافه خط بالابا یه لایه ماسک میتونیم اضافه خط بالا رو حذف کنیم:تمام! هدف از این آموزش گفتن دو سه تا از قابلیت‌های باحال اسکچ بود. امیدوارم به دردتون خورده باشه.اگه سوالی داشتین کامنت بذارید اگه بتونم حتما کمک میکنم :)منو میتونین توی توییتر و اینستاگرام دنبال کنین. Hasan Hemmati Torabi Hasan Hemmati Torabi Wed, 16 Jan 2019 18:47:07 +0330 https://virgool.io/@HasanHemmati/isometric-oz3py43hajvo با دیدن این توییت از امین نجفی عزیز که تصویرسازی‌هاش رو خیلی دوست دارم، گفتم یه مطلب کوتاه درباره آیکن‌های ایزومتریک بنویسم.از امین نجفی به عنوان کسی که در هر بخشی از طراحی بصری - از طراحی گرافیک تا طراحی وب و تجربه کاربری - تجربه دارم میتونم بگم که طراحی آیکن یکی از لذت‌بخش‌ترین کارها است. اینکه می‌تونم یک مفهوم پیچیده از دنیای واقعی را در نمودی ساده به نمایش بگذارم خیلی خوب و دوست‌داشتنیه. از انواع سبک‌های طراحی آیکن سبک مورد علاقه‌ام ایزومتریک (Isometric) هست. ایزومتریک یک تکنیک نمایش اجسام به کمک فرمول‌های ساده ریاضی است. کافی است هر جسمی در راستای محور عمودی خود ۴۵° بچرخد و به اندازه tan30 (یا تقریبا ۳۵.۲۶°) به جلو مایل شود.حالا اگه بخوایم توی Illustrator یک مکعب ایزومتریک بسازیم مراحل زیر رو باید بریم:از متد SSR میخوایم استفاده کنیم: scale, shear, rotateیک مربع می‌کشیم، مربع رو از ارتفاع ۸۶.۰۶٪ کوتاه می‌کنیم (Scale)، مستطیل رو ۳۰درجه می‌کشیم (Shear)، و در نهایت ۳۰درجه می‌چرخانیم(Rotate):مربع رو از ارتفاع ۸۶.۰۶٪ کوتاه می‌کنیم (Scale)مستطیل رو ۳۰درجه می‌کشیم (Shear) ۳۰درجه می‌چرخانیم(Rotate)برای ساختن وجه‌های دیگر مکعب از درجه‌های زیر استفاده می‌کنیم:خب الان دیگر هر اطلاعات فنی‌ای که لازم هست رو می‌دونیم. بقیه‌ش به دیگه به خلاقیت و سخت‌کوشی برمیگرده. چون آیکن‌های ایزومتریک همین‌قدر ساده اما با سخت‌کوشی طراحی می‌شوند.نمونه‌هایی از آیکن‌های ایزومتریک:آموزش ساخت این ساختمان: https://design.tutsplus.com/tutorials/create-a-detailed-isometric-building-in-adobe-illustrator--vector-6041 طراحی ایزومتریک نه فقط در آیکن بلکه در تصویرسازی نیز استفاده میشهمنتظر خوندن نظرات یا دیدن کارهای ایزومتریک شما دوستان عزیز هستم :) Hasan Hemmati Torabi Hasan Hemmati Torabi Sat, 16 Jun 2018 13:33:31 +0430 https://virgool.io/@HasanHemmati/learn-ux-m4nn3fpxyt57 این یک نوشته خودمونی است درباره تجربیات خودم.تقریبا دو سال پیش بود که می‌خواستم از طراح گرافیک تغییر حرفه بدم به سمت طراحی سایت. بدون هیچ دانشی از طراحی برای کاربر، صرفا با تکیه به اینکه گرافیک و فوتوشاپ بلدم شروع به کار کردم. فرایند طراحیم به این شکل بود: سفارش که می‌گرفتم می‌رفتم سایت‌های مشابه با اون موضوع رو نگاه می‌کردم و سعی می‌کردم چیزی شبیه به اون طراحی کنم. طراحی‌هایی که انجام میدادم از نظر گرافیکی و زیبایی در حد خیلی خوبی بودن.اما یچیزی این وسط کم بود... کاربر!من به عنوان کسی که رابط بین سیستم و کسی که ازش استفاده میکنه (کاربر) رو طراحی می‌کردم، تمام دیتایی که داشتم رو از کارفرما و محصولات (سایت، اپ، نرم‌افزار و ...) مشابه می‌گرفتم و فاکتور بسیار کلیدی کاربر رو نادیده گرفته بودم. با اینکه برای الهام گرفتن (یا کپی کردن :دی) از گوگل، پینترست، abduzeedo، upLabs و ... استفاده می‌کردم اصلا به همچین موضوعی برنخورده بودم. پس فکر می‌کردم که چیز بسیار مهمی کشف کردم که کسی تابحال به اون فکر نکرده. گرچه اشتباه میکردم، اما برای شخص خودم موضوع بسیار مهمی رو متوجه شدم.خب با اولین سرچی که انجام دادم با انبوهی از اطلاعات مواجه شدم! اصطلاحات کاملا جدیدی مثل UX، HCI، Interaction Design، Usability،User-Centered Design و ... که هیچ ایده‌ای نداشتم که چه معنی‌ای میدادند.اصطلاح‌ها و عبارت‌هااولین چیزی که بهش رجوع کردم ویکیپدیا بود. صفحات این اصطلاحات رو میخوندم تا یک ایده کلی در موردشون بگیرم. میدونستم که ویکیپدیا مرجع تخصصی نیست و بخاطر همین موضوع برای شروع گزینه خوبی بود.بلاگ‌ها و مقاله‌هابعد از اون سراغ رفیق دیرین خودم رفتم یعنی feedly.com. فیدلی یه خبرخوان سبک و راحته که من قبلا برای مقاله‌ها و آموزش‌های گرافیک ازش استفاده می‌کردم. یه دسته جدید به اسم ux-design توش درست کردم و بلاگ‌های زیر رو دنبال کردم: https://www.invisionapp.com/blog https://www.toptal.com/designers/blog https://www.nngroup.com/articles/ https://www.interaction-design.org/literature/article/overview و بهترین و غنی‌ترین منبع هم سایت مدیوم بود: https://medium.com/topic/digital-design و یکی از سایت‌هایی که هر از چندگاهی بهش سر میزنم، سایتی از مجموعه استک‌اکسچنج (مجموعه‌ای که استک‌آور فلو هم جزوش هست) که مخصوص سوالات و مشکلات دیزاین هست: https://ux.stackexchange.com/ کتاب‌هااصولا آدمی هستم که با متن بهتر یاد می‌گیریم. آموزش‌های ویدیویی رو خیلی قبول ندارم و ترجیح میدم با کتاب و مقاله مطلبی رو یاد بگیرم. کتاب‌هایی که حتما توصیه می‌کنم: http://harforang.com/15-%DA%A9%D8%AA%D8%A7%D8%A8-ux-%DA%A9%D9%87-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A8%D8%AE%D9%88%D8%A7%D9%86%DB%8C%D8%AF/ البته این پست وبلاگی رو خیلی وقت پیش نوشتم و بعضی از لینک‌های دانلود شاید از کار افتاده باشهکورس‌های آنلاینبعد از اینکه کمی درباره دنیای دیزاین کاربرمحور اطلاعات کسب کرده بودم وقتش بود که یکم دانسته‌هام رو منظم‌تر و تخصصی تر کنم. سایت‌هایی مثل interaction-design.org، coursera.com، udemy.com، cooper.com و ... رو بررسی کردم. در نهایت سایت interaction-design.or رو ثبت‌نام کردم به دلایل زیر: محتوای غنی. idf یکی از معدود آموزشگاه‌هایی است که تخصصی روی دیزاین تجربه کاربری کار میکنه و بخاطر همین تمامی مطالبش برای کسی که به ux علاقمنده مناسبه.تعداد کسایی که idf رو ریکامند (تایید؟‌ پیشنهاد؟...) کرده بودن زیاد بود. با گشتن توی توییتر، ردیت، مدیوم و لینکدین فهمیدم که خیلیا از idf راضین.مدرک معتبر. درسته که تا وقتی کاربلد نباشین با مدرک نمیتونین کار پیدا کنین، اما idf مدرک رو وقتی بهتون میده که مطمئن باشه مطالب رو یاد گرفتین. هر دوره در idf شامل یک سری درس هست، و هر درست هم محتواش بصورت متنی، صوتی یا ویدیویی هست. در پایان هر درس از شما سوال پرسیده میشه که سوال‌ها سه گزینه‌ای و تشریحی هستند. با جواب درست دادن به سوالات امتیازی میگیرین که اگر امتیاز کل دوره به ۷۰٪ برسه میتونین مدرک اون دوره رو بگیرین. نمونه‌ی مدرک idfدوره‌های متنوع. idf بازه وسیعی از دوره‌های مختلف رو پوشش میده، در سطوح مبتدی، متوسط و پیشرفته. https://www.interaction-design.org/courses و در آخر و مهم‌تر از همه، قیمت! سیستم قیمت‌گذاری بقیه آموزش‌گاه‌ها به این شکل بود که هر دوره قیمت خاص خودش رو داشت، مثلا کورسرا هر دوره نزدیک ۴۰ دلار قیمتش بود. اما idf قیمت‌گذاریش متفاوته. idf یک حق اشتراک سالیانه دریافت می‌کنه که در اون مدت شما به تمام دوره‌هاش دسترسی کامل دارید. این موضوع برای کسی که بخواد مطالب زیادی در مدت زمان کمی دریافت کنه ایده‌آله.اگر تصمیم دارید که با idf دیزاین رو یادبگیرید، میتونین از لینک معرفی من استفاده کنین. ۳ ماه به من و ۳ ماه به شما اشتراک رایگان میده بهترین روش یادگیریکار، کار، کارتجربه کاربری فصل مشترکی بین چند علم است. شما هرچقدر هم کتاب و مقاله و آموزش ببینید باز هم احساس خواهید کرد که کافی نیست. تجربه کاربری با پشت کامپیوتر نشستن به دست نمی‌آید، همچنین با سر کلاس نشستن و کتاب در دست گرفتن. باید رفت بیرون و با کاربر صحبت کرد، او را شناخت. رفتارش، نیازش، انگیزه‌ها و علایقش. تجربه کاربری یک‌جور نگرش است که بتوانید در تمام مراحل طراحی، کاربر را در مرکز تصمیمات خود قراردهید. باید بتوانید طرح خودتون رو نقد کنید و همچنین نقد دیگران را بپذیرید، برای اشکالات طرح خود به سرعت راه‌حل ارائه دهید و این چرخه را تا آخر عمر هر طرحی ادامه دهید.این بود تجربیات من از تغییر حرفه از طراح گرافیک به طراح تجربه کاربری.خوشحال میشم نظرات و تجربیات شما رو بشنوم، پس لطفا نظر دهید. Hasan Hemmati Torabi Hasan Hemmati Torabi Wed, 04 Apr 2018 19:10:44 +0430 https://virgool.io/Usability/usability-zafk747ef2cu ارزیابی کاربردپذیری بر این موضوع تمرکز دارد که کاربران چقدر راحت می‌توانند از محصول برای رسیدن به اهداف خود استفاده کنند و چقدر این فرایند برایشان رضایت‌بخش بوده. متخصصین کاربردپذیری از متدها و روش‌های گوناگونی استفاده می‌کنند که بازخوردهای کاربران درباره یک محصول موجود، یا طرحی برای محصول جدید را جمع‌آوری می‌کند.این مطلب بخشی از مبانی تجربه کاربری است.کاربردپذیری چیست؟کاربردپذیری - Usability - درباره کیفیت تجربه‌ی کاربر هنگام تعامل با محصولات و سیستم‌ها؛ شامل وب‌سایت‌ها، نرم‌افزارها، دستگاه‌ها (Devices) و اپلیکیشن‌ها است. کاربردپذیری درباره اثربخشی، کارایی و رضایت کلی کاربر است.نکته مهم اینکه کاربردپذیری یک خاصیت یک‌بعدی یک محصول، سایت و رابط کاربری نیست. کاربردپذیری ترکیب فاکتور‌های زیر است:طراحی خودآموز: کاربر به سرعت و بدون تلاش بتواند ساختار و نویگیشن (Navigation) محصول را درک کند.یادگیری آسان: کاربری که تابحال با محصول کارنکرده چقدر سریع می‌تواند با رابط کاربر ارتباط برقرار کند و کارهایی ساده با آن انجام دهد؟کارایی در استفاده: کاربری که بارها با محصول کار کرده چقد سریع می‌تواند کارهایش را انجام دهد؟یادآوری: بعد از دیدن سایت، کاربر چقدر از ساختار سایت را برای استفاده کاراتر در آینده به خاطر می‌سپارد؟تکرار و شدت خطاها: هرچند وقت یکبار کاربران در برنامه دچار خطا می‌شوند؟ خطاها چقدر جدی هستند؟ و کاربران چگونه خطاها را رفع می‌کنند؟رضایت درونی: آیا کاربر دوست دارد که باز از برنامه استفاده کند؟روش‌های ارزیابی کاربردپذیریکلید دستیابی به محصولی که توسط کاربران استفاده شود، به‌کارگیری طراحی کاربرمحور است. عبارت «زودتر و مکرر تست کن» مناسب تست‌های کاربردپذیری است. به عنوان بخشی از UCD (User-Centered Design) شما باید هرچه زودتر تست‌های کاربردپذیری را انجام دهید. استفاده از هرکدام یا ترکیبی از روش‌های زیر به طور قابل ملاحظه‌ای کاربردپذیری سایت یا اپلیکیشن شما را بهبود می‌دهد:برگزاری آزمون‌های کاربردپذیریفوکوس‌گروپ، پرسش‌نامه و مصاحبه برای فهمیدن اهداف کاربرمرتب‌سازی کارت (Card Sorting) برای کمک به توسعه معماری اطلاعاتساخت وایرفریم برای نویگیشن بهترآزمون «اولین کلیک» برای اینکه بفهمید کاربران در مسیر درست می‌روندآزمون کاربردپذیری برای اندازه‌گیری تعامل کاربرنظرسنجی برای فهمیدن رضایت کاربران از محصولاستفاده از داده‌هایی که از تست‌ها به‌دست می‌آیدآزمون‌های کاربردپذیری در نهایت ۲ نوع داده به ما می‌دهند: داده‌های کیفی و داده‌های کمی.داده‌های کمی می‌گویند که دقیقا چه اتفاقاتی افتاده و داده‌های کیفی توصیف گفته‌ها و کار‌های شرکت‌کنندگان در آزمون است.حالا که داده‌ها را در اختیار دارید، می‌توانید:۱. کاربردپذیری محصول را ارزیابی کنید.۲. بهبودهای لازم را توصیه کنید.۳. توصیه‌ها را پیاده‌سازی کنید.۴. محصول را دوباره تست کنید تا تاثیر تغییرات را اندازه‌گیری کنید.این مطلب بخشی از مبانی تجربه کاربری است. Hasan Hemmati Torabi Hasan Hemmati Torabi Mon, 02 Apr 2018 11:31:54 +0430 https://virgool.io/@HasanHemmati/uxbasics-et3vngxjj1pq تجربه کاربری (UX) بر درک عمیقی از کاربران تمرکز دارد. چه چیزهایی نیاز دارند، ارزش‌هایشان چیست، توانایی‌هایشان و هم‌چنین محدودیت‌هایشان. تجربه کاربری همچنین اهداف تجاری گروهی که پروژه را تعریف می‌کنند نیز در نظر می‌گیرد. به‌کارگیری طراحی تجربه کاربری در نهایت باعث بهبود کیفیت تعامل کاربر با محصول خواهد شد.عوامل موثر در تجربه کاربریتجربه کاربری تضمین می‌کند که کاربران در محتوایی که شما به آنها ارائه می‌کنید ارزش قائل می‌شوند. Peter Morville با طرح لانه زنبوری خود تجربه کاربری را اینطور تعریف می‌کند:برای دست‌یابی به تجربه کاربری با ارزش و معنی‌دار، اطلاعات باید:مفید: محتوا باید اصیل باشد و حتما نیازی را برطرف سازد،قابل استفاده: استفاده از محصول باید ساده باشد،مطلوب: عکس‌ها، هویت، برند و دیگر المان‌های بصری باید باعث برانگیختن احساسات (خصوصا احساسات مثبت) شود،جستجو پذیر: محتوا باید قابل دستیابی و جستجو باشد، چه داخل و چه خارج از محصول،دسترس‌پذیر: محتوا باید برای افراد دارای معلولیت نیز در دسترس باشد،باورپذیر: کاربران باید بتوانند به شما اعتماد کنند و محتوای شما را باور کنند.حوزه‌های مرتبط با ساخت تجربه کاربریتجربه کاربری حوزه‌ای درحال رشد است که همچنان در حال تعریف شدن است. ساخت یک دیزاین کاربر محور اصول Human-Computer Interaction را دربرمی‌گیرد و همچنین پا را فراتر گذاشته و حوزه‌های زیر را نیز شامل می‌شود:در پست‌های جداگانه‌ای به مرور هر کدام از این حوزه‌ها توضیح مفصل داده خواهند شد. پس یادتون نره +دنبال کنید ;)مدیریت پروژه (Project Management) بر برنامه‌ریزی و سازماندهی یک پروژه و منابعش متمرکز است. این شامل شناسایی و مدیریت روش‌ها، بکار بردن این روش‌ها در فرایند طراحی کاربر محور، تنظیم تیم و راهنمایی موثر تیم در تمام مراحل تا تکمیل پروژه.کاربرپژوهی (User Research) بر فهم رفتارها، نیازها و انگیزه‌های کاربر از طریق تکنیک‌های شهودی، تجزیه و تحلیل داده‌ها و دیگر روش‌های دریافت بازخورد تمرکز دارد.کاربردپذیری (Usability) بر این متمرکز است که کاربران چقدر راحت می‌توانند برای رسیدن به اهداف خود از محصول استفاده کنند. همچنین مشخص می‌کند که کاربران در طول این فرایند چقدر رضایت دارند.معماری اطلاعات (Information Architecture) بر چگونگی دسته‌بندی، ساختار و نمایش اطلاعات به کاربران تمرکز دارد.طراحی رابط کاربری (User Interface Design) کاری که کاربر می‌خواهد انجام دهد را پیش‌بینی می‌کند و تضمین می‌کند المان‌هایی که در رابط به کار رفته به‌راحتی در دسترس، قابل درک هستند و کارهایی که کاربر می‌خواهد را انجام می‌دهد.طراحی بصری (Visual Design) تضمین می‌کند که رابط کاربری زیبا و ودل‌انگیز است و همچنین در راستای اهداف برند قرار دارد.استراتژی محتوا (Content Strategy) بر نوشتن و جمع‌آوری محتوای مفید برای کاربران با برنامه‌ریزی تولید، تحویل و نظارت بر آن‌ها تمرکز دارد.دسترسی‌پذیری (Accessibility) بر این تمرکز دارد که چطور یک فرد دارای معلولیت (هر نوعی) به محصول (سایت، اپلیکیشن و هر سیستم یا سرویسی) دسترسی دارد و از آن نفع می‌برد.آنالیتیک (Analytics) بر جمع‌آوری، گزارش و تجزیه و تحلیل اطلاعات یک محصول تمرکز دارد.منابع:مقاله - Elements of User Experience diagram از Jesse James Garrettمقاله - User Experience Honeycomb diagram از Peter Morville کتاب - The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition) از Jesse James Garrett  Hasan Hemmati Torabi Hasan Hemmati Torabi Sat, 31 Mar 2018 14:30:18 +0430