1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

超全面的 UI 工作流程指南(三):视觉设计--九分科技

时间:2020-06-18   分类:交互设计    作者:网络   来源:网络整理   点击:188

超全面的 UI 工作流程指南(三):视觉设计--九分科技

copyright 9fen.net

www.9fen.net

编者按:完整的 UI 设计流程到底是怎样的?从需求到产品上线,要经历多少个阶段,每个阶段有哪些应该掌握的基础知识,本次优设独家专题为你从零开始梳理出 UI 工作流程,适合新手阅读学习。

www.9fen.net

往期回顾: 九分网络

本篇为工作流程第三节:视觉设计内容采集来自9fen.net

超全面的 UI 工作流程指南(三):视觉设计--九分科技

内容采集来自9fen.net

本文来自九分网络

情绪板设计

情绪板,简单来说就是由图像,视频和其他视觉元素组成、拼贴在一起的想法和过程,主要目的是讲述项目背后的故事,作为设计方向形式上的参考。同时情绪板也可以在配色方案、视觉风格、质量材质,作为设计指导,帮助设计师提供一些设计方案和指引。

copyright 9fen.net

详细教程:《该怎么运用情绪板,才能让设计作品更有说服力?》

copyright 9fen.net

超全面的 UI 工作流程指南(三):视觉设计--九分科技 www.9fen.net

内容采集来自9fen.net

色彩

配色在视觉设计中所发挥的作用是不言而喻的,我们在设计时对于色彩的制定一般有两种情况。 www.9fen.net

全新品牌设计,了解各种颜色或者色相的气质和情感属性,在具体设计的时候,进一步根据品牌的气质和需求,再在色相的基础上调整明暗和饱和度。

copyright 9fen.net

超全面的 UI 工作流程指南(三):视觉设计--九分科技

www.9fen.net

www.9fen.net

根据甲方/需求方原有产品的色彩来设置,如果不是全新产品,大部分都有一套自己产品的色彩体系,在保持产品的一致性的前提下,后续产品皆沿用原有色彩体系。

copyright 9fen.net

但是,色彩本身的内涵和情绪特质并不是全部。比如一个行业当中,很多企业都使用了蓝色,那么产品继续使用蓝色,可以让用户更快「识别出」产品所属的领域,但是本身也存在让人混淆的风险。如果你想要在视觉上脱颖而出,可以试着使用不同的色彩。 内容采集来自9fen.net

风格

品牌或者产品的设计风格与配色是相辅相成的,依据产品特性与需求,选择合适的设计风格,更利于提升视觉效果。所以我们需要随时了解最新的设计趋势与风格,分清各个设计风格的特点和区别是十分有必要的。以下是设计中常用的设计风格集合。

九分网络

1. 半扁平化设计 本文来自九分网络

关键词:极简、符号化、光影。

copyright 9fen.net

由于具体化设计的影响,界面设计更加趋向于立体化,光和阴影的运用,成为「半扁平化设计」。为了适应现代科技而推崇的扁平化设计仍会存在,但已不再被大量发展并使用。适量渐变阴影的使用,将会在保留其简约风格的基础上,使扁平化设计更加复杂和写实化。

www.9fen.net

超全面的 UI 工作流程指南(三):视觉设计--九分科技

本文来自九分网络

本文来自九分网络

2. 三维渲染风格

内容采集来自9fen.net

关键词:平面立体感,纯色,空间感。

本文来自九分网络

随着 C4D 的流行,三维的表现形式在设计中变得愈演愈烈。不过在后扁平化时代,如何在扁平与立体的形式中间寻找平衡是大家关注的焦点,而三维纯色渲染恰恰是一种很好的尝试。

内容采集来自9fen.net

空间感的布局拓展了画面深度,同时物体纯色系的渲染方式又强化了画面的平面感。设计将干扰人们注意力的因素排除,只留下需要传达的主题部分,令人印象深刻,这样的形式已经在摄影及三维艺术中流行起来,充满仪式感的画面让设计者爱不释手。 九分网络

超全面的 UI 工作流程指南(三):视觉设计--九分科技 本文来自九分网络

九分网络

3. 动画效果 本文来自九分网络

动画效果已经越来越多的以各种形式出现在网页设计上,诸如 gif、SVG、WebGL、CSS 或小视频。 九分网络

超全面的 UI 工作流程指南(三):视觉设计--九分科技 copyright 9fen.net

www.9fen.net

超全面的 UI 工作流程指南(三):视觉设计--九分科技 copyright 9fen.net

copyright 9fen.net

4. 渐变色 本文来自九分网络

关键词:多色、同色系、对比色。

copyright 9fen.net

渐变色是时下最主要的流行趋势之一,始于 2016 且势头至今有增无减。像 Instagram 这样的业界大拿甚至将其 logo 由扁平改成了多颜色渐变。从 logo 到按键和图片,渐变色的潮流已经无处不在。 本文来自九分网络

超全面的 UI 工作流程指南(三):视觉设计--九分科技 www.9fen.net

本文来自九分网络

5. 极简风格

内容采集来自9fen.net

关键词:极简、雅致、留白。

内容采集来自9fen.net

在内容越来越多的前提下,设计师应该减少无用信息的干扰让用户可以快速聚焦到内容本身,这种「少即是多」的设计思路就是我们常说的极简风格。删减与用户任务无关的非功能性元素,只保留重要的信息,减轻用户的认知负荷。

copyright 9fen.net

超全面的 UI 工作流程指南(三):视觉设计--九分科技

九分网络

copyright 9fen.net

6. 波普风格 内容采集来自9fen.net

关键词:波点、夸张、设计感极强。

内容采集来自9fen.net

波普风格主要体现在大众喜闻乐见的人物、事物、事件中。简单来说,它有以下几个特点: www.9fen.net

设计中强调新奇和独特,采用强烈的色彩处理,个性化的配色风格很有感染力。

九分网络

图案是最主要的表现形式。常常带有娱乐、趣味性、诙谐性。

www.9fen.net

难以确定统一的风格,追求各种风格的混合,追求新奇、古怪。

九分网络

通俗大众,设计元素一般来自日常生活中的人物、事物。 www.9fen.net

拼接。

www.9fen.net

超全面的 UI 工作流程指南(三):视觉设计--九分科技 www.9fen.net

copyright 9fen.net

超全面的 UI 工作流程指南(三):视觉设计--九分科技 九分网络

本文来自九分网络

7. 孟菲斯风格 内容采集来自9fen.net

关键词:明快,集合结构,随性。 www.9fen.net

标签: 情绪板 设计流程 工作流程 优设 优设网 优秀网 UI 设计

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----