图标和图片设计

作者: 糊君 | 来源:发表于2015-03-19 10:40 被阅读457次

图标和图片尺寸

每个应用需要一个漂亮、难忘的主屏幕图标,帮助用户将你的应用与其他应用区别开来。因为主屏幕上的应用只能通过图标来辨认,你的图标应该在具有辨识度且和iOS应用的图标相似的同时,给用户传达你应用的目的。

图标尺寸

主屏幕图标是圆形的,表20-1列出了适当的直径(以像素为单位)和每个图标的用法。以@2x创建这些图片资源(需要指出的是Xcode列出的图标以镑为单位)。

表20-1Apple Watch应用的图标尺寸


除了WatchKit应用使用的图标,Apple Watch应用在iPhone上运行时,需要图标来呈现你的由。表20-2列出了这些图标资源的尺寸(以像素为单位)。以标示的分辨率创建这些图片资源(需要指出的是Xcode列出的图标以镑为单位)。

使用给出的大小,创建全出血的正方形图片作为你的图标。系统自动对图标使用圆形遮罩。

所有图标和图标使用PNG格式的图片。避免使用交错的PNG图片。你可以使用有索引颜色的PNG图片来节省图片文件的空间。

图标和图片使用标准位深度。图标和图片的标准位深度是24位——就是说,红、绿、兰各8位。图标一定不要包括阿尔法通道。

主屏幕图标

Apple Watch的主屏幕既独特又熟悉。主屏幕图标重复iOS的图标,但是去掉了文字。这么小的尺寸,这些图标必须清楚的呈现应用。当WatchKit应用与对应的iOS应用很相似时,图标可以保持几乎一致。但是当WatchKit应用是作为iOS应用的补充或控制器的话,图标应根据需要调整。

最好寻求专业图形设计师的帮助。一位经验丰富的图形设计师可以帮你设计应用的总体视觉风格,并将之应用到所有图标和图片中。

使用统一的、用户容易辨认的形象。总之,避免将精力放在次要的或元素不重要的方面。例如,邮件图标使用信封作为图标,而不是乡村邮箱,邮差的包,或邮局符号。

拥抱简洁。特别是,避免在你的图标中塞满不同的图片。寻找一个代表你应用本质的元素,用简单、独特的形状表达出来。谨慎地增加细节。如果图标内容或形状过于复杂,细节会变得迷惑,那么在小尺寸时,看起来会模糊。

根据你应用的主要概念创造一个抽象的解释。典型地,用艺术的方式来解释现实会比较好,因为这样的话,你就强调了希望用户注意的主题。

让你Apple Watch的图标类似于你iOS应用的图标。保持相似的外观有助于用户将WatchKit应用与对应iOS应用联系起来。

为每种Apple Watch创建不同尺寸的主屏幕图标。确保你的图标在每种设备上都有极佳的效果。关于指定设备尺寸,查看表20-1。

菜单图片

force touch菜单中的图标是模板图片,由它们的阿尔法通道决定了最后的形状。图片中的颜色信息被忽略了。

图片的画布尺寸比内容大,如下表21-1所示。你内容周围多余的空间,确保了菜单图标的边缘与你的内容有足够的边界。

表21-1 菜单图片的画布和内容尺寸

使用适合设备尺寸和字形复杂度的线宽。为了防止字形模糊,字形线宽最少为4像素。参考图21-1。

图21-1 菜单图片的字形尺寸

菜单图片使用PNG格式。避免使用交错的PNG图片。

相关文章

  • 图标和图片设计

    图标和图片尺寸 每个应用需要一个漂亮、难忘的主屏幕图标,帮助用户将你的应用与其他应用区别开来。因为主屏幕上的应用只...

  • 图标和图像设计

    5 图标和图像设计 5.1 图标和图像尺寸 任何app都需要app图标和启动文件或者图片。除此之外,一些app需要...

  • UI文字、图片和图标设计

    在每个项目设计中只使用1-2个字体样式,而在品牌自己有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来...

  • 2.9

    1 制作图标 先下载png图片timg.png 然后通过在线转换设计为图标QQ图片20181129094618.j...

  • 2.9 系统程序的部署

    1设计并使用任务图标 阿里矢量图标库,下载图片并把图片格式转.ico 2设计关于菜单 3显示关于菜单 4程序打包 ...

  • 【PPT】手把手教你做PPT

    5个方面入手: 1、逻辑思路 2、颜色:配色和字体 3、图片:图形化表达 4、图标:图标细节处理 5、页面设计 一...

  • IOS基础-设计UI@1X@2X@3X是什么

    官方资料 苹果官网的设计规范图片和图标尺寸相关 Supply high-resolution images for...

  • 移动端UI 设计规范整理汇总

    目录 界面设计尺寸及栏高度 边距和间距 内容布局 界面图片设计比例 建立统一风格的图标 APP版式设计规范 界面文...

  • 【前端】-002-页面制作-切图

    设计稿中图片分类 修饰性素材 用在CSS background属性中 例如,图标、logo、按钮、文字和非纯色背景...

  • 2018-11-29

    2.9系统程序的部署 任务一:设计并使用应用程序图标 图片转ico图片转ico.gif-为应用程序设置图标应用程序...

网友评论

    本文标题:图标和图片设计

    本文链接:https://www.haomeiwen.com/subject/ryxwxttx.html