首页

UI设计师如何避免用户不满与困惑

ui设计分享达人


案例1.用户操作时的困惑


相信大家在做设计的时候都遇到过这种情况,一个产品内有多个入口指向同一个界面,这是产品的投机取巧还是另有深意,很多人都对这样的设计有不同的看法。


这样的设计就好像是狡兔三窟,在产品中流量可以从不同的入口进来,到多个不同的出口,也可以从不同的入口进入同一个地方。



有人会觉得如果一个界面中有多个入口指向同一个界面会出现问题:


1.违反了效率、用户预期的原则,会认为页面空间有限,在同一个界面中有多个入口指向一个界面效率变低,而且用户知道后往往就会只从一个入口进入。


2.多个选择会让用户拉高转化的成本,用户在选择的时候会花更多的时间思考有什么区别。


我们来看一个例子,下面德邦app之前的一个版本,目前已经优化了。从截图中我们发现页面上方的查询和寄件都和底部标签单独出来的界面功能重复了,并且我的快件也直接可以展示在首页的下方,我的快件目前可以从首页顶部、首页下方和个人中心3个入口进入查看。



通过这个案例我们发现确实这些板块和功能重复度太高,并且没有区分出场景,这样的设计证实了以上的两个说法,降低用户使用效率和提高选择成本。而且从业务角度看也并没有目标的差别。


但是我们分析问题也要多角度去观察,多个入口进入同一个界面只有缺点没有优点吗?


显然不是,我们再来看几个案例


下方是一个商品评价的卡片,经过我小手的实际测试,发现无论点击这个卡片任何有内容的区域,都会跳转到全部评价的界面,那这样的设计逻辑是否会造成和上面的案例一样的问题呢?答案是,不会。



这里的设计逻辑并不是和沙面那里的场景那么单一,而是用户在面临不同需求场景的时候可以有选择。


不知道大家有没有发现一个问题,在上面德邦案例的时候,你会对两个入口有疑问,但是在评价卡片的时候并没有,这个卡片包含了4种不同的场景:

1.我想看看有哪些好评、哪些差评 

2.几个不同标签的用户都是怎么说 

3.下面用户的实拍到底是不是真实的 

4.还有没有更多类似真实用户的使用评价。


所以即便最终到了一个界面,对于用户来说也是从独立的出发点开始的,而再回过头看上面案例,你会发现,我就是要寄东西,这里有两个入口,怎么选。


而且,考拉这里其实还做了从不同内容点进去的一个区分。



再来看个案例,贝壳的地图找房,在首页中有两个入口,导航栏一个,分类中一个,这里出现重复会造成一开始说的问题吗?首先我们看到贝壳的业务很多,以至于在这个分类中居然还需要通过滚动指示器来展示剩余内容,大家也可以思考一下,在这个界面中,会不会出现两个地图找房不同的场景出发点呢?我个人觉得其实是可以商榷的,首先地图找房在房产app中是很核心高频的一个功能,他的属性是“工具”



所以我觉得他之所以在卡片中再放一个地图找房是3个原因


第一个是导航栏的找房肯定不能动,他是一个全局的入口,即使页面滚动也可以随时点击到,即便要撤一个,也肯定要撤下方卡片分类中的。


第二个是卡片分类中的图标入口是都具备工具属性的,那首页上面部分就分为了:搜索、业务分类、工具这三块。所以用户看到这些工具属性也会联想到通过地图去找房。而且这些多色彩的图标对于新进入的用户是比较吸引注意力的,所以很有可能用户看不到右上角的地图找房(可以参考古腾堡图表的原则)。


第三点是可能右上角的地图不太能清晰表达这个图标的具体功能,所以将“地图找房”四个字显示全。


但这些都有一些主观因素在里面,如果真的去掉卡片中的,我觉得可能影响也并不是很大。有小伙伴可能想说是为了分流,但是分流的目前主要是让流量流到他应该去的地方产生实际价值,除了以上的3个原因,好像确实有点重复了。


再来看一个例子,小鹿茶app。



首页的现在下单和底部菜单标签都是到同一个界面,那为什么要重复呢?这里其实考虑更多的他并不想让用户进来就直接去购买,为什么不直接购买呢?应该是想要建立自己的品牌人设、满足更多的消费场景和增值业务,比如给别人点奶茶、周边的杯子跟合作商品推销、最新的奶茶的推荐。


如果只有菜单,产品也会显得更工具化,很难突出自己的品牌,对业务增长没有太大的帮助。有同学要说,那这个界面只是产品的“一厢情愿”,我就只要点奶茶就可以了,多个入口只会给我带来困扰。所以他这里的设计逻辑是在用户打开app的时候首先定位的是菜单,而不是首页。


所以,到底多个入入口进入同一目标我们还是要看不同的场景和目标的。如果既没有业务目标做支撑,又没有用户场景的变化,那么这个重复的入口就是鸡肋的。


最后留一个小思考题:网易云音乐的“歌单”在首页上也重复了,大家知道这里为什么他要做成重复入口吗? 




案例2.用户使用中的不满


一个优秀的产品或者说一个合格的产品,能给用户带来愉悦的体验。何为体验,用大白话来说就是用的舒服、自然、高效率。


再有一个底线就是不要让用户产生由产品带来的负面情绪,例如产品出错了却不告知用户解决方法、用户出错了没有办法及时帮助纠正、高危操作没有二次确认等等,根据负面情绪的严重程度几乎就可以直接让部分用户流失。


很不幸的是我就遇到了这样的体验,当时正在给同学们布置一些作业练习,体验一些产品的优缺点并给出解决方法。我也下载了这款文玩类的App,体验了极速捡漏这个功能模块。


捡漏:在文玩圈的一句行话,意思就是用很便宜的价格买到很值钱的古玩,而卖家却不知情,是一种可遇不可求的行为,所以寓意就是比较难得、走好运了。


进入直播间,商家在卖力吆喝,页面底部有加一手的按钮,就是类似于拍卖,价高者得。于是我就抱着试一试的心态点了加一手按钮,因为我预期是产品会再次向我确认是否要加价,结果是居然加价成功了,发生了什么?最后竞拍结束也没有人继续加价了。




实际场景中用户可能误操作不小心点了按钮,这样的场景和情况是非常多的,即便不是误操作,给一个二次确认的对话框也可以避免这样的尴尬状况,因为用户就喜欢在产品中点来点去,然而你在这里就像埋了一颗地雷。


如果到这里就结束了,那其实我也感觉没必要去吐槽,问题在于当我拍下还没付款,直播间的商家就开始喊我的名字:xx大哥恭喜你拍到了我们的产品,可以去付款了。连续播报了几十遍,我尴尬的直接退出了后台,这种感觉就像是一群观众看着一个被骗的小白一样,当我过10分钟后打开系统提示商品流拍了,并且累积了违约积分。


???


到这里,可能会有人说,你自己拍了的又不付款,当然要惩罚你了。


于是我还是认真的去研究了一下,发现极速捡漏和竞拍并不是同样的规则。该产品和竞品其实都有竞拍板块,在竞拍板块都会有需要用户确认的操作,并在操作下方给出拍卖规则,显示出价即表示同意拍卖规则。




但是该产品极速捡漏的板块并没有这样的说明,既然没有提前展示这样的说明和约定,用户就不知道有这样的规则,我拿了竞品一对比,其实在直播带货的场景下,这个出价流程还是不同的,双方其实都没有给规则说明但竞品还是给了一个出价选择后再出价的步骤。



最后我甚至被商家拉黑了,不过还给我一个投诉商家的入口


我当时的想法:


1.如果因为误操作让用户付出这么大代价的话成本就太高了。让用户点击是否就等于用户同意?


2.请先告知我约定与协议的内容,单方面在我不知情的情况下对产品进行操作后,通知扣我违约积分,这样就有点“霸道”了。


3.平台对商家和消费者的权益是如何平衡的,文玩行业和互联网结合的难点在哪里。


3.线下文玩圈的一些不成文行规,导致新人入圈后产生的冲突。


于是我就想对此说说我的看法



1.交易是产品平台其中的一个功能属性


交易是产品平台其中的一个功能属性,需要优先满足产品对用户价值,其次再谈交易的合理性。在这个流程中,面对用户很有可能遇到的误操作行为以及需要让用户去下单支付成本,我们必须提前告知用户。在尼尔森可用性原则中我们也发现了,如果用户不小心操作失误,那么我们尽可能减少这些因为用户犯错带来的成本,同时在用户犯错之前就要明显告知用户,将风险控制、前置。


所以,你在注册的时候、登录的时候,产品一定会让你同意一份用户协议,告知你我们要保存你的数据和一些跟你相关的信息,如果你不同意,那就无法继续体验产品。


这是一种契约。


同理,如果你想让用户在这个产品中去参与拍卖,在进入这个板块之前或者用户点击按钮之后,也需要让用户明确这个操作带来的风险是什么,取得用户的同意。而不是直接让用户加价成功,导致用户不明所以的被扣违约积分、被商家拉黑,这就和你去泰国,在街头你朋友拍了一张你和一个抱着蜥蜴的人的照片,结果别人来问你收钱是一个道理。


对于正常线下拍卖的流程,举办方也会对参与拍卖的人员进行相关规则、流程的告知,并且将风险、问题都提前让客户进行协议确认。


所以,在产品中的交易,必须先满足用户与产品信息之间的对称关系,保持信息的透明和契约公正,规则、约束、条件是用户使用你产品的前提和体验反馈的衡量标准之一。



2.对于商家和产品的价值


商家希望有更多的流量来曝光商品,捡漏商品的低价可以快速吸引一大批用户,比如8块钱的一个木头核桃的雕刻挂件等,产品通过营造抢购、限时的氛围,吸引用户下单,并且降低用户参与的门槛。


那么,直接加价成功是一个好的降低门槛的策略吗?我觉得并不是,降低门槛并不意味着就是直接拍到,而是需要提高用户对产品的信任度,这个极速捡漏的模块的目标用户几乎都是小白用户,因为资深的玩家看不上、更不会买,有一定经验的玩家也看的出好坏,明白它的价值。所以面对这些没有了解过文玩产品的小白玩家来说,内心是谨慎的


可能有人会想,这几块钱、十几块钱的东西还需要考虑吗?当然在这个场景中,从众心理是很明显的,大家都觉得很便宜,但就是没人拍。这都几块钱捡漏了怎么都没人要,大部分人都觉得这么便宜东西肯定不咋样,运费是不是贵的离谱、有没有托在背后跟你抬价呢?大家都不拍我也观望。越多人围观,越难促成交易。


还有一种可能就是我卖不卖的出去东西,并不重要,重要的是有人来看了,这些边角料都是用来回馈直播间粉丝的,就是一个窗口,真正有利润的东西在橱窗里。所以这里的捡漏只是一个引流的噱头。


人总是对太轻易得到的东西不珍惜,更何况是几块钱的小玩意儿。所以针对直接拍下这个交互,个人认为是不妥的,无论是上面任何一种情况,都没有办法让降低门槛,甚至通过这种“小聪明”反而会让用户更加不信任产品和用户。


不信任产品是大。尤其是作为一家平台来说,虚假交易、以次充好、滥竽充数等等行为是致命的。



3.文玩的价值


我其实有玩过一段时间文玩,受我老丈人的影响,有一段时间喜欢玩手串、玉什么的。经常也会在某音去刷一些鉴宝类的视频,很有意思。


文玩它的价值在于品相、稀有度、盘玩程度、大众接受度、历史背景还有工艺等等。所以它并不是一个在每个人心中同等效用的商品,同样一块玉,他的种水一般,但是花纹很独特,买卖双方其实心理的价值预期会相差非常多,它就不像买电子产品一样价格那么透明容易计算。


有的人玩这些就是觉得命里该有它,它能给我带来财、运,帮我辟邪,看的是眼缘。而不是路边上一块无用的石头,可以随意拾取丢弃。那么换句话说,如果在用户下单的时候,我们利用一些情感化的文案,让用户喜欢上这款文玩,是不是也可以大概率的促进交易呢?



4.文玩圈的行规


我相信很多玩文玩的小伙伴都知道,在文玩圈有一些不成文的行规。也或许就是因为这些行规出现到了线上产品中。


1.还价意味着出价,出价意味着买下

在文玩圈,你不想买就不要还价。如果卖家同意了你的还价,那你就必须买。这代表着你个人的信誉和道德品质。


所以文玩圈和互联网的用户之前有许多的鸿沟需要一步一步建设桥梁,不能单纯的以线下圈子内的行规来要求刚接触这个圈子的互联网用户,这需要大家一起努力和营造起一个良好的文玩圈的文化和规则,而不是直接生搬硬套,提高这个门槛。


2.不要打听别人的成本

文玩没有实际的成本,可能别人花10块钱淘到的价值1万块的东西,也可能别人花了巨资看走了眼。所以你知道了成本对谁都没好处,别人也不会告诉你。


3.别人在交易的时候保持沉默

文玩在每个人心中的价值不同,所以货币价值也不同,当别人在询价还价的时候,不管怎样我们都不要去表明自己的看法和想法。


当然还有其他的规则就不一一叙述了,针对这3条,其实在互联网的产品中是会有冲突存在的。例如你买了某个文玩,你一拍下,别人就说这个根本不值这个价钱。还有你出价了但是又不想买了,这些原本在文玩圈子中不允许的规则,在互联网上去要求用户着实有点困难,因为互联网上的交易并不一定所见即所得,可能展示的是这样,收到货又是另一个东西。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷  作者:应骏

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


做好设计,什么能力最重要?

ui设计分享达人

设计行业每天发生着翻天覆地的变化,随着专业的发展,我们也在不断的学习新的技巧和趋势,但同时我们也要明白,设计中那些基础的UI准则,才是好的趋势和风格建立的基础。今天我们就一起来聊聊做好设计最重要的能力之一:区分视觉层次。 


什么是视觉层次


视觉层次你可以理解为,通过将界面元素进行设计上的区分,引导用户的注意力,并使用户的注意力始终集中在页面的关键地方。但是今天没有一个方法可以一直控制用户注意力,就像我们今天做设计一样,不同的产品要用不同的设计手法去设计,才能达到帮助用户分清主次的作用。



视觉层次不仅仅包含文字有关,它还包含我们的图片,视频按钮以及文字以外的视觉元素。所以当你设计一个网页时候,除了网站整体的颜色,排版,图片也能够影响视觉层次。那么如何让设计的层次更清晰,常用方法有哪些,今天我们一起来聊聊关于设计层次,希望可以帮助到你。


运用尺寸大小建立层次

大小是建立视觉层次非常重要的方式,这里的大小不仅仅是文字,还包括图形,插画,图片等等。 作为设计师我们必须了解屏幕上每个元素的优先级,根据优先级来判断它的使用大小。



当我们谈到尺寸的时候,相信很多设计师有过被要求各种元素放大的经历,确实大的元素能更好的吸引用户。 但是当元素越大,其实设计的复杂性也越高,所以在设计时候需要更注意整体节奏,把握好一个度。 



如上图插画的比重很大,在设计这种大的元素时,你的每个元素比例和细节处理都被同时放大了,我们可以看见这副插画四周还运用了很多元素,让页面达到平衡,同时这个画面和旁边的文字场景也很好融合在一起。一个好的设计一定是通过视觉手段让用户理解信息更加准确,在看完页面文字和图片后,很自然的引导到底部的按钮,这才能算是一个很引人注目的设计。


运用色彩建立层次


颜色在视觉层次中扮演着非常重要的角色, 设计师可以通过颜色来传递信息内容,同时也可以引导页面内容,色彩在心理学中有着很重要的作用,比如黑金给人尊贵感VIP感,糖果色给人小清新,甜蜜的感觉;红色能吸引人注意等等。用户在视觉情感上和颜色很容易联系在一起, 作为设计师我们需要对不同的色调,不同色彩进行细致的组合搭配,以掌握对色彩的了解。



Zenly:国外知名产品,在引导页面设计时候运用红色按钮吸引用户注意,在App主页面里面,通过深蓝色强调选中效果以及Tab.


Netfix:知名的电影软件Netfix在设计中,充分运用色彩去增强层次,无论是在引导页按钮设计,还是在页面核心行动点,以及Tab切换等地方,都通过显眼的主色来引导用户操作,让页面的行为路径更加顺畅。 



Tiktok:抖音海外版本设计,整体UI部分非常简单,页面还是一如既往突出内容为主,所以在整个设计上就通过色彩来强调页面优先级,比如拍摄,分享,选择这些核心操作都通过色彩来引导完成任务。



运用文字大小字重建立层次


丝芙兰App的设计,在引导页采用一个衬线体非常有品位,通过字体大小,和字重对比,再配合美妆护肤的行业属性,页面非常的简洁大气,有对比有细节。 



无论是产品介绍,还是详情页,丝芙兰设计都是采用字重和字体大小对比,来打造层次,字重和大小,也是设计师常用建立层级的方式。 



除了字重以外,还可以字体透明度来增加层级,一般是黑色搭配灰色使用,再加上字体大小和字重整个页面层次会更加清晰。如上图韩国APP页面,标题是黑色,辅助说明文字字号小4号,同时颜色改为浅灰色,这样设计页面层次增强了很多。 



很多设计师在做界面时候,喜欢字体就一个颜色用到底,这样会显得界面粗糙,也没有层次感。但是运用好我上面说的字体大小,颜色、字重等对比其实节奏很容易就能做出来。 


运用视觉重量建立层次


比如aaptiv这个产品的功能页面设计,就是运用了视觉重量的对比,线框按钮最弱,其次是黑色选中效果,最重的功能引导按钮, 视觉 重量的对比能很好让用户关注到功能内容。



如上图,选中的黑色视觉重量最重,其次是蓝色选中效果,最后是未选中的黑色,视觉重量几乎我们每一个页面中都会使用到。



headspace这款产品我非常喜欢,将情感化用到了极致,在页面很多细节地方运用了不同的小橙人在背景上,视觉重量有轻有重,通过不同视觉重量来表达页面内容,非常巧妙。



在列表的表达上,不同视觉重量感受是不一样的,比如左边的视觉重量更轻一点,用户关注图形同时也去关注文字内容,右边这个视觉更重,更加引导用户去点击功能模块内容。



设计师熟悉的medium官方App设计,在正文阅读时,同样采用不同的视觉重点来突出重要信息,比如左边通过字重以及文字背景绿色底色和正文对比,非常醒目。右侧通过浅绿色作为背景强调突出。



同样在一些重要位置,Medium也是运用视觉重量处理,如左图通过顶部提示条提示可以通过语音播放,在右侧付费文章通过行动按钮引导用户升级付费。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷  作者:我们的设计日记

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



什么是设计师的用户思维?

ui设计分享达人

undefined


如果说设计思维是设计师做设计的基础,那么用户思维就是你发现和解决问题的能力,到底什么是用户思维?有没有一些具体详细的解释让我们了解它呢?请看分享。


用户思维-环境


undefined


说到用户思维第一个必须是用户环境,环境分为设计师的设计环境,以及用户使用你的产品环境,以及物理环境,是不是有刮风、下雨的恶劣天气。


1.你的设计环境


undefined


上图是大多数设计师平时工作环境,每天早上我们带着一杯星巴克,用着苹果电脑,打开iMAC做着设计,效果图每张图片都精挑细选,我们也理所当然的以为我们的用户也和我们一样,大家都是用的苹果电脑,用的苹果手机?


2.你心中用户的环境


undefined


很多设计师作品集里面喜欢放用户画像,我们理想的用户画像都像上图一样,用户都是白领,聪明学历高,能很好的看明白你的设计,也会使用。就像我之前做支付宝,也曾以为用户都是如上图所示,其实不是。很多时候用户的场景和我们想象中相差甚远。


3.用户实际的环境


undefined


大家都是每天地铁里面,在没有wifi和4G的公交,地铁里。也都是用的大屏设计,各种安卓手机。


undefined


举个例子,这个「放大镜」,做设计是人都知道是代表「搜索」但是在我们走访线下实际场景时候,下沉到三四线城市的时候,很多时候人们并不认识。


undefined


三四线城市用户就觉得这个像「平底锅」,不知道是什么意思,这种情况不在少数。


undefined


家里有一台台式电脑给父母用,有一次打电话给我说,有个流氓软件经常弹窗,我教他们去我的电脑,找到「设备管理器」卸载掉即可,结果,父母问什么是「设备管理器」?

所以,你会发现,用户其实和我们心目中想象的相差甚远。我们觉得很基础的互联网知识,在他们那里可能会很复杂。


4.用户设备环境


undefined


机型尺寸:安卓机的机型远远比我们想象的要多,各种超大屏,国内厂商各种千奇百怪的屏幕,这些做设计都需要考虑。


undefined


操作系统:不同的操作系统,有华为系统,小米系统,魅族以及各种第三方定制的系统,这些系统上呈现效果,都是需要在设计时候需要去考虑的。


undefined


手机分辨率:安卓和苹果屏幕各种大小,和主流的分辨率,设计时候如何适配,才能很好满足主流用户的体验,也都需要设计师提前去规划。


5.用户物理环境


undefined


室内环境:用户在室内使用我们产品时候,是不是应该考虑如果是室内,光线可以自动的调节。比如苹果的系统,会根据用户室内室外的光线,调整亮度。


undefined


室外环境:用户在阳光下使用,那么亮度变化,阳光下字体识别度等等,都应该考虑进去。比如白天和晚上使用苹果电脑时候的场景,是否有不同,比如iOS系统的设计,也是重复考虑用户实际用户场景。


undefined


网络环境:用户在有无限和5G情况下的体验,是不是视频直接播放,减少等待,当用户在地铁手机网络不好时候,视频是不是支持缓存或者提醒用户在使用流量。所以在产品设计时候,重复需要考虑用户这种场景。


undefined


抖音和腾讯视频,在用户非wifi情况下,会提醒用户当前网络环境,提示用户注意流量使用,除了流量提醒,其实包括网络加载不出来时候,如何设计产品策略都是需要设计时候考虑的。


undefined


噪音和隐私:比如在公共场合噪音大的时候,产品体验该怎么优化,有木有可能声音自动调整大,比如微信当你外面很吵时候,直接把语音放耳边,就从外放变成内放了。


undefined


比如支付宝理财页面,资产和收益显示可以隐藏金额,保护用户隐私情况。以及支付宝在系统后台时候,可以隐藏页面。


undefined


总结下,我们平时设计中提到的用户思维,其中关于环境的考虑就包括这些:


用户实际环境


机型尺寸/2.操作系统/3.屏幕分辨率


用户物理环境


1.室内环境/2.室外环境/3/网络环境/4.噪音和隐私




该怎么去做?


undefined


1.一部苹果一部安卓机


之前在淘宝天猫时候,有些领导层会要求,必须使用安卓机作为主机,因为只有你去体验安卓机,你才能发现页面和产品有多少问题,苹果本身的系统设计比较好,问题会比较少,但安卓系统没有那么稳定,容易出BUG;所以用安卓机能发现产品更多问题,同时也能让我们更关注到真实用户的感受。


undefined


2.换位思考将心比心


简单来说就是做设计要有同理心,懂得如何去“换位思考,将心比心”。要学会用普通用户视角去审视我们的产品问题,用理解的心态去理解用户情绪;从用户的角度看待问题,进而增加更多看待问题的角度,找到更多设计的空间,最后达到解决问题的目的。


之前支付宝时候,提倡管理层要每年去倾听用户声音100小时,老板们需要每月抽时间去当「客服」,看看用户实际用我们的产品,有哪些难用的地方,从而做到真正从产品上解决用户问题。



用户思维-场景


undefined


1.理解用户从哪里来要到哪里去


去过迪士尼的朋友都知道,人很多,那么如何让这么多人,有效的去体验更多的项目?就必须根据场景来设计,用户从门口进来,去往哪里,每个项目的设计环节都需要思考清楚。


undefined


场景是从哪里来到哪里去:从一个场景到另外一个场景。我记得之前玩过一个迪士尼项目加勒比海盗,里面就把每个环节设计的很符合整体场景。


undefined


从入口,到航行过程中,到大海里大战,以及故事的高潮,到最后的收尾,都是从一个时间到另外一个时间,就像在电影中亲身经历。其实我们做设计又何尝不是。用户从一个入口,到最终成交转化整个链路。


undefined

undefined


所以场景思维很重要就是关注用户,每个链路的体验环节,如何去发现其中问题,找到设计撬动点。


2.场景是带时间维度的


undefined

时间维度很好理解,是用户在完成任务整个过程中的行为,常见的有前,中,后。我们还是以案例来分析:


买之前:


undefined


认知:用户打开支付宝想买理财,但他很可能从来没有买过理财产品,那么第一步他可能会去了解产品,了解里面的金融术语,比如七日年化,收益率等等。那么我们在设计时候,就要去思考,如何降低用户的认知,如何用一些浅显易懂的文案让用户理解理财。


undefined


搜索:用户通过第一步了解了各个理财特点,锁定要买基金产品,然后这个过程中,他会去对比每只基金的收益情况,去寻找适合他的产品。


买之中:


undefined


判断:用户终于发现了一个比较符合他心中预期的产品,然后会去比较这产品的优缺点,比如它最后想选择,收益在6-8%的一只产品,然后会去思考到底买那一只合适。


undefined


下单:最后用户选择了这款收益为6%的产品,然后进行交易。


买之后:


undefined


查看:最后用户购买成功了,购买后,他就会每天来看他这只产品的收益情况,每天的收益,每周收益,以及什么时候卖出去。


undefined


了解了用户的购买状态,以及场景的时间维度,我们就可以去观察这些链路,去寻找一些设计线索,去发现问题解决问题,场景思维也能帮我们设计更好的决策。其实这个思维在电商中也同样适用。


买之前:


undefined


认知:双11快到了,你在家门口地铁,公交或者微博广告里面,看见了双11的一个产品广告。其中一个商品吸引了你。


undefined


搜索:然后你打开淘宝APP,搜索这款产品,通过搜索的入口,进入到了店铺页面。或者你通过外面的广告页面点击到了商品店铺页面。


买之中:


undefined


判断:你通过店铺页面,看见这个商品正在直播讲解,你希望查看真实的商品情况,于是点进去,发现讲解的内容能让你更好的了解了此商品,你决定去商品详情页准备购买。


undefined


下单:后面你决定购买,直接淘宝下单付款。


买之后:


undefined


查看:买完后,你很想用上它,于是你开始查看物流,同时也在担心如果质量不好,你要如何发起七天无理由退款。


以上就是我们说的用户思维里面的场景思维,我们需要了解用户从哪里来到哪里去,同时还需要了解用户购买前,购买中,购买后的心理变化,了解这个过程中的链路问题进行设计优化。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:我们的设计日记

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



做设计尽量避免掉的8个错误

ui设计分享达人

设计师有三大烦恼,时间不够用,设计方案过稿不容易,开发还原烂,如果你也在这些事情中浪费太多精力,那么证明在工作过程中被你忽略掉了很多细节,有些你不在意的细节,或许就是一个坑,今天和大家分享下设计师最容易忽略的8个细节,如有改之,无则加勉。


1.图层混乱

undefined


不知道大家有没有这种情况,你和一个设计师合作,他源文件给到你的时候,你很崩溃,想找到其中一个元素图层根本不知道在哪里,这个时候你再专业,技术再牛, 这个小细节都会让你口碑下滑。确实是这样,在职场中,你的每个交付物,都是代表你的专业水平。我见过一些优秀的设计师,文件给过来的时候,图层名称,切图,以及设计标注都非常清晰,适配规则都写的很清楚,专业度显而易见。


我之前问过和我合作的开发,最喜欢和什么样设计师合作,其实很多人都说过一个,就是图层干净,标注清晰的设计师。很多设计师抱怨开发还原不给力,但是试问下你自己,今天你交付给开发的每一个样式,对方是否能很清晰的找到。所以,在职场上,一定要注意这个细节,不要被贴上一个专业比较马虎的标签。


2.对上线效果忽略

undefined


很多设计师做设计以为设计源文件交付开发,这个项目就完事了,我之前也这么理解,但是在阿里后我转变了这个观点。要开始对落地页面负责,意味着你做的图,不止是效果图好看,还要上线内容也好看。

以电商设计来说,效果图时候大家都选的很干净的效果,很清爽的背景,但是上线后换上商家的图简直就没法去看。


undefined


你心中的页面效果图上线后,和上图一样很干净,清爽,让人赏心悦目。


undefined


但其实最后上线环境是这样的,页面拥挤不堪,有很多广告和牛皮癣,内容繁杂。所以今天的设计师除了我们要把页面做好看,同时还需要思考,这个效果呈现给用户会是什么样的效果,对内容负责是我们每个人都需要去控制的。


3.喜欢用漂亮照片

undefined


很多设计师作品集和项目喜欢用很漂亮的美女帅哥图片,确实大家都喜欢漂亮的东西,但是有时候太过了,看着就特别的假,很容易看成飞机稿。其实用照片也是有技巧的,这个简单和大家分享几个小技巧:

该放头像时候就不要放风景

undefined


在头像时候该放头像就放头像,不要放照片和插画。另外图片选择时候,也可以选择一些真实点图片,比如可以用朋友微博上照片,或者微信头像,可以挑一些好看的,那样看着会更加自然。


undefined


网站里面照片都可以使用,而且都是比较真实的,你可以选择皮肤颜色,性别等等,发设计稿中,会比我们找的明星帅哥美女要真实。

如果这个产品是中国人别放外国人

undefined


如果你今天做的产品是一个面向国内的产品,那么照片就应该是中国人,就不要出现国外照片。真实很重要,当然这里有一些细节,就是照片不要太完美了这样会产生虚假感,照片的清晰度最好足够,别出现马赛克。


4.不考虑文字极端情况

 

undefined


一般在设计时候,特别是文字我们需要考虑两种极端情况,文字最长的时候,文字最短的时候,如果忽略掉,你只按最佳效果设计,上线后就会出现问题,所以如果你设计文字最长,和文字最短时候,你都兼容到就不会出现太大问题。


undefined


在做金融产品适合,数字最大值和最小值也是容易被设计师忽略的地方,所以同样的需要考虑最长的数字和最短的数字场景。


如想看到更多干货内容分享,可以添加wx:ddm7851,欢迎围观我票友圈~


5.英文大小写不分

 

undefined


可能很多人说,英文大小写这个不是什么大事吧,但是还真是大事,我之前一个同事在内部讲方案述职时候,就因为一个英文单词大小写弄错了,就被领导说粗心,后来领导还经常拿这个事情来说,做设计粗糙,就这么一个下插曲,被贴了一个小标签。但是职场就是这样,你任何一个细微的瑕疵都容易被放大。



6.颜色乱用

 

undefined


做平面设计时候,或者做印刷时候我们都知道要去遵循一定色彩原理,比如潘通印刷色等等,但是在做产品设计时候,很多时候会出现设计师色彩乱用的情况,这个地方红色浅一点,那个按钮深一点,虽然你满足了你当前页面的诉求,但是放到整个APP上来说,就是很乱。


所以,这也是为什么很多团队都会去每年花很大精力做规范,规范的目的其实就是建立一把尺子,这把尺子让今天这个产品设计有一套规则遵守,否则就会出现百花齐放。


undefined


在谷歌材料设计规范中,很清晰的描述了每个颜色的运用场景和使用方式,目的就是保证所有设计的一致性和统一性。


undefined


谷歌材料设计,对于不同产品会给出不同的配色建议,这样的规范会让整体的设计更加合理。所以设计师在做方案时候,一定要去遵循团队设计及规则。


7.行高和尺寸比例随意

 

undefined


文字行高也是被很多设计师忽略的,不知道一堆文字怎么定义行高,一般的做法是行高=文字大小*1.5倍,这是比较通用的一些做法,当然也有很多的阅读软件,行高可能设置更大一些。他们会用到黄金比例来设置行高。


undefined


很多人以为黄金比例就是1.618其实不是,除了黄金比外,其实还有白银比例、铂金比例、青铜比例这些都具有严格的比例性、艺术性、和谐性,并蕴藏着丰富的美学价值,好好利用,将会使你的作品变得更多高大上。


拿行高来说,除了常用的1.5倍,还可以是1.618倍还有1.732倍,这些数值在很多阅读产品中都会大量运用到这种比例。


其实黄金比例除了可以定义这些字体行高以外,在尺寸上也可以去定义。


undefined


如果你设计中比例拿不准的话,也可以通过这样的黄金比例来控制你整个设计的比例尺寸,这样会更加科学。


8.盲目使用设计趋势

 

undefined


关注设计趋势是好事,但是如果盲目的使用趋势,就会让页面特别的乱。很多设计师页面明明是扁平化的,上面都是用插画营造着一个氛围,但是看见最近C4D很火,然后就放了几个C4D元素进去,这样就会让这个设计很混乱。


undefined


我之前天猫的导师,豆爸说过:做设计的时候可以先构思一个世界,世界要和谐就需要有它运转的的规则..


这个世界里面的规则会是什么呢?世界里面可能会有很多规则,字体,透视,光线,颜色,形状 .... 可以拆解成每一个细节对应到设计中就是它整体看起来会是怎样的光线,元素,空间感 ……是立体的,扁平的,魔幻的,安静的……


就像有不同风格的电影 动画一样,扁平的动画,木偶动画、黏土动画.... 为了让这个世界和谐,就会要减少一些冲突。如果立体的变形金刚世界里面出现了一个二维的米老鼠 肯定不和谐,如果小清新的色彩世界里面出现了大红大绿东北大棉袄配色,也会不和谐。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:我们的设计日记

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



用 JavaScript + HTML + CSS 实现选项卡操作,点击不同选项就显示出不同的标题栏(并实现其他要求操作)

前端达人

Ⅰ、问题描述:

1、用JavaScript + html + css 实现,选项卡操作;
2、分析:
A、用 html + css 实现布局(盒子的布置,空间的分配等);
B、用 JavaScript 中的 DOM 操作,实现点击不同选项显示不同标题栏的功能;

Ⅱ、实现过程如下:

1、运行软件VScode,亲测可实现;
2、运行代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; font-family: '微软雅黑'; font-size: 14px; } #container { width: 398px; margin: 100px auto; } #container a { display: block; width: 98px; height: 42px; line-height: 42px; text-align: center; float: left; border-top: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; color: #333333; text-decoration: none; } #container a:hover { /* 鼠标放在 a 的标签上,其文字将显示为:红色; */ color: #ff4400; } .content { width: 355px; height: 140px; text-align: center; border-right: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; padding: 30px 0 0 40px; display: none; } .clear { clear: left; } #container a.on { /* 对a标签中的类名为:on 的标签进行操作; */ background: #ff4400; color: #fff; } </style> </head> <body> <div id="container"> <a href="#" class="on" >充话费</a> <!-- 类为:on 的 a 标签; --> <a href="#" >充流量</a> <a href="#" >充固话</a> <a href="#" style="border-right: 1px solid #ff4400;">充宽带</a> <!-- style 操作目的:使得显示的盒子最右边有边框; --> <div class="clear"></div> <div class="content" style="display: block;"> <!-- style 操作目的:使第一个图片在初始状态时,能显示出来; --> <img src="images/1.png" width="355px"/> <!-- 该位置存放的是:图片的地址 (即:里面加载的是图片信息) --> </div> <div class="content"> <img src="images/2.png" width="355px" /> <!-- 该位置存放的是:图片的地址 (即:里面加载的是图片信息) --> </div> <div class="content"> <img src="images/3.png" width="355px" /> <!-- 该位置存放的是:图片的地址 (即:里面加载的是图片信息) --> </div> <div class="content"> <img src="images/4.png" width="355px" /> <!-- 该位置存放的是:图片的地址 (即:里面加载的是图片信息) --> </div> </div> <script> var as = document.getElementsByTagName('a'); //通过 DOM 操作,拿到标签为 a 的所有的元素(是个集合); var divs = document.getElementsByClassName('content');//通过 DOM 操作,拿到类为 content 的所有的元素(是个集合); for(var i=0; i<as.length; i++) { as[i].index = i; //给拿到的每个元素对象添加索引属性; (由于通过 DOM 操作拿到的元素是对象,因此可以添加属性值); as[i].onclick = function() { //给 as集合 绑定单击事件; for(var j=0; j<as.length; j++) { as[j].className = ''; //将 as集合 的所有元素的类名全部取消; (此时用的思想为:排他思想;) divs[j].style.display = 'none'; //将 divs集合 的所有元素全设置成不显示状态; } this.className = 'on'; //仅将被单击的元素的类名设置为:on,以便执行在 css 中的相关操作; divs[this.index].style.display = 'block'; //并将被单击的元素的相关图片设置为:block状态;(即:显示出来;) } } </script> </body> </html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104

3、结果展示:
A、默认的显示结果:
在这里插入图片描述
B、点击 ‘充流量’ 后的显示结果:
在这里插入图片描述
C、点击 ‘充固话’ 后的显示结果:
在这里插入图片描述

D、点击 ‘充宽带’ 后的显示结果:
在这里插入图片描述
4、可能存在的问题:
A 、如果自己也加载了图片信息,仍然不能显示该结果,可以直接下载我传上去的文档(可能解释的更详细),可以直接在 VScode 等其他软件上加载运行;

地址为:

https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501

Ⅲ、小结:

哪里有不对或不合适的地方,还请大佬们多多指点和交流!


https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


转自:csdn
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

关于通过v-if渲染的element-ui表单,校验规则不生效的问题

前端达人

记录关于通过v-if渲染的element-ui表单,校验规则不生效的问题

代码

 <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="标题1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item label="标题2" prop="requestData"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

原因:
因为form-item绑定验证事件是在mounted中进行的,规则变化后没有进行重新绑定验证事件,v-if渲染组件节点diff后被复用了,所以验证也就自然失效了

参考回答:v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则\表单元素,表单无法验证问题剖析 )
感兴趣的小伙伴可以学习一下

解决方案:

  1. 给每一个el-form-item添加一个key属性区分
 <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="标题1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item key="1" label="标题2" prop="requestData"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

如果v-if渲染的目标是整个表单,则在form标签写入key

  1. 直接在el-form-item中写rules
 <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="标题1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item label="标题2" prop="requestData" :rules="{ required: true, message: 'xxx不能为空', trigger: 'blur' }"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

:rules="{ required: true, message: ‘xxx不能为空’, trigger: ‘blur’ }"

这里需要注意JavaScript中的单引号''与双引号""的使用规范


还有很多方法可以解决这个问题,这里只记录我用过的其中两个方法。有其他解决方法的同学欢迎留言讨论!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


转自:csdn
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

设计体系的响应式设计

资深UI设计者

随着产品生态的多端化进程,越来越多的跨设备和不同屏幕尺寸导致的问题也逐渐暴露,例如:

XX 能力要在手机上使用,不得不单独为移动端开发几个页面甚至一个产品(反之亦然);产品数据量很大,Ant Design 默认字体 / 间距太大了,不够紧凑;版式不够优化,造成空间浪费;

Ant Design 基于如何在小屏幕中解决信息展示问题这样的出发点也在很多组件中提供了响应式设计,但拥有更加完备的环境适应性应该是一个设计体系长期的目标之一,因此在全局性地考虑跨端、跨多屏幕尺寸、信息密度等响应式设计方面还值得我们继续深入研究。

本篇文章横向调研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企业级产品设计体系的响应式设计部分,从设计策略、设计模式、实施模式、设计方案四个层面大致归纳了一些信息,旨在对响应式设计有一个笼统的了解。

关于 Adaptive Design 与 Responsive Design先厘清两个概念,关于响应式设计通常会有两个普遍认识,即 Aaron Gustafson 与 Ethan Marcotte 分别在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 与 Responsive Web Design (RWD) 概念,它们的核心区别在于 AWD 针对不同的设备或屏幕尺寸定制化设计多个固定布局的尺寸,而 RWD 是同一套代码做弹性的适应,本质上它们都在解决产品设计如何适应于不同设备以及不同屏幕规格的问题,本篇所指的「响应式设计」 概念包含了两者,不做明显区分,关于 Adaptive 与 Responsive 设计怎么界定以及具体的规则本篇也不进行展开。


移动优先设计策略

提响应式设计不得不提「移动优先」设计策略,移动优先的概念最早是 Google 在 2010 年世界移动大会上提出来的一种产品策略,基于 Google 对未来趋势中移动设备将会逐渐拥有核心地位的判断。后来「移动优先」更多被提及是作为一种在响应式设计中应用的设计策略,它认为在响应式设计中优先为屏幕限制更大的移动设备设计,再扩展到大屏幕的 PC 端是一种更有效的设计方法。

例如 Alta、Lightning、Fiori 均在设计体系中明确采用「移动优先」的设计方法,Fiori 尤其指出「移动优先」专注核心功能,专注增强而非降级,提前考虑移动端更多的独特特性以及异常情况,能提供更好的体验。Material Design 可能算是移动优先的最佳实践,它本身就诞生于 Android 平台,而后再通过大量响应式规则扩展到桌面及 Web 端,使得 Material 在多端都拥有一致贯穿的良好体验。

(Material Design 的响应式设计)


「移动优先」本质上是基于一种「增强」的设计思想,一个产品如果要同时适应于不同的设备,一直以来有两种策略:优雅降级 vs. 渐进增强,后者认为先从最小和最受限制的低级设备(移动设备)入手,再为更高级的设备(桌面设备)增强信息和交互,这意味着在更多限制下,迫使设计考虑如何减少、汇总,分组信息,有利于聚焦核心信息以及为更多限制考虑。

然而移动设备已不再是「低级设备」,Fiori 尽管强调「专注增强而非降级」,但它同时提出的「提前考虑移动端更多的独特特性」却与渐进增强的设计思想相悖,让「移动优先」沦为了某种形式化的概念而难以执行。

例如下面这个报告界面的场景里,移动端仅展示汇总的报告图表信息,但汇总图表并没有「扩展」到 Tablet 里而是用明细数据替换图表,而在桌面端同时包含了明细数据与图表两部分信息,这看上去并不像是一个「增强」的设计思路,更像是在全量需求下基于设备限制所采用的「降级」策略。

(Fiori 报告界面的 Adaptive Design)


因此「移动优先」并不一定是形式上优先设计移动端,它被广泛接受和应用的是背后的渐进增强的核心思想。我认为在移动设备高度发展的当下,「移动优先」不再适合作为单独概念提出来,而渐进增强的设计思想应该体现在更细分的场景中,例如在布局、信息排版以及交互反馈中,我们应该优先考虑限制更大的移动端;在一些交互方式上,优先考虑限制更大的鼠标操作。甚至在复杂业务场景里,优先满足核心业务流程顺畅也属于渐进增强的策略范畴。


设计模式

这里讲的设计模式是指设计师在具体业务中针对不同的情况可以采用的通用性设计方案,这些设计模式除了单独应用外,有时候也可以多种模式结合应用。Fluent 归纳了 6 种对应不同情况的响应式设计模式,非常全面地涵盖了其它设计体系中的绝大部分方案,分别是:调整大小、重新定位、重新排列、显示/隐藏、替换、重新构建。

Resize – 调整大小

调整大小是最基础的设计模式,是一个容器默认的响应式模式,通常有等比缩放、固定高度、或是在不同尺寸下按不同比例规格缩放三种形式,即便在无响应式设计的体系里,容器跟随屏幕尺寸而变化也是一个常见的应用方式。

(Resize)


Reposition – 重新定位

改变 UI 元素的相对位置,以充分利用不同尺寸的空间。重新定位在响应式应用里多见在框架上,或是在组件里对一些特定元素的处理,例如 Material 的全局浮动按钮与浮动的下拉菜单以 Reposition 的形式分别在桌面端与移动端处于不同的位置。


(Reposition)


Reflow – 重新排列

改变 UI 元素的排列方式,这在内容弹性布局里较常见,通常是基于某种排列规则自动向下折行,并结合调整大小与栅格系统应用在响应式布局方面,例如 Carbon 的 Fluid Grid。



(Reflow)

Show / Hide – 显示 / 隐藏

基于屏幕空间、设备不同特性、特定情况等显示或隐藏 UI 元素,例如大多数设计体系的框架设计应用在小屏幕上会隐藏侧边菜单。Material 在组件响应式行为里提到的 Expand 也属于 Show / Hide 的延伸。



(Show / Hide)

Replace – 替换

针对不同尺寸的屏幕采用不同形态的组件,通常应用在对具体的组件做针对性响应式设计中,但需要注意用户面对变化时的认知成本。



(Replace)

Re-architect – 重新构建

折叠或拆分信息架构,这种模式在 Web 端较难实现,通常出现在一些 Native App 的场景。



(Re-architect)

Density – 内容密度

除了上述 6 种模式以外,我把内容密度也归纳为一种设计模式,Fiori、Material Design、 以及 Atlassian 都提出了内容密度的概念。Fiori 基于移动优先在移动端采用默认密度,而针对大屏幕的 Web 端则提供紧凑密度的方案,他们认为移动端手指交互所需的空间要求更高;Material 则是针对很多组件都定制了 Default、Comfortable、Compact 三种密度的视觉表现。通过被动响应式或主动控制内容密度很好的解决了不同尺寸屏幕的信息获取效率问题。

(Material Design 的内容密度示例)


值得一提的是 Atlassian 通过栅格系统的间距来控制密度而非对内容密度本身进行设计,越紧凑的布局栅格间距越小,这看上去很合理,却很容易造成内容密度增加的同时整体信息获取效率反而降低的问题。Material 也有关于栅格空间的定义,但在内容密度的处理上和 Atlassian 恰恰相反,它认为高密度内容适用更宽松的栅格空间,相对是一个更合理的设计。在信息密度的问题上,我们的核心目的其实是提升信息效率而非单纯提高视觉密度,因此解法上需要更完善的考虑。

(Atlassian 与 Material 的栅格密度对比)


实施模式

实施模式是指设计体系为实现具体设计方案而定义的一系列基础规则、解决方案或技术手段,经过整理总结为相对尺寸单位、屏幕断点、弹性布局、栅格系统 4 个方面。

Rem – 相对尺寸单位

几乎所有应用于 Web 的设计体系的技术方案中都采用 rem 相对单位,Material、Fiori、Carbon 和 Lightning 均沿用了浏览器默认的 root 尺寸,即 1rem = 16px,Alta 默认采用是 14px 的规格,并允许基于不同应用选择 12px 或 16px 的规格,默认情况 Alta 采用更小规格的单位会在小屏幕电脑上有更好的表现,这也许和他们的产品特性相关。

相对尺寸单位是非常具有实施价值的,它使产品能在保持信息节奏的情况下根据不同的情况等比例缩放内容,这使得设计能更方便地调整内容密度,或许还可以配合 Media Queries 解决部分跨端的尺寸适配问题,且几乎没有前端成本。

国内的前端业界包括我们自己的前端同学更多将 Rem 运用在移动端,主要为了两个目的:方便计算尺寸、在不同宽度的设备上等比缩放内容,这样的用法是出于前端工程师解决屏幕兼容性的一种技术手段,在使用上本身也存在一定争议,而在响应式设计领域我们还没有发挥出 Rem 应该发挥的作用,甚至很多设计师还并不了解相对尺寸单位的使用方法,广泛应用 Rem 能为我们带来哪些实际价值是接下来需要继续研究的。

Breakpoints – 屏幕断点

屏幕断点是响应式设计的基础依据,它决定了我们要适配到什么样的设备或屏幕规格,并通过 Media Queries 这样的技术实现不同 Breakpoint 条件下的不同 UI 表现。一般情况 Breakpoints 都是基于 Phone、Tablet、Desktop 的维度来设计的,包括考虑了移动设备的横评竖屏情况,关于详细的规格设置其实并没有太大参考价值,设计体系都是根据自身定位以及设备覆盖的情况来制订的,例如 Material 的断点在低分辨率范围分得非常细,是因为 Material 主要服务的 Android 平台有着数量繁多的设备分辨率。在满足自己需求的前提下,屏幕端点不需要太多,无论怎样基于数据驱动的屏幕断点设置将会是一个更科学的方法。


(屏幕断点分布)

Fiori 的断点设计比较有意思,在设计文档中仅有基本的布局规则,没有明确的 Breakpoints 规则,Fiori 对于不同的组件会设计不同的 Breakpoints,例如在 Table 这个组件中定义了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的规格,而在 Form 的组件中,Breakpoints 变成了 0 < 600 < 1024 < 1440 < ∞,从这点上看出 Fiori 认为不同的组件有不同的表达模式,因此应该针对性对组件进行优化。

(Fiori 的 Table 组件适配情况)

(Fiori 的 Form 组件适配情况)


Flex Layout – 弹性布局

Flex 布局是 CSS3 提供的强大布局能力,从更自然更具语义化的角度实现界面元素的自适应。应用于 Web 的设计体系基本上都在组件代码里广泛采用了 Flex 布局,Lightning 还将栅格与 Flex 布局结合定义了自己更完善的布局方法。在响应式设计中,Flex 布局通常结合 Breakpoints 使用,在两个 Breakpoints 之间让界面做更平滑的过度。除此之外其它平台也都有类似的弹性布局能力,例如 Fluent 在 windows 采用 XAML 构建布局系统。

无论是 Flex 还是最近兴起的 Grid 布局都是 CSS3 的基本布局能力,响应式设计要解决布局的问题将会深度依赖这些基础技术手段,本篇不进一步展开。

Grid System – 栅格系统

栅格系统是所有设计体系必备的,我们通常将页面横向分为 N 列,定义每一列的尺寸与间距,这为界面布局提供了一致性和成本便利。传统的栅格系统在响应式方面的应用主要是结合 Breakpoints 与一些 Responsive Token 来实现的,通过给 UI 元素指定不同的栅格数来决定他们分别在不同屏幕下占多少列,同时一些设计体系还提供了可见性相关的 token,来控制界面元素在不同屏幕的显示与隐藏。

Fluent、Fiori、Lightning、Material 以及大多数设计体系都采用了 12 栅格系统,因为 12 的因数够多,能满足足够多的布局细分同时又不至于太复杂,Carbon 的做法更加 geek 一些,他们的「2x grid」采用了 16 栅格系统,布局粒度更细但放弃了 3,6 这样的因数。 Ant Design 为了满足复杂的业务情况,采用了 24 栅格系统,24 栅格提供了更高的灵活性的同时,也大大增加了复杂度,面临栅格系统的响应式设计 24 栅格是否适用还有待商榷。

另外 Material、Carbon 还明确提出了「Fluid Grid – 流体栅格」的概念,核心思想是在较小的屏幕上降低栅格数量,将多余的栅格自动折行弹性布局。


(Carbon 的栅格定义)

在屏幕尺寸变化时,栅格主要有两种响应模式:Fluid、Fixed


(Fluid)


(Fixed)


这种将栅格系统与弹性布局相结合的方式基于一些简单的规则设置,在不需要特定响应式的场景中不再需要指定繁琐的 token,且能满足大部分高频且通用的情况,在一定程度上降低了成本。


组件应用

除了通用的响应式规则以外,设计体系在具体组件中的响应式方案还有许多值得挖掘,能为我们的组件设计提供参考价值,本篇不再一一展开,仅提两个典型的应用情况:

框架

(Carbon 的框架设计)


框架算是一个特殊的组件,在不同的设备中界面框架的适用有非常大的差异,几乎提到响应式的所有设计体系都给出了框架响应式方案,例如 Alta 将界面框架分为四块,以 Off-Canvas 和 Reposition 两种方式在不同尺寸的屏幕中显示或隐藏以及通过特定的方式展开或呼出。

通常情况下设计体系的框架组成按形式可以分为:

  • Header – 通常情况下常驻

  • Sidenav – 分为左侧右侧两种情况,一般用于放置导航,在不同设备会有展开,收缩,隐藏三种状态

  • Content – 内容区,通常由 Grid 控制布局

  • Footer – 如有,固定在页面底部

  • Float – 浮动框架,用于临时状态,通知或弹窗等

设计体系通过对框架的定义,以及控制不同部分基于什么样的模式响应屏幕尺寸来实施对框架的响应式设计。


(Material 的响应式框架)


组件

Fluent 或 Material 在设计文档中更多基于基础的网格,布局,设计模式来阐述通用性的响应式规则,因此他们的响应式设计有非常好的延续性,组件的响应式方案基本上都遵循这些规则。

而 Fiori 以及 Lightning 在通用性响应式设计模式上的定义上没有那么全面,他们侧重于在组件层面对所有组件都考虑了针对性的 Responsive 或 Adaptive 的方案。例如 Fiori 在响应式表格的组件里,在桌面端与移动端分别是 table 和 list 的模式,这个方案并不是通过全局抽象规则得出来的,而是基于对组件的针对性设计,正如他们为不同的组件设计了不同的 Breakpoints,这种针对性也适用于特定的 UI 解决方案。

(Fiori 针对 Table 的响应式设计)

在一定程度上抽象规则的同时,如果我们能够为每一个组件都考虑到不同场景的响应式,当然就会提供更精细化的体验。在一个完备的设计体系里,在设计每一个组件资产时都以渐进增强的设计策略,考虑到不同的设备及屏幕适配是非常有必要的。

响应式设计的世界烟波浩渺,书不尽言,言不尽意。Ant Design 目前计划从布局基础规则以及内容密度的解决方案切入,逐步完善响应式设计的体系,这是一个重要且漫长的过程,至于文中挖下的坑还需要深入研究逐一补充,本篇初探先到这里,欢迎大家留言指出问题也很希望大家能留下想法共同探讨。





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:Ant_Design

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务





设计师如何在设计中讲好故事?

资深UI设计者

讲故事也是一种设计能力。

更多设计文章,设计交流,欢迎加入粉丝群 | 微信ddm7851

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。

讲故事也是一种设计能力

undefined


作为设计师,经常需要和产品,技术,老板去沟通设计方案,每次都是向外发出声音表现你的的机会,很可惜,大多数设计师在表达时,对方还无法理解你的意思,更难理解你的设计概念和设计思路,很多设计师也因此害怕去说,其实设计师学会讲故事非常重要,也是专业能力的一种。今天这篇文章,希望可以帮助到你。


undefined


能把设计说成故事是一门艺术,作为设计师,我们必须借助讲故事的方式,将产品功能推导到用户价值层面,在大公司里面,设计师讲故事是一个越来越重要的技能,一个好的故事能够统一大家的建议,获得领导的认可,是将产品价值和功能流程和用户的情感联系在一起的关键!


看看别人怎么讲故事


韩国的设计,韩国很多潮流的娱乐视频都是围绕一个故事开始的,故事灵感也来源于大多数人生活,容易让观众引起共鸣。


undefined

 


这个MV是来自Zion.T的Eat,讲述了一个人在失落沮丧的时候,要照顾好自己,整个故事围绕着我们生活中各种失落,孤单的情节,再配合美妙的旋律,让观众感同深受。
undefined
K.will的Day也是运用电影短片讲述一个故事,讲述了一个单相思男生的故事,虽然故事很浅,但是每个故事的每一步都是来源于我们每个人生活当中的。


undefined


在Airbnb宣传页面,运用故事讲述了一家3口,为了女儿的生日,一同飞往洛杉矶,他们去了迪士尼乐园,在洛杉矶预订了房源,受到了房东的欢迎!这样宣传比广告更加真实打动人。
故事驱动的设计很容易入手,从情节提要开始,回归用户视角给出用户想要的体验。


undefined


allthatisshe一个英文网站,这个网站最初是在博主休产假期间创办的,它原本是一个很简单的时尚博客,但是博主异想天开的自我表达方案,以家庭小孩为主题的家庭故事,吸引了全世界的关注,在ins上关注度极高。


undefined

 


整个网站每篇文章都在描述博主和小朋友的生活故事,他们一家人相处的很多细节,这中间再推荐一些好用的商品,去旅行带着观众一起看风景等!整个网站的故事一般都是从生活细节出发,比如上班的路上,在品尝美食,听着喜欢的音乐时候,然后结合巧妙的内容,吸引用户。


讲好故事的5个步骤

 


那么,作为设计师,平时在述职,总结时候如何去讲故事呢?怎么去把一个合理的项目,通过叙事的方式,让它能和听众引起共鸣呢?


undefined



今天分享给你,一个讲故事的框架,一共有5步:

1.开始(背景)


2.冲突(问题)


3.情节(解决问题的过程)


4.高潮(设计策略)


5.行动和结果(问题如何解决的,解决过程中发生了什么)

我们来拆解下这个思路。


更多设计文章,设计交流,欢迎加入粉丝群 | 微信ddm7851

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。


1.开始(背景)


这个项目是如何开始的,它的整个商业背景是什么,要解决用户的什么问题!在我们演讲或分享时候,尽量在140字以内描述清楚,整个项目的背景和简介,让听众记住你。


undefined


乔布斯著名的演讲家,他分享有个小技巧,就是可以先抛出问题和困惑!一次iPad2发布会时候,乔布斯一上台就抛出几个问题,大家对于iPad销量很担心,iPad被各种抄袭,苹果怎么办?在一开始就通过问题,吸引听众,然后引人入胜!


undefined



来看一个实际案例,来自Facebook相册一个设计改版,在项目开始,设计师就介绍了整个项目背景,Facebook Photos是让用户更方便的分享他们的故事,分享他们的图片,让用户生活丰富多彩!那么如何帮助用户更加便捷,更快的分享照片,是这个项目的设计重点。


2.冲突(问题)


讲一个好的故事很难,一定要有冲突和问题,就像看一部电影,一定要有反派存在,只有冲突明显,观众才会觉得更有趣。那这个环节就需要我们把这次产品改版,最重要几个问题给提炼出来。


undefined


以Facebook为例,Facebook相册遇见的问题是,通过数据研究发现,人们不愿意在Facebook中分享照片有以下几个原因:


1.大家手机中的照片很多,不是为了分享而拍摄的!


2.选择照片很难,比如自拍,一次拍了十几张,选出一个最好的很费时间


3.大家经常忘记了分享

所以,在这个环节,我们需要从生活场景去思考,用浅显易懂的语言去讲述当前产品遇见的问题!


3.情节(解决问题的过程)


针对这些问题,设计师怎么去解决呢,在这个环节,一定要充分把你整个设计过程的思考,详细描述,比如设计师常用的情绪版,竞品分析,设计的形色字构质的思考都可以在这个环节表达清楚。


undefined


Facebook团队,基于用户研究数据,和数据结果,决定先定出一些设计原则,通过设计原则和主张来解决之前发现的问题和冲突!于是这个过程和产品开发一起讨论出来,设计的原则和目标:


1.帮助人们记住他们可以分享的故事


2.轻松快速的分享


3.设计一种新的布局方式,让大家分享时候自豪,能够吸引人!


undefined


然后展示了他们做的竞品分析,情绪板,以及一些设计探索的方向!比如做了十几个原型图,对于相册的展示设计了很多概念方案,包括各个文件类型的展示方案(照片,文字,视频,地图)等等!


4.高潮(设计决策)


基于以上设计过程,就可以得出对应的设计决策,再进行详细的方案设计展示。


undefined


重新设计了页面框架,用户的相册框架图来帮用户更好的分类相册,同时在布局上对各种文件类型进行分类,优化相册的浏览效率。


undefined


视觉设计时候,去掉不需要的设计元素,突出内容,确保每一步都能是一个最佳的解决方案!


undefined


同时在视觉设计上进行了很多创新探索,将相册故事以胶片的形式呈现在顶部,让用户更愿意去分享。


undefined


在设计时,考虑多端的统一性,针对不同端的展示效果,真正的保证设计的落地性!


Facebook这个设计环节就像我们电影的中间高潮部分,怎么去解决冲突的,如何定决策,并逐步去落地整个设计方案的!我们在工作中也需要在这个环节很好阐述你根据设计策略,在设计上怎么去落地的,设计方案是什么样的,最后上线是如何的。


5.行动和结果


undefined


这个环节需要把你故事中遇见的问题抛出来,以及这些问题你是怎么去沟通解决的。

比如Facebook相册问题,就遇见了新版本排期问题,无法一下子改完,那么设计师针对这个问题,设计了中间迭代的方案,一步一步迭代到最终,以及开发测试问题,担心用户情绪反弹比较大,分批次上线等等。


同时,做这个项目你得到了哪些启发和教训,后续如何去避免等,最后的结果和上线后数据可以帮助我们验证设计的正确与否。这些设计过程中的细节问题和决策,是帮助我们丰富故事很重要的因素。


undefined


掌握好了这个框架,生活中很多事情都可以运用这个框架去讲,比如你要去和别人分享【设计师如何做简历】就可以按照这个框架去讲:


1.开始(故事背景和简介)


很多设计师找工作比较难,作品集发出去无人问津,原因是什么?是找工作人太多,还是大环境不好,那么如何提升作品集呢,怎么才能更快的让你作品集脱颖而出。


2.冲突(问题)


通过查阅了几百份设计作品集,发现一些问题,比如:版式同质化,设计风格单一,文字太多,飞机稿太多,这些是影响作品集质量很大的问题,由于这些问题导致很多面试官看作品集时候看见类似基本都跳过了,所以才导致大家找工作难。


3.情节(解决问题的过程)


通过查看大公司的招聘信息,提取重要关键信息,比如设计趋势,数据研究,系统思考这些关键词出现的比较多,同时查看了全球顶级设计师和韩国设计师作品集,发现好的作品集都是简约的,排版舒服的,那针对这些,你决定从这几个问题去优化作品集:


版式上往苹果简约风格去靠。设计风格上贴近主流,优化作品使得作品手法丰富,同时针对飞机稿太多,优化线上案例,重新按照最新手法来做等。


4.高潮(设计策略)


花了一个月时间,去详细设计你的作品集,同时设计完成后对比之前作品发现明显的提升,同时设计的过程也掌握了一些设计趋势,再投递的时候发现获得面试的机会大于之前。


5.行动和结果


最后获得了一个大厂的offer,但是整个过程中是艰苦的,做作品集中间也遇见很多问题,比如没有人指导,不知道最新的趋势是什么,比较焦虑,针对这些现状当时自己是如何调整的。


运用这个框架简单的一个叙事,你会发现这样的体系化思考能让我们表达时候更上一层楼。


运用XYZ公式讲故事

 

undefined


当我们向别人介绍一个新产品时,无法切中要点,明确表达产品用户和概念,很多人会觉得「他们怎么听不懂,一定是他们理解有问题,不是我的问题」很不幸的是,问题就是在于我们的表达上,分享一个XYZ公式给大家。


undefined


分享给大家一个公式,掌握后,你就能轻松的给别人讲清楚:


X:产品功能


Y:使用产品的目标用户


Z:这个产品赋予用户的感受


这三个问题,与产品,开发的人都有关系,无论任何项目进展,团队都能想起这个产品愿景,从而让我们对产品轮廓更加清晰,同时这个公式的表达能让团队外的人听的懂。


举个例子


undefined


X:微信一款通讯工具,支持单人、多人参与,通过手机网络发送语音、图片、视频和文字;


Y:它的目标用户是使用手机的用户;


Z:这个产品希望链接用户生活方方面面,是一种新的生活方式。


undefined


X:支付宝一款支付工具,它融合了支付,生活服务,保险,理财公益的生活服务平台 ;


Y:它的目标用户是互联网用户;


Z:这个产品希望给人亲近、安全、可靠的感觉。


上述这个XYZ框架,能够很好帮助你表达一个产品功能和定位,希望在你下次晋升或者述职向别人介绍时,能够用上。


最后

 

undefined


回顾下今天所分享的知识点,如何很好的将你项目讲成故事的5个步骤:


1.开始(背景)


2.冲突(问题)


3.情节(解决问题的过程)


4.高潮(设计策略)


5.行动和结果(问题如何解决的,解决过程中发生了什么)


如何向别人准确表达产品功能和愿景,XYZ公式:


X:产品功能


Y:使用产品的目标用户


Z:这个产品赋予用户的感受。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:我们的设计日记

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


如何为券商类产品设计流畅、高效的自选股功能?

资深UI设计者

导语:“自选”作为金融类产品的基础功能,迭代至今已经非常成熟了。放眼望去,市面上主流金融产品的自选功能似乎都大同小异,但是体验下来会发现,细分领域下的设计侧重点却有所不同。


一、把握需求

如果我们将“自选”转化为熟悉的C端功能,它类似于“收藏夹”、“关注列表”的概念,是用户管理交易对象的重要阵地。除了常见的管理对象(交易概念中称作“标的”)、管理分组外,“自选”还会存在对数据和使用习惯的管理需求。

  • 站在业务视角:券商的核心优势在于“交易”,所以业务目标自然为“交易”服务。“自选”相当于一张快捷交易导航,我们提供的诸多功能都是在帮助用户快速、便捷的调整这张表,直到它达到“为我所用”的程度。
  • 站在用户视角:不同交易习惯的用户,对自选的操作频率有高有低,在保证效率的同时,还需要让每一类用户都能用的顺手。

二、竞品调研

1. A梯队:美港股券商,富途、长桥

  • 共同的设计侧重点:功能的组织符合用户心理模型,任务专一,功能精炼,不追求全面、追求使用效率。
  • 共同的弊端:“管理分组”的交互设计不够流畅。

富途“管理分组”采用的交互方案,初期学习成本是很高的,它虽然充分考虑了效率问题,却低估了用户理解上的困难。(截止本文发布前,富途最新版对现方案做了视觉样式上的更新,看来设计师也意识到了该方案目前存在着一些不够清晰的地方,期待后续交互上的迭代。)

长桥将分组的“新建、排序、删除、重命名”拆的很散,理解上不困难,操作起来较为繁琐。

2. B梯队:平台类产品,腾讯自选、东方财富

  • 共同的设计侧重点:相关功能尽可能的聚合在一起
  • 共同的弊端:当用户目前仅想完成一项任务时,产品每次都会同时提供多项任务,操作通常很难专注。用户不可避免的会多花些时间和好奇,来理解与本次操作任务无关的信息

3. C梯队:社区类产品,雪球

设计侧重点:管理标的、分组与数据、使用习惯的设置完全分开

一些细节问题:比如“管理本页股票”,在批量操作的场景下,底部栏却存在不能批量操作的选项

小结:对三类产品的竞品调研也验证了我们最初对需求目标的把握,为券商类产品设计“自选功能”,效率和流畅度是最关键的。设计目标明确了,接下来我们看看目前都存在哪些问题,以及对应的解法。

三、问题与解法

1. 当用户精准搜索一个标的,并将其添加至自选后,并不能在当前完成该标的的分组

如图所示,现在如果想完成上述任务,需要4步、且每次仅能将标的添加至1个组。优化后我们可以通过3步完成,且每次可以将标的同时添加至多个组。

(注:Snackbar虽然源于安卓原生的MD设计系统,在IOS并无此原生控件。但是随着二者在设计上日渐趋同,且控件的应用上也早已互通有无,所以Snackbar在IOS的使用,合理即可,不必纠结于平台差异。)

交互关键点:

  • 想提升操作效率,不仅局限于步数、路径的缩短,它还可能是场景的正确连结、重复操作的合并;
  • 使用Snackbar,本质上是给用户选择的余地。在操作a完成后的2-3秒决定是继续进行操作b,还是离开当前场景。

2. A功能和B功能在自选场景分别有两条触达路径,不过多路径的存在不但没有提升功能的使用体验,反而带来了不小的认知负担

关于“冗余路径”应该保留还是去除,一直以来都存在争议。讨论这个争议的前提是:冗余路径虽然不是最优路径,但是满足了特定场景下用户的特定操作习惯。

当“冗余”只是冗余、没有任何增益时,也要敢于做减法;因为同时还需要考虑一点:出发前的选择越多,用户的决策时间越长。

交互关键点:

在业务方提出为同一个功能再添加一条新的路径时,我们必须要弄清楚,这条新路径是为解决什么问题存在的。不解决问题的需求,大部分是对产品的无效堆砌。做好产品的“守门员”,给出专业的判断,是交互设计师的重要职责之一。

3. 关于“自选”的设置功能,这里会讨论到几个典型的“欲速则不达”的交互问题

1)对功能的整理和归类,是我们为用户留下的使用线索。如果推理时间过长,说明线索的指向性出了问题。

  • 问题:将“管理分组”归至“设置”,分类不清晰;“数据项”Tab中的设置项没有根据相关性进行分组;
  • 解法:在“设置”中去掉“分组” ;数据设置项根据相关性进行分组 (指标→显示→排序)。

2)如果层级 1 包含层级 1.x,那么层级 1.x 的操作不应放置在层级 1 的认知区域。

  • 问题:数据项Tab的“默认数据”放在顶部导航栏,功能层级不匹配;
  • 解法:功能层级调整至匹配。

3)如果用户设置了一些项目,无法在预期场景看到对应的效果,应提前给与说明。

  • 问题:完成数据项设置后,无法在竖屏看到全部生成效果;
  • 解法:在数据项设置页顶部进行生成效果的说明提示。

交互关键点:

注重“效率”是没错的,比如上述case中看似有“效率”的Tab结构。但是这里面隐藏着更多的“清晰”问题。如果一个功能设计的让用户用不明白,也就谈不上“效率”的提升。

4. 最后一个case我们看下互联网产品中最常被忽视的细节-文案

场景1:批量管理标的。

文案问题:按钮表意都是“删除”,带来的实际结果是不同的,存在歧义。

场景2:数据项设置。

文案问题:没有进行规范化处理,增加了选项的理解难度。

交互关键点:

很多时候,一套语义清晰、逻辑顺滑的文案,可以等价于某个功能优化的迭代周期。实际功能点不变,只是替换文案,就能让用户用的清爽明白。这样的“好买卖”,却一直被严重低估。

四、总结思考

遇到同质化较高的需求重构时,初期应扔掉“套路”思维,从用户视角、业务视角推导出主要设计思路。带着问题去分析竞品,推敲竞品在此类需求设计上的精细差异。不要对行业top给出的方案习惯性盲从,要经过思考和反复论证,推导出最适合自己所负责产品的交互方案。

当设计深入到细节,出现了可A可B的选择时,回头看看我们经过深思熟虑推导出来的设计目标。重新评估A/B方案是否符合目标、是否有助益于实现目标。没有太多“怎么设计都可以”的方案,从我们的选择中,也透露了决策的倾向。只是我们需要时刻确认这种“倾向”在整体逻辑中是自洽的。

每一份交互输出都应该是有观点的输出,即使最终我们的观点被业务方、协作方的诸多因素所淹没,仍要保持、增进自己提出观点的能力。那些常被用户生动提起的、打造出特色和性格的产品,都是由一个个鲜明观点铸造而成的。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:人人都是产品经理  作者:cony的小书包

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


如何建立一套设计系统

资深UI设计者

一、项目背景

1. 业务背景

  • 3名设计师协同负责APP的设计工作,设计侧介入时间晚,周期短,由于是v1.0版本,没有可以复用的设计组件,从0-1探索设计风格,定义视觉语言。

  • 前期每天依赖钉钉传输本地设计文件,设计语言不统一,效率低。协作工具不是很理想,后期待优化。


2. 设计背景

  • 当我们开始设计系统的制定时,大部分设计师可能都会先去网上找到大厂现成的设计系统,当拿到他们的成品的时候,会把自己的产品进行拆解和借鉴,这的确能快速解决问题,但是如果不理解其中的组织规则和逻辑,只是借鉴他们现成的设计系统,只能了解个大概,知其然而不知其所以然。

  • 直接复用其他产品的现有组件库并不能完美套用在自己的产品上,不能形成自己的产品调性,甚至有些组件不符合自身产品的使用场景。



二、设计规范的价值

1. 设计层面

  • 随着项目开始成熟,设计也需要一套统一的标准,提升设计质量以及设计的一致性。有了规范及标准,输出才能趋向于稳定,迭代才能有序的进行。

  • 沉淀设计资产,使得设计更加持续地输出价值,减少一次性设计,使设计师不要每天局限在元素样式设计中,而是可以站在更高的层面上来思考业务与体验。


2. 开发、测试层面

  • 与设计规范同步形成研发资产,避免重复造轮子,保证代码质量,降低维护和拓展的成本。

  • 测试避免重复的无意义走查。


3. 产品体验层面

  • 统一产品体验,映射品牌心智。

  • 规范的制定,能有序统一不同页面层级的信息架构,视觉表达。用户在产品终端内,各链路、各阵地的体验是一致的,看到的信息元素,也会有共性的传达。这些共性的元素,组成了品牌的内核,能够帮助用户建立心智。


4. 协作层面

  • 降低不同设计师之间以及设计师与开发工程师之间的沟通成本。

  • 设计师无需再花精力思考定义新的元素样式,既能保证统一性,同时通过复用体系,设计师也可以更高的提升效率,释放一定执行的工作量,可以把更多的精力放在前置思考决策环节,帮助业务、用户提升价值。



三、设计规范的目标

1. 设计风格一致

不同设计师有不同的设计风格、设计手法,项目有多个设计师协作时会出现不同的设计语言,需要统一产出的设计样式。

用户在使用产品时可以感受到统一的设计语言,从而降低用户的理解成本。


2. 提高设计效率

通过组件库高效协同工作


3. 建立稳定迭代机制,完善设计流程

版本迭代时,按照设计规范统一设计语言,有不完善之处,和项目设计师讨论确定方案,补充规范文档。



四、如何搭建设计系统

1. 设计原则

对于设计系统而言,在开始的第一步首先要确定一个标准,一个指导原则,在遇到不确定的设计过程中,依靠设计原则来引导方向。   


  • 其他产品设计原则

  • 有赞:产品原则:产品定义、产品设计、产品研发、产品运营。设计原则:高效、友好、安全

  • TED:追求永恒,而不是追求潮流

  • Pinterest:清晰易懂、充满活力、牢不可破

  • Airbnb:统一、通用、风格化的、对话式的

  • 我们的APP:扁平、亲和、简约


2. 色彩规范

主色

  • 采用品牌色红色,色相根据产品调性有所调整

  • 主色色阶使用扩展色生成器生成,在开源网站上根据自己的需求调整参数,创建色彩体系。  

  • 在制作组件时,将颜色添加 主色、辅助色、中性色为一级分类,例如:01_主色;再添加二级分类,例如:01_主色/red ;三级分类根据颜色饱和度,用x%命名,例如01_主色/red/100%。

  • 命名需使用「 / 」 符号区分层级结构。定义好颜色和命名后,将每个颜色转换成 Symbol,便可统一调用。



辅助色

  • 我们不仅需要品牌色来传递品牌价值,我们还需要辅助色来组成我们产品体系的颜色搭配,实现不同功能点的视觉呈现。目前编程猫APP辅助色暂定为黑色。

  • 对于辅助色的选择,可以选取了同类色、互补色、对比色三种辅助色系。


  • 同类色:

  • 色环上相差15-30度的色彩,非常舒适,色彩过渡自然,温和,给予用户安心,信任的心理预期。并且于品牌色的色相冷暖性质一致,和谐统一。(将品牌色设置为最中间的点,就可以得到两个辅助色)如下图



  • 互补色:

  • 指在色相环上角度为180°的色彩,比如我们最常说到的3组互补色:红和绿、蓝和橙、黄和紫。如下图:



  • 对比色:

  • 没有互补色那么严格,指的是在色相环上角度在120° - 180°之间的色彩,并且理论上来说,互补色应该也是包含于对比色之内的。比如:粉色和绿色就是对比色。如下图:



  • 校正辅助色

  • 校正的原则一:色相差值不能超过15近似色的选取,保证色相不超过15,保持统一的视觉体验。

  • 校正的原则二:尽量保持感官明度一致

中性色

  • 中性色作为辅助色,也是调和颜色视觉的一种。它本身不带情感色彩,可中和其他任何颜色,自然界中没有纯黑或者纯白的颜色,所以将纯黑色降了纯度,使之符合感觉舒适程度。中性色也常用于字体的使用,并且以不透明度的形式落地。

  • 在中性色组件里,由于文字、背景色都属于中性色,分别定义了三大类的二级分类,分别BG、Black、Text


功能色

B端产品多用,此处不过多赘述。


3. 字体规范

字体的命名方式为序号_标题类型/字重/对齐方式/字号的层级结构,例如「01_主文字_标题_按钮文字_正文/加粗/Center/28px」;一级分类定义了五个大类:

  • 主要的文字:主文字、标题、按钮问题、正文;

  • 次要文字:副标题、辅助文字、弱标签字;

  • 禁用文字;

  • 标签文字:文本链接、功能文字;

  • 特殊字体。


4. 栅格系统

我们都知道多数栅格里的间距都采用8/6的倍数,有了8这个基数后其他都很容易定义,但是前期我们2位设计师在设计初期页面时,1个采用6倍栅格,1个采用了8倍栅格,导致设计稿不统一,浪费了时间修改调整

      

那具体应该是用6还是8呢?

  • Web端常见框架Bootstrap用8为基数,响应式布局更灵活

  • 减少出现奇像素偏移造成模糊

  • 开发更容易理解的数字8

  • 能被最多的屏幕尺寸整除适配



5. 图标设计

一级分类分为导航类、功能类、系统类三大类,二级分类根据场景和名称进行细分。前期二级分类用尺寸来进行分类,但是后期讨论用尺寸定义寻找某个图标不够便捷,如果找「返回」,设计师并不知道这个返回是多大尺寸的,寻找起来就比较费力,所以改成了按照场景分类。

 

根据图标形状,按照方形、圆形、横向、纵向输出图标绘制模版,便于用户感知到统一的图标风格,也便于设计师对图标进行绘制和调整。


6. 通用控件

根据原子理论的定义和命名方式,依次完成对其他通用控件的原子、分子和组织的定义,例如:按钮、列表、空状态等,整个过程都是通过 Symbol 的不断嵌套,最终实现组件库的创建。


Diolog 弹窗

  • 满足基本组件需求,跟随文案内容自动适配弹窗高度,按钮颜色可更换,文案字符样式可更换

  • 使用包含具体动作的动词,即使不看上下文也可以通过按钮判断,而不是使用【确定】、【取消】等宽泛的词汇。



Default 缺省页

给用户提供解决方案,而不是让用户自己寻找问题原因

List 列表

  • 符合前端-盒子模型

  • 盒模型是一种描述对象尺寸和间距的方法。它由 4 个组件组成:边框、边距、内边距和元素本身的尺寸。

  • 边框:围绕元素边缘的描边粗细。大多数设计工具不允许这影响整体间距和尺寸。

  • Padding:元素边界与其子元素边界之间的空间

  • 边距:元素边界与相邻对象之间的空间


在做每个模块时,不仅仅只是把默认的文本/元素制作出来,它的热区也要让开发可以理解,按照盒子模型的原理,比如在做List,「单项输入」文本的行高,整个单元格的高度需要用白底画出来,明确padding值;与其他元素/设备之间的边距(Margin)要也表示出来。



五、维护与管理

1. 存储地址

  • sketch cloud云端同步

  • 云端管理会有一些较大的优势。比如更新通知更方便、每次大家访问,都能下载到最新的规范,维护管理起来也会省事一些。


2. 更新同步

规范的改动性不要过于频繁,通常半年及1年左右的时间以上,进行一次较大迭代是比较合适的。每次更新以后,需要邮件或者其它形式,周知所有跟规范可能相关的人员。同步的信息主要有  :

规范本次修改范围及修改原因;

  1. 修改点罗列

  2. 优化后的版本号

  1. 最新的文件同步

  2. 推进变更计划




    蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

    截屏2021-05-13 上午11.41.03.png


    文章来源:站酷  作者:AmberU

    分享此文一切功德,皆悉回向给文章原作者及众读者.
    免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

    蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档