首页

五步提升智能产品体验

资深UI设计者



1、场景细分

随着各大智能厂商对用户行为数据的收集积累,拆分提炼出了不同场景下用户的特定需求,相比以前的大而全臃肿的功能界面,现在的功能、信息更加精确,产品将不同场景下的解决方案为用户提前准备好,用户只需要简单的选择就好,更加人性便捷:

 

1-1 B&O音箱歌曲模糊切换界面

B&O音箱面向的人群是音乐发烧友,他们对音乐有独到的理解,为了为用户提供便捷合乎口味的音乐,B&O将歌曲类型与颜色情感相结合,分别是:黄色代表愉快的歌曲、红色代表激情的歌曲、紫色代表忧郁的歌曲、蓝色代表轻松的歌曲。用户只需要选择颜色就可以播放相应风格的音乐,给用户浓烈的感性艺术气息。


并且B&O将音乐播放场景做了细分:只收听自己收藏的歌曲、收听与自己品味相似的歌曲、随便听听;这三个场景下的需求通过三层圆环来满足:点击外环区域播放全网歌曲、点击中环区域播放与用户收藏相似的歌曲、点击内环区域播放用户收藏的歌曲。这种感性的操作方式省去了搜索歌曲的过程,极大的提高了便捷性。

 

1-2 三星智能冰箱2.0系统

我们先了解一下三星智能冰箱1.0的系统是什么样的,首页包含时间、天气显示、音乐播放、购物清单、备忘录、相册、留言板、设备控制,用户在冰箱面板上什么都能做,整体感觉是一个臃肿的功能集合。


在2.0中,三星将用户使用场景做了以下的细分:烹饪模式、日常模式、娱乐休闲模式、家庭管理模式;在烹饪场景下,为用户展现菜谱,用户可以专注的去研究饭菜制作方法;在日常场景下,为用户提供日历、照片墙、留言板、日程等日常生活相关信息;娱乐场景下,用户可以在厨房一边忙碌一边听音乐,还可以查看社交消息,所有的功能都是围绕娱乐休闲;家庭管理场景下,全职妈妈可以一边做着饭,一边看着监控屏幕上儿童房孩子的情况及全屋的安防情况,也可以控制家中的设备。


场景细分可以有重点的为用户提供他们真正需要的服务,让用户感受到产品带来的贴心感。

 

1-3 Orvibo 灯光照明场景


Orvibo根据用户使用灯光的习惯,按照用户对于光线的需求程度,将灯光使用场景分为:夜晚光线昏暗需要明亮的光照、白天光线充足不需要灯光、休闲时需要柔和些的光线、阅读需要不刺眼但明亮的光线、起夜时微弱的轮廓照明即可。为用户提供每种场景下的照明方案,准确快速的满足用户不同的需求。

 

1-4 小米TV端空调控制界面

小米根据用户对于空调各个功能的操作频率,罗列出核心功能:开关、温度调节、冷热模式,界面中只体现这几种种信息,将低频功能隐藏起来,为视觉降噪,突出核心功能,提升了用户操控效率。

 

1-5 WOM天气展示模块

针对那些上班中不方便看手机、穿好衣服正要出门、旅游到达当地酒店需要看一眼天气状况的场景,WOM提供了简洁直观的设计方案,产品显示区域只保留4种常见天气类型,高亮的天气icon代表当前的天气状况,当天气将要发生变化时,相应的天气icon会闪烁。


此外,通过利用颜色来传达不同的温度,蓝色代表0℃,白色代表10℃,黄色代表20℃,红色代表30℃,在不需要手机的情况下为用户提供了丰富的展现形式。

 

1-6 三星电子画框

随着手机的普及,家庭对于电视的需求已不完全是为了收看节目,往往一个礼拜也看不了几回。三星基于这种情况为了延续电子屏幕的销量,赋予了电视装饰属性,演变为纯展示的电子画框,用户可以选择各种风格的肖像或风景图片进行轮播展示,扮演艺术装饰画的角色,从而满足用户日常家庭装饰需求。


2.直观明确的表现方式

在设计中融入图片,将操作、状态可视化,这些具象的形式可以让用户快速理解并操作,让我们看看各大智能产品厂商是如何实施的:

 

2-1 Nest温控器安装界面

大多数智能设备买回家后,需要用户自己安装,有的甚至牵扯到线路问题,Nest温控器安装界面采用与实物一致的模型元素,让用户有参照依据;通过零部件的运动告诉用户安装顺序;通过放大细节,告诉用户应该选哪一个部件及如何链接。让用户有更好的参与感、成就感,还可以降低公司的人力安装成本、客服成本。

 

2-2 小米智能家居电视

小米智能家居电视背景运用实物图片,给用户营造家庭的氛围,设备卡片icon运用半写实风格,和实际产品一一对应,便于用户快速查找设备;卡片底部体现设备状态,精简的卡片信息使得设备的状态更容易被用户感知到。

 

2-3 三星、苹果智能家居系统首页

三星、苹果都运用图片作为系统的背景,可以很好的和用户拉近距离,通过白色或磨砂卡片与背景做区分,三星的设备icon采用多彩渐变风格,和它趋于年轻化、时尚个性的品牌战略方向保持一致。

 

2-4 Whirlpool洗衣机、烤箱、冰箱模式选择界面

由于洗衣机、烤箱、冰箱的运行模式和用户想要洗的衣物类型、材质、烹饪的食物类型、储藏的食物类型有强关联,Whirlpool运用图片作为模式背景,将功能和物品类型结合,用户可以直观感性的理解和区分各个功能,从而快速做出选择。

 

2-5 Orvibo MixPad

Orvibo在大屏智能面板的设计上大量使用图片元素,不仅可以区分各个功能模块,还增添了内容的丰富性,要知道智能面板的首屏和设备控制列表页功能是不一样的,它是用来承接并向用户展示房间内各个信息的,房间图片作为背景烘托出家的氛围,每个房间页面的左上角显示屋内温度、湿度、当前开启的设备类型及数量,很直观的向用户展示屋内信息。

 

每个场景都用具体的图片作为卡片背景,可以让用户预想到每个场景对应的运行效果。有的场景卡片中体现所属房间信息,告诉用户该场景只联动运行特定区域的设备。


运用图片会有以下问题:1、找到能体现各个特定功能的图片增加了人力成本;2、图片的多样性容易打破画面的整体统一感。所以要结合公司的现状克制的运用图片。

 

2-6 Amazon智能家居系统

Amazon的监控设备卡片背景外显了房间内的监控画面,用户在设备列表界面就可以直观的看到监控区域的信息,强调了用户关注的内容,缩短了操作步长。

 

2-7 Lenovo Smart Clock 备忘提醒时间设置界面

通常,我们设置时间时,系统会给我弹出时间选择控件,需要我们上下滑动设置;Lenovo Smart Clock的做法是将时、分的设置具象成了时钟实际运行的圆形轨迹,与用户对于时间的认知保持一致,很贴心的设计,这种方式非常值得我们学习。

 

2-8 Google Nest Hub 定时界面

Google Nest Hub 将传统的定时列表具象成了一个个正在倒计时的时钟,用户可以更直观的每个定时的状态。点击某个定时卡片可以快速的进行暂停或删除操作。

 

2-9 小米空气净化器界面

小米空气净化器界面,每一档空气质量值都对应不同的颜色,并且将颜色延续到了其他操控按钮,让用户对当前空气质量有更强的感知;净化器被关闭时,显示区域、控制区域置灰,明确告知用户设备状态及可操作区域。

 

2-10 三星SmartThings 设备连接查看界面

房屋面积大,会有很多的设备与多个网关连接,家中与网关连接的智能设备有时候会连接中断,具体哪个设备与哪个网关中断了不容易被查清。三星SmartThings将设备与网关的连接情况可视化,可以向用户直观的反映出哪个设备连接出了问题。


3.运用手势控制

通过利用不同形式的手势操控,让用户和产品的交互过程更新颖更便捷。要注意的是虽然手势不需要操控物理按键,但手势操控的形式要建立在用户已有认知习惯之上,请看以下案例:

 

3-1 LG手机系统控制界面

最左边的图为行程信息截屏操作,目前截图方式有几个按键一起按下的,也有手机背面敲击三下的,这些都需要与设备接触,接触交互的过程就需要花费用户更多的时间,LG通过双手捏合截图的形式体现现实中“抓取”的语义,用户使用起来顺其自然,瞬间就可以完成截图的目标。

中间的图为应用快速切换操作,用户只需要对着屏幕做挥手动作,就可以切换至下一个应用,这个隔空操控的手势核心使用场景是:当你正在厨房,手上沾着面粉或其他东西时,需要操控手机又不想弄脏手机,那么隔空操作就可以解决这一痛点。

最右边的图为多媒体音量调节,只需要作出旋钮的动作,就可以实现音量的控制,是不是觉着很Cool。这种新的控制形式可以让用户加深对产品的印象。

 

3-2 Google Nest Hub音乐播放控制界面

在Google Nest Hub的音乐播放界面,当你想开启或暂停音乐播放,只需要手掌隔空朝着屏幕方向做按压动作,就可以快速触发相应功能,这种方式让用户会感觉很爽,自己就像有了魔力。

 

3-3 Google Nest Hub闹钟控制界面

早上闹钟响起时,需要用户选择关闭闹钟还是稍后提醒,常见的情景是,用户睁开眼伸手去点击某个选项,会干扰想要接着睡的用户。Google Nest Hub在此处增加了隔空操控手势,用户如果想关闭闹钟,只需要闭着眼,手掌朝着屏幕一挥手,就可以搞定了,有没有被宠爱的感觉。

 

3-4 HomePod 音乐投射功能

苹果用户如果想将手机上正在听的歌曲通过HomePod播放,只需要将手机靠近HomePod,就可以轻松完成音乐投射,整个过程就像将一个容器的内容倒入到另一个容器内,既充满趣味性又大大简化了音乐播放设备切换的过程。


4.提供个性化、多样化的选择

通过设计语言为用户提供更多的视觉风格,甚至开放编辑权限让用户更自由的制定自己喜欢的形式,这些都可以满足用户的个性化需求及专属感,请看以下案例:


4-1 Sony HUIS遥控器

Sony HUIS遥控器为用户提供了最大限度的自主编辑权,用户可以从后台设定每个按键的形式及功能,也可以在屏幕中设置户型图,方便控制对应的设备。


甚至可以绘制只有自己理解的专属图案,大大提升了专属感。

 

4-2 三星智能冰箱屏保

用户具有喜新厌旧的心理,三星智能冰箱为用户提供了丰富的屏保:有没有任何信息展示的抽象几何艺术画风格、有配合温度展示的春夏秋冬风格、有简洁素雅的时间显示风格、还有照片背景墙风格;兼顾了用户日常装饰和功能的需求。

 

4-3 Lenovo Smart Clock

Lenovo Smart Clock对于时钟屏保为用户提供了不同的风格,涵盖了大多数的人群风格喜好:活泼跳跃、实用直观、极简现代、抽象艺术、纯文字、纯数字等

 

甚至在同一种风格中再细分为多种色彩搭配方案供用户选择。可以说想尽办法来满足用户的个性化需求。


5.统一的设计语言及操控逻辑

这里的统一设计语言有两个方面:一、同一个功能在不同的智能设备上布局要一致;二、同一类设备在APP中的功能布局要一致;操控逻辑统一指的是:产品中设备的操控方式要和用户对实际设备的认知一致。一致性可以降低学习成本,提升更稳定的操控体验。请看以下案例:

 

5-1 温控器多端控制界面

Nest温控器及ecobee温控器在设备上的设计语言和App上的保持一致,方便用户在多端设备上的无缝操控体验。移动端与智能设备界面唯一不同的是,移动端,同一层级上展示的功能入口更多,适合更复杂的操作;

 

5-2 Orvibo 移动端设置界面

在移动端设置智能面板功能按键的界面中,Orvibo将按键列表做成与实物一致的样式,便于用户快速找到对应的按键进行设置,这是提升智能家居一致体验常见的方式。

 

5-3 三星SmartThings 功能卡片

在智能家居App中,由于功能种类繁多、内容不确定等因素,承载它们的卡片在布局设计上面临很大挑战,需要兼容各种功能、还要保证卡片的整体一致性及合理的屏效比;在SmartThings智能家居控制系统中,三星对功能卡片进行了统一的部署,卡片左上角为功能名称,左下角为状态信息,右下角区域为操控区,并且还考虑了只有功能控制没有状态、只有信息没有功能控制情况下卡片的拓展形式。充分保证了操控的一致体验。

 

5-4 Google Nest Hub调光灯控制界面

在调光灯的操作逻辑里有这么个问题:是将亮度值调至0%关闭灯光还是需要一个单独的开关按钮。看看Google是怎么做的,它将调光区域与灯的开关做了区分,也就是说亮度通过调光区域操作最低为1%,需要通过开关按钮进行关闭;这样做的好处是操作逻辑明确,并且当用户在80%亮度下关闭灯光,下次开启时还是80%的亮度,更加人性。


总结:

发表一下个人的心得,内容是关于如何选择正确的产品提升方法,目前网上各平台的智能产品界面有很多,然而大多都是不落地的概念稿,里面的设计稿由于没有具体场景及需求的约束,大多都无法解决公司实际项目中的问题,经常浏览仅能提升个人审美。只有平时通过对各行业实际落地产品的搜集积累和分析,才能发现它们在提升产品体验道路上的共通点、差异点,从而为公司提供真正有价值的设计方案。


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

作者:土木君    来源:站酷


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

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

戴森Dyson Link智能产品解析

资深UI设计者

这篇文章主要探索Dyson App 各版本界面的差异点、交互方式;以及为了平衡用户与品牌方,设计做的努力,从而开拓我们的设计思路。


0 产品背景

根据互联网消费调研中心,了解到戴森的消费者大致有三个特征:高品质消费、重视生活之美、新生活开启者。重视生活之美的消费者更注重设计美观、独特、有辨识度的产品。

戴森品牌定位:高端、黑科技、高颜值。

下面我们通过案例去了解戴森是如何通过设计满足品牌方和消费人群的。



1-1 首页1.0

表现层:

戴森APP 1.0首页通过模拟房屋、颜色变化来向用户直观展示屋外、屋内的空气状态;整体来看拟物化可以很直观的向用户展示信息,房屋的造型给用户一种温馨家的生活之美,更有辨识度。

 

功能层:

屋外主要有天气、AQI(空气质量)、温度、湿度、PM2.5、紫外线等信息;

屋内主要有Wifi强度、房间名称、屋内空气质量、温度、湿度其它信息、设备图片;

页面左下角为设备控制入口、右下角为时间设置;底部可以通过左右滑动切换设备类型。

繁多的信息虽然给用户专业的感觉,但无形之中削弱了信息的层级,并且有的图标使用不准确,用户不知道是什么。页面中使用产品图可以强化自身产品品牌,增强产品辨识度。



1-2 首页2.0

戴森APP 2.0首页相比1.0,区分了信息层级,增强了操控体验。

功能层:

根据用户使用习惯,屋外只保留了空气质量等级、温度、湿度这些常用的信息;

扩大了房间区域,为信息提供更多展示空间,降低视觉干扰。屋内保留Wifi强度、房间名称、屋内空气质量、温度湿度,将设备核心功能入口外显,用户可以更便捷去操控设备,提升了易用性。

 

表现层:

使用局部放大的产品,用圆形衬底,并且还可以体现设备开关状态,这样做可以统一不同产品下的画面,增强了用户对于产品状态的感知,从而强化了产品品牌。

 

体验层:

首页通过上滑、下拉等手势可以查看关于空气质量的更多详细信息,将主次信息分级,既能凸显首页主要信息,还不影响用户快速查看详情的效率。



1-3 Smartmi P1

表现层:

相比戴森,Smartmi P1在灰底上只保留空气质量、Pm2.5、产品图,大留白,从而凸显的是简洁的科技感。

 

功能层:

功能上也做了整合,简化了操控细节,为用户提供了自动、睡眠、中速、自定义等快捷选择。

两个品牌对比来看,戴森体现了家的温情,Smartmi P1则体现了简约的科技。

在家电市场中,厂家都希望消费者提高购买频次,界面底部滤芯的剩余使用时长,可以起到提示用户及时更换滤芯的作用,从而提高购买频次。这一点还是值得借鉴的。



1-4 戴森界面色彩使用

表现层:

通过查看戴森店铺装修风格、流程界面缩略图,发现戴森将它的品牌色——黑色、紫色贯穿至每一个需要引起用户注意的元素上,视觉感受上更有一种“黑”科技的感觉,强化了品牌感知。



1-5 空气质量等级可视化

表现层:

对于空气质量等级颜色的选择,戴森与空气质量指数(AQI)等级颜色保持一致性。

室内室外颜色均可根据空气质量等级显示不同效果,可以给用户提供更加直观的感受。

Smartmi P1 则是通过文字和部分颜色来体现空气质量等级,用户感知弱。



1-6 空气质量等级详情

表现层:

空气质量详情页,戴森和SmartP1均使用色块体现等级,戴森使用的面积更大,更加明显,P1则一贯延续留白的简洁科技感。两者都有数据分析功能,戴森通过刻度、细线条、更加规整的布局,看上去更具专业性,品质感。



1-7 空气污染物质量等级说明

功能层:

戴森和Smart P1都有各个空气污染物等级的说明,用户可以了解当前空气质量情况及显示规则。

Smart P1 可以让用户设置哪些空气污染物显示,空气污染物等级说明在一页显示,用户需要上下滑动来查找相关污染物。

戴森将污染物类型做成导航形式,用户可以快速选择要看的类型;

 

表现层:

范围区间和对应的颜色放一起,强调了他们之间的关联性,并且可以承载更多的说明信息。



1-8 在App中如何融入产品

对于硬件厂商,在设计界面时,其中一个重要的需求就是“在界面中体现产品”,从而增强产品的独特性、辨识度。那么如何做才能恰到好处的向用户展示产品信息呢?来看看戴森怎么做的,具体主要有两方面:

1、App中产品出现的节点;2、以什么形式展示产品。

最顺其自然的就是在设备控制界面放置对应的产品,其次就是在引导页中体现,可以很直观的告知用户如何操作及产品当前的状态反馈。

最后还可以在登录页、空状态页作为装饰元素出现。

 

产品展现形式在控制界面及引导页面要尽可能展示产品当前场景下的样子。

例如:在调节角度界面,用俯视图可以更加直观体现旋转角度的状态。

在房屋界面,由于只需要体现设备状态,所以用45度视角尽可能体现产品独特的造型细节。

在登录页使用产品线框图作为装饰元素,减少对文本内容的干扰。



1-9 戴森空气净化器控制界面样式

表现层:

首页上空气净化器选取常用的功能作为快速入口,并且使用圆、圆角矩形作为按键外框,我们看它的实体遥控器、产品造型,就知道为什么要用这2种形态了,这样可以延续戴森的产品特征,使得整体品牌更具辨识度,达到强化品牌渗透的目的。

右下角为设备控制详情入口,通过使用不透明白底与快捷功能键作出区分,还能保持整体性,品质感。



1-10 空气净化器控制详情页

表现层:

控制详情页放置产品实物图,可以直观展示产品状态,功能图标前期做了区分归类,保证每一行的图标尺寸一致的同时确保它们之间的相关性。角度设置界面,产品使用俯视图,可以直观展示角度信息。



1-11 空气净化器操控手势

体验层:

对于用户常用的操作使用滑动手势,例如:风量,长按上下滑动可以很方便设置等级,松手返回确认,风量按钮可以显示风量等级条,用户不仅可以通过数字了解风量等级,还可以通过进度条更直观感知风量大小。



1-12 快捷键功能权限定义

功能层:

从画面中可以看出,同样的风向设置按钮,在首页,点击后只能进行开启、关闭风向;进入控制详情页,则可以设置具体的角度值;保证在不同场景下即可以快速便捷控制设备,也可以精确控制设备。



1-13 戴森扫地机控制界面

表现层:

最左边的控制界面是最早的版本,只有启动或停止机器的功能,使用带角度的视角来展示机器与场景,并且机器是可以进行移动擦除动画,体现运行中的状态,这种方式比较耗费开发时间。

 

中间的界面是过渡版本,较上一个版本做了优化,采用正视图,并且增加了运行强度、运行区域、定时功能,底部的地板元素渐变处理减少了画面对功能入口的干扰,既能体现场景,还更加易用。

 

最右边界面为最新版本,放大了产品,减少了不必要的视觉元素,弱化了地板背景;充电图标和设备状态放置顶部,与功能区做区分;运行强度选项由展开变成收起,估计这个功能使用频率较低;运行区域、定时功能的图标做了优化,更加贴切。视觉和功能得到了完美的平衡。



1-14 戴森灯光控制界面

功能层:

灯光控制界面,主画面是灯顶部实物图,值得一提的是,点击图片上的开关按钮就可以实现灯的开启关闭,很直接;点击开关上部的区域,会弹出色温、亮度调节界面。功能区域和实物结合的形式值得我们学习。



1-15 戴森灯光场景功能

功能层:

右下角为场景选择,可以选择系统自带的灯光使用场景,例如:读书模式、休闲模式,也可以自定义,可以方便快速设定光线。



总结:

通过对戴森App的分析,我们了解到了可以通过拟物或者将功能控制区与实物结合的方式,提升用户操控体验及产品品牌辨识度;对于硬件产品App,要尽可能保持与实物的一致性,突出产品特征,包括按钮形状、色彩;还有就是可以学习到戴森为了平衡用户与品牌方的需求,在视觉层面、交互层面的细微改动下的思考方式。

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

作者:土木君    来源:站酷


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

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

支付宝 双12内容场景化营销探索

资深UI设计者


今年支付宝双12的营销活动刚刚结束,在这次的12月生活优惠节项目中,我们设计团队以“分享生活小甜蜜”为主题提出了内容场景化营销的设计策略,并这里分享下我们的设计思路跟各位设计师交流下.有意向加入我们团队的小伙伴也可以联系下我们.
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索
收藏
「支付宝」双12内容场景化营销探索

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

作者:蚂蚁设计集团    来源:站酷


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

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

                         

行为设计的产品应用

资深UI设计者

行为设计就是通过一些方法来引导行为,博取用户的注意力和时间。用户每次使用产品都是一次和产品交流的旅程,在这个旅程中,我们可以通过一些方法来影响用户的决策,引导用户的行为,从而达到产品目的。



斯坦福大学的B.J.福格总结了行为模型:

B(Behavior行为)=M(Motivation 动机)+A(Ability能力)+P(提示Prompt





从这个模型中可以看出,福格教授把行为归结为3个影响因素:动机、能力和提示

  • 1 动机:一个人想要做一件事情首先需要有意愿,意愿越强越能促进行为的成功。
  • 2 能力:这个人必须可以做到这件事,这件事越容易,做成这件事的概率就更高。
  • 3 提示:提醒去做这件事。

这三个因素又是以什么样的具体方法对我们的行为进行影响的呢?有以下几个方面:





动机是做出行为的欲望,是人行为的动力源泉,动机也是最难提高的。

2.1 社会认同

人是群居动物,有强烈的社会属性,在判断什么是正确的时候,人们通常会根据其他人的意见行事。而且通常我们对社会认同的反应方式是无意识的,特别是在自己内心有不确定性时,最有可能认为大多数人的选择是正确的。

在产品设计中,“多数人的选择” 常常会作为一个重要的信息展现给用户。比如寸土寸金的淘宝首页推荐卡片里会把XX人付款作为露出信息。网易云音乐会把播放量当做歌单的必要信息之一。都是告诉用户,看,许多人都购买了这件商品;看,好多人都选择听这首歌,如果你也这么选应该不会错。



「Airbnb」 的详情页,有XX条评价,XX人推荐,都是在告诉用户,这是一间靠谱的,让人放心的好民宿,是众多人的选择,你可以放心的按下“预订”按钮。



2.2 权威

「 权利服从研究试验 」
1961年,耶鲁大学心理学教授斯坦利·米尔格拉姆做了“权力服从研究”实验,证明了绝大多数人对权威有服从性和信任感。 实验中有一个学生单独在一个房间里,负责实验的科学家向他进行提问,如果回答错误,科学家就会要求接受实验者通过控制台对学生进行电击,电压从15V到用红字标注着危险的450V。尽管电压上升,学生尖叫时,大多数接受实验者都会有所犹豫或抗议,但还是有65%的参加者服从了科学家的指令。这些参加者涵盖了20-50岁,各种教育背景的人。这个实验证明了大多数人都会对权威信服,甚至去虐待一个陌生人。

人对权威有天然的服从性。在产品应用上,我们可以通过放权威性的信息,获得用户信任感,从而促进行为的发生。比如五常大米会把自己的官方认证码放在上面,告诉用户自己是官方五常大米;被李佳琦这种意见领袖推荐过的商品会写明自己是李佳琦推荐;



「 得物 」则提供第三方平台检验真伪后再发货,让用户买的放心。而大众点评则开创了黑珍珠甄选,作为优秀餐厅的官方认证背书。都是用“权威”触发用户的顺从心里,获得用户的信任感。



2.3 稀缺

人们普遍相信“物以稀为贵”,对某样东西失去的恐惧,会比获得这样东西的渴望,更能激发人们的行动力。渴望拥有一件众人争抢的东西,几乎是一种本能。限量版的球鞋,限量版的手办都让人狂热,仿佛沾上“限量”两个字,它的价值就可以翻上几翻。

在产品设计里这样的例子也很常见,营造产品的稀缺主要有两类:数量稀缺和时间稀缺。

  • 数量稀缺

淘宝的收藏,京东的“即将售罄”等都告诉你有限的货物已经是低库存状态,已经快要卖完了,你若再不快点购买就很有可能会失去拥有它的机会,来增加紧迫感。



  • 时间稀缺

而商家经常推出的限时优惠、限时秒杀功能,则是用营造时间的稀缺感,告诉用户时间有限,再不买便会错过这难得一见的低廉价格,促使用户马上行动。



2.4 预热

「 舒兹多巴胺试验」
剑桥大学神经科学教授沃夫蓝.舒兹(Wolfram Schultz)做了一个实验,研究脑内奖赏系统。这个实验也很有趣,它不仅可以作为预热行为的论证实验,还可以作为行为设计另一个重要模型峰终效应的论证实验多巴胺是大脑中传递兴奋、开心的物质。可以引起激动感、迫切感或渴望感。猴子每次在得到香蕉之前都会先点亮一盏灯,而后才会得到香蕉,几次过后,研究人员发现,每次灯亮时猴子分泌的多巴胺越来越多,而在得到香蕉时分泌的多巴胺越来越少。多巴胺分泌峰值是在亮灯时。这种期待的快感比实际吃到的快感更强烈。


「 淘宝试妆 」 用AR技术让我提前体会到的“拥有这只口红”的快乐。在贝壳用AR看老破小的时候,因为房间破旧杂乱给房子的感官大大减分,但经过一键AR装修后,仿佛看到了我拥有这套房子改造之后的样子,怎能不心动。



2.5 认知价值

认知价值是一种利益动机。当人们清楚的认识到一样东西“物超所值”,便会促进行动。

「 海淘的APP考拉 」 在让我续费会员时,会告诉我之前购买的会员卡为我省了一笔大钱,用300多元卡费省下1989元是多么明智之举。所以,“放心续费,这波不亏”。同时买会员卡还可以领其它家会员,续费还可以用红包低价购买我常买的东西,统统都是在告诉我续费会员卡的价值。

「 拼多多的月卡 」让我印象深刻,在让我开月卡的详情页,会直接把红包列出来:给4张5元的无门槛券,还有价值174的别的券。这些明明白白的优惠只需要7.8元就可以拥有三个月,简直不要太划算。



2.6 宜家效应

“宜家效应”是由美国行为经济学家Dan Ariely提出。源自有很多人热衷于购买宜家的半成品家具,付出劳动自己进行组装,并为此感到成就感。 当人们对某件事物的投入越高,对它的感情就会越深,就越会认为它有更高的价值。宜家效应是一种认知偏差,也是一种内在动力。


在产品设计中任务系统勋章设计正是用了这个原理 ,

比如QQ的能量值,需要通过互动、购买等行为获得的,这图标本身的意义是不大的,但它却是在qq中行为活动的象征,炫耀的资本;

想要获得运动软件KEEP中的勋章,就要付出体力:进行。这些勋章不仅仅只是一个标识,因为我的付出,让它们每一个都很有意义。



2.7 好奇心

好奇心也是人的一种内在动力。 激发好奇心,唤醒用户兴趣,促使用户进行下一步行动。

尤瓦尔·赫拉利的著作人类简史中里面有个观点:
人类发展成尼安德特人之后有一部分发展成智人,另一部分没有。是什么让尼安德特人发展成智人呢?是好奇——强烈的窥探欲和交流欲,让尼安德特人慢慢发明了语言,最后成为智人。好奇心,是人类本能。

比如「 知乎 」,首页信息流都是用问问题的方式勾起用户对不同内容的好奇心,是点进去查看的动力。社交软件Soul则通过好奇心驱使用户进行多维度的灵魂测试,看看自己是个什么样的灵魂以及需要什么样的契合。

淘宝的收藏,京东的“即将售罄”等都告诉你有限的货物已经是低库存状态,已经快要卖完了,你若再不快点购买就很有可能会失去拥有它的机会,来增加紧迫感





从福格行为设计模型里面可以看出,用户对做一件事情的能力越强,干扰和纠结越少,能力门槛越低,这个行为就越容易触发成功。

3.1 简化流程

简化流程可以避免造成不必要的流失。

比如很多软件在截图之后会直接弹出分享或下载选项,让我在当前页面便可以进行操作。 在登录注册时很多软件可以直接记录手机号,让用户可以不用输入信息一键登录,减少操作步骤,促进登陆行为的发生。



3.2 精简文案

有研究证明一个成年人的阅读速度大约是每个字250毫秒,多行的文字会给人造成压力,专业性文字会让人觉得难以理解。

一个小程序中的一个删除确认弹窗,之前的有个版本放了大段文字想要解释如何把删除的任务从回收站复原,在做调研时发现到这个流程时用户就会卡住,阅读这长段的文字,双眉紧簇,不知如何是好。



3.3 简化选择

选择过多会让用户无所适从,虽然用户希望有更多的选择,但从数据上看,过多的选择只会降低转化。

美国认知心理学先驱,G.A.米勒 做了一系列的实验,得到了得出了人类工作记忆的上限徘徊在7+-2项。称为“米勒定律”。后来的科学家们重新评估回忆结果并修正实验方法后,目前的数据表明,真实的工作记忆是4到5项。

「贝壳APP」中,对用户提问不能接受最老的房子,给出的选项并未对时间做过多的细分,可以让用户用最快的速度分辨信息做出选择,不耽误继续浏览信息流。在租房提示面板中看房时间和入住时间也只给出4个选项,让用户快速阅读快速选择。



同样是做用户反馈,「 饿了么 」使用了简洁的文案和2个选项,「 美团买菜 」择用了两行文案和一个很多选择的选项,相比之下,美团买菜的用户调研让我太有压力了



3.4 辅助选择

有时会因为某些原因不得不给用户提供多种选择,过多选择带来的内心纠结和思来想去往往只会拖延行动,甚至还会让行动不了了之。因此

帮助用户进行选择,减少他的无所适从。

「 贝壳APP 」会帮助用户做房源对比,在价格,户型,面积,朝向,装修等等方面进行对比,帮助用户进行更好的决策。「 喜马拉雅 」会在我听完一个节目后根据我近期所听内容推荐我可能喜欢的内容,而不用用户再去费心费劲的搜索。



3.5 降低门槛

对于用户想做,但能力又不足的事情,降低门槛可以有效的促进用户行为的发生。

比如「 微信读书 」的无限卡兑换门槛很低,读1分钟,读1小时,读3小时就都可以兑换,除此之外还有很多很多的常驻活动都能兑换无限卡,降低读书行为的门槛,让没卡这件事,尽量不要成为读书的阻力。

「 京东支付 」会有京东白条的选项,可以分期付款,降低消费能力的门槛,促进购买行为的发生。





提示是提醒行动的信号,仿佛在对你说“现在就行动”,它必须是个明显的存在。大多数人都无法抗拒的想要点APP上的红色数字标签,它们就是被刻意设计出来吸引注意力,促使我们行动的。

在产品中常用的方法也有很多,比如动效、异形、颜色对比、大小对比、情绪对比等。

比如「 闲鱼APP 」首页的标签栏中,把卖闲置这个按钮做了颜色和形状的特殊处理,让它成为底部栏中最与众不同的一个,吸引用户触发点击。美团优选“新人礼包”弹窗用鲜明的高饱和度红黄配色,让用户满眼都是“它”










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

作者:360uxc    来源:站酷


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

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

送你一份logo设计攻略

资深UI设计者

随着设计全栈化,产品对设计师的需求愈发多样,UX设计师也常要求参与品牌运营类设计需求,比如logo设计,相信大家也会经常碰到;我们的UX设计师在Logo设计过程中遇到了各种各样的问题:一句话需求,选择困难,反复修改,难以细化……
经过尝试摸索,360用户体验中心的UX设计师们从设计思维的角度出发,整理一套Logo设计方法论供大家一起学习探讨,相信能帮助全栈设计师们解决一些实际问题。
此攻略可以帮助你从初始判断Logo设计,到产生Logo方案,再到选择方案,最后进行设计调优四个重要阶段提供切实可行的方法。
收藏
此攻略可以帮助你从初始判断Logo设计,到产生Logo方案,再到选择方案,最后进行设计调优四个重要阶段提供切实可行的方法。
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
收藏
送你一份logo设计攻略
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系。 

作者:360uxc    来源:站酷


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

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

“老字号”互联网产品的年轻化之路

博博

年轻化设计已经成为互联网产品设计中不可避免的话题。此次百度文库年轻化改版不只是对“产品的外表”进行升级。


一、项目背景

百度文库APP是一个在线文档分享平台,上线已有十余年的时间,是一款名副其实的老字号互联网产品。随着互联网的成熟以及年轻用户的涌入,时代语境和流行文化发生了变化。年轻化设计已经成为互联网产品设计中不可避免的话题。在日常对用户反馈的监测中,我们发现文库APP当时的体验已经不能满足用户多样化的需求。并且在体验走查以及用户访谈中发现,文库APP的视觉风格、交互方式、使用感受都存在老旧、不贴合流行趋势的问题。

二、由内而外,打造年轻化感知

通过对年轻市场进行洞察,我们发现年轻用户对产品的需求是多维度的。不仅对产品的“颜值”有高要求,他们更追求使用时的便捷和流畅度。他们对新鲜事物的接受程度更高,也更愿意去探索产品新的玩法,与产品进行沉浸的情感互动。

所以此次年轻化改版不能只是对“产品的外表”进行升级,要从视觉、体验进行全方位、多维度的年轻化升级。由内而外的打造年轻化感知。



三、“老字号”互联网产品的焕新之路

2.1 视觉升级-更好看















2.2 体验升级-更好用









写在最后

从UI设计诞生初期,设计师在屏幕上模拟现实世界的交互方式,用拟物化的设计风格帮助用户熟悉UI界面操作。到现在用户对移动屏幕越来越熟悉,设计师们可以在产品设计中去尝试更多的可能性。产品与用户共同成长才是年轻化设计的意义。

未来,我们也会保持好奇心和探索欲,不断打磨产品体验,与用户共同成长。


感谢阅读,以上内容均由百度MEUX团队原创设计,以及百度MEUX版权所有,转载请注明出处,违者必究,谢谢您的合作。申请转载授权后台回复【转载】。也欢迎加入MEUX视觉/交互/运营设计师,可投简历至MEUX@baidu.com (注明信息获取来源如:站酷)

关于我们:
MEUX,百度移动生态用户体验设计中心,负责百度移动生态体系的用户/商业产品的全链路体验设计。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。MEUX以「简单极致」为设计理念,创造极致用户体验的同时赋能商业,推动设计行业的价值和影响力,让生活因设计而更美好。


作者:百度MEUX
链接:https://www.zcool.com.cn/article/ZMTQ5MzgwMA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



作者:百度MEUX      来源:站酷



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

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



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



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

真没想到做一个分享页,用了我一个星期的时间

资深UI设计者

今天来改一个海报分享页的设计,这是最初的设计:

修改后:

我们分成两大块说说本次改稿思路:

1. 海报设计

2. 海报分享页的整体设计

第一部分 海报的设计

现在海报上的内容排版看着挺随便的,没有啥设计感。

海报上要放的内容不多:用户头像、名称、日期、文字、品牌信息(logo)

一开始我也没有太多的修改灵感,但是在看了许多参考图后,发现几个共通点,这几点完全能够运用在类似的设计上,让海报更有设计感。

第一点:数字/日期的特殊处理

特征总结下来就是这三点:

1.对某个数字单独用不同的字体

2.数字用更大的字号

3.与其他文字结合而出的特殊排版

用以上的思路,改一下我们的稿子:

这样是不是好一点?

第二点:海报采用实景的照片,那文字最好用白色

观察类似的参考,几乎99.99%的实景图上的文字都是采用白色。

不排除有的分享卡片用的浅色图、黑色字。

观察得知:

浅图黑色字,重在强调文字内容,对比更强烈,而深图浅色字,文字更融入画面,更温和一些.

这里我们更想采用浅色的文字:不用那么强调文字,重在让画面更和谐。

第二部分 海报分享页面的设计

第一点:遮罩用什么方式?

除了海报本身之外,整个分享页面也是要设计。

大多以背景图叠一层毛玻璃遮罩,看起来更有质感。

这种设计相比于纯黑色透明度的遮罩方式要更有层次感,不至于那么平,也让页面更聚焦在海报本身。

第二点:分享弹窗的几种形式

a. 将分享方式一屏全摆出来

适用于用户可分享的方式 不是那么多的情况,否则会占据画面太多高度。

b. 侧滑

用户可分享的方式很多的话,可以采用侧滑。缺点是需要用户滑动才能看到后面的功能。

在这里我们只有五个分享平台,用不着再侧滑,直接都摆出来就行。

第三点:取消按钮的形式

a. 底部按钮:更容易操作关闭

b. 海报上部的“阴暗角落”:更不容易点击,相较也不那么容易被发现。

究其原因可能是,产品想让用户去分享,不想让用户很快就离开这个页面。

取消按钮也用不着那么强调,修改后:

c. 分享弹窗的右上角:不如a更易点击,但比b好点

最后一点:除非是分享长图,否则海报最好一屏就展示完。

这也是我之前忽略了的一点,导致做出来的海报展示不全。

总结

很多的 APP 都有海报分享功能,这次看了许许多多的类似设计,并且把通用的点,总结分享给大家,我总结的这些,希望能对你有帮助!~


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

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



作者:花菜    来源:站酷





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



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

                           

为什么总感觉我的设计比较土?

资深UI设计者

这些天遇到了些问题,在进行视觉设计的时候,老是觉得自己设计上差点意思,总觉的哪里不太满意。

也不是不好看,就是觉得还能够设计得更加深入些,不管是从板式、字体、图形、颜色等方面。

为了找到解决的办法,我不断的去欣赏别人的作品,从站酷到behance,从behance到各类获奖作品。

嗯...为什么别人能够有这么新颖的设计想法?我总结来几点大家。

借用大师的元素

这是世界三大平面设计之一冈特·兰堡的作品。

这是不是会给你一些灵感?我第一眼感觉这有点熟悉,似乎在别人的作品中运用过这种版式、元素。

在这版设计中,与冈特·兰堡的作品相似之处就有:黄底黑字的横条和蓝色调的背景,再结合一些设计图形,就能产生出一种新颖的设计风格。

就是在大师的视觉中提取元素灵感进行转化,运用在我们的设计中会有不一样的视觉体验。

我们接着看他的其他作品。

这张作品就能给我很不错的灵感,把想要突出的地方用强烈的对比手法进行设计。或者将想要突出的元素进行特殊化处理。

类似于这样的作品。

当灵感有限的时候,我们就可以静下心来分析一下其他大师的作品,认真观察大师的作品,有哪些地方是可以提取灵感出来。

再结合自己的设计让其提高升华,让自己的作品耳目一新,使作品获得新生。

保持这种发掘思维去分析作品,久而久之你就会有源源不断的灵感浮现脑海里。

尝试做出差异化

你走你的阳关道,我过我的独木桥,反其道而行,虽然在国内市场不太友好,但是尝试一下走独木桥的感觉,是否会带给你不一样的反馈。

特立独行的视觉,做出差异化会给人们一种新颖的视觉观感,就会吸引用户,就比如乔布斯手下的苹果产品,打破了当时对电子产品的认知,且对细节的把控极致到位。

人们其实都有视觉疲劳,长时间的保持这种风格,难免会让人觉得平庸,突然出现的新颖视觉或想法,就能够打破这种局面。

好比这个官网,首页第一屏在我们印象中就是一个banner,在我们做网站的时候就认为第一屏就是应该放个banner在那里!

我们就好像思维固化了,第一屏就非得是个banner吗?我们可以根据企业的属性进行判断,我们是否还有更优的方案,尽可能的赋予设计灵魂。

类似于这样的首页是否就是反其道而行呢?与同行就拉开差别了呢?自己品牌更加深入人心呢?

比如一个正常的首页,在开始设计时,最顶部的是导航栏,导航栏中最左边是一个logo,其次在右边是产品介绍等等...

我们有没有想过为什么会这么布局?我们可以反问自己:这种布局是最合适的吗?最好看的吗?还有没有更加合适的方式?

这种方式把logo放中间突出品牌就挺不错的。还有一些把导航栏折叠起来的。

刚开始我们是这样布局的,这就很普通没有做出差异化。

我们是不是可以把文案进行精细处理,提取重要的词句,把他们放大,要有视觉冲击力,重要的元素再次放大!

这样布局方式就新颖很多,突出了主要文案,加强了视觉冲击,又加深了品牌印象。

扩大搜索范围

没有新颖的想法往往是自己的思路、思维还没有打开,开始进行视觉设计的时候:选择这类行业自己认为还不错的视觉方向,开始进行视觉输出。

那就错了,假如开始设计APP,只找一些APP的视觉稿那肯定是不够的,风格就比较单一,你的视觉参考都不够丰富,怎么能够做出让人眼前一亮的风格!

我们不妨跳出圈子出来观察!

可以去看别人品牌设计的、数字艺术设计的、图形设计的、包装设计的、服装设计的甚至产品设计的都可以。有可能是某一个小地方让你有所启发。

大量的看,觉得很好的视觉就思考:我们的视觉是这样的会不会更好!

就比如这张视觉稿,色彩很艳丽,颜色跨度很大,有黑色的粗线,如果把这风格运用在APP视觉上会是怎样的效果?

看到一张足够吸引你的视觉稿,就想想如何转化到工作中去,那可能就会有不一样的视觉风格。

所以在设定风格时,

不局限于同行。

不局限于风格。

打开搜索范围,让头脑风暴更猛一些。

总结

做设计不是完成任务,所思考的是多方面的,好的设计是得花很多心思的;得保持冷静,让自己放松,着急或者有压力的心境下你的思绪是乱的,根本就做不了设计。

所以有时候做设计得脸皮厚一些。

再者平时的审美积累是非常重要的,这个就相当于你的底子,有底子往上爬的速度也会快一些。

做到这些你就离大师不远了!

最后,设计是永无止境的探索!加油共勉。


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

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



作者:橙汁    来源:站酷





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



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

再也不怕做排行等级类的需求了!

资深UI设计者

大家平时多的界面应该都是常规类型的居多,应该很少会接触到游戏类型的界面设计吧?哈哈。今天就给大家分享一个游戏类型的排行榜界面,看看是怎么做。和咱平时的又有什么不同呢?

先来看看效果:

确实和普通页面还是有很大差异的哈,可以发现所有的模块更风格化,也蕴含了光影细节在里面。

这样一张界面细节很多,我们今天主要讲讲1、2、3名的头像框怎么做出等级差异。

1. 明确风格

首先我们就要先明确游戏风格的界面和普通界面有什么不同,特点有哪些,造型、光影、质感等等。

明确了才能动手去执行。

2. 等级差异

大家平时应该也会遇到很多排行类的需求,需要做出等级感。那是如果如何表现等级差异的呢?我主要是从以下三个点去推进,分享给大家:

2.1颜色

·主色:

首先就是三个等级的颜色差异

比如第一名最尊贵,我们就可以选用和背景色对比最强烈的金色去表现。

金色本身也带有尊贵感。

第二名和第三名的颜色就可以选用背景的类似色或者同类色比如紫色和蓝色,让它们在视觉上天然的弱化下去一个等级。

·微渐变:

采用微渐变的形式,让颜色更丰富,不会显得很平,同时靠颜色的变化也能表现出轻微的质感。

2.2复杂度

第二点就是复杂度了。

这个很好理解,就是越重要的,在造型上就会有越多的细节和层次。第一名层次细节非常丰富,第三名就简简单单的,从造型上表现出等级差异感。

2.3大小

比较常规的一个方法就是大小差异了,第一名最大,二三名一样大就可以了。

3.细节精致度

明白了原理,怎么把细节做到位也是很重要的,我们拿第一名框的造型举例,说说是怎么做出复杂度这么高的造型的。

3.1 重复

先有一个基础圆,然后我们重复几个。这一步很简单,很多同学都会做。但也有很多同学到这就做不下去了。重点要学会后面怎么做。

3.2 圆的对比

全是相同的圆就会显得很重复,没有细节。我们可以调整圆线段的不同粗细、形式去增加细节。

把他们组合到一起看看。

有点那味了,有些同学做到这一步就不知道该怎么继续了,可能会继续加圆,这肯定是不行的。

3.3 丰富基础形

如果我们继续加圆圈可能又会变得重复了,这是因为我们的基础形单一,所以我们要加入别的基础性在画面里去。

为了方便理解,我们加入一个比较直观的形状正方形看看:

正方形组合又组成很多三角形,造型一下就丰富了很多!所以基础形状的多样性是我们丰富造型很重要的一个点哦。

本案例就加入了其它相对更复杂一些的基础形,效果会更细腻一些,但道理是相同的。

4. 加入点缀和光影

因为是游戏风格的,加上一点外发光更有感觉,再加上一些星星点缀,可以进一步提升丰富度。

看下页面效果:

等级差异明显,造型精致,整体还是比较满意的。


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

作者:菜心轻量文    来源:站酷


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

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

不知道怎么继续优化?那是你没看这几点!

资深UI设计者

01 颜色掉层次了

很多时候,我们会发现,我们加的质感有点平,比如像下面这种:



很明显,这种地方就有点平:



原因就是因为“颜色掉层次了”,我们只需要在他的中间再加一层颜色,就可以让它的质感饱满起来。

具体步骤就是,我们可以先给它加一些“形状”然后进行羽化:



我们可以看下前后对比,这样就不会那么平了:



一旦发现质感有点平,就可以用这种“颜色掉层次”的思维去尝试优化!

02 颜色要透

这是一位同学做的质感临摹练习:



颜色有点太闷了,不够透彻,我们先来把颜色弄的透一点,我用圆形来表示,首先我们的颜色不能太重,弄个小渐变:



这是我们的一个基础,如果感觉明暗对比不够,可以再适当加强对比:



然后加一点反光,这是非常灵魂的一个步骤:



然后再加一点左上角的高光:



这时候我们再来加中间的暗部形状,我们看原版的有一个很大的问题,就是中间的暗部爱心和背景有点糊在一起了:



就是因为两层都是暗色,所以没有区分开,所以这也是为什么我们把背景色调亮的一个原因,我们把中间的形状加上去:



然后再来个内阴影和边缘光:



大功告成,我们再来对比下前后的质感:



是不是好了很多。

03 不重要的颜色千万不能高饱和

有时候我们会觉得自己的设计有点主次不分,这种感觉往往和颜色有关。

下面两个圆形,你会觉得那个更吸引你的眼球:



对,没错,肯定是第一个,因为第一个颜色的饱和度比较高,颜色比较纯,所以更加吸引眼球。

那我们看下面跟米同学的启动图标作业:



感觉所有颜色有点糊在一起,甚至感觉背景比形象还要吸引眼球,就是因为背景的颜色饱和度太高了!

当跟米把背景的颜色饱和度降低时,我们再看下效果:



我们可以很清晰的把视线聚焦在吉祥物的身上。

所以我们在做视觉的时候,一定要注意,你的重点是什么,注意饱和度对比、明暗对比,千万不要本末倒置!

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

作者:菜心轻量文    来源:站酷


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

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

日历

链接

个人资料

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

存档