手机主题ui设计教程(如何学习UI设计)

本文目录
如何学习UI设计
随着互联网行业的发展,如今市场对于UI设计师的要求越来越高,对应的UI设计的学习内容也越来越多。如果你现在还想拿着一项大多数人都会的基础技能找高薪工作,这基本不太现实。
互联网刚刚兴起之时,UI设计的门槛很低,也许你只会平面设计或者单纯的网页设计就能找到一份很不错的工作。但现在,随着智能手机的普及、5G时代的来临,网民基数越来越大,大家对于界面的要求也越来越高,对应的企业的要求也发生了很大的变化。产品生产的人性化意识日趋增强,越来越多的企业开始注重交互设计、用户测试方面的投入。企业不仅需要UI设计懂设计,还需要懂交互、懂用户心理,甚至还要会代码、AE制作动效、以及插画、手绘等等。
说了这么多,那我们如何学习UI设计?又如何成为市场上需要的UI设计呢?我现在从一个成熟的UI设计课程去拆分讲解具体的学习步骤,以及学习中的注意事项。
一、那我们如何学习UI设计?又如何成为市场上需要的UI设计呢?
1、手绘以及软件基础---软件水平
手绘
通过静物练习了解物体,透视/光影/三面五调
通过饱和度、明度、色调等理解色彩关系、通过剖析每个颜色的正向负向心理暗示,了解色彩情感表达
运用ps软件手绘图标,提升软件熟悉度
手绘鼠绘结合绘制技巧(插画临摹)
PS基础:了解工具详情、图层样式//图层调整。(案例演示)
学习ps布尔运算,并运用到图形绘制中。
通过海报合成案例,掌握混合模式/蒙版。
利用图像调整(曲线、色相饱和度、色彩平衡等),调整合成素材颜色、光影等统一性。
海报合成中利用滤镜达到远近、虚实、锐化、扭曲等目的/利用camera raw做合成最后调整。
对于AI,我们需要掌握AI的图形符号功能及使用技巧,AI的渐变、混合工具、2.5D插画。再到绘图工具的精通,通过主流插画风格的学习及风格的转换,学习插画中的色彩。最后实现logo图形的绘制技巧及字体设计等。
ai基础:通过学习路径查找器掌握图形减去、相交、相加等能力/掌握图形符号,增强图形或设计美感。
适量插画绘制,加强对物体结构/光影/颜色的理解。
顺应当下流行趋势,通过人物、风景深入了解主流矢量插画表现形式。
学习平面构成:点线面,了解平面空间的基本元素。以设计的手段来让元素变得更精致更富视觉冲击力。
习平构基本形式重复、近似、渐变、变异等,培养逻辑思维和造型能力以便我们能够将其运用到实际的设计当中。
从Logo设计头脑风暴中开发自己,思维空间从宏观到微观提取设计关键词。
学习LOGO草图绘制多种方案,这里就要用到之前学习的手绘技巧啦。然后选其中一种进行继续优化。
通过不同关键词相互组合,做图形提炼、结合、重组、赋予关键词图形化,图形化优化定稿。
根据字体横竖撇捺等了解文字结构字面、重心、独体合体字、中宫处理等,掌握字体变形设计,完善logo提案效果图增强过稿概率。
logo文字部分提取重新设计
logo图形文字结合定稿
在Logo设计中我们学习了平面的构成、字体设计等,在画册学习中我们同样会穿插设计知识。比如设计的色彩心理学、色彩对比及配色技巧,vi基础+应用部分规范及内容,场景应用效果图及尺寸和材质等。通过自己模拟项目,去深入掌握vi手册基础部分。
学习VI视觉手册规范,重点提炼VI视觉手册页眉页脚设计。
模拟练习项目从甲方、用户等多角度深入掌握vi手册基础部分:企业标志、标准色、标准字体、中英文印刷规范、辅助图形、错误应用,并以企业特性进行基础部分规范设计。
vi手册应用部分,以使用场景、材质、工艺、尺寸、展示环境等,给出甲方专业成品落地建议及效果展示。
完善vi手册提案效果图。
所针对网页设计,要求你熟悉和掌握web端设计的规范,了解网站基本架构和栅格化布局,重点掌握企业站界面设计规范和输出规范,且能够根据企业真实需求设计页面。掌握网页中的版式设计/构图排版/网页中的色彩/文字/图片搭配,掌握企业站首焦图的设计技巧。
而电商部分则需要电商行业设计要求与设计规范,学习电商行业不同类型的设计方法和店铺包装方法,掌握电商设计全流程以及电商banner版式设计。
知识这么多,看起来都头大。别急!!!我们将这些知识进行拆分,一步步带你飞。
Web设计基本规范:单位、分辨率、尺寸、字体、颜色等/通过案例展示了解网站组成架构(首页设计)
网页设计中的版式扩散与界面设计
通过栅格化布局,增强网页设计版式,深入研究网页中构图/色彩/字体/图片使用等,提升整体页面细节。
响应式移动端设计规范:设计尺寸、适配设备、排版布局转化形式。
企业网站界面设计
企业网站界面设计
掌握一屏式网页设计及页面中交互效果设计(一屏首页设计)
通过设计案例了解后台设计规范及后台操作流程和功能
后台首页设计
将后台数据通过柱状、饼形、走势图等手法以增强观赏阅读性为目的做数据可视化处理
(数据图形化设计)
通过淘宝电商平台了解首页移动端与pc端设计规范。
掌握主图、直通车、钻展设计规范,以及在后台推广窗口了解更多运营推广图设计板块。
通过项目案例分析展现专题页设计构图/以真实案例剖析:项目流程、关键点提取、视觉推导图。
淘宝电商平台首页、专题页设计
详情页设计规范及内容构成,站在用户角度去考虑设计
淘宝电商平台详情页设计
通过申请自己的淘宝店,在电商后台实操装修/商品上架(切图/上架/后台装修实操)
C4D软件基础/场景搭建,利用3d场景提升设计空间立体感,增强视觉冲击力。
(白模场景搭建)灯光材质/渲染输出/c4dbanner(场景贴材质/打灯光/渲染设置并输出应用到banner中)。
banner设计中的版式与Z轴拆分。
提升电商banner,画面中融入更多插画元素。并多以矢量插画风格展现。
C4D风格banner设计制作。
学习Axure软件,绘制低保真原型图。
结合产品分析和竞品分析,用Xmind制作思维导图。
分析app页面流程图/功能框架/界面跳转逻辑,利用axure绘制App原型图。
以剪影图标、扁平图标、线性图标、面性图标、微质感图标、轻拟物图标认识图标的多样性。
探究金刚区、功能图标、装饰性图标设计的特性,及不同板块应该使用的图表类型及设计。
了解ios/安卓界面设计规范:尺寸、字体、颜色、大小、行距等,再深入探究界面中组成部分如:状态栏、导航栏、标签栏等尺寸可点击空间大小等。
通过成熟的App,了解胶囊/弹窗设计形式及组成部分,深入分析闪屏/启动/引导页/三者之间的设计特性和运营思维用户体验等
最后,从0到1按照用户思维和产品思维整体性设计界面
以运营思维延展推广类界面设计。(多看优秀电商产品,去反推运营思维与设计)
突出促销活动专题页、弹窗、闪屏设计氛围,增强视觉感染力,促进用户点击浏览量。
运营界面设计。(从模范开始,到加入运营思维设计运营界面)
以案例掌握ae软件基础:图形变形、移动、大小、透明动画
深入ae功能:节点缓动、速度图表使用让画面更柔和顺畅自然、利用滤镜达到更多动画效果,以界面交互动画、跳转效果动画做练习及项目展示。
掌握视频导出MP4、png序列、quicktime方式。
掌握Web前端的基本知识,熟悉Html5和Css3.熟悉框架布局
通过学习Html5和Css3的学习,把自己设计的企业站解析成网页。
没有美术功底可以学UI设计吗?
答案肯定是可以,但是有美术功底的UI设计师在一定程度上会使自己的竞争力更加突显。创意想法对于UI设计来说是很重要的,但这只是一方面,能通过不同方式与途径准确地表达出自己的创意想法又是另一方面。对于有美术基础地设计者来说就会有更多地表现形式来表达自己的想法,比如常用的手绘、插画、写实图标等。
所以我们要学会在今后的UI设计工作中,利用手绘。在这个部分的学习中,其目的是通过手绘掌握并了解形体的结构,光感和空间关系。后期才可以将手绘渗透到作品中,把手绘和鼠绘结合,从零到一的进入到插画,进一步渗透到项目作品中,比如电商首页/专题页/APP闪屏/缺省页等。
学习手绘,并不是需要大家达到专业美术生的水平,而是让大家学会利用手绘更好的表达自己的作品。因为软件操作带来的灵感远没有手绘带给我们的思路敏捷。每一个成熟的设计师来讲,好的创意和想法一定不是先来自于电脑,而是先来自于本上,手绘是创意和灵感最好的表现及表达方式,养成手绘的习惯和会手绘这件事能够更加拓展设计师的思维,把你对图形的需求快速呈现草图上进行快速的演变图形尝试对比,进而提高工作效率。
所以针对手绘部分,将手绘结合项目中的设计,可以有以下学习流程:
软件
软件是UI设计不可缺失的辅助工具,工具的学习并不在多,而在于你是否能熟练的使用工具将自己的想法表达出来,让工具化身为左右手去协助自己完成设计。每一类设计工具选择一到两熟练操作,在今后的工作中遇到类似工具是可以很快上手的。
其实,学习工具最快的方法是带有目的的学习,使用反推法学习可以让你更清晰更直观的了解这个功能存在的意义。以案例入手从案例中学习新的工具,让工具和技法和案例融合一体,从而加深对软件及其综合能力的入门和提高。
那什么是反推法学习呢?下面我们选取PS、AI这两个设计中常见的工具来简单介绍一下,其他工具也可以参考这样的学习模式。至于软件的熟练度就需要你自己花时间反复练习。
(1)PS,Adobe Photoshop,是由Adobe Systems开发和发行的图像处理软件。相信不是设计行业的小伙伴也对它久仰大名,更是设计专业人员必须掌握的设计工具。Photoshop主要处理以像素所构成的数字图像,其重点在于对图像的加工处理。
初次接触PS,我们需要自学掌握PS基础、工具详解、布尔运算、图层样式、混合选项、蒙版、调整图层、滤镜、混合模式、图像等。我们如何一步步将这些功能摸清楚用明白呢?
我们只有不断的通过对商业实战的分析,通过结果的反推,让软件和设计思维相结合。在反推和临摹的过程中,让我们的工具基础更加扎实。
(2)AI,Adobe illustrator,是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件。它的功能强大,用户界面体贴,是大多数设计师选择矢量软件的不二选择。
以上这些其实只是对工具有个基础的认识,让你了解工具的功能,然后反复去熟悉工具。至于如何利用这些工具,还需要继续进阶学习。
2、设计基础、设计理论--设计思维
没有设计思维,工具用的再熟练,设计出的作品也不会被大众认可。所以我们必须学习设计的原理,掌握设计基础。将理论和实践结合,完美的将自己的想法合理的展示出来。
这个阶段中可以引入Logo设计、字体设计和VI手册设计,在理论中穿插实操,让学习富有目的性,在操作中反推设计思维。
什么是logo?如何入手做原创logo?logo的常见表现形式?这里将Logo和文字设计相结合来讲解一下学习步骤。
3、Web网页/电商运营设计
平面设计是UI设计的基础,我们通过平面设计去学习了设计基础、设计思维,减少了UI设计学习阶段中的很多疑惑。
互联网时代,绝大多数企业都意识到通过线上资讯来吸引更多的潜在客户是多么重要。这些潜在客户对你的公司及产品印象的好坏,很大程度上取决于你在网站设计上投入精力的多少。企业站和电商平台也是互联网环境下企业必不可少的传播平台和C端自主交易平台,是互联网产业下的主流。
(1)企业响应式网站/一屏网站设计:掌握网页设计流程及规范,网页设计配色、排版技巧。
(2)后台设计:掌握数据图形化,及图形数据配色。
目前,根据招聘市场信息反馈可视化和后台也是网页阶段的标配,所以后台首页又有那些学习要点呢?
(3)电商设计:操作掌握首页、专题页、详情、主图、直通车、钻展、后台装修,移动端与pc端设计规范,并且通过店铺实际操作掌握电商详情页的设计技巧和版式技巧。
(4)C4Dbanner:掌握3D场景设计,运用到设计作品中,丰富画面视觉效果。
3、移动端设计
划重点啦!!!
随着移动互联网的发展,大家对于手机的需求也越来越高,人们用手机娱乐、消费、学习,所以UI设计无时无刻不体现在我们的生活中。在这一部分,我们不仅要学习设计,还要学习用户体验、交互设计、运营设计,让我们的产品更贴近目标用户的使用习惯。
(1)用户体验、竞品、原型图:了解项目开发、产品调研、项目流程,掌握交互原型。
通过市场调研或大数据分析,做项目竞品分析。利用大数据统计分析用户对产品的痛点及体验反馈,模拟用户画像分析用户对本项目的痛点、需求、受众、职业等等。通过数据比对及资料搜集做市场分析。
(2)图标、胶囊、界面设计:通过整体性设计界面去掌握图标、状态栏、导航栏、标签栏、闪屏、启动、欢迎页/引导页,弹窗页面等界面设计。
(3)运营界面、AE交互动效、制定视觉规范设计:电商中的运营思维与产品设计结合,以用户思维审查界面寻找用户痛点,提升整体运营界面,达到营销推广目的。AE交互动画设计,增强界面交互操作体验感。
4、WEB前端:UI设计不一定要精通Web前端,但是如果了解前端基础知识,可以更好和程序员沟通,以实现自己想要的效果。
通过以上的学习,我们具备UI设计技能,进入UI设计行业后,更需要保持持续的学习去提升自己的审美、设计、技能等。所以多去看别人的设计,不是要抄袭,而是去思考学习别人的优点,去提升自己的设计思维。
UI设计师需要学习什么
UI设计既是界面设计。随着智能手机以及互联网的飞速发展,UI设计在企业中扮演的角色也是越来越重要,是目前以甚至是未来都比较吃香的设计专业。大家选择UI设计培训也是对自己未来发展的一个不错的投资。目前,想要学好UI设计主要分为以下四个阶段:
技能方面的学习
平面设计、商业插画、电商设计、运营设计、C4D三维设计、UI界面设计、交互设计等
软件方面的学习
AiAe、PS、Al、AE、Sketch、XMind、Keynote、Principle、ESIGN等
思维方面的学习
视觉设计思维、情感化设计思维、运营设计思维、服务设计思维、全局思维
学习出来可以从事的岗位:
高级平面设计师、高级插画设计师、高级互联网运营设计师、高级UI设计师.....
UI设计培训详细内容
怎么学习ui设计(怎么自学ui设计)
首先,什么是UI设计?
UI即(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。
按行业细分一般分了4种行业
移动端UI设计师----手机平板上的APP和主题设计
PC端UI设计师--电脑上的软件和网页按钮设计
游戏UI设计师---网游和手游上的界面等设计
其它UI设计师---AR,VR.银行取款机界面,电影自助取票机界面等。
现在市场上的设计软件层出不穷,很多初学者看花了眼,听人家说要会这个,又听说要会那个。下面介绍一下常规需要学会的软件操作吧!
1.AdobePhotoshop(简称PS)
ps作为设计师必备的软件我们肯定是需要掌握的!ps涉及领域及广,基本上的设计行业都需要用到这款软件。UI设计当然也不例外,而且这款软件作为设计师启蒙软件,学会了再去学其他软件也要简单轻松很多!
2.AdobeIllustrator(简称AI)
AI是一款矢量图形设计软件,在矢量插画、图标设计、LOGO图形设计、字体设计、排版等方面都有非常大的优势,配合PS软件将会大大提高我们的工作效率。学习方法和PS一样,只要你先学会了PS软件,那么这款软件学习起来将会事半功倍。
3.AfterEffects(简称Ae)
近些年对动效制作能力的要求也越来越普遍,很多招聘需求都对这个能力有所需求,特别是在下一个5G时代的到来,微动效辅助产品体验将会更为全面普及,这个时候对UI设计师的动效要求也会更普遍。
4.AdobeXD
XD这是一款简单易用且的快速交互设计、产品原型制作软件!可用于UX、UI设计以及快速制作设计原型稿。可以代替ps做界面输出的软件之一,现在很多设计师已经用这款软件取代ps做界面了。款软件是免费软件,不需要购买就可以使用,win和mac都可以使用,不过win系统只限win10安装!
5.Sketch
ketch也是属于目前市场上主流的UI界面输出软件之一。你要你熟练了ps,这款软件就非常好上手了,基本一个星期就可以学会。不过这款软件只有mac电脑才能安装,所以也受到了一定的局限性。如果没有mac的同学也没关系,XD和这款软件的功能相差无多,可以用XD代替!(sketch现在也有中文版)
6.AxureRP
AxureRP是一款专业的快速原型设计工具,这款软件普及度也比较广,很多职业都会用到它,功能很强大!入门相对简单,想要深入下去会比较难些,作为UI设计师,这款软件的基本操作还是需要掌握的。
主要就是以上这些软件了,其中初学者需要下功夫去钻研的有ps,ai,ae,axure。
Sketch和XD就相对简单,只要熟练ps,就可以快速上手了!
那么除了上面说的这些,还有一些软件可以作为选学的,为了之后的发展广度,也需要多去学习一些,有哪些呢?
C4D:相对于其他三维软件,c4d操作更加便捷,做东西的效果也很好!而且随着当下的设计潮流,很多地方都会用到三维效果图,会的话找工作是加分项!
思维导图:有很多,比如xmind,百度脑图。是表达发散性思维的有效图形思维工具,它简单却又很有效,是一种实用性的思维工具。
软件操作能力是你入行设计最基本的要求,如果连软件基础都解决不了,有再多的想法就没办法很好的还原呈现,就等于空想了。软件只是工具而已,会软件不代表会设计,但是要会设计,这是你必须要打通的关卡。
综上,如果你想要选择:最好的图片和数码绘画工具:Photoshop
最好的图标设计和图形界面设计工具:AI
最好用的矢量绘图界面设计工具:Sketch
想要学好UI设计,掌握UI设计设计工具只是其中一部分,UI设计工具需要设计师们掌握色彩搭配,设计规范,界面排版,沟通能力,切图标注,尺寸标注,用户体验等相关知识。因此需要的就是不断学习,不断坚持,不断丰富自己的综合能力。
APP界面设计注意什么
APP界面设计应从图片、文字、色彩、图标、留白这些方面注意着手于设计。
1、图片,如同一个人的衣着品味
图片在APP中是非常常见的,图片的展现形式和图片的质量都影响着用户对产品的感官体验。
图片的定位就如同一个人的衣着品味,不同的穿衣风格会使别人对你作出不同的判断,为你打上不同社会属性的标签。
下面我们一起来看看图片在APP设计中需要注意的关键点,将会从图片比例、一致性、图片质量与真实性等方面进行分析。
1.1、图片比例有什么讲究?
不同比例的图片所传达的信息主体不尽相同,根据产品属性我们会选择与之相符的图片比例进行整体的框架布局。
通过体验一些主流的APP,我们会发现一些比较常用的图片比例,如 1:1、4:3、16:9、16:10等等;
也会发现一些打破常规比例的设计,我们需要分析它们的性格,结合自身产品的特点,才能在自己的APP设计中合理的加以运用。
1:1 强调主体的存在感
1:1的图片比例是比较常见的一种设计比例,利用此长宽比更容易将构图归整得简单,突出主体的存在感。
常用于产品展示、头像、特写展示等场景,在电商类APP中尤为常见。
4:3 图像紧凑、更易构图
4:3的图片比例可以使图像更紧凑,更易构图,方便设计师发挥。由于手机屏幕容量较小,作为全屏展示时,该比例在App设计布局上面占用空间较大。
16:9 电影场景般的效果
16:9的图片比例可以呈现电影场景般的效果,多用于横向构图,是应用非常广泛的尺寸比例之一,能给用户一种视野开阔的体验。
在很多影视娱乐类APP设计中运用广泛,如腾讯视频、网易云音乐等。
16:10 拥抱黄金比例
黄金比例就像金字塔上的明珠,越接近她越有魅力,反之会魅力减弱,16:10的图片比例最为接近。
设计没有绝对的标准,我们可以遵循一些优秀的经验规则,但是也要敢于突破规则,尝试更多的可能性。
X:≤Y 瀑布流设计
X:≤Y代表宽度固定,高度在最大值之间自定义的瀑布流设计,在一些用于用户没有很明确的目的,只是喜欢获取尽量多的信息的情况下采用这种设计方式。
X:≤Y的图片比例要注意高度的控制,不要超出屏幕可显示区域的范围,如花瓣网在750x1334px的设计中高度最大值为:848 px。
以上列举的仅为部分常用比例的分析与说明,还有更多的比例这里就不一一演示,分享的目的是让大家养成分析的习惯,结合自身产品特点选择适合的图片比例。
图片比例选择方式:
a. 以商品展示效果为准,选择能够充分表现商品特点的图片展示比例;
b. 以产品气质为准,选择符合产品内容气质的图片展示比例;
c. 结合产品特点选择合适的常用比例;
d. 根据版面布局灵活的自定义特殊的比例值;
e. 分析→打破→创新,创造出符合某种规律或者美学概念的比例值。
1.2、图片比例的一致性
当我们结合产品特点确定合适的图片展示比例以后,需要针对整体的布局与图片分布情况,规范出那些布局可以采用相同的图片展示比例。
在保障视觉效果与交互形式的情况下,相同的主体,在不同的页面中最好采用相同的比例呈现,这样的好处不仅可以保持视觉表达的一致性,也能给后期运营维护带来便利。
1.3、提高图片的质量
越来越多的产品对图片质量开始加以重视,比如网易严选对产品图片的拍摄与处理都有严格的规范,目的就是为了提升产品气质和在用户心中的印象。
我们在设计的时候更要以最佳的图片来烘托我们的设计稿,图片的质量影响着整个界面的格调。
很多伙伴儿会觉得图片都是后期运营上传的,我设计稿做得再精美最终也是没用的。对于这个问题我的观点是这样的:
a. 最佳的设计输出是设计师专业的体现;
b. 把最好的效果呈现给决策者,增加他对你设计能力的印象;
c. 通过制定运营视觉规范来把控图片质量,是可以严格把控你对图片的视觉追求;
d. 你的态度会给你带来好运。
1.4、图片的真实还原
虽然前面提到图片质量的重要性,但是我们不能为了视觉效果选择一些与主题无关的配图,这样也会给决策者一种误导。
我们可以提高配图的质量,但是需要保证图片的真实还原,这样才能让你的设计作品更加真实合理。
在一些本土的产品设计中,对于国外图片素材的运用,需要谨慎对待。如案例中的模特形象,文案信息的传达更加偏向于国内的场景,
如果运用一张国外的模特素材也许逼格更高,可是却无法真实的还原产品场景,会给决策者传达一种错误的认知。
2、文字,我只想知道重点在那里
文字设计的层次感决定了信息的高效传达,通过对文字信息的层次处理可以有效的帮助用户获取信息,提高用户对产品的操作效率。
2.1、对文字信息进行层级区分
当我们拿到交互原型或者别的需求文档时,我们需要对文字的信息层级进行有效的区分,这样才能让用户快速的获取和理解信息传达的内容。
文字信息可以简单划分为重要信息、次要信息、辅助信息等。在进行文字排版时,需要明确的梳理好信息之间的层级关系,提高用户对产品的整体体验。
通过对字体大小、颜色、留白、层级划分等处理,把相同属性的信息归类设计,让整个信息排列主次分明,层级清晰。
设计师在对文字进行视觉表现时,为了达到整体界面的视觉平衡也需要减少对文字样式的运用,不可为了突出文字信息而采用过多的表现样式。
2.2、预估好信息呈现的最大值
当我们在进行界面设计时,初级设计师往往会忽略文字信息的最大值,只是按照自己的习惯进行完美的布局。
最终进入到测试环节时才发现为什么比自己预期的字数多出这么多信息,此时就会出现返工的情况,给整体的产品开发进度带来风险。
作为一名合格的UI设计师,我们需要预估好信息呈现的最大值,而不是取最小值或者随意进行设计,这样将会在执行的过程中遇到更多不可控的风险。
2.3、善于利用提示符进行设计
在一些会出现大篇幅文字信息的界面设计中,为了提高用户对信息的获取效率,我们会根据整体视觉效果选择合适的提示符进行设计。
很多初级设计师会过于遵循交互原型,往往对大篇幅文字的处理过于随意,只做着交互原型的美化,缺乏对用户体验的主动性。
在进行产品交互设计时,有时候产品或者交互无法站在视觉的角度进行信息的梳理和布局,我们需要利用自己的专业来优化你觉得可以更好的地方,也能为你在整个产品环节中树立专业性。
关于提示符的设计表现形式主要有数字、字母、图形、色块等等,只要能有效的区分信息层级即可。
3、色彩,如何成为“色”计师
色彩给人的感受是最直观的,不同性格的配色传达不同的情感。关于配色有一些方法可寻,但是也存在一定的感性判断。
作为视觉设计师,我们需要学习理性的方法技巧,也要不断欣赏优秀的作品,提高自身的审美能力。
3.1、色彩基础知识
色彩分为无彩色系和有彩色系,无彩色系是指白色、黑色、各种深浅不同的灰色;有彩色系是指红、橙、黄、绿、青、蓝、紫等颜色。
关于色彩的更多理论知识这里不做展开,大家自行脑补色相、纯度、明度、对比、性格等等方面的理论知识。
3.2、建立色彩库
作为初级设计师我们对配色的把控不是很稳定,为了提高工作效率,我们需要通过一些理性的方式建立大量的色彩库,应对不同的需求。
下面列举部分个人比较常用的方式供大家参考,色彩收集的方法有很多,我们只需要掌握几个比较适合自己的即可,只要养成习惯并长期坚持,哪怕只运用一种方式,也是收获颇丰的。
a. 通过各类APP采集色彩
体验不同领域的APP,建立不同领域对APP色彩组合的选择,为后期项目设计奠定基础。根据主色进行分类,
如红色系列:网易云音乐、京东、网易严选、网易考拉等等;也可以根据产品气质分类,如文艺、时尚、科技、可爱等等。
b. 通过Dribbble采集色彩
在Dribbble上面,每一幅作品右侧都有该作品的配色文件,发现优秀的作品要养成这种采集配色文件的习惯。
c. 通过摄影作品采集色彩
通过优秀的摄影作品采集色彩也是常用的方法之一。
采集方式:
Photoshop打开图片 → 存储为Web所用格式→ 选择GIF格式 → 颜色选择 8 → 颜色表中双击色块 → 拾色器
d. 通过马赛克采集色彩
借助Photoshop滤镜将图片进行马赛克处理,可以得到优秀作品或者摄影图片的配色组合,特别适合采集同色系的配色。
采集方式:
Photoshop打开图片 → 滤镜 → 像素化→ 马赛克 → 设置单元格大小
e. 从电影中采集色彩
相信大家都喜欢看大片,这部片子之所以能得到大家的追捧,必定有太多值得大家学习的元素。
作为神经敏感的设计师群体,那些刺激到我们神经元的优秀影片场景总是不能错过的。
3.3、提高审美,增强感性判断力
配色能力虽然可以通过一些理性的方法提高,但是也存在一定的感性判断。配色中细微的差异往往都是感性的判断。
我们需要不断的欣赏摄影、绘画、设计作品等等,综合的提高自身的审美,才能不断增强感性的判断力。
作为UI设计师,你不能只关注界面设计,你可以看平面作品、摄影绘画、影视动效,体验手工艺制作、运动娱乐、细心的体验生活中的每一次变化。
3.4、养成分析的习惯
要想拥有良好的配色能力,积累的过程是很重要的。当我们看到优秀的作品,要分析配色之间的对比关系、颜色在色环上的位置关系、HSB数值的关系等等。
只有不断的分析和总结才能逐步形式自己的思维方式,提高不同配色的把控能力。
分析的习惯不只是运用在色彩上面,对于版面布局、文字信息的处理、icon设计风格、间距留白等等方面都需要不断的进行分析总结,掌握优秀作品的规则才能形成自我的标准习惯。
4、图标,从会画到画好之间有多远
图标是APP设计中的点睛之笔,既能辅助文字信息的传达,也能作为信息载体被高效的识别。图标也有一定的界面装饰作用,提高界面整体的美观度。
很多初级设计师都会忽略图标的重要性,也养成去素材网站下载复用的习惯,当这样的习惯养成后便会逐步丧失自己动手的驱动力,什么元素都希望能找到素材下载,工作数年之后很快就遇到了自己的瓶颈期。
设计师对图标设计的态度与把控能力,将会是拉开你与其他设计师差距的因素之一。
图标设计有下载复用 → 动手设计 → 规范设计 → 融入品牌基因等几个阶段,你现在属于哪个阶段呢?
4.1、下载复用
下载复用是很多初入行业的设计师习惯的工作方式之一,由于自身对软件技法、设计技巧、创意能力等方面的不足,无法从创意到标准制图完成一个合格的图标设计。
缺点:图标设计风格与细节处理都完全不统一,这样的习惯一旦养成就会逐步丧失自己的动手能力。
4.2、动手设计
对于大部分有设计追求的设计师,都会意识到图标设计的重要性,也会结合产品特点绘制统一风格的图标。
注意事项:图标设计风格有:线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。
无论我们选择何种表现形式,在进行设计的时候都要保持风格的统一性,由于图标的体量不同,相同尺寸下不同体量的图标视觉平衡不尽相同,例如相同尺寸的正方形会比圆形显大。
因此,我们需要根据图标的体量对其大小做出相应的调整。
4.3、规范设计
当设计师养成自己动手的习惯以后,恭喜你已经进步了,保持这样的习惯。随着软件技法的成熟我们需要严格控制自己的随性,运用标准的规范进行图标设计。
在标准设计的基础上面我们可以发挥自己的创意,也不一定要局限在标准里面,但是总体的本质需要符合设计规范。
4.4、融入品牌基因
图标设计的差异化逐渐变得模糊,随着很多功能的相似性,图标的造型设计也几乎雷同,很多对设计比较讲究的产品,也开始根据自身品牌基因,进行图标定制化。
融入品牌基因的图标设计具有很强的品牌识别性,不仅可以形成独有的视觉差异化,也可以增强用户对产品的记忆。
5、留白,我只想要足够的空间
适当的留白可以让你的界面更有灵性,给信息之间预留更多的空间,也能更好的表达信息之间的层次感,相比拥挤的信息布局更能给人舒适的体验。
当设计师的留白意愿被产品或运营以“希望放更多内容”拒绝时,作为设计师我们可以从不同的方向试着表达自己的观点:
a. 设计出对比稿,把产品需要的方案和你觉得完美的方案进行对比;
b. 筛选出这样处理的优秀案例,以成功的案例说服产品接受你的方案;
c. 进行用户测试,选择一些目标用户进行体验,从用户心声入手设计最佳的方案;
d. 更多沟通的方法有待你去挖掘,最终的目的都是希望做出更好的产品。
设计小结
1. 不同的图片比例反应不同的特征,根据产品特点合理的选择;
2. 设计中保持相同的图片比例,不仅使视觉表达一致,也能给后期运营维护带来便利;
3. 通过提高图片的质量来提高设计作品的美感度,但是也要保证图片的真实还原;
4. 文字排版需要注意信息的层次、信息容量的最大值、巧妙的运用提示符等;
5. 养成不断建立和丰富色彩库的习惯;
6. 提高审美,增强感性判断力,养成分析的习惯;
7. 图标设计经历的几个环节:下载复用 → 动手设计 → 规范设计 → 融入品牌基因;
8. 适当的留白可以给人更加舒适的体验。

更多文章:
制作网页时通常需要在同一网页内跳转常常采用制作什么超链接(简述在网页设计中制作超链接的类型)
2026年9月5日 07:00
开发工具按钮是表格部分数据清零(怎么添加一个Excel批量删除多个单元格内容按钮)
2026年9月5日 05:45
石家庄网站优化全包(石家庄公交第三批线网线优化什么时候开始)
2026年9月5日 05:15
一个卖东西的微信小程序,都需要什么条件怎么制作?我想做一个社区团购的小程序,怎么入手呢,大概需要花多少钱
2026年9月5日 05:00






