首頁(yè)

232025-4

尼爾森十大設(shè)計(jì)原則

在產(chǎn)品設(shè)計(jì)領(lǐng)域中，尼爾森設(shè)計(jì)原則可以說(shuō)是非常基礎(chǔ)和必備的底層邏輯了。這篇文章，作者重新梳理了10大設(shè)計(jì)原則，并加以案例講解，希望可以幫到大家。

尼爾森十大設(shè)計(jì)原則是由著名的用戶體驗(yàn)專家、網(wǎng)站設(shè)計(jì)師雅各布·尼爾森（Jakob Nielsen）提出的。這些原則旨在幫助設(shè)計(jì)師創(chuàng)建更具用戶友好性和易用性的數(shù)字產(chǎn)品和網(wǎng)站。

這些原則的來(lái)源可以追溯到尼爾森在其著作《使用者體驗(yàn)的十大原則》（”10 Usability Heuristics for User Interface Design”）中提出的。

一、可見(jiàn)性原則

1. 信息的可見(jiàn)性

用戶在界面上應(yīng)該能輕易地看到他們需要的信息。如果信息不直接展示給用戶，那么應(yīng)通過(guò)明顯的提示來(lái)指引用戶如何獲取。

例如：如果一個(gè)功能可以通過(guò)菜單訪問(wèn)，那么這個(gè)菜單的標(biāo)識(shí)和位置應(yīng)當(dāng)清晰明確。

2. 反饋的可見(jiàn)性

當(dāng)用戶與界面進(jìn)行交互時(shí)，系統(tǒng)應(yīng)該提供及時(shí)的、可見(jiàn)的反饋。

例如：當(dāng)用戶點(diǎn)擊一個(gè)按鈕時(shí)，按鈕可以顯示不同的視覺(jué)效果（如顏色變化、陷入效果等）來(lái)告知用戶其操作已被系統(tǒng)識(shí)別。

3. 操作的可見(jiàn)性

用戶可用的操作選項(xiàng)應(yīng)該清晰展示。界面應(yīng)避免隱藏用戶可能需要的功能。操作的可見(jiàn)性可以通過(guò)良好的界面布局和適當(dāng)?shù)目丶x擇來(lái)加以增強(qiáng)。

例如：當(dāng)斷網(wǎng)時(shí)，下拉刷新用戶會(huì)看的一個(gè)情感化加載動(dòng)畫(huà)，提示用戶在加載中。

4. 狀態(tài)的可見(jiàn)性

系統(tǒng)的當(dāng)前狀態(tài)應(yīng)該對(duì)用戶是明顯的。

例如：在一個(gè)復(fù)雜的表單或多步驟流程中，界面應(yīng)該清楚地顯示當(dāng)前處于哪一步。這樣用戶可以隨時(shí)了解自己的進(jìn)度和狀態(tài)，降低因迷茫而產(chǎn)生的用戶挫敗感。

5. 錯(cuò)誤的可見(jiàn)性

如果發(fā)生錯(cuò)誤，應(yīng)該有清楚的錯(cuò)誤信息顯示給用戶，并且提供簡(jiǎn)單的、操作性的建議來(lái)解決這些錯(cuò)誤。錯(cuò)誤信息應(yīng)該具體到足夠用戶理解發(fā)生了什么問(wèn)題，并指導(dǎo)他們?nèi)绾渭m正。

例如：我們?cè)谳斎朊艽a的界面時(shí)，出現(xiàn)錯(cuò)誤時(shí)會(huì)在下方提示當(dāng)前密碼輸入錯(cuò)誤，提示引導(dǎo)用戶請(qǐng)輸入數(shù)字+符號(hào)的組合密碼。

可見(jiàn)性原則在生活中有哪些體現(xiàn)呢？

例如：我們常坐的地鐵到站顯示，乘坐高鐵時(shí)的候車(chē)室列表，還有去超市買(mǎi)菜時(shí)自動(dòng)結(jié)算上顯示的數(shù)量金額、計(jì)算器等。

二、貼近現(xiàn)實(shí)場(chǎng)景原則

1. 模仿真實(shí)物體和行為

模仿用戶在現(xiàn)實(shí)生活中熟悉的物體和行為，這樣可以使用戶能夠輕松地理解和使用軟件。

例如：將按鈕設(shè)計(jì)成與現(xiàn)實(shí)中的按鈕相似的樣式，讓用戶有按下按鈕的直觀感受。

2. 遵循行業(yè)標(biāo)準(zhǔn)和習(xí)慣

界面設(shè)計(jì)應(yīng)該符合行業(yè)內(nèi)人機(jī)交互和設(shè)計(jì)規(guī)范的標(biāo)準(zhǔn)符合用戶的習(xí)慣，以減少用戶的認(rèn)知負(fù)擔(dān)和學(xué)習(xí)成本。

例如：將網(wǎng)頁(yè)的導(dǎo)航菜單放置在頁(yè)面的頂部或側(cè)邊，符合用戶對(duì)網(wǎng)頁(yè)導(dǎo)航的常規(guī)期待。

3. 保持一致性

在整個(gè)界面中保持一致性，使得用戶在不同部分之間能夠輕松地轉(zhuǎn)換和理解。這包括一致的布局、一致的交互方式等。一致性可以提高用戶的操作效率，減少錯(cuò)誤和混淆。

例如：設(shè)計(jì)中的UI規(guī)范，交互樣式保持一致性，書(shū)籍畫(huà)冊(cè)等里面的標(biāo)題內(nèi)容字體大小也遵循一致性原則。

4. 提供直觀的反饋

當(dāng)用戶與界面進(jìn)行交互時(shí)，界面應(yīng)該提供及時(shí)、直觀的反饋，讓用戶清楚地知道他們的操作已被識(shí)別和響應(yīng)。

例如：按鈕被按下時(shí)產(chǎn)生的視覺(jué)反饋、鏈接被點(diǎn)擊時(shí)的狀態(tài)變化等。

5. 避免違背用戶期望

界面設(shè)計(jì)應(yīng)避免違背用戶的期望和常規(guī)操作，否則可能導(dǎo)致用戶的困惑和挫敗感。

例如：點(diǎn)擊一個(gè)圖標(biāo)卻得到了與期望不符的結(jié)果，這會(huì)讓用戶感到困惑和不滿。

6. 考慮用戶的認(rèn)知能力和心理模型

設(shè)計(jì)應(yīng)該考慮用戶的認(rèn)知能力和心理模型，（需要根據(jù)用戶畫(huà)像，數(shù)據(jù)統(tǒng)計(jì)等定義用戶群體，年齡端的不同認(rèn)知也是不同的），使得界面的布局和功能對(duì)用戶來(lái)說(shuō)更加自然和易于理解。

例如：將相關(guān)的功能組織在一起，符合用戶的認(rèn)知結(jié)構(gòu)。

例如：最簡(jiǎn)單案例體現(xiàn)，可以從圖標(biāo)的演變過(guò)程就可以感受到，從真實(shí)生活中的電話演變成圖標(biāo)，一直到現(xiàn)在的扁平化顯示的電話圖標(biāo)。

貼近現(xiàn)實(shí)場(chǎng)景在生活中有哪些體現(xiàn)呢？

例如：我們生活中的汽車(chē)發(fā)展過(guò)程，從蒸汽汽車(chē)，到油車(chē)再到現(xiàn)在的新能源汽車(chē)，一直在變的是外觀和里面的內(nèi)飾，不變的是在大家受環(huán)境影響認(rèn)知里的東西，四個(gè)輪子大家很容易就想到車(chē)。

三、用戶控制和自由原則

1. 提供明確的操作選項(xiàng)

界面應(yīng)該提供清晰明確的操作選項(xiàng)，讓用戶知道可以做什么以及如何做。

例如：在編輯界面中，應(yīng)該明確標(biāo)識(shí)出保存、撤銷、刪除等操作按鈕，讓用戶知道可以進(jìn)行哪些操作。

2. 允許用戶撤銷和返回

用戶應(yīng)該可以隨時(shí)撤銷之前的操作或返回到之前的狀態(tài)，而不會(huì)造成不可逆的影響。

例如：提供撤銷按鈕、返回按鈕或者多級(jí)回退功能，讓用戶可以自由地調(diào)整和修正他們的操作。

3. 避免強(qiáng)制性的操作和模式

界面設(shè)計(jì)應(yīng)避免強(qiáng)制用戶進(jìn)行某些操作或者遵循固定的模式。應(yīng)該給用戶足夠的自由度，讓他們根據(jù)自己的需求和偏好來(lái)進(jìn)行操作。

例如：不要強(qiáng)制用戶在注冊(cè)時(shí)填寫(xiě)過(guò)多的信息，而是提供必填和選填項(xiàng)，讓用戶可以根據(jù)自己的情況選擇填寫(xiě)。

4. 提供明確的退出選項(xiàng)

在界面中應(yīng)該提供明確的退出選項(xiàng)，讓用戶可以隨時(shí)退出當(dāng)前操作或者返回到上一層級(jí)。

例如：在應(yīng)用程序中提供退出按鈕或者返回到主界面的選項(xiàng)，讓用戶可以方便地退出當(dāng)前任務(wù)或者返回到初始狀態(tài)。

5. 防止誤操作的發(fā)生

界面設(shè)計(jì)應(yīng)該采取措施防止用戶因?yàn)檎`操作而造成不必要的損失或者困擾。

例如：在危險(xiǎn)操作（如刪除文件）前要求用戶確認(rèn)，以避免誤操作造成的后果。

6. 支持鍵盤(pán)快捷鍵和手勢(shì)操作

為用戶提供鍵盤(pán)快捷鍵和手勢(shì)操作的支持，讓他們可以通過(guò)更快速和高效的方式來(lái)完成操作。這可以提高用戶的操作效率和滿意度，增強(qiáng)用戶的控制感和自由度。

用戶控制和自由原則在生活中有哪些體現(xiàn)呢？

例如：我們經(jīng)常出去吃飯，有些飯店可能比較火需要進(jìn)行預(yù)約，預(yù)約后不想去了可以在軟件上取消也可以打電話取消。我們進(jìn)行購(gòu)物時(shí)，收到了物品不想要也可以進(jìn)行退換貨。

四、一致性和標(biāo)準(zhǔn)化原則

1. 一致的布局和樣式

界面中的布局、排版和樣式應(yīng)該保持一致，讓用戶在不同頁(yè)面和功能之間能夠輕松地切換和理解。例如：相似的功能應(yīng)該采用相似的排列方式和視覺(jué)風(fēng)格，按鈕、導(dǎo)航欄等元素的位置和樣式也應(yīng)該保持一致。

2. 一致的交互方式

界面中的交互方式和操作流程應(yīng)該保持一致，讓用戶能夠在不同的功能和場(chǎng)景中使用相似的操作方法。例如：點(diǎn)擊按鈕應(yīng)該在不同頁(yè)面中具有相同的效果，滑動(dòng)手勢(shì)在不同功能中也應(yīng)該具有相似的操作意義。

3. 遵循標(biāo)準(zhǔn)化設(shè)計(jì)規(guī)范

界面設(shè)計(jì)應(yīng)該遵循行業(yè)的標(biāo)準(zhǔn)化設(shè)計(jì)規(guī)范，符合用戶的習(xí)慣和期望，減少用戶的認(rèn)知負(fù)擔(dān)和學(xué)習(xí)成本。例如：網(wǎng)頁(yè)設(shè)計(jì)中遵循Web Content Accessibility Guidelines（WCAG）等國(guó)際標(biāo)準(zhǔn)，移動(dòng)應(yīng)用設(shè)計(jì)中遵循iOS Human Interface Guidelines或Material Design等平臺(tái)規(guī)范。

4. 統(tǒng)一的圖標(biāo)和符號(hào)

界面中使用的圖標(biāo)和符號(hào)應(yīng)該統(tǒng)一且易于理解，避免混淆和歧義。例如，使用相同的圖標(biāo)來(lái)表示相似的功能或操作，以便用戶能夠快速識(shí)別和理解。例如：手機(jī)主題界面的顯示，電話的圖標(biāo)會(huì)從生活中電話提取圖形標(biāo)識(shí)。

5. 保持一致的術(shù)語(yǔ)和語(yǔ)言

界面中使用的術(shù)語(yǔ)和語(yǔ)言應(yīng)該保持一致，避免混淆和困惑。

例如：在不同頁(yè)面和功能中使用相同的術(shù)語(yǔ)和表達(dá)方式，以便用戶能夠準(zhǔn)確地理解和識(shí)別。

6. 反饋一致性

界面中的反饋信息應(yīng)該保持一致，讓用戶能夠清晰地知道他們的操作已被識(shí)別和響應(yīng)。

例如：成功操作和錯(cuò)誤操作應(yīng)該有明確的視覺(jué)和語(yǔ)言反饋，以便用戶能夠及時(shí)調(diào)整和糾正。

一致性和標(biāo)準(zhǔn)化在生活中有哪些體現(xiàn)呢？

例如：我們經(jīng)常逛的超市或者菜市場(chǎng)都會(huì)遵循標(biāo)準(zhǔn)化，相同或相似的商品進(jìn)行歸類，看起來(lái)很整齊方便用戶購(gòu)買(mǎi)，馬路上的紅綠燈，全國(guó)保持一致性降低用戶認(rèn)知負(fù)擔(dān)。

五、容錯(cuò)原則

1. 提供明確的反饋和指導(dǎo)

當(dāng)用戶出現(xiàn)錯(cuò)誤或者不確定性時(shí)，界面應(yīng)該提供明確的反饋和指導(dǎo)，讓用戶知道出了什么問(wèn)題以及如何解決。

例如：當(dāng)用戶輸入錯(cuò)誤的密碼時(shí)，界面應(yīng)該明確提示用戶密碼錯(cuò)誤，并且提供重新輸入或者找回密碼的選項(xiàng)。

2. 允許撤銷和返回

用戶應(yīng)該可以隨時(shí)撤銷之前的操作或者返回到之前的狀態(tài)，從而糾正錯(cuò)誤或者重新開(kāi)始。

例如：在編輯界面中提供撤銷按鈕或者返回按鈕，讓用戶可以隨時(shí)取消之前的操作并且返回到之前的狀態(tài)。

3. 避免嚴(yán)格的輸入要求

界面設(shè)計(jì)應(yīng)該盡量避免嚴(yán)格的輸入要求，允許用戶輸入格式的靈活性和容錯(cuò)性。

例如：在表單輸入時(shí)，可以采用自動(dòng)補(bǔ)全、格式化等技術(shù)來(lái)輔助用戶輸入，減少用戶的輸入錯(cuò)誤。

4. 提供輔助和提示

當(dāng)用戶出現(xiàn)錯(cuò)誤或者不確定性時(shí)，界面應(yīng)該提供輔助和提示，幫助用戶找到正確的解決方案。例如：在輸入框中提供提示性的文字或者示例，指導(dǎo)用戶如何正確地輸入信息。

5. 減少不必要的強(qiáng)制性操作

界面設(shè)計(jì)應(yīng)該盡量減少不必要的強(qiáng)制性操作，避免因?yàn)橛脩舻牟僮魇д`而造成不可逆的影響。例如：在我們進(jìn)行轉(zhuǎn)賬操作時(shí)要求用戶對(duì)轉(zhuǎn)賬金額進(jìn)行確認(rèn)，以避免誤操作造成的損失。

6. 優(yōu)雅地處理異常情況

當(dāng)用戶遇到異常情況時(shí)，界面應(yīng)該能夠優(yōu)雅地處理并給予用戶友好的提示和解決方案。

例如：當(dāng)網(wǎng)絡(luò)連接出現(xiàn)問(wèn)題時(shí)，界面應(yīng)該顯示友好的錯(cuò)誤信息，并且提供重試或者刷新的選項(xiàng)。

容錯(cuò)原則在生活中有哪些體現(xiàn)呢？

例如：想要出去旅游到窗口購(gòu)票，發(fā)現(xiàn)買(mǎi)錯(cuò)了可以去窗口找工作人員改簽，或退票重新購(gòu)買(mǎi)，這時(shí)工作人員會(huì)二次確認(rèn)是否改簽，用戶回答確定，改簽成功。因?yàn)樘鞖庠蛟斐傻牧熊?chē)無(wú)法發(fā)車(chē)，會(huì)提示用戶進(jìn)行退票或改簽操作。

六、易取原則

1. 簡(jiǎn)化操作流程

界面設(shè)計(jì)應(yīng)該盡量簡(jiǎn)化操作流程，減少不必要的步驟和冗余的操作，讓用戶能夠更快速地完成任務(wù)。

例如：在購(gòu)物網(wǎng)站中，簡(jiǎn)化下單流程，減少用戶填寫(xiě)信息的步驟。

2. 提供直接的路徑

界面應(yīng)該提供直接的路徑讓用戶達(dá)到目標(biāo)，不需要經(jīng)過(guò)多次點(diǎn)擊或者瀏覽。

例如：在網(wǎng)頁(yè)中提供明顯的導(dǎo)航鏈接，讓用戶可以直接跳轉(zhuǎn)到所需的頁(yè)面。

3. 減少用戶輸入

盡量減少用戶需要輸入的信息和數(shù)據(jù)，采用自動(dòng)填充或者預(yù)設(shè)數(shù)值的方式來(lái)簡(jiǎn)化用戶操作。

例如：在搜索框中提供模糊搜索提示的功能，減少用戶輸入的工作量。

4. 提供明確的標(biāo)識(shí)和提示

界面上的按鈕、鏈接和標(biāo)識(shí)應(yīng)該清晰明確，讓用戶一眼就能看出其功能和作用。同時(shí)，界面應(yīng)該提供明確的提示和指導(dǎo)，引導(dǎo)用戶完成操作。

例如：在網(wǎng)頁(yè)中使用明顯的按鈕和圖標(biāo)來(lái)表示可點(diǎn)擊的功能，同時(shí)提供鼠標(biāo)懸停提示來(lái)解釋按鈕的作用。

5. 響應(yīng)迅速

界面的響應(yīng)速度應(yīng)該盡量快速，減少用戶等待的時(shí)間。

例如；當(dāng)用戶點(diǎn)擊按鈕或者鏈接時(shí)，界面應(yīng)該立即給出反饋，讓用戶知道其操作已被識(shí)別。

6. 符合用戶期望

界面設(shè)計(jì)應(yīng)符合用戶的期望和習(xí)慣，讓用戶能夠直觀地理解界面上的布局和功能。

例如：將相關(guān)的功能組織在一起，符合用戶的認(rèn)知結(jié)構(gòu)。

易取原則在生活中有哪些體現(xiàn)呢？

例如：現(xiàn)在一些大型超市購(gòu)物時(shí)提供自動(dòng)掃碼結(jié)算的機(jī)器，減少用戶的等待時(shí)間，響應(yīng)速度快，還有快捷刷臉支付（手機(jī)沒(méi)有帶也可以支付喲）用戶可以很直觀的進(jìn)行支付。

七、靈活高效原則

1.支持多種操作方式

界面設(shè)計(jì)應(yīng)該支持多種操作方式，讓用戶可以根據(jù)自己的習(xí)慣和偏好選擇最適合自己的方式進(jìn)行操作。

例如：提供鍵盤(pán)快捷鍵、手勢(shì)操作、語(yǔ)音控制等多種方式。

2. 自適應(yīng)和響應(yīng)式設(shè)計(jì)

界面設(shè)計(jì)應(yīng)該具有自適應(yīng)和響應(yīng)式的特性，能夠適應(yīng)不同設(shè)備和屏幕尺寸的顯示，并且在不同分辨率下保持良好的布局和可用性。這樣用戶可以在任何設(shè)備上以相似的方式進(jìn)行操作。

例如：我們常見(jiàn)的PC端網(wǎng)站會(huì)根據(jù)屏幕尺寸的不同響應(yīng)式布局（Behance、花瓣等網(wǎng)站）。

3. 提供個(gè)性化的設(shè)置和選項(xiàng)

界面應(yīng)該提供個(gè)性化的設(shè)置和選項(xiàng)，讓用戶可以根據(jù)自己的需求和偏好進(jìn)行定制。

例如，允許用戶自定義界面的布局、顏色主題、字體大小等。

4. 支持快速導(dǎo)航和查找

界面設(shè)計(jì)應(yīng)該支持快速導(dǎo)航和查找功能，讓用戶能夠迅速找到所需的信息和功能。

例如：提供搜索框和過(guò)濾選項(xiàng)，讓用戶可以快速定位到目標(biāo)內(nèi)容。

5. 減少不必要的點(diǎn)擊和步驟

界面設(shè)計(jì)應(yīng)盡量減少不必要的點(diǎn)擊和步驟，簡(jiǎn)化操作流程，提高用戶的操作效率。

例如：采用一鍵下單的方式，減少用戶提交訂單的步驟。

6. 提供即時(shí)反饋和狀態(tài)更新

界面設(shè)計(jì)應(yīng)該提供即時(shí)的反饋和狀態(tài)更新，讓用戶清楚地知道他們的操作已被識(shí)別和響應(yīng)。這樣可以提高用戶的操作效率和滿意度。

例如：當(dāng)用戶提交表單或者完成購(gòu)買(mǎi)時(shí)，界面應(yīng)該立即顯示成功的反饋信息。

靈活高效原則在生活中有哪些體現(xiàn)呢？

例如：火鍋在選擇上提供了多種口味的美食，一口鍋全都煮了，用戶也可以根據(jù)自己口味不同進(jìn)行調(diào)料，做的比較哇塞的火鍋店，還會(huì)貼上不同口味的搭配引導(dǎo)，對(duì)于第一次或不經(jīng)常吃火鍋店用戶就很友好，食物放進(jìn)火鍋里會(huì)通過(guò)食材的顏色或軟硬程度辨別是否熟了，給到用戶反饋可以吃咯。

八、簡(jiǎn)潔性原則

1. 去除冗余信息

界面設(shè)計(jì)應(yīng)該去除不必要的冗余信息，只保留核心和重要的內(nèi)容，以減少用戶的干擾和混亂。例如：去除重復(fù)的導(dǎo)航鏈接、無(wú)關(guān)的廣告等。

2. 簡(jiǎn)化布局和排版

界面的布局和排版應(yīng)該簡(jiǎn)潔明了，避免過(guò)多的裝飾和復(fù)雜的結(jié)構(gòu)，以提高用戶的閱讀和理解效率。

例如：采用簡(jiǎn)單的網(wǎng)格布局，保持頁(yè)面的整潔和清晰。

3. 提煉核心功能

界面設(shè)計(jì)應(yīng)該將核心功能突出顯示，讓用戶一目了然地找到所需的功能和信息。不必要的功能應(yīng)該隱藏或者移除，以減少用戶的選擇困難和認(rèn)知負(fù)擔(dān)。

例如：商品頁(yè)面，商品名稱、信息、價(jià)格、快捷加入購(gòu)物車(chē)、買(mǎi)幾份這種功能就放在了下一個(gè)頁(yè)面減少對(duì)用戶的干擾。

4. 簡(jiǎn)化操作流程

操作流程應(yīng)該簡(jiǎn)化至最少的步驟，避免不必要的點(diǎn)擊和跳轉(zhuǎn)，提高用戶的操作效率。

例如：采用一鍵式操作，減少用戶提交訂單的步驟。

5. 清晰明了的語(yǔ)言和標(biāo)識(shí)

界面中使用的語(yǔ)言和標(biāo)識(shí)應(yīng)該清晰明了，避免歧義和混淆。按鈕、鏈接等元素的標(biāo)識(shí)應(yīng)該直接表達(dá)其功能，讓用戶一目了然。

6. 精簡(jiǎn)視覺(jué)元素

視覺(jué)元素應(yīng)該精簡(jiǎn)，避免過(guò)多的裝飾和復(fù)雜的效果，以保持界面的干凈和清晰。顏色、字體、圖標(biāo)等元素的使用應(yīng)該簡(jiǎn)潔大方，突出重點(diǎn)。

7. 提供幫助和指導(dǎo)

界面設(shè)計(jì)應(yīng)該提供必要的幫助和指導(dǎo)，讓用戶能夠快速了解界面的使用方法和操作流程。但是這些幫助信息也應(yīng)該簡(jiǎn)潔明了，避免過(guò)多的文字和復(fù)雜的說(shuō)明。

簡(jiǎn)潔性原則在生活中有哪些體現(xiàn)呢？

例如：商場(chǎng)的逃生通道標(biāo)識(shí)，辦公室滅火器都會(huì)放在比較容易看到的地方，經(jīng)常坐地鐵的時(shí)候指引箭頭就很符合簡(jiǎn)潔性原則，不需要放過(guò)多的解釋說(shuō)明文案，大家都可以看懂具備什么含義。

九、幫助用戶識(shí)別和解決問(wèn)題原則

1. 提供清晰的幫助文檔和說(shuō)明

界面設(shè)計(jì)應(yīng)該提供清晰明了的幫助文檔和說(shuō)明，讓用戶能夠快速找到解決問(wèn)題的方法和答案。這些文檔和說(shuō)明應(yīng)該簡(jiǎn)潔明了，避免使用過(guò)多的專業(yè)術(shù)語(yǔ)和復(fù)雜的語(yǔ)言。

2. 實(shí)時(shí)反饋和指導(dǎo)

界面應(yīng)該提供實(shí)時(shí)的反饋和指導(dǎo)，讓用戶知道他們的操作是否成功，以及如何繼續(xù)下一步。例如，在表單輸入時(shí)實(shí)時(shí)檢查格式是否正確，并給予相應(yīng)的提示。

3. 提供可搜索的幫助資源

界面設(shè)計(jì)應(yīng)該提供可搜索的幫助資源，讓用戶能夠快速找到所需的信息和解決方案。這些幫助資源可以包括常見(jiàn)問(wèn)題解答、在線幫助文檔、視頻教程等。

4. 友好的錯(cuò)誤提示和解決方案

當(dāng)用戶遇到錯(cuò)誤或者問(wèn)題時(shí)，界面應(yīng)該給予友好的錯(cuò)誤提示和解決方案，讓用戶知道發(fā)生了什么問(wèn)題以及如何解決。錯(cuò)誤提示應(yīng)該具體明了，避免使用晦澀難懂的術(shù)語(yǔ)。

5. 提供在線支持和反饋渠道

界面設(shè)計(jì)應(yīng)該提供在線支持和反饋渠道，讓用戶能夠隨時(shí)聯(lián)系到客戶服務(wù)團(tuán)隊(duì)并獲得幫助。這些支持和反饋渠道可以包括在線聊天、電子郵件支持、社區(qū)論壇等。

6. 優(yōu)化用戶體驗(yàn)和流程設(shè)計(jì)

界面設(shè)計(jì)應(yīng)該優(yōu)化用戶體驗(yàn)和流程設(shè)計(jì)，減少用戶可能遇到的問(wèn)題和困難。例如，簡(jiǎn)化操作流程、提供明確的導(dǎo)航和引導(dǎo)、避免技術(shù)性障礙等。

7. 持續(xù)改進(jìn)和優(yōu)化

界面設(shè)計(jì)團(tuán)隊(duì)?wèi)?yīng)該持續(xù)改進(jìn)和優(yōu)化界面，根據(jù)用戶的反饋和需求不斷調(diào)整和改進(jìn)設(shè)計(jì)方案，以提高用戶的滿意度和體驗(yàn)質(zhì)量。

幫助用戶識(shí)別和解決問(wèn)題原則在生活中有哪些體現(xiàn)呢？

例如：我們?cè)谟∷?shū)籍時(shí)，印刷廠會(huì)給我們講解紙張的尺寸，材質(zhì)，類型、價(jià)格等，幫助我們了解和選擇適合的印刷品。

十、人性化幫助原則

1. 溫馨的語(yǔ)言和表達(dá)

界面設(shè)計(jì)應(yīng)該使用溫馨、友好和人性化的語(yǔ)言和表達(dá)方式，讓用戶感到被關(guān)心和被尊重。

例如：在錯(cuò)誤提示和幫助文檔中使用親切的語(yǔ)氣和表達(dá)方式。

2. 關(guān)注用戶情感和需求

界面設(shè)計(jì)應(yīng)該關(guān)注用戶的情感和需求，根據(jù)用戶的心理和情感狀態(tài)來(lái)設(shè)計(jì)界面和提供幫助。

例如：在用戶遇到困難或者錯(cuò)誤時(shí)，表達(dá)理解和支持，提供鼓勵(lì)和安慰。

3. 個(gè)性化的幫助和支持

界面設(shè)計(jì)應(yīng)該提供個(gè)性化的幫助和支持，根據(jù)用戶的偏好和習(xí)慣來(lái)提供定制化的解決方案。

例如：根據(jù)用戶的歷史操作記錄和偏好，推薦相關(guān)的幫助文檔或者解決方案。

4. 及時(shí)的反饋和回應(yīng)

界面應(yīng)該及時(shí)地回應(yīng)用戶的需求和問(wèn)題，給予及時(shí)的反饋和解決方案。

例如：提供實(shí)時(shí)的在線支持和反饋渠道，讓用戶能夠隨時(shí)聯(lián)系到客戶服務(wù)團(tuán)隊(duì)。

5. 鼓勵(lì)和獎(jiǎng)勵(lì)用戶行為

界面設(shè)計(jì)應(yīng)該鼓勵(lì)和獎(jiǎng)勵(lì)用戶的積極行為，增強(qiáng)用戶的參與和忠誠(chéng)度。

例如：通過(guò)積分系統(tǒng)或者優(yōu)惠活動(dòng)來(lái)獎(jiǎng)勵(lì)用戶的購(gòu)買(mǎi)行為和參與度。

6. 提供愉快的體驗(yàn)

界面設(shè)計(jì)應(yīng)該提供愉快和愉悅的使用體驗(yàn)，讓用戶感到舒適和愉快。

例如：通過(guò)動(dòng)畫(huà)、音效等方式增強(qiáng)界面的趣味性和互動(dòng)性，讓用戶感到愉悅和享受。

7. 尊重用戶隱私和權(quán)利

界面設(shè)計(jì)應(yīng)該尊重用戶的隱私和權(quán)利，保護(hù)用戶的個(gè)人信息和數(shù)據(jù)安全。

例如：明確告知用戶數(shù)據(jù)的使用目的和范圍，遵守相關(guān)的隱私政策和法律法規(guī)。

人性化幫助原則在生活中有哪些體現(xiàn)呢？

例如：人行道上的盲道，看新聞時(shí)的手語(yǔ)講解介紹，都是比較人性化的一部分，還有賣(mài)的老年機(jī)等等。

總結(jié)一下

關(guān)于尼爾森十大設(shè)計(jì)原則包括可見(jiàn)性、反饋、控制性、一致性、容錯(cuò)、簡(jiǎn)潔性、靈活高效、幫助用戶識(shí)別和解決問(wèn)題、人性化幫助、用戶控制和自由。

以下為此原則優(yōu)點(diǎn)詳解：

1.提高用戶體驗(yàn)質(zhì)量：這些原則旨在提高用戶對(duì)產(chǎn)品的整體感受和滿意度，使用戶更愿意使用并持續(xù)與產(chǎn)品互動(dòng)。

2.降低學(xué)習(xí)成本：設(shè)計(jì)原則的一致性和可見(jiàn)性幫助用戶更快地熟悉界面，減少了學(xué)習(xí)新功能的時(shí)間和認(rèn)知負(fù)擔(dān)。

3.增強(qiáng)用戶參與度：提供了用戶控制和自由的原則，使用戶感到更加投入和自主，從而增強(qiáng)了其對(duì)產(chǎn)品的參與度。

4.提升用戶效率：設(shè)計(jì)原則的靈活高效性使用戶能夠更快速地完成任務(wù)，提高了用戶的工作效率和操作效率。

5.減少用戶錯(cuò)誤：容錯(cuò)性原則和幫助用戶識(shí)別和解決問(wèn)題的原則有助于減少用戶的錯(cuò)誤操作，提高了用戶的成功率。

6.簡(jiǎn)化用戶交互：一致性、簡(jiǎn)潔性和靈活高效性設(shè)計(jì)原則簡(jiǎn)化了用戶與產(chǎn)品之間的交互，使用戶界面更加直觀和易于理解。

7.增強(qiáng)產(chǎn)品的競(jìng)爭(zhēng)力：設(shè)計(jì)原則的綜合應(yīng)用使得產(chǎn)品更具有吸引力和競(jìng)爭(zhēng)力，有助于產(chǎn)品在市場(chǎng)中脫穎而出。

8.提高用戶忠誠(chéng)度：人性化幫助和用戶控制和自由原則增強(qiáng)了用戶對(duì)產(chǎn)品的信任和忠誠(chéng)度，使用戶更愿意選擇并長(zhǎng)期使用產(chǎn)品。

9.節(jié)約資源成本：通過(guò)降低用戶錯(cuò)誤和提高用戶效率，可以減少用戶的時(shí)間和精力成本，從而節(jié)約了資源成本。

10.適應(yīng)不同用戶群體：這些設(shè)計(jì)原則的靈活性和人性化幫助原則使得產(chǎn)品能夠適應(yīng)不同用戶群體的需求和偏好，從而擴(kuò)大了產(chǎn)品的受眾范圍。

參考文獻(xiàn)：

https://www.nngroup.com/articles/ten-usability-heuristics/

https://medium.com/@nirbenita/the-10-design-heuristics-for-developers-1e70a9dc58a7

https://medium.com/@marialauraramirez/a-summary-of-nielsens-ux-principles-f482f32678f9

https://alonzowebster.medium.com/principles-of-ux-design-f7d5b193e19e

https://medium.com/@fireartstudio/common-ui-design-principles-d9889377f90b

https://medium.com/visual-side/10-usability-heuristics-for-user-interface-design-551dac8744e

專欄作家

南設(shè)，公眾號(hào)：南設(shè)（ID：NANSHE18），人人都是產(chǎn)品經(jīng)理專欄作家。專注設(shè)計(jì)，邏輯性強(qiáng)，注重體驗(yàn)。分享體驗(yàn)設(shè)計(jì)、人工智能開(kāi)發(fā)等。

原文鏈接：https://www.woshipm.com/share/6064709.html

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.zhengchang8.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。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

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

142025-4

自適應(yīng)設(shè)計(jì)在內(nèi)容上的應(yīng)用探索

清陽(yáng)

編輯導(dǎo)語(yǔ)：自適應(yīng)設(shè)計(jì)指能使界面自適應(yīng)顯示在不同大小終端設(shè)備上的設(shè)計(jì)方式及技術(shù)。而內(nèi)容自適應(yīng)則需要對(duì)用戶行為進(jìn)行預(yù)判進(jìn)而改變?cè)O(shè)計(jì)內(nèi)容，本文作者將對(duì)自適應(yīng)設(shè)計(jì)在內(nèi)容上的應(yīng)用進(jìn)行分享，值得閱讀學(xué)習(xí)。

我們一般說(shuō)的自適應(yīng)設(shè)計(jì)，多半指的是界面自適應(yīng)，即為不同的終端設(shè)計(jì)不同的界面布局與操作流程。而內(nèi)容自適應(yīng)，是一種根據(jù)用戶標(biāo)簽與操作行為預(yù)判用戶目標(biāo)所需頁(yè)面內(nèi)容的方式，他的優(yōu)點(diǎn)是既能預(yù)測(cè)交互意圖，實(shí)現(xiàn)信息量的智能輸出，同時(shí)也能滿足不同交互需求，改變界面樣式，達(dá)到降低人機(jī)交互負(fù)荷的目的。

以下，是道樂(lè)UED團(tuán)隊(duì) 基于查閱的資料以及行業(yè)的積累，帶來(lái)的一篇關(guān)于內(nèi)容自適應(yīng)的分享。

目錄：

內(nèi)容自適應(yīng)的界定
適用場(chǎng)景及案例分析
利弊分析
內(nèi)容自適應(yīng)設(shè)計(jì)在金融產(chǎn)品上的應(yīng)用思考

一、內(nèi)容自適應(yīng)的界定

目前自適應(yīng)界面在內(nèi)容上的呈現(xiàn)大致包括兩種類型：

1. 實(shí)時(shí)自適應(yīng)

顧名思義，就是根據(jù)用戶當(dāng)下的操作，實(shí)時(shí)判斷用戶所需，從而調(diào)整不同的信息展示與布局，他的優(yōu)勢(shì)在于能盡量減少頁(yè)面上與用戶目標(biāo)不相關(guān)信息的展示，從而提升用戶操作的效率與準(zhǔn)確度

2. 歷史自適應(yīng)

通過(guò)用戶標(biāo)簽與過(guò)往數(shù)據(jù)的分析，調(diào)整頁(yè)面內(nèi)容的展示數(shù)量與優(yōu)先級(jí)，僅展示用戶感興趣或可能感興趣的內(nèi)容，從而提高用戶在使用產(chǎn)品中的轉(zhuǎn)化率。

總的來(lái)說(shuō)，內(nèi)容自適應(yīng)更趨向于對(duì)用戶行為軌跡的縱向思考，將“用戶尋找信息”的被動(dòng)服務(wù)模式轉(zhuǎn)化為“信息尋找用戶”主動(dòng)服務(wù)模式。滿足差異化的用戶需求，提升企業(yè)系統(tǒng)的用戶體驗(yàn)和人性化服務(wù)水平。

二、適用場(chǎng)景及案例分析

1. 實(shí)時(shí)自適應(yīng)

（1）搜索

① Google搜索

自適應(yīng)設(shè)計(jì)在搜索上的應(yīng)用意味著針對(duì)每個(gè)用戶的每一次搜索，都會(huì)產(chǎn)生一個(gè)定制的界面，該界面將自身塑造成所顯示的信息。請(qǐng)看以下示例：如何根據(jù)不同的用例更改搜索結(jié)果頁(yè)面。

最近，Google搜索的設(shè)計(jì)重點(diǎn)是在用戶點(diǎn)擊搜索結(jié)果之前傳遞信息。為此，Google采用了一種稱為自適應(yīng)設(shè)計(jì)的方法。

Google搜索適應(yīng)用戶需求的第一種方法是重新安排導(dǎo)航以適應(yīng)結(jié)果。

在“lizzo”的例子中，搜索框下面的導(dǎo)航是：（按順序依次為）圖片、視頻、新聞、購(gòu)物、更多；
在“tel aviv”的例子中，導(dǎo)航是：新聞、圖片、地圖、視頻、更多；
搜索“aapl”（蘋(píng)果公司的股票代碼），導(dǎo)航顯示：金融、新聞、書(shū)籍、購(gòu)物、更多；

Google有362,880種獨(dú)特的方式來(lái)排列導(dǎo)航，以適應(yīng)搜索查詢。然而，自適應(yīng)設(shè)計(jì)的最大例子是搜索結(jié)果本身的布局。結(jié)果頁(yè)面是完全模塊化的：根據(jù)搜索結(jié)果，不同的元素出現(xiàn)在不同的配置中。

例如，音樂(lè)家Lizzo的搜索結(jié)果集中在媒體上：一組模塊以本機(jī)格式顯示視頻，圖片和歌曲。還顯示最近的新聞，推文和即將舉行的活動(dòng)，以及指向Lizzo在YouTube、Twitter、Facebook、Instagram和SoundCloud上的個(gè)人資料鏈接。直到頁(yè)面底部，我們才能看到看起來(lái)像傳統(tǒng)搜索結(jié)果的元素。

另一方面，以色列特拉維夫市的搜索結(jié)果為旅行者提供優(yōu)先信息。圖片、地圖、當(dāng)?shù)靥鞖庖约芭c旅行有關(guān)的問(wèn)題（“特拉維夫?qū)τ慰桶踩珕幔?rdquo;、“特拉維夫以什么聞名？”）優(yōu)先于傳統(tǒng)搜索結(jié)果。模塊促進(jìn)了特拉維夫的活動(dòng)以及對(duì)附近其他城市的推薦。搜索結(jié)果頁(yè)上可能會(huì)出現(xiàn)數(shù)千個(gè)不同的模塊，從簡(jiǎn)單的布局驅(qū)動(dòng)模塊到完全獨(dú)立的應(yīng)用程序。

例如，“aapl”的搜索結(jié)果頁(yè)上，股票代碼模塊顯示了當(dāng)前價(jià)格和交互式歷史價(jià)格圖。

通過(guò)自適應(yīng)設(shè)計(jì)，所有有關(guān)內(nèi)容、格式和順序的決策都是由算法決定的。設(shè)計(jì)人員的作用不再是創(chuàng)建明確的外部布局。

如今，尖端產(chǎn)品的設(shè)計(jì)者，以及未來(lái)日常產(chǎn)品的設(shè)計(jì)者，正在就生成這些布局的規(guī)則做出決策。

② 淘寶搜索

淘寶搜索結(jié)果頁(yè)，當(dāng)用戶往下滑動(dòng)查看更多時(shí)，系統(tǒng)判斷你根據(jù)當(dāng)前搜索頁(yè)沒(méi)有找到想要的內(nèi)容，則根據(jù)不同物品展示物品的更細(xì)分的篩選，如啤酒會(huì)c展示“德國(guó)進(jìn)口啤、國(guó)產(chǎn)精釀、比利時(shí)精釀”，方便用戶找到目標(biāo)物品。

③ OTA平臺(tái)PC端（去哪兒、攜程等）

攜程/去哪兒pc端中，Tab前置條件是國(guó)內(nèi)/國(guó)際，在選擇國(guó)內(nèi)機(jī)票時(shí)，默認(rèn)單程。在選擇“國(guó)際/港澳臺(tái)機(jī)票”時(shí)，則默認(rèn)機(jī)票往返。

這樣的功能設(shè)置是基于對(duì)用戶需求的深入研究得出的，主要有以下幾個(gè)原因：

最優(yōu)方案不同：國(guó)內(nèi)單程往返的最優(yōu)方案多半有可能不是一個(gè)航空公司，要一個(gè)一個(gè)查詢，（盡管同一航空公司往返有1+1小于2的規(guī)則），會(huì)對(duì)客人更有利，因?yàn)榻?jīng)常會(huì)出現(xiàn)1+0.5=1.5的情況。國(guó)際票往返的最優(yōu)方案通常還是一家航空公司的便宜，這個(gè)基本上是定律，所以這個(gè)默認(rèn)設(shè)定是培養(yǎng)消費(fèi)習(xí)慣之舉。
使用場(chǎng)景不同：國(guó)際機(jī)票的使用場(chǎng)景下，大都有明確時(shí)間區(qū)間，簽證限制了用戶在國(guó)外停留的時(shí)間。用戶不得不提前計(jì)劃。且回程可選擇交通工具有限。相對(duì)而言，國(guó)內(nèi)機(jī)票場(chǎng)景較自由，提前計(jì)劃必要性相對(duì)較弱。
觀測(cè)數(shù)據(jù)證明：根據(jù)同程的國(guó)際機(jī)票訂購(gòu)數(shù)據(jù)顯示，70%以上的用戶選擇了往返。

基于以上充分的原因，這個(gè)自適應(yīng)功能設(shè)計(jì)就得以開(kāi)發(fā)并成功提高用戶的使用效率。

（2）根據(jù)用戶靜態(tài)標(biāo)簽優(yōu)化結(jié)果

靜態(tài)標(biāo)簽：用戶主動(dòng)提供的數(shù)據(jù), 指用戶不變的基礎(chǔ)信息，多為用戶固定數(shù)據(jù)，如姓名、性別、年齡、身高、體重、職業(yè)、地區(qū)、設(shè)備信息、來(lái)源渠道等。

定位地區(qū)：大眾點(diǎn)評(píng)——切換城市

大眾點(diǎn)評(píng)的這個(gè)功能經(jīng)常被拿出來(lái)說(shuō)，當(dāng)你到另一個(gè)城市，通過(guò)獲取定位申請(qǐng)，判斷你是來(lái)這座城市旅游的場(chǎng)景，從而頁(yè)面展示中入口就改成了跟旅游相關(guān)，這其實(shí)也有點(diǎn)內(nèi)容自適應(yīng)的意思，通過(guò)用戶不同的操作展示不同的內(nèi)容。

2. 歷史自適應(yīng)

歷史自適應(yīng)主要集中在特定領(lǐng)域的個(gè)性化界面定制和推薦等方面。針對(duì)不同用戶呈現(xiàn)不同界面，根據(jù)用戶的類型、任務(wù)特點(diǎn)、喜好等提供不同的界面樣式。

（1）根據(jù)用戶動(dòng)態(tài)/預(yù)測(cè)標(biāo)簽算法推薦定制內(nèi)容

預(yù)測(cè)標(biāo)簽：平臺(tái)介入的數(shù)據(jù)，指根據(jù)用戶在平臺(tái)內(nèi)的行為數(shù)據(jù)對(duì)用戶未來(lái)行為或喜好進(jìn)行預(yù)測(cè)；是設(shè)計(jì)千人千面和運(yùn)營(yíng)策略的關(guān)鍵；比如某電商平臺(tái)，根據(jù)用戶A“月均消費(fèi)5單，且有數(shù)額過(guò)萬(wàn)的運(yùn)動(dòng)商品”的購(gòu)物數(shù)據(jù)，平臺(tái)會(huì)給用戶A打“高頻、品質(zhì)敏感性、運(yùn)動(dòng)”的標(biāo)簽，后期會(huì)更多推薦高品質(zhì)運(yùn)動(dòng)商品及相關(guān)運(yùn)動(dòng)品牌活動(dòng)的精準(zhǔn)推送。

用戶標(biāo)簽是構(gòu)成用戶畫(huà)像的核心因素，是將用戶在平臺(tái)內(nèi)所產(chǎn)生的行為數(shù)據(jù)，分析提煉后生成具有差異性特征的形容詞。即用戶通過(guò)平臺(tái)，在什么時(shí)間什么場(chǎng)景下做了什么行為，平臺(tái)將用戶所有行為數(shù)據(jù)提煉出來(lái)形成支撐業(yè)務(wù)實(shí)現(xiàn)的可視化信息。

① 用戶生產(chǎn)內(nèi)容（UGC）

互聯(lián)網(wǎng)上的許多站點(diǎn)開(kāi)始廣泛使用用戶生成內(nèi)容的方式提供服務(wù)，許多圖片、視頻、博客、播客、論壇、評(píng)論、社交、Wiki、問(wèn)答、新聞、研究類的網(wǎng)站都使用了這種方式。

② 電商平臺(tái)

這種平臺(tái)一般會(huì)隨著用戶的使用，網(wǎng)站會(huì)積累及不斷修正及展示最貼近用戶喜好的產(chǎn)品，從而進(jìn)行推薦。功能上適應(yīng)了用戶的喜好，會(huì)大大增加用戶的粘性。

③ APP Store 應(yīng)用頁(yè)面大變動(dòng)：不同用戶可看到不同功能與內(nèi)容

自定義產(chǎn)品頁(yè)功能讓開(kāi)發(fā)者可以面向不同用戶展示 App 的不同功能，產(chǎn)品頁(yè)優(yōu)化功能則讓開(kāi)發(fā)者們能夠測(cè)試不同的截屏、預(yù)覽視頻，甚至 App 圖標(biāo)。

蘋(píng)果指出，得益于 App Store Connect 詳實(shí)且注重隱私的分析，開(kāi)發(fā)者可以了解自己用戶的偏好，從而決定產(chǎn)品頁(yè)的展示內(nèi)容。

④ SoulAPP創(chuàng)始人：Sou了APP功能符合不同場(chǎng)景的用戶需求

SoulAPP多種匹配機(jī)制,功能符合不同場(chǎng)景的客戶需求。Soul利用AI大數(shù)據(jù)，依照性格、興趣等因素,劃分用戶。通過(guò)這種精準(zhǔn)的方式分類用戶,以便用戶之間能夠更高效地建立連接。第一次注冊(cè)SoulAPP，用戶需要通過(guò)系統(tǒng)的一些答題測(cè)試,以便于生成符合自己的性格報(bào)告。接著就是通過(guò)上述數(shù)據(jù)采集，劃分專屬圈子，這里就是大家經(jīng)常說(shuō)的“星球“，這些都是基于SoulAPP的AI功能。

三、利弊分析

1. 優(yōu)點(diǎn)

增強(qiáng)用戶體驗(yàn)：自適應(yīng)界面不能讓用戶控制自適應(yīng)過(guò)程。對(duì)用戶動(dòng)機(jī)準(zhǔn)確的判斷和對(duì)應(yīng)的自適應(yīng)設(shè)計(jì)能有效簡(jiǎn)短交互路徑，優(yōu)化用戶的交互體驗(yàn)。
增強(qiáng)用戶粘性：基于精準(zhǔn)人群的需求分析和功能設(shè)計(jì)，更容易得到用戶認(rèn)可，更容易打造產(chǎn)品亮點(diǎn)，提供精準(zhǔn)個(gè)性化的服務(wù)，比如對(duì)于社區(qū)產(chǎn)品，內(nèi)容個(gè)性化推薦將有效提升社區(qū)粘度。
利于公司可持續(xù)發(fā)展：一方面使公司更具競(jìng)爭(zhēng)壁壘，及時(shí)洞察市場(chǎng)風(fēng)向，預(yù)測(cè)產(chǎn)品所占市場(chǎng)規(guī)模及前景發(fā)展，及時(shí)優(yōu)化公司戰(zhàn)略，避免過(guò)早陷入發(fā)展瓶頸；另一方面沉淀大批用戶數(shù)據(jù)，既利于孵化創(chuàng)新產(chǎn)品，也豐富盈利模式（比如與第三方合作）。
提升產(chǎn)品設(shè)計(jì)價(jià)值：基于精準(zhǔn)人群的需求分析和功能設(shè)計(jì)，更容易得到用戶認(rèn)可，更容易打造產(chǎn)品亮點(diǎn)，提供精準(zhǔn)個(gè)性化的服務(wù)，比如對(duì)于社區(qū)產(chǎn)品，內(nèi)容個(gè)性化推薦將有效提升社區(qū)粘度。
提高運(yùn)營(yíng)效率：如今的新用戶獲客成本居高不下的情況下，利用現(xiàn)有用戶畫(huà)像，做好存量用戶的維護(hù)，通過(guò)精準(zhǔn)營(yíng)銷策略，提升存量用戶的留存與活躍。

2. 缺點(diǎn)

自適應(yīng)界面同樣有一些“小缺點(diǎn)”，違背了一些眾所周知的可用性原則：

缺乏控制：自適應(yīng)界面不能讓用戶控制自適應(yīng)過(guò)程。
不可預(yù)測(cè)性：由于用戶不能直接控制界面，用戶不能預(yù)測(cè)界面接下來(lái)的某些行為。
透明度：通常，用戶不能理解在界面中，自適應(yīng)是如何起作用的。在設(shè)計(jì)自適應(yīng)界面時(shí)的其中一個(gè)問(wèn)題就是讓用戶可以見(jiàn)到多少自適應(yīng)比例。
私密性：用戶必須接受基于用戶模型的一種系統(tǒng)，將會(huì)一直維持與系統(tǒng)交互的狀態(tài)，持續(xù)收集用戶使用行為。
信任度：用戶在系統(tǒng)中的信任是容易改變的，如果自適應(yīng)系統(tǒng)給予了錯(cuò)誤的指令。
開(kāi)發(fā)成本：提供內(nèi)容的自適應(yīng)度，通常意味著著更多的開(kāi)發(fā)成本。要把控好自適應(yīng)性設(shè)計(jì)的度，而非一味地增加開(kāi)發(fā)量。

四、內(nèi)容自適應(yīng)設(shè)計(jì)在金融產(chǎn)品上的應(yīng)用思考

1. 基礎(chǔ)設(shè)計(jì)原則思考

內(nèi)容自適應(yīng)的核心在于，基于用戶過(guò)往的操作以及行為路徑的分析，提前預(yù)判用戶下一步需要的內(nèi)容，從而讓用戶能更便捷的使用產(chǎn)品。但是在金融產(chǎn)品的設(shè)計(jì)中比較特殊，往往用戶在使用產(chǎn)品的一個(gè)核心需求是安全感，產(chǎn)品安全、資產(chǎn)安全、操作安全等都是用戶著重關(guān)注的點(diǎn)，所以如果一味的進(jìn)行內(nèi)容自適應(yīng)設(shè)計(jì)，會(huì)讓用戶產(chǎn)生“信息泄露”的擔(dān)憂，從而失去對(duì)該產(chǎn)品的信任。

基于以上內(nèi)容自適應(yīng)的分析以及金融產(chǎn)品設(shè)計(jì)的特殊性，我們來(lái)看看有哪些可以運(yùn)用到金融產(chǎn)品的設(shè)計(jì)中來(lái)。

2. 金融產(chǎn)品設(shè)計(jì)思考

（1）金融應(yīng)用的[截圖]功能

截圖功能可以根據(jù)用戶場(chǎng)景與用戶目標(biāo)兩個(gè)維度進(jìn)行分析。截圖操作的發(fā)生幾乎會(huì)發(fā)生在用戶使用金融應(yīng)用的各個(gè)場(chǎng)景，比如瀏覽金融產(chǎn)品、查看產(chǎn)品詳情、查看持倉(cāng)資產(chǎn)、收益等等，而不同的場(chǎng)景用戶的目標(biāo)也有所不同，我們可以根據(jù)用戶不同的操作目標(biāo)，為用戶提供自適應(yīng)的內(nèi)容來(lái)方便用戶的操作。

截圖常見(jiàn)的用戶目標(biāo)大致分為兩類：報(bào)錯(cuò)與分享。我們可以為這兩個(gè)用戶目標(biāo)做一些內(nèi)容上設(shè)計(jì)。

報(bào)錯(cuò)一般會(huì)關(guān)聯(lián)產(chǎn)品的在線客服功能，那么我們?cè)谟脩艚貓D操作發(fā)生后，提供在線客服的入口，同時(shí)分析報(bào)錯(cuò)自身的用戶行為，如可能是針對(duì)頁(yè)面的哪個(gè)點(diǎn)或者哪個(gè)區(qū)域報(bào)錯(cuò)，那我們可以針對(duì)這一點(diǎn)再提供編輯截圖的功能等等。

如此根據(jù)用戶目標(biāo)拆解用戶行為，設(shè)計(jì)對(duì)應(yīng)的功能來(lái)滿足用戶操作，從而減少用戶的操作路徑。

分享可根據(jù)用戶場(chǎng)景設(shè)計(jì)不同的內(nèi)容，如：

當(dāng)截圖發(fā)生在產(chǎn)品詳情頁(yè)，那此時(shí)截圖的分享意圖可能是分享此只產(chǎn)品給好友，我們可以為此設(shè)計(jì)一個(gè)關(guān)于產(chǎn)品信息的分享頁(yè)來(lái)便于用戶分享；
當(dāng)截圖發(fā)生在資產(chǎn)頁(yè)，此時(shí)的截圖的分享意圖可能是炫耀自己的收益，那我們可以生成收益海報(bào)等內(nèi)容給用戶，從而滿足用戶的心理預(yù)期。

（2）金融應(yīng)用的[內(nèi)容管理]功能

買(mǎi)衣服的時(shí)候，絕大多數(shù)人在意的是是否合身，對(duì)于數(shù)字產(chǎn)品，同樣是如此。在一個(gè)金融應(yīng)用的內(nèi)容管理功能當(dāng)中，會(huì)推送大量的內(nèi)容給用戶，絕大多數(shù)的用戶幾乎沒(méi)有時(shí)間來(lái)掌控所有的信息，導(dǎo)致部分對(duì)用戶有用的信息被忽略，這樣意味著內(nèi)容的可定制化是極其重要的。

內(nèi)容的可定制化體現(xiàn)在不同用戶的分層上，基于分層，我們可以為相同類型用戶推送內(nèi)容。如持有私募基金的用戶，我們可能會(huì)更多為其推送關(guān)于此類產(chǎn)品的信息以及高端用戶的優(yōu)惠、活動(dòng)、資產(chǎn)報(bào)告等信息。

（3）金融應(yīng)用的[搜索]功能

金融產(chǎn)品的搜索，除了具備一般應(yīng)用該有的內(nèi)容，如最近搜索、熱門(mén)搜索、搜索排行榜等，也需要基于產(chǎn)品特性來(lái)思考還有哪些可以展示的內(nèi)容。

根據(jù)用戶行為與數(shù)據(jù)分析，一般搜索的關(guān)鍵詞為基金名稱或者基金代碼，而搜索的目的是查看該產(chǎn)品的信息以及收益情況，那么基于此類目的，我們可以當(dāng)用戶輸入基金名稱后，展示該基金最近的凈值走勢(shì)等內(nèi)容，這樣用戶就可以提前了解部分基金信息，可以提前做一個(gè)判斷，需不需要進(jìn)入搜索結(jié)果頁(yè)進(jìn)一步的了解。

除了提前展示該基金部分產(chǎn)品信息以外，我們也可以展示相類似基金，防止用戶因提前獲知產(chǎn)品部分信息而帶來(lái)的流失率，當(dāng)用戶不滿意該只基金的近期表現(xiàn)，我們可以為其提供表現(xiàn)良好的基金供其選擇，從而提高產(chǎn)品的轉(zhuǎn)化率。

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

通過(guò)對(duì)自適應(yīng)設(shè)計(jì)在內(nèi)容上的應(yīng)用探究，我們對(duì)內(nèi)容自適應(yīng)的設(shè)計(jì)手法及應(yīng)用場(chǎng)景有了初步的理解，也會(huì)繼續(xù)的探究并運(yùn)用到實(shí)際的工作中來(lái)，希望這些思考能為大家?guī)?lái)一些幫助。

作者：道樂(lè)UED全體成員

原文鏈接：https://www.ui.cn/detail/610302.html

本文由 @道樂(lè)科技設(shè)計(jì)中心授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。

蘭亭妙微(www.zhengchang8.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。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

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

102025-4

帕累托原則 | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！

清陽(yáng)

前人留下的一些設(shè)計(jì)原則能夠幫助我們更好地進(jìn)行頁(yè)面以及產(chǎn)品的設(shè)計(jì)，讓用戶有更好的體驗(yàn)。本文對(duì)帕累托法則進(jìn)行了介紹，希望能幫助大家在以后的設(shè)計(jì)中更好的理解與運(yùn)用。

威廉·斯特倫克（William Strunk）說(shuō)過(guò)：“優(yōu)秀的設(shè)計(jì)師有時(shí)會(huì)無(wú)視設(shè)計(jì)法則，但當(dāng)他們這樣做的時(shí)候，通常會(huì)有一些補(bǔ)償性的措施，除非你確定你能做得那么好，否則最好還是遵守這些法則”，所以設(shè)計(jì)師需要對(duì)一些通用性的法則有所理解，做好相應(yīng)的知識(shí)儲(chǔ)備，以便在需要時(shí)從中找尋相通的規(guī)律和事務(wù)的本源。

設(shè)計(jì)常常是以一種美觀且富有規(guī)律的形態(tài)出現(xiàn)，不論大家是何種姿態(tài)、什么樣的知識(shí)背景，一旦踏入設(shè)計(jì)領(lǐng)域之后就會(huì)忍不住的去尋求設(shè)計(jì)法則，探索期背后的設(shè)計(jì)規(guī)律，因此經(jīng)過(guò)長(zhǎng)期沉淀，一些大佬和前輩們留下了大量的通用設(shè)計(jì)法則。

今天，筆者就說(shuō)說(shuō)帕累托法則，希望能幫助大家在以后的設(shè)計(jì)中更好的理解與運(yùn)用。

一、認(rèn)識(shí)帕累托法則

1. 帕累托法則的背景

19世紀(jì)末，意大利經(jīng)濟(jì)學(xué)家和工程師維爾弗雷多·帕累托（Vilfredo Pareto）發(fā)現(xiàn)，自家花園中80%的豌豆產(chǎn)自于20%的豌豆莢，在隨后研究土地所有權(quán)和財(cái)富不平等的問(wèn)題中，再次發(fā)現(xiàn)意大利 80%的土地屬于 20%的人。

20世紀(jì)初，由管理學(xué)家約瑟夫·朱蘭（Joseph Juran）將其命名為帕累托法則，即80%的結(jié)果是20%的原因造成的，并且號(hào)召關(guān)注「重要的少數(shù)」而不是在「瑣碎的多數(shù)」當(dāng)中投注精力。后續(xù)在經(jīng)濟(jì)學(xué)中得出結(jié)論（80%的財(cái)富掌握在20%的人手里）更加證實(shí)了帕累托法則的觀點(diǎn)。

2. 正確理解80與20

帕累托法則有很多不同的叫法，如帕列托法則、關(guān)鍵少數(shù)法則、二八法則、巴萊特定律、最省力的法則、不平衡原則等，后續(xù)筆者將其稱為「80/20法則」。

其實(shí)，80/20法則是一個(gè)較為抽象的概念，可以理解為：大部分的效果由少數(shù)幾項(xiàng)關(guān)鍵的因素來(lái)決定。在實(shí)際的場(chǎng)景中，“大部分”不是精確的80%，“幾項(xiàng)關(guān)鍵因素”也不是固定的20%，數(shù)據(jù)會(huì)有所浮動(dòng)，可能是70%+30%或者90%+10%，但不管這些數(shù)字如何波動(dòng)，其背后蘊(yùn)含的規(guī)律（集中的投入將產(chǎn)出大于預(yù)期的結(jié)果）是不變的，并且生活中存在的許多不平衡現(xiàn)象，都與這個(gè)規(guī)律相當(dāng)接近。

3. 可適用范圍

80/20法則并不受人為直接控職，更多時(shí)后是自然而然的形成，其適用領(lǐng)域非常廣泛。早期大多數(shù)用于社會(huì)、經(jīng)濟(jì)、管理以及工程等領(lǐng)域，而在80年代末就已經(jīng)有設(shè)計(jì)師將其設(shè)計(jì)領(lǐng)域，在各行各業(yè)中，已經(jīng)有大量的案例證明了 80/20原則：

人類80%的科學(xué)發(fā)明，來(lái)自于20%的人口
社會(huì)上20%的人占有80%的財(cái)富
城市80%的交通，集中在20%的道路上
20%的客戶為公司貢獻(xiàn)了80%的收入
公司80%的收益來(lái)源于20%的產(chǎn)品
20%的網(wǎng)站獲取了 80%的網(wǎng)絡(luò)流量
20%的常見(jiàn)軟件錯(cuò)誤導(dǎo)致了80%的系統(tǒng)崩潰
……

4. 設(shè)計(jì)領(lǐng)域中的運(yùn)用

70年代中期出現(xiàn)圖形化界面，而到80年代末，80/20法則就已經(jīng)被設(shè)計(jì)師引用在設(shè)計(jì)規(guī)范當(dāng)中，后續(xù)經(jīng)過(guò)不斷的發(fā)展及優(yōu)化，現(xiàn)已深入設(shè)計(jì)中的方方面面，PM用來(lái)處理KPI、UX用來(lái)劃分權(quán)重、UI用來(lái)決策版面布局等。

界面設(shè)計(jì)中該如何應(yīng)用80/20法則，這就需要設(shè)計(jì)師時(shí)刻注意如何讓用戶更快找到目標(biāo)、如何更順暢的完成任務(wù)以及如何擁有更愉悅的心理感受。例如80%的用戶只會(huì)用到20%的功能，那么設(shè)計(jì)師就應(yīng)該將80%的時(shí)間、精力集中在這20%的功能上，不斷迎合用戶需求以及使用體驗(yàn)。

二、產(chǎn)品如何應(yīng)對(duì)80與20

1. 關(guān)鍵性的20%

80/20法則能夠幫助我們提供決策思路、梳理設(shè)計(jì)方向，通過(guò)前面的了解，我們應(yīng)該清楚了產(chǎn)品80%的用戶只會(huì)用到20%的功能，而80%的收益也恰恰來(lái)自于20%的付費(fèi)用戶，甚至低于20%。

雖然一直呼吁盡量滿足所有用戶，但產(chǎn)品團(tuán)隊(duì)的重心始終要圍繞著20%來(lái)進(jìn)行，從產(chǎn)品到設(shè)計(jì)、再到開(kāi)發(fā)測(cè)試，都能以此為方向制定問(wèn)題的解決方案。

2. 非關(guān)鍵性的80%

任何一款產(chǎn)品都不能忽略主次，每隔一段時(shí)間就要重新評(píng)估功能價(jià)值，以備后續(xù)的更新迭代，針對(duì)非關(guān)鍵性的80%切勿耗費(fèi)過(guò)多的精力，以免喧賓奪主，不僅得到不好的反饋、還會(huì)帶來(lái)不必要的損失，吃力不討好。

對(duì)于已經(jīng)過(guò)期的核心（曾經(jīng)20%）功能，需要及時(shí)降低權(quán)重以及精力的消耗，不然即便是掌聲一片、也可能無(wú)法變現(xiàn)。

3. 僅關(guān)注 20%有風(fēng)險(xiǎn)

用20%的部分創(chuàng)造80%的價(jià)值，并不意味著只關(guān)注20%的關(guān)鍵性指標(biāo)、其它的就可以被忽略，這樣做表面上看是挺誘人，但會(huì)讓其他很多指標(biāo)停滯，呈現(xiàn)出產(chǎn)品過(guò)度優(yōu)化的情況，造成短時(shí)間內(nèi)隱藏的負(fù)面影響。

團(tuán)隊(duì)?wèi)?yīng)該要有眾覽全局的眼光，考慮到各指標(biāo)間的相互影響，可視情況而定將時(shí)間和精力合理分配，如90%+10%、80%+20%、70%+30%等，只要是將大部分用在關(guān)鍵性指標(biāo)上即可。

三、在UI設(shè)計(jì)中的運(yùn)用

在UI設(shè)計(jì)中，我們會(huì)將主要精力花費(fèi)在20%的頁(yè)面設(shè)計(jì)上，例如APP底部標(biāo)簽欄的幾大主頁(yè)或其它重要的一/二級(jí)頁(yè)面，會(huì)花費(fèi)更多的心思去構(gòu)思不一樣的布局、表現(xiàn)手法，將設(shè)計(jì)功底凸顯出來(lái)。而剩下80%的頁(yè)面就相對(duì)機(jī)械化，會(huì)使用一些常規(guī)樣式以及復(fù)用的方式像搭積木一樣快速完成，成本之低、效率之高毋庸置疑。

同一個(gè)頁(yè)面的設(shè)計(jì)方式也是如此，設(shè)計(jì)師將大量心思放在首屏及位置靠上的功能上，待超過(guò)一屏后下滑時(shí)，設(shè)計(jì)也會(huì)逐漸輕量、組件化，這有助于節(jié)省產(chǎn)品、設(shè)計(jì)、開(kāi)發(fā)更多的時(shí)間。

1. 排版布局（F型）

用戶瀏覽屏幕時(shí)，眼球移動(dòng)的順序通常都是從左到右、從上到下（基于網(wǎng)頁(yè)瀏覽眼動(dòng)測(cè)試），這種移動(dòng)軌跡很像字母「F」，這也讓F型布局成為網(wǎng)頁(yè)設(shè)計(jì)中效率最高的方式之一，所以設(shè)計(jì)師通常會(huì)將重要的信息放在左上角或左側(cè)，不重要的信息放在右側(cè)。

如下面這張眼動(dòng)測(cè)試圖，F(xiàn)型布局也正好詮釋了80/20法則合理性與可行性，在頁(yè)面中20%的關(guān)鍵區(qū)域，吸引了用戶80%的注意力。

2. 功能入口設(shè)計(jì)

很多產(chǎn)品因?yàn)闃I(yè)務(wù)功能的龐大，一股腦的將信息全部展示出來(lái)，看起來(lái)十分臃腫，用戶不能快速找到自己想要的信內(nèi)容，就會(huì)失去信心。

優(yōu)酷APP首頁(yè)將熱門(mén)頻道和點(diǎn)擊頻率較高的頻道顯示在頂部導(dǎo)航中，如精選、電視劇、電影、最新院線等，而其他更多的分類則隱藏在頻道選項(xiàng)卡中，將少量（≈20%）重要的內(nèi)容放在明顯的位置，目的就是為了讓大部分用戶更快觸達(dá)，提高了產(chǎn)品的易用性。

3. 選項(xiàng)列表設(shè)計(jì)

在一些選項(xiàng)列表中，由于選項(xiàng)數(shù)量的龐大，會(huì)給用戶增加使用難度。

例如，使用美團(tuán)購(gòu)買(mǎi)火車(chē)票在選擇地址時(shí)，面對(duì)超長(zhǎng)的地址列表，逐個(gè)查看或通過(guò)字母篩選，都要花費(fèi)一定的時(shí)間和操作成本，即便可以通過(guò)碼字搜索來(lái)完成，但因?yàn)樽孕休斎胗泻芏嗟牟豢煽匦?，能讓用戶選擇的就不要讓其輸入。

對(duì)于地址列表，除開(kāi)自動(dòng)定位和搜索歷史，運(yùn)用80/20法則就能很好的解決這一問(wèn)題，系統(tǒng)將約20%高頻選擇的熱門(mén)城市作為單獨(dú)的模塊放在全部列表之前，提高了大部分用戶的搜索效率。

4. 極簡(jiǎn)風(fēng)格設(shè)計(jì)

極簡(jiǎn)風(fēng)格的界面設(shè)計(jì)跟80/20法則在精神上保持著高度的一致，剔除多余、無(wú)用的元素，而保留的每一個(gè)元素都是有目的、有針對(duì)性的，也是絕對(duì)必要的存在。在極簡(jiǎn)主義設(shè)計(jì)中，視覺(jué)上簡(jiǎn)單干凈，大部分都是通過(guò)通過(guò)留白來(lái)襯托關(guān)鍵性元素的存在，讓用戶更加聚焦于主要功能/信息。

四、與其他法則的糾葛

1. 與奧卡姆剃刀的結(jié)合

奧卡姆剃刀指出「如無(wú)必要，勿增實(shí)體」，需知頁(yè)面中每多一個(gè)元素都會(huì)增加視覺(jué)“噪聲”，意味著用戶需要花費(fèi)額外的時(shí)間和理解成本，對(duì)用戶體驗(yàn)的影響是很大的。那么問(wèn)題來(lái)了，當(dāng)產(chǎn)品需要增加一項(xiàng)需求量小但確實(shí)存在的功能，該怎么處理？

這時(shí)我們可以將奧卡姆剃刀原則作為最終的評(píng)判標(biāo)準(zhǔn)，是否需要增加上述所說(shuō)的功能，就要看看能否很好的控制團(tuán)隊(duì)開(kāi)發(fā)成本和用戶體驗(yàn)成本。

其實(shí)在80/20法則中，很多小眾但確實(shí)存在的功能需求基本很難抵消所造成的用戶體驗(yàn)損失，所以即便實(shí)現(xiàn)了這個(gè)需求，也很難分配出20%的精力去維護(hù)與迭代，甚至“俺耳盜鈴”般的將其遺忘，但這個(gè)視覺(jué)“噪聲”一直存在，如果事先能分析出這種結(jié)果，這個(gè)需求根本不需要增加。

2. 與長(zhǎng)尾模型的對(duì)抗

在2004年長(zhǎng)尾模型才被提出來(lái)的時(shí)候，很多人認(rèn)為這是在顛覆80/20法則，它們的曲線長(zhǎng)得很像，但結(jié)論完全相反，那條長(zhǎng)長(zhǎng)的“尾巴”（非關(guān)鍵的80%）所占據(jù)的長(zhǎng)度幾乎與頭部的（關(guān)鍵的20%）高度相當(dāng)，這說(shuō)明收益雖低，但這么多數(shù)量的累積，依然值得重點(diǎn)關(guān)注。

所以有很多企業(yè)在采集差異化戰(zhàn)略時(shí)運(yùn)用了長(zhǎng)尾理論，例如小米搭建的全品類商城用的是長(zhǎng)尾理論。

乍一聽(tīng)好像很有道理，難道80/20法則被推翻了嗎？事實(shí)并非如此，長(zhǎng)尾理論的成立必須要滿足兩個(gè)條件，第一是尾巴真的足夠長(zhǎng)（小眾需求確實(shí)非常多），第二長(zhǎng)尾巴能被用戶發(fā)現(xiàn)（龐大的用戶量），這兩個(gè)條件缺一不可。例如京東、淘寶、微信、支付寶等，其前提都是建立在大規(guī)模、且海量的用戶資源之上，不管多么隱蔽、多小的動(dòng)能，總能擁有一些不錯(cuò)的曝光度，所以才能發(fā)揮長(zhǎng)尾模型的作用。

說(shuō)道這里，大家應(yīng)該就明白了，那些中小型的產(chǎn)品對(duì)長(zhǎng)尾模型大多是望塵莫及，所以在你的產(chǎn)品規(guī)模、用戶量沒(méi)有達(dá)到一定的級(jí)別之前，就不要妄捧長(zhǎng)尾模型，用好80/20法則就好。

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

80/20法則在實(shí)際工作中是一個(gè)相對(duì)普遍的定律，它能讓我們靈活思考設(shè)計(jì)問(wèn)題，更好的為用戶服務(wù)，雖然80/20法則也存在一定的爭(zhēng)議，但還是適用于覺(jué)絕大多數(shù)的場(chǎng)景，在關(guān)鍵時(shí)候使用，能幫助我們準(zhǔn)確的找到問(wèn)題點(diǎn)，在有限的時(shí)間和精力下快速作出優(yōu)化決策并、關(guān)注核心功能，最終達(dá)成目標(biāo)。

專欄作家

大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來(lái)更好的體驗(yàn)，即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

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

062024-3

B端設(shè)計(jì)——組件庫(kù)—數(shù)據(jù)錄入&反饋&導(dǎo)航

前端達(dá)人

B端設(shè)計(jì)的文章和資料參考，缺少系統(tǒng)性的說(shuō)明，這是我總結(jié)第五篇。本文主要闡述——數(shù)據(jù)錄入&反饋&導(dǎo)航

本文為B端設(shè)計(jì)組件庫(kù)的第五篇、也是組件庫(kù)系列的最后一篇，下一篇將更新B端設(shè)計(jì)中常見(jiàn)的問(wèn)題合集來(lái)結(jié)束本系列。

一、引言

隨著企業(yè)對(duì)于數(shù)字化轉(zhuǎn)型的需求日益強(qiáng)烈，B端產(chǎn)品的發(fā)展也在加速。而B(niǎo)端組件庫(kù)，作為產(chǎn)品設(shè)計(jì)與開(kāi)發(fā)的基礎(chǔ)構(gòu)建模塊，其重要性不言而喻。在眾多的組件中，“數(shù)據(jù)錄入”、“反饋”和“導(dǎo)航”是三個(gè)關(guān)鍵的組成部分，它們?cè)诤艽蟪潭壬蠜Q定了產(chǎn)品的用戶體驗(yàn)和工作效率。本文將對(duì)這三個(gè)組件進(jìn)行深入的研究，探索其最佳的設(shè)計(jì)與實(shí)施策略。

二、B端組件庫(kù)中的數(shù)據(jù)錄入類組件應(yīng)該如何搭建？如何進(jìn)行多樣化設(shè)計(jì)？

2.1“數(shù)據(jù)錄入”類組件搭建過(guò)程

2.1.1搭建步驟：

需求分析：首先明確數(shù)據(jù)錄入的需求，包括需要錄入的數(shù)據(jù)類型、數(shù)據(jù)量、頻率等。

設(shè)計(jì)表單：根據(jù)需求設(shè)計(jì)合適的表單，包括輸入項(xiàng)的類型（文本、數(shù)字、日期等）、布局、標(biāo)簽等。

添加驗(yàn)證：為了確保數(shù)據(jù)的準(zhǔn)確性，需要為表單添加合適的驗(yàn)證規(guī)則，如必填項(xiàng)、格式驗(yàn)證等。

考慮用戶體驗(yàn)：為了提高數(shù)據(jù)錄入的效率，可以考慮添加一些方便用戶的功能，如自動(dòng)填充、批量導(dǎo)入等。

測(cè)試與迭代：完成設(shè)計(jì)后，進(jìn)行用戶測(cè)試，根據(jù)反饋進(jìn)行必要的調(diào)整和優(yōu)化。

2.1.2注意事項(xiàng)：

明確性：確保每個(gè)輸入項(xiàng)的目的和要求都是清晰的，避免用戶產(chǎn)生困惑或誤解。

友好性：盡量簡(jiǎn)化錄入流程，減少不必要的步驟和輸入。提供友好的提示信息和反饋，幫助用戶順利完成錄入。

響應(yīng)速度：數(shù)據(jù)錄入過(guò)程中，系統(tǒng)的響應(yīng)速度也是一個(gè)重要的考慮因素。確保系統(tǒng)在處理大量數(shù)據(jù)或復(fù)雜操作時(shí)仍能保持流暢。

安全性：對(duì)于敏感數(shù)據(jù)的錄入，需要確保系統(tǒng)的安全性，如使用加密技術(shù)、防止SQL注入等。

2.1.3常用場(chǎng)景：

用戶注冊(cè)：在注冊(cè)新用戶時(shí)，需要收集用戶的基本信息，如姓名、郵箱、密碼等。

商品管理：在電商或庫(kù)存管理系統(tǒng)中，添加或編輯商品信息時(shí)需要進(jìn)行數(shù)據(jù)錄入。

訂單處理：處理訂單時(shí)，需要錄入訂單的相關(guān)信息，如客戶信息、商品信息、支付方式等。

數(shù)據(jù)導(dǎo)入：對(duì)于一些已經(jīng)存在的數(shù)據(jù)，提供批量導(dǎo)入的功能可以大大提高數(shù)據(jù)錄入的效率。

報(bào)表生成：生成報(bào)表時(shí)，用戶可能需要輸入一些參數(shù)或篩選條件，這也涉及到數(shù)據(jù)錄入的操作。

2.3如何進(jìn)行多樣化設(shè)計(jì)？

進(jìn)一步提升B端組件庫(kù)中“數(shù)據(jù)錄入”類組件的設(shè)計(jì)和擴(kuò)展能力：

1. 增強(qiáng)交互與動(dòng)效設(shè)計(jì) 使用明顯的交互動(dòng)效，如微動(dòng)畫(huà)、過(guò)渡效果等，提升用戶輸入時(shí)的體驗(yàn)。設(shè)計(jì)清晰的輸入狀態(tài)，如聚焦、失焦、有效、無(wú)效等，使用戶明確知道當(dāng)前輸入的狀態(tài)。

2. 提供多種輸入格式和單位支持允許用戶選擇不同的輸入格式，如日期可以選擇“年-月-日”或“月/日/年”等格式。對(duì)于數(shù)字輸入，提供多種單位支持，如百分比、貨幣、科學(xué)計(jì)數(shù)等。

3. 設(shè)計(jì)可擴(kuò)展的驗(yàn)證規(guī)則系統(tǒng) 提供內(nèi)置的常見(jiàn)驗(yàn)證規(guī)則，如必填、長(zhǎng)度限制、正則匹配等。允許用戶自定義驗(yàn)證規(guī)則，以滿足特定的業(yè)務(wù)需求。

4. 支持復(fù)雜數(shù)據(jù)結(jié)構(gòu)輸入設(shè)計(jì)支持?jǐn)?shù)組、對(duì)象等復(fù)雜數(shù)據(jù)結(jié)構(gòu)的輸入組件。提供可視化編輯工具，方便用戶直接編輯復(fù)雜數(shù)據(jù)結(jié)構(gòu)。

5. 優(yōu)化鍵盤(pán)導(dǎo)航和快捷鍵支持允許用戶使用鍵盤(pán)快速導(dǎo)航和輸入數(shù)據(jù)，如使用Tab鍵在字段間切換。提供常用的快捷鍵支持，如Ctrl+C/V進(jìn)行復(fù)制粘貼。

6. 設(shè)計(jì)可配置的界面和布局提供多種預(yù)設(shè)的界面風(fēng)格和布局選項(xiàng)。允許用戶自定義界面元素和布局，以滿足不同的視覺(jué)需求。

7. 集成智能提示和自動(dòng)補(bǔ)全功能使用機(jī)器學(xué)習(xí)算法為用戶提供輸入建議，減少輸入錯(cuò)誤。對(duì)于重復(fù)輸入的數(shù)據(jù)，提供自動(dòng)補(bǔ)全功能，提高輸入效率。

8. 支持多語(yǔ)言和本地化設(shè)置為不同語(yǔ)言和文化背景的用戶提供本地化支持。允許用戶自定義顯示的語(yǔ)言和格式設(shè)置。

9. 建立組件使用分析和反饋系統(tǒng) 收集并分析用戶使用數(shù)據(jù)錄入組件的數(shù)據(jù)，了解用戶的真實(shí)需求和習(xí)慣。建立用戶反饋系統(tǒng)，及時(shí)收集和處理用戶對(duì)組件的意見(jiàn)和建議。

三、B端組件庫(kù)中的反饋類組件應(yīng)該如何搭建？有哪些注意事項(xiàng)？常用的場(chǎng)景有哪些？

在B端組件庫(kù)中，反饋類組件是非常重要的一部分，它們用于在必要時(shí)向用戶反饋操作結(jié)果，做到合理有效的信息傳達(dá)。

3.1搭建反饋類組件

確定反饋類型：根據(jù)需要，確定要使用的反饋類型，如提示、警告、錯(cuò)誤、成功等。

設(shè)計(jì)反饋樣式：針對(duì)不同類型的反饋，設(shè)計(jì)相應(yīng)的視覺(jué)樣式，如顏色、圖標(biāo)、動(dòng)畫(huà)等。

編寫(xiě)組件代碼：根據(jù)設(shè)計(jì)好的樣式，編寫(xiě)反饋類組件的代碼，包括HTML結(jié)構(gòu)、CSS樣式和JavaScript交互邏輯。

測(cè)試與優(yōu)化：對(duì)編寫(xiě)好的組件進(jìn)行測(cè)試，確保其在不同瀏覽器和設(shè)備上都能正常工作，并根據(jù)測(cè)試結(jié)果進(jìn)行優(yōu)化。

3.2注意事項(xiàng)

反饋一致性：對(duì)于同一類型的消息反饋，使用同一類型的組件，以確保用戶在不同場(chǎng)景下獲得一致的體驗(yàn)。

符合場(chǎng)景：不同的場(chǎng)景使用不同的反饋組件，例如系統(tǒng)主動(dòng)推送消息類型的使用通知提醒框。

描述精確：合理而精確的消息提示文案描述，可以幫助用戶高效理解。

可關(guān)閉性：對(duì)于一些非關(guān)鍵性的反饋，提供用戶手動(dòng)關(guān)閉的選項(xiàng)，避免打擾用戶。

適應(yīng)性：確保反饋類組件在不同屏幕尺寸和分辨率下都能正常顯示和工作。

3.3常用場(chǎng)景

告警提示：當(dāng)某個(gè)頁(yè)面需要向用戶提供告警信息時(shí)，使用告警提示。通常告警提示在頁(yè)面上不會(huì)自己消失，用戶可以手動(dòng)關(guān)閉。

全局提示：在當(dāng)前頁(yè)面以輕量級(jí)提示方式告知用戶操作的結(jié)果，使用全局提示。通常提示框在頁(yè)面頂部居中顯示并且會(huì)自動(dòng)消失，不打斷用戶的其他操作行為。

通知提醒框：一般在系統(tǒng)主動(dòng)推動(dòng)通知的情況下使用，如服務(wù)到期、服務(wù)告警等。

加載提示：常用于數(shù)據(jù)加載中提示、操作中提示，Loading的文案可按照具體場(chǎng)景定義。

對(duì)話框：常用于比較強(qiáng)的二次確認(rèn)彈框提示、或者展示一段比較長(zhǎng)的消息。

四、B端組件庫(kù)中的導(dǎo)航類組件應(yīng)該如何搭建？有哪些注意事項(xiàng)？常用的場(chǎng)景有哪些？

在B端組件庫(kù)中，導(dǎo)航類組件的設(shè)計(jì)和實(shí)現(xiàn)對(duì)于用戶體驗(yàn)和系統(tǒng)效率至關(guān)重要。

4.1搭建導(dǎo)航類組件

確定導(dǎo)航結(jié)構(gòu)：根據(jù)系統(tǒng)的信息架構(gòu)和用戶需求，確定導(dǎo)航的結(jié)構(gòu)，如全局導(dǎo)航、局部導(dǎo)航、面包屑導(dǎo)航等。

設(shè)計(jì)導(dǎo)航樣式：針對(duì)不同類型的導(dǎo)航，設(shè)計(jì)相應(yīng)的視覺(jué)樣式，如顏色、字體、圖標(biāo)等。

編寫(xiě)組件代碼：根據(jù)設(shè)計(jì)好的樣式和結(jié)構(gòu)，編寫(xiě)導(dǎo)航類組件的代碼，包括HTML結(jié)構(gòu)、CSS樣式和JavaScript交互邏輯。

4.2注意事項(xiàng)

清晰的信息架構(gòu)：確保導(dǎo)航的結(jié)構(gòu)能夠清晰地反映系統(tǒng)的信息架構(gòu)，使用戶能夠快速找到所需的信息。

易于理解：導(dǎo)航的標(biāo)簽和名稱應(yīng)使用用戶熟悉的術(shù)語(yǔ)，避免使用過(guò)于專業(yè)的術(shù)語(yǔ)或縮寫(xiě)。

可擴(kuò)展性：考慮到系統(tǒng)未來(lái)的發(fā)展，導(dǎo)航結(jié)構(gòu)應(yīng)具備一定的可擴(kuò)展性，以便添加新的功能或模塊。

響應(yīng)式設(shè)計(jì)：確保導(dǎo)航在不同屏幕尺寸和分辨率下都能正常顯示和工作，提供良好的用戶體驗(yàn)。

遵循設(shè)計(jì)規(guī)范：參考行業(yè)通用的設(shè)計(jì)規(guī)范和最佳實(shí)踐，確保導(dǎo)航的設(shè)計(jì)符合用戶的期望和習(xí)慣。

4.3常用場(chǎng)景

全局導(dǎo)航：適用于整個(gè)系統(tǒng)的主導(dǎo)航，通常位于頁(yè)面的頂部或側(cè)邊，提供對(duì)主要功能和模塊的快速訪問(wèn)。

局部導(dǎo)航：適用于特定頁(yè)面或功能的子導(dǎo)航，幫助用戶在該頁(yè)面或功能內(nèi)快速找到所需的信息。

面包屑導(dǎo)航：顯示用戶當(dāng)前所在的位置，以及從首頁(yè)到當(dāng)前頁(yè)面的路徑，方便用戶了解自己的位置和返回上一級(jí)頁(yè)面。

下拉菜單：當(dāng)導(dǎo)航項(xiàng)較多時(shí)，可以使用下拉菜單進(jìn)行收納，節(jié)省頁(yè)面空間并提高用戶體驗(yàn)。

標(biāo)簽頁(yè)導(dǎo)航：適用于需要同時(shí)展示多個(gè)內(nèi)容或功能的場(chǎng)景，用戶可以在不同的標(biāo)簽頁(yè)之間切換以查看或操作不同的內(nèi)容。

舉例說(shuō)明：公司內(nèi)部不同系統(tǒng)，可采用的不同種類菜單導(dǎo)航，均可以設(shè)計(jì)先行。后續(xù)使用可進(jìn)行調(diào)整

五、如何對(duì)“數(shù)據(jù)錄入”、“反饋”、“導(dǎo)航”進(jìn)行C化設(shè)計(jì)？

對(duì)于數(shù)據(jù)錄入，關(guān)鍵在于簡(jiǎn)化用戶的輸入過(guò)程，同時(shí)提供清晰直觀的界面。

例如，可以通過(guò)減少不必要的表單字段來(lái)簡(jiǎn)化錄入流程，使用智能填充來(lái)加速輸入過(guò)程，并通過(guò)即時(shí)驗(yàn)證和友好的錯(cuò)誤提示來(lái)減少用戶的輸入錯(cuò)誤。此外，考慮到移動(dòng)設(shè)備用戶的增長(zhǎng)，優(yōu)化表單的移動(dòng)端設(shè)計(jì)，確保在小屏幕上也能輕松輸入，是至關(guān)重要的。這可能意味著增加觸摸友好的元素，如更大的點(diǎn)擊區(qū)域和適應(yīng)屏幕大小的布局。

在反饋方面，提供即時(shí)、直觀且情感化的反饋對(duì)于增強(qiáng)用戶體驗(yàn)至關(guān)重要。這包括在用戶完成任務(wù)或遇到錯(cuò)誤時(shí)提供明確的視覺(jué)和文字提示。

例如，操作成功時(shí)可以顯示綠色的勾號(hào)圖標(biāo)和正面的消息，而錯(cuò)誤則可以用紅色的嘆號(hào)和說(shuō)明性的錯(cuò)誤消息來(lái)提示。增加動(dòng)態(tài)反饋，如加載動(dòng)畫(huà)，也可以提高用戶體驗(yàn)，減少等待時(shí)的焦慮感。此外，提供易于訪問(wèn)的幫助和支持選項(xiàng)，例如在線聊天或用戶論壇，可以幫助用戶在遇到問(wèn)題時(shí)快速找到解決方案。

對(duì)于導(dǎo)航，設(shè)計(jì)的重點(diǎn)是確保用戶能夠直觀地理解如何在應(yīng)用或網(wǎng)站中移動(dòng)。

這涉及到創(chuàng)建清晰、一致的導(dǎo)航結(jié)構(gòu)，突出顯示主要功能，并使用易于理解的圖標(biāo)和標(biāo)簽。在移動(dòng)設(shè)備上，這可能意味著采用漢堡菜單或底部導(dǎo)航條來(lái)節(jié)省空間。同時(shí)，考慮到個(gè)性化的重要性，可以提供自定義選項(xiàng)，讓用戶根據(jù)自己的偏好調(diào)整導(dǎo)航界面。綜上所述，C化設(shè)計(jì)強(qiáng)調(diào)的是提高易用性和用戶體驗(yàn)，使得B端產(chǎn)品在保持專業(yè)性和功能性的同時(shí)，更貼近最終消費(fèi)者的使用習(xí)慣。

六、結(jié)束

后續(xù)還有一篇“問(wèn)題匯總”，之后會(huì)整理一些最近兩年的B端項(xiàng)目發(fā)布，感謝大家支持??！

其余篇章，可點(diǎn)擊主頁(yè)觀看??！

藍(lán)藍(lán)設(shè)計(jì)(www.zhengchang8.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。

作者：張陽(yáng)光Designer
鏈接：https://www.zcool.com.cn/article/ZMTU5OTM4OA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

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

112024-1

探索家居之美：巧妙裝修設(shè)計(jì)點(diǎn)亮生活空間

前端達(dá)人

在現(xiàn)代生活中，家不僅是我們居住的地方，更是承載夢(mèng)想、情感和溫馨的港灣。精心的裝修設(shè)計(jì)不僅可以為家增色添彩，更能為居住者創(chuàng)造出宜人舒適的生活環(huán)境。本文將探討一些巧妙的裝修設(shè)計(jì)理念，點(diǎn)亮居家生活空間。

1. 創(chuàng)意空間布局

裝修設(shè)計(jì)的第一步是合理規(guī)劃空間布局。通過(guò)巧妙的布局，可以最大限度地利用空間，使得家居更加通風(fēng)明亮。采用開(kāi)放式設(shè)計(jì)或者巧妙的隔斷，打破傳統(tǒng)的界限，使得家居更具動(dòng)感和靈活性。

2. 色彩搭配的魅力

色彩是裝修設(shè)計(jì)中的靈魂。巧妙的色彩搭配能夠?yàn)榧易⑷牖盍蛡€(gè)性。根據(jù)不同房間的功能和居住者的喜好，選擇合適的色調(diào)，營(yíng)造出溫馨、舒適或者活潑的氛圍。同時(shí)，考慮光線的影響，讓色彩更加生動(dòng)。

3. 自然元素的融入

自然元素是現(xiàn)代裝修設(shè)計(jì)中備受推崇的要素之一。通過(guò)引入植物、木材等自然元素，可以為家?guī)?lái)清新的空氣和寧?kù)o的氛圍。綠色植物不僅美化環(huán)境，還有助于調(diào)節(jié)室內(nèi)空氣質(zhì)量，使居住更加健康。

4. 定制化家具的個(gè)性

定制化家具是打造獨(dú)特家居的重要途徑。根據(jù)家居空間的尺寸和個(gè)人需求，選擇定制家具，既可以充分利用空間，又能體現(xiàn)個(gè)性。獨(dú)特設(shè)計(jì)的家具不僅美觀實(shí)用，更是家的象征。

5. 光影設(shè)計(jì)的藝術(shù)

光影設(shè)計(jì)是裝修中的一門(mén)藝術(shù)。巧妙的燈光設(shè)計(jì)能夠調(diào)整空間氛圍，營(yíng)造出溫馨、浪漫或者專注的氛圍。選擇合適的照明設(shè)備，根據(jù)房間的功能和布局，設(shè)計(jì)出有層次感的光影效果。

6. 智能家居的未來(lái)

隨著科技的不斷發(fā)展，智能家居已經(jīng)成為現(xiàn)代家居設(shè)計(jì)的新趨勢(shì)。智能化的家居設(shè)備可以為生活帶來(lái)更多便利，通過(guò)智能家居系統(tǒng)，可以實(shí)現(xiàn)家居的智能化控制，提升居住的舒適度和便捷性。

結(jié)語(yǔ)：設(shè)計(jì)家，添彩生活

家，是一個(gè)溫馨的港灣，也是生活的舞臺(tái)。通過(guò)巧妙的裝修設(shè)計(jì)，我們可以在家中創(chuàng)造出一個(gè)令人陶醉的生活空間。創(chuàng)意的布局、色彩的搭配、自然元素的融入，都是點(diǎn)亮家居的法寶。在設(shè)計(jì)的過(guò)程中，發(fā)揮想象力，打破傳統(tǒng)，定制個(gè)性化的家具，讓每一個(gè)空間都成為藝術(shù)的延伸。通過(guò)裝修設(shè)計(jì)，我們可以感受到家的溫暖，生活也因此變得更加豐富多彩。

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

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

112024-1

探索UI設(shè)計(jì)的奇妙世界：創(chuàng)新、美感與用戶體驗(yàn)

前端達(dá)人

在數(shù)字化的時(shí)代，用戶界面（UI）設(shè)計(jì)已經(jīng)超越了簡(jiǎn)單的美觀外觀，它成為了數(shù)字產(chǎn)品成功的關(guān)鍵因素之一。一個(gè)令人愉悅、易用的UI設(shè)計(jì)不僅吸引用戶，更能夠幫助品牌在競(jìng)爭(zhēng)激烈的市場(chǎng)中脫穎而出。在本文中，我們將深入探討UI設(shè)計(jì)的奇妙世界，探討創(chuàng)新、美感與用戶體驗(yàn)的重要性。

1. 創(chuàng)新引領(lǐng)潮流

UI設(shè)計(jì)的核心是創(chuàng)新。通過(guò)引入獨(dú)特的設(shè)計(jì)元素、交互方式和動(dòng)效，設(shè)計(jì)師們能夠打破傳統(tǒng)界限，創(chuàng)造出令人驚艷的用戶體驗(yàn)。在設(shè)計(jì)過(guò)程中，考慮用戶的需求和行為，將創(chuàng)新融入產(chǎn)品，使用戶感受到與眾不同的數(shù)字世界。

2. 美感與品牌形象

美感是UI設(shè)計(jì)的靈魂。吸引用戶的第一眼往往決定了他們是否愿意留下并繼續(xù)使用產(chǎn)品。精心設(shè)計(jì)的顏色搭配、字體選擇以及圖形元素，不僅構(gòu)建了令人難以忘懷的用戶界面，也能夠加強(qiáng)品牌形象。一致的設(shè)計(jì)語(yǔ)言和品牌標(biāo)識(shí)，將品牌的價(jià)值傳遞給用戶。

3. 用戶體驗(yàn)的黃金法則

用戶體驗(yàn)（UX）是UI設(shè)計(jì)的至高追求。一個(gè)優(yōu)秀的UI設(shè)計(jì)應(yīng)當(dāng)始終以用戶為中心，關(guān)注用戶需求、習(xí)慣和心理。簡(jiǎn)潔而直觀的界面、合理的信息架構(gòu)以及高效的操作流程，都是提高用戶體驗(yàn)的關(guān)鍵因素。通過(guò)不斷優(yōu)化用戶的互動(dòng)過(guò)程，提升用戶的滿意度和忠誠(chéng)度。

4. 響應(yīng)式設(shè)計(jì)的未來(lái)趨勢(shì)

隨著移動(dòng)設(shè)備的普及，響應(yīng)式設(shè)計(jì)成為了不可忽視的趨勢(shì)。UI設(shè)計(jì)師需要考慮不同設(shè)備上的顯示效果，確保用戶在不同屏幕尺寸上都能獲得一致而流暢的體驗(yàn)。這不僅提高了用戶滿意度，也有助于網(wǎng)站在搜索引擎中的排名。

5. 數(shù)據(jù)驅(qū)動(dòng)的優(yōu)化

UI設(shè)計(jì)不僅僅是一門(mén)藝術(shù)，更是一門(mén)科學(xué)。通過(guò)使用數(shù)據(jù)分析工具，設(shè)計(jì)師可以深入了解用戶行為、流量和互動(dòng)。這些數(shù)據(jù)可以為設(shè)計(jì)優(yōu)化提供有力的依據(jù)，幫助設(shè)計(jì)師更好地了解用戶需求，不斷改進(jìn)和優(yōu)化界面。

結(jié)語(yǔ)：設(shè)計(jì)的魔力

UI設(shè)計(jì)是數(shù)字產(chǎn)品成功的關(guān)鍵之一。在競(jìng)爭(zhēng)激烈的市場(chǎng)中，一個(gè)創(chuàng)新、美觀且用戶體驗(yàn)出色的UI設(shè)計(jì)能夠讓產(chǎn)品脫穎而出。通過(guò)將創(chuàng)新、美感和用戶體驗(yàn)融入設(shè)計(jì)的每個(gè)層面，設(shè)計(jì)師們可以引領(lǐng)品牌進(jìn)入數(shù)字化的未來(lái)，為用戶創(chuàng)造出令人愉悅的、難以忘懷的數(shù)字體驗(yàn)。在這個(gè)數(shù)字化的奇妙世界里，UI設(shè)計(jì)是連接品牌和用戶的橋梁，也是探索數(shù)字創(chuàng)新的引導(dǎo)者。

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

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

052024-1

ui表單驗(yàn)證問(wèn)題

前端達(dá)人

首先展示正確的格式(以驗(yàn)證是否為空為例):

html代碼塊:

<el-form :model="nodeName(數(shù)組名)" ref="nodeName(數(shù)組名)">
<el-form-item prop="name(數(shù)組內(nèi)的屬性)" label="內(nèi)容:" :rules="[{ required: true, message: '不能為空'}]">
<el-input type="name(數(shù)組內(nèi)的屬性)" v-model="nodeName.name(數(shù)組內(nèi)的屬性)"></el-input>
</el-form-item>
</el-form>

js代碼塊:

data(){
return{
// 表單
nodeName:{
name:''
}
}
},

前端展示(輸入內(nèi)容后顯示為空消失):

下面開(kāi)始總結(jié)常見(jiàn)的問(wèn)題以及功能失效的原因.

1. input左側(cè)出現(xiàn)星號(hào),內(nèi)容為空卻不提醒

原因:已經(jīng)寫(xiě)好了驗(yàn)證功能,但是沒(méi)有綁定到input框 .

解決方法:是<el-form-item>標(biāo)簽加入prop="數(shù)組內(nèi)要驗(yàn)證的屬性"或者<el-input>標(biāo)簽中加入type="數(shù)組內(nèi)要驗(yàn)證的屬性".

2.input框里已經(jīng)有內(nèi)容,但還是顯示不能為空

(一)原因:input有數(shù)據(jù),但是表單沒(méi)有驗(yàn)證到.

解決方法:給<el-form>綁定整個(gè)數(shù)組.v-model="newName".

(二)原因:表單驗(yàn)證綁定的不是數(shù)組,只是一個(gè)單純的ojbect或者number或者char類型

如此種情況,無(wú)論輸入什么都會(huì)提示為空.

解決方法:將綁定驗(yàn)證內(nèi)容變成數(shù)組【也可以把表單驗(yàn)證寫(xiě)在data里面】

[表單驗(yàn)證只能綁定數(shù)組,如果單純綁定一個(gè)數(shù)值,會(huì)出現(xiàn)驗(yàn)證不到的現(xiàn)象發(fā)生]!!!!!!!!!

3.提交表單按鈕無(wú)法驗(yàn)證以及符合驗(yàn)證的表單內(nèi)容,也就是提交失敗.

此情況一般報(bào)錯(cuò)為兩個(gè):

Element-ui官方樣式表單提交函數(shù)功能是這樣展示的:

newNameBtn(newName) {
this.$refs[newName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},

我們可以看到方法是this.$refs[數(shù)組名].validate(() =>{})或者this.$refs.數(shù)組名.validate(() =>{})這樣一個(gè)函數(shù).

如果你用的html5或者是其他不顯示參數(shù)的集成工具,代碼是這樣的:

并不知道這個(gè)this.$refs有沒(méi)有真正的請(qǐng)求到,如果你用的顯示參數(shù)的集成工具(如phpstorm),如果你的代碼正確,會(huì)這樣顯示:

我們看到會(huì)多顯示一個(gè)callback,這就說(shuō)明this.$refs生效了.

所以不管你使用說(shuō)明軟件寫(xiě)的代碼,如果出現(xiàn)表單驗(yàn)證提交錯(cuò)誤.也就是現(xiàn)實(shí)開(kāi)頭那兩個(gè)錯(cuò)誤.你就先輸入console.log(this.$ref.newName)[此處的newName是你自己綁定的數(shù)組]

看看輸出是一個(gè)對(duì)象還是undefine.顯示這個(gè)對(duì)象說(shuō)明this.$refs.newName請(qǐng)求成功.

如果顯示undefine,可以這樣改正:

(一)你的代碼格式書(shū)寫(xiě)錯(cuò)誤,請(qǐng)比照上文有紅箭頭的圖正確案例改正格式.

(二)你的<el-form>未綁定ref,請(qǐng)給<el-form>標(biāo)簽綁定ref="newName"[此處的newName是你自己綁定的數(shù)組]

出現(xiàn)表單驗(yàn)證錯(cuò)誤先比對(duì)案例 ,然后再按照自己的具體代碼綁定自己的數(shù)據(jù).

[注:Element-ui的表單驗(yàn)證一定是綁定的數(shù)組類型]

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

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

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

052024-1

js判斷屏幕分辨率的代碼

前端達(dá)人

一般我們可以通過(guò)下面的代碼判斷分辨率

復(fù)制代碼代碼如下:
<script language="JavaScript">

</script>

js判斷瀏覽器分辨率

復(fù)制代碼代碼如下:
<script>
function ScreenWidth(){
if (screen.width == 1440){
alert("1440*900");
}else if (screen.width == 800){
alert("800*600");
}else if (screen.width == 1152){
alert("1152*864");
}else {
alert("do not know!");
}
}
</script>
<input type="button" name="" value="fenbianli " οnclick=" ScreenWidth()"/>
內(nèi)容來(lái)自17jquery

說(shuō)明：這段js代碼可改造一下，改為screen.width>=1024 screen.width=800兩種情況

所以我選擇使用下面的代碼：

復(fù)制代碼代碼如下:
if(screen.width>=1440){
alert('寬屏幕可以加載廣告了');
//一些廣告代碼
}

用JS判斷不同分辨率調(diào)用不同的CSS樣式文件

最近看一個(gè)網(wǎng)站，發(fā)現(xiàn)顯示器不同的分辨率，樣式文件調(diào)用的也不一樣，今天寫(xiě)了一個(gè)例子研究一下，
復(fù)制代碼代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<link rel="stylesheet" id="sc" type="text/css" href="css/c1.css"/>
<script type="text/javascript">
window.οnlοad=function(){
var sc=document.getElementById("sc");
var d=document.getElementById("d");
if(screen.width>1024) //獲取屏幕的的寬度
{
sc.setAttribute("href","css/c2.css"); //設(shè)置css引入樣式表的路徑
d.innerHTML = "你的電腦屏幕寬度大于1024，我的寬度是 1200px, 背景色現(xiàn)在是紅色。";
}
else{

sc.setAttribute("href","css/c1.css"); 17jquery.com
d.innerHTML = "你的電腦屏幕寬度小于或是等于1024，我的寬度是 960px, 背景色現(xiàn)在是藍(lán)色。";
}
}
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>

c1.css里面的內(nèi)容

復(fù)制代碼代碼如下:
*{ margin:0; padding:0;}

div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}

c2.css里面的內(nèi)容

*{ margin:0; padding:0;}

div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}

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

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

042024-1

Vue新建項(xiàng)目+git托管+初始配置+項(xiàng)目打包優(yōu)化

前端達(dá)人

1、已全局安裝vue-cli和nodejs（第一次需要）

2、利用Vue-cli創(chuàng)建項(xiàng)目

打開(kāi)項(xiàng)目所在文件夾
vue create ‘項(xiàng)目名’
選擇手動(dòng)配置

babel：js編輯器
typeScript：超集js【需要指定數(shù)據(jù)類型】
PWA：離線可用
Linter/Formatter：約束代碼規(guī)范，配合eslint
unit/e2e testing：測(cè)試
在這里插入圖片描述

3、git遠(yuǎn)程倉(cāng)庫(kù)初始化（創(chuàng)建并添加公鑰，配一次即可）

4、本地項(xiàng)目托管

新建倉(cāng)庫(kù)，給倉(cāng)庫(kù)命名即可，無(wú)任何勾選
第二次新建倉(cāng)庫(kù)，不需要再git全局設(shè)置
已經(jīng)創(chuàng)建了項(xiàng)目，進(jìn)入vscode終端（管理員）（or cmd進(jìn)入項(xiàng)目路徑）
git init
執(zhí)行橙色代碼（第一句表示遠(yuǎn)程倉(cāng)庫(kù)地址，第二句表示首次推送主分支到云端倉(cāng)庫(kù)，origin為云倉(cāng)庫(kù)別名）

在這里插入圖片描述

5、項(xiàng)目文件夾

node_modules:放置項(xiàng)目依賴的地方
public:一般放置一些共用的靜態(tài)資源，包括頁(yè)簽圖標(biāo)、index.html，打包上線的時(shí)候，public文件夾里面資源原封不動(dòng)打包到dist文件夾里面；<%= BASE_URL %>是public所在路徑，使用絕對(duì)路徑

腳手架目錄public和assets區(qū)別：參考鏈接
在這里插入圖片描述

src：程序員源代碼文件夾

assets文件夾：經(jīng)常放置一些靜態(tài)資源（圖片），assets文件夾里面資源webpack會(huì)進(jìn)行打包為一個(gè)模塊（js文件夾里面）
components文件夾:一般放置非路由組件（或者項(xiàng)目共用的組件）
App.vue 唯一的根組件
main.js 入口文件【程序最先執(zhí)行的文件】
babel.config.js:babel配置文件【翻譯官：如ES6翻譯成ES5，兼容好】
package.json：應(yīng)用包配置文件；看到項(xiàng)目描述、項(xiàng)目依賴、項(xiàng)目運(yùn)行指令【項(xiàng)目信息記錄：‘項(xiàng)目身份證’】
package-lock.json: 包版本控制文件
.gitignore: git版本管制忽略的配置
README.md:項(xiàng)目說(shuō)明文件

補(bǔ)充：通過(guò) vue.config.js 可以修改 webpack 的默認(rèn)配置
在這里插入圖片描述

6、初始配置

a. 瀏覽器自動(dòng)打開(kāi)html，vue-cli-service serve --open

在package.json文件中
        "scripts": {
         "serve": "vue-cli-service serve --open",
          "build": "vue-cli-service build",
          "lint": "vue-cli-service lint"
        },

b.關(guān)閉eslint校驗(yàn)工具

創(chuàng)建vue.config.js文件：需要對(duì)外暴露
module.exports = {
   lintOnSave:false,
}

c. src文件夾的別名的設(shè)置【@表示src文件夾，@在"node_modules","dist"不能用】

創(chuàng)建jsconfig.json文件
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

7、后臺(tái)項(xiàng)目的環(huán)境安裝配置；參考黑馬項(xiàng)目

MySQL數(shù)據(jù)庫(kù)；
Node.js環(huán)境【因?yàn)楹笈_(tái)接口依賴Node.js】 Nodejs安裝及環(huán)境配置鏈接
安裝API依賴包；
postman測(cè)試后臺(tái)項(xiàng)目接口：【安裝與使用見(jiàn)連接】
https://blog.csdn.net/m0_61843874/article/details/123324727
https://www.bilibili.com/video/BV1hP4y177gS/?spm_id_from=333.337.search-card.all.click&vd_source=c4d71976fd97f04545873bc4552dfb71
選擇好請(qǐng)求方式；輸入U(xiǎn)RL；body——x-www-form-urlencoded（普通形式輸入請(qǐng)求參數(shù)）

8、清除初始靜態(tài)樣式，梳理app.vue根組件

9、清除初始路由配置；清除初始的路由組件和非路由組件

新建routes.js放路由規(guī)則在這里插入圖片描述

10、生成項(xiàng)目報(bào)告

npm run build  -- --report

11、項(xiàng)目?jī)?yōu)化

Vue項(xiàng)目在執(zhí)行build命令期間中移除所有console.log 鏈接
通過(guò) vue.config.js 可以修改 webpack 的默認(rèn)配置
為開(kāi)發(fā)模式與發(fā)布模式指定不同的打包入口

3.1 打包入口的修改，可以通過(guò) configureWebpack和 chainWebpack節(jié)點(diǎn)來(lái)實(shí)現(xiàn)：

3.2 通過(guò) chainWebpack 自定義打包入口
新建./src/main-prod.js和./src/main-dev.js文件；在vue.config.js進(jìn)行如下配置

chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')
    })
    config.when(process.env.NODE_ENV === 'development',config=>{
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }

通過(guò)externals 加載外部 CDN 資源，對(duì)于externals中的第三方依賴包，在用到依賴包的時(shí)候，會(huì)找window全局對(duì)象上查找并直接使用現(xiàn)成的對(duì)象，能夠讓打包的項(xiàng)目體積更?。?strong>只有production模式才有必要配置externals節(jié)點(diǎn)

第一步：vue.config.js——>配置externals節(jié)點(diǎn)
在這里插入圖片描述

//配置后的vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  // 通過(guò) chainWebpack 為開(kāi)發(fā)模式與發(fā)布模式指定不同的打包入口
  chainWebpack: config => {
    // 發(fā)布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')

   <span class="token comment">// 通過(guò)externals 加載外部 CDN 資源</span>
  config<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'externals'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token literal-property property">vpe</span> <span class="token operator">:</span> <span class="token string">' Vue '</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-router'</span><span class="token operator">:</span> <span class="token string">'VueRouter'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">axios</span><span class="token operator">:</span> <span class="token string">'axios'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">lodash</span><span class="token operator">:</span> <span class="token string">'_'</span><span class="token punctuation">,</span> 
    <span class="token literal-property property">echarts</span><span class="token operator">:</span> <span class="token string">'echarts'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">nprogress</span><span class="token operator">:</span><span class="token string">'NProgress'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-quill-editor'</span><span class="token operator">:</span> <span class="token string">'VueQuillEditor'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

config<span class="token punctuation">.</span><span class="token function">when</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'development'</span><span class="token punctuation">,</span><span class="token parameter">config</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'./src/main-dev.js'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

} })

第二步：導(dǎo)入的樣式表也會(huì)被導(dǎo)入到輸出文件中，導(dǎo)致體積大；臨時(shí)注釋掉main.prod.js中的import的VueQuillEditor樣式表；進(jìn)行如下配置；【注意版本號(hào)】
在這里插入圖片描述
進(jìn)一步添加js文件的CDN引用：

<!-- 富文本編輯器樣式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css"/>

<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue/2.6.14/vue.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/axios/1.3.4/axios.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 富文本編輯器的 js 文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/quill/1.3.7/quill.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

.通過(guò) CDN 優(yōu)化 ElementUl 的打包

第一步：在這里插入圖片描述

<!-- element-ui的樣表文件-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.css" />
    <!-- element-ui的 js 又件-->
    <script src="https://cdn.staticfile.org/element-ui/2.15.13/index.js"></script>

第二步：臨時(shí)注釋掉
// 引入自定義插件（封裝element按需引入模塊）
// import element from ‘./plugins/element’

首頁(yè)內(nèi)容定制（根據(jù)production模式和development模式定制）
不同的打包環(huán)境下，首頁(yè)內(nèi)容可能會(huì)有所不同，我們可以通過(guò)插件的方式進(jìn)行定制；
isProd的值為T(mén)rue表示production模式，為FALSE表示development模式；

第一步：對(duì)vue.config.js中chainWebpack的屬性進(jìn)行調(diào)整：

// 通過(guò) chainWebpack 為開(kāi)發(fā)模式與發(fā)布模式指定不同的打包入口
  chainWebpack: config => {
    // 1、發(fā)布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')

   <span class="token comment">// 通過(guò)externals 加載外部 CDN 資源</span>
  config<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'externals'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token literal-property property">vue</span> <span class="token operator">:</span> <span class="token string">' Vue '</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-router'</span><span class="token operator">:</span> <span class="token string">'VueRouter'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">axios</span><span class="token operator">:</span> <span class="token string">'axios'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">lodash</span><span class="token operator">:</span> <span class="token string">'_'</span><span class="token punctuation">,</span> 
    <span class="token literal-property property">echarts</span><span class="token operator">:</span> <span class="token string">'echarts'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-quill-editor'</span><span class="token operator">:</span> <span class="token string">'VueQuillEditor'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  <span class="token comment">// 不同的打包環(huán)境下，首頁(yè)內(nèi)容可能會(huì)有所不同</span>
  <span class="token comment">// 我們可以通過(guò)插件的方式進(jìn)行定制，根據(jù)isProd的值，來(lái)決定如何染頁(yè)面結(jié)構(gòu)，發(fā)布模式插件配置如下:</span>
  config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'html'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">args</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>isProd <span class="token operator">=</span> <span class="token boolean">true</span>
    <span class="token keyword">return</span> args
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 2、開(kāi)發(fā)模式</span>
config<span class="token punctuation">.</span><span class="token function">when</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'development'</span><span class="token punctuation">,</span><span class="token parameter">config</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'./src/main-dev.js'</span><span class="token punctuation">)</span>

  <span class="token comment">// 不同的打包環(huán)境下，首頁(yè)內(nèi)容可能會(huì)有所不同</span>
  <span class="token comment">// 我們可以通過(guò)插件的方式進(jìn)行定制，根據(jù)isProd的值，來(lái)決定如何染頁(yè)面結(jié)構(gòu)，開(kāi)發(fā)模式插件配置如下:</span>
  config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'html'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">args</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>isProd <span class="token operator">=</span> <span class="token boolean">false</span>
    <span class="token keyword">return</span> args
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

}

第二步：在public/index.html首頁(yè)中，可以根據(jù)isProd的值，來(lái)決定如何染頁(yè)面結(jié)構(gòu)

<title><%=htmlWebpackPlugin.options.isProd?'':'dev-' %>電商后臺(tái)管理系統(tǒng)</title>

<% if(htmlWebpackPlugin.options.isProd){ %>
前面CDN引入的依賴資源（富文本編輯器+elemen-ui）
<% } %>

前面CDN引入的依賴資源（富文本編輯器+elemen-ui），代碼如下：

<link rel="stylesheet" href="/>
<link rel="stylesheet" href=" />
<link rel="stylesheet" href="/>

<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue/2.6.14/vue.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/axios/1.3.4/axios.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 富文本編輯器的 js 文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/quill/1.3.7/quill.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span> 

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> element<span class="token operator">-</span>ui的樣表文件<span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.css"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> element<span class="token operator">-</span>ui的 js 又件<span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/element-ui/2.15.13/index.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

第三步：由于對(duì)首頁(yè)內(nèi)容根據(jù)production模式和development模式進(jìn)行了定制，需要將前面注釋掉的富文本編輯器樣式，以及element-ui樣式引入取消注釋，最終項(xiàng)目會(huì)根據(jù)不同模式展示首頁(yè)

7. 路由懶加載
當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后**[當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件**]，這樣就會(huì)更加高效。

簡(jiǎn)化：
不需要在route.js文件 import UserDetails from ‘./views/UserDetails.vue’；直接路由懶加載
{
name:‘search’, //商品搜索
path:‘/search’,
component:()=>import(‘@/pages/Search’), [路由被訪問(wèn)才加載組件]

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

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

272023-12

【Git】取消上一次commit或push

(轉(zhuǎn)自csdn)

一、取消上一次commit

如果你需要取消上一次的 Git 提交，有幾個(gè)不同的方法可以實(shí)現(xiàn)。其中包括撤消提交、提交到新的分支、使用 Git 回滾等等。

下面介紹三種方法：

方法1：使用 Git reset

使用 Git reset 命令來(lái)取消上一次提交：

git reset HEAD~1

這會(huì)把 HEAD 指針移回上一個(gè)提交（HEAD~1），并清除最后一次提交的內(nèi)容。

或

git reset HEAD^

撤回兩次或者n次

git reset HEAD~2

方法2：使用 Git revert

使用 Git revert 命令來(lái)撤消上一次提交并創(chuàng)建一個(gè)新的提交來(lái)撤消原來(lái)的提交：

git revert HEAD

這會(huì)創(chuàng)建一個(gè)新的提交來(lái)撤消提交之前的更改。在命令行中輸入該命令后，你需要編輯撤消的提交信息，以便 Git 創(chuàng)建一個(gè)新的提交。

方法3：使用 Git checkout

還可以使用 Git checkout 命令來(lái)將工作樹(shù)恢復(fù)到上一次提交的狀態(tài)。這將清除所有未提交的更改，所以請(qǐng)確保你有一個(gè)備份：

git checkout HEAD~1

這會(huì)將工作樹(shù)恢復(fù)到上一次提交的狀態(tài)，也就是你上一次提交之前的狀態(tài)。請(qǐng)注意，這里的修改都將被丟棄。

無(wú)論你使用的是哪種方法，請(qǐng)確保在撤消提交之前首先備份你的工作。這可以幫助你避免在操作過(guò)程中意外刪除無(wú)法恢復(fù)的內(nèi)容。

二、取消上一次push

如果你已經(jīng)push了代碼，并且想要撤回這個(gè)commit，可以通過(guò)以下步驟實(shí)現(xiàn)：

git push --force

首先，在使用git push命令時(shí)，需要加上--force參數(shù)，強(qiáng)制覆蓋遠(yuǎn)程倉(cāng)庫(kù)上已經(jīng)存在的commit。命令如下：

git push --force origin <branch_name>

其中，<branch_name>表示你要撤銷的分支名稱。

git reflog

如果在本地倉(cāng)庫(kù)沒(méi)有回到該commit的上一個(gè)狀態(tài)，需要使用git reflog命令找到該commit的SHA-1值。命令如下：

git reflog

該命令會(huì)列出整個(gè)Git倉(cāng)庫(kù)的提交歷史記錄，包括HEAD指針?biāo)赶虻奶峤缓鸵呀?jīng)被廢棄的提交。

git reset

找到要回到的某個(gè)commit的SHA-1值，然后使用如下命令回到該commit的狀態(tài)：

git reset --hard <commit_SHA-1>

其中，<commit_SHA-1>表示要回到的commit的SHA-1值。

git push --force

然后使用之前的推送命令進(jìn)行推送，添加--force參數(shù)，覆蓋遠(yuǎn)程倉(cāng)庫(kù)的歷史提交記錄。命令如下：

git push --force origin <branch_name>

提醒：使用git push --force命令可能會(huì)導(dǎo)致遠(yuǎn)程倉(cāng)庫(kù)、其他成員的倉(cāng)庫(kù)和歷史版本產(chǎn)生不可逆的影響，因此操作時(shí)需要謹(jǐn)慎。一般情況下，在工作流中使用git revert命令回滾某個(gè)commit，以保證版本控制的完整性和可維護(hù)性。

三、擴(kuò)展

git log 查看提交日志

commit參數(shù)

--mixed

不刪除工作空間改動(dòng)代碼，撤銷 commit，并撤銷 git add . 操作

git reset --mixed HEAD^ 效果等同 git reset HEAD^

--soft

不刪除工作空間改動(dòng)代碼，撤銷commit，不撤銷git add .

--hard

刪除工作空間改動(dòng)代碼，撤銷commit，撤銷git add .

--amend

修改注釋, 進(jìn)入vim編輯器, 改完:wq即可

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

« 1 2 3 4 5 6 7 ... 106 »

日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.zhengchang8.com

首頁(yè)

一、可見(jiàn)性原則

二、貼近現(xiàn)實(shí)場(chǎng)景原則

三、用戶控制和自由原則

四、一致性和標(biāo)準(zhǔn)化原則

五、容錯(cuò)原則

六、易取原則

七、靈活高效原則

八、簡(jiǎn)潔性原則

九、幫助用戶識(shí)別和解決問(wèn)題原則

十、人性化幫助原則

總結(jié)一下

一、內(nèi)容自適應(yīng)的界定

1. 實(shí)時(shí)自適應(yīng)

2. 歷史自適應(yīng)

二、適用場(chǎng)景及案例分析

1. 實(shí)時(shí)自適應(yīng)

2. 歷史自適應(yīng)

三、利弊分析

1. 優(yōu)點(diǎn)

2. 缺點(diǎn)

四、內(nèi)容自適應(yīng)設(shè)計(jì)在金融產(chǎn)品上的應(yīng)用思考

1. 基礎(chǔ)設(shè)計(jì)原則思考

2. 金融產(chǎn)品設(shè)計(jì)思考

五、結(jié)語(yǔ)

一、認(rèn)識(shí)帕累托法則

1. 帕累托法則的背景

2. 正確理解80與20

3. 可適用范圍

4. 設(shè)計(jì)領(lǐng)域中的運(yùn)用

二、產(chǎn)品如何應(yīng)對(duì)80與20

1. 關(guān)鍵性的20%

2. 非關(guān)鍵性的80%

3. 僅關(guān)注 20%有風(fēng)險(xiǎn)

三、在UI設(shè)計(jì)中的運(yùn)用

1. 排版布局（F型）

2. 功能入口設(shè)計(jì)

3. 選項(xiàng)列表設(shè)計(jì)

4. 極簡(jiǎn)風(fēng)格設(shè)計(jì)

四、與其他法則的糾葛

1. 與奧卡姆剃刀的結(jié)合

2. 與長(zhǎng)尾模型的對(duì)抗

五、結(jié)語(yǔ)

一、引言

二、B端組件庫(kù)中的數(shù)據(jù)錄入類組件應(yīng)該如何搭建？如何進(jìn)行多樣化設(shè)計(jì)？

2.1“數(shù)據(jù)錄入”類組件搭建過(guò)程

2.3如何進(jìn)行多樣化設(shè)計(jì)？

三、B端組件庫(kù)中的反饋類組件應(yīng)該如何搭建？有哪些注意事項(xiàng)？常用的場(chǎng)景有哪些？

3.1搭建反饋類組件

3.2注意事項(xiàng)

3.3常用場(chǎng)景

四、B端組件庫(kù)中的導(dǎo)航類組件應(yīng)該如何搭建？有哪些注意事項(xiàng)？常用的場(chǎng)景有哪些？

4.1搭建導(dǎo)航類組件

4.2注意事項(xiàng)

4.3常用場(chǎng)景

五、如何對(duì)“數(shù)據(jù)錄入”、“反饋”、“導(dǎo)航”進(jìn)行C化設(shè)計(jì)？

六、結(jié)束

1. 創(chuàng)意空間布局

2. 色彩搭配的魅力

3. 自然元素的融入

4. 定制化家具的個(gè)性

5. 光影設(shè)計(jì)的藝術(shù)

6. 智能家居的未來(lái)

結(jié)語(yǔ)：設(shè)計(jì)家，添彩生活

1. 創(chuàng)新引領(lǐng)潮流

2. 美感與品牌形象

3. 用戶體驗(yàn)的黃金法則

4. 響應(yīng)式設(shè)計(jì)的未來(lái)趨勢(shì)

5. 數(shù)據(jù)驅(qū)動(dòng)的優(yōu)化

結(jié)語(yǔ)：設(shè)計(jì)的魔力

首先展示正確的格式(以驗(yàn)證是否為空為例):

下面開(kāi)始總結(jié)常見(jiàn)的問(wèn)題以及功能失效的原因.

1. input左側(cè)出現(xiàn)星號(hào),內(nèi)容為空卻不提醒

原因:已經(jīng)寫(xiě)好了驗(yàn)證功能,但是沒(méi)有綁定到input框 .

2.input框里已經(jīng)有內(nèi)容,但還是顯示不能為空

(一)原因:input有數(shù)據(jù),但是表單沒(méi)有驗(yàn)證到.

(二)原因:表單驗(yàn)證綁定的不是數(shù)組,只是一個(gè)單純的ojbect或者number或者char類型

[表單驗(yàn)證只能綁定數(shù)組,如果單純綁定一個(gè)數(shù)值,會(huì)出現(xiàn)驗(yàn)證不到的現(xiàn)象發(fā)生]!!!!!!!!!

3.提交表單按鈕無(wú)法驗(yàn)證以及符合驗(yàn)證的表單內(nèi)容,也就是提交失敗.

(一)你的代碼格式書(shū)寫(xiě)錯(cuò)誤,請(qǐng)比照上文有紅箭頭的圖正確案例改正格式.

一、可見(jiàn)性原則

二、貼近現(xiàn)實(shí)場(chǎng)景原則

三、用戶控制和自由原則

四、一致性和標(biāo)準(zhǔn)化原則

五、容錯(cuò)原則

六、易取原則

八、簡(jiǎn)潔性原則

十、人性化幫助原則

一、內(nèi)容自適應(yīng)的界定

二、適用場(chǎng)景及案例分析

三、利弊分析

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

一、認(rèn)識(shí)帕累托法則

二、產(chǎn)品如何應(yīng)對(duì)80與20

三、在UI設(shè)計(jì)中的運(yùn)用

四、與其他法則的糾葛

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

一、引言

二、B端組件庫(kù)中的數(shù)據(jù)錄入類組件應(yīng)該如何搭建？如何進(jìn)行多樣化設(shè)計(jì)？

三、B端組件庫(kù)中的反饋類組件應(yīng)該如何搭建？有哪些注意事項(xiàng)？常用的場(chǎng)景有哪些？

四、B端組件庫(kù)中的導(dǎo)航類組件應(yīng)該如何搭建？有哪些注意事項(xiàng)？常用的場(chǎng)景有哪些？

五、如何對(duì)“數(shù)據(jù)錄入”、“反饋”、“導(dǎo)航”進(jìn)行C化設(shè)計(jì)？

六、結(jié)束

結(jié)語(yǔ)：設(shè)計(jì)家，添彩生活

1、已全局安裝vue-cli和nodejs（第一次需要）

2、利用Vue-cli創(chuàng)建項(xiàng)目

3、git遠(yuǎn)程倉(cāng)庫(kù)初始化（創(chuàng)建并添加公鑰，配一次即可）

4、本地項(xiàng)目托管

5、項(xiàng)目文件夾

6、初始配置

7、后臺(tái)項(xiàng)目的環(huán)境安裝配置；參考黑馬項(xiàng)目

8、清除初始靜態(tài)樣式，梳理app.vue根組件

9、清除初始路由配置；清除初始的路由組件和非路由組件

10、生成項(xiàng)目報(bào)告

一、取消上一次commit

二、取消上一次push

三、擴(kuò)展