ทำไมไม่ใช้สีดำบริสุทธิ์ (# 000) และสีขาวบริสุทธิ์ (#FFF)


17

แถบด้านบนใหม่สำหรับ Stack Exchangeกล่าวว่า

สิ่งแรกที่คุณจะสังเกตได้ว่ามันเป็นสีดำจริงๆ*

* จินชี้ให้เห็นว่าในทางเทคนิคแล้วมันไม่ได้ค่อนข้างดำ: มันคือ # 212121

ใน CSS ฉันเห็น

background: #2f2f2f;
background: rgba(0, 0, 0, 0.8);

ทำไมไม่ "สีดำจริงๆ": ทำไม "ไม่ค่อนข้างดำ" ดีกว่า

ในทำนองเดียวกันสำหรับส่วนที่เหลือของพื้นหลังฉันเห็นบางสิ่งบางอย่างเช่น

background: #fdfdfd

ทำไมไม่ขาวบริสุทธิ์?

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

'กฎ' นี้ใช้กับสีอื่นด้วยหรือไม่ (กฎคืออะไรกันแน่)

กฎขึ้นอยู่กับอุปกรณ์หรือไม่


Google ใช้พื้นหลังสีขาวบริสุทธิ์เสมอ
Pacerier

คำตอบ:


18

ในระยะสั้นมันง่ายในสายตา;

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

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

ความคมชัดและความสมดุลของสีจะกล่าวถึงที่นี่ด้วย

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

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

ขอให้โชคดีกับการเลือกสีของคุณในอนาคตนี่เป็นข้อควรพิจารณาอีกประการหนึ่งที่ต้องคำนึงถึง: D


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

ดีใจที่ได้ช่วยเหลือ (ถ้าเพียงเล็กน้อย) คำตอบสำหรับคำถามนี้มี 3 องค์ประกอบหลัก: ทฤษฎีสีความชอบ / สไตล์และการออกแบบ UX เป็นไปไม่ได้ที่จะครอบคลุม 100% ทุกคำตอบเดียว (ดังที่คุณกล่าวถึง) ดังนั้นฉันแค่อยากจะให้คำตอบสั้น ๆ พร้อมกับความคิดว่าจะสำรวจอะไร
เจนน่า

6

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

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

ดังนั้นฉันคิดว่าทางเลือกของ 80% สีดำคือการประนีประนอมระหว่างการทำให้แถบด้านบนสั่นสะเทือนน้อยลงและรักษาความเปรียบต่างภายใน

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


ในเว็บไซต์นี้แม้แต่div.post-textสีพื้นหน้าcolor: #111;แทนที่จะเป็นสีดำบริสุทธิ์ ทำไมไม่ปล่อยให้ความสามารถในการอ่านหรือความสว่างหน้าจอของเบราว์เซอร์ / อุปกรณ์ / ผู้ใช้เริ่มต้นเพื่อเพิ่มประสิทธิภาพ?
ChrisW

0

ในความคิดของฉัน ... เพียงแค่แฟชั่นแนวโน้ม

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

มีแนวโน้มของภาพ "วินเทจ" ความอิ่มตัวต่ำล้างออก

ลุคที่ถูกชะล้างออกไปสามารถทำให้เกิดจุดที่มืดที่สุดหรือ / และจุดสีเทา

https://www.google.com/search?q=vintage+photos&client=firefox-b-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjb04iVr6vYAhUj94MKHQ3nBfQQ_AUICigB&biw=1920&bih=1007

ไม่เพียง แต่ในภาพถ่าย แต่รวมถึงวิดีโอ ... รวมถึงวิดีโอ "ความสุข"

https://www.youtube.com/watch?v=9HjrFnKEE8w

มันเป็นความจริงที่ความคมชัดจำนวนมากสามารถน่ารำคาญพื้นหลังสีเข้มเป็นพิเศษพร้อมข้อความสีขาว ... จดจำการออกแบบเว็บในยุค 90ด้วยพื้นหลังสีดำและภาพเคลื่อนไหว gifs ที่มากเกินไป ...

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

แนวโน้มหนึ่งที่ตรงกันข้ามของภาพคือ " ลักษณะ Hdri " หรือสไตล์ draggan ที่เน้นความคมชัดและความคมชัดแบบไมโคร

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


นอกจากนี้ถ้าจานสีทั้งหมดของคุณมีข้อ จำกัด คุณสามารถหลอกตาอัตโนมัติของคุณ นำไปสู่ช่วงไดนามิกที่สูงขึ้นของคุณ จิตรกรใช้สิ่งนี้ตลอดเวลา
joojaa

1
นี่ไม่ใช่คำตอบที่ถูกต้อง วิทยาศาสตร์รอบตรงกันข้ามโดยใช้สีดำ, สีโดยใช้สีขาวก็เพียงว่า - วิทยาศาสตร์ไม่ได้มีความคิดเห็น
Mike Earley
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.