1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
---
title: 应用程序图标的实现
slug: Archive/Apps/Icon_implementation_for_apps
translation_of: Archive/Apps/Icon_implementation_for_apps
---
<div class="summary">
<div class="output-mod ordinary-wrap">
<div class="output-bd" dir="ltr" style="padding-bottom: 24px;">
<p class="ordinary-output target-output"><span>在不同的平台上实现应用程序的图标是一种痛苦，这甚至是没有考虑设计的图标和图形。</span><span class="high-light-bg">不同的平台有不同的应用方式和大小，所以你需要有很多要考虑，如果你想让你的应用支持多个平台。</span>本文提供了有用的提示，用来实现应用程序的图标，包括不同的大小和不同的平台（如：浏览器的操作系统），以及实施细节。我们不会提供图标图形设计信息，但我们将为每个平台链接到合适的资源。</p>
</div>
</div>
</div>
<h2 id="Web应用程序的通用图标">Web应用程序的通用图标</h2>
<p>TBD</p>
<h2 id="Firefox_OS">Firefox OS</h2>
<p>谋智的Firefox OS 平台是一个最简单的从图标的支持。这部分从细节上解释了为什么这些大小是需要的，并提供了一个表来表明具体图标大小与相关发布的手机出货量。</p>
<div class="note">
<p><strong>Note</strong>: For more information on the actual design of Firefox OS icons, read the <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/icons/">Firefox OS app icon design guidelines</a>. They can be square or round, as stated in the guidelines.</p>
</div>
<h3 id="Icon_format">Icon format</h3>
<p>Firefox OS icons need to be in PNG format.</p>
<h3 id="Icon_sizes">Icon sizes</h3>
<h4 id="Required_icon_sizes">Required icon sizes</h4>
<dl>
<dt>128 x 128</dt>
<dd>For display on the Firefox Marketplace and device.</dd>
</dl>
<h4 id="Recommended_icon_sizes">Recommended icon sizes</h4>
<dl>
<dt>128 x 128</dt>
<dd>For display on the Firefox Marketplace and pre-Firefox OS 2.0 devices.</dd>
<dt>512 x 512</dt>
<dd>From Firefox 2.0 onwards, larger icons are needed for crisp display on all the different possible combinations of Phone and tablet screen sizes, screen resolutions, and 3 and 4-column layouts. We accept a 512 x 512 icon, which is then scaled for all the different uses across devices. This size is also useful for display on other platforms apps can be installed across, such as Android.</dd>
</dl>
<h4 id="Other_icon_sizes_that_might_be_useful">Other icon sizes that might be useful</h4>
<dl>
<dt>60 x 60</dt>
<dd>For the exact on-device icon size on older Firefox OS versions.</dd>
<dt>16 x 16, 32 x 32, 48 x 48, 64 x 64, 90 x 90, 128 x 128 and 256 x 256</dt>
<dd>These icon sizes are used on various other platforms your app can be installed on, such as Windows, Mac OS X and Android.</dd>
</dl>
<h3 id="Icon_size_explanations">Icon size explanations</h3>
<h4 id="512_icon_for_device_display">512 icon for device display</h4>
<p>For older Firefox OS device (pre-2.0), the recommendation was a 60 x 60 icon, to use on the homescreen of your device. It was simple back then, as the devices generally had a similar screen size and resolution, and the layout didn't vary much. However, more recently, a number of factors have proven this to be less than ideal:</p>
<ul>
<li>Devices are now appearing with a wider range of screen sizes, including not only phones but tablets, and in the near future, TVs.</li>
<li>Higher resolution devices are starting to appear.</li>
<li>Firefox OS 2.0+ have multiple homescreen layout configurations available, including 3 and 4 column layouts.</li>
</ul>
<p>These factors resulted in icons started to look pixelated on some devices. The Firefox OS UX team considered many different options to resolve this, including SVG icons, multiple device icon requirements, and a number of different single icon sizes, but in the end the best solution was a single 512 x 512 icon that can be resized as needed for different uses across devices. This is the best solution:</p>
<ul>
<li>Requiring a different image file for every icon usage instance would be really inconvenient for developers. 512 x 512 is a fairly standard size in other app store submission processes.</li>
<li>SVG, despite its superior file size, took significantly more processing to render than a simple image file, which was too much of a performance hit to bear, especially for lower end devices like the Tarako.</li>
<li>512 x 512 proved to be big enough for all conceivable uses, while still being a reasonable file size.</li>
</ul>
<p>With the 2.0 homescreen design, we wanted to move to larger app icons as one of the tenets of the 2.0 visual refresh is to make things feel more spacious and comfortable to use. As such, we decided to ship a 3 column, large icon version of the homescreen, but still provide users with an option to switch back to the 4 column, small icon layout from Settings.</p>
<p>The icon sizes starting with the 2.0 release across different devices are as follows:</p>
<table class="standard-table">
<caption>Icon sizes across Firefox OS devices from 2.0 onwards</caption>
<thead>
<tr>
<th scope="row">Device name</th>
<th scope="col">Physical screen specifications</th>
<th scope="col">Screen resolution</th>
<th scope="col">Scale factor</th>
<th scope="col">Large (3 column homescreen) icon size</th>
<th scope="col">Small (4 column homescreen) icon size</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Most in-market devices</th>
<td>320x480 HVGA 3.5”</td>
<td>165ppi</td>
<td>1x</td>
<td>84px</td>
<td>64px</td>
</tr>
<tr>
<th scope="row">Helix (Huawei) or ZTE Open C</th>
<td>480x800 WVGA 4.0”</td>
<td>233ppi</td>
<td>1.5x</td>
<td>126px</td>
<td>96px</td>
</tr>
<tr>
<th scope="row">Flame reference device</th>
<td>480x854 FWVGA 4.5”</td>
<td>218ppi</td>
<td>1.5x</td>
<td>126px</td>
<td>96px</td>
</tr>
<tr>
<th scope="row">4.5" @ qHD</th>
<td>540x960 qHD 4.5”</td>
<td>245ppi</td>
<td>2x</td>
<td>142px</td>
<td>108px</td>
</tr>
<tr>
<th scope="row">4.7" @ 720p</th>
<td>720x1280 720p 4.7”</td>
<td>312ppi</td>
<td>2.25x</td>
<td>189px</td>
<td>144px</td>
</tr>
<tr>
<th scope="row">5.0" @ 1080p</th>
<td>1080x1920 1080p 5”</td>
<td>440ppi</td>
<td>3.375x</td>
<td>284px</td>
<td>216px</td>
</tr>
</tbody>
</table>
<p>For the 320 x 480 screen, the base sizes of 84 x 84 for 3 column mode, and 64 x 64 for 4 column mode were chosen to maximize icon size while balancing the icon density and wallpaper visibility needs. Icon sizes for all other screens are calculated by multiplying by the relevant scale factor. For example, on Flame it is 1.5 (scale factor) x 84 = 126 (large icons) and 1.5 (scale factor) x 64 = 96 (small icons).</p>
<h4 id="128_icon_for_marketplace">128 icon for marketplace</h4>
<p>The Firefox Marketplace still requires a 128 x 128 icon, for display on app marketplace listing pages.</p>
<h3 id="Including_the_icon_in_your_app">Including the icon in your app</h3>
<p>You specify the path to the icons in the icon field of the app manifest, and multiple icons can be pointed to like this:</p>
<pre class="brush: json">"icons": {
"512": "/img/icon-512.png",
"128": "/img/icon-128.png"
}</pre>
<p>You can also use a 64 bit encoded Data URI directly in the manifest file to provide the icon and cut down on HTTP requests:</p>
<pre class="brush: json">"icons": {
"512": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC ... "
}</pre>
<p>We have cut the above example down for the sake of brevity.</p>
<h4 id="Adding_more_specific_icon_sizes">Adding more specific icon sizes</h4>
<p>Note that you don't need to just include 512 x 512 and 128 x 128 with your app: you can happily include further specific icon sizes if you want to provide a tailored look for each different required size — you can simply include more icon lines in the manifest icon field shown above.</p>
<h2 id="Icons_in_other_app_ecosystems">Icons in other app ecosystems</h2>
<p>Android, iOS, Windows, Tizen, etc.</p>
<p>It would be good to cover icon requirements for different ecosystems.</p>
<p> </p>
|
