web界面设计的原则和总结

2023-11-03

web设计原则和推理:

意符(Signifiers) :一种额外的提示,告诉用户可以采取什么行为,以及应该怎么操作;必须是可感知(eg:视觉、听觉、触觉等)。——摘自《设计心理学 1 》
可供性(Affordance) :也被翻译成『示能』,由 James J. Gibson 提出,定义为物品的特性与决定物品用途的主体能力之间的关系;其中部分可感知(此部分定义为 Perceived Affordance),部分不可感知。——摘自《设计心理学 1 》

一、亲密性

1、纵向间距关系通过大中小三种规格来划分信息层次
2、横向间距关系用栅格布局来排布,保证布局的灵活性

二、对齐

1、文案类对齐
2、表单类对齐
3、数字类对齐(右对齐)

三、对比

1、主次关系对比
2、总分关系对比
3、状态关系对比

四、重复

1、重复元素

五、直接

1、利用页内编辑
2、利用拖放

六、简化交互

1、实时可见
2、悬停可见
3、开关显示
4、交付工具
5、可视区域不等可点击区域

七、足不出户

1、添加覆盖层
2、添加嵌入层
3、虚拟页面
4、流程处理

八、提供邀请

1、静态邀请
2、动态邀请

九、巧用过渡

1、在视图变化时保持上下文
2、解释刚刚发生了什么
3、改善干知性能

十、即时反应

1、查询模式
2、反馈模式

参考框架(ant-design):https://ant.design/docs/spec/principle-cn

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

web界面设计的原则和总结 的相关文章

随机推荐

  • 测试知识点

    你所熟悉的测试用例设计方法都有哪些 请分别以具体的例子来说明这些方法在测试用例设计工作中的应用 答 有黑盒和白盒两种测试种类 黑盒有等价类划分法 边界分析法 因果图法和错误猜测法 白盒有逻辑覆盖法 循环测试路径选择 基本路径测试 例子 在一
  • 线性代数系列讲解第八篇投影及AX=b(无解情况)求近似解及最小二乘法

    一 投影 1 直线投影到直线 我们会将 b vec b b 投影到 p x a vec p x vec a p xa 我们可以利用发现 e vec e e 和 p vec p p
  • 为什么企业需要私有化专属大模型

    编者按 8月29日凌晨 OpenAI在官网宣布 推出企业版ChatGPT ChatGPT Enterprise 前不久 OpenAI又刚刚发布了针对企业的GPT 3 5 Turbo微调功能 因而引发了一场热烈的讨论 是否仍需要私有化的大模型
  • 【整理三】

    1 说说React生命周期中有哪些坑 如何避免 在代码编写中 遇到的坑往往会有两种 在不恰当的时机调用了不合适的代码 在需要调用时 却忘记了调用 getDerivedStateFromProps 容易编写反模式代码 使受控组件与非受控组件区
  • Python代码扫描:新一代 Python Linter工具Ruff -极力推荐-快的原因是Rust写的?

    目录 RUFF概述 特点 安装和使用 应用场景 配置 编辑器集成 PyCharm 外部工具 Ruff的规则 Ruff速度快的几个原因 最后 注意 后续技术分享 第一时间更新 以及更多更及时的技术资讯和学习技术资料 将在公众号CTO Plus
  • python认证考试-PECP-30-02备考

    前言 进入python institue官网查看认证内容和考试 购买考试凭据 PCEP的政策 PCEP的考试大纲 Python作为目前业界最受欢迎的语言 是大部分数据分析相关从业人员的一项必备技能 对于很多0基础的小白 经常会问的问题就是
  • Nature Machine Intelligence :Nature 机器智能

    官网地址 简称 NML
  • saltstack使用指南:saltstack组件之state状态管理

    saltstack之state状态管理 1 状态的概念及如何撰写一条状态 2 状态配置文件的各个要素 3 使用requisites对状态进行排序控制 一 状态的概念及如何撰写一条状态 远程执行模块的过程类似于一段shell脚本或python
  • 推荐Parallels Desktop虚拟机不为人知的优质功能:端口映射

    我在办公环境下 想要接入公司内部网络 必须报备自己的网卡mac地址 以及个人姓名等信息 非常麻烦 我有一个Linux环境运行的程序 需要临时运行在公司内网 为了避开报备网卡mac地址的麻烦 我把程序放到Parallels Desktop虚拟
  • 同步带长度计算器_同步带轮中心距与同步带长度计算

    同步带轮的节圆直径计算 d Pb Z d 节径Pb 齿距 参考附录表1 Z 齿数 圆周率 3 14159 同步带轮实际外圆直径计算 do d 2 d 节径 节顶距 参考附录表1 同步带轮中心距及同步带节线长计算 D 大带轮的节径d 小带轮节
  • dubbo与zookeeper的关系

    dubbo有很多服务的提供者和消费者 这么多的提供者和消费者需要一个管理中心来管理 这个时候用zookeeper来管理即可 这里的registry就是用zookeeper来实现的 Dubbo建议使用Zookeeper作为服务的注册中心 1
  • FPGA设计进阶2--FPGA时序约束

    Reference 1 xilinx FPGA权威设计指南 2 ASIC集成电路设计 3 综合与时序分析的设计约束实用指南 1 时序检查概念 1 1 基本术语 1 发送沿 Launch Edge 指发送数据的源时钟的活动边沿 2 捕获边沿
  • 在VMware中安装CentOS7

    在VMware中安装CentOS7 一 安装CentOS7 二 安装VMwareTools 三 配置共享文件夹 四 解决CentOS无法访问共享文件夹 一 安装CentOS7 CentOS7 3 1611下载地址 https vault c
  • 学习笔记(十六):商用Wi-Fi的功率延迟分布

    2019 Precise Power Delay Profiling with Commodity Wi Fi 读书笔记 功率延迟分布 Power Delay Profile PDP 刻画多径特性 在动作感知方面意义重大 使用Wi Fi设备
  • 【进阶】Java8新特性的理解与应用

    进阶 Java8新特性的理解与应用 前言 Java 8是Java的一个重大版本 是目前企业中使用最广泛的一个版本 它支持函数式编程 新的Stream API 新的日期 API等一系列新特性 掌握Java8的新特性已经是java程序员的标配
  • FileZilla连接FTP报错421的原因及解决办法

    在使用 FileZilla连接 FTP时报如下错误 421 There are too many connections from your internet address 这是由于FTP限制了客户端的 IP访问连接数量 同一时间内来自同
  • java实现数组穷举 非递归

    穷举String数组 可重载其它数据类型数组 param public static void qiongju String a for int i 0 i
  • “npm create vite“ 是如何实现初始化 Vite 项目?

    欢迎关注我的公号 前端我废了 查看更多文章 前言 我们从 vite 的官方文档中看到 可以使用 npm yarn pnpm create 命令来快速初始化一个基于 Vite 的项目 其实很多框架或库都会开发相应的脚手架工具 用于快速初始化项
  • 华为OD机试 - 恢复数字序列(Java)

    题目描述 对于一个连续正整数组成的序列 可以将其拼接成一个字符串 再将字符串里的部分字符打乱顺序 如序列8 9 10 11 12 拼接成的字符串为89101112 打乱一部分字符后得到90811211 原来的正整数10就被拆成了0和1 现给
  • web界面设计的原则和总结

    web设计原则和推理 意符 Signifiers 一种额外的提示 告诉用户可以采取什么行为 以及应该怎么操作 必须是可感知 eg 视觉 听觉 触觉等 摘自 设计心理学 1 可供性 Affordance 也被翻译成 示能 由 James J