วิธีการออกแบบแบบฟอร์มตอบสนองและไม่เชื่อเรื่องพระเจ้า

Sep 11, 2025
วิธีการ

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

นี่คือวิธีการออกแบบฟอร์มสำหรับอุปกรณ์มือถือรวมถึงการดูอย่างรวดเร็ว วิธีใช้ Flexbox .

01. การออกแบบสำหรับการเลื่อนแนวตั้ง

A single column layout works better

เค้าโครงคอลัมน์เดียวทำงานได้ดีขึ้น

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

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

02. วางป้ายกำกับด้านบนทุ่งนา

Place labels above form fields

วางฉลากด้านบนฟิลด์ฟอร์ม

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

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

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

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

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

03. ใช้ Tap Targets

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

ในขณะนี้ขนาดเป้าหมายที่ใหญ่ที่สุดสำหรับอุปกรณ์สัมผัสดังนั้นคุณต้องออกแบบ Touch-First สิ่งนี้ทำให้ผู้ใช้ไม่จำเป็นต้องซูมเข้าเพื่อป้อนข้อความหรือเลือกตัวเลือก พื้นที่ที่คลิกได้ควรปฏิบัติตามกฎนิ้วไขมันและไม่รุกล้ำบนพื้นที่โดยรอบ: แผ่นนิ้วเฉลี่ยเฉลี่ยคือ 10 x 14 มม. และปลายนิ้วเฉลี่ยคือ 8-10 มม. ทำให้ขนาดเป้าหมายสัมผัสขั้นต่ำ 10 x 10 มม.

แต่ไม่เพียง แต่จะมีการปรับขนาดเป้าหมายอย่างเหมาะสมเท่านั้นคุณควรมั่นใจว่ามีพื้นที่เพียงพอระหว่างเป้าหมายการแตะหลายครั้ง ในความเป็นจริงหากคุณได้รับข้อผิดพลาด 'Tap Target Size' บนเครื่องมือ SEO มือถือมักเป็นเพราะเป้าหมายการแตะของคุณอยู่ใกล้เกินไปแทนที่จะเป็นเป้าหมายการแตะที่แท้จริงที่มีขนาดเล็กเกินไป

มันอาจเป็นเรื่องยากที่จะอ่านเนื้อหาบนอุปกรณ์มือถือดังนั้นการป้อนข้อมูล 100% และให้แน่ใจว่าข้อความถูกตั้งค่าเป็นอย่างน้อย 16px (1em) จะสร้างความแตกต่างอย่างมาก ด้วยวิธีนั้นไม่มีการซูมแบบหยิกหรือการเลื่อนพิเศษจะต้องอ่านข้อมูลที่จำเป็น

04. ใช้ฟิลด์ฟอร์ม HTML5

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

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

<input type="email" id="input-email">

05. ใช้ Flexbox

ลองเผชิญหน้ากัน - เป็นเรื่องยากที่จะสร้างเค้าโครงที่ตอบสนองใน HTML พวกเราส่วนใหญ่ต้องดิ้นรนกับสิ่งนี้ที่จุดหนึ่งหรืออีกจุดหนึ่ง แม้ว่ามันจะเป็นไปได้เสมอที่จะทำให้เค้าโครงประพฤติตามที่คาดไว้โดยใช้เทคโนโลยีพิเศษ แต่กระบวนการนี้ไม่เคยง่าย

เทคโนโลยีที่จะจัดการกับรูปแบบที่มีโครงสร้างได้มาและไปในช่วงหลายปีที่ผ่านมา: นักพัฒนาได้ใช้เฟรม HTML ตาราง HTML เค้าโครงที่ใช้ลอยและเมื่อเร็ว ๆ นี้ระบบกริดต่าง ๆ เป็นที่นิยมโดย CSS Frameworks เช่น bootstrap .

แต่ด้วยการถือกำเนิดของรูปแบบกล่องที่ยืดหยุ่น HTML (หรือ flexbox ), HTML ได้รับเครื่องมือจัดรูปแบบกล่องที่หลากหลายที่อยู่ที่เลย์เอาต์ที่ซับซ้อนรวมถึงรูปแบบ HTML

Flexbox ช่วยให้เรามีความยืดหยุ่นที่ยอดเยี่ยมสำหรับการสร้างรูปแบบที่สวยงามอย่างรวดเร็ว สิ่งสำคัญที่ต้องเข้าใจเกี่ยวกับ Flexbox คือเป็นเครื่องมือจัดการคอนเทนเนอร์: มันมีจุดมุ่งหมายเพื่อให้วิธีที่มีประสิทธิภาพมากขึ้นในการจัดวางจัดตำแหน่งและแจกจ่ายพื้นที่ระหว่างรายการในภาชนะแม้ในขนาดของพวกเขาไม่เป็นที่รู้จักและ / หรือแบบไดนามิก (ดังนั้น คำว่า 'Flex')

สิ่งที่น่าสนใจคือ Flexbox ให้ความยืดหยุ่นที่ยอดเยี่ยมสำหรับการสร้างแบบฟอร์มของเราอย่างรวดเร็วโดยไม่ต้องใช้แบบสอบถามสื่อใด ๆ บวกเบราว์เซอร์ปัจจุบันทั้งหมดรองรับ

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

 & lt; แบบฟอร์ม & gt;
& lt; ul class = "flex" & gt;
& lt; li & gt; & lt; ฉลากสำหรับ = "ชื่อแรก" & gt; ชื่อแรก & lt; / labs & gt; & lt; input type = "ข้อความ" id = "ชื่อแรก" ตัวยึดตำแหน่ง = "ป้อนชื่อของคุณที่นี่" & gt; & lt; / li & gt;
& lt; li & gt; & lt; label; = "ชื่อสุดท้าย" & gt; นามสกุล & lt; / lat; & gt; & lt; input type = "text" id = "name last-name" placeholder = "ป้อนนามสกุลของคุณที่นี่" & gt; & lt; / li & gt;
& lt; li & gt; & lt; label สำหรับ = "อีเมล" & gt; email & lt; / label & gt; & lt; input type = "อีเมล์" id = "อีเมล" ตัวยึดตำแหน่ง = "ป้อนอีเมลของคุณที่นี่" & gt; & lt; / li & gt;
& lt; li & gt; & lt; label สำหรับ = "โทรศัพท์" & gt; โทรศัพท์ & lt; / label & gt; & lt; input type = "โทรศัพท์" id = "โทรศัพท์" ตัวยึดตำแหน่ง = "ป้อนโทรศัพท์ของคุณที่นี่" & gt; & lt; / li & gt;
& lt; li & gt; & lt; ป้ายกำกับสำหรับ = "ข้อความ" & gt; ข้อความ & lt; / labs & gt; & lt; textarea rows = "6" id = "ข้อความ" placeholder = "ป้อนข้อความของคุณที่นี่" & gt; & lt; / textarea & gt; & ant; / li & gt;
& lt; li & gt; & lt; ประเภทปุ่ม = "ส่ง" & gt; submit & lt; / ปุ่ม & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / form & gt;

ขอให้สังเกตว่ารายการแต่ละรายการในแบบฟอร์มของเรามีคลาสของ ดิ้น . คลาสนี้ระบุคอนเทนเนอร์แบบยืดหยุ่นในแบบฟอร์มของเรา หนึ่งในประโยชน์ที่ยิ่งใหญ่ของ Flexbox คือความสามารถในการใช้องค์ประกอบ HTML ใด ๆ เพื่อกำหนดภาชนะบรรจุและองค์ประกอบ

คุณสามารถใช้การจัดแต่งทรงผม FlexBox กับองค์ประกอบ HTML ใด ๆ ซึ่งหมายความว่าคุณสามารถ rensyle และองค์ประกอบ reflow ได้อย่างอิสระของกันและกัน โปรดทราบว่า Flexbox เป็นเพียงกลไกการจัดแต่งทรงผมซึ่งหมายความว่าคุณสามารถเพิ่มและลบได้ที่จะ

ลองระบุคอนเทนเนอร์แบบยืดหยุ่นใน CSS ของเรา นอกจากนี้เราต้องการมุ่งเน้นไปที่รายการดิ้นในแนวตั้งทั่วแกนข้าม มันง่ายที่จะระบุว่าเราเพียงแค่ต้องตั้งค่ากฎ CSS อย่างง่าย: 

 .flex li {
จอแสดงผล: Flex;
Flex-wrap: ห่อ;
จัดเรียงรายการ: ศูนย์;
}

ขั้นตอนต่อไปคือการระบุความกว้างสำหรับรายการแบบยืดหยุ่น ข้อกำหนดหลัก:

  • ฉลากควรมีอย่างน้อย 100px และมากที่สุด 200px
  • องค์ประกอบแบบฟอร์มที่เกิดขึ้นหลังจากฉลากควรมีอย่างน้อย 200px

สิ่งนี้ทำให้เรา แต่ละฉลากและองค์ประกอบฟอร์มที่เกี่ยวข้องจะปรากฏขึ้นบนแถวแนวนอนเดียวเมื่อความกว้างของแบบฟอร์มรวมอย่างน้อย 300px (จำไว้เรากำลังใช้ป้ายกำกับที่เหมาะสมที่นี่) 

 .flex & gt; li & gt; ฉลาก {
Flex: 1 0 100px;
ความกว้างสูงสุด: 200px;
}
.flex & gt; li & gt; ฉลาก + * {
Flex: 1 0 200px;
}

สุดท้ายสำหรับปุ่มส่งซึ่งเป็นรายการแบบยืดหยุ่นเรากำหนดรูปแบบพื้นฐานบางอย่าง: 

. ปุ่ม Flex Li {
มาร์จิ้น: อัตโนมัติ;
padding: 22px 46px;
}

อย่างที่คุณเห็นด้วยมาร์กอัปน้อยที่สุดและพลังของ Flexbox เราได้สร้างแบบฟอร์มตอบสนอง

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

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 287 ของ นิตยสารสุทธิ นิตยสารสำหรับนักออกแบบเว็บไซต์มืออาชีพและนักพัฒนา - นำเสนอแนวโน้มเทคโนโลยีและเทคนิคใหม่ล่าสุด สมัครสมาชิก NET ที่นี่

บทความที่เกี่ยวข้อง:

  • สร้างแบบฟอร์มตอบสนองและตาราง
  • เริ่มต้นกับการเข้าถึงเว็บ
  • 7 เครื่องมือที่ยอดเยี่ยมสำหรับการทดสอบการออกแบบเว็บที่ตอบสนองต่อการทำงานของคุณ

วิธีการ - บทความยอดนิยม

วิธีการวาดสุนัข

วิธีการ Sep 11, 2025

บทช่วยสอนวันนี้จะแสดงวิธีการวาดสุนัข โครงกร�..

วิธีการสร้างทักษะ Alexa สำหรับเว็บไซต์ของคุณ

วิธีการ Sep 11, 2025

พวกเราหลายคนตอนนี้มีผู้ช่วยเสียงบางชนิดรอบ �..

วิธีการแสดงผลพื้นผิวโปร่งใสจริง

วิธีการ Sep 11, 2025

การสร้างวัสดุที่โปร่งใสเช่นกระจกดูเหมือนง่า..

ต้นแบบที่สมบูรณ์แบบและการออกแบบมือที่สมบูรณ์แบบด้วย Marvel

วิธีการ Sep 11, 2025

ด้วยเส้นโค้งการเรียนรู้ที่สั้นกว่าแอป Invision แล�..

สร้างตัวละครที่มีท่าทางที่แข็งแกร่งใน Photoshop

วิธีการ Sep 11, 2025

การสร้างตัวละครชายที่พูดเกินจริงนั้นเกี่ยวก..

วิธีสร้างเว็บไซต์ที่เร็วขึ้น

วิธีการ Sep 11, 2025

ก่อนการพูดคุยของเขาที่ สร้างลอนดอน เมื่�..

สี่ทฤษฎีของกลยุทธ์ UX

วิธีการ Sep 11, 2025

ประสบการณ์ผู้ใช้ที่เป็นตัวเอก ( ux ) กลยุทธ�..

วิธีเริ่มต้นด้วยการวาดภาพสีน้ำมัน

วิธีการ Sep 11, 2025

การทาสีด้วยน้ำมันเป็นวิธีที่น่าตื่นเต้นในการสร้างงานศิลปะ อย่างไ�..

หมวดหมู่