編輯導(dǎo)語：設(shè)計師在接到設(shè)計需求的時候，先別忙著動手開始設(shè)計，可以先挖掘設(shè)計的問題，再通過視覺自查表進(jìn)行關(guān)鍵詞的發(fā)散設(shè)計。作者從以下四個方面進(jìn)行切入，我們一起來看看吧。

一、用自查表挖掘視覺問題

做任何事情都應(yīng)該有一個思路，發(fā)現(xiàn)問題，解決問題。那么在做改版之前第一步也是挖掘現(xiàn)有頁面的問題。怎么去挖掘？

這里分享一個我之前寫過的公式，這里和大家簡單的再分享下這個公式，希望能幫助你更好的自查出設(shè)計問題。

這套模板基本覆蓋了品牌設(shè)計、UI設(shè)計、創(chuàng)意設(shè)計，我們怎么去看？

• 圖形：造型/細(xì)節(jié)/透視/線條/質(zhì)感/使用環(huán)境
• 色彩：平衡/人群/情感/干凈/行業(yè)/明暗關(guān)系
• 字體：字重/線條/比例/襯線/識別度/字距
• 構(gòu)成：對稱/空間/主次/重復(fù)/秩序/放射
• 質(zhì)感：細(xì)膩/層次/呼吸/通透/輕重/高級
• 創(chuàng)新：寓意/品牌/調(diào)性/感動/情緒/沖擊

我們來看看如何在日常工作中，通過這個公式來指導(dǎo)我們的設(shè)計！下面是我從網(wǎng)上隨便找到的一些案例，沒有任何的惡意，只是交流使用。

比如這個設(shè)計，我們用這個自查表來看看：

• 圖形：細(xì)節(jié)不夠細(xì)致，還可以提升
• 色彩：背景的高斯模糊和卡片的設(shè)計顏色不夠干凈不夠協(xié)調(diào)
• 字體：卡面字體識別度不夠，數(shù)字基本看不清楚
• 構(gòu)成：構(gòu)圖的空間不夠平衡，上下過松，卡片過緊
• 質(zhì)感：不夠高級，風(fēng)格比較成就，有山寨感

你會發(fā)現(xiàn)，我們通過這個表格去對照，或者去指導(dǎo)別人的設(shè)計，就會顯得很合理，我們的建議也非常的專業(yè)，當(dāng)然前提你必須對審美有很好的理解！

我們繼續(xù)按照這個表格來找問題：

• 圖形：六變形，圓形，各種異形整體特別混亂
• 色彩：沒有主色調(diào)，橙色，綠色，黑色比例沒有主次，灰色深
• 字體：圖片上字體導(dǎo)致圖片看不清楚，按鈕看著像不可以點(diǎn)
• 構(gòu)成：很亂，元素到處飄著不知道看哪里
• 質(zhì)感：不夠細(xì)膩，舊
• 創(chuàng)新：品牌感完全沒有體現(xiàn)

來看看一個實際案例：

這是當(dāng)時我負(fù)責(zé)的項目余額寶和黃金頁面，我們一直想優(yōu)化線上的數(shù)字字體，因為在金融產(chǎn)品中，數(shù)字是出現(xiàn)頻率最多的。當(dāng)時我們線上字體采用的helvetica neue字體，這個字體是一款非常經(jīng)典的字體，他的優(yōu)點(diǎn)非常多，很正式很官方。

在支付寶場景中會有一些問題，比如字體比較款，特別是在這個頁面大數(shù)字展示時候有點(diǎn)粗糙，文字過寬，閱讀時候易用性不夠精致。

在金融產(chǎn)品中數(shù)字需要保證可閱讀的同時還最好有一些設(shè)計感。因此這個字體不是特別合適，需要去優(yōu)化，那么我們第一步就完成了，挖掘出設(shè)計問題。

二、確定設(shè)計關(guān)鍵詞

因為支付寶屬于一款金融產(chǎn)品，整體希望傳遞給用戶的氣質(zhì)是方便快捷，因此和產(chǎn)品，品牌一起討論，我們一起得出來這三個設(shè)計關(guān)鍵詞：方便快捷，清晰直觀，安全專業(yè)。

方便快捷對于字體的選擇必須是無修飾，無襯線提，線條比較簡潔、不需要有過多的元素在里面。

那么清晰直觀就好理解了，必須文字大字號小字號上面的閱讀性，同時字體的識別性要好。特別是數(shù)字的1和7的識別性，以及數(shù)字0和O放在一起的識別性。

安全專業(yè)，毋庸置疑，支付寶產(chǎn)品在用戶心中的心智，所以這個字體必須很有份量。字體比較平衡，字體比較有節(jié)奏有規(guī)律。

那么通過關(guān)鍵詞的確定，明確設(shè)計理念，就可以到第三步進(jìn)行設(shè)計思考，在競品基礎(chǔ)上去思考。

三、競品基礎(chǔ)上去思考

阿里有句話叫做「當(dāng)你不知道怎么做的時候，先去看看別人怎么做的，不要悶頭想，多去看看優(yōu)秀設(shè)計案例」，所以做任何設(shè)計之前，沒有靈感的時候去看看業(yè)內(nèi)標(biāo)準(zhǔn)案例。

于是我們調(diào)研了一些產(chǎn)品。那么我們做金融設(shè)計或者電商設(shè)計，數(shù)字字體到底用哪幾個呢？在選擇之前，我們先來看看互聯(lián)網(wǎng)公司都在使用哪些字體。

蘋果系統(tǒng)：使用的舊金山字體SanFrancisco? ? 微信：DIN的字體基礎(chǔ)上微調(diào)

招商用戶：DIN字體? ?京東金融：DIN的字體，重新進(jìn)行了設(shè)計

百度金融：DIN字體基礎(chǔ)上調(diào)整6.9? 支付寶：蘋果原生Helvetica Neue

富途：蘋果原生Helvetica Neue? 韓國SSG：蘋果原生Helvetica Neue

所以通過以上簡單調(diào)研，我們不難發(fā)現(xiàn)，現(xiàn)在國內(nèi)外大多數(shù)金融產(chǎn)品數(shù)字字體都是運(yùn)用蘋果自帶數(shù)字字體，以及Din這個字體基礎(chǔ)上調(diào)整，那么為什么Din這個字體這么受設(shè)計師喜愛呢？

1. Din故事

DIN是德國標(biāo)準(zhǔn)協(xié)會，Deutsches Institut für Normung的首字母縮寫。

1975年起，德國政府把DIN作為國家標(biāo)準(zhǔn)體系，DIN標(biāo)準(zhǔn)在國際和歐洲范圍內(nèi)被廣泛使用，并代表德國的利益。DIN字體算是?文字體中的另類。它不僅僅是一款字體，更屬于一個龐大的國家標(biāo)準(zhǔn)體系，代表了一種把簡單的解決辦法標(biāo)準(zhǔn)化的思想。

在德國公路指示牌，以及機(jī)場、地圖里面，大多數(shù)運(yùn)用Din字體作為引導(dǎo)字體。

在很多雜志包裝中，也可?大量Din字體的運(yùn)用，德國人的嚴(yán)謹(jǐn)在這個字體中體現(xiàn)的淋漓極致！

缺陷：前面我們說了DIN在公路以及雜志、平面設(shè)計中用的很多，但是直接拿到互聯(lián)網(wǎng)APP設(shè)計中各種復(fù)雜的場景，DIN就沒有那么的完美，如圖中，4的開頭較大，以及5、6字體的圓形不夠一致，7縮小后識別度問題。

所以很多公司都會基于這些問題進(jìn)行二次設(shè)計，這也是前面競品分析里面提到，為什么微信，京東，百度會在這個基礎(chǔ)上再設(shè)計的原因。

四、競品基礎(chǔ)上去做創(chuàng)新

Din字體當(dāng)然也不是完美的，比如4的開頭比較大，5的字重比其它的大，太活潑了。7的部分縮小時候無法識別。0的部分弧線拼接過于硬。因此需要在這個基礎(chǔ)上去調(diào)整，修改一個新的字體。

2. DIN基礎(chǔ)上微創(chuàng)新

然后字體設(shè)計師同學(xué)，在Din這個數(shù)字基礎(chǔ)上進(jìn)行了優(yōu)化，重點(diǎn)優(yōu)化了前面說的問題，比如4和7還有0的弧度，整體優(yōu)化后效果非常的不錯。

優(yōu)化后的整體效果對比，很明顯新的字體效果更清晰，更加有硬朗穩(wěn)重感。

整體的效果就非常清晰，同時也解決了大家都用DIN的尷尬，同時也有了創(chuàng)新，設(shè)計師還原創(chuàng)了字體，也避免了一些版權(quán)問題。以上就是內(nèi)部設(shè)計專家做一個小的方案使用的方法。

不難發(fā)現(xiàn)，越高級的設(shè)計師，設(shè)計方法和方案會更加系統(tǒng)化，設(shè)計思路也會更加的清晰。

五、最后

最后，我們來回顧下今天的設(shè)計知識點(diǎn)，拿到一個需求先不要著急做，先去挖掘設(shè)計的問題，可以通過視覺自查表，然后根據(jù)問題去確定設(shè)計關(guān)鍵詞，根據(jù)關(guān)鍵詞去做視覺發(fā)散，然后再在競品基礎(chǔ)上去思考差異化創(chuàng)新。希望可以幫助到大家。

#專欄作家#

Sky，微信公眾號：我們的設(shè)計日記（ID：helloskys），人人都是產(chǎn)品經(jīng)理專欄作家。原支付寶體驗設(shè)計專家，阿里巴巴天貓設(shè)計專家；10年知名互聯(lián)網(wǎng)公司設(shè)計經(jīng)驗，對于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計規(guī)范、運(yùn)營規(guī)范、大促等有豐富實戰(zhàn)經(jīng)驗。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自?Unsplash，基于 CC0 協(xié)議