當(dāng)前位置:首頁>ps入門教程>ps基礎(chǔ)教程>設(shè)計知識>教程內(nèi)容

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

來源:站酷 作者:鐵木士 學(xué)習(xí):2221人次

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

學(xué)習(xí) · 提示

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

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!