文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Android设计 - 图标设计概述（Iconography）

2014-10-30 张云飞VIR 翻译自：https://developer.android.com/design/style/iconography.html Iconography 图标设计概述...当你为你的app设计图标时，重要的需要留下的是，你的app可能被安装在那些提供一个范围的像素密度的多种设备中，就像 Devices and Displays 中提到的那样。...因为你将为每个图标实现多个尺寸以支持多个不同的密度，下面的设计指南使用 dp 作为图标尺寸的 计量单位 ，它是以中等密度（MDPI）屏幕作为 像素尺寸的基础。 ?...设计提示 这里是一些你会发现的， 在你创建图标或者其他drawable资源对你的app有用的提示。...使用大纸板开始 因为你需要为不同的屏幕密度创建资源，最好在大的多倍于目标图标尺寸的纸板上开始你的图标设计。

1.1K00

UI界面图标终极设计指南

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

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

    UI图标终极设计指南

    它由 UI 图标、象形图和标志表示，并在各个领域中使用，因为它可以在占用小面积的情况下传达意义。 它受到许多设计师的喜爱，因为它比其他元素更容易赋予个性，并允许您尝试视觉原理。...在这篇文章中，我们总结了图标的属性以及UI设计中推荐的图标设计指南。 用法 在 UI 设计中，图标主要用作应用程序图标和系统图标。...它用于应用程序图标来表达您的品牌和系统图标，以便用户快速了解信息并根据信息采取行动。 风格 有线条、填充、彩色和图像方式来表达图标。目的因使用图标的空间而异，主要用于对动作进行反馈或增加注意力。...主要用于移动设备小区域的系统图标有时会以 4px 的倍数使用，以实现多功能性。 明晰 使用用户可以快速理解的最少元素进行设计。尽可能让用户友好，必要时应用简单的比喻。...视觉误差 由于图形设计工具的限制，有时需要进行视觉校正。对于下面的播放按钮，图形工具与图层末端对齐。但实际上，三角形需要调整，因为它们的重心与圆形或正方形不同。

    97010

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

    腾讯ISUX isux.tencent.com 社交用户体验设计 全文4000字，阅读需要15分钟。作者将向你展示微云团队一路以来对文件图标设计的思考和沉淀，并着重介绍了当前这套图标的设计由来。...设计风格受到PC操作系统影响 在早期，微云的文件图标设计源自PC客户端，很大程度上受到桌面操作系统的设计风格影响。这一阶段的图标从结构上可以分成三类： 1....对图标结构的主观分类导致对用户习惯多样性的包容降低，并且由于图标中包含了具体的文件类型后缀，导致设计师要针对每一个独立的文件格式输出数量庞大的设计资源。无形中增加了设计师的工作量。...最后，我们就得到了一套完整的图标方案。 组件化与资源输出 设计师除了要做好设计方案，如何提高后续的工作效率是我们常常忽略的。在日后的界面设计中，一定会用经常到文件图标。...这样能够保证所有界面设计中图标的一致性，在图标有所调整时也能够及时覆盖到所有的设计稿。 最后我们和开发同学沟通一致后，为其提供1x的矢量设计资源（SVG或PDF）。

    3K40

    【Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )

    一、加载 Flutter 内置的图标 Flutter 中的图标组件 Icon , 专门用于显示图标 ; Flutter 中内置了一些默认图标 , 可以在界面进行查询 ; 使用 Icon 组件加载 Flutter...内置图标时 , 所在的 dart 源码文件中 , 需要导入材料设计包 , import 'package:flutter/material.dart'; 使用 Icon 示例 : Center(...// 加载 Flutter 内置图标 child: Icon(Icons.threed_rotation, size: 200,), ), 运行效果 : 三、完整代码示例 import 'package...( child: ListView( children: [ Center( // 加载 Flutter 内置图标...( 超长截图 | 材料设计图标完整展示 ) Flutter 中内置的图标名称与下图中的大致类似 , 不完全一样 , 但基本名称差不多 ;

    4.2K20

    从iOS 11看怎样设计APP图标

    新系统中，地图、App Store、时钟、相机、联系人等等原生应用都换了新的图标。此次图标的变化势必也会激发下一个图标设计的潮流，如何设计图标又将成为一个新的热门话题。...在iOS历来的图标演变过程中，许多看似不明显的变化实际潜移默化中引导着图标设计风格和设计方法的演变。自iOS7开始，苹果图标设计采用扁平化风格并延续至今。...扁平化风格依旧是主流设计，那么如何设计一个好看、优雅的图标呢？ ? 在设计或者绘制图标之前，首先要搞清楚图标到底是什么，为什么要画图标等等。 1.图标是什么？...而设计师在图标设计中要尽量放大图标之间的差异性，减弱图标之间的相似性，突出产品的独特之处。 ?...多掌握如何设计好图标的理论基础和如何使用设计工具，多积累一些图标素材或者掌握一些像Mockplus这样自带图标库的设计工具，对自己的设计水平有更高层次的提升才是最重要的。

    1.8K30

    UI界面图标终极设计指南

    静电说：今天静电看到了一篇非常棒的问题，详细阐释了图标设计过程中方方面面的知识点，今天，咱们就来看看设计师Slava Shestopalov的文章： 1 使用光栅来更好的设计图标 UI界面的图标通常可以近似的看做以下的基本格式之一...请注意，不要过分的依赖于网格来设计图标。它们是用来帮你而不是限制你的。如果一个图标的某些元素伸展出来更好看，那就顺其自然让它们伸出来。...2 注意像素网格的重要性 在非视网膜屏幕上设计图形的时候，要特别遵循使用像素网格，并优先选用2像素的边框作为图标的线条。因为它可以让图标在这些显示屏上更加清晰。...3 保持一定的图标细节 从一套图标中最复杂的那个开始来设计通常是最有效的，因为它会帮助我们定义相同的视觉重量，让所有的图标视觉重量保持一致。...但是在你的最终设计稿里边，正确的，不扭曲的图标设计还是非常重要的。特别要注意，确保相邻的节点和相邻的元素是完全对齐或者没有间隙的。

    95020

    如何为移动应用设计出色的图标

    特别是一些需要基于应用程序进行创业的公司，图标设计直接关系到您在应用程序市场中的知名度。 本文将重点介绍Android和iOS应用程序的设计。我将总结设计中一些最重要的方面，例如外形尺寸和颜色选择。...颜色问题 为图标选一个合适的颜色是设计师面临的一大困难之一。尝试A / B测试来检查设计效果始终是一个不错的选择。这不仅适用于配色方案，而且适用于整个UI设计。...如何选择让用户过目不忘的颜色 这不仅是设计师设计图标时的选择，还是品牌和营销决策。通常，您选择公司的公司颜色作为图标中的主要颜色，并且该颜色需要与您的总体营销策略和定位相匹配。...02.使用多变的形状设计图标 在iOS和安卓的设计手册中，它们都为我们制定了图标设计模板。一般情况下，Google希望设计师以原始的方式使用形状和颜色；而苹果更倾向于为应用设计标准化的图标。 ?...总结 设计优秀的图标并不是一件简单的事情。 图标设计的三个核心方面：配色方案，图标形状和形状。

    1.6K20

    Image2icon for Mac(icon图标设计软件)

    image2icon mac是运行在Mac OS平台上的专业图标制作工具，用它可以创建你自己的Mac图标，并自定义文件和文件夹的icon图标。...Image2icon for Mac(icon图标设计软件)轻松创建图标 厌倦了你的标准mac图标？您想个性化您的文件或文件夹吗？Image2icon提供了自定义图标的最快方式，轻松自由。...自定义您的图标释放你的创造力！...背景删除，图标恢复等等Image2icon可以从任何文件或文件夹制作图标，而不仅仅是图像。您可以将图标应用于任何文件，在模板中使用它或在png或jpeg中转换它。...清洗文件以恢复其默认的Mac OS X图标。批量导出一个镜头中的多个图标。调整图片以获得最佳效果。

    1.7K40

    阿里图标库引入图标

    文章引入 比wordpress默认图表库的图标好看多的 默认图标库的图标一般都是灰白色简直难看死了哈哈 今天分享给大家如何插入阿里图标库的彩色图标 阿里图标库有什么好处呢 插入方便 图标样式多 彩色图标应有尽有...反正你用都用不完 重点还永久免费使用 引入方法 第一步：阿里巴巴矢量图标库官网 —> Github或者新浪微博登录 第二步：然后自己通过搜索框找到自己喜爱的图标并添加至购物车 —> 添加至项目 //没有项目的自己新建项目...:(下面src=”这里是上面的JS代码，自行替换”) 使用图标...在已经添加到你项目中查找图标并复制图标代码，然后按照下面的格式替换href="#iconxxx"中的图标代码，将代码插入到你需要显示图标的地方！... 还是按照在导航菜单中添加图标为例： 最后我们看看效果吧

    3.1K30

    ICON设计使用手册：如何设计一个优秀的图标？

    图标设计，即icon设计在界面设计中占有很重要的位置，决定一个界面风格的重要构成元素。一个好的图标，可以让用户“一秒即懂”，如何设计出优秀的图标，这篇文章给你解答。...设计软件都是越用越熟悉，所以一些新手ui设计师不要担心这个不会那个不会，跟着一些案例教学，基础的绘制过程都能了解。而静电的UI设计教室也会为大家带来系统的图标设计方法，欢迎大家了解报名。 ?...优秀的图标即不用阅读标签或文字提示，就可以被认知理解。 02 视觉舒适 可以通过插画、颜色以及图标传达品牌个性。如果做得好，图标肯定可以增强设计的美感。...a.内部一致性 图标设计应该保持视觉统一，你决定用于你的产品的图标，应该保持统一样式。理想情况下，它们看起来应该是一位设计师设计的。...很多设计师看到一个酷炫的图标，学着做但是配色、图层叠加等感官上总会有那么些差别。这就需要从整体上去考虑图片的设计，而不单单是学会一个图标的设计，多去尝试图标套系的设计，你会学到更多。

    2K20

    7个设计师必知的图标设计原理，收藏了！

    创建高质量的图标套组需要合适的方法，训练有素的眼睛，一些迭代和大量实践。下面，我将通过7个原则和大量实际示例来说明。最终目标是让你了解设计出优质图标的关键细节。...-设计师会进行类似的调整以平衡图标。要更正上面的示例，请稍微移动元素： ? 所以，请不要仅仅相信数据，也要相信你的眼睛。...简洁的船形图标（来源：Material） 简洁很适合图标设计，因为我们经常在小画布上工作。为图标使用适当的细节量，不要使用过多的内容。 在用户界面中，简洁风格可以理解并为内容腾出空间。...苹果SF Symbols中的图标 对于大型图标家族来说，保持一致性并不是一件容易的事，尤其是涉及多个设计师时。遵循明确的原则和规则至关重要。...它需要进行进一步的测试和准备，以确保后续设计师易于制作新图标，并在多种设计中使用它们（用于屏幕，印刷等），以及工程师将其编码到产品中。

    1.3K10

    实心图标与空心图标的区别

    最早是 2013 年，设计师 Aubrey Johnson 在 Medium 上吐槽了一段关于 iOS 7 标签栏图标的问题。...我查了一下这位设计师的背景，看到他除了是设计师，同时还是一名开发者，而且有认知心理学的学习经历。所以能承认这个论点是有一定道理的。...于是另一位设计师 Curt Arledge, 在 2014 年，专门为这个「假说」做了一次实验。实验的内容是将一组相同图标，分为实心和空心，给用户做测试。...我有看到一些设计团队跟自媒体设计师拿这个实验结论来断定说，实心图标与空心图标的识别是不存在差异的。这个说法也是不太可取的。...各位设计师应该懂我意思。 当然也有用实心图标来填充列表信息的，这也跟页面风格有关，比如你产品风格全是扁平块状内容的，突然有了一部分空心图标，也会显得很不搭。

    33710

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

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

    65000

    新Sketch设计背后的故事：如何重设计Sketch的工具栏图标？

    这些天，随着新版本MacOS的发布，Sketch开发团队的设计师Janik Baumgartner 分享了对于工具栏图标重新设计的心得。接下来这篇文章，我们可以从中学到一些有用的知识。...在这之前我们也翻译了一篇关于Sketch设计师如何重塑Sketch图标的故事，大家可以看这篇 新Sketch图标背后的故事：如何为Big Sur重塑风格 Sketch作为一款关于设计的应用，小细节是非常重要的一环...团队在设计工具栏图标的时候非常谨慎小心，以确保用户不会对这些最常用的内容感到不适应。 Big Sur中的大更新 新图标的一个微妙但重要的变化是尺寸。...团队创建了一组基于线条的图标，以较低的不透明度填充，这种方式很不错，并且仍然与新的 macOS 设计语言保持一致。...“通过测试不同的不透明度级别，我们找到了满足我们要求的正确平衡点——即在符合黑暗主题的同时，还能让设计保持与众不同。” 设计1.5pt图标 在设计新图标时，线和点的增加成为最大的因素。

    1.5K20

    DeepSeek辅助Power BI 设计：自定义条件格式图标

    举例两个场景，以下表格使用了SVG图标表示指标好坏： 以下卡片图使用SVG图标描述指标含义： 网上有丰富的SVG图标资源，使用时可能面临三个问题： 没有完全符合需求的图标形状 图标配色、大小和Power...BI报表不匹配 版权限制 基于此，我们可以使用AI辅助制作、修改适用于Power BI的SVG图标。...2.指定单个素材 如果公司有自己的SVG图标素材库，或者你在网上收集了很多素材。或者使用了我分享的SVG在线图标库： https://app.powerbi.com/view?...指定素材库 比如你看中了阿里SVG图标素材库（很多为独立设计师作品，请注意版权声明）： https://www.iconfont.cn/ 或者字节的： https://iconpark.oceanengine.com...如果素材需要重复使用，建议将素材上传到知乎知识库，同样可以调用DeepSeek问答，教程：知乎+DeepSeek打造私人Power BI AI助手 单击上传好的SVG图标库： 可以看到左侧是图标预览，右侧是

    33610

    Android设计应用图标不用愁---Asset Studio Integration来帮你

    Android Asset StudioWeb版是一个非常好用的Andrid图标资源设计工具，它是由RomanNurik开发的。现在我们已经在ADT14里支持同样的功能。...正如你所看到的，针对不同分辨率的屏幕它创建了多个图标，这就是刚刚为什么我们指的是一个“图标集合”，而不仅仅是一个“图标”。...”图标是不一样的，从下图可以看出，v5之前的图标发白，v5之后的发灰）。...使用Asset Studio的一个优势就是在你点击完成按钮后，它可以直接在你当前的项目中生成你设计好的图标。...（译者按：最好使用Image和Clipart两个）-)我们还仍需要为AOSP贡献更多的剪贴画，这样大家就可以在向导里选择使用（译者按：目前向导的剪贴画只有一个，可以参见前面的图片），所以如果你是个艺术设计者

    1.2K50
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券