设计四大基本原则的全面解析

每每问起设计四大基本原则,无论是蜚荣全球的业内大咖还是初出茅庐的张三李四,都会不约而同地告诉你一个答案:亲密性、对齐、重复、对比

自罗宾·威廉姆斯于《写给大家看的设计书》中提出后,四大基本原则涵盖了品牌、电商、包装、UI等诸多领域,成为众多设计从业者必须掌握的设计原则。

今天将和大家聊聊设计四大基本原则的基本定义以及它在日常生活中的广泛应用,希望对每位正在昂首向前的设计师都有一定帮助。

一、亲密性

亲密性:页面上的相关内容在距离上紧密靠近,形成一个集中的视觉单位,而非是彼此孤立的元素。

代表设计:海报

活动海报、展览海报和电影海报普遍遵循亲密性原则,尽管只是由“背景图+文本”组成的一张高清页面,但设计手法非常考究,主要内容和辅助内容紧密依赖,形成一个非常集中的视觉区域,从而凸显关键信息。

此外,各内容板块之间留白非常充足,自上而下有着强烈的节奏感,弱化了观众浏览时的视觉疲劳,从而准确向观众传达如“活动时间、活动名称、活动地点”等重要信息,是界面排版中最常用也是最基础的设计手法。

4款春日运营海报分享icon-default.png?t=N7T8https://js.design/community?category=detail&type=resource&id=6251c0523231bdd675cf079b&source=csdn&plan=btt0617

二、对齐

对齐:页面上的任意元素需要与页面上的其他元素存在一定的空间参照关系,而非是无规律地分布。

代表设计:书籍

书籍可谓将对齐的美学发挥到极致,密密麻麻的文字经过对齐和翻页处理后,呈现出科学的秩序与体验的和谐,即使手捧数万字的名著,翻阅时也不会眼花缭乱,倍感沉重。常用的对齐方式为:左对齐、居中对齐、右对齐,我们可以根据实际情况选取所需的对齐方式。

刚入行的设计师需要注意一个细节——处理较为复杂的页面时,部分元素之间的物理位置可能会非常遥远,这个时候可以巧妙地使用“分割线”、“图标”、“符号”等辅助元素将不同的对齐进行视觉上的串联,从而让整体的设计更加饱满,富有张力

三、重复

重复:页面上的某一个重要元素反复多次出现,增加了页面整体的条理性和统一性。

代表设计:信息类APP

在信息类APP中有效利用“重复”不仅能提升设计效率,还能降低用户的认知成本,这其实和我们大脑的“懒惰”记忆机制息息相关。研究表明,对于已接触的、重复的事情,大脑有着深刻印象和准确的预期,视觉传达的时间和信息处理消耗的能量更低,处理结果就更快。

使用“图片+矩形+文本”进行卡片式设计搭建界面,不仅大幅度提升了工作效率,而且稍微增加一些投影,还能使重复的内容更有层次感,可谓事倍功半。

免费 APP 资源分享icon-default.png?t=N7T8https://js.design/community?category=detail&type=resource&id=62f11324be36be87fe621217&source=csdn&plan=btt0617

四、对比

对比:页面上的某一个元素的非常重要,需要特别突出,通过增加该元素的差异,从而吸引眼球。

代表设计:促销网站

“对比”旨在强调元素之间的差异,避免元素过于相似而显得页面平庸无奇,致使用户完全不知道主次之差,从而对内容失去兴趣,在各类促销活动中应用非常广泛。

设计师常用“大小、粗细、颜色、层级、光影”的方法进行设计对比,确保重点元素清晰,从而提升用户的点击转化率。

电商促销 H5 界面分享icon-default.png?t=N7T8https://js.design/community?category=detail&type=resource&id=64c754f40369779b440a3e05&source=csdn&plan=btt0617

每一件优秀设计作品中,我们都能看到四大基本原则的应用,这些设计原则并不是完全独立的,而是相互关联,有机结合的,灵活应用四大基本原则能帮助我们更加科学地搭建页面、排版布局,从而提升设计稿的整体层次,避免观众滋生审美疲劳。

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

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

相关文章

xxe漏洞学习

一、什么是xxe漏洞 XXE就是XML外部实体注入,当允许引用外部实体时, XML数据在传输中有可能会被不法分子被修改,如果服务器执行被恶意插入的代码,就可以实现攻击的目的攻击者可以通过构造恶意内容,就可能导致任意文件读…

会展和会议有什么区别

经常能看到很多地方会议会展两者一同出现,会让人误认为是同一个东西,其实不然。会展和会议是两种不同的活动形式,它们在目的、规模、参与者以及内容方面存在一些区别。 1、目的 会展:会展主要是为了展示和推广企业、产品或服务。…

数据驱动制造:EMQX ECP 指标监测功能增强生产透明度

迈向未来的工业生产,需要的不仅是自动化,更是智能化。如果工业企业的管理者能够实时监测每一生产环节的设备运行状态,每一数据点位情况,洞察和优化每一步生产流程,他们将能够做出更精准的决策,提高生产效率…

硕士毕业论文《基于磁纹理的磁化动力学研究》

前言 本文是博主的硕士毕业论文,应该也是“自旋电子学(微磁学)”博客专栏的最后一篇博客,该毕业论文预设排版的PDF版本见下载链接:https://download.csdn.net/download/qq_43572058/89447526。若该博客专栏对读者您的…

SD-WAN在教育行业的应用及优势解析

随着教育领域的数字化转型,网络技术的需求变得愈发迫切。作为一种前沿的网络解决方案,SD-WAN正在为教育行业提供强有力的支持。本文将详细探讨SD-WAN在教育行业的应用,并分析其为教育行业带来的众多优势。 实现多校区高效互联 教育机构通常拥…

低代码、无代码的区别在哪?

低代码和无代码有什么不一样?相信很多人会对这两个概念产生混淆。 顾名思义,低代码开发平台只是减少了编写代码的数量,并不是完全不需要编写代码。 而无代码开发平台是完全不需要编写任何代码,只需要拖拽平台上的功能组件就能够…

Dart 弱引用进阶

前言 村里的老人说:“真正的强者,都是扮猪吃老虎。” 日常开发中经常需要用到弱引用,Dart 语言里也有提供弱引用的接口 WeakReference,我们可以基于它开发更强大的复杂结构。 在前面的文章中,我们用到了一个以弱引用…

Linux——ansible里的变量

在ansible里,变量干嘛用的 本身,ansible就是致力于,用尽可能“通用”的剧本,干所有场合的工作…… ansible里的变量怎么写 字母开头,包括:字母数字下划线 变量怎么定义(声明) 1.…

跟TED演讲学英文:Entertainment is getting an AI upgrade by Kylan Gibbs

Entertainment is getting an AI upgrade Link: https://www.ted.com/talks/kylan_gibbs_entertainment_is_getting_an_ai_upgrade Speaker: Kylan Gibbs Date: April 2024 文章目录 Entertainment is getting an AI upgradeIntroductionVocabularySummaryTranscriptAfterwor…

Centos7.9 安装 clickhouse 24.6.1

总结: [rootlocalhost ~]# curl https://clickhouse.com/ | sh [rootlocalhost ~]# sudo ./clickhouse install [rootlocalhost ~]# sudo clickhouse start [rootlocalhost ~]# clickhouse-client --password 执行过程: [rootlocalhost ~]# curl http…

Ubuntu如何添加用户环境变量

一,简介 在工作中,需要将某个环境变量添加到用户环境变量中,方便使用。 要将 SOF_WORKSPACE~/work/sof 添加到用户的环境变量中,需要将该设置添加到用户的 shell 配置文件中,例如 ~/.bashrc(对于 Bash 用…

【会议征稿】第五届物联网、人工智能与机械自动化国际学术会议 (IoTAIMA 2024,7月19-21)

由浙江工业大学主办,第五届物联网、人工智能与机械自动化国际学术会议 (IoTAIMA 2024) 将于2024年7月19-21日在浙江杭州召开。 会议旨在为从事物联网、人工智能与机械自动化的专家学者、工程技术人员、技术研发人员提供一个共享科研成果和前沿技术,了解学…

20240617通过串口配置索尼SONY的HDMI OUT输出的8530机芯

20240617通过串口配置索尼SONY的HDMI OUT输出的8530机芯 2024/6/17 15:54 缘起:需要在RK3588开发板OK3588-C上使用SONY的8530机芯。特意熟悉8530的串口命令! 目的:需要配置SONY的8530机芯为RGB输出,4K分辨率。 串口波特率&#x…

低功耗蓝牙ble开发(三)——bluez5接口及glib相关函数开发说明

在 D-Bus 编程中,代理对象(proxy object)是一个方便的抽象,用于简化与远程 D-Bus 服务的交互。代理对象代表远程 D-Bus 服务的某个对象,使得你可以像调用本地对象的方法一样调用远程对象的方法、获取属性以及监听信号。…

【数据结构】线性表之《顺序表》超详细实现

顺序表 一.数据结构1.逻辑结构2.物理结构 二.顺序表的分类1.静态顺序表2.动态顺序表 三.顺序表的实现1.创建顺序表2.初始化顺序表3.判断是否扩容4.打印顺序表5.插入操作1.头插2.尾插3.按照下标插入 6.删除操作1.头删2.尾删3.按照下标删除 7.查找数据8.修改数据9.清空顺序表10.销…

【文末附gpt升级秘笈】OpenAI CTO采访揭底:GPT-4是否已触及大模型能力瓶颈?

OpenAI CTO采访揭底:GPT-4是否已触及大模型能力瓶颈? 一、引言 近年来,人工智能(AI)领域的发展日新月异,其中大型语言模型(LLM)如GPT系列更是引领了新一轮的技术浪潮。然而&#x…

从11个视角看全球Rust程序员2/4:深度解读JetBrains最新报告

讲动人的故事,写懂人的代码 5 Rust代码最常使用什么协议与其他代码交互? REST API: 2022年:51%2023年:51%看上去REST API的使用比例挺稳定的,没啥变化。语言互操作性(Language Interop): 2022年:53%2023年:43%语言互操作性的比例在2023年下来了一些,掉了10个百分点…

示例:WPF中DataGrid设置多级分组样式

一、目的&#xff1a;应用CollectionViewSource和GroupStyle设置DataGrid多级分组样式 二、实现 一级分组效果如下 二级分组效果如下 三、环境 VS2022 四、示例 具体实现代码如下 <TabItem Header"DataGrid - 多级分组"><TabItem.Resources><Colle…

ansible-Role角色批量按照node_export节点,并追加信息到Prometheus文件中

文章目录 剧本功能 inventory.yaml文件定义deploy.yaml角色定义node_exporter_lock角色定义任务角色main.yamlnode_exporter_tasks.yml角色触发任务notifyextra_tasks.yml角色prometheus_node_config.j2模板文件 执行命令查看变量 剧本功能 功能1&#xff1a; 批量执行node_ex…

Java数据结构与算法(多重背包)

前言: 多重背包问题&#xff08;Multiple Knapsack Problem, MKP&#xff09;是背包问题的一个变种。在这种问题中&#xff0c;你有多个背包&#xff0c;每个背包都有一定的容量。你需要选择一些物品放入这些背包中&#xff0c;以使放入物品的总价值最大化。每个物品都有一个价…