1396/07/01

چطور فضای سفید در سایت هایی با طراحی ریسپانسیو را مدیریت کنیم؟

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

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

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

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

 

سازماندهی مجدد پیمایش ها در منوی سایت

 

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

 

منوها در طراحی سایت

 

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

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

 

فضای سفید در طراحی سایت

 

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

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

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

 

طراحی سایت ریسپانسیو

 

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

 

تغییر منوها از حالت افقی به عمودی در طراحی سایت

 

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

 

طراحی منو در سایت

 

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

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

این امر در مورد وب سایت های متقابل  و بلاگ هایی همچون Mashable نیز صادق می باشد.

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

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

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

 

اندازه فونت ها و فاصله گذاری در طراحی سایت

 

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

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

 

طراحی منوی سایت

 

صفحه اول وب سایت Next Web، فضای سفید بسیاری ما بین هدر و پیمایش های بالا دارد اما طرح ریسپانسیو موبایل از این فضای سفید ناکافی به حد کافی رنج می برد.

وقتی نوبت به تایپوگرافی موبایل برسد، باید به خودتان اعتماد داشته باشید. بهتر است سعی کنید بهترین رویکردها را برای خود اتخاذ نمایید.

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

 

طراحی سایت ریسپانسیو

 

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

فضای سفید بین صفحات افزایش یافته  و منجر به توضیح دقیق متون خواهد شد. این افکت مشابه را می توان در صفحه نخست وب سایت  Cartoon Network مشاهده کرد که با استفاده از پیمایش های آیکونی به وضوح نمایان هستند.

 

مدیریت فضای سفید سایت

 

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

 

تغییر استایل تصاویر سایت

 

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

سایت های موبایل ریسپانسیو باید این تصاویر را به صورت پویا و در قسمت انتهایی نمایش دهند تا بتوانند به صورت موثر و کار آمد استایل آن ها را مجددا تغییر دهند.

 

طراحی سایت بهینه

 

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

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

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

 

تصاویر در طراحی سایت

 

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

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

 

نکته آخر:

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

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

 

 

 

 

نظرات کاربران

اولین کسی باشید که در اینباره نظر میدهید.

ثبت نظر

کلمات کلیدی
طراحی سایت خوب طراحی سایت ریسپانسیو
  • طراح سایت کورسیر
  • طراحی سایت گروه صنعتی گلبافت
  • طراحی سایت بانک مهر
  • طراحی سایت  مبلمان اداری و منزل ایستا
  • طراحی سایت هولستن
  • سی دلی مالتی مدیا طرفه نگار
  • طراحی سایت مبلمان اداری جلیس
  • طراحی وب سایت مایکروتل پلاس
  • طراحی وب سایت هواپیمایی کاسپین
  • طراحی وب سایت هواپیمایی ماهان
  • طراحی وب سایت مکسیدر
  • طراحی وب سایت فرما
  • طراحی وب سایت ماشین3
  • طراحی وب سایت پیشگامان کویر آسیا
  • طراحی وب سایت هوندا
  • طراحی وب سایت پارسیان دیزل
  • طراحی وب سایت نان سحر
  • طراحی وب سایت بوژنه
  • طراحی وب سایت باشگاه فولاد خوزستان
  • طراحی وب سایت باشگاه مشتریان برج میلاد
  • طراحی سایت سازمان بورس و اوراق بهادار
  • طراحی سایت خانه عکاسان افرنگ
  • طراحی وب سایت نوشابه پرسپولیس
  • سی دی سازمان بهینه سازی مصرف سوخت
certificates
  • seo
  • multimedia
  • design
  • host and domain
  • programming
books

عضویت در خبرنامه

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

پروژه ها ی برگزیده طراحی سایت

نمونه کار مرتبط

زمینه : طراحی و ساخت آمبولانس

تاریخ : سال 1395

اخبار و مقالات

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