آموزش دی وی دی |مجله آموزشی مقالات آموزشی, ترفندهای آموزشی

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

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

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

 زینب شاه مرادی – مرکز یادگیری آن رد

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

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

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

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


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

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

در تارنما  Jisc، مشاهده می کنید که صفحات متعددی به روش افقی محور وجود دارند. وقتی  صفحه را مجددا اندازه می گیرید، اجزای همه این صفحات قفل شده  و پایین یکدیگر قرار می گیرند. امکان دارد بخشی از صفحه به روش فرضیه آل در موبایل های هوشمند با عرض ۳۲۰ پیکسل قابل دیدن باشد. با اینحال برنامه ریسپانسیو بایستی محیط پیمایشی عمودی بیشتری بین اجزا داشته باشد .
فرضیه محیط منفی در دیزاین تارنما از ارزش محشری دارا می باشد. شما به این فضا نیاز دارید تا قادر باشید اجزای صفحه را از یکدیگر متمایز کنید. هیچ کاربری دوست ندارد حجم عظیمی از متون را به روش دیواری و مشابه به روزنامه یک جا مطالعه نماید.
این امر در باب تارنما های متقابل  و بلاگ هایی از قبیل Mashable نیز صادق می باشد.
وقتی بر روی دسک تاپ کار می کنید، کل صفحه اصلی سایت  حاوی سه الی چهار ستون از محتوا است. با اینحال مصرف کنندگان ریسپانسیو به ورژن های ساده تر این ستون های پشت سر هم نیاز دارند
همه ستون ها می توانند پایین ستون اصلی قرارگرفته و یا حتی از صفحه ریسپانسیو مخفی شوند. هر تارنما، راه حل های متفاوتی برای خود اتخاذ می کند.
با اینحال وقتی محیط سفید را برای تلفن همراه ها تغییر می دهید باید به توانایی تغیییر عمودی آن بیندیشید. صفحه های افقی بایستی از روش هر یک از اجزا  و در آنِ واحد کنترل شوند. شما باید بر چگونگی میزان محیط لازم بین اجزا و دیگر بخش های صفحه نیز توجه نمایید.

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

تغییر استایل عکس ها سایت
نمونه دیگری از ملاحظات مورد نظر، بهره برداری از عکس ها پراکنده و گسترده می باشد. از آنجایی که بیشتر مانیتورها به روش عریض هستند، تارنما شما بایستی منطبق با این دیزاین مقرر کرده شود تا شامل عکس ها باشد  که عریض هستند نه باریک و طویل.
سایت های تلفن همراه ریسپانسیو باید این عکس ها را به روش پویا و در قسمت انتهایی نمایش دهند تا قادر باشند به روش موثر و کار آمد استایل آن ها را از نو تغییر دهند.
تارنما UPP Broadgate Park  یک راه حل بسیار محشر دارد به این صورت که عکس ها موجود بر هدرهای بالایی می توانند به روش عمودی فیکس شوند. نمایش اسلایدی عکس ها برای تکمیل عرض نمایشگر به کار می رود با اینحال همه نمایشگر های کوچک تر از پانصد پیکسل باید حاوی عکس ها طولی بزرگ باشند.
این دلیل می شود محیط عمودی بسیاری وارد صفحه ای شود که از نظرتان مطلوب بوده است. این  استراتژی کمی ساده نیست. بایستی اندازه های عکس ها و کانون دید هر یک را به خوبی درک کنید تا قادر باشید مجددا اندازه آن ها را تغییر دهید. با اینحال اگر دوست دارید تلاش بیشتری به خرج دهید، مطمئناً منجر به کسب تجارب بیشتر خواهد شد.
امکان دارد در وضعیتی قرار بگیرید که مجبور باشید عکس ها را در قلب یکدیگر پنهان کرده و یا آن ها را بطور کلی از حافظه تلفن های همراه پاک کنید. تارنما  Golden Isles از همین فنون در نمایش اسلاید های بالا استفاده می کند.
دیگر عکس ها موجود در قسمت بالای صفحه در ستون های منفردی سازماندهی شده و محیط سفید بین آن ها اضافه می گردد. با اینحال بدلیل آنکه این ها چندان مرتبط با تجارب کاربری نیستند، امکان دارد از دید مصرف کنندگان تلفن همراه مخفی بمانند.
در نظر داشته باشید که به چه نحو عکس ها را مدیریت کرده  و چه میزان محیط سفید بین آن ها نیاز دارید. هر سناریو و وضعیتی، مقتضیات ویژه خود را داشته و استراتژی های متفاوتی برای حل آن لازم می باشد.
 
نکته آخر:
 محیط سفید یکی از جوانب حیاتی در دیزاین تارنما بوده و نقش بزرگی در جریان های عرضه محتوا  برای تارنما های ریسپانسیو بازی می کند. بیشتر طراحان می توانند میزان محیط سفید لازم را با چشم نیز حدس بزنند.

منبع: دیزاین سایت فرضیه پویا