火星网校
如何创建精致的UI界面-图像篇
发布时间：2024-04-10 11:56:05 浏览量：237次
今天通过图像篇，带大家了解在UI 界面设计中，我们该如何注意图像的一些问题。
五篇系列目前已经到图像篇幅了，今天带来的图像篇，它是一个强大的工具，可以帮助您沟通和区分您的产品。文字和图像相比起来，人们更愿意去接受图像带来的信息传递，因为图像阅读起来会比文字更加轻松有趣，有意图像有助于吸引用户目光。因此能合理运用图像在UI设计中，他能很好的帮助我们产品取得体验上的提升，综合我个人一些经验观点，今天我就和大家分享下Google在图像方面是如何运用的。
图像使用原则
Google其实很早之前的设计语言里面就已经提到这块并将其简单定义为三大关键点：
- 相关性的
- 信息性的
- 令人愉快的
使用插图和摄影提高产品使用体验时候，需要选择与功能强相关的图像。下面我们看下例子：
从左至右分别，与个人相关性的，功能信息表达，令人愉快的。
比如图1，该界面就是电话详情页面，用一张真实自然的图片，就能贴合目前场景所需要表达含义，同时界面也不那么枯燥。
第二张图像传达特定的信息（图像与目的地含义一致，都是表达美国相关的），使理解变得容易。
图3设计师在设计该界面时候，运用与文案十分贴合的插图，这样目的是更能理解该功能所表达含义了，而不是去慢慢阅读文字来理解，因为人类眼睛更喜欢图像的元素胜过于文字。
使用多种图像
插画和摄影图像都可以存在于同一产品中。摄影图像一般用于可以表达特定含义，且很清晰传达功能含义，插图用于表达无法通过摄影表达其他含义时候存在。
避免使用照片库
图像上一定要选择真实易懂的，传达故事性的，避免过于随意，如果一直使用照片库中的图片，而不使用特定摄影照片，那样设计的界面会大大降低产品的体验。
使用图像或者插图需要聚焦
为什么？清晰且聚焦的图片能更直观的表达功能，用户也能轻易明白起含义，同时也不至于让界面变得枯燥乏味，这就是我们在设计中，为何有些界面一定要去视觉化处理，而不是单独一个文字排版。
清晰的焦点一目了然地传达了这一概念，且画面干净简约。右侧图像缺乏焦点使图像毫无意义。
建立深刻故事性
创建一个和内容相关且能让你身临其境的故事，这样可以让你的产品更加人性化。通过视觉叙事来定义情绪。
图1 ：讲述故事的图像无限有趣且内容丰富。 图2：缺乏故事的图像失去了传达情绪，品牌和背景的机会。
确保图像的清晰度
设计界面中，一定要注意图像的清晰度，避免次像素和迷糊的照片，应该在针对不同平台定义不同适配尺寸，这样能保证多端使用该功能时候，图片是清晰可见。
注意使用图像的大小位置
特定的区域和功能，我们可以适当是该区域图片放大或者留白处理，这样的目的是保证重要的地方能优先被用户感知到。
文字保护
要使文字在图像上清晰易读，请以特定的形式应用文本保护。比如常用的我们可以用黑色透明度叠加或者使用黑色渐变透明应用于特定的区域。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
4. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
