اصول اولیه طراحی رابط کاربری را در ۵ دقیقه یاد بگیرید

اگر شما یک فهم ابتدایی از HTML و CSS دارید و می‌خواهید یک رابط کاربری زیبا برای صفحات خود طراحی کنید می‌توانید با خواندن این مقاله و یادگیری این ۷ اصل مهارت طراحی خود را تقویت کنید.

WHITE SPACE یا فضای خالی
ALIGNMENT یا هم‌ترازی
CONTRAST یا تضاد
SCALE یا مقیاس
TYPOGRAPHY یا اصول نوشتاری
COLOR یا رنگ‌‌ها
VISUAL HIERACHY یا سلسله‌مراتب بصری

WHITE SPACE

اولین چیزی که می‌خواهیم به یادگیری آن بپردازیم WHITE SAPCE است که آن‌را به اسم فضای‌منفی هم می‌شناسیم.همان‌طور که از اسم آن مشخص است به فضایی که بین عناصر در صفحه وب وجود دارد می‌گویند. عناصری که در صفحات وب بدون فضای سفید قرار می‌گیرند نه تنها از جذابیت صفحات کم می‌کنند بلکه خواندن وجا‌به‌جا شدن بین عناصر را مشکل می‌کند. ما می‌توانیم این مقدار را از راه‌های مختلفی تنظیم کنیم که شامل: padding ,margin ,line-height می‌شود.در عکس زیر می‌توانید تاثیر مثبت این فضا را مشاهده کنید.

ALIGNMENT

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

CONTRAST

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

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

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

SCALE

مقیاس هم یکی از موارد ضروری در طراحی رابط کاربری می‌باشد بنابراین اندازه عناصر در صفحات را باید با دقت انتخاب کنید. به‌عنوان مثال عناصر باید نسبت به اندازه صفحه بزرگ باشند(نه خیلی بزرگ). همچنین عناصری که از اهمیت بالایی برخوردار هستند مثل عنوان‌ها باید نسبت به بقیه عناصری که ارزش کمتری دارند بزرگ‌تر باشند. به عکس‌های زیر نگاه کنید و ببینید انتخاب مقیاس و اندازه درست چه قدر تاثیر‌گذار می‌باشد.

Typography

اصول نوشتاری هم یکی از موارد کلیدی در طراحی رابط کاربری به حساب می‌آید. ما این اصول را از راه‌های مختلفی می‌توانیم تنظیم کنیم مثل: font ,font size ,alignment ,letter spacing ,line-height ,font style ,color ,contrast.

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

اگر شما به این نکات توجه کنید شما صحفه‌ای زیبا مانند نمونه زیر دارید.

و در غیر این صورت صفحه‌ای گیج‌کننده و ناخوانا مانند زیر دارید :

Color

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

Visual hierarchy

اخرین موردی که در طراحی رابط کاربری مورد بررسی قرار می‌دهیم سلسله‌مراتب بصری است. بعضی از عناصر در طراحی یک صفحه از بقیه عناصر موجود در صفحه مهم‌تر هستند واین سیستم طبقه‌بندی به ما اجازه می‌دهد که موارد را به خوبی از هم تفکیک کنیم. این طبقه‌بندی به وسیله position – contrast – scale – style ‌و یا با ترکیبی از موارد گفته شده انجام می‌شود.

به‌عنوان مثال در عکس دوم نسبت به عکس اول این طبقه‌بندی عناصر به خوبی رعایت شده است.

نتیجه‌گیری:

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

منبع