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

وایرفریمینگ و اصول آن در طراحی رابط کاربری

وایرفریمینگ چیست؟

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

نمونه وایرفریمینگ

چرا از وایفریمینگ استفاده کنیم؟

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

  • محتوا:به ما نشان می دهند که محتوا در اپلیکیشن یا وبسایت به چه صورتی نشان داده می شوند.
  • ساختار:چگونگی و محل قرار گرفتن عناصر مختلف در کنار یکدیگر را به ما نشان می دهند.
  • سلسله مراتب اطلاعات: چگونه اطلاعات با هم سازمان یافته و نمایش داده می شوند.
  • عملکرد: رابط کاربری آن چگونه است؟
  • رفتار: کاربران چگونه با رابط کابری این محصول ارتباط برقرار می کنند؟در پیرو آن نحوه عملکرد آن ها چگونه است؟

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

چه کسانی از وایرفریمینگ استفاده می کنند؟

طراحان تعامل، طراحان UX، معماران اطلاعات، تصویرگران، طراحان گرافیک، توسعه دهندگان، تحلیلگران مشاغل، سهامداران، کارشناسان و مدیران کاربرپذیری پروژه(Usability ExpertsProject managers)، مدیران اجرایی، شرکا، مشتریان و سایر افراد که به نحوی با پروژه در ارتباط هستند.

وایرفریم های یو ای

مبانی و اصول طراحی وایرفریمینگ در رابط کاربری

  • با کاربران شروع کنید و بدانید که آنها به چه چیزهایی نیاز دارند:

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

  • کمی برنامه ریزی کنید و به ادامه کارها بپردازید:

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

  • محدود و ددلاین سازی کنید تنها بدست آوردن اهداف کافی نیست:

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

وایرفریمینگ و  اصول آن در طراحی رابط کاربری
  • همه چیز معنی دارد:

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

  • الگویی ثابت و در عین حال متغییر داشته باشید:

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

  • لی اوت به معنای غیر واقعی بودن نیست:

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

آموزش ui
  • آزمایش و همکاری:

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

  • طرح های ما ساخته می شوند:

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

وایرفریمینگ و  اصول آن در طراحی رابط کاربری

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

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

منبع: Medium

نوشته های مشابه

دیدگاهتان را بنویسید

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

دکمه بازگشت به بالا
بستن
بستن