Browsing Category

Design

Design

Links I Love #2 : Sitemaps

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

Design

เว็บที่รวบรวมงานออกแบบ User Interface 2

มาเพิ่มเติมจากที่เคยโพสเกี่ยวกับเว็บรวบรวบงาน User Interface และ Guidelines ในการออกแบบ UI ของระบบมือถือต่างๆ วันนี้ก็เลยมาเพิ่มเติมอีก

Meer.li

User Interface Guidelines and Inspiration Bookmarks

 

 Loviv

User Interface Guidelines and Inspiration Bookmarks

 

Laudableapps

เว็บที่รวบรวมงานออกแบบ User Interface

iospirations

User Interface Guidelines and Inspiration Bookmarks

 

Creattica

User Interface Guidelines and Inspiration Bookmarks

Apple Inspires Me

User Interface Guidelines and Inspiration Bookmarks

Android pttrns

เว็บที่รวบรวมงานออกแบบ User Interface

UX Archive

มี filter ให้เราเลือกดูตัวอย่างแอพตาม task ที่เราต้องการเช่น การค้นหา, การสมัครสมาชิก

User Interface Guidelines and Inspiration Bookmarks

Ultral UI

เว็บที่รวบรวมงานออกแบบ User Interface

The FWA Mobile

เว็บที่รวบรวมงานออกแบบ User Interface

 TappGala

เว็บที่รวบรวมงานออกแบบ User Interface

Smashapp

เว็บที่รวบรวมงานออกแบบ User Interface

My Color Screen

เว็บที่รวบรวมงานออกแบบ User Interface

Mobile Tuxedo

เว็บที่รวบรวมงานออกแบบ User Interface

Mobile Awesomeness 

เว็บที่รวบรวมงานออกแบบ User Interface

 

Design

ทำไมตัวเลขบนเครื่องคิดเลขถึงแตกต่างกับโทรศัพท์?

ถ้าเราสังเกตดูดีๆ จะเห็นว่าปุ่มของเครื่องคิดเลขและโทรศัพท์มีความแตกต่างอย่างเห็นได้ชัด โดยปุ่มเลข 1-2-3 ของเครื่องคิดเลขและปุ่มเลขบนคีย์บอร์ดของคอมพิวเตอร์จะอยู่ด้านล่าง แต่บนโทรศัพท์นั้นปุ่มเลข 123 จะเริ่มจากด้านบน ไม่มีใครทราบแน่ชัดว่าทำไมถึงแตกต่างกัน แต่ก็มีคนคิดออกมาหลักๆ 3 ทฤษฎีที่ล้วนแล้วแต่เกี่ยวกับกับการใช้งานของมนุษย์ทั้งสิ้น คือ

ทฤษฎีที่ 1

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

ทฤษฎีที่ 2

ได้มีการวิจัยออกมาเพื่อทดลองว่าปุ่มกดแบบใด การจัดวางแบบไหนที่ใช้งานได้ดีที่สุดโดยการจัดวางมีทั้งแบบ วางเป็นสี่เหลี่ยมด้านละ 3 ตัวเลขและมีเลขศุนย์อยู่ข้างล่าง, แบบสองแถวแถวละห้าตัวเลขทั้งวางแนวนอนและแนวตั้ง, หรือวางแบบเป็นวงกลมตาม/ ไม่ตามเข็มนาฬิกา โดยผลการวิจัยออกมาว่าแบบวางเป็นสี่เหลี่ยม แถวละ 3 ตัวเลขโดยมี 1-2-3 อยู่บนสุดเป็นแบบที่คนใช้งานได้ง่ายมากที่สุด

ทฤษฎีที่ 3

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

 

 

Design

Information Visualization มันเป็นมากกว่าภาพ

ให้ลองทายดูเล่นๆ ว่าภาพต่อไปนี้เป็นภาพของอะไรนะคะ

สองรูปแรกเป็นภาพที่แปลงมาจากบทกวีค่ะ ส่วนอันสุดท้ายเป็นเพลง Like A Prayer ของ Madonna ค่ะ ปกติแล้วเวลาเราต้องการสรุปข้อมูลเรามักจะสรุปออกมาในรูปแบบของกราฟ แผนภูมิต่างๆ แต่ถ้าเป็นข้อความเป็นข้อมูลยาวๆ เราจะทำอย่างไร???

Information Visualization เป็นการแปลงข้อมูลเป็นภาพค่ะ อย่างตัวอย่างที่ให้ดูเป็นการรวบรวมข้อมูลที่เป็นคำหรือข้อมูลยาวๆ เยอะๆโดยที่ไม่จำเป็นต้องออกมาในรูปแบบของกราฟแบบที่เราเห็นอยู่ทั่วไป มาดูรูปแรกแบบเต็มๆ กัน

Information Visualization : โปสเตอร์งาน Poetry on the Road 2002

คนทำคือ Friederike Lambers, Boris Müller, Florian Pfeffer เขาทำกันเป็นทีมค่ะ เพราะต้องใช้การเขียนโปรแกรมมาช่วยแปลงข้อมูลเป็นภาพค่ะ กรอบสี่เหลี่ยมและสีของแต่ละกรอบจะแสดงถึงลักษณะของตัวอักษรแต่ละตัวค่ะ มุมที่เอียงจะแสดงถึงภาษาที่ใช้ค่ะ บทกวีที่นำมาใช้ก็เป็นบทกวีของผู้เข้าร่วมแสดงงานค่ะ ตอนแรกอ่านๆ ข้อมูลดูก็ไม่ค่อยเข้าใจเท่าไหร่ ต้องทดลองเองค่ะ เค้ามีโปรแกรมตัวที่เค้าเขียนให้เราทดลองพิมพ์เข้าไปด้วยค่ะ

ใครอยากเล่นบ้าง ที่นี่เลยค่ะ : http://www.esono.com/boris/projects/poetry02/visualpoetry02/poet_frame.html

ข้อมูลเพิ่มเติม  : http://www.esono.com/boris/projects/poetry02/

อันที่สอง ชอบอันนี้มากๆ สวยมากๆ


Information Visualization : โปสเตอร์งาน Poetry on the Road 2006

โปสเตอร์งาน Poetry on the Road 2006

แบบนี้จะดูซับซ้อนกว่าแบบแรก คือมีการแทนค่าตัวเลขแทนคำแต่ละคำ อย่างคำว่า “Poetry” ก็แทนค่าเป็น 99  แต่ว่าคำที่ต่างกันก็สามารถมีเลขเหมือนกันได้ อย่าง เลข 99 ก็อาจหมายถึง “thought” หรือ คำว่า “letters” ก็ได้ โดยเลขแต่ละตัวจะถูกแทนค่ามาเป็นวงแหวนสีแดงๆที่เห็นในภาพค่ะ ความหนาของวงแหวนจะขึ้นอยู่กับจำนวนของคำที่มีเลขเดียวกันค่ะ เส้นผ่าศูนย์กลางจะขึ้นอยู่กับความยาวของบทกลอน อย่างวงๆ สีแดงก็จะแสดงค่าตัวเลข และเส้นสีเทาๆ ที่เชื่อมคำแต่ละคำของบทกลอนตามลำดับของคำ

คงต้องลองเล่นดูได้ค่ะ : http://www.esono.com/boris/projects/poetry06/visualpoetry06/index.html

ข้อมูลเพิ่มเติม : http://www.esono.com/boris/projects/poetry06/

 

Information Visualization : โน๊ตเพลง

 

เพลง Like A Prayer ของ madonna

 

เพลง Mary Had a Little Lamb หรือหนูมาลี

จะเห็นว่าโน๊ตที่เหมือนกันจะถูกโยงให้เชื่อมต่อเข้าหากัน จนเกิดเป็นจังหวะของโน๊ตแต่ละตัว ถ้าหากว่าเราทำแบบนี้ในทุกๆ แนวเพลง เราจะเห็นความแตกต่างของแต่ละแนวเพลงได้เลยค่ะ อย่างที่เห็นความแตกต่างของเพลงหนูมาลีกับเพลง Like A prayer ของMadonna ที่มีความซับซ้อนและจังหวะของเพลงที่แตกต่างกันค่ะ

ข้อมูลเพิ่มเติม : http://www.turbulence.org/Works/song/

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

 

Information Visualization : คัมภีร์ของแต่ละศาสนา

 

สีแต่ละสีจะแสดงถึงแต่ละศาสนา อย่างสีเหลืองก็พระพุทธศาสนาค่ะ คำที่อยู่ในครึ่งวงกลมก็คือคำที่มีการใช้มากที่สุด คำไหนใช้มากก็จะวงใหญ่ ใช้น้อยก็วงเล็ก แถบๆ สีเหลี่ยมข้างล่างคือคำที่มีการใช้เมื่อมีการใช้คำในครึ่งวงกลม สิ่งเหล่านี้สื่อให้เห็นถึงประเด็นหลักๆ ของแต่ละศาสนา อย่างพระพุทธศาสนาก็ให้ความสำคัญกับคำว่า “YOU” คือตัวเรา ถ้าเป็นศาสนาคริสต์ก็ให้ความสำคัญกับ “LORD”

 

นอกจากนี้ยังมีการใช้หลักการเดียวกันกับSpeech (แปลเป็นไทยว่าอะไรอ่ะ – -” ) ของผู้ชิงตำแหน่งประธานาธิบดีของสหรัฐอีกด้วยค่ะ มันบอกได้ว่า แต่ละคนให้ความสำคัญกับสิ่งใดบ้างค่ะ ลองดูในนี้นะคะ

 

 

ศึกษาเพิ่มเติมได้ที่

 

Post นี้เป็นเนื้อหาจากบลอคเก่าที่ย้ายมาลงที่นี่นะคะ 🙂


Design

เว็บที่รวบรวมงานออกแบบ User Interface และ UI Guidelines

ช่วงนี้ได้งานออกแบบ UI สำหรับ application บน platform อย่าง iOS และ Android ก็เลยต้องศึกษา User Interface ของทั้งสอง platform นี้ วันนี้ก็เลยรวบรวม Link ที่น่าสนใจมาให้ค่ะ

iOS Human Interface Guidelines

(HTML version) (PDF version)

iOS User Interface Guidelines

 

Android User Interface Guidelines

Android User Interface Guidelines

 

Android Design

Android Design Guidelines

 

LittleBigDetails.com

UI inspiration from LittleBigDetails.com

 

Patterntap.com

เว็บนี้ส่วนใหญ่เป็น User Interface ของเว็บไซต์มากกว่า

UI inspiration from Patterntap.com

 

LovelyUI.com

มีตัวอย่าง UI จาก Apps ต่างๆ ทั้งของ Android และ iOs เลยค่ะ

UI inspiration from LovelyUI

 

MobileDesignPatternGallery.com

อันนี้ก็เหมือนกัน มีทั้ง Android และ iOs

UI inspiration from MobileDesignPatternGallery

 

Inspired-UI.com

เท่าที่ดูเห็นแต่ของ iOS นะคะ

UI inspiration from inspired-ui.com

 

Pttrns.com

อันนี้ก็เห็นแต่ iOS

UI inspiration from Pttrns.com

 

Mobile UI Patterns

เท่าที่ดูจะมีแต่ UI ของ iPhone นะคะ

User Interface Mobile Patterns

 

Android Patterns

รวบรวม interaction patterns ที่จะช่วยให้เราออกแบบ UI ของ android apps โดยมีทั้งข้อดี ข้อเสียของรูปแบบ interaction นั้น รวมไปถึงตัวอย่างที่มีการใช้จริงใน app ต่างๆ

Android Interaction Patterns

AndroidUIpatterns.com

บลอคนี้เขียนโดย Juhani Lehtimaki ผู้เขียนหนังสือ Smashing Android UI ซึ่งในบลอคได้รวบรวบความรู้มากมายในการออกแบบแอพ Android รวมถึง Resource และเครื่องมือต่างๆ ในการออกแบบแอพ

AndroidUX.com

เว็บนี้รวบรวม Android UX screenshots จากมือถือรุ่นต่างๆ

Holo Everywhere

Holo Everywhere ได้ยกตัวอย่าง Application ของ Android และอธิบายถึงการออกแบบในแต่ละแอพอย่างละเอียด

AndroidNiceties

รวบรวม Screenshots ของแอพ Android ที่สวยๆ

Android App Patterns

อันนี้ก็เป็นอีกเว็บที่รวบรวม Screenshots ของแอพ Android ทั้ง Tablet และมือถือ

UIparade.com

รวบรวม UI ที่แยกเป็นชิ้นๆ ไม่ได้ Capture มาจากแอพไหน รวมถึง Freebies UI Kits ที่สามารถเอาไปใช้ได้ด้วย

UI inspiration from www.uiparade.com

 

Google I/O 2010 – Android UI design patterns

วิดีโอที่ทีม Android User Experience พูดถึงประเภทของ patterns ที่สามารถใช้ในการออกแบบ Android application ค่ะ