前言

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

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

分享目錄

一、關于刷新設計

二、刷新的設計形式

三、線上優秀案例分析

四、總結

一、關于刷新設計

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

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

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

二、刷新的設計形式

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

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

一、思考不同場景下的用戶需要

原型里的某個頁面、組件并不是畫好了就萬事大吉、一成不變的，交互側需要分析：在不同場景下用戶是否存在不同的訴求？

如順豐速運，在工作日里是默認【派送到豐巢柜】，而到了休息日則自動勾選了【上門派件】。

正是充分考慮到了【工作日與休息日】這2個不同的場景與用戶需要：

工作日：上班不在家，下班可以順路去站點拿快遞

休息日：有時間在家里等、不想/懶得出門去拿快遞

通過分析和預判用戶的行為，可以有效地減少操作成本、保障產品的使用體驗。

二、盡量別讓用戶離開當前頁面

我們在給用戶設計一個新的、分支流程時，往往都會選擇【新跳一個頁面】的方式去處理。

而對于交互需要注意的是：

但并不是所有的新的、分支流程，都需要脫離掉當前頁面。有些場景下，新跳頁面容易斷掉用戶的當前任務，再切回來時的操作成本、鏈路會特別復雜。

比如你在刷朋友圈，此時收到一條消息，此時退出朋友圈回去看消息后，再切回來繼續看朋友圈，這個鏈路得多長…

而對比QQ空間你就知道多香了：

查看QQ動態時有新的消息通知，可以用【小窗口】的方式進行快速查看與回復，用戶處理完可以繼續瀏覽動態，當前流程不受任何影響。

再如Edge瀏覽器，選中某段信息后可以在【右側邊欄】中加載結果。

這樣既不用覆蓋當前頁面 來加載新的結果，又不用新建一個窗口去處理（用戶還得切回來），用戶可以邊看邊搜。

三、別忘了特殊人群的訴求

和上面的要點有點類似，同樣是需要分析產品里不同的【用戶群】，是否需要兼容不同的交互方式。

比如左撇子用戶，【右邊更容易操作的概念】就不能用在他們身上了。對于那些重要、高頻的功能就需要思考：如何更好兼容【左/右手】的操作習慣。

比如UC瀏覽器的【刷新】按鈕，默認是放在右邊（順應最主流的操作習慣），也可以長按它拖拽到左邊的位置，這樣都能兼顧到不同用戶的使用習慣。

當然以上的預判、分析不一定都在畫原型/出方案的時候能想到的，還得借助【用戶反饋、訪談、后臺數據等】等逐步發現和完善用戶訴求，這也是交互和產品的工作之一。

四、用更直接的方式告知用戶

當采用了某種方式、組件來設計方案后，交互都可以靜下來心想一想：是否能更簡單、明顯一點？

畢竟設計者的理想視角，和使用者的使用視角，有時真的不是同一回事。不同的用戶因為【年齡、經歷、學歷、身體條件】等原因，對同一個事物有著不同的理解。

比如上滑引導，傳統的做法可能就是蓋一個蒙層引導，跟你說上下滑動可切換視頻

而為了更好地幫助用戶理解、減少認知漏斗，交互側可以考慮直接展示上滑的動作，讓用戶明顯看到下面還有視頻。

比如抖音的新手引導：

支付寶的這個例子就更加明顯了，直接將我們習慣表達的術語，直接轉換成最易懂的語言。

五、盡量擺脫組件的束縛

大部分設計者在設計某個頁面或功能時，都會優先調取團隊已有的設計組件，在大廠里更看重這點。

畢竟能用已有組件解決的，就絕不新增一個樣式和代碼，對整個產品的調性、交互方式、用戶心智等都能保持統一。

實際上是：對設計和開發來說能減少很多工作量…

比如在【日期選擇】上，我們的常規思路往往會選擇系統組件，讓用戶在里面選擇某一年的1-12個月份。

有條件的話交互也可以考慮：是否有更合適的表達形式？不一定要依靠組件的限制。

比如QQ團隊在這點上就有新的突破：用側邊欄的方式里展示日期

這樣做的處理有以下優勢：

1.首屏內容可以展示更多月份，選擇效率更快

2.用戶可以一邊選擇月份，一邊看QQ動態

3.更方便快速退出日期

六、維持用戶已有的心智

每個人使用APP都存在著一定的【固有理解】，比如下拉=刷新。

在設計交互方案時同樣需要注意這點，尤其是那些容易被我們忽略的地方。

舉個栗子：iOS在日歷里添加日程時，原本設置了「30分鐘」的日程時間。

而當你在【開始時間】里修改了日期或時間點后，【結束日期】會自動設置「30分鐘」后的時間點。

依然保持著原有「只有30分鐘」的心智模型。

當然如果存在【信息變化】需要讓用戶知道的話，則需要進行一定程度的提示設計了。

七、用易懂的方式處理復雜事物 

交互設計的工作核心，就在于將復雜的產品/用戶需求，轉換成易懂、易操作的處理方式。特別是那些對用戶來說【不知道怎么操作的】。

比如一些疊字（如‘淼’字），用戶不知道怎么打出時。除了進行手寫外，搜狗輸入法中還提供了一個【打出N個組成詞的拼音】的處理方法。

如輸入3個【水】的拼音，就能得出【淼】字。

對于習慣打拼音的用戶，這無疑也是一個不錯的處理方法。

再比如：想打出一些不懂的生僻字（如‘卞’字），個人所得稅APP里就提供一個【選擇筆畫數】的方式來幫助用戶尋找。

– END

好了，以上老和對【交互價值】的一些小總結，覺得認同的麻煩幫我【點贊/在看/收藏/轉發】，寫得不對的請輕點噴~

原文地址：和出此嚴（公眾號）

作者：和出此嚴

轉載請注明：學UI網》結合案例 | 思考交互設計的價值！別再說我們只會畫原型了!

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

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

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

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

這次的海報案例呈現主要圍繞以下三點展開的。

01、3D 膨脹功能

02、3D 凸出功能

03、3D 繞轉功能 

除了大家熟悉的凸出和斜角，2022 版本這次的更新新增了對象-膨脹、材質、以及光照，簡單的給大家示例看下膨脹的效果。

這是一個簡單的幾何圖形膨脹得到的，效果看上去還是可以的哈，以及添加一些光照。

步驟拆解：大的輪廓由三個描邊組合而成，描邊粗細設定為 126pt，描邊的粗細這里沒有絕對的合適的就可以。

選中描邊擴展，選擇膨脹。

以下是參數設置展示部分，功能本身比較的簡單。參數部分僅供參考，沒有絕對的數值，具體看實際情況的效果決定。

#01. 對象：深度 10px、音量 100%、其他參數不變

#02. 材質：默認、基本屬性-粗糙度 1、金屬質感 0

#03. 光照：強度 120% 、旋轉 145° 、高度 45° 、軟化度 40%、 勾選環境光-強度 50%

最后點擊白色尖頭標注的部分（渲染），不然最后出來的效果不自然（不理想）。

這是光照選項下的勾選環境光與不勾選產生不同的效果示意圖，可以看出區別還是蠻大的。

眼睛部分變成了透明， 這里粗糙度設置為 0，光照設置為標準強度 70%。

 

由于參數設定差不多就不一一闡述了，橢圓眼睛的參數設置如下。

星星的參數設置如下。

給大家一一介紹了參數的設置部分以及不同參數設置產生的不同效果，相信大家心里有了一個大致的了解了。最后簡單的排版即可。

這里做了另外一版的海報，功能和參數和案例中差不多，希望可以給大家一些啟發。

下圖是海報的最終呈現效果。

首先我先做了個虎的字體，此處不暫不講字體部分。

原先的凸出與斜角呈現的效果并不帶任何的質感。

選中字體，選擇 3D和材質-凸出和斜角給字體添加材質效果。材質：鍍鋅鏟形圖案點擊渲染即可。

下圖給出了參數設置部分，僅供參考。分辨率可以給的低一些 1024 就可以了，2048 相對效果會好很多，但是電腦會有那么點卡。

Aa. 鏟形圖案濾鏡：啞光、Bb. 渲染設置下的品質：高。

 

下圖是鏟形圖案濾鏡三個不同的表現，案例中我選擇了#03 相對來說會更好。大家也可以去玩一玩其他的材質以及濾鏡。

接著進行適當的排版。

給原圖層添加色相飽和度以及黑色紋理（圖層模式——線性減淡）。

然后給文字層添加一個斜面浮雕效果，貼合主形象虎字體，讓畫面更加的自然。

最后做了簡單的示意動圖。

下圖是案例中平面的圖形部分展示。

三個圖形的參數一樣，下圖給出了參數設置部分，僅供參考。

這里我并沒有點擊渲染設置，我們看下前后的對比。選擇前者不渲染，出來的效果比要渲染的更自然。

下圖是處理好文字編排與圖形之前的構圖部分（簡單的提一提），置入圖形部分就完成啦。

文章小提示：

01：手殘黨可以畫一些簡單的圖形玩一玩（把控好構圖啊，文字編排啊）

02：軟件自帶的材質非常多，個人覺得默認的比較 OK

03：軟件對電腦系統的基本要求

04：不要點擊高質量的渲染、高分辨率，軟件會卡（你試試就知道了） 

那么今天的教程到這就結束了，我們下次見

在日常工作中，與設計師接觸最多的角色就是產品經理（以下統稱PM）了，根據他們的需求產出設計，也是設計師的主要工作內容之一。有些設計師會直接在產品原型的基礎上進行細化，這樣確實能節省很多思考和溝通的成本，有利于在短時間內快速交付。而有的設計師，則習慣把產品的原型先放在一邊，先追溯需求的背景和目標，最終再在具體的需求上發力，產出一個截然不同的方案。

哪一種方式更好呢？這是借用一個大家都耳熟能詳的故事：福特在設計汽車之前，到處去問人們“需要一個什么樣的更好的交通工具？”，幾乎所有人的答案都是 ── 一匹“更快的馬”。

“更好的交通工具”代表“需求”；“更快的”是人對于“需求”的“期望值”；“馬”是人對于解決這個“需求”的假設形態。類比到我們的工作，PM產出的原型，就是最終形態的假設，這個假設形態是否合理，取決于PM對于目標的理解程度和思路的開闊程度，也就是說，如果PM剛剛接手這個項目、還沒來得及充分消化，或是欠缺行業解決經驗、解決思路不夠開闊，那么TA的原型很有可能存在漏洞，這也是很多需求反復變動的原因之一。當然，也有很多PM出原型，只是為了給設計師提供一種思路，實際合作時會給足設計師發揮空間。因此，設計師在設計之前的深思熟慮和充分溝通，是很有必要的。

今天要分享的這個案例，就屬于PM給我一個思路，讓我自由發揮的情況。需求背景如下：線上面試作為家政業務連接和轉化的核心場景，家政從業者（以下簡稱阿姨）在面試環節中的臨場表現是成單的關鍵因素。面試過程中，客戶會問一些自己關注的問題，比如阿姨的工作經歷、職業技能等，PM希望在客戶側提供一些常見的問題，并在阿姨側提供與問題對應的回答要點，從理論上來講，這種一一對應的問答，能夠提升阿姨回答的準確率和客戶滿意度。PM給了我以上原型圖（如圖2），問我是否可以通過加強發送按鈕的引導，來保證阿姨側可以針對性地顯示對應問題的指導答案。

經過分析可知，一一對應的問答引導是為了提升阿姨的面試表現，以達到提升客戶滿意度，從而提升面試簽單轉化的目的。那么，這是否是一個恰當的假設呢？問答能一一對應的前提是：客戶要在面試環節點擊先發送按鈕，阿姨側才會有對應的答案，這顯然會增加客戶側的認知和操作成本，并打破面試的沉浸體驗；同時，阿姨側顯示對應答案就能讓阿姨對答如流，只能停留在理想層面：屏幕上密密麻麻的文字，有加重阿姨認知負擔的風險，而客戶也不會為對面死死盯著屏幕、念著標準答案的阿姨買單。經過一番分析討論，PM同學也放棄了這種假設。

要想真正地解決問題，要先找到問題的本質。連接轉化的關鍵因素是“人”，只有了解到他們的真實訴求，才能提供有價值的功能。

首先，我們要“源于用戶”：把自己當成用戶，通過真實場景的還原，思考“我”要的是什么（目標），什么能幫助“我”作出正確的決策（必要條件），什么能讓“我”更容易更快速決策（重要條件）。

在這個案例中，我們要讓自己在客戶和阿姨兩個角色之間切換。

當我們把自己想象成客戶的時候，會發現在經歷了線上查找阿姨-查看阿姨詳情之后，我們已經按照我們的預期對阿姨們進行了一次初篩；再進入到面試間時，我們的關注點不再是些通用的問題，而是去確認一些在之前環節看不到的「隱藏信息」，比如：阿姨的性格、溝通能力、應變能力、處理特殊情況的經驗等。

當我們把自己想象成阿姨，那么我們的目標就是通過好的表現，來獲得這個工作機會。在視頻面試的過程中，我們很少遇到千篇一律的客戶，他們有著不同的需求和側重，因此提問的內容也千差萬別。另外，在很短的時間內表現自己的優勢，對我們而言也有一定的挑戰，由于學歷和職業屬性限制，我們中有很多人無法在互動中做到靈敏的反應和充分的表達。因此，我們希望在面試之前，能有人指導我們總結個人優勢、告訴我們面試中要注意的點、并通過模擬面試鍛煉臨場反應能力，為真正的面試做足準備。

不僅如此，一次成功的服務達成之前，通常需要客戶和阿姨分別進行多人多輪面試，無論是客戶和阿姨，都會面臨對精力和記憶力的雙重消耗。面試間的面試效率和記憶輔助工具，就顯得尤為必要。

經過兩個角色的場景還原，我們明確了用戶的核心訴求，很顯然，依靠客戶側的通用提示問題和阿姨側的答案模板，離解決核心訴求還有很大距離。那要如何解決呢？

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

作者：環鐵藝術家

轉載請注明：學UI網》設計進階:一個案例,掌握設計價值密碼

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

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

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

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

教程

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

一個不一樣的球

這個球體圖標無需三維軟件的輔助，全程都是通過平面類軟件完成，我個人是通過 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咨詢、用戶體驗公司、軟件界面設計公司