首頁(yè)

設(shè)計(jì)心理學(xué)-峰終定律

博博

什么是峰終定律

用戶在使用一個(gè)產(chǎn)品流程時(shí)的高峰體驗(yàn)和結(jié)尾體驗(yàn)。

用峰終法則提升用戶在整個(gè)產(chǎn)品上或某個(gè)功能上的體驗(yàn),需要先對(duì)用戶在整個(gè)產(chǎn)品上或某個(gè)功能上的使用行為與想法進(jìn)行分析,并繪制出用戶的情緒曲線,根據(jù)情緒的峰值節(jié)點(diǎn)和使用流程的結(jié)尾,這兩個(gè)“關(guān)鍵時(shí)刻”,進(jìn)行體驗(yàn)上的重點(diǎn)打造。

它是怎么產(chǎn)生的

2002年的諾貝爾經(jīng)濟(jì)學(xué)獎(jiǎng)得主、美國(guó)心理學(xué)家丹尼爾•卡尼曼經(jīng)過(guò)深入研究,發(fā)現(xiàn)人們對(duì)體驗(yàn)的記憶由兩個(gè)因素決定,即高峰(無(wú)論是正向的還是負(fù)向 的)時(shí)與結(jié)束時(shí)的感覺(jué),這就是“峰終定律”。關(guān)于峰終定律有這樣一個(gè)實(shí)驗(yàn):讓兩組人員聽(tīng)相同時(shí)間的強(qiáng)噪音,然后一組停下來(lái),另一組接著再聽(tīng)一段時(shí)間的弱噪音,就實(shí)際遭遇來(lái)講,后一組比前一組受了更多的折磨,但是聽(tīng)到更長(zhǎng)時(shí)間噪音的后一組的痛苦指數(shù)卻要比前一組低很多,原因就是對(duì)于兩組人員來(lái)講,結(jié)束時(shí)刻的噪音給他們留下的感受最為深刻,因而他們的痛苦指數(shù)主要是由噪音結(jié)束時(shí)的刺激程度所決定的。在另 外一種情況下,令兩組人員聽(tīng)相同時(shí)間的噪音,其中一組的噪音強(qiáng)度較高,另 外一組的噪音強(qiáng)度較低,但是其中某一時(shí)刻聽(tīng)到了極其刺耳的超強(qiáng)度的噪音, 結(jié)果就是,后一組的痛苦指數(shù)要高于前一組,盡管就總體而言,后一組所聽(tīng)到 的噪音強(qiáng)度要低許多。

這體現(xiàn)的就是感受過(guò)程中的“高峰”一刻的決定作用。依照峰終定律,高峰和結(jié)束時(shí)的體驗(yàn)主宰了人們這段感受的性質(zhì)和強(qiáng)弱的 程度,而跟感受的總的比重以及體驗(yàn)時(shí)間的長(zhǎng)短無(wú)關(guān)。也就是說(shuō),如果在一段 體驗(yàn)的高峰和結(jié)尾,體驗(yàn)是愉悅的,那么對(duì)整個(gè)體驗(yàn)的感受就是愉悅的,即使 這次體驗(yàn)更多的是痛苦或不愉快的感受。

需要我們記住

用戶根據(jù)體驗(yàn)的高峰和結(jié)束來(lái)判斷產(chǎn)品體驗(yàn)是否好壞,并不是根據(jù)用戶使用產(chǎn)品的每一個(gè)節(jié)點(diǎn)感受的平均值來(lái)判定,我們可以理解為結(jié)果比過(guò)程重要。

就像我們看電影時(shí),一個(gè)電影2小時(shí)前1小時(shí)都枯燥無(wú)味,突然中間有5分鐘讓你的情緒上升,此時(shí)你可能覺(jué)得這個(gè)電影還行,至少讓你達(dá)到了情緒高潮,當(dāng)你繼續(xù)觀看時(shí)電影片段又變得枯燥無(wú)味,突然最后10分鐘和結(jié)束時(shí)出現(xiàn)了電影彩蛋,并且這10分鐘的內(nèi)容特別符合你的胃口,這時(shí)候你就會(huì)出現(xiàn)一種“嗯,這個(gè)電影不錯(cuò),結(jié)局挺好”這樣的心理暗示,此時(shí)會(huì)發(fā)現(xiàn)接近100多分鐘的枯燥內(nèi)容都被你忽略掉了,或者你也記得但是你默認(rèn)了電影90%的枯燥。

產(chǎn)品中該怎么用

強(qiáng)化峰值

一些app里在用戶購(gòu)買成功后,將已購(gòu)商品以一種具有儀式感的收藏卡形式展示給用戶,給用戶驚喜的體驗(yàn),在盲盒星球內(nèi)購(gòu)買盲盒成功后會(huì)彈出卡片,把用戶獲得感拉滿,在網(wǎng)易云音樂(lè)直播間內(nèi)如果是新手用戶就會(huì)彈出新人見(jiàn)面禮,通過(guò)視覺(jué)的表現(xiàn)形式把氛圍拉拉滿,當(dāng)然還有一種反向峰值,當(dāng)有一些產(chǎn)品進(jìn)行抽獎(jiǎng)時(shí),如果用戶未中獎(jiǎng)會(huì)彈出情感化彈窗,對(duì)用戶進(jìn)行安慰降低用戶的挫敗感。

上面講的偏向于業(yè)務(wù)彈窗,還有一種是功能性彈窗, 當(dāng)用戶使用某個(gè)產(chǎn)品流程時(shí),這個(gè)流程可能通過(guò)多個(gè)維度才能到達(dá)最終的節(jié)點(diǎn),在最后用戶完成操作時(shí)通過(guò)情感化彈窗進(jìn)行提示,又或者在版本升級(jí)時(shí)需要引導(dǎo)用戶進(jìn)行更新,使用情感化的表現(xiàn),能夠?qū)a(chǎn)品與用戶產(chǎn)生情緒共鳴,增加趣味性,提升體驗(yàn)。

降低負(fù)面峰值

當(dāng)用戶使用產(chǎn)品去完成目標(biāo)時(shí),突然中間步驟出現(xiàn)網(wǎng)絡(luò)波動(dòng)、網(wǎng)絡(luò)斷開(kāi)等不可抗拒的因素,此時(shí)在頁(yè)面中添加一些情感化設(shè)計(jì),會(huì)緩解用戶焦慮情緒,甚至可以在空狀態(tài)中添加動(dòng)效來(lái)提升趣味性。

我是這么做的

近期在工作中做了一個(gè)直播項(xiàng)目,其中的一個(gè)功能就涉及到直播抽獎(jiǎng),因?yàn)楫a(chǎn)品獎(jiǎng)品比例較多且輪數(shù)也多,用戶的中獎(jiǎng)幾率也比較高,所以導(dǎo)致用戶在中獎(jiǎng)后基本就退出直播間,因此在做設(shè)計(jì)的過(guò)程中為了避免這個(gè)問(wèn)題,我在中間彈窗上做了優(yōu)化。

通過(guò)情感的中獎(jiǎng)彈窗形式來(lái)強(qiáng)化用戶的感知度,在直播過(guò)程中提升興奮感,提升用戶觀看的直播的欲望。

最后一定是終值

在講一個(gè)案例,去年我們做一個(gè)刷題功能的體驗(yàn)優(yōu)化,用戶在刷題場(chǎng)景下會(huì)面對(duì)幾十道甚至上百道題目,整個(gè)過(guò)程非常漫長(zhǎng),并且舊版的功能交互上并沒(méi)有展示總共還有多少題的這個(gè)提示,用戶在刷題過(guò)程中會(huì)非常焦慮,為了解決這個(gè)問(wèn)題,通過(guò)這三個(gè)手段改進(jìn),1)我在刷題過(guò)程中以進(jìn)度條的形式去實(shí)時(shí)告知用戶刷題進(jìn)度,減少用戶焦慮,2)用戶在最后幾題的場(chǎng)景中會(huì)添加鼓勵(lì)話語(yǔ),強(qiáng)化用戶峰值,3)在結(jié)果頁(yè)面為用戶展示直觀的數(shù)據(jù)變化,強(qiáng)化用戶的滿足感,同時(shí)激勵(lì)用戶進(jìn)行持續(xù)性刷題。

總結(jié)

用戶只記得使用過(guò)程中體驗(yàn)高的場(chǎng)景和結(jié)束時(shí)的場(chǎng)景。
無(wú)論是在交互還是視覺(jué)上我們都可以利用峰終定律幫助用戶達(dá)到好的使用體驗(yàn)。



作者:愛(ài)吃貓的魚(yú)___
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

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

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

向用戶請(qǐng)求權(quán)限的正確方式

博博

 

權(quán)限的目的是保護(hù)用戶隱私,那么在何時(shí)以及用什么方式請(qǐng)求用戶權(quán)限會(huì)是比較合適的?本文將詳細(xì)介紹Android的運(yùn)行時(shí)權(quán)限模型,并展示設(shè)計(jì)一個(gè)UX來(lái)請(qǐng)求你的應(yīng)用程序所需的權(quán)限,希望對(duì)你有所啟發(fā)。
從Android 6.0開(kāi)始,沒(méi)有在安裝時(shí)請(qǐng)求所有權(quán)限,而是引入了運(yùn)行時(shí)權(quán)限模型,開(kāi)發(fā)者可以控制應(yīng)用何時(shí)以及如何請(qǐng)求權(quán)限。這如同你想邀某人出去約會(huì),過(guò)早、過(guò)頻繁或以錯(cuò)誤的方式對(duì)你來(lái)說(shuō)并不好。
本文我將詳細(xì)介紹Android的運(yùn)行時(shí)權(quán)限模型,并向你展示如何設(shè)計(jì)一個(gè)UX來(lái)請(qǐng)求你的應(yīng)用程序所需的權(quán)限。權(quán)限的目的是保護(hù)用戶的隱私,但當(dāng)你請(qǐng)求權(quán)限時(shí),你是在要求用戶放棄一點(diǎn)隱私,因此,你需要提供明確且平等的利益以換取訪問(wèn)。運(yùn)行時(shí)權(quán)限允許你在用戶更了解你請(qǐng)求權(quán)限的原因和授予權(quán)限的好處時(shí)選擇合適的時(shí)間請(qǐng)求權(quán)限。Android實(shí)現(xiàn)它們的方式使得以正確的方式請(qǐng)求它們變得十分重要。
運(yùn)行時(shí)權(quán)限模型有利于保護(hù)用戶的隱私,當(dāng)你的應(yīng)用程序請(qǐng)求權(quán)限時(shí),Android會(huì)顯示一個(gè)對(duì)話框讓用戶接受或拒絕它,第一次請(qǐng)求權(quán)限時(shí)對(duì)話框不會(huì)顯示“不再詢問(wèn)”復(fù)選框,只會(huì)在用戶至少一次拒絕權(quán)限請(qǐng)求后顯示它,你可以檢查之前是否被拒絕過(guò),并明智的決定在何時(shí)提供更多教育。
向用戶請(qǐng)求權(quán)限的正確方式
從Android 11開(kāi)始,如果用戶在使用應(yīng)用的過(guò)程中多次拒絕某項(xiàng)特定的權(quán)限,那么在你的應(yīng)用再次請(qǐng)求該權(quán)限時(shí),用戶將不會(huì)看到系統(tǒng)權(quán)限對(duì)話框。該操作表示用戶希望“不再詢問(wèn)”。
你無(wú)需過(guò)度防御,例如在實(shí)際請(qǐng)求權(quán)限之前你始終通過(guò)預(yù)許可(預(yù)授權(quán))來(lái)衡量用戶授予權(quán)限的可能性,本質(zhì)上是請(qǐng)求兩次,這種雙重提示可能是不必要且煩人的,你可以通過(guò)在正確的時(shí)間以正確的方式詢問(wèn)來(lái)達(dá)到同樣的效果。
Material Design分解了在兩個(gè)維度上請(qǐng)求權(quán)限的不同方法。首先權(quán)限對(duì)你的應(yīng)用程序的運(yùn)行有多重要?其次,你請(qǐng)求它的原因有多清晰?根據(jù)這兩個(gè)因素,建議你采用不同的方法來(lái)請(qǐng)求權(quán)限。
向用戶請(qǐng)求權(quán)限的正確方式
預(yù)先請(qǐng)求權(quán)限(Ask up-front)
如果某項(xiàng)權(quán)限對(duì)應(yīng)用程序運(yùn)行至關(guān)重要,并且顯而易見(jiàn)為什么需要請(qǐng)求它。例如日歷應(yīng)用,拒絕日歷權(quán)限會(huì)使應(yīng)用程序無(wú)法運(yùn)行,并且用戶顯然知道日歷應(yīng)用的用途以及請(qǐng)求日歷權(quán)限的原因,因此
不需要用任何不必要的解釋來(lái)打擾用戶,只需在用戶首次啟動(dòng)應(yīng)用時(shí)立即請(qǐng)求它即可。
向用戶請(qǐng)求權(quán)限的正確方式
預(yù)先教育(Educate up-front)
如果某項(xiàng)權(quán)限對(duì)應(yīng)用至關(guān)重要,但請(qǐng)求它的原因不是很清晰。例如信貸應(yīng)用,為了準(zhǔn)確評(píng)估用戶的信貸資格、償還能力和防范反欺詐,通訊錄權(quán)限、通話記錄權(quán)限、位置權(quán)限對(duì)于風(fēng)控而言非常重要,建議請(qǐng)求權(quán)限之前對(duì)用戶進(jìn)行教育。
向用戶請(qǐng)求權(quán)限的正確方式
使用場(chǎng)景中請(qǐng)求權(quán)限(Ask in context)
如果應(yīng)用中的某項(xiàng)次要功能需要權(quán)限,但請(qǐng)求它的原因很清晰,建議你在使用場(chǎng)景中請(qǐng)求權(quán)限。例如筆記應(yīng)用允許用戶使用語(yǔ)音或音頻創(chuàng)建筆記,那么很明顯為什么此功能需要麥克風(fēng)權(quán)限,無(wú)需過(guò)早的請(qǐng)求它,以免用戶負(fù)擔(dān)過(guò)重,最好等到用戶嘗試使用該功能時(shí),因?yàn)橛脩舾锌赡茉试S符合其預(yù)期的權(quán)限請(qǐng)求。
向用戶請(qǐng)求權(quán)限的正確方式
結(jié)合使用場(chǎng)景進(jìn)行教育(Educate in context)
如果應(yīng)用中的某項(xiàng)次要功能需要權(quán)限,并且請(qǐng)求他的原因不是很清晰,建議你結(jié)合使用場(chǎng)景進(jìn)行教育。例如筆記應(yīng)用允許用戶與朋友協(xié)作,那么請(qǐng)求聯(lián)系人權(quán)限可能是合理的,但它不是顯而易見(jiàn)的,當(dāng)用戶調(diào)用該功能時(shí),解釋?xiě)?yīng)用獲得聯(lián)系人權(quán)限后可為用戶提供哪些好處,比如自動(dòng)填充郵件地址,然后才請(qǐng)求聯(lián)系人權(quán)限讓用戶授予它。
向用戶請(qǐng)求權(quán)限的正確方式
處理權(quán)限請(qǐng)求遭拒情況
通過(guò)使用正確的方法,用戶應(yīng)該清楚應(yīng)用請(qǐng)求權(quán)限的原因以及應(yīng)用獲得權(quán)限后可以為他們提供哪些好處。然而,這并不意味著用戶一定會(huì)授予權(quán)限。如果用戶拒絕了權(quán)限請(qǐng)求,建議采用以下做法:
  • 在應(yīng)用界面中突出顯示因?yàn)闆](méi)有獲得特定權(quán)限而受限的功能所在的具體部分,例如在原本用于顯示該功能的結(jié)果或數(shù)據(jù)的位置顯示一條消息,讓用戶知道因缺少權(quán)限而無(wú)法使用該功能,幫助用戶在權(quán)限和功能之間建立心理聯(lián)系。
  • 不要阻止界面顯示,不要全屏警告消息,讓用戶根本無(wú)法繼續(xù)使用應(yīng)用。即使在權(quán)限請(qǐng)求拒后,應(yīng)用也應(yīng)盡可能提供最佳的用戶體驗(yàn)。例如即使麥克風(fēng)使用權(quán)限請(qǐng)求遭拒,仍應(yīng)全面提高文本功能的易用性。
  • 用戶可能已經(jīng)選中了“不再詢問(wèn)“復(fù)選框,應(yīng)用可能會(huì)在用戶未看到權(quán)限請(qǐng)求對(duì)話框的情況下受到拒絕,此時(shí)應(yīng)用應(yīng)該提供一個(gè)鏈接,鏈接到設(shè)備設(shè)置中用戶可以打開(kāi)權(quán)限的具體位置。
盡量減少權(quán)限請(qǐng)求
在應(yīng)用中聲明權(quán)限之前,請(qǐng)先考慮是否需要這樣做,或者是否有替代方法可以在應(yīng)用中支持該功能。因?yàn)槿绻麘?yīng)用聲明權(quán)限,那么每當(dāng)用戶使用需要運(yùn)行時(shí)權(quán)限的功能時(shí),應(yīng)用便不得不中斷用戶的操作,請(qǐng)求相應(yīng)權(quán)限。然后,用戶必須做出決定。如果用戶不能理解您的應(yīng)用為何請(qǐng)求特定權(quán)限,可能就會(huì)拒絕授予該權(quán)限,甚至卸載應(yīng)用。
下面介紹幾個(gè)可以在不聲明任何權(quán)限的情況下實(shí)現(xiàn)的用例:
拍攝照片/錄制視頻
Android為應(yīng)用提供了相互通信的功能,讓你可以將任務(wù)委托給其他應(yīng)用。例如,如果你希望允許用拍照,但它不是應(yīng)用的核心部分,可以考慮使用Intent請(qǐng)求相機(jī)應(yīng)用拍攝照片并將其分享給你的應(yīng)用,這樣就不需要CAMERA權(quán)限。
自動(dòng)輸入動(dòng)態(tài)短信驗(yàn)證碼
雙因素身份驗(yàn)證流程中,動(dòng)態(tài)短信驗(yàn)證碼作為第二校驗(yàn)因素時(shí),使用SMS Retriever API(短信檢索器)可以讓?xiě)?yīng)用自動(dòng)執(zhí)行用戶身份驗(yàn)證,不需要用戶手動(dòng)輸入驗(yàn)證碼,不需要READ_SMS權(quán)限。  
 
作者:交互設(shè)計(jì)師張楚
來(lái)源:站酷
 

 

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

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

銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)

軟件qt開(kāi)發(fā)軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

如何為用戶提供正確的鍵盤輸入類型?

博博

Android和iOS系統(tǒng)都設(shè)計(jì)了針對(duì)特定表單字段的指定鍵盤輸入類型。但大多數(shù)開(kāi)發(fā)人員未能在他們的代碼中指定正確的鍵盤輸入類型。這會(huì)導(dǎo)致移動(dòng)設(shè)備上的表單完成效率變慢。本文以Android平臺(tái)為例。
一、輸入類型并不總是“文本”
大多數(shù)開(kāi)發(fā)人員錯(cuò)誤地將每個(gè)表單字段的輸入類型設(shè)置為“文本”。這存在問(wèn)題,因?yàn)槊總€(gè)表單字段的輸入并不總是純文本。通常都有一些字段要求輸入帶有數(shù)字或字母和數(shù)字組合的信息。當(dāng)用戶嘗試填寫(xiě)這些字段時(shí),他們應(yīng)該看到一個(gè)數(shù)字或字母和數(shù)字組合的鍵盤。
不幸的是,當(dāng)每個(gè)字段的輸入類型都設(shè)置為“文本”時(shí),它會(huì)強(qiáng)制用戶使用文本鍵盤來(lái)輸入數(shù)字或字母和數(shù)字組合,輸入時(shí)舉步維艱,不是誤點(diǎn),就是需要頻繁切換,輸入體驗(yàn)十分糟糕。
因此,請(qǐng)務(wù)必為每個(gè)表單字段指定輸入類型,以便系統(tǒng)能夠顯示相應(yīng)的鍵盤。除了指定輸入類型,我們還應(yīng)指定相關(guān)行為,例如輸入法是否提供拼寫(xiě)建議、是否將句子的首字母大寫(xiě),以及是否使用“完成”或“下一項(xiàng)”等操作鍵替換“回車”。
輸入類型、行為、操作鍵整理如下:
如何為用戶提供正確的鍵盤輸入類型?
例一. 郵箱地址字段
表單要求用戶提供他們的郵箱地址是很常見(jiàn)的。當(dāng)我們將輸入類型設(shè)置為“郵箱地址”時(shí),它會(huì)為用戶提供一個(gè)針對(duì)郵箱地址輸入的鍵盤。這個(gè)鍵盤不僅顯示字母,還可以顯示“@”和“.”,用戶可以輕松地輸入他們的郵箱地址。
如何為用戶提供正確的鍵盤輸入類型?
例二. 姓名字段
英文名是專有名詞,英語(yǔ)中專有名詞的第一個(gè)字母要大寫(xiě)。我們將輸入類型設(shè)置為“人名”,并且設(shè)置單詞首字母大寫(xiě)。用戶無(wú)需對(duì)英文字母進(jìn)行大小寫(xiě)切換。
如何為用戶提供正確的鍵盤輸入類型?
二、每個(gè)鍵盤對(duì)輸入類型的反應(yīng)可能不同
案例一:登錄頁(yè)面的密碼輸入
釘釘將密碼框輸入類型設(shè)置為“密碼”。假定密碼為 z0h0a0n0g。
  1. 百度輸入法顯示密碼鍵盤,完成密碼輸入僅需點(diǎn)擊 9 次。
  2. 搜狗輸入法顯示文本鍵盤,用戶需在字母和數(shù)字之間切換,完成輸入需點(diǎn)擊 17 次。也支持長(zhǎng)按第一行的字母輸入數(shù)字。
  3. 微信輸入法顯示文本鍵盤,完成密碼輸入需點(diǎn)擊 17 次。不支持長(zhǎng)按字母輸入數(shù)字。
如何為用戶提供正確的鍵盤輸入類型?
案例二:登錄頁(yè)面的手機(jī)號(hào)輸入
釘釘設(shè)置電話號(hào)碼鍵盤右下角為“下一項(xiàng)”按鈕。
  1. 百度輸入法的鍵盤右下角顯示“回車”,用戶完成手機(jī)號(hào)輸入后需手動(dòng)獲取密碼文本框焦點(diǎn)。
  2. 搜狗輸入法的鍵盤右下角顯示“下一項(xiàng)”,用戶完成手機(jī)號(hào)輸入點(diǎn)擊下一項(xiàng),密碼文本框自動(dòng)獲取焦點(diǎn)。
  3. 微信輸入法的鍵盤右下角顯示“下一項(xiàng)”,用戶完成手機(jī)號(hào)輸入點(diǎn)擊下一項(xiàng),密碼文本框自動(dòng)獲取焦點(diǎn)。
如何為用戶提供正確的鍵盤輸入類型?
三、Input Type 助力產(chǎn)品輸入體驗(yàn)的提升
通過(guò)應(yīng)用 Input Type 你可以正確的為每個(gè)文本字段設(shè)置特定的輸入類型,以及看到每個(gè)輸入類型(以及輸入類型的組合)如何影響鍵盤。
Input Type這個(gè)工具需要安裝在安卓手機(jī)上,如果沒(méi)有安卓手機(jī)可以電腦上安裝一個(gè)網(wǎng)易MuMu安卓模擬器就可以用。
應(yīng)用截圖
應(yīng)用截圖

作者:交互設(shè)計(jì)師張楚
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

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

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)

軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

設(shè)計(jì)原則:認(rèn)知偏差

博博

什么是確認(rèn)偏差?
確認(rèn)偏差是一種認(rèn)知偏差,指的是人們更傾向于尋找、記住或贊同支持已有信念或假設(shè)的信息,而忽視或排斥與其相矛盾的信息。這種偏差導(dǎo)致人們?cè)趯で笮畔⒑托纬捎^點(diǎn)時(shí)傾向于選擇那些與他們已有信念相一致的信息,而忽視那些與之相悖的信息。
在設(shè)計(jì)和決策過(guò)程中,確認(rèn)偏差可能會(huì)對(duì)判斷和決策產(chǎn)生影響。設(shè)計(jì)師或決策者可能會(huì)傾向于尋找支持他們最初想法或假設(shè)的信息,而忽略潛在的反對(duì)觀點(diǎn)或證據(jù)。這可能導(dǎo)致錯(cuò)誤的假設(shè)、不完整的分析或偏離客觀事實(shí)的判斷。
了解確認(rèn)偏差對(duì)于設(shè)計(jì)師和決策者來(lái)說(shuō)是很重要的,因?yàn)樗梢杂绊懙剿麄儗?duì)問(wèn)題的看法和解決方案的選擇。為了減輕確認(rèn)偏差的影響,重要的做法包括尋求多樣的觀點(diǎn)和信息來(lái)源、鼓勵(lì)團(tuán)隊(duì)開(kāi)放性討論、持續(xù)評(píng)估和反思自己的假設(shè),以及意識(shí)到并主動(dòng)應(yīng)對(duì)這種偏差。
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
它是怎么產(chǎn)生的?
確認(rèn)偏差的產(chǎn)生與人類的認(rèn)知方式和信息處理方式有關(guān)。它可以追溯到我們處理信息的心理機(jī)制,以及對(duì)信息的選擇性接收和處理。
信息過(guò)濾和選擇性接收
: 人類大腦處理的信息量龐大,為了應(yīng)對(duì)這種信息負(fù)荷,我們會(huì)有意無(wú)意地選擇性地接收與已有信念相符的信息,因?yàn)檫@樣更容易被接受和理解。
認(rèn)知一致性和舒適度
: 我們傾向于尋求與我們已有信念一致的信息,因?yàn)檫@會(huì)讓我們感到更加舒適和認(rèn)知上的一致性,而與之相悖的信息則可能引起認(rèn)知不適或挑戰(zhàn)。
記憶偏差
: 我們記憶中更容易保留和回憶起與我們已有信念相符的信息,而忽略或淡化與之不符的信息,導(dǎo)致我們更傾向于記住和重復(fù)暴露于已有信念的信息。
社會(huì)影響和團(tuán)隊(duì)動(dòng)態(tài)
: 在團(tuán)隊(duì)環(huán)境中,人們可能更容易受到同伴或領(lǐng)導(dǎo)觀點(diǎn)的影響,導(dǎo)致更多地尋求與團(tuán)隊(duì)共識(shí)一致的信息。
因此,確認(rèn)偏差源于我們處理信息的方式和尋求認(rèn)知一致性的趨勢(shì),這種傾向性會(huì)影響我們對(duì)信息的選擇、記憶和接受,使得我們更容易偏向于支持已有信念的信息。
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
思考下確認(rèn)偏差在UI作用?
認(rèn)知偏差在UI設(shè)計(jì)中有著深遠(yuǎn)的影響,設(shè)計(jì)師需要了解并考慮這些偏差,以創(chuàng)造更符合用戶認(rèn)知和行為的界面:
信息呈現(xiàn)與確認(rèn)偏差:
UI設(shè)計(jì)中的信息呈現(xiàn)方式能夠影響用戶的感知。確認(rèn)偏差提示我們,設(shè)計(jì)師應(yīng)該精心布局信息,確保用戶首先接觸到的內(nèi)容是符合其期望和信念的。在重要位置展示與用戶預(yù)期一致的信息能夠增強(qiáng)用戶對(duì)界面的認(rèn)可感。
用戶體驗(yàn)與認(rèn)知一致性:
UI設(shè)計(jì)應(yīng)該符合用戶的認(rèn)知模式和習(xí)慣。保持一致的界面元素、布局結(jié)構(gòu)和交互方式有助于降低用戶學(xué)習(xí)成本,提升用戶體驗(yàn),因?yàn)檫@與用戶的認(rèn)知一致性相契合。
選擇性暴露與設(shè)計(jì)引導(dǎo):
設(shè)計(jì)師可以利用確認(rèn)偏差的特性來(lái)引導(dǎo)用戶,將重要信息或功能放置在易于察覺(jué)的位置,引導(dǎo)用戶進(jìn)行特定的操作。然而,需要謹(jǐn)慎處理,以避免對(duì)用戶造成信息過(guò)載。
避免偏見(jiàn)與用戶測(cè)試:
設(shè)計(jì)師應(yīng)該避免自身的認(rèn)知偏差影響設(shè)計(jì),而是更多地關(guān)注用戶的實(shí)際需求和行為。通過(guò)持續(xù)的用戶測(cè)試和反饋,可以驗(yàn)證設(shè)計(jì)的有效性,確保設(shè)計(jì)更加客觀、全面地服務(wù)于用戶。
認(rèn)知偏差不僅能夠幫助設(shè)計(jì)師更好地了解用戶行為和認(rèn)知模式,也提醒設(shè)計(jì)師需要謹(jǐn)慎地處理信息的呈現(xiàn)方式,以創(chuàng)造出更符合用戶認(rèn)知特點(diǎn)和期望的界面。
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
需要我們記住什么?
用戶選擇性感知:
用戶會(huì)傾向于選擇性地接收與其已有信念相符的信息。因此,在設(shè)計(jì)中需要注意如何呈現(xiàn)信息,以便用戶更容易接收并理解與其預(yù)期一致的內(nèi)容。
認(rèn)知一致性與用戶體驗(yàn):
用戶更喜歡一致性的界面設(shè)計(jì)。保持界面元素、布局和交互方式的一致性有助于提高用戶體驗(yàn),減少認(rèn)知負(fù)擔(dān)。
引導(dǎo)與用戶行為:
可以利用認(rèn)知偏差的特性來(lái)引導(dǎo)用戶行為,但需要謹(jǐn)慎,以避免對(duì)用戶造成信息過(guò)載或誤導(dǎo)。
客觀設(shè)計(jì)與用戶測(cè)試:
設(shè)計(jì)師需保持客觀,在設(shè)計(jì)中避免個(gè)人偏見(jiàn)的影響。持續(xù)的用戶測(cè)試和反饋是驗(yàn)證設(shè)計(jì)有效性的關(guān)鍵。
用戶需求至上:
最重要的是設(shè)計(jì)能夠滿足用戶的實(shí)際需求。認(rèn)知偏差提醒我們關(guān)注用戶行為和反饋,確保設(shè)計(jì)更加貼近用戶期望。
記住這些關(guān)鍵點(diǎn)有助于設(shè)計(jì)師更好地應(yīng)用認(rèn)知偏差的理論,創(chuàng)造出更符合用戶認(rèn)知和行為習(xí)慣的界面,提升用戶體驗(yàn)和產(chǎn)品吸引力。
 
在app產(chǎn)品中,我們應(yīng)該怎么應(yīng)用認(rèn)知偏差
在App產(chǎn)品中,了解和應(yīng)用認(rèn)知偏差可以改善用戶體驗(yàn)和促進(jìn)用戶參與。以下是一些應(yīng)用認(rèn)知偏差的方法:
個(gè)性化內(nèi)容推薦
 利用用戶的歷史數(shù)據(jù)和偏好,提供個(gè)性化的內(nèi)容推薦,引導(dǎo)用戶瀏覽與其興趣相關(guān)的信息,這符合用戶的認(rèn)知偏好。
強(qiáng)調(diào)常用功能
 將常用功能放置在易于察覺(jué)的位置,這有助于用戶更快速地找到并使用常用功能,符合用戶對(duì)信息的選擇性感知。
引導(dǎo)用戶決策
 通過(guò)明確的引導(dǎo)和推薦,幫助用戶做出決策。例如,突出顯示推薦選項(xiàng)或使用明確的指導(dǎo)語(yǔ)言,以降低用戶的選擇焦慮。
增加用戶互動(dòng)和獎(jiǎng)勵(lì)機(jī)制: 利用認(rèn)知偏差中的獎(jiǎng)勵(lì)機(jī)制,激勵(lì)用戶參與互動(dòng)。例如,獎(jiǎng)勵(lì)積分、勛章或獎(jiǎng)勵(lì)物品以促進(jìn)用戶的積極參與。
社交證據(jù)和影響力
 強(qiáng)調(diào)其他用戶的行為和意見(jiàn),例如顯示用戶評(píng)論或社交分享,可以影響新用戶的決策,符合社會(huì)影響的認(rèn)知偏差。
提供個(gè)性化的反饋和建議
 根據(jù)用戶的行為提供個(gè)性化的反饋和建議,引導(dǎo)用戶完成特定的動(dòng)作或行為,符合用戶的認(rèn)知偏好和選擇性感知。
綜合利用這些策略可以更好地與用戶互動(dòng),促進(jìn)參與度,提高用戶對(duì)產(chǎn)品的滿意度。然而,需要謹(jǐn)慎運(yùn)用,避免過(guò)度使用以至于影響用戶體驗(yàn)或?qū)е滦畔⑦^(guò)載。
 
認(rèn)知偏差總結(jié)
綜合利用認(rèn)知偏差的這些方面,設(shè)計(jì)者可以更加精準(zhǔn)地與用戶互動(dòng),提升用戶體驗(yàn)和參與度。但務(wù)必注意,應(yīng)用認(rèn)知偏差需要在不影響用戶信任和體驗(yàn)的前提下進(jìn)行,避免過(guò)度干預(yù)或引導(dǎo),以免影響用戶的自主性和信任感。


作者:A大林子
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

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

銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)

軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

設(shè)計(jì)原則:??硕?/a>

博博

它是怎么產(chǎn)生的?
希克定律是基于心理學(xué)和人類認(rèn)知過(guò)程的研究而產(chǎn)生的。威廉·??撕退耐略?930年代進(jìn)行了一系列的實(shí)驗(yàn),旨在了解人們?cè)诓煌x擇數(shù)量下做出決策的反應(yīng)時(shí)間。
實(shí)驗(yàn)中,被試者面對(duì)不同數(shù)量的選擇,例如按鈕或選項(xiàng),然后被要求盡快做出選擇。實(shí)驗(yàn)結(jié)果顯示,隨著選項(xiàng)數(shù)量的增加,被試者做出選擇所需的時(shí)間也相應(yīng)增加。這一觀察成為希克定律的基礎(chǔ)。
希克定律的本質(zhì)是認(rèn)知心理學(xué)的一部分,它涉及到人類對(duì)信息的處理方式。當(dāng)人們面對(duì)多個(gè)選項(xiàng)時(shí),他們需要對(duì)每個(gè)選項(xiàng)進(jìn)行評(píng)估和決策,這會(huì)增加認(rèn)知負(fù)荷。結(jié)果是,隨著選項(xiàng)數(shù)量的增加,處理和選擇所需的時(shí)間也相應(yīng)增加。
這個(gè)定律提出了一種對(duì)設(shè)計(jì)界面和交互方式有深遠(yuǎn)影響的見(jiàn)解:簡(jiǎn)化界面,減少選擇數(shù)量,可以幫助用戶更快速、更輕松地做出決策。這種認(rèn)知負(fù)荷的理論成果對(duì)于優(yōu)化用戶體驗(yàn)和提高界面效率有著重要的指導(dǎo)作用。
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
思考下??硕蒛I作用?
??硕稍赨I設(shè)計(jì)中具有重要作用,它強(qiáng)調(diào)了簡(jiǎn)化選擇以提高用戶體驗(yàn)的重要性。以下是希克定律在UI設(shè)計(jì)中的一些具體作用和應(yīng)用:
簡(jiǎn)化菜單和導(dǎo)航
 減少導(dǎo)航菜單中的選項(xiàng)數(shù)量,將類似功能的項(xiàng)目歸類或合并,可以減輕用戶的選擇負(fù)擔(dān),幫助他們更快速地找到所需信息。
優(yōu)化工作流程
 在應(yīng)用程序或網(wǎng)站設(shè)計(jì)中,簡(jiǎn)化工作流程和操作步驟可以減少用戶需要做出的決策,提高用戶完成任務(wù)的效率。
默認(rèn)設(shè)置和建議
 使用默認(rèn)設(shè)置或提供建議可以減少用戶必須做出的選擇。通過(guò)合理設(shè)置默認(rèn)選項(xiàng),可以簡(jiǎn)化用戶體驗(yàn),讓用戶更快地進(jìn)入應(yīng)用或網(wǎng)站并開(kāi)始使用。
信息層級(jí)結(jié)構(gòu)
 設(shè)計(jì)清晰的信息架構(gòu)和層級(jí)結(jié)構(gòu)有助于將內(nèi)容組織得更有條理,使用戶能夠更容易地定位所需信息,避免過(guò)多的選擇。
上下文反饋和指導(dǎo)
 提供清晰的上下文反饋和指導(dǎo),幫助用戶更快速地了解當(dāng)前操作的影響,減少不必要的猶豫和選擇焦慮。
用戶個(gè)性化和智能推薦
 利用個(gè)性化推薦或智能算法,根據(jù)用戶的歷史偏好為其提供定制化的選擇,減少不必要的選擇。
在UI設(shè)計(jì)中,理解??硕煽梢砸龑?dǎo)設(shè)計(jì)師創(chuàng)造出更簡(jiǎn)潔、更直觀、更易用的界面,從而提高用戶滿意度和效率。通過(guò)減少選擇數(shù)量和簡(jiǎn)化操作,設(shè)計(jì)可以更好地配合人類認(rèn)知特性,使用戶在界面上的交互變得更加流暢和自然。
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
需要我們記住什么?
在UI設(shè)計(jì)中,了解和應(yīng)用??硕捎兄趧?chuàng)造更優(yōu)秀的用戶體驗(yàn)。以下是需要記住的一些關(guān)鍵點(diǎn):
選擇數(shù)量與決策時(shí)間成正比:
用戶需要花費(fèi)更多時(shí)間來(lái)做出決策,當(dāng)他們面對(duì)更多選擇時(shí)。減少選擇數(shù)量可以提高用戶的決策效率。
簡(jiǎn)化界面以降低認(rèn)知負(fù)荷:
 設(shè)計(jì)簡(jiǎn)潔、清晰的界面可以減少用戶的認(rèn)知負(fù)荷,幫助他們更輕松地使用應(yīng)用或網(wǎng)站。
層級(jí)結(jié)構(gòu)和組織:
 通過(guò)良好的信息層級(jí)結(jié)構(gòu)和內(nèi)容組織,可以使用戶更快速地找到所需信息,減少選擇過(guò)程。
默認(rèn)設(shè)置的重要性:
合理設(shè)置默認(rèn)選項(xiàng)可以簡(jiǎn)化用戶體驗(yàn),降低他們需要做出的選擇,從而更快地開(kāi)始使用應(yīng)用或網(wǎng)站。
上下文反饋和引導(dǎo)
提供清晰的上下文反饋和指導(dǎo),幫助用戶更快速地了解其操作的影響,減少選擇焦慮。
用戶個(gè)性化和智能推薦
利用用戶個(gè)性化數(shù)據(jù)和智能算法,為用戶提供定制化的選擇,降低不必要的選擇過(guò)程。
記住這些關(guān)鍵點(diǎn)能夠幫助設(shè)計(jì)師更好地優(yōu)化界面,提供更出色的用戶體驗(yàn),減少用戶做出選擇所需的時(shí)間,從而增強(qiáng)產(chǎn)品或應(yīng)用的吸引力和實(shí)用性。
 
在app產(chǎn)品中,我們應(yīng)該怎么應(yīng)用??硕?/span>
在移動(dòng)應(yīng)用程序(App)設(shè)計(jì)中,應(yīng)用??硕煽梢酝ㄟ^(guò)以下方式提高用戶體驗(yàn):
簡(jiǎn)化導(dǎo)航和菜單
 減少主導(dǎo)航菜單中的選項(xiàng)數(shù)量,將類似的功能合并或分類,以簡(jiǎn)化用戶的選擇過(guò)程。使用清晰的圖標(biāo)和標(biāo)簽幫助用戶更快速地理解選項(xiàng)。
優(yōu)化注冊(cè)和登錄流程
在注冊(cè)和登錄過(guò)程中盡可能減少必填項(xiàng),使用社交媒體登錄或單一注冊(cè)選項(xiàng)簡(jiǎn)化流程,降低用戶的選擇負(fù)擔(dān)。
默認(rèn)設(shè)置和個(gè)性化推薦: 利用用戶的偏好和歷史數(shù)據(jù),為用戶提供個(gè)性化的推薦或默認(rèn)設(shè)置,減少用戶需要做出的選擇,并快速展示最相關(guān)的內(nèi)容或功能。
簡(jiǎn)化表單和輸入
最小化表單字段,根據(jù)上下文預(yù)填充表單內(nèi)容或使用智能輸入建議,以降低用戶輸入的認(rèn)知負(fù)擔(dān)。
上下文引導(dǎo)和反饋
在用戶進(jìn)行關(guān)鍵操作時(shí)提供清晰的引導(dǎo)和反饋,讓用戶了解他們的操作將會(huì)帶來(lái)的結(jié)果,減少不必要的猶豫和選擇焦慮。
智能搜索和過(guò)濾功能
提供強(qiáng)大的搜索和過(guò)濾功能,幫助用戶快速找到所需內(nèi)容,減少在大量選項(xiàng)中的選擇時(shí)間。
簡(jiǎn)化購(gòu)買流程
 在電商應(yīng)用中,優(yōu)化購(gòu)買流程,減少購(gòu)物車和結(jié)賬過(guò)程中的步驟和選擇,提供清晰的購(gòu)買路徑。
通過(guò)以上方式,設(shè)計(jì)師可以在App中運(yùn)用??硕?,幫助用戶更輕松、更高效地使用應(yīng)用,提高用戶滿意度并增強(qiáng)應(yīng)用的吸引力。這些方法都圍繞著減少選擇數(shù)量、簡(jiǎn)化操作和提供個(gè)性化的體驗(yàn),以減少用戶的認(rèn)知負(fù)荷,提高用戶的決策效率。
 
??硕煽偨Y(jié)
??硕稍谝苿?dòng)應(yīng)用設(shè)計(jì)中的應(yīng)用關(guān)鍵在于簡(jiǎn)化選擇、優(yōu)化流程以提升用戶體驗(yàn)。通過(guò)減少主導(dǎo)航選項(xiàng)、優(yōu)化注冊(cè)與登錄流程、提供個(gè)性化推薦、簡(jiǎn)化表單輸入、提供清晰反饋和引導(dǎo)、強(qiáng)化搜索功能以及簡(jiǎn)化購(gòu)買流程,設(shè)計(jì)師可以降低用戶的選擇焦慮和認(rèn)知負(fù)荷,使用戶更輕松、更高效地使用應(yīng)用,提升用戶滿意度。這些策略圍繞著簡(jiǎn)化操作、減少選項(xiàng)數(shù)量和提供個(gè)性化體驗(yàn),有助于提高用戶的決策效率,增強(qiáng)應(yīng)用的吸引力與可用性。


作者:A大林子
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

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

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)

軟件qt開(kāi)發(fā)軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

一招教會(huì)你頁(yè)面分割怎么用

博博

作為一名合格的UI設(shè)計(jì)師,用好留白分割、線性分割、卡片分割,你的頁(yè)面即成功了一半!

留白分割≧線性分割≧卡片分割

留白分割定義:指的是只通過(guò)增加間距的方式,利用人的視知覺(jué)原理(接近法則:人的大腦會(huì)傾向于把彼此靠近的元素視為一組),自然的將信息分組。(如上圖)

間距留白是區(qū)隔單一信息元素的默認(rèn)選擇。(如下圖)

使用原則:建議在不影響核心數(shù)據(jù)指標(biāo)的前提下,條目之間盡可能采用留白分割,會(huì)讓界面更清爽,瀏覽更沉浸。

留白分割的分類及適用場(chǎng)景:當(dāng)條目信息層次較少(≦2)時(shí),留白分割是比較合適的,當(dāng)信息層次較多(≧3)時(shí),留白分割既會(huì)浪費(fèi)空間,也難以達(dá)到一目了然的分割效果。

線性分割定義:用線來(lái)分隔不同的信息內(nèi)容。(大部分APP的分割線是1px粗細(xì),黑色,不透明度12%)。

使用原則:分割線可以幫助用戶理解頁(yè)面是如何組成的,但過(guò)度使用分割線會(huì)造成視覺(jué)干擾,影響頁(yè)面信息傳達(dá)。

Android系統(tǒng)明確規(guī)定了分割線的使用原則:
1、微妙的:分割線在布局中應(yīng)該很容易被注意到,但又不凸顯。
2、次要的:只有當(dāng)留白不能起到分割作用時(shí),才采用分分割線。
3、少用的:謹(jǐn)慎使用分割線,用它來(lái)創(chuàng)建分組而不是分割條目。(如下圖)

分類及使用場(chǎng)景:
1、通欄分割線:用于分割彼此完全獨(dú)立的內(nèi)容。
2、內(nèi)嵌分割線:用于分割有錨點(diǎn)(頭像或圖標(biāo))的相關(guān)內(nèi)容。
3、中間分割線:用于分割無(wú)錨點(diǎn)(頭像或圖標(biāo))的相關(guān)內(nèi)容。

如果為了提高屏效,希望在一屏內(nèi)盡可能多的展示信息,那么同樣的信息布局,分割線帶來(lái)的效果會(huì)更清晰(如下圖)

卡片分割定義:卡片是一個(gè)由內(nèi)容和操作組合而成的獨(dú)立主題的面性容器①,它可以包含縮略圖②、標(biāo)題③、副標(biāo)題④、副媒體⑤、文本⑥、問(wèn)文字按鈕⑦和圖標(biāo)按鈕⑧,除了卡片容器本身,其他元素都是可選的,所有元素都以易于掃描和操作的形式放置在卡片上。

使用原則:
1、包含的:卡片是一個(gè)可識(shí)別的,單獨(dú)的、包含內(nèi)容的單元。
2、獨(dú)立的:一張卡片可以獨(dú)立存在,而不依賴于上下文環(huán)境。
3、不可分割的:一張卡片不能與另一張合并,也不能拆分成多張卡片。
分類及適用場(chǎng)景:
卡片根據(jù)左右是否有邊距,可簡(jiǎn)單分為通欄卡片和非通欄卡片(如下圖)。

從視覺(jué)效果上來(lái)看,由于圓角的聚焦效應(yīng),非通欄卡片對(duì)于凸顯單個(gè)卡片的獨(dú)立性和內(nèi)容的效果都更好,畫(huà)面的分割感會(huì)更強(qiáng)。
1、當(dāng)這個(gè)主題內(nèi)部的內(nèi)容已經(jīng)有分割線時(shí),建議采用卡片分割,讓主題信息層次更加清晰。
2、當(dāng)單個(gè)主題內(nèi)部的內(nèi)容類型較多,上下所占空間較大,建議采用卡片分割,以更好的圈定該主題的內(nèi)容范圍,給用戶明確的內(nèi)容邊界感。
3、當(dāng)需要擴(kuò)展頁(yè)面的橫向空間時(shí),暗示頁(yè)面可以橫向滑動(dòng)時(shí),需要采用非通欄卡片,利用橫向內(nèi)容連續(xù)性原則,幫助用戶建立可以橫向滑動(dòng)的意識(shí)。

小結(jié):

  • 當(dāng)信息條目復(fù)雜度較低時(shí),優(yōu)先采用留白分割,視覺(jué)清爽無(wú)干擾。
  • 當(dāng)信息條目復(fù)雜度增加,只利用留白分割效果不明顯時(shí),建議引入線性分割,讓信息層次更清晰且屏效高。
  • 當(dāng)信息條目復(fù)雜度進(jìn)一步提升,(比如已經(jīng)有了線性分割,或者有更多操作),需要進(jìn)一步強(qiáng)化信息條目本身的邊界感,建議引入卡片,以強(qiáng)化條目信息的視覺(jué)層次和可操作性。

信息分割本身不是目的,分割方式的選擇是為了讓版面產(chǎn)生清晰的條理性,用悅目的信息秩序來(lái)更好的突出內(nèi)容,達(dá)成最佳的信息傳達(dá)效果,所以決策時(shí),除了上述細(xì)節(jié)考慮因素,還要考慮整體版面效果和信息傳達(dá)效率。


作者:是一顆李子
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

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

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)

軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)軟件vue開(kāi)發(fā)

 

設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”

博博

一、表情化反饋設(shè)計(jì)
 
通過(guò)用戶反饋可以讓產(chǎn)品的服務(wù)和體驗(yàn)做得更好,因此獲取反饋的設(shè)計(jì)變得至關(guān)重要。
 
在餓了么 App 點(diǎn)餐,完成訂單配送之后,會(huì)以彈窗的形式采集用戶反饋。通過(guò)表情化的設(shè)計(jì)讓用戶完成選項(xiàng),情感化的表達(dá)可以提高用戶的參與度,進(jìn)而達(dá)到獲取反饋意見(jiàn)的目的。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
 
二、靈動(dòng)可愛(ài)的動(dòng)效表達(dá)
 
動(dòng)效的表達(dá)相較于靜態(tài)而言更有吸引力,可以讓畫(huà)面更有視覺(jué)張力。
 
餓了么在 0 元奪寶活動(dòng)設(shè)計(jì)中,以 3D 動(dòng)效的形式展示靈動(dòng)可愛(ài)的小魚(yú)吐泡泡的畫(huà)面,瞬間讓場(chǎng)景變得更有趣味性。吸引用戶關(guān)注度的同時(shí),也讓活動(dòng)氛圍感十足。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
三、突出品牌主題的輪播設(shè)計(jì)
 
輪播圖的設(shè)計(jì)樣式豐富多樣,設(shè)計(jì)師都在不斷探索更新穎的表現(xiàn)形式和互動(dòng)玩法。
 
最近在體驗(yàn)芒果TV 時(shí),在好物欄目中的輪播圖布局設(shè)計(jì)中,結(jié)合了品牌主題進(jìn)行輪播切換。不僅強(qiáng)化了品牌主題,新穎的樣式表達(dá)也使得欄目更有設(shè)計(jì)感。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
四、收縮式導(dǎo)航欄設(shè)計(jì)
 
通過(guò)交互形式可以讓靜態(tài)布局有更多靈活性,方便用戶在不同操作場(chǎng)景中享受更好的體驗(yàn)。
 
作業(yè)幫 App 首頁(yè)默認(rèn)狀態(tài)突出搜索功能,當(dāng)用戶滑動(dòng)瀏覽內(nèi)容時(shí),頂部導(dǎo)航欄和搜索功能會(huì)收縮展示。簡(jiǎn)化部分功能和適配導(dǎo)航欄布局,提高當(dāng)前界面的利用率,帶給用戶更好的瀏覽體驗(yàn)。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
五、通過(guò)動(dòng)效強(qiáng)化按鈕關(guān)注度
 
微動(dòng)效越來(lái)越普及,不僅可以讓產(chǎn)品變得更有趣味性,也能通過(guò)動(dòng)靜對(duì)比突出功能關(guān)注度。
 
進(jìn)入作業(yè)幫 App 個(gè)人中心時(shí),會(huì)員開(kāi)通按鈕會(huì)通過(guò)一圈光效動(dòng)效進(jìn)行強(qiáng)化,吸引用戶關(guān)注到開(kāi)通按鈕。左上角的每日簽到圖標(biāo)也會(huì)以 3D 動(dòng)效的形式循環(huán)播放,以此吸引用戶進(jìn)行簽到操作。通過(guò)動(dòng)效強(qiáng)化功能的吸引力,提高用戶的操作概率。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
六、可視化設(shè)計(jì)強(qiáng)化任務(wù)流程
 
生硬的文字表達(dá)無(wú)法打動(dòng)用戶的參與度,圖形化、趣味性的可視化表達(dá)更能打動(dòng)用戶。
 
One More App 通過(guò)對(duì)選項(xiàng)內(nèi)容進(jìn)行圖形化表達(dá),讓用戶更直觀地判斷,可視化的設(shè)計(jì)也讓任務(wù)流程的選擇變得更輕松。不僅讓選項(xiàng)內(nèi)容更直觀,也能提高用戶的參與度,達(dá)到采集數(shù)據(jù)的目的。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
七、動(dòng)態(tài)封面更吸引人
 
封面設(shè)計(jì)是吸引用戶點(diǎn)擊欄目的關(guān)鍵,通過(guò)豐富多樣的設(shè)計(jì)表達(dá)逐步拉開(kāi)差異,而動(dòng)態(tài)封面變得尤為重視。
 
天天跳繩 App 首頁(yè)中,趣運(yùn)動(dòng)欄目的活動(dòng)主題封面進(jìn)行了動(dòng)靜結(jié)合。相較于靜態(tài)封面而言,動(dòng)態(tài)封面不僅更吸引人,也顯得很有趣味性。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
八、賦予功能營(yíng)銷屬性
 
挖掘營(yíng)銷點(diǎn)是提高產(chǎn)品變現(xiàn)力的關(guān)鍵,如何在用戶體驗(yàn)和營(yíng)銷曝光度中做平衡,需要我們不斷思考和探索。
 
微博 App 內(nèi)的營(yíng)銷布局點(diǎn)很多,在發(fā)現(xiàn)欄目中進(jìn)行下拉刷新時(shí),有時(shí)也會(huì)結(jié)合活動(dòng)或者品牌廣告。在不改變功能屬性的基礎(chǔ)上,融入營(yíng)銷屬性,是一個(gè)不錯(cuò)的嘗試。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
九、趣味性的設(shè)置按鈕
 
通過(guò)設(shè)置按鈕/開(kāi)關(guān)等進(jìn)行選項(xiàng)或者功能切換,一枚小小的按鈕也可以進(jìn)行更好的設(shè)計(jì)發(fā)揮,往往細(xì)微之處才能體現(xiàn)出產(chǎn)品的體驗(yàn)。
 
進(jìn)入騰訊動(dòng)漫 App 在“我的”版塊,進(jìn)行性別設(shè)置和夜間/日間切換時(shí),按鈕設(shè)計(jì)結(jié)合趣味性的動(dòng)效表達(dá)。小小的按鈕變得更加形象可愛(ài),更能吸引用戶進(jìn)行設(shè)置和體驗(yàn)。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
十、細(xì)微動(dòng)效讓圖標(biāo)更精致
 
微動(dòng)效在圖標(biāo)設(shè)計(jì)中的運(yùn)用非常普及,通常是為了突出點(diǎn)擊狀態(tài)或者重點(diǎn)功能,而用于所有圖標(biāo)的案例相對(duì)較少。
 
最近在體驗(yàn)馬蜂窩 App 的時(shí)候,發(fā)現(xiàn)首頁(yè)金剛區(qū)圖標(biāo)全部都帶有微動(dòng)效,動(dòng)效表達(dá)不會(huì)很夸張,都是細(xì)微的點(diǎn)綴。不僅點(diǎn)綴了圖標(biāo)設(shè)計(jì),也讓圖標(biāo)顯得更精致和趣味,細(xì)微的動(dòng)效不會(huì)使得整體互相干擾,是一個(gè)非常不錯(cuò)的金剛區(qū)圖標(biāo)設(shè)計(jì)方案。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”


作者:黑馬青年
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

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

銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)

軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

探索web端和移動(dòng)端的差異和解決方案

博博

市面上主流的界面設(shè)計(jì)主要包括移動(dòng)端、web端、桌面端、硬件、插件等,app和網(wǎng)站設(shè)計(jì)是大部分設(shè)計(jì)師最常見(jiàn)的設(shè)計(jì)需求,這兩個(gè)也是最核心的設(shè)計(jì)端平臺(tái),所以明白web端和移動(dòng)端設(shè)計(jì)的相似和差異并且知道如何應(yīng)對(duì)是至關(guān)重要的。
整體來(lái)說(shuō),移動(dòng)端的設(shè)計(jì)是更可控的,web端的設(shè)計(jì)難度實(shí)際更高,上限也更高。但是想要做好web端的設(shè)計(jì)并不難,只要明白web端設(shè)計(jì)時(shí)需要考慮的因素和解決辦法,那么所有問(wèn)題自然迎刃而解。
 
一、文本
 
1. 大小
總體上,移動(dòng)端和web端的字體規(guī)范是一致的,同一套字體大小都可以在雙端有好的識(shí)別和視覺(jué)效果。唯一細(xì)微的區(qū)別是瀏覽器支持的最小字體大小是12,所以在web端要摒棄12以下的字號(hào)。實(shí)際上這并不會(huì)增加你的web端設(shè)計(jì)難度,因?yàn)閣eb端的設(shè)計(jì)空間是足夠的。
 
2.長(zhǎng)度
設(shè)計(jì)中往往需要考慮文案長(zhǎng)度的問(wèn)題,移動(dòng)端受到屏幕空間的限制往往更容易遇到問(wèn)題,你需要考慮當(dāng)前文本段是否能在你所預(yù)留的空間放得下,對(duì)此可以參考以下幾種解決辦法:
  • 高度自適應(yīng):也就是換行顯示,大部分的文本段不可能無(wú)限換行,也應(yīng)該有字?jǐn)?shù)限制,所以選擇這一個(gè)解決辦法,正常也需要設(shè)定一個(gè)高度極限值。
  • 超出省略:當(dāng)文本段的完整性不是那么重要,且需要漏出,那么這是一個(gè)不錯(cuò)的方法
  • 字號(hào)自適應(yīng)縮小:這正常用在金融類產(chǎn)品的數(shù)字顯示中,比如余額等,當(dāng)小數(shù)點(diǎn)過(guò)多或者金額過(guò)大導(dǎo)致的數(shù)字文本端過(guò)長(zhǎng)時(shí),數(shù)字是無(wú)法換行或省略的,所以你可以選擇字號(hào)自適應(yīng)縮小。
二、屏幕大小
移動(dòng)端和web端最直觀的差異就是屏幕大小的差異,移動(dòng)端小,且各設(shè)備的差異化細(xì)微,web端的空間大,且不同設(shè)備的屏幕差異大,所以就有了幾點(diǎn)主要差異:
 
1. 布局
移動(dòng)端整體上是自上而下的設(shè)計(jì)布局,寬度受限比較嚴(yán)重,所以除了一些左滑手勢(shì)帶來(lái)的橫向空間拓展,布局的變化上不大。
web端因?yàn)榭臻g大,所以就有了更多的布局可能性,例如左右布局,居中布局,左中右布局,或是全屏自適應(yīng)布局。這些布局方式也各有各的優(yōu)缺點(diǎn)。
所以設(shè)計(jì)一個(gè)網(wǎng)站時(shí),往往需要多個(gè)布局配合使用,能讓你的網(wǎng)站視覺(jué)感受更舒適,利用率上更合理。切忌為了美觀或者方便等原因死磕一個(gè)布局方式。當(dāng)然,居中布局是最萬(wàn)能的一個(gè)布局,如果你暫時(shí)沒(méi)辦法掌控多個(gè)布局,那么居中布局是你最佳的選擇。
 
2. 適配
前文說(shuō)了,因?yàn)閣eb端的設(shè)備差異大,所以你需要在設(shè)計(jì)時(shí)考慮小屏筆記本和大屏顯示器的適配問(wèn)題,甚至是用戶手動(dòng)拉動(dòng)瀏覽器寬度時(shí)所得到的適配反饋也需要考慮其中。
適配不是必須的,因?yàn)檫m配的成本較高,復(fù)雜的頁(yè)面往往需要設(shè)計(jì)出多個(gè)斷點(diǎn)頁(yè)面去讓開(kāi)發(fā)根據(jù)頁(yè)面寬度重新適配內(nèi)容。所以大部分的居中布局的網(wǎng)站,是不做適配的,因?yàn)槟阒恍枰刂颇愕膬?nèi)容寬度能在13寸筆記本完整展示,其他的就是極小部分用戶的需求了。
web端到移動(dòng)端的適配往往需要重構(gòu),也就是把當(dāng)前網(wǎng)站的內(nèi)容,重新在手機(jī)寬度下做設(shè)計(jì),結(jié)合上文文本部分的內(nèi)容,請(qǐng)不要想當(dāng)然的把字號(hào)縮小。只需要考慮排版和功能是否需要?jiǎng)h減的問(wèn)題。 
 
3. 彈窗
移動(dòng)端受到屏幕限制,彈窗的更多是banner的彈出,提示的作用,或者是個(gè)別簡(jiǎn)單篩選操作,在移動(dòng)端很難在彈窗上放置很多的輸入等復(fù)雜操作
在web端的設(shè)計(jì)中,一定要巧用彈窗,簡(jiǎn)單的編輯或著創(chuàng)建等操作都可以用彈窗代替,不僅可以使操作更聚焦,也可以減少頁(yè)面跳轉(zhuǎn)來(lái)縮短路徑。
 
三、交互手勢(shì)
由于操作媒介的不同,導(dǎo)致移動(dòng)端和web的操作手勢(shì)有很大的區(qū)別,移動(dòng)端是用手指操作,web端是鼠標(biāo)操作,手指操作決定了手勢(shì)的多樣性,鼠標(biāo)的操作決定了點(diǎn)擊的精確,并且由于鼠標(biāo)的操作反饋是分階段的,需要在每個(gè)階段都給予用戶相應(yīng)的反饋來(lái)打造更好的用戶體驗(yàn)。
 
1. 狀態(tài)
移動(dòng)端中對(duì)于操作的反饋主要聚焦于手指點(diǎn)擊后的反饋,懸停態(tài)往往被長(zhǎng)按代替。而web端鼠標(biāo)操作存在三個(gè)狀態(tài),一個(gè)是正常狀態(tài),一個(gè)是懸停狀態(tài),一個(gè)是按下?tīng)顟B(tài),這三個(gè)狀態(tài)需要在設(shè)計(jì)師考慮并設(shè)計(jì)來(lái)向開(kāi)發(fā)說(shuō)明。web端中不同元素的常見(jiàn)狀態(tài)(主要為懸停態(tài))區(qū)分方式需要明白:
  • button:用顏色區(qū)分,常見(jiàn)的方式是改變顏色的明度,懸停增加明度,按下降低明度
  • icon:icon的狀態(tài)區(qū)分更多是在懸停狀態(tài)上,常見(jiàn)方式有:改變顏色;改變icon形態(tài)(如線性變面性);為icon添加背景色塊(如圓形灰色背景)。
  • 文字:文字的狀態(tài)區(qū)分除了顏色之外,可以利用文字自帶的屬性,如字重,字體大小,甚至可以在個(gè)別海外產(chǎn)品中看到通過(guò)改變字間距來(lái)表示懸停狀態(tài)。
  • 卡片:卡片的懸停設(shè)計(jì)更加的多樣,如改變填充色;改變描邊顏色;增加投影,比較有趣的有改變卡片大?。惠p微改變卡片透視;改變卡片的位置,如懸停時(shí)卡片向上輕微移動(dòng)。
 
由于web端獨(dú)有的懸停手勢(shì),你可以在懸停這個(gè)手勢(shì)大作文章,如果你了解linear風(fēng)格的話,或者經(jīng)常瀏覽國(guó)外產(chǎn)品的話,許多網(wǎng)站會(huì)在鼠標(biāo)懸??ㄆ瑫r(shí)產(chǎn)生動(dòng)效,動(dòng)效不限于卡片元素(插畫(huà)、圖標(biāo)、可視化表格等)的動(dòng)畫(huà);光影描邊的循環(huán)。懸停按鈕時(shí),箭頭的位置變動(dòng),或者其他動(dòng)畫(huà)效果。更酷炫的還有鼠標(biāo)與卡片透視的交互,甚至與鼠標(biāo)與全局頁(yè)面的交互,如水波紋等。
 
2. 操作按鈕
整體來(lái)說(shuō),web端基于屏幕大小的優(yōu)勢(shì)和狀態(tài)的多樣,在操作按鈕漏出數(shù)量和方式上會(huì)更加的多樣。
移動(dòng)端獨(dú)有的是長(zhǎng)按手勢(shì)和左滑右滑手勢(shì),所以移動(dòng)端會(huì)把一些操作放到左滑手勢(shì)中,最常見(jiàn)的如消息列表的置頂、刪除等。長(zhǎng)按手勢(shì)更多的是彈出更多操作,或是產(chǎn)生可拖動(dòng)效果。
web端拿列表舉例,基于屏幕的大小的優(yōu)勢(shì),可以將更多操作直接在列表右側(cè)直接漏出,用戶的操作路徑更短,觸達(dá)率自然就更高。拿卡片舉例,button的存在有的時(shí)候會(huì)影響到卡片的大小和美觀,所以有些操作往往可以藏到懸停狀態(tài)里,懸停操作不需要學(xué)習(xí),所以用戶不會(huì)為此感到疑惑,也可以保證功能的完整性。
 
四、設(shè)計(jì)思路
關(guān)于各個(gè)模塊如何設(shè)計(jì)并不在這里展開(kāi),我想表達(dá)是在設(shè)計(jì)稿設(shè)計(jì)時(shí)的一些操作思路,或者說(shuō)是組件的搭建思路。
 
1. 盒子思維
如果你對(duì)前端開(kāi)發(fā)有一定的了解,那么你一定懂得盒子套盒子。設(shè)計(jì)也是如此,需要給你的每個(gè)設(shè)計(jì)模塊建議一塊獨(dú)有的盒子。這是區(qū)別于間距或分割線的區(qū)分模塊的思路的。
舉個(gè)例子,你有圖片,主標(biāo)題,副標(biāo)題三個(gè)元素形成一個(gè)小模塊,那么你在確定好排版之后,你需要一個(gè)盒子將他們裝起來(lái),那么這個(gè)模塊必須有它自己的寬度,高度。換個(gè)角度理解也就是它需要有一定的上下左右間距,在figma中,這個(gè)盒子就是你的frame,高級(jí)一點(diǎn)就是你的自動(dòng)布局。這個(gè)盒子的大小就決定了這個(gè)模塊的操作熱區(qū),這也方便你在設(shè)計(jì)做出你的懸停效果。
這個(gè)設(shè)計(jì)思維適用于web端和移動(dòng)端,且十分重要,所以盡量避免在設(shè)計(jì)圖出現(xiàn)各個(gè)元素分別散落的情況,這不僅不利于你的設(shè)計(jì)稿管理,也不利于開(kāi)發(fā)的查看。
 
2. 新手如何參考
在進(jìn)行web端設(shè)計(jì)時(shí),如果你對(duì)web端設(shè)計(jì)一無(wú)所知,也無(wú)需驚慌。你可以找到合適的參考網(wǎng)站,并且分析它每個(gè)模塊的高度,間距等,去模仿他,并且從中得出規(guī)律。
拿web端的導(dǎo)航欄舉例,假設(shè)你糾結(jié)于web端的導(dǎo)航欄高度設(shè)置多少,你可以找到參考的網(wǎng)站,使用檢查功能(F12)去查看高度,或粗暴的截圖查看高度即可。當(dāng)然,在此之前,你需要確定這個(gè)模塊的高度是不會(huì)隨屏幕大小改變而改變的。
 
3. 自適應(yīng)布局
無(wú)論是web端設(shè)計(jì)還是移動(dòng)端設(shè)計(jì),當(dāng)你在設(shè)計(jì)模塊或搭建組件時(shí),善用自動(dòng)布局,這不僅有利于你設(shè)計(jì)圖高效率修改,也能應(yīng)對(duì)你的web端可能出現(xiàn)的適配情況。這需要考驗(yàn)?zāi)愕膄igma能力,如果大家有興趣,后續(xù)我可以出一些figma基礎(chǔ)、組件、自動(dòng)布局等相關(guān)教程同大家探討。

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

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

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

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)

軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

AIGC產(chǎn)品的設(shè)計(jì)原則

博博

一、AI產(chǎn)品形態(tài)介紹

不同的產(chǎn)品所具備的AI能力以及用戶的使用方式都是截然不同的。從產(chǎn)品功能的角度,產(chǎn)品大致可以分為三類:輔助駕駛型、內(nèi)容生產(chǎn)型、自主決策型。

輔助駕駛型

Copilot 輔助駕駛型如其名,更強(qiáng)調(diào)AI的輔助性。AI會(huì)針對(duì)某個(gè)模塊輔助用戶做出決策,或者基于用戶的操作而操作,從而幫助用戶實(shí)現(xiàn)自己靈感的落地,類似在成熟軟件中的插件功能。微軟的Microsoft 365 Copilot 結(jié)合在已有的Word、Excel工具當(dāng)中,用戶仍然可以自己書(shū)寫(xiě)文章或表格,但也能隨時(shí)喚起AI工具進(jìn)行編輯,對(duì)于已有的文件進(jìn)行匯總、擴(kuò)寫(xiě)等編輯操作。

內(nèi)容生產(chǎn)型

內(nèi)容生產(chǎn)型是需要調(diào)用LLM的API來(lái)實(shí)現(xiàn)某一具體內(nèi)容的功能性產(chǎn)品。用戶需要針對(duì)具體場(chǎng)景下達(dá)相對(duì)詳細(xì)、明確的指令后,AI會(huì)生成內(nèi)容結(jié)果的反饋。比如大家熟悉的midjourney,用戶下達(dá)具體的內(nèi)容場(chǎng)景描述,midhourney會(huì)返回圖片生成的結(jié)果。

自主決策型

AI Agent可以進(jìn)行自主決策和執(zhí)行任務(wù),它可以通過(guò)獨(dú)立思考和調(diào)用工具逐步完成給定的目標(biāo),無(wú)需人類去指定每一步的操作。比如,告訴 AI Agent 幫忙下單一份外賣,它就可以直接調(diào)用 APP 選擇外賣,再調(diào)用支付程序下單支付,無(wú)需用戶去指定每一步的操作。

二、AIGC產(chǎn)品設(shè)計(jì)原則

在AI產(chǎn)品的設(shè)計(jì)過(guò)程當(dāng)中,針對(duì)不同的產(chǎn)品形態(tài)、用戶場(chǎng)景、用戶心智需要明確其設(shè)計(jì)原則。當(dāng)前用戶對(duì)于AI工具的預(yù)期是:高性能、快速、高效和可靠。從用戶體驗(yàn)上來(lái)說(shuō),用戶與AI產(chǎn)品的交互方式、對(duì)于AI產(chǎn)品的信任程度都有別于其他軟件。我們需要在各個(gè)環(huán)節(jié)上,制定好AI產(chǎn)品的能力范疇,管理好用戶對(duì)產(chǎn)品的預(yù)期,為AI產(chǎn)品提供一個(gè)友好、可拓展的交互架構(gòu)。

原則1:讓用戶明確知道產(chǎn)品的能力范圍

在產(chǎn)品推出之前,清晰地定義產(chǎn)品的能力和限制。不要過(guò)度夸大產(chǎn)品的功能或過(guò)度承諾,而是誠(chéng)實(shí)地描述產(chǎn)品的真實(shí)能力。給予用戶在使用產(chǎn)品前充足的心理預(yù)期,用戶可以清晰的了解產(chǎn)品的能力范圍。更好地管控用戶心理預(yù)期的同時(shí),也可以向用戶傳遞產(chǎn)品的能力點(diǎn)。
 
如小庫(kù)科技詳細(xì)描述了產(chǎn)品可以應(yīng)用的功能場(chǎng)景,用戶對(duì)于場(chǎng)景化的詞語(yǔ)可以有更好的關(guān)聯(lián)聯(lián)想,對(duì)于產(chǎn)品的能力也有更好的邊界認(rèn)知。
 
科大訊飛也通過(guò)具體的場(chǎng)景化進(jìn)行產(chǎn)品功能的傳遞
 
在Liblib的模型廣場(chǎng)中,會(huì)將用戶生產(chǎn)的結(jié)果、模型以社區(qū)成果的形式進(jìn)行展示,用戶可以查看詳細(xì)的生成參數(shù)進(jìn)行嘗試,對(duì)于新手用戶也可以起到很好的內(nèi)容引導(dǎo)。

原則2:讓用戶可預(yù)期結(jié)果

人工智能決策的透明度對(duì)用戶至關(guān)重要,使用可視化工具、交互或解釋性語(yǔ)言讓用戶能夠理解AI是如何做出決策。如小庫(kù)AI,在“描述詞”的提示文案中告知用戶輸入詞的限定以及預(yù)期的生成結(jié)果,并可以通過(guò)詞庫(kù)告知用戶可以輸入哪些類型的詞。
 
如酷家樂(lè)AI,用戶在首次使用AI工具,沒(méi)有靈感或想法的時(shí)候,引導(dǎo)并提示用戶可上傳的素材類型,讓用戶可以有更好的目標(biāo)預(yù)期。

原則3:建立與用戶共建產(chǎn)品的機(jī)制

積極邀請(qǐng)用戶參與產(chǎn)品的設(shè)計(jì)和改進(jìn)過(guò)程,通過(guò)用戶調(diào)研、用戶測(cè)試和用戶反饋機(jī)制,了解用戶的期望和需求,并將其納入到產(chǎn)品的迭代和改進(jìn)中。如在Discord社區(qū)當(dāng)中,用戶可以在官網(wǎng)的反饋入口找到期望反饋的內(nèi)容板塊,可以進(jìn)行問(wèn)題帖子的反饋,所有的用戶群體可以對(duì)帖子的內(nèi)容進(jìn)行投票支持和評(píng)論。也就是相當(dāng)于以社區(qū)共建的形式,讓所有的用戶都可以對(duì)產(chǎn)品進(jìn)行共建維護(hù)。如果是產(chǎn)品功能本身的問(wèn)題,開(kāi)發(fā)人員可以及時(shí)響應(yīng);如果是用戶自身對(duì)產(chǎn)品的認(rèn)知問(wèn)題,社區(qū)的小伙伴也可以進(jìn)行很好的解答。

原則4:減輕用戶對(duì)數(shù)據(jù)隱私安全的顧慮

在AI盛行的當(dāng)下,數(shù)據(jù)隱私安全可以說(shuō)是非常敏感的話題了,AI泄漏數(shù)據(jù)隱私的事件也在不斷曝光。妙鴨相機(jī)的爆紅事件給我們的警示是在產(chǎn)品設(shè)計(jì)的過(guò)程中,除了思考如何利用新技術(shù)產(chǎn)出新的創(chuàng)意,對(duì)用戶數(shù)據(jù)隱私安全的保護(hù)同樣重要,它是產(chǎn)品獲得用戶信任,得以被持續(xù)使用的原因之一。
數(shù)據(jù)隱私安全涵蓋的范圍是非常廣泛的。從產(chǎn)品設(shè)計(jì)的角度來(lái)看對(duì)于數(shù)據(jù)隱私安全的保護(hù)可以從以下幾點(diǎn)考慮:

1、政策和規(guī)范的跟進(jìn)和了解

遵守?cái)?shù)據(jù)隱私和安全相關(guān)的法律法規(guī)和標(biāo)準(zhǔn)對(duì)于產(chǎn)品和應(yīng)用是最基礎(chǔ)的。在國(guó)內(nèi),7月網(wǎng)信辦等7部委聯(lián)合公布了《生成式人工智能服務(wù)管理暫行辦法》,生成式人工智能服務(wù)管理辦法的正式落地為我國(guó)AI發(fā)展打下了基礎(chǔ)。

2、積極告知,將決策權(quán)還給用戶

積極告知用戶產(chǎn)品如何保護(hù)數(shù)據(jù)隱私安全也是規(guī)避風(fēng)險(xiǎn)的一種方法。比如用戶協(xié)議中對(duì)于用戶隱私的處理,比起直接提供給用戶大段的文案讓他們?nèi)ブ鹱植榭矗诓僮髁鞒讨姓f(shuō)明產(chǎn)品對(duì)于用戶隱私的使用,并讓用戶進(jìn)行手動(dòng)確認(rèn)會(huì)明顯提高用戶對(duì)于產(chǎn)品的信任程度。蘋(píng)果在數(shù)據(jù)隱私安全方面始終站在了用戶這一邊,無(wú)論是安裝應(yīng)用時(shí)詢問(wèn)權(quán)限還是每次出現(xiàn)的“是否允許粘貼”,其對(duì)于隱私保護(hù)的方法與措施都值得我們學(xué)習(xí)。

3、本地存儲(chǔ)也是一種選擇

Rewind工具可以自動(dòng)存儲(chǔ)用戶在自己電腦和手機(jī)上看到的所有內(nèi)容,通過(guò)引入“私人助理”的角色,方便用戶基于AI進(jìn)行內(nèi)容的搜索和瀏覽整合。工具對(duì)于用戶隱私的處理也非常值得參考,其主要通過(guò)本地存儲(chǔ)、內(nèi)容隨時(shí)可刪除等方法,讓隱私優(yōu)先的原則貫穿在產(chǎn)品的定位和功能設(shè)計(jì)之中,也是這款工具能夠獲得好評(píng)的原因之一。

三、結(jié)語(yǔ)

總的來(lái)說(shuō),AI技術(shù)的推廣目前仍面臨相當(dāng)大的挑戰(zhàn),對(duì)于大眾而言也有一定的使用門檻。作為設(shè)計(jì)師,比起強(qiáng)調(diào)產(chǎn)品能力的升級(jí),我們更應(yīng)該注重對(duì)用戶的關(guān)懷,一款好的AI產(chǎn)品必定是智能化且人性化的。AI技術(shù)下的人機(jī)交互應(yīng)用已經(jīng)成為UX設(shè)計(jì)的趨勢(shì),我們需要注意平衡技術(shù)和用戶體驗(yàn)之間的關(guān)系,以確保我們的設(shè)計(jì)在滿足用戶需求的基礎(chǔ)之上,能夠助力產(chǎn)品在商業(yè)市場(chǎng)上的成功。

 

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

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

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

高端網(wǎng)站設(shè)計(jì)公司藍(lán)藍(lán)設(shè)計(jì):關(guān)注并改善殘疾人用戶體驗(yàn)

博博

在醫(yī)療行業(yè)中,殘疾人用戶面臨著許多挑戰(zhàn),例如身體不便、視覺(jué)障礙、聽(tīng)力障礙等等。為了讓他們能夠更加方便地使用醫(yī)療服務(wù),UI設(shè)計(jì)師需要考慮到各種不同的因素,并采取相應(yīng)的措施來(lái)提高用戶體驗(yàn)。

日歷

鏈接

個(gè)人資料

存檔