當前位置:首頁>ps入門教程>ps基礎教程>設計知識>教程內容

UI知識,層級對UI設計結果的影響(4)

來源:站酷 作者:鐵木士 學習:2221人次

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

 

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

 

UI知識,層級對UI設計結果的影響

 

UI知識,層級對UI設計結果的影響

 

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

 

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

 

UI知識,層級對UI設計結果的影響

 

下拉信息框以后,這里出現了一個商用ui不應該犯的錯誤。

 

UI知識,層級對UI設計結果的影響

 

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

 

其實這個缺陷是可以避免的,只需要在程序上調整一下文字距離

 

(這種ui中的錯誤,其實不算多,但是也不算少)

 

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

 

UI知識,層級對UI設計結果的影響

 

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

 

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

 

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

 

UI知識,層級對UI設計結果的影響

 

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

 

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

 

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

 

時景:這個東西,其實存在感可有可無。

 

關鍵的地方來了:指數按鈕

UI知識,層級對UI設計結果的影響

 

指數按鈕其實是一個跟天氣密切相關的信息,為什么被放在第四位?

 

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

 

原因很簡單:最易操作位置!

 

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

 

地圖按鈕:

UI知識,層級對UI設計結果的影響

 

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

 

下面三個按鈕:

一個是用戶登陸

一個是軟件推薦

一個是設置

 

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

 

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

 

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

 

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

 

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

 

UI知識,層級對UI設計結果的影響

 

所以,當你去分析一個產品的時候,要多想一下,為什么,為什么它們在那里,而不再其他的位置上?

 

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

UI知識,層級對UI設計結果的影響

 

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

 

不能!

 

有幾個原因:

 

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

 

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

 

3從成本上考慮。比起分別制作不同顯示方向上適應修改,這個成本多數情況下不值得。

 

我們來看一下,在UI設計里,有哪些目的:

 

1信息傳達的效率

 

2信息的傳達順序

 

3操作的效率

 

4視覺上的美觀

 

 

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

 

操作效率比美觀更重要。

 

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

 

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

 

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

 

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

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網友求助,請回答!