在產品設計領域中，尼爾森設計原則可以說是非常基礎和必備的底層邏輯了。這篇文章，作者重新梳理了10大設計原則，并加以案例講解，希望可以幫到大家。
尼爾森十大設計原則是由著名的用戶體驗專家、網站設計師雅各布·尼爾森（Jakob Nielsen）提出的。這些原則旨在幫助設計師創建更具用戶友好性和易用性的數字產品和網站。
這些原則的來源可以追溯到尼爾森在其著作《使用者體驗的十大原則》（”10 Usability Heuristics for User Interface Design”）中提出的。
1. 信息的可見性
用戶在界面上應該能輕易地看到他們需要的信息。如果信息不直接展示給用戶，那么應通過明顯的提示來指引用戶如何獲取。
例如：如果一個功能可以通過菜單訪問，那么這個菜單的標識和位置應當清晰明確。
2. 反饋的可見性
當用戶與界面進行交互時，系統應該提供及時的、可見的反饋。
例如：當用戶點擊一個按鈕時，按鈕可以顯示不同的視覺效果（如顏色變化、陷入效果等）來告知用戶其操作已被系統識別。
3. 操作的可見性
用戶可用的操作選項應該清晰展示。界面應避免隱藏用戶可能需要的功能。操作的可見性可以通過良好的界面布局和適當的控件選擇來加以增強。
例如：當斷網時，下拉刷新用戶會看的一個情感化加載動畫，提示用戶在加載中。
4. 狀態的可見性
系統的當前狀態應該對用戶是明顯的。
例如：在一個復雜的表單或多步驟流程中，界面應該清楚地顯示當前處于哪一步。這樣用戶可以隨時了解自己的進度和狀態，降低因迷茫而產生的用戶挫敗感。
5. 錯誤的可見性
如果發生錯誤，應該有清楚的錯誤信息顯示給用戶，并且提供簡單的、操作性的建議來解決這些錯誤。錯誤信息應該具體到足夠用戶理解發生了什么問題，并指導他們如何糾正。
例如：我們在輸入密碼的界面時，出現錯誤時會在下方提示當前密碼輸入錯誤，提示引導用戶請輸入數字+符號的組合密碼。
可見性原則在生活中有哪些體現呢？
例如：我們常坐的地鐵到站顯示，乘坐高鐵時的候車室列表，還有去超市買菜時自動結算上顯示的數量金額、計算器等。
1. 模仿真實物體和行為
模仿用戶在現實生活中熟悉的物體和行為，這樣可以使用戶能夠輕松地理解和使用軟件。
例如：將按鈕設計成與現實中的按鈕相似的樣式，讓用戶有按下按鈕的直觀感受。
2. 遵循行業標準和習慣
界面設計應該符合行業內人機交互和設計規范的標準符合用戶的習慣，以減少用戶的認知負擔和學習成本。
例如：將網頁的導航菜單放置在頁面的頂部或側邊，符合用戶對網頁導航的常規期待。
3. 保持一致性
在整個界面中保持一致性，使得用戶在不同部分之間能夠輕松地轉換和理解。這包括一致的布局、一致的交互方式等。一致性可以提高用戶的操作效率，減少錯誤和混淆。
例如：設計中的UI規范，交互樣式保持一致性，書籍畫冊等里面的標題內容字體大小也遵循一致性原則。
4. 提供直觀的反饋
當用戶與界面進行交互時，界面應該提供及時、直觀的反饋，讓用戶清楚地知道他們的操作已被識別和響應。
例如：按鈕被按下時產生的視覺反饋、鏈接被點擊時的狀態變化等。
5. 避免違背用戶期望
界面設計應避免違背用戶的期望和常規操作，否則可能導致用戶的困惑和挫敗感。
例如：點擊一個圖標卻得到了與期望不符的結果，這會讓用戶感到困惑和不滿。
6. 考慮用戶的認知能力和心理模型
設計應該考慮用戶的認知能力和心理模型，（需要根據用戶畫像，數據統計等定義用戶群體，年齡端的不同認知也是不同的），使得界面的布局和功能對用戶來說更加自然和易于理解。
例如：將相關的功能組織在一起，符合用戶的認知結構。
例如：最簡單案例體現，可以從圖標的演變過程就可以感受到，從真實生活中的電話演變成圖標，一直到現在的扁平化顯示的電話圖標。
貼近現實場景在生活中有哪些體現呢？
例如：我們生活中的汽車發展過程，從蒸汽汽車，到油車再到現在的新能源汽車，一直在變的是外觀和里面的內飾，不變的是在大家受環境影響認知里的東西，四個輪子大家很容易就想到車。
1. 提供明確的操作選項
界面應該提供清晰明確的操作選項，讓用戶知道可以做什么以及如何做。
例如：在編輯界面中，應該明確標識出保存、撤銷、刪除等操作按鈕，讓用戶知道可以進行哪些操作。
2. 允許用戶撤銷和返回
用戶應該可以隨時撤銷之前的操作或返回到之前的狀態，而不會造成不可逆的影響。
例如：提供撤銷按鈕、返回按鈕或者多級回退功能，讓用戶可以自由地調整和修正他們的操作。
3. 避免強制性的操作和模式
界面設計應避免強制用戶進行某些操作或者遵循固定的模式。應該給用戶足夠的自由度，讓他們根據自己的需求和偏好來進行操作。
例如：不要強制用戶在注冊時填寫過多的信息，而是提供必填和選填項，讓用戶可以根據自己的情況選擇填寫。
4. 提供明確的退出選項
在界面中應該提供明確的退出選項，讓用戶可以隨時退出當前操作或者返回到上一層級。
例如：在應用程序中提供退出按鈕或者返回到主界面的選項，讓用戶可以方便地退出當前任務或者返回到初始狀態。
5. 防止誤操作的發生
界面設計應該采取措施防止用戶因為誤操作而造成不必要的損失或者困擾。
例如：在危險操作（如刪除文件）前要求用戶確認，以避免誤操作造成的后果。
6. 支持鍵盤快捷鍵和手勢操作
為用戶提供鍵盤快捷鍵和手勢操作的支持，讓他們可以通過更快速和高效的方式來完成操作。這可以提高用戶的操作效率和滿意度，增強用戶的控制感和自由度。
用戶控制和自由原則在生活中有哪些體現呢？
例如：我們經常出去吃飯，有些飯店可能比較火需要進行預約，預約后不想去了可以在軟件上取消也可以打電話取消。我們進行購物時，收到了物品不想要也可以進行退換貨。
1. 一致的布局和樣式
界面中的布局、排版和樣式應該保持一致，讓用戶在不同頁面和功能之間能夠輕松地切換和理解。例如：相似的功能應該采用相似的排列方式和視覺風格，按鈕、導航欄等元素的位置和樣式也應該保持一致。
2. 一致的交互方式
界面中的交互方式和操作流程應該保持一致，讓用戶能夠在不同的功能和場景中使用相似的操作方法。例如：點擊按鈕應該在不同頁面中具有相同的效果，滑動手勢在不同功能中也應該具有相似的操作意義。
3. 遵循標準化設計規范
界面設計應該遵循行業的標準化設計規范，符合用戶的習慣和期望，減少用戶的認知負擔和學習成本。例如：網頁設計中遵循Web Content Accessibility Guidelines（WCAG）等國際標準，移動應用設計中遵循iOS Human Interface Guidelines或Material Design等平臺規范。
4. 統一的圖標和符號
界面中使用的圖標和符號應該統一且易于理解，避免混淆和歧義。例如，使用相同的圖標來表示相似的功能或操作，以便用戶能夠快速識別和理解。例如：手機主題界面的顯示，電話的圖標會從生活中電話提取圖形標識。
5. 保持一致的術語和語言
界面中使用的術語和語言應該保持一致，避免混淆和困惑。
例如：在不同頁面和功能中使用相同的術語和表達方式，以便用戶能夠準確地理解和識別。
6. 反饋一致性
界面中的反饋信息應該保持一致，讓用戶能夠清晰地知道他們的操作已被識別和響應。
例如：成功操作和錯誤操作應該有明確的視覺和語言反饋，以便用戶能夠及時調整和糾正。
一致性和標準化在生活中有哪些體現呢？
例如：我們經常逛的超市或者菜市場都會遵循標準化，相同或相似的商品進行歸類，看起來很整齊方便用戶購買，馬路上的紅綠燈，全國保持一致性降低用戶認知負擔。
1. 提供明確的反饋和指導
當用戶出現錯誤或者不確定性時，界面應該提供明確的反饋和指導，讓用戶知道出了什么問題以及如何解決。
例如：當用戶輸入錯誤的密碼時，界面應該明確提示用戶密碼錯誤，并且提供重新輸入或者找回密碼的選項。
2. 允許撤銷和返回
用戶應該可以隨時撤銷之前的操作或者返回到之前的狀態，從而糾正錯誤或者重新開始。
例如：在編輯界面中提供撤銷按鈕或者返回按鈕，讓用戶可以隨時取消之前的操作并且返回到之前的狀態。
3. 避免嚴格的輸入要求
界面設計應該盡量避免嚴格的輸入要求，允許用戶輸入格式的靈活性和容錯性。
例如：在表單輸入時，可以采用自動補全、格式化等技術來輔助用戶輸入，減少用戶的輸入錯誤。
4. 提供輔助和提示
當用戶出現錯誤或者不確定性時，界面應該提供輔助和提示，幫助用戶找到正確的解決方案。例如：在輸入框中提供提示性的文字或者示例，指導用戶如何正確地輸入信息。
5. 減少不必要的強制性操作
界面設計應該盡量減少不必要的強制性操作，避免因為用戶的操作失誤而造成不可逆的影響。例如：在我們進行轉賬操作時要求用戶對轉賬金額進行確認，以避免誤操作造成的損失。
6. 優雅地處理異常情況
當用戶遇到異常情況時，界面應該能夠優雅地處理并給予用戶友好的提示和解決方案。
例如：當網絡連接出現問題時，界面應該顯示友好的錯誤信息，并且提供重試或者刷新的選項。
容錯原則在生活中有哪些體現呢？
例如：想要出去旅游到窗口購票，發現買錯了可以去窗口找工作人員改簽，或退票重新購買，這時工作人員會二次確認是否改簽，用戶回答確定，改簽成功。因為天氣原因造成的列車無法發車，會提示用戶進行退票或改簽操作。
1. 簡化操作流程
界面設計應該盡量簡化操作流程，減少不必要的步驟和冗余的操作，讓用戶能夠更快速地完成任務。
例如：在購物網站中，簡化下單流程，減少用戶填寫信息的步驟。
2. 提供直接的路徑
界面應該提供直接的路徑讓用戶達到目標，不需要經過多次點擊或者瀏覽。
例如：在網頁中提供明顯的導航鏈接，讓用戶可以直接跳轉到所需的頁面。
3. 減少用戶輸入
盡量減少用戶需要輸入的信息和數據，采用自動填充或者預設數值的方式來簡化用戶操作。
例如：在搜索框中提供模糊搜索提示的功能，減少用戶輸入的工作量。
4. 提供明確的標識和提示
界面上的按鈕、鏈接和標識應該清晰明確，讓用戶一眼就能看出其功能和作用。同時，界面應該提供明確的提示和指導，引導用戶完成操作。
例如：在網頁中使用明顯的按鈕和圖標來表示可點擊的功能，同時提供鼠標懸停提示來解釋按鈕的作用。
5. 響應迅速
界面的響應速度應該盡量快速，減少用戶等待的時間。
例如；當用戶點擊按鈕或者鏈接時，界面應該立即給出反饋，讓用戶知道其操作已被識別。
6. 符合用戶期望
界面設計應符合用戶的期望和習慣，讓用戶能夠直觀地理解界面上的布局和功能。
例如：將相關的功能組織在一起，符合用戶的認知結構。
易取原則在生活中有哪些體現呢？
例如：現在一些大型超市購物時提供自動掃碼結算的機器，減少用戶的等待時間，響應速度快，還有快捷刷臉支付（手機沒有帶也可以支付喲）用戶可以很直觀的進行支付。
1.支持多種操作方式
界面設計應該支持多種操作方式，讓用戶可以根據自己的習慣和偏好選擇最適合自己的方式進行操作。
例如：提供鍵盤快捷鍵、手勢操作、語音控制等多種方式。
2. 自適應和響應式設計
界面設計應該具有自適應和響應式的特性，能夠適應不同設備和屏幕尺寸的顯示，并且在不同分辨率下保持良好的布局和可用性。這樣用戶可以在任何設備上以相似的方式進行操作。
例如：我們常見的PC端網站會根據屏幕尺寸的不同響應式布局（Behance、花瓣等網站）。
3. 提供個性化的設置和選項
界面應該提供個性化的設置和選項，讓用戶可以根據自己的需求和偏好進行定制。
例如，允許用戶自定義界面的布局、顏色主題、字體大小等。
4. 支持快速導航和查找
界面設計應該支持快速導航和查找功能，讓用戶能夠迅速找到所需的信息和功能。
例如：提供搜索框和過濾選項，讓用戶可以快速定位到目標內容。
5. 減少不必要的點擊和步驟
界面設計應盡量減少不必要的點擊和步驟，簡化操作流程，提高用戶的操作效率。
例如：采用一鍵下單的方式，減少用戶提交訂單的步驟。
6. 提供即時反饋和狀態更新
界面設計應該提供即時的反饋和狀態更新，讓用戶清楚地知道他們的操作已被識別和響應。這樣可以提高用戶的操作效率和滿意度。
例如：當用戶提交表單或者完成購買時，界面應該立即顯示成功的反饋信息。
靈活高效原則在生活中有哪些體現呢？
例如：火鍋在選擇上提供了多種口味的美食，一口鍋全都煮了，用戶也可以根據自己口味不同進行調料，做的比較哇塞的火鍋店，還會貼上不同口味的搭配引導，對于第一次或不經常吃火鍋店用戶就很友好，食物放進火鍋里會通過食材的顏色或軟硬程度辨別是否熟了，給到用戶反饋可以吃咯。
1. 去除冗余信息
界面設計應該去除不必要的冗余信息，只保留核心和重要的內容，以減少用戶的干擾和混亂。例如：去除重復的導航鏈接、無關的廣告等。
2. 簡化布局和排版
界面的布局和排版應該簡潔明了，避免過多的裝飾和復雜的結構，以提高用戶的閱讀和理解效率。
例如：采用簡單的網格布局，保持頁面的整潔和清晰。
3. 提煉核心功能
界面設計應該將核心功能突出顯示，讓用戶一目了然地找到所需的功能和信息。不必要的功能應該隱藏或者移除，以減少用戶的選擇困難和認知負擔。
例如：商品頁面，商品名稱、信息、價格、快捷加入購物車、買幾份這種功能就放在了下一個頁面減少對用戶的干擾。
4. 簡化操作流程
操作流程應該簡化至最少的步驟，避免不必要的點擊和跳轉，提高用戶的操作效率。
例如：采用一鍵式操作，減少用戶提交訂單的步驟。
5. 清晰明了的語言和標識
界面中使用的語言和標識應該清晰明了，避免歧義和混淆。按鈕、鏈接等元素的標識應該直接表達其功能，讓用戶一目了然。
6. 精簡視覺元素
視覺元素應該精簡，避免過多的裝飾和復雜的效果，以保持界面的干凈和清晰。顏色、字體、圖標等元素的使用應該簡潔大方，突出重點。
7. 提供幫助和指導
界面設計應該提供必要的幫助和指導，讓用戶能夠快速了解界面的使用方法和操作流程。但是這些幫助信息也應該簡潔明了，避免過多的文字和復雜的說明。
簡潔性原則在生活中有哪些體現呢？
例如：商場的逃生通道標識，辦公室滅火器都會放在比較容易看到的地方，經常坐地鐵的時候指引箭頭就很符合簡潔性原則，不需要放過多的解釋說明文案，大家都可以看懂具備什么含義。
1. 提供清晰的幫助文檔和說明
界面設計應該提供清晰明了的幫助文檔和說明，讓用戶能夠快速找到解決問題的方法和答案。這些文檔和說明應該簡潔明了，避免使用過多的專業術語和復雜的語言。
2. 實時反饋和指導
界面應該提供實時的反饋和指導，讓用戶知道他們的操作是否成功，以及如何繼續下一步。例如，在表單輸入時實時檢查格式是否正確，并給予相應的提示。
3. 提供可搜索的幫助資源
界面設計應該提供可搜索的幫助資源，讓用戶能夠快速找到所需的信息和解決方案。這些幫助資源可以包括常見問題解答、在線幫助文檔、視頻教程等。
4. 友好的錯誤提示和解決方案
當用戶遇到錯誤或者問題時，界面應該給予友好的錯誤提示和解決方案，讓用戶知道發生了什么問題以及如何解決。錯誤提示應該具體明了，避免使用晦澀難懂的術語。
5. 提供在線支持和反饋渠道
界面設計應該提供在線支持和反饋渠道，讓用戶能夠隨時聯系到客戶服務團隊并獲得幫助。這些支持和反饋渠道可以包括在線聊天、電子郵件支持、社區論壇等。
6. 優化用戶體驗和流程設計
界面設計應該優化用戶體驗和流程設計，減少用戶可能遇到的問題和困難。例如，簡化操作流程、提供明確的導航和引導、避免技術性障礙等。
7. 持續改進和優化
界面設計團隊應該持續改進和優化界面，根據用戶的反饋和需求不斷調整和改進設計方案，以提高用戶的滿意度和體驗質量。
幫助用戶識別和解決問題原則在生活中有哪些體現呢？
例如：我們在印刷書籍時，印刷廠會給我們講解紙張的尺寸，材質，類型、價格等，幫助我們了解和選擇適合的印刷品。
1. 溫馨的語言和表達
界面設計應該使用溫馨、友好和人性化的語言和表達方式，讓用戶感到被關心和被尊重。
例如：在錯誤提示和幫助文檔中使用親切的語氣和表達方式。
2. 關注用戶情感和需求
界面設計應該關注用戶的情感和需求，根據用戶的心理和情感狀態來設計界面和提供幫助。
例如：在用戶遇到困難或者錯誤時，表達理解和支持，提供鼓勵和安慰。
3. 個性化的幫助和支持
界面設計應該提供個性化的幫助和支持，根據用戶的偏好和習慣來提供定制化的解決方案。
例如：根據用戶的歷史操作記錄和偏好，推薦相關的幫助文檔或者解決方案。
4. 及時的反饋和回應
界面應該及時地回應用戶的需求和問題，給予及時的反饋和解決方案。
例如：提供實時的在線支持和反饋渠道，讓用戶能夠隨時聯系到客戶服務團隊。
5. 鼓勵和獎勵用戶行為
界面設計應該鼓勵和獎勵用戶的積極行為，增強用戶的參與和忠誠度。
例如：通過積分系統或者優惠活動來獎勵用戶的購買行為和參與度。
6. 提供愉快的體驗
界面設計應該提供愉快和愉悅的使用體驗，讓用戶感到舒適和愉快。
例如：通過動畫、音效等方式增強界面的趣味性和互動性，讓用戶感到愉悅和享受。
7. 尊重用戶隱私和權利
界面設計應該尊重用戶的隱私和權利，保護用戶的個人信息和數據安全。
例如：明確告知用戶數據的使用目的和范圍，遵守相關的隱私政策和法律法規。
人性化幫助原則在生活中有哪些體現呢？
例如：人行道上的盲道，看新聞時的手語講解介紹，都是比較人性化的一部分，還有賣的老年機等等。
關于尼爾森十大設計原則包括可見性、反饋、控制性、一致性、容錯、簡潔性、靈活高效、幫助用戶識別和解決問題、人性化幫助、用戶控制和自由。
以下為此原則優點詳解：
1.提高用戶體驗質量： 這些原則旨在提高用戶對產品的整體感受和滿意度，使用戶更愿意使用并持續與產品互動。
2.降低學習成本： 設計原則的一致性和可見性幫助用戶更快地熟悉界面，減少了學習新功能的時間和認知負擔。
3.增強用戶參與度： 提供了用戶控制和自由的原則，使用戶感到更加投入和自主，從而增強了其對產品的參與度。
4.提升用戶效率： 設計原則的靈活高效性使用戶能夠更快速地完成任務，提高了用戶的工作效率和操作效率。
5.減少用戶錯誤： 容錯性原則和幫助用戶識別和解決問題的原則有助于減少用戶的錯誤操作，提高了用戶的成功率。
6.簡化用戶交互： 一致性、簡潔性和靈活高效性設計原則簡化了用戶與產品之間的交互，使用戶界面更加直觀和易于理解。
7.增強產品的競爭力： 設計原則的綜合應用使得產品更具有吸引力和競爭力，有助于產品在市場中脫穎而出。
8.提高用戶忠誠度： 人性化幫助和用戶控制和自由原則增強了用戶對產品的信任和忠誠度，使用戶更愿意選擇并長期使用產品。
9.節約資源成本： 通過降低用戶錯誤和提高用戶效率，可以減少用戶的時間和精力成本，從而節約了資源成本。
10.適應不同用戶群體： 這些設計原則的靈活性和人性化幫助原則使得產品能夠適應不同用戶群體的需求和偏好，從而擴大了產品的受眾范圍。
參考文獻：
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
專欄作家
南設，公眾號：南設（ID：NANSHE18），人人都是產品經理專欄作家。專注設計，邏輯性強，注重體驗。分享體驗設計、人工智能開發等。
原文鏈接：https://www.woshipm.com/share/6064709.html
本文原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微（藍藍設計）www.syprn.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發
前人留下的一些設計原則能夠幫助我們更好地進行頁面以及產品的設計，讓用戶有更好的體驗。本文對帕累托法則進行了介紹，希望能幫助大家在以后的設計中更好的理解與運用。
威廉·斯特倫克（William Strunk）說過：“優秀的設計師有時會無視設計法則，但當他們這樣做的時候，通常會有一些補償性的措施，除非你確定你能做得那么好，否則最好還是遵守這些法則”，所以設計師需要對一些通用性的法則有所理解，做好相應的知識儲備，以便在需要時從中找尋相通的規律和事務的本源。
設計常常是以一種美觀且富有規律的形態出現，不論大家是何種姿態、什么樣的知識背景，一旦踏入設計領域之后就會忍不住的去尋求設計法則，探索期背后的設計規律，因此經過長期沉淀，一些大佬和前輩們留下了大量的通用設計法則。
今天，筆者就說說帕累托法則，希望能幫助大家在以后的設計中更好的理解與運用。
19世紀末，意大利經濟學家和工程師維爾弗雷多·帕累托（Vilfredo Pareto）發現，自家花園中80%的豌豆產自于20%的豌豆莢，在隨后研究土地所有權和財富不平等的問題中，再次發現意大利 80%的土地屬于 20%的人。
20世紀初，由管理學家約瑟夫·朱蘭（Joseph Juran）將其命名為帕累托法則，即80%的結果是20%的原因造成的，并且號召關注「重要的少數」而不是在「瑣碎的多數」當中投注精力。后續在經濟學中得出結論（80%的財富掌握在20%的人手里）更加證實了帕累托法則的觀點。
帕累托法則有很多不同的叫法，如帕列托法則、關鍵少數法則、二八法則、巴萊特定律、最省力的法則、不平衡原則等，后續筆者將其稱為「80/20法則」。
其實，80/20法則是一個較為抽象的概念，可以理解為：大部分的效果由少數幾項關鍵的因素來決定。在實際的場景中，“大部分”不是精確的80%，“幾項關鍵因素”也不是固定的20%，數據會有所浮動，可能是70%+30%或者90%+10%，但不管這些數字如何波動，其背后蘊含的規律（集中的投入將產出大于預期的結果）是不變的，并且生活中存在的許多不平衡現象，都與這個規律相當接近。
80/20法則并不受人為直接控職，更多時后是自然而然的形成，其適用領域非常廣泛。早期大多數用于社會、經濟、管理以及工程等領域，而在80年代末就已經有設計師將其設計領域，在各行各業中，已經有大量的案例證明了 80/20原則：
70年代中期出現圖形化界面，而到80年代末，80/20法則就已經被設計師引用在設計規范當中，后續經過不斷的發展及優化，現已深入設計中的方方面面，PM用來處理KPI、UX用來劃分權重、UI用來決策版面布局等。
界面設計中該如何應用80/20法則，這就需要設計師時刻注意如何讓用戶更快找到目標、如何更順暢的完成任務以及如何擁有更愉悅的心理感受。例如80%的用戶只會用到20%的功能，那么設計師就應該將80%的時間、精力集中在這20%的功能上，不斷迎合用戶需求以及使用體驗。
80/20法則能夠幫助我們提供決策思路、梳理設計方向，通過前面的了解，我們應該清楚了產品80%的用戶只會用到20%的功能，而80%的收益也恰恰來自于20%的付費用戶，甚至低于20%。
雖然一直呼吁盡量滿足所有用戶，但產品團隊的重心始終要圍繞著20%來進行，從產品到設計、再到開發測試，都能以此為方向制定問題的解決方案。
任何一款產品都不能忽略主次，每隔一段時間就要重新評估功能價值，以備后續的更新迭代，針對非關鍵性的80%切勿耗費過多的精力，以免喧賓奪主，不僅得到不好的反饋、還會帶來不必要的損失，吃力不討好。
對于已經過期的核心（曾經20%）功能，需要及時降低權重以及精力的消耗，不然即便是掌聲一片、也可能無法變現。
用20%的部分創造80%的價值，并不意味著只關注20%的關鍵性指標、其它的就可以被忽略，這樣做表面上看是挺誘人，但會讓其他很多指標停滯，呈現出產品過度優化的情況，造成短時間內隱藏的負面影響。
團隊應該要有眾覽全局的眼光，考慮到各指標間的相互影響，可視情況而定將時間和精力合理分配，如90%+10%、80%+20%、70%+30%等，只要是將大部分用在關鍵性指標上即可。
在UI設計中，我們會將主要精力花費在20%的頁面設計上，例如APP底部標簽欄的幾大主頁或其它重要的一/二級頁面，會花費更多的心思去構思不一樣的布局、表現手法，將設計功底凸顯出來。而剩下80%的頁面就相對機械化，會使用一些常規樣式以及復用的方式像搭積木一樣快速完成，成本之低、效率之高毋庸置疑。
同一個頁面的設計方式也是如此，設計師將大量心思放在首屏及位置靠上的功能上，待超過一屏后下滑時，設計也會逐漸輕量、組件化，這有助于節省產品、設計、開發更多的時間。
用戶瀏覽屏幕時，眼球移動的順序通常都是從左到右、從上到下（基于網頁瀏覽眼動測試），這種移動軌跡很像字母「F」，這也讓F型布局成為網頁設計中效率最高的方式之一，所以設計師通常會將重要的信息放在左上角或左側，不重要的信息放在右側。
如下面這張眼動測試圖，F型布局也正好詮釋了80/20法則合理性與可行性，在頁面中20%的關鍵區域，吸引了用戶80%的注意力。
很多產品因為業務功能的龐大，一股腦的將信息全部展示出來，看起來十分臃腫，用戶不能快速找到自己想要的信內容，就會失去信心。
優酷APP首頁將熱門頻道和點擊頻率較高的頻道顯示在頂部導航中，如精選、電視劇、電影、最新院線等，而其他更多的分類則隱藏在頻道選項卡中，將少量（≈20%）重要的內容放在明顯的位置，目的就是為了讓大部分用戶更快觸達，提高了產品的易用性。
在一些選項列表中，由于選項數量的龐大，會給用戶增加使用難度。
例如，使用美團購買火車票在選擇地址時，面對超長的地址列表，逐個查看或通過字母篩選，都要花費一定的時間和操作成本，即便可以通過碼字搜索來完成，但因為自行輸入有很多的不可控性，能讓用戶選擇的就不要讓其輸入。
對于地址列表，除開自動定位和搜索歷史，運用80/20法則就能很好的解決這一問題，系統將約20%高頻選擇的熱門城市作為單獨的模塊放在全部列表之前，提高了大部分用戶的搜索效率。
極簡風格的界面設計跟80/20法則在精神上保持著高度的一致，剔除多余、無用的元素，而保留的每一個元素都是有目的、有針對性的，也是絕對必要的存在。在極簡主義設計中，視覺上簡單干凈，大部分都是通過通過留白來襯托關鍵性元素的存在，讓用戶更加聚焦于主要功能/信息。
奧卡姆剃刀指出「如無必要，勿增實體」，需知頁面中每多一個元素都會增加視覺“噪聲”，意味著用戶需要花費額外的時間和理解成本，對用戶體驗的影響是很大的。那么問題來了，當產品需要增加一項需求量小但確實存在的功能，該怎么處理？
這時我們可以將奧卡姆剃刀原則作為最終的評判標準，是否需要增加上述所說的功能，就要看看能否很好的控制團隊開發成本和用戶體驗成本。
其實在80/20法則中，很多小眾但確實存在的功能需求基本很難抵消所造成的用戶體驗損失，所以即便實現了這個需求，也很難分配出20%的精力去維護與迭代，甚至“俺耳盜鈴”般的將其遺忘，但這個視覺“噪聲”一直存在，如果事先能分析出這種結果，這個需求根本不需要增加。
在2004年長尾模型才被提出來的時候，很多人認為這是在顛覆80/20法則，它們的曲線長得很像，但結論完全相反，那條長長的“尾巴”（非關鍵的80%）所占據的長度幾乎與頭部的（關鍵的20%）高度相當，這說明收益雖低，但這么多數量的累積，依然值得重點關注。
所以有很多企業在采集差異化戰略時運用了長尾理論，例如小米搭建的全品類商城用的是長尾理論。
乍一聽好像很有道理，難道80/20法則被推翻了嗎？事實并非如此，長尾理論的成立必須要滿足兩個條件，第一是尾巴真的足夠長（小眾需求確實非常多），第二長尾巴能被用戶發現（龐大的用戶量），這兩個條件缺一不可。例如京東、淘寶、微信、支付寶等，其前提都是建立在大規模、且海量的用戶資源之上，不管多么隱蔽、多小的動能，總能擁有一些不錯的曝光度，所以才能發揮長尾模型的作用。
說道這里，大家應該就明白了，那些中小型的產品對長尾模型大多是望塵莫及，所以在你的產品規模、用戶量沒有達到一定的級別之前，就不要妄捧長尾模型，用好80/20法則就好。
80/20法則在實際工作中是一個相對普遍的定律，它能讓我們靈活思考設計問題，更好的為用戶服務，雖然80/20法則也存在一定的爭議，但還是適用于覺絕大多數的場景，在關鍵時候使用，能幫助我們準確的找到問題點，在有限的時間和精力下快速作出優化決策并、關注核心功能，最終達成目標。
專欄作家
大漠飛鷹；公眾號：能量眼球，人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘，利用設計的手段為受眾用戶帶來更好的體驗，即好看、好用。
本文原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
B端設計的文章和資料參考，缺少系統性的說明，這是我總結第五篇。本文主要闡述——數據錄入&反饋&導航
本文為B端設計組件庫的第五篇、也是組件庫系列的最后一篇，下一篇將更新B端設計中常見的問題合集來結束本系列。
隨著企業對于數字化轉型的需求日益強烈，B端產品的發展也在加速。而B端組件庫，作為產品設計與開發的基礎構建模塊，其重要性不言而喻。在眾多的組件中，“數據錄入”、“反饋”和“導航”是三個關鍵的組成部分，它們在很大程度上決定了產品的用戶體驗和工作效率。本文將對這三個組件進行深入的研究，探索其最佳的設計與實施策略。
2.1.1搭建步驟：
需求分析：首先明確數據錄入的需求，包括需要錄入的數據類型、數據量、頻率等。
設計表單：根據需求設計合適的表單，包括輸入項的類型（文本、數字、日期等）、布局、標簽等。
添加驗證：為了確保數據的準確性，需要為表單添加合適的驗證規則，如必填項、格式驗證等。
考慮用戶體驗：為了提高數據錄入的效率，可以考慮添加一些方便用戶的功能，如自動填充、批量導入等。
測試與迭代：完成設計后，進行用戶測試，根據反饋進行必要的調整和優化。
2.1.2注意事項：
明確性：確保每個輸入項的目的和要求都是清晰的，避免用戶產生困惑或誤解。
友好性：盡量簡化錄入流程，減少不必要的步驟和輸入。提供友好的提示信息和反饋，幫助用戶順利完成錄入。
響應速度：數據錄入過程中，系統的響應速度也是一個重要的考慮因素。確保系統在處理大量數據或復雜操作時仍能保持流暢。
安全性：對于敏感數據的錄入，需要確保系統的安全性，如使用加密技術、防止SQL注入等。
2.1.3常用場景：
用戶注冊：在注冊新用戶時，需要收集用戶的基本信息，如姓名、郵箱、密碼等。
商品管理：在電商或庫存管理系統中，添加或編輯商品信息時需要進行數據錄入。
訂單處理：處理訂單時，需要錄入訂單的相關信息，如客戶信息、商品信息、支付方式等。
數據導入：對于一些已經存在的數據，提供批量導入的功能可以大大提高數據錄入的效率。
報表生成：生成報表時，用戶可能需要輸入一些參數或篩選條件，這也涉及到數據錄入的操作。
進一步提升B端組件庫中“數據錄入”類組件的設計和擴展能力：
1. 增強交互與動效設計 使用明顯的交互動效，如微動畫、過渡效果等，提升用戶輸入時的體驗。 設計清晰的輸入狀態，如聚焦、失焦、有效、無效等，使用戶明確知道當前輸入的狀態。
2. 提供多種輸入格式和單位支持 允許用戶選擇不同的輸入格式，如日期可以選擇“年-月-日”或“月/日/年”等格式。 對于數字輸入，提供多種單位支持，如百分比、貨幣、科學計數等。
3. 設計可擴展的驗證規則系統 提供內置的常見驗證規則，如必填、長度限制、正則匹配等。 允許用戶自定義驗證規則，以滿足特定的業務需求。
4. 支持復雜數據結構輸入 設計支持數組、對象等復雜數據結構的輸入組件。 提供可視化編輯工具，方便用戶直接編輯復雜數據結構。
5. 優化鍵盤導航和快捷鍵支持 允許用戶使用鍵盤快速導航和輸入數據，如使用Tab鍵在字段間切換。 提供常用的快捷鍵支持，如Ctrl+C/V進行復制粘貼。
6. 設計可配置的界面和布局 提供多種預設的界面風格和布局選項。 允許用戶自定義界面元素和布局，以滿足不同的視覺需求。
7. 集成智能提示和自動補全功能 使用機器學習算法為用戶提供輸入建議，減少輸入錯誤。 對于重復輸入的數據，提供自動補全功能，提高輸入效率。
8. 支持多語言和本地化設置 為不同語言和文化背景的用戶提供本地化支持。 允許用戶自定義顯示的語言和格式設置。
9. 建立組件使用分析和反饋系統 收集并分析用戶使用數據錄入組件的數據，了解用戶的真實需求和習慣。 建立用戶反饋系統，及時收集和處理用戶對組件的意見和建議。
在B端組件庫中，反饋類組件是非常重要的一部分，它們用于在必要時向用戶反饋操作結果，做到合理有效的信息傳達。
確定反饋類型：根據需要，確定要使用的反饋類型，如提示、警告、錯誤、成功等。
設計反饋樣式：針對不同類型的反饋，設計相應的視覺樣式，如顏色、圖標、動畫等。
編寫組件代碼：根據設計好的樣式，編寫反饋類組件的代碼，包括HTML結構、CSS樣式和JavaScript交互邏輯。
測試與優化：對編寫好的組件進行測試，確保其在不同瀏覽器和設備上都能正常工作，并根據測試結果進行優化。
反饋一致性：對于同一類型的消息反饋，使用同一類型的組件，以確保用戶在不同場景下獲得一致的體驗。
符合場景：不同的場景使用不同的反饋組件，例如系統主動推送消息類型的使用通知提醒框。
描述精確：合理而精確的消息提示文案描述，可以幫助用戶高效理解。
可關閉性：對于一些非關鍵性的反饋，提供用戶手動關閉的選項，避免打擾用戶。
適應性：確保反饋類組件在不同屏幕尺寸和分辨率下都能正常顯示和工作。
告警提示：當某個頁面需要向用戶提供告警信息時，使用告警提示。通常告警提示在頁面上不會自己消失，用戶可以手動關閉。
全局提示：在當前頁面以輕量級提示方式告知用戶操作的結果，使用全局提示。通常提示框在頁面頂部居中顯示并且會自動消失，不打斷用戶的其他操作行為。
通知提醒框：一般在系統主動推動通知的情況下使用，如服務到期、服務告警等。
加載提示：常用于數據加載中提示、操作中提示，Loading的文案可按照具體場景定義。
對話框：常用于比較強的二次確認彈框提示、或者展示一段比較長的消息。
在B端組件庫中，導航類組件的設計和實現對于用戶體驗和系統效率至關重要。
確定導航結構：根據系統的信息架構和用戶需求，確定導航的結構，如全局導航、局部導航、面包屑導航等。
設計導航樣式：針對不同類型的導航，設計相應的視覺樣式，如顏色、字體、圖標等。
編寫組件代碼：根據設計好的樣式和結構，編寫導航類組件的代碼，包括HTML結構、CSS樣式和JavaScript交互邏輯。
測試與優化：對編寫好的組件進行測試，確保其在不同瀏覽器和設備上都能正常工作，并根據測試結果進行優化。
清晰的信息架構：確保導航的結構能夠清晰地反映系統的信息架構，使用戶能夠快速找到所需的信息。
易于理解：導航的標簽和名稱應使用用戶熟悉的術語，避免使用過于專業的術語或縮寫。
可擴展性：考慮到系統未來的發展，導航結構應具備一定的可擴展性，以便添加新的功能或模塊。
響應式設計：確保導航在不同屏幕尺寸和分辨率下都能正常顯示和工作，提供良好的用戶體驗。
遵循設計規范：參考行業通用的設計規范和最佳實踐，確保導航的設計符合用戶的期望和習慣。
全局導航：適用于整個系統的主導航，通常位于頁面的頂部或側邊，提供對主要功能和模塊的快速訪問。
局部導航：適用于特定頁面或功能的子導航，幫助用戶在該頁面或功能內快速找到所需的信息。
面包屑導航：顯示用戶當前所在的位置，以及從首頁到當前頁面的路徑，方便用戶了解自己的位置和返回上一級頁面。
下拉菜單：當導航項較多時，可以使用下拉菜單進行收納，節省頁面空間并提高用戶體驗。
標簽頁導航：適用于需要同時展示多個內容或功能的場景，用戶可以在不同的標簽頁之間切換以查看或操作不同的內容。
舉例說明：公司內部不同系統，可采用的不同種類菜單導航，均可以設計先行。后續使用可進行調整
對于數據錄入，關鍵在于簡化用戶的輸入過程，同時提供清晰直觀的界面。
例如，可以通過減少不必要的表單字段來簡化錄入流程，使用智能填充來加速輸入過程，并通過即時驗證和友好的錯誤提示來減少用戶的輸入錯誤。此外，考慮到移動設備用戶的增長，優化表單的移動端設計，確保在小屏幕上也能輕松輸入，是至關重要的。這可能意味著增加觸摸友好的元素，如更大的點擊區域和適應屏幕大小的布局。
在反饋方面，提供即時、直觀且情感化的反饋對于增強用戶體驗至關重要。這包括在用戶完成任務或遇到錯誤時提供明確的視覺和文字提示。
例如，操作成功時可以顯示綠色的勾號圖標和正面的消息，而錯誤則可以用紅色的嘆號和說明性的錯誤消息來提示。增加動態反饋，如加載動畫，也可以提高用戶體驗，減少等待時的焦慮感。此外，提供易于訪問的幫助和支持選項，例如在線聊天或用戶論壇，可以幫助用戶在遇到問題時快速找到解決方案。
對于導航，設計的重點是確保用戶能夠直觀地理解如何在應用或網站中移動。
這涉及到創建清晰、一致的導航結構，突出顯示主要功能，并使用易于理解的圖標和標簽。在移動設備上，這可能意味著采用漢堡菜單或底部導航條來節省空間。同時，考慮到個性化的重要性，可以提供自定義選項，讓用戶根據自己的偏好調整導航界面。 綜上所述，C化設計強調的是提高易用性和用戶體驗，使得B端產品在保持專業性和功能性的同時，更貼近最終消費者的使用習慣。
后續還有一篇“問題匯總”，之后會整理一些最近兩年的B端項目發布，感謝大家支持?。?/strong>
其余篇章，可點擊主頁觀看??！
藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發
在現代生活中，家不僅是我們居住的地方，更是承載夢想、情感和溫馨的港灣。精心的裝修設計不僅可以為家增色添彩，更能為居住者創造出宜人舒適的生活環境。本文將探討一些巧妙的裝修設計理念，點亮居家生活空間。
裝修設計的第一步是合理規劃空間布局。通過巧妙的布局，可以最大限度地利用空間，使得家居更加通風明亮。采用開放式設計或者巧妙的隔斷，打破傳統的界限，使得家居更具動感和靈活性。
色彩是裝修設計中的靈魂。巧妙的色彩搭配能夠為家注入活力和個性。根據不同房間的功能和居住者的喜好，選擇合適的色調，營造出溫馨、舒適或者活潑的氛圍。同時，考慮光線的影響，讓色彩更加生動。
自然元素是現代裝修設計中備受推崇的要素之一。通過引入植物、木材等自然元素，可以為家帶來清新的空氣和寧靜的氛圍。綠色植物不僅美化環境，還有助于調節室內空氣質量，使居住更加健康。
定制化家具是打造獨特家居的重要途徑。根據家居空間的尺寸和個人需求，選擇定制家具，既可以充分利用空間，又能體現個性。獨特設計的家具不僅美觀實用，更是家的象征。
光影設計是裝修中的一門藝術。巧妙的燈光設計能夠調整空間氛圍，營造出溫馨、浪漫或者專注的氛圍。選擇合適的照明設備，根據房間的功能和布局，設計出有層次感的光影效果。
隨著科技的不斷發展，智能家居已經成為現代家居設計的新趨勢。智能化的家居設備可以為生活帶來更多便利，通過智能家居系統，可以實現家居的智能化控制，提升居住的舒適度和便捷性。
家，是一個溫馨的港灣，也是生活的舞臺。通過巧妙的裝修設計，我們可以在家中創造出一個令人陶醉的生活空間。創意的布局、色彩的搭配、自然元素的融入，都是點亮家居的法寶。在設計的過程中，發揮想象力，打破傳統，定制個性化的家具，讓每一個空間都成為藝術的延伸。通過裝修設計，我們可以感受到家的溫暖，生活也因此變得更加豐富多彩。
藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計
在數字化的時代，用戶界面（UI）設計已經超越了簡單的美觀外觀，它成為了數字產品成功的關鍵因素之一。一個令人愉悅、易用的UI設計不僅吸引用戶，更能夠幫助品牌在競爭激烈的市場中脫穎而出。在本文中，我們將深入探討UI設計的奇妙世界，探討創新、美感與用戶體驗的重要性。
UI設計的核心是創新。通過引入獨特的設計元素、交互方式和動效，設計師們能夠打破傳統界限，創造出令人驚艷的用戶體驗。在設計過程中，考慮用戶的需求和行為，將創新融入產品，使用戶感受到與眾不同的數字世界。
美感是UI設計的靈魂。吸引用戶的第一眼往往決定了他們是否愿意留下并繼續使用產品。精心設計的顏色搭配、字體選擇以及圖形元素，不僅構建了令人難以忘懷的用戶界面，也能夠加強品牌形象。一致的設計語言和品牌標識，將品牌的價值傳遞給用戶。
用戶體驗（UX）是UI設計的至高追求。一個優秀的UI設計應當始終以用戶為中心，關注用戶需求、習慣和心理。簡潔而直觀的界面、合理的信息架構以及高效的操作流程，都是提高用戶體驗的關鍵因素。通過不斷優化用戶的互動過程，提升用戶的滿意度和忠誠度。
隨著移動設備的普及，響應式設計成為了不可忽視的趨勢。UI設計師需要考慮不同設備上的顯示效果，確保用戶在不同屏幕尺寸上都能獲得一致而流暢的體驗。這不僅提高了用戶滿意度，也有助于網站在搜索引擎中的排名。
UI設計不僅僅是一門藝術，更是一門科學。通過使用數據分析工具，設計師可以深入了解用戶行為、流量和互動。這些數據可以為設計優化提供有力的依據，幫助設計師更好地了解用戶需求，不斷改進和優化界面。
UI設計是數字產品成功的關鍵之一。在競爭激烈的市場中，一個創新、美觀且用戶體驗出色的UI設計能夠讓產品脫穎而出。通過將創新、美感和用戶體驗融入設計的每個層面，設計師們可以引領品牌進入數字化的未來，為用戶創造出令人愉悅的、難以忘懷的數字體驗。在這個數字化的奇妙世界里，UI設計是連接品牌和用戶的橋梁，也是探索數字創新的引導者。
藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計
html代碼塊:
js代碼塊:
前端展示(輸入內容后顯示為空消失):
解決方法:是<el-form-item>標簽加入prop="數組內要驗證的屬性"或者<el-input>標簽中加入type="數組內要驗證的屬性".
解決方法:給<el-form>綁定整個數組.v-model="newName".
如此種情況,無論輸入什么都會提示為空.
解決方法:將綁定驗證內容變成數組【也可以把表單驗證寫在data里面】
此情況一般報錯為兩個:
Element-ui官方樣式表單提交函數功能是這樣展示的:
我們可以看到方法是this.$refs[數組名].validate(() =>{})或者this.$refs.數組名.validate(() =>{})這樣一個函數.
如果你用的html5或者是其他不顯示參數的集成工具,代碼是這樣的:
并不知道這個this.$refs有沒有真正的請求到,如果你用的顯示參數的集成工具(如phpstorm),如果你的代碼正確,會這樣顯示:
我們看到會多顯示一個callback,這就說明this.$refs生效了.
所以不管你使用說明軟件寫的代碼,如果出現表單驗證提交錯誤.也就是現實開頭那兩個錯誤.你就先輸入console.log(this.$ref.newName)[此處的newName是你自己綁定的數組]
看看輸出是一個對象還是undefine.顯示這個對象說明this.$refs.newName請求成功.
如果顯示undefine,可以這樣改正:
[注:Element-ui的表單驗證一定是綁定的數組類型]
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發
一般我們可以通過下面的代碼判斷分辨率
復制代碼 代碼如下:
<script language="JavaScript">
<!-- Begin
function redirectPage() {
var wjb51=screen.width;
var hjb51=screen.height;
alert("經系統檢測，你的屏幕分辨率為 " + wjb51+"*"+ hjb51 + "by 腳本之家17jquery.com");
}
// End -->
</script>
js判斷瀏覽器分辨率
復制代碼 代碼如下:
<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()"/>
內容來自17jquery
說明：這段js代碼可改造一下，改為screen.width>=1024 screen.width=800兩種情況
所以我選擇使用下面的代碼：
復制代碼 代碼如下:
if(screen.width>=1440){
alert('寬屏幕可以加載廣告了');
//一些廣告代碼
}
用JS判斷不同分辨率調用不同的CSS樣式文件
最近看一個網站，發現顯示器不同的分辨率，樣式文件調用的也不一樣，今天寫了一個例子研究一下，
復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</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"); //設置css引入樣式表的路徑
d.innerHTML = "你的電腦屏幕寬度大于1024，我的寬度是 1200px, 背景色現在是紅色。";
}
else{
sc.setAttribute("href","css/c1.css"); 17jquery.com
d.innerHTML = "你的電腦屏幕寬度小于或是等于1024，我的寬度是 960px, 背景色現在是藍色。";
}
}
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>
c1.css里面的內容
復制代碼 代碼如下:
*{ margin:0; padding:0;}
div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}
c2.css里面的內容
*{ margin:0; padding:0;}
div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發
babel：js編輯器
typeScript：超集js【需要指定數據類型】
PWA：離線可用
Linter/Formatter：約束代碼規范，配合eslint
unit/e2e testing：測試
node_modules:放置項目依賴的地方
public:一般放置一些共用的靜態資源，包括頁簽圖標、index.html，打包上線的時候，public文件夾里面資源原封不動打包到dist文件夾里面；<%= BASE_URL %>是public所在路徑，使用絕對路徑
腳手架目錄public和assets區別：參考鏈接
src：程序員源代碼文件夾
補充：通過 vue.config.js 可以修改 webpack 的默認配置
a. 瀏覽器自動打開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.關閉eslint校驗工具
創建vue.config.js文件：需要對外暴露
module.exports = {
lintOnSave:false,
}
c. src文件夾的別名的設置 【@表示src文件夾，@在"node_modules","dist"不能用】
創建jsconfig.json文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}
新建routes.js放路由規則
npm run build -- --report
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')
})
}
第一步：vue.config.js——>配置externals節點
//配置后的vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,
// 通過 chainWebpack 為開發模式與發布模式指定不同的打包入口
chainWebpack: config => {
// 發布模式
config.when(process.env.NODE_ENV === 'production',config=>{
config.entry('app').clear().add('./src/main-prod.js')
<span class="token comment">// 通過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">=></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>
}
})
第二步：導入的樣式表也會被導入到輸出文件中，導致體積大；臨時注釋掉main.prod.js中的import的VueQuillEditor樣式表；進行如下配置；【注意版本號】
進一步添加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"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 富文本編輯器的 js 文件 <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
第一步：
<!-- 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>
第二步：臨時注釋掉
// 引入自定義插件 （封裝element按需引入模塊）
// import element from ‘./plugins/element’
第一步：對vue.config.js中chainWebpack的屬性進行調整：
// 通過 chainWebpack 為開發模式與發布模式指定不同的打包入口
chainWebpack: config => {
// 1、發布模式
config.when(process.env.NODE_ENV === 'production',config=>{
config.entry('app').clear().add('./src/main-prod.js')
<span class="token comment">// 通過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">// 不同的打包環境下，首頁內容可能會有所不同</span>
<span class="token comment">// 我們可以通過插件的方式進行定制，根據isProd的值，來決定如何染頁面結構，發布模式插件配置如下:</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">=></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、開發模式</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">=></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">// 不同的打包環境下，首頁內容可能會有所不同</span>
<span class="token comment">// 我們可以通過插件的方式進行定制，根據isProd的值，來決定如何染頁面結構，開發模式插件配置如下:</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">=></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首頁中，可以根據isProd的值，來決定如何染頁面結構
<title><%=htmlWebpackPlugin.options.isProd?'':'dev-' %>電商后臺管理系統</title>
<!-- 在production模式下isProd = true，會獲取CDN里的依賴資源，development模式下isProd = false，用本地下載的依賴 -->
<% 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"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 富文本編輯器的 js 文件 <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</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">></span>
<span class="token operator"><</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">></span>
<span class="token operator"><</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">></span>
<span class="token operator"><</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">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
第三步：由于對首頁內容根據production模式和development模式進行了定制，需要將前面注釋掉的富文本編輯器樣式，以及element-ui樣式引入取消注釋，最終項目會根據不同模式展示首頁
7. 路由懶加載
當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后**[當路由被訪問的時候才加載對應組件**]，這樣就會更加高效。
簡化：
不需要在route.js文件 import UserDetails from ‘./views/UserDetails.vue’；直接路由懶加載
{
name:‘search’, //商品搜索
path:‘/search’,
component:()=>import(‘@/pages/Search’), [路由被訪問才加載組件]
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發
(轉自csdn)
目錄
如果你需要取消上一次的 Git 提交，有幾個不同的方法可以實現。其中包括撤消提交、提交到新的分支、使用 Git 回滾等等。
下面介紹三種方法：
使用 Git reset 命令來取消上一次提交：
git reset HEAD~1
這會把 HEAD 指針移回上一個提交（HEAD~1），并清除最后一次提交的內容。
或
git reset HEAD^撤回兩次或者n次
git reset HEAD~2
使用 Git revert 命令來撤消上一次提交并創建一個新的提交來撤消原來的提交：
git revert HEAD
這會創建一個新的提交來撤消提交之前的更改。在命令行中輸入該命令后，你需要編輯撤消的提交信息，以便 Git 創建一個新的提交。
還可以使用 Git checkout 命令來將工作樹恢復到上一次提交的狀態。這將清除所有未提交的更改，所以請確保你有一個備份：
git checkout HEAD~1
這會將工作樹恢復到上一次提交的狀態，也就是你上一次提交之前的狀態。請注意，這里的修改都將被丟棄。
無論你使用的是哪種方法，請確保在撤消提交之前首先備份你的工作。這可以幫助你避免在操作過程中意外刪除無法恢復的內容。
如果你已經push了代碼，并且想要撤回這個commit，可以通過以下步驟實現：
首先，在使用git push命令時，需要加上--force參數，強制覆蓋遠程倉庫上已經存在的commit。命令如下：
git push --force origin <branch_name>
其中，<branch_name>表示你要撤銷的分支名稱。
如果在本地倉庫沒有回到該commit的上一個狀態，需要使用git reflog命令找到該commit的SHA-1值。命令如下：
git reflog
該命令會列出整個Git倉庫的提交歷史記錄，包括HEAD指針所指向的提交和已經被廢棄的提交。
找到要回到的某個commit的SHA-1值，然后使用如下命令回到該commit的狀態：
git reset --hard <commit_SHA-1>
其中，<commit_SHA-1>表示要回到的commit的SHA-1值。
然后使用之前的推送命令進行推送，添加--force參數，覆蓋遠程倉庫的歷史提交記錄。命令如下：
git push --force origin <branch_name>
提醒：使用git push --force命令可能會導致遠程倉庫、其他成員的倉庫和歷史版本產生不可逆的影響，因此操作時需要謹慎。一般情況下，在工作流中使用git revert命令回滾某個commit，以保證版本控制的完整性和可維護性。
git log 查看提交日志
不刪除工作空間改動代碼，撤銷 commit，并撤銷 git add . 操作
git reset --mixed HEAD^ 效果等同 git reset HEAD^
不刪除工作空間改動代碼，撤銷commit，不撤銷git add .
刪除工作空間改動代碼，撤銷commit，撤銷git add .
修改注釋, 進入vim編輯器, 改完:wq即可
藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發
GitHub 是一個軟件源代碼托管服務平臺，Linux 上使用的大部分工具都可以在上面獲得。
但是由于 GitHub 的服務器在國外，國內訪問經常出現網絡問題導致訪問失敗，尤其是使用 git clone 對 repo 進行克隆的時候，會經常出現因網絡問題而克隆失敗。
Linux 集群服務器的用戶，在比較難實現科學上網的前提下，對大型 repo 克隆的任務顯得尤為困難，而且想使用 gradle build 的話，git clone 似乎是唯一選擇。
既然 git clone 一兩次不成功，那我就想辦法讓他 clone 到成功為止，于是我就寫了一個循環腳本，將它投遞到計算節點上 24h 運行，直到它克隆成功才結束任務。
以克隆 GATK （repo 大小約 300mb）為例，腳本如下：
#!/bin/bash
#SBATCH --job-name=GitClone #任務名稱
#SBATCH --nodelist=litchi-0-1 #計算節點名稱
#SBATCH --partition=WHEEL #使用 WHEEL 用戶組
#SBATCH --nodes=1 #使用計算節點數量
#SBATCH --ntasks=1 #使用 1 個線程
#SBATCH --mail-type=end #任務結束時發送郵件
#SBATCH --mail-user=***@qq.com #郵箱地址
#SBATCH --output=/home/$USER/Slurm_JobLogs/JobLog_%j_%x.log #標準輸出保存路徑
#SBATCH --error=/home/$USER/Slurm_JobLogs/JobLog_%j_%x.err #標準錯誤保存路徑
#------------------------------------------------------------
# PRINT JOB'S INFORMATION
source /home/$USER/.bashrc
threads=$SLURM_NTASKS
echo "## Job:[$SLURM_JOB_NAME]"
echo "## Node:[$SLURM_NODELIST]"
echo "## CPUs:[$SLURM_NTASKS]"
echo "## Mem:[$SLURM_MEM_PER_NODE]"
echo `date`
echo -e $(printf -- "-%.0s" {1..100})"\n" #cut-off-line
#------------------------------------------------------------
# PATH
repo_url="https://github.com/broadinstitute/gatk.git"
repo_name="gatk"
#------------------------------------------------------------
# SHELL
cd /home/$USER/Accessories/Softwares
while true; do #循環執行任務
git clone $repo_url #執行 git clone
if [ $? -eq 0 ]; then #如果以上命令的退出碼等于 0 (任務成功)
echo "Git clone successful!"
break #則退出循環
else #如果命令的退出碼不等于 0 (任務失敗)
echo "Git clone failed:( Retrying..."
rm -rf ./${repo_name} #則刪除這個repo
sleep 1 #睡眠 1 秒緩沖一下繼續循環
fi
done
#------------------------------------------------------------
# JOB ENDS
echo -e $(printf -- "-%.0s" {1..100}) #cut-off-line
echo "## Runtime:[`sacct -j $SLURM_JOB_ID --format=Elapsed --noheader | awk '{print $1}' | sed -n '2p'`]"
這個腳本的路徑為 ~/Scripts/GitClone_GATK.sh
將任務投遞到計算節點運行：
sbatch ~/Scripts/GitClone_GATK.sh
最終，這個任務運行了 40 次，歷時 13h，終于是克隆成功了！
藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發
藍藍設計的小編 http://www.syprn.cn