แอปพลิเคชั่นไอคอน

แอปพลิเคชั่นไอคอน

Application Icon

   ถ้าจะสนับสนุนผู้ใช้งานในการเพิ่มแอปพลิเคชั่นของเราไว้ในหน้าหลัก เราต้องการให้แน่ใจว่าแอปพลิเคชั่นของเรานั้นดูเหมาะสมในหน้าหลัก นั่นก็คือเราต้องการแอปพลิเคชั่นไอคอน (Application Icon) โดยบุ๊คมาร์ก (Bookmark) ของจอหลักใช้ภาพหน้าปัจจุบันเป็นไอคอน แต่สามารถทำให้ดีกว่านั้นได้ เพราะเราสามารถสร้างไอคอนหลายแบบสำหรับ Native Appilcation

iOS ในออปชั่น (Option) ที่ใช้สำหรับหน้าหลักของไอคอนด้วยการใส่อิลิเมนต์ link ด้วยแอตทริบิวต์ rel ของทั้ง apple-touch-icon หรือ apple-touch-icon-precomposed ส่วนต่างระหว่างสองแท็ก (tag) ก็คือ อันแรกจะมีแสงแบบดีฟอลต์ และมีเงาที่เราจะเห็นได้ในมาตรฐานแอปพลิเคชั่นไอคอนของ iOS และอันหลังจะแสดงไอคอนอย่างที่เรากำหนดให้โดยใช้ precomposed โดยเราสามารถใช้ได้เพียงหนึ่งแท็กเท่านั้นในเวลาหนึ่ง

น่าสนใจที่ iOS ละเว้นการกำหนดใน Multitasking bar และมีค่าดีฟอลต์ของความวาวเมื่อแสดงในหน้าหลักของเว็บแอปพลิเคชั่นเสมอ ดังนั้นเราจะต้องการตรวจสอบว่าไอคอนนั้นดูเหมาะสมกับสถานการณ์นี้หรือไม่ ทั้ง iOS และ Android สนับสนุนอิลิเมนต์ apple-touch-icon-precomposed link ดังนั้นมันจะเป็นทางเลือกที่ดีกว่าในการกำหนดไอคอนที่ปรับได้ในแพล็ตฟอร์มที่ต่างกัน ใน BlackBerry 6 สนับสนุน nonprecomposed tag ดังนั้นเราควรรวมมันเอาไว้ด้วย ควรรู้ไว้ว่าขณะที่ Android สนับสนุนบุ๊คมาร์กของหน้าหลัก มันจะแสดงไอคอนถ้าพาธของไอคอนเป็นแบบ Absolute

1. apple-touch-icon-72×72-precomposed.png

2. apple-touch-icon-72×72.png

3. apple-touch-icon-precomposed.png

4. apple-touch-icon.png

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

ทั้งนี้บริษัทรับทำเว็บไซต์ศึกษาข้อมูลของ Mobile Safari สนับสนุนรูปแบบที่คล้าย Native ในการทำเว็บแอปพลิเคชั่นด้วยการเพิ่มอิลิเมนต์ link ด้วย rel ที่มีค่าเป็น apple-touch-startup-image การทำเช่นนี้จะเหมือนไอคอนของจอหลักข้างบน เราสามารถกำหนดภาพที่แสดงออกมาในขณะที่แอปพลิเคชั่นถูกโหลด

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

การทำที่เหมาะสมคือ ใช้ภาพของอินเตอร์เฟซที่ไม่มีข้อความ สิ่งนี้จะสร้างภาพเหมือนของแอปพลิเคชั่นที่จะใช้โหลดของจริงที่เปิดใช้งานได้ โดยจะมีการเปลี่ยนแปลงอย่างราบรื่นเมื่อแอปพลิเคชั่นถูกโหลด วิธีนี้เป็นของ Apple ที่ใช้สำหรับ Native Application ใน iOS เรามักจะเห็นการทำทำงานแบบนี้เมื่อเราเปิดเมล (Mail) และต้องแน่ใจว่าเราลบ Process ใน Multitasking bar เสียก่อน

เมื่อเข้าสู่การทำงานแบบนี้ ต้องแน่ใจว่าภาพที่ใช้เป็นจุดเริ่มของแอปพลิเคชั่นนั้นเข้ากันได้กับอินเตอร์เฟชด้วยขนาด pixel ที่ถูกต้อง มิฉะนั้นภาพที่แสดงนั้นจะขาดหายไป ทางที่ง่ายที่สุดที่จะทำให้ภาพเข้ากันได้คือ ใช้อินเตอร์เฟชเป็น Canvas และใช้ Screenshot นี่เป็นงานง่ายๆ ที่ซ่อนอิลิเมนต์ที่เราไม่ต้องการให้เห็น ด้วยการใช้ visibility: hidden ในไฟล์ CSS จากนั้นก็ใช้ Screenshot

เราซ่อนทุกอย่างไว้ ยกเว้นพื้นหลังของอิลิเมนต์หลัก เราไม่สามารถรวมรายการในแท็บบาร์ เพราะไม่อาจแน่ใจได้ถึงสถานะของมันว่าจะเป็นอย่างไร การเอาอินเตอร์แอกทีฟอิลิเมนต์ออกไป ทำให้ผู้ใช้งานไม่สับสนกับสถานะของแอปพลิเคชั่นขณะนั้น เช่น ถ้าไม่มีปุ่มให้กด ก็จะไม่มีใครลองกดดู ภาพมันต้องมีขนาด 320×460 pixels ความละเอียดของจอภาพแบบเต็มจอของ pre-Retina iPhone จะลดลงราว 20 pixels เพื่อใช้ในสเตตัสบาร์ สำหรับ apple-touch-startup-image flag จะไม่ดีนัก เพราะไม่มีความแตกต่างระหว่างอุปกรณ์ที่มีความละเอียดจอภาพที่ต่างกัน ถ้าแอปพลิเคชั่นของเราเป็นแบบวางแนวนอน (Landscape) เราจะต้องหมุนจอภาพไปอีก 90 องศา เพื่อให้เห็นภาพการทำงานอย่างถูกต้อง

ทั้ง iOS และ Android ไม่ได้ต้องการกำหนดพร็อปเพอร์ตี้นี้ เพื่อใช้เป็นชอร์ตคัตในจอหลักของผู้ใช้ ดังนั้นหากไม่ต้องการทำให้เป็นแอปพลิเคชั่น Standalone เราก็เพียงมีไอคอนของหน้าขอหลัก และไม่ใช้ apple-mobile-web-app-capable meta tag เมื่อดูขั้นตอนพิเศษจะเห็นว่ามันไม่ยาก และคุ้มค่าที่จะทำเพิ่มเติมให้ดูดีที่สุดเท่าที่จะทำได้ให้แก่ผู้ใช้งาน


Copyright © อุปกรณ์โมบายแอพพลิเคชั่น All rights reserved.