你的設(shè)計(jì)過關(guān)嗎？用這份大神總結(jié)的自查手冊看看！

在互聯(lián)網(wǎng)敏捷開發(fā)迭代的過程中，設(shè)計(jì)自查可以提供全面的檢測，為上下游更高效的合作提供一個(gè)完整的設(shè)計(jì)方案。

設(shè)計(jì)方案的完整，指的是在自查階段，考慮設(shè)計(jì)文件是否符合業(yè)務(wù)流程，頁面的層級關(guān)系、信息區(qū)分及設(shè)計(jì)的擴(kuò)展性。保證設(shè)計(jì)方案的完整是設(shè)計(jì)師的職業(yè)素養(yǎng)，對自己的產(chǎn)出進(jìn)行查漏補(bǔ)缺，設(shè)計(jì)出符合需求的頁面并保障產(chǎn)品順利進(jìn)行。

而一個(gè)好的習(xí)慣也可以避免不好的影響，提高工作效率，讓我們有更多的時(shí)間精力進(jìn)行更有價(jià)值的事情。

△ 設(shè)計(jì)走查流程

容易遇到的問題

在很多互聯(lián)網(wǎng)企業(yè)中，設(shè)計(jì)師有可能會(huì)遇到如下問題：

• 對需求不了解，直接跳入細(xì)節(jié)設(shè)計(jì)；
• 設(shè)計(jì)時(shí)間被無限壓縮；
• 一人支持跟進(jìn)多個(gè)項(xiàng)目；
  ...

在目標(biāo)導(dǎo)向設(shè)計(jì)中，設(shè)計(jì)師應(yīng)該先站在一個(gè)高的角度了解產(chǎn)品行為的整個(gè)架構(gòu)然后再進(jìn)行精細(xì)化的設(shè)計(jì)，這樣才能夠保證設(shè)計(jì)完成后與產(chǎn)品目標(biāo)保持一致。

在部分小型創(chuàng)業(yè)團(tuán)隊(duì)，團(tuán)隊(duì)成員有時(shí)不愿按照流程進(jìn)行，這時(shí)候需要我們在加強(qiáng)自身專業(yè)能力的同時(shí)，與團(tuán)隊(duì)成員積極溝通，在團(tuán)隊(duì)內(nèi)達(dá)成設(shè)計(jì)流程的共識并制定相關(guān)的措施。比如說，制定設(shè)計(jì)流程，讓團(tuán)隊(duì)成員對設(shè)計(jì)有所認(rèn)知；預(yù)留設(shè)計(jì)走查的時(shí)間，包括自查時(shí)間、開發(fā)后的走查時(shí)間，這些都需要放到整個(gè)項(xiàng)目的排期內(nèi)。

設(shè)計(jì)是為了更好地解決問題，這是我加入設(shè)計(jì)行業(yè)之后一直堅(jiān)信的原則，也是在團(tuán)隊(duì)內(nèi)保持和各個(gè)部門合作的原則。雖然有時(shí)候會(huì)有所誤解，但相信我們的努力一定會(huì)得到回饋的。

如何進(jìn)行設(shè)計(jì)自查

接下來我們將從以下四個(gè)大的維度進(jìn)行設(shè)計(jì)自查說明：

• 視覺設(shè)計(jì)；
• 交互反饋；
• 特殊場景；
• 文件交付；

1. 視覺設(shè)計(jì)

視覺設(shè)計(jì)包含了視覺標(biāo)準(zhǔn)、視覺信息架構(gòu)、以及已有視覺風(fēng)格的應(yīng)用，設(shè)計(jì)師走查的原則就是傳達(dá)品牌風(fēng)格的同時(shí)保持標(biāo)準(zhǔn)化、一致性、最小化視覺傳達(dá)高效的信息。

平臺(tái)設(shè)計(jì)標(biāo)準(zhǔn)

不同的平臺(tái)設(shè)計(jì)標(biāo)準(zhǔn)是不一樣的，要按照所在平臺(tái)的規(guī)范來選擇尺寸。標(biāo)準(zhǔn)化帶來的一致性給用戶帶來了易學(xué)易用的便利。設(shè)計(jì)師需要考慮不同的平臺(tái)是否單獨(dú)出設(shè)計(jì)稿，以安卓和 iOS 平臺(tái)的圖標(biāo)為例：

△ icon-Android

△ icon-iOS

信息結(jié)構(gòu)

當(dāng)我們對于產(chǎn)品定位沒有清晰認(rèn)知的情況下，對于類似的需求可能會(huì)對頁面上的信息傳達(dá)過于均衡，每個(gè)信息都需要放大，每個(gè)信息都需要加強(qiáng)，每個(gè)信息都需要讓用戶獲取到，在工作場景中，我們就會(huì)經(jīng)常遇到：

• 這個(gè)信息需要放大；
• 這塊兒提示信息要強(qiáng)化；
• 這部分內(nèi)容雖然不重要但需要讓用戶知道；
• ...

諸如此類的情況，我們需要一個(gè)判斷信息重要與否的標(biāo)準(zhǔn)來更好地權(quán)衡信息重要程度，使頁面信息更有邏輯更加清晰。在眾多設(shè)計(jì)原理中，格式塔原理一直被廣泛應(yīng)用，它可以很好的梳理界面信息結(jié)構(gòu)、層級關(guān)系，從而提升設(shè)計(jì)的可讀性。在自查過程中，我們可以通過格式塔原理檢驗(yàn)頁面中的元素是否符合標(biāo)準(zhǔn)。

△ 信息層級-格式塔

以相似性在 MONO、開眼、ONE 中的應(yīng)用為例，我們可以發(fā)現(xiàn)，產(chǎn)品中相似的內(nèi)容在頁面中形成一個(gè)小的整體，向用戶傳遞他們之間的相關(guān)聯(lián)性，在視覺上營造視覺層次，可以很好的指導(dǎo)走查視覺元素的信息架構(gòu)。

△ 信息層級-格式塔原理

自查信息結(jié)構(gòu)時(shí)需要考慮的點(diǎn)：

• 整體信息結(jié)構(gòu)是否清晰？
• 頁面的信息層級是否合理？
• 瀏覽路徑是否符合瀏覽路徑？
• ...

文字

文字是產(chǎn)品的重要組成部分，是產(chǎn)品傳達(dá)給用戶的主要內(nèi)容，對產(chǎn)品有非常大的影響，自查中需要把關(guān)文字是否符合平臺(tái)規(guī)范。通常一款產(chǎn)品在設(shè)計(jì)之前會(huì)制定 Guideline，對文字的類型、字號及顏色進(jìn)行規(guī)范。

△ guideline

文字的類型、字號、顏色、行距、對齊方式都是走查需要注意的細(xì)節(jié)，因?yàn)楹芏鄷r(shí)候開發(fā)和我們的視角不一樣，有些細(xì)微之處是看不出來的。可參考以下四點(diǎn)對頁面進(jìn)行自查：

• 字體類型的數(shù)量遵守移動(dòng)端規(guī)范，種類控制在 2-3 種以內(nèi)，中英文及數(shù)字是否風(fēng)格統(tǒng)一？
• 字號的大小、粗細(xì)，是否能夠清晰地區(qū)分信息層級？
• 文字的顏色，在應(yīng)用場景中是否具有強(qiáng)光環(huán)境下的可閱讀性？品牌色、強(qiáng)調(diào)色運(yùn)用是否合理？
• 對齊方式、大小寫、日期等顯示格式在不同頁面是否統(tǒng)一？
• 文字溢出樣式是否符合規(guī)范？
• ...

圖標(biāo)

在界面中，圖標(biāo)不是單獨(dú)的個(gè)體，每個(gè)應(yīng)用內(nèi)的圖標(biāo)都應(yīng)該具有相同風(fēng)格的圖標(biāo)，包括形狀、圓角、線條粗細(xì)、品牌元素等。

圖標(biāo)在界面中通常是成群結(jié)隊(duì)的出現(xiàn)，所以風(fēng)格的一致性很容易對比出來。

△ DailyIcon

通過以上圖片我們可以得出：統(tǒng)一的尺寸、統(tǒng)一的色彩、統(tǒng)一的圓角處理、統(tǒng)一的線條、統(tǒng)一的輔助形狀，保持了每套圖標(biāo)的整體性。

系統(tǒng)圖標(biāo)還有一點(diǎn)需要注意，那就是尺寸，比如說 tab 欄、導(dǎo)航欄，常用尺寸為 48x48px、64x64px。

圖片

設(shè)計(jì)稿件中通常都會(huì)填充一些配圖保證頁面的完整性，設(shè)計(jì)師需要保證圖片的尺寸、比例統(tǒng)一。以電商為例，產(chǎn)品的首頁、詳情頁、以及其他頁面設(shè)計(jì)商品相關(guān)的頁面，其中一個(gè)為 1:1，那么其他頁面應(yīng)該都是 1:1。其他常見的圖片尺寸有 16:9、4:3、3:2、1:1 和 1:0.618（黃金比例）等。

圖片自查過程中需要注意的問題：

• 是否符合比例規(guī)范
• 圖片是否符合產(chǎn)品調(diào)性
• 圖片視覺方向是否符合頁面視覺方向
• ...

△ 信息層級-圖片比例

控件

控件或模塊交互樣式較多時(shí)，需要設(shè)計(jì)確保設(shè)計(jì)稿件的可用性，避免遺漏。可以在以下幾點(diǎn)進(jìn)行自測走查：

• 控件外觀是否符合用戶認(rèn)知？
• 控件與頁面元素間的關(guān)系是否表達(dá)正確？
• 控件的各種狀態(tài)是否展示一致？
• 控件是否對元素有干擾？
• ...

△ 信息層級-控件多態(tài)

2.交互與反饋

在交互設(shè)計(jì)精髓 4 中，作者曾提到大多數(shù)交互設(shè)計(jì)與視覺設(shè)計(jì)原則是跨平臺(tái)的，對于普通的設(shè)計(jì)原則和交互細(xì)節(jié)，不同層面之間的界限不是很分明，這一部分和視覺設(shè)計(jì)的目標(biāo)一致，都是將實(shí)際需求轉(zhuǎn)化為界面。

反饋機(jī)制

當(dāng)用戶和產(chǎn)品需要交互時(shí)，會(huì)使用不同的模式反饋信息或結(jié)果，為用戶在各個(gè)階段提供必要、積極、及時(shí)的反饋，避免過度反饋，以免帶來不必要的打擾。

常見的三種反饋信息如下，大家可以在此基礎(chǔ)上自查是否有反饋、反饋是否傳達(dá)清晰，是否對用戶有即時(shí)的響應(yīng)等細(xì)節(jié)，：

• 提示信息：如警告、通知，常見形式 Alert、Badge、Popover；
• 過程反饋：加載狀態(tài)、錄入反饋、確認(rèn)彈窗；
• 結(jié)果反饋：全局提示、對話框反饋；

操作規(guī)范

操作規(guī)范主要包括兩點(diǎn)：

• 可用性
• 容錯(cuò)性

在這兩點(diǎn)中，設(shè)計(jì)師需要檢查用戶在層級操作中是否達(dá)到了最短觸達(dá)路徑？不同的頁面同一個(gè)功能交互是否一致？對于危險(xiǎn)操作是否給予了二次確認(rèn)？操作后是否可以撤銷？以及對操作手勢的認(rèn)知。

△ 手勢

用戶引導(dǎo)

顧名思義，就是對于產(chǎn)品新功能以及對新用戶的引導(dǎo)，可以讓用戶在短時(shí)間內(nèi)快速了解產(chǎn)品，輕松上手體驗(yàn)產(chǎn)品，最終完成自己的使用目標(biāo)。

針對不同的場景，設(shè)計(jì)需要設(shè)計(jì)出不同的引導(dǎo)方案，同時(shí)要考慮用戶引導(dǎo)是否對不同權(quán)限的用戶展示同樣的引導(dǎo)？新功能提示是否對用戶的使用造成了打擾？用戶引導(dǎo)的取消機(jī)制是什么？

△ 引導(dǎo)層

3.特殊場景

特殊場景在設(shè)計(jì)過程中常常會(huì)被忽略，等到在現(xiàn)實(shí)中碰到才會(huì)意識到缺失異常狀態(tài)會(huì)非常尷尬，所以大家在完成主流程設(shè)計(jì)后，一定也要考慮到特殊場景。大家可以參照以下幾種場景對設(shè)計(jì)進(jìn)行自查優(yōu)化調(diào)整。

網(wǎng)絡(luò)異常

考慮到網(wǎng)絡(luò)異常情況時(shí)，通常產(chǎn)品會(huì)通過異常狀態(tài)頁面或者交互反饋來告知用戶當(dāng)前的異常狀態(tài)和如何解決問題（解決方案引導(dǎo)、刷新、toast）。

△ 網(wǎng)易嚴(yán)選

服務(wù)器異常

服務(wù)器異常狀況較少出現(xiàn)，時(shí)間也較短，通常不提示具體原因，設(shè)計(jì)處理方式為在新頁面展示缺省頁，文案+插畫的形式給予用戶提示及重試引導(dǎo)。

空狀態(tài)

空狀態(tài)指的是頁面中無內(nèi)容，主要的幾個(gè)情況，設(shè)計(jì)師需要根據(jù)不同的場景給出文案+插畫的表現(xiàn)形式引導(dǎo)用戶：

• 無權(quán)限，針對的是某些需要權(quán)限開啟后才能獲取內(nèi)容的頁面；
• 搜索無結(jié)果，對應(yīng)搜索無相應(yīng)結(jié)果的空狀態(tài)提示；
• 內(nèi)容為空，如初始狀態(tài)、內(nèi)容被清空后的狀態(tài)。

4. 文件交付

最后在我們設(shè)計(jì)完成后，對接開發(fā)同學(xué)，這時(shí)候我們需要提供符合規(guī)則的交付物，除了溝通，交付物會(huì)直接影響接下來的產(chǎn)品進(jìn)程。

文檔

管理一個(gè)好的設(shè)計(jì)文檔對團(tuán)隊(duì)協(xié)作是非常重要的，文檔的命名方式、構(gòu)成都需要在團(tuán)隊(duì)內(nèi)達(dá)成一致，通常需要注意以下幾點(diǎn)：

• 設(shè)計(jì)文件本身的圖層規(guī)范，包含圖層命名、編組；
• 符合團(tuán)隊(duì)規(guī)范的文檔命名和書寫格式；
• 版本記錄，修改的內(nèi)容是否清晰準(zhǔn)確；

標(biāo)注

現(xiàn)在的設(shè)計(jì)工具非常方便，設(shè)計(jì)師只需要用 sketch 插件或 Ps 插件就可以一鍵導(dǎo)出開發(fā)同學(xué)需要的標(biāo)注，與 UI 剛興起那會(huì)需要大量時(shí)間進(jìn)行標(biāo)注完全不同，為設(shè)計(jì)師節(jié)省了很多時(shí)間。但有些時(shí)候還是需要做一些額外的標(biāo)注：

• 頁面涉及新的功能點(diǎn)及修改；
• 適配問題，考慮小屏、短屏、長屏等不同的機(jī)型；
• 動(dòng)效實(shí)現(xiàn)，需要提供動(dòng)效標(biāo)注及動(dòng)畫效果展示；
• 文字的斷行、文字顯示范圍、最大值、最小值等；
• ...

資源包

資源包是開發(fā)所需切片，輸出的切圖除了準(zhǔn)確、完整，還需要考慮后期的維護(hù)成本以及復(fù)用、可擴(kuò)展性，盡量減少切圖的數(shù)量。

設(shè)計(jì)走查表

整理了一份設(shè)計(jì)走查表以供參考，大家可以根據(jù)自己的工作場景進(jìn)行查缺補(bǔ)漏，愉快的和開發(fā)小哥哥們合作。

△ 設(shè)計(jì)走查清單

小結(jié)

以上是自己在工作中總結(jié)的一些經(jīng)驗(yàn)，希望可以對大家有所幫助，做好設(shè)計(jì)自查工作，減少協(xié)作的工作成本，更高效的與團(tuán)隊(duì)成員合作！

學(xué)須靜，才須學(xué)。做一名優(yōu)秀的設(shè)計(jì)師還需要繼續(xù)努力啊，第一次寫對外的文章，大家多多指教。

歡迎關(guān)注作者微信公眾號：「木子的小千世界 」