امروز،
هنگامی که عبارت ” Material design” را می شنوید، ممکن است تصویر ذهنی یک طراح داخلی را که بین انتخاب پارچه فروشی ظاهر می شود، تحریک کند. این استعاره به طرز عجیب و غریبی نمی تواند از مشخصات طراحی جدید گوگل دور باشد. در حالی که بین دنیای دیجیتال و فیزیکی تفاوت های زیادی وجود دارد، گوگل تلاش می کند این شکاف را برای یک فرایند طراحی رابط کاربری بیشتر مرتبط سازد.
Material design زبان طراحی شده برای سیستم عامل جدید گوگل آندروید است که در تابستان ۲۰۱۴ اعلام شد. اگرچه این ویژگی عمدتا بر روی طراحی لمسی مبتنی بر برنامه تلفن همراه تمرکز دارد، اما باید این امکان را برای استخراج ایده های مشابه به طراحی وب فراهم آورد. در حالی که مستندات آنلاین کاملا دقیق است، متوجه شدم که در بعضی از آنها گیج کننده است. برای این راهنما، من می خواهم اطلاعات ضروری تر را برای توضیح هدف Material design و چگونگی تاثیر آن بر روند طراحی رابط داشته باشم.
Material design چیست؟
گوگل همواره مشخصات سخت افزاری آنلاین خود را برای زبان طراحی مواد خود قرار داده است. طراحی بسیار جالبی برای Material design وجود دارد اما به طور خلاصه برای ایجاد پایه ی بهتر رابط کاربری برای آندروید ساخته شده است.
Material design اساسا اهداف مربوط به مدیریت این تعاملات را پوشش می دهد. از آنجا که این هنوز یک مفهوم جدید است، انتظار می رود که به روز رسانی های بیشتر از گوگل به عنوان زمان ادامه یابد.
مهم است که به یاد داشته باشید این است که Material design یک زبان است. این فقط یک کیت UI یا مجموعه ای از عناصر رابط نیست، بلکه یک راه جدید برای صحبت در مورد و نگاه کردن به رابط ها است.
سطوح Material design
هر شیء با استفاده از پیکسل مستقل یا dp اندازه گیری می شود. این واحد اندازه گیری یک واحد فیزیکی است که می تواند به اینچ یا میلی متر بر اساس اندازه صفحه نمایش دستگاه تبدیل شود. این واحدها طراحان را قادر می سازد تا رابط هایی را ایجاد کنند که مستقل از یک رزولوشن صفحه خاص باشند.
Material design با استفاده از DPS برای اندازه گیری ارتفاع، عرض و عمق مواد. از آنجایی که مواد دیجیتال در واقع “واقعی” محسوب میشوند، در یک سیستم مختصات سه بعدی با محورهای X، Y و Z قرار دارد. تصویر زیر باید نقطه من را توضیح دهد:
این نمودار از صفحه اشیاء فضایی گوگل در مشخصات Material design است. اشیاء لایه بندی شده یک عمق عمیق را در دنیای واقعی ایجاد می کنند.
رفتار محتوا ( Content Behavior )
محتوا جاذبه اصلی است که کاربران را متقاعد به دانلود یک نسخه از پروژه فوق العاده عالی خود را. برنامه های موبایل با مواد ایجاد می شوند – اما بدون هیچ محتوایی، برنامه ها فقط بلوک های مواد خالی هستند. مردم از برنامه ها برای بررسی آب و هوا، عکس های فوری، خواندن اخبار و یا ساعت های خنک کننده در رسانه های اجتماعی استفاده می کنند. محتوا چیزی است که رفتار تعاملی را در اختیار دارد.
هنگامی که کاربران با محتوا ارتباط برقرار می کنند، آنها با مواد هم تعامل دارند. ضربه زدن به یک ویدیو یا انتخاب متن باید طبیعی باشد. کشیدن یک دکمه یا سوئیچ در سراسر صفحه، باید به طور ضمنی فرآیند دنیای واقعی را تقلید کند. رفتار مبتنی بر هدف کاربر باید بصری باشد.
Material design به وضوح به تعامل تلفن همراه متکی است، اما ایده های مشابه را می توان با کلیک های ماوس گسترش داد. از آنجا که برنامه های کاربردی لمسی بیشتر فیزیکی هستند، آنها نیاز به توجه بیشتری به جزئیات دارند. نگاهی به اجزای Material design برای دیدن چند نمونه از محتوای ادغام شده با اینترفیس ها.
انیمیشن و حرکت ( Animation and Motion )
برنامه های تلفن همراه از زمانی که آیفون اصلی قفسه فروشگاه تمام قرن ها قبل از آن استفاده از حرکت استفاده می شود. در حال حاضر به نظر می رسد تکنولوژی به نوآوری دست یافته است و امکان ایجاد حرکت با منوها، دکمه ها، پنجره های مدال، حتی آیکون ها امکان پذیر است. این مسئله امکان نیست بلکه یک سوال ضروری است.
Material design تمرکز زیادی بر حرکت دارد. این مکانیسم پاسخ به تعامل با کاربر است که اغلب می تواند واقعیت را تقلید کند.
هنگامی که تحت فشار قرار گرفتند، برخی از اشیاء سریعتر از دیگران شلیک می شوند. وقتی فشرده شد، برخی از اشیا عمیق تر از دیگران فشرده می شوند.
Material design گوگل دارای برخی ویژگی های اساسی است که می تواند مانند کشش، ادغام، تقسیم و بازسازی انجام دهد. این احتمالا از چیزهایی مانند SpongeBob ساخته شده است.همچنین لازم به ذکر است که Material design در هر محور معمولا براساس تعامل کاربر حرکت می کنند.
چیزهای بیشتری در رابطه با خواص Material design وجود دارد اما حقیقت این است که Material design مانند سطح دیجیتال به ساختار سلسله مراتبی دستور داده می شود. حرکت برای نشان دادن رابطه بین تعامل کاربر و نحوه تنظیم مجدد مواد مورد استفاده قرار می گیرد.
آیکون رابط ( Interface Icon )
یکی از آخرین نکته ای که می خواهم بپوشم استفاده از آیکون است. روندهای تخت در این زبان طراحی جدید باقی مانده اند و آیکون ها متفاوت نیستند. هنگام ساخت آیکون های رابط کاربری خود، بزرگترین چیز برای یادآوری، سازگاری است.
من باید ذکر کنم که من در مورد آیکون های محصول صحبت نمی کنم این ها آیکون هایی هستند که در هنگام نمایش اولیه برنامه در صفحه اصلی مشاهده می کنید. طرح های زیادی به طراحی آیکون محصول وارد می شوند، اما این پروژه همیشه در هنگام طراحی رابط کاربری نقش مهمی ایفا نمی کند.
آیکون های رابط کاربری به عنوان آیکون های سیستم در زبان مواد اشاره شده است. هدف این است که برای ایجاد آیکون هایی که بلافاصله قابل تشخیص در هر اندازه هستند. این به معنی جزئیات بسیار کم و یک رنگ جامد است. گوگل یک نمونه از نمونه های خود را دارد.
آیکون ها به عنوان PNG منتشر شده اند و اگر از Sketch استفاده می کنید، امکان دانلود فایل قابل ویرایش نیز وجود دارد. من احساس می کنم که این آیکون ها شبیه تعادل کامل بین سادگی و جزئیات در مورد طراحی مواد است. آنها آسان تشخیص هستند و همه آنها بسیار سازگار هستند.
شرکتلینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید اینتن با تیم حرفه ایی خود توانسته یکی از بهترین شرکت های طراحی سایت در تهران را به خود اختصاص دهد.این شرکت با بیش از ۸ سال سابقه در زمینه ی طراحی سایت های اینترنتی و سئو لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید در حال فعالیت است و بیش از ۴۰۰ سایت معتبر را طراحی و به نام خود اختصاص داده است.برای کسب اطلاعات بیشتر با کارشناسان ما در قسمت لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید در ارتباط باشید تا در حیطه ی کاری خود اطلاعات بیشتری کسب نمایید.
Material design زبان طراحی شده برای سیستم عامل جدید گوگل آندروید است که در تابستان ۲۰۱۴ اعلام شد. اگرچه این ویژگی عمدتا بر روی طراحی لمسی مبتنی بر برنامه تلفن همراه تمرکز دارد، اما باید این امکان را برای استخراج ایده های مشابه به طراحی وب فراهم آورد. در حالی که مستندات آنلاین کاملا دقیق است، متوجه شدم که در بعضی از آنها گیج کننده است. برای این راهنما، من می خواهم اطلاعات ضروری تر را برای توضیح هدف Material design و چگونگی تاثیر آن بر روند طراحی رابط داشته باشم.
Material design چیست؟
گوگل همواره مشخصات سخت افزاری آنلاین خود را برای زبان طراحی مواد خود قرار داده است. طراحی بسیار جالبی برای Material design وجود دارد اما به طور خلاصه برای ایجاد پایه ی بهتر رابط کاربری برای آندروید ساخته شده است.
Material design اساسا اهداف مربوط به مدیریت این تعاملات را پوشش می دهد. از آنجا که این هنوز یک مفهوم جدید است، انتظار می رود که به روز رسانی های بیشتر از گوگل به عنوان زمان ادامه یابد.
مهم است که به یاد داشته باشید این است که Material design یک زبان است. این فقط یک کیت UI یا مجموعه ای از عناصر رابط نیست، بلکه یک راه جدید برای صحبت در مورد و نگاه کردن به رابط ها است.
سطوح Material design
هر شیء با استفاده از پیکسل مستقل یا dp اندازه گیری می شود. این واحد اندازه گیری یک واحد فیزیکی است که می تواند به اینچ یا میلی متر بر اساس اندازه صفحه نمایش دستگاه تبدیل شود. این واحدها طراحان را قادر می سازد تا رابط هایی را ایجاد کنند که مستقل از یک رزولوشن صفحه خاص باشند.
Material design با استفاده از DPS برای اندازه گیری ارتفاع، عرض و عمق مواد. از آنجایی که مواد دیجیتال در واقع “واقعی” محسوب میشوند، در یک سیستم مختصات سه بعدی با محورهای X، Y و Z قرار دارد. تصویر زیر باید نقطه من را توضیح دهد:
این نمودار از صفحه اشیاء فضایی گوگل در مشخصات Material design است. اشیاء لایه بندی شده یک عمق عمیق را در دنیای واقعی ایجاد می کنند.
رفتار محتوا ( Content Behavior )
محتوا جاذبه اصلی است که کاربران را متقاعد به دانلود یک نسخه از پروژه فوق العاده عالی خود را. برنامه های موبایل با مواد ایجاد می شوند – اما بدون هیچ محتوایی، برنامه ها فقط بلوک های مواد خالی هستند. مردم از برنامه ها برای بررسی آب و هوا، عکس های فوری، خواندن اخبار و یا ساعت های خنک کننده در رسانه های اجتماعی استفاده می کنند. محتوا چیزی است که رفتار تعاملی را در اختیار دارد.
هنگامی که کاربران با محتوا ارتباط برقرار می کنند، آنها با مواد هم تعامل دارند. ضربه زدن به یک ویدیو یا انتخاب متن باید طبیعی باشد. کشیدن یک دکمه یا سوئیچ در سراسر صفحه، باید به طور ضمنی فرآیند دنیای واقعی را تقلید کند. رفتار مبتنی بر هدف کاربر باید بصری باشد.
Material design به وضوح به تعامل تلفن همراه متکی است، اما ایده های مشابه را می توان با کلیک های ماوس گسترش داد. از آنجا که برنامه های کاربردی لمسی بیشتر فیزیکی هستند، آنها نیاز به توجه بیشتری به جزئیات دارند. نگاهی به اجزای Material design برای دیدن چند نمونه از محتوای ادغام شده با اینترفیس ها.
انیمیشن و حرکت ( Animation and Motion )
برنامه های تلفن همراه از زمانی که آیفون اصلی قفسه فروشگاه تمام قرن ها قبل از آن استفاده از حرکت استفاده می شود. در حال حاضر به نظر می رسد تکنولوژی به نوآوری دست یافته است و امکان ایجاد حرکت با منوها، دکمه ها، پنجره های مدال، حتی آیکون ها امکان پذیر است. این مسئله امکان نیست بلکه یک سوال ضروری است.
Material design تمرکز زیادی بر حرکت دارد. این مکانیسم پاسخ به تعامل با کاربر است که اغلب می تواند واقعیت را تقلید کند.
هنگامی که تحت فشار قرار گرفتند، برخی از اشیاء سریعتر از دیگران شلیک می شوند. وقتی فشرده شد، برخی از اشیا عمیق تر از دیگران فشرده می شوند.
Material design گوگل دارای برخی ویژگی های اساسی است که می تواند مانند کشش، ادغام، تقسیم و بازسازی انجام دهد. این احتمالا از چیزهایی مانند SpongeBob ساخته شده است.همچنین لازم به ذکر است که Material design در هر محور معمولا براساس تعامل کاربر حرکت می کنند.
چیزهای بیشتری در رابطه با خواص Material design وجود دارد اما حقیقت این است که Material design مانند سطح دیجیتال به ساختار سلسله مراتبی دستور داده می شود. حرکت برای نشان دادن رابطه بین تعامل کاربر و نحوه تنظیم مجدد مواد مورد استفاده قرار می گیرد.
آیکون رابط ( Interface Icon )
یکی از آخرین نکته ای که می خواهم بپوشم استفاده از آیکون است. روندهای تخت در این زبان طراحی جدید باقی مانده اند و آیکون ها متفاوت نیستند. هنگام ساخت آیکون های رابط کاربری خود، بزرگترین چیز برای یادآوری، سازگاری است.
من باید ذکر کنم که من در مورد آیکون های محصول صحبت نمی کنم این ها آیکون هایی هستند که در هنگام نمایش اولیه برنامه در صفحه اصلی مشاهده می کنید. طرح های زیادی به طراحی آیکون محصول وارد می شوند، اما این پروژه همیشه در هنگام طراحی رابط کاربری نقش مهمی ایفا نمی کند.
آیکون های رابط کاربری به عنوان آیکون های سیستم در زبان مواد اشاره شده است. هدف این است که برای ایجاد آیکون هایی که بلافاصله قابل تشخیص در هر اندازه هستند. این به معنی جزئیات بسیار کم و یک رنگ جامد است. گوگل یک نمونه از نمونه های خود را دارد.
آیکون ها به عنوان PNG منتشر شده اند و اگر از Sketch استفاده می کنید، امکان دانلود فایل قابل ویرایش نیز وجود دارد. من احساس می کنم که این آیکون ها شبیه تعادل کامل بین سادگی و جزئیات در مورد طراحی مواد است. آنها آسان تشخیص هستند و همه آنها بسیار سازگار هستند.
شرکتلینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید اینتن با تیم حرفه ایی خود توانسته یکی از بهترین شرکت های طراحی سایت در تهران را به خود اختصاص دهد.این شرکت با بیش از ۸ سال سابقه در زمینه ی طراحی سایت های اینترنتی و سئو لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید در حال فعالیت است و بیش از ۴۰۰ سایت معتبر را طراحی و به نام خود اختصاص داده است.برای کسب اطلاعات بیشتر با کارشناسان ما در قسمت لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید در ارتباط باشید تا در حیطه ی کاری خود اطلاعات بیشتری کسب نمایید.