提升視覺基本功的方法：刻意練習(xí)版、質(zhì)、形、色、字新年即將來臨，相信大家屁股都坐不住了，都等著回家吃年夜飯。小編也一樣，恨不得馬上放假，完全沒心思上班、寫文章。所以今天這篇文章將是年前的最后一篇文章啦， 在這里，小編祝大家新春快樂，過個好年，新的一年里，也更加幸福美滿。

| 序言

為一名設(shè)計師，除了要進(jìn)行分析和梳理產(chǎn)品需求的能力，視覺基礎(chǔ)力，更是會直接影響到該設(shè)計師Level的幾大點(diǎn)之一。而分析梳理產(chǎn)品需求的能力，更多的是靠項目堆積下來的，但視覺基礎(chǔ)能力，除了在項目中成長外，還能通過刻意練習(xí)，來達(dá)到一個突飛猛進(jìn)的狀態(tài)。

光努力練習(xí)就可以了嗎?也不全是，很多設(shè)計師朋友盲目的對Dribbble跟Behance上的優(yōu)秀作品進(jìn)行臨摹，缺乏思考，發(fā)現(xiàn)最后一旦需要原創(chuàng)了，手上水平還是沒太大提升。所以光臨摹也是不行的，還需要掌握方法。在這里，小編對視覺表現(xiàn)層分別從幾個維度來進(jìn)行了一下總結(jié)，分享一下這幾年來提升手頭能力時，得到的一些經(jīng)驗跟方法，希望能對部分小伙伴們有所幫助。

| 頁面視覺構(gòu)成幾大要素

在一個完整的頁面的視覺設(shè)計當(dāng)中，我們可以把其幾個核心視覺點(diǎn)進(jìn)行分解，單獨(dú)羅列。某些在多個頁面設(shè)計中，我們可以理解為幾大核心點(diǎn)，如『版，質(zhì)，形，色，字』

版-版式及厚度，版式間距會直接影響到頁面的張力及空間感

質(zhì)-頁面風(fēng)格，肌理維度，整個產(chǎn)品視覺調(diào)性，形-大面積區(qū)域的形狀，控件尺寸比例，icon形狀的統(tǒng)一性

色-顏色風(fēng)格，頁面色相，彩度，明度整體風(fēng)格統(tǒng)一性字-字體的樣式，字體，字號，襯線，內(nèi)容識別性像這些核心元素，我們可以進(jìn)行進(jìn)行刻意練習(xí)，來提升綜合的視覺基礎(chǔ)能力，不過首要，我們需要理解并進(jìn)行梳理。

| 何為版？

版，在界面設(shè)計當(dāng)中，版式會直接影響到用戶該頁面的理解能力，良好的信息傳達(dá)力離不開科學(xué)的組織布局。信息之間層級關(guān)系的羅列展示非常重要，適當(dāng)?shù)牟季郑�能展示不同信息的差異化，提升用戶理解閱讀效率，而且視覺上也非常美觀大方。

因子一：親密性這里我們可以通過一個很簡單的話術(shù)來表達(dá)，那就是『同類相近，異類相遠(yuǎn)』，物以類聚，人以群分。信息聯(lián)系緊密的，間距相近，信息維度差異大的，間距要遠(yuǎn)，這樣不但視覺上錯落有致，而且對于用戶理解信息，也是非常有效快速的。

因子二：節(jié)奏性

節(jié)奏性指的就是在同一個頁面內(nèi)容中，間距呈有規(guī)則的變化。所以這也要求這間距的樣式不要太多，盡量使用倍數(shù)，比如1x、2x、3x、4x。比如現(xiàn)需設(shè)計一個讓用戶感受到輕松愉悅的頁面，可以使用較大的柵格間距比例，以12為基準(zhǔn)，比如間距一律使用12、24、36、48。如果是信息較為緊密的，則可以使用8的倍數(shù)，如8、16、24、32等。當(dāng)然，這也不是絕對值，具體使用情況，還得根據(jù)實際情況跟業(yè)務(wù)場景而定。

從手動量的尺寸來看，京東金融app的間距是以4為單位進(jìn)行倍增，但用的則是較大的間距，如24、28、32、36、40、44。而Airbnb則是以12的單位進(jìn)行縮放，如12、24、36、48、60的單位，不同的柵格比例，傳遞出來的心理暗示，也是不一樣的。所以間距通常沒有絕對的設(shè)定值，而是根據(jù)業(yè)務(wù)進(jìn)行適當(dāng)調(diào)整，有規(guī)律的進(jìn)行變化組合。

因子三：頁面結(jié)構(gòu)比例

關(guān)于頁面的節(jié)奏比例，大家可以多研究一下黃金比例。黃金比例是在界面設(shè)計當(dāng)中用的較多的一個比例，此比例通過了自然界大數(shù)據(jù)的驗證。在實際項目中，使用黃比例的作品，往往更具有美感，令人賞心悅目。

除了黃金比例，其實還有著白銀鉑金等比例，這類比例也是具有著較多的美感的。相信很多同學(xué)不知道，這里也發(fā)出來讓各位同學(xué)知曉下。網(wǎng)址可自行百度：黃金比例在線生成。

| 何為質(zhì)？

質(zhì)，是視覺語言組成的重要部分，頁面的風(fēng)格特征，肌理虛實都靠它來表達(dá)。產(chǎn)品的質(zhì)地風(fēng)格應(yīng)當(dāng)與產(chǎn)品的整體形象保持一致，是多個頁面統(tǒng)一風(fēng)格的重要組成元素。好的質(zhì)感表現(xiàn)，不僅能幫助用戶認(rèn)識及記住產(chǎn)品特征，更能讓產(chǎn)品迅速拉開與同類產(chǎn)品的區(qū)別，做到別具一格。這里簡單給大家介紹幾種常見的風(fēng)格類型。

樣式一：大卡片、輕投影式這種風(fēng)格在iOS11后更是變的普及了起來，因為微投影能在很好的拉開層級提升空間感的同時，還能讓頁面變的更為細(xì)膩。像蘋果的Appstore跟大量其它產(chǎn)品，都使用了這類較為不錯的樣式。不過要注意的是，漸變樣式不能太過于厚重，頁面留白要大。另外卡片圓角及投影參數(shù)，之前有給小伙伴們提供過的，卡片圓角半徑≈卡片寬度的0.04%，陰影顏色=按鈕顏色的 Alpha50%，x=0，y=按鈕高度的20%，模糊值=按鈕高度的50%，擴(kuò)展=按鈕高度的 -15%，高級又簡單，完美!

樣式二：高純度漸變在近兩年，漸變風(fēng)又開始變的流行起來，不過跟以前陰影較為厚重的漸變相比，新的漸變樣式，變得更為扁平更為輕量化了起來。在Dribbble流行起漸變風(fēng)之后，國內(nèi)各大應(yīng)用也開始使用流行起來，如淘寶與京東金融、優(yōu)酷、餓了么等主流應(yīng)用開始紛紛效仿。同樣在漸變的配色方案中，不適合多類顏色同時漸變，漸變的兩個顏色在一個色系上進(jìn)行微調(diào)即可。

優(yōu)秀案例by Ervin Halebic