联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

ui设计公司干货文章有哪些?投影知识点是怎样的

Time: 2020-07-28

这是一篇不看会后悔的配色干货!

  普遍意义上的色彩是指什么?

  简单点来说,色彩即颜色,颜色可以分成有彩色和无彩色两大类,看有彩色主要看色相/纯度/明度三个方面的属性,无彩色也就是白色/黑色/各种深浅不同的灰色,也可以说无彩色是饱和度为零的色彩。

ui设计公司干货文章

ui设计公司干货文章

  色相,即可以明确表示颜色色别的名称,比如红橙黄绿蓝靛紫:

  色彩有冷暖之分,我大致用温度的概念标注一下,其中「0」是指中性色,「-0」是指中性偏冷,「+0」是指中性偏暖(当然,这里的温度是我自己为了具体化冷暖的概念而标记的,主要是方便大家理解,所以不用去纠结这个数值准不准确哈哈,你明白他们代表很冷/很热/一般冷/一般热就好了!~)

  明度,就是指色彩的明亮程度(通俗点讲,在某种色彩里添加的白色越多就越明亮,添加的黑色越多就越暗)。

  ui设计公司干货文章?设计流程和配色思路分享

  不管我们做什么方面的设计,设计练习也好,实际项目也好,在设计之前,我们最好是能先明确我们的设计目的是什么,然后确定一个主题,依据这个设计目的和主题,去构思创意,有了创意后再去去探讨具体的落地执行,其中包含了字体(标题文案)的设计排版配色、画面整体的构图和配色、细节优化、氛围渲染等等。

  1. 设计之前先确定主题

  比如关于浪漫的主题,浪漫是有很多种表现形式和配色的,但是有一点是有共通性的,那就是要想打造出浪漫的感觉,背景音乐、色彩搭配和氛围渲染很重要。

  2. 配色之前先构图

  很多人之所以总是说自己不会配色或不管怎么配色都感觉不对劲,其实是因为,搭配颜色这个动作不能为时太早了,你得先把你整个画面的构图和基本框架先敲定了再去考虑配色。

  先构图再配色,先构图再配色,先构图再配色,重要的事情说三遍!~

  因为构图相当于化妆的时候先打好底子,底子不打好,你再怎么化妆都是徒劳的。同理,如果你的构图很乱或者基本型都没出来,你就去考虑配色,很有可能就是你磨半天都设计不出一个满意的结果,这就是很多人磨蹭半天,做出来的设计依旧不好看的很重要的一个原因。

  因为你的设计步骤错了。

  ui设计公司干货文章!一个完整的UI设计流程是怎样的?

  1User Story

  2Functional Map

  3Flow Chart

  4UI Flow

  5Wireframe

  6Mockup

  7Prototype

  使用者要什么? > 从需求中整理出功能 > 用户怎么操作这些功能? > 操作的过程需要哪些页面? > 页面要放什么内容/组件?怎么被操作? > 使用者看到的页面长什么样子?

  1. User Story

  功能怎么来的?从「使用者要什么」或「客户预期使用者想要什么」开始。

  依用户的身份不同,想要的功能也会不同,完成的任务不一样嘛。

  2. Functional Map

  写了 User Story,才会知道有哪些大小功能要做。针对不同使用者的需求,从故事中挑出功能。使用者的身份不同往往影响他们能使用的功能,整理归纳出共通和差异处。

  3. Flow Chart

  当开发者知道使用者想要什么、也有了功能,才有办法思考「用户怎么操作功能完成他的任务或达到目的」。

  UI 设计师常说:「配合用户的习惯与行为来设计操作流程」。就是在这一阶段规划。如果跳过 Flow Chart,只要产品功能复杂起来,你家的 RD 就会抱着头哀嚎了。

  4. UI Flow

  知道用户会怎么操作一项功能时,才有办法规划操作动线。UI Flow 指的是页面与页面之间的操作流程,用户想完成任务会经过多少页面之类。

  5. Wireframe

  有画 Wireframe 不代表工程师就看得懂这要干嘛,光看脸皱成一团的表情你也不知道他是踢到脚指还是吃到酸梅。文字说明才是 Wireframe 的重点,包含触发、回馈、状态变化等等。

  6. Mockup

  视觉稿…照 Grid 和 Guideline 做吧,之后还有切图和标示文件要弄。

  好处是切图和标示文件都有外挂工具可以代劳,甚至设计师只要顾好原始档、切图和标示文件都用 Avocode 或 Zeplin 解决。

  坏处是,如果不太知道技术限制,做出来的东西工程师不能用就算了,他们还白挨设计师的骂。

  7. Prototype

  做 Prototype 的目的通常是测试和验证,不管是给使用者操作看看、观察使用者操作状况做使用者测试;还是工程师套完程序上线前先测看看有没有虫或哪边爆炸了。所以它一定要可以被操作,不能被实际操作是要怎么测试?脑内补完?

  Prototype 要可以被操作!

  Prototype 要可以被操作!

  Prototype 要可以被操作!

  不能被操作的都不是 Prototype。

  Wireframe 可以做 Prototype,低保真原型。

  Mockup 可以做 Prototype,高保真原型。

  切图叫工程师写程序套版做一个,高保真原型。

ui设计公司干货文章

ui设计公司干货文章

  用一篇干货帮你彻底全面掌握「投影」知识点!

  在平面设计中,除了合成设计之外,我们在什么情况下会选择用投影?

  1. 增加识别性

  比如,在颜色比较混乱的背景上添加文字,或者添加图片,为了区分他们之间的主次关系,我们会添加一个投影。

  2. 增加空间感和层次感

  通过投影与主体的位置关系,产生较强的空间感和层次感。

  3. 提升画面格调

  反应产品质感的投影形式,会提升画面的格调,这类比较多的是化妆品与奢侈品。

  4. 增加形式感

  如果你的画面缺少创意性,不妨试试这类投影形式,通常来说它们都是用投影作为画面中的主体,以此来传递出很强的形式感与故事性。

  5. UI设计

  UI 设计中使用投影。

  投影的类型

  1. 常规投影

  常规型投影包含了普通投影,弧形投影,接触投影,弥散投影。

  普通投影

  普通投影就是我们最常见的一个投影形式,它可以用图层样式来设置,它的特点就是在图像的四周都会有点阴影的感觉,让画面与背景形成前后景的关系,就像这里的案例。

  弧形投影

  弧形投影,它的投影是在物体的一侧,像翘起的边缘。

  接触投影

  接触投影,是物体立面与底面的关系,会有一种三维立体的感觉。

  弥散投影

  弥散投影,与普通投影的区别在于,它更有深度,也是现如今比较流行的投影形式。

  2. 长投影

  长投影主要分两种,一种是色块投影,一种是在色块的基础上的渐变投影。

  比较常用在图标的设计,还有海报的设计。

  3. 倒影

  倒影,这类型阴影应该是比较难处理的了,想必大家在做设计的时候,大多数情况会规避倒影这种形式,除非是拍好的照片自带倒影,不然很少有同学愿意触碰这块。因为它比较考验大家对图形的认知能力,以及对透视基础的掌握,之前我们有讲过一篇关于素描知识的文章,在里面介绍过关于物体的基本结构,我们所看到的任何一个物体都有一个结构或者形状,比如立方体、圆柱体、圆锥体、球体。任何一个物体都可以视为这四种几何形状中的一种或几种的组合。那在倒影当中,这些基本形状同样适用。

  4. 悬空投影

  悬空投影,这类投影给人很强的空间感,并且大多数情况,投影都会成为画面中的主角。

  分为三种类型,二维的悬空投影,2.5D 的悬空投影,三维悬空投影。

  5. 创意投影

  创意投影,它不会根据物体本身的形态去表现,而是根据文案和设计构思而产生的很有创意的投影形式,这个主要靠大家发散思维的联想了。最常见的就是电影海报中的投影表现。

  6. 场景合成投影

  一种情况是接近真实的投影,和实际照片是一样的道理,一种情况是类似于创意投影,合成的投影算是这几种投影当中最难的。

  合成中的投影要自己创造一个光源,也就是想象出一个光源,根据光源关系,绘制出投影效果。

  通过以上的内容,我们已经了解了ui设计公司干货文章的情况了,可见,ui设计公司干货文章有很多,这些都是非常专业的知识,大家一定要多多阅读。


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开