在产品设计领域中，尼尔森设计原则可以说是非常基础和必备的底层逻辑了。这篇文章，作者重新梳理了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.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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端项目发布，感谢大家支持！！
其余篇章，可点击主页观看！！
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
在现代生活中，家不仅是我们居住的地方，更是承载梦想、情感和温馨的港湾。精心的装修设计不仅可以为家增色添彩，更能为居住者创造出宜人舒适的生活环境。本文将探讨一些巧妙的装修设计理念，点亮居家生活空间。
装修设计的第一步是合理规划空间布局。通过巧妙的布局，可以最大限度地利用空间，使得家居更加通风明亮。采用开放式设计或者巧妙的隔断，打破传统的界限，使得家居更具动感和灵活性。
色彩是装修设计中的灵魂。巧妙的色彩搭配能够为家注入活力和个性。根据不同房间的功能和居住者的喜好，选择合适的色调，营造出温馨、舒适或者活泼的氛围。同时，考虑光线的影响，让色彩更加生动。
自然元素是现代装修设计中备受推崇的要素之一。通过引入植物、木材等自然元素，可以为家带来清新的空气和宁静的氛围。绿色植物不仅美化环境，还有助于调节室内空气质量，使居住更加健康。
定制化家具是打造独特家居的重要途径。根据家居空间的尺寸和个人需求，选择定制家具，既可以充分利用空间，又能体现个性。独特设计的家具不仅美观实用，更是家的象征。
光影设计是装修中的一门艺术。巧妙的灯光设计能够调整空间氛围，营造出温馨、浪漫或者专注的氛围。选择合适的照明设备，根据房间的功能和布局，设计出有层次感的光影效果。
随着科技的不断发展，智能家居已经成为现代家居设计的新趋势。智能化的家居设备可以为生活带来更多便利，通过智能家居系统，可以实现家居的智能化控制，提升居住的舒适度和便捷性。
家，是一个温馨的港湾，也是生活的舞台。通过巧妙的装修设计，我们可以在家中创造出一个令人陶醉的生活空间。创意的布局、色彩的搭配、自然元素的融入，都是点亮家居的法宝。在设计的过程中，发挥想象力，打破传统，定制个性化的家具，让每一个空间都成为艺术的延伸。通过装修设计，我们可以感受到家的温暖，生活也因此变得更加丰富多彩。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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="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>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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
蓝蓝设计的小编 http://www.lanlanwork.com