<noframes id="phhnd">
<listing id="phhnd"></listing><ins id="phhnd"></ins>
<thead id="phhnd"><i id="phhnd"></i></thead>
<var id="phhnd"><i id="phhnd"></i></var>
<cite id="phhnd"></cite>
<thead id="phhnd"></thead><ins id="phhnd"></ins>
<cite id="phhnd"></cite>
<listing id="phhnd"><i id="phhnd"></i></listing>
<progress id="phhnd"><cite id="phhnd"></cite></progress>
<listing id="phhnd"><ruby id="phhnd"></ruby></listing><del id="phhnd"></del>
<listing id="phhnd"></listing>
<ins id="phhnd"></ins>
<cite id="phhnd"></cite>
<listing id="phhnd"></listing><cite id="phhnd"></cite>
<noframes id="phhnd">
<progress id="phhnd"></progress><cite id="phhnd"><span id="phhnd"></span></cite>
<var id="phhnd"></var>
<var id="phhnd"><span id="phhnd"></span></var>
<cite id="phhnd"></cite>
<cite id="phhnd"></cite>
<ins id="phhnd"></ins>
<cite id="phhnd"><i id="phhnd"></i></cite>
<var id="phhnd"></var>
<listing id="phhnd"><i id="phhnd"><progress id="phhnd"></progress></i></listing>
<progress id="phhnd"><i id="phhnd"></i></progress>
<cite id="phhnd"><span id="phhnd"></span></cite>
<progress id="phhnd"><i id="phhnd"></i></progress>
<listing id="phhnd"></listing>
<address id="phhnd"><i id="phhnd"></i></address>
<cite id="phhnd"></cite>
<listing id="phhnd"><i id="phhnd"><progress id="phhnd"></progress></i></listing>
<ins id="phhnd"></ins>
<menuitem id="phhnd"><del id="phhnd"><th id="phhnd"></th></del></menuitem>
<progress id="phhnd"><i id="phhnd"></i></progress>
成都網站制作
當前位置: 首頁 >新聞資訊 > 網站建設 > 如何讓界面任務流程更清晰 ?向導式設計了解下!
2018-08-29 18:04:13

如何讓界面任務流程更清晰 ?向導式設計了解下!

向導式設計屬于交互設計的常識,包括步驟條設計,引導標簽等。本文從向導式設計的作用、使用場景、設計類型、需要注意的問題等,給你帶來全面的基礎科普。

一、向導式設計是什么?

軟件界面設計中的「向導式界面」這個術語源自英語中的「Wizard」一詞。意思為「男巫、奇才」的意思;延伸意為「向導」。向導,顧名思義,就是能帶領或指引別人到達目的地的人。在實際使用中,這種交互方式的確像一個向導一樣,一步步地引領用戶向前,把復雜的任務進行拆解并有步驟地完成。

向導式設計也是流程設計的一種方式,這種方式通常目的性明確。在很多商業領域使用非常廣泛,比如購物,酒店預訂,銀行業務等等,尤其適合新用戶第一次體驗產品時使用,讓用戶對產品使用和任務快速上手,節約時間,提升效率。

二、向導式設計的主要作用

1. 引導新手操作

讓新用戶在最短的時間內了解產品/任務,明白如何快速上手使用。

2. 縱觀信息全局

讓用戶操作時對整體流程可控,心里有底,可以提前預估操作/完成時間。

3. 簡化操作任務

對復雜任務進行拆解,提升用戶操作的效率,同時也降低出錯率。

4. 較少操作決策

固定任務操作路徑,節約用戶思考&做操作決策時間,快速完成任務。

三、向導式設計的使用場景

一般情況下,標準向導步驟條的使用場景為:2-5 步比較合適。< 2 步,>10 步,使用是不合適的。因為 < 2 步沒必要;> 10 步太夸張,會嚇到用戶,本能認為你的產品使用過于繁瑣,拒絕嘗試和使用。

四、向導式設計的類型

  • 手風琴向導

  • 標準向導

  • 橫向標準向導

  • 縱向標準向導

  • 彈框向導

  • Tab 欄向導

  • 標簽向導

五、向導設計類型案例場景分析

1. 手風琴向導

手風琴向導式設計類型,一般適用于 2B 類后臺業務數據較多,任務指向性相對明確,流程基本固定。例如用戶幫助文檔以及 Q&A 的場景; PC 端頁面的注冊引導;電商網站的購物支付等流程。

手風琴向導,除了可滿足任務引導,步驟拆解,直觀展示等作用;更主要的是能對大量的數據信息進行收納整理,凸顯信息層級的清晰度,并在收納信息的同時節約頁面空間,讓頁面更有節奏和呼吸感。

2. 標準向導 – 橫向向導

橫向標準向導也可以稱為橫向步驟條,這樣表述大家比較容易理解。此類向導式設計是大家最常見的,也是最常規的一種橫向向導的設計,主要作用是對復雜的任務進行拆解,按照固定順序明確步驟,讓用戶對即將要操作的任務時間和內容有一個可控的心理預期。一般用戶可以一目了然總覽共有幾步,目前每個步驟的狀態(例如已完成/進行中/未開始),和自己當前的操作位置。

目前很多行業內的組件庫對橫向步驟條的 UI 設計基本都采用以下表現形式(圖片來源 阿里巴巴 TXD-AISC 組件庫),只是在細節上有稍許的差異。

具體差異主要表現在狀態色彩的使用和上下圖文的布局中。例如阿里-螞蟻金服的 Ant Design 橫向步驟條的設計圖文布局為左圖右文,這樣設計的好處是,如果流程步驟相對較少時,文字也可作橫向指向的一部分,避免頁面太過空曠。同時 Ant Design 對步驟條的使用場景做了更多細分,除了簡單的步驟條,還有迷你版和帶圖標的步驟條。

除了上面標準的組件庫中常有的步驟條樣式,還有以下的常用樣式,例如電商類購物和支付的場景,除了對已完成的狀態進行確認顯示,色塊箭頭的設計,向導指引性更強。

類似上一個案例的 UI 美化升級版,其實功能原理都是相通的。

除了上面相對比較簡單場景的步驟條,其實在 2B 業務中還有相對比較復雜的步驟條的設計,具體對應的是復雜的業務場景,例如覆蓋多產品線參與,多角色審批,包含父子步驟審批的業務場景,簡單常規的標準向導式設計是不能夠滿足業務場景的,需要對簡化版的橫向向導繼續深入拓展和優化。



 

返回 BACK
?
服務項目
網站建設
互聯網開發
微應用(微信)
微信小程序
APP定制開發
400電話
主機租用
域名注冊
聯系我們

地址:成都市府青路二段 • 首匯觀筑1棟28樓

郵箱:[email protected]

熱線:18980803640 / 18190984800

座機:028-61382296

微信公眾號 二維碼
20选5开奖走势图