首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

UX笔记#01 |按钮用图标还是文字

Problem: 在设计按钮时,经常会纠结是用文字还是图标,还是文字图标? ? ? 苹果的系统APP也是同一个界面文字图标混用的,那究竟是他们是怎样想的呢?...最后补充一条指南里没有提到的考虑因素,文字虽然能准确表达避免歧义,但在识别效率上不及图标。因为人识别图形比文字要快,因为文字的视觉差异要比图标要小。...紧张用图标,不紧张用文字文字图标。...需要使用图标图标文字,不需要的话可用纯文字。...使用图标文字时,图标文字的大小比例也是可以调整的,可以以图标为主,如Tab bar上面的大图标文字,也可以以文字为主,如系统设置里小图标文字。 OK, Problem solved!

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

iOS开发:图标生成器Prepo 的使用

前言 在移动端开发过程中,设置app的图标尺寸是一个非常常见的操作,而且在设置app图标尺寸的时候是要严格按照移动端的标准来设置,尤其是iOS版本的app图标尺寸要求非常严格,如果设置的图标尺寸不符合标准...,它可以帮助设计师和iOS开发者快速的导出各种尺寸的图标。...2、功能介绍 (1)Prepo可以帮助设计师和iOS开发者快速生成各种尺寸的图标,只需将最大分辨率的图标(最大分辨率的图标尺寸为1024*1024)拖拽进来,其他的具体的icon处理交给Prepo做就好了...4、具体的使用操作 (1)打开浏览器,搜索Prepo for Mac,选择下载Prepo到Mac电脑上; (2)在Mac电脑上面安装完Prepo之后,打开Prepo; (3)打开Prepo图标生成器的主面板...,提示的“Add Icon Artwork”,最大的分辨率尺寸为1024*1024,拉进去之后就生成一套图标了,图标上面还可以选择不同版本等等,点击右边的Export可以生成图标; (5)图标拖入进去之后

1.2K10

toly 命令行工具 | Flutter 图标字体代码生成器

图标字体工具的使用 我们的目的是通过脚本工具,可以非常便利地使用 iconfont 的图标字体。 将下载的字体图标放入指定目录后,命令行输入: toly icon ,即可做到 [1]....自动生成 字体图标的访问代码 [3]. 自动配置 pubspec.yaml 文件的字体图标节点 也就是说,对于开发者而言,只要准备好下载的资源,然后执行命令,就可以调用生成代码的常量,展示对应的图标。...这样将极大地方便开发者对字体图标的使用: 通过修改配置信息,也可以实现:一个项目中使用多个图标字体资源的目的 2. toly icon 配置方式 另外, toly icon 支持在 Flutter 项目中通过...图标字体资源准备 在 iconfont.cn 挑选图标,通过加入购物车,创建项目: 在项目界面中,下载压缩包,将资源放在指定目录即可: 4. toly icon 的代码实现 在前在 FlutterUnit...对于图标字体的代码生成,最早可以追溯到我接触 Flutter 的第七天(2018-12-22): 《Flutter第7天--字体图标+综合小案例+Android代码交互》 这里在 toly 项目中添加了

8210

网站favicon图标如何在线下载?favicon生成器

Favicon图标一般是指在浏览器中跟随网站URL的图形,今天和大家分享关于favicon图标相关知识,如何快速下载想要的网址favicon图标,以及如何自己在线生成一个favicon图标,一篇指南帮你搞定...favicon图标设计。...什么是favicon图标? 图片 Favicon也称为URL图标或网站图标。...图片 工具:https://www.logosc.cn/logo/favicon 一个比较好用的Favicon图标生成器工具,免费在线生成ico图标,可以通过输入字母/汉字生成Favicon图标文件,或上传本地...上传图片之后,可以在线调整图标至合适的大小,确保favicon图标展示得合适美观,点击下载就会得到favicon图标zip打包文件,里面涵盖了各种场景需要的格式尺寸文件,能够兼容绝大多数浏览器和设备。

2.9K20

BottomNavigationView使用,配合ViewPager、修改图标大小、去掉文字

目录 1、布局 2、常用属性 3、设置监听 4、默认选中 5、配合ViewPager 6、添加角标 7、修改图标大小 8、去除波纹效果 9、Github MaterialDesign中的一个底部导航栏...@color/white" app:menu="@menu/navigation"/> 2、常用属性 app:itemBackground 背景颜色 app:itemIconTint 图标颜色...app:itemTextColor 文字颜色 app:menu 导航菜单 app:labelVisibilityMode 文字显示状态,等于labeled的时候,即使item大于3个也显示文字,unlabeled...不显示文字,只有图片 <?...也选中,BottomNavigationView的item选中的时候让ViewPager切换page 6、添加角标 查看:BottomNavigationView添加角标(BadgeView) 7、修改图标大小

1.1K60

Android实现系统的桌面图标文字的双行显示效果

由于Launcher空间有限,特别是横屏的时候,图标预留的空间很小,所以一般不建议多行显示。...设置最大显示行数为2行 2、横屏 在路径:packages\apps\Launcher3\res\values-land\config.xml true 横屏下默认为单行显示 三、使用上述属性 1、上面的图标都是继承于样式...BaseIcon的,请定位到如下 路径:packages\apps\Launcher3\res\values\styles.xml 2、修改内容为: 通过上述修改,可以实现竖屏下图标名称双行显示,横屏下单行显示的效果...总结 以上所述是小编给大家介绍的Android实现系统的桌面图标文字的双行显示效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

99310

阿里图标库引入图标

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

2.7K30

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

实心图标与空心图标的区别 有读者说,面试的时候面试官提到了一个问题,但不知道怎么回答。这个问题是:实心图标和空心图标的区别是什么?...本篇文章的结论: 人的大脑在识别空心图标时,会比实心图标更显吃力; 实心图标的引导性要强于空心图标; 空心图标的装饰性会更强; 实心图标承载的信息相对更重,参考选中状态。 01....实验的内容是将一组相同图标,分为实心和空心,给用户做测试。结论是相同一组图标,用户平均识别实心图标的速度比识别空心图标的速度要快上 0.1 秒,但是其中有个别空心图标的识别速度比实心图标更快一些。...所以第二个结论是,实心图标比空心图标更有引导性。 03. 或许有人会问,那空心图标就没用了么?不是的。其实上面有提到,空心图标相比实心图标更难识别,那么人就需要调动更多神经来对空心图标进行确认。...我只是在这里用这个例子来说明,空心图标的引导性没有实心图标强,所以更多会被用来当做装饰品。而当空心图标与实心图标同时出现,并表达同一类信息时,它们就是一种信息的两种状态,比如选中与未选中。

7710

字体图标

我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了, 这就是字体图标(iconfont)....字体图标优点 可以做出跟图片一样可以做的事情,改变透明度、旋转度,等.. 但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等... 本身体积更小,但携带的信息并没有削减。...字体图标使用流程 总体来说,字体图标按照如下流程: ? 设计字体图标 UI设计人员在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标, 比如下图: ?...推荐网站: http://icomoon.io icomoon字库 IcoMoon成立于2011年,推出的第一个自定义图标字体生成器,它允许用户选择他们所需要的图标,使它们成一字型。...自带了200多个图标

3.7K20

信号图标

类视图**和对象浏览器显示表示代码实体的图标,例如命名空间、类、函数和变量。下表演示并描述了这些图标。...图标 描述 图标 描述 Namespace(命名空间) 方法或函数 类 算子 接口 财产(属性) 结构 字段或变量 联盟 事件 枚举 不断 类型防御 Enum 项目 模块...地图项目 扩展方法 外部声明 委托 错误 例外 模板(泛型) 地图 未知 类型转发     信号图标 以下信号图标适用于之前的所有图标,并指示其可访问性。                           ...如果项目包含在源代码管理数据库中,可能会显示其他信号图标以指示源代码管理状态,例如签入或签出。 图标 描述 公共。可从此组件中的任意位置以及引用它的任何组件访问。 保护。

2.1K31
领券