شما اینجا هستید: خانه » آموزش ui » اموزش responsive همراه با تصویر

اموزش responsive همراه با تصویر

طراحی واکنش گرا یا responsive به معنی پیاده سازی یک پلت فرم سازگار با تمامی رزولوشن ها می باشد یعنی محل قرارگیری المان ها و ساختار آن و همچنین وضوح مطالب و تصاویر با کوچک یا بزرگ شدن صفحه نمایش تغییری نکند
در این پست آموزشی ۹ویژگی که باعث responsive شدن پلت فرم شما می شود را به همراه مثال هایی تصویری مرور می کنیم

فرق  responsive و‌addaptive

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

فرق adaptive و responsive

فرق relative و static

با relative تعریف کردن اندازه ها(به صورت درصد)، عرض المان ها متناسب با عرض صفحه نمایش تغییر میکند اما اندازه المان هایی که به صورت static(با px، em و..) تعریف می شود سازگار با سایز صفحه نمایش نیست.

فرق بین relative و static

فرق flow و static

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

فرق flow و static

مفهوم breakpoint

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

breakpoints چیست

مفهوم nested

با nested میتوانید مجموعه ای از المانها را هنگام تغییر رزولوشن جابه جا کنید.

nested چیست

مفهوم max-width

با تعریف کردن max-width میتوانید از بیش از اندازه بزرگ شدن عرض برخی المان ها در صفحاتی با سایز بالا جلوگیری کنید.

max-width چیست

فرق desktop first و mobile first

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

فرق mobile-first و desktop-first

 

فرق vector و image

اگر ایکن ها شامل جزییات زیادی باشد از bitmap استفاده کنید در غیر این صورت با استفاده از vector image می توانید ایکن هایی سازگار با تمامی سایز ها ایجاد کنید.

vector چیست

فرق system font و web font

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

فرق system-font و web-font

 

 

منبع:froont.com

 

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

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

لیست طراحان :  مشاهده طراحان