UX یا همان تجربه کاربری گرچه ارتباط بسیار نزدیکی به مفاهیم UI دارد اما تقریبا دو موضوع جدای از یکدیگر هستند ، اگر شما بخواهید یک رابط کاربری خوب را طراحی کنید بهتر است از تجربه کاربری(ux) سر در بیاورید. در این دوره ما به بخش کوچکی از دانش ux پرداختیم .
موارد بیشتر
طراحی و تجربه کاربری
رابط کاربری (UI)
رابط کاربری یا UI که مخفف کلمه ی User Interface می‌باشد، ابزار تعاملی کاربر با صفحات وبسایت، نرم افزار، سیستم عامل، اپلیکیشن و …محسوب می‌شوند. در واقع مخاطب از طریق ui می‌تواند با سیستم های مختلف ارتباط برقرار کند. امروزه بهبود هر چه بیشتر رابط کاربری که در نهایت باعث رضایت کاربر می‌شود
طراح کاربر Ui/Ux
طراحی رابط کاربری چیزی فراتر از کار با فتوشاپ و کارهنری هست و اصول ویژه آن باید رعایت شود تا بهترین نتیجه حاصل گردد. در مرحله ی اول باید بتوانیم ساختار را رعایت کنیم. رعایت ساختار به این معناست که طراح هدف و سمت و سویی مشخص داشته باشد و طراح از لحظه ی اول طراحی بداند قرار است چه چیزی و با چه ساختاری طراحی کند. در مرحله بعدی رعایت سادگی شرط است. عناصر استفاده شده در UI نباید مبهم و پیچیده باشند که کاربر با چندین کلیک پیاپی و مراحل پیچیده به خواسته ی خود برسد و یا آنچه را که میخواهد پیدا نکند. به عبارتی دیگر، مهم نیست تکنولوژی چقدر پیشرفته است، کاربری را آسان نگه دارید!
سرفصل
-
1 . اصول و مبانی طراحی
- آشنایی با اصول و مبانی طراحی - چیدمان و طرح بندی (Layout) - سلسله مراتب بصری (Visual Hierarchy) - انواع رنگ ها ، پالت رنگی و تضاد رنگ ها (Color Palette & Contrast) - تایپوگرافی (Typography) - فاصله گذاری (Spacing) - نویز بصری (Visual Noise) - ترکیب بندی (Composition) - راهنمای طراحی (Design Guide) - الگوهای طراحی (Design Patterns) - ثبات در طراحی (Design Consistency) - آیکونوگرافی (Iconography) - سبک های طراحی (Design Trends) - گردش کار در طراحی (Design Workflow) - طراحی واکنش گرا و اصول آن (Responsive Design)
-
2 . آموزش نرم افزار figma
معرفی و آشنایی با Figma آشنایی با محیط Figma صفحات ، آرتبوردها و لایه ها آشنایی با نوار ابزار (Toolbar) اشکال و تغییرات روی آنها (Shapes) ترکیب اشکال (Boolean Operations) متون و استایل ها آنها (Text & Text Styles) استایل ها (Styling) ماسک کردن (Mask) کامپوننت ها (Components) طراحی بر اساس Layout Grid پلاگین ها و معرفی آنها (Plugins) خروجی گرفتن (Exporting) چیدمان خودکار ۱ (Auto Layout) طراحی همزمان و ارسال نظر (Multiplayer & Commenting) آشنایی با Library و استفاده تیمی از کامپوننت ها کلیدهای میانبر
-
3 . آموزش نرم افزارAdobe XD
در این بخش با نرم افزار Adobe XD آشنا می شویم و امکانات و نحوه طراحی رابط کاربری را با آن فرا خواهیم گرفت. معرفی و آشنایی با Adobe XD آشنایی با نوار منو بالا (Menu bar) آشنایی با نوار ابزار (Toolbar) آرتبوردها و لایه ها چیدمان و مرتب سازی (Align) اشکال و تغییرات روی آنها (Shapes) ترکیب اشکال (Boolean Operations) متون و استایل ها آنها (Text & Text Styles) استایل ها (Styling) ماسک کردن (Mask) کامپوننت ها ، Character Style ها و تب Assets گریدبندی بر اساس Layout و Square پلاگین ها و معرفی آنها (Plugins) خروجی گرفتن (Exporting)
-
4 . آموزش نرم افزارSketch
در این بخش با نرم افزار Sketch ، امکانات آن و نحوه طراحی کردن رابط کاربری با آن را یاد خواهیم گرفت. آشنایی با نرم افزار Sketch آشنایی با ظاهر و امکانات Sketch صفحات ، آرتبوردها و لایه ها نوار ابزار (Toolbar) - بخش اول نوار ابزار (Toolbar) - بخش دوم ترکیب اشکال (Boolean Operations) اشکال و تغییرات روی آنها (Shapes) متون و استایل ها آنها (Text & Text Styles) تصاویر (Images) ترازبندی لایه ها (Layers Alignment) ماسک کردن (Mask) طراحی بر اساس Grid و Layout سیمبل ها (Symbols) نصب پلاگین و معرفی آنها (Plugins) خروجی گرفتن (Exporting) عناصر پویا (Smart Layout) ساخت Library و استفاده در پروژه ها کلیدهای میانبر و ساخت آنها