工業制造場景下的B端軟件設計有什么特點？

要了解行業KNOW HOW，光坐在辦公室自我分析和信息檢索是遠遠不夠的。于是我們實地進入了多家工廠，與用戶進行一對多的調研，輸出了多份調研報告，整理了工廠用戶的一些共性特征及問題。

1. 多角色協同的網狀結構

C端場景中的客戶就是最終用戶，是單線程的線性關系。而在B端場景中，跑通整條鏈路需要從前期的數據創建，到過程中的生產操作，再到最終數據結果采集和分析。涉及到的用戶角色就可能達到十幾種，不同行業從業者會帶有自己的認知習慣，不同角色之間多訴求也存在較大差異。

2.端側載體多樣化

B端用戶觸點已由原來中心化的WEB端，擴展到各式各樣的終端智能，彼此之間進行著協同的服務。在工業場景中，電腦端作為管理員做工單創建和任務查看等功能的工作后臺。手持的掃碼智能終端承擔著每道工序的過站任務，穿戴設備手表接收任務并給一線工人下派任務，PAD端用來給車間主任查看任務排版和首件檢測的載體等。

3.鏈路長且場景差異大

工業場景的完整使用鏈路往往都較長，以工廠的一個基礎工單流程舉例，完成周期從幾個小時到幾個月不等。每一個鏈路對應的線下場景也是不同的：有些可以坐在辦公室內用電腦完成，有些是站立在車間某個機器上或是一些貨物倉庫中完成。環境，噪音，光照，用戶站立的位置等等都會對信息吸收造成影響，忽略場景做設計，容易出現很多無意義的產品功能。

物聯網技術特征下的體驗精益化設計

1.真實場景決定一切

在剛開始做工業SaaS設計時，由于對于行業領域了解不夠深入，也走過不少彎路。以工單報工舉例，我們參考了部分競品，設計了一套比較通用的報工流程：通過手機獲取到工人的工單數據，然后在手機端填寫整套的報工流程：點開工單——找到對應工序——填寫數據數量——填寫和拍攝不良品照片——點擊報工按鈕——完成報工。

設計完成后，當我們去多家無塵車間調研時發現，手機是不允許被帶進車間的，等到工人交接班時再拿出手機去報工，已經是一個非常延時的信息了。其次工人日常會帶著硅膠紙套，在使用軟件屏幕時是不太方便操作的。同時在工廠內工人的穿著對于感知會有一定影響，所以在這樣的場景中手機的報工方案是不會被采用的。

繼續觀察發現，“掃碼終端PDA”是工人每天用的次數最多且非常頻繁的手持端，我們通過PDA上“掃碼過站”的功能，直接在后臺自動判斷道用戶是否做完某道工序，獲取對應人員信息/完成數/良品率等信息后，在后臺完成提交。讓用戶無感知的完成了報工流程。優化后的流程至少節省了用戶5個步驟?？蛻羰褂煤螅卜浅M意這次報工方式的優化，所以對于行業屬性強領域深的，充分調研至關重要。

2.結合多端特征，增大信息感知

想象你來到一個車間，周圍沖刺著嘈雜的機械制造聲、各類報警設備的閃爍、頻繁執行著的機械動作、獲取的軟件信息受限于眼前這臺機器上的屏幕，不同設備的性能不同也進一步導致你在接觸信息的效率是在逐漸衰減的。如何能確保自己能在一堆信息中快速獲取有效信息并且完成工作呢？

我們將信息分為三類：

(1) “強感知”類：判斷為重要狀態需要第一時間被察覺的數據。比如設備狀態，待辦通知，任務計時等。

(2) “可感知”類：容易被查詢到的信息，必要的操作功能等。比如掃碼操作，過站的數據等。

(3) “無感知”類：非必要且較為繁瑣的次要交互行為。這類信息需要被“隱身”，為用戶吸收信息減負。比如按鍵輸入替換成掃碼輸入，手動報工替換由掃碼報工等。

以手表舉例：作為最貼近用戶的穿戴設備，可以配合硬件的振動觸感快速傳遞數據，主要完成“消息下發的接收”，“任務開始的計時”，發生“危險情況的快速上報”等。當后臺推送一個任務給用戶，在手表桌面會出現任務計時器，當用戶逾期未完成，那么任務計時器將提醒用戶逾期時間，在順利完成任務后用戶能獲得對應的績效獎勵，對于重要信息做強感知的展示，保證工單的實效性和完成率，也能調動用戶的積極性。

作為手持掃碼終端的PDA：用戶的使用場景集中在工序的“掃碼過站”上，用戶每天掃碼次數非常頻繁，最多一次高達幾百次，我們著重在引導用戶使用“批量掃碼”過站，通過掃碼槍依次掃碼進入列表頁，一次性掃批量掃入，大幅減低手工操作的頻次。過站的狀態在PDA上的狀態欄采取非常醒目的色系+標識做展示，每個產品的詳細信息在同一屏內的下半部分同時呈現出來，讓用戶易感知到。

3.結合多角色，以任務效率為中心

和物聯網場景下C端應用作對比，其用戶是單線程的，以單點查看和控制設備為目的，家庭用戶需要控制的智能設備數量基本不會太多，如果做了錯誤的操作，造成的后果相對不會太高。產品功能對于用戶來說認知門檻也相對較低。所以在整體體驗上對娛樂性要求更高。

再來看看工業場景，用戶從D端的開發者到B端管理者、決策人員再到一線工人，角色之間同樣是相互影響的，工廠設備數量非常多，一旦操作失誤可能會造成不可逆的影響，所以用戶對產品的訴求更注重效率的穩定性和操作的正確性。再加上行業屬性的復雜程度，對于用戶來說上手有一定的使用門檻。

所以在B端場景中，我們定義為以任務效率為中心的設計。對于信息的展示，工業場景需要更關注在重要數據透傳上，一定要保證信息是明確，完整且精準的。在設備狀態傳遞上更要保證時效性和高透傳性，而對于需要用戶操控的區域，需要提供足夠的引導和提示，減少誤操作的可能性。

不同角色對數據展示的訴求也是不同的，比如在同一個數據分析屏中，對于一線工人，他所關心的是當前這個設備的狀態和工單任務任務等具體的數據，車間主任最關心的則是這個車間整體設備是否運行正常及不良品率，而工廠管理層則是關心整個工廠的能耗/人效/產能等。當確定不同用戶群體的需求后，針對每一類群體采取對應的數據分層方式，最終完成多套數據展示方案。

在物聯網新技術的加持下，制造工藝越來越精益化，工廠職能分工也越加明確，對于過程體驗也會有更精細的要求。

從多角色，多端側，長鏈路等幾個方面，可以看出B與C端很明顯的差異性，基于這些物聯網的特征，通過精益化設計思路去打磨B端場景，達到較好的用戶體驗：

(1) 對于不熟悉的行業領域，需要深入理解行業，洞察問題，真實場景決定了產品的最終形態。

(2) 對于端側的多樣化，合理的運用各個端的優勢，保證信息傳遞的有效性，進行結構化的設計.

(3) 對于多角色多場景相互關聯的數據網絡，針對不同角色的需求做出對應的方案。以用戶任務效率為中心。

后續我們也會繼續在人，場，設備，數據四個方向，去完善從（設備）上云到（產線）全貌化展示再到（人員）效能的精益化管理，最終（數據）可視化做全方位的數字化升級的理想閉環。

IoT讓我們開始重構人與物，物與物的關系， 好的產品體驗也就必然需要做到更好的設計品質，更高效的體驗流程，并且能在同質化嚴重的B端產品中，贏得用戶認可或好的口碑。

原文地址：AlibabaDesign （公眾號）

作者：阿里云loT

轉載請注明：學UI網》生產力體驗—多端多角色的精益協作

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

RULE 1 斷根

「斷根」是指將發生錯誤的原因從根本上排除，不給用戶犯錯的機會。在交互設計中，最常見的設計方法就是使用置灰 / 禁用效果。

  案例 1    美團外賣對于在休息 / 暫不接單的店鋪，除了使用「休息中」的 Tag 進行標注，還使用置灰的效果，讓用戶對于店鋪營業情況一目了然，不會誤點進入：

  案例 2     支付寶理財產品閱讀協議，在用戶勾選前一直會顯示「請勾選」，頁面的確定按鈕在協議簽署前為不可點擊狀態：

案例 3     用戶用 Gmail 寫郵件時，可以設置郵件為「保密郵件」，收件人將無法進行轉發、復制、下載或打印郵件；也可以設定保密郵件的可讀時間，到期后郵件內容會自動消失，來確保信息的保密性：

RULE 2 保險

「保險」是指按照順序運行兩個以上的動作才能完成操作，多加一步操作步驟，給用戶創造更多的思考機會和時間。在交互設計中的典型用法是增加彈窗、鏈接等形式提供更多信息，讓用戶進一步確認。

案例 1     微信轉賬，連續轉給好友同樣金額的兩筆錢，且第一筆好友未接收，系統會發出提醒，讓用戶再次確認，避免重復打款：

案例 2     被從微信群踢出的用戶，如果再次申請加入該群，該群的管理員可以在申請中查看 ta 曾經在群中的聊天記錄，判斷 ta 是否適合入群：

案例 3     在一些重要的決策或不可逆的操作行為中，二次彈窗確認尤為常見。比如當用戶在填寫信息時點擊「作廢」，系統會給出提示讓用戶再次考慮：

RULE 3 標示

「標示」是指運用線條粗細、形狀、顏色等區別以方便識別，提高易識別度。交互設計中多以顏色鮮亮的小色塊、圓點等進行示意。

案例 1     釘釘的圖片保存到本地的功能，做了很好的提示，下載過的圖片會帶有綠色的「對勾」，避免用戶多次重復保存圖片：

案例 2     微信發朋友圈的分組功能，你可以選擇「誰可以看」和「誰不可看」，可以看用的是綠色字，不可以看用的是紅色字，很易于區分，不用擔心會搞混或錯用：

案例 3     釘釘的會議未按時參會的提醒，用紅色標簽對時間進行重點標示：

案例 4     使用 Sketch 導出同名同格式的文件時，系統會在彈窗中將「取消」作為主按鈕的形式呈現，避免用戶因為忘記重命名而覆蓋之前的導出的同名文件：

案例 5     釘釘和阿里的出差系統打通，當員工提交了出差申請，到了出差的那一天，釘釘上狀態會自動切換成 「??出差中」，方便其他同事了解你的狀態：

案例 6     Google 的標簽頁，可以被分組，標記顏色和重命名，可以一定程度上緩解因標簽頁開得太多而找不到的情況：

案例 7     疫情期間，很多小區的大門僅供行人通行，只有個別大門是行人和車輛都可通行。高德地圖 App 會給每個小區的門標注好通行權限，方便開車的用戶選擇合適的門進入小區，不過個人感覺這個信息可以標注得更明顯一些：

RULE 4 警告

「警告」是指將不正?；蚣磳⒁鰡栴}的情況，通過顏色、燈光、聲音、動效等明顯、特殊的方式進行警告，提醒用戶及時修正錯誤。交互設計可以借鑒工業設計中的報警器等產品的功能，用彈窗、燈光和聲音等對用戶進行提示。

案例 1     在鐵路 12306 上購票時，如果選的列車時間距離現在 1 小時內，會彈出彈窗提示發車時間與現在較近，提醒用戶注意行程時間：

案例 2     京東 App 會在用戶使用移動網絡播放的環境下，提示用戶注意流量損耗：

案例 3     上海的買菜 App 在疫情期間菜不好搶，盒馬會在你加購每一件商品的過程中，都提示運力不足，讓用戶再做考慮：

原文鏈接：長弓小子（公眾號）

作者：元堯

轉載請注明：學UI網》案例錦囊｜交互設計中「防呆手法」的巧妙應用！

共分為方法和案例兩篇。本篇為方法篇。

無論是發現了問題進行集中地優化，還是作為一種優化制度持續優化，優化專項持續的時間都不會太短。為保證順利進行，在前期需要作出明確的規劃。

規劃需要結合產品的目標與規劃，與產品側形成合力。所以規劃要與產品、技術共同制定。

制定體驗規劃的五個要素

一般需要明確以下內容：優化范圍、問題獲取、優化目標、參與人員、時間節點。

體驗專項的五個階段

需要注意的是，規劃要清晰、明確、可執行。

可以將整個項目劃分為前期啟動、問題獲取、方案產出、需求落地、項目復盤五個階段。

每個階段均需明確：「時間」、「人物」、「任務」、「產出」。

在這個環節，我們需要整理已有的體驗問題，并在必要時進行補充調研，對問題有更全面、更細節的認識。

如何獲得體驗問題？

體驗問題通常來自五個方面：用戶挖掘、設計走查、競品參考、老板反饋和產品提供。

如何使用這些方法？

以上方法可以綜合使用，例如用戶反饋某個功能有問題，可以設計自查看問題是否清晰，可以做用戶觀察看實際使用情況，可以通過數據分析獲取操作細節，也可以參考競品了解不同的解決方案。

將方法按照使用場景、問題的指向性和結論類型進行分類，大家可以根據具體情況靈活選擇：

區分壞點、優化點和需求點

首先我們來明確三個概念：

壞點：有明顯體驗問題的問題點，體驗層面。

優化點：針對一個或多個壞點的解決方案，設計層面。

需求點：一個或多個相關優化點組成的需求點，或目前沒有滿足的需求，產品層面。

從問題解決角度來說，它們不僅僅是不同階段的產物：

我們獲得問題的最初，壞點、優化點、需求點可能同時出現在各種信息源中，混雜在一起。后續需要把壞點轉化為優化點，成為問題解決方案。解決方案再拆分整合成為一個個需求點，進入產品計劃，推動落地。

而且對于把握問題的本質，也至關重要：

優化點、需求點，如果追根溯源，都可以對應到體驗上的壞點。我們收集到的優化點和需求點，可能并不是當前最好的解決方案，需要挖掘出對應的壞點，制定最優方案。

如何還原為壞點——追問法

只要不斷地追問，就可以挖掘出壞點。

例如在審批流程中：

用戶：我想要個點一下系統就能發通知給處理人提醒TA審批的功能。（這顯然是個需求，需要還原為壞點）

追問：什么情況下要提醒TA審批？

用戶：有時候時間緊迫，不審批就耽誤事了；有時候雖然不耽誤事，可領導沒批感覺心里不踏實。

追問：什么時候比較緊迫？

用戶：比如考勤，我今天請假，但明天就是考勤截止日了，必須立即批才行。

追問：為什么想要系統發通知？

用戶：因為如果我直接提醒老板，我不太好意思，感覺系統提醒能好一些。

ok，至此，我們基本明確了用戶的體驗壞點：部分緊急流程需要及時去提醒審批，部分流程審批人想盡快結束，但申請人又不想以個人身份去提醒。

這個壞點需要深入洞察審批人未及時審批的原因，再給出解決方案很多，且不一定要采用用戶提出的解決方案，而應該綜合考慮，選用最佳方案。

歸類—推導—轉化

1.將問題點歸類

分組是為了把同類或者相關的問題點聚合，尋找系統性的解決方案，而不是「頭疼醫頭，腳疼醫腳」。

舉個例子：

可按照不同頁面、控件、功能、流程、系統來進行歸類，如：申請表（頁面）、目錄樹（控件）、收藏（功能）、審批單（流程）、導航（系統）。

2.推導出優化方案

這個也是設計師最拿手的議題——「如何解決問題」，即針對一個/組用戶痛點去設計方案。這里可以應用平時方案產出的各種推導方法，包括創意方法。

同時應該注意到，問題也許不能僅通過設計手段解決，所以此過程需要產研同學參與，確保方案有效且可實現。

3.轉化為具體需求

方案只有轉化為具體需求，才能進入產品規劃、落地上線。這也是重要的一步。

優化方案和需求的粒度不同：有時候需要把優化方案拆成不同的需求分拆上線，有時候一個需求又能同時涵蓋多個優化方案。這需要根據優先價值，結合產品側的規劃進行。

如何判斷優化價值

每個問題優化價值是不同的，我們可以從產品側、用戶側、數據側三個方面去衡量：

產品側：看可行性。是否契合產品的中長期目標？是否符合產品的發展節奏？是否易于技術實現？時間資源成本如何？

用戶側：看影響力。是否是用戶使用的核心流程、關鍵頁面？影響的用戶范圍多大？用戶角色的權重（主要指B端）是否較大？

設計側：看價值感。設計的ROI如何？能否體現設計的專業度？能否提升設計的話語權？

設計師雖然主導了體驗優化專項，但又不掌握開發資源，如何更好地推動落地呢？需要掌握一些技巧。

推動落地中的四個對齊

對齊是為了及時對齊信息，減少團隊中的信息差，使團隊成員互通有無。不但可以提升協作效率，還能使大家感到被尊重和需要，使大家擰成一股繩。

四個對齊包括目標對齊、進度對齊、方案對齊和效果對齊。

目標對齊：確保在項目啟動和各個階段產品、設計、技術各方達成統一的目標?？梢酝ㄟ^啟動會和重要節點會議進行對齊。

進度對齊：項目周期比較長時，需要注意各階段的進度對齊，掌握進度和風險。方式有排期進度表、定期例會、定期郵件等。

方案對齊：這是比較容易忽略的一點。需要產品、設計、技術甚至用戶做方案對齊。我們目標明確，是為了切實解決用戶的體驗問題的，方案一定要有效，且可以實現。所以要關注方案是否能解決用戶問題（方案評估、測試）、是否能夠技術實現（方案評審）、方案實現效果（方案驗收）。這點做得不好，優化效果就要大打折扣。

效果對齊：上線后需要針對兩個效果進行對齊：一是優化效果如何、是否達成了目標（效果評估）。二是項目運行得如何，有什么經驗和教訓（復盤總結）。及時的團隊復盤，有利于大家揚長避短、取得更好的成績。

形成長期的體驗優化機制

對于體驗問題，我們不能寄希望于體驗優化專項「畢其功于一役」，而是要建立長期的體驗優化機制。

包括：定期整理用戶反饋、定期走查、定期與產品技術溝通優化計劃、階段性復盤等，建立良好的體驗優化通路。

相信看完文章后，大家對「主導和推進體驗優化專項」的方法有了一定了解。后續我們將會發布實戰篇，分享具體實例。

原文地址： 58UXD（公眾號）

作者：環鐵藝術家

轉載請注明：學UI網》設計驅動！體驗UP！高手設計師必備工具包

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

本篇文章將圍繞單選、復選、撥動開關三種選項元素的設計細節及使用場景展開分析，希望能幫助新手設計師避開選項設計的誤區，為用戶打造出更好的操作體驗。

一、單選：獨一無二

1.什么是單選？

單選按鈕最早來源于老式的汽車收音機上的電臺頻道的切換按鍵，按下其中的一個按鍵就成為了被選中狀態，其他就會被彈出，用戶可通過這種方式快速切換不同的電臺。

在UI設計中，單選是指當界面中存在兩個或以上的選項時，且各項之間相互排斥，用戶僅能在選項列表中選擇其中的一個來使用，即便反復選擇，最終的結果始終獨一無二。單選框有選中、未選中兩種狀態（極少數不可選），主要通過填充和描邊互換的樣式將當前狀態反饋給用戶。

單選是一種較為精簡的模式，它至少包含兩個選項，為了提升操作效率，需要盡可能的將所有選項展示給用戶，無需多余的操作和思考，即能快速完成任務。如果是必填選項，最好提供一個與當前用戶較匹配或選中率最大的一個選項作為默認值，即便默認值有誤，對用戶也不會有什么影響，因為用戶本來就需要去操作，可一旦匹配到對應的用戶，就能免去這一步的作，且默認值是經過多方面分析、反復推敲后才進行預設，只會是有益無害。

2.單選組件樣式

1）按鈕式

按鈕樣式適合用在選項不多、文案不長的場景，可平鋪在界面中或以彈窗的方式呈現。例如，購買衣服時，品牌、尺碼、顏色都可以設計成按鈕樣式。

2）圓形組合

未選中都是淺灰色描邊的圓形，選中后，Android常見的是描邊變主色+內圓點填充，而iOS更多則是描邊變填充+對勾圖標組合。其實這些不重要，真的沒必要糾結是用圓點組合還是對勾組合樣式，只要在同一個產品中統一樣式即可，用戶不會因為這兩種表現方式的不同而影響后續的操作。

3）對鉤

對勾樣式經常出現在彈窗列表選項中，只有選中后才會有“?”標記，相比圓形組合，給用戶的引導性更強。

在單個任務中，首次進入選擇頁面時，列表中沒有任何標記（有默認選項除外），選中條件后，標記對勾的同時，無需其他操作即自動進入下一步任務流程，再次回到選項列表時，系統會標記上次的選擇作為參考。另外，這種樣式不會太過于局限選項的數量和字數。

4）選擇器

通常作為表單項以彈窗的形式出現，適合二級、三級聯動選項。例如：選擇地址（省/市/區）、日期（年/月/日）、時間（時/分/秒）等選項較多且具有關聯性的選項組。

3.單選的使用準則

首先要確保單選組件的可用性，所有單選項需要清晰的呈現給用戶，避免嵌套或隱藏二級單選，否則會影響結構的識別性。

其次為確?？勺x性，單選組件的布局要符合用戶認知。選項較少且標簽較短時，使用多行多列的按鈕式布局比較常見，例如電商APP的商品屬性選擇等；標簽較長則使用圓形圖標、對鉤樣式單列多行顯示，例如選擇退款原因；聯動選項需根據關聯的等級數量，在選擇器中多列顯示，例如三級聯動地址，省、市、區三列并行。如果將選項毫無章法的平鋪、標簽/圖標上下排布，會造成視覺動線混亂、內容緊湊及一些不可預知的問題出現。

4.提供默認選項

如果可以的話，盡量給用戶提供一個默認選項，這并非隨意設定，需要經過多方面分析綜合決定。舉個例子，你的產品屬社交類型，大多數為男性用戶，那么將男性設定為默認的性別選擇，這類用戶就可以直接跳過這一步，節約了大量用戶的操作成本，即便面對的是女性用戶，這也不影響原本就需要手動選擇的步驟。默認選項需合理設定，切不可亂用，否則一些“偷懶”的用戶并不會更換默認選項，導致后續數據分析的精準度。

二、復選：循環往復

1.什么是復選？

復選操作不會像單選那樣出現信息阻隔，也沒有撥動開關那么強的視覺干擾，通常包含一個或多個選項供用戶選擇，其選項條件不是互斥的，用戶可從中選擇一項或者多項，具體情況則根據選項條件的限制而定。

1）選擇一項

一些設計師將復選理解為多選，且先不論對錯，筆者想說明的是，多選只不過是復選的一種選擇方式。在真實的設計中，有很多場景是不設限的，我們可以將選中/未選中理解為“是/否、同意/不同意、開啟/關閉……”等意思。例如，注冊頁面中必定存在的「用戶服務協議」，單個選項可反復操作；管理系統或B端的批量操作、權限設置等，選擇其中的一項也可進入下一步操作流程。

2）選擇多項

強制多選一般會設定需選擇數量的下限和上限。例如：首次進入某些APP時，需選擇個性化定制標簽，通常最少不低于3項，最多不超過6項；還有，在填寫調查問卷的多項選擇時，最少選中兩項、不設上限等，這些就是復選中真正意義上的多選。

2.復選的使用準則

相比單選，復選需要配備提交按鈕，提交后才會記錄被選中的信息。對于批量性的選項操作，復選框的操作效率比撥動開關要高出許多，例如，在某些頁面開啟/關閉幾個權限，每個權限用單獨的撥動開關進行控制，完全沒問題，但涉及到幾十個權限的控制，這種批量操作使用復選框一定是最佳的選擇，只要用戶能清楚操作之后會發生什么即可。

3.常見的使用場景

1）標簽選擇

個性化標簽選擇中最為常見，在標簽文字、選項數量較少的情況下，使用外觀大小完全相同的標簽按鈕多列顯示，有助于用戶瀏覽，還能節約頁面縱向空間，用淺色描邊/主色填充或明暗等級來區分選中/未選中狀態，部分產品還會在選中的狀態上增加一個小圖標（?、+/-），區分會更加明顯。這種方式切記標簽不能過長，否則可能會導致文字折行或容器內很擁擠，不利于用戶閱讀。

2）列表選擇

當選項過多、標簽長短不一時，適合使用列表式選擇。WEB端常見的是圓角矩形勾選填充，例如管理系統的商品列表；移動端更多則是原型勾選填充，例如購物車，當然并沒有明顯的界定，所有頁面統一樣式即可。

4.未定狀態

與單選視覺樣式唯一不同的是多了一個未定狀態。常見于管理系統或B端，當選項存在多個子級時，只是某些子級被選中，但并未全部選中，這時父級狀態尚不確定，即為未定狀態。

三、撥動開關：白天與黑夜

1.什么是撥動開關？

撥動開關就像生活中控制燈泡的開關，它是在兩個互斥的選項中始終存在默認值、且操作會立即生效的按鈕，操作后必定是對立的選項，例如開啟/關閉、是/否、同意/不同意等。

2.撥動開關的使用準則

撥動開關必須表意明確，用戶在操作之前就能清楚操作后會發生什么，使用時，需遵循以下原則：

• 用于操作后立即生效的場景；
• 標簽和按鈕是兩個分離的視覺焦點，當用戶有可能產生疑惑、或標簽不足以言明時，需增加輔助文字予以說明；
• 主要用于控制全局，權重較高，針對單個任務流程的控制，請使用單選/復選；
• 默認就是開啟/關閉狀態，若存在子級，父級關閉的同時將子級隱藏（避免置灰）；
• 當操作有風險時，必須給予明確的提示；
• 避免大面積使用，如果存在太多需要開啟/關閉的條件，建議使用復選；

3.背景與文案

撥動開關的背景通常只介于兩種狀態，關閉狀態下為置灰（全服通用），開啟后為綠色，也有很多產品將其設定為品牌色，統一顏色樣式即可。

輔助文案常見有兩種類型，第一種為當前狀態反饋，例如：獲取設備通知權限“消息推送已開啟/關閉”，這種反饋在應用中可靈活運用，尤其是在關閉狀態下，可起到一定的引導作用。第二種為標簽輔助提示，例如：操作后的好處或風險，告知用戶會發生什么，提前讓用戶有一定的心理預期。

四、單選控件的糾葛

1.單選框vs復選框

是用單選框還是用復選框，似乎是最好界定的，筆者查閱了很多資料，得到的信息是“需選擇一個選項用單選、多個選項用復選”，答案出奇的一致，這好像什么都說了（確實如此）、又好像什么都沒說（是個設計師都懂），當我們仔細分析之會發現，并非僅僅如此。

在PC端遇到兩個對立的選項（如：是/否、同意/不同意、通過/不通過）時，除了用兩個單選項之外，也可以使用復選框，尤其是在權限控制中，必定是復選。另外，移動端注冊登錄流程中，用戶服務協議也是最具代表性的復選框（同意/不同意二選一）使用案例。除去這些特殊的使用場景，其他大部分就直接單選。

2.單選框vs撥動開關

僅存在兩個選項時，單選與撥動開關的使用，有一些設計師就將其混淆了。筆者曾遇到過這樣的設計案例，有產品將性別（男/女）、O2O取貨方式（送貨上門/到店自?。┲挥袃蓚€選項的任務用撥動開關來呈現，操作后，通過開關上的滑塊左右移動+文案輔助來確定當前選中的條件。筆者認為，這種方式不可取，最大的弊端就是在當前狀態下，用戶并不知道另一個選項是什么，需要通過猜測或試錯來確定，無疑讓增加了任務的完成難度，也打破了用戶對常用操作的固有認知。

至于什么時候需要用撥動開關，上述3-2《撥動開關的使用準則》中有詳細說明，除此之外使用單選框，能解決設計中80%的單選與撥動開關的選擇性問題。

3.單選框vs下拉列表

選項較少可直接在當前頁面用單選框（選擇性別）、按鈕（標簽）呈現，當用戶需要在大量的選項中進行選擇時，PC端可使用下拉列表，移動端更多使用的是操作欄彈窗或跳轉到新頁面讓用戶操作。其實這方面沒有明確的界限，需根據使用場景以及選項的屬性根據實際情況靈活變動。

五、必備常識和使用技巧

1.選項的幾種狀態

單選、復選、撥動開關各自都有不同的狀態，在設計之前，設計師需要清楚地知道這些狀態所代表的含義以及不同的使用場景，避免后續在使用中給用戶造成困擾。

2.符合用戶認知的控件樣式

首先，選項框樣式應符合用戶認知，不能為了所謂的差異化、個性化打破用戶固有認知，而帶來額外的認知負擔。例如單選/復選常見的是圓形填充+對鉤（PC端）、圓角矩形填充+對鉤（移動端）兩種方式，雖然這并不是唯一，但至少不會出錯。雖然鼓勵跳出常規的設計思維做出改變，但一切都以不增加用戶使用難度、提供更好的用戶體驗為出發點，不然還不如不變。

3.注意對齊方式

按鈕式不用多說，文字跟容器上下左右居中。列表中的對齊方式無非兩種，選項框在前，文字和選項框都是左對齊，單選/復選均可采用這種方式；選項框在后，則文字左對齊、選項框右對齊，采用這種方式的單選居多；撥動開關則是全網統一，標簽左對齊，開/關右對齊。

4.清晰簡短的標簽

選項標簽需清晰簡短、直接表達核心含義，盡量避免否定的表達方式，以免用戶產生誤解。像撥動開關這種兩極分化的選項，當用戶不清楚對立的選項內容時，可以使用副標題進行描述，讓用戶在操作之前有一定的心理預期。

5.批量選擇、節約操作成本

雖然都是將選擇權交給用戶，但面對不同的場景，需提供一個「全選」操作，幫助用戶一次完成多個重復的操作，降低操作成本。

例如：B端的內容管理，批量操作能節省很多時間，還能降低因多次重復操作產生的失誤概率；C端最具代表性的有購物車、以及初次進入部分應用時的個性化標簽選擇。

6.觸控熱區的設定

針對移動端，點擊區域切勿直接使用選項框的范圍大小，需單獨設定熱區范圍。大家都知道，大拇指在移動端應用中使用頻率是最高的，相對來說，要有足夠大（非絕對）的操作區域以供手指進行精準交互，以免無效操作或操作失誤。需要將文本標簽、選項框以及各選項區域均分后四周的留白都作為觸動熱區，操作起來就會輕松很多。

六、結語

本文筆者主要總結了單選、復選、撥動開關的使用規范及常見問題，不過設計規范只是基于產品本身構建的一個標準，為了約束后續的視覺統一而存在的規范參考。在真實的設計中，這些設計規范并不是唯一，需要根據產品的特點和使用場景進行靈活變動，設計出最適合自身產品的控件才是最重要的。

遵循設計規范只是最基礎的標準，遵循的同時跳出規范的束縛才會有創意，這就離不開我們平時的積累，鉆研各產品中優秀的設計細節，通過查漏補缺、揚長避短，在其他產品的亮點中找到與自身產品的平衡點并將其融合，這才是我們學習和總結的最終目的。

原文地址：能量眼球

作者：大漠飛鷹CYSJ

轉載請注明：學UI網》選項篇 | 單選/復選/撥動開關的使用小技巧！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

背景

百度搜索作為傳統搜索引擎，內容瀏覽框架與內容消費體驗都更符合圖文類資源的特點。在視頻化趨勢下，用戶搜索、瀏覽、消費視頻的需求日益增長，原有的瀏覽框架導致用戶在搜索后難以觸達視頻結果、消費時難以切換不同場景。此外在視頻消費體驗上還存在播放流暢性不佳、視頻品質感較差等問題，用戶感知未到達最佳水平。故我們綜合百度自身特點與用戶使用習慣，從強化認知、提升品質兩方面出發，升級視頻搜索全鏈路框架，提升搜索視頻體驗及品質。

一、升級視頻搜索全鏈路框架

在對百度搜索所有視頻場景梳理的過程中，我們發現用戶篩選與消費視頻的過程中存在篩選效率低、消費不暢快等問題：在綜合搜索結果頁由于其他資源類型的存在，用戶很難暢快消費視頻；視頻結果頁雖能滿足用戶消費視頻的訴求，但該路徑的用戶認知較弱，操作成本也較高；此外橫豎不同形態的視頻各有獨立的結果頁與落地頁，消費場景割裂。為強化用戶對視頻搜索的認知，降低視頻觸達成本，我們對視頻搜索全鏈路框架進行了升級。

1.【負一樓框架】前置滿足，暢快瀏覽

綜合搜索結果頁是用戶最先觸達的場景，為平衡用戶暢快瀏覽視頻與消費綜合搜索結果的訴求，我們開拓了負一樓平行框架，即上層頁面展示綜合結果，下層負一樓頁面展示視頻結果。當用戶搜索與視頻關聯度較高的搜索詞時會自動進入負一樓頁面，用戶可上滑瀏覽視頻，也可上拉或點擊上層面板返回綜合結果。設計實施過程中，我們圍繞“打造可暢快瀏覽的視頻消費框架”的目標，第一步定義頁面框架結構，第二步打磨感知體驗，第三步輔助用戶認知。

1-1 定義框架結構

首先明確頁面層級，從下至上分別為視頻結果層、綜合搜索結果層與全局框架層。接著劃定視頻結果與綜合結果的布局占比，用戶消費視頻結果的速度與滑動頻率均高于綜合結果，為保證視頻瀏覽的順暢感與操作效率，需保證視頻占比盡可能更多。所以綜合結果面板僅露出tab，不展示搜索結果，讓用戶的注意力更聚焦于視頻內容的同時保證用戶可以來去自由。

1-2 打磨感知體驗

確定框架結構后我們分別從視覺層與觸覺層打磨感知體驗。歷史實驗數據表明，深色系的背景色比淺色系的背景色更能幫助用戶聚焦于視頻內容本身，從而提升視頻消費數量與時長，于是我們在負一樓通過較深的氛圍底色帶給用戶更沉浸的消費感知，同時也與綜合結果形成對比差異，加深用戶記憶。在手勢切換框架的過程中存在觸發框架移動的臨界值，當拖動位置到達臨界值時會產生1次震動反饋，提示用戶此時松手后框架自動切換，以降低用戶認知成本。

1-3 輔助用戶認知

為輔助用戶建立對負一樓新框架的認知，我們通過三階引導在不同時機引導用戶進行不同操作。當一個新用戶進入負一樓后【引導1】會通過面板上下彈動的效果引導用戶上拉面板，幫助用戶理解框架結構，引導用戶進入綜合結果；進入綜合結果后【引導2】通過頁面自動下拉的效果幫用戶認知返回路徑；當用戶重新進入負一樓且一段時間內無操作【引導3】會引導用戶上滑瀏覽視頻。這三個引導緊密配合，有效輔助用戶快速建立全新的使用習慣。

2.【五合框架】強化認知，操作提效

為養成用戶視頻垂直搜索的認知，縮短綜合結果頁到視頻tab的路徑，我們將原有的19個tab框架，精簡為僅外露5個tab的五合框架，同時視頻tab固定在各頻道首位，形成強聚焦，減少信息干擾，降低篩選成本；新增橫劃切tab手勢交互，用戶在搜索結果頁輕松一滑，即可快速觸達視頻tab。雙管齊下降低用戶視頻搜索成本，養成百度視頻搜索認知。

3.【融合框架】橫豎融合，場景打通

在不同資源的分發方式上我們也做了一些改變，過去橫版視頻由【視頻結果頁】承載，豎版視頻由【小視頻結果頁】承載，需手動點擊tab進行切換，而對應的2個落地頁也分別獨立，互不打通。隨著中視頻的發展，橫豎視頻的時長與內容類型越來越接近，消費場景也逐步趨近。而原有框架消費場景割裂，操作成本高，消費路徑長，已不足以支撐用戶便捷篩選瀏覽的需求。于是我們將兩個獨立的tab合并為視頻頻道下二級tab，并將兩個獨立的落地頁進行融合。

3-1 融合結果頁

場景融合后二級tab供用戶初步資源篩選；接下來新增排序功能，供用戶進一步針對時效、熱度篩選；最后tag search供用戶深度精細化篩選，最終通過三層遞進式篩選得到精準的需求滿足。同時加入智能化交互反饋，跟隨用戶手勢預判當前階段用戶訴求，決定二級tab、排序、tag search功能的展開收起。

3-2 融合落地頁

結果頁通過合并二級tab有效縮短了用戶路徑，而落地頁作為視頻消費的主要場景也存在著消費場景割裂的問題。于是我們將原有的兩個落地頁進行了打通融合，用戶可在一個落地頁混合瀏覽視頻，此外還拓展了橫屏分發新場景，用戶在橫屏也可上滑瀏覽推薦視頻。經過以上一系列升級，搜索視頻的分發效率進一步提升。

二、提升搜索視頻體驗及品質

百度搜索結果為多類型資源混排構成，隨搜索視頻化戰略轉型，視頻資源在結果頁占比大幅提升，視頻既需遵循整頁基礎設計規范，保障用戶搜索體驗一致性；同時又需持續打磨，提升視頻資源獨有的播放體驗品質感。所以如何在保障整頁消費體驗基礎上，最大限度的提升視頻品質感是我們面對的一大難題。基于此我們采用兩步走打法，第一步視頻資源播出來，第二步品質體驗提起來。

第一步：視頻資源播出來

原搜索結果頁各類資源采用統一模版結構，資源展示趨同，視頻相關正向描述元素不突出，用戶快速篩選、識別視頻資源的成本較高，視頻播放器較小且不支持自動播放，需點擊進入落地頁觀看消費，整體操作成本較高，導致用戶消費路徑變長，效率降低。我們將問題歸納分為3類，并逐一擊破。

1. 強化視頻展示

為解決視頻展示不突出，用戶難以在眾多資源中快速識別的問題，我們優化視頻資源卡結構，將播放器按照百度搜索柵格規范放至最大化，強化視頻展示。

2. 視頻自動播放

同時引入視頻自動播放能力，將消費場景前置，縮短路徑，使用戶方便快捷的在當前頁觀看視頻。

3. 信息合理布局

視頻能力升級后，多個引入視頻載體的業務同步升級。首先我們對引入視頻資源的11個業務進行全面摸底，將信息歸納為兩大類：1、通用基礎信息   2、定制化信息。接下來制定信息展示原則：通用基礎信息為必備，保證視頻核心信息傳達完整性；定制化信息根據各業務需求自選，確認特殊訴求兼容性。最后根據用戶觀看和使用習慣將功能、信息進行分區，保障用戶統一認知，提升多業務引用效率及后續可拓展性。

第二步：品質體驗提起來

視頻升級為自動播放后，用戶對視頻播放、瀏覽體驗的要求隨之提高，細微的不順暢也會被肉眼放大為強烈的卡頓感。故此時升級視頻播放品質變得至關重要。我們根據用戶消費行為，將優化分為兩個維度：單一播放和聯動瀏覽。再將兩個維度細分為三種場景：1、單一視頻在單頁面內的播放；2、單一視頻跨頁面瀏覽；3、多視頻在單頁面輪換瀏覽。最終確認兩大優化方向：播放體驗流暢性提升、瀏覽體驗順暢性升級，并制定針對性解法。

1. 播放體驗流暢性-信息交互動效升級

數據研究表明，用戶觀看視頻的深入程度，可劃分為3個階段，我們針對不同階段精準匹配信息交互規則。第一階段視頻未播放，用戶在眾多結果中粗略篩選，應盡可能全面的展示信息，輔助用戶決策。第二階段視頻起播用戶開始觀看，此時展示操作功能，并突出展示正向信息，吸引用戶點擊。第三階段視頻播放5秒以上，用戶進入沉浸觀看狀態，此時各類信息退化，保證清爽、沉浸的消費體驗。最后增加信息精細化動效，規避卡頓感，保證視頻播放流暢性。

2. 瀏覽體驗流暢性

針對單一視頻跨頁面消費場景，續播精準度和銜接順暢性至關重要。針對單一頁面內多個視頻輪換播放，如何在不影響用戶瀏覽其他資源的前提下，保證多視頻輪換播放順暢性也是重中之重。視覺和聽覺是用戶獲取視頻內容的感官，所以視頻播放畫面、聲音順暢性成為了瀏覽流暢性的關鍵因素。所以我們從體驗視角出發，建立搜索場景各頁面播放、聲音雙聯動機制。

2-1 視頻播放聯動

首先是視頻播放聯動，我們將視頻播放拆分為起播、續播、連播3部分，分析現狀并找出核心問題點。由于頁面資源混排，視頻化未發力前遺留一系列問題：視頻起播門檻高、優先播放邏輯混亂、同一視頻播放進度各頁面不聯動，視頻消費不連貫等，已嚴重影響視頻搜索體驗與品質感。

• 降低起播條件，視頻外露比例由70%降低為超過30%，播放器可視區域滿足用戶可真實觀看條件即起播，強化視頻搜索認知；
• 升級優先播邏輯，當頁面存在多個視頻時，播放器外露比例PK，外露比例大的優先播放，符合用戶預期保障觀看體驗；
• 新增手勢聯動，當頁面存在多個外露比例相同的視頻時，根據手勢滑動方向判斷視頻播放情況，智能預判用戶觀看意圖；
• 優化續播交互，支持視頻暫停在當前幀，二次起播不再展示封面；點擊跳轉落地頁后返回精準續播點擊過的視頻，提高消費及分發效率；
• 新增自動連播，在純視頻瀏覽態場景下，當前視頻完播后自動連播下一條，減少操作步長保障視頻消費流暢性。

2-2 視頻聲音聯動

然后是聲音聯動，原搜索場景內各頁面以及搜索結果頁各視頻，聲音狀態各自獨立互不影響，而聲音作為視頻傳達的核心內容之一，狀態不聯動導致用戶針對聲音頻繁重復操作，各場景割裂感強烈，視頻瀏覽體驗極差，故在視頻搜索場景下升級聲音聯動機制。

• 分場景定狀態：綜合搜索結果頁為篩選瀏覽場景默認無聲狀態，融合落地頁為沉浸消費場景默認有聲；
• 交互智能響應：用戶有對聲音的主動交互行為（佩戴耳機、調節物理聲音按鍵、點擊聲音按鈕）后，切換為有聲播放；

• 頁面聲音聯動：在綜合搜索結果頁、視頻結果頁任一頁面調節聲音后，頁面發生滑動或跳轉，聲音狀態聯動跟隨。

寫在最后

在搜索視頻化進擊的過程中，我們從體驗視角出發，通過對視頻搜索全鏈路框架的升級，強化了用戶視頻搜索認知，降低了視頻觸達成本。通過對視頻自動播能力升級、播放器信息布局的統一、播放與瀏覽體驗流暢性的打磨，搜索視頻品質感全面升級，用戶體驗也更加細膩、流暢、自然。經過以上一系列優化后，用戶瀏覽消費視頻的數量和時長等指標均顯著增長。未來視頻化方向的角逐會愈發激烈，我們將進一步探索百度搜索自身特色，以期做體驗最好的視頻搜索。

原文地址：百度MEUX（公眾號）

作者：百度APP用戶體驗

轉載請注明：學UI網》視頻搜索體驗價值論

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

前言

刷新在產品中屬于基礎功能，方便用戶獲取最新動態，是普及度較高的基礎功能之一。在設計表達時有系統級表達、自定義設計、多功能結合等，設計發揮的可控性較大。

今天黑馬哥就結合一些優秀的線上案例，和大家聊一下關于產品刷新設計的千奇百態，希望拋磚引玉，和大家一起進步。

分享目錄

一、關于刷新設計

二、刷新的設計形式

三、線上優秀案例分析

四、總結

一、關于刷新設計

在產品中刷新對于用戶來說并不陌生，是經常使用的基礎功能，便于用戶獲取新動態。在一些可以提供內容更新的產品中，刷新獲取內容變動是較為常見的形式。

大家都習慣將刷新稱呼為下拉刷新，其實刷新的動作不僅限于下拉手勢交互，也有產品采用單擊和上滑等手勢交互實現刷新動作。比如一些產品在滑動瀏覽內容時，底部標簽欄首頁圖標會變為刷新的操作，通過點擊實現頁面內容的刷新；也有產品在上滑頁面時實時加載完成刷新，就像很多影視類產品或者瀑布流設計的產品。

刷新動作不僅可以滿足用戶的求知欲，也能通過源源不斷的內容增加用戶黏性，提高用戶的使用體驗。

二、刷新的設計形式

簡單的刷新動作已經不是簡單的設計了，在產品設計師的創新中呈現出了眾多的優秀案例，下面為大家梳理一下不同的設計表達形式。

2.1、系統級表達

系統級表達是采用系統默認的一些處理形式，類似于花瓣循環的動態形式，屬于比較常規的表達。也有很多產品采用系統級形式，用戶理解度較高，設計創新的角度來說欠缺一些，表現形式比較生硬。

2.2、情感化文案表達

為了帶給用戶更有溫度的設計，除了在圖形層面進行情感化設計發揮，在文案上面也可以更加情感化。有產品使用俏皮可愛的話術，每次用戶刷新都呈現不同的文案，與用戶產生情感共鳴。

2.3、動態形式結合

刷新的動態表達形式非常普遍，圖形動效和動作演變等，能夠體現出加載的動作。動態形式結合可以使得趣味性更強，動畫演變的過程也能降低加載等待過程中的焦慮感。

2.4、IP 形象結合

IP 形象結合到 UI 場景中不僅可以強化品牌感，也能帶來更加情感化的體驗。IP 形象結合到刷新設計中，伴隨著動態演變，以此來體現加載的過程。設計形式動感化，趣味性強且感官體驗較佳。

2.5、品牌基因結合

立足于品牌做設計，品牌感可以帶來差異化的設計表達，也能提高用戶對品牌的記憶度。很多產品將品牌 LOGO 圖形、輔助圖形、品牌字體、品牌風格特征等融入到刷新設計中，帶來差異化的刷新體驗。

2.6、業務屬性結合

根據業務特征設計刷新圖形，讓用戶在刷新的過程中感知產品的業務屬性，也是強化記憶點的有效形式。

2.7、多功能結合

刷新設計更多的還是為了給用戶提供更多動態內容，除了這個底層需求以外，也有產品結合了多功能設計。比如下拉刷新到一定距離可以激活“二層樓”，進入活動空間或者其他功能模塊，也有結合瀏覽記錄等展示。多功能結合賦予了刷新更多玩法，在有限的資源空間發揮更多操作價值。

2.8、其他設計形式

隨著體驗的重要性升級，產品設計師會在更細微之處探索出更優的解決方案，做出差異化的體驗設計。而刷新功能也將會呈現更豐富的設計，從感官層面帶來更多視覺感的表現，從體驗層面結合更多輔助功能或者業務，發揮更多使用價值。

三、線上優秀案例分析

通過以上的梳理我們對刷新設計有了深入的了解，下面通過一些優秀的線上案例來進行分析，輔助大家掌握更多差異化的設計表達。

3.1、情感化的文案設計

刷新除了在圖形設計和動效層面發揮以外，多功能結合和文案設計也是差異化表達的方向。文案提示的設計相對比較特殊，通過不同的文案來打動用戶的體驗。

喜馬拉雅 APP 每次下拉刷新時，都會顯示不同的文案內容，有功能引導的提示文案，也有與用戶共鳴的溫馨提示等。情感化的文案設計讓刷新更有溫度，不失為一種差異化的功能設計探索。

3.2、動態化 IP 形象

針對下拉刷新這一常規操作，設計形式也是豐富多樣。結合 IP 形象進行動態演變完成刷新動作，被很多產品設計師所采納。

美團外賣就將品牌 IP 形象結合得恰到好處，下拉刷新時兩只耳朵搖擺非常俏皮可愛，松開后 IP 形象露出，還配合眨眼睛等可愛的表情動效。情感化設計結合動態表現，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗。

3.3、刷新帶來美食誘惑

在完成刷新功能屬性的同時，還能將產品的屬性或者服務賣點強化出來，賦予了常規操作更多的功能價值。

麥當勞在麥麥商城欄目的下拉刷新設計中，采用漢堡形象結合層級動效進行表達，讓人眼前一亮。動效拉長的漢堡不僅體現出份量感，激發用戶的食欲；漢堡形象就十分麥當勞，展現出品牌關聯性。

3.4、趣味化 IP 形象

IP 形象結合到刷新設計中的案例非常多，不僅可以帶來情感化的體驗，也能增加功能操作的趣味性。半次元在下拉刷新時不僅結合 IP 形象，還通過下拉的程度將形象拉長，最后再配合表情和動態營造出趣味性。

3.5、動態 IP 完美結合

轉轉的 IP 形象頭部的轉動條是其特征所在，在下拉刷新過程中完美的結合了轉動條，還伴隨著裝飾符號散開的效果。不僅貼切的結合了 IP 形象的特點，裝飾元素的動態效果也強化了氛圍感，非常符合產品的屬性，是一個不錯的刷新設計案例。

3.6、品牌化路徑動效

刷新設計中采用路徑動效的表現形式比較多，主要集中在圖形路徑動效和品牌文字路徑動效，圖形通常是品牌 LOGO 為主，這一類比較適合圖形趨近于線性的表達中。鏈家 APP 的下拉刷新就是 LOGO 圖形進行路徑動效，完美的匹配了圖形輪廓，動效的流暢度也比較自然。

從品牌層面著手于刷新設計，如果放棄圖形層面的元素選擇，品牌字體的選擇也是一個思路。得物 APP 將品牌名稱的字體直接運用到刷新設計中，以路徑動效的形式進行表達，最終將筆畫打散散開。設計表達依然延續了品牌感，也區別于其他產品的刷新設計，在差異化方面呈現出了自身的品牌特征。

3.7、一路騎行的芒果崽

芒果 TV 的下拉刷新設計結合了吉祥物芒果崽，下拉刷新的過程就是一路騎行的芒果崽。騎行的沿途中有眾多地標建筑的剪影，下拉不松手就會一直處于騎行狀態，下拉的反饋體驗度做得很好。

3.8、漫步的卡通形象

利用動態卡通形象作為刷新設計案例較多，特別是行走和跑步，這一類都比較貼合刷新這一動態表達。比如在少年得到 APP 中，在下拉刷新過程中以一個背著書包漫步的卡通形象進行表達，流暢的動效完美的呈現了學生放學或者上學時，背著書包漫步的場景。這樣的呈現方式不僅貼合功能含義，也能與用戶產生更好的情感共鳴。

3.9、業務化的 3D 圖標

友啥 APP 利用 3D 圖標進行循環切換代表刷新過程，帶有業務屬性的圖標不僅可以直觀的突出產品特性，3D 圖標化之后視覺感十足。圖標切換帶來的動效流暢自然，匹配刷新動作的差異化也非常明顯。

3.10、刷新動作下的多功能結合

刷新已經不局限于內容更新這一單一需求，一些電商類產品也賦予了刷新多功能的屬性，帶來更多樣化的操作體驗。

比如淘寶 APP 首頁下拉刷新時，短距離下拉依然屬于刷新范圍，繼續下拉則會提示釋放進入淘寶二樓。在保持刷新基礎功能的前提下，融入了多功能場景，開發出功能或者活動的全新曝光入口。

在商品詳情頁時下拉則無法提供刷新服務，為了給予更好的反饋設計，下拉動作便會顯示我的足跡。不僅可以在用戶習慣性操作時給予反饋，足跡的提供也更方便用戶做出選擇。

同一個產品也并非只能呈現出一種刷新設計方案，不同的業務場景可以使用不同的表達。淘寶 APP 里面便根據場景的不同提供了多種刷新方案。常規界面的刷新便以品牌字“淘”作為設計出發點，刷新的過程以動態形式表達品牌字，簡單粗暴的傳遞出品牌感。

3.11、結合 Slogan 完成刷新

刷新不僅只是內容的更新，產品設計中呈現出更豐富的表達，比如輔助傳播活動、宣傳品牌形象和 Slogan 等。產品設計師都在賦予單一功能多重使命，帶來豐富多樣的使用體驗。

58 同城首頁在下拉刷新時，除了體現刷新動態以外，也展示了 Slogan “讓生活簡單美好”。借助刷新入口的曝光度，更快的將產品的定位傳遞給用戶，增加用戶對產品的好感度。

3.12、保持格調一致的設計

很多小眾的產品在設計上面呈現出比較有格調的設計，區別于常規的氛圍營造，設計風格更加簡約大氣。

屋顏 APP 整體的設計風格就屬于比較簡約文藝，在下拉刷新的設計中也保持了這個風格特征。以生活物品演變出的線形圖標體現刷新的過程，整體的過度和銜接也恰到好處。

3.13、探索式的刷新設計

刷新設計除了圖形、動效、文案等層面發揮以外，背景層發揮的案例相對較少，除了配合傳播性質的設計。

AcFun 在下拉刷新時，背景層設計成類似于宇宙空間的插畫場景，刷新的過程就像探索一樣。配合卡通形象左顧右盼的動效，帶來的感官效果也是非常不錯的。

關于刷新設計的優秀案例很多，這里就不一一例舉了，以上案例僅作為拋磚引玉形式的引導。大家根據這個框架多多體驗產品，總結更多的優秀案例。

四、總結

刷新設計作為產品中使用較為頻繁的基礎功能，與用戶的接觸也是非常密切的，設計的重要性因此不言而喻。無論是突出品牌感、趣味性、差異化還是強化感官層面的體驗，或者是多功能結合等，都是產品設計師重點發揮的模塊之一。

本文以案例分析為引導，為大家梳理了刷新設計的形式與思路，希望可以拋磚引玉，帶給大家更多的設計靈感?？偨Y觀點屬于個人理解后的呈現，如有欠缺大家選擇性吸收和修正補全。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》刷新設計的千奇百態（UI設計）

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

任務處理是體驗設計師的一項基本功，任務處理的原則是提高任務完成的效率，同時滿足用戶體驗的要求。任務通常指的是有目的性的工作與行為，例如領導給你一個買煙的任務，媽媽給你一個去菜場買西紅柿的任務，這些都是任務，并且都有一個目的。

而行為則是在完成任務的過程中，我們需要做的事情，例如你要買煙，那么你首先要坐電梯下樓，步行到煙酒店，向老板詢問要購買的香煙，付款等一系列行為。為了完成任務，用戶可能有不同的行為，你可以選擇坐電梯，但是當電梯人很多的時候，走樓梯也許是更好的選擇，但目標依然不變。

任務與行為都是可以被設計的，通過設計的手段我們可以提高任務的完成效率，提高用戶行為準確性。如何對任務和行為進行設計也就是今天我們要探討的內容。

一、任務流程設計

在數字產品中，有非常多的任務等待用戶去完成，有的是用戶發起，有的是產品業務引導用戶去完成，例如修改個人頭像、添加收貨地址等等。任務聽起來比較抽象，很多設計師不知道怎么去安排任務和處理任務的節點，那么我們來看一下如何完成這樣的任務流程的設計。

1、分析任務

假如我們現在需要進行一個家電報修任務流程的設計，那么我們要來分析一下這個任務中需要明確的2個要素：

a) 背景和目標

用戶可以通過報修流程自主完成家電報修，預約維修員上門維修。

b) 目標用戶是誰

購買過相關產品的用戶

2、如何劃分任務節點

a) 分析用戶行為與觸點

要對家電進行報修，那首先要先確定報修的是什么家電，其次需要對家電類型進行選擇、輸入，然后填寫相關的維修信息，例如發生了什么故障，維修地址在哪里，預約上門時間，填寫備注，相關服務的說明。最后提交訂單并查看服務受理的進度。

那么到底這些任務需要劃分成幾個界面呢？每個界面放多少內容，很多設計師在這一步就會比較糾結，那么我們就可以把用戶行為和觸點來進行一些假設，先將這些行為做成卡片。初學者可以先用這個辦法來進行梳理，掌握熟練之后自然而然的可以直接進行快速的劃分界面。

然后我們將卡片填充到界面容器中，思考當前容器中的信息內容是否會溢出，行為與任務節點是否契合，并對用戶行為進行分類，例如填寫選擇報修家電、填寫故障的原因、填寫維修地址、預約時間、填寫備注屬于強關聯的行為，而查看服務受理進度則屬于下一個任務節點的用戶行為，并不能直接在一個界面中填充。于是從這一步來看，任務流程節點可以劃分出2個：1.填寫報修信息 2.查看報修進度

然后我們繼續思考， 填寫報修信息界面的用戶場景是否較為復雜，是否需要拆分，交互設計的原則并不是路徑越短效率越高的，如果單個任務節點需要用戶操作的內容過于復雜，也會降低效率與體驗。所以在填寫報修信息這個節點中，我們可以發現用戶在選擇報修電器的時候可能會有比較復雜的場景：

① 系統自動調出訂單里的家電型號供用戶選擇

② 自己添加家電，但用戶可能不知道自己的要報修的家電是什么型號

有小伙伴想問，既然能夠自動調出為什么還要手動添加呢？因為這里還存在一個場景那就是你家的電器是別人給你買的，比如我給我媽家買了一個凈水器，凈水器壞了我媽想自己通過小程序報修，這個時候系統是無法讀取到這臺凈水器的訂單記錄的。

然后選擇家電時，可能會涉及到多個家電的選擇，比如你買了某個品牌的多個產品，那需要從多個產品中選擇需要報修的那個。綜上所述，可能將選擇報修電器這步行為單獨做一個任務節點會更好，雖然節點多了一個，但是場景更聚焦，任務看起來也不會那么復雜。

在填寫報修信息的時候依然也可以修改需要報修的家電，而不需要再返回上一個節點。

b) 窮舉場景，劃分核心與支線

當我們劃分好任務節點后，剩下的場景窮舉也就比較簡單了。核心的任務和用戶行為我們已經梳理完畢，剩余的支線場景我們再去補全即可。例如提交訂單后無人聯系，那么可以提供一個催單的功能，如果服務不滿意可以進行投訴，對服務過程中的收費項目進行一個說明等等。

c) 用戶行為與布局

這也是我們繪制原型和線框需要考慮的，我們需要用什么控件來引導和組織用戶的行為，幫助用戶完成這次的任務。那么我們一步步來看。

第一個任務節點是選擇電器+手動添加，所以我們需要一個能夠進行單選（訂單列表）的box以及一個手動添加的按鈕。同時需要將手動添加后的界面也思考一下，如何讓用戶快速的進行電器的篩選和添加。這里可以用一個縱向導航，類似商品的分類，同時加上搜索。

這里就要注意了，先給用戶添加按鈕還是先讓用戶去選擇。大部分的場景還是用戶自己進行自購的，所以一般訂單都可以直接根據下單的手機號直接讀取到，只要登錄應用之后。但不要忘了，如果當前購買的產品太多，那么添加按鈕會被頂到下方，用戶可能會看不到。所以固定在頂部是更好的選擇，這里不需要糾結誰的使用場景更多誰放前面的問題。

第二個任務節點在輸入報修信息的時候可以自動帶入一部分信息，例如下單地址、產品型號等，同時也要支持地址和型號的修改。我們來看一下布局是怎么做的。

在第三個任務節點查看報修進度的時候，比較關鍵的信息是報修的地址、報修電器以及單號，其次是報修的進度，當報修進度到達排工時，可以給用戶工作人員相關的信息。在提交報修單后，也需要提供用戶進行客服咨詢的功能服務。最后是對本次服務其他支線需求，例如催單、投訴 等。

二、如何解決任務流程中的效率問題

1、任務設定不清晰，復雜且無序

我們先來看下方的界面案例

我們在設置任務流程時，首先要明確什么是核心任務，什么是次要/支線任務。在這個界面中除了底部的核心按鈕“生成”以外，還有其他的任務，例如領取、修改、附加險、添加主案、收藏方案、收件人信息填寫等。這里就會讓用戶開始迷茫了，如果我要最終完成“生成保險計劃”，我該需要怎么操作？其他的按鈕我該如何去點擊，有什么順序，有什么是必填或非必填的嗎？

顯然，在一個需要有嚴謹邏輯步驟的任務流中，不適合將所有的任務按鈕都布局在一個界面中。這和一些電商的詳情是有區別，有人會說那類似電商的詳情不是也有很多這樣的按鈕嘛，除了加入購物車和購買以外，還有領券、查看評價、去店鋪主頁逛等按鈕，為什么它可以這樣，而這個界面中就不行呢？

① 這個界面的任務都需要用戶進行填寫、設置，需要花費較大的認知成本。

② 電商詳情的按鈕不是根據順序和流程設置的，而是根據用戶的場景和需求，按鈕放那邊你可以完全不看也不影響你最終的下單。但是這個界面中明顯不行，用戶在識別這個界面中的按鈕和信息的同時會思考，我如果要完成最終的“計劃生成”，這些按鈕我是不是都需要進行點擊，或者是否要按照順序點擊。

所以類似這樣的界面我們需要進行線性化，讓用戶知道哪些任務需要先完成，把任務節點劃分清晰，這樣用戶的效率也會提高。

2、線性任務的容錯率

那講到線性任務不得不提到它的容錯率。線性任務經常遇到的幾個問題就是

① 讓用戶經常返回操作修改，降低效率

② 步驟太多用戶失去耐心

③ 任務結束進入死胡同沒有閉環。

第一種，用戶可能頻繁需要返回，例如在多層級分類篩選的流程中或者超長步驟的表單填寫。這種情況下用戶如果對之前的信息要修改，那么就會出現問題。

我們通過合并觸點或行為的形式，將可以在一個界面中完成的任務進行組合或提供一個公共頁。

但是不管使用哪種方式，依然要分清楚當前任務節點的獨立性，如果有行為、場景沖突的情況下是不能合并的，例如需要校驗或者必須填寫某些信息后才可進行下一步任務的情況下是不可以合并的，也不能使用公共頁來解決問題。

還有一種類似公共頁的形式，像閑魚的二手電子產品回收，需要填寫相關產品信息。這里其實也可以看作是一個公共頁，只是相比傳統的公共頁形式這里需要填寫單個選項少，并且可以直接在公共頁中選擇，這種形式雖然很像，但是和傳統不同的是，他在最初階段無法看到一共需要填寫哪些信息，只有選擇完一項才會出現下一項。這里我們也可以猜想一下，為什么一開始不直接把所有選項放出來讓用戶去修改呢？因為這里的選項也并非是有前后邏輯關系的。

兩個原因：

① 由易入難用戶更容易接受，初始階段給予大量選項用戶很容易放棄。

② 節省了n步選擇的操作。前者選擇完一項自動會展開第二項，后者則需要點擊-選擇-點擊，每一個步驟多了一次點擊。

所以完全線性的任務流程條件是比較苛刻的，也并不是所有線性流程都不好，要學會甄別。

3、任務的閉環

第二個情況先不去解釋，咱們直接看第三個問題，也是一般交互設計容易犯的一個問題。那就是閉環。為什么要閉環，比如你想跟你的女神表白，當你請女神吃了飯看了電影之后，卻忘了說我中意你，這是多么的可惜。這是一種情況，還有一種情況就是你表白了，她同意了，你的目標達成了，但是最后讓你的女神自己打車回家，讓人有點失望。

所以表白要徹底，好人也要做到底。閉環最關鍵的找到最初的設計目標。例如上一篇文章我們提到的新人限時免費讀書的需求，在最后時間截止或者用戶領完5本書后，需要再給用戶進行vip購買和權益提示，不能直接消失。

還有如果咱們有活動進行優惠券發放的場景，也要注意引導用戶使用優惠券或者在可以使用的場景繼續逛，而不是讓用戶領取完優惠券后直接結束任務。

在上文中，我們提到的報修流程，當提交完信息后會需要一個狀態頁，例如預約成功，然后讓用戶查看預約的階段，很多設計師在這步可能會分開設計，先給一個狀態頁，再在這個狀態也讓用戶點擊查看進度。其實沒必要直接做在一個界面中即可。

閉環還要注意消除用戶的不安全感，例如像餓了么下單后的狀態一樣，直接去掉返回鍵，告訴用戶你完成了，也沒有返回的必要了，你這時候可以去領取金豆兌換商品或者查看訂單狀態也可以完成訂單返回首頁。給用戶的行為安排的明明白白。

4、任務的逆向邏輯

正向邏輯大家都會做，但是往往會忽略一些逆向流程。例如搜索的逆向流程，如果我們進行多次搜索后再進行返回，是進入到上一個關鍵詞的結果頁還是回到默認狀態。應該是要回到默認狀態頁，也就是點擊搜索框后進入的初始狀態。

另外，逆向流程要注意的是返回上一步后，當前步驟是否需要提供保留提示，例如需要用戶大量編輯和填寫的表單，點擊返回后需要給出彈窗提示。

三、總結

任務流程設計并不難，關注好用戶的核心場景，主線流程一定要清晰，不要被支線流程干擾。在原型設計上也要注意信噪比，突出重要的信息與行為引導點。步驟多并不意味著效率低，步驟少也不代表效率高，在成熟期的產品中也要做好a/b測試來多多分析。設計如何落地，如何確定方案，很多時候不是理性的，也沒有任何標準，每個人的意見都帶有一定的主觀性，設計師也在很容易在其中迷失，掌握好客觀的驗證方法，可以提高工作的效率。

原文地址：應謀鬼計（公眾號）

作者： 應駿

轉載請注明：學UI網》UI/UX設計師如何處理任務及優化流程

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

? 色塊的數量要適當控制，太少了顯得單調，太多了會很碎。

▲比如上圖的色塊就過于零碎了。

▲上圖就要好很多。

? 不要把所有色塊都嚴格對齊，否則會很死板。

? 由于幾何色塊本身比較單調、生硬，所以色塊內的信息和圖形可以靈活一點，可以增加一些細節，比如裝飾元素。

? 不一定要把所有的信息都放進色塊里，把個別信息、元素放出來，可以使版面看起來更靈活。

下面蔥爺給大家分享幾個案例，來看看色塊排版具體是怎么操作的。

案例一：服裝畫冊目錄設計

下圖是某服裝畫冊的目錄頁設計，其實也是用了色塊來排版，但是整體很混亂，信息分組不明確，而且很不精致，所以需要對它進行調整。

? 原稿幾乎把所有信息都放在一個大色塊一中，這么做色塊就沒起到區隔信息的作用，所以我把背景分成了三塊（顏色全來自圖片），最上面的放標題，下面兩塊分別放兩組內容并對齊排版，使信息更清晰、更易讀。配圖保留原稿把圖片放入方形色塊的方式，只是去掉了多余的描邊。

? 重新設計標題。黑色太過突兀，所以我把它改成了粉色，并給副標題也加了一個綠色塊，副標題與標題以及下方的綠色塊疊加，既增加了畫面的層次感和設計感，也加強了上下兩個空間的聯系。

? 將內文的排得更精致一點。首先，選了一個歐式風格的字體，給內文中的四組信息分別加上序號，在風格與排版上與其他元素形成鮮明的對比。其次，把內文的顏色從黑色改成與對應色塊的深色，融合性更好。最后，在小標題和正文之間加入短線條，做區隔和裝飾的作用，并適當調整正文的行距。

? 用網格系統稍作規范就完成了。

方案二：兒童蛋白粉單張設計

下圖是該版面需要展示的主要內容，文字較多，而且基本上是大段大段的，但信息組別并不多，大概可以分為四五個部分。

? 將屬于不同組別的信息和元素分別放入色塊中進行區隔，色塊顏色來自于品牌logo和包裝。

? 這樣劃分色塊層級太少，而且矩形色塊太硬，不太適合兒童產品，所以把標題和小標題都單獨拿出來了，并把色塊做了圓角處理。色塊縮小后，產品圖片有一半露在外面，正好起到打破方塊的作用。

? 標題需要突出設計一下，但由于左上角有Logo，所以如果把標題拉大，那么左邊就會有點擁擠，右邊則會比較空，所以把產品圖片和產品介紹的文字左右調換一下更好。功效證明的文字太多，句子也很長，所以我把它分成了兩欄，提高文字的易讀性。

? 把標題字體改成宋體和襯線體，并把產品圖片下方的色塊改成圓形，加強視覺上的對比效果和靈活性。

? 把標題的文字改成右對齊，并跟與下邊功效證明文字的右欄對齊，這樣左上角的留白會更舒服一些，平衡性也更好。

兩個正文的大色塊里全是文字所以略顯單調，于是我在文字上下加了一組波浪線，細節上會更精致一點，到這里這個單張就排完了。

方案三：移動寬帶海報設計

下圖是移動寬帶的一則促銷海報，也是用了色塊排版，該畫面中的信息其實挺清晰的，主次分明，也有一定的視覺沖擊力。問題在于美觀性不夠、形式過于普通不時尚、排版很呆板，下面我們來對它進行優化：

? 將該畫面中的信息一一用色塊框起來，原方案把“100M寬帶優惠用”放在一個大色塊里，層級關系太少，視覺變化不夠豐富，所以我把它分成了三個色塊（由于移動的調性還是比較年輕的，所以我打算用孟菲斯風格來做）。另外，原方案中的優惠套餐被處理成三個很平均的色塊，看起來既分散又缺少變化，所以我把他們組合在了一起。

? 將“100M寬帶優惠用”這幾個色塊進行適當錯位排版，并在其下面增加一個大的色塊（可以看作是電視機的屏幕），以使版面變得靈活且主次分明。

? 給文字色塊加上立體效果，加強版面的空間感和信息之間的層次感。

? 只有文字和矩形色塊的畫面太過單調和生硬，所以我加了一些與寬帶相關的圖形元素進來，比如代表視頻的播放器符號、代表網速快的閃電符號、代表互聯網的箭頭、代表網線的曲線。整個版面變得生動、活潑了很多。

? 在背景中加入網格底紋，使背景與主體形成呼應，視覺上也沒那么單調，并把活動時間和辦理方式從最下面的色塊中調出來放在視覺主體的下方，與其他的文字色塊形成對比，

? 再調整一點細節就做完了。

色塊排版的用法還有很多，通過改變色塊的風格、造型、組合方式等等，可以創造出非常多樣的效果，所以用色塊排版也不一定會很死板、很粗暴，比較適合表現時尚、沖擊力強的設計需求，但確實不太適合用于表現高端、高級的視覺，這點需要注意一下。

原文地址：蔥爺（公眾號）

作者：蔥爺

轉載請注明：學UI網》用色塊打開排版的思路，簡單好用!

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

兩個元素， 如果一樣大，平鋪在畫面中，就會顯得普普通通的，沒有任何亮點。
如果我們把其中一個放大，另一個縮小，再來看：

畫面是不是有特點了很多，并且有了節奏感， 就連文案排版也有更多的方式。

所以對比就是讓畫面的兩個組成部分/元素，以夸張的手法，布局構圖，以讓畫面產生強烈的反差。以提升畫面沖擊力，畫面縱深，內容豐富度。是非常有效提升畫面品質的方法之一。

那大小對比如何玩的精通，玩得高級呢？
我們一起來看一下：

一、人物與人物

1、全身與半身對比

這種半身人物和小人物的對比，或者頭部表情眼神與小人物的對比主要可以展示人物細節，后面的人物放大表情傳遞情緒，前面的人物展示全身，傳遞狀態，可以很好地傳遞內容，常常用在各類視覺海報中。

2、局部大特寫與小人物對比 (下面右側的圖是江湖哥2017年做的圖，分析兩次了，哈哈，備注下）

這種對比有強烈的大小反差，并且可以很大程度地拉伸畫面縱深，表現出很強的空間感！
并且還有一個細節：這兩張都是三角形構圖，非常穩定。

所以我們在設計的時候要也要注意畫面的構圖方式，夸張對比同時，要保證畫面的穩定和飽滿！

3、全身與全身對比

全身的人物對比很小的人物，讓畫面有更多的空間可以利用， 可以留白想象，也可以打造場景氛圍，展示更多場景氛圍。

二、人物與場景

1、小場景與大人物

夸張化的對比，讓本該小巧的人物矗立在場景里，很容易就營造除了一種巍峨磅礴的視覺感受。

一般需要很高的設計成本，工時不小。簡單點的做法我們可以直接在人物下面拼接一些小場景，比如這樣：

一些日常小需求中，沒有那么多的時間去打磨細節，就可以這樣做，既能保證按時完成需求，也能有一定的創意性。

2、小人物與大場景對比

這種方法也非常具有創意性，把一些很小的物體放大，人物縮小， 反差表現兩個主體的大小對比。往往也能有出人意料的效果，需要更多的靈感和想法。

總結

創意本身就是打破常規，把不可能變成可能，達到出人意料的效果就是創意。本期分享的大小對比在畫面中的各種玩法就是可以很好達成這種目的的方法之一，大家可以多去嘗試，和練習，單這一種方法用好了就很牛逼了。

原文地址：菜心設計鋪  （公眾號）

作者：菜心工作室

轉載請注明：學UI網》這設計沒創意？你信不信我不干了？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司