編輯導(dǎo)語：細(xì)節(jié)處理是影響產(chǎn)品設(shè)計效果的重要影響因素？那么，如何衡量設(shè)計完成后的頁面效果好壞？也許，你需要對設(shè)計進(jìn)行系統(tǒng)的拆解，了解每一個設(shè)計元素。本篇文章里，作者便總結(jié)了一套衡量設(shè)計效果好壞的檢測方法，一起來看一下。

不知道大家有沒有這種情況，做完設(shè)計完全不知道這個頁面效果好壞，那么有沒有一種設(shè)計效果模型能對照呢，讓我們做完設(shè)計，或者指導(dǎo)他人設(shè)計時候，有一個參考標(biāo)準(zhǔn)呢？

今天我分享一個方法給大家，大家可以當(dāng)作自測或者設(shè)計指導(dǎo)用。

木桶定律不知道大家有沒有聽說？

一只水桶能裝多少水取決于它最短的那塊木板，一只木桶想盛滿水，必須每塊木板都一樣平齊且無破損，如果這只桶的木板中有一塊不齊或者某塊木板下面有破洞，這只桶就無法盛滿水。一只木桶能盛多少水，并不取決于最長的那塊木板，而是取決于最短的那塊木板。也可稱為短板效應(yīng)。

做設(shè)計也是一樣的，設(shè)計的效果就是像木桶里面的水，必須每個細(xì)節(jié)都處理到位，里面一個細(xì)節(jié)沒有處理好，就會影響整體效果。所以設(shè)計師要學(xué)會對自己設(shè)計有很好的認(rèn)識，知道怎么去找到短板并去優(yōu)化它。

一、系統(tǒng)的拆解設(shè)計

我們來拆開看任何一個設(shè)計，比如iOS設(shè)置頁面設(shè)計，由哪些元素組成呢，我們來逐步拆解：

• 圖形：我們把字體和顏色去掉，頁面很重要組成部分就是形狀，圓形還是方形。
• 色彩：除了形狀以外，就是色彩，色彩是用戶最直觀的理解。

最后就是字體、樣式、風(fēng)格等等！任何設(shè)計都是由這些元素組合而成，也就是我們常說的形色字構(gòu)質(zhì)！

我們看任何一個設(shè)計，都應(yīng)該像庖丁解牛一樣，對于設(shè)計的每一個模板進(jìn)行設(shè)計拆解，去了解它每個設(shè)計具體的環(huán)節(jié)。

二、怎么看網(wǎng)頁？

比如這個網(wǎng)站設(shè)計，可以從哪些維度去看，找到可優(yōu)化的空間，我們可以一起來解剖下。

1. 色彩

色彩是設(shè)計的三大構(gòu)成之一。色彩最直觀也是用戶最能感受到的，而一個網(wǎng)站給人的留下的第一印象就是鋪面而來的色彩氛圍。

▲當(dāng)前的配色：背景灰+黑白色文字+黃色標(biāo)題+黃色幾何色塊點(diǎn)綴。

解剖：

1. 色彩在頁面中，每個元素是怎么運(yùn)用的？
2. 二級三級頁面是如何保持色彩一致性的？
3. 這種配色需要注意的要點(diǎn)?

2. 排版

排版是視覺組織內(nèi)容的方式，是引導(dǎo)用戶閱讀信息的手段。

▲當(dāng)前的版式：大面積留白+上下結(jié)構(gòu)+ 上文下圖。

解剖：

1. 從上到下有幾種版式？有規(guī)律嗎？適合什么樣產(chǎn)品？
2. 主副內(nèi)容的處理方案是怎樣的？
3. 二、三級頁面是否模板化？擴(kuò)展性如何?

3. 空間

空間是內(nèi)容與設(shè)計的空間，是頁面呼吸感很重要的要素。

▲當(dāng)前的空間：文字和圖形交錯出來，形成一種流動感。

解剖：

1. 這樣做要突出什么？
2. 黃色設(shè)計元素和文字關(guān)系是如何處理的？
3. 實現(xiàn)的細(xì)節(jié)是什么樣的？

4. 品牌

品牌是網(wǎng)站頁面的眼睛，品牌演繹成頁面中的元素，成為組織內(nèi)容的核心。

▲當(dāng)前的品牌：品牌黃色。

解剖：

1. 品牌在頁面中怎么呈現(xiàn)的？
2. 品牌感是否因為這些方式加強(qiáng)？
3. 品牌輔助圖形有哪些？

三、怎么看圖標(biāo)？

圖標(biāo)可以從以下幾個維度去拆解。

1. 造型線條

造型和線條是圖標(biāo)的氣質(zhì)傳遞，不同的造型和線條影響整個圖標(biāo)的調(diào)性。

▲當(dāng)前的線條：圓潤線條，斷點(diǎn)。

解剖：

1. 線條細(xì)節(jié)怎么體現(xiàn)的？
2. 造型細(xì)節(jié)傳遞出什么感受？
3. 適合什么類型的產(chǎn)品？

2. 空間透視

空間透視是一個圖標(biāo)體感很重要的點(diǎn)，平面和三維的圖標(biāo)感官是完全不一樣的。

▲當(dāng)前的透視：2.5D透視，非常有方向感。

解剖：

1. 透視角度怎么體現(xiàn)的？
2. 透視細(xì)節(jié)如何處理的？
3. 這種透視怎么拓展？

3. 質(zhì)感肌理

質(zhì)感肌理是圖標(biāo)的細(xì)節(jié)表現(xiàn)，圖標(biāo)風(fēng)格有很多種，什么樣產(chǎn)品用什么樣的圖標(biāo)風(fēng)格，需要對癥下藥。

▲當(dāng)前的質(zhì)感：霓虹燈，發(fā)光質(zhì)感，細(xì)節(jié)豐富。

解剖：

1. 霓虹燈，光感怎么畫的？
2. 元素前后關(guān)系怎么處理的？
3. 運(yùn)用場景有哪些限制？

4. 驚艷細(xì)節(jié)

細(xì)節(jié)是這個設(shè)計從60分到80分最關(guān)鍵的點(diǎn)，一個好的設(shè)計，一定有一個驚艷的細(xì)節(jié)打動你。

▲當(dāng)前細(xì)節(jié)：蛋糕的細(xì)節(jié)，小人的表情以及擬物細(xì)節(jié)。

解剖：

1. 細(xì)節(jié)符合產(chǎn)品定位么？
2. 細(xì)節(jié)的延展性如何，適合哪些場景？

四、怎么看界面？

1. 信息布局

信息布局是體現(xiàn)信息優(yōu)先級，也是設(shè)計最優(yōu)先考慮的，如何合理將內(nèi)容信息組織好是第一優(yōu)先原則。

▲當(dāng)前布局：運(yùn)用卡片布局，通過色彩，大小來體現(xiàn)優(yōu)先級。

解剖：

1. 卡片布局有什么優(yōu)點(diǎn)？
2. 卡片里面元素之間關(guān)系如何處理？
3. 卡片運(yùn)用在哪些地方，哪些地方不用卡片？

2. 色彩關(guān)系

色彩是用戶第一直覺反饋，不同色彩代表不同的情感！如何讓你的色彩更和諧、亂而不花、少而不單調(diào)，是需要去思考的。

▲當(dāng)前色彩：馬拉龍配色，低飽和度明亮，年輕化感受。

解剖：

1. 色彩之間顏色有多少種？
2. 主色調(diào)是什么，輔助色有哪些？
3. 色彩運(yùn)用場景有哪些？

3. 控件造型

控件和造型是圖形的一部分，自定義的控件和系統(tǒng)控件成本是不一樣的。

▲當(dāng)前控件：基本自定義的，優(yōu)點(diǎn)比較個性化，符合車這種產(chǎn)品動感造型。

解剖：

1. 擴(kuò)展性如何？
2. 技術(shù)如何實現(xiàn)？
3. 能沉淀組件通用化么？

4. 質(zhì)感肌理

質(zhì)感肌理重要性不言而喻，是產(chǎn)品精致與細(xì)節(jié)的表達(dá)很重要的點(diǎn)。

▲當(dāng)前質(zhì)感：色彩疊加，微漸變，明亮配色。

解剖：

1. 色彩適合什么樣人群特點(diǎn)？
2. 配色規(guī)律如何？
3. 質(zhì)感表現(xiàn)手法怎么表達(dá)的？

5. 交互關(guān)系

產(chǎn)品的交互形式怎么樣，每一步的操作如何，上下頁面如何連接的，交互形式用戶是否熟悉。

▲當(dāng)前交互方式：手勢滑動選擇歌曲和調(diào)節(jié)音量。

解剖：

1. 這種滑動操作有什么不好的地方？
2. 用戶是否都能接受這種操作？
3. 這種交互方式是什么限制？

五、怎么看LOGO?

1. 圖形寓意

寓意是LOGO的魂，如何把LOGO的行業(yè)和特點(diǎn)，創(chuàng)意結(jié)合起來是非常不容易的事情。

▲當(dāng)前寓意：整體寓意Logo外圍由兩條弧線匯聚成圓，寓示項目集辦公、住宅、酒店、商業(yè)、觀光等多個產(chǎn)業(yè)功能。

解剖：

1. 這種線條延展性如何？
2. 和行業(yè)特點(diǎn)是否貼合？
3. 識別度怎么樣？

2. 延展性

標(biāo)志最終是要運(yùn)用的，運(yùn)用的場景效果如何，放到實際環(huán)境中效果和識別度怎么樣。

▲當(dāng)前延展性：無論在印刷物料，還是在大樓上都很簡潔大氣，符合這個高樓氣質(zhì)和調(diào)性。

解剖：

1. LOGO使用環(huán)境如何？
2. 各個物料上運(yùn)營是否協(xié)調(diào)？
3. 辨識度如何？

3. 字體

字體是非常重要的元素，有的產(chǎn)品特質(zhì)就通過字體體現(xiàn)，比如香奈兒、LV大牌等。

▲當(dāng)前字體：襯線體，非常優(yōu)雅，和整體的LOGO圖形本身一樣，一氣呵成。

解剖：

1. 運(yùn)用的什么字體？
2. 字體有沒有單獨(dú)處理？
3. 字體和中文搭配如何？

拆解設(shè)計元素基本就是上面的這些方法，拆解每一個設(shè)計零件，然后針對零件去詳細(xì)設(shè)計，去找設(shè)計的發(fā)力點(diǎn)。那么我們掌握這些零件后，如何去指導(dǎo)一個人的設(shè)計呢，或者自己做完后，怎么去看？

六、設(shè)計效果細(xì)節(jié)模型

前面分享了，一個設(shè)計我們需要關(guān)鍵哪些重要元素，那么一個設(shè)計稿，我們要從哪些維度去看畫面效果，在設(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)上隨便找到的一些案例，沒有任何的惡意，只是交流使用。

通過自查表可以發(fā)現(xiàn)的問題：

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

通過自查表可以發(fā)現(xiàn)的問題：

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

通過自查表可以發(fā)現(xiàn)的問題：

• 圖形：紅包造型不夠明顯，看不出是紅白；
• 色彩：配色不干凈，沒有層次；
• 字體：字體缺乏對比，沒有字粗細(xì)大小對比；
• 構(gòu)成：空間感和主次比較欠缺；
• 質(zhì)感：不夠精致，不高級，紅包不高級；
• 創(chuàng)新：調(diào)性上，視覺沖擊力不夠。

通過自查表可以發(fā)現(xiàn)的問題：

• 圖形：透視不夠準(zhǔn)確，瓶子底部太平和頂部透視不和諧，同時瓶子的線條太細(xì)了，和整體不吻合，另外頁面環(huán)境色彩也可以增強(qiáng)；
• 色彩：瓶子邊緣線條灰色太臟，瓶子后面的前景和后面的明暗沒有出路；
• 字體：下面圣誕節(jié)快樂字體太小，對比不突出，識別度難；
• 構(gòu)成：目前構(gòu)成是不是可以更加熱鬧，構(gòu)圖可以嘗試放射；
• 質(zhì)感：圣誕樹的質(zhì)感層次，禮物大小，元素可以對比加強(qiáng)；
• 創(chuàng)新：可以加強(qiáng)一些故事性在里面。

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

七、最后

今天教大家這個方法，其實就是思考問題的一個體系，先學(xué)會系統(tǒng)拆解設(shè)計，了解設(shè)計的每一個元素，然后在系統(tǒng)拆解的基礎(chǔ)上，去做局部創(chuàng)新。

在設(shè)計的過程中，學(xué)會從形色字構(gòu)質(zhì)、創(chuàng)新維度去檢查我們的設(shè)計，不斷鍛煉設(shè)計手法以及設(shè)計的維度，讓你的視覺畫面感越來越和諧，效果越來越好。

#專欄作家#

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é)議