การสร้างต้นแบบด้วยข้อมูลจริง – บทช่วยสอน Framer

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

เพื่อติดตามบทความนี้ อย่างน้อย คุณควรมีความรู้พื้นฐานเกี่ยวกับ Framer เป็นอย่างน้อย เราจะใช้โหมดการออกแบบและตัวแก้ไขโค้ด หากคุณต้องการเสริมความรู้ คุณสามารถอ่านบทความ Framer ก่อนหน้าของเรา: วิธีสร้างต้นแบบเชิงโต้ตอบที่น่าทึ่ง 7 Microinteractions อย่างง่ายเพื่อปรับปรุงต้นแบบของคุณ

ทำไมคุณควรใช้ Framer กับ Real Data

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

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

มาสร้างต้นแบบด้วยข้อมูลจริงกันเถอะ!

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

API ที่ใช้ข้อมูลจริง: มันคืออะไร? เราจะใช้มันอย่างไร?

Application Programming Interface (API) คืออินเทอร์เฟซที่เราสื่อสารกับแอปพลิเคชัน ลองนึกภาพแอปเป็นร้านอาหาร อาหารคือข้อมูลและพนักงานเสิร์ฟคือ API คุณขออาหารจากพนักงานเสิร์ฟ นั่นคือทั้งหมดที่คุณต้องทำ พนักงานเสิร์ฟ (API) และห้องครัว (ฐานข้อมูล) จะดูแลส่วนที่เหลือ

มันคือทั้งหมดที่เกี่ยวกับการเข้าถึงข้อมูลจริงที่อยู่ในฐานข้อมูลที่กำหนด

ทุกแอพมี API ที่อนุญาตให้บันทึกและแสดงข้อมูล API บางตัวพร้อมใช้งานแบบสาธารณะ และบางตัวใช้ในผลิตภัณฑ์ภายในเท่านั้น

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

เราสามารถรับข้อมูลจริงได้จากที่ไหน? รายการ Open API

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

ผู้ใช้สุ่ม - API ที่ดีที่สุดสำหรับผู้เริ่มต้นอย่างแน่นอน มันสร้างโปรไฟล์ผู้ใช้แบบสุ่มที่สมบูรณ์จากรูปแทนตัวไปยังที่อยู่อีเมล

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

Pokeapi – หนึ่งใน API ที่ดีที่สุดที่สร้างขึ้นเพื่อการศึกษา กำลังมองหาบางอย่างเกี่ยวกับโปเกมอน? สามารถพบได้ที่นี่ นี่คือ RESTful API ฉบับสมบูรณ์ที่เชื่อมโยงกับฐานข้อมูลขนาดใหญ่ที่มีรายละเอียดทุกอย่างเกี่ยวกับซีรีย์เกมหลักของ Pokemon

Instagram – API แรกในรายการที่ต้องมีการอนุญาตเพื่อใช้ อย่างไรก็ตาม การบริการนั้นง่ายมาก คุณสามารถเข้าถึงรูปภาพและผู้ใช้ Instagram ทั้งหมดและแสดงไว้ในแอพใหม่ของคุณ

Mapbox – ให้บริการที่น่าทึ่งมากมายที่ง่ายต่อการรวมเข้ากับแอปพลิเคชัน ตั้งแต่แผนที่และเส้นทาง ไปจนถึงการระบุพิกัดทางภูมิศาสตร์ และแม้แต่ภาพถ่ายจากดาวเทียม Foursquare, Evernote, Instacart, Pinterest, GitHub และ Etsy ล้วนมีบางอย่างที่เหมือนกัน—แผนที่ของพวกเขาขับเคลื่อนโดย Mapbox

API นี้แตกต่างจาก API ก่อนหน้านี้เนื่องจากไม่ส่งคืนไฟล์ JSON แต่ให้การเข้าถึงฟังก์ชัน Mapbox ทั้งหมด Mapbox ยังจัดทำบทช่วยสอนที่ยอดเยี่ยมเกี่ยวกับวิธีใช้ API ใน Framer

บทช่วยสอนสุ่มผู้ใช้ API ใน Framer โดยใช้ Real Data

เพื่อให้เข้าใจวิธีการทำงานกับ API ใน Framer มาเริ่มกันที่ Random User API กันก่อน เราจำเป็นต้องมีหน้าจอแอปเดียว—รายชื่อผู้ใช้

ขั้นตอนที่ 1: โหมดการออกแบบ

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

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

ขั้นตอนที่ 2: ทำความเข้าใจ JSON

ก่อนอื่น จำเป็นต้องเข้าใจว่า JSON คืออะไรและจะนำไปใช้นอก Framer ได้อย่างไร ในเอกสาร Random User API ค้นหาคำขอข้อมูลจาก API ดูเหมือนว่านี้: https://randomuser.me/api/?results=20 อย่างที่คุณเห็น มันเป็นลิงค์ปกติที่เปิดไฟล์ JSON ในเบราว์เซอร์ของคุณ:

อย่างที่เห็นมันไม่ชัดเจนเลย หากต้องการดูไฟล์ JSON ที่มีรูปแบบถูกต้อง ให้ใช้ปลั๊กอิน Chrome ชื่อ JSONview ด้วยปลั๊กอิน ไฟล์จะมีลักษณะดังนี้:

ดีขึ้นมาก ตอนนี้ควรอ่านง่าย ไฟล์มีอาร์เรย์ของผลลัพธ์พร้อมข้อมูลผู้ใช้ ซึ่งได้รับหลังจากขอ API ไฟล์ JSON คืออะไร? โดยไม่ต้องลงรายละเอียดทางเทคนิค มันเป็นไฟล์ข้อความตามไวยากรณ์ JavaScript ที่มีข้อมูลเฉพาะจากฐานข้อมูล JSON สามารถใช้ใน Framer เพื่อแสดงข้อมูลจากมัน

ขั้นตอนที่ 3: นำเข้าไฟล์ JSON ไปยัง Framer

ตอนนี้ ไฟล์ JSON นำเข้ามาใน Framer ได้ด้วยโค้ดบรรทัดเดียว:

 data = JSON.parse Utils.domLoadDataSync "https://randomuser.me/api/?results=20"

สร้างวัตถุที่เรียกว่า ข้อมูล ที่จะมีไฟล์ JSON ใช้ฟังก์ชัน การพิมพ์ เพื่อดูว่านำเข้าไฟล์ JSON อย่างถูกต้องหรือไม่:

 print data 

ขั้นตอนที่ 4: การเข้าถึงข้อมูลเฉพาะจากไฟล์ JSON

กลับไปที่โครงสร้างไฟล์ JSON:

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

 print data.results[1]

คอนโซลเฟรม:

 {gender:"male", name:{title:"mr", first:"benjamin", last:"petersen"}, location:{street:"2529 oddenvej", city:"sandved", state:"midtjylland", postcode:48654}, email:"[email protected]", login:{username:"organicsnake771", password:"bauhaus", salt:"PohszyFx", md5:"b19140299c05e5e623c12fb94a7e19e6", sha1:"78d95ec718ef118d9c0762b3834fc7d492111ab2", sha256:"0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54"}, dob:"1974-12-17 04:58:03", registered:"2009-04-08 16:50:59", phone:"76302979", cell:"41168605", id:{name:"CPR", value:"605218-6411"}, picture:{large:"https://randomuser.me/api/portraits/men/65.jpg", medium:"https://randomuser.me/api/portraits/med/men/65.jpg", thumbnail:"https://randomuser.me/api/portraits/thumb/men/65.jpg"}, nat:"DK"}

ตัวเลขในวงเล็บแสดงถึงจำนวนของอ็อบเจ็กต์ในอาร์เรย์ การใช้ data.results[1] จะได้รับการเข้าถึงข้อมูลของผู้ใช้รายแรกทั้งหมดในไฟล์ JSON

จากนั้นรายการเช่นชื่อหรือนามสกุลสามารถแสดงได้:

 print data.results[1].name.first

Framer ตอบกลับด้วย: "benjamin" . และ voila! เข้าถึงข้อมูลจาก API แล้ว!

ขั้นตอนที่ 5: การแสดงข้อมูลจาก JSON

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

เรากำลังใช้ x = 0 เพื่อกำหนดเป้าหมายวัตถุแรกในอาร์เรย์จากข้อมูล JSON จากนั้นสำหรับองค์ประกอบ ลูก แต่ละรายการของ รายการ เราจะกำหนดข้อมูลจากข้อมูล JSON ในตอนท้ายของลูป เราเพิ่ม +1 เพื่อใช้ข้อมูลจากอ็อบเจ็กต์ถัดไปในอาร์เรย์:

 x = 0 for i in list.children i.children[2].text = data.results[x].name.first i.children[1].text = data.results[x].name.last i.children[0].image = data.results[x].picture.large x++

แค่นั้นแหละ! ตอนนี้คุณสามารถกลับไปที่โหมดการออกแบบและเล่นกับการออกแบบ และข้อมูลจริงจะแสดงในต้นแบบของคุณ!

คุณสามารถดาวน์โหลดไฟล์ Framer ด้านบนนี้ได้ที่นี่: https://framer.cloud/djmvG

Instagram API – ข้อมูลแบบเรียลไทม์ใน Framer

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

ขั้นตอนที่ 1: รับโทเค็นการเข้าถึง

ในการใช้ Instagram API จำเป็นต้องมีโทเค็นเพื่อการเข้าถึง สามารถรับได้สองวิธี:

1. วิธีที่พบบ่อยที่สุดคือไปที่เว็บไซต์ Instagram for Developers และปฏิบัติตามคำแนะนำ กระบวนการนี้อาจซับซ้อนสำหรับผู้ที่ไม่เชี่ยวชาญด้านเทคนิค
2. โชคดีที่มีวิธีที่ง่ายและปลอดภัยในการรับมัน Pixel Union พัฒนากระบวนการเพียงคลิกเดียวที่ง่ายกว่ามาก: ไปที่เว็บไซต์ของพวกเขาแล้วคลิกปุ่มรับโทเค็นการเข้าถึง

ขั้นตอนที่ 2: เปิดใช้งานคำขอข้ามโดเมน

หลังจากได้รับโทเค็นเพื่อการเข้าถึงแล้ว จำเป็นต้องมีเคล็ดลับเล็กน้อย Instagram ไม่อนุญาตให้ส่งคำขอ API จากโฮสต์ในเครื่อง (Framer) ดังนั้นจึงต้องใช้การสืบค้นฝั่งเซิร์ฟเวอร์ หนึ่งในนั้นคือ JSONProxy ไปที่เว็บไซต์ของพวกเขา วางคำขอจาก Instagram API แล้วกด GO

เมื่อเสร็จแล้ว แทนที่จะใช้ลิงก์ Instagram API คุณสามารถใช้ลิงก์ JSONProxy ได้

ขั้นตอนที่ 3: ออกแบบแอปอย่างง่ายใน Framer

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

ขั้นตอนที่ 4: เขียนโค้ดสี่บรรทัดเพื่อใช้ข้อมูลจาก Instagram

โฟลว์ที่นี่เหมือนกับใน Random User API ข้อมูลผู้ใช้ใด ๆ สามารถเข้าถึงได้จาก Instagram:

 yourAccessToken = "YOUR-ACCESS-TOKEN" instagramJSON = JSON.parse Utils.domLoadDataSync "https://json-proxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}" likesCount.text = instagramJSON.data[1].likes.count name_1.text = instagramJSON.data[1].user.full_name photo.image = instagramJSON.data[1].images.standard_resolution.url

แค่นั้นแหละ! โค้ดห้าบรรทัด และคุณสามารถสร้างต้นแบบโดยใช้ข้อมูลจริงและข้อมูลที่ Instagram จัดหาให้ ดาวน์โหลดต้นแบบการทำงานที่นี่: https://framer.cloud/iYAXl (โปรดทราบว่าคุณต้องเพิ่ม ACCESS KEY ของคุณเองเพื่อเรียกใช้ต้นแบบนี้)

สรุป – ข้อดีข้อเสีย

ด้วยการสร้างต้นแบบที่ใช้ข้อมูลจริงที่ได้รับผ่าน API จากฐานข้อมูล ความเป็นไปได้ในการสร้างสรรค์ใหม่และความสามารถในการตรวจสอบการออกแบบผลิตภัณฑ์ถูกนำมาเปิดเผย—สามารถสร้างต้นแบบที่สอดคล้องกับผลิตภัณฑ์ได้ 100% และทดสอบฟังก์ชั่นใหม่กับผู้ใช้จริง . ด้วยการแสดงตัวอย่างข้อมูลทั้งหมดในระบบ เป็นการยากที่จะพลาดองค์ประกอบที่ต้องรวมอยู่ในการออกแบบ และด้วยการเข้าถึงข้อมูลจริง จะหลีกเลี่ยงข้อผิดพลาดในการออกแบบที่มาจากการใช้ข้อมูลปลอมได้

ที่กล่าวว่าการสร้างต้นแบบที่มีความเที่ยงตรงสูงใน Framer นั้นค่อนข้างแพง ต้องใช้การปรับแต่งอย่างมากเพื่อให้ได้ผลลัพธ์ที่ต้องการ ซึ่งกินเวลาและเงิน ดังที่แสดงในตัวอย่าง Random User API การสื่อสารกับ API นั้นไม่ยาก แต่ยังต้องใช้เวลาอีกมากในการสร้างต้นแบบที่ดีจากมัน

อย่างไรก็ตาม เมื่อพิจารณาครบแล้ว ก็ควรพิจารณา สร้างต้นแบบอย่างมีความสุขด้วยข้อมูลจริง!

• • •

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

• แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบ UI และข้อผิดพลาดทั่วไป
• รัฐที่ว่างเปล่า – แง่มุมที่ถูกมองข้ามมากที่สุดของ UX
• ความเรียบง่ายคือกุญแจสำคัญ – สำรวจการออกแบบเว็บขั้นต่ำ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบเพื่อให้อ่านง่าย – A Guide to Web Typography