首页

UI/UX设计师如何打造一个完美的开局账号

seo达人


图片

完美开局的账号就需要有3个前提:

1.多金,够氪 

2.很欧,运气爆表 

3.很肝,以勤补拙

对于设计师来说,怎么样才是完美的开局账号呢?在我们身边也会经常看到一些非常牛的设计师,他们可能很年轻,但是设计能力很强,又有非常好的学历背书,一毕业就能够拿着别人3、4年都拿不到的薪水。我们就会觉得这样的开局就是相当完美了。

图片

但是这样的开局账号也几乎是极少数的,好的学历背书大部分都是要靠父辈们的积累,例如美术生学设计专业的学生其实开销是很大的,相比其他的专业在这个学习过程中需要不断的氪金,这点不可否认。

另外,一个人在成长过程中的教育、受到的熏陶、环境的影响也会影响一个人的发展,有的人说天赋好所以他们起点高,进步快。

但是天赋也需要不断修炼,比如你在幼年的时候就展现出对艺术创意的敏感,但是后天家庭并没有资源培养你,那么等你长大了这个天赋可能也就不是你的优势了。

所以别看那些年轻有能力的设计师这么厉害,大部分其实都是家庭殷实,前期投入了非常多的资源才能达到的。大部分家庭都比较普通,所以抛开这些条件,我们来聊一聊如何让自己的开局能够比其他人更好。

开局的几个阶段

那么我们分为几个阶段来讲,分别是:大学期间、初入职场、职场3年

 

图片

账号需要养成,但是开局非常重要,其实这几年我接触了这么多设计师大部分都不是科班毕业的,因为大家考大学的时候其实对这些专业和以后职业的发展是不清晰甚至很迷茫的,所以很多专业的选择一般也会根据父母还有亲戚的建议做选择。想当初我报了电子信息工程专业以为是去玩电脑的,结果课程内容却是焊接电路板,写代码。所以已经是美术专业的同学们要庆幸自己已经比大部分设计师的起点要高了。

那么无论你目前是什么专业,但是后面想从事和设计相关的工作,在大学期间我们可以做一些什么事让自己有更高的起点。

1.1.提前转变思维

高中三年又经历了高考难免会让大部分同学觉得终于解脱了,可以到大学去吃喝玩乐了,从快乐的角度我也会这么选择,毕竟这么多年读书读下来确实很压抑,所以我自己大学四年也几乎都是玩过来的,但是再让我选一次,我一定不这么做。

在大学期间,最重要的事情是什么?我认为是提前找到自己喜欢的事并且付诸实践,思考他将来成为你职业的可能性。可能很多学生目前还不会去考虑职业,只想着怎么修好学分,顺利毕业,但是毕业之后去从事什么工作还没有勇气或者没有头绪去思考。那么即使你不是设计专业的学生,你也可以在大学期间输出设计相关作品。但前提就需要自己花时间去学,相比于科班的同学会更加辛苦一些。

图片

这几年见过的一些大学生也都相当的“卷”(这里的卷不是贬义),很多学生从大二开始就自己做自媒体做设计公众号,然后输出大量的设计作品和观点文章传到设计平台,还没有毕业就已经拿了不少的平台推荐,也正因为这些输出给自己的实习工作拿到了不错的大厂机会。然而目前很多工作5、6年的设计师这几年的作品加起来还没有这些大学生来的多,因为很多设计师都是被动转行,没有设计的初心,工作项目不总结,业余时间不练习,遑论高级或资深?

所以我建议想要从事这个行业的人在大学就要思考清楚,自己是否喜欢做设计。设计这个行业和一般的职能类工作不一样,它的上下限都是很高的,如果你去做后勤职能,就算你不喜欢做,按部就班依然可以完成,可以混口饭吃。但是设计不行,设计师只能上不能下,如果你原地踏步3年必然会被淘汰,你不喜欢它你就不会把时间和精力放在上面去提升,这些个例子在很多咨询我课程的同学中已经屡见不鲜了。

大学也是为了让一个稚气未脱的学生能够转变成独立思考的成年人的一个过程,在这个过程中你会学到很多社会、职业上的规则,比如怎么去运营自己?怎么给自己创造机会?怎么获得更多的资源?通过什么手段渠道提升自己等等。

1.2.学会输出作品

在大学中如何输出作品呢?一般有几种途径:

1.参加各大平台举办的设计比赛,例如站酷

2.跟着自己的导师输出项目作品 

3.参加一些培训课程输出作品 

4.自学输出作品

那么我首先推荐的是通过参加比赛去积累自己的作品。虽然参加比赛不一定能够获奖,但是你可以看到自己的设计作品和其他设计师相比有什么不足,从而优化改进自己的弱项。如果能够获得一些奖项,那么你去实习或者毕业找工作都是很好的加分项,同时也能增加你个人的曝光,很多甲方或者设计团队负责人会从这里来挑选合适设计师进行合作和招聘。

图片

然后有同学也想问,如果想找实习没有真实项目怎么办。大部分真实项目一般都是来自导师的外部项目。运气好的话你的导师给你的项目刚好是和你以后实习岗位相关的,如果没有真实项目也不要太担心。因为除了一些要求特别高的大厂实习岗位,一般企业的实习工作其实只要你输出的作品和手活好就足够了,是不是真实项目没那么重要。

不过话又说回来,这也是让各位同学在高中就好好读书,尽量去一个好的学校读这个设计专业。好的学校有好的老师,有好的老师就有好的资源就有好的项目,就有更多的机会去好的公司实习,就是这么回事。所以如果你是一般大学的设计专业,就得看老师的资源怎么样了。如果没有一些好的项目,也可以选择去上上课,但是这个怎么选择课程水就很深了,这里不多赘述了(你们懂得)。

所以你们想想,当你其他室友在打游戏看剧,而你在做设计练习,别人可能会笑你别那么努力,但是你一定能够先找到工作然后请他们吃个饭。

图片

1.3.找实习工作

如果你能够做好前两点,不夸张的说基本已经超过95%的同龄人了,完美开局账号也已达成了1/3。在大学期间最后一件事那就是找实习工作,这里我要说的是实习尽量去大厂。如果没有这个机会也尽量去找有一定规模的设计团队的企业。

实习的目的不是为了毕业答辩,也不是为了赚点外快,而是为了毕业之后的第一份正式工作做准备,积累真实项目的经验。大厂的实习机会是不简单的,他们主要面向211、985等设计相关专业的本科及以上的学历学员进行实习招生,像交互、用户研究岗位只向某个固定专业的硕士研究生开放。

图片

那如果不是这些高等院校的学生就没有机会了吗?当然不是,设计这个岗位学历是需要的但不是最重要,还是要看设计以及综合能力的,即便你不是211、985,但是你的设计足够优秀,那还是可以获得大厂的青睐的,学历只是一种筛选条件。

如何找到比较好的实习机会,我这里建议大学生们可以多上像站酷一样的设计平台,去结识更多优秀的设计师。为什么要这么做呢?因为大学生往往想投简历都是通过一些招聘网站去投的,这样的效率很低,因为即便你的履历还不错,但是依然要等hr重重筛选过之后才会到设计负责人这边。所以我建议你在设计平台有足够多的积累之后多去结识一些和你方向比较接近的设计师,他们可能就在某个大厂在职。例如你是画插画的,那么你可以关注这个领域的一些站酷推荐设计师,加一加联系方式,现在很多大厂的设计师也背负着招人的指标,实习可能不算正式指标,但他们也会通过社交平台进行发布,这机会不是来了么~

如果有多个实习机会怎么筛选。

1.选择和自己规划方向一致的岗位。大部分企业招聘实习生,是为了解决一些琐碎的工作,而不是为了培养,所以实习生的工作内容是很杂的,如果你本身的方向是做UI/UX的,但是你到一家公司却不停的做平面的工作,这样就会很浪费时间,甚至无效产出。不过有一些大厂其实也会让实习生去接触更多岗位的工作,是为了找到更契合的点,并且让实习生去熟悉不同岗位的工作内容,提高协同效率和个人综合能力。

2.选择有机会留下来的。同样的能力,校招比社招便宜很多并且成本低,很多实习生无法转正是因为企业没有多余的hc,也就是这段时间不招人。不过也要看设计团队的需求,如果只是缺人干一些重复性工作的话,留下的概率比较大。但是如果缺的是一些专业技术人才或者弥补团队能力空缺的话,实习生机会就比较小了。

图片

 

图片

2.1.很肝才会很欧

咱们已经靠自己的努力步入了职场。但是第二阶段我要讲的是第一阶段没有做好的同学们,在这个阶段要做什么。假如你是从三流大学毕业的,但是某些机缘巧合你入职了一家公司,正从事着设计的工作,这个时候怎么样再把自己的账号打造的“完美”。

每个人的机遇不同,但是时间是相同的。有一句话叫做成年人只能被筛选,不能被教育。我觉得有失偏颇,因为只有那些固步自封的成年人才不能被教育,比如我曾经遇到过两个背景比较相似的同学,都是从培训班出来之后才进入职场做设计的,基础可以说几乎没有,只学会了软件。一个同学的基础和天赋好一些,但会有一点优越感,每次作业没有按量完成,给我的理由是这些界面他以前画过不少了,所以就只交了几张。而另一个同学呢除了完成我布置的作业以外自己还去画更多的界面,两个人同一个作业的结果在量上就差了好几倍,最后结果显而易见。

刚进入职场的第一件事就是不停的肝,肝什么?肝到什么程度?我举个例子,例如你现在是一名初级UI设计师,你的工作是绘制UI界面、图标、插画和一些运营海报之类与视觉相关的工作,那么你第一个阶段的目标就是能够连续拿到3个站酷的编辑精选推荐。无论是成套的UI界面也好,图标也好,只要连续拿到3个编辑精选就可以,中间需要连续,比如第一次2火,第二次1火,说明你设计的结果不稳定。同时,时间周期必须在2个月以内,务必利用自己所有娱乐的时间去肝这些练习。当然你除了上传站酷,也可以发给我评估,或者一些行业内优秀的设计师去评估都可以。

图片

再下一个阶段的目标就是拿站酷首推,站酷首推的含金量还是挺高的,拿10个编辑推荐也没有拿1个首推来的高,如果你可以靠设计作品连续拿到3个首推,那么基本拿到了大厂的门票。这个时候你会收到很多猎头以及大厂设计负责人的私信,不要怀疑,朝这个目标去努力就对了。至于怎么拿首推,我以后再做一个分享。

刚进入职场,重心不要太放在项目上,而是不断打磨设计的专业技能,在设计初期最重要的是两件事:1.掌握各种设计技巧与风格 2.提升自己的审美与认知。

2.2最好找个“师父”

如果设计团队里的领导或者组长愿意带你,那么恭喜你你的运气真的很好,因为去外面找个师父是很难的,而且也很贵。有人说怎么拜师还要收费?我看电视上、小说里,不是别人要抢着收徒弟吗,这怎么还要徒弟给钱呢?古时候收徒是觉得这个人根骨不错,以后能有大作为,同时可以传承衣钵弘扬门派。现在徒弟们学会了就自己飞走了,师傅们也没有衣钵要继承,反而师傅们还要养家糊口,所以找个师父变相成为了一种“交易”。

公司里有人带和外面找师父有什么区别?简单说就是利益关系,大家自己揣摩。师父的主要作用是引导,在关键时期和阶段可以给你指明方向,而不是帮你解决疑难杂症。所以一个好师父可以让你少走很多弯路,这是可遇不可求的。

图片

 

图片

3.1.做好职业规划

其实大部分人对职业规划很迷茫,不管是初入职场还是目前已经工作了5、6年的老油条们,职业规划就像是海市蜃楼,看得到摸不到,大概知道什么意思但是自己也不会做。

最近有一位工作了6年的设计师小伙伴遭遇了裁员,说实话6年在任何行业里都已经算是中流砥柱的员工的,对自己的专业、职业能力也有了比较深刻的认知,但是他就非常的焦虑,被辞职后简历和作品都无人问津,这就是很典型的缺少规划所导致的走一步看一步的普遍现象。

职业规划是需要有丰富的职业经历和实践才能在阶段性的生涯节点中做出计划和调整的,如果你没有任何经验是无法去做职业规划的。职业规划最重要的是我们对该职业的定位以及寻找正确的方向。比如你现在是个洗碗工,你想对自己做个职业规划,如果你足够敏感,那么你一定要思考到这个职业的瓶颈和上升通道的阻碍,什么时候会出现自动洗碗机,出现了你如何应对,有什么差异化能力比的过自动洗碗机等等。

图片

3.1.1职业定位

对于UI/UX设计师来说,职业定位很重要,它能够帮你看清楚职业的特质,可以指导你5-10年的职业变化与发展。所以比如你现在是做UI设计的,那么你要思考这几个问题:

1.UI设计的工作内容、作用和职责具体是什么,在不同规模企业中有什么区

2.UI设计师的工作可替代性是否强

3.UI设计岗位在行业中的天花板是怎么样的

4.UI设计师的岗位晋升条件与级别是怎么样的

5.你作为UI设计师的城河是什么

6.该岗位是否有政策风险

7.该岗位与上下游的其他岗位相比价值如何

8.如何量化、突出该岗位的价值

所以如果你把UI设计师换成洗碗工或者其他岗位,再来念一下上面的8条。

3.1.2个人特质

个人与职业需要契合才能走的更远,如果你生性胆小、内向、怯懦,那么就不太适合去做销售,当然如果你有勇气去锻炼、改变自己那也可以,但这很难,所以我们有句话叫做江山易改本性难移。该职业的工作内容、职责对我们来说,如何发挥自己的优势,你个人有什么特质在该职业中能发挥出来,这点很重要。

其实任何特质的个人都可以去从事大部分职业,只是职业的高度有限,例如你本身不善于言谈、辩论,个人内向、社恐,不善于人际关系处理,那么,不进行专门的改变和调整,你的职业生涯和管理岗位或者专家等高级别岗位就无缘了。特质当然也是可以改变的,例如你可以自己上台进行演讲,大量的挑战会逐渐改变你不善于社交的现状。

所以你先要认清自己个人特质的范围,再结合这个职业的定位,我们就可以知道自己应该去改变什么,在该职业中的优劣势是什么。不过我遇到的大部分人都是,我很清楚,但我不改。可见一斑。

3.1.3晋升网格

谢丽尔·桑德伯格在《向前一步》中提到:职业通道不是线性,而是一种网格式的。我理解的大概就是这样。

图片

这种形式的职业通道设定的目标不是具体岗位,而是个人综合素质的能力提升。也就是说我们的目标不是朝着下一个级别去努力,而是在一个序列中前行几步在平行到另一个节点去工作。例如你UI设计可能从初级晋升到资深,但是下一步你可能会去做交互的序列,当你交互也达到资深后你又可以去做产品,但是这整个职业推进的阶段我们都是一个人能力为核心目标去工作,而不是为了某一个岗位更高级别。

图片

这样的职业通道好处就是你的能力会非常的综合,能力会更全面。换句话说,你如果想达到UI设计专家,那么你不能只会画UI界面,你不会交互、用户研究或者更多视觉技能肯定是不行的,但我们最初的目标并不是为了达到专家,而是让自己有更多选择。

3.2.黄金3年

我们需要利用前三年来打造一个完美账号,那如果把整个规划做到5、6年,那就不能算是开局账号了对吧。为什么要规划三年呢?我希望大家在前三年可以找到自己的定位和目标,这三年里面你可以根据自己的能力和需求去寻找不同的平台,看看以三年为期限,自己能不能也达成每年翻倍或者3年番两番的目标。(这里不是鼓励大家盲目的跳槽)

首先我建议大家先利用1年左右的时间去提升设计技法,一项为主多项为辅助,例如你主要修炼UI界面的技法,同时辅助插画、动效和更多表现类技法。为什么只用1年左右呢?

所以这1年其实时间很短,除了自己的工作以外,你需要把时间都拿出来做技法的修炼,是很枯燥并且没有回报的。

图片

设计师要学的更聪明,公司项目不行就要利用业余时间做额外的输出,很多人就指望等下次跳槽的时候拿着现在公司项目的包装放到作品集里去面试,如果你这样做了,那么你开局账号也就废了一半,为什么呢?因为你的第一次跳槽是整个职业生涯中最重要的一次,甚至比第一份工作要重要的多,第一份工作你可能不会选,对这个职业、行业的认知也几乎没有,随机性很强。但是当你要选择第二份工作的时候,你是个成熟的宝宝了,自己也有了初步的规划,你有机会、有能力去选择更优秀的平台去输出、学习。但是前提就是你能够在第一份工作的时间里去积累能量,让自己的能力有一个质的变化,否则第二份工作也几乎和第一份工作差不多。

图片

在第二年的时候,如果你第一年足够努力了,那么你可以找到第二份更好的公司,虽然不一定是大厂,但是至少可以在一个有规模的设计团队里工作这个时候你接触到最多的应该是更多的项目、方法和各种不同的思维。你需要和更多的人打交道,接触更多复杂的业务以及学习更高深的设计技法。那么在第二年的阶段,我希望大家可以去深入项目,去关注项目的本质和目标用户。需求是怎么来的,设计方案为什么这么做,如何培养自己的产品和体验思维。同时,业余时间也依然要进行输出,但是和第一年不同,工作与业余时间的分配要更侧重到工作上。

图片

第三年,要学会自我驱动,关注设计价值的量化以及一些实用的方法,通过项目来将设计方法打磨的更成熟,形成自己的一套理论。同时自己的设计输出也要围绕着这些去做。

以上三年的阶段性成长基本就是这样,但这些都是比较理想化的情况,实际可能需要更长的时间或者更复杂的因素要去考虑。最后,大家觉得这样3年肝出来的账号可以算“完美”吗?

 

原文地址:应谋鬼计(公众号)

作者: 应骏

转载请注明:学UI网》UI/UX设计师如何打造一个完美的开局账号

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


如何配色

seo达人


图片

认识色彩饱和度的情绪:

因为不同的配色会带给观者不同的情绪感受,只有在先了解不同颜色特性的基础上才能为我们的配色指明方向。我们做出的画面想要传递什么感觉,这种感觉对应什么颜色?只有搞懂了逻辑,在之后的工作中,才能为我们的配色方案指明方向,而不会一开始就被难住。如果我想配一个积极热闹活泼的画面,颜色怎么配呢? 如果想配一个温柔恬静小清新的画面颜色又该如何选择呢?他们都有什么特点,为什么会这样?往下看

 

积极活力:

我们先来看几组图片

用吸管工具提取一下它们的颜色观察

图片

我们可以看到这类海报视觉上都能给人一种热闹、动感、活力的feel。

通过颜色提取,再观察它们选色的位置,可以发现它们的的配色的纯度和饱和度都非常高。

这是为什么呢?接下来我们降低饱和度看看会发生什么:

图片

可以很明显的感受到画面中已经失去了那种动感、热闹和活力的感觉了,整体更趋于平稳和安静。

所以,高饱和度的配色会带给观者活力,动感,热闹的情绪。常常应用于一些电商、运动品牌的视觉项目中,用来渲染or打造年轻、活力、热闹、动感等氛围。

 


温柔平静:

我们再来看一组:

图片

这一类图片就会给人一种文艺小清新的feel,这类配色和热闹、运动的感觉完全不同。

都是低饱和度高明度的颜色。所以,低饱和度的颜色会给人传达平和、放松、舒适的心情。

 

轻松休闲

图片

这一类的图片就给人以中正休闲的感觉。饱和度都趋于中性,不过高,也不会过低。

其实原理就是在取色器里,

图片

我们看同一张图片,给我们的感觉:

图片

高饱和度配色给人感觉冲击力很强,具有活力,对比非常强烈。

中饱和度画面就弱了一级,视觉冲击力没那么强。画面会放松一些,适合传递休闲的感觉。

使用低饱和度的颜色时,我们看到画面更冷静了,有些高级灰的感觉。

在以往的实际工作当中,我也是先用饱和度来定画面的大情绪基调,只有大的感觉对了,后面才不会出大问题。比如像一些战斗、pk、热血类的banner,都用高饱和颜色:

图片

我们可以来吸取他们的颜色看看:

图片

基本都是靠右边的颜色。

而像我在做下面这种类型的banner时,就会使用到中饱和度的颜色,给人一种轻松休闲的感觉:

图片

我们再看下他们的色域:

图片

都是趋于中间的位置。

最后一种低饱和的颜色,像下面这种作品,就有一种文艺、清新的感觉:

图片

再来看看他们的颜色色域

图片

都是比较靠左的颜色。

用饱和度来定画面的大基调,还是非常好用的,可以说是屡试不爽,大家可以好好理解并且用起来!

 

 总结:

图片

高纯度,高饱和度的颜色,会让人感觉激动、积极、动感、醒目、记忆深刻等特点感官,常常应用于一些电商、运动品牌的视觉项目中,用来衬托年轻、活力、热闹、动感等氛围。

图片

中饱和度的颜色饱和度和纯度都适中,显得中正平和,又不会有低饱和度那样的“平缓“,想要视觉年轻一些,但又不想饱和度那么的强烈,可以尝试选择中度的颜色。

图片

低饱和度的颜色,会给人平和,舒适的感受,常常会结合大量无彩色一起使用,让画面传递出简约,自然,小清新文艺的感觉。

“你想给别人传递什么”

配色的方法有很多,搭配在一起千变万化,但都离不开一个点。你想给别人传递什么感觉?是要年轻、活跃,还是安静、唯美?只有明确方向,在想想这个方向上的颜色有什么规律可循?搞清楚目的,我们再去做配色是不是就会轻松很多?

 

原文地址: 菜心设计铺(公众号)

作者:慢热


转载请注明:学UI网》如何配色

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


如何有效提升产研效率和质量

seo达人


图片

 

目录

  • 一、什么是系统化解决方案,什么样的团队适合做
  • 二、如何输出、推进设计解决方案
  • 三、解决方案的管理和发展

 

一、什么是系统化解决方案,什么样的团队适合做

1、什么是系统化解决方案?

大多数日常需求大多是从单点出发,当点变多变复杂了,就容易出现上述说到的现状问题。所以解决方案需要基于业务全盘进行设计抽象:从元素——组件——区块——页面——功能流程沉淀设计规则并代码化,来灵活提供拼装N个不同页面的机制,帮助团队更系统化的进行产品设计。从组成内容不难看出,解决方案是需要建立在基础组件基础上,与基础组件、复杂组件、行为模式共同组成设计系统的【功能模式】部分。

图片

图片

 

2、什么样的团队适合做

解决方案是一套相对稳定的设计机制,所以在产品初期或团队建立初期,产品可能经常会调整的情况下,并不适合做。初期可以借助成熟的设计系统来减少投入成本。而到成长期可以根据业务的发展梳理基础元素、组件,选择性的建立部分稳定且利用率高的解决方案,并持续发展,保证解决方案可以起到指导和提效的作用。随着产品或团队逐渐成熟,解决方案也应该随着一起成长,相互影响相互作用。

 

二、如何输出、推进设计解决方案

1、由大到小的进行信息拆解

1)对产品页面(尤其是重点功能)进行盘点,划分页面类型:比如列表、表单、详情、dashboard;

2)对页面中的内容进行区块归类

3)对区块中的信息进行拆解

图片

这三个过程下来,对于问题、规则、规律都会有一定的概念。以一个后台系统为例

1)页面大类主要是:列表、表单、详情。

2)其中列表的内容大致区块分为:页面标题区、列表操作、列表筛选、列表内容,到这个阶段已经可以发现,相同区块位置就存在不稳定,在后台系统中可能影响面不会非常大,但对于内容复杂繁多的工具或C端界面就会容易出现找不到的情况。

3)不同区块的内容拆解,同样也会发现一些细节问题,比如筛选的样式、规则不一致,列表操作的方式、位置、样式、交互不一致等等

图片

 

2、抽象、重组:从布局——区块——组件——设计规则

从第一步全盘的信息拆解和归纳, 已经发现问题, 这一阶段主要2点:第一是如何通过设计规则来避免同样的问题产生,第二是如何通过简单的规则重组减少多人合作记忆复杂度。思路类似于设计一个界面,首先得有一个布局划分,不同的区块要放哪些内容,再到区块里的细节内容规则,从而抽象出由布局到区块的设计规则和可复用的组件。

以前面说的列表为例

1)区块主要是4类,明显的问题是区块位置不稳定,所以在布局结构上,需要定义1-2个稳定的可配置的布局框架来适应不同的内容

图片

2)不同区块梳理组成内容,内容细则

图片

3)标记出可组件化的内容及规则

图片

4)提炼整个过程中通用的设计规则,作为全局的指导。如:国际化、排版规则、超限规则、适配规则、文案规则等等。

图片

通过布局——区块——组件——设计规则,可以灵活的进行页面拼搭

图片

 

3、落地代码库

区分通用层和业务层,通用层落地到通用模板市场,利用脚手架生产新页面。业务层面的落地则是基于通用库封装具备业务属性(如:业务主题、业务数据、业务拓展方案)的业务库来生产新页面。

目前群核设计团队建立了一套平台通用的解决方案,适用于所有中后台产品。业务属性比较强的产品也基于通用解决方案封装业务层面的解决方案,同样的思路也应用在不同体系的工具场景中。整体实践下来,产研效率提升近50%,甚至完全解放了一条业务线的设计资源。产品体验的一致性、上线质量也有明显的提升

图片

 

三、解决方案的管理和发展

解决方案作为设计系统的一部分,与设计系统一同管理,业务设计师使用系统来输出,反馈问题或需求给系统,有系统设计师判断可行性,周期性的管理,及时更新并在内部互通,促进互相成长和发展。

解决方案与设计系统的发展有一点不同的是解决方案有更多业务化的内容,业务团队根据业务迭代维护解决方案。当业务的方案达到通用级别,则列入到通用库。

图片

这些方法和思路也并不限制行业或产品类型,仅是在我们当前服务的产品体系下总结的方法。当然解决方案并不能解决所有问题,只是希望在提供更系统化的设计方法和模式的同时能减少重复工作提升效率,让产研团队有更多的精力和时间投入更有价值的事情。

 

原文链接:酷家乐用户体验设计(公众号)

作者:十元

转载请注明:学UI网》如何有效提升产研效率和质量

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


从4个方面完整解析栅格设计

分享达人

本文主要介绍等距栅格,旨在为有需要的同学解析栅格,从概念、结构和设计上更有效、自信地解决栅格问题,其实主要还是自己对栅格体系的查缺补漏。大家可以对照目录跳着阅读。

事实上,绝大多数的设计师都知道栅格很重要,简单点就是等分运用在内容层。当我们仔细研究栅格相关原理时,只要不嫌麻烦,就会发现在栅格系统下能更快解决设计问题,并让设计更具功能性、逻辑性和视觉美感。

万字干货!从4个方面完整解析栅格设计

栅格是什么

1. 栅格与网格

栅格与网格的本质其实是相同的,实现有组织的设计最简单方法之一就是应用网格系统,约束性地为你提供了一个非常基本的设计框架,这是一种久经考验的技术,最初运用在印刷版式中。网格与栅格英文都以“Grid”来表示。但一般我们更愿意在平面设计中更多的称为 “网格”,会存在上下或倾斜,在网页端或移动端中更多的称为为“栅格”。

常见网格系统有三种:直接分割,等距分割,数学分割。本文主要介绍等距栅格,网页中的网格是指使用垂直和水平(较少)等距辅助线对布局进行的划分,它形成了用户界面的基本结构或框架。

万字干货!从4个方面完整解析栅格设计万字干货!从4个方面完整解析栅格设计

平面设计一般用到的是固定的纸张规格,宽度和高度都是固定的,网格会存在上下或倾斜的视图;在界面中栅格宽度跟随不同设备,高度由内容多少来决定,是上下视图。

万字干货!从4个方面完整解析栅格设计

界面栅格系统是从平面网格系统中发展而来,以依据一定的规律、合理设置基准线来指导和规范界面中的如文本、图像、按钮和其他元素,保证页面的每个区域能够稳健地排布起来。栅格系统的使用,让界面信息呈现更美观易读、更具可用性,对于前端来说,网页也将更加灵活与规范。

2. 栅格的设计哲学

将栅格视为一种秩序系统来进行使用,是设计师某种特定的精神和态度的表达,它体现了设计师是以一种结构性、预见性的方式来进行构思和设计。同时,这也是一种职业信仰的体现,设计作品应该是易懂的、客观的、功能性的和具有数学逻辑美感的。

用结构化、系统化的栅格手段进行设计,对设计是具有极为重要的意义的。使用栅格系统就意味着设计遵循普遍与合理。系统化和清晰化、集中精力看透关键问题、用客观取代主观、理性地去看待设计过程。

3. 栅格的价值

产品设计中,参与设计的人员越多,用户设备越多,屏幕越多,设计师就越需创建一套栅格系统来组织内容,使设计内容与细节能适应更多场景。合理的栅格系统可以通过调整布局满足产品各设备尺寸的需求。

有序可依,提升协同效率

对于设计师与团队:栅格系统定义了一套底层的、统一的测量单位,当设计团队内对此达成共识时,可以避免因屏幕适配、比例换算产生的像素偏移,适配多种屏幕,提升精致细腻程度,同时保证了设计稿件中元素属性的一致性和规范化,并有效降低设计师的决策成本,提高不同设计师之间的协同效率。同时避免了设计师与前端工程师在细节上的反复沟通确认,提升了整个开发效率。

布局规律,减少认知成本

对于用户:运用网格系统能够让设计更有秩序和节奏感,规避了不同设计师理解不同造成产出差异的问题,如页面节奏,空白等。在保持与原先展示内容基本一致的情况下,页面信息结构更加清晰,提高阅读效率,减少认知成本,提供一致性体验。

4. 栅格的的组成

栅格使用列在水平方向上拆分页面,以有组织的方式对元素进行布局,并模块化设计多个页面和组件。同时栅格还定义了一组固定的测量单位,指示每个设计元素遵守的尺寸,间距和对齐方式。

最小单元

网格的基本构成就是单元格,由格子组成网。间距都可以用最小单元来增加或者减小,最小单元格是所有设计元素(从排版到列,框,图标和插图)的几何基础,它为所有创造性的决策提供了结构和指导。所以栅格系统的重要一步就是需要先定义好栅格的原子单元大小,我们以最小单元去定义网格系统。

最小单位推荐 8px

目前 web 端最普适易用最小单位的是 8px,我们利用 8px 建立网格,8 的倍数组成了列、行、框的尺寸以及它们的边距和填充,使用 8 的倍数来定义模块的间距与元素的尺寸。

万字干货!从4个方面完整解析栅格设计万字干货!从4个方面完整解析栅格设计

当我们熟悉最小的栅格单位 8px 以后,能有力的减少决策时间。整个设计的元素大小,尤其是间距可以快捷的在脑海中反应出来,8、16、24、32、40、48、56、64、72、80、88、96、192 等,这里都是 8 的倍数或能被 8 整除。让设计师带着工程实现的思维去考虑页面布局,设计侧和工程侧对页面一致性的解读,能够有效降低设计到实现的转化成本,提高开发效率。也要注意间距不能无脑套 8 的倍数,优先用 8,当跨度太大也可以使用 4 和 12。

万字干货!从4个方面完整解析栅格设计万字干货!从4个方面完整解析栅格设计

那为什么不选择 4,6 或 10?

注意的是最小单位应由实际工作来决定,没有绝对的最小单位数值。在适用性方面,4、6、8、10 这四个数值都基本可以满足。

当使用 4px 时,页面就会被分割的非常细碎,当 8 不够用的时候,就要使用 4 了。

最小单元格的数值选择需要从两方面考虑:

  • 最小单位在具体使用时是否具有一定的灵活性
  • 最小单位能否被大多数屏幕的宽度整除,即广泛的适用性

屏幕尺寸和分辨率种类有增无减。使得设计师对 “维护适配性” 的难度越来越大,设计稿导出会有@0.5、@0.75、@1、@1.5、@2、@3 倍多种需求,在 1@倍设计稿,奇数(比如 5px)就会出现半像素偏移。而 6 除以 2 得 3,3 就是奇数了,10 除以 2 的 5,6 和 10 不能被 2 除尽。

万字干货!从4个方面完整解析栅格设计

使用偶数 8px 可以轻松一致地缩放各种倍数而不失真,大多数流行的屏幕尺寸都可以被 8 整除,足够普适,以 8px 为增量进行缩放可提供大量选项,所以推荐 8px。

万字干货!从4个方面完整解析栅格设计

列 + 列间距 + 大边距

栅格系统由 3 个部分组成:列、列间距、左右大边距。栅格系统是由列和列间距交替分布形成的,列是栅格的数量单位,虚拟的垂直块,用于对齐内容,我们以百分比或固定值定义列宽。竖直方向根据页面内容是可以无限延伸,所以栅格系统在竖直方向的栅格可以不体现出来,设计时只要在水平方向保持规律变化就可以了。

通常设定栅格数量说的就是列的数量,如 12 栅格就有 12 列、24 栅格就有 24 个列。列间距把控页面留白,数值越大,页面留白越多,视觉效果越松散;反之,页面越紧凑,画片分割的越碎。

万字干货!从4个方面完整解析栅格设计

大边距就是设计内容区以外的空间。我们在设计中一般将大边距宽度定义为固定值,该值决定每个设计的最小呼吸空间,灵活的边距占据了由列,列间距组成的网格后的剩余空间。左右大边距是计算在栅格的总宽之内的,删格系统的宽度就是列、列边距、大边距之和。

也有弹性大边距,会根据不同的屏幕尺寸而变化,就是页面边距可以随着屏幕尺寸的变化而变化。页面边距在移动设备上通常是 12px 到 40px 之间,在平板设备和桌面设备页面边距变化就相对多了。

容器

我们按照页面结构从组件 – 容器 – 区块 – 页面 – 场景进行依次拼装成最终形成产品设计方案。容器集合了下级组件,也可以是多个复杂元素的集合,文字、图片、按钮。如登录区块是由多个标签、输入框、按钮组成。容器是成组的设计元素,形成了独立的内容或功能盒子。区块嵌套容器,由区块组成了页面内容。

栅格规范的是容器间比例,而非具体宽度。容器大小收到栅格系统的限制,栅格系统可以根据需求被 2 等分、3 等分、4 等分、6 等分、12 等分,具体采用哪种比例的组合需要根据需求来定。栅格系统 / 设备分辨率大小在变换的同时会带动区块大小的变化,从而使容器发生变化,如元素尺寸变化,文字换行等。

如下图,共有 32 个容器。对于紧密相关的内容,请考虑组成区块。页面被分割的越碎时,设计中越难把控。

万字干货!从4个方面完整解析栅格设计

5. 拓展知识

960 栅格系统

这是一个比较单纯的框架。从 1990 年代后期开始就基于表格的布局开始使用的栅格系统 960 Grid System。与早期计算机相比,虽然今天的屏幕分辨率达到了很高的尺寸,但使用 960 像素的宽度依旧可以确保在许多屏幕上能够正确显示。

960 Grid System,是由 Nathan Smith 开发的 CSS 框架,因为早期的电脑荧幕宽度约为 1024,扣除浏览器的卷轴及边框,为 960px,960 Grid System 有 12 栏位、16 栏位版本,960 正是意味着,12 能被 3、4、6 整除,能建立 3 栏、4 栏、6 栏的版面配置,网页的使用也比较灵活。网页版面可以轻松配置,合并,也不会有畸零数,非常适合排版。

960 Grid System 是使用固定宽度 960px,置中对齐画面的方式呈现在网页上,去除左右两边各 10px 的边距空间,留下中间 940 px 的设计内容区,以 20px 作为槽。

而超出 960 的部分的设计元素,就使用定宽设计。

Bootstrap 网页框架

今天市面上看见的响应式网站,多数使用了一些开源的代码或者框架。而应用最广泛的,就数 Bootstrap 了。

Bootstrap 是 Twitter 推出的一套强大网页框架,是全球最受欢迎的前端开源工具库,它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件,也提供了快速建立响应式网页的功能。已经更新到 V5.0.1 版本了 Bootstrap 中的栅格系统是一套响应式、移动设备优先的瀑布流式栅格系统。市面上很多前端框架会对 Bootstrap 进行补充或基于 Bootstrap 开发。

Bootstrap 提供的栅格系统,也是一样将内容区分 12 等分。

万字干货!从4个方面完整解析栅格设计

它将系统分为 12 列,当然也可以通过变量来改变列数和列宽,水槽宽度,屏幕浮动宽度;其实设置屏幕浮动宽度就是我们看到的屏幕自适应,就是根据屏幕宽度来选择显示参数。Bootstrap 中的栅格流只能作为大的布局定义,那么针对最小单位是该用 8、10、15 还是多少也是需要根据需求去做分析。

12 列结构可以进一步分解 4 等分,3 等分大小的模块。

如何搭建栅格

1. 确定屏幕宽度

栅格设计的第一步就是创建画布,对于不同设计的项目,宽度设定是不同的。需要注意第一屏重点内容全部显示,浏览器和 Windows 底栏都会占用屏幕的高度空间,第一屏缩减默认高度 -100px (可调整)。

屏幕宽度

设计师有存在从最大的屏幕 1920 着手设计界面的习惯,最后考虑最小的屏幕上的显示效果。这意味着绝大多数的设计都是从大尺寸开始设计的,通常大尺寸的内容和功能更全面。从小往大适配容易,但是从大往小适配问题就特别多。以 1920px 宽设计的界面在面向小尺寸屏幕的时候多数都很不友好,甚至到了部分页面无法正常预览和使用的地步。所以优先设计最小适配屏幕,然后给出适配方案进行调试。

万字干货!从4个方面完整解析栅格设计

C 端设计的屏幕宽度是找全网平均数值,而 B 端的目标受众更细分、更具体。类似政府、学校、企业等等,计算机都是统一购买的,这种情况并不需要你去统计全网和其它渠道数据,只要了解具体受众使用什么分辨率即可,以它作为主要输出的画布宽度。如果 B 端设计受众屏幕宽度实在不清楚,可以参考蚂蚁中台设计团队统一的画板尺寸为 1440。

是否定宽(版心)

如果是定宽的设计,便不需要考虑自适应与响应式适配屏幕宽度。版心是源用平面上的说法。根据实际情况,定宽设计如果以 1024 的屏幕为内容主体,1366、1440、1536、1600、1920 的屏幕适配 1024 的内容主体,多余的空间为左右大边距,这种方式设计上容易输出,适配方式更加高效,随之就是可用性较低,对于使用高分辨的用户来说,布局会留下很大的空白。如知乎:

万字干货!从4个方面完整解析栅格设计

还记得第一次做网页练习的时候我使用的定宽为 1000px。

2. 确定栅格区域

屏幕终端的宽度不等于我们要栅格的宽度。我们在确定栅格区域设计前,先来熟悉一下 web 产品界面的基础模块和分层逻辑,以常见的 B 端布局为例。

根据模块自身属性及功能定义,常见的模块有九类,分别为顶部导航模块、左侧导航模块、页眉模块、页脚模块、主内容模块、左内容模块、右内容模块、抽屉模块、弹窗模块。

万字干货!从4个方面完整解析栅格设计

全局控制层为常置的功能底层,是提供稳定性和可预测性、必不可少的层级,具体有顶部导航模块、左侧导航模块等;内容层可分为常置展示层,具体有主内容模块、左右内容模块或上下模块等;临时层为动态出现的功能顶层,始终叠加在基础层及内容层上方,是链接上下体验流程的模块,具体有抽屉模块、弹窗浮层模块。

万字干货!从4个方面完整解析栅格设计

梳理了相关模块所组合的栅格布局。Web 端有三种基础布局和多种扩展布局。一般来说,栅格区域就是指内容层。前面我们提到了定宽(版心),版心和内容层还是有差别的,版心+两端页边距=内容区。

万字干货!从4个方面完整解析栅格设计

那其他模块能用栅格吗?当然可以,有需要就用,不过需要注意使用效率。

3. 确定列数、列间距、大边距

首先,创建一个低保真或高保真的原型,设计一些基本元素和交互流程之后,考虑最优的列数。列间距的区域不可以放置内容,我们一般会给列间距设定一个定值来确定列宽大小,这个列间距也是模块间的间距。

栅格数量

常见的栅格系统通常被划分为 12 栅格或 24 栅格。划分的格子越多,承载的内容越精细。也有较少项目会根据实际情况也会划分成 16 栅格、20 栅格,移动设备屏幕尺寸小于 PC 屏幕,想要有更灵活发挥空间,就必须采用列宽较小的栅格。

12 栅格

12 栅格系统在流行的前端开发开源工具库 Bootstrap 与 Foundation 中广泛使用,一些商业网站、门户网站通常划分成 12 栅格,适用于业务信息分组较少,单个容器内信息体积较大的中后台页面设计。根据业务场景可以很容易的将 12 栅格区域划分成 2 等分、3 等分、4 等分、6 等分,以及根据等分容器组合的多种不等分场景,组合也是栅格作为一个界面辅助系统非常方便的原因。

万字干货!从4个方面完整解析栅格设计

24 栅格

24 栅格系统适用于业务信息量大、信息分组较多、单个容器内信息体积较小,场景复杂的页面设计。相对 12 栅格系统,24 栅格系统变化更加灵活,更适合内容比较多样复杂的场景。我们常见的 B 端 web 设计一般选用 24 栅格,栅格系统大小就是 24 列+23 列间距+2 大边距。

Ant 采用了 24 列、23 列间隔的栅格系统。其中间隔数值是固定的,内容区域减去 23 列间隔后,剩下的部分等分成 24 列。

万字干货!从4个方面完整解析栅格设计

注意:

其内容模块必须位于若干列上,可以任意分割,比如 6×2,3×4,4×3,下面是不同分割方式设计的信息模块。

只要父级模块对齐栅格,子级元素可以不对齐列,同时子模块也可以有自己的栅格系统。

万字干货!从4个方面完整解析栅格设计

列宽无法永远精准整除,而相差的像素值往往是无法被用户以肉眼察觉的,栅格不是为了每一像素的精确,而是为了保证浏览效果的秩序、协调与统一。

确定列间距与大边距

列间距与大边距选择 8(最小单位)的倍数,网格将更加一致。可以将间距值把常用的数值整理成号码表,间距复用化:小= 8px,中= 16px,大= 24px,x 大= 32px 等等…这样一来,保持一致性更加容易,更加合乎逻辑,并且开发人员也会高兴,因为他们可以根据屏幕元素之间的关系安全地假定间距。

注意:

列间距的数值越大,页面留白间隙越多

列间距的区域不可以放置内容模块,内容区从列间距开始到列间距结束

万字干货!从4个方面完整解析栅格设计

非常规设计时不需要栅格系统,根据设计场景可自定义。

栅格与适配

栅格系统适配过程中需要考虑三个原则:等比缩放、弹性控件、文字流自适应。随着设备多样化,通用的适配方式是自适应与响应式布局,随之就是栅格系统的变化。我们先聊下断点。

断点,用浏览器打开一个网站,检查元素,右上角会显示视窗当前的分辨率,慢慢缩小视窗的宽度,找到页面布局的变化点,就是我们上面说到的断点或者次断点。

断点设计主要考虑基础的 3 端,一般大于等于 1440 为 web 布局,1439-500 为平板布局,小于 500 为手机布局。每经过一个断点,可以改变栅格大小(比如 16 栅格改为 8 栅格),固定改为拉伸,样式(文字、颜色)。制作精良的话可以设计多个断点,如 480、600、840、960、1280、1440 和 1600px。

1. 栅格的行为

固定栅格

固定网格的最大特征是在网页收缩过程中,经过一个断点就会自动减少最边缘元素,其他元素基本保持不变。通过在嵌入式块中排列图块,在工具栏中放置图标等,可以用固定的框来形成网格。栅格列数随着浏览器宽度的减少而减少,边缘图块自动换行,或者有时会溢出滚动条。

首先通过最小单位选择一个基本尺寸,然后以基本尺寸的倍数构建每个盒子框,就会出现一个个网格。

万字干货!从4个方面完整解析栅格设计

流动栅格

流动栅格是元素随着设备尺寸变化而比例变化,当到屏幕大小变化的断点时,列可以增长或收缩以适应可用空间,边缘元素被减掉。但并不是每一个断点都需要去减少元素,可以适当的按照元素的比例进行大小调整。流动布局兼容性高,能更好的适配多分辨率。

万字干货!从4个方面完整解析栅格设计

流体栅格非常适合编辑内容,仪表板、图像、视频、数据可视化等。对用户而言,缩放事物的大小比缩放可见事物的数量更为有用。

在每个断点处,列数是固定的,在断点范围之间,实际列宽是栅格区域百分比缩放,而不是最小单位倍数。内容区域是动态运动,就需要运用栅格系统。

混合栅格

内容区域流动和固定栅格组合也是常见的做法,混合栅格既有流动的宽度,也有固定宽度。混合布局对用户十分友好,如下图左侧是固定栅格,右侧是流动栅格。

万字干货!从4个方面完整解析栅格设计

2. 响应式与自适应

在初期,网页使用的是绝对静态布局为主。静态布局中如果用户的屏幕大于或小于设计预期,结果会出现的滚动条,过长的行以及对空间的不良使用。后随技术发展,为了兼容各种浏览器,出现了针对各设备适配的解决方案,自适应布局。

后来移动互联网爆发,html5 标准发布,与移动设备、平板电脑和智能设备(游戏机)等需要提供了更丰富的功能,用户希望能够使用各种设备访问任何网站,结合自适应的思想,出现了响应式布局的概念——2010 年由 Ethan Marcotte 提出。

自适应

自适应布局是网页内容根据设备的不同而进行适应,来判断当前访问的设备是 PC 端、平板还是手机,为不同终端分别提供独立的前端代码。自适应设计可以更好地适应用户在现场的各种需求,缺点是成本较高。

万字干货!从4个方面完整解析栅格设计

自适应设计即创建多个布局,每个静态布局对应一个屏幕分辨率范围。比如你对自适应网站的窗口大小进行调整,每经过一个断点就可以得到不同的布局(页面元素位置发生改变),但在每个布局中,没有经过断点时页面元素不随窗口大小的调整发生变化。每经过一个断点,布局和位置是可改变的,也有特殊,如两个断点间等比缩放,可以保留用户在多个设备间的操作习惯。

万字干货!从4个方面完整解析栅格设计万字干货!从4个方面完整解析栅格设计

自适应设计,变化没必要过于复杂,保留必要的功能入口,不必要的可以隐藏给不同设备切换不同的样式,在同一设备下(断点范围下)实际还是固定布局。

响应式

响应式是通过一套代码,无缝匹配符合电脑、平板、手机效果的前端技术,开发成本更低,高适应性;设计成本更低,一套设计应对多端,最大化提升用户的操作体验;响应式不提供自适应性那么多的控制,多端同步生效,减少运营成本,保障业务效率。

万字干货!从4个方面完整解析栅格设计

一个典型的响应式布局,通过改变浏览器的宽度就会发生响应变化,而不是像自适应经过设备断点时内容才发生改变。响应式布局中会出现诸多差异较小的状态,同样让响应式布局更加的难以测试和预测。

万字干货!从4个方面完整解析栅格设计

响应式也存在断点,是网页在收缩的过程中的最小范围。当网页到达这个范围以后,网页内部的元素就要进行相应的变化,用来适应屏幕的变化。

万字干货!从4个方面完整解析栅格设计

响应式设计的前提有两点:1,页面布局具有规律性,元素宽高可用百分比代替固定数值;2,网页图片必须是可伸缩的。这正是栅格系统本身就具有的典型特点,所以利用栅格系统进行响应式是顺理成章和高效快捷。

响应式网页测试工具:我有反应吗?和 designmodo

万字干货!从4个方面完整解析栅格设计

总结一下:

自适应布局是内容根据终端不同进行适应,响应式布局是网页的布局针对屏幕大小进行响应。响应式布局等于流动栅格,而自适应布局使用固定断点来进行多个布局。 自适应布局给了我们更多设计的空间,因为只用考虑几种不同的状态;而在响应式布局中就会出现上百种不同的状态,虽然绝大部分差异较小。

自适应与响应式如何选择用哪个呢?

页面功能不多,用户交互少,不需要经常升级,响应式设计从运营的难易和维护的便利性考虑会更好,如逻辑简单并且内容大致相同的官网和展示页面;页面个性化多功能方面考虑,自适应设计更合适,用户体验更好,如功能复杂、用户交互频繁的网站。

全平台适配

除此之外,随着移动设备的生产力逐步加强,手机、折叠屏、平板、电脑之间的界限变得模糊,端与端的差距也在缩小。苹果推出 iPadOS,让移动端的便捷和桌面端的超强生产力进一步融合。而从应用的开发而言 Electron、Flutter 等跨系统框架层出不穷,开发者也在不断尝试在不同平台上用一套代码提供同一套服务,减少系统隔阂所带来的维护成本。

尽管全平台系统设计的概念还不成熟,但我们可以看到打造流畅的全平台体验的必要性。这也许会成为下一代应用的基础规则,正如当初的响应式设计。

设计工具中的栅格

1. Figma

figma 有三种不同形式的栅格可供选择:统一网格,列和行。支持单个画板栅格系统的使用和隐藏。

嵌套栅格

与其他工具不同,figma 不会在内容层只局限一个栅格,可以建立多层栅格嵌套。可以利用这一点,在盒子内部设计时,再用栅格用作视觉辅助,可以通过颜色和不透明度来区分不同栅格。

figma 可以通过相对调整画布大小,同步拉伸栅格系统。

万字干货!从4个方面完整解析栅格设计

内容自适应

当我们拖动窗口的宽度,模块会发生自动布局。定义下级元素针对父模块的响应,做到模块变化的同时下级元素的显示也是合理的。比如相对内容左右间距一致、对齐方向一致、尺寸固定等设置。这就是 Sketch/Figma/XD 中的自适应功能。

万字干货!从4个方面完整解析栅格设计

其实在设计稿时,使用自适应功能频率不高,不是每个区块都需要自适应的。

固定和拉伸混合使用,在内容自适应框架中,可以将一些元素设置为固定,将一些元素设置为填充容器并与固定和拉伸形式相结合使用。

万字干货!从4个方面完整解析栅格设计

同时可以修改图层透明度为 0,相当于占位,可以占位搭配组件。

共享样式

在创建栅格系统时,可能需要对不同设备尺寸或其他常见用例上的布局进行不同的更改。为了更轻松地将这些栅格应用于框架,文件和项目,可以将其中的几个合并为一个栅格样式(相当于组件),然后可以从团队库中共享该样式或者自己复用,简单快捷。

万字干货!从4个方面完整解析栅格设计

2. Sketch

同样有三种栅格可供选择,栅格系统统一使用和隐藏。Sketch 里自适应功能不能隐藏某对象占位,而 figma 可以,当位置隐藏后,布局就会进行调整。

sketch 使用栅格设计需先设置一个总宽度尺寸,点击左下角默认设置还可以将自定义的栅格系统设置为默认,方便以后重复调用,但 sketch 只能储存一组栅格系统的数值。

万字干货!从4个方面完整解析栅格设计

sketch 怎么以最小单位进行移动?

可以在首选项设置最小单位如 8px,按 shift+方向键就能以最小单位进行调整。

万字干货!从4个方面完整解析栅格设计

http://grid.guide/

这个网站,输入版心和分割数,自动生成栅格方案。

结束语

在实际设计过程中,栅格的使用会伴随着限制条件。我们应当明白,栅格只是为设计师提供便捷的辅助工具,而不是限制设计师的工具。

不过从栅格这个工具来说,完全的自由反而是降低效率。如果能够给出一定的限制,反而会使得我们的设计效率提升。我们不必关心每个区域盒子具体值是多少,只需保证它们存在正确的关系。栅格系统是对界面元素进行横向排布时需要遵循的模式,不适用于类似图标与文字间隔的小型元素安排,而是用于大型区块间距的安排。

文章来源:优设  作者:小龙哈

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

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

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



六个方法解决用户决策疲劳

分享达人

决策疲劳在现今互联网深度发展的时代似乎非常常见,面对眼花缭乱的APP页面,我们通常会因为需要做出过多决策而烦躁。那么产品设计者应该如何减少决策疲劳现象,给予用户更好的体验。本文围绕解决用户决策疲劳展开了详细讲述,推荐对此感兴趣的伙伴阅读。


决策疲劳是用户体验圈一个路人皆知的词汇,用于描述人们在某个时期内做出过多决策而导致厌烦的情况。研究表明,它主要发生在人类的认知能力在单位时间内随着时间的延长而减少时。这就是为什么学习、钻研问题,是一件非公众都能做好的少数事件。

在产品设计中,我们要坚持减少用户需要做出决策数量的基本原则。保证用户使用产品来完成一项任务,能够越顺利、越直接。个人在特定时期内被要求做出的决定越多,即使这些决定是微不足道的(比如选择播放那个节目),他们的决策质量也会越低。

当你感到疲倦时,这会显著地影响你的决策能力,而 设计师在为用户设计界面时必须了解到疲劳可能对用户的影响。这个话题很有趣,因为人们在使用你的产品时可能会遇到的认知过载的原因有很多。

本文重点是介绍在你进行下一个 产品项目时减少认知过载的六种方法。

一、让用户少做选择

作为用户,每天我们拥有的选择题都在呈指数增长。互联网让我们可以在瞬间访问世界上的内容。如此多的选择会使我们思维迟钝,降低我们的满意度,并可能导致我们对体验感到沮丧而不是变得更好。

当给用户太多选择时,他们往往会感到困惑和迷茫。一个产品可以拥有世界上所有的功能,但是当界面因为选择过多而过于复杂时,它最终给到用户的体验一定很差。《人格与社会心理学杂志》的一项研究表明,当我们有太多选择时,往往会导致决策失误和情绪沮丧。

六个方法解决用户决策疲劳

来自哈佛商业评论的模型

在追求最大化满足商业化可能的产品设计中,老板可能会要求在其产品中包含过多或过少的功能。通过使用哈佛商业评论提供的模型,横轴为功能数量,三个点依次为用户复购最大化、用户终生价值最大化、用户初次购买销售最大化,公司能够根据他们想要的结果找到适合他们的功能数量最佳点。

研究表明,人们更有可能购买提供了有限数量的商品。在这种情况下,他们也会对自己的选择更满意,而不是从购买前的犹豫到购买后的忐忑,从而产生更大的满足感。

关键是很多产品为用户创造了太多的选择,这可能会造成浪费并适得其反。用户可能会浪费时间尝试点击所有可能的产品,而不是按照预期进行实际购买。

1. 扯淡的神奇数字7

在用户体验世界中,关于使用多少次点击以及人脑一次可以接收多少信息,存在许多相关的说法。但最重要的是,产品设计师需要在简单性和功能性之间取得平衡,这样他们就不会要求用户做太多的操作或过多考虑用户的需求遗漏了什么。

最容易被误解的理论之一是乔治米勒的“神奇数字 7”。有人说产品设计应该只有七个菜单选项卡或下拉列表中的七个项目。

这是个谬误,虽然我在某种程度上同意这种观点,因为坚持这样的限制似乎更自然,但我们也必须考虑信息是如何随着社会和我们的大脑发生变化的。当前的互联网会通过网站和大屏手机向我们展示数据,而不是早年的4.0英寸的小屏手机,用户可以轻松地一次看到他们的所有选项,并不是非要强制通过数字7的限制让用户一块很大的屏幕上来回滚动。

同时现在也有一些研究表明,人们有可能喜欢有多种选择的菜单。我们拥有的选项越多越好,因为用户不必花时间深入查找相关信息。

比如主页上最多包含 几十个类别链接的淘宝列表)比仅提供有限选项(如没有子类别的类别)的网站更有用。但这里要强调的是需要考虑实际的用户场景,电商平台的属性导致了要为消费者提供更多的选择,而类似工具产品,尤其是垂直工具产品,在设计选项数量时一定要谨慎。

2. 击规则站不住脚

还有另一个站不住脚的理论:从业者普遍接受但完全不靠谱的“三击规则”,或者更加扯淡的“两击规则”。用户的满意度和事件完成率其实并不一定受几次点击影响,比方说付费流程,缺少必要的流程硬按点击次数把流程缩短,导致用户错误付费而产生的用户体验变差几乎是不可逆的。

3. 视觉布局用点心

比菜单选项卡或下拉列表的数量更重要的是视觉体验。视觉布局可以更轻松地扫描和记住每个选项。根据信息搜索理论,信息线索的持续感知对你的用户体验很重要。

人们在日常生活中要做出很多选择,而太多的选择可能会让人不知所措。当我们因产品特性不得不呈现更多的信息时,重要的是信息组织方式。

你可以去尝试减少选择的数量,但最重要的是你的信息结构。如果你的信息没有组织好,或者给到用户的决策过程中涉及的步骤过多,用户就不会费心去寻找他们想要的东西,因为他们觉得这会花费太长时间或可能没必要去更更努力地探索。

为了在产品上让用户的决策中有更好的转化,我建议去掉任何不必要的东西,例如无关的标签和链接,这些标签和链接会分散用户的注意力,使其无法找到他们正在寻找的东西。同时综合产品特性去考虑实际该有的流程数量和必要选项,平衡简单性和功能性的关系。

二、允许用户后悔

现实中我们都会犯错。它可能发生在我们所有人身上!但是,如果用户犯了错误,优秀的产品设计师应该怎么做?

答案是:让用户轻松回到起点。

通过让用户走上正轨,你更有可能留住他们作为用户,而不是导致他们离开你的网站或应用程序。

下面是我在设计用户流程时的一些最佳实践:

  • 尽可能少制造意外情况;
  • 错误问题尽可能明晰,让用户更容易发现以修复它们并继续用户操作;
  • 在操作错误破坏用户体验之前通过提供保存数据选项来主动防止错误的数据输入;
  • 不要只是弹出一条覆盖整个页面的消息,而是向他们展示哪些字段是错误的;
  • 避免在你的消息中使用苛刻的措辞,因为文案可能会赶走甚至激怒某些用户。

三、视觉提示有助于导航

导航是任何网站或应用程序的核心。这就是让你的设计能够让每个人都易于访问和使用的原因。设计出到适合你产品的导航系统,对用户体验至关重要。

导航的设计应该直观且易于使用。用户应该始终知道它在哪里,它的意义,以及点击它会去哪。

一个好方法是通过颜色为用户对操作区域进行导航:比如当进行切换、更改等动作时配备不同的颜色,并用文案清楚地说明每个菜单项下是什么功能。

这些小动作有助于使浏览您的网站或应用程序成为一种畅快的体验。

  • 使扫描和阅读页面更容易;
  • 改善视觉层次;
  • 加强页面导航;
  • 重要位置的鲜艳颜色可以提高转化。

一个例子是 Instapage 登陆页面。如果标题没有箭头,很难看出下方有更多内容:

六个方法解决用户决策疲劳

四、利用习惯动作减少学习成本

在设计新界面时,必须尽可能降低受众的学习成本。一个方法是利用他们已经熟悉的模式和习惯。但是你怎么知道这些约定是什么?

下面是三个常见的 设计惯例,这些惯例可以让你的用户在与产品内交互时感觉更熟悉,这有助于减少他们的学习成本,并让他们更快地开始学习你试图传达给他们的任何内容。

1. 颜色不要缭乱

简洁的配色方案要远比复杂华丽的配色更有效果。人眼会被颜色所吸引,因此如果你在整个界面中使用简洁的配色方案,人们会更容易找到自己想要的信息而不是被颜色乱神。

2. 把设计风格重复使用

不仅要遵循常见的用户体验规则,而且要在一个产品里不停的重复,不要轻易作新颖的尝试,前辈们大多已经帮你尝试过了。

这样的意义在于:

人们使用你的产品感觉更轻松,因为这个产品没什么复杂的新东西(降低了学习成本)。

一个例子是,目前无论你在那个浏览器查看哪个页面,你的菜单栏都会保持在站点的顶部或底部。这会让你产生导航认知,因为它在帮助你决定下一步需要采取什么行动时减轻了学习成本。

3. 使用生活中的事物表示符号,比如用于删除文件的垃圾桶。

图标是在你在表示操作对象是什么的好方法,它们易于理解且具有普遍可识别性,因此非常适合作为交互介质。使用在生活中已经被广泛理解的图标和符号有助于让你的产品内容不会感觉难以理解和过于复杂。

图标一定要广为人知——例如房子。这个图标被普遍认为是“主页”或开始屏幕的图标。垃圾桶也是一样——这个图标被认定为一个垃圾桶图标来删除一个元素。

五、别自嗨

我们都知道应该以用户为中心进行设计,而不是你自己,但其实不是那么容易。当你处于设计过程中试图弄清楚你的用户需要什么或他们会如何反应时,其实往往会按照自己的喜好走偏。

一个方法是你可以使用一些简单的技巧来确保你在设计时考虑到你的用户。有些人发现从第一人称的角度写下他们的想法有助于将自己想象成最终被服务的用户。

或者某些设计师会讲角色分类,然后全情单线程的专注一个项目,以牺牲时间和效率为代价确保航道的正向。

以用户为中心进行设计的最佳方式是听取用户的意见。当你从事一个新项目并考虑这个产品将如何服务于用户时,请确保在进行原型设计之前先和你的用户聊聊。

可以尝试提出以下问题:

  • “你最喜欢我们上一款产品的哪一点?”
  • “如果我们更改 x 功能,你会有何感受?”

往往你会惊讶于他们可以提供的见解以及他们将期望如何改变你原型的方向。

你可以使用多种用户体验研究方法来确保你在设计时考虑到用户:

  1.  做一定的市场调查;
  2.  创建角色故事;
  3.  使用线框或原型快速获得反馈;
  4.  定期和客户服务团队交流。

六、简约至上

不要提供太多的选项或功能让用户不知所措。

每个产品都有自己为用户解决的核心问题,用户希望在产品中获得帮助并快速做出决定。问题是,很多产品经常沉迷于他们产品功能以及他可以为用户实现什么,忘记了如果有太多选项和功能,新用户可能会感到不知所措。

如果你负责一个产品,可以考虑你的用户在面临过多选择或功能时的感受,并尽量优先突出他们最需要的选项或功能。

例如,在电子商务网站中,用户不能从 50 种不同的衣服面料中选择他们最喜欢的材质,如果预先只有三四个选择,可能会带来更好的体验。也可以考虑隐藏一些选项,方法是使用视觉提示,例如类似“探索更多”文字的按钮。

确保将最重要的信息呈现给用户的一种方法是将信息流设计为金字塔形状,首先呈现基本信息,不太重要的信息尽量放在不显眼的地方或者想办法隐藏。

七、结论

这里提供了六种方法,帮助你减少产品中的决策疲劳,从而使用户更有可能走上正轨,解决他们的问题,并帮助获得更高的转化。产品设计时把自己放到用户的角度去思考,才能更好的服务于用户


文章来源:人人都是产品经理   作者:公众号:真的不一定


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

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

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



B端设计中台落地、响应式界面设计

分享达人


以下内容主要分成两大部分,第一是聊聊响应式和自适应的区别和原理,以及我们应该如何去设计响应式界面;第二部分也是比较关键的B端系统设计的核心,B端设计中台完整构建过程的具体步骤,以及应用到的格式塔原则,和命名的一些注意事项,内容较多,大家可以根据上述目录来选择性阅读。


1.1多端兼容设计的发展史



简单概括多端兼容设计的发展史,最早是桌面端,比如桌面的一些应用;后来出现了移动端,针对移动端大家用的都是WAP,指一种无线应用协议,大家在用手机浏览一些网站,会把网站翻译成一种低流量的浏览方式,比如去掉图片大图,只剩全文字,因为当时网络不好,早在3G和2G时代移动端用的都是WAP;在2008年之后出现了响应式,也就是做一套代码可以兼容三端(网页、移动端、iPad)设备,在发展的同时也遇到很多问题,但响应式同时也遇到了很多问题;于是又出现了自适应,指不同的设备打开不同的页面进行自适应,自适应能增加效率,但需要增加工作量;2017年以后直到现在看到最常用的就是渐进式,类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。


1.2 响应式布局的种类



1.2.1 响应式布局RWD


可以理解成用户在手机、电脑、ipad打开同一个界面,所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。


1.2.2 自适应布局AWD


自动布局算是响应式的一种,但平时看到很多响应式其实并不是真正的响应式,而是自动布局,因为界面在不同的设备用的是不同的模板,当我们用电脑打开呈现的是一套模板,而用手机打开则是另外一套模板,这种看起来是响应式,其实不是。因为当我在开发者模式下调节不同设备展示时,就会发现,其实是换了一个网址来根据不同的设备进行自适应的,而真正的响应式是不需要刷新的,在拖小窗口的时候就会变成手机端的那个样子。


1.2.3 渐进式布局PWD


渐进式布局是近几年比较新起的,这种布局设计,很像一个网站或者本身它就是一个网站,但用起来就像一个APP一样,看到这里大家很容易相到,小程序就是渐进式布局得一种,小程序明显是一个网页,但通过技术的一些嵌入和一些接口或者缓存的方式的操作,让用户在使用的时候感觉小程序就是一个APP,但核心技术还是web网页。



1.3 如何应用设计响应式


响应式的原理是通过定位的方式来做响应式的各种开发,需要在页面中至少标出这十个点:中心点,上下左右点,上左上右点和下左下右点,这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解,其实结合figma来看,这些点对应的就是这样(如下图),在figma中的布局点。设计师通过调节图形的布局点,可以做到在页面拉伸时,让想动的元素跟随变化,不动的元素静止不动,这就是响应式的原理。换言之,我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。



1.4 响应式和自适应的区别


01、响应式


如下图是响应式的优点和缺点。响应式其实就是只开发一套页面,这个页面兼容三端。虽然做了响应式,但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面,然后全部做好对应的自动布局,再进行页面拉伸,内容随之会发生变化,比如当拉伸到1024*768的时候,也就是iPad的尺寸,就会发现局部在设计上有些不合实际情况,这时就需要设计师在对应尺寸的设计稿上进行内容上的微调,比如按钮不可能那么长,就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时,然后再酌情针对网页尺寸的呈现样式,局部进行尺寸的调整,比如文字和按钮被拉伸到网页版都需要居中对齐,电脑端的样式就需要设计师重新排版了。


通常在B端系统,设计师需要做响应式设计时,往往是从大往小做设计,这也取决于这个B端产品是否需要进行移动端的设计,《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端,就需要我们将网页改成移动端设计,比如B端的侧边栏导航在拉伸到移动端时,就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中,做三端拉伸时候,可以用断点插件来进行演示,通过对断点插件的设置,就可以完美的看到页面在三端不同情况的适配呈现,断点插件用来做演示非常方便。



02、自适应


如下图是自适应的优点和缺点,其实就是一个项目开发三个页面,分别做定制设计,网页端、移动端和Ipad端。



2.1必读前言


我们都知道2021年也就是今年是我国新基建的元年,十四五规划2035远景目标里提到重点发展传统企业数字化转型,尤其是今年我们设计师更能深刻体会,C端和B端已经是完全两个不同的行业,C端发展近十年,已经很难再做到创新上的突破,该做的功能和创新都已经做了,而B端这片蓝海才刚刚开始发力,很多企业也都在考虑B端系统的搭建,降本提效率成了很多公司新的指标,因此数字化转型重点在于B端系统探索,B端重点在于中台的搭建!设计师通过设计中台,构建出基本的业务类型,再分类到业务中,构建出不同的业务界面,所以设计中台非常关键,很多公司经常会用这两个系统去构建,Antdesign和Elemnet就是设计中台,我们会发现用Antdesign可以做出很多的系统,那怎么进行设计中台的设计呢?和我们设计师有什么样的关联度呢?带着这个问题,我们深度探索B端设计中台的落地!


2.2 中台的概念及作用


概念:中台是互联网的术语,一般应用于大型企业,中国互联网的变革永远是从大型互联网开始,大型互联网公司引发了技术的变革,这也是中台的兴起,一般指搭建一个灵活快速应对变化的架构,快速实现前端提的需求,避免重复建设,达到提高工作效率目的。


作用:降本提效。如果没有组件库,普通设计师一天最多做十个页面,再多就不太可能了,如果有组件化得产生,一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前,组件库的作用尤为重要。但如果落地,就需要前端工程师的密切配合,因为设计师设计的组件只是一个样式,而前端需要把组件进行代码化,所以组件一定是代码化的,也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用,和前端代码的复用,可以大大提高设计师的工作效率。


2.3 设计中台的构建过程



2.3.1 基本库建立


基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等,之所以强调系统两个字,有系统就要统一规则和统一规范,然后进行调用应用在系统中的各个地方,比如我们想调用一个颜色,不是去随选用一个颜色,应该严格的从色彩系统中去调用,如果系统组件库里没有这个颜色,我们也绝对不可以使用,可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用,这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面,组件库中如果没有相应的组件,我们应该试着反推一下,是否要加进组件库中去,来进行系统的调用。在做中台的过程中,我们一直使用Antdesign,我们对组件的名称,组件的分类其实一点都不陌生,其实Antdesign也在借鉴国外的Bootstrap组件库(大家感兴趣可以下载Bootstrap组件库进行查看),所以并不是Antdesign组件库形成了一定的规则,它也是在沿用别人的规则,而这些规则也需要不断的有大公司去继承出来,所以慢慢衍生出来现在这样的组件库,那中台设计,首先要搭建基本库,把基本库里的基础一些系统搭建好后,我们继续去做扩展库。


2.3.2 扩展库建立


如下图,扩展库中包含了很多内容,比如分了四类,导航系统,数据录入,数据展示和反馈系统。其中导航系统又包含了,面包屑导航、下拉菜单、导航菜单、顶部导航等等,包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库,也不需要做成像Antdesign的组件库里包含的那么多,或者和新出得字节Arco组件库,因为它们面向的是系统级的解决方案,各行各业都可以用它,它面向的是一个大系统,也许我们只涉及到了其中的20%,因为也没有一个系统能用到它所有的组件,所以我们自己在设计组件库的时候,一定是按照我们自己项目的范围去做组件库,而不是做一个大而全的,大而全的组件库对我们也没有意义。它们做的是公共平台,而我们要做的是一个专属平台。



2.3.3 方法库建立


形成完基本库和扩展库后,第三步是建立方法库。方法库告诉我们的是什么时候用,比如我做了一个多选框,这个多选框应该什么时候用,是不是只要遇见一个选择就去用多选框,肯定不是,应该加以说明什么时候用这个多选框。类似于是组件的设计说明。


2.3.4 案例库建立


最后再做一个案例库,最佳实践库,具体组件什么时候用我们知道了,接着案例库就是在告诉我们应该如何正确的使用,或者说的方法是什么。比如标签的左对齐和右对齐,这种情况都对,什么时候用顶对齐,什么时候用左对齐,什么时候用右对齐呢?那么根据眼动仪实验数据数据来看,并且结合给出一些工作中业务中的最佳实践得案例放进去,给使用的人去做指引。


所以设计师做的事情,不仅仅是应用组件库和创造组价库,还应该指导其他设计师,指导开发人员在去复用每个页面组件的的时候,应该怎么正确的使用,这也是在B端设计中一个关键的环节,同时我们的视觉系统一定也是和业务有关联度的,所以在B端中做设计一定也不会脱离业务去做,我们一定要联系到实际的业务场景中,这个业务场景指的就是业务和视觉的结合,在做C端的时候,业务场景一定不会比B端多,C端的业务场景大多是定制化的业务场景,它要求的是个性化,不要求通用,尽量得个性化,比如图标、按钮、页面,而B端需要统一化,中台组件库的落地,可以大大提高设计师的工作效率和开发人员的协同效率,严谨的调用组件使用组件,可以使得系统页面保持高度的一致。



2.4 认识格式塔原则


2.4.1接近性


如图1:可以看出纵列的关系更紧密,因为纵间距小于行间距。


如图2:可以看出行间距大于列间距,它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢?这属于用户心理学的应用,如果元素相邻的更近,元素之间的关系就会更加的紧密。


如图3:如果元素相邻的关系都是保持一样的,那么它们的关系是相对对等的。


由此可以得出结论,如果相邻的关系越近,它们的关联度就越近,如果相邻的越远,它们的关联度就越远。


应用案例:如图4卡片中得标题和内容,设计中把标题和内容进行区分,所以我们会做大量的留白,这样的留白就会让信息结构具有层次感,层次感就是指它们信息结构的关联度,如果想让它们有关联度,就让它们距离近一点不要做区分,如果不想让它们有关联度,或者关联度出现一个等级的区分,那么就可以加一条线,让它们之间的关联度分隔开。这就是格式塔接近性的应用。



2.4.2 相似性


如图5:如果去区分右边的形状,通常我们会根据形状进行区分,因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。


应用案例:如果文字的标题大小是保持一致的,包括它有统一的大小,统一的色彩,统一的字号,那系统中的其他同样功能的地方,都应该用统一的文字,这就是格式塔相似性的应用,比如图标也是一样,只有用了相似的图形大小,相似的颜色,在相同的位置,用相同的图标进行表达,图标之间的设计才具有相似性。


2.4.3 主体与背景


如图6:可以看到有一个L,是主体与背景进行了区分,如果在设计的时候让L看的更加明显,我们采用的办法就是将主体的色彩或者形状变的更加独特,或者将背景的颜色变得更加分明,这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。


应用案例:比如警告弹出,可以用色彩去区分,目标就是让用户看的更加得清晰,当警告的时候给用户一个警告的信息,当成功的时候给用户一个成功的信息。还有类似对话框的弹出,采用背景变暗和加阴影的方式,都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中,前景和背景进行区分的时候,我们就可以通过色彩进行区分,色彩的区分要保持统一,比如背景色彩透明度50%同时加一些背景模糊,其他的背景也需要保持一致,阴影也是一样,如果把阴影放在一个平面上,距离平面越近,它得阴影越短,距离平面越远,它得阴影越长,这也是阴影的层级关系。


2.4.4 封闭性


如图7:可以看出这是一个四分之一的圆形。


如图8:这个图可以看出是一个五角星。


封闭性应用案例:当一个形状被另外一个形状或者被另外一个色彩阻断的时候,并不影响人们对这个形状额外得认知,一定会脑补出另外一个形状,这个原则和我们UI的关系是什么呢?比如一个loading,半圆一直在旋转,或者图表中的圆占比,我们就可以判断出谁大谁小,谁多谁少,判断出当前的进程和位置,封闭性原则通常应用在图标的设计,图表的设计和步骤条的设计中。


2.4.5 连续性


如图9:可以看出用一些简单得形状来体现,其中三角形具有明显的指向性,三角形箭头指向右边,上面五个是一组,可以看出它们具有连续性;另外一组三角形箭头指向右下角,可以看出它们是连续的一组。不同的形状会有连续性,箭头也特别有指向性,这就是为什么返回和前要进放在不同的位置,当我们的数据需要有连续的时候,我们也要使用相似的形状来表达,这就是连续性原则的应用。


同理如图10:连续性一定是要有连续等阶的变化,从左上角开始,向下和向右我们可以看出有明显的颜色连续等阶变化,通过色彩的透明度也可以做到连续性。




2.5 组件的命名规则



2.5.1 如何正确的命名


很多公司或者不同公司有不同的命名方式,这个需要和团队开发提前做沟通,主要以方便开发习惯操作为主,如果不命名也不能非得说成是错误的,命名可以理解成是一件锦上添花的事情,因为一切都以效率优先,命名自然会影响工作效率,通常情况,组件的命名可以分成组件的名称、级别、尺寸、状态,这样的命名顺序来进行,这样命名开发使用也比较方便,因为是按照了开发的统一规则来进行命名的。如图所示:



2.5.2 更多命名英文词汇


当英文不好的时候,推荐大家记常用组件英文名,以及常用状态名、级别名、内部名、尺寸名和位置名,那这些英文也几乎涵盖了工作中80%的英文词汇,收藏记忆哦~



文章来源:站酷   作者:飞鱼十七

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

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

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



留白/线性/卡片分割选哪个?

分享达人

近两年,vivo 浏览器一直选择的是留白分割的设计方式,但核心竞品已经逐渐都采用了线性分割,甚至卡片分割的设计,是要坚守留白还是追随“趋势”,面对内外部声音的追问,我们开始了关于分割方式的详细研究与探索。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图1 资讯新闻的分割方式

研究不局限于资讯新闻信息流列表,而是回归到分割方式的本源,希望能一次性给大家一个明确的分割方式设计指南。

通过一系列的桌面研究、实践对比和趋势总结,我们可以将结论简要概括如下:

  1. 优先使用留白分割。
  2. 当留白分割不能起到明显的分割作用时,建议采用线性分割。
  3. 当线性分隔不能起到明显的分割作用时,建议采用卡片分割。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图2 三种分割方式示意

也就是说从选择的优先级而言:留白分割≥线性分割≥卡片分割。详细设计理念、目标和决策因素请参考下文(小结图见文末),希望可以帮助你扫清所有关于分割方式的困惑。

留白分割

1. 定义

所谓留白分割,指的是只通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),自然的将信息进行分组。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图3 亲密性原则体现的留白分割

如上图所示,当纵向间距增加 1.5 倍后,信息被分为上下 2 组,当横向间距也增加 1.5 倍后,信息被分为上下左右四组,这就是留白分割。

值得一提的是,同类单一元素(图片、文字、图标等)之间默认采用的都是留白分割。比如相册中单张照片之间,文章中每个文字之间,间距留白是区隔单一信息元素的默认选择。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图4 相片和文字之间的留白分割

2. 使用原则

单个元素之间默认使用留白分割,随着元素的增多,多个元素按照特定的组合形成条目,条目与条目之间,或者条目组与条目组之间进行区隔时,就涉及到今天的主题:留白/线性/卡片分割方式的选择。在这一点 iOS 和 Android 系统中差异还蛮大的。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图5 iOS和Android系统的分割方式差异

在 iOS 中,线性分割是条目间默认的分割方式(参见 iPhone 通讯录和设置),当多个条目成组后,为了区分不同组别,则会采用更高层级的卡片分割方式。

在 Android 系统,留白分割是条目间默认的分割方式,线性分割用于划分信息组块,而不仅仅是区隔上下文内容。(参见 Pixel 5 的通讯录和设置)

从 2014 年 Material Design 发布后“卡片式设计”的风靡,再到 2019 年前后“去线化设计”盛行,结合设计趋势,再对比上图中 iOS 和 Android 的分割效果,建议在不影响核心数据指标的前提下,条目之间尽可能采用留白分割,会让界面更清爽,浏览更沉浸(毕竟即使是卡片设计的创始团队 Google,在设计 Android OS 时也并没有滥用卡片)。

3. 留白分割的分类及适用场景

留白分割的分类,指的是留白间距大小的设计规范,信息之间有多少种间距,每种间距适用于什么情境。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图6 留白分割的分类

日常设计中,视觉设计师经常会将页面网格化,然后以最小网格为基准,设计不同倍数的间距大小,以此来增强页面的秩序感。

理论上讲,只要分隔的间距够大,都可以根据接近性原则形成信息分组。但信息层次越多,需要的间距种类就越多,间距种类一多,信息层次就越不清晰(只能单纯根据间距大小判断信息层次,就好像只用邻近色进行色彩区分一样,不对比就不容易发现差异,不够直白)。而且每增加一个视觉层次,要求其间距至少要是上一层次间距的 2 倍,接近法则才能生效产生明显的分组效果。所以当条目信息层次较少(≤2)时,留白分割是比较合适的,当信息层次较多(≥3)时,留白分割既会浪费空间,也难以达到一目了然的分割效果。

线性分割

1. 定义

线性分割,顾名思义,就是指用线来分割不同的信息内容。在 Material Design 中,对分割线(Dividers)有明确的定义和规范。(iOS 中没有相关定义,根据上图 4 的视觉效果,我更偏向 Android 的分割方式,所以更倾向于采纳 Android 的设计规范建议和效果)

分割线是一条细长、轻量的线,用于对列表和页面布局中的内容进行分组。从视觉效果上看,分割线可以将页面内容分割成层次更清晰的组块。

此外,MD 还定义了其 UI 细节,规定分割线的粗细是 1dp,颜色根据日夜间模式,可分别使用黑色或白色,不透明度为 12%,以确保 Android 平台所有分割线的显示效果一致。(国内的实际情况是:大部分 App 的分割线是 1px 粗细,相比 MD 的 1dp,视觉效果更符合下方的微妙原则)

2. 使用原则

分割线可以帮助用户理解页面内容是如何组织的。但过度使用分割线会造成视觉干扰,影响页面信息传达,所以 Android 系统明确规定了分割线的使用原则:

  1. 微妙的:分割线在布局中应该很容易被注意到,但又不凸显。
  2. 次要的:只有当留白不能起到分割作用时才采用分割线。
  3. 少用的:谨慎使用分隔线,用它来创建分组而不是分割条目。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图7 Android系统中分割线的使用原则

3. 分类及适用场景

分割线可以分为三种类型:

  1. 通栏分割线(Full-bleed dividers):用于分隔彼此完全独立的内容。
  2. 内嵌分割线(Inset dividers):用于分割有锚点(头像或图标)的相关内容。
  3. 中间分割线(Middle dividers):用于分割无锚点(头像或图标)的相关内容。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图8 三种分割线示意

多数时候(信息层级≤2),采用分割线进行分割的信息,采用留白也是可以分割的,只不过需要留白间距足够大,比如我们把上述分割线的方式换成留白,因为间距够大,视觉效果也很清晰(没有多余线性元素的干扰)。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图9 用大留白替换分割线示意

但是如果为了提高屏效,希望在一屏内尽可能多的展示信息,那么同样的信息布局,分割线带来的分割效果会更清晰,如下图所示:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图10 追求纵向信息屏效时线性分割效果更好

当信息层级≥3之后,使用线性分割就要谨慎一些,可以具体看一下是否满足下方卡分割的使用条件。

卡片分割

1. 定义

卡片是一个由内容和操作组合而成的独立主题的面性容器①,它可以包缩略图②、标题③、副标题④、富媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧,除了卡片容器本身,其他元素都是可选的,所有元素都以易于扫描和操作的形式放置在卡片之上。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图11 卡片可以包含的元素示意

2. 使用原则

使用卡片时应注意以下三个使用原则:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图12 卡片可以包含的元素示意

  1. 包含的:卡片是一个可识别的、单独的、包含内容的单元。
  2. 独立的:一张卡片可以独立存在,而不依赖于上下文环境。
  3. 不可分割的:一张卡片不能与另一张合并,也不能拆分成多张卡片。

使用卡片需要满足以上三个原则,但并不是满足以上原则就可以使用卡片,具体卡片分类和适用情境请参考下文。

3. 分类及适用情境

卡片根据左右是否有边距,可以简单分为通栏卡片和非通栏卡片。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图13 卡片样式分类

从视觉效果上来看,由于圆角的聚焦效应,非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好,画面的分割感会更强。

不管是哪种卡片类型,它们都是独立的、包含单个主题的内容(操作)的容器,它内容的独立性与我们前面提到的通栏分割线分割的内容相似。

那什么时候使用通栏分割线,什么时候使用卡片分割呢?这里有三个参考建议给你:

  1. 当这个主题内部的内容已经有分割线时,建议采用卡片分割,以让主题信息层次更清晰。
  2. 当单个主题内部的内容类型较多,上下所占空间较大(比如≥1/2屏),建议采用卡片分割,以更好的圈定该主题的内容范围,给用户明确的内容边界感。
  3. 当需要扩展页面的横向空间时,暗示页面可以横向滑动时,需要采用非通栏卡片,利用横向内容连续性原则,帮助用户建立可以横向滑动的意识。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图14 使用卡片的三个参考条件

设计实践

回到开篇关于 vivo 浏览器信息流分割方式的选择,因为项目成员偏好不同,大家各执一词都无法说服对方,所以设计师设计了三种不同的分割方案(仅分割方式这一个变量),分别进行了定性研究、定量研究和灰度数据调研。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图15 设计师设计的三种分割效果

在定性研究中,我们在线下对十余位用户进行了访谈,左右滑动三张设计稿,让用户对比观察三张图的差异,(不管是线性分割还是卡片分割,设计师都遵循了以内容为主导,弱化分割方式以凸显内容这一大原则,期望用户能始终聚焦在内容本身,不受分割方式的干扰),结果所有用户都说觉得三张图是一样的,表明设计师对分割方式的处理是达到了设计预期的。在主动告知差异后,三种分割方式的选择也比较分散,并没有显著的差异(样本较少,不具有说服力)。

在定量的问卷研究中,我们提取了用户对三种分割方式描述的看法,基本也符合大家对分割形式的预期。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图16 筛选的用户典型反馈

在最终的灰度测试中,留白分割以相对较好的数据结果胜出(结果数据保密,暂不方便告知)。所以在最终大家看到的全量版本中,vivo 浏览器默认采用的依然是留白分割的设计形式。

小结

根据分割方式自身的特点(视觉干扰性、分割强弱感、滑动沉浸感)、上下文条目之间的关系,单个条目的内容复杂度,屏幕空间的利用率,我们可以对分割方式做一个简单的小结,如下:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图17 分割方式特点小结

简而言之:

  1. 当信息条目复杂度较低时,优先采用留白分割,视觉清爽无干扰。
  2. 当信息条目复杂度增加,只利用留白分割效果不明显时,建议引入线性分割,让信息层次更清晰且屏效高。
  3. 当信息条目复杂度进一步提升,(比如已经有了线性分割,或者有更多操作),需要进一步强化信息条目本身的边界感,建议引入卡片,以强化条目信息的视觉层次和可操作性。





文章来源:优设 作者:VMIC UED

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

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

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


近两年,vivo 浏览器一直选择的是留白分割的设计方式,但核心竞品已经逐渐都采用了线性分割,甚至卡片分割的设计,是要坚守留白还是追随“趋势”,面对内外部声音的追问,我们开始了关于分割方式的详细研究与探索。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图1 资讯新闻的分割方式

研究不局限于资讯新闻信息流列表,而是回归到分割方式的本源,希望能一次性给大家一个明确的分割方式设计指南。

通过一系列的桌面研究、实践对比和趋势总结,我们可以将结论简要概括如下:

  1. 优先使用留白分割。
  2. 当留白分割不能起到明显的分割作用时,建议采用线性分割。
  3. 当线性分隔不能起到明显的分割作用时,建议采用卡片分割。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图2 三种分割方式示意

也就是说从选择的优先级而言:留白分割≥线性分割≥卡片分割。详细设计理念、目标和决策因素请参考下文(小结图见文末),希望可以帮助你扫清所有关于分割方式的困惑。

留白分割

1. 定义

所谓留白分割,指的是只通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),自然的将信息进行分组。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图3 亲密性原则体现的留白分割

如上图所示,当纵向间距增加 1.5 倍后,信息被分为上下 2 组,当横向间距也增加 1.5 倍后,信息被分为上下左右四组,这就是留白分割。

值得一提的是,同类单一元素(图片、文字、图标等)之间默认采用的都是留白分割。比如相册中单张照片之间,文章中每个文字之间,间距留白是区隔单一信息元素的默认选择。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图4 相片和文字之间的留白分割

2. 使用原则

单个元素之间默认使用留白分割,随着元素的增多,多个元素按照特定的组合形成条目,条目与条目之间,或者条目组与条目组之间进行区隔时,就涉及到今天的主题:留白/线性/卡片分割方式的选择。在这一点 iOS 和 Android 系统中差异还蛮大的。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图5 iOS和Android系统的分割方式差异

在 iOS 中,线性分割是条目间默认的分割方式(参见 iPhone 通讯录和设置),当多个条目成组后,为了区分不同组别,则会采用更高层级的卡片分割方式。

在 Android 系统,留白分割是条目间默认的分割方式,线性分割用于划分信息组块,而不仅仅是区隔上下文内容。(参见 Pixel 5 的通讯录和设置)

从 2014 年 Material Design 发布后“卡片式设计”的风靡,再到 2019 年前后“去线化设计”盛行,结合设计趋势,再对比上图中 iOS 和 Android 的分割效果,建议在不影响核心数据指标的前提下,条目之间尽可能采用留白分割,会让界面更清爽,浏览更沉浸(毕竟即使是卡片设计的创始团队 Google,在设计 Android OS 时也并没有滥用卡片)。

3. 留白分割的分类及适用场景

留白分割的分类,指的是留白间距大小的设计规范,信息之间有多少种间距,每种间距适用于什么情境。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图6 留白分割的分类

日常设计中,视觉设计师经常会将页面网格化,然后以最小网格为基准,设计不同倍数的间距大小,以此来增强页面的秩序感。

理论上讲,只要分隔的间距够大,都可以根据接近性原则形成信息分组。但信息层次越多,需要的间距种类就越多,间距种类一多,信息层次就越不清晰(只能单纯根据间距大小判断信息层次,就好像只用邻近色进行色彩区分一样,不对比就不容易发现差异,不够直白)。而且每增加一个视觉层次,要求其间距至少要是上一层次间距的 2 倍,接近法则才能生效产生明显的分组效果。所以当条目信息层次较少(≤2)时,留白分割是比较合适的,当信息层次较多(≥3)时,留白分割既会浪费空间,也难以达到一目了然的分割效果。

线性分割

1. 定义

线性分割,顾名思义,就是指用线来分割不同的信息内容。在 Material Design 中,对分割线(Dividers)有明确的定义和规范。(iOS 中没有相关定义,根据上图 4 的视觉效果,我更偏向 Android 的分割方式,所以更倾向于采纳 Android 的设计规范建议和效果)

分割线是一条细长、轻量的线,用于对列表和页面布局中的内容进行分组。从视觉效果上看,分割线可以将页面内容分割成层次更清晰的组块。

此外,MD 还定义了其 UI 细节,规定分割线的粗细是 1dp,颜色根据日夜间模式,可分别使用黑色或白色,不透明度为 12%,以确保 Android 平台所有分割线的显示效果一致。(国内的实际情况是:大部分 App 的分割线是 1px 粗细,相比 MD 的 1dp,视觉效果更符合下方的微妙原则)

2. 使用原则

分割线可以帮助用户理解页面内容是如何组织的。但过度使用分割线会造成视觉干扰,影响页面信息传达,所以 Android 系统明确规定了分割线的使用原则:

  1. 微妙的:分割线在布局中应该很容易被注意到,但又不凸显。
  2. 次要的:只有当留白不能起到分割作用时才采用分割线。
  3. 少用的:谨慎使用分隔线,用它来创建分组而不是分割条目。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图7 Android系统中分割线的使用原则

3. 分类及适用场景

分割线可以分为三种类型:

  1. 通栏分割线(Full-bleed dividers):用于分隔彼此完全独立的内容。
  2. 内嵌分割线(Inset dividers):用于分割有锚点(头像或图标)的相关内容。
  3. 中间分割线(Middle dividers):用于分割无锚点(头像或图标)的相关内容。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图8 三种分割线示意

多数时候(信息层级≤2),采用分割线进行分割的信息,采用留白也是可以分割的,只不过需要留白间距足够大,比如我们把上述分割线的方式换成留白,因为间距够大,视觉效果也很清晰(没有多余线性元素的干扰)。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图9 用大留白替换分割线示意

但是如果为了提高屏效,希望在一屏内尽可能多的展示信息,那么同样的信息布局,分割线带来的分割效果会更清晰,如下图所示:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图10 追求纵向信息屏效时线性分割效果更好

当信息层级≥3之后,使用线性分割就要谨慎一些,可以具体看一下是否满足下方卡分割的使用条件。

卡片分割

1. 定义

卡片是一个由内容和操作组合而成的独立主题的面性容器①,它可以包缩略图②、标题③、副标题④、富媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧,除了卡片容器本身,其他元素都是可选的,所有元素都以易于扫描和操作的形式放置在卡片之上。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图11 卡片可以包含的元素示意

2. 使用原则

使用卡片时应注意以下三个使用原则:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图12 卡片可以包含的元素示意

  1. 包含的:卡片是一个可识别的、单独的、包含内容的单元。
  2. 独立的:一张卡片可以独立存在,而不依赖于上下文环境。
  3. 不可分割的:一张卡片不能与另一张合并,也不能拆分成多张卡片。

使用卡片需要满足以上三个原则,但并不是满足以上原则就可以使用卡片,具体卡片分类和适用情境请参考下文。

3. 分类及适用情境

卡片根据左右是否有边距,可以简单分为通栏卡片和非通栏卡片。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图13 卡片样式分类

从视觉效果上来看,由于圆角的聚焦效应,非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好,画面的分割感会更强。

不管是哪种卡片类型,它们都是独立的、包含单个主题的内容(操作)的容器,它内容的独立性与我们前面提到的通栏分割线分割的内容相似。

那什么时候使用通栏分割线,什么时候使用卡片分割呢?这里有三个参考建议给你:

  1. 当这个主题内部的内容已经有分割线时,建议采用卡片分割,以让主题信息层次更清晰。
  2. 当单个主题内部的内容类型较多,上下所占空间较大(比如≥1/2屏),建议采用卡片分割,以更好的圈定该主题的内容范围,给用户明确的内容边界感。
  3. 当需要扩展页面的横向空间时,暗示页面可以横向滑动时,需要采用非通栏卡片,利用横向内容连续性原则,帮助用户建立可以横向滑动的意识。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图14 使用卡片的三个参考条件

设计实践

回到开篇关于 vivo 浏览器信息流分割方式的选择,因为项目成员偏好不同,大家各执一词都无法说服对方,所以设计师设计了三种不同的分割方案(仅分割方式这一个变量),分别进行了定性研究、定量研究和灰度数据调研。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图15 设计师设计的三种分割效果

在定性研究中,我们在线下对十余位用户进行了访谈,左右滑动三张设计稿,让用户对比观察三张图的差异,(不管是线性分割还是卡片分割,设计师都遵循了以内容为主导,弱化分割方式以凸显内容这一大原则,期望用户能始终聚焦在内容本身,不受分割方式的干扰),结果所有用户都说觉得三张图是一样的,表明设计师对分割方式的处理是达到了设计预期的。在主动告知差异后,三种分割方式的选择也比较分散,并没有显著的差异(样本较少,不具有说服力)。

在定量的问卷研究中,我们提取了用户对三种分割方式描述的看法,基本也符合大家对分割形式的预期。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图16 筛选的用户典型反馈

在最终的灰度测试中,留白分割以相对较好的数据结果胜出(结果数据保密,暂不方便告知)。所以在最终大家看到的全量版本中,vivo 浏览器默认采用的依然是留白分割的设计形式。

小结

根据分割方式自身的特点(视觉干扰性、分割强弱感、滑动沉浸感)、上下文条目之间的关系,单个条目的内容复杂度,屏幕空间的利用率,我们可以对分割方式做一个简单的小结,如下:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图17 分割方式特点小结

简而言之:

  1. 当信息条目复杂度较低时,优先采用留白分割,视觉清爽无干扰。
  2. 当信息条目复杂度增加,只利用留白分割效果不明显时,建议引入线性分割,让信息层次更清晰且屏效高。
  3. 当信息条目复杂度进一步提升,(比如已经有了线性分割,或者有更多操作),需要进一步强化信息条目本身的边界感,建议引入卡片,以强化条目信息的视觉层次和可操作性。





文章来源:优设 作者:VMIC UED

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

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

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


近两年,vivo 浏览器一直选择的是留白分割的设计方式,但核心竞品已经逐渐都采用了线性分割,甚至卡片分割的设计,是要坚守留白还是追随“趋势”,面对内外部声音的追问,我们开始了关于分割方式的详细研究与探索。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图1 资讯新闻的分割方式

研究不局限于资讯新闻信息流列表,而是回归到分割方式的本源,希望能一次性给大家一个明确的分割方式设计指南。

通过一系列的桌面研究、实践对比和趋势总结,我们可以将结论简要概括如下:

  1. 优先使用留白分割。
  2. 当留白分割不能起到明显的分割作用时,建议采用线性分割。
  3. 当线性分隔不能起到明显的分割作用时,建议采用卡片分割。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图2 三种分割方式示意

也就是说从选择的优先级而言:留白分割≥线性分割≥卡片分割。详细设计理念、目标和决策因素请参考下文(小结图见文末),希望可以帮助你扫清所有关于分割方式的困惑。

留白分割

1. 定义

所谓留白分割,指的是只通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),自然的将信息进行分组。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图3 亲密性原则体现的留白分割

如上图所示,当纵向间距增加 1.5 倍后,信息被分为上下 2 组,当横向间距也增加 1.5 倍后,信息被分为上下左右四组,这就是留白分割。

值得一提的是,同类单一元素(图片、文字、图标等)之间默认采用的都是留白分割。比如相册中单张照片之间,文章中每个文字之间,间距留白是区隔单一信息元素的默认选择。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图4 相片和文字之间的留白分割

2. 使用原则

单个元素之间默认使用留白分割,随着元素的增多,多个元素按照特定的组合形成条目,条目与条目之间,或者条目组与条目组之间进行区隔时,就涉及到今天的主题:留白/线性/卡片分割方式的选择。在这一点 iOS 和 Android 系统中差异还蛮大的。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图5 iOS和Android系统的分割方式差异

在 iOS 中,线性分割是条目间默认的分割方式(参见 iPhone 通讯录和设置),当多个条目成组后,为了区分不同组别,则会采用更高层级的卡片分割方式。

在 Android 系统,留白分割是条目间默认的分割方式,线性分割用于划分信息组块,而不仅仅是区隔上下文内容。(参见 Pixel 5 的通讯录和设置)

从 2014 年 Material Design 发布后“卡片式设计”的风靡,再到 2019 年前后“去线化设计”盛行,结合设计趋势,再对比上图中 iOS 和 Android 的分割效果,建议在不影响核心数据指标的前提下,条目之间尽可能采用留白分割,会让界面更清爽,浏览更沉浸(毕竟即使是卡片设计的创始团队 Google,在设计 Android OS 时也并没有滥用卡片)。

3. 留白分割的分类及适用场景

留白分割的分类,指的是留白间距大小的设计规范,信息之间有多少种间距,每种间距适用于什么情境。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图6 留白分割的分类

日常设计中,视觉设计师经常会将页面网格化,然后以最小网格为基准,设计不同倍数的间距大小,以此来增强页面的秩序感。

理论上讲,只要分隔的间距够大,都可以根据接近性原则形成信息分组。但信息层次越多,需要的间距种类就越多,间距种类一多,信息层次就越不清晰(只能单纯根据间距大小判断信息层次,就好像只用邻近色进行色彩区分一样,不对比就不容易发现差异,不够直白)。而且每增加一个视觉层次,要求其间距至少要是上一层次间距的 2 倍,接近法则才能生效产生明显的分组效果。所以当条目信息层次较少(≤2)时,留白分割是比较合适的,当信息层次较多(≥3)时,留白分割既会浪费空间,也难以达到一目了然的分割效果。

线性分割

1. 定义

线性分割,顾名思义,就是指用线来分割不同的信息内容。在 Material Design 中,对分割线(Dividers)有明确的定义和规范。(iOS 中没有相关定义,根据上图 4 的视觉效果,我更偏向 Android 的分割方式,所以更倾向于采纳 Android 的设计规范建议和效果)

分割线是一条细长、轻量的线,用于对列表和页面布局中的内容进行分组。从视觉效果上看,分割线可以将页面内容分割成层次更清晰的组块。

此外,MD 还定义了其 UI 细节,规定分割线的粗细是 1dp,颜色根据日夜间模式,可分别使用黑色或白色,不透明度为 12%,以确保 Android 平台所有分割线的显示效果一致。(国内的实际情况是:大部分 App 的分割线是 1px 粗细,相比 MD 的 1dp,视觉效果更符合下方的微妙原则)

2. 使用原则

分割线可以帮助用户理解页面内容是如何组织的。但过度使用分割线会造成视觉干扰,影响页面信息传达,所以 Android 系统明确规定了分割线的使用原则:

  1. 微妙的:分割线在布局中应该很容易被注意到,但又不凸显。
  2. 次要的:只有当留白不能起到分割作用时才采用分割线。
  3. 少用的:谨慎使用分隔线,用它来创建分组而不是分割条目。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图7 Android系统中分割线的使用原则

3. 分类及适用场景

分割线可以分为三种类型:

  1. 通栏分割线(Full-bleed dividers):用于分隔彼此完全独立的内容。
  2. 内嵌分割线(Inset dividers):用于分割有锚点(头像或图标)的相关内容。
  3. 中间分割线(Middle dividers):用于分割无锚点(头像或图标)的相关内容。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图8 三种分割线示意

多数时候(信息层级≤2),采用分割线进行分割的信息,采用留白也是可以分割的,只不过需要留白间距足够大,比如我们把上述分割线的方式换成留白,因为间距够大,视觉效果也很清晰(没有多余线性元素的干扰)。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图9 用大留白替换分割线示意

但是如果为了提高屏效,希望在一屏内尽可能多的展示信息,那么同样的信息布局,分割线带来的分割效果会更清晰,如下图所示:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图10 追求纵向信息屏效时线性分割效果更好

当信息层级≥3之后,使用线性分割就要谨慎一些,可以具体看一下是否满足下方卡分割的使用条件。

卡片分割

1. 定义

卡片是一个由内容和操作组合而成的独立主题的面性容器①,它可以包缩略图②、标题③、副标题④、富媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧,除了卡片容器本身,其他元素都是可选的,所有元素都以易于扫描和操作的形式放置在卡片之上。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图11 卡片可以包含的元素示意

2. 使用原则

使用卡片时应注意以下三个使用原则:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图12 卡片可以包含的元素示意

  1. 包含的:卡片是一个可识别的、单独的、包含内容的单元。
  2. 独立的:一张卡片可以独立存在,而不依赖于上下文环境。
  3. 不可分割的:一张卡片不能与另一张合并,也不能拆分成多张卡片。

使用卡片需要满足以上三个原则,但并不是满足以上原则就可以使用卡片,具体卡片分类和适用情境请参考下文。

3. 分类及适用情境

卡片根据左右是否有边距,可以简单分为通栏卡片和非通栏卡片。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图13 卡片样式分类

从视觉效果上来看,由于圆角的聚焦效应,非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好,画面的分割感会更强。

不管是哪种卡片类型,它们都是独立的、包含单个主题的内容(操作)的容器,它内容的独立性与我们前面提到的通栏分割线分割的内容相似。

那什么时候使用通栏分割线,什么时候使用卡片分割呢?这里有三个参考建议给你:

  1. 当这个主题内部的内容已经有分割线时,建议采用卡片分割,以让主题信息层次更清晰。
  2. 当单个主题内部的内容类型较多,上下所占空间较大(比如≥1/2屏),建议采用卡片分割,以更好的圈定该主题的内容范围,给用户明确的内容边界感。
  3. 当需要扩展页面的横向空间时,暗示页面可以横向滑动时,需要采用非通栏卡片,利用横向内容连续性原则,帮助用户建立可以横向滑动的意识。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图14 使用卡片的三个参考条件

设计实践

回到开篇关于 vivo 浏览器信息流分割方式的选择,因为项目成员偏好不同,大家各执一词都无法说服对方,所以设计师设计了三种不同的分割方案(仅分割方式这一个变量),分别进行了定性研究、定量研究和灰度数据调研。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图15 设计师设计的三种分割效果

在定性研究中,我们在线下对十余位用户进行了访谈,左右滑动三张设计稿,让用户对比观察三张图的差异,(不管是线性分割还是卡片分割,设计师都遵循了以内容为主导,弱化分割方式以凸显内容这一大原则,期望用户能始终聚焦在内容本身,不受分割方式的干扰),结果所有用户都说觉得三张图是一样的,表明设计师对分割方式的处理是达到了设计预期的。在主动告知差异后,三种分割方式的选择也比较分散,并没有显著的差异(样本较少,不具有说服力)。

在定量的问卷研究中,我们提取了用户对三种分割方式描述的看法,基本也符合大家对分割形式的预期。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图16 筛选的用户典型反馈

在最终的灰度测试中,留白分割以相对较好的数据结果胜出(结果数据保密,暂不方便告知)。所以在最终大家看到的全量版本中,vivo 浏览器默认采用的依然是留白分割的设计形式。

小结

根据分割方式自身的特点(视觉干扰性、分割强弱感、滑动沉浸感)、上下文条目之间的关系,单个条目的内容复杂度,屏幕空间的利用率,我们可以对分割方式做一个简单的小结,如下:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图17 分割方式特点小结

简而言之:

  1. 当信息条目复杂度较低时,优先采用留白分割,视觉清爽无干扰。
  2. 当信息条目复杂度增加,只利用留白分割效果不明显时,建议引入线性分割,让信息层次更清晰且屏效高。
  3. 当信息条目复杂度进一步提升,(比如已经有了线性分割,或者有更多操作),需要进一步强化信息条目本身的边界感,建议引入卡片,以强化条目信息的视觉层次和可操作性。





文章来源:优设 作者:VMIC UED

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

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

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


B端体验设计-与复杂共处

分享达人

“复杂是世界的一部分,但它不应该令人困惑,好的设计帮我们驯服复杂,不是让事物变简单(如果复杂是符合需求的),而是去管理复杂”--唐纳德·A·诺曼



与复杂共处,这是一个有趣的话题。在这个奉行“少即是多”的时代,设计师对于复杂噤若寒蝉,认为优秀的设计应该简洁明了,若无必要,勿增实体,而复杂则常备被视作失败设计的标签。设计师为了保持设计上的简约挖空心思,甚至试图通过削弱功能的方式来降低产品的复杂度,得到自己想象中的完美设计。然而一味追求“简单”的设计真的符合用户的实际需求吗?从心理学的角度来看,复杂的事物往往功能强大,而功能强大意味着更好的服务与更高的价值,用户也更愿意为之付费。当我们购买商品时,我们会仔细斟酌,拿着产品的功能列表反复比对,这个时候我们忘记了产品复杂与否,更多考虑的是功能是否满足自身需求。


对于大部分B端产品而言,复杂或许难以避免,复杂是出于实实在在的业务的需要,而非某位设计师的错误喜好。B端产品之所以给人感觉会相对复杂,是因为产品需要完成复杂的工作任务,界面内承载的信息内容较多,在视觉上会带给用户压力,直观感受上觉得产品很复杂。但是这些信息又都是必需的,如果缺少这些必要的信息,会对用户理解和使用产品造成阻碍。就如同飞机的驾驶舱,密密麻麻的按钮如此复杂,但是每一个按钮都有着相应的功能,不可或缺。既然复杂难以避免,那么作为设计师我们不应该被动接受或盲目拒绝复杂,我们应该学会如何与复杂共处,去尝试驯服复杂、管理复杂。


理性看待复杂


相信很多设计师和我一样,经历过现代主义浪潮的洗礼,对于简约的设计有着或多或少的偏好。因为这种偏好,在自己进行设计时也希望能够选用这种风格,在设计时刻意的去追求界面简约,却忽略了界面上的简约不等同于产品易于理解和使用。从心理学的角度上看,复杂的事物更容易理解,简单的事物反倒令人困惑,一味的追求简单反而会让事物变得复杂。


B端产品的目标是降本提效,追求简约的设计思想在B端产品的设计中并没有那么适用,为了提升用户的操作效率,我们需要将一些能够帮助用户理解的信息与常用的操作直观的展示给用户。这会在一定程度上增加界面的复杂度,但是相较于产品视觉界面会因此变得复杂,产品的易用性和操作效率对于B端产品而言会更为重要。


与复杂共处的前提是能够理性地看待复杂,复杂本身的含义即非褒义也非贬义。复杂描述的是事物的状态,它在词典上的解释是拥有很多即错综复杂又相互关联的组成部分的事物。产品复杂与否是由产品本身所从事的业务和需要完成的任务来决定,就像我们不能要求一个做机械结构设计的工程软件做得像一个图画板一样简单,因为两者的功能需求不是一个层面的,所以我们也不能单纯的将产品简洁还复杂作为评判一款产品优秀与否的标准。


分清复杂与困惑


我们之所以对复杂怀有畏惧,其实更多的是畏惧令人困惑的复杂,复杂与困惑有着本质的区别,理解他们之间的区别很有必要,复杂描述的是事物的状态,而困惑表述的是用户使用产品时的心理。复杂的背后可以拥有规则与逻辑,理解这些规则和逻辑,能够帮助我们理解和使用产品。而令人困惑的产品往往缺少这样的内在规则与逻辑,用户难以理解产品的运转机制,需要花费很大力气才能完成有效操作,容易让用户产生挫败感。产品可以是复杂的,但是不应该让用户困惑。


在很多复杂的传统线下业务数字化转型的过程中,为了让产品易于使用,设计师需要深入到一线,去了解真实用户在线下业务场景中是如何处理日常任务的,在流程线上化过程中也需要遵循这样的业务流程,这样能够让用户更快上手,而如果我们在设计过程中不去参考用户在线下的操作场景,按照自己的想法去意测用户的行为,这样设计出的产品背离了用户的心理模型,缺乏内在逻辑,会让用户感到混乱困惑,陷入深深的麻烦。


基于产品本身功能需要,我们可能无法很主观的去降低产品的复杂度,这就需要我们在进行产品设计时花费更多的心思,通过对业务流程、页面布局、信息呈现上的调整与设计让产品变得清晰,不让用户陷入困惑。如下图的关于表单编辑器的A\B两种设计,用户在编辑器内完成一系列针对表单的编辑、配置操作,然后发布表单。方案A中将这些表单编辑配置项通过tab进行排列,这种方式结构简单,但是扩展性较差,过多的栏目也容易让用户陷入困惑,不清楚需要完成哪些配置项才能进行发布。方案B中采用了步骤导航加侧栏导航的双层导航结构,在步骤导航上给出完成表单编辑配置的主要步骤,在大的步骤下用侧栏导航承载小的编辑项,结构清晰,且能够对用户编辑表单提供一定的帮助指引。虽然两种方案信息内容上都一致,视觉观感上甚至方案B更为复杂,但是方案B在这里可能是更合适的方案,因为方案B在配置流程的指引上更为清晰,也更贴近用户心理模型,即使没有使用过在线表单的用户也能理解产品流程,因而用户能够更容易的完成表单配置并发布表单。



功能决定产品的复杂程度


我们在使用产品时,都会有一个大概的心理预期,会认为某一类型的产品会较为复杂,某一类型的产品会相对简单。为什么我们会有这样的认知呢?是因为我们知道这些产品大概有哪些功能,而这些功能就决定了产品的复杂层度。产品的复杂程度由产品的业务与功能决定,而不是依照设计师的自我喜好,像如淘宝、京东这类的购物网站、拥有着很多的栏目,所以淘宝、京东的界面相对来说较为复杂;而像百度这样的搜索引擎功能相对来说比较简单,所以界面设计相对简单干净。


我们可以容许一个功能强大的产品设计得相对复杂,但是一个功能简单的产品设计得复杂难用就是一个灾难。作为设计师我们需要根据产品的实际需要来进行设计,即不过度设计,也不执着于追求简约,而是基于需求恰到好处的进行设计。


复杂产品也能有好的体验


复杂的产品会有好的用户体验吗?答案是肯定的,用户体验的好坏与产品是复杂还是简单并没有直接的关系,很多时候复杂的产品也能带给我们良好的用户体验,在互联网产品中,我们可以看到很多复杂的产品,这些复杂的软件产品,一点点的改变着我们的生活与工作方式,让我们生活与工作变得便捷与高效。


首先可以看看我们的国民级电商应用淘宝,乍看淘宝的界面,可能会觉得十分复杂,甚至会给人一种眼花缭乱的感觉,但是包括我在内的许多人仍然十分喜欢逛淘宝。淘宝内除了有本身的淘宝、天猫店铺外还有专做海淘的天猫国际,做社区团购的淘鲜达,专做拍卖的阿里拍卖等数十个板块,业务繁多,功能复杂,但这几乎很难改变,因为之所以做这些业务和功能背后都有着商业上的考量。从交互设计的角度看,虽然淘宝的业务和功能繁多,却有着清晰的布局、信息对齐、内容组织,产品尽管复杂,但并不令人感到费解和困惑。购物流程也与用户在线下购物流程相仿,贴近用户的心理模型,用户容易了解产品功能、容易与之交互,整体上有着良好的用户体验。



又如我一直在使用的一款笔记软件Notion,Notion相对于印象笔记、有道云笔记而言更为复杂,需要花费一定的时间成本学习才能够从容上手使用,但是这并不妨碍Notion被众多使用者所追捧。Notion的很多功能在使用之前,甚至都不会想到会出现在一款笔记产品里面,如甘特图,多维表格等,这类功能一般出现在项目管理类软件中。而Notion块结构的布局模式,让笔记能够自由拖拽,拥有了极强的自由度,用户可以很自由的用各种各样的形式来记笔记,要是你肯再花一些心思,你甚至可以在Notion内搭建一个个人专属网站来记录的学习知识,打造个人专属知识库。将我们习以为常的线性笔记思维,转变成纵向思维,甚至是网格状思维。Notion无疑是复杂的,但是这样做是为了给用户提供的强大功能和极高的自由度,这些功能恰恰也切合了用户的需求,创造了一种全新的笔记体验,带给用户愉悦的使用感受。



过度简化的潜在风险


简单是产品追求的最终形态吗?其实未必,很多时候产品设计的过度简单反而会给用户带来麻烦。为了追求简单的设计,不可避免的就需要隐藏一些信息或者拉长操作路径,这是一个权衡的过程,我们在做设计时也会经常面临这样的抉择,是追求视觉上的简约美观还是信息传达准确性与操作上的效率。给用户一个简约美观的视觉感受无疑很重要,人们对于美的事物往往更有耐心,也更愿意去探索。但是对于一款针对B端用户的效率软件、办公应用而言,准确的传达信息,帮助用户进行判断,频繁使用的功能设计得更高效便捷,这些点能带给用户更实际价值,也是我们在设计产品时应该优先考虑的点。



特别是在一些专业性的软件中,如果我们为了追求简约而弱化或者省略掉一些关键信息,还有可能会导致用户错误操作的出现,造成严重的后果。试想一下当你在使用软件编写一个计算字段时,软件提供给你了计算公式却没有就近给你提供计算公式的解释和用法示例,导致你因为书写上的不规范使得计算结果频繁出错。这时你可能会满怀愤怒的抱怨为什么产品会如此难用,为什么不能配置过程中给到更多的反馈与帮助信息来减少配置错误的发生。


如何与复杂共处


前面我们了解了关于复杂的定义,认识了复杂与困惑之间的区别,也明确了在B端产品中复杂或许难以避免,复杂是出于实实在在的业务的需要而非某位设计师的错误喜好,既然复杂无法避免,我们就应该学会与复杂共处,管理与驯服复杂。那么如何与复杂共处呢,有一些策略或许可以给予我们一些思路。


1.为产品注入规则


复杂与困惑的本质区别在于复杂的背后隐藏着规则与逻辑,而困惑缺少这样的规则与逻辑,让人无法预测与揣摩,对应到软件产品的设计,一款成功的优秀的软件产品,应该是易学易用、能够满足用户预期,用户能够直观的理解产品的流程与主要功能,并通过产品实现自己的目标。那么具体到软件的设计上我们应该怎样做呢?


这里可以看看我们团队正在使用的研发管理工具TAPD,TAPD是一款敏捷研发协作工具,凝聚了腾讯研发方法及敏捷实践精髓,其中敏捷开发的方法就是TAPD的内在规则与逻辑,有过敏捷开发经验,理解敏捷开发流程的的开发人员能够快速的上手使用TAPD,对于不了解敏捷开发的开发人员也可以通过产品帮助中心学习敏捷开发思想,进而理解产品的功能与流程,因此虽然TAPD功能与页面结构相对复杂,但是基于对敏捷开发的认识用户还是能从产品复杂的功能界面中摸索出一条操作路径,实现自己的目标。这就是产品拥有内核思想以后能够带来的直观好处,将原本零散的功能点通过特定逻辑链接成操作流程,帮助用户更好地理解与使用产品。



相同的在我们公司自己的一个项目中我们也运用了同样的方法,在我们公司之前研发的一款crm产品中,为了给用户提供最佳的销售实践,帮助用户更快上手使用我们的产品,我们在设计产品时寻找了硅谷蓝图团队做了顾问咨询,并依照硅谷蓝图的销售转化路径来构建我们的产品体系,确定产品功能,梳理产品中的业务流程。并希望在以后为客户做实施的过程中能够将硅谷蓝图的销售方法一起带给用户,让用户能够更好地使用我们的产品,实现产品的最高价值,为中小企业销售团队赋能。


通过前面两个案例其实我们可以感受到,当一款复杂的产品有了内在的规则与逻辑以后,用户理解和使用我们的产品会变得更顺畅,用户不会迷失在茫茫的功能之中,通过理解规则与逻辑,用户能够对自己操作结果有一个大概的预期,而不是处于困惑状态,作为设计师的我们也可以将这种规则逻辑作为我们设计的引导,让我们的设计更为系统和有条理,让产品不再是一堆功能的堆叠,各自为战。


2. 贴近用户心理模型设计



复杂是用户的一种心理感受,用户觉得产品复杂除了产品本身结构信息复杂之外,也是因为产品在设计上没有贴合用户的心理预期,用户很难理解产品的流程与交互,所以贴近用户心理进行设计就显得尤为重要。这里我们需要先了解三个概念,实现模型、表现模型和心理模型,三个概念的释义如下:

实现模型:产品是怎样工作的
心里模型:用户认为产品是怎样工作的
表现模型:通过设计来让用户认为产品是怎样工作的


表现模型越接近心理模型,用户就越容易了解产品功能、容易与之交互。表现模型越接近实现模型,用户越难理解产品,产品就越难使用。复杂产品在用户体验过程中的痛点在于用户需要花费时间学习或培训之后才能了解产品的运转机制,很多B端产品在设计时更多的偏向于实现模型,用户在使用产品的过程中会发现很多地方的交互和自己心理预期并不一致,使用过程中会遇到很多的阻碍,影响整体的使用体验。对于一款复杂的产品而言,我们需要让我们产品的表现模型更接近于用户的心理模型,这样用户能够更容易了解产品的功能,并与之交互。


大家使用电脑时有没有遇到过类似下图这样的电脑报错信息,里面是一堆的专业名词,看得人一头雾水。这时候我们能做的只有默默的打开百度,去了解弹窗里面讲的内容究竟是什么,了解后才明白原来这样,然后按照百度上操作步骤一通操作,侥幸解决了问题。但是当下次我们遇到相同问题时,可能还是不知道如何解决,无可避免还是需要求助百度。这个就是表现模型贴近与实现模型会带给用户的困扰,用户不是专业的开发者,他们不了解也不需要了解产品背后的实现逻辑,这对用户而言是没有价值的,给予用户这些信息不能对用户起到预想的帮助作用。贴近实现模型进行设计会让用户与产品交互变得困难,变相的是在人为的增加产品的复杂度,与复杂共处,我们需要学会贴近用户心理进行设计。



3.统一交互模式


复杂的产品往往功能、页面繁多,如果页面内的视觉元素以及交互各自为战,那么放大到整个产品就是一个灾难,不仅是产品给用户感官上不统一、整体性差,过多的交互模式也会增加用户的学习与记忆成本,用户在这些相视功能但是不同的视觉与交互的模块之间容易陷入困惑,对用户使用产品造成困扰。针对这个问题,现在越来越多的公司开始通过搭建组件库的方式来规范自家产品内的视觉与交互,一个规范完整的组件库的确能够在很大程度上解决产品在视觉与交互上的一致性问题,通过模块化解决方案,也能降低冗余的生产成本,实现产品快速开发。因此很多人也认为搭建好组件库就能一次性的解决产品体验一致性问题,但实际上就算一个产品有了一个自己的组件库,依旧还会遇到体验上统一性问题,这是为什么呢?


在原子化设计理论中,粒子是构成页面的最小颗粒,粒子构成简单组件,简单组件到复杂组件,再到区块、页面。虽然用组件能去构建页面,但是还会遇到页面结构、交互不一致的问题,设计师各自使用组件去搭建并不能提升我们的效率和解决设计一致性的问题,在末端设计并没有做到约束。因此我们在构建好组件以后还需要继续抽取出了页面级的组装结构和交互模式。



这里我们拿B端产品中常见的列表页来举例,纵观所有后台列表页面,抽取后无非就分为这么几个区域。不同的业务可以通过基础组件和样式定义符合自己业务线的子模块。比如列表页中的筛选区,在不同的业务场景下,对筛选器的需求也各不相同,简单的可能只需要使用标签选择就能够完成筛选,复杂的可能添加很多的筛选项甚至选项之间还有且或关系,我们需要根据实际的业务场景设计适合的筛选器,但是需要注意的是一个产品中用到的筛选器形式不应太多,我们需要抽取归纳出三四种筛选器形式去覆盖我们产品内所有的筛选场景。来保证产品内不会出现各种相识却有各不相同的筛选器。



B端后台产品中比较常见的还有表单,我们可以归纳出产品内可能会使用到的表单类型,然后定义出具体的框架结构与交互,在具体的设计过程中在根据实际情况选用不同的表单区块。


1.分组表单

一种常见的信息录入以及信息展示表单,这种形式是我们最长用。



2.分步表单

分布表单适用于信息录入项以及信息展示项过多,在一个页面内已经不能合理清晰的组织传递信息,或者表单内容的录入方式或者展示方式存在较大差异,不适宜在一个页面内进行展示时。按照布局的不同也可分为横向步骤和纵向步骤两种。



3.组合表单

组合表单因其结构能够承载更多的信息,每一个栏目都可以承载一个独立的表单页,有效的管理信息。


4.弹窗表单

很多时候我们也会用弹窗来承载表单,好处是交互衔接流畅,不用跳页。



将产品中类似的区块做成最佳的交互模式范例,能够最大的程度的规范我们产品中的交互,这样才能真正的实现产品体验上的统一,化繁为简,让复杂的产品也能够调理清晰,上手简单容易。在面对复杂的系统级软件时,在统一组件样式的基础上还应该统一产品内的交互模式。



信息归纳突出重心


复杂的产品页面内信息往往都特别繁多,如果不做好信息归纳,用户将很难把握住重点内容,信息获取效率低下,十分影响用户的使用体验,所以信息的强弱的整理十分重要,那么什么样的信息是对用户而言重要的信息呢?


信息设计大师爱德华·塔夫特认为优秀的视觉设计应该是“将清晰的思考视觉化”,他还认为只有充分理解观看者的“认知任务”及一些设计原则才能设计出优秀的产品。


如何找到对用户真正重要的信息需要借助到产品设计中一个十分重要的工具--用户模型,通过调研的来得用户模型是对于我们产品客户的抽象归纳,通过用户模型我们可以确定哪些功能对于用户而言是高价值的重要内容该重点突出,哪些内容相对不是那么重要可以弱化处理,通过对于页面内容强弱的划分,用户能够更快的获取到对自己有用的内容,尽管页面仍旧复杂,但是信息划分合理、层级清晰、表意明确的页面人就能够带给用户良好的用户体验,帮助用户高效的处理任务。


说在最后


复杂是产品的本来特性,本身不含褒贬,但是如果复杂不加以控制,让其发展为困惑与混乱,这对于一款产品而言绝对不是一件好事情,这样即使产品功能上很优秀,用户也无法长期忍受,一旦市场上出现替代产品,那么忍受已久的用户也将抛弃产品转向体验更好的新产品。


曾经我也是一个极简主义的追捧者,但是经历过越来越多的设计项目,我开始发现某些产品复杂性是必需的,将产品做得简单并不是其核心诉求。真正需要处理的问题也不是复杂,而是混淆的状态和由此产生的无条理性。解决的方法不是简单的去除几个界面元素,让其在视觉界面上变得简洁干净,而是要让产品拥有内在规则、一致且能够被理解。



文章来源:站酷   作者:Yone杨

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

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

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


让设计感暴增的8个画册标题排版技巧

seo达人


图片

其实画册的标题也能排出许多新意,本篇文章,葱爷来给大家分享几个可以给画册设计加分的标题排版技巧。

 

01.描边字错位组合

上图是某院校招生画册的“学院简介”排版,由于太过讲究对齐,缺少变化,所以显得不够灵活,我们可以把标题的中英文词汇拆开进行错位排版,错位时要注意左右的平衡,另外,三行错位比起两行错位的变化会更丰富一些。

图片

单纯只是做错位处理,效果并不怎么好,因为没有层级关系,所以可以再加上字号大小的变化,突出重点词汇,弱化次要词汇。

图片

这样层级丰富多了,但是众多很粗很黑的字体挤在一起略显压抑,把其中部分词汇改成描边后,整体就变得更透气、更有设计感一些了,注意描边要细一点,以避免描边的笔画重叠在一起影响识别性和美观性。

图片

标题排好以后,再根据标题调整一下内文、页眉、页码的排版,内文通常会对齐标题中的某个字词,但一边对齐就好,不需要两端都对齐,页眉、页码可以作为装饰来排版,填充一点颜色可以让版面变得更活跃。

图片

图片

 

02.彩色标题叠加灰色图片

还是拿前面的那个案例举例,把学校图片换成一张没有去底的矩形照片,然后把它处理成黑白色照,移动至版面上方,标题使用蓝色压住图片的左上角,这时标题就不是孤立的几行文字了,而是与图片形成了一个整体,这种排版方式在网页设计中比较常见,用于画册的标题排版,效果也是很不错的。

图片

图片做出血处理显得更大气,左下角的页码与标题左对齐,可以加强版面的整体性和关联性。

图片

03.手写体搭配黑体

同一个标题我们通常只会使用一种字体(不包括英文),但有时候也可以试试用两种字体搭配来使用,比如手写字体搭配无衬线字体,这两种字体在风格上完全不一样,对比非常强烈,能够给版面带来新意。

图片

由于该中文标题过于简短,所以搭配上英文会更丰富一些。

图片

正文刻意与标题进行了错位排版,当然,同时也保持着某些对齐关系,图片的排版同样如此,与正文错位,但与标题左对齐,整个版面既灵活又很有序,符合学校画册的调性。

图片

 

04.文字叠加色块

加色块是标题设计中常用的手法,但如果只是用一个色块把标题包住,那么效果是比较普通的,很容易像促销折页的做法。所以我们可以只把色块作为标题的一个装饰元素,用一个小小的色块放在标题后面,使其视觉上更丰富、更突出。

图片

图片

图片的刻意错位很关键,如果图片与正文两端对齐,那么英文标题、正文、图片、页码都是沿着一条直线对齐的,整个版面就会变得生硬很多。

图片

文字加色块还有另一种效果也不错,即把文字色块合并在一起做成补丁效果,首先把文字错位排版,然后分别给每一行文字加一个色块把文字框住,色块与色块上下相连。

图片

搭配上序号和英文标题,丰富标题的对比关系,使其更美观、更有设计感,色块可以根据需求适当超出文字的长度。

图片

正文的排版我做了一点改变,把第一段单独拿出来作为引文使用,刚好这段文字在内容上也正好是起到提前说明的作用,这样处理后这个版面也变得有了一些新意,标题十分显目。

图片

图片

 

05.手写体跨版

在画册设计对于有些版面,可以排得大气一点,比如把原本可以1P排完的内容排成一个跨P,这时标题也可以拉大跨版排列,这种做法可以加强文字的大小对比,也会有更多留白空间。

图片

为什么用手写体呢?宋体和黑体不行吗?其实也可以,不过由于汉字的笔画比较复杂,宋体和黑体又比较方正,所以拉太大排列时会显得不够灵活,如果是英文则会好一些,所以在排版的时候我还做了了倾斜与裁剪处理,并且搭配了英文进行错位排版,不然会显得过于单调。

图片

06.标题与正文左右排版

在竖版的画册中,我们通常喜欢把标题排在正文的上方,而如果把标题与正文左右摆放,那么又会有种不一样的感觉。

但不要把标题与正文水平对齐,那样的话标题的空间就过小了,会显得很压抑,而是要把标题放在正文的左上方,并保持某些对齐关系。

图片

如果把这种排版方式看成是分栏网格,那么它属于不对称网格,即正文栏应该比标题栏更大一些,以保证有足够大的空间排列正文内容。标题栏可以有大量留白,页脚可以与标题形成呼应,丰富版面的细节。

图片

 

07.扭曲标题

这种标题处理手法在海报设计中比较常见,其实国外很多画册也这么做,效果很酷,冲击力很强。

图片

用中文来做这种效果行不行呢?也可以,不过不适合太严肃的画册,用在设计类和时尚类的画册中会比较合适,比如前面列举过的设计书籍的排版。
由于文字较多,所以进行分行错位处理,然后在顶部菜单栏中选择对象-封套扭曲-用网格建立,把网格参数设置为3行5列。
图片
移动网格的锚点使文字呈波浪形,如下图。

图片

拉拽锚点左右两边的手柄使波浪形变得柔和一点。

图片

波浪效果做得差不多后,按快捷键E调出自由变换工具面板,并选择自由扭曲工具,把标题扭曲成如下效果。

图片

再调整一下细节,然后把它放在版面中,把内容篇章的序号处理成描边样式与标题叠加在一起,可以起到装饰的作用。

图片

扭曲的标题搭配上鲜艳一点的颜色,效果会更时尚,对于这种版面,正文也不要排得过于规矩,所以,我刻意把版面中的两张图片做了错位处理。

图片

 

08.打散排列

通常我们会把标题文字集中排放,但对于设计和时尚类画册,我们可以打破传统的做法,把标题做适当的分散排版,效果也很不错,当然,标题文字如果太少就不合适了。

图片

另外,为了使标题更特别 ,给文字加上下划线效果会更好,并且下划线可以根据需求适当延长,以加强这些分散文字的关联性,甚至还可以加上英文做装饰。

图片

正文的排版与标题文字左右两端保持对齐。

图片

图片

 

图片

设计是一个不断尝试、调整的过程,排标题同样也是如此。另外,标题的排版固然是很重要的,但是想要整体效果得到比较大的改善,正文、图片、页眉、页脚、页码的配合也很重要,永远要把整体的大效果摆在第一位。

 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学的UI网》让设计感暴增的8个画册标题排版技巧

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


B端帮助体系二三事

seo达人


前言

业务性强,内容复杂度高是To B产品的典型特征。新用户需要快速认知平台能力并顺利上手,老用户则需感知信息的变化、功能的拓展并迅速响应。体系化的帮助是通过在操作的不同阶段提供差异化的引导及反馈,助力用户在应用中成长。

帮助体系是什么

通过大量的案例积累及系统调研,发现“帮助”并不是单一的某个功能,而是一种体系化的能力,需要通过不同手段来实现。概括来说就是“在产品使用不同阶段为用户提供恰当的提示与指引,通过组件的灵活应用及能力创新,帮助用户降低认知成本,提升操作效率。”

用户对产品的应用周期经历前、中、后三个阶段,每个阶段的设计目标都各不相同:操作前注重提升用户的全局认知,深化理解,助力精准触达;操作中助力提效,让用户知道做什么,怎么做;操作后明确反馈,帮助用户明确结果。

图片

操作前:引导用户深化理解,提升全局认知

用户有新老之分,对系统的熟悉程度及应用诉求不同。因此针对不同用户各阶段的使用诉求进行场景化的拆分,提供差异化帮助。

 

 

帮助用户深入自主的认知平台

我们到陌生的地方会找导视标识或者找人寻求帮助,新用户到平台内也会面临同样的困境,遇到问题无从下手时会寻找含有【帮助】【客服】字样的内容,那么帮助中心、智能助手这类有明显特性的功能则会成为用户遇到问题时的第一选择。通过业务思考及行业调研,以简洁、高效、情感化为目标最大化的发挥其属性优势,让用户在使用过程中更易理解和接受,平稳有效的帮助用户渡过新手期。

1、帮助中心

帮助中心,一个时常被忽略并被严重低估的功能。它是平台全量信息集合地,不仅能帮助用户系统了解平台概况,也能引导用户行为,树立品牌形象。为保证用户高效、便捷的获取帮助信息,在页面表现上需突出内容本身,忌过度装饰。从设计角度来看,一个好的帮助中心应该符合以下条件:框架简洁清晰、信息突出并辅以锚点定位。在框架设计上一般将页面分为导航区、内容展现区两部分,导航与帮助内容对应性强,层级简单,能让用户在短时间内了解平台能力构成;帮助文档内容一般复杂冗长,锚点定位可以充当文章大纲,辅助用户精准定位。

图片

 

2、智能助手

通过内置的帮助和指导性说明来解答用户使用产品过程中遇到的简单、共性问题,降低人工客服响应成本。智能助手包含两部分:入口与悬浮窗口。入口一般悬浮于页面右下角,点击后触发悬浮窗口。

图片

 

市面很多助手能力较单一,仅能机械处理通用问题,无法提供多样化帮助,很容易让人觉得是个没啥用的摆设,对它慢慢失去信任。为重新唤起用户的信任,需要在设计上注入一定的生命力,让用户觉得易接受、有选择、有温度,从而真正用起来。

1)悬浮窗口能力多元化。作为承载智能助手核心能力的悬浮窗口,优化方向有以下三点:首先,智能助手与用户的交流不再局限于单纯的问答,而是根据账户属性向用户提供高频问题集合,并根据用户的回应拓展更多问题,提供多维化的帮助。这个主动性的帮助不仅让用户感受平台的温度,无形中也降低了用户的思考成本,更快的熟悉平台能力。

其次,每个问题旁边都提供“是否有用”的按钮供用户评判。此功能不仅为平台答案提供了优化空间,也强化了用户对平台建设的参与度,让助手与用户共同成长。

最后,对话窗口也可拓展辅助能力,例如常见问题、快讯、快捷入口等,为用户所想的同时也提供更便捷的站内流动通路。

图片

2)入口形象IP化、情感化。除了自身能力外,入口的设计则会提升功能的存在感,从而吸引用户的关注。首先品牌ip形象的植入会让入口更生动,在唤起用户注意的同时强化品牌印象。其次拟人化的主动问候能提升平台的亲切感,拉近与用户的距离。

图片

 

 

助力用户精准触达

新用户对平台相对陌生,恰当的引导能让他们快速关注重点。老用户对平台的定位及能力相对熟悉,目标性更强,但在应用同时也抱有更高期待。因此恰当的引导能帮助他们快速了解平台变化并精准触达。作为产品设计者,也希望对用户行为进行有意识引导,让用户能发现、探索平台新能力,或能够按照我们的希望使用产品。公告弹窗、新手引导、全局提示这三类方法可帮助用户高效获取信息并助力精准触达。

1、公告弹窗

常用于系统升级告知,以模态弹窗表达,让用户聚焦当前内容并支持跳转了解详情。公告样式根据内容细分为三类:版本更新提示、重点升级告知、常规通告,不同类型需根据信息量多寡差异化表达。设计时可辅以插图或其他视觉元素烘托氛围,并在文案上注入情绪化的表达,从而提升用户的关注度。

1)「版本更新提示」承载简单介绍内容,让用户关注且快速获取变更信息。

图片

 

 

2)「重点升级」当有若干重要功能更新或新增时,可用此形式突出重点。

图片

重点内容露出建议2-4组为佳,弹窗宽度可根据内容适配。

图片

 

 

3)「常规通告」常用于文案较多的场景。设计上需要弱化视觉氛围,突出内容本身。

图片

 

 

2、引导类

针对局部功能升级的提示说明,一般与元素绑定关系较强,可让用户直观了解关注点,提升功能触达率。虽然此类引导轻量便捷,容易帮产品提升数据指标,但要注意适度应用。根据功能重要度、操作复杂度将引导总结为分步式、气泡、闪点、操作示意4类。

 

1)「分步式引导」常用于页面多个功能升级的引导组。当页面有多个升级点,直接平铺会让页面臃肿不聚焦。为了让用户高效获取信息,建议一次仅显示一条,通过「下一步」操作,逐步唤出剩余引导。为避免步骤过多导致用户疲劳,建议最多不超过5步。

图片

 

2)「气泡式」相对轻量的引导,有足够的提示性但不影响其他功能操作。

图片

 

3)「闪点提示」微辅助型提示,常与气泡引导配合使用。在需要关注的地方闪烁,点击闪点后唤出关联气泡提示。不对用户造成视觉干扰,又能引起一定的关注。

源图像

 

4)「操作示意」当无法用图文清晰描述操作路径时,以动态形式表达。

图片

 

3、全局提示

重点信息的汇总或提示。此类提示完美融合于页面,醒目且对操作无干扰,用户可根据披露内容判断是否处理。通过警示、徽标的应用向用户传达信息的变化并提供快速触达的能力,无形中提升用户响应效率。

1)「警示」不同颜色的提示条。常作为前置提示存在于页面或模块顶部,为用户顺利操作提供指引性帮助。既不打断用户当前操作,又足够明显,一般需手动关闭或事件结束后自行消失。不同颜色属性不同:一般蓝色代表消息通知、绿色代表成功、橙色代表警示、红色代表错误或异常等情况。另外,也可作为反馈应用在一些需要明确指示的操作后场景,此处暂不展开讨论。

图片

 

2)「徽标」形态各异的小红点。常出现在图标、按钮右上角的红色圆点、数字或文字,简单且醒目。表示内容更新或有待处理的信息,此类提示符合用户心智,无需教育就能向用户精准传达提示意图。

图片

使用时注意无数字与有数字的应用场景。有数字的徽标给用户带来的心理压力会更大,也会更吸引用户注意力,同时需注意数字长度控制。

 

操作中:具体的提示,助力高效填单

存在于操作的具体任务中,通过提示、推荐、预置信息等方式降低用户的认知及操作成本,提升填单效率。

 

 

提示说明

1、文案提示  

平铺在元素附近,对重点或复杂功能提供直观描述或建议。带有引导性的文案处理,会促进用户优化填写方案,输入更合适的内容。应用类型有三:重点提示、辅助说明、占位提示。重点提示与辅助说明使用户无需猜测;占位提示可使用户能够快速明确输入规则。因表达侧重不同,表单设计时三者搭配效果更佳。

图片

 

2、工具提示

此类信息作为文本解释层级较低,无需直接展示。通过悬浮或点击元素触发对应说明,以气泡形式出现。触发式的展现既能避免非必要信息堆叠导致的页面臃肿,又能保证需要的时候有迹可循。

图片

 

 

智能化

当一个系统背后的产品设计者考虑足够全面,能够预判用户的预期,那么它就能主动的给用户提供建议和帮助,甚至帮助用户自动执行一些任务,最大化减轻用户的决策压力。但值得注意的是,“智能化”需要一定的产品能力及丰富的数据作为支撑,设计时需结合实际情况应用。

1、信息预置

系统根据账户属性自动为用户预置内容。如下左图可见,仅需要填写一条内容,其他对用户利益无损的内容可通过预置选项来提升填单效率。

图片

 

2、智能推荐

此类设计的前提是平台有足够的数据积累,通过大数据或业务特色为备选内容打标签建标识。常用的设计方法有两种-为用户提供可视化标签,助力用户快速决策;交互手段简化,由多信息录入变为直接选择,强化推荐内容展示性,从而降低操作中的思考和录入成本。

场景一:「帮助决策」

表单中有大量需要用户录入的字段,在无任何参考的情况下用户用于决策的时间及输入内容的合规性无疑对填单效率造成一定影响。下图可见推荐标签能帮用户提供方向及边界,辅助用户决策,降低思考成本。

图片

 

场景二:「提升填单效率」

以单元创建为例,传统路径如下:新建>填写表单>保存>再次新建>再次填写表单…以此往复。用户每建立一个单元均需要把同类型的内容填写一遍,耗时费力。而智能推荐将常规表单输入变为模版选择,仅需2步就可完成多个内容创建:输入关键词>选择模版。选择和浏览的成本远远低于数据的频繁输入,模版设计则通过简洁的样式及内容层次化的展现提升信息获取效率。通过路径及交互方式的转变,上线后数据反馈操作效率大幅提升。

图片

 

3、预览能力

当操作过程较为复杂或结果难以预测时,可视化的预览可及时展现结果样式,方便用户实时调整,提升操作安全感。

图片

 

操作后:及时有效的反馈

及时响应操作成果,将功能的运行情况、数据的对错反馈给用户,及时有效的帮助修复输入中的问题。常见的反馈有以下四类:toast、表单错误校验、模态弹窗、独占式页面,每种样式因干预强度不同而适用不同的场景。

图片

 

1、Toast:一般3s左右消失,因体积小、展示位置靠上、自动消失等特点时常被用户忽视。常用于操作结果、系统性等等无明确后续指引的反馈,例如“提交成功”、“操作失败”、“服务器无反应”。

图片

 

2、错误校验:当表单出现输入错误时,按照就近原则在错误附近为用户展示明确的提示性消息,纠正和引导用户的输入内容。

图片

 

3、弹窗提示:提示性和阻断性都很强,能够让用户聚焦信息本身。通常提示内容可为用户提供指向性引导,需要强关注。

图片

 

4、独占式反馈:提交后页面切变为独立展示的页面级状态反馈。比弹窗的阻断性更强,信息获取更沉浸。在设计时建议搭配状态插图强化氛围,并提供操作按钮为用户提供通路。

图片

 

 

章尾总结

帮助体系的出发点就是在尽量降低人为干预的基础上,减少用户在不同使用阶段中的刻意思考与寻找,从而提升操作的顺畅性及用户的认可度。综上就是在不同操作阶段可用到的设计方法,尽管有些手段并不起眼,但也正是这些点滴的聚集和系统的应用为用户带来无声的帮助,让B端产品使用体验变得高效且富有温度。

 

原文地址:百度MEUX(公众号)

作者:商业用户体验部

转载请注明:学UI网》B端帮助体系二三事

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档