首页

悬浮小窗该如何设计?高手的样本分析来了!

博博

1. 前言


悬浮小窗是什么?

先看张图,对悬浮小窗有一个大致的概念,下图是花椒直播 APP 中的直播悬浮小窗。(为方便书写,下文将悬浮小窗简称为小窗)

UI设计 交互设计 小窗设计 悬浮小窗

本文的悬浮小窗指的是视觉空间上的层级概念。

用户的感知是:

  1. 自己退出了 A 房间到达了另一个 B 房间
  2. 同时 A 房间并未完全关闭,而是以一个小窗口的方式悬浮着
  3. 我随时可以点击这个小窗口返回 A 房间

为什么这种感知能应用到互联网产品中?

原因就在于这符合尼尔森可用性原则中的系统与用户现实匹配原则。

即:设计应与用户现实生活中对相关产品的认知、经验、习惯等相符,以用户期望的方式表现出来,使用户可以利用已有的知识经验来执行操作任务。

翻译成人话就是让用户在使用我们的产品时能够和现实生活中的习惯对应起来。

举个例子:

电商软件中“购物车”为什么使用购物车这一形象和名称?

其实就是和现实生活对应起来的,生活中逛超市的时候会把要买的东西加入购物车一起结算。所以“购物车”这个概念迁移到互联网后用户的理解成本就非常低。

悬浮小窗也是一样的道理,小窗模拟了生活中的空间转移,在用户的心智层,界面与界面之间的跳转就类似于从一个房间到达另一个房间。

即使某些时候多个界面在技术的角度其实就是一个页面,但是站在用户的角度看不到这些底层逻辑,最直观的就是一个个房间之间的切换。

(其实这里还涉及到另一个概念,把简单留给用户,把复杂留给程序。不管逻辑多复杂,对用户来说,就是两个空间的跳转。)

UI设计 交互设计 小窗设计 悬浮小窗

2. 悬浮小窗的特点


悬浮小窗有三个特点:可切换界面、Z 轴最高、可拖拽(一般情况)。

① 可切换界面

如上一节所说,悬浮小窗就像是房间的切换,所以感官上悬浮小窗就是切换界面的作用。

② Z 轴最高

二维界面如何存在 Z 轴的概念?

大家在使用 APP 过程中一定遇到过弹窗和浮层的情况,如下图,可以看到图中 APP 的弹窗在感知上是覆盖在内容层上的。

而右边的截图中的浮层是浮在正文内容上的,这就是 Z 轴,在互联网应用中这是比较抽象的空间维度。但是却是用户可以明确感知到的,而感知的最直接方式就是覆盖或者悬浮,感觉到 A 元素是覆盖在 B 元素之上,或者 A 元素悬浮在 B 元素之上。

UI设计 交互设计 小窗设计 悬浮小窗

而悬浮小窗所谓 Z 轴最高则是因为悬浮小窗在 Z 轴的维度一般位于 APP 界面所有元素之上。

③ 可拖拽

可拖拽很好理解,即用户可以通过拖拽移动悬浮小窗的位置,不过一般非直播音频类产品会喜欢固定在界面的某个地方。比如得到 APP 在听书时退出听书页面会在底部固定一个播放条。

3. 悬浮小窗分类


技术维度把悬浮小窗分为两种:系统自带和自行开发。

UI设计 交互设计 小窗设计 悬浮小窗

内容维度上把悬浮小窗分为三种:视频小窗、音频小窗、文档小窗(含白板)

UI设计 交互设计 小窗设计 悬浮小窗

由于系统自带画中画功能自定义程度不高,无参考意义,下文主要从自行开发的悬浮小窗入手,从视频小窗、音频小窗和文档小窗(含白板)三种分类来进行分析。

4. 总结


此部分内容是对第三部分的总结提炼,相关产品详细分析、截图以及录屏细节请查看第三部分。

① 视频小窗

UI设计 交互设计 小窗设计 悬浮小窗

UI设计 交互设计 小窗设计 悬浮小窗

GIF 演示(左滑屏幕边缘开启小窗)

UI设计 交互设计 小窗设计 悬浮小窗

GIF 演示(拖拽小窗超出屏幕边缘后关闭)

UI设计 交互设计 小窗设计 悬浮小窗

视频小窗 UI 集合

② 音频小窗总结

UI设计 交互设计 小窗设计 悬浮小窗

UI设计 交互设计 小窗设计 悬浮小窗

音频小窗 UI 集合

③ 文档小窗

UI设计 交互设计 小窗设计 悬浮小窗

UI设计 交互设计 小窗设计 悬浮小窗

文档小窗 UI 集合

5. 样本分析

本次调研 APP 覆盖直播、音乐、社交、教育、会议、资讯四个方向,包括斗鱼、虎牙、花椒直播、企鹅直播、CC 直播、阿里巴巴、淘宝、酷狗直播、陌陌、微信、陌陌、百度知道、迈聆会议、金山会议、网易会议、共计 15 款 APP。

① 视频小窗

视频小窗将从功能和 UI 两个大的维度进行分析,细分维度如下表格。

UI设计 交互设计 小窗设计 悬浮小窗

斗鱼

APP 简介:以游戏直播为主的互动式直播平台

亮点

a 导航栏免遮挡,小窗拖拽移动过程中不会覆盖一级导航和一级页面的底部 tab 栏,可避免将主要导航遮挡住

b「关闭」按钮视觉强度较弱的同时能够看清 icon

槽点

放大缩小不流畅,有卡顿的感觉

UI设计 交互设计 小窗设计 悬浮小窗

虎牙直播

APP 简介:包含游戏、娱乐的互动式直播平台

亮点

a 滑动小窗到屏幕关闭小窗:除了点击关闭按钮,还可以左滑小窗到左右屏幕边缘,超出屏幕 2/3 时关闭小窗

b 同斗鱼,导航栏免遮挡,小窗拖拽移动过程中不会覆盖一级导航和一级页面的底部 tab 栏,可避免将主要导航遮挡住

槽点

自动打开声音:在小窗上将声音关闭后,点击小窗上的放大按钮进入全屏模式,此时声音会自动打开。声音的开关应该由用户自行选择而非帮用户做选择,万一用户所处场合不适合开声音,突然开启的声音岂不是很尴尬。

UI设计 交互设计 小窗设计 悬浮小窗

花椒直播

APP 简介:包含游戏、娱乐的互动式直播平台

槽点

a 同虎牙,关闭声音的情况下打开直播间会自动打开声音

小窗会移动时可以挡住顶部一级导航栏

UI设计 交互设计 小窗设计 悬浮小窗

得到

APP 简介:知识服务 APP,提供电子书、课程等服务。视频以点播为主。

亮点

向下滑动视频触发小窗的方式交互非常友好且顺手

页面切换到有『发布』悬浮按钮时,悬浮按钮位置位于小窗之上,避免遮挡发布按钮

UI设计 交互设计 小窗设计 悬浮小窗







作者:土拨鼠



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

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



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



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

排版不必花里胡哨 | 设计技巧

seo达人


图片

图片图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

图片

有些人可能会说,我要是这么排版,客户肯定不会觉得太简约了、重做,我只能说有这个可能,毕竟每个人的喜好和具体的需求是不一样的,所以,你要用在合适的产品和客户上,不要千篇一律;其次也不能直接照搬日本设计的排版,比如大量的竖排在中文设计里不合适,还是要以横排为主;另外,很多时候客户不是不喜欢简约一点,而是不喜欢你做的简约,如果你把客户的需求都表达出来了,还简约好看,客户没理由不喜欢。 


作者:葱爷

转载请注明:学UI网》排版不必花里胡哨 | 设计技巧

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


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


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



案例锦囊|有哪些小交互让你瞬间觉得产品很「智能」?

seo达人


一、猜到了你想要的

案例 1    使用“多多买菜”加购一款蔬菜,平台会自动为你提供更多规格做选择。比如你将 500 克的西红柿加入购物车,平台会告诉你可以买“两盒装“,价格更优惠:

图片

 

案例 2     脉脉上,如果对于自己所在的公司的内容进行评价,系统会直接采用随机命名的方式,给你起一个有趣的新名字,起到了保护你隐私的作用,让你放心大胆地讲实话:

图片 

案例 3     bilibili 上的很多主播会给观众做与内容相关联的进度条,你可以很清楚的看到视频每一段的具体内容和播放进度,跳播更方便:

图片

 

案例 4     用搜狗输入法输入“今天天气”的这几个字时,会自动推荐当天的天气情况。你可以提醒你在乎的人注意天气变化:

图片

 

案例 5     产品也可以阻止你做坏事。Adobe Photoshop 软件中内置了一个钞票防伪系统,用来防止你利用其制图功能非法制作假钞:

图片

 

二、知道你不知道的

案例 1     高德地图会给用户很多条可选路线,对于每条路线都会给出详细建议,比如:拥堵少、红绿灯少,还会给出明显提示:“窄路多,需要小心驾驶” 或者 “路上有一个新增电子眼” —— 它知道很多你不知道或记不住的内容:

图片

 

案例 2    在百度浏览器上查找不同单位之间的换算时,百度会呈现出与你搜索的内容相关的所有单位名称,便于你进一步做查找和换算:

图片

 

案例 3     夸克 App 上搜索热点话题,会出现与事件相关“大事项”,以时间倒序的方式还原事件始末,为群众们吃瓜提供了便利。下图是我在 2021 年 12 月 20 日那天搜索王力宏事件时看到的信息内容:

图片

 

案例 4     在微信中搜索文章时,如果有虚假谣言类的文章,微信不会让文章不可见,而是会郑重其事地做官方辟谣,帮助你矫正观念,粉碎谣言:

图片

 

三、替你做完该做的

案例 1     在新的网络环境中使用苹果设备连接 Wi-Fi,具备同样 Apple ID 的设备可以进行 Wi-Fi 的密码共享,不需要你再重新输入密码:

图片

 

案例 2     钉钉和阿里的出差系统打通,当你提交了出差申请,到了出差的那一天,钉钉上状态会自动切换成 「✈️出差中」,方便其他同事了解你的工作状态:

图片

案例 3     如果你晚上临睡前将苹果手机连上充电器充电,iOS 手机系统的「计划充电」功能会根据你的使用习惯,在电量达到 80% 时就会停止充电。然后在你第二天早上使用前再继续充电直到充满,以此延长电池的使用寿命。这意味着 iOS 系统要准确判断出你每天开始使用手机的时间。你也不用因为担心整夜充电对电池有损害而选择不在晚上充电或是半夜爬起拔掉电源:

图片

 

案例 4     在屏幕很暗的情况下,打开微信或支付宝的支付二维码,屏幕会瞬间亮起,便于商家扫码付款,不需要你手动调亮屏幕,扫码后又会回到之前的屏幕亮度:

图片

 

四、把复杂的事情变简单

案例 1     用飞猪 App 查找酒店时,可以在地图上用手指画圈,不需要输入街道名称就可以满足你自定义范围来找酒店的需求:

图片

 

案例 2     微信的图片搜索的功能,可以通过图片里的文字和内容来检索图片,比如你只需要输入“食物” 二字,就可以看到与食物相关的所有图片。你再也不需要在一堆图片中找到眼花了:

图片

 

案例 3     NN/g 网站移动端的支付流程中,“银行卡可用时间”的输入框使用了特定的格式输入效果,你不需要纠结输入内容的格式问题,可以很轻松地完成填写:

图片

 

案例 4     苹果的 Airdrop 箭头是一种方向性的指示,将你的 iPhone 对准对方的 iPhone,就能很快速地在周边一群设备中找到对方。同时 Airdrop 自己也有记忆,你经常发送的用户和绑有你自己 ID 的设备,都会靠前显示:

图片


作者:元尧

转载请注明:学UI网》案例锦囊|有哪些小交互让你瞬间觉得产品很「智能」?

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


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


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



超全面的设计底层理论,优秀设计背后离不开这些(下)

seo达人


图片

 

一、奇数原则和三分法构图

奇数法则意思是说,在设计作品中奇数元素比偶数元素更有趣。偶数元素在图像中产生了对称,这可能会显得过于正式和不自然。比如,在一行中排列三个或五个卡片会比2个或4个效果更好,作品会更加让用户感到舒服和自然。

图片

 Iskos Design 就是用的奇数原则做的网页设计

三分法构图(也被称之为黄金网格规则),在画面中以水平和竖直方向分成3×3的网格和4个交叉点。这个规则能很好的协助设计师将最重要的元素放在网格的交叉点上,这样可以很容易的设计出满意的构图。

为什么会这样?因为三分法构图创造了类似斐波那契数列(黄金比例)那种不对称的美,产生了更有吸引力的构图。

图片

 

二、视觉引导线

你希望用户关注哪些地方?高级设计师非常擅长引导用户的视觉焦点,这种引导可以通过可见和不可见的引导线来完成。这些线条在构图中也可以打造一种动感,也能为画面增添视觉冲击力。

达到这种效果通常用特定的形状和线条,或者是它们的组合形成难以察觉的引导线来实现。利用透视、颜色、对比度和正负空间同样可以帮助达到这种想要的效果。

图片

从左到右的不易察觉的曲线将用户的视线引导到页面文字上

 

三、大小和比例

大小(scale)是设计中一个元素与另一个元素的相对大小。元素通过大小不同创建视觉层次,其中最大的元素首先会吸引用户的注意力,因此看起来是最重要的。常规的设计策略就是将最重要的元素做成最大的,然后逐级递减。

比例(Proportion)不同于大小,类似但有区别。比例原则是指一个整体设计中各部分的尺寸关系。设计中的元素可以有各种大小,但它们之间的大小差异,整体来看就是比例。

熟练地使用大小和比例是实现设计统一的关键。当一些元素的大小过大或过小,或者比例失调时,设计组合就会失去统一性。这种错误可能发生在排版和其他元素上。例如,标题与子标题和正文相比显得过大。当设计元素失衡时,设计就会“感觉不平衡”。

图片

大小和比例都没做好时(左图),看起来处理的比较细致了,但依然没有做到很好,在大小上正文和标题分不清(右图)。

 

四、强调

强调原则用于使设计的某些元素突出(使用对比、接近、比例、留白等)或不突出,即弱化强调(例如在页面底部有一个几乎看不见的“小字”)。强调是层级之母,因为没有强调就没有层级。

与其他一些设计原则一样,“强调”是用来引导人们关注设计,并强调需要重点关注的第一、第二和第三点。首页面和电商转化页面在99%的情况下都使用这种原则。

图片

使用这个原则,在购物网站上强调了标语和产品,转化效果非常好

 

五、统一性

统一是指设计元素如何很好地结合在一起,形成“视觉凝聚力”。它指的是设计中的连贯性,让人们觉得所有部分都是一起的。每个元素都应该具有清晰的视觉关系,以帮助传达清晰、简洁的信息。整体性好的设计比整体性差的设计更有条理,质量也更高。

运用统一的配色,重复、平衡和对称之类的原则将有助于在设计中形成一种和谐感,也就是一致性。设计中良好的一致性就好比歌曲中一首歌被和谐地唱出来,形成一个完美的整体。

图片

一致的颜色、重复的图案、平衡和对称在蒂芙尼的网站上创造了一种统一的感觉。

 

六、接近原则

格式塔的接近原则让设计师将同类型的相关元素进行分组。把它们分开得更远,元素就显得越不相关,它们之间的关系就会减弱。一般来说,人们会认为远离的元素是不相关的。

不应该让用户在设计中分辨哪些元素是相互关联的,正如美国邮政服务的例子所显示的那样,缺乏对邻近性的关注会导致直接的认知紧张,损害用户体验。

图片

接近原则没做好的案例。由于字段标签离它们下面的字段更近,人们可能会搞混

下面是一个邻近性原则做的好的案例,我们可以看到相关元素是如何通过邻近性关联起来的(分组的元素用紫色表示)。

图片

一个把接近原则用好的网页设计案例

 

七、一致性

一致性原则使数字产品的使用更加可预测,符合用户的期望。设计中的一致性可以培养熟悉度,它可以提高用户体验、可用性和用户使用效率。另一方面,不一致的设计将产生更多的认知负荷/脑力劳动,并导致困惑和挫折。这就相当于在用户的路径上设置障碍。让用户的心流嘎然而止!

做好一致性可以增强“审美凝聚力”。“我们都知道,当我们使用应用时,应用的导航位置如果经常变化,或者像“加入购物车”这样的主按钮在不同屏幕上从红色变成绿色,这是多么令人沮丧。

除了视觉一致性和易用性,品牌一致性在产品设计中也发挥着重要作用。如果没有一致的元素呈现,如排版、配色和图案,高质量的品牌体验将无法传递。

在用户体验方面,一致性意味着在设计中使用相似的UI元素来完成相似的任务,即在整个产品中拥有相似的功能和行为。因为可用性是一种评估用户界面易用性的质量属性,所以一致性对用户体验的可用性有很大的贡献。

图片

一致性是通过使用相同的配色、排版、间距、模式和交互来实现的。

 

八、颜色

颜色在设计中是非常重要,几乎是设计中最具影响力的创意元素。一个深思熟虑的配色可以让一个设计从普通到惊艳,而一个平庸的配色会降低用户的体验,甚至阻碍他们使用产品的能力。

明亮、丰富的颜色比柔和的颜色更引人注目,因此有更大的视觉冲击。柔和的颜色可以提供一个令人愉快的,微妙的配色方案,但适当的对比必须要有,特别是文字,必须保证可读性。

颜色甚至可以用于呈现UI中的结构感并指向可用的交互,但为设计制作一个配色方案并不是一项简单的任务。除了品牌化,还必须非常小心地创造颜色的和谐和耐用性,使得它能在各个场景下都能正常使用。

色彩心理学也不容忽视。色彩承载着意义和情感,可以向人的潜意识传递信息。在品牌方面,人们对颜色做了大量的心理学研究,因为在人们与品牌进行任何互动之前,颜色会让他们产生一种本能的反应。例如,蓝色通常被认为是可靠的、安全的和平静的,想想银行;而红色是刺激的,被认为是增加人们的心率,想想饮料包装。

图片

一个极简主义的暗色主题设计传达了一个特定的品牌气质,并使用了少量的颜色。

 

九、排版

排版在设计中扮演着非常重要的角色,它的重要性再怎么强调都不为过。在构图中,字体样式对人们感知设计的影响比任何其他元素都大,可能除了颜色。

因为我们的大脑以闪电般的速度运转,一个字体会对一个设计产生影响,以至于它可能在不到一眨眼的时间内改变用户的印象。与颜色一样,字体甚至会影响我们的情绪,资深设计师可以通过字体传达情绪和风格。通过选择合适的字体,我们可以传达出稳定、优雅、舒适、可靠、有力等信息。

排版层次结构可以快速建立视觉层次结构,并且通常在其中扮演重要角色。因此,在设计中经常使用不同的字体和字体大小来表示层次结构,例如标题、副标题、正文和引用。

“除了确保文本清晰易读,排版可以帮助你理清信息层次,传达重要内容,并表达你的品牌。” ——苹果的人机界面指南

图片

兰博基尼的网站巧妙地使用了排版风格和比例来赋予其设计力量。

 

十、负空间(又名留白)

Claude Debussy 曾说过,“音乐是音符之间的空间“。同样的观点也适用于设计,元素之间的负空间给予设计强调、平衡和统一。

元素周围适当的负空间将焦点集中在元素本身。它强调了内容,并提供了必要的喘息空间,以确保布局不显得杂乱。没有了呼吸空间,人脑就不太可能扫描兴趣点,更容易感到困惑。

图片

苹果官网提供了一个利用负空间创造强烈焦点的杰出例子。

 

最后

人们已经开始期待所有平台和设备上的优化、无阻碍的用户体验。理解设计原则及其交互方式对所有设计师来说都是至关重要的。使用专业技能设计它们是创造具有视觉吸引力的功能性设计的关键。我们不要忘记,美学的完整性会严重影响用户体验。

基于原则的设计是设计师在感觉有点迷失或用尽创意时可以依赖的黄金标准方法。在没有理解和实现设计原则的情况下,也可能实现可接受的设计。然而,这可能需要大量的尝试和错误才能创造出看起来不错的内容,并创造出最佳的用户体验。

产品的美学质量与它的实用性密不可分,因为我们每天使用的产品影响着我们和我们的幸福。”但只有精心制作的物品才会美丽。— Dieter Rams(迪特尔·拉姆斯)

当我们不关注由设计原则驱动的设计质量时,我们可能会忽视品牌质量及其所代表的一切。当某些东西设计不好时,品牌就会受到伤害,产品也会受到影响。这就是为什么伟大的设计师在他们的工作中极其严谨, 他们知道“你永远不会有第二次机会给人留下良好的第一印象。”

设计的细节成就了设计本身。—— 查尔斯 伊姆斯(Charles Eames)

 

原文:https://uxdesign.cc/design-principles-why-a-design-works-a572c5d2d92d

作者:Miklos Philip

译者:彩云Sky

本文翻译已获得作者的正式授权(授权截图如下)

图片

转载请注明:学UI网》超全面的设计底层理论,优秀设计背后离不开这些(下)

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


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


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




灵魂注入指南-打造富有生命感的产品IP(下)

seo达人


图片

TIPS:

· 全文共计2643字,阅读需5分钟左右

· 文章源自于日常设计工作的沉淀与总结,不排除个人观点的局限性

 

图片

灵魂画手指南-基于人格特质的设计表现

1、人格特征下的设计原则指引

完成人格画像是塑造生命感的第一步,更重要的是如何将这样的人格特质系统性的体现在IP形象中,为此我们有必要将人格中的核心特质转译为设计语言,定义IP在场景、情绪、行为、语言4个方面的设计指引原则。下文我们继续以“犀宝”在工作台的设计应用为例,基于人格特质归纳设计原则。

1.1 “犀宝”的核心人格特质

图片

1.2 场景原则

经过多轮线上线下调研,我们对客服岗位建立了基于职业特征的用户画像:高强度、高疲劳、高负压。面对即时沟通、多会员切换、服务考核等压力,客服往往需要一个高效、专注的工作环境。因此基于人格特质的场景原则首先要保证“不打扰”,除功能性需要,应避免在客服服务过程中过度设计。结合“犀宝”利他主义、强共情等的人格特征,更适合应用在非上班状态的场景中,如:引导教学、页面加载、为空状态、结果反馈等。

图片

1.3 情绪原则

经过对IP形象在工作台中的典型应用案例的编码梳理,我们基于情绪二维模型对“犀宝”的情绪进行了管理统计。情绪象限中所定义的触发条件即为应用原则,高频出现的情绪即为典型情绪。

图片

我们将“犀宝”的典型情绪统计如下:

高兴、冷静、兴奋、放松、慌张、欣喜、疑惑

将“犀宝”的情绪原则进行如下归纳:

① 面对客服或客服的正向行为,建议使用带有正向情感反馈的情绪(如高兴、欣喜、兴奋等);

② 面对客服的负向行为,避免使用带有负向情感反馈的情绪(如紧张、慌张、沮丧、尴尬、疑惑等);

③ 处于工作状态时,建议使用中性的情绪(如冷静、严肃);

④ 面对工作台/系统的状态,不受常态的正负向情绪拘束;

⑤ 任何状态下,避免使用带有攻击性的情绪(如愤怒、厌恶、鄙夷、怨恨等)。

1.4 行为原则

行为原则是在IP人格特质与典型场景的基础上,对IP行为特点的建议与约束。按照以上思路,我们对“犀宝”的行为原则归纳如下:

图片

① 建议使用具有引导/指向性的动作(如举手引导);

② 建议使用具有社交礼仪的动作(如挥手问候/告别、双手呈递);

③ 建议使用呈现工作状态的动作(如佩戴耳机坐在电脑前);

④ 建议使用操作智能设备的动作(如操作虚拟现实工作台、使用可穿戴设备等);

⑤ 建议使用带有正向情感反馈的动作(如拥抱、点赞、鼓掌、加油等);

⑥ 避免使用带有剧烈运动的动作;(如奔跑、跳跃、健身等)

⑦ 避免使用带有情感攻击性的动作(如指责、挥拳等)。

1.5 语言原则

语言原则是在IP人格特质的基础上,对IP声音、话术等特点的建议与约束。按照以上思路,我们对“犀宝”的语言原则归纳如下:

图片

 

2、拟人化的形态设计

在明晰人格特质和设计应用原则后,我们可以进一步思考IP形象在产品中的拟人化表现。在这里,简要的分享一下思路方向。

上文提到,拟人化是把物拟作人,使其具有人的形态、情绪、行为、语言等特征,转译为设计语言即为IP形象的形态结构、面部表情、体态动作、声音文案几个部分。其中IP形象的结构决定了表情和动作的可塑性、丰富性。从上文JOY的形象设计案例中不难看出,人体化结构是IP形象设计的主流手段之一。

对于拟人化的表现个人建议优先从结构人体化着手,结构满足后,具有人格特质的拟人化表现自然水到渠成。在这里,我们可以将结构人体化的方式总结为:

2.1 模仿人类的五官结构

使IP形象具有眉、眼、鼻、嘴、耳的基本结构关系,帮助IP进行生动、丰富的情绪表现。

图片

2.2 模仿人类的形体结构

使IP形象具有头、手(手指)、躯、脚的基本结构关系,帮助IP进行生动、丰富的动作体态表现。

图片

 

3、仿真化的动态设计

在完成人格化、拟人化的设计思考后,相当于为IP绘制了一幅角色设定草图。接下来我们可以结合品牌/产品气质,丰富感官表现,精细化的同时进一步有增强其生命感知。在这里,简要的分享一下思路方向。

上文提到,仿真化是对形象进行物理及生物特点的感官还原,表现在造型、空间、色彩、质感、动态、声音等多方面。然而,不同类型的品牌、产品、应用场景,对仿真化的程度需求有所区别,如:主机/电脑游戏类产品,娱乐属性更强,为了追求沉浸式的感官体验,在各方面的仿真表现都相对较高;品牌/产品宣发场景,展示性更强,仿真表现的权重也相对较高;在APP/网页界面中,更注重功能体验和产研效率,风格以扁平为主,因此对于仿真表现的诉求也相对较低,在这种情况下,对比造型、空间、色彩、质感等元素,IP形象的动态表现最能直观的表现生命感。

那么,如何通过动态表现增强产品IP形象的生命感?

3.1 模仿真实的生物规律

图片

① 呼吸感:

呼吸是生物的生物学功能,有节奏的呼吸起伏是生命体的直观体现;

② 眨眼:

眨眼动作属于生物体基本的生理反射,间隔性的眨眼动作可以增加形象的生命感知;

③ 模仿生物习性:

以“犀宝”为例,犀牛生活在蚊虫多发的非洲,灵活直立的大耳朵不仅可以洞察环境,还可以帮助他们躯干蚊虫,抖动耳朵是一个非常具有生物习性的行为反射。在呼吸、眨眼的基础动态上增加间隔性的抖耳,可以让整体形象更加真实生动。

3.2 模仿真实的动态规律

现实世界中存在着许多物理运动规律,如运动惯性、速度曲线、落地缓冲等等,想要表现出IP形象真实生动的动态特征,需要了解并掌握其中的动态规律。从动画的视角来看,迪士尼黄金12定律具有很好的专业参考性,相对全面的总结了20世纪30年代以来迪士尼动画的制作方式,是动画专业必修的知识点。

图片

小结:如何基于IP人格特质进行设计应用?我们的方式是结合产品特点、IP人格特质拟定设计原则;通过拟人化的结构增强IP形象在动作表情方面的可塑性;最后通过合理的仿真化手段完成设计应用。以下是“犀宝”在产品应用中的部分设计案例。

案例一:培训机器人对客服模拟练习的状态反馈

图片

案例二:客服工作台启动页加载插图

图片

案例三:客服应用页面加载插图

图片

案例四:浏览器升级提示

图片

案例五:静态插图合集

结合设计和心理学理念来看,具有生命感的IP形象能够带来更有力的功能及情感价值。通过对IP生命感的分析,我们认为IP形象的生命感由表及里表现出“仿真化、拟人化、人格化”三个层次。其中人格是决定IP形象如何表现的核心,因此对于形象的设定逻辑建议由里至表的进行思考统筹。从设计力度上看,对于各层次的程度把控与配合,建议根据产品属性、传播媒介、表现形式、技术条件、预期效果、预算成本等具体情况进行评估。

 

引用及参考文献:

[1] 鲁道夫.阿恩海姆. 视觉思维. 四川人民出版社. 2001(3)

[2] 姚浩然.人格化加剧形态设计研究[D].南京:南京林业大学木材科学与技术,2012:12.

[3] 吴龙华.个性心理结构问题的研究[J].人力资源管理,2012(12)


作者:AlibabaDesign

转载请注明:学UI网》灵魂注入指南-打造富有生命感的产品IP(下)

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


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


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



盛夏的元宇宙之旅-玩转电子沙盘

seo达人


图片

经过前期的调研和分析,以及结合相关的业务诉求,确定了我们的项目目标,那就是要做出一款为新房营销赋能的设计工具,同时也总结出好的电子沙盘要同时具有这四个方面的特性:

图片

图片

 

1、效果真实自然

电子沙盘要传达的是真实的地形地貌等信息,使用户在观看时要有身临其境之感,因此在最终效果上要力求最真实自然的视觉体验,为用户呈现最好的效果。

图片

图片

 

2、覆盖类型广泛

在模型的品类方面力求多样化,这样整个场景才会更接近真实的效果,在项目中我们使用模块化的方式,创建了项目资源库,达到了建筑、植被、健身器材、公共设施等全品类覆盖、共产出植物模型17种,建筑模型36种,器材设施类模型22种、UE4引擎材质260多种,为最终效果的实现起到了决定性的作用。

图片

图片

 

3、模型细节精细

除了周边环境要真实自然,小区内每栋楼的建筑细节也非常的丰富,以真实的建筑结构信息来进行模型制作,用户在使用时能够查看到楼盘内每一栋建筑的外观和结构细节。

图片

图片

 

4、生成策略丰富

区别于传统的手动建模方式,我们在实施阶段采用了模块化资源+智能化生成的方式,首先在数据层级对整个项目区域根据功能进行划分,针对每一类区块都进行了相应的生成策略的设计。共产出摆放规则36种,精细到每一处细节都有相应的生成规则。

接下来的部分我们就选取几种比较典型的区域摆放规则看一下。

图片

图片

 

图片

根据当前项目特点,在具体实施阶段我们采用了数据输入和智能化生成的整体策略。

 

1、本案小区楼栋:

楼栋的建模使用了模块化的方式,使用预制的窗户,外墙等模型部件按照规则将不同的组合部件结合在一起生成整体的楼栋。

图片

2、小区入口:

入口处大门的生成,首先需要在初始数据中输入入口的信息,然后根据设计规则使用模型库中预制的模块生成入口大门。

图片

 

3、道路生成:

根据道路结构进行数据的分层拆分,然后再将各部分模型组合起来形成道路,这样就方便了后期添加沿路的树木,以及根据车道信息添加车辆等等。

图片

 

4、配电房,设备用房:

小区内的配电房,设备房等首先划定区域数据,然后选择合适尺寸的模型进行摆放,最后做顶点拉伸处理。

图片

 

5、底商商铺:

底商的生成与设备房等类似,但是也有一些区别,由于每个楼盘的底商区域尺度不同,所以要对模型进行相应的拉伸去适应相应的区域大小,底商部分我们采用了整体拉伸的方式,这样不会破坏模型上的一些结构细节。

图片

 

6、小区广场:

小区广场的效果相对来说比较丰富,模型种类比较多,不适合使用拉伸的方式去生成,这部分采用了对不同功能的设备进行分块的方式,比如儿童游乐设施,成人健身器材等,通过不同的组合可以生成多种方案。

图片

 

7、地形生成:

地形的创建要依据真实的地理信息数据来制作,以保证电子沙盘真实的参考性,这部分我们使用了当下比较先进的智能化解决方案,根据数据将地面,道路,水系,植被,建筑等分层创建,最终在虚幻引擎中进行整合渲染。

 

图片

这部分看下电子沙盘现阶段的最终效果:(点击图片前往原文观看视频)

 

图片

经过大家的努力,最终我们的电子沙盘获得了各方的认可,在制作过程中也收获了不少宝贵的经验,总结如下:

重视排期和做好阶段性任务的拆分:由于项目周期比较长,所以整个项目必须有统一的阶段性规划和排期,按照统筹好的计划来一步一步实现目标。

项目参与人员之间的沟通很重要:每个成员之间对于进度和过程中遇到的问题必须及时同步和提出,尤其对于跨部门合作的项目来说,这一点尤为重要。

项目的完成离不开大家的共同努力,在此对所有人表示感谢。


作者:环铁艺术家

转载请注明:学U网》盛夏的元宇宙之旅-玩转电子沙盘

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


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


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



Apple music用户体验分析,原来苹果也没有把这些做好

seo达人


图片

Illustration by Jan Marin

 

Apple Music诞生的原因?

我是果粉,在过去的10年里一直在用苹果产品,很欣赏乔布斯早在那时就倡导的优秀设计理念。在那些年里,我迷上了苹果的生态系统,因为对我来说,“它太好用了”。

其中一个便是iTunes。我会花大量的时间仔细整理我的音乐库,并将它同步到我的iPod上。

在中间,我发现了Spotify,几年后,我曾经喜欢的iTunes乐库已经积灰了。

在大量的猜测和谣言之后,苹果最终加入了流媒体竞争——完全放弃iTunes,并推出他们的新音乐产品,带有付费订阅流媒体服务的可选功能,名为“Apple Music”。

图片

Source: Apple

 

在用了Spotify多年后,我决定给苹果一个机会,重新尝试用苹果的音乐产品,到现在用了苹果音乐大概一年。

不多废话了,以下是我作为一个产品设计师和一个想听音乐的普通用户整理的一些想法,分析下Apple music存在哪些体验问题。

 

一、搜索

音乐APP的一个关键功能就是搜索,在APP中它的使用频率很容易排到前三。那么,Apple music的搜索功能我觉得做的还不够好。

假设我们想要搜索一个知名的摇滚乐队Weezer,他们是一个很酷的乐队。

图片

我们正确输入了Weezer,自动提示似乎已经出现了。但是等等——这是自动提示吗?

让我们试着输入“Wezer”,假装我们拼错了乐队的名字,以再次确认这确实是一个自动提示,帮助我们确认它与苹果库中的Weezer匹配。

图片

看到这个结果,我猜这应该不是一个很好的自动提示。为了确定是否真的做了自动提示功能,我们换一个关键词,这次选另一个非常受欢迎的摇滚乐队-Queen。

图片

这次好像终于是有自动提示了,但为什么Queen能快速出关联结果而Weezer没有?

图片

好吧,让我们继续寻找线索。点击那个下拉列表,看看它将带我们去哪里。

图片

结果出现了一个全新的“结果页面”。如果能够完全跳过这一页就好了(就像我们搜索Queen的时候),因为我真正想做的是直接进入Weezer的音乐。

此时想想我们下一步要做什么。我不记得我最后去了哪里,但我知道我想回到最初的位置。我们该怎么做呢?可能像我们在浏览器一样有一个后退按钮,对吧?但没有找到。

事实证明,没有后退按钮。至少,它没有通用的后退按钮来撤消你所做的任何导航操作。你能猜到为什么吗?

 

二、导航

我不知道你怎么想,但我发现Apple Music的导航是它最令人困惑的方面之一。优秀应用不会让你思考你在哪里,每一个页面都会是清晰的且可以很容易撤消和回到你之前的地方。

苹果iOS的人机界面指南为应用提供了三种类型的导航,苹果似乎也在macOS中使用了这些概念,苹果音乐就使用了平行导航。

(彩云注:这里我跟大家解释下iOS的三种类型导航模式

层级导航(Hierarchical navigation)。这个导航模式只能在每个屏幕做一个选择到达一个目的地。为了到达另外的目的地,你必须重新开始你的步骤或者从起点重新开始,做出不同的选择。设置和邮箱就使用这种导航样式。

平行导航(Flat navigation)。这个导航模式允许在多个内容目录之间转换。Music和AppStore使用这种导航样式。

内容驱动或者体验驱动导航(Content-driven or experience-driven navigation)。这个导航模式在内容间自由移动,或者依据内容本身定义导航。游戏,图书和其他沉浸式app基本使用这种导航方式。)

图片

Apple music有一个侧边栏,但我觉得这样意义不大。平行导航在移动端体验中非常好用,因为屏幕面积很小。如果你经常使用导航栏,你可以知道你在哪个标签页上,还可以独立于其他选项卡更深入地探索一个选项卡。

图片

这是一个自iPhone发布以来一直保持的惯例,人们不会轻易混淆自己在哪里。那么这在桌面上是如何工作的呢?

图片

简而言之,这也意味着侧边栏中的每一项都有自己独立的导航。现在让我们看看Spotify是如何处理桌面导航的。

图片

注意到了吗?Spotify似乎结合了侧边栏的优点,无论你点击应用的哪个位置,它都允许你轻松地回溯你的步骤。

为什么在我看来这比苹果的设计更好?

它可以减少认知负荷。人们没有时间去记住他们上次在应用中的位置。人们习惯于使用他们的浏览器的后退键。Spotify利用了这一点,使新用户的行为符合心理预期。

它还降低了用户焦虑感,允许用户自由探索,而不用担心搞砸或无法解决问题。

 

三、.系统反馈与探索

点击是任何应用的一个重要部分,因为你需要点击来操作。但Apple music的点击体验有点糟糕。

就拿这个正在播放的状态来说吧。

图片

自从iTunes诞生以来,这在很大程度上保持着相同的功能一致性,一种查看当前正在播放的歌曲的方式。

当你听着Weezer的一首新歌,然后想,“嗯,这支乐队太棒了,让我看看他们其他的目录!”让我们从这里点击Weezer !

图片

当我们点击了标题和专辑,但毫无效果。你能猜到这里具体要怎么操作才能达到我们想要的效果吗?

图片

你猜不到的是居然要点击“更多”菜单,浏览列表,然后在列表底部看到“在Apple music中显示”。

但在应用的其他地方呢?你可以点击歌曲、专辑或艺术家吗?好像也不行。

图片

在这一点上,你可能会想,我为什么要在这个问题上做文章?因为我认为音乐应用的全部意义,尤其是在一个巨大的流媒体库中寻找新音乐的意义:是点击、探索,并轻松地找到歌曲、专辑和艺术家。

我认为用户不应该因为不遵守应用希望使用它的方式而受到阻碍。

(彩云注:这里作者想要表达的问题是交互上不应该让用户去遵循产品的规则,而应该尽可能的满足用户的心智模型,用户在这里的需求很清晰,打通这里的流程问题很重要)。

 

四、响应时间

一款好的应用不会让你等待。我们知道加载时间会极大地影响网页的跳出率,我不认为我们必须区别对待本地应用。

这让我想到了使用Apple Music时最大的痛苦之一:

图片

在页面之间等待,等待。想知道下一个糟糕的行为会是什么?失去当前的状态提示。因为延迟,无响应的问题,不知道当我点击“播放”时,我的歌曲是否会真正播放。

 

总结

我相信好的设计应该是令人向往的。我想喜欢Apple music,更重要的是,我相信苹果仍然有很强的设计原则。但我这次在apple music中没有让我享受到该有的好体验。这是一个遗憾,因为作为一项服务,Apple music还是有很多优点。

图片

  • 从策划的角度来看,我发现苹果选择的曲目质量很高。从人工挑选的歌曲(比如上面显示的播放列表)到算法根据我的听歌习惯为我提供优秀的音乐。这感觉非常像苹果,我一直惊讶于它的选择是多么的好。
  • 从音频的角度来看,我实际上更喜欢音乐的质量,这一点要Spotify要好。

这些优点反而让我更加失望,因为这个产品本身不容易使用。

说到底,真正的问题在于苹果没有明确定义他们的产品是什么。如果说音乐应用是iTunes的继承者,那么不幸的是,它没有达到目标,因为他们试图将流媒体服务(Apple music)嵌入到传统模式中。如果Apple Music是他们的重点,他们并没有让它作为一个独立的服务脱颖而出。

有一件事是肯定的,桌面版的Apple Music如果要达到一个像样的可用性水平,还有很多工作要做。

 

你觉得呢? 你在体验苹果产品时,还遇到哪些痛点?期待你在留言区探讨~

 

原文:https://uxdesign.cc/apple-musics-ux-problem-e8f5fac756de

作者:Jake Dragash

译者:彩云Sky

本文翻译已获得作者的正式授权(授权截图如下)

图片

 

作者:彩云Sky

转载请注明:学UI网》Apple music用户体验分析,原来苹果也没有把这些做好

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


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


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



如何分析竞品设计语言?

seo达人

图片

做设计语言分析最重要的就是选对分析对象,不管是哪个行业,选对了方向基本上不会出什么大问题。

比如,要做一个音乐产品设计改版,想看看一些品牌基因塑造比较好的APP是怎么做的,这时候可以选择国内外排名靠前一些音乐去研究分析。

如何选择正确的分析对象,一般情况下选择直接和间接竞品,如果你不知道有哪些优秀的产品,可以在这个网站看看。

图片

七麦数据

比如,搜索一个音乐后,就可以看到音乐在国内的排名,当然还可以切换国家,看看其他国家的APP排名。

竞品的对象一般选择3~5个靠前就差不多了,因为选择越多,后期分析起来越麻烦。

 

图片

前面我们已经确定了几个分析对象,那么到这里我们就开始分析所选产品的设计语言。

一般情况下,设计语言的分析维度有色彩、图形、布局、字阶、卡片,当然你还可以增加阴影、圆角、动效等细节。

图片

 

1、色彩分析

色彩分析我们一般看品牌主色调、辅助色、拓展色、安全色、以及文字颜色,目的是了解他们的色彩运用规则和制定策略。

比如常规色、按压色、不可点击色彩是如何塑造的。

图片

看个列子,比如白色和灰色的应用场景。

图片

 

2、图形分析

图形一般品牌图形的应用,看看这些产品如何打造品牌DNA,如何强化用户印象,图形的维度一般在图标上体现居多。

图片

比如再来看看Line的

图片

 

3、布局

布局一般我们看产品内容间距,内容网格是如何打造的,间距节奏如何定义。目前主流的网格定义大部分基于2/4/8三个原子数值来定义。

图片

图片

内容间距网格

图片

页面布局网格

 

4、字阶

字体节奏这个比较简单,一般就是看看他们一级标题、二级标题、三级文本、辅助文字等等的字体大小如何定义,找到一个基本的参考方向。

比如像LINE设计语言,他们标题提供了4种尺寸大小,正文也是提供了4种。

图片

标题提供4种尺寸大小,应用在不同场景

图片

正文提供4种尺寸大小,应用在不同场景

 

5、卡片

卡片一般情况下我们要分析圆角节奏,卡片的比例应用情况。

图片

一般情况下黄金比例,特殊场景除外,比如Banner。

图片

需要了解卡片的圆角节奏是如何定义的。

 

图片

当前面我们分析完所有内容后,并了解这些产品设计语言的应用情况以及制定策略,在最后这一步我们就需要将这些分析内容进行梳理成可参考的文档,向团队成员分享你发现的一些核心策略和竞品视觉语言做得比较好的地方,提供给团队参考。

这些分析只是参考,站在巨人肩膀学习,这样也是避免在成长过程中走错方向。最重要还需要接下来的执行,根据分析结论重新塑造自家产品的设计语言。

 

写在最后,

由于篇幅有限,没有将所有案例全部展开,但给大家提供了一个清晰的流程和思路,可以下去尝试使用这种方法做一次分析,就掌握了,有什么不清楚的地方,欢迎留言和我讨论。


作者:刘涛导师

转载请注明:学UI网》如何分析竞品设计语言?

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


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


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




间距篇 | 设计师必看的保姆级间距控制规范!

seo达人


优秀的界面设计应该体现在每个维度,间距在设计中也是不可缺少的部分,尤其是界面元素较为密集时,需要对间距的使用掌握得当,合理的利用间距留白,能将信息更高效的传达给用户。

文字、图形、色彩是UI设计的三大组成元素,间距即是这几种元素结合的媒介,如何通过间距给用户带来更舒适的视觉体验是设计过程中极其重要的一环,那么你所理解的间距到底是什么、有什么作用、如何合理有效的使用?笔者进行了整理总结,通过本篇文章揭晓。

 

一、间距在UI中的重要性

1、什么是间距?

间距指的是界面各元素彼此相隔的距离,可以是文字自身的行距、与图片、与组件、与模块的间距,或是界面两侧的安全距离(如网页的宽度为1920px,内容区为1400px,那么安全距离为两侧各260px)等。

作为UI设计师,在设计界面的每一个元素都需要考虑到上、下、左、右以及毗邻元素的属性来合理调整间距,利用各间距之间的规律来组织界面内容,确保信息的节奏性,给用户轻松、预约的浏览体验。

图片

 

2、间距的实际作用

间距可以让界面信息更有节奏,提升内容的可读性,还能通过不同的疏密程度来阐述各元素之间的关系,以吸引用户的注意力,所以在控制界面间距时,一定要有“较真”的心态,任何一次的改动与调整都要先考虑清楚为什么,能给产品和用户带来什么。要做好间距,不能仅停留在视觉层面,需要进行多方面思考。

设计师层面:规范的定义间距,不必每个元素都去考虑间距的大小,有效减少决策和思考时间,提升效率。

开发层面:开发可以按照基础间距去定义变量,长期如此,虽然不能炼成像素眼,但仅凭视觉也能看出间距的倍数。例如基础间距以8px增量,在使用8px、16px、24px、32px、48px…等,开发直接使用基础间距x1、x2、x3…,以此类推,在开发眼中,肉眼定然看不出1px的差别,但却能区分出8px的差距,不必每次都去测量,还能减少误差,高度还原设计效果。

用户层面:有节奏且具备一致性美感的界面效果,信息的有效传递变的轻松,用户体验能得到很大程度的提升。

图片

3.间距的统一性

设计规范的目的是提升设计师的工作效率、团队之间的高效沟通、让设计风格始终保持高度统一。同理,间距也是设计规范中非常重要的一环,它作为规范中的最小单元,如果没有遵循统一,将会直接影响界面整体的版式和布局,信息的疏密程度严重影响用户的浏览。不仅是设计师,开发每次面对同样的模块都需要定义不同的间距也是崩溃的,毫无规律可循。

统一的间距能让界面的视觉效果更有节奏,设计师在设计某些相似的模块时可直接复用组件,即便是多人共同完成同个项目或更换成员,也不会因间距不统一的问题造成整个APP的风格混乱。

对开发来说,如果清楚间距的使用规律,即便有小的误差,也能自行更正,例如使用8px增量,8、16、24…按倍数规律以此类推,若出现9的间距,开发会更正为8、15则会更正为16,自行多退少补,虽然设计师需要细心、尽量不出现这种小的出入,但任何事情都没法做到绝对,统一的间距能让减少设计的出入以及与设计师之间的频繁沟通,能进一步提高开发效率。

图片

▲ 从上图可以看出,间距不规范、信息就像一锅粥,而规范的使用间距就能将信息自动分组。

 

二、定义文字间距

文字是UI设计中非常重要的信息元素,虽然大多数设计师对文字的属性比较了解,但在真实设计中总会因其他信息的干扰不能合理运用,与上线后的视觉效果预期相差甚大。文字的各种间距处理看似简单,但实际上有很多因素要考虑,例如字间距、行高、段落等,下面带大家一起了解。

 

1、字符间距

字符间距一般都是设计工具的默认数值,无需调整。当碰到多行文字需要避开头尾的标点符号时,使用工具中的避头尾功能即可自动调整字间距,如无此功能,则需手动调整,这里并没有所谓的技巧与方法,头尾避开标点符号即可。

另外,在设计卡片、瓷片区的标题时,有时需要通过调整字符间距来提升界面的舒适度,间距数值自行定义,但相同层级的内容标题字间距一定要保持一致。

图片

 

2、文字行高

行高是指上边框+下边框+字号的高度之和,这里主要针对多行文本。在平面设计中,行高没有一定的标准,如无特别需要,使用系统默认的行高即可。

UI设计中,文字会有5~6个不同的等级,为便于用户阅读,一般会设定行高标准,尤其是新闻资讯类型的应用本身就以文字内容为主,不同的行高对文字的易读性会产生较大的影响。

文字行高一般会设定为字号的1.2~1.5倍,具体值跟字号有很大关系,文字越小,行高就越大。例如,我们可以设定字号32px为中间值(非绝对),小于或等于32的字体、行高为字号的1.5倍,大于32的为1.2倍。另外,也可以直接将所有行高固定在字号的1.5倍,不难发现,字体越大其折行的概率就越低,试想一下,如果将48px的文字折成几行,界面还能剩下多少空间?

图片

 

3、文字段落

文本段落间距的重要性在移动UI界面中并不明显,更多体现在网页设计中。需要着重纠正一点的是,部分设计师在设置段间距时习惯性的多敲一次回车键,这种方式并不可取,会造成间距过大、内容脱节。

如有需要,一定要手动设置段间距,这里没有固定的数值和规律,视觉舒适即可。笔者习惯将段间距设定为字号的0.5倍,例如字号为30、段间距为15,字号为40、段间距为20,仅供参考。

图片

 

三、定义元素/组件间距

定义间距其实并没有一个绝对的标准,主要取决于最小单位,例如4px、5px、6px、8px都是可以的,到底使用哪个数值还得根据产品自身定位及内容组织形式,前提是所有间距都要遵循最小单位并基于倍数形成规律。

在设计界面时,需要利用间距来建立信息层级、提升浏览体验以及表达各元素之间的关系,这就是为什么当我们打开新闻资讯、电商类应用会发现信息非常紧凑,而打开工具、社交类应用时感觉信息比较宽松。间距的基数越小、页面就越细碎;基数越大、页面的留白就越多,使用不同的基数,呈现出来的视觉效果也形态各异。

笔者在工作中通常以8px作为基数,以此衍生出8、16、24、32、48、64这6个间距数值,完全能够满足绝大多数的使用场景。当然,针对信息较少的页面也会使用到120、160、200…其他间距数值,例如缺省页、登录页面等。不难看出,上述以8px为基数定义间距数值时,没有40、56这两个数值,难道他们不是8的倍数吗?我们以8和16做对比,后者是前者的2倍,其间距的变化尤为明显;但如果用56和64做对比,后者是前者的1.14倍,其间距的差别微乎其微。敲重点,设计师在定义间距时,需要遵循倍数规则,但同时也要为考虑界面美观及用户的浏览体验而跳出呆板的规则,当间距数值越大时,根据基数所跳跃的倍数就越大,其实设定字号也是相同的逻辑(后期详解)。

图片

 

四、定义模块间距

从信息层级角度来看,等级权重越高、间距就越大,在现实世界中也是如此,一个物体周围的空间越大,就越容易吸引人们的注意力。

模块间距分为块内间距(同一模块中不同元素或信息组之间的距离)和块外间距(同一个页面中不同模块的之间的距离),为了更好的区分信息层级,块外间距一定会大于块内间距,也能保持块内信息的亲密性。

如下图所示,将装修序列步骤、官方攻略、常用服务等看作不同的信息模块,每个模块内元素的间距都会比各模块之间的间距小很多。

图片

 

五、间距的使用技巧及原则

1、接近性原则

需要通过各元素的间距来体现出信息的关联性,格式塔原理中的“接近性”原则告诉我们,相互靠近的物体被认为比相互距离较远的物体更有关联性,因此,相关联的元素之间靠的越近,用户越能感知到信息的关联,同时更能了解整个界面中各模块信息的逻辑关系。

图片

 

2、利用留白强调

很多时候,想让一个元素变的突出,可以用加大字号、修改色值或后加粗等方式进行强调,但这并不是突出信息的唯一方式,当所有元素都变的突出,那就等于什么都不突出了。如果想让界面中的元素不同程度的突出,留白也是一种强调信息的方式,它能引导用户将注意力集中在特定的内容上。

 

3、使用栅格系统

善用栅格系统(上述有详细说明),通过最小间距值进行递增,让整个界面看起来更协调。栅格系统可以让设计师在元素的亲疏关系上更快作出决策,后续不管是迭代还是更换设计成员,都能保持统计的间距规范。

图片

 

4、文字行高规则

这个问题在很多团队中都是硬伤,甚至在设计验收时还被直接忽略。在主流UI设计工具中,添加文本元素时,都会有默认行高,在前面的内容中有讲过多行文本的行高为字号的1.2~1.5倍,那么单行文字的行高到底是需要手动设置还是遵循默认,笔者认为都是可以的,但一定要与开发保持一致。

行高决定着文字边缘与定界框的间距,而开发只能看到定界框与其他元素的间距。

图片

1)默认行高

默认行高值会随着字号的变化基于一定的倍数自动增减,需要将此规律或倍数告知开发,开发将此规则植入代码方能最大化还原设计效果。另外在设计界面时,尤其是多组文字元素的上下间距,需要通过计算(文字边缘到定界框的间距+文字元素间距=实际间距)或手动测量才能达到精准状态,下图为例:

图片

2)手动设置行高

手动设置即字号是多少、就将行高设置为多少,确保文字边缘紧贴定界框,在设计过程中调整间距时,无需计算,根据设计工具的智能提示调整即可。

图片

 

5、间距值数量设定

在同一APP应用中,根据最小基数定义的间隔值数量不易过多,一般在6个左右就能满足绝大多数的设计场景。例如以8px的基数为8、16、24、32、48、64等,以5px的基数为5、10、15、25、40、60等。数量过多会导致界面不同元素、模块的间距差异化不够明显,数量太少无法满足多元素、模块使用场景,也会导致间距跨度较大。

图片

 

6、明显相邻间距值

设定间距值需遵循一个原则“数值越大、递增的倍数就越大”。当相邻间距值的差异化较小时,用户很难感知到界面中信息之间的逻辑关系,我们需要根据栅格系统中间距值的增大、设置更大的区间值,让相邻间距值之间的视觉差异更加明显。

图片

 

7、跳出间距的束缚

当界面中的信息较为密集、间距不足以满足信息的突出程度时,需跳出纯粹的间距规范束缚,换种方式或许更好。例如:给元素添加背景让其聚焦、使用分隔线/色块间隔、调整元素大小等,需知「此消彼长」的道理。

图片

 

六、结语

如果在处理界面信息层级时,改来改去还是觉得很乱,不防从间距角度出发,或许会有不一样的收获。虽然在刚开始的时候,规范间距带来的效果甚微,但随着团队规模不断扩大、界面数量越来越多、内容越来越复杂时就会发现,所有内容统一间距规范,不管是构建一致性界面视觉效果、还是对开发和设计师来说,既能提升用户体验、还能提高团队的工作效率。

间距是否规范使用,决定着界面是否规整、信息传达是否清晰,即便如此,间距也只是解决信息层级方式的其中之一,切不可让其限制设计师的发挥和思考空间。制定设计规范有助于项目的高效运转,间距也好、色彩也罢,设计师依然需要从实际用户场景出发,通过不断的思考和经验总结,打磨出更合理、更符合项目需求的设计规范。

作者:大漠飞鹰CYSJ

转载请注明:学UI网》间距篇 | 设计师必看的保姆级间距控制规范!

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


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


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



导航设计3步曲:高手帮你快速掌握导航设计!

博博

1. 导航是什么?


① 导航的起源与本质

导航,英文是 Navigation,是 Navigate 的名词形式,源于 1530 年代,由词根 Navis 船+agere 驾驶组合而成。指的是借助某些科学仪器,找到从一个岛屿到另一个岛屿的路径。

UI设计 交互设计 导航设计

图1 导航的起源

诞生于中世纪大航海的导航,从诞生之初就跟起点、目标和路径密切相关。随着导航的发展,导航领域从海洋扩展到陆地,航空、太空,以及互联网。

UI设计 交互设计 导航设计

图2 导航领域的类型

今天我们重点要聊的就是移动互联网产品的导航设计,虽然脱离了物理空间,但导航的本质始终是不变的。

UI设计 交互设计 导航设计

图3 导航的本质

导航本质:告诉用户“我”在哪里(起点)?“我”能去到哪里(目标)?“我”该怎么去(路径)?

基于此,导航设计一定要能清晰的体现用户当前所在的位置(一般用选中态表示),并通过其他未选中的导航,来告知用户可以去的目标,再通过最简单的点击或滑动等操作让用户去往目的地。

UI设计 交互设计 导航设计

图4 互联网产品导航示意

2. 移动端导航形式有什么?


我归纳了移动端常见的 10 种导航形式,大家可以根据其优缺点和适用场景按需选用。

UI设计 交互设计 导航设计

UI设计 交互设计 导航设计

图5 移动端常见的10种导航形式

① 底 Tab 导航

底 Tab 导航在 iOS 中叫标签导航,在 Android 中称之为底部导航,我将其称为底 Tab 导航,它是 iOS 中最倡导和常见的导航形式。(现在也全面征服了 Android 系统)

UI设计 交互设计 导航设计

图6 底Tab导航

优点:清晰直观的展示了产品的核心功能,点击切换方便快捷。

缺点:只能容纳 3-5 个,数量有限。

使用场景:产品包含 3~5 个需要高频切换使用的非同类型模块时可用。

② 舵式导航

舵式导航可以看做是底 Tab 导航的一个变异,区别就在于把中间的导航像船舵一样凸显,以此来强调中间的导航功能(一般用于承载发布类功能)。

UI设计 交互设计 导航设计

图7 舵式导航

优点:舵式导航特殊的造型和颜色可以很好的吸引用户注意力,促进功能转化。

缺点:为了让舵居中,导航个数只能为 3 个或 5 个,数量有限制。聚合多个发布类功能时,需要二次选择,操作不够便捷。

使用场景:对于强调 UGC 类的产品或者特别高频的操作可以使用。

③ 顶 Tab 导航

顶 Tab 导航最开始是 Android 推出用以抗衡 iOS 底 Tab 导航的,结果大家已经有感知了(抗衡彻底失败)。但顶 Tab 导航并没有因此而消失,而是重新找到了自己作为次级导航的生态位。

UI设计 交互设计 导航设计

图8 顶Tab导航

优点:可以承载 2~N 个导航,可拓展性强,手势切换比较便捷。

缺点:手势切换有学习成本,顶部点击不方便,看不见的导航内容不容易被发现和使用。

使用场景:作为主导航几乎已被底 Tab 取代,作为次级导航非常常见,特别是有多个并列层级的内容需要展示时。

④ 抽屉导航

如果产品只有一类核心展示的内容,可以使用抽屉导航而不用底 Tab 导航,以最大限度的利用屏幕空间。

UI设计 交互设计 导航设计

图9 抽屉导航

优点:可拓展性强,可以收纳多个不常用的功能,释放屏幕展示空间。

缺点:被隐藏的功能不容易被发现和使用。

使用场景:某些核心功能比较单一的产品,或者跟底 Tab 导航组合使用,收纳不常用的功能。

⑤ 菜单式导航

跟抽屉式导航类似,把一组操作收纳到一个地方,用户可以点击快速选择。

UI设计 交互设计 导航设计

图10 菜单式导航

优点:可拓展性强,可以收纳多个功能,释放屏幕展示空间。

缺点:被隐藏的功能不容易被发现和使用。

使用场景:当页面功能较多,无法全部直接展示时,可以使用下拉菜单统一收纳。

⑥ 宫格式导航

早期比较流行的主导航,现在是比较常用的局部导航。

UI设计 交互设计 导航设计

图11 宫格式导航

优点:信息层级扁平,个数较少时,核心功能一目了然,用户选择成本低。

缺点:个数较多时视觉认知成本、查找成本都很高,进入功能后切换成本也高。

使用场景:平台类产品的核心功能展示,或者普通产品的重要功能/运营入口。

⑦ 列表式导航

对于主要以文本为载体的产品,采用列表式导航非常常见,比如短信、邮件、记事本、设置等。

UI设计 交互设计 导航设计

图12 列表式导航

优点:有足够的文本/图标显示空间,可以显示标题和辅助文字,传递的信息内容相对丰富、直观,而且可以显示多条内容。

缺点:整体页面信息会比较密集,页面布局相对呆板,条目多时查找会比较困难。

使用场景:适用于展示多条以文本为主体的内容。

⑧ 瀑布流导航

对于主要以图片/视频为载体的产品,采用瀑布流导航的非常常见,比如花瓣、点评、淘宝、bilibili 等。

UI设计 交互设计 导航设计

图13 瀑布流导航

优点:能够凸显图片的吸引力,让用户聚焦在图片上,促进内容的转化。同时可以承载无限多的内容,自动加载不翻页,增强用户浏览的沉浸感和效率。

缺点:屏幕空间占用较大,依赖于信息推荐的精准度。

使用场景:适用于展示多条以图片为主体的内容。

⑨ 轮播式导航

当产品/模块提供的信息足够简单扁平,一屏即可显示全部核心信息时,可以采用整屏轮播或区域轮播的导航形式。

UI设计 交互设计 导航设计

图14 轮播式导航

优点:操作简单,信息呈现直观。

缺点:未轮播的信息曝光率和转化率都比较低。

使用场景:简单的小工具类产品可以整屏显示核心信息。运营广告位可以区域轮播展示。

⑩ 沉浸式导航

在活动类、游戏类产品中,常常采用沉浸式导航,增强用户沉浸感。

UI设计 交互设计 导航设计

图15 沉浸式导航

优点:导航与页面融为一体,视觉感受沉浸,页面更有吸引力。

缺点:用户可能注意不到某些是内容的元素,导致该元素的转化率较低。

适用场景:活动类、游戏类的产品中。

3. 导航设计三步曲


① 确认信息结构

导航设计是以信息结构为基础的,所以在进行导航设计之前,我们需要将范围层提供的所有信息进行分析,删减、分类、整理形成特定的信息结构。

UI设计 交互设计 导航设计

UI设计 交互设计 导航设计

图16 从信息到信息结构

以微信的部分信息为例,我们将信息进行分类、整理、命名形成了上述的组织系统,让信息与信息之间的逻辑关系一目了然。

这里大家可以参考行业竞品的信息架构,结合自己对业务关系的理解,辅助以卡片分类的方式,整理出最适合的信息结构。

PS:为了提升导航的易用性,建议的导航广度最好不超过 5,深度不超过 3。这样符合米勒定律,用户的选择压力较小,也不容易迷失在较深的路径中。(当然这只是一个建议,优先要保证的还是信息结构的合理性,不能为了满足上述建议而破坏信息之间本身的逻辑关系,时刻牢记认知成本>操作成本,不能为了减少操作成本而增加认知成本)

② 选择导航形式

根据信息结构中主导航功能的个数,以及主导航功能之间的优先级关系,再结合各导航的适用场景、个数限制、内容丰富度、功能可见性、操作便捷性等,匹配合适的主导航、次级导航和局部导航形式。

UI设计 交互设计 导航设计

图17 导航总结

从现况来看,多数产品都愿意采用底 Tab 的主导航形式,因为可以曝光多个功能,用户点击操作方便,学习成本低,利于其他功能的转化,后续拓展也比较方便(可以配合抽屉式导航、顶 Tab 导航,菜单式导航和局部导航混合使用)

③ 优化导航路径

信息结构梳理了信息节点之间的逻辑关系,但用户在真正使用产品时,有些子节点的功能/信息,其优先级和频率反而更高,为了让用户能够方便快捷的使用这些子功能,还需要结合用户的使用场景,在合适的场景下添加一些节点和路径,以提升用户操作的流畅性和效率。

UI设计 交互设计 导航设计

UI设计 交互设计 导航设计

图18 组织系统和导航系统的关系

还是以微信的导航设计为例,因为添加好友,扫一扫、收付款功能重要性和使用频率,微信特地在首页增加了一个菜单导航,方便用户能更快捷的触达这些功能。

所以导航设计,不仅要正确的反映信息之间的结构关系,选择合适的导航形式,更重要的是根据用户的目标、认知和习惯来组织导航节点,让用户可以很直观的理解“我”在哪,“我”可以去哪?并通过最便捷的操作到达目的地。





作者:悦姐聊设计



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

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



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



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

日历

链接

个人资料

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

存档