UI设计-色彩、层级、字体、边距(一)

一.色彩:色彩可以影响人的心理与行动,具有不同的象征意义;有冷暖,轻重,软硬等等。

1.色彩情绪:最直观的视觉感受

一个活动的页面所用的颜色必须要与其内容相适应,让人看起来舒服。有时我们会不清楚需要使用什么样的颜色以及如何去将颜色进行搭配,我们可以直接提取该活动或者页面中需要用到的元素来进行提取主要元素进行合理的搭配。

2.色彩储备

我们可以通过该网页或者活动所面对的对象,观察这些群体有什么相同的特性与风格来进行选择。

比如面对的是18-25岁的年轻女性,我们可以采用马卡龙色系来进行搭配;面对文艺有志青年,他是个性张扬的,那么我们可以采用孟菲斯色系

3.渐变色:采用从左至右加深

二.层次:提高查找效率与便捷性,避免误操作

1.布局层次

a)层次优化拆分法:将所需要的元素进行拆分,像文字规范(字号及颜色),间距留白(来增强呼吸感)以及颜色层级

b)文字层次法

2.Z轴层次

a)Z轴层次结构理解:从下到上进行分解与排列

b)凸显性设计:从下到上凸显主要部分

3.间距层次

a)间距留白规范:保持边距的呼吸感12pt 8pt 4pt

b)圆角大小规范:圆角呼吸感8 4 2

*左右留白以及边角分割会使页面变得更加的有层次

4.颜色层次

a)颜色属性

b)图标颜色层次性:如深灰来表示重要内容,浅灰来表示次要内容和分割块等;分割块及投影不能太深,文字内容不能太浅。

相关推荐
weixin_531651818 分钟前
@clack/prompts 命令行终端中构建交互式用户界面
ui
Larry_Yanan1 小时前
Qt多进程(四)QTcpSocket
开发语言·c++·qt·ui
wtrees_松阳4 小时前
【弦断处见真章】:鸿蒙UI三重境之《UIContext》心法探幽
ui·华为·harmonyos
IT古董5 小时前
企业级官网全栈(React·Next.js·Tailwind·Axios·Headless UI·RHF·i18n)实战教程-第四篇:登录与注册系统(核心篇)
javascript·react.js·ui
梦想的旅途26 小时前
基于 UI 驱动(RPA)实现企业微信外部群自动化推送的技术逻辑
ui·自动化·企业微信·rpa
JosieBook7 小时前
【UI设计】智慧政务大屏 UI 设计深度解析:从战略意图到像素级落地
ui·政务
xinyu_Jina1 天前
Info Flow:大规模列表渲染中的UI虚拟化、数据懒-加载与前端性能工程
前端·ui
鼎道开发者联盟2 天前
构建活的界面:AIGUI底板的动态布局
人工智能·ui·ai·aigc·gui
Lan.W2 天前
element UI + vue2 + html实现堆叠条形图 - 横向分段器
前端·ui·html
尤老师FPGA2 天前
使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第四十二讲)
android·java·ui