經驗豐富的設計師與初級設計師之間的最大區別之一是他/她建立的視覺庫。

當涉及到UI元素和UX實踐時，這就是您的頭腦。 您已經建立了什么并且對它如何工作有所了解。 您的圖書館越豐富， 您可以更快地當場提出解決方案。

讓我們舉個例子：作為設計師， 您的任務是建立一個新網站。

什么網站？ 你可能會問。 出色地， 這就是您的所有要求。 來自同事的挑戰。 哦， 還， 你有一個小時要做。 這是我們在DevriX所做的挑戰，這是3600秒后的結果之一：

亞歷克斯·迪米特洛夫（Alex Dimitrov）設計

沒有太多時間考慮這個話題， 所以就在標題中 標頭有哪些組件？

• 確定標題
• 導航
• 搜索欄
• 一些社交聯系
• 一些號召性用語按鈕， 主要是注冊和/或創建帳戶
• 一些導航使其變得有趣

這些都是從哪里來的？ 以前是空白頁。 甚至沒有話題， 首先。 這一切都是由于視覺圖書館是在設計師多年來構建網站的過程中一直在腦海中建立的， 應用， 以及他們周圍的一切。

您可以通過幾種方法設計標題？ 數百種方式。 元素種類繁多， 地形， 顏色， 疊加層 紐扣， 元素等等。 這是一個有趣的實驗。

雖然最簡單的答案是“進行更多設計”， 這不是一個非常令人滿意的方法，僅僅是因為它還有更多的功能。 更重要的是多樣性。 建立不同的設計。 解決這個問題的一種直接方法是重新設計大型網站。

這里有一些例子：

Facebook：

圖片來源：Dribbble

Gmail：

圖片來源：Dribbble

推特：

圖片來源：Dribbble

例子太多了。 設計越復雜， 您進步得越快。 但， 究竟如何運作？

讓我們以清單為例。 列表可以有一個標題來命名它， 它可以具有可以著色的圖標， 設計相似或設計不同。 它也可以有較大的標題和副標題， 也許是帶有數字的標簽。 然后，您可以添加懸停狀態， 可以選擇的項目，或者 殘疾人， 等等。 有了所有這些變化， 您可以進行各種各樣的列表設計。

圖片來源：Dribbble

能夠提出這么多的配置和布局就是擁有一個良好的視覺庫。 要知道您可以那樣做。 就像有一個在你旁邊的人說“給我畫個盒子”， 然后“添加標題”，您無需考慮就可以做到。 之所以做出所有這些決定，是因為您之前已經做過。 的確， 它也遵循設計基礎， 但您無法一直瀏覽筆記或書籍。 這就像訓練AI –您需要使用 “元素的成功順序”。

一個典型的例子是金正基（Kim Jung Gi），他是個天才，可以從任何角度制作栩栩如生的藝術品。

金正基的藝術

在接受采訪時，他說他一生都在觀察周圍的所有物體， 試圖了解它們的形狀并從不同的角度繪制它們。 有了這個技能， 現在，他只需從沒有任何參考的白紙開始，就可以繪制上圖中看到的所有內容。

更好的說法是-他的視覺庫是由于他在腦海中沒有參考而無法獲得的參考。 這是大師作品的一個例子， 這是爭取設計師的一個偉大目標。

就像網頁設計師了解按鈕一樣， 清單， 牌， 輸入字段 彈出式窗口等等 數字藝術家了解材料， 燈光， 剪影 肌肉如何運作， 重力是如何使您失望的 并給您的身體帶來壓力等等。

Suzanne Helmigh的圖片

這是數字藝術家如何通過嘗試將其應用于球體來學習各種材料的示例。 巖漿， 木頭， 毛皮， 葡萄酒， 蛋， 起司， 任何事情都是有效的。 了解它， 用你的雙手去做 一點一點地印在你的大腦上。 當需要將這種材料應用于真實繪畫時， 您現在可以更好地了解它的真正工作原理以及最終結果的真實外觀。

這是皮膚的一個例子 皮革， 金屬， 頭發和頭發都用來產生非常漂亮的最終產品。 對這些材料缺乏基本的了解可能會使金屬看起來像塑料， 皮革紙 等等。

圖片來源：Artstation

現在， 讓我們再次看一下您將在Web設計中經常使用的一些常見組件以及要做的一些實踐：

網站上最基本的組件之一。 按鈕有各種形狀和大小。 您可以設置漸變， 改變顏色， 添加文字陰影， 添加邊框（多個）， 添加光澤樣式， 勾勒出他們的輪廓 改變形狀（正方形， 圓角 圓圈）， 有些帶有圖標， 其他的圖標則在可單擊的子區域中分開。

圖片來源：Dribbble

任務：設計20種不同樣式的按鈕。 它們之間的差異越大越好。 每一個人， 在對比方面始終遵循最佳設計實踐， 平衡等等。

卡或盒子是另一個超級通用的組件。 它可以容納任何類型的內容， 盡管一些常見的元素可能是頁眉/頁腳+主要內容。

圖片來源：Dribbble

任務：使用內容， 形成上面的卡片， 設計10個變體， 理想情況下，盡可能地不同。 改變風格， 添加新元素， 旋轉它們 使用漸變， 陰影， 圖標， 和插圖。 嘗試去瘋狂。

幾乎所有博客都有某種形式的評論系統。 但是您是否認為評論組件可能并不真正包含實際評論，而更像是“狀態”更改？

圖片來源：Dribbble

任務： 上面的示例僅說明了這一點。 現在， 嘗試提出與評論組件相關的任何內容-用戶的評論， 任務更新狀態（在評論區域中）， 像聊天一樣的評論， 任何事物。 7-10個變化之間的任何值都是一個好數字。 再次–嘗試使它們保持不同。 研究更多， 找到想法， 瀏覽網站。

這些練習的目的是找到以您未曾使用過的新方式來處理常見元素的方法 知道大約之前。

滑塊是許多前端開發人員討厭的組件之一，因為它們會產生大量問題，并且可能在后臺運行大量JavaScript。 但這并不意味著您不需要做一個。

圖片來源：Dribbble

任務：瀏覽網絡和各種設計，以了解有關不同布局和方法的更多信息。 也許看看JS庫，他們在其中做幻燈片以查看所擁有的內容。 從那里， 設計10-15種不同的滑塊設計。 再說一次-嘗試使每個設計與以前的設計盡可能不同， 不要只是使用一些細微的增強。

輸入表單是幾乎所有網站的另一個核心部分。 他們感興趣的是他們接收信息而不是輸出信息。

圖片來源：Dribbble

任務：您在這里的工作是想出某人可能在網站上需要的最奇怪的信息類型。 上載PDF或PSD（選擇一個）， 信用卡信息， 添加餅干的食譜， 計算涂料混合比， 創建汽車經銷商配置器。 想到的一切 越獨特越好。 再次繼續瀏覽網站以查看實際的解決方案。 用獨特的設計設計至少10種不同的獨特形式。

以設計師的身份建立設計庫是改善工作流程的主要踏腳石之一， 快速制作設計， 為您的客戶解決問題， 并提出獨特而巧妙的方法來改善用戶體驗。 當您開始瀏覽并仔細查看網絡上的每個元素時， 您開始考慮用戶的操作， 他們所看到的 以及如何加以改善。

將以上任務用作家庭作業將對您有所幫助 填補你的投資組合。 不要只局限于上面提到的5個任務， 出去那里 瀏覽網站， 重新設計， 研究他們， 并繼續發展您的設計感并建立自己的視覺庫！

我們確實提供網絡開發服務，包括定制設計工作， 建立WordPress主題， 為成功的組織編寫WordPress插件編碼并實施完整的解決方案。

DevriX的創意主管和前端開發人員
亞歷克斯（Alex）的熱情在于學習新的網絡技術， 探索創新的方法來優化網站性能并改善用戶體驗。 亞歷克斯（Alex）喜歡騎自行車和數字藝術，最近開始在ELSYS技術學校教授設計。