<menuitem id="ddffh"></menuitem>
<span id="ddffh"></span><progress id="ddffh"><video id="ddffh"><span id="ddffh"></span></video></progress>
<span id="ddffh"><dl id="ddffh"><del id="ddffh"></del></dl></span>
<strike id="ddffh"></strike>
<span id="ddffh"><i id="ddffh"></i></span>
<strike id="ddffh"></strike>
<span id="ddffh"><video id="ddffh"></video></span>
<span id="ddffh"><dl id="ddffh"><ruby id="ddffh"></ruby></dl></span><span id="ddffh"></span>
<ruby id="ddffh"></ruby>
<span id="ddffh"></span>
<span id="ddffh"></span><strike id="ddffh"></strike>
<span id="ddffh"></span>
<span id="ddffh"><video id="ddffh"></video></span>
<span id="ddffh"><video id="ddffh"></video></span>
<span id="ddffh"></span>
<strike id="ddffh"></strike>
<span id="ddffh"></span><th id="ddffh"><video id="ddffh"></video></th>
旗下產業: A產業/ A實習/ A計劃
全國統一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設計 > UI設計中踩過的坑
UI設計中踩過的坑
時間:2020-09-18來源:www.biancheng38.icu點擊量:作者:Gella
時間:2020-09-18點擊量:作者:Gella

  總有人說ui設計師,天天畫個線框圖,還拿那么高工資!
 

  膚淺!
 

  幼稚!
 

  切!
 

  你是不了解,UI設計并不是把一張圖做好就完事了,要考慮它的可用性,延展性,全面性、實現成本,還原程度等等等等.....
 

  因素可多了呢!
 

  這其中一個全面性就可以難倒很多新人。
 

  今天AAA教育郭老師就分享幾個自己遇到過的“沒有考慮全面”的幾個小案例,幫你增加點工作經驗,以后你遇到類似的坑,可以盡量避免一下。
 

  大綱如下:
 

  1.文字一多就放不下了
 

  2.你的滑桿拉到頭試試
 

  3.只考慮了暗色圖片,淺色的呢?
 

  4.語種一變,讓你猝不及防
 

  1.文字一多就放不下了

 

UI設計中踩過的坑

 

  之前在做抽獎頁面的時候,每個信息模塊的排布最初是這樣的:
 

  看起來似乎沒有問題,在設計層面也還算ok,但當與產品溝通后,才知道這樣的布局是有問題的,為什么?
 

  因為我們沒有了解全局的信息情況,比如很多獎品的名稱會有很多文字,并且會顯示獎品數量。
 

  這樣的話,原來的結構擴展性不夠友好,顯示不了幾個字就要折行,一折行就會密密麻麻全是文字,并且數量也不好區分顯示:

 

UI設計中踩過的坑

 

  在了解了全局信息后,才調整了上下布局:

 

UI設計中踩過的坑

 

  這樣擴展性就好很多,信息足夠清晰,也基本保證了一行顯示完整獎品名的需求。
 

  我們在做設計前,也一定盡量了解全局信息,這樣會對自己執行的時候有很大幫助,避免沒有必要的時間浪費。
 

  2.你的滑桿拉到頭試試
 

  很久之前做過一個視頻播放器的需求,其實里面的細節還蠻多的,舉一個例子吧,被開發吐槽過,說考慮的不夠全面,哈哈。
 

  播放器都有滑桿:

 

UI設計中踩過的坑

 

  這樣看也沒有啥問題,看著間距也都還挺舒服,但是當我把滑桿的原點拉到最開頭的時候,問題就出現了:

 

UI設計中踩過的坑

 

  由于時間與進度條的間距太近,導致滑桿拉到最開端的時候,兩個元素疊到一起。
 

  這就是沒有把所有情況考慮清楚出現的問題,所以文字與進度條保持一定間距是很有必要的。
 

  我們可以看下愛奇藝的默認間距就很大:

 

UI設計中踩過的坑

 

  大家下次在做播放器需求的時候,一定要注意下哦。
 

  3.只考慮了暗色圖片,淺色的呢?
 

  其實我們做設計稿的時候,很容易沉浸在最美方案當中,無法自撥,這就導致后續的全面性、擴展性不夠,再舉個例子,比如做詳情頁的時候,我們在頂部導航欄設計成這樣:

 

UI設計中踩過的坑

 

  又看似沒什么問題,但是當圖片變成白色,問題就會出現,導航欄的圖標看不清了:

 

UI設計中踩過的坑

 

  所以只有想清楚所有情況,才有可能給出比較穩妥的方案,比如頂部加一個黑色蒙層,或者圖標下面加一點黑色投影:

 

UI設計中踩過的坑

 

  都是可以的。
 

  4.語種一變,讓你猝不及防
 

  我們在做按鈕規范的時候,經常會忽略一點,就是文字極限值的情況,比如文字和按鈕邊距最小距離是多少:

 

UI設計中踩過的坑

 

  有人會說,我們按鈕會限制字數,不可能會有那么長的情況,但是如果你的項目設計到多語種切換,一換語種,問題就會暴漏:

 

UI設計中踩過的坑

 

  所以我們一定要給出文字與按鈕的安全邊距,只要超過這個邊距,文字就必須要打....
 

  不僅是按鈕,有所場景都要考慮清楚極限值的情況,這樣才能保證不會出錯.
 

  總結
 

  以上就是今天分享的內容,都是以前遇到過的一些坑,我幫大家先踩了,所以你們后面做的時候就可以盡量避免啦,這也算是增長工作經驗的一種方式。因此,您現在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關在該領域工作的更多相關文章。



 

?2007-2019/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

?2007-2019/ www.biancheng38.icu 北京漫動者教育科技有限公司 備案號:京ICP備12034770號 監督電話:010-62568622 郵箱:bjaaa@aaaedu.cc

俺也去俺也来五月丁香