更為合理的頁面佈局思考

在工作中我們總能遇到一些看似複雜的原型頁面，那我們應該盲目的上色了嗎？

最後做出來自己都不會使用的設計！選擇說NO！我們需要理智的分析頁面，做成合理的設計。

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

所以在我們看到很亂很複雜的頁面時，我們學會去從產品原型思考，思考為什麼會亂，先得自己理清楚，做出來的東西才有可能讓使用者理解。

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

原型案例：

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

其次我看在看到這個頁面不知所措的地方當然不只是在難點上，拿到這個頁面的時候，第一反應是【亂】，一時看不明白這個頁面。

所以在出現問題時我們去思考為什麼這個頁面會【亂】

下圖為層級佈局圖：

這是一個正常的層級區塊劃分圖，但是在第二層級出現了問題，如下圖：

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

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

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

但是，將其統一獨立後的banner，我們會發現並不能與下面的內容聯絡起來，因為一個多行排版的banner並不能作為一個taitle來使用，心細的M做了如下兩個如來區別什麼banner可以什麼不可以：

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

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

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

總結：合理的產品佈局有利於設計的的合理性同時在使用者的把玩時的流程性，同時在產品開發過程中也能節省很多時間。

不要盲目的做設計，做更為合理的設計。