uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ
Freebies

รวมลิงค์โหลดรูปขนาดใหญ่คุณภาพสูง

ผมได้รวบรวมลิงค์สำหรับโหลดรูปไว้ใช้งานเพื่อเป็นภาพประกอบในผลงานของเราๆ แต่ไม่ใช่นำภาพพวกนี้ไปขายต่อนะครับ สามารถนำไปเป็นส่วนหนึ่งของผลงานเราได้ และหากเป็นไปได้ก็อาจใส่เครดิตของภาพที่เรานำไปใช้ให้กับเจ้าของผลงานด้วยก็ดีครับ มีเว็บไหนให้เราใช้ภาพได้อย่างสุขใจมาดูกัน Gratisography.com และ Laughandpee.com  โดย RYAN MCGUIRE มีรูปขนาดใหญ่ในหลายหลากหมวดหมู่ เอาไปใช้งานได้กันฟรีๆ เลย เจ้าของเค้าว่าอย่างงั้น ดูหน้าเค้าซิ Shotkit.com/ เว็บรวมภาพตากล้องมือถืออาชีพ พูดกันซะขนาดนี้ คุณภาพไม่ต้องห่วงแล้ว Unsplash.com อีกเว็บที่ให้เราโหลดภาพขนาดใหญ่สะใจจริงๆ สวยๆ ทั้งน้าน เค้าให้เราส่งภาพเพื่อให้คนอื่นโหลดด้วยนะ เผื่อสนใจ Imcreator.com/free เว็บนี้แบ่งภาพไว้เป็นหมวดหมู่ สะดวกที่จะค้นหาดีครับ ...
สอนเทคนิคน่ารู้

ตัวอย่างวิธีใช้งาน Actions & Batch

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

รีวิว UI เว็บ Ensogo

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

หน้าจอสวมใส่ (Wearble Screen)

กระแสอุปกรณ์อิเล็คทรอนิกส์แบบสวมใส่ (Wearble Electronic Devices) กำลังเป็นที่พูดถึงอย่างมาก หลังจากที่มีการสาธิตเปิดตัว Google Glass ที่เชื่อว่าจะกลายเป็นเทรนด์ล้ำสมัยที่เกิดขึ้นอย่างแพร่หลายในอนาคต ทำให้ UI designer ต้องหันมาศึกษาและเหลียวมองถึง Interface และข้อจำกัดใหม่บนอุปกรณ์เทคโนโลยีที่สวมใส่ได้เหล่านี้ว่าจะเป็นอย่างไรต่อไป เพื่อเตรียมตัวในการออกแบบประสบการณ์ที่เหมาะสมกับสภาพแวดล้อมที่กำลังจะเกิดขึ้นและเป็นที่นิยม มาเริ่มที่ Interface ของ Google Glass กันก่อนเลยแล้วกันนะครับ การแสดงผลของ ...
UI Pattern

ออกแบบแรงเสียดทาน (Friction Design)

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

เลเบลลอยล่ะล่อง

กรุณาคลิกที่ภาพเพื่อดูภาพเคลื่อนไหว UI นี้จะช่วยเราแก้ปัญหาการลืมป้ายกำกับในช่องกรอกข้อความ (Label in Textbox) เพราะพอเราเริ่มคลิกที่ช่องกรอกข้อความ บางทีข้อความที่กำกับในช่องจะหายไป เพื่อเตรียมพร้อมให้เรากรอกข้อมูล แต่จะเหมาะกับช่องกรอกข้อความที่ค่อนข้างใหญ่หน่อยนะครับ ขอท้าวความนิดหน่อยนะครับ ป้ายกำกับช่องกรอกข้อความ (label) นั้นปกติจะอยู่ด้านนอก ถ้าเป็นอุปกรณ์ที่หน้าจอกว้าง ป้ายก็จะถูกออกแบบให้อยู่ทางด้านซ้าย (รูปซ้าย) แต่ถ้าหน้าจอแสดงผลแคบก็จะอยู่ด้านบนของช่องกรอกข้อความ (รูปกลาง) และยิ่งในปัจจุบัน เราหลีกเลี่ยงไม่ได้ที่จะต้องแสดงผลฟอร์มบนอุปกรณ์มือถือ ดังนั้นเพื่อลดพื้นที่ในแนวตั้ง จึงมีการออกแบบให้ข้อความกำกับช่องกรอกข้อความไปอยู่ด้านในและใช้สีอ่อนเพื่อบอกให้ทราบว่า ...
ทฤษฎี UI

เว็บนานาชาติ

ในการออกแบบเว็บไซต์ที่ต้องรองรับการแปลหลายภาษาทั่วโลกนั้น (เช่น เว็บ Agoda.com, Booking.com) มีหลายข้อจำกัดมากมายที่เราควรคำนึงถึง แม้ว่ามันจะเป็นการเพิ่มโอกาสที่เราจะสามารถสื่อสารและขายสินค้าให้กับคนทั่วโลก (หากเป็นเว็บ e-commerce) แต่ถ้าไม่รู้จักว่างานออกแบบที่ให้เกียรติทุกชนชาติเป็นอย่างไร ก็อาจจะสร้างผลเสียให้กับเว็บของเราได้ มาดูกันว่าเราต้องระวังเรื่องอะไรบ้าง 1. วัฒนธรรมและศาสนา แต่ละชนชาติมักมีความเชื่อ, สิ่งห้ามและสิ่งเคารพประจำถื่น การนำเอาสิ่งนั้นมาเป็นส่วนหนึ่งในงาน design จึงเป็นสิ่งที่ควรหลีกเลี่ยงเป็นอย่างยิ่ง ผมยกตัวอย่างเช่น ถ้าผมต้องการสื่อความหมายถึงเรื่อง “การประหยัด” หนึ่งในความคิดของเราอาจมีเจ้าตัวนี้อยู่ในใจใช่ไหมครับ ...
UI Pattern

Interface เจลลี่ดึ๋งๆ

Interface นี้ผมเล่นแล้วสนุกดีครับ เค้าสร้างเมนูโดยเอาสภาพของเจลลี่ที่มันเด้งดึ่งๆ มาทำให้ดูน่าสนใจดีครับ ลองเล่นได้ที่ http://codepen.io/sol0mka/full/Jsyxq เป็นโค้ดที่เขียนอยู่บนเว็บ Codepen ที่กำลังมาแรงในเรื่องของ Open-source แบบ live บนเว็บที่ให้ใครก็ได้มาดูโค้ดพร้อมผลลัพธ์เมื่อประมวลผลเสร็จ ไว้ผมจะเขียนเล่าเรื่อง Codepen ทีหลังแล้วกันนะครับ แต่ตอนนี้มาเล่นดึ๋งๆ กันให้สนุกกันดีกว่าครับ
UI Pattern

Interface ม่านรูด

หลายๆ UI ที่เกิดขึ้นมามากมายนั้น ส่วนใหญ่จะได้รับแรงบันดาลใจจากสภาพทางกายภาพของวัตถุที่เกิดขึ้นจริงในโลก แล้วถูกนักพัฒนาสร้างเลียนแบบสภาพนั้นให้เกิดขึ้นบนโลกดิจิตอล Interface ม่านรูด (Curtain Slide Interface) ก็เป็นอีกหนึ่ง UI pattern ที่ช่วยเน้นย้ำให้เรารู้ว่าไม่มีสิ่งใดสร้างไม่ได้ในโลกดิจิตอล แม้แต่การจำลองการเลื่อนเปิด/ ปิดม่าน อินเตอร์เฟสนี้ถูกพัฒนาโดย Marcus Eckert ผู้ที่ชื่นชอบทำการทดลองเกี่ยวกับ animation programming เค้าได้ไอเดียนี้มาจากนักออกแบบที่สร้างสรรค์ต้นแบบด้วย Photoshop ...
ทฤษฎี UI

Gestalt Theory Rule#6-การปกปิด

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

Posts navigation