گروه مهندسی کدکرنر

طراحی واکنشگرا: نمونه‌ها و بهترین روش‌ها – بخش 1

طراحی واکنشگرا: نمونه‌ها و بهترین روش‌ها – بخش 1

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

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

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

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

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

نمونه‌هایی از طراحی واکنشگرا

·       Designmodo

Designmodo Responsive

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

·       Simon Collison

Responsive Web Design

اگرچه امروزه این وب سایت به سبک مشبک خاکستری بسیار خسته‌کننده و کسل‌کننده به نظر می‌رسد، اما بعد از انتشار آن، باعث ایجاد نوعی جوش و جنجالی با چیدمان بالای آن شد.

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

·       Andersson-Wise Architects

https://designmodo.com/wp-content/uploads/2011/10/2.jpg

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

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

·       Stephen Caver

https://designmodo.com/wp-content/uploads/2011/10/3.jpg

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

ü       پیغام خوش‌آمد گویی بزرگ با کمک تایپوگرافی زمخت تهیه شده است

ü       مجموعه‌ای از بلوک‌های بزرگ که تقلیدی از منوی اصلی در بالا است

ü       چیدمان مرتب وبلاگ نویسی

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

·       Sparkbox

https://designmodo.com/wp-content/uploads/2011/10/4.jpg

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

·       Food Sense

Responsive Design

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

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

·       The Boston Globe

https://designmodo.com/wp-content/uploads/2011/10/6.jpg

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

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

·       Think Vitamin

Responsive Design Example

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

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

·       Sasquatch! Music Festival

https://designmodo.com/wp-content/uploads/2011/10/8.jpg

Sasquatch! فستیوال موسیقی باید با تعداد زیادی از محتویات چند رسانه‌ای از جمله ویدئو و جلوه‌های ویژه سروکار داشته باشد که علاوه بر این، با حروف هنری نوشته شده و تصاویر فوق‌العاده‌ای که نوشته شده، اضافه شده‌است. بنابراین برای تیم، این یک چالش برای نمایش همه چیز درست روی موبایل‌ها و تبلت‌ها است.

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

·       Internet Images

https://designmodo.com/wp-content/uploads/2011/10/9.jpg

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

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

·       Staffanstorp

https://designmodo.com/wp-content/uploads/2011/10/10.jpg

در اینجا، توانایی سازگاری زیبایی با صفحات کوچک‌تر و همچنین موارد بزرگ‌تر، چنین مزایایی را به ارمغان می‌آورد:

ü       بدون توجه به وسایلی که وب سایت شما را نمایش می‌دهند، قابلیت خواندن کامل داشته باشید.

ü       ظهور ساختاری خوب برای افزایش سلسله‌مراتب اطلاعات.

ü       انتقال آسان پیغام‌ها به خوانندگان که اغلب شامل تبلت‌ها و گوشی‌های موبایل هستند.

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

 

برای مشاهده قسمت دوم این مقاله اینجا کلیک کنید.

با ما همراه باشید.

 

منبع: designmodo

به اشتراک گذاری

Design and development by © CODECORNER & All Right Reserved