在企业网站设计的过程中,占位符是一个很重要的存在。尤其是在网页设计项目当中,需要图片素材填充特定的位置来呈现当前设计的效果,但是还没有足够的内容,这个时候,占位符的重要性就体现出来了。图片占位符所提供的素材,让页面看起来就应该是这个样子。
绝大多数的设计师,都会竭尽全力让项目中自己上下游的同事、客户和其他的非视觉相关的利益相关者,看到产品最终应有的样子,由于流程本身的问题,尚且不存在的内容,就需要图片占位符这样的工具来填补。
1.图片占位符的优势
设计通常都会清楚,英文当中的文本占位符使用的是 lorem ipsum,而中文通常称之为乱数假文。在图片素材上,也是一样的道理,需要占位符。
lorem ipsum 之所以成为文本占位符,很大程度上是因为它所呈现的文本字符的随机性,所呈现出的文本块是均匀的。
同样的,在使用图片占位符的时候,也有类似的需求。图片占位符需要有着贴合项目内容的素材,符合基调,合理的色彩搭配,让用户在查看的时候不会因为占位符本身的素质问题而感到出戏,这样才能真正感觉上原来最终的产品是这样。
那么可以简单总结一下,使用图片占位符的原因:
・它让整个设计更加可视化,让用户更容易感知;
・它展现出图片内容对于整个设计的影响效果;
・你不必到处搜集图片,也不用纠结放什么图片;因为它是占位符,团队成员和用户也可以更清楚哪些地方是放置图片的;
・它让整个原型设计看起来更加精致,完成度更高;
・它很容易实现,不需要太多代码,也不会有图片上传到项目的数据库和服务器当中,节省空间。
2. ImgPlaceholder
作为图片占位符工具,ImgPlaceholder 提供了高度可自定义的选项,但是作为占位符,它采用的并非是图片,而是图标。
每个占位符都可以包含图标、色彩和文本,其中的图标来自三个截然不同的图标数据库,可选择的范围挺大的。
这可能是目前定制性最强的非图片式的图片占位符了,设计师可以完全定制其中所包含的图标、文本、色彩和字体,使用方法也非常的简单。
主要功能:使用高度可定制的图标来作为图片的占位符,无需下载,直接用代码替换即可。
工作原理:在屏幕上直接自定义图片占位符,定制好了之后可以生成链接,也可以生成 HTML 和 Markdown 代码,直接粘贴使用。当然,也能下载图片,然后上传使用。
3. Place Kitten
Place Kitten 绝对是迎合潮流,给猫奴设计师或者猫奴甲方所定制一款图片占位符工具。设计师所需要做的就是选取图片大小,使用占位符之后,这个地方就会显示各种各样猫主子的萌照。
这些萌猫的图片同样也是随机的,不过这些萌物的照片会更容易激发观者的爱心,甚至制造话题。
主要特点:猫!
工作原理:可以从 Place Kitten 的网站上复制相应的 URL链接,调整尺寸规格之后,放置入你的设计当中。
4. Placehold
Placehold.jp 是一个非常快速非常易用的占位符图片导出工具。虽然它并没有内置漂亮的图片,但是它能够快速生成占位符,并且通过图片中的文本让每个人都能清楚的知道此处图片的尺寸大小或者其他的信息。
主要特点:选择尺寸就能生成,适当定制内容和色彩,可以说是非常便捷了。
你只需要在 Placehold.jp 这个网站中设置占位符的尺寸规格就行,选择你喜欢的文本内容,调整色彩,确保和当前设计的风格保持一致。
这款工具还内置了大量常见的尺寸,只需要快速选取就行。
工作原理:定制图片内容之后,生成链接URL,插入到设计当中即可。
结语
图片占位符这个东西到底选哪个,主要还是看你的设计项目或者原型本身的属性,选择合适的占位符能够让你的设计事半功倍,贴合需求,甚至产生意料之外的好效果。当然,最重要的是,今天的四个占位符都是免费的,随便使用吧。
返回新闻列表