也不知道从什么时候开始,我们给颜色定了性
不知道大家有没有听过这么一个故事:某家餐厅销量一直不太好,老板究其原因也没有查明白到底是为啥,明明选址在闹市区,价格也很实惠,就是卖不出去;后来老板请了个“大师”帮忙一探究竟,大师说你家盘子颜色不行,换成橙色保准牛X;老板立马认购了一批橙色盘子,从那以后以后这家餐厅火爆了,王境泽都觉着香的不行…
听完这个故事,自此我幼小的心灵里把橙色和食欲划了等号。这个烙印直到我从业前几年还一直这么觉着。同时间段,在9年义务教育的美术课本上,我得到了有生以来第一次对色彩这门学问的细致输入,了解到了各种颜色对应的含义与情绪:
这种色彩与情绪的映射关系在我的脑袋里根深蒂固 / 无法磨灭,直到有那么一场面试或者汇报,面试官/老板问我,“为什么你要选择这个颜色作为品牌色呢?”
面对着一手塑造出来的社交应用,我解释到:“因为红色代表着热闹,这个颜色会赋予这款产品热闹的氛围”。坦诚的讲,这个解释自信但空洞,颜色本身并无好坏和指向,只看你用在了什么地方,不讲究场景就别轻易定性。
这也侧面反映出来惯性思维的不断吞噬着你我的思路,过往的“经验”可以让人习以为常,也可以让人尴尬不已,取决于是否洞察的到。如果抛弃惯性思维,到底如何去定义一款产品的主色呢?

说实话选取一个颜色作为品牌色是一个战略决策过程,一般来说行业里一定存在一种主流颜色,像旅游行业的携程/去哪儿和途牛,还有以淘宝为代表的电商行业通常是喜庆的大红大橙。
显而易见基于这个逻辑下,有3个做法,一条路是顺势而为,一条是逆向而去,还有一条是另辟蹊径。这块的选择一定程度上并不是设计师可以决定的,需要结合整个业务的方向去判断;在旅游行业里马蜂窝选择了逆向而去,在直播行业里抖音就选择了另辟蹊径。
我们试着揣测下抖音和马蜂窝的想法,在产品的定位和策略的打法上,他们更注重的是差异化,走反方向的路突出品牌,试图在用户的心里站得住。通过这个例子你或许会发现,黑色未必死气沉沉,ta也可以色彩斑斓;黄色未必只象征尊贵,ta也可以代表青春和希望;颜色没有偏向,只看使用在什么场景上。
主色的选择更需要贴合业务战略的发展,也更多的偏向于主观。给业务提供思路和方向,判断不好业务方向的时候,多提供思路帮助其更好的匹配颜色。
以往的面试里,我这种好事的面试官就特别喜欢问侯选人一个问题:“一个色相里有那么多色号,为什么你定了这个色号作为品牌色?”大部分候选人乍一听都是面露难色,心里大概想着这人是个傻X吧,能问这种问题,哈哈哈哈哈哈;废话不多说,我来简单分享下我的方法:
首先以黑白两色(#000000-#FFFFFF)作为起始点设置10个梯度,然后把第一个模块定义的色相扔进去,只需要调整HSB中的H就可以,这样一顿操作下来你就得到了一个完整的色彩序列:
第二步,基于序列主观调整下颜色,确定主色的同时确保其在黑白2种背景上对比度大于4.5:1(wcag色彩可用性标准),理论上来讲梯度中间是最合适的,饱和和亮度足够就可以。
上图是我用到的色彩可用性测试工具-color review(https://color.review/)
当你准备好了以上所有工作,最后一步就是拓展色系了;这里采用负能量补给站小商店的品牌色“叛逆橙” #FF774A(H15 S71 B100) 作为主色并结合下google的方法开始拓展色系。
首先 - 确认同色系辅助色:我们将主色的色相加减 30° (谷歌是以10为梯度,但色相变化不大,为了效果我们以3倍作为最小单位)获得2个新颜色,即同色系辅助色。
其次 - 确认对比色辅助色,将主色的色相加上 180° 获得其互补色,即对比色系辅助色。为了和主色的类似色对应,取互补色的同类色(色相加减 15°)和类似色(色相加减 30°)。从中选取需要的颜色作为最终的对比色系辅助色。
根据色彩需求取同类色2和类似色1作为最终的对比色系辅助色,这样,我们得到了主色和四个辅助色;同理你可以推理出无色彩倾向的中性色系(这里就不展开赘述)。
最后你可以通过编码的方式,赋予每个颜色一个token(密钥),方便团队的配合和使用。
以上就是我在选取色彩的大概思路,市面上也有很多讲颜色的好文,分享大家一波:
Ant Design 色板生成算法演进之路 - https://zhuanlan.zhihu.com/p/32422584
设计系统色彩 -https://uxplanet.org/designing-systematic-colors-b5d2605b15c
随着工作经验/时长的不多增加,我们往往会对事物的存在习以为常,思维的惯性会困住我们追根溯源的想法,但需求和场景是千变万化的,所有的方法也都针对的是通用场景,标准化的解决方案未必适用你当下的处境;试着在熟悉的环境用敏锐的洞察和科学的方法突围也许是最好的办法。
但需求和场景千变万化,实际操作不能那么程式化,最终还是要回归到具体使用场景去定义,文章里面的规则和公式只是指导,在必要的时候可以打破。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
你一定知道“摩尔定理”,对许多IT人而言那是这个行业最基础法则,然而,在我看来,另一个和摩尔定理齐名的“梅特卡夫定律”被严重地低估了。
和摩尔定理指出硬件性能进化逻辑不同,“梅特卡夫定律”在业务层面对互联网时代的发展规律进行了高度概括的总结,这个抽象总结在过去、现在和未来都会继续指引互联网的发展方向。
“梅特卡夫定律”的表述非常简单——一个网络的价值和这个网络节点数的平方成正比,用公式表述就是:V=K×N²,其中V代表一个网络的价值,N代表这个网络的节点数,K代表价值系数。
那么,这个看似极其简单的公式为什么会受到互联网人如此高度的推崇呢?
在回答这个问题之前,我们还是简单来了解一下“奇人”梅特卡夫:
罗伯特·梅特卡夫1946年出生于纽约布鲁克林,年轻时的梅特卡夫是一个标准的学霸,在麻省理工获得了工程学和管理学的双学位,之后又在哈佛获得了博士学位,毕业后他迅速加入了当时的科技巨头施乐。
在施乐工作期间,他发明了当今局域网使用最广泛的协议之一——以太网,这让他年纪轻轻就一跃成为“计算机先驱”。
△ 梅特卡夫于1973年绘制的以太网草图
然而年轻的梅特卡夫并没有躺在这一成果上坐吃山空,而是在人生33岁的时候决定把自己掌握的技术转变成商业产品,1979年,他创办了著名的3Com公司。
3Com公司是做什么呢?通讯基础设施,你可以理解为美国的华为(事实上3Com后来还和华为成立过合资公司)。在管理3Com公司销售团队的时候,梅特卡夫发现当时客户对他们的主力网卡兴趣不大,这时候他展示了自己作为技术人超强的逻辑说服能力,他亲自制作了一张幻灯片,画了一张图,列出了网络价值和成本之间的关系。
他想通过这张简单的图清楚地说服客户——买网卡的成本随着时间是线性增长的(N),但网卡构成的网络价值则是呈指数级增长的(N²)。言外之意就是你们现在买网卡会觉得不划算,但随着买的人越来越多,它的回报将是指数级的。
作为3Com公司的头号推销员,梅特卡夫在美国科技界的各个场合都在宣传他的这一理念,这引起了一位叫乔治·吉尔德的科技专栏作者的注意,吉尔德长期在科技界浸润,直觉告诉他这页其貌不扬的PPT里可能藏着一个极具价值的判断。
1993年,乔治·吉尔德在《福布斯》杂志上系统地阐述了梅特卡夫的关于网络价值指数增长的理念,即幻灯片里那条指数增长的曲线,并把它命名为“梅特卡夫定律”。
当时美国互联网刚刚萌芽,各类网站都在快速增长,吉尔德的总结让“梅特卡夫定律”被科技界和互联网圈逐渐接受。不久之后,美国联邦通信委员会主席的里德·洪特(Reed E. Hundt)说:“摩尔定律和梅特卡夫定律”为我们提供了理解互联网的最佳角度。
而之后马克·安德森创立了Netscape,发布了网景浏览器,用户数一路狂奔,安德森在总结网景的飞速发展时,称“梅特卡夫定律是一盏明灯”。随着互联网在美国强势崛起,这个起初描述硬件网络价值的定律被外延到了整个互联网领域。
无数网站的创始人将梅特卡夫定律写进了他们的商业计划书,它在一定程度上成为无数互联网创业者和从业者的信念灯塔。
△ 3COM公司曾用于销售推广的幻灯片(梅特卡夫展示原稿)
事实上,“梅特卡夫定律”在数学上是有意义的,一个N个节点的网络,它的总连接数为N(N-1),当N足够大,它接近于N²,如果把网络里的连接数直接看成是网络的价值衡量指标,则“梅特卡夫定律”是一个完全成立的等式。
那么,在现实中是否是真的这样呢?
2013年,梅特卡夫本人在《IEEE计算机》上发表了一篇文章,用Facebook从10年的实际数据证明了自己的定律符合Facebook现实中的成长轨迹。
有趣的是,同样在2013年,来自中国科学院的三位作者张兴洲、刘景洁、徐志伟也在著名的《计算机科学与技术》杂志上也发表了一篇名为《Tencent and Facebook Data Validate Metcalfe’s Law》的论文。论文中用腾讯和Facebook两个公司的数据验证了它们的月活数据和它们各自的估值(市值)是符合“梅特卡夫定律”的。
正是由于“梅特卡夫定律”的存在,让无数互联网人对规模和增长前仆后继,因为他们深刻地理解,规模能带来指数级的回报,这一回报通常会超出正常的预期。
事实上,梅特卡夫定律的确在解释无数互联网案例时都有着极强的说服力,举一个简单的例子:为什么5G成为科技竞争博弈中关键中的关键?
原因是其背后指数级的价值——第一代互联网接入的PC存量设备数大约是10亿台,第二代移动互联网接入的智能手机存量设备数大约为30亿台,而5G成熟之后的IoT物联网时代,接入的数据保守估计将达到500亿台,根据梅特卡夫定律由此产生的指数级价值是极其惊人的,某种意义上,这也是美国一定要封杀华为背后的重要逻辑。
这些问题都可以隐约在梅特卡夫定律中找到答案。
尽管“梅特卡夫定律”对互联网的影响巨大,但业界依然对这个定理本身提出了不同的看法。
2006年7月一位名为鲍勃·布里斯科的研究员就在《IEEE》上发表了一篇态度鲜明的文章——《梅特卡夫定律是错误的》,他旗帜鲜明地指出梅特卡夫定律根本缺陷在于对网络中的所有连接都赋予了相同的价值。
“梅特卡夫定律”其实背后有两个隐藏的假设——第一,网络的机制取决于网络之间互相连接数的价值之和;第二,每一个连接的价值是相同的。
布里斯科的这篇文章并没有质疑第一个假设,而是质疑了第二个假设,在他看来,网络中的连接的价值并不是同等重要的,连接也分强连接和弱连接,弱连接的价值显然就没有强连接那么大。甚至他还引用了作家梭罗《瓦尔登湖》里的一段话作为论据——“我们急于建造从缅因州到德克萨斯州的磁电报,但是缅因州和得克萨斯州之间和其他人口更多的州相比可能没有什么重要的交流。”
没错,上述对梅特卡夫定律质疑从理论的角度是合理的,从现实中观察,我们也看到了和梅特卡夫定律相悖的现实,我随便举一个例子:一所精英大学本来一年招1000人,如果它扩充到2000人,它的价值和影响力会不会变成原来的4倍呢?
大概率不会,这是很容易理解的,因为这个实际例子和梅特卡夫定律的理想设定显然有不相符的地方——
很显然,梅特卡夫定律在具体的情况中并不能直接生搬套用,但我们又的确观察到了腾讯和Facebook的数据完美地证实了梅特卡夫定律。
那么,应该如何理解这种悖论呢?
在我看来,Facebook人数的增多,很显然连接的质量是不同的,同时新加入的人也不可能和所有人建立连接,但我们可能忽略了规模带来的其他外部效应——比如人数足够多之后的边际成本降低,再比如人数足够多之后的数据积累也会提高一个量级等。
所以,“梅特卡夫定律”更多的是对一种现象的抽象,直接在任何互联网产品中生搬硬套都是教条的。正如经济学的基础建立在“理性人”这一假设之上,但实际中人却不总是理性的,事实上对于“理性人”假设的质疑诞生了许多有价值的新经济理论。
有趣的是,鲍勃·布里斯科在论述“梅特卡夫定律”可能漏洞的同时,提出了一个新的描述网络价值和网络成员的法则——齐普夫法则。
它以语言学家齐普夫命名,齐普夫在20世纪早期发现英文中词频的规律——最常用的”The”占所有英文文本的7%,第二常用的单词”of”占比则3.5%,第三位的”and”占比为2.8%…….符合7%的1 倍、1 / 2倍、1 / 3倍……这一规律。
这一规律用数学公式抽象为V=k*n log(n),既价值和数量呈对数关系。
齐普夫法则是描述价值和数量更温和的模型,举个例子——假如一个网络10万人的时候价值100万,如果增加到20万人,根据梅特卡夫定律,它的价值增长到400万,但根据齐普夫法则的计算,它的价值则只增长到210万,注意,210万依然比200万这一线性增长的价值要更高。
所以,尽管鲍勃·布里斯科指出了“梅特卡夫定律”可能存在的缺陷,但他却承认一个网络的价值和成员之间的关系并不是线性增长的,齐普夫法则也是一个非线性增长的模型。
这两个模型都指向了一个原则——网络的连接规模的提升带来的回报是超预期的。
那么现实世界中哪个模型是对呢?或许这个问题并没有答案,但它们却从不同的层面给了我们理解这个真实世界的角度。
这正是商业世界有趣的地方,和严格的数学、物理学不同,商业世界的规律的适用受无数约束条件的控制,我们只能尽可能掌握在大多数情况下都适用的规律,一定要拿出一个反例去反驳一条在大部分场景都普遍适用的商业规律其实没有意义。
所以,总结一下,梅特卡夫定律是对网络指数增长的普遍规律的一种抽象,它告诉我们一个简单的道理——规模的意义比你想象的更加的重要。
作为互联网人,我们需要深刻理解梅特卡夫定律所代表的一种指数级增长逻辑,尽可能建立更多的连接,从而在这个不确定的世界更好地生存。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
从雇佣关系看企业级协作产品的设计理念和原则
今年的新冠疫情突发,让企业级协作产品的赛道热闹了起来。前有钉钉,企业微信,后有飞书带刀入场,其他厂商看了眼红,赶紧行动起来,所以在这片一眼望不到头的草原上,你还能看到百度的如流,美团的大象,网易的popo等等。
如今疫情控制的结果也算喜人,经过大半年的时间的市场锤炼,现在这些个企业协作平台也需要被怀揣着审视的目光来看看接下来要走的路。
按照公司的要求,我在工作中频繁的使用到“钉钉”这款产品,接触的这4年多时间大概也就是企业协作平台的发展史了,我试着总结了一下:
但B端的设计就仅仅是所谓的“效率”么?唯效率的设计就一定好么?
你有没有不想打开钉钉(甚至某一时间想卸载掉)的冲动?阿里巴巴当初推出钉钉这个在线办公协同产品,出发点是为了方便企业内的办公协作,沟通记录、文件资料、流程审批、员工名录等都能有效得到管理,防止丢失并随用随取。
后来味道变了,以“钉一下”为例,发起者可以无限次的对接收者发送信息并以“增强提醒”语音的方式提示。看的出来,这种交互设计本着触达无障碍去做的,但却忘记了设计使用门槛,从而造成了“谁有事谁牛X的局面”,如果沉下心来研究,会发现在这过程里情绪的变化是及其明显的:
企业管理学里有一条著名的学说“峰终定律”(后被广泛应用到用户体验领域里),大概是意思是:“在一段体验的高峰和结尾,体验是愉悦的,那么对整个体验的感受就是愉悦的”。
那么钉钉的这些个机制可能就是峰终定律的反面教材了。每一个企业级协作平台企业都在标榜自己的创新和功能的全面,殊不知这就是典型的通过产品功能机制进行的微观管理,间接加剧雇佣关系的僵持。甚至一定程度上变成了控制…员工和企业的关系我不好说,但这些企业协作平台真真实实的在彼此关系上扫满了盐。
翻看了众多大厂的B端设计原则和设计理念,无一例外,所有的被沉淀下来的“原则”几乎都是“效率”,甚至一提到跟B端相关的设计就永远是“效率!效率!!效率!!!”:
以效率为核心的设计帮助任务流更的完成,就这点无可厚非,我自己也是一名用户体验设计师,过去做企业级应用的核心就是围绕“效率”去做的,始终把用户路径的长短作为我个人无形的KPI,面试跟人吹牛X的时候也是举例说的这些。
然而不同于C,企业协作平台是企业要求员工统一使用的协作产品,为了方便信息集中管控,绝企业员工被迫通过一次学习后逐渐转为不用动脑子的肌肉记忆。B端员工只想要“干完活”,C端的“图新鲜”是发自内心的去找乐子。所以当被强迫完成任务的情况下,大部分情况下是一个伪命题。
通过审视的目光去看当下的设计原则,企业级协作平台经历了起始期的“沟通刚需”和发展期的“功能堆叠”后,未来应该多考虑“员工与组织”/“员工与企业”的大命题,希望是以“桥梁”的姿态出现,以帮助双方更好的完成工作为目标去设计:
这其中有两点需要着重注意:
先说个题外话,过去,我们在求职时期的路径大概率是到某几个招聘网站上挨个填写个人信息/工作经历/获奖情况,但伴随着 OCR技术成熟,一个word/pdf上传,自动识别了所有信息,帮助企业和候选人大幅的解放了劳动力。与之类似的是:日报周报月报,除了工作总结偏脑力劳动需要人工产出之外,工作内容这种条目的列举完全可以帮员工包办了,毕竟钉钉上记录了大量的工作文件和日志。单靠一个周报模版丝毫解决不了问题。
之前跟钉钉的设计师有过情感化设计的交流,对方对情感化的理解更多体现在人文关怀上,特别是在打卡这个功能上,超过几点下班打卡后会有一句暖心的话激励员工。对此我还是保留意见,理智支撑我不许叫这个设计为情感化设计,因为美好的文字和漂亮的图形都只是表象而已,并没有帮助用户解决问题,所以顶多就是图形设计,说的好听点是graphic design。
我理解的情感化,从始至终要以解决用户问题出发,与其有时间画画漂亮的图形,不如去做业务的横向打通,帮助在深夜快点打车回家来的更实在。
总的来说就目前国内像这种B端企业级应用真的还就是处在功能打通的阶段,未来去balance雇佣关系的大局面市场还是很大的,从这个角度来看这个赛道还有的一拼,期待更多的大厂入场来改善僵持的雇佣关系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
转自:站酷
作者:负能量补给站
或这样:在优先考虑所有功能之后,关键利益相关者改变了主意,您必须重新计划所有事情。两种情况都发生在我的团队和同事身上。
功能优先级的成功或失败是因为一件小事,在这里最终处决答案之前,我不会让您感到疑惑。关键因素是选择标准。但是首先是第一件事。让我们看看可能出什么问题,然后我们将讨论减轻这些风险的方法。
产品团队努力做出正确的权衡,并在资源有限的情况下嫁入无数种选择。通常,决策是协作活动的结果,例如点投票,价值对体积画布,MoSCoW,Kano模型等。
尽管这些技术是由不同的人发明的,但它们的工作原理基本上是相同的:团队成员将带有所有功能构想的便笺贴在板上,然后将最有希望的构想入围。打分或投票给这些想法打分,或者根据每个功能的可行性,可取性或创新性沿纵向分布它们。
当您邀请专家参加时,这样的民主表现就非常有用,这些人是内在地知道这个话题的人,或者像丹麦物理学家尼尔斯·玻尔(Niels Bohr)说的那样,“犯了当团队中的每个人都是专家时,票数的分配将表明最佳想法。所有可能在非常紧张的领域犯下的所有错误”。
但说实话:讲习班通常具有办公室政治的味道。例如,一个研讨会可能会吸引对您的建筑不感兴趣的高能干利益相关者,或者您可能必须邀请失去动力并影响整个团队工作的非必要专家。那就是为什么在房间中只有两个或三个可以做出明智决定的人变得如此容易的原因。
并且,作为协调人,您急切希望提出最共识的意见,而当专家的声音与非专家的声音相同时,这就会成为问题。
即使,您有专家参与,他们也可以代表不同的领域和领域。因此,他们将做出不同的选择。如此,即使对于有知识和熟练的人来说,理性思考也不是另一种方式。
人类必须应对许多同时发生的思维过程,并面临180多认知偏见。启动效应就是一个例子:在研讨会之前一个人发生的事情会影响他们在研讨会期间的行为。因此,如何确保专业知识(而不是个人喜好或情感)驱动功能优先级?
之后几乎不可能猜测每个选择背后的原因-除非您以某种方式提前支持理性思考。
商业并非全是娱乐和游戏:团队必须根据数据做出艰难的决定,将自己的异想天开,品味和偏见插入门外。作为促进者,您当然不想根据利益相关者的喜好或当下的感受来做出业务决策,对吗?但是,在许多练习中,“我喜欢这个主意”与“这将帮助我们的公司成长”一样,值得信赖。
优先活动的另一个陷阱是度量系统,例如:
对一个人而言,获得一定数量的选票或特殊计量单位的目的是为了在优先排序过程中平衡意见。但是他们没有考虑有人对现实的看法有何不同,更不用说全球团队的文化差异了。的方面可能对另一个人无关紧要。
例如,如果我听到美国客户说的是“好”而不是“很棒”或“很棒”,那我就知道自己有麻烦了。这意味着他们不太满意。但是“好”是欧洲普遍赞美的表现。投票也如此:S大小的任务对内部高级布局开发人员来说是一回事,而对于市场顾问则意味着另一回事。
而且,现在很多人都精通“设计思维”和“敏捷”,可以下意识地操纵选票或有意利用尺度系统的模糊性来推动自己的想法。
如果团队成员之间的争执失控,您将花费大量时间徒劳,并且无法及时达成共识。严重恶劣的是,辩论最终将导致会议室中潜在的影响力的利益相关者所提倡的想法的被迫同意。那么,如何更好地处理优先级?
在我的一个项目中,我们正在设计一个复杂的解决方案,其中涉及技术,业务流程以及全球数百个人的专业知识。因此,我们不能狭义地定义功能的期望值(例如用户满意或可用),因为它不仅仅与最终用户或界面有关。
我们的团队确定了解决该解决方案中受益的五种利益相关者类型,并且我们提出了一个描述性规模来评估功能。它既考虑了利益相关者的覆盖范围,也考虑了该解决方案可以帮助他们解决的任务的重要性。
当然,我们可以使用1到5的简单比例,其中1代表值,5代表最高值。但这并不能使我们清楚每个功能的价值在现实中意味着什么。从而,在真空中评估项目始终具有挑战性。“低”有关什么?“中等”比例又是什么?公认会出现这样的问题。
同样,我们决定添加真实的描述。代替抽象的“低”,“中”和“高”,我们根据该功能的实现应涉及大量劳动力和金钱来打分。我们知道,可以在一定程度上决定所需工作水平的因素是我们可以自己完成还是仅与第三方一起完成。
结果,数字获得了意义。
后来,我们创建了一个结合了多个特征的书呆子表。这有助于我们检查某个功能是否具有均衡的合理性,可取性和获利能力-简单,是否可以做到,客户是否期望并为企业赚钱。
根据您的项目,条件可能会有所不同。一个项目可能需要您评估潜在的收入和实施工作,而在另一个项目中,您可能必须重点关注易用性,预期的部署工作和估计的维护成本。如何,方法都保持不变:首先,定义基本标准,然后建立可行的量表,最后进行评估。
如何建立这样的规模?从极限开始-最小和最大标记。1(或0)是什么意思?5、10或意味着什么?
当定义了最小和最大标记时(在上面的示例中为1和5),您可以为中间标记(3)然后为其余标记(2和4)写一个描述。这种方法有助于在标记定义之间保持或多或少近似的增量。
在表中排名不同,画布提供了更灵活的表示形式和更独特的获胜者。但是,如果使用模糊的标准,则可能会破坏整个练习。
从到高的标度的主要问题是它们的分类性质。任何想法的作者都不会承认它的价值不高。他们将坚持自己的立场,说服团队成员将便签贴放在“低-低”区域之外的任何位置。另外,您可能会发现所有“局外人”想法都属于实力较弱的利益相关者。
“困难”可能意味着任何事情,但“需要外部专业知识和资源”可以更好地说明这种困难。期望值也不会:“解决已证明的严重痛苦”是一种过滤器,它不会让有人提出没有任何证据支持的想法-无论是用户研究,客户支持票证还是市场分析。
该方法简化了优先级排序,但是以花费一些时间来准备规模,特别是在准备简洁的部门名称上花费了时间。
在使用这类画布时,请注意交通灯的颜色编码。对于最终的输出演示文稿,这可能是一个不错的选择,但是在研讨会中,这将增加偏见,使人们不愿意让自己的选票最终出现在红色区域。
投票是达成共识的快捷方式。匿名时,所有选票均被接受且权重替代。投票授权谦虚的利益相关者,并降低等级障碍。但是,这也掩盖了每个单独选择背后的原因。最大的挑战是,参与者需要以某种方式立即权衡所有可能的标准,并迅速选择(并希望明智地选择)。
在与客户的许多计划会议中,我都加入了经典的点投票,并且常常产生一些决定,我们稍后会完全改变。自然,我想避免双重工作。因此,在一次会议中,我们尝试了增强版,并为具有不同专业知识的人员分配了特定的颜色-绿色代表客户语音的“保持者”,蓝色代表有财务思想的人,红色代表可以评估可行性的技术专家。
首先,这种方法使我们了解了人们在做出选择时可能会想到的想法。其次,我们缩小了获奖者名单。仅有几张便条纸从这三种颜色中获得了票数,并被同时认为对客户有利可图,有价值。
这种方法使我们能够专注于最好的功能,而不会被单方面有前途的项目所干扰。通过经典投票,我们通常会有5至7名决赛选手。多元化的投票显示只有两个或三个符合所有标准的最高创意。
有一种话语可能会破坏优先级:“投票给您最喜欢的功能”,或者改写为“现在选择您喜欢的想法”。这些话打开了主观地狱的大门,并向您的团队发出了幻想和推测的正式邀请。
不要给这些无益的指示,而是要使人们处于理性的情绪中,并帮助他们倾听内在的理性声音。
主观性是人性的一部分。我们不可避免地要做出情感决定,但是有一些方法可以使选择减少一些偏见。主持人无法控制专家头脑中正在发生的事情,但是我们可以尝试使团队成员处于正确的决策状态。我推荐两个基本的东西来简化决策过程:
随意使用这些 优先练习的Miro模板。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
你觉得设计系统重要吗?你了解设计系统吗?让我们一起来深度解析下设计系统,预计阅读时间为15分钟
你觉得设计系统重要吗?那目前手里的设计系统是在灵活运用?还是落灰、摆设?你对设计系统理解有多深?它在你的设计中有多大的用处?节省时间、减少出错率、视觉一致性还是仅仅觉得就应该有个规范?那怎么避免设计系统带来了统一和便利,但同时失去了变化和新鲜感?
设计系统是今年来热门的话题之一,想要带来良好的用户体验,设计系统就是其中重要的一环,那它和设计规范、设计模式、设计语言、设计原则有什么关系?
设计系统用一套连贯组织、相互关联的模式和共享实践以达到数字产品的目的。简单的说就是一系列可重用的组件和它们的使用指导文档,在制作这些组件的过程中会考虑到公司的设计理论和品牌化(颜色,文案,字体等等),所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石和指导。是一种动态的,是需要维护与改进的。
设计模式是一种经常性,可重复使用的解决方案,可用于解决设计问题,我们经常会说解决整个方案我们要运用什么样的设计模式。
设计语言是把设计作为一种“沟通的方式”,用于在特定的场景中进行内容与信息的传递。设计语言可以理解为由品牌基因+设计规范+多场景应用三大要素组成的一套设计应用规范系统。
设计原则可以理解为设计语言中的语法,是构建设计语言系统的起点,用于传达品牌主张或设计理念,它将指引业务设计执行的方向。
比如Airbnb的设计原则可以简单归纳为几点:
设计规范对于设计师来说并不陌生,日常工作中也经常使用。围绕在某种风格或者大型设计项目下形成可视化、数据化的标准,针对相对独立的体系建立的统一遵守条款。统一的设计规范不仅有利于设计师提升效率,同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。
我曾经加入一个设计团队,看到平台风格不统一,当时很自豪很坚定的制定了一套平台设计规范,从色彩体系、文字体系、icon体系、botton体系以及其他的一些UIKIT体系,还有交互方面。当时一心想着有这个规范宝典在手,平台统一性指日可待,没想到这个规范就成了我自己的规范,仅仅是我在自嗨。
为什么已经建立设计规范了,还是没能解决平台统一的问题?这里延伸出另一个问题,为什么其他设计成员不用?协作不起来?是它不够好?我严格按照标准来,为什么推不起来?
那要追溯到设计体系的目的是什么?它的意义何在?
1-建立统一的设计文化体系
2-保证多团队成员共同参与的项目视觉一致性
3-提升品牌调性
4-节省与研发人员的沟通成本
5-将元素组件化,提升设计师和程序员的工作效率
6-可以帮助设计人员有针对性地对视觉元素进行优化和迭代。
7-在用户层方面,对某产品的体验一致性得到落实
8-减少设计出错率
……
整体可以归纳为
规范定义的基础是围绕某种风格或者设计文化。对内统一,一个品牌的设计风格,是要有别于同类竞品的,比如阿里云、腾讯云,他们各自都有自己的品牌调性。在对外上两个品牌是做到了对外区分,一眼可以识别出来。他们有各自规定的一套设计语言、设计规范。这样才能在协作上达到对内统一。我们都不希望在阿里云的网站,各个页面的设计差异明显,像跳转到其他平台。而这些针对用户层一致性都是非常重要的体验。
多个设计成员协同一个产品,迭代与更改规范都能更快的同步。可以试着想象一下一个几十人的设计团队,如果没有统一设计规范,那网站会变成什么样子。
在UI还原中,设计需要经常与前端进行沟通“这里这里这样做,那里那里这样做”,对于每一块的设计,前端都会询问你,这样大大增加了沟通的成本,把时间花在了无效的事情上。
设计规范统一后,减少了无效沟通,可以更专注创新方向,比如:要改变预先设定的一个辅助色,无论是设计还是开发,修改组件的颜色,全局使用到这个组件的地方都会改动,大大节省了设计时间。
做品牌的时候需要制定一整套VI规范手册,那平台同样也需要统一的品牌感。建立统一的文化体系可以让用户无论处在哪个页面都会有熟悉感、掌握感。统一的元素、视觉风格、交互方式,更加突出该品牌应有的调性。无论你在听网易云音乐还是QQ音乐,看到界面都可以立马识别出这是哪个app。
你能分出哪个是网易云播放界面,哪个是QQ音乐播放界面吗?
设计经常碰到设计完后需要修改一个点,然后就要找出设计稿中所有相同的地方进行修改,这样很容易漏,统一规范后只需要修改组件即可。尽可能的避免错误的出现。
设计规范的意义这么强大,对网站及品牌有至关重要的作用,那为什么还会出现没有应用起来的情况呢?
很多设计师会说:“设计不就应该是变化多端的吗?就是要表现创新力呀?制定了设计规范是不是就失去了变化和新鲜感?那设计还有什么意义?开发都可以做设计的事情了。”
这里就要看对设计规范理解的深度—设计规范是分层次的,平台规范归根结底是为了确保产品的易用性,是为了减少用户的学习成本
底层基础元素也可以说是全局样式,比如色彩规定、文字大小、icon线/面、botton体系等一些基础的元素,给用户一种统一的视觉形象,在跨界面、跨端、跨系统间有熟悉感,从而潜移默化地进行品牌的渗透。
对组合自由度较低的基础组件做精简的样式变化限定,对组合自由度较高的复合组件减少过于局限的限定条件,考虑各种拓展的可能性。组件在制定过程中要考虑多种状态,多种可能。
设计规范是需要迭代的,而不是我只要制作出来就放那了,就像女生买衣服,去年的衣服已经配不上今年的我,嘻嘻
~~希望我每天都有新衣服穿,做梦中~
设计体系最大的重要性毋庸置疑就是规范节省人力,设计师可以更多的时间去发挥创造性。
很多设计师觉得统一了规范,那我的创造性从哪发挥,界面都长的差不多。在设计中,设计目的是解决商业或用户的问题,并不仅仅是为了有创意而引入新的样式或交互方式。
有了设计体系,统一了整体品牌风格,不用把精力花费在比如调整间距、对齐元素等琐碎的事情上,更多的回去关注更全局的设计策略。
它仅仅是设计软件上可复用的组件,所以可由设计师独立完成,这种想法是错误的,是需要来自不同角色支持和参与的,这里包括前端、品牌、动态设计、 用户研究等。
有时候会想只要完成了规范就大功告成了,其实不然,对待设计规范就像对待产品一样,是需要维护和改进的,包括两个方面:一种是对内部使用的开发以及同事,一种是对用户的,应该定期收集用户以及同事的反馈,确保及时更新迭代。
1-提高设计开发效率,最显而易见的好处就是,组件库的可复用性。
比如像表格、弹窗、颜色等。一些基础的组件只需要做一次。
2-确保设计一致性,为用户提供连贯一致的用户体验,设计的一致性让用户能缩短的学习使用产品的周期,让他们能够预见他们的操作所带来的改变。
网站统一的视觉规范、交互体验,会让用户产生一种掌控感。
3-设计系统促进了公司内部的合作和交流,一个成功的设计系统是需要跨功能团队参与,设计系统因此促进了公司内部不同职位的合作和交流,这种文化的建立也会帮助公司更有效地推出新的产品或服务。
已经了解了规范的目的/意义,那该怎么去着手呢?
在制定规范前期,不应该是一个人规定这个规范,设计团队的成员应积极参与,前期先把规范的基调定好,人人都参与进来了,规范也就能更好的运营,当时我就是一个人定了规范,只是单纯把规范发给其他设计人员,他们没有参与,自然不会使用规范,对里面的设计元素没有加深理解。
这个主导人建议让全队专业能力最强的人辅助产品战略分析进行。有全局把控能力,这样能把纰漏降到。
大家一般说的设计规范是界面的视觉规范,从UI的定义,User Interface—用户界面,用户与界面之间的交互关系,可以归纳规范其实可以包含两大类,一类是视觉规范,一类是交互规范。
视觉规范可以给用户传达统一的品牌形象,确保视觉一致性。后期的设计元素须复合规范的原则。
交互规范可以减少用户的学习成本,让用户有归属感。交互规范在制定的过程中,需要写好交互规则与条件,不然后期维护会混乱。像盖房子一样,地基都没打稳的话,整个楼都是偏的。
那在使用规范时,一定要遵循规范里的要求进行应用,否则会乱套,不仅起不到统一的品牌风格,反倒会给人一种一团糟、完全不专业的感觉。体验好是一个产品的竞争力。
节点和公司的进度搭边,看当前的产品是应该先独立风格还是先统一基础规范。
1-固定的设计风格规范,比如:google的“扁平”,微软的“磁贴”,可以全局使用,并且时间保持的相对长久。这些设计风格在前期就完成了独立与其他风格的区分。后期再进行拓展。这种比较适规模比较大的团队,定好基调,不会走偏。
2-不断优化的设计规范,根据公司的节奏,有些产品目前比较迫切的是需要界面统一性、交互统一性。基础做完以后,进而考虑产品固定风格。这种比较适合小团队协作。可以随时调整。
利用粒子构成的原理与三维解构,一个组件被科学的三维解析后由粒子再构成,理论上几乎能够满足所有的UI样式需求。这样所有组件构成元素都可变,高度灵活
建立单个元素——设立简单组件——构成复杂组件——形成模板——最后组成页面。
并不是每个时刻都能够直接使用完整的组件,元素是我们工具库必不可少的部分,它可以更大的方便你修改组件,再造组件以及特殊的排版,方便拖拉拽。
规范组件命名,方便查找、方便协作。
一键导出/同步组件到Sketch模板。
标注方面,目前我们团队使用的是蓝湖私有化。
一般情况下,公司有不同的产品线,且都需要长期的开发与迭代。
公司中,越来越多的设计师加入,设计风格需要统一。
设计体系里面包含了设计语言、设计规范,需要与前端、品牌、动态设计、 用户研究等沟通,还是需要迭代优化的,这是非常繁琐耗时的项目,初期会非常的艰难,当设计师开始做组件时,也是非常耗时的工作,需要考虑不同场景下的使用情况以及设计的延展性,都需要投入大量的设计人力。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
使用互联网产品过程中,会有很多因素造成操作错误或失误,导致无法顺利完成任务。因此产品的容错性设计是交互设计中的重要内容。
用户在实际使用互联网产品的过程中,会有很多因素造成操作错误或者失误,而导致无法顺利完成任务,或者完成任务的效率很低。产品自身所具备的容错能力对于各种使用场景的有效覆盖,可以提升产品纠错效率、降低用户操作出错概率,因此产品的容错性设计是交互设计中的重要内容,也是提升用户体验不可忽视的一个环节。
容错性概念源于计算机领域,容错性是指计算机系统在发生故障的情况下,依然能够保证系统正常运行。计算机这种保证系统正常运行的能力也被称为容错能力。
本篇内容我们讨论的是容错性在互联网产品领域的内涵和意义。延伸到互联网产品设计领域,容错性的范畴更为宽泛,涉及产品对错误操作承载能力的多个方面,包括:如何降低用户操作的出错率,如何及时提供纠错帮助,以及如何给用户提供解决方案等内容。
「 即便你的产品90%的时间都运行良好,但是如果在用户需要帮助时置之不理,他们是不会忘记这一点的。——《Getting Real》」
一个产品设计的无论多么简单,用户都难免在使用过程中因为各种原因而犯错。互联网产品面向的用户群体是复杂多样化,教育背景的不同,行为习惯的差异,复杂的使用场景,都会使得用户的真实操作相比产品设计之初的预期有一定出入。此外,一些产品本身存在的因素,例如产品路径复杂,逻辑不畅等,也有可能造成用户无法顺利完成任务,亦或是完成任务的效率低,出错率高。产品在遇到错误如不能够及时纠错帮用户挽回损失,会给用户带来不好的用户体验,也是产品的一种设计缺陷。因此设计师应具有良好的容错性设计思维,尽量避免用户错误操作的出现,当用户出现错误操作时,帮助用户识别、诊断,及时反馈问题所在,并提出有效的解决方案,帮助用户快速从错误中恢复。最终达到使产品更可用、更易用的目的,给用户带来更优的用户体验,使用户与产品的交流更加顺畅。
互联网产品的容错设计可从用户使用产品的三个阶段来考虑,即操作前、操作中、操作后。可大致归纳为以下几方面内容:首先在用户操作前给予正确有效的引导;其次在重要的操作步骤给予用户及时有效的提示;当用户发生操作错误或失误时及时为用户纠错并提供有效的解决方案;最后帮助用户在错误发生后迅速回到正确状态。
在用户开始任务操作前给出用户正确有效的提示,可减少错误操作的发生。需要注意的是,引导应尽量醒目且简单易理解,确保能引起用户注意,并且在用户注意到后快速获取信息,到有效的防错帮助。
产品常见的引导主要针对两种情况。第一种是针对于新手用户的功能介绍,不同于曾使用过产品的用户或者高级用户,新用户首次使用产品的过程其实是一个学习的过程,此时需要让用户快速了解产品核心功能及主要的操作,帮助他们更快地上手。
例如下图导航APP新版本的新手引导【如图1】,在用户首次启动产品时,产品用趣味性的图文形式给用户展示了打车、公交乘车、实时公交路线等功能的信息介绍,能够让新用户快速熟悉核心功能,并在正式使用产品的过程中提升效率,降低出错率。
图1-导航APP新手引导
第二种情况是针对产品上线的新功能或者较大的功能变动而设计的初次引导,产品的功能改动可能会是用户产生不同程度的陌生感,适当的提示可帮助用户快速熟悉新功能点或页面信息的调整。初次引导常见的方式有很多种,包括:遮罩式引导、弹窗式引导、气泡、浮层式引导等等。
例如版本升级后的音乐APP【如图2】,首页使用情感化图文设计加遮罩式的引导,可以有效将注意力集中到特定功能上,用户进入页面第一时间就注意到,确保了信息传达的有效性。
图2-新版首页的遮罩引导
以上列举的内容属于狭义层面的引导,用户尚处在被动接受引导的学习阶段,在此阶段引导的目的是提醒和防错。从广义的层面来讲,我们可将对用户的引导理解为”消减信息的不对称性“,当用户面对可影响其决策的因素时,给予用户关键性的信息提示和说明,可以促使用户做出正确的决策。
针对需要加工时间的特殊品类,如烘焙蛋糕,京东到家在用户决策的关键页面和步骤展示时效提醒【如图3】,避免用户在完成订单信息填写或结算后才发现商品的配送时间超出用户的期望,会给用户带来极为不好的购物体验。
图3-京东到家页面中的时效提醒
当用户进行一些如修改、删除、覆盖等不可逆操作时,系统需要在用户做出这类操作指令后告知其产生的后果,让用户自主决策是否选择继续执行。在此阶段的提示需要注意从以下两个角度考虑:一是提示的方式,二是提示的时机。
在用户完成任务的操作路径中,大部分产品首先会选择以弹框的形式对用户进行信息提示。弹框可以分为模态弹框和非模态弹框两种大的类型【如图4】,主要区别在于是否强制用户进行交互操作。如何选择合适的弹框形式对用户进行提示,要依据提示信息的优先级和视觉权重的大小,同时要清楚不同类型的弹框适合的场景。
图4-弹框分类
模态弹窗是较重的提示方式,在用户进行重要且有风险的操作时可优先考虑使用。其优点是可以快速获取用户的视觉焦点,缺点是会打断用户当前的操作流程,用户需要进行如单击“确定”、“取消”、“关闭”按钮等操作指令将该对话框关闭后才可继续操作。
而非模态弹框属于轻量级的提示方式,其优点是不强制用户进行交互操作,或者用户依然可以在页面进行其他操作。弹框出现一段时间后会自动消失,所以但不利于承载过多文字信息。非模态弹框对用户造成的干扰较小,但也因此容易被用户忽视。
给用户的信息提示还有一点不可忽视的是反馈时机,应确保用户在关键的操作步骤得到及时的反馈,因为滞后的反馈可能会导致用户因为某一个环节的错误操作不得不重复操作一遍之前的流程,或者要修改关的一系列信息。
【如图5】中的登录页面,用户登录需要依次输入手机号、密码、图片验证码,但如果用户输错了密码并不能马上得到反馈,依然可以继续填写验证码,只有在全部信息填写完之后点击登录,系统才会校验密码,并提示用户密码错误重新确认,用户需要再次输入密码以及识别并输入一次验证码。但如果系统验证密码可以提前到输入图片验证码的步骤之前,在用户在得到密码填写错误提示后则可以停止操作后面的步骤,马上修改密码。
图5-登录页面中的提示滞后
同时,尽量为用户提供相应的解决方案,这样可以提升纠错信息有效性。BOSS直聘会因为手机储存空间不足给用户报错,并且会告知用户如何去管理储存空间,以解决此问题【如图7】。
图6-多行表单报错页面

在产品设计中,为降低操作的出错率,限制也是一种方式。在可能造成错误操作的入口适当设置操作障碍或者禁止操作,增加不可逆操作的难度,可以有效规避错误操作发生风险、减少误操作概率。例如常见的页面信息置灰、按钮置灰的设计,可以有效避免用户的误操作。
此外通过让控件、动作、选项等变得可见,尽可能减少用户记忆负担,把需要记忆的内容作为辅助信息提供给用户,或帮助用户自动完成信息填写也可以帮助用户快捷地完成既定任务,降低出错率。例如【如图8】在信息填写的步骤,可在用户已复制的内容和上传的图片中自动识别姓名、电话、地址等内容,并在用户确认后自动帮用户填写对应信息,为用户大大节省时间和记忆成本,快捷地完成既定任务,降低出错率。
在用户执行操作后,应尽可能的为用户保留已操作的信息,以便在发生错误或失误后可撤销之前的操作。针对一些流程较为复杂的操作任务,记录用户在每一步骤的操作信息,让用户可以从出错的步骤上及时恢复到正确的流程上,或恢复到距离错误操作最近的步骤,可有效的帮用户挽回失误。例如很多图片编辑的APP都支持用户撤销当前的操作,在用户对照片进行多编辑后页面上会有回到上一步和下一步操作的按钮,可让用户有机会恢复到上一步操作结果上。
图9-图片编辑页面顶部切换上一步和下一步的操作按钮
以上是关于互联网产品中容错设计的概念、重要性以及设计方法的一些阐述和思考。在产品设计的实际应用的中,可以模拟使用场景,对目标用户使用产品的真实操作进行行为观察,分析对比产品设计的操作路径与用户真实操作的差别,发现并收集用户可能发生错误或失误操作的关键步骤,验证产品的容错能力是否能达到有效覆盖。同时,也要通过产品数据的对比分析得出用户操作错误及失误的真实原因,指导并提升产品容错能力的设计优化,进而不断提升产品的可用性和易用性。
文章来源:站酷 作者:DXC设计体验中心
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Nathan Yau 在《数据之美》中写到,可视化并不仅仅是一种工具,而更像是一种媒介,能最大化帮助我们挖掘数字背后的信息,让数据「开口」讲故事。
可视化设计将信息和数据转化为用户能够理解的图表、图形和地图等元素,通过色彩、样式凸显其中的变化,帮助用户更的获取信息、判断趋势、识别变化等。那么在可视化设计中怎么让用户能更好的看清看懂数据或信息、让用户快速感知数据变化、让数据于用户所处的情境相呼应是微交互思考的方向。
通过可视化表达,将不易理解的信息呈现的更加清晰明了,帮助用户理解吸收。
1. 支付宝-基金指数
运用一般人对红绿灯的理解,将其绿灯行红灯停的概念,运用在基金投资上,帮助新手能简单理解指数估值的走势,更容易去判断该基金买卖的时机,绿灯为值得购买,红灯为建议卖出。
2. 支付宝-基金收益
欲购买基金时,透过尺标的形式选择购买金额,同时下方展示购买该金额的预期收益,并用实际生活中的物品举例,帮助用户理解获益的金额价值。
3. 手机淘宝-金币小镇
做任务签到获取能量,使用进度条的形式,来表达能量与金币值转换的关系,如当前获取多少的能量,能兑换成多少金币。
可视化中的变化凸显能帮助用户快速达成目标,在最少的时间内获取更多的信息,并引导用户进行更深层次的探究。可视化中的变化凸显能帮助用户快速达成目标,在最少的时间内获取更多的信息,并引导用户进行更深层次的探究。
1. AirVisual-空气质量指标
依据颜色与人脸图形表达空气质量程度,颜色从绿黄橙红紫暗紫色,人脸图形从开心、难过的表情、戴口罩到戴防毒面具等,来表达空气质量从好到坏,让用户能直接看到颜色与图形就能感知到当前情况,且知道对应的防范方式。
2. 我的天气-3D地图
日出日落的时间以动态的地球展示,地球滑动操作,让用户能实际感知到地球的光照情况。
3. 腾讯手机管家-充电状态
手机充电时,以整个屏幕作为充电量的比例展示,以虚拟鸭子游水的有趣形象,透过水位的高低表达当前已经充电到达的数值。
在可视化中增加与用户情境相关的元素,能够让用户获得更贴切,更直接的信息感知。
1. 高德-导航
当开车导航的当下,如果车速过快,在屏幕的双侧会显示红色的超速效果提示,比起左上角的车速展示,能更直接快速的感知到已经超速了。
2. 高德-用时预估
查看行程导航的预估用时,运用柱状图直观展示不同出发时间到达目的地的所需时间,滑动时有震动的切换效果,同时上方地图会显示该时段路途上的拥堵情况,显示预计到达时间。
提供足够便捷的筛选或操控组件,方便用户查看更多视图空间,快速定位想要的内容。
1. 携程-机票票价对比
运用柱状图展示不同日期的机票票价,能直观看出价格间的差异,点击后,可切换到该日期,查看具体航班资讯。
2. 携程-机票低价提醒
机票的价格是浮动的,可透过低价提醒的设置,主动提示用户票价已到达该预期价位,设置时如果价格设置的过低,到达的可能性越低,因此以价格滑动条操作,并以绿橙红表达成功率的高低做提示。
文章来源:优设 作者:AlibabaDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
不知道各位铁子们的朋友圈是啥样,反正我的朋友圈几乎被vivo刷屏了;吓的我赶紧看了看微博和知乎这个号称 “前苹果设计师操刀” 的系统到底有什么不一样。
浏览了几十篇相关文章和报道,好评如潮,我根据这些输入总结了如下几个特性:
OriginOS参考了原生安卓、iOS和Windows 10的交互特点,将传统安卓的抽屉、桌面、小部件整合起来,按用户的使用习惯和用户行为感知形成一个叫做TimeLine的时间流动线。
在OriginOS原子界面中,vivo希望用户不再区分桌面、抽屉和插件,而是根据自己的实际需要在桌面安排想要的内容。这个内容可能是APP图标、可能是APP小部件、也可以是系统插件。总之,根据用户的行为,在桌面展示用户需要的东西。
在安卓设计规范之外,vivo发明了一个叫做“华容网格体系”和“原子组件”的新规范。这一规范可以看到Windows 10和iOS 14的影子。这一规范从生态角度来说,跨越十分激进,想做到理想化的状态,需要全行业来支撑这些组件具备更宽泛的信息展示能力。
坦诚地讲vivo属实付出了很多,在细节的追求上甚至可以跟当年的锤子有点一拼了,但站在用户体验的角度上,我斗胆泼个冷水~
Origin?这是个什么,经受了9年义务教育和4年高等教育的洗礼,我居然读不出来,是我不行还是蓝厂阳春白雪?不难看出,蓝厂另外一个号称“OS”的funtouch,我用了几分钟的时间才知道是“放他吃”啊!
对比下MIUI,colorOS和flyme已经弱爆了,更别提 “充电2小时5分钟,通话5分钟2小时” 这种神级文案了,所以我奉劝vivo放下包袱,说点人话。一个用户都读不出来的名字,又怎么谈用户体验呢?
我很是认同OriginOS的最大亮点就是华容网格,官方号称“通过不同尺寸磁贴的自由变化和放置,形成每个用户独有的行为驱动逻辑和动线设计”,极大的鼓励用户自定义桌面,表面看“用户自定义”是用户体验的,但这就好比把你抛在大草原里骑马,哪都能去,去哪都行,因为并没有一条路可以走…图图新鲜还行,但最终我还是不敢走。WindowsPhone当年的界面就是这种情况,官方动态配图看好的不行,可是对用户有着极大的审美要求,排列的不好可真是相当丑。
再有一点,这个网格系统让我想起了魅族Flyme的smartbar:
Smart bar 是魅族在旗舰手机 MX2 发布时推出的一项操作解决方案。它智能整合系统返回键和菜单键,使其与软件功能栏合二为一。“底栏”左右分别显示返回与菜单键,中间三个空位留给软件功能按钮。如果软件功能按钮过多,Smart bar会将其自动放进菜单栏。双层变单层,优先的屏幕显示区域被更好的释放,上下点击也不会出现误操作,而且界面更美观,风格也更加统一。
本身是好心,但需要第三方来适配,无形中加大了第三方的工作量,显然vivo还不具备像苹果一样的号召力来牵动生态内的伙伴来搞这个。
△ colorOS
想比OPPO的“无边有界”,vivo没有一个统一的视觉语言来Cover,你能看到三种形式“扁平”“拟物”“新拟态”共存其中,特别是今年在Dribbble流行起来的“新拟态”,完完全全的概念设计居然被搬到系统上?真是大跌眼镜。甚至你可以看得到这是 “Fluent Design” “Metro” 和 “Materia design” 的结合体,就是没有一点苹果的影子,所以说是前苹果设计师操刀,我是有点质疑的…
△ 微软 Fluent Design
以图标为例,上图展示了3种截然不同的风格,在一个设计师的眼里这可能是个设计还原的事故。我理解的设计语言应该有一个完整的世界观,像Fluent Design一样,ta是对自然世界的高度抽象和概括,并不是仅仅为了好看,反观OriginOS,一个系统里二次元和三次元搞起了暧昧,就像初音和擎天柱谈起了恋爱一样让人难以接受。
在交互方面,点击OriginOS桌面的击交互池图标,就能直接在桌面上自由调整交互形式。要知道,以往vivo每款新机都可能更换一套手势逻辑,现在OriginOS把选择权交还给了用户:用户可以按照自己的习惯,在26种不同组合当中选择更适合自己的手势操作组合。
但这又跟锤子的“大爆炸”和“一步”类似,你说这事是个问题吧,但也不是那么大的问题,导致费了大心思又获得不了市场的局面。
最有意思的莫过于双系统并行了,OriginOS和Funtouch可以自由切换,有点像我做设计不知道哪个方案更好事出了灰度大法一样。这种做法无疑让我觉着整个OS团队对自己作品信心的折扣,既然是自己认为最好的,那又何必在意批评呢,放松一点,大胆一点。
不过吐槽归吐槽,不足归不足,vivo能有觉悟来下定决心搞搞系统这事还是值得鼓励的,明显可以看得到细节上下的功夫,也明显可以感觉vivo是从用户体验的角度出发,尽量不让APP绑架用户,最大化的把刚需搬到你能看得到的地方,所以还是要给vivo一个赞!今天的发布也才是第一步,相信未来OriginOS可以做的更好!
文章来源:优设
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
弹窗是我们平时在设计APP时候绕不开的一个元素,选择合适的弹窗形式,是我们需要多加思考的地方,避免变成只会完善产品原型的线框美工。
弹窗是我们与机器界面进行互动的一扇窗,它是一种用户与产品直接对话的方式,它可以传达信息,反馈状态以及引导用户操作。弹窗分为两种类型:模态弹窗与非模态弹窗(有些地方可能翻译为无模式窗口)。
模态弹窗
用户需要先与其进行交互,才能继续操作。也就是说它是强制性的,用户无法忽视它的存在。确保人们收到关键信息,并在必要时采取心动。
非模态弹窗
存在一定的时间限制,通常用于系统反馈,用户无需对其进行回应。
1. 对话框 Dialog / 警告框 Alerts
出现在需要打断用户操作的情况下,可以大致分为信息下发(被动)例如:版本更新,消息通知,运营广告等。信息提交(主动),例如:修改信息,登录注册等。
通过上面几个案例我们还能发现几个特点,按钮可以通过差异化设计引导用户去点击(例如美团的版本更新),运营类弹窗一般更注重视觉冲击力,且刻意将关闭按钮弱化远离弹窗主体,背景蒙版颜色更深一点,营造更强的沉浸感。对于承载输入功能的弹窗,需要注意键盘弹出后的位置。类似系统功能的弹窗,比如清理缓存可以考虑直接调用平台的系统弹窗。
2. 浮层 Popover / Popup
通常在用户进行交互后出现,比如常见的下拉菜单,下拉弹窗等,更加强调弹窗的从属关系。(在腾讯ISUX腾讯文档的文章中使用了模态浮层与非模态浮层的概念,有兴趣可以去看看)。
同样都是下拉弹窗,但是很多产品有着不同的处理方式,微博通过暗色系弹窗来明确区分弹窗内容与背景内容,钉钉通过加深背景蒙版来突出弹窗内容,大众点评只使用了淡淡的投影,去掉了背景蒙版,使得弹窗内容与背景内容对比无法拉开,在实际体验中相当影响用户的识别效率。
3. 操作栏 Action bar / 操作列表 Action Sheets / 操作视图 Activity Views
跟浮层有点类似,也是通过用户的主动交互后唤出的功能菜单。通常出现在屏幕下方,占用屏幕比例较高,为了方便用户使用,底部会放置取消功能。(Action Sheets和Activity Views是IOS官网规范中的叫法。)
这种类型的弹窗最常见的场景就是分享模块,比起其他的模态弹窗,它能够承载更多更丰富的功能(多为选择项功能)。支付宝和微信公众号分享算是最标准的Action Sheets,为了减少用户不必要的记忆负担,弹窗高度限制较低,露出更多的背景内容协助用户记忆。
4. 卡片 Sheet
Sheet是出现在IOS人机交互指南中的一种模态窗口,形式为一张从底图出现的卡片,几乎覆盖了全部的原页面。但是未覆盖的区域也会使用暗色蒙版来帮助用户记忆暂停的任务。因为它支持上下拖动,所以比起浮层,它能够承载更多的复杂信息内容,常用于一些表格无法承载的复杂任务但又非沉浸式的情况下。
比起Action Sheets,Sheet的屏幕覆盖率更高,且更多时候承载的是信息录入型功能。Sheet需要顶部标题告知用户当前所处步骤信息,通过底部卡片形式的叠加让用户感知当前处理的任务流程为主流程的分支任务。
5. 其他补充
随着交互体验与产品技术的不断发展,如今的设备都能承载越来越多复杂精细化的模块。所以渐渐有越来越多特殊的弹窗形式。(底层逻辑是互通的)
例如网易云音乐的分享使用了沉浸式模态,多个弹窗组合的形式,还有动效引导,以此来承载自身丰富的分享形式。IOS桌面使用聚焦类型的弹窗菜单,帮助用户进行视觉聚焦。
1. 提示框 Toast
常见用于反馈用户的操作结果,反馈应用的状态改变,一般持续2s左右便自动消失,可能出现在任何位置。(不能通过主动滑动关闭)
目前最常见的场景就是各种刷新反馈信息,一般来说存在感都比较弱,比如案例中的知乎,B站和INS。比起B站和INS,微博和知乎都在其中融入了自己的品牌特征:主题色点缀,虽然只是个小细节,但是对用户的品牌感知能起到潜移默化的作用。
2. 提示对话框 Snackbar
Snackbar最早是出现在Android的一种弹窗形式,不过现在很多IOS端产品上也会出现。它有点类似Dialog和Toast的衍生,很多时候像Dialog一样可交互,有时候又像Toast一样有时间限制。通常出现在屏幕底部,由页面底部向上滑动出现,向下滑动消失。
由于目前手头木有Android手机,所以截了Material Design的官方说明案例来帮助理解。主要强调了两个点:1.不要加Icon,2.只能有一个操作项;因为snackbar及时不操作也会消失,所以比较常见运用与工具类产品,需要保持操作的连贯性。例如邮箱类产品,用户删除了邮件,snackbar可以及时反馈删除成功的状态的同时提供撤销的操作。
3. 透明指示层 HUD
HUD是出现在IOS端常用的一种非模态类型,最早出现在屏幕中间,由于容易影响用户的沉浸式体验,所以在IOS13版本中对HUD进行了边缘化调整。
对比左侧与右侧的HUD就会体会到为什么早期会被那么多人吐槽,特别是在游戏类的沉浸式应用中,很容易破坏用户的体验。
1. 展现形式
展现形式核心是分场景,一些偏向系统报错考虑使用最简单系统的弹窗展现形式,运营广告之类的可以通过特殊的设计手法来吸引用户。但是不管怎么做,一定要让用户懂得,这是一个弹窗。非模态弹窗一般多以最简单的形式出现,避免传递状态信息时干扰用户的关键信息获取。
2. 按钮模态弹窗一般情况下只放置1-2个按钮,信息告知类型的放个“确定”,重大决策类型的放个“确定”“取消”。比较特别的是权限请求弹窗,可能会有多个按钮。现在很多运营广告为了曝光率会将关闭按钮放在边边上,对于用户体验上来说相当的不友好,但是对于运营数据上来说可能会很好看。
3. 动效因为弹窗承载文本量有限,得利于设备技术的发展,现在越来越多的产品会在模态弹窗中使用动态的形式传递信息,例如很多产品的功能引导。对于非模态弹窗来说,由于本身存在感较弱,动效运用于合理顺应用户的视觉动线,例如你下拉刷新后,一般刷新反馈弹窗都是出现在用户当前的视觉聚焦点。
4. 时机频率把握好弹窗出现的时机和频率
模态弹窗会直接打断用户的操作状态,一般只有在不可逆,或者操作会造成严重后果的情况下出现。但是在一些特殊的商业需求下,比如运营广告,那就得权衡用户与商业利益之间的关系了。非模态弹窗的话更注重出现的时机,反馈一定要足够及时,这样才能不会让用户在操作中产生疑虑。
5. 文案表述
由于弹窗的信息承载量非常小,所以一定要用最精炼,恰当的表述来告知用户信息或者当前状态,可以考虑使用“动词+名词”的组合短语,例如“删除照片”“取消订单”等等。特别是非模态弹窗那种会自动消失的,文案字数要更加注意(可以考虑增加一些通用icon颜色辅助表达,比如正确使用绿色打勾)。
6. 输入内容
很多弹窗承载着表单输入的任务,然而弹窗并不适合过多的表单输入,特别还有一些多到需要下拉了- -如果需要用户填写很多表单,乖乖跳转新页面吧。况且弹窗本身出现就已经中断了用户原有的操作,还要填一大堆东西的话。。(除了IOS的Sheet,它的出现就是IOS官方为了解决常用于一些表格无法承载的复杂任务但又非沉浸式的情况。)
由于目前手头目前没有Android,所以截图案例都是基于IOS端,下次有机会继续修改更新。不过目前来说两端很多交互形式越来越趋向共通。
借由这篇文章开了“设计控件”系列的坑,接下来会继续学习与分享其他的设计控件相关知识。包括之前的设计原则系列,也会继续分享设计心理学法则等等。最近一直在思考自己的学习框架,除了设计基础原则,设计控件外,还有设计模型以及设计工具等等。坑已挖好,接下来就靠自己一铲子一铲子去填了。
文章来源:优设 作者:Chinn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com