نقش طرح بندی fluid در طراحی وب سایت های مدرن 

ترجمه و تالیف : خاطره محمدی
تاریخ انتشار : 13 خرداد 98
خواندن در 5 دقیقه
دسته بندی ها : طراحی وب

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

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

ایجاد طراحی واکنشگرا از طراحی fluid

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

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

نقش طرح بندی fluid در طراحی وب سایت های مدرن 

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

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

عملکرد طراحی fluid در درصد

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

به عنوان مثال: می توان وضوح صفحه نمایش را افزایش داد یا فضای سفید یا منفی بین بخش‌های محتوا را  بر این اساس گسترش داد. ارائه این خدمات در حال مشاهده داده‌ها، بدون نیاز به کد نسخه های متعدد از همان صفحه در بیشتر دستگاه‌های متنوع سازگار است.

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

تحریف نیازی به یک موضوع ندارد

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

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

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

طراحی fluid می تواند بهتر از ux ارائه دهد

تجربه کاربری (UX) به ساخت فعل و انفعالات به یاد ماندنی منجر به کارهای بالقوه حیاتی است. توانایی ارائه این بر روی انواع دستگاه های اینترنتی دارای قابلیت‌های فوق العاده‌ای است، اما طراحی طرح بندی تطبیقی ​​برای قطعنامه‌های صفحه نمایش‌های متعدد می‌تواند دست و پا گیر باشد.

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

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

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

گوگل اولویت بندی سایت های موبایل

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

طراحی fluid می تواند سرعت بارگذاری صفحه را افزایش دهد

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

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

طراحی fluid افزایش زیبایی شناسی و کارکرد

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

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

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

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

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

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید