半岛综合体育登录入口设计师在实际工作中遇到的12个常用问题解析其实，两种图标都挺好。线性图标与面性图标各有优势，其中线性图标较为精致，从视觉角度上更具有 美感，而面性图标更为饱满厚实，视觉上相对而言 会更聚焦。

　　根据资料显示，无论是线性图标还是面性图标，图 标的类型对用户查找的正确率无显著影响，影响用 户识别正确率的还是图标的轮廓。但当页面中存在 多个图标时，面性图标的查找速度则会显著快于线%，且用户更容易记住，这也是为什么大 部分工具型应用都采用面性图标的原因。

　　当页面图标较为集中时，采用面性图标，识别效率 会更快，体验更好。当页面信息 功能图标时，采 用线性图标为佳，在保留设计美感的同时，又不用 担心干扰到用户的阅读信息流本身。

　　从上图可见，看到的信息越多，记忆精准度越低。 其中3-4位信息，最容易记忆。如常用的记电线三到四个数字阵 列分组的方式记忆，更不容易遗忘。因此在大多数 APP里，每列信息图标内不超过4个，是养成用户 心智的最佳方式。最典型的案例有支付宝首页的四 个图标：扫一扫、付钱、收钱及卡包四个入口

　　小建议：在设计信息分组时，每组信息尽可能做减法，最多 不要超过4条。如果因实际需要超出，可考虑用每 组3-4个，再重新归类分组，阵列3x4样式即可。

　　纯黑与纯白颜色的强对比反差，会对视网膜形成强 刺激，更优先被大脑处理。因此小部分标题使用较 黑的颜色，适当吸引用户注意力是OK的。但大面积 使用纯黑，则会过度刺激到视网膜，引起眼花，造 成眼部疲劳，降低阅读效率。所以在正文或者文字 较多的字段中，不建议使用过于黑的颜色，使用一 些偏蓝灰的颜色，阅读体验会更好

　　答：阴影颜色=按钮颜色的Alpha50%，x=0, y= 按钮高度的20%，模糊值=按钮高度的50°/。，扩展 =按钮高度的-15%，高级又简单，完美！

　　无论是美感还是数据上，加阴影的高级按钮都会好 于没有阴影的按钮。主要是因为在认知里，真实按 钮的阴影能让用户知道这里可以往下按。所以UI设 计中，有阴影的按钮视觉上也会延续这一心智，引 导用户完成点击。但需注意的是阴影不可太强，避 免低级暄宾夺主。不过只用记住以上公式，就能很 轻松的掌握住高级感。另外除了阴影，还可尝试添 加圆角跟微渐变，如以下示例，这样会显得更精致

　　小建议：信息按钮密度较高的页面，需慎重添加阴影，会影 响页面效率。仅建议在一些较为聚焦的场景中增加 阴影，如引导性较强的登录注册、确认提交等状态

　　给大家解释一下，首先设计稿用2倍国内一定最方 便，大家都用的2倍，协作交付修改更为方便。其 次2倍在绘制Ipx像素的描边及3px的图标细节的时 候能对齐像素点，这样的稿子会更精致。哪怕直接 导图也会足够清晰，足以日常配图使用。另外为什 么是iPhoneX而不是iPhone8，因为目前刘海屏 已是主流，设计稿裁切容易加图难，长点总比短点 好。iPhoneX(750*1624)的尺寸往下裁切就能得到 iPhone8(750x1334)，而往上等比放大就能得到 iPhoneXRS艮iPhoneXS MAX的 1242*2688，包括 安卓刘海屏的主流尺寸1080*2160,裁切后又能 Get到最经典的1080*1920分辨率，适配各种机型 妥妥的。最后还有点，iPhoneX的信息密度更低设 计稿更美观，大部分设计Leader也都是用的X或者 安卓刘海屏，汇报看稿更方便，加薪升职妥妥的。

　　图片拖入PS内，同时按住Command+Shift+alt+s 快捷键，预设下选择PNG-8，颜色254改为6，PS 算法将自动均衡图片里面的所有色值，输出6位颜 色板。再在颜色表里选择存储色表，打幵色板-载 入色板，你就能得到一组精致的色板啦！有趣的是 通过算法调和的色值，会很精致，搭配不会显得很 脏还能很协调，与你所定义的情绪版也会更为贴切〜

　　其实当图标的宽高不一致时，用图中网格约束的方法 调整，持续调整图标面积区域，直到保持一致即可

　　面积统一后，虽然图标宽高比不一样，但看起来整 套图标大小会一致，重心更加平衡。因此要想让图 标系统看起来更协调，更多的是需要耐心及不断尝 试，直到最后整套图标的重心一致。还有需注意的 是，圆形区域较直线区域通常需要设计的突出一些〜 如常见的数字字体，仔细观察数字〇的底端，会要比 1突出一丟丟，这样也是为了调整视差导致的不平衡

　　小建议：在绘制图标时，可以先把图标网格框架搭建起来， 再在框架内去进行图标绘制。这样效率会更高，调 整图标的大小跟风格也更方便，省心又省力〜〜

　　其实众所周知，Din是个很好看的数字字体，但可 惜它是收费的，易侵权被告。因此今天推荐5款小 编很喜欢，而且还可免费商用的数字字体给大家

　　1、 如果是新需求点，需重点交代背景以及项目核心 价值点，这样能让你的Leader及团队中其他成员 快熟了解清楚这个项目意义，包括判断后续是否需 要横向打通协作，保证整个系统的统一性及稳定性

　　2、 进行中的项目，重点交代项目进度及风险点， 包括后续需投入的资源安排就行，让你的Leader及 时知悉目前整个项目的所占用资源大小，做好把控

　　3、 已完成的项目就不要占大篇幅了，写下Review 即可，把项目中收获的经验跟方法简单分享给团队

　　4、 切记不要写流水账，这样不但毫无意义而且看 不懂浪费大家时间，团队Leader收到你的周报汇总 起来也会发现特别的碎，毫无重点，这点是大忌。

　　5、 周报里不要用太多的语气助词或者特殊符号， 比如”哦! ”啊! ”嗯! ”等之类的。重点需言语精简，莫 写废话，用最清晰的句子表达最完整的观念即可。

　　PS:写完后可以试着多念几遍，直到清晰易懂为止 这样别人看你周报也舒适，对你的好感度也会增加

　　首先较为明确的是，规范并不是死板一成不变 的，规范存在的意义是为了帮助整个产品端建立系 统化、标准化的视觉语言。实际上业务是需要发展 的，已定的规范不一定能满足新业务的诉求，因此 这个时候反而需要打破规范推动新的形式落地提效

　　1、 先系统评估是否需要花成本更新规范。更新后的 样式，对现有系统标准是否产生破坏，未来能否覆 盖更广的场景，降低不同项目重复造轮子的成本。

　　2、 新规范版本号、迭代说明及接口人均需在文档 内进行标注，规范存放位置与之前保持一致，方便 团队成员去更新获取，同步更新设计稿。参考如： 手机QQ设计规范V1.8.8 . Date:2019/12/03 . Jenny

　　3、 规范的版本迭代最好跟随项目或者固定周期化 维护。新规范发布后，需邮件周知设计团队全员及 组件核心幵发同学，同步更新设计稿及内部组件库

　　小锦囊：小编搜集了一些腾讯、百度、网易等知名产品的规范 文档，扫描本文幵头的二维码，关注后台回复”设计 规范”就可下载啦。

　　答：对于那些在前台业务线的设计师而言，不用急 着尝鲜，实际上，精通Sketch跟Photoshop就 能够解决掉日常95%的设计需求啦，剩下的5%， 可以交接给团队中擅长工具的设计师。对业务 线而言，深挖手里的核心项目，想办法花精力把业 务线内的产品做深做透，拿到实际的业务价值会比 研究新工具落地更重要。等新工具发展很成熟了， 再推动整条业务线去使用，相信也不会太迟。

　　而对于那些在设计中台或者负责产品基础体验的同 学，小编是很鼓励去尝试体验新工具的。因为推动 新工具提升设计团队的效率，这本来就是基础中台 设计团队的本职。而且像AdobeXD、Zeplin、 Figma、Affinity Designer也确实有很多非常优秀 的功能点，要是研究中发现这里某个工具能满足团 队日常设计需求的同时，还能提效不少。那么完全 可以组织分享，安排学习培训，推动新工具在整个 设计团队落地，帮助赋能整个团队提升效率的。

　　小锦囊：平时研究一些新鲜工具，对幵阔设计视野，引领团 队进步会很有帮助。不过别忘了，研究工具不是最 终目的，最终目的还是通过工具设计提效价值落地〜

　　大家都知道，微信的头像是方的，QQ的头像是 圆的，为什么都是聊天工具，却使用着不同的表现 手法？到底哪个做对了哪个错了呢？

　　其实都没错，圆的跟方的带来的差异更多的是心理 上的暗示与现实中事物的映射。因此头像样式的差 异，主要也还是与产品的心智定位有关。通常圆形 的头像，往往展现出来的情绪，会更为积极，幵放 度更高，生态度更广。所以QQ使用圆头像，也是符 合其主体定位的，圆润的头像更能给用户传递一种 乐观、积极、年轻的态度，使得整个产品形态更具 有活力，带来更为丰富的体验。因此对于一些偏泛 娱乐或者是社区资讯年轻用户居多的产品，使用圆 润的头像，往往用户的接受度更高。

　　方形头像相对于原型头像，更为稳重踏实，注重私 密性及稳定性。微信之所以使用方形头像，也更多 的是考虑到微信的站位是以人为本，整个工具也是 围绕着以人为中心去扩散自己的圈子，主打熟人社 交。因此从微信视角而言，鼓励大家使用自己的真 实照片作为微信的头像也是其一直以来所倡导的半岛BOB官方网站。 而大家平时拍摄的照片，本身就是正方形的，所以 正方形的头像也能完整的展示更多的细节，因此微 信的头像，也一直延续下来了正方形。因此在一些 幵放性并没有那么高，更突出严谨、细节及私密性 的产品中，使用正方形的头像，更能满足用户对于 隐私保护的需求。

　　小锦囊：不同的样式一定会给用户带来不同的情绪体验，产 品的核心主张及用户定位，将影响到设计师最终对 于视觉手感的拿捏及把控。所以大家平时在做产品 设计也好，做视觉设计也好，动手前先别慌着做， 仔细分析清楚，你所服务的产品定位是什么，你最 终判断的设计主张是什么。想清楚后再动手，所生 产的设计，才能做到有依有据。