近年來，交互設計在網頁設計中起着非常重要的地位。什麼是交互設計?簡單來說就是網頁與人進行交流互動的設計，能幫助用戶解決問題，滿足他們的期望。

很多網頁設計師在考慮交互設計時，要麼從書本上學到些皮毛，但出來的網頁卻非常空洞;要麼從競品上只學到零散點，沒有真正領悟到體系的基礎知識。那麼，學習交互設計的步驟是怎樣?

學習交互設計的步驟是怎樣?

步驟一：界面基礎

界面基礎指的是控件、布局、流程，也就是網頁設計原稿肉眼可見的內容，都屬於界面基礎的部分。入門時先學習界面基礎，能讓你了解交互設計的大概內容，並對交互設計建立些信心和興趣。

1. 控件

網頁設計教程

控件就是界面上最小的有效單元，如：搜索框、單選按鈕、複選框、下拉框等。不同平台都有自己一套的官方設計規範，如：iOS、Android、MacOS、Windows等等，但web端沒有官方規範，因為web端本身不屬於平台，因此它的規範屬於各自為政的狀態。

大多數控件會有各自的一套的交互流程，亦有自己所屬的屬性。

比如APP設計中的文本框，當用戶點擊文本框後，會出現光標及鍵盤;輸入第一個字符後，會出現「清空按鈕」;輸入很多字符後，會有截斷效果……

這個便是文本框中的交互流程，了解控件的交互流程，能讓自己更立體地了解一個控件，及更細緻地描述空間的交互流程。

至於控件的屬性就更好理解，你可以簡單地理解為「可設置的參數」。

比如「列表」，大多數網頁設計師都會將定義的屬性有：排序規則、加載規則、刷新規則、適配規則、截斷規則等。

控件屬在交互設計中非常重要，因為它決定了你的網頁是否細緻，能否給網頁帶來極佳的易讀性和易用性。

· 怎樣使用控件?

了解控件的有關內容，接下來你就需要知道什麼時候該用什麼控件。

舉個例子：當用戶輸入錯誤的手機號碼時，網頁需要給用戶提供錯誤提示，而這個提示方式應該選用哪個控件呢?

提示方式所用的控件有很多種：彈窗、toast、行內提示、氣泡提示等，至於使用哪個，這個沒有硬性要求，具體看當時的環境以及設計師想營造哪種效果。

2.布局

網頁設計教程

簡單來說，布局就是將網頁元素放到界面上合適的位置並賦予合適的視覺重量。關於網頁布局的理論有很多，格式塔原理、網格系統、7±2法則、席克定律、費茨定律、奧卡姆剃刀原理、複雜性守恆定律。這些理論相對比較低層，很難直接告訴你布局設計怎樣做，但會成為設計師心中的「標尺」和「依據」，並融入平時的設計當中。

· 布局的基本步驟

布局設計可簡單分為以下四個步驟：

① 列舉：將界面中所需的元素列舉出來;

② 歸類：將上述列舉的元素歸位積累，每類一個模塊;

③ 排序：將上面歸類好的模塊進行排序，排序依據一般為：用戶場景中的瀏覽順序、元素的重要性、業務情網;

④ 調整：布局排布的影響因素很多，最後需要綜合其他因素對布局進行調整，並對各元素調整其視覺重量。

學會布局基本步驟後，可對網頁進行思考，留意哪個步驟被疏忽了。

3.流程

網頁設計教程

界面元素看似很多，但歸根到底只有兩種：內容和功能。內容是靜態，例如企業介紹、最新資訊等，功能則是動態的，主要用於描述內容的交互流程。

例如：社交平台APP中的「接受文件」功能，其交互流程可描述為：點開消息→看到文件→點擊下載→下載完成並打開。

· 流程設計的步驟

① 確定「任務」;

② 將「任務」拆成「動作」;

③ 將「動作」對應成界面。

想要在設計交互流程時，可以讓思路更加清晰，表達更加清楚，可以在繪製界面之前搭建「流程圖」。

步驟二：設計內核

了解完交互設計中比較重要且簡單的部分後，接下來我們將要講解比較「虛」的內容，雖然這部分內容比較難理解，但卻是在交互設計中最重要的部分。

交互設計的核心就是「以用戶的角度思考」，也就是「用戶」、「目標」、「場景」。

1.用戶

網頁設計教程

「用戶」這個概念其實還算很容易理解的，即進入網站的使用者都可以統稱為用戶。但要真正了解用戶卻很難，畢竟有關用戶的標籤實在太多，如：年齡、地區、階層以及文化差異等。

· 如何去了解用戶?

要想網站滿足用戶的期望，首先要做的就是去了解網站的目標用戶特徵，其方式有很多種：用戶訪談、用戶觀察、問卷，這些方法都可以幫助你去收集到用戶的基本信息。

接下來，就要對所有用戶的基本信息進行分類，分類後就是制定用戶畫像(即將「一群人」的特徵抽象為「一個人」的特徵，並感同身受「他」的想法)。

2.目標

網頁設計教程

目標同樣會影響設計，就好比兩個同樣的社交平台APP，一個主要目標是「工作中的高效溝通」，因此APP設計的功能相對複雜，且干擾性強;至於另一個的主要目標是「生活中的輕鬆溝通」，因此APP設計的功能相對便捷，干擾性也比較弱。

· 如何定目標?

在交互設計中，目標可細分為「用戶目標」、「業務目標」，設計師在考慮交互設計時，不應該僅考慮「為用戶服務」，還需考慮「為公司服務」。

如果網頁的使用過程非常愉悅，但公司並不能因此賺錢，這對公司的發展明顯不是長久之計。

3.場景

網頁設計教程

場景，其實方便設計師去理解用戶需求的重要工具。用戶的需求是很難感同身受的，但如果設計師不能感同身受，又如何為用戶設計好的產品呢?

這時就需要設計師自己代入到「場景」當中，去感受用戶在每個場景的各種各樣想法，將所有想法和細節都融入到設計當中，從而設計出相對符合用戶真實需求的產品。

· 如何考慮場景?

通常設計師考慮場景時，都會結合「用戶」和「目標」這兩點去探討，也就是我們常說的「用戶場景」。

在理解「用戶場景」時，我們大多會思考以下幾個問題：

① Who

② Where

③ When

④ How

⑤ Result

交互設計是一個知識體系非常豐富且完善的學科，基本上只要掌握好上述的基礎知識，便可成為一個初級的交互網頁設計師。但要想讓自己的技能有更大的突破，開始攻克專業能力和賦能業務，但這兩方面的內容相對較難，且需要理論搭配實踐一步一步去摸索，才能更好地理解。