web界面设计的原则和总结

Posted 2022-11-24 川衡

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