portaldacalheta.pt
  • หลัก
  • เทคโนโลยี
  • การจัดการวิศวกรรม
  • ผู้คนและทีมงาน
  • ส่วนหลัง
การออกแบบ Ux

ตายไปยังโครงร่าง ตรงสู่ความเที่ยงตรงสูง!



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

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



Death to Wireframes - ตัวอย่าง Wireframing มือถือ

ชุด Wireframes ความเที่ยงตรงต่ำของแอพมือถือ (โดย Sunbzy ).



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



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

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



ปัญหาเกี่ยวกับ Wireframes

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

กระบวนการออกแบบที่เน้นผู้ใช้เป็นศูนย์กลางการคิดในการออกแบบการสร้างต้นแบบ

กระบวนการออกแบบของคุณอาจมีขั้นตอนเหล่านี้ (ขอบคุณไฟล์ กลุ่ม Nielsen Norman )



ลองดูขั้นตอนการออกแบบสำหรับตัวอย่างเมื่อการออกแบบโครงร่างอาจเป็นปัญหาคอขวด

เหตุผลที่ 1: ลูกค้าไม่เข้าใจสิ่งที่พวกเขากำลังมองหา

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



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

ปัญหาคือโครงร่างเป็นนามธรรมมาก



พวกเขาอธิบายสิ่งที่เป็น ชอบ สิ่งนี้ แต่ไม่ใช่ ปัจจุบัน สิ่งที่จะสร้างขึ้น ในขั้นตอนนี้ wireframes จะมีภาพตัวยึดตำแหน่งและ TK ทุกประเภท (ที่จะมาถึง), FPO (สำหรับการจัดวางเท่านั้น) และ TBD (ที่จะตัดสินใจ) ดังตัวอย่างด้านล่าง

ตัวอย่าง Wireframe, mockup, prototype



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

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

เครื่องมือ Wireframe ตัวอย่างโครงร่าง

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

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

เหตุผลที่ 2: ไม่เหมาะสำหรับการทดสอบผู้ใช้เสมอไป

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

วิธีหนึ่งโดยทั่วไปในการทดสอบสิ่งต่างๆเหล่านี้คือการสร้างต้นแบบ

Wireframes สามารถและทำเพื่อสร้างต้นแบบได้ ทีมออกแบบ จำกัด เฉพาะขั้นตอนการทดสอบและฟังก์ชันการทำงานเท่านั้นและเนื่องจากไม่มีเลเยอร์การออกแบบภาพรูปแบบภาพที่มีผลต่อพฤติกรรมของผู้ใช้จึงสามารถเพิกเฉยได้อย่างง่ายดาย

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

บางครั้งการทดสอบสิ่งเหล่านี้ทั้งหมดร่วมกันแบบองค์รวมจะมีประสิทธิภาพมากกว่า

การออกแบบ UI ของเว็บไซต์ Haaretz

Haaretz ไซต์ในภาษาอังกฤษและฮิบรูมีการออกแบบ UI ที่แตกต่างกันมาก

ตรงประเด็น: ผลิตภัณฑ์หรือบริการหลายภาษา ภาษาอาจมีไวยากรณ์ตัวอักษรและความกว้างของอักขระที่แตกต่างกันซึ่งอาจส่งผลต่อการออกแบบโดยรวม

ยิ่งไปกว่านั้นเนื่องจากเนื้อหาที่คัดลอกมีผลต่อ UX การแปลเองจึงอาจส่งผลต่อ UX

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

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

ประเด็นสำคัญ: ควรเตรียม UI ที่มีความเที่ยงตรงสูงตั้งแต่เริ่มต้นโดยเฉพาะอย่างยิ่งสำหรับโครงการที่มีหลายภาษา

เหตุผลที่ 3: พวกเขาทำให้ชีวิตเป็นนรกสำหรับนักพัฒนาและ QA

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

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

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

ตัวอย่าง Wireframe ของเว็บไซต์, Wireframe ที่มีคำอธิบายประกอบ

โครงร่างคำอธิบายประกอบ

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

ข้อกำหนดการออกแบบภาพ styleguide

ข้อกำหนดการออกแบบภาพ

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

วิธีแก้ไข: ข้าม Wireframes

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

คุณอาจพิจารณาข้ามเฟสโครงร่างหากสิ่งเหล่านี้เป็นจริง:

มีวัสดุอ้างอิงที่มั่นคง

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

Styleguide ตัวอย่างจำลองไลบรารีคอมโพเนนต์

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

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

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

คำแนะนำสไตล์องค์ประกอบ UI ไลบรารีคอมโพเนนต์

ตรวจสอบว่ามีคำแนะนำสไตล์และไลบรารีคอมโพเนนต์อยู่หรือไม่

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

คุณได้กำหนดเวลาของการสร้างต้นแบบซ้ำ ๆ และการทดสอบไปพร้อมกัน

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

คุณสามารถฆ่านกสองตัวได้ด้วยหินก้อนเดียว คุณสามารถรับข้อเสนอแนะด้านภาพและ UI ควบคู่ไปกับข้อเสนอแนะ UX ของคุณและทำการเปลี่ยนแปลงทั้งหมดนี้ได้ในครั้งเดียว

ผู้เข้าร่วมการทดสอบของคุณมีความเป็นตัวอักษรมาก

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

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

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

การทดสอบผู้ใช้การทดสอบโครงร่างเว็บไซต์

การทดสอบการใช้งาน .

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

ลูกค้าของคุณมีเวลาและ / หรืองบประมาณ จำกัด

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

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

วิธีการฆ่า Wireframe Phase

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

ดังที่กล่าวมานี้เป็นกระบวนการ 'เทมเพลต' ที่คุณสามารถลองปรับให้เข้ากับเวิร์กโฟลว์ของคุณได้ในตอนแรกแล้วปรับแต่งเมื่อคุณได้รับการฝึกฝนมากขึ้นในการทำงานในลักษณะนี้

ขั้นตอนที่ 1: เริ่มต้นด้วยกระบวนการค้นคว้าและค้นพบตามปกติของคุณ

การสัมภาษณ์การสังเกตการณ์ภาคสนามการวิจัยบนโต๊ะการวิเคราะห์การแข่งขันไม่ว่าคุณจะทำอะไรตามปกติ (หรือมีกำหนดจะทำ) ให้ทำขั้นตอนนี้ให้เสร็จตามปกติ

ขั้นตอนที่ 2: ร่างเล็กน้อยไปพร้อมกัน

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

ร่างโครงร่างโครงร่างโครงร่างสำหรับต้นแบบเว็บไซต์

ร่างแนวคิดส่วนต่อประสานผู้ใช้ (โดย Miklos Philips ).

ขั้นตอนที่ 3: เตรียมเอกสารความเที่ยงตรงสูง

เปิดเครื่องมือออกแบบที่คุณต้องการและตั้งค่าเอกสารของคุณอย่างถูกต้อง เลือกขนาดอาร์ตบอร์ดและเริ่มสร้างรูปทรงกลุ่มและสัญลักษณ์ที่ทำซ้ำได้

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

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

สัญลักษณ์ร่างส่วนประกอบการออกแบบ UI

ตั้งค่าสัญลักษณ์การออกแบบ UI แล้ว ร่าง .

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

ขั้นตอนที่ 4: เริ่มออกแบบ

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

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

ในทำนองเดียวกันอย่าสร้างรายชื่อที่ทุกคนพูดว่า John Smith ด้วยหมายเลขโทรศัพท์ 555-1212 ใช้ตัวสร้างรายการแบบสุ่มหรือปลั๊กอินเพื่อสร้างชื่อและตัวเลขที่แตกต่างกันหรือสร้างชุดข้อมูลที่คุณต้องการแสดง สิ่งนี้อาจดูเหมือนมากเกินไป แต่ช่วยให้คุณสามารถแก้ปัญหาเกี่ยวกับเค้าโครงและความกว้างของอักขระและช่วยให้ผู้ดูเข้าใจว่ารายการทั้งห้านั้นแตกต่างกันทั้งหมด

Styleguide ตัวอย่างจำลองเครื่องกำเนิดรายการแบบสุ่ม

พยายามอย่าให้รายการทั้งหมดในรายชื่อผู้ติดต่อพูดว่า John Smith ใช้ตัวสร้างรายการแบบสุ่มหรือปลั๊กอินเพื่อสร้างรายชื่อที่ไม่ซ้ำกัน (มารยาท ปลั๊กอิน Craft และ Tethr เทมเพลตสำหรับ Sketch จาก InVision)

ขั้นตอนที่ 5: รู้ว่าเมื่อใดควรหยุดออกแบบ

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

จะเริ่มเรียนรู้ c++ . ได้ที่ไหน

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

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

ขั้นตอนที่ 6: เพลิดเพลินไปกับข้อเสนอแนะคุณภาพสูงและผลการทดสอบ

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

การทดสอบต้นแบบตัวอย่างจำลอง

ต้นแบบแอปท่องเที่ยวด้วยความเที่ยงตรงสูง (โดย อิกอร์อิวานโควิช ).

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

ห่อ

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

อย่างไรก็ตามในกรณีที่ถูกต้องการมุ่งตรงไปที่ความเที่ยงตรงสูงสามารถปรับปรุงกระบวนการของคุณได้:

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

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

•••

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

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

การพัฒนาโดยใช้ Trunk กับ Git Flow

แบ็คเอนด์

การพัฒนาโดยใช้ Trunk กับ Git Flow
DevOps: มันคืออะไรและทำไมจึงมีความสำคัญ

DevOps: มันคืออะไรและทำไมจึงมีความสำคัญ

นวัตกรรม

โพสต์ยอดนิยม
พลังของปากกา: บทช่วยสอนการเขียนตัวอักษร
พลังของปากกา: บทช่วยสอนการเขียนตัวอักษร
Strength in Numbers - ภาพรวมของการออกแบบที่ขับเคลื่อนด้วยข้อมูล
Strength in Numbers - ภาพรวมของการออกแบบที่ขับเคลื่อนด้วยข้อมูล
คุณสมบัติสิบ Kotlin เพื่อเพิ่มการพัฒนา Android
คุณสมบัติสิบ Kotlin เพื่อเพิ่มการพัฒนา Android
ข้อมูลเบื้องต้นเกี่ยวกับ PHP 7: มีอะไรใหม่และมีอะไรบ้าง
ข้อมูลเบื้องต้นเกี่ยวกับ PHP 7: มีอะไรใหม่และมีอะไรบ้าง
ใช้ InVision's Craft เพื่อการทำงานร่วมกันในทีมที่คล่องตัว
ใช้ InVision's Craft เพื่อการทำงานร่วมกันในทีมที่คล่องตัว
 
ทำความคุ้นเคย - คำแนะนำเกี่ยวกับขั้นตอนการเริ่มต้นใช้งานของผู้ใช้
ทำความคุ้นเคย - คำแนะนำเกี่ยวกับขั้นตอนการเริ่มต้นใช้งานของผู้ใช้
คู่มือนักออกแบบผลิตภัณฑ์เกี่ยวกับการวิเคราะห์การแข่งขัน
คู่มือนักออกแบบผลิตภัณฑ์เกี่ยวกับการวิเคราะห์การแข่งขัน
5 ความหวังที่ผิดพลาดในการต่อสู้และวิธีแก้ไข
5 ความหวังที่ผิดพลาดในการต่อสู้และวิธีแก้ไข
ApeeScape's Selection Of Best Developer Blogs
ApeeScape's Selection Of Best Developer Blogs
ไข่มุกแห่งปัญญา - จดหมายของผู้ถือหุ้นที่ดีที่สุดที่ไม่มีใครอ่าน
ไข่มุกแห่งปัญญา - จดหมายของผู้ถือหุ้นที่ดีที่สุดที่ไม่มีใครอ่าน
โพสต์ยอดนิยม
  • หลักการนิยามสมดุลการออกแบบ
  • ความเป็นจริงผสมกับความเป็นจริงเสมือน
  • บทบาทของ cfo ในบริษัทคืออะไร
  • ตัวจัดการข้อผิดพลาดส่วนกลางของโหนด js
  • หมายเลขบัตรเครดิตประชาชนและรหัสความปลอดภัย
  • การออกแบบภาพ vs การออกแบบกราฟิก
หมวดหมู่
  • เทคโนโลยี
  • การจัดการวิศวกรรม
  • ผู้คนและทีมงาน
  • ส่วนหลัง
  • © 2022 | สงวนลิขสิทธิ์

    portaldacalheta.pt