١٠ گام برای طراحی رابط کاربری مینیمال

44
ینیمالبری مبط کاراحی رام برای طر گا10

Upload: gapgraphic

Post on 21-Dec-2014

436 views

Category:

Design


4 download

DESCRIPTION

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

TRANSCRIPT

Page 1: ١٠ گام برای طراحی رابط کاربری مینیمال

گام برای طراحی رابط کاربری مینیمال 10

Page 2: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 3: ١٠ گام برای طراحی رابط کاربری مینیمال

.کردن از روی چیز دیگرشبیه سازیبرای یعنی تالش

Page 4: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 5: ١٠ گام برای طراحی رابط کاربری مینیمال

. کف پوش های پالستیکی با طرح پارکتمثل

Page 6: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 7: ١٠ گام برای طراحی رابط کاربری مینیمال

مفاهیم جدیدی را اپل با این روش

.کردارائه دسکتاپدر بستر بصری واسطه هایبا

. داده هاحذف مثل سطل آشغال برای

Page 8: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 9: ١٠ گام برای طراحی رابط کاربری مینیمال

. مایکروسافت نیز این طرح را در ویندوز کپی کردبعدها

Page 10: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 11: ١٠ گام برای طراحی رابط کاربری مینیمال

، گنجشک را جای قناری جا زدناسکیومورفیسممشکل

.فرض کردن کاربر استکم فهمو

Page 12: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 13: ١٠ گام برای طراحی رابط کاربری مینیمال

تاثیر از سبک طراحی سوییس و مینیمالیسم مایکروسافت با

.کاربری جدیدی با نام مترو طراحی نمودرابط

Page 14: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 15: ١٠ گام برای طراحی رابط کاربری مینیمال

simple ≠ easy

1

Page 16: ١٠ گام برای طراحی رابط کاربری مینیمال

. آسان نیستالزامنساده ایطرح هر

و به طرح ساده نیاز به بررسی دقیق برای رسیدن

.درک کامل از مسئله داریدداشتن

1

Page 17: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 18: ١٠ گام برای طراحی رابط کاربری مینیمال

details ≠ detail

2

Page 19: ١٠ گام برای طراحی رابط کاربری مینیمال

. جزئیات جزئی نیستند

.می شوندخود نمایش داده در شکل خالص آیتم هادر طراحی مینیمال

.چشم بیایدبه راحتی ممکن است به ایراد اجرایی جزئی پس یک

2

Page 20: ١٠ گام برای طراحی رابط کاربری مینیمال

3

Page 21: ١٠ گام برای طراحی رابط کاربری مینیمال

.کنیدتمرکز روی هدف و خدمات اصلی

3

Page 22: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 23: ١٠ گام برای طراحی رابط کاربری مینیمال

4

Page 24: ١٠ گام برای طراحی رابط کاربری مینیمال

. کنیدرا به طور مجزا بررسی المان هاو لکه ها

صد در صد هم چنانلکه بدون این طرحآیا

؟ می دهدرا انتقال نظرتان مورد پیام

. را حذف کنیدالمانجواب مثبت بود آن اگر

4

Page 25: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 26: ١٠ گام برای طراحی رابط کاربری مینیمال

5

Page 27: ١٠ گام برای طراحی رابط کاربری مینیمال

استفاده کنید و کنتراستاز لکه هادادن تمییزبرای

.استفاده کنیدخساسترا با وسواس و رنگ ها

5

Page 28: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 29: ١٠ گام برای طراحی رابط کاربری مینیمال

6

Page 30: ١٠ گام برای طراحی رابط کاربری مینیمال

.زیادی ندارندخطیحروفی استفاده کنید که ارزش خانواده یاز

6

Page 31: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 32: ١٠ گام برای طراحی رابط کاربری مینیمال

7

Page 33: ١٠ گام برای طراحی رابط کاربری مینیمال

.استموثر المانبلکه یک منفی فضای خالی نیست فضای

.از آن واهمه نداشته باشیدبه کارگیریدر پس

7

Page 34: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 35: ١٠ گام برای طراحی رابط کاربری مینیمال

8

Page 36: ١٠ گام برای طراحی رابط کاربری مینیمال

. می کندبا هم کمک لکه هارابطه یدادن و مطالعه به نظم گرید

از اتفاقات ناخواسته جلوگیری کرد می تواناین روش با

.انتقال دادسازمان یافته تریپیام را به شکل و

8

Page 37: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 38: ١٠ گام برای طراحی رابط کاربری مینیمال

9

Page 39: ١٠ گام برای طراحی رابط کاربری مینیمال

...و ترکیب بندیتناسب، تقارن، هنرهای تجسمی مثل با مبانی

.دهیمپیام مورد نظرمان را به صورت بصری انتقال می توان

9

Page 40: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 41: ١٠ گام برای طراحی رابط کاربری مینیمال

10

Page 42: ١٠ گام برای طراحی رابط کاربری مینیمال

.می گیرندرا تمام صفحه که عکس هاییاز تک استفاده

10

Page 43: ١٠ گام برای طراحی رابط کاربری مینیمال
Page 44: ١٠ گام برای طراحی رابط کاربری مینیمال