نکات و تکنیک های طراحی تجربه Adobe

01 از 07

نکات و تکنیک های طراحی تجربه Adobe

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

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

اما اولا شما ممکن است بدانید که چه چیزی توسط نرم افزار نمونه سازی استفاده می شود. در میان بازیکنان اصلی در این فضا عبارتند از Proto.io، Principle، UXPin، Atomic.io ، Design Experience و InVision. بر خلاف برنامه هایی مانند Sketch 3، فتوشاپ و Illustrator که در آن طرح های استاتیک تولید می شوند، این ویراستاران گرافیکی تعامل، حرکت و دیگر ویژگی های رایج در فضای وب و تلفن همراه امروز را معرفی می کنند.

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

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

در واقع، این نرم افزار تبدیل شده است جزء کلیدی در طراحی و توسعه سریع "Prototyping" محیط زیست.

با این گفتن، اجازه دهید کمی با تجربه طراحی کنیم.

02 از 07

ایجاد پین مقصد با یک دایره ساده در طراحی تجربه Adobe

قابلیت های بردار طراحی تجربه، ایجاد آیکون و ایجاد عنصر رابط نسیم است.

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

  1. ابزار Ellipse را انتخاب کنید و با فشار دادن کلید Option / Alt-Shift یک دایره را بکشید.
  2. با انتخاب دایره، رنگ Fill را به FF0000 و مرز را به "none" در خواص تنظیم کنید.
  3. دایره را دوبار کلیک کنید تا نقاط لنگر را نشان دهید. پایین لنگر پایین را بکشید
  4. دوبار کلیک بر لنچ انتخاب شده و منحنی ها با خطوط جایگزین می شوند.
  5. یک دایره کوچک دیگر را با یک پرپشت سفید و یک قاشق زدن بکشید. آن را به موقعیت منتقل کنید و پین و دایره را انتخاب کنید. در پانل هماهنگی در بالای صفحه Properties، دکمه مرکز افقی را کلیک کنید و پین ایجاد می شود.

03 از 07

ایجاد جلوه تاریکی در طراحی تجربه Adobe

ایجاد یک پس زمینه تاری در XD با استفاده از چیزی بیش از یک شکل و یک تصویر /.

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

  1. یک صفحه جدید ایجاد کنید و تصویر پسزمینه خود را اضافه کنید.
  2. یک ابزار مستطیل را انتخاب کنید و یک مستطیل روی تصویر بکشید. با استفاده از مستطیل انتخاب شده، Fill to White و Stroke to None را تنظیم کنید.
  3. با انتخاب مستطیل انتخاب کنید ، Background Blur را در پانل Properties انتخاب کنید. سه لغزنده Blur Amount، Brightness و Opacity است. در اینجا چیزی است که آنها انجام می دهند:

اگر واقعا میخواهید «چیزها را تغییر دهید»، رنگ شکل را عوض کنید و با Opacity را بازی کنید تا «تصویر» تصویر را تغییر دهید.

04 از 07

ایجاد یک Scrim در طراحی تجربه Adobe

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

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

  1. صفحهنمایش خود را در XD ایجاد کنید، یک تصویر را اضافه کنید و عناصر رابط را از کیت UI مناسب - فایل> باز کردن UI Kit ... - به داخل آیتم بکشید. در تصویر بالا عکس باعث می شود نوار وضعیت و نوار برنامه دشوار برای دیدن.
  2. ابزار مستطیل را انتخاب کنید و مستطیل بکشید. در پانل Properties گزینه Fill را انتخاب کنید و Gradient را از پاپ آپ در Color Picker انتخاب کنید. رنگ های شیب را به سیاه و سفید تنظیم کنید. مقدار A - Opacity را به 60٪ و مقدار White A را به 0٪ تنظیم کنید.
  3. با انتخاب مستطیل، Object> Arrange> Send Backward را انتخاب کنید . عناصر رابط در حال حاضر بر روی تصویر قابل مشاهده است.

05 از 07

یک آواتار تصویری در طراحی تجربه Adobe ایجاد کنید

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

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

  1. شما با یک تصویر و یک دایره یا شکل دیگر در صفحه شروع می کنید. شما می توانید دایره را با هر رنگ پر کنید. چیزی که لازم نیست انجام دهید افزودن یک رنگ سکته است. هنگامی که اثر ایجاد می کنید، آن را ناپدید می شود، پس چرا زحمت کشیده ای. اگر نیاز دارید که دایره را اختراع کنید، آن را به کلیپ بورد کپی کنید.
  2. دایره را به سمت تصویر حرکت دهید و هر دو تصویر و دایره را انتخاب کنید. با اشیاء ربات انتخاب شده، Object> Mask with Shape را انتخاب کنید . هنگامی که موس را آزاد میکنید، Avatar ایجاد شده است. از آنجا می توانید آن را تغییر دهید.
  3. اگر شما نیاز به اضافه کردن سکته مغزی دارید، حلقه را که روی کلیپ بوردتان نشسته است روی آن قرار دهید. با کپی انتخاب شده، خواص را پر کنید و رنگ و عرض سکته را اضافه کنید. برای خطاب کردن آنها، هر دو اشیا را انتخاب کرده و بر روی دکمه Center Align در گزینه Align در بالای صفحه ویژگی ها کلیک کنید.
  4. اگر می خواهید عکس را در قسمت ماسک حرکت دهید، روی ماسک دوبار کلیک کنید. این تصویر و شکل ماسک را نشان می دهد. بر روی تصویر کلیک کنید و آن را به موقعیت بکشید. وقتی موشواره را آزاد میکنید، تصویر در موقعیت جدید خود در داخل ماسک قرار خواهد گرفت.

06 از 07

با Adobe Art Design Artboards بازی کنید

جهت گیری، رنگ های سفارشی و پیمایش عمودی، ویژگی های منحصر به فرد آن است.

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

  1. اگر شما نیاز به نسخه های Landscape و Portrait از یک Artboard داشته باشید، منبعی را کپی کنید و با انتخاب تکراری، روی دکمه چشم انداز در پانل Properties کلیک کنید. Artboard به جهت گیری چشم انداز تغییر خواهد کرد. اگر Artboard دارای محتوای آن باشد، روی نام Artboard کلیک کنید و Properties Artboard در پنل Properties ظاهر می شود.
  2. برای اضافه کردن یک رنگ سفارشی به Artboard، و پروژه برای آن موضوع، Artboard را انتخاب کنید و بر روی تراشه رنگ پر کنید در قسمت ظاهر Panel پنل Properties کلیک کنید. مقدار هگزادسیمال برای رنگ را وارد کنید و علامت + را کلیک کنید. رنگ به عنوان سفارشی رنگ اضافه خواهد شد. برای اعمال این رنگ در جای دیگر، یک شی را انتخاب کرده و بر روی رنگ سفارشی رنگ کلیک کنید تا رنگ را اعمال کنید.
  3. Artboards می تواند به صورت عمودی حرکت کند. برای انجام این کار، منو را انتخاب کنید و ارتفاع آن را در پانل Properties تغییر دهید یا با کشیدن پایین صفحه به سمت پایین. در قسمت Scrollable پانل خواص، از منوی پاپ آپ عمودی را انتخاب کرده و ارتفاع نمایش پورت را برای صفحه نمایش وارد کنید. این خط آبی خطا نشان می دهد که پایین صفحه نمایش است. برای آزمایش آن، بر روی دکمه Play کلیک کنید و حرکت کنید. برای غیرفعال کردن پیمایش، در پیمایش پیمایش پایین هیچ موردی را انتخاب نکنید.

07 از 07

یک کیت UI موبایل را در طراحی ادوبی تجربه ویرایش کنید

کیت UI کاملا قابل ویرایش است.

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

  1. شما با انتخاب ابزار Artboard و انتخاب Android Mobile در بخش Google Panel Panel Properties کلیک کنید .
  2. فایل را انتخاب کنید> باز کردن UI Kit> Google Material را انتخاب کنید . این کیت UI Material Design را باز می کند. Glass Magnifying Glass را انتخاب کنید و صفحه نمایش راهنمای صفحات را انتخاب کنید . من دوست دارم با این یکی شروع کنم زیرا به من راهنمایی می کند که قرار دادن عناصر رابط کاربری روی صفحه نمایش مناسب باشد. اگر بر روی یکی از نوارهای آبی کلیک کنید خواهید دید که قفل شده است. روی قفل متصل به هر یک از آنها کلیک کنید تا آن را باز کنید . تیک بزنید و گزینه را به کلیپ بورد کپی کنید. به سند خود بازگردید و صفحه را به سمت خود بکشید.
  3. یکبار در نوار برنامه کلیک کنید که در بالای صفحه نمایش قرار دارد. توجه کنید که چگونه می توانید آن را انتخاب کنید. انتخاب Object> Arrange> Bring to Front. انتخاب شما اکنون بالای راهنماهای صفحه است. این باید به شما بگوید که هر یک از عناصر روی صفحه قادر به ویرایش است.
  4. دوبار روی نوار وضعیت در بالای صفحه و در پنل Properties کلیک کنید تا رنگ پر شود تا 455A64 . دوبار روی نوار برنامه کلیک کرده و آن را به 607D8B پر کنید. این باید به شما بگوید که هر عنصر در یک کیت UI می تواند برای پاسخ دادن به مشخصات رنگ پروژه مورد ویرایش قرار گیرد.
  5. آیکون ها چه هستند؟ در اینجا نحوه تغییر رنگ آنها وجود دارد. برای انتخاب آن دوبار کلیک کنید. اگر به پنل Properties نگاه می کنید، ممکن است تصور کنید شما نمی توانید انتخاب را ویرایش کنید. نه کاملا. دوبار روی قلب یک بار دیگر کلیک کنید . خواص باز و رنگ پر رنگ را به FF0000 تغییر دهید. این آیکون باقی مانده را برای آیکون های باقی مانده و متن تکرار کنید.