江苏龙网

  1. 首页 > 人文 > >

com|给你的设计加点料

_原题是：给你的设计加点料
作为一个优秀用户体验专家 ， 你做出一个非常好用的界面设计 ， 但是……为什么看起来总觉来总少了些什么？看起来太无聊了啊！想要提升产品的趣味性和创意感怎么破？
按照以下的实操指南进行操作 ， 为你的UI界面加点儿料呗～
com|给你的设计加点料
文章图片

by Ouch.pics
01
更有生命力的文案
▼
com|给你的设计加点料
文章图片

Reddit 的联合创始人 Alexis Ohanian 也曾说过 ， “我很喜欢《人生胜利圣经》中的一句话-‘我的挑战就是花一点时间 ， 让品牌更人性化、更特点、更有趣 。 ’” 在设计下一个产品的时候 ， 大家可以多考虑如何将引人入胜文案融入用户体验当中 。
02
加上图标/表情包
▼
com|给你的设计加点料
文章图片

分享几个图标/表情包的资源网站：
JoyPixelshttps://www.joypixels.com/
Icons8http://icons8.com/
BoxIconshttp://boxicons.com/
Featherhttp://feathericons.com/
Materialshttp://material.io/icons
03
增添一些插图
▼
com|给你的设计加点料
文章图片

by Camera @ Ouch!
插图可以帮助我们轻松地传达复杂的信息 。 我们从小就被训练了将视觉和文字含义联系在一起：儿童读物里是没有插图是不可想象的 。 插画有助于缓解用户的情绪、平衡界面的布局、吸引注意力并让信息更加易懂 。
最为重要的是 ， 插图的使用应该是有目的性的 。 它应该作为文字的一个补充而非替代物 ， 也不应该在使用过程中分散用户的注意力 。 此外 ， 插图的颜色与风格应该保持统一 。
以下是一些我最喜欢可免费获取插图的网站：
Ouch!http://icons8.com/ouch
Freepikhttp://freepik.com/
Undrawhttp://undraw.co/
Humaanshttp://humaaans.com/
04
增添黑暗模式
▼

By ProCreator @ Dribbble
根据你所设计的应用的特性 ， 可以为其增添一个黑暗模式 。 黑暗模式更加的护眼和友好 。 设计黑暗模式与白天模式并没有太大的区别 ， 你所需要做的只是准备一套不一样的调色板 。 我会建议产品给予用户选择黑暗和白色模式权利 。
05
使用高清照片
▼
com|给你的设计加点料
文章图片

by Elena Petkovska @ Dribbble
应用程序里的图片与其他元素一样的重要 。 图片可以使得你的界面更加的生动活泼 。 网上有成千上万的地方可以帮助你找到高质量的照片 。 以下是一些我最喜欢的网站：
Unsplashhttp://unsplash.com/
Pexelshttp://pexels.com/
Freepikhttp://freepik.com/
Adobe Stockhttp://stock.adobe.com/
Pixabayhttps://pixabay.com/
06
让错误提醒更加友善
▼
作为设计师 ， 我们要努力让用户在所有体验节点上有好的使用体验 。 甚至对于会给用户带来负面情绪的错误提醒 ， 我们也要努力将其转化为一种积极体验 。
com|给你的设计加点料
文章图片

我最喜欢的例子是谷歌 Chrome 浏览器的无网络错误提示（上图） 。 他们不仅仅为用户提供了所有的修复方式 ， 还设置了一个无尽头的跑步游戏 T-Rex 。 真是一个天才！
com|给你的设计加点料
文章图片

另一个我最喜欢的例子是 Dribble 的404错误提示页（上图） 。 它出色的地方对用户形成持续地吸引 ， 并指引他们返回极具沉迷性的瀑布流信息 。
Hipmunk 的创始人 Alexis Ohanian 曾经说过 ， 人们仍然会推特我们在 Hipmunk 上的错误提示 ， 是因为这让他们感受到了一丝愉快的瞬间 。
07
为你的设计带来一点动效
▼
com|给你的设计加点料
文章图片

By Outcrowd @ Dribbble
动效已经快速地成为了设计流程中必不可少的一部分 。 动效既可以表现为自己运动的插画 ， 也可以表现为与用户互动的界面元素 。
动效已经不再停留在 Dribbble 那些花里胡哨的概念稿 ， 而是已深入用户的脑海里了 。 用户会很自然地用物理世界中的运动规律去比拟屏幕中的元素运动 。
就假设我在一个房间里扔一个球 ， 它并不会一直以相同的速度滚动 。 而是先加速后减速-即“缓动” 。 这使得动画更加的逼真 ， 同时也是动画的一个重要的基础 。
随着诸如Principle ， XD的auto-animate、Invision Studio、After Effects、Lottie、Flinto 等工具的兴起 ， 设计师可以有多样的工具来实现动效的可能性 。 我更喜欢使用Adobe XD及其自动动画原型制作工具——它很直观 ， 还可以在我们投入更多的时间精力之前快速验证动效的可行性 。
我最近经常使用的另一个出色工具是 Airbnb 的 Lottie。 Lottie 可以轻松地将任何After Effects 动画转换为网络友好的 SVG 动画 。 如果您想尝试一下 LottieFiles， 但又不想学习如何使用 After Effects， 可以查看一下LottieFiles去获得免费的动画 。
与插画类似 ， 动效的设计应该带着明确的目标 。 动效应该用于丰富体验 ， 而不是分散用户的注意力 ， 不能被滥用 。 但幸运M的是 ， 有一些设计资源 ， 如 Google 的 Material Design ， 可以帮助你D构建动效的标准 。 请牢记一个法则-动效不应使用户使用速度变慢 。
08
关注微交互细节
▼
com|给你的设计加点料
文章图片

与动画类似 ， 微互动可为用户带来微妙的美好体验 。 微互动可以通过模仿真实世界中的物理规律 ， 为用户的操作提供即时的反馈 。 Medium 中鼓掌交互就是一个很好的例子 。
com|给你的设计加点料
文章图片

与 YouTube 上简单的“赞”按钮相比 ，Medium 的鼓掌显得有趣多了 。 然而 ， 像“鼓掌”这样过于抓人的微交互却有可能会分散用户观看视频的注意力 ， 所以并不是 Youtube 的最佳选择 。
09
添加纹理和渐变
▼
com|给你的设计加点料
文章图片

Whimsical 的注册页
纹理和渐变的使用可以使得平平无奇的内容变得更加醒目和美观 。 你可以在纹理和渐变上发挥你的创意或者使用极简的形式 。 不过 ， 这一切都以不分散用户的注意力为前提 。
com|给你的设计加点料
文章图片

UserTesting.com 的加载页
10
使用阴影去增加深度
▼
com|给你的设计加点料
文章图片

设计的时候也千万不要忘记z轴！阴影可以让页面上的元素更有深度 ， 更加立体 。
元素的不同高度代表着信息的不同层级及重要性——优先级越高的元素越接近用户 。 尽管阴影可以增加界面的美感 ， 但是我们在做任何的设计决策时 ， 都要谨记不要为美观而设计 ， 而是始终以改善体验为目标 。
【com|给你的设计加点料】本文由 Z Yuhan 编辑 ， 由 玩泥沙 译自 https://uxdesign.cc/10-ways-to-spice-up-a-ui-design-f6025b2f4a8c


    推荐阅读


    上一篇：中美俄核潜艇潜航世界对比，俄罗斯46天，美国83天，中国多少天？

    下一篇：黎巴嫩_时政|第四人离开！外媒：黎巴嫩财政部长辞职