اصول اولیه ساخت اولیه با Axure

محتوا

• اصول نمونه سازی
• اسکندریه ، پروژه کتابخانه دیجیتال
• شروع کار - بهره وری در 30 دقیقه
• نیازهای اولیه و موارد استفاده
• از صفحه نمودار حروف استفاده کنید
• در حال ذخیره فایل پروژه
• اولین صفحات Wireframe
• صفحه نمودار جریان کار
• نمودار جریان مسیر را مرور کنید
• نمودار جریان مسیر جستجو
• موارد استفاده را برای نمودارهای جریان پیوند دهید
• تولید نمونه اولیه HTML

این یک گزیده ویرایش شده از فصل 3 از است Axure RP 6 موارد ضروری نمونه سازی توسط عزرا شوارتز.

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

چند سال پیش ، هزینه تهیه نمونه های اولیه به موقع تعاملی برای بسیاری از شرکت ها گران بود. بیشتر طراحان UX برنامه نویس نیستند و بنابراین محدود به تولید فریم های سیم ثابت در Visio یا ابزارهای مشابه شده اند. توسعه دهندگان ماهر باید درگیر شوند تا فریم های سیم ثابت را به شبیه سازی های تعاملی JavaScript ، Dynamic HTML یا Flash تبدیل کنند.

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

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

در این پست ، ما به چگونگی ایجاد یک پایه محکم برای یک فایل Axure پرداخته ایم.

اصول نمونه سازی

من می خواهم سه اصل راهنمای ساده و اجرایی پروژه را برای نمونه سازی پیشنهاد کنم ، که می توانید آنها را هنگام نزدیک شدن به یک پروژه UX جدید و در طول تلاش در ذهن داشته باشید:

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

در طول کتابم ، من با استفاده از یک پروژه نمایشی یا نمونه قطعه هایی ، که می توانید از سایت www.packtpub.com/support بارگیری کنید ، کاربرد این اصول در سناریوهای واقعی را نشان می دهم. خواهید فهمید که ، اگرچه بسیاری از ایده ها و بهترین شیوه ها در متن Axure ارائه می شوند ، اما در واقع یک ابزار تجربی هستند و حتی اگر از ابزارهای نمونه سازی دیگر استفاده می کنید می توانند به شما در کار کمک کنند.

اسکندریه ، پروژه کتابخانه دیجیتال

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

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

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

هر نمونه اولیه ورودی های زیادی را شامل می شود که رویکرد طراحی را آگاه می کند ، از جمله:

• نیازمندی های کسب و کار.
• بازخورد کاربران و سهامداران
• آزمونهای کاربرد متوسط ​​برای اعتبار سنجی طرح پیشنهادی.

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

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

شروع کار - بهره وری در 30 دقیقه

سرصفحه جالب را عفو کنید ، اما من می خواهم بر ارزش پیشنهادی Axure به عنوان یک برنامه اصلی طراحی UX تأکید کنم. هر ابزاری باید هزینه ، مجموعه ویژگی ها و سهولت استفاده خود را متعادل کند. اگر با بودجه شخصی خود نرم افزاری خریداری می کنید ، به وضوح می پرسید: "اگر من در این ابزار جدید وقت و پول بگذارم ، چه زود می توانم مثمر ثمر باشم و کارهای واقعی انجام دهم؟" در مورد Axure ، پاسخ روزها ، اغلب ساعتها و دقیقه است ، که در بیشتر فعالیت های ذکر شده در این فصل صدق خواهد کرد.

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

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

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

بنابراین ، فرض کنید برخی از کارهای اولیه پروژه را قبلاً انجام داده اید ، از جمله:

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

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

• نمودارهای مورد استفاده ایجاد کنید.
• نمودارهای جریان متقابل ایجاد کنید.

نیازهای اولیه و موارد استفاده

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

بیایید اولین مجموعه نیازها را هضم کنیم:

1. از صفحه اصلی ، کاربر باید بتواند مرور کردن یا جستجو کردن کتابخانه.
2. کاربر باید بتواند اطلاعات بیشتری در مورد یک عنوان بدون خروج از صفحه اصلی بدست آورد.
3. هر عنوان باید یک صفحه اختصاصی با کامل داشته باشد جزئیات، و همچنین قابلیت های پیش نمایش.
4. کاربر باید بتواند از هر صفحه با استفاده از a. کتابخانه را جستجو کند ساده جعبه جستجوی نوع Google یا یک پیشرفته ویژگی جستجو
5. جستجو کردن نتایج در لیستی از عناوین منطبق ارائه خواهد شد.
6. کاربر باید بدون نیاز به ترک صفحه نتایج جستجو ، اطلاعات بیشتری در مورد یک عنوان بدست آورد.
7. از صفحه نتایج جستجو ، کاربر باید بتواند به هر عنوانی دسترسی پیدا کند جزئیات صفحه
8. اگر عناوین منطبقی یافت نشد ، عناوین مربوطه را در اختیار کاربر قرار دهید اطلاع.

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

الزامات سطح بالا که ما با آنها شروع به کار کردیم ، موارد استفاده زیر را ایجاد می کند:

• مرور موارد کتابخانه.
• جستجوکردن کتابخانه برای موارد خاص با جستجوی ساده.
• جستجوکردن کتابخانه مورد (های) خاص با جستجوی پیشرفته.
• مشاهده نتایج جستجو.
• مشاهده جزئیات مورد

Axure یک سیستم شبکه سازی ، نمونه سازی اولیه و مشخصات یکپارچه است. این بدان معنی است که ما می توانیم سند مشخصات را به موازات تلاش برای قالب بندی سیم و نمونه سازی شروع کنیم. نمودارها مثال خوبی از اسناد مهم است که می تواند در Axure ایجاد شده و در سند مشخصات Word تولید شود.

از صفحه نمودار حروف استفاده کنید

وقتی Axure را راه اندازی می کنید ، با یک پرونده جدید خالی با یک صفحه اصلی و سه خواهر و برادر تو در تو باز می شود (به تصویر زیر مراجعه کنید ، A). من توصیه می کنم صفحات ساختار و جریان مانند موارد استفاده و نمودارهای جریان را در بخشی بالاتر از صفحات سیم کشی قرار دهید. توجه داشته باشید که ترتیب صفحات در نقشه سایت pane ترتیبی است که در آن صفحات نمونه اولیه HTML و فهرست مشخصات Word ظاهر می شود.

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

در نقشه سایت صفحه ، اضافه کردن یک خواهر و برادر جدید صفحه بالای صفحه خانه صفحه (B) همانطور که در تصویر زیر نشان داده شده است:

روی این صفحه جدید دوبار کلیک کنید تا به عنوان یک برگه در باز شود قاب وایرلس زبانه بعد ، نام صفحه جدید را تغییر دهید استفاده کنید موارد (همانطور که در تصویر زیر نشان داده شده است ، A). Axure روشی را برای تمایز بین صفحات wireframe و صفحات نمودار ارائه می دهد: کلیک راست کرده و گزینه را انتخاب کنید جریان گزینه (B) از نوع نمودار منوی زمینه ای توجه داشته باشید که نماد صفحه (C) تغییر کرده است و باعث تمایز بین صفحات Wireframe و Flow می شود:

صفحات Wireframe و Flow از همه جنبه ها به غیر از نماد سمت چپ نام آنها یکسان است.

بعد ، گزینه را انتخاب کنید جریان کتابخانه ویجت (به تصویر زیر مراجعه کنید ، A) در ابزارک ها صفحه را بکشید بازیگر ویجت (B) به صفحه. این شکل استاندارد نشان دهنده استاندارد کاربران در است UML و بیشتر روشهای نمودارسازی. بیرون بکشید بیضی ویجت و برچسب گذاری کنید مرور مسیر (C) Ellipse نماد UML برای مورد استفاده است.در صورت لزوم به افزودن و برچسب گذاری ویجت های بیضی ادامه دهید:

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

این یک فرصت عالی برای آشنایی با سه حالت انتخاب Axure است که انتقال و ترتیب ویجت ها را در صفحه های سیم و فریم تسهیل می کند. می توانید پیدا کنید انتخاب حالت در نوار ابزار Axure. (به تصویر زیر ، A برای نسخه Windows و B برای نسخه Max مراجعه کنید.)

1. حالت متقاطع را انتخاب کنید (C): این حالت پیش فرض Axure است. هنگامی که ماوس خود را بر روی قاب سیم کلیک می کنید و می کشید ، تمام ابزارک هایی که بخشی از منطقه انتخاب شما هستند ، حتی اگر فقط بخشی از آن در آن گنجانده شده باشد ، انتخاب می شوند.
2. حالت حاوی را انتخاب کنید (D): در این حالت ، فقط ابزارک هایی که به طور کامل در انتخاب شما گنجانده شده اند ، انتخاب می شوند.
3. حالت اتصال (E): این حالت هنگامی که با ویجت های Flow کار می کنید بسیار م itثر است زیرا خطوط اتصال دهنده ای را ایجاد می کند که می توانید از آنها برای اتصال ویجت های جریان مختلف در نمودارهای خود استفاده کنید.

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

برای سازماندهی ابزارک ها در یک صفحه ، از ابزارهای موجود در صفحه استفاده کنید هدف - شی نوار ابزار تصویر زیر ابزارهای نسخه Mac را نشان می دهد. ابزارهای یکسان در نسخه ویندوز وجود دارد:

• اشیا را گروه بندی و از هم جدا کنید (A).
• به جلو یا عقب ، بالا یا پایین حرکت کنید (B).
• اشیا را به چپ ، راست و وسط و بالا ، پایین و مرکز تراز کنید (C).
• توزیع اشیا به صورت افقی و عمودی (D).
• قفل و باز کردن قفل اشیا (E).

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

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

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

در حال ذخیره فایل پروژه

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

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

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

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

اولین صفحات Wireframe

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

• صفحه نخست.
• صفحه نتایج جستجو.
• صفحه جزئیات مورد.

همانطور که ممکن است متوجه شده باشید ، هنگام راه اندازی Axure ، سند جدیدی مانند یک برنامه MS Office مانند Word یا PowerPoint باز می شود. شما در نقشه سایت صفحه ای که Axure قرار می دهد a خانه صفحه و سه صفحه تو در تو. این پیش فرض برای هر پرونده Axure جدید است.

نام غیر توصیف شده را تغییر دهید صفحه 1 و صفحه 2 برچسب های صفحات تو در تو (به تصویر زیر مراجعه کنید ، A) به یک چیز معنی دار تر ، و حذف کنید صفحه 3. شما نقشه سایت پنجره باید چیزی شبیه به تصویر زیر باشد ، (B):

می توانید ترتیب صفحات را با استفاده از فلش های حرکت به بالا و پایین (C) تغییر دهید و با استفاده از فلش های تورفتگی و بیرون (L) سطح لانه سازی آنها را تغییر دهید.

صفحه نمودار جریان کار

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

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

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

• آنچه سیستم در مورد کاربر داده شده می داند.
• گزینه های ارائه شده توسط کاربر به سیستم.
• اقدامات کاربر.

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

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

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

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

نمودار جریان مسیر را مرور کنید

برای ایجاد نمودار ، مراحل زیر را انجام دهید:

1. برای باز کردن دابل کلیک کنید مرور مسیر صفحه در قاب های بی سیم صفحه
2. از ابزارک ها صفحه را بکشید بازیگر ویجت
3. حالا قسمت جالب می آید: از نقشه سایت صفحه را روی صفحه اصلی بکشید - این نقطه ورود به این جریان است. توجه داشته باشید که ویجت برچسب خود را از صفحه اصلی خود در آن به ارث می برد نقشه سایت صفحه همچنین به نماد سند در گوشه بالا سمت چپ ویجت توجه کنید (به تصویر زیر مراجعه کنید ، A). این بدان معنی است که وقتی نمونه اولیه HTML را تولید می کنید ، با کلیک بر روی این ابزارک به صفحه اصلی واقعی پیوند داده می شود.
4. از نقشه سایت صفحه را بکشید جزئیات مورد صفحه
5. اشکال را انتخاب کنید و استفاده کنید تراز وسط و توزیع به صورت افقی برای تمیز کردن ارائه
6. تغییر به حالت اتصال برای کشیدن کانکتورها از ابزارک Actor به صفحه اصلی و از آنجا به صفحه Details Details. استفاده از سبک پیکان گزینه هایی برای اضافه کردن نوک پیکان های جهت دار به اتصالات.
7. به منظور افزودن برچسب تعامل به فلش ، واژه نامه ای را با استفاده از ابزارک های کتابخانه Wireframe اضافه کنید و اولین نمودار جریان خود را در Axure تکمیل کرده اید. این باید شبیه همان چیزی باشد که در تصویر زیر نشان داده شده است:

نمودار جریان مسیر جستجو

نیازهای اولیه نیاز به دو ویژگی جستجو دارد:

• جستجوی ساده
• جستجوی پیشرفته.

هر دو روش کاربر را از یک مسیر مشابه عبور می دهد: در صورت یافتن موارد منطبق ، آنها در قسمت نمایش داده می شوند نتایج جستجو صفحه (نگاه کنید به تصویر زیر ، A) و کاربر می تواند آزمایش کند جزئیات مورد صفحه (B) اگر مورد منطبقی یافت نشد ، کاربر می تواند جستجوی جدیدی را انجام دهد.

با تکمیل مسیر جستجو ، متوجه می شوید که این یک خطر مهم را نشان می دهد. اگر کاربران یا یک جستجوی ساده یا جستجوی پیشرفته را انجام دهند اما آنچه را که به دنبال آن هستند نیابند ، این احتمال وجود دارد که کاربران جریان (C) را رها کرده و به سایت دیگری بروند. توجیه ارائه ویژگی های جستجوی قدرتمند ، ساده و پیشرفته باید با اهمیت استراتژیک جستجو در برنامه گره خورده باشد. این نمونه ای از بینش استراتژیک است که ارزش تجاری ایجاد نمودارهای پشتیبانی برای نمونه اولیه را تأکید می کند:

موارد استفاده را برای نمودارهای جریان پیوند دهید

علاوه بر این که می توانید نمودارها و فریم های سیم را در همان برنامه ایجاد و ذخیره کنید ، می توانید نمودارها و قاب های مفتول Axure را به هم پیوند دهید تا یک انتقال بی نقص از یکی به دیگری ایجاد کنید:

1. باز کن از موارد استفاده کنید صفحه در قاب وایرلس صفحه
2. بر روی کلیک راست کنید مرور مسیر از حروف استفاده کنید و گزینه را انتخاب کنید ویرایش صفحه مرجع گزینه (نگاه کنید به تصویر زیر ، A) از شکل جریان را ویرایش کنید زیر منو
3. صفحه مرجع pop-up (B) تمام صفحات موجود در لیست را نشان می دهد نقشه سایت صفحه
4. انتخاب کنید مرور مسیر صفحه را برای استفاده از پرونده به صفحه پیوند دهید و پنجره بازشو را ببندید.
5. به نماد صفحه مرجع (D) توجه کنید که اکنون در گوشه بالا سمت چپ مورد استفاده ظاهر می شود. رفتار ویجت تغییر کرده است: قبل از اینکه با صفحه مرجع مرتبط شود ، با دوبار کلیک بر روی آن ویرایش برچسب ویجت امکان پذیر می شود. با دوبار کلیک بر روی آن ، به صفحه دیگری در نقشه سایت مراجعه می کند تا وب سایت باز شود صفحه مرجع ظاهر شدن دلیل این امر این است که عنوان ویجت عنوان صفحه ارجاع شده را به ارث می برد و دیگر قابل ویرایش نیست:

تولید نمونه اولیه HTML

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

دسترسی به ویژگی تولید نمونه اولیه HTML یا از طریق نماد نوار ابزار یا از طریق آن انجام می شود تولید می کنند منو. نمونه اولیه تولید کنید گفتگو (به تصویر زیر (A) برای نسخه Windows و (B) برای نسخه Mac مراجعه کنید) ، به شما امکان می دهد تنظیمات مختلفی را که بر خروجی تأثیر می گذارد مشخص کنید. با این حال ، در این مرحله اولیه ، شما می خواهید با شروع کنید عمومی بخش (C) و به Axure اطلاع دهید كه كجا نمونه اولیه HTML را تولید می كند.

یا از پوشه پیش فرض Axure ، پوشه ای با عنوان "Axure Prototypes" در پوشه Documents خود استفاده کنید یا تمام کارهای پروژه خود را در همان شاخه نگه دارید ، همانطور که در آن توضیح داده شده است فصل 2. با این کار یافتن همه موارد پروژه آسان تر می شود ، به ویژه هنگامی که می خواهید از کار خود حمل یا پشتیبان تهیه کنید.

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

بزن به نمونه اولیه نماد برای تولید نمونه اولیه HTML. صفحه به دو بخش تقسیم می شود:

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

در مثال ما ، از موارد استفاده کنید صفحه (B) در نقشه سایت در قسمت اصلی صفحه نمایش داده می شود. همانطور که ماوس خود را روی مرور مسیر از case (C) استفاده کنید ، توجه داشته باشید که مکان نما تغییر می کند و نشان دهنده یک پیوند فعال است ، که با کلیک ، مرجع را بارگیری می کند نمودار مسیر را مرور کنید صفحه (D) روش دیگر ، کلیک کردن روی نماد در گوشه پایین سمت راست مورد استفاده (E) صفحه ارجاع شده را در یک برگه جدید باز می کند. در مثال ما ، مرور کردن نمودار مسیر نشان می دهد خانه و جزئیات مورد صفحه کادرهای نمودار با کشیدن صفحات واقعی از صفحه ساخته شده اند نقشه سایت.

اکنون ، در نمونه اولیه HTML ، این جعبه ها نیز دارای یک نماد پیوند (F) هستند و با کلیک بر روی جعبه آیکون ، به صفحه wireframe ارجاع داده می شوید:

به طور خلاصه آنچه که تاکنون پرداخته ایم:

• ایجاد نمودارهای مورد استفاده.
• ایجاد نمودارهای جریان کار.
• ارجاع و پیوند دادن صفحات جریان و سیم از نمودارها.
• تولید نمونه اولیه HTML.

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