desyatykh 11 مارس 2015 در 17:08

طراحی متریال: به ماه و برگشت

• وبلاگ Redmadrobot،
• توسعه اپلیکیشن های موبایل،
• توسعه برای اندروید

• آموزش

"آیا این گفتگوی کسل کننده واقعا مورد نیاز است؟"

در این مقاله اصول اصلی متریال دیزاین را بیان کردم و در مورد نحوه پیاده سازی آنها توصیه هایی ارائه کردم. متن در ردپای یک کلاس استاد برای توسعه دهندگان نوشته شده است، که ما، روبات ها، آن را به همراه دفتر روسی Google (Think Mobile) سازماندهی کردیم.

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

همه چیز در سال 2011 شروع به تغییر کرد، زمانی که گوگل شروع به کار سخت برای یکپارچه سازی بخش بصری اکوسیستم محصولات خود کرد و آن را پروژه کندی نامید.

کندی چه ربطی به آن دارد؟

افسانه این است: پرزیدنت کندی برنامه یک پرواز سرنشین دار به ماه را آغاز کرد (اگر فکر می کنید که این پرواز همیشه بوده است). و رئیس بزرگ گوگل، لری پیج، به این اصل پایبند است که هیچ فایده ای برای بهبود محصولات تا 10٪ وجود ندارد - آنها باید 10 برابر بهتر از محصولات رقبا باشند. اگر قرار است محصولی را عرضه کنیم، فوراً به ماه برویم. بنابراین در اینجا تصمیم گرفته شد که همه چیز به طور ناگهانی انجام شود.

نتیجه در درجه اول بر وب تأثیر گذاشت، اما برخی از محصولات تلفن همراه را نیز تحت تأثیر قرار داد. در همان زمان، کار جداگانه ای در مورد طراحی Android - Holo وجود داشت که جایگزین رابط های نه چندان زیبای آندروید قدیمی شد.
اما یک مشکل وجود داشت: هولو هنوز با پروژه کندی متفاوت بود.


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

در سال 2014، در کنفرانس I/O، یک سیستم طراحی جدید ارائه شد، رویکردی به نام طراحی متریال. سیستم طراحی جدید به شما این امکان را می دهد که یک تجربه کاربری ثابت در همه صفحه ها ایجاد کنید: دسکتاپ، تلفن هوشمند، تبلت، ساعت، تلویزیون، اتومبیل. برای برنامه‌های اندروید، Material Design نشان‌دهنده تکامل زبان بصری و دستورالعمل‌های طراحی Holo است. از بسیاری جهات، این یک سیستم انعطاف‌پذیرتر است که با این فرض ایجاد شد که طراحان دیگر از آن استفاده کنند - گوگل تنها اولین کاربر بود.

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

4 اصل طراحی متریال

طراحی متریال بر چهار اصل اصلی استوار است:

1. سطوح لمسیدر طراحی متریال، رابط از لایه های محسوسی از به اصطلاح "کاغذ دیجیتال" تشکیل شده است. این لایه‌ها در ارتفاع‌های مختلف قرار گرفته‌اند و سایه‌هایی روی هم ایجاد می‌کنند که به کاربران کمک می‌کند تا آناتومی رابط کاربری و نحوه تعامل با آن را بهتر درک کنند.
2. طراحی چاپ.در نظر گرفتن لایه‌ها به‌عنوان تکه‌هایی از «کاغذ دیجیتال»، سپس «جوهر دیجیتال» (هر چیزی که روی «کاغذ دیجیتال» به تصویر کشیده می‌شود) از یک رویکرد طراحی گرافیک سنتی مانند مجلات و پوسترها استفاده می‌کند.
3. انیمیشن معناداردر دنیای واقعی، اشیاء از هیچ ظاهر نمی شوند و در هیچ جا ناپدید نمی شوند - این فقط در فیلم ها اتفاق می افتد. به همین دلیل است که در طراحی متریال ما همیشه به نحوه استفاده از انیمیشن در لایه‌ها و جوهر دیجیتال فکر می‌کنیم تا به کاربران نکاتی درباره نحوه عملکرد رابط ارائه دهیم.
4. طراحی تطبیقیاین در مورد نحوه اعمال سه مفهوم قبلی در دستگاه‌هایی با وضوح‌ها و اندازه‌های صفحه متفاوت است.

بنابراین، بیایید به ترتیب حرکت کنیم.

سطوح لمسی

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

سطح

سطح چیست؟ اساساً یک "ظرف" با سایه است و نه چیز دیگر. اما این برای تشخیص یک شی از دیگری و نشان دادن نحوه قرارگیری آنها نسبت به یکدیگر کاملاً کافی است. فلسفه طراحی متریال برای سادگی و طراحی تمیز تلاش می کند.

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

عمق

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

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

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

NB!

1. عمق باید معنا داشته باشد.این سوال را از خود بپرسید: "چرا این است و غیر از این نیست؟" اگر پاسخی وجود ندارد، منطقی است که به دنبال راه حل دیگری باشید.
2. مراقب تدارکات باشید.دکمه های شناور، نوار ابزار و کادرهای محاوره ای در ارتفاع خاصی قرار دارند. گاهی اوقات آنها باید در امتداد محور Z حرکت کنند تا در صورت وقوع اتفاقی از برخورد جلوگیری کنند. شما باید با این رقص بسیار مراقب باشید.
3. دکمه را مجبور نکنیددکمه شناور یک عنصر بسیار متمایز است. بسیاری از مردم فکر می کنند ارزش افزودن آن به رابط را دارد: بلافاصله به طراحی متریال تبدیل می شود. اما باید فقط برای یک عمل کلیدی در برنامه شما استفاده شود. اگر نیاز به بستن یک پنجره یا تأیید یک عمل دارید، نیازی به استفاده از دکمه شناور ندارید. عناصر دیگری برای این کار وجود دارد.
4. همه چیز نباید روی کارت باشد.اگر یک شی اشکال زیادی داشته باشد و حاوی محتوای متفاوت زیادی باشد، کارت مناسب است. و اگر نه، پس شاید بهتر است آن را به صورت متن ساده یا لیست متنی انجام دهیم؟
5. آیا این گفتگوی کسل کننده واقعاً مورد نیاز است؟طراحان گوگل سعی کرده اند کادرهای محاوره ای را بهتر کنند، اما هنوز برگه های پایین برای اکثر کارها مناسب تر هستند. اسنک بار نیز وجود دارد. جعبه های گفتگو فقط برای پرسیدن سوال از کاربر مورد نیاز است.
6. از گسترش لیست استفاده کنید.این یک الگوی دست کم گرفته شده است، اما کاملاً مادی است و کار خوبی انجام می دهد.

طراحی چاپ

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

تایپوگرافی شیک

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


متن بسیار کمی روی این صفحه وجود دارد. اما اگر آیکون ها را کنار بگذاریم و متن را به بلوک های خاکستری تبدیل کنیم، مشخص می شود که ساختار کاملاً قابل تشخیص است.

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

اندازه فونت

Google.com/design/spec دارای یک پالت فونت استاندارد است که می توانید با خیال راحت از آن استفاده کنید. این پالت از فونت Roboto استفاده می کند، اما شما می توانید آن را با فونت مارک خود جایگزین کنید تا از نام تجاری پشتیبانی کند. مهم است که همه چیز را با دقت آزمایش کنید، زیرا رندر فونت ممکن است در دستگاه های مختلف متفاوت عمل کند. معمولا فونت های OTF عملکرد بهتری نسبت به فونت های TTF دارند.

تایپوگرافی کنتراست

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

شبکه مدولار و راهنماها

اکنون به طرح بندی محتوا روی صفحه می رویم. در طراحی چاپ، از شبکه های مدولار استفاده می شود؛ در طراحی صفحه نمایش، اینها شبکه های اساسی تر با ماژول های بسیار کوچک هستند. به عنوان مثال، طراحی متریال از یک شبکه 8dp استفاده می کند. DP مخفف یک پیکسل مستقل از چگالی است، یک واحد بسیار شبیه به واحد نقطه در iOS.

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

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

شمایل نگاری هندسی

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

رنگ

همانند طراحی چاپی، رنگ وسیله بیان مهمی در طراحی رابط است. در اندروید قدیم رنگ مکمل هم بود اما حالا نقش برجسته تری دارد. در طراحی متریال، پالت رنگ پیش‌فرض برای یک برنامه شامل یک رنگ اصلی و یک رنگ برجسته است.

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

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

اندروید کتابخانه ای به نام پالت دارد که به شما امکان استخراج رنگ از عکس ها را می دهد. یعنی امکان رنگ آمیزی پویا رابط بر اساس تصاویر عکس موجود در اپلیکیشن وجود دارد.

ما یک عکس گرفتیم و الگوریتم 6 رنگ با ویژگی های مختلف از آن استخراج کرد:
- 3 رنگ آبدار و 3 رنگ خاموش وجود دارد.
- آنها به رنگ های روشن، استاندارد و تاریک تقسیم می شوند.
- برای هر رنگ پس زمینه، رنگ متن خودش تعریف شده است که می توان از آن نیز استفاده کرد.

تصاویر زیبا

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

NB!

1. از برندسازی لذت ببریدگوگل در موقعیت بهتری برای استفاده از رنگ های روشن به عنوان نام تجاری است، اما این نباید به عنوان یک مشکل تلقی شود. رنگ ها را می توان از کتاب برند شرکت انتخاب کرد و به طور کلی از لوگو استفاده کرد.
2. بالشتک و "بیایید کمی هوا بخوریم" را فراموش نکنید.خط پایه 8dp و حاشیه سمت چپ 72dp عملا قانون است. محتوا را خوب و رایگان نگه دارید.
3. عکس های رسا آب و هوا را می سازد.عکس ها و تصاویر به عنوان ابزار بیانی انتخاب ماست.

انیمیشن معنادار

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

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

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

یک نکته جالب این است که حرکت فعال چشم را جذب می کند - این برای بینایی ما طبیعی است. با کمک انیمیشن، توجه کاربر را کنترل می کنیم.

عدم تقارن

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

واکنش

یکی دیگر از اصول بسیار مهم انیمیشن در طراحی متریال، واکنش به اقدامات کاربر است. در صورت امکان، لمس صفحه نمایش دستگاه باید مرکز تغییرات رابط باشد. مثلاً موجی که از نقطه تماس با انگشت شما ظاهر می شود و می رود. این افکت به راحتی در اندروید L پیاده سازی می شود.

میکروانیمیشن

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

وضوح و وضوح

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

NB!

1. انیمیشن را برای آخر نگذارید.انیمیشن را تا انتها رها نکنید - این می تواند یک عامل کلیدی تجربه کاربر باشد و باید از قبل به آن فکر کنید.
2. بدانید چه زمانی باید متوقف شود.انیمیشن زیاد هم بد است. خود را کنترل کنید و به یاد داشته باشید که باید معنادار باشد.

طراحی تطبیقی

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

از عام به خاص

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

تورفتگی

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

فریم های سفید

ایده‌هایی برای سازماندهی فضا و پد برای صفحه‌های مختلف را می‌توانید در google.com/design/spec زیر Whiteframes پیدا کنید. این یک مکان عالی برای شروع، درک معنای کلی، و سپس ادامه آزمایشات خود است.

راهنماها

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

ابعاد (ویرایش)

توصیه می شود برای همه عناصر نسبت های متعددی در نظر بگیرید. به ویژه، انتخاب اندازه نوار برنامه بسیار راحت تر است اگر آن را مضربی از: 1x، 2x، 3x کنید. این اندازه در گوشی های هوشمند و تبلت ها متفاوت است، اما برنامه بدون مشکل سازگار می شود.

بلوک ها

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

نوار ابزار

نوار عمل یکی از مهم ترین بخش های رابط است. عنوان، دکمه های اکشن و ناوبری را در خود جای داده است. در Android Lollipop، نوار اکشن از یک نوار غلاف در بالا به یک ویجت تمام عیار تبدیل شده است - یک واحد کنترل برنامه کاربردی و زیبا. این به این دلیل امکان پذیر شد که اکنون می توانید بسیاری از عناصر کاربردی را در نوار ابزار قرار دهید که قبلاً حتی نمی توانستید رویای آنها را ببینید:
- فیلدهای ورودی، فرم ها؛
- دکمه شناور اکشن اصلی؛
- نوار ابزار توسط ناوبری گسترده پنهان شده است، اما حتی در اینجا نیز یک ویجت کاملا کاربردی را می بینیم.
- در صورت لزوم، کار با نوار ابزار راحت است.

NB!

1. همیشه نیازی به کشوی ناوبری ندارید.گوگل در برنامه های خود از ناوبری کشویی استفاده می کند، بنابراین می توانید آن را در نمونه های مختلف مشاهده کنید. اما گوگل وظایف زیادی دارد که با کمک آن می توان آنها را حل کرد: راهنمای پست، تنظیمات، ورود / خروج، اطلاعات کاربر و غیره. اگر کارهای مشابهی دارید، پس همه چیز خوب است، اما اگر یک ابزار ساده می سازید، ارزشش را ندارد.
2. هوشمندتر و هوشمندتر با نوار ابزار.امکان تغییر سایز نوار ابزار به صورت پویا، دو و سه برابر کردن آن بسیار جالب و راحت است. بیشتر طراحان از درگیر شدن با این موضوع می ترسند و یک سایز را برای همیشه انتخاب می کنند، اما در اینجا می توانید و باید جسورتر باشید.
3. نیازی به انجام دکمه شناور از گوشه پایین محله یهودی نشین نیست.دکمه شناور می تواند در هر جایی باشد: پایین، بالا، راست، چپ. البته، دستیابی به آن در گوشه می تواند راحت باشد، اما این تنها گزینه نیست. دکمه بسته به وظایف می تواند از مکانی به مکان دیگر حرکت کند.
4. هم گوشی های هوشمند و هم تبلت ها؛ هم به صورت عمودی و هم افقی.گستره دستگاه های اندرویدی زیاد است و این زندگی را برای توسعه دهندگان آسان نمی کند. اما حقیقت این است که کاربران همه این دستگاه ها را دارند که آنها را به این طرف و آن طرف می چرخانند (حتی وقتی صحبت از تلفن های هوشمند می شود). این لحظه باید کار شود.

این طراحی متریال است. از آزمایش و اشتباه کردن نترسید: به کپی کردن راه حل های موجود معطل نشوید. آن را امتحان کنید!

برچسب ها:

• طراحی مواد
• اندروید
• طراحی رابط

افزودن برچسب

پست خود را تگ کنید بهتر است برچسب ها را با کاما از هم جدا کنید. برای مثال: برنامه نویسی، الگوریتم ها

نظرات 121

• • • • • • • • • • آیا شما نیز مانند گوگل، گوشی خود را فقط به صورت افقی نگه می دارید؟
                    

                    در حالت عمودی فقط 50-70٪ از صفحه نمایش استفاده می شود

                    
                    

                    • متن بسیار کمی روی این صفحه وجود دارد.

                      آیا این متن زیاد است؟ توییتر با مردم چه کرد...

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

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

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

گوگل چه خواهد شد؟

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

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

خدمات گوگل در حال حاضر برای مردم چیست؟ آیا این رشته جستجویی است که در مرورگر وجود دارد؟ یا دستگاه موبایل اندروید شماست؟

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

اما در آینده نزدیک، گوگل دیگر فقط به عنوان کروم یا اندروید تلقی نخواهد شد.

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

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

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

چنین تنوع باورنکردنی از توابع و وظایف انجام شده در یک محیط دیجیتال بصری واحد که به تدریج با دنیای واقعی ادغام می شود، کار می کند.

یکی از ایده های کلیدی متریال دیزاین ایجاد حسی بصری برای کاربر از کار با اشیاء فیزیکی واقعی در محیط دیجیتال است. در واقع این یک تقلید از فضای سه بعدی در صفحه نمایش است، اما با تمام مزایایی که یک محیط مجازی می تواند بدهد. دکمه‌ها و پنجره‌ها، مشابه کارت‌های مقوایی، می‌توانند رشد کرده و کوچک شوند، متلاشی شوند و دوباره بسازند.

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

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

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

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

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

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

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

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

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

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

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

ما به نظر شما علاقه مندیم. آیا چنین مفهومی را شیطانی می‌دانید یا چنین طرح‌هایی را راهی امیدوارکننده برای تعامل با محیط اطلاعاتی در آینده می‌دانید؟

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

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

کمی تاریخ

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

اسکئومورفیسم

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

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

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

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

طراحی تخت

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

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

دوم، تصاویر ساده می‌توانند پیام شما را سریع‌تر از تصاویر دقیق به کاربران منتقل کنند: آن‌ها طرح‌دار هستند و بنابراین به راحتی قابل درک هستند.

و البته، آیکون های مسطح با فونت نسبتاً ساده می توانند توجه کاربران را به محتوای واقعاً مهم هدایت کنند.

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

تست قابلیت استفاده از ویندوز 8 گروه NN نشان داد که کاربران در تشخیص اشیاء قابل کلیک و غیرقابل کلیک مشکل دارند. کاربران شکایت داشتند که اشیایی که ثابت به نظر می رسند در واقع قابل کلیک هستند. در نتیجه، ماموریت اصلی شرکت - کمک به کاربران برای تفسیر صحیح سیستم - شکست خورد.

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

طراحی مواد

بیایید در حال حاضر واضح بگوییم: طراحی متریال بیشتر یک محصول مارکدار است تا یک روند طراحی خود به خود در حال ظهور که مقبولیت گسترده ای پیدا کرده است. این چیزی است که اساساً آن را از طراحی تختش متمایز می کند.

منظور من از نامیدن مواد طراحی "شرکتی" این است که مجموعه ای کامل از توصیه ها و اصول به وضوح تعریف شده است که هر طراح محترمی از آنها پیروی می کند. کاملاً واضح است که چرا Google Material Design خود را معرفی کرد: نیاز به یکپارچه سازی طراحی وجود داشت تا برنامه ها در هر یک از دستگاه های Android بسیار یکسان به نظر برسند.

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

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

مزایا و معایب طراحی تخت

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

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

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

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

خلاصه کنید

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

در حقیقت، طراحی تخت در سال های اخیر بسیار تکامل یافته است، از سبک کاملاً "مسطح" به سبک "نیمه تخت". اکنون امکان استفاده از لایه‌ها و سایه‌های کم‌رنگ را فراهم می‌کند تا اشیا عمیق‌تر از آنچه قبلاً ظاهر می‌شدند به نظر برسند. بنابراین، من و شما معاصران خوشبخت طراحی تخت 2.0 هستیم.

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

معاون طراحی گوگل Matias Duarte در مصاحبه با The Verge در مورد اصول اولیه طراحی جدید که Material نام دارد صحبت می کند. این یک رویکرد کاملا متفاوت است که مجموعه‌ای از قوانین یکپارچه از نوع نرم‌افزار گرفته تا عملکردها را ارائه می‌کند. در حالی که طراحی کمی عجیب به نظر می رسد و نیاز به عادت کردن دارد.

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

ماده و شکل

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

این سوال بی گناه جرقه ای قدرتمند زده است! - گفت دوارته. کل تیم شروع به فکر کردن در مورد راه جدیدی برای تعامل با عناصر نرم افزار کردند. به جای استفاده از پیکسل های روی صفحه و لایه های انتزاعی، تیم شروع به فکر کردن به طراحی به عنوان یک شی واقعی ملموس کرد. بنابراین، کارت ها باید دارای ویژگی های فیزیکی باشند. زمان آن رسیده که قوانینی را ارائه کنیم که نحوه عملکرد و حرکت همه چیز را در صفحه مشخص کند. تیم توسعه می خواست به اثری دست یابد که کاربر با اشیاء فیزیکی تعامل داشته باشد.

بنابراین، کار بر روی یک ماده استعاری شبیه کاغذ آغاز شد. - مسطح و سفید با سایه های واقعی. همان‌طور که در Android L دیده می‌شود، این بذری بود که بقیه طراحی‌ها از آن رشد کردند. طراحی متریال تماماً در مورد رنگ‌های پر جنب و جوش، مینیمالیسم و ​​حس سازگاری است.

Wylie و Jitkoff می گویند که این یک تکامل زیبایی شناختی از کل فلسفه طراحی گوگل است. در سال 2012 و 2013، در داخل دیوارهای مقر غول اینترنتی، کار بر روی پروژه کندی آغاز شد که طراحی همه چیز را یکپارچه می کرد.

خلاقیت و محدودیت

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

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

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

طراحان گوگل سرسختانه از نام بردن مواد تخیلی استفاده شده خودداری می کنند. راه حلی که هم به آنها انعطاف بیشتری می دهد و هم سطحی از عرفان متافیزیکی را به اصل مطلب اضافه می کند. کاغذ کوانتومی - این چیزی است که برخی از نشت‌ها قبل از Google I/O به نظر می‌رسیدند. این مهم است زیرا مواد از فیزیک تبعیت می کنند و در دام اسکئومورفیسم قرار نمی گیرند. این دقیقاً همانطور که دوارته گفته است تقلید از اشیاء فیزیکی نیست، چیزی "جادویی" است.

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

مادی شدن

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

به همین دلیل است که Android Wear چیزی بیش از تعامل با اعلان ها به کاربران ارائه نمی دهد. الکس فابورگ، طراح پلتفرم، می گوید:

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

گوگل برای خود و در مواد کاغذی "جادویی" خود بیش از حد اعتبار می خواهد، اما دوارته معتقد است دلایل خوبی برای آن وجود دارد.

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

Parc 3.0

چیزهای بیشتری در پشت Material Design وجود دارد تا فقط طراحی Android L، Android Wear و هر چیز دیگری که گوگل با آن درگیر است. ما در مورد احساسات در رابطه بین انسان و فناوری صحبت می کنیم.

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

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

9 اصل

1. ماده یک استعاره است

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

2. سطوح بصری هستند

صفحات و لبه ها سیگنال های بصری را بر اساس درک ما از واقعیت منتقل می کنند. استفاده از ویژگی‌های لمسی آشنا به ما امکان می‌دهد به بخش‌های اولیه مغز خود رجوع کنیم و به درک سریع «نمایش‌شده» کمک می‌کند.

3. بعد باعث ایجاد تعامل می شود

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

4. طراحی پاسخگو یکپارچه

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

5. فونت، گرافیک، رنگ

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

6. اقدامات اولیه

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

7. کاربران تغییرات را آغاز می کنند

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

8. رقص انیمیشن

همه اقدامات در یک محیط واحد انجام می شود. اشیایی که کاربر می بیند، حتی پس از تغییر و سازماندهی مجدد، بقیه تجربه کاربر را مختل نمی کند.

9. حرکت معنا می دهد

حرکت منطقی است و برای جلب توجه ضروری است. انتقال کارآمد هستند.

طراحی هنر خلق کردن است. هدف ما ارضای طیف متنوعی از نیازهای انسان است. همانطور که این نیازها تکامل می یابند، همین امر باید در مورد پروژه ها، ایده ها و فلسفه ما اتفاق بیفتد.

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

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

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

متریال دیزاین چیست؟

طراحی متریال یک زبان گرافیکی و سبک طراحی است که توسط تیم توسعه Google ایجاد شده است تا به طراحان کمک کند تا وب‌سایت‌ها و برنامه‌هایی را ایجاد کنند که در دسترس، کاربردی و مفید باشند. این مفهوم بر اساس اسناد زنده است که در دسترس عموم است و می تواند توسط هر کسی که به مفهوم طراحی متریال علاقه دارد استفاده کند. تا به امروز، اسناد به طور مداوم به روز می شوند تا تغییرات در طراحی و توسعه را منعکس کنند. با تشکر از این، طراحی مواد مرتبط باقی می ماند و به طور مداوم به عنوان یک جهت در حال تحول است.

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

اهداف طراحی متریال

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

اصول طراحی متریال:

1. طراحی متریال یک استعاره است: سیگنال‌های بصری و تمام عناصر طراحی گرافیکی باید مبتنی بر واقعیت اطراف، دنیای مادی، باشد.
2. گرافیک، وضوح، هدفمندی: تئوری اساسی طراحی (استفاده از انواع، شبکه‌ها، سازماندهی فضا، مقیاس، تناسبات، رنگ و تصاویر) باید جلوه‌های بصری را تعیین کند و مبنای بصری متریال طراحی را تشکیل دهد.
3. هر حرکت یا عمل مهم است: حرکت اجسام یا سایر اقدامات انجام شده نباید مزاحم کاربر باشد، برعکس، آنها باید راحتی و سازگاری اقدامات انجام شده را تضمین کنند.

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

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

رنگ و تایپوگرافی طراحی متریال

رنگ ها در طراحی متریال ارتباط زیادی با آن دارند. پالت های مواد کاملاً جسورانه و پر جنب و جوش هستند. ، درست مانند طراحی تخت، sans serif ساده.

« طراحی متریال کامل است، همراه با صداهای خاموش، این رویکرد ریشه در معماری مدرن، علائم جاده‌ای، نوار علامت‌گذاری و زمین‌های ورزشی دارد. سایه ها و هایلایت های پررنگ را برجسته کنید. از رنگ های غیر منتظره و زنده استفاده کنید».

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

دستورالعمل‌های انتخاب و استفاده از فونت‌ها نیز بسیار ابتدایی و ساده هستند. فونت پیش فرض برای همه برنامه ها - Roboto - برای دانلود در لینک موجود است، که در آن می توانید جدول ترکیب و انتخاب فونت ها را نیز بیابید.

قالب ها، ساختار و طراحی

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

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

عناصر اساسی طراحی متریال

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

• صفحه پایین (لایه های پایین طرح)
• دکمه ها
• کارت ها
• دیالوگ ها
• جداکننده ها
• شبکه ها
• لیست ها
• نوارهای پیشرفت و فعالیت
• لغزنده ها
• عناوین فرعی
• سوئیچ ها
• زبانه ها
• فیلدهای متنی
• پنجره های پاپ آپ

طراحانی که ظاهر اجزای پیشنهادی را دوست دارند حتی می توانند دارایی های خود را برای یا Illustrator دانلود کنند. نمادها و سایر جزئیات با سبک‌ها جفت می‌شوند و با الگوی انتخابی سازگار می‌شوند.

راحتی، دسترسی و تجربه کاربری

«یک محصول زمانی در دسترس است که همه افراد - صرف نظر از توانایی - بتوانند از آن برای رسیدن به اهداف خود استفاده کنند. یک محصول واقعاً موفق در دسترس گسترده ترین مخاطبان ممکن است."

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

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

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

10 منابع طراحی مواد

طراحی متریال موضوعی محبوب برای بحث است و منبع الهام بسیاری از وبلاگ‌ها، انجمن‌ها و سایر سایت‌هایی است که طراحان وب در آن جمع می‌شوند. چیزهای مفید زیادی وجود دارد که می توانید مستقیماً از گوگل دانلود کنید، اما منابع دیگری نیز وجود دارند که کار طراحی متریال خود را ارسال می کنند. در اینجا چند سایت وجود دارد که به شما در یادگیری مفاهیم طراحی متریال و دانلود مطالب رایگان کمک می کند.

1. مجموعه ای از عناصر در سبک طراحی متریال برای تلفن های هوشمند و سایر دستگاه های تلفن همراه (به زیر مراجعه کنید).

قسمت 1: گالری طراحی متریال برای وب سایت ها و برنامه ها - محتوای رایگان

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

طراحی متریال توسط UXPin

طراحی متریال توسط Creative Tim

گردآوری رایگان از Designtory

UIDE - مواد طرح رایگان از Mateusz Dembek

منبع اسکچ گوگل برای طراحی متریال

L بوت استرپ طراحی متریال به سبک اندروید توسط ویتالی چرنگا

منبع طرح متریال طراحی توسط Boilerplate

طراحی مواد برای EL Passion

مواد سبک بلوک فروالا

Free Material Style Landing 1.0

طراحی متریال موبایل

طراحی متریال avsc

طراحی متریال رابط کاربری توسط Jakub Kośla

طراحی Matkrial برای اندروید توسط Ivan Bjelajac

طراحی مواد از Ultralinx

طراحی متریال موبایل توسط اما دروز

گردآوری رایگان از آدریان گویا

طراحی متریال توسط UI8

طراحی متریال برای فتوشاپ توسط Psddd

Android Material Design PSD توسط Nine Hertz

سایر کیت های طراحی متریال ممکن است برای شما مفید باشد

طراحی متریال تعاملی ایستگاه توسط نلسون ساکوا

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

طرح مواد توسط بنجامین اشمیت

انتخابگر رنگ مواد انتخابگر رنگ

جمع بندی

مفهوم طراحی متریال یک راه حل خوب فکر شده برای ایجاد هر طراحی وب سایت یا برنامه مدرن است. علاوه بر این، یک راهنمای طراحی متریال نسبتاً دقیق وجود دارد که برای طراحان مشتاق بسیار مفید خواهد بود، اما ممکن است برای طراحان با تجربه کمی ابتدایی به نظر برسد.

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

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