如果你正在设计原型,这4个图片占位符工具别错过
qiyuwang 2024-10-06 12:16 9 浏览 0 评论
在设计的过程中,占位符是一个很重要的存在。尤其是在网页设计项目当中,需要图片素材填充特定的位置来呈现当前设计的效果,但是还没有足够的内容,这个时候,占位符的重要性就体现出来了。图片占位符所提供的素材,让页面看起来「就应该是这个样子」。
绝大多数的设计师,都会竭尽全力让项目中自己上下游的同事、客户和其他的非视觉相关的利益相关者,看到产品最终应有的样子,由于流程本身的问题,尚且不存在的内容,就需要图片占位符这样的工具来填补。
今天的文章当中,我们推荐四款不同的、独特的占位符工具,帮你尽可能高效地推进网页和 APP 设计项目。
图片占位符的优势
设计通常都会清楚,英文当中的文本占位符使用的是 lorem ipsum,而中文通常称之为「乱数假文」。在图片素材上,也是一样的道理,需要占位符。
lorem ipsum 之所以成为文本占位符,很大程度上是因为它所呈现的文本字符的随机性,所呈现出的文本块是均匀的。
同样的,在使用图片占位符的时候,也有类似的需求。图片占位符需要有着贴合项目内容的素材,符合基调,合理的色彩搭配,让用户在查看的时候不会因为占位符本身的素质问题而感到出戏,这样才能真正感觉上「原来最终的产品是这样」。
那么可以简单总结一下,使用图片占位符的原因:
- 它让整个设计更加可视化,让用户更容易感知;
- 它展现出图片内容对于整个设计的影响效果;
- 你不必到处搜集图片,也不用纠结放什么图片;因为它是占位符,团队成员和用户也可以更清楚哪些地方是放置图片的;
- 它让整个原型设计看起来更加精致,完成度更高;
- 它很容易实现,不需要太多代码,也不会有图片上传到项目的数据库和服务器当中,节省空间。
1. Lorem Picsum
Lorem Picsum 可以说是图片版的乱数假文,这个名字就已经很直白了。
这个占位符工具功能非常的简单直接,它可以将精美的图片直接放置到需要放置图片的地方,让客户和其他团队成员可以更轻松地感知到整个设计的视觉信息。
这个工具最大的优势在于它所有的功能都是以小插件的形式,提供给你使用。
- 为你的设计随机选取图片;
- 使用仅保留灰度的图片;
- 使用数据库中特定的图片(数百张可供选择);
- 使用模糊图片;
- 提供图片裁切的功能。
主要特点:这款工具包含了大量高素质的图片,多种显示模式,并且是完全免费的。满足绝大多数设计师对于占位符的需求。
工作原理:基于你的设计需求,创建规范,你所需要做的就是将代码插入到网页对应的位置即可。代码片段将会使得页面加载的时候直接从工具的数据库当中调取图片,而其中的图片素材绝大多数都来自顶级免费图片库 Unsplash,无需安装和下载。
2. ImgPlaceholder
作为图片占位符工具,ImgPlaceholder 提供了高度可自定义的选项,但是作为占位符,它采用的并非是图片,而是图标。
每个占位符都可以包含图标、色彩和文本,其中的图标来自三个截然不同的图标数据库,可选择的范围挺大的。
这可能是目前定制性最强的非图片式的图片占位符了,设计师可以完全定制其中所包含的图标、文本、色彩和字体,使用方法也非常的简单。
主要功能:使用高度可定制的图标来作为图片的占位符,无需下载,直接用代码替换即可。
工作原理:在屏幕上直接自定义图片占位符,定制好了之后可以生成链接,也可以生成 HTML 和 Markdown 代码,直接粘贴使用。当然,也能下载图片,然后上传使用。
3. Place Kitten
Place Kitten 绝对是迎合潮流,给猫奴设计师或者猫奴甲方所定制一款图片占位符工具。设计师所需要做的就是选取图片大小,使用占位符之后,这个地方就会显示各种各样猫主子的萌照。
这些萌猫的图片同样也是随机的,不过这些萌物的照片会更容易激发观者的爱心,甚至制造话题。
主要特点:猫!
工作原理:可以从 Place Kitten 的网站上复制相应的 URL链接,调整尺寸规格之后,放置入你的设计当中。
4. Placehold
Placehold.jp 是一个非常快速非常易用的占位符图片导出工具。虽然它并没有内置漂亮的图片,但是它能够快速生成占位符,并且通过图片中的文本让每个人都能清楚的知道此处图片的尺寸大小或者其他的信息。
你只需要在 Placehold.jp 这个网站中设置占位符的尺寸规格就行,选择你喜欢的文本内容,调整色彩,确保和当前设计的风格保持一致。
这款工具还内置了大量常见的尺寸,只需要快速选取就行。
主要特点:选择尺寸就能生成,适当定制内容和色彩,可以说是非常便捷了。
工作原理:定制图片内容之后,生成链接URL,插入到设计当中即可。
结语
图片占位符这个东西到底选哪个,主要还是看你的设计项目或者原型本身的属性,选择合适的占位符能够让你的设计事半功倍,贴合需求,甚至产生意料之外的好效果(假如甲方是猫奴,Place Kitten 绝对是大杀器)。当然,最重要的是,今天的四个占位符都是免费的,随便使用吧。
相关推荐
- 别再乱找了!这才是 Alist 本地安装挂载的正确打开方式
-
一、探秘Alist的神奇世界在这个数据爆炸的时代,我们的生活里充斥着各种各样的网盘服务,百度网盘、阿里云盘、腾讯微云等等,它们成了我们存储资料的得力助手。但随着网盘数量的增多,管理这些分散在不同平...
- 如何将数据从旧iPhone传输到新iPhone 16?这五个方法你必须知道!
-
前不久,苹果发布了备受期待的iPhone16系列,新机型搭载了更强大的芯片、更流畅的操作体验,还有备受热议的全新摄像系统。无论你是冲着A18仿生芯片,还是更丰富的动态岛功能,相信很多果粉早已跃跃欲试...
- 大数据传输的定义与大数据传输解决方案的选择
-
当我们需要处理大量的数据时,我们就要把数据从一个地方移动到另一个地方。这个过程就叫做大数据传输。它通常需要用到高速的网络连接、分散的存储系统和数据传输协议,以保证数据的快速、可靠和安全的移动。常用的大...
- 【工具】在线传输文件工具(在线文件互传)
-
前言在线传输文件工具主要是用于在不同的设备之间,如手机、电脑、平板等快速便捷地传送文件。告别使用USB传统传输文件的方式。...
- 如何使用 CAN-FD 在 LPC5500 上传输数据
-
目录1引言2CAN-FD3示例演示1引言...
- 轻松同步:将照片从三星手机传输到iPad的简便方法
-
概括想要在新iPad上查看三星照片吗?但是,如果您不知道如何将照片从三星手机传输到iPad,则无法在iPad上查看图片。为此,本文分享了7个有用的方法,以便您可以使用它们在不同操作系统之...
- 常见又地道的网络缩写:美剧中常说的SFW到底是个啥?
-
在这堂课中,让我们来学习更多在数字网络世界中常用的有趣网络用语。7shifts/unsplashhttp,https“http”和“https”是万维网(www)传输文件用的协议。“http”是hy...
- 每天学会一个计算机网络协议之FTP
-
开始行文之前提出一个问题,相信大家在看完本文后一定可以回答当我们在网站上填写注册信息的时候,需要我们上传照片,上传的过程发生了什么?下面引入我们的主角,FTP文件传输协议FTPFileTransf...
- 即用即走,这3款文件分享工具真香
-
打工人的日常,免不了「文件分享存储服务」的需求。我们一般会选择不同的网盘,但是大家也知道,网盘不是限速就是叫你充值。今天跟大家简单推荐3款文件分享工具,既可以免登录匿名使用,而且操作简单稳定性也不错。...
- 安卓手机里的文件和照片与Mac互传的办法
-
因为HandShake一段时间未更新,似乎目前不可操作。我一时间未找到更好的「传输」办法,经实践操作,向大家介绍一下「安卓手机」,包括「一加」、「索尼」,都可用此方法,来进行文件传输到Mac的...
- 软网推荐:同一个平台选择不同的传输方法
-
平时上网的时候,我们经常要分享一些文件给其他朋友,一般通过云服务平台来实现。今天笔者给大家介绍的Worksphere传输服务,它提供了两种不同的分享方式,方便我们根据实际需要进行选择。一个链接分享所有...
- 跨平台不限速的免费文件传输网站(跨平台不限速的免费文件传输网站是什么)
-
大家好,欢迎来到天天惠分享,不知道各位平时都是用什么方法来进行文件跨平台传输的呢?是百度网盘?微信还是QQ?亦或是有线传输。虽然这些方法都可以达到传输的目的,但都有各自的缺陷,使用起来一言难尽。比如百...
- 全网最全最详细的全平台文件传输方法,解决你文件传输问题(一)
-
前言想必现在大多数人文件传输的方法还是使用qq微信,但是qq微信的文件传输有时候真是,...
- 文件传输工具有哪些?这3款堪称办公必备!
-
在不同设备间,想把文件从一台设备传输到另一台,尤其是大体积文件,更是免不了用到文件传输工具,可以说文件传输工具已成为提升效率的关键载体。面对海量文档、设计素材、会议纪要的流转需求,传统邮件附件、U盘拷...
- 小白也能用的跨网文件交换系统!10款简单易上手的文件摆渡工具
-
跨网文件交换系统对于需要频繁在不同网络环境中进行文件共享的用户来说至关重要。以下是10款简单易上手的文件摆渡工具,适合小白用户使用,帮助他们高效地分享和传输文件。10款简单易上手的跨网文件交换工具1....
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)