وبلاگ - نکات و ترفندها

1
503
چگونه مانند یک طراح اپلیکیشن فکر کنیم

چگونه مانند یک طراح اپلیکیشن فکر کنیم

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

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

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

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

01-apple-watch-opt-small

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

02-app-mini-web-opt-small

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

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

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

طرز فکر خود را تغییر دهید

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

در اینجا lean UK به کمک ما می آید، راهی برای کار در بازه های زمانی سریع. این راهکار مستلزم تکرار مداوم طراحی و توسعه است، با در ذهن داشتن این موضوع که تا محصول توسط کاربر تست نشود نمی توان از هیچ چیزی اطمینان کامل کسب نمود.

03-lean-ux-opt-small

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

شروع کار از طراحی دیداری گرایشی مرسوم در بین طراحان است که جذاب ترین مرحله به حساب می آید. از آنجا که این راه در حال حاضر تنها راه ممکن برای انجام این کار است پس ما نیز به کار با آن عادت کرده ایم.

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

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

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

04-mobile-first-opt-small

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

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

از افراد دیگر در گروه یاد بگیرید

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

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

05-bottle-neck-opt-small

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

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

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

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

ارزش کار تیمی را درک کنید

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

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

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

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

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

از سیستم عامل های مختلف استفاده کنید

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

06-patterns-opt-small

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

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

07-incorrect-pattern-opt-small

ادامه این کار برای انواع اپلیکیشن ها به شما در درک بهتر و بیشتر موضوع یاری می رساند. گاهی در حین کار توانایی طراحی را از دست می دهم، در این شرایط یک اپلیکشن را در گوشی خود باز کرده و به تحلیل روشی که طراحش اتخاذ کرده می پردازم. اگر به گوشی دسترسی ندارید از وب سایت هایی همچون Pttrns ،Android App Patterns و Windows Phone UI Design Pattherns که شامل تعداد زیادی از مثال ها هستند استفاده کنید.

همه چیز را مدل سازی کنید

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

08-palm-pilot-opt-small

احتمالا تعداد کمی از ما Palm Pilot را به یاد می آورند. یکی از ابتدایی ترین نمونه های اولیه یک تکه چوب به همراه یک برگ کاغذ بر روی آن بود که طرحی چاپ شده از واسط را به نمایش می گذاشت.

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

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

09-pop-opt-small

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

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

هزاران ابزار برای ساخت نمونه اولیه وجود دارند و دراین لینک فهرستی از آنها در اختیار شما قرار گرفته است. در وب سایت یک بررسی کلی از امکانات هر یک از ابزارها قرار داده شده تا به شما در امر تصمیم گیری یاری رساند.

10-prototyping-tools-opt-small

از سوی دیگر توجه داشته باشید که سیستم عامل هایی مثل اندروید با متریال دیزاین خود بیشتر تمرکز خود را بر روی Micro-interactions گذاشته اند که از جمله وظایف طراحان امروزی است. ابزاری مانند Keynote به شما امکان طراحی این قبیل از جزئیات را می دهد.

به آنچه می بینید اعتماد نکنید

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

11-pixate-opt-small

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

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

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

ساده طراحی کنید

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

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

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

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

جلودار باشید

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

یک راه موثر برای کسب اطلاعات ارزشمند در زمینه طراحی مطالعه راهنماهای طراحی رسمی مربوط به آخرین نسخه سیستم عامل ها است. همچنین می توانید از جلوداران صنعت مانند Josh Clark و Luke Wroblewski بیاموزید.

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

12-sketch-ui-opt-small

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

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

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

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

منبع:

http://www.smashingmagazine.com

این نوشته را به گوگل توصیه کنید :

بسته های آموزشی جذاب!بیشتر