在互聯網敏捷開發迭代的過程中，設計自查可以提供全面的檢測，為上下游更高效的合作提供一個完整的設計方案。

設計方案的完整，指的是在自查階段，考慮設計文件是否符合業務流程，頁面的層級關係、信息區分及設計的擴展性。保證設計方案的完整是設計師的職業素養，對自己的產出進行查漏補缺，設計出符合需求的頁面並保障產品順利進行。

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

△ 設計走查流程

容易遇到的問題

在很多互聯網企業中，設計師有可能會遇到如下問題：

• 對需求不了解，直接跳入細節設計；
• 設計時間被無限壓縮；
• 一人支持跟進多個項目；
  …

在目標導向設計中，設計師應該先站在一個高的角度了解產品行為的整個架構然後再進行精細化的設計，這樣才能夠保證設計完成后與產品目標保持一致。

在部分小型創業團隊，團隊成員有時不願按照流程進行，這時候需要我們在加強自身專業能力的同時，與團隊成員积極溝通，在團隊內達成設計流程的共識並制定相關的措施。比如說，制定設計流程，讓團隊成員對設計有所認知；預留設計走查的時間，包括自查時間、開發后的走查時間，這些都需要放到整個項目的排期內。

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

如何進行設計自查

接下來我們將從以下四個大的維度進行設計自查說明：

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

1. 視覺設計

視覺設計包含了視覺標準、視覺信息架構、以及已有視覺風格的應用，設計師走查的原則就是傳達品牌風格的同時保持標準化、一致性、最小化視覺傳達高效的信息。

平台設計標準

不同的平台設計標準是不一樣的，要按照所在平台的規範來選擇尺寸。標準化帶來的一致性給用戶帶來了易學易用的便利。設計師需要考慮不同的平台是否單獨出設計稿，以安卓和 iOS 平台的圖標為例：

△ icon-Android

△ icon-iOS

信息結構

當我們對於產品定位沒有清晰認知的情況下，對於類似的需求可能會對頁面上的信息傳達過於均衡，每個信息都需要放大，每個信息都需要加強，每個信息都需要讓用戶獲取到，在工作場景中，我們就會經常遇到：

• 這個信息需要放大；
• 這塊兒提示信息要強化；
• 這部分內容雖然不重要但需要讓用戶知道；
• …

諸如此類的情況，我們需要一個判斷信息重要與否的標準來更好地權衡信息重要程度，使頁面信息更有邏輯更加清晰。在眾多設計原理中，格式塔原理一直被廣泛應用，它可以很好的梳理界面信息結構、層級關係，從而提升設計的可讀性。在自查過程中，我們可以通過格式塔原理檢驗頁面中的元素是否符合標準。

△ 信息層級-格式塔

以相似性在 MONO、開眼、ONE 中的應用為例，我們可以發現，產品中相似的內容在頁面中形成一個小的整體，向用戶傳遞他們之間的相關聯性，在視覺上營造視覺層次，可以很好的指導走查視覺元素的信息架構。

△ 信息層級-格式塔原理

自查信息結構時需要考慮的點：

• 整體信息結構是否清晰？
• 頁面的信息層級是否合理？
• 瀏覽路徑是否符合瀏覽路徑？
• …

閱讀文章 >>

文字

文字是產品的重要組成部分，是產品傳達給用戶的主要內容，對產品有非常大的影響，自查中需要把關文字是否符合平台規範。通常一款產品在設計之前會制定 Guideline，對文字的類型、字號及顏色進行規範。

△ guideline

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

• 字體類型的數量遵守移動端規範，種類控制在 2-3 種以內，中英文及数字是否風格統一？
• 字號的大小、粗細，是否能夠清晰地區分信息層級？
• 文字的顏色，在應用場景中是否具有強光環境下的可閱讀性？品牌色、強調色運用是否合理？
• 對齊方式、大小寫、日期等显示格式在不同頁面是否統一？
• 文字溢出樣式是否符合規範？
• …

圖標

在界面中，圖標不是單獨的個體，每個應用內的圖標都應該具有相同風格的圖標，包括形狀、圓角、線條粗細、品牌元素等。

圖標在界面中通常是成群結隊的出現，所以風格的一致性很容易對比出來。

△ DailyIcon

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

系統圖標還有一點需要注意，那就是尺寸，比如說 tab 欄、導航欄，常用尺寸為 48x48px、64x64px。

閱讀文章 >>

圖片

設計稿件中通常都會填充一些配圖保證頁面的完整性，設計師需要保證圖片的尺寸、比例統一。以電商為例，產品的首頁、詳情頁、以及其他頁面設計商品相關的頁面，其中一個為 1:1，那麼其他頁面應該都是 1:1。其他常見的圖片尺寸有 16:9、4:3、3:2、1:1 和 1:0.618（黃金比例）等。

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

• 是否符合比例規範
• 圖片是否符合產品調性
• 圖片視覺方向是否符合頁面視覺方向
• …

△ 信息層級-圖片比例

控件

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

• 控件外觀是否符合用戶認知？
• 控件與頁面元素間的關係是否表達正確？
• 控件的各種狀態是否展示一致？
• 控件是否對元素有干擾？
• …

△ 信息層級-控件多態

2.交互與反饋

在交互設計精髓 4 中，作者曾提到大多數交互設計與視覺設計原則是跨平台的，對於普通的設計原則和交互細節，不同層面之間的界限不是很分明，這一部分和視覺設計的目標一致，都是將實際需求轉化為界面。

反饋機制

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

常見的三種反饋信息如下，大家可以在此基礎上自查是否有反饋、反饋是否傳達清晰，是否對用戶有即時的響應等細節，：

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

操作規範

操作規範主要包括兩點：

• 可用性
• 容錯性

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

△ 手勢

用戶引導

顧名思義，就是對於產品新功能以及對新用戶的引導，可以讓用戶在短時間內快速了解產品，輕鬆上手體驗產品，最終完成自己的使用目標。

針對不同的場景，設計需要設計出不同的引導方案，同時要考慮用戶引導是否對不同權限的用戶展示同樣的引導？新功能提示是否對用戶的使用造成了打擾？用戶引導的取消機制是什麼？

△ 引導層

3.特殊場景

特殊場景在設計過程中常常會被忽略，等到在現實中碰到才會意識到缺失異常狀態會非常尷尬，所以大家在完成主流程設計后，一定也要考慮到特殊場景。大家可以參照以下幾種場景對設計進行自查優化調整。

網絡異常

考慮到網絡異常情況時，通常產品會通過異常狀態頁面或者交互反饋來告知用戶當前的異常狀態和如何解決問題（解決方案引導、刷新、toast）。

△ 網易嚴選

服務器異常

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

空狀態

空狀態指的是頁面中無內容，主要的幾個情況，設計師需要根據不同的場景給出文案+插畫的表現形式引導用戶：

• 無權限，針對的是某些需要權限開啟后才能獲取內容的頁面；
• 搜索無結果，對應搜索無相應結果的空狀態提示；
• 內容為空，如初始狀態、內容被清空后的狀態。

閱讀文章 >>

4. 文件交付

最後在我們設計完成后，對接開發同學，這時候我們需要提供符合規則的交付物，除了溝通，交付物會直接影響接下來的產品進程。

文檔

管理一個好的設計文檔對團隊協作是非常重要的，文檔的命名方式、構成都需要在團隊內達成一致，通常需要注意以下幾點：

• 設計文件本身的圖層規範，包含圖層命名、編組；
• 符合團隊規範的文檔命名和書寫格式；
• 版本記錄，修改的內容是否清晰準確；

標註

現在的設計工具非常方便，設計師只需要用 sketch 插件或 Ps 插件就可以一鍵導出開發同學需要的標註，與 UI 剛興起那會需要大量時間進行標註完全不同，為設計師節省了很多時間。但有些時候還是需要做一些額外的標註：

• 頁面涉及新的功能點及修改；
• 適配問題，考慮小屏、短屏、長屏等不同的機型；
• 動效實現，需要提供動效標註及動畫效果展示；
• 文字的斷行、文字显示範圍、最大值、最小值等；
• …

資源包

資源包是開發所需切片，輸出的切圖除了準確、完整，還需要考慮後期的維護成本以及復用、可擴展性，盡量減少切圖的數量。

設計走查表

整理了一份設計走查表以供參考，大家可以根據自己的工作場景進行查缺補漏，愉快的和開發小哥哥們合作。

△ 設計走查清單

小結

以上是自己在工作中總結的一些經驗，希望可以對大家有所幫助，做好設計自查工作，減少協作的工作成本，更高效的與團隊成員合作！

學須靜，才須學。做一名優秀的設計師還需要繼續努力啊，第一次寫對外的文章，大家多多指教。

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

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 杏耀註冊平台官網_你的設計過關嗎？用這份大神總結的自查手冊看看！