国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

发布时间:2019/09/08标签:   APP设计    点击量:

原标题:澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

4)其他弹窗

4、易混淆文案的区别

3、标题和描述要简洁,银河网上开户,避免采用是否、你等判断不明和侮辱性的词语。

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

1)标题描述要简洁

从上图可以看出安卓端最小分辨率是720×1280;iOS端最小分辨率是640×1136;因此为了一稿适配多种机型,我们往往以640×1136为最小分辨率进行适配。

目录

1、弹窗基本构成

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

当你的弹窗标题和文案标题清晰,一眼就能看懂该如何操作,就不用解释按钮的功能了,直接用“确定”能减少用户操作时的判断成本。

产品中统一类型的弹窗按钮的文案应该保持一致,比如“确定”“取消”在所有的弹窗中都应该统一为这两个文案,不要一些是“确定”,一些是“确认”。

不过当遇到删除或退出的警告弹窗时,确定和取消的使用就会引起用户误解,这时候可以将文字设置成不易误解的文字,比如“删除”“确定退出”。

明确:让人一眼就能知道这个弹窗的作用,不需要过多思考。


三个按钮或更多按钮比较复杂,当按钮越多,用户就需要更多的事情进行判断,不太适合用在警示框中,多用于引导提示弹窗中。

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)


双按钮一般为行动操作按钮和取消按钮的组合,提供给用户需要操作的行动按钮,同时也给用户提供取消操作,比较符合用户预期,不会引起反感,推荐使用。

2)主操作按钮统一放到右边

浅谈用户交互关于“对话框”的使用分类

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)


原文地址:海盐社(公众号) 作者:风筝KK

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

客脉和Keep这两个按钮均用了是否句型,用户在操作时往往都会多反应一下,给用户带来理解成本,因此不建议使用。

2、按钮尽可能使用双按钮,比较符合用户预期,不会引起反感,推荐使用。


我们知道弹窗一般是通知我们相关问题和提醒的时候出现的,这时候我们需要设置友好的语气,文字描述需要消极和直接,不要出现指责、判断、侮辱等文字,比如”是否XXXX”、”你XXXX”。

2)避免出现指责、判断或侮辱



引导好评弹窗该怎么玩?

当使用场景中有需要用户输入内容时,可根据字数范围设置单行或多行的输入框。

2、按钮规范

按钮的使用很少有规范细化到这里,因此如果你的产品原型图上没有把所有的弹窗都画出来,而交给前端自己补充时,就会出现一些问题。

按钮文案在设置时,尽可能用和弹窗标题和描述相关的动词,比如确定、查看全部、回复、忽略等,避免使用是/否等指向不明确的词语。

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

3、文案规范

文案规范作为设计师其实很少关注这个问题,在大多公司都是产品、交互负责,但是对于中小公司来说,文案规范这块真的是空白,产品没时间想这些,设计觉得没义务做这块。但是文案的好坏直接会影响用户的交互操作,下面我总结了五点文案规范。

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

2、操作区

操作区是针对信息区的操作入口,也是构成产品和人互动的入口,从排版来说分为横向排版、纵向排版;从数量来说分为单按钮、双按钮、多按钮等。

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

对标题和描述的要求有两点:明确、简练。


3)识别破坏性按钮

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

使用时,推荐使用横向排版方式,当按钮大于2个或文字较长时,可考虑采用纵向排版。

5、弹窗中文案做到统一,不要一些是确认,一些是确定。

按照这种方式,我们需要将图片、输入框、其他等弹窗都一一标注出来。

2)带图片

单按钮往往只有一个行为操作按钮,没有取消,无法控制情况,因此不推荐用在警示框中,多用于系统通知中。当按钮中明确需要用户操作的内容,仍然需要加一个关闭的入口,降低用户心理预期。

另外,辅助按钮颜色可以采用灰色或主题色,这取决于按钮的重要程度,如果按钮重要程度低就采用灰色,重要程度较高就采用主题色,同时将主操作按钮文字加粗。

03. 划重点

由于篇幅较长,今天就和大家分享弹窗的基本构成和弹窗的设计规范。下周一在和大家分享弹窗的使用方法、弹窗中易混淆的文案、弹窗的使用场景三个方面。下面针对今天的内容整理下重点:

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

如果弹窗中有导致破坏的操作,比如删除内容,这时候我可以将按钮进行差异化设计,或者设置破坏性的文案,提示人们谨慎操作。

1、尺寸规范

尺寸规范和前端的对接息息相关,标注时需要考虑各种适配场景。弹窗尺寸需要掌握弹窗的宽高、弹窗的适配标注。

转转和Keep这两弹窗,操作场景类似,但是Keep描述文字用是否放弃本次编辑,按钮文字均采用了解释性文案“放弃”“继续编辑”反而加深了理解成本。

5、弹窗应用场景

3、弹窗的使用方法

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

2)弹窗的适配标注

百度统计

4、当标题和描述已经表述清楚时,不需要在对按钮进行解释。

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

目前一些公司为了各分辨率下有好的呈现效果,针对大屏会单独调整;但是对于一些中小公司投入资源有限,因此希望最好能一套尺寸适配所有机型,该怎么办呢?

确认和确定在使用时很容易混淆,转转的弹窗一个是确认、一个是确定其场景都是类似,这里觉得统一成确定会比确认好一点(为什么可看下一篇的易混淆文案的区别)。

02. 弹窗的设计规范

弹窗的设计规范主要从三个方面进行整理:尺寸规范、按钮规范、文案规范。

1)确定弹窗的宽高

2、弹窗的设计规范

弹窗最大宽度:640px(最小分辨率)-100px(留白)=540px

弹窗最大高度:1136px(最小分辨率)-40px(状态栏)-88px(导航栏)-98px(标签栏)-100(留白)=810px


弹窗按钮:场景不同,文案也不同

另外,最好提供”取消“按钮,方便用户安全退出,同时将”取消“标记为默认按钮,将其变粗。

3)带输入框

 


澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

另外,当弹窗内容较多时,我们需要将弹窗的最高高度控制为810px,多于部分滚动展示(一般不建议滚动)。

因此在设计时弹窗宽高不要超过540x810px这个尺寸。这样一套弹窗就可以适配安卓和iOS中的各种尺寸了。

1、信息区

根据业务需要,信息区可以是纯文本、带图片、输入框、其他等信息。

语雀弹窗规范

最近在公司整理设计规范,记得上一次整理弹窗时,我仅仅将几种弹窗样式整理了出来,但是真正在使用时发现使用场景很有限,导致后期需要重新调整。另外,之前的规范仅考虑了设计上的统一和协作性,并未考虑到和前端之间的对接,导致上线出现了一系列的问题。因此写这篇文章的初衷是,写让前段、技术都能看懂的设计规范,同时能够规避场景覆盖不全面、文案不统一、混淆使用等问题。

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

5)按钮文案要符合逻辑

一般解决方案看你的尺寸能否适配最小分辨率640×1334,为了让数据更有信服感,我分别整理了安卓和iOS端分辨率的占比情况(数据截止为2019年6月)。


 

1、弹窗的最大尺寸为540x810px,弹窗内容过多时,进行滚动显示(尽量不要让弹窗滚动)。

01. 弹窗的基本构成

弹窗是系统让用户执行命令、向用户提问、向用户提供信息或进度反馈的辅助窗口,简单来说就是系统和用户进行交互的窗口,弹窗主要由信息区和操作区组成,如下图:

只要保证该尺寸下能正常展示即可。这时候我们就能计算出弹窗的最大宽度和高度(在iPhone下弹窗左右上下分别留出50px的留白)。

1)尽可能使用双按钮

一些同学会认为直接用原生态的按钮位置会比较符合用户操作,但是从用户操作习惯来说,人们最有可能点击的按钮应该放在右边,取消按钮应该放在左边。

4)避免解释警示按钮

参考引文

其他弹窗一般在特殊场景中使用,比如授权弹窗、运营弹窗等。

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

多用于产品中需要情感化表达的一些场景。比如:发布动态设置、成功提示等。

澳门银河官网网址: 一个弹窗引发的思考,我竟写了5000字的分享(上)

版权信息Copyright © 银河官网 版权所有    ICP备案编号:鲁ICP备09013610号