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

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

malltina

مطالب مرتبط

تجهیز ۱۰۰ هزار خودرو اسنپ به جداکننده فضای راننده خودرو

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

اجازه دولت به وزارت ارتباطات برای برخورد با اپراتورهای متخلف صادر شد

در روزهای اخیر درخواستی از سوی وزارت ارتباطات به دولت مطرح شده بود تا اختیاراتش را در برخورد با اپراتورهای متخلف افزایش دهد. امروز این پیشنهاد به امضای «اسحاق جهانگیری» معاون اول رئیس جمهور و البته به تصویب هیات وزیران رسید.بر این اساس سازمان تنظیم مقررات و ارتباطات رادیویی (رگولاتوری) می‌تواند پس از اتمام مهلت... ادامه مطلب

برند آیونیک هیوندای متولد شد؛ عرضه مدل‌های سبز کره‌ای‌ها با یک نشان جدید

شرکت هیوندای در نوامبر 2015 با تبدیل جنسیس به یک برند جداگانه، تصمیم گرفت محصولات لوکس خود را با این برند راهی بازار کند. حال در اقدامی مشابه این خودروساز کره‌ای آیونیک (Ioniq) را نیز به برندی مستقل تبدیل کرده و مدل‌های الکتریکی خود را با نشان آن به فروش خواهد رساند.آنطور که هیوندای در... ادامه مطلب

شمار مبتلایان به کرونا در جهان از مرز ۲۰ میلیون نفر عبور کرد

روزبه‌روز بر تعداد مبتلایان به ویروس کرونا اضافه می‌شود و هم اکنون بیش از ۲۰ میلیون نفر در سراسر جهان به این ویروس آلوده شده‌اند.کووید-۱۹ تبدیل به بزرگترین بحران کنونی بشر شده و طبق گفته سازمان بهداشت جهانی، این بیماری تنفسی حداقل چهار برابر افرادی که سالانه به آنفولانزا شدید مبتلا می‌شوند را آلوده کرده... ادامه مطلب

حمله سایبری هکرها به کاربران Tor از طریق سرورهای خروجی مخرب

یک گروه هک ناشناس از دی ماه سال قبل با اضافه کردن سرور به شبکه Tor در حال انجام حمله SSL stripping علیه کاربرانی است که با استفاده از مرورگر Tor به سایت‌های ارز دیجیتال دسترسی پیدا کرده‌اند.گروه مورد بحث تا اردیبهشت ماه امسال کنترل یک چهارم سرورهای موسوم به Tor exit relays که ترافیک کاربران از... ادامه مطلب

نظرات ۳۲

وارد شوید

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

ورود

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