导图社区 提升UI细节和体验的10个常用方法
如果你觉得你的 UI 设计起来很无聊,想让它看起来更加有趣,其实是有很多相对通用的方法。这些方法大都不算复杂,稍加调整,总会有不俗的效果。如果你想试试,不妨试试本张导图所总结的这些赋予 UI 以个性的10个方式。
导图大赛开始啦!用MindMaster制作思维导图,只要你颜值够高!创意够足!干货够多!就有机会赢取千元奖金,还有更多神秘精美礼品相送,奖品丰厚,惊喜多多,只要参与就能领取福利呦,快带上话题发布作品吧~
春节七天假,似乎什么矛盾和纷争都能用“大过年的”四个字平息。然而总有那么些人和事是例外,既然躲也躲不掉,还是想想当遇到这些提问时,该怎么机智的应对吧!
春节,即农历新年,是一年之岁首、传统意义上的年节,俗称新春。春节对于中国人来说是一年之中最重要的节日,具有特殊的意义,千百年的文化传承已经为春节形成了固定的风俗习惯。 中国地域辽阔,南北相距数千公里,因此对于春节的习俗也是大相径庭,下面跟着思维导图一起来看看南北方春节习俗到底有何区别。
社区模板帮助中心,点此进入>>
互联网9大思维
产品立项报告
产品经理如何做好项目管理
经验分享:产品经理必懂的产品思维
产品诞生过程
产品周期图
开门红的思考
招创智搜
网易星球
教学教务系统
提升 UI 细节和体验 的 10 个常用方法
一、给文案注入生命
幽默和个性化的元素引入到营销中

注意:有的网站和 APP 本身应该严肃,就最好不要使用幽默的文案
例如:
「加载中……」VS「我们训练有素的猴子们正在努力……」 
二、加入图标和表情符
功能作用
让你的设计更加一目了然
使用表情符让它更加富有吸引力,更加友好
使UI 更加具有视觉吸引力,更加简单有效
注意事项
不要用得过多
不要重新发明轮子或者「过于创新」地使用
获取方式
Emojione
Icons8
BoxIcons
Feather
Material
三、通过插画让你的产品更加人性化
通过插画轻松地传达复杂的的信息。
能够平衡界面,吸引用户注意力
让界面的功能和信息更容易被理解
插画需要具有明确的目的性,是内容的补充,而不是替代
插画应当能改进用户体验,不能干扰操作
插画样式与界面应该保持一致
获取方式推荐
Ouch
Freepik
Undraw
Humaans
四、深色模式
让双眼更容易适应
在色彩配置上需要根据规范细致调整
建议让用户自行决定是要用深色模式还是浅色模式
五、高素质的图片
能让 UI 和 体验非常的生动有趣,增强 UI 界面的总体效果
素材网址推荐
Unsplash
Pexels
Adobe Stock
Pixabay
十、用好阴影,增加层次纵深
利用好视觉上的 Z 轴
阴影可以让设计在视觉上更加立体
设计决策的时候,要有目的性
添加阴影时要记得筛选优先级,为最重要的部分添加阴影
九、加入图案和渐变
让不那么吸引人的内容变得更加醒目美观的一种有效方法
让平淡无奇的设计增加风味
注意:不能喧宾夺主
八、通过微交互来帮用户关注细节
感知到真实世界的体验
感知微用户交互带来有效的即时反馈
例如: Medium 当中的鼓掌(点赞)
在 Medium 当中,鼓掌(点赞)这一微交互对于体验的增强是一个非常典型的案例,这和 Youtube 当中的点赞是截然不同的,Youtube 当中,点赞只有简单的颜色变化,从灰色变为蓝色,没有动画效果。这和两个平台本身的内容属性有直接的关联:文本内容需要微交互来强化感知,而在视频平台当中,这样的微交互会喧宾夺主,分散用户注意力,因此需要弱化。
七、加入动效
设计过程中不可缺少的部分
迎合了用户动效贴近现实实际体验的期望
比如:缓动
一个球,我们给它施加力量,踢它的时候它会先加速,再减速,这个过程是逼真的。这些物理规则是动效的基础,是真实的基础
动画应该具有针对性,应体验优先,而不是分散用户注意力
推荐工具
Airbnb 出品 的 Lottie
可轻松地将任意 AE 转化为 对网页更加友好的 SVG 动画
Material Design
制作系统化的动效
六、让出错状态不那么令人沮丧
能够帮助用户解决问题的同时还可以通过个性和乐趣将其转变为积极的体验。
Google Chrome 浏览器在「网络已断开」报错界面下的 设计,它几乎提供了所有的必要信息,包括引导你如何修复网络
Dribbble 的 404 页面的设计