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

01 จาก 07

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

เมื่อ 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

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

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

03 จาก 07

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

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

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

• จำนวนเงินที่เบลอ: ปรับความคมชัดของภาพใต้ภาพ ค่าสูงสุดคือ +50
• ความสว่าง: ปรับไฮไลต์และเงาในภาพ ค่าต่ำสุดคือ -50 และค่าสูงสุดคือ +50
• ความทึบ: ส่งผลต่อความโปร่งใสของรูปร่างและการมองเห็นของภาพภายใต้รูปร่าง ค่ามีตั้งแต่ 0 ถึง 100%

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

04 จาก 07

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

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

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

05 จาก 07

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

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

1. คุณเริ่มต้นด้วยภาพและวงกลมหรือรูปร่างอื่น ๆ บน artboard คุณสามารถเติมวงกลมด้วยสีใดก็ได้ สิ่งที่คุณไม่จำเป็นต้องทำคือการเพิ่มสีเส้น มันจะหายไปเมื่อคุณสร้างผลกระทบดังนั้นทำไมต้องรำคาญ ถ้าคุณต้องการที่จะกระตุ้นวงกลมให้คัดลอกไปยังคลิปบอร์ด
2. เลื่อนวงกลมไปยังภาพและเลือกทั้งภาพและวงกลม เมื่อเลือกวัตถุ ธ ปท. เลือก Object> Mask with Shape. เมื่อคุณปล่อยเมาส์ 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

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

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