您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > UI设计 > 『UI入门』如何提高图标辨识度

『UI入门』如何提高图标辨识度

手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

VIP优惠升级 21大分类,畅享45000+设计教程特权!

为自己充值升华学习
今日剩余学习次数:1

按住画面移动小窗

『UI入门』如何提高图标辨识度

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

学习意犹未尽?成为VIP,继续提升

免费学习即将结束

关闭继续学习>

发表评论
收起宽屏
分享给朋友:
手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

添加到专辑收藏已收藏收藏成功,可进入个人中心-课程收藏 查看!
目录信息笔记
图文教程学员评价 (305条评论)视频字幕查看优秀作品>

1.图标一种简洁明了的信息传达方式。

2.图标设计要从生活中寻找参照物,实物照片可以从【海洛创意】、【视觉中国】两个网站上寻找。

3.图标设计也可以参考别人的设计,进行归纳总结,常用的图标网站有【iconfont】。

4.从素材网站上找到基础图形,复制到PS里。

查看更多
课程综合评分:9.9
课程难易程度:太简单(14)简单(64)适中(205)有点难(7)太难了(5)
您需要学习后才可以评价,立即学习
课程综合评分:9.9
课程难易程度:太简单(14)简单(64)适中(205)有点难(7)太难了(5)
您需要学习后才可以评价,立即学习
评论列表
仅显示有内容的评论
仅显示带图评论
排序方式:

Hello 虎课网的同学大家好 我是Ethanks Design ,这节课程呢我们就上期做的整个 ,图标布尔运算基础内容 ,来和大家讲一下 ,我们作一个UI设计师的时候 ,应该如何去做整个图标的辨识度 ,并且根据已经有的整个 ,图标设计风格去做出来图标复用的一些整个产出 ,好的 那在讲到整个图标的时候呢 ,我之前经常给大家讲到过的一个设计观念 ,设计它是来源于生活的 ,那么下面我们就来观察一下 ,现实生活中其实也有很多图标 ,比如说在一些整个生活的场景中啊 ,包括小到一些马路上 ,也都会有很多图标 ,比如说 举个例子 ,大家在整个高速公路上 ,进行开会的时候呢 很多路标 ,它不会采用一个文字的形式 ,它会采用整个图标 ,因为图标在我们整个用户的心理模型的理解过程中呢 ,图标会比文字有一个更高的理解空间 ,包括用户看到整个图标的时候 ,能够更好的在短时间之内理解这样的一个含义 ,就能让用户在整个高速行驶的时候呢 ,不会去分心 ,所以说我们可以看到在现实生活中 ,很多标识啊 很多设计 ,它都是以图形来进行展示的 ,那么我们作为一个设计师在做整个界面的时候呢 ,如果说也想要给用户 ,这种比较低门槛的视觉感受的时候呢 ,你可能也要思考一下 ,如何更多的去做好整个图标 ,如何更加注重的去做好整个图标的辨识度 ,那么图标辨识度呢 ,也是我们今天这节小课的主要内容点了 ,好 那刚刚看了一下我们现实生活中的路标 ,我相信大家会对整个图标有了更深的一个含义了 ,也就是我们想要把一个图标做好的时候呢 ,不单单是我这个图标 ,渐变应该如何调整 ,

我这个图标投影应该如何调整 ,你首先要思考的是 我这个图标 ,辨识度应该如何调整 举个例子 ,你现在在一个商场中是很着急的 ,你要到处去找一个厕所 ,但是现在如果说厕所这样一个图标设计 ,做的辨识度很低 ,那你可能在整个用户体验上是非常糟糕的 ,所以说我们举了两个现实生活中的图文案例 ,相信这样讲完之后呢 ,大家会对整个图标有一个更加落地的理解 ,做好图标 你就要准确把握好它要想要传递出来意思 ,辨识度 它是首当其冲的 ,那比如说举个例子 ,我们现在就要落地到整个 ,UI中的图标 来给大家讲一下 ,我们如何一步一步的搭配一些小工具 ,搭配一些整个网站 ,能够把一个图标更好的做出来呢 ,因为很多同学可能是基础是比较差一些 ,或者说零基础转行的 ,这个时候 让你直接打开PS 进行这些操作的时候呢 ,首先 你很难保证做出来的图标是比较优美的 ,其次 你这个图标 正如我们刚刚所分析的 ,科学度上还是会有这种很大的提升空间 ,那我们来举个例子 ,这样一个图标案例呢 相信大家还是比较好理解的 ,刚刚我没有展示文字的时候呢 ,大家都能够知道 ,这个图标的一个中文含义就是券 ,或者说优惠券 ,那么这个图标 它的整个辨识度 ,就是做的比较不错的时候 ,我们怎么去做好呢 ,如果说你是一个零思路的 ,在拿到这个原型的时候 ,还没有做到整个图标内部图形 ,你应该如何进行调整呢 ,那么这个时候你要想一下 ,做好一个图标设计 ,也是正如我们刚刚开课的时候给大家讲到过的一个小思路 ,设计 它是来源于生活的 ,那么你要在做整个优惠券图标的时候呢 ,你应该去想一下 ,优惠券 这个名词 ,在现实生活中它大概长什么样子 ,他这个物体形态是怎么样的呢 ,

那么我们在做整个图标设计的时候呢 ,也会用到这种小图库的这种方式 ,运用图库才能够准确地做好图标的一个表达含义 ,把一个形状 做出更加科学的提炼出来 ,那么现在就有问题了 ,就是我们知道做一个图标 ,可能要找一下现实生活中所长的它的样子 ,那我们设计师是如何应该是借助哪些工具 ,或借助哪些平台呢 ,那结合我的这些职业经验 ,我平时使用到的图库 比较多的 ,像是整个海洛创意 ,包括视觉中国 ,稍等我会给大家实操优惠券图标的时候呢 ,我会来给大家讲一下 如何在视觉中国中 ,找到这些比较好的现实生活中图标参考案例 ,好的 那我们刚刚就是第一步做图标呢 ,并不是大家打开PS直接进行上手操作的 ,你要做一下整个辨识度 ,我们把这个辨识度名词再来做一个理解一下 ,辨识度就是让用户能够一眼 ,就能够知道这个图标是什么含义 ,所以说顾名思义我们把他称之为是个辨识度 ,那么 你用到了整个视觉中国 ,做好了整个图标辨识度之后呢 ,那你肯定作为一个设计师需要回到整个界面中 ,你要想一下如何通过软件把整个形状提炼出来 ,那么形状怎么提炼呢 ,直接按照我刚刚所找到的一些图片进行提炼吗 ,这个提炼出来的时候 ,还是有很大一些整个优化空间的 ,而且对于一些基础比较差的同学来说呢 ,如果说你没有个比较好的参考的时候 ,是很容易走得非常歪的 ,那一般性搭配我多年那个职业经历呢 ,第一步我会搭配个现实图库 ,就找现实生活中的整个图标参考 ,就像刚刚我们所讲到的视觉中国 ,那第二步呢 我会去上阿里巴巴这个iconfont这个网站上 ,去找一下这样一个图标设计它在整个图形上应该怎么做 ,我这边来给大家举个例子 ,比如说我们刚刚在整个视觉中国中 ,找到了图标 找到了现实生活中 ,

这个图标案例 基本上都是长这样子的 ,视觉上是比较靠近的 ,然后呢我就是找这种图标案例 ,就是比如说两边有个缺口 ,中间有一个人民币羊角符号的 ,去找靠近类似的这种图形设计 ,有没有更优的一个表现方案 ,那么有一种更优的表现方案的时候呢 ,比如说你觉得描边更加好一些 ,还是面性更加好一些 ,这些不必要的试错呢 ,你可能就直接在iconfont上就能够把它完成了 ,不需要自己进行很多这种调整 ,比如说有些东西调整的时候 ,这个缺口调整了半天 ,这个圆角也调整半天 ,这些小的细节调整你可以交给这种iconfont ,来帮你完成一下 ,好的 那做设计呢 你学习一些ppt ,是没有办法进行实操的 ,包括大家在课后呢 ,也一定要根据我们今天所讲的整个设计路线 ,更好的把图标设计自己来去实操一下 ,只有自己通过实操的时候呢 ,才能更好的把整个设计输出做得越来越好 ,好的 那下面我们就进入到网页中 ,可以看到我们如何进行两个图库的方式 ,把一个图标能够更加快速的做出来 ,我们回想一下有哪两个图库呢 ,第一个就是找现实生活中参考的图库 ,也就是百度 视觉中国 ,在第一个就能够找到你所想要的一个进入这个网站了 ,那第二步呢就是去阿里巴巴的这个iconfont的网站中 ,去进行寻找 ,如果说这两个图库 大家之前都没有进行了解过呢 ,稍等课后 我也会把这两个课程的一个网址 ,发表在我们整个课程的评价页中 ,大家可以看一下我发表的一些整个文字 ,那我们先来讲一下视觉中国这个图库 ,也是非常简单 在这边直接输入一个优惠券就行了 ,比如说你现在要做一个优惠券的图标 ,这有个发现的图标 那么字段是什么 ,在这边直接输入进来 ,那你这边要想一下 ,哪些优惠券是长什么样子呢 ,比如说是长这个卡的一个样子 ,

比如说也是长这种卡包括这种券的样式 ,另外可以看到 优惠券优惠券嘛 ,大家可以想一下 你在现实生活中一些电影票啊 ,或者说一些电影券 ,它都会有这种正券跟副券之分的 ,什么叫正券和副券呢 ,也就是这个副券你可以把它撕下来 给别人的 ,包括你看这边也是撕下来这种效果 ,有这种小的这种撕折感 ,另外呢 券在整个现实生活中 ,它都会有这种小的这种圆角类型的挖空 ,所以说我们要把这些比较重点的 关键的 ,图形细节把它记录下来 ,ok我们现在大概有个心理认知 ,优惠券在我们整个现实生活中 ,它有的这种关键图形元素就是这种 ,正券跟副券中间有个小撕裂的效果 ,包括在券的两边 ,它会有这种小挖空的效果 ,OK 那有了这种认知之后呢 ,下一步进入到我们整个 ,iconfont 网站 同样的在这边呢输入整个优惠券 ,那找一下我们刚刚在整个视觉中国图库中呢 ,提炼出来两个设计要素 ,也就是缺口 ,也就是这整边有个缺口的设计 ,包括中间会有这种撕裂的这种感觉 ,那你在做整个图形的时候找一下 ,这边两个缺口 ,以及中间撕裂的感觉应该怎么做 ,会做的更加好一些 ,OK 我们最后感觉这样的一个图标设计会比较好 ,所以说我们在整个图形设计中 ,可以把这个图标把它复制下来一下 ,好 那我们下面呢就是把它复制下来一下 ,就简单的去把它复制下来 ,下面一步呢 我们肯定要进入PS的一些界面了 ,如何更加快速的去做出整个优惠券 ,而且从零到一的做出优惠券 想一下 ,我现在可以看在这个底板中是什么形状都没有 ,只有一个整个形状的大底板 ,那现在呢 我们就要把整个 ,我们刚截取的图片去拿过来 ,好的 拿过来之后呢 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与

同学,小虎知道你非常努力的想学习!

老师录制课程真的也很辛苦

赞助一下吧

确定学习吗?

您每天可免费学习一个教程。

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

您已经免费学习 1 个教程 !

我们录制教程很努力的,赞助下吧 !

升级VIP吧!

您已经学习 5 个教程啦!

我们录制教程很努力的,赞助升级下吧 !

您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个素材文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计观看5个图文教程


您在当前分类下不是VIP,赞助VIP享受无限观看


学习后才能评价哦!

学习后才能提问哦!

获得30虎课币

评论提交成功,将在审核通过后显示

×

下载素材/源文件:

收藏成功
取消成功
特惠
充值
客户端
虎课桌面客户端
置顶播放器,边看边学习
虎课移动APP
支持离线缓存,随时随地学习
我的排行
建议意见
官方客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:021-80344319工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课积分
登录注册
使用手机号码登录
使用手机号码登录
手机号码格式错误
换一个
图形验证码错误,请重新输入
验证码错误,请重新输入
登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
上上签 · 今日宜学习
恭喜!签到成功,获得 10 个虎课币
.
书山有路勤为径,学海无涯苦作舟
— 唐代文学家 韩愈
虎课网 · 每天进步一点点
分享到
全站45000+课程免费学!昨日已有30828位学员免费领取~点我领取