กราฟิกผลิตภัณฑ์ 6 เทคนิคในการสร้างภาพข้อมูลเพิ่มเติม

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

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

ลองดูแนวคิดด้านล่างที่เรานำเสนอไม่เพียง แต่เคล็ดลับเท่านั้น แต่ตัวอย่างจริง ๆ ของกราฟิกผลิตภัณฑ์ที่สวยงามที่อัดแน่นไปด้วยข้อมูลที่ยอดเยี่ยม.

1. ขยายเนื้อหาของคุณ

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

เมื่อคุณพยายามสาธิตซอฟต์แวร์กวดวิชา (เช่น Photoshop Tutorial) อาจเป็นเรื่องยาก ถ่ายทอดข้อความเป็นข้อความที่เขียน. ผู้เข้าชมจะมาถึงบทความของคุณและเริ่มตัดสินเนื้อหาโดยทันทีภายในไม่กี่วินาที Web Designer Wall มีบทช่วยสอนที่ยอดเยี่ยมในการสร้างภาพโค้งมน CSS3 พร้อมด้วยกราฟิกที่มีประโยชน์ ซึ่งรวมถึงฉลากบางส่วนและภาพระยะใกล้ของเอฟเฟกต์.

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

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

2. คุณสมบัติเด่นที่โดดเด่น

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

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

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

ด้านล่างเป็นตัวอย่างจากหน้าการอัพเดท Mozilla Firefox.

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

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

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

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

3. ป้ายกำกับที่เรียบง่ายไม่สร้างความรำคาญ

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

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

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

4. ภาพกับเนื้อหาแบบไดนามิก

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

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

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

5. ภาพหน้าจอที่ชัดเจนและรูปถ่ายสินค้า

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

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

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

6. สร้างเอฟเฟ็กต์ "เลนส์ซูม"

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

หนึ่งในตัวอย่างที่ดีที่สุดของเทคนิคนี้คือบนหน้าแรกของแอพ Things for Mac กราฟิกมีแอปปรับขนาดเล็กลงเพื่อให้พอดีกับหน้าอย่างสมบูรณ์พร้อมกับเงาเล็ก ๆ อย่างไรก็ตามในพื้นที่สำคัญบางแห่งคุณจะสังเกตเห็นวงกลมที่มีเนื้อหาภายในใหญ่กว่ามาก พวกเขายังเพิ่มแสงสีขาวด้านในให้ปรากฏเป็นแสงหักเหที่ส่องผ่านเลนส์!

โบนัส: การสอน Photoshop เอฟเฟ็กต์ "เลนส์ซูม"

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

ขั้นตอนที่ 1

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

ขั้นตอนที่ 2

ยังคงรักษาวงกลมที่เลือกไว้ให้ย้ายไปยังเลเยอร์พื้นหลังของคุณและกด ctrl (สำหรับผู้ใช้ Mac มันเป็นคำสั่งหรือปุ่ม cmd.) + c เพื่อคัดลอก จากนั้นสร้างเลเยอร์ใหม่เหนือพื้นหลัง แต่อยู่ใต้วงกลมขยายแล้ววาง คุณสามารถกด ctrl + j เพื่อทำซ้ำเลเยอร์ใหม่ด้วยการเลือกเฉพาะชั้นเชิง.

กด ctrl + t เพื่อเปิดเครื่องมือการแปลง ตอนนี้ขยายชั้นที่ซ้ำกันใหม่ในขณะที่ถือ เปลี่ยน เพื่อให้ทุกอย่างเป็นสัดส่วนและ Alt เพื่อให้ศูนย์นิ่ง.

ขั้นตอนที่ 3

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

กด Ctrl + Shift + i เพื่อสลับส่วนที่เลือกปัจจุบัน ตอนนี้กดปุ่มลบเพื่อล้างขยะพิเศษออกจากภาพหน้าจอที่ปรับสัดส่วนแล้วของเรา สำหรับเอฟเฟกต์เพิ่มเติมเล็กน้อยให้ดึงเมนูเลเยอร์ FX ขึ้นมาเพื่อเพิ่มเงาเล็ก ๆ คุณยังสามารถวาดเส้นแนวตั้งขนาด 1px ที่บางและใช้ตัวกรอง Liquify (ตัวกรอง> Liquify) สร้างจุดจับเล็ก ๆ!

ข้อสรุป

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

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