提升界面B格 图文设计的10个技巧

很多的设计师选择创造一个简约清爽的界面来展现风格。而想营造这种感觉,最常用的手段就是通过图文结合的设计方式来呈现效果。不过想让图文更协调,达到满意的程度可并不容易,稍有不慎就会出现画虎不成反类犬的尴尬情况。笔者这里就通过10个具体的图例来说一说使用图文结合达成目标效果的10个技巧。

1.文本与图片达成强对比

首先,文本必须具备高可读性。文本作为前景,而图片作为背景,两者之间的对照感一定要明显。如果图片是深色,那么字体最好使用浅色。如果图片使用浅色,那么字体最好使用深色。

为图片配上文字,往往是为了更好的解释说明,增强对照感,让用户浏览时能够更好的结合两者,阅读出想要表达的信息。

2.让文本与图像成为一体

这种方法可以让文本和图像更好的融合。先决条件有二:1.图片要像McLaren那样简单,便于后期处理 2.图片中本身就带有文本,比如说Toast网站的这张背景图片。

3.文字摆放位置,符合图片的视觉流

文本不能阻碍图片的主要视觉元素。因此,在文本排版时,要根据图片的视觉流而定。文本一定不能挡住图片的关键部位,比如说一张脸、一款产品。

图2这款设计比较具有代表性,将文字放在了人物视线所到之处,很巧妙。

4.图片模糊化,突出文字

这可能是最简单的技法,只需要用PS把背景加一个几像素到十几像素不等的模糊即可,但就是如此文本就能从背景中脱颖而出。而Wallmob(图2)的网站更加巧妙,背景模糊处理,产品和文本却没有,打造了有效的视觉焦点。

5.制作文本框

当图片的色彩过多,深浅差异不一时,用诸如文本框、色块、几何图形等将文本包裹起来,这样文本就能凸显出来。文本框的颜色要和文本有所对照。文本框最好是透明的,这样用户隐隐约约也能看到背景全图。

6.将文字融入背景中

这是个非常精妙的技法。大部分时间,文本都做为前景而存在。背景一般色彩简单、主要为烘托前景而存在。但有时候,巧妙的设计,让文字看起来像是背景的一部分。这种方法能让平面作品看起来有一定的深度。

7.字体超大尺寸

如果拿不准,那么最稳妥的做法就是使用全背景图片加大字体。有视觉冲击力的同时更能有效的打造视觉焦点。如图上,主题信息展示简单,粗暴。

8.添加文本色

如图1将文字与背景色达成统一,如图2将文字与背景色形成对比。

9.偏色背景

为图像增添偏色效果,然后再将文字覆盖于上,这样文本就得以凸显。覆盖色的透明度要把握好,如果透明度过高,那么文本不可读,过低,图像看不清。而且最好选用和品牌相关的颜色。

10.不做修饰

不做修饰不做说不做任何设计,而是采用最简单的设计。背景突出主题,在主题旁配上文字,简简单单,但反而有一种清新的感觉。

以上的十种技巧在使用时注意把握好背景图的选择以及想要表达的主题,尤其在色彩上需要小心选择。

推荐阅读:

10个让人身临其境的404页面

HTML5在线学习网站推荐

八年创作:大圣归来原画手稿

著名网站的颜色搭配方法

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-12 15:23:28

提升界面B格 图文设计的10个技巧的相关文章

WebKit 中异步加载脚本(Running scripts in WebKit)- 大大提升界面呈现速度

WebKit 中异步加载脚本(Running scripts in WebKit)- 大大提升界面呈现速度 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. Running scripts in

小程序提升界面使用体验 丰富了内容展示组件

昨晚,微信小程序开放了更多页面内能力,主要是提升界面使用体验.丰富内容展示组件.完善系统硬件能力,这些能力的提升可以帮助开发者更好地优化使用体验,让用户爱上你的小程序.以下是相关能力的展示 01—提升界面使用体验 小程序可以灵活调整顶部标题栏的颜色,同自己的页面保持色彩统一.小程序可以获取页面布局,了解用户屏幕滑动情况,并使用页面滚动接口.例如看到一半的文章,开发者可以定位并记住浏览的位置.在用户下次打开小程序时,立即滚动到未读处,方便用户继续阅读.地图.视频和画布上,现在可以展示简单的图片及文

10个技巧优化PHP程序Laravel 5框架

性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践www.itxdl.cn,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配置信息缓存 artisan config:cache 路由缓存 artisan route:cache 类映射加载优化 artisan optimize 自动加载优化 composer dumpautoload 使用 Memcached 来存储会话 config/sessio

Eclipse调试Java的10个技巧

原文地址: http://www.oschina.net/question/82993_69439 在看这篇文章前,我推荐你看一下Eclipse 快捷键手册,我的eclipse版本是4.2 Juno. 先提三点 不要使用System.out.println作为调试工具 启用所有组件的详细的日志记录级别 使用一个日志分析器来阅读日志 1.条件断点 想象一下我们平时如何添加断点,通常的做法是双击行号的左边.在debug视图中,BreakPoint View将所有断点都列出来,但是我们可以添加一个bo

小白必看 学习PHP的6个步骤10个技巧

在这个终身学习的时代,资讯泛滥的时代,我们需要的能力并不是去背诵相应的知识点,而是掌握学习方式.学习PHP也是如此,有时候技巧和步骤比埋头苦干要有效得多.下面小编就和大家分享一下学习PHP的6个步骤(仅仅是简单概括)和10个技巧. 1.首先需要熟悉HTML/CSS/JS等网页基本元素,完成阶段可自行制作简单的网页,对元素属性相对熟悉: 2.理解动态语言的概念和运做机制,熟悉基本的PHP语法: 3.学习如何将PHP与HTML结合起来,完成简单的动态页面: 4.接触学习MySQL,开始设计数据库:

Visual Studio调试的10个技巧

本篇体验Visual Studio的10个调试技巧,包括: 1.插入断点和断点管理2.查看变量信息3.逐语句F11,逐过程F10,跳出Shift+F114.查看堆栈信息5.设置下一条执行语句6.调试时修改局部变量并继续调试7.线程管理8.为断点设置条件9.使用命令窗口测试方法10.变量的历史记录 有这样的一个Person类: public class Person { public string Name { get; set; } public int Age { get; set; } pu

编写优秀代码的10个技巧

作为程序员,写代码是需要一种崇高无上的精神来支撑的,写出优秀的代码,更需要你有深厚的底蕴和良好的编码习惯.在介绍写优秀代码的10个技巧之前,我们先来探讨一下什么样的代码才是优秀的代码. 稳定可靠(Robustness) 可维护且简洁(Maintainable and Simple Code) 高效(Fast) 简短(Small) 共享性(Reusable) 可测试性(Testable) 可移植性(Portable) 面对以上的目标,我们总结了以下10个写代码的技巧,希望对你有所帮助. 1.百家之

使用Eclipse调试Java 程序的10个技巧

你应该看过一些如<关于调试的N件事>这类很流行的帖子 .假设我每天花费1小时在调试我的应用程序上的话,那累积起来的话也是很大量的时间.由于这个原因,用这些时间来重视并了解所有使我们调试更方便的功能. 那能为你省下一些时间,也将会使你的生活更安逸.轻松.同时也表明其它关于此主题的帖子也是很有价值的. 第1条:不要调试太多 一个关于调试的疯狂声明作为开头.但它必须是要说的!尝试切分一下你那复杂的逻辑成多个独立的单元,并编写单元测试来检测你代码的正确性.我想像如下 这样的流程应该是发生得非常频繁的-

[转载]编写优秀代码的10个技巧

作为程序员,写代码是需要一种崇高无上的精神来支撑的,写出优秀的代码,更需要你有深厚的底蕴和良好的编码习惯.在介绍写优秀代码的10个技巧之前,我们先来探讨一下什么样的代码才是优秀的代码. 稳定可靠(Robustness) 可维护且简洁(Maintainable and Simple Code) 高效(Fast) 简短(Small) 共享性(Reusable) 可测试性(Testable) 可移植性(Portable) 面对以上的目标,我们总结了以下10个写代码的技巧,希望对你有所帮助. 1.百家之