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

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

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

△ 設(shè)計走查流程

容易遇到的問題

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

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

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

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

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

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

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

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

1. 視覺設(shè)計

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

平臺設(shè)計標(biāo)準(zhǔn)

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

△ icon-Android

△ icon-iOS

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

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

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

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

△ 信息層級-格式塔

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

△ 信息層級-格式塔原理

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

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

文字

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

△ guideline

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

• 字體類型的數(shù)量遵守移動端規(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ú)的個體，每個應(yīng)用內(nèi)的圖標(biāo)都應(yīng)該具有相同風(fēng)格的圖標(biāo)，包括形狀、圓角、線條粗細(xì)、品牌元素等。

圖標(biāo)在界面中通常是成群結(jié)隊的出現(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è)計稿件中通常都會填充一些配圖保證頁面的完整性，設(shè)計師需要保證圖片的尺寸、比例統(tǒng)一。以電商為例，產(chǎn)品的首頁、詳情頁、以及其他頁面設(shè)計商品相關(guān)的頁面，其中一個為 1:1，那么其他頁面應(yīng)該都是 1:1。其他常見的圖片尺寸有 16:9、4:3、3:2、1:1 和 1:0.618（黃金比例）等。

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

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

△ 信息層級-圖片比例

控件

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

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

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

2.交互與反饋

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

反饋機(jī)制

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

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

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

操作規(guī)范

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

• 可用性
• 容錯性

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

△ 手勢

用戶引導(dǎo)

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

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

△ 引導(dǎo)層

3.特殊場景

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

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

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

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

服務(wù)器異常

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

空狀態(tài)

空狀態(tài)指的是頁面中無內(nèi)容，主要的幾個情況，設(shè)計師需要根據(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è)計完成后，對接開發(fā)同學(xué)，這時候我們需要提供符合規(guī)則的交付物，除了溝通，交付物會直接影響接下來的產(chǎn)品進(jìn)程。

文檔

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

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

標(biāo)注

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

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

資源包

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

設(shè)計走查表

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

△ 設(shè)計走查清單

小結(jié)

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

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

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