15مهر

اسکچ، وایرفریم، ماک‌آپ و پروتوتایپ؛ چرا؟ چه زمانی؟ و چگونه؟

15/07/1399 مینا میرزایی 35

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

در این مقاله به مرور و بررسی این ۴ مورد میپردازیم:

۱- اسکچ یا Sketch چیست؟

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

چه زمانی

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

مردم یادگیرنده بصری هستند و تصاویر میتوانند ایده را بهتر از کلمات توضیح دهند.

چگونه؟

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

چیزهایی که باید زمان طراحی sketch به یاد داشته باشید.

سعی نکنید که یک sketch بسیار تمیز و مرتب بکشید. فقط باید به شما کمک کند تا ایده اصلی را به اشتراک بگذارید.
از الگوها برای کشیدن سریعتر استفاده کنید.
روش Crazy Eights را تمرین کنید. Crazy Eights یک تکنیک جسورانه از گوگل است که به تیم محصول اجازه می دهد تا ایده های زیادی را در زمان کوتاهی به تصویر بکشند. در این روش لازم است هریک از اعضای گروه در مدت زمان 5 دقیقه 8 طرح را بکشند.
از sketch خود عکس بگیرید. سه دلیل برای این کار وجود دارد.اول اینکه تصاویر می توانند به عنوان مستندات پروژه شما استفاده شوند. دوم، شما می توانید از تصاویر برای نمونه کارهای خود استفاده کنید. و سوم، ابزارهایی همچون Marvel POP می توانند به شما برای تبدیل ایده هایی که با قلم و کاغذ رسم کردید به prototype های تعاملی آیفون یا اندروید کمک کند.

۲- وایرفریم یا Wireframe

وایرفریم‌ها طراحی هایی هستند که فقط عناصر اساسی UI را نمایش می دهند. وایرفریم‌ها درواقع اسکلت طراحی شما هستند. آن ها اساس رابط کاربری را نشان می دهند و به عنوان یک طرح پایه برای محصول شما ارائه می شوند.

چه زمانی

wireframe ها بیشترین اهمیت را در مراحل اولیه فرایند طراحی محصول دارند. wireframe ها برای موارد زیر مفید هستند:

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

چگونه

مشابه sketch، wireframe ها میتوانند با استفاده از قلم و کاغذ ساخته شوند. اگر از ابزار دیجیتال می خواهید استفاده کنید Balsamiq می تواند ابزار مناسبی باشد.

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

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

۳- ماک‌آپ یا Mockup

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

چه زمانی

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

چگونه

ماک‌آپ می تواند با استفاده از Photoshop ،Sketch ،Figma و بسیاری دیگر از ابزارهای طراحی ساخته شود.

مواردی که هنگام طراحی ماک‌آپ یا Mockup باید به یاد داشته باشید:

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

۴- پروتوتایپ یا Prototype

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

چه زمانی

پروتوتایپ می تواند در مرحله طراحی عملکرد طرح بسایر مفید و سودمند باشد.

پروتوتایپ می تواند به شما کمک کند تا:

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

چگونه

Adobe XD و InVision می توانند به شما برای ساخت یک پروتوتایپ برای وب سایت، موبایل، ساعت هوشمند و حتی تجربه های صوتی کمک کنند.

مواردی که باید هنگام طراحی پروتوتایپ به یاد داشته باشید

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

منبع: uxplanet.org

خواندن بیشتر

08شهریور

وایرفریم چیست؟ Wireframe و راهنمای کامل

08/06/1399 مینا میرزایی 38

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

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

۱- وایرفریم چسیت و چه کسی از آن استفاده میکند؟

بیایید با یک سوال واضح شروع کنیم: وایرفریم چیست؟

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

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

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

۲- چه زمانی وایرفریم را ایجاد می کنیم؟

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

۳- هدف از طراحی وایرفریم چیست؟

وایرفریم سه هدف اصلی را دنبال می کند:

– Wireframe مفهوم تمرکز برکاربر را حفظ می کند.

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

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

– وایرفریم ویژگی های وب سایت را مشخص و تعیین می کند

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

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

– ساخت وایرفریم سریع و ارزان است

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

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

۴- انواع مختلف وایرفریم ها

سه نوع اصلی از وایرفریم ها وجود دارد: وایرفریم های low-fidelity ، وایرفریم های mid-fidelity ، وایرفریم های high-fidelity . مهمترین عامل تمایز بین آن ها میزان جزییاتی است که در آن ها وجود دارد.

وایرفریم های low-fidelity

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

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

وایرفریم های mid-fidelity

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

وایرفریم high-fidelity

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

این وایرفریم ها باید برای آخرین مرحله چرخه طراحی نگه داری شوند.

۵- چه چیزی در یک Wireframe گنجانده شده است؟

همانطور که اشاره کردیم اینکه چه میزان از جزییات داخل یک وایرفریم باشد به نوع آن بستگی دارد. با این حال عناصری که معمولا در Wireframe ها آورده می شوند شامل لوگوها، فیلدهای جست و جو، عناوین، دکمه های اشتراک گذاری و متن شبه لاتین می شود. وایرفریم های high-fidelity ممکن است شامل اطلاعات تماس، پاورقی (footer) و navigation باشد. تایپوگرافی و تصویرسازی نمیتواند جزیی از وایرفریم باشد اما غالبا طراحان با سایز متن بازی می کنند تا سلسله مراتب اطلاعات یا عناوین را نشان دهند.

Wireframe ها به طور سنتی با طیف رنگی خاکستری طراحی می شوند و طراحان اغلب با سایه ها بازی می کنند. سایه های روشن را برای نمایش رنگ های روشن و سایه های تیره تر رابرای نمایش رنگ های پررنگ تر استفاده میکنند. در high-fidelity ممکن است طراحان به دفعات کم از رنگ هایی مانند قرمز برای نمایش پیام هشدار یا آبی تیره برای نمایش لینک فعال استفاده کنند. از آنجا که وایرفریم ها دو بعدی هستند،باید درنظر داشته باشید که آن ها ویژگی های تعاملی از طرح را مانند حالت بالاو پایین رفتن (کشویی)، حالت های شناور و آکاردئونی که عملکردهای پنهان را نمایش میدهند را به خوبی نمیتواند ارائه دهد.

۶- Wireframe وبسایت و وایرفریم موبایل

زمانی که ما به Wireframe ها فکر میکنیم غالبا ذهن ما به طرف وبسایت ها میرود. اما وایرفریم موبایل به ملاحظات ویژه ای نیاز دارد. تفاوت اصلی بین این دو چیست؟

سایز

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

رفتار

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

تعامل

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

۷- چه ابزارهایی برای ساخت وایرفریم استفاده می شوند؟

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

یکی از بهترین ابزارهای طراحی وایرفریم Sketch است که از ترکیب artboard ها و اشکال طراحی برداری استفاده میکند تا طراحان به راحتی وایرفریم را براساس پیکسل طراحی کنند همچنین Sketch دارای یک ویژگی به نام Symbol است، به این معنی که میتوانید بعد از ایجاد یک المان در UI مجددا از آن استفاده کنید. به چیزی حرفه ای تر و فراتر از یک وایرفریم کاغذی نیاز دارید اما برای بهبود پیکسل ها تلاش نمیکنید؟ از Balsamiq که به همان اندازه محبوب است استفاده کنید. ابزاری که طراحان را قادر میسازد روی طرح، طراحی تعامل بصری و معماری اطلاعات تمرکز بیشتری داشته باشند.

جهت مشاهده مطلب ۲۲ ابزار طراحی حرفه ای UI (قسمت اول) از اینجا اقدام کنید.

۸- مثال هایی از Wireframe

برای اینکه ایده از تنوع راه هایی که میتوان وایرفریم ساخت را نشان دهیم اجازه دهید به چند نمونه از طراحی وایرفریم نگاهی بیندازیم:

این طرح به ما تغییر از یک وایرفریم low-fidelity به high-fidelity نشان می دهد.

Wireframe های Elvira Hellenpart برای پروژه VocabApp، که به عنوان بخشی از برنامه CareerFoundry UX Fundamentals ایجاد شده است.

آرون اکبری درباره پروژه Inktank میگوید: “با طراحی Wireframe های low-fidelity روی کاغذ و اولین رویکرد طراحی موبایل، من شروع به ادامه راه خود تا طراحی high-fidelity پروتوتایپ کردم.”

۹- جمع بندی

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

منبع: careerfoundry.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

خواندن بیشتر

18اسفند

نرم‌افزار طراحی اسکچ (Sketch) چیست؟

18/12/1398 مینا میرزایی 42

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

چرا از نرم‌افزار طراحی Sketch استفاده کنیم؟

نرم‌افزار طراحی Sketch یک برنامه طراحی دیجیتال برای سیستم عامل Mac میباشد. شما می‌توانید برای ui، موبایل ، وب و حتی طراحی آیکون از آن استفاده کنید.

اگر شما از فتوشاپ برای این کارها استفاده می‌کردید، باید بدانید که نرم‌افزار طراحی Sketch جایگزینی بسیار توانمند است.

در اینجا سه دلیل اصلی برای استفاده از نرم‌افزار Sketch را از دید یک طراح وب مطرح می‌کنم.

۱- سیستم مجوز دهی یا خرید

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

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

خوشبختانه، تمدید مجوز کمی ارزانتر است. در حالی که خرید یک مجوز جدید ۹۹ دلار هزینه دارد تمدید آن به ازای یک سال ۶۹ دلار است.

۲- وکتور بیس

مبتنی بر بردار بودن به این معناست که هر شکلی که شما می کشید می‌تواند به هر ابعادی بدون از دست دادن کیفیت و وضوح تغییر سایز بدهد. در نتیجه طراحی شما درابعاد مختلف عالی دیده می شود.

۳- استفاده آسان

استفاده از نرم‌افزار Sketch بسیار راحتتر از برنامه ای مانند Photoshop است. نمیتوانید تصور کنید که چقدر باعث صرفه جویی در وقت من شده است.

به عنوان یک طراح وب، یک چیزی که درباره نرم‌افزار طراحی Sketch دوست دارم کیفیت ارائه کار است. به این معنا که طرح هایی که شما میتوانید بسازید بسیار،بسیار به یک نتیجه HTML/CSS و یا یک صفحه وب تکمیل شده بسیار نزدیک است و به این دلیل شما می توانید یک طرح را حتی در ورژن کد زده شده داشته باشید.

نرم‌افزار طراحی Sketch برای چه کسانی است؟

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

یک برنامه تحت ویندوز وجود دارد که شما می توانید از آن برای باز کردن فایل‌های نرم‌افزار طراحی Sketch استفاده کنید.اما تنها برای باز کردن فایل‌ها استفاده می‌شود و نمی‌توانید آن ها را ویرایش کنید. شما تنها می‌توانید روی Mac از نرم‌افزار طراحی Sketch استفاده کنید.

نرم‌افزار طراحی Sketch یک برنامه بسیار سبک است. بنابراین شما به یک کامپیوتر شخصی خیلی قوی احتیاج ندارید. به عنوان مثال من روی یک MacBook Pro چهارساله این برنامه را اجرا کردم. از مشخصات ویژه MacBook من رم 16 گیگابایتی و پردازنده یi7 است که با وجود همه ی اینا من مطمئن هستم این برنامه به همین خوبی روی یک سیستم معمولی تر و ارزان تر نیز کار می‌کند.

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

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

منبع: tutsplus.com

خواندن بیشتر

01دی

بهترین ابزارهای طراحی موبایل کدامند؟(قسمت دوم)

01/10/1398 نگین متین 40

۱۳- فلینتو (Flinto)

شاید بخواهید با تیم‌تان همکاری کنید و چون همه از Mac استفاده می‌کنند شما به فکر خرید مک می‌افتید تا از اسکچ استفاده کنید. Flinto دارای یک نسخه وب و Mac است، با استفاده از این ابزار می‌توانید به راحتی طرح‌های Sketch و Photoshop خود را وارد کنید و به تیم خود بپیوندید. بدین صورت شما هرگز احساس نمی‌کنید از همکارانتان عقب هستید. فلینتو، به‌سرعت انیمیشن‌های انتقال آیفون و آندروید را منعکس می‌کند و از پیش‌نمایش پروتوتایپ پشتیبانی می‌کند. به اشتراک گذاشتن لینک نصب در این ابزار ساده است – فقط لینک را از برنامه برای هر کسی که می‌خواهید ارسال کنید.

۱۴- فریمر جی اس ( FramerJS)

FramerJS یک ابزار طراحی انعطاف‌پذیر و تعاملی برای اپلیکیشن موبایل است که به شما امکان کد زدن می‌دهد. همچنین می‌توانید از ابزار ویرایش بصری آن استفاده کنید که به طور خودکار کد مربوطه را در back-end تولید می‌کند، تا دوباره بتوان از آن کد استفاده کرد. در غیر این صورت، اگر شما فقط یک طراح بصری هستید، ویرایشگر تصویری باید خوب باشد. FramerJS فقط برنامه‌ای برای استفاده در مشاهده وب‌سایت نیست. شما باید با آموزش‌‌های رایگان، طریقه استفاده از این ابزار را یاد بگیرید تا وایرفریم‌ها و پروتوتایپ‌های اولیه قدرتمند ایجاد کنید. در اصل، با Framer ،محدود به تخیل خود می‌شوید. می‌توانید برای پروتوتایپ خود پیش‌نمایشی ایجاد کنید تا گردش کار (workflow) را ساده کنید و به راحتی طرح‌هایتان را از Sketch ، Figma و Photoshop ایمپورت کنید تا با اعضای تیم خود همکاری داشته باشید.

۱۵- اینویژن(InVision)

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

۱۶- زپلین(Zeplin)

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

۱۷- یوایکس پین(Uxpin)

اگر می‌خواهید یک UX قدرتمند بدون کد ایجاد کنید و کل مراحل را از طراحی گرفته تا توسعه همه را در یک مکان انجام دهید روش “Agile” برای شما مناسب است. شما به احتمال زیاد به دنبال UXPin هستید. UXPin یک ابزار طراحی UI / UX است که با کشیدن و رها کردن می‌توانید وایرفریم‌ها و پروتوتایپ‌هایی با کیفیت بالا ایجاد کنید. با یوایکس‌پین می‌توانید طرح‌های خود را در برنامه یا از طریق Photoshop یا Sketch ایجاد کنید و همین کار را وارد UXPin کنید — بنابراین می‌توانید در مدت زمان کوتاهی گردش‌های کاری و وایرفریم‌های تعاملی ایجاد کنید. از آنجا که این ابزار دارای عناصر داخلی زیادی است، به هیچ وجه محدود نمی‌شوید. گفته می شود : ”شما می‌توانید با بیش از 1000 عنصر داخلی برای محصولات وب ، تلفن همراه و دسک‌تاپ آزمایش کنید.”

۱۸- Iconjar

آیا به دنبال راهی برای سازماندهی آیکن‌هایتان هستید؟ به کمک Iconjar می‌توانید تمام آیکن‌های خود را در یک مکان بارگذاری و ذخیره کنید تا آنها را از آنجا جستجو کرده و در پروژه خود در Sketch یا Photoshop بکشید و رها کنید. جستجو و بارگذاری آیکون‌ها به صورت تمام مدت می‌تواند استرس‌زا و وقت‌گیر باشد – در واقع، Iconjar این دردسر را از بین می‌برد. اکنون، می‌توانید هزاران آیکون را در یک مکان سازمان‌دهی کنید – سپس، طرح خود را در Sketch ، Photoshop یا Illustrrator بکشید و رها کنید. با این حال ، شما ممکن است قادر به بارگیری پرونده‌های .ai و .sketch نباشید.

۱۹- Fluid UI

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

فلویدیوآی

۲۰- MindNode

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

۲۱- فتوشاپ

Photoshop ابزاری کلاسیک برای طراحان است. اگر مدت طولانی از آن استفاده نکرده‌اید، باید بدانید طی سال‌ها به طرز چشمگیری بهبود یافته است. فوتوشاپ، نرم افزاری نیست که فقط برای برش و چسباندن تصاویر ساخته شده باشد. اگر یک هنرمند و همچنین یک طراح اپلیکیشن موبایل هستید از این نرم افزار استفاده کنید. با استفاده از فتوشاپ می‌توانید در طراحی خود درخشان باشید. فتوشاپ ویژگی‌هایی مانند Layering، Texture ،Lighting ، Blurring
دارد . این نرم ‌افزار برای دستکاری بیت مپ بسیار عالی است. اگر یک طراح برنامه تلفن همراه هستید، باید فتوشاپ داشته باشید.

فتوشاپ

۲۲- Venngage

Venngage به افراد اجازه می‌دهد تا با استفاده از قالب‌های آماده و سفارشی شده، به راحتی طراحی‌های زیبایی ایجاد کنند. وقتی در حال ایجاد اینفوگرافیک، ارائه‌ها، گزارش‌ها یا تصاویر رسانه‌های اجتماعی هستید، قالب‌های سفارشی آنها به شما کمک می‌کند تا با چند کلیک یک جادوگر طراحی شوید. همچنین می‌توانید نمادهای بصری دیگر مانند pie chart را با pie chart maker طراحی کنید، با graph maker یک گراف ایجاد کنید و از bar graph maker ما برای ایجاد گراف‌های میله‌ای و موارد دیگر استفاده کنید.

۲۳- Pen and notepad

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

۲۴- پرینسیپل

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

پرینسیپل

نتیجه‌گیری:

پروتوتایپ‌ها به ایده‌های جدید شما زندگی می‌بخشند. شما قطعاً نیازی به استفاده از همه این ابزارها ندارید ، فقط از همان ابزارهایی که فکر می‌کنید تیم طراحی شما برای رسیدن به مرحله بعدی نیاز دارد استفاده کنید. اگر به دنبال ابزاری همه‌کاره برای طراحان موبایل بدون هیچ گونه مشکلی در کدنویسی هستید، باید Buildfire.com را امتحان کنید — با استفاده از این وب‌سایت می‌توانید یک برنامه موبایل برای بیزینس خود ایجاد کنید. این کار سه مرحله ساده دارد: یک قالب اپلیکیشن انتخاب کنید، اپلیکیشن خود را سفارشی کنید ، سپس آن را منتشر و مدیریت کنید.

خواندن بیشتر

22آبان

بهترین ابزارهای طراحی موبایل کدامند؟ (قسمت اول)

22/08/1398 نگین متین 51

طراحان برنامه‌های موبایل همیشه دنبال ابزار مناسبی هستند که طراحی موبایل آنها را برای کاربر نهایی ارزشمند کند. ایجاد یک برنامه مفید و با ارزش موبایل، نیاز به مهارت بالا، خلاقیت و البته ابزارهای طراحی موبایل مناسب دارد. آیا این می‌تواند به این دلیل باشد که شرکت‌ها پول بیشتری را روی طرح‌های موبایل کاربر‌پسند، سرمایه‌گذاری می‌کنند؟ من مطمئن هستم. انتظار می‌رود این شرکت‌ها از این قدم جسورانه چه نتیجه‌ای بگیرند؟ خوب، طبق گفته DMI، “در ۱۰ سال، ۱۰،۰۰۰ دلار سرمایه‌گذاری در شرکت‌های طراحی محور ۲۲۸٪ بازدهی بیشتری از سرمایه‌گذاری مشابه در S&P داشته است.”

در حالی که هنوز طراحی وایرفریم و پروتوتایپ محصولات خود روی کاغذ ضروری است، نرم افزارهای طراحی اپلیکیشن این کار را آسان‌تر کرده‌اند و به راحتی امکان به اشتراک گذاری آن‌ها را در هر مرحله با مشتری، توسعه‌دهنده و طراح فراهم کرده‌اند. امروزه با وجود ابزارهای طراحی متعدد ، انتخاب بهترین ابزار برای برنامه شما می‌تواند چالش‌برانگیز باشد. خبر خوب این است که من ۱۸ ابزار توسعه‌دهنده برنامه‌های تلفن همراه که خودم از آنها استفاده می‌کنم را در ادامه برای شما شرح می‌دهم و اطمینان دارم که شما ابزار صحیح خود را با با توجه به کارکرد موردنیازتان انتخاب می‌کنید.[sc_fs_faq sc_id=”fs_faqdrgglwaq2″ html=”true” headline=”h2″ img=”” question=”حتما باید یکی از ابزارهای زیر را انتخاب کنم؟” img_alt=”” css_class=”” ]طبعا نه! شما با توجه به ماهیت کار خود می‌توانید یکی از بهترین ابزارهای زیر را انتخاب کنید و در هر پروژه می‌توانید به سمت یکی دیگر بروید تا کار خود را بهتر پیش ببرید. مهم این است که کدام یک می‌تواند کار شما را بهتر پیش ببرد.[/sc_fs_faq]

ابزارهای طراحی موبایل

۱- اسکچ (sketch)

این ابزار طراحی موبایل سبک، که روی سیستم‌عامل مک نصب ‌می‌شود به طراحان اپلیکیشن‌های مدرن، برای طراحی UI/UX توصیه می‌شود. Sketch بیشتر به Adobe Photoshop شبیه است اما عمدتاً برای ایجاد پروتوتایپ برنامه به کار می‌رود و بالاترین سهم را در فضای وایرفریم و پروتوتایپ دارد. سایز دانلود آن حدود ۲۰ مگابایت است، از منابع سیستم زیاد استفاده نمی‌کند و به‌سرعت می‌توان از assetsها خروجی گرفت.در نهایت، شما فقط یک بار آن را خریداری می‌کنید و سپس مجوز سالانه را تمدید کنید. در اسکچ نمی‌توان عمل animate را انجام داد. با این حال، این ابزار یک انتخاب عالی برای اکثر طراحان اپلیکیشن است. اگر می‌خواهید عکس‌ها را ویرایش کنید ، باید این برنامه را با ابزارهای دیگری مانند Photoshop یا Adobe Illustrator ترکیب کنید. آیا شما یک طرفدار کامپیوتر هستید؟ بسیار مایه تاسف است که بچه های Bohemian Coding ممکن است از رایانه های شخصی پشتیبانی نکنند. آنچه در سؤالات متداول خود آورده اند این است: “با توجه به تکنولوژی‌ها و فریم‌ورک‌های منحصر به فرد برای سیستم عامل OS X که Sketch بر اساس آن ساخته شده است، متأسفانه ما فکر نمی‌کنیم که هیچکدام از پلتفرم‌ها از Sketch پشتیبانی کنند.”

۲- BuildFire

BuildFire یک پلتفرم توسعه برنامه end-to-end است که می‌تواند ابزار طراحی موبایل باشد و به شما امکان می‌دهد یک پروتوتایپ از برنامه مورد نظر خود بسازید. BuildFire به طور کامل قابلیت‌ سفارشی‌سازی دارد و به شما امکان می‌دهد هر یک از طرح‌های خود را بارگذاری کنید، قلم‌ها، رنگ‌ها و موارد دیگر را سفارشی کنید. . حتی ممکن است متوجه شوید که کاربردپذیری داخلی در پلتفرم BuildFire تمام چیزیست که به آن نیاز دارید تا بتوانید یک اپلیکیشن با امکانات کامل ایجاد کنید و از پلتفرم روی IOS و Google Play منتشر کنید. می‌توانید نمونه اولیه یا پروتوتایپ خود را بسازید و کاملاً رایگان روی تلفن خود تست کنید و فقط در صورت آماده بودن برای انتشار، پول آن را بپردازید.

۳- ادوبی اکس دی (Adobe Experience Design)

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

۴- Axure RP

Axure RP یک ابزار طراحی موبایل برای طراحان حرفه‌ای است. این ابزار از ابتدا تا انتها تمام ویژگی‌های مورد نیاز برای طراحی اپلیکیشن را به شما ارائه می‌دهد. البته این بدان معنی نیست که عالی باشد. در کنار پروتوتایپ، امکان ایجاد وایرفریم، موکاپ،فلوچارت، پرسونا، تابلوهای ایده، سفرکاربر، نمودارهای دیجیتال و مستندات گرافیکی و… را برای شما فراهم می‌کند. نکته جالب اینجاست که اگر شما یک کدنویس هستید و دوست دارید کدنویسی انجام دهید، به شما امکان کدنویسی می‌دهد، همچنین به شما امکان استفاده از کامپوننت‌ها و کتابخانه‌ها را می‌دهد تا طراحی بهتر و یکپارجه‌تری داشته باشید. بنابراین شما محدود نیستید ، حدس می‌زنم شما فقط در تخیل خود محدود هستید. فکر می‌کنید Axure RP از سیستم‌عامل شما پشتیبانی می‌کند؟ باید بدانید در حال‌حاضر این ابزار از OS X و Windows OS پشتیبانی می‌کند.

Axure RP

۵- Marvel

آیا به دنبال طراحی، پروتوتایپینگ و همچنین همکاری با تیم خود هستید؟ مارول امکان انجام همه این موارد را برای شما فراهم می‌کند. بعلاوه این امکان را برای شما فراهم می‌کند تا طرح‌های خود را از ابزارهای مختلف مانند Sketch ، Photoshop ، illustrator و حتی برنامه‌هایی که در فضای ذخیره ابری مانند Dropbox یا Google Drive قرار دارند را اضافه کنید. Marvel این امکان را فراهم می‌کند تا ویژگی‌های انیمیشنی ایجاد شوند. نیازی به گفتن نیست، شما در مورد استخدام یک متخصص After Effect برای ایجاد انیمیشن‌ها در پروتوتایپ‌های استاتیک خود محدودیتی ندارید زیرا Marvel به راحتی امکان اضافه کردن انیمیشن‌ها را به شما می‌دهد. برخلاف ابزارهای دیگر ، مارول امکان طراحی خاص، پروتوتایپ و همکاری را برای شما فراهم می‌کند.

۶- Proto.io

اگر الگوهای طراحی و پروتوتایپ‌های زیادی دارید می‌توانید کار خود را با Proto.io آسانتر کنید. استفاده از آن آسان است، زیرا کدگذاری لازم نیست. مهم‌تر از همه، می‌توانید کامپوننت‌های UI خود را بصورت یکپارچه از Sketch یا Photoshop وارد کنید. برای نشان دادن جریان برنامه در صفحه‌های مختلف می‌توانید از ویژگی جدول زمانی(تایم لاین) که ساده وزیباست، استفاده کنید. Proto.io ویژگی‌های زیادی دارد. آیا asset در Dropbox یا Google Drive دارید؟ Proto.io به شما به راحتی اجازه همگام‌سازی و هماهنگی می‌دهد تا گردش کارتان را ساده کنید. Proto.io ویژگی‌های جالبی دارد که شامل کتابخانه UI Design Material و حالت آفلاین می‌باشد، که در صورت آنلاین نبودن هم می‌توانید با آنها کار کنید. خوشبختانه، Proto.io یک ابزار پروتوتایپینگ مبتنی بر مرورگر است در نتیجه نیازی به بارگیری هیچ نرم افزار سنگینی نیست ، می‌توانید بلافاصله پس از ثبت نام برای ۱۵ روز آزمایشی رایگان، بلافاصله از آن استفاده کنید.

۷- اوریگامی استادیو (Origami Studio)

اوریگامی ابزاری برای طراحی رابط مستقل است که توسط مهندسان فیس بوک ساخته شده است و فیس بوک برای طراحی برنامه‌های Facebook مانند Facebook Messenger و Instagram از آن استفاده کرده است. این ابزار رایگان است و با وجود پیچیدگی، قابلیت‌های خیلی خوبی دارد. برای پیش‌نمایش پروتوتایپ برنامه خود می‌توانید از Origami (Android یا iOS) استفاده کنید،به کمک اوریگامی می‌توانید لایه‌ها را از Sketch کپی و سپس پیست کرده و در اوریگامی روی آنها کار کنید. آیا می‌خواهید هرکدام از طرح‌هایتان را به مشتری نشان دهید؟ با کمک اوریگامی می‌توانید پروتوتایپ خود را رکورد کرده و از طریق برنامه اوریگامی آن را برای هر کسی که مایلید به سرعت ارسال کنید. یکی دیگر از قابلیت‌های جالب اوریگامی این است که می‌توانید آن را به دستگاه iOS یا Android خود متصل کنید تا پیش‌نمایش آن را مشاهده کنید و هنگام کار روی آن، تغییرات را بصورت زنده ببینید.

۸- OmniGraffle

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

۹- بالزامیک (Balsamiq)

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

۱۰- JustInMind

JustInMind یک ابزار مستقل برای طراحی وایرفریم‌ها و پروتوتایپ‌ها است. . این ابزار می‌تواند برای همکاری تیمی در سرور شما دانلود شود. این برنامه به شما امکان می دهد HTML، فیلم‌ها، ابزارک‌های ( ویجت‌های) آنلاین، اسناد، نقشه‌های تعاملی و آنلاین / آفلاین را از طریق کتابخانه ویجت آن به برنامه خود اضافه کنید. JustinMind همچنین امکان ادغام با JIRA ، Microsoft TFS ، Doors را فراهم می‌کند. شما می‌توانید اعضای تیم خود را از همان پلتفرم مدیریت کنید. علاوه‌براین، آنها افزونه‌های زیادی دارند که کار شما را راحت‌تر می‌کنند.

۱۱- HotGloo

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

۱۲- UI Stencil Kit

اگر با یک تیم در یک دفتر کار می‌کنید، کیت UI Stencil می‌تواند به شما در مرحله طوفان فکری و فاز ایده‌پردازی کمک کند. این ابزار ویژگی نت چسبنده‌ای دارد که می‌توانید آن را روی برد ایده‌ها پست کنید، ایجاد طرح ایده‌های خود روی کاغذ به انعطاف‌پذیری ایده‌تان در مرحله اول کمک می‌کند. UI Stencil Kit ابزاری است که هر طراح باید داشته باشد. ایده‌هایتان را روی کاغذ بیاورید زیرا بسیار مهم است.

منبع: buildfire.com

خواندن بیشتر

11شهریور

10 دلیل ساده برای استفاده از اسکچ به جای فتوشاپ

11/06/1398 علی دباغ منش 40

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

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

طراحی وکتور بیس
با اسکچ، دیگر نیاز نیست به تراکم صفحه ها فکر کنید. کافیست یک آرت بورد به اندازه مناسب (مثلا 640*360 برای اندروید) بسازید، مهم نیست صفحه رتینا باشد یا تلویریون سامسونگ، اسکچ بقیه کار ها را برایتان انجام میدهد. به یاد دارم زمانی فایل های فتوشاپ با حجم هایی مثل 500 مگابایت و رزولوشن 1920×1080 داشتم، زیرا باید مطمئن میشدم میتوانم طراحی را در رزولوشن مورد نیاز تحویل دهم و طرح ها موقع زوم کردن کیفییت خود را حفظ کنند. بعد از مدتی به تقسیم سایز فونت ها و حاشیه ها به 2 (در ios) و یا 3 (android) برای استفاده در کد نویسی عادت کردم، اما این کار همیشه زمان بر بود و احتمال اشتباه در ان وجود داشت. احساس میکردم این روند کار شامل مراحل اضافی و مزاحم بود، چون فتوشاپ بر اساس پیکسل کار میکند و برای طراحی رابط کاربری، به خصوص موبایل، ساخته نشده.

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

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

دنیای بزرگ پلاگین ها
تعداد بیشماری پلاگین برای اسکچ عرضه شده. پلاگین هایی که من از انها استفاده میکنم(مثلا dynamic buttons، asset export for iOS and android، palettes، fluid) روند کاریم را بسیار روان تر میکنند. برای هر کسی و هر نوع نیازی پلاگینی وجود دارد که میتواند کارتان را اسان تر کند.برای نصب آسان از Toolbox استفاده کنید.

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

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

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

تغییر نام لایه ها با cmd+r به جای دبل کلیک
خنده دار به نظر میرسد اما چون من همیشه از میانبر ها استفاده میکنم، زدن cmd+r خیلی سریع تر از دبل کلیک کردن با قلم یا ماوس روی اسم کوچک لایه است. و تعداد زیاد لایه ها این کار را سخت تر میکند.

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

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

منبع: meduim.com

خواندن بیشتر

07شهریور

اسکچ یا فتوشاپ؟ کدامیک بهتر است؟

07/06/1398 علی بجستانی 31

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

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

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

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

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

مدیر رسانه‌های اجتماعی در گروه Sirez می گوید: فتوشاپ دارای ابزارهای ویرایش تصویر است و برای اجرای تخیل شما بسیار آسان است اما بر خلاف آن اسکچ فقط با مک سازگار است.
Chhibber، مدیر محصولاتUberstarter گفت: ترجیح می‌دهم از اسکچ برای تجربه کاربری و طرح های گرافیکی ساده استفاده کنم، اما فتوشاپ نیز مزایای خاص خود را دارد.
بنیانگذار مایوخ چووداری در Milaap: اسکچ بهترین ابزار طراحی رابط کاربری است ، این ابزار بطور گسترده روند طراحی و تعامل را تسریع می کند.
سوراب سحنی، مشاور مستقل طراحی گفت: اسکچ برای طراحی محصول است و فتوشاپ برای تصاویر و ویرایش عکسها.

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

منبع: prototype.io

خواندن بیشتر