亚洲国产成人精品无码久久久久久综合,婷婷五月深深久久精品,av无码久久久久久不卡网站

首頁

092024-2

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

什么是峰終定律

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

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

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

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

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

需要我們記住

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

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

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

強(qiáng)化峰值

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

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

降低負(fù)面峰值

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

我是這么做的

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

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

最后一定是終值

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

總結(jié)

用戶只記得使用過程中體驗高的場景和結(jié)束時的場景。
無論是在交互還是視覺上我們都可以利用峰終定律幫助用戶達(dá)到好的使用體驗。

作者：愛吃貓的魚___
來源：站酷

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

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

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

評論(0) 瀏覽(1035)

312024-1

全中文AI創(chuàng)意工具WHEE，4字搞定畫面

濤濤

今天給大家推薦一個中文的 AI 創(chuàng)意工具—— WHEE。我只輸入了四個字，它就生成了我想要的畫面。

評論(0) 瀏覽(1110)

292024-1

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

博博

權(quán)限的目的是保護(hù)用戶隱私，那么在何時以及用什么方式請求用戶權(quán)限會是比較合適的？本文將詳細(xì)介紹Android的運(yùn)行時權(quán)限模型，并展示設(shè)計一個UX來請求你的應(yīng)用程序所需的權(quán)限，希望對你有所啟發(fā)。

從Android 6.0開始，沒有在安裝時請求所有權(quán)限，而是引入了運(yùn)行時權(quán)限模型，開發(fā)者可以控制應(yīng)用何時以及如何請求權(quán)限。這如同你想邀某人出去約會，過早、過頻繁或以錯誤的方式對你來說并不好。

本文我將詳細(xì)介紹Android的運(yùn)行時權(quán)限模型，并向你展示如何設(shè)計一個UX來請求你的應(yīng)用程序所需的權(quán)限。權(quán)限的目的是保護(hù)用戶的隱私，但當(dāng)你請求權(quán)限時，你是在要求用戶放棄一點(diǎn)隱私，因此，你需要提供明確且平等的利益以換取訪問。運(yùn)行時權(quán)限允許你在用戶更了解你請求權(quán)限的原因和授予權(quán)限的好處時選擇合適的時間請求權(quán)限。Android實現(xiàn)它們的方式使得以正確的方式請求它們變得十分重要。

運(yùn)行時權(quán)限模型有利于保護(hù)用戶的隱私，當(dāng)你的應(yīng)用程序請求權(quán)限時，Android會顯示一個對話框讓用戶接受或拒絕它，第一次請求權(quán)限時對話框不會顯示“不再詢問”復(fù)選框，只會在用戶至少一次拒絕權(quán)限請求后顯示它，你可以檢查之前是否被拒絕過，并明智的決定在何時提供更多教育。

從Android 11開始，如果用戶在使用應(yīng)用的過程中多次拒絕某項特定的權(quán)限，那么在你的應(yīng)用再次請求該權(quán)限時，用戶將不會看到系統(tǒng)權(quán)限對話框。該操作表示用戶希望“不再詢問”。

你無需過度防御，例如在實際請求權(quán)限之前你始終通過預(yù)許可（預(yù)授權(quán)）來衡量用戶授予權(quán)限的可能性，本質(zhì)上是請求兩次，這種雙重提示可能是不必要且煩人的，你可以通過在正確的時間以正確的方式詢問來達(dá)到同樣的效果。

Material Design分解了在兩個維度上請求權(quán)限的不同方法。首先權(quán)限對你的應(yīng)用程序的運(yùn)行有多重要？其次，你請求它的原因有多清晰？根據(jù)這兩個因素，建議你采用不同的方法來請求權(quán)限。

預(yù)先請求權(quán)限（Ask up-front）

如果某項權(quán)限對應(yīng)用程序運(yùn)行至關(guān)重要，并且顯而易見為什么需要請求它。例如日歷應(yīng)用，拒絕日歷權(quán)限會使應(yīng)用程序無法運(yùn)行，并且用戶顯然知道日歷應(yīng)用的用途以及請求日歷權(quán)限的原因，因此

不需要用任何不必要的解釋來打擾用戶，只需在用戶首次啟動應(yīng)用時立即請求它即可。

預(yù)先教育（Educate up-front）

如果某項權(quán)限對應(yīng)用至關(guān)重要，但請求它的原因不是很清晰。例如信貸應(yīng)用，為了準(zhǔn)確評估用戶的信貸資格、償還能力和防范反欺詐，通訊錄權(quán)限、通話記錄權(quán)限、位置權(quán)限對于風(fēng)控而言非常重要，建議請求權(quán)限之前對用戶進(jìn)行教育。

使用場景中請求權(quán)限（Ask in context）

如果應(yīng)用中的某項次要功能需要權(quán)限，但請求它的原因很清晰，建議你在使用場景中請求權(quán)限。例如筆記應(yīng)用允許用戶使用語音或音頻創(chuàng)建筆記，那么很明顯為什么此功能需要麥克風(fēng)權(quán)限，無需過早的請求它，以免用戶負(fù)擔(dān)過重，最好等到用戶嘗試使用該功能時，因為用戶更有可能允許符合其預(yù)期的權(quán)限請求。

結(jié)合使用場景進(jìn)行教育（Educate in context）

如果應(yīng)用中的某項次要功能需要權(quán)限，并且請求他的原因不是很清晰，建議你結(jié)合使用場景進(jìn)行教育。例如筆記應(yīng)用允許用戶與朋友協(xié)作，那么請求聯(lián)系人權(quán)限可能是合理的，但它不是顯而易見的，當(dāng)用戶調(diào)用該功能時，解釋應(yīng)用獲得聯(lián)系人權(quán)限后可為用戶提供哪些好處，比如自動填充郵件地址，然后才請求聯(lián)系人權(quán)限讓用戶授予它。

處理權(quán)限請求遭拒情況

通過使用正確的方法，用戶應(yīng)該清楚應(yīng)用請求權(quán)限的原因以及應(yīng)用獲得權(quán)限后可以為他們提供哪些好處。然而，這并不意味著用戶一定會授予權(quán)限。如果用戶拒絕了權(quán)限請求，建議采用以下做法：

在應(yīng)用界面中突出顯示因為沒有獲得特定權(quán)限而受限的功能所在的具體部分，例如在原本用于顯示該功能的結(jié)果或數(shù)據(jù)的位置顯示一條消息，讓用戶知道因缺少權(quán)限而無法使用該功能，幫助用戶在權(quán)限和功能之間建立心理聯(lián)系。
不要阻止界面顯示，不要全屏警告消息，讓用戶根本無法繼續(xù)使用應(yīng)用。即使在權(quán)限請求拒后，應(yīng)用也應(yīng)盡可能提供最佳的用戶體驗。例如即使麥克風(fēng)使用權(quán)限請求遭拒，仍應(yīng)全面提高文本功能的易用性。
用戶可能已經(jīng)選中了“不再詢問“復(fù)選框，應(yīng)用可能會在用戶未看到權(quán)限請求對話框的情況下受到拒絕，此時應(yīng)用應(yīng)該提供一個鏈接，鏈接到設(shè)備設(shè)置中用戶可以打開權(quán)限的具體位置。

盡量減少權(quán)限請求

在應(yīng)用中聲明權(quán)限之前，請先考慮是否需要這樣做，或者是否有替代方法可以在應(yīng)用中支持該功能。因為如果應(yīng)用聲明權(quán)限，那么每當(dāng)用戶使用需要運(yùn)行時權(quán)限的功能時，應(yīng)用便不得不中斷用戶的操作，請求相應(yīng)權(quán)限。然后，用戶必須做出決定。如果用戶不能理解您的應(yīng)用為何請求特定權(quán)限，可能就會拒絕授予該權(quán)限，甚至卸載應(yīng)用。

下面介紹幾個可以在不聲明任何權(quán)限的情況下實現(xiàn)的用例：

拍攝照片/錄制視頻

Android為應(yīng)用提供了相互通信的功能，讓你可以將任務(wù)委托給其他應(yīng)用。例如，如果你希望允許用拍照，但它不是應(yīng)用的核心部分，可以考慮使用Intent請求相機(jī)應(yīng)用拍攝照片并將其分享給你的應(yīng)用，這樣就不需要CAMERA權(quán)限。

自動輸入動態(tài)短信驗證碼

雙因素身份驗證流程中，動態(tài)短信驗證碼作為第二校驗因素時，使用SMS Retriever API（短信檢索器）可以讓應(yīng)用自動執(zhí)行用戶身份驗證，不需要用戶手動輸入驗證碼，不需要READ_SMS權(quán)限。

作者：交互設(shè)計師張楚

來源：站酷

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

評論(0) 瀏覽(985)

262024-1

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

博博

Android和iOS系統(tǒng)都設(shè)計了針對特定表單字段的指定鍵盤輸入類型。但大多數(shù)開發(fā)人員未能在他們的代碼中指定正確的鍵盤輸入類型。這會導(dǎo)致移動設(shè)備上的表單完成效率變慢。本文以Android平臺為例。

一、輸入類型并不總是“文本”

大多數(shù)開發(fā)人員錯誤地將每個表單字段的輸入類型設(shè)置為“文本”。這存在問題，因為每個表單字段的輸入并不總是純文本。通常都有一些字段要求輸入帶有數(shù)字或字母和數(shù)字組合的信息。當(dāng)用戶嘗試填寫這些字段時，他們應(yīng)該看到一個數(shù)字或字母和數(shù)字組合的鍵盤。

不幸的是，當(dāng)每個字段的輸入類型都設(shè)置為“文本”時，它會強(qiáng)制用戶使用文本鍵盤來輸入數(shù)字或字母和數(shù)字組合，輸入時舉步維艱，不是誤點(diǎn)，就是需要頻繁切換，輸入體驗十分糟糕。

因此，請務(wù)必為每個表單字段指定輸入類型，以便系統(tǒng)能夠顯示相應(yīng)的鍵盤。除了指定輸入類型，我們還應(yīng)指定相關(guān)行為，例如輸入法是否提供拼寫建議、是否將句子的首字母大寫，以及是否使用“完成”或“下一項”等操作鍵替換“回車”。

輸入類型、行為、操作鍵整理如下：

例一. 郵箱地址字段

表單要求用戶提供他們的郵箱地址是很常見的。當(dāng)我們將輸入類型設(shè)置為“郵箱地址”時，它會為用戶提供一個針對郵箱地址輸入的鍵盤。這個鍵盤不僅顯示字母，還可以顯示“@”和“.”，用戶可以輕松地輸入他們的郵箱地址。

例二. 姓名字段

英文名是專有名詞，英語中專有名詞的第一個字母要大寫。我們將輸入類型設(shè)置為“人名”，并且設(shè)置單詞首字母大寫。用戶無需對英文字母進(jìn)行大小寫切換。

二、每個鍵盤對輸入類型的反應(yīng)可能不同

案例一：登錄頁面的密碼輸入

釘釘將密碼框輸入類型設(shè)置為“密碼”。假定密碼為 z0h0a0n0g。

百度輸入法顯示密碼鍵盤，完成密碼輸入僅需點(diǎn)擊 9 次。
搜狗輸入法顯示文本鍵盤，用戶需在字母和數(shù)字之間切換，完成輸入需點(diǎn)擊 17 次。也支持長按第一行的字母輸入數(shù)字。
微信輸入法顯示文本鍵盤，完成密碼輸入需點(diǎn)擊 17 次。不支持長按字母輸入數(shù)字。

案例二：登錄頁面的手機(jī)號輸入

釘釘設(shè)置電話號碼鍵盤右下角為“下一項”按鈕。

百度輸入法的鍵盤右下角顯示“回車”，用戶完成手機(jī)號輸入后需手動獲取密碼文本框焦點(diǎn)。
搜狗輸入法的鍵盤右下角顯示“下一項”，用戶完成手機(jī)號輸入點(diǎn)擊下一項，密碼文本框自動獲取焦點(diǎn)。
微信輸入法的鍵盤右下角顯示“下一項”，用戶完成手機(jī)號輸入點(diǎn)擊下一項，密碼文本框自動獲取焦點(diǎn)。

三、Input Type 助力產(chǎn)品輸入體驗的提升

通過應(yīng)用 Input Type 你可以正確的為每個文本字段設(shè)置特定的輸入類型，以及看到每個輸入類型（以及輸入類型的組合）如何影響鍵盤。

Input Type這個工具需要安裝在安卓手機(jī)上，如果沒有安卓手機(jī)可以電腦上安裝一個網(wǎng)易MuMu安卓模擬器就可以用。

應(yīng)用截圖

作者：交互設(shè)計師張楚
來源：站酷

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

評論(0) 瀏覽(1005)

152024-1

設(shè)計原則：認(rèn)知偏差

博博

什么是確認(rèn)偏差？

確認(rèn)偏差是一種認(rèn)知偏差，指的是人們更傾向于尋找、記住或贊同支持已有信念或假設(shè)的信息，而忽視或排斥與其相矛盾的信息。這種偏差導(dǎo)致人們在尋求信息和形成觀點(diǎn)時傾向于選擇那些與他們已有信念相一致的信息，而忽視那些與之相悖的信息。

在設(shè)計和決策過程中，確認(rèn)偏差可能會對判斷和決策產(chǎn)生影響。設(shè)計師或決策者可能會傾向于尋找支持他們最初想法或假設(shè)的信息，而忽略潛在的反對觀點(diǎn)或證據(jù)。這可能導(dǎo)致錯誤的假設(shè)、不完整的分析或偏離客觀事實的判斷。

了解確認(rèn)偏差對于設(shè)計師和決策者來說是很重要的，因為它可以影響到他們對問題的看法和解決方案的選擇。為了減輕確認(rèn)偏差的影響，重要的做法包括尋求多樣的觀點(diǎn)和信息來源、鼓勵團(tuán)隊開放性討論、持續(xù)評估和反思自己的假設(shè)，以及意識到并主動應(yīng)對這種偏差。

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

確認(rèn)偏差的產(chǎn)生與人類的認(rèn)知方式和信息處理方式有關(guān)。它可以追溯到我們處理信息的心理機(jī)制，以及對信息的選擇性接收和處理。

信息過濾和選擇性接收

：人類大腦處理的信息量龐大，為了應(yīng)對這種信息負(fù)荷，我們會有意無意地選擇性地接收與已有信念相符的信息，因為這樣更容易被接受和理解。

認(rèn)知一致性和舒適度

：我們傾向于尋求與我們已有信念一致的信息，因為這會讓我們感到更加舒適和認(rèn)知上的一致性，而與之相悖的信息則可能引起認(rèn)知不適或挑戰(zhàn)。

記憶偏差

：我們記憶中更容易保留和回憶起與我們已有信念相符的信息，而忽略或淡化與之不符的信息，導(dǎo)致我們更傾向于記住和重復(fù)暴露于已有信念的信息。

社會影響和團(tuán)隊動態(tài)

：在團(tuán)隊環(huán)境中，人們可能更容易受到同伴或領(lǐng)導(dǎo)觀點(diǎn)的影響，導(dǎo)致更多地尋求與團(tuán)隊共識一致的信息。

因此，確認(rèn)偏差源于我們處理信息的方式和尋求認(rèn)知一致性的趨勢，這種傾向性會影響我們對信息的選擇、記憶和接受，使得我們更容易偏向于支持已有信念的信息。

思考下確認(rèn)偏差在UI作用？

認(rèn)知偏差在UI設(shè)計中有著深遠(yuǎn)的影響，設(shè)計師需要了解并考慮這些偏差，以創(chuàng)造更符合用戶認(rèn)知和行為的界面：

信息呈現(xiàn)與確認(rèn)偏差：

UI設(shè)計中的信息呈現(xiàn)方式能夠影響用戶的感知。確認(rèn)偏差提示我們，設(shè)計師應(yīng)該精心布局信息，確保用戶首先接觸到的內(nèi)容是符合其期望和信念的。在重要位置展示與用戶預(yù)期一致的信息能夠增強(qiáng)用戶對界面的認(rèn)可感。

用戶體驗與認(rèn)知一致性：

UI設(shè)計應(yīng)該符合用戶的認(rèn)知模式和習(xí)慣。保持一致的界面元素、布局結(jié)構(gòu)和交互方式有助于降低用戶學(xué)習(xí)成本，提升用戶體驗，因為這與用戶的認(rèn)知一致性相契合。

選擇性暴露與設(shè)計引導(dǎo)：

設(shè)計師可以利用確認(rèn)偏差的特性來引導(dǎo)用戶，將重要信息或功能放置在易于察覺的位置，引導(dǎo)用戶進(jìn)行特定的操作。然而，需要謹(jǐn)慎處理，以避免對用戶造成信息過載。

避免偏見與用戶測試：

設(shè)計師應(yīng)該避免自身的認(rèn)知偏差影響設(shè)計，而是更多地關(guān)注用戶的實際需求和行為。通過持續(xù)的用戶測試和反饋，可以驗證設(shè)計的有效性，確保設(shè)計更加客觀、全面地服務(wù)于用戶。

認(rèn)知偏差不僅能夠幫助設(shè)計師更好地了解用戶行為和認(rèn)知模式，也提醒設(shè)計師需要謹(jǐn)慎地處理信息的呈現(xiàn)方式，以創(chuàng)造出更符合用戶認(rèn)知特點(diǎn)和期望的界面。

需要我們記住什么？

用戶選擇性感知：

用戶會傾向于選擇性地接收與其已有信念相符的信息。因此，在設(shè)計中需要注意如何呈現(xiàn)信息，以便用戶更容易接收并理解與其預(yù)期一致的內(nèi)容。

認(rèn)知一致性與用戶體驗：

用戶更喜歡一致性的界面設(shè)計。保持界面元素、布局和交互方式的一致性有助于提高用戶體驗，減少認(rèn)知負(fù)擔(dān)。

引導(dǎo)與用戶行為：

可以利用認(rèn)知偏差的特性來引導(dǎo)用戶行為，但需要謹(jǐn)慎，以避免對用戶造成信息過載或誤導(dǎo)。

客觀設(shè)計與用戶測試：

設(shè)計師需保持客觀，在設(shè)計中避免個人偏見的影響。持續(xù)的用戶測試和反饋是驗證設(shè)計有效性的關(guān)鍵。

用戶需求至上：

最重要的是設(shè)計能夠滿足用戶的實際需求。認(rèn)知偏差提醒我們關(guān)注用戶行為和反饋，確保設(shè)計更加貼近用戶期望。

記住這些關(guān)鍵點(diǎn)有助于設(shè)計師更好地應(yīng)用認(rèn)知偏差的理論，創(chuàng)造出更符合用戶認(rèn)知和行為習(xí)慣的界面，提升用戶體驗和產(chǎn)品吸引力。

在app產(chǎn)品中，我們應(yīng)該怎么應(yīng)用認(rèn)知偏差

在App產(chǎn)品中，了解和應(yīng)用認(rèn)知偏差可以改善用戶體驗和促進(jìn)用戶參與。以下是一些應(yīng)用認(rèn)知偏差的方法：

個性化內(nèi)容推薦：

利用用戶的歷史數(shù)據(jù)和偏好，提供個性化的內(nèi)容推薦，引導(dǎo)用戶瀏覽與其興趣相關(guān)的信息，這符合用戶的認(rèn)知偏好。

強(qiáng)調(diào)常用功能：

將常用功能放置在易于察覺的位置，這有助于用戶更快速地找到并使用常用功能，符合用戶對信息的選擇性感知。

引導(dǎo)用戶決策：

通過明確的引導(dǎo)和推薦，幫助用戶做出決策。例如，突出顯示推薦選項或使用明確的指導(dǎo)語言，以降低用戶的選擇焦慮。

增加用戶互動和獎勵機(jī)制：利用認(rèn)知偏差中的獎勵機(jī)制，激勵用戶參與互動。例如，獎勵積分、勛章或獎勵物品以促進(jìn)用戶的積極參與。

社交證據(jù)和影響力：

強(qiáng)調(diào)其他用戶的行為和意見，例如顯示用戶評論或社交分享，可以影響新用戶的決策，符合社會影響的認(rèn)知偏差。

提供個性化的反饋和建議：

根據(jù)用戶的行為提供個性化的反饋和建議，引導(dǎo)用戶完成特定的動作或行為，符合用戶的認(rèn)知偏好和選擇性感知。

綜合利用這些策略可以更好地與用戶互動，促進(jìn)參與度，提高用戶對產(chǎn)品的滿意度。然而，需要謹(jǐn)慎運(yùn)用，避免過度使用以至于影響用戶體驗或?qū)е滦畔⑦^載。

認(rèn)知偏差總結(jié)

綜合利用認(rèn)知偏差的這些方面，設(shè)計者可以更加精準(zhǔn)地與用戶互動，提升用戶體驗和參與度。但務(wù)必注意，應(yīng)用認(rèn)知偏差需要在不影響用戶信任和體驗的前提下進(jìn)行，避免過度干預(yù)或引導(dǎo)，以免影響用戶的自主性和信任感。

作者：A大林子
來源：站酷

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

評論(0) 瀏覽(1159)

152024-1

設(shè)計原則：?？硕?/a>

博博

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

?？硕墒腔谛睦韺W(xué)和人類認(rèn)知過程的研究而產(chǎn)生的。威廉·希克和他的同事在1930年代進(jìn)行了一系列的實驗，旨在了解人們在不同選擇數(shù)量下做出決策的反應(yīng)時間。

實驗中，被試者面對不同數(shù)量的選擇，例如按鈕或選項，然后被要求盡快做出選擇。實驗結(jié)果顯示，隨著選項數(shù)量的增加，被試者做出選擇所需的時間也相應(yīng)增加。這一觀察成為?？硕傻幕A(chǔ)。

?？硕傻谋举|(zhì)是認(rèn)知心理學(xué)的一部分，它涉及到人類對信息的處理方式。當(dāng)人們面對多個選項時，他們需要對每個選項進(jìn)行評估和決策，這會增加認(rèn)知負(fù)荷。結(jié)果是，隨著選項數(shù)量的增加，處理和選擇所需的時間也相應(yīng)增加。

這個定律提出了一種對設(shè)計界面和交互方式有深遠(yuǎn)影響的見解：簡化界面，減少選擇數(shù)量，可以幫助用戶更快速、更輕松地做出決策。這種認(rèn)知負(fù)荷的理論成果對于優(yōu)化用戶體驗和提高界面效率有著重要的指導(dǎo)作用。

思考下?？硕蒛I作用？

?？硕稍赨I設(shè)計中具有重要作用，它強(qiáng)調(diào)了簡化選擇以提高用戶體驗的重要性。以下是?？硕稍赨I設(shè)計中的一些具體作用和應(yīng)用：

簡化菜單和導(dǎo)航：

減少導(dǎo)航菜單中的選項數(shù)量，將類似功能的項目歸類或合并，可以減輕用戶的選擇負(fù)擔(dān)，幫助他們更快速地找到所需信息。

優(yōu)化工作流程：

在應(yīng)用程序或網(wǎng)站設(shè)計中，簡化工作流程和操作步驟可以減少用戶需要做出的決策，提高用戶完成任務(wù)的效率。

默認(rèn)設(shè)置和建議：

使用默認(rèn)設(shè)置或提供建議可以減少用戶必須做出的選擇。通過合理設(shè)置默認(rèn)選項，可以簡化用戶體驗，讓用戶更快地進(jìn)入應(yīng)用或網(wǎng)站并開始使用。

信息層級結(jié)構(gòu)：

設(shè)計清晰的信息架構(gòu)和層級結(jié)構(gòu)有助于將內(nèi)容組織得更有條理，使用戶能夠更容易地定位所需信息，避免過多的選擇。

上下文反饋和指導(dǎo)：

提供清晰的上下文反饋和指導(dǎo)，幫助用戶更快速地了解當(dāng)前操作的影響，減少不必要的猶豫和選擇焦慮。

用戶個性化和智能推薦：

利用個性化推薦或智能算法，根據(jù)用戶的歷史偏好為其提供定制化的選擇，減少不必要的選擇。

在UI設(shè)計中，理解希克定律可以引導(dǎo)設(shè)計師創(chuàng)造出更簡潔、更直觀、更易用的界面，從而提高用戶滿意度和效率。通過減少選擇數(shù)量和簡化操作，設(shè)計可以更好地配合人類認(rèn)知特性，使用戶在界面上的交互變得更加流暢和自然。

需要我們記住什么？

在UI設(shè)計中，了解和應(yīng)用希克定律有助于創(chuàng)造更優(yōu)秀的用戶體驗。以下是需要記住的一些關(guān)鍵點(diǎn)：

選擇數(shù)量與決策時間成正比：

用戶需要花費(fèi)更多時間來做出決策，當(dāng)他們面對更多選擇時。減少選擇數(shù)量可以提高用戶的決策效率。

簡化界面以降低認(rèn)知負(fù)荷：

設(shè)計簡潔、清晰的界面可以減少用戶的認(rèn)知負(fù)荷，幫助他們更輕松地使用應(yīng)用或網(wǎng)站。

層級結(jié)構(gòu)和組織：

通過良好的信息層級結(jié)構(gòu)和內(nèi)容組織，可以使用戶更快速地找到所需信息，減少選擇過程。

默認(rèn)設(shè)置的重要性：

合理設(shè)置默認(rèn)選項可以簡化用戶體驗，降低他們需要做出的選擇，從而更快地開始使用應(yīng)用或網(wǎng)站。

上下文反饋和引導(dǎo)：

提供清晰的上下文反饋和指導(dǎo)，幫助用戶更快速地了解其操作的影響，減少選擇焦慮。

用戶個性化和智能推薦：

利用用戶個性化數(shù)據(jù)和智能算法，為用戶提供定制化的選擇，降低不必要的選擇過程。

記住這些關(guān)鍵點(diǎn)能夠幫助設(shè)計師更好地優(yōu)化界面，提供更出色的用戶體驗，減少用戶做出選擇所需的時間，從而增強(qiáng)產(chǎn)品或應(yīng)用的吸引力和實用性。

在app產(chǎn)品中，我們應(yīng)該怎么應(yīng)用希克定律

在移動應(yīng)用程序（App）設(shè)計中，應(yīng)用?？硕煽梢酝ㄟ^以下方式提高用戶體驗：

簡化導(dǎo)航和菜單：

減少主導(dǎo)航菜單中的選項數(shù)量，將類似的功能合并或分類，以簡化用戶的選擇過程。使用清晰的圖標(biāo)和標(biāo)簽幫助用戶更快速地理解選項。

優(yōu)化注冊和登錄流程：

在注冊和登錄過程中盡可能減少必填項，使用社交媒體登錄或單一注冊選項簡化流程，降低用戶的選擇負(fù)擔(dān)。

默認(rèn)設(shè)置和個性化推薦：利用用戶的偏好和歷史數(shù)據(jù)，為用戶提供個性化的推薦或默認(rèn)設(shè)置，減少用戶需要做出的選擇，并快速展示最相關(guān)的內(nèi)容或功能。

簡化表單和輸入：

最小化表單字段，根據(jù)上下文預(yù)填充表單內(nèi)容或使用智能輸入建議，以降低用戶輸入的認(rèn)知負(fù)擔(dān)。

上下文引導(dǎo)和反饋：

在用戶進(jìn)行關(guān)鍵操作時提供清晰的引導(dǎo)和反饋，讓用戶了解他們的操作將會帶來的結(jié)果，減少不必要的猶豫和選擇焦慮。

智能搜索和過濾功能：

提供強(qiáng)大的搜索和過濾功能，幫助用戶快速找到所需內(nèi)容，減少在大量選項中的選擇時間。

簡化購買流程：

在電商應(yīng)用中，優(yōu)化購買流程，減少購物車和結(jié)賬過程中的步驟和選擇，提供清晰的購買路徑。

通過以上方式，設(shè)計師可以在App中運(yùn)用希克定律，幫助用戶更輕松、更高效地使用應(yīng)用，提高用戶滿意度并增強(qiáng)應(yīng)用的吸引力。這些方法都圍繞著減少選擇數(shù)量、簡化操作和提供個性化的體驗，以減少用戶的認(rèn)知負(fù)荷，提高用戶的決策效率。

?？硕煽偨Y(jié)

希克定律在移動應(yīng)用設(shè)計中的應(yīng)用關(guān)鍵在于簡化選擇、優(yōu)化流程以提升用戶體驗。通過減少主導(dǎo)航選項、優(yōu)化注冊與登錄流程、提供個性化推薦、簡化表單輸入、提供清晰反饋和引導(dǎo)、強(qiáng)化搜索功能以及簡化購買流程，設(shè)計師可以降低用戶的選擇焦慮和認(rèn)知負(fù)荷，使用戶更輕松、更高效地使用應(yīng)用，提升用戶滿意度。這些策略圍繞著簡化操作、減少選項數(shù)量和提供個性化體驗，有助于提高用戶的決策效率，增強(qiáng)應(yīng)用的吸引力與可用性。

作者：A大林子
來源：站酷

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

評論(0) 瀏覽(964)

102024-1

一招教會你頁面分割怎么用

博博

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

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

留白分割定義：指的是只通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會傾向于把彼此靠近的元素視為一組），自然的將信息分組。（如上圖）

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

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

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

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

使用原則：分割線可以幫助用戶理解頁面是如何組成的，但過度使用分割線會造成視覺干擾，影響頁面信息傳達(dá)。

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

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

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

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

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

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

小結(jié)：

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

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

作者：是一顆李子
來源：站酷

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

評論(0) 瀏覽(897)

102024-1

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

博博

一、表情化反饋設(shè)計

通過用戶反饋可以讓產(chǎn)品的服務(wù)和體驗做得更好，因此獲取反饋的設(shè)計變得至關(guān)重要。

在餓了么 App 點(diǎn)餐，完成訂單配送之后，會以彈窗的形式采集用戶反饋。通過表情化的設(shè)計讓用戶完成選項，情感化的表達(dá)可以提高用戶的參與度，進(jìn)而達(dá)到獲取反饋意見的目的。

二、靈動可愛的動效表達(dá)

動效的表達(dá)相較于靜態(tài)而言更有吸引力，可以讓畫面更有視覺張力。

餓了么在 0 元奪寶活動設(shè)計中，以 3D 動效的形式展示靈動可愛的小魚吐泡泡的畫面，瞬間讓場景變得更有趣味性。吸引用戶關(guān)注度的同時，也讓活動氛圍感十足。

三、突出品牌主題的輪播設(shè)計

輪播圖的設(shè)計樣式豐富多樣，設(shè)計師都在不斷探索更新穎的表現(xiàn)形式和互動玩法。

最近在體驗芒果TV 時，在好物欄目中的輪播圖布局設(shè)計中，結(jié)合了品牌主題進(jìn)行輪播切換。不僅強(qiáng)化了品牌主題，新穎的樣式表達(dá)也使得欄目更有設(shè)計感。

四、收縮式導(dǎo)航欄設(shè)計

通過交互形式可以讓靜態(tài)布局有更多靈活性，方便用戶在不同操作場景中享受更好的體驗。

作業(yè)幫 App 首頁默認(rèn)狀態(tài)突出搜索功能，當(dāng)用戶滑動瀏覽內(nèi)容時，頂部導(dǎo)航欄和搜索功能會收縮展示。簡化部分功能和適配導(dǎo)航欄布局，提高當(dāng)前界面的利用率，帶給用戶更好的瀏覽體驗。

五、通過動效強(qiáng)化按鈕關(guān)注度

微動效越來越普及，不僅可以讓產(chǎn)品變得更有趣味性，也能通過動靜對比突出功能關(guān)注度。

進(jìn)入作業(yè)幫 App 個人中心時，會員開通按鈕會通過一圈光效動效進(jìn)行強(qiáng)化，吸引用戶關(guān)注到開通按鈕。左上角的每日簽到圖標(biāo)也會以 3D 動效的形式循環(huán)播放，以此吸引用戶進(jìn)行簽到操作。通過動效強(qiáng)化功能的吸引力，提高用戶的操作概率。

六、可視化設(shè)計強(qiáng)化任務(wù)流程

生硬的文字表達(dá)無法打動用戶的參與度，圖形化、趣味性的可視化表達(dá)更能打動用戶。

One More App 通過對選項內(nèi)容進(jìn)行圖形化表達(dá)，讓用戶更直觀地判斷，可視化的設(shè)計也讓任務(wù)流程的選擇變得更輕松。不僅讓選項內(nèi)容更直觀，也能提高用戶的參與度，達(dá)到采集數(shù)據(jù)的目的。

七、動態(tài)封面更吸引人

封面設(shè)計是吸引用戶點(diǎn)擊欄目的關(guān)鍵，通過豐富多樣的設(shè)計表達(dá)逐步拉開差異，而動態(tài)封面變得尤為重視。

天天跳繩 App 首頁中，趣運(yùn)動欄目的活動主題封面進(jìn)行了動靜結(jié)合。相較于靜態(tài)封面而言，動態(tài)封面不僅更吸引人，也顯得很有趣味性。

八、賦予功能營銷屬性

挖掘營銷點(diǎn)是提高產(chǎn)品變現(xiàn)力的關(guān)鍵，如何在用戶體驗和營銷曝光度中做平衡，需要我們不斷思考和探索。

微博 App 內(nèi)的營銷布局點(diǎn)很多，在發(fā)現(xiàn)欄目中進(jìn)行下拉刷新時，有時也會結(jié)合活動或者品牌廣告。在不改變功能屬性的基礎(chǔ)上，融入營銷屬性，是一個不錯的嘗試。

九、趣味性的設(shè)置按鈕

通過設(shè)置按鈕/開關(guān)等進(jìn)行選項或者功能切換，一枚小小的按鈕也可以進(jìn)行更好的設(shè)計發(fā)揮，往往細(xì)微之處才能體現(xiàn)出產(chǎn)品的體驗。

進(jìn)入騰訊動漫 App 在“我的”版塊，進(jìn)行性別設(shè)置和夜間/日間切換時，按鈕設(shè)計結(jié)合趣味性的動效表達(dá)。小小的按鈕變得更加形象可愛，更能吸引用戶進(jìn)行設(shè)置和體驗。

十、細(xì)微動效讓圖標(biāo)更精致

微動效在圖標(biāo)設(shè)計中的運(yùn)用非常普及，通常是為了突出點(diǎn)擊狀態(tài)或者重點(diǎn)功能，而用于所有圖標(biāo)的案例相對較少。

最近在體驗馬蜂窩 App 的時候，發(fā)現(xiàn)首頁金剛區(qū)圖標(biāo)全部都帶有微動效，動效表達(dá)不會很夸張，都是細(xì)微的點(diǎn)綴。不僅點(diǎn)綴了圖標(biāo)設(shè)計，也讓圖標(biāo)顯得更精致和趣味，細(xì)微的動效不會使得整體互相干擾，是一個非常不錯的金剛區(qū)圖標(biāo)設(shè)計方案。

作者：黑馬青年
來源：站酷

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

評論(0) 瀏覽(1072)

102024-1

探索web端和移動端的差異和解決方案

博博

市面上主流的界面設(shè)計主要包括移動端、web端、桌面端、硬件、插件等，app和網(wǎng)站設(shè)計是大部分設(shè)計師最常見的設(shè)計需求，這兩個也是最核心的設(shè)計端平臺，所以明白web端和移動端設(shè)計的相似和差異并且知道如何應(yīng)對是至關(guān)重要的。

整體來說，移動端的設(shè)計是更可控的，web端的設(shè)計難度實際更高，上限也更高。但是想要做好web端的設(shè)計并不難，只要明白web端設(shè)計時需要考慮的因素和解決辦法，那么所有問題自然迎刃而解。

一、文本

1. 大小

總體上，移動端和web端的字體規(guī)范是一致的，同一套字體大小都可以在雙端有好的識別和視覺效果。唯一細(xì)微的區(qū)別是瀏覽器支持的最小字體大小是12，所以在web端要摒棄12以下的字號。實際上這并不會增加你的web端設(shè)計難度，因為web端的設(shè)計空間是足夠的。

2.長度

設(shè)計中往往需要考慮文案長度的問題，移動端受到屏幕空間的限制往往更容易遇到問題，你需要考慮當(dāng)前文本段是否能在你所預(yù)留的空間放得下，對此可以參考以下幾種解決辦法：

高度自適應(yīng)：也就是換行顯示，大部分的文本段不可能無限換行，也應(yīng)該有字?jǐn)?shù)限制，所以選擇這一個解決辦法，正常也需要設(shè)定一個高度極限值。
超出省略：當(dāng)文本段的完整性不是那么重要，且需要漏出，那么這是一個不錯的方法
字號自適應(yīng)縮小：這正常用在金融類產(chǎn)品的數(shù)字顯示中，比如余額等，當(dāng)小數(shù)點(diǎn)過多或者金額過大導(dǎo)致的數(shù)字文本端過長時，數(shù)字是無法換行或省略的，所以你可以選擇字號自適應(yīng)縮小。

二、屏幕大小

移動端和web端最直觀的差異就是屏幕大小的差異，移動端小，且各設(shè)備的差異化細(xì)微，web端的空間大，且不同設(shè)備的屏幕差異大，所以就有了幾點(diǎn)主要差異：

1. 布局

移動端整體上是自上而下的設(shè)計布局，寬度受限比較嚴(yán)重，所以除了一些左滑手勢帶來的橫向空間拓展，布局的變化上不大。

web端因為空間大，所以就有了更多的布局可能性，例如左右布局，居中布局，左中右布局，或是全屏自適應(yīng)布局。這些布局方式也各有各的優(yōu)缺點(diǎn)。

所以設(shè)計一個網(wǎng)站時，往往需要多個布局配合使用，能讓你的網(wǎng)站視覺感受更舒適，利用率上更合理。切忌為了美觀或者方便等原因死磕一個布局方式。當(dāng)然，居中布局是最萬能的一個布局，如果你暫時沒辦法掌控多個布局，那么居中布局是你最佳的選擇。

2. 適配

前文說了，因為web端的設(shè)備差異大，所以你需要在設(shè)計時考慮小屏筆記本和大屏顯示器的適配問題，甚至是用戶手動拉動瀏覽器寬度時所得到的適配反饋也需要考慮其中。

適配不是必須的，因為適配的成本較高，復(fù)雜的頁面往往需要設(shè)計出多個斷點(diǎn)頁面去讓開發(fā)根據(jù)頁面寬度重新適配內(nèi)容。所以大部分的居中布局的網(wǎng)站，是不做適配的，因為你只需要控制你的內(nèi)容寬度能在13寸筆記本完整展示，其他的就是極小部分用戶的需求了。

web端到移動端的適配往往需要重構(gòu)，也就是把當(dāng)前網(wǎng)站的內(nèi)容，重新在手機(jī)寬度下做設(shè)計，結(jié)合上文文本部分的內(nèi)容，請不要想當(dāng)然的把字號縮小。只需要考慮排版和功能是否需要刪減的問題。

3. 彈窗

移動端受到屏幕限制，彈窗的更多是banner的彈出，提示的作用，或者是個別簡單篩選操作，在移動端很難在彈窗上放置很多的輸入等復(fù)雜操作

在web端的設(shè)計中，一定要巧用彈窗，簡單的編輯或著創(chuàng)建等操作都可以用彈窗代替，不僅可以使操作更聚焦，也可以減少頁面跳轉(zhuǎn)來縮短路徑。

三、交互手勢

由于操作媒介的不同，導(dǎo)致移動端和web的操作手勢有很大的區(qū)別，移動端是用手指操作，web端是鼠標(biāo)操作，手指操作決定了手勢的多樣性，鼠標(biāo)的操作決定了點(diǎn)擊的精確，并且由于鼠標(biāo)的操作反饋是分階段的，需要在每個階段都給予用戶相應(yīng)的反饋來打造更好的用戶體驗。

1. 狀態(tài)

移動端中對于操作的反饋主要聚焦于手指點(diǎn)擊后的反饋，懸停態(tài)往往被長按代替。而web端鼠標(biāo)操作存在三個狀態(tài)，一個是正常狀態(tài)，一個是懸停狀態(tài)，一個是按下狀態(tài)，這三個狀態(tài)需要在設(shè)計師考慮并設(shè)計來向開發(fā)說明。web端中不同元素的常見狀態(tài)（主要為懸停態(tài)）區(qū)分方式需要明白：

button：用顏色區(qū)分，常見的方式是改變顏色的明度，懸停增加明度，按下降低明度
icon：icon的狀態(tài)區(qū)分更多是在懸停狀態(tài)上，常見方式有：改變顏色；改變icon形態(tài)（如線性變面性）；為icon添加背景色塊（如圓形灰色背景）。
文字：文字的狀態(tài)區(qū)分除了顏色之外，可以利用文字自帶的屬性，如字重，字體大小，甚至可以在個別海外產(chǎn)品中看到通過改變字間距來表示懸停狀態(tài)。
卡片：卡片的懸停設(shè)計更加的多樣，如改變填充色；改變描邊顏色；增加投影，比較有趣的有改變卡片大??；輕微改變卡片透視；改變卡片的位置，如懸停時卡片向上輕微移動。

由于web端獨(dú)有的懸停手勢，你可以在懸停這個手勢大作文章，如果你了解linear風(fēng)格的話，或者經(jīng)常瀏覽國外產(chǎn)品的話，許多網(wǎng)站會在鼠標(biāo)懸?？ㄆ瑫r產(chǎn)生動效，動效不限于卡片元素（插畫、圖標(biāo)、可視化表格等）的動畫；光影描邊的循環(huán)。懸停按鈕時，箭頭的位置變動，或者其他動畫效果。更酷炫的還有鼠標(biāo)與卡片透視的交互，甚至與鼠標(biāo)與全局頁面的交互，如水波紋等。

2. 操作按鈕

整體來說，web端基于屏幕大小的優(yōu)勢和狀態(tài)的多樣，在操作按鈕漏出數(shù)量和方式上會更加的多樣。

移動端獨(dú)有的是長按手勢和左滑右滑手勢，所以移動端會把一些操作放到左滑手勢中，最常見的如消息列表的置頂、刪除等。長按手勢更多的是彈出更多操作，或是產(chǎn)生可拖動效果。

web端拿列表舉例，基于屏幕的大小的優(yōu)勢，可以將更多操作直接在列表右側(cè)直接漏出，用戶的操作路徑更短，觸達(dá)率自然就更高。拿卡片舉例，button的存在有的時候會影響到卡片的大小和美觀，所以有些操作往往可以藏到懸停狀態(tài)里，懸停操作不需要學(xué)習(xí)，所以用戶不會為此感到疑惑，也可以保證功能的完整性。

四、設(shè)計思路

關(guān)于各個模塊如何設(shè)計并不在這里展開，我想表達(dá)是在設(shè)計稿設(shè)計時的一些操作思路，或者說是組件的搭建思路。

1. 盒子思維

如果你對前端開發(fā)有一定的了解，那么你一定懂得盒子套盒子。設(shè)計也是如此，需要給你的每個設(shè)計模塊建議一塊獨(dú)有的盒子。這是區(qū)別于間距或分割線的區(qū)分模塊的思路的。

舉個例子，你有圖片，主標(biāo)題，副標(biāo)題三個元素形成一個小模塊，那么你在確定好排版之后，你需要一個盒子將他們裝起來，那么這個模塊必須有它自己的寬度，高度。換個角度理解也就是它需要有一定的上下左右間距，在figma中，這個盒子就是你的frame，高級一點(diǎn)就是你的自動布局。這個盒子的大小就決定了這個模塊的操作熱區(qū)，這也方便你在設(shè)計做出你的懸停效果。

這個設(shè)計思維適用于web端和移動端，且十分重要，所以盡量避免在設(shè)計圖出現(xiàn)各個元素分別散落的情況，這不僅不利于你的設(shè)計稿管理，也不利于開發(fā)的查看。

2. 新手如何參考

在進(jìn)行web端設(shè)計時，如果你對web端設(shè)計一無所知，也無需驚慌。你可以找到合適的參考網(wǎng)站，并且分析它每個模塊的高度，間距等，去模仿他，并且從中得出規(guī)律。

拿web端的導(dǎo)航欄舉例，假設(shè)你糾結(jié)于web端的導(dǎo)航欄高度設(shè)置多少，你可以找到參考的網(wǎng)站，使用檢查功能（F12）去查看高度，或粗暴的截圖查看高度即可。當(dāng)然，在此之前，你需要確定這個模塊的高度是不會隨屏幕大小改變而改變的。

3. 自適應(yīng)布局

無論是web端設(shè)計還是移動端設(shè)計，當(dāng)你在設(shè)計模塊或搭建組件時，善用自動布局，這不僅有利于你設(shè)計圖高效率修改，也能應(yīng)對你的web端可能出現(xiàn)的適配情況。這需要考驗?zāi)愕膄igma能力，如果大家有興趣，后續(xù)我可以出一些figma基礎(chǔ)、組件、自動布局等相關(guān)教程同大家探討。

作者：PONEPENG
來源：站酷

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

評論(0) 瀏覽(1106)

052024-1

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

博博

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

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

輔助駕駛型

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

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

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

自主決策型

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

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

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

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

在產(chǎn)品推出之前，清晰地定義產(chǎn)品的能力和限制。不要過度夸大產(chǎn)品的功能或過度承諾，而是誠實地描述產(chǎn)品的真實能力。給予用戶在使用產(chǎn)品前充足的心理預(yù)期，用戶可以清晰的了解產(chǎn)品的能力范圍。更好地管控用戶心理預(yù)期的同時，也可以向用戶傳遞產(chǎn)品的能力點(diǎn)。

如小庫科技詳細(xì)描述了產(chǎn)品可以應(yīng)用的功能場景，用戶對于場景化的詞語可以有更好的關(guān)聯(lián)聯(lián)想，對于產(chǎn)品的能力也有更好的邊界認(rèn)知。

科大訊飛也通過具體的場景化進(jìn)行產(chǎn)品功能的傳遞

在Liblib的模型廣場中，會將用戶生產(chǎn)的結(jié)果、模型以社區(qū)成果的形式進(jìn)行展示，用戶可以查看詳細(xì)的生成參數(shù)進(jìn)行嘗試，對于新手用戶也可以起到很好的內(nèi)容引導(dǎo)。

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

人工智能決策的透明度對用戶至關(guān)重要，使用可視化工具、交互或解釋性語言讓用戶能夠理解AI是如何做出決策。如小庫AI，在“描述詞”的提示文案中告知用戶輸入詞的限定以及預(yù)期的生成結(jié)果，并可以通過詞庫告知用戶可以輸入哪些類型的詞。

如酷家樂AI，用戶在首次使用AI工具，沒有靈感或想法的時候，引導(dǎo)并提示用戶可上傳的素材類型，讓用戶可以有更好的目標(biāo)預(yù)期。

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

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

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

在AI盛行的當(dāng)下，數(shù)據(jù)隱私安全可以說是非常敏感的話題了，AI泄漏數(shù)據(jù)隱私的事件也在不斷曝光。妙鴨相機(jī)的爆紅事件給我們的警示是在產(chǎn)品設(shè)計的過程中，除了思考如何利用新技術(shù)產(chǎn)出新的創(chuàng)意，對用戶數(shù)據(jù)隱私安全的保護(hù)同樣重要，它是產(chǎn)品獲得用戶信任，得以被持續(xù)使用的原因之一。

數(shù)據(jù)隱私安全涵蓋的范圍是非常廣泛的。從產(chǎn)品設(shè)計的角度來看對于數(shù)據(jù)隱私安全的保護(hù)可以從以下幾點(diǎn)考慮：

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

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

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

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

3、本地存儲也是一種選擇

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

三、結(jié)語

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

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

評論(0) 瀏覽(994)

« 1 ... 6 7 8 9 10 11 12 ... 44 »

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://m.sdgs6788.com

首頁

什么是峰終定律

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

需要我們記住

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

強(qiáng)化峰值

降低負(fù)面峰值

我是這么做的

最后一定是終值

總結(jié)

分類

日歷

鏈接

個人資料

存檔