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

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

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

กรอบการออกแบบคืออะไร?

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

บ่อยครั้งงานนี้ซ้ำซากและสามารถรวมเข้าด้วยกันและทำให้มีประสิทธิภาพมากขึ้นโดยการสร้างระบบที่มีความสัมพันธ์กัน รูปแบบ และส่วนประกอบ กล่าวอีกนัยหนึ่ง กรอบการออกแบบ .

กรอบการออกแบบช่วยแก้ปัญหาต่างๆ ได้แก่ :

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

ปัญหาแรก: ความไม่สอดคล้องกันในผลิตภัณฑ์

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

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

กรอบการออกแบบแก้ปัญหานี้โดยสร้างมาตรฐานที่สอดคล้องกัน

ปัญหาที่สอง: ช่องว่างในการทำงานร่วมกันและการสื่อสาร

บ่อยครั้งในระหว่างขั้นตอนการพัฒนาเมื่อมีสมาชิกในทีมหลายคนที่เกี่ยวข้องกับการทำงานออกแบบในหลาย ๆ จุดในกระบวนการอาจทำให้เกิดความสับสนได้หากไม่มีชุดมาตรฐานที่จะแนะนำทีม

ผังบัญชีการเงินส่วนบุคคล

กรอบการออกแบบช่วยเพิ่มการทำงานร่วมกันและประสิทธิภาพโดยการปรับปรุงกระบวนการสื่อสารให้มีมาตรฐานและทิศทางที่ชัดเจน ไม่ต้องเสียเวลาวิ่งไปมาอีกต่อไปโดยพยายามคิดว่าสีหรือแบบอักษรใดที่จะใช้ถูกต้อง

ปัญหาที่สาม: การเปลี่ยนแปลงการออกแบบขั้นตอนสุดท้าย

นักออกแบบต้องเปลี่ยนสีครั้งเดียวกี่ครั้งในไฟล์ออกแบบที่มี 120 อาร์ตบอร์ดที่พัฒนาไปแล้ว จำเป็นต้องเปลี่ยนไอคอนที่เป็นส่วนประกอบ 200 ชิ้นกี่ครั้ง?

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

วิธีสร้างกรอบการออกแบบ

ตอนนี้เรารู้แล้วว่ากรอบการออกแบบคืออะไรและปัญหาที่แก้ไขได้แล้วเรามาพูดคุยกันเกี่ยวกับการสร้าง (และสิ่งที่อยู่ในการดาวน์โหลดชุด UI ของ Sketch UI ที่ให้ไว้ในบทความ)

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

ลำดับชั้นของกรอบการออกแบบ

ในการสร้างกรอบการออกแบบที่ใช้งานได้ดีให้เริ่มต้นด้วยการตั้งค่าลำดับชั้นของภาพที่มั่นคง ออกแบบส่วนประกอบที่มีอยู่ทั่วไปทุกหนทุกแห่งเช่นสีและตัวอักษรก่อน จากนั้นทำงานให้เล็กลงเช่นปุ่มและส่วนประกอบอินพุต ให้คิดว่ามันเหมือนกับการสร้างบ้าน - สร้างรากฐานก่อนจากนั้นจึงเพิ่มชิ้นอื่น ๆ เมื่อโครงการดำเนินไป

สี

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

แนวปฏิบัติที่ดีคือการแบ่งสีออกเป็นกลุ่ม:

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

ตาราง: พื้นที่ออกแบบ

เมื่อเลือกสีแล้วขั้นตอนต่อไปคือการตั้งค่าเส้นตาราง เส้นตารางช่วยให้ส่วนประกอบอื่น ๆ ทั้งหมดในหน้าอยู่ในตำแหน่งที่ถูกต้องและเป็นระเบียบ นี่คือพื้นที่ออกแบบโดยรวม

กริดมีสองประเภท: แนวตั้ง และ แนวนอน .

เส้นตารางแนวตั้งเป็นเส้นที่ใช้กันมากที่สุดและช่วยให้ทุกอย่างอยู่ในแนวนอน มีระบบกริดที่เป็นที่นิยมมากมายเช่น Bootstrap หรือตาราง 960px ที่เก่ากว่า

เส้นตารางแนวนอนไม่ใช่เรื่องธรรมดา เส้นตารางแนวนอนใช้สำหรับการพิมพ์ สร้างจังหวะแนวตั้งสำหรับย่อหน้าและพบเห็นได้ทั่วไปในหนังสือพิมพ์

ตัวดัดแปลง: กฎโวหาร

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

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

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

ไฟล์ต้นฉบับ c++

เทคนิคนี้ช่วยให้ นักออกแบบ เพื่อมุ่งเน้นไปที่ UX มากกว่าลักษณะของส่วนประกอบ UI นอกจากนี้ยังทำให้ง่ายต่อการกลับไปที่รูปร่างพื้นฐานเปลี่ยนรูปแบบ (เช่นรัศมีมุม) และทุกสิ่งที่เชื่อมต่อจะอัปเดตโดยอัตโนมัติ

วิชาการพิมพ์: เนื้อหา

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

ออกแบบรูปแบบและขนาดของส่วนหัวทั้งหมด (H1, H2, H3 ฯลฯ ) และย่อหน้า สำเนาหน้าแบบคงที่มักไม่มีรูปแบบ (สีหรือน้ำหนัก) แบบสไตลิสต์มากนัก รูปแบบเดียวที่เกี่ยวข้องกับรูปแบบการทำสำเนาหน้าคงที่คือไม่ว่าจะเป็นบนพื้นหลังสีอ่อนหรือสีเข้ม ดังนั้นจึงเป็นการดีที่สุดที่จะสร้างชุดสีสองชุดเพื่อให้แน่ใจว่าสำเนาหน้าแบบคงที่ใช้งานได้ทั้งสองอย่าง

สำเนาที่ปรากฏบนส่วนประกอบแบบโต้ตอบเช่นปุ่มหรือข้อความตอบรับของระบบอาจมีหลายรูปแบบ ตัวอย่างเช่นข้อความตอบรับของระบบอาจแสดงด้วยสีพื้นหลังที่แตกต่างกันสี่สีตามประเภทข้อความ (คำเตือนข้อผิดพลาดความสำเร็จ ฯลฯ ) - ป้ายกำกับปุ่มสามารถอยู่บนพื้นหลังที่แตกต่างกันได้

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

ไอคอน

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

เริ่มต้นด้วยไอคอนง่ายๆที่ใช้สำหรับการโต้ตอบกับ UI เช่นลูกศร 'เพิ่ม' (+) หรือ 'ปิด' (x) แนวทางปฏิบัติที่ดีคือการออกแบบให้มีขนาดต่างๆกัน (12px, 16px, 24px 32px)

ส่วนประกอบ

ปุ่มต่างๆ

ปุ่มเป็นส่วนประกอบที่สำคัญที่สุดอย่างหนึ่งในการออกแบบ UI และในช่วงหลายปีที่ผ่านมา ผ่านการเปลี่ยนแปลงมากมาย เนื่องจากเทรนด์การออกแบบมีมาเรื่อย ๆ

เมื่อออกแบบปุ่มอย่าลืมออกแบบ 'สถานะ' ของแต่ละปุ่ม ตามกฎแล้วปุ่มจะมีหลายสถานะและให้การตอบกลับด้วยภาพแก่ผู้ใช้เพื่อระบุสถานะปัจจุบัน (ไม่ได้ใช้งานโฮเวอร์กดปิดใช้งานอยู่ ฯลฯ )

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

วิธีที่สองคือการออกแบบสถานะทั้งหมดตามสถานะเริ่มต้น ตัวอย่างเช่นสร้าง หนึ่ง สัญลักษณ์ร่างที่จะเปลี่ยนสีความอิ่มตัวหรือความสว่างของแต่ละสถานะ

โปรแกรม c++ สุดเจ๋ง

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

ส่วนประกอบอินพุต

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

ส่วนประกอบที่ซับซ้อน

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

ส่วน

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

แนวทางปฏิบัติที่ดีที่สุดของกรอบการออกแบบ

ทดสอบกรอบการออกแบบอย่างต่อเนื่อง

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

ข้อมูลบัตรเครดิตฟรีที่ใช้งานได้ 2017

สร้างคอมโพเนนต์ UI แบบง่าย

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

อย่าเน้นรูปแบบเดียว

กรอบการออกแบบควรเป็นแบบสากลดังนั้นแทนที่จะมุ่งเน้นไปที่สไตล์เฉพาะให้เน้นที่ส่วนประกอบที่สามารถใช้เพื่อสร้างสไตล์ได้

สร้างกรอบการออกแบบของคุณเอง

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

คุณพร้อมที่จะเริ่มกรอบการออกแบบของคุณเองหรือยัง?

ดาวน์โหลดไฟล์ Sketch ที่นี่ . มีคำแนะนำเกี่ยวกับวิธีการใช้งาน

ระบบการออกแบบที่สร้างแรงบันดาลใจและกรอบ UI

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

การออกแบบวัสดุของ Google - ปัจจุบันเป็นหนึ่งในกรอบการออกแบบที่ได้รับความนิยมมากที่สุดในโลก เรียนรู้วิธีที่ Google จัดวางขั้นตอนการออกแบบทั้งหมดและสร้างลำดับชั้นของส่วนประกอบที่มีประโยชน์

ภาษาออกแบบของ IBM - IBM แบ่งปันกระบวนการออกแบบทั้งหมดของพวกเขารวมถึงคำอธิบายอย่างละเอียดในทุกรายละเอียด พวกเขายังแบ่งปันมากมาย ทรัพยากร จากภาษาการออกแบบจากไอคอนธรรมดาไปจนถึงไลบรารีแอนิเมชั่น UI

Atlassian - แหล่งเรียนรู้ที่ยอดเยี่ยมอีกแห่ง ของพวกเขา คู่มือรูปแบบผลิตภัณฑ์ เป็นระบบการออกแบบที่ยอดเยี่ยมในการศึกษา พวกเขาแบ่งปัน แพ็คเว็บ GUI ไฟล์ Sketch ที่มีส่วนประกอบและแนวคิดมากมาย

•••

อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:

• eCommerce UX - ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อม Infographic)
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
• พอร์ตการลงทุน UX Designer ที่ดีที่สุด - กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบที่คาดหวัง: วิธีสร้างประสบการณ์ผู้ใช้ที่มีมนต์ขลัง