首页

Qt 软件开发在桌面端界面设计中的独特优势与局限

杰睿 前端及开发文章及欣赏

在跨平台桌面应用开发的领域,Qt 始终是绕不开的一个名字。作为一个成熟的 C++ 跨平台应用开发框架,Qt 被广泛应用于工业控制、车载系统、金融终端、科研工具等场景。尤其在 桌面端界面设计 方面,Qt 既有难以替代的独特优势,也存在一些局限性。

本文将从 技术特性、界面设计体验、典型应用场景 等角度,解析 Qt 在桌面端 UI 开发中的价值与挑战。


一、Qt 的独特优势

1. 跨平台能力强

Qt 最大的卖点之一就是 “一次开发,多端运行”

  • 支持 Windows、macOS、Linux 等桌面系统;

  • 也可以扩展到嵌入式设备和移动端。

对企业而言,这意味着能节省大量的开发与维护成本。

2. 丰富的 UI 组件库

Qt 自带大量标准化的 UI 控件(按钮、表格、输入框、树形结构等),并且可以通过 Qt WidgetsQt Quick (QML) 快速搭建复杂界面。

相比从零造轮子,Qt 提供的控件能让开发团队快速实现工业级的桌面应用。

3. 高性能与稳定性

Qt 基于 C++,执行效率高,内存管理可控,适合 需要高性能渲染处理大量数据 的桌面应用(如大数据可视化、图形编辑软件)。

4. 与硬件/底层结合紧密

在车载系统、工业设备等场景,Qt 可以很好地调用底层 API 和硬件接口,这让它在嵌入式和桌面端融合应用中具有优势。

5. 成熟的社区与商业支持

Qt 历史悠久,拥有庞大的开发者社区,同时提供商业支持(Qt for Enterprise),对企业项目来说更加可靠。


二、Qt 在桌面端界面设计中的应用亮点

  1. 复杂交互系统
    例如金融交易终端、医疗影像处理软件,需要多窗口、多视图、批量操作,Qt 的组件体系非常适合。

  2. 大数据可视化
    Qt Quick + OpenGL/DirectX 的结合,可以实现高性能的实时数据渲染和图表交互。

  3. 跨平台企业工具
    企业后台管理工具、跨系统的客户端软件,通过 Qt 开发能保证一致的界面体验。


三、Qt 的局限性

1. 学习曲线较陡

Qt 基于 C++,同时涉及 QML、信号与槽机制、资源管理等,初学者需要较长时间适应。相比 Electron 或 Flutter,Qt 的上手门槛更高。

2. 界面美学相对“传统”

Qt Widgets 在 UI 设计上偏向传统桌面风格,如果追求现代化、极简或“网页风”的界面,需要更多自定义工作。虽然 QML 提供了更灵活的界面设计方式,但学习成本更高。

3. 生态与前端框架差距

在界面炫酷效果和前沿 UI 库方面,Qt 生态明显落后于 Web 技术栈(React、Vue、Electron)。想要高度定制化的设计,需要更多开发投入。

4. 部署与体积问题

Qt 应用打包后体积相对较大(因为需要携带运行时库),对轻量化工具或分发场景不够友好。

5. 商业授权成本

Qt 开源版可满足部分需求,但商业项目若要使用完整功能和支持,需要购买授权,成本不低。

 

在桌面端界面设计中,Qt 依然是一个不可忽视的强大工具。它的 高性能、跨平台、丰富组件 让其在 企业级、工业级、科研级应用 中保持优势。

然而,Qt 也面临 UI 现代化不足、学习成本高、商业授权门槛 等局限。

对于软件开发公司来说,选择 Qt 还是其他框架,并不是简单的“技术喜好”,而是要根据 项目需求、目标用户群、性能要求与预算 来综合考量。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。


设计师如何高效对接前端

涛涛 前端及开发文章及欣赏

本文围绕 UI 设计如何实现与前端的无缝对接,确保设计图 100% 还原且减少修改展开,通过实战案例分享了关键方法与注意事项,强调沟通、技术理解及灵活协作的重要性。

解锁盒子模型魔法,让设计稿完美还原

涛涛 前端及开发文章及欣赏

本文围绕盒子模型展开,详细介绍了其概念、与设计还原的关系、开发视角下的应用、原理案例及实际价值,旨在帮助设计师理解并运用盒子模型,实现设计稿的完美还原

我们是如何提升产品设计和开发效率的

涛涛

组件命名需遵循 “位置 / 功能 / 状态” 规则,确保层级清晰。
尺寸扩展时提前规划比例和位置,避免替换后布局错乱。
利用 Sketch 的 “Overrides” 功能快速切换组件内容,提高设计效率。

尼尔森十大设计原则

蓝蓝设计的小编

 

在产品设计领域中,尼尔森设计原则可以说是非常基础和必备的底层逻辑了。这篇文章,作者重新梳理了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。

image.png

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

自适应设计在内容上的应用探索

杰睿

编辑导语:自适应设计指能使界面自适应显示在不同大小终端设备上的设计方式及技术。而内容自适应则需要对用户行为进行预判进而改变设计内容,本文作者将对自适应设计在内容上的应用进行分享,值得阅读学习。

我们一般说的自适应设计,多半指的是界面自适应,即为不同的终端设计不同的界面布局与操作流程。而内容自适应,是一种根据用户标签与操作行为预判用户目标所需页面内容的方式,他的优点是既能预测交互意图,实现信息量的智能输出,同时也能满足不同交互需求,改变界面样式,达到降低人机交互负荷的目的。

以下,是道乐UED团队 基于查阅的资料以及行业的积累,带来的一篇关于内容自适应的分享。

目录:

  1. 内容自适应的界定
  2. 适用场景及案例分析
  3. 利弊分析
  4. 内容自适应设计在金融产品上的应用思考

一、内容自适应的界定

目前自适应界面在内容上的呈现大致包括两种类型:

1. 实时自适应

顾名思义,就是根据用户当下的操作,实时判断用户所需,从而调整不同的信息展示与布局,他的优势在于能尽量减少页面上与用户目标不相关信息的展示,从而提升用户操作的效率与准确度

2. 历史自适应

通过用户标签与过往数据的分析,调整页面内容的展示数量与优先级,仅展示用户感兴趣或可能感兴趣的内容,从而提高用户在使用产品中的转化率。

总的来说,内容自适应更趋向于对用户行为轨迹的纵向思考,将“用户寻找信息”的被动服务模式转化为“信息寻找用户”主动服务模式。满足差异化的用户需求,提升企业系统的用户体验和人性化服务水平。

二、适用场景及案例分析

1. 实时自适应

(1)搜索

① Google搜索

自适应设计在搜索上的应用意味着针对每个用户的每一次搜索,都会产生一个定制的界面,该界面将自身塑造成所显示的信息。请看以下示例:如何根据不同的用例更改搜索结果页面。

最近,Google搜索的设计重点是在用户点击搜索结果之前传递信息。为此,Google采用了一种称为自适应设计的方法。

Google搜索适应用户需求的第一种方法是重新安排导航以适应结果。

  • 在“lizzo”的例子中,搜索框下面的导航是:(按顺序依次为)图片、视频、新闻、购物、更多;
  • 在“tel aviv”的例子中,导航是:新闻、图片、地图、视频、更多;
  • 搜索“aapl”(苹果公司的股票代码),导航显示:金融、新闻、书籍、购物、更多;

Google有362,880种独特的方式来排列导航,以适应搜索查询。然而,自适应设计的最大例子是搜索结果本身的布局。结果页面是完全模块化的:根据搜索结果,不同的元素出现在不同的配置中。

例如,音乐家Lizzo的搜索结果集中在媒体上:一组模块以本机格式显示视频,图片和歌曲。还显示最近的新闻,推文和即将举行的活动,以及指向Lizzo在YouTube、Twitter、Facebook、Instagram和SoundCloud上的个人资料链接。直到页面底部,我们才能看到看起来像传统搜索结果的元素。

另一方面,以色列特拉维夫市的搜索结果为旅行者提供优先信息。图片、地图、当地天气以及与旅行有关的问题(“特拉维夫对游客安全吗?”、“特拉维夫以什么闻名?”)优先于传统搜索结果。模块促进了特拉维夫的活动以及对附近其他城市的推荐。搜索结果页上可能会出现数千个不同的模块,从简单的布局驱动模块到完全独立的应用程序。

例如,“aapl”的搜索结果页上,股票代码模块显示了当前价格和交互式历史价格图。

通过自适应设计,所有有关内容、格式和顺序的决策都是由算法决定的。设计人员的作用不再是创建明确的外部布局。

如今,尖端产品的设计者,以及未来日常产品的设计者,正在就生成这些布局的规则做出决策。

② 淘宝搜索

淘宝搜索结果页,当用户往下滑动查看更多时,系统判断你根据当前搜索页没有找到想要的内容,则根据不同物品展示物品的更细分的筛选,如啤酒会c展示“德国进口啤、国产精酿、比利时精酿”,方便用户找到目标物品。

③ OTA平台PC端(去哪儿、携程等)

携程/去哪儿pc端中,Tab前置条件是国内/国际,在选择国内机票时,默认单程。在选择“国际/港澳台机票”时,则默认机票往返。

这样的功能设置是基于对用户需求的深入研究得出的,主要有以下几个原因:

  • 最优方案不同:国内单程往返的最优方案多半有可能不是一个航空公司,要一个一个查询,(尽管同一航空公司往返有1+1小于2的规则),会对客人更有利,因为经常会出现1+0.5=1.5的情况。国际票往返的最优方案通常还是一家航空公司的便宜,这个基本上是定律,所以这个默认设定是培养消费习惯之举。
  • 使用场景不同:国际机票的使用场景下,大都有明确时间区间,签证限制了用户在国外停留的时间。用户不得不提前计划。且回程可选择交通工具有限。相对而言,国内机票场景较自由,提前计划必要性相对较弱。
  • 观测数据证明:根据同程的国际机票订购数据显示,70%以上的用户选择了往返。

基于以上充分的原因,这个自适应功能设计就得以开发并成功提高用户的使用效率。

(2)根据用户静态标签优化结果

静态标签:用户主动提供的数据, 指用户不变的基础信息,多为用户固定数据,如姓名、性别、年龄、身高、体重、职业、地区、设备信息、来源渠道等。

定位地区:大众点评——切换城市

大众点评的这个功能经常被拿出来说,当你到另一个城市,通过获取定位申请,判断你是来这座城市旅游的场景,从而页面展示中入口就改成了跟旅游相关,这其实也有点内容自适应的意思,通过用户不同的操作展示不同的内容。

2. 历史自适应

历史自适应主要集中在特定领域的个性化界面定制和推荐等方面。针对不同用户呈现不同界面,根据用户的类型、任务特点、喜好等提供不同的界面样式。

(1)根据用户动态/预测标签算法推荐定制内容

预测标签:平台介入的数据,指根据用户在平台内的行为数据对用户未来行为或喜好进行预测;是设计千人千面和运营策略的关键;比如某电商平台,根据用户A“月均消费5单,且有数额过万的运动商品”的购物数据,平台会给用户A打“高频、品质敏感性、运动”的标签,后期会更多推荐高品质运动商品及相关运动品牌活动的精准推送。

用户标签是构成用户画像的核心因素,是将用户在平台内所产生的行为数据,分析提炼后生成具有差异性特征的形容词。即用户通过平台,在什么时间什么场景下做了什么行为,平台将用户所有行为数据提炼出来形成支撑业务实现的可视化信息。

① 用户生产内容(UGC)

互联网上的许多站点开始广泛使用用户生成内容的方式提供服务,许多图片、视频、博客、播客、论坛、评论、社交、Wiki、问答、新闻、研究类的网站都使用了这种方式。

② 电商平台

这种平台一般会随着用户的使用,网站会积累及不断修正及展示最贴近用户喜好的产品,从而进行推荐。功能上适应了用户的喜好,会大大增加用户的粘性。

③ APP Store 应用页面大变动:不同用户可看到不同功能与内容

自定义产品页功能让开发者可以面向不同用户展示 App 的不同功能,产品页优化功能则让开发者们能够测试不同的截屏、预览视频,甚至 App 图标。

苹果指出,得益于 App Store Connect 详实且注重隐私的分析,开发者可以了解自己用户的偏好,从而决定产品页的展示内容。

④ SoulAPP创始人:Sou了APP功能符合不同场景的用户需求

SoulAPP多种匹配机制,功能符合不同场景的客户需求。Soul利用AI大数据,依照性格、兴趣等因素,划分用户。通过这种精准的方式分类用户,以便用户之间能够更高效地建立连接。第一次注册SoulAPP,用户需要通过系统的一些答题测试,以便于生成符合自己的性格报告。接着就是通过上述数据采集,划分专属圈子,这里就是大家经常说的“星球“,这些都是基于SoulAPP的AI功能。

三、利弊分析

1. 优点

  • 增强用户体验:自适应界面不能让用户控制自适应过程。对用户动机准确的判断和对应的自适应设计能有效简短交互路径,优化用户的交互体验。
  • 增强用户粘性:基于精准人群的需求分析和功能设计,更容易得到用户认可,更容易打造产品亮点,提供精准个性化的服务,比如对于社区产品,内容个性化推荐将有效提升社区粘度。
  • 利于公司可持续发展:一方面使公司更具竞争壁垒,及时洞察市场风向,预测产品所占市场规模及前景发展,及时优化公司战略,避免过早陷入发展瓶颈;另一方面沉淀大批用户数据,既利于孵化创新产品,也丰富盈利模式(比如与第三方合作)。
  • 提升产品设计价值:基于精准人群的需求分析和功能设计,更容易得到用户认可,更容易打造产品亮点,提供精准个性化的服务,比如对于社区产品,内容个性化推荐将有效提升社区粘度。
  • 提高运营效率:如今的新用户获客成本居高不下的情况下,利用现有用户画像,做好存量用户的维护,通过精准营销策略,提升存量用户的留存与活跃。

2. 缺点

自适应界面同样有一些“小缺点”,违背了一些众所周知的可用性原则:

  • 缺乏控制:自适应界面不能让用户控制自适应过程。
  • 不可预测性:由于用户不能直接控制界面,用户不能预测界面接下来的某些行为。
  • 透明度:通常,用户不能理解在界面中,自适应是如何起作用的。在设计自适应界面时的其中一个问题就是让用户可以见到多少自适应比例。
  • 私密性:用户必须接受基于用户模型的一种系统,将会一直维持与系统交互的状态,持续收集用户使用行为。
  • 信任度:用户在系统中的信任是容易改变的,如果自适应系统给予了错误的指令。
  • 开发成本:提供内容的自适应度,通常意味着着更多的开发成本。要把控好自适应性设计的度,而非一味地增加开发量。

四、内容自适应设计在金融产品上的应用思考

1. 基础设计原则思考

内容自适应的核心在于,基于用户过往的操作以及行为路径的分析,提前预判用户下一步需要的内容,从而让用户能更便捷的使用产品。但是在金融产品的设计中比较特殊,往往用户在使用产品的一个核心需求是安全感,产品安全、资产安全、操作安全等都是用户着重关注的点,所以如果一味的进行内容自适应设计,会让用户产生“信息泄露”的担忧,从而失去对该产品的信任。

基于以上内容自适应的分析以及金融产品设计的特殊性,我们来看看有哪些可以运用到金融产品的设计中来。

2. 金融产品设计思考

(1)金融应用的[截图]功能

截图功能可以根据用户场景与用户目标两个维度进行分析。截图操作的发生几乎会发生在用户使用金融应用的各个场景,比如浏览金融产品、查看产品详情、查看持仓资产、收益等等,而不同的场景用户的目标也有所不同,我们可以根据用户不同的操作目标,为用户提供自适应的内容来方便用户的操作。

截图常见的用户目标大致分为两类:报错与分享。我们可以为这两个用户目标做一些内容上设计。

报错一般会关联产品的在线客服功能,那么我们在用户截图操作发生后,提供在线客服的入口,同时分析报错自身的用户行为,如可能是针对页面的哪个点或者哪个区域报错,那我们可以针对这一点再提供编辑截图的功能等等。

如此根据用户目标拆解用户行为,设计对应的功能来满足用户操作,从而减少用户的操作路径。

分享可根据用户场景设计不同的内容,如:

  • 当截图发生在产品详情页,那此时截图的分享意图可能是分享此只产品给好友,我们可以为此设计一个关于产品信息的分享页来便于用户分享;
  • 当截图发生在资产页,此时的截图的分享意图可能是炫耀自己的收益,那我们可以生成收益海报等内容给用户,从而满足用户的心理预期。

(2)金融应用的[内容管理]功能

买衣服的时候,绝大多数人在意的是是否合身,对于数字产品,同样是如此。在一个金融应用的内容管理功能当中,会推送大量的内容给用户,绝大多数的用户几乎没有时间来掌控所有的信息,导致部分对用户有用的信息被忽略,这样意味着内容的可定制化是极其重要的。

内容的可定制化体现在不同用户的分层上,基于分层,我们可以为相同类型用户推送内容。如持有私募基金的用户,我们可能会更多为其推送关于此类产品的信息以及高端用户的优惠、活动、资产报告等信息。

(3) 金融应用的[搜索]功能

金融产品的搜索,除了具备一般应用该有的内容,如最近搜索、热门搜索、搜索排行榜等,也需要基于产品特性来思考还有哪些可以展示的内容。

根据用户行为与数据分析,一般搜索的关键词为基金名称或者基金代码,而搜索的目的是查看该产品的信息以及收益情况,那么基于此类目的,我们可以当用户输入基金名称后,展示该基金最近的净值走势等内容,这样用户就可以提前了解部分基金信息,可以提前做一个判断,需不需要进入搜索结果页进一步的了解。

除了提前展示该基金部分产品信息以外,我们也可以展示相类似基金,防止用户因提前获知产品部分信息而带来的流失率,当用户不满意该只基金的近期表现,我们可以为其提供表现良好的基金供其选择,从而提高产品的转化率。

五、结语

通过对自适应设计在内容上的应用探究,我们对内容自适应的设计手法及应用场景有了初步的理解,也会继续的探究并运用到实际的工作中来,希望这些思考能为大家带来一些帮助。

作者:道乐UED全体成员

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

本文由 @道乐科技设计中心 授权发布于人人都是产品经理。未经许可,禁止转载。

题图来自Unsplash,基于CC0协议。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计、交互设计、UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

帕累托原则 | 设计师需要知道的设计原则!

杰睿

前人留下的一些设计原则能够帮助我们更好地进行页面以及产品的设计,让用户有更好的体验。本文对帕累托法则进行了介绍,希望能帮助大家在以后的设计中更好的理解与运用。

威廉·斯特伦克(William Strunk)说过:“优秀的设计师有时会无视设计法则,但当他们这样做的时候,通常会有一些补偿性的措施,除非你确定你能做得那么好,否则最好还是遵守这些法则”,所以设计师需要对一些通用性的法则有所理解,做好相应的知识储备,以便在需要时从中找寻相通的规律和事务的本源。

设计常常是以一种美观且富有规律的形态出现,不论大家是何种姿态、什么样的知识背景,一旦踏入设计领域之后就会忍不住的去寻求设计法则,探索期背后的设计规律,因此经过长期沉淀,一些大佬和前辈们留下了大量的通用设计法则。

今天,笔者就说说帕累托法则,希望能帮助大家在以后的设计中更好的理解与运用。

一、认识帕累托法则

1. 帕累托法则的背景

19世纪末,意大利经济学家和工程师维尔弗雷多·帕累托(Vilfredo Pareto)发现,自家花园中80%的豌豆产自于20%的豌豆荚,在随后研究土地所有权和财富不平等的问题中,再次发现意大利 80%的土地属于 20%的人。

20世纪初,由管理学家约瑟夫·朱兰(Joseph Juran)将其命名为帕累托法则,即80%的结果是20%的原因造成的,并且号召关注「重要的少数」而不是在「琐碎的多数」当中投注精力。后续在经济学中得出结论(80%的财富掌握在20%的人手里)更加证实了帕累托法则的观点。

2. 正确理解80与20

帕累托法则有很多不同的叫法,如帕列托法则、关键少数法则、二八法则、巴莱特定律、最省力的法则、不平衡原则等,后续笔者将其称为「80/20法则」。

其实,80/20法则是一个较为抽象的概念,可以理解为:大部分的效果由少数几项关键的因素来决定。在实际的场景中,“大部分”不是精确的80%,“几项关键因素”也不是固定的20%,数据会有所浮动,可能是70%+30%或者90%+10%,但不管这些数字如何波动,其背后蕴含的规律(集中的投入将产出大于预期的结果)是不变的,并且生活中存在的许多不平衡现象,都与这个规律相当接近。

3. 可适用范围

80/20法则并不受人为直接控职,更多时后是自然而然的形成,其适用领域非常广泛。早期大多数用于社会、经济、管理以及工程等领域,而在80年代末就已经有设计师将其设计领域,在各行各业中,已经有大量的案例证明了 80/20原则:

  • 人类80%的科学发明,来自于20%的人口
  • 社会上20%的人占有80%的财富
  • 城市80%的交通,集中在20%的道路上
  • 20%的客户为公司贡献了80%的收入
  • 公司80%的收益来源于20%的产品
  • 20%的网站获取了 80%的网络流量
  • 20%的常见软件错误导致了80%的系统崩溃
  • ……

4. 设计领域中的运用

70年代中期出现图形化界面,而到80年代末,80/20法则就已经被设计师引用在设计规范当中,后续经过不断的发展及优化,现已深入设计中的方方面面,PM用来处理KPI、UX用来划分权重、UI用来决策版面布局等。

界面设计中该如何应用80/20法则,这就需要设计师时刻注意如何让用户更快找到目标、如何更顺畅的完成任务以及如何拥有更愉悦的心理感受。例如80%的用户只会用到20%的功能,那么设计师就应该将80%的时间、精力集中在这20%的功能上,不断迎合用户需求以及使用体验。

二、产品如何应对80与20

1. 关键性的20%

80/20法则能够帮助我们提供决策思路、梳理设计方向,通过前面的了解,我们应该清楚了产品80%的用户只会用到20%的功能,而80%的收益也恰恰来自于20%的付费用户,甚至低于20%。

虽然一直呼吁尽量满足所有用户,但产品团队的重心始终要围绕着20%来进行,从产品到设计、再到开发测试,都能以此为方向制定问题的解决方案。

2. 非关键性的80%

任何一款产品都不能忽略主次,每隔一段时间就要重新评估功能价值,以备后续的更新迭代,针对非关键性的80%切勿耗费过多的精力,以免喧宾夺主,不仅得到不好的反馈、还会带来不必要的损失,吃力不讨好。

对于已经过期的核心(曾经20%)功能,需要及时降低权重以及精力的消耗,不然即便是掌声一片、也可能无法变现。

3. 仅关注 20%有风险

用20%的部分创造80%的价值,并不意味着只关注20%的关键性指标、其它的就可以被忽略,这样做表面上看是挺诱人,但会让其他很多指标停滞,呈现出产品过度优化的情况,造成短时间内隐藏的负面影响。

团队应该要有众览全局的眼光,考虑到各指标间的相互影响,可视情况而定将时间和精力合理分配,如90%+10%、80%+20%、70%+30%等,只要是将大部分用在关键性指标上即可。

三、在UI设计中的运用

在UI设计中,我们会将主要精力花费在20%的页面设计上,例如APP底部标签栏的几大主页或其它重要的一/二级页面,会花费更多的心思去构思不一样的布局、表现手法,将设计功底凸显出来。而剩下80%的页面就相对机械化,会使用一些常规样式以及复用的方式像搭积木一样快速完成,成本之低、效率之高毋庸置疑。

同一个页面的设计方式也是如此,设计师将大量心思放在首屏及位置靠上的功能上,待超过一屏后下滑时,设计也会逐渐轻量、组件化,这有助于节省产品、设计、开发更多的时间。

1. 排版布局(F型)

用户浏览屏幕时,眼球移动的顺序通常都是从左到右、从上到下(基于网页浏览眼动测试),这种移动轨迹很像字母「F」,这也让F型布局成为网页设计中效率最高的方式之一,所以设计师通常会将重要的信息放在左上角或左侧,不重要的信息放在右侧。

如下面这张眼动测试图,F型布局也正好诠释了80/20法则合理性与可行性,在页面中20%的关键区域,吸引了用户80%的注意力。

2. 功能入口设计

很多产品因为业务功能的庞大,一股脑的将信息全部展示出来,看起来十分臃肿,用户不能快速找到自己想要的信内容,就会失去信心。

优酷APP首页将热门频道和点击频率较高的频道显示在顶部导航中,如精选、电视剧、电影、最新院线等,而其他更多的分类则隐藏在频道选项卡中,将少量(≈20%)重要的内容放在明显的位置,目的就是为了让大部分用户更快触达,提高了产品的易用性。

3. 选项列表设计

在一些选项列表中,由于选项数量的庞大,会给用户增加使用难度。

例如,使用美团购买火车票在选择地址时,面对超长的地址列表,逐个查看或通过字母筛选,都要花费一定的时间和操作成本,即便可以通过码字搜索来完成,但因为自行输入有很多的不可控性,能让用户选择的就不要让其输入。

对于地址列表,除开自动定位和搜索历史,运用80/20法则就能很好的解决这一问题,系统将约20%高频选择的热门城市作为单独的模块放在全部列表之前,提高了大部分用户的搜索效率。

4.  极简风格设计

极简风格的界面设计跟80/20法则在精神上保持着高度的一致,剔除多余、无用的元素,而保留的每一个元素都是有目的、有针对性的,也是绝对必要的存在。在极简主义设计中,视觉上简单干净,大部分都是通过通过留白来衬托关键性元素的存在,让用户更加聚焦于主要功能/信息。

四、与其他法则的纠葛

1. 与奥卡姆剃刀的结合

奥卡姆剃刀指出「如无必要,勿增实体」,需知页面中每多一个元素都会增加视觉“噪声”,意味着用户需要花费额外的时间和理解成本,对用户体验的影响是很大的。那么问题来了,当产品需要增加一项需求量小但确实存在的功能,该怎么处理?

这时我们可以将奥卡姆剃刀原则作为最终的评判标准,是否需要增加上述所说的功能,就要看看能否很好的控制团队开发成本和用户体验成本。

其实在80/20法则中,很多小众但确实存在的功能需求基本很难抵消所造成的用户体验损失,所以即便实现了这个需求,也很难分配出20%的精力去维护与迭代,甚至“俺耳盗铃”般的将其遗忘,但这个视觉“噪声”一直存在,如果事先能分析出这种结果,这个需求根本不需要增加。

2. 与长尾模型的对抗

在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端产品的发展也在加速。而B端组件库,作为产品设计与开发的基础构建模块,其重要性不言而喻。在众多的组件中,“数据录入”、“反馈”和“导航”是三个关键的组成部分,它们在很大程度上决定了产品的用户体验和工作效率。本文将对这三个组件进行深入的研究,探索其最佳的设计与实施策略。

二、B端组件库中的数据录入类组件应该如何搭建?如何进行多样化设计?

2.1“数据录入”类组件搭建过程

 

2.1.1搭建步骤:

需求分析:首先明确数据录入的需求,包括需要录入的数据类型、数据量、频率等。

设计表单:根据需求设计合适的表单,包括输入项的类型(文本、数字、日期等)、布局、标签等。

添加验证:为了确保数据的准确性,需要为表单添加合适的验证规则,如必填项、格式验证等。

考虑用户体验:为了提高数据录入的效率,可以考虑添加一些方便用户的功能,如自动填充、批量导入等。

测试与迭代:完成设计后,进行用户测试,根据反馈进行必要的调整和优化。

2.1.2注意事项:

明确性:确保每个输入项的目的和要求都是清晰的,避免用户产生困惑或误解。

友好性:尽量简化录入流程,减少不必要的步骤和输入。提供友好的提示信息和反馈,帮助用户顺利完成录入。

响应速度:数据录入过程中,系统的响应速度也是一个重要的考虑因素。确保系统在处理大量数据或复杂操作时仍能保持流畅。

安全性:对于敏感数据的录入,需要确保系统的安全性,如使用加密技术、防止SQL注入等。

2.1.3常用场景:

用户注册:在注册新用户时,需要收集用户的基本信息,如姓名、邮箱、密码等。

商品管理:在电商或库存管理系统中,添加或编辑商品信息时需要进行数据录入。

订单处理:处理订单时,需要录入订单的相关信息,如客户信息、商品信息、支付方式等。

数据导入:对于一些已经存在的数据,提供批量导入的功能可以大大提高数据录入的效率。

报表生成:生成报表时,用户可能需要输入一些参数或筛选条件,这也涉及到数据录入的操作。

2.3如何进行多样化设计?

进一步提升B端组件库中“数据录入”类组件的设计和扩展能力:

1. 增强交互与动效设计 使用明显的交互动效,如微动画、过渡效果等,提升用户输入时的体验。 设计清晰的输入状态,如聚焦、失焦、有效、无效等,使用户明确知道当前输入的状态。

2. 提供多种输入格式和单位支持 允许用户选择不同的输入格式,如日期可以选择“年-月-日”或“月/日/年”等格式。 对于数字输入,提供多种单位支持,如百分比、货币、科学计数等。

3. 设计可扩展的验证规则系统 提供内置的常见验证规则,如必填、长度限制、正则匹配等。 允许用户自定义验证规则,以满足特定的业务需求。

4. 支持复杂数据结构输入 设计支持数组、对象等复杂数据结构的输入组件。 提供可视化编辑工具,方便用户直接编辑复杂数据结构。

5. 优化键盘导航和快捷键支持 允许用户使用键盘快速导航和输入数据,如使用Tab键在字段间切换。 提供常用的快捷键支持,如Ctrl+C/V进行复制粘贴。

6. 设计可配置的界面和布局 提供多种预设的界面风格和布局选项。 允许用户自定义界面元素和布局,以满足不同的视觉需求。

7. 集成智能提示和自动补全功能 使用机器学习算法为用户提供输入建议,减少输入错误。 对于重复输入的数据,提供自动补全功能,提高输入效率。

8. 支持多语言和本地化设置 为不同语言和文化背景的用户提供本地化支持。 允许用户自定义显示的语言和格式设置。

9. 建立组件使用分析和反馈系统 收集并分析用户使用数据录入组件的数据,了解用户的真实需求和习惯。 建立用户反馈系统,及时收集和处理用户对组件的意见和建议。

三、B端组件库中的反馈类组件应该如何搭建?有哪些注意事项?常用的场景有哪些?

在B端组件库中,反馈类组件是非常重要的一部分,它们用于在必要时向用户反馈操作结果,做到合理有效的信息传达。

3.1搭建反馈类组件

确定反馈类型:根据需要,确定要使用的反馈类型,如提示、警告、错误、成功等。

设计反馈样式:针对不同类型的反馈,设计相应的视觉样式,如颜色、图标、动画等。

编写组件代码:根据设计好的样式,编写反馈类组件的代码,包括HTML结构、CSS样式和JavaScript交互逻辑。

测试与优化:对编写好的组件进行测试,确保其在不同浏览器和设备上都能正常工作,并根据测试结果进行优化。

3.2注意事项

反馈一致性:对于同一类型的消息反馈,使用同一类型的组件,以确保用户在不同场景下获得一致的体验。

符合场景:不同的场景使用不同的反馈组件,例如系统主动推送消息类型的使用通知提醒框。

描述精确:合理而精确的消息提示文案描述,可以帮助用户高效理解。

可关闭性:对于一些非关键性的反馈,提供用户手动关闭的选项,避免打扰用户。

适应性:确保反馈类组件在不同屏幕尺寸和分辨率下都能正常显示和工作。

3.3常用场景

告警提示:当某个页面需要向用户提供告警信息时,使用告警提示。通常告警提示在页面上不会自己消失,用户可以手动关闭。

全局提示:在当前页面以轻量级提示方式告知用户操作的结果,使用全局提示。通常提示框在页面顶部居中显示并且会自动消失,不打断用户的其他操作行为。

通知提醒框:一般在系统主动推动通知的情况下使用,如服务到期、服务告警等。

加载提示:常用于数据加载中提示、操作中提示,Loading的文案可按照具体场景定义。

对话框:常用于比较强的二次确认弹框提示、或者展示一段比较长的消息。

四、B端组件库中的导航类组件应该如何搭建?有哪些注意事项?常用的场景有哪些?

在B端组件库中,导航类组件的设计和实现对于用户体验和系统效率至关重要。

4.1搭建导航类组件

确定导航结构:根据系统的信息架构和用户需求,确定导航的结构,如全局导航、局部导航、面包屑导航等。

设计导航样式:针对不同类型的导航,设计相应的视觉样式,如颜色、字体、图标等。

编写组件代码:根据设计好的样式和结构,编写导航类组件的代码,包括HTML结构、CSS样式和JavaScript交互逻辑。

测试与优化:对编写好的组件进行测试,确保其在不同浏览器和设备上都能正常工作,并根据测试结果进行优化。

4.2注意事项

清晰的信息架构:确保导航的结构能够清晰地反映系统的信息架构,使用户能够快速找到所需的信息。

易于理解:导航的标签和名称应使用用户熟悉的术语,避免使用过于专业的术语或缩写。

可扩展性:考虑到系统未来的发展,导航结构应具备一定的可扩展性,以便添加新的功能或模块。

响应式设计:确保导航在不同屏幕尺寸和分辨率下都能正常显示和工作,提供良好的用户体验。

遵循设计规范:参考行业通用的设计规范和最佳实践,确保导航的设计符合用户的期望和习惯。

4.3常用场景

全局导航:适用于整个系统的主导航,通常位于页面的顶部或侧边,提供对主要功能和模块的快速访问。

局部导航:适用于特定页面或功能的子导航,帮助用户在该页面或功能内快速找到所需的信息。

面包屑导航:显示用户当前所在的位置,以及从首页到当前页面的路径,方便用户了解自己的位置和返回上一级页面。

下拉菜单:当导航项较多时,可以使用下拉菜单进行收纳,节省页面空间并提高用户体验。

标签页导航:适用于需要同时展示多个内容或功能的场景,用户可以在不同的标签页之间切换以查看或操作不同的内容。

举例说明:公司内部不同系统,可采用的不同种类菜单导航,均可以设计先行。后续使用可进行调整

 

五、如何对“数据录入”、“反馈”、“导航”进行C化设计?

对于数据录入,关键在于简化用户的输入过程,同时提供清晰直观的界面。

例如,可以通过减少不必要的表单字段来简化录入流程,使用智能填充来加速输入过程,并通过即时验证和友好的错误提示来减少用户的输入错误。此外,考虑到移动设备用户的增长,优化表单的移动端设计,确保在小屏幕上也能轻松输入,是至关重要的。这可能意味着增加触摸友好的元素,如更大的点击区域和适应屏幕大小的布局。

在反馈方面,提供即时、直观且情感化的反馈对于增强用户体验至关重要。这包括在用户完成任务或遇到错误时提供明确的视觉和文字提示。

例如,操作成功时可以显示绿色的勾号图标和正面的消息,而错误则可以用红色的叹号和说明性的错误消息来提示。增加动态反馈,如加载动画,也可以提高用户体验,减少等待时的焦虑感。此外,提供易于访问的帮助和支持选项,例如在线聊天或用户论坛,可以帮助用户在遇到问题时快速找到解决方案。

对于导航,设计的重点是确保用户能够直观地理解如何在应用或网站中移动。

这涉及到创建清晰、一致的导航结构,突出显示主要功能,并使用易于理解的图标和标签。在移动设备上,这可能意味着采用汉堡菜单或底部导航条来节省空间。同时,考虑到个性化的重要性,可以提供自定义选项,让用户根据自己的偏好调整导航界面。 综上所述,C化设计强调的是提高易用性和用户体验,使得B端产品在保持专业性和功能性的同时,更贴近最终消费者的使用习惯。

六、结束

后续还有一篇“问题汇总”,之后会整理一些最近两年的B端项目发布,感谢大家支持!!

 

其余篇章,可点击主页观看!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



作者:张阳光Designer
链接:https://www.zcool.com.cn/article/ZMTU5OTM4OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

探索家居之美:巧妙装修设计点亮生活空间

前端达人

在现代生活中,家不仅是我们居住的地方,更是承载梦想、情感和温馨的港湾。精心的装修设计不仅可以为家增色添彩,更能为居住者创造出宜人舒适的生活环境。本文将探讨一些巧妙的装修设计理念,点亮居家生活空间。

1. 创意空间布局

装修设计的第一步是合理规划空间布局。通过巧妙的布局,可以最大限度地利用空间,使得家居更加通风明亮。采用开放式设计或者巧妙的隔断,打破传统的界限,使得家居更具动感和灵活性。

2. 色彩搭配的魅力

色彩是装修设计中的灵魂。巧妙的色彩搭配能够为家注入活力和个性。根据不同房间的功能和居住者的喜好,选择合适的色调,营造出温馨、舒适或者活泼的氛围。同时,考虑光线的影响,让色彩更加生动。

3. 自然元素的融入

自然元素是现代装修设计中备受推崇的要素之一。通过引入植物、木材等自然元素,可以为家带来清新的空气和宁静的氛围。绿色植物不仅美化环境,还有助于调节室内空气质量,使居住更加健康。

4. 定制化家具的个性

定制化家具是打造独特家居的重要途径。根据家居空间的尺寸和个人需求,选择定制家具,既可以充分利用空间,又能体现个性。独特设计的家具不仅美观实用,更是家的象征。

5. 光影设计的艺术

光影设计是装修中的一门艺术。巧妙的灯光设计能够调整空间氛围,营造出温馨、浪漫或者专注的氛围。选择合适的照明设备,根据房间的功能和布局,设计出有层次感的光影效果。

6. 智能家居的未来

随着科技的不断发展,智能家居已经成为现代家居设计的新趋势。智能化的家居设备可以为生活带来更多便利,通过智能家居系统,可以实现家居的智能化控制,提升居住的舒适度和便捷性。

结语:设计家,添彩生活

家,是一个温馨的港湾,也是生活的舞台。通过巧妙的装修设计,我们可以在家中创造出一个令人陶醉的生活空间。创意的布局、色彩的搭配、自然元素的融入,都是点亮家居的法宝。在设计的过程中,发挥想象力,打破传统,定制个性化的家具,让每一个空间都成为艺术的延伸。通过装修设计,我们可以感受到家的温暖,生活也因此变得更加丰富多彩。

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计

软件qt开发软件wpf开发软件vue开发

探索UI设计的奇妙世界:创新、美感与用户体验

前端达人

在数字化的时代,用户界面(UI)设计已经超越了简单的美观外观,它成为了数字产品成功的关键因素之一。一个令人愉悦、易用的UI设计不仅吸引用户,更能够帮助品牌在竞争激烈的市场中脱颖而出。在本文中,我们将深入探讨UI设计的奇妙世界,探讨创新、美感与用户体验的重要性。

1. 创新引领潮流

UI设计的核心是创新。通过引入独特的设计元素、交互方式和动效,设计师们能够打破传统界限,创造出令人惊艳的用户体验。在设计过程中,考虑用户的需求和行为,将创新融入产品,使用户感受到与众不同的数字世界。

2. 美感与品牌形象

美感是UI设计的灵魂。吸引用户的第一眼往往决定了他们是否愿意留下并继续使用产品。精心设计的颜色搭配、字体选择以及图形元素,不仅构建了令人难以忘怀的用户界面,也能够加强品牌形象。一致的设计语言和品牌标识,将品牌的价值传递给用户。

3. 用户体验的黄金法则

用户体验(UX)是UI设计的至高追求。一个优秀的UI设计应当始终以用户为中心,关注用户需求、习惯和心理。简洁而直观的界面、合理的信息架构以及高效的操作流程,都是提高用户体验的关键因素。通过不断优化用户的互动过程,提升用户的满意度和忠诚度。

4. 响应式设计的未来趋势

随着移动设备的普及,响应式设计成为了不可忽视的趋势。UI设计师需要考虑不同设备上的显示效果,确保用户在不同屏幕尺寸上都能获得一致而流畅的体验。这不仅提高了用户满意度,也有助于网站在搜索引擎中的排名。

5. 数据驱动的优化

UI设计不仅仅是一门艺术,更是一门科学。通过使用数据分析工具,设计师可以深入了解用户行为、流量和互动。这些数据可以为设计优化提供有力的依据,帮助设计师更好地了解用户需求,不断改进和优化界面。

结语:设计的魔力

UI设计是数字产品成功的关键之一。在竞争激烈的市场中,一个创新、美观且用户体验出色的UI设计能够让产品脱颖而出。通过将创新、美感和用户体验融入设计的每个层面,设计师们可以引领品牌进入数字化的未来,为用户创造出令人愉悦的、难以忘怀的数字体验。在这个数字化的奇妙世界里,UI设计是连接品牌和用户的桥梁,也是探索数字创新的引导者。

 

蓝蓝设计(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

存档