旗下產業: A產業/?A實習/?A計劃
沈陽區咨詢熱線:024-31048731
首頁 > 行業資訊 > 作為資深UI設計師要懂得UX術語
作為資深UI設計師要懂得UX術語
時間:2018-03-22來源:www.aaa-cg.com.cn點擊量:
時間:2018-03-22點擊量:

任務流和用戶流是多年來常聽到的用戶體驗術語。雖然我嘗試通過Google搜索等方式搜尋其“官方”權威定義,但結果卻是,現存的很多UX術語表并未集中過定義它們。

盡管如此,無論如何,這類“流”都是在描述Web或軟件的“運動”情況。設計師需要考慮如何設計和引導用戶瀏覽一個網站或軟件。創建這類網頁或軟件“流”能夠幫助設計師思考和預估用戶在瀏覽一個頁面之前或之后可能發生的情況,并集中處理其中重要的部分。而且,此外,作為創建可運行原型的第一步,這類“流”的設計也能夠幫助開發人員了解,軟件或網頁在交替狀態下是如何運作的。

流程圖

Image title

 

流程圖是一張展示一個復雜系統或活動中人或物動作或行為的順序圖。而,應用到軟件或Web設計中,則表示一張展示用戶一系列頁面活動或行為的順序圖。

任務流與用戶流

Image title

任務流和用戶流并非完全不同。因為它們目的都是為了以最小的阻力,幫助用戶完成某項任務。它們都能夠幫助你在設計開發具體軟件或網頁功能之前,深思熟慮一些設計問題。如果你希望能夠更簡單具體地區分它們,也可以如此定義它們:

任務流

任務流是所有用戶為實現某特定操作所完成的單一流程,所有用戶所經歷流程都是相似的,比如網頁或軟件注冊。任務流是一條單一的流程,毫無分支。

用戶流

用戶流則是用戶所遵循的軟件或網頁執行路徑。可以視作是用戶在瀏覽軟件或網頁所經歷的一個個迷你旅程。用戶流不一定是線性的,還可以有分支。通過定義或設計軟件或網頁路徑,你能夠發現其中可能的轉變點和提升點,從而優化用戶體驗。

用戶流可以非常簡單,僅用以幫助設計網頁或軟件的“紅色路徑”——即網頁或軟件主路徑。當涉及和添加更多相關條件和要求時,用戶流也可以變得極其的復雜。總之,在開發產品之前,用戶流可以幫助設計師和開發人員有效地分解復雜的流程,從而加深理解,提升工作效率。

Morgan Brown曾經說過:

“用戶流設計可以為用戶和企業帶來更多實效。”

頁面流程圖

Image title

世界聞名的37 signals軟件公司曾對用戶流進行速記,并認為它們存在以下不足:

*在設計過程中,用戶流有時很難解釋并用以交流。

*繪制出流程細節,會非常費時。

*而且隨著界面設計的更迭變化,流程設計很快就不在適用。

雖然用戶流以及頁面流程圖之類“流”存在不足,你也可以在實際的Web或軟件中嘗試使用它們。因為作為一種Web或軟件設計的快速入門方式,它們能夠在時間有限的情況下,滿足你的設計需求。

Image title

而且,隨著設計需求的不斷變化,為方便設計師展示和交流其設計理念,一些原型工具,例如簡單快捷的Mockplus, 提供了專業的頁面流程圖功能。設計師一鍵點擊即可生成所需Web或軟件頁面流程圖,并根據設計需要設置其顏色,背景以及連接線,添加頁面備注以及導出為圖片等。能夠幫助設計師極大的提升設計和交流效率。

Wireflows

Image title

多年來,我通過創建流程圖來演示和交流Web或軟件中的交互設計。而且為了囊括更多的設計情景,這些流程圖已演變成包含線框圖的“流”設計。而全球知名的用戶體驗研究機構Nielsen Norman Group最近提出了一個全新的術語“Wireflows”來描繪此類用戶體驗的可交付內容。

Nielsen Norman Group這樣定義Wireflows:

Wireflows是一種結合了線框圖風格的頁面布局格式,采用了一種簡化的流程圖來展示Web或軟件的各種交互設計。

只有線框圖是遠遠不夠的。因為線框圖常常僅僅展示Web或軟件的頁面布局或靜態內容,并未包含任何動態交互。而流程圖則囊括了Web或軟件的交互細節,但卻忽略了可能發生的應用情景。而Wireflow則能夠幫助設計師存儲復雜的交互設計,并展示這些交互設計中變化的內容和布局。

Wireflow元素

*入口和出口

*步驟:例如用戶操作,系統操作以及替代路徑

*連接:指示所需的路徑和可能的不同流程

*決策點:用戶必須從兩個或多個選項中選擇。

總結:

了解和預估這些“流”可能的應用場景,能夠有效地優化設計體驗。以上所描述的任何“流”都能夠幫助設計師更好的展示和交流各種設計理念,從而提高協作效率。

資源

以下是一些可以加速UX工作流設計的資源,希望能對你有所幫助:

界面工具包資源

Image title

*FREEBIE — Flowchart kit for Sketch

——來自Greg Dlubacz設計師的流程圖工具包

這是一個精心制作的Sketch流程圖工具包,可以幫助你輕松快捷的創建簡潔直觀的站點地圖。包含的所有元素,包括箭頭等,都是可編輯,可定制的。

Image title

*Flowchart Kit Sketch Resource

——來自 Arthur Guillermin Hazan設計師的流程圖工具包

這是一個展示了網頁界面之間交互設計的流程圖工具包。你可以使用它輕松地為你的界面添加箭頭以及圖標等元素,自定義你的界面,甚至在其幫助下創建更加精確的站點地圖。

Image title

*User Flow Diagram Template

——來自Jaros?aw Ceborski設計師的用戶流程圖模板

這個用戶用戶流程圖模板能夠幫助你簡單地制作美觀吸睛的圖表。其中包含的所有方塊和箭頭都是便于直接使用的Sketch符號。

*13+ Productive UX Flowchart Templates

——來自Template.net網頁的UX流程圖

Sketch插件資源

Image title

*Sketch plugin — AEFlowchart

——來自Marko Tadic的AEFlowcharts插件

Sketch提供了多種能夠幫助設計師常見Web或軟件流程圖的插件。而在簡單查看這些插件之后,小編發現,AEFlowcharts是所有這些插件中最易用的。


 

?2007-2019/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

沈陽漫動者計算機培訓學校 備案號:遼ICP備14015306號-1郵箱:bjaaa@aaaedu.cc

芭比直播app_芭比barbie官网_芭比直播app官方下载地址ios