最近，看《我的家里空無一物》被種草，開始學習收納。在看收納書時，發(fā)現(xiàn)收納思維和 UI 設(shè)計布局很類似。那我們今天用收納思維說說怎么做 UI 模塊化整合。

為什么要談模塊整合？

一張原型頁面上有各種各樣的信息元素。模塊化整合，就是在現(xiàn)有的元素中，提取共性，分門別類，再排好。從閱讀的角度來看，讓相似內(nèi)容聚集、易找；從視覺感知角度來看，讓頁面元素不散，耐看。所以，不光是交互上，還是視覺上，讓頁面信息有模塊感，是 UI 高手進階過程中的一個必備技能。

用收納思維做UI模塊整合

收納的本質(zhì)是把現(xiàn)有的東西分門別類進行整理，讓居住空間舒適、美觀、不雜亂。

由《速戰(zhàn)速決的快樂收納術(shù)》 [日]飯?zhí)锞没荩占{ 5 步法獲得靈感，提煉出以下「UI模塊整合思路」流程。

1. 認識 - 對原型內(nèi)容有認知

拿到原型，我們需要弄清楚每一個元素存在的目的意圖，并與需求方明確以下要點：

• 信息層級 溝通確認此頁面，最重要、次要的信息，依次類推。便于整合模塊信息過程中兼顧視覺表達。
• 文字信息和字符最大長度，每個文字信息的最大長度是？什么文字可以省略，什么不能？如果沒有明確，可以根據(jù)視覺顯示效果再具體給到需求方建議。
• 按鈕，明確是否有引導(dǎo)點擊轉(zhuǎn)化的需求，按鈕強調(diào)的強弱等。
• 頁面預(yù)期，部分原型提供者會對頁面有自己的構(gòu)想和預(yù)期。思考是否可以執(zhí)行，成本大小。如果不可以，需要提前溝通并和對方達成一致的認知。（tips：用參考圖例來溝通，避免語言造成的理解不一致情況）

2. 整理 - 核對斟酌每一個元素的必要性，歸納、合并；

不是每一個原型的完成，都是成熟且不可辯駁的?！笇W會質(zhì)疑」，我們可以結(jié)合改版目的，開始獨立思考。其實設(shè)計師很容易把自己轉(zhuǎn)化成用戶小白的角度看待問題。用以下 3 點來思考整理頁面信息與元素：

• 認識斟酌，核對每一個元素的必要性，如果沒有必要，那么借用知識點佐證自己想法與需求方提出建議并討論；
• 歸納分類，全局審視，把同類別的東西，歸納整理為一個整體；
• 層級思考，部分按鈕、入口或者模塊，要注意是否有從屬關(guān)系、層級關(guān)系；

3. 構(gòu)思 - 快速構(gòu)建可能性的結(jié)構(gòu)與布局

完成前期準備工作后，就要開動小腦筋啦！根據(jù)以上 2 步得到的要點，用筆在紙上繪制可行性方案，手稿可以快速直觀的了解頁面結(jié)構(gòu)與布局、信息展示位置、交互元素等。

在構(gòu)思布局過程中，還需要考慮 UI 延展性問題。如果下個版本增加字段或者功能，UI 布局要大改，這樣的布局方案最好再重新思考。

4. 執(zhí)行 - 采用可行性方案兼顧思考視覺表達

審視繪制的所有方案，然后選出 1 到 2 個可行性方案，開始執(zhí)行。在輸出高保真交互原型過程中，需要兼顧思考視覺的表達形式，按鈕是用線框？用填充？卡片用投影？還是用底色？這樣的布局，如果多顏色使用，畫面是否會亂？等一系列的思考，選擇最合適的一個方案來輸出。

5. 復(fù)盤 - 檢查輸出物是否與需求點契合

有的時候，路徑長了，時間久了，會偏離初心。階段性的回顧與自我思辨，才能讓設(shè)計輸出物更貼合需求目的。

整個設(shè)計完成后，總結(jié)與回顧，也很必須。優(yōu)秀的模塊設(shè)計可以提煉出可復(fù)用性樣式，方便 APP 全局一致化處理。不好的地方則改之，不斷修正以至切合需求目的。

總結(jié)

縱觀優(yōu)秀的平面設(shè)計、UI 設(shè)計，模塊感的整合都是必不可少的存在。它讓信息更易讀，也讓視覺更美觀。你學到了嗎？

歡迎關(guān)注作者的微信公眾號：「丘丘的設(shè)計筆記」