Web Sketch Interface

วันก่อนต้องออกแบบ Application เลยทำ Sketch ของ Application ขึ้นมา OS X Sketch Interface มาวันนี้ต้องออกแบบเว็บก็มีผลออกมาแบบนี้ครับ



ผมเอาไปไว้ที่ Graffletopia.com นะครับ สนใจเข้าไป Download ได้เลย

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

ความคิดเห็น

โพสต์ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

บริหารความซับซ้อน

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

1. นำเสนอสิ่งที่ "คนธรรมดาเค้าใช้กันบ่อยๆ" ก่อนเพราะ 80% ของการใช้งานมักจะเลือกแบบนี้ แต่ต้องไม่ปิดโอกาสที่ผู้ใช้จะเลือกสิ่งที่ต่างจากธรรมดา ตัวอย่างเช่นการ save ของ OS X ครับ


โปรแกรมคิดว่า Common ของผู้ใช้จะ save ไฟล์ไว้ที่ Folder ที่ตนเองเลือกเป็น Favorite แต่หากไม่พอใจสามารถกดสามเหลี่ยมเพื่อเพิ่มเงื่อนไขได้



2. เมื่อเราแยกส่วนที่ซับซ้อนออกมาจากส่วนที่ธรรมดาแล้ว อย่าพยายามกระจายส่วนที่ซับซ้อนออกจากกัน เพราะจะทำให้หน้าโปรแกรมของเราดูรกไปหมด นึกถึง Adobe Photoshop แต่ก่อน เที่ยบกับตัวปัจจุบันที่พยายามรวมเอา pr…
อ่านเพิ่มเติม

วิธีแก้ปัญหา Photoshop สั่ง Save for web แล้วทำให้สีเพี้ยน

รูปภาพ
ปัญหาของสีเพี้ยนตอนที่ save รูปจาก Photoshop ไปเป็น Png หรือ Jpeg เป็นเพราะว่า เราตั้ง Profile ของสีที่จะใช้กับสีที่แสดงบนหน้าจอเป็นคนละ Profile กัน ทำให้ได้ผลดังรูป


ภาพแสดงความแตกต่างของ original กับ save for web
ภาพล่างคือภาพที่ได้จากการ save for web ส่วนภาพบนเป็นต้นฉบับ จะสังเกตุว่าภาพล่างสีซีดกว่าภาพบน ทางแก้คือต้องปรับ Color Profile โดยเข้าไปที่ Edit > Color Settings จากนั้นเลือก Monitor Color ตามรูป

ภาพแสดงการตั้งค่า Color profile
จากนั้นตอนแสดงผลให้เราปรับ Proof Setup ให้เป็น Monitor RGB  โดยเลือกที่เมนูตามภาพ

ภาพแสดงการเลือก Monitor RGB
จากนั้นตอนที่เราสั่ง save for web ให้เราระวัง อย่าไปสั่ง convert to sRGB เพื่อให้แน่ใจว่าภาพที่ออกมาจะเหมือนกับที่เราออกแบบไว้

ภาพแสดงว่าไม่ต้องเลือก Convert to sRGB
ที่ค่าเริ่มต้นของ Photoshop ไม่ได้เป็น RGB แต่เป็น CMYK คาดว่าเป็นเพราะบน Mac ผู้ใช้มักจะทำงานสิ่งพิมพ์มากกว่างานที่ออกหน้าจอทำให้เราต้องมาปรับค่า view กันทุกเครื่องไป

ดูรายละเอียดเพิ่มเติมได้ที่ embedded JPEG profiles
อ่านเพิ่มเติม

ความหมายของปุ่มในตำแหน่งที่ต่างกัน

รูปภาพ
สวัสดีปีใหม่ครับ ขอให้ทุกคนมีความสุขในการออกแบบ Application ตลอดปี 2009 นะครับ ก่อนวันหยุดยาวปีใหม่ผมบังเอิญต้อง Update Host ให้กับ User ของ Mysql ผ่าน Mysql-Admin ทำให้เจอบางอย่างน่าสนใจเข้า



ผม Add New Host ให้กับ User คนหนึ่งในระบบ หลังจากที่ผมเห็น Host ปรากฏอยู่ใต้ชื่อ User ก็สบายใจปิดโปรแกรมไป แต่กลายเป็นว่า User คนนั้นยังไม่ได้รับสิทธิ์ มาตรวจสอบอีกทีกลายเป็นว่าต้องกดปุ่ม Apply ก่อน รูปด้านบนแสดงตำแหน่งของปุ่ม Apply ของ Mysql Admin Version Widows บังเอิญว่าลืมภาพ Version Linux ไว้ที่ office ขอเอาที่หาได้บน google มาแสดงไปก่อนนะครับ ปัญหาของปุ่ม Apply ใน Version Linux และ Windows คือมันสื่อความหมายไม่ครอบคลุมพื้นที่ด้านซ้ายมือ ดังนั้นผู้ใช้อย่างผม จึงเข้าใจไปเองว่าไม่ต้องกด Apply ก็ได้ ดังรูปด้านล่าง



พื้นที่ที่ผู้ใช้รู้สึกจะเป็นกรอบสีแดง ส่วนพื้นที่การ Apply จริง คือกรอบสีเขียวทางขวามือ ทางแก้มีหลายวิธีแต่สิ่งที่น่าสนใจกว่าคือ จริงๆ แล้วมีทฤษฏีให้เราใช้อ้างอิงหรือเปล่า เนื่องจากหาไม่เจอผมเลยคิดสูตรส่วนตัวขึ้นมา ผมแบ่งปุ่มออกเป็น 3 ประเภทตามจุดประสงค์ในการใช้งาน

1. ปุ่มสำหร…
อ่านเพิ่มเติม