服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

按钮边框用3px好还是5px好?

日期: 来源:ArdenDesign收集编辑:小昱被占用了


作为交互,偶尔在团队人力短缺的时候也被要求向后补位,做一些简单的视觉。然而每次做视觉的时候我都会感到有些难受。原因在于我总是被要求解释一些像素级问题,比如,间距多2px会不会好一点、透明度为什么是70%而不是50%,诸如此类...正巧本周和一位好友聊天时,聊到了前谷歌首席设计师离职时写下的一篇博客,里面的一个段落可以表达我面对这种问题时的内心感受:


...当一家公司里挤满了工程师时,它就会求助于工程来解决问题。将每个决策简化为一个简单的逻辑问题。消除所有主观性,只需查看数据即可...这些数据最终会成为每一个决策的支柱,使公司陷入瘫痪,无法做出任何大胆的设计决策。谷歌的一个团队确实无法在两种蓝色之间做出决定,所以他们正在测试每种蓝色之间的41种‍色调,看看哪一种表现更好。而我最近就边框3、4还是5px宽进行了辩论,并被要求证明我的观点。我不能在这样的环境下工作。我已经厌倦了辩论如此微小的设计决定。世界上还有更多令人兴奋的设计问题需要解决。
全文阅读:
https://stopdesign.com/archive/2009/03/20/goodbye-google.html


可以看出证明或者纠结这样的像素级问题无论对于哪个阶段的设计师来说都是疲惫且无奈的。



是2px的问题吗?


被论文折磨过的朋友们应该很熟悉写论文的流程中第一个难过的关卡就是,需要论证“这个问题是个问题”。这句绕口令解释起来很简单,就是我们不需要验证“保温杯的美观程度对保温功能的影响”,因为这不是一个问题。反映到设计工作中,被要求证明“间距多2px更好”和“边框多2px更好”时,我们想要论证的是什么问题呢?

我们常在做设计的过程中,随着设计得越来越深入,越来越细节,视线逐渐由宏观变得越来越微观。可能这个需求目标是“在图文信息流中增加一个账号关注模块”:



这种需求目标下,“账号的间距多2px还是少2px”会对账号关注率产生影响吗?我相信大多数人的答案都是否定的,即使公司人傻钱多非得做实验争个2px带来的收益,这2px带来的收益会有多少呢?能占优化推荐算法带来的收益百分几或千分几吗?我们还值得花这些人力成本和时间成本去验证吗?


上述举例的目标和问题是产品向的,如果说我们换成一个设计向的。假设现在团队觉得我们的推荐算法已经优化到天花板了,但是推荐账号关注率仍然上不去,所以想要从设计层面解决问题。

那么此时,关注按钮的边框用3px还是5px关键也不在于这个数字,而是什么样的设计能让「关注」在这个模块里有更高的区分度,视觉上更突出。毫无疑问,单从边框粗细上来说5px肯定好于3px,从按钮底色上来说红色肯定好于灰色,按钮字号上来说更大的肯定好于更小的。这些都是根本不需要实验就可以得到的结论。而真正的问题是什么呢?


如果不克制,推荐账号就可以设计得无限吸引眼球,关注按钮又红又大,一方面影响了图文信息流的消费,一方面图文信息的业务也不干了,也会要求图文放大再放大,评论点赞再大、再红、最好来个动效。这样五颜六色五花八门的视觉效果,是产品想要的吗?显然不是,所以规范和组件的作用就体现出来了,它帮助我们从全局的视角去定义内容和行动的优先级,高优内容如何展现,高优行动如何展现,其他的普通内容与行动如何展现。交互的工作之一就是思考与梳理什么的场景下什么是高优的。也因为有了规范,所以「关注按钮边框用3px还是5px」也不是一个问题,问题是「在消费图文信息的场景下,关注推荐账号是否是高优/推荐行动」,如果是,那就用规范里的强化btn去展现,如果不是(显然不是),那就用规范里的基础btn去展现,没必要去纠结这2px。



如果到了这一步,需求方还是觉得这样的按钮不行,没有达成他们提高推荐账号关注率的目标。那基本可以确认问题在于产品认为现有的按钮组件在图文信息流里区分度不明显。这时候我们要纠结的也不是3px和5px的问题了,而是组件中的按钮样式需不需要做全局性的设计优化。


那么做组件的朋友可能就要问了,如果我被挑战组件里的按钮边框是3px好还是5px好,我该怎么办呢?这可以从实用性和美观性两个角度来回答。

从实用性角度,你可以把目前产品所有按钮的典型使用场景都拉出来,代入3px和5px后,去感受下哪个数值在各个场景下都可用(有足够的区分度、可感知是个按钮、不会出现蓝底红字这种违反科学原理折磨晶状体的情况)。


美观性这个角度就很难解释了。当然你可以从一些已被验证过的理论(例如格式塔)来陈述怎么做是美的。但这些多是方法,如何验证“美”,“美”是否可以被量化,这个问题至今仍在探索。也有许多学者已有研究,感兴趣的朋友可以去b站听听复旦大学王德峰老师关于艺术哲学与审美问题的公开课。我浅谈一下我的部分理解:美是可以被训化的。更多时候我们都是先被动地接收了“什么是美”(可能是影视作品、新闻报道、产品发布会...),才会在面对一些视觉表达时输出自己的判断“美”或“不美”。举个例子,唐朝推崇“以胖为美”,所以大家都觉得胖好看;现代鼓吹瘦为美,所以大家都觉得瘦好看。早几十年,明星都是方圆脸,所以大家都觉得脸方一点圆一点大气好看,后来主流媒体又在营销某些V脸明星的美貌,所以风向又变成了小脸尖下巴好看。我们的文化背景下,复杂也是美的(例如东北花棉袄,复杂的祥云图腾,陶瓷纹饰),因为从小就在复杂的信息过载的环境下长大,所以我们对于复杂信息的接受度比外国人要高很多,最直接的体现就是我们的购物软件首页,五花八门应有尽有,大家用起来也觉得挺方便,而国外的软件就会分门别类,每个类目下信息和功能都尽量展现得简单。这几年在苹果设计(以及其他以简为美的品牌)的强势输出和营销下,我们逐渐被“驯化”为了以简为美,所以设计趋势才逐步趋向于简单。视觉如此交互也是如此,我们之所以需要有规范,也是为了“训化”用户后,让用户不加思考就可以知道什么功能会出现在哪里,不用学习就知道要怎么使用。“美”或许是被外界的主观输出“驯化”后,我们作出的自认为客观的判断。回到2px的问题上,如果目标是提升“美感”,在论证按钮组件是3px美还是5px美的时候,或许强势的营销和频繁的曝光会成为观点的有效辅助。但如果目标是提升数据,讲到这里你应该能发现大多数情况是无法用外界的主观美学去解决产品的客观问题的,因此纠结2px带来的美感提升从而带动数据提升也是有点强“美”所难。



关注真正的问题吧!


虽然上文里讲了很多如何应对“2px”问题的方法,但我其实更希望产品和设计人员能把更多的时间和精力放在真正的问题上。用户不在你的平台购买商品是因为你的商品之间设计的间距不够大吗?可能更多是因为优惠信息不明显、优惠力度不够、物流慢、售后差吧?用户不来你的平台观看内容互动评论是因为图片太小字太大吗?可能有点联系,但会不会是我们没有把发表工具做好导致内容局限无法适配多图大图,会不会是缺少内容曝光渠道导致用户无处消费,会不会是没有创作者上升通道指引使得头部一潭死水腰底部的努力与才华无处施展?怎么做出和品牌契合的等级体系呢?怎么在不影响视频消费的前提下融入直播预约呢?如何优化内容创作工具的使用体验呢?有如此多2px外的设计问题值得我们去纠结,我们为什么一定要把目光死死地盯在像素之间呢?


开头提到的2009年谷歌针对41种蓝色做实验的后续是,在2016年的时候,谷歌又针对链接色蓝改黑做了一次AB实验:




而在这期间,由于安卓设计原则频繁改动,甚至谷歌自己的内部团队无法遵守这些朝令夕改的“设计原则”,移动端应用设计逐渐只为iOS设计然后复制到安卓...


相关阅读

  • 评审会提效-给产品经理的一点建议

  • 随着羊群人数的不断增加,使得大部分同事改成居家办公和线上会议。线上会议的特点不用提前抢会议,不用担心会议时长,顶着40℃的高烧,听者需求评审会,也不知道烧了多久,睡了多久,会议
  • Android Weekly #38 :Android 13 正式发布

  • Tips : 由于微信公众号外链限制,大部分文章链接都无法直接访问,推荐大家订阅 NewsLetter 来获得更好的阅读体验,或者访问网页端或者知乎专栏 (点击原文即可)技术文章过去一周 A
  • 大会报告学习:与经济相关的重要表述

  • 特别声明本公号坚持第三方独立研究平台的市场定位,积极响应并贯彻国家政策导向,助力国家高质量发展战略,致力于向读者传递正能量,分享前沿君团队及市场优质研究成果,搭建互动交流
  • 今年最后一篇 | 我年赚100万的真实经验分享!

  • 大家好,我是高鹏。临近春节,北京前些天却突然下了几场雪。昨天偷得半日闲,去北面河边溜达了一圈。河面居然没有结冰,让我很惊讶。本以为这个时间不会看到河水。不过风打在脸上还
  • 引用到底占不占用内存空间(总第449期)

  • 引用到底占不占用内存空间,可能我们之前还真没有研究过这个问题,大家也可能会认为这个问题不重要,但是如果你能把它搞清楚,对于理解其他知识点还是非常有帮助的。学到的知识未见
  • 《深度学习入门课程》中安装环境的方法

  • 录制的深度学习入门课程中,有一些购买课程的小伙伴说,在安装完Tensforflow和Keras后,在Jupyter下加载tensorflow和keras后提示:No module named tensorflow和No module Keras,虽
  • 分清优先级是头等大事

  • 为什么有的人工作几年就有一番成就,还能同时兼顾家庭和兴趣?而有的人每天忙忙碌碌,勤勤恳恳,却说不清自己这一年忙了些什么、收获了什么,瞎忙成了很多人的生活常态。时间是我们最
  • 抖音做不好,老板的锅

  • “得到”开抖音号了,直播间平均在线30-50人。直播销量越来越差,问题到底出在哪里?罗振宇老师,您好。我是罗辑思维和得到的忠实用户、受益者。我想对“得到”这个抖音号的运营,贡
  • 091天 传统老板的4大死穴

  • 绝大多数人的成功,是时代和趋势浪潮的成功,是命运的成功。跟个人的能力几乎关系不大。这个观点,很难听,但是很真实。这个原因占了80%,剩下20%才是人为。谁为?老板为。所以,出去80%

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

  • 按钮边框用3px好还是5px好?

  • 作为交互,偶尔在团队人力短缺的时候也被要求向后补位,做一些简单的视觉。然而每次做视觉的时候我都会感到有些难受。原因在于我总是被要求解释一些像素级问题,比如,间距多2px会
  • 长文设计 · 找与读的研究

  • 前言在日常的生活工作中,时常能看到很长的文字,比如协议、规则说明、教程,用户经常很难找到想看的内容,读起来也很吃力,有没有更好的形式呢?快手商业化中有众多的业务线,每条业务线
  • 动效设计必备的理论知识,改善你的UI/UX设计!

  • 大家好,今天为大家分享的是「动效设计」。和听觉语言、视觉语言一样,动作也是语言的一种,可以在有限的空间内传递更多信息,轻松传达静态元素难以传达的内容。现实生活中没有绝对
  • “桌面提效”手段:从小组件说开去

  • 最近比较懒,iphone14发布了以后我也一直没写什么东西,所以今天我们以“小组件”作为一条线,好好聊聊PC、移动端这么多件和提效相关的动作。起源于90年代1.开端:苹果公司的“桌面
  • 百度直播丨塑造亲和力的直播间虚拟助理形象

  • 写在前面什么是一个人的形象,不仅仅是一个人外在“形与貌”的体现,也是一个人内在“心与神”的部分体现,是外在硬件条件和内在软件因素融合在一起所呈现出来的状态;本文将带你探
  • ⚠️ 本内容仅作参考,不能代替医疗诊断和建议,如有不适请尽快就医。一、预防及防护措施1.