30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Apple Watch
Webdesign

WATCH การออกแบบ

by
Length:LongLanguages:

Thai (ภาษาไทย) translation by Muhammad Gufron (you can also view the original English article)

กับคนพิเรียกของแอปเปิ้ลคนใหม่ของและ shiniest ผลิตภัณฑ์ที่แอปเปิ้ลองดู(err,ระวัง)มันอยู่รอบตัวข้าเต็มไปหมดีไซน์เนอร์นอกนั่นคันอยากจะได้รู้สึกสำหรับคนใหม่ล่าสุดของเล่นเพื่อออกมาจาก Cupertino น  มีบางวิธีการใหม่ๆที่จะมีปฏิสัมพันธ์กับอุปกรณ์;ชอบแอปเปิ้ลของบังคับแตะต้องเมนูของดิจิตอลมอบมงกุฎอย่างที่ดีอย่างที่หลายคนส่วนประกอบส่วนติดต่อผู้ใช้ของคุณอาจจะอยู่แล้วต้องคุ้นเคยกับเหมือนปุ่มกดรูปแบบข้อความและ switches โอ้ของฉัน!

 ก่อนที่กำลังสำรวจส่วนติดต่อผู้ใช้ส่วนประกอบของขวัญขึ้นเจ้าของเฟสบุ๊คอับราฮัมลินดูปล่อยให้เป็นคนแรกปกปิดบางอย่างของพื้นฐานก่อนที่คุณควรเก็บไว้ในใจตอนที่งานออกแบบสำหรับใหม่ของอุปกรณ์ ตอนเวลาของการเขียนเจ้าของเฟสบุ๊คอับราฮัมลินดูเป็นยังต้องถูกปล่อย,ดังนั้นถ้าคุณมีคำแนะนำของ,หมายเหตุหรือการตรวจแก้ต่างๆได้โปรดบอกให้ฉันรู้อยู่บนทวิตเตอร์หรืออยู่ในคอมเมนท์พวกนี้สิ

The already familiar Apple Watch homescreen
ที่อยู่แล้วคุ้นเคยแอปเปิ้ลองดู homescreen

ทางกายภาพสิ่งที่แนบมาด้วย

อย่างแรกเลยก็คือเจ้าของเฟสบุ๊คอับราฮัมลินดูเป็นทางกายน่ะยึดติดกับคนของผู้ใช้ได้ เป็น mindful ของการเชื่อมต่อแล้วมันจะทำให้ผู้ใช้ของคุณรู้สึกตอนที่ปฏิสัมพันธ์กับส่วนติดต่อผู้ใช้ของ

อะไรที่คุณคิดว่าแอปเปิ้ลเป็นปรารถนาไปสู่พวกผู้ใช้'อารมณ์กับเจ้าของเฟสบุ๊คอับราฮัมลินนาฬิกาล่ะ?  ถ้าโฆษณานี้สอดคล้องกับแอปเปิ้ลขอเนื้อหากลยุทธแล้วก็อารมณ์มัน conveys เป็นความสุขความตื่นเต้น,อ้อ,และสงสัยว่าทุกขณะที่ conveying นของ personalization กับผู้ใช้ที่แตกต่างกันดูอ้าง,สีและระวังหน้า ยังไงคุณอาจจะเตือนพวกเดียวกับความรู้สึกกับการออกแบบของของคุณดูแอ๊ป?  ยังไงความจริงที่ว่านาฬิกามันเกี่ยวข้องกับผู้ใช้เปลี่ยนทางของผู้ใช้อาจจะรู้สึกเกี่ยวกับการออกแบบของแอ๊ป?

ทำให้มันง่าย

เจ้าของเฟสบุ๊คอับราฮัมลินดูไม่ใช่ที่มีพลังอำนาจอย่างใหม่ของคุณ\n smartphone น ตอนที่งานออกแบบสำหรับเว็บและเคลื่อนฉันบางครั้งมีความผิดของการใช้เป็นภาพทางอันเล็กกว่านี้นะ  ในกรณีของเจ้าของเฟสบุ๊คอับราฮัมลิงดูเราจะเตือนเพื่อให้สิ่งที่เป็นเบามากที่สุดเท่าที่เป็นไปได้เพราะพวกนั้นพิเศษกิโลไบต์จริงๆองทำให้แตกต่างกันหรอก

ผู้ใช้ไม่อยากเชื่องช้าและ sluggish ประสบการณ์นะ  การใช้ของที่ใหญ่กว่ารูปภาพและการเคลื่อนไหวจะไม่เพียงแต่สร้างที่น่าสงสารของผู้ใช้ประสบการณ์มันจะยังเหมือให้แอ๊ปของคุณปฏิเสธเมื่อถึงเวลาต้องส่งมันให้แอปเปิ้ลนะ

Cool watch animation bro

ถามตัวเอง"ขอแสดงความเคลื่อนไหนจำเป็นจริงๆหรอ?" การเคลื่อนไหวเป็นแย่ถ้าพวกเขาเป็นทำให้เป็นหน่วงเวลาโดยไม่ของพวกเขาแค่ทำให้่คุณสมบัตินะ  จำได้ไหมคุณกำลังสร้างบางอย่างสำหรับคอมพิวเตอร์ขนาดของ postage ตราประทับนั่นก็ยังคงมีเพื่อ wirelessly อสายข้อมูลข้อมูลจากโทรศัพท์ เป็น bottleneck อยู่ที่นั่น

ทำเป็นว่าคุณกำลังสร้างเว็บไซต์ของในช่วงก่อน 90s นั่นต้องการจะทำการส่งข้อมูลของมันเป็น 14.4 k โมเด็มต้องเป็นของผู้ใช้บนคอมพิวเตอร์กับ 386 หน่วยประมวลผล name และ 2mb ของชนเลย คุณคงไม่ใช้แบบอักษรที่กำหนดเอง,การเคลื่อนไหวและตัวใหญ่จาวาสคริปต์บรรณารักษ์อยู่ในสถาการณ์นั้นมันคุณ? ซ่อนสิ่งต่างๆไม่สำคัญหรอก  สร้างสำหรับความเร็วและความเคารพของผู้ใช้ได้เวลานอน ขัดขืนแรงกระตุ้นที่จะทำให้เคบาย  ทำให้มีผลซึ่งกันและกัที่มีประโยชน์บ้าง ไม่ไม่จำเป็นต้องใช้การเคลื่อนไหวนะ ดื่มน้ำเยอะๆ เป็นแบบไหนและให้เกียรติผมหน่อยไปยังคนอื่น ฟังแม่ของคุณ

"ถ้าคุณเลือกแบบเส้นต่อเนื่องมีผลซึ่งกันและกันกับของคุณ iOS แอพในนาทีคุณสามารถคาดหวังให้มีผลซึ่งกันและกันกับของคุณ WatchKit แอพฯจะตรวจดูในวินาที ดังนั้นทำให้มีผลซึ่งกันและกัองใช้เวลาสั้นและส่วนเชื่อมต่อเรียบง่าย" –แอปเปิ้ลองดูเป็นมนุษย์ส่วนติดต่อกฏ

สีและ Typography

การใช้สีและ typography นสำคัญมากใน branding ของโปรแกรมของคุณแต่มันมีบางอย่ากุญแจ considerations ต้องเก็บไว้ในใจแล้ว

สี

"สีช่วยให้มองเห็น continuity และ branding สำหรับแอ๊ปของคุณ." –แอปเปิ้ลองดูเป็นมนุษย์ส่วนติดต่อกฏ
  • ใช้สีดำสำหรับพื้นหลังของคุณ มันจะทำตัวกลมกลืนกับจอนเป็นเรื่องทางกายภาพ bezel และรักษาเป็นภาพลวงตาของไม่มีขอบจอย ไม่ต้องใช้สว่างพื้นหลังนะ
  • ใช้สูงความเปรียบต่างของสีสำหรับข้อความ  จำได้ไหมนาฬิกาไม่เคยนานหรอกจำนวนตัวอักษรที่จะองของเวลา,ผู้ใช้ต้องการที่จะสามารถอ่านเนื้อหาของคุณได้อย่างรวดเร็วและง่ายดายนักน่ะ
  •  เป็น mindful ของสี blindness น

Typography

 โดยทั้งหมดใช้แบบอักษรที่กำหนดเองนะแต่เป็นเรื่องนั้นระบบแบบอักษรเป็นกออกแบบให้ใช้งานได้ดีขึ้นใหม่ของอุปกรณ์

"เหนือทั้งหมดข้อความต้องเป็น legible น ถ้าผู้ใช้ไม่สามารถอ่านคำพูดในแอ๊ปของคุณมันไม่สำคัญหรอช่างสวยงามอย่างที่ typography น" –แอปเปิ้ลองดูเป็นมนุษย์ส่วนติดต่อกฏ

สำหรับกิจกรรมพิเศษของแบบอักษรของระบบ(ซานฟรานซิสโกน)รวม:

  • คนตัวบีบตัวอักษรรับน้อยลงทางแนวนอนอวกาศ
  • ที่ขนาดใหญ่ขนาดพวกเขาเว้นระยะห่างโดยสิ้นเชิงมากก loosely และที่ใหญ่กว่า glyph apertures น
  • เครื่องหมายวรรคตอนได้ proportionally นที่ใหญ่กว่าเมื่อแบบอักษรที่จะลงมือฆ่าตัวเล็กกว่า

รูปแบบข้อความ

รูปแบบข้อความเป็นกำกับรายละเอียดของการจะใช้สำหรับแบบอักษรของคุณ. ตัวอย่างบางอย่างที่เหมือน àšà£à£à-à±à"àªà£àà",ร่างกายเป็นต้น คุณอาจคุ้นเคยกับ HTML เทียบเท่ากับของ<ถนนเอช 2><ศพ>และเหมือน  ถ้าคุณใช้สร้างรูปแบบข้อความเธอออกไปปรับอัตโนมัติประเภทสนับสนุนซึ่งตอบสนองโดยอัตโนมัติเพื่อผู้ใช้'การช่วยใช้งานปรับแต่งค่าย  ถ้าคุณใช้แบบอักษรที่กำหนดเองคุณจะต้องทำงานบางอย่างที่จะรับเลี้ยงดูความสามารถของคุณสมบัตินะ

อวกาศ

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

"อวกาศในแอปเปิ้ลองดูเป็นงานชั้นยอดและทุกอนการเกิดขึ้นอีกของโลโก้ต้องอวกาศห่างออกจากเนื้อหาที่ผู้ใช้ต้องการจะเห็น" –แอปเปิ้ลองดูเป็นมนุษย์ส่วนติดต่อกฏ
iOS มพันธ์กันกับ screensize เปรียบเทียบ

เจ้าของเฟสบุ๊คอับราฮัมลินดูมี bezel อยู่ขอบทางกายภาพซึ่งมันทำนุ่นช่วยให้คุณออกแบบ คุณดังนั้นไม่จำเป็นต้องเพิ่มขอบกระดาษที่ขอบของของคุน้าจอ

screen vs bezel
เป็น)แท้จริงจอภาพและ b)แก้ว bezel

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

ความละเอียดในการแสดงผล

 Apps แสดงผลเดียวกับส่วนติดต่อทั้งสองขนาดของเจ้าของเฟสบุ๊คอับราฮัมลินดูแล(38mm และ 42mm)ดังนั้นโดยการใช้มุมมองหน่วยคุณสามารถอนุญาตของรายการจะเติบโตและจิตแพทย์เพื่อเติมเต็มที่ที่ว่างอยู่พื้นที่บนทั้งสองขนาดนี้ หน้าจอเสมออยู่ในโหมดถ่ายภาพบุคคล:ความสูงคือสิ่งที่ยิ่งใหญ่กว่าความกว้าง.

Apple Watch Screen Resolutions
อุปกรณ์ขนาด ความกว้าง(หน่วยเป็นพิกเซล) ความสูงของ(ในหน่วยเป็นพิกเซล)
 38mm  สองร้อย seventy สองคน สามร้อยสี่สิบ
42mm สามร้อยสิบสอง  สามเก้าสิบร้อย

 นำร่อง

ใน WatchKit apps คุณจะรายสองคนต่างกันโดยสิ้นเชิงนำร่องรูปแบบ:

ลำดับชั้นการสืบทอด

Hierarchal navigation on the Apple Watch by Apple

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

หน้าคะแนน

Page Based navigation on the Apple Watch by Apple

"จากหน้า"นี่เป็นทางแนวนอนการเลื่อนข้อความแบบระบบนำทางแบบซึ่งแสดงให้เห็นที่หน้าปัจจุบันโดยอนุกรมของหน่วยจุดด้วยทางด้านล่างของนาฬิกาองจอภาพด้วย

คุณไม่สามารถรวมสองคนนี้เข้าไปในระบบเดียวกับแอ๊ปแต่คุณสามารถแสดง"modal ผ้าปูที่นอน"ของคุณโดยไม่คำนึงถึงการนำทางแบบนั้น

Modal ผ้าปูที่นอน

คุณพอจะคิดออกเป็น modal แผ่นงานตอนเป็นบัตรที่ให้ผู้ใช้วิธีสมบูรณ์เป็นงาน Modal ผ้าปูที่นอนมีนัดเดียวจอภาพหรือหลายหน้าจอจะแสดงในหน้าเว็บพื้นฐานผังแป้นพิมพ์ได้ ความแตกต่างเพียงอย่างเดียวระหว่างสองคือกเหนือจากของจุด indicators ที่ด้านล่างของหน้าเว็บพื้นฐานอินเทอร์เฟสนี้

Apple Watch Modal Sheets
ข้อคนที่นำร่องหน่วยจุดที่สองที่รูปภาพ

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

อะไรท่อนคุณเพิ่มขึ้นของคุณ modal ผ้าปูที่นอนควรจะแสดงการกระทำพวกเขาออกแบบสำหรับและปิด modal แผ่นงานแผ่นดังนั้นผู้ใช้ได้ไม่ต้องแสดงว่าขั้นตอนพิเศษนะ แอปเปิ้ลบ่งบอกคุณไม่เพิ่มเป็นสอง modal ส่วนติดต่อจากที่เริ่มดวงหนึ่งคุณควรทำอย่างงั้นมันอาจเป็นสาเหตุสำหรับการปฏิเสธอันโปรแกร submission น ถ้าแอปเปิ้ลลูกควรรายงานโดนต่อต้านบางอย่างมันเป็นปกติที่ดีที่สุดให้ฟังนะเว้นแต่คุณมีเหตุผลที่ดีที่ไม่ต้อง

มีผลซึ่งกันและกั

 มันอาจจะมากกว่าทางสำหรับผู้ใช้ที่มีปฏิสัมพันธ์กับแอ๊ปของคุณในอนาคตไปหลายชั่วอายุคน(เช่นหลายแตะต้องและลากเมาส์สั่งงานใหม่)แต่สำหรับตอนนี้พวกนี้เป็นเพียงทางเลือกอื่นให้ฉันอีกไหม

  • เดี่ยวดักฟัง-ใช้สำหรับสิ่งที่เหมือนกดดันปุ่มและส่วนที่เลือกไว้ได้
  • รูปแบบลายเส้นจำกัด - ปัดแนวตั้งเพื่อการนำทางหน้าจอ hiearchial เลื่อนแนวนอนสำหรับการนำทางผ่านหน้าจอหน้าคะแนน ซ้ายขอบปัดแนวนอนเพื่อกลับไปหน้าจอก่อนหน้า ไม่มีทางที่จะทำให้ swiping ทำงานข้างนอกของ navigating ระหว่างหน้าหรืออยู่ในทางแนวตั้งโต๊ะด้วย
  • กำลังสัมผัสกดวงเวลาที่ยากของระวังหน้าเพื่อเข้าใช้งานเมนูที่เกี่ยวข้องกับปัจจุบันองจอภาพด้วย
  • ดิจิตอลมอบมงกุฎ-ล้อด้านข้างของนาฬิกาจะถูกใช้ในแอ๊ปของคุณเพื่ออนุญาตให้ทางแนวตั้งสำหรับการเลื่อนแบบอย่างเดียว

 สยบคน

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

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

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

 ที่นี่เป็นบางอย่างของด้านบนและด้านล่างกลุ่มต้นแบบสำหรับคนทันทีจอภาพ:

Upper group templates
 สูงกลุ่มต้นแบบ
Just some of the many lower group templates
แค่บางอย่างจากหลายๆด้านล่างกลุ่มต้นแบบ

การแจ้งให้ทราบต่างๆ

การแจ้งให้ทราบคือแสดงให้ผู้ใช้ภายในสองวิธีที่แตกต่างกัน:สั้น-ฟังนะและนาย-ฟังนะ

สั้น-ฟังนะการแจ้งให้ทราบต่างๆ

พวกนี้บอกผู้ใช้ที่โปรแกรก็คือแจ้งพวกเขาและทำให้เป็นอ่านข่าวพาดหัว  ถ้าผู้ใช้ lowers กข้อมือเร็วหรือไม่ดักฟังการแจ้งให้ทราบคือออกไปก่อน ผู้ใช้ไม่จำเป็นต้ด้วยตนเองมีปฏิสัมพันธ์กับการแจ้งให้ทราบเพื่อลบมัน การออกแบบของสั้น-ฟังนะการแจ้งให้ทราบคือต้นแบบพื้นฐานแล้วบรรจุแอพไอคอนโปรแกรชื่อและหัวเรื่องข้อความ เก็บของคุณหัวเรื่องใช้เส้นสายที่สั้นและที่สำคัที่สุดเท่าที่จะทำได้

นานมา-ฟังนะการแจ้งให้ทราบต่างๆ

พวกนี้ให้มากกรายละเอียดเรื่องการแจ้งให้ทราบและมากกว่า customizable อยู่ในรูปลักษณ์นี้ ที่โครงสร้างพื้นฐานเป็นเหมือนกันทุ apps และรวมถึงการเป็น sash อยู่ทางด้านบนซึ่งแสดงแอพเป็นภาพไอคอนและชื่อของคุณโปรแกรนกำหนดเองเนื้อหาจอขึ้นกับสี่คนทำกระดุมและในที่สุดก็เป็นไม่สนใจปุ่มที่ด้านล่างได้แล้ว

ส่วนติดต่อผู้ใช้ส่วนประกอบ

กับพวกนี้พื้นฐานขังมั่นใจในความคิดของคุณไปค้นหาความแตกต่างส่วนประกอบของเจ้าของเฟสบุ๊คอับราฮัมลินดูเป็นของผู้ใช้ส่วนติดต่อได้

 "อย่างที่คุณออกแบบของคุณโปรแกรน graphical ส่วนประกอบจำได้ไหมว่าแต่ละกำหนดเองธาตุควรจะดูดีและฟังก์ชันดีโดยตัวมันเองแต่มันควรจะดูเหมือนมันเป็นของกับอีกส่วนประกอบในโปรแกรมเกี่ยไม่ว่าพวกเขากำหนดเองหรือมาตรฐานอน" –แอปเปิ้ลองดูเป็นมนุษย์ส่วนติดต่อกฏ

การเคลื่อนไหว

ปรับอัตโนมัติการเคลื่อนไหวต้องถูกโอนย้ายจาก iPhone นำไปสู่การสิ่งที่หลีกเลี่ยงไม่ได้หน่วงเวลานะ นาฬิกาแอ๊ปอาจถูกปฏิเสธวันที่หนักการพึ่บการเคลื่อนไหว,ดังนั้นใช้มันเท่านั้นเพื่อสื่อสารสอบสถานะและให้การแจ้งเตือนการเริ่มทำงานเพื่อผู้ใช้ได้ Gratuitous ใช้ของการเคลื่อนไหวไม่ได้แนะนำ(แม้ว่าจะให้มีการเคลื่อนไหวเมื่อคือของ hilariously ชีวิต-เหมือนเต้นลูก)นะ ร้านก่อนค่าการแสดงผลการเคลื่อนไหวโดยใช้ลำดับของภาพต่างๆในรูปของไฟฟ้าสถิตย์ในของคุณ WatchKit แอ๊ปสวมเสื้อกันหนาวได้ดังนั้นพวกเขาจะได้นำเสนอให้เร็วไปที่ของผู้ใช้แทนที่จะย้ายมาจากโทรศัพท์

Hilarious and inappropriate animation on the Apple Watch circa 1990

ปุ่ม

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

 นี่อาจฟังดูเห็นได้ชัดเลยแต่จำไว้หน่วยพิทักษ์น้าจอเป็นตัวเล็กลงเพื่อเก็บของปุ่มที่ใหญ่ที่สุดเท่าที่เป็นไปได้–ไม่ต้องทำให้มันยากสำหรับผู้ใช้ที่ดักฟังอยู่บนปุ่ม ปุ่มสามารถมีภาพหรือตั้งค่าสีสำหรับเบื้องหลังอย่างที่ดีอย่างที่มีสีต่างออกสำหรับการส่งข้อความนั่น พวกเขามีป้ายชื่อหรือกลุ่มวัตถุและจะมี rounded มุม(ค่าปริยายหัวมุมถนอกรัศมีการตอน 6 คะแนน)

บังคับให้แตะต้องเมนู

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

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

 จำได้ไหมผู้บังคับให้แตะต้องเมนูเมื่อคลิกขวา@title:tab อย่างที่นี่มันเรื่องใหม่และน่าตื่นเต้นทางที่จะมีปฏิสัมพันธ์กับอุปกรณ์  แทนที่จะเป็นการเพิ่มปุ่มพิเศษของคุณส่วนติดต่อ,พิจารณาโดยใช้กำลังแตะต้องเมนูเมื่อคลิกขวา@title:tab น

ไอคอน

 ไอคอนเป็นภาพแวดวง  คุณสามารถสร้างพวกเขาที่มีการทำดัชนีสีเพื่อช่วยอวกาศ 24 นิดและไม่มีความโปร่งแสงล่องหน ไอคอนยังไม่มีข้อความบนพวกเขาอยู่หน่วยพิทักษ์กลับบ้านองจอภาพด้วย

 ดาวน์โหลดแอปเปิ้ลลูกนี้ดูภาพไอคอนต้นแบบสำหรับใช้งานในของตัวเองโครงการของนะ

 ภาพไอคอนขนาดสำหรับ WatchKit แอพบแอปเปิ้ลองดู:

ทรัพย์สิ 38mm ระวัง(ในหน่วยเป็นพิกเซล) 42mm ระวัง(ในหน่วยเป็นพิกเซล)
 การแจ้งให้ทราบทางศูนย์กลางไอคอน
48 x 48 55 x 55
นานมา-ฟังนะการแจ้งให้ทราบภาพไอคอน
80 x 80 88 x 88
กลับบ้านจอภาพไอคอน
80 x 80  80 x 80
สั้น-ฟังนะไอคอน
172 x 172  196 x 196

ภาพไอคอนขนาดสำหรับใช้งานมาใช้งานโดยแอปเปิ้ลองดูโปรแกรมเกี่ยวกั iPhone:

ทรัพย์สิ @2x @3x
 เป็นภาพไอคอนของโปรแกร 58 x 58  87 x 87

 รูปภาพ

ใช้รูปภาพสำหรับจอภาพขนาดนี้ ความเร็วและอให้เกิดประสิทธิภาพเป็นเรื่องสำคัญมากดังนั้นบีบอัดของคุณภาพให้มากที่สุดเท่าที่จะทำได้นะ พยายามช่วยคุณ pngs กับมีการทำดัชนีของสีเป็นของแข็งพื้นหลังแทนที่จะอยู่บนพื้นหลังแบบโปร่งแสงได้ สร้างทุกรูปภาพทรัพย์สินเหมือนเครื่อง 2x ทรัพยากร;ไม่ต้องการจะสร้างคนที่ไม่ใช่ Retina ภาพถ่ายต่างๆทั้งนี้

บีบอัดของคุณ pngs กับเครื่องมือเหมือน tinypng,pngout และ pngcrush น ImageOptim เป็นคนยอดเยี่ยมฟรีเครื่องมือสำหรับแมคทะเบียนผู้ใช้ได้

แผนที่

แผนที่อยู่ในรูปของไฟฟ้าสถิตย์ screenshots ของตำแหน่งและไม่ใช่แบบโต้ตอบนะ ดักฟังอยู่บนแผนที่ต้องใช้ของผู้ใช้เพื่อแผนที่ app

ป้ายต่างๆ

เป็นป้ายชื่อเป็นแฟนซีบอกได้แค่ว่า"เป็นรูปแบบข้อความของข้อความ"นะ มันไม่อนุญาตสำหรับโดยตรงของผู้ใช้การโต้ตอบ,แม้ว่ามันจะถูกอัปเด programatically และสามารถยืดหลายบรรทัด.

เครื่องหมายแยกเลขหลัก

ที่เครื่องหมายแยกเลขหลักคือคนง่ายๆยังมีค่าส่วนติดต่อผู้ใช้ของอีลีเมนต์:บรรทัดสำหรับแยกกันองเนื้อหาได้ที่นี่

 ตัวเลื่อน

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

 Switches

Switches ให้ของของผู้ใช้วิธีที่จะกำหนดหนึ่งในสองทางเลือก หรือปิดได้หรือไม่,etc. Stylistically พวกเขาจะคุ้นเคยกับคุณจาก iOS และพวกเขาเสมอรวมแถบข้อความกำกับ

ตารางข้อมูลเรียบร้อยแล้ว

โต๊ะของขวัญวนแถวของข้อมูลด้วยการโดดครั้งเดียวคอลัมน์ที่ผู้ใช้สามารถเลื่อนทางแนวตั้งขอผ่าน ให้ตารางข้อมูลเรียบร้อยแล้วเล็กกว่า 20 แถวอย่างที่มากกว่านั่นเป็นเรื่องยากที่จะเลื่อนผ่าน ถ้าคุณมีมากกว่า 20 แถวคุณสามารถให้ผู้ใช้ใช้ตัวเลือกนี้เพื่อให้มีการโหลดมากกว่านั้น ปรับขนาดตารางข้อมูลเรียบร้อยแล้ว dynamically ดูจากจำนวนแถวขอมันมีส่วนประกอบนะ  เป็นผลให้ตารางข้อมูลเรียบร้อยแล้วไม่สนใจมีความสูงของต่าวางไว้บนพวกเขาโดยกลุ่มข่าว  แอปเปิ้ล recommends ว่าคุณยังไม่ฝังตารางข้อมูลเรียบร้อยแล้วเข้าไปในกลุ่มนะ

ในสรุป

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

เพิ่มทรัพยากร

Apple Watch Flat UI Template

Apple Watch App Icon Template

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.