首页

10个优秀的UI/UX设计技巧

seo达人


一、利用手势辅助实现快捷操作

利用手势交互辅助隐藏式功能操作,可以在不改变当前结构的基础上实现快捷操作,带给用户更加便捷化的体验。

夸克 APP 在访问了多层级页面之后,如果想要快速回到浏览器主页,点击返回按钮一级一级返回过于繁琐。通过底部导航栏向上进行滑动,可以快速激活返回主页的操作,手势辅助实现自动跳转。该设计解决方案通过手势辅助隐藏功能操作,提高了用户对于产品的使用体验。

图片

图片

    

二、点赞设计的情感化探索

点赞在阅读类场景中随处可见,用于表达用户对内容的认可度而产生的情感共鸣,通过点赞给予赞同。点赞设计的创新已逐步在探索,通过更加情感化的设计表达提高用户体验,借助手势的变化呈现出更有趣味性的点赞设计。

今日头条 APP 单击点赞图标会随机性弹出表情化符号,多次点击会持续弹出更为丰富密集的表情符号,长按则会像模拟持续发射的特效,伴随着音效和震动带来“视听触”等多重体验。点赞设计的情感化探索不仅带给用户多重感官体验,也是用户释放阅读压力的一种情感共鸣。

图片 
 

三、情感化的点赞文案设计

除了从点赞视觉感官层面进行设计探索以外,众多产品也在文案提示设计上面进行情感化探索。

AcFun APP 在对话题等内容点赞时,会弹出温馨的文案提示,每次点赞都会出现不同的文案。情感化的文案设计提高了话题互动的活跃度,带给用户更好的社交互动体验。

图片 
 
 

四、突破常规的模式切换设计

设计都在探索差异化的感官表达,如何突破常规至关重要。无论是在布局结构层面还是元素情感化表达层面,设计师都在尝试更有创新的表达,带给用户不一样的使用体验。

Wonder APP 在模式切换上做出了一个新颖的设计解决方案,通过环形卡片设计进行模式切换,可以单击和滑动进行切换。动态的卡通形象增加了感官体验,流畅的卡片切换也带来了不错的操作体验,是一个在布局层、视觉感官层、互动层等方面的不错探索。

图片

[优化输出图像]

 

 

五、特色的签到展示设计

签到设计对于大家来说并不陌生,提高用户签到的参与度是大家都在不断思考和探索的方向。

AcFun APP 将签到设计成日历展示形式,点击签到之后弹出,配合日历运势的概念来设计,提高用户的签到兴趣。内容却不是正式的日历运势相关内容,配合趣味化的文案设计,让用户会心一笑。视觉感和情感化文案设计的融入,提高了签到设计的感官体验,进而提高用户的参与度。

图片 
 

六、自定义字号提高阅读体验

通过公众号等自媒体进行阅读已经成为大家的习惯,不同公众号编辑内容都会有所不同,字体大小和行间距等没有特定的规范。官方虽然会有默认设置,但是无法兼顾不同的内容需求。提高小编的编辑体验和满足用户的阅读体验,自定义的阅读调整至关重要。

在公众号阅读文章时,可以通过右上角的功能入口进入“调整字体”。用户可以根据自己的阅读习惯设置字体大小,在标准和自定义大小之间切换,提高用户的阅读体验。

图片 
 

七、自选色实现更灵活的个性换肤

个性化的皮肤主题在众多产品中已经运用普遍,当用户体量增加之后,个性化的设置才能满足不同用户的体验需求。

酷我音乐 APP 在个性换肤模块中,除了设置多个主题皮肤供选择以外,用户还可以通过自选色设置更加灵活的配色风格。可以选择更多推荐的配色风格,也可以通过色环自己调节任意颜色,满足不同用户对于感官体验的需求。

图片 
 

八、自定义图满足用户的创作欲

对于一些追寻个性化较强的用户,预装的自定义设计已经无法满足他们的体验需求,激发用户创作欲的设计迎面而来。

酷我音乐 APP 在个性换肤模块中,用户可以通过“自定义图”实现更加个性化的皮肤。用户可以选择任意拍摄的照片,然后通过透明度和模糊度来调节照片效果,满足自己对背景效果的要求。针对按钮的颜色也提供了几个配色选择,用户可以根据自己调节后的背景效果进行搭配。基于更加个性化的需求满足用户的创作欲,才能带给用户更加人性化的使用体验。

图片 
 

九、关联功能叠加设计提高使用率

为了提高功能的曝光度,直接展示在用户的视野中是很多设计师的处理形式,但是却增加了感官层面的视觉负担。

幸识 APP 把关联功能进行合并式的叠加设计,不仅对视觉进行降噪,由于属于关联性的操作,用户更容易通过功能联想进行使用。当用户点击观看“时间戳”时,底部功能会被替换为“发起”,发起时间戳和观看本身就是一个流程的体验。当我们遇到关联性功能设计时,不一定选择各自展示,相互叠加或者切换式的交互设计也是不错的解决方案。

图片 
 

十、趣味性爆满的点赞设计

点赞是用户情绪化表达的关键,表示对于内容的认可度和作者的支持度。普通的点赞设计已经无法满足一些情绪爆满的用户,更加趣味夸张的设计在逐步被探索。

微博 APP 针对点赞设计单击时,出现表情化的符号弹出,持续点击或者长按点赞图标则会出现色彩丰富、表情符号四处爆发的视觉效果。一场趣味性爆满的视觉盛宴,满足用户释放情绪的最大化需求。

图片

源图像

 

小结

在用户使用体验和感官体验层面探索了这些优秀的案例,希望可以抛砖引玉,带给大家更多启发。发现设计背后的思路,总结设计表达的经验,运用优秀案例的技巧,提高我们的设计解决能力。

以上总结仅代表个人观点,如有不足欢迎大家留言补充,我们互相进步。

 
原文地址:黑马家族(公众号)

作者:黑马青年
转载请注明:学UI网》10个优秀的UI/UX设计技巧

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

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

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

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

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



太简单了!别人要做一小时的页面,我用这些效率插件一键生成

seo达人


01 替代重复繁琐操作的效率插件

• 智能填充

做设计时,同学们一定遇到过这种情况,某些模块需要用图片或文字进行展示

用单调的图形和随意的文字占位不够真实美观,手动添加图片编辑文本又太麻烦,能不能有工具帮我一键随机生成并填充?

当然可以,「智能填充」插件就是专门解决这类问题的。

选中任意文本,即可选择智能填充人名、时间、日期、段落及对话等 9 种不同的预设内容;选中非文本图层、分组或画板,就可以智能填充人物头像、风景、美食等 8 种类型的无版权图片。

 

• 快速复制

做设计时,很多同学会遇到一个页面中需要出现多个相同模块的情况,比如商品列表、视频页、相册等等。

处理起来也不难,多按几次 Ctrl+C 和 Ctrl+V 就行。但复制出来的模块经常重叠在一起,还需要逐个拖拽排版……时间就是被这样浪费的。

但其实,这些繁琐的步骤完全可以用「快速复制」插件一键搞定。

只需做好第一个,选中全部图层,打开插件,设定好横向与纵向的复制数量及间距,点下按钮就能一键复制。

像我演示用的这个即时设计的插件,复制完成后,还预留了按钮,点一下就能打开「智能填充」,很贴心。

 

• 文本拆分

还有专门用于处理大段文字的「文本拆分」插件,能将一个文本图层拆分为多个,方便分别设计排版;也可以将多个文本图层组合为一个重新编辑。

类似的提高设计效率的插件还有很多,例如:

「图标尺寸调整」——可以批量调整不同 icon 及其外框大小;

「字体替换」——批量替换设计稿中使用到的所有字体,并保持原有文本样式属性;

「查找替换」——能搜索定位文本内容并替换,且不改变原有文本样式。

 

02 整合图标字体的资源插件

各种各样的免费或付费的素材库给我们提供了很多便利,但也不是所有类型的资源,都适合下载文件,再导入使用的。

比如图标和字体这两类,使用频率非常高,如果每次都需要下载导入安装,无形中就增加了很多重复工作。

所以,很需要有一些工具,来让这两类资源的取用更加便捷,比如,图标插件和字体插件。

 

• 海量图标—— iconify、iconfont & IconPark

现在的图标库都能直接下载 SVG 格式,所以不用太考虑颜色尺寸的问题。

但做设计久了,就会在电脑里存下许多图标文件,整理起来属实麻烦,都删掉了又可惜,万一哪个还能用到呢?

这时候,如果安装几个图标插件,就没有这些问题了。

点开插件,搜索想要的图标,选中图标并修改尺寸和颜色,直接拖拽使用。

国内常用的 iconify、iconfont 和 IconPark 都已有插件接入。

 

• 字体方案——字由插件

做海报、封面、banner 图的时候,同学们应该经常会用到很多不同风格的字体。

但经常会遇到精挑细选并下载安装了好几款字体后,发现用在作品里视觉效果并没有那么好,还得重新找字体并安装……

面对这种情况,最省事的方式应该用类似「字由」的第三方字体插件来管理字体

安装字由客户端后,里面的字体方便查找,点一下就能激活,然后直接在设计时使用,帮我们省去了很多检索和下载安装字体的步骤

这里需要提出的是,Sketch 和 XD、PS 这些本地软件应该都是支持字由的,在线工具的话,目前只有「即时设计」支持字由,Figma 也是完全没办法用的。

当然,即时设计的字体方案还是值得一说的,其实之前也提过挺多次了,“本地+云端”的多种方案,最大的亮点是:

1. 个人设计师不止可以使用本地安装的字体和「字由」的字体,还能免费上传自己的字体文件到云端和其他人一起使用。

2. 团队的版权字体还可以直接上传到团队共享库,所有团队成员都能随时在线使用,完全不用下载安装。

 

03 提供图形配色方案的插件

• 图形生成——不规则图形

我经常给星球的同学们布置一些作业,而在设计过程中最常用的装饰元素之一,就是不规则图形,看起来简约又高级。

需要不规则图形时,最常见的做法是用钢笔工具自己画一个,但还有更快捷的方法,用「不规则图形」插件随机生成斑点或者波浪

这类插件一般包含很多预设方案,点一下就能随机生成。

如果觉得随机“摇”出来的图形不合心意,还可以自己调节修改。斑点的锚点和曲率,波浪的高度、层数、峰数都支持自定义。

双击生成的不规则图形,还能继续拖拽修改形状。这么一通修改下来,只有复制粘贴才能得到两个完全相同的图形了。

 

• 色彩使用——渐变色

同学们在设计作品中,经常会用到渐变色,但是很多同学不擅长调出好看的渐变色,做出来的图看起来很脏,尤其是颜色跨度较大的时候。

这种情况下,一个收录若干经典配色的「渐变色」插件就能帮上大忙。

如图我用的这个渐变色插件,就收录了来自 WebGradients 的 180 种线型渐变配色,可以一键快速填充;给出的渐变色方案,也都很具备学习参考的价值。

 

 色彩搭配——图片取色

我还找到了一个非常适合用来参考和使用色彩搭配的插件——「图片取色」。

优秀的摄影或设计作品中都具有极为丰富且和谐的色彩搭配,而「图片取色」这个插件可以识别图片中 5 种主要颜色,方便我们学习配色、汲取灵感。

用起来也很方便,选中图片,再点一下「图片取色」,就能精准识别图片中配色,并按照颜色占比依次展示。

 

04 点一下秒安装/卸载

今天的插件就先分享这些了,上面的演示我都是用「即时设计」做的,Sketch、Figma 应该也都可以找到不少类似的插件。

如果想要快速感受一下的话,可以直接打开即时设计,插件广场里还有很多,安装卸载也很方便,点一下就行。

安装完回到编辑页面就能直接使用,展开的列表里,每个插件在名字旁边还配有简单易懂的图标,一眼看过去就能更快地定位自己想要的插件。


总结

提高效率减少重复操作,到整合常用资源让取用更顺手,再到图形色彩的方案提供

即时设计充分照顾到设计过程中最常见的一些问题,已经能满足我大部分的需求了。

除了已有的这些,即时设计还在持续上新,官方还表示之后也会像 Sketch、Figma 一样开放第三方插件

现在只想喊他们快点开放,我已经迫不及待想看看,国内的大神能做出什么样更好用的插件工具了!

链接我放在下面了,对这些插件感兴趣的同学们,可以去体验一下~

即时设计插件广场:

https://js.design/pluginSquare

 

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

作者:菜心

转载请注明:学UI网》太简单了!别人要做一小时的页面,我用这些效率插件一键生成

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

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

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

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

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



金刚区图标设计的 10 大风格

seo达人


图片

 

目录

一、晶白风格的扁平突破

二、磨砂玻璃质感的运用

三、强化图标微质感的深入

四、2.5D 风格的巧妙结合

五、三维的立体感强化

六、插画风格的简化融入

七、立足于品牌的图标设计

八、造型叠加丰富色彩搭配

九、动效图标强化局部差异

十、主题化图标风格普及

 

一、晶白风格的扁平突破

晶白风格是通过白色质感来实现的,通过对图标元素进行透明度变化、投影、内阴影、外发光等进行设计,使得更有层次感。

相较于扁平化的图标设计来说,晶白风格更有层次感和质感,作为金刚区图标设计运用非常普遍。除了通过白色不透明度渐变来实现以外,也会随着背景或者环境色的变化融入色彩渲染,呈现出更丰富的设计细节。

晶白风格图标就是通过两端白色渐变,配合两端颜色不透明度来进行深浅控制,也可以通过内阴影和外发光等来增强质感。众多设计软件都可以实现,灵活性非常高。

图片

 

二、磨砂玻璃质感的运用

磨砂玻璃质感的设计表现是近些年较为流行的设计趋势,被广泛运用到视觉设计的众多领域。在 UI场景中作为视觉感强化被普遍应用,其中在图标设计上的表现尤为突出,呈现出了众多的优秀案例。

金刚区作为产品架构中的重要组成部分,也是更新较为活跃的部分,对于视觉感的要求非常重要。磨砂玻璃质感的图标很多产品都会阶段性使用,也是因为这一类风格具有典型的特点和视觉张力,能够形成比较大的视觉差异,带给用户不错的感官体验。

磨砂玻璃质感图标可以通过 Sketch、Figma 等软件的背景模糊功能实现;如果是 PS 和 AI 等没有背景模糊功能的软件,则可以通过模糊度结合剪切蒙版来实现。实现的方法很多,大家可以多多尝试,这是一类比较容易掌握的图标风格。

图片

 

三、强化图标微质感的深入

图标设计从写实到扁平,再到微质感,都在不同的时期进行改变,通过风格的优化避免用户的视觉疲劳。写实类图标视觉疲劳度较大,在年轻化的趋势中显得过于繁琐,而介于写实和扁平之间的微质感被深入探索。

微质感的深入可以使得图标风格突出,质感和层次感强化了图标的立体空间感,在整个界面中可以形成视觉差异。可以体现出模块的重要性,也是图标设计感体现的一种方向。

通过渐变色、不透明度渐变、投影、内阴影等形成层次变化和光影效果,多图层刻画来强化图标质感和层次感。

图片

 

四、2.5D 风格的巧妙结合

2.5D 也称之为伪三维,在前两年非常流行,作为插画风格延伸出来的,当时 2.5D 插画被普遍运用到众多领域。把一个独立元素作为原子,通过原子的数量分布形成 2.5D 场景。

将 2.5D 风格结合到图标设计中,可以使得图标更容易形成立体感,设计师不会受制于透视基础的薄弱。无论是 C 端还是 B 端场景中的金刚区图标都比较适合,很容易基于简单的立体造型上设计出丰富的变化。比如结合玻璃质感、微动效或者其他设计趋势均可,设计的驾驭度很高。

2.5D 风格的图标很容易掌握,只要绘制好基础原子部分,就可以演变形成各式各样的 2.5D 造型。可以通过 AI 软件的 3D 功能轻松绘制,大部分场景都是基于立方体、圆柱体等基础造型进行变形。

图片

 

五、三维的立体感强化

三维类的图标设计相较于 2.5D 风格来说,空间感和透视角度更加深入,光影的变化更加丰富。图标设计中的三维立体感强化,对于设计师的要求更高,掌握一个三维软件需要一定的学习成本。

随着 C4D 等三维软件的走热,掀起了一股学习热潮,被运用到金刚区图标设计中,带来的视觉效果也是非常不错的。较强的空间立体感和光影效果,在界面中的视觉呈现尤为突出,也能带给用户更好的感官体验。

图片

 

六、插画风格的简化融入

随着用户对于感官体验的升级,风格特征的差异化体验至关重要,而插画风格的融入可以提升图标设计的特征感。

插画风格运用到图标设计中,需要做简化处理,可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中,不仅可以使得图标具备差异化的视觉效果,也能烘托出整体设计的质量。

通常矢量风格的插画类图标比较常用,由于图标占比限制,不合适表现特别繁琐的插画风格。可以是微场景的插画表现,或者是局部元素的插画表达,这一类图标风格将会在未来被广泛运用,以此来提高图标设计的视觉差异化表达。

图片

 

七、立足于品牌的图标设计

立足于品牌做设计,这是设计师需要深入探索的方向,而金刚区图标设计亦是如此。品牌基因融入到图标设计中,可以辅助突出产品的品牌感,也能形成设计表达的差异化。

品牌基因化的图标设计具备一定的特征性,也是视觉差异化的一种形式。通常的做法有将品牌色全部融入图标中,或者品牌色作为图标配色点缀;也可以提取品牌 LOGO 辅助图形形成基因图形,融入到图标造型设计中;也有结合吉祥物来突出品牌感的,融入吉祥物造型、局部图形、轮廓图形等;如果图形角度无法提炼,也有提取品牌文化、服务特征、用户群体特征、行业特征等,从中提炼关联性的图形融入图标设计中,以此来强化品牌感。

品牌作为设计的思考起点,不仅可以输出差异化的设计作品,也能串联起整个项目设计的规范。

图片

 

八、造型叠加丰富色彩搭配

如果觉得质感一类图标表现力比较繁琐,但是又不想只是简单的线性或者面性图标,造型叠加和配色叠加形成的图标风格算是介于两者之间的存在。

通过图形之间叠加丰富图标造型,叠加部分配色的调节丰富图标色彩搭配,形成的图标风格比较年轻化。视觉效果也是深受年轻用户的喜欢,带来不错的感官体验。

这一类风格的图标可以通过布尔运算设计图形部分,颜色的叠加效果可以通过图层样式实现,也有一些是图形分割之后进行分别着色的。通常叠加部分的颜色会往更深的方向延伸,大家可以尝试不同的形式去进行配色,选择符合主题的图标配色效果。

图片

 

九、动效图标强化局部差异

微动效运用到图标设计中尤为普及,特别是在金刚区模块,可以作为突出功能的强化。动效图标已经成为一种独特的表现力,相较于静态来说更有吸引力,也能带给用户更加趣味性的感官体验。

在金刚区模块中,动效图标通常是用于区别特殊功能,或者需要重点突出的服务或者主题活动等。不改变整体图标的风格,只是动态和静态的区分,需要个别做动效,形成表现力的差异才能达到重点突出的目的。

作为设计师来说,动效也是需要掌握的基础技能,可以提高我们的设计表现力,也能将交互动作表达得更清楚。

图片

图片

 

十、主题化图标风格普及

随着情感化设计的普及,金刚区图标在特定主题节日也会进行氛围强化,主题化图标设计越来越多。

比如在春节、中秋节、国庆节、端午节等场景中,根据主题设计图标更能体现我们是有温度的产品。可以是主题元素的融入,或者主题氛围感的渲染,要嘛就是主题文案的融入,形式已经是非常丰富了。虽然不同节日主题效果各有差异,不过这一类主题化的图标设计,已经成为非常普及的风格特征。

除了节日主题以外,根据运营需求也会进行主题化强化,众多自定义主题活动也会结合到金刚区图标设计中。这一类视觉表现力比重较大,视觉感统一性较强,带来的视觉张力和感官体验都非常不错。

图片

 

小结

金刚区在产品中就像百变金刚一样,随着众多因素而变化,是更新迭代较为活跃的。图标设计的风格也是丰富多样,本文仅是抛砖引玉,总结了 10 个较为流行的图标设计风格或者趋势。

希望这些案例总结可以加深大家对于金刚区图标的风格认知,大家也要继续体验探索,总结出更多风格特征,强化我们的图标设计能力。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》金刚区图标设计的 10 大风格

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

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

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

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

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



构图太常规?教你一个过稿率超高的构图技巧

seo达人

很多平面设计作品都喜欢用几何图形来进行构图,比如把画面布局在一个几何图形内,或者用一个几何图形与画面主体元素进行组合。

图片

图片

图片

 

一、这种构图有几大优点:

1.能使画面更整体、更聚焦。

把画面控制在一个几何图形内,就好比用栅栏把羊群围了起来,各元素可活动的范围缩小了,外轮廓变得更简单了,画面自然会更整体、更聚焦。

图片

 

2.加强画面视觉冲击力

几何图形内的图形集中区域,与几何图形外的留白可以形成强烈的虚实对比、轮廓对比、色彩对比等,故视觉冲击力可以进一步加强。

图片

 

3.增强形式感

如果画面的元素比较单一,而且也不是很有创意和特色,那么形式感和设计感往往会比较弱,而如果用几何图形进行构图,通常会对原有的图形进行裁切或规范,画面就会变得没有之前那么普通。

图片

 

4.减少创作时间

这一点在插画作品中尤为明显,如果采用全屏式构图,那么设计师就得把整个矩形画布都画满素材,但是如果用几何图形构图,那么重点展示主体区域就好,没有足够的空间展示太多辅助的元素和场景,所以可以省去很多创作时间。

图片

 

5.便于文案排版

对于一些文案比较多的画面,如果画面布局太慢,那么文案的排版就会比较麻烦,如果把文案压在画面上排版,既会破坏画面的美观性,也会影响文字的识别性。

图片

 

二、常用的几何图形

1.圆形

圆形是最常用于构图的几何图形,因为圆形本身就是一个很完美的图形,美观、平衡且聚焦性强,圆形与矩形的版面也能形成鲜明对比。

图片

图片

 

2.圆环形

圆环的内部空间比较小,所以适合素材比较多的情况,也常常会配合圆形一同使用。

图片

 

3.半圆形

半圆虽然没有圆形那么好看,但是更特别、更平稳。

图片

图片

 

4.椭圆形

由于正圆在很多时候并不适合展现某些画面,这时候椭圆也是一个不错的选择。

图片

图片

 

5.圆角矩形

圆角矩形融合了矩形和圆形的一些优点,既不会像矩形那么硬朗和常规,也比圆形更灵活,更能适应不同的画面需求。

图片

图片

 

6.菱形

菱形的感觉比较尖锐,适合一些科技属性比较强的风格和品牌。

图片

图片

 

7.三角形

三角形与菱形一样,也具有较强的科技属性,且通常会用到三角形而不是正三角形,因为正三角形过于平稳,缺少动感。

图片

图片

图片

 

8.其他图形

图片

图片

图片

 

三、注意事项:

1.根据画面特点选择合适的几何图形

首先,每一类几何图形都有一定的调性偏向,所以要根据自己的产品调性和主体调性来选择一些气质合适的图形,例如母亲节、清明节的海报用三角形来构图就不太合适。

图片

 

其次,如果想把现有的画面用一个几何图形进行剪切,那么这个图形最好能够比较完美地保留画面的主体部分,同时也要保证该几何图形内的构图是饱满的、平衡的。

图片

 

2.关于“破”的处理要节制

用几何图形进行构图时,大多数情况下都可以使用“破”的处理方式,即让图形内的部分元素打破图形限制,这可以使画面看起来更活泼。但也要节制。

❶ 避免过多元素使用“破”的处理,否则画面容易变得凌乱、不聚焦。

图片

 

 

❷ 不是所有采用几何图形构图的画面都要使用“破”技巧。对于一些很简约、调性比较高级、画面是摄影图片的设计,通常不太适合使用该技巧。

图片

图片

 

3.排版可以呼应几何图形

为了避免文字排版与图形完全是割裂的,我们可以在排版时与几何图形形成呼应,比如用文字绕着图形排版。

图片

图片

 

或者是把文字与图形交叉排版。

图片

图片

图片

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

作者:葱爷

转载请注明:学UI网》构图太常规?教你一个过稿率超高的构图技巧

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

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

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

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

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



近期输出的一些UI设计探索作品

seo达人

软件:Sketch & Adobe Illustrator

图片  

以下作品主要是练习通过 Sketch & Adobe Illustrator 软件配合实现立体图标设计,掌握通过色彩的变化营造质感和光感。 

图片
图片 

以下作品主要是练习圆柱体的绘制和光影的处理,以此来表现排行榜。配色比较趋向于年轻化,青春活泼的风格探索年轻化的设计趋势。

图片
图片 

这一组作品主要是研究极光风的配色和磨砂玻璃效果的结合,用磨砂玻璃层作为图标的保护罩,带来朦胧美的感官体验。

图片
图片
图片
图片 

随着网民年轻化的趋势,UI设计也逐渐趋近于更加青春活泼的风格。探索了一组低饱和度高明度的图标配色,利用不透明度渐变实现晶白风格图标。

图片
图片 

这是在五一假期前绘制的一个相机 APP LOGO,探索多色环形组合来进行色感营造,利用简单的内阴影和蒙版工具刻画效果。

图片 

一组带给大家好心情的 IP 表情设计作品,超椭圆的造型和青春可爱的风格结合,练习表情设计的能力和光影把控的技巧。情感化设计的技能被逐步放大,也是提高作品亮点和视觉感的一个不错的方向。

图片
图片 

想要休息的时候来了一个灵感,大家都喜欢喝咖啡,我还是比较喜欢喝茶~O(∩_∩)O哈哈~有感而发绘制了一个关于茶的 APP LOGO。

图片 

带有纹理的球体绘制,你可以想象这是一个瑜伽球。利用 AI 软件的 3D 功能进行造型绘制,然后利用 Sketch 软件进行质感细节的刻画完成。

图片 

这组作品主要是研究 B 端设计的栅格化系统,以及配色风格的尝试。随着 B 端 C 化的趋势,在 UI设计层面的风格探索中,将会变得更为大胆,突破风格定义的束缚。

图片
图片
图片
图片
图片
图片 

以上是近期输出的一些 UI设计探索作品,后期将会继续探索更多设计风格和细节的刻画。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》近期输出的一些UI设计探索作品

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

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

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

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

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



7个基础的用户体验设计细节

seo达人


1、专注于20%

maggelato

你可曾听说过80/20法则?简而言之,80%的用户通常只会使用你网站内容和功能的20%,绝大多数的用户只是在扫视网站内容,并且只会挑选真正感兴趣的浏览。

同时这也意味着,剩余的20%就相当重要了。大多数的点击将源自于这一区域,它也是近乎完美的内容和互动区域。

你可以借助数据分析来决定哪个部分是整个网站最被关注的那20%。对于刚刚上线的网站,这个数据搜集的过程可能长达好几周,随后再进行调整。

当然,你也可以通过引导将用户引流到你希望用户去的那20%的区域。借助视觉引导和行动召唤设计来引流,用有趣和有意思的设计来营造令人有兴趣的区域,让他们乐于点击,从而达到目的。

2、架构式的思维

goldhill

设计一个网站和搭建一所房子其实差不多。首先,它需要一个坚实的基础,然后是能够承载所有内容的框架,做好后要好好装饰一下。同样的思维模式可以套用在网站的设计上。

更重要的是,你并不需要为此创造出过去从未在框架中出现过的东西,换言之,框架内的素材、组件和我们常见的并无二致。就像导航设计模式一样,现在的设计都趋于一致,因为这样的导航好用。

当网站的整体结构搭建起来之后,可以将相同的思路套用到内容体系的构建上来。主要的正文内容是整个网站内容的基础,辅以吸引人的标题、图片,配合上其他的次要元素,整个内容体系可以很快搭建起来。

3、不要要求太多

assos

现如今的世界可以说是由数据所驱动,越来越多的应用开始要求用户注册,要用户提供更多的权限,更多的信息,以期为用户提供更加个性化的体验。但是从体验的角度上来看,要尽量规避这一点。

站在用户的角度稍加思考你就明白了。找到一个令你感兴趣的炫酷网站,如果要深入了解更多内容,就需要内容,而如果要注册的话,网站却需要你提供下面10个类型的信息:姓名、邮件、国家、地区、城市、电话、Twitter权限、个人网站、工作职位、以及如何发现这个网站的。

那么接下来,你会怎么做?绝大多数的用户会直接转身离开,这个注册信息填写起来太费劲,体验太差了。

那么,如果你当你点击注册的时候,只需要一键从Facebook或者twitter授权即可,那么你会不会立刻点击呢?至少从目前已有的数据来看,绝大多数的用户会这么选择。

4、令人愉悦的微交互

evernote-1

可能很多时候你都没注意到,你和各种微交互进行的互动一直都存在。

·谷歌日历弹出框提示你每周例会要开始了
·短信提醒
·午睡的闹钟
·微博上的新粉丝和转发提醒

这样的例子我们可以连续不断地说上一个小时。这些带有微交互的提醒和动作会推动用户进行下一步操作,带来愉悦的体验,它们不能设计得非常醒目,但是又需要适当地吸引用户注意。

这些有趣的微交互的加入让用户从中获得好处。而你需要思考的是,有哪些东西是你的网站或者APP当中,用户想要立刻知道和获得、想被提醒的?

5、甚至幼儿都能轻松使用

statusshop

如果要给小孩子设计产品,那么它应该是什么样子?你可能会更专注于色彩的使用,让每一个区块都可以轻松点击,明显的标签,加上拼图式的连接方式。

所以,当我们在设计网站或者APP的时候,我们会说这个产品要足够易用,那么怎么才算得上“足够”呢?让小孩子都可以轻松使用,这就叫足够易用。换句话说,即使是不经常使用网站和APP的成人,也不会存在明显的使用障碍。

超大的设计元素和标签是设计的关键因素。这些视觉线索是帮助用户引导用户的核心,是整体体验设计中最重要的部分。大胆的色彩选择,会鼓励用户点击和探索。

如果它足够易用,用户会继续尝试使用和探索。而难于理解操作不便的导航自然会被用户所嫌弃。如果网站包含太过复杂的媒体和内容,那么不妨从一个设计简单的首页开始,几个简单的导航点击将用户引导到对应的位置。在深入到更复杂的页面之前,用梳理清晰、简单明了的分页让用户感到舒适,这是带来好的浏览体验的不错解决方案。

6、轻拍(Tap)还是点击(Click)?

espns

这一点要说的并不是设计问题,而是一个常见的开发代码的问题。虽然Tap和Click两者都能在点击的时候触发,但是在移动端网页上使用Click事件 的时候,会有200ms 到300ms 的延迟,所以在移动端上最好替换为Tap事件。在进行响应式网页设计的时候,一个事件从头用到尾的错误出现得很普遍,但是有太多的移动端网页在这样的设计下会有明显延迟,更恶劣的情况是无法识别,这样会直接损害到整个页面的易用性和功能本身。

此外,移动端上使用 Tap事件的时候,它所对应的按钮应当相对更大一些,便于小屏上进行交互。

7、像用户一样思考

justact

我们一直在说:“像用户一样思考”。但是实际的情况往往是,我们很难走出设计者和开发者的思维方式,因为我们的思维方式压根就和用户不同,面对每一个交互、每一个元素的下意识反应是不一样的。

所以,还是同设计圈、开发圈和产品圈以外的人去聊聊吧,看看他们对于网站和APP的真实反应到底是怎样的。你可能会在观察中发现,他们对于产品、对于交互、对于界面的反应和你的预期完全不同。将用户的真实反馈记录下来,反馈给项目组,这样可以帮你打造更好的用户体验,创造更优秀的产品。

原文地址:designshack

译文地址:优设

作者:Carrie Cousins

优设译者:@陈子木

转载请注明:学UI网》7个基础的用户体验设计细节

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

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

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

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

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



你的设计有依据吗?详解用户体验设计中的规律与逻辑

seo达人


shejiyiju_001 shejiyiju_002 shejiyiju_003 shejiyiju_004 shejiyiju_005 shejiyiju_006 shejiyiju_007 shejiyiju_008 shejiyiju_009 shejiyiju_010 shejiyiju_011 shejiyiju_012 shejiyiju_013 shejiyiju_014 shejiyiju_015 shejiyiju_016 shejiyiju_017

原文地址:站酷

作者:孔雅轩LineVision

 

转载请注明:学UI网》你的设计有依据吗?详解用户体验设计中的规律与逻辑

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

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

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

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

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



在不同屏幕和设备上创建用户体验设计的8个步骤

seo达人


1. 确定核心用户体验

每个产品都有核心的用户体验,这基本上是它存在的原因。它解决了人们所面临的问题,而且为他们提供有意义的价值。关键内容和功能的组合代表了核心的用户体验。要查找你的产品核心用户体验,就要问自己一个问题:“客户需要完成哪些最常见和最重要的任务?”在你用于产品的每个渠道上支持这些核心任务的本质至关重要。例如,Uber的核心用户体验是任何时间随叫随到。无论屏幕尺寸如何,此功能都能在每个设备上正常工作实现这一目的。

Image title

                             预约出租车是Uber用户最重要的任务。用户可以使用Apple Watch完成此任务。图片来源: Techcrunch

 

2. 定义产品的设备组

尽管存在大量不同屏幕尺寸的设备,但绝对不能定位各个设备,可以根据用户可能关注的任务定义产品的设备组。最常见的设备组是:

移动手机

平板电脑

台式电脑

智能电视

智能手表

Image title

不同的设备组在不同的上下文中提供不同的服务:用户根据他们正在查看的屏幕的类型参与不同的交互模式。例如,手机主要用于微任务,并且具有较短的用户会话。平板电脑主要用于内容消费,目前不被视为大多数人的工作工具。在了解各种设备类型的基本上下文的假设对于构建一个好的用户体验是至关重要。

 

3. 适应每个上下文使用的体验

确定产品的核心用户体验后,选择一组你希望支持的设备组,你需要调整每个组的体验(对于每个上下文的使用)。上下文的设计在不同设备组设计时尤为重要。

第一,并非所有功能都在所有设备上都有意义。你需要确定你的产品在多个设备组中使用的不同场景,并设计适合每个场景的体验。例如,通常移动用户比电脑用户想要的不同于产品。以 Evernote为例,可以在多台设备上使用流行的笔记本产品。其电脑版本针对内容消费进行了优化:

Image title

                           用于电脑版本的Evernote应用程序被优化用于阅读文本和查看媒体。

 

而移动版本是针对拍摄笔记、照片和捕获音频进行了优化的:

Image title

Evernote了解移动环境:它利用设备功能,并提供快速保存想法的方式(添加文本笔记,捕获照片或设置提醒)。

 

第二,不同的屏幕允许不同的输入法。以触摸输入为例。在设计具有触摸输入(移动手机和智能手机)的设备时,设计师会犯的几个常见错误包括:

小的点击目标。点击目标(如CTA按钮)必须具有足够大的尺寸。通常至少7毫米是足够的,但最好使用10mm触摸目标尺寸。

Image title

                                      图片来源:UXMag

 

将项目过于紧密地放在一起。你应该考虑点击目标的大小以及它们之间的间距,因为间距有助于分离控件,并给你的用户界面提供呼吸的空间。建议的间距至少为23pt以防止输入错误。

Image title

                                                                                      按钮之间的间距

使用悬停状态。但在触摸屏上,没有“悬停”。

 

4. 最小屏幕设计

历史上,设计师一直从事大屏幕到小屏幕的设计工作,这意味着第一个也是主要设计是为了完整的电脑桌面视图(它具有最多的功能)。只有电脑桌面设计完成后才移植到移动设备和其他设备组。但当设计电脑桌面时,我们通常面临“厨房水槽”问题:许多功能被添加到产品中,特别是当涉及多个利益相关者时。这并不奇怪,,当你有很多不动产时,添加功能是比较容易。实践经验清楚地表明,最好使用移动方法进行设计,并通过与用户相关的最小屏幕创建应用程序。

当你首先设计相关屏幕的最小尺寸时,它会强制你决定最重要的。一段时间后,你将采用同样的方法仔细选择产品的其他版本,无论是电脑桌面设备,平板电脑还是电视。

Image title

在大多数情况下,手机将是相关屏幕的最小尺寸。如果可穿戴设备对你很重要,那么你将需要考虑具有更小分辨率的微型屏幕。

 

5. 不要忘记大屏幕

想想大屏幕以及小屏幕,给大屏幕和小屏幕提供同样的注意力:

不只是缩小设计,使其适合那些大屏幕。充分利用你可以使用的额外空间。

Image title

                                                                                           图片来源:Wikipedia

 

确保图像不会因为屏幕尺寸的放大而失去质量。

Image title

                                                左:低质量图像。右:正确的分辨率。

 

考虑大屏幕细节。每个设备组都有自己的不同。例如,电视屏幕的设计被称为“设计10英尺体验”,因为从沙发的距离来看,与电脑桌面屏幕相比,屏幕上元素的明显尺寸明显更小。

Image title

                                                                 电视的用户界面元素应大于电脑桌面。图片来源:Samsung

 

6. 提供一致的体验

一致的体验意味着应用程序及其在所有屏幕尺寸上的体验都是相似的。无论设备如何,一致的用户体验是成功的全通道用户体验的关键组成部分之一:

对未来与产品的交互设定期望,并建立用户信心。

一致的体验使得你的产品在其他设备上与用户的交互更容易。

你可以将它们视为相同体验的方面,而不是将设计定制到越来越多的屏幕和设备中。例如,Google搜索应用在所有设备上提供相同的搜索体验。

Image title

                                                 当设计和功能一致时,用户可以在他们选择的设备上更快更有效地完成任务。

 

7. 创造无缝体验

跨不同设备组创建无缝体验对你的用户非常重要。人们可以自由地在设备之间来回移动,完成任务,或当他们从设备转移到另一设备时,他们期望他们的产品和服务与他们一起转移。这意味着用户不必考虑他们正在使用的设备,环境的变化或上下文的变化,并且可以依赖于设备良好的功能性和独立于设备的易用性。

Image title

                  大多数人如何走过他们的一天,他们访问的主要屏幕。图片来源:Intercom

 

根据使用情况,你可能希望确保每个设备上的内容消耗量同步。以Apple Music为例:你可以在Mac上设置播放列表,并在iPhone上即时播放,也可以开始听iPhone上的歌曲,当你转到电脑桌面时,你将被拍摄回到你在iPhone上。

Image title

                                                                  Apple Music可以很好地处理多个设备的同步。

 

8. 测试你的设计

在测试环境中有效的并不总是在现实世界中。在实际设备上为实际用户运行可用性测试,你可以在发布之前发现用户体验的问题并解决它。

 

结论

在设计多个屏幕和设备时,最好的策略是保持最终的用户体验。作为用户体验设计师,你必须评估产品的使用时间,位置和方式,以评估用户的最佳体验。无论你的内容是什么尺寸的屏幕,用户都希望在各种设备之间获得流畅的体验。

 

原文地址:ADOBE BLOG

译文地址:UI中国

作者:Nick Babich

译者:SKYUI

 

转载请注明:学UI网》在不同屏幕和设备上创建用户体验设计的8个步骤

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

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

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

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

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



动效赋能 助力用户体验设计

seo达人


起源发展

动画发展大致经过了三大阶段,分别是从传统动画(纸笔)>>CG动画(离线渲染)>>互动动画(实时渲染)。随着时代变迁、设备以及技术升级,新的动画形式以及呈现载体不断的被创造出来。
动画发展的三大阶段

 

传统动画注重理论基础以及扎扎实实的基本功,并且是艺术学院必修课,宫崎骏的早期的动画就是传统的手绘动画。每一张都是纯手绘的作品,所以我们看到宫崎骏的动画会有完全不同于纯工业的动画的感觉。

CG动画是随着电影行业与游戏行业一并发展起来的,由于电影的工业化程度太高,技术积累也越来越深厚,所有游戏使用的工具与技术偏向电影那一套,但不同的是电影是离线渲染的,一部短片渲染几千个小时都算很正常。而游戏与电影不同,实时渲染必须保证帧速率,所以游戏行业最重要的技术核心就是改进游戏引擎。
互动动画想必大家更加熟悉,也就是游戏、web/app、VR/AR/AI、新媒体这些领域的动画,这篇文章我们主要讲的就是Web/App动画。
初期苹果Mac桌面文件夹的打开与关闭

 

从初期的MAC电脑到现在的iPhone X 不过短短的几十年,产品设计中动效的运用已经获得了巨大的进步。动效其实对于用户体验这个大专业来讲是一种新的学科,随着我们的设备的硬件条件越来越好,动效才被支持的越来越好,可实现的难度也才越来越低。
交互动画里有一部分依然是归为传统动画的,比如说Loading/插画动画/载入动画等等。这些可以动画需要多关注迪士尼12大动画原则(节奏&时间、运动曲线、预备动作、夸张、挤压&拉伸、次要动作、惯性、关键帧动画&连贯动画、动作表现力、感染力、角色个性),但是另外一部分则是扎根于产品设计的“交互”中。
CG动画与交互动画的区别

 

CG动画更加注重片子所表达的故事的完整性以及趣味性,大部分运用的都是超现实的手法,时长一般都5s以上,只需要开动脑洞只要软件技术能实现都可以发挥出来。
而交互动画更注重的是动效的合理性和可用性,动力学需符合真实的物理世界,还要注重整个产品内的动效的统一与协调。一般持续时间都很短在1s内,大部分动画在200-500ms内完成。整体来说动效都相对简单,不会太复杂因为要考虑技术可实现性。

 

 应用场景

这里我们只针对我们互联网产品设计讲一下交互动效的应用场景,我总结了以下七大应用场景,分别是图标动画、界面交互、插画动效、HUD大屏、汽车系统、项目包装、品牌宣传等等。

 

图标动效

一般来说图标动效适用于App或者web产品中,单个持续时间在100ms左右,根据图标的复杂程度以及实际使用的场景最长时间也不超过400-500ms。图标动效更注重微弱的变化带来的趣味性以及流畅性,常用于状态反馈以及导航引导,通过小小的变化可以为产品体验增色不少,优秀的还可以给用户留下深刻的印象。

 

界面交互 

一方面界面交互动效可以让人对产品产生深刻的印象,甚至是带来惊喜,另一方面表达了界面之间的交互过程,吸引用户的注意力。通过减少预判误差、增加连贯性、强调叙述、清晰关系四个方面来增加产品的可用性。

 

汽车系统 

汽车系统的用户界面以及动效一般都来说比较有科技感,动画会更加的酷炫。本质上来说汽车系统其实跟我们日常用的产品是一样的,由于行业定位的不同以及用户使用场景的不同造成了这些差异。

 

插画动效 

适用于App的引导页、运营活动、空状态页面、错误页面,展示型网站等等。在产品设计中插画动效一般有2种实现形式,一种是视频或者动态图片直接加载即可,另外一种就是开发同学通过技术手段来实现,SVGA、lottile、apng等等。

 

品牌宣传

http://mpvideo.qpic.cn/tjg_3563468614_50000_27353420971e4cc9bfc680ecff137bc3.f10002.mp4?dis_k=77967b65644a687675ed4f1eb1920a8c&dis_t=1568711387
这是韩国一家咨询公司Plus X做的一个App的宣传动画,这里说的品牌宣传更像是一个产品的解析以及意义的传达,更轻量化、片长更短、制作技法也相对简单一些。

 

HUD 

HUD可能很多同学都不知道是什么,给大家科普一下。HUD(Head Up Display)又叫平视显示器,最开始呢是运用在航空器上的飞行辅助仪器。平视的意思是指飞行员不需要低头就能够看到他需要的重要资讯。平视显示器最早出现在军用飞机上,降低飞行员需要低头查看仪表的频率,避免注意力中断以及丧失对状态意识(Situation Awareness)的掌握。因为HUD的方便性以及能够提高飞行安全,民航机也纷纷跟进安装,汽车也开始安装。后面延伸到像大家在科幻电影里面看到的那种智慧大屏,以及政府机关等等我看看到的那种蓝色动态LED大屏都属于HUD。

 

项目包装 

https://v.qq.com/x/page/r0824uenul0.html
上面的视频是腾讯的ISUX部门2018项目包装的视频,当时这个视频上线后,各大公司的UED部门竞相模仿,这个项目包装里面有很多项目都用到动效设计,包括礼物动效,表情动效、插画动效、logo演绎等等,这说明动效设计在互联网产品设计中的应用已经相当的广泛了,作品本身的效果加上简单的动画包装就可以做成一个动态的作品集,对于宣传团队是一个很不错的点,个人作品集也可以按照这个思路来做,肯定也会有很不错的效果。

 

设计语言

设计语言是指导统一产品设计的大脑,所以了解设计语言对于我们无论是做界面还是做交互设计以及动效设计等等都有很大的指导性作用。
上图中的6个是国内外比较知名的设计语言系统,大家应该或多或少了解一点,推荐大家有兴趣可以去看看他们的设计系统,相信会对你们有很大的帮助,对帮助构建你的个人设计体系也有很大的参考作用。
这里我们以Material Design为例进行讲解,给大家介绍一下这套设计语言以及设计语言内的动画模块在我们的工作中是如何运用的。
Material Design,是由Google在I/O 2014大会上推出的全新的设计语言,其灵感来自与真实物理世界及其纹理,包括真实物理世界如何反射光线和投射阴影,通过材料来重新构想纸张和墨水的一种介质。

 

其主要目标是:
创建:创建一种视觉语言,将经典的优秀设计原则与技术和科学的创新和可能性相结合。
统一:开发单一的底层系统,统一跨平台,设备和输入方法的用户体验。
定制:扩展Material的视觉语言,为创新和品牌表达提供灵活的基础。

 

基本设计原则:
大胆,图形,有意:Material Design以印刷设计方法为基本指导:排版、网格、空间、比例、颜色和图像。即创造层次、意义和焦点,让观众沉浸在体验中。
动效有意义:通过微妙的反馈和连贯的过渡,集中注意力并保持连续性。当元素出现在屏幕上时,它们会转换和重新组织环境,交互产生新的转换。
基础灵活:Material Design系统旨在实现品牌表达。它与自定义代码库集成,允许无缝实现组件,插件和设计元素。
跨平台:Material Design使用跨Android,iOS,Flutter和Web的共享组件跨平台维护相同的UI。
Material Design的要解决的问题以及设计原则大家应该都了解了,我们针对设计语言内的动效有意义做一下延伸,让大家对动画有一个再深入一些的了解。

 

那么Material Design动效的用途主要有以下四点:
层级关系:通过动效反映父级元素(收件箱)与子级元素(收件箱邮件)之间的层次结构关系。
状态与反馈:动效提供及时的反馈和用户操作状态。
用户引导:动效为用户如何执行操作提供有用的建议。
个性化:动效为产品设计提供可更多的趣味性、个性以及吸引力,对品牌的提升和认知有很大的促进作用。

 

了解了设计语言的动效模块,相信大家应该有一个系统的认识,在方寸之间进行动画设计,考虑的就是毫秒之内,而在毫秒之内最应该考虑的就是速度,研究发现,在界面设计中最合适的动画时间为200-500ms之间,时间太短,用户难以感知,时间太长,用户又会觉得整个过程太缓慢不够流畅。
当然了根据设备的不同动画内容的不同,动画持续的时间自然也是不相同的。动画时间的长短与动画路径的远近是成正比的一般。另外平台的不同,动画持续的时间也是不相同的,在pc端内的动画要比移动端的动画持续时间普遍少50%左右,这是因为平台的属性所造成的。但是要是单纯的做装饰动画是可以单纯发挥的,不用遵守上面的几个原则,所以进行动画设计的时候都需要考虑到具体的场景以及具体的需求,灵活运用。
说完了时间,我们来说说跟时间息息相关的动画曲线,我们都知道在几百ms内表现出动画的特点是有点难度的,所以精细的运动曲线对我们就显得格外重要,这里我总结一下Material Design内提到的几个常用的动画运动曲线,大家有兴趣可以去Material Design的官方文档内详细查看:
上述的几个运动类型以及动画曲线我们在产品设计内经常会用到,希望大家打好基础,灵活运用。
我们知道任何一件事情都有存在的价值和必要,动画也不例外,如果动画没有体现出他应该有的价值,那么做的再好看也只是仅仅局限在了好看这一个层面,下面我们就看看动画到底能在产品设计中带来什么样的价值。

 

动画价值

有时候现代科技产物使用起来非常复杂,但是其实“复杂”本身没有好坏之分:不好是因为没有处理好这个复杂所以产生了“混乱”,所以应该被批评的不是复杂而是因复杂所产生的混乱。——唐纳德·诺曼

优秀的动效可以帮我们解决产品设计中的很多问题,可以从用户体验的五大要素来进行价值的拆解:

 

战略层

战略层本质上来说大部分设计师其实是接触不到的,当然接触不到战略并不能代表我们不需要了解,作为设计师我们必须了解公司对产品的战略定位以及期望,也必须要了解用户的目标和心理预期。战略层是整个产品的核心也是底层,所以单纯来讲,动画在这一层面上可以发挥的余地是是不多的,因为更多的这一层更加关注意识形态的战略思考。

 

范围层

范围层是通过战略思考来思考明确产品的大概功能和内容,有很多产品的功能复杂,交互繁重,内容很多,在这种情况下动效就派上了用场,我们可以尝试通过动效来解决内容过载,优化交互模块,扩展产品内容功能范围。

 

结构层

这一层主要确定产品的功能结构以及层级,主要设计用户如何快速,准确的触达某个界面完成某个任务,要考虑用户体验地图,用户整个的任务路径,简单来说就是用户要做什么事情,如何做,做完之后应该干什么,如果能对动效巧妙的运用,就可以做到引导用户,练习上下流程的作用,降低用户理解成本,提搞产品的操作效率,提高产品的可用性和易用性。

 

框架层

从这一层开始,UI设计师接触的内容逐渐多了起来,大家也会更加熟悉工作的内容以及范围,这一层主要体现在优化页面布局,确定元素摆放位置,涉及到具体的信息、界面、导航设计等等。通过利用格式塔,栅格,设计语言等方法确定产品功能具体页面内容布局,我们可以通过动效来进行辅助设计,例如强化元素的位置、颜色、大小,优化页面的切换、跳转的流畅度以及自然度等等。

 

表现层

表现层具体涉及到视觉、听觉、触觉的体验设计,也是做为视觉设计师、UI设计师发挥最多的一层,在表现层动效的展现形式会多种多样,这里不展开讲解,大家应该都明白。在表现层加入适当的动画能够提升产品趣味性,加强用户与产品的情感链接,增加用户对产品的友好度。

 

未来发展

5G

5G时代已经到来,5G的普世将会为科技发展带来更多的可能性,众所周知5G的速度是4G的百倍,那么意味着我们的设计的动画会加载的更快,动画文件的大小限制将会被打破,另外也可以在某些领域的产品内设计更复杂更酷炫的动画。

 

人工智能(AI)

它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。在我们日常生活中运用的包括不限于人机对弈、模式识别、自动工程、知识工程等等。所以未来在这些领域内,我们能参与到的动画设计必然会更多样,形式也会更丰富,挑战也会更大。可能会不断有新的动画形式以及设计方法被创造出来,让我们拭目以待。

 

虚拟现实(VR)

是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术于一体,其基本实现方式是计算机模拟虚拟环境从而给人以环境沉浸感。随着社会生产力和科学技术的不断发展,各行各业对VR技术的需求日益旺盛,VR技术也取得了巨大进步,并逐步成为一个新的科学技术领域。相信在未来的工作中必然会慢慢的接触到VR界面设计以及动画设计,并且我相信未来会逐渐的变成主流。

 

参考资料

material.io/design/motion
https://www.zcool.com.cn/article/ZODIzMzky.html
https://zhuanlan.zhihu.com/p/27114894

 

原文地址: 小凯的设计笔记(公众号)
作者:小凯君
转载请注明:学UI网》动效赋能 助力用户体验设计


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

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

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

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

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



你想要的,用户体验设计中的心理学

seo达人


变色龙效应/镜像效应

图片

俗话说,“有样学样(Monkey see, monkey do)”,包括人类在内的灵长类动物都擅长模仿。这个词表示无意识镜像或模仿我们周边人行为的状态。根据我们在产品方面的经验,我们进行的互动具有亲密性和即时性。

你有没有试过听了朋友说的话之后又说给对方听?这是变色龙效应的完美例子。

 

启动效应(Priming)

图片

指由于之前受某一刺激的影响而使得之后对同一刺激的知觉和加工变得容易的心理现象。我们半夜三更看了电视的恐怖电影之后,跟看喜剧相比,屋子里面听到的任何吱吱声或者噪音更有可能让你毛骨悚然、心惊肉跳。

启动效应会塑造我们对环境的行为和反应,而且往往是有效的捷径,让我们可以迅速做出决定。这也是一种有效的说服工具,已经广泛应用到产业的营销和广告领域。

 

冯·雷斯托夫(Von Restorff)效应

图片

德国精神病学家和儿科医生海德维希·冯·雷斯托夫(Hedwig von Restorff)在1933年提出的理论。冯·雷斯托夫有一次实验,涉及到让受试者观看一系列相似的物品。结果他发现,如果其中某个很特别的话,那么相比其他物品,受试者就更容易回忆起这件物品。

冯·雷斯托夫效应又叫做隔离效应(isolation effect),或者新奇效应(novelty effect),其预测是当存在多个相似的对象时,跟其他有所不同的那个最有可能被记住。

 

序列位置效应

图片

该理论由赫尔曼·艾宾浩斯(Herman Ebbinghaus,著名的艾宾浩斯遗忘曲线也是他的发现)提出。它描述了序列中项目的位置是如何影响回忆的准确性的。

这种效应是指记忆材料在系列位置中所处的位置对记忆效果发生的影响,包括首因效应和近因效应。系列开头的材料比系列中间的材料记得好叫首因效应或者首位效应;系列末尾的材料比系列中间的材料记得好叫近因效应或新近效应。

用户往往最容易记住系列中的第一项和最后一项。

把最重要的信息放到开始和结尾。把最不重要的信息放在中间,这是吸引用户注意力的高效方法。

 

格式塔原理

图片

在格式塔原理之下,派生出了很多的其他原理。我们会在下面进行简要讨论:

 

负空间:

图片

在设计周围留白,从而创造出一块大于其各个部分之和的区域。用最简单的措辞来说,格式塔理论是基于这样一种思想,即人脑会下意识地把各个部分组织成一个系统,从而创造出一个整体而不是一系列的离散元素,通过这样来简化和组织包含有很多元素的复杂图像或者设计。我们的大脑天生就是为了看清结构和模式,从而更好的理解我们生活的环境而构造出来的。

 

相似:

图片

在格式塔里面,相似的元素不管彼此是否靠近也会在视觉上进行分组。分组可以按颜色、形状或大小进行。相似性可用来将可能彼此不相邻的东西联系在一起。

 

连续性:

图片

不管实际画出来的线条如何,人眼在观看线条的时候都会按照最平滑的路径想象。当目标是引导访客的眼睛朝特定方向看时,这种连续性会是很有价值的工具。

 

闭合:

图片

这条原理反映的是人会把设计或图像缺失的部分自行脑补,创建出一个整体来。或者说得简单点,在Adobe、Sun Microsystem、NBC、USA Network等的logo中就可以看到复杂的形状。

 

相邻性:

图片

这条原理是指元素之间的距离如何。在UX设计当中,运用相邻性是为了让用户将某些事物组合到一起。通过把它们放在一起,用户就会感觉它们是相关的。

 

图形与背景关系:

图片

跟闭合原理类似,这条也利用了负空间。我们的大脑会区分出图像前景的对象。设计师如果想要突出某个焦点时,用这条这真的很方便。

 

共同命运律:

图片

这条原理是指,沿同一个方向移动的元素本身会被视为一组。如果我们看到一群鸟朝特定的方向飞行,我们就会把它们组合在一起,并将它们看作是单个刺激物。

 

认知负荷

指在一个人的工作记忆使用的脑力综合。是指你为了完成任务需要消耗的脑力。

认知负荷是表示处理具体任务时加在学习者认知系统上的负荷的多维结构。

 

希克定律

以英国心理学家威廉·埃德蒙·希克(William Edmund Hick)命名,其理论指出当选项增加时,下决定的时间也增加。一个人做出决定所需的时间取决于他或她可以选择的选项数。因此,如果选择的数量增加,则做出决定的时间将对数增加。

决策所需的时间随着选项的数量和复杂性增加而增加。

图片

 

菲茨定律(Fitt’s Law)

图片

这条定律规定,任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。

获得目标所需的时间取决于到目标的距离以及目标的大小。

可以利用这条定律来影响互动按钮的转化率,尤其是用手指操作的移动设备上的设计,可以把希望互动的按钮设计得更大一点,把不希望用户点击的按钮设计得小一点,更难点中一点。用户任务/注意区域与任务相关的按钮之间的距离应尽可能的短。

 

美即适用效应

图片

这条指的是用户往往会认为有吸引力的产品更实用。大家往往会相信看起来更好的东西用起来也会更好——就算实际上效率和效能并没有提高。

用户往往会把美观的设计看作是更实用的设计。

对视觉设计的积极情绪反应会让他们对可用性方面的小问题更加宽容。

 

双重编码理论

这一理论是由心理学家佩维奥(Paivio)提出来的,他强调在信息的贮存、加工与提取中,语言与非语言的信息加工过程是同样重要的。佩维奥(1986)指出:“人的认知是独特的,它专用于同时对语言与非语言的事物和事件的处理。”利用双重编码系统可以让用户更容易记住我们网站上的重要内容。

我们会根据你对现实世界的体验和感知为脑中想到的文字建立视觉形象。一想到“体育”,我们的大脑就会自动想到球的形象,运动员的形象。通过将文字跟图像配对,可以更容易记住东西。

 

直觉检查

我们一般不会用价值数千美元的眼动追踪软件或者脑电图来判断设计是不是有效。但是5秒测试是个强大工具,用它就可以确定你的设计是不是一看就明白。

所谓5秒测试,就是让受试者观看网站或应用5秒钟,然后回答有关主题和设计的问题。如果用户的答案或者留下的印象跟你的设想不一样,那就说明设计没有达到原先的目的,需要继续改进。

 

说服心理学

图片

这条原理来自罗伯特·西奥迪尼(Robert Cialdini)的著名著作《影响力:说服心理学》(Influence: The Psychology of Persuasion),里面列举了类似互惠、一致性、社会认同,权威以及稀缺性等原理。

这些原理往往决定了我们在社会当中的行为方式,我们可以用它们来识别人类行为。

互惠:这条原理是说人都不喜欢亏欠别人。如果别人给了他们什么东西的话,他们应该会觉得有责任给予一定程度的回报。提供免费的电子书,博客文章,播客或其他免费内容,然后换取用户提供的电子邮件地址,这就是现实生活当中互惠的好例子。

权威:权威这条原理说的是我们大多数人都意识到自己没办法在每一件事情上都是专家。我们最好的选择是依靠专家的证词。所以,我们允许专家和任何特定议题的“权威”人士影响我们。大家往往会对高水平的专家和权威人物的话言听计从,因为觉得他们值得信赖。如果跟成功公司能扯上关系的话就会经常被提及,好建立一定程度的尊重和可信性。

一致性:这条原理说的是大家一般都希望自己行为跟自己的决策过程保持一致。西奥迪尼曾经进行过一项研究,他让两组志愿者挨家挨户去询问房主愿不愿意在自家前面的草坪上立一块写着“小心驾驶”的大广告牌。

第一组的做法就是简单粗暴直接上门问。而第二组是先做一个初访,请求房主在他们前面的草坪放一块很小的标志牌,“做一位安全的驾驶员。”

结果第二组的成功率高出450%。这就是(承诺与)一致的一个例子,因为房主会觉得自己有义务在这种情况下保持一致性。

社会认同:大家未必总能知道自己为什么会这么做。大家是不是都在跳舞?如果是的话会有更多的人跟着跳。大家是不是都在看那个视频吗?是的话会更多人会点击它。是不是每个人都在买你的产品吗?是的话,你想拦都拦不住。在电子商务的实践当中,我们使用的网站会社会认同(比方说点评、评论和推荐)来吸引其他用户,并引导他们做出购买决定。亚马逊有“购买这个的客户也购买了那个”的提示,希望强化你跟商品的关联性,让用户认为“如果别人需要它的话,那我也需要它”。

稀缺性:在塑造行为的原理方面,这是我的最爱之一。稀缺性原理是说,如果东西有限的话,大家就会更想得到它。能得到的人越少,吸引的人就越多。

为什么有的商店会推出限量版服装?这就是原因,这样可以吸引更多的顾客。

变化盲视(Change Blindness):指观察者不能探测物体或情景所发生变化的现象。

 

记忆限制

图片

记忆未必永远可靠。我们对信息的存储方式会被我们的想法、感知信念以及周围环境所重构。

我们的工作记忆能力大概就只有10到15秒,一次只能记住3到4个东西。

研究表明,大家往往会制造出错误的记忆,要么会记住了没有发生过的事情,要么就是记得的东西跟实际不一样。由于记忆具有提示性和可塑性,所以根据大脑的习惯或心智模式来进行设计就非常重要,因为这样会更容易记住。

尽可能为用户提供帮助和反馈,并提供撤销选项,以减少用户犯错时的沮丧情绪。让体验个性化,好迎合我们用户的喜好。

 

单纯呈现效应(Mere Exposure Effect)

图片

单纯呈现效应是指图片、符号、数字、声音等外部刺激信息只要经常暴露在人面前,就能增加人们对其喜欢程度的现象。这种社会心理会发生在我们所有人身上,我们在不连续的时间段内见到某人的次数越多,我们觉得这个人讨人喜欢或迷人的可能性就越高。这种效应有时候又被叫做熟悉定律。

了解单纯呈现效应及其机制,会让你在转化率优化的工作中具备重大优势。更多的呈现会带来熟悉感,进而带来舒适感,从而让转化率优化整体上得到显著改进。

 

色彩心理学

图片

色彩也是影响人的选择和行为的主要因素之一。我们经常会发现儿童玩具颜色鲜艳,女孩玩具往往是粉红色的。这方面研究的主要思想是色彩对用户的感知有很大的影响。

所以,作为设计师我们应选择能够传递含义与正确信息的色彩。

红色。跟热情、强烈或攻击性的感觉关联。同时是好和不好的感受,比如爱、自信、热情、愤怒等的象征。

橙色。充满活力的暖色,给人以兴奋的感觉。

黄色。幸福的色彩。象征着阳光、喜悦和温暖。

绿色。大自然的色彩。给人以来平静和新生的感觉。另外,也可能用来表示经验不足。

蓝色。一般用来表示企业形象。往往表现出冷静的感觉,但是作为一种冷色,也跟距离与悲伤有关。

紫色。由于很多国王都穿紫色的衣服,所以长期以来就与皇室和财富联系在一起。紫色也是代表神秘与魔力的颜色。

黑色。这种颜色有很多含义。往往跟悲剧和死亡相关联。可以代表着未解之谜。可以是传统的,也可以是现代的。一切都取决于怎么用,以及跟哪些颜色一起用。

白色。意味着纯洁和纯真,以及完整性和清晰度。

 

本能反应

我们一般是从大脑负责本能的部分得到这种反应,本能反应的速度比我们的意识要快得多。本能反应会导致我们用了一下产品后就爱上了它。这些反应植根于我们的DNA之中,所以很容易预测。

作为设计师我们就是要通过设计制造出视觉上极其出色的美感印象。为什么一个东西在用户眼里好看,以及为什么他们是我们的目标受众,他们的需求是什么,这些都不难猜测。

用户体验设计的概念根植于认知和行为心理学,那是人类与机器交互的蓝图。当然,本文仍还没有涵盖到所有的设计心理学原理。但是,作为设计师,我们还需要观察和理解最终用户,并且加深对用户的理解与共鸣。在产品开发过程中,了解用户的互动、行为和情感可以增加更多的价值。

 

原文地址:追波范儿(公众号)

作者:terechen

转载请注明:学UI网》你想要的,用户体验设计中的心理学

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

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

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

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

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




日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档