首页

十大心理学原理在产品设计中的应用

博博

对于产品经理、设计师和运营人员,心理学都是必须要补的一门课程。

可能很多同学都犯过和小摹相同的错误——在各种商城放“神券”的时候屯一大堆专业书籍。实际上,心理学的书籍你大概只要看到第三本,就会发现翻来覆去讲的就是那么几个浅显易懂的道理,而且大部分都是你在日常生活中就能观察和感受到的。

基础心理学(消费者心理学,社会心理学,传播和行为心理学等)的概念都不难,但如何精妙地运用在自己的专业上则非常考验使用者的功力。

为什么产品、设计、运营都需要学习心理学?

因为他们工作的本质都是和“人”打交道——用产品方案、视觉内容和活动规划来影响用户的决策、行为和心理。

你可能会觉得“依靠数据来统计用户的行为再针对性决策”会更客观,但实际上想得到靠谱的数据和正确的结论一点也不轻松,甚至很多公司根本不具备开展这类型调研的条件。

在这种情况下唯一的办法还是洞察用户并主动决策,此时基础心理学原理就是你进行判断的重要依据。

本文为大家梳理了十大著名的心理学原理,这些概念来自于多本心理学的经典名著,小摹进行了适当整合。

一、怀旧思维

简单来说,就是人们在绝大部分时候都会遵循历史惯性,更愿意相信过去的结论。

这也解释了为什么现代商业中,品牌一直是一项核心竞争力:如果一个品牌曾经赢得了消费者的信任,那么消费者往往愿意持续选择这个品牌的产品。

在产品设计中,怀旧思维有着极其丰富的应用场景。比如软件产品的交互对于操作上的创新要非常慎重——快捷键、交互逻辑、界面布局等尽量和行业中主流产品一致,会更容易让新用户接受。

比如我们的原型设计工具“摹客RP”,界面布局借鉴了国外的UI工具Figma和Sketch。虽然产品主打的方向并不相同,但遵循业界已经约定俗成的定式设计,在新用户上手的角度有很大的优势。

二、晕轮效应

晕轮效应原指人际交往中,人身上表现出的某一方面的特征,掩盖了其他特征,从而造成人际认知的障碍。

比如有的老年人对青年人的个别缺点,或衣着打扮、生活习惯看不顺眼,就认为他们一定没出息;有的青年人由于倾慕朋友的某一可爱之处,就会把他看得处处可爱,真所谓"一俊遮百丑"

晕轮效应是一种以偏概全的主观心理臆测,和上面的怀旧思维类似,属于一种思维的定式,因为这种方式大脑在决策时会更轻松。

对于产品规划者,尤其要想清楚自己的核心优势和卖点是什么,不必完美主义地去追求面面俱到,因为如果最突出的优点能打动用户,即使有缺点也很容易被用户忽略。

三、习得性无助

简单地说,如果用户在过程中产生了“无论如何都无法改变现状”的感受,容易陷入深深的绝望和悲哀。

在实验中,经过训练的狗本可以逃避实验者加于它的电击。但是,如果狗以前受到过不可预期(不知道什么时候到来)且不可控制的电击(如电击的中断与否不依赖于狗的行为),他们就会彻底躺平并不再逃离。

狗之所以表现出这种状况,是由于在实验的早期学到了一种无助感。

也就是说,它认识到自己无论做什么都不能控制电击的终止。

人如果产生了习得性无助,将很快抛弃当前让他产生失望感的产品。这个原理解释了为什么现在商品或者服务往往都要为用户提供非常顺畅的沟通方式(比如热线电话)。

如果你比较了解国外在线软件行业趋势,就会发现很多的新兴产品都已经不满足于提供官方的Email地址,而是直接提供Discord链接(可以理解为在线聊天室)。

及时的直接沟通可以避免用户产生绝望感,增加产品的生存几率。

四、贝博规率

其实用一个成语就可以形容这个规律:得寸进尺。在实际场景中,只要想办法让用户先接受了一个小要求,之后就更可能让他接受一项更大、更不合意的要求。

原始的实验中,心理学家让两位大学生访问郊区的一些家庭主妇。其中一位首先请求家庭主妇将一个小标签贴在窗户(这是一个小的、无害的要求)。

两周后,另一位大学生再次访问家庭主妇,要求她们在院内竖立一个呼吁安全驾驶的大招牌(该招牌很不美观,这是一个大要求)。

结果答应了第一项请求的人中有55%的人接受这项要求,而那些第一次没被访问的家庭主妇中只有17%的人接受了该要求。

这个实验说明,如果想要用户达到最终的目标,可以先适当设置一些和最终目标相关,但完成难度小得多的目标,循序渐进地引导,可以大大提升转化率。

这种原理在各种产品的销售的场景的可谓是遍地开花。

比如汽车、不动产等高价的商品,往往会给打出“来访即送好礼”的方式吸引用户前往,然后通过用户试驾、样板房体验等环节引导用户去体验和接纳,客户有意向后,也只会要求付定金(而不是全款)......这样繁复的流程都是为了把困难的目标拆解得更细小。

五、主观性证词

心理学研究表明,很多证人提供的证词都不太准确,或者说是具有明显的个人观点、倾向性和意识。甚至,证人对他们的证词的信心和证词的准确性没有足够的相关性。

结合这个原理,就能更好地理解为什么问卷或是访谈等经典的调研方法并不一定能收集到足够准确的信息,对于一些主观性较强的问题,个人的倾向会极大的影响答案的可信度。

正确的做法是,尽量避免在调研中出现主观性过强的题目,如果无法避免,尽量将题目拆解为多项能被客观量化或评估的问题。如果没有考虑用户本身对于产品的倾向性,很可能被言过其实的“证词”误导出错误的结论。

六、马太效应

马太效应是指好的愈好,坏的愈坏,多的愈多,少的愈少的一种现象,出自圣经《新约 | 马太福音》中的一则寓言。

这个效应常为经济学界所借用,反映贫者愈贫,富者愈富,赢家通吃的经济学中收入分配不公的现象。

类似的理论还有很多,比如二八定律(20%的头部公司掌握80%的市场份额,20%的优质客户贡献80%的销售收入,等等)。

这个原理告诉我们,要想让产品在某一个领域保持优势,就必须在此领域迅速做大。

当你成为某个领域的领头羊时,你也能更轻易地获得比弱小的同行更大的收益。而若没有实力迅速在某个领域做大,就要不停地寻找新的发展领域,才能保证获得较好的回报。

七、从众行为

营销和促销手段中最重要心理原理之一,即:人们更容易相信被多数人接受的选择。

我们经常可以看到路边两家餐厅,一家门口排满了等待的食客,另一家却一桌客人都没有,巨大的反差往往让后面到来的客人宁愿等待也要选择人多的餐厅。

关于这种心理,哲学家认为是人类理性的有限性,社会学家认为是人类的集体无意识,而经济学家则从信息不完全、委托代理等角度来解释。但需要特别注意的是,从众行为并非绝对的,因为在追求个人喜好上,人类往往也有很多个性的需求,从众行为和个性追求往往是同时存在的。

从众行为最典型的应用方式就是密集推荐或评价,现在的书籍的扉页动辄几十条推荐语,在线服务往往也会引用大量网友的好评,来证明自己的价值。

新产品在推向市场时,先多收集一些用户的正面评价,宣传时会非常有利。

八、比较心理

这是消费者心理学最经典的原理,简单来说就是把一个200元的产品和一个100元的看上去差不多的产品摆在一起,你就会觉得100元这个超级划算,很容易产生购买的冲动。

对于每个人来说,所有的认知,价值观和结论都是建立在【比较】的基础上得出的,所以,影响一个人的认知,最有效的办法就是创造对比的机会。

价格页面最喜欢运用比较心理,因为比较心理可以帮助他们重新设定消费者的认知。

常见的做法比如拉高产品的价格再做夸张的折扣让用户觉得这个商品现在超级划算;或者在主推产品旁边放置两个明显性价比不佳的次品,让用户对主推产品的效果感知更加强烈。

此外,在产品介绍时也可以将竞品的参数列在表格中和自家的产品进行对比(当然,这个表格中的项目都是挑选过的),这样更容易体现自家产品的优势。

九、投射效应

人们在日常生活中常常假设他人与自己具有相同的属性、爱好或倾向等,心理学家称这种心理现象为"投射效应"。

"以小人之心度君子之腹"就是一种典型的投射效应。当别人的行为与我们不同时,我们习惯用自己的标准去衡量别人的行为,认为别人的行为违反常规。

了解这一点对于产品的策划者们非常重要:用户的想法很可能和自己不同(即便你认为自己在这个领域比其他人都专业得多),但仍然需要被尊重。

所以近年来特别流行用户体验、同理心这样的词汇,产品应该以真实用户的体验满意度作为参考指标,设计者应该尽可能地以设想自己是一个目标用户时,会有什么反应,否则仅靠自己的“臆测”,创造出来的产品很可能和真实需求脱节。

十、赌博心理

以小博大的感觉是一种强上瘾体验,人们只有在输的时候才想到离开,少有在赢的时候离开。这个就是赌场盈利的本质模式。

由于真金白银赌博是法律明令禁止的,所以产品设计角度一般都是借助积分、代币等方式来给用户制造“抽奖”的机会。

对于国内而言,氪金手游和盲盒就是典型的两种应用场景,前者往往会设定一个极低的概率让玩家获得珍贵的虚拟物品,后者则是让消费者有小概率获得稀有款式的手办,引诱顾客购买超过自己需求的商品。

对于产品设计人员来讲,赌博机制可以说是一个潘多拉魔盒,通常不建议去使用和尝试。人人都爱KPI,但也要取之有道,职场人都应该有自己的底线。





作者:jongde来源:    站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

设计法则|打造极致的用户体验的秘诀-尼尔森十大可用性原则!

博博

推荐一个比较实用的设计法则,可以说现在的任何互联网产品都能看到这些理论的实践,本次主要想以比较多的案列进行实战分析。


在日常使用移动端或PC端产品时,不知你有没有这样的体会?



出现这些问题的,如何解决呢?

推荐一个比较实用的设计法则,这个法则已经有很多的文章说明了,可以说现在的任何互联网产品都能看到这些理论的实践,本次主要想以比较多的案列进行实战分析。



尼尔森的十大可用性原则是尼尔森博士在分析了两百多个可用性问题的基础上,提炼出的十项交互设计原则。被广泛运用于网页、APP以及各种人机交互领域。

要注意的是,这10项原则是启发式(heuristics)的、广泛的经验法则,可以指导我们更具价值的思考界面设计。

设计原则都可灵活运用于各个地方,可以是交互设计,也可以是界面设计,深入了解各种设计原则,让设计师在做设计的时候可以找到更好的解决方案,提高用户的使用体验。

理论介绍

雅各布·尼尔森(Jakob Nielsen)是毕业于哥本哈根的丹麦技术大学的人机交互博士,被誉为可用性测试的鼻祖,2006年4月,并被纳入美国计算机学会人机交互学院,被赋予人机交互实践的终身成就奖。 

尼尔森于1995年1月1日发表了「十大可用性原则」,该原则被广大设计师奉为教科书般的存在。虽然20多年过去了,但是对于现今的产品体验设计仍然具有很大的参考意义。







人机交互的基本原则是,让系统和用户之间保持良好的沟通和信息传递。系统要告知用户发生了什么,预期是什么,如果系统不能及时向用户反馈合适的信息,用户必然会感到失控和焦虑,不知道下一步要做什么。

界面状态分为两种:静态和动态。

静态即用户通过界面查阅,明确知道自己的位置、处于何种状态,或者知道界面数据的状态。动态即用户在进行界面操作时,系统应当立刻提供反馈,告诉用户该项操作被系统接受,让用户对操作感知及判断。

该原则在设计中的体现:

1、状态可见性-位置可见

告诉用户处在系统的什么位置,特别是对于新用户,需要提供必要的信息,否则容易迷惑。比如:导航菜单、面包屑、标签页、步骤条、分页器等等。

相比于C端产品,B端产品在页面层级往往更为复杂。因此,让用户明确当前所处的位置尤为重要,这也就突显出了导航的重要性。设计师在设计的过程中,要注意提供上下文线索,避免用户迷路。



2、状态可见性-进度条

告知用户系统运行的状态信息,比如进度、内容加载时,增加用户掌控感。

最经典的案例莫过于Loading页的进度条了,无论是加载页面还是下载内容,一个清晰的进度条可以让用户随时掌控进度,同时也可以用具体的数字更加明确的表示,比如:安装程序时显示进度条,并预估还需要多久结束,播放音乐时显示进度条,并提示预估剩余时间。



3、状态可见性-操作反馈

系统适当反馈是用户界面设计的最基本准则。当用户在与系统进行交互时,应当在各个阶段为用户提供必要、积极且即时的反馈,同时也要避免过度反馈打扰用户。可以使用的形式包括但不局限于:

操作反馈:点击页面跳转、按钮点击状态、警告提示、输入反馈等等;

结果反馈:非模态弹窗,轻量化感知系统内容反馈。(反馈内容应尽量不要打断用户操作,所以一般采用toast形式,反馈结果后及时消失。)

情感反馈:搜索没有结果时,没有数据等等空状态。

还可以通过元素的颜色位置、界面元素变化、文字、声音和震动,甚至动效等多种形式给予用户提示反馈。

注意,越是消极的反馈,比如网络连接失败、系统错误等,越是要及时告知用户,同时提醒用户采取适当措施。比如:1、提交表单时,如果校验失败,则在填写有误的内容旁边提示错误原因;2、程序未响应时,系统会让用户选择是关闭程序还是等待程序响应;



4、状态可见性-合理的时间

系统应该在合理的时间内,给予用户适当的反馈,让用户了解正在发生的事情。

当系统反馈时间小于1秒,通常正常反馈即可;相反长于1秒时,我们通常会通过加载动画、占位符、分步加载等方式,减缓用户等待的焦虑感。如果超过10秒还没有得到相应,那么通常会认为这次请求是失败的,需要给用户失败提示。

例如:下载提示、刷新提示、支付提示、新页面加载提示等。







系统尽可能贴切用户所在的真实环境。把复杂的系统语言换成用户看得懂的语言;环境贴切原则的根本目标是让用户可以快速上手产品,降低学习成本。

《iPhone人机交互指南》里提到的隐喻与拟物化是很好的实践。此外,还应该使用易懂和约定俗成的表达。

该原则在设计中的体现:

1、环境贴切-易理解的语言

这里说的语言不仅仅包括文案层面的语言,还包括产品的设计语言(图形、配色、风格、动效、手势等)设计语言都应该是易于用户理解和认知的。产品使用的语言应该是目标用户能够清晰理解的。如果用户不能理解,他们会感到被忽视和受挫败,许多人将选择其他产品完成目标。

从设计心理学角度来讲,用户在使用产品的过程中,其大脑会“优待”较常用的记忆内容和操作形式,有意抑制那些相似但不常用的内容,以便减轻认知负担,防止混淆,这种习惯从某种程度上来说属于“熟知记忆”。

比如细分市场的产品,针对中老年、青年、儿童的产品或商务、娱乐的产品,都要分别使用符合自己的定位的语言。



反面案例就是windows系统出错了页面,一堆乱码,看不懂又很慌张,就很不友好。另外还有一点,很多大公司的app都会针对他们不同国家的用户群体进行各种语言的翻译处理。

为了照顾不同国家的用户的使用习惯对页面结构布局,风格,语言,字体,包括交互方式都会做特殊处理。这就是场景贴合原则。

2、环境贴切-模拟现实世界对象

模仿现实世界的产品或者使用映射,能够利用人们现有的知识,可以显著的降低用户的认知和学习困难,并增加他们的使用兴趣。

比较好的案例就是iOS原生的计算器、指南针,微信红包都是模仿了现实世界的产品。



3、环境贴切-符合现实世界隐喻

从现实世界中借鉴的设计元素可明显降低用户的认知和学习难度,并且增加兴趣。最有代表性的就是网易云的音乐播放界面图形隐喻表达。美团APP的母婴类目icon的设计非常有趣,且非常容易理解和使用,让人印象深刻。



4、环境贴切-操作手势符合联想

使用的操作手势,应该是用户自然就能联想到的,不要创造、更改操作手势的意义。


5、环境贴切-自然的动效

动效的加载样式应符合自然规律,需要平缓过渡,而不是生硬的加载效果。比如:网易云音乐播放时唱片转动、停止播放时唱片自动移开,有趣且有效。




用户在使用产品的过程中,误操作是经常发生的事情,系统应提供撤销和重做功能,让用户具有对产品的控制性与自由度。

用户可控原则的根本目标是让用户可以在界面自由操作,而且无需为操作不当承担责任。

该原则在设计中的体现:

1、可控原则-可自由导航

清晰便捷的导航方式,使用户可自由控制返回和跳转的页面。

由于B端系统的复杂性,有些功能的层级会比较深。弹窗A中的某个操作可能会触发弹窗B的弹出,如果弹窗A和B承载的功能具有父级和子级的关系,同样需要考虑「返回」的功能以及清晰的层级关系。

2、可控原则-可自由返回撤销

用户在使用系统的过程也是一个试错的过程,系统要让用户觉得自己的行为是可控的,可以犯错,并且在犯错之后可以反悔。用户在使用产品时可以自由进退,遵循从哪里来就返回到哪里去的原则。当用户误操作时要给用户提供撤销、取消、重做等相关功能。不可逆的操作要给用户明显的提示。

比如微信聊天是可以撤回的,并且撤回之后还支持重新编辑;对于我这种打字总是出错的人简直就是福利。iphone相册删除照片后,支持在短期内找回;在word中编辑文档时,支持撤销和恢复,保存的同时,还能查看历史保存记录。



回收站功能:让用户更有自由度,增加用户安全感,可控的找回误删除资源。



3、可控原则-不可逆转的操作需要警告

系统在重要的不可逆转的操作需要给用户提供二次确认或者撤销的功能,这样可提高用户的操作可控性。在产品设计上,防止用户常见的误操作。比如很多产品在涉及到内容的删除操作时,经常会有弹窗提醒,让用户再次确认。这样是防止用户误操作带来的删除损失。用户不用因为操作带来心理负担,从而提升操作可控性。

比如iPhone ios系统:

1、常见的二次确认主要可以通过以下方式实现:通过文字提示,用户阅读后点击是与否来进行下一步;

2、通过动作,用户通过输入特定字符或者完成验证码拖拽等操作才可进行下一步操作;

3、通过身份校验,用户需要提交个人身份信息以完成校验;







整个系统要保持产品结构架构、导航、用语、色彩、操作行为交互的一致性与标准性,遵循平台惯例与行业标准。我们在设计中常见的制作平台规范,其实就是为了保证平台设计的一致性。

一致性原则的根本目的是保证产品的专业性,给用户带去统一的体验感受。

该原则在设计中的体现:

1、一致性-产品内部一致

遵循产品内部的惯例,可帮助用户快速学习使用产品功能。产品内部的一致性包含:产品功能框架、文字、设计风格、布局、反馈等等。

比如:小熊艺术app,一款针对孩子学习美术的app,不管是首页、个人中心以及加载等页面,风格保持一致性都是主打清新黄色+可爱icon。黄色小熊更是在不同的合适的时机出现,banner、加载,课程动画中等。不仅风格一致性、布局、反馈等产品内部保持一致性,也形成了统一的品牌传达。




但是,有时候为了达到产品目标,偶尔也会故意采用不一致的设计。

比如:常见的对话框都将“确定”按钮放在右边位置,所以用户在操作时,很容易产生条件反射,顺手点击右边按钮,然后才突然发现自己点错了。虽然看起来有些别扭甚至很多人不喜欢,但是很有效,这种设计在软件卸载、App取消会员订阅等操作中非常常见,主要是为了做一些心理暗示和引导,避免用户卸载或退订。



2、一致性-交互行为一致

交互和用户的习惯一致,意味着用户不再需要重新学习,各种应用之间的切换没有学习成本。我们在前期已经培养好用户的使用习惯,那么就不要轻易改变,减少用户的认知成本与学习成本。

例如:常见的页面的后退或返回都在屏幕左上角、搜索栏都在屏幕最上方、菜单栏都悬浮在屏幕底部。



3、一致性-迭代产品一致

当产品线进行更新迭代的时候,应该保留用户既有的交互和操作习惯,用户在上一个版本形成的交互认知在下一个版本是否能被沿用,这对于用户来说在产品体验上会造成很大的干扰。

比如微信的多年的迭代,底部tab功能一直都是这样,主要功能入口一致没有变化,就体现了迭代产品的一致性。


4、一致性-同一团队/公司产品线一致

Office软件中包含的各个产品,其界面布局和设计风格都保持了高度一致,如下图所示是PowerPoint和Word的界面,可以看出,二者的“插入”一级菜单下所包含功能的排列顺序、布局方式乃至图标图形,都是高度类似的。



5、一致性-设计语言一致

遵循统一的产品设计规范/逻辑。这里的一致性包含产品和跨平台产品之间的一致性。确保整个系统的结构一致性、色彩一致性、操作一致性、反馈一致性、同种组件样式保持一致等设计语言都遵循同一套设计规则。

比如,产品内相同颜色的反复出现,为产品打造视觉锤符号,强化产品在用户心中的记忆点。符合平台设计规范,

苹果系统参照人机交互设计指南设计规范,安卓系统参照Material Design设计规范,或者直接参照自己团队的的设计规范,应该遵循惯例,并且保持系统的一致感,不要盲目地标新立异。



6、一致性-业内产品保持一致 

不知道你发现了没,现在的电商、音乐、社交等等app越来越一样了,一样的交互,一样的排版设计,基本上都遵循着类似的交互逻辑和视觉元素。


为什么会这样?同类软件设计的趋同化,未必不是一件好事?

与业内产品保持一致,意味着用户不再需要重新学习,就可以在各种应用中自由切换,用户学习成本的降低,也意味着我们获客成本从某种程度上被降低。而这些约定俗成的规则和流程都被用户不自觉地印刻在大脑中,成为一种自然的习惯,而独特的设计,截然不同的规则,则常常会成为习惯以外的东西,引起混乱,让初次上手的用户感到受挫和沮丧。

如,在App底部的导航图标中,“首页”永远排在第一个,个人中心(“我的”)永远排在最后。并且对于类似“首页”“购物车”“订单”等常见按钮,不同App的设计样式都非常相似。如下图三个不同音乐app的对比图:



如果你特立独行地把个人中心放在第一个位置,或者采用奇怪的图标作为个人中心的icon,用户使用时肯定会觉得别扭。





防错原则的根本目标是阻止错误行为,避免进一步犯错,指引用户正确的完成操作行为。

「防止错误」主要分为三个阶段:错误行动发生前,引导用户向正确的方向前进;用户触碰到危险操作时给予提示;危险操作发生之后,提供撤回的入口。

该原则在设计中的体现:

1、在执行危险操作前做设计:

比一个优秀的错误提醒弹窗更好的设计方式,是在这个错误发生之前就避免它。它可以帮助用户排除一些容易出错的情况,或在用户提交之前给他一个确认的选项。

通常情况下,按钮置灰表示对应功能或操作无法使用,这也是防止错误的一条有效途径,因为用户通过按钮样式就可获知其状态,提前规避无效的提交操作。当然,不是只要功能或操作无法使用时,就应该将对应的按钮置灰。其实更好的做法是填写完标题后按钮不置灰,点击完成按钮后定位或高亮必填项,让用户更容易识别错误点。

比如在登录时,只有输出信息后才可以点击登录按钮,未输入信息时,按钮是不可以点击的状态。通过系统主动对用户进行操作限制,帮助用户避免发生错误。



限制用户的选择并不是一个好主意,但是如果有明确的规则来定义可接受的选项,那么限制用户可以输入的类型是一个很好的策略。再比如输入验证码页面,为了防止用户多输入或者少输入验证码,只给到四个输入框,让用户只能输入四位数字,减少输入错误的几率。


2、在执行危险操作中做设计

提供清晰的提示,防止用户犯错,提示包括标签、文字、颜色、以及反馈状态等。利用颜色,动效提供警示信息,比如常见的微信退出的按钮是红色的,状态未完成的标签是红色的等等。

如:表单填写过程中让用户及时知道输入格式,出错原因,避免填写完成后再提醒,浪费用户时间。

范围限制:限制用户的选择并不是一个好主意,但是如果有明确的规则来定义可接受的选项,那么限制用户可以输入的类型是一个很好的策略。比如:电影购票时,已购买的位子不会再提供选择,很好的避免了买重的问题 



3、危险操作发生之后做设计

特别要注意在用户操作具有毁灭性结果的功能时要有提示,防止用户犯不可挽回的错误,需打断用户,提示用户是否要进行此操作,让用户有更多的思考时间。所以在一些不可逆的操作中二次确认是非常有必要的。

这条原则很重要也很常见。在删除信息时,系统会让用户确认删除,也就是我们常说的二次确认,电商平台允许在一定的规则下取消订单等等。






易取原则的根本目标是提升用户在界面上的操作效率,系统应直观地协助用户完成任务。

系统应协助用户进行记忆,通过使元素、操作和选项可见,减少用户的记忆负荷,在适合的时机给用户需要获取的信息。

识别比回忆要好,对于路径较长的操作,我们更应该协助用户记忆。比如在淘宝下单的操作路径,每一个页面顶部导航栏会尽可能的提醒用户操作到哪里,用户所有的操作信息都是可见、易获取的,减少用户对操作目标的记忆负担。

该原则在设计中的体现:

1、易取原则-易扫描

用户心理学研究发现,互联网用户浏览网页的动作不是读,不是看,而是“扫”。这是互联网用户浏览的主要方式。所以我们在设计的时候,需要清晰的视觉层次结构,突出重点,弱化和剔除无关信息,降低页面干扰,来减轻用户阅读成本。



2、易取原则-让用户选择而不是填写

比起让用户输入,让用户选择更能降低用户的记忆成本,更好地辅助用户做决策。如果,有很多的信息或者选项是用户高频率会选择的,设计师不妨给用户提前做好选择,提供默认选项,如下图:



3、易取原则-智能获取

通过智能读取用户之前填写过的信息,或者智能识别等形式,减少用户记忆负担与操作负担。

常见的是寄快递-新增地址,将用户复制的文本字符类型进行识别并匹配,将有用的信息内容提取出来,对体验而言显得高效又智能。

或者淘宝购物确认订单时,系统会自动为你带入之前的商品信息,包括选择的商品规则、数量、价格、默认记录显示常用的地址等。这些信息虽然之前都选择过,但是需要用户在购买前二次确认,由于信息比较多,用户很难记忆,所以确认订单再展示出来更加合理。



比如:用手机登录时,收到的验证码直接展示在软键盘上,用户无需记忆也无需输入,直接点选即可登录;

美团APP中,当用户选择商品时,系统会自动计算商品价格和满减后的价格,还会帮用户记录选择了哪些商品以及份数,不需要用户自己花时间去计算还差多少才能满减等,减少用户记忆负担,同时节省用户点外卖的时间,这也用到了易取原则。

订单页面若某信息需要用户从一个页面复制到另一个页面完成查询或编辑输入,那就有必要为该信息提供快捷复制功能,如订单号紧跟着一个复制按钮。

我们在搜索一个歌名的时候,记不住完整的歌曲名,我们只要输入关键的几个词,系统就是帮助我们记忆,出现相关的搜索。



4、易取原则-草稿箱或历史记录

作为用户,你不记得的操作,系统可以帮你记录。为用户提供历史记录,文本创作的过程中自动保存草稿,让用户方便查询自己的进程,这就是信息易取原则的设计。

保留历史,最为常见的就是为用户保留历史搜索和历史浏览、储存账号和密码。视频APP会详细记录用户的观看记录,当用户没有看完某部电影时,下次进入直接从断点续播上次播放的位置,无需用户记忆上次看到哪里了;

不只是观看记录,视频软件还会帮你记录同一账号在不同设备上的登录记录,观看记录也会在不同设备之间进行同步。



5、易取原则-可视化

将选择的对象,动作,选项可视化,让用户一看就懂。注意图标符号化能让人理解,避免引起误解。

抽象图形+文字,提供了更多的信息,更加丰富了记忆效果,避免了用户需要记忆才能想起图形代表的含义。我们常用的app导航栏都是以这种icon和文字相结合的形式,这就是很符合易取原则的例子。



6、易取原则-内容可预期

在用户使用产品的过程中,会有一些需要用户记忆的内容、或者操作路径,在设计的时候我们要避免用户记忆,把信息直接提取出来,送到用户手里。同时每个页面传递的信息量尽量少,减少用户的阅读压力。

常见的例子是各类优惠券,设计的时候会有明确的位置说明限制时间,类别等等,同时还会有清晰的入口引导去使用或者规则的入口。



7、易取原则-行为输入代替字符输入

这一点其实也非常好理解,一个简单的动作,比打字要轻松得多,常见的就是在设备解锁的时候,用手势解锁替代密码解锁。

随着技术发展,有了更多的行为代替输入的方式,比如指纹识别和面部识别,用简单的操作,就可以达到进入系统的目的,这就避免了用户需要较多的操作和密码的记忆。







灵活易用原则不仅是一个交互设计原则,也代表了一种软件产品设计理念:系统既要做得简单、易用,让所有用户用起来得心应手;

灵活易用原则的根本目标是保持系统的灵活性,以满足不同用户的不同需求。既要提供必要的帮助,让刚入门的初级用户顺利上手,还需要支持灵活的个性化定制,让高级用户能够快捷高效使用高频功能,充分发挥其价值。

该原则在设计中的体现:

1、灵活高效-提供定制化服务

让用户灵活定制的最典型的例子是各类软件和App的配置功能,基本上所有软件都会提供定制化功能,从快捷键设置,到页面布局,再到自定义参数,软件系统会尽量提供全面的个性化设置功能,来满足不同用户的使用诉求和习惯,提升用户的使用效率和体验。

例如支付宝首页,用户可以自定义首页的应用。对于使用频率比较高的老用户来说,这是一个非常方便的功能。



还有一种是系统更具用户常用自动整理归纳,以提升使用效率,减少用户多余操作。

比如:微信的聊天表情,由于可以选择的表情很多,正常情况下用户很难快速找到自己想用的表情。而用户的使用习惯往往是循环使用其中的某几个,所以把最近使用的表情展现出来,会极大的提升用户的寻找效率。

除了从新老用户的角度对用户做区分,还可以从其他维度区分用户,针对不同用户做不同的功能。比如:微信为了让中老年用户使用方便,推出了关怀模式。在关怀模式下(下图)文字更大、色彩更强、按钮更大,还可以使用“听文字消息”的功能。这些功能充分考虑了“中老年用户”的需求和痛点,让产品更加灵活易用。



2、灵活高效-提高用户使用效率

灵活高效原则在交互设计中使用会提高用户使用效率,例如微信聊天页面中,当用户输入某个字词之后,系统会自动帮你匹配相应的表情包;

当你输入某个词之后,输入法会帮你自动联想接下来你可能会输入的词;截图后进入微信聊天页面后,系统会将你刚截的图前置,它会自动判断你可能想发送该截图。如下图:



3、灵活高效-“跳过”按钮

通过用户快捷跳过的入口,比如常见的:引导页、操作手册、还是开屏广告,有“跳过”或者”立即进入“按钮真的很贴心。



4、灵活高效-允许用户重复操作

对于用户频繁使用的部分,提供快捷的重复使用操作,比如:外卖app,用户可以快捷地再来一单,同时保存上一次操作记录。



5、灵活高效-各取所需

在设计功能时,最好能考虑到不同层次用户的需求,以此来让用户「各取所需」(需要平台有多类型用户);比如常见的Word、Photoshop等,有一个“二八定律”,就是说80%的功能是给20%的用户使用的。

设计这类产品时,最常用的20%的功能一定摆在最显著的位置上,方便所有用户使用,而80%的高端功能,要适度隐藏,使得整个产品看起来尽量简洁、美观。比如Sketch的工具栏和快捷键就是给新手或资深用户准备的。



大数据智能判断:

淘宝的首页每个人推荐的商品都不相同,淘宝后台根据用户的浏览习惯,购买/收藏记录等大数据智能判断用户的喜好,对商品进行千人千面的分发。

但是切记不要太过依赖大数据算法的判断,因为一旦形成这种模式,会给用户造成回音壁效应,你越喜欢的东西系统就越给你推荐,其他的商品就像回音壁一样被吸收过滤,用户永远没有办法发现新的东西,让用户的选择永远都在一个死循环,所以做千人千面设计时一定要适度。





优美而简约原则的根本目标是让用户快速找到界面的重要信息,引导用户的视线及操作行为。

UI设计应该是符合大众审美的,不需要多么酷炫,而是需要我们注重信息获取效率,更加聚焦内容,删除多余的视觉表达元素,让界面保持美观简约。

“快扫”是互联网用户浏览的主要方式。我们熟知的产品设计的四大基本原则:亲密性、对齐、重复、对比,就是使页面优美而简约的方法。

该原则在设计中的体现:

1、优美简约-视觉层级关系明显

建立清晰的视觉层级,越重要的内容越突出,能够方便用户无障碍地浏览信息,提高用户操作与信息获取效率,各模块间采用卡片或者间距区分开,加强页面层级区分。

我们通过颜色、大小、字体的字重、对比度、元素的间距、特殊造型、动效等来表现。



2、优美简约-避免界面元素过于杂乱

避免界面呈现过多元素,包括动效、配图、icon、按钮等等,降低用户的视觉干扰。保留产品最主要的信息,如果不是优先级最高,要尽一切可能避免去影响产品的简洁和美观,可采用大留白增加页面呼吸感,聚焦内容。



3、优美简约-对重要信息突出显示

用户注意力资源有限,应该保持信息精炼,突出重要信息,弱化次要信息。



上面两个案例通过加粗放大、标记颜色,从而让页面简洁,且突出重要信息。





容错原则的根本目标是让那个用户在操作出错后还能挽回错误的余地,从而给用户一致产品很安全贴心的感觉。

系统需帮助用户识别、诊断、并为用户从错误中恢复提出建设性的解决方案。通过提示性文字或者插图让用户意识到出错了,比如404页面的情感化插图、弹窗提示用户出错等。

该原则在设计中的体现

1、容错原则-引起用户注意

当发生错误时,提示信息一定要直观,视觉上能够引起用户注意,可视化处理,文案要简单概要,并给出解决方案。例如删除订单时,会提示二次确认,避免用户误操作。



2、容错原则-提供解决方案

在出错界面给出解决方案,可以是文字提醒或者按钮跳转等形式,帮助用户解决问题。比如缺省页的设计除了配置插图还会有提示文案与操作按钮,引导用户去操作,去进一步解决问题。



3、容错原则-帮助挽回损失

系统能帮助用户自动甄别错误,并及时进行纠正时,将会给用户带来极大的便利,撤销或者找回功能,都是帮用户把损失降到最低的有效方法。

比如微信信息的消息撤回重新编辑,相册的最近删除、回收站等等功能。







人性化帮助原则的根本目标是用户在使用产品的过程中有所依循,因为产品已经贴心地为他们准备好了帮助方式,或者即时提示和反馈,或者客服。

人性化帮助用户最好的方式分别为:1、无需提示;2、一次性提示;3、常驻提示;4、帮助文档。

最好的就是没有提示,用户就能看懂与应用产品;其次是一次性提示,提示一次用户就懂如何使用,比如第一次进入app或新功能上线的引导设计、通常为气泡形式。常驻提示需要一直固定在某个位置实时帮助用户。

最后就是帮助文档了,一般用于解释规则或者热点问题,通常以超链接的形式存在于页面中,或者以集合形式位于设置页中,此时需要注意要易于检索。

该原则在设计中的体现:

1、人性化帮助-方便用户查找

帮助文档的入口容易找到,帮助信息方便用户查找。常见的方式有:鼠标划过悬浮文字说明,帮助用户更好地理解。



2、人性化帮助-便于用户理解

用户通过查看帮助文档来学习新功能,相对比较麻烦。如果能将教程和功能放在一起,用户可以“边学边练”,就更容易让用户理解。

提示语避免使用专业术语,尽量使用图片或者图形,同时处理文字外还可以使用示意图,操作步骤等,方便用户应用。



3、人性化帮助-便于用户应用

在操作时的帮助信息,比如帮助悬浮按钮:一直出现在页面固定位置,方便用户遇到问题寻求帮助。


4、人性化帮助-信息引导

搜索时,预搜索词直观地显示出来,可以让用户更快地做出搜索判断。微信转账页面,当用户输入金额较大时,会在第一位数字下方提示转账金额的人民币单位,目的是为了避免用户输入错误金额导致资金损失;



5、人性化帮助-步骤引导

复杂的流程可以通过分步骤来引导用户逐步完成,而不是一次完成所有任务。个性化的提示一次就够了,用户用过一次就知道其用法。




现在很多C端产品普遍做了良好的交互设计,可以帮助用户快速学习使用,而不用阅读、理解复杂的说明文档。

然而,B端产品的复杂性比C端产品高很多,因为B端产品蕴含很多业务流程的规则,系统中的一个按钮可能代表了一个复杂的业务处理规则,如果不了解整个业务场景和处理规则,是很难理解按钮的操作含义的。

因此,对于B端产品,用户进行自助服务、自助操作的难度高很多,B端产品的帮助文档依然有存在的必要。产品设计人员要尽量在前端交互上做好引导提示,对于复杂的规则和逻辑,可以考虑通过帮助文档来指导用户。

总结

尼尔森十大可用性原则可灵活运用于各个地方,可以是交互设计,也可以是界面设计,深入了解该设计原则,可以找到更好的解决方案,提高用户的使用体验。要注意的是,这10项原则是启发式(heuristics)的、广泛的经验法则,而不是具体的规定。

1、状态可见原则:位置可见、数量可见、状态可见;

2、环境贴近原则:语言应该是用户所能理解和习惯的;

3、用户可控原则:可见导航、关闭与返回、撤销与重做;

4、一致性原则:产品内部一致、交互一致、迭代产品一致、同一产品线一致、设计语言一致、业内产品一致;

5、防错原则:操作前预警、操作中确认、操作后可撤回;

6、易取原则:易扫描、智能获取、草稿箱和历史记录、对象可视化、选择代替输入;

7、灵活高效原则:灵活配置、允许频繁操作、各取所需;

8、优美而简约原则:视觉层次明显、简约且突出重点信息;

9、容错原则:帮助用户识别、诊断,并从错误中恢复提供方法;

10、人性化帮助原则:无需提示、一次性提示、常驻提示、帮助文档。

最后

我准备了一些常用的设计素材送给大家,需要的话免费拿走。获取方式:老规矩公众号后台,发送文字“素材”,就可以获取了~



文中如有不严谨的地方希望大家给予指正,希望大家可以多多点赞评论鼓励一下,最后感谢你的耐心阅读。






作者:789研习社      来源:站酷

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

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

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

一文看懂B端筛选设计

博博

筛选作为一个常用的功能,在B端产品设计中可以快速按照需要对数据进行查询和筛选。希望本文对你有帮助。

今天与大家分享的是关于B端页面中筛选区的功能设计,本文会从筛选的展现形式、布局、反馈、设计中遇到的问题以及设计思考这几个方面进行讲述。


简单介绍下筛选


筛选,也可以称作过滤器,它属于搜索框架的一部分主要用于内容提取,将一类数据展示,同时一类数据隐藏,可以整合很多的组件。


在B端产品设计中,筛选区的设置便于用户进行数据查询和数据定位,可以快速的按照需要对数据进行查询和筛选;筛选的存在对于整个表单来说是非常重要的,它可以帮助用户在表单茫茫多的数据当中进行快速的数据定位;可以对表单进行快速数据按照自己想要的方式进行划分,缩短用户对于数据的寻找时间。

1、筛选区的展现形式有哪些?


筛选区常见到的有搜索、条件筛选这两类控件。搜索和筛选虽然同在筛选区,但是二者还是有所差异的。


通过百度百科我们可以了解到:
搜索,意思指仔细查找,搜寻。
筛选筛选是利用筛子使物料中小于筛孔的细粒物料透过筛面,而大于筛孔的粗粒物料滞留在筛面上,从而完成粗、细料分离的过程。该分离过程可看作是物料分层和细粒透筛两个阶段组成的。物料分层是完成分离的条件,细粒适筛是分离的目的。

在B端系统界面设计中,搜索是通过指定任意条件,系统对此条件进行的检索后,展示相对应内容,功能偏主动性;筛选是系统提供指定各种条件缩小范围,可以选择查找不同条件的内容,功能偏被动性


无论被动性还是主动性,搜索和筛选这俩个功能都是让用户使用某个条件对内容进行区分,从而找到用户想要的内容。二者在功能上相辅相成,在B端系统的页面中仅靠搜索或者筛选作为内容筛选都是不够的,这就需要组合筛选区了。



1.1搜索筛选


精确搜索
优点:搜索准确率高,所要即所得。
缺点:需要用户自己输入,然后进行查询。需要记忆搜索详细信息。输入框需要有提示输入的内容,方便用户填写,以及确认输入的类别或格式。
适用场景:适用于用户有清晰的目标,同时需要有查询/搜索按钮,来执行筛选。搜索需要配合筛选固有类一起使用。


模糊搜索
优点:模糊搜索可以用于搜索关键字的同义词,提高搜索的精确性。字段匹配推荐搜索结果,减少记忆负担,适用于不明确的信息筛选。
缺点:筛选出很多类似相关的内容,需要查找鉴别所要内容,不便捷。
适用场景:用户对目标模糊,模糊是指不用关心输入了什么格式,哪怕错了,系统也会推荐给用户相对正确的;用户需要浏览操作过滤器提供的信息来辅助筛选达到目标。搜索需要配合筛选固有类一起使用。

搜索的设计原则


关于搜索,几乎没有人不知道,哪怕是不从事设计、产品的人,他们也知道。同时每一个产品,随着规模变大,搜索一定必不可少。那么如何设计好搜索呢?有哪些原则可以借鉴,总结了以下4个方面。


渐进呈现
在我们设计搜索时,可以考虑渐进呈现的方式。这是指搜索结果不要一股脑儿都塞给用户,而是使用逐步扩大的方式,让用户慢慢进入目标。但这里要注意,渐进的层级不要太深,渐进的内容要做到足够为用户着想。

结构化
结构化是指搜索结果呈现的形式要有归纳和整理的意图,不能反馈给用户的是没有层次的内容。简单来说,分类就是结构化呈现的体现,内容结构化后用户查找和定位才会更快速。

可操作
对于搜索结果,我们可以给予操作选择,例如收藏、分享等,这将会大大提升用户与搜索结果之间的后续联系。
可操作性是最佳优先的好伙伴。同时给搜索结果添加使用类操作,这会让用户专注于目标。

可保存
无论搜索任何内容,用户都有权保存自己常用的搜索结果,保证用户后续无需重复搜索。这点上已经有很多C端产品做的很好了,我们在B端产品上也可以考虑起来。


1.2条件筛选


下拉筛选


优点:页面的空间利用率高,同时下拉起到了很好的收纳作用,不占据页面空间。
缺点:由于下拉的局限性无法观看到所有的筛选字段,需要操作点击查看。


适用场景:下拉的筛选字段选项有限,可以明确的总结分类时,一般采用固定选项类。这种操作起来便捷,降低用户的操作难度。一般情况下需要“搜索/查询”按钮,但是也有的产品是勾选即执行的。主要需要结合具体的使用场景去判定。


矩阵(平铺)筛选
优点:用户可以直接看到筛选内容,支持输入更多筛选条件,减少操作步骤提高了用户筛选的效率。
缺点:平铺的筛选类目占据页面空间较大,空间利用率低,信息量过多都是重点等于没有重点,增加用户的决策时间,不适合选项太多的情况。


适用场景:平铺筛选控件的普适性为最强,当没有其他更好想法时,用平铺总是一个好的选择。需要注意的是,筛选条件不要过多(遵循7±2 法则)。


注意事项:
当确实需要支持大量的筛选条件时,有两种解决方案可供参考
1、用户自行配置筛选条件:对用户来说,单次筛选会用到的条件是有限的;通过可配置的筛选条件,实现检索效率和信息噪音的平衡,对于用户自定义项的体验与应用都有更好的支持。
2、 隐藏低频的筛选条件:这种方法需要对用户需求有明确的把握,哪些筛选条件是高频、哪些是低频需要有明确的分界,优点是第一次使用时用户能更快上手。

表头筛选
优点:通过表头的点击,简洁、直观的筛选当前表格列。
缺点:只能筛选当前列的内容,筛选字段比较少,筛选形式比较单一。每个表头都会有筛选的icon,影响用户对于表头的识别。表头筛选学习成本最高,且和表头排序容易冲突,筛选值展示也不够直观。


适用场景:表头筛选类似Excel表格的操作,是一种相对高级的交互,适合表格列比较单一内容的筛选。
注意事项:
一般来说不推荐使用,仅建议在以下几种情况考虑使用
1、空间是在有限或者表格非常灵活;
2、用户可能对每一列都有筛选需求(如数据报表、Excel);
3、产品规划时对于用户筛选需求不够明确,也可通过这种模式先采集数据,分析其使用频次,对后期的界面优化进行指导。

TAB标签
优点:筛选条件一目了然,交互步骤少,一个Tab标签代表一个纬度,平铺展示筛选内容方便识别,学习成本低。
缺点:Tab标签筛选字段数量有限制,不宜过多,分类需覆盖选项,并且保证每一项没有交集,空间占用多、不够灵活,对用户自定义项支持较差。


适用场景:Tab标签切换一般用于和时间、状态的流转有关,且没有交集的数据内容(可以是同性质,也可以是不同性质)。权重高,选项值不超过5个。

1.3组合筛选


在B端系统表格类页面中,字段属性很多,简单的检索方式很难准确定位到目标数据,所以在实际使用当中,常会将大量非交叉关系的属性进行罗列,搜索、筛选、TAB标签切换组合出现,形成多属性的组合检索。而筛选项互相组合,其展示方式有如下几种: 


平铺式
平铺式是将所有筛选项罗列出来平铺在页面上,可以兼容多种数据格式比如数字、文本、标签、枚举值、布尔值等,包含但不限于日期选择期、标签切换、单选框、复选框等多种控件。


优点:用户能直接看到选项内容,方便用户识别选项,且提高了用户筛选的效率(节省了筛选操作),大而全的筛选字段最大限度避免筛选条件遗漏的问题。


缺点:筛选项多会占据大量页面空间,信息量过多都是重点等于没有重点,增加用户的决策时间,不利于表格数据的直观展示,此类型一般配合“勾选即执行”使用。


适用场景:普适性为最强,当没有其他更好想法时,用平铺总是一个好的选择。适用于从各个纬度筛选的场景,多维度筛选对信息筛选的颗粒度需求不一致,同时希望备选项被选中。

折叠式
折叠式筛选是平铺式筛选的改进,一种简单直接的筛选形式,对平铺的筛选项进行收纳,如果多属性组合检索中的一部分检索条件不是高频率使用的,但又是必须存在的,可以通过折叠的方式将这部分筛选字段隐藏起来,高频筛选字段外露。


优点:高频筛条件可优先快速筛选、一定程度上减少用户的认知负荷,同时占用空间较小。


缺点:不好划分不同用户的高频筛选项,当高频筛选项过多时,页面同样会出现信息冗杂、空间占比大等问题。


适用场景:折叠低频筛选,显示高频筛选,能满足大多场景下不占用太多空间。针对有更多筛选需求的用户也有更好的引导性。



2.筛选区布局


从位置上来说,组合筛选一般有如下几种常见类型:上下布局水平筛选区、左右布局的垂直侧边筛选区、 内嵌的的表头筛选区。


上下布局水平筛选区


最常用的上下布局,筛选区放置在表格页面的上方,方便用户识别选项,提高了用户筛选的效率,明确哪些数据是用户所需的。上下布局的筛选区也方便用户进行阅读,对于那些由不同数据结构组成的页面,是一个很好的选择。


上下布局的筛选区的可扩展性差,当筛选项目少于五个的情况下,最常使用的就是上下布局,而当筛选项目多的时候,会占据大量页面空间,内容在较多时,推荐增加收起功能,这样保证筛选整体面积不会很大,提升屏效比。


左右布局的垂直侧边筛选区
左右布局的筛选区一般是以字段选择进行筛选,筛选区的位置较固定,不会因为筛选项过多而影响页面中主要内容的位置,可扩展性强,可在收起部分嵌套更多的字段值。


左右布局的好处就是能够将筛选的所有条件都直接的展示出来,可以适应很多场景,但是这种类型筛选器可以影响整个页面。我们需要确保页面上的每个元素都有效地受到筛选的影响,避免造成混乱。


内嵌的表头筛选区


表头筛选是一种复杂的筛选形式,常见于列表中,是一种列表内置筛选形式,适合表格列比较单一内容的筛选,其最开始是源于Excel的筛选形式,点击表单的筛选按钮,可以将表头的筛选字段直接带入,方便用户。


3.筛选区的反馈


筛选区有两种不同的反馈模式:数据实时更新反馈和数据手动更新反馈。


数据实时更新反馈


界面将与所有设置的筛选相匹配并对结果进行实时更新。
这种模式的优点是在执行筛选时为用户提供了一种方便简单的体验,可以在每次点击后立即看到结果。适用于较低风险的交互,一旦处理多选过滤器或更复杂的输入时可能会造成混乱。当然还需要考虑处理数据的多少,如果应用中数据量巨大,每次更新时间较长,反而会降低用户的使用效率。


手动更新反馈


在手动更新反馈模式下,过滤结果只有在用户点击查询时才会更新。如果用户想在每次更改后查看结果,必须单击查询按钮。
这种模式适合多纬度复杂的筛选,所有筛选字段设置完毕之后,统一执行操作,和实时反馈结果相比降低筛选等待时间,尤其是在大量数据进行筛选中,优化了用户体验。

4.筛选需要注意哪些问题


什么情况不适合用筛选?
选用筛选组件的前提是信息能被清晰分类。如用户ID/电话号码,注册用户邮箱这种无明显规则的就不适合用筛选组件去查找,用搜索会更好。


筛选分类条件有什么要求?
一是分类需符合大众认知的条件。如:按照年月日的认知来选择,地理位置按照省市区街道…
二是要求筛选类目的分类要合理、避免晦涩难懂的文案。这决定了用户使用筛选功能的时候是否清晰无困惑。

高频筛选操作怎么样方便用户操作?
首先高频筛选操作不是产研团队自己主观臆断出来的,需要有数据支撑。很多产品为了满足用户快捷操作,会在筛选区帮用户集成常用的快捷操作入口。比如很多电商产品的新品、包邮等快捷筛选。根据不同产品用户习惯下操作整理出快捷操作入口能提高用户体验方便度。

筛选和搜索的区别?
主要区别在于用户对目标的清晰度不同,需要选用不同组件功能来达到其目的。
在B端系统界面设计中,搜索是通过指定任意条件,系统对此条件进行的检索后,展示相对应内容;筛选是系统提供指定各种条件缩小范围,可以选择查找不同条件的内容。
搜索和筛选都是让用户使用某个条件对内容进行区分,从而找到用户想要的内容。


5.工作中的设计思考


在设计组合筛选的时候,筛选区的设计需要根据业务实际情况进行设计,考虑每个筛选字段和业务场景,来安排合理的筛选展示方式。
那么到底什么情况下使用何种筛选模式?我们在设计筛选的时候可以如何思考?显然,使用频率和界面空间是两个非常重要的评判维度。除此之外,我们还可以以可见性、系统性能和用户认知等维度去深入思考,下面将逐一分析。


频率
使用频率是界面设计的一个重要考量因素,我们通常都会把高频使用的功能放在显眼且容易操作的位置。同理,对于筛选模式,我们也会依据筛选条件的高低频进行设计。频率除了影响使用什么模式外,还会影响筛选条件及筛选项的排列顺序,这里就不多叙述了。

界面空间
一些界面模式的出现就为了应对界面空间不足的情况。而我们基于有限的界面空间选择合适的筛选模式是件再正常不过的事。
可见性太弱,当筛选条件都被收纳在一个个小小的入口按钮时,它的可见性也会随之降低,尤其在PC端,一个大屏幕下更难发现。

可见性
既然说到可见性,不妨展开讲讲。可见性是一项重要的设计原则之一。一个明显的道理是,可见总比不可见好,但由于界面空间限制,我们不得不取舍。那么如何取舍才能保证可用性仍然友好?
针对筛选模式的可见性,我们可以分三个要点去考虑:


1、筛选条件本身的可见性:
用户越难发现,即可见性越低。通常,我们都可以以使用频率来决定筛选条件的可见程度。但有时候也会失效,因为正如上文所提及,到了筛选这一步通常是颗粒度比较细的分类,否则我们可以用导航解决。但颗粒度越细,用户对信息的需求就越不一致。比如,挑一件衣服,有人希望按品牌筛选,有人希望按价格,有人希望按颜色,我们很难判断哪个频率更高。面对这种情况,只能将所有的筛选条件平铺出来供用户选择。例如,淘宝天猫等电商产品往往会使用矩阵式的筛选,而一些数据格式更多样的B端产品则直接使用输入式的筛选。

2、筛选项的可见性:
筛选项的可见性同样影响模式的选择。页签式和矩阵式筛选的可见性比下拉式更高,因为用户可以直接看到筛选项。但筛选项一定要让用户看见吗?对于这个问题,可直接以筛选项的多少去决策(少则可见,多则不可见),比如一些B端产品,如果将备选项都全平铺出来可能一个屏幕都放不下,所以只能将所有筛选项收起。但这是一种极端的情况,缺乏说服力。
用户对备选项是否足够熟悉?比如对于一个尺码的下拉框,我很清楚自己能选择什么,但对于一个衣服风格的下拉框,由于我对风格不熟悉,不能预判这个筛选条件能起什么作用,很可能会将其忽略。

3、选中项的可见性:
选中项的可见性,即当我选中某几项后再次查看选中项的难易程度。

性能


数据量大才需要筛选,而数据量大必然会有性能问题。在不同场景下,用户会发生不同的行为,对性能的要求也会不一样。我们能经常发现一些筛选模式会带有“确认”按钮,当用户设置完筛选条件后不会即时刷新,而需点击按钮才能触发。而有的筛选模式则没有“确认”按钮。这分别对应着两种不同的场景。
第一种场景,如B端产品中的查询报表场景。我需要找出符合条件A、B、C的所有信息,并进行对比分析,那么我就会设置筛选条件A、B、C后一并筛选出来,这种情况是一步到位的,我不需要再额外添加条件D或E,所以有“确认”按钮的筛选模式更符合此场景。反而即时刷新会在我设置筛选条件时造成干扰。
另外一种场景,常见于B端产品中的查询列表场景。如果我想找到信息α,通过筛选A后得出10个信息,那么凭肉眼即可找出信息α,任务结束,但如果筛选A后得出1000个信息,我可能会再添加筛选条件B、C或D,直到筛出的信息能让我一眼分辨出信息α。换句话说,这时候我的心理模式是即时满足的,只要信息缩窄到一定范围我就会停止添加筛选条件,否则我会继续添加筛选条件。所以即时刷新能更符合此场景,但与此同时就需要考虑到性能问题。

另外,我们也可从变更频次和变更概率这两个维度进行思考。
变更频次是指用户反复使用筛选的次数,变更概率是指用户使用筛选的可能性,一般来说,高频次必然大概率,但大概率不一定高频次。而这两种情况对性能的要求是不同的。还是以报表和列表为例,在列表中,虽然很大概率会使用筛选来寻找信息,但由于用户是即时满足的,而且满足即可,所以不会重复变更筛选条件。而在报表中,虽然用户会一次性设置筛选条件,但需要分析的数据不只一种,所以会高频更换筛选项,回想一下我们去分析自己产品或竞品的日活月活等数据时,是不是会高频地切换数据来分析比对?所以,高频次的筛选就会对性能有更强的要求,而为了避免性能问题,往往也会加上“确认”按钮。
用户认知
最难解决的其实是用户的认知问题,尤其在模式相对固定的当下,让用户适应并习惯新的模式并非易事。我们想出一些创新性的筛选模式时,不要忽略用户的认知。



作者:Colar可乐      来源:站酷

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

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

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

浅谈B端和C端的不同

博博

想要了解B端C端不同,那么我们先了解B端是什么

一、B端是什么?

B释义为:Business(业务),顾名思义B端产品更偏重于业务,偏重于功能的使用,B端设计在更加注重对于使用者的效率,这个功能是否方便直接达到目的。B端产品最直接的使用者是企业或者说每个“小企业”(班级、部门团队等)要做的就是直接帮助他们用更低的成本使他们的效率大大提高。我们目前对于B端产品最简单的理解就是疫情期间火爆的“钉钉”以及各位都熟知的“飞书”,在我们使用这两款软件时,我们就会发现这些功能好多面面俱到,“请假、汇报、签到”等,不论多小的功能这两款软件都有,但是如果是C端的话,一些次要、点击率低的功能指不定那天就消失了。单从产品角度来看就能看出B端与C端的区别,这些显而易见的B端产品好像多了一丝冷静但是很体贴的直男,C端就像一个花言巧语哄着你的playboy(仅举例子区分,他们对于我们来说都是必不可少的产品)就像下面的自我介绍对比就能明显的看出哪个是B端,哪个是C端。

这些通过你应该已经初步了解了什么是B端,那么接下来我们从更深层次的开始了解。

二、B端和C端的不同

B端C端的不同在于哪些呢?

1.用户:

B端的使用者更多是企业单位,老板等,需要共同协作,比如你的上级领导千里之外就能给你派发加急任务;我们部门需要一起进行这个需求等,这时B端产品的特性就体现了,就像现在经常有人说“只要听到“钉”的一声”和“红色闪电”心里就突然揪了起来。

C端的使用者在于用户本身,通过精准推送直击用户痛点,增加用户粘性购买度等。

2.场景

B端大多为办公场景,项目需求、审批等

C端则较为广泛,某宝买买买,某音看看看!

3.价值观

B端的价值更体现在我们整个团队的效率,这个项目的使用成本,;比如说我需要通过这个软件帮助我们整个团队的效率提升,大家一起协作作图、一起探讨。

C端的价值体现在这个活动这款产品怎样使用户更好的体验,在使用时很快乐的把单下了;比如我们在某物购物时,购买完成后会获得一张3D虚拟卡片,我们的购物体验之旅是不是会极其开心,这里就使用了峰终法则(如果用户在一段体验的高峰处和结尾处是愉悦的,那么用户对这段体验的整体感受就是愉悦的。

4.业务导向

B端更注重这个功能的实现,我在使用这个功能时是否可以更高效,更加的去节省我的使用成本,再设计时我们需要去理解整个业务逻辑、业务导向,介于B端产品比较私密,很少有公开的,所以比较设计起来难度较为提高。我们我们平常面对小伙伴B端的问题时,如果不去了解他们整个业务流程就很难客观地去判断,很容易对他的指点使他造成一次工作失误。

C端的业务导向,更在于对于用户心理、使用体验的拿捏,能让用户做到“0”成本学习,无脑上手无脑冲冲冲,就比如你搞优惠搞了半天复杂操作做后才200-10这谁不气?光明正大割韭菜啊。

三、B端C化

我在资料中查阅到未来的B端的进步就会在“B端产品在使用体验和视觉感受这两个方面和C端产品接近”,B端C化其实很简单,就是将B段专业性强会忽略视觉这一点进行补充,B端产品也可以使自己的产品视觉更加富有冲击力、3D、情感化、就像一些大厂最近的展示更多的去运用了一些3D玻璃质感提升B端产品的用户视觉体验,飞书也会制作情感也会在缺省页的时候用emoj表情对你体现“话语安慰”是你在使用功能时不再那么枯燥,钉钉的IP设计同样也是在拉近与用户之间的距离,通过IP让本就繁琐的产品得到心情的愉悦,这都是在进一步提升B端的情感化,淘宝的功能、抖音的功能更加方便高效其实也是B端的体现,所以我们B C端其实归根结底我们的目标服务都是为了人设计的,设计也一样,服务于人,都是以更加舒适的道路上前进。

总结

其实B端C端从根本来说不同点很小,因为都是为了“人”去服务,未来的发展也是为了更好的让我们去高效的使用;就很像国内国外设计有什么不同,其实没什么不同,我们设计每一个项目、每一个作品时不管我们是否属于哪个国家,我们的目的也只有一个“为了让这个世界因为有了设计而看起来更美一点!”





作者:小芦同学有大脑袋      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

B端体验设计之列表设计

博博

B端中后台产品中,列表页和表单面占了80%以上的页面,以下文章针对如何设计一款好用的B端产品列表页进行了讲解

列表页多用于一个功能的首屏,是一个功能的数据集中载体,它的主要功能就是集中处理、展示、查询、以及统计数据等。列表页一般包含5个组成部分:标题、查询、操作、统计以及表格。

一、标题


系统中只要是功能,就一定有标题,就像只要是个人,就一定有姓名一样,标题的展示根据系统的结构,可能在面包屑中,可能在标签栏中,也有可能在页面容器中。如果标题放在容器中,位置一般是固定的,不随着页面滚动而滚动,标题字体也要和内容字体做区分,一般是字号增大或者加粗等方式。



二、查询

查询条件的设计也是五花八门,根据查统页使用场景大致可以分成两种:一种是省空间的设计,一般只需要放一两个查询条件,那么它就可以和操作按钮放一起,多出现于数据字段比少且简单的情况;一种是经常需要混合高级查询,一般会独立有一块查询条件模块,多出现于数据统计类页面。

2.1、省空间查询条件


为了达到省空间的目的,查询条件和操作放一行,一般会只放一两个查询条件,输入或选择后即执行查询,不需要单独点击查询按钮,这种方式好处就是省空间,缺点是它默认展示的筛选项比较少,需要再点击“更多查询”才能看到更多。设计这种查询方式需要注意的是,输入查询一般是输入后即执行查询,容易导致执行过于频繁(输入一个字符即执行了),因此会做防抖设置,可以在输入0.5s后执行。再一个,这种展开收起的情况,用户容易看不到隐藏的筛选,因此需要一些标记,比如展示已选择的数量。



2.2、独立查询条件


独立查询条件的方式,就是将查询条件单独划出一个模块,可以一次性展示多个查询条件。这种方式的好处就是,查询更便捷,还可以做更多的拓展性方案,如用户可以自定义高级查询方案。缺点就是占空间,对于小分辨率电脑不是很友好。



三、操作


列表的操作是由产品的功能权限控制,由权限决定哪些人能够使用和查看数据,下面从操作的类型、组合、操作反馈以及状态的角度分析如何设计好操作功能。

3.1、类型


操作模块一般是由一组用于操作表格数据的按钮组,主要分为3种:一种是全局性操作,一种是选择数据进行操作,一种是混合型操作。全局性操作(如新增数据、导入、导出模板、刷新等)不需要勾选当前具体某行数据,就可以直接点击操作;选择数据进行操作(如删除、编辑、审批等),即操作前需要至少勾选一条数据,因为它是对当前已存在的数据进行操作;混合型操作(如导出、更新状态等),在勾选数据的时候会对当前数据进行操作,未勾选数据的时候默认会全部处理或者其他的操作,比如“导出操作”,勾选数据时会导出已选数据,未勾选时则默认导出空模板或者导出全部数据(根据具体产品要求)。



3.2、组合


操作组一般会由一个或多个按钮组成,通常只有一个主操作(primary)。主操作是带有引导性的功能,如“新增数据”,还有若干个普通按钮(default),不带有引导性。按钮组还可以根据操作类型形成组合,以分割线或收纳的形式展示,收纳按钮主要有两种展示形式:一种是带主操作的收纳按钮(如归纳同类型的操作),一种是直接收纳,不带主操作的(如按钮太多需要进行收起)。操作的顺序通常也会根据优先级和操作频次来决定。



3.3、操作反馈


操作后需要给个反馈,告知用户操作结果,告知结果分三种情况:1、直接给结果,如toast提示,操作成功/操作失败;2、给操作建议,如:toast提示,请先勾选至少一条数据;3、警告提示,如删除数据时候告知风险,二次确认防止误操作。



四、数据统计


数据统计一般是拾取表格数据某些维度的统计结果,用于快速知晓当前所有数据的情况,有些统计还带交互,比如点击选中后进行数据过滤。



五、表格


市面上封装好的表格组件可配置api很多,像antd,但是想要做的更强大,还有很多能够做的细节,我们先来分析下表格的组成。表格是由行和列组成的网格数据,表格可以分2种,明细表和交叉表,查统页中采用的就是明细表中的横表,即表头是横向的。


5.1、表格设计原则


表格的设计原则遵循以下几点:数据可读性、展示效率、操作便捷性、以及灵活性等。



5.1.1、数据可读性


表格作为信息密度最大的组件,在设计的时候要考虑数据的可读性,可以从以下几点入手。

  • 对齐方式。比较常用的是左对齐,数字金额百分比一般是右对齐,方便百分号小数点和千分位的对齐。如果表格不带竖向分割线,则表头也要和表体内容对齐。
  • 斑马线。尤其是屏幕比较宽的时候,两个字段隔得比较远,在眼睛移动过程中容易看错行,斑马线就是解决这个问题,当然,如果不嫌麻烦,鼠标悬停上去,该行的背景色一般也会变化。
  • 行高。文字行高一般是字号大小的1.2-1.8倍。单行文字表格行高一般在32px-56px之间,如果支持换行则换行文字自动挤开表格行高。
  • 表头样式。表头要和表体在样式上做区分,如文字加粗,背景色等。
  • 滚动。当表体产生滚动的时候需要出现滚动条或者在固定列旁边出现阴影。


5.1.2、展示效率


B端产品尤其是ERP这种数据密集程度很高的产品,对空间的利用要求是很高的,因此在设计的时候要充分考虑展示的效率,可以从行高、列宽等角度去设计表的细节。我设计表的时候习惯先跟产品讨论清楚每个字段大概的长度,在设计的时候就会预留匹配的默认字段宽度,比如14号字体的表格,在展示“创建时间”字段的时候,字段宽度不会超过170px,我会留180px的默认宽度,既有呼吸感,又不浪费空间。最后预留一个字段宽度作为auto自适应,给到个min最小值,这样在不同分辨率上能展示相同的效果。


5.1.3、操作便捷性


表格在展示数据的时候往往会遇到一些问题,比如字段显示不完整,这时候就需要手动支持调节列宽,或者悬停tips展示全部内容。再比如想要复制某段内容,而文字展示不全,又不支持调整列宽,这时候要么在比较常用于复制的字段后面跟个“复制”图标,或者悬停出现tips的时候鼠标移上去不会马上消失,这样用户就能框选文字复制了。



5.1.4、灵活性


表格设计的时候不一定能覆盖所有用户和场景,因此需要预留一些灵活调整的空间,下面介绍几个常用点。

  • 调整字段顺序。有些产品为了能让用户根据习惯更灵活地查看内容,会让用户直接拖拽表头进行重新排序。
  • 调整字段宽度。表格内容有些长度是未知的,在使用的时候发现信息看不全,因此通过拖动可以快速调整字段宽度。


5.2、表格元素


表格元素包含了背景、数据(文字、图片、图标、标签、附件等)、序号、边框、选择框、操作项、斑马线等。这些在设计表格的时候都是设计师需要去定义展示形式


5.3、操作列


为什么要单独把操作列拿出来讲,因为操作列的设计蕴含了太多内容需要考虑,设计师在设计的时候很容易忽略。


5.3.1、形式


目前操作列按钮主要两种形式,“图标按钮”和“文字按钮”,图标按钮主要用于比较简单易懂的一些常规操作,优势是长度可控,容易对齐,劣势是,有时候需要悬停上去才知道含义,不够直接;文字按钮用的范围比较广,简单明白,缺点是长度不可控,不好对齐。



5.3.2、数量控制


操作列和复选框一样,一般作为固定列,不随着字段横向滚动。数量也不可控,根据业务情况,有多有少,因此在做的时候要解决数量问题,如果全部展示,则势必影响内容的展示面积,因此设计师根据真实的操作数量设定固定列宽度规则,操作项超过一定数量或一定长度做“更多”按钮收纳。还有一种展示方式,默认不展示,鼠标悬停展示该条数据需要展示的操作,这样既可以解决信息展示面积问题,又不需要考虑和其他行数据的操作对齐,还不需要定操作列列宽规则,缺点是,不够直接,如果不悬停就不知道还有操作项。有的产品干脆直接把操作项去掉,全部采用上面的全局操作,勾选数据后执行,总之各有各的优缺点。



5.3.3、操作状态


设计师经常会困惑,什么时候操作禁用,什么时候隐藏。按钮隐藏一般根据数据权限控制,“隐藏”通常是角色无该操作权限的时候采用,“禁用”通常是由于数据本身的问题导致暂时性失效。举例个例子,组织架构的页面,管理员对所有组织架构和成员有编辑和删除权限,而普通员工只能查看数据,这时候操作按钮就需要隐藏。再比如订单功能,有的订单已经进入审批环节不可删除,那么它的删除按钮就会变成禁用,而有的订单还未进入审批环节,这时候是允许删除的,这时候删除按钮就会亮起。


5.4、分页器


数据量比较大的时候会用上分页器,设计师在设计的时候也要定好默认一页几条,不然开发就会根据自己的臆想来做。分页器位置的设计也分两种,在表格上方和表格下方,市面上看到的大部分都是在下方。放在下方就有个问题了,是要固定页面位置还是随着表格自动计算位置?我对比了几个比较成熟的产品,大部分都是固定在底部,不随着页面滚动,整个页面滚动的区域只有表身,有小部分是跟在表格尾部,每页条数超过屏幕高度可展示量,分页器就会被挤到下面看不见,这种好处就是省了一点展示空间,不好的地方就是,要想再使用分页器得往下找。还有极小部分产品兼容了这两个方案,当条数少的时候跟在表格尾部,当条数多的时候,会顶在底部,类似固定钉功能。总之不管采用哪种方案,都要兼顾便捷性和易用性。



5.5、表头


5.5.1、表头筛选


表头筛选平时用的比较少,因为外面已经有独立的筛选功能,有些也放出来,补充一些不常用的筛选。



5.5.2、表头排序


排序规则主要由产品提供,设计需要知道一下。一般默认是以产品的创建时间为排序,排序不带具体业务含义的一般采用时间倒序,最新数据在表格最上面,这样每次新增数据就可以快读看到,不用划到最后面甚至翻页后才能看到。有的采用时间正序,最新的数据在最后面,这种一般是数据本身带有排序属性,如果贸然在最上面插入数据会打乱已设定好的顺序,这种带排序属性的表格,往往还有调整顺序的操作。触发排序一般只需要点击表头即执行,通常点一次会进行正序/反序,再点一次会反过来,再点一次取消排序。如果点另一个字段的排序则默认会采用最新的排序字段。



5.5.3、表头提示


有些比较难懂的字段需要在表头增加一个提示信息,来辅助用户理解字段含义



5.6、表格配置解决方案


前面讲了表格的各种属性,为了使用的灵活性,有些成熟的产品会设计一个设置表格属性的功能,可以让用户自定义表格属性,如字段展示(筛选)、字段顺序、字段对齐方式、字段固定列、是否展示序号、斑马线等。事情有利必有弊,灵活也意味着学习成本高和投入开发成本大,是否需要做有各自的真实情况决定,不过作为设计师得知道,这些就是你能雕琢的地方。



六、额外功能


还有一些额外的设计过程中你不一定会注意到但挺好用功能推荐。


6.1、只看已选


在选择数据的时候,为了便于一眼看到选中的数据,会做这个么个操作。



6.2、已选数量


表格的选择,默认一般是不支持跨页选择的,所以产品或者设计需要要求开发支持跨页选择,而一旦支持跨页选择,就容易忘了到底选了多少条,因此会展示选中条数,以及一键清空选中,这个功能还可以和“只看已选”功能混合着用。



6.3、只看表头


对于有些带明细数据的表单,通常在表单中会分表头和明细(表身),举个例子,商品订单中会包含一些像订单编号、客户名称、发货时间、发货地址等等这种,叫做表头。像具体的明细数据,如订单中包含100个a商品,200个b商品等等,叫做明细(表身),因此在列表功能展示的时候有时候需要一眼看出明细数据,就会以表身明细数据为主数据展示,但是数据量会蹭蹭往上,因此用户可能会选择是按“表头”数据展示还是按“表头+明细”数据展示。



七、总结


列表页承载了一个b端系统半壁江山,设计师在设计过程中需要不断打磨,设计出符合自己产品特性的列表。





作者:落难的黑人      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

打造诗词视听盛宴,传承古典文化之美 | 百度教育

seo达人


前言概述

百度教育“好诗连连”是一款轻松有趣又别具中国古典美韵的学习平台,在2022年先后荣获设计界三项国际知名大奖:德国红点品牌与传达设计奖、美国Muse Creative Awards 金奖、韩国K-design 设计奖。本文分享设计团队是如何通过精湛的多维设计打造诗词视听盛宴,让用户感受到传承千年的诗词魅力,唤起用户对古典文化的热爱。

图片

好诗连连—中国古诗词学习平台古诗词是古人用最精炼的文字传达所思所想的文学载体。但随着几千年时间的演变,注重表达效率的白话文逐渐替代了古人凝练、富有韵味的文字。传统诗词离我们的日常生活越来越远,阅读和背诵诗词常常被认为是无聊和困难的。为了激发用户对古诗词的兴趣,我们构建了趣味化的体验帮助用户轻松地学习。

点击图片前往原文观看视频

一、设计主旨:沉浸式国风视听盛宴,传承诗词文化之美一  唯美意境 诗词悟得到 · 打造沉浸式国风视听盛宴

王勃《滕王阁序》中千古名句 “落霞与孤鹜齐飞,秋水共长天一色” ,勾勒出一幅宁静致远的画面让人动容,中华古诗词之美,含蓄而生动。我们在设计上营造唯美意境,体现诗词的韵味之美。通过提取中国传统文化中的古典色彩及传统纹样、琵琶与古筝的音韵,将传统元素与现代审美融合,重组诗词新国风设计语言,还原诗词意境,构建全新【寓教于乐】的游戏化学习体验,赋予诗词新的文化魅力。

1.视觉语言体系

1.1 从东方古典色中提炼色板

我们从壁画丹青、紫禁红墙中汲取色彩灵感,采用低饱和度、柔和而优雅的配色,使东方色彩美学的悠然、自然与诗意自洽融合;同时还采用山水碧绿中的翠涛、醽醁,红墙中的海天霞、十样锦,壁画中的青鸾、檀唇,构成整个画面中的古典色彩秩序。

图片

1.2  提炼中国风视觉语言符号,形意结合,传情达意

通过借形法、取意法、形意结合法提炼国风元素与图腾、传统文化中寓意吉祥的纹样,传达美好寓意;东方古老的凤凰展翅高飞,指代源远流长的中华文化;乌纱帽与宫殿寓意学业精进、金榜题名;寄情山水与出淤泥而不染的荷花,更为文人雅士所钟爱。

图片

1.3  确立绘画手法

运用类工笔的绘画手法,白描勾线,结合笔墨丹青的晕染,来营造诗词如画卷般的唯美意境。

图片

 

2. 听觉语言

古代诗歌最早是用来吟唱,它注重声律、音韵、平仄、对仗,讲究韵律和谐、抑扬顿挫;白居易《琵琶行》中描写 “转轴拨弦三两声,未成曲调先有情”,沈约《咏筝》“秦筝吐绝调,玉柱扬清曲” 中描写筝曲抑扬自如,清妙悠扬;在音效的选择上,采用古筝、琵琶的音色来营造古风意境,音符配合点击、滑动、任务完成等反馈,让人沉浸于诗词的氛围中。

图片

 

 

二  趣味学习 诗词背得快 · 搭建趣味玩法及激励机制

趣味化游戏机制,基于心流理论设计,解决了诗词学习体验中用户常见的枯燥、挫败的负面体验,构成了诗词知识获取、学习和背诵的完整学习机制。设计了诗词连线、诗词对战、成语填空三种多元游戏模式,加强诗词背诵和相关知识的扎实记忆,让学习更快更有趣。

图片

 

1. 基于碎片化场景,设置合理游戏任务模块1.1  操作容易  降低学习成本用户通过指尖滑动操作,划线选出正确的句子,拼出完整诗句;而轻量提示卡,帮助用户快速回想诗词,减少挫败感。

图片

1.2  难度渐增 有序拓宽知识边界

诗词对战,在线匹配用户进行回合制的知识点比拼,在设计上单局颗粒度小,内容难度逐级递增,让用户在循序渐进中掌握诗词知识点。

图片

 

2. 学位制激励:将游戏排行榜与中国科考等级巧妙结合

游戏排行榜使用中国科举制度中的状元、榜眼、探花的等级称号,结合官帽的视觉元素,将用户代入古代科举放榜时的情景,激发用户深入学习诗词知识的持续挑战欲,进一步增强古典文化的意境体验。

图片

 

 

三  智能关卡 海量内容 · 诗词记得全1. 智能感运用AI技术自动识别并生成游戏关卡,内容难度逐级递增、循序渐进,根据用户作答结果,即时反馈并匹配对应内容,构建个性化的学习体验。

2. 海量数据库资源数字化收录28万首中国古诗,帮助用户摆脱繁重的纸质典籍,随时随地掌握诗词知识。

图片

传承古典诗词文化之美

通过百度教育好诗连连,我们让沉睡在纸质典籍中,以诗词为代表的文化遗产焕发时代光彩与蓬勃生机,鼓励用户学习和感受传承千年的诗词魅力,重新唤起当代年轻用户对传统诗词文化的热爱和理解,也使便捷轻松地获得诗词知识乐趣成为可能。

 


作者:文教互娱用户体验

转载请注明:学UI网》打造诗词视听盛宴,传承古典文化之美 | 百度教育

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


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


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




基于智能座舱场景的用户体验设计

seo达人


一、座舱体验的三要素

用户体验设计首先字面意思是用户+体验。

图片

图片

01 座舱内的用户除了驾驶员还要考虑非驾驶员, 非驾驶员也有多种角色:老人/儿童/青年。

图片

02 体验:用户发生使用操作的感受。

但实际用户体验一定是脱离不了场景的,场景是用户发生行为的一个大环境。

03 考虑场景的时候除了考虑的当下现实场景还有未来场景。

图片

场景案例:充电全屏展示充电信息

图片

场景案例:导航交互体验,先展开详细信息,然后再收起信息

图片

场景案例:蔚来的360泊车系统开启时不能唤醒nomi

图片

而且产品的研发和功能创新,用户的体验都是依据场景体系建立的。所以HMI设计过程当中,场景体系化的建立尤为重要。

 

 

二、智能座舱的场景体系化搭建

1、搭建流程

图片

01 场景发掘:竞品分析、用户画像定位、产品定位、用户旅程图

场景发掘首先要把场景和使用的用户做定位,结合实际项目进行用户画像定位,确定场景主题,寻找到目标用户进行实车访谈和拍摄。

图片

02 场景数据细化:网络数据、用户访谈、实车测评数据、常见高频数据

这一步主要是把用户访谈收集上来的数据,进行拆分和细化,然后筛选出有价值的数据进行录入。

用户访谈数据录入到数据库里,产品经理和设计师会针对收集上来的用户反馈,进行痛点/和爽点的挖掘。提出需求解决方案。

图片

03 场景应用设计:原型设计、界面设计

基于场景的应用设计会分为两个步骤、一个是原型设计、一个界面设计、原型设计时我们更多是组内评估、找专家来提供指导性意见,到了界面设计时候除了专家评审、可以做出demo给用户进行测试来获得反馈。

图片

04 场景走查还原场景

在设计方案产出完成之后,给用户还原到我们发掘的场景去进行走查,根据用户旅程图查看有没有遗漏的用户场景和不同的用户反馈。

图片

 

2、搭建工具

整个智能座舱的场景体系化搭建需要几个工具,竞品分析、用户画像定位、产品定位、用户旅程图。

用户调研方法有很多,我们需要掌握(调查问卷、用户画像、用户体验地图、用户访谈、焦点小组、)

今天核心介绍使用频率最高的三种用研方法。

2.1 用户旅程图

关注用户在驾驶阶段的行为、方式、心情、痛点、期待。

关键步骤:

① 设定场景、目标、期望(用户画像)

② 确定行为路径

③ 建立核心地图

④ 包装地图

⑤ 绘制故事板

图片

2.2 可用性测试

可用性测试已经成为获得用户反馈的流行手段,主要因为他们上手快,能快速反应出问题。

关键步骤:

① 明确测试目的

② 问卷框架的设计

③ 投放调研问卷

④ 组织测试

⑤ 整理输出结论

图片

2.3 5W+1H法则

5W+1H 是选定的项目、工序或操作,可以从原因(Why)、对象(What)、地点(Where)、人员(Who)、时间(When)、方法(How)等六个面进行思考。

① 原因—立项背景?

② 对象—什么功能?

③ 地点— 什么场景下?

④ 人员–驾驶员?/非驾驶员?

⑤ 时间–什么时机?哪个流程之后?

⑥ 如何–什么方式操作?

图片

 

 

三、细化座舱用户体验的三阶段

1、用户体验的三阶段

体验的时间性有三个主要组成成分,及熟悉程度、功能依赖和情感依赖。

图片

1.1 初识体验:

我们在产品使用初期的阶段,都会对产品有个使用预期。例如期望产品能提供一个好的体验,或者怕产生不好的体验。

图片

1.2 使用体验:

使用体验分为两个阶段:使用产品初期和使用产品深度期

进入到车内试驾或者试乘,试驾员和销售除了会让用户体验车机的基础功能外,主要介绍的就是和竞品车型的竞争功能。

产品深度体验期的时候,长期的可用性变得更加重要,而不是最初的易学性。从而产品的实用性成为影响我们整体评估判断的主要因素。

1.3 获得体验:

最后,当我们接受了产品,在我们的日程生活中它参与了我们的社交活动。成为了生活当中的固定解决问题的工具,这个阶段产品体验就具有可识别性了。

 

2、体验的三条路线

图片

2.1 体验线路是感官线

我们现在座舱内的交互感官有、触感、听感、视觉、嗅觉、语音。用户在人机交互的时候第一时间获得直观感受。

2.2 体验线路是情感线

情感线是诺曼强调感情在塑造体验中的重要性。比如灯光秀、宠物模式、和拟人化的汽车助手。带给用户都是情感上的满足。这些情感构成了与汽车的首次互动体验。

图片

2.3 体验线路的流畅

就像C端和B端一样,我们交互体验的线路效率和流畅程度,能给用户增强驾驶乐趣。或者最大限度减少信息元素的干扰,让驾驶员沉浸在当下。

图片

 

3、把握用户体验的多样性

3.1 个人价值观的差异

首先个人的因素,因为我们成长的环境不同,造成了对价值观的差异,有的人喜欢刺激新颖的产品,有的人喜欢乏善可陈的产品。

图片

3.2 产品属性问题

第二可能是产品属性的问题,游戏产品带给用户就是不断的快感刺激,工具类型的产品用户使用流程流畅会更好。

图片

3.3 跟随时间线的体重心变化

用户的使用体验对于时间的变化,通过用户旅程图,他们对产品的关注点会产生变化,例如用户刚开始对产品互动中更关注新的功能和刺激的体验。但在使用过一段时间后他们可能不会再关注他的新颖程度,更关注产品的实用性和效率。所以需要我们在不同的使用阶段重新帮助用户提升体验。

图片

 

原文地址:七酱设计笔记

作者:郝小七

转载请注明:学UI网》基于智能座舱场景的用户体验设计

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


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


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



有驾在现场 车展品牌全案设计【百度】

seo达人


一、什么是“有驾在现场”

有驾是百度旗下汽车信息与服务平台,累计用户超5.3亿,致力于为用户提供真实、可靠的看选买车服务,以及为车企和经销商提供从品牌到效果的一站式互联网营销解决方案。

车展对有驾来说是一个流量爆发的大事件,2021年广州车展期间有驾品牌全网曝光累计6.3亿次,创历史新高。而【有驾在现场】是百度有驾历年车展系列活动沉淀下来的品牌IP,已经成为活动固定的品牌标识。

图片

 

二、借势大事件,打造车展品牌全案

借势车展的关注度与影响力,我们想要通过分析调研总结,对本次车展进行视觉定调,建立品牌识别体系,沉淀专属有驾车展活动的品牌符号和印记;进行线上线下联合推广来打造有驾车展品牌全案,提升有驾的品牌影响力;优化活动体验来为平台进行引流,让用户对有驾产品有更明确的认知。

同时由于车展项目涉及跨部门合作,我们希望可以通过车展品牌全案,统一不同分工输出的设计物料视觉一致性,以达到提质增效的目的。

图片

以打造品牌全案为出发点,我们梳理了以下项目计划。

图片

同时,通过有驾用户画像分析,建立用户标签,分析用户属性及偏好,以更好的触达用户。数据显示有驾APP大部分用户为常驻中高线城市的年轻男性,经历着数字化信息时代的便利,同时也受到更好的教育和各界多元的文化影响,更大胆更容易被新的东西所吸引。

 

三、分析项目现状总结优化点

根据过往车展项目分析,总结发现存在品牌识别度较弱且没有统一规范、品牌统一性较弱导致用户认知成本较高等问题。

图片

 

四、提炼品牌关键词

根据用户画像及现状分析,明确业务需求,通过脑暴的形式罗列品牌关键词,基于品牌DNA对有驾车展进行视觉升级需挖掘符合核心用户的语境语言和视觉偏好,提炼出品牌关键词,根据关键词规范可延续的品牌元素,打造清晰的品牌全案以更清晰的指导后续视觉设计工作。

图片

 

五、视觉定调

根据关键词确定了以赛博朋克风格为视觉基调,通过三维建模搭建北京地标建筑场景,搭配大胆的配色和新颖的元素样式打造潮流个性且具有未来感的视觉画面,匹配车展品牌的创新理念。

同时,在活动玩法方面,通过优化活动玩法,多条件激励用户给予用户沉浸式的体验。

图片

 

六、建立品牌体系

确定基础视觉调性后,我们通过形色质构来规范和输出有驾车展品牌vi规范,建立有驾车展品牌体系,以提升视觉的产出效率,确保线上线下视觉输出的一致性。

图片

 

七、品牌LOGO

【有驾在现场】是有驾多年延续下来的品牌基因,本次车展也将继续夯实品牌资产,进行优化升级传递品牌调性。

由于旧版的字体圆角等设计样式相对柔和,不能准确表现本次车展视觉调性。为了传递有驾车展的潮酷、未来感,设计上将旧版文字加粗,圆角调整为直角,并进行一定的倾斜处理,使字体展现更加果断硬朗;同时,我们将部分笔画进行连接,让字体充满动感或速度感;最终的字型效果运用有驾品牌蓝绿色光效以更好的与画面结合。

图片

 

八、色彩尝试

由于整体风格参考赛博朋克,配色方面基于有驾品牌色进行延展,辅助色起到平衡主色的冲击效果、活跃视觉,释放潮流激情,突出重点模块;元素上尝试渐变色丰富元素样式。

图片

 

九、组件化通用元素

通过组件化通用元素,不同物料可以快速复用,节约设计成本,解决整个活动的视觉一致性,同时可以沉淀设计资产。

图片

 

十、车展主KV

根据关键词【未来感】【年轻化】分析适合有驾的设计风格和调性,通过三维建模的画面表现形式,构建充满科技感的赛博朋克画面,打造潮流科技的有驾车展基础场景。

主视觉场景设定为高楼耸立的公路上,有驾跑车向“有驾在现场”北京车展活动现场飞驰。充满速度感的跑车、霓虹灯牌、高楼大厦色调和质感的碰撞,传递出一种直观的科技感,引领新时代年轻用户和有驾一起驶向未来。

根据上述的内容进行车展主kv的场景设定,输出了草图方案。

图片

整个场景围绕“有驾在现场”进行设计,融合车展相关元素,渗透品牌标识。

采用3D和2D相结合的形式,用C4D进行场景搭建,OC渲染器进行灯光材质的渲染,反复修改调整场景布局、元素等,最终输出三维设计图后进行PS后期,输出最终的主视觉。

图片

根据以上内容,输出了对应的车展VI规范。

图片

 

十一、车展专题页

根据主KV及VI规范进行专题页的延展,部分内容复用过往车展框架模块。

新增了导航栏设计,便于用户快速跳转到感兴趣的内容模块,导航图标大胆创新尝试渐变色融合的配色形式,让扁平的图标有更加丰富的呈现。在保证阅读效果的前提下,标题样式、页面元素及配色上更加潮酷。

图片

 

十二、集卡分百万 引流活动

过往集卡活动不仅与产品、车展契合度高,并且收益明显,因此本次北京车展活动将复用、优化集卡类活动,让用户沉浸式集卡,从而提升用户活跃及量级。

图片

在玩法方面,本次集卡活动延续过往活动做任务得车卡的主玩法,优化活动体验,新增了合成稀有卡可参与大转盘抽奖的玩法以激励用户集卡,同时设立了车展大众日,在当天进入活动的用户可以获得现金红包,以此来激励用户回流,丰富活动玩法。

图片

集车卡活动的主视觉元素及配色是依据vi规范,保证整体品牌调性的统一;普通靓车卡背景延续主视觉背景,稀有卡尝试不同配色和场景凸显其特殊性。

图片

除了专题页和集卡活动,线上还包括端内社区活动设计,整体视觉调性都与我们输出的车展品牌vi保持统一。

图片

 

十三、倒计时海报

为了给车展开幕造势,我们尝试复用主KV的三维建筑模型,将倒计时1、2、3与不同视角、不同配色的场景相结合,整体风格和车展主视觉保持一致,输出了三张倒计时海报,丰富了整个项目的宣传内容。

图片

图片

整个车展项目除了线上运营活动、造势海报,还有线下展会宣传物料及其他第三方输出的设计物料,整体视觉调性都是基于我们输出的车展品牌VI进行视觉延展,保持统一性的同时,又各自有不同的视觉传播效果。

图片

 

十四、总结

【有驾在现场】作为百度有驾车展品牌活动,我们通过未来感、年轻化、体验感三个维度来塑造有驾车展系列活动的品牌调性,搭建了基础风格,建设三维赛博朋克高品质主视觉,视觉元素细节惊喜感打磨,通过优化活动玩法进行引流,沉淀出新的大事件视觉设计思路,打造了有驾车展品牌设计全案。

未来我们的思考不仅仅只局限在视觉的表现上,还要继续挖掘品牌系列化活动的延续性与独特性,同时更要通过合理的情感互动建立和用户的链接,为品牌长线发展提供更多价值。


作者:设计中台

转载请注明:学UI网》有驾在现场 车展品牌全案设计【百度】

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


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


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



新手学习字体设计的高效三步法

seo达人

一、临摹

临摹是新手学习任何技能都需要经历的阶段,学字体设计自然也不例外。即你要去收集一些优秀的字体设计作品,然后照着它们来临摹。

很多人会瞧不上临摹,认为照着参考一模一样做谁都会,事实上真要做起来,很多人都临摹不好,而且临摹的方法也不对。那么,如何正确地临摹呢?

 

1、不要像抠图一样,用钢笔工具直接沿着参考的外轮廓描摹。

而是要照着参考画出文字中的主要笔画,诸如:横、竖、撇、捺、点、提、勾等,然后,用这些笔画照着参考的样子一笔一笔把文字搭建出来。

图片

 

2、如果遇到相同的笔划,不要重新画。

而应该把已有的笔画直接复制过去,有时可能需要做一点简单的变化,这么做可以最大程度上保证笔画的统一性。

 

3、刚开始可以直接在参考的基础上用笔画来搭建文字。

就好似描摹一样,与参考一一对应,等熟练之后可以自行绘制笔画,通过视觉来确定笔画的粗细、长短、结构、摆放的位置等等。

举个例子,如果要临摹下图的字体设计,我们可以先把它的笔划画出来,如果抓不住笔划的特点,或者线条画不流畅,可以在原参考上把笔划描摹出来。

图片

图片

接着,再根据参考画出文字的字框,以确定文字的宽度和高度。

图片

然后,照着参考在字框里用笔画把文字组合出来。

最后,再仔细观察文字笔划的尺寸和位置是否正确,尽量做到与参考一模一样。

经过一段时间的临摹练习,你不仅可以更熟练地使用钢笔工具,同时也能掌握一些字体设计的风格、笔画特征、字体设计的流程等等。

 

 

二、通过参考,举一反三

当临摹做得已经很熟练以后,就可以开始第二步的练习了,即遵照参考中字体设计的风格、特点,设计自己想要的其他文字。其实在实际工作中、很多设计师也会用这种方式来设计字体。想要做好这项练习,首先你要做的是对参考作品进行深度的分析。

诸如对字体类型、字形、字体风格、重心位置、中宫松紧、笔画粗细、笔画结构、笔画的对齐关系、有哪些特殊的处理技巧等特点进行分析。

比如我想根据下图的字体来设计文字:起来嗨。那么我就先要对参考中的字体设计进行分析:

图片

该字体为无衬线体,风格简约而现代,笔划并没有讲究严格的对齐,甚至刻意做了错位处理,各文字的字面大小也不统一,呈现出灵活多变的感觉、笔划较粗,横竖笔划的粗细一样、横笔划右端有类似直角三角形的衬线、部分笔划交汇处会把横笔划做断开处理、点笔划和个别捺笔划被设计成圆点、口部首被设计成圆圈等等。

把参考的设计特点分析出来以后,紧接着需要把我们想设计的文字,用一个常规的字体呈现出来,由于参考中的字体设计是无衬线体,所以我们可以选择黑体作为字体设计的观察对象,看看该文字中有哪些笔划可以直接挪用参考中的,有哪些则需要自己来设计。

接下来就要着手画草图了,需要注意的是,参考中的文字做了整体垂直向上倾斜,在设计字体的时候如果直接设计成倾斜状态,那么很多笔划处理起来会不方便,所以最好先设计成水平状态的,等确认无误后再做倾斜扭曲。

图片

另外,在画草图的时候要多做尝试,对于原参考中没有的笔画,我们要从现有的笔画中找到规律,这些部分的设计没有绝对的标准,关键是要好看、要协调、要与整体的风格相符。比如“起”字下边的“人”笔划,可以借鉴参考中“辶”的处理方式。

草图画好后就可以去电脑上做最后的执行了,在执行的过程中需要注意以下几点:

 

1、草图不是标准,只是执行的思路。

所以在执行的过程中仍可以进行调整、修改。

图片

 

2、一边设计一边规范。

如果你不是在专业的创作本上绘制的草图,那么你的草图通常是很不严谨的,那么在电脑上操作的时候就要边设计边规范,比如统一笔划的粗细和结构、统一笔划断开部分的间距、注意某些笔划之间的对齐关系等等。

图片

 

3、与参考对比。

字体初步设计完以后,要把其与参考放在一起进行比较,看看还有没有处理不到位、看起来不够舒服的地方,水平状态调整完以后,再把文字按照参考的样子往右上方做倾斜处理,然后继续观察以及做最后的完善。

图片

图片

 

 

三、原创字体设计

如果你能熟练地做到通过参考举一反三,那么你的字体设计能力已经初步形成,接下来就可以做原创了。做原创字体设计时我们要注意以下几点:

 

1、做原创也可以找参考。

只不过不要完全按着一个参考来做,我们可以结合好几个参考,也可以在参考的基础上加入自己的想法、做出一些改变等等。

 

2、设计的流程

A.根据要设计的文字、找到符合设计需求的参考。比如我需要设计的文字是:奇遇惊喜,并想设计成有种浪漫、古风的感觉。所以我找了下图的字体来做参考(造字工房逸锋体),该字体字形修长、结合了宋体和黑体的特性,笔划横细数粗但没有衬线,现代而优雅。

图片

B.加入自己的想法。用常规的的字库字体把要设计的文字呈现出来,与参考放在一起进行构思。参考中的字体虽然现代而优雅、但是作为字库字体,独特性自然会有所欠缺,另外笔画还是略过复杂,没有古风和浪漫的感觉,所以我想把笔画继续做一些简化,并加入祥云图形。

图片

图片

C.画草图。

可以先画文字的骨骼部分,以确定文字的基本架构,文字的骨骼决定了文字的基本气质,比如高矮胖瘦、中宫松紧、重心高低、笔画走势等等,这也是设计师可以大做文章的地方,很多优秀的字体,在骨骼上就与普通字体有着很大的差异。这里我把文字的骨架设计得比参考更为修长。

图片

骨骼画好以后,再添加字体的肉身,即笔形,笔形决定了笔划的粗细、端点、衬线、笔划交汇处的处理等细节效果,这些部分的变化也非常多,设计师可以根据文字本身的特点和参考进行多种尝试。

图片

作为字体设计师,了解一些不同笔形的处理技法也很有必要。

图片

▲ 部分横笔画的笔形表现。

D.把草图导入到设计软件中执行。草图画好以后就可以去电脑上执行了,执行的步骤和注意事项与“举一反三”里提到的差不多。

图片

 

3、注意文字的统一性。

在设计字体时,要注意整体的统一性,要让人感觉到这是一套字体,所以原则上来说,每个字的字面大小、重心位置、中宫、相同的笔画等等,都要统一起来,当然,不包括某些为了效果灵活而刻意作出的一些特殊处理。

图片

图片

 

 

图片

临摹、举一反三、原创,简单的三步就能帮你从一个新手变成一个熟手,其实除了字体设计,很多其他类型的设计同样是这个道理。当然,最重要的是你要能走出第一步,先做起来,然后要坚持下去。

 

作者:葱爷

转载请注明:学UI网》新手学习字体设计的高效三步法

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


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


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



好难啊,一遇到场景插画,我就废了!

seo达人

轻立体的插画小场景在平时设计中应用到的地方有很多,我们来分享一下在这次项目绘制的过程中走过的弯路和流下的泪。先来看一下优化的整个过程吧!

图片

可以看出来第一版和最终版的效果对比是非常大的,第一版给人感觉如同一个半成品,场景轻飘飘的,颜色上几乎没有什么明暗对比,太过统一没有分清处层次,而且细节不够丰富。

图片

通过第一版我们可以看出可以通过一下几个方面去做层次方面的优化:

一、增加主体细节

1.刻画熊熊主体

2.优化鸭子的造型

二、加强明暗对比

1.加强主体和椅子的明暗对比

2.加强背景和前景的明暗对比

 

一.增加主体细节

1、刻画熊熊主体

之前的熊熊作为主体本身刻画的细节层次和背景的刻画程度近似,我们要把主体变得有看点才能分清前后的关系,可以在熊的五官和服装上进一步添加一些细节。

例如给熊的五官添加表情,把墨镜添加一些装饰元素,让视觉可以集中在熊的五官上。

图片

同样我们还可以在服装上添加一些花纹的装饰让整个熊熊的主体看起来更加细致。

图片

同时要注意熊的姿势是头部在前,胳膊在后,可以在刻画的时候加入一些投影,加深胳膊的暗部,区分一下头部和胳膊的层级关系。

 

2、优化鸭子的造型

鸭子的造型我们把游泳圈直接改成了小黄鸭漂浮物,游泳圈中间的镂空让视觉看起来不够紧凑,同时我们也优化了鸭子的眼睛和嘴巴,让鸭子看起来更精致一些。

图片

然后去加强头部和鸭子身体的前后区分,加入投影,让它更加立体。

 

 

二.加强明暗对比

我们可以把整个小场景的明暗做一个区分,最亮的是熊,然后是鸭子,然后是地毯,最后是椅子,椅子作为地毯和熊之间的一个暗部,可以让画面有一个明暗的节奏,同时和熊的主体形成对比。

图片

接下来要做的就是加强暗部和亮部之间的一个对比,体现整个空间的前后关系。

 

1、加强主体和椅子的明暗对比

我们把熊和椅子的明暗区分的更加明确一些,把椅子的饱和度和色相进行紫色调和低饱和度的一个调整,用对比色来拉开两个物体的区别,加深熊的整个暗部,交代熊在床上清晰的投影。

图片

 

2.加强背景和前景的明暗对比

优化以后发现背景的植物和星星比较跳 我们去进一步加深背景让背景往后退,同时把地毯的颜色提亮一些让整个后景有一个区分。

图片

然后我们去微调一下椅子的颜色让椅子的颜色不要那么脏,把地毯颜色也调的明亮一些,形成对比,就到了咱们的第二版画面:

图片

第二版画面再往后优化就是细节的调整和进一步加强明暗的区分。

我们从以下几个方面再去进一步区分画面:

一、明暗的进一步区分

1.背景区分

2.椅子自身的明暗区分

3.椅子和地毯的区分

二、添加正确的投影

三、添加环境光

 

 

一.明暗的进一步区分

1、背景区分

背景明暗的区分需要把植物部分去压暗,同时把比较跳的星星稍微压下去一些,做一个颜色上的过渡,加地毯的反光,让星星的颜色退到后面去,然后给植物加上床的部分投影,空间关系更加明确一些。

图片

 

2、椅子自身的明暗区分

下一步我们要对椅子进行优化,目前的椅子没有区分开明暗面,反而暗部的反光太强,亮部的颜色饱和度又很低,导致立体度出现了反向效果。

我们要做的是把椅子面向光的面亮起来,背阴面暗下去,而不是亮部暗,暗部亮。

图片

然后我们又发现,现在椅子的颜色对比度不够,并且椅子腿上透视有一些问题。

我们继续去把椅子的颜色调暗,同时要在亮部去加入椅子受光的颜色变化,我们可以加入一些偏亮的纯色,暗部做一些小的反光的变化,让椅子更加有光泽度。

图片

注意这里椅子腿也是有前后关系所以靠后的椅子腿要更加的暗一些,受光也少一些,同时给椅子腿上加入床的一个阴影。

但这还不够我们要进一步去加强整个画面的对比。

 

3、椅子和地毯的区分

我们接着去把地毯的颜色提亮,同时把亮部光照的地方做一个暖色光照的处理,加深床的投影把投影交代的更加清晰一些,让有颜色对比的同时也要有上下关系的对比。

图片

 

 

二、添加明确的投影

在整个过程中投影的进一步明确是增强一个立体和层级关系的关键,我们以鸭子、床、以及熊在床上的投影做一个前后的对比。我们要注意的有三点:

 

1、统一投影的方向

每个物体上都要有明暗的一个对比,如鸭子之前几乎看不到暗面和投影,我们要去分析事物和鸭子的一个前后关系,再去添加植物后面的投影,让鸭子看起来更加立体。

图片

 

2、投影落地的形态

注意落地点,不要让影子浮在半空中,就像之前床的影子和星星的影子过于飘,整个物体看起来都没有落地。

图片

 

 

三、添加环境光

1、减掉整体的内发光

虽然在这种轻拟物画风上有很多的物体有一些轮廓光和反光,但并不是统一直接去加一个内发光,我们要重点做的是通过环境光来加强对比,整个的内发光会让物体失去明暗。

拿鸭子举例子,过强的光源会让鸭子显得很平。

图片

我们可以加强暗部,在暗部做一些微弱的反光,在亮部加入一点轮廓光。让整体更加的饱满立体。

 

2、根据不同的物体添加环境光

熊熊主要的环境光是床的紫色反光,我们在添加的时候注意不要把床反光的颜色过于后厚重或者没有颜色倾向。

图片

调整好一个环境光后我们再去整个添加熊环境光。这样整个画面的优化就完成了。

图片

我们来最后看一下第二版和第三版的对比效果

图片

整个画面明暗对比更强,而且颜色上更加通透,光影和谐统一,也具有更好的完整度。

本次文章可以吸收的知识点有很多,希望大家可以和我一起在总结中收获知识,取得进步,一个小场景塑造的立体有层次涉及到的点方方面面都会有,我们要注意绘制时多去做比较,同时保证整体明暗的对比效果和细节的刻画调整。

希望大家以后在绘制轻拟物场景插画上道路不迷茫,一起去打造令人眼前一亮的画面吧!

 

作者:牙牙

转载请注明:学UI网》好难啊,一遇到场景插画,我就废了!

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


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


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



日历

链接

个人资料

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

存档