Graphic Design Community HardcoreGraphic

ผู้เขียน หัวข้อ: เคล็ดลับการออกแบบเว็บเพื่อโทรศัพท์มือถือ  (อ่าน 6247 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ รปภ.

  • Administrator
  • Level 12
  • *****
  • กระทู้: 1230
  • Like 39
  • เพศ: ชาย
  • หาเลวที่ตัวเรา ไม่ต้องหาเลวที่คนอื่น
    • ดูรายละเอียด
    • HardcoreGraphic
Tips ในการออกแบบ หรือ Design สำหรับอุปกรณ์มือถือต่างๆ ซึ่งการออกแบบเว็บหรือ Apps บนมือถือกำลังมาแรง หลังๆ ออกแบบเพื่อหน้าจอคอมพิวเตอร์เพียงอย่างเดียวอาจจะไม่พอ เนื่องจากอาจจะต้องวางแผนเผื่อสำหรับหน้าจออุปกรณ์อย่าง Tablet หรือโทรศัพท์มือถือ Smartphone ต่างๆ เพิ่มเติมอีกด้วย ทั้งนี้อยู่ที่ความต้องการของแต่ละท่าน

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

2. อย่าใส่ภาพหรือสื่อ Media ต่างๆ มากเกินไป เพราะว่าความไวในการโหลดบนโทรศัพท์มือถือ แน่นอนว่าไม่เสถียรเหมือนกับอินเตอร์เน็ทที่บ้าน และความไวยังไม่แน่นอนนัก ถ้าคุณใส่ภาพเป็นจำนวนมาก คุณคิดว่าคนชมจะใช้เวลานานแค่ไหนในการโหลดแต่ละภาพให้ปรากฏบนหน้าจอ

3. ใช้ CSS ในการออกแบบ ด้วยความไวในการโหลดเนื้อหา ซึ่งเราสามารถใช้ CSS ในการออกแบบให้เนื้อหายืดหดกว้างยาวได้ตามแต่ละอุปกรณ์ เช่น กำหนด CSS เพื่อหน้าจอมือถือขนาด 320x240 pixels เราก็สร้างไฟล์ CSS กำหนดประมาณนี้....

/* Smartphones (แนวตั้งและแนวนอน) ----------- */
@media only screen
and (min-device-width : 240px)
and (max-device-width : 320px) {

.wrapper1 {
   width:310px;
   border:0;
}   
}
/* Smartphones (แนวนอน) ----------- */
@media only screen and (min-width : 241px) {
#box1 {
   width:300px;
   background-color:#336600;
   margin:0 auto;
   padding:20px;
}   
#box1 h1 {
   font-family:Tahoma, Geneva, sans-serif;
   font-size:30px;
}
#box1 p {
   font-family:Tahoma, Geneva, sans-serif;
   font-size:18px;
}
}

/* Smartphones (แนวตั้ง) ----------- */
@media only screen and (max-width : 240px) {
#box1 {
   width:200px;
   background-color:#0000CC;
   margin:0 auto;
   padding:20px;
}   
#box1 h1 {
   font-family:Tahoma, Geneva, sans-serif;
   font-size:28px;
}
#box1 p {
   font-family:Tahoma, Geneva, sans-serif;
   font-size:18px;
}
}


4. และอย่าลืมเพิ่ม Tag Media Query ในไฟล์ HTML เพือกำหนดขนาดความกว้างของหน้าจอแต่ละอุปกรณ์ เช่น ณ ที่นี่ผมกำหนดสำหรับหน้าจอ 240-320 pixels ก็กำหนดไปตามด้านล่าง

<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width:240px) and (max-width:320px)" />

หมายถึงกำหนดให้ใช้ css นี้สำหรับหน้าจอความกว้างต่ำสุด 240 pixels และกว้างสุด 320 pixels

5. ใช้ Dreamweaver CS5.5 ขึ้นไปในการสร้าง Apps หรือหน้าเว็บ บนมือถือ Dreamweaver จะมี Extension ที่เรียกว่า PhoneGap ให้คุณช่วยพัฒนา Apps และยังสามารถใช้ Jquery Mobile ในการพัฒนาได้เช่นกัน






« แก้ไขครั้งสุดท้าย: มกราคม 09, 2013, 12:51:45 PM โดย รปภ »
*สมาชิกที่ไม่ได้ Login และโพสท์กระทู้ในบอร์ดประมาณ 2 ปี+ อาจถูกลบออกจากการเป็นสมาชิก ท่านจะต้องสมัครใหม่

*ไฟล์ลิขสิทธิ์ 150+ Vintage Logos และ Photo Mock-Ups ราคา 16 เหรียญ

armyboy

  • บุคคลทั่วไป
Re: เคล็ดลับการออกแบบเพื่อโทรศัพท์มือถือ
« ตอบกลับ #1 เมื่อ: พฤศจิกายน 07, 2011, 09:47:36 AM »
เจอมาครับเห็นมี iphone หรือเอา ipad มาใส่ไว้ด้วย



http://www.loadgraphic.com/download-graphic-ui-ipad-psd/

 ;D

 

©HardcoreGraphic.com All rights reserved