เว้นแต่คุณจะหลับไปในช่วงครึ่งแรกของปี 2018 คุณอาจตระหนักดีถึงความคาดหวังที่จะเกิดขึ้นใน ชุมชนการออกแบบเชิงโต้ตอบ นำไปสู่การเปิดตัวไฟล์ InVision Studio แอป InVision เป็นที่รู้จักกันดีในเรื่องของ ชุดปลั๊กอิน Sketch และ Photoshop เช่น Craft และสำหรับการเป็นแพลตฟอร์มสำหรับเปลี่ยนการออกแบบอินเทอร์เฟซแบบคงที่ให้กลายเป็นต้นแบบที่คลิกได้และแชร์ได้อย่างรวดเร็ว เมื่อปีที่แล้วพวกเขาได้ประกาศการพัฒนาซอฟต์แวร์การออกแบบดิจิทัลของตนเองเพื่อแข่งขันกับรายการโปรดของอุตสาหกรรมเช่น ร่าง และ Figma .

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

เนื่องจากนักออกแบบเริ่มหันมาสนใจซอฟต์แวร์มากขึ้นจึงมีบทช่วยสอนและคำแนะนำมากขึ้นเรื่อย ๆ เพื่อแสดงให้เห็นถึงพื้นฐานของเครื่องมือออกแบบอินเทอร์เฟซของแอป InVision ได้สร้างไฟล์ ไม่กี่ของตัวเอง สำหรับผู้ใช้ออนบอร์ดไปจนถึงพื้นฐานของ InVision Studio

แม้ว่าจะมีการเปิดให้ใช้งานก่อนเปิดตัว รับบทวิจารณ์ที่หลากหลาย , Studio มีคุณสมบัติที่น่าสนใจและมีศักยภาพมากมาย บทช่วยสอนนี้มีจุดมุ่งหมายเพื่อนำเสนอผู้ใช้งานในยุคแรก ๆ ผ่านพื้นฐานของการสร้างต้นแบบ InVision Studio และเพิ่มแอนิเมชันต้นแบบพื้นฐาน

สร้างต้นแบบเชิงโต้ตอบพร้อมการเปลี่ยนภาพเคลื่อนไหวที่ลื่นไหลในเวลาไม่นานโดยทำตามพร้อมกับบทช่วยสอน InVision Studio นี้!

การรับรองสถาปนิกโซลูชันบริการเว็บ amazon

ทัวร์นิกเกิลของ InVision Studio Workspace

สตูดิโอส่วนใหญ่น่าจะคุ้นเคย นักออกแบบ UI และใครก็ตามที่ใช้ซอฟต์แวร์ออกแบบดิจิทัลเช่น Sketch พื้นที่ทำงานส่วนใหญ่ยืมตัวชี้นำจาก UI ของ Sketch โดยมีหน้าแผงด้านซ้ายเลเยอร์และกลุ่ม แผงด้านขวาสำหรับผู้ตรวจสอบ และแถบเครื่องมือตามบริบทที่ด้านบน

นอกจากนี้คุณจะพบเครื่องมือเดียวกันมากมายแม้ว่าฟังก์ชันบางอย่างจะมีชื่อแตกต่างกันไป ตัวอย่างเช่น 'สัญลักษณ์' ของ Sketch เรียกว่าคอมโพเนนต์ใน Studio

แผงการโต้ตอบ

สำหรับวัตถุประสงค์ของบทช่วยสอนนี้เราจะมุ่งเน้นไปที่การใช้เครื่องมือโต้ตอบเพื่อสร้างฮอตสปอตแบบโต้ตอบระหว่างหน้าจอและสร้างช่วงการเปลี่ยนภาพที่ราบรื่นระหว่างกัน ความมหัศจรรย์มากมายจะเกิดขึ้นใน“ แผงการโต้ตอบ” ทางด้านขวามือของพื้นที่ทำงาน Studio

วิธีง่ายๆในการสร้างการโต้ตอบคือการเลือกเลเยอร์หรือกลุ่มทริกเกอร์และกด 'c' บนแป้นพิมพ์ (หรือคลิกไอคอนรูปสายฟ้าในแถบเครื่องมือด้านบน) ซึ่งจะเริ่มต้นแส้เลือกสีน้ำเงินเพื่อเลือกหน้าจอปลายทาง จากนั้น Studio จะแจ้งให้ผู้ออกแบบเลือกท่าทางสัมผัสหรืออินพุตของผู้ใช้ที่เรียกใช้เหตุการณ์และเลือกระหว่างชุดการเปลี่ยนที่ตั้งไว้ล่วงหน้าหรือการเปลี่ยน 'การเคลื่อนไหว'

InVision Studio Animation

มีหลายองค์ประกอบในการออกแบบปฏิสัมพันธ์ที่ดี แต่การใช้ การเปลี่ยนภาพเคลื่อนไหว และ microinteractions ในอินเทอร์เฟซผู้ใช้เป็นมากกว่าการแต่งหน้าต่าง

ช่วยเพิ่มความสามารถในการใช้งานและอาจหมายถึงความแตกต่างระหว่างผลิตภัณฑ์อันเป็นที่รักและความสับสนวุ่นวาย

ตลอดบทช่วยสอนนี้เราใช้การผสมผสานระหว่างการเปลี่ยนที่ตั้งไว้ล่วงหน้าและการเปลี่ยนการเคลื่อนไหวเพื่อสร้างต้นแบบแอปของเรา การเปลี่ยนที่ตั้งไว้ล่วงหน้าค่อนข้างตรงไปตรงมาและจะคุ้นเคยกับผู้ใช้ไฟล์ แพลตฟอร์มต้นแบบออนไลน์ของ InVision .

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

สิ่งที่ควรทราบ

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

การเปลี่ยนการเคลื่อนไหวจะทำงานได้ดีที่สุดกับออบเจ็กต์บนอาร์ตบอร์ดที่ทำซ้ำจากที่อื่น คุณลักษณะของภาพเคลื่อนไหวนั้น“ ฉลาด” ที่จะจดจำวัตถุที่ซ้ำกันที่มีชื่อเลเยอร์เดียวกันดังนั้นอย่าลืมลบหรือเปลี่ยนชื่อเลเยอร์หลักระหว่างหน้าจอ (ซึ่งเป็นวิธีที่ง่ายมากในการทำลายภาพเคลื่อนไหวที่ยอดเยี่ยม)

โปรดทราบว่า Studio ยังอยู่ในช่วงวัยเด็กดังนั้น นักออกแบบ ควรเตรียมพร้อมที่จะพบกับข้อบกพร่องที่เป็นธรรม ตัวอย่างเช่นปุ่ม 'ดูตัวอย่าง' จะเปิดการแสดงตัวอย่างแบบโต้ตอบของต้นแบบ แต่ในบางครั้งการโต้ตอบจะไม่ทริกเกอร์เลยซึ่งในกรณีนี้คุณจะต้องบันทึกและเปิดไฟล์อีกครั้ง

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

สุดท้ายก็มักจะช่วยให้เป็นระเบียบ เมื่อสร้างต้นแบบบนแพลตฟอร์มใด ๆ ไม่ว่าจะเป็น Studio หรือ Sketch หรือ Marvel การติดตามวัตถุและป้ายกำกับเลเยอร์จะช่วยประหยัดเวลาและความยุ่งยากโดยเฉพาะอย่างยิ่งหากคุณทำงานกับทีมหรือส่งไฟล์ในบางจุด จดลำดับของเลเยอร์และกลุ่มเลเยอร์เมื่อสร้างการโต้ตอบ สิ่งนี้มักสร้างความแตกต่างอย่างมากในการบรรลุเอฟเฟกต์ภาพเคลื่อนไหวที่ต้องการ

บทช่วยสอน!

เอาล่ะ! หากคุณยังไม่ได้ดำเนินการให้ไปที่ InVision Studio เพื่อดาวน์โหลดแอป Studio เวอร์ชันทดลองใช้ก่อนเปิดตัว เมื่อคุณมี InVision Studio บนคอมพิวเตอร์ของคุณแล้ว ดาวน์โหลดไฟล์การสอนที่นี่ . เมื่อคุณเปิดซอฟต์แวร์ Studio ให้เลือกเปิดไฟล์จากทุกที่ที่คุณบันทึกไว้

ขั้นตอนที่ 1: เปิดไฟล์แล้วดู

ต้นแบบแบบอินเทอร์แอกทีฟนี้จะใช้สำหรับแอปบนอุปกรณ์เคลื่อนที่เกี่ยวกับศิลปินสมัยใหม่ในช่วงปลายศตวรรษที่ 19 ถึงต้นศตวรรษที่ 20 หน้าจอทั้งหมดถูกสร้างขึ้นล่วงหน้าโดยใช้การทำซ้ำอาร์ตบอร์ดอย่างระมัดระวังซึ่งจำเป็นสำหรับการใช้คุณสมบัติการเปลี่ยนการเคลื่อนไหวอย่างเหมาะสม

ลำดับชั้นมีความลึก 3 ระดับเริ่มต้นที่ 'บ้าน' จากนั้นไปที่ประวัติของศิลปินแต่ละคนและสุดท้ายลงไปที่ภาพหมุนของตัวอย่างผลงานของศิลปินสี่ตัวอย่าง คุณจะสังเกตเห็นว่าอาร์ตบอร์ด“ หน้าแรก” มีไอคอนเล็ก ๆ ของบ้านซึ่งกำหนดอาร์ตบอร์ดเริ่มต้นสำหรับต้นแบบ

บทช่วยสอนจะมุ่งเน้นไปที่การสร้างเส้นทางการนำทางอย่างง่ายที่เชื่อมต่อความลึกทั้งสามระดับนี้ เราจะใช้ประโยชน์จากเครื่องมือโต้ตอบและการเปลี่ยนแปลงของ Studio เพื่อทำให้ต้นแบบรู้สึกเหมือนเป็นแอปโต้ตอบที่เหมาะสม

ขั้นตอนที่ 2: เชื่อมต่อ Artist Tile กับ Artist Bio

ไปที่อาร์ตบอร์ดแรก ใช้เวลาสักครู่เพื่อขยายกลุ่มเลเยอร์“ Artist Tile 1” คุณจะสังเกตเห็นกลุ่มที่ซ้อนกันสามกลุ่ม: กลุ่มหนึ่งสำหรับชื่อศิลปินกลุ่มหนึ่งสำหรับรูปภาพเด่นและเลเยอร์ที่สามประกอบด้วย 'ข้อความชีวภาพ'

เมื่อมองไปที่หน้าจออาร์ตบอร์ดกลุ่มเลเยอร์ที่สามจะไม่สามารถมองเห็นได้ในทันทีเนื่องจากวิธีที่ Studio จัดการกับการเปลี่ยนการเคลื่อนไหวซึ่งเราจะไปถึงในอีกสักครู่ เพียงแค่จดบันทึกไว้ในตอนนี้

เลือกกลุ่มเลเยอร์ที่มีองค์ประกอบเหล่านี้ทั้งหมด:“ Artist Tile 1” เมื่อเลือกกลุ่มนี้แล้วให้กด“ c” บนแป้นพิมพ์ของคุณ (หรือคลิกที่ไอคอนรูปสายฟ้าในแถบเครื่องมือด้านบน) เพื่อเริ่มเครื่องมือโต้ตอบ เคอร์เซอร์ของคุณจะตามด้วยแส้สีฟ้าเพื่อเลือกหน้าจอปลายทางสำหรับการโต้ตอบของคุณ

เลือกอาร์ตบอร์ดทางขวาทันทีที่ชื่อว่า 'Artist Bio 1' จากนั้นคุณจะได้รับแจ้งให้เลือกทริกเกอร์และประเภทของการเปลี่ยนแปลง สำหรับทริกเกอร์ให้เลือก 'แตะ' จากนั้นเลือก 'การเคลื่อนไหว' เป็นการเปลี่ยน จากนั้นคุณสามารถเลือกระยะเวลาของการเปลี่ยนแปลงได้ มาตั้งค่าการเปลี่ยนแปลงนี้เป็น 2 วินาทีแล้วกด 'บันทึก'

คลิกปุ่มเล่นเพื่อดูตัวอย่างต้นแบบ คุณเห็นวิธีที่สิ่งต่างๆเคลื่อนที่ไปตามหน้าจอและการที่เลเยอร์ชีวภาพเลื่อนลงมาจากใต้ภาพหรือไม่? ขอแสดงความยินดีคุณได้สร้างการเปลี่ยนแปลงการโต้ตอบที่ลื่นไหลแล้ว!

ขั้นตอนที่ 3: เชื่อมต่อปุ่มย้อนกลับเข้ากับหน้าจอหลัก

ตอนนี้เราควรให้ทางผู้ใช้กลับไปที่หน้าจอหลัก ไปที่อาร์ตบอร์ด“ Artist Bio 1” แล้วเลือกองค์ประกอบ“ btn_back” ที่มุมบนซ้าย สร้างทริกเกอร์ที่นี่โดยกดปุ่ม 'c' แล้วเลือกอาร์ตบอร์ด 'หน้าแรก'

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

ขั้นตอนที่ 4: เชื่อมต่อแกลเลอรี

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

เราต้องการใช้การเปลี่ยนการเคลื่อนไหวที่เป็นระเบียบมากขึ้นอีกครั้งเพื่อเปิดแกลเลอรีภาพแบบหมุน อาร์ตบอร์ดที่มีชื่อว่า“ Artist 1 - Image 1” มีองค์ประกอบที่ซ้ำกันจากอาร์ตบอร์ด“ Artist Bio 1” โดยปรับขนาดใหม่เพื่อแสดงรูปภาพตัวอย่างเพิ่มเติม

เริ่มต้นด้วยการคลิกเข้าไปในเลเยอร์“ Artist Bio 1” เพื่อเลือกกลุ่ม“ รูปภาพเด่น” นี่จะเป็นจุดเริ่มต้นของการเปิดแกลเลอรี สร้างการโต้ตอบ 'แตะ' ที่นี่โดยเชื่อมต่อกับอาร์ตบอร์ดแรกในแกลเลอรีแล้วเลือก 'การเคลื่อนไหว' คราวนี้ตั้งระยะเวลาให้เร็วขึ้นเล็กน้อย: 1 วินาที

หากต้องการสร้างการเปลี่ยนแปลงที่ดีสำหรับการปิดแกลเลอรีเพียงเลือกเลเยอร์ปุ่มปิดในอาร์ตบอร์ด“ ศิลปิน 1 - รูปภาพ 1” และเชื่อมต่อกลับเข้ากับอาร์ตบอร์ด“ Artist Bio 1” โดยใช้การตั้งค่าเหมือนเดิม

ดูตัวอย่างแอนิเมชั่นนี้และประหลาดใจว่าการเปลี่ยนต้นแบบจากหน้าจอชีวประวัติของศิลปินไปสู่ภาพหมุนของภาพและด้านหลังเป็นอย่างไร ตอนนี้เราได้เชื่อมต่อการนำทางผ่านลำดับชั้นของแอปสามระดับแล้ว!

ขั้นตอนที่ 5: เชื่อมต่อรูปภาพแกลเลอรีทั้งหมด

บทบาทหัวหน้าเจ้าหน้าที่การเงิน

เราได้ทำการเปลี่ยนการเคลื่อนไหวส่วนใหญ่ที่เราจำเป็นต้องทำแล้วและจะเริ่มใช้ค่าที่ตั้งไว้ล่วงหน้าของภาพเคลื่อนไหวบางส่วนกับแกลเลอรีที่เหลือ

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

เลือกอาร์ตบอร์ด“ ศิลปิน 1 - รูปภาพ 1” และสร้างปฏิสัมพันธ์ที่นำไปสู่อาร์ตบอร์ดถัดไป“ ศิลปิน 1 - รูปภาพ 2” คราวนี้ตั้งค่าทริกเกอร์เป็น 'ปัดไปทางซ้าย' สำหรับการเปลี่ยนแปลงให้เลือก 'ค่าที่ตั้งไว้' และเลือก 'กดซ้าย' จากเมนูแบบเลื่อนลง

หากต้องการสร้างการโต้ตอบแบบย้อนกลับให้เลือกอาร์ตบอร์ด“ ศิลปิน 1 - รูปภาพ 2” และเชื่อมต่อกับอาร์ตบอร์ดก่อนหน้าในครั้งนี้โดยใช้ท่าทางสัมผัส“ ปัดไปทางขวา” และการเปลี่ยน“ กดขวา”

ทำซ้ำรูปแบบนี้กับอาร์ตบอร์ดสองสามชิ้นถัดไปเชื่อมต่ออาร์ตบอร์ดสำหรับรูปภาพ 2 ถึงรูปภาพ 3 และรูปภาพ 3 กับรูปภาพ 4 ง่ายมาก!

เพื่อให้สิ่งนี้สมจริงยิ่งขึ้นให้ปิดการวนซ้ำระหว่าง Image 1 และ Image 4 เลือก artboard สำหรับ Image 4 และเชื่อมต่อกับ Image 1 เลือกทริกเกอร์“ Swipe Left” และ“ Push Left” เช่นเดียวกับที่คุณทำสำหรับ ภาพถัดไปในชุด เชื่อมต่อ Artboard Image 1 กับ Image 4 ด้วยการย้อนกลับและ Presto คุณได้สร้างแกลเลอรีแบบวนซ้ำแล้ว!

สุดท้ายเลือกองค์ประกอบ“ btn_close” แต่ละรายการในอาร์ตบอร์ดของแกลเลอรีรูปภาพและเชื่อมโยงกลับไปที่ไบโออาร์ตบอร์ด คุณสามารถเลือกการเปลี่ยนแปลงใดก็ได้ที่คุณต้องการที่นี่ แต่ฉันใช้ 'กดขวา'

ตอนนี้คุณมีเส้นทางการนำทางที่เรียงลำดับได้ดีพอที่จะอวด คลิกดูตัวอย่างและทดลองใช้ ต้นแบบของคุณควรทำงานได้ดีเหมือนกับ gif ในตอนต้นของบทช่วยสอนนี้ ตบหลังให้ตัวเองมีรายได้ดี

ขั้นตอนที่ 6: ทำซ้ำ

ตอนนี้คุณได้เชื่อมโยงหน้าจอทั้งหมดสำหรับตัวอย่างศิลปินคนแรกด้วยการโต้ตอบที่ลื่นไหลแล้วให้ทำซ้ำขั้นตอนกับหน้าจออีกสองชุดในไฟล์บทแนะนำ มีการจัดระเบียบในลักษณะเดียวกันและจะเป็นแนวทางปฏิบัติที่ดีในการทำความคุ้นเคยกับวิธีการทำงานของ Studio

ขั้นตอนถัดไป

หวังว่าบทช่วยสอนนี้จะให้ข้อมูลเบื้องต้นเกี่ยวกับคุณสมบัติที่ยอดเยี่ยมของการสร้างต้นแบบ InVision Studio ในขณะที่ใช้ Studio คุณควรลองปรับเปลี่ยนการเปลี่ยนภาพโดยใช้เครื่องมือภาพเคลื่อนไหวขั้นสูง ทดลองใช้เครื่องมืออื่น ๆ ในพื้นที่ทำงานและลองทำตามบทแนะนำอื่น ๆ ของ InVision Studio ที่นั่น ด้วยการฝึกฝนคุณสามารถเป็นหนึ่งในแนวหน้าได้ การออกแบบ InVision Studio กูรู

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

Studio เป็นเครื่องมือที่น่าสนุกที่จะทดลองใช้และไม่มีเหตุผลใดที่จะไม่ทดลองใช้เครื่องมือสร้างต้นแบบแอปฟรี แม้ว่าปัจจุบันจะไม่สามารถแทนที่ซอฟต์แวร์ go-to เช่น Sketch ในชุมชนการออกแบบได้ แต่ก็มีศักยภาพมากมาย

•••

อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:

• ทำให้กระบวนการออกแบบ UX ของคุณสมบูรณ์แบบ - คำแนะนำในการออกแบบต้นแบบ
• พลังของ Figma ในฐานะเครื่องมือออกแบบ
• การสร้างต้นแบบด้วยข้อมูลจริง - บทช่วยสอนเกี่ยวกับเฟรม
• คู่มือพื้นฐานสำหรับการใช้งานมือถือ
• แนวทางปฏิบัติและข้อผิดพลาดในการออกแบบแอพมือถือ

ทำความเข้าใจพื้นฐาน

ต้นแบบ UI คืออะไร?

ต้นแบบ UI ถูกสร้างขึ้นเพื่อวัตถุประสงค์ในการสาธิตและทดสอบส่วนต่อประสานกับผู้ใช้ เครื่องมือเช่น InVision Studio, Sketch และ Figma มีให้สำหรับนักออกแบบเพื่อสร้างต้นแบบเชิงโต้ตอบโดยไม่จำเป็นต้องเขียนโค้ด

InVision คืออะไร?

InVision เป็นแพลตฟอร์มสำหรับสร้างและแบ่งปันต้นแบบที่คลิกได้สำหรับเว็บและมือถือ ในช่วงไม่กี่ปีที่ผ่านมา InVision ได้ขยายแพลตฟอร์มเพื่อรวมเครื่องมือการแบ่งปันและการทำงานร่วมกันที่มีประสิทธิภาพยิ่งขึ้นปลั๊กอินและตอนนี้แอปออกแบบอินเทอร์เฟซของตัวเอง

ต้นแบบแอปบนอุปกรณ์เคลื่อนที่คืออะไร

ต้นแบบแอปบนอุปกรณ์เคลื่อนที่คือต้นแบบที่สร้างขึ้นเพื่อวัตถุประสงค์ในการสาธิตและ / หรือทดสอบแอปบนอุปกรณ์เคลื่อนที่ ต้นแบบอาจมีความซับซ้อนขึ้นอยู่กับลักษณะของแอปที่จำเป็นต้องได้รับการทดสอบ

ต้นแบบที่คลิกได้คืออะไร?

ต้นแบบที่คลิกได้คือต้นแบบที่มีการโต้ตอบบางอย่าง บ่อยครั้งสิ่งเหล่านี้ถูกสร้างขึ้นโดยการกำหนด 'ฮอตสปอต' แบบโต้ตอบไว้บนองค์ประกอบที่ออกแบบเช่นปุ่มและเชื่อมโยงเข้ากับหน้าจอในขั้นตอนต่อไป

ทำไมการมีต้นแบบจึงสำคัญ?

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