【UI案例强化班】第5课 图标种类、配色、识别性 作业帖子

UI设计讲师-熊祥淳 发布于 2018/07/06 22:13
查看:2479|回复:49

课堂总结

查看点赞情况
全部点赞
总计: --

共有49条评论

  • evetop evetop

    8677f8ede181db3dab20cc2f47767025001.jpg

    a1e405d82e743b6e87332eef7b6df426001.jpg

    6班-张妍

    沙发 2018/07/06 22:18 回复
  • 罗美英 罗美英

    2018-7-6 UI案例笔记

    一、图标的分类

    1、2D:在平面上展现的,没有高光,没有阴影

    2、2.5D:渐变、高光、阴影,有点立体的效果

    3、3D:明显高光,阴影,有三个纬度,有很强烈的立体效果。

    二、细微的分类

    1、功能性

    2、扁平化

    3、长投影

    4、MBE风格

    5、轻质感

    6、拟物化

    7、扁平化(AI)

    8、功能性(AI)

    三、图标的配色

    1、色彩三要素

    95dcef53312aa5c00c8a79524e7fe65a002.png

    2、PS上的色彩三要素表现

    42783f442997b968305d2238f20c207b002.png

    3、色彩的情感基调

    四、图标的颜色使用

    1、单色图标

    5acaa11044399e6862025dc981bd9e4d002.png

    中性色:指黑白灰

    2、双色图标

    f19c0a3648e40c2f321a2b37224c1c74002.png

    单色搭配:从自己希望表达的情感出发选择颜色,再饱和度、亮度,让颜 色看起来舒适不刺眼,还要从产品的理念考虑色彩的搭配。

    注意:色彩一般用不到顶部这三个角的色调。

    f31a0cfe70d30c144e6db1ef75ebdebf002.png

    设计中常用的颜色搭配:(色相环)

    1、同类色/同系色:是在色相环中-30至30度的颜色区间的颜色

    6f097711e4db6377e734c958a70b4cbe002.png

    3c9595627b80305a18a391329ba59556002.png

    2、补色/对比色:互补色是180度角相对的颜色。对比色是120度角相对的颜色。互补色是最强烈的对比色。

    经典的互补色:红和青、黄和蓝、紫和绿

    3、类似色:类似色是90度角的颜色

    ca8b0f96767049af568656d3bc527c4a002.png

    五、图标的识别性

    作用:方便

    在设计的过程中,我们有时会太过注重个性化,忽略了本身图标的功能性导致了图标无法正确表意,难以识别。这颠覆了它最重要的图形意象属性图标所需要传达的信息,必须要放在首位的。若无明确的表达意义,对用户而言,该图标失去了存在的意义。甚至干扰用户对产品的使用。

    c2bfa6781f113e3b20bb1abfea9332b8002.png

                                                                                   五班-贵州-罗美英


    板凳 2018/07/06 22:19 回复
  • xia3467 xia3467

    cabf60c23b3173a90c012d1bf65e92c8002.png还有部分色彩环等老师讲的东西我就没有写在本子上,这是我对色彩的三种属性的理解吧。一班-夏微微

    地板 2018/07/06 22:29 回复
  • 糊猫炮炮LoveUI 糊猫炮炮LoveUI

    深圳 丑丑 -- 2018.7.7   今天图稍多,不是为了炫,而是我给自己定的小目标,明天7月7,刚好打卡100天,留个纪念

    AI 2.5D

    57153d24d9fee2c7a37a9bdcfa6ea34a003.gif

    插画小图标

    0d58cbfc56fa958ed14e436a8dbe29f2001.jpg

    今天刚好有同学问什么是MBE风格,我把7月3号的MBE插画做个小动画

    4bdb0f82b5c132c818ae02c2093c15a5003.gif

    笔记

    0a62c7128e9e5fb8aaed300364b825eb002.png


    4ed1d666ef40bddfd108bde102e7f05b002.png


    -----------------------------  别欺负我长的比较丑,你加班的bug,就是丑丑我写的 -------------------------------




    • Qearl6392:大神工资多少了?

      2018/07/07 20:22 回复

    • 3班-河南-赵雪:膜拜大神,好棒啊

      2018/07/08 20:42 回复

    • 糊猫炮炮LoveUI 回复 @Qearl6392:喝牛奶舔瓶盖,嘿嘿,其实每当有人问我这个问题的时候,我都在想,该回答多少,会不会伤害到对方,有人曾经在课堂上取笑过我,说我拿着5000块的月薪怎么在深圳活下来,但他根本不知道我那时候跟他说的其实是我2015年的月薪,目前的月薪买1台64G的iPhoneX加上还房贷,还可以买几件衣服,我就这样丑着被嘲笑着在深圳艰难的活下来了…

      2018/07/09 00:59 回复

    • 糊猫炮炮LoveUI 回复 @3班-河南-赵雪:没有,互相学习,共同进步

      2018/07/09 01:00 回复

    • 展开剩余1条回复
    第4楼 2018/07/06 22:46 回复
  • 欧昌玉 欧昌玉
    7fb2f40a0b3d98ee95b87d4f3734777c001.jpgacf2fad785805fe917617dcbb770aafd001.jpg
    第5楼 来自iPhone客户端 2018/07/06 22:47 回复
  • 6班-江苏-耿嘉玉 6班-江苏-耿嘉玉

    6班-江苏-耿嘉玉

    【课堂总结】

    1.用户体验很重要:无论图标、排版、配色、动效,要准确、高效传达信息。

    2、UI不是炫技,不是个人主义。做出来的产品至少是产品经理、设计师、程序猿、甲方爸爸四方不断协调妥协而来的吧。

    3、配色:多看案例,多总结吧,多一点自己的想法。


    【课堂笔记】

    40461bcf36c6924411de20aed6cbcd0c001.jpg

    bfa8f45a4b79f589640e26bd5da834ec001.jpg

    第6楼 2018/07/06 23:30 回复
  • 2953858904 2953858904

    127100f602f8b7c802ee5a8b31d8c09a002.png6班-四川-小朱

    第7楼 2018/07/07 10:29 回复
  • CHENDAXIAN CHENDAXIAN

    ba8463e3de7b17c622a96c6eeb41f15f001.jpg


    第8楼 2018/07/07 10:56 回复
  • Stella瑶 Stella瑶

    cefc773cd13c69e56c39db88ada698be002.png

    e4c1e2fbb2a0499c4c9c2468075e5609002.png

    f9ef691a99ffb79abcbc3e0d26b37460002.png四班-四川-黄瑶


    第9楼 2018/07/07 11:00 回复
  • 上海郭嘉 上海郭嘉

    72c94c9607418fd7c6d563df7a42f50e001.jpg

    d7860e5a55048ef5a981f54d83dc6e69001.jpg

    3d7f97f6c6a260c854456854697fcdef001.jpg

    a5cd7492e271eef3b173517427965e46001.jpg

    caadbee98735316ddf7d115007901a93001.jpg

    ui设计案例班-上海-郭嘉

    第10楼 2018/07/07 12:14 回复
  • 重庆-王凯文 重庆-王凯文
    47700f6f0cc08ca103666a49df2024c7001.jpg
    第11楼 来自iPhone客户端 2018/07/07 13:00 回复
  • 6班-陕西-黄海珠 6班-陕西-黄海珠

    9b358165eb6e736d5428c01e5b4314d7002.png

    6班-黄海珠

    第12楼 2018/07/07 13:58 回复
4页,跳到: 页
发布新贴
招版主啦

版主

  • UI黄老师 UI黄老师
  • UI讲师-冯志龙 UI讲师-冯志龙
  • UI设计-江海金 UI设计-江海金
  • UI设计讲师-黄晓炜 UI设计讲师-黄晓炜
  • 讲师-熊祥淳 讲师-熊祥淳
  • 钟园园 钟园园

注册有礼

完善以下信息,为你推荐课程

  • 学生
  • 白领
  • 高管
  • 自由职业
  • 其他
  • 工作需要
  • 自我提升
  • 兴趣爱好
  • 创业/转型
  • 其他
  • 小白
  • 了解
  • 熟悉
  • 精通
  • 其他
  • 高中/中专
  • 专科
  • 本科
  • 硕士
  • 其他
  • 影视枪战大片特效解析
  • PS视觉惊悚课堂
  • 45天7千平方大厦变形记
  • 原画学习痛点技法全解析
  • 影视动画奇幻课堂
  • AI高端商业设计全攻略
  • UG职场生存必备指南
  • 日赚千元之新媒体行业揭秘
出现异常