بیشتر بدانید

با 8 سوال بدانید که طراحی رابط کاربری چیست و طراح رابط کاربری کیست؟

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

متن سربرگ خود را وارد کنید

هدف طراحی رابط کاربری (User Interface Design) ساده سازی، قابل فهم کردن و ملموس کردن پیچیدگی های یک نظام (سیستم) برای کاربر (User) نهایی است.

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

  1. شما کارتان دقیقا چیست؟
  2. طراح رابط کاربری همان طراح گرافیک است؟
  3. شما فقط نظر می دهید در مورد پروژه ها؟ مثل جابجایی بعضی بخش ها یا تغییر رنگ؟
  4. با چه نرم افزاری کار می کنید؟
  5. نمی شود از نرم افزار خروجیِ کُد گرفت؟
  6. طراحی شما قابل پیاده سازی در سیستم ما هست؟
  7. اصلا چه نیازی به یک طراح است خود برنامه نویس همه چیز را در صفحه می چیند دیگر؟!
  8. محصولی که ما تولید می کنیم یک نرم افزار گرافیکی برای طراحی دارد، نمی شود شما با همان طراحی کنید؟

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

1. شما کارتان دقیقا چیست؟

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

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

حالا طراح رابط کاربری (در اینجا طراح محصول یا طراح صنعتی) را در نظر بگیرید که مثلا برای طراحی نحوه تعامل راننده با جعبه دنده در صدد است به سوالاتی مشابه این ها پاسخ دهد:

  • دسته دنده در کجا باشد تا راننده بتواند دنده را راحت تغییر دهد؟ چه فاصله ای از راننده و بخش های دیگر مانند ترمز دستی و داشبورد داشته باشد؟
  • دسته دنده به چه شکل باشد تا راننده بتواند راحت آن را در دست بگیرد و جابجا کند؟
  • چه جنسی داشته باشد تا هم به اندازه کافی سُر باشد تا بعد از تعویض دنده سریع بتوان دست را از روی آن برداشت و هم آنقدر سر نباشد تا موقع هول دادن دنده به جلو دست از روی آن سر بخورد؟
  • شماره دنده ها را کجا بنویسیم تا به راحتی قابل رویت باشد؟
  • شماره دنده ها را با چه رنگی بنویسیم؟
  • خود دنده به چه رنگی باشد؟

و سوالاتی از این دست…

پس طراح رابط کاربری یعنی طراح ارتباطِ بین کاربر و محصول.

2. تفاوت های طراح رابط کاربری و طراح گرافیک

pexels jan kopriva 3366282 edited با 8 سوال بدانید که طراحی رابط کاربری چیست و طراح رابط کاربری کیست؟

1- طراحی رابط کاربری بر اساس ذهنیات شخصِ طراح انجام نمی شود؛ بهتر است بگوییم طراح نماینده ای از کاربران بالقوه و بالفعل محصول است؛ به این معنا که طراح، رابطی که کاربر قرار است بعدا با آن تعامل کند را با افکار شخصی خود و برای خودش طراحی نمی کند بلکه با ذهن دیگران و برای افراد طراحی می کند _ در مقابل طراح گرافیک بر اساس ملاک های زیبایی شناسانه و صرفا برای زیبایی ظاهر و جذابیتِ صرف، طراحی را انجام می دهد.

2- کاری که طراح UI انجام می دهد ممکن است مدت ها یا سال ها بعد از اتمام پروژه مورد استفاده قرار گیرد و بسته به نیاز محصول، احتمالا در طول سالیان با حفظ چارچوب و کلیت اصلیِ طراحی، دچار بهبود ها و تغییراتی شود. مثل طراحی یک اپلیکیشن موبایل یا سایت _ در مقابل کار گرافیست اکثرا در دوره ای خاص مورد استفاده قرار می گیرد؛ یا بعد از مدتی با یک طرحِ کاملا متفاوتِ دیگر، جایگزین می شود بدون رعایت چارچوب طرح قبلی. مثل پست اینستاگرام یا طراحی بنر.

3- طراح رابط کاربری نمی تواند همه اشیاء را با دست باز در هر جایی و هر طور که خواست پخش کند؛ چون داده ها و اطلاعاتی که از کاربران جمع کرده دست و پای او را بسته است. در واقع اینجا علم، افسار ذهن بلند پرواز یک طراح را می کشد. برای یک طراح، تجربه قبلی کاربران در تعامل با محصول مهم است؛ در یک کلام طراحی رابط کاربری هنر در چهارچوب علم است _ در مقابل ذاتِ طراحی گرافیک، بلند پروازی و طرح های رادیکال است. یعنی یک گرافیست هر چه طرح خاص تری بزند، هر چه با رنگ ها بهتر و جالب تر بازی کند و هر چه که کلیشه های ذهنی بیننده را بشکند در کار خود موفق تر است و کار او خواهان بیشتری خواهد داشت.

بیشتر بدانید
تفاوت بین Opacity ،Flow و Density در فتوشاپ

3. شما فقط نظر می دهید؟ مثل جابجایی بعضی بخش ها یا تغییر رنگ؟

بله این بخش هم شامل طراحی رابط کاربری است اما UI Design به این محدود نمی شود.

4. طراحی رابط کاربری با چه نرم افزاری انجام می شود؟

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

نرم افزار های معروف و اختصاصی این کار Figma ،Sketch و Adobe XD و نمونه های عمومی آن Adobe Photoshop و Affinity Photo است. بنده طراحی هایم را با Adobe XD انجام می دهم که ابزار هایی تخصصی و سریع برای طراحی و تست رابط کاربری دارد. در این میان فوتوشاپ و illustrator نرم افزارهای تکمیلی شرکت آدوبی برای انجام بعضی اعمال است که در XD قابل انجام نیست؛ مثل طراحی آیکن و بنر.

طراحی رابط کاربری
Adobe XD
application
mobile
طراحی رابط کاربری یک اپلیکیشن موبایل که آن را با نرم افزار Adobe XD انجام داده ام.

5. نرم افزار طراحی شما خروجیِ کُد هم می دهد؟

بله! اما ابتدا بهتر است بپرسیم که آیا اصلا این کار لازم است؟!

چیزی که توسعه دهندگان اپلیکیشن لازم دارند معمولا مسائلی از این دست است:

  • کد هِکس یا RGB رنگ ها
  • فاصله هر بخش (مثلا دکمه ها و نوشته ها) از هم
  • نحوه رسیدن به یک صفحه یا هدف از طریق دکمه ها و اتصال ها (لینک ها)
  • جزئیات تغییر ظاهر یک دکمه وقتی موس روی آن می آید و …

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

بنابراین در اکثر موارد نیازی به خروجی کد نیست. البته خروجی Html و Css با استفاده از پلاگین هایی که توسط افراد شخص ثالث برای XD توسعه داده شده قابل انجام است. اما این خروجی از آنجایی که auto generate است می تواند بعضا کاربرد چندان بالایی نداشته باشد.

6. طراحی شما قابل پیاده سازی در سیستم ما هست؟

pexels cottonbro 5474028 edited با 8 سوال بدانید که طراحی رابط کاربری چیست و طراح رابط کاربری کیست؟

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

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

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

7. اصلا چه نیازی به یک طراح است؟

pexels markus spiske 177598 با 8 سوال بدانید که طراحی رابط کاربری چیست و طراح رابط کاربری کیست؟

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

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

بیشتر بدانید
اهمیت تحقیقات تجربه کاربری (UX) در روند طراحی: آنچه می تواند باعث ایجاد یا نابودی طراحی برای کاربران شود

عموما در پروژه ها، فرد یا تیم کد نویسی بعد از اینکه کار برنامه نویسی بخشی به اتمام می رسد تازه سراغ طراحی همان قسمت در بخش فرانت اند (آنچه کاربر می بیند) می‎روند و قبل از آن اصلا به این فکر نمی کنند که کاربر بیچاره اصلا چطور قرار است با این متد یا فانکشن کار کند 🤦‍♂️.

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

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

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

8. محصول ما یک نرم افزار گرافیکی برای طراحی دارد، نمی شود خودتان با همان طراحی کنید؟

pexels rodrigo santos 3888151 با 8 سوال بدانید که طراحی رابط کاربری چیست و طراح رابط کاربری کیست؟

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

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

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

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

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

آیا سوالی دارید؟ به من اطلاع دهید:

InstagramLinkedInBehanceDribbble

5 3 رای ها
امتیازدهی به مقاله
نوشته های اخیر

گوگل بارد (Google Bard) و هذیان هایش

4 قدم برای یادگیری تابع بولی (Boolean Function) در Figma

استراتژی شماره 1 من برای ایجاد یک پورتفولیو (نمونه کار) برجسته

portfolio

3 لذت منکر در طراحی

اشتراک در
اطلاع از
guest
1 دیدگاه
بیشترین رأی
تازه‌ترین قدیمی‌ترین
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
عضویت در خبرنامه ما

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

می خواهید تجارت خود را ارتقاء دهید؟

یکی دو خطی برایمان بنویسید و با ما در تماس باشید

مراقب باشید! از آخرین مقالات، بررسی ها، تخفیف ها و دوره ها جا نمونید! بی خیال حتما

ارتباط بگیریم

بعد از ارسال فرم در کوتاه ترین زمان در خدمت شما خواهم بود

اطلاعات تماس
بهترین زمان برای تماس

فرصت را از دست ندهید!

به روز باشید و از آخرین تخفیفات مطلع شوید.

از بهترین ها بیاموزید.