آموزش طراحی اپلیکیشن موبایل: ابزارهای ساده برای نمونه سازی سریع ایده اپلیکیشن شما
Mobile App Design: Simple Tools to Rapidly Prototype Your App Idea
- در حال بارگزاری، لطفا صبر کنید...
می‌خواهید بدانید چگونه ایده برنامه تلفن همراه خود را زنده کنید، اما نمی‌دانید از کجا شروع کنید؟ این کلاس 45 دقیقه ای شما را در فرآیند نمونه سازی راهنمایی می کند، و بهترین بخش این است که شما نیازی به دانستن هیچ کدی ندارید! رونی پیترز، مدیر عامل 360 Design نحوه ایجاد نمونه های اولیه سریع برای برنامه ها را با استفاده از Photoshop، Axure، Illustrator و Flinto به اشتراک می گذارد. شما با ابزارها و دانش طراحی اپلیکیشن موبایل خود، برای اشتراک گذاری با مشتریان، همکاران یا دوستان خود کنار خواهید رفت.
نمونه اولیه ایده برنامه تلفن همراه خود را طراحی کنید.
تکلیف
در اینجا مراحلی وجود دارد که من برای ایجاد نمونه اولیه برنامه خود طی کردم. اگر تمام این مراحل را دنبال کنید، باید بتوانید یک نمونه اولیه قوی و خوب طراحی کنید.
یک پروژه تمام شده می تواند شامل موارد زیر باشد:
کشف: ایده بزرگ برای برنامه شما - این فقط می تواند یک توضیح مکتوب از مشکلی باشد که برنامه شما قرار است حل کند.
- ایده بزرگ برای برنامه شما چیست؟
- مشکلی که می‌خواهید با برنامه خود حل کنید چیست؟
- برنامه شما قرار است چه کسی را هدف قرار دهد؟
- از چه پلتفرمی باید استفاده کنید؟ iOS، Android؟
به موفق ترین برنامه ها فکر کنید، اغلب آنها فقط یک کار را به خوبی انجام می دهند - Uber، Seamless، Yahoo Weather، Nike Running، Trulia و غیره.
قابل تحویل:
- یک توضیح مکتوب (می‌تواند فقط نکات مهم باشد) از ایده بزرگ و مخاطب هدف
تعریف: ویژگی‌ها و توابع - این می‌تواند فهرستی از ویژگی‌های اصلی باشد که فکر میکنید ممکن است برای حل مشکل باید در برنامه داشته باشید.
- ویژگی های اصلی که باید در برنامه خود داشته باشید چیست؟ مثلا آیا به ویژگی نقشه نیاز دارد؟ آیا تجارت و سبد خرید دخیل است؟ آیا جزء وب سایت دارد؟ آیا باید اعلان‌های فشاری ارسال کنید؟ و غیره، و غیره
- اگر محتوایی در برنامه شما وجود داشته باشد (مقالات، تصاویر، ویدیو و غیره)، از کجا می آید و چه کسی آن را تولید می کند؟
قابل تحویل:
- یک توضیح نوشتاری (می‌تواند فقط نقاط گلوله باشد) از ویژگی‌ها و محتوا
DESIGN: نقشه سایت، نمودارهای جریان، وایرفریم - اینجا جایی است که برنامه شروع به جمع شدن می کند.
- SITEMAP: با استفاده از کاغذ، تخته سفید، ابزارهای آنلاین یا ابزارهای دسکتاپ، ساختار صفحه های مختلف برنامه شما را ترسیم می کند. یکی از راه‌های خوب برای پایین آوردن سریع ایده‌ها و جابه‌جایی ایده‌ها این است که یادداشت‌های کاغذی چسبناک روی دیوار یا تخته سفید را به ما بدهید. به این ترتیب می توانید به راحتی صفحات/صفحه ها را جابه جا کنید. ممکن است در نهایت با چندین نسخه از این مواجه شوید. از خطوط و فلش‌ها برای نشان دادن رابطه بین صفحات/صفحه‌ها در برنامه خود استفاده کنید. نقشه سایت را روان در نظر بگیرید، شما باید نقشه سایت را در طول فرآیند خلاقانه ارزیابی کرده و احتمالاً تغییر دهید.
در نقشه سایت مثال من، هر بلوک نمایانگر یک صفحه در برنامه است. خطوط نشان دهنده نحوه ارتباط صفحات با یکدیگر هستند و نمادها یادآور عملکردهایی هستند که فکر می کنم ممکن است در صفحه باشد.
- نمودارهای جریان: با بازگشت به DISCOVERY، به مخاطبان هدف خود فکر کنید، این شخص یا گروهی از افراد را تصور کنید، اکنون جریان نحوه استفاده این شخص از برنامه شما را مشخص کنید. آنها از کجا شروع می کنند، چه گزینه هایی دارند، چه کاری انجام می دهند. باز هم، ابزارها اهمیت کمتری دارند، این می تواند روی کاغذ (یادداشت های چسبنده)، تخته سفید یا ابزارهایی مانند Axure، Adobe Illustrator، Omnigraffle و غیره باشد. این فرآیند ممکن است باعث شود نقشه سایت را تغییر دهید - این یک چیز خوب است، به این معنی است که شما به حل مسئله و بهینه سازی راه حل خیره شده اید.
در نمودار جریان نمونه من، صفحه‌ها با کادرهای سبز نشان داده می‌شوند، الماس‌های بنفش نشان‌دهنده نقاط تصمیم‌گیری یا اقداماتی هستند که کاربر قرار است در آنجا انتخاب کند.
- WIRFRAMES: اکنون که ساختار و جریان های کلیدی را برای برنامه خود ایجاد کرده اید، صفحه های جداگانه را بسازید. در ابتدا اینها می توانند طرح های خشن باشند، چه چیزی باید در هر صفحه باشد؟ چه دکمه ها یا اقداماتی باید در هر صفحه وجود داشته باشد، چه محتوایی؟ در ابتدا تعیین عناصر و سلسله مراتب محتوا، دکمه ها و اقدامات مهمتر از ایجاد یک طراحی عالی در این مرحله است.
قابل تحویل:
- نقشه سایت
- نمودار/های جریان
- Wireframes
استقرار: آن را به کار بگیرید! - اینجا جایی است که وایرفریم‌ها را به یک نمونه اولیه وصل میکنید. اینجا جایی است که من از Flinto استفاده می کنم، اما ابزارهای دیگری نیز وجود دارند که می توانند عملکرد مشابهی را انجام دهند.
- صفحه‌های Wireframe را بردارید و آنها را به‌عنوان فایل‌های JPEG یا PNG ذخیره کنید و آنها را در Flinto قرار دهید.
- هر دکمه، عنصر (مثلاً تصاویر) و محتوای نوشتاری را بردارید و آن را ذخیره کنید تا در ابزار نمونه سازی خود بیاورید.
- اتصال صفحه نمایش.
- دکمه‌ها را فعال کنید.
- انتقال و افکت ایجاد کنید
- برنامه خود را منتشر کنید و آن را به اشتراک بگذارید!
قابل تحویل:
- یک برنامه تلفن همراه قابل اشتراک.
برنامه اکنون قابل اشتراک‌گذاری است و دارای صفحه‌های کلیدی و ویژگی‌هایی است که می‌خواهم آنها را آزمایش کنم.
تست: از نمونه اولیه بیاموزید - حالا حقیقت مفهوم! هنگام آزمایش برنامه خود، اولین قدم خوب این است که از شخصی بخواهید آن را روی دستگاه تلفن همراه خود بارگذاری کند - چیزی در مورد برنامه به او نگویید، در واقع چیزی نگویید، فقط تماشا کنید و گوش دهید. از آنها بخواهید اولین تجربه خود را با نمونه برنامه شما تجربه کنند - به آنها بگویید در مورد کاری که انجام می دهند صحبت کنند، از آنها بخواهید آنچه را که می بینند، و فکر می کنند قرار است با برنامه انجام دهند. یادداشت بردارید و به آنچه می گویند گوش دهید...
- آیا آنها با ناوبری مشکل داشتند؟
- آیا آنها "ایده بزرگ" برنامه را دریافت کردند؟
- آیا آنها همه ویژگی‌ها را کاوش کردند یا در نقطه‌ای دچار مشکل شدند؟
بر اساس آموخته‌هایتان از آزمایش، آیا آماده‌اید تا فرآیند طراحی و کدگذاری نهایی را شروع کنید؟ آیا در مورد برخی از عناصر، ویژگی ها یا جریان هایی که نیاز به طراحی مجدد یا بهینه سازی دارند یاد گرفتید؟ از تست اولیه استفاده کنید و بر اساس نتایج به نقطه لازم در فرآیند طراحی برگردید تا تنظیمات لازم را انجام دهید.
منابع
ابزارها
پیوندها
- در اینجا یک آموزش در مورد نحوه استفاده از Axure وجود دارد: []
- در اینجا چند آموزش عالی در مورد نحوه استفاده از Flinto وجود دارد:
الگوها
- من اولین نمونه اولیه فلینتو را پیوست کردم. برای مشاهده این سند، ابتدا برنامه رایگان Flinto viewer را روی تلفن iOS نصب کنید:
درس ها Lessons
-
پروژه Project
-
پیوند و انتشار به HTML Linking & Publishing to HTML
-
ابزار و مراحل Tools & Steps
-
Axure Recap Axure Recap
-
کشف، تعریف، طراحی Discovery, Definition, Design
-
معرفی Axure Intro to Axure
-
بسته شدن Wrap Up
-
اتصال نقشه سایت شما Connecting Your Sitemap
-
انتقال ها Transitions
-
وایرفریمینگ Wireframing
-
موبایل به عنوان یک رسانه Mobile as a Medium
-
نقشه سایت Sitemap
-
عناصر طراحی Design Elements
-
ایده بزرگ The Big Idea
-
خوش آمدی Welcome
-
جریان Flow
-
برنامه تمام شده Finished App
-
عملکرد Functionality
-
معرفی فلینتو Flinto Intro
-
صادرات به تلفن شما Exporting to Your Phone
-
اندازه و وضوح صفحه نمایش Screen Size & Resolution
https://donyad.com/d/e8b7e9
Ronnie Peters
موسس و مدیرعامل 360 Design
رونی پیترز یک استراتژیست و طراح دیجیتال است که با طیف وسیعی از مشتریان، از استارت آپ ها گرفته تا برخی از بزرگترین برندهای جهان کار می کند. او بنیانگذار و مدیر عامل 360 Design، یک شرکت طراحی دیجیتال و نوآوری است که به ادغام یکپارچه تجربه تعاملی و برند اختصاص دارد. نتایج کار این شرکت ها در طراحی وب سایت ها، برنامه های تلفن همراه، رسانه های اجتماعی و راه حل های استراتژی دیجیتال برای شرکت هایی مانند American Express، Merrill Lynch، Accenture، Time Warner، The New York Times، Office Depot، HP، Turner Broadcasting، SAP، McGraw است. هیل، اسکولاستیک، و UBS به نام چند. این شرکت با برندها همکاری می‌کند تا راه‌حل‌های دیجیتالی نوآورانه ایجاد کند که بر اهداف تجاری، یکپارچه‌سازی فناوری، و روح برند تمرکز دارد و در عین حال مشتری/کاربر را در مرکز فرآیند طراحی قرار می‌دهد.
نمایش نظرات