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

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

我今天查看天氣的時(shí)候打開(kāi)了一款天氣app

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

我們先不談層級(jí)問(wèn)題，我們先來(lái)瀏覽一下完整的信息。

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

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

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

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

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

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

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

下面我們來(lái)看一下操作欄。

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

有些軟件的這個(gè)位置，屬于頻繁操作位置，但是在這里不是，因?yàn)楫?dāng)你單手持握手持設(shè)備的時(shí)候，這個(gè)位置其實(shí)并不好點(diǎn)按。

天氣按鈕：打開(kāi)軟件的時(shí)候是默認(rèn)開(kāi)啟的。一般用戶在看完天氣以后，點(diǎn)按其他信息之后，很少會(huì)再點(diǎn)回天氣了。所以這也屬于一個(gè)很低操作的按鈕。

時(shí)景：這個(gè)東西，其實(shí)存在感可有可無(wú)。

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

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

還被放在了可有可無(wú)的時(shí)景下面？

原因很簡(jiǎn)單：最易操作位置！

為什么這個(gè)位置最易操作？當(dāng)你單手持握設(shè)備的時(shí)候，不是在你手旁邊的按鈕最容易按到，而是稍微遠(yuǎn)一點(diǎn)，的更容易操作，第一是因?yàn)橐曈X(jué)上看的清楚，第二是因?yàn)槿说氖种�，伸展，比回拉更容易�?/p>

地圖按鈕：

地圖：天氣的具體位置，也是非常頻繁操作的按鈕，但是相比較來(lái)說(shuō)，地圖點(diǎn)按幾率，可能沒(méi)有指標(biāo)那么高。

下面三個(gè)按鈕：

一個(gè)是用戶登陸

一個(gè)是軟件推薦

一個(gè)是設(shè)置

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

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

不僅僅是因?yàn)橐曈X(jué)區(qū)分的原因。

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

所以我們來(lái)看一下操作難易度，與信息層級(jí)的對(duì)比

所以，當(dāng)你去分析一個(gè)產(chǎn)品的時(shí)候，要多想一下，為什么，為什么它們?cè)谀抢�，而不再其他的位置上�?/p>

我們?cè)倩剡^(guò)頭來(lái)看一下橫屏。。。

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

不能！

有幾個(gè)原因：

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

2下拉的豎向?yàn)g覽信息，其實(shí)效率很高。盡可能簡(jiǎn)化用戶信息讀取量才能盡可能的讓信息交流效率更高。

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

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

1信息傳達(dá)的效率

2信息的傳達(dá)順序

3操作的效率

4視覺(jué)上的美觀

信息的傳達(dá)效率和傳達(dá)順序，不分先后，因?yàn)轫?xiàng)目需求不同，這兩者根據(jù)需求是可以互換的，但是前提是只有一個(gè)為主。

操作效率比美觀更重要。

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

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

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

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