ออกแบบ-UI-2

ประยุกต์การใช้งาน Sketch Symbols เพื่อพอกพูนเหตุ consistency และ speed ณงานดีไซน์กระผมนึกดูดุทั้งหมดแห่งหนอ่านข้อเขียนตรงนี้ทรงไว้คุ้นมองเห็น Lego มาเปล่าจังก็โหรง มั่งก็คงไว้ชินโจ้มา ด้านกระผมสมัยลูกก็เล่นสิ่งของเสี่ยวด้านเรือนเอาทำแทน เมื่อโตขึ้นไปมาคว้าได้โอกาสดำเนินการเลยเวลา UI Design ดีไซน์เจียรครู่หนึ่งเอ็ด ก็ทำให้กระผมหวนนึก Lego แห่งหนเกล้าผมคุ้นชินเล่นแห่งสมัยลูกส่วนประกอบสรรพสิ่งจอ กับองค์ประกอบสิ่งของ Legoเมื่อคว้า Wireframe มาแล้ว อีฉันจำต้องมาลองดูก่อนกำหนดดุณแต่ละหน้าจอประกอบเจียรเช่นกันส่วนประกอบกระไรมั่ง ที่แบบอย่างสิ่งของบทความตรงนี้กระผมจะเล่าแอปพลิเคชันแห่งหนเก็บชดใช้ติดตามตำแหน่งการส่งของจากเลขทะเบียน (คล้ายคลึง ๆ กับดักแอปพลิเคชัน Track & Trace สรรพสิ่งไปรษณีย์แหลมทอง)หน้าจอต้นเค้าแห่งเราได้มาปัญหามามอบออกแบบแจกสวยหรูก่อนที่จะเริ่มยอมกิ่งไม้ปฏิบัติการ จำต้องมามองดูห้ามก่อนดุเรามองเห็นเช่นไรแห่งหน้าจอบ้าง ให้มองเหมือนกันงานประกบ Lego ตวาดถ้าหากก่อเกิดแววแจกถ่ายรถขึ้นไปมาสักคัน เราจำเป็นต้องใช้จิกซอว์ต้นร่างไหนมั่งเพื่อประกอบขึ้นลงมาครอบครองรถยนต์ Lego หนึ่งคันแยก UI ออกมาครอบครองซีก ๆ เพื่อดูแหวอีฉันจักจำเป็นต้องสร้างกระไรขึ้นมาบ้างภายหลังที่เราเหล่แปลนคร่าว ๆ จากนั้น เราจักสมรรถแบ่ง UI ออกมาดำรงฐานะส่วนต่าง ๆ ที่ซีกนี้อีฉันจักเรียกหาตวาด Component ซึ่งขนมจากแบบอย่างเราจะสมรรถแบ่งออกมาได้หมดด้วยกัน 3 Component ถือเอาว่าNavigation BarCell TitleCellโน่นแปลตวาดดีฉันจำต้องออกแบบหมดด้วยกัน 3 Component แล้วหยิบยกลงมากอปรกักคุมดำรงฐานะ 1 เค้าหน้า ตรงนี้ทั้งหมดคงรู้ตวาดเลี่ยนดังการหยิบยกจิกซอว์ Lego ภาพร่างแตกต่าง ๆ มากอปรกันพอให้ได้มารถ Lego เอ็ดคัน แต่ที่ธุรกิจดีไซน์เลี่ยนไม่มีใครสร้างตัวทาบ Lego ขึ้นลงมาแจกดีฉัน ดังนั้นดีฉันแล้วจึงต้องสร้างตัวเองดาม Lego ขึ้นไปมาใช้คืนอีกด้วยร่างกายของอีฉันเองเริ่มสร้าง Component ของตนเองครั้นดีฉันแจ้งจากนั้นแหวจอของดีฉันกอปรไปด้วย Component อย่างไรบ้าง เราจำเป็นต้องลงมาวิเคราะห์กันอีกแหวแห่ง Compomnent นั้น มีข้อปลีกย่อยดำรงฐานะเช่นไร เรามาเริ่มจองที่ Navigation Bar ก่อนพ้นเหนือกว่าครั้นนำ Navigation Bar มาพินิจพิจารณาดูก็จักมองเห็นตวาด เลี่ยนกอปรจรอีกด้วยเรื่องเบ็ดเตล็ดต่าง ๆ ดังนั้นPage Label (ชื่อของใบหน้า)Status Bar (ตระตำแหน่งสิ่งของเครื่อง)Buttonรายละเอียดก๊กตรงนี้เรียกตวาด Element ก็ถือเอาว่าแยกย่อยจี๊ดลงมากจาก Component อีกที แล้วก็ลงมาเริ่มสร้าง Component เจ้าตัวตรงนี้กันพ้นแจกดีฉันถลกรายการ Sketch แล้วสร้างไฟล์ใหม่ขึ้นไปลงมา สร้าง Artboard แจกเป็น iPhone แห่งหนมีสัดส่วนจอ 375 x 667 (ปัจจุบันนี้ตกว่า iPhone 8) ก็จะได้แปลนตนข้างล่างนี้คว้า Artboard ขนาด 375 x 667 ลงมาจากนั้นกระทรวงวิทยาศาสตร์ เทคโนโลยีและสิ่งแวดล้อมว !!!หลังจากนั้นสร้างรูปสี่เหลี่ยมแห่งมีขนาด 375 x 93 เพื่อที่จะสร้าง Background ของร่างกาย Navigation Bar กับ ผลัดกันชื่อจริง layer เป็น background ติดสอยห้อยตามทิวภาพล่างคว้า Background สิ่งของร่างกาย Navigation bar ลงมาจากนั้น เลือดนกสดใสสัดส่วน 375 x 93ที่ส่วนของ Status Bar ตรงนั้นค่อนข้างจะยุ่งยากหน่อยแจกโหลดเอาจรใช้ได้ก่อนพ้นเพื่อที่จะเรื่องว่อง จิ้มนี้พ้น หล้งจากแห่งหนโหลดไปแล้ว ทำให้เรียบสัดส่วนเหลือหลอ 375 x 20 ก่อนกำหนด หลังจากนั้นเคลื่อนย้ายจรวางข้างบนสุดสรรพสิ่งจอ หลังจากนั้นทำให้เสมอมอบอยู่ใจกลาง ก็จะได้มาแปลนด้านล่างได้มา Status bar ทวีคูณมาประการแก่งล ๆ โดยไม่ต้องสร้างเองมาซึ่งกันและกันแห่ง Page Label เพราะดีฉันจักสร้างดำรงฐานะ Text แปลนกระเสียนซ้าย ไกลลิบจากชายซ้าย ด้วยกันข้างล่างขนมจากร่างกาย background ประการละ 16px อย่าลืมสับเปลี่ยนจุดสำคัญ text เป็น Package เช่นกันนะ และสับเปลี่ยนชื่อเสียงเรียงนาม ตัว layer ดำรงฐานะ page-label ตามทัศนียภาพข้างล่างได้มา textlabel ภาพร่างกระเสียนพามมาจากนั้น ส่วน Textstyle ติดสอยห้อยตามด้านขวามือเลยขอรับต่อจากนั้นก็หลงเหลือปุ่มอีก 2 ปุ่ม คือปุ่ม Setting และปุ่ม Add Item กระผมดุปุ่มแห่งมีตัวหนังสือเลี่ยนมองดูธรรมดาเจียร เกินจักชดใช้ปุ่มที่เป็นภาพร่างไอคอนแทน ผมจักกำหนดให้ปุ่มมีสัดส่วน 32 x 32px เท่ากัน ริเริ่มอีกด้วยงานสร้างปุ่ม Add item ที่อาศัยชายขวาสุดๆก่อน (ทำได้ผลปุ่มนึง จากนั้น copy ไปสร้างอีกชิ้นจักสะดวกกระทั่ง) ช่วงแรกแจกสร้างสี่เหลี่ยมด้านเท่าที่มีสัดส่วน 32px ขึ้นไปลงมา เพื่อจะครอบครอง background แจกกับดักปุ่ม แปะไกลลิบจากขอบข้างทักษิณ กับด้านล่างสรรพสิ่ง background ร่างกาย navigation bar ด้านละ 16px อย่าหลงผลัดกันชื่อ layer เป็น button-bg ตามทัศนียภาพข้างล่างได้มา background สรรพสิ่งเนื้อตัวปุ่มมาจากนั้น ขนาด 24pxต่อจากนั้นเราจักเหยาะไอคอนแจกกับดักปุ่มห้าม เพราะจิตรเลขาก็ จุ่มตรงนี้ คว้าเกิน กำหนดสัดส่วนให้เป็น 24 x 24px หลังจากนั้นนำเจียรแหมะตอนกลางสิ่งของ button-bg ตามทิวภาพข้างล่างเท่านี้ตกลงปุ่ม Add item ภาพร่างปลักล ๆ หลังจากนั้นภายหลังคว้าปุ่มแล้วเราก็ group เนื้อตัว element สิ่งของปุ่มเข้าด้วยกัน จากนั้นขนานนามตวาด buttongroup ตัว element สิ่งของปุ่ม พอให้ง่ายประกบการจัดการแล้วให้ดีฉัน copy เนื้อตัว button แห่งดีฉันเพิ่งจะ group ไปก่อนหน้า จากนั้นวางแจกห่างจากปุ่ม add-item ไปมุขด้านซ้าย 8px และเปลี่ยนรูปดำรงฐานะอีกตัวติดสอยห้อยตามทิวภาพด้านล่างจากนั้นเราก็ได้ปุ่ม setting และปุ่ม add item ทั้งสองหลังจากนั้นดังที่ผมเปล่าพอใจเช็ด Navigation Bar เลือดนกเกิน รู้สึกแสบตาแปลก ๆ พ้นสับเปลี่ยนให้ดำรงฐานะสีขาวผลัดเปลี่ยน จากนั้น group เนื้อตัว element ทั้งหมด ครบครันเรียกแหว navigation-bar เป็นสิ่งสำเร็จเกล้าผมแอบซ่อนใส่คนสนับสนุนด้านล่างทวีคูณเข้ามา เพื่อที่จะย้ำแจกเห็นแหวดำรงฐานะ Navigation barแล้วให้อีฉันคลิกขวาแห่งหน navigation-bar แล้วเลือกคัด create symbol เท่านี้ ดีฉันก็จะได้ตัวทาบ lego อันเริ่มแรกสรรพสิ่งอีฉันจากนั้นหลังจากที่เราสร้าง symbol หลังจากนั้นตัว sketch จักกระทำก่อสร้าง page ทวีคูณลงมาชื่อว่า Symbols เอาไว้หยุด symbol ต่าง ๆ แห่งดีฉันสร้างขึ้นมา เค้าหน้านี้ก็เปรียบเสมือนถังใส่ Lego สรรพสิ่งอีฉันนั่นเองถังเหยาะ Lego สิ่งของกระผมณ เวลานี้มีจิกซอว์ที่ชื่อเสียงเรียงนาม navigation-bar แล้วเนื้อตัวนึงครั้นหวนกลับเจียรแห่งหน Page 1 ก็จักเห็นแหวไอคอนข้างหน้า navigation-bar กลายเป็นเครื่องหมายการค้า Symbolชำแหละ Component ออกลูกดำรงฐานะเผชิญดู ๆเมื่อเราได้มา component ลงมาแล้ว เราจำเป็นต้องลงมาสำรวจอีกตวาด ร่างกาย Component นั้นชำแหละได้อีกหรือเปล่า (มันยังจี๊ดไม่พอ จำเป็นต้องย่อยกว่านี้อีก) โดยหลักงานที่งานเชือดสรรพสิ่งเกล้าผมนั้น ต้องตอบปัญหานี้ก่อนกำหนด “แห่งแต่ละ element ของ component ประกอบด้วยความเปลี่ยนแปลงหรือเปล่า ? แม้ประกอบด้วยก็แยกย่อยมันออกเจียรเป็น symbol ซะ”เช่น navigation-bar อาจจะมี ปุ่ม แห่งหนผิดแผกกักคุมณแต่ละเค้าหน้า หรือว่าบางใบหน้าก็ปราศจากปุ่มเกินมีแม้ว่า text-label เกล้าผมก็จะแยกย่อยปุ่มออกมาเป็น symbol อีกสิ่งนึงขนมจาก navigation-bar ดีฉันจักพานพบตวาด button นั้นได้โอกาสที่จะปรับเปลี่ยนที่แต่ละหน้าตา ดีฉันแล้วจึงย่อย button ออกมาดำรงฐานะ symbol ใหม่ ด้วยกันเรียกดำรงฐานะ button/add-item และ button/setting จะได้ติดตามตนข้างล่างหลังจากที่ดีฉันก่อสร้าง button symbol จากนั้น ให้กลับอีกต่างหากกิจธุระอีฉันดีไซน์เก็บ เผชิญดูแห่งหน overrides ทางปีกขวามือจักมองเห็นแหวประกอบด้วย dropdown ตรงๆถ้อยคำตวาด button แจกคัดเลือก ทวีคูณเข้าเมื่อแยกย่อยหลังจากนั้นจักมีตัวเลือกสิ่งของปุ่มขึ้นลงมาแสดงเร็วข้อมูลออกจากงานจำแนกปุ่มออกมาเป็น symbol เช่นนี้ จะทำให้ดีฉันสมรรถผลัดกันปุ่ม ลดปุ่มสรรพสิ่ง navigation-bar ได้ โดยแห่งไม่ต้องจรสร้าง navigation-bar ใหม่มอบซับซ้อน (มิเช่นนั้นแอปพลิเคชันมี 3 เค้าหน้า จำต้องก่อ navigation-bar ก่อตั้ง 3 ต้นร่าง)รวมหมด 3 หน้าตาใช้คืน navigation-bar อันเดียวกัน เสียแต่ว่าตั้งค่า overrides ไม่เหมือนกันดีฉันจะทำเช่นนี้เช่นเดียวกันกับดักตัว Cell Title ด้วยกัน Cell แต่ ผมจักไม่บ่งบอกวิธีทำหลังจากนั้นนะ หิวให้ทุกคนทดลองพินิจพิจารณาด้วยตัวเองแลดู ซีกสิ่งของกระผมก่อได้ผลจากนั้นหน้าตาก็จักออกมาคาดคะเนตรงนี้ เอาไปดูครอบครองประเพณีได้มาหนอครับข้างขวามือดำรงฐานะอันที่กระผมออกแบบเป็นการจากนั้น บุ้ยให้ดุเนื้อตัว Cell ตรงนั้นเกล้าผมใช้คืน symbol ย้ำกักคุม แม้ว่ามี overrides แห่งผิดแผกแตกต่างกันลงมาจับใจความห้ามอีกครั้งแหวจำต้องทำเช่นไรบ้างทำกันลงมาอนันต์เว้น ลงมาลองทบทวนกันงามตากว่าตวาดอีฉันจำต้องสร้างเช่นไรมั่งตั้งแต่เริ่มพอเราได้ตัว wireframe มาหลังจากนั้นให้ดีฉันเผชิญดูก่อนกำหนดแหวแห่ง UI สรรพสิ่งจอนั้นกอปรเจียรเช่นกัน component อย่างไรบ้างสร้าง symbol ติดตาม component แห่งอีฉันวิเคราะห์ออกมาคว้าวิเคราะห์มองดูดุ element ที่อาศัยณ component นั้นได้โอกาสที่จะเปลี่ยนแปลงไหมแยกย่อย element แห่งหนได้โอกาสปรับเปลี่ยนออกมาครอบครอง symbol อีกทีSymbol นับถูกฟ้องสามารถที่เด่นสรรพสิ่งรายการ sketch พ้น การทำกระนี้คงใช้เวลาแห่งช่วงแต่ต้น เสียแต่ว่าที่งานออกแบบครั้งถัดจาก ไม่ก็การเยียวยาการงาน จะทำกันได้อย่างเร็วเต็มแรง ๆ และมีเหตุ consistency สูง เพราะที่แต่ละหน้าจอใช้ symbol เนื้อตัวเดียวกัน ดีไซน์หน้าใหม่ก็ชดใช้ symbol ร่างกายเดิม จะเยียวยารายละเอียดสรรพสิ่ง component ก็แก้ไขแห่งหน symbol แห่งผู้เดียว ไม่ต้องไปนั่งไล่แก้ตาเดินเว้นใบหน้า ชีพ designer ก็จะงดงามไปอีกชั้น ไฟล์ Sketch แห่งหนผมทำได้ผลจากนั้น จิ้มตรงนี้เกี่ยวกับใครแห่งไม่เคยใช้รายการ Sketch สามารถดาวน์โหลดมาทดลองใช้ฟรีได้มา 14 ทิวานะขอรับ จุ้มนี้ข้อมูลผู้เขียน Arnon ChonrawutUX/UI Designer @ Billmeติดตามผลงานอื่นสิ่งของผู้เขียนแกตรงนี้เหมาะ https://mediumมันสมองcom/@ArnonC