干貨！全新 UI 視角幫你掌握「界面三重構(gòu)」的知識(shí)點(diǎn)

界面三重構(gòu)給設(shè)計(jì)師提供一個(gè)嶄新視角，相關(guān)的知識(shí)、理論、技巧還不完備，設(shè)計(jì)師可以根據(jù)自己的經(jīng)驗(yàn)和閱歷進(jìn)行迭代。

當(dāng)不確定成為常態(tài)，公司的組織架構(gòu)頻繁變動(dòng)，產(chǎn)品不斷迭代，設(shè)計(jì)師需要跟隨用戶(hù)需求、業(yè)務(wù)、產(chǎn)品進(jìn)行技能迭代，UI 設(shè)計(jì)師學(xué)習(xí)數(shù)據(jù)分析、運(yùn)營(yíng)、交互等技能提升自己。這些技能都需要產(chǎn)品界面設(shè)計(jì)為載體，那么界面設(shè)計(jì)中有哪些確定不變的方法和技巧呢？那就需要對(duì)界面有更深入的理解。

如何理解界面設(shè)計(jì)？

互聯(lián)網(wǎng)的項(xiàng)目職能有產(chǎn)品經(jīng)理、用戶(hù)體驗(yàn)設(shè)計(jì)師、交互設(shè)計(jì)師、UI 設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師、前端工程師、后端工程師、測(cè)試工程師等，每個(gè)職能崗位對(duì)界面設(shè)計(jì)的理解深度也各不相同。

1. 交互視角

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

2. 組件化視角

產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI 設(shè)計(jì)師、前端工程師共同搭建設(shè)計(jì)系統(tǒng)語(yǔ)言時(shí)，他們會(huì)從邏輯、關(guān)系、信息、載體、容器、技術(shù)等維度把界面拆分成一個(gè)一個(gè)的組件，比如 Button、Modal、List、Icon、Tab、Card、Toast、Popover 等。

3. 視覺(jué)視角

UI 設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師的視角會(huì)關(guān)注界面設(shè)計(jì)中的字體、色彩、圖標(biāo)、圖片、布局、編排、比例、質(zhì)感、柵格、風(fēng)格、趨勢(shì)等。

4. 前端視角

前端工程師會(huì)從代碼視角理解界面結(jié)構(gòu)，相關(guān)知識(shí)點(diǎn)有框架、容器、盒子原理、樣式、標(biāo)簽、表單、模式、絕對(duì)定位、自適應(yīng)、響應(yīng)式、百分比等。

5. 界面三重構(gòu)構(gòu)思

基于以上視角，現(xiàn)在我會(huì)以一種新的視角帶你去理解和學(xué)習(xí)界面設(shè)計(jì)，它就是界面三重構(gòu)。簡(jiǎn)單說(shuō)就是分別從 X 軸、Y 軸、Z 軸三個(gè)維度去理解和解讀界面設(shè)計(jì)。但是在模型抽象時(shí)遇到了困難，如圖模型一是從界面、交互、前端的 X 軸、Y 軸、Z 軸去解讀，模型二是從 X 軸、Y 軸、Z 軸的界面、交互、前端的去解讀。

模型的抽象不夠簡(jiǎn)潔，有很多重復(fù)的點(diǎn)。這種結(jié)構(gòu)很像組件化中的類(lèi)別和狀態(tài)。我嘗試用組件化命名的方式梳理出平面邏輯圖。梳理出界面—X、界面—Y、界面—Z、界面—XY、界面—XZ、界面—YZ，因?yàn)榻换ズ颓岸硕际墙⒃诮缑嬷系?，所以就有了界?交互—X、界面+前端—X。當(dāng)寫(xiě)到界面X軸相關(guān)知識(shí)時(shí)，如果有交互、前端的知識(shí)點(diǎn)，可以在此基礎(chǔ)上接著寫(xiě)。

根據(jù)平面邏輯圖我抽象出一個(gè)更簡(jiǎn)單的模型?？梢詮慕缑娴?X、Y、Z、XY、XZ、YZ 去輸出相關(guān)知識(shí)點(diǎn)，交互、前端在界面三重構(gòu)的基礎(chǔ)上闡述。

X 軸設(shè)計(jì)

X 軸設(shè)計(jì)中有位置的結(jié)構(gòu)關(guān)系，位置的排序，段落文本行長(zhǎng)的易讀性，交互和前端中的應(yīng)用。

1. 位置

X 軸從位置上可以簡(jiǎn)化為左右、左中右的結(jié)構(gòu)關(guān)系。

左右結(jié)構(gòu)

在左右的結(jié)構(gòu)關(guān)系中，自古就有左為上，人的視線(xiàn)瀏覽順序是從左到右，從上往下。所以重要的信息內(nèi)容可以?xún)?yōu)先放在左邊。在舞臺(tái)劇表演中，重要的角色登場(chǎng)往往也是從左邊進(jìn)場(chǎng)。微信的發(fā)現(xiàn)列表頁(yè)把圖標(biāo)加文字放置左邊，右邊放箭頭指向。

左中右結(jié)構(gòu)

左中右的結(jié)構(gòu)布局讓層級(jí)更加豐富，從而增加層次感。左中右的位置順序是可以被定義的，常見(jiàn)的有左中右對(duì)應(yīng)一二三的位置關(guān)系，也可以對(duì)應(yīng)二一三的位置關(guān)系。這兩種位置關(guān)系分別鞏固了左或中為最重要的地位。

左右并列秩序

我們來(lái)看看 App 界面的底部 Tab 欄的結(jié)構(gòu)，當(dāng)我們隨意打開(kāi)一個(gè) App 時(shí)，你還記得底部 Tab 從左到右的欄目分別是什么呢？可能經(jīng)常使用的 App 我們很熟悉，對(duì)于不熟悉的應(yīng)用可能就不是很了解。但是我們依然可以從中找到規(guī)律，就是第一個(gè)欄目往往是首頁(yè)，最后一個(gè)是我的個(gè)人中心，其他的相對(duì)比較模糊。

由此我們推斷出從左往右的順序并不是一二三四依次遞減，而是一三四二遞減結(jié)束處呈上升趨勢(shì)。這種秩序不但適用于 C 端產(chǎn)品的界面設(shè)計(jì)，同樣也適用于 B 端的界面設(shè)計(jì)。B 端產(chǎn)品界面的導(dǎo)航結(jié)構(gòu)第一個(gè)是首頁(yè)（工作臺(tái)）或最重要的內(nèi)容分類(lèi)，最后一個(gè)是更多或設(shè)置。同樣遵循以上規(guī)則。

右側(cè)位置最重要典型的就是模態(tài)設(shè)計(jì)，在對(duì)話(huà)框設(shè)計(jì)中，確定和取消按鈕往往把最重要的放置在界面的右側(cè)，這時(shí)位置的排序確定為一，取消為二。

2. 易讀性

文字段落編排時(shí)更多的需要考慮段落文本的易讀性，當(dāng)你設(shè)計(jì) C 端產(chǎn)品時(shí)，因?yàn)槠聊怀叽绲脑驎?huì)忽略段落文本的行長(zhǎng)，但在 Web、B 端設(shè)計(jì)中，行長(zhǎng)的定義可以影響到讀者的閱讀效率和體驗(yàn)。美國(guó)芝加哥有學(xué)者做過(guò)一個(gè)試驗(yàn)，人的眼睛在不停地跳動(dòng)，跳動(dòng)的時(shí)候是看不見(jiàn)字的，停下來(lái)的時(shí)候才能看見(jiàn)字，而且每次停下來(lái)只能看六個(gè)字。所以一段文字不要排得太長(zhǎng)，過(guò)長(zhǎng)眼睛在閱讀時(shí)會(huì)很疲勞，在閱讀時(shí)我們更適合閱讀較短的文字。

網(wǎng)頁(yè)新聞詳情頁(yè)面的行長(zhǎng)，我研究了紐約時(shí)報(bào)為 640px、華盛頓郵報(bào) 680px、Medium680px，所以我們?cè)O(shè)計(jì)師可以控制行長(zhǎng)最大在 640—680px。但是西文和漢字還是有區(qū)別的，站在前人的規(guī)則上去學(xué)習(xí)定義規(guī)則更加重要。

3. 交互改變位置秩序

位置的重要秩序其實(shí)是很容易打破的，在界面固定不變時(shí)結(jié)構(gòu)中相對(duì)穩(wěn)定，當(dāng)交互大兄弟來(lái)了，說(shuō)我想嘗試改變改變，如圖把手機(jī)的網(wǎng)易云音樂(lè)和 QQ 音樂(lè)進(jìn)行組合成組，原來(lái)的一二三四的結(jié)構(gòu)就被打破了，變成了一三二的視覺(jué)結(jié)構(gòu)關(guān)系。點(diǎn)開(kāi)組合后，這時(shí)候用戶(hù)大兄弟來(lái)了，網(wǎng)易云音樂(lè)與 QQ 音樂(lè)的排列先后次序取決于產(chǎn)品在用戶(hù)心中的重要程度和操作頻次。因人而異，所以大家一定要帶著客觀的心態(tài)去學(xué)習(xí)，不同視角和不同思考維度都會(huì)有異樣的結(jié)果。

4. 響應(yīng)式與斷點(diǎn)

X 軸設(shè)計(jì)從前端的角度就是響應(yīng)式和斷點(diǎn)，因?yàn)檩d體的容器大小不同，前端代碼主要用 Media 來(lái)打斷點(diǎn)，不同斷點(diǎn)之間會(huì)定義相對(duì)應(yīng)的樣式。內(nèi)容元素按照柵格系統(tǒng)進(jìn)行適配調(diào)整。

Y 軸設(shè)計(jì)

1. 視覺(jué)中心

物理幾何中心是居中的，但是人的視覺(jué)中心是偏上的，有時(shí)候眼見(jiàn)為實(shí)是假的，視錯(cuò)覺(jué)中有大量的案例，在色彩和圖形設(shè)計(jì)中需要視錯(cuò)覺(jué)的矯正。

如下圖 APP 的閃屏頁(yè)的 Logo 居中布局，考慮到有向下的重力和視覺(jué)中心偏上的理論，往往把 Logo 居于物理中心上方。

2. 倒金字塔信息層級(jí)

倒金字塔結(jié)構(gòu)是按重要性遞減順序安排消息的一種結(jié)構(gòu)形式。界面展示的信息層級(jí)多為倒金字塔結(jié)構(gòu)，重要的信息放上面，越往下信息層級(jí)越低。網(wǎng)頁(yè)設(shè)計(jì)中還會(huì)有折線(xiàn)之上的運(yùn)用，以前人們看報(bào)紙是折疊的，但是為了告知讀書(shū)報(bào)紙展示也是有內(nèi)容的，所以折疊設(shè)計(jì)時(shí)看到一些圖片引導(dǎo)讀者打開(kāi)。

Apple 官網(wǎng)的信息層級(jí)也遵循倒金字塔信息層級(jí)，上方 Logo 加導(dǎo)航，中間為最新發(fā)布的產(chǎn)品，下方為歷史發(fā)布產(chǎn)品。信息重要層級(jí)依次遞減。Apple 官網(wǎng)下方露出 iPhone 的照片來(lái)引導(dǎo)用戶(hù)滾動(dòng)下拉瀏覽。

3. 縱向模式

縱向模式是用戶(hù)習(xí)慣自上而下滾動(dòng)來(lái)瀏覽更多信息，當(dāng)用戶(hù)還未確定目標(biāo)信息時(shí)，縱向視覺(jué)流能幫助用戶(hù)在不需要回掃的情況下獲取更多信息。如圖微信 APP 的發(fā)現(xiàn)界面，用戶(hù)會(huì)選擇一列一列快速瀏覽直到找到某一目標(biāo)信息后，再橫向?yàn)g覽細(xì)節(jié)。那么問(wèn)題來(lái)了，上文中提到倒金字塔信息層級(jí)，重要的信息應(yīng)該放置上方，為什么 APP 的 Tab 欄很重要卻放置在界面底部，下文隱喻設(shè)計(jì)中“駕駛艙隱喻”會(huì)講到。

XY 軸設(shè)計(jì)

X 軸與 Y 軸組合后就形成了一個(gè)平面，所以平面設(shè)計(jì)的理論知識(shí)在此次也適用。

1. 盒子原理

當(dāng)我們做界面設(shè)計(jì)時(shí)，為了讓界面的元素統(tǒng)一為一個(gè)整體時(shí)，給他們整體來(lái)個(gè)框框就形成了一個(gè)一個(gè)盒子的樣式，這樣更有利于組合信息。典型的設(shè)計(jì)有卡片、列表、模塊化等。

2. 四角壓邊

在 Dribbble 的作品展示中，由于作品圖片展示比例為 4:3，為了平衡界面中的元素，常常在四個(gè)角放一些小的相關(guān)元素來(lái)平衡畫(huà)面。我們來(lái)看一下 R 神的插畫(huà)作品中大量使用了四角壓邊的設(shè)計(jì)技巧。

運(yùn)用到界面設(shè)計(jì)中最典型的就是卡片設(shè)計(jì)，比如個(gè)人中心、銀行卡、列表頁(yè)面等。如圖銀行卡就采用卡片設(shè)計(jì)，四角放置信息，整體給人簡(jiǎn)潔大氣的感覺(jué)。

四角壓邊在設(shè)計(jì)中是可以靈活運(yùn)用的，可以把四角壓邊變成三角壓邊，兩角壓邊。如圖當(dāng)四角壓邊的 A1、B1 與 A2、B2 位置慢慢移動(dòng)至重合時(shí)，四角壓邊就變成了兩角壓邊，多用于列表頁(yè)。

3. 蹺蹺板原理

四角壓邊的本質(zhì)是蹺蹺板原理，通過(guò)調(diào)整元素讓界面達(dá)到平衡。蹺蹺板原理本質(zhì)是平衡，需要關(guān)注的是中間的一條水平線(xiàn)。微信列表設(shè)計(jì)中就運(yùn)用了這個(gè)原理來(lái)平衡界面。在蘋(píng)果的原生設(shè)計(jì)中列表之間分割線(xiàn)是不包含圖標(biāo)且一直切到最后側(cè)。因?yàn)樽筮叺膱D標(biāo)視覺(jué)重量大，右邊的重量小，但是通過(guò)縮短左側(cè)的杠桿長(zhǎng)度并增加右側(cè)的杠桿長(zhǎng)度來(lái)達(dá)到視覺(jué)平衡。這種設(shè)計(jì)技巧在編排設(shè)計(jì)中會(huì)被大量運(yùn)用。

4. 8 點(diǎn)網(wǎng)格（4 點(diǎn)網(wǎng)格）

8 點(diǎn)網(wǎng)格理論來(lái)源于谷歌 Material Design 的設(shè)計(jì)語(yǔ)言，4 點(diǎn)網(wǎng)格理論來(lái)源于蘋(píng)果 iOS 的設(shè)計(jì)語(yǔ)言。個(gè)人還是更加喜歡 iOS 的 4 點(diǎn)網(wǎng)格，因?yàn)樵訂挝辉叫?，可呈現(xiàn)的方式越多，可解決的問(wèn)題方案也越多。8 點(diǎn)網(wǎng)格可以理解為最小單位，其他使用的單位都為 8 的倍數(shù)。8 點(diǎn)網(wǎng)格多用于 DIV 盒子與盒子之間的間距。圖標(biāo)、頭像等固定尺寸的也可以使用 8 的倍數(shù)。

?

?

蘋(píng)果和谷歌都是在定義產(chǎn)品系統(tǒng)中的度量單位，西方人一直想定義度量這個(gè)問(wèn)題，其中最有名的就是勒·柯布西耶的《模度》，他的理論是以西方人的的比例結(jié)構(gòu)來(lái)定義規(guī)范，并不能適用于全世界更多的人種比如東方人、非洲人。但是蘋(píng)果設(shè)計(jì)團(tuán)隊(duì)發(fā)現(xiàn)世界上所有人類(lèi)的手指觸摸屏幕大小是一致的，最小為 44pt。iOS 定義了人類(lèi)使用觸控屏的基本度量，44pt 也是 4 的倍率，這才是我喜歡 iOS 的 4 點(diǎn)網(wǎng)格的真正原因。

5. 視覺(jué)流引導(dǎo)

讀者在看界面的時(shí)候，眼睛的視線(xiàn)受到畫(huà)面內(nèi)容的吸引，就會(huì)產(chǎn)生一個(gè)視覺(jué)先后的次序，將這些視覺(jué)集中點(diǎn)的先后依次連起來(lái)，就形成了視覺(jué)流導(dǎo)向。 設(shè)計(jì)師經(jīng)常會(huì)考慮版面或界面上的文字是否會(huì)被閱讀，實(shí)際上很多文字都不會(huì)被閱讀，但是可能會(huì)被瀏覽。視覺(jué)眼動(dòng)儀可以檢測(cè)到人們?nèi)绾螢g覽一個(gè)頁(yè)面的，從找到切入點(diǎn)，到了解界面中信息關(guān)注的先后次序，從而調(diào)整界面元素，來(lái)引導(dǎo)用戶(hù)去關(guān)注重要且有用的信息。常用的視覺(jué)流導(dǎo)向有 F 模式、Z 模式、古騰堡圖表法等。

視覺(jué)動(dòng)線(xiàn)技巧

?

?

?

?

F 模式

尼爾森 F 型視覺(jué)模型由 Jakob Nielsen 于 2006 年提出，他指出用戶(hù)在瀏覽界面時(shí)，視線(xiàn)動(dòng)線(xiàn)會(huì)呈現(xiàn)宛如英文字母 F 的形狀，這種視覺(jué)瀏覽模式主要包括以下三個(gè)方面：

1. 讀者的眼睛會(huì)先從頂部開(kāi)始，從左到右水平移動(dòng)，瀏覽的上半部分會(huì)形成一條橫向的運(yùn)動(dòng)軌跡，這就是 F 形狀的第一條橫線(xiàn)。
2. 讀者的目光會(huì)向下移動(dòng)，并再開(kāi)始從左到右觀察，但瀏覽的視覺(jué)動(dòng)線(xiàn)長(zhǎng)度會(huì)相對(duì)短些，這就是形成了 F 形狀的第二條橫線(xiàn)。
3. 讀者從界面左邊的部分進(jìn)行垂直掃描，以較短的長(zhǎng)度向下掃描，此時(shí)讀者的閱讀速度較慢，而且更有條理性和系統(tǒng)性，這樣就形成了 F 形狀的一條豎線(xiàn)。

根據(jù)尼爾森 F 模型，我們可以得出幾個(gè)心理暗示：

1. 讀者在瀏覽界面時(shí)是快速掃視，不會(huì)仔細(xì)閱讀每一個(gè)界面內(nèi)容。
2. 界面的頭兩段文字無(wú)比重要，多用小標(biāo)題、短句引起閱讀者注意。
3. 將重要的內(nèi)容放在最上邊，將重要的信息顯示在標(biāo)題和段落的前部顯示給讀者。

Z 模式

Z 模式是基于用戶(hù)從左到右自上而下的閱讀習(xí)慣，用戶(hù)首先關(guān)注的上半部頁(yè)面的內(nèi)容，依照從頭部的左邊到右邊，再沿著對(duì)角線(xiàn)瀏覽下一部分的中部左到中部右，循環(huán)往復(fù)的瀏覽模式。如圖頭條的文本編排從標(biāo)題從左到右閱讀到文本從左到右閱讀。

視覺(jué)設(shè)計(jì)基礎(chǔ)技巧

?

?

古騰堡圖表法

古登堡圖表法（Gutenberg Diagram）又稱(chēng)對(duì)角線(xiàn)平衡法則（Diagonal Balance），由 14 世紀(jì)西方活字印刷術(shù)的發(fā)明人約翰·古騰堡提出。古登堡圖表將要畫(huà)面顯示的東西分成了四個(gè)象限：

1. 第一視覺(jué)區(qū)(Primary Optical Area)：左上方，讀者首先注意到的地方。
2. 最終視覺(jué)區(qū)(Final Optical Area)：右下方，視覺(jué)流程的終點(diǎn)。
3. 強(qiáng)休息區(qū)(Strong Follow Area)：右上方，較少被注意到。
4. 弱休息區(qū)(Weak Follow Area)：左下方，最少被注意到。

如圖小程序的授權(quán)頁(yè)從 Logo 到允許高亮按鈕就是對(duì)角線(xiàn)平衡構(gòu)圖。

Z 軸設(shè)計(jì)

Z 軸設(shè)計(jì)可分為視覺(jué)度層級(jí)（單界面）、結(jié)構(gòu)層級(jí)（單界面）、產(chǎn)品用戶(hù)流程（多界面）。

1. 視覺(jué)度層級(jí)（單界面）

視覺(jué)度層級(jí)是根據(jù)界面元素的視覺(jué)表現(xiàn)來(lái)進(jìn)行劃分瀏覽的先后次序。界面的視覺(jué)度表現(xiàn)技法有主體與背景、投影、色彩字重字號(hào)等。

主體與背景

界面中使用背景色是讓元素向前進(jìn)，背景色多為灰色且有顏色傾向，偏冷色或暖色。微信界面使用了偏冷色背景，Craft 界面使用了偏暖色背景。當(dāng)背景色為白色時(shí)就需要留白、線(xiàn)條、投影來(lái)區(qū)分層級(jí)。

投影

界面中使用投影可以增加內(nèi)容的視覺(jué)層級(jí)，之前追波流行的彌散投影也是為了增加界面視覺(jué)層級(jí)。谷歌 Material Design 就是運(yùn)用紙張的物理投影來(lái)映射到設(shè)計(jì)系統(tǒng)中。在界面設(shè)計(jì)中使用投影時(shí)要思考這種技巧的保鮮時(shí)長(zhǎng)。

色彩大于字重大于字號(hào)

色彩最典型的就是 App 的消息紅色圓點(diǎn)，紅色的波長(zhǎng)最長(zhǎng)，所以用最突出的紅色來(lái)提醒用戶(hù)有新動(dòng)態(tài)。字重是從面積的大小衡量的，標(biāo)題文字常常加字重來(lái)提升視覺(jué)。在定義組件時(shí)，鼠標(biāo)懸浮、Hover 的各種狀態(tài)就是用顏色來(lái)區(qū)分，目的是讓用戶(hù)操作后有反饋的感知。

2. 結(jié)構(gòu)層級(jí)（單界面）

界面元素中的結(jié)構(gòu)層級(jí)可以分為內(nèi)容層、導(dǎo)航層、遮罩層、彈出層。內(nèi)容層是界面內(nèi)容元素的承載；導(dǎo)航層是位于內(nèi)容之上，位置相對(duì)靜止；遮罩層配合彈出層一起使用，又叫模態(tài)層；彈出層屬于輕量化設(shè)計(jì)，比如消息通知、下拉菜單和加載、報(bào)錯(cuò)等狀態(tài)提醒。

模態(tài)對(duì)話(huà)框

如圖模態(tài)對(duì)話(huà)框是用戶(hù)在完成任務(wù)時(shí)，不希望跳轉(zhuǎn)頁(yè)面而打斷工作流程，而是用 Modal 對(duì)話(huà)框在一個(gè)界面上承載相應(yīng)的操作。對(duì)于信息量不大，容器可展示的操作可用模態(tài)對(duì)話(huà)框。

3. 產(chǎn)品用戶(hù)流程（多界面）

產(chǎn)品的界面設(shè)計(jì)需要從概念到信息分類(lèi)到信息架構(gòu)，目的是方便用戶(hù)快速的搜索、篩選、辨別出有用的信息。交互設(shè)計(jì)需要學(xué)習(xí)辛向陽(yáng)教授的交互設(shè)計(jì)五要素：用戶(hù)、行為、目標(biāo)、場(chǎng)景、媒介。

產(chǎn)品的 Z 軸設(shè)計(jì)其實(shí)是從平面（界面）、空間（層級(jí)）、架構(gòu)（關(guān)系）梳理出結(jié)構(gòu)關(guān)系，但站在產(chǎn)品層面最重要的是信息與用戶(hù)的交互設(shè)計(jì)，關(guān)注用戶(hù)旅程地圖中用戶(hù)流程。用戶(hù)流程需要多界面之間跳轉(zhuǎn)，這就形成了產(chǎn)品的 Z 軸界面設(shè)計(jì)。

什么是用戶(hù)流程

用戶(hù)流程是用戶(hù)從打開(kāi) APP 到完成任務(wù)關(guān)閉 APP 的使用全過(guò)程，包括了用戶(hù)看到什么信息，做了什么事。 疫情期間每天都需要使用隨申辦小程序，用戶(hù)流程是打開(kāi)微信，進(jìn)入到微信首頁(yè)，下拉查看常用小程序，點(diǎn)擊隨申辦，查看隨申辦，退出小程序。

根據(jù)用戶(hù)流程優(yōu)化體驗(yàn)，用戶(hù)流程越短越好，操作流程盡量不超過(guò) 5 步。用戶(hù)流程要顧及頭尾，即用戶(hù)進(jìn)入到一個(gè)新界面會(huì)看到什么信息，用戶(hù)成功完成任務(wù)后會(huì)跳轉(zhuǎn)到哪里，或顯示哪些反饋信息。這些都是最容易被遺忘的接觸點(diǎn)。

如何確定用戶(hù)流程？

基于用戶(hù)的使用場(chǎng)景。以查找朋友圈某個(gè)朋友的信息為例，需要思考用戶(hù)有哪些場(chǎng)景，如果知道誰(shuí)發(fā)的，就會(huì)先通過(guò)找到人，然后進(jìn)入其朋友圈找到信息。如果忘記誰(shuí)發(fā)的呢，那只能憑記憶里在朋友圈慢慢滑動(dòng)，直到找到該信息。

以上從交互設(shè)計(jì)五要素行為和場(chǎng)景對(duì)用戶(hù)流程進(jìn)行分析，還可以從用戶(hù)、目標(biāo)、媒介去思考如何幫用戶(hù)高效的完成任務(wù)。拆解用戶(hù)方法有用戶(hù)畫(huà)像分類(lèi)、北極星指標(biāo)分類(lèi)、用戶(hù)目標(biāo)分類(lèi)、用戶(hù)角色分類(lèi)、利益相關(guān)者等。拆解媒介的方法有競(jìng)品分析、頭腦風(fēng)暴、ABTest、埋點(diǎn)數(shù)據(jù)分析等。

交互設(shè)計(jì)五要素

?

?

XZ 軸設(shè)計(jì)

上文已經(jīng)講了 Z 軸相關(guān)設(shè)計(jì)，為什么還要寫(xiě) XZ 軸、YZ 軸的設(shè)計(jì)呢，從 X、Y、Z、XY、XZ、YZ 更有邏輯性和完整性，也確定存在一小部分的案例可以解析。

1. Banner 輪播圖

Banner 輪播圖除了橫向的 X 軸出場(chǎng)次序，還有 Z 軸點(diǎn)一對(duì)一的當(dāng)前狀態(tài)。移動(dòng)端受容器大小限制多為 Z 軸設(shè)計(jì)，Web 端容器變大可以變成左右的交互設(shè)計(jì)形式。

2. 導(dǎo)航欄

導(dǎo)航欄是 Z 軸的視覺(jué)與交互結(jié)合，當(dāng)前狀態(tài)需要重點(diǎn)突出，視覺(jué)向前進(jìn)，點(diǎn)擊導(dǎo)航欄后底部的橫線(xiàn)會(huì)有動(dòng)效移動(dòng)，可以側(cè)滑導(dǎo)航欄選擇類(lèi)別，這樣效率會(huì)更高；也可以側(cè)滑下方內(nèi)容切換選擇。

3. 列表側(cè)滑刪除

列表側(cè)滑是使用內(nèi)嵌的布局方式，界面設(shè)計(jì)中用戶(hù)習(xí)慣是先查看再操作，當(dāng)容器大小放置不下可先隱藏操作按鈕。QQ 聊天界面?zhèn)然瑑?nèi)容可以引用該內(nèi)容。微信消息列表側(cè)滑出現(xiàn)標(biāo)為未讀、不顯示、刪除操作按鈕。

YZ 軸設(shè)計(jì)

YZ 軸多結(jié)合界面交互一起設(shè)計(jì)，通過(guò)用戶(hù)操作形成 Z 軸信息架構(gòu)的變化。YZ 軸設(shè)計(jì)多用于信息流、鍵盤(pán)輸入等。

1. 頁(yè)面滑動(dòng)

信息流的設(shè)計(jì)多為 Y 軸設(shè)計(jì)，Y 軸急促、緊張的情緒會(huì)讓用戶(hù)不停的刷信息。信息流設(shè)計(jì)中采用相似的界面結(jié)構(gòu)保持統(tǒng)一，比如固定的頭像位置，固定的操作按鈕位置，標(biāo)題文本形式等。微信朋友圈信息流一整塊一整塊的加載提高閱讀效率；而抖音的視頻流是一個(gè)一個(gè)加載，更注重精準(zhǔn)推送和沉浸式的觀看體驗(yàn)。

2. 鍵盤(pán)輸入

鍵盤(pán)輸入也是采用 YZ 軸設(shè)計(jì)方式，不同場(chǎng)景下的鍵盤(pán)輸入交互也有差別，微信聊天界面的鍵盤(pán)輸入框放置在底部，每次調(diào)用鍵盤(pán)組件時(shí)界面會(huì)從下往上移動(dòng)；而朋友圈評(píng)論時(shí)，鍵盤(pán)組件除了從下往上移動(dòng)，還要對(duì)齊到對(duì)應(yīng)評(píng)論的內(nèi)容上。前端的定位技術(shù)會(huì)有所不同。

模型升級(jí)

界面三重構(gòu)模型中的界面可以替換成交互、前端、容器、用戶(hù)、信息等，當(dāng)然也可以替換成桌面端、Web、小程序、APP、B 端設(shè)計(jì)等。這樣就可以把中間的要素抽象成 N，界面三重構(gòu)模型升級(jí)為 N——X軸、Y軸、Z軸，N可以為單一的內(nèi)容比如界面，也可以是N=N+N比如界面加交互一起思考。簡(jiǎn)化的模型更適合微觀層面的細(xì)節(jié)設(shè)計(jì)，并不適合于宏觀視角的分析設(shè)計(jì)。

1. 如何使用該模型？

我們來(lái)舉一個(gè)組件的例子，比如導(dǎo)航設(shè)計(jì)共分為二級(jí)導(dǎo)航，我們常規(guī)會(huì)顯示出一級(jí)導(dǎo)航。一級(jí)導(dǎo)航可以從 X 軸、Y 軸兩個(gè)維度去思考，X 軸的多為橫向全局導(dǎo)航，Y 軸多為側(cè)邊導(dǎo)航欄。當(dāng)交互大兄弟來(lái)顯示二級(jí)導(dǎo)航時(shí)可以平鋪（XY）、上?。╖）、內(nèi)嵌（Z），二級(jí)導(dǎo)航展示方式還需要考慮容器大兄弟的意見(jiàn)，容器夠大就可以選擇平鋪，容器小就展開(kāi)收起的交互模式，展開(kāi)就會(huì)有上浮和內(nèi)嵌的兩種形式。

模型抽象的 N 是隨時(shí)發(fā)生變化，對(duì)應(yīng)的界面設(shè)計(jì)形態(tài)也會(huì)發(fā)生變化，但是 X 軸、Y 軸、Z 軸的方法和設(shè)計(jì)技巧是相對(duì)不變的。只是你知道或不知道，會(huì)用或不會(huì)用的區(qū)別。產(chǎn)品設(shè)計(jì)中常用的兩個(gè)方法是等價(jià)設(shè)計(jì)和同形異構(gòu)。

2. 等價(jià)設(shè)計(jì)

等價(jià)設(shè)計(jì)是幫助用戶(hù)完成任務(wù)的結(jié)果是一致的，但過(guò)程可能不同，又或者是產(chǎn)品的邏輯結(jié)構(gòu)是一致的，但設(shè)計(jì)的外在形式有差別。

如圖京東購(gòu)物車(chē)的數(shù)量添加減少功能是展示出來(lái)的，直接可以添加可減少商品數(shù)量；但是淘寶購(gòu)物車(chē)的數(shù)量是展示結(jié)果，修改商品數(shù)量需要點(diǎn)擊后出現(xiàn)步進(jìn)器組件。這兩個(gè)設(shè)計(jì)形式就是等價(jià)設(shè)計(jì)，等價(jià)設(shè)計(jì)的好壞需要考慮很多因素，用戶(hù)、目標(biāo)、場(chǎng)景、手段、行為、容器、信息關(guān)系、生活方式等。存在即合理，合適最重要。

3. 同形異構(gòu)

同形異構(gòu)是指不同的信息、數(shù)據(jù)類(lèi)型設(shè)計(jì)出相同的外在形式。微信消息列表中也有微信廣告助手、服務(wù)通知、訂閱號(hào)消息、文件傳輸助手、個(gè)人聊天、群聊天等，這些消息的數(shù)據(jù)類(lèi)型、對(duì)象各不相同，可是外在的結(jié)構(gòu)形式是一樣的，這樣做的目的是簡(jiǎn)化、統(tǒng)一，通過(guò)圖標(biāo)和頭像來(lái)區(qū)分人、應(yīng)用、工具的消息差異。

以上總結(jié)的界面三重構(gòu)相關(guān)知識(shí)、理論、技巧都有其使用范圍，那么有沒(méi)有一種設(shè)計(jì)方法可以凌駕于界面三重構(gòu)模型之上呢，答案是肯定的，那就是隱喻設(shè)計(jì)。

隱喻設(shè)計(jì)

什么是隱喻設(shè)計(jì)？我們應(yīng)該怎么去理解它呢？隱喻可以理解為隱含的相似性，它用想象的方式將某一物體與另一物體相聯(lián)系，并把二者的特征、情感等相互結(jié)合轉(zhuǎn)移。

隱喻設(shè)計(jì)是通過(guò)象征、類(lèi)比的手法將復(fù)雜抽象的概念簡(jiǎn)明化、具象化、降低用戶(hù)學(xué)習(xí)使用的成本，為用戶(hù)創(chuàng)造清晰、明了、舒適的操作體驗(yàn)。產(chǎn)品設(shè)計(jì)具體表現(xiàn)在蘋(píng)果的 iOS 操作系統(tǒng)和谷歌的 Material design。

1. iOS 六大設(shè)計(jì)原則之一

iOS 六大設(shè)計(jì)原則：AestheticIntegrity(審美完整性)、Consistency(一致性)、Direct Manipulation(直接操作)、Feedback(反饋)、metaphors(隱喻)、User Control(用戶(hù)控制)。

metaphors(隱喻設(shè)計(jì))當(dāng)一個(gè) app 的虛擬對(duì)象和動(dòng)作都是對(duì)熟悉事物的隱喻時(shí)（不管基于現(xiàn)實(shí)世界還是數(shù)字世界），用戶(hù)學(xué)習(xí)的更快；隱喻設(shè)計(jì)在 iOS 系統(tǒng)中很好的得到體現(xiàn)，因?yàn)橛脩?hù)是直接與屏幕產(chǎn)生物理交互的。用戶(hù)移動(dòng)視圖來(lái)查看更多的內(nèi)容；拖拽內(nèi)容；切換開(kāi)關(guān)、移動(dòng)滑塊并且直接滾動(dòng)來(lái)選取值；甚至可以像翻書(shū)或雜志一樣輕快翻頁(yè)。

關(guān)于隱喻設(shè)計(jì)還可以用另一個(gè)概念來(lái)表達(dá)，那就是心智模型。因?yàn)槿祟?lèi)幾千年的發(fā)展，雖然科技進(jìn)步很快，外部環(huán)境也發(fā)生劇烈變化，但是人類(lèi)的心智進(jìn)步其實(shí)是很慢很慢的。

拓展閱讀

?

?

2. 心智模型

心智模型最早是由蘇格蘭心理學(xué)家蘇珊·凱里在 1943 年提出的，是指在人們心中根深蒂固存在的，影響人們認(rèn)識(shí)世界、解釋世界、面對(duì)世界，以及如何采取行動(dòng)的陳見(jiàn)、假設(shè)和印象。心智模型是一種內(nèi)部表征，但這種表征并不是對(duì)外部世界的完全模擬，具備不正確性和不科學(xué)性等。因?yàn)橛脩?hù)心智模型存在這些不足，所以需要了解其偏差與錯(cuò)誤的來(lái)源，以便今后采取適當(dāng)?shù)拇胧┨岣哂脩?hù)與系統(tǒng)的交互效率。

在產(chǎn)品設(shè)計(jì)的系統(tǒng)領(lǐng)域，心智模型是指人們對(duì)于產(chǎn)品系統(tǒng)的理解，用戶(hù)需要了解這款產(chǎn)品是干嘛的、它有哪些功能、這款產(chǎn)品解決了我什么問(wèn)題、我要如何使用該產(chǎn)品。每個(gè)用戶(hù)將具有不同的思維模式，他們對(duì)產(chǎn)品或網(wǎng)站的進(jìn)一步體驗(yàn)將逐漸改變和調(diào)整其思維模式。

心智模型其實(shí)是通過(guò)學(xué)習(xí)、感悟不斷提升自我認(rèn)知的過(guò)程，還記得我剛開(kāi)始學(xué)習(xí)軟件時(shí)候，如合成軟件 Photoshop、三維軟件 C4d。當(dāng)我第一次接觸這類(lèi)軟件時(shí)，感覺(jué)整個(gè)人摸不著頭腦，太多的概念都不清楚，比如通道、圖層樣式、曲面建模、打燈光、動(dòng)態(tài)圖形等。踏踏實(shí)實(shí)的去學(xué)習(xí)這款軟件是最有效的方式，通過(guò)不斷的試錯(cuò)和總結(jié)，慢慢的得心應(yīng)手，這樣我們對(duì)于軟件的心智模型就會(huì)逐漸形成。

但是有些心智是和我們生活方式、習(xí)慣、文化息息相關(guān)的。日本設(shè)計(jì)師深澤直人就提出了一種叫做無(wú)意識(shí)設(shè)計(jì)的設(shè)計(jì)理念，又稱(chēng)為“直覺(jué)“。其實(shí)在界面設(shè)計(jì)中也存在日常生活與線(xiàn)上產(chǎn)品的映射。所以設(shè)計(jì)師需要有好奇心、有共情、有洞見(jiàn)，才能很好理解設(shè)計(jì)來(lái)源于生活這句話(huà)。

3. XY 情緒

X 軸與 Y 軸的情緒可以從日常生活中找到答案，星巴克、瑞幸的店鋪使用了 X 軸的橫向排列，而在肯德基、麥當(dāng)勞的店面排隊(duì)使用了 Y 軸豎向排列的方式。我們嘗試用抽象思維把它們進(jìn)行圖形化，可以表達(dá)的更加直觀。

星巴克、瑞幸的店鋪使用了 X 軸的橫向排列，用戶(hù)可以看到工作人員不停工作，哪怕需要等待一會(huì)也不會(huì)很壓抑，整個(gè)體驗(yàn)過(guò)程會(huì)給人一種舒適、安逸、閑散。而肯德基、麥當(dāng)勞的店面排隊(duì)使用了 Y 軸豎向排列，會(huì)營(yíng)造一種熱鬧的感覺(jué)，因?yàn)槭强觳托枰焖俚氖圪u(mài)商品就需要給用戶(hù)營(yíng)銷(xiāo)一種緊張急促的感覺(jué)，買(mǎi)完就走的即視感。

通過(guò)對(duì)日常生活和物理世界的映射，設(shè)計(jì)師在產(chǎn)品設(shè)計(jì)時(shí)可以考慮使用 X 軸和 Y 軸的情緒設(shè)計(jì)，比如文本采用橫向排列會(huì)給用戶(hù)帶來(lái)一種平靜、舒適的體驗(yàn)。APP 底部的 Tab 欄橫向排列希望用戶(hù)花更多的時(shí)間瀏覽每個(gè)欄目的內(nèi)容，這時(shí)候內(nèi)容的好壞、吸引度也是重要的衡量指標(biāo)。

在信息流的設(shè)計(jì)中大量采用 Y 軸，因?yàn)?Y 軸緊張、急促的感覺(jué)會(huì)讓用戶(hù)下意識(shí)的快速下滑，比如微信的朋友圈；抖音上滑來(lái)切換視頻；直播互動(dòng)通過(guò)大量評(píng)論來(lái)營(yíng)銷(xiāo)熱鬧氛圍。

4. 隱喻設(shè)計(jì)

駕駛艙隱喻—APP Tab欄

在前文中提到人閱讀瀏覽的順序是從左往右，從上往下的。那么應(yīng)該把重要的東西放置在左邊或者上邊。Tab 欄作為 APP 應(yīng)用的主導(dǎo)航為什么卻放置在界面的底部，這時(shí)候就需要用隱喻設(shè)計(jì)來(lái)解釋了。就好比科學(xué)的盡頭是哲學(xué)，哲學(xué)的盡頭是佛學(xué)一樣。

日常生活中開(kāi)車(chē)、騎車(chē)，手永遠(yuǎn)是在控制方向和操作，而視線(xiàn)前方就是駕駛員需要瀏覽閱讀的內(nèi)容，比如行人、馬路、車(chē)流等。把駕駛艙隱喻映射到產(chǎn)品界面中，底部 Tab 欄是引導(dǎo)用戶(hù)去往哪里，上方動(dòng)態(tài)變化來(lái)滿(mǎn)足不同用戶(hù)對(duì)不同內(nèi)容的需求。

問(wèn)答隱喻—知乎問(wèn)答

在線(xiàn)下學(xué)校的教室里，老師提出問(wèn)題學(xué)生們舉手回答的場(chǎng)景，抽象一層其實(shí)是一個(gè)提問(wèn)者、多個(gè)回答者的邏輯，是一對(duì)多的關(guān)系。知乎問(wèn)答界面就采用了教室的問(wèn)答隱喻設(shè)計(jì)，一個(gè)問(wèn)題多個(gè)回答。

觀看隱喻—B站直播

在電影院看電影時(shí)，屏幕在正前方，很多人共同觀看一個(gè)屏幕。其實(shí)也是一對(duì)多的關(guān)系。B 站的直播界面平臺(tái)，也是數(shù)以萬(wàn)計(jì)的人共同觀看一個(gè)直播，下面的評(píng)論彈幕映射電影院的歡聲笑語(yǔ)。

會(huì)議隱喻—Zoom視頻會(huì)議

協(xié)同辦公領(lǐng)域，在會(huì)議室開(kāi)會(huì)是再尋常不過(guò)了，會(huì)議室開(kāi)會(huì)時(shí)能同時(shí)看到同事的面部表情，每個(gè)同事都可以投屏進(jìn)行共享會(huì)議內(nèi)容。Zoom 的視頻會(huì)議軟件采用了線(xiàn)下會(huì)議隱喻設(shè)計(jì)，Zoom 視頻會(huì)議支持多人視頻討論，每個(gè)人都可以共享屏幕進(jìn)行實(shí)時(shí)分享內(nèi)容。

互聯(lián)網(wǎng)行業(yè)才短短十幾年，但人類(lèi)的日常生活卻已經(jīng)演化了幾千年。好的生活方式和習(xí)慣會(huì)慢慢的保留下來(lái)。當(dāng)設(shè)計(jì)產(chǎn)品時(shí)遇到問(wèn)題沒(méi)有方向時(shí)，不妨停下腳步看看人們?cè)谌粘Ｉ钪惺侨绾芜\(yùn)作？能不能從生活中吸取靈感。

總結(jié)

界面三重構(gòu)給設(shè)計(jì)師提供一個(gè)嶄新視角，相關(guān)的知識(shí)、理論、技巧還不完備。設(shè)計(jì)師可以根據(jù)自己的經(jīng)驗(yàn)和閱歷進(jìn)行迭代。從用戶(hù)體驗(yàn)五要素的視角去看，界面三重構(gòu)算是從結(jié)構(gòu)和表現(xiàn)層進(jìn)行挖掘設(shè)計(jì)的可能性，偏微觀層面的設(shè)計(jì)。在實(shí)際運(yùn)用中需要結(jié)合用戶(hù)、信息、交互、界面、前端、場(chǎng)景、流程等多維度思考。

界面三重構(gòu)的想法起源于 2019 年，2020 年于 Gllue UED 團(tuán)隊(duì)內(nèi)部分享，2021 年于 RDD 內(nèi)部分享，整理制作發(fā)表于 2022 年 6 月。

感謝閱讀，很片面，共勉。