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

如何讓UI設計稿百分百被實現(xiàn)，最有效的標注攻略!

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

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

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

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

標注的工具

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

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


文本上下間隙

說回問題所在，為什么明明根據(jù)標注來做了，實現(xiàn)后的效果還是與設計稿不同？

因為程序員在輸入文本時，他們的文本框（Lable）并不是完全緊貼文字的，而我們習慣的標注方式以及插件提供的標注方式，都是緊貼文字標注的。

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

UI標注

程序員實現(xiàn)

所以往往實現(xiàn)出來的時候，間距都會比較寬。為了解決這個問題，我跟程序員進行了多次溝通，并且通過反復實驗。

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

iOS 文本框

Android 文本框

也就是說，我們在標注的時候，把文本框給做出來。再去進行標注，可以最大限度讓實際實現(xiàn)的無限接近于設計稿。

可能有人會有疑問：

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

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

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

第2個問題，畫文本框固然會增加工作量。但是相對于先走查，然后調整，然后再走查驗收。兩個工作量對比起來，畫文本框的時間實在微不足道。

當然，這只是我自己的總結一個方法，如果大家有更好的方法，歡迎指導，也希望可以一起交流，共同成長。

如果對你有所幫助，關注一下，點個贊唄。

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定