UI设计都有哪些设计原则,分享三个给你

news2024/10/7 18:31:55

是什么使一个好UI设计容易阅读?是什么让用户轻松浏览?设计师如何创造一个闪亮的UI?任何软件产品的关键部分都是用户界面。

​好的UI设计,用户甚至会忽略它。如果做得不好,就会成为用户使用产品的绊脚石。为了更有效地设计能够满足用户使用的设计UI,大多数设计师都遵循界面设计的原则。本期我们将带您了解UI设计三大原则!

一,美学性

创造视觉美学UI这些小规则通常有以下几点:

1.规则1:光来自天空

阴影是一个宝贵的线索,告诉我们要检查哪些用户界面元素。

当光线从天而降时,它照亮事物的顶部,在其下方投下阴影。

顶部较轻,底部较暗。UI也是如此。

就像我们所有面部特征的底部都有小阴影一样,几乎每一个UI元素的底部有阴影。

我们的屏幕是平的,但是细节的设计会让屏幕上几乎所有的东西看起来都是立体的。

2.规则2:黑白优先。

在添加颜色之前,灰度设计可以简化视觉设计中最复杂的元素,使设计师能够专注于间距和布局元素。

先设计黑白。从更困难的问题开始,让应用程序在各个方面都很漂亮和可用,但是不需要颜色的帮助,最后添加颜色。

这是为了让应用程序看起来“干净”和“简单”简单可靠的方法。在太多的地方有太多的颜色往往很容易搞砸设计。

之后,在灰度站点添加一种颜色可以简单有效地吸引眼球。

通过修改单一色调的饱和度和亮度,可以产生多种颜色——深色、浅色、背景、强调色、引人注目的颜色,但这样不会让人眼花缭乱。

在一种或两种基本色调中使用多种颜色是一种可靠的方法,突出或中和元素,不会混淆设计。

3.规则3:将空白加倍

为了使UI看上去很有设计感,需要增加大量的喘息空间。

空白是构成优秀视觉布局最容易被忽视和未充分利用的元素之一。

很多时候,空白被视为一个空白空间,从而浪费了屏幕空间。

空格对于更好、更简化的布局是必要的,因为它最终会让用户专注于他们打算看到的东西。大量的空白可以使一些混乱的界面看起来简单和吸引人。

4.规则4:为每个屏幕创建一个焦点

为了吸引观众对特定设计元素的注意,强调是一种策略。这可能是内容区域、图像、链接或按钮等。

在大多数设计领域,包括建筑、景观设计和时装设计。

二,清晰

为了通过视觉元素准确地传递给用户信息和导航,不让用户迷失方向,通常有以下规则:

1.规则1:避免不必要的复杂性

始终以尽可能少的步骤和屏幕为目标。

使用底部工作表和模式窗口等覆盖物来压缩数据,并减少应用程序的占用空间。同时,确保以独立和独立的方式组织信息。任务子任务可以结合起来。

重要的是,不要将子任务隐藏在用户想不到的页面上。屏幕及其内容按照清晰合理的分类组织。

同样,完成任务所需的步骤总是减少到最小值。

当只需要一两个操作时,不要让用户经历繁琐的点击障碍。三击规则是最实用的UI其中一个设计原则是指用户应该能够实现任何操作或访问他们需要的任何信息,通过在应用程序中的任何位置点击不超过3次。

最重要的是,永远不要要求用户重新输入他们已经提供的信息。这会让用户扔掉他们的设备,直接放弃使用。

2.规则2:提供清晰的标记

这一原则涉及到直观的布局和清晰的信息标签。即使是第一次使用的用户,浏览应用程序也不应该以任何方式混淆。

相反,探索界面应该是有趣的,并在不知不觉中舒适地学习。

确保页面结构简单,逻辑清晰。

用户永远不应该怀疑他们在软件中的位置,也不应该不断思考如何达到他们想要的位置。

3.规则3:促进视觉清晰度

良好的视觉组织提高了可用性和可读性,使用户能够快速找到他们正在寻找的信息,并更有效地使用界面。

在设计布局时,避免一次在屏幕上显示过多的信息。构建网格系统设计,避免视觉混乱。

应用内容组织的一般原则,如将类似的项目组合在一起,对项目进行编号,并使用标题和提示文本。

这些规则用figma、sketch等软件就能辅助做的不错。

三,隐喻

简化视觉认知,让用户尽快“认识”界面、图形元素符合用户对现实世界的联想,更符合用户对界面的惯性认知。

在UI在设计中使用隐喻可以让用户在现实世界和数字体验之间建立联系。

好的隐喻会与用户脑海中真实世界的过去体验有很强的联系。隐喻常用于熟悉不熟悉的事物。

以桌面上的回收站为例,它包含已删除的文件——但它不是真正的垃圾桶。它是可视化的,可以帮助用户更容易地理解这个概念。

在为UI选择隐喻时,选择能让用户掌握概念模型最精细细节的隐喻。

例如,在询问用于支付处理的信用卡的详细信息时,可以参考现实世界中的实体卡作为例子。

 

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

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

相关文章

数字化车间认定条件

一、申报数字化车间的奖励: 聊城市为了支持企业开展智能制造。对新获认定的国家级智能制造示范工厂、智能制造优秀场景,分别给予最高100万元、50万元一次性奖励;对新获认定的省级智能制造系统解决方案供应商、智能制造标杆企业、智能工厂、数…

因误删文件导致CentOS7开机卡死无法进入图形登录界面

目录 1、背景 2、解决步骤 1、背景 这几天在清理电脑,需要删除虚拟机,为此写下了Linux系统下卸载VMware Workstation软件_nanke_yh的博客-CSDN博客,但是同时怕有残留,自己全局搜索了vm,删除了部分带有vm的文件。删除…

【GridMask】《GridMask Data Augmentation》

arXiv-2020 文章目录1 Background and Motivation2 Related Work3 Advantages / Contributions4 GridMask5 Experiments5.1 Image Classification5.2 Object Detection on COCO Dataset5.3 Semantic Segmentation on Cityscapes5.4 Expand Grid as Regularization6 Conclusion&…

MongoDB之完整入门知识(集合操作、文档基本CRUD操作、文档分页查询、索引等相关命令)

MongoDB完整入门知识一、相关概念1、简介2、体系结构3、安装网址二、MongoDB基本常用命令1、Shell连接(mongo命令)2、选择和创建数据库2.1 选择和创建数据库的语法格式(如果数据库不存在,则自动创建)2.2 查看有权限查看…

SpringBoot与Loki的那些事

因为网上好多都没有通过Loki的API自己实现对日志监控系统,所以我就下定决心自己出一版关于loki与springboot的博文供大家参考,这个可以说是比较实用,很适合中小型企业。因此我酝酿了挺久了,对于loki的研究也比较久,希望…

论文精读《OFT: Orthographic Feature Transform for Monocular 3D Object Detection》

OFT: Orthographic Feature Transform for Monocular 3D Object Detection 文章目录OFT: Orthographic Feature Transform for Monocular 3D Object Detection论文精读摘要(Abstract)1. 介绍(Introduction)2. 相关工作&#xff08…

给开源项目做一个漂亮简洁的版本迭代更新图,生成固定链接复制到介绍中、公众号菜单链接中、博客中等

背景 开源项目的版本迭代与更新经常需要更新迭代文档,但是readme.md没有比较美观一点的效果,所以文本分享一种第三方的方式:用TexSpire的免费在线文档分享功能,手机、PC、Pad都可以适配。 效果预览 使用 第一步:创…

浅谈 async/await 和生成器

浅谈 async/await async/await 是ES8规范新增的,使得以同步方式写的代码异步运行不再是白日梦,进一步让代码逻辑更加清晰。 为什么新增 async/await 下面有这样一个需求:有两个请求,请求 1 的结果是请求 2 的参数,所…

机器学习6——EM算法与高斯混合模型GMM

前置内容 Jensen不等式 高斯混合模型 多元高斯模型 拉格朗日乘子法 主要内容 EM算法(Expectation-Maximization),期望-最大化。 用于保证收敛到MLE(最大似然估计)。主要用于求解包含隐变量的混合模型,主要…

R生成三线表

R生成三线表table1包测试数据生成制作三线表Tableone包加载包 探索数据类型数据整理分类构建Table函数Tableone函数细节主要基于table1 或tableone 包table1包 测试数据生成 datadata.frame(性别sample(c("男","女"), 1000,replaceT),年龄round(rnorm(10…

2021年认证杯SPSSPRO杯数学建模A题(第一阶段)医学图像的配准全过程文档及程序

2021年认证杯SPSSPRO杯数学建模 A题 医学图像的配准 原题再现: 图像的配准是图像处理领域中的一个典型问题和技术难点,其目的在于比较或融合同一对象在不同条件下获取的图像。例如为了更好地综合多种信息来辨识不同组织或病变,医生可能使用…

5年自动化测试,终于进字节跳动了,年薪30w其实也并非触不可及

一些碎碎念 什么都做了,和什么都没做其实是一样的,走出“瞎忙活”的安乐窝,才是避开弯路的最佳路径。希望我的经历能帮助到有需要的朋友。 在测试行业已经混了5个年头了,以前经常听到开发对我说,天天的点点点有意思没…

java计算机毕业设计springboot+vue+elementUI永加乡精准扶贫信息管理系统

项目介绍 系统设计的主要意义在于,一方面,对于网站来讲,系统上线后可以带来很大的便利性,精准扶贫网站管理属于非常细致的管理模式,要求数据量大,计算机管理可以提高精确性,更为便利的就是信息…

NF-κB 信号通路调节细胞因子转录

NF-κB 大家族哺乳动物 NF-κB 家族由五种成员组成:RelA/p65、c-Rel、RelB、p50 (NF-κB1) 和 p52 (NF-κB2),它们可以形成各种异源二聚体或者同源二聚体 (如常见 p50/RelA 异源二聚体),并通过与启动子的 κB 位点结合来激活大量基因。所有 N…

Mysql常用函数

Mysql常用函数 字段拼接(concat) CONCAT() 函数用于将多个字符串连接成一个字符串 格式: select CONCAT(str1,str2,…) from table_name; #查询商品表,返回一列:商品名称(价格)。 SELECT concat(prod_name,(,prod…

【论文阅读】Weakly Supervised Semantic Segmentation using Out-of-Distribution Data

一篇弱监督分割领域的论文,发表在CVPR2022上: 论文标题: Weakly Supervised Semantic Segmentation using Out-of-Distribution Data 作者信息: 代码地址: https://github.com/naver-ai/w-ood Abstract 作者认为…

专精特新小巨人的申报条件

专精特新企业分为市级专精特新、省级专精特新和国家级专精特新。 在2018年,开展了国家第一批专精特新“小巨人” 企业申报工作。为了引导中小企业积极走“专精特新”发展之路,加快新旧动能转 换步伐,提升自主创新能力、加快转型升级&#xf…

软考的网络工程师对就业有用吗?

考证只是一个结果,学会技能才是最重要的。 视工作而言,软考中级网络工程师的性价比还是非常高的,对于从事同类的技术人员,基础扎实一般可以裸考通过。 含金量嘛,计算机专业可以以考代凭,毕竟证书是人社部和…

安装谷歌服务框架2022最新版本22.45.15失败

在这里(谷歌play服务框架下载安装安卓版-谷歌服务框架2022最新版本(Google Play 服务)下载22.45.15官方手机版-蜻蜓手游网 (qt6.com)http://www.qt6.com/XiaZai/155507.html)下载了谷歌服务框架(Google Play 服务),其应用信息为: 包名:com.g…

Mutated 源代码解析 client (一)

Mutated , a C project https://github.com/scslab/mutated usage Main function in the client directory, mutated_synthetic.cc Line 14 parse the user arguments, such as “-h, -w, -c” parse_synthetic is implemented in client\opts_synthetic.cc Here, use th…