UI设计学习—UI设计界面三重构

互联网项目职能包括产品经理、用户体验设计师、交互设计师、UI设计师、视觉设计师、前端工程师、后端工程师、测试工程师等。每个职能岗位对界面设计都有不同的理解。

1.互动视角

交互设计师会从信息架构、概念设计、导航设计、标签设计、表单设计、搜索、筛选、关系、用户、目标、行为、场景、组件、模式等维度去观察和理解界面设计。

2.组件视角

当产品、交互设计师、UI设计师、前端工程师共同构建设计系统语言时，会从逻辑、关系、信息、载体、容器、技术等维度将界面拆分成组件，如按钮、模态、列表、图标、标签、卡片、吐司、弹出等。

3.视觉透视

UI设计师和视觉设计师的视角会集中在字体、颜色、图标、图片、布局、排列、比例、纹理、网格、风格、趋势等方面。在界面设计上。

4.前端视角

前端工程师会从代码的角度去理解接口结构，相关知识点包括框架、容器、盒子原理、样式、标签、形式、模式、绝对定位、适配、响应性、百分比等。

5.界面三维重构的概念。

基于以上视角，现在我带大家从一个新的视角去理解和学习界面设计，这就是界面三重重构。简单来说，就是要从X轴、Y轴、Z轴三个维度来理解和解读界面设计。然而，在模型抽象方面存在困难，如图1所示。模型1解释X轴、Y轴和Z轴的接口、交互和前端，模型2解释X轴、Y轴和Z轴的接口、交互和前端。

模型的抽象不够简洁，重复点多。这种结构非常类似于组件化中的类别和状态。我尝试按元件命名整理平面逻辑图。整理出接口—X，接口—Y，接口—Z，接口—XY，接口—XZ和接口—YZ。因为交互和前端都是基于界面的，所以有界面+交互—X，界面+前端—X，在写关于界面的X轴的时候，如果有交互和前端的知识点，可以在这个基础上写。

我根据平面逻辑图抽象出了一个更简单的模型。可以从界面的X，Y，Z，XY，XZ，YZ输出相关知识点，交互和前端在界面三重配置的基础上进行阐述。