اصول اولیه طراحی رابط کاربری

اصول اولیه طراحی رابط کاربریدر این مطلب قصد داریم تا به شما تعدادی از اصول اولیه طراحی رابط کاربری را به شما آموزش دهیم.  اگر شما یک فهم ابتدایی از 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 ‌و یا با ترکیبی از موارد گفته شده انجام می‌شود.

۰ پاسخ به "اصول اولیه طراحی رابط کاربری"

    ارسال یک پیغام

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    ارتباط با کافه بلوط

    آدرس : خراسان جنوبی ، بیرجند ، پارک علم وفناوری خراسان جنوبی ، اتاق 101
    آدرس ایمیل: dp.cafebaloot@gamil.com

    logo-samandehi دروازه پرداخت معتبر

    All Right Reserved For Cafe Baloot 2018

    X