طراحی وایرفریم: صفر تا صد آموزش و 10 باید و نباید مهم

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

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

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

وایرفریمینگ چه زمانی انجام می شود؟

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

مزایای یک وایرفریم خوب چیست؟

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

برای ایجاد وایرفریم به چه ابزارهایی نیاز دارید؟

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

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

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

به طور کلی بهترین ابزار در ایران Figma، Adobe XD و MockFlow هستند، البته Figma و Adobe XD توصیه می شود. (آموزش کامل Figma را می توانید از اینجا دانلود کنید و آموزش کامل Adobe را می توانید از اینجا دانلود کنید)

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

1- در مورد نیازهای کاربر تحقیق کنید

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

2- کار را به صورت تصادفی انجام ندهید

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

3- همه چیز را ساده نگه دارید

وایرفریم‌ها البته باید ساده باشند، اما گاهی اوقات از کنترل خارج می‌شوند و شلوغ و پر از جزئیات می‌شوند. به یاد داشته باشید که یکی از مزایای کلیدی وایرفریم سرعت و سادگی است، بنابراین مهم است که عناصر طراحی دقیق را برای مراحل بعدی کار توسعه ذخیره کنید. میزان جزئیاتی که معرفی می‌کنید اغلب به این بستگی دارد که آیا یک قاب سیمی با جزئیات کم (Lo-Fi) یا با جزئیات بالا (Hi-Fi) ایجاد می‌کنید.

• وایرفریم های Lo-Fi بسیار ساده هستند و به راحتی می توان آنها را با قلم و کاغذ ترسیم کرد. اینها معمولاً برای نمایش ناوبری، صفحه بندی و جریان عناصر صفحه استفاده می شوند.
• قاب‌های Hi-Fi جزئیات بیشتری را اضافه می‌کنند که در طراحی Lo-Fi گنجانده نشده است و سلسله مراتب بصری صفحه، عناصر تعاملی و موارد دیگر را توصیف می‌کند.

4- نرم افزار را از ابتدا هدف قرار ندهید

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

5- ایده های خود را بیازمایید

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

6- به هر صفحه به صورت جداگانه نگاه نکنید

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

7- در نظر گرفتن هماهنگی و هماهنگی را فراموش نکنید

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

حتما دانلود کنید: صفر تا صد آموزش طراحی سایت

8- از رنگ ها استفاده نکنید

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

9- نظر بخواهید

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

10- به Ipsum lorem اعتماد نکنید

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

رابط کاربری را نیز می توان با فتوشاپ طراحی کرد: این مقاله کوتاه را ببینید یا ویدیوی زیر را تماشا کنید

دوره های آموزشی رایگان طراحی UI و Wireframe

برگرفته از صفحه فرود:

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

فراموش نکنید که دانلود کنید: آموزش تمام نکات کاربردی طراحی رابط کاربری (12 درس)

یک قاب سیمی طراحی کنید که به آن افتخار خواهید کرد

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