UI設(shè)計(jì)中踩過的坑

　　總有人說ui設(shè)計(jì)師，天天畫個(gè)線框圖，還拿那么高工資!
 

　　膚淺!
 

　　幼稚!
 

　　切!
 

　　你是不了解，UI設(shè)計(jì)并不是把一張圖做好就完事了，要考慮它的可用性，延展性，全面性、實(shí)現(xiàn)成本，還原程度等等等等.....
 

　　因素可多了呢!
 

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

　　今天AAA教育郭老師就分享幾個(gè)自己遇到過的“沒有考慮全面”的幾個(gè)小案例，幫你增加點(diǎn)工作經(jīng)驗(yàn)，以后你遇到類似的坑，可以盡量避免一下。
 

　　大綱如下：
 

　　1.文字一多就放不下了
 

　　2.你的滑桿拉到頭試試
 

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

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

　　1.文字一多就放不下了

 

　　之前在做抽獎(jiǎng)頁面的時(shí)候，每個(gè)信息模塊的排布最初是這樣的：
 

　　看起來似乎沒有問題，在設(shè)計(jì)層面也還算ok，但當(dāng)與產(chǎn)品溝通后，才知道這樣的布局是有問題的，為什么?
 

　　因?yàn)槲覀儧]有了解全局的信息情況，比如很多獎(jiǎng)品的名稱會有很多文字，并且會顯示獎(jiǎng)品數(shù)量。
 

　　這樣的話，原來的結(jié)構(gòu)擴(kuò)展性不夠友好，顯示不了幾個(gè)字就要折行，一折行就會密密麻麻全是文字，并且數(shù)量也不好區(qū)分顯示：

 

　　在了解了全局信息后，才調(diào)整了上下布局：

 

　　這樣擴(kuò)展性就好很多，信息足夠清晰，也基本保證了一行顯示完整獎(jiǎng)品名的需求。
 

　　我們在做設(shè)計(jì)前，也一定盡量了解全局信息，這樣會對自己執(zhí)行的時(shí)候有很大幫助，避免沒有必要的時(shí)間浪費(fèi)。
 

　　2.你的滑桿拉到頭試試
 

　　很久之前做過一個(gè)視頻播放器的需求，其實(shí)里面的細(xì)節(jié)還蠻多的，舉一個(gè)例子吧，被開發(fā)吐槽過，說考慮的不夠全面，哈哈。
 

　　播放器都有滑桿：

 

　　這樣看也沒有啥問題，看著間距也都還挺舒服，但是當(dāng)我把滑桿的原點(diǎn)拉到最開頭的時(shí)候，問題就出現(xiàn)了：

 

　　由于時(shí)間與進(jìn)度條的間距太近，導(dǎo)致滑桿拉到最開端的時(shí)候，兩個(gè)元素疊到一起。
 

　　這就是沒有把所有情況考慮清楚出現(xiàn)的問題，所以文字與進(jìn)度條保持一定間距是很有必要的。
 

　　我們可以看下愛奇藝的默認(rèn)間距就很大：

 

　　大家下次在做播放器需求的時(shí)候，一定要注意下哦。
 

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

　　其實(shí)我們做設(shè)計(jì)稿的時(shí)候，很容易沉浸在最美方案當(dāng)中，無法自撥，這就導(dǎo)致后續(xù)的全面性、擴(kuò)展性不夠，再舉個(gè)例子，比如做詳情頁的時(shí)候，我們在頂部導(dǎo)航欄設(shè)計(jì)成這樣：

 

　　又看似沒什么問題，但是當(dāng)圖片變成白色，問題就會出現(xiàn)，導(dǎo)航欄的圖標(biāo)看不清了：

 

　　所以只有想清楚所有情況，才有可能給出比較穩(wěn)妥的方案，比如頂部加一個(gè)黑色蒙層，或者圖標(biāo)下面加一點(diǎn)黑色投影：

 

　　都是可以的。
 

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

　　我們在做按鈕規(guī)范的時(shí)候，經(jīng)常會忽略一點(diǎn)，就是文字極限值的情況，比如文字和按鈕邊距最小距離是多少：

 

　　有人會說，我們按鈕會限制字?jǐn)?shù)，不可能會有那么長的情況，但是如果你的項(xiàng)目設(shè)計(jì)到多語種切換，一換語種，問題就會暴漏：

 

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

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

　　總結(jié)
 

　　以上就是今天分享的內(nèi)容，都是以前遇到過的一些坑，我?guī)痛蠹蚁炔攘耍阅銈兒竺孀龅臅r(shí)候就可以盡量避免啦，這也算是增長工作經(jīng)驗(yàn)的一種方式。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。