ใช้ธีมที่ทันสมัยในแอปแบบจําลองข้อมูล

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

ปรับเปลี่ยนธีมแอป

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

ภาพรวมของทรัพยากร XML ของธีมแบบกําหนดเอง

ขั้นตอนแรกในการสร้างธีมทันสมัยแบบกําหนดเองคือการสร้างไฟล์ XML ด้วยพารามิเตอร์ธีมที่คุณต้องการโดยมีอย่างน้อยหนึ่งแอตทริบิวต์ต่อไปนี้ที่กําหนดไว้ภายใน CustomTheme แท็ก

• BasePaletteColor – สีเมล็ด (รหัส HEX) ที่ใช้เป็นพื้นฐานในการสร้างชุดสีแบบ 16 สล็อตสําหรับธีม
• LockPrimary – บูลีนที่กําหนดวิธีการใช้สีเมล็ดที่เลือกเพื่อสร้างชุดสีแบบ 16 สล็อต
  • เท็จ (ค่าเริ่มต้น): ชุดแบบสีถูกปรับให้เหมาะสมเพื่อความสะดวกในการเข้าถึง แต่ไม่รับประกันว่าสีต้นแบบจะปรากฏในช่องใดๆ ของชุดแบบสีที่สร้างขึ้น ซึ่งเป็นการตั้งค่าเริ่มต้น ใช้ตัวสร้างธีม Fluent เพื่อแสดงตัวอย่างชุดแบบสีที่สร้างขึ้นตามการเลือกของคุณสําหรับ basePaletteColorvibrancy, และhueTorsion
  • จริง: สีเมล็ดจะถูกวางในช่องสีหลัก (ตรงกลาง) สีที่เหลือจะถูกสร้างโดยการทำให้สีจางลงทีละน้อยในด้านหนึ่งและเข้มขึ้นในอีกด้านหนึ่ง ชุดแบบสีที่สร้างขึ้นอาจไม่ตรงตามข้อกำหนดการเข้าถึงของอัตราส่วนความคมชัด
• Font – ฟอนต์สําหรับธีมแบบกําหนดเองของคุณ แบบอักษรที่ธีมแบบกําหนดเองแสดงขึ้นอยู่กับความสามารถของเครื่องเบราว์เซอร์และเป้าหมายในการแสดงแบบอักษรนั้น
• Vibrancy – พารามิเตอร์ที่เลือกได้ที่ส่งผลกระทบต่อการปิดเสียงหรือความสว่างของจานสี โดยเฉพาะอย่างยิ่งสีที่สว่างกว่า ค่าที่อนุญาตอยู่ระหว่าง -100 ถึง 100 โดยใช้ค่าเริ่มต้นเป็น 0 ตัวเลือกนี้ใช้ได้เฉพาะเมื่อlockPrimary="true"
• HueTorsion – พารามิเตอร์ที่เลือกได้ที่ส่งผลกระทบต่อสีอ่อนแก่ เฉดสี หรือโทนของจานสี โดยเฉพาะอย่างยิ่งสีที่สว่างกว่า ค่าที่อนุญาตอยู่ระหว่าง -100 ถึง 100 โดยใช้ค่าเริ่มต้นเป็น 0 ตัวเลือกนี้ใช้ได้เฉพาะเมื่อlockPrimary="true"
• LogoWebResource – ชื่อตรรกะของทรัพยากรบนเว็บรูปภาพที่จะใช้เป็นโลโก้ในส่วนหัวของแอป โลโก้ที่ใหญ่เกินไปจะไม่แสดง ขนาดรูปภาพที่แนะนําคือ ความกว้าง 156 พิกเซล ×สูง 48 พิกเซล
• LogoTooltip – ข้อความแนะนําเครื่องมือที่แสดงขึ้นเมื่อผู้ใช้โฮเวอร์เหนือโลโก้แอป ค่าเริ่มต้นเป็น Dynamics 365 ถ้าไม่ได้ระบุ ไว้

แทนที่พาเลตสี

การแทนที่แต่ละช่องในจานธีมช่วยให้ผู้สร้างสามารถควบคุมสีของช่องได้อย่างเต็มที่ซึ่งเป็นประโยชน์อย่างยิ่งเมื่อจําเป็นต้องแก้ไขเพิ่มเติมนอกเหนือจากพารามิเตอร์ธีมมาตรฐานที่กล่าวถึงข้างต้น หากต้องการแทนที่ช่องที่ระบุ ให้กําหนดค่าไปยังช่องที่ต้องการตามชื่อ ตัวอย่างเช่น คุณสามารถระบุรหัส HEX สําหรับ darker70primary, หรือlighter10เพื่อปรับแต่งลักษณะที่ปรากฏอย่างแม่นยําตามความต้องการของคุณ การตั้งค่าสําหรับช่องทั้ง 16 ช่องจะแทนที่ตัวเลือกชุดแบบสีทั้งหมดที่อธิบายไว้ในส่วนก่อนหน้าโดยทั้งหมด ช่วยให้สามารถปรับแต่งได้เองอย่างมากและไม่ซ้ํากัน

ชื่อช่องสําหรับจานสีจากสีเข้มที่สุดถึงสว่างที่สุดคือ: darker70, darker60,…<> , darker10, primary, , lighter10, lighter20, , …lighter80 โปรดดูตัวออกแบบธีม Fluent เพื่อดูว่าโดยทั่วไปแล้วช่องสีเหล่านี้ใช้ในตัวควบคุม Fluent อย่างไร

ตัวอย่าง XML สําหรับธีมแบบกําหนดเอง

ตัวอย่างเช่น XML นี้ระบุธีมแบบกําหนดเองที่เป็นสีเขียวที่มีแบบอักษรที่แตกต่างกันและโลโก้แบบกําหนดเอง

<CustomTheme 
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
    logoWebResource="contoso_company-logo"
    logoTooltip="Contoso"
/>

XML นี้ระบุธีมแบบกำหนดเองโดยใช้อัลกอริทึมการสร้างพาเลตทางเลือก พร้อมกับการแทนที่เฉพาะสำหรับตำแหน่งเดียว

<CustomTheme 
    basePaletteColor="#00FF00"
    lockPrimary="false"
    font="'GreatVibes', cursive"

    lighter70="#FFFFFF"
/>

ปรับเปลี่ยนสีส่วนหัวของแอป

ผู้สร้างสามารถกําหนดสไตล์ของส่วนหัวของแอปเองเพื่อให้แตกต่างจากธีมแอป เมื่อต้องการกําหนดค่าเหล่านี้ ให้ขยาย XML ที่สร้างขึ้นสําหรับธีมสมัยใหม่แบบกําหนดเอง โดยการเพิ่มอย่างน้อยหนึ่งแอตทริบิวต์ต่อไปนี้ภายใน AppHeaderColors แท็ก

• Background – สีพื้นหลังของส่วนหัวของแอป องค์ประกอบนี้ต้องถูกกําหนดสําหรับการเปลี่ยนแปลงใด ๆ จึงจะมีผล
• Foreground – สีข้อความของส่วนหัวของแอป หากไม่ได้ระบุไว้ ระบบจะพยายามคํานวณสีที่เหมาะสมที่มีความเปรียบต่างที่เพียงพอกับสีพื้นหลังที่ให้มา
• BackgroundHover – สีพื้นหลังของปุ่มบนส่วนหัวของแอปเมื่อปุ่มวางเมาส์เหนือปุ่ม ถ้าไม่มีการระบุค่า ระบบจะคํานวณสีตามสีพื้นหลัง
• ForegroundHover – สีข้อความของปุ่มบนส่วนหัวของแอปเมื่อวางเมาส์เหนือปุ่ม หากไม่ได้ระบุค่า ระบบจะพยายามคํานวณสีที่เหมาะสมที่มีความเปรียบต่างที่เพียงพอกับ backgroundHover สี
• BackgroundPressed – สีพื้นหลังของปุ่มบนส่วนหัวของแอปเมื่อกดปุ่มเหล่านั้น ตรรกะการเริ่มต้นจะเหมือนกับbackgroundHover
• ForegroundPressed – สีข้อความของปุ่มบนส่วนหัวของแอปเมื่อปุ่มถูกกด ตรรกะการเริ่มต้นจะเหมือนกับforegroundHover
• BackgroundSelected – สีพื้นหลังของปุ่มบนส่วนหัวของแอปเมื่อปุ่มถูกเลือก ตรรกะการเริ่มต้นจะเหมือนกับbackgroundHover
• ForegroundSelected – สีข้อความของปุ่มบนส่วนหัวของแอปเมื่อปุ่มถูกเลือก ตรรกะการเริ่มต้นจะเหมือนกับbackgroundHover

ตัวอย่าง XML สําหรับธีมที่ทันสมัย

ตัวอย่างเช่น XML นี้ขยายธีมแบบกําหนดเองสีเขียวที่มีส่วนหัวของแอปสีดํา เพื่อให้สามารถใช้งานได้ดีที่สุด เราขอแนะนําให้ระบุค่าสีที่แตกต่างกันสําหรับแต่ละสถานะการโต้ตอบ

<CustomTheme
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
>  
  <AppHeaderColors
    background="#000000" 
    foreground="#FFFFFF" 
    backgroundHover="#313131" 
    foregroundHover="#FFFFFF"
    backgroundPressed="#494949"
    foregroundPressed="#FFFFFF"
    backgroundSelected="#717171" 
    foregroundSelected="#FFFFFF"  
  />
</CustomTheme>

สร้างทรัพยากรบนเว็บ

1. ใช้ข้อความหรือตัวแก้ไข XML บันทึก XML ที่ใช้ในการสร้างทรัพยากรบนเว็บ ตัวอย่าง XML สําหรับธีมที่ทันสมัย

2. ลงชื่อเข้าใช้ Power Apps

3. เลือก โซลูชัน ในบานหน้าต่างนําทางด้านซ้าย จากนั้นสร้างโซลูชันใหม่

4. เลือก สร้าง>เพิ่มเติม>ทรัพยากรบนเว็บ

5. เลือก เลือกไฟล์ เรียกดูและเลือกไฟล์ข้อความ XML ที่คุณสร้างไว้ก่อนหน้านี้

6. ในบานหน้าต่างคุณสมบัติ ทรัพยากรเว็บใหม่ ให้ใส่ค่าต่อไปนี้:

   • ชื่อที่แสดง: ใส่ชื่อที่แสดง เช่น ธีมแบบกําหนดเองสีเขียว
   • ชื่อ ยอมรับชื่อที่สร้างขึ้นโดยอัตโนมัติ หรือป้อนชื่อที่ไม่ซ้ํากันสําหรับทรัพยากรบนเว็บ
   • ชนิด: ข้อมูล (XML)

7. เลือก บันทึก คุณเผยแพร่การกําหนดเองนี้ ด้วยขั้นตอนในส่วนถัดไป

นําธีมแบบกําหนดเองไปใช้กับแอปในสภาพแวดล้อมของคุณ

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

1. ในโซลูชันที่คุณใช้เพื่อสร้างทรัพยากรบนเว็บ เลือกเพิ่มการตั้งค่า>>
2. พิมพ์ธีมแบบกําหนดเองในกล่องค้นหา เลือกข้อกําหนดของธีมแบบกําหนดเอง แล้วเลือก ถัดไป จากนั้นเลือก เพิ่ม
3. ในโซลูชัน เลือก นิยามธีมแบบกําหนดเอง จากนั้นเลือก แก้ไข บนแถบคําสั่ง
4. บนด้านขวา แก้ไขคุณสมบัติข้อกําหนดธีมแบบกําหนดเอง เลือก ค่าสภาพแวดล้อมใหม่ ภายใต้ การตั้งค่าสภาพแวดล้อม และป้อนชื่อที่ไม่ซ้ําของทรัพยากรบนเว็บของคุณที่คุณสร้างไว้ก่อนหน้านี้ (สังเกตคอลัมน์ ชื่อ ในโซลูชันสําหรับชื่อที่ไม่ซ้ํากัน) ลบเครื่องหมายอัญประกาศและตรวจสอบให้แน่ใจว่าได้เพิ่มคํานําหน้าผู้เผยแพร่สําหรับทรัพยากรบนเว็บ ตัวอย่างเช่น ชื่ออาจปรากฏเป็น ธีม contoso_green แบบกําหนดเอง ตามตัวอย่างนี้
5. เลือก บันทึก
6. ขยาย การตั้งค่า ในบานหน้าต่าง วัตถุ ด้านซ้าย เลือก การตั้งค่าข้อกําหนด จากนั้นเลือก เผยแพร่การเลือกกําหนดทั้งหมด บนแถบคําสั่ง (คําสั่งนี้ปรากฏขึ้นเมื่อไม่ได้เลือกคอมโพเนนต์ในโซลูชัน)

รอให้การเผยแพร่การกําหนดเองเสร็จสมบูรณ์ จากนั้น เปิดแอปแบบจําลองข้อมูลในสภาพแวดล้อมเพื่อแสดงธีม

แอปแบบจําลองข้อมูลแบบกําหนดเองโดยใช้ตัวอย่างธีมสีเขียวแบบขยาย

ตรวจสอบสีส่วนหัวของแอปใหม่

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

ปรับเปลี่ยนสีส่วนหัวของแอปเท่านั้น

ผู้สร้างสามารถเลือกกําหนดรูปแบบของส่วนหัวของแอปเองเพื่อให้แตกต่างจากธีมแอปเริ่มต้นเท่านั้น ซึ่งสามารถทําได้โดยทําตามขั้นตอนเหล่านี้:

1. สร้างไฟล์ XML ด้วยการเลือกสีต่าง ๆ ของคุณ โดยมีแอตทริบิวต์อย่างน้อยหนึ่งรายการจาก ส่วนแทนที่สีส่วนหัวของแอป ที่กําหนดไว้ภายใน AppHeaderColors แท็ก
2. สร้างทรัพยากรบนเว็บโดยใช้กระบวนการเดียวกันที่อธิบายไว้สําหรับธีมแบบกําหนดเอง แต่อย่าลืมตั้งชื่อที่แสดงคําอธิบายที่เหมาะสมให้กับทรัพยากร XML เช่น XML ส่วนหัวของแอปสีเขียว
3. ใช้สีส่วนหัวของแอปแบบกําหนดเองกับแอปในสภาพแวดล้อมของคุณโดยการกําหนดทรัพยากรบนเว็บนี้ให้กับสภาพแวดล้อมหรือแอปในการตั้งค่าสีส่วนหัวของแอปการแทนที่ ทําตามขั้นตอนจาก ใช้ธีมแบบกําหนดเองกับสภาพแวดล้อมของคุณ แต่ใช้การตั้งค่า แทนที่สีส่วนหัวของแอป แทน

   หมายเหตุ

   การตั้งค่าสีส่วนหัวของแอปจะถูกละเว้นถ้ามีการกําหนดการตั้งค่าข้อกําหนดของธีมแบบกําหนดเอง

4. ตรวจสอบภาพส่วนหัวของแอปแบบกําหนดเองของคุณ รวมถึงสถานะของปุ่มทั้งหมด เพื่อให้แน่ใจว่าทุกอย่างปรากฏตามที่คุณคาดหวัง และมีอัตราส่วนความคมชัดเพียงพอสําหรับการเข้าถึง ตรวจสอบตัวเลือกสีต่อไปนี้:
   • สีที่ต้องการจะแสดงสําหรับส่วนหัวของแอปที่เหลือ และสําหรับแต่ละสถานะการโต้ตอบของปุ่ม
   • มีอัตราส่วนความคมชัดอย่างน้อย 4.5:1 ระหว่างสีพื้นหน้าและสีพื้นหลังสําหรับสถานะที่เหลือและสถานะการโต้ตอบของแต่ละปุ่ม

ตัวอย่าง XML สําหรับการแทนที่สีส่วนหัวของแอป

ตัวอย่างเช่น XML นี้ระบุสีพื้นหลังสีเขียวสําหรับส่วนหัวของแอปที่มีข้อความสีขาว โดยมีสีพื้นหลังเข้มสําหรับสถานะการโต้ตอบปุ่มต่าง ๆ เพื่อให้สามารถใช้งานได้ดีที่สุด เราขอแนะนําให้ระบุค่าสีที่แตกต่างกันสําหรับแต่ละรัฐ

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

เมื่อคุณเล่นแอป ส่วนหัวของแอปจะมีลักษณะเหมือนกับรูปภาพต่อไปนี้ คุณอาจจําเป็นต้องรีเฟรชแท็บเบราว์เซอร์เพื่อแสดงธีม

ดูเพิ่มเติมที่

ธีมคลาสสิก

รูปลักษณ์ที่รีเฟรชทันสมัย

องค์ประกอบสไตล์ที่มีการกําหนดธีมที่ทันสมัย