UI 图标新语|图标打卡作业点评 04 期

用户头像
杭州/UI设计师/1年前/5619浏览
UI 图标新语|图标打卡作业点评 04 期
对于 UI 设计师来说,图标设计的能力至关重要,也是提升感官体验的重要方向。对于一些初入行业的设计师,习惯下载图标素材应付项目需求,失去了动手能力培养的机会。通过参与图标打卡活动,便是辅助大家培养图标设计能力和动手习惯。
经过这段时间大家的努力,已经有数百个打卡作品,今天针对上周完成的打卡作品给大家做一个简短的点评。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI0ODQ=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
一、图标设计小教程
提高图标设计能力离不开反复磨练,通过磨练强化动手能力,再不断精进图标设计规范,掌握数字化关系也是需要我们反复研究的课题。
1.1 天气图标举例
以这个天气图标来举例,相信很多同学都能画出来,但是有没有把控里面的数字关系就难说了。通过以下示意图我们可以看出来,大圆和小圆之间的比例关系是 4:3,而间距的关系也与圆形的大小有着数字关系。这些数字关系可以使得图标设计更加精细化,也能引导我们去探索设计背后量化的标准和关系。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI0ODg=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
1.2 质感的层层强化
当我们绘制完图标的造型之后,运用合适的风格进行质感强化也是尤为重要的。这里我先运用其中的一个风格来完成,选择了磨砂玻璃质感的效果。为了质感和层级关系更加明显,这里单独对局部进行了光影强化和边界处理,看看以下步骤拆解图感受一下。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI0OTI=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
备注:运用的软件功能是背景模糊,Sketch 或者 Figma 等软件皆可实现。
1.3 延展界面场景
为了进一步强化图标练习,延展了一个简单的界面场景,一个由宫格布局组合成的界面设计。为了填充所需的内容,先把之前的一些图标作品放进去占个位置。虽然都是质感一类的图标,但是由于透视、配色、风格和细节规范等不一致,整体还是存在一定的排斥感。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI0OTY=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
1.4 根据界面环境重新调整
由于界面设计属于深色主题,之前练习的天气图标放入场景中显得过于突出,而且玻璃质感的通透性没有得到很好的发挥。于是根据界面环境对天气图标进行了重新调整,以深色关系调整了云朵部分,针对太阳的配色和尺寸比例也进行了调整,如以下效果图。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1MDA=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
1.5 延续风格补全设计
以调整后的天气图标作为风格规范,延续了其它业务场景的图标设计,在透视关系、细节规范、配色比例和光影效果等方面进行了直接延续。在光影方向上面选择了纵向区分,左边三个选择左上角打光,右边三个选择右上角打光。(当然也可以统一一个方向设置光影)
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1MDQ=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
1.6 统一性还是差异化
完成的整体设计视觉风格虽然比较统一,但是也有一些问题存在。图标之间缺少差异化,过度统一容易视觉疲劳,于是在统一性和差异化上面开始纠结了。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1MDg=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
为了既保障图标设计表达的统一性,又能形成视觉感的差异化,做出了调整配色关系的决定。根据天气图标的配色关系延续出了其它色系,看看最终的效果如何。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1MTI=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
 
二、本期打卡作品点评
点评 01 | 作者:岁月神手
该组作品细节刻画和光影处理都还不错,透视角度的统一也使得系列图标更加规范协调,是一组值得学习的打卡案例。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1MTY=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
点评 02 | 作者:夏天DS
该作者图标设计和作品包装的能力都很成熟,该组作品也做得不错。如果立体图标这一组可以把风格细节统一一下更好,尖锐的风格和圆润的风格组合在一起会互相排斥,能协调一下更好一些。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1MjA=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1MjQ=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
点评 03 | 作者:章鱼丸子SN
作者输出了多种风格的图标练习,可以看出来专业能力是比较成熟的。后期可以多在场景中运用结合,案例示意可以统一语言,这样会显得更加真实。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1MzY=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
点评 04 | 作者:米兰de小匠
这一组面性图标设计还是不错的,图标造型设计和配色都可以。在图标视觉比重上面还可以再微调,根据图标的有效面积进行视觉权重的调整。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1MzI=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
点评 05 | 作者:夏天DS
通过质感图标的绘制可以锻炼设计师的手绘能力,这是强化质感深入技巧的关键,培养观察光影变化和处理技巧的能力。该组作品看得出作者的动手能力很强,大家也可以以此作为学习参考。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1NDA=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1NDQ=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1NDg=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
点评 06 | 作者:NO丶
三维设计能力对于设计师而言也在逐步普及,在图标设计和一些视觉场景中运用也很多。该组作品单看图标层面还是不错的,后期可以加强一下作品的包装能力。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1NzY=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
点评 07 | 作者:K_十二
该组作品画到这个程度来说作者的基本功还是可以的,个别图标的细节刻画还需加强,光影强弱的处理还需统一。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1NjA=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
点评 08 | 作者:Z702539465
该组图标的图形绘制比较丰富,需要加强一下细节的微调(比如间距等),配色和作品包装能力可以在后期继续加强。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1NjQ=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
点评 09 | 作者:Z106706739
磨砂玻璃质感图标的技法运用没问题,图标包装的时候相互之间间距要加大,这样才不会互相干扰,也能更加舒适自然。图标中描边的处理显得不够柔和,也有可能是太大的缘故,显得缺少了一些精致度。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1Njg=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
点评 10 | 作者:七彩糯米饭
通过 AI 工具生成图标的探索是值得学习的,该组作品如果可以在图标生成之后加强一下后期处理会更好,也要加强作品包装的能力。
UI 图标新语|图标打卡作业点评 04 期(图ZMTQ4NTI1NzI=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
Collect
三、小结
选择了部分代表性的作品进行了点评,仅代表个人观点,希望能对大家后续作品输出带来帮助。期待大家的图标打卡作品,我们互相进步。
快来参与吧:
https://www.zcool.com.cn/activity/ZMTE2NA==.html
(活动链接)
本文由 @黑马青年(heimaui)原创发布。未经许可,禁止转载。
50
Report
|
315
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
大家都在看
Log in