UI知識，層級對UI設(shè)計結(jié)果的影響

任何設(shè)計都應(yīng)該有它存在的理由。很多同學(xué)在設(shè)計練習(xí)的時候都無法確定設(shè)計命題，信息層級劃分，操作的層級劃分，甚至覺得命題練習(xí)很迷茫。所以今天我就帶領(lǐng)大家一起分析一個實(shí)際已經(jīng)上市的產(chǎn)品的UI樣例。幫助大家分析UI信息中的必然因素。

我今天查看天氣的時候打開了一款天氣app

很多人應(yīng)該對這款app都很熟悉，我們首先可以看到，這款軟件是可以橫豎屏自動適應(yīng)的。從構(gòu)圖比例來說，這款軟件是以豎屏作為主要顯示模式的。在豎屏的情況下，觀看效果最佳。

我們先不談層級問題，我們先來瀏覽一下完整的信息。

下拉信息框以后，這里出現(xiàn)了一個商用ui不應(yīng)該犯的錯誤。

當(dāng)信息全部下拉到底的時候，信息上邊緣有一排未顯示完全的文字，漏邊了。這個瑣碎的文字邊角，破壞了整體的UI視覺完整性。

其實(shí)這個缺陷是可以避免的，只需要在程序上調(diào)整一下文字距離

（這種ui中的錯誤，其實(shí)不算多，但是也不算少）

因?yàn)檫@個軟件，在橫豎屏上都需要自適應(yīng)尺寸，所以取的是一個平均距離，理論上，ui人員在檢查UI的時候，是可以讓程序人間進(jìn)行修正的。

橫屏的下拉信息也是不完整的。這種問題跟上面一樣，都是可以通過程序坐標(biāo)修改間距的。

那么這個問題嚴(yán)不嚴(yán)重呢？其實(shí)這就很主觀了。因?yàn)榭梢酝侠拿姘�，除了最上和最下位置，它其�?shí)還有很多手動的中間位置，不可能保證所有信息的視覺完整性。是可以通過程序調(diào)整，讓信息看起來更完整，但是這所花費(fèi)的時間，精力，成本，和所獲得的用戶體驗(yàn)之間的性價比，那只有研發(fā)人員才能去權(quán)衡了。

下面我們來看一下操作欄。

最上面的按鈕是添加城市，這個按鈕幾乎沒有多少可操作性，除了第一次打開軟件設(shè)置它以外，可能出差旅游，會點(diǎn)按幾次。