首页

打破次元壁的有趣设计细节盘点

博博

在科技的不断发展中,设计界不断涌现出一些突破性的创新,将我们从传统的二维界面中解放出来。本篇文章将盘点一些令人惊叹的、打破次元壁的有趣设计细节,这些设计细节将真实世界与虚拟世界融合在一起,为用户创造出全新的体验。

引言:

过去的二十年里,技术的进步使我们的生活发生了翻天覆地的变化。从手机到虚拟现实,我们的世界正变得越来越数字化。然而,与此同时,设计师们也在努力打破次元壁,通过创造有趣的设计细节,将我们从纸面和屏幕中解放出来。本文将介绍一些令人惊叹的设计细节,这些细节让我们更好地与科技互动,并且让我们感受到真实与虚拟的结合。

一、增强现实(AR)技术的应用

增强现实技术是目前最受关注的设计趋势之一。通过AR,设计师们能够将数字内容融入到现实世界中,实现与虚拟物体的交互。例如,我们可以使用AR应用程序在家居设计中进行虚拟的家具摆放,以及在购物中试穿衣服。这使消费者能够更好地了解产品并做出更准确的购买决策。

二、可穿戴设备

可穿戴设备是另一个打破次元壁的有趣设计细节。例如,智能手表不仅可以显示时间和日期,还可以接收信息、监测运动和健康状况。这些设备使我们能够轻松地与数字世界保持联系,并根据我们的个人需求进行自定义。此外,还有一些可穿戴设备帮助人们改善姿势、减轻压力并提高注意力。

三、头戴式显示器与虚拟现实(VR)

头戴式显示器和虚拟现实技术为我们提供了一个完全沉浸式的体验。通过戴上虚拟现实头盔,我们可以身临其境地参观博物馆、探索深海或者进行虚拟会议。这种技术还可应用于教育、娱乐和医疗等领域,为用户创造出不可思议的体验。

四、智能家居技术

智能家居技术正变得越来越普及。通过智能家居设备,我们可以通过手机或语音助手控制家庭设备,如照明、温度、音响等。此外,智能家居技术还可以根据我们的习惯和偏好自动调整环境,提供更舒适、便捷的居住体验。

五、交互式创意技术

除了上述提到的技术,还有一些令人惊叹的交互式创意技术也打破了次元壁。例如,通过手势识别技术,我们可以通过手势控制电视、计算机和其他设备。此外,还有一些艺术装置和互动展览利用声音、光线和

今日分享这篇文章是蓝蓝设计的原创文章,未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,添加vx蓝小助ben_lanlan,报下信息,蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等,欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

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

涨姿势!怎么样让用户觉得简洁的界面有细节?

博博

在当今数字化时代,用户界面对于一个产品来说是至关重要的。一个好的用户界面可以提高用户的使用体验,并提高用户的满意度和忠诚度。而一个简洁的界面,如果能够在细节方面下功夫,同样可以让用户产生深刻的印象。本文将从设计师的角度出发,探讨如何设计出一种让用户感觉简洁的界面却又充满了细节的方法。

第一章 简洁的设计

首先,让我们来聊聊什么是简洁的设计。简洁的设计通常体现在以下几个方面:

一、内容繁琐程度低:简洁的设计通常会精简掉一些不必要的内容,使得整个界面显得干净利落。

二、颜色搭配简约:颜色搭配的简洁对于用户使用也是非常友好的。而一些过于花哨的色彩突出的界面会让人感觉疲惫。

三、字体简单明了:不同的字体可以为界面带来不同的氛围,但是过多的字体在视觉上会感到混乱,而一个简单明了的字体会让界面更为清晰。

四、布局合理:简洁的设计会考虑到布局的合理性,能够把界面上不同的元素彼此隔离,减少干扰。

第二章 细节的处理

通过前面的探讨,我们了解到了什么是简洁的设计。接下来,我们需要在这个基础上加入更多的细节,从而提高用户体验。

一、微交互:微交互可以改善用户与互联网产品打交道的体验,它们通常是简单和快速的反馈,例如按钮按下后的动画效果。这些微交互虽然小,但是确实能够带给用户沉浸式的使用感受。

二、动态图像:相比于静态的图片,动态图像能够让用户感受到更多的信息,从而更好地呈现出产品的特性。

三、交互反馈:当用户进行界面上的操作时,必须有适当的反馈来确认操作已经成功执行或未执行。这样的反馈是对用户行为的最初回应,它决定了用户对界面完成任务的信任度。

四、十分精致的图标和按钮:当像素越高时,细节就会变得更加明显。因此,在设计图标和按钮时,应该采用高像素并确保图标的细节和构造清晰,这样能让用户有更好的使用体验。

结语

总之,设计一个偏简洁却充满了细节的界面是一项挑战。我们应该尝试从微观的角度出发,为用户提供尽可能优秀的交互体验。同时,也应该将自己的品味和创造力在这些细节上充分展现。最后,希望通过本文的探讨,能够对读者在设计界面时提供一点启发。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。

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

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

这些设计细节你知道吗?

seo达人

目录

  • 产品需求与设计研发的良性循环
  • 今日事今日毕
  • 设计文档的规范性
  • 多渠道沟通
  • 验收不仅仅是记录问题
  • 沉淀业务组件的必要性

 

一、产品需求与设计研发的良性循环

从产品经理提出需求开始,到研发开发完成上线,整个过程我们可以看作是一个迭代。倘若与研发同一个迭代完成产品设计,时间上肯定是不够用。需求是永远都做不完的,一个人无论怎么埋头苦干,还是会时间紧迫无法喘息!这时候团队合作显得至关重要。我们需要进行合理的任务管理,利用工具达到更好的效果。目前我们敏捷组产品与设计小团队用的是飞书文档,它可以新建所需要的任务看板,清晰直观的看到此任务当前流转的阶段,任意拖拽方便快捷。

图片
图片

完善需求的详细信息,比如:所属项目、任务执行人、优先级、外审状态、敏捷组、文档链接等等,就可以从不同维度去管理任务,筛选我们想要了解的重点。

那么基于此,如果我是视觉设计,完成需求后就可以将它拖入下一泳道,等待排期。未完成的也就不会进入到排期和研发阶段,这样基本上每个迭代研发都会提前拿到相应的设计稿,尽管后续可能会有细节上的修改和返工,也不会很仓促。

 

二、今日事今日毕

每天的工作充满“已知”和“未知”。“已知”的是固定要做的需求设计,“未知”的是工作消息的各种沟通与答疑。
新的一周开始,我们可以安排下本周大致要做的事情,通过自己习惯的方式去记录。简单清晰即可,没必要给自己增加额外负担。
尽量不延误,保证本周事情完成率90%以上不会对下周产生很大压力。重要的事情和需要长时间投入的需求可以用完整且精力比较好的时间段去完成,琐碎的任务集中时间去搞定,或者快下班了搞搞完。

图片

三、设计文档的规范性

每个人都有自己习惯的设计稿排列方式。整齐、清晰、直观的布局,有利于研发快速捕捉到想要查看的信息。

图片

⬇️ 设计文档基本由以下部分组成:目录、交互原型、交互说明、视觉稿。交互稿与视觉稿最好合并在一个文档中,方便研发查看。

图片

⬇️ 具体到页面细节说明,可以安排在相应设计界面的附近,用清晰的数字或者标签展示。

图片

⬇️ 如不同状态,不同变量的变化,也需要详细标注。

图片

⬇️ 设计内容过多时,像以下细节单纯在页面上展示很容易被忽略,需要单独拿出来在旁边重点强调一下。

图片

⬇️ 如今标注插件很多,不需要全部手动标注了,但对于一些我们认为研发会忽略和写错的尺寸、间距等,可以表示一下。设计软件的自动展示标注有时候会因为图层覆盖之类的问题点不到某些元素,这个也需要检查一下。不然研发就自由发挥了哟~

图片

⬇️ 各式各样的组件有非常多的形式和状态,设计在引用时要明确类型,避免研发乱用。

图片

⬇️ 比如这个全局提示组件,组件本身可以提供多行展示的样式和规则,但研发很有可能不知道某种情况下对应的展示样式,实现的不是我们预期。以下是日常迭代中研发实现的有问题的样式与正确的对比:

图片

如上述所讲,完善补充细节,譬如图标的颜色变量,悬停变化,状态变化,引用组件备注等等,这些都是开发还原落地视觉设计的基础。页面设计中,所需的图标、图例、图片等素材,切图并压缩给到研发,最好用统一的方式去管理图标,比如iconfont,或者自己公司的组件平台等。

 

四、多渠道沟通

当接到新的需求并且拿到交互稿,前几周也参加了需求&交互内审,基本不会出现需求和框架大改的问题。大体了解背景和设计重点后,可完善视觉细节。

图片

做完设计稿只是成功了一半,还需在设计内审前,发给对应的产品和交互同学评论提意见,先修改掉一波明显的问题。这是视觉设计阶段第一个比较重要的沟通,提前在大部分内容上达成共识,节省了后续评审的时间。

图片

修改完大家提的问题后,视觉评审会明显顺利许多~

 

五、验收不仅仅是记录问题

1、项目上线前验收

提到验收是我非常头疼的事。前期设计稿准备充足的情况下,研发如果能实现到视觉稿的80%,验收起来不会特别吃力。有时会遇到验收内容多,前端还原度低,耗费设计同学大量时间,建立良好的验收机制非常关键,与研发同学的沟通和磨合也是必不可少的。

涉及到人员较少时,可以坐到一起面对面去沟通;若此次内容较多,涉及不同人,可建立文档。

图片

一遍验收后并不完美,基本要2-3轮的继续走查,针对优先级比较高或者问题重灾区,标红后给到相应负责的前端继续修改,保证上线前90%以上的问题得到解决。若还有问题遗留,可新建kaptain任务后续优化,让验收问题有迹可循。

2、日常全局验收

线上已有问题,按照模块集中归纳,建立对应的研发任务。开发过程中可与前端同学随时沟通,提供细节补充。

有时我们认为很简单的去掉一条间隔线或者间距,可能涉及到非常多不同的场景面板,提前沟通也有利于研发评估工作量。

图片

六、沉淀业务组件的必要性

每当开始新的项目设计,要费好大功夫找源文件呀。适当的归纳整理历史文档,也有助于我们快速的进入设计状态,对新人也很友好!

图片

以业务需求为背景,在组件库的基础之上,业务组件的整理尤为重要。按照每个人的使用习惯,我们可以建立自己的“业务”组件库,方便需求迭代时快速定位。

比如,我们可以将业务组件分为几部分:图标、图例、场景等,进而细化场景中的内容。至于怎么去命名和排版细节,都可以按照自己的习惯来整理,当然组件形成后也可以扩大到我们同业务线的UX或交互同学一起使用,提高设计效率。

图片

可能对于非设计岗位来说,看到的仅仅是一张设计图,但在设计稿背后我们需要去支持和处理的细节也是非常有价值的存在。

希望这篇小小滴文章可以带给你一定的帮助 ~(≧▽≦)/~


作者:小柴

转载请注明:学UI网》这些设计细节你知道吗?

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


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


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



这6个设计细节问题困扰终于找到原因了!

纯纯

为什么同样尺寸的圆形看起来比方形的小?


字体设计师不会把所有字母都设计得一样高。他们会注意到人类视觉的特殊性,所以他们会使用光学技巧创造一个和谐的、可读的、平衡的字体。



在上图中,一个正方形、一个三角形和一个圆在几何上是相等的。然而,我们的眼睛却认为三角形和圆形偏小。这是因为这三种形状有不同的重量。从字体上讲,就是黑色的数量分布并不均匀。


有两种方式能够使得它们保持视觉平衡:

A. 计算两个形状的面积,并保持它们相等

我不喜欢使用这种方法,因为它只适用于简单的形状,如三角形、圆形和菱形。这种方法对于复杂的视觉效果不太有效。

B. 使尺寸更大、超出和模糊形状是测试视觉重量最简单的方法

  • 1)使非正方形的形状变大(三角形、箭头、破折号、线性图标等)
  • 2)超出图标规范中的圆形边界框
  • 3)把图形变模糊,比如加上高斯模糊,比较产生的视觉斑点大小,调整至差不多大小(主要是看模糊边缘的尺寸),仔细观察下面这张图,对比看看效果。




现在你应该明白了为什么非方形/图标看起来比方形小,让我们看看真正的图标和 UI 元素如何使用这些光学原理变得更好。 



在设计整套图标时,确保它们的平衡是至关重要的。为了保持平衡,在图标背板和图标区域之间留出额外的空间,并允许非方形图标超出图标区域。

另一个例子是一个矩形的UI元素和一个圆形按钮放在一起。如果圆形按钮的高度与矩形UI元素相同,那么圆形按钮看起来会更小。基于光学校正原理,你需要区别对待这两个元素。 

看看下面的例子,WhatsApp,三星消息,和Swiggy支持聊天。你觉得哪一个更正确?请在留言区发表你的看法。




2. 为什么看起来总是不太圆?


还有比正方形更正方形的吗?


我们的眼睛有古怪的视觉感知,我们看到的事物与现实不同。下面是一个类似的小测试,你觉得哪个圆和哪个方更标准?



在这些椭圆和矩形中,一个是正圆,一个是正正方形。我已经修改了正确的,但他们似乎更对称了,这是因为垂直-水平错觉。(彩云注:右边是调整过的,看起来会更圆和更正) 

大多数几何字体不是几何图形。字体设计师通过牢记人类的视觉感知来设计高质量的字体。他们几乎在每个字母中都使用光学原理,以使字体保持平衡。


你从上面的测试中应该明白了我的意思。要了解更多,请看下面的图片。我把字母“O”从几何字体Futura放在一个完美的圆圈旁边。你觉得哪一个看起来更对称?



你甚至在底部文字出现之前就猜到了,对吧?来自Futura的字母“O”比完美的圆更宽,但看起来更对称。原因是,我们的眼睛倾向于看到的垂直区域比水平区域要长,即使它们是相同的。 

让我们看看这个错觉是如何出现在字母“T”上的。 



在上图中,水平笔画的粗细要小于垂直笔画的粗细,以避免产生错觉。你可以在设计方形图标、方形背景或头像边框等时使用这个技巧。 


3、为什么这个圆角看起来还很硬?


如何使驾驶尽可能平稳?


设计字体字形就像开车。当我们开车时,如果已经在弯道的起点时,我们不会转动方向盘,只是在到达弯道前稍作自然转弯,以免发生意外。

字体设计者不依赖于图形编辑软件的预设弧度。他们会调整曲线使其更平滑,因为他们知道人眼可以立即注意到直线突然变成曲线的点。


让我们看看这两种曲线:纯几何和微调。试着观察哪一个干扰了你的眼睛,哪一个是光滑的。



让我们看看在UI设计中我们可以在哪些地方融入这种学习。



你可能已经注意到右边的按钮、图标和框架看起来更赏心悦目。而左边的曲线有一个很硬的从直线到曲线的过渡。


我们如何修正曲线呢?在设计时,可以进入形状编辑模式,手动调整曲线手柄的大小,如下图所示。




4、为什么同样的间距却看起来杂乱无章?


为什么眼睛的判断比数值参数更重要?


间距是字体设计中最关键的部分。字体设计师根据字母的形状对字母进行组合,并以不同的间距排列字母。例如,字母A和V是三角形的,包含更多的外部空白。所以,如果它们一起出现,那么它们之间的间距会有点宽,需要减少间距。这有助于形成和谐的字体。



字体来源:Ek Mukta,作者:Girish Dalvi博士和Yashodeep Gholap 

现在,让我们看看如何将这个知识点运用到视觉设计的其他方面。你可能已经注意到,在圆形或矩形容器中放置三角形图标会使图标显得不协调。这仅仅是因为当用软件来对齐的容器中,三角形的面积两边是不相等的。看看下面的图片,可以用视觉解释来理解它。



为了使三角形在其容器内具有光学中心,我们需要平衡两边的重量。对于三角形,你可以找到质心,并将其与容器的中心对齐。现在,如果三角形是用形状工具创建的,Adobe Illustrator会提供质心的提示。


如果没有看到质心提示,也不要担心。质心可以通过简单地画线从任何两个边的中心到它们对面的顶点来定位。查看下面的图片来更好地理解它。



这种方法只适用于几何形状。对于其他更复杂的形状,你需要依靠你的眼睛判断,而不是数学参数。


需要记住的是:如果你为开发者切图时,你需要在图标周围保留一些区域,这样他们就可以将图标放在背景的中央。


从图标的质心画一个圈,留下它周围的额外区域。



让我们检查一下,可以在留言区讨论下到底哪个公司使用了错误的资源? 




5、明明一样大,却显得头重脚轻?


如何平衡? 



你有没有仔细注意过字母“B”?它的底部被设计得比顶部大。如果我们设计的两个半圆在数学上是相等的,它会看起来不平衡(检查左图)。这是因为我们进化到从“视角”的概念来处理物理世界,在这个概念中,远处的物体看起来比附近的物体更小。(彩云注:可以理解为当你在山脚时看到的山脚物体要比看山顶的要大,透视原理)


在印刷中,这意味着要使字体同样平衡,就需要在底部画得更重。


让我们通过翻转字体中的几个字母来看到明显的区别。



字体来源:Ek Mukta,作者:Girish Dalvi博士和Yashodeep Gholap 

同样的概念适用于其他水平对称的字母形式,甚至在字母“H”的交叉杠是放在实际的中心以上,使它看起来更平衡。



所以,下次当你设计一个水平的图标或标志时,使用这种底部重的技巧来让它在视觉上更加平衡。 


6、为什么明明在一条线上看起来却总是错位?


这种错觉也被称为“波根多夫错觉”( Poggendorff illusion),这是一种奇怪的现象,会扭曲我们对形状相交角度不是90°的感知。出于某种原因,我们的大脑很难推断出一条被其他形状部分覆盖的线,从而导致连续性的中断。为了更好地理解它,先看看下面例子中的左边的图,看看哪条线是连续的,A还是B?然后检查我缩小了封面线的右边的图片。我希望你明白我的意思。 




在拉丁字体中,' X '或' x '就是这种错觉的受害者,需要特殊处理使其看起来更自然。字体设计者稍微偏移对角线,以矫正X或X的光学效果。(彩云注:右边是调整后的,视觉上看更加连续) 



如果你在为其他语言设计字体或为APP设计图标集时遇到类似的问题,你可以尝试像在字母“X”中那样偏移斜线。


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

作者:彩云Sky    来源:站酷

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

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


图标定制设计之三:想让图标更精致?先掌握这11个容易忽略的设计细节!

博博

大家好,这里是设计夹,今天为大家分享的是「图标设计细节」。图标在页面中的尺寸很小,却包含着很多细节。作为通用的视觉化语言,把握住其中的设计细节至关重要。

这次总结一下图标设计的属性以及在图标设计中,很重要但容易被忽略的知识点。

在 UI 设计中,图标主要有两大类:一类是 APP 启动图标,每个 APP 独一份;另一类是系统 icon,搭配文字,方便用户快速理解信息,也是这篇文章重点讲解的内容。

想让图标更精致?先掌握这11个容易忽略的设计细节!


风格


常见的图标风格有线性、面性、彩色、写实、3D 等,图标的选用因页面的设计风格、图标的位置等原因会有所差异,主要的作用是反馈动作和吸引用户更多注意力。

  1. 线形/面性:最基本也是做常用的风格,广泛用在页面设计中。
  2. 彩色:通常用于反馈用户的操作或者增加用户的注意力。
  3. 3D/写实:当页面中的某个内容需要引起用户高度注意时使用,一下抓住用户的视线。

想让图标更精致?先掌握这11个容易忽略的设计细节!

Tips: 现在字节、百度新推出的一些年轻化产品中,有很多精致的 3D 写实图标,极具个性,很好地迎合了年轻用户的喜好。在扁平风格流行的当下,这样的尝试也是一种突破。

重量


简单的线性图标重量轻,看起来更简约,不会给页面带来太大的视觉负担。比如当页面中已经有很丰富的图片和内容,那么更适合选用简约的、重量轻的线性/面形图标,防止页面过于杂乱。

相反,如果当前的页面中只有文字,信息量很少,那么更适合利用重量大的彩色甚至 3D 图标来增加页面的丰富性,让页面看起来更有设计感,给用户带来视觉上的愉悦,简约而不简单。

想让图标更精致?先掌握这11个容易忽略的设计细节!


属性


构成图标的元素包括描边的粗细、端点的方圆、圆角的大小、色彩的轻重等,表达式规则是统一的,以便只给观看者识别图标所需的最小更改。

想让图标更精致?先掌握这11个容易忽略的设计细节!

  1. 描边粗细:手机上常用到的描边粗细有 2px、3px、4px。2px 的看起来会显得更加精致,4px 的描边视觉较重,可以用在优先级较高的区域作为功能性图标,。
  2. 端点/节点:图标的端点有平头、圆头和方头,图标的节点有斜接连接、圆角连接、斜角连接,具体使用哪种样式要根据页面的情况统一设置。
  3. 圆角半径:方形的图标边角过于锋利,用户有时候看起来会不舒服,圆角图标更圆滑,相对来说更容易让用户接受。虽然圆角用的更普遍,但具体使用哪种,还是要考虑页面的整体风格再决定。


网格


图标的外形有圆形、方形、三角形甚至不规则形状的,所以我们很难将不同形状的图标尺寸完全统一。

这个时候网格就起到很关键的作用,有了网格相当于提前将图标限定范围,在网格范围内根据图标的重量和重心灵活调整大小,这样会让不同形状的图标看起来更统一。

想让图标更精致?先掌握这11个容易忽略的设计细节!


视觉校正


由于设计软件的局限性,虽然有些图形已经居中对齐,但有时候还需要进行视觉校正。

最典型的图标案例是“播放”图标,利用设计软件对齐中间的三角形后,会发现三角形的位置看起来偏左。

利用软件对齐后,我们还需要再用眼睛确认一遍,我们可以将三角形向右移动,保证三角形的重心与圆形的重心一致,这样整个播放图标看起来会更舒服。

想让图标更精致?先掌握这11个容易忽略的设计细节!


角度


设计图标时,我们的第一反应是不带透视的二维图形。因为我们观看手机的视角都是平视,所以大多数的图标都没有透视,看起来会更简洁。

带透视的图标会给用户营造一种空间感,可能会感到认知失调。虽然这种带透视的图标能引发用户关注,但不建议这么设计。

想让图标更精致?先掌握这11个容易忽略的设计细节!


比例


图标比例通常使用 8 的倍数作为基准,例如 8px、16px、24px 和 32px,以便在各种环境中进行流畅地切换。除此之外,在移动端等屏幕尺寸较小的页面中,还会使用 4px 的倍数,来实现多功能性。

想让图标更精致?先掌握这11个容易忽略的设计细节!


清晰


图标的设计要使用用户能够快速理解的且最简洁的元素。图标的尺寸通常很小,要尽可能做到对用户友好,可以使用一些简单的隐喻设计,但含义不能过于复杂。

一个图形能说明的问题,没必要再添加多余的图形。复杂的图标可能需要花费用户很长时间才能理解它们的含义,这样反而会影响用户的操作。

想让图标更精致?先掌握这11个容易忽略的设计细节!


细节


这一点和刚才说到的图标清晰道理一样。图标最重要的目标是快速传递信息,特别是对于尺寸很小的系统图标,最好只保留最基本的内容,移除多余的装饰元素。

想让图标更精致?先掌握这11个容易忽略的设计细节!


一致性


这里说得一致性,并不是指一个产品中所有页面都只能使用一种图标风格。一个产品有很多页面,线性、面性等多种图标风格可以一起使用。

但在同一个页面场景中,执行相同功能的图标应该保持相同的样式。

想让图标更精致?先掌握这11个容易忽略的设计细节!


熟悉感


面对不同的操作系统,例如 iOS 和 Android,同一功能对应的图标也会有差异。针对不同的系统,我们可以选用大多数用户熟悉的图标,这样用户能更快地理解图标的含义

想让图标更精致?先掌握这11个容易忽略的设计细节!


最后


以上就是常用却容易忽略的图标设计细节,希望通过这些内容能帮助你对图标设计有更深的认识。

作者:Clippp

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

图标定制设计之一:6大章节!图标设计基础知识全方位入门指南

图标定制设计之二:超全总结!金刚区图标设计的 10 大风格

图标定制设计之三:想让图标更精致?先掌握这11个容易忽略的设计细节!

图标定制设计之四:学会SVG图标的高级用法,界面适配效率翻一倍!

图标定制设计之五:研究微软 Fluent 图标规范后,我总结了这9个知识点!

图标定制设计之六:为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图标定制设计之七:客户说B端图标太普通没新意,该怎么解决?

图标定制设计之八:从6个方面帮你快速掌握图标设计规范

图标定制设计之九:不止画图标!5 个金刚区的交互设计思考





图标设计不专业?可能是这10个容易被忽视的细节没做好

纯纯

图标是任何设计系统不可或缺的一部分。使用图标的主要原因是帮助用户快速理解想法,实现快速导航,解决语言障碍,最终提升用户体验。


图标作为一种设计工具,在UI/UX和平面设计师中最受欢迎。这些微小的设计元素对每个人来说都是简单易懂的,这些特征赋予了它们通用数字语言的地位。


在这篇文章中,我整理了10个简单又重要的技巧帮你设计出更专业的图标。


1.尺寸规范 


最小的图标大小通常是12 x 12px。以这个尺寸为基础,行业标准中大多数其他尺寸只是通过将之前的尺寸翻倍而产生的。

  • 小尺寸图标,px: 12 x 12, 16 x 16, 24 x 24, 32 x 32, 48 x 48.
  • 中尺寸图标,px: 64 x 64, 96 x 96, 128 x 128, 256 x 256.
  • 大尺寸图标,px: 512 x 512, 1024 x 1024.

重要提示:当你设计图标时,重要的是要按100%显示的比例去设计,使图标完美像素并放大像素块查看准确性。 


2.保持像素完美 


完美像素图标在屏幕上能呈现尖锐和清晰的线条和形状。如今,高分辨率显示器和视网膜显示器正变得越来越好,所以在不久的将来,对像素完美图标的需求可能会减少。但就目前而言,让你的图标具有可伸缩性、响应性和适配更多设备是非常重要的。


1) 像素网格对齐.

使直线部分完全清晰,并增加曲线和边角的清晰度。


undefined



2)完美角度

有角度的线更模糊。创建图标的最佳角度是45°,因为形成一个角的像素彼此对称。



undefined



3)边缘清晰

直线必须占据其边缘上最暗的4个像素。这样线的边缘看起来更清晰。



undefined



3.注意粗细和间隙 


为了让图标看起来整洁一致,重要的是要记住线条宽度和间隙大小。这条规则我认为是必须遵循的:所有线条的宽度都是相同的。


理想情况下,线宽和间隙大小也应该相等。 


undefined




undefined


然而,有时候你必须打破这个规则。当你需要解释我们在日常生活中面对的一个具有非对称模式的物体时,它就会发生。比如条形码这个例子来说,我故意使图标内的线宽和间隙大小不均匀,以表示条码的特征。 



undefined



4.统一圆角 


在UI设计中,对象(包括图标)的角半径定义了项目的外观和感觉。当我们说到一个集合中的多个对象时,规则很简单:在正方形和圆角之间进行选择,并对所有的图标应用相同的属性。


为什么它如此重要?一致性是UI/UX设计的关键原则。一个可用和用户友好的设计总是提供一致的体验。在下面的例子中,你可以看到打破这个原则是如何影响视觉感知的。 



undefined




undefined



5.视觉平衡 


在电脑上看起来完美对齐和平衡的东西,在你的眼睛看来可能并不一样。

当我们把大小相等的正方形和圆放在一起时,我们会有一种不对劲的感觉,圆似乎比正方形小。为了使我们的形状在尺寸上看起来相同,我们应该使圆更大(或减少正方形的尺寸)。 


undefined




undefined




undefined


这个原则也适用于图标的设计和使用。有些图标的一侧可能较重。试着调整它们一两个点,直到整体对齐看起来正确。在下面的例子中,你可以看到突出显示的图标看起来很大,尽管它与其他部分的大小相同。为了平衡这个集合,我们需要通过缩小图标的大小来调整突出显示的图标。


(彩云注:这个原则很多人应该都知道,但我发现也是在整套图标的设计中最容易出现的问题,当把图标汇总在一起的时候,这个问题尤其需要重视。)



undefined




undefined



6.视觉对齐 


我们经常在设计软件中使用中心对齐,这种方法没有错。但当涉及到细节时,比如图标设计,我们需要相信自己的眼睛,打破数学法则,以增强元素的平衡。


让我们以播放按钮作为展示。这个例子很简单,但非常能说明问题,因为形状越不对称,需要改进的缺陷就越明显。 


undefined




undefined



7.保持简单和直接 

我打赌你已经猜到我们指的是KISS原则。这一原则背后的思想是,大多数系统在保持简单的情况下工作得最好。用户越容易理解某样东西并与之互动,它就越具有通用性。


(彩云注:KISS原则是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的缩写。篇幅有限,彩云帮大家找了一篇参考文献https://www.jianshu.com/p/7d58b96d0185#comments ,感兴趣的可以去学习下。)


它如何适用于图标设计?


1)别使用文字


文本和图标的绑定减少了图标的通用性。此外,小尺寸的文本是可读性很差。如果一定要文本作为支持元素,使用工具提示和图标旁边的标签。



undefined



2)不要过度设计

不必要的复杂性阻碍了合理的表达,应该避免。过载的设计会将用户体验变成一场噩梦。



undefined



3)避免不必要的元素 

只要确保每个图标在整体环境中是可理解和清晰的就行。(彩云注:比如已经是在邮件客户端中,就不需要再额外增加表示邮件的图标部分)


undefined


重要提示:在图标设计中合理地使用KISS原则,也不要把事情做得太简单,否则会影响功能。一个优秀的图标应清晰易懂。


8.图标规范框架 


图标规范框架通常是指组合在一起的圆形、正方形、纵向和横向矩形。它们创建了一个框架来设计图标。但是,这个规则非常灵活,只是作为参考,方便图标的设计在视觉上平衡。所以,如果你觉得你的图标不完全匹配这个框框,但看起来完全正确——相信你的眼睛! 


undefined




undefined




undefined



框架是设计的“容器”。框架规范了一个统一的范围来设计图标,这背后有一些原因:


1) 大小

由于其几何形状,所有图标都具有不同的高度和宽度。为了在我们的设计中统一图标尺寸,我们应该将它们放置在大小始终相同的框架中。


undefined


2)输出


框架内的图标与视觉中心对齐,这经常被开发人员忽略,因为他们经常根据实际的中心来调整图标,而没有注意到差异。这就是为什么用框架输出图标是至关重要的,当你按这个框架输出图标时,能保证视觉设计时想要的视觉中心。


undefined



3)效率

如果使用Figma,可以通过创建组件来节省时间。可以使用实例快速地将一个图标替换为另一个图标。


undefined



9.设置好图标的关键词 


如果你要打算做图标资源库的话。要想到当设计师在库中搜索图标时,会遇到哪些挑战?他们的痛点是什么?他们的需求是什么?要回答这些问题,请设身处地为用户着想。 


1)不要让用户思考

例如,如果他们不知道自己想要找到哪种花卉图标,那么就让他们看到一系列选择:鲜花项链,室内花卉,植物商店等。



undefined



2)展示关联图标

例如,如果用户想在相同的主题或类别中找到图标,他们可以快速地检查包含这个特定图标的完整集合。


undefined



3)使用标签

用户可能很难找到合适的词进行搜索,或者可能希望看到所有类似的补充选项,从中选择最合适的。例如,当一个图标的实际名称是“兰花花瓣”,你仍然可以找到它与以下关键词: #兰花#花瓣#花瓣#花#装饰#花#植物#花园#开花#植物#自然#热带#树枝#美丽#植物#美丽#自然#叶子#优雅#浪漫


undefined



10.SVG和PNG图标的区别 

最终应该导出SVG或PNG格式?这是一个关键问题。让我们来比较一下格式:

  • SVG的文件大小非常小,这意味着最终设计的加载速度非常快,而PNG则相当大。
  • SVG格式是无限可伸缩的,而PNG的分辨率则受创建的文件大小的限制。然而,将一个复杂的SVG图标缩小到随机大小可能会产生半像素的边缘,这可能会使图标看起来有虚边。这是因为当屏幕上的图标变得更小时,代表其来源的像素就会减少,从而导致清晰度下降。这并不意味着需要避免使用SVG文件。只需根据预期用途调整 SVG 图标即可。
  • SVG文件可以编辑和动画,PNG文件只能是静态的。
  • 对于PNG格式,你必须提供各种大小和颜色的资源,而在使用SVG时就不需要这些了。
  • Png与大多数浏览器兼容,而svg可能不被旧的浏览器支持。


我个人的选择是使用SVG图标,因为它可以节省很多时间。但是,一定要小心缩小复杂的形状,并记住旧的浏览器可能不支持SVG格式。

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

浅析产品体验设计细节

分享达人

目录

一、马蜂窝 — 人性化设计识别文章地点

二、微博 — 社区游戏化设计提升互动率

三、QQ — 通过手势消除未读消息

四、最右 — 情感化设计保护用户隐私

五、抖音 — 深夜提醒贴心的功能

六、网易音乐 — 把分享游戏化

七、QQ音乐 — 歌词沉浸式体验

八、盯潮 — 趣味性banner轮播,增加用户点击

一、马蜂窝—人性化设计识别文章地点





产品体验

在马蜂窝任意文章中,如果出现地区则可以通过当前页面对地区进行提取

目标

减少用户操作路径,降低产品使用成本

设计思考

日常在各个平台浏览文章时大家都会遇到在文章内会出现一些如地名、人名、物品等相关名词,此时如果对名词感兴趣则需要切换场景去进行搜索,而马蜂窝在这方面深入洞察到用户痛点,基于旅游社交产品背景下在添加地点直达(包含多个地点)功能,解决了对景点感兴趣的用户使用体验。

延伸设计

根据马蜂窝这个人性化功能,是否可以在不同的产品内进行应用,如在一些游戏社区中所提到的虚拟装备、道具等物品添加弹窗简要说明,帮助新手玩家快速理解玩法、功用等

二、微博—社区游戏化设计提升互动率



产品体验

在微博动态详情中进行长按点赞触发动画

目标

通过游戏化点赞玩法激励用户进行互动,提升互动率

设计思考

打破传统点赞动画,微博设计动效采用大胆创新的全屏动画并搭配上散发的微表情,在长按与连点两种手势下动效规律不同,消除用户枯燥感,微博作为国内最大社交平台,页面展示上已经形成用户深刻认知,在不影响基本风格上进行彩蛋设计有效的提成用户互动率

三、QQ—通过手势消除未读消息



产品体验

在qq聊天页面中对底部消息气泡进行拖动,消除所有未读消息

目标

提升用户操作效率和使用体验

设计思考

qq作为社交工具,每位用户都会添加大量人、群以及关注各种推送,在这种场景下用户每条消息都去操作需要花费大量时间,QQ把传统的消息已读以一种简单的交互手势作为代替,相对全部已读在操作上更佳便捷

延伸设计

通过qq的这个交互细节,在其他产品场景中同样适用,如一些音乐、电台相关的产品在离开播放页面后播放状态会悬浮在页面之上,如果关闭的话则需要点击暂停或者进入详情后关闭,也可以考虑使用拖动手势进行关闭

四、最右—情感化设计保护用户隐私



产品体验

在最右登录页面输入密码时ip形象会出现捂眼睛动作

目标

强化用户隐私和心理信任感

设计思考

日常在使用一些敏感性操作时我们都会注重隐私,如一些表单的填写、密码输入等相关操作,最右在登录页面使用到了ip形象的动作去向用户传递心理上的暗示,这种手法很好的把品牌曝光与体验相结合

五、抖音—深夜提醒贴心的功能



产品体验

长时间刷抖音时会系统会提示,在深夜使用时会支持设置提醒时间

目标

防止用户疲劳使用产品,定时缓解注意力

设计思考

在使用抖音时大家可能会经常深陷其中无法自拔,往往忽略了时间影响身体健康,提醒机制则在深夜不同时间段进行间接提示,虽然在用户体验中不提倡打扰用户,但在短视频这个场景下如果过渡沉浸便会造成反向影响

六、网易音乐—把分享游戏化



产品体验

在网易音乐对某首音乐进行分享时可以对音乐进行个性化定制,对歌曲进行编辑添加文字、图片、语音等以视频方式呈现

目标

把分享以一种偏游戏化的形式呈现,提升用户分享率

设计思考

传统分享基本是直接让用户分享到第三方平台,而网易音乐这个设计把分享场景进行多元化处理,以定制音乐罐子为切入点,用户自由编辑个性化处理装进罐子进行分享,是一种视频剪辑融合音乐的一种新玩法,破圈传统枯燥的分享场景,提升用户分享率

七、QQ音乐—歌词沉浸式体验



产品体验

在音乐歌词页面中可以支持设置歌词主题

目标

新颖的呈现手段,强化用户沉浸式听歌

设计思考

传统的音乐产品在详情页面展示了一屏歌曲歌词,面对大量的文字用户在寻找某段歌词时效率不是很高,对大量的字段也极为枯燥,而qq音乐使用了创新的展现形式,把手机主题概念融入歌词中达到新的视觉体验,根据不同的主题对应的动画也不同,大大的提高了用户的视听体验

八、盯潮—趣味性banner轮播,增加用户点击



产品体验

在盯潮首页banner处对其进行拖动甩出

目标

通过交互玩法提升用户对banner的点击

设计思考

banner在页面通常点击率较低,用户会默认为广告,在盯潮内滑动banner时会发现banner可以进行拖动,并且松开时会自由掉多,把传统的banner切换做出了可玩性更高的效果,同时这个设计手段也能吸引用户注意力引导用户对banner进行点击

原文地址:站酷
作者:爱吃猫的鱼_

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

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

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

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

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

从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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


iOS 15 发布后,看看这3个值得关注的设计细节!

雪涛

相比于去年 iOS 14 带来的小组件和 APP 资源库的功能,今年 iOS 15 的升级幅度似乎确实没有那么大。

接下来就从设计师的角度来看看 iOS 15 带来的视觉和体验的变化。

iOS 15 发布后,看看这3个值得关注的设计细节!

通知中心的重新设计

iOS 15 对通知中心进行了视觉排版上的优化,放大了 APP 图标并置于卡片的左侧,让用户可以通过图标更轻松的区分和查看消息。

消息小卡片的圆角也更加圆滑,圆角接近于与控制中心按钮的大小,这种圆角更大的设计也更容易将用户的视线过渡到内容中心,同时也使得 iOS 系统设计风格能够更加一致。

在通讯类 APP 的推送中,采用了联系人照片 + APP 小图标的组合形态,增加信息来源的辨识度,以这种形式更清晰地告知用户,所收到的信息的来源和属性。(目前国内的 APP 例如微信、飞书的消息通知等都还没有完全适配)

iOS 15 发布后,看看这3个值得关注的设计细节!

值得注意的是,iOS 15 还可以根据用户设置的时间来定时推送,这些定时推送会构成一个较大的通知摘要卡片,而摘要的内容会进行智能排序,这种机制将会对设计和运营有较大的影响(所以 APP 通知推送会因为这种机制形成新一轮的内卷么?)

随着营销推送的内容越来越密集,用户承受的信息压力也越来越大,苹果也在尝试构建更多细分场景下的推送管理,在 iOS 15 中用户可以选择让 APP「静音一小时」或者「今天不再推送」来避免干扰。

iOS 15 发布后,看看这3个值得关注的设计细节!

更好用的 Safari 浏览器

新版 Safari 有较大的改进,iOS 15 将顶部的地址栏和底部的工具融合到了屏幕底部,成为了一个悬浮的交互控件,并在视觉上进行了简化,右滑动地址栏可以在不同的页面中快速切换,向上轻扫地址栏,则可查看所有打开的标签页,这种在底部操作的交互方式也更符合大屏化的趋势。

这种左右滑动和向上轻滑也明显能感觉到是从 iOS 整个系统的手势操作中迁移而来,而这种手势可以极大的降低用户的学习成本。

iOS 15 发布后,看看这3个值得关注的设计细节!

在页面向下滚动时,悬浮的地址栏和工具栏会自动隐藏到底部,界面看起来沉浸感也更强。

iOS 15 发布后,看看这3个值得关注的设计细节!

这种交互方式的变化逻辑也符合交互设计中的费茨定律

费茨定律

任意一点移动到目标中心位置所需要的时间,与目标距离正相关,与目标大小负相关

iOS 15 发布后,看看这3个值得关注的设计细节!

这里举个例子来简单理解一下,手指当前的位置与按钮的距离 D 越长,所需时间越长;按钮的宽度 W 越大,所需时间越短。应用到产品设计中就是将按钮放置在离手指较近的地方,比如屏幕底部易操作区域,完成任务的时间也就会越短。

iOS 15 发布后,看看这3个值得关注的设计细节!

夸克浏览器同样是将输入框以及一些常用操作置于底部,这是因为我们正常握持手机时,大拇指离底部更近,所以需要进行点击操作的时底部的输入框操作起来更方便,也更快。

iOS 15 发布后,看看这3个值得关注的设计细节!

Safari 的这种交互方式在移动操作系统已经有了一些案例,三星的 one UI 以及安卓阵营中的众多产品也都逐渐往这种大屏化的交互逻辑发展。

iOS 15 发布后,看看这3个值得关注的设计细节!

此外,Safari 采用了新的标签栏设计,同时可以对繁杂的标签页进行整理和保存,标签组支持多设备间的无缝同步,在任一设备上的改动,都能及时同步到所有设备上。

iOS 15 发布后,看看这3个值得关注的设计细节!

卡片化的设计

在使用 iOS 15 的过程中能清晰的感知到,iOS 整很多界面卡片设计更加和谐了,我们最常用的设置页就整体卡片设计上做了区块化和圆角化的处理。要比之前系统直线分割的界面柔和许多。

这种通过使用大留白、两侧缩进的卡片设计使得界面所呈现的功能更加清晰,也更能够突显内容,同时和苹果自家产品 App Store、Apple Music 等产品的设计风格更加靠近。

iOS 15 发布后,看看这3个值得关注的设计细节!

同样天气 APP 主界面也做了布局的改动,增加了卡片化的设计,信息组织也更加直观清晰。天气 APP 头部的天气背景也进行了重新设计,动画背景更加真实,能够准确地反映出太阳的位置和降雨情况,相比之前会美观很多。天气 APP 也增加空气质量、温度、降水强度,空气质量地图等诸多功能。

iOS 15 发布后,看看这3个值得关注的设计细节!

更多新功能

除了通知、Safari 浏览器、天气、钱包、地图等常用功能的更新外,iOS 15 新版本在其他方面也做了更多功能性的升级,这里就来简单看下有哪些重要的更新。

1. Live Text

首先就是 iOS 15 中为照片带来了「实况文本」功能,在这个功能的帮助下,在相册里长按图片,就会弹出复制、查询、翻译和学习等选项,这个新功能估计也是 iOS 15 更新最实用的功能之一了~(这个功能在锤子手机的“大爆炸”中也有)

Live Text 还可以识别照片的各种元素,比如地标、动植物和花卉种类等等。配合 iPhone 自带的系统搜索——聚焦搜索(Spotlight),根据文字元素来搜索图片。

iOS 15 发布后,看看这3个值得关注的设计细节!

2. 专注模式

iOS 15 加入了「专注模式」,能助你更好地专注重要信息,由之前的「勿扰模式」升级而来,包括勿扰模式、工作模式、个人模式以及睡眠模式。每个状态可以设置不同的显示通知,并可与其他设备同步。

iOS 15 发布后,看看这3个值得关注的设计细节!

3. 大闹钟回来了

在此前的 iOS 14 中,设定闹钟的控件改为了数字输入,在随后的迭代中又改为了很小的滚轮输入,这种过小的交互空间受到了很多用户的吐槽。

iOS 15 中苹果又将闹钟设置改为 iOS 13 的大滚轮,随手上下拖动拨盘就轻松的设定好闹钟了。

iOS 15 发布后,看看这3个值得关注的设计细节!

4. 桌面小组件

不知道小伙伴有没有发现,在 iOS 14 中桌面重叠的小组件没法拖动出来,只能手动删除再重新添加。在 iOS 15 苹果就解决了这个问题,小组件现在可以从堆叠状态移出,同时可以选择智能轮换和小组件建议是否打开。

桌面还有一项大的变化就是可以整页移动了,相比 iOS 14 只能一个一个拖动 APP,整页的切换和隐藏大幅缩短了 APP 布局困难者的“编辑”时间。

iOS 15 发布后,看看这3个值得关注的设计细节!

此外,iOS 15 相机和天气的图标也进行了一些细微调整。“健康” APP 中新加入了健康趋势,其中包括静息心率、睡眠和有氧适能,持续观测健康状况的变化。FaceTime 中也增加了空间音频、人像模式、语音隔离、同播共享等功能。相册增加了 EXIF 参数显示等。

除了系统及界面以外,iOS 在 Human Interface Guidelines(界面设计指南)的内容上也有了一些更新,比如新增了包容性的设计原则,SF Symbols 3.0 图标的新增,以及新的空间交互的设计。更多关于 iOS 人机界面设计指南可参考 :https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

iOS 15 发布后,看看这3个值得关注的设计细节!

总的来说,虽然修修补补又一年,但 iOS15 系统在细节设计以及新功能上确实提升了用户体验。

文章来源:优设 作者:姜佳欣


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

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

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


设计师应该懂的设计细节

seo达人



 

1. 界面中的设计细节

在用户使用APP的第一直观感受,便是我们所设计的ui界面,所以界面的信息阅读的舒适感、颜色配色是否合理都是在第一时间直接的传递给用户,我们在界面这块需要注意的设计细节:1.用户的阅读效率  2.视觉舒适度  3.产品品质感。

 

1.10 用户阅读效率

在界面设计中,界面能否准确的将信息传达给用户,让用户在使用产品的过程中对信息的接受比较快速,所以界面的信息呈现的清晰度是设计师必备的能力,也是基础能力,我们通过细节处的把控,让设计助力用户对界面信息的理解,也许我们下的心思用户可能不会注意,但是它确确实实起到了作用,关于提升用户的阅读效率,我们可以从以下几方面去入手:1.视觉降噪  2.视觉聚焦  3.容器整合。

 

1.11 视觉降噪

要让用户能清晰的理解我们的产品的第一步是需要整理界面中信息,把干扰用户的信息都要进行处理,关于视觉降噪我们可以入手的细节有:1.弱化小面积色彩   2.减少次要对比  3.整合半透明  4.弱化分隔  5.元素图形化。

 

(1)弱化小面积色彩

小面积的色彩我们在视觉上会将他看作为点,当点在界面中比较多的时候,会将用户的视线分散,给用户阅读上造成不好体验,所以我们在设计界面中的标签或者有图标的颜色的区分的时候,我们尽量要控制颜色的种类,不宜太多,另外如果带颜色的小标签也会给用户一种是按钮的心理暗示,所以,我们在设计中需要考虑到用户的使用场景和表意。

 

(2)减少次要信息对比

在APP中会有很多复用的板块以及功能相似的板块,我们尽量需要让他们去保持统一,比如像feed流这样通用的样式,只要有差不多的feed列表出现,我们需要在通用组件里去调用这个feed列表,其次是我们在每个列表和卡片中有不同种类的信息字段,并不是每次出现新的信息我们都要在样式上作出区分,我们需要尽量的衡量表意和层次,尽量让字段文字能保持统一,从而提升阅读的舒适感。

 

(3)整合半透明

一般的半透明浮层都是为了区分页面的层级,例如在支付时候,弹窗的半透明的选项卡,这些在视觉的Z轴的层级都是最高的,优点是可以强化浮层与底部的关联性,缺点是会使得视觉上不够整齐,所以当功能层面关联性不强的时候,我们尽量不要去使用半透明的设计形式,所以半透明的浮层通常会用户一些辅助的流程和体量比较好的任务型页面,这样的会让交互效率和层级都是比较清晰。

 

(4)弱化分隔

界面的设计都是以板块去区分每个功能层级模块的不一样,所以合理的设计分隔的样式对于设计师也是一种细节处的考虑。我们在分割的重要层级也是有区分的,分割层级最高的是卡片分割,其次是分割条,在其次就是分割线,而分割线也有种,一种是通栏的分割线,另外一种是不通栏的分割线,所以分割线的层级区分是通栏的高于不通栏的分割线,还有一种情况是通过间距(留白)来区分层级,一般是通过留白没办法去区分页面层级的时候,我们才会考虑用分割线来区分。

 

①点线面的合理运用

在APP界面中,也会有点线面的区别,一般文字我们会将它看为点,分割线是线,图片我们会把它看为面,所以一般情况下,如果当我们设计界面的时候,当点太多的时候,我们需要用线来进行整合,所以界面中点和点(文字和文字之间)直接是需要用线来分隔的,而图片和图片直接,我们通常用间距来表示,所以图片和图片直接一半不会使用分割线。

随着APP的普及开来,我们用户对信息分割处理的认知已经升级,现在的分割也是越来越弱,而当一个列表有文字和头像一起出现的时候,分割线往往也都在文字部分出现,因为头像是图片,是一个面,文字是点,面是不需要线去分割的,而文字却需要分割线去分割。

 

②状态提升线需点到为止

我们现在的APP主要目的是传达内容本身,所以为了让用户更专注于内容的阅读,所以一般界面中的状态的提升线的意义是为了让用户去了解当前所处界面的层级和状态。以前在做设计的时候,会习惯将提升线做的比较长,但是随着设计趋势的发展,人们习惯了短而精致的提升线,所以,过长或者过粗的提示线在当前的设计审美下会成为影响界面美感的因素了。

 

(5)元素形状化

我们在APP中看到一个陌生的形状的时候,这个会在界面中形成视觉噪音,“人们在观察熟悉的视觉形象时,会把不完整的局部形象“作一个整体的形象来感知,这种知觉上的结束,称之为闭合。如果局部形象过于陌生或者简略,则不会产生整体闭合联想,这时大脑会产生负面体验”。

所以我们在界面中的元素摆放通常会将它们摆放成人们生活中比较常见的形状,便于用户去联想,来提升用户的阅读效率。

 

1.12 视觉聚焦

在用户打开APP去浏览的时候,在没有干扰的情况下,用户是根据自己的喜好去浏览页面,用户对板块内容的偏好决定用户注意力的所在之处,更多的时候,我们想要用户根据我们设定的浏览路径去浏览,我们就需要在设计的时候给用户埋下“陷阱”。关于设计聚焦,我们可以从以下三个角度上入手:一.焦点放大  ,  二. 浏览形式的选择   三. 对齐基线。

 

焦点放大

在提升用户阅读效率的设计中,比较重要的就是主次要分明,将需要让用户了解到重要信息需要放大,让用户的视觉动线有落地点,所以关于设计焦点放大我们可以从以下三个角度上入手:①视觉中的“席克海曼定律”、②增加视觉上的对比。

 

① 视觉中的“席克海曼定律”

我们都知道席克定律吧!给予用户的选择越多,用户做出决定的时间就越长。在APP设计和页面设计的时候也是一样的,当用户进入页面后,我们的视觉动线的排列也可以基于席克定律,放大想要让用户关注的信息点,其他辅助信息可以稍微小点,让用户可以直观的区分去主次的层级,让用户带有预期性的阅读,可以提升用户的浏览效率。

 

自从ios11之后,大字重的风格就大行其道了,越来越多的产品开始采用大字重的对比风格,目的也是为了让用户明确自己浏览的页面,然后带着目标在继续往下去看。那为什么大字重的风格会流行呢?

  • 增加视觉上的对比

对比是设计美感的来源。我们在以前做Ui设计的时候,最小的字号大多数都还是11pt,最大的字重是20pt左右,而现在我们在看看,由于苹果ios大字重风格的影响,标题的引入大字重风格后,最大的字号提升至32pt,有的设置于到了34pt,由于最大的字号上限提升了。我们在12-34pt之间可以选择的字号就比较多了,很明显这种强烈而又低频率的对比从视觉上就更具层次了。

 

  • 增加字号的选择范围

以前页面导航文字较小时,板块标题以及列表标题也都相对较小,假如导航文字大小为18pt,那么如果页面内的板块标题为20pt,就会显得比较突兀,因为视觉上会感觉压不住,层级较为混乱。现在由于最大的字号变大了,我们可以选用的字号就变多了,方便了视觉层级上的对比。

 

② 浏览形式的选择

UI界面的排版往往需要考虑到不同字段的重要层级而去采用不同的设计样式。由于我们很多APP的品类的不同,每个产品都很难遵循常规页面布局来设计。尽管没有一种布局方法适合所有目的,但回到设计的基础上并理解诸如“ F”和“ Z”之类的视觉模式可以帮助简化产品布局,并使产品能够更有效地与用户进行交流。

  • F型浏览模式

F模式是一种简单的布局,旨在根据根深蒂固的人类行为引导用户的眼睛查看您希望他们看到的信息。在这种情况下,F模式植根于我们的阅读方式“从左至右”。

F模式就是指,用户通常会沿着左侧重直浏览而下,先去寻找 文章中每个段落开头的兴趣点,这时,如果用户发现了他喜 欢的,他就会从这里开始水平线方向的阅读。

 

  • Z型浏览模式

Z型浏览模式模式相似,因为它遵循用户的眼睛从左到右然后再向下的移动,但是当使用较少的内容时,路径会简化为锯齿形。下面的示例演示了大型设计元素(而不是文本块)如何将用户从左上方的徽标引导到右上方的CTA,然后向下引导至下一个主要设计元素。

Z模式的浏览模式在于用户首先关注的页头水平方向上的内 容。当视线抵达底部时,又遵循着从左到右的习惯模式,重复再水平扫视页尾的最底部的内容。

 

③ 文字的对齐基线

通常我们在设计界面的时候,在文本需要对齐的时候,不需要强制性的与列表最边缘对齐,并且当文字出现两列时,需要设计师主动控制第二列视觉起点,保证符合视觉对齐基线。而在有输入的表单的标题的长短不一致的时候,我们也是归档一端的对其基线,来稳定基本的视觉舒服感。

 

1.13 容器收纳

我们每个APP都会承载大量文字、图片、视频的各种操作控件,UI设计师的职责便是将他们按照美的形式来排版设计和归类,其中归类信息承担的责任便是用户对信息的理解和吸收,所以,这是我们不可忽视的一步。关于容器收纳我们可以通过以下设计策略进行:一.接近性原则归纳法,二.卡片既是容器,三.同属性板块整合。

 

(1)接近性原则归纳法

单个视觉元素之间无限接近,视觉上会形成一个较大的整体。距离近的单个视觉元素会溶为一个整体,而单个视觉元素的个性会减弱。如果相关的元素不够紧凑,用户浏览时就需要根据内容进行主观上的判断,降低阅读效率,所以在设计的时候,我们尽量要将相关联的元素靠的比较近,不相关的元素隔的比较远。

 

(2)卡片既是容器

当产品中的图标字段和文字和字段比较多的时候,我们想要将他们有序的区别开,且不会很凌乱,这个时候我们可以考虑用卡片的来分隔页面,这样板块与板块直接会更加清晰明朗,而且列表中的信息比较多的时候,通常是采用卡片的形式进行划分,让界面看起来更为整洁。

 

(3)同属性板块整合

我们用户在同一个板块看到的相关的元素和列表的时候,我们潜意识会将他们认为他们是有关联的,所以,为了避免用户出现认知断层,我们尽量要将界面中不相关的元素不要放在一起,不然会影响用户在使用过程中对自己信息的判断。

 

1.20 视觉舒适度

视觉的舒适度是用户对于产品比较直观的感觉,它在于我们设计对产品颜色的把控、图标的细节以及其他细节方面的处理。关于视觉舒适度我们可以通过以下设计策略进行:1.色彩的协调感,2.图形体现细节。

 

1.21 色彩的协调感

我们产品中一般所包含的颜色的种类会比较多,而协调感是人类生理上和心理安全感的需求,也是受众时间持久阅读的色彩保障。关于色彩的协调感我们可以通过以下设计策略进行:一.品牌色的延续,二.让配色有规律,三.纹理解决配色的极端场景。

 

(1)品牌色的延展

我们生活比较常见的黑色,除了将眼睛闭上,一般不会有纯黑的颜色,纯黑色会给与人一种比较闷的感受,比如黑色的夜空不会是纯黑色的,黑色的电脑显示器也不是纯黑色的,显示器上我们去浏览的字体,也不会给我们纯黑色的的。

所以我们在产品中对黑色的文字的处理也不应该去选用纯黑的,纯黑的色彩的选用会给我们用户的视觉来一次断层的处理,感觉这个颜色会比较突兀,所以,我们较早之前为了避免纯黑色文字的出现会采用“高级灰”的文字色彩,即在纯黑色上偏灰色的色相,随着用户体验设计的水涨船高,我们现在为了避免文字出现比较纯的黑色一般会黑色上往自己产品的主色调去偏移,这样既不会出现纯黑色的不好体验,也可以对自家产品色的一个颜色,提升对品牌的感知度。

 

(2)让配色有规律

一般在我们APP产品的配色中,让人感觉配色不协调因素主要有两个,一个是色彩选用的过多和过杂,会让人感觉颜色的突然出现会比较突兀,第二个是页面中的色彩缺少关联性,让用户看起来哪个颜色都是新出现的,使用起码比较容易在当前的产品跳出,感觉进入了一个全新的产品。

所以我们在产品中是色彩的选用,尽量定好一组常用的色彩,然后便可以在界面中的图标、插画中去复用,提升色彩在产品中的规律,让色彩在页面中能有呼应。

 

(3)纹理解决配色的极端场景

我们在日常的设计工作的交接过程中,经常会听到领导这样的说,“这个背景配色太单薄了,不够丰满”这样的言语,这个时候我们可以采用点缀的纹理来装饰,通过使用同类色来增加点缀的元素从而让视觉上更加协调,来增加产品的通透感,使得我们产品的搭配呈现上会更加的立体。

 

1.22 图形体现细节

图形体现细节不是说我这个图形在画的时间有多长,而是你的思考点需要深,有些地方是别人想不到的,图形体现细节我们思考的点是将图标的设计流程化,标准化。

 

图标设计的流程化

图标在我们在界面中占有举足轻重的地位,它花费的时间是仅次于我们运营插画的设计,所以我们需要花心思做思考,去设计,图标的风格也会带领界面的风格的走向,所以,图标的设计也是ui设计师的基本功。

图标设计有科学的流程,每一次产品中图标的迭代改变图标都是经过千锤百炼的,在设计图标的过程中,有一套科学的流程,我们在提案讲诉的过程中,会更加人信服。

  • 穷举关键词

我们在设计图标的过程中,一个图标可以代表很多意思,我们怎么可以找出最合适当前产品表意的关键词呢?这个时候我们就需要用到穷举关键词,将能想到的关键词都列出来,例如我们需要去设计一款租房类的APP,里面有一个“意见反馈”的图标,这个图标比较常见,能传递这种意思的图标也有很多,我们需要用穷举关键词将他们都列出来。

  • 图标设计

当穷举完图标表意后,需要列出最佳的词语,我们需要根据用户在生活中比较常见的图片或者类似的图标进行造型提取,然后就是完善颜色和细节,再其次就是要保证其他图标在设计中也需要有相同的元素,保证图标的一致性。

  • 用户测试

用户测试是需要确定在我们设计的图标中去选择一个最能传递当前表意的图标,可以是自己公司其他部门的人,,例如程序员或者销售部,也可以邀请用户来参加,需要说出选择当前图标的理由。

  • 规范制定

当图标确定后,我们应该对图标的细节部分进行复盘,保证以后新增或者迭代过程中,有一个可以衡量的标尺,方便团队协助和复盘设计过程。

 

1.30 产品品质感

在设计中,如何可以做到产品品质感高级呢?这是我们经常会遇到的问题,其实高级感可以理解为一种可以传递感染力的设计,那么哪些界面中设计元素会影响人呢?例如我们的色彩等。另一种高级感就是Dieter Rams(迪特・拉姆斯)在“设计十戒”中提到的“好的设计是尽可能是无设计”,我们可以理解为,在设计中我们需要克制,让产品统一且简洁。所以我们产品的品质感可以从以下两个策略入手:一.界面中的相同与区分  ,二.品牌融入

 

1.31 界面中的相同与区分

(1)区分相似和相同

我们在生活中,有些花费了很长时间和精力去做的品牌在人们心智中早已建立了,例如,茅台的包装早已经深入人心,但是最近有一个奶茶品牌山寨了茅台的包装,就会让人感觉很廉价,像是山寨的。

在我们的产品设计中,如果两个功能不一样,但是意思相近,那我们所需要用到的图标要绝对的不一样,避免用户误解功能,用户在心理上可能会把它们归类为一个功能,如果我们要区分开,要很明确的区分,不会有18和17字号的对比。

 

(2)定义产品的角色性格

一般工作时间比较长的同学,都会有这样的困惑,每天就是原型美化工,找不到自己的价值,特别是原型和竞品的差不多的时候,那我们怎么去创新呢?我们可以思考这样的一个问题,我们日常生活中的桌子,店内显示器或者汽车,也都是有固定的样式,没人会把汽车的轮子做成方的,方向盘做成三角形的,所以,我们做的APP都是用户日常生活中的工具,是没必要做颠覆性的创新的 ,在某些细节做创新,例如宝马的车灯,凯迪拉克的钻石切割工艺。

所以,我们UI设计的创新,绝对也不是在功能上做出差异化,也是需要在细节处体现我们的品牌,怎么设计让我们的产品在打开后看起来和别人不一样,但是又不会影响使用,这个时候,我们要把产品都可以看作是一个有意识的生命,我们将产品想象成服务者,为我们的用户去服务,产品有自己独立的性格,行为动作,我们将这些代入到产品的每一个细节中。

例如我们常用的美团外卖,我们想要去定义它的设计风格,首先要用性格孵化模型去定义产品的性格,我们要通过我们用户的主要目标用户群去定义产品的性格,将它想象成一个具体的角色,然后具体落地成一个可以代表产品的ip形象,我们产品的设计、文案都应符合它的定义。

 

1.32 品牌的延展

除了产品的性格外,我们的产品都基本会有自己的产品线形象或者产品的LOGO,我们设计师可以做的便是放大产品LOGO的记忆点,然后在产品的每个角落中去体验,这样也可以极大的提升产品的品质感。

比如,我们的京东的机械狗随着产品的迭代,慢慢的变胖了,我们可以发现,除了京东的吉祥物发生了变化之外,京东的图标也是慢慢的变得比较圆润且通透,仿佛也是在呼应着产品的变化,京东吉祥物狗的微笑也是被提炼到产品的每一个细节中,这种彷佛产品陪伴着用户在成长的变化,也是一种润物细无声的品质感。

 

1.33 口语化文案

我们可以将我们产品中的提示文案可以想象成产品的ip形象在对用户讲话,在融入产品形象的性格因素,赋予了产品的生命力,同时,体验层也可以极大提升品质感。

 

2. 交互中的细节

一个成功的产品,除了需要有好看的外部,实用的细节也是比较重要的,一个产品的交互决定了这个产品在使用过程中的流畅度,交互中的细节便是我们今天要说的微交互,一个好的微交互在使用过程中,可以给用户留下深刻的印象,我们作为一个体验设计师,在设计方案的时候,不仅需要考虑视觉层面的舒适度,也需要考虑到交互层面使用的流畅性和信息的传递。

 

2.10 微交互的起源

计算机科学家拉里·特斯勒(Larry Tesler)在为施乐Xerox电脑的文字处理软件Gypsy设计程序时,突发奇想,给软件Gypsy加入了鼠标操作和GUI图形界面,这样便大大的方便了Gypsy作为文字处理软件的实用性与便捷性,于是在不断体验与尝试的过程中,于是拉里·特斯勒在改版的时候,给Gypsy加入了复制、粘贴功能键。这些概念随后成为了文本编辑与计算机操作系统用户界面的基石之一。

拉里·特斯勒其实当初设计复制和粘贴的思路便是较少用户操作的阻力,让用户在使用过程中不会被其他的事物所打断,往后的数十年,拉里都为了这个目标在奋斗,所以“复制”和“粘贴”便是精心设计过的微交互,没有任何提示和阻力,一气呵成的便捷交互。

交互设计以及人机交互在不断的发展的历史,实际上就是微交互的历史。今天,我 们在桌面和笔记本电脑中、在移动设备中习以为常的那些交互方式, 都曾引发过微交互设计的革命。无论是保存文档,还是把文件拖放到 文件夹,还是连接到Wi-Fi网络,都曾经是精心设计的微交互。就连滚动和打开多个窗口这么“基本的”交互方式,也都要经过设计。技术在快速发展,不断对微交互提出创新的要求。用户习惯了拿来就 用,他们只会关注更好的交互方式,或者是那些由于技术发展催生的、或强制必须使用的微交互方式。

所以,好的微交互就像“Ctrl+C””Ctrl+v”那样方便,会改善我们的使用体验。

 

2.20 移动端微交互应用场景的发展历程

还是“复制”“粘贴”的例子,我们在功能机的时代,我们想要把一段文字从一个软件复制到另外一个软件上,我们通常要在两个软件不停止的去切换,然后通过记忆内容然后在来输入,这样的效率和精准度都不是很高,而且要是需要复制的内容过于庞大,想要完成便是一件让人头疼和心累的事情。

但是在进入移动智能机的时代,该功能的微交互便发生的天翻地覆的变化,第一步我们只需用长按需要复制的文字,调出复制按钮,第二步,选中我们需要复制的文本内容,第三步便是切换到需要粘贴文字的APP,第四步,长按调出粘贴按钮,选择粘贴文字,这与之前仅靠人肉记忆去输入文字无论在效率上还是在准确度上都有了不小的飞跃。

但是随着技术的革新和从业者对于用户体验的理解更加深刻,我们的操作追求更高效,更精准,于是,该场景的交互又迎来的一次技术的变革,为了跟上时代的发展与用户的诉求,在2016年10月19日的锤子手机发布会上,它推出了两个功能:“Big Bang”和“One Step”。“Big Bang”的功能是长按一段文字,可以根据算法自动将文字的内容分割独立的词语按钮,只需点击这些分割的按钮就可以选择想要的内容。而“一步”可以直接将所选内容拖动到其他目标应用程序中,而无需在应用程序之间切换。这两个功能的结合,将之前需要四个步骤的功能简化为只有两个步骤:第一步是按下选择内容;第二步,拖动到目标应用程序。

在2021年6月8日凌晨,一年一度的苹果WWDC大会在线上正式举行,ios带来了类似于“big bang”的功能:live text,也宣告着这个小小复制粘贴功能又完成了一次新的进化,所以,无论是“Blive text”还是“Big Bang”,这两个功能本质其实就是微交互的进化,只不过用了两个不同的名字去代表而已。

 

2.30  交互与微交互的差异性

交互设计是串联起产品各个页面与功能反馈的基础工作,如果缺少了某个交互环节可能会导致产品的BUG或其他负面情况,交互设计简单的来说就是满足了产品的可用性。然而微交互的存在是为了给产品提升易用性与好用性,能起到锦上添花的作用。

 

2.40 微交互为什么这么重要?

自乔布斯在2010年06月08日发布了iPhone 4开始,我们的手机便宣告进入了移动智能机的时代,我们手机从仅仅可以打电话到可以上网玩游戏等等,所以为了抢占用户的空闲时间,用户体验就越来越被企业所看重,细微且无处不在的微交互也掌握着用户体验的核心–细节。

在早期,我们一直会觉得安卓手机不如苹果手机好用,会觉得比较卡断和粗糙,其实就是因为苹果的微交互会做的比较好,无论是在手机解锁后的图标入场动效还是点击APP后的转场效果,细腻舒适的微交互便一度成为苹果公司的象征。

我们会发现,微交互几乎无处不在,它可能是一次震动提醒通知、播放下一首歌曲、登录一次网站、在手机应用里查询一次天气、微信回复一条信息、朋友圈点一次赞,如果这些交互设计过渡得顺滑流畅又自然的话,几乎很容易就会忽略他们的存在。虽然微交互近乎隐形,且很容易被人忽视,但它的重要性却不容小觑。我们知道,移动产品交互设计时考量的因素有两个——功能和细节。功能吸引用户使用产品,细节则是留住用户成为回头客。好的微交互,可以变无聊为有趣, 把没有生命力的 app 变得生动好玩,让用户感受到参与感和愉悦性,给用户留下深刻的印象甚至上瘾。伟大的产品和平庸的产品之间,区别就在于微交互。

 

3. 微交互的构成

那怎样才能做好“微交互”呢?丹·赛弗在他的著作《微交互:细节设计成就卓越产品》中,提出了好的微交互应该有的结构: 触发器、规则、反馈、循环与模式 。我们一个个来讲。

 

3.10 触发器

触发器,是启动微交互的“扳机”,是微交互启动的原点。要把识别“扳机”的成本,降得越低越好。就像沈腾在《羞羞的铁拳》的那句经典台词一样“你过来呀”,简单且易于识别。

触发器一般是分为两种,就像平时打游戏一样,有主动技能和被动技能,触发器也被分为手动触发-即用户主动去触发的,被动触发-即系统被动触发的。

 

3.11 手动触发器

手动触发器一般是用户自主的去点击,所以我们尽量要去保证触发器的识别性,以及用户在点击前的一些心里预期的管控。

 

(1)降低识别成本

触发器是微交互启动的第一步,在使用场景下必须要让用户能识别出来,用户才能去点击,所以触发器要足够清晰明显。

比如,我们在浏览和使用视频屏网站或者视频APP的时候,网页或APP上的视频中间都有个硕大的“播放”按钮,比如,摄像机上的录像键,总是最明显的红色;这些都是触发器在提示你应该点我,且外观样式都是采用通俗易懂的外观样式。

 

(2)对用户的预期管控

我们一般去一家陌生的商店的时候,有的商店会玻璃门,比较高级的是自动的,一般的店铺都会是手动的,这时候,一般的手动的玻璃在门上都会贴上这个门是用推的形式开还是用拉的形式去关,这样,我们便知道这样去推或者拉门,是肯定可以把门打开的。

所以我们的触发器需要让用户知道我点了之后会去到哪里,在形式的设计上需要明确,比如我们的微信或邮件APP的一角会显示未读邮件的数量,提示用户在点击后肯定有未读的邮件或消息。

 

(3)考虑用户的使用场景

在我们平时工作和娱乐中使用的键盘,我们键盘的按键的大小都是根据用户在日常使用场景的频次和设计大小的,例如,用户的最多的空格键,是最大的,其次是回车键,使用的最少的开关和其他的控制键是最小的,这都是考虑到我们生活中的使用场景去设计的。

我们在设计触发器的时候也是一样的,需要考虑到用户在日常生活操作的具体情况来对触发器的大小位置来进行设计摆放,尽量让用户操作起来比较合适。

所以我们APP的按钮会根据使用频次来确定图标的大小的层级,方便用户凭借第一反应去点击使用。

 

3.12 系统触发器

系统触发器的微交互一般需要用户满足了某些条件才会触发的,例如我们平时在工作时间设置的起床闹钟,我们微信的朋友圈的更新提示,都是属于系统触发器,在满足了某些系统设定的规则之后才会触发的。

系统触发器通常会让用手动设置何时触发,触发的频率状况,比如,我最近想学习,不想被朋友圈的信息影响,我可以选择关闭朋友圈红点提示,比如,我的闹钟设置的是周一到周五的工作时间去响铃,我周三晚上加班太晚了,第二天中午十二点去上班,这个时候我就可以单独的选择周四这天闹钟不响。

 

3.20  规则

规则,用来规定微交互的过程,是整个微交互的核心。好的规则,应该顺乎人性、体贴方便。简单的来说,规则就是要按套路出牌,不然就会让用户感觉到出其不意。

 

(1)动词和名词

一般的规则都是通过流程图去演示,理解起来成本比较大,丹·赛弗 (Dan Saffer)提出一个理论:动词=用户行为=交互目标,名词=操作对象=解决方案。

举个例子我看在电视剧的时候,看到一些不太喜欢的地方,准备去快进,这个时候视频的进度条就是名词,而用户准备快进这个动作便是动词。

所以在制定规则的时候,我们需要把复杂的流程给简化下来,弄清楚动词和名词,我们便可以开始制定规则了。

 

(2)及时反馈当前的状态

好的微交互尽量在一个屏幕内能去展示完成,不需要用户去跳转,这样便是符合人性的微交互的设计,所以我们在设计为微交互的流程的时候,尽量通过不同的状态去给用户传递消息,这样可以使用户感知界面的微交互不会太细碎。

 

(3)选项的防呆设计

规则,是微交互的核心。要仔细打磨,反复测试,每个环节的问题都需要考虑到。所以,我们在设计微交互的时候,要更加注重细节上的体验,给予用户操作上的舒适感。

 

① 聪明的默认项和有限的选项

什么是“有限的选项”?简单的说,我们提供给用户的选项越少,规则越少,用户便更轻松理解这种交互操作。什么是“聪明的默认项”呢?简单的说,当给予用户的选项比较少的时候,我们通常要给用户一个默认的选项,因为这个选项是用户最有可能采取的下一个操作,因此有必要提示用户。

简单的可以理解为,提供的选项越少,用户越容易选择。所以,在设计方案中:提供默认选项>提供有限选项>提供多种选项。

 

  •  聪明的默认项

默认项和有限的选项是相互关联的,正常的情况,在有限的选项中为用户提供默认项。而默认项应该是大部分用户最常用的那个选项。

例如我们在退出或者删除的时候需要二次确认,正常的会将确认放在我们比较好操作的位置且会高亮放大展示,一般的电商平台上的产品也是种类繁多,所以一般的电商平台都会有分类区,将不同的商品归类为不同默认的选项,来供用户选择。

 

  •  有限的选项

有限的选项我们将他分为两种,一种是只在需要的时候出现,另外一种是只提供需要的选项

    • 1)只在需要的时候出现

通常我们手机更新系统的按钮,在没有新的版本的时候发表,这个下载按钮是不会出现的,只有当我们手机厂家发布了新版本,下载的按钮才会被解锁,出现在界面中。

    • 2)只提供需要的选项

例如我们国内的搜索百度,主界面上只有搜索框和百度一下,简洁明了,让用户一看就知道产品的主要功能,在例如,当我们因为软件连接上车上的蓝牙后,便进去的车载的模式,因为开车的时候需要集中注意力去开车,所以车载模式下,很多不必要的功能便会被隐藏起来,只会提供必须的功能选项按钮。

 

3.30 反馈

反馈,是向用户说明规则。用户并不知道你设计了什么规则,你要通过反馈友好地让他知道。

Twitter在这点上,做得非常好,它在你输入密码时,在右边用文字给你实时反馈,向你说明规则。

你输入字数太少,它显示:需要6个以上字符;你输入简单单词,它显示:密码太好猜了;符合要求,它会按照密码的强度,逐级显示:弱,不错,强,很强!

 

3.31 解释规则

反馈的作用之一就是向用户去解释我们所设置的规则,比如,我们工程师所设置的密码的规则:要有6个以上字符,最好有大写、小写和数字。不要用生日、纪念日等。但用户不知道啊,你要把规则,用反馈告诉他。

 

(1)反馈与用户操作相关的信息

我们给与用户的反馈要尽量与用户本次的操作的相关,比如,用户下载文件,我们需要给与用户的反馈信息是,已开始下载,下载的进度和下载完成,如果反馈再细节点,我们在下载的过程中可以提升用户,”下载过程中会占用大量的带宽,也许用影响您浏览网页或者其他是上网操作”,反馈越是细节,用户在体验微交互的过程中的负面情绪就越少。

 

(2)反馈信息简单清晰

微交互的反馈直观也是比较重要的因素之一,可以让用户更好的理解规则,降低用户的认知成本,我们反馈给用户的信息应该都是准确且重要的,例如我们的消息提醒,一般都是在有几条就提醒几条消息,消息的传递需要做到少即是多,信息越是重要,反馈的层级就要越高。

 

(3)反馈信息具有幽默感

我们在日常生活中都不太喜欢直来直去的人,都喜欢和幽默、风趣的人聊天,我们对用户的反馈信息也是一样,需要避免机械化的回复,回复需要让用户感觉我不是在和一台冰冷的机器沟通,所以我们的信息反馈更多的是对氛围的一种调节,比如,搜狗输入法在检测到网络不佳的情况下,会用一种比较风趣的口吻说“哎呀!汪仔去太空旅游了”

 

3.40 循环与模式

循环与模式,我们可以将它理解为是规则的分支。比如,闹钟是你每天接触的第一个“微交互”了吧。眼睛还没睁开,闹钟就响了。你重重拍下去,这时就启动了“再睡一会儿”这个分支的规则,也就是“模式”。如何设计这个分支,最合理呢?你可以让它5分钟后再响,如果再拍下去,就别叫醒他了。“你永远叫不醒一个装睡的人”。这样合理吗?

也许不合理。更合理的做法是,拍第一次,5分钟后再响,拍第二次,3分钟后再响,拍第三次,缩短为1分钟。然后就一直响。因为你拍的次数越多,越有可能因为贪睡误事。

循环与模式,就是一次性的或者循环的分支规则。

 

循环的分类

① 计数循环

即我们在给用户反馈前需要来回检查规定好的次数,发现了问题在给用户反馈,例如,我们的微信在网络不稳定的情况在,我们会看到微信的刷新的状态会连续好几次的出现刷新,然后才会给用户网络不好或者断网的提示。

 

② 条件循环

即在限定的条件下的循环,比如,我们手机上的闹钟,它便是会在我们设定的时间内会准时的叫我们起床,如果当天没有设定闹钟或者手机没电了,这个循环便不会执行下去。

 

③ 集合循环

即循环的核对数值,然后停止,和前面的计数循环有相似之处,例如我们短信系统,会对收到的信息进行系统的统计,然后发现有未读的信息,便会在角标上记录数值1.

 

④ 无穷循环

即循环开始后,除非人为的干预让它停止或者系统出问题的时候才会停止,否则会一直的循环下去,就像永动机一样。无穷循环分为两种一种是开放循环,另外一种是封闭循环。

 

⑤ 开放循环和封闭循环

  • 1)开放循环

即在满足条件后,执行一次便结束,miui有个功能是可以设定手机每天早上什么开始,当每次到达这个时间后,我们原本处于关机状态的手机便会开机,这个指令执行一次便不会在执行了。

  • 2)封闭循环

即在满足条件执行后,可以进行自行的内部条件,比如,当我们手机开机后,我们的手机屏幕的亮点会根据环境光而去调节。

  • 3)长循环

长循环可以理解为是一种陪伴用户在使用我们产品时候记录的一种微交互,使用的时间越长,这种记录就越多,比喻我们软件的搜索记录和浏览记录便是一种长循环。

  • 4)渐进揭示或渐进减少

长循环的另外一种情况便是当用户长期使用后对软件越来越熟悉后,我们可以对有经验的用户开放更加进阶的玩法。

长循环的另外一种情况便是渐进较少,即当我们的用户熟悉了我们的软件后,有些界面上的说明解释的提示可以适当的去掉,简化界面,对用户而言,干扰少了,也会提升使用的效率和交互的速度。

 

4. 微交互的三种层次

微交互在产品中的应用场景也是比较丰富的,一般我们的用户首先感受到是微交互给予用户视觉层的体验,其次深入体验后是功能交互层的体验,最后体验的是一个比较好的容错性、比较好的交互后得到的心理上的愉悦,也就是情感层。

视觉层主要给予用户感官层面的体验,交互层是给予使用上的效率体验,情感层主要是让用户体验后心理上有满足或者愉快的感受。

但是这些层面又不是绝对独立的,每个微交互设计都能在上述三个层面中找到单独或者组合,比如双击屏幕的反馈,就满足了视觉层面、功能层面与情感层面的三层优化。

 

视觉层

在视觉层,考虑的转场交互动作是否足够流畅,视觉是否美观,反馈交互是否有创意,是否加深品牌印象。

 

交互层

通过控制转场样式,反馈样式与反馈时间是否可提高交互效率,帮助用户认知,提升产品数据。

 

情感层

通过趣味幽默化的转场与反馈动画是否可以降低产品的负面体验或者让用户产生愉悦感

 

4.10 微交互的应用场景

微交互不是刻意的。而是被动发现问题的优化过程,当静态设计不能满足的时候,可以考虑动态的微交互设计,

所以,我们的微交互设计需要满足用户的操作体验,微交互是否帮产品的数据上有提升,设计角度上微交互是否有创意。

 

4.20 微交互视觉层的应用

(1)相同的元素串联转场

推拉摇移是摄像中的术语。推指把镜头变焦到长焦端,使景物更近,拉则是相反,把镜头变焦到广角端,使景物显得更远,摇指镜头跟随运动的物体做同方向的转动,移指镜头跟随动体做平行移动。这些手法都是经历过前人的无数字的实践所总结出来的道理

我们在做交互转场也是一样,合适转场是让产品添姿增色的重要手段之一,在iOS默认的转场效果就是页面从左往右去进场,但是想要在让你交互转场看起来比较舒服,就需要在细节上下功夫,其中比较常见的手法就是界面中有相同的元素的时候,让他们将他们串联起来,这样的交互转场会让你产品看起来更舒适。

 

(2)卡片推开周围的元素

在安卓的Material Design提出Z轴的概念,在扁平化的界面上让产品有三维的层次感(三维就是X轴(左右)、Y轴(上下)、Z轴(前后)组成的立体世界,而二维就是只有X和Y轴的平面世界。)我们知道手机的界面是一个平面和二维的空间,Material  Design通过一些二维的表现手段,比如投影和动态效果,来构建Z轴(前后)的概念。

在这个基础上,我们可以在微交互上下功夫,例如当界面中的卡片比较多的话,我们想让产品的体验更具有层次感,我们可以通过卡片与周围元素的变化产生关联,营造微交互中的产品层次感。

 

(3)专属的元素动画样式

我们人天生都有好奇心,对新鲜的事物都有尝试的心理,我们在微交互的设计中,也需要具有创新精神,让用户在视觉体验层有与其他产品有不一样的观感,这样有利于树立我们产品的品牌感知。

比如,我们在点击TAP时候的特殊的动画呈现,点赞时候独特的反馈。都会在视觉层面给用户留下比较深刻的印象。

 

(4)强化操作过程中的趣味性

下拉刷新是我们在产品中日常会使用的交互,现在的产品一般都不会使用默认的“菊花”的下拉刷新,一般会使用自己的IP或者更加有趣的MG动画,都是为了让用户在使用我们的产品时候在视觉层有新的体验,与其他的产品去拉来差距。

 

(5)循环动画强化产品氛围

我们在酒吧857的时候,酒吧都会有气氛组,来让新来的客人比较快的融入到酒吧愉快的氛围中,或者一般商业区过节的时候,都会将街道和广场装扮与节日相符的灯光,都是为了让客户快速的融入到气氛中。

我们在产品中也是,有的功能想吸引用户的目光,或者想让用户快速的融入到某节日到氛围中,都是可以通过循环都动画去引导用户。

 

4.30 微交互交互层的应用

(1)交互行为主动联动性

我们都知道,我们手机的屏幕空间是有限的,有时候的功能布局方面可能不是那么的合理,这个时候,我们的微交互就可以起作用了,比喻,我们手机上滑当时候,就可以将某些用户比较常用的功能常驻在屏幕上方,当用户想去操作的时候,不用在滑回去在去操作,在体验上减少了用户的操作步骤,提升了用户在产品用户过程中的舒适感。

 

(2)合适的元素出现在适当的时机

我们经历过这样的时候,当陌生人来找我们做某些事情的时候,我们的第一反应力都是比较抗拒的,但是熟人的话我们可能会因为各种原因不可以拒绝。

产品设计中也是一样,如果我们想让用户去应用商店去给我们的产品一个好评,肯定是不能一上来就给用户引导去评价,这样会极有可能会导致差评的,但是,我们可以利用用户“啊哈时刻”去提升用户的好评动机,例如,当用户觉得某内容不错的时候点赞了,收藏了,我们这个时候让用户去好评,这样好评的几率会大点,起码不会引起用户的逆反心理。

所以,当我们想要用户去为我们做某些事情的时候,一定需要找准时机,结合微交互,提升用户去完成某件事情的意愿,例如,当用户在浏览商品的时候,我们可以给用户发放优惠券,我们想让用户去分享我们的内容的时候,可以在用户在快看完的时候,出现分享按钮,都是可以通过微交互去让用户帮我们去做某些事情,以达我们想要的结果。

我们的知道豆瓣是一个社区内的产品,它是希望用户在豆瓣来发表自己的想法的,所以,当用户看到评论区的时候,它用将评论区给展开放大,吸引用户的注意力,从而加大用户互动的意愿。

 

(3)进场告知用户隐藏的功能和操作

我们做设计的时候可能经常会遇到一些无理的要求,例如,这个功能需要强化,但是又不能去干扰用户,每次遇到这种需求,我们设计师往往都是比较痛苦的时候,例如当用户没有开通会员的时候,我们想给用户去展示会员的一些特权和首次开通的优惠,但是,用户要是没有开通,我们是没办法很好的去展示的,这个时候,我们可以通过微交互,在进场的时候,将隐藏的信息展开,然后过收起来,这样用户即看到信息,又不会影响接下来的操作。还有就是当我们上新某些功能的时候,想让用户去快速的去了解这个功能,这个时候我们可以通过演示动画的微交互来让用户去快速的了解我们新功能怎么去操作。

 

(4)元素跟随页面的形态改变

我们的产品在操作的时候难免会出现各种状态,为了让每个状态出现的时候都比较符合用户的操作的习惯,这个时候我们需要考虑用户的场景来改变页面的布局,例如快手它的战略是一个内容分享的社区,它注重的是用户与主播之间的沟通,所以,正常的软件,当视频在播放的时候,完们想看评论,这个时候的步骤只能侧中一个,但是,快手它考虑到用户的体验,当用户在上滑的时候,为了不打断用户继续观看视频,视频内容会慢慢变小,然后固定,这个时候用户可以在看视频的时候也可以查看评论,方便用户与主播之间的沟通,强化了内容社区的氛围。

 

(5)照顾边缘场景

一个产品它的交互是否比较好,我们看的是它是不是能满足用户大部分的使用的场景,所以,有的时候,当静态的交互无法去满足用户的一些比较特殊的场景的时候, 我们这个时候就可以考虑微交互的设计,让产品的交互体验能覆盖的场景比较全面。

例如,当我们在微信通讯录想根据用户的首字母去查找人的时候,一般左边的字母都会做的比较小,无法精准的查看到我们现在看到哪个字母,所以,当我们的手去点的时候,到了某个字母的时候会放大,比如,我们因为开会将手机调成静音或者音量关了的时候,我们去播放微信的语音或者看视频的时候,这个时候,APP会提升我们音量未开之类的,这都是考虑到极端的场景,让用户的体验更加顺畅。

 

4.40 微交互情感层的应用

(1)幽默拉近用户

当我们看到有趣的东西的时候总是想和身边的人去分享我们的喜悦,这是人们比较底层的逻辑,我们的APP产品也是这样的,当我们想让用户持续去体验我们的产品或者想要用户去主动的分享我们的产品,那么,我们可以将产品做的有趣一点。

比如,转转在登陆的时候为了吸引用户的注意力,它会在用户登录的时候做一个比较有趣的小动画,也消除用户在多一步操作时候的负面的情绪。

 

(2)转场加载占位符

我们在日常的APP使用中,总会遇到像信号不好的情况,这个时候,我们心里是比较着急的,特别是比较紧急的情况,负面的情绪是比较大的,我们需要将这点考虑进去,为了避免用户在等待时候的焦虑感和负面的情况,我们一般会使用加载的占位符和加载的进度条,让用户知道我们的软件是在工作中,而且是在卖力的工作中,这样,可以缓解用户的负面情绪。

 

(3)产品的仪式感

对于我们来说,仪式感是很重要的,比如结婚纪念日要去庆祝一下,生日的时候一定要和朋友去high一下,这都是来自我们生活的中的仪式感。

仪式感在产品中也很重要,他可以提升我们用户的幸福感,例如微信在给朋友发送生日快乐的时候,屏幕中会掉下蛋糕,在过年的时候发送新年快乐,屏幕中也会掉落红包,微信将我们日常生活中所需要的仪式感搬到了产品中,通过微交互来提升我们日常的幸福感。

 

(4)3D touch判断用户的情绪

我们人都是感情动物,满足人们的日常的情绪需求也是很不错的角度,例如facebook的点赞功能可以通过人点击的力度大小去判断人当天的情绪,例如,点击的力度越大,说明你的心情比较好,或者对那个观点比较赞同,如果你点击的比较轻,说明的你心情不怎么好。

 

5. 总结

随着移动互联网慢慢进入下半场,我们头部同品类的产品的布局也是越来越相似,所以,很多细节处的地方就是我们设计所能发力的点,无论是产品视觉中还是产品交互中的细节,都是不可忽视的设计细节,它能提升产品的品质和用户体验。

其次,我们常说魔鬼在细节,但为什么不说天使在细节?因为细节做得好,也许不能让我们上天堂,但是细节做不好,足以让我们下地狱。所以打磨细节是我们做为设计从业者不可绕过的一个环节。

 

原文地址:站酷

作者: Endings

转载请注明:学UI网》设计师应该懂的设计细节

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

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

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

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档