Adobe Tricks เคล็ดลับและเทคนิคการออกแบบ

01 จาก 07

Adobe Tricks เคล็ดลับและเทคนิคการออกแบบ

Adobe Experience Design นำเสนอคุณลักษณะด้านกราฟิกจำนวนมากที่ช่วยให้ความคิดสร้างสรรค์ของคุณหลวม

เมื่อ Adob ​​e การนำเสนอ การออกแบบประสบการณ์เป็นตัวอย่างสาธารณะ บริษัท ประสบความสำเร็จสองงานที่น่าตื่นตาตื่นใจค่อนข้างในเวลาเดียวกัน ประการแรกพวกเขาวางพื้นที่ในตลาดซอฟท์แวร์ต้นแบบที่เกิดขึ้นใหม่ ประการที่สองพวกเขาสร้างโอกาสให้ผู้ใช้เล่นกับ "งานระหว่างดำเนินการ" และช่วยให้ผู้ใช้มีอิทธิพลต่อความคืบหน้าดังกล่าว ขณะนี้แอปพลิเคชันใช้งานได้ไม่กี่เดือนแล้วฉันคิดว่าน่าจะเป็นช่วงเวลาที่ดีในการแชร์เทคนิคและเคล็ดลับในการออกแบบประสบการณ์การใช้งาน

แต่ก่อนอื่นคุณอาจสงสัยว่าซอฟต์แวร์ Prototyping มีความหมายอะไรบ้าง ในบรรดาผู้เล่นหลักในพื้นที่นี้ ได้แก่ Proto.io Principle, UXPin, Atomic.io , Experience Design และ InVision ไม่เหมือนแอพพลิเคชันเช่น Sketch 3, Photoshop และ Illustrator ที่มีการออกแบบแบบสถิตบรรณาธิการกราฟิกเหล่านี้แนะนำการโต้ตอบการเคลื่อนไหวและคุณสมบัติอื่น ๆ ที่พบได้ทั่วไปในพื้นที่ออกแบบและการออกแบบเว็บในปัจจุบัน

ด้วยการเพิ่มขึ้นของโทรศัพท์มือถือและสิ่งที่หลีกเลี่ยงไม่ได้เช่นเดียวกับการใช้เลเซอร์เหมือนกับผู้ใช้จะไม่เพียงพอสำหรับนักออกแบบที่จะชักสเก็ตช์สองสามชิ้นดึงมารวมกันไม่กี่รุ่นแล้วปล่อยโปรเจคหรืออัปโหลดไปยังเว็บเซิร์ฟเวอร์ เวิร์กโฟลว์ UI / UX มีการเปลี่ยนแปลงสิ่งพื้นฐาน ทุกขั้นตอนของกระบวนการตั้งแต่การระบุผู้ใช้สเก็ตช์ wireframes mockups และการสร้างต้นแบบจะอยู่ภายใต้การทดสอบของผู้ใช้อย่างกว้างขวาง

เป็นขั้นตอนสุดท้าย - การสร้างต้นแบบ - จุดเจ็บปวดที่ถูกค้นพบและแก้ไขก่อนที่โครงการจะย้ายไปสู่การผลิตขั้นสุดท้าย นี่คือที่ที่การโต้ตอบการเคลื่อนไหวการเปลี่ยนหน้าจอและการวางตำแหน่งของทุกสิ่งทุกอย่างบนหน้าจอมีความสำคัญมาก ปัญหาและปัญหาไม่สามารถแสดงเป็นภาพนิ่งหรืออธิบายด้วยวาจาได้ หลังจากที่ทุกผลิตภัณฑ์เหล่านี้สำหรับมนุษย์ที่แท้จริง แทนที่จะย้ายทั้งหมดที่รหัส, กระบวนการสร้างต้นแบบจะขึ้นโดยมีการดำเนินการโดยซอฟต์แวร์กราฟิกที่ออกแบบมาเพียงเพื่อวัตถุประสงค์ที่ การแก้ไขภาพผิดพลาดแทนที่ภาพเขียนข้อความย้ายปุ่มและอื่น ๆ โดยใช้โปรแกรมแก้ไขภาพมากกว่าการเขียนโค้ดและแก้จุดบกพร่องตลอดเวลา

ในความเป็นจริงซอฟต์แวร์นี้ได้กลายเป็นองค์ประกอบหลักในการออกแบบและพัฒนาสภาพแวดล้อมแบบ "Rapid Prototyping" ในปัจจุบัน

ด้วยเหตุนี้เราจึงสนุกกับการออกแบบประสบการณ์

02 จาก 07

สร้าง Pin ปลายทางด้วย Circle ง่ายๆใน Adobe Design Experience

การออกแบบเวกเตอร์ของ Experience Design ช่วยให้การสร้างองค์ประกอบของไอคอนและอินเทอร์เฟซเป็นเรื่องง่าย

ด้านหนึ่งที่เรียบง่ายของ XD คือการใช้เครื่องมือวาดภาพแบบเวกเตอร์ ไม่พบไอคอนหรือไม่? ไม่มีปัญหา. ม้วนของคุณเอง นี่คือวิธี:

  1. เลือก เครื่องมือวงรี และกดปุ่ม Option / Alt-Shift แล้ววาดวงกลม
  2. เมื่อเลือกวงกลมให้ตั้งค่า Fill color เป็น FF0000 และ Border เป็น "none" ใน properties
  3. ดับเบิลคลิกวงกลมเพื่อแสดงจุดยึด ลากจุดยึดด้านล่างลง
  4. คลิกสองครั้ง Anchor Point ที่เลือกและเส้นโค้งจะถูกแทนที่ด้วยเส้น
  5. วาดวงกลมเล็ก ๆ สีขาวและไม่มีสโต๊ค เลื่อนไปที่ตำแหน่งและเลือกพินและวงกลม ในแถบ Align ที่ด้านบนสุดของ Properties คลิกที่ปุ่ม Horizontal Center และสร้าง Pin ขึ้น

03 จาก 07

สร้างพื้นหลังเบลอในการออกแบบประสบการณ์ของ Adobe

สร้างภาพพื้นหลังเบลอใน XD โดยใช้อะไรมากไปกว่ารูปร่างและภาพ /

เป็นเรื่องปกติที่จะมีข้อความหรือเนื้อหาอื่น ๆ เหนือภาพพื้นหลัง ปัญหาที่เกิดขึ้นคือภาพที่ได้รับความนิยมมากเกินกว่าเนื้อหา วิธีหนึ่งในการแก้ปัญหานี้คือทำให้ภาพพื้นหลังเบลอ คุณสามารถทำให้ภาพเบลอใน Photoshop หรือซอฟต์แวร์การแก้ไขภาพอื่น ๆ ได้ แต่ก็ค่อนข้างไม่มีประสิทธิภาพโดยเฉพาะตั้งแต่ XD สามารถจัดการงานนี้ให้กับคุณได้ นี่คือวิธี:

  1. สร้าง ArtBox ใหม่และเพิ่มภาพพื้นหลังของคุณ
  2. เลือกเครื่องมือสี่เหลี่ยมผืนผ้า และวาดสี่เหลี่ยมผืนผ้าเหนือรูปภาพ ด้วยสี่เหลี่ยมผืนผ้าที่เลือกให้ตั้งค่า Fill to White และ Stroke ไปเป็น None
  3. เมื่อเลือกสี่เหลี่ยมผืนผ้าให้ เลือก Background Blur ในแผงคุณสมบัติ แถบเลื่อนสามตัวคือ Blur Amount ความสว่างและความทึบ นี่คือสิ่งที่พวกเขาทำ:

หากคุณต้องการ "เปลี่ยนสิ่งต่างๆ" ให้เปลี่ยนสีของรูปร่างและเล่นด้วยค่าความทึบเพื่อเปลี่ยนรูปลักษณ์ของภาพ

04 จาก 07

สร้าง Scrim ในการออกแบบประสบการณ์ของ Adobe

ใช้การไล่ระดับสีเพื่อป้องกันความคมชัดเมื่อภาพและสีเข้าสู่ส่วนติดต่อ

ปัญหาการออกแบบทั่วไปคือองค์ประกอบขององค์ประกอบของอินเทอร์เฟซต้องเป็นสีทั่วไป แต่จะหายไปเมื่อวางไว้เหนือภาพพื้นหลังหรือสีทึบ การแก้ปัญหาคือ scrim Scrim คือการไล่ระดับสีที่ค่อนข้างทึบระหว่างองค์ประกอบอินเทอร์เฟซกับพื้นหลัง นี่เป็นเรื่องง่ายที่จะประสบความสำเร็จใน XD นี่คือวิธี:

  1. สร้างอาร์ตเวิร์กในรูปแบบ XD เพิ่มรูปภาพคัดลอกและวางองค์ประกอบของอินเทอร์เฟซจาก UI Kit - File> Open UI Kit ... - ลงใน Artboard ในภาพด้านบนรูปภาพทำให้แถบสถานะและแถบ App ดูยาก
  2. เลือกเครื่องมือสี่เหลี่ยมผืนผ้า และวาดสี่เหลี่ยมผืนผ้า ใน Properties Panel ให้เลือก Fill และเลือก Gradient จากเมนูป็อปอัพในเครื่องเลือกสี ตั้งค่าสีไล่ระดับเป็นขาวดำ ตั้งค่า A - Opacity - ถึง 60% และ White A เป็น 0%
  3. เลือกสี่เหลี่ยมผืนผ้า เลือกวัตถุ> จัดเรียง> ส่งย้อนกลับ ขณะนี้องค์ประกอบอินเตอร์เฟซสามารถมองเห็นได้เหนือภาพ

05 จาก 07

สร้าง Avatar Avatar ใน Adobe Experience Design

ความสามารถในการสร้างหน้ากากและแก้ไขในการออกแบบประสบการณ์เป็นประหยัดเวลามาก

รูปแบบการออกแบบทั่วไปพบในแอปแชทที่ซึ่งผู้คนพูดคุยกันและภาพของลำโพงจะปรากฏขึ้นบนหน้าจอ อวตารเหล่านี้มักเป็นภาพที่ได้รับการสวมหน้ากาก ทำได้ง่ายๆใน XD นี่คือวิธี:

  1. คุณเริ่มต้นด้วยภาพและวงกลมหรือรูปร่างอื่น ๆ บน artboard คุณสามารถเติมวงกลมด้วยสีใดก็ได้ สิ่งที่คุณไม่จำเป็นต้องทำคือการเพิ่มสีเส้น มันจะหายไปเมื่อคุณสร้างผลกระทบดังนั้นทำไมต้องรำคาญ ถ้าคุณต้องการที่จะกระตุ้นวงกลมให้คัดลอกไปยังคลิปบอร์ด
  2. เลื่อนวงกลมไปยังภาพและเลือกทั้งภาพและวงกลม เมื่อเลือกวัตถุ ธ ปท. ให้ เลือกวัตถุ> มาสก์กับรูป เมื่อคุณปล่อยเมาส์ Avatar จะถูกสร้างขึ้น จากนั้นคุณสามารถปรับขนาดได้
  3. หากต้องการเพิ่มจังหวะให้วางวงกลมที่อยู่ในคลิปบอร์ดของคุณลงบนอาร์ตเวิร์ก ด้วยสำเนาที่เลือกให้ปิดการเติมข้อมูลในคุณสมบัติและเพิ่มสีและความกว้างของเส้น ให้เลือกวัตถุทั้งสองและคลิกปุ่ม Center Align ใน Align options ที่ด้านบนของแผงคุณสมบัติ
  4. ถ้าคุณต้องการย้ายภาพรอบ ๆ ในหน้ากากให้ ดับเบิลคลิกที่หน้ากาก ซึ่งจะแสดงภาพและรูปร่างหน้ากาก คลิกที่รูปและลากเข้าที่ เมื่อคุณปล่อยเมาส์ภาพจะอยู่ในตำแหน่งใหม่ภายในหน้ากาก

06 จาก 07

เล่นด้วย Artboards ออกแบบประสบการณ์ Adobe

การวางแนว, สีที่กำหนดเองและการเลื่อนแนวตั้งเป็นคุณสมบัติที่ค่อนข้างเรียบร้อย

Artwork การออกแบบประสบการณ์ไม่ได้มีไว้เพื่อให้คุณวางเนื้อหาเท่านั้น พวกเขาก็สามารถจัดการได้ นี่คือสองสิ่งที่คุณสามารถทำได้:

  1. ถ้าคุณต้องการภาพพื้นหลังและแนวตั้งของอาร์ตเวิร์กให้ทำซ้ำอาร์ตบอร์ดและเลือกที่ซ้ำกันให้คลิกปุ่มแนวนอนในแผงควบคุมคุณสมบัติ Artboard จะเปลี่ยนเป็นแนวนอน หาก Artboard มีเนื้อหาอยู่ให้คลิกที่ชื่อ Artboard และคุณสมบัติ Artboard จะปรากฏใน Properties Panel
  2. ในการเพิ่มสีที่กำหนดเองลงใน Artboard และโครงการสำหรับเรื่องนั้นให้เลือก Artboard แล้วคลิกที่เติมสีชิปในส่วน Appearance ของ Properties Panel ป้อนค่าฐานสิบหกของสีและคลิกเครื่องหมาย + สีจะถูกเพิ่มเป็นสีที่กำหนดเอง หากต้องการใช้สีนั้นที่อื่นให้เลือกวัตถุและคลิกชิปสีที่กำหนดเองเพื่อใช้สี
  3. สามารถจัดทำ Artboards ได้ในแนวตั้ง เมื่อต้องการทำเช่นนี้ให้เลือก artboard และเปลี่ยนความสูงทั้งในแผงควบคุมคุณสมบัติหรือโดยการลากส่วนล่างของอาร์ตเวิร์ลลง ในพื้นที่เลื่อนของแผงคุณสมบัติเลือกแนวตั้งจากเมนูป็อปอัพและป้อนความสูงของวิวพอร์ตสำหรับหน้าจอ เส้นสีน้ำเงินเส้นประแสดงด้านล่างของวิวพอร์ต หากต้องการทดสอบให้คลิกปุ่มเล่นและเลื่อนออกไป หากต้องการปิดการเลื่อนให้เลือกไม่มีในเมนูแบบเลื่อนลง

07 จาก 07

แก้ไขชุด UI บนอุปกรณ์เคลื่อนที่ใน Adobe Experience Design

UI Kits สามารถแก้ไขได้ทั้งหมด

Experience Design ประกอบด้วยชุด UI สำหรับการพัฒนา iOS, Android และ Windows UI เมื่อคุณเปิดไฟล์เหล่านี้เป็นครั้งแรกคุณอาจคิดว่ามีการตั้งค่าไว้ที่ดี ไม่มากทีละชิ้นและชิ้นส่วนในชุดเหล่านั้นสามารถแก้ไขได้อย่างเต็มที่ ลองค้นหาโดยการสร้างโครงข่ายแบบแอนดรอยด์

  1. คุณเริ่มต้นด้วยการเลือกเครื่องมือ Artboard และเลือก Android Mobile ในส่วนของ Google ในแผงควบคุมคุณสมบัติ
  2. เลือกไฟล์> เปิด UI Kit> Google Material ซึ่งจะเปิด Material Kit UI การออกแบบ เลือกแว่นขยายและปะรำแผง หน้าจอคู่มือผู้ ใช้ ฉันชอบที่จะเริ่มต้นด้วยเรื่องนี้เนื่องจากจะให้คำแนะนำสำหรับการวางตำแหน่งบนหน้าจอที่เหมาะสมสำหรับองค์ประกอบอินเทอร์เฟซ หากคุณคลิกแถบสีน้ำเงินใดสีหนึ่งคุณจะเห็นว่ามีการล็อก คลิกล็อคที่แนบมากับแต่ละไฟล์เพื่อปลดล็อก วาดภาพอาร์ตบอร์ดและคัดลอกส่วนที่เลือกลงในคลิปบอร์ด กลับไปที่เอกสารของคุณและวางหน้าจอลงในอาร์ตเวิร์กของคุณ
  3. คลิกครั้งเดียวบนแถบ App ที่ด้านบนของ artboard แจ้งให้ทราบว่าคุณสามารถเลือกได้อย่างไร เลือกออบเจกต์> จัดเรียง> นำไปด้านหน้า ตอนนี้การเลือกของคุณอยู่เหนือ Screen Guides แล้ว นี่ควรบอกให้คุณทราบว่าองค์ประกอบแต่ละอย่างบนหน้าจอสามารถแก้ไขได้
  4. ดับเบิลคลิกที่ Status Bar ที่ด้านบนและใน Properties Panel และเติมสีให้เป็น 455A64 ดับเบิลคลิกที่แถบ App และตั้งค่าการเติมเป็น 607D8B ควรบอกให้คุณทราบองค์ประกอบต่างๆในชุด UI ที่สามารถแก้ไขเพื่อให้เป็นไปตามข้อกำหนดสีของโครงการ
  5. สิ่งที่เกี่ยวกับไอคอน? นี่คือวิธีการเปลี่ยนสีของพวกเขา ดับเบิลคลิกที่หัวใจ เพื่อเลือก หากคุณดูที่ Properties Panel คุณอาจถือว่าคุณไม่สามารถแก้ไขการเลือกได้ ไม่ค่อย ดับเบิลคลิกที่หัวใจอีกครั้ง คุณสมบัติเปิดและคุณเปลี่ยนสีเติมเป็น FF0000 ทำซ้ำเคล็ดลับดับเบิลคลิกสองครั้งนี้สำหรับไอคอนที่เหลือและข้อความ