Advertisement
  1. Web Design
  2. Apple Watch

WATCH การออกแบบ

Scroll to top
Read Time: 2 min

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

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

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

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

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

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

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

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

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

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

Cool watch animation broCool watch animation broCool 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 bezelscreen vs bezelscreen vs bezel
เป็น)แท้จริงจอภาพและ b)แก้ว bezel

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

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

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

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

 นำร่อง

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

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

Hierarchal navigation on the Apple Watch by AppleHierarchal navigation on the Apple Watch by AppleHierarchal navigation on the Apple Watch by Apple

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

หน้าคะแนน

Page Based navigation on the Apple Watch by ApplePage Based navigation on the Apple Watch by ApplePage Based navigation on the Apple Watch by Apple

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

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

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

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

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

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

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

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

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

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

 สยบคน

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

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

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

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

Upper group templatesUpper group templatesUpper group templates
 สูงกลุ่มต้นแบบ
Just some of the many lower group templatesJust some of the many lower group templatesJust 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 1990Hilarious and inappropriate animation on the Apple Watch circa 1990Hilarious 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 TemplateApple Watch Flat UI TemplateApple Watch Flat UI Template

Apple Watch App Icon TemplateApple Watch App Icon TemplateApple Watch App Icon Template

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.