首頁(yè)

3個(gè)技巧瞬間提升logo設(shè)計(jì)的價(jià)值感

seo達(dá)人


一、設(shè)計(jì)一個(gè)開(kāi)放的圓

圓是最完美的圖形,所以把很多東西設(shè)計(jì)成圓形都會(huì)很好看,logo也一樣,但如果設(shè)計(jì)成一個(gè)封閉的圓,可能會(huì)給人不夠靈活、缺少變化的感覺(jué),所以,我們可以嘗試把logo設(shè)計(jì)成一個(gè)開(kāi)放的圓,即只要一個(gè)半封閉狀態(tài)的圓,或者是設(shè)計(jì)一個(gè)不完整的圓,比如下面這些案例:

圖片

▲ 由于這種logo屬于半封閉的圖形,所以也比較容易處理成正負(fù)圖形。

 

把logo設(shè)計(jì)成一個(gè)開(kāi)放的圓有以下幾個(gè)好處:

? 視覺(jué)平衡。因?yàn)閳A形本身是對(duì)稱圖形;

? 視覺(jué)聚焦。圓形會(huì)讓人的視覺(jué)往中心集中;

? 有設(shè)計(jì)感。因?yàn)橥ǔ0岩粋€(gè)圖形設(shè)計(jì)成圓形都需要簡(jiǎn)化和規(guī)范,這會(huì)增加圖形的設(shè)計(jì)感。

 

示例一

幾年前我接觸了一個(gè)品牌名稱首字母為“s”的電子公司,也用這種方式做了一個(gè)logo方案,字母S加上圓。在下面的兩種組合方式中,很明顯第二個(gè)更開(kāi)放、更有設(shè)計(jì)感一些。

圖片

但僅僅如此肯定還不行,一是這個(gè)S太普通,二是圖形沒(méi)有經(jīng)過(guò)規(guī)范,所以我在草圖上嘗試了幾個(gè)方向,最終選擇了下圖來(lái)執(zhí)行,簡(jiǎn)單、抽象,在感性的柔和中夾雜著一點(diǎn)理性的堅(jiān)硬。

圖片

對(duì)于這種簡(jiǎn)約風(fēng)的幾何圖形,通常都是通過(guò)采用圓形裁剪來(lái)制作,這樣會(huì)更快捷、也更嚴(yán)謹(jǐn),在草圖的基礎(chǔ)上通過(guò)多次調(diào)整,最終確定了如下圖的輔助線(如果你的草圖不是很規(guī)范,那么就不必太遵循草圖)。

圖片

通過(guò)這些輔助線我們就能得到中間這個(gè)比較規(guī)范的“S”圖形。

圖片

運(yùn)用AI中的路徑查找器中的工具,我們很快就能得到如下圖形,填上顏色這個(gè)開(kāi)放的圓形logo就做完了。

圖片

在最終的圖形中,我們除了能看到圓和S以外,我們甚至還能看到握手和循環(huán)圖形,這些對(duì)于企業(yè)來(lái)說(shuō)都是非常好的寓意,這也為我們寫(xiě)標(biāo)志說(shuō)明提供了一些不錯(cuò)的思路和依據(jù)。

 

 

二、塑造矛盾空間

矛盾空間是一種在三維世界中并不存在的二維圖像,矛盾空間的形成通常是利用視點(diǎn)的轉(zhuǎn)換和交替,在二維的平面上表現(xiàn)了三維的立體形態(tài),我們熟知的埃舍爾就是這個(gè)領(lǐng)域的藝術(shù)大師。

圖片

這種手法也常常被用在logo設(shè)計(jì)中。

圖片

 

使用塑造矛盾空間設(shè)計(jì)的logo具有以下幾個(gè)好處:

? 有趣。帶有視覺(jué)欺騙效果的logo會(huì)讓人忍不住想多看幾眼;

? 富有藝術(shù)效果和創(chuàng)意。設(shè)計(jì)這樣的logo需要一定的空間感和想象力;

? 具有良好的寓意。比如無(wú)限、無(wú)止盡、可持續(xù)等。

 

示例二

我的一個(gè)朋友開(kāi)了一家裝飾藝術(shù)品工作室,名字叫首工藝場(chǎng),英文名為:First Technical Field,于是委托我設(shè)計(jì)一個(gè)logo,他是這樣說(shuō)的:我沒(méi)什么要求,只要簡(jiǎn)單、大氣、好看、現(xiàn)代、獨(dú)特、富有藝術(shù)氣息就好了,真的,我沒(méi)什么要求?!?

 

這個(gè)logo其實(shí)并不好做,老實(shí)說(shuō),我當(dāng)時(shí)也沒(méi)啥思路,于是我用品牌英文名的首字母在畫(huà)紙上隨意搗鼓,天知道我畫(huà)了多少稿,終于我發(fā)現(xiàn)用兩個(gè)字母F左右對(duì)稱排列,中間形成的空間剛好可以加入字母T。

圖片

這個(gè)圖形讓我想到了曾經(jīng)看過(guò)的一件矛盾空間作品。

圖片

純二維的效果過(guò)于普通,我覺(jué)得可以嘗試在此基礎(chǔ)上加入矛盾空間效果,這樣會(huì)更符合設(shè)計(jì)需求,于是得到了下面這個(gè)圖形。

圖片

最后,在AI中用矩形工具進(jìn)行規(guī)范制圖,于是就得到了下面這個(gè)矛盾空間logo圖形,客戶表示非常滿意,畢竟他給的實(shí)在太少了。

圖片

 

 

三、立體漸變

即通過(guò)漸變色使圖形呈現(xiàn)出立體效果,這樣的logo也非常多,并且在前些年很流行。

圖片

雖然現(xiàn)在logo設(shè)計(jì)的大趨勢(shì)是扁平風(fēng),但是仍有不少設(shè)計(jì)師和客戶青睞這種立體漸變風(fēng),比如近兩年才面世的北京冬奧會(huì)logo、IE瀏覽器新logo等等。圖片

 

因?yàn)檫@種風(fēng)格的logo其優(yōu)勢(shì)也是顯而易見(jiàn)的,比如:

? 美觀。這類圖形既有細(xì)膩的顏色變化,又有層次感,很容易得到驚艷的視覺(jué)效果;

? 有很強(qiáng)的品質(zhì)感。這種圖形通常都需要倚仗曲線,再加之漸變色和立體效果,所以細(xì)節(jié)會(huì)比較豐富;

? 視覺(jué)沖擊力強(qiáng)。豐富的顏色變化和對(duì)比關(guān)系,可以大大加強(qiáng)圖形的視覺(jué)沖擊力。

 

示例三

第三個(gè)客戶是一家名叫東瑞的生物科技有限公司,主要是銷售酵素、膠原蛋白之類的產(chǎn)品,logo設(shè)計(jì)要求簡(jiǎn)單、時(shí)尚、能體現(xiàn)行業(yè)屬性。對(duì)于這張logo,比較穩(wěn)妥的做法還是運(yùn)用品牌名的首字母來(lái)做,由于沒(méi)有英文名,所以我選擇了品牌名拼音的首字母“D”和“R”來(lái)做創(chuàng)意組合。

圖片

由于字母D是一個(gè)完全封閉的圖形,所以我想到了用正負(fù)形的方式來(lái)設(shè)計(jì),即把字母R作為D的負(fù)形,行得通嗎?應(yīng)該是可以的,因?yàn)榇髮?xiě)的字母R可以簡(jiǎn)化成下圖效果,與字母D一結(jié)合就能得到我們想要的效果。

圖片

組合的方式有兩種,我個(gè)人更喜歡開(kāi)放的圖形,并且我覺(jué)得第一種組合方式很普通,造型不是很好看,所以我選擇了第二種方向?,F(xiàn)在我們開(kāi)始正式制圖。

第一步:在AI中用矩形工具畫(huà)一個(gè)正方形,然后用直接選取工具把右邊的兩個(gè)直角拉成圓角,拉到最大。

圖片

第二步:把描邊加粗到一個(gè)比較合適的效果,主要考慮字母D的負(fù)形大小與描邊粗細(xì)的比例,是否符合字母R的特點(diǎn),確定描邊粗細(xì)以后,將路徑擴(kuò)展外觀,使其變成一個(gè)輪廓圖形,然后把左邊的直角也拉成小圓角。柔和一點(diǎn)更符合企業(yè)的調(diào)性。

圖片

第三部:畫(huà)一個(gè)直角梯形對(duì)字母D進(jìn)行裁剪,梯形的寬度和傾斜角度是關(guān)鍵,盡量保證R的識(shí)別性和圖形的美觀性,裁剪完以后得到如下效果。

圖片

第四步:把圖形的部分轉(zhuǎn)角處也拉成圓角,然后給其填充一個(gè)藍(lán)色,到這里基本的造型就做好了。

圖片

但是這樣的效果還是有點(diǎn)過(guò)于普通,也體現(xiàn)不出行業(yè)特性,于是我想到了添加立體漸變效果。

第五步:在現(xiàn)有的圖形基礎(chǔ)上畫(huà)如下兩個(gè)圓,我們的目的是要用下圖中兩條黑色的路徑對(duì)圖形進(jìn)行裁剪,而這兩條路徑一定要很自然地融入圖形中,所以,畫(huà)圓要很講究,依據(jù)是找到圓與圖形的切點(diǎn)和交叉點(diǎn),如右圖中的四個(gè)點(diǎn)。

圖片

第六步:在上圖基礎(chǔ)上用路徑查找器里面的工具對(duì)進(jìn)行裁剪、合并等操作得到如下圖形,原來(lái)的圖形被弧線切割成了三部分。

圖片

第七步:給圖形的三個(gè)部分分別填上由淺到深的漸變色,使其呈現(xiàn)出立體效果,考慮到企業(yè)的行業(yè)屬性,我使用了藍(lán)色到青色、綠色到黃色、黃色到橙色三個(gè)漸變色,最終效果還可以。

圖片

logo圖形設(shè)計(jì)方案合集:

圖片

 

 

圖片

logo設(shè)計(jì)得太常規(guī)容易被客戶說(shuō)沒(méi)有品質(zhì)感、體現(xiàn)不出企業(yè)或品牌的價(jià)值感,所以合理地使用一些技巧是有必要的,這會(huì)客戶會(huì)覺(jué)得你的logo設(shè)計(jì)還是花了一些心思的,看起來(lái)比較專業(yè),所謂得套路者得人心,希望這篇文章對(duì)你有幫助。


作者:蔥爺

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》3個(gè)技巧瞬間提升logo設(shè)計(jì)的價(jià)值感

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)sillybuy.com )是一家專注而深入的界面設(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ì)公司



大廠搜索哪家強(qiáng)?這些交互設(shè)計(jì)值得你收藏學(xué)習(xí)!

博博

大體上分為兩類:彩蛋流和體驗(yàn)流

搜索的本質(zhì)是什么?無(wú)疑是內(nèi)容的召回和信息的推薦。

可隨著時(shí)代的發(fā)展和行業(yè)公司的內(nèi)卷,不少公司除了持續(xù)優(yōu)化搜索結(jié)果與推薦外,在搜索的體驗(yàn)和彩蛋上也是下了不少功夫,從而進(jìn)一步加強(qiáng)自有產(chǎn)品的競(jìng)爭(zhēng)力與用戶黏性。因此今天就來(lái)盤點(diǎn)一些,那有意思的大廠搜索交互。

大體上分為兩類:彩蛋流和體驗(yàn)流

A.彩蛋流

注重提升搜索過(guò)程中的趣味程度,以增加用戶的好感度與產(chǎn)品印象/口碑。行業(yè)代表:谷歌瀏覽器、百度瀏覽器

1.谷歌瀏覽器

可以說(shuō)是搜索彩蛋的先行者,內(nèi)置了很多搜索關(guān)鍵詞的有趣彩蛋,如娛樂(lè)角色:搜索【滅霸】,頁(yè)面右邊會(huì)打響指,相關(guān)字段會(huì)被’毀滅‘掉



搜索【馬里奧兄弟】,右邊也有游戲里一樣的點(diǎn)擊彩蛋



還有各種有意思的搜索結(jié)果比如搜:is google down(谷歌關(guān)閉了嗎),搜索結(jié)果優(yōu)先顯示:NO



再如搜索《銀河系漫游指南》的一句話:the answer to life, the universe, and everything。此時(shí)搜索結(jié)果頁(yè)會(huì)自動(dòng)計(jì)算成42。貌似也只有讀過(guò)《銀河系漫游指南》的人才能明白其中的奧秘。聽(tīng)說(shuō)是生命、宇宙與萬(wàn)事萬(wàn)物的終極解答。



而且在日常的節(jié)日、活動(dòng)、熱點(diǎn)運(yùn)營(yíng)上,谷歌也從不缺席。都會(huì)在搜索框上用【插畫(huà)、動(dòng)效】等形式承載各種活動(dòng)入口、吸引用戶參與,可以已經(jīng)形成一個(gè)穩(wěn)定、具有品牌感的企業(yè)文化了。

如各種復(fù)活節(jié)、開(kāi)學(xué)季、母親節(jié)動(dòng)效。而且更多有趣、創(chuàng)意的設(shè)計(jì)案例,可上:有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。



2.百度瀏覽器

百度在搜索彩蛋里下的的功夫也不少,最著名的應(yīng)該是搜索【黑洞】時(shí),頁(yè)面上會(huì)出現(xiàn)黑洞的吸入特效。



而且和谷歌相同,在其他的搜索關(guān)鍵詞上,百度也是埋下了不少彩蛋,比如:搜索【翻轉(zhuǎn)】,頁(yè)面會(huì)左右翻過(guò)來(lái)



搜索【跳躍】,頁(yè)面會(huì)在上下跳動(dòng)



搜索【失重】,頁(yè)面上的字會(huì)飄起來(lái)?



而在【活動(dòng)運(yùn)營(yíng)】上,百度也是很有心地進(jìn)行著創(chuàng)新設(shè)計(jì),力求給用戶一種眼前一亮的感覺(jué)。比如每年的愚人節(jié),搜索結(jié)果頁(yè)上都有‘調(diào)戲’用戶的創(chuàng)意設(shè)計(jì),各種輕松調(diào)皮的畫(huà)風(fēng) 給不少用戶帶來(lái)了新鮮感和趣味性。





還有在【活動(dòng)入口】的設(shè)計(jì)上也是特別有想法:在某年的圣誕節(jié)上,百度創(chuàng)新性地將活動(dòng)入口’嵌套‘在結(jié)果頁(yè)卡片中間,用活動(dòng)里的ip形象-雪人「抬著」結(jié)果頁(yè)卡片和在上面「滾動(dòng)」





用這種充滿創(chuàng)意+應(yīng)景的的入口設(shè)計(jì)與引導(dǎo)方式,最大限度地降低漏斗,吸引讓更多用戶參與該活動(dòng)。另外,百度搜索框上面的運(yùn)營(yíng)活動(dòng)入口,也和谷歌有異曲同工之妙。



而且更多有趣、創(chuàng)意的設(shè)計(jì)案例,可上:有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。

B.體驗(yàn)流

注重提升搜索過(guò)程中的交互體驗(yàn),以增加用戶的操作效率與產(chǎn)品易用性。

代表:蘋果產(chǎn)品、夸克瀏覽器

1.Apple/蘋果產(chǎn)品

·iPhone

iPhone的【桌面搜索】除了能查詢手機(jī)上的各種信息、文件,它還自帶了【匯率轉(zhuǎn)換和計(jì)算器】。在搜索框輸入【數(shù)學(xué)公式、匯率轉(zhuǎn)換】時(shí)會(huì)自動(dòng)計(jì)算對(duì)應(yīng)的結(jié)果。無(wú)需用戶額外打開(kāi)計(jì)算器、瀏覽器,大大減少操作鏈路。



在iOS的原生鍵盤里,可以根據(jù)輸入詞檢測(cè)+搜索對(duì)應(yīng)的手機(jī)號(hào)碼:當(dāng)你輸入 【打+我或通訊錄好友+電話】時(shí),鍵盤上會(huì)自動(dòng)顯示自己或好友的電話號(hào)碼,點(diǎn)擊號(hào)碼就能自動(dòng)粘貼在輸入框中。



用戶無(wú)需前往通訊錄就能輕松「獲知+想起」誰(shuí)誰(shuí)的電話號(hào)碼,大大提升操作體驗(yàn)與效率

·Mac

在Mac電腦的工具欄上搜索相關(guān)幫助時(shí),系統(tǒng)會(huì)直接把該結(jié)果所對(duì)應(yīng)的頁(yè)面位置調(diào)取出來(lái)并懸浮展示。用戶可以直觀地該結(jié)果在哪里,并減少尋找的操作路徑,免去多余操作



在Mac電腦的‘系統(tǒng)偏好設(shè)置’里搜索幫助,在結(jié)果列表上會(huì)以聚光燈的形式展示各個(gè)結(jié)果入口。選擇具體某個(gè)結(jié)果時(shí),該入口的聚光燈會(huì)更清晰些,特別容易找到搜索結(jié)果。



2.夸克瀏覽器

夸克瀏覽器除了傳統(tǒng)的「點(diǎn)擊搜索框」喚出輸入欄外,在屏幕任意位置下滑手勢(shì)同樣可以喚出搜索框。



降低「需要往上手指移動(dòng),才能點(diǎn)擊搜索框」的操作成本,讓用戶更快、更精準(zhǔn)地觸達(dá)搜索。

而且在輸入網(wǎng)址或英文等字段時(shí),搜索框下方會(huì)出現(xiàn)一個(gè)滑塊區(qū)。點(diǎn)擊就會(huì)變成長(zhǎng)條的滑塊,拖拽滑塊即可改變光標(biāo)位置。



而且更多有趣、創(chuàng)意的設(shè)計(jì)案例,可上:有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。

讓用戶更方便地將光標(biāo)快速移動(dòng)到想要的位置中,以便更快地搜索信息,大大降低操作成本。而且夸克還會(huì)前置搜索結(jié)果, 比如在搜索框中輸入“某城市+天氣”的關(guān)鍵詞,上方就會(huì)以卡片的形式顯示該地區(qū)最近一周的天氣。

用戶無(wú)需觸發(fā)搜索、進(jìn)入結(jié)果頁(yè)才能看到想要查詢的信息。



– END



作者:和出此嚴(yán)      來(lái)源:站酷

藍(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)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(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ì)sillybuy.com )是一家專注而深入的界面設(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ì)公司 

獵聘 | 聊一聊IM改版4.0那些事~

博博

通過(guò)Q3不斷的努力,終于把IM4.0的這個(gè)硬骨頭成功拿下,下面就復(fù)盤下這次IM4.0的設(shè)計(jì)過(guò)程吧~


作者:不是作家      來(lái)源:站酷

藍(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)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(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ì)sillybuy.com )是一家專注而深入的界面設(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ì)公司 

Web端工具如何設(shè)計(jì)「保存」

博博

前言

數(shù)據(jù)保存是Web端工具的基礎(chǔ)功能,一般在產(chǎn)品和技術(shù)框架設(shè)計(jì)之初就已經(jīng)確定了數(shù)據(jù)保存的方式,后續(xù)不太會(huì)頻繁更改。

正因?yàn)槿绱?,在日常需求迭代中,設(shè)計(jì)師很容易忽略數(shù)據(jù)保存的過(guò)程,也很少質(zhì)疑當(dāng)前的保存機(jī)制是否合理,但是當(dāng)需要設(shè)計(jì)新模塊或產(chǎn)品時(shí)就會(huì)對(duì)保存有疑惑。

此外,保存也是一個(gè)受技術(shù)限制較大的領(lǐng)域,設(shè)計(jì)師需要對(duì)保存的技術(shù)類型有基礎(chǔ)認(rèn)知,因?yàn)樗鼤?huì)影響保存生效的邏輯和交互形式。

本文將會(huì)基于個(gè)人經(jīng)驗(yàn),從設(shè)計(jì)表現(xiàn)和技術(shù)實(shí)現(xiàn)的角度聊聊Web端工具的數(shù)據(jù)保存。

「Chapter One」保存的對(duì)象

對(duì)于Web端工具產(chǎn)品來(lái)說(shuō),保存的對(duì)象可分為「文件數(shù)據(jù)」、「設(shè)置數(shù)據(jù)」、「用戶行為數(shù)據(jù)」。

1.1 文件數(shù)據(jù)

「文件數(shù)據(jù)」是相互獨(dú)立的內(nèi)容,比如酷家樂(lè)的一個(gè)方案、Figma的一個(gè)文檔都是文件數(shù)據(jù),在文件A中觸發(fā)保存并不會(huì)影響到文件B。文件數(shù)據(jù)是最主要的用戶資產(chǎn),若丟失會(huì)給用戶造成很大的損失。

1.2 設(shè)置數(shù)據(jù)

「設(shè)置數(shù)據(jù)」分不同的維度,主要有用戶級(jí)別、組織級(jí)別、設(shè)備級(jí)別這三種。

用戶級(jí)別:數(shù)據(jù)保存在當(dāng)前用戶的賬號(hào)下,同一個(gè)用戶的所有文檔都會(huì)應(yīng)用該設(shè)置,比如酷家樂(lè)云設(shè)計(jì)工具的偏好設(shè)置。

組織級(jí)別:數(shù)據(jù)保存在組織級(jí)別,可能由組織管理員設(shè)置,同一個(gè)組織下的所有用戶都應(yīng)用該數(shù)據(jù)。

設(shè)備級(jí)別:數(shù)據(jù)保存在設(shè)備(瀏覽器)上,同一個(gè)設(shè)備上的不同賬號(hào)、不同文檔都會(huì)應(yīng)用此數(shù)據(jù)。區(qū)別用戶級(jí)別和設(shè)備級(jí)別的保存很簡(jiǎn)單,只要清空瀏覽器緩存,看看數(shù)據(jù)是否變化即可。

一般來(lái)說(shuō),「設(shè)置數(shù)據(jù)」也是用戶資產(chǎn)。但是設(shè)備級(jí)別的數(shù)據(jù)存在丟失的可能性,一般情況下不會(huì)存儲(chǔ)大量重要的數(shù)據(jù)。

1.3 用戶行為數(shù)據(jù)

技術(shù)上經(jīng)常把「用戶是否進(jìn)行過(guò)xx行為」這樣數(shù)據(jù)保存在用戶級(jí)別或設(shè)備級(jí)別,用于差異化的引導(dǎo)、運(yùn)營(yíng)方案。這類數(shù)據(jù)雖然不能被視為用戶資產(chǎn),但對(duì)于產(chǎn)品設(shè)計(jì)來(lái)說(shuō)至關(guān)重要。

<h2 data-darkmode-bgcolor-16666872301626="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16666872301626="#fff|rgb(255, 255, 255)" data-darkmode-color-16666872301626="rgb(136, 166, 217)" data-darkmode-original-color-16666872301626="#fff|rgb(23, 43, 77)" data-style="margin: 8px 8px 16px; font-size: 20px; white-space: normal; line-height: 1.5; letter-spacing: -0.008em; color: rgb(23, 43, 77); border-bottom-color: rgb(255, 255, 255); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" background-color:="" rgb(255,="" 255,="" 255);"="" class="js_darkmode__19" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; font-size: var(--article-h2-size); line-height: 1.8; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; text-indent: 2em;">

「Chapter Two」保存的位置

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據(jù)數(shù)據(jù)保存的位置,可以分為兩類:后端保存和前端保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.1 后端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">后端保存是最常見(jiàn)的保存方式,觸發(fā)保存后,將方案數(shù)據(jù)上傳并存儲(chǔ)在服務(wù)器(云端),需要聯(lián)網(wǎng)。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性:</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.依賴網(wǎng)絡(luò);</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.數(shù)據(jù)量大時(shí)會(huì)耗性能,可能會(huì)阻塞操作</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.2 前端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">前端保存是指以緩存 (cache) 的方式將數(shù)據(jù)保存在瀏覽器中,一般采用的技術(shù)方案是 indexDB(如Figma)。即使將瀏覽器關(guān)閉,下次打開(kāi)時(shí)仍能夠恢復(fù)數(shù)據(jù)。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性:</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.有大小限制(幾百兆);</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.必須要同設(shè)備,且不能清除緩存;</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.有時(shí)間上限(大部分瀏覽器最多可以保存 30 天)</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">還有一種前端的臨時(shí)保存,即會(huì)話保存(sessionStorage),通常為了方便單次會(huì)話而設(shè)置,例如記住選項(xiàng)狀態(tài)、輸入框的內(nèi)容等,但只要關(guān)閉或刷新標(biāo)簽頁(yè)這些數(shù)據(jù)就會(huì)被清除。從嚴(yán)格意義上來(lái)說(shuō),會(huì)話保存不是真正的保存,本文不對(duì)此展開(kāi)討論。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">Web端工具一般會(huì)以后端保存為主,前端保存為輔,這樣能夠最大程度避免因網(wǎng)絡(luò)或服務(wù)不穩(wěn)定造成的數(shù)據(jù)丟失。</span></span>
</p>




<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Three」保存的觸發(fā)機(jī)制
</h1>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">從保存的觸發(fā)維度,可以將保存行為分為自動(dòng)保存、手動(dòng)保存、提示保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.1 自動(dòng)保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據(jù)保存的觸發(fā)條件,可將自動(dòng)保存分為以下3種:</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a. 定時(shí)觸發(fā)保存以一定的時(shí)間間隔(通常采用幾分鐘 ~ 1 小時(shí))周期性地自動(dòng)觸發(fā)保存。這是酷家樂(lè)云設(shè)計(jì)工具目前采用的保存方式。這種自動(dòng)保存能減少因軟件崩潰、斷電等特殊原因造成的數(shù)據(jù)丟失的影響,但仍無(wú)法避免數(shù)據(jù)丟失,需要手動(dòng)保存作為輔助。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 條件觸發(fā)保存特定的用戶行為會(huì)觸發(fā)方案自動(dòng)保存。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">具體哪些行為需要觸發(fā)保存,則要結(jié)合業(yè)務(wù)邏輯和技術(shù)實(shí)現(xiàn)來(lái)共同確定。要注意的是,這類保存通常因技術(shù)原因而采用,用戶對(duì)其沒(méi)有預(yù)期,盡量不要讓它打斷或干擾用戶的操作。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 實(shí)時(shí)保存只要數(shù)據(jù)發(fā)生改變,立即觸發(fā)自動(dòng)保存,無(wú)需用戶手動(dòng)保存(盡管一些產(chǎn)品考慮到用戶習(xí)慣,仍會(huì)保留手動(dòng)保存的交互)。部分產(chǎn)品會(huì)用間隔幾秒鐘的自動(dòng)保存(如 Microsoft 365),效果基本等同于實(shí)時(shí)保存。實(shí)時(shí)保存能最大程度避免數(shù)據(jù)丟失,是Web端工具理想的保存觸發(fā)方式。但因?yàn)榧夹g(shù)原因,并非所有工具都能夠做到實(shí)時(shí)保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.2 手動(dòng)保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">手動(dòng)保存指用戶通過(guò)額外的操作觸發(fā)保存,通常為點(diǎn)擊「保存」按鈕或快捷鍵。部分有實(shí)時(shí)保存機(jī)制的工具不需要額外的手動(dòng)保存(如Figma),但對(duì)于沒(méi)有實(shí)時(shí)保存的工具來(lái)說(shuō),手動(dòng)保存的設(shè)計(jì)至關(guān)重要。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.3 提示保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">即便有手動(dòng)保存,用戶還是可能忘記保存。當(dāng)用戶離開(kāi)工具或某個(gè)環(huán)境時(shí),若程序監(jiān)測(cè)到有未保存的內(nèi)容會(huì)丟失,則將此風(fēng)險(xiǎn)暴露給用戶,用戶可以選擇保存或者直接離開(kāi)。如果用戶通過(guò)直接關(guān)閉瀏覽器/標(biāo)簽頁(yè)的方式離開(kāi),也可以在瀏覽器上設(shè)置類似的兜底提示對(duì)話框,但是對(duì)話框上的文案無(wú)法定制。</span></span>
</p>



那如何選擇保存的觸發(fā)機(jī)制?

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.「實(shí)時(shí)保存」保障性最好,在技術(shù)允許時(shí)推薦采用;</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 因技術(shù)原因無(wú)法采用「實(shí)時(shí)保存」時(shí),推薦使用「定時(shí)觸發(fā)保存」 + 「手動(dòng)保存」共同作用,也能較好地保障數(shù)據(jù);</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 「條件觸發(fā)保存」通常是因技術(shù)原因而采用,用戶對(duì)其沒(méi)有預(yù)期,盡量不要讓它打斷或干擾用戶的操作;</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">d. 在數(shù)據(jù)有丟失風(fēng)險(xiǎn)的時(shí)候需要提示用戶保存,可根據(jù)用戶的操作路徑選用工具自身的提示或?yàn)g覽器的提示。</span></span>
</p>
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Four」保存的觸發(fā)設(shè)計(jì)<br style="margin:0px;padding:0px;outline:none;box-sizing:inherit;" />
</h1>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">4.1 觸發(fā)原則</span></span>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">在開(kāi)始聊具體的設(shè)計(jì)之前,先提出保存的 2 點(diǎn)設(shè)計(jì)原則:</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">防錯(cuò)</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存是對(duì)方案數(shù)據(jù)的 最重要的 保障機(jī)制。穩(wěn)定的系統(tǒng)需要有可靠的保存機(jī)制,盡量避免各種原因造成的方案數(shù)據(jù)丟失。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">狀態(tài)可見(jiàn)</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存的反饋需及時(shí)有效,讓用戶知道當(dāng)前方案的存儲(chǔ)狀態(tài),如果有異常也需要第一時(shí)間告知,并給出可行的解決方案。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">引用《<em style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">微交互</em>》一書(shū)中提到的“觸發(fā)器”概念,可以將保存作為一個(gè)觸發(fā)器。觸發(fā)器是啟動(dòng)一系列動(dòng)作的原點(diǎn),分為系統(tǒng)觸發(fā)器(系統(tǒng)被動(dòng)觸發(fā))和手動(dòng)觸發(fā)器(用戶主動(dòng)觸發(fā))。</span></span>
</p>
<h4 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--detail-content-size);position:relative;line-height:1.8;word-wrap:break-word;caret-color:#222222;color:#222222;font-family:&quot;">
</h4>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.2 系統(tǒng)觸發(fā)器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對(duì)系統(tǒng)觸發(fā)保存來(lái)說(shuō),主要需確定2個(gè)點(diǎn),何時(shí)觸發(fā)、觸發(fā)頻率。對(duì)Web端工具來(lái)說(shuō),有3種主要的觸發(fā)模式:</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.定時(shí)觸發(fā)</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">一個(gè)獨(dú)立工具一般只有一個(gè)保存觸發(fā)間隔設(shè)置,其間隔范圍很廣,可以是幾秒鐘、幾分鐘,甚至一個(gè)小時(shí)。一般會(huì)暴露給用戶設(shè)置。建議產(chǎn)品設(shè)計(jì)師根據(jù)技術(shù)現(xiàn)狀設(shè)定合理的時(shí)間,如果保存對(duì)性能有較大消耗,過(guò)于頻繁的保存也會(huì)影響用戶體驗(yàn)??赏ㄟ^(guò)選擇器給用戶幾個(gè)合適的選項(xiàng),選項(xiàng)之間的時(shí)間間隔依次變大,總選項(xiàng)數(shù)不超過(guò) 5 個(gè)。</span></span>
</p>



某設(shè)計(jì)工具偏好設(shè)置中的保存時(shí)間設(shè)置

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b.條件觸發(fā)</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">特定的用戶行為也可觸發(fā)自動(dòng)保存,如酷家樂(lè)云設(shè)計(jì)工具環(huán)境切換、新建樓層,水電工具的智能設(shè)計(jì)等,都會(huì)觸發(fā)方案保存。以下是一些常見(jiàn)的「條件觸發(fā)保存」時(shí)機(jī),這些時(shí)機(jī)是由技術(shù)能力、業(yè)務(wù)要求共同決定的。設(shè)計(jì)師需要考慮如果這些時(shí)機(jī)觸發(fā)了自動(dòng)保存,對(duì)用戶的操作會(huì)用什么影響。</span></span>
</p>



c.實(shí)時(shí)觸發(fā)

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">現(xiàn)在已經(jīng)有很多在線工具(如 Figma)實(shí)現(xiàn)了實(shí)時(shí)觸發(fā)保存,對(duì)用戶來(lái)說(shuō)可以不用再理解保存這個(gè)概念,是一種認(rèn)知上的減負(fù),并且這種方式對(duì)數(shù)據(jù)保障的效果也最好。但是,仍然有設(shè)計(jì)師提出這種體驗(yàn)上的風(fēng)險(xiǎn),比如沒(méi)有容錯(cuò)余地、頻繁保存造成的干擾和系統(tǒng)壓力。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.3 手動(dòng)觸發(fā)器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對(duì)保存來(lái)說(shuō),「手動(dòng)觸發(fā)器」一般來(lái)說(shuō)是一個(gè)保存按鈕。在沒(méi)有實(shí)時(shí)保存的創(chuàng)作類工具中,手動(dòng)保存按鈕的設(shè)計(jì)至關(guān)重要,一般會(huì)放在界面上方較顯眼的位置,并設(shè)置快捷鍵 (Ctrl+S),方便用戶操作。</span></span>
</p>



酷家樂(lè)云設(shè)計(jì)工具的保存位于頂部欄第一個(gè)分區(qū)

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">而對(duì)于管理類工具,保存按鈕一般位于頁(yè)面下方,因?yàn)橛脩粢话銖捻?yè)面上到下確認(rèn)完內(nèi)容后再進(jìn)行保存。</span></span></span>
</p>



酷家樂(lè)賬號(hào)設(shè)置頁(yè)面

<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Five」保存的反饋設(shè)計(jì)
</h1>

<h3 data-darkmode-bgcolor-16666872301626="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16666872301626="#fff|rgb(255, 255, 255)" data-darkmode-color-16666872301626="rgb(136, 166, 217)" data-darkmode-original-color-16666872301626="#fff|rgb(23, 43, 77)" data-style="margin-top: 10px; font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin-left:="" 8px;="" margin-right:="" 8px;"="" class="js_darkmode__98" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; font-size: var(--article-h3-size); line-height: 1.8; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; text-indent: 2em;">

5.1 成功反饋

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">a.自動(dòng)保存的反饋對(duì)于自動(dòng)保存,當(dāng)保存結(jié)果無(wú)異常時(shí),盡量減少對(duì)用戶的干擾,盡量不使用全局提示 (Toast) 反饋。比較場(chǎng)景的做法是在工具某個(gè)固定位置,用圖標(biāo)或文字的狀態(tài)變化作為反饋。</span></span>
    </p>



當(dāng)某些條件觸發(fā)保存時(shí),甚至不需要讓用戶感受到保存的發(fā)生,因?yàn)橛脩魧?duì)保存是沒(méi)有預(yù)期的,建議將保存的過(guò)程與其他過(guò)程合并。

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">比如說(shuō)從云設(shè)計(jì)工具進(jìn)入施工圖時(shí),因?yàn)榧夹g(shù)原因需要保存方案,但可以將保存方案的進(jìn)程與施工圖加載的進(jìn)程合并。</span></span>
    </p>



b.手動(dòng)保存的反饋對(duì)于手動(dòng)保存,當(dāng)保存結(jié)果無(wú)異常時(shí),可使用全局提示(Toast)告知保存進(jìn)度和保存結(jié)果,也可以用「保存」按鈕的狀態(tài)變化作為反饋。

    <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
        <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">5.2 異常反饋</span></span></strong>
    </h2>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當(dāng)保存有異常時(shí),應(yīng)即時(shí)給予且較明顯的異常反饋,并幫助用戶排查問(wèn)題。在設(shè)計(jì)保存異常反饋時(shí),需注意以下 3 點(diǎn):</span></span>
    </p>
    <ul style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-position:initial;list-style-image:initial;caret-color:#222222;color:#222222;font-family:&quot;font-size:14px;">
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">哪些數(shù)據(jù)保存異常,是全局?jǐn)?shù)據(jù)還是個(gè)別模塊的數(shù)據(jù),是否會(huì)因?yàn)榉呛诵哪K的保存異常而影響到整體用戶進(jìn)程,是否可以通過(guò)其他方式(如前端保存)讓用戶繼續(xù)操作</span></span>
        </li>
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">保存異常的原因是什么,用戶可以通過(guò)何種操作解決問(wèn)題(檢查網(wǎng)絡(luò)?重新登錄?)</span></span>
        </li>
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當(dāng)從異?;謴?fù)后,應(yīng)該如何提示用戶</span></span>
        </li>
    </ul>



圖片a



圖片b



圖片c

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        圖片
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        Figma與保存異常相關(guān)的反饋 a.保存異常反饋;b.異常原因與解決方法;c.異?;謴?fù)提示
    </p>
    <h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
        總結(jié)
    </h1>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">最后總結(jié)一下,當(dāng)我們接手一個(gè)新產(chǎn)品、新模塊、新需求的設(shè)計(jì)時(shí),應(yīng)該如</span>何<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">設(shè)計(jì)保存:</span></span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">首先,確定保存對(duì)象,是文件數(shù)據(jù)、設(shè)置數(shù)據(jù),還是用戶行為數(shù)據(jù)。一個(gè)完整的產(chǎn)品一般都會(huì)包含以上三者,但對(duì)于某個(gè)具體的需求,可能只涉及其中一兩種。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">列出保存對(duì)象后,可以與產(chǎn)品、技術(shù)等團(tuán)隊(duì)成員一起確定保存的位置(云端、瀏覽器)和保存的觸發(fā)機(jī)制(自動(dòng)保存、手動(dòng)保存、提示保存)。建議根據(jù)用戶流程在不同的觸點(diǎn)用不同的觸發(fā)機(jī)制,以最大程度保障數(shù)據(jù)安全。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">接下來(lái),根據(jù)保存對(duì)象、保存觸發(fā)機(jī)制,設(shè)計(jì)保存的交互,包含保存的觸發(fā)、保存的規(guī)則和保存的反饋。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">最后,以用戶使用工具的流程再檢查一遍數(shù)據(jù)的產(chǎn)生和存儲(chǔ),是否會(huì)有遺漏,設(shè)計(jì)保存兜底。</span></span>
    </p>







作者:酷家樂(lè)UED      來(lái)源:站酷



藍(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)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(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ì)sillybuy.com )是一家專注而深入的界面設(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ì)公司 

十大心理學(xué)原理在產(chǎn)品設(shè)計(jì)中的應(yīng)用

博博

對(duì)于產(chǎn)品經(jīng)理、設(shè)計(jì)師和運(yùn)營(yíng)人員,心理學(xué)都是必須要補(bǔ)的一門課程。

可能很多同學(xué)都犯過(guò)和小摹相同的錯(cuò)誤——在各種商城放“神券”的時(shí)候屯一大堆專業(yè)書(shū)籍。實(shí)際上,心理學(xué)的書(shū)籍你大概只要看到第三本,就會(huì)發(fā)現(xiàn)翻來(lái)覆去講的就是那么幾個(gè)淺顯易懂的道理,而且大部分都是你在日常生活中就能觀察和感受到的。

基礎(chǔ)心理學(xué)(消費(fèi)者心理學(xué),社會(huì)心理學(xué),傳播和行為心理學(xué)等)的概念都不難,但如何精妙地運(yùn)用在自己的專業(yè)上則非??简?yàn)使用者的功力。

為什么產(chǎn)品、設(shè)計(jì)、運(yùn)營(yíng)都需要學(xué)習(xí)心理學(xué)?

因?yàn)樗麄児ぷ鞯谋举|(zhì)都是和“人”打交道——用產(chǎn)品方案、視覺(jué)內(nèi)容和活動(dòng)規(guī)劃來(lái)影響用戶的決策、行為和心理。

你可能會(huì)覺(jué)得“依靠數(shù)據(jù)來(lái)統(tǒng)計(jì)用戶的行為再針對(duì)性決策”會(huì)更客觀,但實(shí)際上想得到靠譜的數(shù)據(jù)和正確的結(jié)論一點(diǎn)也不輕松,甚至很多公司根本不具備開(kāi)展這類型調(diào)研的條件。

在這種情況下唯一的辦法還是洞察用戶并主動(dòng)決策,此時(shí)基礎(chǔ)心理學(xué)原理就是你進(jìn)行判斷的重要依據(jù)。

本文為大家梳理了十大著名的心理學(xué)原理,這些概念來(lái)自于多本心理學(xué)的經(jīng)典名著,小摹進(jìn)行了適當(dāng)整合。

一、懷舊思維

簡(jiǎn)單來(lái)說(shuō),就是人們?cè)诮^大部分時(shí)候都會(huì)遵循歷史慣性,更愿意相信過(guò)去的結(jié)論。

這也解釋了為什么現(xiàn)代商業(yè)中,品牌一直是一項(xiàng)核心競(jìng)爭(zhēng)力:如果一個(gè)品牌曾經(jīng)贏得了消費(fèi)者的信任,那么消費(fèi)者往往愿意持續(xù)選擇這個(gè)品牌的產(chǎn)品。

在產(chǎn)品設(shè)計(jì)中,懷舊思維有著極其豐富的應(yīng)用場(chǎng)景。比如軟件產(chǎn)品的交互對(duì)于操作上的創(chuàng)新要非常慎重——快捷鍵、交互邏輯、界面布局等盡量和行業(yè)中主流產(chǎn)品一致,會(huì)更容易讓新用戶接受。

比如我們的原型設(shè)計(jì)工具“摹客RP”,界面布局借鑒了國(guó)外的UI工具Figma和Sketch。雖然產(chǎn)品主打的方向并不相同,但遵循業(yè)界已經(jīng)約定俗成的定式設(shè)計(jì),在新用戶上手的角度有很大的優(yōu)勢(shì)。

二、暈輪效應(yīng)

暈輪效應(yīng)原指人際交往中,人身上表現(xiàn)出的某一方面的特征,掩蓋了其他特征,從而造成人際認(rèn)知的障礙。

比如有的老年人對(duì)青年人的個(gè)別缺點(diǎn),或衣著打扮、生活習(xí)慣看不順眼,就認(rèn)為他們一定沒(méi)出息;有的青年人由于傾慕朋友的某一可愛(ài)之處,就會(huì)把他看得處處可愛(ài),真所謂"一俊遮百丑"。

暈輪效應(yīng)是一種以偏概全的主觀心理臆測(cè),和上面的懷舊思維類似,屬于一種思維的定式,因?yàn)檫@種方式大腦在決策時(shí)會(huì)更輕松。

對(duì)于產(chǎn)品規(guī)劃者,尤其要想清楚自己的核心優(yōu)勢(shì)和賣點(diǎn)是什么,不必完美主義地去追求面面俱到,因?yàn)槿绻钔怀龅膬?yōu)點(diǎn)能打動(dòng)用戶,即使有缺點(diǎn)也很容易被用戶忽略。

三、習(xí)得性無(wú)助

簡(jiǎn)單地說(shuō),如果用戶在過(guò)程中產(chǎn)生了“無(wú)論如何都無(wú)法改變現(xiàn)狀”的感受,容易陷入深深的絕望和悲哀。

在實(shí)驗(yàn)中,經(jīng)過(guò)訓(xùn)練的狗本可以逃避實(shí)驗(yàn)者加于它的電擊。但是,如果狗以前受到過(guò)不可預(yù)期(不知道什么時(shí)候到來(lái))且不可控制的電擊(如電擊的中斷與否不依賴于狗的行為),他們就會(huì)徹底躺平并不再逃離。

狗之所以表現(xiàn)出這種狀況,是由于在實(shí)驗(yàn)的早期學(xué)到了一種無(wú)助感。

也就是說(shuō),它認(rèn)識(shí)到自己無(wú)論做什么都不能控制電擊的終止。

人如果產(chǎn)生了習(xí)得性無(wú)助,將很快拋棄當(dāng)前讓他產(chǎn)生失望感的產(chǎn)品。這個(gè)原理解釋了為什么現(xiàn)在商品或者服務(wù)往往都要為用戶提供非常順暢的溝通方式(比如熱線電話)。

如果你比較了解國(guó)外在線軟件行業(yè)趨勢(shì),就會(huì)發(fā)現(xiàn)很多的新興產(chǎn)品都已經(jīng)不滿足于提供官方的Email地址,而是直接提供Discord鏈接(可以理解為在線聊天室)。

及時(shí)的直接溝通可以避免用戶產(chǎn)生絕望感,增加產(chǎn)品的生存幾率。

四、貝博規(guī)率

其實(shí)用一個(gè)成語(yǔ)就可以形容這個(gè)規(guī)律:得寸進(jìn)尺。在實(shí)際場(chǎng)景中,只要想辦法讓用戶先接受了一個(gè)小要求,之后就更可能讓他接受一項(xiàng)更大、更不合意的要求。

原始的實(shí)驗(yàn)中,心理學(xué)家讓兩位大學(xué)生訪問(wèn)郊區(qū)的一些家庭主婦。其中一位首先請(qǐng)求家庭主婦將一個(gè)小標(biāo)簽貼在窗戶(這是一個(gè)小的、無(wú)害的要求)。

兩周后,另一位大學(xué)生再次訪問(wèn)家庭主婦,要求她們?cè)谠簝?nèi)豎立一個(gè)呼吁安全駕駛的大招牌(該招牌很不美觀,這是一個(gè)大要求)。

結(jié)果答應(yīng)了第一項(xiàng)請(qǐng)求的人中有55%的人接受這項(xiàng)要求,而那些第一次沒(méi)被訪問(wèn)的家庭主婦中只有17%的人接受了該要求。

這個(gè)實(shí)驗(yàn)說(shuō)明,如果想要用戶達(dá)到最終的目標(biāo),可以先適當(dāng)設(shè)置一些和最終目標(biāo)相關(guān),但完成難度小得多的目標(biāo),循序漸進(jìn)地引導(dǎo),可以大大提升轉(zhuǎn)化率。

這種原理在各種產(chǎn)品的銷售的場(chǎng)景的可謂是遍地開(kāi)花。

比如汽車、不動(dòng)產(chǎn)等高價(jià)的商品,往往會(huì)給打出“來(lái)訪即送好禮”的方式吸引用戶前往,然后通過(guò)用戶試駕、樣板房體驗(yàn)等環(huán)節(jié)引導(dǎo)用戶去體驗(yàn)和接納,客戶有意向后,也只會(huì)要求付定金(而不是全款)......這樣繁復(fù)的流程都是為了把困難的目標(biāo)拆解得更細(xì)小。

五、主觀性證詞

心理學(xué)研究表明,很多證人提供的證詞都不太準(zhǔn)確,或者說(shuō)是具有明顯的個(gè)人觀點(diǎn)、傾向性和意識(shí)。甚至,證人對(duì)他們的證詞的信心和證詞的準(zhǔn)確性沒(méi)有足夠的相關(guān)性。

結(jié)合這個(gè)原理,就能更好地理解為什么問(wèn)卷或是訪談等經(jīng)典的調(diào)研方法并不一定能收集到足夠準(zhǔn)確的信息,對(duì)于一些主觀性較強(qiáng)的問(wèn)題,個(gè)人的傾向會(huì)極大的影響答案的可信度。

正確的做法是,盡量避免在調(diào)研中出現(xiàn)主觀性過(guò)強(qiáng)的題目,如果無(wú)法避免,盡量將題目拆解為多項(xiàng)能被客觀量化或評(píng)估的問(wèn)題。如果沒(méi)有考慮用戶本身對(duì)于產(chǎn)品的傾向性,很可能被言過(guò)其實(shí)的“證詞”誤導(dǎo)出錯(cuò)誤的結(jié)論。

六、馬太效應(yīng)

馬太效應(yīng)是指好的愈好,壞的愈壞,多的愈多,少的愈少的一種現(xiàn)象,出自圣經(jīng)《新約 | 馬太福音》中的一則寓言。

這個(gè)效應(yīng)常為經(jīng)濟(jì)學(xué)界所借用,反映貧者愈貧,富者愈富,贏家通吃的經(jīng)濟(jì)學(xué)中收入分配不公的現(xiàn)象。

類似的理論還有很多,比如二八定律(20%的頭部公司掌握80%的市場(chǎng)份額,20%的優(yōu)質(zhì)客戶貢獻(xiàn)80%的銷售收入,等等)。

這個(gè)原理告訴我們,要想讓產(chǎn)品在某一個(gè)領(lǐng)域保持優(yōu)勢(shì),就必須在此領(lǐng)域迅速做大。

當(dāng)你成為某個(gè)領(lǐng)域的領(lǐng)頭羊時(shí),你也能更輕易地獲得比弱小的同行更大的收益。而若沒(méi)有實(shí)力迅速在某個(gè)領(lǐng)域做大,就要不停地尋找新的發(fā)展領(lǐng)域,才能保證獲得較好的回報(bào)。

七、從眾行為

營(yíng)銷和促銷手段中最重要心理原理之一,即:人們更容易相信被多數(shù)人接受的選擇。

我們經(jīng)常可以看到路邊兩家餐廳,一家門口排滿了等待的食客,另一家卻一桌客人都沒(méi)有,巨大的反差往往讓后面到來(lái)的客人寧愿等待也要選擇人多的餐廳。

關(guān)于這種心理,哲學(xué)家認(rèn)為是人類理性的有限性,社會(huì)學(xué)家認(rèn)為是人類的集體無(wú)意識(shí),而經(jīng)濟(jì)學(xué)家則從信息不完全、委托代理等角度來(lái)解釋。但需要特別注意的是,從眾行為并非絕對(duì)的,因?yàn)樵谧非髠€(gè)人喜好上,人類往往也有很多個(gè)性的需求,從眾行為和個(gè)性追求往往是同時(shí)存在的。

從眾行為最典型的應(yīng)用方式就是密集推薦或評(píng)價(jià),現(xiàn)在的書(shū)籍的扉頁(yè)動(dòng)輒幾十條推薦語(yǔ),在線服務(wù)往往也會(huì)引用大量網(wǎng)友的好評(píng),來(lái)證明自己的價(jià)值。

新產(chǎn)品在推向市場(chǎng)時(shí),先多收集一些用戶的正面評(píng)價(jià),宣傳時(shí)會(huì)非常有利。

八、比較心理

這是消費(fèi)者心理學(xué)最經(jīng)典的原理,簡(jiǎn)單來(lái)說(shuō)就是把一個(gè)200元的產(chǎn)品和一個(gè)100元的看上去差不多的產(chǎn)品擺在一起,你就會(huì)覺(jué)得100元這個(gè)超級(jí)劃算,很容易產(chǎn)生購(gòu)買的沖動(dòng)。

對(duì)于每個(gè)人來(lái)說(shuō),所有的認(rèn)知,價(jià)值觀和結(jié)論都是建立在【比較】的基礎(chǔ)上得出的,所以,影響一個(gè)人的認(rèn)知,最有效的辦法就是創(chuàng)造對(duì)比的機(jī)會(huì)。

價(jià)格頁(yè)面最喜歡運(yùn)用比較心理,因?yàn)楸容^心理可以幫助他們重新設(shè)定消費(fèi)者的認(rèn)知。

常見(jiàn)的做法比如拉高產(chǎn)品的價(jià)格再做夸張的折扣讓用戶覺(jué)得這個(gè)商品現(xiàn)在超級(jí)劃算;或者在主推產(chǎn)品旁邊放置兩個(gè)明顯性價(jià)比不佳的次品,讓用戶對(duì)主推產(chǎn)品的效果感知更加強(qiáng)烈。

此外,在產(chǎn)品介紹時(shí)也可以將競(jìng)品的參數(shù)列在表格中和自家的產(chǎn)品進(jìn)行對(duì)比(當(dāng)然,這個(gè)表格中的項(xiàng)目都是挑選過(guò)的),這樣更容易體現(xiàn)自家產(chǎn)品的優(yōu)勢(shì)。

九、投射效應(yīng)

人們?cè)谌粘I钪谐3<僭O(shè)他人與自己具有相同的屬性、愛(ài)好或傾向等,心理學(xué)家稱這種心理現(xiàn)象為"投射效應(yīng)"。

"以小人之心度君子之腹"就是一種典型的投射效應(yīng)。當(dāng)別人的行為與我們不同時(shí),我們習(xí)慣用自己的標(biāo)準(zhǔn)去衡量別人的行為,認(rèn)為別人的行為違反常規(guī)。

了解這一點(diǎn)對(duì)于產(chǎn)品的策劃者們非常重要:用戶的想法很可能和自己不同(即便你認(rèn)為自己在這個(gè)領(lǐng)域比其他人都專業(yè)得多),但仍然需要被尊重。

所以近年來(lái)特別流行用戶體驗(yàn)、同理心這樣的詞匯,產(chǎn)品應(yīng)該以真實(shí)用戶的體驗(yàn)滿意度作為參考指標(biāo),設(shè)計(jì)者應(yīng)該盡可能地以設(shè)想自己是一個(gè)目標(biāo)用戶時(shí),會(huì)有什么反應(yīng),否則僅靠自己的“臆測(cè)”,創(chuàng)造出來(lái)的產(chǎn)品很可能和真實(shí)需求脫節(jié)。

十、賭博心理

以小博大的感覺(jué)是一種強(qiáng)上癮體驗(yàn),人們只有在輸?shù)臅r(shí)候才想到離開(kāi),少有在贏的時(shí)候離開(kāi)。這個(gè)就是賭場(chǎng)盈利的本質(zhì)模式。

由于真金白銀賭博是法律明令禁止的,所以產(chǎn)品設(shè)計(jì)角度一般都是借助積分、代幣等方式來(lái)給用戶制造“抽獎(jiǎng)”的機(jī)會(huì)。

對(duì)于國(guó)內(nèi)而言,氪金手游和盲盒就是典型的兩種應(yīng)用場(chǎng)景,前者往往會(huì)設(shè)定一個(gè)極低的概率讓玩家獲得珍貴的虛擬物品,后者則是讓消費(fèi)者有小概率獲得稀有款式的手辦,引誘顧客購(gòu)買超過(guò)自己需求的商品。

對(duì)于產(chǎn)品設(shè)計(jì)人員來(lái)講,賭博機(jī)制可以說(shuō)是一個(gè)潘多拉魔盒,通常不建議去使用和嘗試。人人都愛(ài)KPI,但也要取之有道,職場(chǎng)人都應(yīng)該有自己的底線。





作者:jongde來(lái)源:    站酷



藍(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)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(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ì)sillybuy.com )是一家專注而深入的界面設(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è)計(jì)法則|打造極致的用戶體驗(yàn)的秘訣-尼爾森十大可用性原則!

博博

推薦一個(gè)比較實(shí)用的設(shè)計(jì)法則,可以說(shuō)現(xiàn)在的任何互聯(lián)網(wǎng)產(chǎn)品都能看到這些理論的實(shí)踐,本次主要想以比較多的案列進(jìn)行實(shí)戰(zhàn)分析。


在日常使用移動(dòng)端或PC端產(chǎn)品時(shí),不知你有沒(méi)有這樣的體會(huì)?



出現(xiàn)這些問(wèn)題的,如何解決呢?

推薦一個(gè)比較實(shí)用的設(shè)計(jì)法則,這個(gè)法則已經(jīng)有很多的文章說(shuō)明了,可以說(shuō)現(xiàn)在的任何互聯(lián)網(wǎng)產(chǎn)品都能看到這些理論的實(shí)踐,本次主要想以比較多的案列進(jìn)行實(shí)戰(zhàn)分析。



尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個(gè)可用性問(wèn)題的基礎(chǔ)上,提煉出的十項(xiàng)交互設(shè)計(jì)原則。被廣泛運(yùn)用于網(wǎng)頁(yè)、APP以及各種人機(jī)交互領(lǐng)域。

要注意的是,這10項(xiàng)原則是啟發(fā)式(heuristics)的、廣泛的經(jīng)驗(yàn)法則,可以指導(dǎo)我們更具價(jià)值的思考界面設(shè)計(jì)。

設(shè)計(jì)原則都可靈活運(yùn)用于各個(gè)地方,可以是交互設(shè)計(jì),也可以是界面設(shè)計(jì),深入了解各種設(shè)計(jì)原則,讓設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候可以找到更好的解決方案,提高用戶的使用體驗(yàn)。

理論介紹

雅各布·尼爾森(Jakob Nielsen)是畢業(yè)于哥本哈根的丹麥技術(shù)大學(xué)的人機(jī)交互博士,被譽(yù)為可用性測(cè)試的鼻祖,2006年4月,并被納入美國(guó)計(jì)算機(jī)學(xué)會(huì)人機(jī)交互學(xué)院,被賦予人機(jī)交互實(shí)踐的終身成就獎(jiǎng)。 

尼爾森于1995年1月1日發(fā)表了「十大可用性原則」,該原則被廣大設(shè)計(jì)師奉為教科書(shū)般的存在。雖然20多年過(guò)去了,但是對(duì)于現(xiàn)今的產(chǎn)品體驗(yàn)設(shè)計(jì)仍然具有很大的參考意義。







人機(jī)交互的基本原則是,讓系統(tǒng)和用戶之間保持良好的溝通和信息傳遞。系統(tǒng)要告知用戶發(fā)生了什么,預(yù)期是什么,如果系統(tǒng)不能及時(shí)向用戶反饋合適的信息,用戶必然會(huì)感到失控和焦慮,不知道下一步要做什么。

界面狀態(tài)分為兩種:靜態(tài)和動(dòng)態(tài)。

靜態(tài)即用戶通過(guò)界面查閱,明確知道自己的位置、處于何種狀態(tài),或者知道界面數(shù)據(jù)的狀態(tài)。動(dòng)態(tài)即用戶在進(jìn)行界面操作時(shí),系統(tǒng)應(yīng)當(dāng)立刻提供反饋,告訴用戶該項(xiàng)操作被系統(tǒng)接受,讓用戶對(duì)操作感知及判斷。

該原則在設(shè)計(jì)中的體現(xiàn):

1、狀態(tài)可見(jiàn)性-位置可見(jiàn)

告訴用戶處在系統(tǒng)的什么位置,特別是對(duì)于新用戶,需要提供必要的信息,否則容易迷惑。比如:導(dǎo)航菜單、面包屑、標(biāo)簽頁(yè)、步驟條、分頁(yè)器等等。

相比于C端產(chǎn)品,B端產(chǎn)品在頁(yè)面層級(jí)往往更為復(fù)雜。因此,讓用戶明確當(dāng)前所處的位置尤為重要,這也就突顯出了導(dǎo)航的重要性。設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中,要注意提供上下文線索,避免用戶迷路。



2、狀態(tài)可見(jiàn)性-進(jìn)度條

告知用戶系統(tǒng)運(yùn)行的狀態(tài)信息,比如進(jìn)度、內(nèi)容加載時(shí),增加用戶掌控感。

最經(jīng)典的案例莫過(guò)于Loading頁(yè)的進(jìn)度條了,無(wú)論是加載頁(yè)面還是下載內(nèi)容,一個(gè)清晰的進(jìn)度條可以讓用戶隨時(shí)掌控進(jìn)度,同時(shí)也可以用具體的數(shù)字更加明確的表示,比如:安裝程序時(shí)顯示進(jìn)度條,并預(yù)估還需要多久結(jié)束,播放音樂(lè)時(shí)顯示進(jìn)度條,并提示預(yù)估剩余時(shí)間。



3、狀態(tài)可見(jiàn)性-操作反饋

系統(tǒng)適當(dāng)反饋是用戶界面設(shè)計(jì)的最基本準(zhǔn)則。當(dāng)用戶在與系統(tǒng)進(jìn)行交互時(shí),應(yīng)當(dāng)在各個(gè)階段為用戶提供必要、積極且即時(shí)的反饋,同時(shí)也要避免過(guò)度反饋打擾用戶??梢允褂玫男问桨ǖ痪窒抻冢?/span>

操作反饋:點(diǎn)擊頁(yè)面跳轉(zhuǎn)、按鈕點(diǎn)擊狀態(tài)、警告提示、輸入反饋等等;

結(jié)果反饋:非模態(tài)彈窗,輕量化感知系統(tǒng)內(nèi)容反饋。(反饋內(nèi)容應(yīng)盡量不要打斷用戶操作,所以一般采用toast形式,反饋結(jié)果后及時(shí)消失。)

情感反饋:搜索沒(méi)有結(jié)果時(shí),沒(méi)有數(shù)據(jù)等等空狀態(tài)。

還可以通過(guò)元素的顏色位置、界面元素變化、文字、聲音和震動(dòng),甚至動(dòng)效等多種形式給予用戶提示反饋。

注意,越是消極的反饋,比如網(wǎng)絡(luò)連接失敗、系統(tǒng)錯(cuò)誤等,越是要及時(shí)告知用戶,同時(shí)提醒用戶采取適當(dāng)措施。比如:1、提交表單時(shí),如果校驗(yàn)失敗,則在填寫(xiě)有誤的內(nèi)容旁邊提示錯(cuò)誤原因;2、程序未響應(yīng)時(shí),系統(tǒng)會(huì)讓用戶選擇是關(guān)閉程序還是等待程序響應(yīng);



4、狀態(tài)可見(jiàn)性-合理的時(shí)間

系統(tǒng)應(yīng)該在合理的時(shí)間內(nèi),給予用戶適當(dāng)?shù)姆答仯層脩袅私庹诎l(fā)生的事情。

當(dāng)系統(tǒng)反饋時(shí)間小于1秒,通常正常反饋即可;相反長(zhǎng)于1秒時(shí),我們通常會(huì)通過(guò)加載動(dòng)畫(huà)、占位符、分步加載等方式,減緩用戶等待的焦慮感。如果超過(guò)10秒還沒(méi)有得到相應(yīng),那么通常會(huì)認(rèn)為這次請(qǐng)求是失敗的,需要給用戶失敗提示。

例如:下載提示、刷新提示、支付提示、新頁(yè)面加載提示等。







系統(tǒng)盡可能貼切用戶所在的真實(shí)環(huán)境。把復(fù)雜的系統(tǒng)語(yǔ)言換成用戶看得懂的語(yǔ)言;環(huán)境貼切原則的根本目標(biāo)是讓用戶可以快速上手產(chǎn)品,降低學(xué)習(xí)成本。

《iPhone人機(jī)交互指南》里提到的隱喻與擬物化是很好的實(shí)踐。此外,還應(yīng)該使用易懂和約定俗成的表達(dá)。

該原則在設(shè)計(jì)中的體現(xiàn):

1、環(huán)境貼切-易理解的語(yǔ)言

這里說(shuō)的語(yǔ)言不僅僅包括文案層面的語(yǔ)言,還包括產(chǎn)品的設(shè)計(jì)語(yǔ)言(圖形、配色、風(fēng)格、動(dòng)效、手勢(shì)等)設(shè)計(jì)語(yǔ)言都應(yīng)該是易于用戶理解和認(rèn)知的。產(chǎn)品使用的語(yǔ)言應(yīng)該是目標(biāo)用戶能夠清晰理解的。如果用戶不能理解,他們會(huì)感到被忽視和受挫敗,許多人將選擇其他產(chǎn)品完成目標(biāo)。

從設(shè)計(jì)心理學(xué)角度來(lái)講,用戶在使用產(chǎn)品的過(guò)程中,其大腦會(huì)“優(yōu)待”較常用的記憶內(nèi)容和操作形式,有意抑制那些相似但不常用的內(nèi)容,以便減輕認(rèn)知負(fù)擔(dān),防止混淆,這種習(xí)慣從某種程度上來(lái)說(shuō)屬于“熟知記憶”。

比如細(xì)分市場(chǎng)的產(chǎn)品,針對(duì)中老年、青年、兒童的產(chǎn)品或商務(wù)、娛樂(lè)的產(chǎn)品,都要分別使用符合自己的定位的語(yǔ)言。



反面案例就是windows系統(tǒng)出錯(cuò)了頁(yè)面,一堆亂碼,看不懂又很慌張,就很不友好。另外還有一點(diǎn),很多大公司的app都會(huì)針對(duì)他們不同國(guó)家的用戶群體進(jìn)行各種語(yǔ)言的翻譯處理。

為了照顧不同國(guó)家的用戶的使用習(xí)慣對(duì)頁(yè)面結(jié)構(gòu)布局,風(fēng)格,語(yǔ)言,字體,包括交互方式都會(huì)做特殊處理。這就是場(chǎng)景貼合原則。

2、環(huán)境貼切-模擬現(xiàn)實(shí)世界對(duì)象

模仿現(xiàn)實(shí)世界的產(chǎn)品或者使用映射,能夠利用人們現(xiàn)有的知識(shí),可以顯著的降低用戶的認(rèn)知和學(xué)習(xí)困難,并增加他們的使用興趣。

比較好的案例就是iOS原生的計(jì)算器、指南針,微信紅包都是模仿了現(xiàn)實(shí)世界的產(chǎn)品。



3、環(huán)境貼切-符合現(xiàn)實(shí)世界隱喻

從現(xiàn)實(shí)世界中借鑒的設(shè)計(jì)元素可明顯降低用戶的認(rèn)知和學(xué)習(xí)難度,并且增加興趣。最有代表性的就是網(wǎng)易云的音樂(lè)播放界面圖形隱喻表達(dá)。美團(tuán)APP的母嬰類目icon的設(shè)計(jì)非常有趣,且非常容易理解和使用,讓人印象深刻。



4、環(huán)境貼切-操作手勢(shì)符合聯(lián)想

使用的操作手勢(shì),應(yīng)該是用戶自然就能聯(lián)想到的,不要?jiǎng)?chuàng)造、更改操作手勢(shì)的意義。


5、環(huán)境貼切-自然的動(dòng)效

動(dòng)效的加載樣式應(yīng)符合自然規(guī)律,需要平緩過(guò)渡,而不是生硬的加載效果。比如:網(wǎng)易云音樂(lè)播放時(shí)唱片轉(zhuǎn)動(dòng)、停止播放時(shí)唱片自動(dòng)移開(kāi),有趣且有效。




用戶在使用產(chǎn)品的過(guò)程中,誤操作是經(jīng)常發(fā)生的事情,系統(tǒng)應(yīng)提供撤銷和重做功能,讓用戶具有對(duì)產(chǎn)品的控制性與自由度。

用戶可控原則的根本目標(biāo)是讓用戶可以在界面自由操作,而且無(wú)需為操作不當(dāng)承擔(dān)責(zé)任。

該原則在設(shè)計(jì)中的體現(xiàn):

1、可控原則-可自由導(dǎo)航

清晰便捷的導(dǎo)航方式,使用戶可自由控制返回和跳轉(zhuǎn)的頁(yè)面。

由于B端系統(tǒng)的復(fù)雜性,有些功能的層級(jí)會(huì)比較深。彈窗A中的某個(gè)操作可能會(huì)觸發(fā)彈窗B的彈出,如果彈窗A和B承載的功能具有父級(jí)和子級(jí)的關(guān)系,同樣需要考慮「返回」的功能以及清晰的層級(jí)關(guān)系。

2、可控原則-可自由返回撤銷

用戶在使用系統(tǒng)的過(guò)程也是一個(gè)試錯(cuò)的過(guò)程,系統(tǒng)要讓用戶覺(jué)得自己的行為是可控的,可以犯錯(cuò),并且在犯錯(cuò)之后可以反悔。用戶在使用產(chǎn)品時(shí)可以自由進(jìn)退,遵循從哪里來(lái)就返回到哪里去的原則。當(dāng)用戶誤操作時(shí)要給用戶提供撤銷、取消、重做等相關(guān)功能。不可逆的操作要給用戶明顯的提示。

比如微信聊天是可以撤回的,并且撤回之后還支持重新編輯;對(duì)于我這種打字總是出錯(cuò)的人簡(jiǎn)直就是福利。iphone相冊(cè)刪除照片后,支持在短期內(nèi)找回;在word中編輯文檔時(shí),支持撤銷和恢復(fù),保存的同時(shí),還能查看歷史保存記錄。



回收站功能:讓用戶更有自由度,增加用戶安全感,可控的找回誤刪除資源。



3、可控原則-不可逆轉(zhuǎn)的操作需要警告

系統(tǒng)在重要的不可逆轉(zhuǎn)的操作需要給用戶提供二次確認(rèn)或者撤銷的功能,這樣可提高用戶的操作可控性。在產(chǎn)品設(shè)計(jì)上,防止用戶常見(jiàn)的誤操作。比如很多產(chǎn)品在涉及到內(nèi)容的刪除操作時(shí),經(jīng)常會(huì)有彈窗提醒,讓用戶再次確認(rèn)。這樣是防止用戶誤操作帶來(lái)的刪除損失。用戶不用因?yàn)椴僮鲙?lái)心理負(fù)擔(dān),從而提升操作可控性。

比如iPhone ios系統(tǒng):

1、常見(jiàn)的二次確認(rèn)主要可以通過(guò)以下方式實(shí)現(xiàn):通過(guò)文字提示,用戶閱讀后點(diǎn)擊是與否來(lái)進(jìn)行下一步;

2、通過(guò)動(dòng)作,用戶通過(guò)輸入特定字符或者完成驗(yàn)證碼拖拽等操作才可進(jìn)行下一步操作;

3、通過(guò)身份校驗(yàn),用戶需要提交個(gè)人身份信息以完成校驗(yàn);







整個(gè)系統(tǒng)要保持產(chǎn)品結(jié)構(gòu)架構(gòu)、導(dǎo)航、用語(yǔ)、色彩、操作行為交互的一致性與標(biāo)準(zhǔn)性,遵循平臺(tái)慣例與行業(yè)標(biāo)準(zhǔn)。我們?cè)谠O(shè)計(jì)中常見(jiàn)的制作平臺(tái)規(guī)范,其實(shí)就是為了保證平臺(tái)設(shè)計(jì)的一致性。

一致性原則的根本目的是保證產(chǎn)品的專業(yè)性,給用戶帶去統(tǒng)一的體驗(yàn)感受。

該原則在設(shè)計(jì)中的體現(xiàn):

1、一致性-產(chǎn)品內(nèi)部一致

遵循產(chǎn)品內(nèi)部的慣例,可幫助用戶快速學(xué)習(xí)使用產(chǎn)品功能。產(chǎn)品內(nèi)部的一致性包含:產(chǎn)品功能框架、文字、設(shè)計(jì)風(fēng)格、布局、反饋等等。

比如:小熊藝術(shù)app,一款針對(duì)孩子學(xué)習(xí)美術(shù)的app,不管是首頁(yè)、個(gè)人中心以及加載等頁(yè)面,風(fēng)格保持一致性都是主打清新黃色+可愛(ài)icon。黃色小熊更是在不同的合適的時(shí)機(jī)出現(xiàn),banner、加載,課程動(dòng)畫(huà)中等。不僅風(fēng)格一致性、布局、反饋等產(chǎn)品內(nèi)部保持一致性,也形成了統(tǒng)一的品牌傳達(dá)。




但是,有時(shí)候?yàn)榱诉_(dá)到產(chǎn)品目標(biāo),偶爾也會(huì)故意采用不一致的設(shè)計(jì)。

比如:常見(jiàn)的對(duì)話框都將“確定”按鈕放在右邊位置,所以用戶在操作時(shí),很容易產(chǎn)生條件反射,順手點(diǎn)擊右邊按鈕,然后才突然發(fā)現(xiàn)自己點(diǎn)錯(cuò)了。雖然看起來(lái)有些別扭甚至很多人不喜歡,但是很有效,這種設(shè)計(jì)在軟件卸載、App取消會(huì)員訂閱等操作中非常常見(jiàn),主要是為了做一些心理暗示和引導(dǎo),避免用戶卸載或退訂。



2、一致性-交互行為一致

交互和用戶的習(xí)慣一致,意味著用戶不再需要重新學(xué)習(xí),各種應(yīng)用之間的切換沒(méi)有學(xué)習(xí)成本。我們?cè)谇捌谝呀?jīng)培養(yǎng)好用戶的使用習(xí)慣,那么就不要輕易改變,減少用戶的認(rèn)知成本與學(xué)習(xí)成本。

例如:常見(jiàn)的頁(yè)面的后退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。



3、一致性-迭代產(chǎn)品一致

當(dāng)產(chǎn)品線進(jìn)行更新迭代的時(shí)候,應(yīng)該保留用戶既有的交互和操作習(xí)慣,用戶在上一個(gè)版本形成的交互認(rèn)知在下一個(gè)版本是否能被沿用,這對(duì)于用戶來(lái)說(shuō)在產(chǎn)品體驗(yàn)上會(huì)造成很大的干擾。

比如微信的多年的迭代,底部tab功能一直都是這樣,主要功能入口一致沒(méi)有變化,就體現(xiàn)了迭代產(chǎn)品的一致性。


4、一致性-同一團(tuán)隊(duì)/公司產(chǎn)品線一致

Office軟件中包含的各個(gè)產(chǎn)品,其界面布局和設(shè)計(jì)風(fēng)格都保持了高度一致,如下圖所示是PowerPoint和Word的界面,可以看出,二者的“插入”一級(jí)菜單下所包含功能的排列順序、布局方式乃至圖標(biāo)圖形,都是高度類似的。



5、一致性-設(shè)計(jì)語(yǔ)言一致

遵循統(tǒng)一的產(chǎn)品設(shè)計(jì)規(guī)范/邏輯。這里的一致性包含產(chǎn)品和跨平臺(tái)產(chǎn)品之間的一致性。確保整個(gè)系統(tǒng)的結(jié)構(gòu)一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設(shè)計(jì)語(yǔ)言都遵循同一套設(shè)計(jì)規(guī)則。

比如,產(chǎn)品內(nèi)相同顏色的反復(fù)出現(xiàn),為產(chǎn)品打造視覺(jué)錘符號(hào),強(qiáng)化產(chǎn)品在用戶心中的記憶點(diǎn)。符合平臺(tái)設(shè)計(jì)規(guī)范,

蘋果系統(tǒng)參照人機(jī)交互設(shè)計(jì)指南設(shè)計(jì)規(guī)范,安卓系統(tǒng)參照Material Design設(shè)計(jì)規(guī)范,或者直接參照自己團(tuán)隊(duì)的的設(shè)計(jì)規(guī)范,應(yīng)該遵循慣例,并且保持系統(tǒng)的一致感,不要盲目地標(biāo)新立異。



6、一致性-業(yè)內(nèi)產(chǎn)品保持一致 

不知道你發(fā)現(xiàn)了沒(méi),現(xiàn)在的電商、音樂(lè)、社交等等app越來(lái)越一樣了,一樣的交互,一樣的排版設(shè)計(jì),基本上都遵循著類似的交互邏輯和視覺(jué)元素。


為什么會(huì)這樣?同類軟件設(shè)計(jì)的趨同化,未必不是一件好事?

與業(yè)內(nèi)產(chǎn)品保持一致,意味著用戶不再需要重新學(xué)習(xí),就可以在各種應(yīng)用中自由切換,用戶學(xué)習(xí)成本的降低,也意味著我們獲客成本從某種程度上被降低。而這些約定俗成的規(guī)則和流程都被用戶不自覺(jué)地印刻在大腦中,成為一種自然的習(xí)慣,而獨(dú)特的設(shè)計(jì),截然不同的規(guī)則,則常常會(huì)成為習(xí)慣以外的東西,引起混亂,讓初次上手的用戶感到受挫和沮喪。

如,在App底部的導(dǎo)航圖標(biāo)中,“首頁(yè)”永遠(yuǎn)排在第一個(gè),個(gè)人中心(“我的”)永遠(yuǎn)排在最后。并且對(duì)于類似“首頁(yè)”“購(gòu)物車”“訂單”等常見(jiàn)按鈕,不同App的設(shè)計(jì)樣式都非常相似。如下圖三個(gè)不同音樂(lè)app的對(duì)比圖:



如果你特立獨(dú)行地把個(gè)人中心放在第一個(gè)位置,或者采用奇怪的圖標(biāo)作為個(gè)人中心的icon,用戶使用時(shí)肯定會(huì)覺(jué)得別扭。





防錯(cuò)原則的根本目標(biāo)是阻止錯(cuò)誤行為,避免進(jìn)一步犯錯(cuò),指引用戶正確的完成操作行為。

「防止錯(cuò)誤」主要分為三個(gè)階段:錯(cuò)誤行動(dòng)發(fā)生前,引導(dǎo)用戶向正確的方向前進(jìn);用戶觸碰到危險(xiǎn)操作時(shí)給予提示;危險(xiǎn)操作發(fā)生之后,提供撤回的入口。

該原則在設(shè)計(jì)中的體現(xiàn):

1、在執(zhí)行危險(xiǎn)操作前做設(shè)計(jì):

比一個(gè)優(yōu)秀的錯(cuò)誤提醒彈窗更好的設(shè)計(jì)方式,是在這個(gè)錯(cuò)誤發(fā)生之前就避免它。它可以幫助用戶排除一些容易出錯(cuò)的情況,或在用戶提交之前給他一個(gè)確認(rèn)的選項(xiàng)。

通常情況下,按鈕置灰表示對(duì)應(yīng)功能或操作無(wú)法使用,這也是防止錯(cuò)誤的一條有效途徑,因?yàn)橛脩敉ㄟ^(guò)按鈕樣式就可獲知其狀態(tài),提前規(guī)避無(wú)效的提交操作。當(dāng)然,不是只要功能或操作無(wú)法使用時(shí),就應(yīng)該將對(duì)應(yīng)的按鈕置灰。其實(shí)更好的做法是填寫(xiě)完標(biāo)題后按鈕不置灰,點(diǎn)擊完成按鈕后定位或高亮必填項(xiàng),讓用戶更容易識(shí)別錯(cuò)誤點(diǎn)。

比如在登錄時(shí),只有輸出信息后才可以點(diǎn)擊登錄按鈕,未輸入信息時(shí),按鈕是不可以點(diǎn)擊的狀態(tài)。通過(guò)系統(tǒng)主動(dòng)對(duì)用戶進(jìn)行操作限制,幫助用戶避免發(fā)生錯(cuò)誤。



限制用戶的選擇并不是一個(gè)好主意,但是如果有明確的規(guī)則來(lái)定義可接受的選項(xiàng),那么限制用戶可以輸入的類型是一個(gè)很好的策略。再比如輸入驗(yàn)證碼頁(yè)面,為了防止用戶多輸入或者少輸入驗(yàn)證碼,只給到四個(gè)輸入框,讓用戶只能輸入四位數(shù)字,減少輸入錯(cuò)誤的幾率。


2、在執(zhí)行危險(xiǎn)操作中做設(shè)計(jì)

提供清晰的提示,防止用戶犯錯(cuò),提示包括標(biāo)簽、文字、顏色、以及反饋狀態(tài)等。利用顏色,動(dòng)效提供警示信息,比如常見(jiàn)的微信退出的按鈕是紅色的,狀態(tài)未完成的標(biāo)簽是紅色的等等。

如:表單填寫(xiě)過(guò)程中讓用戶及時(shí)知道輸入格式,出錯(cuò)原因,避免填寫(xiě)完成后再提醒,浪費(fèi)用戶時(shí)間。

范圍限制:限制用戶的選擇并不是一個(gè)好主意,但是如果有明確的規(guī)則來(lái)定義可接受的選項(xiàng),那么限制用戶可以輸入的類型是一個(gè)很好的策略。比如:電影購(gòu)票時(shí),已購(gòu)買的位子不會(huì)再提供選擇,很好的避免了買重的問(wèn)題 



3、危險(xiǎn)操作發(fā)生之后做設(shè)計(jì)

特別要注意在用戶操作具有毀滅性結(jié)果的功能時(shí)要有提示,防止用戶犯不可挽回的錯(cuò)誤,需打斷用戶,提示用戶是否要進(jìn)行此操作,讓用戶有更多的思考時(shí)間。所以在一些不可逆的操作中二次確認(rèn)是非常有必要的。

這條原則很重要也很常見(jiàn)。在刪除信息時(shí),系統(tǒng)會(huì)讓用戶確認(rèn)刪除,也就是我們常說(shuō)的二次確認(rèn),電商平臺(tái)允許在一定的規(guī)則下取消訂單等等。






易取原則的根本目標(biāo)是提升用戶在界面上的操作效率,系統(tǒng)應(yīng)直觀地協(xié)助用戶完成任務(wù)。

系統(tǒng)應(yīng)協(xié)助用戶進(jìn)行記憶,通過(guò)使元素、操作和選項(xiàng)可見(jiàn),減少用戶的記憶負(fù)荷,在適合的時(shí)機(jī)給用戶需要獲取的信息。

識(shí)別比回憶要好,對(duì)于路徑較長(zhǎng)的操作,我們更應(yīng)該協(xié)助用戶記憶。比如在淘寶下單的操作路徑,每一個(gè)頁(yè)面頂部導(dǎo)航欄會(huì)盡可能的提醒用戶操作到哪里,用戶所有的操作信息都是可見(jiàn)、易獲取的,減少用戶對(duì)操作目標(biāo)的記憶負(fù)擔(dān)。

該原則在設(shè)計(jì)中的體現(xiàn):

1、易取原則-易掃描

用戶心理學(xué)研究發(fā)現(xiàn),互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁(yè)的動(dòng)作不是讀,不是看,而是“掃”。這是互聯(lián)網(wǎng)用戶瀏覽的主要方式。所以我們?cè)谠O(shè)計(jì)的時(shí)候,需要清晰的視覺(jué)層次結(jié)構(gòu),突出重點(diǎn),弱化和剔除無(wú)關(guān)信息,降低頁(yè)面干擾,來(lái)減輕用戶閱讀成本。



2、易取原則-讓用戶選擇而不是填寫(xiě)

比起讓用戶輸入,讓用戶選擇更能降低用戶的記憶成本,更好地輔助用戶做決策。如果,有很多的信息或者選項(xiàng)是用戶高頻率會(huì)選擇的,設(shè)計(jì)師不妨給用戶提前做好選擇,提供默認(rèn)選項(xiàng),如下圖:



3、易取原則-智能獲取

通過(guò)智能讀取用戶之前填寫(xiě)過(guò)的信息,或者智能識(shí)別等形式,減少用戶記憶負(fù)擔(dān)與操作負(fù)擔(dān)。

常見(jiàn)的是寄快遞-新增地址,將用戶復(fù)制的文本字符類型進(jìn)行識(shí)別并匹配,將有用的信息內(nèi)容提取出來(lái),對(duì)體驗(yàn)而言顯得高效又智能。

或者淘寶購(gòu)物確認(rèn)訂單時(shí),系統(tǒng)會(huì)自動(dòng)為你帶入之前的商品信息,包括選擇的商品規(guī)則、數(shù)量、價(jià)格、默認(rèn)記錄顯示常用的地址等。這些信息雖然之前都選擇過(guò),但是需要用戶在購(gòu)買前二次確認(rèn),由于信息比較多,用戶很難記憶,所以確認(rèn)訂單再展示出來(lái)更加合理。



比如:用手機(jī)登錄時(shí),收到的驗(yàn)證碼直接展示在軟鍵盤上,用戶無(wú)需記憶也無(wú)需輸入,直接點(diǎn)選即可登錄;

美團(tuán)APP中,當(dāng)用戶選擇商品時(shí),系統(tǒng)會(huì)自動(dòng)計(jì)算商品價(jià)格和滿減后的價(jià)格,還會(huì)幫用戶記錄選擇了哪些商品以及份數(shù),不需要用戶自己花時(shí)間去計(jì)算還差多少才能滿減等,減少用戶記憶負(fù)擔(dān),同時(shí)節(jié)省用戶點(diǎn)外賣的時(shí)間,這也用到了易取原則。

訂單頁(yè)面若某信息需要用戶從一個(gè)頁(yè)面復(fù)制到另一個(gè)頁(yè)面完成查詢或編輯輸入,那就有必要為該信息提供快捷復(fù)制功能,如訂單號(hào)緊跟著一個(gè)復(fù)制按鈕。

我們?cè)谒阉饕粋€(gè)歌名的時(shí)候,記不住完整的歌曲名,我們只要輸入關(guān)鍵的幾個(gè)詞,系統(tǒng)就是幫助我們記憶,出現(xiàn)相關(guān)的搜索。



4、易取原則-草稿箱或歷史記錄

作為用戶,你不記得的操作,系統(tǒng)可以幫你記錄。為用戶提供歷史記錄,文本創(chuàng)作的過(guò)程中自動(dòng)保存草稿,讓用戶方便查詢自己的進(jìn)程,這就是信息易取原則的設(shè)計(jì)。

保留歷史,最為常見(jiàn)的就是為用戶保留歷史搜索和歷史瀏覽、儲(chǔ)存賬號(hào)和密碼。視頻APP會(huì)詳細(xì)記錄用戶的觀看記錄,當(dāng)用戶沒(méi)有看完某部電影時(shí),下次進(jìn)入直接從斷點(diǎn)續(xù)播上次播放的位置,無(wú)需用戶記憶上次看到哪里了;

不只是觀看記錄,視頻軟件還會(huì)幫你記錄同一賬號(hào)在不同設(shè)備上的登錄記錄,觀看記錄也會(huì)在不同設(shè)備之間進(jìn)行同步。



5、易取原則-可視化

將選擇的對(duì)象,動(dòng)作,選項(xiàng)可視化,讓用戶一看就懂。注意圖標(biāo)符號(hào)化能讓人理解,避免引起誤解。

抽象圖形+文字,提供了更多的信息,更加豐富了記憶效果,避免了用戶需要記憶才能想起圖形代表的含義。我們常用的app導(dǎo)航欄都是以這種icon和文字相結(jié)合的形式,這就是很符合易取原則的例子。



6、易取原則-內(nèi)容可預(yù)期

在用戶使用產(chǎn)品的過(guò)程中,會(huì)有一些需要用戶記憶的內(nèi)容、或者操作路徑,在設(shè)計(jì)的時(shí)候我們要避免用戶記憶,把信息直接提取出來(lái),送到用戶手里。同時(shí)每個(gè)頁(yè)面?zhèn)鬟f的信息量盡量少,減少用戶的閱讀壓力。

常見(jiàn)的例子是各類優(yōu)惠券,設(shè)計(jì)的時(shí)候會(huì)有明確的位置說(shuō)明限制時(shí)間,類別等等,同時(shí)還會(huì)有清晰的入口引導(dǎo)去使用或者規(guī)則的入口。



7、易取原則-行為輸入代替字符輸入

這一點(diǎn)其實(shí)也非常好理解,一個(gè)簡(jiǎn)單的動(dòng)作,比打字要輕松得多,常見(jiàn)的就是在設(shè)備解鎖的時(shí)候,用手勢(shì)解鎖替代密碼解鎖。

隨著技術(shù)發(fā)展,有了更多的行為代替輸入的方式,比如指紋識(shí)別和面部識(shí)別,用簡(jiǎn)單的操作,就可以達(dá)到進(jìn)入系統(tǒng)的目的,這就避免了用戶需要較多的操作和密碼的記憶。







靈活易用原則不僅是一個(gè)交互設(shè)計(jì)原則,也代表了一種軟件產(chǎn)品設(shè)計(jì)理念:系統(tǒng)既要做得簡(jiǎn)單、易用,讓所有用戶用起來(lái)得心應(yīng)手;

靈活易用原則的根本目標(biāo)是保持系統(tǒng)的靈活性,以滿足不同用戶的不同需求。既要提供必要的幫助,讓剛?cè)腴T的初級(jí)用戶順利上手,還需要支持靈活的個(gè)性化定制,讓高級(jí)用戶能夠快捷高效使用高頻功能,充分發(fā)揮其價(jià)值。

該原則在設(shè)計(jì)中的體現(xiàn):

1、靈活高效-提供定制化服務(wù)

讓用戶靈活定制的最典型的例子是各類軟件和App的配置功能,基本上所有軟件都會(huì)提供定制化功能,從快捷鍵設(shè)置,到頁(yè)面布局,再到自定義參數(shù),軟件系統(tǒng)會(huì)盡量提供全面的個(gè)性化設(shè)置功能,來(lái)滿足不同用戶的使用訴求和習(xí)慣,提升用戶的使用效率和體驗(yàn)。

例如支付寶首頁(yè),用戶可以自定義首頁(yè)的應(yīng)用。對(duì)于使用頻率比較高的老用戶來(lái)說(shuō),這是一個(gè)非常方便的功能。



還有一種是系統(tǒng)更具用戶常用自動(dòng)整理歸納,以提升使用效率,減少用戶多余操作。

比如:微信的聊天表情,由于可以選擇的表情很多,正常情況下用戶很難快速找到自己想用的表情。而用戶的使用習(xí)慣往往是循環(huán)使用其中的某幾個(gè),所以把最近使用的表情展現(xiàn)出來(lái),會(huì)極大的提升用戶的尋找效率。

除了從新老用戶的角度對(duì)用戶做區(qū)分,還可以從其他維度區(qū)分用戶,針對(duì)不同用戶做不同的功能。比如:微信為了讓中老年用戶使用方便,推出了關(guān)懷模式。在關(guān)懷模式下(下圖)文字更大、色彩更強(qiáng)、按鈕更大,還可以使用“聽(tīng)文字消息”的功能。這些功能充分考慮了“中老年用戶”的需求和痛點(diǎn),讓產(chǎn)品更加靈活易用。



2、靈活高效-提高用戶使用效率

靈活高效原則在交互設(shè)計(jì)中使用會(huì)提高用戶使用效率,例如微信聊天頁(yè)面中,當(dāng)用戶輸入某個(gè)字詞之后,系統(tǒng)會(huì)自動(dòng)幫你匹配相應(yīng)的表情包;

當(dāng)你輸入某個(gè)詞之后,輸入法會(huì)幫你自動(dòng)聯(lián)想接下來(lái)你可能會(huì)輸入的詞;截圖后進(jìn)入微信聊天頁(yè)面后,系統(tǒng)會(huì)將你剛截的圖前置,它會(huì)自動(dòng)判斷你可能想發(fā)送該截圖。如下圖:



3、靈活高效-“跳過(guò)”按鈕

通過(guò)用戶快捷跳過(guò)的入口,比如常見(jiàn)的:引導(dǎo)頁(yè)、操作手冊(cè)、還是開(kāi)屏廣告,有“跳過(guò)”或者”立即進(jìn)入“按鈕真的很貼心。



4、靈活高效-允許用戶重復(fù)操作

對(duì)于用戶頻繁使用的部分,提供快捷的重復(fù)使用操作,比如:外賣app,用戶可以快捷地再來(lái)一單,同時(shí)保存上一次操作記錄。



5、靈活高效-各取所需

在設(shè)計(jì)功能時(shí),最好能考慮到不同層次用戶的需求,以此來(lái)讓用戶「各取所需」(需要平臺(tái)有多類型用戶);比如常見(jiàn)的Word、Photoshop等,有一個(gè)“二八定律”,就是說(shuō)80%的功能是給20%的用戶使用的。

設(shè)計(jì)這類產(chǎn)品時(shí),最常用的20%的功能一定擺在最顯著的位置上,方便所有用戶使用,而80%的高端功能,要適度隱藏,使得整個(gè)產(chǎn)品看起來(lái)盡量簡(jiǎn)潔、美觀。比如Sketch的工具欄和快捷鍵就是給新手或資深用戶準(zhǔn)備的。



大數(shù)據(jù)智能判斷:

淘寶的首頁(yè)每個(gè)人推薦的商品都不相同,淘寶后臺(tái)根據(jù)用戶的瀏覽習(xí)慣,購(gòu)買/收藏記錄等大數(shù)據(jù)智能判斷用戶的喜好,對(duì)商品進(jìn)行千人千面的分發(fā)。

但是切記不要太過(guò)依賴大數(shù)據(jù)算法的判斷,因?yàn)橐坏┬纬蛇@種模式,會(huì)給用戶造成回音壁效應(yīng),你越喜歡的東西系統(tǒng)就越給你推薦,其他的商品就像回音壁一樣被吸收過(guò)濾,用戶永遠(yuǎn)沒(méi)有辦法發(fā)現(xiàn)新的東西,讓用戶的選擇永遠(yuǎn)都在一個(gè)死循環(huán),所以做千人千面設(shè)計(jì)時(shí)一定要適度。





優(yōu)美而簡(jiǎn)約原則的根本目標(biāo)是讓用戶快速找到界面的重要信息,引導(dǎo)用戶的視線及操作行為。

UI設(shè)計(jì)應(yīng)該是符合大眾審美的,不需要多么酷炫,而是需要我們注重信息獲取效率,更加聚焦內(nèi)容,刪除多余的視覺(jué)表達(dá)元素,讓界面保持美觀簡(jiǎn)約。

“快掃”是互聯(lián)網(wǎng)用戶瀏覽的主要方式。我們熟知的產(chǎn)品設(shè)計(jì)的四大基本原則:親密性、對(duì)齊、重復(fù)、對(duì)比,就是使頁(yè)面優(yōu)美而簡(jiǎn)約的方法。

該原則在設(shè)計(jì)中的體現(xiàn):

1、優(yōu)美簡(jiǎn)約-視覺(jué)層級(jí)關(guān)系明顯

建立清晰的視覺(jué)層級(jí),越重要的內(nèi)容越突出,能夠方便用戶無(wú)障礙地瀏覽信息,提高用戶操作與信息獲取效率,各模塊間采用卡片或者間距區(qū)分開(kāi),加強(qiáng)頁(yè)面層級(jí)區(qū)分。

我們通過(guò)顏色、大小、字體的字重、對(duì)比度、元素的間距、特殊造型、動(dòng)效等來(lái)表現(xiàn)。



2、優(yōu)美簡(jiǎn)約-避免界面元素過(guò)于雜亂

避免界面呈現(xiàn)過(guò)多元素,包括動(dòng)效、配圖、icon、按鈕等等,降低用戶的視覺(jué)干擾。保留產(chǎn)品最主要的信息,如果不是優(yōu)先級(jí)最高,要盡一切可能避免去影響產(chǎn)品的簡(jiǎn)潔和美觀,可采用大留白增加頁(yè)面呼吸感,聚焦內(nèi)容。



3、優(yōu)美簡(jiǎn)約-對(duì)重要信息突出顯示

用戶注意力資源有限,應(yīng)該保持信息精煉,突出重要信息,弱化次要信息。



上面兩個(gè)案例通過(guò)加粗放大、標(biāo)記顏色,從而讓頁(yè)面簡(jiǎn)潔,且突出重要信息。





容錯(cuò)原則的根本目標(biāo)是讓那個(gè)用戶在操作出錯(cuò)后還能挽回錯(cuò)誤的余地,從而給用戶一致產(chǎn)品很安全貼心的感覺(jué)。

系統(tǒng)需幫助用戶識(shí)別、診斷、并為用戶從錯(cuò)誤中恢復(fù)提出建設(shè)性的解決方案。通過(guò)提示性文字或者插圖讓用戶意識(shí)到出錯(cuò)了,比如404頁(yè)面的情感化插圖、彈窗提示用戶出錯(cuò)等。

該原則在設(shè)計(jì)中的體現(xiàn)

1、容錯(cuò)原則-引起用戶注意

當(dāng)發(fā)生錯(cuò)誤時(shí),提示信息一定要直觀,視覺(jué)上能夠引起用戶注意,可視化處理,文案要簡(jiǎn)單概要,并給出解決方案。例如刪除訂單時(shí),會(huì)提示二次確認(rèn),避免用戶誤操作。



2、容錯(cuò)原則-提供解決方案

在出錯(cuò)界面給出解決方案,可以是文字提醒或者按鈕跳轉(zhuǎn)等形式,幫助用戶解決問(wèn)題。比如缺省頁(yè)的設(shè)計(jì)除了配置插圖還會(huì)有提示文案與操作按鈕,引導(dǎo)用戶去操作,去進(jìn)一步解決問(wèn)題。



3、容錯(cuò)原則-幫助挽回?fù)p失

系統(tǒng)能幫助用戶自動(dòng)甄別錯(cuò)誤,并及時(shí)進(jìn)行糾正時(shí),將會(huì)給用戶帶來(lái)極大的便利,撤銷或者找回功能,都是幫用戶把損失降到最低的有效方法。

比如微信信息的消息撤回重新編輯,相冊(cè)的最近刪除、回收站等等功能。







人性化幫助原則的根本目標(biāo)是用戶在使用產(chǎn)品的過(guò)程中有所依循,因?yàn)楫a(chǎn)品已經(jīng)貼心地為他們準(zhǔn)備好了幫助方式,或者即時(shí)提示和反饋,或者客服。

人性化幫助用戶最好的方式分別為:1、無(wú)需提示;2、一次性提示;3、常駐提示;4、幫助文檔。

最好的就是沒(méi)有提示,用戶就能看懂與應(yīng)用產(chǎn)品;其次是一次性提示,提示一次用戶就懂如何使用,比如第一次進(jìn)入app或新功能上線的引導(dǎo)設(shè)計(jì)、通常為氣泡形式。常駐提示需要一直固定在某個(gè)位置實(shí)時(shí)幫助用戶。

最后就是幫助文檔了,一般用于解釋規(guī)則或者熱點(diǎn)問(wèn)題,通常以超鏈接的形式存在于頁(yè)面中,或者以集合形式位于設(shè)置頁(yè)中,此時(shí)需要注意要易于檢索。

該原則在設(shè)計(jì)中的體現(xiàn):

1、人性化幫助-方便用戶查找

幫助文檔的入口容易找到,幫助信息方便用戶查找。常見(jiàn)的方式有:鼠標(biāo)劃過(guò)懸浮文字說(shuō)明,幫助用戶更好地理解。



2、人性化幫助-便于用戶理解

用戶通過(guò)查看幫助文檔來(lái)學(xué)習(xí)新功能,相對(duì)比較麻煩。如果能將教程和功能放在一起,用戶可以“邊學(xué)邊練”,就更容易讓用戶理解。

提示語(yǔ)避免使用專業(yè)術(shù)語(yǔ),盡量使用圖片或者圖形,同時(shí)處理文字外還可以使用示意圖,操作步驟等,方便用戶應(yīng)用。



3、人性化幫助-便于用戶應(yīng)用

在操作時(shí)的幫助信息,比如幫助懸浮按鈕:一直出現(xiàn)在頁(yè)面固定位置,方便用戶遇到問(wèn)題尋求幫助。


4、人性化幫助-信息引導(dǎo)

搜索時(shí),預(yù)搜索詞直觀地顯示出來(lái),可以讓用戶更快地做出搜索判斷。微信轉(zhuǎn)賬頁(yè)面,當(dāng)用戶輸入金額較大時(shí),會(huì)在第一位數(shù)字下方提示轉(zhuǎn)賬金額的人民幣單位,目的是為了避免用戶輸入錯(cuò)誤金額導(dǎo)致資金損失;



5、人性化幫助-步驟引導(dǎo)

復(fù)雜的流程可以通過(guò)分步驟來(lái)引導(dǎo)用戶逐步完成,而不是一次完成所有任務(wù)。個(gè)性化的提示一次就夠了,用戶用過(guò)一次就知道其用法。




現(xiàn)在很多C端產(chǎn)品普遍做了良好的交互設(shè)計(jì),可以幫助用戶快速學(xué)習(xí)使用,而不用閱讀、理解復(fù)雜的說(shuō)明文檔。

然而,B端產(chǎn)品的復(fù)雜性比C端產(chǎn)品高很多,因?yàn)锽端產(chǎn)品蘊(yùn)含很多業(yè)務(wù)流程的規(guī)則,系統(tǒng)中的一個(gè)按鈕可能代表了一個(gè)復(fù)雜的業(yè)務(wù)處理規(guī)則,如果不了解整個(gè)業(yè)務(wù)場(chǎng)景和處理規(guī)則,是很難理解按鈕的操作含義的。

因此,對(duì)于B端產(chǎn)品,用戶進(jìn)行自助服務(wù)、自助操作的難度高很多,B端產(chǎn)品的幫助文檔依然有存在的必要。產(chǎn)品設(shè)計(jì)人員要盡量在前端交互上做好引導(dǎo)提示,對(duì)于復(fù)雜的規(guī)則和邏輯,可以考慮通過(guò)幫助文檔來(lái)指導(dǎo)用戶。

總結(jié)

尼爾森十大可用性原則可靈活運(yùn)用于各個(gè)地方,可以是交互設(shè)計(jì),也可以是界面設(shè)計(jì),深入了解該設(shè)計(jì)原則,可以找到更好的解決方案,提高用戶的使用體驗(yàn)。要注意的是,這10項(xiàng)原則是啟發(fā)式(heuristics)的、廣泛的經(jīng)驗(yàn)法則,而不是具體的規(guī)定。

1、狀態(tài)可見(jiàn)原則:位置可見(jiàn)、數(shù)量可見(jiàn)、狀態(tài)可見(jiàn);

2、環(huán)境貼近原則:語(yǔ)言應(yīng)該是用戶所能理解和習(xí)慣的;

3、用戶可控原則:可見(jiàn)導(dǎo)航、關(guān)閉與返回、撤銷與重做;

4、一致性原則:產(chǎn)品內(nèi)部一致、交互一致、迭代產(chǎn)品一致、同一產(chǎn)品線一致、設(shè)計(jì)語(yǔ)言一致、業(yè)內(nèi)產(chǎn)品一致;

5、防錯(cuò)原則:操作前預(yù)警、操作中確認(rèn)、操作后可撤回;

6、易取原則:易掃描、智能獲取、草稿箱和歷史記錄、對(duì)象可視化、選擇代替輸入;

7、靈活高效原則:靈活配置、允許頻繁操作、各取所需;

8、優(yōu)美而簡(jiǎn)約原則:視覺(jué)層次明顯、簡(jiǎn)約且突出重點(diǎn)信息;

9、容錯(cuò)原則:幫助用戶識(shí)別、診斷,并從錯(cuò)誤中恢復(fù)提供方法;

10、人性化幫助原則:無(wú)需提示、一次性提示、常駐提示、幫助文檔。

最后

我準(zhǔn)備了一些常用的設(shè)計(jì)素材送給大家,需要的話免費(fèi)拿走。獲取方式:老規(guī)矩公眾號(hào)后臺(tái),發(fā)送文字“素材”,就可以獲取了~



文中如有不嚴(yán)謹(jǐn)?shù)牡胤较M蠹医o予指正,希望大家可以多多點(diǎn)贊評(píng)論鼓勵(lì)一下,最后感謝你的耐心閱讀。






作者:789研習(xí)社      來(lái)源:站酷

藍(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)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(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ì)sillybuy.com )是一家專注而深入的界面設(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端篩選設(shè)計(jì)

博博

篩選作為一個(gè)常用的功能,在B端產(chǎn)品設(shè)計(jì)中可以快速按照需要對(duì)數(shù)據(jù)進(jìn)行查詢和篩選。希望本文對(duì)你有幫助。

今天與大家分享的是關(guān)于B端頁(yè)面中篩選區(qū)的功能設(shè)計(jì),本文會(huì)從篩選的展現(xiàn)形式、布局、反饋、設(shè)計(jì)中遇到的問(wèn)題以及設(shè)計(jì)思考這幾個(gè)方面進(jìn)行講述。


簡(jiǎn)單介紹下篩選


篩選,也可以稱作過(guò)濾器,它屬于搜索框架的一部分主要用于內(nèi)容提取,將一類數(shù)據(jù)展示,同時(shí)一類數(shù)據(jù)隱藏,可以整合很多的組件。


在B端產(chǎn)品設(shè)計(jì)中,篩選區(qū)的設(shè)置便于用戶進(jìn)行數(shù)據(jù)查詢和數(shù)據(jù)定位,可以快速的按照需要對(duì)數(shù)據(jù)進(jìn)行查詢和篩選;篩選的存在對(duì)于整個(gè)表單來(lái)說(shuō)是非常重要的,它可以幫助用戶在表單茫茫多的數(shù)據(jù)當(dāng)中進(jìn)行快速的數(shù)據(jù)定位;可以對(duì)表單進(jìn)行快速數(shù)據(jù)按照自己想要的方式進(jìn)行劃分,縮短用戶對(duì)于數(shù)據(jù)的尋找時(shí)間。

1、篩選區(qū)的展現(xiàn)形式有哪些?


篩選區(qū)常見(jiàn)到的有搜索、條件篩選這兩類控件。搜索和篩選雖然同在篩選區(qū),但是二者還是有所差異的。


通過(guò)百度百科我們可以了解到:
搜索,意思指仔細(xì)查找,搜尋。
篩選篩選是利用篩子使物料中小于篩孔的細(xì)粒物料透過(guò)篩面,而大于篩孔的粗粒物料滯留在篩面上,從而完成粗、細(xì)料分離的過(guò)程。該分離過(guò)程可看作是物料分層和細(xì)粒透篩兩個(gè)階段組成的。物料分層是完成分離的條件,細(xì)粒適篩是分離的目的。

在B端系統(tǒng)界面設(shè)計(jì)中,搜索是通過(guò)指定任意條件,系統(tǒng)對(duì)此條件進(jìn)行的檢索后,展示相對(duì)應(yīng)內(nèi)容,功能偏主動(dòng)性;篩選是系統(tǒng)提供指定各種條件縮小范圍,可以選擇查找不同條件的內(nèi)容,功能偏被動(dòng)性。


無(wú)論被動(dòng)性還是主動(dòng)性,搜索和篩選這倆個(gè)功能都是讓用戶使用某個(gè)條件對(duì)內(nèi)容進(jìn)行區(qū)分,從而找到用戶想要的內(nèi)容。二者在功能上相輔相成,在B端系統(tǒng)的頁(yè)面中僅靠搜索或者篩選作為內(nèi)容篩選都是不夠的,這就需要組合篩選區(qū)了。



1.1搜索篩選


精確搜索
優(yōu)點(diǎn):搜索準(zhǔn)確率高,所要即所得。
缺點(diǎn):需要用戶自己輸入,然后進(jìn)行查詢。需要記憶搜索詳細(xì)信息。輸入框需要有提示輸入的內(nèi)容,方便用戶填寫(xiě),以及確認(rèn)輸入的類別或格式。
適用場(chǎng)景:適用于用戶有清晰的目標(biāo),同時(shí)需要有查詢/搜索按鈕,來(lái)執(zhí)行篩選。搜索需要配合篩選固有類一起使用。


模糊搜索
優(yōu)點(diǎn):模糊搜索可以用于搜索關(guān)鍵字的同義詞,提高搜索的精確性。字段匹配推薦搜索結(jié)果,減少記憶負(fù)擔(dān),適用于不明確的信息篩選。
缺點(diǎn):篩選出很多類似相關(guān)的內(nèi)容,需要查找鑒別所要內(nèi)容,不便捷。
適用場(chǎng)景:用戶對(duì)目標(biāo)模糊,模糊是指不用關(guān)心輸入了什么格式,哪怕錯(cuò)了,系統(tǒng)也會(huì)推薦給用戶相對(duì)正確的;用戶需要瀏覽操作過(guò)濾器提供的信息來(lái)輔助篩選達(dá)到目標(biāo)。搜索需要配合篩選固有類一起使用。

搜索的設(shè)計(jì)原則


關(guān)于搜索,幾乎沒(méi)有人不知道,哪怕是不從事設(shè)計(jì)、產(chǎn)品的人,他們也知道。同時(shí)每一個(gè)產(chǎn)品,隨著規(guī)模變大,搜索一定必不可少。那么如何設(shè)計(jì)好搜索呢?有哪些原則可以借鑒,總結(jié)了以下4個(gè)方面。


漸進(jìn)呈現(xiàn)
在我們?cè)O(shè)計(jì)搜索時(shí),可以考慮漸進(jìn)呈現(xiàn)的方式。這是指搜索結(jié)果不要一股腦兒都塞給用戶,而是使用逐步擴(kuò)大的方式,讓用戶慢慢進(jìn)入目標(biāo)。但這里要注意,漸進(jìn)的層級(jí)不要太深,漸進(jìn)的內(nèi)容要做到足夠?yàn)橛脩糁搿?/span>

結(jié)構(gòu)化
結(jié)構(gòu)化是指搜索結(jié)果呈現(xiàn)的形式要有歸納和整理的意圖,不能反饋給用戶的是沒(méi)有層次的內(nèi)容。簡(jiǎn)單來(lái)說(shuō),分類就是結(jié)構(gòu)化呈現(xiàn)的體現(xiàn),內(nèi)容結(jié)構(gòu)化后用戶查找和定位才會(huì)更快速。

可操作
對(duì)于搜索結(jié)果,我們可以給予操作選擇,例如收藏、分享等,這將會(huì)大大提升用戶與搜索結(jié)果之間的后續(xù)聯(lián)系。
可操作性是最佳優(yōu)先的好伙伴。同時(shí)給搜索結(jié)果添加使用類操作,這會(huì)讓用戶專注于目標(biāo)。

可保存
無(wú)論搜索任何內(nèi)容,用戶都有權(quán)保存自己常用的搜索結(jié)果,保證用戶后續(xù)無(wú)需重復(fù)搜索。這點(diǎn)上已經(jīng)有很多C端產(chǎn)品做的很好了,我們?cè)贐端產(chǎn)品上也可以考慮起來(lái)。


1.2條件篩選


下拉篩選


優(yōu)點(diǎn):頁(yè)面的空間利用率高,同時(shí)下拉起到了很好的收納作用,不占據(jù)頁(yè)面空間。
缺點(diǎn):由于下拉的局限性無(wú)法觀看到所有的篩選字段,需要操作點(diǎn)擊查看。


適用場(chǎng)景:下拉的篩選字段選項(xiàng)有限,可以明確的總結(jié)分類時(shí),一般采用固定選項(xiàng)類。這種操作起來(lái)便捷,降低用戶的操作難度。一般情況下需要“搜索/查詢”按鈕,但是也有的產(chǎn)品是勾選即執(zhí)行的。主要需要結(jié)合具體的使用場(chǎng)景去判定。


矩陣(平鋪)篩選
優(yōu)點(diǎn):用戶可以直接看到篩選內(nèi)容,支持輸入更多篩選條件,減少操作步驟提高了用戶篩選的效率。
缺點(diǎn):平鋪的篩選類目占據(jù)頁(yè)面空間較大,空間利用率低,信息量過(guò)多都是重點(diǎn)等于沒(méi)有重點(diǎn),增加用戶的決策時(shí)間,不適合選項(xiàng)太多的情況。


適用場(chǎng)景:平鋪篩選控件的普適性為最強(qiáng),當(dāng)沒(méi)有其他更好想法時(shí),用平鋪總是一個(gè)好的選擇。需要注意的是,篩選條件不要過(guò)多(遵循7±2 法則)。


注意事項(xiàng):
當(dāng)確實(shí)需要支持大量的篩選條件時(shí),有兩種解決方案可供參考
1、用戶自行配置篩選條件:對(duì)用戶來(lái)說(shuō),單次篩選會(huì)用到的條件是有限的;通過(guò)可配置的篩選條件,實(shí)現(xiàn)檢索效率和信息噪音的平衡,對(duì)于用戶自定義項(xiàng)的體驗(yàn)與應(yīng)用都有更好的支持。
2、 隱藏低頻的篩選條件:這種方法需要對(duì)用戶需求有明確的把握,哪些篩選條件是高頻、哪些是低頻需要有明確的分界,優(yōu)點(diǎn)是第一次使用時(shí)用戶能更快上手。

表頭篩選
優(yōu)點(diǎn):通過(guò)表頭的點(diǎn)擊,簡(jiǎn)潔、直觀的篩選當(dāng)前表格列。
缺點(diǎn):只能篩選當(dāng)前列的內(nèi)容,篩選字段比較少,篩選形式比較單一。每個(gè)表頭都會(huì)有篩選的icon,影響用戶對(duì)于表頭的識(shí)別。表頭篩選學(xué)習(xí)成本最高,且和表頭排序容易沖突,篩選值展示也不夠直觀。


適用場(chǎng)景:表頭篩選類似Excel表格的操作,是一種相對(duì)高級(jí)的交互,適合表格列比較單一內(nèi)容的篩選。
注意事項(xiàng):
一般來(lái)說(shuō)不推薦使用,僅建議在以下幾種情況考慮使用
1、空間是在有限或者表格非常靈活;
2、用戶可能對(duì)每一列都有篩選需求(如數(shù)據(jù)報(bào)表、Excel);
3、產(chǎn)品規(guī)劃時(shí)對(duì)于用戶篩選需求不夠明確,也可通過(guò)這種模式先采集數(shù)據(jù),分析其使用頻次,對(duì)后期的界面優(yōu)化進(jìn)行指導(dǎo)。

TAB標(biāo)簽
優(yōu)點(diǎn):篩選條件一目了然,交互步驟少,一個(gè)Tab標(biāo)簽代表一個(gè)緯度,平鋪展示篩選內(nèi)容方便識(shí)別,學(xué)習(xí)成本低。
缺點(diǎn):Tab標(biāo)簽篩選字段數(shù)量有限制,不宜過(guò)多,分類需覆蓋選項(xiàng),并且保證每一項(xiàng)沒(méi)有交集,空間占用多、不夠靈活,對(duì)用戶自定義項(xiàng)支持較差。


適用場(chǎng)景:Tab標(biāo)簽切換一般用于和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān),且沒(méi)有交集的數(shù)據(jù)內(nèi)容(可以是同性質(zhì),也可以是不同性質(zhì))。權(quán)重高,選項(xiàng)值不超過(guò)5個(gè)。

1.3組合篩選


在B端系統(tǒng)表格類頁(yè)面中,字段屬性很多,簡(jiǎn)單的檢索方式很難準(zhǔn)確定位到目標(biāo)數(shù)據(jù),所以在實(shí)際使用當(dāng)中,常會(huì)將大量非交叉關(guān)系的屬性進(jìn)行羅列,搜索、篩選、TAB標(biāo)簽切換組合出現(xiàn),形成多屬性的組合檢索。而篩選項(xiàng)互相組合,其展示方式有如下幾種: 


平鋪式
平鋪式是將所有篩選項(xiàng)羅列出來(lái)平鋪在頁(yè)面上,可以兼容多種數(shù)據(jù)格式比如數(shù)字、文本、標(biāo)簽、枚舉值、布爾值等,包含但不限于日期選擇期、標(biāo)簽切換、單選框、復(fù)選框等多種控件。


優(yōu)點(diǎn):用戶能直接看到選項(xiàng)內(nèi)容,方便用戶識(shí)別選項(xiàng),且提高了用戶篩選的效率(節(jié)省了篩選操作),大而全的篩選字段最大限度避免篩選條件遺漏的問(wèn)題。


缺點(diǎn):篩選項(xiàng)多會(huì)占據(jù)大量頁(yè)面空間,信息量過(guò)多都是重點(diǎn)等于沒(méi)有重點(diǎn),增加用戶的決策時(shí)間,不利于表格數(shù)據(jù)的直觀展示,此類型一般配合“勾選即執(zhí)行”使用。


適用場(chǎng)景:普適性為最強(qiáng),當(dāng)沒(méi)有其他更好想法時(shí),用平鋪總是一個(gè)好的選擇。適用于從各個(gè)緯度篩選的場(chǎng)景,多維度篩選對(duì)信息篩選的顆粒度需求不一致,同時(shí)希望備選項(xiàng)被選中。

折疊式
折疊式篩選是平鋪式篩選的改進(jìn),一種簡(jiǎn)單直接的篩選形式,對(duì)平鋪的篩選項(xiàng)進(jìn)行收納,如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的,但又是必須存在的,可以通過(guò)折疊的方式將這部分篩選字段隱藏起來(lái),高頻篩選字段外露。


優(yōu)點(diǎn):高頻篩條件可優(yōu)先快速篩選、一定程度上減少用戶的認(rèn)知負(fù)荷,同時(shí)占用空間較小。


缺點(diǎn):不好劃分不同用戶的高頻篩選項(xiàng),當(dāng)高頻篩選項(xiàng)過(guò)多時(shí),頁(yè)面同樣會(huì)出現(xiàn)信息冗雜、空間占比大等問(wèn)題。


適用場(chǎng)景:折疊低頻篩選,顯示高頻篩選,能滿足大多場(chǎng)景下不占用太多空間。針對(duì)有更多篩選需求的用戶也有更好的引導(dǎo)性。



2.篩選區(qū)布局


從位置上來(lái)說(shuō),組合篩選一般有如下幾種常見(jiàn)類型:上下布局水平篩選區(qū)、左右布局的垂直側(cè)邊篩選區(qū)、 內(nèi)嵌的的表頭篩選區(qū)。


上下布局水平篩選區(qū)


最常用的上下布局,篩選區(qū)放置在表格頁(yè)面的上方,方便用戶識(shí)別選項(xiàng),提高了用戶篩選的效率,明確哪些數(shù)據(jù)是用戶所需的。上下布局的篩選區(qū)也方便用戶進(jìn)行閱讀,對(duì)于那些由不同數(shù)據(jù)結(jié)構(gòu)組成的頁(yè)面,是一個(gè)很好的選擇。


上下布局的篩選區(qū)的可擴(kuò)展性差,當(dāng)篩選項(xiàng)目少于五個(gè)的情況下,最常使用的就是上下布局,而當(dāng)篩選項(xiàng)目多的時(shí)候,會(huì)占據(jù)大量頁(yè)面空間,內(nèi)容在較多時(shí),推薦增加收起功能,這樣保證篩選整體面積不會(huì)很大,提升屏效比。


左右布局的垂直側(cè)邊篩選區(qū)
左右布局的篩選區(qū)一般是以字段選擇進(jìn)行篩選,篩選區(qū)的位置較固定,不會(huì)因?yàn)楹Y選項(xiàng)過(guò)多而影響頁(yè)面中主要內(nèi)容的位置,可擴(kuò)展性強(qiáng),可在收起部分嵌套更多的字段值。


左右布局的好處就是能夠?qū)⒑Y選的所有條件都直接的展示出來(lái),可以適應(yīng)很多場(chǎng)景,但是這種類型篩選器可以影響整個(gè)頁(yè)面。我們需要確保頁(yè)面上的每個(gè)元素都有效地受到篩選的影響,避免造成混亂。


內(nèi)嵌的表頭篩選區(qū)


表頭篩選是一種復(fù)雜的篩選形式,常見(jiàn)于列表中,是一種列表內(nèi)置篩選形式,適合表格列比較單一內(nèi)容的篩選,其最開(kāi)始是源于Excel的篩選形式,點(diǎn)擊表單的篩選按鈕,可以將表頭的篩選字段直接帶入,方便用戶。


3.篩選區(qū)的反饋


篩選區(qū)有兩種不同的反饋模式:數(shù)據(jù)實(shí)時(shí)更新反饋和數(shù)據(jù)手動(dòng)更新反饋。


數(shù)據(jù)實(shí)時(shí)更新反饋


界面將與所有設(shè)置的篩選相匹配并對(duì)結(jié)果進(jìn)行實(shí)時(shí)更新。
這種模式的優(yōu)點(diǎn)是在執(zhí)行篩選時(shí)為用戶提供了一種方便簡(jiǎn)單的體驗(yàn),可以在每次點(diǎn)擊后立即看到結(jié)果。適用于較低風(fēng)險(xiǎn)的交互,一旦處理多選過(guò)濾器或更復(fù)雜的輸入時(shí)可能會(huì)造成混亂。當(dāng)然還需要考慮處理數(shù)據(jù)的多少,如果應(yīng)用中數(shù)據(jù)量巨大,每次更新時(shí)間較長(zhǎng),反而會(huì)降低用戶的使用效率。


手動(dòng)更新反饋


在手動(dòng)更新反饋模式下,過(guò)濾結(jié)果只有在用戶點(diǎn)擊查詢時(shí)才會(huì)更新。如果用戶想在每次更改后查看結(jié)果,必須單擊查詢按鈕。
這種模式適合多緯度復(fù)雜的篩選,所有篩選字段設(shè)置完畢之后,統(tǒng)一執(zhí)行操作,和實(shí)時(shí)反饋結(jié)果相比降低篩選等待時(shí)間,尤其是在大量數(shù)據(jù)進(jìn)行篩選中,優(yōu)化了用戶體驗(yàn)。

4.篩選需要注意哪些問(wèn)題


什么情況不適合用篩選?
選用篩選組件的前提是信息能被清晰分類。如用戶ID/電話號(hào)碼,注冊(cè)用戶郵箱這種無(wú)明顯規(guī)則的就不適合用篩選組件去查找,用搜索會(huì)更好。


篩選分類條件有什么要求?
一是分類需符合大眾認(rèn)知的條件。如:按照年月日的認(rèn)知來(lái)選擇,地理位置按照省市區(qū)街道…
二是要求篩選類目的分類要合理、避免晦澀難懂的文案。這決定了用戶使用篩選功能的時(shí)候是否清晰無(wú)困惑。

高頻篩選操作怎么樣方便用戶操作?
首先高頻篩選操作不是產(chǎn)研團(tuán)隊(duì)自己主觀臆斷出來(lái)的,需要有數(shù)據(jù)支撐。很多產(chǎn)品為了滿足用戶快捷操作,會(huì)在篩選區(qū)幫用戶集成常用的快捷操作入口。比如很多電商產(chǎn)品的新品、包郵等快捷篩選。根據(jù)不同產(chǎn)品用戶習(xí)慣下操作整理出快捷操作入口能提高用戶體驗(yàn)方便度。

篩選和搜索的區(qū)別?
主要區(qū)別在于用戶對(duì)目標(biāo)的清晰度不同,需要選用不同組件功能來(lái)達(dá)到其目的。
在B端系統(tǒng)界面設(shè)計(jì)中,搜索是通過(guò)指定任意條件,系統(tǒng)對(duì)此條件進(jìn)行的檢索后,展示相對(duì)應(yīng)內(nèi)容;篩選是系統(tǒng)提供指定各種條件縮小范圍,可以選擇查找不同條件的內(nèi)容。
搜索和篩選都是讓用戶使用某個(gè)條件對(duì)內(nèi)容進(jìn)行區(qū)分,從而找到用戶想要的內(nèi)容。


5.工作中的設(shè)計(jì)思考


在設(shè)計(jì)組合篩選的時(shí)候,篩選區(qū)的設(shè)計(jì)需要根據(jù)業(yè)務(wù)實(shí)際情況進(jìn)行設(shè)計(jì),考慮每個(gè)篩選字段和業(yè)務(wù)場(chǎng)景,來(lái)安排合理的篩選展示方式。
那么到底什么情況下使用何種篩選模式?我們?cè)谠O(shè)計(jì)篩選的時(shí)候可以如何思考?顯然,使用頻率和界面空間是兩個(gè)非常重要的評(píng)判維度。除此之外,我們還可以以可見(jiàn)性、系統(tǒng)性能和用戶認(rèn)知等維度去深入思考,下面將逐一分析。


頻率
使用頻率是界面設(shè)計(jì)的一個(gè)重要考量因素,我們通常都會(huì)把高頻使用的功能放在顯眼且容易操作的位置。同理,對(duì)于篩選模式,我們也會(huì)依據(jù)篩選條件的高低頻進(jìn)行設(shè)計(jì)。頻率除了影響使用什么模式外,還會(huì)影響篩選條件及篩選項(xiàng)的排列順序,這里就不多敘述了。

界面空間
一些界面模式的出現(xiàn)就為了應(yīng)對(duì)界面空間不足的情況。而我們基于有限的界面空間選擇合適的篩選模式是件再正常不過(guò)的事。
可見(jiàn)性太弱,當(dāng)篩選條件都被收納在一個(gè)個(gè)小小的入口按鈕時(shí),它的可見(jiàn)性也會(huì)隨之降低,尤其在PC端,一個(gè)大屏幕下更難發(fā)現(xiàn)。

可見(jiàn)性
既然說(shuō)到可見(jiàn)性,不妨展開(kāi)講講??梢?jiàn)性是一項(xiàng)重要的設(shè)計(jì)原則之一。一個(gè)明顯的道理是,可見(jiàn)總比不可見(jiàn)好,但由于界面空間限制,我們不得不取舍。那么如何取舍才能保證可用性仍然友好?
針對(duì)篩選模式的可見(jiàn)性,我們可以分三個(gè)要點(diǎn)去考慮:


1、篩選條件本身的可見(jiàn)性:
用戶越難發(fā)現(xiàn),即可見(jiàn)性越低。通常,我們都可以以使用頻率來(lái)決定篩選條件的可見(jiàn)程度。但有時(shí)候也會(huì)失效,因?yàn)檎缟衔乃峒?,到了篩選這一步通常是顆粒度比較細(xì)的分類,否則我們可以用導(dǎo)航解決。但顆粒度越細(xì),用戶對(duì)信息的需求就越不一致。比如,挑一件衣服,有人希望按品牌篩選,有人希望按價(jià)格,有人希望按顏色,我們很難判斷哪個(gè)頻率更高。面對(duì)這種情況,只能將所有的篩選條件平鋪出來(lái)供用戶選擇。例如,淘寶天貓等電商產(chǎn)品往往會(huì)使用矩陣式的篩選,而一些數(shù)據(jù)格式更多樣的B端產(chǎn)品則直接使用輸入式的篩選。

2、篩選項(xiàng)的可見(jiàn)性:
篩選項(xiàng)的可見(jiàn)性同樣影響模式的選擇。頁(yè)簽式和矩陣式篩選的可見(jiàn)性比下拉式更高,因?yàn)橛脩艨梢灾苯涌吹胶Y選項(xiàng)。但篩選項(xiàng)一定要讓用戶看見(jiàn)嗎?對(duì)于這個(gè)問(wèn)題,可直接以篩選項(xiàng)的多少去決策(少則可見(jiàn),多則不可見(jiàn)),比如一些B端產(chǎn)品,如果將備選項(xiàng)都全平鋪出來(lái)可能一個(gè)屏幕都放不下,所以只能將所有篩選項(xiàng)收起。但這是一種極端的情況,缺乏說(shuō)服力。
用戶對(duì)備選項(xiàng)是否足夠熟悉?比如對(duì)于一個(gè)尺碼的下拉框,我很清楚自己能選擇什么,但對(duì)于一個(gè)衣服風(fēng)格的下拉框,由于我對(duì)風(fēng)格不熟悉,不能預(yù)判這個(gè)篩選條件能起什么作用,很可能會(huì)將其忽略。

3、選中項(xiàng)的可見(jiàn)性:
選中項(xiàng)的可見(jiàn)性,即當(dāng)我選中某幾項(xiàng)后再次查看選中項(xiàng)的難易程度。

性能


數(shù)據(jù)量大才需要篩選,而數(shù)據(jù)量大必然會(huì)有性能問(wèn)題。在不同場(chǎng)景下,用戶會(huì)發(fā)生不同的行為,對(duì)性能的要求也會(huì)不一樣。我們能經(jīng)常發(fā)現(xiàn)一些篩選模式會(huì)帶有“確認(rèn)”按鈕,當(dāng)用戶設(shè)置完篩選條件后不會(huì)即時(shí)刷新,而需點(diǎn)擊按鈕才能觸發(fā)。而有的篩選模式則沒(méi)有“確認(rèn)”按鈕。這分別對(duì)應(yīng)著兩種不同的場(chǎng)景。
第一種場(chǎng)景,如B端產(chǎn)品中的查詢報(bào)表場(chǎng)景。我需要找出符合條件A、B、C的所有信息,并進(jìn)行對(duì)比分析,那么我就會(huì)設(shè)置篩選條件A、B、C后一并篩選出來(lái),這種情況是一步到位的,我不需要再額外添加條件D或E,所以有“確認(rèn)”按鈕的篩選模式更符合此場(chǎng)景。反而即時(shí)刷新會(huì)在我設(shè)置篩選條件時(shí)造成干擾。
另外一種場(chǎng)景,常見(jiàn)于B端產(chǎn)品中的查詢列表場(chǎng)景。如果我想找到信息α,通過(guò)篩選A后得出10個(gè)信息,那么憑肉眼即可找出信息α,任務(wù)結(jié)束,但如果篩選A后得出1000個(gè)信息,我可能會(huì)再添加篩選條件B、C或D,直到篩出的信息能讓我一眼分辨出信息α。換句話說(shuō),這時(shí)候我的心理模式是即時(shí)滿足的,只要信息縮窄到一定范圍我就會(huì)停止添加篩選條件,否則我會(huì)繼續(xù)添加篩選條件。所以即時(shí)刷新能更符合此場(chǎng)景,但與此同時(shí)就需要考慮到性能問(wèn)題。

另外,我們也可從變更頻次和變更概率這兩個(gè)維度進(jìn)行思考。
變更頻次是指用戶反復(fù)使用篩選的次數(shù),變更概率是指用戶使用篩選的可能性,一般來(lái)說(shuō),高頻次必然大概率,但大概率不一定高頻次。而這兩種情況對(duì)性能的要求是不同的。還是以報(bào)表和列表為例,在列表中,雖然很大概率會(huì)使用篩選來(lái)尋找信息,但由于用戶是即時(shí)滿足的,而且滿足即可,所以不會(huì)重復(fù)變更篩選條件。而在報(bào)表中,雖然用戶會(huì)一次性設(shè)置篩選條件,但需要分析的數(shù)據(jù)不只一種,所以會(huì)高頻更換篩選項(xiàng),回想一下我們?nèi)シ治鲎约寒a(chǎn)品或競(jìng)品的日活月活等數(shù)據(jù)時(shí),是不是會(huì)高頻地切換數(shù)據(jù)來(lái)分析比對(duì)?所以,高頻次的篩選就會(huì)對(duì)性能有更強(qiáng)的要求,而為了避免性能問(wèn)題,往往也會(huì)加上“確認(rèn)”按鈕。
用戶認(rèn)知
最難解決的其實(shí)是用戶的認(rèn)知問(wèn)題,尤其在模式相對(duì)固定的當(dāng)下,讓用戶適應(yīng)并習(xí)慣新的模式并非易事。我們想出一些創(chuàng)新性的篩選模式時(shí),不要忽略用戶的認(rèn)知。



作者:Colar可樂(lè)      來(lái)源:站酷

藍(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)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(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ì)sillybuy.com )是一家專注而深入的界面設(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端和C端的不同

博博

想要了解B端C端不同,那么我們先了解B端是什么

一、B端是什么?

B釋義為:Business(業(yè)務(wù)),顧名思義B端產(chǎn)品更偏重于業(yè)務(wù),偏重于功能的使用,B端設(shè)計(jì)在更加注重對(duì)于使用者的效率,這個(gè)功能是否方便直接達(dá)到目的。B端產(chǎn)品最直接的使用者是企業(yè)或者說(shuō)每個(gè)“小企業(yè)”(班級(jí)、部門團(tuán)隊(duì)等)要做的就是直接幫助他們用更低的成本使他們的效率大大提高。我們目前對(duì)于B端產(chǎn)品最簡(jiǎn)單的理解就是疫情期間火爆的“釘釘”以及各位都熟知的“飛書(shū)”,在我們使用這兩款軟件時(shí),我們就會(huì)發(fā)現(xiàn)這些功能好多面面俱到,“請(qǐng)假、匯報(bào)、簽到”等,不論多小的功能這兩款軟件都有,但是如果是C端的話,一些次要、點(diǎn)擊率低的功能指不定那天就消失了。單從產(chǎn)品角度來(lái)看就能看出B端與C端的區(qū)別,這些顯而易見(jiàn)的B端產(chǎn)品好像多了一絲冷靜但是很體貼的直男,C端就像一個(gè)花言巧語(yǔ)哄著你的playboy(僅舉例子區(qū)分,他們對(duì)于我們來(lái)說(shuō)都是必不可少的產(chǎn)品)就像下面的自我介紹對(duì)比就能明顯的看出哪個(gè)是B端,哪個(gè)是C端。

這些通過(guò)你應(yīng)該已經(jīng)初步了解了什么是B端,那么接下來(lái)我們從更深層次的開(kāi)始了解。

二、B端和C端的不同

B端C端的不同在于哪些呢?

1.用戶:

B端的使用者更多是企業(yè)單位,老板等,需要共同協(xié)作,比如你的上級(jí)領(lǐng)導(dǎo)千里之外就能給你派發(fā)加急任務(wù);我們部門需要一起進(jìn)行這個(gè)需求等,這時(shí)B端產(chǎn)品的特性就體現(xiàn)了,就像現(xiàn)在經(jīng)常有人說(shuō)“只要聽(tīng)到“釘”的一聲”和“紅色閃電”心里就突然揪了起來(lái)。

C端的使用者在于用戶本身,通過(guò)精準(zhǔn)推送直擊用戶痛點(diǎn),增加用戶粘性購(gòu)買度等。

2.場(chǎng)景

B端大多為辦公場(chǎng)景,項(xiàng)目需求、審批等

C端則較為廣泛,某寶買買買,某音看看看!

3.價(jià)值觀

B端的價(jià)值更體現(xiàn)在我們整個(gè)團(tuán)隊(duì)的效率,這個(gè)項(xiàng)目的使用成本,;比如說(shuō)我需要通過(guò)這個(gè)軟件幫助我們整個(gè)團(tuán)隊(duì)的效率提升,大家一起協(xié)作作圖、一起探討。

C端的價(jià)值體現(xiàn)在這個(gè)活動(dòng)這款產(chǎn)品怎樣使用戶更好的體驗(yàn),在使用時(shí)很快樂(lè)的把單下了;比如我們?cè)谀澄镔?gòu)物時(shí),購(gòu)買完成后會(huì)獲得一張3D虛擬卡片,我們的購(gòu)物體驗(yàn)之旅是不是會(huì)極其開(kāi)心,這里就使用了峰終法則(如果用戶在一段體驗(yàn)的高峰處和結(jié)尾處是愉悅的,那么用戶對(duì)這段體驗(yàn)的整體感受就是愉悅的。

4.業(yè)務(wù)導(dǎo)向

B端更注重這個(gè)功能的實(shí)現(xiàn),我在使用這個(gè)功能時(shí)是否可以更高效,更加的去節(jié)省我的使用成本,再設(shè)計(jì)時(shí)我們需要去理解整個(gè)業(yè)務(wù)邏輯、業(yè)務(wù)導(dǎo)向,介于B端產(chǎn)品比較私密,很少有公開(kāi)的,所以比較設(shè)計(jì)起來(lái)難度較為提高。我們我們平常面對(duì)小伙伴B端的問(wèn)題時(shí),如果不去了解他們整個(gè)業(yè)務(wù)流程就很難客觀地去判斷,很容易對(duì)他的指點(diǎn)使他造成一次工作失誤。

C端的業(yè)務(wù)導(dǎo)向,更在于對(duì)于用戶心理、使用體驗(yàn)的拿捏,能讓用戶做到“0”成本學(xué)習(xí),無(wú)腦上手無(wú)腦沖沖沖,就比如你搞優(yōu)惠搞了半天復(fù)雜操作做后才200-10這誰(shuí)不氣?光明正大割韭菜啊。

三、B端C化

我在資料中查閱到未來(lái)的B端的進(jìn)步就會(huì)在“B端產(chǎn)品在使用體驗(yàn)和視覺(jué)感受這兩個(gè)方面和C端產(chǎn)品接近”,B端C化其實(shí)很簡(jiǎn)單,就是將B段專業(yè)性強(qiáng)會(huì)忽略視覺(jué)這一點(diǎn)進(jìn)行補(bǔ)充,B端產(chǎn)品也可以使自己的產(chǎn)品視覺(jué)更加富有沖擊力、3D、情感化、就像一些大廠最近的展示更多的去運(yùn)用了一些3D玻璃質(zhì)感提升B端產(chǎn)品的用戶視覺(jué)體驗(yàn),飛書(shū)也會(huì)制作情感也會(huì)在缺省頁(yè)的時(shí)候用emoj表情對(duì)你體現(xiàn)“話語(yǔ)安慰”是你在使用功能時(shí)不再那么枯燥,釘釘?shù)腎P設(shè)計(jì)同樣也是在拉近與用戶之間的距離,通過(guò)IP讓本就繁瑣的產(chǎn)品得到心情的愉悅,這都是在進(jìn)一步提升B端的情感化,淘寶的功能、抖音的功能更加方便高效其實(shí)也是B端的體現(xiàn),所以我們B C端其實(shí)歸根結(jié)底我們的目標(biāo)服務(wù)都是為了人設(shè)計(jì)的,設(shè)計(jì)也一樣,服務(wù)于人,都是以更加舒適的道路上前進(jìn)。

總結(jié)

其實(shí)B端C端從根本來(lái)說(shuō)不同點(diǎn)很小,因?yàn)槎际菫榱恕叭恕比シ?wù),未來(lái)的發(fā)展也是為了更好的讓我們?nèi)ジ咝У氖褂茫痪秃芟駠?guó)內(nèi)國(guó)外設(shè)計(jì)有什么不同,其實(shí)沒(méi)什么不同,我們?cè)O(shè)計(jì)每一個(gè)項(xiàng)目、每一個(gè)作品時(shí)不管我們是否屬于哪個(gè)國(guó)家,我們的目的也只有一個(gè)“為了讓這個(gè)世界因?yàn)橛辛嗽O(shè)計(jì)而看起來(lái)更美一點(diǎn)!”





作者:小蘆同學(xué)有大腦袋      來(lái)源:站酷



藍(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)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(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ì)sillybuy.com )是一家專注而深入的界面設(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端體驗(yàn)設(shè)計(jì)之列表設(shè)計(jì)

博博

B端中后臺(tái)產(chǎn)品中,列表頁(yè)和表單面占了80%以上的頁(yè)面,以下文章針對(duì)如何設(shè)計(jì)一款好用的B端產(chǎn)品列表頁(yè)進(jìn)行了講解

列表頁(yè)多用于一個(gè)功能的首屏,是一個(gè)功能的數(shù)據(jù)集中載體,它的主要功能就是集中處理、展示、查詢、以及統(tǒng)計(jì)數(shù)據(jù)等。列表頁(yè)一般包含5個(gè)組成部分:標(biāo)題、查詢、操作、統(tǒng)計(jì)以及表格。

一、標(biāo)題


系統(tǒng)中只要是功能,就一定有標(biāo)題,就像只要是個(gè)人,就一定有姓名一樣,標(biāo)題的展示根據(jù)系統(tǒng)的結(jié)構(gòu),可能在面包屑中,可能在標(biāo)簽欄中,也有可能在頁(yè)面容器中。如果標(biāo)題放在容器中,位置一般是固定的,不隨著頁(yè)面滾動(dòng)而滾動(dòng),標(biāo)題字體也要和內(nèi)容字體做區(qū)分,一般是字號(hào)增大或者加粗等方式。



二、查詢

查詢條件的設(shè)計(jì)也是五花八門,根據(jù)查統(tǒng)頁(yè)使用場(chǎng)景大致可以分成兩種:一種是省空間的設(shè)計(jì),一般只需要放一兩個(gè)查詢條件,那么它就可以和操作按鈕放一起,多出現(xiàn)于數(shù)據(jù)字段比少且簡(jiǎn)單的情況;一種是經(jīng)常需要混合高級(jí)查詢,一般會(huì)獨(dú)立有一塊查詢條件模塊,多出現(xiàn)于數(shù)據(jù)統(tǒng)計(jì)類頁(yè)面。

2.1、省空間查詢條件


為了達(dá)到省空間的目的,查詢條件和操作放一行,一般會(huì)只放一兩個(gè)查詢條件,輸入或選擇后即執(zhí)行查詢,不需要單獨(dú)點(diǎn)擊查詢按鈕,這種方式好處就是省空間,缺點(diǎn)是它默認(rèn)展示的篩選項(xiàng)比較少,需要再點(diǎn)擊“更多查詢”才能看到更多。設(shè)計(jì)這種查詢方式需要注意的是,輸入查詢一般是輸入后即執(zhí)行查詢,容易導(dǎo)致執(zhí)行過(guò)于頻繁(輸入一個(gè)字符即執(zhí)行了),因此會(huì)做防抖設(shè)置,可以在輸入0.5s后執(zhí)行。再一個(gè),這種展開(kāi)收起的情況,用戶容易看不到隱藏的篩選,因此需要一些標(biāo)記,比如展示已選擇的數(shù)量。



2.2、獨(dú)立查詢條件


獨(dú)立查詢條件的方式,就是將查詢條件單獨(dú)劃出一個(gè)模塊,可以一次性展示多個(gè)查詢條件。這種方式的好處就是,查詢更便捷,還可以做更多的拓展性方案,如用戶可以自定義高級(jí)查詢方案。缺點(diǎn)就是占空間,對(duì)于小分辨率電腦不是很友好。



三、操作


列表的操作是由產(chǎn)品的功能權(quán)限控制,由權(quán)限決定哪些人能夠使用和查看數(shù)據(jù),下面從操作的類型、組合、操作反饋以及狀態(tài)的角度分析如何設(shè)計(jì)好操作功能。

3.1、類型


操作模塊一般是由一組用于操作表格數(shù)據(jù)的按鈕組,主要分為3種:一種是全局性操作,一種是選擇數(shù)據(jù)進(jìn)行操作,一種是混合型操作。全局性操作(如新增數(shù)據(jù)、導(dǎo)入、導(dǎo)出模板、刷新等)不需要勾選當(dāng)前具體某行數(shù)據(jù),就可以直接點(diǎn)擊操作;選擇數(shù)據(jù)進(jìn)行操作(如刪除、編輯、審批等),即操作前需要至少勾選一條數(shù)據(jù),因?yàn)樗菍?duì)當(dāng)前已存在的數(shù)據(jù)進(jìn)行操作;混合型操作(如導(dǎo)出、更新?tīng)顟B(tài)等),在勾選數(shù)據(jù)的時(shí)候會(huì)對(duì)當(dāng)前數(shù)據(jù)進(jìn)行操作,未勾選數(shù)據(jù)的時(shí)候默認(rèn)會(huì)全部處理或者其他的操作,比如“導(dǎo)出操作”,勾選數(shù)據(jù)時(shí)會(huì)導(dǎo)出已選數(shù)據(jù),未勾選時(shí)則默認(rèn)導(dǎo)出空模板或者導(dǎo)出全部數(shù)據(jù)(根據(jù)具體產(chǎn)品要求)。



3.2、組合


操作組一般會(huì)由一個(gè)或多個(gè)按鈕組成,通常只有一個(gè)主操作(primary)。主操作是帶有引導(dǎo)性的功能,如“新增數(shù)據(jù)”,還有若干個(gè)普通按鈕(default),不帶有引導(dǎo)性。按鈕組還可以根據(jù)操作類型形成組合,以分割線或收納的形式展示,收納按鈕主要有兩種展示形式:一種是帶主操作的收納按鈕(如歸納同類型的操作),一種是直接收納,不帶主操作的(如按鈕太多需要進(jìn)行收起)。操作的順序通常也會(huì)根據(jù)優(yōu)先級(jí)和操作頻次來(lái)決定。



3.3、操作反饋


操作后需要給個(gè)反饋,告知用戶操作結(jié)果,告知結(jié)果分三種情況:1、直接給結(jié)果,如toast提示,操作成功/操作失??;2、給操作建議,如:toast提示,請(qǐng)先勾選至少一條數(shù)據(jù);3、警告提示,如刪除數(shù)據(jù)時(shí)候告知風(fēng)險(xiǎn),二次確認(rèn)防止誤操作。



四、數(shù)據(jù)統(tǒng)計(jì)


數(shù)據(jù)統(tǒng)計(jì)一般是拾取表格數(shù)據(jù)某些維度的統(tǒng)計(jì)結(jié)果,用于快速知曉當(dāng)前所有數(shù)據(jù)的情況,有些統(tǒng)計(jì)還帶交互,比如點(diǎn)擊選中后進(jìn)行數(shù)據(jù)過(guò)濾。



五、表格


市面上封裝好的表格組件可配置api很多,像antd,但是想要做的更強(qiáng)大,還有很多能夠做的細(xì)節(jié),我們先來(lái)分析下表格的組成。表格是由行和列組成的網(wǎng)格數(shù)據(jù),表格可以分2種,明細(xì)表和交叉表,查統(tǒng)頁(yè)中采用的就是明細(xì)表中的橫表,即表頭是橫向的。


5.1、表格設(shè)計(jì)原則


表格的設(shè)計(jì)原則遵循以下幾點(diǎn):數(shù)據(jù)可讀性、展示效率、操作便捷性、以及靈活性等。



5.1.1、數(shù)據(jù)可讀性


表格作為信息密度最大的組件,在設(shè)計(jì)的時(shí)候要考慮數(shù)據(jù)的可讀性,可以從以下幾點(diǎn)入手。

  • 對(duì)齊方式。比較常用的是左對(duì)齊,數(shù)字金額百分比一般是右對(duì)齊,方便百分號(hào)小數(shù)點(diǎn)和千分位的對(duì)齊。如果表格不帶豎向分割線,則表頭也要和表體內(nèi)容對(duì)齊。
  • 斑馬線。尤其是屏幕比較寬的時(shí)候,兩個(gè)字段隔得比較遠(yuǎn),在眼睛移動(dòng)過(guò)程中容易看錯(cuò)行,斑馬線就是解決這個(gè)問(wèn)題,當(dāng)然,如果不嫌麻煩,鼠標(biāo)懸停上去,該行的背景色一般也會(huì)變化。
  • 行高。文字行高一般是字號(hào)大小的1.2-1.8倍。單行文字表格行高一般在32px-56px之間,如果支持換行則換行文字自動(dòng)擠開(kāi)表格行高。
  • 表頭樣式。表頭要和表體在樣式上做區(qū)分,如文字加粗,背景色等。
  • 滾動(dòng)。當(dāng)表體產(chǎn)生滾動(dòng)的時(shí)候需要出現(xiàn)滾動(dòng)條或者在固定列旁邊出現(xiàn)陰影。


5.1.2、展示效率


B端產(chǎn)品尤其是ERP這種數(shù)據(jù)密集程度很高的產(chǎn)品,對(duì)空間的利用要求是很高的,因此在設(shè)計(jì)的時(shí)候要充分考慮展示的效率,可以從行高、列寬等角度去設(shè)計(jì)表的細(xì)節(jié)。我設(shè)計(jì)表的時(shí)候習(xí)慣先跟產(chǎn)品討論清楚每個(gè)字段大概的長(zhǎng)度,在設(shè)計(jì)的時(shí)候就會(huì)預(yù)留匹配的默認(rèn)字段寬度,比如14號(hào)字體的表格,在展示“創(chuàng)建時(shí)間”字段的時(shí)候,字段寬度不會(huì)超過(guò)170px,我會(huì)留180px的默認(rèn)寬度,既有呼吸感,又不浪費(fèi)空間。最后預(yù)留一個(gè)字段寬度作為auto自適應(yīng),給到個(gè)min最小值,這樣在不同分辨率上能展示相同的效果。


5.1.3、操作便捷性


表格在展示數(shù)據(jù)的時(shí)候往往會(huì)遇到一些問(wèn)題,比如字段顯示不完整,這時(shí)候就需要手動(dòng)支持調(diào)節(jié)列寬,或者懸停tips展示全部?jī)?nèi)容。再比如想要復(fù)制某段內(nèi)容,而文字展示不全,又不支持調(diào)整列寬,這時(shí)候要么在比較常用于復(fù)制的字段后面跟個(gè)“復(fù)制”圖標(biāo),或者懸停出現(xiàn)tips的時(shí)候鼠標(biāo)移上去不會(huì)馬上消失,這樣用戶就能框選文字復(fù)制了。



5.1.4、靈活性


表格設(shè)計(jì)的時(shí)候不一定能覆蓋所有用戶和場(chǎng)景,因此需要預(yù)留一些靈活調(diào)整的空間,下面介紹幾個(gè)常用點(diǎn)。

  • 調(diào)整字段順序。有些產(chǎn)品為了能讓用戶根據(jù)習(xí)慣更靈活地查看內(nèi)容,會(huì)讓用戶直接拖拽表頭進(jìn)行重新排序。
  • 調(diào)整字段寬度。表格內(nèi)容有些長(zhǎng)度是未知的,在使用的時(shí)候發(fā)現(xiàn)信息看不全,因此通過(guò)拖動(dòng)可以快速調(diào)整字段寬度。


5.2、表格元素


表格元素包含了背景、數(shù)據(jù)(文字、圖片、圖標(biāo)、標(biāo)簽、附件等)、序號(hào)、邊框、選擇框、操作項(xiàng)、斑馬線等。這些在設(shè)計(jì)表格的時(shí)候都是設(shè)計(jì)師需要去定義展示形式


5.3、操作列


為什么要單獨(dú)把操作列拿出來(lái)講,因?yàn)椴僮髁械脑O(shè)計(jì)蘊(yùn)含了太多內(nèi)容需要考慮,設(shè)計(jì)師在設(shè)計(jì)的時(shí)候很容易忽略。


5.3.1、形式


目前操作列按鈕主要兩種形式,“圖標(biāo)按鈕”和“文字按鈕”,圖標(biāo)按鈕主要用于比較簡(jiǎn)單易懂的一些常規(guī)操作,優(yōu)勢(shì)是長(zhǎng)度可控,容易對(duì)齊,劣勢(shì)是,有時(shí)候需要懸停上去才知道含義,不夠直接;文字按鈕用的范圍比較廣,簡(jiǎn)單明白,缺點(diǎn)是長(zhǎng)度不可控,不好對(duì)齊。



5.3.2、數(shù)量控制


操作列和復(fù)選框一樣,一般作為固定列,不隨著字段橫向滾動(dòng)。數(shù)量也不可控,根據(jù)業(yè)務(wù)情況,有多有少,因此在做的時(shí)候要解決數(shù)量問(wèn)題,如果全部展示,則勢(shì)必影響內(nèi)容的展示面積,因此設(shè)計(jì)師根據(jù)真實(shí)的操作數(shù)量設(shè)定固定列寬度規(guī)則,操作項(xiàng)超過(guò)一定數(shù)量或一定長(zhǎng)度做“更多”按鈕收納。還有一種展示方式,默認(rèn)不展示,鼠標(biāo)懸停展示該條數(shù)據(jù)需要展示的操作,這樣既可以解決信息展示面積問(wèn)題,又不需要考慮和其他行數(shù)據(jù)的操作對(duì)齊,還不需要定操作列列寬規(guī)則,缺點(diǎn)是,不夠直接,如果不懸停就不知道還有操作項(xiàng)。有的產(chǎn)品干脆直接把操作項(xiàng)去掉,全部采用上面的全局操作,勾選數(shù)據(jù)后執(zhí)行,總之各有各的優(yōu)缺點(diǎn)。



5.3.3、操作狀態(tài)


設(shè)計(jì)師經(jīng)常會(huì)困惑,什么時(shí)候操作禁用,什么時(shí)候隱藏。按鈕隱藏一般根據(jù)數(shù)據(jù)權(quán)限控制,“隱藏”通常是角色無(wú)該操作權(quán)限的時(shí)候采用,“禁用”通常是由于數(shù)據(jù)本身的問(wèn)題導(dǎo)致暫時(shí)性失效。舉例個(gè)例子,組織架構(gòu)的頁(yè)面,管理員對(duì)所有組織架構(gòu)和成員有編輯和刪除權(quán)限,而普通員工只能查看數(shù)據(jù),這時(shí)候操作按鈕就需要隱藏。再比如訂單功能,有的訂單已經(jīng)進(jìn)入審批環(huán)節(jié)不可刪除,那么它的刪除按鈕就會(huì)變成禁用,而有的訂單還未進(jìn)入審批環(huán)節(jié),這時(shí)候是允許刪除的,這時(shí)候刪除按鈕就會(huì)亮起。


5.4、分頁(yè)器


數(shù)據(jù)量比較大的時(shí)候會(huì)用上分頁(yè)器,設(shè)計(jì)師在設(shè)計(jì)的時(shí)候也要定好默認(rèn)一頁(yè)幾條,不然開(kāi)發(fā)就會(huì)根據(jù)自己的臆想來(lái)做。分頁(yè)器位置的設(shè)計(jì)也分兩種,在表格上方和表格下方,市面上看到的大部分都是在下方。放在下方就有個(gè)問(wèn)題了,是要固定頁(yè)面位置還是隨著表格自動(dòng)計(jì)算位置?我對(duì)比了幾個(gè)比較成熟的產(chǎn)品,大部分都是固定在底部,不隨著頁(yè)面滾動(dòng),整個(gè)頁(yè)面滾動(dòng)的區(qū)域只有表身,有小部分是跟在表格尾部,每頁(yè)條數(shù)超過(guò)屏幕高度可展示量,分頁(yè)器就會(huì)被擠到下面看不見(jiàn),這種好處就是省了一點(diǎn)展示空間,不好的地方就是,要想再使用分頁(yè)器得往下找。還有極小部分產(chǎn)品兼容了這兩個(gè)方案,當(dāng)條數(shù)少的時(shí)候跟在表格尾部,當(dāng)條數(shù)多的時(shí)候,會(huì)頂在底部,類似固定釘功能。總之不管采用哪種方案,都要兼顧便捷性和易用性。



5.5、表頭


5.5.1、表頭篩選


表頭篩選平時(shí)用的比較少,因?yàn)橥饷嬉呀?jīng)有獨(dú)立的篩選功能,有些也放出來(lái),補(bǔ)充一些不常用的篩選。



5.5.2、表頭排序


排序規(guī)則主要由產(chǎn)品提供,設(shè)計(jì)需要知道一下。一般默認(rèn)是以產(chǎn)品的創(chuàng)建時(shí)間為排序,排序不帶具體業(yè)務(wù)含義的一般采用時(shí)間倒序,最新數(shù)據(jù)在表格最上面,這樣每次新增數(shù)據(jù)就可以快讀看到,不用劃到最后面甚至翻頁(yè)后才能看到。有的采用時(shí)間正序,最新的數(shù)據(jù)在最后面,這種一般是數(shù)據(jù)本身帶有排序?qū)傩?,如果貿(mào)然在最上面插入數(shù)據(jù)會(huì)打亂已設(shè)定好的順序,這種帶排序?qū)傩缘谋砀?,往往還有調(diào)整順序的操作。觸發(fā)排序一般只需要點(diǎn)擊表頭即執(zhí)行,通常點(diǎn)一次會(huì)進(jìn)行正序/反序,再點(diǎn)一次會(huì)反過(guò)來(lái),再點(diǎn)一次取消排序。如果點(diǎn)另一個(gè)字段的排序則默認(rèn)會(huì)采用最新的排序字段。



5.5.3、表頭提示


有些比較難懂的字段需要在表頭增加一個(gè)提示信息,來(lái)輔助用戶理解字段含義



5.6、表格配置解決方案


前面講了表格的各種屬性,為了使用的靈活性,有些成熟的產(chǎn)品會(huì)設(shè)計(jì)一個(gè)設(shè)置表格屬性的功能,可以讓用戶自定義表格屬性,如字段展示(篩選)、字段順序、字段對(duì)齊方式、字段固定列、是否展示序號(hào)、斑馬線等。事情有利必有弊,靈活也意味著學(xué)習(xí)成本高和投入開(kāi)發(fā)成本大,是否需要做有各自的真實(shí)情況決定,不過(guò)作為設(shè)計(jì)師得知道,這些就是你能雕琢的地方。



六、額外功能


還有一些額外的設(shè)計(jì)過(guò)程中你不一定會(huì)注意到但挺好用功能推薦。


6.1、只看已選


在選擇數(shù)據(jù)的時(shí)候,為了便于一眼看到選中的數(shù)據(jù),會(huì)做這個(gè)么個(gè)操作。



6.2、已選數(shù)量


表格的選擇,默認(rèn)一般是不支持跨頁(yè)選擇的,所以產(chǎn)品或者設(shè)計(jì)需要要求開(kāi)發(fā)支持跨頁(yè)選擇,而一旦支持跨頁(yè)選擇,就容易忘了到底選了多少條,因此會(huì)展示選中條數(shù),以及一鍵清空選中,這個(gè)功能還可以和“只看已選”功能混合著用。



6.3、只看表頭


對(duì)于有些帶明細(xì)數(shù)據(jù)的表單,通常在表單中會(huì)分表頭和明細(xì)(表身),舉個(gè)例子,商品訂單中會(huì)包含一些像訂單編號(hào)、客戶名稱、發(fā)貨時(shí)間、發(fā)貨地址等等這種,叫做表頭。像具體的明細(xì)數(shù)據(jù),如訂單中包含100個(gè)a商品,200個(gè)b商品等等,叫做明細(xì)(表身),因此在列表功能展示的時(shí)候有時(shí)候需要一眼看出明細(xì)數(shù)據(jù),就會(huì)以表身明細(xì)數(shù)據(jù)為主數(shù)據(jù)展示,但是數(shù)據(jù)量會(huì)蹭蹭往上,因此用戶可能會(huì)選擇是按“表頭”數(shù)據(jù)展示還是按“表頭+明細(xì)”數(shù)據(jù)展示。



七、總結(jié)


列表頁(yè)承載了一個(gè)b端系統(tǒng)半壁江山,設(shè)計(jì)師在設(shè)計(jì)過(guò)程中需要不斷打磨,設(shè)計(jì)出符合自己產(chǎn)品特性的列表。





作者:落難的黑人      來(lái)源:站酷



藍(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)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(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ì)sillybuy.com )是一家專注而深入的界面設(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è)人資料

存檔