access msgbox弹窗位置_关于分享弹窗包括视觉内容总结/分析

1、分享标题：例如：分享这条Vlog到…

2、包含遮罩：遮罩颜色设置为？比较合适

3、7±2原则：每页展示5个三方平台，最多展示9个三方平台加其他

4、交互操作：取消分享

5、弹窗的样式设置？

1、分享标题：分享这条Vlog到…

标题作用：让用户不迷失自己，知道自己在哪，操作到哪一步，不在产品中迷失自己

常用的字体规范：一倍图下，14PX，中黑体，色值：363636，注意：一般界面设计中不采用纯黑色

常用排版位置：左对齐、居中对齐

2、包含遮罩：遮罩颜色设置为

遮罩原则：一般设置遮罩颜色，不能太黑，太黑用户查看分享内容出现视觉干扰，也不能太浅，视觉上会跟弹窗的颜色混淆在一起，不能做很好的视觉区分，对比差异不大。

那怎样设置遮罩姿势呢，往下看

常用遮罩规范：介于遮罩原则：所以我们要去一个平衡很重要，同时借鉴人机交互指南的设计规范

设置色值：#000000，透明度设置30%-50%，是比较合适的

小技巧：不建议用灰色去调透明度遮罩，这样会显得很灰，脏脏的界面，实用纯黑去调的透明度会很干净，通透。

敲黑板，划重点：一般设置遮罩的颜色：我们可以多看一些知名的app，总结分析它们的规律，吸精华，去糟粕

3、7±2原则：每页展示5个三方平台，最多展示9个三方平台加其他

7±2法则：是指一般人的短时记忆容量约为7个加减2个，即5～9之间。可以理解为7加减2个组块

利用这个法则，不论信息多少，都可以通过结构化将简化为符合7±2法则的短信息组块

这样当用户查看信息时可以更容易的将注意力放在他们所关心的信息上，能够更快的找到他们要找的东西，更容易理解，更容易记忆

小技巧：严格来说：对于设计分享模块等小icon，要根据整体App设计主题风格来定，这样不仅使整个产品更加协调统一化，也可以锻炼自己对不同风格的把控设计

敲黑板，划重点：对于分享功能 考虑到拉新用户，一般选择分享到用户群里比较多的三方平台，例如例如上面常见的 微信、盆友圈、微博、QQ等～

也可以采用“更多”功能把喜欢的东西分享到自己想分享的三方平台

4、交互操作：取消分享

小技巧：站在产品和业务角度出发，目的是让用户正面分享，所以，在交互上“取消”要相对来说在设计手法上要相对隐藏，所以直接用文字按钮即可。不过也有其他的设计方式 ，但是要斟酌使用

在视觉上尽量不要太抢视觉即可。在设计上没有绝对的对和错，只是哪种方式更加合适使用场景

常用字体规范：一倍图下，视觉要相对弱于标题，色值#666666，14PX，色值大概取一个值即可代表可点击，颜色不能太浅，也不能太抢视觉

5、弹窗的样式设置？

分别可以在背景颜色上，和样式上，以及页面定制弹窗尺寸

颜色上，根据苹果视觉分析，背景设置高级灰，icon背景色为白色，加微投影，与背景灰色拉开视觉差异化。同样那句话设计没有对错，只是哪种方式视觉体验上更胜一筹。

形式上，分两种 ，一种是带圆角的，一种是直角的，个人决定圆角的稍微好一点，样式没有很呆板，视觉上跟更加亲和。

定制弹窗尺寸，很多同行会直接找竞品去分析，那我们有没有一种更加科学的做法？

直接知乎屏幕分辨率，手机占用率等！在真正着手设计一个弹框时,市面上各种各样尺寸的屏幕分辨率

如果你希望以一个尺寸适配所有屏幕分辨率，看看下面思路

这是两年前统计数据，现在可能有更新，大家主要借鉴其思路：

通过这个数据，我们可以得出安卓主流分辨率720X1280，1080X1920；苹果是750X1334，640X1136

那么只要我们弹窗能在640X1136下显示完整，在其他尺寸上应该都没有问题。

如上图，市面上手机主流分辨率最小的是640X1136px,只要保证弹窗在这个尺寸显示正常

其他尺寸也就不会有问题。根据以往经验，弹窗宽度640px是足够有余的。高度上以iPhone为例

去掉系统顶部和底部导航条的高度后，可以得出：1334 - 128(导航栏+状态栏) - 98px(底部导航栏高度) = 1108px；

保证弹窗高度在这个范围内显示完整即可。

作者寄语：打好基础，才能走得更远…