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

news2024/10/6 0:33:56

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

自罗宾·威廉姆斯于《写给大家看的设计书》中提出后,四大基本原则涵盖了品牌、电商、包装、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.coloradmin.cn/o/1832073.html

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

相关文章

【数据结构初阶】--- 堆

文章目录 一、什么是堆?树二叉树完全二叉树堆的分类堆的实现方法 二、堆的操作堆的定义初始化插入数据(包含向上调整详细讲解)向上调整删除堆顶元素(包含向下调整详细讲解)向下调整返回堆顶元素判断堆是否为空销毁 三、…

时间同步概念及常见的时间同步协议NTP PTP

一、前言 前面几篇文章介绍了Linux中的各种各样的时间、时钟源以及时间维护的方式,其中在timekeeper等数据结构中,我们当时略过了NTP相关的字段,为了补充这一段内容,从本篇开始会介绍时间同步的基本概念、及常见的时间同步协议&am…

2024年春季学期《算法分析与设计》练习15

问题 A: 简单递归求和 题目描述 使用递归编写一个程序求如下表达式前n项的计算结果&#xff1a; (n<100) 1 - 3 5 - 7 9 - 11 ...... 输入n&#xff0c;输出表达式的计算结果。 输入 多组输入&#xff0c;每组输入一个n&#xff0c;n<100。 输出 输出表达式的计…

定时器介绍之8253芯片

目录 定时器简介 8253功能介绍 组成 工作原理 相关引脚 启动方法 计数方式 实现 读取计数值 定时器简介 8253功能介绍 内部结构 相关引脚 计数器组成 工作原理 启动方法 计数方式 初始化&#xff1a;写入控制字——>写入计数初值 实现 计数长度选择&#xff1a…

Python 全栈系列254 异步服务与并发调用

说明 发现对于异步(IO)还是太陌生了&#xff0c;熟悉一下。 内容 今天搞了一整天&#xff0c;感觉有一个long story to tell&#xff0c;但是不知道从何说起&#xff0c;哈哈。 异步(协程)需要保证链路上的所有环节都是异步(协程)的&#xff0c;任何一个环节没这么做都会导致…

CSS文本超限后使用省略号代替

方案一&#xff1a; 只显示一行&#xff0c;超限后使用省略号代替 .detail {overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }方案二&#xff1a; 显示多行&#xff0c;到最后一行还没有显示完&#xff0c;则最后一行多出来的部分使用省略号代替。 .detai…

如何通过Appium连接真机调试

1、打开appium&#xff0c;点击启动appium服务器&#xff08;如图1&#xff09; 2、appium启动成功后&#xff0c;点击放大镜启动检查会话&#xff08;如图2&#xff09; 3、填写真机设备信息和APP的package、activity,点击启动会话&#xff08;如图3&#xff09; 4、打开运行A…

C#——字典diction详情

字典 字典: 包含一个key(键)和这个key所以对应的value&#xff08;值&#xff09;&#xff0c;字典是是无序的&#xff0c;key是唯一的&#xff0c;可以根据key获取值。 定义字典: new Diction<key的类型&#xff0c;value的类型>() 方法 添加 var dic new Dictionar…

头歌资源库(8)分发饼干

一、 问题描述 二、算法思想 我们可以使用贪心算法来解决这个问题。首先&#xff0c;我们将孩子们的胃口值和饼干的尺寸进行排序&#xff0c;从小到大。然后&#xff0c;我们从最小的胃口值和最小的饼干尺寸开始匹配。 我们使用两个指针i和j&#xff0c;分别指向孩子们的胃口…

电商客服的得力助手:快捷回复软件

随着技术的进步&#xff0c;传统的人工打字已经逐渐不能满足快节奏的电商服务需求。如今&#xff0c;市面上涌现出众多快捷回复辅助软件&#xff0c;它们以高效率的特点&#xff0c;成为电商客服人员的必备工具。 作为一名拥有五年经验的电商客服&#xff0c;我深刻体会到了这类…

“暗蚊”黑产团伙通过国内下载站传播Mac远控木马攻击活动分析

黑客&网络安全如何 1 概述 近期&#xff0c;安天CERT发现一组利用非官方软件下载站进行投毒和攻击下游用户案例&#xff0c;并深入分析了攻击者在网管运维工具上捆绑植入macOS平台远控木马&#xff0c;利用国内非官方下载站发布&#xff0c;以此取得政企机构内部…

WebSocket实现消息实时通知

参考文档&#xff1a;万字长文&#xff0c;一篇吃透WebSocket&#xff1a;概念、原理、易错常识、动手实践、WebSocket 教程 1 背景 有一个需求&#xff0c;需要实现实时通信的功能&#xff0c;如果有新消息&#xff0c;后端会主动发送请求告知前端有新消息&#xff0c;需要前…

最佳 PDF 合并工具评测

PDF是我们官方文档常用的格式。因此&#xff0c;如今处理 PDF 文件是一项非常重要的技能&#xff0c;例如使用 doc 创建 pdf、将 pdf 文件合并为单个 pdf、将 pdf 拆分为多个 pdf 文件、为 pdf 文件添加密码以进行安全分发等等。获得上述技能的关键部分是找到一个简单但功能强大…

YOLOv10项目-服务器上运行

1、前言 2、运行YOLOv10代码流程&#xff08;超详细&#xff09; &#xff08;3&#xff09;根据下面步骤安装&#xff1a; &#xff08;4&#xff09;数据集和其他配置 &#xff08;5&#xff09;测试训练&#xff08;很详细&#xff09; 1、前言 由于一些事情&#xff0…

0617_QT3

练习&#xff1a; #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//去掉头部this->setWindowFlag(Qt::FramelessWindowHint);//去掉空白部分this->setA…

第二十篇——去除噪音:如何获得更多更准确的信息?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 噪音的原理&#xff0c;换一个维度来看就会很清晰了&#xff1b;通俗易懂…

【秋招突围】2024届秋招笔试-小红书笔试题-第三套-三语言题解(Java/Cpp/Python)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系计划跟新各公司春秋招的笔试题 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f4e7; 清隆这边…

vue2实现一个简易实用的日历(可特殊标记多个日期)

效果如下&#xff1a; <template><div class"calendar"><div class"header"><button click"previousMonth"><</button><h2>{{ currentYear }}-{{ currentMonth }} </h2><button click"nex…

【Kubernetes】k8s 自动伸缩机制—— HPA 部署

一、在K8s中扩缩容分为两种&#xff1a; ●Node层面&#xff1a;对K8s物理节点扩容和缩容&#xff0c;根据业务规模实现物理节点自动扩缩容 ●Pod层面&#xff1a;我们一般会使用Deployment中的Replicas参数&#xff0c;设置多个副本集来保证服务的高可用&#xff0c;但是这是…

vue3 使用 watch 时陷入了个直觉陷阱

场景&#xff1a;在vue中&#xff0c;使用watch 的场景是很常见的。编写业务代码时&#xff0c;需要监听一个或多个值的变化时&#xff0c;经常性会使用watch&#xff0c;日常使用就不提了&#xff0c;直入主题&#xff0c;来一段使用watch的简单代码&#xff0c;有一定前端水平…