基于Axure的社交App交互界面的原型設計與應用

摘要：移動互聯網的發展極大地豐富了人與人之間的交流方式，社交網絡逐漸成為人們日常的交流溝通、信息獲取和社交互動的重要平臺?，F有的社交App在市場上層出不窮，但在設計過程中存在功能不夠齊全和交互邏輯不夠流暢等不足，在一定程度上影響了用戶的社交流暢性。文章基于Axure的社交App交互界面的原型設計對用戶社交屬性進行了分析和劃分，根據用戶需求逐步設計App的交互邏輯，提升了用戶在社交App上的體驗感。

關鍵詞：Axure；交互設計；微博App；動態面板

中圖分類號：TP311文獻標志碼：A

0 引言

《中國移動互聯網發展報告（2022）》指出，截至2021年12月底，中國手機網民規模達10.29億人，全年增加了4 373萬人。隨著智能手機、平板電腦和其他移動設備的不斷普及，移動互聯網已經成為人們生活中不可或缺的一部分。移動互聯網的發展極大地豐富了人與人之間交流的方式，社交網絡逐漸成為人們日常的交流溝通、信息獲取和社交互動的重要平臺，諸如Facebook、Instagram、Twitter、YouTube、微博等手機社交類App層出不窮，用戶可以在此類App上獲得及時和多樣化的信息并通過其集成的分享和轉發等功能發表和傳播自己的觀點和內容，社交平臺App的原型設計和開發逐漸得到廣泛的關注。

原型設計工具隨著用戶需求的變化不斷發展成多樣化，基本的畫圖工具和軟件已經無法滿足用戶的需求，產品的功能和交互效果也無法及時呈現在用戶面前［1］。Axure原型設計工具可以繪制低保真和高保真原型，并能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔，其集成了交互、原型和協作3大核心功能，用戶可以通過Axure體驗軟件的功能和真實效果并與產品設計者進行高效的溝通。Axure軟件因此也是設計師們較為青睞的原型設計工具之一［2］。

1 相關介紹

1.1 產品原型概念及分類

產品原型能夠快速地挖掘用戶的需求，增加用戶對產品功能易用性和交互效果的參與度。因此，用戶對產品原型的接受度要高于一些需求和說明型文檔，設計師們也更偏向于根據用戶的需求利用原型設計工具來制作原型。原型大致可以分為3類，分別是草圖原型、低保真原型和高保真原型，每種原型都有著不同的特點［3］。草圖原型可以記錄瞬間的靈感并簡單和快捷地描述產品大概需求；低保真原型可以反映用戶需求的基本功能和使用效果；高保真原型在視覺和體驗上最接近真實的產品，一般用于對客戶進行展示。

1.2 交互界面設計

交互界面（User Interface， UI）設計是一種關注用戶和產品之間交互體驗的設計，設計師們需要深入理解用戶的需求和行為并設計出符合用戶期望的交互界面，而UI設計的最終目標就是創建使用戶能夠以最佳方式實現其目標的產品［4］。隨著科技的不斷發展，交互界面的媒介也日益多樣化，包括電腦、平板、手機、車載系統等，設計師們需要針對不同的媒介設計出合適的交互界面。交互界面設計也面臨著新技術發展帶來的挑戰，如何實現智能化和自動化的交互將是未來UI設計的發展趨勢。

2 社交App交互界面的原型設計

移動互聯網下的社交網絡是基于用戶真實身份和社會關系所形成的信息交流和感情維系的回路。在高速的生活節奏以及復雜的自媒體浪潮下，人們時刻扮演著不同的角色，如何使用戶在社交App中高效和快捷地分享和互換自己的心情是衡量社交應用優越性的一個重要標準。本文以微博App為例介紹交互原型設計的方法和應用。

2.1 App特點分析

微博App是基于用戶關系的社交媒體平臺，用戶可以通過個人計算機（Personal Computer，PC）和手機等多種移動終端接入，以文字、圖片、視頻等多媒體形式，實現信息的即時分享和傳播互動。微博App使用戶能夠公開實時發表內容，通過裂變式傳播讓用戶與他人互動并與世界緊密相連。

2.2 App功能分析

社交類App界面要呈現直觀簡潔和對用戶友好的設計特點，實時通信是其基本功能，還需要包含社交網絡集成、多媒體共享、消息提醒和通知等板塊，用戶個性化設置、社群功能以及安全和隱私保護等也是其必不可少的功能。這些設計的目的在于為用戶提供易于使用和操作的界面，所設計的App需要集成實時互動和交流、多媒體的分享和展示、個性化設置和社群互動等功能，同時確保用戶能夠實時獲取最新的熱點信息。微博App基本功能如圖1所示，微博App的系統功能主要分為5個部分：微博、視頻、發現、消息、我。每個部分所包含的內容具體如下。

（1）微博：關注（用戶關注的人和群組，可以實時查看所關注人和群組所發布的微博動態）和推薦（熱門、同城、榜單、抽獎、電競、美妝，微博根據用戶的關注和瀏覽內容為其推薦的用戶可能感興趣的微博）；

（2）視頻：推薦、熱門和小視頻（以視頻方式呈現實時的內容），該部分導航欄是可以在微博App中進行自定義設置的，即用戶也可以將“視頻”修改為“超話”或者“精選”；

（3）發現：主要包含熱搜功能，“熱搜”功能集成了實時的熱點信息，并按照熱度由高到低呈現在用戶面前；

（4）消息：主要包含動態和聊天記錄，用于接收關注和未關注的人所發送給用戶的消息；

（5）我：個人信息展示功能，主要包含用戶的賬號和隱私信息。

3 界面視覺設計

App界面的美觀大方是用戶對一個App最直接的視覺評判。設計師對每一個細節的用心設計是獲取用戶對App界面贊賞的基石。界面整體的美觀性都是由每個設計元素的美觀性組成。App界面設計主要是對文本、顏色、圖標、動效、布局等進行設計，當這些內容獨立美觀、相輔相成時，整體界面會呈現出一種舒適美觀的視覺感受。設計感良好的應用界面在設計過程中都遵循一定的規律和原則。微博App的界面視覺設計可以從以下3個方面進行概述。

3.1 文本設計

App文本排版應符合用戶閱讀習慣，為用戶帶來流暢的閱讀體驗，單個App上使用的字體類型最好不超過3種。App界面設計中需要通過字號、字體、顏色等對比的方式來突出整體排版布局。同時，文字顏色與背景顏色不能過于接近，這樣可以使文字部分清晰可見。本文所設計的App統一使用蘋方SC字體樣式，在繪制App內置的標題和文本標簽時使用了其中的Semibold和Regular 2種字形，字體大小包含8、10、12、14偶數號，該字體的使用讓App界面展現出良好的可讀性和美感，為用戶的閱讀帶了極佳的屏幕體驗。微博App字體設計如圖2所示。

3.2 圖標設計

圖標設計是界面設計中的重要組成部分之一，通過視覺隱喻讓用戶理解相關的功能，相對于文字而言圖形在界面中的使用可以使App更加簡潔和生動形象。在圖標繪制時設計師需要遵守一定的原則，如風格統一、大小統一、色彩統一等，即在某個特定功能模塊內圖標的風格、大小和色彩要保持一致。圖標的類型主要分為線性、面性、寫實擬物和三維立體4種，不同的圖標中組合的元素都會有一些差異，相同類型的圖標中也會有不同的圖標風格。本文所設計的App統一使用線性圖標，該類圖標的特點是更纖細和簡潔，在一定程度上減少了App界面的視覺沖擊力。微博App導航欄圖標設計如圖3所示。

3.3 色彩設計

不同的App配色會給用戶帶來不一樣的體驗，從而在App上利用配色達到與用戶進行溝通的目的。良好的App配色可以更好地體現App的功能，不同類型的App所使用的配色方案在一定程度上要有所區別。本文所設計的App界面設計模板采用了黃紅色暖色調的搭配，整體風格簡約，突出實時熱點和社交聊天功能。根據微博App的功能，本文所設計的App采取了主色占比小和色彩豐富度低的應用特點，其中主色RGB為#FE8910，輔色包含#F53B56、#BDBDBD、#F2F2F2等。微博App發現界面設計如圖4所示。

4 界面交互設計

App的交互設計是圍繞用戶行為進行設計，良好的交互體驗是產品和服務成功的關鍵因素之一。Axure軟件提供了豐富的交互設計功能和工具，其可以模擬用戶在使用產品時的交互流程幫助設計師快速創建交互原型，進一步對接用戶對產品的體驗效果。在實際的交互設計中，設計師們需要發現潛在的問題和優化的空間，并不斷地對交互設計進行改善，從而更好地把握用戶的真實體驗。Axure中的交互包含2個元素：觸發交互事件的主體和交互事件類型［5］。微博App的交互設計主要包含以下4個部分。

4.1 微博App導航欄之間的切換

首先，導航欄之間的切換交互效果在Axure中需要使用到動態面板元件，因此需要從元件庫中拖動一個動態面板到達設計區域，大小由App所在設備尺寸大小所決定，微博App以iPhone8的375×667為例。在Axure中可以把元件或多個元件轉換成動態面板，即把這些元件放在一個動態面板的不同狀態里，每個狀態可以包含多個元件。因此，微博App將其5個功能界面作為動態面板的5種狀態進行搭建，子功能界面的搭建運用了基本的文本標簽、矩形等元件。每個功能界面展示效果如圖5所示。

子功能界面之間的切換交互效果事件觸發元件為導航欄區域，因此在每個導航欄圖標上放置一個熱區元件，使用戶在單擊導航欄區域時實現交互效果，每個熱區元件的交互為單擊時設置“微博”面板狀態為對應的子功能狀態。例如，子功能“發現”熱區所添加的交互為單擊時設置面板狀態“微博”到“發現”。該交互在Axure設計區域中的截圖如圖6所示。5個熱區交互設置完成后，將5個熱區元件復制到“微博”動態面板的其他狀態中，保證每個狀態中都有含有該交互即可實現微博App導航欄之間的互相切換。

4.2 同一界面內容的上下滑動

Axure的上下滑動效果也可以利用其中的動態面板元件來實現。以本App的第一個子功能“微博”界面為例，用戶在瀏覽推薦的熱門微博時，需要不斷上下滑動屏幕查看不同的微博。首先需要將滑動的內容放置在一個動態面板中，“微博推薦內容”動態面板如圖7所示。圖中的中間設計區域為本App放置在動態面板中的2條熱門微博，右側為滑動效果的交互。其中，交互是加在需要實現滑動的動態面板元件上，在其拖動時加入“移動”事件，使該動態面板跟隨垂直進行拖動。

4.3 廣告頁以及指示器的輪播

廣告頁面以及指示器的輪播效果出現在本文所設計的App的子功能“發現中”，當用戶進入“發現”界面時，廣告頁以及廣告指示器自動進行輪播。同樣，首先需要將不同的廣告照片和指示器效果放入動態面板的每個狀態中，使其形成2個含有相同狀態數的動態面板，避免造成廣告圖片和輪播指示器輪播效果不匹配的錯誤效果。交互為其載入時設置對應的動態面板的面板狀態，使其不斷向下一項循環向左滑動，滑動的時間設置為500 ms，不同廣告之間滑動的時間間隔為2000 ms。為了保證輪播指示器與廣告的滑動效果保持一致，動態面板“廣告指示器”的各項時間設置需要與“廣告”保持一致，廣告輪播效果的實現如圖8所示。

4.4 不同界面之間的跳轉效果

4.4.1 收到消息后跳轉到聊天界面

Axure構建界面跳轉效果需要優先設計跳轉之前和之后的界面，在設計區域時使用同樣大小的動態面板搭建界面，將跳轉之后的界面動態面板搭建在跳轉之前的界面的右側或者下側。以本文所設計的App為例，聊天界面和設置界面均搭建在各自跳轉之前界面的右側，位置為（375，0），方便跳轉之后的界面移入當前界面，“聊天界面”動態面板的搭建如圖9所示。跳轉交互效果加在對應的消息列表中，交互為單擊時將“聊天界面”動態面板向左移動375個單位，對應的坐標為（-375，0）；返回效果加在聊天界面的“lt;返回”元件中，交互為單擊時將“聊天界面”動態面板向右移動375個單位，對應的坐標為（375，0），交互效果如圖10所示。

4.4.2 “我”界面跳轉到設置界面

同理，“我”界面跳轉到設置界面與前一項界面跳轉效果實現過程基本保持一致，本App所搭建的“設置界面”動態面板如圖11所示。與前一項不同的是，“我”界面的交互跳轉是加在其右上角的設置圖標元件中，返回效果加在設置界面的“lt;我”元件中，交互效果如圖12所示。

5 結語

社交App的發展為人們的交流方式帶來了全新的改變，基于Axure的交互原型設計逐漸成為用戶體驗產品常用的方式之一，用戶可以在設計的原型中直接了解App所具有的功能以及其中含有的交互邏輯，這在一定程度上提高了設計師與用戶溝通交流的效率，推進了軟件設計和開發的進程。同時，信息的真實性和可信度逐漸成了社交網絡的重要課題，網絡暴力和隱私泄露等問題也需要在產品設計中引起一定的重視。

參考文獻

［1］姜波.基于移動App交互原型設計與實現［J］.數字技術與應用，2022（6）：167-169.

［2］葛田，楊琦.Axure交互編輯在軟件原型設計中的應用［J］.現代信息科技，2021（15）：22-24.

［3］朱格，張磊，吳慧欣.基于AxureRP的O2O電商產品原型設計［J］.無線互聯科技，2022（7）：73-74.

［4］何煜琳.基于Axure工具的App原型設計和應用［J］.信息與電腦（理論版），2021（21）：4-6.

［5］周金容，張海波，唐天國，等.基于Axure的教育App交互界面的原型設計與應用［J］.網絡安全技術與應用，2023（4）：61-64.

Prototype design and application of social App interactive interface based on Axure

Abstract： The development of mobile Internet has greatly enriched the way of communication between people， and social network has gradually become an important platform for people’s daily communication， information acquisition and social interaction. Existing social Apps are emerging in an endless stream at the top of the market， but in the design process， there are shortcomings such as incomplete functions and smooth interaction logic， which affect users’ social fluency to a certain extent. The prototype design of the interactive interface of social App based on Axure analyzes and divides the social attributes of users， and gradually designs the interactive logic of the App according to the needs of users， which improves the experience sense of users on social App.

Key words： Axure; interaction design; weibo App; dynamic panel