首页

用好容器类UI组件,实现界面空间膨胀术!

天宇 系统UI设计文章及欣赏

为了避免出现用户所想看的信息被其他海量信息所淹没的情况,设计师或者产研团队需要思考如何做好信息收纳,让拥有厚重信息和功能的产品变得简单清爽且易用。这篇文章里,作者就梳理了如何利用好容器类UI组件达成这一目标的策略,一起来看。

用户的矛盾

如果你问用户他需要什么,他的回答大概率是“我全都要”。但是如果你把他想要的东西全都展示在页面上,会发生什么?

用户被自己想要的信息淹没了。他会说:“这根本没法看,也没法用,你们的设计太烂了。”

信息量大、操作复杂是B端产品的典型特征。我们如何把具有厚重信息和功能的产品,变得对用户来说清爽易用?

设计师就像魔术师

My dad once told me that graphic design is the art of fitting a newspaper inside a matchbox, and I would say a lot of interface design is the same.

——Tess Gadd《UX cheat sheet: Preview and full display》

“界面设计就是把报纸塞进火柴盒的艺术”,这个比喻真是太妙了!(本土化:把大象装进冰箱的艺术)。怎么把报纸塞进火柴盒?变魔术吗?其实从某种角度上看,我们设计师就是魔术师——在适当的时机展示恰到好处的信息。

而我们用到的道具,就是容器类UI组件。区别于其他类型的组件(比如输入框下拉框),容器类组件就像收纳盒,也就是用来收纳信息和操作的。

咱们今天就来探索一下,如何利用好容器类UI组件,完成“空间膨胀术”,把报纸丝滑地塞进火柴盒。

本文结构

本文会分成两部分。

  • 第一部分:寻找到问题所在,探索出恰当的设计策略。
  • 第二部分:针对设定好的设计策略,提炼出“容器类”组件使用决策树。

这个决策树不限于提供以下价值:

  • 帮助设计师们在设计过程中高效决策,提升设计效率;
  • 帮助产研团队在讨论中快速达成一致、减少内耗;
  • 提升汇报时的说服力,获得干系人支持。

下面我们正式开始吧~

PART 1:定位问题、设定策略

1. 问题所在

一个单点数据关联的信息量能有多大?看一个网安行业的例子:

安全管理的目标是要确保资产安全。用户要做的,首先是要清点资产,资产分类分级和业务信息是资产自身属性。另外,资产本身会存在一系列漏洞,漏洞也有分类分级以及修复过程数据。如果漏洞被利用,就会产生威胁告警,而告警也存在分类分级及处置过程数据。

可以看出,将数据建立层层关联后,从一个单点可以衍生出来的信息是海量的、无边的。

我们当然不能把这全家桶一整个砸给用户呀,用户会被砸晕的。那我们该怎么做?

2. 设计策略

有两个定律,跟“复杂”有关。

这两个定律告诉我们一个道理:复杂,不会让用户觉得更好用,甚至增加了不必要的内耗。

处理复杂,我们一般有哪些办法呢。

第一步,先删除多余的部分。就好比我们整理房间时,先挑出垃圾和闲置。

第二步,把物品归类。被子和被子叠在一起,衣服和衣服挂在一起,书本放在书架上。总之,不能都堆到床上。

第三步,渐进呈现。这就到了设计师要用“容器类”组件来完成“空间膨胀术”的环节了。

渐进呈现的设计理论有点像C4模型。C4模型是一种软件架构可视化方法。它的独特之处,就是从宏观到微观,设置了多个焦距,来层层递进。

3. 内容分析

产品中的内容也存在层层递进。内容之间的关系,常见以下两种。

一种是从属关系,或父子关系。

一种是关联关系,数据以某种维度建立了关联。

PART 2:容器,以及如何使用容器

1. 关于容器

我们如何用容器类UI组件,去放置这些复杂且层层关联的内容?

以下是我们常见的容器类UI组件。

这些组件都可以用来收纳,但是它们的特征差异也是巨大的,不能随意混用。

我从“复杂度高低”和“关联性强弱”这两个坐标维度来划分出四个象限,展示这几个容器的特征。

左下角这里基本是空的,为什么?因为这个是按照组件的最大潜力来摆放的,高维度可以兼容低维度。

值得注意的是,有一些组件在当前页面内,而有些在浮层中。浮层在空间Z轴上有高度,视觉表现为有投影。

容器可以展示信息,也可以用来承载操作。我们把这两个场景分开考虑。首先,我们从信息展示场景开始,分析如何选择容器。

2. 信息展示容器的决策树

这里有几个关键问题,我们逐个分析:

关键问题一:能否分清主次。

这个问题很难。用户可能说“这个内容我需要”,但“需要”这个词存在极大的灰度空间,我们要判断“需要”是多“重要”,需要从这几个维度去分析。

关键问题二:是否需要对比参考。

如果需要对比参考,不能使用tabs(选项卡)。因为tabs组件存在“排他性”——只有选中tab的子内容是展示的,未选中的tabs下的内容是被隐藏的。

以购物为例,用户在对几款产品进行对比挑选时,期望在一个界面同时看到几款产品的参数和价格等。如果把产品数据放入各tab中,用户就得在tab间反复横跳,让有限的短期记忆承受巨大压力。

(↑案例:苹果手机参数对比)

当然,如果没有对比参考的需求,我们可以考虑把内容归类到不同tabs下。在使用tabs组件时要确保内容分类合理、标签文案简洁易懂。这样用户才能理解并愿意探索。

(↑tabs的应用)

关键问题三:是否需要保持上下文。

有这样一个场景:上级单位对多个下属单位进行考核,打分有一定主观性,需要参考其他单位得分。如果跳转新页面进行打分操作,就会断开原有上下文的关系,影响用户操作流畅性。

需要保持上下文的场景中,应避免迫使用户离开父级页面,建议在原页面或浮层中呈现更多信息。

关键问题四:是否频繁往返。

这个一般由任务类型决定,即当前操作是“主线任务”还是“支线任务”。

在主线任务场景中,用户持续前进。比如网购商品,用户在选购商品-确认地址-付费-下单完成···等步骤中环环前行。这时建议使用原页面跳转的方式。

支线任务完成后,一般要回归主任务,也就是存在“往返”,就像从小路回归到大路上。比如清理邮箱:用户阅读处理完一封未读邮件后返回未读列表,继续处理下一条。在这里,“阅读并处理一条邮件”是支线任务,“”清理邮箱”是主线任务。建议给“支线任务”新开标签页处理。

关键问题五:是不是必须看到的。

当前信息对用户来说是否重要且关键?模态是较为“强势”的交互模式。原则上,界面态度保持礼貌克制,以免打扰到用户。

3. 功能操作决策树

并不是所有容器都适合放置表单操作——部分容器因“排他性”的特征,会隐藏部分信息,可导致用户遗漏重要操作。

我们一般将操作分成两类:

  • 一类是需要用户提交信息的,例如填写表单,一般由用户唤起。
  • 一类是接收和确认系统信息,一般由系统发起。

我们可以按照表单的体量,或者信息的重要及关键程度,选择相应的UI组件。

4. 空间膨胀术

容器组件的的神奇之处是可以多次嵌套和叠加,创造出更多空间。

但注意保持信息体量和层级之间的平衡,避免过多嵌套和叠加,让用户在多个容器中迷失方向。

(↑案例:抽屉嵌套抽屉)

(↑案例:tabs嵌套tabs)

(↑案例:抽屉嵌套tabs)

今天的分享就到这里了

感谢读到最后的读者们,就用一句话来结束今天的分享吧~

设计一件东西时,总是要在更大的环境中考虑它——房间里的一把椅子、房子里的房间、环境中的房子、城市规划中的环境。

——埃里尔·沙里宁 (1873–1950),芬兰建筑师

本文由 @杜大大杜 原创发布于人人都是产品经理。未经作者许可,禁止转载。

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

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

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

提升ToB系统用户体验:页面跳转设计的艺术与实践

天宇 系统UI设计文章及欣赏

在 ToB 系统中,跳转场景的合理分类和设计对用户体验至关重要。不同的跳转方式(如当前页刷新或新开标签页)直接到影响用户的操作效率和系统性能。本文将从分类、设计建议以及用户体验的角度,深入探讨如何优化 B 端系统中的跳转场景。

竞品厂商

一、金蝶

1.1. 金蝶·云星辰截图

金蝶云·星辰聚焦小型企业在线经营和数字化管理,,提供财务云、税务云、进销存云、订货商城、费用报销等SaaS服务,支持小型企业拓客开源、智能管理、实时决策,是一款适合小微型企业的云端财务进销存管理软件

1.1.1. 工作台

1.1.2. 目录页

1.1.3. 列表页

1.1.4. 新建页

1.1.5. 详情页

1.1.6. 待办待阅

1.1.7. 帮助系统

1.1.8. 系统后台配置

1.2. 金蝶·云星空截图

金蝶云星空是金蝶面向事业部制、多地点、多工厂等运营协同与管控型企业及集团公司,提供的一个通用ERP服务平台

1.2.1. 工作台

1.2.2. 列表页

1.2.3. 新建页

1.2.4. 详情页

1.2.5. 待办带阅

二、致远

致远的智能表单管理系统,因权限不够,只有部分页面;但依然可以看到其结构,也是系统内 Tab 页签跳转

2.1. 工作台

2.2. 后台配置

三、MK·PaaS

四、泛微

4.1. 项目管理

4.1.1. 列表页

4.1.2. 新建页

4.1.3. 详情页

4.1.4. 待办待阅

4.1.5. 帮助系统

4.1.6. 系统后台配置

直接菜单切换,无跳转(前台应用配置,不需要跳转页面)

从用户端进入后台配置,新开页签

4.2. 公文管理

4.2.1. 列表页

4.2.2. 新建页

4.2.3. 详情页

五、TDesign腾讯企业设计体系

腾讯的企业设计体系中,也包含了这一层设计规则(功能)

六、总结

1. 页面跳转的场景

在 ToB 系统中,在不同场景下页面的跳转对于用户体验至关重要。不同的跳转方式,直接影响到用户的操作效率和系统性能。

从用户操作角度,可以将页面的跳转分为三类「操作流程类」「信息查询」「系统配置类」(端到端如 PC 端到移动端,不在此次讨论范围)

1.1 操作流程跳转

用户在系统中进行的具体操作,用户执行某个任务或业务流程,如数据的创建、编辑、审批等。通常目标是推进某个操作流程的完成。

场景:如新建或编辑某数据,收到待办审批某流程等

1.2 信息查询与查看类跳转

当用户需要查询、查看或分析系统内的数据和信息时,需要从一个页面跳转到另一个页面,以获取更多的详细信息或进行更深入的分析。

场景:如打开某数据查看详情,从工作台查看详细报表进行数据分析,查看操作历史或日志记录等

1.3 系统配置与管理跳转

涉及系统设置、用户权限管理、插件配置等功能的跳转,通常由管理员或有权限的用户执行,用于配置和管理系统的运行环境和用户权限。如管理员需要从用户管理页面跳转到权限设置页面

场景:如打开后台系统,配置系统参数或用户权限

注:第三方系统跳转、子域名跳转属于功能类特殊场景,已涵盖在下方业务场景中

以上三种分类涵盖了基本的页面跳转场景,但不够具体,现按照以下具体场景,对竞品的跳转方式展开对比分析(注:弹窗属于模态,不在此次范围之内)

2. 页面跳转方式对比

跳转方式名称太长,简称为:

  1. 新开 Tab:新开浏览器 Tab 页签
  2. 系统 Tab:系统内置 Tab 页签
  3. 菜单跳转:以菜单形式进行切换,如左侧导航
  4. 当前页刷新:在当前页面,直接刷新内容

致远的系统没有体验到完整的,只体验到部分「智能表单管理系统」

3. 页面跳转对比总结

1)在同一个平台或系统内的信息,没有其他特殊情况时,最好不要新开浏览器 Tab 页签,这点泛微和金蝶保持了统一,都没有新开浏览器 Tab 页签;

  • 泛微使用「抽屉」的形式;
  • 金蝶使用「系统内 Tab 页签」的形式;
  • 而 MK 以「****」为主,保持了自己的风格;

2)跳转后台系统、或其他子系统、子域名或第三方平台时,这时可以新开「浏览器 Tab 页签」,展示其独立完整信息结构

如帮助系统,有些帮助以文档、视频或论坛的形式存在,使用独立页签可以很好的呈现其完整性;这点「MK」「金蝶」「泛微」都做到了统一;

4. 关于系统内/外跳转的场景分析

4.1 适合系统外跳转的场景

4.1.1. 跨系统跳转

  • 跳转目的与用户意图:用户可能在不同业务系统之间切换,完成更复杂的业务操作。
  • 用户角色与权限:跨系统的跳转通常涉及不同权限的管理,需要保证用户的访问控制。
  • 适合新开标签页:跨系统跳转时,为了避免用户在回到原系统时迷失上下文,新开标签页是较为合理的选择。

4.1.2. 二级域名跳转

  • 跳转目的与用户意图:用户通常在同一组织的不同子系统之间切换,处理不同的业务需求。
  • 用户角色与权限:每个二级域名子系统可能对应不同的用户角色和权限管理,需要确保用户身份和数据的一致性。
  • 适合新开标签页:二级域名跳转建议新开标签页,以便用户在处理完相关业务后能快速回到原系统。

4.1.3. 第三方集成跳转

  • 跳转目的与用户意图:用户在系统中使用集成的第三方服务,通常涉及外部供应商或合作伙伴的系统。
  • 用户角色与权限:第三方系统的操作可能需要特定的用户角色或权限,确保这些权限在跳转时无缝传递。
  • 适合新开标签页:跳转到第三方系统时,新开标签页能够使用户在完成操作后轻松返回原系统。

4.2 适合系统内跳转的场景

4.2.1. 页面内跳转

  • 跳转目的与用户意图:通常用于细分任务,例如从概览到详细设置。用户期望在同一页面内快速找到所需内容。
  • 用户角色与权限:所有用户角色都适用,尤其是在配置或设置页面中。
  • 适合当前页系统内Tab页签:页面内的内容切换适合使用当前页来保持用户的注意力。

4.2.2. 模块间跳转

  • 跳转目的与用户意图:用于在不同功能模块之间切换,用户期望在不同模块中完成不同的业务操作。
  • 用户角色与权限:不同角色的用户可能在不同模块中有不同的权限。例如,管理员有访问所有模块的权限,而普通用户可能仅限于特定模块。
  • 适合当前系统内Tab页签:在模块间跳转时保持用户上下文的一致性,有助于用户在完成一个操作后快速进入下一个操作。

4.2.3. 流程间跳转

  • 跳转目的与用户意图:通常用于多步骤的业务流程,用户期望顺利完成每一步操作。
  • 用户角色与权限:不同角色可能负责流程中的不同步骤,确保每个角色在合适的时机进入流程的对应步骤。
  • 适合当前页系统内Tab页签:保持流程的连续性和用户的操作连贯性。

1.2.4. 系统设置与管理跳转

  • 跳转目的与用户意图:用户通常在此场景中调整系统的配置或管理系统用户。
  • 用户角色与权限:主要适用于管理员角色,需要明确区分不同角色的管理权限。
  • 适合当前页系统内Tab页签:设置和管理类操作通常需要用户集中注意力,在当前页有助于用户保持在特定任务上的聚焦。

5. 跳转方式的优缺点

5.1 新开Tab页签

传统的网页浏览都是新开浏览器标签页的形式,实现内容的并行独立展示,从而避免跳转和返回的问题

优点:实现内容的并行、且独立展示,从而避免跳转和返回的问题;可以保证用户并行操作,方便信息间的对比、参考;适合独立子系统,完整呈现系统内容

缺点:打开页签太多时会很耗性能,造成卡顿;也会造成用户迷路,找不到之前的内容

5.2 系统内 Tab 页签

在当前页内,新增一行 tab,来承载内容

优点:系统内 Tab 页,页面是相互独立的、互不干涉的,多窗口自由切换,并且信息保留在系统内部,用户的视觉动线相对集中,交互操作成本更低

缺点:标签页栏属于框架层级,会影响原有的页面结构;且始终都会占据页面位置,会进一步压缩屏幕纵向有效空间;在整体的统一性上,也需要综合考虑使用

5.3. 抽屉

一般从右侧划出抽屉浮层,来承载内容

优点:在当前页面出现的抽屉浮层,可以避免页面频繁跳转、以及频繁返回带来的页面刷新导致用户效率下降的问题

缺点:会遮挡一部分上文内容,无法会看;且抽屉宽度有限,无法承载更多内容信息(不过有些抽屉支持放大/缩小 可以避免这个问题)

最后补两句

ToB 的页面跳转方式,应遵循完善的业务规则和使用逻辑,不能一刀切选择一种方式(如一直新开浏览器 Tab 页签)。最好允许用户自定义跳转方式,如在系统设置中提供选项,让用户选择某些操作是当前页刷新还是新开标签页。这有助于满足不同用户的偏好,提高系统的灵活性和用户满意度。

在需要新开多个标签页的场景中,需要考虑浏览器的性能表现和用户设备的资源消耗。可以通过优化加载速度、减少页面资源占用等方式来提升用户体验。

清晰的跳转反馈、完善的路径和返回机制

而无论是当前页刷新还是新开Tab页签、系统内 Tab 页签,系统都应在跳转后给予用户明确的反馈。比如加载进度条、操作成功提示等,让用户始终知道自己的操作状态。在复杂的跳转路径中,设计面包屑导航、返回按钮或快捷键,有助于用户快速找到跳转路径并返回到之前的操作页面,避免跳转迷失。

通过完善的业务规则和使用逻辑,灵活地结合用户行为分析和个性化设置,有助于提升系统的整体用户体验。在实际应用中,还需时刻关注系统性能,确保在多标签页和多终端跳转的情况下,依然能保持流畅的用户体验。

本文由 @宇相 原创发布于人人都是产品经理。未经作者许可,禁止转载

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务

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

小程序尺寸,一篇搞定

天宇 系统UI设计文章及欣赏

很多工作了几年的设计师依然搞不懂小程序画布创建依据和适配逻辑,所以今天针对这个问题,做一篇简单的分享,来对这种基础知识点做个扫盲。
首先小程序之所以叫小程序,因为它不是在手机、电脑系统上运行的应用(Native),而是在微信里运行的应用。也就是说,微信本身有套系统,而小程序的设计要遵循的是微信的设计规范,而不是苹果、安卓、微软的设计规范。
小程序尺寸,一篇搞定
 
 
这么做的原因是为了让开发者只用一套代码,就能在所有平台、系统上的微信运行,并展示出相同的效果。这个逻辑和网页类似,不管你在什么平台还是系统只要安装了浏览器,就可以读取相同的网页,而不用针对不同平台写一套全新的代码出来。
虽然小程序主要在移动端运行,它的设计理念会尽量贴合原生应用,多数控件、组件、交互的设计方式一样,但系统不同必然会导致细节上的差异,而界面的画布就是最大的问题。
首先小程序官方创建了一套自己的语言,WXML、WXSS、WXS,分别对应网页前端的 HTML、CSS、JavaScript。控制尺寸、样式的语言是 WXSS,而它的使用的尺寸单位是 rpx。
rpx 不是厘米、像素这样的物理单位,也不是移动端会用的 pt、dp、sp 这样的矢量单位,而是一个很特殊的“
变种单位
”。
微信系统在渲染界面时,固定了移动端视图窗口为 750rpx。不管你在苹果还是安卓系统,用的是无刘海小屏 iPhoneSE 还是新款 iPhone15 破儿麦克斯,都使用 750rpx 渲染。
换句话说,
rpx 的长度即 —— 屏幕的 1/750
这是个比较抽象的概念,移动端使用矢量单位,是为了在屏幕变大的同时扩大画布尺寸,提升显示容量,所以有了适配原则,组件的应用自动布局适应空间的变化。
但是小程序不一样,微信采用了最简单粗暴的模式 —— 等比缩放。在不同尺寸的屏幕中,直接缩放内容来填满窗口。比如下面是使用 iPhone13、iPhone15promax、Mac 端截图的同一个小程序界面。
小程序尺寸,一篇搞定
 
 
如果我们把它们缩放成一样的宽相互叠加,会发现元素大小是一样的(Mac 端字体和移动端有差异,所以有一定宽度差异,但是字号相同)。
小程序尺寸,一篇搞定
 
 
但正常的移动端应用,使用自动布局而不是等比放大,覆盖到一起是不会重叠的,比如下面 13 和 15promax 中同一张 APP 界面截图的叠加。
小程序尺寸,一篇搞定
 
 
所以,微信的画布就是 750rpx 宽适配到所有移动端屏幕,但高度会根据比例调整,毕竟不同屏幕的长宽比不一样。
小程序尺寸,一篇搞定
 
 
再进一步分析,750 这个数值哪来的呢?一看就知道是 iPhone 早期和低端设备的实际分辨率,即 375 的 2x 数值。虽然现在移动端设计已经从 375 过渡到 390 再更新到目前的 393,但小程序依旧使用375。
原因和之前响应式分享中提到的一样 ——
往大适配容易,往小适配难
现在市场上还保留数量可观的 375 设备,以微信的角色和体量就势必要兼容它们。既然兼容它们,那
设计和渲染就以兼容的最小画布为准向上放大
,而没有向下缩小的顾虑,这可以最大保证兼容性和可用性。
用 375 规格的设备去创建画布是没有问题的,不管你是使用 iPhone SE 还是 iPhone Mini 为标准都可以。
小程序尺寸,一篇搞定
 
 
因为系统用的 750rpx,所以原则上使用 750*1334 或 750*1624 画布创建最佳,但实际情况还是有出路。因为官方组件库用的是 375 宽....
小程序尺寸,一篇搞定
 
 
这又涉及到现实情况的考虑,毕竟设计是设计,开发是开发。在设计过程中我们往往会用其它应用设计好的素材,尤其一些大厂应用,小程序就是 APP 的翻版。如果把画布做成 750 意味着素材得全部重调一遍,和重做差不多,而且参数和设计师习惯不同,会出很多错误。
所以,正常创建小程序的画布使用常规的 375 画布即可。而在进入开发阶段,程序员可以直接在即时、 Figma、蓝湖的标注设置中使用 2x 的倍率,既可以获得 rpx 的具体数值。
这是个隐患问题,建议尽量在设计前和你们的前端程序员核对一遍懂不懂的如何换算数值,创建 375 是否有阻力,如果一定强调要用 750,你再自己展开后续的对线,谁赢了听谁的……
除了标准移动端画布外,还有个非常鬼畜的地方,就是组件库内有个 Half-screen Dialog,里面的组件用的是 414 宽。这数值是 iPhone 8 Plus/ XS Max  的规格,总不能还特意去支持这些古代大屏吧?
414 是小程序在电脑端启动时使用的规格,未经适配的小程序在电脑端的窗口就是固定的 414*736 。
小程序尺寸,一篇搞定
 
 
小程序尺寸,一篇搞定
 
 
用 736 这个高也和兼容小屏幕有关就不展开了,且小程序在电脑端也可以使用响应式的适配,只是这个需求实在太少,所以也不在这里多做介绍,感兴趣的可以自己研究官方规范。
 
最后,我自己当 AI 做总结
  •  
    小程序使用 rpx 作为宽度单位
  •  
    移动端小程序使用 750rpx 渲染
  •  
    rpx 长度是移动端屏幕的 1/750
  •  
    小程序适配不同手机屏幕的方式是根据宽度等比缩放
  •  
    创建小程序设计画布使用 375*667 或 375*812
  •  
    小程序在电脑端上会放大成 414*736
  •  
    电脑端调用的原生组件和移动端不同


作者:酸梅干超人
链接:https://www.zcool.com.cn/article/ZMTYzOTY3Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

我见过总结最好的UI动效设计法则!

天宇 系统UI设计文章及欣赏

研究主题:提升动效可用性

研究对象:12条UX动效应用法则

“作为UX/UI设计师,我该如何适当在UX设计中加入动效?”,我总结了一些经验法则,可以很好地回答这个问题。在过去5年里,我的UI动画工作室发表的教程,非常幸运可以在40多个国家/地区,以及数百个顶级品牌设计咨询公司中指导UX/UI设计师们。

研究UX/UI动效超过15年后,我得出了一个结论——其实有12个规律方法来帮助提升UX动效设计。我将这些机会称为“ 12条UX动效应用法则”,它们可以通过多种创新方式进行叠加和组合使用。

我将宣言分成5部分:

-强调动效的主题;

-实时与非实时交互;

-提升动效可用性的4种方法;

-原理,技术,特性和价值;

-12条UX动效应用法则。

动效并不是UI动画!

设计人员通常将用户界面中的运动主题理解为“ UI动画”(实际上不是),所以我觉得在开始说12条原则前,有必要为大家普及下基础。

 

设计人员通常将“ UI动画”视为是让用户体验更愉悦的东西,实际上并没有增加太多价值。因此,UI动画通常被视为UX的后儿子。另外,用户界面动效,它被认为属于迪士尼的12条动画原理范畴,我在自己的《UI Animation Principles — Disney is Dead》一文中进行了反驳。

 

在我的宣言中,我将证明UI动画原则与“ 12 UX in Motion Principles”的关系,就像是建筑构造和建筑风格一样,是各自独立的。或者这样理解,一个建筑结构被物理建造后才会实际存在(施工后),但是原则理论却能指导物理建造。

 

动画就是工具,而原则是用来指导工具使用的,因此,原则理论对设计师的影响力更大。实际上,多数设计师经常在UX设计中,将“ UI动画”视为一种更高级的设计形式。

 

实时与非实时交互

区分“状态”和“作用”很重要,UX中的大多元素是静态的,例如设计组件。用户体验中的行为基本上是暂时的,是基于动作的。一个元素是被隐藏的,或正在被隐藏。如果是后者,动效的引入就可以很好地提升可用性。

 

另外,可以将交互的时间都视为实时或非实时发生。实时是指用户直接与用户界面中的对象进行交互。非实时意味着对象行为是事后交互的:它在用户操作之后发生,并且是过渡的。

 

 

这是一个重要的区别。实时交互也可以被认为是“直接操纵”,因为用户正在直接和界面对象进行交互。用户使用界面时,界面行为正在发生。非实时交互仅在来自用户的输入之后发生,并且具有将用户短暂锁定在用户体验之外的作用,直到转换完成。认知这些差异性,会在我们学习12项原则时发挥帮助作用。

 

提升动效应用性的4种方法

这4点代表判断用户体验可用性时的依据:

 

-预期值

分两个方面——设计为用户带来的感受,以及实际呈现效果。换句话说,作为设计师,我们希望最大程度地减少用户期望与他们体验之间的差距。

 

-连续性

既代表用户流程,也代表用户体验的“一致性”。可以从“内部连续性”(场景内的连续性)和“内部连续性”(构成整个用户体验的一系列场景内的连续性)的角度来考虑。

 

-叙述性

是用户体验中事件的线性进展,一系列微妙的变化和动作串联在一起是,就构成了用户体验流程。

 

-关联性

指导用户理解和决策界面中组件之间的关系。

 

原理、技术、特性和量值

泰勒·韦恩(Tyler Waye)写道:“原理……是产生各种技术的基本前提和功能规则。无论发生什么,这些要素都保持一致。”我们可以设想一个层次结构,其中“原则”在顶部,“技术”在第二,接下来是“内容”,“量值”在最底部。可以将技术视为把原则实际执行的一种呈现手法,类似于我们常说的“设计风格”。

 

“属性”是特定对象的参数,这些参数会被动画化以创建该技术。这些包括(但不限于)位置,不透明度,比例,旋转,锚点,颜色,笔划宽度,形状等。“量值”是实际的数字属性值,它们会随时间变化以创建所谓的“动画”。

 

比如,设计一个飞机降落的动效,我们可以使用“模糊原理”,模糊和不透明度调至25px和70%。现在我们有了一些可以使用的工具。更重要的是,这些语言工具与任何特定的原型工具无关。

 

12条UX动效应用法则

缓动,偏移和延迟与定时有关;处理与对象关系有关;变换,数值变化,遮罩,叠加和复制都与对象连续性有关;视差与时间层次有关。模糊度,维度和滑动变焦都与空间连续性有关。

 

原则1:缓动

发生即时事件时,对象行为符合用户期望。

 

 

所有(实时或非实时)的动效都非常缓和。这种设计轻松搭建了一种自然舒适的氛围,也有一种连续感。顺便提一句,迪士尼将其称为“慢进慢出”。

 

 

左侧示例的线性运动,看起来很好像糟糕。第一个示例没有很强的动效,但呈现出来的也很流畅。以上三个示例都有确切的帧数,并且演示的时间相同,唯一的区别是动效的缓和程度。

 

作为关注可用性的设计师,除了美学之外,我们还需要多提出质疑,哪个示例更能提升可用性?我在这里介绍的情况是缓动固有的特点。在适当缓动情况下,用户会感觉动作本身是无缝的并且在很大程度上是不可见的,这是一件好事,因为它不会分散注意力。线性运动明显可见,并且感觉不完整且分散注意力。

 

我们再来看右边的示例,它也不并不是天衣无缝的。实际上,它具有明显的“设计”感,我们会注意到物体是如何着陆的,但与左侧线性运动示例相比,它仍然感觉“更正确”。

 

我想向您开放的是一个轻松的运动世界。作为设计师,您实际上可以在项目中创建和实现无限的“缓动”。所有这些放松都有自己的期望响应,它们会在用户中触发。

 

原理2:偏移和延迟

引入新元素和场景时,定义对象关系和层次结构。

 

 

“偏移与延迟”受迪斯尼动画原理影响,本例中为“跟随并重叠动作”。

但是,重要的是要注意,方法虽然类似,但目的和结果却不同。迪斯尼的《原理》可产生“更具吸引力的动画”,而《UI动画》的原理则可产生更多可用的体验。

 

这一原则的效用在于,它通过“告诉”用户界面中对象的性质,预先为用户设置成功的条件。上面参考中的叙述是顶部的两个对象是一组,而底部则是分开的。顶部的两个对象可以是非交互的图像和文本,而底部的对象可以是按钮。

 

甚至在用户注册这些对象是什么之前,设计人员就已经通过运动告知这些对象是“分离的”。

 

Credit: InVision

 

在上图示例中,悬浮按钮(FAB)转换成了包含三个按钮的标题导航元素。由于按钮在时间上彼此“偏移”,因此最终通过“分离”来提升可用性。换句话说,设计人员是在利用时间本身来说(甚至在用户注册对象之前)对象是分开的。这可以让用户完全独立于视觉设计,了解界面中对象的特性。

 

以下是一个示例:

 

Credit: Jordi Verdu

 

在上面的例子中,静态视觉设计告诉我们在背景上有图标。假设这些图标都是彼此独立的,并且做着不同的事情。

 

图标被分组为行,并且表现得像单个对象。它们的标题同样被分组为行,并且表现得像单个对象。动效告诉用户这些界面元素不是她的眼睛所看到的。在这种情况下,我们可以说界面中对象的时间行为并没有提升可用性。

原则3:创建关联性

与多个对象进行交互时,创建空间和时间层次关系。

 

 

这是一项强大的原理,可“关联”用户界面中的对象。在上面的示例中,顶部或“子级”对象的“ scale”和“ position”属性作为底部或“父级”对象的“ position”属性的父级。

 

处理对象属性与其他对象属性的链接,创建对象关系和层次结构。

还可以使设计人员更好地协调用户界面中的时间,同时与用户交流对象关系的本质。回想一下,对象的“属性”包括以下内容:“比例”,“不透明度”,“位置”,“旋转”,“形状”,“颜色”,“值”等。这些属性中的任何一个都可以链接到其他任何属性,以在用户体验中创造协同作用。

 

Credit: Andrew J Lee, Frank Rapacciuolo

 

在左侧示例中,“表情”元素的“ y轴”是圆形指示器,也是“ x轴”的父级。当圆形指示器元素沿水平轴移动时,其“子级”元素沿水平和垂直方向移动(同时被遮罩)。此功能最好可以“实时”互动,当用户直接操作界面对象时,设计人员通过动效与用户沟通,将其联系起来。

 

创建关联有3种形式:“直接关联”(请参见上面的两个“延迟”示例,“反向”示例,请参见下文)。

 

 

延迟和反向

原则4:变换

对象实用程序更改时,创建连续的叙述流状态。

 

 

关于运动原理“转换”中的UX的文章已经很多。在某些方面,它是动画原理中最明显和最深刻的部分。

 

转换是最容易识别的,主要是因为它效果很突出。我们注意到,“提交”按钮将形状更改为径向进度条,最后再次将形状更改为确认复选标记。它完整的展示了一个功能,并引起了用户注意。

 

Credit: Colin Garven

 

变换所做的是无缝地将用户转换为不同的UX状态或“是”(如这是一个按钮,这是一个放射状的进度条,这是一个复选标记),引导成所需的结果。通过这些功能空间将用户吸引到了最终目的地。

 

转换的作用是将用户体验中的关键时刻从认知上“分块”为一系列无缝且连续的事件。这种无缝性可以提高用户的感知度,留存率和任务成功率。

原则5:量值变化

当量值主体发生变化时,创建动态且连续的叙事关系。

 

 

基于文本的界面对象(即数字和文本)可以更改其值。这是那些“难以捉摸的明显”概念之一。

 

 

文本和数字更改非常常见,以至于它们绕过我们,而我们却没有给他们带来区别和严谨性,以评估它们在提升可用性方面的作用。

 

那么,当值改变时用户会经历什么?在用户体验中,运动中的12个用户体验原则是提升可用性的机会。这里的三个机会是将用户与数据背后的现实,代理的概念以及价值本身的动态性质联系起来。

 

让我们看一下用户仪表板的示例。

 

 

当数字值未进行加载时,用户看到的数字对象是静态的。它们就像涂漆的标志,显示时速限制为55英里/小时。

 

数字和值表示现实中正在发生的事情。现实可能是时间,收入,游戏得分,业务指标,健身跟踪等。我们通过运动来区分的是“量值主体”是动态的,而这些量值反映的是该动态价值集中的某些东西。

 

这种关系不仅会被视觉上包含价值的静态对象所迷失,而且还会失去另一个更深层次的机会。

 

 

Credit: Barthelemy Chalvet, Gal Shir, Unknown

原则6:遮罩

当通过显示或隐藏对象或组的哪一部分确定实用程序时,在接口对象或对象组中创建连续性。

 

 

遮盖对象的行为可以被认为是遮盖对象形状与效果之间的关系。

因为设计师们熟悉静态设计中的遮盖,我们有必要同UX运动原理“屏蔽”做区分,因为它是以一个行为动作发生,而不是作为一个状态。

 

通过暂时使用对象的显示和隐藏区域,效用以连续和无缝的方式转换。这也具有保留叙述流的效果。

 

Credit: Anish Chandran

 

在示例中,页眉变成相册时会更改边界形状和位置,但不会更改内容。既改变了图像的效果,同时将内容保留在蒙版中——这是个相当巧妙的技巧。这是非实时发生的,是一种过渡,在用户执行某个操作后即被激活。

 

请记住,UI动画原理是暂时出现的,并通过连续性、叙述、关系和期望来提升可用性。在上述参考中,对象本身不变,但也具有边界和位置,这两个因素最决定设计的样子。

原则7:覆盖

当分层对象依赖于位置时,在视觉平地中创建与空间的关系。

 

 

叠加层通过允许用户利用平地排序属性,来克服非空间层次结构的缺乏,从而提升可用性。为了使飞机稍微降落,Overlay允许设计人员使用运动来传达与位置有关的对象,这些对象存在于非3D空间中其他对象的后面或前面。

 

Credit: Bady, Javi Pérez

 

在左侧的示例中,前景对象向右滑动以显示其他背景对象的位置。在右侧的示例中,整个场景向下滑动以显示其他内容和选项(同时使用“偏移与延迟原理”传达对象的个性)。在一定程度上,作为设计师,“层次”的概念是如此明显以至于不言而喻。

原则8:克隆

当新对象出现和分开时,创建连续性、关系和叙述。

 

 

在当前场景中(以及从当前对象中)创建新对象时,以叙述方式说明它们的外观非常重要。在此宣言中,我强烈主张为对象的起源和离开创建叙事框架的重要性。

 

简单的不透明褪色往往无法达到此效果。遮罩,克隆和维度是三种基于可用性的方法,可以产生很棒的使用体验。

 

Credit: Jakub Antalík, Jakub Antalík, Unknown

原则9:模糊

允许用户在空间上定位自己与对象或场景的关系,而非在视觉层次。

 

 

与“蒙版运动原理”中的UX相似,“模糊化”既作为静态现象又作为暂时现象存在。这可能会使没有时间思考经验的设计师(即瞬间之间的瞬间)感到困惑。设计人员通常按屏幕设计或按任务设计。认为遮蔽是被遮盖的行为,而不是被遮盖的状态。静态设计表示被遮盖的状态,引入时间可以使我们了解物体被遮挡的行为。

 

Credit: Virgil Pana, Apple

 

从以上两个示例中,我们可以看到,看起来像透明对象或叠加层的遮挡也是一种涉及时间上多个属性的交互。各种常见的技术包括模糊效果和降低整体对象透明度,使用户知道她正在操作的其他非主要内容,即在主要对象层次结构“之后”存在的世界。

原则10:视差

用户滚动时,在视觉平面中创建空间层次结构。

 

 

作为运动原理中的UX,“视差”描述了以不同速率运动的不同界面对象。

使用视差,用户可以在保持设计完整性的同时专注于主要动作和内容。背景元素会为用户在知觉和认知上“消失”。

 

Credit: Austin Neill, Michael Sevilla

 

 

这对用户的影响是,在使用期间清楚地定义各种对象关系。前景对象或移动“快速”的对象在用户面前显示的“更近”。同样,背景物体或“移动较慢”的物体也被视为“离得更远”。

 

设计人员可以使用时间本身来创建这些关系,以告诉用户界面中哪些对象具有更高的优先级。因此,将背景或非交互式元素进一步“推后”是有意义的。

原则11:维度

当新对象出现和离开时,提供空间叙事框架。

 

 

对用户体验至关重要的是连续性现象以及位置感。维度提供了一种强大的逻辑方式来克服用户觉得平庸的体验。人类非常善于使用空间框架在现实世界和数字体验中导航。提供空间维度的出现及消失的参考点,有助于增强用户对于位置的感知。

 

此外,维度原则克服了视觉平面中的分层悖论,出现在其他对象的“前面”或“后面”。维度以三种方式呈现:折纸维度,浮动维度和对象维度。折纸的维数可以用“折叠”或“铰接”式的三维界面对象来考虑。

 

折纸维度示例

 

由于将多个对象组合为“折纸”结构,因此即使看不见隐藏对象,在空间上仍可以说它们“存在”。这有效地将用户体验呈现为连续的空间事件,用户可以在交互模型本身以及界面对象本身完成操作。

 

浮动维度为接口对象提供了空间的起源和偏离,使交互模型直观且具有很强的叙事性。

 

浮动维数示例

 

在上面的示例中,维度是通过使用3D“卡片”来实现的。这提供了支持视觉设计的强大叙事框架。通过“翻转”卡片来扩展叙述,以访问其他内容和交互性。

 

维度是一种强大的引入新元素的方法,可以最小地降低突发性。维度系数会让交互对象具有更模拟真实感。

 

对象维数示例

 

多个2D层在3D空间中排列形成真实尺寸的对象,它们的维度是在实时和非实时过渡时刻显示的。物体维数指使用者在不可见的空间位置上产生对物体效用的敏锐意识。

原则12:Dolly&Zoom

在导航界面对象和空间时保持连续性和空间叙述。

 

 

移动(Dolly)和变焦(Zoom)是电影概念,指的是与相机有关的对象的运动,并且图像本身在帧中的大小从远摄到近摄平滑地变化(反之亦然)。

 

在某些情况下,无法判断对象是否正在缩放,它是否正在朝3D空间中的相机移动或相机是否朝着3D空间中的对象移动,以下三个示例说明了可能的情况。

 

图层是在摇动,缩放还是在移动相机?

 

将“移动”和“缩放”的实例视为独立的,因为它们涉及连续变换,并且满足运动原理中用户体验的要求:它们通过运动来提升可用性。

 

左边的两个图像是镜头滑动缩放,而右边的图像变焦缩放

 

多莉(Dolly)是一个电影术语,适用于推进或远离对象的相机运动(它也适用于水平“跟踪”运动,但在可用性方面不那么重要)。

 

Credit: Apple

 

在UX中,在空间上,此运动指的是观察者视角的变化,也可能是指在对象更改位置时保持静态的视角。多莉原理通过连续性和叙述性,来无缝过度对象目标。多莉还可以结合“尺寸原则”,从而获得更多空间体验和更多的深度,向用户传达当前视图“前”或“后”的其他区域。

 

缩放指的是既不是透视也不是物体在空间上的移动,而是物体本身在缩放(或者我们的视野正在缩小,从而导致图像放大)。这向用户传达对象所在“内部”区域的信息。

 

 



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

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

这些UI大技巧你会了吗?

天宇 系统UI设计文章及欣赏

对于很多设计师来讲在设计界面过程中往往会忽略掉很多的细节,比如卡片的排版、文字的排版、各种状态的反馈等等,特别是刚入行的设计师在做页面时往往是直接拿到竞品的页面搬运到自己产品上,这种做法理论上不会让自己的页面出错,但是很多人往往忽略了一点,就是别人这么设计的目标是什么,是否会匹配自己的设计目标,如果不了解这些贸然的去搬运设计,那么时间久了会养成一个不好的习惯,需要设计师去进行设计时可能就会遇到很多难点,作为初级设计师或者刚入行的设计师,前期可以去进行搬运设计,但是一定要了解别人为什么这么做。

接下来将分享12个设计上的小技巧,大部分在日常设计中都会遇到,了解到这些设计细节,可以让我们的界面更加高效、易用、美观提升用户体验。

 

目录

一、快捷交互

二、提升交互路径

三、问题前置

四、提升可读性

五、点击引导

六、注意饱和度

七、禁止特殊字体

八、按钮也要有层级

九、图标保持一致

十、利用对比

十一、图文叠加

十二、注意遮罩透明

 

一、快捷交互

我在做界面时可以时常利用交互手势去帮助用户提升操作效率,避免繁杂小操作步骤



左侧为什么错??
左图中针对单条消息的操作汇聚到了icon内,对于用户理解成本比较高,当用户想要去删除或者屏蔽消息时需要通过聚合入口才能完成操作,大大的提升了用户操作成本。



建议正确做法~~
我们可以在类似的消息场景或者其他列表形式的场景中,添加一些交互手势,随着手机系统的更新,用户的操作习惯已经被各大产品培养的非常成熟,并不用担心用户无法操作的情况,增加手势有弊端也有优势,右图中手势增加了用户首次使用的学习成本,但是降低了高频功能的操作成本,这个理论上是可以接
受的。

 

 

实际产品中的运用

 

 

 

 

 

 

 

二、提升交互路径

利用拇指定律把关键的操作入口元素等,放置右侧提升用户操作效率。



左侧为什么错??
左图中把按钮放置了模块左下侧,这样是不利于用户进行操作,当然如果整个模块的热区都是同一个,这样并没有什么问题,用户点击卡片区域任何位置都能够完成下一步操作,如果出现一个模块内存在多个热区入口,而用户想要到达目标必须通过按钮点击才能进入,那么左图中的排版位置就会提升用户的操作时间。



建议正确做法~~
当一个页面内出现多个相同模块或者一个模块出现多个热区入口时,按钮点击区域有限,我们设计时就可以利用拇指定律进行排版,如右图中布局,将按钮放置右侧可以便于用户在右手操作时快速到达目标,因为国内使用右手的人数远远大于左手用户,所以我们需要满足大部分的体验,合理利用拇指定律。
相关定律:费兹定律、拇指定律

 

 

 

 

实际产品中的运用

 

 

三、问题前置

对于我们来讲很多东西是简单的,但是不乏会有一些用户是陌生的,对于他们来讲可能会有填写成本。



左侧为什么错??
左图中理论上并不是错,我们经常设计表单时都会用的提示话术,但是我们需要考虑更多维度的东西,对于我们来讲填写这种表单非常简单,例如个别用户,可能会临时忘了邮箱格式,又或者输入手机号时多填了一位数等等情况,用户错误一次操作步骤就会多一步,反之就是降低使用产品时的体验。



建议正确做法~~
如右图中,我们设计时可以更改提示的话术,帮助用户把问题前置,当用户看到提示邮箱时就会按照格式去填写,通过把手机号的位数拆分,让用户更好的记忆数字,这样无论对产品还是用户都没有任何损失,反而能降低错误频率。

 

 

实际产品中的运用

 

 

 

 

 

 

 

四、提升可读性

无论是页面还是模块,用户在阅读时是已扫读的方式进行浏览,我们需要保证页面的文字元素具备一定的规律,以此来提升阅读效率。



左侧为什么错??
左图中可以看到,文字与输入框放在同一列进行展示,这样一方面不利于后续的文字扩展,通常这种表单填写的页面,在页面中都是具有很大的空间位置,这样排布会造成视觉上的不规律和拥挤,降低了筛选效率,当然如果是模块区域很小的情况下,可以适当的进行使用。



建议正确做法~~
右图中我们把文字与输入区域上下排布,虽然文字长短不一,但依据对齐原则在竖列情况看是具备对齐规律的,有效的提升信息筛选效率。

 

 

 

实际产品中的运用

 

 

 

 

 

 

五、点击引导

我们在做系统功能模块时需要注意添加功能点击引导,用户对此类消息模块认知上会默认不可点击,因此需要我们加以引导。



左侧为什么错??
我们常见的消息模块内容为两种,一种是互动类消息即用户与用户,另一种时是系统消息即产品推送的内容,前者基于用户习惯而言用户已经没有使用成本默认是可以进行点击交互,后者因为部分产品会把系统消息作为展示的形式给用户,但是有些产品的系统消息却是可以点击交互,这就导致了用户认知上出现了混乱,左图中像系统通知功能通知其实从视觉上看,并不具备点击欲望,因此可能会对用户造成错误的理解。



建议正确做法~~
当我们在设计时需要注意,若消息列表中存在系统类消息并且可以进行交互,在设计时可以添加向箭头、红点提示等方式告知用户可以点击,如果该功能有数据指标,这种方式也同样能赋能产品指标。

 

 

 

实际产品中的案例

 

 

 

 

 

 

 

六、注意饱和度

目前市场上产品几乎都有深色版本,我们在设计时深色版本的颜色时需要注意饱和度的高低,同样的饱和度在黑色背景上会比白色背景上更加亮,这跟人的视觉感官有很大的关系,因此我们在做黑色版本时需要注意是否调整饱和度。



左侧为什么错??
在黑色背景中使用过高的饱和度会刺激眼睛,很多深色版本都是从白色模式通过反向颜色直接调整,而彩色元素会直接运用到深色中,那么就会造成一个问题,因为我们习惯在白色模式下看颜色,忽然切换到黑色中看彩色刺激程度非常高“就像黑夜中忽然打开手电筒”,对眼睛的伤害很高。



建议正确做法~~
我们在设计深色版本时可以根据产品主色降低饱和度,包括图标等元素,以此来缓冲对用户视觉感官的刺激,目前很多大厂的处理方式是直接在彩色元素上添加一层黑色透明遮罩进行处理,这样无需在添加更多的颜色规范。

 

 

 

实际产品中的案例

 

 

 

 

 

 

 

七、禁止特殊字体

在设计模块或者页面时不建议使用特殊字体来突出文字层级,这样会导致视觉不统一,以及开发成本增加。



左侧为什么错??
左图中灰色字使用了特殊字体,看起来虽然好看,但在实际开发中会导致开发成本增加,我们产品一般使用的是系统字体,若使用特殊字体需要让开发同学添加对应字体包,这样会导致我们的产品包的内存过大,除非产品中默认一直使用该特殊字体,这样才有使用的价值。



建议正确做法~~
一般系统字体就能够满足我们的设计需求,在UI设计中我们可以通过不同的字体粗细来调整文字层级,这样能够保证视觉更加统一,减少产品包大小。

 

 

 

实际产品中的案例

 

 

 

 

 

 

 

八、按钮也要有层级

在设计时需要注意多个入口在同一位置时,需要把它们进行层级划分,避免影响用户决策



左侧为什么错??
图中可以看到,两个面性按钮非常明显的在模块中,当用户在浏览页面中很容易出现困惑,到底需要点击哪个才能购买预定,因为两个都是面性无法快速进行定位入口,这样不仅影响用户决策效率,还会影响产品点击率。



建议正确做法~~
建议设计类似模块中时,无论是pc还是移动端都需要对入口进行结构划分,这样能够使用户在浏览页面时快速定位到入口,提升决策效率,做体验是解决用户的思考时间。

 

 

 

实际产品中的案例

 

 

 

 

 

 

 

 

九、图标保持一致

在UI设计中使用图标时,要保持一致性,确保他们共有相同的视觉风格,相同的重量,填充和描边。不要混搭。



左侧为什么错??
可以看到左图中的图标并不统一,线性里面掺杂着面性点缀,这在UI设计中严重违背了一致性的原则,会导致我们的页面不够严谨专业。



建议正确做法~~
在设计图标时,首先要保证图标风格一致,其次在这个基础上保证图标的描边粗细、视觉占比重量、颜色等,不要出现混搭风格。

 

 

 

实际产品中的案例

 

 

 

 

 

 

 

 

十、利用对比

在设计页面模块时,可以多利对比度的方式来体现设计的表现力,鲜明直接的色值能够直接表达事物的性质以及特点,通过对比,也能够更加清晰的强调设计中的重点,这样给用户的印象会更深刻,同样会给产品带来一定的趣味性。



左侧为什么错??
左图中单看视觉也没问题,只是在表现上图标与背景融入到一块了,导致视觉表现力较差,在设计中如果符合产品风格的前提下,我们可以避免这种方式,这种方式虽然具有视觉效果但不够强,对用户的记忆点不够深刻。



建议正确做法~~
设计到类似的模块时我们可以利用对比的关系,以此突出视觉元素,通过颜色焦点引导用户关注,强化用户印象同时还能增加页面的视觉表现力和氛围感。

 

 

 

实际产品中的案例

 

 

 

 

 

 

 

 

十一、图文叠加

在设计图文叠加的卡片或者页面时,我们需要注意不同明度的图片上,文字识别是否有阻碍,一般情况会通过遮罩方式避免这个情况。



左侧为什么错??
左图中在深色图片下字体的可读性是没有问题的,但当出现文字底部区域的图片相对复杂时便会影响识别,第二种情况当图片明度过高时文字同样无法识别,试想一下,一张白色调性的图片上放文字,那基本无法看清,严重影响阅读体验。



建议正确做法~~
在界面设计时如果遇到类似的卡片,建议在文字区域添加渐变遮罩的方式,以此保证文字的识别度,或者添加纯黑色透明遮罩进行处理,这样可以兼容不同环境的图片与文字的重叠,保证基本的阅读体验。

 

 

 

实际产品中的案例

 

 

 

 

 

 

 

 

十二、注意遮罩透明

UI设计中经常会遇到弹窗,弹窗是需要配合页面遮罩来让用户进行专注操作,不同的遮罩透明度所带来的专注度也不同。



左侧为什么错??
左图中我们看到,遮罩的透明度过低,我案例设置的是17%,此时弹窗内容与页面内容结构上区分并不是很明显,一般弹窗是用来让用户跳脱页面内容,从而浏览弹窗内容,转变用户目标,当弹窗无法聚焦时便很难达到目标,并且视觉上层级更加混乱。



建议正确做法~~
右图中案例我把透明度调整到了37%,我们此时再看弹窗很容易就忽略页面内容,因为灰色越高,遮挡度越高,用户跳脱感就越强,这样我们可以让用户专注弹窗内容,同时视觉结构上也区分很明显。

 

 

 

 

实际产品中的案例

 

 

 



作者:爱吃猫的鱼___
链接:https://www.zcool.com.cn/article/ZMTQzNTQ3Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

网页原型设计怎么做?新手入门必看

ui设计分享达人

如今,全球有超过10亿个活跃网站,每个网站都在争夺用户的注意力。面对这样卷到极致的竞争,如何才能让你的网站脱颖而出,迅速抓住用户的心?
本文将从网站设计的第一步出发,带你深入了解网页原型设计的核心方法、常用工具及实际设计流程,助你一步步打造成功的网页设计。
 
一、什么是网页原型设计?
网页原型设计是指在网站开发之前,通过低保真或高保真的可视化模型,来展示网站各个页面的结构、功能以及用户交互的流程。它是网站设计的第一步,也是至关重要的一步,能够在项目初始帮助团队明确项目需求、验证设计思路,并确保最终的网站符合预期。
 
一般来说,网页原型设计有以下几个核心目标:
1)清晰展示页面布局和结构:
通过原型,设计师可以快速确定网页的各个模块、布局和元素的相对位置,确保信息的层次感和易用性。
2)测试用户交互流程:
通过添加可点击的交互元素,原型设计需要模拟出用户的实际操作路径,便于提前发现潜在的体验问题。
3)快速验证设计思路:
验证网站整体设计思路的可行性,减少后期返工的风险。
4)沟通和协作工具:
原型作为设计初期的视觉化表达,改动更容易,便于不同角色的团队成员进行沟通和反馈,提高协作效率。
 
二、网页原型设计结构及元素
在进行网页原型设计时,我们要先梳理好网页结构。一个典型的网页通常由以下几个部分构成,每一部分都有需要注意的设计要点。
1、头部(Header)
网页头部通常包含导航栏、品牌Logo、搜索框、以及用户登录/注册按钮。
一个清晰、简洁的导航栏能够极大提升用户的浏览效率。需要注意的是,导航按钮数量不宜过多,建议在3-7个之间,如果分类实在过多,可以使用超级菜单设计。
2、内容区(Content Area)
这是网页的核心部分,包含文本、图片、视频等多种内容形式。
因为这部分内容较多,我们在设计时一定要注意信息的分层。通常,重要的信息要展示在最核心区域,比如首屏中心位,用户无需滚动页面即可看到。
另外,要注意使用合适的留白避免信息的拥挤感,帮助用户聚焦在关键信息上;内容排版应考虑阅读流畅度,标题与正文间的对比度需要足够明显,文字与背景色的搭配也需确保可读性。
3、侧边栏(Sidebar)
侧边栏常用于展示额外的导航、推荐内容或广告信息。一个有效的侧边栏设计应提供辅助导航,而不至于让用户感到分散注意力。设计时要避免过于复杂的内容堆积,通常侧边栏的宽度应控制在页面总宽度的25%-30%左右,并确保主要内容不被遮挡或挤压。
4、页脚(Footer)
网站的底部称为页脚,通常包含版权信息、联系信息、相关链接等内容。设计时要确保底部信息不显得冗杂,并通过合适的排版和颜色对比,使用户在需要时能够轻松找到底部的关键信息。还可以在底部加入社交媒体图标,方便用户进一步关注品牌动态。
5、交互元素(Interactive Elements)
每一个按钮的设计、每一段文字的排版,都会影响用户在页面上的行为选择。像网页中的按钮、表单、链接、图标等交互元素,都直接影响用户的操作体验。
我们在设计时,尽量让按钮更加直观,色彩搭配上与整体页面协调,同时保证具备足够的对比度,告知用户可以点击。其次,表单设计需简洁、清晰,每个输入框需带有明确的提示信息,以减少用户出错的可能性。至于图标,尽量使用通用图标,避免引发用户误解。
 
三、5款优秀的网页原型设计工具
目前市面上有很多优秀的网页原型设计工具,这里我重点为大家介绍5款,大家可以根据需求选择一款合适的工具~
1、摹客RP
摹客RP是一款专业的在线网页原型设计工具,无需代码,轻松打造逼真的网页原型。它功能全面,具备界面设计、组件设计、交互设计等核心原型设计能;上手容易,即使没有设计基础,也能快速使用组件搭建出网页界面。
网页原型设计怎么做?新手入门必看
 
 
主要功能点和亮点
1)丰富的组件与素材:摹客RP有丰富的预设组件库、扩展组件库、图标库以及免费的项目模板,并且预设组件自带交互效果,大幅提高原型设计效率;
2)强大的交互功能:交互功能全面,支持页面交互、命令交互、状态交互与画板交互。其交互能力是国产设计工具中最接近Axure的,并且相较于Axure操作更加简单易上手;
3)优秀的团队协作:支持多人协作,团队成员可以同时编辑和评论原型,实现协同设计和版本控制。
价格:
可免费使用
学习曲线
:简单易用
使用环境
:基于浏览器使用
推荐理由
:摹客RP具备强大的快速原型设计能力,适合从简单线框设计到复杂交互原型的各种需求。同时,它的相性价比很高,是小白产品经理和很多团队的理想选择。
推荐评级
:⭐⭐⭐⭐⭐
 
2、UXpin
官网:https://www.uxpin.com/
UXpin是一款功能丰富的网页原型设计工具,核心功能涵盖交互式原型设计、设计系统管理、实时协作和评论、可视化设计和布局、设备适配性和预览、用户测试和反馈等等。
网页原型设计怎么做?新手入门必看
 
 
主要功能点和亮点:
1)强大的交互设计功能,可以使用按钮、链接、状态转换等交互元素,清晰展示用户体验的设计意图;
2)支持设计系统的创建和管理,可以定义和维护共享的设计元素和样式;
3)丰富的第三方集成和插件,比如Sketch、Adobe Creative Cloud等,丰富的插件和扩展增强了设计功能。
价格:
29美元/月起
学习难度:
中等
使用环境:
基于浏览器使用
推荐理由:
UXpin有强大的交互设计功能,组件资源丰富,无缝对接UI设计软件。
推荐评级:⭐⭐⭐⭐
 
3、Axure
官网:https://www.axure.com/
作为老牌的高保真网页原型设计工具,Axure提供了丰富的交互效果和自定义样式,可以让产品经理和设计师更好地制作高保真的网页原型图。
网页原型设计怎么做?新手入门必看
 
 
主要功能点和亮点:
1)强大的交互设计功能,具有丰富的交互元素和动画效果,可以创建互动链路、状态变化和过渡效果等高度交互性的原型;
2)内置丰富的组件库,涵盖了常见的UI元素和交互模式,快速拖放即可使用;
3)生成专业可交付的设计文档,便于与开发人员和利益相关者沟通。
价格:
25美元/人/月起
学习难度:
学习曲线较陡,特别是对于初学者来说,复杂的交互设计和逻辑设置需要一定时间学习和实践。
使用环境
:需要下载客户端使用
推荐理由
:Axure强大的功能和高度自定义能力,使得设计师能够精确地呈现用户操作路径和交互细节。
推荐评级
:⭐⭐⭐⭐
 
4、Figma
官网:https://www.figma.com/
Figma是一款知名的在线UI设计工具,也可以设计网页原型,优秀的界面设计能力很适合设计高保真网页。
网页原型设计怎么做?新手入门必看
 
 
主要功能点和亮点:
1)丰富而灵活的布局和排版工具,包含自动布局、网格系统、对齐工具等;
2)开放的插件生态系统,可以接入第三方扩展软件,集成其他工具功能,定制产品设计需求和工作流程;
3)强大的设计组件和样式库功能,设计师可以将常用的UI元素、图标、按钮等制作成组件,并且在不同项目中重复使用;
价格:
免费版和付费版(12美元/用户/月)
学习难度:
比较简单
使用环境:
基于浏览器,无设备限制
推荐理由:
轻量级设计神器,界面超美,使用体验感极佳,UI设计师也爱用
推荐评级:⭐⭐⭐⭐⭐
 
5、Proto.io
官网:https://proto.io/
Proto.io是一款直接将工具定位及协作化能力写在产品名上的原型设计工具,其明确清晰的产品定位决定了其所有功能都是为原型设计能力服务的,它的动画功能相对强大,适合设计交互复杂的网页原型。
网页原型设计怎么做?新手入门必看
 
 
主要功能点和亮点
1)丰富的预设组件与素材:
无需从0开始制作项目,直接使用预设库中的内容就能快速完成界面的搭建,辅以必要的属性样式设置,很快就能完成界面设计工作。
2)快速演示与分享:
支持在各类设备上进行演示,并且能快速通过分享演示链接,将项目分享给同事或客户。
价格:
29美元/月起
学习曲线:
操作简便,适合初学者。
使用环境
:Windows、macOS
推荐理由
:Proto.io是创建高度交互式原型的理想工具,是移动交互设计的首选工具。
推荐评级
:⭐⭐⭐⭐
 
四、如何绘制网页原型图?
了解完了工具,那如何开始绘制网页原型图呢?我以摹客RP为例,教你快速上手!
1、创建网页原型项目
注册并登陆摹客RP(
https://www.mockplus.cn/rp
),点击使用,新建原型项目,选择Web原型,填写项目名。
网页原型设计怎么做?新手入门必看
 
 
2、绘制网页线框
开始绘制网页原型时,建议从低保真的线框图开始。这一阶段的重点是设计出网页的整体结构、功能模块和信息层次的。不要过多关注视觉细节,而是将注意力放在用户交互流程和页面跳转上。
网页原型设计怎么做?新手入门必看
 
 
3、给元素添加交互
在线框图的基础上,逐步增加交互元素。通过点击、输入、拖动等交互方式,模拟用户实际浏览的操作流程。这一步不仅能够帮助团队更直观地理解用户体验,还能提前发现潜在的逻辑问题。
4、设计高保真网页原型
在经过多轮验证和反馈后,逐步转向高保真原型的设计。在这一阶段,设计师需要加入视觉设计元素,包括颜色、字体、图标、动画等。高保真原型应该尽可能接近最终产品的外观和操作体验,为开发团队提供明确的参考。
网页原型设计怎么做?新手入门必看
 
 
5、反馈与迭代
网页原型设计并不是一蹴而就的。在完成初稿设计后,及时与团队和种子用户分享,收集反馈并进行必要的修改。通过不断的反馈和迭代,确保原型能够最大限度地贴近用户需求和产品目标。
通过以上几个步骤,你就可以顺利完成网页原型图的绘制了,为后续开发打下坚实的基础。要注意的是,无论是低保真还是高保真原型,每个环节的清晰沟通和快速迭代,才是成功的关键。
 
优秀的网页设计不仅在于精美的视觉效果,更在于能够顺利引导并留住用户。希望通过本文的介绍,你能对网页原型设计有更全面的理解。当然,最好的提升自己设计能力的方法就是实践起来,设计出属于你的精美网站吧!


作者:摹客设计云
链接:https://www.zcool.com.cn/article/ZMTYzOTA5Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

完整设计方案4步走:从需求分析到设计验证,打造卓越项目

ui设计分享达人

引言:设计流程的重要性
在项目实施的过程中,设计流程如同一座桥梁,连接着创意与现实的彼岸。它不仅是项目成功的关键,更是确保项目顺利进行、高效完成的保障。设计流程涵盖了从需求分析到方案设计,再到方案落地,最后到设计验证的每一个环节,每一步都至关重要,可根据项目资源、时间等因素进行取舍。
拥有一套完整的设计流程对于项目的成功至关重要。它可以帮助你明确项目的目标和方向,避免在项目实施的过程中迷失;也可以帮助你找到最佳的实现路径,提高项目的效率和质量;并且可以帮助你及时发现和解决问题,降低项目的风险。
今天,我们就来聊聊这套完整的设计流程,它包含四个关键步骤:需求分析、方案设计、方案落地和设计验证。这四个步骤相互关联、相互依存,共同构成了设计项目成功的基石。我将通过一个具体的项目案例——CBB货架平台,来展开解说如何在项目实施中运用这套设计流程。
第一步:需求分析——项目成功的基石
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
需求分析是项目实施的起点,也是项目成功的基石。在这一阶段,我们需要深入了解项目的市场环境、当前现状以及用户需求,为后续的方案设计提供有力的支撑。
1.1. 分析市场环境
市场环境是项目实施的宏观背景,它直接影响着项目的定位和策略。我们需要对市场进行深入的分析,了解市场的规模、增长率、竞争格局以及潜在的机会和挑战。通过市场环境分析,我们可以明确项目的市场定位,为后续的方案设计提供方向性的指导。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
1.2. 分析当前现状
当前现状是项目实施的微观背景,它反映了项目目前所处的状态和问题。我们需要对项目现状进行深入的分析,了解项目的资源、技术、流程以及存在的问题和挑战。通过现状分析,我们可以找到项目的痛点和瓶颈,为后续的方案设计提供针对性的解决方案。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
1.3. 调研用户需求
用户需求是项目成功的关键。我们需要通过问卷调查、访谈、用户画像等方式,深入了解用户的需求和期望。这些需求和期望将直接指导我们的方案设计,确保项目最终能够满足用户的实际需求。在调研用户需求的过程中,我们还需要注意倾听用户的声音,理解他们的痛点和期望,为后续的方案设计提供有力的支持。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
 
1.4 明确目标
在了解了所需要的大量信息后,可以拆解并细化项目的整体目标。这包括项目的业务目标、产品目标、用户目标,并且通过这些信息推导出设计目标。明确的目标将作为后续分析的基准,确保每一步都朝着正确的方向前进。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
 
1.5. 制定工作计划
在完成了市场环境、当前现状和用户需求的分析后,我们需要制定一个详细的工作计划。这个计划将明确我们后续的工作内容、时间节点和责任人。通过制定工作计划,我们可以确保项目的有序进行,提高工作效率和质量。同时,工作计划还可以作为项目管理的依据,帮助我们及时发现和解决问题,确保项目的顺利进行。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
 
需求分析是一个复杂而细致的过程,它需要我们综合运用各种方法和工具,深入了解项目的市场环境、当前现状和用户需求。只有这样,我们才能为后续的方案设计提供有力的支撑,确保项目的成功实施。
 
第二步:方案设计——创意与理性的碰撞
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
在完成了详尽的需求分析后,我们步入了项目设计的核心阶段——方案设计。这一阶段是创意与理性思维的碰撞,是技术与艺术的融合,旨在将需求分析阶段所收集的信息转化为具体、可行的设计方案。以下是方案设计的五个关键要素:
2.1. 信息架构
信息架构是方案设计的基石,它决定了信息如何在系统中被组织、分类和呈现。一个清晰、合理的信息架构能够帮助用户快速找到所需信息,提升用户体验。在构建信息架构时,我们需要考虑信息的层次结构、分类逻辑、标签命名以及信息之间的关联关系。通过绘制信息架构图,我们可以直观地展示信息的组织方式,为后续的设计工作提供指导。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
2.2. 用户流程
用户流程描述了用户在使用产品或服务时的一系列操作步骤。一个流畅、简洁的用户流程能够降低用户的学习成本,提高用户满意度。在设计用户流程时,我们需要从用户的角度出发,模拟用户的使用场景,识别并优化潜在的障碍点。通过绘制用户流程图,我们可以清晰地展示用户从进入产品到完成任务的整个过程,确保每一步都符合用户的预期。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
2.3. 业务流程
业务流程是产品或服务背后的业务逻辑和工作流程。一个高效、稳定的业务流程能够确保产品或服务的正常运行,提升业务效率。在设计业务流程时,我们需要深入了解业务需求,识别关键业务节点和决策点,确保业务流程的合理性、有效性和安全性。通过绘制业务流程图,我们可以清晰地展示业务流程的各个环节和逻辑关系,为后续的开发和测试工作提供基础。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
2.4. 界面设计
界面设计是方案设计的直观体现,它决定了用户与产品或服务之间的交互方式。一个美观、易用的界面设计能够吸引用户的注意力,提升用户的使用体验。在设计界面时,我们需要遵循用户认知规律,注重色彩搭配、布局设计、图标和文字的选用等细节。通过绘制界面原型和进行用户测试,我们可以不断优化界面设计,确保它符合用户的审美和使用习惯。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
 
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
 
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
2.5. UX规范
UX规范是确保用户体验一致性和稳定性的重要保障。它涵盖了界面设计、交互设计、信息架构等方面的标准和规范。在制定UX规范时,我们需要考虑产品的品牌定位、用户群体以及使用场景等因素,确保规范的科学性、实用性和可操作性。通过制定UX规范,我们可以确保不同设计师和开发人员在设计和开发过程中遵循相同的标准和原则,从而提升产品的整体质量和用户体验。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
在方案设计阶段,我们需要综合运用以上五个关键要素,通过创意与理性的碰撞,将需求分析阶段所收集的信息转化为具体、可行的设计方案。同时,我们还需要注重与团队成员的沟通和协作,确保设计方案的可行性和可实施性。
 
第三步:方案落地——从蓝图到现实的跨越
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
方案设计完成后,接下来便是将这份精心策划的蓝图转化为现实的过程,即方案落地。这一步骤要求我们将设计方案转化为实际的产品或服务,确保设计理念和用户体验在实际应用中得以实现。以下是方案落地的三个关键环节:
3.1. 敏捷评估
在方案落地初期,采用敏捷方法进行快速迭代和评估至关重要。敏捷评估能够帮助团队快速识别设计方案的可行性,以及在实际开发过程中可能遇到的挑战。通过定期召开敏捷会议,团队成员可以共同讨论设计方案的实施进展,分享遇到的问题和解决方案,及时调整开发计划。此外,敏捷评估还鼓励团队成员之间的紧密合作,促进信息的及时共享,确保项目能够按照既定的时间表和预算顺利推进。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
3.2. 开发跟进
开发跟进是确保设计方案得以准确实现的关键环节。在这一阶段,开发团队需要紧密配合设计团队,将设计方案转化为实际的代码和功能。为了确保开发过程的高效和准确,开发团队需要深入理解设计方案,明确开发目标和要求。同时,开发团队还需要与开发工具、框架和库保持同步,确保开发工作的顺利进行。在开发过程中,开发团队还需要定期与设计团队进行沟通,及时反馈开发进展和遇到的问题,以便设计团队及时进行调整和优化。
 
3.3. 设计走查
设计走查是确保设计方案在实际应用中得以准确实现的重要手段。在设计走查过程中,设计团队需要对开发完成的产品或服务进行详细的检查,确保设计理念和用户体验在实际应用中得以体现。设计走查的内容包括但不限于界面布局、色彩搭配、交互逻辑、动画效果等方面。通过设计走查,设计团队可以及时发现并纠正开发过程中可能存在的问题,确保产品的质量和用户体验符合预期。同时,设计走查还可以为后续的测试和用户验收提供有力的支持,确保产品能够顺利上线并赢得用户的认可。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
在方案落地过程中,敏捷评估、开发跟进和设计走查这三个环节相互关联、相互依存,共同构成了从蓝图到现实的桥梁。通过这三个环节的紧密配合和高效协作,我们可以将设计方案转化为高质量的产品或服务,实现设计理念和用户体验的完美结合。
 
第四步:设计验证——确保项目价值的实现
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
设计验证是项目设计的最后一步,也是确保项目价值得以实现的关键环节。在这一阶段,我们需要通过科学、系统的调研和验证方法,来评估项目设计是否达到了预期的目标,以及在实际应用中是否具备足够的竞争力。以下是设计验证的四个核心步骤:
4.1. 调研方案制定
在设计验证初期,我们需要制定一个详尽的调研方案,以明确调研的目标、方法、指标和对象。调研目标应与项目设计的核心目标保持一致,如验证用户体验是否达到预期、产品功能是否满足用户需求等。调研方法可以采用问卷调查、用户访谈、行为数据收集等多种方式,以确保调研结果的全面性和准确性。验证指标应根据调研目标进行具体设定,如用户满意度、产品使用率、故障率等。调研对象应涵盖目标用户群体、竞争对手、行业专家等多个层面,以获取全面、深入的调研信息。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
4.2. 调研结果分析
在收集到足够的调研数据后,我们需要对调研结果进行深入的分析。分析内容应包括调研数据的统计描述、趋势分析、相关性分析等,以揭示数据背后的规律和趋势。同时,我们还需要将调研结果与项目设计的预期目标进行对比,以评估项目设计是否达到了预期效果。对于调研中发现的亮点和不足,我们需要进行详细的记录和梳理,为后续的问题原因分析和持续改进提供依据。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
4.3. 问题原因分析
在调研结果分析的基础上,我们需要对发现的问题进行深入的原因分析。原因分析应遵循科学、严谨的方法,如因果图、鱼骨图等,以揭示问题产生的根本原因。同时,我们还需要将原因分析与项目设计的各个环节进行关联,以找出设计过程中的不足之处。通过问题分析,我们可以为后续的持续改进和优化提供明确的方向和思路。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 
4.4. 持续改进与优化
针对调研中发现的问题和原因分析的结果,我们需要制定详细的持续改进和优化策略。这包括问题记录与跟踪、迭代计划制定、持续优化策略等多个方面。问题记录与跟踪可以确保问题得到及时、有效的解决;迭代计划制定可以明确改进的方向和时间节点;持续优化策略则涵盖了技术改进、用户体验优化、市场营销等多个层面,以确保项目设计能够持续适应市场变化和用户需求。在持续改进与优化的过程中,我们还需要注重与团队成员的沟通和协作,确保改进措施的有效实施和落地。
设计验证是项目设计流程中不可或缺的一环,它通过对项目设计的全面、深入验证,确保项目价值得以实现。通过制定科学的调研方案、深入分析调研结果、准确查找问题原因以及制定有效的持续改进策略,我们可以不断提升项目设计的质量和竞争力,为用户创造更好的体验和价值。
 
总结
总的来说,设计方案4步走流程——需求分析、方案设计、方案落地、设计验证,构成了一个全面且高效的设计管理体系。这一流程不仅确保了项目从初步构想到最终实现的每一步都经过深思熟虑和精心规划,而且强调了团队协作与持续改进的核心价值。在需求分析阶段,我们深入理解用户需求,为项目奠定坚实基础;方案设计阶段则通过创意与理性的结合,创造出既实用又富有吸引力的产品;方案落地阶段,通过紧密的团队协作,确保设计理念得以准确实现;而设计验证阶段,则通过科学的方法验证项目的实际效果,确保项目价值得以实现。
此外,团队协作的力量贯穿于整个流程,是项目成功的关键。持续改进的精神则促使我们不断反思和优化,提升项目设计的竞争力。展望未来,智能化、个性化和绿色设计将成为设计方案的重要趋势,希望所有的设计人都能紧跟时代步伐,不断创新和突破,为用户创造更加卓越的设计体验。
完整设计方案4步走:从需求分析到设计验证,打造卓越项目
 
 

作者:元气大团长
链接:https://www.zcool.com.cn/article/ZMTY0Nzc5Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

“字”在必得:金融界面字体的奥秘

ui设计分享达人

“字”在必得:金融界面字体的奥秘
 
 
 
引言
想象一下,你正在使用一个股票交易应用,屏幕上满是瞬息万变的数字、曲线和箭头,心跳也随着这些数据的波动而加速。在这样的环境中,如何迅速抓住关键信息,成为了每个用户面临的挑战。这时,字体就如同一位无声的向导,巧妙地引导着视线,将复杂的数据变得清晰易读。
 
金融界面的字体设计,远不止是“好看”这么简单。它需要在美学与功能之间找到精确的平衡,不仅要传达大量实时信息,还要给用户带来一种“可信赖”的安全感。这一点,正是金融行业与电商、社交或娱乐行业的根本区别。后者可能更加注重吸引眼球的视觉冲击,而金融行业则更强调精确、简洁与专业。
 
接下来,本文将从金融行业独特的字体需求入手,探讨其与其他行业的差异,并总结出金融界面字体设计的最佳实践。不论你是设计师,还是普通用户,相信你都会从中发现那些往往被忽视,却又至关重要的“字体奥秘”。
 
一、金融字体的三大特性
金融界面的字体设计,就像一位训练有素的解码员,面对的是高强度的信息“风暴”。它需要快速、高效地帮用户从数据海洋中提取关键信息,而这一切的实现,都依赖于三个关键特性:
高信息密度的适应性
动态数据的稳定性
专业性与权威感
“字”在必得:金融界面字体的奥秘
 
 
 
1.
高信息密度:让复杂不再复杂
金融界面充满了动态数字、趋势图和密密麻麻的百分比。如果没有合适的字体,这些内容可能会让人头昏脑涨。就像在拥挤的街市中寻找一家咖啡馆,清晰的标牌显得尤为重要。
“字”在必得:金融界面字体的奥秘
 
 
字体清晰度
面对密集的信息,简洁、清晰的字体是首选。试想,如果用复杂的花哨字体来展示股票代码,用户可能要盯着屏幕好几秒才能辨认清楚,这无疑是灾难性的体验。
层次感与区分度
同一界面中的信息有轻重之分。有些内容是“聚光灯下的明星”,需要立即吸引用户注意;而另一些则是“背景板”,应该低调而辅助。通过合理调整字号、粗细和颜色搭配,帮助用户快速聚焦重要数据。例如,“实时股票价格”可以采用加粗字体,而“涨跌幅”表头则可以使用较细的字体来区分。
 
2.
实时性:数据跳舞,视觉稳如泰山
在金融行业,“实时性”是绝对的主角。股票、外汇甚至加密货币的价格可能在眨眼间改变。字体设计需要确保数据在更新时的清晰与稳定,就像车轮飞速旋转时,轮胎必须紧贴地面。
“字”在必得:金融界面字体的奥秘
 
 
字体稳定性
没有什么比刷新数据时字体突然跳动或模糊更令人抓狂了!理想的字体应能在动态变化中保持一致的可读性,为用户带来平稳、舒适的视觉体验。
动态反馈
想象一下,当涨幅和跌幅数据实时变化,采用不同的颜色和粗细,用户可以瞬间识别市场走势。这不仅提升了信息处理效率,还增强了操作的沉浸感。
 
3.
专业性:稳重的“西装”,可信的“外表”
金融界面需要向用户传递一种“别担心,我很可靠”的感觉,而字体设计正是这种信任感的重要来源。与电商或娱乐行业的活泼风格不同,金融字体更像穿着整齐西装的专业人士。
“字”在必得:金融界面字体的奥秘
 
 
避免装饰性字体
过于个性的字体可能会干扰用户的注意力,甚至让重要信息被误解。无衬线字体(如思源黑体、Roboto)是稳重感和专业性的最佳代表。
增强信任感
字体越简洁,用户对平台的信任度就越高。一套清晰、干净、符合行业气质的字体设计,能让用户安心浏览复杂的数据,专注于做出决策。
 
二、其他行业特色:字体的多面角色
如果金融行业的字体设计是“冷静的思考者”,那么其他行业则是“多才多艺的演员”,总是试图用字体来吸引眼球、打动人心。在电商、社交和娱乐行业,字体不仅仅是信息的载体,更是情感和创意的表达。
“字”在必得:金融界面字体的奥秘
 
 
 
1.
电商行业:字体的“销售员”
在电商平台,字体就像一位经验丰富的销售员,用鲜明的视觉表现力抓住用户的注意力,并促使他们买单。
“字”在必得:金融界面字体的奥秘
 
 
视觉冲击力与吸引力
 
想象一下“双十一”购物节,各大平台的促销页面是不是让你眼花缭乱?字体的大号、粗体和鲜艳的配色组合,在第一秒就能吸引你的视线。比如“50% OFF” 的字体常常比商品名称还大,就是为了让你忍不住点进去看看。
情感连接与品牌调性
 
年轻化品牌喜欢用俏皮的手写体,而奢侈品电商则钟爱优雅的衬线字体。字体不仅传递了促销信息,还在潜移默化中影响了用户对品牌的感知。
 
2.
社交行业:字体的“派对达人”
社交应用的核心是让用户互动和分享,因此字体设计往往追求轻松愉快的氛围,就像派对上的主角,总是让人忍不住多看几眼。
“字”在必得:金融界面字体的奥秘
 
 
年轻化与活力
 
一些社交平台甚至会用带有手绘感的字体,让界面更具个性和亲和力。比如,某些聊天应用在发送消息时动态变化的字体效果,仿佛在说:“嘿,这条消息真的很重要!”
多样性与趣味性
 
字体和表情符号、图标相结合,创造出丰富多彩的视觉体验。例如,用户可以选择不同的字体风格来个性化他们的动态或评论。
 
3.
娱乐行业:字体的“变装大师”
娱乐行业是字体创意的游乐场。无论是电影宣传海报还是游戏界面,字体都需要为内容增加戏剧感和沉浸感。
“字”在必得:金融界面字体的奥秘
 
 
创意与表现力
 
想象一个即将上映的超级英雄电影的海报。字体通常会有金属质感或充满力量的设计,直接让你感受到“英雄即将登场”的震撼。
个性化与情感表达
 
游戏界面的字体设计可能会融入奇幻风格的字形,让用户仿佛进入了另一个世界;音乐平台的字体则可能充满流动感,像是旋律在眼前跳动。
 
三、金融与其他行业的字体设计较量
如果说字体设计是一场马拉松,金融行业的选手永远在追求稳定和精准,而其他行业的选手则更关注如何在观众面前展现创意的“跑步姿势”。这两种风格背后,反映了它们各自独特的设计目标和用户需求。
“字”在必得:金融界面字体的奥秘
 
 
 
1.
功能性与表现力:冷静 vs 热情
“字”在必得:金融界面字体的奥秘
 
 
金融行业:功能性至上
 
金融行业的用户就像在忙碌的指挥室里工作,字体必须是他们的得力助手,能够迅速传递关键信息。字体的选择就像挑选工具,重在精准和可靠。“少即是多”的设计理念在这里大放异彩,过多的装饰性元素反而会干扰信息传递。
其他行业:表现力为主
 
在电商、社交或娱乐界面,字体更像是广告牌,随时吸引用户驻足。比如,电商促销信息的字体常常是大而醒目的;社交平台通过趣味字体为用户带来轻松感;娱乐行业则用独特的字形让内容充满故事感。
 
2.
信息结构:层次逻辑 vs 自由
“字”在必得:金融界面字体的奥秘
 
 
金融行业:严格的层次结构
 
金融界面中的信息常常需要清晰的层次划分,比如实时价格是最重要的,需要通过加粗和大字号体现,而次要信息则退居二线。就像在军事指挥中,谁是将军、谁是士兵,一眼就能分辨。
其他行业:灵活的信息呈现
 
在电商页面中,字体层次的逻辑可能被视觉冲击取代,比如突出打折力度而非商品细节;而在社交或娱乐界面中,字体的层次往往为情感服务,让用户感觉亲切或有趣就够了。
 
3.数据动态性:实时波动 vs 静态展示
“字”在必得:金融界面字体的奥秘
 
 
金融行业:实时性挑战
 
金融界面需要处理大量动态数据,字体必须在快速刷新中保持稳定。试想一个股票行情界面,如果数字跳动时字体变得模糊或失去对齐,用户的信任度可能瞬间下降。
其他行业:相对静态
 
电商页面的内容通常是静态的,比如商品描述或价格;即便有动态元素,也多是通过动画效果吸引眼球,字体本身无需承受“动态压力”。
 
4.品牌调性:权威感 vs 个性化
“字”在必得:金融界面字体的奥秘
 
 
金融行业:专业性第一
 
金融字体设计的目标是“稳”,这种稳重感通过简洁的无衬线字体传递,比如思源黑体或Roboto,确保用户感受到平台的专业和可信。
其他行业:个性至上
 
在其他行业,字体是品牌的代言人。比如,某奢侈品电商用优雅的衬线字体强调高端;某音乐平台则用流动感的字体展现年轻与活力。
 
四、让金融界面字体脱颖而出的设计秘诀
金融界面的字体设计是一门平衡艺术,它兼具美学与科学,不仅决定了界面的视觉吸引力,更直接影响用户处理信息的效率。以下是优化金融界面字体设计的几大关键策略,帮助设计师打造既专业又高效的用户体验。
“字”在必得:金融界面字体的奥秘
 
 
 
1. 字体选择:让专业与简洁说话
在金融界面中,字体不仅仅是信息的载体,它更像是隐形的指挥官,负责组织引导用户的注意力。
 
中文字体推荐:现代感与功能性的结合
 
选择具备简洁、清晰特性的无衬线字体,如思源黑体、苹方、Roboto。这些字体在小字号下依然保持出色的可读性,能够轻松适应高密度数据展示的场景。对全球用户的多语言需求而言,Noto 系列也是值得推荐的选择。
“字”在必得:金融界面字体的奥秘
 
 
等宽字体的魔力:数字对齐的“黄金法则”
 
在金融界面中,数字是用户最关注的核心信息。等宽字体(如 DIN PRO、Roboto Mono)通过统一的字符宽度确保数字整齐排列,特别适合用在价格列表、报表或实时行情中,帮助用户快速捕捉关键信息。
“字”在必得:金融界面字体的奥秘
 
 
避开复杂字体:稳重与效率优先
 
金融界面需要传递信任感和专业性。复杂、装饰性强的字体虽然吸引眼球,但可能分散注意力或降低信息传递的效率。设计师应选择以功能性为主导的字体风格。
“字”在必得:金融界面字体的奥秘
 
 
 
2. 字体搭配:让数据与文字“各司其职”
在金融界面中,清晰的视觉层次是高效信息传递的基础。字体搭配的关键是分工明确,既要突出重点,又要整体和谐。
 
分清主次:层次感提升阅读效率
 
界面中的主要数据(如股票实时价格)需要用更大的字号、加粗的字体突出显示,而次要信息(如涨跌幅或变化百分比)则采用较小字号或常规字体。这种层次化设计让用户无需费力寻找,便能迅速获取关键数据。
“字”在必得:金融界面字体的奥秘
 
 
信息密集型界面的优化:间距是关键
 
在展示大量数据的界面中,适当调整字体间距和行高可以显著提升阅读体验。狭小的间距会让用户感到压迫,而过大的间距又会浪费空间。设计师需要找到两者的平衡点,为信息营造“呼吸感”。
“字”在必得:金融界面字体的奥秘
 
 
字体混排的原则:风格统一
 
如果界面需要使用多种字体类型(如无衬线字体和等宽字体),确保它们在视觉风格上保持协调,例如字高、线条粗细的一致性,避免视觉上的割裂感。
“字”在必得:金融界面字体的奥秘
 
 
 
3. 色彩与字体:用视觉语言传递信息
色彩与字体在信息传递中密不可分,它们的协作能够显著提升数据的可读性和层次感。
 
红涨绿跌的经典搭配:快速传递状态信息
 
在中国金融界面中,红色表示涨幅、绿色表示跌幅已成为默认标准。设计师可以通过加粗字体、提高亮度等方式进一步强化状态信息。例如,将涨幅用红色粗体显示,同时增加动态效果,如数字跳动或背景渐变,吸引用户注意。
“字”在必得:金融界面字体的奥秘
 
 
背景与字体的对比度:清晰是第一要义
 
字体和背景之间的对比度直接决定了信息的可读性。在深色背景的图表上,使用白色字体能提供清晰的阅读体验,而浅色背景下则适合使用深色字体。对于复杂图表区域,可以增加半透明的背景色块,让数据文字脱颖而出。
“字”在必得:金融界面字体的奥秘
 
 
 
4. 全球化适配:超越语言的设计
随着金融平台的全球化扩展,字体设计需要适应多语言和跨文化的需求,保证用户无论身处何地都能获得一致的体验。
 
多语言统一性:跨语言风格一致
 
确保字体能够同时支持多种语言(例如中英混排),并在字形上保持协调。例如,思源黑体和 Noto 系列字体能够在中文和英文之间提供流畅的视觉过渡,避免出现风格突兀的情况。
“字”在必得:金融界面字体的奥秘
 
 
文化适配:因地制宜的设计调整
 
不同文化背景的用户在字体偏好上存在显著差异。例如,东亚用户通常倾向于简洁、现代的无衬线字体,这与当地强调简洁、直观和功能性的设计理念密切相关。而在欧洲,尤其是一些注重传统和权威感的市场,用户可能更偏好经典、优雅的衬线字体,因其在视觉上传达的稳定性和历史感。此外,字体的选择也要考虑当地的文化和审美偏好,设计师应根据目标用户的地域特点,做出适当的调整,以增强用户的视觉认同和品牌亲和力。
“字”在必得:金融界面字体的奥秘
 
 
从右到左语言的适配
 
对于阿拉伯语、希伯来语等从右到左书写的语言,设计师在界面设计中需要特别注意文字布局和对齐方式。与从左到右书写的语言不同,这些语言的阅读方向要求设计师重新调整文本流的排列,确保信息的传递符合用户的阅读习惯。此外,界面中的元素,如按钮、图标、导航栏等,也需要根据从右到左的阅读顺序进行相应的镜像处理,以确保用户能够自然而流畅地与界面互动,从而融入这些文化环境并提升用户体验。
“字”在必得:金融界面字体的奥秘
 
 
 
5. 测试与迭代:用户的眼睛不会说谎
字体设计的优劣,最终由用户的体验感受决定。通过反复测试和调整,可以确保字体在实际使用中的效果。
 
用户测试:直观反馈最重要
 
组织用户测试,观察他们在实际操作中的阅读速度和理解情况。通过热图分析,找出用户注意力的集中点,优化字体和信息的排布。
迭代优化:根据数据说话
 
结合用户行为数据(如点击率、跳出率),对字体样式、颜色对比度和层次感进行微调,持续改善用户体验。
“字”在必得:金融界面字体的奥秘
 
 
 
6.
金融界面字体设计原则:稳、准、简
“字”在必得:金融界面字体的奥秘
 
 
一句话记住原则:“稳、准、简”
“字”在必得:金融界面字体的奥秘
 
 
 
小结:
字体不仅仅是视觉元素,更是金融界面交流的核心载体。在金融这个精密的生态系统中,字体承载着远超其表面积的信息与功能价值。它不仅传递数据,更传递专业性、可信度和品牌特质。
 
优秀的金融界面字体设计犹如一位卓越的翻译,将复杂的数字语言转化为直观、清晰且易于理解的视觉语言。它需要在专业性与人性化之间找到微妙的平衡,在信息密度与阅读舒适度之间寻求最佳契合。
 
未来的金融界面字体设计将更加智能化、个性化,同时保持其核心价值:传递信息、建立信任、提升用户体验。设计师需要不断迭代,以用户的视角思考,用技术和美学共同塑造金融信息交互的新形态。
 
字体的力量,不仅在于其形态,更在于其所能承载的信息深度和情感温度。在金融界面中,每一个字符都在讲述一个故事,每一种字体都在构建一种信任。


作者:西子小宇宙
链接:https://www.zcool.com.cn/article/ZMTY1MDYxMg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

弥散风蛇年海报设计教程

ui设计分享达人

  • 风格:弥散复古风统一确认(背景绘制)。
  •  
    主体图形:蛇和灯笼作为蛇年新年的联想元素。
  •  
    点缀图形:采用冬季梅花和灯光星光来营造新年氛围。
  •  
    排版构图:是传统上下对称构图。
弥散风蛇年海报设计教程
 
 
2021年兴起的弥散风是通过色彩的渐变来创造出视觉上的模糊效果,极具氛围感。较低设计成本就能获得良好视觉效果,这样高性价比的弥散风这两年都很受欢迎。
这里使用的设计工具是「
行空设计
」,可PC端搜索使用,边看边操作效果更佳哦~
风格背景确认
此次海报用的是弥散复古风,所有图形需统一配色和风格,主要控制以下两个参数:
  •  
    图形设置「高斯模糊」5-40值不等
  •  
    配色采用橙红和蓝色复古撞色
弥散渐变背景,为了让背景渐变过渡更自然,由两个图形渐变构成,高斯模糊值40。两个形状的接壤处用钢笔工具自行调整即可。
弥散风蛇年海报设计教程
 
 
灯笼绘制
灯笼分灯身和两头台座。
  •  
    灯身:由两个椭圆形减去顶层得到对称两片扇面,再复制一次留下交集和第三个椭圆减去顶层得到第二对扇面,如此往复得到所有扇面组成灯身。灯身填充渐变色#F08B64透明度0%_#F84F67_#F2715A,高斯模糊10。
  •  
    台座:台座用长方形双击进入路径编辑,将底部两端锚点分别向反方向移动等距离即可。在上下两边中间新建锚点向上移动一定距离,双击锚点即可得到对称弧度,调整手柄去拟合灯身底部弧度即可。上台座填充渐变色#FD9F98透明度0-100%,下台座填充色#FAA191,高斯模糊10。
弥散风蛇年海报设计教程
 
 
蛇的绘制
蛇的绘制主要在于渐变自然,形态绘制用钢笔工具即可。
  •  
    蛇头:如图分三截进行渐变调整,渐变色#07E8F7,透明度100-0%,高斯模糊10。
  •  
    蛇尾:如图分两截进行渐变调整,渐变色#07E8F7,透明度0-100%,高斯模糊10。
  •  
    斑点:斑点为大小不一的圆,填充#F8F8BF,高斯模糊10。
弥散风蛇年海报设计教程
 
 
点缀图形
点缀图形不要求对称,因此用钢笔工具大致绘制出来即可。
梅花:分别绘制花蕊和花瓣,花瓣填充渐变#E74C48_#FFFFFF透明度0%,花蕊填充#F6D049
星星:不同大小的星星可以设置不同的高斯模糊,更具有动态美感。
弥散风蛇年海报设计教程
 
 
文字排版
“newyear”文字使用的是免费商用的字体是卡通字体「豆豆体P」,高斯模糊8。整体排版是上下排版,四个角落可以安排品牌logo和祝福文字等等,保持整体的对称美感。
弥散风蛇年海报设计教程
 


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

高效 PC 端界面设计,如何兼顾美观与实用?

ui设计分享达人

在数字化时代,PC 端软件和应用程序无处不在,无论是办公、娱乐还是学习,我们都离不开它们。一个优秀的 PC 端界面设计,不仅要美观,让用户赏心悦目,更要实用,能够高效地帮助用户完成各种任务。那么,如何在设计中兼顾美观与实用呢?本文将为你一一揭晓。

一、理解美观与实用的内涵

(一)美观的界面设计

美观的界面设计并非仅仅是视觉上的好看,它涉及到色彩的协调搭配、元素的合理布局以及风格的统一。色彩能够营造出不同的氛围,比如蓝色常给人专业、可靠的感觉,适合办公类软件;而橙色则充满活力,常用于娱乐类应用。合理的元素布局可以引导用户视线,让重要信息一目了然。统一的风格则能增强界面的整体感和品牌辨识度。

(二)实用的界面设计

实用的界面设计重点在于用户操作的便捷性和功能的高效实现。操作流程应简洁明了,避免繁琐的步骤。例如,文件保存功能应能让用户快速找到并完成保存动作。同时,界面要能准确传达功能信息,让用户无需过多思考就能明白每个按钮或菜单的作用。

二、平衡美观与实用的难点

在实际设计中,平衡美观与实用并非易事。有时为了追求美观,可能会采用一些复杂的设计元素或独特的布局,这可能会增加用户理解和操作的难度,影响实用性。反之,如果过于注重实用,界面可能会显得单调乏味,缺乏吸引力。比如,一些办公软件为了追求功能的全面展示,界面堆满了各种图标和菜单,导致用户眼花缭乱,降低了使用效率。

三、实现美观与实用兼顾的方法

(一)合理的布局设计

采用简洁清晰的布局结构,如常见的 “F” 型或 “Z” 型布局。“F” 型布局符合用户从左到右、从上到下的阅读习惯,适用于信息展示较多的界面;“Z” 型布局则更适合引导用户关注重要信息。同时,要合理划分界面区域,将相关功能模块放在一起,减少用户的操作路径。

(二)色彩的巧妙运用

选择合适的色彩搭配,避免过于刺眼或冲突的颜色组合。一般来说,主色调不宜超过三种,以一种主色调为主,搭配一两种辅助色。同时,要考虑色彩对用户情绪和注意力的影响。比如,在阅读类应用中,采用柔和的色调可以减轻用户眼睛的疲劳;而在警示类信息中,使用醒目的红色来引起用户的注意。

(三)元素的简洁与统一

界面元素要简洁明了,避免过多的装饰和复杂的图案。图标设计应具有明确的表意,让用户一看就懂。同时,保持界面元素风格的统一,包括字体、图标、按钮等,这样可以增强界面的整体感和专业性。

(四)用户反馈与迭代优化

在设计过程中,要充分收集用户的反馈意见。通过用户测试,了解用户在使用过程中遇到的问题和需求,根据反馈对界面进行迭代优化。不断调整和改进,才能使界面设计在美观与实用之间找到最佳的平衡点。

四、案例分析

以某知名办公软件为例,其界面设计简洁大方,采用了经典的蓝色调,给人专业、可靠的感觉。布局上,将常用功能如新建、打开、保存等放在显眼位置,方便用户操作。同时,通过简洁的图标和清晰的菜单,让用户能够快速找到所需功能。在不断收集用户反馈后,该软件持续优化界面,如调整某些功能的位置,使其操作更加便捷,同时也保持了界面的美观性。
高效 PC 端界面设计中,美观与实用并非相互矛盾,而是相辅相成的。通过合理的布局设计、巧妙的色彩运用、简洁统一的元素以及不断的用户反馈与迭代优化,我们完全可以打造出既美观又实用的 PC 端界面,为用户带来更好的使用体验。
 

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档