保定市天之河网络信息有限公司-网络信息体系的共享技术平台
网络信息技术-信息应用系统-保定市天之河网络信息有限公司
当前位置:网站首页 > 网页设计 > 正文

一篇文章教会你,APP弹窗做到统一又有特色

作者:admin发布时间:2019-12-01分类:网页设计浏览:12评论:0


导读:原标题:一篇文章教会你,APP弹窗做到统一又有特色今天主要针对如何在一个项目中进行APP弹窗设计。每个公司或许都有自己的设计...
原标题:一篇文章教会你,APP弹窗做到统一又有特色

今天主要针对如何在一个项目中进行APP弹窗设计。每个公司或许都有自己的设计流程,本文只是根据日常使用的方式进行叙述,大家可以根据项目情况进行使用。

弹窗的设计原则大致包括以下方面:

【视觉方面

一篇文章教会你,APP弹窗做到统一又有特色 网页设计 第1张

1. 弹窗文案简洁,表意清晰无歧义

比如,弹窗提醒文字为“是否要删除该项?”,操作为“是”和“否”会让用户犹豫不清是删除还是不是删除,若换成“删除”和“取消”就不会有歧义了。

2. 设计风格尽量简约

避免视觉设计过度复杂影响弹窗阅读情况。

3. 弹窗的设计风格可以根据应用设计风格进行重塑

比如,微博Toast弹窗就根据微博整体风格进行设计。

4. 可进行诱导性设计

常见的如希望用户点击的按钮放在右边,放大点击按钮弱化关闭按钮等。

5. 危险操作需警示

如删除时需要将“删除”操作警示。

【交互方面】

一篇文章教会你,APP弹窗做到统一又有特色 网页设计 第2张

展开全文

1. 弹窗的出现尽量不干扰用户使用

2. 具有同种层级的弹窗使用相同的样式

3. 同种Toast弹窗位置保持相同

4. 注意弹窗频率

#小黑板划重点#以下是本文重点

那,一个项目中弹窗那么多,又如何做到即统一又有特色?

首先,根据弹窗强调程度对整个应用的弹窗进行划分,分出哪些是需要重点强调的弹窗,哪些是弱化的弹窗(具体可看上篇文章);

其次,对于同种强调程度的弹窗进行框架样式设计(下文会详细介绍Dialog的框架样式);

最后,针对不同页面进行视觉设计。

A 最常见的就是Dialog了,针对功能的不同对弹窗做了框架样式,方便分辨。

一篇文章教会你,APP弹窗做到统一又有特色 网页设计 第3张

这样的设计难免会有些单调,也无法体现应用的特色。今天搜罗了大量弹窗的视觉,针对每一种框架样式看看都可以做哪些设计?

1. 无按钮

一篇文章教会你,APP弹窗做到统一又有特色 网页设计 第4张

无按钮框架样式

无框架的样式多为信息展示,因此文字一般较多。可以通过信息用场景化的方式呈现,但需要注意文字的层次。

2. 单项按钮+无取消

一篇文章教会你,APP弹窗做到统一又有特色 网页设计 第5张

单项按钮+无取消

这种一般想要用户必须点击才可进行下一步操作,设计需要引导点击按钮操作,因此在设计的时候将按钮的样式进行重化处理或特殊样式处理,增加视觉。

3. 单项按钮+取消

一篇文章教会你,APP弹窗做到统一又有特色 网页设计 第6张

单项按钮+取消

这种类型和2类似,添加的取消按钮也会弱化处理。

4. 双项按钮+无取消

一篇文章教会你,APP弹窗做到统一又有特色 网页设计 第7张

双项按钮+无取消

双向按钮中有优先和辅助按钮,优先按钮会引导性设计。若作为两个并列的button设计的话,通常会将优先按钮放于右侧。

5. 双向按钮+取消

双向按钮+取消

应用最多的样式,同4的样式添加了取消,用户友好度高。

B 然后来看看Actionbar的样式

1. 应用内部功能

一篇文章教会你,APP弹窗做到统一又有特色 网页设计 第8张

应用内部功能

根据页面视觉进行设计的同时,将取消按钮进行变换增加其他按钮点击率,毛玻璃的样式仍是经常使用的样式,但是纯色及大背景的样式也可以给页面增加一些特色。

2. 其他应用功能

其他应用功能

经常使用在社交应用的分享,一般会用社交应用的icon表示按钮(降低用户学习成本),同时也会增加一些引导性的文案诱导分享。

C 再接下来是Popover的样式

一篇文章教会你,APP弹窗做到统一又有特色 网页设计 第9张

Popover

随着3D touch的发展,现在越来越多的应用使用Popover的机会越来越多,清晰简洁的Popover可以添加很多常用功能。

D 最后是Toast/HUD

一篇文章教会你,APP弹窗做到统一又有特色 网页设计 第10张

Toast/HUD

除了常用的毛玻璃样式,也可以使用全屏的样式进行设计,这样的视觉感会增强。

视觉可以对弹窗进行整体设计、添加icon、融入插画、异型设计等方式进行设计,

作者:王旋子同学

链接:https://www.jianshu.com/p/90d4e13c91d5

11月素材合集A+B

一篇文章教会你,APP弹窗做到统一又有特色 网页设计 第11张

后台回复111即可领取

标签:保定市天之河网络信息有限公司网络信息安全保定市天之河网络信息有限公司网络信息管理保定市天之河网络信息有限公司网络与信息安全技术


欢迎 发表评论: