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

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

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

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

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

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

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

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

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

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

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

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

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

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

有些軟件的這個位置，屬于頻繁操作位置，但是在這里不是，因為當你單手持握手持設(shè)備的時候，這個位置其實并不好點按。

天氣按鈕：打開軟件的時候是默認開啟的。一般用戶在看完天氣以后，點按其他信息之后，很少會再點回天氣了。所以這也屬于一個很低操作的按鈕。

時景：這個東西，其實存在感可有可無。

關(guān)鍵的地方來了：指數(shù)按鈕

指數(shù)按鈕其實是一個跟天氣密切相關(guān)的信息，為什么被放在第四位？

還被放在了可有可無的時景下面？

原因很簡單：最易操作位置！

為什么這個位置最易操作？當你單手持握設(shè)備的時候，不是在你手旁邊的按鈕最容易按到，而是稍微遠一點，的更容易操作，第一是因為視覺上看的清楚，第二是因為人的手指，伸展，比回拉更容易。

地圖按鈕：

地圖：天氣的具體位置，也是非常頻繁操作的按鈕，但是相比較來說，地圖點按幾率，可能沒有指標那么高。

下面三個按鈕：

一個是用戶登陸

一個是軟件推薦

一個是設(shè)置

這三個都屬于低操作需求的按鈕，甚至都很少有人去碰它，幾個月點一兩次都正常，一年不點也正常。

但是他們?yōu)槭裁床慌帕性谄渌粹o的下面，而放到底下？

不僅僅是因為視覺區(qū)分的原因。

左側(cè)觸摸欄，最容易觸摸的位置，其實最容易誤操作，如果一個ui設(shè)計的太方便點按，一樣也會給用戶帶來麻煩。所以最容易誤操作的區(qū)域，能空則空。

所以我們來看一下操作難易度，與信息層級的對比

所以，當你去分析一個產(chǎn)品的時候，要多想一下，為什么，為什么它們在那里，而不再其他的位置上？

我們再回過頭來看一下橫屏。。。

信息欄，因為自適應(yīng)橫豎屏幕，但是它的寬度依然保持不變，橫屏的時候會發(fā)現(xiàn)，幾乎等于浪費了一半的可視范圍。那么我們能不能考慮把所有天氣信息都放出來呢？

不能！

有幾個原因：

1太多信息一眼看上去你是無法一次性快速分辨的。

2下拉的豎向瀏覽信息，其實效率很高。盡可能簡化用戶信息讀取量才能盡可能的讓信息交流效率更高。

3從成本上考慮。比起分別制作不同顯示方向上適應(yīng)修改，這個成本多數(shù)情況下不值得。

我們來看一下，在UI設(shè)計里，有哪些目的：

1信息傳達的效率

2信息的傳達順序

3操作的效率

4視覺上的美觀

信息的傳達效率和傳達順序，不分先后，因為項目需求不同，這兩者根據(jù)需求是可以互換的，但是前提是只有一個為主。

操作效率比美觀更重要。

所以這里犧牲最大的就是視覺上好不好看這一點了。其實市面上是很難找到幾個視覺上巨丑無比的UI范本的。因為UI本身并不復(fù)雜，所以哪怕是為各種目的做了犧牲和割舍，也依然有很多可調(diào)整空間。

去了解市場上的應(yīng)用軟件，游戲，網(wǎng)站，區(qū)分內(nèi)容和信息，區(qū)分功能區(qū)域，然后去思考他們的設(shè)計目的，原始初衷，是很好的設(shè)計練習。做這種練習，記得一定要寫個人筆記，因為工作以后，你會發(fā)現(xiàn)，你的工作與這些問題幾乎相同。

在你還沒有特別個性的設(shè)計之前，積攢市場上的產(chǎn)品熟悉度，也是學習的一個方法。甚至可以叫做職業(yè)素養(yǎng)。

如果有問題可以給我留言，我盡可能的寫成詳細教程，比聊天要規(guī)范的多，也更容易理解。今天就到這吧。