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