編輯導語：好的界面設計有利于用戶更好的了解産品，也能提高用戶的使用體驗。那如果才能擁有一個好的界面設計呢？本篇文章中，作者分享了使用界面設計需要的一些方法和技巧，感興趣的小夥伴不妨來看看~

當不确定成為常态，公司的組織架構頻繁變動，産品不斷叠代，設計師需要跟随用戶需求、業務、産品進行技能叠代，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軸設計中有位置的結構關系，位置的排序，段落文本行長的易讀性，交互和前端中的應用。

1. 位置

X軸從位置上可以簡化為左右、左中右的結構關系。

（1）左右結構

在左右的結構關系中，自古就有左為上，人的視線浏覽順序是從左到右，從上往下。所以重要的信息内容可以優先放在左邊。

在舞台劇表演中，重要的角色登場往往也是從左邊進場。微信的發現列表頁把圖标加文字放置左邊，右邊放箭頭指向。

（2）左中右結構

左中右的結構布局讓層級更加豐富，從而增加層次感。左中右的位置順序是可以被定義的，常見的有左中右對應一二三的位置關系，也可以對應二一三的位置關系。這兩種位置關系分别鞏固了左或中為最重要的地位。

（3）左右并列秩序

我們來看看App界面的底部Tab欄的結構，當我們随意打開一個App時，你還記得底部Tab從左到右的欄目分别是什麼呢？可能經常使用的App我們很熟悉，對于不熟悉的應用可能就不是很了解。

但是我們依然可以從中找到規律，就是第一個欄目往往是首頁，最後一個是我的個人中心，其他的相對比較模糊。

由此我們推斷出從左往右的順序并不是一二三四依次遞減，而是一三四二遞減結束處呈上升趨勢。這種秩序不但适用于C端産品的界面設計，同樣也适用于B端的界面設計。

B端産品界面的導航結構第一個是首頁（工作台）或最重要的内容分類，最後一個是更多或設置。同樣遵循以上規則。

右側位置重要最典型就是模态設計，在對話框設計中，确定和取消按鈕往往把最重要的放置在界面的右側，這時位置的排序确定為一，取消為二。

2. 易讀性

文字段落編排時更多的需要考慮段落文本的易讀性，當你設計C端産品時，因為屏幕尺寸的原因會忽略段落文本的行長，但在Web、B端設計中，行長的定義可以影響到讀者的閱讀效率和體驗。

美國芝加哥有學者做過一個試驗，人的眼睛是在不停地跳動，在跳動的時候是看不見字的，停下來的時候才能看見字，而且每次停下來隻能看六個字。

所以一段文字不要排得太長，過長眼睛在閱讀時會很疲勞，在閱讀時我們更适合閱讀較短的文字。

網頁新聞詳情頁面的行長，我研究了紐約時報為640px、華盛頓郵報680px、Medium 680px，所以我們設計師可以控制行長最大在640—680px。

但是西文和漢字還是有區别的，站在前人的規則上去學習定義規則更加重要。

3. 交互改變位置秩序

位置的重要秩序其實是很容易打破的，在界面固定不變時結構中相對穩定，當交互大兄弟來了，說我想嘗試改變改變，如圖把手機的網易雲音樂和QQ音樂進行組合成組，原來的一二三四的結構就被打破了，變成了一三二的視覺結構關系。

點開組合後，這時候用戶大兄弟來了，網易雲音樂與QQ音樂的排列先後次序取決于産品在用戶心中的重要程度和操作頻次。

因人而異，所以大家一定要帶着客觀的心态去學習，不同視角和不同思考維度都會有異樣的結果。

4. 響應式與斷點

X軸設計從前端的角度就是響應式和斷點，因為載體的容器大小不同，前端代碼主要用Media來打斷點，不同斷點之間會定義相對應的樣式。内容元素按照栅格系統進行适配調整。

三、Y軸設計

1. 視覺中心

物理幾何中心是居中的，但是人的視覺中心是偏上的，有時候眼見為實是假的，視錯覺中有大量的案例，在色彩和圖形設計中需要視錯覺的矯正。

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

2. 倒金字塔信息層級

倒金字塔結構是按重要性遞減順序安排消息的一種結構形式。界面展示的信息層級多為倒金字塔結構，重要的信息放上面，越往下信息層級越低。

網頁設計中還會有折線之上的運用，以前人們看報紙是折疊的，但是為了告知讀書報紙展示也是有内容的，所以折疊設計時看到一些圖片引導讀者打開。

Apple官網的信息層級也遵循倒金字塔信息層級，上方Logo加導航，中間為最新發布的産品，下方為曆史發布産品。信息重要層級依次遞減。

Apple官網下方露出iPhone的照片來引導用戶滾動下拉浏覽。

3. 縱向模式

縱向模式是用戶習慣自上而下滾動來浏覽更多信息，當用戶還未确定目标信息時，縱向視覺流能幫助用戶在不需要回掃的情況下獲取更多信息。

如圖微信APP的發現界面，用戶會選擇一列一列快速浏覽直到找到某一目标信息後，再橫向浏覽細節。

那麼問題來了，上文中提到倒金字塔信息層級，重要的信息應該放置上方，為什麼APP的Tab欄很重要卻放置在界面底部，下文隐喻設計中“駕駛艙隐喻”會講到。

四、XY軸設計

X軸與Y軸組合後就形成了一個平面，所以平面設計的理論知識在此次也适用。

1. 盒子原理

當我們做界面設計時，為了讓界面的元素統一為一個整體時，給他們整體來個框框就形成了一個一個盒子的樣式，這樣更有利于組合信息。典型的設計有卡片、列表、模塊化等。

2. 四角壓邊

在Dribbble的作品展示中，由于作品圖片展示比例為4:3，為了平衡界面中的元素，常常在四個角放一些小的相關元素來平衡畫面。我們來看一下R神的插畫作品中大量使用了四角壓邊的設計技巧。

運用到界面設計中最典型的就是卡片設計，比如個人中心、銀行卡、列表頁面等。如圖銀行卡就采用卡片設計，四角放置信息，整體給人簡潔大氣的感覺。

四角壓邊在設計中是可以靈活運用的，可以把四角壓邊變成三角壓邊，兩角壓邊。

如圖當四角壓邊的A1、B1與A2、B2位置慢慢移動至重合時，四角壓邊就變成了兩角壓邊，多用于列表頁。

3. 跷跷闆原理

四角壓邊的本質是跷跷闆原理，通過調整元素讓界面達到平衡。

跷跷闆原理本質是平衡，需要關注的是中間的一條水平線。微信列表設計中就運用了這個原理來平衡界面。

在蘋果的原生設計中列表之間分割線是不包含圖标且一直切到最後側。因為左邊的圖标視覺重量大，右邊的重量小，但是通過縮短左側的杠杆長度并增加右側的杠杆長度來達到視覺平衡。這種設計技巧在編排設計會被大量運用。

4. 8點網格（4點網格）

8點網格理論來源于谷歌Material Design的設計語言，4點網格理論來源于蘋果iOS的設計語言。

個人還是更加喜歡iOS的4點網格，因為原子單位越小，可呈現的方式越多，可解決的問題方案也越多。

8點網格可以理解為最小單位，其他使用的單位都為8的倍數。8點網格多用于DIV盒子與盒子之間的間距。圖标、頭像等固定尺寸的也可以使用8的倍數。

蘋果和谷歌都是在定義産品系統中的度量單位，西方人一直想定義度量這個問題，其中最有名的就是勒·柯布西耶的《模度》，他的理論是以西方人的的比例結構來定義規範，并不能适用于全世界更多的人種比如東方人、非洲人。

但是蘋果設計團隊發現世界上所有人類的手指觸摸屏幕大小是一緻的，最小為44pt。iOS定義了人類使用觸控屏的基本度量，44pt也是4的倍率，這才是我喜歡iOS的4點網格的真正原因。

5. 視覺流引導

讀者在看界面的時候，眼睛的視線受到畫面内容的吸引，就會産生一個視覺先後的次序，将這些視覺集中點的先後依次連起來，就形成了視覺流導向。

設計師經常會考慮版面或界面上的文字是否會被閱讀，實際上很多文字都不會被閱讀，但是可能會被浏覽。

視覺眼動儀可以檢測到人們如何浏覽一個頁面的，從找到切入點，到了解界面中信息關注的先後次序，從而調整界面元素，來引導用戶去關注重要且有用的信息。常用的視覺流導向有F模式、Z模式、古騰堡圖表法等。

（1）F模式

尼爾森F型視覺模型由Jakob Nielsen于2006年提出，他指出用戶在浏覽界面時，視線動線會呈現宛如英文字母F的形狀，這種視覺浏覽模式主要包括以下三個方面：

1. 讀者的眼睛會先從頂部開始，從左到右水平移動，浏覽的上半部分會形成一條橫向的運動軌迹，這就是F形狀的第一條橫線。
2. 讀者的目光會向下移動，并再開始從左到右觀察，但浏覽的視覺動線長度會相對短些，這就是形成了F形狀的第二條橫線。
3. 讀者從界面左邊的部分進行垂直掃描，以較短的長度向下掃描，此時讀者的閱讀速度較慢，而且更有條理性和系統性，這樣就形成了F形狀的一條豎線。

根據尼爾森F模型，我們可以得出幾個心理暗示：

1. 讀者在浏覽界面時是快速掃視，不會仔細閱讀每一個界面内容。
2. 界面的頭兩段文字無比重要，多用小标題、短句引起閱讀者注意。
3. 将重要的内容放在最上邊，将重要的信息顯示在标題和段落的前部顯示給讀者。

（2）Z模式

Z模式是基于用戶從左到右自上而下的閱讀習慣，用戶首先關注的上半部頁面的内容，依照從頭部的左邊到右邊，再沿着對角線浏覽下一部分的中部左到中部右，循環往複的浏覽模式。如圖頭條的文本編排從标題從左到右閱讀到文本從左到右閱讀。

（3）古騰堡圖表法

古登堡圖表法（Gutenberg Diagram）又稱對角線平衡法則（Diagonal Balance），由14世紀西方活字印刷術的發明人約翰·古騰堡提出。古登堡圖表将要畫面顯示的東西分成了四個象限：

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

如圖小程序的授權頁從Logo到允許高亮按鈕就是對角線平衡構圖。

五、Z軸設計

Z軸設計可分為視覺度層級（單界面）、結構層級（單界面）、産品用戶流程（多界面）。

1. 視覺度層級（單界面）

視覺度層級是根據界面元素的視覺表現來進行劃分浏覽的先後次序。界面的視覺度表現技法有主體與背景、投影、色彩字重字号等。

（1）主體與背景

界面中使用背景色是讓元素向前進，背景色多為灰色且有顔色傾向，偏冷色或暖色。

微信界面使用了偏冷色背景，Craft界面使用了偏暖色背景。當背景色為白色時就需要留白、線條、投影來區分層級。

（2）投影

界面中使用投影可以增加内容的視覺層級，之前追波流行的彌散投影也是為了增加界面視覺層級。

谷歌Material Design就是運用紙張的物理投影來映射到設計系統中。在界面設計中使用投影時要思考這種技巧的保鮮時長。

（3）色彩大于字重大于字号

色彩最典型的就是App的消息紅色圓點，紅色的波長最長，所以用最突出的紅色來提醒用戶有新動态。

字重是從面積的大小衡量的，标題文字常常加字重來提升視覺。

在定義組件時，鼠标懸浮、Hover的各種狀态就是用顔色來區分，目的是讓用戶操作後有反饋的感知。

2. 結構層級（單界面）

界面元素中的結構層級可以分為内容層、導航層、遮罩層、彈出層。内容層是界面内容元素的承載；導航層是位于内容之上，位置相對靜止；遮罩層配合彈出層一起使用，又叫模态層；彈出層屬于輕量化設計，比如消息通知、下拉菜單和加載、報錯等狀态提醒。

（1）模态對話框

如圖模态對話框是用戶在完成任務時，不希望跳轉頁面而打斷工作流程，而是用Modal對話框在一個界面上承載相應的操作。

對于信息量不大，容器可展示的操作可用模态對話框。

3. 産品用戶流程（多界面）

産品的界面設計需要從概念到信息分類到信息架構，目的是方便用戶快速的搜索、篩選、辨别出有用的信息。

交互設計需要學習辛向陽教授的交互設計五要素：用戶、行為、目标、場景、媒介。

産品的Z軸設計其實是從平面（界面）、空間（層級）、架構（關系）梳理出結構關系，但站在産品層面最重要的是信息與用戶的交互設計，關注用戶旅程地圖中用戶流程。

用戶流程需要多界面之間跳轉，這就形成了産品的Z軸界面設計。

（1）什麼是用戶流程

用戶流程是用戶從打開APP到完成任務關閉APP的使用全過程，包括了用戶看到什麼信息，做了什麼事。

疫情期間每天都需要使用随申辦小程序，用戶流程是打開微信，進入到微信首頁，下拉查看常用小程序，點擊随申辦，查看随申辦，退出小程序。

根據用戶流程優化體驗，用戶流程越短越好，操作流程盡量不超過5步。

用戶流程要顧及頭尾，即用戶進入到一個新界面會看到什麼信息，用戶成功完成任務後會跳轉到哪裡，或顯示哪些反饋信息。這些都是最容易被遺忘的接觸點。

（2）如何确定用戶流程

基于用戶的使用場景。以小水查找朋友圈某個朋友的信息為例，需要思考用戶有哪些場景，如果知道誰發的，就會先通過找到人，然後進入其朋友圈找到信息。

如果忘記誰發的呢，那隻能憑記憶裡在朋友圈慢慢滑動，直到找到該信息。

以上從交互設計五要素行為和場景對用戶流程進行分析，還可以從用戶、目标、媒介去思考如何幫用戶高效的完成任務。

拆解用戶方法有用戶畫像分類、北極星指标分類、用戶目标分類、用戶角色分類、利益相關者等。

拆解媒介的方法有競品分析、頭腦風暴、ABTest、埋點數據分析等。

六、XZ軸設計

上文已經講了Z軸相關設計，為什麼還要寫XZ軸、YZ軸的設計呢，從X、Y、Z、XY、XZ、YZ更有邏輯性和完整性，也确定存在一小部分的案例可以解析。

1. Banner輪播圖

Banner輪播圖除了橫向的X軸出場次序，還有Z軸點點一對一的當前狀态。移動端受容器大小限制多為Z軸設計，Web端容器變大可以變成左右的交互設計形式。

2. 導航欄

導航欄是Z軸的視覺與交互結合，當前狀态需要重點突出，視覺向前進，點擊導航欄後底部的橫線會有動效移動，可以側滑導航欄選擇類别，這樣效率會更高；也可以側滑下方内容切換選擇。

3. 列表側滑删除

列表側滑是使用内嵌的布局方式，界面設計中用戶習慣是先查看再操作，當容器大小放置不下可先隐藏操作按鈕。

QQ聊天界面側滑内容可以引用該内容。微信消息列表側滑出現标為未讀、不顯示、删除操作按鈕。

七、YZ軸設計

YZ軸多結合界面交互一起設計，通過用戶操作形成Z軸信息架構的變化。YZ軸設計多用于信息流、鍵盤輸入等。

1. 頁面滑動

信息流的設計多為Y軸設計，Y軸急促、緊張的情緒會讓用戶不停的刷信息。

信息流設計中采用相似的界面結構保持統一，比如固定的頭像位置，固定的操作按鈕位置，标題文本形式等。

微信朋友圈信息流一整塊一整塊的加載提高閱讀效率；而抖音的視頻流是一個一個加載，更注重精準推送和沉浸式的觀看體驗。

2. 鍵盤輸入

鍵盤輸入也是采用YZ軸設計方式，不同場景下的鍵盤輸入交互也有差别，微信聊天界面的鍵盤輸入框放置在底部，每次調用鍵盤組件時界面會從下往上移動。

而朋友圈評論時，鍵盤組件除了從下往上移動，還要對齊到對應評論的内容上。前端的定位技術會有所不同。

八、模型升級

界面三重構模型中的界面可以替換成交互、前端、容器、用戶、信息等，當然也可以替換成桌面端、Web、小程序、APP、B端設計等。

這樣就可以把中間的要素抽象成N，界面三重構模型升級為N——X軸、Y軸、Z軸，N可以為單一的内容比如界面，也可以是N=N N比如界面加交互一起思考。

簡化的模型更适合微觀層面的細節設計，并不适合于宏觀視角的分析設計。

1. 如何使用該模型

我們來舉一個組件的例子，比如導航設計共分為二級導航，我們常規會顯示出一級導航。一級導航可以從X軸、Y軸兩個維度去思考，X軸的多為橫向全局導航，Y軸多為側邊導航欄。

當交互大兄弟來顯示二級導航時可以平鋪（XY）、上浮（Z）、内嵌（Z），二級導航展示方式還需要考慮容器大兄弟的意見，容器夠大就可以選擇平鋪，容器小就展開收起的交互模式，展開就會有上浮和内嵌的兩種形式。

模型抽象的N是随時發生變化，對應的界面設計形态也會發生變化，但是X軸、Y軸、Z軸的方法和設計技巧是相對不變的。

隻是你知道或不知道，會用或不會用的區别。産品設計中常用的兩個方法是等價設計和同形異構。

2. 等價設計

等價設計是幫助用戶完成任務的結果是一緻的，但過程可能不同，又或者是産品的邏輯結構是一緻的，但設計的外在形式有差别。

如圖京東購物車的數量添加減少功能是展示出來的，直接可以添加可減少商品數量；但是淘寶購物車的數量是展示結果，修改商品數量需要點擊後出現步進器組件。

這兩個設計形式就是等價設計，等價設計的好壞需要考慮很多因素，用戶、目标、場景、手段、行為、容器、信息關系、生活方式等。存在即合理，合适最重要。

3. 同形異構

同形異構是指不同的信息、數據類型設計出相同的外在形式。

微信消息列表也中有微信廣告助手、服務通知、訂閱号消息、文件傳輸助手、個人聊天、群聊天等，這些消息的數據類型、對象各不相同。

可是外在的結構形式是一樣的，這樣做的目的是簡化、統一，通過圖标和頭像來區分人、應用、工具的消息差異。

以上總結的界面三重構相關知識、理論、技巧都有其使用範圍，那麼有沒有一種設計方法可以淩駕于界面三重構模型之上呢，答案是肯定的，那就是隐喻設計。

九、隐喻設計

什麼是隐喻設計？我們應該怎麼去理解它呢？隐喻可以理解為隐含的相似性，它用想象的方式将某一物體與另一物體相聯系，并把二者的特征、情感等相互結合轉移。

如果對隐喻設計感興趣可以搜索我之前寫過的文章《揭開隐喻設計的面紗-你不知道的隐喻設計》。

隐喻設計是通過象征、類比的手法将複雜抽象的概念簡明化、具象化、降低用戶學習使用的成本，為用戶創造清晰、明了、舒适的操作體驗。産品設計具體表現在蘋果的ios操作系統和谷歌的Material design。

1. iOS六大設計原則之一

iOS六大設計原則：AestheticIntegrity(審美完整性)、Consistency(一緻性)、Direct Manipulation(直接操作)、Feedback(反饋)、Metaphors(隐喻)、User Control(用戶控制)。

Metaphors(隐喻設計)當一個app的虛拟對象和動作都是對熟悉事物的隐喻時（不管基于現實世界還是數字世界），用戶學習的更快；隐喻設計在iOS系統中很好的得到體現，因為用戶是直接與屏幕産生物理交互的。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部