راهنمای حرفه ای برای طراحی UI

نویسنده: Randy Alexander
تاریخ ایجاد: 25 ماه آوریل 2021
تاریخ به روزرسانی: 16 ممکن است 2024
Anonim
آموزش UI/UX - طراحی رابط کاربری را از صفر چطور و از کجا یاد بگیریم؟
ویدیو: آموزش UI/UX - طراحی رابط کاربری را از صفر چطور و از کجا یاد بگیریم؟

محتوا

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

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

من کار نمایندگی خود را ترک کردم و شرکت خودم را تأسیس کردم. در صفحه LinkedIn من سعی کردم هدف جدید شغلی خود را خلاصه کنم: ایجاد بهترین نرم افزار ممکن. چهار سال از شروع کار من به عنوان یک فریلنسر می گذرد و سفر من متوقف نشده است. این روزها به من کمک می کند یک شرکت طراحی UI کوچک بنام مونونوکلئوز. ما اخیراً از عضو تیم چهارم خود استقبال کردیم.


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

یک طراح UI چه کاری انجام می دهد؟

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

ارتباط با مشتری

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


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

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

ترکیب روش های ارتباط همزمان و ناهمزمان مفید است. اگر به سرعت به اطلاعات زیادی نیاز دارید ، تماس عالی است ، اما باید همزمان باشید. ما Slack را به عنوان "کولر آبی مجازی" خود تصور می کنیم و از Basecamp برای مدیریت پروژه های پیچیده طراحی استفاده می کنیم. وقتی ما با استفاده از HTML و CSS نمونه های اولیه را طراحی می کنیم ، از GitHub Issues برای بحث مستقیم درمورد کد استفاده می کنیم.


پژوهش

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

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

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

طراحی و نمونه سازی اولیه

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

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

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

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

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

ابزارها یک انتخاب کاملاً شخصی هستند. تا زمانی که بتوانیم به راحتی با هم کار کنیم ، همه در انتخاب خود آزاد هستند. برای اینکه صحبت در مورد طرح هایمان با مشتری ساده تر شود ، نمونه های اولیه را با InVision می سازیم. برای نمونه سازی پیشرفته تر ، از HTML و CSS استفاده می کنیم. ابزاری که به همه آن نیاز دارید به شغلی که می خواهید با آن انجام دهید بستگی دارد.

ارتباطات توسعه دهنده

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

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

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

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

وب در مقابل برنامه های بومی

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

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

چند راهنمای UI برای وب وجود دارد. ممکن است استدلال کنید وب یک گلدان ذوب شده از سبک های مختلف است. اگر چیزی را ایجاد می کنید که بیشتر شبیه یک برنامه باشد تا وب سایت ، باید در مورد چارچوب های پرکاربرد مانند Bootstrap و ZURB Foundation بدانید. این چارچوب شروع به تعیین چگونگی شکل ظاهری می کند ، زیرا شما نمی خواهید چرخ را دوباره اختراع کنید. و این احتمالاً چیز خوبی است.

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

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

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

محدودیت های وب

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

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

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

مهارت های خود را بهبود ببخشید

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

دانش بستر های نرم افزاری

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

احساس می کنم فقط در صورتی می توانید چیزی را درک کنید که خودتان از آن استفاده کنید. من ترجیح می دهم از Mac خود برای طراحی استفاده کنم ، اما زمان زیادی را صرف پیشرفت در سیستم عامل های مختلف می کنم. من چندین نسخه از ویندوز به عنوان ماشین مجازی روی Mac خود نصب کرده ام. من مشغول تست ساخت نسخه های جدید ویندوز 10 با استفاده از Microsoft's Insider Program برای بررسی تغییرات مختلف در رابط کاربری بوده ام.

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

علاوه بر این ، وب می تواند به عنوان سیستم عامل خود دیده شود. این به طور مداوم در حال تکامل است ، با ویژگی های جدید هر هفته به هر فروشنده مرورگر اضافه می شود. بسیار ارزشمند است که از جنبه های فنی مرورگرها ، به ویژه در مورد CSS و توانایی های گرافیکی مطلع شوید. شما باید بدانید SVG و WebGL چیست و چگونه می توانید از Web Animations API استفاده کنید.

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

بازگشت به اصول

آنچه امروز با آن دست و پنجه نرم می کنیم با آنچه 20 سال پیش با آن دست و پنجه نرم می کردیم تفاوت چندانی ندارد. یک مقدار توصیه خوب در کتابها وجود دارد. برای مبتدیان طراحی دفاعی برای وب توسط جیسون فرید و متیو لیندرمن و Don’t Make Me Think by Steve Krug را برای مبتدیان امتحان کنید.

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

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

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

بازی ها همچنین می توانند روندها را نشان دهند. مینیمالیسم موجود در منوهای Colin McRae Rally جهت گیری iOS7 را به من یادآوری می کند. به نوعی ، طراحی انیمیشن UI که اکنون مرسوم است ، سالها و سالها پیش در بازیها ظاهر می شد. حرکت از اسکوئومورفیسم به رابط های کاربردی برهنه و "طراحی مسطح" در بازی ها نیز مشهود بوده است. مقایسه 2006’s Oblivion با Skyrim 2011. هر دو بازی RPG در یک سری هستند ، اما تفاوت قابل توجه است.

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

شما به عنوان یک طراح با سخت کوشی ، پشتکار ، صحبت با همسالان خود و خواندن مطالب بسیار افتضاح رشد می کنید. حدود یک سال پیش قطعه ای را در نیویورک تایمز خواندم در مورد افرادی که تقریباً 80 سال دارند و به کار خود ادامه می دهند. احساس می کنم فقط شروع کرده ام. تو چطور؟

نشریات تازه
ویرایش ویدئو macOS: نرم افزار مناسب Mac خود را در سال 2021 دریافت کنید
خواندن

ویرایش ویدئو macOS: نرم افزار مناسب Mac خود را در سال 2021 دریافت کنید

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

چرا چاپگرها باید از این بسته مراقب باشند

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

طراحی مجدد: همه 50 پرچم ایالت آمریکا

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