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

ฉันเริ่มเฟรมเวิร์ค CSS เล็ก ๆ เมื่อไม่นานมานี้ ( http://mincss.comถ้าใครสนใจ) ฉันรีบออกแบบการออกแบบปุ่มบางปุ่มอย่างรวดเร็ว หลังจากขอคำติชมเกี่ยวกับ UX StackExchange (และรับข้อเสนอแนะที่ดีมากมาย) ฉันแนะนำให้มาที่นี่เพื่อรับคำแนะนำเพิ่มเติมในการปรับปรุงพวกเขา

นี่คือสิ่งที่พวกเขาดูเหมือนตอนนี้หลังจากข้อเสนอแนะของ UXStackExchange ฉันลบเส้นขอบสีดำเพิ่ม "เงา" 3px และลบมุมเอียง 1px:

ฉันกำลังมองหาการออกแบบแบน

ฉันมี 3 คำถามที่เหลือ:

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

ฉันจะยินดีต้อนรับ (และอาจใช้) ข้อเสนอแนะใด ๆ เกี่ยวกับปุ่มเหล่านี้

ฉันคิดว่าการไล่ระดับสีที่ละเอียดอ่อนมากจะช่วยปรับปรุงความสวยงามของปุ่มได้อย่างแน่นอน เนื่องจากรูปแบบ "Metro" ของ Windows 8 เป็นตัวสนับสนุนขนาดใหญ่ของรูปแบบนี้ฉันจะใช้มันเป็นตัวอย่าง:

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

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

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

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

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

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

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

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

ตอนนี้เท่าที่ปุ่มจริงเหล่านี้จะไปฉันจะเล่นกับเส้นขอบเช่นนี้ช่วย encapsulate ส่วนประกอบและเส้นขอบสวยทั่วไปกับปุ่มจำนวนมาก ฉันตรวจสอบเว็บไซต์แล้วและฉันชอบสถานะโฮเวอร์ / คลิกและฉันคิดว่าคุณทำได้ดีกับเว็บไซต์เหล่านั้น

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

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