Marvin's Blog【程式人生】

Ability will never catch up with the demand for it

21 Mar 2020

UWP设计文档阅读笔记(二):应用图标和标识

Design and UI > Style > App icons and logos

Small tile 71x71 Medium tile 150 x 150 Wide tile 310 x 150 Large tile 310x310

App icon 44x44 Splash screen Badge logo? Package logo/Store logo

为了支持不同的缩放级别(100%~400%),需要准备不同尺寸的图标。由于图标是位图,推荐准备以下缩放尺寸的图标:100%, 125%, 150%, 200% 400%。

应用商店默认使用App打包里面的图标,如果这不是想要的,你可以自己上传图片。参考 Display only uploaded logo images in the Store

Visual Studio自带的Manifest Designer可以方便地为你生成各式尺寸的图标。

下面目标尺寸的图标是推荐要生成的:

  • 16x16
  • 24x24
  • 32x32
  • 48x48
  • 256x256

你可以提供一个Unplated图标,背景是透明的,这样图标显示的时候可以适配场景中自带的背景。以下场景可以使用unplated图标:

  • 任务栏
  • 任务栏弹出列表
  • 任务视图
  • 任务切换ALT+TAB

关于启动大图的设置,可以参考:UWP splash screens article

关于徽章图标,关于:Badge notifications for UWP apps article

默认情况下,Visual Studio生成图标时会加入边距。如果你图标设计时已经自带边距了,可以把让Visual Studio加边距的选项去掉。

图标会被放置在贴片上。对于small tiles,在宽和高方面,图标会被限制在贴片的66%大小。对于medium titles,wide tiles,large tiles,宽限制在66%,高限制在50%。对于66%宽的情况下,两边的边距大概是16%。

如果是要根据主题、语言等条件来区分图标,可以参考:Tailor your resources for language, scale, high contrast, and other qualifiers

(本篇完)

Categories

Tags

comments powered by Disqus