互聯(lián)網(wǎng)項目職能包括產(chǎn)品經(jīng)理、用戶體驗設(shè)計師、交互設(shè)計師、UI設(shè)計師、視覺設(shè)計師、前端工程師、后端工程師、測試工程師等。每個職能崗位對界面設(shè)計都有不同的理解。

　　1.互動視角

　　交互設(shè)計師會從信息架構(gòu)、概念設(shè)計、導(dǎo)航設(shè)計、標(biāo)簽設(shè)計、表單設(shè)計、搜索、篩選、關(guān)系、用戶、目標(biāo)、行為、場景、組件、模式等維度去觀察和理解界面設(shè)計。

　　2.組件視角

　　當(dāng)產(chǎn)品、交互設(shè)計師、UI設(shè)計師、前端工程師共同構(gòu)建設(shè)計系統(tǒng)語言時，會從邏輯、關(guān)系、信息、載體、容器、技術(shù)等維度將界面拆分成組件，如按鈕、模態(tài)、列表、圖標(biāo)、標(biāo)簽、卡片、吐司、彈出等。

　　3.視覺透視

　　UI設(shè)計師和視覺設(shè)計師的視角會集中在字體、顏色、圖標(biāo)、圖片、布局、排列、比例、紋理、網(wǎng)格、風(fēng)格、趨勢等方面。在界面設(shè)計上。

　　4.前端視角

　　前端工程師會從代碼的角度去理解接口結(jié)構(gòu)，相關(guān)知識點包括框架、容器、盒子原理、樣式、標(biāo)簽、形式、模式、絕對定位、適配、響應(yīng)性、百分比等。

　　5.界面三維重構(gòu)的概念。

　　基于以上視角，現(xiàn)在我?guī)Т蠹覐囊粋€新的視角去理解和學(xué)習(xí)界面設(shè)計，這就是界面三重重構(gòu)。簡單來說，就是要從X軸、Y軸、Z軸三個維度來理解和解讀界面設(shè)計。然而，在模型抽象方面存在困難，如圖1所示。模型1解釋X軸、Y軸和Z軸的接口、交互和前端，模型2解釋X軸、Y軸和Z軸的接口、交互和前端。

　　模型的抽象不夠簡潔，重復(fù)點多。這種結(jié)構(gòu)非常類似于組件化中的類別和狀態(tài)。我嘗試按元件命名整理平面邏輯圖。整理出接口—X，接口—Y，接口—Z，接口—XY，接口—XZ和接口—YZ。因為交互和前端都是基于界面的，所以有界面+交互—X，界面+前端—X，在寫關(guān)于界面的X軸的時候，如果有交互和前端的知識點，可以在這個基礎(chǔ)上寫。

　　我根據(jù)平面邏輯圖抽象出了一個更簡單的模型?？梢詮慕缑娴腦，Y，Z，XY，XZ，YZ輸出相關(guān)知識點，交互和前端在界面三重配置的基礎(chǔ)上進(jìn)行闡述。