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

اینویژن استودیو (Invision studio) و کاربردهای آن

15/01/1399 مینا میرزایی نرم‌افزار 50

اینویژن استودیو (Invision studio)، قدرتمندترین ابزار طراحی صفحه نمایش در جهان

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

اینویژن استودیو
اینویژن استودیو

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

اینویژن استودیو (InVision Studio)

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

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

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

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

  • یک موتور طرحبندی سازگار برای فراهم کردن امکان طراحی واکنشگرا با کمترین زحمت
  • نمونه سازی ( Prototyping) سریع و انیمیشن سازی پیشرفته برای طراحی پویا
  • سیستم اشتراک گذاری طرح برای کمک به تیم شما برای حفظ ثبات، ارتباط و به روز بودن
  • همکاری یک پارچه با فضای کار مبتنی بر cloud برای بازخورد بدون اختلاف
  • یک بستر باز برای دریافت افزونه های طراحی شده توسط کاربران و ابزار از طریق app store ما

منبع: www.invisionapp.com

خواندن بیشتر
10فروردین

فیگما چیست؟ Figma و قدرت طراحی آن

10/01/1399 مینا میرزایی نرم‌افزار 74

فیگما یک ابزار طراحی بر اساس فضای ابری (Cloud) است که در عملکرد و ویژگی ها مشابه اسکچ است، اما با تفاوت هایی که فیگما را برای همکاری تیمی بهتر می کند. برای کسانی که به این ادعا شک دارند، ما توضیح خواهیم داد که چگونه فیگما فرایند طراحی را ساده تر می­کند و از برنامه های دیگر در کمک به طراحان و تیم ها برای همکاری کارآمد موثر تر است.

بیاید یک نگاه دقیق تر داشته باشیم.

طراحی با فیگما

اجرای فیگما روی هر سیستم عاملی

فیگما روی هر سیستم عاملی که بتواند یک مرورگر وب را اجرا کند، قابل استفاده است.  Mac، Windows ، Linux و حتی Chromebookها می توانند از فیگما استفاده کنند. این تنها ابزار طراحی در نوع خودش هست که همچین قابلیتی را دارد و در مکان هایی که از سخت افزارهایی با سیستم عامل های مختلف استفاده می کنند همگی می توانند فایل های فیگما را به اشتراک بگذارند، باز کنند و ویرایش کنند.

در بسیاری از سازمان ها، طراحان از Mac و برنامه نویسان از Windows استفاده می کنند. فیگما برای گردآوری این دو گروه کنار هم کمک می کند. ماهیت ماهیت فراگیری فیگما همچنین از آزار دهندگی PNG-pong (زمانی که تصاویر آپدیت شده مداوم بین تیم طراحی جابه جا می شود)جلوگیری میکند.

در فیگما برای در دسترس قرار دادن کار طراحی نیازی به مکانیزم واسطه ای نیست.

همکاری در فیگما ساده و آشناست

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

همکاری هم زمان روی ی فایل به کاهش “Design Drift” (کاهش پیشروی بدون برنامه ی طراحی) – که به معنی برداشت اشتباه یا منحرف شدن از یک طراحی توافق شده است- معمولا زمانی رخ می دهد که یک ایده به ذهن خطور می کند و سریعا اجرا می شود در حالی که یک پروژه در حال انجام است. متاسفانه، این مسئله اغلب به انحراف از طرح شروع شده و کار مجدد منجر می شود.

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

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

ارتباط بین تیمی با اسلک (Slack) در فیگما

فیگما از  اسلک به عنوان کانال ارتباطی خود استفاه می کند. هنگامی که یک کانال فیگما در Slack ساخته می شود هر نظری یا ویرایش طرحی که در فیگما بوجود آید اصطلاحا برای تیم “Slacked” می شود.

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

اشتراک گذاری آسان در فیگما

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

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

امکان آپدیت سریع

فیگما همچنین کد های کوچک جاگذاری را برای چسباندن یک iframe به ابزار های شخص ثالث به طور زنده به اشتراک می گذارد. برای مثال اگر از confluence برای نمایش فایل های mockup جاگذاری شده استفاده شود، آن فایل ها با ذخیره کردن فایل فیگما به روز رسانی نمی شوند؛ آن فایل های جاگذاری شده خود فایل فیگما هستند.

اگر تغییری در mockup توسط هرشخصی در فیگما ایجاد شود، آن تغییر به صورت زنده در mockup Confluence. جاگذاری شده و دیده می شود.

تاثیر این ویژگی در فرآیند تجربه کاربری در نمودار زیر نشان داده شده است:

قبل از فیگما :

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

بعداز فیگما :

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

دریافت فوق‌العاده فیدبک در فیگما

فیگما در هردوحالت طراحی و پروتوتایپ از اظهار نظر و کامنت گذاشتن پشتیبانی می کند و موضوع مورد نظر در Slack ویا در ایمیل ردیابی و بررسی می شود. برای دریافت بازخورد از تیم با استفاده از ابزار شخص ثالث مانند InVision یا  Marvel نیازی به انتشار پرونده های PNG یا انجام به روز رسانی مداوم نیست.

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

Handoff یا تحویل آسان کار در فیگما

فیگما قطعه های کد را در هر قالب یا موضوع انتخاب شده در فرمت های CSS ، iOS  یا Android برای برنامه نویسان نمایش می دهد تا هنگام بررسی یک فایل طراحی از آن ها استفاده کنند. مولفه های طراحی توسط هر توسعه دهنده در هر فایلی که می توانند مشاهده کنند، قابل بازرسی است. برای بدست آوردن اطلاعات نیازی به استفاده از ابزار شخص ثالث نیست. با این وجود، اگر تیم ها چیزی  بیش از اندازه گیری ساده و نمایش css بخواهند انجام دهند، فیگما با Zeplin هماهنگی کامل دارد.

آنلاین بودن فایل‌ها و پروژه‌های فیگما

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

  • پروژه ای را برای ویژگی زمینه ایجاد کنید.
  • یک فایل را برای یک ویژگی بزرگ بسازید.
  • صفحات را در آن فایل برای هر داستان و روند کاربر بسازید.

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

API‌های فیگما

امروزه فیگما دارای  API های توسعه دهنده است تا ادغام درست را با هر برنامه مبتنی بر مرورگر را فراهم کند. شرکت ها از این قابلیت استفاده می کنند تا فایل های طراحی را در برنامه هایشان در نمایش همزمان یکی کنند. به طور مثال، Uber دارای صفحه نمایش های بزرگی است که فایل های طراحی را “live on air” در اطراف شرکت خود نمایش می دهند. طرح ها به اشتراک گذاشته می شوند و از بازخورد هر کسی در این شرکت استقبال می شود.

نرم افزار Atlassian’s JIRA دارای افزونه ی Figma است. بنابراین صاحبان محصول ، توسعه دهندگان و مهندسین کیفیت همیشه در حال مشاهده ی آخرین نسخه از هر گونه mockup از طراحان هستند.

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

ورژن بندی در فیگما

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

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

پروتوتایپ در فیگما

درحالی که اسکچ اخیرا قابلیت پروتوتایپ ساختن را از یک آرت بورد به آرت بورد دیگر را اضافه کرده است، فیگما با ارائه ی transition بین فریم ها، فراتر رفته است. ویژگی پروتوتایپ ساختن ساده فیگما ، نیاز به ابزار دیگری که پروتوتایپ ساختن به شکل اسلایدها مانند InVision یا Marvel را انجام می دهد را از بین می برد. وقتی همه آنچه مورد نیاز است یک ارائه ی ساده با transition است، نیازی به ارسال فایل برای تجدید نظر با ابزارهای دیگر نیست.

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

لایبریری‌های آماده فیگما

سیستم های طراحی برای بسیاری از شرکت ها به یک ضرورت تبدیل شده اند و نیاز به مولفه هایی(نمادها در اسکچ و illustrator) با قابلیت استفاده ی مجدد، مقیاس پذیر و برای استفاده در کتابخانه ی الگوی (pattern) موجود در دسترس طراحان UX و توسعه دهندگان فرانت اند وجود دارد.

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

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

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

کار تیمی با فیگما

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

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

کارشناسان طراحی که از بعد از استفاده از اسکچ به فیگما سوییچ کردند (فایل های اسکچ عینا به فیگما می توانند منتقل شوند) مایوس نیستند:

این ، روشی را که در آن میتوانید با همکاران و مشتریان خود همکاری کنید را کاملا تغییر می دهد.

فیگما بهترین ابزارهای طراحی جهان ui را درچند سال گذشته متحد کرده است.

در سال های گذشته من از فیگما برای فرایند طراحی UI/UX خود استفاده کرده ام و این امر باعث استفاده ی بهتر از ساعت کاری و ذخیره ی آن شده است. این واقعا روند کار طراحی مرا تغییر داده است.

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

منبع: toptal.com

خواندن بیشتر