科技一旦脫離了友好的設(shè)計(jì)，就會(huì)給用戶帶來(lái)情感上的傷害，它能讓人憤怒、生氣、暴躁，甚至引發(fā)欺凌、造成不公平等現(xiàn)象。而設(shè)計(jì)師在科技影響人類生活之路上發(fā)揮著重要作用，他是科技的守門人，最大的職責(zé)是確保這扇科技之門盡可能向更廣泛的受眾敞開，讓他們?cè)诋a(chǎn)品的體驗(yàn)過(guò)程中，開心、愉悅和高效?！獑碳{森·沙利亞特《設(shè)計(jì)的陷阱：用戶體驗(yàn)設(shè)計(jì)案例透析》

眾所周知，政務(wù)類產(chǎn)品是出了名的用戶體驗(yàn)重災(zāi)區(qū)，相信大家在使用這些政務(wù)產(chǎn)品過(guò)往的經(jīng)歷中都陷入過(guò)數(shù)不清的用戶體驗(yàn)陷阱，比如流程太過(guò)繁瑣、操作成本過(guò)高、按鈕設(shè)計(jì)過(guò)小等等。從本期開始，設(shè)計(jì)大偵探將會(huì)以一種全新的創(chuàng)作形式進(jìn)行產(chǎn)品拆解，也就是先對(duì)產(chǎn)品進(jìn)行用戶體驗(yàn)診斷，再對(duì)產(chǎn)品進(jìn)行設(shè)計(jì)重構(gòu)升級(jí)。

第一期，我們選擇的產(chǎn)品的是一款 10 億用戶都要使用的國(guó)民 APP 產(chǎn)品——掌上12333。這款由全國(guó)人力資源社會(huì)保障政務(wù)服務(wù)平臺(tái)為老百姓打造的移動(dòng)APP產(chǎn)品，以「民生為本，人才優(yōu)先」為服務(wù)理念，致力于向全國(guó)用戶打造“一網(wǎng)通辦”的便利服務(wù)，接下來(lái)，就跟著廖爾摩斯一起來(lái)拆解這款產(chǎn)品吧！

往期拆解：

一、產(chǎn)品畫像

1. 產(chǎn)品介紹

「掌上 12333」是全國(guó)人力資源社會(huì)保障政務(wù)服務(wù)平臺(tái)為用戶打造的移動(dòng) APP 產(chǎn)品，首個(gè)版本發(fā)布于 2020 年 2 月，主要為用戶提供養(yǎng)老保險(xiǎn)待遇資格認(rèn)證、求職招聘、社?？ú樵?、職業(yè)資格證書核驗(yàn)、社會(huì)保險(xiǎn)關(guān)系轉(zhuǎn)移等人社線上服務(wù)。

拓展閱讀：

「全國(guó)人力資源和社會(huì)保障部」是統(tǒng)籌機(jī)關(guān)企事業(yè)單位人員管理和統(tǒng)籌城鄉(xiāng)就業(yè)和社會(huì)保障政策的中國(guó)國(guó)家權(quán)力機(jī)構(gòu)，主要職責(zé)包括擬定相關(guān)法律法規(guī)、促進(jìn)就業(yè)、制定勞動(dòng)、人事仲裁制度等。

2. 產(chǎn)品目標(biāo)

作為全國(guó)人力資源社會(huì)保障部的移動(dòng)端服務(wù)渠道，掌上 12333 以「民生為本，人才優(yōu)先」為服務(wù)理念，致力于向全國(guó)用戶打造“一網(wǎng)通辦”的便利服務(wù)，無(wú)論用戶身處何方，都能通過(guò) APP 網(wǎng)上在線辦理。

分析思考：

從產(chǎn)品目標(biāo)可以看出，掌上 12333 作為一款全國(guó)級(jí)的民生產(chǎn)品，不需要像商業(yè)產(chǎn)品一樣去思考引流、留存和轉(zhuǎn)化這些環(huán)節(jié)，它的目標(biāo)簡(jiǎn)單而又直接，為用戶提供方便、快捷、高效的體驗(yàn)服務(wù)。

3. 用戶目標(biāo)

相比過(guò)去我們需要舟車勞累的去社保辦事大廳排隊(duì)叫號(hào)的場(chǎng)景，現(xiàn)在通過(guò)掌上 12333，就能實(shí)現(xiàn)隨時(shí)實(shí)地，通過(guò) APP 在線辦理了。所以掌上 12333 的本質(zhì)是一款工具產(chǎn)品，用戶使用這款產(chǎn)品的最大的訴求就是在線辦事，比如進(jìn)行失業(yè)登記、個(gè)人養(yǎng)老金賬戶開立、社保轉(zhuǎn)移申請(qǐng)等。而高效、簡(jiǎn)潔、易用，就是用戶在使用這類產(chǎn)品的最大訴求。

4. 使用場(chǎng)景

關(guān)于使用場(chǎng)景，我們從掌上 12333 的五大核心服務(wù)（就業(yè)創(chuàng)業(yè)、社會(huì)保障、人才人事、勞動(dòng)關(guān)系和社會(huì)保障卡）可以看出，凡是和社會(huì)保障以及人力資源相關(guān)的事務(wù)，都可以觸發(fā)掌上 12333 的使用場(chǎng)景。比如失業(yè)了，想要領(lǐng)取失業(yè)救助金；和公司發(fā)生勞務(wù)糾紛了，可以申請(qǐng)勞動(dòng)調(diào)節(jié)仲裁等等。低頻、但特別重要，和你的日常生活息息相關(guān)。

二、產(chǎn)品拆解

1. 首頁(yè)

「首頁(yè)」作為整個(gè)產(chǎn)品權(quán)重最高的頁(yè)面，主要引導(dǎo)用戶快速完成操作目標(biāo)。從內(nèi)容布局看，主要分為頭部（位置選擇和搜索）、金剛區(qū)（掃一掃、電子社?？?、12333 客服和消息中心）、熱門服務(wù)、最新資訊和推薦專題六個(gè)部分，這樣的設(shè)計(jì)中規(guī)中矩，雖然沒有亮點(diǎn)，但也具備一定的可用性。

2. 服務(wù)

人社服務(wù)其實(shí)是一個(gè)非常龐大的業(yè)務(wù)體系，它主要分為就業(yè)創(chuàng)業(yè)、社會(huì)保障、人才人事、勞動(dòng)關(guān)系和社會(huì)保障卡五大服務(wù)。每一大類又包含二級(jí)分類和三級(jí)分類，合計(jì) 66 個(gè)服務(wù)。

這個(gè)欄目整體的體驗(yàn)非常糟糕，產(chǎn)品設(shè)計(jì)師并沒有考慮過(guò)由于信息量過(guò)大、長(zhǎng)時(shí)間瀏覽會(huì)帶來(lái)視覺疲勞，甚至連默認(rèn)收縮這樣的基礎(chǔ)功能都沒有設(shè)計(jì)，這就給用戶造成非常大的操作困擾。面對(duì)琳瑯滿目的功能，不知如何下手，甚至由于服務(wù)名稱字?jǐn)?shù)過(guò)長(zhǎng)，根本無(wú)法看清，造成了很多盲目的操作。

其次從視覺層看，掌上 12333 的視覺設(shè)計(jì)由于對(duì)全局沒有做視覺風(fēng)格的統(tǒng)一和規(guī)范，和首頁(yè)的問題一樣，界面形式單一、設(shè)計(jì)感弱，最終導(dǎo)致視覺體驗(yàn)非常差。

①辦理流程頁(yè)面

在政務(wù)類產(chǎn)品的操作場(chǎng)景中，流程辦理是一個(gè)非常重要的環(huán)節(jié)，這是用戶使用產(chǎn)品的核心目標(biāo)，而最終決定用戶在產(chǎn)品操作中的用戶體驗(yàn)，表單的設(shè)計(jì)就非常重要。掌上 12333 的各項(xiàng)服務(wù)辦理流程大同小異，一般是用戶提交基本信息資料，提交申請(qǐng)以后，等待后臺(tái)審批。

我們選擇了「失業(yè)登記處理」功能進(jìn)行測(cè)試，可以發(fā)現(xiàn)，整個(gè)表單的設(shè)計(jì)存在諸多問題。第一，沒有智能預(yù)設(shè)，這導(dǎo)致內(nèi)容過(guò)于臃腫，不僅增加用戶的時(shí)間成本，而且會(huì)給用戶制造恐懼的情緒；第二，設(shè)計(jì)組件不規(guī)范，沒有考慮到各種可能出現(xiàn)的操作反饋、提示狀態(tài)，所以導(dǎo)致操作效率低下；第三，輸入框操作區(qū)域過(guò)小，這會(huì)讓用戶誤點(diǎn)擊，或者點(diǎn)不到，最終使用起來(lái)特別費(fèi)勁、惱怒。

②信息查詢頁(yè)面

信息查詢頁(yè)面權(quán)重雖然高，但是內(nèi)容比較簡(jiǎn)單，只需要用戶通過(guò)輸入信息就能進(jìn)行查詢。這個(gè)頁(yè)面的設(shè)計(jì)比較高效簡(jiǎn)潔，不過(guò)從視覺層看，其實(shí)還有很大提升空間去優(yōu)化。

3. 資訊

「資訊」包含服務(wù)信息、國(guó)家政策和時(shí)政要聞三個(gè)欄目，作為產(chǎn)品向用戶對(duì)外宣傳和知識(shí)普及的核心欄目，整個(gè)版塊的內(nèi)容主要調(diào)用人社部的公眾號(hào)，幾乎沒有任何設(shè)計(jì)而言，體驗(yàn)非常糟糕。

4. 我的

「我的」即用戶中心頁(yè)面，主要為用戶提供信息管理、辦件進(jìn)度查詢等功能。掌上 12333 的功能其實(shí)不多，所以這個(gè)界面的內(nèi)容也比較好設(shè)計(jì)，問題始終還是出現(xiàn)在視覺層，風(fēng)格不統(tǒng)一、圖標(biāo)不精致、欠缺設(shè)計(jì)感。

5. 小結(jié)

拆解到這里，掌上 12333 這個(gè) APP 產(chǎn)品其實(shí)就診斷完了?？梢钥闯?，掌上 12333 目前在前端展示出來(lái)的產(chǎn)品功能還是比較少的。接下來(lái)，我們從內(nèi)容、交互和視覺三個(gè)維度進(jìn)行總結(jié)，為下一步的產(chǎn)品重構(gòu)提煉出設(shè)計(jì)策略。

①內(nèi)容層

什么是內(nèi)容層？簡(jiǎn)而言之就是一個(gè)產(chǎn)品應(yīng)該設(shè)計(jì)什么功能內(nèi)容，它為產(chǎn)品目標(biāo)服務(wù)，又要為產(chǎn)品目標(biāo)負(fù)責(zé)。毫無(wú)疑問，當(dāng)下的掌上 12333 已經(jīng)具備很強(qiáng)的可用性，也就是滿足了產(chǎn)品的核心目標(biāo)，實(shí)現(xiàn)全國(guó)用戶無(wú)論身處何方都能通過(guò)在線辦理。

但在我們體驗(yàn)下來(lái)以后，我們可以看出內(nèi)容層的設(shè)計(jì)中規(guī)中矩，甚至非?？斩?。比如首頁(yè)、審核查詢、資訊、用戶中心這些欄目，由于缺少內(nèi)容，才導(dǎo)致整個(gè)產(chǎn)品單薄、空洞，就像你去吃一頓只有米飯沒有配菜的重慶火鍋，能吃，但難受。對(duì)內(nèi)容層的重新規(guī)劃，是下一步產(chǎn)品重構(gòu)的重點(diǎn)。

②體驗(yàn)層

我把交互和視覺合并一起總結(jié)，因?yàn)檎麄€(gè)掌上 12333 的產(chǎn)品體量比較小。如果從視覺感官去感受，整個(gè)產(chǎn)品給用戶的第一印象就是視覺設(shè)計(jì)太過(guò)粗糙，幾乎毫無(wú)設(shè)計(jì)感可言。這主要是由于整個(gè)產(chǎn)品設(shè)計(jì)缺乏統(tǒng)一的設(shè)計(jì)方向和規(guī)范所導(dǎo)致的，當(dāng)然還有最基礎(chǔ)的設(shè)計(jì)審美能力。其次從交互層的體驗(yàn)也可以看出，政務(wù)類產(chǎn)品最大的通病之一就是只注重產(chǎn)品功能的開發(fā)，而忽略用戶最真實(shí)的體驗(yàn)感受。這個(gè)最主要的原因是設(shè)計(jì)師并沒有遵循最基礎(chǔ)的用戶體驗(yàn)設(shè)計(jì)理論導(dǎo)致，比如尼爾森十大可用性原則、格式塔原則等。

好了，在對(duì)掌上 12333 進(jìn)行全面的拆解和診斷以后，我們已經(jīng)找到了這個(gè)產(chǎn)品真實(shí)存在的問題，在下一篇，我們將會(huì)講解重構(gòu)掌上 12333 的設(shè)計(jì)思路和設(shè)計(jì)方案，歡迎關(guān)注！

參考資料：

1. 全國(guó)人力資源和社會(huì)保障部官網(wǎng)
2. 不見面服務(wù)之四——政務(wù)平臺(tái)篇
3. 金寶信社?？萍脊倬W(wǎng)

歡迎關(guān)注作者微信公眾號(hào)：「設(shè)計(jì)大偵探」