激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

如何讓UI設(shè)計(jì)稿百分百被實(shí)現(xiàn)，最有效的標(biāo)注攻略!

發(fā)布時(shí)間：2024-03-03 18:04:13 瀏覽量：193次

大家好，我是No.2，從事UI已經(jīng)接近5年了，今天給大家分享一些關(guān)于標(biāo)注的技巧。

標(biāo)注是UI提供給程序員必不可少的東西，程序員按照標(biāo)注文件實(shí)現(xiàn)UI界面的搭建。

一般在APP被實(shí)現(xiàn)出來(lái)后，設(shè)計(jì)師還要進(jìn)行走查驗(yàn)收，會(huì)發(fā)現(xiàn)實(shí)現(xiàn)出來(lái)的界面跟設(shè)計(jì)稿總有出入。但是檢查代碼卻發(fā)現(xiàn)，程序員是按照標(biāo)注的數(shù)值寫(xiě)的，那原因是什么？我們一起來(lái)探討。

標(biāo)注的工具

在講原因之前，先來(lái)講講怎么標(biāo)注。現(xiàn)在標(biāo)注已經(jīng)非常簡(jiǎn)單了，有很多的輔助工具可以使用。

我推薦 “藍(lán)湖” ，大家可以去搜這個(gè)名字就能找到。只要上傳設(shè)計(jì)源文件，標(biāo)注就自動(dòng)生成，非常方便。具體使用方法也很簡(jiǎn)單，大家到藍(lán)湖的官網(wǎng)看一下即可，在此我就不多做描述了。


文本上下間隙

說(shuō)回問(wèn)題所在，為什么明明根據(jù)標(biāo)注來(lái)做了，實(shí)現(xiàn)后的效果還是與設(shè)計(jì)稿不同？

因?yàn)槌绦騿T在輸入文本時(shí)，他們的文本框（Lable）并不是完全緊貼文字的，而我們習(xí)慣的標(biāo)注方式以及插件提供的標(biāo)注方式，都是緊貼文字標(biāo)注的。

如圖。（為方便新人閱讀，單位統(tǒng)一使用PX。實(shí)際標(biāo)注中，iOS用PT，Android用DP）

UI標(biāo)注

程序員實(shí)現(xiàn)

所以往往實(shí)現(xiàn)出來(lái)的時(shí)候，間距都會(huì)比較寬。為了解決這個(gè)問(wèn)題，我跟程序員進(jìn)行了多次溝通，并且通過(guò)反復(fù)實(shí)驗(yàn)。

得出了在實(shí)現(xiàn)時(shí)，不同字體大小對(duì)應(yīng)的文本框高度。iOS跟Android的文本框高度也不同，如圖：

iOS 文本框

Android 文本框

也就是說(shuō)，我們?cè)跇?biāo)注的時(shí)候，把文本框給做出來(lái)。再去進(jìn)行標(biāo)注，可以最大限度讓實(shí)際實(shí)現(xiàn)的無(wú)限接近于設(shè)計(jì)稿。

可能有人會(huì)有疑問(wèn)：

  • 這樣做是否有意義，看上去相差并不多，實(shí)現(xiàn)效果并不會(huì)特別差？
  • 這樣是否增加了UI的工作量？降低了效率？

首先解答第1個(gè)問(wèn)題，對(duì)于一些文本較少的頁(yè)面，相差是不多，如果頁(yè)面文本有3-5處？整體頁(yè)面偏差可能就達(dá)到10-20px了。

如果文本更多，偏差就會(huì)積累起來(lái)，對(duì)于實(shí)現(xiàn)效果的影響也是比較大的。

第2個(gè)問(wèn)題，畫(huà)文本框固然會(huì)增加工作量。但是相對(duì)于先走查，然后調(diào)整，然后再走查驗(yàn)收。兩個(gè)工作量對(duì)比起來(lái)，畫(huà)文本框的時(shí)間實(shí)在微不足道。

當(dāng)然，這只是我自己的總結(jié)一個(gè)方法，如果大家有更好的方法，歡迎指導(dǎo)，也希望可以一起交流，共同成長(zhǎng)。

如果對(duì)你有所幫助，關(guān)注一下，點(diǎn)個(gè)贊唄。

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定