万字干货！全新 UI 视角帮你掌握「界面三重构」的知识点编辑导语：好的界面设计有利

编辑导语：好的界面设计有利于用户更好的了解产品，也能提高用户的使用体验。那如果才能拥有一个好的界面设计呢？本篇文章中，作者分享了使用界面设计需要的一些方法和技巧，感兴趣的小伙伴不妨来看看~

文章图片
当不确定成为常态，公司的组织架构频繁变动，产品不断迭代，设计师需要跟随用户需求、业务、产品进行技能迭代， UI设计师学习数据分析、运营、交互等技能提升自己。
这些技能都需要产品界面设计为载体，那么界面设计中有哪些确定不变的方法和技巧呢？那就需要对界面有更深入的理解。

文章图片
一、如何理解界面设计互联网的项目职能有产品经理、用户体验设计师、交互设计师、UI设计师、视觉设计师、前端工程师、后端工程师、测试工程师等，每个职能岗位对界面设计的理解深度也各不相同。
1.交互视角交互设计师会从信息架构、概念设计、导航设计、标签设计、表单设计、搜索、筛选、关系、用户、目标、行为、场景、组件、模式等维度去观察和理解界面设计。

文章图片
2.组件化视角产品经理、交互设计师、UI设计师、前端工程师共同搭建设计系统语言时，他们会从逻辑、关系、信息、载体、容器、技术等维度把界面拆分成一个一个的组件，比如Button、Modal、List、Icon、Tab、Card、Toast、Popover等。

文章图片
3.视觉视角UI设计师、视觉设计师的视角会关注界面设计中的字体、色彩、图标、图片、布局、编排、比例、质感、栅格、风格、趋势等。

文章图片
4.前端视角前端工程师会从代码视角理解界面结构，相关知识点有框架、容器、盒子原理、样式、标签、表单、模式、绝对定位、自适应、响应式、百分比等。

文章图片
5.界面三重构构思基于以上视角，现在我会以一种新的视角带你去理解和学习界面设计，它就是界面三重构。简单说就是分别从X轴、Y轴、Z轴三个维度去理解和解读界面设计。
但是在模型抽象时遇到了困难，如图模型一是从界面、交互、前端的X轴、Y轴、Z轴去解读，模型二是从X轴、Y轴、Z轴的界面、交互、前端的去解读。

文章图片
模型的抽象不够简洁，有很多重复的点。这种结构很像组件化中的类别和状态。
我尝试用组件化命名的方式梳理出平面逻辑图。梳理出界面—X、界面—Y、界面—Z、界面—XY、界面—XZ、界面—YZ ，因为交互和前端都是建立在界面之上的，所以就有了界面+交互—X、界面+前端—X 。当写到界面X轴相关知识时，如果有交互、前端的知识点，可以在此基础上接着写。

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

文章图片
二、X轴设计X轴设计中有位置的结构关系，位置的排序，段落文本行长的易读性，交互和前端中的应用。