คู่มือการรับความท้าทายและความเป็นเลิศในการฝึกงานด้านการออกแบบ UX ของคุณ

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

ทุกอย่างเริ่มต้นในเดือนพฤษภาคม 2018 เมื่อฉันก้าวลงจากเครื่องบินในกรานาดา ประเทศสเปน โดยมีกระเป๋าเดินทางอยู่ข้างๆ แล็ปท็อปที่ด้านหลัง และภาษาสเปนที่ขึ้นสนิมในหัวของฉัน นี่เป็นครั้งแรกของฉันในยุโรป และฉันจะอยู่ที่นี่เป็นเวลาสามเดือนข้างหน้าเพื่อฝึกงานด้านการออกแบบ UX ที่ Badger Maps ฉันยังคงเป็นมิตรกับสิ่งแวดล้อมใน UX โดยได้เรียนรู้เกี่ยวกับเรื่องนี้มาเกือบปีแล้ว แต่ฉันก็รู้สึกว่าพร้อมและกระตือรือร้นที่จะได้รับประสบการณ์ในสภาพแวดล้อมแบบมืออาชีพ

ปฏิบัติตามในขณะที่ฉันเรียนรู้วิธีใช้ความรู้ทางเทคนิคเพื่อทำงานออกแบบจริงที่ได้รับมอบหมายให้ฉัน:

• สร้างระบบการออกแบบสำหรับแอป iOS ของเราโดยใช้ Sketch
• ออกแบบคุณลักษณะใหม่ที่จะแสดงข้อผิดพลาดที่เกิดขึ้นในการนำเข้าข้อมูล
• เรียนรู้พื้นฐาน HTML, CSS และ Flexbox เพื่อนำการออกแบบของฉันไปใช้
• สร้างแอนิเมชั่นด้วย Adobe Illustrator และ After Effects

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

การอ่านที่แนะนำ : วิธีการลงพื้นที่ฝึกงานด้านการออกแบบกราฟิกอัตราแรก

บทที่ 1: เลโก้

งานแรกของฉันคือการสร้างระบบการออกแบบสำหรับแอป iOS ที่เรามีอยู่ ฉันเคยสร้างระบบการออกแบบสำหรับโปรเจ็กต์และแอปพลิเคชันของตัวเอง แต่ฉันไม่เคยทำแบบย้อนหลังและไม่เคยทำเพื่อการออกแบบที่ไม่ใช่ของฉันเลย ในการทำงานนี้ให้สำเร็จ ฉันต้องวิศวกรรมย้อนกลับแบบจำลองใน Sketch; ก่อนอื่นฉันต้องอัปเดตและเพิ่มประสิทธิภาพไฟล์เพื่อสร้างระบบการออกแบบ

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

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

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

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

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

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

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

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

บทที่ 2: การออกแบบ

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

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

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

วัตถุประสงค์

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

เรื่องราวของผู้ใช้

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

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

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

1. การนำเข้าจำนวนมากเทียบกับการนำเข้าอย่างต่อเนื่อง
   ขึ้นอยู่กับประเภทของผู้ใช้ มีสองวิธีในการนำเข้าข้อมูลไปยัง Badger หากทำผ่านสเปรดชีต การนำเข้าจะถูกจัดกลุ่มและเราจะสามารถเห็นภาพการนำเข้าในกลุ่มได้ อย่างไรก็ตาม ผู้ใช้ที่ผสานรวมกับ CRM จะต้องอัปเดตข้อมูลแบดเจอร์อย่างต่อเนื่องเมื่อทำการเปลี่ยนแปลงภายใน CRM การออกแบบจำเป็นต้องรองรับทั้งสองกรณีการใช้งาน
2. นำเข้าบันทึก
   เนื่องจากเป็นคุณลักษณะใหม่ เราจึงไม่แน่ใจในพฤติกรรมของผู้ใช้อย่างแน่นอน ดังนั้น การตัดสินใจว่าจะจัดระเบียบข้อมูลอย่างไรจึงเป็นเรื่องที่ท้าทาย เราควรอนุญาตให้ผู้ใช้เลื่อนดูอินฟินิตี้ในรายการประวัติของพวกเขาหรือไม่? พวกเขาจะค้นหาการนำเข้าเฉพาะอย่างไร พวกเขาควรจะสามารถ? เราควรแสดงกิจกรรมวันต่อวันหรือเดือนต่อเดือน?

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

กระบวนการออกแบบ

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

ความท้าทาย

1. การใช้ช่องว่าง

ทันทีที่ค้างคาว ฉันต้องการสำรวจข้อมูลที่เราต้องการแสดงบนหน้า มีรายละเอียดมากมายที่เราสามารถรวมไว้ได้ และแน่นอนว่าเป็นห้องที่ต้องทำ

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

นี่เป็นรุ่นสุดท้าย:

2. การนำทาง

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

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

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

การออกแบบแถบด้านข้าง : หลังจากที่ฉันตัดสินใจจะมีแถบด้านข้าง ฉันตัดสินใจเลือกข้อมูลที่จะรวมและวิธีแสดง

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

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

เมื่อออกแบบเสร็จแล้ว ฉันจึงย้ายไปใช้ HTML และ CSS

บทที่ 3: HTML/CSS

โครงการนี้เป็นประสบการณ์ครั้งแรกของฉันกับการเขียนโค้ดทุกประเภท แม้ว่าฉันจะพยายามเรียนรู้ HTML และ CSS มาก่อน แต่ฉันก็ไม่เคยไปถึงระดับความชำนาญเลย และอะไรจะดีไปกว่าการสร้างแบบจำลองของตัวเองขึ้นมา?

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

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

การนำ Flexbox ไปใช้นั้นประกอบด้วยการลองผิดลองถูกและการคัดลอกโค้ดแบบ Blind จำนวนมากในขณะที่ฉันตะเกียกตะกายผ่านเว็บไซต์ต่างๆ อ่านบทช่วยสอน และตรวจสอบโค้ด ด้วยคำแนะนำจากที่ปรึกษาของฉันตลอดกระบวนการนี้ ในที่สุดเราก็ลงมือทำได้ ฉันจะไม่มีวันลืมช่วงเวลาที่ในที่สุดฉันก็เข้าใจว่าโดยใช้ flex-direction: column ฉันจะรวมองค์ประกอบทั้งหมดไว้ในคอลัมน์เดียว และ flex-direction: row ช่วยวางไว้ในแถวเดียว

ตอนนี้มันสมเหตุสมผลมาก แม้ว่าความเข้าใจในตอนแรกของฉันจะตรงกันข้าม (ฉันคิดว่า flex-direction: column จะใส่องค์ประกอบในคอลัมน์ที่อยู่ติดกัน) น่าแปลกที่ฉันไม่ได้ตระหนักถึงสิ่งนี้จนกว่ารหัสจะทำงาน ฉันกำลังตรวจสอบรหัสของฉันและพบว่าฉันไม่เข้าใจเลย อะไรทำให้ฉันผิดหวัง? ใน CSS ของฉัน ฉันได้เขียนโค้ด flex-direction: row ในคลาสที่ฉันตั้งชื่อว่า column สถานการณ์นี้ค่อนข้างบ่งชี้ว่าประสบการณ์การเขียนโค้ดครั้งแรกที่เหลือของฉันเป็นอย่างไร แบบจำลองทางจิตของฉันไม่ค่อยสอดคล้องกับตรรกะของรหัส และพวกเขามักจะขัดแย้งกันและแยกทางกัน เมื่อสิ่งนี้เกิดขึ้น ฉันต้องย้อนกลับไป ค้นหาความเข้าใจผิด และแก้ไขรหัส

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

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

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

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

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

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

บทที่ 4: การทำงานกับเบบี้แบดเจอร์

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

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

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

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

สัญชาตญาณแรกของฉันคือลองใช้แอนิเมชั่นสต็อปโมชัน ฉันคิดว่ามันจะต้องดีมาก — a la Wallace และ Gromit แต่หลังจากลองครั้งแรก ครั้งที่สอง และครั้งต่อๆ มา เห็นได้ชัดว่าการดูรายการนี้ตอนเป็นเด็กไม่ได้เสริมทักษะที่จำเป็นในการทำสต็อปโมชันแอนิเมชันให้ฉันอย่างเต็มที่

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

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

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

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

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

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

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

บทสรุป

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

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

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