موارد زیادی وجود دارد که ساعت ها در مقابل یک پروژه جدید گیر می کنیم یا غرق می شویم. اینجاست که ایجاد وایرفریم می تواند سودمند باشد. Wireframe چیزی نیست جز نموداری از ایده های شما برای جریان یک پروژه.

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

وایرفریم چیست؟

در چند کلمه، Wireframe یک نقاشی است که در مراحل اولیه یک پروژه UX ایجاد شده است. وایرفریم ها روشی درخشان و بی دردسر برای ایجاد طرحی برای ساختار a هستند page.

در چنین نقاشی، می توانید اطلاعات ارزشمندی در مورد UI و UX آن قرار دهید page می خواهید طراحی کنید

شما می توانید وایرفریمینگ را به عنوان یک در نظر بگیرید process تجسم ایده های اولیه ای که در مورد یک پروژه دارید. مهم نیست که با نقاشی راحت باشید. می توانید قاب سیمی را روی کاغذ یا دیجیتال طراحی کنید.

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

چرا Wireframing برای طراحان UX مهم است؟

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

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

و چگونه می توانید از کارآمد بودن وایرفریم های خود اطمینان حاصل کنید؟ بیایید بفهمیم…

ایجاد یک Wireframe موثر در 5 مرحله ساده

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

1. تحقیق

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

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

2. پرسونا بسازید

شما قبلاً بهترین روش‌ها را انتخاب کرده‌اید و سایر دستورالعمل‌هایی را که فکر می‌کنید در این پروژه مؤثر نیستند رد کرده‌اید. اکنون زمان آن است که در مورد جریان کاربر فکر کنیم: چند صفحه نمایش را روی یک قرار می دهید page? کاربران از کجا می آیند و پس از خواندن این مطلب می خواهید به کجا بروند page?

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

نقشه برداری صحیح از اطلاعات بسیار مهم است زیرا به شما کمک می کند تا اطمینان حاصل کنید که کاربران هنگام بازدید از نهایی شما ناامید یا غرق نمی شوند. page.

وقتی این کار را انجام دادید، خوب هستید که بروید.

3. Sketching را شروع کنید

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

تنها کاری که باید در اینجا انجام دهید این است که ویژگی ها و قالب های اصلی را ترسیم کنید.

از آنجایی که اکثر ما طراحان کمال گرا هستیم، می توانید از تایمر استفاده کنید. تایمر را روی 4-5 دقیقه تنظیم کنید و خود را مجبور کنید که تا آن زمان وایرفریم را تمام کنید. این مرحله را تکرار کنید تا زمانی که چند وایرفریم ایجاد کنید که از آن راضی هستید.

در نهایت، ماکت های مورد علاقه خود را برای چند دقیقه گسترش دهید و صیقل دهید و برای قسمت سخت آماده شوید.

4. بازخورد بخواهید

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

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

5. اضافه کردن جزئیات و ایجاد نمونه های اولیه

این یک راه طولانی بوده است، اما شما اکنون در نقطه ای هستید که به عنوان یک طراح UX احساس راحتی می کنید: نمونه سازی. نرم افزار فراوان (Adobe XD، قاب ساز، Proto.ioو غیره) می توانند در این مرحله به شما کمک کنند.

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

نکات ارزشمندی که باید در هنگام ایجاد یک Wireframe به خاطر بسپارید

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

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

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

خط پایین

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

تصویر شاخص از طریق Picjumbo.