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

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

امیر چیتایی

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

شروع سريع با ابزارهای رابط کاربری

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

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

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

طراحی اثر متقابل و انیمیشن‌ها

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

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

برای این‌کار، ما باید هر دو تعامل کلان (در سطح صفحه) و تعاملات میکرو (در سطح اشیاء داخل صفحه) را در نظر بگیریم.

از A به B بروید

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

A → B → C

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

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

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

هنگام طراحی انتقال بین صفحه‌های نمایش، باید تعدادی از فاکتورهای زیر را در نظر بگیرید:

  • چه عواملی باعث می‌شود، کاربر از صفحه‌ای به صفحۀ دیگر انتقال پیدا کند؟

به وسیلۀ کلیک کردن روی دکمه‌ها یا کشیدن صفحات کاربران می‌توانند به صفحات دسترسی داشته‌باشند.

  • از چه روش‌هایی برای انتقال صفحه‌ها استفاده می‌کنیم؟

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

  • چه قدر این جابه‌جایی طول خواهد کشید؟

می‌خواهید گذر از این صفحات به سرعت انجام شود و یا می‌خواهید آهسته این اتفاق بیافتد.

 

همانطور که ما این جابه‌جایی را به صورت A → B → C می‌بینیم. انتخاب‌هایی را که انجام می‌دهیم مانند: راه‌اندازی، انتقال و زمان‌بندی بر طراحی ما بسیار تاثیر خواهد گذاشت. پس بسیار مهم است که به تمام این نکات دقت کنید. به شما توصیه می‌کنم که این فرآیند را مثل یک سفر برای کاربرانتان ببینید، اگر سفر در سایت طراحی شدۀ شما برای آن‌ها لذت‌بخش باشد به راحتی در آن جا به جا خواهند شد.

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

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

به کار بردن انیمیشن در طراحی بسیار لذت بخش است اما نه به قیمت اینکه کاربری سایت شما زیر سوال برود. سوفی پاکتون در مقاله‌ای مهم به این نکته اشاره داشته که کاربری UI و استفاده از انیمیشن نباید سایت شما را تبدیل به یک فیلم دیزنی کند. او در این مقاله از نقش مخرب استفادۀ بیش از حد انیمیشن و تصاویر متحرک در از بین رفتن اشتیاق مخاطبان اشاره کرده‌است.

اثر متقابل با اجزاء

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

ارائه بازخورد بصری در طراحی رابط کاربری UI بسیار مهم است. این امر ذهن کاربران را در حالت استراحت قرار می دهد و نشان می دهد که هرچیز که نیاز دارند در اختیارشان است.

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

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

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

تمام مواردی که در بالا اشاره کردیم فقط مثل نوک یک کوه یخی است. پس به طور کلی باید بدانید که هر جا از کاربر خواسته شود با عناصر در یک صفحه ارتباط برقرار کند فرصتی طلایی برای استفاده از انیمیشن برای ارائه بازخورد مفید از طرف آن‌ها به وجود آمده‌است. البته همانطور که در متن اشاره شد دقت کنید که سایت خود را مثل فیلم‌های دیرنی درست نکنید و به صورت بهینه از انیمیشن‌ها استفاده کنید. لازم به ذکر است که به شما بگویم انیمیشن ممکن است برای همه جذاب نباشد. مثلاٌ؛برای کاربرانی که دارای اختلالات ویستیبولار هستند حرکت می تواند سرگیجه یا تهوع ایجاد کند، بنابراین مهم است که شما در استفاده از انیمیشن‌ها دقت کنید و حالتی را برای کسانی که انیمیشن‌ها را به هر دلیلی دوست ندارند ایجاد کنید. یکی از سایت‌هایی که به شما اجازه می‌دهد به انتخاب خودتان انیمیشن‌ها نمایش داده شوند CodePen World’s Fair است. در این سایت به شما هشدار داده می‌شود که اگر به هر دلیلی مایل به دیدن انیمیشن‌ها نیستید، می‌توانید گزینۀ بدون انیمیشن را در سایت انتخاب کنید. این اقدام نشان‌دهندۀ این است که یک تیم طراحی سایت حرفه‌ای، دسترسی‌ها با دقت و ظرافت تمام تنظیم کردند.

جمع‌بندی نهایی

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

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

 

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

 

 

 

برچسب ها : , , , ,

پاسخ دهید

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

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

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

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


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