-
工作不够专注?试试这个白噪音在线网站 Zen Sounds
UI交互 2022-09-28哪里有免费的白噪音网站?Zen Sounds 提供包括雨声、咖啡店、波浪、专注音乐和自然背景声音等类型,帮你进入心流。免费可商用!哪里有免费的 白噪音 网站? Zen Sounds 提供包括雨声、咖啡店、波浪、专注音乐和自然背景声音等类型,帮你进入心流。
免费可商用!超多音效素材的在线网站「Sound Effect Lab」 今天要介绍的「効果音ラボ」(Sound Effect Lab)是一个日本免费音效素材网站,提供各种有趣的效果音让使用者在线预览播放、免费下载!
阅读文章 >
有时候在工作时会想要来点音乐,不过听 Spotify、Apple Music 可能又很容易分心,这时候就可以考虑 Lo-Fi 或白噪音,两种声音都会使得环境不过度安静,在有声音做为背景的同时提高专注程度和工作效率,不过有些人则喜欢完全安静的环境,收听的习惯还是因人而异。
本文要介绍的「Zen Sounds」是一个免费白噪音、背景声音网站,提供各种声音素材,帮助使用者集中注意力、平静、冥想和帮助睡眠,免费声音库包括雨声、咖啡店、波浪、专注音乐和自然背景声音等等,只要打开网站选择要播放素材就能收听,还有调整音量和定时器功能。
比较可惜 Zen Sounds 无法将多个素材同时「混合」在一起播放,但用户依然能自行打开音乐播放器,同时将网站的背景音效打开,达到在大自然背景环境中聆听音乐、让自己更为专注的益处,如果你想要制造一些白噪音或背景音可以试试看这个网站。
Zen Sounds 网站链接: https://app.zenflowchart.com/zen-sounds
使用教学
开启 Zen Sounds 后左侧会有各种白噪音和背景声音类别,包括可帮助使用者专注、冥想、大自然或是和水有关的声音,从右侧点选要播放的声音即可,下方还能调整音量大小或设定定时器。
大多数的声音都能免费使用,唯独右下角标示为「Premium」需为付费会员登入后才能收听,不过免费部分也够多了,我特别喜欢能提高专注力的音乐,也有像是咖啡店、餐厅环境音或 Lo-Fi 音乐,戴上耳机、按下播放,调整适当音量就有很好的效果。
比较可惜的是 Zen Sounds 每次播放时只能选择一种声音,会显示于左侧选单,如果需要还能设定时器,让音乐在一定时间后自动停止,最短五分钟,最长可设定到一小时。
值得一试的三个理由:
免费白噪音、背景声音网站,提供各种声音素材在线播放 声音库包括雨声、咖啡店、波浪、专注音乐和自然背景声音等类型 内建定时器功能可在时间一到停止播放声音
-
用118张案例,讲透海报设计同构的13种表现形式
UI交互 2022-09-28平面海报设计创意中的同构设计是什么?有哪些表现形式?本文通过118张案例,帮你掌握同构中的13种表现形式。平面 海报设计 创意中的 同构设计 是什么?有哪些表现形式?本文通过118张案例,帮你掌握同构中的13种表现形式。
用80张案例,帮你掌握20种渐变色表现形式! hi,我是鱼先生,终身学习践行者。
阅读文章 >
案例超多!15种海报版式设计的创意形式 版式设计是设计师的必修课,研究再多都不为过,今天鱼先生继续与大家分享,关于版式设计的 15 种实用的版式设计创意术,干货系列~ 本文方法适用于所有版式设计的应用,比如常见的海报设计、画册设计、KV 设计等。
阅读文章 >
你好,我是鱼先生,不止会设计的 90 后解忧大叔。
又到了设计学习时间,今天要聊一聊同构在设计中的表现形式以及实战应用。
先了解一下基本概念,同构就是通过图形、元素进行有规律的组合、拼接或置换,从而增加画面的趣味性、视觉性,或通过同构的形式直接表达某种象征意义。
是不是听起来有点糊涂?
别担心,鱼先生总结了同构常见的 13 种表现形式,助你理解和吸收。
本文学习三部曲:
概念了解,掌握理论 案例剖析,加深理解 实战演练,助你吸收。 OK,躁动起来!
一、移花接木
移花接木,可以是在某个元素的基础上进行无中生有,形成新的图形表达,也可以在保持某种视觉基本型的状态下进行局部拼接,从而形成有趣、有意义的视觉画面,拼接的形式有很多,比如属性拼接、形状拼接、元素拼接、象征拼接等。
一起来看些案例,加深理解:
麻雀与老虎
左:手与烟囱的拼接;右:铅笔与绿叶
两幅作品都是公益海报,通过移花接木的拼接形式,左图的烟囱替代了手指,右图铅笔上面长出了树叶,直观的表达出保护环境、保护森林的诉求。
左:跳舞的脚替代了吉他的弦部分,也可以理解为局部置换同构,用某一种元素直接替换另一种元素的拼接形式;右:恐龙与美女腿的有趣拼接
左:字母与鱼;右:书本与美女
左:烟与鱼;右:红酒与虾
左图作品利用鱼的动结合烟头的磨灭,看上去好像一条鱼撞击地面而亡,清晰直观的表达了吸烟有害健康的寓意。
左:角与脚;右:拳与翅膀
鱼先生说:
移花接木听起来就充满趣味性,也可以利用移花接木的形式来表达讽刺意味,比如在公益海报中就经常使用讽刺手法,从而使人警醒、反思。
二、偷梁换柱 偷梁换柱的形式重点在于替换,替换的形式有很多,比如保留原有外形,然后替换内部元素,替换元素可以是一种或多种,最终形成有趣的视觉画面,多数情况下也具备双重含义的表达。
比如下图案例:
小狗与小鸟的形,填充所需元素,形成画面的趣味性
在商业设计中,我们需要根据客户的产品属性进行元素填充,比如下图是我以前设计的台历案例,保持蝴蝶的外形,然后内容元素结合公司的产品元素进行替换,最后形成以下画面。
为了画面的整体性,蝴蝶的右上角采用了延伸处理,一直延伸到画面外面,形成破局,增加延伸感。
OK,我们继续看些案例,加深理解:
左:喇叭外形与刷子;右:灯泡与啤酒
我们还可以直接利用产品本身的功能优势,直观地用视觉元素来表达诉求。
比如以下几组案例:
以上四组案例,采用直接的原料置换,直观的表达出产品的特性,自然、原生态,整体画面也比较吸睛。
再看下面这个案例,红豆与肾脏的结合,红豆对肾脏好,另外红豆的形状和肾脏也比较相似,所以这两个元素的结合,就产出了下面这幅创意作品。
鱼先生说:
偷梁换柱就是替换元素,所选用的视觉外形,尽量要使用大家常见的形状,比如蝴蝶、熊猫、东方明珠等大家熟识的形状。
因为当把一个元素只保留其形状的时候,如果不是常见的形状,大家会只看到你在某一个不知道什么形状里面填充了不同的元素,那么形状本身的意义就失去了。
三、二次曝光 二次曝光比较常见了,直接来看些案例。
左:人物的脸与建筑场景结合;右:人像与森林场景结合,头部故意消失,形成延伸感
左:人物头像与场景;右:狗狗头像与场景
人物头像与场景
四、异想天开 通过一种元素与之对应的意义来想象画面,比如有一句话:“书中自有黄金屋,书中自有颜如玉”,其中书对应的是黄金屋和颜如玉,那么创意点就可以通过这样的对应来切入。
左:钢笔延伸想象场景;右:酒瓶延伸想象场景
左:裙子与星空;右:油漆刷与泳池
在商业设计中,我们可以利用这个思路来思考创意,比如咖啡产品,咖啡主打的功能是提神,所以我们可以在画面中放入一杯咖啡,然后咖啡飘出来的雾气可以作为一个填充框架,然后填充精神满满的场景,从而直观的体现出咖啡能够带给你精神满满的状态。
还可以根据产品的功能或使用场景,进行想象创意,如下图案例:
左边利用模特的脸进行内部置换为场景,右边案例,用生动的内部场景表达肠胃的难受,从而说明某某产品的重要性。
OK,继续下一个!
五、移形换影 其实也是构成的一种形式,叫做影构,它的表现形式就是利用具象的人物或其他元素,然后映衬出符合诉求的影子,可以是对立,可以是象征,从而起到表达主题诉求的作用。
看下案例,加深理解:
简单直接的表达出,人类越来越智能,自然反而毁灭的就越快
饮料的自然原生态
左:汽车与手枪影子;右:小孩与蝙蝠侠影子
左:手钳与鳄鱼影子;小孩与魔法少女影子
乐高玩具的影子想象
鱼先生说:
影构具备象征意义,也具备异想天开的形式,大家在使用影构的时候,要清晰明了的去表达主题,并且影子要具备识别性,这样画面才能一目了然,具备吸睛和视觉性。
六、异质共存 异质也是偷梁换柱的一种,属于同构里面的置换形式,为了大家更好的理解,所以单拿出来讲一下。
重点就是保持原有元素的形状,替换原有元素的内部材质, 同时也属于变异构成的一种形式,所以这里命名为异质。
异质同构的常见表现形式有直接性表现、 象征性、对抗性等。
进入案例剖析环节:
左:羊身虎皮;右:脚印与绿叶肌理
左:手与木质;右:导航与原料
左:舌头与草莓;右:大象腿与树木
材质替换,很容易出效果,视觉冲击力比较强,比如上面左图案例,舌头替换草莓,直观的表达了味觉一触即发的意思。
右边的大象腿与木质的结合,一语双关,保护动物、保护森林,让人警醒,引人思考。
七、象征意义 通过两种以上元素进行拼接、置换等设计手法,达到某种寓意。
左:手枪+水龙头;右:塑料袋+鱼
左:酒+车=骷髅头;右:我们用肺呼吸,树木提供氧气,而且树木森林就像地球的肺,借人的肺部象征,表达让大家保护森林、保护自然、保护地球母亲,这同样是保护我们自己
左:蟑螂+子弹;右:话筒+鸟笼
以上几组都是公益海报,表达的寓意也是一目了然,非常直观。
我们再看几组商业案例,加深理解:
犀牛为骨架,象征着什么?
大象都能装进车里,象征着什么?
八、拟人拟物
利用拟人或拟物的表现形式,从而增加画面的诉求,以及起到吸睛的效果。
左:咖啡豆拟人;右:剪刀拟人
左:烟的拟人化;右,塑料袋与脸
水果拟人,增加趣味性
鱼先生说:
拟人拟物的表现形式具备趣味性和视觉冲击力,很容易吸引人们的眼球,也可以以主题产品为切入点去拟人化,增加灵动性,从而起到烘托主题的诉求。
九、色即是空 色即是空,空即是色,有既是无,无即是有。
利用正负形表达双重含义,加入正负空间的画面比较有设计感,应用范围不仅仅在 版式设计 中,在 LOGO 设计中也经常被使用。
看些案例,加深理解:
左:炸弹与大脑;右:手与吉他
左:胖子与肌肉男;右:钢笔与权杖
左边的健身海报,利用胖身体作为负空间,里面有一个肌肉男在用力推着,画面本身的张力、视觉冲击力都非常足,就像健身一样,就是在与自己的身体和精神做对抗。
负空间在包装设计中的妙用
上图包装案例,把局部做透明状处理,不仅可以形成负空间,还可以通过负空间看到产品,一举两得,趣味性十足。
鱼先生说:
正负形的表现形式,我屡屡提到,这也说明了正负形的实用性极强,大家可以再多赏析一些和正负形相关的作品,加以理解和吸收,最好是可以举一反三,学以致用。
十、以形补形 以形补形与上面的偷梁换柱类似,但不同的是,偷梁换柱的置换模式更多的是全局置换,而以形补形的运用重点在于利用常见的视觉图形,进行局部替换,可以是文字替换,也可以是元素替换,从而营造有趣的效果。
来看几组案例,加深理解:
左:灯泡外形,文字和绿草补充;右:利用文字补形
类似这样的文字补形非常实用常见,我们再看两组类似案例:
左:卓别林的脸用文字替代,保留识别强的胡子;右:烟囱部分用文字补形
左:人物另一半嵌入场景;右:乐器与人物
左:垃圾替换鱼的身体;右:字体补充建筑裁切部分
这一组属于拼接,在这里展示,想要强调一点,就是形状的基本一致性,比如地球与水漏,右边的草莓与气球的形状,可以说形状补充的比较完美,所以放在这里讲解。
大家在学习的时候,不要太过于纠结必须要用哪种形式来做设计,而是要不断的尝试,把我分享的知识点揉碎了,理解透彻,然后自然会成为你能力的一部分,这个时候才算是学以致用。
OK,继续!
十一、复制粘贴 把一种元素的原本样貌拿来作为设计的核心直接使用,经过设计变成另一种功能性的产品或视觉作品,但保留原来元素的视觉形象,听起来就像复制粘贴一样简单。
我们先看一组案例:
以上我们看到,有蝴蝶座椅、大提琴座椅、孔雀座椅、鱼形座椅,这些都是直接复制大自然本身的元素,稍作加工之后变成了我们日常所离不开的产品。
再看几组案例,加深理解:
鱼形产品
左:雪糕与乐器;右:辣椒产品
左:子弹头口红;右:刀片饼干
鱼先生说:
从古至今,我们所有的创意基本上都是复制于大自然,比如飞机的形成就借鉴于鸟类,所以我们要感恩大自然,保护大自然,大自然给了我们生存的空间、氧气、食物,也给了我们作为创造者的万千灵感,所以我们更要保持对大自然的敬畏和关怀。
十二、表里不一 有一句话叫做:“知人知面不知心”,把这句话的意思用在设计里面,就可以很好的表现出表里不一的创意形式。
香蕉与骷髅,是不是感觉莫名的可爱?
通过改变果蔬的内部结构,来表达趣味性,这样的方式直接用在设计项目中也是非常不错的创意,如下图案例:
再看一组不太一样的案例:
内新与外旧的对比,另外也加入了色彩的强烈对比,最后加入撕裂效果,形成强烈的视觉冲击力。
鱼先生说:
表里不一就是两种事物或场景的相互对比,整体理解,既具备联系性又具备反差对比,最终目的是为了突出诉求,形成有趣、吸睛的视觉作品。
十三、无缝连接 表现为,两个元素之间的链接契合度非常强,用一句通俗的网络用语来解释 就是:“毫无违和感”,找到这个感觉,就对了。
所以说,设计来源于生活,一点没有错,只要你肯思考,日常中的很多点都可以作为创意使用。
我们先看一个比较契合的视觉,如下图:
刷子与人物头发,完美的结合在一起,并且手的大与人物的小形成了强烈的反差对比,比较吸睛。
左:美女与虾尾;右:嘴唇花瓶与花朵
左:头发衣服;右:人物与衣服
ok,理论和剖析讲解完毕,进入实战演练环节!
十四、实战演练 案例①:指鹿为马
表现形式:移形换影
首先把主图设计出来,主图的设计方式并不难,给大家看一下步骤图:
指鹿为马,马本身就是虚拟的,所以我在马的影子表达中加入了双重叠加的感觉,形成一种虚幻、恍惚的感觉。
调整一下细节,背景完成:
主图完成之后,我们放入文案,完成后如下图:
方法学会了之后,大家可以去尝试一下,比如试试以狐假虎威为主题去设计一张海报。
OK,我们继续下一个案例。
案例②:乐器PK友谊赛海报
背景图制作过程如下图所示:
背景图完成,顺便来个版式,完成后如下图:
案例③:有趣的三味鱼海报
主图处理使用软件:PS(photoshop)
① 首先找一把快刀,把鱼切(ps)成三段
西红柿切块备用
然后开始切鱼,切(PS)好后如下图:
然后我们来处理鱼内部水果材质的添加,这里有个小方法,我们需要制作一个智能样机,我们以鱼头部分为例,来给大家拆解下这个技巧。
② 绘制一个圆形,不要添加描边,先把圆形转为为智能对象,然后再把图形按照透视关系调整为鱼的立体切面。
详细步骤如下图:
③ 找一个西瓜内部图片素材,切面要正一点,然后双击刚才建立好的智能对象,把西瓜纹理填充进去,然后保存,然后鱼画面中就会自动更换为西瓜质感。
详细步骤请看下图所示:
④ 按照以上相同的方法,依次为鱼身和鱼尾添加立体切面质感。 完成后,如下图:
三味鱼的主图已经制作完毕了。
⑤ 最后,我们进行趣味排版,完稿如下图:
Ok,分享结束!
开始炖鱼!!!
趁鱼还没炖好,最后汇总一下今天的 3 张实战案例,都是临时思考,临时设计的,大家可以自己尝试练习,以便于在实践中吸收知识点。
附件下载塑料样机福利。
OK,今天的文章到这里结束,我要去喝点鱼汤补充一下大脑,然后继续为大家写干货文章!感谢大家的喜欢和支持!
我们下期见!
欢迎关注作者微信公众号:「摆渡鱼生」
-
用118张案例,讲透海报设计同构的13种表现形式
UI交互 2022-09-28平面海报设计创意中的同构设计是什么?有哪些表现形式?本文通过118张案例,帮你掌握同构中的13种表现形式。平面 海报设计 创意中的 同构设计 是什么?有哪些表现形式?本文通过118张案例,帮你掌握同构中的13种表现形式。
用80张案例,帮你掌握20种渐变色表现形式! hi,我是鱼先生,终身学习践行者。
阅读文章 >
案例超多!15种海报版式设计的创意形式 版式设计是设计师的必修课,研究再多都不为过,今天鱼先生继续与大家分享,关于版式设计的 15 种实用的版式设计创意术,干货系列~ 本文方法适用于所有版式设计的应用,比如常见的海报设计、画册设计、KV 设计等。
阅读文章 >
你好,我是鱼先生,不止会设计的 90 后解忧大叔。
又到了设计学习时间,今天要聊一聊同构在设计中的表现形式以及实战应用。
先了解一下基本概念,同构就是通过图形、元素进行有规律的组合、拼接或置换,从而增加画面的趣味性、视觉性,或通过同构的形式直接表达某种象征意义。
是不是听起来有点糊涂?
别担心,鱼先生总结了同构常见的 13 种表现形式,助你理解和吸收。
本文学习三部曲:
概念了解,掌握理论 案例剖析,加深理解 实战演练,助你吸收。 OK,躁动起来!
一、移花接木
移花接木,可以是在某个元素的基础上进行无中生有,形成新的图形表达,也可以在保持某种视觉基本型的状态下进行局部拼接,从而形成有趣、有意义的视觉画面,拼接的形式有很多,比如属性拼接、形状拼接、元素拼接、象征拼接等。
一起来看些案例,加深理解:
麻雀与老虎
左:手与烟囱的拼接;右:铅笔与绿叶
两幅作品都是公益海报,通过移花接木的拼接形式,左图的烟囱替代了手指,右图铅笔上面长出了树叶,直观的表达出保护环境、保护森林的诉求。
左:跳舞的脚替代了吉他的弦部分,也可以理解为局部置换同构,用某一种元素直接替换另一种元素的拼接形式;右:恐龙与美女腿的有趣拼接
左:字母与鱼;右:书本与美女
左:烟与鱼;右:红酒与虾
左图作品利用鱼的动结合烟头的磨灭,看上去好像一条鱼撞击地面而亡,清晰直观的表达了吸烟有害健康的寓意。
左:角与脚;右:拳与翅膀
鱼先生说:
移花接木听起来就充满趣味性,也可以利用移花接木的形式来表达讽刺意味,比如在公益海报中就经常使用讽刺手法,从而使人警醒、反思。
二、偷梁换柱 偷梁换柱的形式重点在于替换,替换的形式有很多,比如保留原有外形,然后替换内部元素,替换元素可以是一种或多种,最终形成有趣的视觉画面,多数情况下也具备双重含义的表达。
比如下图案例:
小狗与小鸟的形,填充所需元素,形成画面的趣味性
在商业设计中,我们需要根据客户的产品属性进行元素填充,比如下图是我以前设计的台历案例,保持蝴蝶的外形,然后内容元素结合公司的产品元素进行替换,最后形成以下画面。
为了画面的整体性,蝴蝶的右上角采用了延伸处理,一直延伸到画面外面,形成破局,增加延伸感。
OK,我们继续看些案例,加深理解:
左:喇叭外形与刷子;右:灯泡与啤酒
我们还可以直接利用产品本身的功能优势,直观地用视觉元素来表达诉求。
比如以下几组案例:
以上四组案例,采用直接的原料置换,直观的表达出产品的特性,自然、原生态,整体画面也比较吸睛。
再看下面这个案例,红豆与肾脏的结合,红豆对肾脏好,另外红豆的形状和肾脏也比较相似,所以这两个元素的结合,就产出了下面这幅创意作品。
鱼先生说:
偷梁换柱就是替换元素,所选用的视觉外形,尽量要使用大家常见的形状,比如蝴蝶、熊猫、东方明珠等大家熟识的形状。
因为当把一个元素只保留其形状的时候,如果不是常见的形状,大家会只看到你在某一个不知道什么形状里面填充了不同的元素,那么形状本身的意义就失去了。
三、二次曝光 二次曝光比较常见了,直接来看些案例。
左:人物的脸与建筑场景结合;右:人像与森林场景结合,头部故意消失,形成延伸感
左:人物头像与场景;右:狗狗头像与场景
人物头像与场景
四、异想天开 通过一种元素与之对应的意义来想象画面,比如有一句话:“书中自有黄金屋,书中自有颜如玉”,其中书对应的是黄金屋和颜如玉,那么创意点就可以通过这样的对应来切入。
左:钢笔延伸想象场景;右:酒瓶延伸想象场景
左:裙子与星空;右:油漆刷与泳池
在商业设计中,我们可以利用这个思路来思考创意,比如咖啡产品,咖啡主打的功能是提神,所以我们可以在画面中放入一杯咖啡,然后咖啡飘出来的雾气可以作为一个填充框架,然后填充精神满满的场景,从而直观的体现出咖啡能够带给你精神满满的状态。
还可以根据产品的功能或使用场景,进行想象创意,如下图案例:
左边利用模特的脸进行内部置换为场景,右边案例,用生动的内部场景表达肠胃的难受,从而说明某某产品的重要性。
OK,继续下一个!
五、移形换影 其实也是构成的一种形式,叫做影构,它的表现形式就是利用具象的人物或其他元素,然后映衬出符合诉求的影子,可以是对立,可以是象征,从而起到表达主题诉求的作用。
看下案例,加深理解:
简单直接的表达出,人类越来越智能,自然反而毁灭的就越快
饮料的自然原生态
左:汽车与手枪影子;右:小孩与蝙蝠侠影子
左:手钳与鳄鱼影子;小孩与魔法少女影子
乐高玩具的影子想象
鱼先生说:
影构具备象征意义,也具备异想天开的形式,大家在使用影构的时候,要清晰明了的去表达主题,并且影子要具备识别性,这样画面才能一目了然,具备吸睛和视觉性。
六、异质共存 异质也是偷梁换柱的一种,属于同构里面的置换形式,为了大家更好的理解,所以单拿出来讲一下。
重点就是保持原有元素的形状,替换原有元素的内部材质, 同时也属于变异构成的一种形式,所以这里命名为异质。
异质同构的常见表现形式有直接性表现、 象征性、对抗性等。
进入案例剖析环节:
左:羊身虎皮;右:脚印与绿叶肌理
左:手与木质;右:导航与原料
左:舌头与草莓;右:大象腿与树木
材质替换,很容易出效果,视觉冲击力比较强,比如上面左图案例,舌头替换草莓,直观的表达了味觉一触即发的意思。
右边的大象腿与木质的结合,一语双关,保护动物、保护森林,让人警醒,引人思考。
七、象征意义 通过两种以上元素进行拼接、置换等设计手法,达到某种寓意。
左:手枪+水龙头;右:塑料袋+鱼
左:酒+车=骷髅头;右:我们用肺呼吸,树木提供氧气,而且树木森林就像地球的肺,借人的肺部象征,表达让大家保护森林、保护自然、保护地球母亲,这同样是保护我们自己
左:蟑螂+子弹;右:话筒+鸟笼
以上几组都是公益海报,表达的寓意也是一目了然,非常直观。
我们再看几组商业案例,加深理解:
犀牛为骨架,象征着什么?
大象都能装进车里,象征着什么?
八、拟人拟物
利用拟人或拟物的表现形式,从而增加画面的诉求,以及起到吸睛的效果。
左:咖啡豆拟人;右:剪刀拟人
左:烟的拟人化;右,塑料袋与脸
水果拟人,增加趣味性
鱼先生说:
拟人拟物的表现形式具备趣味性和视觉冲击力,很容易吸引人们的眼球,也可以以主题产品为切入点去拟人化,增加灵动性,从而起到烘托主题的诉求。
九、色即是空 色即是空,空即是色,有既是无,无即是有。
利用正负形表达双重含义,加入正负空间的画面比较有设计感,应用范围不仅仅在 版式设计 中,在 LOGO 设计中也经常被使用。
看些案例,加深理解:
左:炸弹与大脑;右:手与吉他
左:胖子与肌肉男;右:钢笔与权杖
左边的健身海报,利用胖身体作为负空间,里面有一个肌肉男在用力推着,画面本身的张力、视觉冲击力都非常足,就像健身一样,就是在与自己的身体和精神做对抗。
负空间在包装设计中的妙用
上图包装案例,把局部做透明状处理,不仅可以形成负空间,还可以通过负空间看到产品,一举两得,趣味性十足。
鱼先生说:
正负形的表现形式,我屡屡提到,这也说明了正负形的实用性极强,大家可以再多赏析一些和正负形相关的作品,加以理解和吸收,最好是可以举一反三,学以致用。
十、以形补形 以形补形与上面的偷梁换柱类似,但不同的是,偷梁换柱的置换模式更多的是全局置换,而以形补形的运用重点在于利用常见的视觉图形,进行局部替换,可以是文字替换,也可以是元素替换,从而营造有趣的效果。
来看几组案例,加深理解:
左:灯泡外形,文字和绿草补充;右:利用文字补形
类似这样的文字补形非常实用常见,我们再看两组类似案例:
左:卓别林的脸用文字替代,保留识别强的胡子;右:烟囱部分用文字补形
左:人物另一半嵌入场景;右:乐器与人物
左:垃圾替换鱼的身体;右:字体补充建筑裁切部分
这一组属于拼接,在这里展示,想要强调一点,就是形状的基本一致性,比如地球与水漏,右边的草莓与气球的形状,可以说形状补充的比较完美,所以放在这里讲解。
大家在学习的时候,不要太过于纠结必须要用哪种形式来做设计,而是要不断的尝试,把我分享的知识点揉碎了,理解透彻,然后自然会成为你能力的一部分,这个时候才算是学以致用。
OK,继续!
十一、复制粘贴 把一种元素的原本样貌拿来作为设计的核心直接使用,经过设计变成另一种功能性的产品或视觉作品,但保留原来元素的视觉形象,听起来就像复制粘贴一样简单。
我们先看一组案例:
以上我们看到,有蝴蝶座椅、大提琴座椅、孔雀座椅、鱼形座椅,这些都是直接复制大自然本身的元素,稍作加工之后变成了我们日常所离不开的产品。
再看几组案例,加深理解:
鱼形产品
左:雪糕与乐器;右:辣椒产品
左:子弹头口红;右:刀片饼干
鱼先生说:
从古至今,我们所有的创意基本上都是复制于大自然,比如飞机的形成就借鉴于鸟类,所以我们要感恩大自然,保护大自然,大自然给了我们生存的空间、氧气、食物,也给了我们作为创造者的万千灵感,所以我们更要保持对大自然的敬畏和关怀。
十二、表里不一 有一句话叫做:“知人知面不知心”,把这句话的意思用在设计里面,就可以很好的表现出表里不一的创意形式。
香蕉与骷髅,是不是感觉莫名的可爱?
通过改变果蔬的内部结构,来表达趣味性,这样的方式直接用在设计项目中也是非常不错的创意,如下图案例:
再看一组不太一样的案例:
内新与外旧的对比,另外也加入了色彩的强烈对比,最后加入撕裂效果,形成强烈的视觉冲击力。
鱼先生说:
表里不一就是两种事物或场景的相互对比,整体理解,既具备联系性又具备反差对比,最终目的是为了突出诉求,形成有趣、吸睛的视觉作品。
十三、无缝连接 表现为,两个元素之间的链接契合度非常强,用一句通俗的网络用语来解释 就是:“毫无违和感”,找到这个感觉,就对了。
所以说,设计来源于生活,一点没有错,只要你肯思考,日常中的很多点都可以作为创意使用。
我们先看一个比较契合的视觉,如下图:
刷子与人物头发,完美的结合在一起,并且手的大与人物的小形成了强烈的反差对比,比较吸睛。
左:美女与虾尾;右:嘴唇花瓶与花朵
左:头发衣服;右:人物与衣服
ok,理论和剖析讲解完毕,进入实战演练环节!
十四、实战演练 案例①:指鹿为马
表现形式:移形换影
首先把主图设计出来,主图的设计方式并不难,给大家看一下步骤图:
指鹿为马,马本身就是虚拟的,所以我在马的影子表达中加入了双重叠加的感觉,形成一种虚幻、恍惚的感觉。
调整一下细节,背景完成:
主图完成之后,我们放入文案,完成后如下图:
方法学会了之后,大家可以去尝试一下,比如试试以狐假虎威为主题去设计一张海报。
OK,我们继续下一个案例。
案例②:乐器PK友谊赛海报
背景图制作过程如下图所示:
背景图完成,顺便来个版式,完成后如下图:
案例③:有趣的三味鱼海报
主图处理使用软件:PS(photoshop)
① 首先找一把快刀,把鱼切(ps)成三段
西红柿切块备用
然后开始切鱼,切(PS)好后如下图:
然后我们来处理鱼内部水果材质的添加,这里有个小方法,我们需要制作一个智能样机,我们以鱼头部分为例,来给大家拆解下这个技巧。
② 绘制一个圆形,不要添加描边,先把圆形转为为智能对象,然后再把图形按照透视关系调整为鱼的立体切面。
详细步骤如下图:
③ 找一个西瓜内部图片素材,切面要正一点,然后双击刚才建立好的智能对象,把西瓜纹理填充进去,然后保存,然后鱼画面中就会自动更换为西瓜质感。
详细步骤请看下图所示:
④ 按照以上相同的方法,依次为鱼身和鱼尾添加立体切面质感。 完成后,如下图:
三味鱼的主图已经制作完毕了。
⑤ 最后,我们进行趣味排版,完稿如下图:
Ok,分享结束!
开始炖鱼!!!
趁鱼还没炖好,最后汇总一下今天的 3 张实战案例,都是临时思考,临时设计的,大家可以自己尝试练习,以便于在实践中吸收知识点。
附件下载塑料样机福利。
OK,今天的文章到这里结束,我要去喝点鱼汤补充一下大脑,然后继续为大家写干货文章!感谢大家的喜欢和支持!
我们下期见!
欢迎关注作者微信公众号:「摆渡鱼生」
-
如何构建完整的交互流程?用一个答题活动帮你掌握!
UI交互 2022-09-28交互设计师该如何构建交互流程?本文用一个答题活动的实战案例,帮你建立一套属于自己的思维逻辑。从零开始!交互设计 师该如何构建 交互流程 ?本文用一个答题活动的实战案例,帮你建立一套属于自己的思维逻辑。
从零开始!五个步骤教你做出「上传菜谱」的交互流程与原型设计 今天继续给大家讲交互方案的设计思路。
阅读文章 >
此篇文章的初衷,并不是想教大家做一个具体活动的交互流程,而是希望通过我对于以往项目思考过程的拆解,帮助你建立一套属于自己的思维逻辑。同时,也希望通过这些输出,让更多的交互设计师找到自己的价值,包括我自己。
一、活动背景 运营活动的交互流程往往都是在明确的运营目标的前提下建立的,不同的目标对应的活动形式以及功能模块、操作流程都有所不同。
比如为了达成“促活”的目标,我们可以以抽奖的形式来实现;如果促活的同时,再加上“转化”,那我们把抽奖与任务相关联,以任务的形式完成转化;如果再加上“裂变”的目标,那我们可以加上分享;如果还需要满足用户“攀比心理”,那可以加上排行榜功能等等。
本次活动的运营目标是“宣教”,即宣传教育,简而言之,就是通过某种方式,将自己想要用户了解的信息传达出去。
而以往的宣教一般通过图文、视频的方式进行设计,但是由于太过于常规且缺少用户激励,导致用户的点击率较低。
如何通过对这些信息的包装设计,增加用户的学习欲望从而提升信息的转化,本次我们选择了“答题”的形式。
二、确定答题类型 在确定了形式以后,接下来我们就需要根据该形式选择符合此次需求的答题类型。
可能有人会问,答题不就是答对 or 答错么,会有什么不同的类型?
其实不尽然,选择答案只是答题活动设计中的其中一点,不同的运营策略对应的答题活动的功能与逻辑、流程都有所不同,接下来我们一一分析并拆解。
1. 连续答题 or 累计答题
我们首先要考虑的就是答题的类型是连续答题还是累计答题,这两种不同规则的设定会影响到用户答题流程。
连续答题,关注点是连续性,用户只有答对才能进入下一题,答错就直接结束本轮答题; 累计答题,关注点是正确数量,用户答错不结束答题流程,进入下一题,最后统计用户答对的数量。 选择何种类型,就需要分析这两种的优缺点,结合运营策略来抉择。
连续答题,因为要确保用户的完成率(全部答对),所以需要合理的设置题目的难易程度跟数量,如果第一题难度很高或者需要连续答对 100 题才能完成,不管哪种方式,都会让用户产生抵触心理。
而设置题目数量的好处在于,我们可以围绕具体的一类知识点进行题目的设置,比如一支基金产品、一个基金经理等。用户可以循序渐进的,通过答题的形式,学习并接受此类知识,建立起用户的心智。这无疑是比较符合本次运营目标的答题类型。
而累计答题,它统计的是答对题目的数量,由于答错不结束答题流程,所以就必须有一个约束来主动结束答题,往往通过设置时间来完成,就类似经常在综艺里出现的“你画我猜”的游戏。
这个类型的答题,为了确保用户每次答题不出现相同的题目,就需要丰富的题库来支撑,无法针对一个具体的知识点进行宣教,不符合本次运营的目标。
但是如果为了增加用户在产品的活跃度以及节日的氛围感,就可以沿用此类型,比如“元宵答题会”等主题,同时加入 PK 的流程,来进一步丰富活动的玩法,这里就不做进一步的展开。
2. 答题机会 or 复活机会
我们都知道一个运营活动一般不会只有单一的目标,本次活动除了“宣教”以外,还有一个就是常规的转化。
答题只是简单的建立起用户对于某类知识的基础了解,但是想要深入了解就需要用户进入到具体的页面,而促进用户点击的刺激点就是完成任务的奖励,这类奖励一定是用户在本次活动中的“刚需”,才会主动去完成。
结合答题的场景,奖励的设置可以是获得答题机会或者复活机会。
该选择谁,需要结合前面我们选的答题类型来分析,连续答题的关键点是连续性,一般会设置几个节点,比如 3、6、9、12 等,每个节点对应一定的奖励,越往后奖励越大,这就要求用户为了获得后面大的奖励,就必须要连续答对。
如果答错,用户是希望退回原点从头再来还是就地复活继续答题呢?
绝大部分用户应该会选择后者,所以,针对连续答题的类型,奖励设置为复活机会就比较合适了。
三、选择页面相关元素 确定好答题类型跟奖励类型以后,我们接下来就需要思考整个流程的页面细节,找到可能会影响用户进程的阻碍点,看看可以通过什么方式来消除。
第一个阻碍点就是完成任务。虽然用户完成任务能带来他们希望的回报,即复活机会。
但是完成任务需要指定用户跳转到另一个页面,甚至需要停留一定的时间或者完成具体的操作,这无疑对于用户来说,是比较反感的。那如何促进用户完成任务呢?
我们可以进一步强化利益点,通过呈现答题进度,告知用户即将获得奖励。利用利益点的刺激,让用户继续答题,当出现答题错误,用户自然需要复活,而这时候,就可以达到引导用户去完成任务的目的。
而第二个需要考虑的,就是需不需要放“答题倒计时”功能,我们知道一般为了营造答题氛围,以及减少用户“作弊”,通常会设置倒计时来约束用户的答题时间,但是带来的负面影响就是用户会在答题的过程中过于紧张。
如果不放,用户可以拥有大量的时间查阅答案,无疑降低了用户通关的门槛。
该不该放,需要结合本次活动的目的,本次活动的本质就是宣教,用户在查阅资料的时候,也是一种学习相关知识的过程,而且如果需要控制奖励的预算,可以约束用户每天答题的次数,就可以降低因成功率过高而带来预算超标的影响。
所以最后我们没有将“倒计时”功能放在本次活动流程中。
四、创建交互流程 在创建交互流程的时候,我们需要考虑三点,即状态、操作、反馈。针对本次互动,我们来分析这三要素。
首先是状态。状态需要考虑的是所有的页面、按钮的状态,比如答题按钮的状态,任务按钮的状态。
不同的状态选择是需要根据活动的规则决定的,比如用户每天可以无限制答题,那么答题按钮就是始终高亮的状态,如果是有次数限制,就需要告诉用户当前次数,以及没有次数时的置灰状态,告知用户今日不能参与等等。
而操作就是要考虑用户在页面所有能发生的操作行为,如点击、双击、滑动等,以及用户发生操作后的跳转逻辑。
比如当用户在选择答案后,是直接展示结果还是需要点击确认再提交选择,是否支持用户返回查看上一题的选项。
不同操作流程的选择需要结合活动性质来抉择,如是否支持返回查看上一题,我们可以分析用户返回的目的是什么,可能是需要去修改上一题的答案,但是由于活动的性质是连续性,当用户选择错误就终止进程,所以不存在用户返回修改答案的情况,也就没必要支持用户返回了。
最后是反馈,反馈应该是及时的,减少用户因等待产生的焦虑心理,答题流程中的反馈主要包括用户选择答案以后,是否正确的反馈。但是在这两个常规的反馈中,我们还可以结合运营目标做进一步的设计。
根据运营活动的设定,我们将用户连续答对的过程拆解了几个阶段,当用户达到某个阶段就会给个奖励,以刺激用户持续答题,所以当用户答题正确的时候,页面反馈除了答案正确的反馈,还得考虑用户是不是已经达到了奖励的节点,如果达到了,就需要给出对应的奖励的反馈。
而当用户回答错误时,除了及时反馈用户选择的答案错误,我们还需要考虑用户是否持有复活卡,如果持有,那么当用户答错的同时,反馈用户可以通过使用复活卡继续答题,但是如果没有,是不是就结束本轮答题了呢?
我们可以分析,当用户想要继续进行本轮答题,肯定是需要复活卡激活,但是复活卡需要去完成任务获得,那如果在用户答错且没有复活卡的时候,直接让用户去完成任务获得复活卡,是不是既满足用户想要复活的用户诉求,也满足了客户想转化的业务诉求了呢?
五、数据维护与分析 以上的分析,其实都是根据自己以往答题活动的经验,以及从用户体验的角度出发而创建的流程,我们只是保证了用户在整个链路中操作流程的完整性。
但是对于真实用户而言,最终的效果是怎样的我们不得而知,但是我们可以通过对数据的维护与分析,来获取用户的使用情况,从而不断的优化活动。
本次活动的数据主要有三个地方需要客户维护,也就是活动的中台功能,分别是奖励、任务、题库。
前两个都是常规的运营活动需要维护的数据,本次活动主要的差异化在于题库的维护上,我们在进行活动设计的时候,分了几个阶段,随着答题的深入,奖励也会越来越高,那对应的题目难度应该也就越来越大。
所以我们在进行题库配置的时候,需要按照难易程度对每个阶段的题库单独配置,这样在前端取题目的时候,可以在对应的题库里提取数据,就保证了每个阶段题目难度不同的目的。
而数据分析,主要在于埋点数据的分析,我们可以通过数据的变化来分析可能存在的问题。
比如当我们发现绝大部分用户在第二阶段就结束了答题,那我们可以分析是否是第二阶段的题目难度太大,还是第二阶段的奖励太低,通过不断调整数据来验证我们的猜想,从而解决用户在整个流程中所遇到的问题。
六、总结 以上,就是笔者根据过往的工作经验,分享的一篇关于构建答题活动交互流程的文章。
后续也会继续分享自己在实际工作中,关于产品交互的心得与感想,经验有限,欢迎大家批评指正与交流。
-
如何构建完整的交互流程?用一个答题活动帮你掌握!
UI交互 2022-09-28交互设计师该如何构建交互流程?本文用一个答题活动的实战案例,帮你建立一套属于自己的思维逻辑。从零开始!交互设计 师该如何构建 交互流程 ?本文用一个答题活动的实战案例,帮你建立一套属于自己的思维逻辑。
从零开始!五个步骤教你做出「上传菜谱」的交互流程与原型设计 今天继续给大家讲交互方案的设计思路。
阅读文章 >
此篇文章的初衷,并不是想教大家做一个具体活动的交互流程,而是希望通过我对于以往项目思考过程的拆解,帮助你建立一套属于自己的思维逻辑。同时,也希望通过这些输出,让更多的交互设计师找到自己的价值,包括我自己。
一、活动背景 运营活动的交互流程往往都是在明确的运营目标的前提下建立的,不同的目标对应的活动形式以及功能模块、操作流程都有所不同。
比如为了达成“促活”的目标,我们可以以抽奖的形式来实现;如果促活的同时,再加上“转化”,那我们把抽奖与任务相关联,以任务的形式完成转化;如果再加上“裂变”的目标,那我们可以加上分享;如果还需要满足用户“攀比心理”,那可以加上排行榜功能等等。
本次活动的运营目标是“宣教”,即宣传教育,简而言之,就是通过某种方式,将自己想要用户了解的信息传达出去。
而以往的宣教一般通过图文、视频的方式进行设计,但是由于太过于常规且缺少用户激励,导致用户的点击率较低。
如何通过对这些信息的包装设计,增加用户的学习欲望从而提升信息的转化,本次我们选择了“答题”的形式。
二、确定答题类型 在确定了形式以后,接下来我们就需要根据该形式选择符合此次需求的答题类型。
可能有人会问,答题不就是答对 or 答错么,会有什么不同的类型?
其实不尽然,选择答案只是答题活动设计中的其中一点,不同的运营策略对应的答题活动的功能与逻辑、流程都有所不同,接下来我们一一分析并拆解。
1. 连续答题 or 累计答题
我们首先要考虑的就是答题的类型是连续答题还是累计答题,这两种不同规则的设定会影响到用户答题流程。
连续答题,关注点是连续性,用户只有答对才能进入下一题,答错就直接结束本轮答题; 累计答题,关注点是正确数量,用户答错不结束答题流程,进入下一题,最后统计用户答对的数量。 选择何种类型,就需要分析这两种的优缺点,结合运营策略来抉择。
连续答题,因为要确保用户的完成率(全部答对),所以需要合理的设置题目的难易程度跟数量,如果第一题难度很高或者需要连续答对 100 题才能完成,不管哪种方式,都会让用户产生抵触心理。
而设置题目数量的好处在于,我们可以围绕具体的一类知识点进行题目的设置,比如一支基金产品、一个基金经理等。用户可以循序渐进的,通过答题的形式,学习并接受此类知识,建立起用户的心智。这无疑是比较符合本次运营目标的答题类型。
而累计答题,它统计的是答对题目的数量,由于答错不结束答题流程,所以就必须有一个约束来主动结束答题,往往通过设置时间来完成,就类似经常在综艺里出现的“你画我猜”的游戏。
这个类型的答题,为了确保用户每次答题不出现相同的题目,就需要丰富的题库来支撑,无法针对一个具体的知识点进行宣教,不符合本次运营的目标。
但是如果为了增加用户在产品的活跃度以及节日的氛围感,就可以沿用此类型,比如“元宵答题会”等主题,同时加入 PK 的流程,来进一步丰富活动的玩法,这里就不做进一步的展开。
2. 答题机会 or 复活机会
我们都知道一个运营活动一般不会只有单一的目标,本次活动除了“宣教”以外,还有一个就是常规的转化。
答题只是简单的建立起用户对于某类知识的基础了解,但是想要深入了解就需要用户进入到具体的页面,而促进用户点击的刺激点就是完成任务的奖励,这类奖励一定是用户在本次活动中的“刚需”,才会主动去完成。
结合答题的场景,奖励的设置可以是获得答题机会或者复活机会。
该选择谁,需要结合前面我们选的答题类型来分析,连续答题的关键点是连续性,一般会设置几个节点,比如 3、6、9、12 等,每个节点对应一定的奖励,越往后奖励越大,这就要求用户为了获得后面大的奖励,就必须要连续答对。
如果答错,用户是希望退回原点从头再来还是就地复活继续答题呢?
绝大部分用户应该会选择后者,所以,针对连续答题的类型,奖励设置为复活机会就比较合适了。
三、选择页面相关元素 确定好答题类型跟奖励类型以后,我们接下来就需要思考整个流程的页面细节,找到可能会影响用户进程的阻碍点,看看可以通过什么方式来消除。
第一个阻碍点就是完成任务。虽然用户完成任务能带来他们希望的回报,即复活机会。
但是完成任务需要指定用户跳转到另一个页面,甚至需要停留一定的时间或者完成具体的操作,这无疑对于用户来说,是比较反感的。那如何促进用户完成任务呢?
我们可以进一步强化利益点,通过呈现答题进度,告知用户即将获得奖励。利用利益点的刺激,让用户继续答题,当出现答题错误,用户自然需要复活,而这时候,就可以达到引导用户去完成任务的目的。
而第二个需要考虑的,就是需不需要放“答题倒计时”功能,我们知道一般为了营造答题氛围,以及减少用户“作弊”,通常会设置倒计时来约束用户的答题时间,但是带来的负面影响就是用户会在答题的过程中过于紧张。
如果不放,用户可以拥有大量的时间查阅答案,无疑降低了用户通关的门槛。
该不该放,需要结合本次活动的目的,本次活动的本质就是宣教,用户在查阅资料的时候,也是一种学习相关知识的过程,而且如果需要控制奖励的预算,可以约束用户每天答题的次数,就可以降低因成功率过高而带来预算超标的影响。
所以最后我们没有将“倒计时”功能放在本次活动流程中。
四、创建交互流程 在创建交互流程的时候,我们需要考虑三点,即状态、操作、反馈。针对本次互动,我们来分析这三要素。
首先是状态。状态需要考虑的是所有的页面、按钮的状态,比如答题按钮的状态,任务按钮的状态。
不同的状态选择是需要根据活动的规则决定的,比如用户每天可以无限制答题,那么答题按钮就是始终高亮的状态,如果是有次数限制,就需要告诉用户当前次数,以及没有次数时的置灰状态,告知用户今日不能参与等等。
而操作就是要考虑用户在页面所有能发生的操作行为,如点击、双击、滑动等,以及用户发生操作后的跳转逻辑。
比如当用户在选择答案后,是直接展示结果还是需要点击确认再提交选择,是否支持用户返回查看上一题的选项。
不同操作流程的选择需要结合活动性质来抉择,如是否支持返回查看上一题,我们可以分析用户返回的目的是什么,可能是需要去修改上一题的答案,但是由于活动的性质是连续性,当用户选择错误就终止进程,所以不存在用户返回修改答案的情况,也就没必要支持用户返回了。
最后是反馈,反馈应该是及时的,减少用户因等待产生的焦虑心理,答题流程中的反馈主要包括用户选择答案以后,是否正确的反馈。但是在这两个常规的反馈中,我们还可以结合运营目标做进一步的设计。
根据运营活动的设定,我们将用户连续答对的过程拆解了几个阶段,当用户达到某个阶段就会给个奖励,以刺激用户持续答题,所以当用户答题正确的时候,页面反馈除了答案正确的反馈,还得考虑用户是不是已经达到了奖励的节点,如果达到了,就需要给出对应的奖励的反馈。
而当用户回答错误时,除了及时反馈用户选择的答案错误,我们还需要考虑用户是否持有复活卡,如果持有,那么当用户答错的同时,反馈用户可以通过使用复活卡继续答题,但是如果没有,是不是就结束本轮答题了呢?
我们可以分析,当用户想要继续进行本轮答题,肯定是需要复活卡激活,但是复活卡需要去完成任务获得,那如果在用户答错且没有复活卡的时候,直接让用户去完成任务获得复活卡,是不是既满足用户想要复活的用户诉求,也满足了客户想转化的业务诉求了呢?
五、数据维护与分析 以上的分析,其实都是根据自己以往答题活动的经验,以及从用户体验的角度出发而创建的流程,我们只是保证了用户在整个链路中操作流程的完整性。
但是对于真实用户而言,最终的效果是怎样的我们不得而知,但是我们可以通过对数据的维护与分析,来获取用户的使用情况,从而不断的优化活动。
本次活动的数据主要有三个地方需要客户维护,也就是活动的中台功能,分别是奖励、任务、题库。
前两个都是常规的运营活动需要维护的数据,本次活动主要的差异化在于题库的维护上,我们在进行活动设计的时候,分了几个阶段,随着答题的深入,奖励也会越来越高,那对应的题目难度应该也就越来越大。
所以我们在进行题库配置的时候,需要按照难易程度对每个阶段的题库单独配置,这样在前端取题目的时候,可以在对应的题库里提取数据,就保证了每个阶段题目难度不同的目的。
而数据分析,主要在于埋点数据的分析,我们可以通过数据的变化来分析可能存在的问题。
比如当我们发现绝大部分用户在第二阶段就结束了答题,那我们可以分析是否是第二阶段的题目难度太大,还是第二阶段的奖励太低,通过不断调整数据来验证我们的猜想,从而解决用户在整个流程中所遇到的问题。
六、总结 以上,就是笔者根据过往的工作经验,分享的一篇关于构建答题活动交互流程的文章。
后续也会继续分享自己在实际工作中,关于产品交互的心得与感想,经验有限,欢迎大家批评指正与交流。
-
B端对齐如何设计?我总结了这3种常用场景!
UI交互 2022-09-28B端设计中如何做好对齐设计?本文总结了通用场景、表格场景和表单3种常见场景的设计选择和取舍。明明对齐了,为什么界面还是不好看?B端设计 中如何做好 对齐 设计?本文总结了通用场景、表格场景和表单3种常见场景的设计选择和取舍。
明明对齐了,为什么界面还是不好看? 版式设计关注的是设计中文字和图像的位置关系。
阅读文章 >
关于对齐,大部分 设计师 可能会觉得非常简单,不就是那几种对齐方式嘛,难道还有很复杂的操作?深入研究才发现,B 端对齐还真没你想象的那么简单。如果不信,请接着往下看。
一、对齐的含义 对齐,顾名思义就是将文字或图片等信息以某种对齐规则进行排列。我们常用的对齐规则分为三类,即:左对齐、右对齐、居中对齐。
二、通用场景对齐方式 1. 左对齐简述
左对齐是最为常见的场景,因为它符合人们的阅读动线——从左到右进行阅读。在大部分的设计场景中都可以运用左对齐。比如我们常见的工作台卡片、导航栏等都可以使用左对齐。
在使用左对齐时,不仅需要考虑物理对齐,在特定场景下需要考虑视觉对齐:比如在对于图标和文字混排时,记得文字跟文字对齐,视觉效果会更加整齐。(因为格式塔原理,人们对于类似的东西会将其看做同一类,而同一类对齐视觉上会舒适)
如何在产品设计中应用格式塔原理?用超多案例告诉你! 大家都有过这种经历吗,当我们抬头看云朵的时候,经常会将不同的云朵联想到不同的事物或者动物。
阅读文章 >
2. 右对齐简述
右对齐可能在很多时候运用得比较少,在普通设计场景的右对齐用来填补设计中右侧的视觉空缺,比如以下两种应用场景:
① 内容或者辅助信心使用右对齐
② 操作类的右对齐,比如移动端表单或者 web 端操作。
3. 居中对齐简述
居中对齐则一般是根据设计场景而选择使用的,一般在两种场景中:
① 特定状态,比如空状态中插画与文字相结合,地图标志等都是使用居中对齐的形式
② 特定组件,对于步骤条或者加载等特殊组件,一般也使用居中对齐
三、表格场景对齐方式 表单在 B 端设计中是非常常见的一种设计方式,表单中三种对齐方式都存在,目前有以下区分:
1. 常规字段左对齐
在默认情况下基本都按照左对齐来进行排列,因为大部分表格字段都是非固定的,左对齐能够让整体有一个比较良好的展示效果。
2. 固定短字段居中对齐
居中对齐一般针对固定长度类型的数据,比如我们常见的性别、状态和楼层等。采用居中对齐能够很好的和表头进行对齐,视觉上更舒适。
3. 金融数字右对齐
而右对齐则一般针对金融类,比如价格等数字,因为数字采用右对齐能够更好地进行价格的比较。
在这里要注意,使用数字时最好使用等宽的数字,第一是为了避免因为数字不同的宽度而不太整齐,第二则是为了更好地进行金额等的对比。
比如 DIN 字体、微软雅黑、思源黑体都属于等宽字体,而我们常见的苹方字体则为非等宽。
四、表单场景对齐方式 在录入场景中,一般分为标题和内容两个字段进行展示,因此这两种字段可以组合成以下几种对齐方式:标题左对齐、标题右对齐、整体左对齐、顶对齐。
那么这几种到底有什么区别呢,我们接着往下看
1. 标题左对齐
这是一种目前在很多 B 端产品中比较常见的对齐方式。
优势:视觉上看着非常整齐,纵向浏览标题也会更容易,美观度相对会更高;
劣势:左侧区域会固定宽度,对于较短标题字段会与标题隔得较开,对于整体信息获取效率降低。但因此也可以让用户在录入时更加谨慎。
比如在神策或者 coding 等很多产品的配置场景中,基本采用左对齐的方式进行配置。
2. 标题右对齐
这种对齐方式牺牲了视觉对齐,换来了标签和内容的间距一致,让其亲密性更强,从操作效率上来讲会得到一定的提高。比如在钉钉的新版后台中,基本采用了此种对齐方式。
优势:标签和内容距离更近,信息获取和操作效率更高;
劣势:牺牲了一定的视觉美观度,并且如果出现过长的字段,左对齐的折行的体验会非常不好;
我们在使用此类对齐方式时对于标题的字数有一个合理的限制。
3. 整体左对齐
这种方式就是标题与内容进行贴合设计,整体左对齐。
优势:标签和内容距离更近,且整体会呈现左对齐,视觉效果也相对较好
劣势:内容区域纵向看不会对齐,对于内容区域的整体识别会相对较弱。
运用此方式的场景大部分在多列字段的设计场景中,因为相较于前两种方式来讲,多列字段(2 列及以上)同步呈现时,该类方式会让整体表单显得更紧凑与合理。
但从目前市场上的竞品来看,运用此类排列方式的场景比较少,仅有少部分在展示字段时运用了此种方式。
猜测有 2 点原因:
大部分情况下表单类都采用单列排列,因此使用场景较少 该种排列方式不太适用于编辑状态,会造成呈现状态与编辑状态切换上呈现上有差异。 所以某些配置场景为了让编辑也保持一致性,会放弃上述的对齐方式改为标题右对齐,比如 acro design 的设计案例:
虽然目前应用得不多,但我们在平日的运用中,也需要留意此种应用场景。
4. 顶对齐
这种相对于是另外一种方式,这种方式降低了对页面宽度的要求,提供了更多的横向空间。从用并且目前很多产品已经在各个功能模块运用顶对齐来记性录入:
优势:不仅提升了用户获取信息的效率,据研究发现只要 50ms。同时标题的拓展性更强了,能够容纳更长的标题
劣势:从布局上来看是牺牲了一定的纵向利用空间的,对于在设计场景中纵向空间较少的需要考虑使用。
目前国外产品和国内录入场景顶对齐用的也比较多。
5. 如何选择
那么我们在进行表单设计时如何选择呢,这就需要根据我们的实际情况了。
从信息获取效率来讲,顶对齐最快(50ms),标题右对齐其次(240ms),左对齐最慢(500ms)。 从视觉和阅读观感上来讲,标题左对齐和整体左对齐的视觉表达会更好; 因此我们需要考虑当前页面的使用场景:
① 更偏向于录入场景的话,且横向空间充足,选择标题右对齐,否则顶对齐。
② 更偏向于阅读或浏览的话,选择标题左对齐或整体左对齐。而这两者的细致场景区分,需要考虑当前场景标题字段的差异性:
如果标题字段都比较接近,选择标题左对齐; 如果标题字段相差比较大,尤其是字段需要配置的场景,那么可以选择整体左对齐。比如我举一个例子你就明白了:
当标题差异过大的时候,标题左对齐会让某些标题与内容间隔特别长,阅读体验就会降低很多。
通过这样的场景和使用分析,我们就能够更加清晰地使用各类对齐方式,来让我们整体的使用体验更好。那么看到这里,你有掌握关于 B 端对齐的全部细节吗?
欢迎关注作者微信公众号:「阿东的设计体验馆」
-
B端对齐如何设计?我总结了这3种常用场景!
UI交互 2022-09-28B端设计中如何做好对齐设计?本文总结了通用场景、表格场景和表单3种常见场景的设计选择和取舍。明明对齐了,为什么界面还是不好看?B端设计 中如何做好 对齐 设计?本文总结了通用场景、表格场景和表单3种常见场景的设计选择和取舍。
明明对齐了,为什么界面还是不好看? 版式设计关注的是设计中文字和图像的位置关系。
阅读文章 >
关于对齐,大部分 设计师 可能会觉得非常简单,不就是那几种对齐方式嘛,难道还有很复杂的操作?深入研究才发现,B 端对齐还真没你想象的那么简单。如果不信,请接着往下看。
一、对齐的含义 对齐,顾名思义就是将文字或图片等信息以某种对齐规则进行排列。我们常用的对齐规则分为三类,即:左对齐、右对齐、居中对齐。
二、通用场景对齐方式 1. 左对齐简述
左对齐是最为常见的场景,因为它符合人们的阅读动线——从左到右进行阅读。在大部分的设计场景中都可以运用左对齐。比如我们常见的工作台卡片、导航栏等都可以使用左对齐。
在使用左对齐时,不仅需要考虑物理对齐,在特定场景下需要考虑视觉对齐:比如在对于图标和文字混排时,记得文字跟文字对齐,视觉效果会更加整齐。(因为格式塔原理,人们对于类似的东西会将其看做同一类,而同一类对齐视觉上会舒适)
如何在产品设计中应用格式塔原理?用超多案例告诉你! 大家都有过这种经历吗,当我们抬头看云朵的时候,经常会将不同的云朵联想到不同的事物或者动物。
阅读文章 >
2. 右对齐简述
右对齐可能在很多时候运用得比较少,在普通设计场景的右对齐用来填补设计中右侧的视觉空缺,比如以下两种应用场景:
① 内容或者辅助信心使用右对齐
② 操作类的右对齐,比如移动端表单或者 web 端操作。
3. 居中对齐简述
居中对齐则一般是根据设计场景而选择使用的,一般在两种场景中:
① 特定状态,比如空状态中插画与文字相结合,地图标志等都是使用居中对齐的形式
② 特定组件,对于步骤条或者加载等特殊组件,一般也使用居中对齐
三、表格场景对齐方式 表单在 B 端设计中是非常常见的一种设计方式,表单中三种对齐方式都存在,目前有以下区分:
1. 常规字段左对齐
在默认情况下基本都按照左对齐来进行排列,因为大部分表格字段都是非固定的,左对齐能够让整体有一个比较良好的展示效果。
2. 固定短字段居中对齐
居中对齐一般针对固定长度类型的数据,比如我们常见的性别、状态和楼层等。采用居中对齐能够很好的和表头进行对齐,视觉上更舒适。
3. 金融数字右对齐
而右对齐则一般针对金融类,比如价格等数字,因为数字采用右对齐能够更好地进行价格的比较。
在这里要注意,使用数字时最好使用等宽的数字,第一是为了避免因为数字不同的宽度而不太整齐,第二则是为了更好地进行金额等的对比。
比如 DIN 字体、微软雅黑、思源黑体都属于等宽字体,而我们常见的苹方字体则为非等宽。
四、表单场景对齐方式 在录入场景中,一般分为标题和内容两个字段进行展示,因此这两种字段可以组合成以下几种对齐方式:标题左对齐、标题右对齐、整体左对齐、顶对齐。
那么这几种到底有什么区别呢,我们接着往下看
1. 标题左对齐
这是一种目前在很多 B 端产品中比较常见的对齐方式。
优势:视觉上看着非常整齐,纵向浏览标题也会更容易,美观度相对会更高;
劣势:左侧区域会固定宽度,对于较短标题字段会与标题隔得较开,对于整体信息获取效率降低。但因此也可以让用户在录入时更加谨慎。
比如在神策或者 coding 等很多产品的配置场景中,基本采用左对齐的方式进行配置。
2. 标题右对齐
这种对齐方式牺牲了视觉对齐,换来了标签和内容的间距一致,让其亲密性更强,从操作效率上来讲会得到一定的提高。比如在钉钉的新版后台中,基本采用了此种对齐方式。
优势:标签和内容距离更近,信息获取和操作效率更高;
劣势:牺牲了一定的视觉美观度,并且如果出现过长的字段,左对齐的折行的体验会非常不好;
我们在使用此类对齐方式时对于标题的字数有一个合理的限制。
3. 整体左对齐
这种方式就是标题与内容进行贴合设计,整体左对齐。
优势:标签和内容距离更近,且整体会呈现左对齐,视觉效果也相对较好
劣势:内容区域纵向看不会对齐,对于内容区域的整体识别会相对较弱。
运用此方式的场景大部分在多列字段的设计场景中,因为相较于前两种方式来讲,多列字段(2 列及以上)同步呈现时,该类方式会让整体表单显得更紧凑与合理。
但从目前市场上的竞品来看,运用此类排列方式的场景比较少,仅有少部分在展示字段时运用了此种方式。
猜测有 2 点原因:
大部分情况下表单类都采用单列排列,因此使用场景较少 该种排列方式不太适用于编辑状态,会造成呈现状态与编辑状态切换上呈现上有差异。 所以某些配置场景为了让编辑也保持一致性,会放弃上述的对齐方式改为标题右对齐,比如 acro design 的设计案例:
虽然目前应用得不多,但我们在平日的运用中,也需要留意此种应用场景。
4. 顶对齐
这种相对于是另外一种方式,这种方式降低了对页面宽度的要求,提供了更多的横向空间。从用并且目前很多产品已经在各个功能模块运用顶对齐来记性录入:
优势:不仅提升了用户获取信息的效率,据研究发现只要 50ms。同时标题的拓展性更强了,能够容纳更长的标题
劣势:从布局上来看是牺牲了一定的纵向利用空间的,对于在设计场景中纵向空间较少的需要考虑使用。
目前国外产品和国内录入场景顶对齐用的也比较多。
5. 如何选择
那么我们在进行表单设计时如何选择呢,这就需要根据我们的实际情况了。
从信息获取效率来讲,顶对齐最快(50ms),标题右对齐其次(240ms),左对齐最慢(500ms)。 从视觉和阅读观感上来讲,标题左对齐和整体左对齐的视觉表达会更好; 因此我们需要考虑当前页面的使用场景:
① 更偏向于录入场景的话,且横向空间充足,选择标题右对齐,否则顶对齐。
② 更偏向于阅读或浏览的话,选择标题左对齐或整体左对齐。而这两者的细致场景区分,需要考虑当前场景标题字段的差异性:
如果标题字段都比较接近,选择标题左对齐; 如果标题字段相差比较大,尤其是字段需要配置的场景,那么可以选择整体左对齐。比如我举一个例子你就明白了:
当标题差异过大的时候,标题左对齐会让某些标题与内容间隔特别长,阅读体验就会降低很多。
通过这样的场景和使用分析,我们就能够更加清晰地使用各类对齐方式,来让我们整体的使用体验更好。那么看到这里,你有掌握关于 B 端对齐的全部细节吗?
欢迎关注作者微信公众号:「阿东的设计体验馆」
-
如何体现B端产品的设计价值?我总结了3个方面!
UI交互 2022-09-27B端设计师如何体现自己的价值?本文总结了3个方面。如何设计高质量B端调研问卷?B端 设计师 如何体现自己的价值?本文总结了3个方面。
如何设计高质量B端调研问卷?高手总结了8个步骤(附模板下载) 编者按:B端设计的调研问卷该如何设计?
阅读文章 >
最近在不停的面试过程中发现,对于大多数面试者而言,在只能选择一个作品作为重点介绍的时候,大多都会选择 C 端的产品来向我展示他/她的设计能力,这不禁让我想到,B 端作品就那么不香么?
这其实也是一个经常被讨论的问题,对于 B 端产品,界面设计的价值到底在哪里?
B 端的 B 是 Bussiness 的简称,顾名思义,B 端产品是指面向企业侧进行售卖的产品,它往往是为了帮助一整个具有职业特点的用户群体,完成特定工作任务的产品,产品最大的卖点是降本增效。另外,并不是只有 Web 平台才是 B 端产品的展示舞台,它也可能和 C 端产品一样,可能会在不同的硬件终端出现。
相对于 C 端来说,B 端产品有 2 个和界面设计有关的主要特点:
第一点:交互逻辑较复杂,对应多个用户角色。
和 C 端面对普通大众,一般用户而言,B 端产品要设计得好,需要了解产品对应行业的基本业务知识,这造成了它在交互设计上面本身就会比 C 端产品多一个门槛。
另外,B 端产品由于对应多个角色,很可能会涉及到不同终端的交互,和 C 端的多终端不一样,B 端产品的每个终端产品的主要作用都不太一样,比如 Web 端完成任务的配置,移动端完成任务的执行。而 C 端即使存在多个终端,但起到的作用都是一样的。比如微信有手机应用也有 PC 应用,但它们对我们的作用都是一样的。
B 端的交互逻辑一般来说相对于 C 端来说更加复杂,而且可能涉及到多终端交互。它的多终端交互和 C 端的多个终端不一样,B 端的多终端,可能每个终端的主要作用都不太一样,比如 PC 端完成任务配置,客户端完成任务执行。
第二点:界面数量较多,一般以组件化搭建。
B 端尤其是占比最大的 WEB 平台类产品通常都有非常多数量的界面,研发大多会基于一些开源框架来快速完成产品开发,对应的,也有很多成熟的设计组件可以供设计师使用。虽然这些组件资源大大的降低了设计师的工作时间,但其实它降低的只是设计师的实施时间,而考验的,则是设计师更底层的组件化思维能力。
比如是否能将数量庞大的界面归纳为为数不多的组件,以此来对应各种类型的功能,你也需要对于每个组件的适用情况有所了解,因为现有的组件资源已经提供了非常多的可能性,你需要快速平衡功能的目标、用户的体验和研发的成本等,概括起来,B 端的复杂来源于用户心智、机器认知和整合心智三种设计维度的整合。
当这些维度整合起来,就会在表象上呈现出界面设计并不重要的假象,但只是难度被转移到了更深的层次,体验的价值全部由其他职业的角色所承担了而已。
也就是说,如果 B 端的界面设计师无法掌控底层的设计思维,那么就很容易边缘化,也难以体现出自己的价值。
针对这两个设计特点,B 端产品,在谈论界面的设计价值时,可以从这三个点聊起:
第一:界面的交互逻辑和结构,与业务和角色的清晰对应。
B 端产品界面流程应该能体现出该角色的工作流程,也就是说,可以借界面讲故事,使用用户角色的工作故事来描述和展示你的界面交互。设计的第一个价值就体现在故事的条理之中,有条,是有秩序可循,从动态和静态两个角度而来;有理,是可以被理解,从用户心智和机器的礼仪两个层次而来。
第二:界面呈现的组件化思维。
如果说第一条价值体现在交互设计上,那么第二条就更多体现在 UI 设计的价值上了。设计师需要将市面上公开的、通用的组件按照业务进行实例化。举个例子,模态弹窗在当前 B 端产品里有几个大小、几个组合形式就可以满足业务需求及交互定义,基本的使用规则是什么?
这考验的是 UI 设计师的结构化思维、系统思维和设计技能的综合运用。
第三:抓住用户角色中的”老板“角色。
B 端设计难以体现出设计价值的真正问题可能是 B 端设计中能够展现出设计技巧,可以形成视觉印象点的创意性设计比较少,但是,这并不是一定的。
大多数情况下,B 端设计都会面对多个用户角色,而这些用户角色在公司里是有层级之分的,也就是说,B 端产品的用户群体里,有企业身份带来的职位高低。
体验上只要没有太过分的问题,普通操作员的吐槽并不能左右合同的签订和对 B 端产品的购买。但是,老板型的角色使用的界面,就不一样了。比如对于他们要”看数据“的界面,就必须高大上起来,也是适合设计师炫技的地方(别炫飘了就行)。
总的来说, 设计价值 难以体现并不是 B 端产品本身的问题,而是要在 B 端产品中体现出设计的价值,就需要要求设计师具有更高维度的思维能力和综合能力,不然,就很容易沦为无足轻重的美工。
总结一下:
B 端产品服务用户群体,完成特定工作任务,它并不是只指 Web 平台类的产品。 B 端产品和界面设计有关的 2 个设计特点:①逻辑复杂,用户角色多;② 界面数量多,需要组件化搭建 B 端 产品设计 价值从三方面体现:①交互逻辑与结构和业务与角色的清晰对应;②界面呈现的组件化思维;③抓住用户角色中的”老板“角色,炫出技来。 欢迎关注作者微信公众号:「林间有影落」
-
UI设计中9个常用的控件规范,这篇都梳理好了!
UI交互 2022-09-27UI设计中常见的控件设计都有哪些规范?本文总结了按钮、多选、单选、切换、文本输入框、下拉选择、列表框、下拉按钮、滑块9个控件的设计规范。如何选择筛选控件?UI设计 中常见的 控件设计 都有哪些规范?本文总结了按钮、多选、单选、切换、文本输入框、下拉选择、列表框、下拉按钮、滑块9个控件的设计规范。
如何选择筛选控件?5000字+3个落地案例详细拆解 这篇文章又是小 5000 字,提供一些关于筛选控件选择的解决思路,同时辅助三个实际案例帮助理解。
阅读文章 >
我们在设计 UI 界面的时候,有一些控件几乎总是会用到。用户熟悉了它们的交互模式,也因此建立了心智模型,很清楚如何通过这些控件帮助他们达成目标。
所以作为设计师,我们必须清楚这些常用 UI 控件元素的设计规范,本文偏基础,但建议你查漏补缺。
我们需要关注的输入控件包括以下这几个:
按钮 多选 单选 切换 文本输入框 下拉选择 列表框 下拉按钮 滑块 一、按钮 按钮向用户隐喻当他们按下/点击时将触发一个操作。
1. 最佳规范 ① 按钮结构
当我们设计一个按钮时,我们需要考虑多个组成要素:圆角、内间距、投影(可能有)、填充(纯色或渐变)、文字。所有这些要素组成在一起形成一个有效传达的按钮控件,向用户发生正确的交互信息。
② 按钮圆角
圆角越大,按钮越具有亲和力。但也要记住,人眼往往不喜欢非常锋利的物体,所以通常不大建议用圆角为 0 的按钮样式。建议最小也要用到 3px 的圆角。
③ 内边距
内边距能够扩大按钮的可点击范围,帮助用户更容易点击按钮。一个好的设计经验是把按钮的水平内边距设计成垂直内边距的 2 倍。当然,你也可以根据你设计的实际情况做适当调整,规矩不是死的。
④ 投影
我们使用投影来表明特定的状态。按钮必须看起来是在页面的最上方,所以保持平滑的投影并且使用柔和的颜色。建议使用与按钮接近的颜色然后降低透明度,这样会使得你的投影看起来更加自然。
按钮的投影使用和按钮一样的色值
⑤ 填充
无论我们使用纯色还是渐变色,我们都希望确保按钮对用户来说是便于理解的。另外,为按钮选择的颜色必须反馈相匹配的颜色。比如当你设计一个红色的保存按钮时,会让用户犹豫能不能点。
⑥ 文字
与颜色类似,你也希望用到的文本内容能够确保用户易于阅读。在一个按钮上使用最长不超过 5 个单词(重要按钮使用 1-3 个单词)。
⑦ 操作
按钮可以根据交互时执行的操作类型来进行分类,分为 3 类:
主要按钮 次要按钮 第三次要按钮
⑧ 状态
也可以从另一个方面来考虑按钮的设计样式。最主要的按钮状态包括以下这 6 种:
默认态 点击态 焦点态 不可点击态 活动态 等待态
二、复选框 复选框控件是指用户可以在一个列表中能同时选择多个选项。
最佳规范
① 当你在复选控件中有非常多的选项时,给这些选项分组是一个很好的分类方法。
② 虽然可能已经为用户创建了复选框时勾选多个选项的模式,但选项题目上准确显示可多选对用户的实际选择也很有用。比如举个例子,在一个复选题中,如果我们问“你喜欢哪些书?”而不问“你喜欢哪本书?”,得到的答案很可能是完全不同的,这是因为我们知道用户很可能会多选。
③ 通过允许用户点击标签本身来检查选项来增加可用性。
三、单选按钮 复选框是告诉用户这个列表中有多个选项可以选择,而单选按钮则告诉用户只能选择一个选项。
最佳规范
① 类似于复选框,如果你有一个长长的选项列表的话,记得把它们进行分组,这样让用户更容易选择。
② 提供一个默认选项。用户可以自行选择其他选项,但如果这个默认选项就是用户所希望的,就可以替他省事了。
③ 增加单选框可用性的方法是让用户能够在点击这个选项标签时就能选中(扩大点击范围)。
四、切换控件 通常被用在开关选项中,让用户可以轻松地选择这 2 个选项。
最佳规范
① 切换按钮一般都有一个默认值。用户可以决定是否需要改变切换状态。
② 当用户与切换按钮交互时,对于结果的影响应该是立即生效的,而不必点击保存。
五、输入框 简单说,输入框就是让用户能够输入文字。虽然设计样式可能不同,但它们都应该显示一个标签。
最佳规范
① 始终显示标签,这样用户随时都能知道填了什么选项。如果仅仅在输入框中显示标签,那么当用户输入时,这个标签会被隐藏。所以,在输入框外使用要有一个标签提示。
② 保持标签简洁且有代表性。
③ 显示提示语,确保文本内容能够让用户填写正确的信息。
六、下拉列表 类似于单选按钮,下拉列表仅允许用户在同一个时间只能选择一个选项。事实上,它们是可扩展的,本质上就是一个紧凑型的单选按钮。
最佳规范
因为它们本质上是一个紧凑型的单选按钮,所以当不是真正必要的时候,展开选择或许更快,尽量避免使用。
七、下拉复选框 类似于复选框,它也允许用户同时选择多个选项。
最佳规范
如果你有一个长的列表选项,记得给它们分组便于用户更容易选择。
八、下拉按钮 本质上,下拉按钮是由一个按钮组成,当单击下拉按钮时,将显示不同的列表内容。
最佳规范
① 记得给选项增加悬停效果,以显示用户可以通过单击导航到另一个页面。
② 在按钮的右侧加上一个单独的图标,告诉用户它还有隐藏的下拉菜单。
九、滑块 滑块允许用户更改或设置一个值
最佳规范
① 只在需要的时候使用滑块,当范围对用户来说比精确值更重要的时候。
② 注意控件点击范围,确保用户可以更容易的选择不同的值。
总结 以上提到的这些控件,在我们日常设计工作中常常会被用到,希望你能了解这些正确使用的规范和指导原则,以便为用户带来最大价值。
欢迎关注作者的微信公众号:「彩云译设计」