首页

10种异常状态设计

资深UI设计者

在做设计的过程中,大部分设计师只专注于主操作流程、主页面、分支流程、小页面和页面的不同状态。却容易忽略产品中容易出现的各种异常状态。

当用户停留任何一个界面,进行任何一个操作都可能发生异常状态。

如果接到每个需求都去制定一次异常状态,这样的后果可能会使得产品的不同模块、不同流程,异常状态都不一致。全局规范性被破坏,同时设计师的效率也降低。

因此全局制定异常状态规范很有必要,后续就不需要再设计,开发直接复用异常状态的规范。省时省力、提率、设计规范、运行更流畅、减少代码重复率、安装包也会更小。

异常状态一共有以下 10 类:

  • 网络异常
  • 消耗大量流量时
  • 空数据
  • 加载失败
  • 操作失败
  • 服务器异常
  • 搜索无结果
  • 无权限
  • 功能建设中
  • 内容被删除

网络异常

当移动设备网络异常时,导致无法上传和下载数据,从而无法正常的使用产品。

网络异常存在两种场景:

  • 网络异常时,用户打开 App,这种情况 App 会出现异常状态提示给用户,这是 App 主动告知行为;
  • 用户点击操作时,由于网络异常,这时候通过交互反馈给用户,这是 App 被动告知行为。

1. App主动行为

当无网络时,用户打开 App,通常有三种方式提醒用户当前网络异常。

tips 提示,通过 tips 提示用户当前网络不可用,tips 使用场景一般为用户打开后,界面停留在首页,且首页以列表形式展示,这样的话, tips 才能合理的融入到界面中,常见使用这种布局方式的有微信、qq等。

使用toast提示用户网络异常,同时提示用户可以去使用非数据影响的操作。例如网易云音乐,当无网络时候,告知用户可以去正常听已下载的音乐。

使用对话框,引导用户进入设置页面,关闭飞行模式或者打开 Wi-Fi,例如美团进入首页后的对话框提示。

2. App被动行为

当前无网络时,用户点击操作,无法正常使用产品,这时候通常有两种处理方式。

一种是当前界面出现 toast 提示。另一种是进入下一级界面,以缺省页的形式提醒用户当前网络异常。

例如手机淘宝,没有网络时,用户点击会进入下一页,出现缺省页提示,告知用户网络异常,同时提供刷新按钮。

美团在无网络时,点击其他 tab bar,出现 toast 提示用户当前网络异常,稍后重试。

3. 小结

  • 个人觉得,当 App 打开进入列表页面时,常见的如 IM,则使用 tips 提示告知用户,非列表的 IM 工具时,可使用 toast 告知用户。
  • 当用户进行界面交互时,用户点击操作,通过 toast 告知用户。

消耗大量流量时

当涉及需要消耗大量流量数据时,且非 Wi-Fi 情况下,这时候需要告知用户。常见的例如看视频,听/下载歌曲、视频通话、下载上传文件等。

例如B站,当使用移动数据看视频,则通过提示语和对应按钮上的流量值告知用户。

网易云音乐在非 Wi-Fi 情况下,下载音乐时,通过对话框,告知用户当前使用数据流量,同时提供可继续下载的功能,也提供通过办理新业务解决数据流量的问题。

空数据

空数据一共分为两种类型,分别为初始状态和清空状态。

1. 初始状态

用户首次使用,没有任何内容数据时,需要用户进行某种操作才能产生内容的界面,这时候需要提示用户需要进行某种操作。

例如淘宝App,当用户没有把商品加入购物车时,进入购物车界面,会给出提示购物车界面为空。给出用户提示,给出相对应的入口按钮,引导用户操作。

如果初始状态,无任何内容直接给出一个空白界面,用户可能会以为该界面出 bug 了。

Gmail 直接用一个插画提示用户收件箱为空。

一般对于初始状态的设计,常规做法是简单的插画配合简洁的文案,必要的时候给出引导用户操作行为的按钮。

现在流行的设计趋势是插画越轻量越简单越好,以免抢夺了文案信息。

2. 清空状态

当用户清空当前的页面内容,产生了空界面,这时候需要有明确的提示告知用户出现当前页面的原因,且告知用户该如何处理。

清空状态是对初始状态的进一步细化。清空状态的界面和初始状态设计很相似,唯一不同的是文案的提示。

有的产品直接把清空状态的界面按照初始状态来设计,这样也是可以的,缺点就是没有告知用户产生空状态原因是初始化还是清空所致。

加载失败

在加载过程中,App 向服务器请求数据,如果是网络原因导致,则使用网络异常的设计规范。

如果非网络异常原因,则可能因为服务器异常导致接口请求不到数据,从而加载失败。

第一次请求失败,有些场景可能重试 2 次,例如微信支付宝,这种情况可使用 toast 告知用户加载失败的原因。

操作失败

任何操作行为的交互界面都伴随着操作失败的概率。

当用户操作失败时,在当前页面给予一个反馈,告知用户操作失败,最好告知用户操作失败的原因,让用户知道接下来如何避免操作失败。

服务器异常

因为服务器异常是小概率事件,但是也会发生。

当服务器异常时,且用户在操作过程中,出现这种情况,一般可设计为对话框提示,明确告知用户,服务器出现问题,让用户稍后重试。

例如下图的华为云备份恢复界面:

搜索无结果

用户在搜索过程中,除了出现正常的匹配结果,还存在无匹配结果的情况。针对搜索无结果的情况,要给予用户操作无结果的提示。

几乎搜索无结果的状态都是在内容区出现对应提示。例如 iOS 相册,通过搜索关键词,当没有匹配照片时,则出现对应的提示,如下图右侧图:

下图淘宝买家版后台,当用户搜索关键词无结果时,出现对应的提示语和插画。

无权限

无权限的场景,通常适用于 b 端产品,对于不同组织架构的企业员工,会存在不同的权限。

例如部分重要的内容,非同一组织架构的员工无权限查看,这种情况,用户点击进入一般给出对应的提示。

当然最好的方案是在 App 上面过滤掉无法查看的内容,但是存在员工间的转发行为,这时候无权限的员工,点击进入,则显示暂无权限查看的提示页面。

功能建设中

一般 App 功能正在开发中,这种情况不会在 App 界面中展示出来,只有完全开发完毕并上线后才会出现在 App 上。

但是也有一些产品的特殊业务,会将一些未开发的功能展示出来,例如微信公众号,长按微信文章,即出现对应的提示。

也有一些新闻频道还没有开发完毕上线,这时候用户点击进入下级界面,则出现对应的提示语/插图提示,如下图所示:

内容被删除

有的时候,文件或者页面内容被删除,但由于文件或者页面内容的上一级页面有缓存,所以当用户点击进入时,会出现文章/文件被删除的情况。

已被删除的异常状态,常见的设计是用户进入新页面出现对应的插画和标题提示。

例如下图微信公众号文章内容被作者删除,读者点击进入,加载后的界面就出现内容被删除的提示。

以上就是常见的 10 种异常状态的简单介绍和说明。在制定异常状态的设计规范时,可以参考本篇文章。

当然也有公司特殊的业务导致存在很特殊的异常状态,针对这种情况,可以适当的增加、删除或者修改,使其更适用于自己公司的项目。

文章来源:优设

如何从0到1构建UI视觉层级?

资深UI设计者

如“黄金分割”之于构图,“视觉层级”之于页面节奏,都是基础且必不可少。本文与你分享如果一步步从原型开始构建APP视觉层级。

工作中,你是否经常听到“视觉层级”这词?就犹如“用户体验”一样让人耳熟能详。抛开装逼因素,这两个词的多次提及,可见其重要程度。


音乐有节奏,好的音乐能通过音阶的高低起伏变化表达音乐情绪。

例如:《Main Title》即使你没看过《冰与火之歌》,光听音乐你是否能感觉到音乐给你营造千军万马恢弘之势。《Playing Love from The Legend of 1900》你是否想到一个宁静夜晚,佳人与你倾诉衷肠,柔情似水。

反之,节奏不好,则无法和听众达成共鸣。


绘画有节奏,张驰有度、大小对比、远近疏密变化,构成了画面的节奏。反之,没有节奏,则画面平淡。


同样的,APP UI也有节奏。页面良好的视觉层级,方便用户在浏览的过程中抓取关键信息,帮助用户快速达到目的。



那么,如何构建?


1.明确页面目的与需求主次

拿到原型,明确页面目的和需求的1、2、3层级,并理解消化。开启设计师的隐形技能:根据一句话或者一个词,在大脑开始构建画面布局。在构思阶段,建议同时浏览同类型UI设计以及交互布局,在找参考的过程中,结合自身APP的页面目的一起构思,并在纸上绘出可行性方案。 


由于,APP是为人服务。那么我们需要知道,人眼浏览习惯模式的科学依据。



2.人眼浏览模式

曾有一数据显示:如果在3S内无法吸引用户,你将流失这个用户。如今我们所在的时代快节奏、碎片化,用户的日常浏览是“扫描”而非“阅读”。所以,了解人眼浏览习惯,变得十分重要。

人眼浏览习惯有:F型;Z型;其他;


F型浏览模式

Z型浏览模式

还有,其他浏览模式,海哥HMI人机交互在他一篇文中《用户是怎么阅读的?尼尔森F模型》提到:


蛋糕模式:眼睛只关注标题和副标题时,水平一层一层;
斑点模式:跳过大块的文本和扫描,寻找特定的东西,比如按钮,数字;
标记模式:轻扫页面时,将眼睛聚焦在一个地方,呈圆形分布。(移动端会常发生);
承诺模式:通篇阅读,用户确实充满动力和兴趣。


在明白人眼视线流程后,我们开始运用视觉手段,吸引用户来看我们想给他看的内容,并按照我们的预想顺序,依次阅读。



3.设计手法


a.对比

对比,让视觉有轻重,用户看起来不累。需要强调的信息放大,没那么重要的东西缩小。如果同一层级的模块,通过颜色或者样式的变化来表达。如:字体大小对比,颜色对比;模块大小对比;图片大小对比等。 


b.字重

字体千千万形状各不相同,然而他们都有着相似之处:字重的大与小。在同一字号大小下,字重大的笔画,以面构成,会比字重小的,更具视觉冲击力。

需要强调的信息,字号变大,字体加粗,这样就能区分主与次,建立更易读的视觉层级。 


c.样式

为了各个模块间的和谐组合和视觉上的凸显与美观,我们需要灵活运用各种样式表达。卡片投影;形状;材质等; 


d.模块化整合与留白

同一类别信息,模块化整合。便于用户浏览操作,视觉上不零散,整体美观。多模块化的组合,注意留白以及页面的节奏轻重。 


以上要点,要根据实际情况灵活巧妙运用。在做的过程中,通过Mirror工具实时查看页面效果,不断改进,加强表达。


总结


宗白华说过:“一切艺术都趋向音乐”。确切说一切“广义的”艺术都趋向于音乐状态。优秀的UI视觉层级表达,就如音乐一样有节奏变化,波浪起伏,是一种视觉享受。无论是平面还是UI,视觉层级,需要像“黄金分割原理”一样,是内化进设计师的身体里一个元素。多多实战练习,不需要死记硬背,就会刻在我们的大脑深处。 

文章来源:站酷

全球都在用的Booking,是如何做设计改版升级的?

资深UI设计者

每一次学习改版案例,不仅仅只是去看在视觉层面的变化,更多的应该是要学习到作者改版背后的思考。为什么要这么改,原因是什么,目的又是什么,怎么做,有哪些限制等等,有很多东西要去思考。所以,带着问题并结合自己实际中所做的项目来看案例,应该会是一个很有收获的过程。

项目背景

Booking.com缤客 是一家荷兰初创公司,并已经发展成为全球最大的旅游电子商务公司之一。
在Booking上,旅客可以选择世界上任何一处的住宿地点,包括公寓,度假酒店,民宿,五星级豪华度假村,树屋甚至冰屋等等。每天,通过平台预订的房间数超过155万。无论是商务旅行还是休闲旅行,人们都可以快速轻松地预订到理想的住处。

竞品分析

自从Booking发布以来,许多竞争对手都采用类似的商业模式疯狂跟进,抢占市场,并且在某些方面比Booking本身做的还好。

在调研的前期阶段,我去搜集了一些竞争对手和类似的平台,分析UI,用户体验,用户地图,信息架构和关键功能。但是我并不会花太多时间过于深入的去分析这些产品,因为我希望将重点放在Booking这个产品本身的诉求上。

使用场景

在之前的调研过程中,我发现了许多不同的使用场景,经过汇总归集,我集中关注以下3个场景:

  • 场景1:用户知道其行程的日期和目的地(默认场景)
  • 场景2:用户明确了日期但对其旅行的目的地不清楚
  • 场景3:用户知道目的地但不确定其旅行日期

典型用户

在进一步的研究中,我明确了4位具有不同需求和不同目标的典型用户,这些数据对于改善不同用户的体验非常有用。

这个分析的目的是通过梳理最佳的用户流程并提升产品体验,来为不同需求的用户提供最好的用户体验。

△ 数据来源:在线研究和用户访谈(30个用户样本)

用户反馈

收集用户评论,从中我收到了很多有价值的反馈,这些评论中没有特别明确指出是可用性或功能性的问题。我将这些反馈分为4类(译者注:对反馈的问题进行提炼整理):

  • 预订被取消
  • App的Bug
  • 投诉的处理效率
  • 反馈的进度

毫无疑问,最相关的是预订被取消的问题。太多用户会注意到不合理的费用或与房间的主人取得联系时遇到困难。

用户访谈

基于30个用户样本,我试图获得进一步的用户反馈,从中注意到以下的几点事实:

  • 与其他平台相比,booking的平均价格通常更高
  • 产品过于突出好评,用户很难发现一些真实的差评
  • 当房屋主人接收到用户的回复时联系用户也很困难

我想引用一段话,来总结这里面遇到的问题,这段话也蛮有意思的,它说的是:

「与其他应用比较来看,套路显得有点多,会让你觉得一切看起来都蛮划算,总是想多卖一些东西给你。」

用户痛点

总结之前的分析,我提出了以下几点观点:

  • 没有一个完美的解决方案能够满足所有用户,用户需要尽可能多的掌握有用信息。
  • 没有的功能没有太多考虑到个性化需求。
  • 可以改进UI并使用户更加集中于他的目标,而不是完全「以推销为中心」
  • 优化用户与房东之间的联系问题

解决方案

从用户痛点出发,尝试找到合适的解决方案,来提升产品体验。

1. 主页

总的来说,我对首页进行了大手术。主页的搜索功能已经完全重新设计,减少过多的干扰信息。

导航:我设计了一个新的导航栏,剥离出「已保存」功能,这样用户就可以快速找到自己所收藏的商品。此外,我也优化了「交易」的模块,后面我会详细的说说这块的改动思路。

其它功能 :至于之前的版本,我保留了搜索和相关推荐的功能,重新设计界面以改善UI的可用性。

2. 社交功能

如今,社交网络在用户的生活中扮演重要的角色,那没理由在booking中做的这么差。我搞了一个新功能,允许用户关联自己的好友并查看他们的选择,包括他们的评价(喜欢/不喜欢)。我已将此功能放置到主页的下方,因为我希望在将其推广到其他模块之前收集更多有关它的数据。

3. 搜索功能

把这个功能分解为多个步骤。在输入第一个词后,即使没有指定日期或其他信息,也能显示相匹配的酒店。此外,我也加入了语音搜索,使搜索更容易。基于之前我对不同用户角色的定义,搜索的结果将根据最后的信息进行推荐:

  • 1名成人 ——背包客 ——酒店
  • 2名成人——度假夫妇——酒店,宾馆或B&B(某种酒店形式)
  • 2名成人+儿童——家庭——民宿公寓或酒店
  • 1名成人+商务选择——商人——酒店

4. 列表页面

列表页针对易用性方面做了整体的优化:

  • 我将筛选功能从3个按钮更改为2个按钮以减少用户的操作步骤——将它放在页面底部,方便使用
  • 我添加了标签功能来更好的区分属性类型
  • 在第一时间向用户展示物业的主要设施特点。注意:根据不同的用户,可以智能突出显示不同人正在寻找的不同信息。
  • 我将报价的方式转换为「单晚」而不是「总价」,以便在不同商品之间进行比较

5. 详情页

我列出许多可以在详情页面中加入的修改。将总价格突出显示,以免有些隐形消费用户可能会被忽略。

增强了一个与评论相关的次要功能,允许用户通过不同标签筛选它们。

6. 交易功能

在优化开始时,我确定了操作场景2—— 「用户还不知道自己的目的地」作为优化方向。为了提供更好的用户体验,我增加了一个新的功能,用户可以在其中找到不同目的地的区间。利用筛选功能,用户可以选择最适合其需求的区间(区间 – 大陆 – 国家等…)

动效原型

最后,我还设计了一个整个项目的动效原型,把之前所有重设计的页面串联起来。

结语

由于时间限制,分析和结果是基于我的个人经验和少量数据,需要进行深入分析和其他测试,以便完善和验证解决方案。

文章来源:优设网

交互控件科普系列! Sheet 的常见样式和设计注意事项总结

资深UI设计者

还在频繁地使用弹窗对用户展示重要提示吗?明知这样有损体验却没有更好的选择吗?那么不妨来试试干扰度更低,却依然可以用于重要提示的 Sheet 控件吧。

什么是Sheets

Sheets 控件并非弹窗,通常会被熟称为「浮层」或「浮窗」。

该控件在 iOS 和 Android 系统规范中都有相关定义,属于多才多艺的控件,可以用于给予信息提示,也可用于展示更多的拓展信息。

从用于提示的角度来看,Sheets 控件和 Dialogs 控件的相同点和不同点在哪里呢?

1. 共同点

模态化

二者都可以设置模态,当模态控件显示时,页面背景会显示深色遮罩,并立即打断用户当前操作。

承载操作和信息

二者都可以承载丰富的操作和信息,支持嵌入列表、选择器等控件及图片、文本信息。

2. 不同点

触发方式不同

Dialog 可以不通过用户操作而自动触发,Sheet 必须通过用户操作才可以触发显示,因此用户对 Sheet 的显示会更有预期。

关闭方式不同

Dialog 的关闭方式较少,通常会要求用户进行选项操作后才可关闭;Sheet 的关闭方式较多,对于用户而言有更丰富的选择权。

因此综上所述,我们可以发现,Sheet 对比 Dialog 的优势在于,它的显示会更符合用户的预期,它的干扰层度也会低于Dialog(因为更易关闭)。

  • Sheets 在 Google Material design 规范中被分为了 Bottom sheest 和 Side sheets 两类;
  • 在 iOS Human Interface Guidelines 中被分为了 Action sheets 和 Activity views 两类。

下面就由我来依次详解其特性和玩法吧。

Bottom sheets 底部浮窗

专属于 Android 的 Sheets 控件。

1. 使用场景

用于补充内容相关的更多信息(非模态)、提供可交互的菜单或对话(模态)或其它关键功能/任务的拓展。

2. 注意事项
  • Bottom sheet 通常用于 Android 竖屏场景,在 Android 横屏场景建议使用 Side sheet。
  • 在 iOS 中不建议使用 Bottom sheet,建议使用原生的 Action sheets 或 Activity views。
3. 样式类型

菜单样式

可嵌套 Menus,展示多个选项内容。

宫格样式

可使用宫格布局,展示多个选项内容。

迷你样式(非模态)

一个非模态底部浮窗可被设置固定展示在页面底部,用户可以随时用它来对其它功能/任务进行快捷操作,如进入购物车、查看所选图片、查看聊天和查看刚才的视频等。

4. 模态/非模态

非模态浮窗:如左下图所示,非模态浮窗与内容保持在同一层级,用户可同时对内容和浮窗进行操作。

模态浮窗:如右下图所示,模态浮窗层级高于内容,背景深色显示遮罩,用户仅能对浮窗进行操作。

5. 显示与消失

显示

浮窗显示时从底部向上滑入,非模态浮窗显示时不会打断用户操作,模态浮窗显示时会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向底部滑出。

模态浮窗在以下情况下会消失:

  • 用户触发浮窗上的对应操作(自定义);
  • 用户点击浮窗外的区域;
  • 用户下拉浮窗达到收起阈值后(自定义);
  • 用户点击 Android 系统返回键。

非模态浮窗在以下情况下会消失:用户选中浮窗上的对应按钮(自定义)。

6. 支持高度延伸

当浮窗底部仍有未显示的内容时,可设置通过滑动或拖动浮窗来使其变为全屏展示,并在顶部显示 Toolbar 来展示关闭/收起操作。

7. 支持深层链接

模态浮窗中可以展示其它应用的深层链接内容或操作,譬如调用 Google 翻译。

8. 范例

抖音的评论功能使用的是模态 Bottom sheet;百度地图的路线切换功能使用的是非模态 Bottom sheet。

Side sheets 侧边浮窗

专属于 Android 的 Sheets 控件。

1. 使用场景

用于补充内容相关的更多信息(非模态)或提供可交互的列表信息(模态)。

2. 注意事项
  • Bottom sheet 通常用于 Android 竖屏场景,在 Android 横屏场景建议使用 Side sheet。
  • 在 iOS 中不建议使用 Bottom sheet,建议使用原生的 Action sheet 或 Activity views。
3. 样式类型

菜单样式:可嵌套 Menus,展示多个选项内容。

宫格样式:可使用宫格布局,展示多个选项内容。

4. 模态/非模态

如左下图所示,非模态浮窗与内容保持在同一层级,用户可同时对内容和浮窗进行操作(在移动端较少使用,通常用于 PC 端)。

如右下图所示,模态浮窗层级高于内容,背景深色显示遮罩,用户仅能对浮窗进行操作。

5. 显示与消失

显示

浮窗显示时从左/右边缘滑入,非模态浮窗显示时不会打断用户操作,模态浮窗显示时会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向左/右边缘滑出。

模态浮窗在以下情况下会消失:

  • 用户触发浮窗上的对应操作(自定义);
  • 用户点击浮窗外的区域;
  • 用户侧拉浮窗达到收起阈值后(自定义);
  • 用户点击 Android 系统返回键。

非模态浮窗在以下情况下会消失:用户选中浮窗上的对应按钮(自定义)。

6. 滑动说明

支持上下滑动,不支持左右滑动。

7. 范例

淘宝的筛选功能使用的是 Side sheet。

Action sheets 操作浮窗

专属于 iOS 的 Sheets 控件。

1. 使用场景

用于呈现一组与当前操作相关的选项,如启动某个任务,或者确认是否开始执行某个可能具有破坏性的操作。

2. 注意事项

在 Android 中不建议使用 Action sheet,建议使用原生的 Bottom sheet 或 Simple dialog。

3. 样式类型

如下所示,支持单个或多个操作的展示,以及说明文案的展示:

4. 显示与消失

显示

浮窗显示时从底部向上滑入,会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向底部滑出。会在以下情况消失:

  • 用户触发浮窗上的对应操作(自定义);
  • 用户点击浮窗外的区域;
  • 用户点击浮窗「取消」按钮。
5. 显示位置

竖屏时显示在页面底部,横屏是居中显示在页面底部。

6. 范例

微信的选择朋友圈发布类型及清除聊天记录的二次确认,都是使用的 Action sheet。

Activity views 活动浮窗

专属于 iOS 的 Sheets 控件。

1. 使用场景

用于呈现一组与当前操作相关的选项表,如复制、收藏或分享。

2. 注意事项

在 Android 中不建议使用 Activity views,建议使用原生的 Bottom sheet。

3. 样式类型

列表样式

宫格样式

混合样式

4. 显示与消失

显示

浮窗显示时从底部向上滑入,会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向底部滑出。会在以下情况消失:

  • 用户触发浮窗上的对应操作(自定义);
  • 用户点击浮窗外的区域;
  • 用户下拉浮窗达到收起阈值后(自定义)。
5. 显示位置

竖屏时显示在页面底部,横屏是居中显示在页面底部。

6. 支持高度延伸

当面板底部仍有未显示的内容时,可设置通过滑动或拖动面板来使其高度进行延伸,从而展示更多信息。

7. 范例

爱奇艺的分享功能和泡泡圈选择发布内容类型,都使用的是 Activity view。

用法总结

建议针对非系统级或业务级的重要提示,使用 Sheets 控件进行提示;Dialogs 控件仅用于最重要的信息提示才算是「好钢用在了刀刃上」。

另外在调用原生 Sheets 组件时,记得分端的差异性。

文章来源:优设网

iOS 13 隐秘的细节②:原生APP的细节变化·上

ui设计分享达人

拆解iOS 13原生APP的细节变化,及其“影响”。

undefined


0.前言

在上一篇《iOS 13全局组件》中,主要讲述了新版系统中的分段控件、Switch、Sheet弹窗、Context Menu等组件的细化及影响。

从这篇开始,开始讲述iOS 13原生APP的设计细节,以及对设计师的影响。


开始前,依旧先明确下文中用到的机型和系统版本:

设备1:iPhone 7,iOS 12.4

设备2:iPhone X,iOS 12.2

设备3:iPhone 6S,iOS 13 Developer beta 6


-


下面开始原生APP的相关内容:




2.1 计时器

iPhone的计时器是个特别好用的功能。

日常生活中,类似“小睡一会”、“蒸煮东西”、“女友敷面膜”这些场景都能用到计时器。过去4年,我平均每天使用8次以上计时器。


虽然iPhone的计时器已经非常好用,但在某些场景下,尚有不足:

比如,设置一个80分钟的计时,中途看时间,虽然屏幕上显示还剩28分钟。但却无法直观掌握计时的进度(百分比)。有时睡迷糊了,忘了最初设置的总时长,导致不清楚睡了多长时间...

在iOS 13新版计时器中,Apple做了一些调整,很好的解决了上述问题:


变化1:新增圆形的进度条,如下图:

进度条可以方便用户掌握计时进度。


变化2:新增“到点”的时间(几点几分)

用户不用自己换算,就能知道计时结束的具体时间是几点几分。


变化3:铃声入口位置下移:

一般而言,用户在使用计时器时,通常的操作是:第一步:选择时长、第二步:点击开始。

并不会出现调整铃声这步操作,可以说,过去铃声放在中间的布局就很鸡肋。要么碍事、要么被忽略...

PS:过去四年,我从未察觉到有设置铃声的功能。囧

UI 工作流程指南:切图标注

资深UI设计者

当界面设计定稿之后,设计师需要对图标进行切片,提供给开发工程师。切图与标注是为了能够满足开发人员对于效果图的高度还原需求,直接影响到工程师对设计效果的还原度,并且也是设计师重要的输出物之一。合适、精准的切图可以最大限度地还原设计图,起到事半功倍的效果。

通常我们只需要对 icon 与图片进行切图即可,文字、线条和一些标准的几何形状是不需要切图的,例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可,开发工程师可以用代码实现这种效果。

切图基本规范

  1. 切图的尺寸必须为偶数;
  2. 同一模块内,切图大小应保持一致;
  3. 如果有背景,尽量用平铺的背景图案来设计(减少程序体积);
  4. 可点击的部件要把相关状态都切图输出,比如:正常状态、点击状态、不可点击状态;
  5. 输出的切图应当尽可能的压缩大小,以降低 APP 的总大小,提升用户使用时的加载速度(推荐在线压缩:https://tinypng.com);
  6. 所有的变形字体把它当成 icon 来切;
  7. 切图输出格式:png-24;
  8. 重复的东西只切一个。

切图输出类型

1. 图标切图输出

桌面图标切图输出

App 的桌面图标会被运用在很多不同的地方,比如手机桌面、APP store、手机的设置列表,所以 app 桌面图标需要很多个不同尺寸的切图输出。两个平台对应的桌面图标设计输出尺寸也不尽相同,在输出的时候要把双平台的尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可,手机系统会自动生成圆角效果。

系统图标切图输出

一套图适配双平台:iOS平台(iPhone 6plus版本除外)和安卓平台公用 44*44px 切图素材,即可实现一套切图适配两个平台的开发。

适配大屏幕:为了适配 iPhone 6plus、iPhone 7plus,单独切一套比原有 44*44px 切图大 1.5 倍的切图,即 66*66px 大小的切图。

APP内功能图标

图标是可以有留白区域的,建议图标尺寸尽量不要过多。

2. 图片类切图输出

图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的尺寸大小,以便于工程师开发使用。另外一般这些切图的文件较大,在切图过程中需要控制切图文件的大小。

全屏类切图

局部类切图

3. 动效元素切图

动效元素切图一般是指在 app 中加载动效所需要的切图元素。

gif 动图切图一般分为三种:

一是只需要给到 gif 图动效的部分即可。

△ 城易logo

二是,导出序列图片压缩打包给开发人员。

三是导出 json 。

Airbnb 开发了一款动效神器:Lottie,这是一个将 After Effects 动画提供给任意一个 iOS,macOS,Android 还有 React Native 原生 APP 的文件库。这些动画通过一个叫 Bodymovin 的开源 After Effects 插件,以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。

相关链接

如何导出json动画文件

打开 AE,首选项 – 常规,将允许脚本写入文件和访问网络选项勾选上。

窗口 – 扩展 – Bodymovin,选择好合成和保存路径后,点击 Render 导出 data.jason 文件,再把该文件交给 iOS 开发 (其他同理),具体如下图:

这里设置选择 Demo ,可以导出 html 文件,在浏览器查看动画效果。选择 Glyphs 将字体转换成图形形状。

导出文件:

在线测试结果:可以直接上传 json 文件,可以提前知道动画是否有问题,然后再交付给开发。

网址:https://nicolasjengler.github.io/bodymovins-json-tester/dist/

切图命名规范

1. 通用切图命名:组件_类别_功能_状态@2x.png

举例:tabbar_icon_home_default@2x.png(对应中文:标签栏_图标_主页_默认@2x.png)

2. 模块特有切图命名:模块_类别_功能_状态@2x.png

举例:bill_icon_search_pressed@2x.png(对应的中文为:账单_图标_搜索_ 默认@2x.png)

3. 常用英文单词表

标注软件

现如今市场已有很多设计交互的平台,如:国内的墨刀、蓝湖、摹客等,国外的 Figma、invision 等,各自都有优秀的特点,既满足交互需求,又能有标注切图功能,选择适合自己团队的工具与开发一起协作即可。

1. Figma

支持 sketch 导入,Figma 也像 Zeplin 一样,标注页面间距与尺寸,并且支持各种图片格式、尺寸、形态输出,开发人员也有相应的代码可用参考,分享链接即可。

2. 墨刀

支持 sketch 上传页面至客户端,分享链接即可。支持多种切图格式下载,开发人员也有相应的代码可用参考,操作简单清晰。

3. 蓝湖

支持软件 PS、sketch 上传在线标注,在设计源文件上切好图片,开发人员可在线上下载,且有相应的代码可用参考,分享链接即可。

文章来源:优设

设计规范制作流程

资深UI设计者

 

产品发展日趋平稳时,产品定位和品牌形象已进入稳定状态,参与设计的人越来越多,设计的统一性和效率的问题也渐渐显现。因此,为了保证平台设计统一性,提升团队工作效率,打磨细节体验,就需要我们定义和整理设计规范。

确定规范内容

UI 设计中,设计规范是一个关键步骤。知名大厂基本上都有一套自己的完整规范体系,在整理设计规范时,以大平台规范体系作为参考,针对产品自身情况增删,整理出我们自己所需要的规范内容,能有效地避免规范内容遗漏缺失。

拓展链接:各大官网设计规范集合

截屏2024-09-20 上午11.36.39.png

色彩规范

颜色是设计中最重要的元素,颜色的运用与搭配决定设计的品质感。在 UI 设计中,颜色的使用规范主要在于:品牌主色、文本颜色、界面颜色(背景色、线框色)等。

 

字体规范

不同的字体气质不一样,并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果,然后在设计规范中注明。

 

图标规范

在 UI 界面中,具有标识性质的图形就是图标。作为 UI 设计中重要的设计模块,产品的每个页面中都有可能存在图标。设计规范中,图标一般按照用途分为两类:应用图标、功能图标。

应用图标:各种应用程序的识别标志,在应用商店里下载的一些应用程序的标志。

 

功能图标:规范中最好标明图标格式与使用方式。比如 Web 设计,图片可以使用 iconfont 管理,可生成代码交付给前端开发;如果是原生 APP,那么需要标注图标导出格式与尺寸。

 

图片规范

图片作为界面设计的重要组成部分,需要标明尺寸规范,分为不同用途的种类。

 

设计尺寸&栅格系统

设计尺寸,是指进行设计时,选择的画板尺寸。例如是 750*1334,还是 375*667,每个公司设计的基准都不一样,所以设计尺寸并没有规定只能用某一个尺寸,我们在设计时,使用的 1 倍图为基准进行设计的,基准尺寸为 375*667。

栅格系统,是运用固定的格子设计版面布局,在 UI 设计和前端开发中被广泛应用的一套体系。在设计尺寸中提到栅格系统,是因为现在的设计基本都是一稿适配多端,而栅格系统能很好的解决这个问题。

△ Christie Tang

栅格系统拓展链接:《看不懂不会用的栅格系统,这篇帮你彻底掌握它!》

界面布局

布局是页面构成的前提,是后续展开交互和视觉设计的基础。设计规范中可以提供常用的布局模板来保证同类产品间的一致性,设计者在选择布局之前,需要注意以下几点原则:

  • 明确用户在此场景中完成的主要任务和需获取的决策信息。
  • 明确决策信息和操作的优先级及内容特点,选择合理布局。

 

△部分布局类型展示

控件规范

控件是指产品界面中可操作的部件,与组件是有一些区别的。控件翻译为 Control,组件翻译为 Component。

通俗的解释说法就是组件为多个元素组合而成,控件为单一元素组合而成。

常用的 UI 控件(Control):按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。

以下列举一些我们在 APP 设计规范中整理的内容。

1. 按钮

按钮有 5 个状态:正常、点击、悬停、加载、禁用。需要在规范中分别罗列出这五个状态,标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度,按钮文本大小、颜色值。如果是图标按钮的话,除了上述参数值以外,还需要标注 icon 和按钮文本之间的间距,icon 图标的大小。

 

2. 输入框

用于单行信息录入文字上下居中显示,支持键盘录入和剪切板输入文本,对特定格式的文本进行处理:密码隐藏显示、身份证、卡号分段显示,标注宽高。

 

3. 选择

选择可分为单选与多选,并且也有五种不同状态:未选择、已选中、未选悬停、已选失效、未选失效项。规范中需展示出所有效果状态。

 

4. 选项卡

用于让用户在不同的视图中进行切换。标签数量,一般是 2-5 个;其中,标签中的文案需要精简,一般是 2-4 个字。每个标签所占的宽度可适当调整。

 

5. 滑动开关

滑动开关有两个互斥的选项(例如开/关、是/否、启动/禁止),它是用来打开或者关闭选项的控件。选择其中一个选项会立即执行操作。

 

6. 进度条

用于向用户展示步骤的步数以及当前所处的进程。

 

7. 角标

用于聚合型的消息提示,一般出现在通知图标或头像的右上角,通过醒目的视觉形式吸引用户眼球。

 

组件规范

常用的 UI 组件(Component):表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。△ Ant design 移动组件

在 skecth 中设计时,使用 Symbol 创建的组件,在后期整理时,可以节省许多的时间。

推荐阅读:《Sketch 进阶教程!利用Symbol 建立一套设计规范组件库?》

当然,Figma 也同样具备这样的能力,你所创建的组件都存在于 Assets 中。

 

缺省页面

  • 空状态页面:显示对应的页面空状态的图标,增加相应的引导按钮。
  • 无网络状态:在没有连接到网络时的提示页面。
  • 404&505页面:发生未知错误时的页面。

 

规范优先级

了解规范的内容有哪些之后,我们需要确认的是规范优先级,规范内容庞大复杂,基础的、必要的、高性价比的放在第一个版本中,复杂的往后放,随着产品的迭代,规范才会越来越完整。

 

一个好的规范应该是的、简单易懂的。具体执行时,我们应该确保分类合理、规范本身保持一致、布局排版易读,来提升设计师查阅的效率;确保定义清晰、描述准确、场景完备,来帮助设计师理解和使用。但值得注意的是,设计规范并不是「圣经」,不要因为规范而限制了自己的思维,当发现规范有问题的时候,要及时去修正,而不是做了一次之后,一直沿用,永不修改。

以下是蓝蓝设计(北京兰亭妙微)给中国移动研究院设计三套软件,制作的部分UI规范。

 

 

 

 

 

 

 

 

 

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

WechatIMG27.jpg

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

如何理解设计中的统一和打破?

资深UI设计者

在日常的设计工作中,我们也许会遇到这样的情况:作品缺少变化导致枯燥乏味;而变化太多又会显得杂乱、没有章法;这就对应了设计中统一和打破的关系,那么为什么统一和打破这两种看似矛盾的关系,却总是能同时出现在我们的设计作品中?如何更好的理解二者之间的关系并运用到日常的工作中去?希望本期内容能对大家有所帮助。





在设计中统一并不是所有元素1:1的一模一样,它可以体现在:板式、配色、元素属性、处理手法等等,那么为什么要统一?统一的目的是什么?下面我们具体来说:


统一:让作品更整体

作品不够整体,会给人一种信息散乱、没有视觉焦点的感受;而将视觉元素进行“统一”,就能很好的解决这一现象,这无关乎技法的熟练与否,在我们的日常生活中就随处可见:比如:我们的书本排版,会有统一的页眉、页脚、段落留白、文字间距等等,其目的就有让文本内容在视觉感受上更像一个整体;下面我们看个设计中的案例:



如图所示,上侧案例给人的感觉比较杂乱,不够整体,原因在于:元素与元素之间的关联性不强,且视觉形态及色彩属性各不相同,导致整体各元素之间的呼应不够明显,所以会给人一种不够整体甚至杂乱的感觉。而下侧案例通过在形态、色彩、属性等方面的统一化处理,加强了每个单独视觉元素之间的呼应,使得画面更整体!



统一:让作品更整洁

不管是在设计工作还是日常生活中,干净整洁的东西都是更易于大众接受的,在设计工作中,做好统一是最重要的一环,在此前提下,才能做好另一环“打破”!所以当设计作品出现乱的现象时,我们需要对其视觉元素进行规整及相应的处理,比如:

通过左右对比我们发现,很明显右侧给人的感觉杂乱无章,而左侧干净整洁、有条理,原因在于:


①、元素与元素之间并不是相互孤立的,而是在视觉上存在着一定的呼应关系,相互关联,这样画面整体性也会更强。

②、视觉上将原本各不相同的形态以及色彩重新进行了统一处理,目的是通过减少视觉元素形态及色彩变化而进一步提升画面的整洁。

③、视觉元素在物理关系以及属性上也做到了统一,即统一元素与元素之间的间隔、形态、颜色等等。


下面我们再看组案例:


上图中,相比而言案例二比案例一给人的感觉更整洁、干净、也更像一个整体,原因在于:案例二中配图的属性做到了视觉上的统一,具体体现在:①、图片的颜色属性:统一蓝色色相属性;②、图片的内容属性:统一高端、仰视角度建筑属性;③、图片的留白属性:每一幅配图在视觉上都会有一些留白性质的属性,给人的感觉很舒服。


所以:出于让整体更整洁的统一,大多是在做减法或者合并的过程,目的是减少一些造成视觉整体杂乱的因素,比如:色彩杂乱、图形杂乱、文字形式杂乱、视角角度杂乱、以及过多无关联的视觉元素等等,统一的过程也是整合视觉元素的过程。


注意:设计中的统一并不是绝对的,而是相对的,如果所有的视觉元素、属性都严格按照统一化去处理,那么就会滋生另一个问题:整体视觉太过平滑、缺少变化甚至会给人一种单调、枯燥的感受。那么在强调统一的同时,“打破”就是为了解决这难题的。





在日常设计工作中,打破是建立在统一基础之上的操作,那么既然已经做好了统一,为什么还要打破呢?打破能为作品带来什么?下面我们具体分析:



打破:提升作品视觉层次感

当作品过于统一时,很容易会给人一种单调、乏味、缺少层次变化的视觉感受,而在统一的基础上做一定的打破操作,就能起到很好的解决这一现象的作用,那么什么是打破?举几个简单的例子:


如上图所示,图①就属于过于统一的表现形式,很明显整体平淡、乏味,缺少视觉变化;而其他都是在统一的基础上做了一些“打破”的处理,只不过各自切入点不同,下面我们逐一分析:


图②:切入点是打破了一成不变的排列形式。

图③:切入点是打破了一成不变的配色形式。

图④:切入点是打破了完全统一的配色形式以及形态。

图⑤:切入点是打破了统一的元素属性值。

图⑥:切入点是打破了统一的元素属性。


以上这些虽然切入点都各不相同,但是目的都是通过打破过于统一的视觉现象,增加整体视觉变化程度,从而提升整体视觉层次感,也打破了呆板、乏味,增添了一些视觉上的跳跃性。



下面我们再看个设计中的例子:

如图所示,上侧案例属于很好的贯彻整体统一的理念,而下侧案例则是打破了固有的统一、却也保留了大部分统一的属性,通过两者对比我们发现,其实单只看这一组案例:两种表现形式都是可取的,只不过相比而言下侧案例给人的视觉感受变化更多、层次感更强,所以相比而言给人留下的视觉印象更深刻。


上面说两种表现形式都可取的前提是:单单只看这组案例,但是很显然这组案例只是页面的局部,如果整体页面都如上侧案例那样严格的按照统一进行,那么页面整体就会过于平淡、缺少视觉层次感、甚至主次不分明。



打破:划分视觉主次

在现实生活中,具有差异化的人或实物会很容易引起周围人的注意,甚至印象深刻、难以忘怀。在设计中亦是如此!其具体表现形式参考上图①-⑥,因为打破过于统一就是在营造具有差异化的视觉元素,从而会很容易在视觉上形成先后、主次之分,所以就起到了一定的划分视觉主次的作用。


注意:打破也不可盲目的进行,过于统一会单调、乏味、重复感强;而过于追求差异化也会出现杂乱、没有章法的视觉现象。所以一定要结合实际情况灵活运用。一幅作品中大多情况下:打破的次数要少于统一,即作品整体绝大不多保留整体统一的属性,通过局部打破处理提升整体出彩度,这样容易给人一种干净、整洁且不失视觉变化、层次感的感受!


不妨找一些优秀的网页分析一下,是否很多优秀的设计作品都符合这一规律?





综上所述,统一是为了让作品有视觉条理性、更整体,而打破则是增加视觉层次变化,让作品更出彩!统一和打破看似是两个矛盾的名词,实则在设计中是相辅相成的作用!不管是统一还是打破,两者的切入点都是相似的,一般体现在:形态、属性、色彩、大小、位置关系、留白等等。但是无论如何统一都是打破的前提,如果作品整体性都不够,再一味的追求打破关系,只会让作品越做越乱。所以一定要先做好统一,其次才是进行打破、改变。当然文中提到的只是一部分,希望大家能活学活用、举一反三!

文章来源:站酷

Material Design暗色主题设计指南

ui设计分享达人


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本文是我学习Material Design设计规范的学习笔记和个人理解,希望对大家设计暗色主题有所帮助。

undefined


暗色主题是什么?

最近,Material Design中新增了关于暗色主题的设计规范:暗色主题(Dark theme)是指在UI界面中使用大面积的深色来构成界面的一种设计,它是产品默认主题的一种补充。很多朋友可能认为暗色主题就是现在新闻客户端的“夜间模式”,这个说法其实并不正确。因为暗色主题是可以由用户自己选择是否开启的,它的使用场景并不局限于夜晚。很多用户偏爱暗色模式是因为暗色更“酷”。比如前段时间苹果电脑增加了类似的“黑暗模式”(Dark Mode)的设计,大受用户的喜爱。用户沉迷使用暗色主题,而不是以前灰色的默认设计。暗色主题不但颜值高,而且可以在保持色彩对比度的同时降低设备屏幕的亮度,还可以根据当前照明条件自动调节亮度,这有助于改善视觉疲劳。除此之外,暗色主题还可以节省设备的电量,可谓是一举多得。那么,暗色模式都有什么样的规范呢?

 

undefined 

首先,暗色模式用深色视觉元素来构成界面的UI

 

undefined 

使用深灰色进行设计

在设计暗色主题的时候,我们应该使用深灰色来进行界面设计。黑色由于太过于深邃,无法让用户感知当前界面的高度和空间感,而不同级别的灰色就可以暗示给用户这些信息。

 

 undefined

使用强调色彩突出组件

在暗色主题下,我们可以使用少量的强调色彩来凸显一部分功能或者组件,大部分的界面全部为深灰色,所以这些被凸显的部分会更加突出。

 

undefined 

节约能源

在很多带有OLED屏幕的设备中,暗色主题可以通过减少亮色的使用来有效地延长电池寿命。试验表明,使用暗色主题可以让设备的续航时间变长。

 

undefined 

增强可访问性

暗色主题对于色弱及有其他视觉障碍的用户非常友好,可以提升他们使用产品的体验。

 

规则

对比度:深色背景和100%白色正文文本的对比度达15.8:1以上。

信息层级:组件和元素通过较深和较浅的灰色来表达信息层级。

饱和度:界面中主要色彩与文字信息的对比度应该高于4.5:1(根据Web可用性指南的标准)。

设计少量强调色彩:我们在设计时会使用大量深灰色来设计背景,也会用少量强调色彩来表示更重要的信息,与背景产生对比。

 

undefined


关于信息层级

暗色主题的UI界面主要使用深灰色的背景和少量的强调色彩,它们不刺眼但仍然保持着很强的可用性。用户使用起来不会有任何的不舒适。界面按信息层级的重要性依次让用户注意到以下四部分:主强调色、次强调色、较亮的灰色前景、较暗的灰色背景。


undefined

 1 背景(高度:0dp);2 表面(高度:1dp);3 主强调色; 4次强调色;5 在背景上的元素; 6 在层级上的文字色; 7 主强调色上的文字色; 8 次强调色上的图标色

 

undefined


触发暗色主题的开关

我们可以设计控件来让用户打开(或关闭)暗色主题,这个控件可以使用很明显的方式来进行突出强调:比如在明显的位置设计开关图标来让用户切换;也可以使用不太明显的方式:在菜单或者设置界面中放置开关。


undefined

 形式1:顶部应用栏中的暗色主题开关

 

undefined

 形式2:在气泡中切换暗色主题

 

undefined

 形式3:在设置界面中切换暗色主题

 

暗色的属性

暗色主题使用深灰色而非黑色作为组件的主要设计配色。深灰色表面可以表现出更广泛的高度和深度,因为我们仍然可以在深灰色之上设计更重的投影。除此之外,深灰色的设计还可以减少视觉疲劳,因为深灰色表面上的浅色文字与黑色表面上的浅色文字相比对比度更低,对眼睛刺激较小。


undefined

 推荐的深色主题默认颜色为#121212

 

海拔高度

在暗色主题中的组件和在默认主题中的组件可以使用相同的海拔和阴影大小,然而在暗色主题下它们的色彩会根据信息层级的排序而改变,这一点是通过明度不同的灰色来表现的:海拔越高则越亮(暗示接近光源)。我们在这里通过给深灰色上叠加一层不同透明度的白色来改变亮度(不是直接做灰色的形状)。


 元素的海拔越高,颜色就越亮


undefined 

通过使用半透明白色覆盖层来暗示海拔:1.形状 2.带有透明度的白色叠加层

 

undefined 

默认主题使用阴影来表示海拔,而暗色主题则通过表面颜色来表示海拔


undefined 

不同的海拔高度与白色层不同的透明度之间的换算关系(透明度从0%到16%)

 

undefined 

A. 高度为1dp、5%白色叠加的卡片式设计; B. 高度为6dp的FAB按钮,使用了次要强调的颜色 C.高度为8dp的底部应用程序栏,12%白色叠加


undefined 

错误1:辅助色的配色所表示的海拔不应该过高

错误2:阴影的颜色应该暗于界面元素的颜色

 

可访问性和对比度

暗色主题表面必须足够暗才可以显示白色的文本。为保证信息能够被良好的阅读,文本和背景之间的对比度应不少于15.8:1。也就是说,我们不可以用纯白色来设计所有的文本信息,而要根据背景色和文本的对比度来调整。

 

如果需要创建带有品牌色的暗色界面,请在推荐的暗色主题默认颜色(#121212)上叠加带有不透明度的主要品牌色。这个案例中,界面深色#1F1B24是暗色主题默认颜色#121212和8%的品牌紫色叠加的结果。

 

 

 

科普一下,在显示纯黑色的时候,屏幕需要消耗更高的电量。为了节能,某些设备(例如带有OLED屏幕的可穿戴设备)可以关闭所有显示黑色的像素以节省电池电量。

 

 

使用调色板中较少饱和的紫色可以提高在深色背景中的易读性并减少视觉上的突兀

 

辅助色饱和度过高,和背景不融合

 

主体色

主体色是应用里最常显示的颜色。Material Design暗色主题使用原色的200色调(在所有背景和层级上均需通过WCAG的AA标准:文本和背景至少对比度达到4.5:1)。

 

 

暗色主题中的主体色示例:1.主要颜色 2.色调变体

 

主体色变体

在我们设计界面时,某些浅色界面上的组件需要使用主体色的变体。

 

这个暗色主题使用了主体色(紫色200)和主体色的变体(紫色700)

 

辅助色

大多数的时候我们都无法仅仅依靠主体色这一种颜色撑起画面,我们还需要辅助色。辅助色一般来说是主体色的临近色或互补色。在暗色主题中,辅助色可以用来显示用于突出的部分内容。当然,辅助色同样必须满足背景与文本4.5:1的对比度要求。

 

暗色主题中的辅助色调色板1.辅助色指示符2.色调变体

 

 

这个界面中使用了主体色和辅助色变体

强调色

在暗色的主题中,暗色占据了UI的大部分空间。而在暗色之上我们也会运用强调色。强调色通常是浅色或明亮的色彩,这样的颜色能让我们希望突出的元素在暗色中脱颖而出。

 

 

为了提升灵活性和可用性,建议在暗色主题中使用较浅的色调(200-50),而不是默认主题颜色(饱和色调范围为900-500)。1.默认主题原色指示灯2.暗色主题原色

 

选择色彩时要考虑饱和度对界面阅读的影响

 

 

暗色主题下顶部应用栏使用的颜色不可以是主体色

 

品牌色

为了保持品牌的识别性,品牌颜色可以在暗色主题中使用,但应当仅限于一个或两个品牌元素,例如Logo或品牌按钮。界面中的其他部分如文字和次要元素仍然可以使用饱和度低的颜色来设计。

 

 

1. 暗色主题色2.品牌颜色

饱和度很高的品牌色应用于FAB(2),而不饱和的暗主题色应用于文本(1)

 

暗色主题色板

我们设计一个产品的时候需要完成一套专属的色板,它包括:颜色(主体色、辅助色、主体色变体、辅助色变体)、表面(背景和组件)、状态(例如错误状态) 内容(排版和图像)等的色彩选择。

 

暗色主题的色板实例


 

1 Material Design默认主题色板 2 Material Design暗色主题色板


 

错误颜色

错误颜色在产品中用来指示错误状态,当看到这个色彩,用户就知道有些事情出错了。暗色主题的默认错误颜色为#CF6679。

 

这种颜色是通过默认的错误颜色(#B00020)并使用40%白色叠加来创建的,这种颜色通过了AA级对比度标准。


 


文本颜色

当浅色文本出现在深色背景上的时候时,应使用以下不透明度:高度强调的文本(87%)、中等强调的文本(60%)和禁用文本(38%)。

 

 

高度强调的文本、中等强调的文本和禁用文本的颜色

 

状态

通过使用叠加颜色来传达组件或交互元素的状态。在暗色主题中,状态应使用与其默认主题相同的叠加值,并且可以调整它们以通过AA级对比度标准。


 

悬停、聚焦、按下和拖动状态时组件的不同设计

 

使用什么软件设计?

Material Design旨在为设计师设计一套可以应用在所有平台的设计语言。在目前的UI设计界较为通用的软件都可以支持Material Design的设计,比如我们可以行业里比较流行的Adobe XD、Sketch、Figma等UI软件来设计界面。Material Design提供了暗色主题的Sketch文件,大家可以在支持Sketch格式的设计软件如XD、Sketch、Figma中打开它。

 

 

使用Adobe XD打开暗色主题模板

 


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


顶部导航栏设计样式汇总

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本篇文章主要汇总了常见的四种顶部导航栏设计样式,希望能帮助自己和小伙伴们更好地理解导航栏这个组件。

顶部导航栏作为我们使用APP时每天都要遇到的组件,出镜频率极高,看似简单,其实我们在绘制界面的时候还是有许多细节需要注意的。本篇文章主要汇总了常见的四种顶部导航栏设计样式,希望能帮助大家更好地理解导航栏这个组件。


一、常规导航栏

所谓常规导航栏,主要是指固定在状态栏下,能清晰分辨出的一行导航栏,主要由操作图标、标题、搜索框、背景等组成,大致分成三种,分别是简单标题导航栏、搜索框导航栏以及Tab/分段控件导航栏。


1.简单标题导航栏

简单标题导航栏常见于二级详情界面或导航简单的一级界面,主要由操作图标与标题组成,如下图:

(以下涉及的尺寸大小都是二倍图下的设计大小)

该类型的导航标题的大小一般是36px,操作图标的设计大小一般是40px,切图大小一般是48px,背景色多采用白色或APP主题色。并且很多APP为了保证整体界面的简洁,还会去除导航栏底部分割线,仅采用白色作为背景。


2.搜索框导航栏

常规搜索框导航栏是在简单标题导航栏的基础上,增加了一个搜索框,一般去除了导航标题。如下图:

搜索框的宽度随导航栏中操作图标的多少决定,搜索框高度多采用56~60px,搜索框中的图标设计尺寸多采用32px(为了减少切图尺寸,也可采用48px的切图大小)。

 

在摆放图标时,采用左右间距等分,距离搜索框的间距与边距相等,看起来会更舒适。如下图所示:


3.Tab/分段控件导航栏

Tab左右切换顶部导航栏与分段控件顶部导航栏,都是顶部有多个标题切换的导航栏样式,分为选中标题与未选中标题,如下图:


分段控件顶部导航栏一般有2~5个可选项,且不能左右滑动。Tab左右切换顶部导航栏的可选项可以扩展很多(如爱奇艺的首页顶部Tab切换有24个可选项),并且可以左右滑动切换,选中样式也比较丰富,常见的有底部加上小短线、字体颜色变化、字号放大等(多个合并使用更能突出选中标题),如下图:



二、通栏导航栏

通栏导航栏与常规导航栏的构成基本没有区别,最大的不同是,通栏导航栏的背景层一般与下方的模块打通了,在视觉上看起来更为统一,还能一定程度上节约界面空间。如下图:

通栏导航栏常用在电商、旅游等界面复杂或是需要烘托氛围的界面中(多伴随着背景处理),有些也会放在顶部通栏Banner上,节省空间的同时减少割裂感。


通栏导航栏的背景处理方式一般有三种

1.特殊背景处理:与下方模块整体风格保持一致,多采用与下方一致的图片背景;

2.颜色、渐变背景:采用纯色或是渐变背景,常见于卡片风格的界面;

3.黑色透明渐变蒙层:采用一层渐变蒙层,常见于图片Banner上,保证导航栏文字的可识别性。




三、大标题导航栏

自ios11发布后,大标题风格的导航栏便开始流行起来,尤其是飞机稿总能看见大标题导航栏的影子。普通的导航栏在二倍图下高度只有88px,标题字号为36px,而大标题导航栏在二倍图下高度足足有192px,标题字号为68px。


但并不是所有APP都适合使用大标题导航栏,并且即便使用大标题导航栏,整个APP中也不会全部使用,使用中界面向上滑动也会切换成正常状态的导航栏或直接隐去导航栏,便于内容的查看。

 

有些APP也会折中使用,在常规88PX(二倍图)导航栏高度下,放大字号,隐去分割线,使标题看起来更大。



使用大标题导航栏,你需要考虑以下两点:

1.是否需要帮助用户快速确认所处位置(多为产品页面重复性多,或是功能单一的APP);

2.APP整体风格是否偏向简约大气。

大标题导航栏总给人一种高逼格的感觉,这也是为什么飞机稿喜欢使用大标题,但却没见国内的电商APP使用。



四、小程序导航栏

微信的小程序导航栏,在顶部右上方有一个不可去除也无法编辑的Titlebar按钮,微信配置了一深一浅两种风格。

 

从APP转换到小程序时,要注意调整APP的顶部导航栏的位置以及搜索框的大小,避免被Titlebar遮挡,如下图:

上图中,豌豆公主的顶部导航栏整体下移,并且减小了搜索框的高度,提高屏幕的利用率。


五、划重点

·常规导航栏主要包括简单标题导航栏、搜索框导航栏以及Tab/分段控件导航栏通栏导航栏

 

·通栏导航栏要注意导航背景的处理,常用的有特殊背景处理、颜色渐变背景、黑色透明渐变蒙层

 

·大标题导航栏使界面整体更有逼格,但不是所有APP都适合的,要根据情况合理使用

 

·微信小程序导航栏在顶部右上方有一个不可去除也无法编辑的Titlebar按钮,从APP换到小程序时要注意重新调整导航栏

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


日历

链接

个人资料

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

存档