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

همانطور که در وبلاگ نویسی زنده دیجیاتو دیدید، در شروع مراسم، گوگل وقت را هدر نداد و بلافاصله بعد از آغاز 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

مطالب مرتبط

تغییرات گسترده در اسنپ فود؛ از ویژگی‌های تازه اپلیکیشن تا حضور در بازار B2B

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

لینک گروه‌های خصوصی واتس اپ از جستجوهای گوگل سر در آورد

گوگل با ایندکس لینک گروه های خصوصی واتس اپ به همه اجازه پیوستن به این چت را می دهد.روزنامه نگاری به نام «جردن ویلدون» در صفحه توییتر خود مدعی شده لینک های دعوت به چت گروهی واتس اپ امکان ایندکس شدن توسط گوگل و نمایش در لیست جستجو را دارد. این مساله باعث می شود... ادامه مطلب

روزیاتو: ۷ زن شگفت انگیز که رکوردهای عجیب و غریبی در کتاب گینس دارند

همه ی زنان موجوداتی منحصر به فرد و استثنایی هستند، اما زنانی هم هستند که توانسته اند رکوردهایی جهانی، آن هم از نوع عجیب و غریبش، به نام خود ثبت کنند و مردم دنیا را حیرت زده کنند.در روزیاتو بخوانیددر روزیاتو بخوانید... ادامه مطلب

جمع‌بندی روز: جمعه، ۰۲ اسفند ۱۳۹۸

روزی نیست که در دنیای دانش و تکنولوژی اتفاق تازه ای رخ ندهد و ما نیز در دیجیاتو همواره در تلاش و تکاپو هستیم تا تمامی جزئیات این دست از رویدادها را به سمع و نظر شما برسانیم. در طی ۲۴ ساعت گذشته مطالب متعددی در این وبسایت منتشر شده اند که می توانید عنوان... ادامه مطلب

ساخت رمپ ویلچر با LEGO [تماشا کنید]

یک زن معلول آلمانی با استفاده از LEGO در مقابل درب ورودی مغازه‌ها و کافه‌های شهر محل زندگی خود رمپ ویلچر می سازد.«ریتا اِبل» (Rita Ebel) اهل شهر هانائو (Hanau) آلمان در جریان یک سانحه رانندگی فلج شد. وی بیش از 20 سال است که با ویلچر حرکت می کند و به خوبی با چالش... ادامه مطلب

ویجیاتو: معرفی پنج فیلم درباره فوتبال که کم‌تر دیده‌شده‌اند

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

ویجیاتو

نظرات ۳۲

وارد شوید

برای گفتگو با کاربران، وارد حساب کاربری خود شوید.

ورود

رمزتان را گم کرده‌اید؟