如何向非設計人員準確呈現視覺效果？

2023-01-04 分類：網站建設

在企業網站設計的過程中，占位符是一個很重要的存在。尤其是在網頁設計項目當中，需要圖片素材填充特定的位置來呈現當前設計的效果，但是還沒有足夠的內容，這個時候，占位符的重要性就體現出來了。圖片占位符所提供的素材，讓頁面看起來就應該是這個樣子。

絕大多數的設計師，都會竭盡全力讓項目中自己上下游的同事、客戶和其他的非視覺相關的利益相關者，看到產品最終應有的樣子，由于流程本身的問題，尚且不存在的內容，就需要圖片占位符這樣的工具來填補。

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，插入到設計當中即可。

結語圖片占位符這個東西到底選哪個，主要還是看你的設計項目或者原型本身的屬性，選擇合適的占位符能夠讓你的設計事半功倍，貼合需求，甚至產生意料之外的好效果。當然，最重要的是，今天的四個占位符都是免費的，隨便使用吧。

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容