ثبت بازخورد

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

Very satisfied Satisfied Neutral Dissatisfied Very dissatisfied
واقعا راضی‌ام
اصلا راضی نیستم
چطور میتوانیم تجربه بهتری برای شما بسازیم؟

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

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

جدیدترین اخبار و روندهای دنیای فناوری را با نگاهی دقیق و حرفه‌ای، در کانال تلگرام دیجیاتو دنبال کنید.

ورود به کانال تلگرام دیجیاتو

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

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

    واقعا عالی و شیک شده.البته اینها فقط عکسه و کامل نمیتونه حس کار با این ورژن از اندروید رو نشون بده.این ورژن یه عالمه انیمیشن های ظریف داره که من شخصا فکر میکنم حس فوق العاده ای رو به کاربر منتقل خواهد کرد.

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

    خیلی زیباس ، محیط ویندوزفون زیادی تیره و خشکه و محیط iOS 7 زیادی روشنه اما گوگل بنظرم تونسته بین این 2 حالت به تعادل برسونه طراحی رو . واقعا دلنشینه طراحیش .

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

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

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

    دوستان من یه بار هم لینکش رو گذاشتم
    با این لینک برید http://www.google.com/design/spec/material-design/introduction.html تا همه اجزا رو مخصوصا اون صفحه هاتی که با motion هستند رو با حرکت ببینید.
    درضمن جالبش اینجاست که درست و غلط بدون آیکون ها و motion ها و هم گذاشته.
    اونجا همه چیز رو جز به جز نشون میده.
    یا حق

    • پارسا
      پارسا | ۸ تیر ۱۳۹۳

      پریروز داشتم همین لینکی که دادی رو می خوندم جالب توجه برام دقت به جزییات بود. عالی بود حتی تو اصول طراحی انیمیشن جابجایی ها یا تغییر ایکون ها یه خط مشی کاملا مشخص برای طراح بیان کردن. تو همه چیز همین کار رو کردن. کاری ندارم خود سبک خوبه یا نه. این میزان شفاف کردن اصول طراحی برای همه جالب بود برام. حتی تو اصول طراحی ویندوز 8 یا مشابهات هم همچین دقتی به جزئیات ندیده بودم.

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

    من رابط كاربري تيره و كدر قبلي رو اصلا دوست نداشتم چون به نظر من يك رابط مرده بود و اصلا خوش ايند نبود الان خيلي با اين رابط جديد كه روشن و زنده شده رو دوس دارم اما هنوز زيادي كدر هست و هيچ حس شادابي و هيجاني كه يوسميتي يا iOS7 به ادم ميده رو نداره.

  • محمد اژدری
    محمد اژدری | ۸ تیر ۱۳۹۳

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

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

    • مــــــــــــی مـــــــــــــی!
      مــــــــــــی مـــــــــــــی! | ۸ تیر ۱۳۹۳

      امکانات منحصر به فرد؟؟
      میشه بیشتر توضیح بدید؟

      • یه اپلی
        یه اپلی | ۸ تیر ۱۳۹۳

        معلومه دوست من
        یکپارچگی سخت افزار و نرم افزار و اپ هایی که توی هیج سیستم عامل دیگه ای پیدا نمیشن

        • احسان
          احسان | ۸ تیر ۱۳۹۳

          و اپ هایی که در همه سیستم عامل ها هستند و در اون نیستند
          مثالش zapya !
          :d
          من با اپلی ها مشکلی ندارم فقط جواب دوست عزیز رو دادم !

          • یه اپلی
            یه اپلی | ۸ تیر ۱۳۹۳

            اتفاقا دو سه روزه که زاپیا هم توی اپ استور برگشته چیزی نمیدونی حرف مفت نزن عزیز!!

          • یه اپلی
            یه اپلی | ۸ تیر ۱۳۹۳

            منم با اندروید و اندرویدی ها هیچ مشکلی ندارم چون پنج ساله دیوایس اندرویدی دارم ولی مثل شما ها منکر بعضی از حقایق نمیشم دوست من

          • Ali
            Ali | ۹ تیر ۱۳۹۳

            zapya واس iOS نیست؟؟؟؟
            https://itunes.apple.com/at/app/zapya-best-file-transfer-tool/id576309271?l=en&mt=8
            چه مثال خوبی زدی :))

        • احسان
          احسان | ۸ تیر ۱۳۹۳

          و چه نمیدانی آنریل انجین چیست !
          کلیپش تو دیجیاتو هست . فکر کنم گرافیکش در حد infinity blade 3 هست !

          • یه اپلی
            یه اپلی | ۸ تیر ۱۳۹۳

            مطمئن باش بهتر از تو میدونم چیه
            شما یه بازی گرافیکی رو اسم ببر که از این موتور استفاده کرده باشه؟؟؟!!! معلومه هیچ بازیی تو اندروید نیست!!!

        • کیانوش
          کیانوش | ۸ تیر ۱۳۹۳

          چه اپی مثلا؟؟؟
          اپ B15در IOSپیدا میشه؟؟؟

          • یه اپلی
            یه اپلی | ۸ تیر ۱۳۹۳

            این که گفتی چی هست و کاربردش چیه؟

      • یه اپلی
        یه اپلی | ۸ تیر ۱۳۹۳

        به نظرت اپ های با کیفیت یکی از چیز های منحصر به فرد اپل نیست؟اصن میتونی توی موبایل یه بازی گرافیکی تر از infinity blade 3 رو اسم بیاری؟ معلومه که نه!! اینم از موارد منحصر به فرد اپله!!!

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

    انصافا طراحی فوق العادهیه.
    ساندار پیچای چه کرده ..

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

    وقتی رابط کاربری یک گجت رو نگاه میکنی، باید این قابلیت وجود داشته باشه که در کمترین زمان اطلاعات نمایش داده شده درک بشه. دیگه ذهن درگیر جزییات زیاد و رنگ های متنوع و انیمیشن های اضافی نشه. حتی اگر زیبا باشند.

    آیکون ها و منو ها باید یک مینیمال لذت بخش باشند نه منو های شلوغ رنگارنگ و مملو از جلوه های بصری.

    این نوع رابط کاربری رو هم گوگل و مایکروسافت هم اپل به خوبی و در زمان مناسب درک کردند. حتی LG هم روی G3 طراحی بصری رابط کاربری رو مسطح کرده.

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

    طراحی مسطح رو خیلی دوست دارم یکی از دلایلی که اومدم سمت وینفون همین بود.
    از اندروید L جدا خوشم اومد البته باس دید بازم روی گجتای ارزون بلااستفادست یا نه؟

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

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

    • Smart Apps
      Smart Apps | ۸ تیر ۱۳۹۳

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

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