Facebook ออกแบบการวิเคราะห์เชิงลึกเกี่ยวกับการออกแบบอิสระ

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

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

หน้าโปรไฟล์ที่คล่องตัว

การออกแบบหน้าโปรไฟล์นี้มาจาก Haris Jusovic นักออกแบบจากภูมิภาคบอลข่านของยุโรป.

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

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

ยังมีปุ่มหลายปุ่มที่แสดงผลขนาดใหญ่ขึ้นด้วย padding พิเศษและตัวอักษรที่ใหญ่ขึ้น. เนื่องจาก Facebook นั้นหมายถึงการมีส่วนร่วมมันจึงเป็นเรื่องเหมาะสมที่จะเพิ่มการมองเห็นไอเทมต่างๆเช่นปุ่มและไฮเปอร์ลิงก์.

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

ไทม์ไลน์หลายคอลัมน์

เมื่อมองไปที่เค้าโครงคอลัมน์แนวตั้งคือการออกแบบใหม่ของ Alejandro Osorio เลย์เอาต์นี้แสดงมุมมองไทม์ไลน์ของโปรไฟล์ที่ผู้ใช้ Facebook เห็นเมื่อพวกเขาเยี่ยมชมหน้าโปรไฟล์ของผู้ใช้.

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

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

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

การออกแบบเนื้อหาหนาแน่น

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

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

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

แต่ในการป้องกันการออกแบบนี้มันจัดการเนื้อหาที่หนาแน่นอย่างดี มี ช่องว่างมากมายระหว่างองค์ประกอบ และมันรันการออกแบบสี่คอลัมน์อย่างยอดเยี่ยม.

การนำทางมากมาย

การออกแบบ Facebook 2.0 ใหม่ที่เรียกว่าสร้างโดย Marcelo Silva เป็นภาพที่เห็น เลย์เอาต์ตัวอย่างของเขาแสดงโฮมเพจที่ได้รับการปรับปรุงพร้อมไทม์ไลน์และรายชื่อผู้ติดต่อที่ซ่อนไว้บางส่วน.

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

การออกแบบของ Marcelo นั้นแตกต่างจากภาพถ่ายสี่เหลี่ยมดั้งเดิมของ Facebook เลือกไปที่ภาพถ่ายวงกลม. สไตล์นี้แพร่หลายทั้งในไทม์ไลน์และรายการแชท.

M Assistant & รายการกิจกรรมล่าสุด

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

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

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

ที่ด้านล่างสุดคุณจะสังเกตเห็นกล่องเล็ก ๆ สำหรับ M's Facebook เทียบเท่าสิริ สำหรับผู้ใช้ Facebook.

ฟีเจอร์นี้ไม่ได้รับความสนใจมากนักในการออกแบบใหม่ แต่สตีเว่นก็ทุ่มเทอย่างเต็มที่เพื่อทำให้แนวคิดของเขาเป็นตัวแทนของเทคโนโลยี Facebook ที่ทันสมัยอย่างแท้จริง.

เค้าโครงไทม์ไลน์สี่คอลัมน์

นี่คืออีกการออกแบบโฮมเพจ 4 สีที่ออกแบบโดยนักออกแบบชาวญี่ปุ่น Sho Kameya คอลัมน์ทั้งหมดเหล่านี้ ครอบคลุมทั้งหน้า, ทั้งความกว้างและความสูง.

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

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

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

UI แบบง่ายพร้อม Dark Chat List

เป้าหมายของการออกแบบของ Ben Hartley คือความเรียบง่ายและละเอียดอ่อน เลย์เอาต์ใช้การผสมผสานของแนวคิดการออกแบบแบบแบนที่มีเงาเพียงเล็กน้อยบนองค์ประกอบของหน้าขนาดใหญ่.

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

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

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

สรุป

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

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