建立視覺庫：設(shè)計技巧和挑戰(zhàn)

經(jīng)驗豐富的設(shè)計師與初級設(shè)計師之間的最大區(qū)別之一是他/她建立的視覺庫。

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

讓我們舉個例子：作為設(shè)計師， 您的任務(wù)是建立一個新網(wǎng)站。

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

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

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

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

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

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

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

這里有一些例子：

Facebook：

圖片來源：Dribbble

Gmail：

圖片來源：Dribbble

推特：

圖片來源：Dribbble

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

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

圖片來源：Dribbble

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

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

金正基的藝術(shù)

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

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

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

Suzanne Helmigh的圖片

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

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

圖片來源：Artstation

現(xiàn)在， 讓我們再次看一下您將在Web設(shè)計中經(jīng)常使用的一些常見組件以及要做的一些實踐：

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

圖片來源：Dribbble

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

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

圖片來源：Dribbble

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

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

圖片來源：Dribbble

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

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

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

圖片來源：Dribbble

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

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

圖片來源：Dribbble

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

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

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

我們確實提供網(wǎng)絡(luò)開發(fā)服務(wù)，包括定制設(shè)計工作， 建立WordPress主題， 為成功的組織編寫WordPress插件編碼并實施完整的解決方案。

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