اندازه معمول صفحات در طراحی

May 10, 2005 at 10:38 pm

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

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

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

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

حال با گفتن همه مزایای اندازه های ثابت صفحه، چه اندازه ای مناسب است؟ ابتدا یک کاغذ، سایز نامه را در نظر بگیرید. این یک اندازه استاندارد 11×½8 اینچ است. روی یک سیستم با درجه وضوح 72dpi این به شکل 612 پیکسل در 792 پیکسل در خواهد آمد. مرورگری مانند اینترنت اکسپلرر می تواند محتویات را در سه صفحه با دقت 640×480 و یا در دو صفحه یا بیشتر با دقت 600×800 یا یک صفحه و نیم با دقت 768×1024 پرکند و در انتها کل صفحه با 1280×1024 کامل می شود.

حال این اعداد و ارقام بیانگر چه چیزی برای ماست؟ این مساله به ما می گوید که مشکل اصلی، صفحه نمایش کاربر است. حال سئوال بزرگتر این است که اندازه صفحه نمایش چقدر باشد؟ ابتدا سیستم های کامپیوتری را در نظر بگیرید، اندازه صفحه نمایش معمولی شامل 640×480 ، 600×800، 1024×767، 1024×1280 و 1600×1200 است. سایز های دیگری نیز مهم هستند مثل اندازه صفحه نمایش های MSNTV و پالم.

اندازه صفحه نمایش آن قدر که طراحان تصور می کنند مهم نیست، حتی اگر کاربران وضوح خاصی داشته باشند سایز مرورگرشان را با کل صفحه نمایش تنظیم نمی کنند و نمی خواهند این کار را انجام دهند. رنگ مرورگرهای رایج فضای صفحه نمایش را می گیرد. سیستم عامل های گوناگون همانند ویندوز به هر حال کمی فضا اشغال می کنند. حتی اگر فرض را بر این بگیریم که کاربران درجه وضوح 640×480 داشته باشند، قبل از حرکت نوار پیمایشی فقط 570 تا 580 پیکسل از عرض صفحه نمایش و 280 تا 300 پیکسل از طول آن، بسته به نگارش رورگر قابل استفاده است.

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

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

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

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

دسته: طراحی وب | نویسنده: مرتضی الوانی
  1. 12 نظر برای این مطلب ارسال شده است. نظر خود را ارسال کنيد »

  1. 1

    میلاد قیصری


    با سلام آقای الوانی خیلی جالب بود!
    یه مدت الوان وب لود نمیشد؟
    خوش باش یا حق

    May 15, 2005 at 1:53 pm

  2. 2

    رهگذر


    سلام
    تبريك مي گم براي سايت زيباتون
    و از لينكي كه به من داديد متشكرم
    به من هم سري بزن
    موفق باشي

    May 15, 2005 at 8:16 pm

  3. 3

    موسي


    سلام دوست گرامی

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

    فقط پیشنهادی داشتم:

    چرا یادداشتهایتان راجع به یک مطلب خاص مانند php یا CSS را به صورت E-Book در نمی آورید تا قابل

    استفاده تر باشد؟

    شاد باشید

    May 16, 2005 at 9:51 pm

  4. 4

    مرتضی الوانی


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

    May 17, 2005 at 8:21 am

  5. 5

    بهزاد


    چگونه می توان یک درایو را به چند درایو تقسیم کرد . ممنون

    June 6, 2005 at 6:27 pm

  6. 6

    امیر


    سلام یه سوال خیلی واجب! من طراح سایتم اما نمیدونم چه جوری باید وقتی صفحه 800*600 میشه صفحه ای که طراحی کردمو وسط قرار بدم…
    به میلم ارسال کن! ممنوووون…

    June 20, 2005 at 4:22 pm

  7. 7

    mahdi


    salam ye soal dashtam che tor mishe ye weblog ba chand saffeh dasht
    masalan
    xxx.mihanblog/next1

    August 4, 2005 at 9:27 am

  8. 8

    sepide


    سلام
    بخاطر مطالب مفیدی که بهشون اشاره کردین سپاسگزارم. من یه مشکلی در طراحی وب سایت دارم،چطور می تونم یک صفحه وب رو طوری طراحی کنم که در رزلوشنهای 600*800 و 768×1024 خودشو اندازه صفحه نمایش کنه.ازتون خواهش می کنم منو در این زمینه راهنمایی کنید. در صورت امکان پاسخ رو به ایمیلم ارسال کنید.

    قربان شما سپیده

    August 30, 2005 at 10:48 pm

  9. 9

    شقایق


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

    December 17, 2005 at 3:33 am

  10. 10

    طراحی سایت املاک


    تشکر از مطلبتون

    February 12, 2014 at 9:18 pm

  11. 11

    محمدرضا زارع


    با سلام و خسته نباشد
    من با یم مشکلی برخوردم که از نداشتن اطلاعات ناشی میشه اونم اینه که من میخوام برای سایتم فرم های مانند قیمت طلا و ارز و قیمت خودرو و یا هواشناسی را درسایتم بگذارم وهروز به روز رسانی بشه ولی نمیخوام لینک کنم و از خود سایتم باشه ولی اطلاعات را لود کنه و به اسم خودم در سایت باشه نا لینک….در سایت های زیادی دیدم اینجور هست …میخواستم یه راهنمایی در این زمینه بهم بکنید خیلی درگیر این هستم..من از طراحی سایت با برنامه Web Acappella 4 استفاده میکنم و هم یه کم از زبان HTML , CSS بلدم….ممنون میشم کمکم کنید یا اگه کنابی یا نرم افزاری که بدردم میخوره معرفی کنبد…خدانگدار ممنون از مطالب مهم و مفیدی که برای عموم به اشتراک میزارید

    September 7, 2014 at 12:10 am

  12. 12

    تجهیزات آشپزخانه


    خیلی جالب بود تشکر

    June 4, 2016 at 1:57 pm