购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.2.2 权限获取弹窗

权限获取弹窗是App中不可缺少的一类提示型弹窗。有些产品在设计权限获取弹窗时,会直接使用手机系统中自带的弹窗,这类弹窗形式相对单一。随着产品逐渐成熟,一套和产品风格相匹配的权限获取弹窗能给用户带来更好的使用体验。

在设计权限获取弹窗前,需要先了解一下权限获取这种操作有哪些注意事项。

用户隐私保护:权限获取相对来说有一定的隐私性,用户在操作时也会更慎重,需要注意对用户隐私的保护,不能过多收集用户的个人信息。

描述清晰性:在权限申请的描述中,需要清晰地说明权限的用途,以及开启权限后的相关操作,提前告知用户为什么需要这些需求,避免用户理解不足,增加用户学习成本。

权限开启的必要性:在开启权限时,根据用户使用情景进行请求,容易更符合用户的操作习惯,例如用户群聊时想要上麦评论,这时候开启语音权限也是很顺其自然的请求,对于用户也是很有意义的,提升了用户体验。

提前理解清楚权限的应用场景和用户行为,在设计时才能抓住核心诉求,让设计作品更落地。接下来以通话权限、拍照权限、好友权限以及位置权限四个常见的操作为示例,探究如何借助Midjourney来辅助完成权限获取弹窗的设计。

第一步,解释说明权限含义。

权限获取弹窗的构成形式很简单,主要由提示元素、权限说明文案和操作按钮组成。其中每一种权限在开启的时候都需要搭配不同的提示元素和权限文案。当我们接到获取权限的设计需求时,需要考虑如何为这些权限匹配合适的图形化元素,方便用户更好地了解页面内容。

举个例子:如果想获取通话权限,可以用麦克风作为提示图形;想获取拍照权限,可以用照相机作为提示图形;想获取好友权限,可以用通讯录作为提示图形;想获取当前位置的权限,可以用地图作为提示图形。

经过这样的设计思考后,抽象的权限获取需求就转换成了具体的图形设计,接下来就可以借助Midjourney来生成各种各样的图形素材了。

第二步,文本描述。

我们先从获取通话权限开始设计,通话权限对应的具体图形是麦克风元素,所以在Midjourney中我们只需要考虑怎样把这个麦克风元素生成出来就可以了。

麦克风的设计风格要根据产品风格而定,这里我们以一种3D效果的麦克风为例,出图要求是形状简单但要保留细节。想要的颜色是银黄色,麦克风要有一些哑光的质感。此外,再加上一些通用的文本描述,例如白色背景、极简设计等,最后整理得到的完整文本描述示例如下:

A 3D microphone icon with simple shape, Minimalist, matte, light silver and yellow, white background,surreal, details, 8K --niji 5

第三步,AI出图。

根据整理好的文本描述,在Midjourney中使用/imagine指令,输入文本描述就可以开始出图了。

本次出图是使用文生图的方法,没有使用麦克风图像作为垫图,所以会生成很多种不同风格和形状的麦克风,效果如下图所示。在生成的图像风格符合预期要求的情况下,单击刷新按钮再多跑几次图,可以产生更多的可能性和设计灵感。

麦克风图片生成之后,接下来将文本描述中的麦克风(microphone)替换为代表其他权限的图形,如照相机、通讯录、地图等,其余描述不需要改变,来生成一套风格统一的设计素材。

首先将主体描述麦克风(microphone)替换为照相机(camera),得到的文本描述为:

A 3D camera icon with simple shape, Minimalist, matte, light silver and yellow, white background,surreal, details, 8K --niji 5

照相机出图效果如下图所示。

再将主体描述替换为通讯录(phone book),得到的文本描述为:

A 3D phone book icon with simple shape, Minimalist, matte, light silver and yellow, white background,surreal, details, 8K --niji 5

通讯录出图效果如下图所示。

最后将主体描述替换为地图(map location),得到的文本描述为:

A 3D map location icon with simple shape, Minimalist, matte, light silver and yellow, white background,surreal, details, 8K --niji 5

地图出图效果如下图所示。

第四步,图片筛选及设计排版。

四种不同权限的提示图形全部生成之后,接下来就要对这些图进行筛选整理。虽然是使用同一套文本描述进行出图,但生成的图片颜色上还是会有一些细微的差别。

在筛选过程中需要根据图形的颜色、图形的造型程度、图形的角度等多个方面仔细筛选,得到一套合适的素材图。在导入设计软件进行设计排版前,为了后期方便设计,有背景的图片可以先把背景去掉。

筛选图处理好之后,接下来我们先以通话权限提示弹窗为例,来看看弹窗的合成方法。依次将生成的麦克风图形、权限提示文案和操作按钮导入设计软件中进行合成排版,这里采用居中对齐的排版方式,将图形放到弹窗顶部,中间为提示文案,弹窗下方为操作按钮。在排版时,还可以在麦克风图形、弹窗背景中分别加入矢量化的装饰图形,起到丰富画面和强化氛围的作用。

最后调整整个弹窗的颜色以及弹窗中文字的字号大小,确保文字大小在任何设备中都能有较好的可读性。通过这些设计排版和合成方法,一个通话权限获取弹窗就设计好了,如下图所示。

利用同样的合成方法,在保持弹窗排版不变的情况下,分别将弹窗中的图形元素进行替换,为每种权限搭配不同的提示文案,最后加上操作按钮,一套完整的权限获取弹窗就设计完成了。

最后将合成好的弹窗放到真实的页面中,查看实际应用效果,如下图所示。

在实际工作中,我们以此为基础,只需要根据自家产品的风格和颜色,将弹窗的主题色或者提示文案进行替换,就能快速复制得到一套高质量的权限获取弹窗。 d84qJtoC56GXU6jBXZEvLEMlRPHa9GhDlwc3smbphCnvK+n/A/LCU7ZaZn4x4cRk

点击中间区域
呼出菜单
上一章
目录
下一章
×