如何学习UI设计?
互联网刚刚兴起的时候,UI设计的门槛很低。也许只靠平面设计或者简单的网页设计就能找到一份非常好的工作。但是现在随着智能手机的普及和5G时代的到来,网民的基数越来越大,大家对界面的要求也越来越高,相应的企业的要求也发生了很大的变化。随着产品生产中人性化意识的增强,越来越多的企业开始重视在交互设计和用户测试方面的投入。企业不仅需要UI设计懂设计,还需要懂交互,懂用户心理,甚至懂代码,懂AE制作动态,懂插画,懂手绘等等。
说了这么多,我们该如何学习UI设计呢?如何成为市场需要的UI设计?我准备从一门成熟的UI设计课程来讲解具体的学习步骤和学习注意事项。
一、我们如何学习UI设计?如何成为市场需要的UI设计?1,手绘与软件基础-软件水平手绘
没有美术功底可以学UI设计吗?
答案肯定是肯定的,但是有艺术功底的UI设计师在某种程度上会让自己的竞争力更加突出。创意对于UI设计非常重要,但这只是一个方面。能够通过不同的方式和手段准确地表达自己的创作想法是另一个方面。对于有艺术基础的设计师来说,会有更多的形式来表达自己的想法,比如手绘、插画、写实图标等等。
所以我们要在以后的UI设计工作中学会使用手绘。这部分的学习,目的是通过手绘来掌握和理解身体的结构、光感和空间关系。后期可以将手绘渗透到作品中,结合手绘和鼠标绘制,从零到一的进入插图,进一步渗透到项目作品中,如电商首页/专题页面/APP闪屏/默认页面等。
学习手绘并不要求每个人都达到专业美术生的水平,而是让每个人都学会用手绘更好的表达自己的作品。因为软件操作带来的灵感远不如手绘带来的灵动。对于每一个成熟的设计师来说,好的创意和想法一定不是先来自电脑,而是先来自书本。手绘是创意和灵感最好的表达和表现。培养手绘的习惯,懂得怎么做,可以进一步拓展设计师的思维,在草图上快速呈现你对图形的需求并尝试对比快速演变的图形,从而提高工作效率。
因此,对于手绘部分,将手绘与设计结合在项目中,可以有以下学习过程:
通过静物练习、透视/光影/三面五音理解物体
通过饱和度、明度、色相理解色彩关系,通过分析每种颜色的正负心理暗示,理解色彩的情感表达。
用ps软件手绘图标,提高软件的熟悉度。
手绘鼠标绘画结合绘画技巧(插画临摹)?
软件
软件是UI设计不可或缺的辅助工具。关于工具的学习并不多,重要的是你能不能熟练的使用工具来表达你的想法,让工具成为你的左右手来帮助你完成设计。针对每一类设计工具选择一到两个熟练的操作,在以后的工作中遇到类似的工具可以快速上手。
其实学习工具最快的方法就是带着目的去学习,使用逆向学习可以让你更清晰直观的理解这个功能的意义。从案例入手,从案例中学习新的工具,使工具、技术和案例融为一体,从而加深对软件的介绍和提高,以及软件的综合能力。
那么什么是逆向学习呢?下面简单介绍一下设计中常用的两个工具,PS和AI。其他工具也可以参考这种学习模式。至于软件的熟练程度,需要花时间反复练习。
(1)PS,Adobe Photoshop,是Adobe Systems公司开发发行的图像处理软件。相信不是设计行业的小伙伴都有所耳闻,是设计专业人士必须掌握的设计工具。Photoshop主要处理由像素组成的数字图像,其重点是对图像的处理。
?
第一次接触PS,需要掌握PS的基础知识,工具详解,布尔运算,图层样式,混合选项,蒙版,调整图层,滤镜,混合模式,图片等。怎样才能一步步了解这些功能?
PS基础:了解更多工具、图层样式//图层调整。(案例演示)
学习ps布尔运算,并应用于图形绘制。
通过海报合成案例掌握混合模式/蒙版。
使用图像调整(曲线、色调饱和度、色彩平衡等。)来调节合成素材的色彩、光影的统一性。
使用滤镜达到距离、真实、锐化、扭曲等目的。在海报合成中/使用camera raw进行合成的最终调整。
只能通过商业实战的分析和结果的推演,把软件和设计思维结合起来。在反向推送和复制的过程中,让我们的工具基础更加扎实。
(2) AI,Adobe Illustrator,是一款应用于出版、多媒体、网络图像的行业标准矢量插画软件。其强大的功能和体贴的用户界面使其成为大多数设计师选择矢量编辑软件的最佳选择。?
对于AI,需要掌握AI的图形符号功能和使用技巧,AI的渐变,混合工具,2.5D插画。然后到绘图工具的掌握,通过对主流插画风格的学习和风格的转换,学习插画中的色彩。最后实现了logo图形的绘制技巧和字体设计。
Ai基础:通过学习寻路器/掌握图形符号,掌握图形减法、交集、加法的能力,提升图形或设计的美感。
适当插画,加强对物体结构/光线/色彩的理解。
顺应当下流行趋势,通过人物和风景深入了解主流矢量插画形式。
这些其实只是对工具的一个基本了解,让你了解工具的功能,然后一次又一次的熟悉工具。至于如何使用这些工具,还需要继续进阶学习。
2、设计基础、设计理论——设计思维
没有设计思维,再熟练的工具,设计出来的作品也不会被大众认可。所以我们必须学习设计原理,掌握设计基础。理论联系实际,完美合理的呈现自己的想法。
这个阶段可以引入Logo设计、字体设计、VI手册设计,理论上穿插实践练习,让学习有目的性,操作上逆向设计思维。?
什么是logo?如何开始制作原创logo?logo的常见形式有哪些?这里将结合Logo和文字设计来讲解学习步骤。
学习平面构成:点、线、面,了解平面空间的基本要素。通过设计,元素变得更加精致,更具视觉冲击力。
学习平面结构基本形式的重复、近似、渐变、变异,培养逻辑思维和建模能力,以便运用到实际设计中。
从标志设计的头脑风暴中发展自己,在思维空间中从宏观到微观提取设计关键词。
学习各种LOGO素描的方案,这里需要用到之前学过的手绘技巧。然后选择其中一个继续优化。
通过不同关键字的组合,可以对图形进行提炼、组合、重组,赋予关键字图形,优化、定型图形。
了解字面结构,重心,独特组合字,中宫处理等。根据字体的纵横笔画,掌握字体变形设计,完善logo提案的效果图,增强过度提交的概率。
标志文本部分提取重新设计
标志图形文本组合最终确定
在标志设计中,我们学习了平面的构成、字体设计等。,而且我们还在画册的学习中穿插了设计知识。比如色彩心理学、色彩对比与配色技巧、vi基础+应用部分规格与内容、场景应用效果图、尺寸与材料等。通过自己的模拟项目,可以深入掌握vi手册的基础部分。
学习VI视觉手册规范,重点提炼VI视觉手册页眉页脚设计。
模拟演练项目从甲方和用户的角度深入掌握vi手册的基础部分,如企业logo、标准颜色、标准字体、中英文印刷规范、辅助图形、错误应用等,并根据企业特点设计基础部分。
在vi手册的应用部分,从使用场景、材料、工艺、尺寸、展示环境等方面给出了甲方专业成品落地和效果展示的建议。
完善vi手册提案效果图。??
3.网页/电子商务运营设计
平面设计是UI设计的基础。我们通过平面设计学习了设计基础和设计思维,减少了很多UI设计学习阶段的疑惑。
在互联网时代,大多数企业意识到通过在线信息吸引更多潜在客户是多么重要。这些潜在客户对你的公司和产品的印象,很大程度上取决于你在网站设计上投入了多少精力。企业站和电商平台也是互联网环境下企业不可或缺的交流平台和C端独立交易平台,是互联网行业下的主流。
对于网页设计,要求你熟悉和掌握网页设计的规范,了解网站的基本框架和网格布局,重点了解企业站的界面设计规范和输出规范,能够根据企业的真实需求设计页面。掌握网页中的版面设计/构图排版/色彩/文字/图片搭配,掌握企业站首个焦点图的设计技巧。
电商部分需要电商行业的设计要求和规范,学习电商行业不同类型的设计方法和店铺包装方法,掌握电商设计的全流程和电商banner的版面设计。
这么多知识,大家看起来都很大。放心吧!!!我们将拆分这些知识,带你一步一步来。
(1)企业响应式网站/一屏网站设计:掌握网页设计流程和规范,网页设计配色和排版技巧。
网页设计的基本规范:单位、分辨率、大小、字体、颜色等。/通过案例展示了解网站构成架构(首页设计)。
网页设计中的布局扩散与界面设计
通过网格布局,增强网页设计的布局,深入研究网页中构图/颜色/字体/图片的使用,改善整体页面细节。
响应式移动终端设计规范:设计尺寸、适配设备、排版布局变换形式。
企业网站的界面设计
(2)背景设计:掌握数据图形和图形数据的配色。
目前根据招聘市场信息反馈可视化和后台也是网页阶段的标配,那么后台首页有哪些学习点呢?
企业网站的界面设计
掌握一屏网页设计和交互效果设计(一屏主页设计)
通过设计案例了解后台设计规范和后台操作流程及功能。
后台主页设计
通过柱形图、饼图、趋势图等方式将背景数据可视化,增强查看和阅读能力。
(数据的平面设计)?
(3)电商设计:掌握首页、专题页、详情页、主图、直通车、钻展、后台装修、移动端、pc端的设计规范,通过店铺的实际运营,掌握电商详情页的设计技巧和排版技巧。
通过淘宝电商平台了解首页移动端和pc端的设计规范。
掌握主图、直通车、钻展的设计规范,在后台推广窗口详细了解运营推广图设计板块。
通过项目案例分析展示主题页面的设计构成/用真实案例分析:项目流程、关键点提取、可视化推导图。
淘宝电子商务平台主页和专题页面的设计
详情页的设计规范和内容构成,从用户的角度考虑设计。
淘宝电子商务平台详情页的设计
通过申请自己的淘宝店,实际上可以在电商后台装修/上架商品(剪图/上架/做后台装修)。
(4) C4Banner:掌握3D场景设计,并运用到设计作品中,丰富画面的视觉效果。
C4D软件基础/场景构建,利用3d场景提升设计空间的立体感,增强视觉冲击力。
(白色模型场景构造)灯光材质/渲染输出/C4banner(场景粘贴材质/灯光/渲染设置和输出应用于banner)。
横幅设计中的布局和z轴拆分。
提升电商旗帜,在画面中融入更多插画元素。而且大多是矢量插图的风格。
C4D风格旗帜设计和制作。
3.移动终端的设计
专注点!!!
随着移动互联网的发展,人们对手机的需求越来越高。人们使用手机是为了娱乐、消费和学习,所以UI设计无时无刻不在我们的生活中体现。这部分不仅要学习设计,还要学习用户体验、交互设计、操作设计,让我们的产品更贴近目标用户的使用习惯。
(1)用户体验、竞品和原型图:了解项目开发、产品研究和项目流程,掌握交互原型。
通过市场调研或大数据分析来分析竞品。利用大数据统计分析用户痛点和对产品的体验反馈,模拟用户画像分析用户痛点、需求、受众、职业等。通过数据对比和数据收集做市场分析。
学习Axure软件,画出低保的真实原型。
结合产品分析和竞品分析,用Xmind做思维导图。
分析app页面流程图/功能框架/界面跳转逻辑,用axure绘制App原型图。??
(2)图标、胶囊、界面设计:掌握图标、状态栏、导航栏、标签栏、闪屏、启动、欢迎页/向导页、弹出页等界面设计。
用剪影图标、平面图标、线状图标、面状图标、微纹理图标、轻仿图标了解图标的多样性。
探讨金刚区的设计特点,功能图标和装饰图标,以及不同板块应使用的图表类型和设计。
了解ios/ Android界面的设计规范:大小、字体、颜色、大小、行距等。,然后深入探究状态栏、导航栏、标签栏等界面组件的维度和可点击空间。
通过成熟的App,我们可以了解胶囊/弹出的设计形式和组成部分,深入分析闪屏/启动/引导页之间的设计特点和操作思维用户体验。
最后,根据用户思维和产品思维的完整性,设计从0到1的界面??
(3)操作界面、AE交互、视觉标准设计:电子商务中操作思维与产品设计的结合,可以通过对用户思维界面的审视,找到用户的痛点,完善整体操作界面,达到营销推广的目的。AE交互动画设计,提升了界面的交互操作体验。
用操作思维扩展和提升类接口设计。(看优秀的电商产品反推运营思维和设计)
突出促销活动专题页面、弹窗、闪屏的设计氛围,增强视觉感染力,促进用户点击查看。
操作界面的设计。(从模型到加入运营思维设计运营界面)
结合案例掌握ae软件的基础知识:图形变形、运动、大小、透明动画。
深度ae功能:节点慢动作,速度图的使用让画面更加柔和流畅自然,滤镜用于实现更多动画效果,界面交互动画和跳跃效果动画用于练习和项目展示。
主视频输出MP4,png序列和quicktime。
4.Web前端:UI设计不一定要精通WEB前端,但是如果了解了前端的基础知识,就可以更好的和程序员交流,达到想要的效果。
掌握Web前端的基础知识,熟悉Html5和Css3,熟悉框架布局。
通过学习Html5和Css3,把自己设计的企业站解析成一个网页。
通过以上学习,我们掌握了UI设计技巧。进入UI设计行业后,需要不断的学习,提升自己的审美、设计和技能。所以多看看别人的设计,不是去抄袭,而是去思考借鉴别人的优点,提升自己的设计思维。