ثبت بازخورد

لطفا میزان رضایت خود را از دیجیاتو انتخاب کنید.

واقعا راضی‌ام
اصلا راضی نیستم
چطور میتوانیم تجربه بهتری برای شما بسازیم؟

نظر شما با موفقیت ثبت شد.

از اینکه ما را در توسعه بهتر و هدفمند‌تر دیجیاتو همراهی می‌کنید
از شما سپاسگزاریم.

نگاهی عمیق به طراحی کاغذ مانند جدید اندروید: متریال دیزاین

همانطور که در وبلاگ نویسی زنده دیجیاتو دیدید، در شروع مراسم، گوگل وقت را هدر نداد و بلافاصله بعد از آغاز I/O ساندار پیچای سرپرست برنامه نویسی اندروید روی صحنه رفت و آتش این برنامه را با معرفی ظاهر جدید سیستم عاملش روشن ...

میترا تهرانی
نوشته شده توسط میترا تهرانی | ۸ تیر ۱۳۹۳ | ۱۰:۵۱

همانطور که در وبلاگ نویسی زنده دیجیاتو دیدید، در شروع مراسم، گوگل وقت را هدر نداد و بلافاصله بعد از آغاز I/O ساندار پیچای سرپرست برنامه نویسی اندروید روی صحنه رفت و آتش این برنامه را با معرفی ظاهر جدید سیستم عاملش روشن کرد. نسخه ی جدید اندروید که فعلا تنها موهبتی برای توسعه دهندگان است، باعث شد ما هم به اندازه کافی در مورد چگونگی متریال دیزاین و جایگاه آن در اندروید کنونی و آینده بدانیم.

برای بخشیدن ظاهر به روز و عالی به اندروید، گوگل خودش را به مبارزه طلبید تا با ساختن یک زبان طراحی بصری برای کاربران، ترکیبی از اصول کلاسیکِ طراحی خوب را به همراه نوآوری و امکانات علم و تکنولوژی ارائه دهد. هدف گوگل رسیدن به یک سیستم واحد و پایه ای بود که امکان تجربه کاربری کاملا یکسان در تمام بسترهای نرم افزاری را فراهم کند.

در ادامه مطلب با دیجیاتو همراه باشید.

متریالایز کردن متریال

در زبان بصری جدید اندروید از طبیعت، فیزیک، جسارت و نمای گرافیکی بر پایه چاپ الهام گرفته شده، یا به عبارت دیگر یک طراحی بر پایه ی کیفیت کاغذ. هنگام تجربه ی متریال دیزاین، دنبال نماد های مادی باشید [نماد هایی از موادی که هم اکنون در اطرافتان می بینید]. از جمله "استفاده از ویژگی های آشنای قابل لمس (familiar tactile attributes)" و "نورپردازی واقعی (realistic lighting)" برای بوجود آوردن یک "فضای منطقی" و "سیستم حرکتی".

دومین اصل حرکات هستند. گوگل مخصوصا به حرکات اندروید روی نمایشگر دستگاه توجه داشت. "همه ی حرکات در یک محیط واحد جا گرفته اند. موضوعات بدون قطع پیوستگی تجربه ی کاربری ارائه شده اند، حتی هنگام دگرگونی و سازماندهی مجدد. بازخورد ها نا محسوس و در عین حال واضح و انتقال ها در حین کارآمدی، منسجم نیزهستند."

و بالاخره: گوگل انقلابی رنسانسی به طراحی چاپی در دستگاه های همراهش داد. "عناصر پایه ای در طراحی بر مبنای چاپ ---شامل تایپوگرافی، گرید ها،  فضا، مقیاس، رنگ و استفاده از تصاویر--- راهنمای رفتار های بصری - آفریدن سلسله مراتب، معنا وتمرکز. انتخاب رنگ آگاهانه، تصاویر لبه به لبه، تایپوگرافی در مقیاس بزرگ و فضای سفید تعمدی، رابط گرافیکی جسورانه ای می آفرینند که کاربر را در تجربه اش غرق می کند." آخرین باری که یک مجله ی چاپی خواندید کی بود؟ حالا وقتش است که یک مجله ی قشنگ بخرید و خودتان را در صفحاتش غرق کنید.

header2

چیزی در مورد فیزیک نگفتیم؟ گوگل مرزهای دانشش را روی سیستم انیمیشن متریال دیزاین هم پیش برده. "یکی از جنبه های مهم حرکت در طراحی متریال این است که احساس فیزیکی را بدون قربانی کردن ظرافت، سادگی و زیبایی حفظ کنید و جادوی تجربه ی کاربری بدون نقصی را به وجود بیاورید." که میتوان اینگونه ترجمه کرد: رهایی از حرکات مکانیکی، خطی در جهت رقص سریع و ظریف المان ها. موضوعات بر طبق قوانین حرکت در طبیعت، با حداکثر سرعت به فضای صفحه نمایش وارد می شوند. "شخصی که به فریم دید وارد می شود، راه رفتن را از لبه ی فریم شروع نمی کند، بلکه از قبل در حال راه رفتن است. به طور مشابه، وقتی موضوعی از قاب خارج می شود، به جای اینکه هنگام خروج از فریم شتابش را کاهش بدهد، سرعتش را حفظ می کند." با اطمینان می توان گفت که از این به بعد گوگل و توسعه دهندگان اپ ها با تغییرات غیر ضروری در سرعت و شتاب انیمیشن ها شما را گیج نخواهند کرد.

یکی دیگر از قدم های بزرگ رو به جلویی که اندروید به سمت طبیعی تر جلوه کردن برداشته، تعامل پاسخگو (Responsive Interaction) است. به این معنی که عناصر واسط کاربری به شیوه ای منطقی و قابل پیش بینی به ورودی های کاربر عکس العمل نشان می دهند. شیوه ای که با اصول گوگل تعریف می شود که تقسیم شده اند به: سورفیس ری اکشن (تایید بصری آنی در نقطه تماس) متریال ریسپانس (تغییر متریال به محض لمس یا کلیک) و رادیال اکشن (اعمالی که به شکل بصری به مرکز ورودی شان متصل می شوند – صدا از طریق آیکون میکروفون وارد می شود، کیبورد از طریق کلید های کیبورد و ...)

مورد دیگر متریال دیزاین که برای کاربرانش دلچسب خواهد بود انتقال معنی دار (Meaningful Transitions) است. گوگل اعلام کرد: "انتقال بین دو حالت بصری باید روان باشد، بی دردسر ظاهر شود، و بالاتر از همه اینها برای کاربر مشخص و واضح باشد نه اینکه باعث سردرگمی اش بشود." و اضافه کرد: " از آنجاییکه عناصر انتقالی اطراف صفحه نمایش حرکت می کنند،  باید به شیوه ای هماهنگ رفتار کنند. مسیر هایی که عناصر در طول انها حرکت می کنند، باید جالب و منظم باشند."

برای اینکه اپ ها زیباتر و جذاب تر به نظر برسند و شما را وسوسه کنند که بیشتر و بیشتر لمسشان کنید، گوگل از طراحان و توسعه دهندگان خواست از انیمیشن هایی فراتر از انیمیشن های موجود و تکراری استفاده کنند. " یک آیکون منو که یک فلش می شود، یا کنترل های پلی بک که از یکی به دیگری تبدیل می شوند، عملکرد های دوگانه ای دارند: یکی آگاه کردن کاربر و دیگری نفوذ اپلیکیشن در ذهن کاربر با ایجاد لحظه ای شگفتی و حس داشتن مهارت های فوق العاده." اینها حرف هایی هستند که قبلا از اپل می شنیدیم!

 

header3

رنگ های دیوانه!

شما هم رنگهای کدر و طراحی مسطح را دوست ندارید؟ خیلی بد شد چون آینده اینگونه خواهد بود. به گفته گوگل رنگ های ارائه شده در متریال دیزاین همگی شامل "انواع حالت های رنگ های شفاف و تند در کنار محیط کدر و خنثی هستند، که نشانه ای از معماری معاصر، علائم جاده ای، نوار های علامت گذاری پیاده رو و باشگاه های ورزشی کنونی هستند." سایه و روشنی های برجسته، رنگ های غیر منتظره و تند هم هستند. منو های اپلیکیشن به طور کلی از پالتی با سه رنگ تبعیت می کنند، اولیه، ثانویه، و تاکیدی. نوشته های خاکستری، آیکون ها و جدا کننده ها، به جای رنگ های سالید و یکنواخت از درجه های مختلف شفافیت (آلفا) برای نمایش بهتر استفاده می کنند.

در قلمرو تایپوگرافی و حروفچینی، فونت روبوتو، امضای اندروید است که هنوز حکمرانی می کند. اما لباس جدیدی هم به آن پوشانده اند، حالا پهن تر، گردتر، واضح تر و "خوشبینانه تر" شده است.

 

icons

نگاه آیکونیک

میتوانید ببینیدشان؟ این ها آیکون های جدید اندروید هستند، و به قول گوگل: "ساده، مدرن، دوستانه و گاهی هم غیر معمول." طراحان با تقارن و انسجام اشکال بازی می کنند تا به آیکون ها کیفیت منحصر به فردی بدهند. منحنی های گرد گوشه های خطرناک و تیز را مغلوب خواهند کرد. اگرچه به یاد داشته باشید "انسجام مهم است". بنابراین توسعه دهندگان می خواهند سیستم آیکون های اندروید را در هر جای ممکن در اپلیکیشن های متفاوت استفاده کنند.

 

paper

کاغذ کوانتومی

گوگل رویکرد کاغذ گونه را بسیار بسیار جدی گرفته است. طراحان اپلیکشین ها باید به این ذهنیت برگردند که هر پیکسل (به استثنای نوار های سیستم و نوتیفیکشین ها) همانگونه که روی کاغذ کشیده می شوند به نظر می آیند. سطوح همانند ورقه های کاغذ روی هم می افتند، به هم وصل می شوند و روی هم حرکت می کنند. شما باید این مفهوم را در عمل ببینید تا واقعا به فلسفه آن پی ببرید. از همه مهم تر اینکه گوگل اصول و قوانین محدود کننده ای برای نمایش و چگونگی رفتار پنجره ها و منو ها دارد، بنابراین می توان امیدوار بود که ظاهر یکپارچه و یکسانی را در همه برنامه های اندروید شاهد باشیم.

 

style-imagery-style-philosophy-large-mdpi

نتیجه

گوگل تا حد ممکن برای تبدیل اندروید به یک سیستم عامل هوشمند، زیبا و کاربر محور پیش رفته است. اصول و فلسفه های پایه ای اندروید L به طور شگفت انگیزی پیچیده و عمیق هستند. امروز ما شاهد ان بودیم که گوگل با حرکتی محکم و قاطع، تصمیم گرفته تا به اندروید ظاهری منحصر به فرد و تمام عیار بدهد. ظاهری که کوچتکرین شکی در مورد سیستم عاملی که شما استفاده خواهید برایتان باقی نگذارد.

در انتها شما را دعوت می کنیم تا گالری از اسکرین شات های مختلف اندروید جدید را تماشا کنید. در میان آنها بگردید و خودتان ببینید که چگونه عناصر بصری آنها روی شما اثر خواهند گذاشت. دکمه ها، کارت ها، پنجره ها، منو ها، اسلایدر ها و تعداد زیاد دیگری از عناصر رابط کاربری در انتظار شما هستند تا در آپدیت بعدی اندروید با آنها ملاقات کنید. و اگر احساس کردید که با تغییر جهت گوگل در عناصر طراحی خوشحال نیستید اصلا نگران نباشید، زیرا تم Holo با همان زبان قدیمی همیشگی در اندورید قابل استفاده است. حداقل برای منوها که اینطور خواهد بود.

Material-Design---screenshots (1)

Material-Design---screenshots (2)

Material-Design---screenshots (3)

Material-Design---screenshots (4)

Material-Design---screenshots (5)

Material-Design---screenshots (6)

Material-Design---screenshots (7)

Material-Design---screenshots (8)

Material-Design---screenshots (9)

Material-Design---screenshots (10)

Material-Design---screenshots (11)

Material-Design---screenshots (12)

Material-Design---screenshots (13)

Material-Design---screenshots (14)

Material-Design---screenshots (15)

Material-Design---screenshots (16)

Material-Design---screenshots (17)

Material-Design---screenshots (18)

Material-Design---screenshots (19)

Material-Design---screenshots (20)

Material-Design---screenshots (21)

Material-Design---screenshots (22)

Material-Design---screenshots (23)

Material-Design---screenshots (25)

Material-Design---screenshots (26)

Material-Design---screenshots (27)

Material-Design---screenshots (28)

Material-Design---screenshots (29)

Material-Design---screenshots (30)

Material-Design---screenshots (31)

Material-Design---screenshots (32)

Material-Design---screenshots (51)

Material-Design---screenshots (34)

Material-Design---screenshots (35)

Material-Design---screenshots (36)

Material-Design---screenshots (37)

Material-Design---screenshots (38)

Material-Design---screenshots (39)

Material-Design---screenshots (40)

Material-Design---screenshots (41)

Material-Design---screenshots (42)

Material-Design---screenshots (43)

Material-Design---screenshots (44)

Material-Design---screenshots (45)

Material-Design---screenshots (46)

Material-Design---screenshots (47)

Material-Design---screenshots (48)

Material-Design---screenshots (49)

Material-Design---screenshots (50)

Material-Design---screenshots (51)

Material-Design---screenshots (53)

Material-Design---screenshots (54)

Material-Design---screenshots (55)

Material-Design---screenshots (56)

Material-Design---screenshots (57)

Material-Design---screenshots (58)

Material-Design---screenshots (59)

Material-Design---screenshots (60)

Material-Design---screenshots (61)

Material-Design---screenshots (62)

Material-Design---screenshots (63)

Material-Design---screenshots (64)

Material-Design---screenshots (65)

Material-Design---screenshots (66)

Material-Design---screenshots (69)

Material-Design---screenshots (70)

Material-Design---screenshots (72)

Material-Design---screenshots (71)

Material-Design---screenshots (73)

Material-Design---screenshots (74)

Material-Design---screenshots (75)

Material-Design---screenshots (76)

Material-Design---screenshots (77)

Material-Design---screenshots (78)

Material-Design---screenshots (79)

Material-Design---screenshots (80)

Material-Design---screenshots (81)

Material-Design---screenshots (82)

Material-Design---screenshots (83)

Material-Design---screenshots (84)

Material-Design---screenshots (85)

Material-Design---screenshots (86)

Material-Design---screenshots (87)

Material-Design---screenshots (88)

 

Material-Design---screenshots (89)

Material-Design---screenshots (90)

Material-Design---screenshots (91)

Material-Design---screenshots (92)

Material-Design---screenshots (93)

Material-Design---screenshots

دیدگاه‌ها و نظرات خود را بنویسید
مجموع نظرات ثبت شده (32 مورد)
  • ریحانه
    ریحانه | ۲۴ آذر ۱۳۹۳

    خیلی جالب بود

  • Reza
    Reza | ۸ تیر ۱۳۹۳

    من اين مطالبه مربوط به ديزاين رو دوس دارم زياااد،

  • یه اندرویدی
    یه اندرویدی | ۸ تیر ۱۳۹۳

    البته جلو اپل داشتن بلوتوث و لانچرو تم هم قابلیت و ویژگی مهمیه ها یادتون نره اینم =)))

  • iApple
    iApple | ۸ تیر ۱۳۹۳

    من نسخه ال رو نسب کردم ولی احساس مسکنم با این اسکرین شاتها تفاوت داره..
    :/
    چیطور ممکنه یا من خرابش کردم. :/

نمایش سایر نظرات و دیدگاه‌ها
مطالب پیشنهادی