首頁(yè)

數(shù)字金融產(chǎn)品的安全感設(shè)計(jì)探究

資深UI設(shè)計(jì)者

當(dāng)互聯(lián)網(wǎng)不斷的深入到我們的生活中，我們對(duì)安全感的需求也延續(xù)到了互聯(lián)網(wǎng)使用中，特別體現(xiàn)于互聯(lián)網(wǎng)金融產(chǎn)品。由于其具有風(fēng)險(xiǎn)性、收益性、流動(dòng)性等特點(diǎn)，用戶(hù)對(duì)于資產(chǎn)安全的掌控感更為關(guān)注，產(chǎn)品使用體驗(yàn)欠佳也直接影響客戶(hù)安全感。


以下將基于自身工作總結(jié)和行業(yè)經(jīng)驗(yàn)，聚焦互聯(lián)網(wǎng)金融產(chǎn)品分享和總結(jié)如何向用戶(hù)營(yíng)造安全感。


目錄：

一、需要什么樣的安全感？

二、如何傳達(dá)出安全感？

三、怎樣體現(xiàn)出安全感？




需要什么樣的安全感？


安全感是人類(lèi)最底層的需求，但不同類(lèi)用戶(hù)群體需要的安全感也各有千秋，我們參考第一財(cái)經(jīng)商業(yè)數(shù)據(jù)中心×螞蟻財(cái)富的2019線上理財(cái)人群報(bào)告，將線上理財(cái)?shù)娜巳悍譃樗念?lèi)：

分別是初入職場(chǎng)的95后、職場(chǎng)新興力量的90后、理財(cái)中堅(jiān)力量的80后和經(jīng)歷風(fēng)雨的70后。其中近一年的新增移動(dòng)互聯(lián)網(wǎng)基民中超五層為90后、95后，成為金融移動(dòng)互聯(lián)網(wǎng)的中堅(jiān)力量。


這類(lèi)型的投資者由于具有碎片化處理事務(wù)的習(xí)慣和金融知識(shí)不足、理財(cái)經(jīng)驗(yàn)不豐富、資金的抗風(fēng)險(xiǎn)能力不高的特點(diǎn)，當(dāng)市場(chǎng)普遍行情下跌時(shí)，更容易產(chǎn)生焦慮的情緒而導(dǎo)致“割韭菜”，進(jìn)而可能會(huì)影響到卸載APP的行為。根據(jù)Mob研究院的數(shù)據(jù)顯示，在2021年3月天天基金日均卸載用戶(hù)規(guī)模為前兩個(gè)月的6倍，而當(dāng)時(shí)對(duì)應(yīng)的市場(chǎng)行情正為基金普遍大跌。

因此從安全感的需求上他們更側(cè)重高效的信息降維、足夠的理財(cái)產(chǎn)品的風(fēng)險(xiǎn)提示、合理的預(yù)期收益宣傳以及投后虧損及時(shí)的內(nèi)容陪伴。


而根據(jù)騰訊理財(cái)通×國(guó)家金融與發(fā)展實(shí)驗(yàn)室出品的2021年互聯(lián)網(wǎng)理財(cái)行為與安全研究報(bào)告顯示，理財(cái)知識(shí)更充足，理財(cái)經(jīng)驗(yàn)更豐富的80后、70后在安全感的維護(hù)上則更關(guān)注理財(cái)產(chǎn)品的信息披露風(fēng)險(xiǎn)、信息不透明風(fēng)險(xiǎn)、市場(chǎng)政策風(fēng)險(xiǎn)、個(gè)人信息泄露風(fēng)險(xiǎn)此類(lèi)問(wèn)題。




如何傳達(dá)出安全感？


安全感是一種感性的心理感受，而人類(lèi)的情感由本能、行為、反思三個(gè)層面共同決定的。

這三個(gè)層次作為人類(lèi)大腦的運(yùn)作的規(guī)律，映射到設(shè)計(jì)當(dāng)中，同樣是可供遵循、值得探究的。



本能層

先于意識(shí)和思維，它是外觀要素和第一印象形成的基礎(chǔ)，著重于產(chǎn)品的外觀、觸感等?！懊烙^即實(shí)用原則”人們會(huì)潛意識(shí)里認(rèn)為好看的東西也是好用的，所以在界面設(shè)計(jì)當(dāng)中，主要設(shè)計(jì)對(duì)象是視覺(jué)設(shè)計(jì)。


而金融產(chǎn)品中，常用藍(lán)、綠等冷色調(diào)的色彩，給人以冷靜，穩(wěn)定的感覺(jué)，表現(xiàn)金融產(chǎn)品的科技感和可靠性；常用紅、黃、橙等暖色調(diào)，代表著熱情、溫暖與責(zé)任。


行為層

是人類(lèi)身體日常行為的運(yùn)作，行為層的設(shè)計(jì)與產(chǎn)品使用過(guò)程中的愉悅感和效率有關(guān)。好的行為層設(shè)計(jì)對(duì)應(yīng)產(chǎn)品功能傳達(dá)、易學(xué)性與易用性，以及正面的心情感受。在界面設(shè)計(jì)當(dāng)中，主要設(shè)計(jì)對(duì)象是交互設(shè)計(jì)。（將在下文通過(guò)投資場(chǎng)景詳細(xì)分析）



反思層

超越了本能層和行為層，存在意識(shí)和更高級(jí)的感覺(jué)、情緒及知覺(jué)。對(duì)應(yīng)的是產(chǎn)品的情感溫度，主要的設(shè)計(jì)對(duì)象是正向情感的結(jié)果反饋以及品牌信任。


良好的企業(yè)品牌形象和口碑很大程度上會(huì)給用戶(hù)帶來(lái)認(rèn)知上的安全感。用戶(hù)在初次選擇購(gòu)買(mǎi)金融產(chǎn)品時(shí)，往往強(qiáng)大的品牌背書(shū)起到了關(guān)鍵作用，即使是同一只基金，用戶(hù)也會(huì)選擇在自己信賴(lài)的平臺(tái)里購(gòu)買(mǎi)。

我們可以通過(guò)在頁(yè)面設(shè)計(jì)中加入更多的品牌元素，如品牌主題色、LOGO、品牌IP形象、品牌slogan等，來(lái)潛移默化地讓用戶(hù)感受企業(yè)的價(jià)值：


另一種常見(jiàn)于一些平臺(tái)利用強(qiáng)大的背書(shū)以及所獲的成就，清晰地向用戶(hù)展示可以提供的保障權(quán)益，責(zé)任條款及資質(zhì)介紹等來(lái)傳達(dá)企業(yè)對(duì)用戶(hù)負(fù)責(zé)的態(tài)度，提升用戶(hù)對(duì)產(chǎn)品乃至對(duì)企業(yè)的信任感：




如何體現(xiàn)出安全感？


我們將金融的生命周期分為三個(gè)階段，分別可以概括為：投資前（產(chǎn)品選擇）、投資中（產(chǎn)品交易）、投資后（產(chǎn)品管理），不同階段的關(guān)注點(diǎn)不同，而對(duì)于安全感需求各不相同：



投資前

結(jié)合文章一開(kāi)始對(duì)人群的分析，由于投前的行為特點(diǎn)更多聚焦于產(chǎn)品的選擇，因此從理財(cái)小白的角度對(duì)于安全感的缺乏更集中于“買(mǎi)了會(huì)不會(huì)虧錢(qián)？”、“產(chǎn)品買(mǎi)對(duì)了嗎”、“看不懂規(guī)則”、“這個(gè)適合我嗎”等，尤其存在于一些新形式的理財(cái)組合產(chǎn)品和策略智能投產(chǎn)品中。


在這個(gè)階段的安全感維護(hù)，除了相關(guān)頁(yè)面的信息降維、必要的投教啟蒙以外，還需要考慮用戶(hù)疑問(wèn)的快速解答、合理的預(yù)期收益宣傳等。另外投錢(qián)的啟蒙教育更可以考慮結(jié)合一些運(yùn)營(yíng)活動(dòng)，讓小白用戶(hù)通過(guò)更有趣的方法了解產(chǎn)品，了解自己適合的產(chǎn)品。

而對(duì)于較有經(jīng)驗(yàn)的理財(cái)“老司機(jī)”而言，安全感的缺乏更集中于“過(guò)往表現(xiàn)怎么樣，如最大回測(cè)率等”、“市場(chǎng)行情、政策是否利好”、“基金經(jīng)理的資歷”等，而更需要考慮信息的多維度展示、信息披露、行情資訊的展示、甚至是產(chǎn)品的對(duì)比等來(lái)表達(dá)產(chǎn)品的未來(lái)盈收能力可期。


投資中

當(dāng)投資者已經(jīng)選擇好信任的理財(cái)產(chǎn)品時(shí)，在產(chǎn)品交易的各個(gè)界面也需要關(guān)注交易流程中安全感的反饋。

其中包括正向反饋和負(fù)向反饋。正向反饋是指用戶(hù)跟產(chǎn)品發(fā)生正確的交互時(shí)，系統(tǒng)給予用戶(hù)的正確引導(dǎo)，可以幫助用戶(hù)打消顧慮，建立信心，讓用戶(hù)感受到一切都在順利地進(jìn)行著，這對(duì)那些在設(shè)備操作方面缺乏信心的用戶(hù)來(lái)說(shuō)尤為重要，用戶(hù)不會(huì)對(duì)自己的操作或?qū)ζ脚_(tái)產(chǎn)生質(zhì)疑，如：專(zhuān)屬的密碼輸入鍵盤(pán)、正向反饋如金額輸入時(shí)的金額提示、特別提出易誤解的交易規(guī)則等


而反向反饋是指用戶(hù)在操作過(guò)程中出現(xiàn)或疑似出現(xiàn)誤操作時(shí)，系統(tǒng)向用戶(hù)展示提示或二次確認(rèn)以促進(jìn)錯(cuò)誤的糾正或確保此操作無(wú)誤。它能確保在第一時(shí)間告知用戶(hù)出現(xiàn)了不正確操作，及時(shí)更改，使流程順利進(jìn)行，尤其是對(duì)于一些理財(cái)小白而言，合理的容錯(cuò)設(shè)計(jì)更促進(jìn)有效投資，提高未來(lái)的盈利體驗(yàn)。如撤銷(xiāo)操作二次確認(rèn)、購(gòu)買(mǎi)超出風(fēng)險(xiǎn)承受能力的產(chǎn)品、輸入錯(cuò)誤金額時(shí)的反饋。

引起思考：

雖然天天基金的撤單確認(rèn)展示了退回帳戶(hù)，但是此彈窗的取消按鈕引導(dǎo)性過(guò)強(qiáng)，首次操作僅通過(guò)銀行卡的列表的箭頭較難聯(lián)想到是確認(rèn)撤單的下一步操作（還以為是可選擇退的帳戶(hù)）。



投資后

產(chǎn)品交易成功后，投資者的關(guān)注會(huì)更集中于自己的資產(chǎn)的變化，產(chǎn)品的未來(lái)走勢(shì)等，因此在安全感的提供上，需要向投資者傳達(dá)準(zhǔn)確的交易狀態(tài)、資產(chǎn)狀態(tài)、資產(chǎn)的保護(hù)等，甚至可以在產(chǎn)品購(gòu)買(mǎi)的完成頁(yè)設(shè)置快捷加入自選和漲跌提醒等

引起思考：

在支付寶的基金總金額中，存在交易進(jìn)行中的提示文案為“買(mǎi)入待確認(rèn)*元”，但不少小白會(huì)產(chǎn)生疑問(wèn)，當(dāng)前展示的基金總金額是否包含提示的待確認(rèn)金額，此時(shí)是否可將文案改為“含買(mǎi)入待確認(rèn)*元”（畢竟也有部分直銷(xiāo)app并不會(huì)將待確認(rèn)金額包含進(jìn)產(chǎn)品的總金額中）


另一方面的更需要考慮當(dāng)基金產(chǎn)品存在虧損時(shí)，及時(shí)向投資者傳達(dá)情感陪伴和合理的投資交易，以促進(jìn)投資者優(yōu)化持倉(cāng)或保持中長(zhǎng)期持有，避免頻繁的短期交易而導(dǎo)致不良的盈利體驗(yàn)。

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

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


文章來(lái)源：站酷 作者：陳皮紅豆沙

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

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

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


評(píng)論(0) 瀏覽(2237)

input 輸入框獲得/失去焦點(diǎn)時(shí)隱藏/顯示文字(jquery版)

前端達(dá)人

input輸入框在獲得或失去焦點(diǎn)時(shí)隱藏或顯示文字，這樣的焦點(diǎn)效果想必很多朋友在填寫(xiě)form表格的時(shí)候都曾見(jiàn)識(shí)過(guò)吧，本文使用jquery實(shí)現(xiàn)以下，感興趣的朋友可以參考下哈

大家可以看效果圖的搜索輸入框，默認(rèn)顯示著“用戶(hù)名/Email”的提示，當(dāng)這個(gè) input 輸入框獲得焦點(diǎn)時(shí)，就自動(dòng)清空等待用戶(hù)輸入，當(dāng)用戶(hù)啥也沒(méi)輸入就離開(kāi)這個(gè) input 輸入框時(shí)，輸入框內(nèi)又再次顯示“用戶(hù)名/Email”的提示。是不是很常見(jiàn)？很多搜索、登錄、表單都會(huì)用到這個(gè)效果，但是我看了N多個(gè)網(wǎng)站，有90%以上是這么實(shí)現(xiàn)的：  

<input type="text" value="搜索關(guān)鍵字" onfocus="if(this.value == '搜索關(guān)鍵字') this.value = ''" onblur="if(this.value =='') this.value = '搜索關(guān)鍵字'" />

我是非常反對(duì)把 javascript 寫(xiě)在 html 標(biāo)簽里的，這和 style 寫(xiě)在 html 標(biāo)簽里一樣，雖然不違反 W3C 標(biāo)準(zhǔn)，但也不推薦這么寫(xiě)。因?yàn)椋?nbsp;
1.完全沒(méi)有復(fù)用性可言，如果是個(gè)表單，輸入框很多，每個(gè)都需要這樣的效果，那就每個(gè)都這么處理嗎？ 
2.如果要修改其中的提示文字，費(fèi)時(shí)費(fèi)力又不好維護(hù)。 
3.我們倡導(dǎo)結(jié)構(gòu)（html）、表現(xiàn)（css）、行為（javascript）三者分離，這才是一個(gè)好的頁(yè)面。 
那要怎么寫(xiě)才能實(shí)現(xiàn)這個(gè)效果，而且既有復(fù)用性，又好維護(hù)，又不需要把 js 寫(xiě)進(jìn) html 里呢？ 
具體方法如下: 
首先肯定是引入jQuery 
Html代碼:  

<div><input type="text" value="提示測(cè)試" class="input_test" /></div> 
<div><input type="text" value="請(qǐng)輸入搜索關(guān)鍵" class="input_test" /></div>

jQuery代碼: 

復(fù)制代碼 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> $(function(){ 
$('.input_test').bind({ 
focus:function(){ if (this.value == this.defaultValue){ this.value=""; 
} 
}, 
blur:function(){ if (this.value == ""){ this.value = this.defaultValue; 
} 
} 
}); 
}) </script>
復(fù)制代碼

只要在實(shí)現(xiàn)的input輸入框加上”input_test”這個(gè)class就可以輕松實(shí)現(xiàn)了 




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

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



文章來(lái)源：博客園

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

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

評(píng)論(0) 瀏覽(2112)

jquery控制元素的隱藏和顯示的幾種方法

前端達(dá)人

使用jquery控制div的顯示與隱藏，一句話就能搞定，例如：

 

方法一

顯示： 

$("#id").show()表示為display：block，

隱藏： 

$("#id").hide()表示為display:none;

 

方法二 

$("#id").toggle();

切換元素的可見(jiàn)狀態(tài)。如果元素是可見(jiàn)的，切換為隱藏的；

如果元素是隱藏的，則切換為可見(jiàn)的。

 

方法三

顯示： 

$("#id").css('display','block');//顯示

隱藏： 

$("#id").css('display','none');//隱藏

或者 

$("#id")[0].style.display='none';

display = none 控制對(duì)象的隱藏

display = block控制對(duì)象的顯示

 

方法四：

元素顯示： 

$("#id").css('visibility','visible');//元素顯示

元素隱藏： 

$("#id").css('visibility','hidden');//元素隱藏

CSS visibility 屬性規(guī)定元素是否可見(jiàn)。
visible 元素可見(jiàn)。 
hidden 元素不可見(jiàn)。 
collapse 在表格元素中使用時(shí)，此值可刪除一行或一列，但它不影響表格的布局。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。如果此值被用在其他的元素上，會(huì)呈現(xiàn)為 "hidden"。 
inherit 從父元素繼承 visibility 屬性的值。

注意：

display:none和visible:hidden都能把網(wǎng)頁(yè)上某個(gè)元素隱藏起來(lái)，在視覺(jué)效果上沒(méi)有區(qū)別，但是在一些DOM操作中兩者有區(qū)別:

display:none ---不為被隱藏的對(duì)象保留其物理空間，即該對(duì)象在頁(yè)面上徹底消失，通俗來(lái)說(shuō)就是看不見(jiàn)也摸不到。

visible:hidden--- 使對(duì)象在網(wǎng)頁(yè)上不可見(jiàn)，但該對(duì)象在網(wǎng)頁(yè)上所占的空間沒(méi)有改變，即它仍然具有高度、寬度等屬性，通俗來(lái)說(shuō)就是看不見(jiàn)但摸得到。 



    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                //第1種方法 ,給元素設(shè)置style屬性 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#hidediv").css("display", "block");
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                //第2種方法 ,給元素?fù)Qclass，來(lái)實(shí)現(xiàn)隱藏div，前提是換的class樣式定義好了隱藏屬性 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#hidediv").attr("class", "blockclass");
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                //第3種方法,通過(guò)jquery的css方法，設(shè)置div隱藏 
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#blockdiv").css("display", "none");
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#hidediv").show();//顯示div 
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#blockdiv").hide();//隱藏div 
            
    

        
    

    
    10. 




 


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

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



文章來(lái)源：csdn

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

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

評(píng)論(0) 瀏覽(2114)

為什么以前的同學(xué)和你的差距越來(lái)越大

seo達(dá)人


之前刷到一條非常勵(lì)志的新聞：一個(gè)高中寢室的三個(gè)閨蜜都考出了七百多分的好成績(jī)，在為她們感到驕傲的同時(shí)，我也陷入了反思。這也許就是所謂的圈子，身邊的人都很優(yōu)秀的時(shí)候，你自然不會(huì)太差。

 也讓我想起了之前一個(gè)伙伴通過(guò)努力進(jìn)了字節(jié)跳動(dòng)實(shí)習(xí)，帶動(dòng)了整個(gè)寢室的都努力起來(lái)了。大家依然希望向優(yōu)秀的人學(xué)習(xí)，以此作為自己的目標(biāo)。一起讀書(shū)的時(shí)候大家都在一條起跑線，可是隨著時(shí)間的推移，你們之間的差距開(kāi)始明顯。如果你跑在前面自然是好事，就怕落后的是自己。

 不進(jìn)則退，工作多年之后反思自己，這些年是進(jìn)步了還是原地踏步。如果想要縮短與他人的差距，或者拉開(kāi)自己未來(lái)的優(yōu)勢(shì)，在職場(chǎng)五年內(nèi)需要重點(diǎn)對(duì)待。

圖片

 

五年內(nèi)你要做好這十件事：

一、確定職場(chǎng)路徑

二、強(qiáng)化設(shè)計(jì)基礎(chǔ)

三、打造精專(zhuān)技能

四、勤于作品輸出

五、培養(yǎng)總結(jié)能力

六、加強(qiáng)提案能力

七、疊加行業(yè)背書(shū)

八、推開(kāi)學(xué)歷門(mén)檻

九、融入優(yōu)質(zhì)圈子

十、積累職場(chǎng)口碑

 

一  確定職場(chǎng)路徑 

行業(yè)里面流傳著一句話：“三年入行，五年精專(zhuān)”，職場(chǎng)五年對(duì)于設(shè)計(jì)師來(lái)說(shuō)至關(guān)重要。想要在這個(gè)階段時(shí)間內(nèi)把一個(gè)方向做精，需要早一點(diǎn)確定職場(chǎng)路徑，雜而不精很難邁上更高的臺(tái)階。

圖片

 我們可以豐富我們的專(zhuān)業(yè)技能，但是要明確一點(diǎn)，這些多維度的技能都是為了輔助主方向的深入突破。專(zhuān)業(yè)化的職場(chǎng)路徑上比較忌諱舉棋不定，這樣就會(huì)造成能力平庸，沒(méi)有自己的差異化競(jìng)爭(zhēng)力。

 也有初入職場(chǎng)的同學(xué)無(wú)法判斷哪一個(gè)路徑適合自己，就會(huì)需要時(shí)間來(lái)驗(yàn)證，這種情況下可以找個(gè)有經(jīng)驗(yàn)的前輩為你分析各路徑的天花板在哪里。盡量縮短這個(gè)試錯(cuò)的時(shí)間，畢竟五年也是一晃而過(guò)的。

圖片

 大家進(jìn)行自我評(píng)估，看看你的職場(chǎng)路徑是否清晰，及時(shí)穩(wěn)固方向。

 

二  強(qiáng)化設(shè)計(jì)基礎(chǔ) 

大家不要一味的追求表面的高度，而忽略基礎(chǔ)知識(shí)的鞏固，這也是為什么大部分科班出身的設(shè)計(jì)師上手能力都會(huì)更好一些。不要局限于當(dāng)前工作輸出的能力范圍，要加強(qiáng)更多關(guān)聯(lián)方向的基礎(chǔ)理論知識(shí)和經(jīng)驗(yàn)技巧。

圖片

 一些基礎(chǔ)的美術(shù)知識(shí)、版式技巧、色彩理論、手繪基礎(chǔ)、造型透視等都要利用空余時(shí)間學(xué)習(xí)，有些內(nèi)容短時(shí)間可能感受不出作用，但是在未來(lái)也許就是你設(shè)計(jì)瓶頸的突破劑。

圖片

 給自己制定一些閱讀計(jì)劃和學(xué)習(xí)計(jì)劃，強(qiáng)化設(shè)計(jì)基礎(chǔ)，只有地基越牢固，職場(chǎng)大樓才能建得越高。

 

三  打造精專(zhuān)技能 

雖然我們都在說(shuō)技多不壓身，但是這個(gè)作為滿足普通的工作需求沒(méi)問(wèn)題，想要有自身的差異需要打造精專(zhuān)技能。我們?nèi)鄙俚挠肋h(yuǎn)不是普工，而是高技能人才，要在一個(gè)垂直方向有自己的“拿手好戲”。

想要在一個(gè)階段時(shí)間內(nèi)快速突破，就需要縮短我們的技能范圍，重點(diǎn)強(qiáng)化一個(gè)方向。最快的方法就是通過(guò)輸出倒逼輸入，在一個(gè)精專(zhuān)的方向里面堅(jiān)持日常輸出，不斷的進(jìn)行復(fù)盤(pán)總結(jié)。對(duì)關(guān)聯(lián)的知識(shí)進(jìn)行查漏補(bǔ)缺，對(duì)偏弱的技能反復(fù)磨練。

圖片

 在設(shè)計(jì)職場(chǎng)中我們雖然講究“T”型發(fā)展，但是主干上的精專(zhuān)才是支撐技能高樓的關(guān)鍵。

 

四  勤于作品輸出 

 技術(shù)能力的養(yǎng)成離不開(kāi)點(diǎn)點(diǎn)滴滴的磨練，而對(duì)于設(shè)計(jì)師來(lái)說(shuō)，證明自己能力最有效的方法就是作品。光說(shuō)不練假把式，道理說(shuō)得頭頭是道，作品做得一塌糊涂，肯定是得不到行業(yè)認(rèn)可的。

 專(zhuān)業(yè)能力的增長(zhǎng)都是需要自我驅(qū)動(dòng)的，不要僅局限于工作環(huán)境中的積累，日常的學(xué)習(xí)沉淀、作品輸出、復(fù)盤(pán)總結(jié)等也是至關(guān)重要。要勤于作品輸出，反復(fù)設(shè)計(jì)才能找出更多問(wèn)題，進(jìn)而不斷解決問(wèn)題，獲得經(jīng)驗(yàn)和技巧。

圖片

 對(duì)于 UI設(shè)計(jì)師來(lái)說(shuō)，當(dāng)具備軟件基礎(chǔ)和設(shè)計(jì)基礎(chǔ)之后，剛開(kāi)始可以每天練習(xí) 1-2 個(gè)界面（具備交互關(guān)聯(lián)的組合界面）。只要堅(jiān)持下去，在視覺(jué)層面不難攻破。然后再逐步練習(xí)成套作品的輸出，鍛煉自己對(duì)于全案設(shè)計(jì)的把控，加強(qiáng)獨(dú)立完成項(xiàng)目的能力。后期也要培養(yǎng)寫(xiě)作性質(zhì)的作品輸出，加強(qiáng)設(shè)計(jì)總結(jié)能力和方法論的輸出能力，讓作品輸出的形式不局限于視覺(jué)層面。

圖片

 

五  培養(yǎng)總結(jié)能力 

設(shè)計(jì)師的總結(jié)能力在初入職場(chǎng)的時(shí)候并不能被大家所重視，這個(gè)時(shí)候執(zhí)行層面的能力比較重要，這是保障你完成基本需求的關(guān)鍵。隨著項(xiàng)目經(jīng)驗(yàn)的豐富和執(zhí)行能力的成熟，我們會(huì)要求完成難度系數(shù)更高的項(xiàng)目，會(huì)去對(duì)設(shè)計(jì)經(jīng)驗(yàn)進(jìn)行總結(jié)和研究設(shè)計(jì)方法論。

對(duì)優(yōu)秀設(shè)計(jì)經(jīng)驗(yàn)和設(shè)計(jì)技巧的總結(jié)，可以讓我們掌握設(shè)計(jì)的軌跡，沉淀于自己的項(xiàng)目中。對(duì)于 UI 設(shè)計(jì)師來(lái)說(shuō)，培養(yǎng)總結(jié)能力要從產(chǎn)品體驗(yàn)日記開(kāi)始，訓(xùn)練我們的觀察和記錄能力，也是養(yǎng)成習(xí)慣的關(guān)鍵。記錄過(guò)程中的文案描述，從最開(kāi)始的口語(yǔ)化逐步培養(yǎng)行業(yè)術(shù)語(yǔ)的運(yùn)用；從流水賬式的記錄逐步學(xué)會(huì)精簡(jiǎn)，言簡(jiǎn)意賅的說(shuō)清楚所見(jiàn)所感。

圖片

 總結(jié)能力的提升可以從教程式文章開(kāi)始，把自己擅長(zhǎng)的某個(gè)設(shè)計(jì)經(jīng)驗(yàn)梳理出來(lái)，這也是查漏補(bǔ)缺的過(guò)程。逐步過(guò)渡到對(duì)行業(yè)趨勢(shì)的總結(jié)、設(shè)計(jì)技巧的總結(jié)、項(xiàng)目經(jīng)驗(yàn)的總結(jié)、職場(chǎng)經(jīng)驗(yàn)的總結(jié)等。剛開(kāi)始不要寫(xiě)太寬泛的總結(jié)，以一個(gè)單一的點(diǎn)開(kāi)始總結(jié)，以點(diǎn)帶面的總結(jié)出這類(lèi)需求設(shè)計(jì)的方法和技巧，形成可供他人學(xué)習(xí)的方法論。

 

六  加強(qiáng)提案能力 

能夠做出好的設(shè)計(jì)，也要具備好的提案能力，設(shè)計(jì)需要被賦予詮釋才能打動(dòng)人心。我們不能只是畫(huà)好圖就丟給需求方，這樣他們會(huì)使用自我主觀意識(shí)去判斷，無(wú)法真正意義上了解你的設(shè)計(jì)想法。

提案能力對(duì)于設(shè)計(jì)師來(lái)說(shuō)至關(guān)重要，分為設(shè)計(jì)思路整理、提案文檔制作、演講能力、臨場(chǎng)控制能力、答疑解惑能力等。在項(xiàng)目中能有機(jī)會(huì)進(jìn)行提案千萬(wàn)不要推辭，這是鍛煉自己的機(jī)會(huì)。有些設(shè)計(jì)師由于性格內(nèi)向會(huì)讓同事代勞，這其實(shí)是在白白浪費(fèi)機(jī)會(huì)，跳出舒適區(qū)才能更快的成長(zhǎng)。

圖片

 在職場(chǎng)中除了爭(zhēng)取機(jī)會(huì)進(jìn)行項(xiàng)目提案以外，也可以多參與一些分享來(lái)提升這方面的能力，刻意培養(yǎng)自己。

 

七  疊加行業(yè)背書(shū) 

其實(shí)很多初入職場(chǎng)的設(shè)計(jì)師容易忽略行業(yè)背書(shū)這個(gè)概念，覺(jué)得只要有份輕松的工作就好，最好錢(qián)多活少離家近。工作幾年后才恍然大悟，發(fā)現(xiàn)行業(yè)背書(shū)的重要性。

行業(yè)背書(shū)就相當(dāng)于推動(dòng)求職的“催化劑”，可以讓我們獲得更好的機(jī)會(huì)。組成我們行業(yè)背書(shū)的因素很多：好的學(xué)歷背景、大公司的工作經(jīng)驗(yàn)、知名項(xiàng)目的參與經(jīng)驗(yàn)、設(shè)計(jì)大賽的獲獎(jiǎng)作品、專(zhuān)業(yè)設(shè)計(jì)平臺(tái)的推薦設(shè)計(jì)師、行業(yè)內(nèi)的影響力等等。還有很多都可以疊加為我們的行業(yè)背書(shū)，我們要不斷去疊加，增加我們求職簡(jiǎn)歷的“含金量”。

圖片

 

八  推開(kāi)學(xué)歷門(mén)檻 

對(duì)于設(shè)計(jì)師來(lái)說(shuō)學(xué)歷是敲門(mén)磚的作用，特別是一些大廠的招聘需求，會(huì)對(duì)學(xué)歷有一個(gè)門(mén)檻限制。不過(guò)在日常工作中，你會(huì)發(fā)現(xiàn)學(xué)歷并不是絕對(duì)的能力體現(xiàn)，專(zhuān)業(yè)能力的強(qiáng)弱與學(xué)歷的高低并沒(méi)有太大的關(guān)系。如果學(xué)習(xí)能力比較強(qiáng)的，大學(xué)基礎(chǔ)知識(shí)學(xué)得比較好的，在職場(chǎng)中的適應(yīng)能力也許會(huì)更好。

圖片

 雖然專(zhuān)業(yè)能力是我們的首要條件，但是我們也不能被學(xué)歷限制，現(xiàn)在提升學(xué)歷的方法很多，宜早不宜晚。要早點(diǎn)做好時(shí)間規(guī)劃，把這個(gè)問(wèn)題解決掉，后期才能把精力重點(diǎn)放在專(zhuān)業(yè)的精進(jìn)上面。

 

九  融入優(yōu)質(zhì)圈子 

在一個(gè)行業(yè)工作時(shí)間久了，就會(huì)認(rèn)識(shí)更多的同行設(shè)計(jì)師，久而久之就形成了自己的人脈和圈子。在后期圈子也會(huì)決定著自己的未來(lái)，比如想要去大的公司，要是有認(rèn)識(shí)的朋友內(nèi)推一下，效率就會(huì)比普通的投遞方式要快很多。在一個(gè)優(yōu)質(zhì)的圈子里面，大家都是優(yōu)秀的設(shè)計(jì)師，自然會(huì)被帶動(dòng)著互相進(jìn)步。

圖片

 在自己的第一個(gè)職場(chǎng)五年內(nèi)，要不斷的積累屬于自己的人脈和融入優(yōu)質(zhì)的圈子，認(rèn)識(shí)更多有能力的設(shè)計(jì)師。從優(yōu)秀的人那里可以獲取更多優(yōu)質(zhì)的動(dòng)態(tài)，建立一個(gè)印象之后，以后遇到問(wèn)題也可以請(qǐng)教他人，獲得解決思路和方向。

圖片

 通過(guò)一些設(shè)計(jì)公眾號(hào)的關(guān)注、設(shè)計(jì)平臺(tái)的交流、線下分享會(huì)的接觸、進(jìn)階特訓(xùn)的學(xué)習(xí)渠道、社群的加入等可以接觸一些設(shè)計(jì)圈子，篩選自己覺(jué)得優(yōu)質(zhì)的融入。有時(shí)候也要在圈子內(nèi)解答別人問(wèn)題和分享自己的經(jīng)驗(yàn)，以此來(lái)加深大家對(duì)你的印象，以后遇到問(wèn)題拋出來(lái)的時(shí)候才會(huì)有更多人愿意交流，互相幫助！

 

十  積累職場(chǎng)口碑 

隨著我們工作年限的增加和工作單位的轉(zhuǎn)換，我們會(huì)接觸很多不同職業(yè)的同事，而我們?cè)谶@些同事眼中的印象決定了未來(lái)的資源轉(zhuǎn)換程度。如果大家對(duì)你沒(méi)有印象或者印象不好，遇到設(shè)計(jì)需求或者機(jī)遇，估計(jì)也不會(huì)想到你，我們?cè)诼殘?chǎng)中的口碑就顯得格外重要。

我們?cè)诼殘?chǎng)中都會(huì)被標(biāo)簽化，大家都會(huì)在腦海中對(duì)你形成標(biāo)簽記憶。比如你是靠譜還是不靠譜、專(zhuān)業(yè)還是不專(zhuān)業(yè)、好相處還是高傲難相處等等，和你接觸的人對(duì)你的標(biāo)簽設(shè)定越好，以后無(wú)論是面對(duì)機(jī)遇，還是你有求于人的時(shí)候，都會(huì)因?yàn)檫@個(gè)好的印象而愿意幫助你。反之，可能會(huì)遺忘你，注定只是別人職場(chǎng)中的一個(gè)“過(guò)客”。

圖片

 在職場(chǎng)中要注重職場(chǎng)禮儀，這個(gè)和你的專(zhuān)業(yè)能力同樣重要。不同的環(huán)境要學(xué)會(huì)約束自己的行為，而職場(chǎng)是一個(gè)帶著約束性的場(chǎng)景，你的態(tài)度也是別人對(duì)你的態(tài)度，都是互相作用的。

 

總結(jié) 

 三年入行，五年精轉(zhuǎn)。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，第一個(gè)職場(chǎng)五年至關(guān)重要，不僅需要將專(zhuān)業(yè)能力提升到高級(jí)/資深的階段，職場(chǎng)經(jīng)驗(yàn)和人脈的積累也決定了第一個(gè)職場(chǎng)五年的變化。是原地踏步還是極速前進(jìn)，都在五年之后開(kāi)始發(fā)力。

五年的積累可以讓我們具備專(zhuān)業(yè)層面的獨(dú)當(dāng)一面，也能讓我們具備放手一搏的經(jīng)驗(yàn)和資源，想要突破瓶頸期就要打好基礎(chǔ)，這樣才能走得更高，看得更遠(yuǎn)。

希望這些個(gè)人的職場(chǎng)反思可以帶給大家拋磚引玉的思考，對(duì)于剛?cè)胄械脑O(shè)計(jì)新人有一個(gè)計(jì)劃的指導(dǎo)；對(duì)于在職的設(shè)計(jì)師有一些調(diào)整方向的參考。

備注：本文配圖來(lái)源于 Unsplash

 

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

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》為什么以前的同學(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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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


文章來(lái)源：站酷   作者：陳皮Celia 

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

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



評(píng)論(0) 瀏覽(1673)

做了5年設(shè)計(jì)，還是這個(gè)設(shè)計(jì)技巧實(shí)用??！

seo達(dá)人



終于迎來(lái)了一年中最熱的時(shí)候，整個(gè)人都感覺(jué)熱膨脹了，似乎空調(diào)也變?nèi)趿嗽S多，每天只想著一頭扎進(jìn)冰箱，可能這才是夏天的最優(yōu)解。今天就以大暑為主題設(shè)計(jì)一款字體，看看如何讓一個(gè)字看起來(lái)非常熱。

 

首先將文字整理好。

圖片

 

STEP 01 > 分析屬性

接著我們分析字體屬性，上次小暑是想體現(xiàn)涼爽，那么這次我們來(lái)表現(xiàn)特別熱的感覺(jué)。

圖片

根據(jù)分析出的屬性，我們先構(gòu)思好風(fēng)格方向，胖胖的字體，要體現(xiàn)熱的感覺(jué)。

圖片

 

STEP 02 > 設(shè)計(jì)字體

下面將編排形式以圖框形式畫(huà)出來(lái)，這里可以看出是烈日和主題字結(jié)合的形式，筆畫(huà)風(fēng)格就是比較胖的設(shè)定。

圖片

我們開(kāi)始具體操作，這里我們用畫(huà)筆先畫(huà)出大概的草圖，接著細(xì)化文字。

圖片

做好字形之后，我們將兩個(gè)字靠近，很擠的感覺(jué)，中間可以加上一些連接特征，減去部分筆畫(huà)線條，使層次疊壓更明顯。

圖片

然后我們?cè)倮^續(xù)增加特征，加一些汗珠和流汗的感覺(jué)。

圖片

接著我們需要對(duì)字體進(jìn)行編排，按照之前畫(huà)出的圖框，畫(huà)好烈日與文字疊壓。

圖片

最后我們可以用褶皺工具做出抖動(dòng)的效果，熱浪的感覺(jué)就有了。

圖片

 

STEP 03 > 搭配顏色

最后就是搭配顏色，這里底色我用了深藍(lán)色，可以更好的突出設(shè)計(jì)效果。

圖片

OK，字體做完了，學(xué)會(huì)提取屬性的特征，會(huì)使你的設(shè)計(jì)更有意思，技法只是其中一個(gè)環(huán)節(jié)，想法是非常關(guān)鍵的一步。

 

原文地址：趣投記（公眾號(hào)）

作者：趣趣熊

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》做了5年設(shè)計(jì)，還是這個(gè)設(shè)計(jì)技巧實(shí)用?。?br />

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

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


文章來(lái)源：站酷   作者：陳皮Celia 

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

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



評(píng)論(0) 瀏覽(1704)

深度解析螞蟻Ant Design的設(shè)計(jì)原則

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



『 Ant Design是什么 』


眾所周知螞蟻集團(tuán)的B端產(chǎn)品是一個(gè)龐大的系統(tǒng)，數(shù)量多且功能復(fù)雜，而且變動(dòng)頻繁，常常需要設(shè)計(jì)師和開(kāi)發(fā)人員能快速做出工作上的配合。同時(shí)這類(lèi)產(chǎn)品中有存在很多類(lèi)似的頁(yè)面以及組件，根據(jù)原子設(shè)計(jì)理論可以得到一些穩(wěn)定且高復(fù)用性的內(nèi)容。

隨著這兩年B端產(chǎn)品的逐漸白熱化，越來(lái)越多的用戶(hù)對(duì)更好的用戶(hù)體驗(yàn)有了進(jìn)一步的要求。帶著這樣的一個(gè)終極目標(biāo)，螞蟻集團(tuán)體經(jīng)過(guò)大量項(xiàng)目實(shí)踐和總結(jié)，逐步打磨出一個(gè)服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系 —— Ant Design。通過(guò)組件化設(shè)計(jì)規(guī)范，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專(zhuān)注于更好的用戶(hù)體驗(yàn)。



『 Ant Design設(shè)計(jì)原則是什么 』


針對(duì)B端產(chǎn)品反復(fù)出現(xiàn)的一些設(shè)計(jì)體驗(yàn)等問(wèn)題， Ant Design 給出標(biāo)準(zhǔn)的設(shè)計(jì)原則，實(shí)現(xiàn)跨應(yīng)用交互一致性的有效融合。依照這些原則使用 Ant Design 組件設(shè)計(jì)界面，既減少了不必要的認(rèn)知成本，又能夠提升設(shè)計(jì)的效率?？紤]到需要適應(yīng)各種定制化的業(yè)務(wù)場(chǎng)景，設(shè)計(jì)原則具有一定的靈活性，萬(wàn)變不離其宗，通過(guò)了解設(shè)計(jì)原則的構(gòu)建邏輯，高效組織信息、幫助建立用戶(hù)與界面的互動(dòng)等原則性要求，可以衍生出更具場(chǎng)景特性的設(shè)計(jì)方案。


① Ant Design設(shè)計(jì)原則的由來(lái)

可以說(shuō) Ant design的設(shè)計(jì)規(guī)范攝取了《web界面設(shè)計(jì)》和《寫(xiě)給大家看的設(shè)計(jì)書(shū)》兩本書(shū)中的精華原則，并做了理論之外最佳的設(shè)計(jì)實(shí)踐。其十大設(shè)計(jì)原則反過(guò)來(lái)是對(duì)書(shū)本理論的補(bǔ)充，我在看書(shū)的過(guò)程結(jié)合『Ant Design 』能更好地理解那些原則的釋義。每一個(gè)原則都用了大量通俗易懂的案例來(lái)補(bǔ)充說(shuō)明，這也是為什么國(guó)內(nèi)的企業(yè)一直以來(lái)都很喜歡使用這套組件的原因。


② Ant Design設(shè)計(jì)原則的適用范圍

1. 我們先說(shuō)說(shuō)『Ant Design 』的適用范圍：

稍微了解 Ant Design 的小伙伴都知道，本系統(tǒng)是針對(duì)B端后臺(tái)系統(tǒng)，承載媒介是PC端的瀏覽器。使用的人員主要包括：用戶(hù)體驗(yàn)設(shè)計(jì)師、交互設(shè)計(jì)師、UI設(shè)計(jì)師、前端程序員等。

2. 再說(shuō)說(shuō) 『 Ant Design 設(shè)計(jì)原則 』的適用范圍：

顧名思義『 設(shè)計(jì)原則 』主要是針對(duì)設(shè)計(jì)師在創(chuàng)作頁(yè)面時(shí)依照的標(biāo)準(zhǔn)。雖然『 Ant Design的設(shè)計(jì)原則 』是 Ant Design 系統(tǒng)的一部分，但是前文已經(jīng)提到，此原則是攝取了《web界面設(shè)計(jì)》和《寫(xiě)給大家看的設(shè)計(jì)書(shū)》兩本書(shū)中的精華，所以設(shè)計(jì)師可以把這些原則運(yùn)用到任何的設(shè)計(jì)領(lǐng)域，并不要局限于企業(yè)后臺(tái)系統(tǒng)的PC端產(chǎn)品。

為了方便大家理解，講一個(gè)小故事。故事來(lái)自于《寫(xiě)給大家看的設(shè)計(jì)書(shū)》，作者有一年圣誕節(jié)收到一份禮物——一本關(guān)于植物的百科全書(shū)。作者翻閱之后，發(fā)現(xiàn)其中有一顆叫約書(shū)亞樹(shù)的樹(shù)，造型奇特，自己從未見(jiàn)過(guò)。于是決定出門(mén)轉(zhuǎn)轉(zhuǎn)，然而發(fā)現(xiàn)外面到處都是這種樹(shù)。故事到這里就完了。

可能大家會(huì)想，這個(gè)故事要講一個(gè)什么道理呢？簡(jiǎn)單來(lái)說(shuō)就是，當(dāng)你手中有個(gè)錘子，滿世界都是釘子。當(dāng)你了解到下面要講的十個(gè)設(shè)計(jì)原則后，你會(huì)發(fā)現(xiàn)它們處處都適用。


③ Ant Design設(shè)計(jì)原則的內(nèi)容

十大原則如下：

  • 親密原則（Proximity）

  • 對(duì)齊原則 (Alignment)

  • 對(duì)比原則 (Contrast)

  • 重復(fù)原則 (Repetition)

  • 直截了當(dāng) (Make it Direct)

  • 簡(jiǎn)化交互 (Keep it Lightweight)

  • 足不出戶(hù) (Stay on the Page)

  • 提供邀請(qǐng) (Provide Invitation)

  • 即時(shí)反應(yīng) (React Immediately)

  • 巧用過(guò)渡 (Use Transition)



『 如何運(yùn)用Ant Design的設(shè)計(jì)原則 』


對(duì)于一個(gè)初級(jí)設(shè)計(jì)師而言，想要了解UI用戶(hù)體驗(yàn)等知識(shí)，學(xué)習(xí) Ant Design 的設(shè)計(jì)原則算是比較快能上道的，因?yàn)?Ant Design 是吸取了很多前輩的精華，提煉而成的系統(tǒng)。打個(gè)簡(jiǎn)單的比喻，對(duì)于設(shè)計(jì)師而言 Ant Design 就是設(shè)計(jì)師學(xué)習(xí)『 視覺(jué)規(guī)范 』，掌握『 設(shè)計(jì)原則 』最好的字典。

接下來(lái)我就給大家說(shuō)說(shuō)我是如何快速理解 Ant Design 的這10條設(shè)計(jì)原則并運(yùn)用到工作當(dāng)中。

Ant Design 定義了10條設(shè)計(jì)原則，根據(jù)『 席克定律 』選項(xiàng)太多不易記憶，于是我找到了這些設(shè)計(jì)原則的共通性，將其歸為4類(lèi)，也就是大家只需記住四類(lèi)設(shè)計(jì)原則，在工作中適當(dāng)延展即可。


① 視覺(jué)層級(jí)清晰

包含 Ant Design 的設(shè)計(jì)原則有：『 親密原則 』『 對(duì)齊原則 』『 重復(fù)原則 』『 對(duì)比原則 』。

「視覺(jué)層級(jí)清晰」的重要性體現(xiàn)在 交互前 用戶(hù)看到的內(nèi)容結(jié)構(gòu)是清晰明確的 。一個(gè)層級(jí)混亂的界面，任何信息的傳達(dá)都是無(wú)效的。所以保證清晰的排版布局是人機(jī)交互前的基礎(chǔ)。


1. 親密

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個(gè)視覺(jué)單元；反之，它們的距離就應(yīng)該越遠(yuǎn)，也越像多個(gè)視覺(jué)單元。親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶(hù)對(duì)頁(yè)面結(jié)構(gòu)和信息層次一目了然。


1.1 縱向間距關(guān)系

  • 縱向間距：在 Ant Design 中，通過(guò)「小號(hào)間距」「中號(hào)間距」「大號(hào)間距」這三種規(guī)格來(lái)劃分信息層次結(jié)構(gòu)。這三種規(guī)格分別為：8px（小號(hào)間距）、16px（中號(hào)間距）、24px（大號(hào)間距）。


  • 增加元素：通過(guò)增加「分割線」來(lái)拉開(kāi)層次。在這三種規(guī)格不適用的情況下，可以通過(guò)加減「基礎(chǔ)間距」的倍數(shù)，或者增加元素來(lái)拉開(kāi)信息層次。注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是縱向間距，8 是「基礎(chǔ)間距」。


1.2 橫向間距關(guān)系

  • 組合排布：為了適用不同尺寸的屏幕，在橫向采用柵格布局來(lái)排布組件，從而保證布局的靈活性。（注：柵格是另外一個(gè)模塊的內(nèi)容，這里不贅述。）


  • 復(fù)選框內(nèi)：在一個(gè)組件內(nèi)部，元素的橫向間距也應(yīng)該有所不同。


2. 對(duì)齊

正如「格式塔學(xué)派」中的連續(xù)律（Law of Continuity）所描述的，人類(lèi)的視覺(jué)系統(tǒng)往往傾向于將看到對(duì)象的直線繼續(xù)成為直線，曲線繼續(xù)成為曲線。在界面設(shè)計(jì)中，將元素進(jìn)行對(duì)齊，既符合用戶(hù)的認(rèn)知特性，也能引導(dǎo)視覺(jué)流向，讓用戶(hù)更流暢地接收信息。

格式塔學(xué)派（德語(yǔ)：Gestalttheorie）：是心理學(xué)重要流派之一，興起于 20 世紀(jì)初的德國(guó)，又稱(chēng)為完形心理學(xué)；主張人腦的運(yùn)作原理是整體的，「整體不同于其部件的總和」?！浴妇S基百科」


2.1 文案類(lèi)對(duì)齊

如果頁(yè)面的字段或段落較短、較散時(shí)，需要確定一個(gè)統(tǒng)一的視覺(jué)起點(diǎn)。


  • 推薦使用：標(biāo)題和正文左對(duì)齊，使用了一個(gè)視覺(jué)起點(diǎn)。

  • 不推薦使用：標(biāo)題和正文使用了兩個(gè)視覺(jué)起點(diǎn)，不推薦該種對(duì)齊方式，除非刻意強(qiáng)調(diào)兩者區(qū)別。


2.2 表單類(lèi)對(duì)齊

  • 冒號(hào)對(duì)齊：冒號(hào)對(duì)齊（右對(duì)齊）能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶(hù)眼球順著冒號(hào)的視覺(jué)流，就能找到所有填寫(xiě)項(xiàng)，從而提高填寫(xiě)效率。


2.3 數(shù)字類(lèi)對(duì)齊

為了快速對(duì)比數(shù)值大小，建議所有數(shù)值取相同有效位數(shù)，并且右對(duì)齊。


3. 對(duì)比

對(duì)比是增加視覺(jué)效果最有效方法之一，同時(shí)也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶(hù)快速識(shí)別關(guān)鍵信息。

注：要實(shí)現(xiàn)有效的對(duì)比，對(duì)比就必須強(qiáng)烈，切不可畏畏縮縮。


3.1 主次關(guān)系對(duì)比

為了讓用戶(hù)能在操作上（類(lèi)似表單、彈出框等場(chǎng)景）快速做出判斷， 來(lái)突出其中一項(xiàng)相對(duì)更重要或者更高頻的操作。

注意：突出的方法，不局限于強(qiáng)化重點(diǎn)項(xiàng)，也可以是弱化其他項(xiàng)。


  • 需要區(qū)分主次場(chǎng)景：


  • 不需要區(qū)分主次的場(chǎng)景：「通過(guò)」和「駁回」都使用次按鈕，系統(tǒng)保持中立。在一些需要用戶(hù)慎重決策的場(chǎng)景中，系統(tǒng)應(yīng)該保持中立，不能替用戶(hù)或者誘導(dǎo)用戶(hù)做出判斷。


3.2 總分關(guān)系對(duì)比

  • 總分關(guān)系：通過(guò)調(diào)整排版、字體、大小等方式來(lái)突出層次感，區(qū)分總分關(guān)系，使得頁(yè)面更具張力和節(jié)奏感。


3.3 狀態(tài)關(guān)系對(duì)比

常見(jiàn)類(lèi)型有「靜態(tài)對(duì)比」、「動(dòng)態(tài)對(duì)比」。


  • 靜態(tài)對(duì)比示例：用不同顏色的點(diǎn)，來(lái)表明不同狀態(tài)。


  • 動(dòng)態(tài)對(duì)比：鼠標(biāo)懸停時(shí)，該項(xiàng)和其他項(xiàng)呈現(xiàn)出明顯不同的視覺(jué)效果，響應(yīng)用戶(hù)操作。通過(guò)改變顏色、增加輔助形狀等方法來(lái)實(shí)現(xiàn)狀態(tài)關(guān)系的對(duì)比，以便用戶(hù)更好的區(qū)分信息。


4.重復(fù)

相同的元素在整個(gè)界面中不斷重復(fù)，不僅可以有效降低用戶(hù)的學(xué)習(xí)成本，也可以幫助用戶(hù)識(shí)別出這些元素之間的關(guān)聯(lián)性。


4.1 重復(fù)元素

重復(fù)元素可以是一條粗線、一種線框，某種相同的顏色、設(shè)計(jì)要素、設(shè)計(jì)風(fēng)格，某種格式、空間關(guān)系等。


  • 線框重復(fù)：


  • 設(shè)計(jì)要素重復(fù)：


  • 文案格式重復(fù)：


② 交互操作高效

包含 Ant Design 的設(shè)計(jì)原則有：『 直截了當(dāng) 』『 足不出戶(hù) 』『 簡(jiǎn)化交互 』『 即時(shí)反應(yīng) 』。

「交互操作高效」的重要性體現(xiàn)在 交互時(shí) 用戶(hù)操作流暢、簡(jiǎn)單、用時(shí)短。如果僅僅只是解決高效的問(wèn)題，卻忽略用戶(hù)能否理解流程如何操作，那這樣的解決方案也是徒然。有的時(shí)候并不是解決實(shí)際時(shí)間的長(zhǎng)短，而是用戶(hù)的心理時(shí)間是否太長(zhǎng)的問(wèn)題，就像我們打游戲往往會(huì)覺(jué)得時(shí)間過(guò)的很快，但是在等待頁(yè)面加載時(shí)卻不耐煩。


1. 減少打斷

能在這個(gè)頁(yè)面解決的問(wèn)題，就不要去其它頁(yè)面解決，因?yàn)槿魏雾?yè)面刷新和跳轉(zhuǎn)都會(huì)引起變化盲視（Change Blindness），導(dǎo)致用戶(hù)心流（Flow）被打斷。頻繁的頁(yè)面刷新和跳轉(zhuǎn)，就像在看戲時(shí)，演員說(shuō)完一行臺(tái)詞就安排一次謝幕一樣。

變化盲視（Change Blindness）：指視覺(jué)場(chǎng)景中的某些變化并未被觀察者注意到的心理現(xiàn)象。產(chǎn)生這種現(xiàn)象的原因包括場(chǎng)景中的障礙物，眼球運(yùn)動(dòng)、地點(diǎn)的變化，或者是缺乏注意力等?！浴毒S基百科》

心流（Flow）：也有別名以化境 (Zone) 表示，亦有人翻譯為神馳狀態(tài)，定義是一種將個(gè)人精神力完全投注在某種活動(dòng)上的感覺(jué)；心流產(chǎn)生時(shí)同時(shí)會(huì)有高度的興奮及充實(shí)感?！浴毒S基百科》


  • 氣泡提示：對(duì)于操作的反饋是必要的，下文會(huì)提到，但是為了減少打斷用戶(hù)，輕量級(jí)的反饋氣泡提示即可。


  • 輸入覆蓋層：鼠標(biāo)「點(diǎn)擊」圖標(biāo)觸發(fā)；鼠標(biāo)「點(diǎn)擊」懸浮層以外的其他區(qū)塊后，直接保存輸入結(jié)果并退出。不用彈窗或跳轉(zhuǎn)的形式編輯，只需要在觸發(fā)圖標(biāo)附近彈出浮層即可，這樣避免用戶(hù)視動(dòng)線的混亂，減少打斷用戶(hù)操作的心流。

2.縮短步驟

正如 Alan Cooper 所言：「需要在哪里輸出，就要允許在哪里輸入」。這就是直接操作的原理。eg：不要為了編輯內(nèi)容而打開(kāi)另一個(gè)頁(yè)面，應(yīng)該直接在上下文中實(shí)現(xiàn)編輯。


常規(guī)的編輯模式，界面都會(huì)跳出一個(gè)彈窗或者是一個(gè)頁(yè)面跳轉(zhuǎn)，無(wú)形之中用戶(hù)走了更多的流程路徑，如果能在當(dāng)前頁(yè)面就把編輯問(wèn)題解決掉那就符合了 Ant Design 『 足不出戶(hù) 』的設(shè)計(jì)原則。

  • 文字鏈/圖標(biāo)編輯：

狀態(tài)一：在可編輯行附近出現(xiàn)文字鏈/圖標(biāo)；

狀態(tài)二：鼠標(biāo)點(diǎn)擊「編輯」后，出現(xiàn)「輸入框」、「確定」、「取消」表單元素，同時(shí)光標(biāo)定位在「輸入框」中。


  • 多字段行內(nèi)編輯：編輯模式在不破壞整體性的前提下，可擴(kuò)大空間，以便放下「輸入框」等表單元素；其中，在 Table 中進(jìn)行編輯模式切換時(shí)，需要保證每列的不跳動(dòng)。


  • 拖放圖片/文件：在早前很多產(chǎn)品在上傳功能上，都是跳出彈窗再選擇文件上傳，現(xiàn)在基本都可以實(shí)現(xiàn)拖拽上傳了。這樣的設(shè)計(jì)大大提高了用戶(hù)使用上傳功能的效率。


  • 模糊搜索：系統(tǒng)根據(jù)用戶(hù)所查詢(xún)的關(guān)鍵詞，智能匹配可能的結(jié)果。


  • 定時(shí)自動(dòng)更新：新增的列表項(xiàng)「高亮」，持續(xù)幾秒后恢復(fù)正常。不需要用戶(hù)手動(dòng)刷新，減少不冗余的操作。


3.避免回憶

人們?cè)谒伎嫉臅r(shí)候，是需要依靠大腦神經(jīng)元之間相互傳遞信號(hào)，而回憶是需要調(diào)用更多的的神經(jīng)元傳遞信號(hào)，簡(jiǎn)單地說(shuō)就是非常費(fèi)腦子。


  • 搜索歷史：搜索歷史的功能，可以減少用戶(hù)的回憶，使得整個(gè)體驗(yàn)更加輕松愉悅。


4.信息降噪

根據(jù)費(fèi)茨法則（Fitts's Law）所描述的，如果用戶(hù)鼠標(biāo)移動(dòng)距離越少、對(duì)象相對(duì)目標(biāo)越大，那么用戶(hù)越容易操作。通過(guò)運(yùn)用上下文工具（即：放在內(nèi)容中的操作工具），使內(nèi)容和操作融合，從而簡(jiǎn)化交互，起到信息降噪的作用。

費(fèi)茨法則 ：到達(dá)目標(biāo)的時(shí)間是到達(dá)目標(biāo)的距離與目標(biāo)大小的函數(shù)，具體：。其中：1.設(shè)備當(dāng)前位置和目標(biāo)位置的距離（D）；2.目標(biāo)的大?。╓）。距離越長(zhǎng)，所用時(shí)間越長(zhǎng)；目標(biāo)越大，所用時(shí)間越短。


  • 列表嵌入層：將列表為多層級(jí)時(shí)，隱藏弱層級(jí)列表內(nèi)容，可以讓用戶(hù)更加直觀地看到重要信息。當(dāng)我在聚焦某一個(gè)列表模塊的內(nèi)容，鼠標(biāo)懸浮即可展開(kāi)。


  • 標(biāo)簽頁(yè)：標(biāo)簽也換可以將信息內(nèi)容進(jìn)行分類(lèi)，讓用戶(hù)更易理解。


  • 漸進(jìn)式展現(xiàn)：用戶(hù)在填寫(xiě)表單時(shí)，會(huì)根據(jù)當(dāng)前錄入的數(shù)據(jù)，展現(xiàn)下一項(xiàng)需要填寫(xiě)的內(nèi)容，這樣的展現(xiàn)方式可以屏蔽掉無(wú)關(guān)緊要的內(nèi)容。


  • 懸停即現(xiàn)工具：鼠標(biāo)懸停時(shí)，出現(xiàn)操作項(xiàng)。這樣將不重要信息或者操作隱藏起來(lái)，不會(huì)干擾到用戶(hù)瀏覽其他重要內(nèi)容。


③ 系統(tǒng)反饋即時(shí)


包含 Ant Design 的設(shè)計(jì)原則有：『 簡(jiǎn)化交互 』『 巧用過(guò)渡 』『 即時(shí)反應(yīng) 』。

「系統(tǒng)反饋及時(shí)」的重要性體現(xiàn)在 交互之后 立即給出反饋。就像「牛頓第三定律」所描述作用力和反作用一樣，用戶(hù)進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系統(tǒng)就應(yīng)該立即有一個(gè)對(duì)應(yīng)的反饋，同時(shí)輸入量級(jí)越大、重要性越高，那么反饋量級(jí)越大、重要性越高。


1.實(shí)時(shí)反饋

雖然反饋太多（準(zhǔn)確的說(shuō)，錯(cuò)誤的反饋太多）是一個(gè)問(wèn)題，但是反饋太少甚至沒(méi)有反饋的系統(tǒng)，則讓人感覺(jué)遲鈍和笨拙，用戶(hù)體驗(yàn)更差。

牛頓第三定律 ：當(dāng)兩個(gè)物體互相作用時(shí)，彼此施加于對(duì)方的力，其大小相等、方向相反?！浴毒S基百科》


  • 實(shí)時(shí)預(yù)覽：根據(jù)用戶(hù)的輸入，提供關(guān)于密碼強(qiáng)度和有效性的實(shí)時(shí)反饋提示。


  • 文字鏈熱區(qū)：當(dāng)懸浮在 ID 所在的文字鏈單元格時(shí)，鼠標(biāo)「指針」隨即變?yōu)椤甘中汀?，單擊即可跳轉(zhuǎn)。


2.過(guò)渡反饋

人腦灰質(zhì)（Gray Matter）會(huì)對(duì)動(dòng)態(tài)的事物（eg：移動(dòng)、形變、色變等）保持敏感。在界面中，適當(dāng)?shù)募尤胍恍┻^(guò)渡效果，能讓界面保持生動(dòng)，同時(shí)也能增強(qiáng)用戶(hù)和界面的溝通。

Adding: 新加入的信息元素應(yīng)被告知如何使用，從頁(yè)面轉(zhuǎn)變的信息元素需被重新識(shí)別。

Receding:  與當(dāng)前頁(yè)無(wú)關(guān)的信息元素應(yīng)采用適當(dāng)方式移除。

Normal: 指那些從轉(zhuǎn)場(chǎng)開(kāi)始到結(jié)束都沒(méi)有發(fā)生變化的信息元素。


  • 表格加載：網(wǎng)絡(luò)不好或者表格數(shù)據(jù)過(guò)多，都有可能導(dǎo)致加載緩慢，這時(shí)有一個(gè)小動(dòng)畫(huà)可以緩解用戶(hù)的焦慮感。


  • 富列表加載：用戶(hù)在打開(kāi)列表時(shí)，頁(yè)面無(wú)法做到一次性加載所有的數(shù)據(jù)，同時(shí)有為了減少翻頁(yè)的繁瑣操作，就有了下拉自動(dòng)加載的。


  • 頁(yè)面加載：當(dāng)用戶(hù)訪問(wèn)的頁(yè)面體量過(guò)大時(shí)，系統(tǒng)會(huì)通過(guò)給出倒計(jì)時(shí)或完成百分比，來(lái)緩解用戶(hù)焦慮，并且給用戶(hù)友好可控的感覺(jué)。


  • 滑入與滑出：可以有效構(gòu)建虛擬空間。  


  • 折疊窗口：在視圖切換時(shí)，有助于保持上下文，同時(shí)也能拓展虛擬空間。


  • 對(duì)象增加：在列表/表格中，新增了一個(gè)對(duì)象。


  • 對(duì)象刪除：在列表/表格中，刪除了一個(gè)對(duì)象。


  • 對(duì)象更改：在列表/表格中，更改了一個(gè)對(duì)象。

    • 狀態(tài)一：用戶(hù)更改了「詳情」中的值；

    • 狀態(tài)二：用戶(hù)點(diǎn)擊「保存」后，詳情所在的網(wǎng)格出現(xiàn)「黃底」，表明該對(duì)象發(fā)生了更改；

    • 狀態(tài)三：底色持續(xù)幾秒后，恢復(fù)正常。


  • 對(duì)象呼出：點(diǎn)擊頁(yè)面中元素，呼出一個(gè)新對(duì)象。


3.結(jié)果反饋

用戶(hù)常常會(huì)疑惑自己的操作是否成功了，哪怕是失敗了也是需要系統(tǒng)反饋，這樣才能安心進(jìn)行下一步的操作。


  • 頁(yè)面反饋結(jié)果：


  • 氣泡反饋結(jié)果：


④ 用戶(hù)自由可控


包含 Ant Design 的設(shè)計(jì)原則有：『 提供邀請(qǐng) 』『 足不出戶(hù) 』『 即時(shí)反應(yīng) 』。

「用戶(hù)自由可控」的重要性體現(xiàn)在 交互前對(duì)下一步操作的預(yù)判；交互時(shí) 不論操作后的結(jié)果多嚴(yán)重都要允許用戶(hù)自主決策；以及交互后 能否對(duì)自己的操作結(jié)果反悔。


1.未來(lái)預(yù)判

很多富交互模式（eg：「拖放」、「行內(nèi)編輯」、「上下文工具」）都有一個(gè)共同問(wèn)題，就是缺少易發(fā)現(xiàn)性。如果用戶(hù)在操作前就能得到下一個(gè)交互層次的提醒和暗示，以表明在下一個(gè)界面可以做什么。  這樣人機(jī)交互的過(guò)程往往更加自然、順暢。



  • 點(diǎn)擊刷新：對(duì)于設(shè)計(jì)師而言，最常見(jiàn)的例子要屬花瓣了，我們時(shí)長(zhǎng)會(huì)沉浸在我們?yōu)g覽的瀑布流卡片中，如果系統(tǒng)強(qiáng)行刷新當(dāng)前頁(yè)面，用戶(hù)很有可能迷失。邀請(qǐng)用戶(hù)主動(dòng)更新，既不會(huì)錯(cuò)過(guò)新的消息，又不會(huì)導(dǎo)致我們的心流被打斷。


  • 未完成邀請(qǐng)：用戶(hù)在當(dāng)前頁(yè)面無(wú)法完成登錄操作，為了減少用戶(hù)迷茫的焦慮感，系統(tǒng)告知用戶(hù)點(diǎn)擊“更改”鏈接，可以去向何處。


  • 懸停邀請(qǐng)：鼠標(biāo)「懸?！箷r(shí)，出現(xiàn)「選擇此模板」的按鈕。


2.自主決策

雖然系統(tǒng)中缺少不了一些危險(xiǎn)操作或者不可逆操作(eg：刪除、重置、重裝系統(tǒng)等)，但是仍然要用戶(hù)自主決定是否繼續(xù)，我們能做的就是讓用戶(hù)再三確認(rèn)。


  • 彈窗提示：雖然彈窗打斷用戶(hù)心流，但是對(duì)于重要的操作，這樣是最保險(xiǎn)的方式。


  • 刪除知識(shí)庫(kù)提示：是釘釘中，刪除「知識(shí)庫(kù)」這一重要內(nèi)容，是不可逆的，系統(tǒng)需要用戶(hù)謹(jǐn)慎操作。


3.準(zhǔn)許反悔

如果說(shuō)「自主決策」中提到的案例都是不可逆的，那「準(zhǔn)許反悔」的后果嚴(yán)重性會(huì)弱一些，系統(tǒng)對(duì)用戶(hù)的操作沒(méi)有那么強(qiáng)的阻斷性，所以要準(zhǔn)許用戶(hù)反悔的，


  • 刪除撤銷(xiāo)：用戶(hù)點(diǎn)擊「刪除」后，直接操作；出現(xiàn) Message 告知用戶(hù)操作成功，并提供用戶(hù)「撤銷(xiāo)」的按鈕；用戶(hù)進(jìn)行下一個(gè)操作或者 1 分鐘內(nèi)不進(jìn)行任何操作， Message 消失，用戶(hù)無(wú)法再「撤銷(xiāo)」。



『 Ant Design的優(yōu)點(diǎn)與缺點(diǎn) 』


① 優(yōu)點(diǎn)


1.助初創(chuàng)團(tuán)隊(duì)快速產(chǎn)品快速上線

Ant Design在"幸福者示例中"寫(xiě)到“Ant Design 無(wú)法保證業(yè)務(wù)產(chǎn)品能否成功，但是能幫助業(yè)務(wù)產(chǎn)品『正確的成功』或者『正確的失敗』?！?

如果團(tuán)隊(duì)有一個(gè)產(chǎn)品idea，我們需要通過(guò)最少的資源開(kāi)發(fā)此產(chǎn)品并投入到市場(chǎng)中，通過(guò)聽(tīng)取用戶(hù)反饋，驗(yàn)證idea是否可行，快速迭代最終做出更完善的產(chǎn)品。但理想是美好的，但現(xiàn)實(shí)是骨感的，在前期研發(fā)的過(guò)程中通常會(huì)出現(xiàn)兩個(gè)情況。創(chuàng)業(yè)團(tuán)隊(duì)沒(méi)有足夠的設(shè)計(jì)資源和時(shí)間，前幾個(gè)版本的產(chǎn)品通常用戶(hù)體驗(yàn)非常差，這種情況體驗(yàn)差有可能讓用戶(hù)放棄這款產(chǎn)品。創(chuàng)業(yè)團(tuán)隊(duì)沒(méi)有好的方法論和協(xié)作模式，需要磨合，設(shè)計(jì)和開(kāi)發(fā)進(jìn)度一延再延，結(jié)果錯(cuò)過(guò)了風(fēng)口，市場(chǎng)被競(jìng)品搶占，還沒(méi)上線就倒閉了。

Ant Design提供了一套完整的界面實(shí)現(xiàn)方案，即有代碼框架能直接拿來(lái)提高開(kāi)發(fā)效率，每個(gè)界面組件都經(jīng)過(guò)螞蟻金服多個(gè)項(xiàng)目的考驗(yàn)，具備優(yōu)秀的用戶(hù)體驗(yàn)。用Ant Design來(lái)做0-1，能快速發(fā)布用戶(hù)體驗(yàn)優(yōu)秀的產(chǎn)品，聽(tīng)取用戶(hù)反饋，快速迭代。


當(dāng)然，創(chuàng)業(yè)是九死一生，市場(chǎng)和用戶(hù)口味都充滿了不確定性，誰(shuí)也沒(méi)有能力保證產(chǎn)品是否成功，但是只要你能高效的產(chǎn)出質(zhì)量?jī)?yōu)秀的產(chǎn)品，不斷試錯(cuò)，說(shuō)不定以后就能成功。


2.減少設(shè)計(jì)和開(kāi)發(fā)的不確定性。

用 Ant Design 就能高效的產(chǎn)出高質(zhì)量的產(chǎn)品，減少設(shè)計(jì)和開(kāi)發(fā)的不確定性。

因?yàn)槲覀児揪褪褂昧?Ant Design 的系統(tǒng)，所以時(shí)常會(huì)與前端小伙伴溝通，以下都是他們?cè)谑褂眠^(guò)程的感想。

Ant Design 提供的大量功能比較全面且UI風(fēng)格統(tǒng)一的組件，能幫助開(kāi)發(fā)者快速搭建通用場(chǎng)景下的應(yīng)用界面。這大概是得益于螞蟻金服業(yè)務(wù)線上極為廣泛的應(yīng)用場(chǎng)景，驅(qū)動(dòng)了 Ant Design 團(tuán)隊(duì)通過(guò)對(duì)使用情況的觀察匯總，整理出來(lái)了這么一個(gè)組件庫(kù)。他們的經(jīng)驗(yàn)積累如此之豐富，足以讓這個(gè)庫(kù)支持大部分其他前端開(kāi)發(fā)者的需要。

其設(shè)計(jì)團(tuán)隊(duì)給出的設(shè)計(jì)規(guī)范相當(dāng)詳細(xì)且經(jīng)得起推敲，令許多其他團(tuán)隊(duì)獲益匪淺。


3.節(jié)省設(shè)計(jì)與開(kāi)發(fā)的人力成本

我見(jiàn)過(guò)太多宣稱(chēng)自己在乎用戶(hù)體驗(yàn)的公司，給用戶(hù)的產(chǎn)品質(zhì)量確實(shí)比較高，但是自己?jiǎn)T工內(nèi)部使用的系統(tǒng)和管理一團(tuán)糟。種種不便讓員工經(jīng)常加班，情緒消極，這樣的團(tuán)隊(duì)抄抄競(jìng)品達(dá)到行業(yè)標(biāo)準(zhǔn)體驗(yàn)還行。要想突破是不可能了，因?yàn)閯?chuàng)新需要員工有充沛的精力和主動(dòng)性，天天加班誰(shuí)還有這精神。

用 Ant Design 系統(tǒng)提供的設(shè)計(jì)工具和組件框架能給設(shè)計(jì)師和開(kāi)發(fā)者減少負(fù)擔(dān)，能用更少的時(shí)間呈現(xiàn)給用戶(hù)體驗(yàn)好的產(chǎn)品。這樣帶來(lái)的好處不僅僅是設(shè)計(jì)師和開(kāi)發(fā)者覺(jué)得少加班成就感高而幸福，他們重新恢復(fù)活力和激情能做出更有創(chuàng)意和競(jìng)爭(zhēng)力的產(chǎn)品，給公司帶來(lái)更大的收益，這是一個(gè)三贏的結(jié)局。


② 缺點(diǎn)


1.無(wú)法根據(jù)業(yè)務(wù)場(chǎng)景定制組件，靈活度不夠

一定有小伙伴會(huì)有這樣的疑問(wèn)，目前市面上有這么多的第三方設(shè)計(jì)規(guī)范，例如 Ant Design ，Element UI，有必要自己造輪子做一遍嗎？

這里要視情況而定，如果公司產(chǎn)品是初創(chuàng)期，而且研發(fā)人手不足，那確實(shí)沒(méi)有必要自己造輪子。反之在資源足夠的情況下，是有必要設(shè)計(jì)團(tuán)隊(duì)重新做一套屬于自己產(chǎn)品的規(guī)范組件庫(kù)的，因?yàn)锽端自身的業(yè)務(wù)性決定了市場(chǎng)上沒(méi)有萬(wàn)能的設(shè)計(jì)規(guī)范，那些設(shè)計(jì)規(guī)范的組件并不能100%滿足我們產(chǎn)品的需求。另外一方面使用封裝好的第三方設(shè)計(jì)規(guī)范，在此基礎(chǔ)上進(jìn)行修改，效率很低，適配的復(fù)雜度和重新開(kāi)發(fā)相差無(wú)幾。


2.組件細(xì)節(jié)深入度不夠，只能“將就”使用

對(duì)于比較普通的設(shè)計(jì)解決方案是可以的，但是 Ant Design 包含的組件細(xì)節(jié)仍有不足，畢竟 Ant Design 沒(méi)必要投入過(guò)多的精力在組件細(xì)節(jié)深入度上，規(guī)范定義的越是精細(xì)，對(duì)于產(chǎn)品組件而言可延展性就越差，限制也會(huì)越多。而 Ant Design 只需要解決80%企業(yè)，80%的通用問(wèn)題即可。


3.競(jìng)品同質(zhì)化嚴(yán)重，視覺(jué)上無(wú)法脫穎而出

當(dāng)市場(chǎng)大部分產(chǎn)品都在使用 Ant Design 設(shè)計(jì)系統(tǒng)時(shí)，產(chǎn)品的同質(zhì)化就會(huì)很?chē)?yán)重。為了避免這種情況發(fā)生，我們就有必要從設(shè)計(jì)語(yǔ)言、設(shè)計(jì)原則、設(shè)計(jì)組件三個(gè)部分開(kāi)始，設(shè)計(jì)自己的規(guī)范。那些大廠的成熟的組件庫(kù)該如何用呢？我認(rèn)為應(yīng)該把它當(dāng)成一個(gè)字典，有不會(huì)的地方，可以去參考人家的成熟的解決方案。



『 總結(jié) 』


這篇文章簡(jiǎn)單的介紹了一下 Ant Design 是什么、 Ant Design 的設(shè)計(jì)原則是什么以及 Ant Design 的優(yōu)缺點(diǎn)。當(dāng)然也重點(diǎn)總結(jié)了一下，設(shè)計(jì)師如何運(yùn)用 Ant Design 的設(shè)計(jì)原則，可以將這些原則分為四類(lèi)：視覺(jué)層級(jí)清晰、交互操作高效、系統(tǒng)反饋及時(shí)、用戶(hù)自由可控。希望大家通過(guò)這篇文章能夠更深一步了解 Ant Design 的設(shè)計(jì)原則，并將其靈活運(yùn)用到設(shè)計(jì)工作中。




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

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


文章來(lái)源：人人都是產(chǎn)品經(jīng)理    作者：菜菜不甜

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

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

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


評(píng)論(0) 瀏覽(4129)

體驗(yàn)度量深度實(shí)踐

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

前言


體驗(yàn)?zāi)繕?biāo)的達(dá)成，需要合理且客觀的度量方法，體驗(yàn)度量的實(shí)踐，需要度量框架的有力支撐。提高競(jìng)爭(zhēng)優(yōu)勢(shì)，提升客戶(hù)態(tài)度，保障產(chǎn)品可以即時(shí)的響應(yīng)客戶(hù)的需求。本篇文章的實(shí)踐方法全部來(lái)源于酷家樂(lè)B端產(chǎn)品業(yè)務(wù)中的實(shí)踐案例，重點(diǎn)在于度量框架的深度實(shí)踐，如果我們的經(jīng)驗(yàn)?zāi)軌驇椭侥?，歡迎交流討論。 


一、體驗(yàn)度量怎么做？


“體驗(yàn)”是用戶(hù)純主觀的感受，從這個(gè)情況來(lái)看是很難被度量的?！绑w驗(yàn)”同時(shí)也是一個(gè)比較抽象的概念，如果把一個(gè)抽象的概念拆解成一個(gè)可執(zhí)行的策略，拆解的過(guò)程如何保證策略的有效性，是我們一直在思考的。面對(duì)酷家樂(lè)工具型、SaaS型、平臺(tái)型并存的產(chǎn)品體系，且存在錯(cuò)綜復(fù)雜的用戶(hù)需求和業(yè)務(wù)訴求。在這樣的前提下對(duì)方法的確立需要更加的冷靜。 

如何確定方法？我們需要的是一個(gè)完整的度量框架，以及能夠聚焦用戶(hù)體驗(yàn)層為驅(qū)動(dòng)，分解并有力的去解決問(wèn)題。經(jīng)過(guò)大量的實(shí)踐和驗(yàn)證得到，抓住一個(gè)擊破點(diǎn)作為產(chǎn)品體驗(yàn)提升的目標(biāo)，并一種合理的方式進(jìn)行推導(dǎo)和驗(yàn)證，這是一種最直接度量體驗(yàn)的標(biāo)準(zhǔn)流程性方式，這里的目標(biāo)必須是：


  • 體現(xiàn)用戶(hù)主觀感受或者具有行為驅(qū)動(dòng)的目標(biāo)。

  • 基于業(yè)務(wù)目標(biāo)定義+用戶(hù)訴求了解后，得到的以用戶(hù)為中心驅(qū)動(dòng)的用戶(hù)行為。



二、度量模型怎么選？


面對(duì)設(shè)計(jì)圈內(nèi)已經(jīng)存在的和部分大廠創(chuàng)造的度量模型，評(píng)估優(yōu)劣后最終我們選取了HEART模型。因?yàn)镠EART是個(gè)比較全面和具備更多擴(kuò)展性的分析框架，同時(shí)足夠的權(quán)威和標(biāo)準(zhǔn)，而且市面上的模型基本都被HEART的五維囊括。除了這些考慮因素外，再給出以下幾個(gè)明顯的優(yōu)勢(shì)點(diǎn)：


  • 1、HEART同時(shí)涵蓋了定性和定量的不同數(shù)據(jù)維度。

  • 2、HEART框架同時(shí)包含了：宏觀和微觀的層面

  • 3、HEART模型并不單純的再定義體驗(yàn)質(zhì)量，同時(shí)也鏈接了商業(yè)價(jià)值。把用戶(hù)體驗(yàn)的原則和收益驅(qū)動(dòng)的指標(biāo)關(guān)聯(lián)在了一起。


undefined


三、HEART模型簡(jiǎn)介


1.什么是HEART模型？


多個(gè)大廠利用HEART模型拆解框架得到了深度結(jié)合業(yè)務(wù)的度量框架。是個(gè)比較全面和具備更多擴(kuò)展性的分析框架。HEART是GOOGLE公司在實(shí)踐中提出，基于產(chǎn)出更好產(chǎn)品為目的，用來(lái)衡量產(chǎn)品整體體驗(yàn)的度量評(píng)估模型。 

它包含五個(gè)維度Happiness（愉悅度）、Engagement（參與度）、Adoption（接受度）、Retention（留存度）、Task success（任務(wù)完成度）組成，是Google用戶(hù)體驗(yàn)研究團(tuán)隊(duì)在實(shí)踐中為了準(zhǔn)確的度量用戶(hù)體驗(yàn)而總結(jié)提煉出的一個(gè)框架。 


2.HEART模型的特性與應(yīng)用場(chǎng)景


目前市面上還存在PTECH、TEENS等體驗(yàn)度量模型，而HEART模型的特性在于它”以用戶(hù)為中心“進(jìn)行度量，同時(shí)度量維度全面，既包含宏觀的愉悅度，也有微觀的任務(wù)完成率，同時(shí)關(guān)注產(chǎn)品上的留存率，與業(yè)務(wù)目標(biāo)保持緊密。在評(píng)估方式上，既有定性評(píng)估的愉悅度，也有定量評(píng)估的參與度、留存率等，可對(duì)用戶(hù)使用產(chǎn)品情況做一個(gè)完整的評(píng)估。 

undefined



四、HEART模型的詳細(xì)拆解指南


undefined


第一步：確定體驗(yàn)?zāi)繕?biāo)

體驗(yàn)?zāi)繕?biāo)是體驗(yàn)度量的開(kāi)始，準(zhǔn)確的目標(biāo)決定了度量的質(zhì)量。要提煉出準(zhǔn)確而有效的體驗(yàn)?zāi)繕?biāo)并不容易，通常會(huì)引入產(chǎn)品功能等業(yè)務(wù)因素，使體驗(yàn)?zāi)繕?biāo)不夠單純，拆解出來(lái)的指標(biāo)所反映的數(shù)據(jù)也很難歸因到體驗(yàn)。故復(fù)雜項(xiàng)目可提煉多個(gè)體驗(yàn)?zāi)繕?biāo)相互補(bǔ)齊，但每個(gè)都必須準(zhǔn)確而具體。 

那么如何確定體驗(yàn)?zāi)繕?biāo)呢？

體驗(yàn)無(wú)法脫離于具體的產(chǎn)品服務(wù)存在，用戶(hù)的整體體驗(yàn)感知積累于每一個(gè)接觸觸點(diǎn)，大多觸點(diǎn)常規(guī)而平庸影響不大，必須識(shí)別出達(dá)成業(yè)務(wù)的關(guān)鍵觸點(diǎn)進(jìn)行深入分析，已提煉出體驗(yàn)?zāi)繕?biāo)。 

整體的思路是：首先分析業(yè)務(wù)目標(biāo)，并就業(yè)務(wù)目標(biāo)所落地的產(chǎn)品服務(wù)的鏈路進(jìn)行拆解，分析鏈路后，找到其中對(duì)體驗(yàn)有決定性影響的因素，提取其因素后，即形成體驗(yàn)?zāi)繕?biāo)。


undefined
1.確定業(yè)務(wù)目標(biāo)
業(yè)務(wù)目標(biāo)是整個(gè)產(chǎn)品服務(wù)的最終目的，體驗(yàn)作為產(chǎn)品服務(wù)的重要評(píng)估維度，需要與之對(duì)齊。業(yè)務(wù)目標(biāo)與所選取項(xiàng)目范圍有關(guān)，從整個(gè)產(chǎn)品到特定功能模塊，或者某個(gè)行為鏈路都可作為參與項(xiàng)目。根據(jù)選取的項(xiàng)目來(lái)確定業(yè)務(wù)目標(biāo)，如“保持產(chǎn)品新舊改版的平穩(wěn)過(guò)渡，降低改版造成的斷約率”、“提升用戶(hù)自主解決問(wèn)題的能力，降低運(yùn)營(yíng)服務(wù)的壓力”等。注意業(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)的差異，后者是對(duì)前者的產(chǎn)品化闡釋?zhuān)梢跃唧w到某項(xiàng)產(chǎn)品服務(wù)目標(biāo)上。產(chǎn)品目標(biāo)和體驗(yàn)?zāi)繕?biāo)可以共同服務(wù)于業(yè)務(wù)目標(biāo)，實(shí)現(xiàn)價(jià)值的達(dá)成。 

?示例：
業(yè)務(wù)目標(biāo)：在設(shè)計(jì)工具中商品素材的查找效率，輔助家裝設(shè)計(jì)師快速構(gòu)建方案，提升其簽單率 
產(chǎn)品目標(biāo)：優(yōu)化現(xiàn)有商品素材的查找邏輯，降低家裝設(shè)計(jì)師查找商品素材的成本 

2.拆解產(chǎn)品鏈路
產(chǎn)品目標(biāo)需借助于功能鏈路來(lái)達(dá)成，將該目標(biāo)達(dá)成過(guò)程的邏輯呈現(xiàn)出來(lái)，并分析其跳轉(zhuǎn)路徑、操作觸點(diǎn)，就是鏈路拆解過(guò)程。整個(gè)鏈路過(guò)程是用戶(hù)價(jià)值的直接承載，任何一個(gè)觸點(diǎn)的失效都將影響到整條鏈路順暢和效率。就鏈路整體而言，觸點(diǎn)越多、鏈路越長(zhǎng)，操作成本越大；就某個(gè)具體觸點(diǎn)而言，其效率、易用性、易理解度也將影響整體的價(jià)值傳達(dá)。 

為完整的拆解出整個(gè)產(chǎn)品鏈路，需要從“用戶(hù)側(cè)”、“系統(tǒng)側(cè)”進(jìn)行分析，用戶(hù)側(cè)代表用戶(hù)視角下的功能使用流程，是主要考慮的維度，體現(xiàn)了以用戶(hù)為中心的設(shè)計(jì)思路；系統(tǒng)側(cè)代表系統(tǒng)在用戶(hù)交互過(guò)程中的需要執(zhí)行的行為，是系統(tǒng)邏輯的直接體現(xiàn)。兩者的交互作用，將完整表達(dá)“信息”的流轉(zhuǎn)過(guò)程，最終作用到產(chǎn)出物上。 

?示例：商品素材搜索鏈路




3.分析觸點(diǎn)并提取決定性因素

選取對(duì)整個(gè)鏈路有重要影響的觸點(diǎn)進(jìn)行設(shè)計(jì)維度上的分析，以找出決定觸點(diǎn)目標(biāo)達(dá)成的決定性因素，這個(gè)決定性因素就是我們體驗(yàn)上需要著重優(yōu)化的點(diǎn)。在尋找“決定性因素”的過(guò)程中，避免將系統(tǒng)性能、業(yè)務(wù)功能、業(yè)務(wù)信息因素篩選出來(lái)，需要聚焦在設(shè)計(jì)維度上，諸如交互行為、界面布局、信息呈現(xiàn)、系統(tǒng)反饋等。 

?示例： 
“確認(rèn)輸入行為”、“搜索結(jié)果分類(lèi)”、“不同分類(lèi)的區(qū)塊劃分”、“結(jié)果數(shù)量”等。 

對(duì)已拆分出來(lái)的各種設(shè)計(jì)因素來(lái)說(shuō)，哪些算是決定性因素呢？一個(gè)很簡(jiǎn)單的判斷方式是：反向判斷，即假設(shè)缺失這個(gè)設(shè)計(jì)因素，或不完整是否會(huì)對(duì)該觸點(diǎn)有“阻塞性”影響。 

如有嚴(yán)重阻塞影響，則證明該設(shè)計(jì)因素很大程度上決定了觸點(diǎn)的目的達(dá)成，屬于決定性因素；若設(shè)計(jì)因素有中等的、輕微的影響，則可能不是本次優(yōu)化的重點(diǎn)，不作為決定性因素。如“搜索結(jié)果的分類(lèi)”影響用戶(hù)對(duì)搜索結(jié)果的信息獲取，是決定性因素。“確認(rèn)輸入行為”是常規(guī)設(shè)計(jì)行為，不算決定性因素。 
當(dāng)然，具體問(wèn)題具體分析，在不同的功能場(chǎng)景下，同一種行為的影響程度可能不同。 

需要注意的是，決定性因素的選取必須在具體的觸點(diǎn)中才有意義，脫離后無(wú)法判斷是否有阻塞性影響。另外，某些設(shè)計(jì)因素是否是決定性可能在跨觸點(diǎn)中體現(xiàn)出來(lái)，需要聯(lián)系整個(gè)鏈路進(jìn)行交叉分析確定。




4.體驗(yàn)?zāi)繕?biāo)的提取與表述

找到?jīng)Q定性因素及其為什么決定性的原因后，需要為其設(shè)定一個(gè)設(shè)計(jì)目標(biāo)，來(lái)指示應(yīng)向什么方面優(yōu)化這個(gè)決定性因素。決定性因素只是現(xiàn)有功能的一種解法，可能存在其他更優(yōu)解法或優(yōu)化方向，我們需要基于決定性因素概括出“設(shè)計(jì)目標(biāo)”，以新的設(shè)計(jì)目標(biāo)來(lái)指引我們的優(yōu)化設(shè)計(jì)。 

?示例： 

決定性因素“搜索結(jié)果的分類(lèi)”，引申出的設(shè)計(jì)目標(biāo)為“更清晰的信息層級(jí)”、“更完整的信息”。



通過(guò)鏈路觸點(diǎn)的分析，決定性因素的提取，設(shè)計(jì)目標(biāo)的匹配，我們已對(duì)設(shè)計(jì)優(yōu)化方向有了準(zhǔn)確的了解。這個(gè)時(shí)候需要從設(shè)計(jì)師視角做一個(gè)完善而精準(zhǔn)的”體驗(yàn)?zāi)繕?biāo)“的表述。


一個(gè)體驗(yàn)?zāi)繕?biāo)需要與具體設(shè)計(jì)場(chǎng)景關(guān)聯(lián)后，才能產(chǎn)生具體而明確的價(jià)值，即設(shè)計(jì)目標(biāo)落地到場(chǎng)景中后產(chǎn)生價(jià)值，表述思路是：在某個(gè)具體的鏈路觸點(diǎn)中，我們期望怎么達(dá)成這件事。可通過(guò)格式進(jìn)行填寫(xiě)： 
使/什么用戶(hù)/用什么  做什么事/設(shè)計(jì)目標(biāo)/完成什么事 

?示例： 
家裝設(shè)計(jì)師  使用搜索功能  搜索素材時(shí)  對(duì)結(jié)果展示清晰的信息層級(jí)  來(lái)快速找到需要的商品 


第二步：確定度量維度

引入HEART模型的重要原因，正在于它的度量維度。由于它的度量維度多方位的表述了產(chǎn)品的使用情況，度量緯度不是一種標(biāo)準(zhǔn)，是一種分析框架和角度，決定了體驗(yàn)?zāi)繕?biāo)應(yīng)該被如何度量，進(jìn)而影響信號(hào)的確定和指標(biāo)的拆解，因此度量維度的選取至關(guān)重要。 

HEART提供了豐富的五個(gè)維度，根據(jù)其定義，提供了你幾個(gè)可以衡量的視角。在實(shí)踐過(guò)程中，因每個(gè)體驗(yàn)?zāi)繕?biāo)所對(duì)應(yīng)的觸點(diǎn)的場(chǎng)景、交互、產(chǎn)品目的不同，我們只需要找到符合定義的維度即可。反過(guò)來(lái)看，一個(gè)與體驗(yàn)?zāi)繕?biāo)不相關(guān)、不匹配的度量維度不能很好地度量體驗(yàn)。 

需要注意的是，HEART模型因其維度的廣泛定義，不僅僅可用于體驗(yàn)?zāi)繕?biāo)的度量，也可以對(duì)產(chǎn)品目標(biāo)、業(yè)務(wù)結(jié)果進(jìn)行度量，對(duì)體驗(yàn)?zāi)繕?biāo)的度量因要從產(chǎn)品因素中剝離出體驗(yàn)問(wèn)題，相對(duì)來(lái)說(shuō)較為復(fù)雜，是本次敘述的重點(diǎn)。



第三步：確定信號(hào)

首先信號(hào)可以被定義為是一種信息的載體，其承載的信息往往反映的是用戶(hù)對(duì)體驗(yàn)?zāi)繕?biāo)的成功或是失敗的結(jié)果，對(duì)信號(hào)的準(zhǔn)確獲取將直接影響到對(duì)下游指標(biāo)的確立。 

信號(hào)的確定需以上游度量維度為標(biāo)準(zhǔn)范圍并引用體驗(yàn)?zāi)繕?biāo)為重要判斷依據(jù)，避免過(guò)度發(fā)散，保證精準(zhǔn)規(guī)范的同時(shí)，去結(jié)合當(dāng)前有無(wú)體驗(yàn)變量基準(zhǔn)值作為條件，并使用成功或者失敗的結(jié)果來(lái)評(píng)估體驗(yàn)?zāi)繕?biāo)的達(dá)成情況，最終提煉出信號(hào)。 
以度量維度為標(biāo)準(zhǔn)并引用體驗(yàn)?zāi)繕?biāo)確定信號(hào)

通過(guò)逐一對(duì)度量維度進(jìn)行體驗(yàn)變量提取，有基礎(chǔ)值則進(jìn)行對(duì)比的方式，無(wú)基礎(chǔ)值則使用趨勢(shì)的表述方式，結(jié)合業(yè)務(wù)目標(biāo)的情況下，去概念性假設(shè)體驗(yàn)?zāi)繕?biāo)的正向或反向結(jié)果，最終通過(guò)標(biāo)準(zhǔn)的格式提煉出信號(hào)，信號(hào)的提煉的可以用固定的格式進(jìn)行書(shū)寫(xiě)： 格式：用戶(hù)   用什么   做什么   體驗(yàn)變量   趨勢(shì)&數(shù)值


尋找體驗(yàn)變量
基于HEART模型的整個(gè)分析框架，拆解出最高頻和貼合體驗(yàn)?zāi)繕?biāo)的常見(jiàn)體驗(yàn)變量庫(kù)。在此框架的指導(dǎo)下，可以快速尋找需要的體驗(yàn)變量。 

?示例： 
（體驗(yàn)變量：易操作度；有基準(zhǔn)值） 家裝設(shè)計(jì)師 使用搜索功能 搜索素材時(shí) 易操作度 達(dá)到4.2
（體驗(yàn)變量：易操作度；無(wú)基準(zhǔn)值） 家裝設(shè)計(jì)師 使用搜索功能 搜索素材時(shí) 易操作度 上升

確定信號(hào)的注意事項(xiàng)
①信號(hào)的成功或失敗要能在行為或態(tài)度上準(zhǔn)確的體現(xiàn)出來(lái)，失敗信號(hào)可能比成功更容易定義； 
②信號(hào)要易于被追蹤； 
③信號(hào)的敏感度要高，易于被檢測(cè)； 
④信號(hào)應(yīng)與目標(biāo)有高的相關(guān)度，同時(shí)避免被其他因素影響； 
⑤一個(gè)目標(biāo)可能對(duì)應(yīng)多個(gè)信號(hào)； 

第四步：確定指標(biāo)

指標(biāo)是衡量目標(biāo)的參數(shù)，用于準(zhǔn)確的描述目標(biāo)。但通常很難直接從目標(biāo)中確定出指標(biāo)，需要借助于對(duì)信號(hào)的分析。信號(hào)是信息的載體，其中包含著變量信息，提取其中變量信息，即可獲得一個(gè)初始指標(biāo)。 
初始指標(biāo)反映了客觀的原生數(shù)據(jù)，需要對(duì)原生數(shù)據(jù)做處理后，可得到一個(gè)能精準(zhǔn)描述體驗(yàn)?zāi)繕?biāo)的指標(biāo)。 



對(duì)數(shù)據(jù)進(jìn)行處理

體驗(yàn)變量所直接產(chǎn)生的屬于原生數(shù)據(jù)，而一組數(shù)據(jù)通過(guò)某種分析加工后，可以成為一個(gè)更有價(jià)值的信息，如均值、中位值。選擇對(duì)數(shù)據(jù)進(jìn)行哪種方式處理，受目標(biāo)的影響較大，每一種數(shù)據(jù)處理方式，都有指向特征，通過(guò)與目標(biāo)的匹配，可以選取出合適的數(shù)據(jù)處理方式。




確定指標(biāo)的注意事項(xiàng)

①指標(biāo)應(yīng)與目標(biāo)和信號(hào)密切相關(guān)，指標(biāo)越明確越清晰越好； 
②標(biāo)應(yīng)方便被持續(xù)追蹤，對(duì)信號(hào)的描述更敏感，方便做A/B測(cè)試。 


五、總結(jié)


看似復(fù)雜的體驗(yàn)度量監(jiān)控指標(biāo)的拆解，可以概括為“體驗(yàn)的問(wèn)題定位”——“體驗(yàn)的目標(biāo)度量”——“體驗(yàn)的客觀追蹤”。 

1.“問(wèn)題定位”是監(jiān)控目標(biāo)的根據(jù)，必須來(lái)源于具體的業(yè)務(wù)鏈路才有被分析和量化的可能，它是體驗(yàn)問(wèn)題在業(yè)務(wù)鏈路中被抽取出來(lái)的關(guān)鍵，并轉(zhuǎn)化為可度量的指標(biāo)來(lái)進(jìn)行監(jiān)控，最終為后續(xù)數(shù)據(jù)洞察和可視化提供準(zhǔn)確的數(shù)據(jù)來(lái)源，否則流于主觀，監(jiān)控體系建立在不可靠的體驗(yàn)?zāi)繕?biāo)之上，當(dāng)然也就不可能有助于解決體驗(yàn)問(wèn)題。 

2.而“目標(biāo)度量”所運(yùn)用的HEART模型作為度量維度，相當(dāng)于一種體驗(yàn)的定義標(biāo)準(zhǔn)，闡釋了什么是它所定義的用戶(hù)體驗(yàn)。HEART模型以其全面的度量維度，能很好地實(shí)踐這一點(diǎn)。必須注意的是，對(duì)HEART模型下的五個(gè)度量維度的細(xì)化闡釋可能受不同產(chǎn)品特性、產(chǎn)品階段影響而不同，最終轉(zhuǎn)化出不同的客觀指標(biāo)。 

3.“客觀追蹤”是對(duì)在度量標(biāo)準(zhǔn)下的客觀變化的捕捉，捕捉其變量特征，建立常態(tài)指標(biāo)，成為可靠的可監(jiān)控的指標(biāo)。 

4.另外，除了準(zhǔn)確的定位、度量、轉(zhuǎn)化的邏輯推導(dǎo)外，參考業(yè)務(wù)目標(biāo)進(jìn)行范圍收斂，也是非常重要的工作，它影響著每一個(gè)推導(dǎo)環(huán)節(jié)，以避免偏離產(chǎn)品方向，有效的過(guò)濾弱關(guān)聯(lián)或無(wú)關(guān)聯(lián)的因素。

文章來(lái)源：站酷    作者：酷家樂(lè)UED

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

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

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



評(píng)論(0) 瀏覽(2191)

js 獲取當(dāng)前元素的父元素的父元素的id

前端達(dá)人

情景一：用onclick觸發(fā)的函數(shù) 



    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                html代碼：
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div>1111</div>
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div class="original">
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div id="chartx1" class="chartstyle"></div>
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div id="charty1" class="chartstyle" ></div>
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                <button onclick="getDetail(this);" style="width:100%;height:30px;">查看信息</button>
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                </div>
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                </div>
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script>
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                function getDetail(obj){
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                alert(obj.parentNode.parentNode.id); //1
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script>
            
    

        
    

    
    15.

運(yùn)行結(jié)果：

情景二:直接用click觸發(fā)的函數(shù) 



    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                html代碼：
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div>1111</div>
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div class="original">
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div id="chartx1" class="chartstyle"></div>
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div id="charty1" class="chartstyle" ></div>
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                <button class="info_detail" style="width:100%;height:30px;">查看信息</button>
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                </div>
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                </div>
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script>
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                $(".info_detail").click(function(){
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                id=$(this).parent().parent().attr('id');
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                })
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script>
            
    

        
    

    
    15.

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

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


文章來(lái)源：csdn   作者：

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

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

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





評(píng)論(0) 瀏覽(2843)

jquery 延遲執(zhí)行方法

前端達(dá)人

setTimeout方法使用時(shí)需注意： 

復(fù)制代碼 
//以下兩種方式都行： setTimeout(function () { test(); }, 2000); //或者 setTimeout('test()',2000);
function test(){
 alert("aaaa");
} //以下是錯(cuò)誤示例 setTimeout(test(),2000); //會(huì)馬上執(zhí)行，沒(méi)有延遲效果
復(fù)制代碼

 




jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。

如果元素已淡出，則 fadeToggle() 會(huì)向元素添加淡入效果。

如果元素已淡入，則 fadeToggle() 會(huì)向元素添加淡出效果。

語(yǔ)法： 

$(selector).fadeToggle(speed,callback);

可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱(chēng)。

下面的例子演示了帶有不同參數(shù)的 fadeToggle() 方法：

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

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


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

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

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


評(píng)論(0) 瀏覽(2920)

APP設(shè)計(jì)：小易移動(dòng)端 | B端銷(xiāo)售平臺(tái)移動(dòng)化

seo達(dá)人



2020年的湖北疫情對(duì)公司的業(yè)務(wù)造成了一定的影響，為了避免不可控情況下的業(yè)務(wù)損失，復(fù)工后公司啟動(dòng)了智能銷(xiāo)售平臺(tái)移動(dòng)化項(xiàng)目（即小易APP）。經(jīng)過(guò)近一年的試運(yùn)行，在廣州發(fā)生疫情的時(shí)候，小易APP已經(jīng)能支持業(yè)務(wù)基礎(chǔ)需求。

備注：
為避免不必要的誤會(huì)（xiemi），所有的客戶(hù)、銷(xiāo)售顧問(wèn)、部門(mén)、套餐的名稱(chēng)都是虛擬命名。所有數(shù)據(jù)均為虛構(gòu)，請(qǐng)勿過(guò)度解讀。
love&peace

收藏

原文地址：站酷

作者：牙線y2x

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》APP設(shè)計(jì)：小易移動(dòng)端 | B端銷(xiāo)售平臺(tái)移動(dòng)化

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

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


文章來(lái)源：站酷   作者：陳皮Celia 

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

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


評(píng)論(0) 瀏覽(1765)

日歷

鏈接

個(gè)人資料

存檔