« بهترین ابزار های طراحیui/ux در سال 2019 »

UI و  UXدر طراحی وبسایت چیست ؟

تاکنون شاید بارها دو کلمه UI  و UX را در زمینه طراحی سایت شنیده باشید اما معنی اینها چیست؟ اگر از 20 نفر این سوال را بپرسید با 20 جواب متفاوت رو به رو میشوید ! اکثرا افرادی را که ظاهر یک وبسایت یا برنامه  را طراحی می کنند را 'UI' 'UX'  کار می نامند. در این مقاله سعی کرده ایم اطلاعات جامعی درباره این دو واژه و ابزارهایشان ارائه دهیم.

طراحی وب سایت در  UI

UI  مخفف کلمه User Interface و به معنی رابط کاربری است که با عنوان شغلی UI Designer شناخته میشود. طراحی رابط کاربری یعنی طراحی بخش‌های از محصول دیجیتال که کاربر آن را می‌بیند مانند عکس، متن و هرچیز دیگری که کاربر میبیند  و از آن استفاده می‌کند. طراح رابط کاربری عملا با طرح های گرافیکی و پیاده سازی آن سروکار دارد. یعنی بخشی از این کار را گرافیستی که طرح سایت یا اپلیکیشن را میزند برعهده دارد و بخش دیگر را برنامه نویس front end  که طرح وب سایت نهایی را پیاده سازی میکند.

طراحی سایت در  UX

به صورت خلاصه UX مخفف عبارت User Exprience و به معنای تجربه کاربری است که با عنوان شغلی UX Designer شناخته میشود. طراح تجربه کاربری سعی میکند تجربه کاربر از یک سایت، محصول یا خدمات را بهبود دهد. یعنی من اگر طراح تجربه‌ ی کاربری جایی باشم، باید تمام مسیرهایی که مخاطب به ما می‌رسد را بشناسم، تمام سناریوهایی که ممکن است برای مخاطب پیش بیاید را حدس بزنم و سعی کنم کاربر در تمام این مسیرها تجربه‌ای ایده‌ال داشته باشد و صد البته که در کنار این تجربه به اهدافی که مد نظر ما است برسد ( یعنی کاربر را به سمتی که می‌خواهیم هدایت کنیم). UX به مشتری آن چیزی را که واقعا نیاز دارد را نشان میدهد نه چیزی که زیباتر است ! در حقیقت تجربه کاربری یا همان UX، یکی از 3 پایه اصلی سوددهی یک کسب و کار است( که امروزه به عنوان کسب و کارهای اینترنتی شناخته میشود) ودر کنار فروش و بازاریابی و فناوری مورد استفاده امکان پذیر آن، باعث ایجاد درآمدزایی میشود.

تفاوت UI و UX

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

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

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

بهترین ابزارهای طراحی UI و UX 

1.    اسکچ(sketch)

ویرایشگر اسکچ یک ویرایشگر گرافیکی است که محصول bohemian coding  در هلند است که اولین نسخه آن در سال 2010 انتشار شد. اسکچ یک برنامه مبتنی بر بردار است بدان معنا که هر شکلی که در آن ترصیم میشئد را میتواند بدون افت کیفیت، تغییر ابعاد دهد ! یکی از علل محبوبیت این برنامه ساده تر بودن آن نسبت به فتوشاپ است و طرح هایی که با آن ساخته میشود بسیار شبیه به نتایج  HTML/CSS و صفحات اینترنتی است.

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

او دلایل زیادی را در این زمینه عنوان می‌کند: “در مقایسه با فتوشاپ تمام اسنادی که دارید و باید روی آن‌ها بازبینی انجام دهید خیلی راحت‌تر مرتب می‌شوند. اسکچ اسناد کوچکی دارد، درحالیکه فتوشاپ دارای اسناد با حجم زیاد است. در اسکچ به دلیل ساختار اپِ بردار گونه‌ای که دارد اندازه فایل‌ها در مقایسه با فتوشاپ کوچکترند”  

2.     ادوب XD

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

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

3.    فیگما (figma)

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

در اینجا چند ویژگی خارقالعاده از آن آورده شده است:

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

4.    فلیر (flare)

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

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

5.    اسکوش(squoosh) 

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

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

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

6.    لینک اسپلیت(link split) 

موثرترین راه برای بهتر کردن وب‌سایتتان استفاده از تست A/B می‌باشد، تقسیم ترافیک بین دو یا چند نسخه بیشتر و دیدن اینکه کدام عملکرد بهتری دارد. این ابزار انجام این کار را خیلی ساده‌تر می‌کند. این ابزار برای ده هزار کلیک اول رایگان است و حتی برای شروع نیز نیاز به ثبت‌نام ندارد.

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

7.    انیمه(animejs)

Animejs قابلیت کار با cssوsvg وjava script را دارد و می تواند به آنها انیمیشن بیافزاید.  انیمیشن ‌ها و ترنزیشن‌های CSS یک قدم بسیار بزرگ است اما اغلب تعاملات پیچیده نیازمند یک کتابخانه‌اند. انیمه یک موتور انیمیشن جدید است که شما در صورت نیاز به افزودن انیمیشن‌های پیچیده به اپتان می‌توانید از آن‌ها استفاده کنید.

8.    Mind Manager

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

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

9.    Mason

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

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

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

با استفاده از Mason می توانید صفحات ثبت نام و ورود، فیدهای خبری و… را بدون نوشتن حتی یک خط کد طراحی کنید !

10.    Uxpin

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

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

11.    Mockplus

mockplus ابزاری بسیار مناسب برای طراحی پروتوتایپ (Prototype) است. ساخت طرح اولیه به کمک این ابزار بسیار ساده تر از ساخت طرح اولیه در نرم افزارهایی مانند فتوشاپ و ایلوستریتور می باشد.

در این ابزار به راحتی و با امکان کشیدن و رها کردن المان ها می توان در کمترین زمان به طرح مورد نظر رسید. با Mockplus میتوان به سرعت ایده ها را با مؤلفه ها ، نمادها و تعامل به نمونه های اولیه کاربردی تبدیل کرد و نیازی به کد نویسی ندارد. در ورژن ۳٫۴ این ابزار قابلیت های جدیدی مانند نمایش چرخش طراحی، تکرار کننده و… اضافه شده است.

12.    Visual Inspector

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

این ابزار با تمامی وبسایت ها از جمله وبسایت های WordPress، Html و… سازگاری دارد و به سادگی می توانید از آن استفاده کنید. (هزینه دسترسی کامل و بدون محدودیت زمانی به Visual Inspector برابر ۴۹ دلار می باشد که استفاده از آن برای شرکت های بزرگ در ایران قابل توجیه می باشد.)

13.    Marvel

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

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