Blog

راهنمای طراحی اپلیکیشن

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

مقدمه

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

لوازم مورد نیاز برای طراحی یک اپ

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

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

پس لوازم مورد نیاز:

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

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

– نوع قلم آن‌چنان مهم نیست اما قلم‌هایی به اسم راپید وجود دارند که اگر بتوانید یکی از مارک‌های شناخته شده‌اش را تهیه کنید، کارتان چند برابر ساده تر می‌شود

– اپلیکیشن‌های نوت برداری، ایده گرفتن، به اشتراک‌گذاری و اسکن را به‌ هیچ‌وجه فراموش نکنید

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

شروع طراحی یک اپ

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

ui-sketch_1x
hres_radio_app_sketch_-_roman_jusdado_1x
dsc_2928

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

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

از نظر من طراحی تخت، آینده طراحی محسوب می‌شود چرا که نه تنها زیبایی خاصی را درون خود جاداده است بلکه سادگی بیش از حدش، کار با اپ‌ها را چندین برابر ساده تر و دلچسب تر کرده است. برای مثال، اپلیکیشن های  Vine و Brit+Co (نسخه ویندوزفون) را مثال می‌زنم که جزو اپ‌های مورد علاقه من در زمینه طراحی هستند و هرازگاهی که اپی را برای نمونه پیشنهاد می‌کنم، این اپ‌ها در صدر قرار دارند:

1

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

2

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

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

پیش از آنکه به سراغ ادامه مقاله برویم پیشنهاد میکنم چند طرح آماده از اپلیکیشن ‌هارا مشاهده کنیم:

1
2

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

3
4

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

5

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

Ftou-Ftou-Ftou-by-Lefteris-Papadeas1
iPhone-App-by-Alessandra-Monaco

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

5
4
8

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

پیشنهاد من این است که برای طراحی آیکون هم دوباره به سراغ دفترتان بروید و شروع به اسکچ‌کشی کنید. برای کشیدن اسکچ هم به چند مورد زیر حتما توجه کنید:

6.-iconset-hd
7.-postachio-icons

– موضوع اپ شما، نقش اصلی را در طراحی آیکون ایفا می‌کند پس حتما مطابق کاربرد اپتان طراحی‌اش کنید

– طبیعت بهترین منبع الهام شما برای طراحی آیکون است. مثلا اگر در پی طراحی آیکون برای اپ هواشناسی هستید، مواردی همچون قطره‌های باران، ابر و خورشید و غیره بهترین منبع طراحی آیکون هستند و با کمی خلاقیت می‌توانید به سادگی به طرح آیکون مورد نظرتان برسید

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

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

51
121
131

توجه مهم :

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

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


 توجه به ذائقه‌ی مردم ایران

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

ra
hava
pp
wn
yn
taa
/ آموزش

Comments

No comment yet.

Leave a Reply

Your email address will not be published. Required fields are marked *