Loading...



  • magbot
    magbot
    یکشنبه 26 خرداد 1398 - 04:08

    ضوابط و اصول طراحی سایت واکنشگرا (50 بازدید)


    اصول و ضوابط طراحی سایت واکنشگرا
    تکنولوژی
    بیشتر توسعه دهنده های وب دوست دارند بدانند که طراحی آنها بر روی وب سایت های موبایل چگونه نشان داده می شود. طراحی وب پاسخگو یکی از بهترین راهها برای تطابق با اندازه های مختلف صفحه نمایش است.
    در واقع طراحی وب پاسخگو یک مفهوم است که در آن یک وب سایت برای پر کردن فضای آن منقبض یا منبسط می شود و امکان داشتن صفحاتی با اندازه ی متغییر را فراهم می کند. وبلاگ طراحی FROONT
    برخی از بلوک های ساختمان کلیدی مانند استفاده از واحد نسبی و یا ایجاد نقاط انفصال که در آن محتوای گسترده می تواند به پایین صفحه حرکت کند را سازماندهی می کند.
    در کل می توان گفت که طراحی وب پاسخگو یک راه حل عالی برای مشکل چند صفحه نمایشی است. در این شیوه طراحی ثابت کردن اندازه صفحه نمایش، میلی متر و اینچ، و درگیری با محدودیت های فیزیکی وجود ندارد. در زیر برخی اصول اساسی طراحی وب پاسخگو را بیان می کنیم.
    طراحی وب پاسخگو در مقابل تطبیقی
    ممکن است این دو شیوه یکسان به نظر برسند اما این طور نیست. هر دو رویکرد مکمل یکدیگر هستند بنابراین هیچ راه درست یا غلطی برای انجام آن وجود ندارد.
    1.gif
    جریان
    جریان یا flow
    بدان معنی است که با کوچکتر شدن اندازه صفحه نمایش، محتوا شروع به گرفتن فضای عمودی بیشتری می کند. اگر از پیکسل و نقاط برای طراحی استفاده کنید ممکن است درک این مسئله کمی مشکل باشد، اما زمانی که از آن استفاده کنید تفاوت آن را حس می کنید.
    2.gif
    واحدهای نسبی
    تراکم پیکسل در دسکتاپ ها یا دستگاههای موبایل متفاوت است، بنابراین ما نیاز به واحدهایی داریم که انعطاف پذیر باشند و در همه جا کار کنند. به همین دلیل واحدهای نسبی مانند درصدها می توانند مفید باشند. در واقع ساخت صفحه ای با عرض 50 درصد بدین معنی است که نیمه صفحه نمایش را خواهد گرفت.
    3.gif
    نقاط انفصال
    نقاط انفصال اجازه می دهد طرح در نقاط از پیش تعریف شده تغییر بیابد، برای مثال داشتن سه ستون بر روی دسکتاپ و یا یک ستون بر روی تلفن همراه. بیشتر ویژگی های CSS می توانند از یک نقطه انفصال به دیگری تغییر بیابند. این کار معمولا به دسکتاپ شما بستگی دارد. اگر یک جمله شکسته شود ممکن است نیاز به اضافه کردن یک نقطه انفصال داشته باشید. اما در استفاده از آنها احتیاط کنید.
    4.gif
    حداکثر و حداقل مقدار
    گاهی اوقات بر روی دستگاههای موبایل بهتر است که محتوا تمام عرض صفحه نمایش را بگیرد، اما انجام همین کار بر روی تلویزیون ها زیاد جالب نیست. در اینجا بحث حداقل یا حداکثر مقدار مطرح می شود. برای مثال داشتن عرض 100 درصد و حداکثر پیکسل 1000 بدین معنی است که محتوا تمام صفحه نمایش را پر می کند اما سعی کنید از 1000 پیکسل استفاده نکنید.
    5.gif
    اشیاء تو در تو
    داشتن عناصر زیادی که با هم در ارتباط اند کنترل آنها را سخت تر می کند، بنابراین می توان با بسته بندی آنها در ظرف هایی، آنها را به صورت مرتب و قابل فهم درآورد. در این جا واحدهای استاتیک مانند پیکسل می توانند کمک کنند و برای محتواهایی مانند آرم ها و یا دکمه هایی که نمی خواهید مقیاس بندی کنید مفید هستند.
    6.gif
    موبایل یا دسکتاپ
    از لحاظ فنی تفاوت زیادی وجود ندارد اگر یک پروژه از یک صفحه نمایش کوچک به بزرگ و یا بالعکس تغییر بیابد. با این حال اگر با موبایل این کار را انجام دهید محدودیت های بیشتری وجود دارند.
    7.gif
    فونت های وب در مقابل فونت های سیستم
    اگر چه فونت های وب خیره کننده به نظر می رسند، اما باید آنها را دانلود کنید و هرچه تعداد آنها بیشتر شود صفحه دیرتر بارگذاری خواهد شد. فونت های سیستم از سوی دیگر بسیار سریع هستند به جز زمانی که کاربر یه صورت محلی آنها را نداشته باشد.
    8.gif
    تصاویر Bitmap در مقابل Vectors
    اگر آیکون شما جزئیات و جلوه ای فانتزی زیادی دارد، باید از تصاویر bitmap یا پیکسلی استفاده کنید. در غیر این صورت می توانید تصاویر vector
    یا برداری را به کار ببرید. برای پیکسلی از فرمت های
    jpg، png یا gif و برای برداری از فرمت SVG یا یک فونت آیکون استفاده کنید. با اینکه هر کدام از این فرمت ها دارای مزایا و مشکلاتی هستند، اما در هر صورت باید به اندازه آن توجه داشته باشید و هیچ عکسی را بدون بهینه سازی به صورت آنلاین درنیاورید. از سوی دیگر تصاویر برداری اغلب کوچک هستند اما مرورگرهای قدیمی از آن پشتیبانی نمی کنند. علاوه بر این اگر تصاویر دارای انحناهای زیادی باشد ممکن است برای تصاویر پیکسلی سنگین باشد و استفاده از تصاویر برداری تصمیم عاقلانه تری است.
    9.gif