Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

ده گام برای طراحی رابط کاربری مینیمال / وحید ناموری

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 44 Publicité

ده گام برای طراحی رابط کاربری مینیمال / وحید ناموری

Télécharger pour lire hors ligne

گپ گرافیک تبریز
جلسه‌ی سی و سوم
ارائه دهنده: وحید ناموری

در ابتدای انقلاب کامپپیوتر و عمومی شدن استفاده از کامپیوتر شرکت اپل برای برقراری ارتباط کاربران با سخت‌افزارهایش سیستم عاملی را طراحی کرد که رابط کاربری آن بر مبنای اسکیومورفیسم پایه ریزی شده بود. اسکیومورفیسم به طور خلاصه یعنی تلاش برای شبیه‌سازی کردن از روی چیز دیگر. مثل کف‌پوش‌های پلاستیکی با طرح پارکت. اپل با این روش یک سری مفاهیم جدید را با واسطه‌های بصری و پلتفرم دسکتاپ ارائه کرد که بعدها مایکروسافت نیز این طرح را در ویندوز کپی کرد. مانند فایل، فولدر، درایو و استفاده از آیکون سطل آشغال برای پاک کردن داده‌ها. مشکل اصلی اسکیومورف حس بدی است که به مخاطب القا می‌کند. حس تقلبی بودن، این که گنجشک را جای قناری جا زدن و کم‌فهم فرض کردن کاربر. مایکروسافت امروز معتقد است بعد از چندین سال دیگر نیازی به اسکیومورفیسم نیست و می‌توان فرم خالص مفاهیم را بدون واسطه بصری انتقال داد. مثلن دیگر برای درک مفهوم حذف داده نیازی به استفاده از سطل آشغال نیست و یک کلید مستطیل ساده با واژه‌یdelete کافی است. این شرکت ریسک تغییر در اکوسیستم خود را پذیرفت و با تاثیر از سبک طراحی سوییس و مینیمالیسم رابط کاربری جدیدی با نام مترو طراحی نمود.
مواردی که در طراحی رابط کاربری مینیمال رعایت کنیم:
- ساده ≠ آسان: هر طرح ساده‌ای حتمن آسان نیست. رسیدن به طرح ساده نیاز به بررسی دقیق و داشتن درک کامل از مسئله دارید.
- فوکوس: روی هدف و خدمات اصلی فوکوس کنید.
- حذف: لکه‌ها و المان‌ها را به طور مجزا بررسی کنید که آیا بدون این لکه طرح هم‌چنان صد در صد پیام مورد نظر را انتقال می‌دهد؟ اگر جواب مثبت بود آن المان را حذف کنید.
- ترکیب: ارتباط بین لکه‌ها را بررسی کنید که آیا امکان ترکیب آن‌ها با هم وجود دارد؟
- رنگ‌: برای تمییز دادن لکه‌ها از کنتراست استفاده کنید و رنگ‌ها را با وسواس و خساست استفاده کنید.
- تایپ: از خانواده‌ی

گپ گرافیک تبریز
جلسه‌ی سی و سوم
ارائه دهنده: وحید ناموری

در ابتدای انقلاب کامپپیوتر و عمومی شدن استفاده از کامپیوتر شرکت اپل برای برقراری ارتباط کاربران با سخت‌افزارهایش سیستم عاملی را طراحی کرد که رابط کاربری آن بر مبنای اسکیومورفیسم پایه ریزی شده بود. اسکیومورفیسم به طور خلاصه یعنی تلاش برای شبیه‌سازی کردن از روی چیز دیگر. مثل کف‌پوش‌های پلاستیکی با طرح پارکت. اپل با این روش یک سری مفاهیم جدید را با واسطه‌های بصری و پلتفرم دسکتاپ ارائه کرد که بعدها مایکروسافت نیز این طرح را در ویندوز کپی کرد. مانند فایل، فولدر، درایو و استفاده از آیکون سطل آشغال برای پاک کردن داده‌ها. مشکل اصلی اسکیومورف حس بدی است که به مخاطب القا می‌کند. حس تقلبی بودن، این که گنجشک را جای قناری جا زدن و کم‌فهم فرض کردن کاربر. مایکروسافت امروز معتقد است بعد از چندین سال دیگر نیازی به اسکیومورفیسم نیست و می‌توان فرم خالص مفاهیم را بدون واسطه بصری انتقال داد. مثلن دیگر برای درک مفهوم حذف داده نیازی به استفاده از سطل آشغال نیست و یک کلید مستطیل ساده با واژه‌یdelete کافی است. این شرکت ریسک تغییر در اکوسیستم خود را پذیرفت و با تاثیر از سبک طراحی سوییس و مینیمالیسم رابط کاربری جدیدی با نام مترو طراحی نمود.
مواردی که در طراحی رابط کاربری مینیمال رعایت کنیم:
- ساده ≠ آسان: هر طرح ساده‌ای حتمن آسان نیست. رسیدن به طرح ساده نیاز به بررسی دقیق و داشتن درک کامل از مسئله دارید.
- فوکوس: روی هدف و خدمات اصلی فوکوس کنید.
- حذف: لکه‌ها و المان‌ها را به طور مجزا بررسی کنید که آیا بدون این لکه طرح هم‌چنان صد در صد پیام مورد نظر را انتقال می‌دهد؟ اگر جواب مثبت بود آن المان را حذف کنید.
- ترکیب: ارتباط بین لکه‌ها را بررسی کنید که آیا امکان ترکیب آن‌ها با هم وجود دارد؟
- رنگ‌: برای تمییز دادن لکه‌ها از کنتراست استفاده کنید و رنگ‌ها را با وسواس و خساست استفاده کنید.
- تایپ: از خانواده‌ی

Publicité
Publicité

Plus De Contenu Connexe

Similaire à ده گام برای طراحی رابط کاربری مینیمال / وحید ناموری (15)

Publicité

ده گام برای طراحی رابط کاربری مینیمال / وحید ناموری

  1. 1. ‫مینیمال‬ ‫کاربری‬ ‫رابط‬ ‫طراحی‬ ‫برای‬ ‫گام‬ 10
  2. 2. ‫تالش‬ ‫یعنی‬‫برای‬‫سازی‬‫شبیه‬‫دیگر‬ ‫چیز‬ ‫روی‬ ‫از‬ ‫کردن‬.
  3. 3. ‫مثل‬‫پارکت‬ ‫طرح‬ ‫با‬ ‫پالستیکی‬ ‫های‬‫پوش‬‫کف‬.
  4. 4. ‫روش‬ ‫این‬ ‫با‬ ‫اپل‬‫را‬ ‫جدیدی‬ ‫مفاهیم‬ ‫با‬‫های‬‫واسطه‬‫بصری‬‫بستر‬ ‫در‬‫دسکتاپ‬‫ارائه‬‫کرد‬. ‫برای‬ ‫آشغال‬ ‫سطل‬ ‫مثل‬‫حذف‬‫ها‬‫داده‬.
  5. 5. ‫بعدها‬‫کرد‬ ‫کپی‬ ‫ویندوز‬ ‫در‬ ‫را‬ ‫طرح‬ ‫این‬ ‫نیز‬ ‫مایکروسافت‬.
  6. 6. ‫مشکل‬‫اسکیومورفیسم‬‫زدن‬ ‫جا‬ ‫قناری‬ ‫جای‬ ‫را‬ ‫گنجشک‬ ، ‫و‬‫فهم‬‫کم‬‫است‬ ‫کاربر‬ ‫کردن‬ ‫فرض‬.
  7. 7. ‫با‬ ‫مایکروسافت‬‫مینیمالیسم‬ ‫و‬ ‫سوییس‬ ‫طراحی‬ ‫سبک‬ ‫از‬ ‫تاثیر‬ ‫رابط‬‫نمود‬ ‫طراحی‬ ‫مترو‬ ‫نام‬ ‫با‬ ‫جدیدی‬ ‫کاربری‬.
  8. 8. simple ≠ easy 1
  9. 9. ‫هر‬‫طرح‬‫ای‬‫ساده‬‫الزامن‬‫نیست‬ ‫آسان‬. ‫رسیدن‬ ‫برای‬‫دقیق‬ ‫بررسی‬ ‫به‬ ‫نیاز‬ ‫ساده‬ ‫طرح‬ ‫به‬‫و‬ ‫داشتن‬‫دارید‬ ‫مسئله‬ ‫از‬ ‫کامل‬ ‫درک‬. 1
  10. 10. details ≠ detail 2
  11. 11. ‫نیستند‬ ‫جزئی‬ ‫جزئیات‬. ‫مینیمال‬ ‫طراحی‬ ‫در‬‫ها‬‫آیتم‬‫خالص‬ ‫شکل‬ ‫در‬‫داده‬ ‫نمایش‬ ‫خود‬‫شوند‬‫می‬. ‫یک‬ ‫پس‬‫جزئی‬ ‫اجرایی‬ ‫ایراد‬‫به‬ ‫است‬ ‫ممکن‬ ‫راحتی‬ ‫به‬‫بیاید‬ ‫چشم‬. 2
  12. 12. 3
  13. 13. ‫اصلی‬ ‫خدمات‬ ‫و‬ ‫هدف‬ ‫روی‬‫تمرکز‬‫کنید‬. 3
  14. 14. 4
  15. 15. ‫ها‬‫لکه‬‫و‬‫ها‬‫المان‬‫بررسی‬ ‫مجزا‬ ‫طور‬ ‫به‬ ‫را‬‫کنید‬. ‫آیا‬‫طرح‬‫این‬ ‫بدون‬‫لکه‬‫چنان‬‫هم‬‫صد‬ ‫در‬ ‫صد‬ ‫پیام‬‫مورد‬‫نظرتان‬‫انتقال‬ ‫را‬‫دهد‬‫می‬‫؟‬ ‫اگر‬‫آن‬ ‫بود‬ ‫مثبت‬ ‫جواب‬‫المان‬‫کنید‬ ‫حذف‬ ‫را‬. 4
  16. 16. 5
  17. 17. ‫برای‬‫تمییز‬‫دادن‬‫ها‬‫لکه‬‫از‬‫کنتراست‬‫و‬ ‫کنید‬ ‫استفاده‬ ‫ها‬‫رنگ‬‫و‬ ‫وسواس‬ ‫با‬ ‫را‬‫خساست‬‫کنید‬ ‫استفاده‬. 5
  18. 18. 6
  19. 19. ‫از‬‫ی‬‫خانواده‬‫ارزش‬ ‫که‬ ‫کنید‬ ‫استفاده‬ ‫حروفی‬‫خطی‬‫ندارند‬ ‫زیادی‬. 6
  20. 20. 7
  21. 21. ‫فضای‬‫نیست‬ ‫خالی‬ ‫فضای‬ ‫منفی‬‫یک‬ ‫بلکه‬‫المان‬‫موثر‬‫است‬. ‫پس‬‫در‬‫کارگیری‬‫به‬‫باشید‬ ‫نداشته‬ ‫واهمه‬ ‫آن‬ ‫از‬. 7
  22. 22. 8
  23. 23. ‫گرید‬‫نظم‬ ‫به‬‫مطالعه‬ ‫و‬ ‫دادن‬‫ی‬‫رابطه‬‫ها‬‫لکه‬‫کمک‬ ‫هم‬ ‫با‬‫کند‬‫می‬. ‫با‬‫روش‬ ‫این‬‫توان‬‫می‬‫کرد‬ ‫جلوگیری‬ ‫ناخواسته‬ ‫اتفاقات‬ ‫از‬ ‫و‬‫شکل‬ ‫به‬ ‫را‬ ‫پیام‬‫تری‬‫یافته‬‫سازمان‬‫داد‬ ‫انتقال‬. 8
  24. 24. 9
  25. 25. ‫مبانی‬ ‫با‬‫مثل‬ ‫تجسمی‬ ‫هنرهای‬،‫تقارن‬،‫تناسب‬‫بندی‬‫ترکیب‬‫و‬... ‫توان‬‫می‬‫انتقال‬ ‫بصری‬ ‫صورت‬ ‫به‬ ‫را‬ ‫نظرمان‬ ‫مورد‬ ‫پیام‬‫دهیم‬. 9
  26. 26. 10
  27. 27. ‫استفاده‬‫تک‬ ‫از‬‫هایی‬‫عکس‬‫که‬‫صفحه‬ ‫تمام‬‫را‬‫گیرند‬‫می‬. 10

×