آموزش طراحی رابط کاربری UI

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

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

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

لایه طراحی رابط کاربری 1: کنترلگرها

قبل از فرو رفتن در لایه Controls، بیایید صفحه بالا را با مشاهده آن به صورت Wireframe ساده کنیم.

حال بیایید به برخی از کنترلگرهای UI که برای ساخت این صفحه استفاده شده اند نگاه کنیم:

کنترلگر‌های رابط کاربری (همچنین به عنوان عناصر، مؤلفه‌ها و «ویجت‌ها» نیز شناخته می‌شوند) قطعات جداگانه‌ای از یک رابط کاربری هستند که یک عملکرد واحد را انجام می‌دهند و شامل نمونه ها پیوندها، دکمه ها و نمادها هستند. حتی متن ساده را می توان یک کنترلگر در نظر گرفت، زیرا وظیفه آن توصیف یا برچسب گذاری چیزی در رابط کاربری است. هر یک از این کنترلگرها به دلیل خاصی انتخاب شدند. طراحی UI به فرآیند و منطق انتخاب کنترلگرها مربوط می شود.

لایه 2 طراحی رابط کاربری: الگوها

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

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

در نظر گرفتن این لایه از طراحی UI حتی قبل از رفتن به سطح کنترلگرها می تواند مفید باشد، زیرا هر الگو می تواند به روش های مختلف و با استفاده از کنترلگر های مختلف به اهداف خود برسد.

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

رایج ترین تعریف طراحی UI لایه طراحی بصری است. اما حتی این مسئله هدفمندتر از آن چیزی است که بیشتر مردم درک می کنند. طراحی بصری صرفاً «زیبا جلوه دادن آن» نیست. راه بهتری برای اندیشیدن به آن، استفاده از اصول طراحی بصری تثبیت شده است، که بسیاری از آنها ریشه در درک علمی روانشناختی، عصبی، یا فیزیولوژیکی دارند.

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

لایه 4 طراحی رابط کاربری: الگوها

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

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

یکی دیگر از الگوهای رابط کاربری، قالب دسته است که در اینجا نشان داده شده است:

قیاس mise en place

در آشپزی اصطلاحی به نام mise en place وجود دارد که به تمرین قرار دادن "همه چیز در جای خود" اشاره دارد تا زمانی که زمان آشپزی فرا می رسد، بتوانید به طور خودکار آنچه را که نیاز دارید در مکانی که انتظار می رود پیدا کنید.

همین امر در مورد کنترل‌ها و الگوهایی که استفاده می‌کنید پس از آشنایی با آن‌ها صادق خواهد بود. در Balsamiq، مواد تشکیل دهنده (کنترلگر ها) را در کتابخانه UI خود خواهید یافت. ممکن است دستور العمل ها (الگوهای طراحی) را در Wireframes to Go بیابید، یا الگوهایی را برای اکوسیستم خود بسازید.

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