转载作品

UI设计入门必学的五大知识点

秋叶枫 发表于   2022-02-21 11:46:57
1845
0
3

一、什么是UI?


UI(User Interface),即用户界面 。UI是指软件的人机交互、操作逻辑、界面美观的整体设计,简而言之,UI设计师就是设计用户界面。一般我们手机上app的界面都是UI设计师需要设计的。大致可分为三个方向:用户研究、交互设计、界面设计。


UI设计的三个分支:

1、研究界面——软件图形设计师Graphic UI Designer,简称GUI。国内目前大部分UI工作者都是从事这个行业。包括网页设计,软件界面,移动端界面设计,每天工作做着各种界面设计。

2、交互设计师,做整个项目的交互流程。

3、用户体验研究师,主要是通过各种方法去了解用户现在需要什么样的体验什么样的界面,从而对这个项目的总体性体验做决策的。


图片.png

二、UI设计要掌握的知识


1、熟练掌握各种工具软件

工具软件是UI学习中非常基础的,在UI设计中我们会经常用到的软件有 PS、AI、AE、ARP、DW、Axure、ID、H5、C4D等等,这些都是一名UI设计必需要掌握运用熟练的软件。

PS:绘制界面设计,图标设计等。

AI:软件主要用来绘制图标,界面等设计。

AE:主要用制作交互动效图

ARP:主要用制作交互原型图。

DW主要做装修页面,活动页面的,是对PS已经完成好的图,进行添加链接及鼠标触碰等效果的


2、理论知识

学习UI必须要掌握的理论知识可以总结如下:

素描、色彩、管理、运营、文案、演讲、作品集、创意、审美、动效、版式设计、规范、切图、心理学、沟通学、了解程序、适配、竞品分析、UE交互逻辑、思维导图、原型图、标准化布局、电商设计、平面构成、立体构成、色彩构成、交互逻辑、思维构图、 拟物化与扁平化设计、产品思维 、代码基础、小程序设计、H5页面制作、专题页设计、IOS设计、规范、Android设计规范 、GUI设计 、WUI设计、 APP设计、 UE用户体验 、审美能力、 UI设计项目设计流程、 原创作品、互联网思维、网络营销等知识!


图片 (2).png

3、能力要求


(1)技术基础

设计师的时间基本上都留给了Photoshop、Axure、 Illustrator,After Effects涂涂修修。娴熟的技法,是完美展现设计作品的必备条件,作为UI设计师,也应当熟练掌握这些常用软件。

稍低一点的要求,是至少能精通其中一款软件,各种操作都已经形成自然反应,其他软件也能通个七八分。

不过,学完这些软件之后,切忌炫技,学到这步,你只是学会了修图,还只在美工的地步,并谈不上设计。因为往往就有一部分人会有错误的认知,一提到学习设计,就想到学习软件,同时埋头在软件一学就是一年两年,有的人甚至更久,可以说是盲目学习,所以这里给大家重新认知一下,设计并不等于软件。


(2)绘图基础

如果你设计师只要去图库网站找一些素材,借助工具进行修饰即可,那就大错特错了!其实这只能锻炼你的借鉴能力,当你的技法娴熟到一定程度,就可以尝试临摹。

通过临摹,一则用来强化技法层面的能力,二来也能提升初学者的创新能力。临摹的内容,可以有两方面选择:一种是系统自带的图标。

比如Mac OX、Windows,或者移动端iOS、Android的原生图标,都是精心打磨过,既能帮助初学者了解平台设计规则,又能在临摹中逐渐巩固常用软件的技术。

另一种则是行业牛人的设计作品,捉摸他们的设计风格、思想和细节,都能加深对设计的认识。


(3)了解各平台设计规则

iOS、Android、WP、Windows、Mac OX各个平台都有自己的设计规则和偏好。

在移动端,连每款机型的分辨率、状态栏高度、导航栏高度、图标尺寸、字体、颜色值都有严格的规定。这些平台的设计规则,在搜索引擎上都能被检索到。

作为UI设计师,这些也是必备的知识,也是要必学的一点。


(4)沟通理解能力

大多数设计师是需要和一个团队一起工作,那么作为UI设计师就需要拥有一个良好的沟通能力。比如经常改图的问题。不是别人说1你就做1,有可能你按照要求做了1,别人依然说你好。比如产品要你换样式,你要弄清楚原因,是不符合当前的风格,又或者产品想突出什么,弄清楚意图才去做设计,事半功倍。且给对方留下喜欢思考,乐于沟通的好印象,这样的员工到哪里都受欢迎。

好的沟通能让整个团队更好地运作,使工作效率提升,保证项目顺利、出色地进行。


(5)审美意识

审美意识要如何培养、提高?唯有日积月累地浏览、学习、思考、联系,大概就是逐渐提升的可能途径吧。


(6)用户体验

从前,除了设计界面的UI设计师之外,互联网公司会专门设置专门的用户研究中心来处理用户体验的种种问题。

但如今多元的趋势下,一个互联网产品的视觉设计,需要懂一点产品、懂一点用户体验,才能更有效的推进合作流程。同时也会培养自己多元化的思维方式(用户研究以缜密的逻辑发展,而UI设计则更加追求审美)。


(7)交互设计

交互和UI是有区别的,UI主要做的是图形用户界面,也可以称为GUI设计师。交互设计主要做处理点事人机互动的界面,交互设计师来参与需要参与到任何与机器打交道的过程中来。

但是在现如今的App中,很少能把UI和交互完全清楚地剥离开来。一个好的产品,需要美观的界面和顺滑的交互,离不开设计师两种能力的相辅相成。

特别是现在,设计趋向扁平化,只要遵循设计规范,交互设计甚至能出了设计稿后直接给开发去实现,单纯UI设计的存在感日益弱化。


图片 (3).png

图片 (4).png

三、UI设计入门必学的五大知识点


1、拟物化和扁平化


在UI设计领域里,设计风格主要分为两个“拟物化”和“扁平化“。“拟物化”也叫“拟真化”,其以iOS(6之前版本)和安卓阵营的锤子为代表。它的显著优点是,细节多、有光影、有质感,很大程度上模拟了现实生活中的物品形状、材质、光影效果。扁平化则是以安卓5.0以及若干国产手机ROM为代表,它强调简单、抽象、符号化,去掉了装饰性设计元素,没有明显质感,弱化光影,最核心的设计方法是几何形状和复色方案。Google在安卓5.0上使用了全新的Material Design设计,让安卓有了跟苹果一样鲜明的、系统化的设计语言。关于两者的好坏,一直没有定论,我认为设计本身没有好坏,只有是否合适。


图片 (5).png

2、原色,补色,复色

原色有三种,包括红色,绿色,蓝色,原色的RGB通道其中两个为0。补色是由两种等量原色组成的叫做补色,也叫做互补色,补色加上另一种原色会呈现白色。由三种原色组成的颜色叫做复色,一般而言复色相对于原色和补色的饱和度要低。复色的视觉感官上相对于前两者没有那么鲜艳,亮度相对高的复色更加讨好人的眼球,我们看到的颜色大部分属于复色。

UI 设计相对于平面设计而言,我们并不需要给用户十分鲜艳抢眼的颜色,这样可能会在长时间使用的过程中产生视觉疲劳,我们更需要的是,给用户一个视觉上相对讨人喜欢,并且能在长时间的使用过程中不会轻易产生视觉疲劳,或者延缓视觉疲劳的产生。复色的饱和度相对低,并且复色通过不同的颜色组合,千变万化,给设计的发挥空间很大。复色方案也是扁平化设计的一个精髓。


图片 (6).png

3、名词解释和单位换算

几乎每个UI设计师都被这类问题坑过,所以现在先给刚入门的你们普及一下。


(1)PPI:Pixels per Inch,中文为“像素每英寸”,也有很多人直接叫“像素密度”,意思就是在设备的1英寸物理长度上可以显示的独立物理像素。但是需要注意的是,这个是一般情况下我们在手机厂商对手机参数标注的单位。


图片 (7).png

(2)PX:Pixel,中文全称”图像元素“,简称”像素“,为显示设备的显示单位,也是我们图像设计的基本单位。我们设计的图像上的1个像素点,在显示设备上占用一个RGB显示单元。


图片 (8).png

(3)PT:Point,中文翻译应该为”点“,这个 pt 并非平面印刷的”磅“单位,而是和 dp、sp一样,是一个相对单位,无关设备物理尺寸。


(4)DP:Device Independent Pixels,中文全称”设备独立像素“(也可译为”设备无关像素“,单词Independent有独立自主或者不相关的意思),也简称 dip。正如其英文字面意思一样,它是一个“无关设备物理尺寸的单位”。


(5)SP:Scaled Pixels,中文全称“可放缩像素”,这个单位的换算方式完全跟 dp 一样,这个单位跟 dp 最大的区别是,它一般用于文字的字号或者与文字相关的地方。


图片 (9).png

4、UI设计的几大原则

UI设计有一些行内默认规则,比如我们下面会介绍到的KISS,UCD原则。

KISS原则是英文“Keep it simple , stupid!”的简写,也就是教你“一切从简”。

KISS 的原则旨在用最简单的设计去达到目的。没有任何多余的装饰,也没有任何多余的步骤,用最简单的方式和最短的操作路径完成目标,这就是 KISSS 原则。

UCD原则是英文“User-centered Design”的缩写,是想表达以用户为中心来做设计。UI设计的最终目的一定是得到大多数用户的认可,为用户提供最合理最好用的设计,好用远比好看重要。好看只是锦上添花,好用才是最终目的。


图片 (10).png

5、设计的尺寸规范

我们手机显示内容的时候并非用像素为单位去显示呈现内容,所以我们设计的时候就应该以 pt、dp 这样的单位去设计。但是随之而来的问题是,设计软件里面的单位一般有 mm、inch、px 这类具体的单位,UI 设计显然不会使用 mm 这类的单位,我们选用的是 px,所以在设计之前我们需要找一个方便pt、dp 与 px 进行换算的尺寸。

不过其实我们如果对单位换算和规范足够熟悉的话,我们使用什么尺寸去设计都是没有问题的,如果你是使用 Sketch 的话,你可以输出任意尺寸的资源。


图片 (11).png



图源:网络

编辑整理:吴禹衡

审核:沈盼、林亚


转自 w万物科技w


没有标签
确定
评论(0)
还没有人评论,快来抢沙发吧!
  • 咨询
    客服
  • 扫码加入QQ群 或搜索QQ群号: 797421367
  • 扫码关注公众号 或微信搜索: cokey游戏特效