กระบวนการออกแบบใหม่ที่ตอบสนอง

เนื้อหา

• วิธีการที่ตอบสนอง
• ฉันจะเก็บเนื้อหาไว้ก่อนได้อย่างไร
• ทำไม?
• 01. กำหนดเป้าหมายทางธุรกิจและผู้ใช้ของคุณ
• 02. อ้างอิงทุกโอกาสที่คุณได้รับ
• 03. อย่ากลัวที่จะดึงดัน
• 04. ดันทีมของตัวเองด้วย
• 05. กำหนดเนื้อหาทั้งหมดของคุณที่ต้องการล่วงหน้า
• ฉันจะนำเสนอเนื้อหาที่เป็นนามธรรมได้อย่างไร
• เราจำเป็นต้องหยุดคิดถึงเนื้อหาในแง่ของการจัดวาง
• บังคับให้ลูกค้าของคุณวางแผนเนื้อหาโดยไม่ขึ้นกับการออกแบบ
• สรุปเนื้อหาของคุณก่อนออกแบบ
• ใช้เนื้อหาจริง - ทุกครั้ง
• Wireframes ทำงานอย่างไรสำหรับโครงการออกแบบที่ตอบสนอง?
• ร่าง
• กรอบงานในเบราว์เซอร์
• คำอธิบายประกอบ
• ใช้เนื้อหาจริงใน Wireframes
• ฉันจะออกแบบสำหรับหน้าจอขนาดเล็กก่อนได้อย่างไร?
• การออกแบบที่เป็นนามธรรมจากอุปกรณ์ในตอนเริ่มต้น
• ใช้กระเบื้องสไตล์
• สร้างความกลมกลืนของอินเทอร์เฟซ
• ดูทุกอย่างในเบราว์เซอร์
• สร้างสมดุลด้วยโปรแกรมคงที่
• สรุป

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

Frank Chimero เขียนไว้อย่างสวยงามในหนังสือ The Shape of Design:“ มีส่วนหนึ่งที่ศิลปินถอยออกจากขาตั้งเพื่อรับมุมมองใหม่ ๆ เกี่ยวกับผลงาน การวาดภาพเป็นส่วนที่เท่ากันทั้งใกล้และไกล: เมื่ออยู่ใกล้ศิลปินจะทำงานอย่างหนักเพื่อทำเครื่องหมายของเขา เมื่อไกลเขาจะประเมินงานเพื่อวิเคราะห์คุณภาพของงาน เขาถอยหลังเพื่อให้งานพูดกับเขา”

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

วิธีการที่ตอบสนอง

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

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

นี่คือคำถามที่เราได้ยินบ่อยที่สุดเกี่ยวกับกระบวนการออกแบบที่ตอบสนองของเรา

ฉันจะเก็บเนื้อหาไว้ก่อนได้อย่างไร

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

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

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

ทำไม?

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

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

และเป็นหน้าที่ของเราที่จะให้ความรู้แก่พวกเขา (อ่านการออกแบบหนังสือที่ยอดเยี่ยมของ Mike Monteiro เป็นงานที่ทำได้หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการติดต่อกับลูกค้า) ลูกค้าอาจมีปัญหาในการทำความเข้าใจคุณค่าของการทำวิจัยทั้งหมดนั้นและทำงานให้ทัน แล้วทำไมต้อง? พวกเขาไม่ได้รับอะไรเลยในตอนท้าย - และบ่อยครั้งที่พวกเขาได้รับใบแจ้งหนี้และเอกสาร Word ขนาดใหญ่

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

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

ต่อไปนี้เป็นสามขั้นตอนในการรักษาเนื้อหาเป็นอันดับแรกในกระบวนการโครงการของคุณ

01. กำหนดเป้าหมายทางธุรกิจและผู้ใช้ของคุณ

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

02. อ้างอิงทุกโอกาสที่คุณได้รับ

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

03. อย่ากลัวที่จะดึงดัน

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

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

04. ดันทีมของตัวเองด้วย

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

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

วิธีการแบบน้ำตกในการสร้างสรรค์งานไม่ได้ผล การทำงานร่วมกันที่คล่องตัวระหว่างสมาชิกในทีมทำให้ได้ผลลัพธ์ที่ดีขึ้น

05. กำหนดเนื้อหาทั้งหมดของคุณที่ต้องการล่วงหน้า

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

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

ฉันจะนำเสนอเนื้อหาที่เป็นนามธรรมได้อย่างไร

คุณได้ยินเรื่องนี้มากมายในอินเทอร์เน็ต -o-sphere แต่เดี๋ยวก่อนอะไรนะ? แล้วรอ - ทำไม?

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

เราจำเป็นต้องหยุดคิดถึงเนื้อหาในแง่ของการจัดวาง

เรา (ในฐานะอุตสาหกรรม) ได้ฝึกอบรมลูกค้าของเราให้คิดเนื้อหาในแง่ของการจัดวาง “ วางไว้ในแถบด้านข้าง” เราพูด “ นั่นควรอยู่ในส่วนท้าย” หยุด! หยุดนะ. หยุด. ไม่เกี่ยวกับสถานที่ เป็นเรื่องของลำดับความสำคัญ เนื้อหาที่สำคัญที่สุดสำหรับผู้ใช้ของคุณคืออะไร? เพราะเดาอะไร: เค้าโครงเปลี่ยนไปตามบริบทต่างๆ (อาจ) จะไม่เป็นแถบด้านข้างในการออกแบบหน้าจอขนาดเล็กของคุณ

ซุปเปอร์เมนูยักษ์ที่ลูกค้าของคุณต้องการ? จะไม่บินบน iPhone

บังคับให้ลูกค้าของคุณวางแผนเนื้อหาโดยไม่ขึ้นกับการออกแบบ

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

สรุปเนื้อหาของคุณก่อนออกแบบ

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

ใช้เนื้อหาจริง - ทุกครั้ง

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

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

Wireframes ทำงานอย่างไรสำหรับโครงการออกแบบที่ตอบสนอง?

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

ร่าง

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

กรอบงานในเบราว์เซอร์

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

นอกจากนี้เรายังต้องการใช้กรอบการสร้างต้นแบบที่ตอบสนองอย่างรวดเร็วเช่น Twitter’s Bootstrap หรือ Zurb’s Foundation โดยส่วนตัวเราเอนเอียงไปที่ Foundation เพราะเหมาะกับขั้นตอนการทำงานของเรา จะดีมากถ้าคนใดคนหนึ่งจะใช้วิธีการที่มีหน้าจอขนาดเล็กแบนด์วิดท์ต่ำเป็นอันดับแรก แต่นั่นเป็นเพียงวิธีที่เราดำเนินการ

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

คำอธิบายประกอบสำหรับโครงร่าง RWD มีความสำคัญ แต่เรามักจะมองข้ามไป พูดออกมาดัง ๆ : เอกสารประกอบเอกสาร! เราได้เห็นตัวอย่างบางส่วนจากเพื่อน ๆ และคิดว่าคณะลูกขุนยังคงให้ความสำคัญกับวิธีที่ "ดีที่สุด" ในการใส่คำอธิบายประกอบใน Wireframes ที่ตอบสนองในเบราว์เซอร์อย่างเหมาะสม ดังที่ได้กล่าวไว้ข้างต้นเราใช้ Foundation by Zurb เป็นประจำและต้องการใช้ส่วนเสริมของ Reveal เพื่อแสดงคำอธิบายประกอบของเรา คำอธิบายประกอบเหล่านี้จะปรากฏเฉพาะสำหรับหน้าจอขนาดใหญ่และสามารถเปิดและปิดได้

ใช้เนื้อหาจริงใน Wireframes

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

ฉันจะออกแบบสำหรับหน้าจอขนาดเล็กก่อนได้อย่างไร?

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

การออกแบบที่เป็นนามธรรมจากอุปกรณ์ในตอนเริ่มต้น

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

ใช้กระเบื้องสไตล์

ใช้ Style Tiles เพื่อกำหนดทิศทางและทำซ้ำอย่างรวดเร็ว กระเบื้องสไตล์ช่วยให้นักออกแบบสามารถกำหนดทิศทางของระบบการออกแบบได้โดยไม่ต้องเจาะจงเกินไป Samantha Warren ผู้สร้างของพวกเขาอธิบายพวกเขาในลักษณะนี้:

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

สร้างความกลมกลืนของอินเทอร์เฟซ

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

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

ดูทุกอย่างในเบราว์เซอร์

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

สร้างสมดุลด้วยโปรแกรมคงที่

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

สรุป

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

ค้นพบเครื่องมือ wireframing 20 ชิ้นที่ดีที่สุดสำหรับนักออกแบบ

Steve Fisher ประสานงานการวิจัยการวิเคราะห์การออกแบบและกลยุทธ์ที่ Yellow Pencil ในแคนาดาและพูดในหัวข้อต่างๆเช่น RWD, UX และโอเพ่นซอร์ส Alaine Mackenzie เป็นนักกลยุทธ์ด้านเนื้อหาของ Yellow Pencil