ثبت بازخورد

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

واقعا راضی‌ام
اصلا راضی نیستم
چطور میتوانیم تجربه بهتری برای شما بسازیم؟

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

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

تکنولوژی

9 تصویر GIF که طراحی پاسخگو را کاملا روشن توضیح می دهند

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

میترا تهرانی
نوشته شده توسط میترا تهرانی | ۲۶ آبان ۱۳۹۳ | ۲۳:۳۰

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

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

وب سایت هایی که با تقدم موبایل طراحی می شوند، دست شما را برای تصمیم گیری در مورد محدودیت ها باز تر می گذارند.

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

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

3038367-inline-i-1-9-gifs-that-explain-responsive-design-brilliantly-01responsive-vs-adaptive-copy

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

3038367-inline-i-2-9-gifs-that-explain-responsive-design-brilliantly-02relative-units-vs-static-units-1-copy

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

3038367-inline-i-4-9-gifs-that-explain-responsive-design-brilliantly-04flow-vs-static-2-copy

نقاط شکست یا بریک پوینتز (Breakpoints)  به لایه ها اجازه می دهند که در قسمت های تعیین شده، تغییر پیدا کنند.

3038367-inline-i-3-9-gifs-that-explain-responsive-design-brilliantly-03with-breakpoints-vs-without-breakpoints-1-co

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

3038367-inline-i-5-9-gifs-that-explain-responsive-design-brilliantly-05nested-vs-not-nested-1-copy

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

3038367-inline-i-7-9-gifs-that-explain-responsive-design-brilliantly-07max-width-vx-no-max-width-1-copy

از نظر فنی تفاوت زیادی بین پروژه هایی که ابتدا از یک صفحه کوچکتر و سپس برای یک صفحه بزرگتر طراحی می شوند (تقدم موبایل mobile first) یا برعکس (تقدم دسکتاپ desktop first) وجود ندارد. اما اگر طراحی شما با تقدم موبایل صورت گرفته باشد، کمک می کند که برای محدودیت های بیشتری که در صفحه نمایش کوچکتر دارید، بهتر تصمیم گیری کنید.

3038367-inline-i-8-9-gifs-that-explain-responsive-design-brilliantly-08desktop-first-vs-mobile-first-3-copy

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

3038367-slide-s-6-9-gifs-that-explain-responsive-design-brilliantly-06system-fonts-vs-webfonts-1

 

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

3038367-inline-i-9-9-gifs-that-explain-responsive-design-brilliantly-09vectors-vs-images-1-copy

دیدگاه‌ها و نظرات خود را بنویسید
مجموع نظرات ثبت شده (35 مورد)
  • آرش
    آرش | ۱۱ اسفند ۱۳۹۳

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

  • آرش
    آرش | ۱۰ اسفند ۱۳۹۳

    سلام
    ممنون از وب سایت عالیتون

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

  • RAPture
    RAPture | ۲۷ آبان ۱۳۹۳

    از اون مقاله هایی که هم خیلی کاربردی هستش هم خسته کننده نبود

  • عــــــامـــــــــر
    عــــــامـــــــــر | ۲۷ آبان ۱۳۹۳

    ممنون ، عالی بود

  • امین
    امین | ۲۷ آبان ۱۳۹۳

    خیلی با این پست حال کردم دمتون گرم

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