UI设计常见风格(1):一文读懂九个,教你如何辨识。

Hello,我是大千UI工场,设计风格是我们新开辟的栏目,上次讲了毛玻璃风格、辨识方法、应用场景、运用方法等,很受大家欢迎,本次带来常见的风格及辨识,让大家有个总览,以后会逐个讲解的,有相关需求私聊。

一、什么是设计风格

在UI设计中,设计风格是指在设计过程中采用的一种特定的视觉风格或美学风格。它是通过选择和组合不同的设计元素(如颜色、形状、排版、图标等)来表达特定的情感、传达特定的信息或呈现特定的品牌形象。

设计风格可以根据不同的需求和目标来选择,它可以帮助界面传达特定的情感或氛围,提升用户体验,以及增强品牌形象。不同的设计风格可以通过不同的视觉元素和设计原则来实现,如色彩搭配、线条形状、排版布局等。

二、UI设计中常见的设计风格

UI设计有许多不同的风格,每种风格都有其独特的特点和美学。以下是一些常见的UI设计风格,并提供了一些辨识的方法:

扁平设计(Flat Design)

扁平设计风格以简洁、平面化的界面元素为特点,去除了过多的阴影、渐变和纹理。界面元素通常具有明亮的颜色和简洁的图标。辨识方法:扁平的图标和按钮、明亮的颜色、简洁的排版。

材料设计(Material Design)

材料设计是由Google提出的一种设计风格,强调实体感和层次感。界面元素具有阴影、动画和过渡效果,以及明确的层次结构。辨识方法:阴影和层次感、动画和过渡效果、明确的界面结构。


 

手绘风格(Hand-drawn Style)

手绘风格模仿手绘艺术的效果,给人一种亲切、温暖的感觉。界面元素通常具有不规则的形状和颜色,以及手写字体和插图。辨识方法:不规则的形状和颜色、手写字体和插图。

极简主义(Minimalism)

极简主义风格以简洁、纯粹的设计为特点,强调内容的重要性。界面元素通常具有简洁的线条和排版,以及少量的颜色和图标。辨识方法:简洁的线条和排版、少量的颜色和图标。

渐变设计(Gradient Design)

渐变设计风格使用渐变色作为界面元素的背景或填充,给人一种温暖、柔和的感觉。界面元素通常具有流畅的过渡和渐变效果。辨识方法:渐变色的背景或填充、流畅的过渡和渐变效果。
 

科技风格(High-tech Style)

科技风格以科技感和未来感为特点,界面元素通常具有科技元素和抽象的图形。辨识方法:科技元素和抽象的图形、冷色调和金属质感。

卡通风格(Cartoon Style)

卡通风格以卡通形象和插图为特点,给人一种轻松、活泼的感觉。界面元素通常具有夸张的形状和颜色,以及卡通人物和动物的图案。

拟物化风格(Skeuomorphic Style)

拟物化风格模仿现实世界的物体和材质效果,给人一种真实、有质感的感觉。界面元素通常具有立体的形状和阴影,以及仿真的纹理和光照效果。

中国风(Chinese Style)

中国风是一种特定的设计风格,它以中国传统文化和艺术为灵感,融入了中国的符号、图案、色彩和元素。中国风的设计风格通常具有古典、典雅、优美、富有禅意的特点。

除了这些之外,还有蒸汽波、朋克、磨玻璃、小清新、奢华等风格,下期再介绍。


 

往期回顾:


设计风格:新拟态,一文掌握特征、应用场景、运用方法

UI风格汇:毛玻璃风格风靡的原因解读

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/684585.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java】零基础蓝桥杯算法学习——动态规划例题

例题:2023年第十四届蓝桥杯Java软件开发B组E题 蜗牛 参考解答: 参考代码示例: import java.util.Scanner; public class Main {static int N 100010;static int[] arr new int[N];static int[] a new int[N]; //传送带的起始坐标static …

【实战】一、Jest 前端自动化测试框架基础入门(一) —— 前端要学的测试课 从Jest入门到TDD BDD双实战(一)

文章目录 一、前端要学的测试课1.前端要学的测试2.前端工程化的一部分3.前端自动化测试的例子4.前端为什么需要自动化测试?5.课程涵盖内容6.前置技能7.学习收获 二、Jest 前端自动化测试框架基础入门1. 自动化测试背景及原理前端自动化测试产生的背景及原理 2.前端自…

开什么店最稳定轻松?适合一个人开的实体店推荐

在创业的道路上,很多人都希望找到一种稳定轻松的开店方式。 作为一名资深的鲜奶吧创业者,我将分享我的经验和见解,希望能给那些想开实体店的朋友们一些启示!! 我开鲜奶吧已经有 5 年时间了,目前经营的是鲜…

MIT-BEVFusion系列八--onnx导出1 综述及相机网络导出

目录 综述export-camera.py加载模型加载数据生成需要导出成 onnx 的模块Backbone 模块VTransform 模块 生成 onnx使用 pytorch 原生的伪量化计算方法导出 camera.backbone.onnx导出 camera.vtransform.onnx 综述 bevfusion的各个部分的实现有着鲜明的特点,并且相互…

Harris关键点检测以及SAC-IA粗配准

一、Harris关键点检测 C #include <iostream> #include <pcl/io/pcd_io.h> #include <pcl/point_types.h> #include <pcl/common/io.h> #include <pcl/keypoints/harris_3d.h> #include <pcl/visualization/pcl_visualizer.h> #include …

摸索设计模式的魅力:从策略模式看软件设计的智慧-灵活应对变化的艺术

设计模式专栏&#xff1a;http://t.csdnimg.cn/U54zu 目录 一、案例场景1.1 一坨坨代码实现1.2 存在的问题 二、使用策略模式解决问题2.1 使用策略模式重构代码2.2 克服了问题 三、模式讲解3.1 结构图及说明3.2 实现步骤和注意事项3.3 适用场景 四、优势和局限性4.1 优势4.2 局…

JSP原理简述

JSP动态网页技术&#xff0c;可以定义html&#xff0c;css&#xff0c;js等静态内容&#xff0c;还可以定义java代码等动态内容。 注意导入坐标时&#xff0c;JSP的scope标签是provided&#xff0c;和servlet一样&#xff0c;否则会报错。 JSP本质上就是一个Servlet&#xff0c…

微信小程序的疑惑总结

未解决&#xff1a; 1.storebindings 这里的storebindings是什么 2.空行怎么写&#xff1f; 我用这个<text>\n</text>写&#xff0c;在模拟器上好使&#xff0c;在真机上显示\n 解决方法&#xff1a;在组件里写class类名&#xff0c;wxss里面改高度 已解决&am…

GAN生成对抗性网络

一、GAN原理 出发点&#xff1a;机器学习中生成模型的问题 无监督学习是机器学习和未来人工智能的突破点&#xff0c;生成模型是无监督学习的关键部分 特点&#xff1a; 不需要MCMC或者变分贝叶斯等复杂的手段&#xff0c;只需要在G和D中对应的多层感知机中运行反向传播或者…

NetMizer 日志管理系统 多处前台RCE漏洞复现

0x01 产品简介 NetMizer是提供集成应用交付和应用安全解决方案以实现业务智能网络的优秀全球供应商,为全球企业和运营商提供确保关键业务应用的全面可用性、高性能和完善的安全性的解决方案。 0x02 漏洞概述 NetMizer 日志管理系统position.php、hostdelay.php、等接口处存在…

Android---Jetpack Compose学习006

1. 点击 clickable 修饰符允许应用检测对已应用该修饰符的元素的点击。 示例&#xff1a;点击控件&#xff0c;使得内容发生改变 class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setCo…

比较不相交5点结构的顺序

( A, B )---6*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有6个节点&#xff0c;AB训练集各由6张二值化的图片组成&#xff0c;让差值结构有5个点&#xff0c;收敛误差7e-4&#xff0c;收敛199次&#xff0c;统计迭代次数平均值并排序。 如果行和列可以自由的变换&#xff0c;5个…

Java中的Stack的基本讲解

目录 一、创建栈 二、Stack的一些常用方法 对于栈的基本概念,我就不细说了&#xff0c;后进先出。比如1,2,3,依次进栈&#xff0c;那么出栈就是3&#xff0c;2&#xff0c;1。 一、创建栈 Stack<引用数据类型&#xff0c;基本数据类使用包装类> snew Stack<>();St…

杂谈--spconv导出中onnx的扩展阅读

Onnx 使用 Onnx 介绍 Onnx (Open Neural Network Exchange) 的本质是一种 Protobuf 格式文件&#xff0c;通常看到的 .onnx 文件其实就是通过 Protobuf 序列化储存的文件。onnx-ml.proto 通过 protoc (Protobuf 提供的编译程序) 编译得到 onnx-ml.pb.h 和 onnx-ml.pb.cc 或 on…

Linux第55步_根文件系统第2步_测试使用busybox生成的根文件系统

测试使用busybox生成的根文件系统。测试内容较多&#xff0c;很杂。 1、修改“nfs-kernel-server” 1)、打开终端 输入“sudo vi /etc/default/nfs-kernel-server回车”&#xff0c;打开“nfs-kernel-server”文件。 输入密码“123456回车” 见下图&#xff1a; 2)、在最后…

Filezilla:文件无法传输的问题

问题 解决方法 我发现我站点管理器原本设置的是FTP, 改成了SFTP就可以正常传输 FTP和SFTP 安全通道&#xff1a;FTP不提供安全通道&#xff0c;SFTP提供安全通道。 传输协议&#xff1a;FTP使用TCP/IP协议&#xff0c;SFTP是SSH协议的一部分。 最后由于SFTP使用了加密解密技…

【并发编程】AQS原理

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;并发编程 ⛺️稳中求进&#xff0c;晒太阳 1. 概述 全称是 AbstractQueuedSynchronizer&#xff0c;是阻塞式锁和相关的同步器工具的框架 特点&#xff1a; 用 state 属性来表示资源的状…

用HTML Canvas和JavaScript创建美丽的花朵动画效果

目录 一、程序代码 二、代码原理 三、运行效果 一、程序代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>炫酷花朵</title><style>* {margin: 0;padding: 0;overflow: hidden;bac…

vue中mapState应用场景及代码示例

这篇文章我们讨论 Vue.js 中 mapState 的详细解释、应用场景、示例代码和使用优势。 mapState 详解&#xff1a; mapState 是 Vuex 中的一个辅助函数&#xff0c;用于将状态映射到组件的计算属性或 methods 中。它允许组件更方便地访问和使用 Vuex 存储中的状态。 通过 map…

H5 粒子特效引导页源码

H5 粒子特效引导页源码 源码介绍&#xff1a;一款粒子特效引导页源码&#xff0c;带彩色文字和4个按钮。 下载地址&#xff1a; https://www.changyouzuhao.cn/10222.html