ในโลกดิจิทัลนี้ ความต้องการเว็บไซต์อีคอมเมิร์ซเพิ่มขึ้นทุกวันเนื่องจากทุกธุรกิจต้องพึ่งพาออนไลน์ และเนื่องจากอีคอมเมิร์ซแข่งขันกันทั่วโลก ทุกคนต้องการสร้างแพลตฟอร์มที่ดีที่สุด
และเงื่อนไขหลักในการสร้างเว็บไซต์อีคอมเมิร์ซที่ดีที่สุดคือการออกแบบโครงลวดที่มีประสิทธิภาพ
Wireframing เป็นขั้นตอนแรกของกระบวนการออกแบบเว็บไซต์ จุดประสงค์ของการทำ Wireframing คือการทำงานน้อยที่สุดในการเริ่มจัดระเบียบและค้นหาโฟลว์ของเพจ
มันเป็นขั้นตอนก่อนก่อนที่คุณจะเริ่มกังวลเกี่ยวกับสิ่งต่าง ๆ เช่นแบบอักษรและสี ด้วยโครงลวด คุณอนุญาตให้ตัวเองทำงานได้อย่างรวดเร็วและสร้างแนวคิดมากมาย
หากคุณกำลังคิดที่จะมีของตัวเอง เว็บไซต์อีคอมเมิร์ซให้ปฏิบัติตามคำแนะนำเหล่านี้ ที่นี่ คุณจะพบกับเคล็ดลับที่จำเป็นและแนวทางปฏิบัติที่ดีที่สุดสำหรับ wireframe สำหรับเว็บไซต์อีคอมเมิร์ซ
Wireframing: แนวทางปฏิบัติที่ดีที่สุดและเคล็ดลับ
เริ่มต้นการวาดเส้นด้วยปากกาและกระดาษเสมอ คุณสามารถเริ่มด้วยคอมพิวเตอร์และหลายคนทำอย่างนั้น แต่การทำกล่องสีเทาและใช้แบบอักษรเริ่มต้นจะดีกว่า
เมื่อคุณพยายามจัดวางสิ่งของให้ถูกต้องหรือได้กล่องที่มีขนาดที่เหมาะสม นั่นคือเวลาที่คุณจดจ่อกับรายละเอียดเล็กๆ น้อยๆ เหล่านั้น จากนั้นคุณจะสูญเสียขั้นตอนและไม่สามารถสร้างไอเดียด่วนได้
ดังนั้น การใช้ปากกาและกระดาษเพียงอย่างเดียวจะทำให้คุณยุ่งเหยิงและได้ไอเดียออกมา มาพูดถึงสิ่งที่คุณควรทำตามเพื่อออกแบบโครงร่างโครงร่างสำหรับเว็บไซต์อีคอมเมิร์ซกันเถอะ
รู้เนื้อหาในเว็บไซต์อีคอมเมิร์ซของคุณ
ก่อนที่คุณจะเริ่ม คุณจำเป็นต้องรู้ว่าเนื้อหาใดที่เกิดขึ้นบนหน้าเว็บที่คุณกำลังออกแบบ งานของคุณคือการออกแบบข้อมูล ดังนั้นคุณจำเป็นต้องรู้ว่าข้อมูลใดบ้างที่กำลังปรากฏบนหน้า ข้อมูลที่คุณต้องเข้าใจก่อนจึงจะเริ่มออกแบบได้
ไม่ได้หมายความว่าคุณจำเป็นต้องมีสำเนาที่เสร็จสมบูรณ์ คุณเพียงแค่ต้องมีข้อมูลคร่าวๆ มันเกี่ยวกับอะไรและมีเท่าไหร่ ที่นี่ ฉันได้จัดทำรายการเนื้อหาทั่วไปบางอย่างของเว็บไซต์อีคอมเมิร์ซ
- ส่วนหัว
- ข้อมูลชีวประวัติ
- ส่วนท้าย
- รูปภาพและชื่อของแต่ละโพสต์
- อาจจะเป็นคำสาป
- ลิงค์โซเชียลมีเดีย
- แถบค้นหาและการสมัครรับจดหมายข่าว
ใช้เทคนิคของ Crazy 8 เพื่อสร้างไอเดีย
ในการเริ่มสร้างความคิด คุณสามารถใช้เทคนิคที่เรียกว่า 'บ้า 8'. ตามเทคนิคนี้ คุณต้องพับกระดาษออกเป็น 8 ส่วน แล้วพับทำ 8 แนวคิดต่างๆ สำหรับโครงลวดโดยเร็วที่สุด
คุณสามารถวาดขนาดใหญ่หรือเล็กตามที่คุณต้องการ สิ่งที่ดีที่สุดสำหรับคุณ บางครั้ง ถ้าหน้ายาว คุณอาจต้องการทำสี่ด้านหนึ่งแล้วสี่อีกด้านหนึ่ง วิธีนี้ใช้เป็นเทคนิคการวอร์มอัพสำหรับสมองของคุณ นักออกแบบมักพบว่ามันน่าสนใจเพราะพวกเขาเริ่มคิดหาแนวคิดเกี่ยวกับเว็บไซต์อีคอมเมิร์ซ
มีเพียงหนึ่งวิธีที่ชัดเจนที่คุณอาจต้องการจัดการทุกอย่าง แต่เมื่อคุณกำลังบังคับตัวเองให้นึกถึงแนวคิดต่างๆ มากขึ้นเรื่อยๆ คุณจะแปลกใจกับความคิดทั้งหมดที่คุณเพิ่งซ่อนไว้ในใจ
นึกถึงโครงลวดเหมือนพิมพ์เขียวอาคาร
พิจารณาทำ พิมพ์เขียว ของเว็บไซต์อีคอมเมิร์ซของคุณเมื่อวางสาย เป้าหมายของโครงลวดคือการสร้างโครงร่างพื้นฐานสำหรับแต่ละหน้าจอในการออกแบบของคุณ ด้วยวิธีนี้ คุณจะสามารถตรวจสอบเค้าโครงโดยรวมของการออกแบบกับลูกค้าของคุณได้
วาด Mockup ใหม่
ไม่สำคัญหรอกว่ามันจะดูเหมือนเด็กวาดภาพให้คนอื่นหรือไม่ ประเด็นคือคุณมีความคิดของคุณออกมา ตอนนี้คุณรู้แล้วว่ามันหมายถึงอะไร และคุณมีที่สำหรับเริ่มต้นการออกแบบของคุณแล้ว หลังจากระยะนี้ ให้ดูที่แนวคิดทั้ง 8 และใส่ดาวดวงน้อยไว้ข้างๆ ที่คุณคิดว่าควรค่าแก่การสำรวจ
บางครั้งฉันจะไปวาดรูปจำลองใหม่ของบิตเหล่านั้นเข้าด้วยกัน แต่โดยทั่วไป คุณจะต้องย้ายไปยังคอมพิวเตอร์ ณ จุดนี้
คุณต้องการโปรแกรมอะไร
ในการสร้างโครงร่างสำหรับเว็บไซต์อีคอมเมิร์ซ ไม่จำเป็นต้องใช้โปรแกรม สิ่งที่คุณต้องมีคือกระดาษเก่าและสิ่งที่จะเขียนด้วย อย่างไรก็ตามฉันชอบที่จะใช้ Invision อิสระเมื่อสร้างโครงลวดของฉัน
ดินสอและกระดาษเป็นสิ่งที่ดี แต่ด้วยมือเปล่าช่วยให้คุณสามารถส่งโครงร่างไปยังลูกค้าได้โดยตรง นำเสนอแบบเรียลไทม์และให้โอกาสในการจดบันทึกในเอกสารเดียวกัน สิ่งนี้ทำให้คุณสามารถทำซ้ำและแสดงผลได้อย่างรวดเร็ว
ใช้ Sketch App สำหรับ Wireframing เว็บไซต์อีคอมเมิร์ซของคุณ
คุณสามารถใช้โปรแกรมที่เรียกว่า Sketch เพื่อจำลองโครงร่างโครงร่างของคุณ แต่ในที่นี้ ให้ใช้กล่องสีเทาธรรมดาและข้อความเริ่มต้น เหตุผลนี้เป็นเพราะคุณจะต้องแสดงการออกแบบมากมายให้กับลูกค้าของคุณ การใช้สีหรือไอคอนที่เหมาะสมหรืออะไรก็ได้จะทำให้ทุกอย่างสับสน
อย่าเพิ่งสร้างโครงลวดเพียงอันเดียวใน Sketch ทำให้มากที่สุดเท่าที่คุณรู้สึกว่าคุณมีไอเดียสำหรับส่วนโปรดในกระบวนการร่างภาพนี้ หลังจากนั้นก็ควรที่จะนอนบนนั้น ด้วยวิธีนี้ คุณจะสามารถกลับมาได้ด้วยความคิดที่สดใหม่และมุมมองที่สดใหม่ ก่อนที่คุณจะก้าวไปสู่ขั้นต่อไป
รู้จุดประสงค์ของผลิตภัณฑ์ของคุณ
เมื่อเริ่มต้นโครงลวด คุณจำเป็นต้องรู้ว่าผลิตภัณฑ์ของคุณต้องทำอะไรเพื่อให้สำเร็จ ตัวอย่างเช่น สมมติว่าคุณกำลังวางโครงร่างหน้าจอลงชื่อเข้าใช้อย่างง่ายสำหรับแอปมือถือของเว็บไซต์อีคอมเมิร์ซ หน้าจอเหล่านี้มักมีรายการที่จำเป็นบางอย่าง เช่น ช่องชื่อผู้ใช้และรหัสผ่าน ปุ่มส่ง คำกระตุ้นการตัดสินใจ ฯลฯ
แต่เป้าหมายหลักคือการให้ผู้ใช้ลงชื่อเข้าใช้ ระบุข้อกำหนดที่คุณทราบก่อนที่คุณจะเริ่มสร้างโครงร่างจริง
พยายามจัดลำดับความสำคัญหรือลำดับความสำคัญสำหรับผู้ใช้ เมื่อคุณมีความต้องการของคุณแล้ว คุณก็เข้าสู่ส่วนสำคัญได้แล้ว
การร่าง
การร่างภาพเป็นสิ่งสำคัญในการวางโครงลวดเพราะช่วยให้คุณสามารถนำแนวคิดของคุณออกมาได้อย่างรวดเร็ว หากคุณกังวล การร่างภาพด้วยเมาส์อาจเป็นเรื่องที่ท้าทาย ด้วยมือเปล่าทำให้การสร้างสี่เหลี่ยมผืนผ้าเรียบง่ายเป็นเรื่องง่าย
คุณสามารถกด Alt หรือ Option ค้างไว้ขณะวาดรูปร่างและจะทำให้เรียบ นอกจากนี้ยังใช้งานได้กับวงกลมที่คุณสามารถถือกะเมื่อวาดเพื่อสร้างเส้นตรงและแม้กระทั่งเล่นกับตัวเลือกการเติมและความทึบของคุณ
อย่างที่คุณเห็นการ Wireframing ไม่ได้ซับซ้อนมากนักเมื่อพูดถึงภาพจริง ส่วนใหญ่เป็นกล่องและข้อความเหมือนกับส่วนอื่นๆ ของอินเทอร์เน็ต ความแตกต่างคือการคิดที่อยู่เบื้องหลัง ทุกสิ่งที่สร้างขึ้นในโครงร่างมีไว้เพื่อจุดประสงค์เดียวในการสื่อสารความคิดของคุณอย่างรวดเร็ว
อุปกรณ์ที่ดีที่สุดสำหรับการ Wireframing เว็บไซต์อีคอมเมิร์ซของคุณ
คุณสามารถใช้ iPad Pro, Apple Pencil และแอพที่เรียกว่า Concepts ในแอพนี้ คุณสามารถมีผืนผ้าใบได้ไม่จำกัด และคุณสามารถร่างภาพต่อและย้ายหน้าไปพร้อม ๆ กันเพื่อรับแนวคิดเพิ่มเติม
องค์ประกอบสำคัญที่คุณต้องรวมไว้สำหรับเว็บไซต์อีคอมเมิร์ซของคุณ
หน้ารายการผลิตภัณฑ์เป็นสิ่งจำเป็นสำหรับเว็บไซต์อีคอมเมิร์ซใดๆ ดังนั้น คุณต้องออกแบบหน้า Landing Page ที่ดีและน่าสนใจ นอกจากนี้ ยังมีองค์ประกอบหลายอย่างที่คุณควรจำไว้ในขณะที่ทำ Wireframing พวกเขาคือ-
- บัตรผลิตภัณฑ์
- ฟิลเตอร์
- การออกแบบหน้ารายละเอียดสินค้า
- ภาพคุณภาพสูง
- ปุ่มรถเข็น
- ปุ่มราคา
- รายละเอียดสินค้ารายละเอียดสินค้า
- ปุ่มชำระเงิน
- รหัสคูปอง
สรุป
เมื่อคุณวางโครงร่างเว็บไซต์อีคอมเมิร์ซ ให้เน้นที่ประสบการณ์ของผู้ใช้ ในระยะแรก ให้ใช้กระดาษและดินสอเท่านั้น แล้วจึงค่อยไปขัดเงาในภายหลัง
เพื่อให้ได้รับประสบการณ์การช็อปปิ้งออนไลน์ที่ยอดเยี่ยม ให้ปฏิบัติตามหลักเกณฑ์เหล่านี้ เพียงจำไว้ว่าลำดับชั้นและการจัดตำแหน่งที่เหมาะสมจะสร้างหน้าผลิตภัณฑ์ที่ง่ายต่อการสแกน
และใช้ รูปแบบ Z ในการออกแบบหน้าจะมอบประสบการณ์การใช้งานที่น่าอัศจรรย์แก่คุณเช่นกัน อย่าลืมใส่ตัวเองในรองเท้าของผู้ใช้และคิดถึงข้อมูลสำคัญ นั่นคือทั้งหมดที่เกี่ยวกับการวางโครงลวดสำหรับเว็บไซต์อีคอมเมิร์ซ
นักออกแบบผู้เชี่ยวชาญจะใช้เวลา 4-7 วันเพื่อสร้างโครงลวด และสำหรับนักออกแบบทั่วไป อาจล่าช้าในการ 12-20 วันหรือมากกว่า
Wireframe เป็นพิมพ์เขียวและแบบจำลองเป็นแบบจำลองภาพ หมายความว่าเมื่อคุณให้ภาพสเก็ตช์ดินสอของคุณในรูปแบบดิจิทัลและสี มันจะกลายเป็นม็อคอัพ