ต้นแบบอย่างง่ายดาย – บทช่วยสอน InVision Studio

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

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

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

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

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

ทัวร์ Nickel ของ InVision Studio Workspace

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

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

แผงโต้ตอบ

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

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

แอนิเมชั่น InVision Studio

มีองค์ประกอบมากมายในการออกแบบการโต้ตอบที่ยอดเยี่ยม แต่การใช้ทรานสิชั่นและไมโครอินเทอร์แอกชันแบบเคลื่อนไหวที่ถูกต้องในส่วนต่อประสานผู้ใช้เป็นมากกว่าการตกแต่งหน้าต่าง

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

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

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

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

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

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

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

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

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

กวดวิชา!

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

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

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

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

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

ขั้นตอนที่ 2: เชื่อมต่อไทล์ศิลปินกับศิลปิน Bio

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

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

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

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

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

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

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

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

ขั้นตอนที่ 4: เชื่อมต่อคลังภาพ

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

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

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

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

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

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

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

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

เลือกอาร์ตบอร์ด "Artist 1 - Image 1" และสร้างการโต้ตอบที่นำไปสู่อาร์ตบอร์ดถัดไป "Artist 1 - Image 2" คราวนี้ ให้ตั้งค่าทริกเกอร์เป็น “ปัดไปทางซ้าย” สำหรับการเปลี่ยนแปลง ให้เลือก "Preset" และเลือก "Push Left" จากเมนูแบบเลื่อนลง

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

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

เพื่อให้สมจริงยิ่งขึ้น ให้ปิดลูประหว่างภาพที่ 1 และภาพที่ 4 เลือกอาร์ตบอร์ดสำหรับภาพที่ 4 และเชื่อมต่อกับภาพที่ 1 เลือกทริกเกอร์ "ปัดไปทางซ้าย" และการเปลี่ยน "กดซ้าย" เช่นเดียวกับที่คุณต้องการสำหรับ ภาพต่อไปในชุด เชื่อมต่ออาร์ตบอร์ด Image 1 กับ Image 4 ด้วยการย้อนกลับและ presto คุณได้สร้างแกลเลอรีแบบวนซ้ำแล้ว!

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

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

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

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

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

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

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

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

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

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