本文將持續(xù)更新，小美工（以后簡稱M）在工作中遇到的一些看似復雜的產品需求原型和一些UED團隊的經典案例。

一些看似復雜的頁面，說不定是原型出了問題？（敢于質疑）

我們工作中總是會碰見不少的紗布需求和一些相對不成熟的產品經理，那么我的應對方式是什么呢？其實這個話題是不少UI設計師經常會遇到和提及的問題，但時常多數(shù)的設計師是在沒看明白產品原型的情況下就開始上色了。我們做美工的的確能把原型稿通過工具用不同的手法展示出不一樣的感覺，但那樣就真的對了嗎？

有時候在我們學會做減法的時候可以嘗試著去思考這個頁面為什么會看上去復雜，或者是亂?(如果照著一個很“亂”的產品原型去上色，那我覺得設計出來的頁面帶給用戶的體驗也算不好的，甚至和你拿到原型的時候一樣不知所云，找不到哦這個頁面的根本，不知道這個頁面在描繪著什么，那么這個時候這個頁面就是不合格的。)所以在我們看到很亂很復雜的頁面時，我們學會去從產品原型思考，思考為什么會亂，先得自己理清楚，做出來的東西才有可能讓用戶理解。

唐納德說的很好的一句話：當我不知道怎么讓水龍頭出水時，那么就是這個水龍頭設計得不好!

案例一

產品原型

當M在瀏覽本次需求時，看到這個頁面時腦子是一片空白的，有點力不從心，無從下筆，所以M決定將它留到最后花時間完成。

首先我們看難點：內容上，一屏展示這么多的內容，層級上，一屏展示3層層級（一級層級“曲線...”、二級層級“中行匯買價...”、三級層級“7天...”）。

其次我看在看到這個頁面不知所措的地方當然不只是在難點上，當M在拿到這個頁面的時候，第一反應是【亂】，一時看不明白這個頁面。所以在有了問題，M就本能的去思考問題，為什么這個頁面會【亂】，真的是自己的設計能力問題嗎？或者是其他的原因？

在M經過一上午的思考后總算是得出了這個頁面亂的問題所在。見下圖解：

這是一個正常的層級區(qū)塊劃分圖，但是在第二層級出現(xiàn)了問題，如下圖：

二級title的管轄范圍其實并不包括，第二個或第三個的內容部分。

那如果你說，我們可以理解成把title和對應內容看成是一個大title。那就是可以理解成【title+內容=banner】也就是下圖所示：

這樣看似乎層級是合理的了，不存在管轄混亂的說法。但這樣出現(xiàn)了一個更大的問題，如果把title類比成banner，那么三個banner實則是平級的，是相對獨立的，或者說是三個banner都屬于第一層級。

但是，將其統(tǒng)一獨立后的banner，我們會發(fā)現(xiàn)并不能與下面的內容聯(lián)系起來，因為一個多行排版的banner并不能作為一個taitle來使用，心細的M做了如下兩個如來區(qū)別什么banner可以什么不可以：

如圖所示，如果要讓banner作為二級taitle，那么應該是右邊的情況。所以綜上所述，我們不難得出產品的過分想展示內容導致了頁面層級的混亂。

最后我們得出一稿相對合理的層級分布圖，如下：

我們將二級title下其余的內容移除，只展示當前title下的內容，這樣雖然我們不能在一屏上看到更多的信息，但是我們避免了讓用戶看到不屬于這個頁面的內容，讓用戶更清晰知道這個頁面的內容就是屬于這個title下的。

結論：有時候并不一定產品原型就是對的，有時候也并不是一屏展示出所有的信息就是對用戶有益的，所以在合理的情況下去分析產品的結構也許對用戶對設計來說都不是一門損失。

略述己見，大佬們不要見笑。

未完待續(xù)...?