恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
APP常用导航图标按钮 设计技巧
0.0°
2017-04-26 原创文章 教程 举报 133096 1268 1709 112

APP主页上常用的导航图标设计技巧,不跟上就OUT啦~


一些新的教程已发,欢迎看官们赏脸啦:http://i.ui.cn/ucenter/118849.html


上个教程的尾部留了本次的预告,现在履行承诺发教程啦。大家每天画那么多精美的图标,但真的用在APP界面上了吗? 这次分享几个真能用的上的图标设计技巧给大家,也许下次的APP案例就能用的上哦(*^__^*)~

Image title

Image title

Image title

看完后有没有发现这些简单的图标,其实都隐藏着以下特别的技巧呢:比如第一张图中的内缺角阴影图标按钮,比如第二张图中介于圆和圆角矩形中间的椭圆矩形图标按钮,又比如第三张图中的通透命令的扁平水晶图标按钮,这些就是本次教程要分享的内容了


下面开始教程,这里先教大家三步完成“内缺角阴影图标按钮”的设计技巧,学会此技巧,从此变身一线大神~ 

Image title


第一步、这里拿上面的叉子图标做示范,先画个120*120的圆,添加样式渐变叠加,色值分别是上#ffc62d和下#ffb034,得到按钮的底座

Image title


第二步、画出按钮中的刀叉,用钢笔画或者用矩形相交对切,能画出来就行(当然我知道你是不会画的 o(∩_∩)o 哈哈,打开这个网站搜索“刀叉”然后下载图标吧:http://www.iconfont.cn,我珍藏多年的网站给掏出来了,下载后建议用钢笔路径照着描出来,养成制作矢量图标的好习惯,久而久之你就会发现自己也会画图标了~)

Image title


第三步、用钢笔路径按我这样随意画个大概的形状出来,然后设置形状填充为渐变,一边透明度0%,一边透明度10%,色值都为纯黑#000000,然后缩小到合适大小后创建剪贴蒙版到刀叉图标上,哒啦~一个最最简单的内缺角阴影图标就做出来啦!!

Image title


这种图标的好处是原版平凡普通的图标按钮,加一点小改变就能立即变的与众不同,让APP页面加分不少。依此类推,我们可以发挥创意按照图标来画出各种不规则形状来剪贴上去,还可以给形状添加色彩等变化,发挥你创造力给自己的APP页面设计加分吧~~  (最后说一句,内缺角阴影是我起的名字,是今年才开始流行的一个风格哦~)

Image title


-------------------------------我是华丽的分割线--------------------------------


APP常用导航按钮之:“椭圆矩形图标”,下面开始教大家怎么做下图这种介于圆和圆角矩形中间的“椭圆矩”形图标按钮,其实很简单,只需要两步

Image title


第一步、找到形状工具中的多边形工具,然后按我下图所示设置参数:边4,并勾选平滑拐角,然后按住按住shift键画出一个120px*120px的圆,看到没有?这个圆跟我们平常看到的正圆和矩形椭圆都不一样吧o(∩_∩)o 

Image title


第二布、放入我们上面提到的刀叉,在边上再放个正常的圆,对比下哪个更好玩呢?   这就是传说中的椭圆矩形,其实还有其他方法能够画出,但经本人实验还是上述方法做出来的椭圆矩形更好看也最方便~

Image title


-------------------------------我是华丽的分割线--------------------------------


APP常用导航按钮之:“扁平水晶图标按钮”,很简单呐,也是二步完成

Image title


第一步、老规矩先画120*120的图标底座,我这里用的是椭圆矩形做底座。然后重点来了!只有特定的图标才适合制作这种图标按钮,①是要求面性图标(不知道的可以百度下)②是图标可以拆分成两块,如下图所示。(画不出来的朋友依然老规矩,打开网址搜索红包,找个类似的下载即可 http://www.iconfont.cn

Image title


第二步、把拆分后较小的那一部分直接设置透明度60%,较大的那一部分设置形状渐变,一边透明度60%,一边透明度100%,色值都为纯白#FFFFFF(如果是下载的图标就把填充透明改成0%,然后添加渐变叠加样式也行),哒啦~一个最最简单的扁平水晶图标就做出来啦!!

Image title

这种图标的好处是操作简单,看起来精致美观,通透像水晶一样而且是扁平风格,大家也可以发挥创意,添加我上期教程中说的弥散阴影效果让图标更精致: http://www.ui.cn/detail/87521.html,或者像红包图标一样添加小斜杠等等效果,总之符合APP实际运用即可

Image title


本文依然是带大家入门,别整天画乱七八糟没用的图标(起码我是觉得图标画的好又不算啥,能完美运营到平常工作中才是真理)能用的上的才是好的,看完文章自己动手试一试才能真的领悟到其中的奥妙哦,试着把你以前的设计稿中的图表,改成以上的样式,看看是否更精美呢。光看不做就变成看了那么多文章,为啥自己依然做不好的原因!

(文中图片部份是网上找的,部份是我自己的,如果教程中善用了您的作品请联系删除( ^_^ )/~~)


下一期的视频教程预告:教你如何快速设计一个APP启动页 ↓(已发http://www.ui.cn/detail/174402.html

Image title


如果客官觉得本教程还行,欢迎关注并帮忙推荐哦↓

Image title

更新:2017-04-26

收藏

1268人已收藏

宋聚安

不定期更新课程 可加微信s85009500咨询啦~

  • 24

    作品

  • 7129

    粉丝

  • 43

    关注

  • 一批精选APP作品界面 PSD分享
  • 三要素教你设计流行 大白风格UI
  • UI视频教程 教你设计个简历APP
  • 简单三步 教你设计个精美启动页
相关标签

    猜你喜欢

      2017-04-26 原创文章 教程 举报 133096 1268 1709 112

      APP常用导航图标按钮 设计技巧

      0.0°

      你确定要举报APP常用导航图标按钮 设计技巧

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年04月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1709
      1268
      112

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录