一、優化信息框架

舊版中TAB選項表形式單一，實際使用過程中長時間單一的選項樣式會使用戶產生視覺疲勞，降低體驗快感。為了提升產品敏感度，修改為按鈕圖標文字式瓷片卡，增加用戶緊迫感和對產品詳情的了解欲望。

 

對于產品分類表單展示從視覺上進行了調整，主要體現在層級關系、親密關系。目的是讓用戶表單填寫過程中區分層級按鈕，分類按鈕顏色降低透明度，從視覺層級上更舒服，更精致。操作按鈕放在右邊更符合用戶行為操作習慣，同時當多種產品分類表單時減少戶在行動時的困惑和猶豫，確保用戶在表單填寫過程中的流暢體驗，從而實現最終商業上的交易成就。

 

 

在舊版表單中分類按鈕都用了純色，按鈕位置不統一，按鈕本是輔助用戶快速做出選項的，但在這個場景中卻干擾了視覺。按鈕降低透明度幫助用戶預先區分出主要行動和次要行動，通過視覺語言強調主要按鈕，弱化次要按鈕，引導用戶進行選擇。修改“投保地址”減少手動輸入，提供用戶的歷史輸入項

 

在選項列表中，“是”“否”是選按鈕必須是互斥的，這意味著當選擇一個選項時，之前已選中的選項會被反選。因為有互斥的存在，選項內容只的兩個，所以這一場景中用開關按鈕更簡潔。

舊版前資料上傳列表，第一眼看到的是滿屏文件夾，而這些并不能幫助用戶進行瀏覽或操作，反而會造成視覺干擾。改版后對文件圖標大小，縮略圖尺寸，以及標題信息大小，進行整體調整，從而提升瀏覽效率。

 

調整文件圖標占比，突顯更為重要的標題信息。優化標題，時間信息文字比減弱，標題更明顯，提升文件瀏覽查找效率?？s略圖縮小排列與文件形式保持統一，視覺層級瀏覽理舒適。文件信息列表層級依次為：圖標 > 標題 > 時間 。

在資料上傳中文件與圖存在著兩種刪除交互方式，給用戶造成了困擾操作。改版后將圖片與文件的刪除操作展示形式統一，同時添加資料上傳資料可全部清除功能，給用戶減少了單獨刪除操作。

詢價表單是銷售人員最高頻的路徑，針對這個場景，視覺設計必須服從功能設計優先，緊跟設計潮流—極簡風格，打造高級感的設計理念，通過視覺設計區分信息層級，讓用戶操作、瀏覽時更便捷。表單從以上幾個維度進行優化：大小、重量、間距。

 

二、新增功能優化

在功能架構上進行視覺優化，整體設計中主要體現在：調整板塊結構，運用圖標設計、強化商機詳情內容屬性，提升點擊率，簡化設計，增強用戶粘性。

商機詳情的拜訪列表，增加“點評商機”功能。僅在未關閉/未作廢商機的拜訪記錄中增加“我要點評”，點擊“ 點評”可對拜訪記錄入評論，200個字以內。

 

1.關于評論排序

看最新的評論

用戶對于信息流的瀏覽方式永遠都是自上而下。當信息流相對固定時，團E寶都是內部人員對商機的查看評論，屬于熟人社交，評論數相對較少，在一屏內就可以看完全部的評論數，在這種情況下選擇倒序沒有必要。

看懂評論

針對已有的評論進行回復，評論之間的互動就導致評論之間不是相互獨立的，彼此存在關聯性。按照評論發布時間的正序排列，用戶自上而下的瀏覽方向，先評論的先看到，更能體現出評論之間的邏輯關系，可以讓用戶更好的厘清之間的關系。

要看有用/好玩的評論

所有跟評論相關的信息都可以作為排序的依據：評論時間、點贊量、被回復數。除了前面提到的評論時間，另一個比較常見的排序指標就是點贊量。但在商機詳情中卻不以點贊量為依據，因為拜訪記錄是以正序往下按排的。

 

2.正序排列 or 倒序排列

線型結構

線型的評論列表，從樣式來看，整齊劃一，簡潔明了。商機的評論雖沒有社交APP多，但是存在評論中間隔了很多其他人的回復，想要看一個問題就要爬樓去找對應的回復關系。因此想要完整的查看你倆之間的回復記錄是非常困難的，對于商機的及時性看清互動關系非常重要的。因此，一些產品選擇使用了樹型結構。

樹型結構 

樹型結構的設計我們需要考慮的是次級評論的展示問題。一級評論像是樹的主干，次級評論是依附于主干的分支。樹型結構會聚合展示所有相關的次級評論，用戶可以看到清晰的對話記錄。雖然商機的評論少，但是商機的評論信息去對銷售重要程度比較高，所以為了理清關系用了樹型評論。

評論更新頻率不是很高，基于產品定位，用戶希望看到圍繞一個觀點大家的討論記錄，所以更加關注的是評論之間的邏輯性。因此采用的還是正序排列，按照評論的發表時間依次展示，幫助用戶理解。

 

三、表單設計

1.標簽分類樣式

左標簽：左標簽在目前來說是最常見的一種標簽樣式。

頂部標簽：與左標簽相比，頂部標簽可以給輸入框的內容騰出足夠的空間。會占據更多的縱向空間，之前一屏就可以展示的內容，現在用戶需要滑動頁面才可以看完。

行內標簽：樣式看起來很適合手機端的表單設計，因為它可以極大的減少了視覺噪音。但當用戶點擊輸入狀態后，就看不到這些標簽了，那么用戶記憶力會很吃力，不利于用戶短期記憶。

 

2.輸入域符合預期

如果用戶輸入的地址過長，就會造成信息的展示不完全，這對用戶體驗來說是致命的。因為用戶在進行下一步操作之前都會對輸入的內容進行審核確認，如果連完整的內容都無法獲知或者獲知的難度較大，則用戶根本不會進行下一步操作，這就造成了操作流程的中斷。所以，我們在使用左標簽的時候，一定要考慮對多行文本的展示。輸入域的長度與預期輸入的內容成正比，確保輸入字段長度符合用戶心理預期，并能在表單中能完整呈現。

 

3.以簡馭繁

以證件類型和證件號為例，分開展示輸入會占用整體頁面的高度，相對B端產品來說能節省空間就節省空間。而證件類型、證件號碼兩者同時存在的，合并在一起合理利用空間的同時能讓用戶快速做出選擇，當用戶進入頁面時證件類型默認帶出用戶常選項。

 

4.*號的使用

在PC端沿用通用*符號習慣，來區分信息層級，但在移動端當表單中必填項多于非必填項時，每項表單中都加 * 只會給用戶增加識別難度，讓用戶陷入迷惘無法快速完成表單。當表單設計中，必填項多于非必填項時，隱藏 * 號標記，轉而通過暗提示語標記非必填項的形式來幫助用戶識別。

 

5.*號的總結

6.預輸入清除

根據需求可以在表單輸入框上有些內容是系統已預填了信息，無需用戶二次點擊輸入完成，但當用戶需要修改時，需要對信息進行逐字修改或長按信息點全選再刪除，這樣修改太過于麻煩，這種情況下可以考慮在輸入框內加一個刪除的icon，點擊icon直接清空當前列表框信息，這樣表單設計更高效。

 

四、減少手動輸入

1.聯動鍵盤

移動端的虛擬鍵盤由于受限于屏幕尺寸，在各種類型鍵盤間進行切換的成本較高，且在數字和各類中英文標點符號的輸入上效率較低。因此，在移動端長表單的設計中，需要更多考慮：默認調出哪種類型的鍵盤，才是當前場景下最為高效的選擇。如下面的案例所示：改為聯動鍵盤后，可以在同 1 個底部彈出層中，流暢地填寫完 3 個表單項，有助于打造更為便捷高效地填寫體驗。當連續多個表單項的輸入方式各不相同時，可考慮使用聯動鍵盤。

 

2.鍵盤匹配

根據填寫類型不同，呼出對應的鍵盤，省去用戶收起點開鍵盤的重復動作和表單上下填寫項的切換，讓填寫表單的過程更為順暢，用戶思考不被打斷。不應該把所有的輸入框都做成文本框樣式，用戶必須調起鍵盤一個字一個字地輸入，這種體驗是非常不友好的。

關于文本框是用全鍵盤還是九宮格，手機從最開始的功能機開始，就是直板手機，智能手機也是這樣演變過來的，功能機的時候用的就是九宮格，很多人都已經習慣了，還有九宮格在手機上的布局更加合理，全鍵盤看起來是把所有的字母都展現出來了，可是手機本身就只有那么大，全部展現出來，就會導致鍵盤的字母很小，看都看不清，對于很多人來說都打不快。

 

3.系統自動識別

根據表單需求，收集姓名、性別、出生日期、身份證號四個輸入項?？赏ㄟ^后臺技術的一些手段從身份證號中提取出信息，用戶原本要輸入4個項目信息，現只輸入2項信息輸入。身份證的倒數第二位可以判斷性別：奇數是男，偶數表示女，出生日期大家都能看出。而這樣操作成本大大下降，減少誤輸可能性。

1-2位省、自治區、直轄市代碼；3-4位地級市、盟、自治州代碼；5-6位縣、縣級市、區代碼；7-14位出生年月日，比如19820426代表1982年4月26日；15-17位為順序號，其中17位（倒數第二位）男為單數，女為雙數；

結合不同的場景去思考會發現無限多的做法，減少輸入項個數的目的也只是為了讓完成表單變得更加高效。

 

代替輸入

由于 OCR 技術的發展，拍照識別文字的速度和準確度都有了較大的提升，最常見的就是各大金融服務應用中拍照識別銀行卡號的功能。如下所示，被保人名稱、身份證。證件有效期可以通過OCR識別。如果采用手動輸入的方式，不僅效率低且輸錯可能性較大。在這里應用 OCR 技術，旨在降低輸入成本，提升用戶體驗。提供當前場景下的常用選項，用選擇代替輸入是最為基本的思路。需要注意的是，如果常用選項不能涵蓋用戶可能填寫的全部內容，那么手動輸入自定義選項的功能也要提供給用戶。

 

 預輸入

表單設計如：用戶在填寫長表單前已經在平臺填寫了聯系方式、名稱或其他信息，在用戶進行信息錄入時，可以提供合理的默認值有效簡化操作步驟，減輕用戶填寫表單的負擔，更快地幫助用戶完成表單內容的填寫。如果你確定對用戶足夠了解，在用戶進行信息錄入時，可以提供合理的默認值。因為對用戶來說，填寫信息永遠都不是一件有趣的事情，設置合理的默認值可以節省用戶的操作時間。

 

利用移動端設備能獲取的信息

盡管移動端在輸入上沒有那么便捷，但獲取到信息種類與精確度，卻具有一定的優勢。比如，移動端設備能較為精確地獲取到用戶當前的地理位置，這就為某些需要填寫位置的表單提供了便捷（如收貨地址、聯系地址等）。再如，調用通訊錄的功能也經常出現在各種需要填寫手機號的表單中。

 

提供用戶的歷史輸入項

一份表單中出現了多處相同類型的表單項，這時可以提供用戶的歷史輸入項供其選擇。另外，很多填單頁也會將用戶輸入的信息自動保存為常用收貨人等，同樣也是用到了這一方法。

 

4.二次確認——多場景考慮異常情況

移動端的使用場景比較廣泛，用戶在填寫場景較為不穩定，吃飯、行駛、過馬路等場景填寫，為了防止用戶誤操作而丟失已填信息的場景，需要在此時進行二次操作確認，確認用戶操作意圖。當然，如果用戶沒有對表單進行任何編輯，這樣的退出操作是不需要二次確認的。

 

5.流程閉環

原頁面表單填寫提交后，提示成功的彈窗還停留在表單填寫頁面中，只能原路返回，甚至還可以重復提交。優化表單后，點提交按鈕，跳轉提交成功的提示頁面，讓流程形成閉環。同時在結束任務時應給予用戶情感反饋，讓表單設計帶有溫暖情感設計，需求給予用戶積極向上的夸贊，在用戶沒有完成提交任務時，不應該給予用戶負面情緒。

 

五、表格設計原則

1.數字要右對齊

數字右對齊是為了方便比較時，首先看個位，然后是十位、百位。大多數人們也是這樣學習算術的——從右邊開始，向左移動，動態地傳遞數據。所以，表格中的數字應該保持右對齊

 

2. 文字要左對齊

文本信息從左向右讀。通常是按文字順序排序的方法比較文本信息：如果兩個條目以相同的文字開頭，就比較第二個文字，以此類推。如果沒有左對齊，對于有對數據進行比較時這種瀏覽文本會使人煩躁。

 

3.表頭與數據對齊

表頭通常應當遵循表格中數據的對齊方式。這是的表格垂直方向看起來更整潔，并提供了一致性和上下文環境。

 

4.不要使用居中對齊

居中對齊會使表格的行看起來“錯落不齊”，瀏覽表格會給人造成胡里胡涂感，常常要使用額外的分隔線和圖形元素。

 

5.有效的數字

有一種簡單的方法能讓你的表格看起來更整齊，就是保持一致的有效數字(一般情況下指小數點后的位數)，這樣每一列數據中的小數點后位數都是一樣的。有效數字細究起來就無盡無休，這里就不過多詳述，我的簡單建議就是：表格數字不是越精確越好，需要多少有效數字就顯示多少，不必太多。股票基金的有效數據又不同于此。

 

如果表單表格瀏覽或者使用讓人惱火煩躁，那是因為這些表格太爛了要背的鍋，完全沒有經過設計表單表格。設計是表格表單的關鍵，如果設計恰當，瀏覽比較復雜的數據會很容易，如果設計不妥，數據就無法理解且會傳遞錯誤的信息數據。在B端設計中對于信息繁雜利用如何利用狹窄的空間，仍然可以區分各元素，且不妨礙瀏覽使用，這就是設計時要考慮的?？此坪唵蔚谋澈笫遣缓唵蔚乃伎歼^程。

 

轉載聲明：本文來源于網絡，不作任何商業用途