展开

关键词

从iOS 11看怎样设计APP图标

新系统中,地图、App Store、时钟、相机、联系人等等原生应用都换了新的图标。此次图标的变化势必也会激发下一个图标设计的潮流,如何设计图标又将成为一个新的热门话题。 在iOS历来的图标演变过程中,许多看似不明显的变化实际潜移默化中引导着图标设计风格和设计方法的演变。自iOS7开始,苹果图标设计采用扁平化风格并延续至今。 扁平化风格依旧是主流设计,那么如何设计一个好看、优雅的图标呢? ? 在设计或者绘制图标之前,首先要搞清楚图标到底是什么,为什么要画图标等等。 1.图标是什么? 图标是具有指代意义或者象征某种特殊含义的图形,在不同场景下图标的表达含义也会有不同。当今的图标风格大致可分为拟物化和扁平化,从iOS 7开始,一系列炫目的界面和简化的app图标设计出现。 差异性 在App Store中搜索一款应用,展示出的应用图标大都大同小异,用户在众多孪生图标兄弟姐妹中也难以取舍。

76330

【APICloud系列|4】APP设计统一图标大小的方法

当我们想要在整理设计稿中出现的图标,整理除了汇总之外,还需要重新调整一下图标的大小,使他们看起来“差不多大”。想要弄成一致性和统一性,非常的麻烦和耗时。 举例:图标大小为48px*48px 。如果你还需要其他尺寸的图标可以做完之后等比放缩即可。那你设计图标最好是矢量的或者是形状图标。 谷歌官方规定Material Design 图标的形状类型分为三种:圆形、方形和矩形。 1.判定图标应该套用那种尺寸? 将图标与上图的模板居中对齐,然后中心不动,放大图标使之图标依次碰到三种形状的边界,填充最满的那个形状的尺寸就是该图标需要规定的尺寸。 3.对齐 如果有仔细看,我这个方法指定的图标大小为48px*48px,但是里面有内容的部分,比如说圆形,就只会占据44px*44px,这时候我们当然会希望把图形放置在图标的中央。

11200
  • 广告
    关闭

    什么是世界上最好的编程语言?丨云托管征文活动

    代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    App之应用图标标记

    在UI设计里,是应用的徽章,长得就没这么具象了,抽象为圆形。 它,有这么些称呼: 应用图标标记; App包含标记图像; Badge App Icon; 小红点; 红点。 iOS最开始设计并没有通知中心(iOS5.0之后才有通知中心),仅靠桌面图标上的Badge表示App是否有新消息; 而Android设计之初就有通知中心,可在通知中心内聚合查看所有App的通知,所以没有官方没有使用 在app内反而应少量使用,作为点缀,甚至不使用为佳。 ? 2、Badge的设计形式 有2类, 一类是仅是一个红点, 另一类是结合数字,或其他文字。 比如ColorBadges: 让提醒角标随 App 图标变化 ? ColorBadges是一款Cydia插件,这款插件的作用就是让应用程序的角标颜色和应用程序图标颜色相一致 形式的创新,也许可以从具象的徽章里找到一些设计元素, 可以参考下身着祥云图案、脚踏虎头鞋的卖萌米奇

    1.6K70

    Android 动态改变app图标

    动态改变app图标 代码实现如下: <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android: " android:label="@string/<em>app</em>_name" 这两个属性是用来设置图标和标签 android:name=".newsLuncherActivity" 别名的name设置成一个activity 添加<activity-alias>标签后,具体启动方式,我们可以在服务器端设置一个开关,当请求到要更改桌面图标时,我们就可以通过 PackageManager 对象提供的 setComponentEnabledSetting ()方法关闭当前 Component 组件,并启动别名对应的 Component 组件,为了使得图标能够快速更换,我们可以加上重启Luncher应用代码,name是自己定义个类名,记住一定要传全路径,如 res.activityInfo.packageName); } } } 别名<activity-alias>可以定义多个,对于不同时候就可以动态去更换不同的图标

    18610

    如何动态更换App图标

    在Android开发中,通常会有这样的需求,逢年过节UI的小伙伴们都会做出节日或活动相关的APP图标让我们更换,可是每次更换都要发版实现。那么,如何在不发版的情况下动态地更换我们的图标呢? 使用标签为我们的启动Activity准备多个别名,拥有标签的activity指向启动Activity,每个拥有标签的Activity都可以单独设置一个icon,在程序中我们动态设置和的enabled属性来实现替换图标效果 android:enabled属性要设为false,否则桌面会存在多个APP图标。 android:icon属性设置为不同的图标。 这两种参数对应两种效果:当设为1时,当切换APP图标时,会有几秒钟的延迟,并且在延迟期间不能点击图标进入APP;当设为0时,当切换APP图标时,会立刻更换,但是应用会被强制退出并被清理掉。 需要将的enabled属性设为enabled或者将APP卸载后才能编译运行。 2、在应用管理和应用详情页里App图标一直是原来的,不会动态修改。

    2.1K20

    Android设计 - 图标设计概述(Iconography)

    当你为你的app设计图标时,重要的需要留下的是,你的app可能被安装在那些提供一个范围的像素密度的多种设备中,就像 Devices and Displays 中提到的那样。 因为你将为每个图标实现多个尺寸以支持多个不同的密度,下面的设计指南使用 dp 作为图标尺寸的 计量单位 ,它是以中等密度(MDPI)屏幕作为 像素尺寸的基础。 ? 启动图标 启动图标是在主屏幕或者所有的app屏幕时,你的app的可视化的代表。由于用户可以更换主屏幕的墙纸,要确保你的启动图标在不同类型的背景下清晰可见。 ? ? ? 设计提示 这里是一些你会发现的, 在你创建图标或者其他drawable资源对你的app有用的提示。 使用大纸板开始 因为你需要为不同的屏幕密度创建资源,最好在大的多倍于目标图标尺寸的纸板上开始你的图标设计

    20900

    UI设计师必须知道的 iOS和Android的APP图标设计指南

    尽管图标非常小,但图标会在App Store和Google Play中显示,向用户传达app的信息,并且安装后能在主屏幕上找到它,因此图标非常重要。 为什么每个app都需要一个图标app图标是为每个移动应用程序添加的唯一图像。这是新用户在App Store和Google Play上找到应用时看到的内容。 iOS和Android设置中的应用程序图标 用户不需要试图理解设计师的想法。设计师确保在多种尺寸的实际设备上试用图标,并在必要时最终确定。由于像素数量的减少而导致细节的损失是不可避免的。 例如每个交互模板不仅会导出各种大小的图标,还会显示它在主屏幕和App Store中的外观。它没有看起来那么难。接下来是Android应用程序图标! Android应用程序 图标在材料设计规范中,Google将有关Android应用程序图标的信息分为两部分:关于样式和技术要求。

    71120

    iOS10.3后允许App运行中变更App图标

    不知道大家注意到没有,iPhone自带的日历和始终App图标是实时显示当日日期和当时的时间的,时间的秒钟还会走动,这其实就做到了在安装完App后,还能自由地变更App图标,而现在,我们普通的开发者也可以实现了 效果如下: 可以看到在点击按钮操作后将App图标更换掉了。 这个效果可以用在很多地方,做出更加需要时效性的App,比如日历、时间、天气、票据、活动等等。 图标发生错误了 : %@",error); } }]; } 这样我们就实现了最简单的在App运行的时候更换App图标的方法,但是,当点击按钮变更图标的时候,系统会弹出一个提示框: App,或者是特殊时期在图标上加上活动标识,双十一啊之类的。 但是想想iPhone自带的时钟App,可以做到秒钟都随着时间变化,这又是如何做到的呢?

    6520

    Xcode 配置多套 App 图标的方法 --- AppStore 图标 AB Test 实践

    请记住,要测试 app 图标的变体,您需要将图标集包含在当前上线的 app 版本的二进制文件中,因此请确保相应地准备应用版本。 1.1 Xcode 集成多套测试 App 图标 怎么包含不同的图标集到 app 中呢? 现在可以使用其资产目录中的 iOS app 图标资产作为备用 app 图标。 新的构建设置“包括所有 app 图标资产”控制 Xcode 是否包含构建产品中的所有 app 图标集。 当该设置被禁用时,Xcode 包括主 app 图标,以及在新设置“备用 app 图标集”中指定的图标。资产目录编译器将适当的内容插入到构建产品的 Info.plist 中。

    94841

    React Native 修改APP图标和名称

    1.修改APP名称 路径:android/app/src/main/AndroidManifest.xml, 找到 android:label=”@string/app_name”。 点击Ctrl+鼠标左键转到string.xml 修改名称: <resources> <string name="<em>app</em>_name">你的APP名称</string> </resources> 2.修改应用图标 路径android/app/src/main/AndroidManifest.xml,找到 如果是:是mipmap,则android:icon=”@mipmap/ic_launcher 图标大小分别为:48x48,72x72,96x96,144x144 然后重新生成APK即可

    86850

    UI界面图标终极设计指南

    1 使用光栅来更好的设计图标 UI界面的图标通常可以近似的看做以下的基本格式之一:横向矩形,纵向矩形,对角矩形,圆形,三角形,正方形。 请注意,不要过分的依赖于网格来设计图标。它们是用来帮你而不是限制你的。如果一个图标的某些元素伸展出来更好看,那就顺其自然让它们伸出来。 3 保持一定的图标细节 从一套图标中最复杂的那个开始来设计通常是最有效的,因为它会帮助我们定义相同的视觉重量,让所有的图标视觉重量保持一致。 ? 但是在你的最终设计稿里边,正确的,不扭曲的图标设计还是非常重要的。特别要注意,确保相邻的节点和相邻的元素是完全对齐或者没有间隙的。 ? 静电杂谈:如何做一个“有特色”的UI设计师 交互工具哪个好用?来看看静电的具体分析~ 2019即将过半,UI设计师在激烈的从业环境如何提升 平面设计师如何快速转行UI设计行业?

    39850

    SAP Fiori图标(icon)设计原理

    When you are creating a new button and assign an icon to it, there is no way for...

    23520

    如何为App图标挑选合适的颜色

    大尺寸的图标意味着该图标内用的最多的就是那个颜色。 最受欢迎的200个免费iOS App 如果把最受欢迎的200个免费app摆在色盘上就会看到如下场景: ? 最受欢迎的200个免费iOS App图标颜色 我发现一大堆的蓝色和红色app图标,还有零零散散的绿色。粉色和紫色寥寥无几,只有Snapchat是黄色。 最受欢迎的200个付费iOS App图标 虽然和免费版本的app一样也体现出类似的在蓝、红、绿上的集中,付费的app似乎在单个图标上使用了更多的颜色,这导致了更多的小icon(分身)出现在上面的色盘中。 最受欢迎的200个iOS游戏 很多游戏都倾向于更复杂的图标设计,这也导致他们会使用更多的颜色。 如果你在设计一款app那早晚也要面对选择颜色的问题,当然了这主要取决于它的功能定位以及你的目标用户群。

    94190

    【iOS 开发】iOS 10.3 如何更换 app 图标

    iOS 10.3 开放了更换 app 图标的 API,核心方法是下面这个: func setAlternateIconName(_ alternateIconName: String? blackBgColor 是我的用于替换原生图标的图片资源。 文件名需要和 info.plist 中保持一致(注意 info.plist 中用到了两次 "blackBgColor"),同时这也是你在代码中设置图标时,需要给 API 传入的参数。 if UIApplication.shared.supportsAlternateIcons { print("you can change this app's icon") }else { print("you cannot change this app's icon") return

    38220

    Android 修改app图标和名称的方法

    1 修改程序的图标 修改drawable文件夹的i→→c_launcher.png图标,把新的图标改名覆盖就可以了。 <resources <string name="<em>app</em>_name" AndroidIntro</string <string name="hello_world" Hello world! </string <string name="menu_settings" More</string </resources 修改<string name=”app_name” 你的程序名称</ string 节点 动态修改app图标 以上这篇Android 修改app图标和名称的方法就是小编分享给大家的全部内容了,希望能给大家一个参考。

    1.6K30

    Flutter 笔记 | 修改 App 图标、名称、启动页

    Android 修改应用图标 通过 Android Studio 打开 Flutter 中 android Module,右键选择 “New ===> Image Asset”: ? 调整 AndroidManifest 文件: <application android:name="io.flutter.<em>app</em>.FlutterApplication" -- 添加对于圆形 Icon 支持 --> 2. iOS 修改应用图标 找了个图标生成网站: icon.wuruihong.com/ 上传对应的 Icon 选择生成的一些基本参数,这里感觉默认就够用了: 接下来用 Xcode 打开对应的 ios module,替换对应资源: 下载已生成的图标,选取 iOS 图标资源复制到以下地址中: ios ===> Runner ===> Assets.xcassets 修改 Android 应用名称 按照如下地址,打开 AndroidManifest 并修改 application 节点下的 android:label 内容即可: android ===> app =

    60441

    uni-app使用iconfont自定义图标

    记录下如何在uni-app中使用自定义图标 # 图标库准备 1.注册阿里巴巴图标矢量库账号 2.选择顶部菜单图标管理-我的项目后新建项目 3.在新建的项目中添加自己喜欢的图标 4.点击查看在线链接 ,获取在线图标链接代码 ? # uni-app组件修改 基于官方的m-icon组件进行修改 m-icon.css中font-face的src修改为自己图标库在线链接里truetype格式的链接 @font-face { font-family */ type: String, /** * 图标颜色 */ color: String, /** * 图标大小 /m-icon.css"; </style> # 页面引用组件 在页面中引入修改后的图标组件 <m-icon type="<em>图标</em>名称" color="#757575" size="10"></m-icon

    3.1K20

    腾讯微云文件图标设计探索

    作者将向你展示微云团队一路以来对文件图标设计的思考和沉淀,并着重介绍了当前这套图标设计由来。 ? 在早期,微云的文件图标设计源自PC客户端,很大程度上受到桌面操作系统的设计风格影响。这一阶段的图标从结构上可以分成三类: 1. 对图标结构的主观分类导致对用户习惯多样性的包容降低,并且由于图标中包含了具体的文件类型后缀,导致设计师要针对每一个独立的文件格式输出数量庞大的设计资源。无形中增加了设计师的工作量。 这样能够保证所有界面设计图标的一致性,在图标有所调整时也能够及时覆盖到所有的设计稿。 ? 最后我们和开发同学沟通一致后,为其提供1x的矢量设计资源(SVG或PDF)。 下面是微云 APP的二维码链接,欢迎大家下载体验! ?

    56540

    react-native修改APP的名字与图标

    名称</string> </resources> 修改APP图标-Android 1、找到读取APP图标的地方 进入目录::android/app/src/main/AndroidManifest.xml 找到: android:icon=”@mipmap/ic_launcher” 这里的ic_launcher就是我的图标。 2、修改图标 进入目录:android/app/src/main/res/mipmap–xxx, (PS:这里需要注意,可能是mipmap,也可能是drawable),我这里是mipmap。 这里面的图标大小都不一样,但是名字是一样的。 图标分为 48x48,72x72,96x96,144x144.适配安卓不同机型 修改App的名字与图标-IOS IOS的修改与配置到需要使用到XCode,当然也可以不用。

    2K30

    相关产品

    • 设计协作平台

      设计协作平台

      腾讯自研的产品设计研发一站式协作平台,支持在线导入预览Sketch设计稿、自动生成设计标注切图,灵活调用图标库、素材库,支持多种插件上传,让产品设计更轻松高效。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券