طراحی وایرفریم برای اپ موبایل

وایرفریم ها در هر پروژه ای نقشی اساسی دارند و نرم افزارهای موبایل هم از این قاعده مستثنی نیستند! بطور کلی وایرفریم ها، اسکچ هایی با جزئیات کم(یا به اصطلاح low-fidelity) تا پروتوتایپ را شامل می‌شوند. طراحی وایرفریم مسیرهای مختلفی دارد که از طراحی به طراح دیگه متفاوت است. برخی از کمپانی ها ممکن است بعد از طراحی اسکچ مستقیما سراغ کدنویسی برنامه بروند، ولی مسیر معمول طراحی به شرح زیر می‌باشد:

Sketch (Conceptual level) → Wireframe (Component level) → Mock/Prototype (Styles level/Interactions level) → Code

اسکچ کلی طرح/ طراحی وایرفریم ها/ پروتوتایپ برای انجام تست های تعاملی کاربر/ کدنویسی

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

قبل از طراحی وایرفریم: User Flow ترسیم کنید.

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

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

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

مقالات مرتبط:

https://virgool.io/@amirtaqiabadi/user-flow-%DA%86%DB%8C%D8%B3%D8%AA-ztgwtkpnunih

اسکچ و ترسیم اولیه از هسته ی اصلی User Flow

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

اسکچ اولیه به شما کمک می‌کند تا طرح کلی را رسم کنید، با کابرها به اشتراک بگذارید و Feedback بگیرید! سپس براساس همین نتایج، تغییرات نهایی را اعمال کنید.

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

• هدف این صفحه چیست؟
• این صفحه چگونه می تواند به کاربر/کمپانی کمک کند تا به هدف خود برسد؟

تصویر زیر، صفحه ی اصلی نرم افزار تحویل غذا را نشان می‌دهد که به کمک نرم افزار بالزامیک طراحی شده و بخش های اصلی به صورت مستطیل مشخص شده اند:

طراحی وایرفریم:

اسکچ اولیه باعث شکل گیری فورم و چهارچوب در وایرفریم شده و پس از ترسیم، وایرفریم هایی با جزئیات قابل قبول(mid-fidelity) به دست می‌آیند؛ که در بحث و اشتراک گذاری با دیگر طراحان و توسعه دهندگان(Developers) موثر و کاربردی است.

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

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

• یک) دید واقعی تری از صفحه ی موبایل کاربر داشته باشید و در طراحی عناصر زیاده‌روی نکنید.
• دو) استفاده از فریم حس طراحی واقعی را به شما القا می‌کند.

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

با رسم باکس و مستطیل چیدمان طرح را تعیین کنید.

در قدم های اولیه طراحی وایرفریم هدف شما، ایجاد سلسله مراتب بصری(hierarchy) بصورت واضح است.

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

در این قسمت، باید بر روی درخواست های نرم افزار از کاربر و نحوه ی ارائه آن ها تمرکز کنید. به یاد داشته باشید که کاربرها صفحات وب را از بالا به پایین و از چپ به راست اسکن می‌کنند(به شکل F؛ هم در موبایل و هم در صفحه ی دسکتاپ)

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

از الگوهای طراحی استفاده کنید

شباهت یکی از مهمترین خصوصیات طراحی تجربه کاربری(Ux) خوب است. هنگامی که افراد عناصر UI مشابه با نرم افزارهای پیشین را در یک محصول جدید مشاده می کنند، از تجربیات قبلی خود بهره می برند. هم Android و هم iOS دارای الگوهای طراحی منحصر به فردی هستند، که باعث می شوند تا طراح راحت تر بتواند تجربه ی مشابه و آشنا را برای کاربر مورد نظر ایجاد کند و همچنین می‌توان از آن ها به دفعات بهره برد.

Bottom tab bar, side drawer, Floating Action Button

این ها الگو هایی هستند که در ارتباط با Navigation bar فراوان مورد استفاده قرار می گیرند. اگر می خواهید طرحی واضح و ساده از مسیرهای Navigation داشته باشید، بهتر است از همین طرح های پیش فرض استفاده کنید.

محتوا اصلی را کپی و به صفحات اضافه کنید.

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

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

بعد از پر کردن صفحات با محتوای اصلی، حالا باید جریانات مورد نظر کاربر را تست کنید. ممکن برخی از اطلاعات اضافی به نظر برسند؛ پس بهترین زمان برای تحلیل محتوا و ایجاد ترکیب بندی جدید است.

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

از مقیاس بندی درست محتوا اطمینان حاصل کنید.

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

با متصل کردن صفحات به هم، یک جریان ایجاد کنید.

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

همچنین Ux Flow به شماکمک می کند تا کاربرد پذیری نرم افزار را بصورت کلی ببینید. مثلا، بعد از طراحی ux flow متوجه شوید که لازم است بین صفحه ی اصلی و قسمت جست و جو یک مرحله ی دیگر اضافه شود؛ چرا که در قسمت Back-end مقداری زمان میبرد تا داده های سستم تحلیل شوند و این مرحله ی اضافه این زمان را در اختیار نرم افزار قرار می‌دهد.

بهتر است صفحات را شماره گذاری کنید؛ چون در هنگام ارائه و بحث با تیم طراح، درک مسیر نرم افزار راحت تر می‌شود.

طراحی خود را تست کنید.

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

نتیجه گیری

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

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

منبع

https://uxplanet.org/a-step-by-step-guide-to-creating-mobile-app-wireframes-ede2e5c53a75