首頁

用戶體驗|我研究的三招,應(yīng)對用戶的回避小心思

seo達(dá)人



00.【前言】

圖片

現(xiàn)在我們在目標(biāo)導(dǎo)向流程的第一個部分:研究

我是從0開始、系統(tǒng)講解用戶體驗設(shè)計方法的CC~

 

01.【為什么會得到錯誤的反饋】

用戶做出錯誤反饋的原因:

大概會分為這幾類情況。

從心理學(xué)角度舉幾個例子來分析一下:

 

舉例一:

當(dāng)別人穿著新買的衣服,興高采烈的詢問你,“你覺得我這身衣服好看嗎?”

通常出于作為一個自認(rèn)為情商還可以的社交人類而言,哪怕這件衣服在自己看來并不是很喜歡,我們依然會表達(dá)出贊賞。

不論是出于禮貌,還是為了促進(jìn)關(guān)系良好的發(fā)展,我想很少有人會直接坦蕩的說,你這件衣服真丑吧。

有些非常的善良的用戶,在調(diào)研過程當(dāng)中,也會出于考慮到我們產(chǎn)品開發(fā)者的面子而忽視自己真實的想法。

 

舉例二:

我們在學(xué)生時代,老師提出一個問題,“大家都理解了嗎?”有些人明明似懂非懂,但依然會逞強(qiáng)的說出“我理解了”這四個字,也是為了掩飾自己的想法,維護(hù)自己的面子工程。

用戶也一樣,他們有可能為了維護(hù)自己的形象或不好意思表達(dá)自己的想法,說出違心的結(jié)論。

 

舉例三:

參加過教師資格證的小伙伴應(yīng)該都知道,在教師面試的時候,有一個試講的環(huán)節(jié)。需要當(dāng)場對抽到的考題進(jìn)行備課和試講。

通常我們在家里準(zhǔn)備考題的時候都可以非常流利的進(jìn)行演練,但到了考試當(dāng)天,進(jìn)到考場當(dāng)中我們又總會緊張到不知道該說什么。

【在陌生環(huán)境下,我們經(jīng)常會覺得不知所措?!?

同時面對陌生的人,很多人也很難真實的表達(dá)自己的想法。

我們的用戶也一樣。

 

02.【我們應(yīng)該怎么做?】

我自己總結(jié)了三種應(yīng)對問題的方法。

 

方法一:關(guān)系培養(yǎng)法

善良的用戶是最好溝通的。

想象一下,對我們的真心朋友,在他真心想得到我們認(rèn)真的反饋的時候,我們是否可以說出逆耳的忠言?

嘗試把用戶當(dāng)作我們的朋友,以一個向好友真心詢問意見的語氣和用戶交流,整個過程不用很正式,告訴他我們只是單純的朋友間的閑聊和吐槽,真誠的去訪談。

善良的用戶更能說出發(fā)自內(nèi)心的想法。

 

方法二:路人觀察法

對于不愿意談?wù)撍麄冸y以理解產(chǎn)品行為的用戶,我們不必過分強(qiáng)調(diào)訪談的重要性。

通常急切的追問對這類用戶而言,更容易產(chǎn)生逆反心理。

我們可以采用路人觀察的方法,在公開場合不著痕跡的觀察這類用戶的具體行為。

有人會疑惑,這說的很輕松,怎么才能不著痕跡的觀察呢?

提供一個小的思路,我們可以收集用戶頁面停留的時間,點擊的次數(shù),甚至眼動的頻率,又或者觀察用戶的微表情,來分析用戶對于當(dāng)下產(chǎn)品的理解情況。

當(dāng)然這是B端產(chǎn)品,如果是適合公共場合使用的產(chǎn)品,可以直接將自己作為一個周邊的普通用戶,輕松的觀察身邊其他用戶的行為。

 

方法三:情景營造法

選擇用戶熟悉的場景,最好是每天辦公的辦公場所,讓周圍充斥著熟悉的日常用品,在自己把控范圍內(nèi)的環(huán)境來進(jìn)行訪談,更能夠讓用戶有把握感,主動的表達(dá)出想法。

就像我們在自己家里接待客人,遠(yuǎn)比去別人家做客感覺來的輕松。

如果用戶工作場地有限制,必須選在陌生的環(huán)境,那我們也注意不要選擇看起來就很嚴(yán)謹(jǐn),很正式的實驗室場所,容易增加用戶的焦慮感。

 

小思考  提一個小思考:【你知道怎么樣準(zhǔn)確的定位自己的訪談目標(biāo)嗎?】下節(jié)我們聊這個。

 

原文地址:達(dá)芬奇的火柴盒(公眾號)

作者:CC本人

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》用戶體驗|我研究的三招,應(yīng)對用戶的回避小心思

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

截屏2021-05-13 上午11.41.03.png

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

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



為你解密設(shè)計中的節(jié)奏感!

資深UI設(shè)計者

、

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

文章來源:站酷   作者:美工美邦

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

如何做好數(shù)據(jù)可視化

資深UI設(shè)計者

在如今這個時代,越來越多的信息和內(nèi)容呈現(xiàn)開始依賴數(shù)據(jù)驅(qū)動,也開始有更多的場合需要信息圖來輔助呈現(xiàn),對于可視化數(shù)據(jù),從來沒有像現(xiàn)在的要求這般高。但是另一方面,我們周圍充斥著大量錯誤的圖表呈現(xiàn),希望這篇文章提供的 20 條建議能夠幫你設(shè)計出更好的信息圖。

1、選擇正確的圖表類型

不同的圖表類型所承擔(dān)的功能是截然不同的,不合理的數(shù)據(jù)呈現(xiàn)會容易讓用戶誤讀。同樣的數(shù)據(jù)可以使用不同的圖表呈現(xiàn)出不同方面的特征,因此,在設(shè)計信息圖之前,先理清需求,再來選擇使用哪種圖表能夠更好地呈現(xiàn)。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

2、根據(jù)數(shù)據(jù)的正負(fù)值選擇正確的繪圖方向

當(dāng)使用數(shù)據(jù)在0的左右波動,產(chǎn)生正負(fù)差異的時候,請使用基線來正確反應(yīng)正負(fù)關(guān)系,不要在同一側(cè)來呈現(xiàn)數(shù)據(jù),這樣很容易帶來誤讀。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

3、始終從0處開始繪制條形圖

和折線圖不同,條形圖如果從非 0 的位置開始,確實更容易反應(yīng)趨勢,但是給所體現(xiàn)的數(shù)據(jù)量級和特征是失真的。比如在下面的案例中,B看起來是D的3倍以上,但是實際的情況是,兩者差異并不大。所以需要從座標(biāo) 0 處開始呈現(xiàn)數(shù)據(jù),這樣會更準(zhǔn)確。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

4、折線圖應(yīng)該清晰呈現(xiàn)Y軸上的趨勢變化

對于折線圖,需要考慮一下 Y軸上的尺度,因為如果單位太大,那么折線圖所呈現(xiàn)出來的波動幅度不夠大,趨勢的表達(dá)也不夠清晰。這個時候,建議調(diào)整Y軸上的單位大小,確保折線的波動幅度大概占整個Y軸的 2/3 即可。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

5、使用折線圖的時候注意時間

折線圖是使用線條連接特定時間節(jié)點的特定數(shù)據(jù)的一種數(shù)據(jù)呈現(xiàn)形式,它有助于說明隨著時間推移,某些情況的變化,但是當(dāng)間隔時間頻率不對,參差,缺失,那么折線圖的數(shù)據(jù)可能會無法對應(yīng),這個時候使用條形圖其實是更容易呈現(xiàn)的。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

6、不要使用平滑的折線圖

平滑的「折線」在視覺上看起來是愉悅,但是它歪曲了背后的實際數(shù)據(jù),也很難讀到關(guān)鍵的轉(zhuǎn)折點數(shù)據(jù)。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

7、避免讓雙折線互相交叉

通常,為了為了節(jié)省可視化設(shè)計的空間,設(shè)計師會采用雙折線來呈現(xiàn)數(shù)據(jù),但是在數(shù)量級不對等的情況下,折線圖會很難讀,甚至容易會誤導(dǎo)用戶,這個時候,建議分開使用2個不同的座標(biāo)系來呈現(xiàn),更加易讀,同樣可以看的出趨勢,也不會得出錯誤的結(jié)論。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

8、限制餅圖中的扇形的數(shù)量

餅圖是最常用但是也是最容易誤用的圖表之一,在絕大多數(shù)的情況下,條形圖是更好的選擇。如果你決定使用餅圖,那么這里有2個基本的建議:

不要超過7個不同的扇區(qū),讓餅圖盡量簡單
你可以將額外的片段分組到「其他」的扇區(qū)中

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

9、在餅狀圖中直接標(biāo)注對應(yīng)的數(shù)據(jù)

沒有合適的文本標(biāo)簽說明的情況下,無論信息圖設(shè)計得多好都沒有意義,直接在圖表上進(jìn)行明確的標(biāo)識,才會對觀看者產(chǎn)生價值,需要觀看者自己去關(guān)聯(lián)的設(shè)計是失敗的。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

10、不要在扇面上做標(biāo)注

不要將數(shù)值直接放置在餅狀圖的扇區(qū)上,在較小的扇區(qū)塊上數(shù)據(jù)會非常難讀,相反,使用引線來指引數(shù)據(jù)對應(yīng)的區(qū)塊會是更好的方法。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

11、控制餅圖中扇面的排序讓其方便閱讀

對于餅狀圖的切分方式,有2種常見的順序:

將最大的一塊置于12點鐘方向,然后順時針按照大小來排布所有的塊
將最大的一塊置于12點鐘方向,然后在右邊放次大的塊,右邊放置再次的塊,基本上就是越大的扇區(qū)約靠上。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

12、避免隨機(jī)排列

同樣的建議也適用于其他的圖表,不要使用字母順序來進(jìn)行排列,不要使用筆畫排序,而是按照數(shù)據(jù)大小來進(jìn)行排列,水平條形圖就將最大數(shù)據(jù)放在頂部,垂直排布則將最大數(shù)據(jù)的放在左側(cè),減少閱讀的時候的信息分辨的障礙。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

13、不要犧牲信息圖的可讀性

餅狀圖通常是最不容易讀的圖表,因為它很難對相似的數(shù)據(jù)進(jìn)行對比,所以在將它設(shè)計成環(huán)狀的時候,我們可以使用輔助的數(shù)據(jù)來呈現(xiàn),但是一定不要犧牲彩色扇區(qū)的可讀性,這樣看起來高級但是并不具備基本的可讀性。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

14、視覺效果不要影響數(shù)據(jù)的呈現(xiàn)

不要讓不必要的視覺效果來分散用戶的注意力,這可能會導(dǎo)致用戶對于數(shù)據(jù)產(chǎn)生誤解,通常你應(yīng)該避免使用:

3D元素和陰影
漸變和失真的色彩
斑馬紋或者過多的網(wǎng)格線
裝飾性過強(qiáng)的字體

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

15、選擇和數(shù)據(jù)屬性匹配的配色

配色是可視化設(shè)計當(dāng)中繞不開的一個重要的部分,在設(shè)計的時候可以考慮以下三種不同的配色方案:

使用定性的配色方案,不同的色相對應(yīng)不同的元素,確保在整體配色的可訪問性
使用符合一定順序(比如明暗)的近似色的配色,呈現(xiàn)出一種連續(xù)的色彩變化
橫跨冷暖色調(diào)的配色方案,將中性色置于中間,用來呈現(xiàn)存在正負(fù)關(guān)系的數(shù)據(jù)變化

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

16、使用無障礙的配色

根據(jù)目前的統(tǒng)計數(shù)據(jù),大概 12 人當(dāng)中有一個人存在視覺障礙,有的是色盲,有的是色弱。你的圖表設(shè)計需要確保兼顧到這一部分用戶的需求。

在配色方案當(dāng)中使用不同飽和度和明暗的色彩
使用去色效果來校驗?zāi)愕呐渖膶Ρ榷?

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

17、關(guān)注內(nèi)容的易讀性

在信息圖的排版易讀性上同樣是有要求的,要避免分散用戶的注意力,不會制造視覺障礙:

選擇清晰的非襯線字體,避免使用襯線體和過度裝飾的字體
避免使用斜體、粗體和全大寫字體
確保和背景之間的信息對比度
不要旋轉(zhuǎn)文本

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

18、使用水平條形圖來優(yōu)化傾斜標(biāo)簽

這是一個非常簡單的技巧,能夠確保用戶在閱讀的時候足夠輕松,不會因為傾斜的文本扭傷脖子或者加重落枕的癥狀。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

19、事先選好你的圖表庫

如果你的設(shè)計項目是面向 Web 或者移動端的交互式圖表,那么你需要考慮的第一個問題就是,要用什么樣的圖標(biāo)庫。如今不同的圖表庫在功能模塊和規(guī)則上各不相同,你需要在一開始就基于你的需求和設(shè)計想法,做出選擇。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

20 、不只停留在在數(shù)據(jù)靜態(tài)呈現(xiàn)上

信息圖本質(zhì)上是在對數(shù)據(jù)進(jìn)行優(yōu)化處理、呈現(xiàn)的基礎(chǔ)上,幫助用戶進(jìn)行探索,最大化地從數(shù)據(jù)中獲得信息洞察,讓數(shù)據(jù)發(fā)揮價值。在下面的 iOS Health 應(yīng)用就是在最大程度地反映數(shù)據(jù)應(yīng)有的意義和功能。

想把數(shù)據(jù)可視化做好?這 20 個超實用的經(jīng)驗總結(jié)一定要先看過!

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

文章來源:優(yōu)設(shè)   作者:Taras Bakusevych

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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




vue-cli@3添加sass(vue項目模板封裝系列)

前端達(dá)人

前言

上一期分享了如何在vue-cli3的框架中,封裝mixins,module 。本期將分享如何在vue項目中添加sass
在這里插入圖片描述

GitHub項目地址:https://github.com/jiangjiaheng/web-template

關(guān)于sass

本文默認(rèn)你對sass有一定的了解,并且閱讀過相關(guān)的官方文檔,因此本文就不在贅述關(guān)于sass的基礎(chǔ)知識。

在這里插入圖片描述
sass官方文檔:https://www.sass.hk/

添加方式

1. 創(chuàng)建項目時選擇預(yù)處理器sass

$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features 
  • 1
  • 2
  • 3
  • 4

移動上下鍵選擇Manually select features:手動選擇創(chuàng)建項目的特性。

顯示如下:

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

移動上下鍵在CSS Pre-processors,按提示點擊空格鍵選擇CSS-processors。

顯示如下:

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
  LESS
  Stylus 
  • 1
  • 2
  • 3
  • 4

選擇第一個SCSS/SASS作為我們的CSS預(yù)處理器。

完成后項目會幫我們安裝sass-loader node-sass。

2. 手動安裝sass-loader

如果在創(chuàng)建項目沒有選擇CSS預(yù)處理器,我們也可以手動安裝sass-loader node-sass來集成scss

npm install -D sass-loader node-sass 
  • 1

使用

完成添加后,我們只需要在style指定langscss即可,無須多余操作:

<style lang="scss" scoped>
$color: red;

h1 {
  color: $color;
}
</style>




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

文章來源:csdn

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

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

Vue報錯Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.解決方案

前端達(dá)人

錯誤提示:


  1. ERROR Failed to compile with 1 errors 下午6:51:57
  2. error in ./src/views/Login.vue
  3. Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
  4. at getSassImplementation (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\utils.js:77:13)
  5. at Object.loader (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\index.js:34:59)
  6. @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-26084dc2","scoped":true,"hasInline
  7. Config":false}!./node_modules/_sass-loader@9.0.3@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue 4:14-389
  8. 13:3-17:5 14:22-397
  9. @ ./src/views/Login.vue
  10. @ ./src/router/index.js
  11. @ ./src/main.js
  12. @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 解決方案:

找到問題所在:Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

這個問題是因為Sass的版本過高導(dǎo)致,所以根據(jù)提示將版本改為對應(yīng)的版本就可以了,我這里是改為4.0.0版本。

下面是怎么改版本:

1.首先在IDE中找的package.json文件:

2. 然后打開該文件找到“sass-loader”,后面跟著的便是你現(xiàn)在的版本,根據(jù)提示將其改為對應(yīng)版本即可 :

3.在Terminal(終端)中輸入:cnpm install(注意用cnpm 淘寶的鏡像,用npm可能會下載不成功)

 4.運(yùn)行成功:npm run dev


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

文章來源:博客園

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

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

2021-2022設(shè)計趨勢ISUX報告·社交APP篇

seo達(dá)人



互聯(lián)網(wǎng)社交發(fā)展方向

先來看看技術(shù)發(fā)展和現(xiàn)階段人口結(jié)構(gòu)的變化對線上社交有什么影響。

技術(shù)上:

2G時代的社交實現(xiàn)了跨地域聊天,用戶可以在QQ里和天南地北的人聊天,強(qiáng)調(diào)在線狀態(tài)。QQ號是用戶社交虛擬身份的id,是用戶自我創(chuàng)造的線上人設(shè)。2G時代的社交尋求更為方便的溝通方式。

3G進(jìn)入了移動社交,著名風(fēng)投公司合伙人約翰·杜爾提出SoLoMo概念(社交化、本地化、移動化)。用戶可以基于位置進(jìn)行交友,比如附近的人;基于行為匹配,比如微信搖一搖。沒有在線狀態(tài),可以隨時隨地的聯(lián)系,隨時在朋友圈獲取對方線下的生活狀態(tài)。

4G時代,手機(jī)硬件、大數(shù)據(jù)和AI的發(fā)展,大大提升了匹配的效率,高效地建立潛在社交關(guān)系。不論是看臉社交還是靈魂匹配,都能在很短時間內(nèi)找到合適的人聊天。信息傳輸越來越快,溝通互動的方式不斷革新,用戶從文字、圖片聊天進(jìn)而習(xí)慣于實時語音和視頻。

隨著5G到來,高帶寬互聯(lián)網(wǎng)、云、AR/VR/MR的高速發(fā)展,視頻作為主要的信息和溝通載體變得日益普及,疫情讓在線溝通和協(xié)作越來越方便,更多的線下社交場景轉(zhuǎn)移到線上,線上社交的頻次大大增加的同時,副作用也開始呈現(xiàn),社交隔離讓人們感到更孤獨,對云社交的需求愈發(fā)強(qiáng)烈。

 

人口結(jié)構(gòu)變化:

獨生子女群體在80年代出現(xiàn),但由于父母輩基本是有數(shù)量較多的親兄弟姐妹,因此第一代獨生子女的同輩中有較多的表兄弟姐妹或堂兄弟姐妹互為玩伴。而由第一代獨生子女繁衍出的第二代獨生子女,也就是現(xiàn)在的大部分00后,家庭規(guī)模越來越小,親屬同輩越來越少,加上人口流動頻繁,少有的親屬同輩也較為疏遠(yuǎn)。

00后這一階段的出生率跌至了最低點,平時家庭、學(xué)校二點一線的生活,繁重的課業(yè)負(fù)擔(dān),原本在親屬同輩圈的社交就少,在學(xué)校的熟人同輩圈的社交也越來越少。

 

 

2018年發(fā)布的《00后來襲-騰訊00后研究報告》中說到,“75%的00后渴求有更多的時間跟同伴在一起”。00后在現(xiàn)實生活中缺失的同輩圈社交,更有強(qiáng)烈的訴求去互聯(lián)網(wǎng)上尋找。他們有著更為復(fù)雜的社交需求,通過與同輩圈的互動,建立同輩伙伴關(guān)系,從中獲得陪伴感、歸屬感和自我認(rèn)同,形成自我認(rèn)知。

回顧這幾年社交的變化,技術(shù)讓社交體驗從“線上線下割裂”向“虛擬空間映射真實世界”發(fā)展,00后的線上社交需求更加強(qiáng)烈,我們?nèi)绾谓庾x用戶、解讀人群,尋找他們的需求痛點。接下來,本文從自我展示、匹配連接、溝通互動的社交體驗路徑來探討社交的設(shè)計趨勢和特點。

 

最初的互聯(lián)網(wǎng)社交身份是簡單的虛擬身份ID:虛擬頭像、昵稱、個性簽名、QQ秀,當(dāng)時的社交體驗線上和線下完全割裂,用戶的自我展示強(qiáng)調(diào)純線上人設(shè)打造。隨著硬件設(shè)備和圖像技術(shù)發(fā)展,用戶慢慢豐富社交資產(chǎn),用真實身份交友,高清美顏自拍、沙雕表情包和聲音名片,線上的自我展示與線下生活緊密聯(lián)系。而現(xiàn)在,更多人用虛擬形象代表自己,技術(shù)的進(jìn)步讓虛擬形象的展示更完美、更逼真。

 

1-1 真實身份展示從單一趨向于全面

用戶在展示自我的時候往往需要填寫大量文字信息和傳輸多張精修過的照片,導(dǎo)致編輯成本高、瀏覽效率低。視頻化的普及讓用戶隨時隨地記錄自己,在這種沉浸式的自我展示中,身份信息傳達(dá)更加有效和真實,也進(jìn)一步放大用戶的自我炫耀感。

Feels的個人資料由全屏照片、視頻、問答組成,用story的交互方式進(jìn)行瀏覽。

 

1-2 從聲音名片到聲音形象,更加賦予了情感和靈魂

語音的優(yōu)點在于比文字傳輸效率高,一篇完整的文字自我介紹用語音三言兩語就說完了。而語音的缺點是無法在嘈雜的公共環(huán)境中使用,所以老年人最愛用語音,因為他們私人空間較多。疫情讓人們大大減少了旅游和外出娛樂,享受個人空間的時間變多了,從而縮小了語音使用環(huán)境受限的缺點,放大了傳輸效率的優(yōu)點。在今年,出現(xiàn)大量語音房社交,語音從“蘿莉音”“正太音”的聲音社交名片變成展示個人形象的方式。

Clubhouse帶來語音社交熱潮,F(xiàn)acebook、Twitter也相繼上線語音房hotline和Spaces,用戶可以找到一個感興趣的主題房進(jìn)行聊天或圍觀,那些通過短短幾分鐘發(fā)言就吸粉的高質(zhì)量用戶,通過聲音賦予了個人的情感和有趣的靈魂。

Reddit Talk 

 

1-3 從“我是誰”到“我們的關(guān)系”

展示自我除了從展示者的角度來設(shè)計“如何更好的展示社交資產(chǎn)”外,也要從看的人的角度考慮“如何更好地了解他”。

ios15從spotlight輸入聯(lián)系人的名字,對方個人信息會智能拉取你們相關(guān)聯(lián)的信息,包括最近的聊天、共享的位置和照片。

 

Snapchat能根據(jù)生日、出生時間、地點生成個人星座運(yùn)勢和個性,還能和好友進(jìn)行星座合盤。通過個人資料之間的交互,強(qiáng)化雙方身份的情誼特點。

 

1-4 虛擬和真實之間,越來越強(qiáng)調(diào)“真實”

虛擬形象的概念不新鮮了,2003年QQ秀是虛擬形象的雛形,Y世代網(wǎng)民根據(jù)自己的喜好拼出屬于自己的QQ秀形象,用于QQ聊天時的自我形象炫耀和情感表達(dá)。Z世代逐漸成為互聯(lián)網(wǎng)的主力軍時,他們的個性習(xí)慣和獨特的表達(dá)方式讓虛擬形象在社交中的使用需求愈發(fā)強(qiáng)烈。《Z世代圈層消費大報告》提出z世代五大典型興趣圈層為:電競、國風(fēng)、二次元、模玩手辦、硬核科技。Z世代已經(jīng)從他們的興趣中建立了對虛擬形象的情感,興趣成為他們建立自我人設(shè)的重要手段,他們跳出固定人設(shè),在不同興趣圈層展示多樣個性,使用特定沖浪語,以此獲得歸屬感和認(rèn)同感。

高新技術(shù)的發(fā)展讓虛擬形象變得越來越高質(zhì)量。蘋果的Memoji、Snapchat的Bitmoji和Facebook的avatars讓虛擬形象成為自己的化身,用于個人資料展示以及聊天表情包、合照、視頻互動等場景。Snapchat最新的資料設(shè)計中展示了3DBitmoji。

 

依靠面部捕捉、表情捕捉、動作捕捉的技術(shù),實現(xiàn)了真人與虛擬形象的動態(tài)同步,降低了真人化虛擬形象的設(shè)置成本。在SXSW2021音樂節(jié)上,展示了Facebook新avatar系統(tǒng)推出的VR社交應(yīng)用Horizon。人與人能通過虛擬形象進(jìn)行實時互動,除了有自己逼真的形象外,還具備真實的眼神表情和肢體動作,還會根據(jù)肢體動作變化不同情緒。

 

大數(shù)據(jù)和人工智能時代,融合了AI技術(shù)的虛擬形象也在近幾年層出不窮。與真人虛擬形象不同的是,它不受對方在線的限制,能隨時進(jìn)行實時互動,來滿足用戶對陪伴和娛樂的需求。麥當(dāng)勞推出一位唱跳型愛豆的虛擬形象,她可以和小朋友進(jìn)行溝通互動,一起跳舞,跟小朋友講故事,增加與消費者之間玩伴、陪伴關(guān)系。

 

麥當(dāng)勞虛擬偶像“開心姐姐”

用戶在社交網(wǎng)站分享動態(tài),維系自己的人設(shè),獲得群體的存在感和認(rèn)同感。在未來,這些記錄和創(chuàng)作的內(nèi)容是否會形成自己的虛擬空間?每一個人不同的故事動態(tài)與空間產(chǎn)生聯(lián)系,形成自己獨有的虛擬空間社交資產(chǎn)。

 

1-5社交人格從「完美人設(shè)」到「透明人設(shè)」

隨著好友列表數(shù)量增多,很多人開始逃離朋友圈,人們在朋友圈的人設(shè)經(jīng)營也越來越謹(jǐn)小慎微,開始疲于“完美”人設(shè)的表達(dá),社交產(chǎn)品開始減壓。正如越來越多的年輕服裝品牌進(jìn)行的「透明商品運(yùn)動」,他們在品牌宣傳時,將商品從生產(chǎn)到制作的全過程透明化公開給消費者?!竿该魅嗽O(shè)」是反對當(dāng)今社交信息流充斥著的完美人設(shè),鼓勵自我展示更加真實和未經(jīng)編輯。

Dispo復(fù)古相機(jī)拍攝后需要24小時才出片,并且沒有任何美圖的編輯工具。傳達(dá)現(xiàn)實生活中不完美的時刻也是值得捕捉和分享的。

 

Poparazzi能連續(xù)拍照變成GIF進(jìn)行分享,同樣也傳達(dá)未經(jīng)過編輯的更真實的自我展示。用戶用emoji進(jìn)行互動,僅展示動態(tài)收到的emoji表態(tài)數(shù)量。

 

你是否會因為動態(tài)無人互動而焦慮?是否會因為很久不更新動態(tài)而失去展示的動力,慢慢社恐?instagram和Facebook允許用戶隱藏帖子的贊數(shù),來減輕用戶的壓力和焦慮。

 

 

2-1 匹配趨向于多元化

調(diào)查發(fā)現(xiàn),現(xiàn)實中兩位互不相識的陌生人要花50小時,才可以在路上叫出對方名字,再投入40小時,才能蛻變?yōu)檎嬲挠亚??;ヂ?lián)網(wǎng)幫助用戶高效匹配,縮短認(rèn)識的時間,降低認(rèn)識的成本。

近幾年,用戶的喜好正在極速分裂和細(xì)化?!?0后來襲-騰訊00后研究報告》表明73%的00后會主動地獲取資源來發(fā)展自己感興趣的領(lǐng)域。由于現(xiàn)實中同輩社交圈狹窄,他們需要在互聯(lián)網(wǎng)的社交陣地上尋找更垂類的興趣伙伴,比如云學(xué)習(xí)伙伴、游戲玩伴、coscp等,線上社交在不斷垂直細(xì)分以便更快捷的連接同輩伙伴。

隨著傳輸速度的發(fā)展,匹配連接的體驗具有更實時的交互和面對面的互動體驗。Distance Disco是一款云蹦迪平臺,疫情期間,大家在各自房間里通過在線視頻就能開啟一場線上舞會,結(jié)識一起蹦迪的朋友。界面上的視覺元素和色塊會隨著音樂節(jié)奏變化,增強(qiáng)迪斯科的互動氛圍。

Honk匹配陌生人聊天的動畫,傳達(dá)了穿越了人山人海,遇見了你的感覺。頭像出現(xiàn)時,出現(xiàn)招手動畫,像是剛剛見面的人招手打招呼。、

 

 

2-2 匹配提升安全感和隱私保護(hù)

現(xiàn)實生活中我們都有意識地保護(hù)自己的隱私,而到了互聯(lián)網(wǎng),卻容易放下戒心將自己的信息分享給他人,線上社交會放大陌生人有趣、友善的一面,卻也隱藏了人性的缺點。社交產(chǎn)品的在幫助用戶建立社交關(guān)系的同時,也要提升用戶隱私保護(hù)和社交安全的體驗。

Instagram帳戶注冊時,未滿16歲的未成年人默認(rèn)使用私人帳戶,僅粉絲才能查看其發(fā)布的信息,在平臺內(nèi)容分發(fā)和互動上與成年人帳戶進(jìn)行隔離。當(dāng)用戶更改成公共帳戶時,會給到提示強(qiáng)調(diào)私人帳戶的好處。

 

Snapchat推出“好友檢查”,用戶可以快捷私密地刪除不聯(lián)系的人,確保好友列表里仍是真正的朋友。

 

Tinder的一項調(diào)查顯示,40%的人在Tinder中發(fā)現(xiàn)了前任,24%的人遇到了家人。為了保障用戶隱私,用戶可以上傳他們的聯(lián)系人名單以選擇不想在app中遇到哪些人,屏蔽所選的聯(lián)系人。

 

在社交產(chǎn)品中,聊天是關(guān)鍵的一環(huán),匹配到合適的用戶后,如何加強(qiáng)雙方情感連接和信任的紐帶讓用戶為關(guān)系而留?從書信到電報到電話到視頻通話,都是通過技術(shù)的發(fā)展獲得了更高效真實的溝通體驗,線上溝通的用戶體驗一直不斷還原線下的真實體驗,疫情加速了多人在線視頻通話的發(fā)展,既讓人在溝通時保持社交距離,又讓人感覺對方近在遲尺。

 

3-1 更臨場

相較于面對面溝通交流,線上的交流在聽覺、視覺、觸覺、情緒傳遞的體驗上,決定了用戶社交臨場感的強(qiáng)弱。

Honk用文字交流時,能看到對方一個字一個字實時的輸出,模擬真實的說話方式。

 

2021年Google I/O大會的3D視頻聊天設(shè)備Project Starline,利用多個高分辨率攝像機(jī)和深度傳感器在不同角度捕捉用戶,以3D的效果進(jìn)行人物呈現(xiàn),營造對方真的就在對面的裸眼3D感。

 

2021年F8大會上,F(xiàn)acebook提出用于AR視頻通話的MultipeerAPI,更方便創(chuàng)作者制作AR特效,用于多用戶、多屏幕的共享AR體驗。用戶在多人視頻通話時,視頻中會出現(xiàn)太空或篝火的AR特效,讓視頻者感受到大家都在同一個共享空間。還支持輕量級游戲,多位玩家屏幕由一根曲線貫穿,玩家用臉引導(dǎo)甜甜圈共同完成接力游戲。

 

2021年IOS15的更新,F(xiàn)acetime使用的空間音頻讓通話的聽感更加自然、逼真,仿佛在同一房間面對面聊天。

 

面對疫情人們在生活中的社交禮儀都以非身體接觸式動作替代,線上社交的頻次和密度大大增加,視頻通話在視、聽處理上越來越自然和逼真,在觸覺上也向著《頭號玩家》的男主角在虛擬空間中感受到的虛擬觸覺傳遞到現(xiàn)實中那樣在進(jìn)化。美國西北大學(xué)的研究中,一位媽媽與孩子視頻通話時,通過撫摸屏幕,能把來自媽媽的撫摸傳遞到孩子身上的“AR皮膚”上。未來在虛擬社交中也能獲得真實的觸碰,加強(qiáng)情感的連接。

 

3-2 更個性

個人展示是單向的,溝通交流是雙向的,雙方在不斷交換彼此之間的狀態(tài)和感受,從中獲得被了解和認(rèn)可。個性聊天氣泡、表情包、自定義聊天背景,幫用戶在溝通交流時展現(xiàn)自己獨一無二的個性。線上社交的用戶語言設(shè)計要打造個性化的社交氛圍,讓用戶的個性在溝通中被挖掘和展現(xiàn)。

MUZE在聊天中可以自由擺放文字、貼圖、涂鴉,讓交流更個性化和自由。

 

Google I/O大會推出的全新設(shè)計語言Material You中,系統(tǒng)會基于用戶選擇的壁紙進(jìn)行自由取色,并應(yīng)用到UI中。是否聊天的UI也能隨著聊天中的圖片,或是聊天發(fā)送的表情文字提取心情語義,進(jìn)行UI的變化,加強(qiáng)情緒的傳達(dá)。

 

3-3 場景化

人和人的社交通常依附于不同的場景,群聊或好友分組就是將特定的社交關(guān)系進(jìn)行場景設(shè)定。比如“火鍋突擊隊”“老廢物樂園”“吃瓜小分隊”依附社交場景來進(jìn)行互動,幫助用戶帶入社交氛圍。

咖啡館社交,通過構(gòu)建咖啡館場景,傳達(dá)和陌生人進(jìn)行一場閑聊的慢社交體驗。

 

Facebook的視頻通話,用煙花和禮帽的AR特效來構(gòu)建派對的社交場景。

 

2021年WWDC大會上,現(xiàn)場用不同的Memoji營造了線上觀眾參與會議的場景。

 

3-4 感官刺激

2021年Google的一份統(tǒng)計數(shù)據(jù)表明,用戶平均注意力時長從12s下降到9s,而00后的平均注意力僅8s。面對這樣的用戶,需要讓他們在短時間內(nèi)獲得極大的感官刺激來延長注意力,以及在溝通交流時有更極致的情緒表達(dá)。

Honk可以同時發(fā)送大量的emoji表情。

 

QQ團(tuán)隊運(yùn)用Lottie技術(shù)推出每秒60幀超高幀率、動效更細(xì)膩的小黃臉表情包。

 

微信的表情包不僅帶來視覺上逼真的3D動畫效果,屏幕上其他內(nèi)容也會隨之震動,還有觸感上的沖擊。

網(wǎng)絡(luò)表情包 

 

3-5 輕娛樂、游戲社交

《社交媒體趨勢報告》提到“和朋友保持聯(lián)系”一直被列為是使用社交媒體首要原因,但在16-24歲的用戶中,主要驅(qū)動力變?yōu)椤皩ふ腋阈陀腥さ膬?nèi)容”。青少年通過線上社交彌補(bǔ)線下社交缺口,獲得同輩認(rèn)同,排解孤獨和學(xué)習(xí)壓力。“組隊開黑”“一起微光”“找長期固聊固玩”,00后們的社交需求更多放在娛樂、游戲化社交上。社交體驗也從物理空間的連接轉(zhuǎn)變到精神空間的連接。

用戶在Housparty進(jìn)行視頻聊天時,如果感到無聊,可以玩一場輕松的游戲,游戲過程中可以通過視頻看到對方的狀態(tài)。

 

Snapchat正推出一種叫Connected Lenses的新型增強(qiáng)現(xiàn)實鏡頭,它可以讓不在同一個物理空間的用戶一起進(jìn)行AR游戲,比如共同組建樂高模型。

 

IOS15中Facetime加入Shareplay功能,可以與朋友共享屏幕,一起線上追劇、聽音樂、玩游戲。

 

Tinder在今年推出第二季Swipe Night活動,用戶通過觀看每周一集的互動故事,向左或向右滑為故事中的角色做決定,每一集結(jié)束后會匹配到在故事中做出類似選擇的用戶,并可以繼續(xù)相關(guān)話題的聊天。

 

結(jié)尾

科技重塑了我們的生活。線上社交讓我們?nèi)粘贤ǜ鼮榉奖?,也讓我們輕松維系現(xiàn)實中的社交關(guān)系,越來越多的人依靠它構(gòu)建新的虛擬關(guān)系,互聯(lián)網(wǎng)帶來溝通便利的同時,也減少了人與人面對面交流的機(jī)會。

美國傳播學(xué)家艾伯特·梅拉比曾給出一個公式:信息溝通傳遞=55%視覺+38%聲音+7%語義。大意是人們在現(xiàn)實生活中進(jìn)行面對面溝通交流時,7%是語言上的內(nèi)容,剩下的是面部表情、肢體動作、目光接觸、語速語調(diào)等非語言內(nèi)容的交流。隨著技術(shù)的進(jìn)步,社交不斷在補(bǔ)充非語言內(nèi)容交流的缺失。在自我展示中,無論是視頻化、聲音形象、富有表情和肢體動作的虛擬形象,還是溝通場景中越來越臨場的體驗和充滿感官刺激的表情符號,線上社交的趨勢都在不斷映射線下社交的體驗。

最后,你還想看ISUX什么趨勢的文章? 歡迎在評論區(qū)留言呀~

感謝閱讀,以上文章由騰訊ISUX團(tuán)隊創(chuàng)作,版權(quán)歸騰訊ISUX所有,轉(zhuǎn)載請注明出處,違者必究,謝謝您的合作。 

 

原文地址:ISUX

作者:騰訊ISUX

 

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》2021-2022設(shè)計趨勢ISUX報告·社交APP篇

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

截屏2021-05-13 上午11.41.03.png

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

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



設(shè)計師必備的Chrome插件,超好用?。?!

seo達(dá)人



01.Go Full Page

設(shè)計師在網(wǎng)上沖浪時,看到一些排版精美、設(shè)計優(yōu)秀的界面總想要保存下來,以便日后尋找靈感。

不知道大家都是怎樣保存整個網(wǎng)頁的。

我之前的笨辦法是這樣的:先是一屏一屏地截圖,然后再拼接起來,特別是拼連接處時需要小心翼翼地對齊,簡直是太麻煩了。

現(xiàn)在的高效方法就是使用Go Full Page,它是整個網(wǎng)頁的截圖工具,可以輕松松松地保存整個頁面。

輕輕動一下手指

圖片

便生成了一個長圖

圖片

 

02.WhatFont

如果我們想查看網(wǎng)頁中的字體,這就是神器WhatFont。僅僅通過鼠標(biāo)停留在字體上就可以查看Web字體,簡單又優(yōu)雅。

圖片

 

03.ColorPick EyeDropper

我經(jīng)常有一種苦惱,比如同樣是藍(lán)色,為什么別人家的顏色這么干凈清透,令人愉快?這時候就不得不舔屏了……

ColorPick EyeDropper就是一款吸色工具,能夠直接從網(wǎng)頁中選取顏色值。

圖片

 

04.Window Resizer

當(dāng)想對各屏幕的尺寸測試設(shè)計稿時,可以使用Window Resizer快速調(diào)節(jié),了解設(shè)計稿在不同屏幕上的兼容性。

圖片

 

05.CSS Peeper

如果想更加全面的獲得網(wǎng)站上的一些信息,比如圖標(biāo)、svg、圖片、字體樣式、元素間距等等,CSS Peeper便是一個完美工具。

可以查看字體樣式,可以查看元素之間的間距

圖片

可以查看網(wǎng)頁中使用的顏色

圖片

可以查看網(wǎng)頁中出現(xiàn)的圖片或圖標(biāo)

圖片

 

Chrome拓展程序的安裝也是超簡單,在拓展程序中搜索,然后點擊應(yīng)用就可以啦。

拓展程序地址:https://chrome.google.com/webstore/category/extensions

 

原文地址:栗子設(shè)計喵 (公眾號)

作者:栗子

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》設(shè)計師必備的Chrome插件,超好用?。?!

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

截屏2021-05-13 上午11.41.03.png

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

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



適老化設(shè)計研究實踐

資深UI設(shè)計者

編輯導(dǎo)語:現(xiàn)今以至遙遠(yuǎn)的將來,我們將面對一個殘酷的現(xiàn)實問題:人口老齡化。未來將有很多人群去關(guān)注這個群體,但是在市場上,對老年人的產(chǎn)品還是很少的,還存在很多問題。本文應(yīng)對這個問題,展示不同適應(yīng)老年人的產(chǎn)品設(shè)計細(xì)節(jié),我們一起來看看。

當(dāng)前,我們正面臨老齡化問題的嚴(yán)峻挑戰(zhàn)。

統(tǒng)計表明,中國的老齡化人口已達(dá)到2.64億,且這一數(shù)據(jù)仍在持續(xù)增長,而老年人在生活、情感上都面臨諸多問題。

  • 首先,老年人在視覺、聽覺、肢體、認(rèn)知方面都出現(xiàn)了不同程度的退化,無法平等地獲取信息和服務(wù);
  • 其次,年輕人涌向大城市尋找機(jī)會,老年人被迫成為空巢者,疫情的發(fā)生更使親人長期兩地分離,老人情感孤獨缺少陪伴;
  • 另外,疫情的爆發(fā)也促使線下服務(wù)轉(zhuǎn)為線上化,老年人不能很好適應(yīng)這一轉(zhuǎn)變,遇到很多困難。

但是研究發(fā)現(xiàn),市場上目前沒有產(chǎn)品很好解決了上述問題。

當(dāng)下移動APP產(chǎn)品缺少對老年人體驗的深層次關(guān)注與設(shè)計,只通過單一加大字號與簡化功能等解決基礎(chǔ)體驗,缺乏通過新技術(shù)應(yīng)用和更全面的適老化設(shè)計服務(wù)老年群體,老年人的需求依舊未得到關(guān)注和滿足。

因此,百度基于自身雄厚的AI技術(shù)和精細(xì)、系統(tǒng)的適老化設(shè)計適時推出百度大字版,使老年人更平等地獲取信息和服務(wù)、獲得情感陪伴。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

一、精細(xì)系統(tǒng)的適老化設(shè)計:易閱讀、易收聽、易操作、易理解

目前行業(yè)內(nèi)缺失成體系的老年人研究報告,針對老年人的研究資料分散在建筑/平面/醫(yī)療/家居等各個行業(yè),同時業(yè)內(nèi)也缺少針對老年人系統(tǒng)的設(shè)計標(biāo)準(zhǔn)或設(shè)計指南。

現(xiàn)有無障礙設(shè)計標(biāo)準(zhǔn)針對殘障人士,且部分標(biāo)準(zhǔn)只適用于PC端,不適用于老年人和移動產(chǎn)品。

因此在進(jìn)行百度大字版的適老化設(shè)計時,我們系統(tǒng)的研究了老年人面臨的問題、PC端無障礙設(shè)計標(biāo)準(zhǔn)及其他相關(guān)資料,產(chǎn)出了系統(tǒng)的移動端適老化設(shè)計標(biāo)準(zhǔn)體系,同時結(jié)合百度大字版實際場景產(chǎn)出了解決方案。

適老化設(shè)計包含:易閱讀、易收聽、易操作、易理解四個方面,后續(xù)將詳細(xì)闡述。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

1. 易閱讀

隨著年齡增長,老年人會出現(xiàn)視力下降、色彩感知弱、動態(tài)視覺減弱的問題。

老花眼、眼睛進(jìn)光量減少等問題會導(dǎo)致視力下降。

眼睛晶體渾濁,晶體變黃的現(xiàn)象會導(dǎo)致色彩感知弱。視力減退,注意力降低,導(dǎo)致眼睛失去快速對焦的能力,動態(tài)視覺減弱。

因此為了使老年人更易獲得視覺信息,我們對界面元素做了一系列的改造,使內(nèi)容更易閱讀。

1)增大字號

增大字號是適老化設(shè)計最有效的手段。

PC端WCAG無障礙設(shè)計標(biāo)準(zhǔn)建議字號可以放大到200%。

按不同的閱讀媒介與人眼距離進(jìn)行推導(dǎo),移動端字號大小建議在60px-81px之間,標(biāo)題、正文、輔助信息等不同信息層級采用不同的字號標(biāo)準(zhǔn)。

此字號標(biāo)準(zhǔn)經(jīng)過眼動實驗和用戶訪談進(jìn)行了雙向論證,形成完整覆蓋各信息層級的字號大小標(biāo)準(zhǔn),已經(jīng)在百度大字版落地。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

字號與眼睛距離對照圖

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

字號標(biāo)準(zhǔn)體系

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

字號應(yīng)用場景

2)使用符合老年人生理、心理特征的顏色

老年人眼睛晶體變渾濁、變黃,導(dǎo)致對色彩的感知減弱,且研究表明老年人更喜愛溫暖明亮的顏色,更希望感受到活力而不是蒼老。

因此在顏色的設(shè)計上,我們通過增加色彩對比度到不小于3:1、大量使用暖色調(diào)、減少紫色和青色的使用3個手段,來進(jìn)行界面色彩的設(shè)計。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

顏色的選取和使用

3)提供有效的反饋提示

老年人的動態(tài)視覺減弱,對動態(tài)內(nèi)容的捕捉和感知速度明顯下降。

因此,對界面中短暫出現(xiàn)的提示性信息,我們在現(xiàn)有提示時長的基礎(chǔ)上延長了一檔。

例如現(xiàn)有提示的停留時間小于3秒時,百度大字版延長到3秒,現(xiàn)有提示的停留時間在3-5秒之間時,百度大字版延長到5秒。

現(xiàn)有提示的停留時間在5-7秒時,百度大字版延長到7秒。超出以上時間則提供適當(dāng)?shù)年P(guān)閉機(jī)制,避免打擾。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

提示時長適當(dāng)延長

2.易收聽

隨著年齡增長,老年人也會逐步出現(xiàn)聽力下降的問題,聽力損失程度受地域、受教育程度、疾病等多重因素影響,且高頻和低頻聽力損失程度更深。

因此我們通過增加音量、適當(dāng)降低語速等方式幫助用戶更好的獲取聽覺信息。

1)增大音量

針對老年人聽力下降這一現(xiàn)象,我們適當(dāng)增大了音/視頻的音量。

研究表明,老年人聽覺平均感知音量在67.5~75.3分貝之間,因此在視頻開始播放時,我們對低于設(shè)定值的音量適當(dāng)增加到約44%。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

iOS系統(tǒng)音量分布

2)降低語速

為了保證老年人有效的接收到聲音信息并進(jìn)行理解,音/視頻的播放速度也需要適當(dāng)下降。

因此,我們減少了高檔位語速,并提供了高、中、低3檔語速,使老年人選擇適合自己的速度,更有效的獲取聲音信息。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

速度檔位選擇

3.易操作

移動應(yīng)用需要通過手勢交互來完成任務(wù),但老年人的肢體運(yùn)動能力也會逐漸下降。

動作精準(zhǔn)度下降使老年人無法準(zhǔn)確的完成手勢操作,對動作的精細(xì)控制程度降低。

同時老年人相較年輕人運(yùn)動更加遲緩,逐漸出現(xiàn)操作遲疑、猶豫或暫停,運(yùn)動幅度或速度也會下降。

因此為了保證老年人可以準(zhǔn)確的完成操作,我們采用了增大觸控區(qū)、降低手指運(yùn)動距離和精準(zhǔn)度要求、提供有效的反饋提示、操作功能顯性化等方式。

3)增大觸控區(qū)

增大觸控區(qū)是使移動應(yīng)用易操作的最簡單有效的方式,同時視覺設(shè)計上也需要讓老年人感知到觸控區(qū)增大。

我們通過對iPhone XS Max三倍屏的分辨率和物理尺寸換算,結(jié)合人拇指和食指的點擊區(qū)域大小,推導(dǎo)出移動應(yīng)用上,觸控區(qū)應(yīng)大于等于112px×120px。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

觸控區(qū)域示意

2)降低手指運(yùn)動距離和操作精準(zhǔn)度要求

老年人的肢體運(yùn)動能力下降,難以完成長距離、長時間、連續(xù)、高級的操作。

因此我們集中界面的主要操作在屏幕下半部分,保證用戶在使用時手指移動的距離更短,同時減少使用具有明確方向性、精準(zhǔn)度要求的高級手勢,如雙擊、旋轉(zhuǎn)圖片到正向等。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

降低手勢操作的精準(zhǔn)度要求

3)提供明確的操作反饋

為了提醒老年人注意、告知其已完成操作、增強(qiáng)操控感,我們在特定場景增加了振動反饋,如臨界值、出錯、滑塊、警告場景。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

振動反饋

4)隱性操作顯性化

為了減輕用戶的學(xué)習(xí)難度,我們將所有隱性功能或需要手勢操作觸發(fā)的功能進(jìn)行了顯性化設(shè)計,如點擊底bar刷新,功能隱性不易發(fā)現(xiàn),百度大字版采用動態(tài)刷新圖標(biāo)的形式,增強(qiáng)底bar可點擊刷新的感知。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

隱性操作顯性化

5)輔助用戶輸入

現(xiàn)實生活中,很多老年人不會使用輸入法,而且肢體運(yùn)動能力的退化也為輸入帶來了不便,移動設(shè)備的輸入法操作區(qū)域小難以精準(zhǔn)操作。

因此我們依托百度的AI技術(shù),提供了語音搜索和圖像搜索能力,使老年人可以方便的通過語音和圖像搜索主動探索獲取新知,答疑解惑,跟上時代進(jìn)步。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

依托百度AI技術(shù)提供語音和圖像搜索能力

4.易理解

隨著年齡的增長,人的認(rèn)知能力也會逐步下降,老年人會出現(xiàn)反應(yīng)慢、學(xué)習(xí)力下降、判斷力下降的情況。

他們很難一遍學(xué)會新內(nèi)容,也難以判斷信息的真?zhèn)?。因此我們通過簡單直白的文案話術(shù)、清晰明確的圖標(biāo)設(shè)計、可信的來源設(shè)計來使內(nèi)容易理解,安全可信。

1)采用通俗易懂的文案

由于老年人觸網(wǎng)時間短、受教育程度不同,難以理解專業(yè)的互聯(lián)網(wǎng)術(shù)語,為了幫助他們更好的使用產(chǎn)品,我們對專業(yè)術(shù)語都進(jìn)行了簡化,采用了通俗易理解的文案。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

文案適配前后對比

2)提供清晰明確的圖標(biāo)設(shè)計

為了幫助老年人更好的理解和使用產(chǎn)品,百度大字版的圖標(biāo)設(shè)計都采用了簡單易理解的圖形,同時功能入口大部分采用圖形和文字結(jié)合的方式,通過雙重手段幫助老年人理解產(chǎn)品功能。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

圖形對比示意

3)提升信任感

在內(nèi)容信息來源中或涉及經(jīng)濟(jì)交易的環(huán)節(jié),百度大字版通過增加官方標(biāo)簽、提供官方平臺保障的方式來提升產(chǎn)品整體的可信度,增強(qiáng)老年人對產(chǎn)品的信任感。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

官方標(biāo)識和保障示意

4)提供即時的幫助

為了隨時解決老年人遇到的問題,百度大字版提供了暖陽熱線,使老年人可以隨時打電話獲取專業(yè)人員的幫助和解答。

二、AI賦能,情感陪伴

由于很多年輕人去大城市尋找機(jī)會,導(dǎo)致產(chǎn)生很多空巢老人,他們情感孤獨,缺少陪伴。

疫情的爆發(fā),更使老年人在節(jié)假日也難以與家人團(tuán)聚。

因此百度大字版通過語音合成等AI能力,還原兒孫親友的真實聲音,用于全局內(nèi)容播報朗讀,使老年人感受到至親至愛仿佛陪伴在他們身邊,緩解老年人的孤單和思念之情。

全局語音朗讀也能解決老年人的閱讀障礙和長時間閱讀導(dǎo)致的視覺疲勞問題,同時可以解放雙手,使老年人隨時隨地聽朗讀。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

語音合成

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

全局內(nèi)容朗讀場景

三、豐富內(nèi)容,充盈生活

百度大字版圍繞老年人的實際生活需求,依托百度的內(nèi)容生態(tài)和個性化推薦技術(shù),提供了符合老年人興趣的圖文和音視頻內(nèi)容,一站式滿足了老年人的內(nèi)容消費需求。

  • 在設(shè)計上,我們通過AI技術(shù),對視頻增加智能字幕,方便老年人獲取視頻信息;
  • 在內(nèi)容流的操作上,通過統(tǒng)一的容器和流式交互,為老年人提供便捷的操作體驗,使他們更方便、平等的獲取信息和內(nèi)容。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

智能字幕

四、生活助手,便捷服務(wù)

百度大字版還提供了多種實用工具,滿足老年人疫情時代和日常的生活訴求。

疫情導(dǎo)致線下服務(wù)線上化,因此為了幫助老年人適應(yīng)這一生活方式的轉(zhuǎn)變,百度大字版提供了在線政務(wù)工具。

很多老年人承擔(dān)了教育孫輩的責(zé)任,因此我們提供了一些輔助教學(xué)工具,幫助他們帶孩子。

更有疫情地圖、垃圾分類等貼合日常生活場景的工具,使智能技術(shù)更貼近、融入老年人的生活。

百度大字版精細(xì)系統(tǒng)的適老化設(shè)計研究實踐

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

文章來源:人人都是產(chǎn)品經(jīng)理   作者:百度MEUX

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

B端體驗細(xì)節(jié):列表構(gòu)建器的設(shè)計模式

資深UI設(shè)計者

什么是列表構(gòu)建器

在了解“列表構(gòu)建器”之前,我們先來了解下什么是“列表”和“構(gòu)建器”。

列表是一種數(shù)據(jù)項構(gòu)成的有限序列,即按照一定的線性順序,排列而成的數(shù)據(jù)項的集合。常見的列表有新聞流、表格、事件列表、好友列表等。

在 java 中,構(gòu)建器主要用于把復(fù)雜對象的構(gòu)建過程抽象出來,使得復(fù)雜對象的構(gòu)建可以分部件分別創(chuàng)建,從而根據(jù)需要構(gòu)建出來非常復(fù)雜的對象。由此我們可以推演出日常中大家口口相傳的圖表構(gòu)建器、地圖構(gòu)建器等實際是在闡述圖表、地圖等依據(jù)某種規(guī)范或規(guī)則生成此類對象的過程。

因此,我們今天要聊的“列表構(gòu)建器”就是通過某種途徑,達(dá)到用戶所需的列表對象的過程。

在 B 端界面中,穿梭框就是列表構(gòu)建器的一種展現(xiàn)形式,用戶從較大的數(shù)據(jù)集合中挑選出符合自己所需的較小的數(shù)據(jù)集合。通常大數(shù)據(jù)集合在左邊(待選區(qū)),稱之為源數(shù)據(jù)區(qū);小數(shù)據(jù)集合在右邊(已選區(qū)),稱之為目標(biāo)數(shù)據(jù)區(qū)。

為什么需要列表構(gòu)建器

B 端界面上為何會需要列表構(gòu)建器這種組件呢?從實踐經(jīng)驗來看,無外乎以下 2 點:

1. 所見即所得

源列表和目標(biāo)列表在同一個頁面,用戶無需通過跳轉(zhuǎn)頁面來回查看源和目標(biāo)數(shù)據(jù),不僅提升了用戶操作效率,也提升了用戶操作的愉悅性。

2. 數(shù)據(jù)展示量大

列表構(gòu)建器可展示的源數(shù)據(jù)空間和目標(biāo)數(shù)據(jù)空間都比 select 組件大的多,這非常方便用戶在界面上自由與直觀地操作。對于 B 端產(chǎn)品來說,數(shù)據(jù)量大是不爭的事實,在展示、操作、呈現(xiàn)上也是急需解決的問題。列表構(gòu)建器的出現(xiàn)在一定程度上解決了某些場景下的問題。

什么時候使用列表構(gòu)建器

使用列表構(gòu)建器設(shè)計模式的情景為:

  1. 源數(shù)據(jù)量大,且目標(biāo)數(shù)據(jù)量也大的情況下,適合使用;
  2. 不想通過滾動、跳轉(zhuǎn)等方式查看源和目標(biāo)數(shù)據(jù)時,適合使用。

6 種常見的列表構(gòu)建器

根據(jù)不同場景下的不同需求,衍生出了列表構(gòu)建器的多種形態(tài),下面分享一下 B 端常見的列表構(gòu)建器場景設(shè)計模式。

1. 基礎(chǔ)列表構(gòu)建器

What 是什么

基礎(chǔ)列表構(gòu)建器是列表構(gòu)建器的基礎(chǔ)用法,展示了數(shù)據(jù)量不大的源數(shù)據(jù),用戶通過選擇后確定目標(biāo)數(shù)據(jù)。

When 使用場景

當(dāng)源數(shù)據(jù)量小于大約 50 條時,且選擇的目標(biāo)數(shù)據(jù)要直接可見時,可以考慮使用。

How 如何使用

用戶直接通過滾輪查看源數(shù)據(jù)中的目標(biāo)數(shù)據(jù),然后選中它們。當(dāng)確認(rèn)后,點擊穿梭按鈕將已選擇的數(shù)據(jù)轉(zhuǎn)入已選區(qū)。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

2. 可搜索列表構(gòu)建器

What 是什么

展示了數(shù)據(jù)量較大的源數(shù)據(jù),且有搜索功能,用戶通過選擇后確定目標(biāo)數(shù)據(jù)。

When 使用場景

當(dāng)源數(shù)據(jù)量較大,用戶已經(jīng)無法通過在有限容器中滾動鼠標(biāo)快速查閱和定位數(shù)據(jù)時,可以考慮使用。

How 如何使用

用戶通過搜索確定目標(biāo)數(shù)據(jù),勾選后再通過穿梭按鈕將已選擇的數(shù)據(jù)轉(zhuǎn)入已選區(qū)。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

3. 可排序列表構(gòu)建器

What 是什么

該列表構(gòu)建器可對數(shù)據(jù)進(jìn)行排序,讓用戶將自身關(guān)心的數(shù)據(jù)前置。

When 使用場景

當(dāng)目標(biāo)數(shù)據(jù)量較大,用戶需要將自身所關(guān)心靠前展示,進(jìn)行查看、對比、分析等操作時,可以考慮使用。

How 如何使用

用戶通過搜索確定源數(shù)據(jù)中的目標(biāo)數(shù)據(jù),勾選后再通過穿梭按鈕將已選擇的數(shù)據(jù)轉(zhuǎn)入已選區(qū);再在已選區(qū)中將某些數(shù)據(jù)進(jìn)行置頂展示或前置展示。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

4. 可自動穿梭列表構(gòu)建器

What 是什么

該列表構(gòu)建器可直接將源數(shù)據(jù)穿梭到目標(biāo)數(shù)據(jù)區(qū)。

When 使用場景

當(dāng)勾選的源數(shù)據(jù)無需反復(fù)確認(rèn)時,可以考慮使用,這大大加快了用戶的操作速度。

How 如何使用

用戶點擊待選區(qū)數(shù)據(jù)的添加按鈕,直接可將數(shù)據(jù)添加到已選區(qū);點擊已選區(qū)數(shù)據(jù)的刪除按鈕,也可將數(shù)據(jù)回歸到待選區(qū)。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

5. 表格式列表構(gòu)建器

What 是什么

顧名思義,表格式列表構(gòu)建器以表格的形式展現(xiàn),方便用戶多維度確認(rèn)數(shù)據(jù)范圍。

When 使用場景

當(dāng)用戶選取的結(jié)果數(shù)據(jù)需要數(shù)據(jù)本身的多維度屬性來確定時,可以考慮使用。

How 如何使用

用戶通過滾輪查看或搜索源數(shù)據(jù)中的目標(biāo)數(shù)據(jù),然后選中它們。當(dāng)確認(rèn)后,點擊穿梭按鈕將已選擇的數(shù)據(jù)轉(zhuǎn)入已選區(qū)。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

6. 標(biāo)題式列表構(gòu)建器

What 是什么

標(biāo)題式列表構(gòu)建器除了展現(xiàn)普通的數(shù)據(jù),還有圖片等信息。

When 使用場景

當(dāng)源數(shù)據(jù)的展現(xiàn)需要更加豐富時,可以考慮使用。

How 如何使用

用戶通過滾輪查看或搜索源數(shù)據(jù)中的目標(biāo)數(shù)據(jù),然后選中它們。當(dāng)確認(rèn)后,點擊穿梭按鈕將已選擇的數(shù)據(jù)轉(zhuǎn)入已選區(qū)。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

除了以上常用場景的列表構(gòu)建器設(shè)計模式,根據(jù)業(yè)務(wù)的需求大家可以在此基礎(chǔ)上繼續(xù)拓展和衍生,豐富 B 端界面的表現(xiàn)力,及滿足業(yè)務(wù)日益豐富的場景需求。

列表構(gòu)建器以及衍生案例

基于基礎(chǔ)的常用列表構(gòu)建器,不同產(chǎn)品根據(jù)自身的實際需求衍生出了多類構(gòu)建器,我們一起來感受下吧。

1. sketch 常用功能構(gòu)建器

在 sketch 界面中,工具欄被設(shè)計成只顯示用戶認(rèn)為常用的功能。用戶只需通過拖拽添加的方式從工具集合中將常用的功能添加到工具欄上。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

2. sketch 常用色彩構(gòu)建器

sketch 提供了常用色彩構(gòu)建功能,對于設(shè)計師常用的顏色可以自行添加出來,形成一份常用色彩庫。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

3. 應(yīng)用參數(shù)關(guān)聯(lián)構(gòu)建器

應(yīng)用需要在關(guān)聯(lián)參數(shù)后才可運(yùn)行。右邊為參數(shù)集合,左邊為應(yīng)用與待關(guān)聯(lián)參數(shù)列表,用戶只需要從參數(shù)集合里面選擇目標(biāo)參數(shù)拖拽到對應(yīng)的應(yīng)用容器中,即可完成應(yīng)用與參數(shù)的綁定。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

4. 表格列顯示字段構(gòu)建器

當(dāng)表格列非常多時,用戶可以選擇列顯示字段構(gòu)建器來將常用列字段選取出來。如此表格會變得輕盈,且數(shù)據(jù)加載變快。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

5. word 底部欄元素構(gòu)建器

鼠標(biāo)右鍵點擊 word 底部欄,會出現(xiàn)底部欄上可展現(xiàn)的所有元素。用戶點擊勾選后,元素被展現(xiàn)到了底部欄上。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

6. 自定義模塊構(gòu)建器

富途牛牛允許用戶自定義界面模塊,方便用戶按自身的習(xí)慣查看行情和操作等。用戶只需從富途牛牛提供的組件庫中挑選出自己需要的,配置成自己想要的模塊界面即可。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

7. 選成員構(gòu)建器

很多 B 端產(chǎn)品的成員管理模塊都需要涉及到添加成員,這時候會用到選成員構(gòu)建器,將成員從一個池子添加到另一個池子。

B端體驗細(xì)節(jié)(四):列表構(gòu)建器的設(shè)計模式

總結(jié)

列表構(gòu)建器在 B 端必不可少,產(chǎn)品經(jīng)理和設(shè)計師根據(jù)產(chǎn)品本身的業(yè)務(wù)訴求,基于基礎(chǔ)的列表構(gòu)建器衍生出了很多種玩法,以不斷提升 B 端的用戶體驗。

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

文章來源:優(yōu)設(shè)   作者:小果

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


用戶界面設(shè)計中的對比類型

ui設(shè)計分享達(dá)人

了解對比如何在設(shè)計中發(fā)揮作用,在用戶界面中可以找到哪些類型的對比,以及為什么它對積極的用戶體驗很重要。

一般而言,“對比”一詞用于描述彼此截然不同的對象。談到視覺感知,對比度基本上與顏色或光線的差異有關(guān),可以使物體清晰可辨。

為什么對比度很重要?因為人眼自然會捕捉到對比度。圖像的最高可能對比度稱為對比度或動態(tài)范圍。更重要的是,對于色盲等視力不佳的人來說,對比度成為他們看到的物體的核心特征,并讓他們能夠區(qū)分它們。

在學(xué)術(shù)藝術(shù)中,對比處理對立元素和效果的排列,例如明暗顏色、大小形狀、粗糙或光滑的紋理。在這種情況下,對比不僅可以用來吸引注意力,還可以設(shè)置情緒和氛圍,在藝術(shù)品中創(chuàng)造多樣性、視覺趣味和戲劇性。

在設(shè)計中,對比度是影響效果的關(guān)鍵因素之一。 可掃描性網(wǎng)頁或移動屏幕的視覺層次結(jié)構(gòu)。它使設(shè)計師能夠以一種方式呈現(xiàn)布局,告知用戶哪些交互點是重要的,哪些是次要的。對比度可以有效地吸引用戶的注意力并將其吸引到特定元素上,因此它在支持?jǐn)?shù)字產(chǎn)品的直觀導(dǎo)航和可用性方面發(fā)揮著重要作用。

Pass-On 應(yīng)用程序登錄頁面的設(shè)計展示了有效的顏色和尺寸對比示例,為頁面構(gòu)建了堅實的視覺層次結(jié)構(gòu)。

UI設(shè)計中的對比類型

對比可以基于 UI 元素的不同特性,包括:

A. 顏色:這種類型是人眼最自然和最明顯的對比之一;它適用于顏色明顯不同的情況,例如,通過互補(bǔ)、分裂互補(bǔ)或三元方案組合,這種類型的對比最廣泛地用于制作按鈕和其他關(guān)鍵導(dǎo)航元素。在網(wǎng)頁布局或應(yīng)用程序屏幕中立即看到,支持清晰直觀的導(dǎo)航。

B. 大?。哼@種類型的對比是基于首先引起注意的元素明顯大于其他元素。

C. 形狀:通過使一個元素的形狀與其他元素不同來吸引用戶的眼球。

D. 位置:在這種類型中,設(shè)計師以這種方式更改一個元素的位置,使其看起來不同,例如,文本片段的新段落以縮進(jìn)開頭。

E. 紋理:這里的差異是由于使用彼此明顯區(qū)分的紋理而建立的。

F. 方向:改變元素的物理位置,使其在其他方向,這樣以不尋常的方式吸引用戶的注意力。

經(jīng)常想到的關(guān)于對比度的第一個想法是黑白的東西。在沒有陰影和多種顏色的情況下,單色圖像使用對比度作為表現(xiàn)潛力的主要助推器。這在用戶界面中的工作方式相同。更重要的是,與藝術(shù)品或攝影作品相比,對比度不僅會影響美感,而且對布局的可用性也有重大影響。因此,深思熟慮的對比度使用是使網(wǎng)站和應(yīng)用程序用戶友好且易于使用的強(qiáng)大方法。

排版對比

另一種特定類型的對比是排版對比,它基于設(shè)計作品文本部分所用字體的區(qū)別特征的差異。

加拿大字體設(shè)計師卡爾·戴爾定義了 7 種核心類型的排版對比:

A. 尺寸對比:它是關(guān)于由表格創(chuàng)建的基本圖案的物理放大和用于文本的類型的重量。這里最常見的情況是使標(biāo)題或標(biāo)題明顯大于文本。

B. 重量對比:粗體在同款較輕的對比中突出。它有助于將注意力吸引到文本的特定部分,并讓用戶了解它們的重要性。

C. 形式對比:這里的形式是指大寫字母和小寫字母之間的區(qū)別,或者羅馬字母和它的斜體變體,壓縮和擴(kuò)展版本,與標(biāo)準(zhǔn)類型協(xié)調(diào)的腳本類型——所有提到的都可以用于戲劇性的形式的改變。

D. 結(jié)構(gòu)對比:結(jié)構(gòu)意味著不同類型字體的不同字母形式,例如單線無襯線與高對比度現(xiàn)代,或斜體與黑體。

E. 紋理對比:這是關(guān)于字體的線條如何看起來像一個整體,這部分取決于字體本身,部分取決于它們的排列方式。

F. 顏色對比:第二種顏色通常不如基本的白底黑字(或黑底白字)強(qiáng)調(diào),因此必須仔細(xì)考慮需要強(qiáng)調(diào)的元素并注意色調(diào)值使用的顏色。

G. 方向?qū)Ρ龋哼@種類型是關(guān)于垂直和水平之間的對立以及它們之間的角度。出文本塊也有它們的垂直或水平方面,將寬的長線塊與高的短線列混合可以產(chǎn)生對比。

另外,還有一些不太流行的對比,比如所謂的孤立對比,就是把一個詞或詞組放在遠(yuǎn)離其他元素的地方,這樣就可以從人群中脫穎而出,以及對比按節(jié)奏(空間間隔)——破碎的部分形成對比并吸引注意力。

對比輔助功能

閱讀上面提到的所有內(nèi)容,很容易假設(shè)這里的經(jīng)驗法則是對比度越高,設(shè)計越好。然而,事實并非如此:以及任何其他設(shè)計方面太多并不意味著更好。雖然低對比度會使內(nèi)容難以感知和閱讀,但過高的對比度會引起眼睛疲勞,使交互更加困難。

根據(jù)網(wǎng)頁內(nèi)容無障礙指南 2.0,文字的視覺呈現(xiàn)和文字的圖像應(yīng)該堅持至少 7:1的對比度,以下情況除外:

大文本:大文本和大文本圖像的對比度至少為 4.5:1;

裝飾:作為界面組件的一部分的文本或文本圖像,作為裝飾沒有對比度要求。

標(biāo)識:作為徽標(biāo)或品牌名稱一部分的文本沒有最低對比度要求。

注意留白

空白是留空的布局區(qū)域,不僅在對象周圍,還包括對象之間和內(nèi)部。空白是頁面或屏幕上所有對象的一種呼吸空間,因此它極大地影響了 UI 中應(yīng)用的不同類型對比度的有效性。

總結(jié)

生活充滿了對比,無論你會采取什么方面。對于所有的生命,我們必須學(xué)會如何接受這一點,并嘗試享受如此多樣化和不可預(yù)測的生活。與現(xiàn)實相呼應(yīng),設(shè)計也充滿對比,并盡可能多地借鑒。

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

文章來源:站酷   作者:對啊設(shè)計君

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

日歷

鏈接

個人資料

存檔