您現在的位置是:電腦技術吧?>? 編程技術 ??>??指示器,舵角指示器??>??正文詳情

指示器,舵角指示器

堯成周2019-11-06 15:31:31 人圍觀
簡介技能指示器最近,我正在與我的團隊的小伙伴一起研究復雜的表單設計我碰巧看到這篇文章,很有啟發性所以我決定把它翻譯出來和你分享這是一篇在設計大型電子商務網站或復雜的在

最近正在和團隊的小伙伴一起處理一個復雜的表單設計,正好看到這篇文章,小有啟發,就決定譯出來和大家分享一下,是篇可以快速閱讀的案例文。

  在設計大型電商網站或是復雜在線服務系統的時候,遇到最核心的問題就是設計一個在線下單或是配置的流程。

如果能把用戶流程設計得簡單并且符合用戶直覺,這絕對是提高轉化率的關鍵。

過程中任何一個對用戶造成的挫折感都有可能讓他們離開去嘗試其他選擇。

  易用的分步流程可以有效的避免用戶受挫,并且幫助他們成功的完成主要任務。

本文我將帶大家來看一下各式流程進度的設計。

  什么是進度跟蹤器?

  進度跟蹤器(進度指示)通過將流程切分成多個邏輯步驟,從而顯示了線性的進度流程。

他們可以引導用戶按照一系列的步驟進行操作從而完成任務。

好的進度跟蹤器設計需要告知用戶如下信息:

  哪些步驟(或是任務)用戶已經完成了(最好使用合適的視覺表現)

  當前在哪個步驟(用戶在全流程中的當前位置)

  還有哪些步驟需要去完成(最好有明確的指引)

  △ 進度追蹤器將流程用步驟的方式展現出來

  這是使用步驟化流程的三個最主要原因:

  可以把用戶需要輸入的信息更有邏輯的組合起來

  給用戶設定一個清晰的預期

  為用戶在一個復雜的長流程中跟蹤狀態

  為何進度跟蹤器有效?

  進度跟蹤器給用戶創造了清晰的路徑。

研究表明,當用戶對完成最終目標需要多少步驟有了清晰的概念之后,中途放棄的情況得到顯著的減少。

從心理學的角度來說,也十分站得住腳。

  △ 用分步操作來完成建立賬戶

  而且,將內容展現在區塊中更有利于用戶進行信息的掃描,從而可以提高用戶對流程的理解。

事實上,區塊設計能提供符合邏輯且具有視覺差異的內容模塊,這對于復雜的全局來說很有幫助。

  進度跟蹤器的使用

  進度跟蹤器在許多場景下都能使用,下面三種是最為常見的,

  在線下單

  至今為止,進度跟蹤器最常用在在線購買中,因為購買的任務天生就是分為多個步驟。

  多步表單

  如果一個表單需要用戶提供許多的信息,最好將這個表單拆分成多個步驟

  引導

  進度跟蹤器也常于App引導。

如果步驟不多的情況下可以使用屏幕下方的小點來進行標注(像如下Dropbx的案例)

  △ Dropbox引導

  進度跟蹤器設計案例

  如何設計一個卓越的進度跟蹤器,這個問題并沒有一個通用的答案。

但是你始終需要確認的是用戶是如何和你的系統進行交互的。

通常來說,步驟的設計應當盡可能簡單清晰,以免讓用戶感到困惑。

  設定用戶預期

  當用戶需要完成一個復雜的流程操作時,進行用戶的預期管理就顯得尤為重要,我們需要在用戶開始操作前就告訴他們大致需要多少工作和時間能完成這個流程。

如果用戶僅認為他們只需要兩分鐘就能完成,但卻花了十分鐘,這體驗一定很糟糕。

  給用戶提供合適的流程說明能幫助用戶做好進行復雜操作的心里準備。

當然如果能夠給用戶一個完成任務的時間預估就最好了,尤其當這些步驟的復雜程度并不等同的時候。

(例如,某些步驟可能需要比其他的花去更多的時間。

)

  建立符合邏輯的流程

  展現出流程的進展方向。

最好可以使用箭頭來強調流程的流向,因為單純使用線進行連接無法提現出流程的概念。

  使用圖標配合文字來描述流程中這些步驟,這樣可以讓用戶更清晰地了解步驟。

  不要把流程拆得過長,3-5步為宜。

  使用數字來體現步驟和當前位置(例如,五步中的第三步)

  時刻讓用戶知道自己的處境

  我在哪兒?這是一個用戶在界面中進行導航時常常會問自己的問題。

這也是為什么一個好的進度跟蹤器需要隨時保持讓用戶清楚地知道自己在流程中的哪個步驟的原因。

這樣用戶就能清楚地知道自己都做了些什么以及接下來需要做些什么,有助于流程的推進。

  同時為進度跟蹤器提供一個良好的視覺展示也是十分必要。

用戶往往依賴于導航上的一些視覺線索進行判斷。

  △ 來自Dribble的案例

  可以使用一些清晰的狀態變化來表明當前步驟,而不僅僅是改變簡單的顏色。

合適的圖標和文字有助于用戶理解。

  文字隨著狀態而改變

  避免多個進度跟蹤器同時存在

  不要在同一個頁面中多次使用進度跟蹤器,也不要使用嵌套。

這很有可能會給你的界面帶來混亂。

  △ 反面案例

  使用進度反饋

  進度跟蹤器可以在用戶保存了某個步驟后顯示短暫的反饋。

而這個反饋僅應該存在于當步驟間有一些潛在的等待的情況下。

  進度跟蹤器在移動端的應用

  由于水平空間在手機上非常局限,垂直方向上的進度跟蹤器對于移動應用或是站點來說也許是個更好的選擇。

需要稍稍注意一下每一步的內容都是響應式的即可。

  △ 垂直向的進度跟蹤器很適合小屏

  小結

  設計進度跟蹤器的時候需要謹記簡單、易理解,而且別忘了使用視覺表現對用戶進行合適的引導。

始終把用戶放在首位,不要為自己而設計。

最后,好的進度跟蹤器能夠保證用戶順利完成流程的同時,對你的產品有一個更好的印象。

  譯者微信號:開卷有譯,歡迎關注喲

版權聲明:本文由 堯成周 整理編輯。

原標題:舵角指示器如何調整,水流指示器

轉載注明出處:http://www.dn9ww09s.icu/program/11343.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • bak文件查看器,微信bak文件查看器

    bak文件查看器,微信bak文件查看器 相關圖片什么軟件可以打開bak文件電腦上有很多文件格式,很多軟件都有自己的文件格式,比如文本文件的TXT,辦公文件的doc等等,有時候我們可以看到電腦上有一些后綴為Bak的文件,這些文件...

  • css邊框陰影,css邊框陰影效果

    css邊框陰影,css邊框陰影效果 相關圖片css陰影怎么做How to create multiple borders in CSS3: 0 0 0 2px 000, 0 0 0 3px 999, 0 0 0 9px#css圓形邊框...

  • nba2k,nba2k16

    nba2k,nba2k16 相關圖片nba2k下載Nba2k17手機版是一款籃球手機游戲科比退役了為了紀念科比,2k17將推出以科比為封面主題的傳奇收藏版,紀念這位老將的離世易建聯將再次回到NBA賽場,來到湖人nba2k20最新消息...

  • 臺式電腦什么配置好,中關村在線電腦組裝

    臺式電腦什么配置好,中關村在線電腦組裝 相關圖片電腦組裝無論是在家工作還是休閑,我們都已逐漸離不開電腦現在,選擇組裝這臺機器的用戶不在少數如何擁有一臺高配置的電腦是小白大多數人的煩惱,那么如何選擇一臺高配置的電...

  • 多列布局,多列等高布局

    多列布局,多列等高布局 相關圖片css3flex多列布局當我用CSS寫了幾天的三列布局的時候,我突然想到了這樣一種方法,我覺得這太瘋狂了如果有什么問題,請給我一些建議當我需要編寫三列布局時,我通常選擇使用以下...

  • 筆記本設置wifi 熱點,筆記本做wifi熱點設置

    筆記本設置wifi 熱點,筆記本做wifi熱點設置 相關圖片筆記本wifi怎么打開在21世紀,我相信每個人都非常熟悉WiFi,因為無論你去哪里都有WiFi不過,我不知道您是否知道如何設置WiFi熱點,而且筆記本設置WiFi熱點非常方便,可以用筆記本打開...

  • 企業命名參考,命名要求

    企業命名參考,命名要求 相關圖片商業綜合體命名參考它可以用于在XHTML中定義ID和類,主要用于在定義樣式時查看CSS因此,CSS命名僅供參考(1)頁面結構類容器:容器頁面標題:標題內容:內容/容器頁面正文:樓命名...

  • 顯示卡屬性怎么設置,怎么設置顯示屬性

    顯示卡屬性怎么設置,怎么設置顯示屬性 相關圖片電腦顯示屬性設置視頻卡作為計算機最基本的配置和最重要的附件之一,承擔著顯示圖形的輸出任務所以,可能會有很多朋友會有這樣一個問題,那就是,在哪里打開顯卡設置如何設置...

  • 手機用什么殺毒軟件比較好,手機殺毒軟件

    手機用什么殺毒軟件比較好,手機殺毒軟件 相關圖片360手機殺毒軟件手機殺毒軟件不僅可以保護手機的安全,還可以保護個人隱私那么哪個是最好的移動防病毒軟件呢現在有很多種移動殺毒軟件對于移動安全來說,如何選擇一款正確且易...

  • 網頁固定背景代碼,網頁背景透明代碼

    網頁固定背景代碼,網頁背景透明代碼 相關圖片html設置網頁背景圖片代碼網頁背景漸變是一種常用的效果下面使用的過濾器,當然在非ie中沒有效果。下面的電腦主機網小編分享一個CSS實現的頁面背景漸變效果代碼介紹,希望能給大...

熱評文章

  • 電腦一直藍屏,電腦一直藍屏怎么辦

    電腦一直藍屏,電腦一直藍屏怎么辦 相關圖片電腦藍屏維修電腦對我們來說并不新鮮,甚至每個家庭都有一臺或多臺電腦可以用來玩游戲或工作但是,電腦使用很長時間后會出現一些問題,包括藍屏,這對一些需要使用電腦的人來...

  • cssrepeat,cssnorepeat

    cssrepeat,cssnorepeat 相關圖片css80px和0的作用是告訴你圖片在哪里默認情況下,如果不設置下面的數字,則圖片位于頁面的左上角,如下圖所示,第一個數字是x軸上的偏移量,即水平偏移量,正含義為正,translate ...

  • steam更新出錯,steam一直正在更新

    steam更新出錯,steam一直正在更新 相關圖片steam更新出現錯誤說到現在最大的游戲下載平臺,有必要提到steam但是,這個平臺經常需要更新更新程序。有時候玩家會遇到不成功的STEAM更新,這讓很多用戶非常苦惱。怎么辦現在,小...

  • css中text indent,html中indent

    css中text indent,html中indent 相關圖片css首行縮進段落縮進非常實用,用P標簽可以起到意想不到的效果CSS中段落縮進的定義是通過文本縮進來實現的其參數和用法如下:語法:文本縮進:允許值:長度或百分比初始值:0文本...

  • 如何安裝固態硬盤,安裝固態硬盤

    如何安裝固態硬盤,安裝固態硬盤 相關圖片臺式電腦固態硬盤怎么安裝固態硬盤和硬盤有什么區別固態硬盤的開機速度比普通硬盤快得多固態硬盤沒有成像,讀取延遲也很小因此,如果hdd仍然是固態的,它們就有優勢所以,一些...

  • first letter,the first letter

    first letter,the first letter 相關圖片first的用法看到一些網站,一段文字開頭的第一個字很大,看起來很特別這叫做第一個詞的下沉效應CSS中有一個現成的語法可以使用,即:第一個字母讓我們首先理解:第一個字母語法描...

  • 筆記本電腦無法關機,筆記本電腦怎么關機

    筆記本電腦無法關機,筆記本電腦怎么關機 相關圖片筆記本電腦黑屏怎么辦在筆記本電腦的使用過程中,由于使用不當,存在一些問題和損失,可能會遇到各種各樣的筆記本電腦故障事實并非如此近日,不少用戶反映,在點擊關機后發現...

  • 筆記本電腦怎么連wifi熱點,筆記本連不上熱點

    筆記本電腦怎么連wifi熱點,筆記本連不上熱點 相關圖片筆記本連接手機熱點連不上網絡已經走進了家家戶戶沒有網絡,我們就無法瀏覽網頁、玩游戲、聊天和完成工作所以我們可以看到網絡的重要性筆記本電腦聯網后,如何設置WiFi熱點現在...

  • 舊照片制作,舊照片上制作什么文字

    舊照片制作,舊照片上制作什么文字 相關圖片怎么制作老了以后的照片一打開要處理的圖片選擇打開的圖像對象,然后選擇圖像編輯面板上的“調整顏色/自動顏色比例”命令,使圖像呈現更自然的顏色效果此操作后的效果如下圖...

  • 筆記本最新cpu天梯圖,電腦cpu天梯

    筆記本最新cpu天梯圖,電腦cpu天梯 相關圖片cpu天梯圖2018筆記本電腦的出現使我們的工作和學習變得方便然而,當用戶選擇筆記本時,他們會遇到困難事實上,選擇筆記本電腦最重要的是它的CPU性能排名,其次是個人喜好的電腦品...

關注微信

变脸官网查询