จัดปันออกอะเคื้ออีกด้วย Proximity & Alignment

ดีไซน์ User Interface ด้วย Design Principle ตอนที่ 1ฉันตาขอรับสารภาพพ้นว่า เกล้าผมครอบครองมนุชแห่งหนอวสานเทคโนโลยีสารสนเทศล่าช้าเน็ตเวิร์คมา แม้ว่าผลักจากไปชื่นชอบการออกแบบซะงั้น ความรู้ฐานรากคดีงานออกแบบก็ไม่ได้เรียนเสมอเหมือนลูกล่าอาร์ต จะเจียรเกี้ยวพาราสีลูกสถาปัตยกรรมศาสตร์ยิ่งเลวเข้าไปอีก ต่อจากนั้นสมมติว่าคนพ้นไปภูมิหลังปีกงานออกแบบมาก่อน จักริเริ่มทำ UI Design จะเริ่มเช่นไรบริสุทธ์ วันนี้มีคำตอบขอรับกรอบรูปธรรมดา ๆ เพียงจัดวางให้ Alignment ระดับเดียวกัน ก็เป็นเหตุให้ดูสวยงามได้มาDesign Principle รวมความว่าอะไรก็แปลความตามตรงร่างกายเกินครับผม เลี่ยนถือเอาว่าหลักเขตในที่การออกแบบ ซึ่งแห่งงานดีไซน์ UI ตรงนั้นเลี่ยนก็จักประกอบด้วย Principle ที่นำมาใช้เช่นกัน ซึ่งมันจักช่วยได้หลายชนิดพ้น ไม่ว่าจักสำเร็จรับรู้ข่าวสรรพสิ่งผู้บริโภค ลักษณะงานเข้าถึงข่าวสาร การจำแนกหมู่ เป็นต้น ซึ่งนี้เจ้า Design Principle ตกลงตลอดเก็บสิงสู่จากนั้น กระทู้ถามหลังจากนั้นคือว่าต่อจากนั้นไอ้ Design Principle นี่ประกอบด้วยเท่าใด….มันสมองคำเฉลยก็ถือเอาว่าอนันต์นุ่มนวล (ตัวเกล้าผมเองก็อีกทั้งอ่านเปล่าครบถ้วนพ้น) เอาเป็นว่าแม้ปราศจากดลลงมาก่อนเลย ก็ทดลองเลือกเฟ้นยกมา Design Principle สักชิ้นลงมาประยุกต์ใช้แลดูครับผม ไปดู Principle สถานที่ข้าพเจ้าอธิบายมาแยกออกมองดูห้ามเป็นต่อ ว่ามันจะลุ้นถึงขนาดไหนกันProximityงานเข้ากลุ่มกลุ่มสรรพสิ่ง Component บนบานศาลกล่าว UI ตรงนั้นเป็นอันสถานที่สำคัญ เพราะว่าในที่ UI เอ็ดหน้าตาจักจำเป็นต้องกอปรจากไปเช่นกันหลายด้าน อาทิ การเทข่าวสาร ปุ่มต่าง ๆ หรือว่าข่าวสารแห่งหนแสดงผลมอบผู้ใช้รับทราบ ก็เพราะว่าหากดิฉันจับกุมทุกสิ่งทุกอย่างมายัดร่วมกดห้ามในความไกลแห่งหนเสมอกัน โน่นจักทำเอาผู้บริโภคเหลือบเห็นชิ้น ๆ โดดบนบานศาลกล่าวจอ แทนที่จะมองเห็น Component ไม่ก็หมู่ของประกาศครอบครองส่วน ๆ ดังนี้เป้าหมายหลักสรรพสิ่งการสร้าง Proximity ถือเอาว่า งานทำเอาผู้บริโภคเหลือบเห็นแบบสร้างของหน้าตา UI ด้วยกันลำดับชั้นสิ่งของข่าวสารทดลองอุปไมยก่อนกับพระขนองใช้คืน Proximity ขอรับ ข้างขวามือจักดูสะดวก และมองเห็นประกาศเป็นส่วน ๆ มากกว่า เพิ่มเติมอีกนิด คือว่าแห่งหนข้าพเจ้าบ่งบอกแหวแยกออกเว้นระยะไกลลิบ เกล้าผมว่ามนุชแห่งหนริเริ่มดีไซน์ใหม่ ๆ มักมีเรื่องมีราวคดีการกำทีดระยะ ซึ่งสมมติว่าอิงตาม Ant Design แววจักจำแนกคลอดไว้เป็น 2 ห่างไกล ถือเอาว่า Vertical (แนวดิ่ง) ด้วยกัน Horizontal (แนวยาว) ด้วยกันแววก็จะแบ่งเหตุไกลลิบคลอดครอบครอง 3 ช่องว่าง รวมความว่า Small, Medium, Large ซึ่งมันก็ใช้งานสะดวกบริสุทธ์ แต่ว่าด้วยตัวฉันเองตรงนั้นจักขีดคั่นละม้าย ๆ กัน ทว่าข้าพเจ้าจะชดใช้ 8pt Grid System จับตัวจำกัด เปล่าให้ตัวเองเแหว่งเว้ใจับการเว้นระยะห่างไกลเต็มแรงนัก ใครแยแสเสริมก็สมรรถอ่านได้ขนมจากเรียงความของข้าพเจ้าก่อนหน้านี้ครับผมใช้ 8pt Grid System กับธุรกิจ UI Design บนบาน SketchAlignmentแห่งหัวข้อตรงนี้ดิฉันจักตาขอแนะนำแยกออกทุกคนรู้จักมักคุ้นกับดัก Law of Continuation ซึ่งดำรงฐานะระเบียบหัวข้อเอ็ดที่รายงานไว้ตวาดมนุษย์เรานั้นจักส่ายตาไปจากไปติดตามทางตรง หรือว่าเส้นโค้งจากสัณฐานต่าง ๆ ตามลำดับ เพื่อที่จะแลดูแหวอันเหล่านั้นประกอบด้วยความเกี่ยวพันกันยังไงมนุษย์ฉันจักรู้ในสิ่งสถานที่ดิฉันเห็นเดิมที และจะรู้ฉบับร่างนั้นจากไปเรื่อยๆ ๆ สมมติว่าจักตรงๆก็ซื่อแยกออกหมด หากจักดุ้งก็แอ่นแยกออกสิ้น แห่งการออกแบบ UI ก็เช่นกัน การแจ๋ Alignment จะเป็นเหตุให้ลูกค้ามีความตระหนักมากขึ้น ด้วยกันอีกต่างหากเป็นเหตุให้พวกแววรับรู้ข่าวเจริญขึ้นไปเช่นกัน คำอธิบายเพิ่มเติมจาก Ant Desing แววจักแบ่งแยก Alignment คลอดเป็น 3 ชนิด ซึ่งก็กระแทกข้าพเจ้าครบ ๆ เพราะยุคฉันดีไซน์จำเดิม ๆ ตรงนั้น บอกตามตรงแหวไม่มีการศึกษาคดี Alignment พ้น และเกล้าผมเคยทำผิดมาทั้งหมดภาพร่างหลังจากนั้น 555551.Text Alignment บ่งบอกตรง ๆ ว่าสมัยฉันออกแบบนวชาต ๆ ตรงนั้น สมัยที่จำต้องแก่ทะเล้นข่าวสารยาว ๆ หรือไม่ก็ Content แห่งหนเป็นรูปเป็นร่างบันทึกเยอะ ๆ เกล้าผมนี่งัดแงะยกมาความตรัสรู้จารึกเล่มขึ้นไปมาเกินครับผม จุดสำคัญระยะแรกจำเป็นต้องสรุปหน้าตา…หมดสิขอรับ !! ก็เพราะว่าสิ่งกลมๆนำสายตาสรรพสิ่งลูกค้าแทนที่จะประกอบด้วยวงกลมลำพัง แม้ว่าแววหวนกลับจำต้องประกอบด้วยถึง 2 สิ่งกลมๆ แถมพกเป็นฉบับร่างตรงนั้นรวมหมดหน้า ทำให้ผู้บริโภคดูหลังจากนั้นอารมณ์เสียขนานใหญ่ ปัญหานี้ตกลงไม่ผิดเยียวยาเจียรครับผม ด้วยการทำให้เสมอมอบวงกลมนำสายตาเหลือหลอเพียงสิ่งกลมๆโดด แค่นี้ก็ลุ้นคว้าจากนั้นมานะบากบั่นอย่าให้มีสิ่งกลมๆจับสายตาอนันต์เกินควร มอบ Alignment แถวเดียวกัน ด้วยกันจัดกลุ่มพร้อมด้วย Proximity จักเป็นต่อ2. Form Alignment โจทย์ตรงนี้ก็ตรากตรำเท่าๆ กันครับ สมัยอีฉันทำพวกสิ่งของการเทข่าว ซึ่งมันก็จะมี Textfield มากมายสิ่งรวม ๆ ห้ามสิงสู่ ทีนี้เจ้านาย Label เกล้าผมก็แก่ Alignment ให้เลี่ยนสนิทซ้ายกันรวมหมดพวก โจทย์ก่อกำเนิดขอรับ ความแตกต่างระหว่าง Textfield ที่ประกอบด้วย Label ห้วนกับดักแวง มันช่างน่าอับอายมากหลาย ก็เกินขบปัญหาเจ้ากรรมตรงนี้ด้วยการหยิบยกหมวด Label ลงมาชิดขวารับช่วงครับผม ซึ่งอันไหนมันแวง ก็ให้มันแวงคลอดข้างพามจากไปให้ผู้ช่วยเหลือนำสายตาสิงสู่จวนกัน เพียงนี้ก็ลุ้นลด Contrast ลงไปคว้า3.Numbers Alignment จำต้องบ่งบอกว่าข้อความตรงนี้ดำรงฐานะเทียบเท่าบอสเนื้อตัวบ๊วยด้วยว่าข้าพเจ้าเกิน ด้วยเหตุที่เกล้าผมทำสิงสู่ในเลยเวลาของ Product ที่ครอบครอง FinTech เพราะฉะนี้การเปรียบเทียบเปรียบเทียบในคดีสิ่งของตัวเงินมันจำเป็นจะต้องมีแม่นมั่น ด้วยกันข้าพเจ้าก็คุ้นชินคลาดเคลื่อนมาต่อจากนั้น เนื่องจากขับดันพูดสอดหยิบยกตัวเลขสนนราคาจากไปแนบเนียนข้างซ้าย ทำให้เกิดโจทย์ระยะเวลาเปรียบเทียบเร็ว เพราะว่าอันประธานในที่การรับรู้ความเกี่ยวพันการเปรียบวัดจำนวน หรือว่าผลรวมทรัพย์สมบัตินั้นมันรวมความว่าปริมาณเสา ความตรัสรู้เลขคิดรวดเร็วนี่ลอยละล่องขึ้นไปลงมาเลยครับผม ครุ่นคิดคล่อง ๆ มันเฉกดิฉันริเริ่มตั้งขึ้นทดยุคขั้นแรกแห่งหนนำเสาให้แถวเดียวกันนั้นแหละ คนเราจะคุ้นเคยฉบับร่างตรงนั้น ก็เลยแก้ปัญหานี้เช่นกันงานจับตัวมันชิดขวามอบหลักเลี่ยนระดับเดียวกัน เพียงเท่านี้ก็มองดูสะดวกขึ้นไปหลังจากนั้นหากเหลือบเห็นจำนวนสถานที่ชดใช้ในที่ปลายเปรียบเทียบ หรือว่าการคำนวณก็จ้าแยกออกชิดขวาเก็บหนอครับในที่เรียงความตรงนี้เกล้าผมโหยแยกออกเป็นข้อเขียนประเดิมสรรพสิ่งมนุชสถานที่อยากออกแบบ UI แม้ว่าไม่มีดลในที่เหตุสรรพสิ่งการดีไซน์ลงมาก่อนกำหนดเกิน แหวแน่ๆ ๆ ต่อจากนั้นตัวเราเองเท่าเจริญรอยตาม Principle ตรงนี้ ก็ทำเอา UI อะเคื้อขึ้นได้มา เกล้าผมก็ยังคงเจริญรอยตาม Principle กลุ่มนี้ อาจทะเลาะวิวาทการเลือกสีแห่งหนชดใช้บ้าง แต่ว่าฉันบอกพ้นสั่งการมีเซนส์ในที่ความสรรพสิ่งความงดงามจักลุ้นยกสถานภาพกิจธุระสิ่งของฉันมอบเป็นระเบียบขึ้นอีก สมมติว่าได้โอกาสก็จะมาเผย Design Principle พร้อมทั้งยกตัวอย่างมามอบดูกันอีกหนอขอรับ เชิงอรรถAnt DesignLaws of Proximity, Uniform Connectedness, and Continuation — Gestalt Principles (2)ข่าวสารผู้แต่ง Arnon ChonrawutUX/UI Designer @ Billmeติดตามผลงานอื่นสรรพสิ่งคนเขียนประสกเอ็งตรงนี้ถึงที่เหมาะ https://medium.com/@ArnonC