قالب وردپرس با سئو بالا راهکار جدید برای وب سایت های دانلودی دریافت و مشاهده

راهنمای کامل رابط کاربری UI (بخش اول)

امیر چیتایی

UX, IA, UI، شاید به عنوان یک طراح سایت شنیدن این کلمات اختصاری گیج کننده‌باشد. ولی نگران نباشید، در این مقاله می‌خواهیم هر چیزی که شما باید در مورد این واژه‌ها بدانید را با شما در میان بگذاریم. در واقع ما به عنوان طراح سایت حرفه‌ای باید از این تخصص‌ها باخبر باشیم تا خودمان را به عنوان یک طراح موفق مطرح کنیم. البته لازم می‌دانم که این مسئله را همین الان با شما درمیان بگذارم که هیچ لزومی ندارد که تمامی این تخصص‌ها را در کنار هم داشته‌باشید. ممکن است شما در زمینۀ UI حرفه‌ای باشید ولی چندان از UX سر در نیاورید، بنابراین می‌توانید از کسانی که در زمینۀ UX تخصص داردند کمک بگیرید. اما این کلمات اختصاری چه معنی می‌دهند؟

اجازه بدهید سریع به سراغ اصل مطلب برویم.

  • UX مخفف کلمات user experience به معنی طراحی بر اساس تجربۀ کاربر
  • IA مخفف کلمات information architecture به معنی سازماندهی اطلاعات منطقی بر ‌اساس اطلاعات معماری
  • UI مخفف کلمات user interface به معنی رابط کاربری در طراحی سایت

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

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

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

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

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

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

شروع با موجودی رابط کاربری (UI)

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

حالا می‌خواهیم به این موضوع بپردازیم که موجودی رابط کاربری دقیقاٌ به چه معنی‌است؟ این اصطلاح به وسیلۀ Brad Frost طراحی شده‌است و در واقع به معنی، ایده ای که پایه های موجودی محتوا را تشکیل می دهد و نقشه آن را به جهان طراحی ارائه می‌دهد، رابط کاربری (UI) می‌گویند.

خود فراست در مورد رابط کاربری اینطور می‌گوید:

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

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

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

اجزای مختلف رابط کاربری (UI)

تایپوگرافی شامل:

  • عنوان‌ها و زیرشاخه‌ها
  • عناصر متن (آماده‌سازی و چارچوب متن، پاراگراف‌ها)
  • لیست ها و فهرست‌ها

تصاویر و رسانه ها شامل:

  • لوگوها
  • طراحی یا به‌کارگیری آیکون‌ها
  • تصاویر

فرم‌ها شامل:

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

نحوۀ ساخت کتابخانۀ الگو

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

و ممکن است در قالب:

  • انتخابگرهای تقویم
  • Breadcrumb ها (مسیرها)
  • Carousels ها (چند محتوا در یک فضا)

در واقع، کتابخانه الگو، یک رابط را به عناصر کوچکتر تقسیم می کند و سپس می‌تواند بعنوان بلوک‌های قابل استفاده مجدداٌ استفاده کند. استفاده از کتابخانۀ الگو می‌تواند چند قدم ما را جلو بیاندازد. مزایای این رویکرد عبارت‌اند است:

سازگاری با طرح‌های شما

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

امکان به اشتراک‌گذاری واژگان تصویری با اعضای تیم کاری

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

زمان‌بندی درست و بهینه‌سازی طرح‌ها

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

طراحی بر اساس مدل اتمی

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

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

روش‌شناسی فراست،  پنج سطح مجزا را در طراحی اتمی تشکیل می‌دهد که شامل: اتم ها، مولکول ها، ارگانیسم ها، قالب ها و صفحات می‌شوند. . با ساختن اتم، سازه های ساختمانی پایه ای از طراحی را ایجاد می کنیم که به ما امکان می دهد هر چیزی را بسازیم.
متدولوژی طراحی اتمی برد فارست، یک پایه محکم برای ساخت یک سیستم طراحی است. این سیستم با تمرکز بر کوچکترین بلوک های ساختمان و اضافه کردن اجزای دیگر یک طرح پیچیده را ایجاد می‌کند.
اساساٌ ساختار طراحی اتمی به شکل زیر است:
-با اتم‌ها می‌توان مولکول‌ها را تشکیل داد

-این مولکول ها برای تشکیل ارگانیسم ها با هم ترکیب می شوند

-سپس این ارگانیسم‌ها به عنوان پایه ای برای ایجاد  قالب ها و صفحات استفاده می شود

اگر بخواهم به طور خلاصه این قسمت را به شما توضیح دهم باید بگویم که:

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

برچسب ها : , , ,

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

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

آموزش طراحی سایت

آموزش کامل طراحی سایت

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


براتون منتشر کنم