مهمترین اصول طراح وب سایت واکنشگرا

شروع موضوع توسط academyIT ‏22 فوریه 2016 در انجمن نرم‌افزارهای توسعه‌وب‌سایت (Sublime, VSCode و ...)

کلمات کلیدی:
  1. academyIT

    academyIT Banned

    ارسال‌ها:
    42
    تشکر شده:
    4
    امتیاز دستاورد:
    6
    سلام دوستان
    قصد داریم در اینجا یک آموزش بسیار ارزشمند و کاربردی را برای شما دوستان عزیز قرار بدیم و کمک کنیم تا بتونید در زمینه طراحی وب سایت های رسپانسیو و واکنشگرا اصولی و حرفه ای عمل کنید.

    این آموزش در دو قسمت در اختیار شما عزیزان قرار میگیرد.

    قسمت اول :

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


    [​IMG]



    طراحی وبسایت Responsive یا واکنشگرا یک راهکار بسیار کارآمد برای بهینه سازی وب سایت در سخت افزار های مختلف مثل موبایل و تبلت :

    این نوع طراحی فاقد اندازه‌ی ثابت صفحه، فاقد میلی‌متر و اینچ و فارغ از محدودیت‌های صفحه نمایش است. طراحی در واحد پیکسل فقط برای دستگاه‌های رومیزی (desktop) یا همراه (mobile) دیگر قدیمی شده، چراکه همواره گجت‌های بیشتر و بیشتری توانایی باز کردن یک وبسایت را دارند. بنابراین میخوام در این بخش چند اصل اساسی را درخصوص طراحی وب‌سایت واکنشگرا به شما دوستا و همراهان دوست داشتی آکادمی آی تی بگم و به جای مقابله با وبسایت شناور (fluid web) به استقبال آن بریم. برای حفظ سادگی کار، بر چیدمان (layout) تمرکز می‌کنیم .
    اما لازم که چند نکته رو در این مورد خدمت شما دوستان عزیز بگم :

    · جریان (flow)

    زمانی که شما در ابزاری مثل موبایل که عرض اون نسبت به صفحه کمتر هست وب سایت رو میبینید خوب طبیعتا ارتفاع وب سایت بسیار بیشتر میشه مثلا اگر توی یک دریف در دسکتاپ 3 ستون اخبار جا میشده توی موبایل هر ستون در یک سطر باید قرار بگیره و اینکار یعنی اشغال کردن بیشتر فضای عمودی باید باعث بشه همه محتویات بعدشون به پایین تر هل داده بشن نه اینکه به علت رعایت نکردن اصول طراحی رسپانسیو محتویات روی هم بیفتن به این کار flow یا جریان میگن . اگر شما به طراحی با پیکسل و پوینت (point) عادت کردی شاید درک این قابلیت کمی برات سخت باشه، اما وقتی به اون عادت کنی به راحتی قابل درک می‌شه.


    [​IMG]


    · واحدهای نسبی (Relative units)
    به جای استفاده از واحد های ثابت مثل پیکسل و ... بهتره از واحد های نسبی مثل درصد استفاده کنیم تا وب سایت رو نسبت به تغییرات عرض سازگارتر کنه . مثلا وقتی میگیم 100% منظورمون کل عرض مرورگر توی هر سخت افزاریه حالا چه عرض اون سخت افزار 400px باشه جه 1900px فرقی نمیکنه ولی وقتی میگیم 800px دیگه توی سخت افزار هایی که صفحه نمایش اونها از 800px کمتر هست قطعا به مشکل بر میخوریم و اسکرول افقی خواهیم داشت . به طراحی با مقیاس های ثابت مثل px , point و... Static Unit میگن و به طراحی با واحد های نسبی مثل درصد Relative Units میگن.



    [​IMG]

    · مقادیر بیشینه (Max) و کمینه (Min)
    بعضی وقت ها خیلی خوبه که محتوا همه‌ی عرض صفحه را بگیره یعنی Full Width باشه ، مثلا روی یک دستگاه همراه. اما اینکه همان محتوا کل عرض صفحه نمایش تلویزیونتان را بگیرد معمولا کار معقولی نیست. اینجاست که مقادیر min و max به کمک می‌آد. مثلاً پهنای ٪۱۰۰و عرض بیشینه‌ی ۱۰۰۰ پیکسل به این معناست که محتوا کاملا صفحه را پر می‌کند، اما نباید بیشتر از ۱۰۰۰ پیکسل بشه .


    [​IMG]



    منتظر قسمت دوم این آموزش باشید...
     

    پیوست ها:

    • 111.png
      111.png
      اندازه فایل:
      کیلوبایت 105.5
      نمایش ها:
      7
    • 22.png
      22.png
      اندازه فایل:
      کیلوبایت 10.2
      نمایش ها:
      6
    • 33.png
      33.png
      اندازه فایل:
      کیلوبایت 16.7
      نمایش ها:
      6
    • Untitled.png
      Untitled.png
      اندازه فایل:
      کیلوبایت 22.8
      نمایش ها:
      6
    نوشته شده توسط academyIT در ‏22 فوریه 2016
  2. academyIT

    academyIT Banned

    ارسال‌ها:
    42
    تشکر شده:
    4
    امتیاز دستاورد:
    6
    قسمت دوم اصول طراحی وب سایت واکنشگرا

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



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


    [​IMG]


    · عناصر تودرتو (Nested objects)
    کنترل تعداد زیادی عنصر وابسته به هم کار سختیه مخصوصا توی طرایح ی نسبی ، بنابراین دسته‌بندی این المان ها در یک مجموعه که دارای یک والد هستن کار رو به مراتب ساده تر و منظم تر میکنه . اینجاست که واحدهای ثابت مثل پیکسل‌ها می‌توانند به کمک بیایند. این واحدها برای محتویاتی که نمی‌خواهید نسبی باشن و میخواید ثابت باشن مثل لوگو و دکمه‌ها کارآمد هستن .


    [​IMG]

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


    [​IMG]

    · مقایسه‌ی فونت‌های وبی (Webfonts) با فونت‌های سیستم (System fonts)
    خوب این واضحه که شما اگر از فونت های وبی مثل yekan یا dinar استفاده کنید وب سایت زیباتری دارید تا از فونت های استاندارد سیستمی مثل Tahoma و ... استفاده کنید و این هم بدیهیه که استفاده از فونت های وبی باعث میشه صفحه وب سایت شما دیر تر لود بشه و حجمش بره بالاتر .اگه میخوای با فونت ها وبی بیشتر آشنا بشی و همه اونها رو یکجا ببینی و استفاده کنی به این آدرس سر بزن : http://webfont.academy-it.ir



    [​IMG]

    · تصاویر Bitmap در برابر Vector
    اگر در طراحی از روش flat استفاده میکنی و نمیخوای خیلی افکت و سایه و ... به آیکون ها و .. سایتت بدی قطعا وکتور گزینه بهتریه مثل فونت آیکون ها که به جای تصاویر jpg و png و ... استفاده میشن . گذشته از این مورد بسیار مهم مسئله ای هست که هیچ وقت نباید فراموش کنی اون خم بخینه سازی تمام تصاویر bitmap در سایتت هست . همه تصاویر رو با روش های مختلفی که بلد هستی بهینه کن .


    [​IMG]



    اگر این موارد و سایر موارد آموزشی آکادمی آی تی برای شما دوست عزیز سودمند بوده لطفا وب سایت ما رو به سایر دوستانتون هم معرفی کنید . academy-it.ir



    منتظر آموزش های بعدی ما باشید....
     

    پیوست ها:

    • d.png
      d.png
      اندازه فایل:
      کیلوبایت 12.3
      نمایش ها:
      6
    • c.png
      c.png
      اندازه فایل:
      کیلوبایت 14.8
      نمایش ها:
      6
    • 55555.png
      55555.png
      اندازه فایل:
      کیلوبایت 39.5
      نمایش ها:
      7
    • 33333.png
      33333.png
      اندازه فایل:
      کیلوبایت 20.4
      نمایش ها:
      6
    • 22222.png
      22222.png
      اندازه فایل:
      کیلوبایت 29.7
      نمایش ها:
      6
    نوشته شده توسط academyIT در ‏23 فوریه 2016

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