前言

刷新在產(chǎn)品中屬于基礎(chǔ)功能，方便用戶獲取最新動(dòng)態(tài)，是普及度較高的基礎(chǔ)功能之一。在設(shè)計(jì)表達(dá)時(shí)有系統(tǒng)級(jí)表達(dá)、自定義設(shè)計(jì)、多功能結(jié)合等，設(shè)計(jì)發(fā)揮的可控性較大。

今天黑馬哥就結(jié)合一些優(yōu)秀的線上案例，和大家聊一下關(guān)于產(chǎn)品刷新設(shè)計(jì)的千奇百態(tài)，希望拋磚引玉，和大家一起進(jìn)步。

分享目錄

一、關(guān)于刷新設(shè)計(jì)

二、刷新的設(shè)計(jì)形式

三、線上優(yōu)秀案例分析

四、總結(jié)

一、關(guān)于刷新設(shè)計(jì)

在產(chǎn)品中刷新對(duì)于用戶來(lái)說(shuō)并不陌生，是經(jīng)常使用的基礎(chǔ)功能，便于用戶獲取新動(dòng)態(tài)。在一些可以提供內(nèi)容更新的產(chǎn)品中，刷新獲取內(nèi)容變動(dòng)是較為常見(jiàn)的形式。

大家都習(xí)慣將刷新稱呼為下拉刷新，其實(shí)刷新的動(dòng)作不僅限于下拉手勢(shì)交互，也有產(chǎn)品采用單擊和上滑等手勢(shì)交互實(shí)現(xiàn)刷新動(dòng)作。比如一些產(chǎn)品在滑動(dòng)瀏覽內(nèi)容時(shí)，底部標(biāo)簽欄首頁(yè)圖標(biāo)會(huì)變?yōu)樗⑿碌牟僮?，通過(guò)點(diǎn)擊實(shí)現(xiàn)頁(yè)面內(nèi)容的刷新；也有產(chǎn)品在上滑頁(yè)面時(shí)實(shí)時(shí)加載完成刷新，就像很多影視類產(chǎn)品或者瀑布流設(shè)計(jì)的產(chǎn)品。

刷新動(dòng)作不僅可以滿足用戶的求知欲，也能通過(guò)源源不斷的內(nèi)容增加用戶黏性，提高用戶的使用體驗(yàn)。

二、刷新的設(shè)計(jì)形式

簡(jiǎn)單的刷新動(dòng)作已經(jīng)不是簡(jiǎn)單的設(shè)計(jì)了，在產(chǎn)品設(shè)計(jì)師的創(chuàng)新中呈現(xiàn)出了眾多的優(yōu)秀案例，下面為大家梳理一下不同的設(shè)計(jì)表達(dá)形式。

2.1、系統(tǒng)級(jí)表達(dá)

系統(tǒng)級(jí)表達(dá)是采用系統(tǒng)默認(rèn)的一些處理形式，類似于花瓣循環(huán)的動(dòng)態(tài)形式，屬于比較常規(guī)的表達(dá)。也有很多產(chǎn)品采用系統(tǒng)級(jí)形式，用戶理解度較高，設(shè)計(jì)創(chuàng)新的角度來(lái)說(shuō)欠缺一些，表現(xiàn)形式比較生硬。

2.2、情感化文案表達(dá)

為了帶給用戶更有溫度的設(shè)計(jì)，除了在圖形層面進(jìn)行情感化設(shè)計(jì)發(fā)揮，在文案上面也可以更加情感化。有產(chǎn)品使用俏皮可愛(ài)的話術(shù)，每次用戶刷新都呈現(xiàn)不同的文案，與用戶產(chǎn)生情感共鳴。

2.3、動(dòng)態(tài)形式結(jié)合

刷新的動(dòng)態(tài)表達(dá)形式非常普遍，圖形動(dòng)效和動(dòng)作演變等，能夠體現(xiàn)出加載的動(dòng)作。動(dòng)態(tài)形式結(jié)合可以使得趣味性更強(qiáng)，動(dòng)畫(huà)演變的過(guò)程也能降低加載等待過(guò)程中的焦慮感。

2.4、IP 形象結(jié)合

IP 形象結(jié)合到 UI 場(chǎng)景中不僅可以強(qiáng)化品牌感，也能帶來(lái)更加情感化的體驗(yàn)。IP 形象結(jié)合到刷新設(shè)計(jì)中，伴隨著動(dòng)態(tài)演變，以此來(lái)體現(xiàn)加載的過(guò)程。設(shè)計(jì)形式動(dòng)感化，趣味性強(qiáng)且感官體驗(yàn)較佳。

2.5、品牌基因結(jié)合

立足于品牌做設(shè)計(jì)，品牌感可以帶來(lái)差異化的設(shè)計(jì)表達(dá)，也能提高用戶對(duì)品牌的記憶度。很多產(chǎn)品將品牌 LOGO 圖形、輔助圖形、品牌字體、品牌風(fēng)格特征等融入到刷新設(shè)計(jì)中，帶來(lái)差異化的刷新體驗(yàn)。

2.6、業(yè)務(wù)屬性結(jié)合

根據(jù)業(yè)務(wù)特征設(shè)計(jì)刷新圖形，讓用戶在刷新的過(guò)程中感知產(chǎn)品的業(yè)務(wù)屬性，也是強(qiáng)化記憶點(diǎn)的有效形式。

2.7、多功能結(jié)合

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

2.8、其他設(shè)計(jì)形式

隨著體驗(yàn)的重要性升級(jí)，產(chǎn)品設(shè)計(jì)師會(huì)在更細(xì)微之處探索出更優(yōu)的解決方案，做出差異化的體驗(yàn)設(shè)計(jì)。而刷新功能也將會(huì)呈現(xiàn)更豐富的設(shè)計(jì)，從感官層面帶來(lái)更多視覺(jué)感的表現(xiàn)，從體驗(yàn)層面結(jié)合更多輔助功能或者業(yè)務(wù)，發(fā)揮更多使用價(jià)值。

三、線上優(yōu)秀案例分析

通過(guò)以上的梳理我們對(duì)刷新設(shè)計(jì)有了深入的了解，下面通過(guò)一些優(yōu)秀的線上案例來(lái)進(jìn)行分析，輔助大家掌握更多差異化的設(shè)計(jì)表達(dá)。

3.1、情感化的文案設(shè)計(jì)

刷新除了在圖形設(shè)計(jì)和動(dòng)效層面發(fā)揮以外，多功能結(jié)合和文案設(shè)計(jì)也是差異化表達(dá)的方向。文案提示的設(shè)計(jì)相對(duì)比較特殊，通過(guò)不同的文案來(lái)打動(dòng)用戶的體驗(yàn)。

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

3.2、動(dòng)態(tài)化 IP 形象

針對(duì)下拉刷新這一常規(guī)操作，設(shè)計(jì)形式也是豐富多樣。結(jié)合 IP 形象進(jìn)行動(dòng)態(tài)演變完成刷新動(dòng)作，被很多產(chǎn)品設(shè)計(jì)師所采納。

美團(tuán)外賣就將品牌 IP 形象結(jié)合得恰到好處，下拉刷新時(shí)兩只耳朵搖擺非常俏皮可愛(ài)，松開(kāi)后 IP 形象露出，還配合眨眼睛等可愛(ài)的表情動(dòng)效。情感化設(shè)計(jì)結(jié)合動(dòng)態(tài)表現(xiàn)，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗(yàn)。

3.3、刷新帶來(lái)美食誘惑

在完成刷新功能屬性的同時(shí)，還能將產(chǎn)品的屬性或者服務(wù)賣點(diǎn)強(qiáng)化出來(lái)，賦予了常規(guī)操作更多的功能價(jià)值。

麥當(dāng)勞在麥麥商城欄目的下拉刷新設(shè)計(jì)中，采用漢堡形象結(jié)合層級(jí)動(dòng)效進(jìn)行表達(dá)，讓人眼前一亮。動(dòng)效拉長(zhǎng)的漢堡不僅體現(xiàn)出份量感，激發(fā)用戶的食欲；漢堡形象就十分麥當(dāng)勞，展現(xiàn)出品牌關(guān)聯(lián)性。

3.4、趣味化 IP 形象

IP 形象結(jié)合到刷新設(shè)計(jì)中的案例非常多，不僅可以帶來(lái)情感化的體驗(yàn)，也能增加功能操作的趣味性。半次元在下拉刷新時(shí)不僅結(jié)合 IP 形象，還通過(guò)下拉的程度將形象拉長(zhǎng)，最后再配合表情和動(dòng)態(tài)營(yíng)造出趣味性。

3.5、動(dòng)態(tài) IP 完美結(jié)合

轉(zhuǎn)轉(zhuǎn)的 IP 形象頭部的轉(zhuǎn)動(dòng)條是其特征所在，在下拉刷新過(guò)程中完美的結(jié)合了轉(zhuǎn)動(dòng)條，還伴隨著裝飾符號(hào)散開(kāi)的效果。不僅貼切的結(jié)合了 IP 形象的特點(diǎn)，裝飾元素的動(dòng)態(tài)效果也強(qiáng)化了氛圍感，非常符合產(chǎn)品的屬性，是一個(gè)不錯(cuò)的刷新設(shè)計(jì)案例。

3.6、品牌化路徑動(dòng)效

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

從品牌層面著手于刷新設(shè)計(jì)，如果放棄圖形層面的元素選擇，品牌字體的選擇也是一個(gè)思路。得物 APP 將品牌名稱的字體直接運(yùn)用到刷新設(shè)計(jì)中，以路徑動(dòng)效的形式進(jìn)行表達(dá)，最終將筆畫(huà)打散散開(kāi)。設(shè)計(jì)表達(dá)依然延續(xù)了品牌感，也區(qū)別于其他產(chǎn)品的刷新設(shè)計(jì)，在差異化方面呈現(xiàn)出了自身的品牌特征。

3.7、一路騎行的芒果崽

芒果 TV 的下拉刷新設(shè)計(jì)結(jié)合了吉祥物芒果崽，下拉刷新的過(guò)程就是一路騎行的芒果崽。騎行的沿途中有眾多地標(biāo)建筑的剪影，下拉不松手就會(huì)一直處于騎行狀態(tài)，下拉的反饋體驗(yàn)度做得很好。

3.8、漫步的卡通形象

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

3.9、業(yè)務(wù)化的 3D 圖標(biāo)

友啥 APP 利用 3D 圖標(biāo)進(jìn)行循環(huán)切換代表刷新過(guò)程，帶有業(yè)務(wù)屬性的圖標(biāo)不僅可以直觀的突出產(chǎn)品特性，3D 圖標(biāo)化之后視覺(jué)感十足。圖標(biāo)切換帶來(lái)的動(dòng)效流暢自然，匹配刷新動(dòng)作的差異化也非常明顯。

3.10、刷新動(dòng)作下的多功能結(jié)合

刷新已經(jīng)不局限于內(nèi)容更新這一單一需求，一些電商類產(chǎn)品也賦予了刷新多功能的屬性，帶來(lái)更多樣化的操作體驗(yàn)。

比如淘寶 APP 首頁(yè)下拉刷新時(shí)，短距離下拉依然屬于刷新范圍，繼續(xù)下拉則會(huì)提示釋放進(jìn)入淘寶二樓。在保持刷新基礎(chǔ)功能的前提下，融入了多功能場(chǎng)景，開(kāi)發(fā)出功能或者活動(dòng)的全新曝光入口。

在商品詳情頁(yè)時(shí)下拉則無(wú)法提供刷新服務(wù)，為了給予更好的反饋設(shè)計(jì)，下拉動(dòng)作便會(huì)顯示我的足跡。不僅可以在用戶習(xí)慣性操作時(shí)給予反饋，足跡的提供也更方便用戶做出選擇。

同一個(gè)產(chǎn)品也并非只能呈現(xiàn)出一種刷新設(shè)計(jì)方案，不同的業(yè)務(wù)場(chǎng)景可以使用不同的表達(dá)。淘寶 APP 里面便根據(jù)場(chǎng)景的不同提供了多種刷新方案。常規(guī)界面的刷新便以品牌字“淘”作為設(shè)計(jì)出發(fā)點(diǎn)，刷新的過(guò)程以動(dòng)態(tài)形式表達(dá)品牌字，簡(jiǎn)單粗暴的傳遞出品牌感。

3.11、結(jié)合 Slogan 完成刷新

刷新不僅只是內(nèi)容的更新，產(chǎn)品設(shè)計(jì)中呈現(xiàn)出更豐富的表達(dá)，比如輔助傳播活動(dòng)、宣傳品牌形象和 Slogan 等。產(chǎn)品設(shè)計(jì)師都在賦予單一功能多重使命，帶來(lái)豐富多樣的使用體驗(yàn)。

58 同城首頁(yè)在下拉刷新時(shí)，除了體現(xiàn)刷新動(dòng)態(tài)以外，也展示了 Slogan “讓生活簡(jiǎn)單美好”。借助刷新入口的曝光度，更快的將產(chǎn)品的定位傳遞給用戶，增加用戶對(duì)產(chǎn)品的好感度。

3.12、保持格調(diào)一致的設(shè)計(jì)

很多小眾的產(chǎn)品在設(shè)計(jì)上面呈現(xiàn)出比較有格調(diào)的設(shè)計(jì)，區(qū)別于常規(guī)的氛圍營(yíng)造，設(shè)計(jì)風(fēng)格更加簡(jiǎn)約大氣。

屋顏 APP 整體的設(shè)計(jì)風(fēng)格就屬于比較簡(jiǎn)約文藝，在下拉刷新的設(shè)計(jì)中也保持了這個(gè)風(fēng)格特征。以生活物品演變出的線形圖標(biāo)體現(xiàn)刷新的過(guò)程，整體的過(guò)度和銜接也恰到好處。

3.13、探索式的刷新設(shè)計(jì)

刷新設(shè)計(jì)除了圖形、動(dòng)效、文案等層面發(fā)揮以外，背景層發(fā)揮的案例相對(duì)較少，除了配合傳播性質(zhì)的設(shè)計(jì)。

AcFun 在下拉刷新時(shí)，背景層設(shè)計(jì)成類似于宇宙空間的插畫(huà)場(chǎng)景，刷新的過(guò)程就像探索一樣。配合卡通形象左顧右盼的動(dòng)效，帶來(lái)的感官效果也是非常不錯(cuò)的。

關(guān)于刷新設(shè)計(jì)的優(yōu)秀案例很多，這里就不一一例舉了，以上案例僅作為拋磚引玉形式的引導(dǎo)。大家根據(jù)這個(gè)框架多多體驗(yàn)產(chǎn)品，總結(jié)更多的優(yōu)秀案例。

四、總結(jié)

刷新設(shè)計(jì)作為產(chǎn)品中使用較為頻繁的基礎(chǔ)功能，與用戶的接觸也是非常密切的，設(shè)計(jì)的重要性因此不言而喻。無(wú)論是突出品牌感、趣味性、差異化還是強(qiáng)化感官層面的體驗(yàn)，或者是多功能結(jié)合等，都是產(chǎn)品設(shè)計(jì)師重點(diǎn)發(fā)揮的模塊之一。

本文以案例分析為引導(dǎo)，為大家梳理了刷新設(shè)計(jì)的形式與思路，希望可以拋磚引玉，帶給大家更多的設(shè)計(jì)靈感?？偨Y(jié)觀點(diǎn)屬于個(gè)人理解后的呈現(xiàn)，如有欠缺大家選擇性吸收和修正補(bǔ)全。

原文地址：黑馬家族（公眾號(hào)）

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》刷新設(shè)計(jì)的千奇百態(tài)（UI設(shè)計(jì)）

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

任務(wù)處理是體驗(yàn)設(shè)計(jì)師的一項(xiàng)基本功，任務(wù)處理的原則是提高任務(wù)完成的效率，同時(shí)滿足用戶體驗(yàn)的要求。任務(wù)通常指的是有目的性的工作與行為，例如領(lǐng)導(dǎo)給你一個(gè)買煙的任務(wù)，媽媽給你一個(gè)去菜場(chǎng)買西紅柿的任務(wù)，這些都是任務(wù)，并且都有一個(gè)目的。

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

任務(wù)與行為都是可以被設(shè)計(jì)的，通過(guò)設(shè)計(jì)的手段我們可以提高任務(wù)的完成效率，提高用戶行為準(zhǔn)確性。如何對(duì)任務(wù)和行為進(jìn)行設(shè)計(jì)也就是今天我們要探討的內(nèi)容。

一、任務(wù)流程設(shè)計(jì)

在數(shù)字產(chǎn)品中，有非常多的任務(wù)等待用戶去完成，有的是用戶發(fā)起，有的是產(chǎn)品業(yè)務(wù)引導(dǎo)用戶去完成，例如修改個(gè)人頭像、添加收貨地址等等。任務(wù)聽(tīng)起來(lái)比較抽象，很多設(shè)計(jì)師不知道怎么去安排任務(wù)和處理任務(wù)的節(jié)點(diǎn)，那么我們來(lái)看一下如何完成這樣的任務(wù)流程的設(shè)計(jì)。

1、分析任務(wù)

假如我們現(xiàn)在需要進(jìn)行一個(gè)家電報(bào)修任務(wù)流程的設(shè)計(jì)，那么我們要來(lái)分析一下這個(gè)任務(wù)中需要明確的2個(gè)要素：

a) 背景和目標(biāo)

用戶可以通過(guò)報(bào)修流程自主完成家電報(bào)修，預(yù)約維修員上門(mén)維修。

b) 目標(biāo)用戶是誰(shuí)

購(gòu)買過(guò)相關(guān)產(chǎn)品的用戶

2、如何劃分任務(wù)節(jié)點(diǎn)

a) 分析用戶行為與觸點(diǎn)

要對(duì)家電進(jìn)行報(bào)修，那首先要先確定報(bào)修的是什么家電，其次需要對(duì)家電類型進(jìn)行選擇、輸入，然后填寫(xiě)相關(guān)的維修信息，例如發(fā)生了什么故障，維修地址在哪里，預(yù)約上門(mén)時(shí)間，填寫(xiě)備注，相關(guān)服務(wù)的說(shuō)明。最后提交訂單并查看服務(wù)受理的進(jìn)度。

那么到底這些任務(wù)需要?jiǎng)澐殖蓭讉€(gè)界面呢？每個(gè)界面放多少內(nèi)容，很多設(shè)計(jì)師在這一步就會(huì)比較糾結(jié)，那么我們就可以把用戶行為和觸點(diǎn)來(lái)進(jìn)行一些假設(shè)，先將這些行為做成卡片。初學(xué)者可以先用這個(gè)辦法來(lái)進(jìn)行梳理，掌握熟練之后自然而然的可以直接進(jìn)行快速的劃分界面。

然后我們將卡片填充到界面容器中，思考當(dāng)前容器中的信息內(nèi)容是否會(huì)溢出，行為與任務(wù)節(jié)點(diǎn)是否契合，并對(duì)用戶行為進(jìn)行分類，例如填寫(xiě)選擇報(bào)修家電、填寫(xiě)故障的原因、填寫(xiě)維修地址、預(yù)約時(shí)間、填寫(xiě)備注屬于強(qiáng)關(guān)聯(lián)的行為，而查看服務(wù)受理進(jìn)度則屬于下一個(gè)任務(wù)節(jié)點(diǎn)的用戶行為，并不能直接在一個(gè)界面中填充。于是從這一步來(lái)看，任務(wù)流程節(jié)點(diǎn)可以劃分出2個(gè)：1.填寫(xiě)報(bào)修信息 2.查看報(bào)修進(jìn)度

然后我們繼續(xù)思考， 填寫(xiě)報(bào)修信息界面的用戶場(chǎng)景是否較為復(fù)雜，是否需要拆分，交互設(shè)計(jì)的原則并不是路徑越短效率越高的，如果單個(gè)任務(wù)節(jié)點(diǎn)需要用戶操作的內(nèi)容過(guò)于復(fù)雜，也會(huì)降低效率與體驗(yàn)。所以在填寫(xiě)報(bào)修信息這個(gè)節(jié)點(diǎn)中，我們可以發(fā)現(xiàn)用戶在選擇報(bào)修電器的時(shí)候可能會(huì)有比較復(fù)雜的場(chǎng)景：

① 系統(tǒng)自動(dòng)調(diào)出訂單里的家電型號(hào)供用戶選擇

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

有小伙伴想問(wèn)，既然能夠自動(dòng)調(diào)出為什么還要手動(dòng)添加呢？因?yàn)檫@里還存在一個(gè)場(chǎng)景那就是你家的電器是別人給你買的，比如我給我媽家買了一個(gè)凈水器，凈水器壞了我媽想自己通過(guò)小程序報(bào)修，這個(gè)時(shí)候系統(tǒng)是無(wú)法讀取到這臺(tái)凈水器的訂單記錄的。

然后選擇家電時(shí)，可能會(huì)涉及到多個(gè)家電的選擇，比如你買了某個(gè)品牌的多個(gè)產(chǎn)品，那需要從多個(gè)產(chǎn)品中選擇需要報(bào)修的那個(gè)。綜上所述，可能將選擇報(bào)修電器這步行為單獨(dú)做一個(gè)任務(wù)節(jié)點(diǎn)會(huì)更好，雖然節(jié)點(diǎn)多了一個(gè)，但是場(chǎng)景更聚焦，任務(wù)看起來(lái)也不會(huì)那么復(fù)雜。

在填寫(xiě)報(bào)修信息的時(shí)候依然也可以修改需要報(bào)修的家電，而不需要再返回上一個(gè)節(jié)點(diǎn)。

b) 窮舉場(chǎng)景，劃分核心與支線

當(dāng)我們劃分好任務(wù)節(jié)點(diǎn)后，剩下的場(chǎng)景窮舉也就比較簡(jiǎn)單了。核心的任務(wù)和用戶行為我們已經(jīng)梳理完畢，剩余的支線場(chǎng)景我們?cè)偃パa(bǔ)全即可。例如提交訂單后無(wú)人聯(lián)系，那么可以提供一個(gè)催單的功能，如果服務(wù)不滿意可以進(jìn)行投訴，對(duì)服務(wù)過(guò)程中的收費(fèi)項(xiàng)目進(jìn)行一個(gè)說(shuō)明等等。

c) 用戶行為與布局

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

第一個(gè)任務(wù)節(jié)點(diǎn)是選擇電器+手動(dòng)添加，所以我們需要一個(gè)能夠進(jìn)行單選（訂單列表）的box以及一個(gè)手動(dòng)添加的按鈕。同時(shí)需要將手動(dòng)添加后的界面也思考一下，如何讓用戶快速的進(jìn)行電器的篩選和添加。這里可以用一個(gè)縱向?qū)Ш?，類似商品的分類，同時(shí)加上搜索。

這里就要注意了，先給用戶添加按鈕還是先讓用戶去選擇。大部分的場(chǎng)景還是用戶自己進(jìn)行自購(gòu)的，所以一般訂單都可以直接根據(jù)下單的手機(jī)號(hào)直接讀取到，只要登錄應(yīng)用之后。但不要忘了，如果當(dāng)前購(gòu)買的產(chǎn)品太多，那么添加按鈕會(huì)被頂?shù)较路?，用戶可能?huì)看不到。所以固定在頂部是更好的選擇，這里不需要糾結(jié)誰(shuí)的使用場(chǎng)景更多誰(shuí)放前面的問(wèn)題。

第二個(gè)任務(wù)節(jié)點(diǎn)在輸入報(bào)修信息的時(shí)候可以自動(dòng)帶入一部分信息，例如下單地址、產(chǎn)品型號(hào)等，同時(shí)也要支持地址和型號(hào)的修改。我們來(lái)看一下布局是怎么做的。

在第三個(gè)任務(wù)節(jié)點(diǎn)查看報(bào)修進(jìn)度的時(shí)候，比較關(guān)鍵的信息是報(bào)修的地址、報(bào)修電器以及單號(hào)，其次是報(bào)修的進(jìn)度，當(dāng)報(bào)修進(jìn)度到達(dá)排工時(shí)，可以給用戶工作人員相關(guān)的信息。在提交報(bào)修單后，也需要提供用戶進(jìn)行客服咨詢的功能服務(wù)。最后是對(duì)本次服務(wù)其他支線需求，例如催單、投訴 等。

二、如何解決任務(wù)流程中的效率問(wèn)題

1、任務(wù)設(shè)定不清晰，復(fù)雜且無(wú)序

我們先來(lái)看下方的界面案例

我們?cè)谠O(shè)置任務(wù)流程時(shí)，首先要明確什么是核心任務(wù)，什么是次要/支線任務(wù)。在這個(gè)界面中除了底部的核心按鈕“生成”以外，還有其他的任務(wù)，例如領(lǐng)取、修改、附加險(xiǎn)、添加主案、收藏方案、收件人信息填寫(xiě)等。這里就會(huì)讓用戶開(kāi)始迷茫了，如果我要最終完成“生成保險(xiǎn)計(jì)劃”，我該需要怎么操作？其他的按鈕我該如何去點(diǎn)擊，有什么順序，有什么是必填或非必填的嗎？

顯然，在一個(gè)需要有嚴(yán)謹(jǐn)邏輯步驟的任務(wù)流中，不適合將所有的任務(wù)按鈕都布局在一個(gè)界面中。這和一些電商的詳情是有區(qū)別，有人會(huì)說(shuō)那類似電商的詳情不是也有很多這樣的按鈕嘛，除了加入購(gòu)物車和購(gòu)買以外，還有領(lǐng)券、查看評(píng)價(jià)、去店鋪主頁(yè)逛等按鈕，為什么它可以這樣，而這個(gè)界面中就不行呢？

① 這個(gè)界面的任務(wù)都需要用戶進(jìn)行填寫(xiě)、設(shè)置，需要花費(fèi)較大的認(rèn)知成本。

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

所以類似這樣的界面我們需要進(jìn)行線性化，讓用戶知道哪些任務(wù)需要先完成，把任務(wù)節(jié)點(diǎn)劃分清晰，這樣用戶的效率也會(huì)提高。

2、線性任務(wù)的容錯(cuò)率

那講到線性任務(wù)不得不提到它的容錯(cuò)率。線性任務(wù)經(jīng)常遇到的幾個(gè)問(wèn)題就是

① 讓用戶經(jīng)常返回操作修改，降低效率

② 步驟太多用戶失去耐心

③ 任務(wù)結(jié)束進(jìn)入死胡同沒(méi)有閉環(huán)。

第一種，用戶可能頻繁需要返回，例如在多層級(jí)分類篩選的流程中或者超長(zhǎng)步驟的表單填寫(xiě)。這種情況下用戶如果對(duì)之前的信息要修改，那么就會(huì)出現(xiàn)問(wèn)題。

我們通過(guò)合并觸點(diǎn)或行為的形式，將可以在一個(gè)界面中完成的任務(wù)進(jìn)行組合或提供一個(gè)公共頁(yè)。

但是不管使用哪種方式，依然要分清楚當(dāng)前任務(wù)節(jié)點(diǎn)的獨(dú)立性，如果有行為、場(chǎng)景沖突的情況下是不能合并的，例如需要校驗(yàn)或者必須填寫(xiě)某些信息后才可進(jìn)行下一步任務(wù)的情況下是不可以合并的，也不能使用公共頁(yè)來(lái)解決問(wèn)題。

還有一種類似公共頁(yè)的形式，像閑魚(yú)的二手電子產(chǎn)品回收，需要填寫(xiě)相關(guān)產(chǎn)品信息。這里其實(shí)也可以看作是一個(gè)公共頁(yè)，只是相比傳統(tǒng)的公共頁(yè)形式這里需要填寫(xiě)單個(gè)選項(xiàng)少，并且可以直接在公共頁(yè)中選擇，這種形式雖然很像，但是和傳統(tǒng)不同的是，他在最初階段無(wú)法看到一共需要填寫(xiě)哪些信息，只有選擇完一項(xiàng)才會(huì)出現(xiàn)下一項(xiàng)。這里我們也可以猜想一下，為什么一開(kāi)始不直接把所有選項(xiàng)放出來(lái)讓用戶去修改呢？因?yàn)檫@里的選項(xiàng)也并非是有前后邏輯關(guān)系的。

兩個(gè)原因：

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

② 節(jié)省了n步選擇的操作。前者選擇完一項(xiàng)自動(dòng)會(huì)展開(kāi)第二項(xiàng)，后者則需要點(diǎn)擊-選擇-點(diǎn)擊，每一個(gè)步驟多了一次點(diǎn)擊。

所以完全線性的任務(wù)流程條件是比較苛刻的，也并不是所有線性流程都不好，要學(xué)會(huì)甄別。

3、任務(wù)的閉環(huán)

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

所以表白要徹底，好人也要做到底。閉環(huán)最關(guān)鍵的找到最初的設(shè)計(jì)目標(biāo)。例如上一篇文章我們提到的新人限時(shí)免費(fèi)讀書(shū)的需求，在最后時(shí)間截止或者用戶領(lǐng)完5本書(shū)后，需要再給用戶進(jìn)行vip購(gòu)買和權(quán)益提示，不能直接消失。

還有如果咱們有活動(dòng)進(jìn)行優(yōu)惠券發(fā)放的場(chǎng)景，也要注意引導(dǎo)用戶使用優(yōu)惠券或者在可以使用的場(chǎng)景繼續(xù)逛，而不是讓用戶領(lǐng)取完優(yōu)惠券后直接結(jié)束任務(wù)。

在上文中，我們提到的報(bào)修流程，當(dāng)提交完信息后會(huì)需要一個(gè)狀態(tài)頁(yè)，例如預(yù)約成功，然后讓用戶查看預(yù)約的階段，很多設(shè)計(jì)師在這步可能會(huì)分開(kāi)設(shè)計(jì)，先給一個(gè)狀態(tài)頁(yè)，再在這個(gè)狀態(tài)也讓用戶點(diǎn)擊查看進(jìn)度。其實(shí)沒(méi)必要直接做在一個(gè)界面中即可。

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

4、任務(wù)的逆向邏輯

正向邏輯大家都會(huì)做，但是往往會(huì)忽略一些逆向流程。例如搜索的逆向流程，如果我們進(jìn)行多次搜索后再進(jìn)行返回，是進(jìn)入到上一個(gè)關(guān)鍵詞的結(jié)果頁(yè)還是回到默認(rèn)狀態(tài)。應(yīng)該是要回到默認(rèn)狀態(tài)頁(yè)，也就是點(diǎn)擊搜索框后進(jìn)入的初始狀態(tài)。

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

三、總結(jié)

任務(wù)流程設(shè)計(jì)并不難，關(guān)注好用戶的核心場(chǎng)景，主線流程一定要清晰，不要被支線流程干擾。在原型設(shè)計(jì)上也要注意信噪比，突出重要的信息與行為引導(dǎo)點(diǎn)。步驟多并不意味著效率低，步驟少也不代表效率高，在成熟期的產(chǎn)品中也要做好a/b測(cè)試來(lái)多多分析。設(shè)計(jì)如何落地，如何確定方案，很多時(shí)候不是理性的，也沒(méi)有任何標(biāo)準(zhǔn)，每個(gè)人的意見(jiàn)都帶有一定的主觀性，設(shè)計(jì)師也在很容易在其中迷失，掌握好客觀的驗(yàn)證方法，可以提高工作的效率。

原文地址：應(yīng)謀鬼計(jì)（公眾號(hào)）

作者： 應(yīng)駿

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》UI/UX設(shè)計(jì)師如何處理任務(wù)及優(yōu)化流程

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

? 色塊的數(shù)量要適當(dāng)控制，太少了顯得單調(diào)，太多了會(huì)很碎。

▲比如上圖的色塊就過(guò)于零碎了。

▲上圖就要好很多。

? 不要把所有色塊都嚴(yán)格對(duì)齊，否則會(huì)很死板。

? 由于幾何色塊本身比較單調(diào)、生硬，所以色塊內(nèi)的信息和圖形可以靈活一點(diǎn)，可以增加一些細(xì)節(jié)，比如裝飾元素。

? 不一定要把所有的信息都放進(jìn)色塊里，把個(gè)別信息、元素放出來(lái)，可以使版面看起來(lái)更靈活。

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

案例一：服裝畫(huà)冊(cè)目錄設(shè)計(jì)

下圖是某服裝畫(huà)冊(cè)的目錄頁(yè)設(shè)計(jì)，其實(shí)也是用了色塊來(lái)排版，但是整體很混亂，信息分組不明確，而且很不精致，所以需要對(duì)它進(jìn)行調(diào)整。

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

? 重新設(shè)計(jì)標(biāo)題。黑色太過(guò)突兀，所以我把它改成了粉色，并給副標(biāo)題也加了一個(gè)綠色塊，副標(biāo)題與標(biāo)題以及下方的綠色塊疊加，既增加了畫(huà)面的層次感和設(shè)計(jì)感，也加強(qiáng)了上下兩個(gè)空間的聯(lián)系。

? 將內(nèi)文的排得更精致一點(diǎn)。首先，選了一個(gè)歐式風(fēng)格的字體，給內(nèi)文中的四組信息分別加上序號(hào)，在風(fēng)格與排版上與其他元素形成鮮明的對(duì)比。其次，把內(nèi)文的顏色從黑色改成與對(duì)應(yīng)色塊的深色，融合性更好。最后，在小標(biāo)題和正文之間加入短線條，做區(qū)隔和裝飾的作用，并適當(dāng)調(diào)整正文的行距。

? 用網(wǎng)格系統(tǒng)稍作規(guī)范就完成了。

方案二：兒童蛋白粉單張?jiān)O(shè)計(jì)

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

? 將屬于不同組別的信息和元素分別放入色塊中進(jìn)行區(qū)隔，色塊顏色來(lái)自于品牌logo和包裝。

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

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

? 把標(biāo)題字體改成宋體和襯線體，并把產(chǎn)品圖片下方的色塊改成圓形，加強(qiáng)視覺(jué)上的對(duì)比效果和靈活性。

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

兩個(gè)正文的大色塊里全是文字所以略顯單調(diào)，于是我在文字上下加了一組波浪線，細(xì)節(jié)上會(huì)更精致一點(diǎn)，到這里這個(gè)單張就排完了。

方案三：移動(dòng)寬帶海報(bào)設(shè)計(jì)

下圖是移動(dòng)寬帶的一則促銷海報(bào)，也是用了色塊排版，該畫(huà)面中的信息其實(shí)挺清晰的，主次分明，也有一定的視覺(jué)沖擊力。問(wèn)題在于美觀性不夠、形式過(guò)于普通不時(shí)尚、排版很呆板，下面我們來(lái)對(duì)它進(jìn)行優(yōu)化：

? 將該畫(huà)面中的信息一一用色塊框起來(lái)，原方案把“100M寬帶優(yōu)惠用”放在一個(gè)大色塊里，層級(jí)關(guān)系太少，視覺(jué)變化不夠豐富，所以我把它分成了三個(gè)色塊（由于移動(dòng)的調(diào)性還是比較年輕的，所以我打算用孟菲斯風(fēng)格來(lái)做）。另外，原方案中的優(yōu)惠套餐被處理成三個(gè)很平均的色塊，看起來(lái)既分散又缺少變化，所以我把他們組合在了一起。

? 將“100M寬帶優(yōu)惠用”這幾個(gè)色塊進(jìn)行適當(dāng)錯(cuò)位排版，并在其下面增加一個(gè)大的色塊（可以看作是電視機(jī)的屏幕），以使版面變得靈活且主次分明。

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

? 只有文字和矩形色塊的畫(huà)面太過(guò)單調(diào)和生硬，所以我加了一些與寬帶相關(guān)的圖形元素進(jìn)來(lái)，比如代表視頻的播放器符號(hào)、代表網(wǎng)速快的閃電符號(hào)、代表互聯(lián)網(wǎng)的箭頭、代表網(wǎng)線的曲線。整個(gè)版面變得生動(dòng)、活潑了很多。

? 在背景中加入網(wǎng)格底紋，使背景與主體形成呼應(yīng)，視覺(jué)上也沒(méi)那么單調(diào)，并把活動(dòng)時(shí)間和辦理方式從最下面的色塊中調(diào)出來(lái)放在視覺(jué)主體的下方，與其他的文字色塊形成對(duì)比，

? 再調(diào)整一點(diǎn)細(xì)節(jié)就做完了。

色塊排版的用法還有很多，通過(guò)改變色塊的風(fēng)格、造型、組合方式等等，可以創(chuàng)造出非常多樣的效果，所以用色塊排版也不一定會(huì)很死板、很粗暴，比較適合表現(xiàn)時(shí)尚、沖擊力強(qiáng)的設(shè)計(jì)需求，但確實(shí)不太適合用于表現(xiàn)高端、高級(jí)的視覺(jué)，這點(diǎn)需要注意一下。

原文地址：蔥爺（公眾號(hào)）

作者：蔥爺

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》用色塊打開(kāi)排版的思路，簡(jiǎn)單好用!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

兩個(gè)元素， 如果一樣大，平鋪在畫(huà)面中，就會(huì)顯得普普通通的，沒(méi)有任何亮點(diǎn)。
如果我們把其中一個(gè)放大，另一個(gè)縮小，再來(lái)看：

畫(huà)面是不是有特點(diǎn)了很多，并且有了節(jié)奏感， 就連文案排版也有更多的方式。

所以對(duì)比就是讓畫(huà)面的兩個(gè)組成部分/元素，以夸張的手法，布局構(gòu)圖，以讓畫(huà)面產(chǎn)生強(qiáng)烈的反差。以提升畫(huà)面沖擊力，畫(huà)面縱深，內(nèi)容豐富度。是非常有效提升畫(huà)面品質(zhì)的方法之一。

那大小對(duì)比如何玩的精通，玩得高級(jí)呢？
我們一起來(lái)看一下：

一、人物與人物

1、全身與半身對(duì)比

這種半身人物和小人物的對(duì)比，或者頭部表情眼神與小人物的對(duì)比主要可以展示人物細(xì)節(jié)，后面的人物放大表情傳遞情緒，前面的人物展示全身，傳遞狀態(tài)，可以很好地傳遞內(nèi)容，常常用在各類視覺(jué)海報(bào)中。

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

這種對(duì)比有強(qiáng)烈的大小反差，并且可以很大程度地拉伸畫(huà)面縱深，表現(xiàn)出很強(qiáng)的空間感！
并且還有一個(gè)細(xì)節(jié)：這兩張都是三角形構(gòu)圖，非常穩(wěn)定。

所以我們?cè)谠O(shè)計(jì)的時(shí)候要也要注意畫(huà)面的構(gòu)圖方式，夸張對(duì)比同時(shí)，要保證畫(huà)面的穩(wěn)定和飽滿！

3、全身與全身對(duì)比

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

二、人物與場(chǎng)景

1、小場(chǎng)景與大人物

夸張化的對(duì)比，讓本該小巧的人物矗立在場(chǎng)景里，很容易就營(yíng)造除了一種巍峨磅礴的視覺(jué)感受。

一般需要很高的設(shè)計(jì)成本，工時(shí)不小。簡(jiǎn)單點(diǎn)的做法我們可以直接在人物下面拼接一些小場(chǎng)景，比如這樣：

一些日常小需求中，沒(méi)有那么多的時(shí)間去打磨細(xì)節(jié)，就可以這樣做，既能保證按時(shí)完成需求，也能有一定的創(chuàng)意性。

2、小人物與大場(chǎng)景對(duì)比

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

總結(jié)

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

原文地址：菜心設(shè)計(jì)鋪  （公眾號(hào)）

作者：菜心工作室

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》這設(shè)計(jì)沒(méi)創(chuàng)意？你信不信我不干了？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

一、思考不同場(chǎng)景下的用戶需要

原型里的某個(gè)頁(yè)面、組件并不是畫(huà)好了就萬(wàn)事大吉、一成不變的，交互側(cè)需要分析：在不同場(chǎng)景下用戶是否存在不同的訴求？

如順豐速運(yùn)，在工作日里是默認(rèn)【派送到豐巢柜】，而到了休息日則自動(dòng)勾選了【上門(mén)派件】。

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

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

休息日：有時(shí)間在家里等、不想/懶得出門(mén)去拿快遞

通過(guò)分析和預(yù)判用戶的行為，可以有效地減少操作成本、保障產(chǎn)品的使用體驗(yàn)。

二、盡量別讓用戶離開(kāi)當(dāng)前頁(yè)面

我們?cè)诮o用戶設(shè)計(jì)一個(gè)新的、分支流程時(shí)，往往都會(huì)選擇【新跳一個(gè)頁(yè)面】的方式去處理。

而對(duì)于交互需要注意的是：

但并不是所有的新的、分支流程，都需要脫離掉當(dāng)前頁(yè)面。有些場(chǎng)景下，新跳頁(yè)面容易斷掉用戶的當(dāng)前任務(wù)，再切回來(lái)時(shí)的操作成本、鏈路會(huì)特別復(fù)雜。

比如你在刷朋友圈，此時(shí)收到一條消息，此時(shí)退出朋友圈回去看消息后，再切回來(lái)繼續(xù)看朋友圈，這個(gè)鏈路得多長(zhǎng)…

而對(duì)比QQ空間你就知道多香了：

查看QQ動(dòng)態(tài)時(shí)有新的消息通知，可以用【小窗口】的方式進(jìn)行快速查看與回復(fù)，用戶處理完可以繼續(xù)瀏覽動(dòng)態(tài)，當(dāng)前流程不受任何影響。

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

這樣既不用覆蓋當(dāng)前頁(yè)面 來(lái)加載新的結(jié)果，又不用新建一個(gè)窗口去處理（用戶還得切回來(lái)），用戶可以邊看邊搜。

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

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

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

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

當(dāng)然以上的預(yù)判、分析不一定都在畫(huà)原型/出方案的時(shí)候能想到的，還得借助【用戶反饋、訪談、后臺(tái)數(shù)據(jù)等】等逐步發(fā)現(xiàn)和完善用戶訴求，這也是交互和產(chǎn)品的工作之一。

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

當(dāng)采用了某種方式、組件來(lái)設(shè)計(jì)方案后，交互都可以靜下來(lái)心想一想：是否能更簡(jiǎn)單、明顯一點(diǎn)？

畢竟設(shè)計(jì)者的理想視角，和使用者的使用視角，有時(shí)真的不是同一回事。不同的用戶因?yàn)椤灸挲g、經(jīng)歷、學(xué)歷、身體條件】等原因，對(duì)同一個(gè)事物有著不同的理解。

比如上滑引導(dǎo)，傳統(tǒng)的做法可能就是蓋一個(gè)蒙層引導(dǎo)，跟你說(shuō)上下滑動(dòng)可切換視頻

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

比如抖音的新手引導(dǎo)：

支付寶的這個(gè)例子就更加明顯了，直接將我們習(xí)慣表達(dá)的術(shù)語(yǔ)，直接轉(zhuǎn)換成最易懂的語(yǔ)言。

五、盡量擺脫組件的束縛

大部分設(shè)計(jì)者在設(shè)計(jì)某個(gè)頁(yè)面或功能時(shí)，都會(huì)優(yōu)先調(diào)取團(tuán)隊(duì)已有的設(shè)計(jì)組件，在大廠里更看重這點(diǎn)。

畢竟能用已有組件解決的，就絕不新增一個(gè)樣式和代碼，對(duì)整個(gè)產(chǎn)品的調(diào)性、交互方式、用戶心智等都能保持統(tǒng)一。

實(shí)際上是：對(duì)設(shè)計(jì)和開(kāi)發(fā)來(lái)說(shuō)能減少很多工作量…

比如在【日期選擇】上，我們的常規(guī)思路往往會(huì)選擇系統(tǒng)組件，讓用戶在里面選擇某一年的1-12個(gè)月份。

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

比如QQ團(tuán)隊(duì)在這點(diǎn)上就有新的突破：用側(cè)邊欄的方式里展示日期

這樣做的處理有以下優(yōu)勢(shì)：

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

2.用戶可以一邊選擇月份，一邊看QQ動(dòng)態(tài)

3.更方便快速退出日期

六、維持用戶已有的心智

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

在設(shè)計(jì)交互方案時(shí)同樣需要注意這點(diǎn)，尤其是那些容易被我們忽略的地方。

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

而當(dāng)你在【開(kāi)始時(shí)間】里修改了日期或時(shí)間點(diǎn)后，【結(jié)束日期】會(huì)自動(dòng)設(shè)置「30分鐘」后的時(shí)間點(diǎn)。

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

當(dāng)然如果存在【信息變化】需要讓用戶知道的話，則需要進(jìn)行一定程度的提示設(shè)計(jì)了。

七、用易懂的方式處理復(fù)雜事物 

交互設(shè)計(jì)的工作核心，就在于將復(fù)雜的產(chǎn)品/用戶需求，轉(zhuǎn)換成易懂、易操作的處理方式。特別是那些對(duì)用戶來(lái)說(shuō)【不知道怎么操作的】。

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

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

對(duì)于習(xí)慣打拼音的用戶，這無(wú)疑也是一個(gè)不錯(cuò)的處理方法。

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

– END

好了，以上老和對(duì)【交互價(jià)值】的一些小總結(jié)，覺(jué)得認(rèn)同的麻煩幫我【點(diǎn)贊/在看/收藏/轉(zhuǎn)發(fā)】，寫(xiě)得不對(duì)的請(qǐng)輕點(diǎn)噴~

原文地址：和出此嚴(yán)（公眾號(hào)）

作者：和出此嚴(yán)

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》結(jié)合案例 | 思考交互設(shè)計(jì)的價(jià)值！別再說(shuō)我們只會(huì)畫(huà)原型了!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

這次的海報(bào)案例呈現(xiàn)主要圍繞以下三點(diǎn)展開(kāi)的。

01、3D 膨脹功能

02、3D 凸出功能

03、3D 繞轉(zhuǎn)功能 

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

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

步驟拆解：大的輪廓由三個(gè)描邊組合而成，描邊粗細(xì)設(shè)定為 126pt，描邊的粗細(xì)這里沒(méi)有絕對(duì)的合適的就可以。

選中描邊擴(kuò)展，選擇膨脹。

以下是參數(shù)設(shè)置展示部分，功能本身比較的簡(jiǎn)單。參數(shù)部分僅供參考，沒(méi)有絕對(duì)的數(shù)值，具體看實(shí)際情況的效果決定。

#01. 對(duì)象：深度 10px、音量 100%、其他參數(shù)不變

#02. 材質(zhì)：默認(rèn)、基本屬性-粗糙度 1、金屬質(zhì)感 0

#03. 光照：強(qiáng)度 120% 、旋轉(zhuǎn) 145° 、高度 45° 、軟化度 40%、 勾選環(huán)境光-強(qiáng)度 50%

最后點(diǎn)擊白色尖頭標(biāo)注的部分（渲染），不然最后出來(lái)的效果不自然（不理想）。

這是光照選項(xiàng)下的勾選環(huán)境光與不勾選產(chǎn)生不同的效果示意圖，可以看出區(qū)別還是蠻大的。

眼睛部分變成了透明， 這里粗糙度設(shè)置為 0，光照設(shè)置為標(biāo)準(zhǔn)強(qiáng)度 70%。

 

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

星星的參數(shù)設(shè)置如下。

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

這里做了另外一版的海報(bào)，功能和參數(shù)和案例中差不多，希望可以給大家一些啟發(fā)。

下圖是海報(bào)的最終呈現(xiàn)效果。

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

原先的凸出與斜角呈現(xiàn)的效果并不帶任何的質(zhì)感。

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

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

Aa. 鏟形圖案濾鏡：?jiǎn)」狻b. 渲染設(shè)置下的品質(zhì)：高。

 

下圖是鏟形圖案濾鏡三個(gè)不同的表現(xiàn)，案例中我選擇了#03 相對(duì)來(lái)說(shuō)會(huì)更好。大家也可以去玩一玩其他的材質(zhì)以及濾鏡。

接著進(jìn)行適當(dāng)?shù)呐虐妗?

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

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

最后做了簡(jiǎn)單的示意動(dòng)圖。

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

三個(gè)圖形的參數(shù)一樣，下圖給出了參數(shù)設(shè)置部分，僅供參考。

這里我并沒(méi)有點(diǎn)擊渲染設(shè)置，我們看下前后的對(duì)比。選擇前者不渲染，出來(lái)的效果比要渲染的更自然。

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

文章小提示：

01：手殘黨可以畫(huà)一些簡(jiǎn)單的圖形玩一玩（把控好構(gòu)圖啊，文字編排?。?/strong>