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

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

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

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

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

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

沒有太多時(shí)間考慮這個(gè)話題， 所以就在標(biāo)題中 標(biāo)頭有哪些組件？

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

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

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

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

這里有一些例子：

Facebook：

圖片來源：Dribbble

Gmail：

圖片來源：Dribbble

推特：

圖片來源：Dribbble

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

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

圖片來源：Dribbble

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

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

金正基的藝術(shù)

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

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

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

Suzanne Helmigh的圖片

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

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

圖片來源：Artstation

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

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

圖片來源：Dribbble

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

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

圖片來源：Dribbble

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

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

圖片來源：Dribbble

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

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

滑塊是許多前端開發(fā)人員討厭的組件之一，因?yàn)樗鼈儠a(chǎn)生大量問題，并且可能在后臺運(yùn)行大量JavaScript。 但這并不意味著您不需要做一個(gè)。

圖片來源：Dribbble

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

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

圖片來源：Dribbble

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

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

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

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

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