绝大多数的设计师,都会不遗余力让项目中自己高下游的同事、客户和其他的非视觉干系的利益干系者,看到产品终极应有的样子,由于流程本身的问题,尚且不存在的内容,就须要图片占位符这样的工具来补充。
本日的文章当中,我们推举四款不同的、独特的占位符工具,帮你尽可能高效地推进网页和 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 绝对是大杀器)。当然,最主要的是,本日的四个占位符都是免费的,随便利用吧。