علی بجستانی
علی بجستانی
خواندن ۶ دقیقه·۲ سال پیش

۱۱ نکته برای تمیز نگه داشتن فیگما



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

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

1. فیگما variants

Figma variants
Figma variants


قابلیتی که نشان می‌دهد چگونه دکمه‌ها بر اساس متغیری مانند داشتن یا نداشتن ایکن و نماد، تغییر می‌کنند.

بیایید با یک مورد ساده شروع کنیم. این قابلیت به شما امکان می دهد انواع مختلفی از یک نماد ایجاد کنید که بعداً می توانید از آنها استفاده کنید. به عنوان مثال یک دکمه. ممکن است حالت های مختلفی از یک دکمه داشته باشیم. (اولیه، ثانویه با نماد یا بدون نماد.)

با ورینت می توان همه این حالت‌ها در أنواع مختلف را در فایل پروژه خود قرار داد. به یاد داشته باشید که هر بار که یک نوع جدید را می بینید این کار را انجام دهید و همچنین به یاد داشته باشید که auto-layout را اضافه کنید. این کار، باعث افزایش سرعت طراحی شما می شود.

2. فیگما Thumbnails / Cover Photos

Thumbnails / Cover Photos
Thumbnails / Cover Photos

انیمیشنی که نشان می دهد چگونه یکی از پلاگین های Figma به شما امکان می دهد در عرض چند ثانیه یک تصویر کوچک برای فیگما ایجاد کنید.

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

پلاگین هایی که ممکن است به شما کمک کند:

Better File Thumbnails

Cover Status

3. Auto-layout

Auto-layout
Auto-layout


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

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

4. Process description and screen flow (شرح فرآیند و جریان صفحه)

Process description and screen flow
Process description and screen flow


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

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

5. نامگذاری مناسب برای صفحه یا artboards

Proper naming for the artboards
Proper naming for the artboards


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

[Screen_Title] - [User Role] - [State of a screen]

مثال:

"Insights-Admin-Edit"

اما نباید همه چیز خلاقانه باشد. ما سعی می کنیم اینجا کار کنیم، تنبل نباشید!

6. صفحات خود را نام ببرید!

Name your pages!
Name your pages!


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

مثال:

? طرح‌های نهایی

▶️ نمونه اولیه

?️ مودبرد

?️ موکاپ‌های تجربه کاربری

? جعبه یخ (آرشیو)

7. مشخصات تجربه کاربری برای توسعه دهندگان

UX Specification for developers
UX Specification for developers


مشخصات و اسناد چیزی است که تقریباً هیچ کس در دنیای یک طراح آن را دوست ندارد، اما چیزی است که ممکن است واقعاً مسیر یک پروژه را تغییر دهد.

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

من پروژه‌هایی را بدون مستندات یا مستندات چند کیلومتری دیده‌ام که هیچ‌کس نمی‌خواست آنها را بخواند. بهترین رویکرد من نوشتن نظرات توصیفی درست روی آرتبورد، در فیگما بود.

8. پیوند بین پروژه ها و صفحات

Link between projects and pages
Link between projects and pages


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

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

9. یادداشت در مورد تیم

Notes on team
Notes on team


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

  • لینک های مهم
  • نقش های مهم در تیم
  • اطلاعات اضافی که ممکن است به افراد دیگر کمک کند مانند منطقه زمانی یا زبانی که برای برقراری ارتباط در پروژه استفاده می‌کنیم.

10. پروژه های خود را تقسیم کنید.

Divide your projects
Divide your projects


ما معمولاً با سرعت یکسانی با توسعه دهندگان کار می کنیم - مانند دوی سرعت یا مراحل. داشتن یک "پروژه اصلی" و سپس تقسیم بقیه پروژه ها به دوی سرعت می تواند به شما کمک کند تا مطمئن شوید که تاریخچه کار خود را به وضوح می بینیم.

11. یک زمین بازی ایجاد کنید.

Create a pitch deck
Create a pitch deck


ما به عنوان طراحان تجربه کاربری تمایل داریم روی کاربران نهایی تمرکز کنیم، اما باید به خاطر داشته باشیم که چه کسی اولین بار طرح های ما را می بیند. معمولاً این شخصی از یک واحد تجاری است. من متوجه شدم که بهترین راه برای سرعت بخشیدن به ارتباطات، ایجاد یک پلتفرم است که شما یا همکارانتان به ذینفعان ارائه دهید. می‌توانید از فیگما یا یک ابزار معمولی مانند Keynote یا PowerPoint استفاده کنید، اما برای من، بهترین ترکیب استفاده از فیگما با Pitchdeck presentation studio است - افزونه‌ای که به شما کمک می‌کند در صورت نیاز، آرتبوردها را به فرمت ارائهKeynote یاPowerPoint تبدیل کنید.

پلاگین‌هایی که ممکن است به شما کمک کند:

از Pitchdeck presentation studio برای اسلایدهای ارائه استفاده کنید.

از Animated Presentation by Rachel How به عنوان یک الگوی ارائه استفاده کنید.

در پایان، فقط باید جمله معروف آلبر انیشتین را بیان کنم:

"نابغه یعنی ساده ساختن ایده های پیچیده، نه پیچیده ساختن ایده های ساده."

امیدوارم همه ما، به لطف آن قوانین یا قوانین خودتان، پروژه‌های فیگما و ایده‌های شگفت‌انگیز خود را کمی ساده‌تر برای درک کاربران نهایی بلکه برای همکارانتان نگه داریم :)


✌️ uxdesign.cc : منبع

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