首页

如何又快又好地设计B端表单?先学会这些表单设计样式

seo达人


基础表单 

平铺所有需要填写的信息,适合内容项较少、内容项无法按照相关性分组的表单。

图片

 

分组表单 

单次任务的表单页中需要填写内容众多,且不同内容之中存在一定可分类归纳性。

 

1) 标题分组

表单项较多(超过了7个设置项)的情况下建议分组,分组标题能够引导用户完成表单填写。但分组内设置项要有强关联性,否则不能归为一组,不能因为字段多为了分组去分组。

图片

 

2) 卡片分组

7-15个设置项,用标题分组不足以给信息做层级区分,为了让用户在操作时更聚焦,同时也需要给用户更明确的操作引导,即可使用卡片分组。

卡片分组之间关联性更弱,分类更明确,多个设置项,多个分类。

图片

 

3) 基础分步表单

如果每个组之间有逻辑先后顺序,那么推荐使用分步表单,利用步骤条告知用户完整流程和进度。

通常在最后提交前让用户再次确认信息,并在流程结束给与明确的结果反馈。适用于具有明确的线性逻辑的任务和用户在操作完成后就不再参与的复杂表单。

图片

 

4) 标签分组式表单

如果每个组既没有逻辑先后顺序,也没有关联性时,推荐使用标签分组,适用于表单内容过多,为减少加载时间将表单分页展现的情况。

图片

 

高级表单 

1) 动态增减

建议条目表单数≤3项,并且每个输入框不需要单独的标题使用。

图片

 

2) 可编辑表格

建议条目表单数2~5项时使用,以使得每行内容可被完整呈现。

图片

 

3) 折叠面板编辑

建议条目表单数在6~8项时使用。

图片

 

4) 规则树

应用于规则编辑场景。适用于页面中需要添加一个或多个对象,且每个对象都需要添加或编辑多组数据的情况。

图片

 

5) 语句式表单

让用户在预设的结构来完成语句,常用于设置、编辑规则类表单,表单读起来更友好更人性化。

图片

 

最后 

希望通过前两部分表单内容的学习,能让大伙对B端表单有一个初步的认识和理解。

在表单设计的第部分,将会为大伙分享实操性的方法来提升表单体验,并能够运用到实际工作中。

如果想学习更多关于「B端表单设计」的内容,记得及时关注接下来的文章推送。

慢慢来比较快,如觉得有帮助,请关注公众号,点个赞&在看,谢谢!

 

原文地址:Clip设计夹(公众号)

作者:Cassie

转载请注明:学UI网》如何又快又好地设计B端表单?先学会这些表单设计样式

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

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

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

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

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




你的拟人化LOGO真的应该再有趣一点

seo达人

咕噜噜

 

图片

 

 

昨天晚上又梦到出去旅行了,是的,作为一名底层设计师,这已经是我连续工作的第 29 天,没办法,在如今这个内卷严重的时代,想要吃得饱,吃得香,总是需要舍掉一些类似于毛发的东西。
如果不出意外,今天又是上班的一天,日复一日,再复一日,不知休息为何物。正当我打开电脑准备开干的时候,手机收到一条消息。  
 

图片

 

 

不知道你们 tu 没 tu,反正我是 too 了,虽然略微恶心,但是这突如其来的幸福感还是填满了我的身体。我想做点儿什么事情来庆祝一下,思考了一阵子,我慌了,因为我不知道该干啥了……长期的做图已经填满了我的生活,好的,不挣扎了,我们做个 logo 庆祝一下吧……
由于此刻我的心中只有给我发消息的猴子哥哥和他带给我的满满幸福感,所以我们就做个猴子比心的 logo 吧,话不多说,开整!  
 
图片  
 
我们先去网上找一堆猴子的卡通形象参考,目的不是为了直接抄他们的,而是看一下猴子的形象特征是什么。  
 
图片  
 
 
我们可以看到猴子的基本特征就是脸部的两个圈圈组成的一个类似于屁股的造型,我们先提取出来最基本的造型,正好这个造型可以由心形替代,我们优化一下。 
 
图片 
然后我们去网上找一下比心的常规动作,好像应该差不多就下面两种,我们选择左边肢体动作更丰富的。
图片
好了,我们把刚才我们画好的头部直接安到我们找的这个图片上,直接图形化出来!我们尽量处理的几何化一些,这样图形感更强烈。
图片 
 
动态画好之后还缺少面部表情,我去私聊猴子哥哥他昨天晚上过的怎么样,他扔给了我一个非常隐晦的表情包,好吧,就他了。同理表情的处理也不要过于复杂,能用图形代替的就用图形代替。
图片
画到这里肯定是还差点意思的,有很多地方都缺点儿东西,比如下面部分切割的太生硬,身体部分空间太大,缺少一些点睛之笔,我灵光一闪,突然想到他为什么给我发那个表情,好的,有床,有制服,安排! 
图片
像这些辅助小元素肯定不能画的太具体,否则会影响整体的形象,所以我们把床简化成了一个椭圆,制服的话直接简化成一个小领结点缀一下即可,加上排版,我们看下成品。
图片
发给猴子哥哥看了之后他很满意,也很开心,但是同时提醒我别再做图了,那么好吧,我试试离开电脑……  
 
 
图片 
 
挣扎了一会儿,准备起床收拾一下屋子,但是真的是太乱了,衣服、袜子、碎发、卫生纸群魔乱舞,无从下手……没办法,我太懒了,最终还是决定叫一个家政服务来帮我收拾一下,等待的时候突然想起了最近在回看的哈利波特,里面每户魔法家庭都会有一个小精灵帮忙打理家事。  
 
 
图片  
 
我相信每一个设计师都有一个巫师梦……算了,这辈子是不能拥有了,我们就用小精灵拟人化一个家政服务形象来做一个 logo 吧…… 
图片
我们找到多比小精灵的高清无码照片,先看一下他的特征点是什么。 
 
图片  
 
 
我们可以看到他的最强烈的特征点就是大大的耳朵,只要把耳朵画的大,再搭配一个好看的脸型,小精灵的形象就出来了,我们先按照图里的基本形象画出来,然后注意不要完全和你的参考一摸一样,否则很容易就会陷进去。 
 
看下面的图,我们甚至改变了耳朵的走势,但仍然没有丢失小精灵的基本形象。 
 
图片 
 
确定了头部基本形象之后,我们就可以对他进行拟人化动作提炼了,前面我们拟定的方向是家政服务,但是我找了很多扫地的图片,动态都非常普通,画出来肯定效果不好,于是我们转换思路,只要有扫帚的话,不一定非得是扫地吧? 
 
脑子不知道为什么不自觉地闪现出陈学冬「哈利波特骑着扫帚飞」,行~那就让我们的小精灵像哈利一样骑着扫帚吧。 
 
图片 
 
找到比较合适的参考之后,我们用头部替换大法,按照参考把基本的动态画出来,由于这个动态比较有标志性,我们最好不要画的和他一摸一样,否则很容易被说抄袭,我们可以更改一下方向,然后不骑着扫帚,拿着就行,顺便把上面的手比个耶。
图片 
 
OK,基本的形态画好了,我们找一个大眼睛的开心表情给他加上!
图片  
 
 
画到这里我们可以看到,虽然整体是挺好看的,但是和我们拟定的家政服务行业好像并没有什么关系……
没关系,我们用空间弥补大法,将空间不合理的地方添加一些简单的行业相关元素。 
图片 
 
有了这些点睛的小装饰,也就有了家政服务的感觉,ok,定稿,看一下成品。
图片
这时候,家政小姐姐来了,我把这个 logo 给她看,说你看我画的你可不可爱,她看了看我,又看了看手里的扫把,问我:家里有刀吗?  
 
 
图片  
 
一番折腾之后,终于出门了,路过了一家银行,门口写着存定期送 iPhone13,好家伙,这便宜能不占?我自信满满的拿出我的 8 看了看微信余额,嗯,手机一点儿也不卡……  
 
 
图片  
 
 
里面的银行接待员看我过门而不入,热情的告诉我现在存定期可以换 13 啊!我说我知道啊,我不缺手机啊……扎了一万个心,害,这时候我特想拥有一只嗅嗅(来自电影神奇动物,它会把一切闪闪发光的金银珠宝装进自己的口袋里然后然后带给你……发家致富小能手呢!) 
 
图片  
 
 
他看我眼神发光有点冒口水,再次问我真的不来拿个手机吗……没办法,太热情了,进去看看吧。叫了号之后慢慢的等待,闭眼一思,嗅嗅对我那么好,我要给他画个 logo!
图片
和之前一样,我们还是先观察一下嗅嗅的基本形象特征。    
 
图片  
 
 
大脑袋,鸭子一样的长嘴以及毛茸茸的身体,ok,我们按照之前的思路画一下。 
 
图片 
 
面部定好之后我们接着给他找动态,我们观察一下银行里面标准服务礼仪姿势,相比较右边比较正式的姿势,左边伸出一个手服务的动态更生动形象。
图片
定好动态,我们就把头安到里面,然后画一下大概的姿势,接着进行优化,注意最好画的圆圆可爱一下,否则丢失了卡通 logo 的特点。
图片 
 
和之前一样,我们针对于空间较为空旷的身体部分加入行业特征,给嗅嗅穿个小衬衫。
图片  
 
 
我们需要注意的是画行业特征部分的时候也要结合 logo 整体的感觉来刻画,像衬衫的领口一般都是比较坚硬立体的,我们也可以处理的圆滑一些。
图片
好了,终于到我的号了,银行柜员热情的问我要存多少钱,我决定反将一军:你看我这个 logo 值多少钱… 
 
 
图片  
 
不瞒各位,作为一个资深五迷老师,一直以来就有一个摇滚文艺青年的梦想,咱就是说也就是设计方面的才华实在太过于突出,要不然早就摇……饿死了。
好的,虽然梦想很丰满现实很骨感,但是吉他班是没少报,正好今天有时间,就去上一下吉他课吧!  
 
 
图片  
 
 
事实证明这一块的饭确实不好吃,虽然我比较笨,但是老师还是经常鼓励我:你要是能学会,猪都能上树哦!哇你这弹的,真的和猪一样!这么长时间了,就算你是头猪,也应该会了吧! 
……
好吧,你可以骂我,但是你不能骂猪啊,既然这样,那就做一个猪弹吉他的 logo,让他知道什么天外有猪! 
 
图片 
 
设计思路和之前的一样,就不过多啰嗦了,老方法,先去找一些猪的形象参考。
图片 
 
然后根据你自己的喜欢去改变他的造型,只要不影响识别性就好。 
 
图片 
 
猪猪画好之后,我们去找弹吉他的姿势参考。
图片 
 
根据参考我们先把头按上,然后画出基本的身体走势,可以稍微改变一下参考的方向,做的更有趣味一些。
图片 
 
画好之后我们再去填补一下不太舒服的地方,该删减的删减,该增加的增加,甚至可以给他加一个小星星,代表摇滚巨星。 
 
图片  
 
 
画到这里看似可以了,但其实还是可以有优化的地方,俗话说,没有舞台就没有巨星,我们给图形增加一个浅色圆形背景,使形象更整体更生动,这里可以把猪的部分五官突出出来,不至于太呆板。 
 
图片
图片 
 
 
我拿着这个 logo 去给吉他老师看:“这个 logo 就送你了,以后你拿着他告诉大家,我们吉他社,就算是猪,也可以学会!”老师觉得很有道理,高兴之余就把我的学费免了!
你看,还是做设计香吧,什么梦想不梦想,有饭吃才是王道呀……  
 
 
 
 
图片  
 
 
这一天整的,光做图了……不行不行,得搞点儿娱乐项目啊!来,掏出手机,把朋友们约出来搞几盘狼人杀!
图片 
 
不得不讲这个游戏真的太费朋友了,玩的太次不行,没两下游戏就结束了,大家会骂你是个坑比,玩的太好也不行,大家说没看出来你小子原来心机这么重……被搞了几局心态之后,我决定还是回到自己的舒适区,做个 logo 吧……
你看,别说你没有思路,或许你此刻正在干的事情就可以作为一个方向呢? 
 
图片 
 
这个游戏的精髓就是狼人的反复横跳和伪装,那我们的思路就是以狼为基本形象,给他做一个反复横跳的动态,再加一个人的面具,可以可以,老方法,先找一波参考。 
图片 
 
然后我们根据参考找到狼的基本特征,把脸部画出来,并给他套上一个面具,wow,人性的阴暗面起来了呢。 
图片  
 
 
好了,我们来找一下反复横跳的动作,说是反复横跳,其实就是跳跃就好啦,我们找一个不是特别夸张但肢体还算丰富的图片。
图片 
 
参考垫底,把头安上,画出基本动态,然后就是根据这个动态走势将狼的身体部分画出来。
图片
光是这样肯定还是不够的,手单纯的这样举起略显痴呆,既然是带有悬疑感的游戏,我们就让他拿个放大镜吧,正好把空间填补下。 
图片 
 
好像是可以了,但是能不能再丰富一下呢,让他更贴近狼人杀这种年轻人群体的卡牌类游戏的感觉,我们再根据一些空间可以填补的地方,增加一些细节。
图片 
填补完空间之后可以看到,虽然没加动效,但是整个 logo 感觉动起来了,反复横跳的感觉也有了,这就是填补空间的魅力吗!
其实这些操作目的就是为了使图形更整体的同时更贴近我们所设定的行业。
图片 
 
不知道为什么,这个 logo 画完之后,大家觉得我心机更重了……  
 
 
 
图片 
 
累了一天,终于到深夜了。相信大家都已经马上准备睡觉了吧,太好了,我终于可以开始看书学习了。

 

好吧,确实是有点装 13 了,要是真能看进去,那至于现在还在干底层设计吗!真的,这个社会诱惑太多了,现在还能坚持每天看书的真的都是怪物吧,嗯?怪物看书?
wc?!为什么灵感又来了呢……那就做吧……
图片
设计步骤和之前讲到的案例都是一样的,我们不多说,直接开整,这次我们不先画脑袋了,直接把参考拼凑在一起,然后画一个草图。
这里我们尝试用正负形的方法去设计,具体设计方法可以去回看之前的正负形教程。 
 
图片
有了草稿就更好说了,我们直接标准化制图出来就好啦~
图片
我们在画毛发的时候一定要注意它的一个走势节奏感,而且不要画的太多,切记它只是一个点缀。
图片
果然还是做设计带来的满足感令人舒适呀,比看书什么的容易多了,好了好了,可以准备入睡了! 
   
 
图片 
 
如果你想问不是睡觉了吗怎么还有案例,那你就忽略了作为一个设计师最终的归宿是什么了,你的客户会让你这么轻易的就结束这一天吗?
这不……他来了……
相信大家并不会产生同情心,因为基本上每个设计师都经历过吧……没办法,上帝发话了,除了起来接着肝,还有什么办法呢?
带着一万个不情愿的情绪,2个小时后,终于搞完了,然后…… 
 
 
????????????????????
在电脑前静静地发呆了 5 分钟后,我冷静下来了,作为一个设计师,这件事情不是很正常吗?忘记保存很丢人吗?啊?好像是挺丢人的……理性地讲,遇到这种事不要怪你的软件和电脑,只能怪你自己。
好吧,事情已经发生了,不如看的开一些,化悲痛为灵感,我们常把自己比作设计狮,就做一个狮子爱做设计的拟人化吧…… 
 
图片 
 
我们按照前面讲到的设计步骤找一些狮子的卡通形象参考,然后用几何化的形式给他画出来。 
 
图片  
 
 
那怎么能表现出爱做设计呢?一般容易传递出爱的动态就是拥抱了!我们把 PS 拿过来,简单的给他画一个拥抱的动作(下图左)但是这样单纯的抱着它似乎并不能体现出我们对于设计的热爱之情,不如我们把脚也画上,四肢都抱着它,这个姿势(下图右),就挺舒服! 
 
图片 
 
ok,我们把它图形画出来。
图片 
 
又到了填补空间的时候了,我们如果把 PS 放上去,那似乎又对 AI 不公平了,我们应该雨露均沾,既然实在选不出要放啥,那就放个问号吧,同时我们把狮子的尾巴也加上。
图片
图片  
 
 
 
有了这个 logo,以后软件应该就不会崩溃了吧?
算了,继续给客户改图吧,最后,让我们把「我爱设计」打在公屏上…… 
 
 
图片
图片  
 
 

设计步骤:

1.确定基本的形象和拟人化的方向;
2.通过参考来提取形象的基本特征和赋予的肢体动态;
3.图形化处理;
4.加入简单的行业元素填补空间;
5.细节刻画及配色排版。  
 
 

总结:

其实拟人化的 logo 创作思路真的很开放,它可以是你生活中遇到的一些事情,看到的一些事物,都可以积累起来当做你的素材。
 
我们在设计的时候只需要按照上面案例中所讲到的步骤,先把基本的形象和绘制出来,然后去把形象直接安放到一个合适的动态里面,最后添加一些行业元素丰富一下空间就可以了。
  
 
但其实很多同学在设计的时候都容易画的和参考太像了,我们在刻画的时候只需要抓住形象的基本特征点即可,其他的地方都可以自己快乐的发散来做,这才是设计的有趣之处嘛!
希望大家不要过度依赖参考,多多的去发散自己的思维,做出有趣生动的拟人化 logo!
好了,真的要睡了,设计师的假期,也可以过的很精彩呢……感谢大家听我啰嗦,晚安朋友们。

 

原文地址:胡晓波工作室(公众号)

作者:告白天

转载请注明:学UI网》你的拟人化LOGO真的应该再有趣一点

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

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

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

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

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



形状跟设计有关系吗? 有关系

seo达人


四个等距离圆点用线相交形成的正方体为四边形。
图片 
 

以点为中心,以直径为距离旋转一周所形成的封闭曲线叫做圆,也是中心对称图形。

图片

这些形状本身并没有什么含义,但跟设计有关系吗?

有关系。 

 

 

图片

 

 

同一张图片正方形的视觉看起来稳固,但视线却不容易有着重点,显得呆板沉闷。

图片

 

 

16:9的长方形能让观看者有沉浸的体验感,视线也显得宽广,符合人眼的生理需要。(人的眼球视野基本是椭圆形,两个椭圆形相加从中裁出的矩形就是16:9的长方形,更符合观赏)

图片

 

 

这也就为什么在生活中数码设备、影院荧幕、书本、海报的大部分尺寸都以长方体为主的原因。

图片

 

 

而圆形虽没有长方形的视线宽广, 但却有着独具一格的聚焦特点,能让视线完全集中在图形内部,体现出一种东方特质的艺术美感。

图片

圆的使用场景不仅与生活息息相关,例如汤圆、剪纸、圆桌、太极、建筑等有关。

 

「在东方」

「在中国」

更代表着团圆与美好寓意

图片

 

二十四节气「以圆为形,以气为本」

中国传承千年的优秀文化

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》形状跟设计有关系吗? 有关系

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

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

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

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

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




UI 场景下的春节氛围设计

seo达人


目录

一、应用图标设计

二、金刚区图标设计

三、底部标签栏设计

四、导航栏设计区域

五、顶部视觉区域

六、背景氛围强化

七、模块分类强化

八、闪屏氛围营造

九、功能区域置换

十、运营设计营造

 

一、应用图标设计

应用图标是用户接触产品的第一个环节,也是视觉差异化体现的重要部分。在春节主题氛围中也是表现丰富多样,从不同的方向体现出春节的浓厚氛围。

主要的处理形式会围绕春节主题文案、生肖卡通形象、主题皮肤、春节元素和颜色等。以春节主题文案举例,通常是春节祝福语和营销结合的文案为主,设计在应用图标底部居多,将图形适当向上位移进行视觉平衡。也有一些产品结合自身图标因素,将文案设计在顶部位置,也是为了保持整体结构的稳定性。

图片

除了文案表达以外,配合生肖卡通形象也是较为常见的手法,可以是局部元素的装饰,也有是作为皮肤使用的。比如今年是虎年,利用老虎的形象或者局部元素表达也是层出不穷。

图片

无论是文字表达还是图形结合,应用图标上的表现都是在主题活动中优先考虑的场景,这是被用户在众多产品中发现的第一眼。

 

 

二、金刚区图标设计

金刚区就像百变金刚一样,将各种功能和业务聚集在一个区域,便于用户进行快捷操作。在金刚区图标上面进行设计发挥是最为普及的,春节期间众多产品都在各种形式上面进行发挥,呈现出很多优秀的设计案例。

最为简单的做法就是将带有春节主题的文案融入到图标设计中,这个形式适用于各类节假日和活动主题中。表现手法也是非常简单的,配合元素点缀和色彩渲染,很容易体现出主题氛围。

图片

 

 

保持图标造型不变,在外形轮廓背景中融入春节元素也是一个可行的方向。比如将灯笼作为图标背景,配合元素装饰和色彩搭配,呈现出的春节氛围也是非常浓厚的。

图片

也有结合春节元素对金刚区图标进行设计重构,带来的感官体验也是非常不错的。运用到的元素涉及鞭炮、福字、元宝、红包、糖葫芦等等,结合中国红营造出浓厚的春节氛围。

图片

 

 

将春节元素点缀到图标中也是一种不错的选择,或者配合春节主题颜色进行搭配,也能够营造出浓厚的新春氛围。

图片

金刚区图标设计是营造氛围的最佳区域,不会对业务布局和产品结构造成影响,能够根据氛围的要求作出灵活的调整。

 

 

三、底部标签栏设计

底部标签栏是用户进行功能模块切换最频繁的区域,通常营造氛围和金刚区一样,都是非常直观和效果显著的区域。

将春节元素融入到底部标签栏图标设计中,带来的感官体验是非常不错的。可以是单个的春节元素,也可以是元素的局部装饰,都可以非常直观的传达给用户,突出春节活动氛围。

图片

 

也有将春节主题文字融入到图标设计中,一种是直接结合字体设计和春节元素表达;一种是结合外轮廓背景,字体作为图标部分镶嵌入背景中。文字的识别性有助于用户更快理解,传达氛围也是非常直观高效的。

图片

 

如果不想改变太多,也有一些产品只是在中间凸起模块图标上面进行氛围设计,也能传递春节的氛围。这样的设计解决方案最大限度的保留了原本的设计内容,属于弱氛围营造,也能达到一定的氛围营造目的。

图片

 

除了在图标设计上面营造以外,也能在底部标签栏背景上面营造,配合中国红营造出来的氛围也是非常浓厚的。也可以是配合颜色和元素进行营造,比如烟花效果也是不错的选择。

图片

底部标签栏设计区域的氛围营造效果非常显著,无论是背景层面的营造还是图标设计上的创新,都能带给用户非常直观的体验。

 

 

四、导航栏设计区域

导航栏+状态栏通常是品牌色或者白色居多,也有少数产品会使用其他颜色进行设计。在春节期间这个区域也是作为氛围营造的不错选择,除了利用中国红作为颜色层面的选择以外,也有结合春节元素进行设计表达的。

图片

 

除了静态的设计表达以外,也有结合动效的表达提高吸引力,突出春节浓厚的氛围。(比如:途牛旅游)

图片

 

 

五、顶部视觉区域

顶部视觉区域和导航栏区域比较类似,不过顶部的范围更大一些,运用的场景更多一些。除了首页以外,在其他主界面也可以使用这个区域,带来春节氛围的营造。

首页 Banner 区域是顶部视觉区域面积较大的板块,结合 Banner 进行背景营造,带来的视觉效果也是非常突出的。

图片

 

 

除了根据 Banner 效果营造以外,也有只是营造背景层面的形式,将背景颜色营造出春节的氛围,效果也是一目了然。

图片

在其他的主界面中顶部视觉区域也可以进行营造,比如个人中心的视觉营造,带给用户的感官体验也是非常的直观。

 

 

六、背景氛围强化

除了在局部的区域进行背景的氛围强化以外,也有将大面积背景进行春节强化的。通常是通过颜色来强化,比如通过中国红来烘托春节氛围,也会在背景中装饰一些春节元素,进而增强氛围感。

图片

背景强化适合卡片式布局,更能衬托出空间感,强化视觉效果。

 

 

七、模块分类强化

在大视觉模块区域强化表现是较为突出的,为了体现精细化的表达,在细节的设计中也会加以注重。

细分模块的设计嵌入可以弱化视觉比重,也能达到融入春节主题的目的。比如在模块分类的设计中,将春节主题字体替换到类别中,作为活动栏目的表达,也是非常不错的设计表达。

图片

 

 

八、闪屏氛围营造

闪屏和启动页本身属于相同的表达,都是为了缓解用户启动应用时,等待过程中所产生的焦虑感。不过随着闪屏广告的概念,被区分呈现出来了。

体验了很多产品,发现还是闪屏广告居多,以营销活动为主的案例较多。单纯突出春节主题表达的很少,以春节主题配合营销活动设计比较多些。

图片

不过启动页的位置作为主题氛围营造是值得考虑的方向,作为品牌情感化的延伸是非常不错的选择。

 

 

九、功能区域置换

功能区域在这个环节我是作为整合而存在,指的是下拉刷新、空状态、加载、主按钮等等。在一些重点区域强化春节氛围是很多设计师的首选,也有一些会在细微之处深入挖掘。

下拉刷新对于一些内容更新频繁的产品来说,是用户操作非常频繁的功能。通常情况下,是结合文案提示、默认动效、品牌元素、吉祥物动效等进行表达,而春节期间很多产品也嵌入了春节活动,将功能区域进行置换。不仅可以达到刷新的目的,也能带给用户春节的氛围感。

图片

 

在一些主按钮比较突出的产品中,也会在按钮的设计上面融入春节的元素,在细微之处带给用户氛围感。

图片

以上案例仅为列举,功能区域置换是一个可以探索的方向,不仅可以达到突出主题的目的,也不会影响功能的操作。

 

 

十、运营设计营造

运营设计通常都是最活跃的,不会放过任何一个主题的参与,春节这样的大节日更是重点参与的对象。

在春节期间通过各类活动的设计突出春节氛围,让用户在感受氛围的同时促进消费。除了在视觉效果上呈现出丰富多样的表达,在互动玩法上面也是费尽了心思,带给用户更多趣味和年味。

图片

 

运营设计的营造主要是在专题活动的表达上呈现,也会配合 Banner 设计或者其他插入式广告,还有弹窗广告的结合也是较为普遍。

图片

 

小结

春节随着时间的推移已经过去,本文梳理了在春节期间观察到的移动端 UI 层面的变化,总结案例是为了探索大家的设计解决方案,积累更多不一样的设计思路。案例主要以感官层面的为主,希望这些视觉表达层面的思路,可以带给你更多灵感。

本文主要是个人观察所感,不足之处望大家自行补充,我们互相进步。

 

原文地址:黑马青年(公众号)
 
作者:黑马青年
 
转载请注明:学UI网》UI 场景下的春节氛围设计

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

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

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

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

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


爱美有度——柠檬爱美品牌LOGO升级

seo达人


项目背景

柠檬爱美依托百度庞大的流量与移动生态服务优势,在“精准搜索+精准推荐”双引擎下,用百度大脑结合大数据建立精准用户画像,通过下探业务目标、挖掘用户诉求,结合百度APP生态,搭建搜索场景下的医美科普内容服务平台。

 

1. 业务战略升级

近年来,医疗美容行业增速迅猛,行业乱象频发,亟需提升整个行业服务质量和品质。本次业务战略升级围绕内容建权威专家科普解读,打造用户放心、安心的医美服务保障品牌。目前设计价值重申迫在眉睫,品牌logo也应配合战略方向优化升级,助力品牌心智打造。

图片

 

· 设计趋势变化

随着时代的变化,人们需求的变革,极简化、扁平化已成为近几年的品牌logo设计趋势。品牌升级的背后除了商业模式的变革,也是顺应新的设计流行趋势变化。

图片

2. 问卷调研

· 设计问卷

项目初期,我们采取一对一的访谈方式去了解产品背景和诉求,寻找设计抓手。通过精心设计的、有场景带入的问题,让参与者在放松的状态下把他对产品定位等关键信息准确表达出来,这里需要注意的是邀约参与者必须包含各业务方向的产品决策人。过程中也对医美行业、大环境的洞察分析以及目标受众、竞争对手、产研方向等做了探讨。

图片

 

· 定量分析问卷结果

通过分析问卷结果,我们与业务方达成了本次品牌升级的目标,希望通过品牌logo升级,传递出权威科普、服务保障、科技医美的品牌定位。

 

3. 概念探索

通过前期调研我们已经有了明确的业务定位,但是我们所提供的服务要给用户建立什么样的心智印象?什么样的品牌传播能产生用户共鸣?我们如何处理电商与内容的品牌关系?都仍是未知,这也恰好是品牌需要解决的问题。

带着这些疑问,我们收集并查阅了大量用研、品牌资料,我们通过金字塔模型从产品的功能属性、实际价值、情感价值、产品个性、品牌精髓5个纬度逐一进行关键词的发散与收拢,帮助我们进一步清晰柠檬爱美品牌“模样”。

图片

为了尽可能提炼出既符合产品理念又有用户共鸣,且引发互动的品牌理念。我们将金字塔中的关键词分别对应图形参考案例,面向业务方发起了第二轮调研,在调研讨论的过程中,我们不断完善聚焦概念,“爱美有度”这个概念方案也一步步浮出水面。

 

4. 方案设计

· 概念锁定

经过长达1个月的不断尝试,逐步明确概念如何转化成可执行方案。最终我们锁定在“爱美有度”,“度”这个兼具名词与动词属性,具有更大的想象空间和丰富的情感属性。不仅暗指百度医美垂类品牌,更传递的是平台价值观:内容有信度、服务有温度、科技有态度的涵义,天然带有积极的导向意义。

图片

 

· 草图绘制

在草图绘制过程中,最大的挑战在于“柠檬”与“度”的图形诠释。首先我们需要一个不落入俗套的柠檬外形。其次“爱美有度”品牌概念如何通过图形元素能让用户感知,又能精准的传递“权威保障”信息。

手绘的方式简单快捷,可以很高效的对齐大部分的设计共识。期间大家发散了很多想法,尝试了很多方案。经过两轮手绘下来,主体定格在“手托举”的柠檬外形,虚形恰好是柠檬,建立品牌专属记忆点。造型饱满圆润,充满能量且呈向上趋势,象征求美者的美好希冀,也体现了“爱美有度”的设计理念。让受众能感受到品牌传递的权威、专业、信赖。

图片

图片

 

· 提案设计

总结各阶段结论,最终形成设计提案主线。采用视觉冲击力强的图片辅以文案,精准传递logo方案表达的设计概念,最终方案定稿。

图片

图片

图片

图片

图片

图片

图片

图片

 

写在最后

品牌升级不仅仅是换个logo那么简单,而是产品定位和策略发展落地中的重要一环。本次柠檬品牌logo设计,我们无时无刻都在思考如何更好地了解用户,贴近产品,传达理念。希望通过本次升级,用户能感受到柠檬爱美品牌为了更好的服务用户敢于突破,力求革新的决心和信心。

 
 
原文地址:百度MEUX(公众号)
  
作者:陪你一起变美的
 
 

转载请注明:学UI网》爱美有度——柠檬爱美品牌LOGO升级

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

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

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

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

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



看那么多高大上的海报有什么用?

seo达人



01.

丹麦一家叫做Hugmun的设计工作室,为一家名为Cinemateket Trondheim的电影院,设计了一年的月度计划系列海报。设计师用简洁、抽象的插画来表现与电影相关的内容,每一张海报都有着丰富、艳丽的色彩,标题字体根据不同插画的气质而做出变化。另外,大部分海报都有眼睛元素,旨在传递沉浸式观影和穿越时空的体验。 

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

 

02.

这是一个叫做Ostbahnhof派对的宣传海报,该派对融合了音乐、艺术、政治等多种元素。设计的主题为:什么都行。意思是这里无奇不有,在这里干什么都行,传递出这是一个极度丰富、自由、包容的派对。所以,在设计上也比较天马行空,拼贴风配图、对比强烈的荧光色、密集的构图和排版个性、个性十足的字体,无不传递出令人兴奋、向往的视觉感受。 
 

图片

图片

图片

图片

图片

图片

图片

 

 

03.

这组海报出自法国设计工作室:My Name Is Wendy,为一个叫做流星计划的项目所设计,该系列海报都是以火车以及Meteor(流星)为设计主体。精细的插画与简洁、硕大的无衬线英文字母相结合,呈现出强烈的繁简对比。为了突出主体,没有搭配插画的字母笔画都相对细很多,内文的字号则尽量缩小,与Meteor穿插排版,整体看起来大气而又细腻。以黑白灰作为主色,使海报的复古和工业气息更加浓厚。 

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

图片

 

04.

这组海报不知道算不算“新丑风”,反正我觉得还挺好看的,虽然色彩的饱和度很高、对比很强,但是并不刺眼,反而给人活泼、时尚的感觉,因为每张海报都有明确的主色。插图虽然很搞怪,但是并不丑,反而挺有趣,加上简单的动效,让人感觉很魔性。大部分海报的主体都是由多个分散的元素组合而成,插图与几何图形以及文字看似随意实则有序的组合在一起,使整个版面看起来既灵活又很整体。 
 

图片

图片

 

图片

图片

 

图片

图片

 

图片

 

05.

这是一系列Nike鞋子的产品海报,很明显这是一组基于网格系统排版的作品,所以整体看起来很严谨,而且平衡性非常好,但又不乏灵活,因为设计师把版面进行了不规则的切割,点线面相互穿插,彼此又保持着对齐的关系。色彩以黑色和浅灰色为主,但每个版面都保留了小面积的一两个彩色,使画面变得更有生气。

 

图片

图片

图片

图片

图片

 

06.

这组海报的主题为西班牙时尚,展示了春夏秋冬各种时尚的西班牙服饰,海报中的字体和排版以直线为主,但图片的轮廓几乎都是圆润的,这种强烈的对比增加了海报的现代感和时尚感,而且因此产生的留白也让版面有更多呼吸空间。 

图片

图片

图片

 

图片

图片

 

主题的设计也是一个亮点,以无衬线字体为基础,组合搭配了几种其他风格的字体,甚至还把个别字母置换成了几何图形,使简单的画面多了一些设计感和细节。另外,这组作品也给我们提供了几组高级而时尚的配色方案:黑色配青色、黑色配橙色、黑色配紫色、黑色配香槟金。 
 

07.

这是一名新加坡设计师设计的一系列海报,由于他业余时间很喜欢看足球,所以一有空就会去设计一些知名球员的海报,截至目前已经累积设计了好几十张,这些海报都是以球员,以及与其相对应的俱乐部队徽、队名、城市为设计主体,每张海报的设计形式都不一样,但都有很强的形式感和视觉冲击力。

图片

图片

图片

 

图片

图片

 

图片

图片

 

 

图片 

多看永远是学设计的第一要义,并且,我们有时还得跳出自己的专业、自己的工作领域去看,这样才能吸取到更多、更新的东西,即使有些东西说我们看不懂的、用不上了,但仍会有收获。

 

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

作者: 葱爷

转载请注明:学UI网》看那么多高大上的海报有什么用?

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

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

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

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

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



你需要知道的弹窗设计原则!

周周

本篇文章将围绕着弹窗类型、使用场景、转化率及常见问题为侧重点,将自己对弹窗的理解、设计经验分享给大家,帮助大家对弹窗组件有更清晰的认识,为后续避坑设计出更好的弹窗做准备。

浅谈设计中的温度——如何用互联网思维帮扶乡村孤寡老人和留守儿童

ui设计分享达人

前言

 _


提及“设计的温度”,不得不提我们老生常谈的“情感化设计”,提出这一概念的美国认知心理学家唐纳德·诺曼将设计拆解为三个层次:本能层、行为层、反思层,层层递进。



1/ 本能层的设计,是视觉的直接反馈,是指用户第一眼看到的、感觉到的东西是否会激发用户兴趣;

2/ 行为层的设计,注重的是效用,产品功能是否好用,易用,用户使用产品过程中能否高效解决问题;

3/ 反思层的设计,是情感化设计的最高层次,指用户使用产品后,是否建立情感连接和记忆反馈。

因而,它们是从美学诉求到效率诉求再到情感诉求的一个进阶关系。


如果一款产品在满足基本功能,对于用户有用,同时好看并且易用,使用完之后还能产生愉悦以及满足感的话,那么这将是一款好的情感化设计产品,那必然是一个有“温度”的设计。


如果一个项目本身充满社会使命和责任感,那么“有温度的设计”将可以助推项目的落地链条,让使用平台的用户有“温度”,更让项目背后的人员感受到“温度”。


因为,接下来陈述的项目是一个很有“温度”的项目——用互联网工具去温热社会中的穷苦灰暗,用互联网思维去帮扶社会的乡村孤寡老人和留守儿童,用有温度的设计去践行有温度的项目。




项目背景

 _


随着我国社会经济的快速发展,农村青壮年劳动力转入城市,人口老龄化趋势加剧和家庭结构的演变,“空心村”越来越多,因此在乡村出现大量的“留守儿童”和“孤寡老人”。据统计,在农村独居和空巢老人超过3000万人,留守儿童也达到了近2000万人



孤寡老人因为独居生活、物质困难、缺乏照料面临着易患疾病、精神压抑等很多问题;而留守儿童因为缺少父母监管和陪伴,极易产生很多身体及心理问题,这两大群体是我国人群结构的重大组成部分,一个是未来的花朵和希望,一个是曾经发过光热的迟暮老人,他们需要关爱和守护,需要有一座“有温度”的桥梁,为留守儿童撑起蓝天、健康成长;为孤寡老人送达温暖、安享晚年。



基于社会现状,践行社会责任,腾讯为村平台联合中国社会福利基金会、腾讯公益慈善基金会,预想搭建一个线上与线下结合的平台,成立“为村暖心小站”,立足于脱贫地区的农村社区,主要服务农村的一老一小以及其他需要帮助的困难群体,解决日间照料、健康护理及心理关怀等诸多问题。




设计思路

 _


1,定义产品形态


“暖心小站”的整个帮扶路径是以线上+线下相结合的模式,依据产品需求,在线上可以招募志愿者、发布救助需求、触达爱心人群;在线下建设实体服务站,开展具体的帮扶活动。从而形成一个从线上到线下的一个完整帮扶闭环。



那在线上的呈现形态上,主要考虑APP和小程序两种方式,经过对比分析,APP稳定性高、体验好,但是在乡村的受众群体内,互联网基础还是很薄弱的,要让村民朋友下载和适应一个新APP是一个难度非常大的事。而微信在乡村的覆盖面非常广,占有率很高,那么依托于微信的生态、建立小程序,在推广层面会更加便捷和高效。同时,暖心小站本身结构简单,是一个非常轻量化的应用,这种特性也更适合以小程序为载体。



2,确定产品结构


在线上的产品框架上,设立两大专区:关爱老人专区和呵护小孩专区,各自创建知识宣导、在线课堂、爱心募捐等版块内容,同时在线上召集志愿者,在线下成立社区服务站,开展帮扶活动,然后志愿者们在线下实地服务打卡同步展示在线上的暖心小站。


确定框架之后,梳理角色和场景。本项目主要包含线下服务站的站长,工作人员,志愿者以及社会的爱心人士。



站长、工作人员、志愿者主要是通过线上为村暖心小站这个平台发布活动信息、记录服务概况、展示志愿者风采,社会的爱心人士通过线上平台查看对应信息并参与对应活动,最终帮助农村的一老一小解决各种帮扶问题。


经过梳理分析,平台使用人群的年龄跨度较大,30岁到60岁这个群体占到了80%左右,所以在产品的呈现形式上将兼顾青年到老年的年龄跨度,让设计更友好,让产品有温度。



3,制定设计策略


定目标


基于前面分析,在农村现实环境中的孤寡老人和留守儿童,他们生活是灰暗的,情感是封闭的,他们需要有更多志愿者以及爱心人士给他们带去阳光和温暖,让孤寡老人可以健康生活,让留守儿童可以健康成长。 




所以在设计目标的确定上:让产品形成一个“有温度、有故事、可以连接情感的桥梁”。让贫苦生活渗透阳光、感受温暖、看到希望。



定色


品牌色的推导,是站在线下的实际场景感受来提炼,乡村的孤寡老人和留守儿童的生活是贫苦的、灰暗的,他们需要金灿灿的阳光给生活带来希望,而我们日常所的见的公益组织通常都是以红色系为主,似乎已经形成了作为公益组织的标识色,因为这种大红色传递爱心、带来温暖。


这些颜色都很有代表性,黄色代表阳光,红色代表公益,而暖心小站,将这两种颜色进行叠加融合,形成阳光橙,再以阳光黄纳入辅助色,形成温暖、友爱、活力、阳光的色彩体系。





定原则


在设计原则上,考虑到我们的用户群体年龄跨度比较大,一些年长用户互联网基础薄弱,为了让产品更有亲和力,让年长用户都能轻松上手,所以在策略上制定简单、易用、温暖的设计原则,保持框架简单清晰、交互简单易用,让产品有温度,让用户觉得有用、好用、还想用。



在“简单”方面,保持产品的页面框架要简单,结构要清晰,让用户清楚知道自己在哪里,所以在产品形态上只做了内容页的垂直展示,没有过多琐碎的信息入口,让页面信息更集中,浏览体验更聚焦,让年长用户也可以简单使用。



在“易用”方面,简单的框架和结构是易用的基础,在视觉元素的排列上,通过加大的图片、加大的间距、加大的圆角,通透的页面布局可以让内容陈列更集中,获取信息更高效。页面的间距以4px为基数,分为5个跨度,在统一性的基础上让界面更有节奏感,层级更清晰,从而提高产品的易用性。



在“温暖”方面,主要体现在在调性、元素、和内容上:

调性:以“温暖橙”+“阳光黄”为品牌色系贯穿始终,形成温暖、阳光的整体基调;

元素:在常规尺度上进行适当加大,加大的字体,加大的卡片占符,加大的点击区域,让产品更照顾年长用户的操作习惯,让产品更有温度;

内容:在内容及主图的运营展示上,突出“温暖”的调性,增强用户的共鸣,拉近用户与产品之间的距离。





整体视觉呈现

 _


整体以大面积的“温暖橙”为基调进行铺设,营造温暖阳光的质感,顶部展示产品名称和合作logo,增加产品的权威性和信赖度。


自上而下,控制大的间距和留白,分别设置了热门小站、一老一小专区、志愿者风采、活动回顾、学习园地等版块。全方面展示了小站的基础信息、输送了对孤寡老人和留守儿童的健康资讯、汇集了志愿者服务的风采、记录了帮扶活动的结果反馈、以及陈列了关爱老人和小孩的相关线上课程。



一老一小的入口及详情:通过大头图的形式加强专题感知,引导用户点击。详情内展示相关的关爱资讯和助力入口,让用户可以选择性的进行点对点帮扶。



小站详情:分为小站介绍、人员风采、小站活动、和运营概况四个部分,清晰展示线下暖心小站的各项事务,让线上用户对线下小站有更全面的了解。



个人中心:功能简单,布局简洁,根据不同身份类型展示不同入口。作为站长的话,拥有志愿者审核、活动管理的权限,整体表现形式以统一的卡片式陈列,让内容更聚焦。




秉持“简单、易用、温暖”的设计原则,尽可能地让产品陈列简单、操作流程易用、设计满足功能凸显温暖,让用户想用,让产品好用。


经过多次推导与线下团队配合,小站1.0在今年5月初上线,第一批试点小站正在使用中,得到了较多正向良好的反馈,为乡村的一老一小带去了许多暖心的帮扶行动。



上线反馈

 _



产品上线之后,通过在线上发布活动信息召集志愿者。在线上顺利举行了多场暖心活动,比如在重庆马蜂社区的服务站内为当地留守儿童举办了多项课业辅导的活动,在重庆周家寨服务站新建了日间照料室,提升老人的居住生活质量。


今年5月20号,在中国互联网公益峰会上,为村暖心小站进行线上交流展示,获得了很多与会代表的关注和认可。




截止2021年7月,平台上线了两个试点小站,共举办了数10次线上+线下结合的活动,活动参与了520人,受到36000人以上的关注。暖心小站的建立和运营,对乡村的“一老一小”提供了更加有针对性和个性化的服务,同时加强对当地社会组织的培育和孵化,提升了服务对象的生活质量,促进和谐社区建设,助力乡村振兴。


通过这些试点小站的成果和反馈,让设计目标也得到一定程度的印证,让产品体现了“有温度、有故事、可以连接情感”的桥梁。




设计反思

 -


随着互联网的发展,人们对于产品不再是简单的形式服从功能,而是逐步转向形式服从情感。让设计回归情感,让有温度的设计去创造有温度的产品,可以增进人与产品之间的情感连接,让产品更有生命力。再者,用有“温度”的设计思维,去捕捉和解决社会问题,通过具有社会责任感的设计,推动社会进步,形成坚实有用的“设计力”。


那么,如何提升自己的设计力呢?可以概述三个保持一个向善。



保持热忱心

设计需要坚持,而坚持源于热爱,保持热忱之心会发现许多美好的事物,同一个需求会自发性地探索很多不同的解决方案,因此会洞察需求背后最本质的东西,切入要点寻找最优解。


还有一句话:“设计路上,唯有热爱,方能抵御岁月漫长”。


保持敏感度

这里的“敏感”指的是设计师要有好奇心,善于发现新事物,善于追踪最新行业动态,是一种职业敏感,是一种自觉行为,表现为热情、兴奋、敏锐,对新事物充满热情,对于新发现充满兴奋,能够特别敏锐的捕捉社会痛点解决设计难题。


保持共情力

生活中常说,有共情的人往往都特别感性、多愁善感,泪点低笑点也低,因为特别有代入感,而且对事物特别专注。


设计上所说的共情力则需要保持感性,同时也需要理性加持,不偏不倚。让设计师自己能切换到项目内的各种角色,不把自己当成局外人,将自己融于产品本身,随时切换为不同用户的视角,更能深入地发现、分析和解决问题,让设计站得住脚、更接地气,让设计有依有据。


让设计向善

设计的最终目的是传递需求、解决问题,这就意味着设计的初衷不同,那么最终的导向也会截然不同。

设计向善,保持“善”的初心,主张设计回归社会、回归到人心最本质的出发点,做有温度的设计、有仁心的设计、可持续的设计。


关注社会问题,保持一颗敏感而善良的心,用“设计向善”解决社会痛点,坚实巩固自己的设计力。


文章来源:站酷   作者:峰HENG

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


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

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


「新手向!!」“8点”网格系统是什么?

ui设计分享达人

一、前言

1、代码>原型

无论是高保真还是低保真原型,设计人员在软件中的展现所有效果,最终目的都是传递给开发人员进行实现。当开发人员开始使用代码还原页面时,设计就不可以再随意修改。

最重要的不是在设计软件中展现的效果,而是实际在用户设备上实现的效果,因此在设计时,要提前考虑代码实现的成本。

2、盒子模型

盒子模型是一种描述对象尺寸和间距的方法。有四个部分组成:“边框Border”、“边距Margin”、“填充Padding”、“元素本身Element”。

  • Border:围绕元素外围的边线。

  • Padding:元素及其子元素之间的间距。

  • Margin:元素和其相邻对象之间的间距。

3、什么是point(pt)

点(pt)取决于屏幕物理尺寸大小,是绝对尺寸单位。对应@1x图的1px。

像素(px)取决于实际屏幕显示分辨率,是相对尺寸单位。在@2x图情况下1pt=2px,在@3x图情况下1pt=3px.

4、@1x

建议使用“@ 1x”进行设计,其他尺寸图可以从@1x进行衍生。

如果是以@2x进行设计,那么若要得到@3x则要先缩小50%然后再扩大300%,增加了不必要的工作量,并且很容易出现奇数、小数等不便利数值。

5、使用像素网格

创建的每个UI元素都应该和像素网格对齐,防止出现半像素的“锯齿“效果。

文本由于其图形的特殊性,难免会出现无法对齐像素的情况,这里可以忽略。

6、文本元素

文本是页面中最重要的元素之一,但因为其本身的多样性,产生的不同的字体、行高很难和其他元素一起适用网格。因此给文本设置基线网格,将基线网格采用4pt进行等距划分,来和其他元素进行和谐搭配。

二、8点网格

1、基本原理

使用8的倍数来定义区块和内部元素的尺寸,间距等。

当区块元素为文本(例如按钮)时,将文本设置成其余部分一致(或者平台预先定义好)的大小,然后使用padding来确定区块大小。如果是全宽的元素,使用padding来确定高度,并使用一致的水平边距来确定宽度。

2、两种方法

  • 硬网格:将元素放置在以8为增量定义的显示网格中,使用额外的透明背景元素,和前景元素组成一个整体。

  • 软网格:保证元素之间的的间距为8的倍数,以此获得更快的处理速度,从而得到更流畅的体验。

三、为什么重要

1、保持一致性

当所有尺寸都遵循相同的规则时,就有了一致的UI。

2、更少的决定=更少的时间

减少自定义的尺寸规则,得到更快的代码运行速度。

3、多平台设计

无论设备外形如何,主流的屏幕的屏幕尺寸长宽值至少有一个维度可以被8整除。

有一些屏幕的尺寸无法被整除(iPhone 6的375*667pt),只需要保持padding和margin一致,适当调整区块的大小来进行适配。

四、实施技巧

1、对齐网格

确保开启了“对其像素网格”选项。

2、Rems和变量

如果根文根大小设置了16px,则可以使用0.5rem的增量在8点网格上构建布局。

如果不喜欢这样做,或者是不喜欢rems的使用方式,可以使用CSS或预处理器间距变量来处理布局,同时保留变量以供后期维护。

3、定义你的网格

大多数软件都可以设置快速“微调”,一般默认为10px,sketch中可将其调整为8px,便于快速的工作。

4、捷径

学习并善用快捷键,提高工作效率。

5、框架你的图标

图标设计通常需要进行视觉修正,因此,在其周边放置透明框架(例如Hard Grid的方式),来保证整体的一致性。

6、放大、缩小

设计时经常会放大预览界面来进行设计,这会导致会略整体;如果以缩小的尺寸会导致看不到细节,因此要经常变焦画面来确保能看到整个画面。

文章来源:站酷   作者:YMOOM

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


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

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

这些高级UI设计趋势,我不允许你还不知道!

ui设计分享达人

正文


如果移动应用程序不符合最新的设计趋势,那用户可能会放弃你设计的产品。 

考虑到趋势永远不会保持不变,而且总会有新的趋势出现,让应用看起来既现代又漂亮是一项挑战,但遵循设计趋势对于每个产品设计师来说都是必须的。 

我们了解到,跟踪行业中的所有趋势和趋势并不总是可能的。总是有新的指南、动画内容、视频、新的插图方法以及许多其他概念,您需要先抽出时间学习和测试。 


这是我们总结出的 2022 年移动应用 UI 设计趋势

1、运动和动画 
2、手势和滑动体验 
3、90年代风格 
4、图形深度 
5、黑暗模式 
6、排版 
7、增强现实和虚拟现实 
8、渐变和透明元素 
9、舒适的视觉效果 



1、动效和动画

我们都喜欢看视频,并在 TikTok 或 YouTube 上花费大量时间。视频内容和动画更具吸引力和互动性。统计数据显示,大多数人在使用应用程序之前都会观看说明视频。动画和动作设计使内容更具吸引力。 

与具有长描述的静态内容不同,动画可以保留用户的注意力并使应用程序更具吸引力。用动画突出重要的东西是一个好主意。例如,您可以为应用程序中的按钮设置动画,以使用户与应用程序的交互更好、更直接。像图标动画这样的微动可以显著改变您的应用程序的体验。 

借助动画,您可以强调应用功能、提高转化率甚至销售数据。 




2、手势和滑动体验

与电脑上的网页端相反,手势和滑动体验使移动设备更具吸引力。我们每天花费数小时滚动和滑动操作。按钮和其他动作可能会刺激和分散注意力。这种设计趋势成为现代应用程序设计的最高优先事项之一。一些应用程序创建者甚至根本不支持按钮的使用。按钮会造成混乱并占用过多的屏幕空间。 

建议用滑动功能替换按钮。尝试滑动动作的动画会很有帮助。例如,图书应用程序通常使用动画来翻页。 




3、90年代怀旧风格

90 年代的风格影响了所有领域,甚至是移动应用程序的设计。 

设计师使用类似于 90 年代流行的 PlayStation 游戏(例如,马里奥或吃豆人)的复古字体、图像、图形。拥有 90 年代的氛围,您有机会获得两代人的兴趣:年轻人喜欢复古的东西,而老年人则喜欢怀旧。 

这种趋势并不适合所有产品,但如果复古风格适合您的应用程序,尝试一下也不错。 



4、赋予图形深度

扁平化设计看多了用户会觉得很沉闷。人们喜欢看到更真实和互动的内容。图形中的阴影和图层赋予它们 3D 效果、体积和深度,使人们可以享受更逼真的图像。 

这种趋势可以与任何元素一起使用,在屏幕上创建对象层次结构并帮助用户更轻松地浏览应用程序。 

然后,关于3D效果,我们来聊聊。3D 是一项革命性的技术。3D 图形几乎可以在任何应用程序中使用。例如,开发人员可以使用 3D 成像技术来构建存储建筑物和房间内部地图的应用程序。它可以非常适用于游戏并改变玩家的整体体验。因此,在您的应用程序中为图形添加深度时,请考虑 3D 趋势。 




5、黑暗模式

暗模式是已在许多应用程序中高度使用的最大设计趋势之一。最近,设计师也提供了在应用程序中在标准模式和暗模式之间切换的机会。所以用户可以选择他们最喜欢的任何模式。 

深色主题设计将背景变为深色模式,并使字体和其他元素变为浅色/白色。 

例如,现在在 Facebook 等最受欢迎的应用程序中都可以使用深色模式。切换到深色模式有助于人们减轻眼睛疲劳并更方便地浏览。 




6、排版

选择正确的字体是移动应用程序设计中必不可少的一步。用户在浏览页面的时候不是一个字一个字的读的,而是成行的“扫描”方式来浏览。因此,使用能够正确设置重点的字体非常重要。 

设计师已经开始使用不寻常的字体。文字不再看起来那么无聊,也不会迷失在背景中。其目的是使设计更明亮、更新颖。 

正确选择的字体将有助于:
1、定下产品调性; 
2、提高品牌知名度; 
3、提供更好的视觉体验; 
4、提高可读性。 

通过组织排版为您的用户提供愉悦且可读的用户体验:设置点大小、行距和层次结构。 

请记住,不寻常的“疯狂”排版并不适合所有产品。定义文本在您的应用程序中的具体功能。如果它提供了额外的信息功能,请不要对字体进行太多实验。但是,例如,在在线杂志中,您可以使用各种版式,使布局更有趣。 



7、增强现实和虚拟现实

虚拟现实和增强现实为用户提供了一个难得的机会,让您只需通过手机即可获得互动体验。 

在新一年中,这种神奇的 UI 移动设计趋势趋于增长和传播。这种设计趋势的关键在于应用程序的界面让您感觉自己置身于应用程序中。引人入胜的设计元素和游戏化是这种体验的关键。 

这是一个结合我们之前讨论过的趋势的绝佳机会,例如动画和 3D 效果。首先,精心制作的动画和 3D 触摸可以在您的应用设计中支持 VR。 

你还记得那些来自 Instagram 的功能吗?让我们可以通过应用程序和移动相机将不同的角色放置在我们想要的任何地方吗?然后你就知道这有多有趣了。此外,它不仅有趣而且高效。例如,宜家使用 AR 来展示一件家具在您家中不同位置的外观。 




8、渐变和透明元素

这个UI设计趋势是关于渐变和透明度的。设计师通常在按钮和应用程序的背景上使用渐变。移动渐变趋势突出了应用程序的基本部分,并使人们专注于特定方面,从而赋予他们层次感。 

移动应用程序设计中的透明元素表达了对某些应用程序部分的深度和驱动力,使设计更清晰、更具吸引力。 

您可以使用从浅色到深色主题的过渡,从而将屏幕分成两个逻辑部分。此外,您可以在按钮上使用渐变主题,使它们在屏幕上弹出。 

玻璃拟态的概念也值得一提。glassmorphism 背后的想法是柔化明暗设计元素之间的对比。设计理念使用类似于磨砂玻璃表面的透明模糊背景。 

玻璃态的主要特点:
1、透明度和背景模糊; 
2、透明物体上的细光边框; 
3、分层; 
4、鲜艳的色彩。 




9、舒适的视觉效果

舒适的视觉效果是大部分用户都喜欢的。用户和应用程序开发人员都喜欢这种最近的移动应用程序设计趋势。 

移动应用程序设计不应该只是美观。它应该让我们的眼睛看起来更舒适。因为一整天,我们可能都会盯着屏幕看,但看多了,我们会感到疲劳和眼睛疲劳。为了减少这种不利影响,应用程序开发人员创建了一种我们可以舒适使用的设计。 

舒适视觉设计趋势的概念是为您的应用程序使用自然的色彩、舒缓的图像和简单的布局。这些技巧通常可以在冥想应用程序中找到。它们包括自然的真实照片,具有平静的色彩和结构简单的轻元素,很少有深色主题设计。 




如果让你的UI设计更好呢?

这里有一些建议: 

1. 多看别人的优秀设计
分析它们的优缺点,从他们的经验中学习。 

2. 使用标准导航
不要使用异型的导航栏,这会让你的用户迷失在应用中。 

3. 使用优质的配图
抽象艺术、插图、真实照片趋势——一切都有助于吸引用户的注意力。 

4. 多看前瞻设计趋势
实时更新自己的设计知识库,使设计水平使用保持一流。 

5. 擅于总结与回顾
可以计划,三个月或半年总结回顾之前设计,总结不足之处。 

6. 多于他人分享
做设计不要怕被人看,或许有时候别人顺口一说,就点开了难题。 

7. 保持良好的心情
遇到事不要慌,掌握好自己心情,才能掌握好你的设计。
文章来源:站酷   作者:UI范
分享此文一切功德,皆悉回向给文章原作者及众读者.


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

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


日历

链接

个人资料

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

存档