首页

产品体验增长中的3个核心招式

周周

本文将以「产品与用户之间的信任」为出发点,从产品体验的角度,对比产品体验层面的差异化,为大家提供设计思路,助力产品数据的增长,设计出既好看又好用的产品界面。

超全面的UI界面字体选取与使用指南

纯纯

最初的图形界面

文字和排版可以追溯到五千年前,而图形化界面仅仅只有40年的历史。最关键的转折点出现在1973年的施乐,最早的图形化界面出现在了他们的Alto电脑上,而这个设计就是现如今图形化界面设计的基础。在Alto 的界面诞生后的10年里,几乎是它一家独大,并且它也被大家视作为数字技术的未来。

绝对专业!超全面的UI界面字体选取与使用指南

早期的Alto 在80年代进化为著名的施乐之星,而施乐的这个设计方案也成为了第一个商用的操作系统图形化界面。

绝对专业!超全面的UI界面字体选取与使用指南

不过不论是Alto 还是施乐之星,都没能真正意义上崛起。不过施乐的图形化界面最终深深的影响了苹果和微软的道路,比尔盖茨和乔布斯先后在施乐的研发中心观摩了施乐之星的运作,而乔布斯更是在1984年先人一步发布了著名的Macintosh 系统,也就是后来我们所熟知的Mac OS。

绝对专业!超全面的UI界面字体选取与使用指南

Macintosh 的发布不仅仅意味着相对成熟的GUI的出现,而且它为大众带来了真正意义上的自定义字体的功能。这款系统内置了许多以著名城市命名的字体,也正是在此之后才有越来越多的著名字体的数字版本在数字平台上发布并应用。

绝对专业!超全面的UI界面字体选取与使用指南

仔细观察这些早期的字体,我们能够发现,虽然已经是图形化的界面,但是其中绝大多数的界面元素都还是以纯文本的形式而存在,它们以一种奇妙的方式被整合到一个界面当中。循着界面的发展历程沿路看过来,不难发现,文本和排版几乎是贯穿始终的主线,它是一个不容忽视的核心类别。

文本即界面

界面中的每一个文字、每一个字符都很重要。好的文本是好的设计。文本是最根本的界面,是我们设计师来塑造和打磨这些信息。

看看下面的天气界面的设计,想象一下将所有界面元素都摆在桌上会是什么样的效果:无非就是两张图,几个图标和一大堆文本。

绝对专业!超全面的UI界面字体选取与使用指南

作为设计师,工作并不是将一堆随机的内容和元素排布在屏幕上,让它们看起来够漂亮就行了。真实的情况是,我们要从最核心的内容和文本开始着手,然后从这里着手细化,并完善出其他的部分。这就是我们工作的核心。

文本的清晰度同样扮演着关键性的角色。如果我们的大脑花费一两秒钟单纯只是分辨一个字形,那么清晰度上的微小差异是无伤大雅的。可是当它们组合成为大段的文本,不同的字母组合构成不同的词汇、段落的时候,清晰度的影响就更大了,排版的重要性也显得更加明显了。

当然,影响界面设计的文本属性还有很多,比如平衡性,定位和层次结构,但是好的文案和排版的影响至少占据整体影响的95%。

在伟大的设计师眼里,文本不仅承载内容,而且可以构成界面。
– Oliver Reichenstein

我们如何阅读

既然屏幕上的文本显示是如此的重要,那么我们应当先了解人们是如何阅读的,而文本显示又是如何影响我们设计决策的。

读过Billy Whited 的文章《Setting Type for User Interface》之后,让我对于文本阅读的效率有了更深的认知。一个少于20个字母的独立单词放在句子中会更快被理解,而单独放置的时候我们需要耗费更长的时间来识别。

其实这个研究结果也表明我们阅读较长句子的时候,并非是逐个单词地阅读,而是跳跃着阅读功能性的词汇,我们将这种阅读方式称为离散跳跃式阅读,俗称扫视。

绝对专业!超全面的UI界面字体选取与使用指南

扫视让我们的阅读能力更强,我们甚至会跳过短的功能性词汇。

我们应当记住这一关键特征,因为我们的界面中所承载的词汇大多是孤立的单词。简单说来,界面是无法利用扫视这种方式来获取信息的。

总的来说,单词在阅读中发挥着无比重要的作用,无论是作为内容还是作为界面元素,均是如此。无疑,选择合适的字体就相当重要了。

绝对专业!超全面的UI界面字体选取与使用指南

过去,人们常常认为眼睛和大脑是通过单词的外轮廓(Bouma Shape)来识别单词,当然,后来的研究证明这个想法是错的,单词的可读性和易读性的影响因素不止是外轮廓,字母本身的形态、细节和清晰度同样深入的影响着它的识别度。

是什么让字母清晰可读?

其实这个问题一开始并不是那么好回答。阅读很大程度上依赖于我们的习惯,越常见的内容对我们而言越容易识别。这样一来,我们就不那么容易判断让字母清晰易读的影响因素了。为了了解这一点,我们需要将句子分割为单词,分解单词为字母,在字母中查看细节。

早在2008年,维多利亚大学心理学系根据测试结果得出结论,大写和小写的拉丁文字母是最容易识别的,也最易于阅读。

绝对专业!超全面的UI界面字体选取与使用指南

这项研究有趣的地方在于,它揭示了一个事实:每个字母延伸出来的线性端点是最易于识别的地方,也是每个字母的特点所在。

绝对专业!超全面的UI界面字体选取与使用指南

上面的图片标识出了这些最易于识别的部分。每一款字体在这些部分应当设计为最通用、最为人所熟悉的样式,同样的,它们也应该强调每个字母的差异。

在2010年的时候,另一项由 Sofie Beier 和 Kevin Larson 开启了一个新的研究项目,这项研究专注于测试经常被误读的字母和字符的识别度。

绝对专业!超全面的UI界面字体选取与使用指南

这项研究表明,在相同的字体和相同的尺寸、相同字重的情况下,有些字体或者变体的细节确实比其他的更加清晰、更易于识别。这项研究的结果说明,纤细的字体加粗之后识别度效果会明显会增强,而字母的X高度如果能够占据上伸区或者下探区的空间,识别度会更好。

绝对专业!超全面的UI界面字体选取与使用指南

为了更好的理解字体的清晰度的概念,你可以下载我所开发的这款工具 Legibility APP 来测试不同字体在模糊、炫光等多种不同情况下的清晰度和辨识度。这是一款处于测试阶段的工具,可以在Chrmoe、Opera和Safari 中运行。

UI中的字体使用

理解了用户阅读的方式和字体可读性的影响因素之后,我们应当开始了解UI中的字体的几个关键因素。下面是UI中字体使用的10个关键因素。

1、可读性

可读性是UI中字体所需考虑的首要因素。字母字形必须清晰可辨,作为UI元素,其中不同的字母必须可以被用户轻松辨别出差异。许多经典的字体,甚至包括 Helvetica ,都没办法清晰分辨 字母 i 的大写形态 I,和大写字母 L的小写形态 l,这在界面设计中无疑是有影响的。

绝对专业!超全面的UI界面字体选取与使用指南

上图中,左边的字体为 Source Sans Pro , 右边为 Helvetica,无疑对于 Illiterate 这个词Helvetica 字体下前三个字母完全无法分辨。有部分用户也同意Helvetica 并不适合作为UI界面的显示字体而存在,因为这款字体终究是为平面印刷显示而设计的,并非为屏幕而生。

在iOS 7 时代,苹果短暂地将 Helvetica 作为系统的主要显示字体的时候,曾对特定的用户群体造成过信息识别的困扰。这也最终催生了我们现在所看到的苹果官方字体 San Francisco。旧金山是为UI界面而生的字体,它的x高度比Helvetica 更高,字母间距更宽,字母间的识别度更高。

绝对专业!超全面的UI界面字体选取与使用指南

2、适度

一款理想的UI界面所用的字体,不应当过于“显眼”,而该是悄无声息,“隐型”的。当用户在试图完成某项任务的时候,字体不应当给用户以“出戏”或者“显眼”的感觉,也就是说,字体不应当超出用户的认知负荷,而内容和信息才应该成为真正的关注点。

绝对专业!超全面的UI界面字体选取与使用指南

3、灵活

给UI界面使用的字体应当具有灵活性。我们曾经为 Medium 做过用户体验设计,作为一个网页博客平台,我们很难去控制用户的能力、内容、浏览器、屏幕尺寸、网络带宽和连接速度,包括输入法。

所以我们最终为它所选取的字体应当支持大量不同的内容,在不同的尺寸下拥有良好的识别度,能够兼容不同的设备,尤其是在小屏幕上。Sans serifs 字体就是专门为小尺寸低分辨率屏幕而定制的。

绝对专业!超全面的UI界面字体选取与使用指南

4、x高度的上限

x高度的参考标准是小写字母x的高度,同等尺寸下,x高度更大的字体更易于识别。不过x高度也不是越大越好,当x高度超过一定限度的时候,小写字母n和小写字母h就很难分辨了,这一点应当注意。

绝对专业!超全面的UI界面字体选取与使用指南

5、更大宽高比

字母的宽度和高度的比例也是相当重要的一个属性。宽度和高度比例越高,字母在小屏幕上的识别度就越高。

绝对专业!超全面的UI界面字体选取与使用指南

6、宽松的字间距

字母之间的间距和字母内部的空间同样是影响字母可读的因素。字母间距太小同样会影响整体的可读性,而好的显示字体会更好的控制字母间距,确保单词在视觉上的“透气性”,甚至可以营造出一种韵律感。

不过字间距不是越宽松越好,太过宽松会让整个单词看起来过于松散。有一个值得参考的标准,就是字母之间的间距应当比字母内的开口缝隙略小一点。

绝对专业!超全面的UI界面字体选取与使用指南

7、低笔触对比度

许多字体不同的笔画粗细不同,而对于UI界面而言,笔触间的对比度越小识别度越好。较大的笔触对比度下,字体在小尺寸屏幕上,较细的笔画会难于分辨。

绝对专业!超全面的UI界面字体选取与使用指南

8、OpenType 功能

OpenType 功能对于字体而言是相当重要的。支持OpenType的字体拥有更大的灵活性,对于不同的语言和特殊的字符有着更为优良的兼容性。

绝对专业!超全面的UI界面字体选取与使用指南

9、备用字体

接下来要说的情况可能大家多少都碰到过。网页在完全加载出来之前,部分内容因为字体没有加载而无法显示。

绝对专业!超全面的UI界面字体选取与使用指南

其实这可以通过先加载本地字体,显示内容,等网页字体加载好了之后再行替换,以达到无阻塞显示。这种方法的缺陷是需要预先设定一个可调用的本地备用字体。

绝对专业!超全面的UI界面字体选取与使用指南

10、Hinting

Hinting 指的是为了字体为了保证最大的可读性而针对显示器状况进行调整的过程。Hinting 可以通过匹配显示器的像素栅格让字体显示更加清晰,降低误读的可能性。

这项技术最初是由苹果公司所提出的,不过因为TrueType 字体技术的出现,Hinting 正在消失。

绝对专业!超全面的UI界面字体选取与使用指南

未来

随着新的UI标准、排版技术的提升,字体技术也在不断的进步,在不远的未来,字体会从传感器获得信息,更好的兼容不同的环境、随着亮度、设备、距离而进行智能化的调整,甚至复杂而庞大的中文字体,也可能作为灵活的网页字体而存在。

绝对专业!超全面的UI界面字体选取与使用指南

字体会让我们的工作更加便捷

绝对专业!超全面的UI界面字体选取与使用指南

让界面交互更快,更加触手可及

绝对专业!超全面的UI界面字体选取与使用指南

让UI更加易用

绝对专业!超全面的UI界面字体选取与使用指南

更加便捷

绝对专业!超全面的UI界面字体选取与使用指南

也更加清晰而高效





文章来源:优设  作者:陈子木

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

从零开始设计产品的 10 个 UI/UX 启示

纯纯

Peter Drucker 说过:「量化才能管理。」这个格言后来成为了我的信条。我决定将我的目标量化,将它分解成为最基础的习惯来执行,并且以每天一定量的执行,来实现最终的目标。

从零开始设计产品的 10 个 UI/UX 启示

我们先构建了一个免费的 Chrome 插件 Confetti ,这是一个能够帮你追踪日常习惯的工具,每次完成一个任务,都会有五彩缤纷的纸屑效果出现,祝贺你守住了习惯,达成目标。

从零开始设计产品的 10 个 UI/UX 启示

以下见解希望对你有所帮助!

1、一开始就要界定好产品特性

从零开始设计产品的 10 个 UI/UX 启示

一开始,我和 Wilson 就决定使用3屏的主要功能,并构建了一个粗糙的原型。但是,我们没有足够的远见,无法设想我们的产品最终的方向,也没有对全部的想法进行深入的打磨。

最终,我们向后退了一步。我们回过头来,确定了最小可执行原型的发布日期,以及真正的核心功能。我们在 Notion 上创建了一个文档,并且开始梳理和管理哪些功能是「必需品」,哪些功能「如果有了会更好」。比如,登录、注册、新用户引导是必不可少的功能。但是,我们认为「重新排列习惯」是一个提升体验但是并不亟需的功能。

我们基于这一点,我们开始抓住核心功能,尽可能让它们足够易用,强化核心特性。通过确定核心功能的优先级,并且确定发布日期,借此缓解我们的精神压力,确定我们不会被成堆的功能所淹没。这也似地我们有足够的动力解决核心功能。

2、有很多流程和状态需要搞定

从零开始设计产品的 10 个 UI/UX 启示

在设计产品的时候,我经常被提醒要处理好每一个边缘情况,填好每一个坑,确保体验的顺畅。从零开始构建产品是一把双刃剑:基于自己的构想来创造产品是令人兴奋的,但是相应的,我需要经常在舒适区以外处理问题。

我一直在 Skookum 从事产品设计的工作,而这些工作通常都是在一定的约束条件下进行的,但是现在所要处理的产品则不同。之前的产品都可以借助现成的设计系统,有早已搭建好的设计语言,有完整的组件,有明确的 UI 状态,有非常明确的基础架构,但是这次是我自己的产品,所有的这些都没有。而且,这个产品还可能会存在几种极端的情况、流程和状态。

比如,在注册流程中,按钮会有默认、禁用、激活、填充、错误、悬停等几种状态,但是除了这些之外,我还需要考虑诸如密码重置的流程和体验,这可能会涉及到 6 个高度相似的 UI 界面状态:

  1. 输入 Email
  2. 重新发送 Email
  3. Email 通知设计
  4. 输入新的密码
  5. 错误界面
  6. 成功界面

这个过程中,有很多东西都令我一度感到迷惑,这也引发出我下一个要说的要点……

3、创建用户流程

从零开始设计产品的 10 个 UI/UX 启示

项目开始之后,我很快就遭遇了组织架构问题。因为我是在工作之余来创建这个产品,这导致我犯了一个非常严重的错误:我没有按照传统的产品流程来创建产品,这随后导致了一系列的问题。

按照标准的产品设计流程,我需要从用户流程开始创建,定义用户可能会执行的流程,并且针对主要的流程界面进行必要的总结说明。因为这个项目和之前的工作不一样,我一开始就忘记了遵循流程这件事情,我错误地将它视作为一个包含几个简单界面的简单项目(是不是听着特别耳熟?很多所谓的小项目翻车都是从这里开始的)。这样一来,当我开始处理诸多按钮的不同状态和界面变化的时候,整个用户流程变得混乱不堪,并且我很难确定其中的体验漏洞有哪些。

最终我停止了这种随性的设计方式,并且在 Whimsical 当中创建了完整的用户流程。于是我很快清楚了那些环节有所缺失,以及整个界面流程的走向。

按照用户流程来梳理界面的时候,可以对于整个产品的屏幕状态有所了解,并且随着产品的发展膨胀,用户流程的重要性会随之增长,成为至关重要的部分。

4、交互应该反馈到UI中

从零开始设计产品的 10 个 UI/UX 启示

的确,在完成整个 UI 之前,不应该开始向着项目当中添加动画。但是,不添加并不意味着你无需考虑。实际上,不同的微交互和动画对于实际的体验影响是巨大的。你在思考 UI 设计的时候,就应该考虑到微交互和动画的使用,避免在后续动效和交互落地的时候,进行不必要的修改。

比如,当我在设计「达成成就」这一体验的时候,我就考虑到了需要用到的微交互的效果,所以在我设计 UI 的时候可以顺着我自己的喜好来进行设计,并且将可能会用到的动效拖到某个角落暂时记下来,避免在设计 UI 的阶段,影响了整体的流程和效果。而后续加入动效的时候,就会方便很多。

我认为,将 UI 和交互结合起来考虑是非常重要的,因为两者共通塑造了体验。如果在设计 UI 的环节直接加动效,会让整个设计过程变得复杂臃肿。

5、尽早获得反馈

从零开始设计产品的 10 个 UI/UX 启示

其实这也是我在这个项目中犯的一个大错:等了太长时间才获得反馈。

我通常是在晚上回家和周末才有空推进这个项目,在很长的一段时间内,我没有真正告诉任何人。

当我终于同我的家人、朋友、用户以及网上乐于尝鲜的用户公布了这一产品之后,他们在使用过程中,开始注意到了很多细节上显而易见、但是我并没有发现的问题。我意识到我作为产品的设计者,是很容易陷入并沉迷用户体验当中比较孤立的一部分,反而会忽略很多显著的问题。

回想一下,如果我能尽早向用户和朋友展示设计和原型,那么我会在更早的时候发现问题,并且在获得反馈之后才进入开发阶段,弥补大量的损失。

6、在别处获得启发很重要

从零开始设计产品的 10 个 UI/UX 启示

很多设计师会认为,所有的想法都必须是原创的才行,否则就是欺诈。但是稍微想想,其实彻底的原创其实很少的。当你看到一个优秀的产品,它优秀的配色和恰到好处的交互可能会让你觉得:「已经有人做出来了,我的想法在它面前完全没法比拟。」

这种思维方式其实有着极大的缺陷,并且抑制了你的创造力。

当我发现我的设计有缺陷的时候,我会竭尽全力去搜索和了解更多网上已有的设计。我会观察和思考别的公司和产品是如何设计新用户引导流程的,如何管理用户个人信息的。我从来都没有复制被人的体验,但是会隔三差五去钻研别人所创造出来的优秀细节,然后将这些细节借鉴到我的设计当中。

我最喜欢的一个范例,是从模态状态下,旋转退出的效果。这是我偶然在一个网站上看到的效果,因此我决定将它添加到 Confetti 当中,我还在着陆页的按钮中加入了类似的特效。

事实上,一切设计都是混搭创造出来的。你借鉴细节并不意味着抄袭,不要害怕去发掘和学习别人的优势和亮点,你要学会有机地拆解和借鉴,灵活地运用到自己的设计当中,它就像调制鸡尾酒一样有趣。

7、勇敢面对身份的变换

从零开始设计产品的 10 个 UI/UX 启示

当我们开始设计的产品的时候,我和 Wilson 头顶上的身份就一直在变。我们是 UI设计师,要负责UX,要做交互,也制作动效,要进行平面设计,还要考虑市场营销,要管理产品,我们也要扮演其他的角色。

职责如此之多,以至于我们不可避免地遇到我们能力范围之外各种新问题。我们必须承认自己陷入了困境,寻求外部帮助成了必要的选择。

专注于自己专业的领域,其他不专业的方面来寻求外部帮助是非常合理的。比如在一个项目当中,一位艺术家负责了绝大多数的风景插画,另一位艺术家则完成了肖像画的部分,这很正常。

我希望产品的外观和功能能够保持高度的一致性,并且我确实做到了。但是不要误会我的意思,我并非是不敢走出舒适区去学习代码开发,而是在这样的项目当中,我并不适合从UI和UX领域延伸出去,毕竟完成项目的开发优先级比学习代码更高。

8、保持简单更重要

从零开始设计产品的 10 个 UI/UX 启示

尽管给 MVP 安排好了发布时间,可以防止这个项目被无限膨胀的功能特性和工作量所淹没,但是这样依然无法防止我们基于已有的功能进行改进。

很多人都喜欢 Reid Hoffman 的一句话:「如果你对于产品的第一版感觉不尴尬,那你一定是发布晚了。」不过,我们正式发布的第一版的产品,并不会显得太尴尬,但是目前来看,当时那种简单直观的状态,比起再花费好几个月时间反复打磨之后再发布,来得更好。

在发布新产品之前,我们必须考虑2个问题:

  1. 我们是否相信我们所构建的产品,能够为用户带来价值?
  2. 我们是否竭尽全力了?

这些问题让我们最终能够达成目标,且按时发布,避免分心。专注交付最核心的功能,而不是被一堆冗余的次要特性所压倒。

9、良好的交接更加省事省时

从零开始设计产品的 10 个 UI/UX 启示

从项目一开始我就一直在做项目的管理和组织设计素材,以便后面进行开发。不过,由于我一开始就使用了 Zeplin 这样的协同工具,确保了我可以轻松地将所有的素材都顺畅地交给负责开发的 Wilson。作为一款设计系统工具,Zeplin 让我无需浪费时间对素材进行分类,非常便捷。

在交接的过程中,我还做了一些优化:

  1. 将所有的界面都组织到了 Zeplin 当中,并且进行了处理
  2. 我给所有的画板进行了针对性的命名,方便检索
  3. 我在 XD 中标注了需要导出的素材
  4. 我保留了旧有的界面存档,并且确保交付的新版界面是最新的

10、一次写明所有的UX文案

从零开始设计产品的 10 个 UI/UX 启示

在设计 UI 的时候,界面中的文案部分是临时编写的,这促使了一次设计完成之后,整体的文案是不一致、不协调的。

我很希望一开始就创建了一个单独的文档,一次性将文案部分全部重写,包括提醒、注释、标签、弹出框提醒等等。而实际上,我的文案都是在设计 UI 的时候附带着写下来的,导致整体的一致性严重缺乏。

这种文案本身在调性上的缺乏,导致了整个产品在语气和用词上是混搭式的,一致性很差。

所以,在产品上线发布之后,一直在对文案进行修修补补。



文章来源:优设(陈子木)   作者:Danny Sapio





分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


UX设计全方案思考与呈现

纯纯


配色/图标什么的是基础吗?

之前一直没有太多关注过如何定义一个 APP 的配色,或者如何画一个漂亮的 icon。曾经的上级指示都是这些基础对商业的不可量化。于是我在思考一个问题,就是没有直观商业价值的设计要素都失去了意义变成了所谓基础的事情吗?

半年前面试字节的时候,面试官问了我有关配色的定义,细节到为什么是这个色值。当时十分震惊于这么细节的问题,之后我就想起了之前有位朋友给我发送过一份有关支付宝「蓝」的定义 pdf,洋洋洒洒几十页就是为了解释他们为啥用这个有点脏的蓝色#108ee9 当主色。

所以其实 APP 的配色/图标与主品牌是一脉相承的,它是品牌的延续与象征。它以最直观的态度传达给用户,这个产品以及品牌的调性,并以此建立最强有力的视觉识别性。所以我觉得它是可以有条件地展示在我们设计方案里的,但一定注意它的篇幅和表达的方式,维度在品牌传达这一层就对了。

至于如何展示和定义你的 APP 配色,一般 2 类情况。

1. 在品牌主视觉配色基础上的适配

这种情况一般适用品牌主视觉方案已经设计完毕,APP 端作为延续。这个时候一般注意配色从 CMYK 模式到 RGB 的转换,所以作为 APP 的配色,具体色值上可以稍作调整,使它更适配于 LED 屏的用户感知与舒适度。

另外可以使用透明度进行色彩分阶段,一般从 0-100% 分为 10 阶就足够我们日常界面设计使用了。

从零到一系列:UX设计全方案思考与呈现

2. 0-1定义APP配色

这种情况下我们从感性和理性 2 个角度去定义颜色。

从感性的角度分析:情绪板应该大家都熟知的了,根据不同的行业和用户定位得到相应的关键词。对应不同的关键词再搜集对应的图片,从图片和自然感知中提炼出主色。

从理性的角度分析:我们把色彩分为对比色、近似色、复合色、单一色、三角对立色和渐变色六种。根据产品的类型和定位,我们决定使用什么样的配色。比如一个年轻大学生专用的社交型 APP,我们可能就倾向更多地使用对比色这样的撞色得到更多潮流与青春的味道。

从零到一系列:UX设计全方案思考与呈现

至于图标的话我就更不用多说了,大家肯定都记得那些非常基础的绘制图标的法则。个人认为图标也不太需要放一个单独的篇幅去展示,除非它有一些新奇有趣的亮点。

界面框架,只是框架而已吗?

在之前的文章中有写过,匹配产品定位的界面框架一旦输出,对整个 APP 之后的迭代与功能设计都有很直接的影响。定义整体的UX 框架方案,是实践设计目标与策略的过程,基本围绕着这 3 个出发点:匹配产品定位、满足业务拓展性、符合舒适度美学 。

1. 定义整体框架

首先我们从宏观角度分析,一方面产品的业务线处于什么情况,是相对独立的业务主线产品(举例:拉勾)?还是平台级产品(里面包含了许多垂直的业务线,举例淘宝)?如果是平台级产品在整体框架设计时就需要考虑跨端跨业务的框架拓展型。

举个例子,就是在定义平台框架的时候要考虑这个框架与容器是不是同时适用于底下的子业务线,同时当这个框架到了 H5、小程序、PC 的时候需要做哪些适配调整,是否都可以很好地进行兼容适配。

另一方面,整体框架设计的类型是否符合设计目标。举个例子,无框式超大留白的框架设计虽然看上去很厉害,但在大部分商业产品中它的实用性却非常低的。假设说我们今天需要做一个电商类的 app,设计目标是希望能够提升业务转化以及购买效率,那么展示效率与功能分区就显得尤为重要,它就更适合一个相对紧凑的卡片式为主的框架设计。

其次从微观的角度来说,遍地就都是细节了。舒适度美学这一说,其实难免有些抽象,我们把它转为相对合理一些的落地原理就会清晰很多,像大家熟知的间距 4 倍数原理、对齐原则等等。但是这些微观的内容不建议大家放到方案展示里,因为它并没有针对单个方案的特殊性,更像一种大众共识。

从零到一系列:UX设计全方案思考与呈现

△ 多说无益,直接上最终的效果图,方便大家参考

2. 具体容器解析

我们特地把单独的容器部分拿出来解析,是因为自定义容器是展示核心业务最主要思考呈现,同时还可以配合运营做很多提升业务效率的配置。在做具体设计的时候,我们需要区分「端上固定」模块和「运营配置」模块之间的差别。

「端上固定」模块

顾名思义就是开发端上需要写死的模块。写死的模块意味着,无论一个配图还是一句文案,也只有开发童鞋修改后通过发版才能实现内容变更。一般适用于相对固定的产品功能以及 UGC 用户生产内容。比如:拉勾上传简历功能、斗鱼的直播间列表。

「运营配置」模块

相对「端上固定」,「运营配置」就不需要跟着发版,可以随时后台上传替换模块内的内容,适用于需要 PGC 生产的内容。说到这里很多童鞋可能马上就联想到 banner,弹窗的运营位了,但其实除了这些之外还有很多容器模块是需要灵活配置为「运营配置」模块才能更有效地提升运营业务价值。

我们可以这样来区分「运营配置」模块类型。

一种是纯运营配置模块,即设计与开发输出框架、定好配置字段限制之后,运营可以独立完成后台配置的。比如:资讯 app 0-1 前期的资讯列表内容。

另一种是运营设计配合模块,即需要设计配合运营输出一定的设计图才可以进行后台配置的。比如:常见的 banner、弹窗、热门推荐专题等。

在 0-1 的设计方案中,更推荐大家展示「运营配置」模块的内容与解析,因为 0-1 是个以拉新为主的阶段,运营显得尤为重要,所以我们的设计需要侧重考虑整体的运营效率与转化。

从零到一系列:UX设计全方案思考与呈现

如何展示亮点设计?

在我们概述完大部分的整体思考路径与设计方案后,我们需要由面到点,从全局提炼细节,突出自己的设计方案亮点。

而如何提炼这个亮点呢?是挑一个我设计的最好看的界面呢?还是直接放最复杂的那个流程?以下是推荐选择的亮点设计:

1. 完成理论实践,并可以量化价值的设计case

大家应该都了解,一些和设计息息相关的数据 UV/PV/GMV/ 相关业务指标等,以及一系列在实践中很好应用来解释设计方案的理论支撑比如 5W1H、GSM 与五度分析……这些数据和理论是支撑我们设计更饱满更有说服力的重要支点。

虽然在 0-1 的项目里,我们基本不太用得上优化数据比对(因为产品初期用户数量少,产品体验路径也是一直处于不断试错阶段),但是我们还是可以借用上文所述的一些方法论或者 A/B test 来完成我们的方案思考过程展示。

从零到一系列:UX设计全方案思考与呈现

那些你在完成践行设计策略完成设计目标时获得的数据指标要提前预知,养成习惯之后,你就可以快速轻松地察觉到哪里有可以做 A/B test、进行埋点数据比对的地方了。

2. 影响上中下游环节的设计case

除了对业务提升价值的项目外,我们有时候也需要注意对品牌设计、产品、运营、技术等上中下游造成影响力的设计项目。通常这类设计大部分也都是设计自驱发起的,能起到提升各方人效和业务效率的作用。

举例的话,我能马上联想到的就是多方协作的大型线上组件库,可以参考阿里的 Ant design、滴滴的魔方,在之后的版本拓展中甚至可以延展成功能更加强大的多方协作 UX 设计资源中心。

从零到一系列:UX设计全方案思考与呈现

规范与组件库的定义真的备受关注?

感觉近期面过的 80% 的公司都对组件库的定义非常关注,所以我们要做的不仅仅只是放一个视觉规范或者组件库的全景图,而需要对组件库进行拆解。



文章来源:优设(土拨鼠)   作者:Nana的设计锦囊



分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


界面交互动效核心知识的分类与总结

纯纯

一.  什么是界面交互动效?

界面交互动效是展现界面间的转换和界面内元素变化的交互反馈。而效果就表现在触发与结束的过程中,表现清晰的层级关系,自然的引出与结束。交互动效有着承上启下的重要作用。

二. 界面交互动效是用来干什么的?

  • 让用户清晰地感受到当前所处场景和层级关系。
  • 多种UI元素之间的相互转换。
  • 给用户制造惊喜感使用户愉悦。

三. 界面交互动效五大注意点

  • 避免动效过于花哨、酷炫、标新立。
  • 在效率型应用中,过度、无意义的动画只会阻塞任务流程。
  • 动作动效不超过1秒。
  • 用户专注内容时,不要用吸引注意的动画去打扰。
  • 出现频率高的操作动效,避免用户反感,延迟操作时间。

四. 如何设置缓动曲线与时间让动效更加自然,可以看下面的一些总结

  • linear曲线(匀速运动)除了一些特殊场景如加载、很少被使用。
  • easeIn(先缓后快)使用场景较少,主要在掉落、中使用。
  • easeInOut(头尾缓、中间快)通常在轮转切换的动画中使用,这类动画的触发对象与运动对象并不是同一个元素。
  • easeOut(先快后缓)最常见的效果,其触发对象与运动对象往往是同一个。主要用在展开、收起、出现、移动等动画中。当不知道用哪个缓动曲线时,用这个一般不会错。
  • 曲度主要表现运动过程的力的大小,曲度越大,启示力或阻力越大。
  • 回弹则表现的是运动的剧烈程度及对象的质地。
  • 运动时间一般都控制在0.3s-0.8s之间,过长的时间会让人感觉拖沓,不自然。

超全面!界面交互动效核心知识的分类与总结

五. 界面交互动效如果以动效的表现属性来分可以分为两种

第一种:为衔接类型动画

主要针对不同界面直接的衔接,为带来更流畅的操作观感所做的设计,弥补两个界面直接的差异所带来的用户感知落差。

第二种:特效类动画

特效的核心目的是为了吸引用户的注意力,提高信息敏感度,在游戏界面设计当中使用更为广泛,能够带来更加绚丽的动态画面。

六.界面交互动效如果以界面的维度来说可以分为以下两类

第一类:界面内的交互动效

在一个界面内的交互动效特别多,例如点击加号出现下拉菜单,出现浮层动画提示,点击舵式导航出现选择类型和遮罩,点击按钮出现评论点赞,当前页面的展开收起,加载等等。如下图所示:

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

第二类:界面间的交互动效

几个界面之间的的交互动效通常是平缓过渡到下一页。常见的有以下几类:

超全面!界面交互动效核心知识的分类与总结

△ 硬切到下一页

超全面!界面交互动效核心知识的分类与总结

△ 下一页从右往左推入(上一页从左往右推出)

超全面!界面交互动效核心知识的分类与总结

△  下一页从下往上弹出

超全面!界面交互动效核心知识的分类与总结

△  上一页的元素过渡到下一页

总结:

  • 动效创意方面的创新要依据用户的认知模型。单纯很炫很酷的动效如果脱离了用户的认知模型,那么这样的交互动效对于整个产品来说是有害的。
  • 做界面交互动效的目的是为了更好地落地。如何更好地高效地表现我们设计的动效。同时使得我们制作的动效可以很好的运用到实现落地中,这是很重要的,不然所有的一切都是海市蜃楼。
文章来源:优设  作者:程远

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


快速提升 UI 设计效果的 7 个小技巧

周周

在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候,我们大多只需要进行有限度的微调,即可达到颇为不错的效果。在之前,我已经撰写了很多实用的 UI & UX 优化小贴士(看完文章在文末获取),这篇文章继续增加 7 条实用的建议,一起来看看吧!

B端设计基础指南:网格系统

周周

B端设计基础指南:网格系统

从3个方面,帮你掌握时间显示的设计细节

纯纯

背景

“时间”作为人机交互界面中经常出现的元素,本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现,关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的,这是出于怎样的考虑呢?今天我们就来聊一聊,如何在产品设计中把握“时间”显示的诀窍,让其在页面中发挥最大的作用。

“时间”元素的分类

按照“时间”元素在页面中的出现场景和所起到的作用,可以大致归为以下几类:

A. 事件的关键构成要素

时间作为描述整个事件的重要组成部分,缺失后会对原本所要传达的内容产生严重的影响,进而影响用户的使用预期和结果,比方说用户可能不能以一个较低的价格完成商品购买,或错过了产品发布会的时间。

从3个方面,帮你掌握时间显示的设计细节

B. 行为的时间标记

指用户本人作为行为主体或行为的接收对象,在某一动作发生后为其所打上的时间标记,比方说“我”购买商品下单的时间或收到一封邮件的时间。

从3个方面,帮你掌握时间显示的设计细节

C. 内容的附属信息

用户在使用产品进行内容消费时,时间作为该条内容的附属信息,起到补充说明的作用,比方说一条短视频或新闻的发布时间。

从3个方面,帮你掌握时间显示的设计细节

在上面的案例中,我们会发现“时间”在对应场景里所发挥的作用不同,用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时,要根据具体场景和用户诉求判断“时间”元素的重要性和优先级,通常情况下:时间作为事件的关键构成要素>行为的时间标记>内容的附属信息,之后再思考用什么样的设计形式去展示来达到我们的目标。

“时间”的呈现方式和运用技巧

在讨论“时间”元素的设计之前,我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度,类似我们高中物理时学过的“时刻”和”时间间隔“的概念。

拿开会举例子:“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点,而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段;但是,我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。

通过上面的例子我们可以发下,同样是描述一件事情,运用不同的时间点、时间段的方式去表达,意思一样但却传递出不一样的情感,并且两者存在如下的“换算”关系:

1)时间段加上定语会变成时间点(但同样是时间点,“下午 6:00”是绝对时间,而“1.5 小时后”是相对时间,刚好对应到我们设计时两种时间戳类型);

2)两个时间点之间则表示时间段。

所以,我们在平时表达或设计时,要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点?还是想描述其所持续的时间过程?之后我们再针对不同语境去选取合适的文案和呈现方式。

从3个方面,帮你掌握时间显示的设计细节

时间的呈现方式离不开:时间戳类型、时间显示格式、时间颗粒度。其中,时间颗粒度指的是描述时间的最小单位,往往颗粒度越细,给用户传达的确定感越强(如转账时间是 12 日 15:15:20),对用户的激励作用越明显(如距抢购结束仅剩 00 时 01 分 23.6 秒)。

1. 绝对时间戳

绝对时间可理解为事物发生时的确切时间,由具体日期(年、月、日)和时间(时、分、秒)组成。使用绝对时间戳的优势是信息传达精准,显得正式,给人确定感和安全感,同时排布规整,便于形成认知习惯;但缺点是内容显示过长不利于阅读,并且占用空间较大。

从3个方面,帮你掌握时间显示的设计细节

在时间显示格式的选择上,为了避免混淆,推荐使用文字格式或“-”分隔符来分隔日期,而“/”分隔符在不同国家有不同的展示顺序习惯,容易造成误解,尽量少用。

从3个方面,帮你掌握时间显示的设计细节

时间颗粒度的选择依情况而定,一般场景总结如下:

从3个方面,帮你掌握时间显示的设计细节

2. 相对时间戳

相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时,距当前时间点的时间差值,多用于 push 通知、信息流产品,侧重强调内容的时效性;而“倒计时”也算相对时间的一种,侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低,不用通过计算来判断时间过去或还剩下多久;缺点是不够精确、正式,并很难衡量两个时间点的临近性。

从3个方面,帮你掌握时间显示的设计细节

在使用相对时间时,要注意格式友好。时间单位可随着时间的推移自动改变;数字不要过多,尽量取整;并且可设置其与绝对时间转换的临界点。

从3个方面,帮你掌握时间显示的设计细节

总结

在设计界面中的“时间”元素时,要遵循场景贴合、便于阅读理解的总体原则;之后根据场景和目标,再选取合适的“时间”呈现方式(包括时间戳类型、时间显示格式、时间颗粒度)。

当时间作为“A.事件的关键构成要素”时

一般情况下使用绝对时间,并且要看是为了强调某一关键时间节点,还是侧重表达整个持续过程。此外,选用关联场景的文案或者运用倒计时(相对时间)的形式,可一定程度上促进用户更加集中注意力,提升对信息的关注度,并达到特殊的激励作用和转化效果。

当时间作为“B.行为的时间标记”时

该场景通常是为了追求确定感,通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点(段)去查找、回顾相应内容,因此大多数采用绝对时间,时间颗粒度依具体情况而定。

当时间作为“C.内容的附属信息”时

如果所设计的产品供给内容的更新速度快,用户活跃度高,并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性,那么通常会使用相对时间。部分信息流产品(比如新闻资讯类、社区类)会在列表页使用相对时间,在详情页使用绝对时间,时间颗粒度也是依情况而定;并且会随着时间推移,在某一时间节点前把相对时间转换为绝对时间。

文章来源:优设 (VMIC UED)

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


复杂UI界面的8个核心设计法则

纯纯

复杂应用大多情况下是偏专业和B端的一些UI界面,它们大多出现在桌面端使用环境,并且终端用户类型多样,涉及流程、链条、业务也大多呈现出多变复杂的特征。这篇文章,来自UX设计领域的顶级存在NNGroup,作者为凯特·卡普兰。

到底什么是复杂应用?

我们之前将「复杂应用」界定为特定专业领域当中,需要经过广泛培训之后使用的,有着非结构化目标、非线性工作流程的任何应用程序。这个概念可能听起来有点抽象,不过这么说你可能会 更容易理解:从科学研究到专业人员,诸如金融分析师,它们常用的那些专业软件应用。这类应用通常有着这些特点:

  • 为有专业知识和训练有素的用户提供支持
  • 帮助用户浏览、管理大型数据库,并提供高级的数据分析和处理的功能
  • 通过可变和多样的基础任务功能来解决问题或者达成目标
  • 需要在多个角色、工具、平台之间进行协作或者切换
  • 可以用来减轻高影响力/高价值任务的风险,降低损失

尽管不同的复杂应用之间差异很大,但是他们的共同点是,专业的从业人员对于这类工具有着极强的依赖性。

考虑到设计师和开发者在面对这类工具的时候的挑战,我梳理总结了 8 个复杂应用的设计原则和指南。

1、采用边做边学的用户流程

很多研究表明,对于复杂的应用和工具,用户更加青睐可以立刻上手开始使用而不受它复杂度影响的那类工具。

与大量的教程、文档、帮助和设置说明相比,能够立刻开始的任务和项目,对于用户有着莫大的吸引力。这种现象被称为「活跃用户悖论」。

虽然在专业领域当中,倚靠摸索和试错学习是不恰当也不安全的,但是一定程度的边做边学是必须的,因为不可能在培训和手册当中涵盖所有的使用场景。

所以,在设计的时候应该提供「跳过教程」的直接上手的偏好设置,同时进行相应的安全性设置,避免新手的莽撞操作导致损失。比如可以限制这个阶段的用户执行长流程多任务的操作,让控制面板实时显示操作结果或者预览结果,这样用户无需执行全部操作就可以知道大概的结果。

顶级团队出品:复杂UI界面的8个核心设计法则

在 Salesforce 控制面板当中,就可以实时预览面板编辑的效果。

2、为用户提供有效的方法和建议

绝大多数用户都不是进阶的专家级用户,他们在绝大多数时候会使用基础但是效率没那么高的操作和执行方案。很多用户形成习惯之后,通常不会主动做出改变,而这在日积月累之后导致大量的时间浪费,效率低下。

值得一提的是,这个时候依赖冗长的文档和教程其实很难达成效果,更合理的方式是结合用户所处的上下文环境,通过界面工具提示的方式,适时地告知用户「有更高效方便的方法」。

通常,可以使用悬停提示,或者是弹出式工具提示来实现这一功能。

顶级团队出品:复杂UI界面的8个核心设计法则

ArcMap 是一款地理信息系统类工具,它通常会通过上下文环境下的信息引导,来帮助用户了解技巧。

3、提供灵活而流畅的功能路径

复杂的应用程序,通常会有很多功能是分散的而非线性的,不同的功能组合起来可以实现特定的功能。在这类工具当中,用户日常可能也不是很确切知道最终的目标是什么,而需要通过数据分析来逐步推进,同时,在知道确切目标的情况下,也应该可以遵循不同的路径灵活地达成目标。

设计师这些应用的时候,设计师应该避免使用固定、唯一、 僵化的实现路径,迫使用户必循严格按照某一固定路径来做事情。一方面,允许用户跳过某个步骤,或者回滚到更早的路径,另一方面,允许用户遵循不同的方式和路径来达成目标。

顶级团队出品:复杂UI界面的8个核心设计法则

比如万事达卡的自助服务就可以通过交互式的图表来引导用户完成不同的任务。

4、 帮助用户跟踪行为和思考过程

复杂的任务,通常意味着它需要很多步骤,不同的环节,而在实际的应用场景中,某个分析步骤耗费几个小时甚至几天,都是有可能的。在高度复杂的现实生活中,某个步骤可能会换人接手,可能会因为硬件、 网络等问题而暂停甚至丢失,这也意味着「可追溯性」是很重要的。

所以,在这样的复杂应用当中,应该允许用户在使用过程中,可以便捷清晰地记录、保存、 导出内容和记录,允许用户中断,中断后可以恢复特定的任务。在任务进行过程中可以进行注释、保存相关的说明。

顶级团队出品:复杂UI界面的8个核心设计法则

在决策建模软件TreeAge 当中,用户可以在分析和建模过程中进行开放式的注释,可以后续在底部快速访问这些笔记。

5、可以协调多工具并且在工作空间之间转换

复杂的应用通常还会面临一个状况,就是工具本身的不足,用户需要在多个工作空间上使用工具和内容的时候,它需要具备切换的功能。对于不具备的功能,应用程序应该允许使用第三方的应用来作为补充。

比如当软件不支持某个操作的时候,应该允许用户从线上的其他数据库中获取并导出数据来使用,可以依托外部文档作为支持,允许用户在应用中做注释和评论。

减轻工作负担的一个要点,是尽量使用通用的API、接口和标准,尽量兼容行业标准软件,比如 Excel、Powerpoint ,尽量使用标准格式,等等。

顶级团队出品:复杂UI界面的8个核心设计法则

微软的商业分析软件 PowerBI 就提供了标准化的导出和复制功能,非常方便

6、减少混乱而不影响功能

复杂应用通常旨在保持泛用性。使用场景多样,多种不同的功能,一家汽车生产厂家,可能会和蜜蜂养殖机构采用同样的工具和软件来监测机器故障。但是,这种泛用性的另外一面,就是混乱性。复杂的应用可能会同时兼顾到基础型的小白用户和进阶型的专家用户,而后者用到的功能很小概率会被基础用户用到。

所以,设计者需要在不降低功能性的情况下,基于应用场景、 用户需求来进行简化和优化,在保持功能完整易用的前提之下,降低复杂度和混乱度。

分阶段和层级展现就是一种降低混乱度但是不影响功能性的一种常见策略。当用户进行到特定任务、特定阶段、特等级别之后,再呈现特定功能,是有效的设计方法。

顶级团队出品:复杂UI界面的8个核心设计法则

7、主次信息之间要能平稳过渡

即使降低了混乱度,在复杂应用当中,信息量可能依然是过载的。通常,对于这种情况可以通过区分信息层级的主次来进行快速的区分,不过,从交互上来说,这可能依然不够。

对于诸如控制面板一样的界面,用户可能需要时刻查看面板上的信息,需要了解次级信息但是又不能离开界面,这就体现出主次信息之间的过渡呈现的重要性了。

一般而言,使用类似与悬停显示的方式,能够比较柔和地将次级信息呈现出来,允许用户查看详细的定量数据。下面这个案例当中就是,悬停显示更多次级信息。

顶级团队出品:复杂UI界面的8个核心设计法则

8、在视觉上突出关键信息

复杂应用通常在界面上包含由大量的信息,而这个时候关键性的数据如果不在视觉上做突出显示,会被用户错过。通过视觉区分、提示警报的方式,让用户及时注意到,才有可能规避可能存在的问题。

值得注意的是,让关键信息和元素凸显的方式,并不一定非得是使用鲜艳的色彩和较粗的字体,简单的放大呈现,使用图形化的元素辅助提示,或者是提供足够的留白都可以达到目的,就像下面的案例一样:

顶级团队出品:复杂UI界面的8个核心设计法则

结论

复杂的应用多种多样,支持的服务和功能也千差万别,但是无论如何呈现,此类复杂应用的设计都是非常挑战设计师的设计功底的,需要设计师了解业务,了解用户,并且能够通过设计更好地提供服务。

文章来源:优设(陈子木)   作者:Kate Kaplan

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


干货|交互设计中的「有效反馈」7大准则!

seo达人


准则 1.  Timely —— 找准时机,即时反馈

在用户操作后尽快 / 立即给予反馈是最有效的。即时反馈有助于帮助用户养成正确的操作习惯,或纠正用户的不当操作。

如果反馈内容需要较长时间的加载,也可以给用户设计一些有特点的 / 情感化的加载状态,缓解用户等待的不耐烦,又可以传达一定的品牌调性

例如:知乎 App 在加载内容的过程中,增加了 IP 形象的动态效果:

图片

 

准则 2.  Specific —— 具体分析,差异对待

在设计交互反馈时,不仅仅要给出正确或错误的判断结果,同时也应该考虑到用户的个性化需求,针对不同类型、场景、地区的用户提供差异性引导和服务。

例如:大众点评、高德地图可以根据用户的位置,在用户开始使用产品时就推送个性化信息:

图片

 

准则 3.  Balanced —— 正负反馈,穿插结合

通常来说,正面的反馈会激发用户的自信等积极情绪,因此我们更习惯使用正面反馈。但是一些不得不使用负面反馈的时候,我们可以在其中穿插一些正面的消息,减少或缓解用户的因负面反馈带来的消极情绪。

这就好像是别人跟你说:“ 坏消息是……,但是,这样做的好处是…… ”,坏消息不可避免,但加上一点转折,就会让他人心里稍微舒服一些。

例如:美团单车在你骑完车之后,需要支付费用时提示你可以购买单车套餐,虽然是在劝用户花钱,但看上去依旧很友善,其中的话术包括:“本次骑行免费”,“当前已是最优价格”:

图片

 

准则 4.  Instructive —— 提示下步,指引行动

有效的反馈会主动多引导一步,对用户的下一步行动给出清晰的、正确的、指导性的意见,有助于驱动用户继续做出有效操作。

很多 App 在截屏之后都会给出下一步分享的路径引导:

图片

 

准则 5.  Emotional —— 情感属性,引起共鸣

有科学依据证实,人脑会更容易被附带情绪的信息所吸引。用户更有可能会注意那些看上去承载了一些情绪的反馈,从而也更有可能改变其行为方式。

例如:虽然只是一个提醒弹窗,QQ 音乐会员到期的续费提醒文案却经过精心的设计,由各类歌名组成的一句话,每天的到期提醒都不同:

图片

 

准则 6.  Traceable —— 可被溯源,可供反馈

一些特殊情况下的、有重大意义的反馈可以被追溯到其根本原因,可以提供给用户进行申诉和询问的渠道,供用户进行反馈。

例如:电商平台和外卖平台都会在用户下单或退单之后,提供商品物流的详细信息,在查看购买的商品的当前状态时,并可以追溯到商品所在的各个历史环节:

图片

再比如,高德打车如果发现用户的行程订单金额与预估金额差距较大时,会给用户发短信提示,并给出客服和投诉渠道:

图片

 

准则 7.  Less is more —— 质量优先,减少数量

在这个信息过载而注意力稀缺的时代,好的反馈在于质量,不在于数量。有时数量越多,反而会对用户造成不必要的负担。用户并不需要给出很多反馈或者记录生活中一切信息的产品,而是需要能够帮他们理出头绪、提出有效解决方案、呈现有用信息的产品。

以上这 7 大准则,来源于我们日常工作中的积累和沉淀,对于设计产品的交互反馈具备较高的指导意义,希望对你有启发。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》干货|交互设计中的「有效反馈」7大准则!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

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



日历

链接

个人资料

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

存档