教程

前段時間做了一組練習作品，其中有一個關于球體的圖標吸引了大家的注意，發布之后有很多同學后臺留言希望出一個教程。今天黑馬哥的教程如約而至，就帶大家一起來畫個球吧！

一個不一樣的球

這個球體圖標無需三維軟件的輔助，全程都是通過平面類軟件完成，我個人是通過 AI 軟件和 Sketch 軟件配合完成的。實際上通過 AI 軟件也可以直接完成，球體造型是通過 AI 軟件的 3D 功能實現的。后期的配色、光影處理、質感強化等細節處理，大家可以自由選擇熟悉的軟件，無論是 PS 還是 Sketch 等均可完成細節刻畫。

下面黑馬哥就來詳細演練一下，案例分為球體造型繪制和質感刻畫兩個部分。

球體造型繪制

第一步：繪制紋理符號

通過矩形工具繪制幾條細長的矩形，數量可以自由發揮，這個數量決定球體紋路的數量。然后全選之后拖進符號面板，無需改動參數直接點擊確認即可（符號的名稱可以自由設置）。

第二步：繪制球體

通過橢圓工具繪制一個正圓，然后利用剪刀工具剪切一半，形成一個半圓。然后再執行效果 → 3D → 繞轉，然后把預覽勾選上就可以觀察變化了。注意紅框標注位置需要選擇“右邊”，不然無法出現球體效果。

第三步：貼圖

保持當前操作不變，點擊 3D 繞轉彈窗底部的“貼圖”按鈕，在彈出的面板中符號位置展開選擇之前創建的球體紋理。然后調整紋理的大小，讓其填充滿圖示區域，這里的紋理大小和位置可以一邊調整一邊觀察球體的變化，調整到自己滿意的效果即可。

第四步：調整空間位置

設置好貼圖之后，我們可以通過圖示區域去拖動這個立方體，改變球體的空間位置，調整出自己滿意的角度之后點擊確定即可。確定之后我們需要操作對象 → 擴展/擴展外觀 → 然后取消編組，把紋理層分離出來，單獨之后便于后期調節。

通過以上的步驟我們完成了球體部分的繪制，這個步驟需要在 AI 軟件里面完成。接下來的步驟沒有特殊的軟件限制，只要能夠方便進行漸變色調節和細節刻畫即可。

質感刻畫

第一步：導入到軟件

質感刻畫不限制操作軟件，直接在 AI 軟件里面也能操作，個人習慣運用 Sketch 軟件進行細節刻畫。直接將完成的球體通過復制，在 Sketch 軟件里面粘貼即可（如果是 PS 軟件操作類似）。

第二步：刻畫球體立體感

突出球體立體感首先對圓形添加徑向漸變，中心點設置在偏向于左上角位置，顏色的參數參考圖示（顏色大家也可以自定義）。然后再對其添加兩次內陰影，用于增強立體感，也能使得圓形更加通透。（內陰影的參數見圖示，本案例圓形尺寸為 360*360px）

球體背景層繪制完成之后，再針對紋理層添加漸變色，依然選擇徑向漸變。角度和中心點設置的范圍和背景層的一致即可，顏色的參數參考圖示，最終兩個圖形合起來即可初步完成球體立體感的刻畫。

第三步：紋理質感強化

為了進一步突出紋理的質感，將紋理部分復制兩個出來，分別進行細節刻畫。一個是為了強化色彩感，一個是為了強化光感，兩個紋理部分設置參數見圖示。

第四步：底部壓暗

為了讓球體能夠顯得更加穩重自然，添加一個同等尺寸的圓形作為底部壓暗。采用的是線性漸變，顏色和填充的不透明度參數見圖示。

最終我們便完成了球體部分的全部案例演練，添加一個圓角矩形作為應用圖標的底座，完成整個案例的繪制。

小結

本案例的技術難點主要是通過 AI 軟件的 3D 功能實現帶紋理的球體造型，其次就是質感刻畫的技巧，關于漸變色的調節和內陰影的運用。通過案例的學習可以幫助我們熟悉 AI 軟件的 3D 功能運用，也能強化關于營造質感的技巧。

大家也可以舉一反三，在創建符號的時候也可以變換更多不一樣的圖形，也能帶來更多不一樣的球體紋理效果。希望今天的教程分享可以帶給大家一些思路，創作出更多優秀的立體圖標設計。

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

作者：黑馬青年

轉載請注明：學U網》今天帶你一起來畫個球

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

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

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

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

我們先從網上找到一些洋蔥的圖片，試著把它的形象擬人化，第一個我已經把它想成大腦袋了

這時候我們可以先確定版式，然后用草圖將人物場景畫出來，不用在意細節。

接下來我們來完善主體形象，提取洋蔥特點，一個洋蔥人流著淚切洋蔥，動作如果不太確定，可以直接搜網上切菜的動作來參考。

這一步做完之后，我們來設計主標題，墊字用矩形工具做出主體結構，再加上一些特征即可。

我們將標題和主體都放入畫面中，大感覺就出來了。

接著根據剩余空間的形態，將剩余信息處理好，同時可以搭配英文來豐富層級。

我們將信息放到相應的位置，調整好它們的大小。

接下來開始搭配顏色，這里我們選用了玫紅色和綠色來作為底色，兩個顏色會使畫面增加層次。

這一步做完之后，我們可以再加一些元素來豐富畫面，增加視覺感和趣味性。

最后做一個簡單的樣機效果，那么這個版式練習就完成了。

OK，分享就到這里了，趕緊找個元素來練練手吧，

原文地址：趣設記（公眾號）

作者：趣趣熊

轉載請注明：學UI網》排版設計總沒想法，試試簡單圖形這樣做?。?a style="color:#428BCA;text-decoration-line:none;">

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

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

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

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

去年國務院印發的《“十四五”數字經濟發展規劃》文中，明確國家要大力推進產業數字化轉型，全面深化重點行業、產業園區，協同推進數字產業化和產業數字化，賦能傳統產業轉型升級，為構建數字中國提供有力支撐。IoT事業部也提出了“智物智造”戰略，助力更高效的硬件智能化和生產數字化，重點投入在工業行業，助力傳統企業做數字化轉型。

IoT技術在行業中廣泛應用，使得我們有機會服務了橫跨B端基礎云產品、PaaS、SaaS到C端的應用等各領域。由于類型的多樣性，服務對象和服務場景的不同，在產品設計上也有不同的設計側重，尤其是在涉及到B端產品設計時，在嘗試結合B端的特征將做C端體驗設計的精益化方式融入進去。

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

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

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

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

2.端側載體多樣化

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

3.鏈路長且場景差異大

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

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

1.真實場景決定一切

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

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

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

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咨詢、用戶體驗公司、軟件界面設計公司

  案例 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網》案例錦囊｜交互設計中「防呆手法」的巧妙應用！

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、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咨詢、用戶體驗公司、軟件界面設計公司